npm - @adia-ai/web-modules - Versions diffs - 0.3.4 → 0.3.6 - Mend

@adia-ai/web-modules 0.3.4 → 0.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/CHANGELOG.md +50 -0
package/chat/chat-composer/chat-composer.a2ui.json +94 -0
package/chat/chat-composer/chat-composer.examples.html +28 -0
package/chat/chat-composer/chat-composer.html +43 -0
package/chat/chat-composer/chat-composer.js +107 -0
package/chat/chat-composer/chat-composer.test.js +112 -0
package/chat/chat-composer/chat-composer.yaml +91 -0
package/chat/chat-empty/chat-empty.a2ui.json +68 -0
package/chat/chat-empty/chat-empty.examples.html +34 -0
package/chat/chat-empty/chat-empty.html +42 -0
package/chat/chat-empty/chat-empty.yaml +58 -0
package/chat/chat-header/chat-header.a2ui.json +77 -0
package/chat/chat-header/chat-header.examples.html +30 -0
package/chat/chat-header/chat-header.html +42 -0
package/chat/chat-header/chat-header.yaml +68 -0
package/chat/chat-shell/chat-shell.css +1 -0
package/chat/chat-shell/chat-shell.examples.html +43 -2
package/chat/chat-shell/chat-shell.js +35 -7
package/chat/chat-shell/css/chat-shell.bespoke.css +196 -0
package/chat/chat-sidebar/chat-sidebar.a2ui.json +136 -0
package/chat/chat-sidebar/chat-sidebar.examples.html +36 -0
package/chat/chat-sidebar/chat-sidebar.html +43 -0
package/chat/chat-sidebar/chat-sidebar.js +227 -0
package/chat/chat-sidebar/chat-sidebar.test.js +110 -0
package/chat/chat-sidebar/chat-sidebar.yaml +140 -0
package/chat/chat-status/chat-status.a2ui.json +63 -0
package/chat/chat-status/chat-status.examples.html +29 -0
package/chat/chat-status/chat-status.html +42 -0
package/chat/chat-status/chat-status.yaml +52 -0
package/chat/chat-thread/chat-thread.a2ui.json +91 -0
package/chat/chat-thread/chat-thread.examples.html +36 -0
package/chat/chat-thread/chat-thread.html +43 -0
package/chat/chat-thread/chat-thread.js +106 -0
package/chat/chat-thread/chat-thread.test.js +82 -0
package/chat/chat-thread/chat-thread.yaml +89 -0
package/chat/index.js +3 -0
package/editor/editor-canvas/editor-canvas.a2ui.json +87 -0
package/editor/editor-canvas/editor-canvas.js +103 -0
package/editor/editor-canvas/editor-canvas.test.js +100 -0
package/editor/editor-canvas/editor-canvas.yaml +88 -0
package/editor/editor-canvas-empty/editor-canvas-empty.a2ui.json +69 -0
package/editor/editor-canvas-empty/editor-canvas-empty.yaml +56 -0
package/editor/editor-shell/css/editor-shell.bespoke.css +172 -0
package/editor/editor-shell/editor-shell.css +1 -0
package/editor/editor-shell/editor-shell.js +85 -30
package/editor/editor-sidebar/editor-sidebar.a2ui.json +88 -0
package/editor/editor-sidebar/editor-sidebar.js +173 -0
package/editor/editor-sidebar/editor-sidebar.test.js +126 -0
package/editor/editor-sidebar/editor-sidebar.yaml +83 -0
package/editor/editor-statusbar/editor-statusbar.a2ui.json +76 -0
package/editor/editor-statusbar/editor-statusbar.yaml +57 -0
package/editor/editor-toolbar/editor-toolbar.a2ui.json +96 -0
package/editor/editor-toolbar/editor-toolbar.js +58 -0
package/editor/editor-toolbar/editor-toolbar.test.js +99 -0
package/editor/editor-toolbar/editor-toolbar.yaml +81 -0
package/editor/index.js +3 -0
package/package.json +1 -1

package/chat/chat-status/chat-status.a2ui.json ADDED Viewed

