@adia-ai/web-modules 0.4.5 → 0.4.7

package/CHANGELOG.md

@@ -11,6 +11,25 @@ Built from `@adia-ai/web-components` primitives.
 
 _No pending changes._
 
+## [0.4.7] - 2026-05-12
+
+### Changed — `chat/chat-thread.yaml` populates `synonyms.tags` (§72)
+
+The composite `chat-thread.yaml` picks up the alias array previously held in the retired `@adia-ai/a2ui-corpus/patterns/_components.json` — `chat`, `conversation`, `messages`, `chat-log`, `message-thread`. Sidecar regenerated by `npm run components`. Mirrors the per-component yaml sweep on `@adia-ai/web-components` for §72 (the §65 carry-over from v0.4.6).
+
+## [0.4.6] - 2026-05-12
+
+### Fixed — `<editor-sidebar>` resize-state detection via `:has()`
+
+`<editor-sidebar>`'s `[resizing]` host attribute previously tripped on a heuristic regex against `[data-resize], [class*="resize"], [class*="handle"]` matched on the pointerdown's direct target. This caught `admin-sidebar`'s `[data-resize]` grabber but missed `<pane-ui>`'s slot-based `[slot="resize"]` grabber — so the wrapper's `transition: width` collapse animation was never suppressed during a pane drag, causing the wrapper to interpolate widths while pointer events tracked 1:1 (visible "rubber band" + ~16-ms-per-frame stutter).
+
+- **`editor-sidebar.js`** — pointerdown detection switched to `closest('[slot="resize"], [data-resize], [class*="handle"]')`, matching both the pane's slot-based handle and the legacy `[data-resize]` shape. Behavior preserved for admin/chat sidebars; pane-ui case now correctly sets `[resizing]`.
+- **`editor-shell.bespoke.css`** — CSS bypass selector widened from `editor-sidebar[resizing]` to `editor-sidebar:is([resizing], :has(pane-ui[data-resizing]))`, so the transition-bypass fires whenever EITHER (a) the wrapper detected pointerdown on a known handle OR (b) any descendant `<pane-ui>` is in an active drag (independent of pointerdown heuristics). Defense-in-depth: covers consumer rules with high specificity that defeat the host-level `[resizing]` attribute.
+
+Pairs with the `<pane-ui>` resize tracking fix in `@adia-ai/web-components@[Unreleased]`.
+
+See root [CHANGELOG.md `[Unreleased]`](../../CHANGELOG.md) for the cross-cutting arc narrative.
+
 ## [0.4.5] - 2026-05-12
 
 ### Added — CSS importable via package specifier (§61)

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

@@ -76,6 +76,12 @@
         "messages",
         "message-stream"
       ],
+      "tags": [
+        "Chat",
+        "conversation",
+        "chat-log",
+        "message-thread"
+      ],
       "thread": [
         "conversation",
         "dialogue",

package/chat/chat-thread/chat-thread.yaml

@@ -1,89 +1,98 @@
-# 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
+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
+
+  [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.
+    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
+    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.
-
+    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.
-
+- 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).
-
+  - 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
-
+- chat-thread
+- message-list
+- conversation
+- thread
+- scroll-surface
 synonyms:
-  thread: [conversation, dialogue, chat-log, transcript]
-  message-list: [messages, message-stream]
-
+  thread:
+  - conversation
+  - dialogue
+  - chat-log
+  - transcript
+  message-list:
+  - messages
+  - message-stream
+  tags:
+  - Chat
+  - conversation
+  - chat-log
+  - message-thread
 related:
-  - ChatShell
-  - ChatEmpty
-  - ChatComposer
-  - ChatSidebar
+- ChatShell
+- ChatEmpty
+- ChatComposer
+- ChatSidebar

package/editor/editor-shell/css/editor-shell.bespoke.css

@@ -198,11 +198,17 @@ editor-sidebar[collapsed] {
   /* Children can hide labels / shrink icons via [data-narrow] */
 }
 
-/* When resizing — disable transitions to feel responsive */
-editor-sidebar[resizing] {
+/* When resizing — disable transitions to feel responsive.
+   `:has(pane-ui[data-resizing])` makes the bypass independent of the
+   wrapper's pointerdown heuristic: as long as the inner pane is in an
+   active drag, the wrapper's `transition: width` is suppressed. The
+   inner-pane rule is redundant (pane.css owns its own bypass) but is
+   kept for defense-in-depth against consumer rules with high
+   specificity. */
+editor-sidebar:is([resizing], :has(pane-ui[data-resizing])) {
   transition: none;
 }
-editor-sidebar[resizing] > pane-ui {
+editor-sidebar:is([resizing], :has(pane-ui[data-resizing])) > pane-ui {
   transition: none;
 }
 

package/editor/editor-sidebar/editor-sidebar.js

@@ -97,10 +97,11 @@ class EditorSidebar extends UIElement {
     // (pane-ui's drag-handle is internal; we listen on the pane and let
     // pointerup on document terminate)
     this.#onPointerDown = (e) => {
-      // Heuristic — pointerdown inside pane that targets a drag-handle
-      // (covers pane-ui's internal handle classes + [data-resize])
+      // pane-ui's resize grabber is `[slot="resize"]`; admin-sidebar and
+      // chat-sidebar use `[data-resize]`. Match both so this wrapper's
+      // `[resizing]` attribute reflects whichever primitive is composed.
       const target = e.target;
-      if (target?.matches?.('[data-resize], [class*="resize"], [class*="handle"]')) {
+      if (target?.closest?.('[slot="resize"], [data-resize], [class*="handle"]')) {
         this.resizing = true;
       }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-modules",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "description": "AdiaUI composite custom elements — shell, chat, editor, runtime clusters built from @adia-ai/web-components primitives. Subpath exports per cluster.",
   "type": "module",
   "exports": {