@adia-ai/web-modules 0.8.3 → 0.8.5

package/CHANGELOG.md

@@ -1,4 +1,28 @@
 # Changelog — @adia-ai/web-modules
+
+## [0.8.5] — 2026-07-17
+
+### Added
+- **`scripts/verify/exports-wildcard-resolution.mjs`** (gh#296, shared with `@adia-ai/web-components`): live-resolution regression gate asserting every documented short-form CSS/JS subpath specifier resolves to a real on-disk file. Removed 6 dead exports-map keys (`./shell/*/*.css`, `./chat/*/*.css`, `./editor/*/*.css`, `./simple/*/*.css`, `./runtime/*/*.css`, `./theme/*/*.css`) — confirmed via live `import.meta.resolve()` testing that these never actually resolved (Node's pattern matching always picked the single-wildcard sibling key instead), so they provided no real "nested form" support despite looking like they did. Documented the underlying trap (a redundant nested specifier like `shell/admin-command/admin-command.css` silently resolves to a garbage, nonexistent quadrupled path instead of throwing) in `README.md` — not fixable in the exports map itself, since Node's `*` matches across `/` with no way to constrain it to one path segment.
+
+### Fixed
+- **`shell/admin-sidebar`: a zero-rect connect no longer snaps the sidebar collapsed (gh#286)**: `connectedCallback` read `getBoundingClientRect().width` synchronously and derived `[collapsed]` from it unconditionally — SSR shims (no layout engine) and any early-connect case (an ancestor `display:none`) always return 0×0, which unconditionally satisfied the collapse threshold. A zero width is now treated as "unknown," not "collapsed" — `#syncCollapsedFromWidth()` no-ops on a 0 read; the existing per-host `ResizeObserver` now also derives `[collapsed]` from its first tick as the deferred correction. 3 new tests cover the zero-rect connect, a persisted-width survival case, and the `ResizeObserver` self-correction in both directions.
+- **Browser-only API call sites guarded for SSR (gh#285, shared with `@adia-ai/web-components`)**: `chat/chat-sidebar`, `chat/chat-thread`, `dashboard/dashboard-layout`, `editor/editor-canvas`, `editor/editor-sidebar`, and `shell/admin-sidebar` had unconditional `ResizeObserver`/`IntersectionObserver`/`MutationObserver` construction sites, now feature-detected — same audit and fix shape as `@adia-ai/web-components`; see `packages/web-components/CHANGELOG.md#085--2026-07-17` for the framework-wide detail.
+
+### Maintenance
+- **`dist/` bundles rebuilt** (`chat/chat-shell.min.js`, `editor/editor-shell.min.js`, `shell/admin-shell.min.js`, `simple/simple-shell.min.js`, `everything.min.js`) — picks up the gh#285/gh#286 source fixes above.
+
+## [0.8.4] — 2026-07-16
+
+### Added
+- **`chat-shell.appendMessage({ html: true })`** — assistant messages can carry trusted app-authored component markup (light-DOM upgrade in place); the `render` (markdown) path escapes inline HTML by design, which made gen-ui's error bubbles show raw `<col-ui …>` source text. The html mode persists on the message record and survives `stopStreaming()` and `conversation` getter/setter round-trips.
+
+### Fixed
+- **`billing/payment-method-list` row focus ring double-drew the edge** — the focused row kept its 1px card border under the ring (`outline` + `outline-offset`); `border-color: transparent` while focused, per the framework-wide focus-ring pairing ruling (2026-07-16).
+
+### Maintenance
+- **`dist/` bundles rebuilt** (`chat/chat-shell.min.js`, `everything.min.js` — the chat-shell change plus the inlined @adia-ai/llm provider-routing fixes).
+
 ## [0.8.3] — 2026-07-16
 
 ### Maintenance

package/README.md

@@ -168,6 +168,17 @@ import '@adia-ai/web-modules/runtime/gen-root.css';
 
 > **For pre-v0.4.5 consumers:** if you were importing CSS via the relative `node_modules` path (`'../node_modules/@adia-ai/web-modules/editor/editor-shell/editor-shell.css'`), switch to the package-specifier form above. The relative-path form is fragile under pnpm, Yarn PnP, and npm hoisting; the new package-specifier form works under all three.
 
+> **Don't repeat the directory name.** Every cluster child lives at
+> `<cluster>/<name>/<name>.css` on disk (e.g. `shell/admin-command/admin-command.css`),
+> so `@adia-ai/web-modules/shell/admin-command/admin-command.css` looks like
+> the natural specifier — it is NOT. Use the short form,
+> `@adia-ai/web-modules/shell/admin-command.css`, exactly as shown above.
+> The nested form silently resolves to a garbage, nonexistent path
+> (the directory name quadrupled) instead of a clear "not found" error —
+> Node's exports-map wildcards match across `/` with no way to prevent
+> this, so it can't be fixed in the package. Tracked as
+> [gh#296](https://github.com/adiahealth/gen-ui-kit/issues/296).
+
 ## Import: JS + CSS in one line (`/with-css`)
 
 For the `shell` cluster, the `/with-css` opt-in collapses the JS + CSS

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

@@ -66,13 +66,15 @@ class ChatShell extends UIElement {
   get conversation() {
     return this.#messages
       .filter(m => m.role === 'user' || m.role === 'assistant')
-      .map(m => ({ role: m.role, content: m.content }));
+      .map(m => (m.html ? { role: m.role, content: m.content, html: true } : { role: m.role, content: m.content }));
   }
 
   set conversation(msgs) {
     this.clear();
     for (const m of msgs) {
-      this.appendMessage({ role: m.role, content: m.content, render: true });
+      // Round-trip the html mode — re-rendering an html message through
+      // the markdown path would escape its component markup.
+      this.appendMessage({ role: m.role, content: m.content, render: !m.html, html: !!m.html });
     }
   }
 
@@ -122,9 +124,22 @@ class ChatShell extends UIElement {
 
   // ── Message management ──
 
-  appendMessage({ role, content = '', render: renderMd = false }) {
+  /**
+   * @param {object} msg
+   * @param {string} msg.role — 'user' | 'assistant' | 'error'
+   * @param {string} [msg.content]
+   * @param {boolean} [msg.render] — treat content as MARKDOWN (inline HTML
+   *   is escaped — component markup shows as literal text under this flag)
+   * @param {boolean} [msg.html] — assistant only: insert content as raw
+   *   HTML (light-DOM component markup upgrades in place). TRUSTED
+   *   app-authored strings only — never LLM output or user input; the
+   *   caller owns escaping of any interpolated values.
+   */
+  appendMessage({ role, content = '', render: renderMd = false, html = false }) {
     const id = `msg_${++msgId}`;
-    this.#messages.push({ id, role, content });
+    // html persists on the record: stopStreaming() and the conversation
+    // setter must never push an html message back through the markdown path.
+    this.#messages.push({ id, role, content, html });
 
     const el = document.createElement('div');
     el.setAttribute('data-role', role);
@@ -133,10 +148,13 @@ class ChatShell extends UIElement {
     if (role === 'user') {
       el.innerHTML = `<div data-bubble>${escapeHTML(content)}</div>`;
     } else if (role === 'assistant') {
-      const rendered = renderMd && content ? renderMarkdown(content) : escapeHTML(content);
+      const done = renderMd || html;
+      const rendered = html ? content
+        : renderMd && content ? renderMarkdown(content)
+        : escapeHTML(content);
       el.innerHTML = `
         <span data-avatar>AI</span>
-        <div data-bubble><div data-content>${rendered}</div>${!renderMd ? '<span data-cursor></span>' : ''}</div>
+        <div data-bubble><div data-content>${rendered}</div>${!done ? '<span data-cursor></span>' : ''}</div>
       `;
     } else if (role === 'error') {
       el.innerHTML = `<icon-ui name="warning"></icon-ui><span>${escapeHTML(content)}</span>`;
@@ -202,9 +220,11 @@ class ChatShell extends UIElement {
     // Remove cursor
     this.#messagesEl?.querySelector('[data-role]:last-child [data-cursor]')?.remove();
 
-    // Render markdown in last assistant bubble
+    // Render markdown in last assistant bubble — never an html-mode
+    // message: its component markup is already live DOM, and the markdown
+    // path would re-escape it to source text.
     const last = this.#messages[this.#messages.length - 1];
-    if (last?.role === 'assistant' && last.content) {
+    if (last?.role === 'assistant' && last.content && !last.html) {
       const contentEl = this.#messagesEl?.querySelector('[data-role]:last-child [data-content]');
       if (contentEl) {
         contentEl.innerHTML = renderMarkdown(last.content);

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

@@ -202,6 +202,8 @@ class ChatSidebar extends UIElement {
   // ── Child ResizeObserver — flips select-ui placement in narrow mode ──
 
   #setupChildResizeObserver() {
+    // gh#285 — SSR DOM shims (linkedom) have no ResizeObserver global.
+    if (typeof ResizeObserver === 'undefined') return;
     this.#childRO = new ResizeObserver((entries) => {
       for (const entry of entries) {
         const narrow = entry.contentBoxSize[0].inlineSize <= SNAP_THRESHOLD;

package/chat/chat-thread/chat-thread.js

@@ -81,6 +81,8 @@ class ChatThread extends UIElement {
   }
 
   #setupChildObserver() {
+    // gh#285 — SSR DOM shims (linkedom) have no MutationObserver global.
+    if (typeof MutationObserver === 'undefined') return;
     this.#childObserver = new MutationObserver(() => {
       this.#syncEmptyFromChildren();
       // New message added — scroll to bottom if user is at bottom