@@ -0,0 +1,63 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/ChatStatus.json",
+  "title": "ChatStatus",
+  "description": "Module-tier chat status indicator. CSS-only — no behavior, no JS.\nConveys connection / streaming state via inline content. Typically\nslotted into <chat-header slot=\"status\"> or used inline.\n\nReplaces the legacy <span data-chat-status> shape per ADR-0023.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "ChatStatus"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "feedback",
+    "events": {},
+    "examples": [],
+    "keywords": [
+      "chat-status",
+      "status-indicator",
+      "connection-status",
+      "streaming-indicator"
+    ],
+    "name": "ChatStatus",
+    "related": [
+      "ChatShell",
+      "ChatHeader",
+      "ChatThread"
+    ],
+    "slots": {
+      "default": {
+        "description": "Status content — text, icon, dot indicator, etc. Authors set content directly; the host (chat-shell) updates innerText during streaming via legacy [data-chat-status] selector OR via querySelector('chat-status') for the bespoke shape."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, the only state.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "chat-status": [
+        "connection-indicator",
+        "streaming-status"
+      ]
+    },
+    "tag": "chat-status",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/chat/chat-status/chat-status.examples.html ADDED Viewed

@@ -0,0 +1,29 @@
+<header>
+    <div>
+      <h1>Chat Status</h1>
+      <div data-actions>
+        <tag-ui size="sm">chat-status</tag-ui>
+        <tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
+      </div>
+    </div>
+    <p>Module-tier chat status indicator. CSS-only. Inline content for connection/streaming state.</p>
+  </header>
+<section data-section>
+  <h2 variant="section">Role</h2>
+  <p>Inline status indicator. Pure CSS-only stub. Authors set content directly; the host's streaming pipeline updates innerText.</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-status&gt;
+  &lt;icon-ui name="circle-fill" style="color: var(--a-success)"&gt;&lt;/icon-ui&gt;
+  &lt;span&gt;Connected&lt;/span&gt;
+&lt;/chat-status&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-status/chat-status.html ADDED Viewed

@@ -0,0 +1,42 @@
+<!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 Status — 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-status.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-status.examples.html — ${err.message}</p>`;
+      console.error('[chat-status.html]', err);
+    }
+  </script>
+</body>
+</html>

package/chat/chat-status/chat-status.yaml ADDED Viewed

@@ -0,0 +1,52 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: ChatStatus
+tag: chat-status
+component: ChatStatus
+category: feedback
+version: 1
+description: |
+  Module-tier chat status indicator. CSS-only — no behavior, no JS.
+  Conveys connection / streaming state via inline content. Typically
+  slotted into <chat-header slot="status"> or used inline.
+  Replaces the legacy <span data-chat-status> shape per ADR-0023.
+props: {}
+events: {}
+slots:
+  default:
+    description: >-
+      Status content — text, icon, dot indicator, etc. Authors set
+      content directly; the host (chat-shell) updates innerText
+      during streaming via legacy [data-chat-status] selector OR
+      via querySelector('chat-status') for the bespoke shape.
+states:
+  - name: idle
+    description: Default, the only state.
+traits: []
+a2ui:
+  rules:
+    - >-
+      chat-status replaces legacy <span data-chat-status> for the
+      streaming/connection indicator. Place inside <chat-header
+      slot="status">.
+keywords:
+  - chat-status
+  - status-indicator
+  - connection-status
+  - streaming-indicator
+synonyms:
+  chat-status: [connection-indicator, streaming-status]
+related:
+  - ChatShell
+  - ChatHeader
+  - ChatThread

package/chat/chat-thread/chat-thread.a2ui.json ADDED Viewed

@@ -0,0 +1,91 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/ChatThread.json",
+  "title": "ChatThread",
+  "description": "Module-tier chat message thread container — replaces legacy\n<section data-chat-messages> per ADR-0023. Owns scroll-to-bottom\non new message (with user-scroll-up suspension), [streaming] and\n[empty] reflected attributes, and a stable target for the host's\nmessage rendering pipeline.\n\nSits inside <chat-shell> as the central scroll surface. Authors\ncompose <chat-empty> as an optional first child for the empty\nstate; message children are appended dynamically by the host.\n\nBackwards compat — <chat-shell> still recognizes the legacy\n<section data-chat-messages> shape via :is() selector. New code\nshould prefer <chat-thread>.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "ChatThread"
+    },
+    "empty": {
+      "description": "Reflected — set when zero message children. Drives the\n<chat-empty> visibility via CSS — no JS toggling needed.\n",
+      "type": "boolean",
+      "default": true
+    },
+    "streaming": {
+      "description": "Reflected — set by the host while an LLM response is streaming.\nConsumers can style streaming-mode (e.g. cursor blink) via\n:has(chat-thread[streaming]) or attribute selectors.\n",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {},
+    "examples": [],
+    "keywords": [
+      "chat-thread",
+      "message-list",
+      "conversation",
+      "thread",
+      "scroll-surface"
+    ],
+    "name": "ChatThread",
+    "related": [
+      "ChatShell",
+      "ChatEmpty",
+      "ChatComposer",
+      "ChatSidebar"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default — message children (typically appended dynamically by <chat-shell>'s rendering pipeline) plus an optional first <chat-empty> sibling for the empty state."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, no streaming.",
+        "name": "idle"
+      },
+      {
+        "description": "Host is actively streaming an LLM response.",
+        "attribute": "streaming",
+        "name": "streaming"
+      },
+      {
+        "description": "Zero message children — empty state visible.",
+        "attribute": "empty",
+        "name": "empty"
+      }
+    ],
+    "synonyms": {
+      "message-list": [
+        "messages",
+        "message-stream"
+      ],
+      "thread": [
+        "conversation",
+        "dialogue",
+        "chat-log",
+        "transcript"
+      ]
+    },
+    "tag": "chat-thread",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/chat/chat-thread/chat-thread.examples.html ADDED Viewed

@@ -0,0 +1,36 @@
+<header>
+    <div>
+      <h1>Chat Thread</h1>
+      <div data-actions>
+        <tag-ui size="sm">chat-thread</tag-ui>
+        <tag-ui size="sm" variant="ghost">JS-bearing</tag-ui>
+      </div>
+    </div>
+    <p>Module-tier chat message thread container — owns scroll-to-bottom, [streaming] and [empty] reflected attributes.</p>
+  </header>
+<section data-section>
+  <h2 variant="section">Role</h2>
+  <p>Owns scroll-to-bottom on new message (with user-scroll-up suspension), [streaming] and [empty] reflected attributes, and a stable target for the host's message rendering pipeline. 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-header&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…"&gt;&lt;/chat-input-ui&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>

package/chat/chat-thread/chat-thread.html ADDED Viewed

@@ -0,0 +1,43 @@
+<!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 Thread — 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-thread.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-thread.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-thread.examples.html — ${err.message}</p>`;
+      console.error('[chat-thread.html]', err);
+    }
+  </script>
+</body>
+</html>

