@adia-ai/web-modules 0.6.26 → 0.6.28

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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)
+
+- **`editor-sidebar` — ResizeObserver fires with small-nonzero widths during `display:none` → `display:flex` transitions, latching `[collapsed]` even after the §FB-42 / §FB-48 `rect.width === 0` guard shipped in v0.6.26.** The 0-width guard only caught exact-zero samples; the `display-flip` cycle produces a brief 48px sample (matching the upstream `editor-shell[collapsed] > pane-ui { width: 48px !important }` rail minimum) before the pane fully re-enters layout. `#syncCollapsed()` read the transient, set `collapsed = true`, and the mirror-write `this.style.width = '48px'` pinned the host's grid track. Fix: guard on `getComputedStyle(this).display === 'none'` at the top of both the ResizeObserver callback and `#syncCollapsed()` — resolves the full CSS cascade (not just inline `style.display`) so any `@media`-driven hide triggers the guard. The §FB-42 `rect.width === 0` guard is retained as belt-and-braces. Added regression test: RO fires with a 48px transient while `style.display === 'none'` → `collapsed` stays false. Consumer workaround (CSS counter-rule at `@media (min-width: 900px)`) can now be safely retired. Reported by color-app (FEEDBACK-49). Files: `editor/editor-sidebar/editor-sidebar.js`, `editor/editor-sidebar/editor-sidebar.test.js`.
+
 ## [0.6.26] — 2026-05-22
 
 ### Fixed — `editor-sidebar` actually applies the FB-42 `#syncCollapsed` 0-width guard (FB-48)

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');
@@ -92,6 +93,10 @@ class EditorSidebar extends UIElement {
     // explicit width — the pane then overflows out of the sidebar and
     // visually overlaps the canvas.
     this.#ro = new ResizeObserver((entries) => {
+      // §FB-49: skip samples while the host is not in layout — catches both
+      // explicit display:none and small-nonzero transients during the
+      // display-flip transition (e.g. 48px when pane re-enters layout).
+      if (getComputedStyle(this).display === 'none') return;
       this.#syncCollapsed();
       // Use offsetWidth so the sidebar wraps the full pane border-box
       // (contentRect would be 1px short on side="leading|trailing").
@@ -124,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) {
@@ -170,11 +179,37 @@ class EditorSidebar extends UIElement {
 
   #syncCollapsed() {
     if (!this.#pane) return;
+    if (getComputedStyle(this).display === 'none') return;
     const rect = this.#pane.getBoundingClientRect();
-    // §FB-42: a display:none host produces width=0 — not a real collapse signal.
-    // Symmetric with the `if (w > 0)` guard on the width-write branch above.
-    if (rect.width === 0) return;
-    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

@@ -116,6 +116,97 @@ describe('editor-sidebar', () => {
     expect(removedTypes).toContain('pointerup');
   });
 
+  it('does not latch [collapsed] on small-transient RO sample while host is display:none (§FB-49)', async () => {
+    // Capture the RO callback so we can fire it manually with a transient width.
+    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');
+    pane.style.width = '240px';
+
+    // Simulate display:none via inline style; stub getComputedStyle to reflect it.
+    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);
+    };
+
+    // Fire the RO with a small-nonzero transient (48px = SNAP_THRESHOLD).
+    if (roCallback) roCallback([{ target: pane, contentRect: { width: 48 } }]);
+    await tick();
+
+    expect(sb.collapsed).toBe(false);
+    expect(sb.hasAttribute('collapsed')).toBe(false);
+
+    globalThis.ResizeObserver = savedRO;
+    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.26",
+  "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": {