@adia-ai/web-modules 0.0.4

package/CHANGELOG.md

@@ -0,0 +1,292 @@
+# Changelog — @adia-ai/web-modules
+
+Follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and
+[Semantic Versioning](https://semver.org/).
+
+Scope: composite custom elements organized by cluster (shell, chat,
+editor, runtime today; data, agent, admin on the strategic horizon).
+Built from `@adia-ai/web-components` primitives.
+
+## [Unreleased]
+
+_No pending changes._
+
+## [0.0.4] — 2026-05-01
+
+⚠️ **BREAKING** — nav family removed (consolidated into
+`@adia-ai/web-components` as primitives per
+[ADR-0015 § Nav consolidation](../../.brain/adrs/0015-three-tier-naming-convention.md)).
+
+### Removed — ⚠️ BREAKING
+
+- `shell/app-nav/`, `shell/app-nav-group/`, `shell/app-nav-item/`,
+  `shell/section-nav/`, `shell/section-nav-group/`,
+  `shell/section-nav-item/` directories (24 files total).
+- Cluster barrel exports `AppNav`, `AppNavGroup`, `AppNavItem`,
+  `SectionNav`, `SectionNavGroup`, `SectionNavItem` removed from
+  `shell/index.js`. The barrel now only exports `AdminShell`.
+
+### Migration
+
+The 6 nav elements collapsed into 3 primitives that ship with
+`@adia-ai/web-components` (peer-dep). `[variant="primary"|"section"]`
+drives visual treatment; behavior is unified.
+
+```diff
+- import '@adia-ai/web-modules/shell/app-nav/app-nav.js';
+- import '@adia-ai/web-modules/shell/section-nav/section-nav.js';
++ // The primitives auto-register on `import '@adia-ai/web-components';`
+```
+
+```diff
+- <app-nav-ui id="nav">…</app-nav-ui>
++ <nav-ui id="nav">…</nav-ui>
+
+- <section-nav-ui heading="On this page">…</section-nav-ui>
++ <nav-ui variant="section" heading="On this page">…</nav-ui>
+```
+
+CSS link rels:
+
+```diff
+- <link rel="stylesheet" href=".../web-modules/shell/app-nav/app-nav.css" />
+- <link rel="stylesheet" href=".../web-modules/shell/section-nav/section-nav.css" />
+- <!-- + the 4 sub-element CSS files -->
++ <!-- nav CSS now bundled in @adia-ai/web-components/css -->
+```
+
+### Bumped peer-dep
+
+- `@adia-ai/web-components` peer-dep raised from `>=0.0.32` to
+  `>=0.0.33` (the version that ships the consolidated nav family).
+
+### Notes
+
+The follow-on refinements (section-variant cascade, `[variant]` prop
+on `<nav-group-ui>` + `<nav-item-ui>`, leading-indicator suppression
+in section variant) all live in the peer-dep
+`@adia-ai/web-components@0.0.33` — see its CHANGELOG. No additional
+work in this package beyond the deletions above.
+
+## [0.0.3] — 2026-05-01
+
+⚠️ **BREAKING** — class-naming-convention sweep per
+[ADR-0016](../../.brain/adrs/0016-class-naming-convention.md).
+Module classes drop the `Adia` prefix. Tag names + CSS unchanged
+from 0.0.2; this is purely a class-name rename.
+
+### Renamed — ⚠️ BREAKING (drop `Adia` prefix)
+
+- `AdiaChatShell` → `ChatShell`
+- `AdiaEditorShell` → `EditorShell`
+- `AdiaAdminShell` → `AdminShell`
+- `AdiaGenRoot` → `GenRoot`
+- `AdiaA2UIRoot` → `A2UIRoot`
+- `AdiaAppNav` → `AppNav`
+- `AdiaAppNavGroup` → `AppNavGroup`
+- `AdiaAppNavItem` → `AppNavItem`
+- `AdiaSectionNav` → `SectionNav`
+- `AdiaSectionNavGroup` → `SectionNavGroup`
+- `AdiaSectionNavItem` → `SectionNavItem`
+
+Cluster `index.js` barrel exports updated:
+
+```diff
+# chat
+- export { AdiaChatShell } from './chat-shell/chat-shell.js';
++ export { ChatShell } from './chat-shell/chat-shell.js';
+
+# editor
+- export { AdiaEditorShell } from './editor-shell/editor-shell.js';
++ export { EditorShell } from './editor-shell/editor-shell.js';
+
+# shell
+- export { AdiaAdminShell } from './admin-shell/admin-shell.js';
+- export { AdiaAppNav } from './app-nav/app-nav.js';
+- (etc.)
++ export { AdminShell } from './admin-shell/admin-shell.js';
++ export { AppNav } from './app-nav/app-nav.js';
++ (etc.)
+
+# runtime
+- export { AdiaGenRoot } from './gen-root/gen-root.js';
+- export { AdiaA2UIRoot } from './a2ui-root/a2ui-root.js';
++ export { GenRoot } from './gen-root/gen-root.js';
++ export { A2UIRoot } from './a2ui-root/a2ui-root.js';
+```
+
+### Migration
+
+```bash
+# Find imports
+git grep -nE "import \{ Adia(ChatShell|EditorShell|AdminShell|GenRoot|A2UIRoot|AppNav|SectionNav)\w*"
+
+# Rewrite (review first):
+perl -i -pe '
+  s/\bAdiaChatShell\b/ChatShell/g;
+  s/\bAdiaEditorShell\b/EditorShell/g;
+  s/\bAdiaAdminShell\b/AdminShell/g;
+  s/\bAdiaGenRoot\b/GenRoot/g;
+  s/\bAdiaA2UIRoot\b/A2UIRoot/g;
+  s/\bAdiaAppNavGroup\b/AppNavGroup/g;
+  s/\bAdiaAppNavItem\b/AppNavItem/g;
+  s/\bAdiaAppNav\b/AppNav/g;
+  s/\bAdiaSectionNavGroup\b/SectionNavGroup/g;
+  s/\bAdiaSectionNavItem\b/SectionNavItem/g;
+  s/\bAdiaSectionNav\b/SectionNav/g;
+' $(git grep -lE 'Adia(ChatShell|EditorShell|AdminShell|GenRoot|A2UIRoot|AppNav|SectionNav)\w*')
+```
+
+The base class import path also shifts (web-components 0.0.32):
+
+```diff
+- import { AdiaElement } from '@adia-ai/web-components/core/element.js';
++ import { UIElement } from '@adia-ai/web-components/core/element.js';
+```
+
+### What stays
+
+- All custom-element tag names (`<chat-shell>`, `<admin-shell>`,
+  `<gen-root>`, etc.) — settled in ADR-0015.
+- All CSS scope selectors.
+- All yaml `tag:` field values.
+- Cluster directory names + structure.
+- Peer-dep on `@adia-ai/web-components` (now `>=0.0.32`).
+
+### Peer-dep bump
+
+```diff
+"peerDependencies": {
+- "@adia-ai/web-components": ">=0.0.28",
++ "@adia-ai/web-components": ">=0.0.32",
+  "@adia-ai/a2ui-utils": "^0.0.2"
+}
+```
+
+The base class `UIElement` (renamed from `AdiaElement`) lives in
+`@adia-ai/web-components@0.0.32`. web-modules can't run against
+older web-components versions because `import { AdiaElement }`
+no longer resolves there.
+
+## [0.0.2] — 2026-05-01
+
+⚠️ **BREAKING** — naming-convention sweep per
+[ADR-0015](../../.brain/adrs/0015-three-tier-naming-convention.md).
+Modules use the new `<namespace-thing>` two-word convention; the
+`adia-` brand prefix and the doubled `-ui-ui` form are retired.
+Cluster directories renamed in lockstep with the element renames.
+
+### Renamed — ⚠️ BREAKING
+
+- `<adia-chat-ui>` → `<chat-shell>`. Directory:
+  `chat/adia-chat/` → `chat/chat-shell/`. Class
+  `AdiaChatElement` → `AdiaChatShell`. CSS sub-files
+  `adia-chat.{empty,layout,markdown,messages,streaming,tokens}.css`
+  → `chat-shell.*.css`. `@keyframes adia-chat-blink` →
+  `chat-shell-blink`.
+- `<adia-editor-ui>` → `<editor-shell>`. Directory:
+  `editor/adia-editor/` → `editor/editor-shell/`. Class
+  `AdiaEditorElement` → `AdiaEditorShell`. CSS sub-files
+  `adia-editor.{layout,tokens}.css` → `editor-shell.*.css`.
+- `<app-shell-ui>` → `<admin-shell>`. Directory:
+  `shell/app-shell/` → `shell/admin-shell/`. Class
+  `AdiaAppShell` → `AdiaAdminShell`. CSS sub-files
+  `app-shell.{collapsed,helpers,main,shell,sidebar,templates,
+  tokens}.css` → `admin-shell.*.css`.
+- `<gen-ui-ui>` → `<gen-root>`. Directory:
+  `runtime/gen-ui/` → `runtime/gen-root/`. Class
+  `AdiaGenUI` → `AdiaGenRoot`. The element was registered as
+  `<gen-ui-ui>` (double "ui") which read as a typo; the new name
+  pairs symmetrically with the existing `<a2ui-root>`.
+
+### Migration
+
+Tag-name sweep:
+
+```bash
+# Find all uses
+git grep -nE '<(adia-chat-ui|adia-editor-ui|app-shell-ui|gen-ui-ui)\b'
+
+# Mechanical rewrite (Perl in-place, review before applying):
+perl -i -pe 's/\badia-chat-ui\b/chat-shell/g; s/\badia-editor-ui\b/editor-shell/g; s/\bapp-shell-ui\b/admin-shell/g; s/\bgen-ui-ui\b/gen-root/g' $(git grep -lE '\b(adia-chat-ui|adia-editor-ui|app-shell-ui|gen-ui-ui)\b')
+```
+
+Subpath / class import paths:
+
+```diff
+- import { AdiaChatElement }   from '@adia-ai/web-modules/chat/adia-chat/adia-chat.js';
++ import { AdiaChatShell }     from '@adia-ai/web-modules/chat/chat-shell/chat-shell.js';
+
+- import { AdiaEditorElement } from '@adia-ai/web-modules/editor/adia-editor/adia-editor.js';
++ import { AdiaEditorShell }   from '@adia-ai/web-modules/editor/editor-shell/editor-shell.js';
+
+- import { AdiaAppShell }      from '@adia-ai/web-modules/shell/app-shell/app-shell.js';
++ import { AdiaAdminShell }    from '@adia-ai/web-modules/shell/admin-shell/admin-shell.js';
+
+- import { AdiaGenUI }         from '@adia-ai/web-modules/runtime/gen-ui/gen-ui.js';
++ import { AdiaGenRoot }       from '@adia-ai/web-modules/runtime/gen-root/gen-root.js';
+```
+
+CSS sub-file paths follow the same shape (`<ns>/<ns>.css` →
+`<new>/<new>.css`).
+
+### What's NOT renamed (yet)
+
+The 6-element nav family (`<app-nav-ui>`, `<app-nav-group-ui>`,
+`<app-nav-item-ui>`, `<section-nav-ui>`, `<section-nav-group-ui>`,
+`<section-nav-item-ui>`) is staged for consolidation into 3
+primitives (`<nav-ui>`, `<nav-group-ui>`, `<nav-item-ui>`) per
+ADR-0015. That migration is the next BREAKING release because it
+involves authoring new code (variant-driven primitives that
+absorb both families' behavior), not just renaming.
+`<a2ui-root>` already fits the convention and stays as-is.
+
+### Cluster organization
+
+Unchanged from 0.0.1 — four clusters (`shell`, `chat`, `editor`,
+`runtime`) with subpath exports. Directory contents within each
+cluster reshuffle per the rename map; the cluster names themselves
+don't change.
+
+## [0.0.1] — 2026-05-01
+
+Initial extraction from `@adia-ai/web-components/patterns/`. Captures
+the three-tier architecture decision in
+[ADR-0012](../../.brain/adrs/0012-three-tier-architecture-modules.md).
+
+### Migrated from `@adia-ai/web-components/patterns/`
+
+- **`shell/`** — `<app-shell-ui>`, `<app-nav-ui>`,
+  `<app-nav-group-ui>`, `<app-nav-item-ui>`, `<section-nav-ui>`,
+  `<section-nav-group-ui>`, `<section-nav-item-ui>`. Same JS/CSS/yaml
+  as `web-components-v0.0.28`'s `patterns/shell/*`.
+- **`chat/`** — `<adia-chat-ui>`.
+- **`editor/`** — `<adia-editor-ui>`.
+- **`runtime/`** — `<gen-ui>`, `<a2ui-root>`. The two render roots
+  that turn JSON or gen-UI intents into live DOM.
+
+### Public API
+
+- Subpath exports per cluster: `@adia-ai/web-modules/shell`,
+  `/chat`, `/editor`, `/runtime`. Plus glob subpaths
+  (`@adia-ai/web-modules/shell/app-shell` resolves to
+  `./shell/app-shell/app-shell.js`).
+- Barrel `import '@adia-ai/web-modules'` registers every element in
+  every cluster (sideEffect import).
+- Peer-dependencies on `@adia-ai/web-components` and
+  `@adia-ai/a2ui-utils` (the latter only because `<a2ui-root>` and
+  `<adia-editor-ui>` depend on the runtime).
+
+### Note for migrating consumers
+
+Tag names, CSS class names, CSS variables, and yaml/A2UI contracts
+are unchanged. Only the import path shifts — see README.md for the
+before/after examples.
+
+The `@adia-ai/web-components@0.0.28` snapshot (the last release
+before extraction) still ships the patterns directory as
+`web-components/patterns/`. Consumers can stay on 0.0.28 with
+`patterns/` imports and migrate to web-modules at their own pace.
+The next web-components release will drop `patterns/` from its
+`exports` map and `files` list — at that point the migration is
+required.

package/README.md

@@ -0,0 +1,119 @@
+# @adia-ai/web-modules
+
+Composite custom elements built from
+[`@adia-ai/web-components`](../web-components) primitives. Organized
+into clusters by use case; each cluster ships as a subpath export so
+consumers install only what they need.
+
+> The patterns directory lived inside `@adia-ai/web-components` as
+> `patterns/` until this package was extracted (see
+> [ADR-0012](../../.brain/adrs/0012-three-tier-architecture-modules.md)).
+> Tags, CSS, and YAML/A2UI contracts are unchanged; only the import
+> path moves.
+
+## Clusters
+
+| Cluster | Elements | What's inside |
+|---|---|---|
+| `shell` | `<admin-shell>` (nav primitives live in `web-components`: `<nav-ui>`, `<nav-group-ui>`, `<nav-item-ui>`) | Admin-shell composition: header, sidebars, command palette. |
+| `chat` | `<chat-shell>` | Conversational surface — messages, streaming, markdown, action bar. |
+| `editor` | `<editor-shell>` | A2UI live-editor surface — JSON ↔ rendered preview. |
+| `runtime` | `<gen-root>`, `<a2ui-root>` | Render roots that turn JSON or gen-UI intents into live DOM. |
+
+Future clusters on the strategic horizon: `data` (kanban, filters,
+table-toolbar), `agent` (agent-trace, reasoning panels), `admin`
+(RBAC matrix, approvals).
+
+## Quick start
+
+```html
+<!-- CSS for each cluster you import -->
+<link rel="stylesheet" href="node_modules/@adia-ai/web-modules/shell/admin-shell/admin-shell.css" />
+
+<!-- Primitives (nav-ui, nav-group-ui, nav-item-ui live here) -->
+<link rel="stylesheet" href="node_modules/@adia-ai/web-components/index.css" />
+
+<script type="module">
+  import '@adia-ai/web-components';        // primitives + nav family
+  import '@adia-ai/web-modules/shell';     // admin-shell
+  import '@adia-ai/web-modules/chat';      // adia-chat
+  import '@adia-ai/web-modules/runtime';   // gen-ui, a2ui-root
+</script>
+
+<admin-shell mode="rounded">
+  <aside-ui slot="leading">
+    <header-ui>…</header-ui>
+    <section-ui><nav-ui>…</nav-ui></section-ui>
+  </aside-ui>
+  <main>…</main>
+</admin-shell>
+```
+
+## Three-tier architecture
+
+```
+@adia-ai/web-components   — primitives (button, table, card, …)
+@adia-ai/web-modules      — composites (this package; clusters via subpath)
+@adia-ai/web-themes       — token sets per vendor/brand (future)
+```
+
+Modules and themes both peer-depend `web-components` directly; they
+do not import each other. Composition happens at the consumer's
+site, not inside the library. See
+[ADR-0012](../../.brain/adrs/0012-three-tier-architecture-modules.md)
+for the rationale and the patterns/modules collapse.
+
+## Migration from `@adia-ai/web-components/patterns`
+
+Before:
+
+```js
+import '@adia-ai/web-components/patterns/app-shell/app-shell.js';
+import '@adia-ai/web-components/patterns/adia-chat/adia-chat.js';
+```
+
+After:
+
+```js
+import '@adia-ai/web-modules/shell/app-shell/app-shell.js';
+import '@adia-ai/web-modules/chat/adia-chat/adia-chat.js';
+```
+
+Or, more idiomatically, import the cluster:
+
+```js
+import '@adia-ai/web-modules/shell';     // every shell-cluster element
+import '@adia-ai/web-modules/chat';      // adia-chat
+```
+
+CSS paths shift the same way (`/patterns/<x>/<x>.css` →
+`/<cluster>/<x>/<x>.css`).
+
+## Layout
+
+```
+web-modules/
+├── shell/
+│   └── admin-shell/    <admin-shell-ui> (full component, 251 LOC JS)
+│                       Nav primitives (nav-ui, nav-group-ui, nav-item-ui)
+│                       live in @adia-ai/web-components.
+├── chat/
+│   └── adia-chat/
+├── editor/
+│   └── adia-editor/
+├── runtime/
+│   ├── gen-ui/         <gen-ui> render root
+│   └── a2ui-root/      <a2ui-root> A2UI render root
+└── index.js            barrel re-export of every cluster
+```
+
+Each element directory carries its `.js`, `.css`, `.yaml`, and
+`.a2ui.json` files — same shape as `web-components/components/<x>/`.
+The yaml + a2ui.json contracts feed the gen-UI catalog at
+`packages/a2ui/corpus/catalog-a2ui_0_9.json`; the build script at
+`scripts/build/components.mjs` scans both `web-components/components/`
+and `web-modules/<cluster>/`.
+
+## License
+
+MIT

package/chat/chat-shell/chat-shell.a2ui.json

@@ -0,0 +1,149 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/ChatShell.json",
+  "title": "ChatShell",
+  "description": "Behavior-only chat orchestrator (LLM-streaming module). Author supplies the\nDOM structure via [data-chat-messages], [data-chat-input], [data-chat-empty],\n[data-chat-status] elements; chat-shell wires message streaming, markdown\nrendering, code-block upgrades, and an LLM integration path via proxy-url\n(or via external submit).\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "ChatShell"
+    },
+    "model": {
+      "description": "Model identifier.",
+      "type": "string",
+      "default": ""
+    },
+    "provider": {
+      "description": "LLM provider name (anthropic | openai | google | stub).",
+      "type": "string",
+      "default": ""
+    },
+    "proxyUrl": {
+      "description": "API proxy endpoint for LLM calls; enables self-contained chat without external wiring.",
+      "type": "string",
+      "default": ""
+    },
+    "streaming": {
+      "description": "Active streaming indicator; toggled while a response is being received.",
+      "type": "boolean",
+      "default": false
+    },
+    "system": {
+      "description": "System prompt prepended to conversations.",
+      "type": "string",
+      "default": ""
+    },
+    "thinking": {
+      "description": "Enable Anthropic extended-thinking mode.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {
+      "abort": {
+        "description": "Fired when the user aborts an in-flight request."
+      },
+      "chunk": {
+        "description": "Fired for each streaming chunk.",
+        "detail": {
+          "snapshot": "string",
+          "text": "string"
+        }
+      },
+      "clear": {
+        "description": "Fired when the conversation is cleared."
+      },
+      "done": {
+        "description": "Fired when a response completes.",
+        "detail": {
+          "stopReason": "string",
+          "text": "string",
+          "usage": "object"
+        }
+      },
+      "error": {
+        "description": "Fired on any LLM / network error.",
+        "detail": {
+          "error": "Error"
+        }
+      },
+      "message": {
+        "description": "Fired after each message (user or assistant) is appended.",
+        "detail": {
+          "content": "string",
+          "id": "string",
+          "role": "string"
+        }
+      },
+      "submit": {
+        "description": "Fired on user message submit (before LLM call begins).",
+        "detail": {
+          "model": "string",
+          "text": "string"
+        }
+      },
+      "thinking": {
+        "description": "Fired when the model emits extended-thinking content.",
+        "detail": {
+          "text": "string"
+        }
+      }
+    },
+    "examples": [],
+    "keywords": [
+      "chat-shell",
+      "chat",
+      "llm",
+      "streaming",
+      "conversation",
+      "agent"
+    ],
+    "name": "ChatShell",
+    "related": [
+      "ChatInput",
+      "Code"
+    ],
+    "slots": {
+      "default": {
+        "description": "Author provides the structural DOM. Expected markers — [data-chat-messages] (message list), [data-chat-input] (input surface), [data-chat-empty] (empty state), [data-chat-status] (streaming indicator)."
+      }
+    },
+    "states": [
+      {
+        "description": "No active request.",
+        "name": "idle"
+      },
+      {
+        "description": "An LLM request is in-flight; [data-chat-status] visible.",
+        "attribute": "streaming",
+        "name": "streaming"
+      }
+    ],
+    "synonyms": {
+      "chat": [
+        "conversation",
+        "messages",
+        "thread"
+      ]
+    },
+    "tag": "chat-shell",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/chat/chat-shell/chat-shell.css

@@ -0,0 +1,10 @@
+/* ═══════════════════════════════════════════════════════════════
+   chat-shell — Module CSS (LLM-streaming chat shell)
+   ═══════════════════════════════════════════════════════════════ */
+
+@import "./css/chat-shell.tokens.css";
+@import "./css/chat-shell.layout.css";
+@import "./css/chat-shell.messages.css";
+@import "./css/chat-shell.streaming.css";
+@import "./css/chat-shell.markdown.css";
+@import "./css/chat-shell.empty.css";