@adia-ai/web-modules 0.6.6 → 0.6.8

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog — @adia-ai/web-modules
 
+## [0.6.8] — 2026-05-20
+
+### Fixed
+- **`chat/chat-shell/chat-shell.js` — monorepo-absolute import broke the full barrel (claims-ui F-001, P0).** A single line at `chat-shell.js:4` imported `'/packages/web-components/components/code/code.js'`. The leading-`/` form resolves inside the AdiaUI monorepo (Vite roots at workspace) but breaks the full `@adia-ai/web-modules` barrel for every npm consumer with `Module not found`. Every sibling file in `web-modules/` (10 hits across chat/editor/theme/shell) used the correct `../../../web-components/...` relative form; this one line was the outlier and shipped across multiple releases. Fix: 1-char rewrite to the sibling pattern. Consumers using only the per-cluster subpaths (`@adia-ai/web-modules/shell`, `/chat`, `/editor`) were not affected; this fix restores the full-barrel `import '@adia-ai/web-modules'` entry point.
+
+### Docs
+- **README.md — ⚠️ Required CSS callouts (claims-ui F-006).** Added prominent warnings above the §Import: CSS and §Quick start sections naming the four shell tags (`admin-shell`, `chat-shell`, `editor-shell`, `simple-shell`) and describing the unstyled-stacked-divs failure mode that follows from forgetting the per-cluster CSS import. The CSS imports were already listed in both sections, but at the same volume as the JS imports — these callouts shift signal weight, not content. Paired with the new skill §CSSPolicy section (skill v2.4.2) which codifies the normative explicit-CSS-import policy uniformly across primitives + shells.
+
+## [0.6.7] — 2026-05-19
+
+### Added
+- **`@adia-ai/web-modules/generative` subpath barrel** — single import
+  registers `<canvas-ui>` + `<a2ui-root>` for generative UI surfaces.
+  Closes the cold-start footgun where the barrel didn't include these
+  primitives (per ADR-0027 they compose cross-package so they're not in
+  the default barrel).
+
+### Fixed
+- **Exclude authoring artifacts from npm tarball** — 28 `.examples.html`
+  files were leaking into the published package; now filtered via the
+  `files` field exclusion patterns (matches web-components convention).
+
 ## [0.6.6] — 2026-05-18
 
 ### Changed

package/README.md

@@ -35,6 +35,16 @@ import '@adia-ai/web-modules/runtime';           // gen-root + a2ui-root
 
 ## Import: CSS (since v0.4.5)
 
+> ⚠️ **Required — shell layouts depend on this CSS.** Shell JS modules
+> (`admin-shell`, `chat-shell`, `editor-shell`, `simple-shell`) do **not**
+> self-import their layout CSS. Omitting the matching `*.css` import for
+> any shell you use renders that shell as **unstyled stacked `<div>`
+> elements** with no console error — sidebars stack above content,
+> topbar/statusbar fall off the viewport grid, nothing throws. This is
+> the #1 cold-start silent-failure mode reported by external consumers.
+> If your shell looks like a vertical list of blocks, you missed a line
+> below.
+
 CSS imports use the package specifier — the package's `exports` map resolves `.css` requests to the per-element stylesheet on disk:
 
 ```js
@@ -77,6 +87,10 @@ See [`bespoke-shell-children` skill](../../.agents/skills/bespoke-shell-children
 
 ESM-only — bundlers (Vite, esbuild, webpack 5+, Rollup) resolve `import` statements for both `.js` and `.css`; in plain HTML, use `<script type="module">` for JS and `<link>` for CSS.
 
+> ⚠️ **Both JS AND CSS imports are required per cluster.** Importing only
+> the JS gives you registered tags but no layout. See [Import: CSS](#import-css-since-v045)
+> above for the failure mode.
+
 ```js
 // JS — register every primitive + the clusters you compose with
 import '@adia-ai/web-components';        // primitives + nav family
@@ -86,7 +100,7 @@ import '@adia-ai/web-modules/editor';    // editor-shell + bespoke children
 import '@adia-ai/web-modules/runtime';   // gen-root, a2ui-root (needs @adia-ai/a2ui-runtime)
 import '@adia-ai/web-modules/theme';     // theme-panel (appearance prefs)
 
