@adia-ai/web-modules 0.8.44 → 0.8.45

package/shared/sidebar-persist.js

@@ -0,0 +1,152 @@
+/**
+ * Shared sidebar collapse/persist mechanics — admin-sidebar, chat-sidebar,
+ * and editor-sidebar each implemented their own copy of this (reactivity
+ * review R8b, gh#1767): collapse()/expand()/toggle(), the localStorage
+ * width persistence, and the storage-key resolution — byte-identical
+ * between admin-sidebar and chat-sidebar modulo their storage-key PREFIX.
+ *
+ * A `defineTrait()` (ADR-0018/0060) was considered and rejected for this
+ * extraction: traits are a PUBLIC, declaratively-attachable behavior
+ * catalog (`traits="name"` on any element, the MCP `get_traits` tool, the
+ * site trait-demo gallery). This mechanism needs a host that already
+ * owns `collapsed`/`name`/`minWidth` reactive properties — it isn't
+ * meaningfully attachable to an arbitrary element the way `pressable` or
+ * `resettable` are — and forking a full trait folder (demo page,
+ * sitemap/llms.txt registration, `_api-table` wiring) for a 2-consumer
+ * internal helper is disproportionate. A shared module still satisfies
+ * the actual cross-cutting-behavior concern the doctrine protects
+ * against (duplicated mechanics silently drifting apart) without minting
+ * public surface nothing else will ever declare.
+ *
+ * editor-sidebar is deliberately NOT a consumer of
+ * `attachSidebarCollapsePersist` below: it delegates width to an inner
+ * `<pane-ui>` and owns a GH-223 transition-suppression state machine
+ * tightly coupled to its own collapse()/expand() timing — folding that
+ * into this module's generic width math would risk exactly the
+ * regression class this extraction exists to avoid. It still imports
+ * `readSidebarWidth`/`persistSidebarWidth` for its own localStorage
+ * access, so all three sidebars share the actual persistence mechanics;
+ * only editor's collapse/expand METHODS stay bespoke to it.
+ */
+
+// px — at/below this width, a sidebar counts as "collapsed".
+export const SIDEBAR_SNAP_THRESHOLD = 96;
+// px — a settled expanded width below this (but above the collapse
+// threshold) snaps up to it instead of resting mid-drag.
+export const SIDEBAR_SNAP_MIN_USABLE = 160;
+
+/** Read a persisted width string from localStorage. Swallows private-mode/quota errors. */
+export function readSidebarWidth(key) {
+  try { return localStorage.getItem(key); } catch { return null; }
+}
+
+/** Persist a width string to localStorage. Swallows private-mode/quota errors. */
+export function persistSidebarWidth(key, width) {
+  try { localStorage.setItem(key, width); } catch { /* private mode etc. */ }
+}
+
+/**
+ * Attach collapse()/expand()/toggle() + connect-time localStorage restore
+ * to a host that already declares reflected `collapsed`/`name`/`minWidth`
+ * properties and mutates its OWN `style.width` directly (admin-sidebar's
+ * and chat-sidebar's shape — never editor-sidebar's, see module doc above).
+ *
+ * @param {HTMLElement & {collapsed: boolean, name: string, minWidth: string}} host
+ * @param {{ prefix: string, guardZeroWidth?: boolean }} options
+ *   `prefix` — this sidebar's OWN storage namespace, e.g. "adia-sidebar"
+ *   (admin) or "adia-chat-sidebar" (chat) — gh#1767 keeps these distinct
+ *   on purpose so no existing user's persisted width resets.
+ *   `guardZeroWidth` — reproduces admin-sidebar's gh#286 SSR/zero-rect
+ *   guard in `syncCollapsedFromWidth()`. chat-sidebar's pre-extraction
+ *   behavior never had this guard; defaults to `false` to match it
+ *   exactly (behavior-preserving — not a bug fix bundled into this
+ *   extraction).
+ * @returns {{
+ *   storageKey(): string,
+ *   persist(width: string): void,
+ *   restoreFromStorage(): void,
+ *   syncCollapsedFromWidth(): void,
+ *   collapse(): void,
+ *   expand(): void,
+ *   toggle(): boolean,
+ * }}
+ */
+export function attachSidebarCollapsePersist(host, { prefix, guardZeroWidth = false }) {
+  // The width the sidebar had before being collapsed — used for restore.
+  let previousExpandedWidth = '';
+
+  function storageKey() {
+    const id = host.name || host.getAttribute('slot') || 'default';
+    return `${prefix}-${id}`;
+  }
+
+  function persist(width) {
+    persistSidebarWidth(storageKey(), width);
+  }
+
+  function restoreFromStorage() {
+    const saved = readSidebarWidth(storageKey());
+    if (!saved) return;
+    host.style.width = saved;
+    // Only treat as "previous expanded" if actually expanded.
+    const w = parseFloat(saved);
+    if (!isNaN(w) && w > SIDEBAR_SNAP_THRESHOLD) {
+      previousExpandedWidth = saved;
+    }
+  }
+
+  function dispatchToggle(expanded) {
+    host.dispatchEvent(new CustomEvent('sidebar-toggle', {
+      bubbles: true,
+      detail: { name: host.name || host.getAttribute('slot') || 'default', expanded },
+    }));
+  }
+
+  /** Collapse to the snap-floor width. Persists to localStorage. */
+  function collapse() {
+    if (host.collapsed) return;
+    const currentWidth = host.style.width || getComputedStyle(host).width;
+    if (parseFloat(currentWidth) > SIDEBAR_SNAP_THRESHOLD) {
+      previousExpandedWidth = currentWidth;
+    }
+    const minW = host.minWidth || getComputedStyle(host).minWidth;
+    host.style.width = minW;
+    persist(minW);
+    host.collapsed = true;
+    dispatchToggle(false);
+  }
+
+  /** Restore to the previous expanded width (or default if none). */
+  function expand() {
+    if (!host.collapsed) return;
+    const restoreWidth = previousExpandedWidth || '';
+    host.style.width = restoreWidth;
+    persist(restoreWidth);
+    host.collapsed = false;
+    dispatchToggle(true);
+  }
+
+  /** Toggle collapsed state. Collapses if expanded, restores if collapsed. */
+  function toggle() {
+    if (host.collapsed) {
+      expand();
+    } else {
+      collapse();
+    }
+    return host.collapsed;
+  }
+
+  // gh#286 — a zero rect means "unknown," not "collapsed": linkedom/SSR
+  // shims have no layout engine and always return 0×0, and a real
+  // browser can connect an element before its first layout pass (a
+  // `display:none` ancestor, e.g). Only admin-sidebar guards this today
+  // (guardZeroWidth) — chat-sidebar's pre-extraction behavior always
+  // derived `collapsed` from the raw measured width, guard or not.
+  function syncCollapsedFromWidth() {
+    const w = host.getBoundingClientRect().width;
+    if (w === 0 && guardZeroWidth) return;
+    host.collapsed = w <= SIDEBAR_SNAP_THRESHOLD;
+  }
+
+  return { storageKey, persist, restoreFromStorage, syncCollapsedFromWidth, collapse, expand, toggle };
+}

