@adia-ai/web-components 0.0.1

package/a2ui/renderer.js

@@ -0,0 +1,361 @@
+/**
+ * A2UI Renderer — processes A2UI messages and renders AdiaUI components.
+ *
+ * Usage:
+ *   import { A2UIRenderer } from './renderer.js';
+ *   const renderer = new A2UIRenderer(container);
+ *   renderer.process(message);
+ */
+
+import { resolveTag, registry } from './registry.js';
+
+export class A2UIRenderer {
+  #container;
+  #registry;
+  #surfaces = new Map();
+  #elements = new Map();
+  #prevProps = new Map();
+  #queue = [];
+  #rafId = null;
+  #batching = false;
+
+  constructor(container, reg = registry, { batch = false } = {}) {
+    this.#container = container;
+    this.#registry = reg;
+    this.#batching = batch;
+  }
+
+  process(message) {
+    if (!message) return;
+    if (this.#batching) {
+      this.#queue.push(message);
+      if (this.#rafId === null) {
+        this.#rafId = requestAnimationFrame(() => this.#flush());
+      }
+    } else {
+      this.#processOne(message);
+    }
+  }
+
+  #flush() {
+    this.#rafId = null;
+    const batch = this.#queue.splice(0);
+    for (const msg of batch) this.#processOne(msg);
+  }
+
+  #processOne(message) {
+    switch (message.type || message.messageType) {
+      case 'createSurface':    this.#createSurface(message); break;
+      case 'updateComponents': this.#updateComponents(message); break;
+      case 'updateDataModel':  this.#updateDataModel(message); break;
+      case 'wireComponents':   this.#wireComponents(message); break;
+      case 'deleteSurface':    this.#deleteSurface(message); break;
+      case 'meta':             break; // LLM self-critique — not renderable
+      default: console.warn('A2UI: unknown message type', message.type);
+    }
+  }
+
+  // ── wireComponents (lazy-loaded) ──
+
+  #wiringEngine = null;
+
+  async #wireComponents(message) {
+    if (!this.#wiringEngine) {
+      const { WiringEngine } = await import('./wiring-engine.js');
+      this.#wiringEngine = new WiringEngine({
+        updateDataModel: (surfaceId, path, data) => {
+          this.#updateDataModel({ surfaceId, path, value: data });
+        },
+        getElement: (surfaceId, componentId) => {
+          const surface = this.#surfaces.get(surfaceId);
+          return surface?.elements.get(componentId) || null;
+        },
+      });
+    }
+    await this.#wiringEngine.process(message);
+  }
+
+  async processStream(stream) {
+    for await (const message of stream) this.process(message);
+  }
+
+  // ── createSurface ──
+
+  #createSurface({ surfaceId, catalogId }) {
+    if (this.#surfaces.has(surfaceId)) return;
+
+    const root = document.createElement('div');
+    root.setAttribute('data-a2ui-surface', surfaceId);
+    if (catalogId) root.setAttribute('data-catalog', catalogId);
+    this.#container.appendChild(root);
+
+    this.#surfaces.set(surfaceId, {
+      root,
+      elements: new Map(),
+      dataModel: {},
+      bindings: new Map(),
+    });
+  }
+
+  // ── updateComponents ──
+
+  #updateComponents({ surfaceId, components }) {
+    let surface = this.#surfaces.get(surfaceId);
+
+    if (!surface) {
+      surface = {
+        root: this.#container,
+        elements: new Map(),
+        dataModel: {},
+        bindings: new Map(),
+      };
+      this.#surfaces.set(surfaceId, surface);
+    }
+
+    // First pass: create/update elements
+    for (const comp of components) {
+      if (!comp.id && comp.id !== 0) continue;
+      if (comp.component === 'ContextBindings') {
+        surface.contextBindings = comp;
+        continue;
+      }
+
+      try {
+        let el = surface.elements.get(comp.id);
+        const tagName = comp.component === 'Text'
+          ? this.#resolveTextTag(comp.variant, comp)
+          : resolveTag(comp.component, this.#registry);
+
+        if (!tagName) {
+          if (!el) {
+            el = document.createElement('div');
+            el.setAttribute('data-a2ui-id', comp.id);
+            el.setAttribute('data-a2ui-unknown', comp.component);
+            el.textContent = `[unknown: ${comp.component}]`;
+            surface.elements.set(comp.id, el);
+            this.#elements.set(comp.id, el);
+          }
+          continue;
+        }
+
+        if (!el) {
+          el = document.createElement(tagName);
+          el.setAttribute('data-a2ui-id', comp.id);
+          surface.elements.set(comp.id, el);
+          this.#elements.set(comp.id, el);
+        } else if (el.localName !== tagName) {
+          const newEl = document.createElement(tagName);
+          newEl.setAttribute('data-a2ui-id', comp.id);
+          el.replaceWith(newEl);
+          el = newEl;
+          surface.elements.set(comp.id, el);
+          this.#elements.set(comp.id, el);
+        }
+
+        comp._surfaceId = surfaceId;
+
+        const hasBindings = Object.values(comp).some(v => v && typeof v === 'object' && v.path);
+        if (hasBindings) surface.bindings.set(comp.id, comp);
+
+        this.#applyProps(el, comp);
+      } catch (err) {
+        console.warn(`A2UI: component "${comp.id}" (${comp.component}) failed:`, err.message);
+      }
+    }
+
+    // Build parent map for cycle detection
+    const parentMap = new Map();
+    for (const comp of components) {
+      for (const childId of (Array.isArray(comp.children) ? comp.children : [])) {
+        parentMap.set(childId, comp.id);
+      }
+      if (comp.child) parentMap.set(comp.child, comp.id);
+    }
+
+    const wouldCycle = (parentId, childId) => {
+      const visited = new Set();
+      let cursor = parentId;
+      while (cursor != null) {
+        if (cursor === childId) return true;
+        if (visited.has(cursor)) return true;
+        visited.add(cursor);
+        cursor = parentMap.get(cursor);
+      }
+      return false;
+    };
+
+    // Second pass: build tree
+    for (const comp of components) {
+      const el = surface.elements.get(comp.id);
+      if (!el) continue;
+
+      try {
+        const childIds = Array.isArray(comp.children) ? comp.children : [];
+        for (const childId of childIds) {
+          if (childId === comp.id || wouldCycle(comp.id, childId)) continue;
+          const childEl = surface.elements.get(childId);
+          if (childEl && childEl.parentElement !== el) el.appendChild(childEl);
+        }
+
+        if (comp.child && comp.child !== comp.id && !wouldCycle(comp.id, comp.child)) {
+          const childEl = surface.elements.get(comp.child);
+          if (childEl && childEl.parentElement !== el) el.appendChild(childEl);
+        }
+      } catch (err) {
+        console.warn(`A2UI: tree build failed for "${comp.id}":`, err.message);
+      }
+    }
+
+    // Attach root
+    const rootComp = components.find(c => c.id === 'root');
+    if (rootComp) {
+      const rootEl = surface.elements.get('root');
+      if (rootEl && rootEl.parentElement !== surface.root) {
+        surface.root.appendChild(rootEl);
+      }
+    }
+  }
+
+  // ── Apply props ──
+
+  static #JS_PROPS = new Set(['data', 'columns', 'options', 'itemRenderer', 'textContent']);
+
+  // Semantic HTML variants — these render as native tags (h1, p, small)
+  // Everything else renders as <text-ui> which is now display:inline
+  static #TEXT_TAG_MAP = {
+    h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6',
+    body: 'p', caption: 'small',
+  };
+
+  #resolveTextTag(variant, comp) {
+    // Semantic HTML variants get native tags (accessibility)
+    if (!comp?.slot && A2UIRenderer.#TEXT_TAG_MAP[variant]) {
+      return A2UIRenderer.#TEXT_TAG_MAP[variant];
+    }
+    // Everything else → text-ui (inline, supports truncate/lines/variant)
+    return 'text-ui';
+  }
+
+  #applyProps(el, comp) {
+    const skip = new Set(['id', 'component', 'children', 'child', '_surfaceId']);
+    // Skip variant attr when the tag IS the variant (h1 for h1, p for body, small for caption)
+    if (comp.component === 'Text' && comp.variant && !comp.slot && A2UIRenderer.#TEXT_TAG_MAP[comp.variant]) {
+      skip.add('variant');
+    }
+
+    const prev = this.#prevProps.get(comp.id);
+    const next = {};
+
+    for (const [key, value] of Object.entries(comp)) {
+      if (skip.has(key)) continue;
+
+      const isBinding = value && typeof value === 'object' && value.path;
+      const resolved = this.#resolveValue(value, comp._surfaceId);
+      next[key] = resolved;
+
+      if (prev && Object.is(prev[key], resolved)) continue;
+
+      if (key === 'style' && typeof resolved === 'string') {
+        el.style.cssText = resolved;
+        continue;
+      }
+
+      if (A2UIRenderer.#JS_PROPS.has(key) && resolved != null) {
+        el[key] = resolved;
+        continue;
+      }
+
+      if (typeof resolved === 'boolean') {
+        if (resolved) el.setAttribute(key, '');
+        else el.removeAttribute(key);
+      } else if (resolved != null) {
+        el.setAttribute(this.#toAttr(key), String(resolved));
+      } else if (isBinding) {
+        el.removeAttribute(this.#toAttr(key));
+      }
+    }
+
+    if (prev) {
+      for (const key of Object.keys(prev)) {
+        if (!(key in next) && !skip.has(key)) el.removeAttribute(this.#toAttr(key));
+      }
+    }
+
+    this.#prevProps.set(comp.id, next);
+  }
+
+  #toAttr(name) {
+    return name.replace(/([A-Z])/g, '-$1').toLowerCase();
+  }
+
+  #resolveValue(value, surfaceId) {
+    if (value == null) return null;
+    if (typeof value !== 'object') return value;
+    if (value.path) {
+      const surface = surfaceId ? this.#surfaces.get(surfaceId) : null;
+      return surface ? this.#getByPath(surface.dataModel, value.path) : value.path;
+    }
+    return value;
+  }
+
+  #getByPath(obj, path) {
+    if (!path || path === '/') return obj;
+    return path.split('/').filter(Boolean).reduce((o, k) => o?.[k], obj);
+  }
+
+  // ── updateDataModel ──
+
+  #updateDataModel({ surfaceId, path, value }) {
+    const surface = this.#surfaces.get(surfaceId);
+    if (!surface) return;
+
+    if (!path || path === '/') {
+      surface.dataModel = value ?? {};
+    } else {
+      const parts = path.split('/').filter(Boolean);
+      let cur = surface.dataModel;
+      for (let i = 0; i < parts.length - 1; i++) {
+        if (cur[parts[i]] == null) cur[parts[i]] = {};
+        cur = cur[parts[i]];
+      }
+      cur[parts[parts.length - 1]] = value;
+    }
+
+    for (const [compId, comp] of surface.bindings) {
+      const el = surface.elements.get(compId);
+      if (el) this.#applyProps(el, comp);
+    }
+  }
+
+  // ── deleteSurface ──
+
+  #deleteSurface({ surfaceId }) {
+    const surface = this.#surfaces.get(surfaceId);
+    if (!surface) return;
+    this.#wiringEngine?.teardown(surfaceId);
+    for (const [id] of surface.elements) this.#elements.delete(id);
+    surface.root.remove();
+    this.#surfaces.delete(surfaceId);
+  }
+
+  // ── Public ──
+
+  getSurface(id) { return this.#surfaces.get(id); }
+  getElement(id) { return this.#elements.get(id); }
+  get surfaces() { return [...this.#surfaces.keys()]; }
+
+  reset() {
+    if (this.#rafId !== null) { cancelAnimationFrame(this.#rafId); this.#rafId = null; }
+    this.#queue.length = 0;
+    for (const [, s] of this.#surfaces) {
+      if (s.root === this.#container) s.root.innerHTML = '';
+      else s.root.remove();
+    }
+    this.#surfaces.clear();
+    this.#elements.clear();
+    this.#prevProps.clear();
+  }
+
+  set batching(v) { this.#batching = !!v; }
+  get batching() { return this.#batching; }
+}

package/a2ui/root.js

@@ -0,0 +1,152 @@
+/**
+ * <a2ui-root> — A2UI protocol surface.
+ * Connects to a stream source and renders A2UI messages as AdiaUI components.
+ *
+ * <a2ui-root src="/api/agent" transport="sse"></a2ui-root>
+ * <a2ui-root src="ws://localhost:8080" transport="ws"></a2ui-root>
+ *
+ * Events:
+ *   a2ui-connected — stream connected
+ *   a2ui-message   — each message received (detail: { message })
+ *   a2ui-error     — stream error (detail: { error })
+ *   a2ui-closed    — stream ended
+ *   a2ui-action    — user interaction (detail: { name, sourceComponentId, context })
+ */
+
+import { AdiaElement } from '@core/element.js';
+import { A2UIRenderer } from './renderer.js';
+import { registry } from './registry.js';
+import { sseStream, wsStream, jsonlStream, mcpStream } from './stream.js';
+
+class AdiaA2UIRoot extends AdiaElement {
+  static properties = {
+    src:       { type: String,  default: '',    reflect: true },
+    transport: { type: String,  default: 'sse', reflect: true },
+    loading:   { type: Boolean, default: false, reflect: true },
+    active:    { type: Boolean, default: false, reflect: true },
+    batch:     { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #renderer = null;
+  #abortCtrl = null;
+
+  connected() {
+    this.#renderer = new A2UIRenderer(this, registry, { batch: this.batch });
+
+    this.addEventListener('click', (e) => {
+      const actionEl = e.target.closest('[data-action]');
+      if (actionEl) {
+        this.dispatchEvent(new CustomEvent('a2ui-action', {
+          bubbles: true,
+          detail: {
+            name: actionEl.getAttribute('data-action'),
+            sourceComponentId: actionEl.getAttribute('data-a2ui-id') || '',
+            timestamp: Date.now(),
+            context: {},
+          },
+        }));
+      }
+    });
+  }
+
+  render() {
+    if (this.src && !this.active) this.#connect();
+  }
+
+  async #connect() {
+    this.#abortCtrl?.abort();
+    this.#abortCtrl = new AbortController();
+    const signal = this.#abortCtrl.signal;
+
+    this.loading = true;
+    this.active = false;
+
+    let stream;
+    try {
+      switch (this.transport) {
+        case 'sse':
+          stream = sseStream(this.src, { signal, catalog: registry });
+          break;
+        case 'ws':
+        case 'websocket':
+          stream = wsStream(this.src, { signal, catalog: registry });
+          break;
+        case 'jsonl':
+          stream = jsonlStream(this.src, { signal, catalog: registry });
+          break;
+        case 'mcp':
+          stream = mcpStream(this.src, {
+            signal,
+            catalog: registry,
+            onAction: (name, params) => {
+              this.dispatchEvent(new CustomEvent('a2ui-action', {
+                bubbles: true,
+                detail: { name, params, timestamp: Date.now() },
+              }));
+              return Promise.resolve({ status: 'dispatched' });
+            },
+          });
+          break;
+        default:
+          console.warn(`a2ui-root: unknown transport "${this.transport}"`);
+          return;
+      }
+
+      this.active = true;
+      this.loading = false;
+      this.dispatchEvent(new Event('a2ui-connected', { bubbles: true }));
+
+      for await (const message of stream) {
+        if (signal.aborted) break;
+        this.#renderer.process(message);
+        this.dispatchEvent(new CustomEvent('a2ui-message', {
+          bubbles: true,
+          detail: { message },
+        }));
+      }
+    } catch (err) {
+      if (!signal.aborted) {
+        this.dispatchEvent(new CustomEvent('a2ui-error', {
+          bubbles: true,
+          detail: { error: err },
+        }));
+      }
+    }
+
+    this.active = false;
+    this.loading = false;
+    this.dispatchEvent(new Event('a2ui-closed', { bubbles: true }));
+  }
+
+  process(message) {
+    if (!this.#renderer) {
+      this.#renderer = new A2UIRenderer(this, registry);
+    }
+    this.#renderer.process(message);
+  }
+
+  processAll(messages) {
+    for (const msg of messages) this.process(msg);
+  }
+
+  reset() {
+    this.#renderer?.reset();
+  }
+
+  disconnect() {
+    this.#abortCtrl?.abort();
+    this.active = false;
+  }
+
+  disconnected() {
+    this.#abortCtrl?.abort();
+    this.active = false;
+  }
+
+  get renderer() { return this.#renderer; }
+}
+customElements.define('a2ui-root', AdiaA2UIRoot);
+
+export { AdiaA2UIRoot };