@adia-ai/web-modules 0.3.3 → 0.3.5

package/chat/chat-sidebar/chat-sidebar.test.js

@@ -0,0 +1,110 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import '../../../web-components/core/element.js';
+import './chat-sidebar.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 = '';
+  try { localStorage.clear(); } catch {}
+  globalThis.ResizeObserver = class {
+    observe() {} unobserve() {} disconnect() {}
+  };
+  originalRect = HTMLElement.prototype.getBoundingClientRect;
+  HTMLElement.prototype.getBoundingClientRect = function () {
+    const inline = this.style?.width || '';
+    const w = parseFloat(inline) || 240;
+    return { width: w, height: 600, top: 0, left: 0, right: w, bottom: 600, x: 0, y: 0 };
+  };
+});
+
+afterEach(() => {
+  if (originalRect) HTMLElement.prototype.getBoundingClientRect = originalRect;
+});
+
+describe('chat-sidebar', () => {
+  it('registers chat-sidebar as a custom element', () => {
+    expect(customElements.get('chat-sidebar')).toBeDefined();
+  });
+
+  it('defaults to collapsed=false on connect', () => {
+    const sb = mount('<chat-sidebar slot="leading"></chat-sidebar>');
+    expect(sb.collapsed).toBe(false);
+  });
+
+  it('reflects [collapsed] via property assignment', async () => {
+    const sb = mount('<chat-sidebar slot="leading"></chat-sidebar>');
+    sb.collapsed = true;
+    await tick();
+    expect(sb.hasAttribute('collapsed')).toBe(true);
+  });
+
+  it('reflects [resizing] via property assignment', async () => {
+    const sb = mount('<chat-sidebar slot="leading"></chat-sidebar>');
+    sb.resizing = true;
+    await tick();
+    expect(sb.hasAttribute('resizing')).toBe(true);
+  });
+
+  it('exposes .toggle() / .collapse() / .expand() public methods', () => {
+    const sb = mount('<chat-sidebar slot="leading" collapsible></chat-sidebar>');
+    expect(typeof sb.toggle).toBe('function');
+    expect(typeof sb.collapse).toBe('function');
+    expect(typeof sb.expand).toBe('function');
+  });
+
+  it('persists width to chat-namespaced localStorage key (not collide with admin)', async () => {
+    const sb = mount('<chat-sidebar slot="leading" collapsible></chat-sidebar>');
+    sb.style.width = '240px';
+    sb.collapse();
+    expect(sb.collapsed).toBe(true);
+    // localStorage key should be chat-namespaced
+    expect(localStorage.getItem('adia-chat-sidebar-leading')).not.toBeNull();
+    // Should NOT have written to the admin namespace
+    expect(localStorage.getItem('adia-sidebar-leading')).toBeNull();
+  });
+
+  it('uses [name] override for the localStorage key', () => {
+    const sb = mount('<chat-sidebar slot="leading" name="conversations" collapsible></chat-sidebar>');
+    sb.style.width = '200px';
+    sb.collapse();
+    expect(localStorage.getItem('adia-chat-sidebar-conversations')).not.toBeNull();
+    expect(localStorage.getItem('adia-chat-sidebar-leading')).toBeNull();
+  });
+
+  it('toggle() returns the new collapsed value', () => {
+    const sb = mount('<chat-sidebar slot="leading" collapsible></chat-sidebar>');
+    sb.style.width = '200px';
+    const result = sb.toggle();
+    expect(result).toBe(sb.collapsed);
+  });
+
+  it('dispatches sidebar-toggle event on toggle()', () => {
+    const sb = mount('<chat-sidebar slot="leading" collapsible></chat-sidebar>');
+    sb.style.width = '200px';
+    const onToggle = vi.fn();
+    sb.addEventListener('sidebar-toggle', onToggle);
+    sb.toggle();
+    expect(onToggle).toHaveBeenCalledTimes(1);
+    expect(onToggle.mock.calls[0][0].detail).toEqual(
+      expect.objectContaining({ name: expect.any(String), expanded: expect.any(Boolean) })
+    );
+  });
+
+  it('cleans up resize handlers on disconnect', () => {
+    const sb = mount('<chat-sidebar slot="leading" resizable><div data-resize></div></chat-sidebar>');
+    const handle = sb.querySelector('[data-resize]');
+    const removeSpy = vi.spyOn(handle, 'removeEventListener');
+    sb.remove();
+    const removedTypes = removeSpy.mock.calls.map((args) => args[0]);
+    expect(removedTypes).toContain('pointerdown');
+  });
+});

