@adia-ai/web-components 0.0.2 → 0.0.4

package/components/popover/popover.js

@@ -13,8 +13,8 @@
  * Triggers: click | hover | manual. ESC closes click/manual popovers.
  */
 
-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 HOVER_CLOSE_DELAY = 120;
 

package/components/progress/progress.js

@@ -8,7 +8,7 @@
  * (Legacy `value="-1"` is still treated as indeterminate for back-compat.)
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaProgress extends AdiaElement {
   static properties = {

package/components/progress-row/progress-row.js

@@ -17,7 +17,7 @@
  *   variant — success | warning | danger (colors the fill; inherits otherwise)
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaProgressRow extends AdiaElement {
   static properties = {

package/components/radio/radio.js

@@ -3,8 +3,8 @@
  * Pure CSS dot via [slot="dot"]::after inner circle. No SVG, no inset shadow hack.
  */
 
-import { AdiaFormElement } from '@core/form.js';
-import { html } from '@core/element.js';
+import { AdiaFormElement } from '../../core/form.js';
+import { html } from '../../core/element.js';
 
 class AdiaRadio extends AdiaFormElement {
   static properties = {

package/components/range/range.js

@@ -11,7 +11,7 @@
  *   - While dragging: accent highlight on the field
  */
 
-import { AdiaFormElement } from '@core/form.js';
+import { AdiaFormElement } from '../../core/form.js';
 
 class AdiaRange extends AdiaFormElement {
   static properties = {

package/components/rating/rating.js

@@ -9,7 +9,7 @@
  *   <rating-ui value="5" readonly></rating-ui>
  */
 
-import { AdiaFormElement } from '@core/form.js';
+import { AdiaFormElement } from '../../core/form.js';
 
 class AdiaRating extends AdiaFormElement {
   static properties = {

package/components/richtext/richtext.js

@@ -1,5 +1,5 @@
-import { AdiaElement } from '@core/element.js';
-import { renderMarkdown } from '@core/markdown.js';
+import { AdiaElement } from '../../core/element.js';
+import { renderMarkdown } from '../../core/markdown.js';
 
 /**
  * <richtext-ui> — Renders markdown to styled HTML.

package/components/row/row.js

@@ -5,8 +5,8 @@
  * <row-ui draggable>...</row-ui>   wires the draggable trait, emits drag-end
  */
 
-import { AdiaElement } from '@core/element.js';
-import { draggable } from '@traits/draggable.js';
+import { AdiaElement } from '../../core/element.js';
+import { draggable } from '../../traits/draggable.js';
 
 class AdiaRow extends AdiaElement {
   static properties = {

package/components/search/search.js

@@ -7,7 +7,7 @@
  * Fires debounced 'search' event. Clear button resets and fires immediately.
  */
 
-import { AdiaFormElement } from '@core/form.js';
+import { AdiaFormElement } from '../../core/form.js';
 
 class AdiaSearch extends AdiaFormElement {
   static properties = {

package/components/segment/segment.js

@@ -3,7 +3,7 @@
  * Child of segmented-ui. Represents one option.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaSegment extends AdiaElement {
   static properties = {

package/components/segmented/segmented.js

@@ -9,7 +9,7 @@
  * Indicator uses CSS transform (GPU-accelerated).
  */
 
-import { AdiaFormElement } from '@core/form.js';
+import { AdiaFormElement } from '../../core/form.js';
 import '@components/segment/segment.js';
 
 class AdiaSegmented extends AdiaFormElement {

package/components/select/select.js

@@ -1,5 +1,5 @@
-import { AdiaFormElement } from '@core/form.js';
-import { anchorPopover } from '@core/anchor.js';
+import { AdiaFormElement } from '../../core/form.js';
+import { anchorPopover } from '../../core/anchor.js';
 
 function escapeHTML(s) {
   return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

package/components/skeleton/skeleton.js

@@ -11,7 +11,7 @@
  * Radius: none, sm (default), md, lg, full
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaSkeleton extends AdiaElement {
   static properties = {

package/components/slider/slider.js

@@ -6,7 +6,7 @@
  *   [====fill====●─────────────────track──────]
  */
 
-import { AdiaFormElement } from '@core/form.js';
+import { AdiaFormElement } from '../../core/form.js';
 
 class AdiaSlider extends AdiaFormElement {
   static properties = {

package/components/stack/stack.js

@@ -5,7 +5,7 @@
  * <stack-ui align="center">...</stack-ui>
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaStack extends AdiaElement {
   static properties = {

package/components/stat/stat.js

@@ -8,7 +8,7 @@
  * Trend: up, down, neutral (colors the change badge accordingly)
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaStat extends AdiaElement {
   static properties = {

package/components/stepper/stepper.js

@@ -20,7 +20,7 @@
  *   orientation — horizontal (default) | vertical
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaStepper extends AdiaElement {
   static properties = {

package/components/stream/stream.js

@@ -18,7 +18,7 @@
  *   stream-error  — stream error (detail: { error })
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaStream extends AdiaElement {
   static properties = {

package/components/swiper/swiper.js

@@ -20,7 +20,7 @@
  *   autoplay-resume
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaSwiper extends AdiaElement {
   static properties = {

package/components/switch/switch.js

@@ -3,8 +3,8 @@
  * Pure CSS track + thumb, no native <input>.
  */
 
-import { AdiaFormElement } from '@core/form.js';
-import { html } from '@core/element.js';
+import { AdiaFormElement } from '../../core/form.js';
+import { html } from '../../core/element.js';
 
 class AdiaSwitch extends AdiaFormElement {
   static properties = {

package/components/table/table.js

@@ -36,7 +36,7 @@
  *   cell-click — { detail: { key, row, value, dataIndex } }
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 import { cellTypes, sortFns } from './cell-types.js';
 
 // ── Helpers ──────────────────────────────────────────────────────────────────

package/components/tabs/tab.js

@@ -7,7 +7,7 @@
  * The tab button is rendered by the parent tabs-ui, not by tab-ui itself.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaTab extends AdiaElement {
   static properties = {

package/components/tabs/tabs.js

@@ -14,7 +14,7 @@
  *   ArrowLeft / ArrowRight to navigate tabs
  */
 
-import { AdiaElement, html } from '@core/element.js';
+import { AdiaElement, html } from '../../core/element.js';
 import '@components/tabs/tab.js';
 
 class AdiaTabs extends AdiaElement {

package/components/tag/tag.js

@@ -11,7 +11,7 @@
  *   remove — { detail: { text, value } } fired when dismiss is clicked
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaTag extends AdiaElement {
   static properties = {

package/components/text/text.js

@@ -11,7 +11,7 @@
  *   lines    — multi-line clamp count (0 = no clamp)
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaText extends AdiaElement {
   static properties = {

package/components/textarea/textarea.js

@@ -4,7 +4,7 @@
  * No native <textarea> inside.
  */
 
-import { AdiaFormElement } from '@core/form.js';
+import { AdiaFormElement } from '../../core/form.js';
 
 class AdiaTextarea extends AdiaFormElement {
   static properties = {

package/components/timeline/timeline.js

@@ -40,7 +40,7 @@
  *   .outcomes = string[]    // renders an expandable sub-list under the row
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 // ── Container ──────────────────────────────────────────────────
 

package/components/toast/toast.js

@@ -14,7 +14,7 @@
  *   close — fired after the toast finishes its exit animation
  */
 
-import { AdiaElement, html } from '@core/element.js';
+import { AdiaElement, html } from '../../core/element.js';
 
 class AdiaToast extends AdiaElement {
   #timer = null;

package/components/toggle-group/toggle-group.js

@@ -12,7 +12,7 @@
  *   single — restrict to one active option at a time (default false: multi-select)
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 // ── Toggle Option ──
 //

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';

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/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.2",
-  "description": "AdiaUI web components — vanilla custom elements + A2UI runtime. Training corpus lives in @adia-ai/gen-ui-training.",
+  "version": "0.0.4",
+  "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.2"
+  },
   "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.tokens.css

@@ -9,7 +9,7 @@
   --chat-radius:                unset;
 
   /* Header */
-  --chat-header-height:         48px;
+  --chat-header-height:         var(--a-chrome-app-header-height);
   --chat-header-px:             var(--a-space-4);
   --chat-header-gap:            var(--a-space-2);
   --chat-header-border:         1px solid var(--a-border-subtle);