@adia-ai/web-components 0.0.1 → 0.0.3

package/components/toolbar/toolbar.js

@@ -20,8 +20,8 @@
  * Platform: Popover API (top-layer) + CSS Anchor Positioning via @core/anchor.js.
  */
 
-import { AdiaElement } from '@core/element.js';
-import { anchorPopover } from '@core/anchor.js';
+import { AdiaElement } from '../../core/element.js';
+import { anchorPopover } from '../../core/anchor.js';
 
 const SPILLOVER_ATTR = 'data-toolbar-spillover';
 const SPILLOVER_MENU_ATTR = 'data-toolbar-spillover-menu';
@@ -48,6 +48,7 @@ class AdiaToolbar extends AdiaElement {
   #spilloverCleanup = null;
   #measuring = false;
   #reflowQueued = false;
+  #rafId = null;
 
   connected() {
     this.setAttribute('role', 'toolbar');
@@ -111,7 +112,8 @@ class AdiaToolbar extends AdiaElement {
       placement: 'bottom-end',
       gap: 4,
     });
-    requestAnimationFrame(() => {
+    this.#rafId = requestAnimationFrame(() => {
+      this.#rafId = null;
       document.addEventListener('pointerdown', this.#onOutside, true);
       document.addEventListener('keydown', this.#onKey, true);
     });
@@ -121,6 +123,10 @@ class AdiaToolbar extends AdiaElement {
     this.#spilloverCleanup?.();
     this.#spilloverCleanup = null;
     if (this.#popover?.matches(':popover-open')) this.#popover.hidePopover?.();
+    if (this.#rafId != null) {
+      cancelAnimationFrame(this.#rafId);
+      this.#rafId = null;
+    }
     document.removeEventListener('pointerdown', this.#onOutside, true);
     document.removeEventListener('keydown', this.#onKey, true);
   }
@@ -168,6 +174,10 @@ class AdiaToolbar extends AdiaElement {
       // Keep listeners cleaned up if closed externally.
       this.#spilloverCleanup?.();
       this.#spilloverCleanup = null;
+      if (this.#rafId != null) {
+        cancelAnimationFrame(this.#rafId);
+        this.#rafId = null;
+      }
       document.removeEventListener('pointerdown', this.#onOutside, true);
       document.removeEventListener('keydown', this.#onKey, true);
     }

package/components/toolbar/toolbar.yaml

@@ -14,11 +14,6 @@ props:
     type: boolean
     default: false
     reflect: true
-  vertical:
-    description: Stack items vertically (alias for orientation="vertical").
-    type: boolean
-    default: false
-    reflect: true
   align:
     description: Item alignment
     type: string
@@ -27,13 +22,6 @@ props:
     description: Gap between items
     type: string
     default: sm
-  orientation:
-    description: Layout direction. Vertical mode disables overflow.
-    type: string
-    default: horizontal
-    enum:
-      - horizontal
-      - vertical
   overflow:
     description: Overflow behavior
     type: string
@@ -41,13 +29,6 @@ props:
     enum:
       - menu
       - none
-  variant:
-    description: Visual style. Transparent removes background, border, and padding.
-    type: string
-    default: ""
-    enum:
-      - ""
-      - transparent
 events: {}
 slots: {}
 states:

package/components/tooltip/tooltip.a2ui.json

@@ -13,11 +13,6 @@
     }
   ],
   "properties": {
-    "anchor": {
-      "description": "ID of the anchor element that triggers the tooltip.",
-      "type": "string",
-      "default": ""
-    },
     "component": {
       "const": "Tooltip"
     },
@@ -26,11 +21,6 @@
       "type": "number",
       "default": 400
     },
-    "offset": {
-      "description": "Distance in pixels between the tooltip and the anchor element.",
-      "type": "number",
-      "default": 8
-    },
     "placement": {
       "description": "Preferred position relative to the anchor element.",
       "type": "string",

package/components/tooltip/tooltip.js

@@ -10,8 +10,8 @@
  * No click interaction — hover/focus only.
  */
 
-import { AdiaElement } from '@core/element.js';
-import { anchorPopover } from '@core/anchor.js';
+import { AdiaElement } from '../../core/element.js';
+import { anchorPopover } from '../../core/anchor.js';
 
 class AdiaTooltip extends AdiaElement {
   static properties = {

package/components/tooltip/tooltip.yaml

@@ -8,18 +8,10 @@ category: container
 version: 1
 description: Tooltip popup on hover/focus. Uses Popover API for top-layer rendering.
 props:
-  anchor:
-    description: ID of the anchor element that triggers the tooltip.
-    type: string
-    default: ""
   delay:
     description: Delay in milliseconds before showing the tooltip on hover.
     type: number
     default: 400
-  offset:
-    description: Distance in pixels between the tooltip and the anchor element.
-    type: number
-    default: 8
   placement:
     description: Preferred position relative to the anchor element.
     type: string

package/components/tree/tree.js

@@ -19,7 +19,7 @@
  *   tree-select — fired on tree-ui when an item is selected (detail: { item, text, value })
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaTree extends AdiaElement {
   static template = () => null;

package/components/upload/upload.js

@@ -4,7 +4,7 @@
  * Form-associated via AdiaFormElement + ElementInternals.
  */
 
-import { AdiaFormElement } from '@core/form.js';
+import { AdiaFormElement } from '../../core/form.js';
 
 class AdiaUpload extends AdiaFormElement {
   static properties = {

package/core/markdown.js

@@ -4,7 +4,7 @@
  * No dependencies. ~80 lines.
  *
  * Usage:
- *   import { renderMarkdown } from '@core/markdown.js';
+ *   import { renderMarkdown } from './markdown.js';
  *   element.innerHTML = renderMarkdown(text);
  */
 

package/core/provider.js

@@ -22,8 +22,8 @@
  *   ctrl.commands.navigate('/about');
  */
 
-import { AdiaElement } from '@core/element.js';
-import { BaseController } from '@core/controller.js';
+import { AdiaElement } from './element.js';
+import { BaseController } from './controller.js';
 
 // ═══════════════════════════════════════════════════════════════
 // NANO PROVIDER (inline — tiny base class)

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.0.1",
-  "description": "AdiaUI web components — vanilla custom elements + A2UI runtime. Training corpus lives in @adia-ai/gen-ui-training.",
+  "version": "0.0.3",
+  "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-utils.",
   "type": "module",
   "exports": {
     ".":         "./index.js",
     "./css":     "./index.css",
     "./a2ui":    "./a2ui/index.js",
-    "./core":    "./core/index.js"
+    "./core":    "./core/index.js",
+    "./patterns": "./patterns/index.js"
   },
   "files": [
     "core/",
@@ -26,6 +27,9 @@
     "./patterns/**/*.js",
     "./core/provider.js"
   ],
+  "dependencies": {
+    "@adia-ai/a2ui-utils": "^0.0.1"
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"

package/patterns/a2ui-root/a2ui-root.a2ui.json

@@ -0,0 +1,118 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/A2UIRoot.json",
+  "title": "A2UIRoot",
+  "description": "A2UI protocol surface. Connects to a stream source (SSE, WebSocket, JSONL, MCP) and renders A2UI messages as AdiaUI components via the `@adia-ai/a2ui-utils` renderer.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "active": {
+      "description": "True while the stream is connected and receiving messages.",
+      "type": "boolean",
+      "default": false
+    },
+    "batch": {
+      "description": "Batch renderer updates via requestAnimationFrame for large fan-in.",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "A2UIRoot"
+    },
+    "loading": {
+      "description": "True while the stream is connecting.",
+      "type": "boolean",
+      "default": false
+    },
+    "src": {
+      "description": "Stream source URL (endpoint for SSE/WebSocket, file path for JSONL, tool-call target for MCP).",
+      "type": "string",
+      "default": ""
+    },
+    "transport": {
+      "description": "Stream transport to use.",
+      "type": "string",
+      "enum": [
+        "sse",
+        "ws",
+        "websocket",
+        "jsonl",
+        "mcp"
+      ],
+      "default": "sse"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {
+      "a2ui-action": {
+        "description": "Fired when a child element with [data-action] is clicked. detail: { name, sourceComponentId, context }"
+      },
+      "a2ui-closed": {
+        "description": "Fired when the stream ends."
+      },
+      "a2ui-connected": {
+        "description": "Fired when the stream is established."
+      },
+      "a2ui-error": {
+        "description": "Fired when the stream errors. detail: { error }"
+      },
+      "a2ui-message": {
+        "description": "Fired for each A2UI message received. detail: { message }"
+      }
+    },
+    "examples": [],
+    "keywords": [
+      "a2ui",
+      "protocol",
+      "renderer",
+      "stream",
+      "surface",
+      "sse",
+      "websocket",
+      "jsonl",
+      "mcp"
+    ],
+    "name": "AdiaA2UIRoot",
+    "related": [
+      "canvas",
+      "inspector"
+    ],
+    "slots": {
+      "default": {
+        "description": "The rendered surface. Children are stamped by the A2UI renderer."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready to connect.",
+        "name": "idle"
+      },
+      {
+        "description": "Stream is connecting.",
+        "name": "loading"
+      },
+      {
+        "description": "Stream is connected and receiving messages.",
+        "name": "active"
+      }
+    ],
+    "synonyms": {},
+    "tag": "a2ui-root",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/{a2ui/root.js → patterns/a2ui-root/a2ui-root.js}

@@ -13,10 +13,15 @@
  *   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';
+import { AdiaElement } from '../../core/element.js';
+import {
+  A2UIRenderer,
+  registry,
+  sseStream,
+  wsStream,
+  jsonlStream,
+  mcpStream,
+} from '@adia-ai/a2ui-utils';
 
 class AdiaA2UIRoot extends AdiaElement {
   static properties = {

package/patterns/a2ui-root/a2ui-root.yaml

@@ -0,0 +1,76 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaA2UIRoot
+tag: a2ui-root
+component: A2UIRoot
+category: container
+version: 1
+description: A2UI protocol surface. Connects to a stream source (SSE, WebSocket, JSONL, MCP) and renders A2UI messages as AdiaUI components via the `@adia-ai/a2ui-utils` renderer.
+props:
+  src:
+    description: Stream source URL (endpoint for SSE/WebSocket, file path for JSONL, tool-call target for MCP).
+    type: string
+    default: ""
+  transport:
+    description: Stream transport to use.
+    type: string
+    default: sse
+    enum:
+      - sse
+      - ws
+      - websocket
+      - jsonl
+      - mcp
+  loading:
+    description: True while the stream is connecting.
+    type: boolean
+    default: false
+    reflect: true
+  active:
+    description: True while the stream is connected and receiving messages.
+    type: boolean
+    default: false
+    reflect: true
+  batch:
+    description: Batch renderer updates via requestAnimationFrame for large fan-in.
+    type: boolean
+    default: false
+events:
+  a2ui-connected:
+    description: Fired when the stream is established.
+  a2ui-message:
+    description: "Fired for each A2UI message received. detail: { message }"
+  a2ui-action:
+    description: "Fired when a child element with [data-action] is clicked. detail: { name, sourceComponentId, context }"
+  a2ui-error:
+    description: "Fired when the stream errors. detail: { error }"
+  a2ui-closed:
+    description: Fired when the stream ends.
+slots:
+  default:
+    description: The rendered surface. Children are stamped by the A2UI renderer.
+states:
+  - name: idle
+    description: Default, ready to connect.
+  - name: loading
+    description: Stream is connecting.
+  - name: active
+    description: Stream is connected and receiving messages.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+keywords:
+  - a2ui
+  - protocol
+  - renderer
+  - stream
+  - surface
+  - sse
+  - websocket
+  - jsonl
+  - mcp
+related:
+  - canvas
+  - inspector

package/patterns/adia-chat/adia-chat.js

@@ -1,6 +1,6 @@
-import { AdiaElement } from '@core/element.js';
-import { renderMarkdown } from '@core/markdown.js';
-import { streamChat } from '@llm/index.js';
+import { AdiaElement } from '../../core/element.js';
+import { renderMarkdown } from '../../core/markdown.js';
+import { streamChat } from '../../../gen-ui/llm/adapters/index.js';
 
 function escapeHTML(s) {
   return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

package/patterns/adia-chat/css/adia-chat.streaming.css

@@ -10,10 +10,10 @@ adia-chat-ui [data-cursor] {
   background: var(--chat-cursor-color);
   margin-inline-start: 1px;
   vertical-align: text-bottom;
-  animation: adia-chat-n-blink var(--chat-cursor-speed) step-end infinite;
+  animation: adia-chat-blink var(--chat-cursor-speed) step-end infinite;
 }
 
-@keyframes adia-chat-n-blink {
+@keyframes adia-chat-blink {
   50% { opacity: 0; }
 }
 

package/patterns/adia-editor/adia-editor.js

@@ -1,4 +1,4 @@
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 /**
  * <adia-editor-ui> — Editor layout pattern.

package/patterns/app-nav/app-nav.js

@@ -15,7 +15,7 @@
  * Event: nav-select (detail: { item, text, value })
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaAppNav extends AdiaElement {
   static properties = {

package/patterns/app-nav-group/app-nav-group.js

@@ -6,8 +6,8 @@
  * popover with its children instead of toggling inline expansion.
  */
 
-import { AdiaElement } from '@core/element.js';
-import { anchorPopover } from '@core/anchor.js';
+import { AdiaElement } from '../../core/element.js';
+import { anchorPopover } from '../../core/anchor.js';
 
 class AdiaAppNavGroup extends AdiaElement {
   static properties = {

package/patterns/app-nav-item/app-nav-item.js

@@ -6,7 +6,7 @@
  * a side-effect of calling nav.select(item) or user click.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaAppNavItem extends AdiaElement {
   static properties = {

package/patterns/app-shell/app-shell.js

@@ -19,7 +19,7 @@
  * sticky headers, scroll containment, mode composition.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 const SNAP_THRESHOLD = 96;
 const SNAP_MIN_USABLE = 160;

package/patterns/gen-ui/gen-ui.css

@@ -37,7 +37,7 @@
     grid-template-columns: minmax(320px, 1fr) 1.5fr;
   }
 
-  :scope[mode="split"] > thread-n {
+  :scope[mode="split"] > chat-ui {
     border-right:        var(--a-border-thin) solid var(--a-canvas-border-subtle);
   }
 
@@ -49,7 +49,7 @@
     grid-template-columns: 1fr;
   }
 
-  :scope[mode="canvas"] > thread-n {
+  :scope[mode="canvas"] > chat-ui {
     display:             none;
   }
 
@@ -74,7 +74,7 @@
      CHILDREN — fill grid cells
      ═══════════════════════════════════════════════════════ */
 
-  :scope > thread-n,
+  :scope > chat-ui,
   :scope > canvas-ui,
   :scope > inspector-ui {
     min-height:          0;

package/patterns/gen-ui/gen-ui.js

@@ -1,4 +1,4 @@
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 import '../../components/chat/chat.js';
 import '../../components/canvas/canvas.js';
 import '../../components/inspector/inspector.js';

package/patterns/index.js

@@ -8,3 +8,4 @@ export { AdiaSectionNavItem } from './section-nav-item/section-nav-item.js';
 export { AdiaGenUI }          from './gen-ui/gen-ui.js';
 export { AdiaChatElement }    from './adia-chat/adia-chat.js';
 export { AdiaEditorElement }  from './adia-editor/adia-editor.js';
+export { AdiaA2UIRoot }       from './a2ui-root/a2ui-root.js';

package/patterns/section-nav/section-nav.js

@@ -7,7 +7,7 @@
  * Event: nav-select (bubbles from items). detail: { item, text, value }
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaSectionNav extends AdiaElement {
   static properties = {

package/patterns/section-nav-group/section-nav-group.js

@@ -4,7 +4,7 @@
  * that emits `group-toggle` (detail: { text, open }).
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaSectionNavGroup extends AdiaElement {
   static properties = {

package/patterns/section-nav-item/section-nav-item.js

@@ -5,7 +5,7 @@
  * Event: nav-select. detail: { item, text, value }
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaSectionNavItem extends AdiaElement {
   static properties = {

package/traits/define.js

@@ -4,7 +4,7 @@
  * A trait is a reusable behavior package: event listeners, attribute management,
  * and cleanup — defined once, attached to any element.
  *
- *   import { defineTrait } from '@traits/define.js';
+ *   import { defineTrait } from './define.js';
  *
  *   export const pressable = defineTrait({
  *     name: 'pressable',