package/chat/chat-thread/chat-thread.js ADDED Viewed

@@ -0,0 +1,106 @@
+/**
+ * <chat-thread streaming?>
+ *   <chat-empty>...</chat-empty>            (optional, hidden when messages present)
+ *   <!-- assistant/user message divs appended dynamically by chat-shell -->
+ * </chat-thread>
+ *
+ * Module-tier message thread container — replaces legacy
+ * <section data-chat-messages> per ADR-0023. Owns:
+ *
+ *   - Scroll-to-bottom on new message (idempotent, respects user
+ *     scroll-up to read history; resumes auto-scroll when scrolled
+ *     to bottom)
+ *   - [streaming] reflected attribute (set by host while LLM streams)
+ *   - [empty] reflected attribute (set when no message children)
+ *   - Stable target for chat-shell's #messagesEl reference (host
+ *     queries this OR the legacy [data-chat-messages] selector)
+ *
+ * Reflected attributes:
+ *   [streaming]  — true while LLM is streaming a response
+ *   [empty]      — true when zero message children (drives empty-state)
+ *
+ * Public methods:
+ *   .scrollToBottom()         — programmatic scroll (smooth)
+ *   .scrollToBottomInstant()  — immediate (no animation)
+ *
+ * The host (<chat-shell>) reads either <chat-thread> or
+ * [data-chat-messages] via :is() selector for backwards compat.
+ * Message rendering lives in the host (one source of truth for
+ * markdown + escape rules); the thread just owns the scroll surface.
+ */
+import { UIElement } from '../../../web-components/core/element.js';
+const SCROLL_BOTTOM_TOLERANCE = 40;  // px from bottom that counts as "at bottom"
+class ChatThread extends UIElement {
+  static properties = {
+    streaming: { type: Boolean, default: false, reflect: true },
+    empty: { type: Boolean, default: true, reflect: true },
+  };
+  static template = () => null;
+  #childObserver = null;
+  #autoScroll = true;
+  #scrollHandler = null;
+  connected() {
+    this.#syncEmptyFromChildren();
+    this.#setupChildObserver();
+    this.#setupScrollListener();
+  }
+  disconnected() {
+    this.#childObserver?.disconnect();
+    this.#childObserver = null;
+    if (this.#scrollHandler) {
+      this.removeEventListener('scroll', this.#scrollHandler);
+      this.#scrollHandler = null;
+    }
+  }
+  // ── Public API ──
+  scrollToBottom() {
+    this.scrollTo({ top: this.scrollHeight, behavior: 'smooth' });
+  }
+  scrollToBottomInstant() {
+    this.scrollTop = this.scrollHeight;
+  }
+  // ── Internal: empty state from message children ──
+  #syncEmptyFromChildren() {
+    // Children that count as "messages" — anything except <chat-empty> stub
+    const messageChildren = Array.from(this.children).filter(
+      (c) => c.tagName.toLowerCase() !== 'chat-empty'
+    );
+    this.empty = messageChildren.length === 0;
+  }
+  #setupChildObserver() {
+    this.#childObserver = new MutationObserver(() => {
+      this.#syncEmptyFromChildren();
+      // New message added — scroll to bottom if user is at bottom
+      if (this.#autoScroll) {
+        this.scrollToBottomInstant();
+      }
+    });
+    this.#childObserver.observe(this, { childList: true });
+  }
+  // ── Internal: track user scroll to suspend auto-scroll ──
+  #setupScrollListener() {
+    this.#scrollHandler = () => {
+      const distanceFromBottom = this.scrollHeight - (this.scrollTop + this.clientHeight);
+      this.#autoScroll = distanceFromBottom <= SCROLL_BOTTOM_TOLERANCE;
+    };
+    this.addEventListener('scroll', this.#scrollHandler, { passive: true });
+  }
+}
+customElements.define('chat-thread', ChatThread);
+export { ChatThread };

