@adia-ai/web-modules 0.7.27 → 0.7.28

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

@@ -72,7 +72,23 @@ class EditorSidebar extends UIElement {
   #storageKey = null;
   #onPointerDown = null;
   #onPointerUp = null;
+  #onPaneTransitionEnd = null;
   #pendingCollapseRaf = null;
+  // GH #223: an explicit expand() kicks off pane-ui's own width transition
+  // (editor-shell.bespoke.css). Early ResizeObserver samples mid-transition
+  // are legitimately still below SNAP_THRESHOLD while animating TOWARD a
+  // large target — #syncCollapsed() can't tell that apart from a genuine
+  // drag-to-collapse settle, and setting [collapsed] back to true re-matches
+  // the `!important` collapsed-width CSS rule, which snaps the pane straight
+  // back to 48px and PERMANENTLY interrupts the transition (no further
+  // resize ever occurs to self-correct — expand()/toggle() become no-ops).
+  // This flag suppresses collapse-inference for the duration of an
+  // in-flight explicit expand(); cleared by `transitionend` (primary) or a
+  // bounded fallback timer sized to the actual computed transition
+  // duration (defensive — an interrupted transition doesn't always fire
+  // `transitionend` in every browser).
+  #expandInFlight = false;
+  #expandSettleTimer = null;
 
   connected() {
     this.#pane = this.querySelector('pane-ui');
@@ -131,6 +147,14 @@ class EditorSidebar extends UIElement {
       this.#persistWidth();
     };
     document.addEventListener('pointerup', this.#onPointerUp);
+
+    // §GH-223: the authoritative "explicit transition has settled" signal.
+    this.#onPaneTransitionEnd = (e) => {
+      if (e.target !== this.#pane || e.propertyName !== 'width') return;
+      this.#clearExpandInFlight();
+      this.#syncCollapsed();
+    };
+    this.#pane.addEventListener('transitionend', this.#onPaneTransitionEnd);
   }
 
   disconnected() {
@@ -138,6 +162,10 @@ class EditorSidebar extends UIElement {
       cancelAnimationFrame(this.#pendingCollapseRaf);
       this.#pendingCollapseRaf = null;
     }
+    if (this.#expandSettleTimer !== null) {
+      clearTimeout(this.#expandSettleTimer);
+      this.#expandSettleTimer = null;
+    }
     this.#ro?.disconnect();
     this.#ro = null;
     if (this.#onPointerDown && this.#pane) {
@@ -148,6 +176,10 @@ class EditorSidebar extends UIElement {
       document.removeEventListener('pointerup', this.#onPointerUp);
       this.#onPointerUp = null;
     }
+    if (this.#onPaneTransitionEnd && this.#pane) {
+      this.#pane.removeEventListener('transitionend', this.#onPaneTransitionEnd);
+      this.#onPaneTransitionEnd = null;
+    }
   }
 
   // ── Public API ──
@@ -178,10 +210,44 @@ class EditorSidebar extends UIElement {
     this.collapsed = false;
     this.#persistWidth();
     this.#emitToggle();
+    this.#markExpandInFlight();
   }
 
   // ── Internal ──
 
+  // §GH-223: suppress ResizeObserver-driven collapse-inference for the
+  // duration of this explicit expand()'s own CSS transition — see the
+  // #expandInFlight field comment for the full failure mode. Sized to the
+  // pane's ACTUAL computed transition-duration (not a hardcoded guess) so
+  // a customized `--editor-sidebar-duration` is honored; skipped entirely
+  // when the computed duration is 0 (no transition to race against —
+  // ResizeObserver's first sample already lands at the final width).
+  #markExpandInFlight() {
+    if (this.#expandSettleTimer !== null) {
+      clearTimeout(this.#expandSettleTimer);
+      this.#expandSettleTimer = null;
+    }
+    const durationStr = getComputedStyle(this.#pane).transitionDuration.split(',')[0].trim();
+    const durationMs = (parseFloat(durationStr) || 0) * (durationStr.endsWith('ms') ? 1 : 1000);
+    if (durationMs <= 0) return; // no transition — nothing to race
+    this.#expandInFlight = true;
+    // Fallback only — transitionend is the primary settle signal (fires
+    // first in the normal case). +50ms buffer for timer/paint jitter.
+    this.#expandSettleTimer = setTimeout(() => {
+      this.#expandSettleTimer = null;
+      this.#clearExpandInFlight();
+      this.#syncCollapsed();
+    }, durationMs + 50);
+  }
+
+  #clearExpandInFlight() {
+    this.#expandInFlight = false;
+    if (this.#expandSettleTimer !== null) {
+      clearTimeout(this.#expandSettleTimer);
+      this.#expandSettleTimer = null;
+    }
+  }
+
   #syncCollapsed() {
     if (!this.#pane) return;
     if (getComputedStyle(this).display === 'none') return;
@@ -198,6 +264,14 @@ class EditorSidebar extends UIElement {
       return;
     }
 
+    // §GH-223: an explicit expand() is still mid-transition — this small
+    // sample is the pane animating THROUGH the sub-threshold range toward
+    // its (above-threshold) target, not a genuine settle. Trust the
+    // transitionend/timer handler for the authoritative final check;
+    // inferring collapse=true here is exactly the bug (the resulting
+    // `!important` CSS snap permanently interrupts the transition).
+    if (this.#expandInFlight) 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
@@ -209,6 +283,7 @@ class EditorSidebar extends UIElement {
         this.#pendingCollapseRaf = null;
         if (!this.#pane) return;
         if (getComputedStyle(this).display === 'none') return;
+        if (this.#expandInFlight) return;
         const r = this.#pane.getBoundingClientRect();
         if (r.width > 0 && r.width <= SNAP_THRESHOLD) {
           this.collapsed = true;

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

@@ -207,6 +207,153 @@ describe('editor-sidebar', () => {
     globalThis.getComputedStyle = origGCS;
   });
 
+  // ── GH #223: expand() permanently wedges when the width transition is enabled ──
+  // Root cause: pane-ui's real CSS transition (editor-shell.bespoke.css) animates
+  // width from 48px toward the restore target; early ResizeObserver samples
+  // mid-transition are legitimately still <= SNAP_THRESHOLD, and the old
+  // #syncCollapsed() couldn't tell that apart from a genuine drag-to-collapse
+  // settle — flipping [collapsed] back to true mid-flight re-matches the
+  // `!important` collapsed-width CSS rule, which snaps the pane back to 48px
+  // and permanently interrupts the transition (no further resize ever occurs
+  // to self-correct). These tests mock a nonzero `transitionDuration` on the
+  // pane (jsdom/happy-dom has no real CSS loaded) to exercise the suppression.
+  describe('expand() transition race (GH #223)', () => {
+    function withPaneTransitionDuration(pane, durationStr) {
+      const origGCS = globalThis.getComputedStyle;
+      globalThis.getComputedStyle = (el, ps) => {
+        if (el === pane) return { ...origGCS(el, ps), transitionDuration: durationStr };
+        return origGCS(el, ps);
+      };
+      return () => { globalThis.getComputedStyle = origGCS; };
+    }
+
+    it('does not latch [collapsed] on a small mid-transition RO sample while an explicit expand() is in flight', 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');
+      const restoreGCS = withPaneTransitionDuration(pane, '0.18s');
+      pane.style.width = '48px';
+      sb.collapsed = true;
+
+      sb.expand(); // sets pane width to the restore target + marks expand-in-flight
+
+      // Mid-transition: the observer samples an intermediate, still-small width.
+      pane.style.width = '77px';
+      if (roCallback) roCallback([{ target: pane }]);
+      await new Promise((r) => requestAnimationFrame(r));
+      await tick();
+
+      // Must NOT have snapped back to collapsed — this is exactly the wedge bug.
+      expect(sb.collapsed).toBe(false);
+      expect(sb.hasAttribute('collapsed')).toBe(false);
+
+      restoreGCS();
+      globalThis.ResizeObserver = savedRO;
+    });
+
+    it('clears expand-in-flight and re-syncs on transitionend, landing on the correct final state', 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');
+      const restoreGCS = withPaneTransitionDuration(pane, '0.18s');
+      pane.style.width = '48px';
+      sb.collapsed = true;
+
+      sb.expand();
+      pane.style.width = '240px'; // transition has now settled at its target
+      // `propertyName` is a TransitionEvent field, not a plain Event
+      // constructor option (the constructor silently drops unknown keys) —
+      // assign it as an own property after construction instead.
+      const transitionEnd = new Event('transitionend', { bubbles: false });
+      transitionEnd.propertyName = 'width';
+      pane.dispatchEvent(transitionEnd);
+      await tick();
+
+      expect(sb.collapsed).toBe(false);
+      expect(sb.hasAttribute('collapsed')).toBe(false);
+
+      // With expand-in-flight cleared, a genuinely small sample (e.g. a
+      // later user drag-to-collapse) must resume being trusted normally.
+      pane.style.width = '48px';
+      if (roCallback) roCallback([{ target: pane }]);
+      await new Promise((r) => requestAnimationFrame(r));
+      await tick();
+      expect(sb.collapsed).toBe(true);
+
+      restoreGCS();
+      globalThis.ResizeObserver = savedRO;
+    });
+
+    it('falls back to a bounded timer sized to the computed duration when transitionend never fires', async () => {
+      vi.useFakeTimers();
+      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');
+      const restoreGCS = withPaneTransitionDuration(pane, '0.18s');
+      pane.style.width = '48px';
+      sb.collapsed = true;
+
+      sb.expand();
+      pane.style.width = '77px'; // stuck reporting a small value; no transitionend ever arrives
+      if (roCallback) roCallback([{ target: pane }]);
+      await vi.advanceTimersByTimeAsync(50); // rAF-equivalent settle window (fake timers)
+
+      // Still suppressed — the 180ms+50ms safety timer hasn't elapsed yet.
+      expect(sb.collapsed).toBe(false);
+
+      pane.style.width = '240px'; // by the time the safety timer fires, transition is done
+      await vi.advanceTimersByTimeAsync(300); // past the 180+50ms fallback
+      expect(sb.collapsed).toBe(false); // final re-sync sees the real (large) width
+
+      restoreGCS();
+      globalThis.ResizeObserver = savedRO;
+      vi.useRealTimers();
+    });
+
+    it('skips expand-in-flight suppression entirely when the computed transition duration is 0 (no transition to 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');
+      // No transitionDuration mock — jsdom/happy-dom defaults to '0s'.
+      pane.style.width = '48px';
+      sb.collapsed = true;
+
+      sb.expand();
+      // With a 0-duration transition, the width jump is instantaneous — the
+      // observer's first sample already lands at the final (large) width.
+      pane.style.width = '240px';
+      if (roCallback) roCallback([{ target: pane }]);
+      await tick();
+
+      expect(sb.collapsed).toBe(false);
+      globalThis.ResizeObserver = savedRO;
+    });
+  });
+
   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.7.27",
+  "version": "0.7.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": {