@adia-ai/web-modules 0.7.27 → 0.8.0

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.8.0",
   "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": {
@@ -275,9 +275,9 @@
     "./theme/**/*.js"
   ],
   "peerDependencies": {
-    "@adia-ai/web-components": "^0.7.0",
-    "@adia-ai/a2ui-runtime": "^0.7.0",
-    "@adia-ai/llm": "^0.7.0"
+    "@adia-ai/web-components": "^0.8.0",
+    "@adia-ai/a2ui-runtime": "^0.8.0",
+    "@adia-ai/llm": "^0.8.0"
   },
   "publishConfig": {
     "access": "public",

package/shell/admin-shell/css/admin-shell.bespoke.css

@@ -72,7 +72,15 @@ admin-sidebar > :is(admin-topbar, admin-statusbar) > :where(span, p, small, time
   padding-inline: var(--a-space-2);
 }
 
-/* ── admin-scroll ≡ <section> child of <main> ── */
+/* ── admin-scroll ≡ <section> child of <main> ──
+   Full border, not border-inline (2026-07-14): with "rounded" mode's
+   20px radius, an inline-only border TAPERS OUT halfway around each
+   corner arc (CSS paints the left border's corner segment only up to
+   the diagonal where the absent top border would take over) while the
+   box-shadow ring traces the full corner — two divergent lines at
+   exactly the radius, reading as a doubled border (operator-reported,
+   screenshot). A full 1px border draws one continuous arc the shadow
+   hugs, the standard bordered-card look. */
 admin-content > admin-scroll {
   flex: 1;
   min-height: 0;
@@ -80,7 +88,7 @@ admin-content > admin-scroll {
   overscroll-behavior: contain;
   scrollbar-width: none;
   background: var(--page-content-bg);
-  border-inline: var(--page-content-border);
+  border: var(--page-content-border);
   box-shadow: var(--page-content-shadow);
 }
 
@@ -107,20 +115,24 @@ admin-shell[mode~="rounded"] > admin-content > admin-scroll {
 }
 
 /* ── admin-page-header ≡ <[data-content-header]> sticky band ──
-   Background uses --page-content-header-bg (defaults to --a-canvas-1, one
-   step raised from --page-content-bg / --a-canvas-0) so the sticky band
-   visually distinguishes itself from the content surface scrolling under
-   it. A subtle drop shadow below the band reinforces "chrome floating
-   above content" on both light and dark themes — the canvas-step alone
-   reads too quietly in dark mode (ΔL ≈ 0.04 on the OKLCH scale). The
-   border-bottom remains for crisp edge separation. */
+   Background uses --page-content-header-bg (defaults to --a-canvas-0,
+   same step as --page-content-bg — v0.6.1x rebase, see
+   admin-shell.tokens.css's own history comment) so the sticky band reads
+   as a flush extension of the content surface, not separate chrome. No
+   box-shadow (removed — was --a-shadow-sm, a leftover from when the
+   header used a raised --a-canvas-1 and needed its own drop shadow to
+   read as distinct chrome; once flush, that shadow doubled up against
+   admin-scroll's own container shadow at the rounded top corner —
+   visible as a doubled border in "rounded" mode). border-bottom alone
+   carries the separation now, same pattern as admin-page-footer below
+   (its own comment already states this — "reads correctly from the
+   border-top + canvas step alone"). */
 admin-page > admin-page-header {
   position: sticky;
   top: 0;
   z-index: 1;
   background: var(--page-content-header-bg);
   border-bottom: var(--page-content-border);
-  box-shadow: var(--a-shadow-sm);
   flex-shrink: 0;
 }
 
@@ -242,7 +254,7 @@ admin-sidebar[collapsed] {
 
 :is(admin-topbar, admin-statusbar) > [slot="heading"] {
   font-weight: var(--a-weight-medium, 500);
-  color: var(--a-fg);
+  color: var(--md-sys-color-neutral-on-surface);
 }
 
 :is(admin-topbar, admin-statusbar) > [slot="description"] {

package/shell/admin-shell/css/admin-shell.entity-item.css

@@ -76,7 +76,7 @@ admin-entity-item > [slot="label"] {
   white-space: nowrap;
   font-size: var(--a-ui-sm);
   font-weight: var(--a-weight-medium, 500);
-  color: var(--a-fg);
+  color: var(--md-sys-color-neutral-on-surface);
 }
 
 /* Optional trailing badge — environment / role chip. Never shrinks. */

package/shell/admin-shell/css/admin-shell.main.css

@@ -65,7 +65,7 @@ admin-shell > admin-content > admin-scroll > [data-subnav] {
   min-height: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
-  border-inline-end: 1px solid var(--a-border-subtle);
+  border-inline-end: 1px solid var(--md-sys-color-neutral-outline-variant);
   padding-block: var(--a-space-2);
   padding-inline: var(--a-space-2);
 }
@@ -77,6 +77,6 @@ admin-shell > admin-content > admin-scroll > [data-subnav] {
   }
   admin-shell > admin-content > admin-scroll > [data-subnav] {
     border-inline-end: none;
-    border-block-end: 1px solid var(--a-border-subtle);
+    border-block-end: 1px solid var(--md-sys-color-neutral-outline-variant);
   }
 }

package/shell/admin-shell/css/admin-shell.sidebar.css

@@ -106,7 +106,7 @@ admin-sidebar[slot="trailing"] {
 :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(header, header-ui) > [slot="heading"],
 :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(footer, footer-ui) > [slot="heading"] {
   font-weight: var(--a-weight-medium);
-  color: var(--a-fg);
+  color: var(--md-sys-color-neutral-on-surface);
 }
 :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(header, header-ui) > [slot="description"],
 :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(footer, footer-ui) > [slot="description"] {

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

@@ -14,8 +14,8 @@
 
 :where(admin-shell) {
   /* Shell — root backgrounds and border shorthand */
-  --page-bg:                var(--a-canvas-dim);       /* shell chrome bg */
-  --page-border:            1px solid var(--a-border-subtle); /* chrome borders (killed by "borderless") */
+  --page-bg:                var(--md-sys-color-neutral-surface-dim);       /* shell chrome bg */
+  --page-border:            1px solid var(--md-sys-color-neutral-outline-variant); /* chrome borders (killed by "borderless") */
   --page-main-border:       var(--page-border);      /* main inline borders (separate so modes can override) */
 
   /* Header / footer bars — shared by topbar + bottombar */
@@ -31,9 +31,9 @@
   --page-sidebar-font:      var(--a-ui-size);
   --page-sidebar-min-width: 48px;                    /* collapsed icon-only width */
   --page-sidebar-max-width: 480px;                   /* drag resize upper bound */
-  --page-sidebar-resize-accent: var(--a-accent); /* resize handle color */
-  --page-sidebar-bg:        var(--a-canvas-dimmest); /* sidebar surface — distinct from the chrome (--page-bg) */
-  --page-sidebar-divider-bg: var(--a-border-subtle); /* hr divider inside sidebar */
+  --page-sidebar-resize-accent: var(--md-sys-color-primary); /* resize handle color */
+  --page-sidebar-bg:        var(--md-sys-color-neutral-surface-dimmest); /* sidebar surface — distinct from the chrome (--page-bg) */
+  --page-sidebar-divider-bg: var(--md-sys-color-neutral-outline-variant); /* hr divider inside sidebar */
   --page-sidebar-width-leading:  clamp(var(--page-sidebar-min-width), 200px, 240px);
   --page-sidebar-width-trailing: clamp(var(--page-sidebar-min-width), 200px, 240px);
 
@@ -43,7 +43,7 @@
   --page-content-radius:    var(--a-radius-lg);      /* used by "rounded" mode */
   --page-content-inset:     var(--a-space-10);       /* padding for header/body/footer */
   --page-content-max-width: 1540px;                   /* max-width for content children */
-  --page-content-border:    1px solid var(--a-border-subtle); /* content dividers (persists in "borderless") */
+  --page-content-border:    1px solid var(--md-sys-color-neutral-outline-variant); /* content dividers (persists in "borderless") */
   --page-content-shadow:    var(--a-shadow-sm);      /* soft lift on the content surface */
 
   /* Content breakpoint scale — `<admin-page>` is a `page-content`
@@ -110,11 +110,11 @@
   --nav-label-font-size:      var(--a-kicker-sm);
   --nav-label-weight:         var(--a-weight-medium);
   --nav-label-fg:             var(--a-fg-muted);
-  --nav-divider-bg:           var(--a-border-subtle);
+  --nav-divider-bg:           var(--md-sys-color-neutral-outline-variant);
   --nav-divider-my:           var(--a-space-1);
 
   /* Nav — group tokens */
-  --nav-group-indent-rail-bg: var(--a-border-subtle);
+  --nav-group-indent-rail-bg: var(--md-sys-color-neutral-outline-variant);
   --nav-group-icon-font-size: var(--a-ui-size);
   --nav-group-text-weight:    var(--a-weight-medium);
   --nav-group-badge-bg:       var(--a-bg-muted);
@@ -130,7 +130,7 @@
   --nav-item-badge-radius:    var(--a-radius-full);
   --nav-item-trailing-font:   var(--a-ui-sm);
   --nav-item-trailing-fg:     var(--a-fg-muted);
-  --nav-item-trailing-border: var(--a-border-subtle);
+  --nav-item-trailing-border: var(--md-sys-color-neutral-outline-variant);
   --nav-item-trailing-radius: var(--a-radius-sm);
   --nav-item-trailing-px:     var(--a-space-0-5);
 

package/shell/embed-shell/embed-shell.css

@@ -11,9 +11,9 @@ embed-shell {
   position: relative; /* containing block for <760px cover-sheet panels */
   box-sizing: border-box;
   overflow: hidden; /* clip columns + cover-sheets to the rounded frame */
-  background: var(--a-bg);
-  color: var(--a-fg);
-  border: 1px solid var(--a-border-subtle);
+  background: var(--md-sys-color-neutral-background);
+  color: var(--md-sys-color-neutral-on-surface);
+  border: 1px solid var(--md-sys-color-neutral-outline-variant);
   border-radius: var(--a-radius-lg, var(--a-radius-md));
   box-shadow: var(--a-shadow-lg);
   font-family: var(--a-font-family);
@@ -57,7 +57,7 @@ embed-shell > [panel] {
     flex: none;
     inline-size: 50%;
     block-size: 100%;
-    border-inline-start: 1px solid var(--a-border-subtle);
+    border-inline-start: 1px solid var(--md-sys-color-neutral-outline-variant);
   }
 }
 
@@ -68,7 +68,7 @@ embed-shell > [panel] {
     position: absolute;
     inset: 0;
     z-index: 5;
-    background: var(--a-bg);
+    background: var(--md-sys-color-neutral-background);
     transform: translateY(100%); /* parked below; identity at rest → popovers OK */
     transition: transform 260ms var(--a-easing-out, ease);
   }