package/chat/chat-thread/chat-thread.test.js ADDED Viewed

@@ -0,0 +1,82 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import '../../../web-components/core/element.js';
+import './chat-thread.js';
+const tick = () => new Promise((r) => queueMicrotask(r));
+function mount(html) {
+  const wrap = document.createElement('div');
+  wrap.innerHTML = html;
+  document.body.appendChild(wrap);
+  return wrap.firstElementChild;
+}
+let originalRect;
+beforeEach(() => {
+  document.body.innerHTML = '';
+  globalThis.MutationObserver = class {
+    observe() {} disconnect() {}
+  };
+  originalRect = HTMLElement.prototype.getBoundingClientRect;
+  HTMLElement.prototype.getBoundingClientRect = function () {
+    return { width: 480, height: 600, top: 0, left: 0, right: 480, bottom: 600, x: 0, y: 0 };
+  };
+});
+afterEach(() => {
+  if (originalRect) HTMLElement.prototype.getBoundingClientRect = originalRect;
+});
+describe('chat-thread', () => {
+  it('registers chat-thread as a custom element', () => {
+    expect(customElements.get('chat-thread')).toBeDefined();
+  });
+  it('defaults to streaming=false on connect', () => {
+    const t = mount('<chat-thread></chat-thread>');
+    expect(t.streaming).toBe(false);
+  });
+  it('defaults to empty=true when no children', async () => {
+    const t = mount('<chat-thread></chat-thread>');
+    await tick();
+    expect(t.empty).toBe(true);
+  });
+  it('reflects [streaming] via property assignment', async () => {
+    const t = mount('<chat-thread></chat-thread>');
+    t.streaming = true;
+    await tick();
+    expect(t.hasAttribute('streaming')).toBe(true);
+  });
+  it('reflects [empty] via property assignment', async () => {
+    const t = mount('<chat-thread></chat-thread>');
+    t.empty = false;
+    await tick();
+    expect(t.hasAttribute('empty')).toBe(false);
+    t.empty = true;
+    await tick();
+    expect(t.hasAttribute('empty')).toBe(true);
+  });
+  it('exposes .scrollToBottom() and .scrollToBottomInstant() methods', () => {
+    const t = mount('<chat-thread></chat-thread>');
+    expect(typeof t.scrollToBottom).toBe('function');
+    expect(typeof t.scrollToBottomInstant).toBe('function');
+  });
+  it('does not count <chat-empty> stub as a message child for [empty] calc', () => {
+    const t = mount('<chat-thread><chat-empty></chat-empty></chat-thread>');
+    // chat-empty alone — empty should still be true
+    expect(t.empty).toBe(true);
+  });
+  it('cleanup on disconnect — removes scroll listener', () => {
+    const t = mount('<chat-thread></chat-thread>');
+    const removeSpy = vi.spyOn(t, 'removeEventListener');
+    t.remove();
+    const removedTypes = removeSpy.mock.calls.map((args) => args[0]);
+    expect(removedTypes).toContain('scroll');
+  });
+});

