@ds-mo/ui 1.11.1 → 1.11.3

package/src/wc/components/AppShell/AppShell.tsx

@@ -21,6 +21,7 @@ import {
   SHELL_GRADIENT_POSITION_PANEL_VAR,
   SHELL_GRADIENT_SIZE_VAR,
   buildShellRadialGradient,
+  readShellViewportDimensions,
   shellGradientPositionBar,
   shellGradientPositionPanel,
   shellGradientSize,
@@ -53,12 +54,21 @@ export class AppShell {
   private readonly panelNavTransition = new ChromeTransitionDepth();
   private readonly chromeSyncCoalescer = createRafCoalescer(() => this.syncChrome());
   private panelWidthTokens: PanelNavWidthTokens = { expandedPx: 0, collapsedPx: 0 };
-  private cachedShellWidth = 0;
-  private cachedShellHeight = 0;
+  private cachedViewportWidth = 0;
+  private cachedViewportHeight = 0;
+  private onWindowResize = () => {
+    if (this.panelNavTransition.isActive) return;
+    this.scheduleChromeSync();
+  };
+  private onVisualViewportChange = () => {
+    if (this.panelNavTransition.isActive) return;
+    this.scheduleChromeSync();
+  };
 
   componentDidLoad() {
     this.syncSlottedNavStyle();
     this.connectMetricsObserver();
+    this.connectViewportListeners();
     this.el.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);
     this.el.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);
     requestAnimationFrame(() => {
@@ -70,6 +80,7 @@ export class AppShell {
   disconnectedCallback() {
     this.resizeObserver?.disconnect();
     this.resizeObserver = null;
+    this.disconnectViewportListeners();
     this.chromeSyncCoalescer.cancel();
     this.el.removeEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);
     this.el.removeEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);
@@ -88,8 +99,9 @@ export class AppShell {
     if (readChromeTransitionSource(event) !== 'panel-nav') return;
 
     this.panelNavTransition.enter();
-    this.cachedShellWidth = this.el.clientWidth;
-    this.cachedShellHeight = this.el.clientHeight;
+    const viewport = readShellViewportDimensions();
+    this.cachedViewportWidth = viewport.width;
+    this.cachedViewportHeight = viewport.height;
     this.syncChrome();
   };
 
@@ -130,6 +142,30 @@ export class AppShell {
     if (panelWrap) this.resizeObserver.observe(panelWrap);
   }
 
+  private connectViewportListeners() {
+    if (typeof window === 'undefined') return;
+
+    window.addEventListener('resize', this.onWindowResize, { passive: true });
+
+    const visual = window.visualViewport;
+    if (visual) {
+      visual.addEventListener('resize', this.onVisualViewportChange, { passive: true });
+      visual.addEventListener('scroll', this.onVisualViewportChange, { passive: true });
+    }
+  }
+
+  private disconnectViewportListeners() {
+    if (typeof window === 'undefined') return;
+
+    window.removeEventListener('resize', this.onWindowResize);
+
+    const visual = window.visualViewport;
+    if (visual) {
+      visual.removeEventListener('resize', this.onVisualViewportChange);
+      visual.removeEventListener('scroll', this.onVisualViewportChange);
+    }
+  }
+
   private cachePanelWidthTokens() {
     const navRoot = this.el.querySelector('ds-panel-nav .panel-nav') as HTMLElement | null;
     if (!navRoot) return;
@@ -190,16 +226,16 @@ export class AppShell {
     return 0;
   }
 
-  private resolveShellDimensions(): { width: number; height: number } {
-    if (this.panelNavTransition.isActive && this.cachedShellWidth > 0) {
+  /** Fixed-attachment wash/grid size — always the viewport, never the shell element box. */
+  private resolveViewportDimensions(): { width: number; height: number } {
+    if (this.panelNavTransition.isActive && this.cachedViewportWidth > 0) {
       return {
-        width: this.cachedShellWidth,
-        height: this.cachedShellHeight || this.el.clientHeight,
+        width: this.cachedViewportWidth,
+        height: this.cachedViewportHeight,
       };
     }
 
-    const rect = this.el.getBoundingClientRect();
-    return { width: rect.width, height: rect.height };
+    return readShellViewportDimensions();
   }
 
   private chromeLayerActive(): boolean {
@@ -228,7 +264,7 @@ export class AppShell {
       return;
     }
 
-    const { width: shellWidth, height: shellHeight } = this.resolveShellDimensions();
+    const viewport = this.resolveViewportDimensions();
     const panelWidth = this.resolvePanelWidthPx(panelNav);
 
     const panelPosition = shellGradientPositionPanel();
@@ -241,9 +277,8 @@ export class AppShell {
       : buildShellRadialGradient();
 
     const size = shellGradientSize({
-      width: shellWidth,
-      height: shellHeight,
-      panelWidth,
+      width: viewport.width,
+      height: viewport.height,
     });
     const opacity = SHELL_GRADIENT_OPACITY;
 

package/src/wc/components/BarNav/BarNav.tsx

@@ -11,6 +11,7 @@ import {
 } from '@stencil/core';
 import type { NavChromeStyle } from '../../nav/nav-chrome';
 import type { MenuItemData } from '../Menu/menu-types';
+import { isTabDivider } from '../TabGroup/tab-item-utils';
 import type { BarNavActionItem, BarNavTab } from './bar-nav-types';
 import {
   deriveBarNavValueFromUrl,
@@ -34,8 +35,8 @@ import {
   ChromeTransitionDepth,
   createRafCoalescer,
   readChromeTransitionSource,
+  readChromeTransitionPhase,
 } from '../../nav/chrome-transition';
-import { readCssVarWidthPx } from '../../nav/shell-chrome-metrics';
 
 @Component({
   tag: 'ds-bar-nav',
@@ -111,12 +112,12 @@ export class BarNav {
   private resizeObserver: ResizeObserver | null = null;
   private intrinsicWidthRetryCount = 0;
   private readonly panelNavTransition = new ChromeTransitionDepth();
+  private readonly panelToolsTransition = new ChromeTransitionDepth();
   private readonly overflowCoalescer = createRafCoalescer(() => {
     this.updateTabsCollapsed();
     this.updateTriggerLabelTruncation();
   });
   private chromeTransitionShell: HTMLElement | null = null;
-  private toolsDrawerOpening = false;
   /** Matches `basePath` once tabs + URL are reconciled for the active section. */
   @State() private committedSection = '';
   /** Section waiting for URL + tabs to catch up after a cross-area navigation. */
@@ -137,6 +138,17 @@ export class BarNav {
     return !!getActiveTab(this.resolvedTabs, this.effectiveValue)?.dot;
   }
 
+  private digestTabsConfig(tabs: BarNavTab[]): string {
+    return tabs.map(t => (isTabDivider(t) ? '|' : t.id)).join(',');
+  }
+
+  private resetTabOverflowLayout() {
+    this.tabLayoutCommitted = false;
+    this.tabsCollapsed = false;
+    this.menuOpen = false;
+    this.intrinsicWidthRetryCount = 0;
+  }
+
   @Watch('tabs')
   @Watch('tabsJson')
   @Watch('actions')
@@ -194,7 +206,7 @@ export class BarNav {
   }
 
   componentDidRender() {
-    if (this.panelNavTransition.isActive) {
+    if (this.chromeOverflowPaused()) {
       this.syncMenuAnchor();
       return;
     }
@@ -241,16 +253,17 @@ export class BarNav {
       return;
     }
     if (source === 'panel-tools') {
-      this.toolsDrawerOpening = true;
-      this.el.classList.add('bar-nav--tools-drawer-opening');
-      if (this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute) {
-        this.tabsCollapsed = true;
-        this.menuOpen = false;
+      const phase = readChromeTransitionPhase(event) ?? 'opening';
+      if (phase === 'closing') {
+        this.panelToolsTransition.enter();
       }
-      this.scheduleOverflowCheck();
     }
   };
 
+  private chromeOverflowPaused(): boolean {
+    return this.panelNavTransition.isActive || this.panelToolsTransition.isActive;
+  }
+
   private onChromeTransitionEnd = (event: Event) => {
     const source = readChromeTransitionSource(event);
     if (source === 'panel-nav') {
@@ -261,8 +274,7 @@ export class BarNav {
       return;
     }
     if (source === 'panel-tools') {
-      this.toolsDrawerOpening = false;
-      this.el.classList.remove('bar-nav--tools-drawer-opening');
+      this.panelToolsTransition.exit();
       this.scheduleOverflowCheck();
     }
   };
@@ -301,14 +313,14 @@ export class BarNav {
     if (typeof ResizeObserver === 'undefined' || !this.headerEl) return;
     this.resizeObserver?.disconnect();
     this.resizeObserver = new ResizeObserver(() => {
-      if (this.panelNavTransition.isActive) return;
+      if (this.chromeOverflowPaused()) return;
       this.scheduleOverflowCheck();
     });
     this.resizeObserver.observe(this.headerEl);
   }
 
   private scheduleOverflowCheck() {
-    if (this.panelNavTransition.isActive) return;
+    if (this.chromeOverflowPaused()) return;
     this.overflowCoalescer.schedule();
   }
 
@@ -366,20 +378,7 @@ export class BarNav {
     const available =
       this.headerEl.clientWidth - horizontalPadding - actionsWidth - spacing;
 
-    return Math.max(0, available - this.toolsDrawerOpeningReservePx());
-  }
-
-  /** While the tools drawer is opening, reserve width not yet claimed by flex shrink. */
-  private toolsDrawerOpeningReservePx(): number {
-    if (!this.toolsDrawerOpening) return 0;
-
-    const tools = this.el.closest('ds-app-shell')?.querySelector('ds-panel-tools') as HTMLElement | null;
-    if (!tools) return 0;
-
-    const drawerTarget = readCssVarWidthPx(tools, '--_panel-tools-drawer-width');
-    const drawerNow =
-      tools.querySelector('.panel-tools__drawer')?.getBoundingClientRect().width ?? 0;
-    return Math.max(0, drawerTarget - drawerNow);
+    return Math.max(0, available);
   }
 
   private getTabsIntrinsicWidth(): number {
@@ -400,12 +399,19 @@ export class BarNav {
         this.menuOpen = false;
       }
       this.intrinsicWidthRetryCount = 0;
+      this.tabLayoutCommitted = true;
       return;
     }
 
     const intrinsicWidth = this.getTabsIntrinsicWidth();
     if (intrinsicWidth === 0) {
-      this.scheduleIntrinsicWidthRetry();
+      if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) {
+        this.intrinsicWidthRetryCount = 0;
+        this.tabsCollapsed = false;
+        this.tabLayoutCommitted = true;
+      } else {
+        this.scheduleIntrinsicWidthRetry();
+      }
       return;
     }
     this.intrinsicWidthRetryCount = 0;
@@ -423,6 +429,8 @@ export class BarNav {
         this.menuOpen = false;
       }
     }
+
+    this.tabLayoutCommitted = true;
   }
 
   private syncMenuAnchor() {
@@ -469,6 +477,7 @@ export class BarNav {
       this.pendingSection = nextBasePath;
       this.resolvedTabs = [];
       this.resolvedActions = this.incomingActions();
+      this.resetTabOverflowLayout();
       return;
     }
 
@@ -486,11 +495,17 @@ export class BarNav {
       this.pendingSection = '';
     }
 
-    this.resolvedTabs = this.incomingTabs();
+    const tabs = this.incomingTabs();
+    const tabsConfigChanged =
+      this.digestTabsConfig(tabs) !== this.digestTabsConfig(this.resolvedTabs);
+
+    this.resolvedTabs = tabs;
     this.resolvedActions = this.incomingActions();
     this.syncValueFromUrl();
     this.committedSection = nextBasePath;
-    this.intrinsicWidthRetryCount = 0;
+    if (tabsConfigChanged) {
+      this.resetTabOverflowLayout();
+    }
     this.scheduleOverflowCheck();
   }
 
@@ -593,7 +608,8 @@ export class BarNav {
             'bar-nav': true,
             'bar-nav--dashboard': this.navStyle === 'dashboard',
             'bar-nav--settings': this.navStyle === 'settings',
-            'bar-nav--tabs-collapsed': hasTabs && this.tabsCollapsed,
+            'bar-nav--tabs-collapsed':
+              hasTabs && this.tabLayoutCommitted && this.tabsCollapsed,
           }}
           ref={el => {
             this.headerEl = el as HTMLElement;
@@ -619,7 +635,7 @@ export class BarNav {
               </div>
             )}
 
-            {hasTabs && !this.tabsCollapsed && (
+            {hasTabs && this.tabLayoutCommitted && !this.tabsCollapsed && (
               <div class="bar-nav__left">
                 <ds-tab-group-nav
                   key={`visible-${tabGroupKey}`}
@@ -634,11 +650,15 @@ export class BarNav {
               </div>
             )}
 
+            {hasTabs && !this.tabLayoutCommitted && (
+              <div class="bar-nav__tabs-pending" aria-hidden="true" />
+            )}
+
             {!hasTabs && this.heading && (
               <span class="bar-nav__heading text-body-medium-emphasis">{this.heading}</span>
             )}
 
-            {hasTabs && this.tabsCollapsed && (
+            {hasTabs && this.tabLayoutCommitted && this.tabsCollapsed && (
               <button
                 type="button"
                 class={{
@@ -697,7 +717,10 @@ export class BarNav {
               </button>
             )}
 
-            {hasTabs && this.tabsCollapsed && this.resolvedActions.length > 0 && (
+            {hasTabs &&
+              this.tabLayoutCommitted &&
+              this.tabsCollapsed &&
+              this.resolvedActions.length > 0 && (
               <div class="bar-nav__between" aria-hidden="true" />
             )}
 
@@ -719,7 +742,7 @@ export class BarNav {
 
         </header>
 
-        {hasTabs && this.tabsCollapsed && (
+        {hasTabs && this.tabLayoutCommitted && this.tabsCollapsed && (
           <ds-menu
             ref={el => {
               this.menuEl = (el as HTMLDsMenuElement) ?? null;

package/src/wc/components/PanelTools/PanelTools.tsx

@@ -82,7 +82,10 @@ export class PanelTools {
   openChanged(isOpen: boolean, wasOpen?: boolean) {
     if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {
       this.motion = isOpen ? 'opening' : 'closing';
-      this.dsChromeTransitionStart.emit({ source: 'panel-tools' });
+      this.dsChromeTransitionStart.emit({
+        source: 'panel-tools',
+        phase: isOpen ? 'opening' : 'closing',
+      });
     }
     this.deferMotionEnable();
   }
@@ -182,6 +185,7 @@ export class PanelTools {
               'panel-tools__drawer--visible': showDrawerChrome,
             }}
             aria-hidden={showDrawerChrome ? null : 'true'}
+            inert={showDrawerChrome ? undefined : true}
           >
             <div class="panel-tools__drawer-surface">
               <header class="panel-tools__header">

package/src/wc/nav/chrome-transition.ts

@@ -7,6 +7,8 @@ export type ChromeTransitionSource = 'panel-nav' | 'panel-tools';
 
 export interface ChromeTransitionDetail {
   source: ChromeTransitionSource;
+  /** Panel-tools drawer motion direction; omitted for panel-nav. */
+  phase?: 'opening' | 'closing';
 }
 
 /** Reference-counted gate — used while panel-nav width is transitioning. */
@@ -54,3 +56,7 @@ export function createRafCoalescer(onFrame: () => void): RafCoalescer {
 export function readChromeTransitionSource(event: Event): ChromeTransitionSource | undefined {
   return (event as CustomEvent<ChromeTransitionDetail>).detail?.source;
 }
+
+export function readChromeTransitionPhase(event: Event): ChromeTransitionDetail['phase'] {
+  return (event as CustomEvent<ChromeTransitionDetail>).detail?.phase;
+}

package/src/wc/nav/index.ts

@@ -34,8 +34,9 @@ export {
   shellGradientPositionBar,
   shellChromeSurfacePosition,
   shellChromeLayerActive,
+  readShellViewportDimensions,
 } from './shell-gradient';
-export type { ShellGradientLayout } from './shell-gradient';
+export type { ShellGradientLayout, ShellViewportDimensions } from './shell-gradient';
 export type { ChromeTransitionDetail, ChromeTransitionSource } from './chrome-transition';
 export {
   CHROME_TRANSITION_END,
@@ -43,6 +44,7 @@ export {
   ChromeTransitionDepth,
   createRafCoalescer,
   readChromeTransitionSource,
+  readChromeTransitionPhase,
 } from './chrome-transition';
 export {
   barGradientPositionFromPanelWidth,

package/src/wc/nav/shell-gradient.ts

@@ -30,13 +30,35 @@ export function shellGradientImage(): string {
   return buildShellRadialGradient();
 }
 
+export interface ShellViewportDimensions {
+  width: number;
+  height: number;
+}
+
+/**
+ * Viewport size for shell chrome with `background-attachment: fixed`.
+ * Must not use the `ds-app-shell` element box — the shell can be shorter or
+ * taller than the viewport when host height chains break or content overflows.
+ */
+export function readShellViewportDimensions(win?: Window): ShellViewportDimensions {
+  const w = win ?? (typeof globalThis.window !== 'undefined' ? globalThis.window : undefined);
+  if (!w) return { width: 0, height: 0 };
+
+  const visual = w.visualViewport;
+  return {
+    width: Math.round(visual?.width ?? w.innerWidth),
+    height: Math.round(visual?.height ?? w.innerHeight),
+  };
+}
+
 export interface ShellGradientLayout {
   width: number;
   height: number;
   panelWidth: number;
 }
 
-export function shellGradientSize(layout: ShellGradientLayout): string {
+/** Pixel `background-size` for the fixed-attachment radial wash. */
+export function shellGradientSize(layout: Pick<ShellGradientLayout, 'width' | 'height'>): string {
   return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;
 }
 

package/dist/components/p-1HlgCxGN.js

@@ -1,2 +0,0 @@
-const t="dsChromeTransitionStart";const n="dsChromeTransitionEnd";class e{constructor(){this.depth=0}enter(){this.depth+=1}exit(){this.depth=Math.max(0,this.depth-1)}get isActive(){return this.depth>0}}function i(t){let n=0;return{schedule(){if(n!==0)return;n=requestAnimationFrame((()=>{n=0;t()}))},cancel(){if(n!==0){cancelAnimationFrame(n);n=0}}}}function r(t){return t.detail?.source}function s(t,n){if(typeof document==="undefined")return 0;const e=document.createElement("div");e.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+n+");";t.appendChild(e);const i=e.getBoundingClientRect().width;t.removeChild(e);return i}function a(t){return{expandedPx:s(t,"--_nav-width"),collapsedPx:s(t,"--_nav-width-collapsed")}}function o(t,n){if(n?.classList.contains("panel-nav--collapsed"))return true;const e=t?.collapsed;return e===true}function c(t,n){return n?t.collapsedPx:t.expandedPx}export{e as C,t as a,n as b,i as c,a as d,s as e,o as i,c as p,r};
-//# sourceMappingURL=p-1HlgCxGN.js.map

package/dist/components/p-1HlgCxGN.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["CHROME_TRANSITION_START","CHROME_TRANSITION_END","ChromeTransitionDepth","constructor","this","depth","enter","exit","Math","max","isActive","createRafCoalescer","onFrame","rafId","schedule","requestAnimationFrame","cancel","cancelAnimationFrame","readChromeTransitionSource","event","detail","source","readCssVarWidthPx","context","cssVarName","document","probe","createElement","style","cssText","appendChild","width","getBoundingClientRect","removeChild","readPanelNavWidthTokens","navRoot","expandedPx","collapsedPx","isPanelNavCollapsed","panelNavHost","classList","contains","collapsedProp","collapsed","panelWidthPxFromTokens","tokens"],"sources":["src/wc/nav/chrome-transition.ts","src/wc/nav/shell-chrome-metrics.ts"],"sourcesContent":["/** Bubbling/composed events — `ds-app-shell` and `ds-bar-nav` coordinate during width motion. */\n\nexport const CHROME_TRANSITION_START = 'dsChromeTransitionStart';\nexport const CHROME_TRANSITION_END = 'dsChromeTransitionEnd';\n\nexport type ChromeTransitionSource = 'panel-nav' | 'panel-tools';\n\nexport interface ChromeTransitionDetail {\n  source: ChromeTransitionSource;\n}\n\n/** Reference-counted gate — used while panel-nav width is transitioning. */\nexport class ChromeTransitionDepth {\n  private depth = 0;\n\n  enter(): void {\n    this.depth += 1;\n  }\n\n  exit(): void {\n    this.depth = Math.max(0, this.depth - 1);\n  }\n\n  get isActive(): boolean {\n    return this.depth > 0;\n  }\n}\n\nexport interface RafCoalescer {\n  schedule(): void;\n  cancel(): void;\n}\n\n/** Coalesce bursty layout work (ResizeObserver, prop churn) to one callback per frame. */\nexport function createRafCoalescer(onFrame: () => void): RafCoalescer {\n  let rafId = 0;\n  return {\n    schedule() {\n      if (rafId !== 0) return;\n      rafId = requestAnimationFrame(() => {\n        rafId = 0;\n        onFrame();\n      });\n    },\n    cancel() {\n      if (rafId !== 0) {\n        cancelAnimationFrame(rafId);\n        rafId = 0;\n      }\n    },\n  };\n}\n\nexport function readChromeTransitionSource(event: Event): ChromeTransitionSource | undefined {\n  return (event as CustomEvent<ChromeTransitionDetail>).detail?.source;\n}\n","import { shellGradientPositionBar } from './shell-gradient';\n\n/** Read a `var(--token)` width in px using a hidden probe (works with calc() tokens). */\nexport function readCssVarWidthPx(context: HTMLElement, cssVarName: string): number {\n  if (typeof document === 'undefined') return 0;\n\n  const probe = document.createElement('div');\n  probe.style.cssText =\n    'position:absolute;visibility:hidden;pointer-events:none;height:0;width:var(' +\n    cssVarName +\n    ');';\n  context.appendChild(probe);\n  const width = probe.getBoundingClientRect().width;\n  context.removeChild(probe);\n  return width;\n}\n\nexport interface PanelNavWidthTokens {\n  expandedPx: number;\n  collapsedPx: number;\n}\n\n/** Resolve panel-nav expanded/collapsed widths from scoped CSS vars on `.panel-nav`. */\nexport function readPanelNavWidthTokens(navRoot: HTMLElement): PanelNavWidthTokens {\n  return {\n    expandedPx: readCssVarWidthPx(navRoot, '--_nav-width'),\n    collapsedPx: readCssVarWidthPx(navRoot, '--_nav-width-collapsed'),\n  };\n}\n\nexport function isPanelNavCollapsed(\n  panelNavHost: HTMLElement | null,\n  navRoot: HTMLElement | null,\n): boolean {\n  if (navRoot?.classList.contains('panel-nav--collapsed')) return true;\n  const collapsedProp = (panelNavHost as (HTMLElement & { collapsed?: boolean }) | null)?.collapsed;\n  return collapsedProp === true;\n}\n\nexport function panelWidthPxFromTokens(\n  tokens: PanelNavWidthTokens,\n  collapsed: boolean,\n): number {\n  return collapsed ? tokens.collapsedPx : tokens.expandedPx;\n}\n\nexport function barGradientPositionFromPanelWidth(panelWidthPx: number): string {\n  return shellGradientPositionBar(panelWidthPx);\n}\n"],"mappings":"AAEO,MAAMA,EAA0B,0BAChC,MAAMC,EAAwB,wB,MASxBC,EAAb,WAAAC,GACUC,KAAAC,MAAQ,C,CAEhB,KAAAC,GACEF,KAAKC,OAAS,C,CAGhB,IAAAE,GACEH,KAAKC,MAAQG,KAAKC,IAAI,EAAGL,KAAKC,MAAQ,E,CAGxC,YAAIK,GACF,OAAON,KAAKC,MAAQ,C,EAUlB,SAAUM,EAAmBC,GACjC,IAAIC,EAAQ,EACZ,MAAO,CACL,QAAAC,GACE,GAAID,IAAU,EAAG,OACjBA,EAAQE,uBAAsB,KAC5BF,EAAQ,EACRD,GAAS,G,EAGb,MAAAI,GACE,GAAIH,IAAU,EAAG,CACfI,qBAAqBJ,GACrBA,EAAQ,C,GAIhB,CAEM,SAAUK,EAA2BC,GACzC,OAAQA,EAA8CC,QAAQC,MAChE,CCpDM,SAAUC,EAAkBC,EAAsBC,GACtD,UAAWC,WAAa,YAAa,OAAO,EAE5C,MAAMC,EAAQD,SAASE,cAAc,OACrCD,EAAME,MAAMC,QACV,8EACAL,EACA,KACFD,EAAQO,YAAYJ,GACpB,MAAMK,EAAQL,EAAMM,wBAAwBD,MAC5CR,EAAQU,YAAYP,GACpB,OAAOK,CACT,CAQM,SAAUG,EAAwBC,GACtC,MAAO,CACLC,WAAYd,EAAkBa,EAAS,gBACvCE,YAAaf,EAAkBa,EAAS,0BAE5C,CAEM,SAAUG,EACdC,EACAJ,GAEA,GAAIA,GAASK,UAAUC,SAAS,wBAAyB,OAAO,KAChE,MAAMC,EAAiBH,GAAiEI,UACxF,OAAOD,IAAkB,IAC3B,CAEM,SAAUE,EACdC,EACAF,GAEA,OAAOA,EAAYE,EAAOR,YAAcQ,EAAOT,UACjD,Q","ignoreList":[]}