@ds-mo/ui 1.11.2 → 1.11.4

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',
@@ -99,6 +100,7 @@ export class BarNav {
 
   private static readonly HOST_PROP_SYNC_BUDGET = 8;
   private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;
+  private static readonly TAB_LAYOUT_COMMIT_MAX_FRAMES = 16;
   private static readonly OVERFLOW_HYSTERESIS_PX = 8;
 
   private headerEl: HTMLElement | null = null;
@@ -110,13 +112,14 @@ export class BarNav {
   private probeTabGroupEl: QueryableHost | null = null;
   private resizeObserver: ResizeObserver | null = null;
   private intrinsicWidthRetryCount = 0;
+  private tabLayoutPendingFrames = 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 +140,18 @@ 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;
+    this.tabLayoutPendingFrames = 0;
+  }
+
   @Watch('tabs')
   @Watch('tabsJson')
   @Watch('actions')
@@ -194,7 +209,7 @@ export class BarNav {
   }
 
   componentDidRender() {
-    if (this.panelNavTransition.isActive) {
+    if (this.chromeOverflowPaused()) {
       this.syncMenuAnchor();
       return;
     }
@@ -241,16 +256,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 +277,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 +316,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 +381,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 {
@@ -393,6 +395,16 @@ export class BarNav {
     requestAnimationFrame(() => this.scheduleOverflowCheck());
   }
 
+  private forceTabLayoutCommit(fallbackCollapsed: boolean) {
+    this.intrinsicWidthRetryCount = 0;
+    this.tabLayoutPendingFrames = 0;
+    this.tabsCollapsed = fallbackCollapsed;
+    if (!fallbackCollapsed) {
+      this.menuOpen = false;
+    }
+    this.tabLayoutCommitted = true;
+  }
+
   private updateTabsCollapsed() {
     if (!this.headerEl || this.resolvedTabs.length === 0 || this.hideTabsForDetailRoute) {
       if (this.tabsCollapsed) {
@@ -400,15 +412,25 @@ export class BarNav {
         this.menuOpen = false;
       }
       this.intrinsicWidthRetryCount = 0;
+      this.tabLayoutPendingFrames = 0;
+      this.tabLayoutCommitted = true;
       return;
     }
 
     const intrinsicWidth = this.getTabsIntrinsicWidth();
     if (intrinsicWidth === 0) {
-      this.scheduleIntrinsicWidthRetry();
+      this.tabLayoutPendingFrames += 1;
+      if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) {
+        this.forceTabLayoutCommit(false);
+      } else if (this.tabLayoutPendingFrames >= BarNav.TAB_LAYOUT_COMMIT_MAX_FRAMES) {
+        this.forceTabLayoutCommit(false);
+      } else {
+        this.scheduleIntrinsicWidthRetry();
+      }
       return;
     }
     this.intrinsicWidthRetryCount = 0;
+    this.tabLayoutPendingFrames = 0;
 
     const shouldCollapse = tabsOverflowContainer(
       intrinsicWidth,
@@ -423,6 +445,8 @@ export class BarNav {
         this.menuOpen = false;
       }
     }
+
+    this.tabLayoutCommitted = true;
   }
 
   private syncMenuAnchor() {
@@ -469,6 +493,7 @@ export class BarNav {
       this.pendingSection = nextBasePath;
       this.resolvedTabs = [];
       this.resolvedActions = this.incomingActions();
+      this.resetTabOverflowLayout();
       return;
     }
 
@@ -486,11 +511,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 +624,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;
@@ -607,9 +639,12 @@ export class BarNav {
                 <ds-tab-group-nav
                   key={`probe-${tabGroupKey}`}
                   ref={el => {
-                    this.probeTabGroupEl = el ?? null;
-                    if (el) {
+                    const next = el ?? null;
+                    if (next === this.probeTabGroupEl) return;
+                    this.probeTabGroupEl = next;
+                    if (next) {
                       this.intrinsicWidthRetryCount = 0;
+                      this.tabLayoutPendingFrames = 0;
                       this.scheduleOverflowCheck();
                     }
                   }}
@@ -619,7 +654,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 +669,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 +736,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 +761,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/PanelNav/PanelNav.tsx

@@ -123,8 +123,14 @@ export class PanelNav {
   }
 
   @Watch('collapsed')
+  onCollapsedChange(_next: boolean, prev: boolean | undefined) {
+    if (prev === undefined) return;
+    this.startCollapseAnimation();
+  }
+
   @Watch('viewportNarrow')
-  onCollapsedChange() {
+  onViewportNarrowChange(_next: boolean, prev: boolean | undefined) {
+    if (prev === undefined) return;
     this.startCollapseAnimation();
   }
 
@@ -191,17 +197,34 @@ export class PanelNav {
     this.isAnimating = true;
     this.dsChromeTransitionStart.emit({ source: 'panel-nav' });
     const panel = this.el.querySelector('.panel-nav') as HTMLElement | null;
+    const widthBefore = panel?.getBoundingClientRect().width ?? 0;
     if (this.transitionEndHandler) {
       panel?.removeEventListener('transitionend', this.transitionEndHandler);
     }
     this.transitionEndHandler = (e: TransitionEvent) => {
       if (e.propertyName === 'width') {
-        this.isAnimating = false;
-        this.dsChromeTransitionEnd.emit({ source: 'panel-nav' });
-        panel?.removeEventListener('transitionend', this.transitionEndHandler!);
+        this.finishCollapseAnimation(panel);
       }
     };
     panel?.addEventListener('transitionend', this.transitionEndHandler);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (!this.isAnimating) return;
+        const widthAfter = panel?.getBoundingClientRect().width ?? 0;
+        if (Math.abs(widthAfter - widthBefore) < 1) {
+          this.finishCollapseAnimation(panel);
+        }
+      });
+    });
+  }
+
+  private finishCollapseAnimation(panel: HTMLElement | null) {
+    if (!this.isAnimating) return;
+    this.isAnimating = false;
+    this.dsChromeTransitionEnd.emit({ source: 'panel-nav' });
+    if (this.transitionEndHandler) {
+      panel?.removeEventListener('transitionend', this.transitionEndHandler);
+    }
   }
 
   private connectResizeObserver() {

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();
   }

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":[]}