package/chat/chat-sidebar/chat-sidebar.yaml

@@ -0,0 +1,140 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: ChatSidebar
+tag: chat-sidebar
+component: ChatSidebar
+category: layout
+version: 1
+description: |
+  Module-tier chat-cluster sidebar — owns resize, snap-to-collapsed,
+  persistence, and the [collapsed] reflected attribute. Sits inside
+  <chat-shell> as slot="leading" (conversation history rail) or
+  slot="trailing" (artifacts/citations panel). Mirrors the admin-sidebar
+  shape — same 4 concerns, cluster-namespaced for the chat family.
+
+  This is the chat-cluster equivalent of <admin-sidebar> per ADR-0023.
+  <chat-shell> doesn't currently have a legacy sidebar shape (chat is
+  typically a single-pane experience), so <chat-sidebar> is purely
+  forward-looking — for chat apps that want conversation-history or
+  inspector rails.
+
+props:
+  collapsed:
+    description: |
+      Reflected — set when the sidebar's measured width is at or below
+      96px. Consumers query this to style "collapsed mode" without
+      duplicating threshold math.
+    type: boolean
+    default: false
+    reflect: true
+
+  resizing:
+    description: |
+      Reflected — set during an active pointer-drag on the resize handle.
+      Useful for suppressing transitions while dragging.
+    type: boolean
+    default: false
+    reflect: true
+
+  resizable:
+    description: |
+      Opts in to drag-to-resize behavior. Author supplies a child
+      [data-resize] element as the drag handle.
+    type: boolean
+    default: false
+    reflect: true
+
+  collapsible:
+    description: |
+      Opts in to programmatic collapse — toggle button wiring + the
+      .toggle() / .collapse() / .expand() public methods.
+    type: boolean
+    default: false
+    reflect: true
+
+  name:
+    description: |
+      Identifier for localStorage namespacing. Defaults to slot value
+      ("leading" or "trailing"). Override when running multiple sidebars
+      with the same slot.
+    type: string
+    default: ""
+    reflect: true
+
+  min-width:
+    description: |
+      Optional override for the snap-floor width. Defaults to reading
+      CSS min-width via getComputedStyle.
+    type: string
+    default: ""
+    reflect: true
+
+events:
+  sidebar-toggle:
+    description: Bubbles when sidebar collapses or expands.
+    detail:
+      name: string
+      expanded: boolean
+  sidebar-resize:
+    description: Bubbles when an active pointer-drag releases.
+    detail:
+      name: string
+      width: number
+
+slots:
+  default:
+    description: >-
+      Default content — typically a <nav-ui> for navigation, or a list
+      / tree for the trailing inspector pattern.
+  header:
+    description: >-
+      Top chrome bar (workspace select, breadcrumb, etc.).
+  footer:
+    description: >-
+      Bottom chrome bar (user select, status indicator, etc.).
+
+states:
+  - name: idle
+    description: Default, expanded.
+  - name: collapsed
+    attribute: collapsed
+    description: Sidebar width is at or below the snap threshold; CSS
+      container queries flip child layout to icon-only mode.
+  - name: resizing
+    attribute: resizing
+    description: Active pointer-drag in progress.
+
+traits: []
+
+a2ui:
+  rules:
+    - >-
+      chat-sidebar is the bespoke replacement for legacy
+      <aside data-sidebar>. Use slot="leading" or slot="trailing"
+      to position. Add resizable + collapsible attributes to opt in
+      to interactive behaviors.
+    - >-
+      For chrome bars inside the sidebar, prefer <admin-topbar
+      slot="header"> and <admin-statusbar slot="footer"> over raw
+      <header-ui> / <footer-ui> when authoring shell-tier markup.
+
+keywords:
+  - chat-sidebar
+  - chat-sidebar
+  - conversation-history
+  - chat-rail
+  - sidebar
+  - leading
+  - trailing
+  - inspector
+
+synonyms:
+  sidebar: [aside, rail, panel]
+  collapsed: [minimized, narrow, icon-only]
+
+related:
+  - ChatShell
+  - ChatComposer
+  - ChatHeader
+  - List
+  - Nav

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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>