@adia-ai/web-components 0.0.2 → 0.0.4

package/a2ui/renderer.js

@@ -1,361 +0,0 @@
-/**
- * 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/stream.js

@@ -1,243 +0,0 @@
-/**
- * A2UI Stream Adapters — connect to various transports and yield A2UI messages.
- *
- * Each adapter returns an AsyncIterable<A2UIMessage>.
- *
- * Usage:
- *   const stream = sseStream('/api/agent');
- *   for await (const message of stream) { renderer.process(message); }
- */
-
-/**
- * SSE (Server-Sent Events) stream adapter.
- */
-export function sseStream(url, options = {}) {
-  let finalUrl = url;
-  if (options.catalog) {
-    const types = options.catalog instanceof Map ? [...options.catalog.keys()] : Object.keys(options.catalog);
-    const sep = url.includes('?') ? '&' : '?';
-    finalUrl = `${url}${sep}a2ui_catalog=${encodeURIComponent(types.join(','))}`;
-  }
-
-  return {
-    [Symbol.asyncIterator]() {
-      const eventSource = new EventSource(finalUrl);
-      const queue = [];
-      let resolve = null;
-      let done = false;
-
-      eventSource.onmessage = (e) => {
-        try {
-          const message = JSON.parse(e.data);
-          if (resolve) { const r = resolve; resolve = null; r({ value: message, done: false }); }
-          else queue.push(message);
-        } catch { console.warn('A2UI SSE: invalid JSON', e.data); }
-      };
-
-      eventSource.onerror = () => {
-        done = true;
-        eventSource.close();
-        if (resolve) { const r = resolve; resolve = null; r({ value: undefined, done: true }); }
-      };
-
-      if (options.signal) {
-        options.signal.addEventListener('abort', () => {
-          done = true;
-          eventSource.close();
-          if (resolve) { const r = resolve; resolve = null; r({ value: undefined, done: true }); }
-        });
-      }
-
-      return {
-        next() {
-          if (queue.length > 0) return Promise.resolve({ value: queue.shift(), done: false });
-          if (done) return Promise.resolve({ value: undefined, done: true });
-          return new Promise(r => { resolve = r; });
-        },
-        return() {
-          done = true;
-          eventSource.close();
-          return Promise.resolve({ value: undefined, done: true });
-        },
-      };
-    },
-  };
-}
-
-/**
- * WebSocket stream adapter.
- */
-export function wsStream(url, options = {}) {
-  return {
-    [Symbol.asyncIterator]() {
-      const ws = new WebSocket(url);
-      const queue = [];
-      let resolve = null;
-      let done = false;
-
-      ws.onopen = () => {
-        if (options.catalog) {
-          const types = options.catalog instanceof Map ? [...options.catalog.keys()] : Object.keys(options.catalog);
-          ws.send(JSON.stringify({ type: 'a2ui:catalog', supportedTypes: types }));
-        }
-      };
-
-      ws.onmessage = (e) => {
-        try {
-          const message = JSON.parse(e.data);
-          if (resolve) { const r = resolve; resolve = null; r({ value: message, done: false }); }
-          else queue.push(message);
-        } catch { console.warn('A2UI WS: invalid JSON', e.data); }
-      };
-
-      ws.onclose = () => {
-        done = true;
-        if (resolve) { const r = resolve; resolve = null; r({ value: undefined, done: true }); }
-      };
-
-      ws.onerror = () => { done = true; ws.close(); };
-
-      return {
-        next() {
-          if (queue.length > 0) return Promise.resolve({ value: queue.shift(), done: false });
-          if (done) return Promise.resolve({ value: undefined, done: true });
-          return new Promise(r => { resolve = r; });
-        },
-        return() { done = true; ws.close(); return Promise.resolve({ value: undefined, done: true }); },
-      };
-    },
-  };
-}
-
-/**
- * Array/mock stream adapter — for testing.
- */
-export function mockStream(messages, delay = 0) {
-  return {
-    async *[Symbol.asyncIterator]() {
-      for (const msg of messages) {
-        if (delay > 0) await new Promise(r => setTimeout(r, delay));
-        yield msg;
-      }
-    },
-  };
-}
-
-/**
- * MCP stream adapter — connects to MCP server, yields A2UI messages.
- */
-export function mcpStream(url, options = {}) {
-  return {
-    async *[Symbol.asyncIterator]() {
-      const { signal, catalog, onAction } = options;
-
-      const ws = new WebSocket(url);
-      await new Promise((resolve, reject) => {
-        ws.onopen = resolve;
-        ws.onerror = reject;
-        if (signal) signal.addEventListener('abort', () => {
-          ws.close();
-          reject(new DOMException('Aborted', 'AbortError'));
-        }, { once: true });
-      });
-
-      if (catalog) {
-        const types = catalog instanceof Map ? [...catalog.keys()] : Object.keys(catalog);
-        ws.send(JSON.stringify({
-          jsonrpc: '2.0',
-          method: 'a2ui/catalog',
-          params: { supportedTypes: types },
-        }));
-      }
-
-      const queue = [];
-      let resolve = null;
-      let done = false;
-
-      ws.onmessage = (e) => {
-        try {
-          const rpc = JSON.parse(e.data);
-
-          if (rpc.result?.content) {
-            for (const block of rpc.result.content) {
-              if (block.type === 'resource' && block.resource?.mimeType === 'application/json+a2ui') {
-                const messages = JSON.parse(block.resource.text);
-                for (const msg of (Array.isArray(messages) ? messages : [messages])) {
-                  if (resolve) { const r = resolve; resolve = null; r({ value: msg, done: false }); }
-                  else queue.push(msg);
-                }
-              } else if (block.type === 'text') {
-                try {
-                  const msg = JSON.parse(block.text);
-                  if (msg.type && (msg.type.startsWith('create') || msg.type.startsWith('update') || msg.type.startsWith('delete'))) {
-                    if (resolve) { const r = resolve; resolve = null; r({ value: msg, done: false }); }
-                    else queue.push(msg);
-                  }
-                } catch { /* not A2UI */ }
-              }
-            }
-          }
-
-          if (rpc.method === 'a2ui/action' && onAction) {
-            onAction(rpc.params?.name, rpc.params?.arguments).then(result => {
-              ws.send(JSON.stringify({ jsonrpc: '2.0', id: rpc.id, result }));
-            }).catch(err => {
-              ws.send(JSON.stringify({ jsonrpc: '2.0', id: rpc.id, error: { code: -1, message: err.message } }));
-            });
-          }
-        } catch { console.warn('A2UI MCP: invalid message', e.data); }
-      };
-
-      ws.onclose = () => { done = true; if (resolve) { const r = resolve; resolve = null; r({ value: undefined, done: true }); } };
-      ws.onerror = () => { done = true; ws.close(); };
-      if (signal) signal.addEventListener('abort', () => { done = true; ws.close(); if (resolve) { const r = resolve; resolve = null; r({ value: undefined, done: true }); } });
-
-      while (!done || queue.length > 0) {
-        if (queue.length > 0) { yield queue.shift(); }
-        else if (done) { break; }
-        else {
-          const v = await new Promise(r => { resolve = r; });
-          if (v.done) break;
-          yield v.value;
-        }
-      }
-    },
-  };
-}
-
-/**
- * JSONL (newline-delimited JSON) stream adapter via fetch.
- */
-export function jsonlStream(url, options = {}) {
-  return {
-    async *[Symbol.asyncIterator]() {
-      const headers = {};
-      if (options.catalog) {
-        const types = options.catalog instanceof Map ? [...options.catalog.keys()] : Object.keys(options.catalog);
-        headers['X-A2UI-Catalog'] = types.join(',');
-      }
-      const response = await fetch(url, { signal: options.signal, headers });
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder();
-      let buffer = '';
-
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-        const lines = buffer.split('\n');
-        buffer = lines.pop();
-        for (const line of lines) {
-          const trimmed = line.trim();
-          if (!trimmed) continue;
-          try { yield JSON.parse(trimmed); }
-          catch { console.warn('A2UI JSONL: invalid JSON', trimmed); }
-        }
-      }
-      if (buffer.trim()) {
-        try { yield JSON.parse(buffer.trim()); }
-        catch { /* ignore */ }
-      }
-    },
-  };
-}