@adia-ai/web-modules 0.3.3 → 0.3.5

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

@@ -0,0 +1,196 @@
+/* ═══════════════════════════════════════════════════════════════
+   chat-shell — Bespoke shell-tier children (Phase 2 of ADR-0023)
+
+   The chat-* CSS-only structural children are styled by SHARING the
+   same CSS rules as their legacy raw-HTML counterparts. This file
+   re-applies the existing selectors (header / section / footer) to
+   the new bespoke tags via display + structural mappings.
+
+   Mirrors the admin-shell.bespoke.css pattern. Keeps the chat
+   cluster's CSS modifications isolated in one bridge file so Phase 3
+   (legacy shape removal) is a single-file delete.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ── chat-header — top chrome bar ── */
+chat-shell > chat-header,
+chat-sidebar > chat-header[slot="header"],
+chat-sidebar > chat-header:first-child {
+  display: flex;
+  align-items: center;
+  gap: var(--chat-header-gap, var(--a-space-2));
+  padding: 0 var(--chat-header-px, var(--a-space-3));
+  height: var(--chat-header-height, var(--a-size-lg));
+  font-size: var(--chat-header-font, var(--a-ui-size));
+  border-bottom: var(--chat-border, 1px solid var(--a-border-subtle));
+  flex-shrink: 0;
+  background: var(--chat-bg, var(--a-bg));
+}
+
+/* Slot vocabulary inside chat-header */
+chat-header > [slot="name"] {
+  font-weight: var(--a-weight-medium, 500);
+  color: var(--a-fg);
+}
+
+chat-header > [slot="status"] {
+  margin-inline-start: var(--a-space-2);
+}
+
+chat-header > [slot="action"]:first-of-type {
+  margin-inline-start: auto;
+}
+
+chat-header > [slot="action-leading"] {
+  margin-inline-end: var(--a-space-2);
+}
+
+/* ── chat-status — inline status indicator ── */
+chat-status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--a-space-1);
+  font-size: var(--a-ui-sm);
+  color: var(--a-fg-muted);
+}
+
+/* ── chat-thread — message scroll surface ── */
+chat-shell > chat-thread {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  display: flex;
+  flex-direction: column;
+  gap: var(--chat-message-gap, var(--a-space-3));
+  padding: var(--chat-thread-py, var(--a-space-4)) var(--chat-thread-px, var(--a-space-4));
+  background: var(--chat-thread-bg, var(--a-bg));
+}
+
+chat-thread[streaming] {
+  /* Optional: subtle indicator while streaming. Default: no visual change. */
+}
+
+/* ── chat-empty — empty state, hidden when messages present ── */
+chat-thread:not([empty]) > chat-empty {
+  display: none;
+}
+
+chat-thread[empty] > chat-empty {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: var(--a-space-6);
+}
+
+/* ── chat-composer — input wrapper ── */
+chat-shell > chat-composer {
+  display: flex;
+  align-items: stretch;
+  gap: var(--a-space-2);
+  padding: var(--chat-composer-py, var(--a-space-3)) var(--chat-composer-px, var(--a-space-3));
+  border-top: var(--chat-border, 1px solid var(--a-border-subtle));
+  background: var(--chat-bg, var(--a-bg));
+  flex-shrink: 0;
+}
+
+chat-composer > [slot="leading"],
+chat-composer > [slot="attach"] {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--a-space-1);
+}
+
+chat-composer > [slot="trailing"] {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--a-space-1);
+}
+
+/* The primary input child takes remaining space */
+chat-composer > :is(chat-input-ui, input-ui, textarea-ui) {
+  flex: 1;
+  min-width: 0;
+}
+
+chat-composer[disabled] {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* ── chat-sidebar — bridges to admin-sidebar pattern ──
+   Uses the same geometry + container-query + resize handle rules as
+   admin-sidebar. The cluster-namespaced tag exists for discoverability;
+   the styling logic is identical because the concern is identical
+   (resizable side rail). */
+
+:is(chat-sidebar[slot="leading"], chat-sidebar[slot="trailing"]) {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-width: var(--chat-sidebar-min-width, 48px);
+  max-width: var(--chat-sidebar-max-width, 480px);
+  min-height: 0;
+  font-size: var(--chat-sidebar-font, var(--a-ui-size));
+  position: relative;
+  container-type: inline-size;
+  container-name: sidebar;
+  transition: width var(--chat-duration, var(--a-duration, 200ms)) var(--chat-easing, var(--a-easing, ease));
+  background: var(--chat-bg, var(--a-bg));
+}
+
+chat-sidebar[slot="leading"] {
+  width: var(--chat-sidebar-width-leading, 240px);
+  border-right: var(--chat-border, 1px solid var(--a-border-subtle));
+}
+
+chat-sidebar[slot="trailing"] {
+  width: var(--chat-sidebar-width-trailing, 320px);
+  border-left: var(--chat-border, 1px solid var(--a-border-subtle));
+}
+
+/* Resize handle */
+:is(chat-sidebar[slot="leading"], chat-sidebar[slot="trailing"]) > [data-resize] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+  z-index: 1;
+  user-select: none;
+}
+
+chat-sidebar[slot="leading"] > [data-resize] { right: -3px; }
+chat-sidebar[slot="trailing"] > [data-resize] { left: -3px; }
+
+:is(chat-sidebar[slot="leading"], chat-sidebar[slot="trailing"]) > [data-resize]:hover {
+  background: var(--a-accent);
+  opacity: 0.5;
+}
+
+chat-sidebar[resizing] {
+  transition: none;
+}
+
+chat-sidebar[resizing] > [data-resize] {
+  background: var(--a-accent);
+  opacity: 0.8;
+}
+
+/* ── chat-shell layout — when bespoke children are used ──
+   Adjusts flex direction so chat-sidebar can sit alongside the main
+   chat surface. Without this, chat-shell's existing layout.css
+   assumes a vertical stack (header / messages / composer). */
+
+chat-shell:has(> chat-sidebar) {
+  display: flex;
+  flex-direction: row;
+}
+
+/* When sidebar is present, the main chat content (everything that
+   isn't a sidebar) needs to be a flex column itself */
+chat-shell:has(> chat-sidebar) > :not(chat-sidebar) {
+  display: contents;
+}