package/shell/admin-shell/css/admin-shell.tokens.css

@@ -112,7 +112,7 @@
   --nav-duration:             var(--a-duration);
   --nav-duration-fast:        var(--a-duration-fast);
   --nav-easing:               var(--a-easing);
-  --nav-label-px:             var(--a-space-2);
+  --nav-label-px:             var(--a-space-4);
   --nav-label-py:             var(--a-space-1);
   --nav-label-font-size:      var(--a-kicker-sm);
   --nav-label-weight:         var(--a-weight-medium);

package/shell/admin-sidebar/admin-sidebar.js

@@ -37,13 +37,22 @@
  * Backwards compat: <admin-shell> still recognizes the legacy
  * `<aside data-sidebar="leading">` shape via :is() selector. New
  * code should prefer <admin-sidebar>.
+ *
+ * gh#1767 (reactivity review R8b) — collapse()/expand()/toggle() and the
+ * localStorage persistence now come from ../../shared/sidebar-persist.js,
+ * shared verbatim with <chat-sidebar> (the storage-key PREFIX is this
+ * component's own — `adia-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 AdminSidebar extends UIElement {
   static properties = {
@@ -61,17 +70,19 @@ class AdminSidebar extends UIElement {
   // handle — one-shot per element so re-renders stay quiet. GC-friendly.
   static #warnedNoHandle = new WeakSet();
 
-  // 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 chat-sidebar
+  // (reactivity review R8b, gh#1767); see shared/sidebar-persist.js for
+  // why editor-sidebar isn't a third consumer. `guardZeroWidth: true`
+  // reproduces the gh#286 SSR/zero-rect guard admin-sidebar has always had.
+  #persist = attachSidebarCollapsePersist(this, { prefix: 'adia-sidebar', guardZeroWidth: true });
 
   connected() {
-    this.#restoreFromStorage();
+    this.#persist.restoreFromStorage();
     if (this.resizable) this.#setupResizeHandle();
     this.#setupChildResizeObserver();
-    this.#syncCollapsedFromWidth();
+    this.#persist.syncCollapsedFromWidth();
   }
 
   disconnected() {
@@ -88,81 +99,17 @@ class AdminSidebar 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-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 ──
-
-  /**
-   * A zero rect means "unknown," not "collapsed" — linkedom/SSR shims
-   * have no layout engine and always return 0×0, and a real browser can
-   * connect an element before its first layout pass (a `display:none`
-   * ancestor, e.g.). Snapping collapsed on a bogus zero-width read used
-   * to require every SSR consumer to fake a viewport-sized rect just to
-   * keep the sidebar expanded server-side (gh#286). Deriving state from
-   * a real width stays synchronous; deriving it from a real ZERO is the
-   * bug — that path now leaves whatever state connected() already
-   * restored (persisted width, or the default) until the ResizeObserver
-   * below fires with genuine layout.
-   */
-  #syncCollapsedFromWidth() {
-    const w = this.getBoundingClientRect().width;
-    if (w === 0) return;
-    this.collapsed = w <= SNAP_THRESHOLD;
+    this.#persist.expand();
   }
 
   // ── Resize drag handle ──
@@ -222,8 +169,8 @@ class AdminSidebar 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 },
@@ -242,8 +189,8 @@ class AdminSidebar extends UIElement {
   //    is the deferred [collapsed] correction for gh#286: its first tick
   //    fires with genuine layout (SSR hydration's first client paint, or
   //    a browser connect that started inside display:none), so a
-  //    zero-width connect() that left #syncCollapsedFromWidth a no-op
-  //    gets resolved here instead of staying wrong forever. ──
+  //    zero-width connect() that left #persist.syncCollapsedFromWidth()
+  //    a no-op gets resolved here instead of staying wrong forever. ──
 
   #setupChildResizeObserver() {
     // gh#285 — SSR DOM shims (linkedom) have no ResizeObserver global.
@@ -259,15 +206,6 @@ class AdminSidebar 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('admin-sidebar', AdminSidebar);