-// CSS — one stylesheet per cluster you use
+// CSS — one stylesheet per cluster you use (REQUIRED — see callout above)
 import '@adia-ai/web-components/css';              // every primitive's CSS
 import '@adia-ai/web-modules/shell/admin-shell.css';
 import '@adia-ai/web-modules/chat/chat-shell.css';

package/chat/chat-shell/chat-shell.js

@@ -1,7 +1,7 @@
 import { UIElement } from '../../../web-components/core/element.js';
 import { renderMarkdown } from '../../../web-components/core/markdown.js';
 import { streamChat } from '../../../llm/index.js';
-import '/packages/web-components/components/code/code.js';
+import '../../../web-components/components/code/code.js';
 
 function escapeHTML(s) {
   return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

package/generative/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @adia-ai/web-modules/generative
+ *
+ * Convenience barrel for generative UI surfaces. See `index.js` for docs.
+ */
+
+export { A2UIRoot } from '@adia-ai/web-modules/runtime';
+export { UICanvas as Canvas } from '@adia-ai/web-components/components/canvas';
+export {
+  registerResolver,
+} from '@adia-ai/a2ui-runtime';

package/generative/index.js

@@ -0,0 +1,45 @@
+/**
+ * @adia-ai/web-modules/generative
+ *
+ * Convenience barrel for generative UI surfaces. Imports + registers
+ * the two non-barrel primitives needed to render generated A2UI output:
+ *
+ *   <a2ui-root>   — A2UI protocol surface (stream + render)
+ *   <canvas-ui>   — High-level wrapper with history (back/forward/version)
+ *
+ * Why a separate barrel: per ADR-0027, primitives that compose
+ * cross-package primitives do NOT auto-register. canvas-ui composes
+ * a2ui-root + theme-ui across package boundaries, so neither is in
+ * the default barrels. This subpath bundles them for the common
+ * "I want to render generated UI in my app" use case.
+ *
+ * Usage:
+ *
+ *   // Single import registers <canvas-ui> + <a2ui-root> + dependencies.
+ *   import '@adia-ai/web-modules/generative';
+ *
+ *   // Or import classes for programmatic construction:
+ *   import { Canvas, A2UIRoot, registerResolver }
+ *     from '@adia-ai/web-modules/generative';
+ *
+ * Pairs with the @adia-ai/a2ui-runtime registry (registerResolver, etc.)
+ * for wiring data sources to api:// + resource:// URIs.
+ */
+
+// Side-effect: register <a2ui-root> custom element
+import '@adia-ai/web-modules/runtime';
+
+// Side-effect: register <canvas-ui> custom element
+// (The "./components/*" subpath maps name -> components/name/name.js,
+//  so "components/canvas" resolves to "components/canvas/canvas.js".)
+import '@adia-ai/web-components/components/canvas';
+
+// Re-exports for programmatic use
+export { A2UIRoot } from '@adia-ai/web-modules/runtime';
+export { UICanvas as Canvas } from '@adia-ai/web-components/components/canvas';
+
+// Re-export resolver registration so consumers can wire data sources
+// without a second import.
+export {
+  registerResolver,
+} from '@adia-ai/a2ui-runtime';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-modules",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "description": "AdiaUI composite custom elements \u2014 shell, chat, editor, runtime clusters built from @adia-ai/web-components primitives. Subpath exports per cluster.",
   "type": "module",
   "exports": {
@@ -92,15 +92,42 @@
     "./theme/*.css": "./theme/*/*.css",
     "./theme/*/*.css": "./theme/*/*.css",
     "./theme/*/css/*.css": "./theme/*/css/*.css",
+    "./generative": {
+      "types": "./generative/index.d.ts",
+      "import": "./generative/index.js",
+      "default": "./generative/index.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
     "shell/",
+    "!shell/**/*.examples.html",
+    "!shell/**/*.examples.js",
+    "!shell/**/*.html",
     "chat/",
+    "!chat/**/*.examples.html",
+    "!chat/**/*.examples.js",
+    "!chat/**/*.html",
     "editor/",
+    "!editor/**/*.examples.html",
+    "!editor/**/*.examples.js",
+    "!editor/**/*.html",
     "simple/",
+    "!simple/**/*.examples.html",
+    "!simple/**/*.examples.js",
+    "!simple/**/*.html",
     "runtime/",
+    "!runtime/**/*.examples.html",
+    "!runtime/**/*.examples.js",
+    "!runtime/**/*.html",
     "theme/",
+    "!theme/**/*.examples.html",
+    "!theme/**/*.examples.js",
+    "!theme/**/*.html",
+    "generative/",
+    "!generative/**/*.examples.html",
+    "!generative/**/*.examples.js",
+    "!generative/**/*.html",
     "index.js",
     "README.md",
     "CHANGELOG.md"

package/chat/chat-composer/chat-composer.examples.html

@@ -1,28 +0,0 @@
-<header>
-    <div>
-      <h1>Chat Composer</h1>
-      <div data-actions>
-        <tag-ui size="sm">chat-composer</tag-ui>
-        <tag-ui size="sm" variant="ghost">JS-bearing</tag-ui>
-      </div>
-    </div>
-    <p>Module-tier chat composer wrapper — forwards submit events, propagates [disabled], slot vocabulary for future composer surfaces.</p>
-  </header>
-
-<section data-section>
-  <h2 variant="section">Role</h2>
-  <p>Forwards inner submit events as <code>composer-submit</code>, propagates <code>[disabled]</code> to the inner input, slot vocabulary for future composer surfaces (file attach, autocomplete trigger, model picker). JS-bearing.</p>
-</section>
-
-<section data-section>
-  <h2 variant="section">Composition</h2>
-  <p>Typical placement inside <code>&lt;chat-shell&gt;</code>:</p>
-  <code-ui language="html">&lt;chat-composer&gt;
-  &lt;chat-input-ui placeholder="Message…" submit-on-enter&gt;&lt;/chat-input-ui&gt;
-&lt;/chat-composer&gt;</code-ui>
-</section>
-
-<section data-section>
-  <h2 variant="section">Family</h2>
-  <p>Per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>, the chat cluster's bespoke family — <code>&lt;chat-shell&gt;</code> (host), <code>&lt;chat-thread&gt;</code>, <code>&lt;chat-composer&gt;</code>, <code>&lt;chat-sidebar&gt;</code> (JS-bearing) + <code>&lt;chat-header&gt;</code>, <code>&lt;chat-status&gt;</code>, <code>&lt;chat-empty&gt;</code> (CSS-only). Mirrors the admin cluster's pattern.</p>
-</section>

package/chat/chat-composer/chat-composer.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-theme="auto">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Chat Composer — AdiaUI</title>
-
-  <link rel="stylesheet" href="../../../web-components/styles/resets.css">
-  <link rel="stylesheet" href="../../../web-components/styles/tokens.css">
-  <link rel="stylesheet" href="../chat-shell/chat-shell.css">
-  <link rel="stylesheet" href="../../../web-components/components/code/code.css">
-  <link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
-
-  <script type="module" src="../chat-shell/chat-shell.js"></script>
-  <script type="module" src="./chat-composer.js"></script>
-  <script type="module" src="../../../web-components/components/code/code.js"></script>
-  <script type="module" src="../../../web-components/components/tag/tag.js"></script>
-
-  <style>
-    :where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
-    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
-  </style>
-</head>
-<body>
-
-  <main id="demo-root">
-    <p>Loading examples…</p>
-  </main>
-
-  <script type="module">
-    const root = document.getElementById('demo-root');
-    try {
-      const res = await fetch('./chat-composer.examples.html');
-      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
-      root.innerHTML = await res.text();
-    } catch (err) {
-      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load chat-composer.examples.html — ${err.message}</p>`;
-      console.error('[chat-composer.html]', err);
-    }
-  </script>
-
-</body>
-</html>

package/chat/chat-empty/chat-empty.examples.html

@@ -1,34 +0,0 @@
-<header>
-    <div>
-      <h1>Chat Empty</h1>
-      <div data-actions>
-        <tag-ui size="sm">chat-empty</tag-ui>
-        <tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
-      </div>
-    </div>
-    <p>Module-tier chat empty state. CSS-only. Visibility driven by parent <chat-thread>'s [empty] reflected attribute.</p>
-  </header>
-
-<section data-section>
-  <h2 variant="section">Role</h2>
-  <p>Empty state placeholder. CSS-only. Visibility driven automatically by parent <code>&lt;chat-thread&gt;</code>'s <code>[empty]</code> reflected attribute — no JS toggling needed.</p>
-</section>
-
-<section data-section>
-  <h2 variant="section">Composition</h2>
-  <p>Typical placement inside <code>&lt;chat-shell&gt;</code>:</p>
-  <code-ui language="html">&lt;chat-thread&gt;
-  &lt;chat-empty&gt;
-    &lt;empty-state-ui
-      icon="chat-circle"
-      heading="Hello!"
-      description="Ask me anything."&gt;&lt;/empty-state-ui&gt;
-  &lt;/chat-empty&gt;
-  &lt;!-- Messages get appended here; chat-empty auto-hides --&gt;
-&lt;/chat-thread&gt;</code-ui>
-</section>
-
-<section data-section>
-  <h2 variant="section">Family</h2>
-  <p>Per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>, the chat cluster's bespoke family — <code>&lt;chat-shell&gt;</code> (host), <code>&lt;chat-thread&gt;</code>, <code>&lt;chat-composer&gt;</code>, <code>&lt;chat-sidebar&gt;</code> (JS-bearing) + <code>&lt;chat-header&gt;</code>, <code>&lt;chat-status&gt;</code>, <code>&lt;chat-empty&gt;</code> (CSS-only). Mirrors the admin cluster's pattern.</p>
-</section>

package/chat/chat-empty/chat-empty.html

@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-theme="auto">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Chat Empty — AdiaUI</title>
-
-  <link rel="stylesheet" href="../../../web-components/styles/resets.css">
-  <link rel="stylesheet" href="../../../web-components/styles/tokens.css">
-  <link rel="stylesheet" href="../chat-shell/chat-shell.css">
-  <link rel="stylesheet" href="../../../web-components/components/code/code.css">
-  <link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
-
-  <script type="module" src="../chat-shell/chat-shell.js"></script>
-  <script type="module" src="../../../web-components/components/code/code.js"></script>
-  <script type="module" src="../../../web-components/components/tag/tag.js"></script>
-
-  <style>
-    :where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
-    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
-  </style>
-</head>
-<body>
-
-  <main id="demo-root">
-    <p>Loading examples…</p>
-  </main>
-
-  <script type="module">
-    const root = document.getElementById('demo-root');
-    try {
-      const res = await fetch('./chat-empty.examples.html');
-      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
-      root.innerHTML = await res.text();
-    } catch (err) {
-      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load chat-empty.examples.html — ${err.message}</p>`;
-      console.error('[chat-empty.html]', err);
-    }
-  </script>
-
-</body>
-</html>

package/chat/chat-header/chat-header.examples.html

@@ -1,30 +0,0 @@
-<header>
-    <div>
-      <h1>Chat Header</h1>
-      <div data-actions>
-        <tag-ui size="sm">chat-header</tag-ui>
-        <tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
-      </div>
-    </div>
-    <p>Module-tier chat top chrome bar. CSS-only. Holds chat name, status, and action clusters.</p>
-  </header>
-
-<section data-section>
-  <h2 variant="section">Role</h2>
-  <p>Top chrome bar with slot vocabulary — name, status, action, action-leading clusters. Pure CSS-only stub styled by parent shell via tag-presence.</p>
-</section>
-
-<section data-section>
-  <h2 variant="section">Composition</h2>
-  <p>Typical placement inside <code>&lt;chat-shell&gt;</code>:</p>
-  <code-ui language="html">&lt;chat-header&gt;
-  &lt;span slot="name"&gt;Claude&lt;/span&gt;
-  &lt;chat-status slot="status"&gt;Connected&lt;/chat-status&gt;
-  &lt;button-ui slot="action" icon="gear" variant="ghost"&gt;&lt;/button-ui&gt;
-&lt;/chat-header&gt;
-</section>
-
-<section data-section>
-  <h2 variant="section">Family</h2>
-  <p>Per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>, the chat cluster's bespoke family — <code>&lt;chat-shell&gt;</code> (host), <code>&lt;chat-thread&gt;</code>, <code>&lt;chat-composer&gt;</code>, <code>&lt;chat-sidebar&gt;</code> (JS-bearing) + <code>&lt;chat-header&gt;</code>, <code>&lt;chat-status&gt;</code>, <code>&lt;chat-empty&gt;</code> (CSS-only). Mirrors the admin cluster's pattern.</p>
-</section>

package/chat/chat-header/chat-header.html

@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-theme="auto">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Chat Header — AdiaUI</title>
-
-  <link rel="stylesheet" href="../../../web-components/styles/resets.css">
-  <link rel="stylesheet" href="../../../web-components/styles/tokens.css">
-  <link rel="stylesheet" href="../chat-shell/chat-shell.css">
-  <link rel="stylesheet" href="../../../web-components/components/code/code.css">
-  <link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
-
-  <script type="module" src="../chat-shell/chat-shell.js"></script>
-  <script type="module" src="../../../web-components/components/code/code.js"></script>
-  <script type="module" src="../../../web-components/components/tag/tag.js"></script>
-
-  <style>
-    :where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
-    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
-  </style>
-</head>
-<body>
-
-  <main id="demo-root">
-    <p>Loading examples…</p>
-  </main>
-
-  <script type="module">
-    const root = document.getElementById('demo-root');
-    try {
-      const res = await fetch('./chat-header.examples.html');
-      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
-      root.innerHTML = await res.text();
-    } catch (err) {
-      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load chat-header.examples.html — ${err.message}</p>`;
-      console.error('[chat-header.html]', err);
-    }
-  </script>
-
-</body>
-</html>

package/chat/chat-shell/chat-shell.examples.html

@@ -1,126 +0,0 @@
-<header>
-    <div>
-      <h1>Chat Shell</h1>
-      <div data-actions>
-        <tag-ui size="sm">chat-shell</tag-ui>
-        <tag-ui size="sm" variant="ghost">module-tier</tag-ui>
-      </div>
-    </div>
-    <p>Behavior-only chat orchestrator (LLM-streaming module). Author supplies the DOM structure via <code>[data-chat-messages]</code>, <code>[data-chat-input]</code>, <code>[data-chat-empty]</code>, <code>[data-chat-status]</code> elements; chat-shell wires message streaming, markdown rendering, code-block upgrades, and an LLM integration path via <code>proxy-url</code> (or via external submit).</p>
-  </header>
-
-<section data-section>
-  <h2 variant="section">Basic shape (legacy)</h2>
-  <p data-note>Author provides the structural DOM; the shell binds the LLM streaming behavior and renders chunks into the messages container. This is the original raw-HTML authoring shape — still fully supported.</p>
-  <code-ui language="html">&lt;chat-shell provider="anthropic" model="claude-sonnet-4-7" proxy-url="/api/llm"&gt;
-  &lt;header&gt;
-    &lt;span slot="heading"&gt;Chat&lt;/span&gt;
-    &lt;span slot="description"&gt;claude-sonnet-4-7&lt;/span&gt;
-  &lt;/header&gt;
-
-  &lt;div data-chat-messages&gt;&lt;/div&gt;
-  &lt;div data-chat-empty&gt;
-    &lt;p&gt;Send a message to start.&lt;/p&gt;
-  &lt;/div&gt;
-
-  &lt;div data-chat-input&gt;
-    &lt;input-ui placeholder="Ask anything..." submit-on-enter&gt;&lt;/input-ui&gt;
-  &lt;/div&gt;
-
-  &lt;div data-chat-status&gt;&lt;/div&gt;
-&lt;/chat-shell&gt;</code-ui>
-</section>
-
-<section data-section>
-  <h2 variant="section">Basic shape (bespoke — recommended)</h2>
-  <p data-note>The bespoke shape uses module-namespaced custom elements per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>. Each child owns its own behavior + state attributes; queryable from outside via <code>:has(chat-thread[streaming])</code>.</p>
-  <code-ui language="html">&lt;chat-shell provider="anthropic" model="claude-sonnet-4-7" proxy-url="/api/llm"&gt;
-  &lt;chat-header&gt;
-    &lt;span slot="name"&gt;Claude&lt;/span&gt;
-    &lt;chat-status slot="status"&gt;Connected&lt;/chat-status&gt;
-  &lt;/chat-header&gt;
-
-  &lt;chat-thread&gt;
-    &lt;chat-empty&gt;
-      &lt;empty-state-ui icon="chat-circle" heading="Hello!" description="Ask me anything."&gt;&lt;/empty-state-ui&gt;
-    &lt;/chat-empty&gt;
-  &lt;/chat-thread&gt;
-
-  &lt;chat-composer&gt;
-    &lt;chat-input-ui placeholder="Message…" submit-on-enter&gt;&lt;/chat-input-ui&gt;
-  &lt;/chat-composer&gt;
-&lt;/chat-shell&gt;</code-ui>
-</section>
-
-<section data-section>
-  <h2 variant="section">State as attribute</h2>
-  <p>Every queryable state is reflected on the relevant child element. Style cross-cuts via <code>:has()</code>:</p>
-  <code-ui language="css">/* Subtle indicator while LLM is streaming */
-chat-shell:has(chat-thread[streaming]) chat-header {
-  /* … */
-}
-
-/* Disable composer style during streaming */
-chat-shell:has(chat-composer[disabled]) {
-  /* … */
-}
-
-/* Empty-state visibility — driven automatically */
-chat-thread:not([empty]) > chat-empty {
-  display: none;
-}</code-ui>
-  <p data-note>JS reads the same attributes — <code>shell.querySelector('chat-thread').streaming</code>. The host (<code>&lt;chat-shell&gt;</code>) propagates <code>[streaming]</code> to the bespoke <code>&lt;chat-thread&gt;</code> child automatically when an LLM response is in flight.</p>
-</section>
-
-<section data-section>
-  <h2 variant="section">Properties</h2>
-  <table>
-    <thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
-    <tbody>
-      <tr><td><code>provider</code></td><td>string</td><td>—</td><td>LLM provider name: <code>anthropic | openai | google | stub</code>.</td></tr>
-      <tr><td><code>model</code></td><td>string</td><td>—</td><td>Model identifier (e.g. <code>claude-sonnet-4-7</code>, <code>gpt-4o</code>, <code>gemini-1.5-pro</code>).</td></tr>
-      <tr><td><code>system</code></td><td>string</td><td>—</td><td>System prompt prepended to conversations.</td></tr>
-      <tr><td><code>proxy-url</code></td><td>string</td><td>—</td><td>API proxy endpoint for LLM calls; enables self-contained chat without external submit handler.</td></tr>
-      <tr><td><code>thinking</code></td><td>boolean</td><td><code>false</code></td><td>Enable Anthropic extended-thinking mode.</td></tr>
-      <tr><td><code>streaming</code></td><td>boolean</td><td>—</td><td>Reflected — set while a response is streaming.</td></tr>
-    </tbody>
-  </table>
-</section>
-
-<section data-section>
-  <h2 variant="section">Events</h2>
-  <table>
-    <thead><tr><th>Event</th><th>Detail</th></tr></thead>
-    <tbody>
-      <tr><td><code>submit</code></td><td><code>{ text, model }</code> — fired on user message submit before LLM call begins.</td></tr>
-      <tr><td><code>chunk</code></td><td><code>{ text, role }</code> — fired for each streaming chunk.</td></tr>
-      <tr><td><code>complete</code></td><td><code>{ text }</code> — fired when streaming finishes.</td></tr>
-      <tr><td><code>error</code></td><td><code>{ error }</code> — fired on LLM call failures.</td></tr>
-    </tbody>
-  </table>
-</section>
-
-<section data-section>
-  <h2 variant="section">Behavior wiring</h2>
-  <table>
-    <thead><tr><th>Affordance</th><th>Author markup</th><th>What the shell does</th></tr></thead>
-    <tbody>
-      <tr><td>Message stream</td><td><code>[data-chat-messages]</code></td><td>Each LLM chunk appended; markdown rendered; <code>code-ui</code> upgraded for code blocks.</td></tr>
-      <tr><td>Input submit</td><td><code>[data-chat-input]</code> containing an <code>&lt;input-ui&gt;</code></td><td>Listens for input's submit event; calls LLM via <code>proxy-url</code> or fires <code>submit</code> for external handler.</td></tr>
-      <tr><td>Empty state</td><td><code>[data-chat-empty]</code></td><td>Hidden when messages are present; shown when empty.</td></tr>
-      <tr><td>Status indicator</td><td><code>[data-chat-status]</code></td><td>Updated with streaming/idle text.</td></tr>
-    </tbody>
-  </table>
-</section>
-
-<section data-section>
-  <h2 variant="section">Family pattern (forward-looking)</h2>
-  <p>Per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>, future releases extend the bespoke-children family to the chat cluster. Planned children:</p>
-  <ul data-features>
-    <li><code>&lt;chat-thread&gt;</code> — replaces <code>[data-chat-messages]</code>; owns scroll-to-bottom, virtualization, message render</li>
-    <li><code>&lt;chat-composer&gt;</code> — replaces <code>[data-chat-input]</code>; owns file attach, autocomplete, submit-on-enter</li>
-    <li><code>&lt;chat-message&gt;</code> + <code>&lt;chat-message-list&gt;</code> — message-tier semantic markup</li>
-    <li><code>&lt;chat-sidebar&gt;</code> — conversation history rail (mirrors <code>&lt;admin-sidebar&gt;</code>)</li>
-  </ul>
-  <p data-note>Today's <code>data-*</code> shape is fully supported and will continue to work alongside the bespoke vocabulary when it lands.</p>
-</section>

package/chat/chat-shell/chat-shell.html

@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-theme="auto">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Chat Shell — AdiaUI</title>
-
-  <link rel="stylesheet" href="../../../web-components/styles/resets.css">
-  <link rel="stylesheet" href="../../../web-components/styles/tokens.css">
-  <link rel="stylesheet" href="./chat-shell.css">
-  <link rel="stylesheet" href="../../../web-components/components/code/code.css">
-  <link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
-
-  <script type="module" src="./chat-shell.js"></script>
-  <script type="module" src="../../../web-components/components/code/code.js"></script>
-  <script type="module" src="../../../web-components/components/tag/tag.js"></script>
-
-  <style>
-    :where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
-    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
-  </style>
-</head>
-<body>
-
-  <main id="demo-root">
-    <p>Loading examples…</p>
-  </main>
-
-  <script type="module">
-    const root = document.getElementById('demo-root');
-    try {
-      const res = await fetch('./chat-shell.examples.html');
-      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
-      root.innerHTML = await res.text();
-    } catch (err) {
-      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load chat-shell.examples.html — ${err.message}</p>`;
-      console.error('[chat-shell.html]', err);
-    }
-  </script>
-
-</body>
-</html>

package/chat/chat-sidebar/chat-sidebar.examples.html

@@ -1,36 +0,0 @@
-<header>
-    <div>
-      <h1>Chat Sidebar</h1>
-      <div data-actions>
-        <tag-ui size="sm">chat-sidebar</tag-ui>
-        <tag-ui size="sm" variant="ghost">JS-bearing</tag-ui>
-      </div>
-    </div>
-    <p>Module-tier chat-cluster sidebar — mirrors admin-sidebar (resize + collapse + persist), cluster-namespaced for the chat family.</p>
-  </header>
-
-<section data-section>
-  <h2 variant="section">Role</h2>
-  <p>Mirrors <code>&lt;admin-sidebar&gt;</code> — resize drag, snap-to-collapsed, localStorage persistence, ResizeObserver. Cluster-namespaced for the chat family. JS-bearing.</p>
-</section>
-
-<section data-section>
-  <h2 variant="section">Composition</h2>
-  <p>Typical placement inside <code>&lt;chat-shell&gt;</code>:</p>
-  <code-ui language="html">&lt;chat-shell&gt;
-  &lt;chat-sidebar slot="leading" resizable collapsible&gt;
-    &lt;chat-header slot="header"&gt;
-      &lt;span slot="name"&gt;Conversations&lt;/span&gt;
-    &lt;/chat-header&gt;
-    &lt;list-ui&gt;…conversation history…&lt;/list-ui&gt;
-    &lt;div data-resize&gt;&lt;/div&gt;
-  &lt;/chat-sidebar&gt;
-  &lt;chat-thread&gt;…&lt;/chat-thread&gt;
-  &lt;chat-composer&gt;…&lt;/chat-composer&gt;
-&lt;/chat-shell&gt;</code-ui>
-</section>
-
-<section data-section>
-  <h2 variant="section">Family</h2>
-  <p>Per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>, the chat cluster's bespoke family — <code>&lt;chat-shell&gt;</code> (host), <code>&lt;chat-thread&gt;</code>, <code>&lt;chat-composer&gt;</code>, <code>&lt;chat-sidebar&gt;</code> (JS-bearing) + <code>&lt;chat-header&gt;</code>, <code>&lt;chat-status&gt;</code>, <code>&lt;chat-empty&gt;</code> (CSS-only). Mirrors the admin cluster's pattern.</p>
-</section>