package/chat/chat-thread/chat-thread.yaml ADDED Viewed

@@ -0,0 +1,89 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: ChatThread
+tag: chat-thread
+component: ChatThread
+category: container
+version: 1
+description: |
+  Module-tier chat message thread container — replaces legacy
+  <section data-chat-messages> per ADR-0023. Owns scroll-to-bottom
+  on new message (with user-scroll-up suspension), [streaming] and
+  [empty] reflected attributes, and a stable target for the host's
+  message rendering pipeline.
+  Sits inside <chat-shell> as the central scroll surface. Authors
+  compose <chat-empty> as an optional first child for the empty
+  state; message children are appended dynamically by the host.
+  Backwards compat — <chat-shell> still recognizes the legacy
+  <section data-chat-messages> shape via :is() selector. New code
+  should prefer <chat-thread>.
+props:
+  streaming:
+    description: |
+      Reflected — set by the host while an LLM response is streaming.
+      Consumers can style streaming-mode (e.g. cursor blink) via
+      :has(chat-thread[streaming]) or attribute selectors.
+    type: boolean
+    default: false
+    reflect: true
+  empty:
+    description: |
+      Reflected — set when zero message children. Drives the
+      <chat-empty> visibility via CSS — no JS toggling needed.
+    type: boolean
+    default: true
+    reflect: true
+events: {}
+slots:
+  default:
+    description: >-
+      Default — message children (typically appended dynamically by
+      <chat-shell>'s rendering pipeline) plus an optional first
+      <chat-empty> sibling for the empty state.
+states:
+  - name: idle
+    description: Default, no streaming.
+  - name: streaming
+    attribute: streaming
+    description: Host is actively streaming an LLM response.
+  - name: empty
+    attribute: empty
+    description: Zero message children — empty state visible.
+traits: []
+a2ui:
+  rules:
+    - >-
+      chat-thread is the bespoke replacement for legacy
+      <section data-chat-messages> inside <chat-shell>. Use it for
+      the message scroll surface; the host appends dynamic message
+      divs as children.
+    - >-
+      Place <chat-empty> as an optional first child for the empty
+      state; the [empty] reflected attribute drives its visibility
+      via CSS (no JS toggling).
+keywords:
+  - chat-thread
+  - message-list
+  - conversation
+  - thread
+  - scroll-surface
+synonyms:
+  thread: [conversation, dialogue, chat-log, transcript]
+  message-list: [messages, message-stream]
+related:
+  - ChatShell
+  - ChatEmpty
+  - ChatComposer
+  - ChatSidebar

package/chat/index.js CHANGED Viewed

@@ -1 +1,4 @@
 export { ChatShell } from './chat-shell/chat-shell.js';
+export { ChatThread } from './chat-thread/chat-thread.js';
+export { ChatComposer } from './chat-composer/chat-composer.js';
+export { ChatSidebar } from './chat-sidebar/chat-sidebar.js';