@adia-ai/web-components 0.0.28 → 0.0.33

package/core/element.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach } from 'vitest';
-import { AdiaElement, signal, effect } from './element.js';
+import { UIElement, signal, effect } from './element.js';
 
 // ── Shared helpers ──
 
@@ -21,12 +21,12 @@ function mount(tag, attrs = {}) {
 // effects settle after a mutation.
 const tick = () => new Promise((r) => queueMicrotask(r));
 
-describe('AdiaElement — construction + lifecycle', () => {
+describe('UIElement — construction + lifecycle', () => {
   beforeEach(() => { document.body.innerHTML = ''; });
 
   it('instantiates and calls connected() on mount, disconnected() on remove', () => {
     const events = [];
-    class El extends AdiaElement {
+    class El extends UIElement {
       connected()    { events.push('connected'); }
       disconnected() { events.push('disconnected'); }
     }
@@ -39,7 +39,7 @@ describe('AdiaElement — construction + lifecycle', () => {
 
   it('remount after disconnect re-runs connected()', () => {
     const events = [];
-    class El extends AdiaElement {
+    class El extends UIElement {
       connected()    { events.push('connected'); }
       disconnected() { events.push('disconnected'); }
     }
@@ -51,11 +51,11 @@ describe('AdiaElement — construction + lifecycle', () => {
   });
 });
 
-describe('AdiaElement — properties', () => {
+describe('UIElement — properties', () => {
   beforeEach(() => { document.body.innerHTML = ''; });
 
   it('reads default value from static properties', () => {
-    class El extends AdiaElement {
+    class El extends UIElement {
       static properties = { label: { type: String, default: 'hi' } };
     }
     const tag = registerTestElement(El);
@@ -64,7 +64,7 @@ describe('AdiaElement — properties', () => {
   });
 
   it('reflects Boolean properties to HTML attributes when reflect: true', () => {
-    class El extends AdiaElement {
+    class El extends UIElement {
       static properties = { disabled: { type: Boolean, default: false, reflect: true } };
     }
     const tag = registerTestElement(El);
@@ -77,7 +77,7 @@ describe('AdiaElement — properties', () => {
   });
 
   it('reflects String properties as attribute values', () => {
-    class El extends AdiaElement {
+    class El extends UIElement {
       static properties = { variant: { type: String, default: 'neutral', reflect: true } };
     }
     const tag = registerTestElement(El);
@@ -87,7 +87,7 @@ describe('AdiaElement — properties', () => {
   });
 
   it('parses incoming attributes back into typed properties', () => {
-    class El extends AdiaElement {
+    class El extends UIElement {
       static properties = {
         count:    { type: Number,  default: 0 },
         active:   { type: Boolean, default: false },
@@ -100,7 +100,7 @@ describe('AdiaElement — properties', () => {
   });
 
   it('does NOT reflect when reflect: false / omitted', () => {
-    class El extends AdiaElement {
+    class El extends UIElement {
       static properties = { internal: { type: String, default: 'x' } };
     }
     const tag = registerTestElement(El);
@@ -110,12 +110,12 @@ describe('AdiaElement — properties', () => {
   });
 });
 
-describe('AdiaElement — reactive effect', () => {
+describe('UIElement — reactive effect', () => {
   beforeEach(() => { document.body.innerHTML = ''; });
 
   it('calls render() on mount and when a reactive property changes', async () => {
     let renders = 0;
-    class El extends AdiaElement {
+    class El extends UIElement {
       static properties = { label: { type: String, default: 'a' } };
       render() { renders++; void this.label; }
     }
@@ -130,7 +130,7 @@ describe('AdiaElement — reactive effect', () => {
 
   it('stops re-rendering after disconnect', async () => {
     let renders = 0;
-    class El extends AdiaElement {
+    class El extends UIElement {
       static properties = { label: { type: String, default: 'a' } };
       render() { renders++; void this.label; }
     }
@@ -144,7 +144,7 @@ describe('AdiaElement — reactive effect', () => {
   });
 });
 
-describe('AdiaElement — subscription-leak guard (0.0.10 regression)', () => {
+describe('UIElement — subscription-leak guard (0.0.10 regression)', () => {
   beforeEach(() => { document.body.innerHTML = ''; });
 
   it('child connected() reads do NOT subscribe an outer effect', async () => {
@@ -155,7 +155,7 @@ describe('AdiaElement — subscription-leak guard (0.0.10 regression)', () => {
     // prop would spuriously re-run the parent effect.
     //
     // Fix: connected() is now wrapped in untracked(…).
-    class Child extends AdiaElement {
+    class Child extends UIElement {
       static properties = { value: { type: String, default: 'initial', reflect: true } };
       connected() {
         // Read our own reactive prop exactly the way template-literal
@@ -197,7 +197,7 @@ describe('AdiaElement — subscription-leak guard (0.0.10 regression)', () => {
   });
 });
 
-describe('AdiaElement — addTrait', () => {
+describe('UIElement — addTrait', () => {
   beforeEach(() => { document.body.innerHTML = ''; });
 
   it('applies a trait once, idempotent on repeat', () => {
@@ -207,7 +207,7 @@ describe('AdiaElement — addTrait', () => {
       disconnect() {},
     });
 
-    class El extends AdiaElement {}
+    class El extends UIElement {}
     const tag = registerTestElement(El);
     const el = mount(tag);
     el.addTrait(myTrait);
@@ -221,7 +221,7 @@ describe('AdiaElement — addTrait', () => {
       connect()    { connects++; },
       disconnect() { disconnects++; },
     });
-    class El extends AdiaElement {
+    class El extends UIElement {
       static traits = [myTrait];
     }
     const tag = registerTestElement(El);

package/core/form.js

@@ -1,16 +1,16 @@
 /**
- * AdiaFormElement — Form-participating base class.
+ * UIFormElement — Form-participating base class.
  *
- * Extends AdiaElement with ElementInternals form participation,
+ * Extends UIElement with ElementInternals form participation,
  * constraint validation (required, pattern, minlength, maxlength),
  * and auto-validation UX (submit, blur, input re-validation).
  *
  * Usage:
- *   import { AdiaFormElement } from './form.js';
+ *   import { UIFormElement } from './form.js';
  *
- *   class MyField extends AdiaFormElement {
+ *   class MyField extends UIFormElement {
  *     static properties = {
- *       ...AdiaFormElement.properties,
+ *       ...UIFormElement.properties,
  *       placeholder: { type: String, default: '', reflect: true },
  *     };
  *   }
@@ -34,9 +34,9 @@
  *   el.syncValue(val)      → update form value + run constraints
  */
 
-import { AdiaElement } from './element.js';
+import { UIElement } from './element.js';
 
-export class AdiaFormElement extends AdiaElement {
+export class UIFormElement extends UIElement {
   static formAssociated = true;
 
   static get properties() {
@@ -199,8 +199,8 @@ export class AdiaFormElement extends AdiaElement {
     if (ctor.labelDeprecated === false) return;
     if (!ctor.properties?.label) return;
     if (!this.hasAttribute('label')) return;
-    if (AdiaFormElement.#labelWarned.has(ctor)) return;
-    AdiaFormElement.#labelWarned.add(ctor);
+    if (UIFormElement.#labelWarned.has(ctor)) return;
+    UIFormElement.#labelWarned.add(ctor);
     // eslint-disable-next-line no-console
     console.warn(
       `[AdiaUI] <${this.localName} label="…"> is deprecated — wrap in ` +

package/core/index.js

@@ -1,10 +1,10 @@
 /**
  * core barrel — re-exports every public core module.
  *
- * Consumers who want to build on AdiaElement or use the reactive
+ * Consumers who want to build on UIElement or use the reactive
  * signal system directly do:
  *
- *   import { AdiaElement } from '@adia-ai/web-components/core';
+ *   import { UIElement } from '@adia-ai/web-components/core';
  *   import { signal, effect } from '@adia-ai/web-components/core';
  *
  * Exports are flat — every symbol from the re-exported files is

package/core/provider.js

@@ -2,11 +2,11 @@
  * AdiaUI Router — Self-contained vanilla JS bundle.
  * Includes: RouteController + router-ui component.
  *
- * Depends on: core.js (AdiaElement), controllers.js (BaseController)
+ * Depends on: core.js (UIElement), controllers.js (BaseController)
  *
  * Usage:
- *   import { AdiaElement } from './core.js';
- *   import { AdiaRouter, RouteController } from './router.js';
+ *   import { UIElement } from './core.js';
+ *   import { UIRouter, RouteController } from './router.js';
  *
  *   // Option 1: Declarative routes
  *   const router = document.querySelector('router-ui');
@@ -22,14 +22,14 @@
  *   ctrl.commands.navigate('/about');
  */
 
-import { AdiaElement } from './element.js';
+import { UIElement } from './element.js';
 import { BaseController } from './controller.js';
 
 // ═══════════════════════════════════════════════════════════════
 // ADIA PROVIDER (inline — tiny base class)
 // ═══════════════════════════════════════════════════════════════
 
-class AdiaProvider extends AdiaElement {
+class UIProvider extends UIElement {
   static template = () => null;
   #abort = null;
   get abort() { if (!this.#abort) this.#abort = new AbortController(); return this.#abort; }
@@ -161,7 +161,7 @@ export class RouteController extends BaseController {
 // ROUTER-UI — content fragment renderer
 // ═══════════════════════════════════════════════════════════════
 
-export class AdiaRouter extends AdiaProvider {
+export class UIRouter extends UIProvider {
   #cache = new Map();
   #ownCtrl = null;
   #lastPath = null;
@@ -260,4 +260,4 @@ export class AdiaRouter extends AdiaProvider {
   }
 }
 
-customElements.define('router-ui', AdiaRouter);
+customElements.define('router-ui', UIRouter);

package/core/template.js

@@ -2,7 +2,7 @@
  * AdiaUI Template — Tagged template literal rendering.
  *
  * Lightweight lit-html-style rendering with reactive bindings.
- * Depends on DOM but not on AdiaElement — usable standalone.
+ * Depends on DOM but not on UIElement — usable standalone.
  *
  *   import { html, repeat } from './template.js';
  *

package/index.css

@@ -7,8 +7,9 @@
  * + typography — via the colors tree) → component styles → global
  * resets.
  *
- * Pattern CSS (adia-chat, adia-editor, app-shell, etc.) is NOT
- * bundled here — each page links its own patterns explicitly.
+ * Composite-element CSS (chat-shell, editor-shell, admin-shell, etc.)
+ * lives in the sibling `@adia-ai/web-modules` package as of 0.0.29
+ * (see ADR-0012). Each page links its own cluster CSS explicitly.
  * Opinionated theme overrides live in `./styles/themes.css`; link
  * them separately when you want the 8 named themes.
  *

package/index.js

@@ -2,17 +2,27 @@
  * @adia-ai/web-components — main entry.
  *
  *   import '@adia-ai/web-components';
- *   import { AdiaButton, AdiaAppShell } from '@adia-ai/web-components';
+ *   import { UIButton } from '@adia-ai/web-components';
  *
- * Loading this file registers every component + pattern custom
- * element (side effect of each module's `customElements.define(...)`
- * call). Pair with `@adia-ai/web-components/css` (the all-in-one
- * stylesheet) or link tokens/components/resets individually.
+ * Loading this file registers every primitive (side effect of each
+ * module's `customElements.define(...)` call). Pair with
+ * `@adia-ai/web-components/css` (the all-in-one stylesheet) or link
+ * tokens/components/resets individually.
  *
  * If you only want a subset, use the subpath imports:
  *   import '@adia-ai/web-components/components/button';
- *   import { AdiaAppShell } from '@adia-ai/web-components/patterns';
+ *
+ * Composite elements (admin-shell, chat-shell, editor-shell, gen-root,
+ * a2ui-root) shipped here as `patterns/` until 0.0.28 — they now live
+ * in `@adia-ai/web-modules` (see ADR-0012). The nav family was
+ * subsequently consolidated back into web-components as primitives
+ * (see ADR-0015 § Nav consolidation).
+ *
+ *   import '@adia-ai/web-modules';            // every cluster
+ *   import '@adia-ai/web-modules/shell';      // admin-shell
+ *   import '@adia-ai/web-modules/chat';       // chat-shell
+ *   import '@adia-ai/web-modules/editor';     // editor-shell
+ *   import '@adia-ai/web-modules/runtime';    // gen-root, a2ui-root
  */
 
 export * from './components/index.js';
-export * from './patterns/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.0.28",
+  "version": "0.0.33",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-utils.",
   "type": "module",
   "exports": {
@@ -11,8 +11,6 @@
     "./core/*":       "./core/*.js",
     "./components":   "./components/index.js",
     "./components/*": "./components/*/*.js",
-    "./patterns":     "./patterns/index.js",
-    "./patterns/*":   "./patterns/*/*.js",
     "./styles/*":     "./styles/*",
     "./traits":       "./traits/index.js",
     "./traits/*":     "./traits/*.js",
@@ -23,7 +21,6 @@
     "components/",
     "styles/",
     "traits/",
-    "patterns/",
     "a2ui/",
     "index.js",
     "index.css"
@@ -32,7 +29,6 @@
     "*.css",
     "./index.js",
     "./components/**/*.js",
-    "./patterns/**/*.js",
     "./core/provider.js"
   ],
   "dependencies": {

package/styles/components.css

@@ -2,10 +2,10 @@
  * Components barrel — imports every component's CSS, in stamp order.
  *
  * This file is *only* the `packages/web-components/components/**`
- * stylesheet set. Patterns (adia-chat, adia-editor, app-shell,
- * app-nav, section-nav, gen-ui, etc.) are NOT imported here — each
- * page links its own patterns explicitly. Global resets live in
- * `resets.css` and must be linked separately.
+ * stylesheet set. Modules in `@adia-ai/web-modules` (chat-shell,
+ * editor-shell, admin-shell, gen-root, a2ui-root, etc.) are NOT
+ * imported here — each page links its own modules explicitly.
+ * Global resets live in `resets.css` and must be linked separately.
  *
  * All components use Light DOM — styles target tag names directly.
  */
@@ -27,10 +27,11 @@
 @import "../components/tree/tree.css";
 @import "../components/pane/pane.css";
 @import "../components/page/page.css";
-@import "../components/chat/chat-input.css";
-@import "../components/chat/chat.css";
+@import "../components/chat-thread/chat-input.css";
+@import "../components/chat-thread/chat-thread.css";
 @import "../components/drawer/drawer.css";
 @import "../components/modal/modal.css";
+@import "../components/feed/feed.css";
 @import "../components/toast/toast.css";
 @import "../components/tabs/tabs.css";
 @import "../components/tooltip/tooltip.css";
@@ -66,6 +67,9 @@
 @import "../components/list/list.css";
 @import "../components/menu/menu.css";
 @import "../components/toolbar/toolbar.css";
+@import "../components/nav/nav.css";
+@import "../components/nav-group/nav-group.css";
+@import "../components/nav-item/nav-item.css";
 @import "../components/otp-input/otp-input.css";
 @import "../components/image/image.css";
 @import "../components/search/search.css";

package/styles/resets.css

@@ -4,7 +4,7 @@
  *
  * Imported from styles.css (the barrel). Targets document-level
  * defaults and universal selectors; component-scoped rules live in
- * each component's own CSS under `@scope (component-n)`.
+ * each component's own CSS under `@scope (component-ui)`.
  */
 
 *,

package/traits/define.js

@@ -22,8 +22,8 @@
  *   inst.connect(myElement);
  *   inst.disconnect(myElement);
  *
- *   // On a AdiaElement:
- *   class MyButton extends AdiaElement {
+ *   // On a UIElement:
+ *   class MyButton extends UIElement {
  *     static traits = [pressable];
  *   }
  */

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

@@ -1,125 +0,0 @@
-{
-  "$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"
-    },
-    "doc": {
-      "description": "Author-driven mode — set to an array of A2UI messages and the renderer resets + replays them. No network/transport involvement. Setting to a new array triggers a full re-render. Use this for editors, previews, tests, and any static-doc authoring loop. When both `src` and `doc` are set, `doc` wins (the stream is not opened). Pass as a JS property; not reflected to an attribute.",
-      "type": "array"
-    },
-    "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 }"
-      },
-      "doc-replaced": {
-        "description": "Fired after a full doc reset + replay in author-driven mode. detail: { count }"
-      }
-    },
-    "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
-  }
-}