@adia-ai/web-modules 0.6.27 → 0.6.28

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog — @adia-ai/web-modules
 
+## [0.6.28] — 2026-05-23
+
+### Fixed — `editor-sidebar` rAF debounce for wide→narrow display-flip transient (§FB-50)
+
+- **`editor-sidebar` — wide→narrow viewport transition latches `[collapsed]` even after v0.6.27's `getComputedStyle` guard.** The v0.6.27 guard only protects the narrow→wide direction. During wide→narrow, the CSS Grid track collapses the pane to 48px before `display:none` propagates to `getComputedStyle`; the guard sees `display:flex` and runs `#syncCollapsed()` against the transient 48px sample, latching `collapsed=true`. Fix: `#syncCollapsed()` now defers `collapsed=true` writes by one `requestAnimationFrame`. Expand signals (`rect.width > SNAP_THRESHOLD`) are applied synchronously; collapse signals wait one frame — by which point `display:none` has propagated and the `getComputedStyle` guard catches it. Pending rAF is cancelled on expand signals and on `disconnected()`. Intentional drag-to-collapse fires correctly after the drag settles. Added regression tests: (1) small-width RO sample does not immediately latch `collapsed`; (2) `display:none` before the rAF prevents the latch. Reported by color-app (FEEDBACK-50). Files: `editor/editor-sidebar/editor-sidebar.js`, `editor/editor-sidebar/editor-sidebar.test.js`.
+
 ## [0.6.27] — 2026-05-22
 
 ### Fixed — `editor-sidebar` computedStyle guard for small-nonzero display-flip transients (§FB-49)

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

@@ -67,6 +67,7 @@ class EditorSidebar extends UIElement {
   #storageKey = null;
   #onPointerDown = null;
   #onPointerUp = null;
+  #pendingCollapseRaf = null;
 
   connected() {
     this.#pane = this.querySelector('pane-ui');
@@ -128,6 +129,10 @@ class EditorSidebar extends UIElement {
   }
 
   disconnected() {
+    if (this.#pendingCollapseRaf !== null) {
+      cancelAnimationFrame(this.#pendingCollapseRaf);
+      this.#pendingCollapseRaf = null;
+    }
     this.#ro?.disconnect();
     this.#ro = null;
     if (this.#onPointerDown && this.#pane) {
@@ -174,14 +179,37 @@ class EditorSidebar extends UIElement {
 
   #syncCollapsed() {
     if (!this.#pane) return;
-    // §FB-49: guard before reading rect — catches explicit display:none AND
-    // small-nonzero transients during display-flip (e.g. pane briefly at 48px
-    // while re-entering layout). getComputedStyle resolves CSS rules, not just
-    // inline style, covering both direct assignment and @media rules.
     if (getComputedStyle(this).display === 'none') return;
     const rect = this.#pane.getBoundingClientRect();
-    if (rect.width === 0) return;  // §FB-42 belt-and-braces for detached/hidden
-    this.collapsed = rect.width <= SNAP_THRESHOLD;
+    if (rect.width === 0) return;  // §FB-42 belt-and-braces
+
+    if (rect.width > SNAP_THRESHOLD) {
+      // Expand: apply immediately and cancel any pending collapse.
+      if (this.#pendingCollapseRaf !== null) {
+        cancelAnimationFrame(this.#pendingCollapseRaf);
+        this.#pendingCollapseRaf = null;
+      }
+      this.collapsed = false;
+      return;
+    }
+
+    // §FB-50: small sample — may be a CSS-grid collapse transient during
+    // the wide→narrow display-flip (pane shrinks before display:none
+    // propagates to getComputedStyle). Defer one animation frame; if
+    // display:none takes effect before the rAF fires the guard above
+    // catches it. Intentional drag-to-collapse also goes through this
+    // path and fires after the drag settles, which is correct.
+    if (this.#pendingCollapseRaf === null) {
+      this.#pendingCollapseRaf = requestAnimationFrame(() => {
+        this.#pendingCollapseRaf = null;
+        if (!this.#pane) return;
+        if (getComputedStyle(this).display === 'none') return;
+        const r = this.#pane.getBoundingClientRect();
+        if (r.width > 0 && r.width <= SNAP_THRESHOLD) {
+          this.collapsed = true;
+        }
+      });
+    }
   }
 
   #emitToggle() {

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

@@ -148,6 +148,65 @@ describe('editor-sidebar', () => {
     globalThis.getComputedStyle = origGCS;
   });
 
+  it('defers [collapsed]=true by one rAF for small-transient samples (§FB-50)', async () => {
+    let roCallback;
+    const savedRO = globalThis.ResizeObserver;
+    globalThis.ResizeObserver = class {
+      constructor(cb) { roCallback = cb; }
+      observe() {} unobserve() {} disconnect() {}
+    };
+
+    const sb = mount('<editor-sidebar slot="leading" collapsible><pane-ui></pane-ui></editor-sidebar>');
+    const pane = sb.querySelector('pane-ui');
+    // Simulate a small width on the pane (CSS grid collapse transient or drag).
+    pane.style.width = '48px';
+
+    if (roCallback) roCallback([{ target: pane }]);
+    // Immediately after RO callback — collapsed must NOT be set yet (rAF pending).
+    expect(sb.collapsed).toBe(false);
+
+    // After the rAF fires — pane still 48px, host visible → collapse is applied.
+    await new Promise((r) => requestAnimationFrame(r));
+    await tick();
+    expect(sb.collapsed).toBe(true);
+
+    globalThis.ResizeObserver = savedRO;
+  });
+
+  it('rAF check skips collapse if display:none applied before frame fires (§FB-50 wide→narrow race)', async () => {
+    let roCallback;
+    const savedRO = globalThis.ResizeObserver;
+    globalThis.ResizeObserver = class {
+      constructor(cb) { roCallback = cb; }
+      observe() {} unobserve() {} disconnect() {}
+    };
+
+    const sb = mount('<editor-sidebar slot="leading" collapsible><pane-ui></pane-ui></editor-sidebar>');
+    const pane = sb.querySelector('pane-ui');
+    // Transient 48px — CSS grid collapsed the track before display:none applied.
+    pane.style.width = '48px';
+
+    if (roCallback) roCallback([{ target: pane }]);
+    expect(sb.collapsed).toBe(false);  // deferred, not set yet
+
+    // Simulate display:none propagating before the rAF executes (the race window).
+    sb.style.display = 'none';
+    const origGCS = globalThis.getComputedStyle;
+    globalThis.getComputedStyle = (el, ps) => {
+      if (el === sb && el.style.display === 'none') return { display: 'none' };
+      return origGCS(el, ps);
+    };
+
+    // rAF fires — guard sees display:none → collapsed stays false.
+    await new Promise((r) => requestAnimationFrame(r));
+    await tick();
+    expect(sb.collapsed).toBe(false);
+    expect(sb.hasAttribute('collapsed')).toBe(false);
+
+    globalThis.ResizeObserver = savedRO;
+    globalThis.getComputedStyle = origGCS;
+  });
+
   it('handles missing inner <pane-ui> gracefully (no crash)', () => {
     const sb = mount('<editor-sidebar slot="leading"></editor-sidebar>');
     // Should not throw

package/package.json

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