package/chat/chat-sidebar/chat-sidebar.a2ui.json

@@ -0,0 +1,136 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/ChatSidebar.json",
+  "title": "ChatSidebar",
+  "description": "Module-tier chat-cluster sidebar — owns resize, snap-to-collapsed,\npersistence, and the [collapsed] reflected attribute. Sits inside\n<chat-shell> as slot=\"leading\" (conversation history rail) or\nslot=\"trailing\" (artifacts/citations panel). Mirrors the admin-sidebar\nshape — same 4 concerns, cluster-namespaced for the chat family.\n\nThis is the chat-cluster equivalent of <admin-sidebar> per ADR-0023.\n<chat-shell> doesn't currently have a legacy sidebar shape (chat is\ntypically a single-pane experience), so <chat-sidebar> is purely\nforward-looking — for chat apps that want conversation-history or\ninspector rails.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "collapsed": {
+      "description": "Reflected — set when the sidebar's measured width is at or below\n96px. Consumers query this to style \"collapsed mode\" without\nduplicating threshold math.\n",
+      "type": "boolean",
+      "default": false
+    },
+    "collapsible": {
+      "description": "Opts in to programmatic collapse — toggle button wiring + the\n.toggle() / .collapse() / .expand() public methods.\n",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "ChatSidebar"
+    },
+    "min-width": {
+      "description": "Optional override for the snap-floor width. Defaults to reading\nCSS min-width via getComputedStyle.\n",
+      "type": "string",
+      "default": ""
+    },
+    "name": {
+      "description": "Identifier for localStorage namespacing. Defaults to slot value\n(\"leading\" or \"trailing\"). Override when running multiple sidebars\nwith the same slot.\n",
+      "type": "string",
+      "default": ""
+    },
+    "resizable": {
+      "description": "Opts in to drag-to-resize behavior. Author supplies a child\n[data-resize] element as the drag handle.\n",
+      "type": "boolean",
+      "default": false
+    },
+    "resizing": {
+      "description": "Reflected — set during an active pointer-drag on the resize handle.\nUseful for suppressing transitions while dragging.\n",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {
+      "sidebar-resize": {
+        "description": "Bubbles when an active pointer-drag releases.",
+        "detail": {
+          "name": "string",
+          "width": "number"
+        }
+      },
+      "sidebar-toggle": {
+        "description": "Bubbles when sidebar collapses or expands.",
+        "detail": {
+          "expanded": "boolean",
+          "name": "string"
+        }
+      }
+    },
+    "examples": [],
+    "keywords": [
+      "chat-sidebar",
+      "chat-sidebar",
+      "conversation-history",
+      "chat-rail",
+      "sidebar",
+      "leading",
+      "trailing",
+      "inspector"
+    ],
+    "name": "ChatSidebar",
+    "related": [
+      "ChatShell",
+      "ChatComposer",
+      "ChatHeader",
+      "List",
+      "Nav"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default content — typically a <nav-ui> for navigation, or a list / tree for the trailing inspector pattern."
+      },
+      "footer": {
+        "description": "Bottom chrome bar (user select, status indicator, etc.)."
+      },
+      "header": {
+        "description": "Top chrome bar (workspace select, breadcrumb, etc.)."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, expanded.",
+        "name": "idle"
+      },
+      {
+        "description": "Sidebar width is at or below the snap threshold; CSS container queries flip child layout to icon-only mode.",
+        "attribute": "collapsed",
+        "name": "collapsed"
+      },
+      {
+        "description": "Active pointer-drag in progress.",
+        "attribute": "resizing",
+        "name": "resizing"
+      }
+    ],
+    "synonyms": {
+      "collapsed": [
+        "minimized",
+        "narrow",
+        "icon-only"
+      ],
+      "sidebar": [
+        "aside",
+        "rail",
+        "panel"
+      ]
+    },
+    "tag": "chat-sidebar",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

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

