@adia-ai/web-modules 0.6.26 → 0.6.27

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog — @adia-ai/web-modules
 
+## [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

@@ -92,6 +92,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").
@@ -170,10 +174,13 @@ 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();
-    // §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;
+    if (rect.width === 0) return;  // §FB-42 belt-and-braces for detached/hidden
     this.collapsed = rect.width <= SNAP_THRESHOLD;
   }
 

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

@@ -116,6 +116,38 @@ 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('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.27",
   "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": {