@adia-ai/web-modules 0.8.44 → 0.8.45

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog — @adia-ai/web-modules
 
+## [0.8.45] — 2026-08-20
+
+### Changed
+- **New `shared/sidebar-persist.js` module extracted from the admin/chat sidebars' duplicated collapse/persist mechanics (gh#1767).** `editor-sidebar` kept bespoke (pane-ui delegation).
+- **`for=`-carrying component normalization (gh#1764/#1780) and `RouteController` dedup onto `@adia-ai/web-components`'s `core/controller.js` (gh#1766) ride along — no `web-modules`-local API change.**
+
+### Note
+- The headline v0.8.45 work shipped in `@adia-ai/web-components`. See `packages/web-components/CHANGELOG.md#0845--2026-08-20` for details.
+
+### Maintenance
+- **`billing/` touched in this release window** (8 file(s), e.g. `billing-overview/billing-overview.class.js`) — carried by the entries above.
+- **`dist/` bundles rebuilt** in this cut's window (1 file(s)) — regenerated from the source changes described above, not independent edits.
+- **`shell/` touched in this release window** (1 file(s), e.g. `admin-sidebar/admin-sidebar.js`) — carried by the entries above.
+
 ## [0.8.44] — 2026-08-20
 
 ### Fixed

package/billing/billing-overview/billing-overview.class.js

@@ -51,6 +51,7 @@
 
 import { UIElement } from '@adia-ai/web-components/core/element';
 import { untracked } from '@adia-ai/web-components/core/signals';
+import { json } from '@adia-ai/web-components/core/transport';
 
 const KNOWN_STATUSES = new Set([
   'active', 'trialing', 'past_due', 'canceled', 'paused',
@@ -187,9 +188,7 @@ export class UIBillingOverview extends UIElement {
     this.loading = true;
     this.removeAttribute('error');
     try {
-      const res = await fetch(src);
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const data = await res.json();
+      const data = await json(src);
       if (tag !== this.#loadCount) return;
       this.loading = false;
       const record = data && typeof data === 'object' && data.account
@@ -214,6 +213,11 @@ export class UIBillingOverview extends UIElement {
   // ── Lifecycle ─────────────────────────────────────────────────────
 
   connected() {
+    // gh#1760 — opt this element out of core/data-stream.js's document-level
+    // auto-observer. This composite is the sole owner of `data-stream-src`
+    // for itself (hand-rolled `refresh()` above); without this marker, a
+    // page that also imports the core barrel double-fetches on connect.
+    this.setAttribute('data-stream-managed', 'false');
     this.setAttribute('role', 'region');
 
     if (!this.#stamped) {

package/billing/invoice-detail/invoice-detail.class.js

@@ -29,6 +29,7 @@
 
 import { UIElement } from '@adia-ai/web-components/core/element';
 import { untracked } from '@adia-ai/web-components/core/signals';
+import { json } from '@adia-ai/web-components/core/transport';
 
 const KNOWN_STATUSES = new Set(['draft', 'open', 'paid', 'past-due', 'void']);
 
@@ -177,9 +178,7 @@ export class UIInvoiceDetail extends UIElement {
     this.loading = true;
     this.removeAttribute('error');
     try {
-      const res = await fetch(src);
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const data = await res.json();
+      const data = await json(src);
       if (tag !== this.#loadCount) return; // stale
       this.loading = false;
       // Allow either {invoice: {...}} envelope or the raw record.
@@ -212,6 +211,10 @@ export class UIInvoiceDetail extends UIElement {
   // ── Lifecycle ─────────────────────────────────────────────────────
 
   connected() {
+    // gh#1760 — opt out of core/data-stream.js's document-level
+    // auto-observer; this composite owns `data-stream-src` itself
+    // via the hand-rolled `refresh()` above.
+    this.setAttribute('data-stream-managed', 'false');
     this.setAttribute('role', 'region');
 
     if (!this.#stamped) {

package/billing/invoice-history/invoice-history.class.js

@@ -34,6 +34,7 @@
 
 import { UIElement } from '@adia-ai/web-components/core/element';
 import { untracked } from '@adia-ai/web-components/core/signals';
+import { json } from '@adia-ai/web-components/core/transport';
 
 const KNOWN_STATUSES = new Set(['draft', 'open', 'paid', 'past-due', 'void']);
 
@@ -227,9 +228,7 @@ export class InvoiceHistory extends UIElement {
     this.setAttribute('loading', '');
     this.removeAttribute('error');
     try {
-      const res = await fetch(src);
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const data = await res.json();
+      const data = await json(src);
       if (tag !== this.#loadCount) return; // stale
       this.removeAttribute('loading');
       const list = Array.isArray(data)
@@ -255,6 +254,10 @@ export class InvoiceHistory extends UIElement {
 
   connected() {
     super.connected?.();
+    // gh#1760 — opt out of core/data-stream.js's document-level
+    // auto-observer; this composite owns `data-stream-src` itself
+    // via the hand-rolled `refresh()` below.
+    this.setAttribute('data-stream-managed', 'false');
     this.setAttribute('role', 'region');
     if (!this.hasAttribute('aria-label') && !this.hasAttribute('aria-labelledby')) {
       this.setAttribute('aria-label', 'Invoice history');

package/billing/plan-picker/plan-picker.class.js

@@ -43,6 +43,7 @@
 
 import { UIFormElement } from '@adia-ai/web-components/core/form';
 import { untracked } from '@adia-ai/web-components/core/signals';
+import { json } from '@adia-ai/web-components/core/transport';
 
 const KNOWN_CYCLES = new Set(['monthly', 'annual']);
 
@@ -185,9 +186,7 @@ export class PlanPicker extends UIFormElement {
     this.setAttribute('loading', '');
     this.removeAttribute('error');
     try {
-      const res = await fetch(src);
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const data = await res.json();
+      const data = await json(src);
       if (tag !== this.#loadCount) return; // stale
       this.removeAttribute('loading');
       const list = Array.isArray(data) ? data : (Array.isArray(data?.plans) ? data.plans : []);
@@ -211,6 +210,10 @@ export class PlanPicker extends UIFormElement {
 
   connected() {
     super.connected();
+    // gh#1760 — opt out of core/data-stream.js's document-level
+    // auto-observer; this composite owns `data-stream-src` itself
+    // via the hand-rolled `refresh()` above.
+    this.setAttribute('data-stream-managed', 'false');
     this.setAttribute('role', 'radiogroup');
     if (!this.hasAttribute('aria-label') && !this.hasAttribute('aria-labelledby')) {
       this.setAttribute('aria-label', 'Choose a plan');

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

@@ -37,13 +37,22 @@
  * Backwards compat: <chat-shell> still recognizes the legacy
  * `<aside data-sidebar="leading">` shape via :is() selector. New
  * code should prefer <chat-sidebar>.
+ *
+ * gh#1767 (reactivity review R8b) — collapse()/expand()/toggle() and the
+ * localStorage persistence now come from ../../shared/sidebar-persist.js,
+ * shared verbatim with <admin-sidebar> (the storage-key PREFIX is this
+ * component's own — `adia-chat-sidebar-*` — so no existing user's
+ * persisted width resets). See that module's header for why
+ * editor-sidebar isn't a third consumer.
  */
 
 import { defineIfFree } from '@adia-ai/web-components/core/register';
 import { UIElement } from '@adia-ai/web-components/core/element';
-
-const SNAP_THRESHOLD = 96;
-const SNAP_MIN_USABLE = 160;
+import {
+  attachSidebarCollapsePersist,
+  SIDEBAR_SNAP_THRESHOLD as SNAP_THRESHOLD,
+  SIDEBAR_SNAP_MIN_USABLE as SNAP_MIN_USABLE,
+} from '../../shared/sidebar-persist.js';
 
 class ChatSidebar extends UIElement {
   static properties = {
@@ -57,17 +66,21 @@ class ChatSidebar extends UIElement {
 
   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;
+  // Collapse/expand/toggle/persist mechanics — shared with admin-sidebar
+  // (reactivity review R8b, gh#1767); see shared/sidebar-persist.js for
+  // why editor-sidebar isn't a third consumer. No `guardZeroWidth` here —
+  // chat-sidebar's pre-extraction behavior never guarded a zero-rect
+  // connect (unlike admin-sidebar's gh#286 fix), so this stays unguarded
+  // too (behavior-preserving, not a bug fix bundled into this extraction).
+  #persist = attachSidebarCollapsePersist(this, { prefix: 'adia-chat-sidebar' });
 
   connected() {
-    this.#restoreFromStorage();
+    this.#persist.restoreFromStorage();
     if (this.resizable) this.#setupResizeHandle();
     this.#setupChildResizeObserver();
-    this.#syncCollapsedFromWidth();
+    this.#persist.syncCollapsedFromWidth();
   }
 
   disconnected() {
@@ -84,68 +97,17 @@ class ChatSidebar extends UIElement {
    * Returns the new collapsed value.
    */
   toggle() {
-    if (this.collapsed) {
-      this.expand();
-    } else {
-      this.collapse();
-    }
-    return this.collapsed;
+    return this.#persist.toggle();
   }
 
   /** 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);
+    this.#persist.collapse();
   }
 
   /** 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;
+    this.#persist.expand();
   }
 
   // ── Resize drag handle ──
@@ -189,8 +151,8 @@ class ChatSidebar extends UIElement {
           this.style.width = `${SNAP_MIN_USABLE}px`;
         }
 
-        this.#persist(this.style.width);
-        this.#syncCollapsedFromWidth();
+        this.#persist.persist(this.style.width);
+        this.#persist.syncCollapsedFromWidth();
         this.dispatchEvent(new CustomEvent('sidebar-resize', {
           bubbles: true,
           detail: { name: this.name || slot, width: this.getBoundingClientRect().width },
@@ -220,15 +182,6 @@ class ChatSidebar extends UIElement {
     });
     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 },
-    }));
-  }
 }
 
 defineIfFree('chat-sidebar', ChatSidebar);