@@ -0,0 +1,36 @@
+<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>

package/chat/chat-sidebar/chat-sidebar.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 Sidebar — 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-sidebar.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-sidebar.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-sidebar.examples.html — ${err.message}</p>`;
+      console.error('[chat-sidebar.html]', err);
+    }
+  </script>
+
+</body>
+</html>

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

@@ -0,0 +1,227 @@
+/**
+ * <chat-sidebar slot="leading|trailing" resizable collapsible>
+ *   <chat-header slot="header">…</chat-header>      (or any chrome bar)
+ *   …default content (nav, list, etc.)…
+ *   <chat-status slot="footer">…</chat-status>
+ * </chat-sidebar>
+ *
+ * Module-tier chat-cluster sidebar — owns resize, snap-to-collapsed, persistence,
+ * and the [collapsed] reflected attribute. Sits inside <chat-shell>
+ * but doesn't reach into it; the shell coordinates without orchestrating
+ * child internals.
+ *
+ * Reflected attributes (the consumer-queryable state):
+ *   [collapsed]   — set when sidebar width is at or below SNAP_THRESHOLD
+ *   [resizing]    — set during an active pointer-drag
+ *
+ * Author-supplied attributes (read once at connect, never overwritten):
+ *   [slot="leading"|"trailing"]  — required, drives drag direction +
+ *                                  localStorage namespacing
+ *   [resizable]                  — opts in to drag handle wiring
+ *   [collapsible]                — opts in to programmatic collapse
+ *                                  (toggle button + window.toggle())
+ *   [name="<id>"]                — optional override for the localStorage
+ *                                  key. Defaults to slot value.
+ *   [min-width="48px"]           — optional override for the snap-floor
+ *                                  width (otherwise reads CSS min-width)
+ *
+ * Events:
+ *   sidebar-toggle  — bubbles. detail: { name, expanded }
+ *   sidebar-resize  — bubbles. detail: { name, width }
+ *
+ * The drag handle is conventional: a child `[data-resize]` element.
+ * Authors may provide a custom one, or omit (no resize affordance).
+ *
+ * Backwards compat: <chat-shell> still recognizes the legacy
+ * `<aside data-sidebar="leading">` shape via :is() selector. New
+ * code should prefer <chat-sidebar>.
+ */
+
+import { UIElement } from '../../../web-components/core/element.js';
+
+const SNAP_THRESHOLD = 96;
+const SNAP_MIN_USABLE = 160;
+
+class ChatSidebar extends UIElement {
+  static properties = {
+    collapsed: { type: Boolean, default: false, reflect: true },
+    resizing: { type: Boolean, default: false, reflect: true },
+    resizable: { type: Boolean, default: false, reflect: true },
+    collapsible: { type: Boolean, default: false, reflect: true },
+    name: { type: String, default: '', reflect: true },
+    minWidth: { type: String, default: '', reflect: true, attribute: 'min-width' },
+  };
+
+  static template = () => null;
+
+  // The width the sidebar had before being collapsed — used for restore.
+  // Map keyed by sidebar name allows multiple sidebars on one host.
+  #previousExpandedWidth = '';
+  #resizeCleanups = [];
+  #childRO = null;
+
+  connected() {
+    this.#restoreFromStorage();
+    if (this.resizable) this.#setupResizeHandle();
+    this.#setupChildResizeObserver();
+    this.#syncCollapsedFromWidth();
+  }
+
+  disconnected() {
+    for (const cleanup of this.#resizeCleanups) cleanup();
+    this.#resizeCleanups = [];
+    this.#childRO?.disconnect();
+    this.#childRO = null;
+  }
+
+  // ── Public API (callable from <chat-shell> or external code) ──
+
+  /**
+   * Toggle collapsed state. Collapses if expanded, restores if collapsed.
+   * Returns the new collapsed value.
+   */
+  toggle() {
+    if (this.collapsed) {
+      this.expand();
+    } else {
+      this.collapse();
+    }
+    return this.collapsed;
+  }
+
+  /** Collapse to the snap-floor width. Persists to localStorage. */
+  collapse() {
+    if (this.collapsed) return;
+    // Remember current expanded width before collapsing
+    const currentWidth = this.style.width || getComputedStyle(this).width;
+    if (parseFloat(currentWidth) > SNAP_THRESHOLD) {
+      this.#previousExpandedWidth = currentWidth;
+    }
+    const minW = this.minWidth || getComputedStyle(this).minWidth;
+    this.style.width = minW;
+    this.#persist(minW);
+    this.collapsed = true;
+    this.#dispatchToggle(false);
+  }
+
+  /** Restore to the previous expanded width (or default if none). */
+  expand() {
+    if (!this.collapsed) return;
+    const restoreWidth = this.#previousExpandedWidth || '';
+    this.style.width = restoreWidth;
+    this.#persist(restoreWidth);
+    this.collapsed = false;
+    this.#dispatchToggle(true);
+  }
+
+  // ── Persistence ──
+
+  #storageKey() {
+    const id = this.name || this.getAttribute('slot') || 'default';
+    return `adia-chat-sidebar-${id}`;
+  }
+
+  #persist(width) {
+    try { localStorage.setItem(this.#storageKey(), width); } catch {}
+  }
+
+  #restoreFromStorage() {
+    try {
+      const saved = localStorage.getItem(this.#storageKey());
+      if (!saved) return;
+      this.style.width = saved;
+      // Only treat as "previous expanded" if actually expanded
+      const w = parseFloat(saved);
+      if (!isNaN(w) && w > SNAP_THRESHOLD) {
+        this.#previousExpandedWidth = saved;
+      }
+    } catch {}
+  }
+
+  // ── Reflect [collapsed] from current measured width ──
+
+  #syncCollapsedFromWidth() {
+    const w = this.getBoundingClientRect().width;
+    this.collapsed = w <= SNAP_THRESHOLD;
+  }
+
+  // ── Resize drag handle ──
+
+  #setupResizeHandle() {
+    const handle = this.querySelector(':scope > [data-resize]');
+    if (!handle) return;
+
+    const slot = this.getAttribute('slot');
+    const isLeading = slot === 'leading';
+
+    const onPointerDown = (e) => {
+      e.preventDefault();
+      handle.setPointerCapture(e.pointerId);
+      const startX = e.clientX;
+      const startW = this.getBoundingClientRect().width;
+      this.resizing = true;
+      document.documentElement.style.cursor = 'col-resize';
+
+      const onMove = (e) => {
+        const dx = e.clientX - startX;
+        const max = parseInt(getComputedStyle(this).getPropertyValue('max-width')) || 480;
+        const w = Math.max(48, Math.min(max, startW + (isLeading ? dx : -dx)));
+        this.style.width = `${w}px`;
+      };
+
+      const onUp = () => {
+        this.resizing = false;
+        document.documentElement.style.cursor = '';
+        handle.removeEventListener('pointermove', onMove);
+        handle.removeEventListener('pointerup', onUp);
+
+        // Snap logic
+        const w = this.getBoundingClientRect().width;
+        if (w <= SNAP_THRESHOLD) {
+          this.style.width = this.minWidth || getComputedStyle(this).minWidth;
+        } else if (w < SNAP_MIN_USABLE) {
+          this.style.width = `${SNAP_MIN_USABLE}px`;
+        }
+
+        this.#persist(this.style.width);
+        this.#syncCollapsedFromWidth();
+        this.dispatchEvent(new CustomEvent('sidebar-resize', {
+          bubbles: true,
+          detail: { name: this.name || slot, width: this.getBoundingClientRect().width },
+        }));
+      };
+
+      handle.addEventListener('pointermove', onMove);
+      handle.addEventListener('pointerup', onUp);
+    };
+
+    handle.addEventListener('pointerdown', onPointerDown);
+    this.#resizeCleanups.push(() => handle.removeEventListener('pointerdown', onPointerDown));
+  }
+
+  // ── Child ResizeObserver — flips select-ui placement in narrow mode ──
+
+  #setupChildResizeObserver() {
+    this.#childRO = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const narrow = entry.contentBoxSize[0].inlineSize <= SNAP_THRESHOLD;
+        for (const sel of this.querySelectorAll('select-ui')) {
+          sel.setAttribute('placement', narrow ? 'right' : 'bottom-start');
+        }
+      }
+    });
+    this.#childRO.observe(this);
+  }
+
+  // ── Internal — dispatch the toggle event in a consistent shape ──
+
+  #dispatchToggle(expanded) {
+    this.dispatchEvent(new CustomEvent('sidebar-toggle', {
+      bubbles: true,
+      detail: { name: this.name || this.getAttribute('slot') || 'default', expanded },
+    }));
+  }
+}
+
+customElements.define('chat-sidebar', ChatSidebar);
+export { ChatSidebar };