@ds-mo/ui 13.16.0 → 13.17.0

package/dist/mcp-data/registry/shell-app.json

@@ -78,6 +78,7 @@
         "A slotted Banner remains below the top safe-area inset and above routed, navigation, fullscreen-tool, and mobile global-surface presentations.",
         "Mobile global surfaces conceal and inert the routed workspace without unmounting it, preserving nested routes and scroll state.",
         "Keep PanelNav width, BarNav height, PanelTools chrome, and main-content origin stable except during intentional responsive or collapse transitions.",
+        "Keep managed page-header capacity compact or constrained through the complete PanelTools close transition, then restore the closed-tools capacity after the drawer no longer occupies page width.",
         "The bottom bar remains visible at all route and tool depths in the foundation release."
       ],
       "frameworkCaveats": {
@@ -594,7 +595,7 @@
     },
     {
       "path": "src/wc/components/ShellApp/ShellApp.tsx",
-      "content": "import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Watch,\n  Listen,\n  Method,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport {\n  isEditableShortcutTarget,\n  resolveShellShortcut,\n} from '../../shell/shell-shortcuts';\nimport type {\n  PanelToolsToolId,\n  PanelToolsHeaderAction,\n} from '../PanelTools/panel-tools-types';\nimport { PANEL_TOOLS_DEFAULT_ITEMS } from '../PanelTools/panel-tools-types';\nimport type { BarTitleSectionItem } from '../BarTitle/bar-title-types';\nimport type { BreadcrumbSelectDetail } from '../Breadcrumb/breadcrumb-types';\nimport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  normalizeShellGradientPreset,\n  type ShellGradientPreset,\n} from '../../shell/shell-gradient-presets';\nimport {\n  CHROME_TRANSITION_END,\n  CHROME_TRANSITION_START,\n  ChromeTransitionDepth,\n  createRafCoalescer,\n  readChromeTransitionSource,\n} from '../../shell/chrome-transition';\nimport {\n  isPanelNavCollapsed,\n  panelWidthPxFromTokens,\n  readPanelNavWidthTokens,\n  type PanelNavWidthTokens,\n} from '../../shell/shell-chrome-metrics';\nimport {\n  SHELL_GRADIENT_IMAGE_VAR,\n  SHELL_GRADIENT_OPACITY_VAR,\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n  SHELL_GRADIENT_SIZE_VAR,\n  buildShellRadialGradient,\n  readShellViewportDimensions,\n  shellGradientPositionBar,\n  shellGradientPositionPanel,\n  shellGradientPresetOpacity,\n  shellGradientSize,\n} from '../../shell/shell-gradient';\nimport {\n  isShellInboxTool,\n  resolveAvailableInboxTool,\n  resolveManagedShellPageCapacity,\n  resolveShellResponsiveMode,\n  SHELL_DESKTOP_BREAKPOINT,\n  shellMobileDestinationForTool,\n  type MobileDestination,\n  type ShellInboxToolId,\n  type ShellResponsiveMode,\n} from '../../shell/shell-responsive';\nimport { deriveActiveIdFromUrl } from '../PanelNav/panel-nav-utils';\nimport type { PanelNavItem } from '../PanelNav/panel-nav-types';\nimport type { PanelNavUserActionDetail } from '../PanelNav/panel-nav-types';\nimport type { MobileBarNavDestinationDetail } from '../MobileBarNav/mobile-bar-nav-types';\nimport type {\n  ShellAppComposition,\n  ShellNavigationConfig,\n  ShellPageChromeConfig,\n  ShellToolsConfig,\n} from './shell-app-types';\n\n@Component({\n  tag: 'ds-shell-app',\n  styleUrl: 'ShellApp.css',\n  scoped: true,\n})\nexport class ShellApp {\n  private static readonly FOREGROUND_REFRESH_MS = 50;\n\n  /** Managed renders the complete responsive chrome; slotted exposes the advanced composition. */\n  @Prop({ reflect: true }) composition: ShellAppComposition = 'managed';\n\n  /** Router-owned navigation data used by managed composition. */\n  @Prop() navigation: ShellNavigationConfig = {};\n\n  /** Route-owned page title and section data used by managed composition. */\n  @Prop({ attribute: 'page-chrome' }) pageChrome: ShellPageChromeConfig = {};\n\n  /** Product-owned global tool definitions used by managed composition. */\n  @Prop() tools: ShellToolsConfig = {};\n\n  /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n  /**\n   * Shell chrome wash preset. `none` renders solid chrome; the remaining\n   * presets use token-based washes that adapt to the active color theme.\n   */\n  @Prop({ attribute: 'gradient-preset', reflect: true }) gradientPreset: ShellGradientPreset =\n    DEFAULT_SHELL_GRADIENT_PRESET;\n\n  /** When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K, A, S, M, N, and / toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native. */\n  @Prop({ attribute: 'shortcuts-enabled' }) shortcutsEnabled: boolean = true;\n\n  /** Controlled mobile surface shown above the persistent bottom bar. */\n  @Prop({ attribute: 'mobile-destination' })\n  mobileDestination: MobileDestination = 'area';\n\n  /** Controlled full-stage Mobile Sheet Nav state. */\n  @Prop({ attribute: 'mobile-sheet-nav-open' })\n  mobileSheetNavOpen: boolean = false;\n\n  /** Emitted after crossing the fixed 768px or 1200px shell boundaries. */\n  @Event() dsResponsiveModeChange!: EventEmitter<{ mode: ShellResponsiveMode }>;\n\n  /** Managed primary-navigation intent; the application router performs navigation. */\n  @Event() dsNavSelect!: EventEmitter<string>;\n\n  /** Managed desktop BarNav or mobile section-selection intent. */\n  @Event() dsTabChange!: EventEmitter<string>;\n\n  /** Managed page-subsection intent from BarTitle or MobileHeader. */\n  @Event() dsSubsectionChange!: EventEmitter<string>;\n\n  /** Managed page-level Back intent. */\n  @Event() dsPageBack!: EventEmitter<MouseEvent>;\n\n  /** Managed breadcrumb intent from BarTitle. */\n  @Event({ cancelable: true })\n  dsBreadcrumbSelect!: EventEmitter<BreadcrumbSelectDetail>;\n\n  /** Managed page action intent from BarTitle. */\n  @Event() dsPageAction!: EventEmitter<string>;\n\n  /** Managed tools selection state. */\n  @Event() dsToolChange!: EventEmitter<{ id: PanelToolsToolId; selected: boolean }>;\n\n  /** Managed tool-header Back intent. */\n  @Event() dsHeaderBack!: EventEmitter<{ tool: PanelToolsToolId }>;\n\n  /** Managed tool-header action intent. */\n  @Event() dsHeaderAction!: EventEmitter<{ tool: PanelToolsToolId; id: string }>;\n\n  /** Managed drawer/fullscreen presentation state. */\n  @Event() dsPresentationChange!: EventEmitter<{ presentation: 'drawer' | 'fullscreen' }>;\n\n  /** Managed mobile Dashboard/Settings browsing intent. */\n  @Event() dsBrowseContextChange!: EventEmitter<NavChromeStyle>;\n\n  /** Managed account-footer action intent. */\n  @Event() dsNavFooterAction!: EventEmitter<void>;\n\n  /** Managed user/account trigger intent. */\n  @Event() dsNavUserAction!: EventEmitter<PanelNavUserActionDetail>;\n\n  @Element() el!: HTMLElement;\n  @State() private toolsFullscreen = false;\n  @State() private resolvedMode: ShellResponsiveMode = 'desktop';\n  @State() private managedToolsOpen = false;\n  @State() private managedActiveTool: PanelToolsToolId | '' = '';\n  @State() private managedToolPresentation: 'drawer' | 'fullscreen' = 'drawer';\n  @State() private managedMobileDestination: MobileDestination = 'area';\n  @State() private managedMobileSheetNavOpen = false;\n  @State() private managedInboxTool: ShellInboxToolId | '' = '';\n  @State() private managedBrowseContext: NavChromeStyle = 'dashboard';\n\n  private resizeObserver: ResizeObserver | null = null;\n  private hasLoaded = false;\n  private foregroundRefreshTimer: number | null = null;\n  private readonly panelNavTransition = new ChromeTransitionDepth();\n  private readonly chromeSyncCoalescer = createRafCoalescer(() => this.syncChrome());\n  private panelWidthTokens: PanelNavWidthTokens = { expandedPx: 0, collapsedPx: 0 };\n  private cachedViewportWidth = 0;\n  private cachedViewportHeight = 0;\n  private onWindowResize = () => {\n    this.updateResponsiveMode();\n    if (this.panelNavTransition.isActive) return;\n    this.scheduleChromeSync();\n  };\n  private onVisualViewportChange = () => {\n    if (this.panelNavTransition.isActive) return;\n    this.scheduleChromeSync();\n  };\n\n  private get managed(): boolean {\n    return this.composition === 'managed';\n  }\n\n  private get effectiveMobileDestination(): MobileDestination {\n    return this.managed ? this.managedMobileDestination : this.mobileDestination;\n  }\n\n  private get effectiveMobileSheetNavOpen(): boolean {\n    return this.managed ? this.managedMobileSheetNavOpen : this.mobileSheetNavOpen;\n  }\n\n  private get resolvedNavigationGroups() {\n    if (this.navigation.groups?.length) return this.navigation.groups;\n    return this.managedBrowseContext === 'settings'\n      ? (this.navigation.settingsGroups ?? [])\n      : (this.navigation.dashboardGroups ?? []);\n  }\n\n  private get resolvedToolItems() {\n    return this.tools.items ?? PANEL_TOOLS_DEFAULT_ITEMS;\n  }\n\n  private get availableInboxTools(): ShellInboxToolId[] {\n    return this.resolvedToolItems\n      .filter(\n        item =>\n          !item.isInactive &&\n          (item.mobileDestination === 'inbox' || isShellInboxTool(item.id))\n      )\n      .map(item => item.id as ShellInboxToolId);\n  }\n\n  componentWillLoad() {\n    if (typeof window !== 'undefined') {\n      this.resolvedMode = resolveShellResponsiveMode(window.innerWidth);\n    }\n    this.managedBrowseContext = this.navigation.browseContext ?? this.navStyle;\n    this.managedMobileDestination = this.mobileDestination;\n    this.managedMobileSheetNavOpen = this.mobileSheetNavOpen;\n    this.managedInboxTool = resolveAvailableInboxTool('', this.availableInboxTools);\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.syncSlottedNavStyle();\n    this.syncSlottedMobileState();\n    this.connectMetricsObserver();\n    this.connectViewportListeners();\n    this.connectPageLifecycleListeners();\n    this.el.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n    this.el.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n    requestAnimationFrame(() => {\n      this.cachePanelWidthTokens();\n      this.scheduleChromeSync();\n    });\n    const tools = this.el.querySelector('ds-shell-tools, ds-panel-tools');\n    this.toolsFullscreen = tools?.getAttribute('presentation') === 'fullscreen';\n  }\n\n  @Listen('dsPresentationChange')\n  handleToolsPresentation(event: CustomEvent<{ presentation?: string }>) {\n    this.toolsFullscreen = event.detail?.presentation === 'fullscreen';\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.disconnectViewportListeners();\n    this.disconnectPageLifecycleListeners();\n    this.cancelForegroundRefresh();\n    this.chromeSyncCoalescer.cancel();\n    this.el.removeEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n    this.el.removeEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n  }\n\n  @Watch('navStyle')\n  @Watch('gradientPreset')\n  onShellPropsChange() {\n    this.syncSlottedNavStyle();\n    this.scheduleChromeSync();\n  }\n\n  @Watch('navigation')\n  handleNavigationChange() {\n    this.managedBrowseContext = this.navigation.browseContext ?? this.navStyle;\n  }\n\n  @Watch('tools')\n  handleToolsChange() {\n    if (\n      this.managedActiveTool &&\n      !this.resolvedToolItems.some(item => item.id === this.managedActiveTool)\n    ) {\n      this.managedToolsOpen = false;\n      this.managedActiveTool = '';\n      this.managedMobileDestination = 'area';\n    }\n    this.managedInboxTool = resolveAvailableInboxTool(\n      this.managedInboxTool,\n      this.availableInboxTools\n    );\n  }\n\n  @Watch('mobileDestination')\n  @Watch('mobileSheetNavOpen')\n  onMobileStateChange(_next: unknown, previous: unknown) {\n    if (this.managed) {\n      this.managedMobileDestination = this.mobileDestination;\n      this.managedMobileSheetNavOpen = this.mobileSheetNavOpen;\n    }\n    this.syncSlottedMobileState();\n    if (\n      previous === true &&\n      !this.effectiveMobileSheetNavOpen &&\n      this.resolvedMode === 'mobile'\n    ) {\n      requestAnimationFrame(() => {\n        const bar = this.el.querySelector('ds-mobile-bar-nav') as\n          | (HTMLElement & {\n              focusDestination?: (\n                destination: MobileDestination | 'sheet-nav'\n              ) => Promise<void>;\n            })\n          | null;\n        const activeElement = document.activeElement;\n        if (activeElement instanceof HTMLElement && bar?.contains(activeElement)) return;\n        void bar?.focusDestination?.('sheet-nav');\n      });\n    }\n  }\n\n  private updateResponsiveMode() {\n    if (typeof window === 'undefined') return;\n    const next = resolveShellResponsiveMode(window.innerWidth);\n    if (next === this.resolvedMode) return;\n    this.resolvedMode = next;\n    this.syncSlottedMobileState();\n    this.scheduleChromeSync();\n    if (this.hasLoaded) this.dsResponsiveModeChange.emit({ mode: next });\n  }\n\n  private onChromeTransitionStart = (event: Event) => {\n    if (readChromeTransitionSource(event) !== 'panel-nav') return;\n\n    this.panelNavTransition.enter();\n    const viewport = readShellViewportDimensions();\n    this.cachedViewportWidth = viewport.width;\n    this.cachedViewportHeight = viewport.height;\n    this.syncChrome();\n  };\n\n  private onChromeTransitionEnd = (event: Event) => {\n    if (readChromeTransitionSource(event) !== 'panel-nav') return;\n\n    this.panelNavTransition.exit();\n    if (!this.panelNavTransition.isActive) {\n      this.scheduleChromeSync();\n    }\n  };\n\n  /** Coalesce ResizeObserver bursts to one layout read per frame. */\n  private scheduleChromeSync() {\n    this.chromeSyncCoalescer.schedule();\n  }\n\n  private syncSlottedNavStyle() {\n    const panel = this.el.querySelector('ds-panel-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n    const bar = this.el.querySelector('ds-bar-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n    if (panel) {\n      panel.setAttribute('nav-style', this.navStyle);\n      panel.navStyle = this.navStyle;\n    }\n    if (bar) {\n      bar.setAttribute('nav-style', this.navStyle);\n      bar.navStyle = this.navStyle;\n    }\n  }\n\n  private syncSlottedMobileState() {\n    const tools = this.el.querySelector('ds-shell-tools') as\n      | (HTMLElement & { responsiveMode: ShellResponsiveMode })\n      | null;\n    const bar = this.el.querySelector('ds-mobile-bar-nav') as\n      | (HTMLElement & {\n          activeDestination: MobileDestination;\n          sheetNavExpanded: boolean;\n        })\n      | null;\n    const sheetNav = this.el.querySelector('ds-mobile-sheet-nav') as\n      | (HTMLElement & { open: boolean })\n      | null;\n\n    if (tools) {\n      tools.setAttribute('responsive-mode', this.resolvedMode);\n      tools.responsiveMode = this.resolvedMode;\n    }\n    if (bar) {\n      bar.activeDestination = this.effectiveMobileDestination;\n      bar.sheetNavExpanded = this.effectiveMobileSheetNavOpen;\n    }\n    if (sheetNav) {\n      sheetNav.open = this.effectiveMobileSheetNavOpen;\n    }\n  }\n\n  private connectMetricsObserver() {\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.panelNavTransition.isActive) return;\n      this.scheduleChromeSync();\n    });\n    this.resizeObserver.observe(this.el);\n    const panelWrap = this.el.querySelector('.shell-app__panel');\n    if (panelWrap) this.resizeObserver.observe(panelWrap);\n  }\n\n  private connectViewportListeners() {\n    if (typeof window === 'undefined') return;\n\n    window.addEventListener('resize', this.onWindowResize, { passive: true });\n\n    const visual = window.visualViewport;\n    if (visual) {\n      visual.addEventListener('resize', this.onVisualViewportChange, { passive: true });\n      visual.addEventListener('scroll', this.onVisualViewportChange, { passive: true });\n    }\n  }\n\n  private disconnectViewportListeners() {\n    if (typeof window === 'undefined') return;\n\n    window.removeEventListener('resize', this.onWindowResize);\n\n    const visual = window.visualViewport;\n    if (visual) {\n      visual.removeEventListener('resize', this.onVisualViewportChange);\n      visual.removeEventListener('scroll', this.onVisualViewportChange);\n    }\n  }\n\n  private connectPageLifecycleListeners() {\n    if (typeof window === 'undefined' || typeof document === 'undefined') return;\n    document.addEventListener('visibilitychange', this.onDocumentVisibilityChange);\n    window.addEventListener('pageshow', this.onPageShow);\n  }\n\n  private disconnectPageLifecycleListeners() {\n    if (typeof window === 'undefined' || typeof document === 'undefined') return;\n    document.removeEventListener('visibilitychange', this.onDocumentVisibilityChange);\n    window.removeEventListener('pageshow', this.onPageShow);\n  }\n\n  private onDocumentVisibilityChange = () => {\n    if (!document.hidden) this.refreshAfterForegroundRestore();\n  };\n\n  private onPageShow = (event: PageTransitionEvent) => {\n    if (event.persisted) this.refreshAfterForegroundRestore();\n  };\n\n  private cancelForegroundRefresh() {\n    if (this.foregroundRefreshTimer !== null) {\n      window.clearTimeout(this.foregroundRefreshTimer);\n      this.foregroundRefreshTimer = null;\n    }\n    this.el.classList.remove('shell-app--foreground-refresh');\n  }\n\n  private refreshAfterForegroundRestore() {\n    this.updateResponsiveMode();\n    this.syncSlottedMobileState();\n    this.scheduleChromeSync();\n\n    if (this.resolvedMode !== 'mobile') return;\n\n    /*\n     * Mobile WebKit can restore a live, correctly sized DOM without repainting\n     * its suspended shell layer. Re-promote the complete mobile stage for one\n     * painted frame; routed and tool owners remain mounted and keep their state.\n     */\n    this.cancelForegroundRefresh();\n    this.el.classList.add('shell-app--foreground-refresh');\n    void this.el.offsetHeight;\n    // A short timer spans a real compositor commit; resumed WebKit may coalesce\n    // nested animation frames before presenting either one.\n    this.foregroundRefreshTimer = window.setTimeout(() => {\n      this.foregroundRefreshTimer = null;\n      this.el.classList.remove('shell-app--foreground-refresh');\n      // WebKit otherwise may keep presenting the retired composite layer.\n      void this.el.querySelector<HTMLElement>('.shell-app__main')?.offsetHeight;\n    }, ShellApp.FOREGROUND_REFRESH_MS);\n  }\n\n  private cachePanelWidthTokens() {\n    const navRoot = this.el.querySelector('ds-panel-nav .panel-nav') as HTMLElement | null;\n    if (!navRoot) return;\n    this.panelWidthTokens = readPanelNavWidthTokens(navRoot);\n  }\n\n  private applyGradientVars(target: HTMLElement, vars: Record<string, string | null>) {\n    const style = target.style;\n    for (const [name, value] of Object.entries(vars)) {\n      if (value === null) style.removeProperty(name);\n      else style.setProperty(name, value);\n    }\n  }\n\n  private clearGradientPaintVars(targets: HTMLElement[]) {\n    const keys = [\n      SHELL_GRADIENT_IMAGE_VAR,\n      SHELL_GRADIENT_SIZE_VAR,\n      SHELL_GRADIENT_OPACITY_VAR,\n    ];\n    for (const target of targets) {\n      for (const key of keys) target.style.removeProperty(key);\n    }\n  }\n\n  /** Panel/bar wash offsets for scroll fades and badge rings. */\n  private syncChromeLayoutVars(\n    panel: HTMLElement | null,\n    bar: HTMLElement | null,\n    panelPosition: string,\n    barPosition: string,\n  ) {\n    if (panel) {\n      panel.style.setProperty(SHELL_GRADIENT_POSITION_PANEL_VAR, panelPosition);\n    }\n    if (bar) {\n      bar.style.setProperty(SHELL_GRADIENT_POSITION_BAR_VAR, barPosition);\n    }\n  }\n\n  private resolvePanelWidthPx(panelNav: HTMLElement | null): number {\n    const navRoot = panelNav?.querySelector('.panel-nav') as HTMLElement | null;\n\n    if (this.panelNavTransition.isActive && this.panelWidthTokens.expandedPx > 0) {\n      const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n      return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n    }\n\n    const panelWrap = this.el.querySelector('.shell-app__panel') as HTMLElement | null;\n    const measured = panelWrap?.getBoundingClientRect().width ?? 0;\n    if (measured > 0) return measured;\n\n    if (this.panelWidthTokens.expandedPx > 0) {\n      const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n      return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n    }\n\n    return 0;\n  }\n\n  /** Fixed-attachment wash/grid size — always the viewport, never the shell element box. */\n  private resolveViewportDimensions(): { width: number; height: number } {\n    if (this.panelNavTransition.isActive && this.cachedViewportWidth > 0) {\n      return {\n        width: this.cachedViewportWidth,\n        height: this.cachedViewportHeight,\n      };\n    }\n\n    return readShellViewportDimensions();\n  }\n\n  private chromeLayerActive(): boolean {\n    return (\n      this.resolvedMode !== 'mobile' &&\n      normalizeShellGradientPreset(this.gradientPreset) !== 'none'\n    );\n  }\n\n  @Listen('keydown', { target: 'window', capture: true })\n  handleWindowKeyDown(e: KeyboardEvent) {\n    if (!this.shortcutsEnabled) return;\n    if (isEditableShortcutTarget(e.target)) return;\n\n    const action = resolveShellShortcut(e);\n    if (!action) return;\n\n    e.preventDefault();\n\n    const panel = this.el.querySelector('ds-panel-nav') as HTMLDsPanelNavElement | null;\n    const tools = this.el.querySelector('ds-shell-tools, ds-panel-tools') as\n      | (HTMLElement & {\n          closeDrawer?: () => Promise<void>;\n          activateTool?: (id: PanelToolsToolId) => Promise<void>;\n        })\n      | null;\n\n    if (action === 'toggle-panel-nav') {\n      void panel?.toggleCollapsed();\n      return;\n    }\n\n    if (action === 'close-panel-tools') {\n      void tools?.closeDrawer?.();\n      return;\n    }\n\n    if (action.startsWith('open-tool:') && tools) {\n      const toolId = action.slice('open-tool:'.length) as PanelToolsToolId;\n      void tools.activateTool?.(toolId);\n    }\n  }\n\n  /** Open or toggle a managed global tool from application-owned UI. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    const tools = this.el.querySelector('ds-shell-tools, ds-panel-tools') as\n      | (HTMLElement & { activateTool?: (tool: PanelToolsToolId) => Promise<void> })\n      | null;\n    await tools?.activateTool?.(id);\n  }\n\n  /** Close whichever managed global surface is currently visible. */\n  @Method()\n  async closeGlobalSurface() {\n    if (this.managedMobileSheetNavOpen) {\n      this.managedMobileSheetNavOpen = false;\n      return;\n    }\n    const tools = this.el.querySelector('ds-shell-tools, ds-panel-tools') as\n      | (HTMLElement & { closeDrawer?: () => Promise<void> })\n      | null;\n    await tools?.closeDrawer?.();\n  }\n\n  /** Request drawer or fullscreen presentation for the active managed tool. */\n  @Method()\n  async setToolPresentation(presentation: 'drawer' | 'fullscreen') {\n    this.managedToolPresentation = presentation;\n    this.toolsFullscreen = presentation === 'fullscreen';\n  }\n\n  private handleManagedNavSelect = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsNavSelect.emit(event.detail);\n  };\n\n  private handleManagedTabChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsTabChange.emit(event.detail);\n  };\n\n  private handleManagedPageBack = (event: CustomEvent<MouseEvent>) => {\n    event.stopPropagation();\n    this.dsPageBack.emit(event.detail);\n  };\n\n  private handleManagedBreadcrumbSelect = (\n    event: CustomEvent<BreadcrumbSelectDetail>\n  ) => {\n    event.stopPropagation();\n    const forwarded = this.dsBreadcrumbSelect.emit(event.detail);\n    if (forwarded.defaultPrevented) event.preventDefault();\n  };\n\n  private handleManagedSubsectionChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsSubsectionChange.emit(event.detail);\n  };\n\n  private handleManagedPageAction = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsPageAction.emit(event.detail);\n  };\n\n  private handleManagedToolChange = (\n    event: CustomEvent<{ id: PanelToolsToolId; selected: boolean }>\n  ) => {\n    event.stopPropagation();\n    const { id, selected } = event.detail;\n    this.managedActiveTool = id;\n    this.managedToolsOpen = selected;\n    const item = this.resolvedToolItems.find(candidate => candidate.id === id);\n    if (item?.mobileDestination === 'inbox' || isShellInboxTool(id)) {\n      this.managedInboxTool = id;\n    }\n    this.managedMobileDestination = selected\n      ? (item?.mobileDestination ?? shellMobileDestinationForTool(true, id))\n      : 'area';\n    this.managedMobileSheetNavOpen = false;\n    this.dsToolChange.emit(event.detail);\n  };\n\n  private handleManagedPresentationChange = (\n    event: CustomEvent<{ presentation: 'drawer' | 'fullscreen' }>\n  ) => {\n    event.stopPropagation();\n    this.managedToolPresentation = event.detail.presentation;\n    this.toolsFullscreen = event.detail.presentation === 'fullscreen';\n    this.dsPresentationChange.emit(event.detail);\n  };\n\n  private handleManagedHeaderBack = (event: CustomEvent<{ tool: PanelToolsToolId }>) => {\n    event.stopPropagation();\n    this.dsHeaderBack.emit(event.detail);\n  };\n\n  private handleManagedHeaderAction = (\n    event: CustomEvent<{ tool: PanelToolsToolId; id: string }>\n  ) => {\n    event.stopPropagation();\n    this.dsHeaderAction.emit(event.detail);\n  };\n\n  private handleManagedSheetToggle = (event: CustomEvent<boolean>) => {\n    event.stopPropagation();\n    this.managedMobileSheetNavOpen = event.detail;\n  };\n\n  private handleManagedMobileDestination = (\n    event: CustomEvent<MobileBarNavDestinationDetail>\n  ) => {\n    event.stopPropagation();\n    const destination = event.detail.destination;\n    this.managedMobileSheetNavOpen = false;\n    this.managedMobileDestination = destination;\n\n    if (destination === 'area') {\n      this.managedToolsOpen = false;\n      return;\n    }\n\n    const canonicalId =\n      destination === 'inbox'\n        ? resolveAvailableInboxTool(this.managedInboxTool, this.availableInboxTools)\n        : destination;\n    if (!canonicalId) return;\n\n    const item = this.resolvedToolItems.find(\n      candidate =>\n        candidate.id === canonicalId ||\n        (destination !== 'inbox' && candidate.mobileDestination === destination)\n    );\n    if (!item || item.isInactive) return;\n    const id = item.id;\n    this.managedActiveTool = id;\n    this.managedToolsOpen = true;\n    if (isShellInboxTool(id)) this.managedInboxTool = id;\n    this.dsToolChange.emit({ id: id as PanelToolsToolId, selected: true });\n  };\n\n  private handleManagedAreaSelect = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.managedMobileSheetNavOpen = false;\n    this.managedMobileDestination = 'area';\n    this.managedToolsOpen = false;\n    this.dsNavSelect.emit(event.detail);\n  };\n\n  private handleManagedBrowseContext = (event: CustomEvent<NavChromeStyle>) => {\n    event.stopPropagation();\n    this.managedBrowseContext = event.detail;\n    this.dsBrowseContextChange.emit(event.detail);\n  };\n\n  private handleManagedSheetClose = (event: CustomEvent<void>) => {\n    event.stopPropagation();\n    this.managedMobileSheetNavOpen = false;\n  };\n\n  private handleManagedNavFooterAction = (event: CustomEvent<void>) => {\n    event.stopPropagation();\n    this.dsNavFooterAction.emit();\n  };\n\n  private handleManagedNavUserAction = (\n    event: CustomEvent<PanelNavUserActionDetail>\n  ) => {\n    event.stopPropagation();\n    this.dsNavUserAction.emit(event.detail);\n  };\n\n  private get currentArea(): PanelNavItem {\n    const groups = [\n      ...(this.navigation.dashboardGroups ?? []),\n      ...(this.navigation.settingsGroups ?? []),\n      ...this.resolvedNavigationGroups,\n    ];\n    const items = groups.flatMap(group => group.items);\n    const activeId =\n      this.navigation.activeId ||\n      deriveActiveIdFromUrl(\n        this.navigation.currentUrl ?? this.pageChrome.currentUrl ?? '',\n        items\n      );\n    return (\n      items.find(item => item.id === activeId) ??\n      items[0] ?? {\n        id: 'area',\n        icon: 'MapPage',\n        label: this.pageChrome.heading || 'Area',\n      }\n    );\n  }\n\n  private toolDot(id: PanelToolsToolId): boolean {\n    return this.resolvedToolItems.find(item => item.id === id)?.dot ?? false;\n  }\n\n  private syncChrome() {\n    const panelNav = this.el.querySelector('ds-panel-nav') as HTMLElement | null;\n    const bar = this.el.querySelector('ds-bar-nav') as HTMLElement | null;\n    const targets = [this.el, panelNav, bar].filter((el): el is HTMLElement => el !== null);\n\n    const clearLayoutVars = () => {\n      if (panelNav) panelNav.style.removeProperty(SHELL_GRADIENT_POSITION_PANEL_VAR);\n      if (bar) bar.style.removeProperty(SHELL_GRADIENT_POSITION_BAR_VAR);\n    };\n\n    const preset = normalizeShellGradientPreset(this.gradientPreset);\n    if (preset === 'none' || this.resolvedMode === 'mobile') {\n      this.clearGradientPaintVars(targets);\n      clearLayoutVars();\n      return;\n    }\n\n    const viewport = this.resolveViewportDimensions();\n    const panelWidth = this.resolvePanelWidthPx(panelNav);\n\n    const panelPosition = shellGradientPositionPanel();\n    const barPosition = shellGradientPositionBar(panelWidth);\n\n    this.syncChromeLayoutVars(panelNav, bar, panelPosition, barPosition);\n\n    const image = buildShellRadialGradient(preset);\n\n    const size = shellGradientSize({\n      width: viewport.width,\n      height: viewport.height,\n    });\n    const opacity = shellGradientPresetOpacity(preset);\n\n    for (const target of targets) {\n      if (target === this.el) {\n        this.applyGradientVars(target, {\n          [SHELL_GRADIENT_IMAGE_VAR]: image,\n          [SHELL_GRADIENT_SIZE_VAR]: size,\n          [SHELL_GRADIENT_POSITION_PANEL_VAR]: panelPosition,\n          [SHELL_GRADIENT_POSITION_BAR_VAR]: barPosition,\n          [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n        });\n        continue;\n      }\n\n      const isBar = target.tagName.toLowerCase() === 'ds-bar-nav';\n      this.applyGradientVars(target, {\n        [SHELL_GRADIENT_IMAGE_VAR]: image,\n        [SHELL_GRADIENT_SIZE_VAR]: size,\n        [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n        [SHELL_GRADIENT_POSITION_PANEL_VAR]: isBar ? null : panelPosition,\n        [SHELL_GRADIENT_POSITION_BAR_VAR]: isBar ? barPosition : null,\n      });\n    }\n  }\n\n  private renderManagedPanelNav() {\n    const navigation = this.navigation;\n    return (\n      <ds-panel-nav\n        navStyle={this.navStyle}\n        groups={this.resolvedNavigationGroups}\n        breakpoint={SHELL_DESKTOP_BREAKPOINT}\n        routerMode={navigation.routerMode ?? 'event'}\n        activeId={navigation.activeId ?? ''}\n        currentUrl={navigation.currentUrl ?? this.pageChrome.currentUrl ?? ''}\n        storageKey={navigation.storageKey ?? ''}\n        userName={navigation.userName ?? ''}\n        userInitial={navigation.userInitial ?? ''}\n        accountMenuExpanded={navigation.accountMenuExpanded ?? false}\n        dashboardLabel={navigation.dashboardLabel ?? 'Dashboard'}\n        settingsLabel={navigation.settingsLabel ?? 'Settings'}\n        accountLabel={navigation.accountLabel ?? 'Account'}\n        dashboardNavigationLabel={\n          navigation.dashboardNavigationLabel ?? 'Dashboard navigation'\n        }\n        settingsNavigationLabel={\n          navigation.settingsNavigationLabel ?? 'Settings navigation'\n        }\n        navigationItemsLabel={navigation.navigationLabel ?? 'Navigation items'}\n        onDsNavSelect={this.handleManagedNavSelect}\n        onDsNavFooterAction={this.handleManagedNavFooterAction}\n        onDsNavUserAction={this.handleManagedNavUserAction}\n      />\n    );\n  }\n\n  private renderManagedBarNav() {\n    return (\n      <ds-bar-nav\n        navStyle={this.navStyle}\n        tabs={this.pageChrome.tabs ?? []}\n        value={this.pageChrome.value ?? ''}\n        heading={this.pageChrome.routeHeading ?? this.pageChrome.heading}\n        basePath={this.pageChrome.basePath ?? ''}\n        currentUrl={this.pageChrome.currentUrl ?? this.navigation.currentUrl ?? ''}\n        onDsTabChange={this.handleManagedTabChange}\n      />\n    );\n  }\n\n  private renderManagedToolSlots() {\n    const ids = [...new Set(this.resolvedToolItems.map(item => item.id))].sort();\n    return ids.flatMap(id => [\n      <slot key={`tool:${id}`} name={id} slot={id} />,\n      <slot key={`tool-view:${id}`} name={`${id}-view`} slot={`${id}-view`} />,\n    ]);\n  }\n\n  private renderManagedTools() {\n    const tools = this.tools;\n    return (\n      <ds-shell-tools\n        responsiveMode={this.resolvedMode}\n        open={this.managedToolsOpen}\n        activeTool={this.managedActiveTool}\n        presentation={this.managedToolPresentation}\n        fullscreenHeaderMode={tools.fullscreenHeaderMode ?? 'shared'}\n        items={this.resolvedToolItems}\n        headers={tools.headers ?? {}}\n        storageKey={tools.storageKey ?? ''}\n        toolsLabel={tools.toolsLabel ?? 'Tools'}\n        toolShortcutsLabel={tools.toolShortcutsLabel ?? 'Tool shortcuts'}\n        inboxLabel={tools.inboxLabel ?? 'Inbox'}\n        inboxNavigationLabel={tools.inboxNavigationLabel ?? 'Inbox sections'}\n        onDsToolChange={this.handleManagedToolChange}\n        onDsPresentationChange={this.handleManagedPresentationChange}\n        onDsHeaderBack={this.handleManagedHeaderBack}\n        onDsHeaderAction={this.handleManagedHeaderAction}\n      >\n        {this.renderManagedToolSlots()}\n      </ds-shell-tools>\n    );\n  }\n\n  private renderManagedMobileSheetNav() {\n    const navigation = this.navigation;\n    return (\n      <ds-mobile-sheet-nav\n        open={this.managedMobileSheetNavOpen}\n        browseContext={this.managedBrowseContext}\n        dashboardGroups={navigation.dashboardGroups ?? navigation.groups ?? []}\n        settingsGroups={navigation.settingsGroups ?? []}\n        currentUrl={navigation.currentUrl ?? this.pageChrome.currentUrl ?? ''}\n        navigationLabel={navigation.navigationLabel ?? 'Application navigation'}\n        dashboardLabel={navigation.dashboardLabel ?? 'Dashboard'}\n        settingsLabel={navigation.settingsLabel ?? 'Settings'}\n        accountLabel={navigation.accountLabel ?? 'Account'}\n        onDsAreaSelect={this.handleManagedAreaSelect}\n        onDsBrowseContextChange={this.handleManagedBrowseContext}\n        onDsClose={this.handleManagedSheetClose}\n      />\n    );\n  }\n\n  private renderManagedMobileBarNav() {\n    return (\n      <ds-mobile-bar-nav\n        hidden={this.tools.mobileBarHidden ?? false}\n        activeDestination={this.managedMobileDestination}\n        currentArea={this.currentArea}\n        sheetNavExpanded={this.managedMobileSheetNavOpen}\n        searchLabel={this.tools.items?.find(item => item.id === 'search')?.ariaLabel ?? 'Search'}\n        inboxLabel={this.tools.inboxLabel ?? 'Inbox'}\n        messagesLabel={this.tools.items?.find(item => item.id === 'messages')?.ariaLabel ?? 'Messages'}\n        agentsLabel={this.tools.items?.find(item => item.id === 'agents')?.ariaLabel ?? 'Agents'}\n        helpLabel={this.tools.items?.find(item => item.id === 'help')?.ariaLabel ?? 'Help & Support'}\n        searchDot={this.toolDot('search')}\n        inboxDot={\n          this.toolDot('stacks') || this.toolDot('activity')\n        }\n        messagesDot={this.toolDot('messages')}\n        agentsDot={this.toolDot('agents')}\n        onDsSheetNavToggle={this.handleManagedSheetToggle}\n        onDsDestinationChange={this.handleManagedMobileDestination}\n      />\n    );\n  }\n\n  private renderManagedMobileLeading() {\n    if (!this.pageChrome.showBack) {\n      return <slot name=\"page-header-leading\" slot=\"leading\" />;\n    }\n    return [\n      <ds-tooltip\n        slot=\"leading\"\n        label={this.pageChrome.backAriaLabel ?? 'Back'}\n        side=\"bottom\"\n        size=\"sm\"\n      >\n        <ds-button-unfilled\n          variant=\"icon\"\n          icon={this.pageChrome.backIcon ?? 'ChevronLeft'}\n          size=\"md\"\n          aria-label={this.pageChrome.backAriaLabel ?? 'Back'}\n          activeFill={false}\n          hasBorder={false}\n          onDsClick={(event: CustomEvent<MouseEvent>) =>\n            this.dsPageBack.emit(event.detail)\n          }\n        />\n      </ds-tooltip>,\n      <slot name=\"page-header-leading\" slot=\"leading\" />,\n    ];\n  }\n\n  private renderManagedMobileActions() {\n    const actions = this.pageChrome.mobileActions ?? [];\n    return [\n      ...actions.map((action: PanelToolsHeaderAction) => (\n        <ds-tooltip\n          slot=\"trailing\"\n          key={action.id}\n          label={action.ariaLabel}\n          side=\"bottom\"\n          size=\"sm\"\n        >\n          <ds-button-unfilled\n            id={action.triggerId || undefined}\n            variant=\"icon\"\n            icon={action.icon}\n            size=\"md\"\n            aria-label={action.ariaLabel}\n            haspopup={action.haspopup}\n            controls={action.controls}\n            expanded={action.expanded}\n            pressed={action.pressed}\n            isActive={!!action.expanded}\n            isInactive={action.isInactive}\n            activeFill={false}\n            hasBorder={false}\n            onDsClick={() => this.dsPageAction.emit(action.id)}\n          />\n        </ds-tooltip>\n      )),\n      <slot name=\"page-header-trailing\" slot=\"trailing\" />,\n    ];\n  }\n\n  private renderManagedPage() {\n    const page = this.pageChrome;\n    const mobileSections = page.showBack ? [] : (page.tabs ?? []);\n    const barTitleSections: BarTitleSectionItem[] = (page.subsections ?? []).map(item =>\n      'type' in item\n        ? { type: 'divider' }\n        : {\n            id: item.id,\n            label: item.label,\n            isInactive: item.isInactive,\n          }\n    );\n    return (\n      <ds-shell-page\n        responsiveMode={this.resolvedMode}\n        headerCapacity={resolveManagedShellPageCapacity(\n          this.resolvedMode,\n          this.managedToolsOpen\n        )}\n        contentInset={page.contentInset ?? 'default'}\n        contentInsetBlockStart={page.contentInsetBlockStart ?? 'default'}\n        contentInsetBlockStartSize={page.contentInsetBlockStartSize}\n        compactContentInsetBlockStartSize={page.compactContentInsetBlockStartSize}\n        scrollCompaction={page.scrollCompaction ?? true}\n        contentSurface={page.contentSurface ?? 'primary'}\n      >\n        <ds-bar-title\n          slot=\"header\"\n          heading={page.heading ?? ''}\n          description={page.description ?? ''}\n          showBack={page.showBack ?? false}\n          backAriaLabel={page.backAriaLabel ?? 'Back'}\n          backLabel={page.backLabel ?? 'Back'}\n          breadcrumbs={page.breadcrumbs ?? []}\n          breadcrumbAriaLabel={page.breadcrumbAriaLabel ?? 'Breadcrumb'}\n          sections={barTitleSections}\n          value={page.subvalue ?? ''}\n          sectionsAriaLabel={page.subsectionsAriaLabel ?? 'Change page subsection'}\n          primaryAction={page.primaryAction ?? null}\n          actions={page.actions ?? []}\n          actionsAriaLabel={page.actionsAriaLabel ?? 'More page actions'}\n          showDivider={page.showHeaderDivider ?? true}\n          showCompactDivider={page.showCompactHeaderDivider}\n          onDsBack={this.handleManagedPageBack}\n          onDsBreadcrumbSelect={this.handleManagedBreadcrumbSelect}\n          onDsSectionChange={this.handleManagedSubsectionChange}\n          onDsAction={this.handleManagedPageAction}\n        />\n        <ds-mobile-header\n          slot=\"mobile-header\"\n          heading={page.heading ?? ''}\n          headingLevel={page.headingLevel ?? 'h1'}\n          sections={mobileSections}\n          value={page.showBack ? '' : (page.value ?? '')}\n          sectionsAriaLabel={page.sectionsAriaLabel ?? 'Change page section'}\n          subsections={page.subsections ?? []}\n          subvalue={page.subvalue ?? ''}\n          subsectionsAriaLabel={\n            page.subsectionsAriaLabel ?? 'Change page subsection'\n          }\n          tone={page.tone ?? 'default'}\n          onDsSectionChange={this.handleManagedTabChange}\n          onDsSubsectionChange={this.handleManagedSubsectionChange}\n        >\n          {this.renderManagedMobileLeading()}\n          {this.renderManagedMobileActions()}\n        </ds-mobile-header>\n        <slot />\n      </ds-shell-page>\n    );\n  }\n\n  private renderSlottedShell(\n    shellCls: Record<string, boolean>,\n    mobile: boolean,\n    mobileToolActive: boolean,\n    mobileStageBlocked: boolean,\n    fullscreen: boolean\n  ) {\n    return (\n      <Host class={shellCls} responsive-mode={this.resolvedMode}>\n        <div class=\"shell-app__banner\">\n          <slot name=\"banner\" />\n        </div>\n        <div class=\"shell-app__row\">\n          <div class=\"shell-app__chrome\" aria-hidden=\"true\" />\n          <div\n            class=\"shell-app__panel\"\n            aria-hidden={fullscreen ? 'true' : undefined}\n            inert={fullscreen ? true : undefined}\n          >\n            <slot name=\"panel\" />\n          </div>\n          <div class=\"shell-app__main\">\n            <div\n              class=\"shell-app__bar\"\n              aria-hidden={fullscreen ? 'true' : undefined}\n              inert={fullscreen ? true : undefined}\n            >\n              <slot name=\"bar\" />\n            </div>\n            <div\n              class=\"shell-app__tools\"\n              aria-hidden={\n                mobile && (!mobileToolActive || this.mobileSheetNavOpen)\n                  ? 'true'\n                  : undefined\n              }\n              inert={\n                mobile && (!mobileToolActive || this.mobileSheetNavOpen)\n                  ? true\n                  : undefined\n              }\n              hidden={mobile && !mobileToolActive}\n            >\n              <slot name=\"tools\" />\n            </div>\n            <div\n              class=\"shell-app__content ds-focus-ring\"\n              aria-hidden={fullscreen || mobileStageBlocked ? 'true' : undefined}\n              inert={fullscreen || mobileStageBlocked ? true : undefined}\n              tabIndex={0}\n            >\n              <slot />\n            </div>\n            <div\n              class=\"shell-app__mobile-sheet-nav\"\n              hidden={!mobile || !this.mobileSheetNavOpen}\n              aria-hidden={\n                mobile && this.mobileSheetNavOpen ? undefined : 'true'\n              }\n              inert={mobile && this.mobileSheetNavOpen ? undefined : true}\n            >\n              <slot name=\"mobile-sheet-nav\" />\n            </div>\n            <div class=\"shell-app__mobile-bar-nav\" hidden={!mobile}>\n              <slot name=\"mobile-bar-nav\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  render() {\n    const chromeActive = this.chromeLayerActive();\n    const mobile = this.resolvedMode === 'mobile';\n    const mobileToolActive = mobile && this.effectiveMobileDestination !== 'area';\n    const mobileStageBlocked =\n      mobile && (mobileToolActive || this.effectiveMobileSheetNavOpen);\n    const fullscreen = !mobile && this.toolsFullscreen;\n    const shellCls: Record<string, boolean> = {\n      'shell-app': true,\n      'shell-app--gradient': chromeActive,\n      [`shell-app--${this.navStyle}`]: true,\n      [`shell-app--${this.resolvedMode}`]: true,\n      'shell-app--tools-fullscreen': fullscreen,\n      'shell-app--mobile-tool-active': mobileToolActive,\n      'shell-app--mobile-sheet-nav-open':\n        mobile && this.effectiveMobileSheetNavOpen,\n      'shell-app--managed': this.managed,\n      'shell-app--slotted': !this.managed,\n    };\n\n    if (!this.managed) {\n      return this.renderSlottedShell(\n        shellCls,\n        mobile,\n        mobileToolActive,\n        mobileStageBlocked,\n        fullscreen\n      );\n    }\n\n    return (\n      <Host class={shellCls} responsive-mode={this.resolvedMode}>\n        <div class=\"shell-app__banner\">\n          <slot name=\"banner\" />\n        </div>\n        <div class=\"shell-app__row\">\n          <div class=\"shell-app__chrome\" aria-hidden=\"true\" />\n          <div class=\"shell-app__panel\" aria-hidden={fullscreen ? 'true' : undefined} inert={fullscreen ? true : undefined}>\n            {this.renderManagedPanelNav()}\n          </div>\n          <div class=\"shell-app__main\">\n            <div class=\"shell-app__bar\" aria-hidden={fullscreen ? 'true' : undefined} inert={fullscreen ? true : undefined}>\n              {this.renderManagedBarNav()}\n            </div>\n            <div\n              class=\"shell-app__tools\"\n              aria-hidden={\n                mobile && (!mobileToolActive || this.effectiveMobileSheetNavOpen)\n                  ? 'true'\n                  : undefined\n              }\n              inert={\n                mobile && (!mobileToolActive || this.effectiveMobileSheetNavOpen)\n                  ? true\n                  : undefined\n              }\n              hidden={mobile && !mobileToolActive}\n            >\n              {this.renderManagedTools()}\n            </div>\n            <div\n              class=\"shell-app__content ds-focus-ring\"\n              aria-hidden={fullscreen || mobileStageBlocked ? 'true' : undefined}\n              inert={fullscreen || mobileStageBlocked ? true : undefined}\n              tabIndex={0}\n            >\n              {this.renderManagedPage()}\n            </div>\n            <div\n              class=\"shell-app__mobile-sheet-nav\"\n              hidden={!mobile || !this.effectiveMobileSheetNavOpen}\n              aria-hidden={\n                mobile && this.effectiveMobileSheetNavOpen ? undefined : 'true'\n              }\n              inert={mobile && this.effectiveMobileSheetNavOpen ? undefined : true}\n            >\n              {this.renderManagedMobileSheetNav()}\n            </div>\n            <div class=\"shell-app__mobile-bar-nav\" hidden={!mobile}>\n              {this.renderManagedMobileBarNav()}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Watch,\n  Listen,\n  Method,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport {\n  isEditableShortcutTarget,\n  resolveShellShortcut,\n} from '../../shell/shell-shortcuts';\nimport type {\n  PanelToolsToolId,\n  PanelToolsHeaderAction,\n} from '../PanelTools/panel-tools-types';\nimport { PANEL_TOOLS_DEFAULT_ITEMS } from '../PanelTools/panel-tools-types';\nimport type { BarTitleSectionItem } from '../BarTitle/bar-title-types';\nimport type { BreadcrumbSelectDetail } from '../Breadcrumb/breadcrumb-types';\nimport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  normalizeShellGradientPreset,\n  type ShellGradientPreset,\n} from '../../shell/shell-gradient-presets';\nimport {\n  CHROME_TRANSITION_END,\n  CHROME_TRANSITION_START,\n  ChromeTransitionDepth,\n  createRafCoalescer,\n  readChromeTransitionPhase,\n  readChromeTransitionSource,\n} from '../../shell/chrome-transition';\nimport {\n  isPanelNavCollapsed,\n  panelWidthPxFromTokens,\n  readPanelNavWidthTokens,\n  type PanelNavWidthTokens,\n} from '../../shell/shell-chrome-metrics';\nimport {\n  SHELL_GRADIENT_IMAGE_VAR,\n  SHELL_GRADIENT_OPACITY_VAR,\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n  SHELL_GRADIENT_SIZE_VAR,\n  buildShellRadialGradient,\n  readShellViewportDimensions,\n  shellGradientPositionBar,\n  shellGradientPositionPanel,\n  shellGradientPresetOpacity,\n  shellGradientSize,\n} from '../../shell/shell-gradient';\nimport {\n  isShellInboxTool,\n  resolveAvailableInboxTool,\n  resolveManagedShellPageCapacity,\n  resolveShellResponsiveMode,\n  SHELL_DESKTOP_BREAKPOINT,\n  shellMobileDestinationForTool,\n  type MobileDestination,\n  type ShellInboxToolId,\n  type ShellResponsiveMode,\n} from '../../shell/shell-responsive';\nimport { deriveActiveIdFromUrl } from '../PanelNav/panel-nav-utils';\nimport type { PanelNavItem } from '../PanelNav/panel-nav-types';\nimport type { PanelNavUserActionDetail } from '../PanelNav/panel-nav-types';\nimport type { MobileBarNavDestinationDetail } from '../MobileBarNav/mobile-bar-nav-types';\nimport type {\n  ShellAppComposition,\n  ShellNavigationConfig,\n  ShellPageChromeConfig,\n  ShellToolsConfig,\n} from './shell-app-types';\n\n@Component({\n  tag: 'ds-shell-app',\n  styleUrl: 'ShellApp.css',\n  scoped: true,\n})\nexport class ShellApp {\n  private static readonly FOREGROUND_REFRESH_MS = 50;\n\n  /** Managed renders the complete responsive chrome; slotted exposes the advanced composition. */\n  @Prop({ reflect: true }) composition: ShellAppComposition = 'managed';\n\n  /** Router-owned navigation data used by managed composition. */\n  @Prop() navigation: ShellNavigationConfig = {};\n\n  /** Route-owned page title and section data used by managed composition. */\n  @Prop({ attribute: 'page-chrome' }) pageChrome: ShellPageChromeConfig = {};\n\n  /** Product-owned global tool definitions used by managed composition. */\n  @Prop() tools: ShellToolsConfig = {};\n\n  /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n  /**\n   * Shell chrome wash preset. `none` renders solid chrome; the remaining\n   * presets use token-based washes that adapt to the active color theme.\n   */\n  @Prop({ attribute: 'gradient-preset', reflect: true }) gradientPreset: ShellGradientPreset =\n    DEFAULT_SHELL_GRADIENT_PRESET;\n\n  /** When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K, A, S, M, N, and / toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native. */\n  @Prop({ attribute: 'shortcuts-enabled' }) shortcutsEnabled: boolean = true;\n\n  /** Controlled mobile surface shown above the persistent bottom bar. */\n  @Prop({ attribute: 'mobile-destination' })\n  mobileDestination: MobileDestination = 'area';\n\n  /** Controlled full-stage Mobile Sheet Nav state. */\n  @Prop({ attribute: 'mobile-sheet-nav-open' })\n  mobileSheetNavOpen: boolean = false;\n\n  /** Emitted after crossing the fixed 768px or 1200px shell boundaries. */\n  @Event() dsResponsiveModeChange!: EventEmitter<{ mode: ShellResponsiveMode }>;\n\n  /** Managed primary-navigation intent; the application router performs navigation. */\n  @Event() dsNavSelect!: EventEmitter<string>;\n\n  /** Managed desktop BarNav or mobile section-selection intent. */\n  @Event() dsTabChange!: EventEmitter<string>;\n\n  /** Managed page-subsection intent from BarTitle or MobileHeader. */\n  @Event() dsSubsectionChange!: EventEmitter<string>;\n\n  /** Managed page-level Back intent. */\n  @Event() dsPageBack!: EventEmitter<MouseEvent>;\n\n  /** Managed breadcrumb intent from BarTitle. */\n  @Event({ cancelable: true })\n  dsBreadcrumbSelect!: EventEmitter<BreadcrumbSelectDetail>;\n\n  /** Managed page action intent from BarTitle. */\n  @Event() dsPageAction!: EventEmitter<string>;\n\n  /** Managed tools selection state. */\n  @Event() dsToolChange!: EventEmitter<{ id: PanelToolsToolId; selected: boolean }>;\n\n  /** Managed tool-header Back intent. */\n  @Event() dsHeaderBack!: EventEmitter<{ tool: PanelToolsToolId }>;\n\n  /** Managed tool-header action intent. */\n  @Event() dsHeaderAction!: EventEmitter<{ tool: PanelToolsToolId; id: string }>;\n\n  /** Managed drawer/fullscreen presentation state. */\n  @Event() dsPresentationChange!: EventEmitter<{ presentation: 'drawer' | 'fullscreen' }>;\n\n  /** Managed mobile Dashboard/Settings browsing intent. */\n  @Event() dsBrowseContextChange!: EventEmitter<NavChromeStyle>;\n\n  /** Managed account-footer action intent. */\n  @Event() dsNavFooterAction!: EventEmitter<void>;\n\n  /** Managed user/account trigger intent. */\n  @Event() dsNavUserAction!: EventEmitter<PanelNavUserActionDetail>;\n\n  @Element() el!: HTMLElement;\n  @State() private toolsFullscreen = false;\n  @State() private resolvedMode: ShellResponsiveMode = 'desktop';\n  @State() private managedToolsOpen = false;\n  /** Keep page capacity aligned with the drawer until its closing clip reaches zero. */\n  @State() private managedToolsClosing = false;\n  @State() private managedActiveTool: PanelToolsToolId | '' = '';\n  @State() private managedToolPresentation: 'drawer' | 'fullscreen' = 'drawer';\n  @State() private managedMobileDestination: MobileDestination = 'area';\n  @State() private managedMobileSheetNavOpen = false;\n  @State() private managedInboxTool: ShellInboxToolId | '' = '';\n  @State() private managedBrowseContext: NavChromeStyle = 'dashboard';\n\n  private resizeObserver: ResizeObserver | null = null;\n  private hasLoaded = false;\n  private foregroundRefreshTimer: number | null = null;\n  private readonly panelNavTransition = new ChromeTransitionDepth();\n  private readonly chromeSyncCoalescer = createRafCoalescer(() => this.syncChrome());\n  private panelWidthTokens: PanelNavWidthTokens = { expandedPx: 0, collapsedPx: 0 };\n  private cachedViewportWidth = 0;\n  private cachedViewportHeight = 0;\n  private onWindowResize = () => {\n    this.updateResponsiveMode();\n    if (this.panelNavTransition.isActive) return;\n    this.scheduleChromeSync();\n  };\n  private onVisualViewportChange = () => {\n    if (this.panelNavTransition.isActive) return;\n    this.scheduleChromeSync();\n  };\n\n  private get managed(): boolean {\n    return this.composition === 'managed';\n  }\n\n  private get effectiveMobileDestination(): MobileDestination {\n    return this.managed ? this.managedMobileDestination : this.mobileDestination;\n  }\n\n  private get effectiveMobileSheetNavOpen(): boolean {\n    return this.managed ? this.managedMobileSheetNavOpen : this.mobileSheetNavOpen;\n  }\n\n  private get resolvedNavigationGroups() {\n    if (this.navigation.groups?.length) return this.navigation.groups;\n    return this.managedBrowseContext === 'settings'\n      ? (this.navigation.settingsGroups ?? [])\n      : (this.navigation.dashboardGroups ?? []);\n  }\n\n  private get resolvedToolItems() {\n    return this.tools.items ?? PANEL_TOOLS_DEFAULT_ITEMS;\n  }\n\n  private get availableInboxTools(): ShellInboxToolId[] {\n    return this.resolvedToolItems\n      .filter(\n        item =>\n          !item.isInactive &&\n          (item.mobileDestination === 'inbox' || isShellInboxTool(item.id))\n      )\n      .map(item => item.id as ShellInboxToolId);\n  }\n\n  componentWillLoad() {\n    if (typeof window !== 'undefined') {\n      this.resolvedMode = resolveShellResponsiveMode(window.innerWidth);\n    }\n    this.managedBrowseContext = this.navigation.browseContext ?? this.navStyle;\n    this.managedMobileDestination = this.mobileDestination;\n    this.managedMobileSheetNavOpen = this.mobileSheetNavOpen;\n    this.managedInboxTool = resolveAvailableInboxTool('', this.availableInboxTools);\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.syncSlottedNavStyle();\n    this.syncSlottedMobileState();\n    this.connectMetricsObserver();\n    this.connectViewportListeners();\n    this.connectPageLifecycleListeners();\n    this.el.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n    this.el.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n    requestAnimationFrame(() => {\n      this.cachePanelWidthTokens();\n      this.scheduleChromeSync();\n    });\n    const tools = this.el.querySelector('ds-shell-tools, ds-panel-tools');\n    this.toolsFullscreen = tools?.getAttribute('presentation') === 'fullscreen';\n  }\n\n  @Listen('dsPresentationChange')\n  handleToolsPresentation(event: CustomEvent<{ presentation?: string }>) {\n    this.toolsFullscreen = event.detail?.presentation === 'fullscreen';\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.disconnectViewportListeners();\n    this.disconnectPageLifecycleListeners();\n    this.cancelForegroundRefresh();\n    this.chromeSyncCoalescer.cancel();\n    this.el.removeEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n    this.el.removeEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n  }\n\n  @Watch('navStyle')\n  @Watch('gradientPreset')\n  onShellPropsChange() {\n    this.syncSlottedNavStyle();\n    this.scheduleChromeSync();\n  }\n\n  @Watch('navigation')\n  handleNavigationChange() {\n    this.managedBrowseContext = this.navigation.browseContext ?? this.navStyle;\n  }\n\n  @Watch('tools')\n  handleToolsChange() {\n    if (\n      this.managedActiveTool &&\n      !this.resolvedToolItems.some(item => item.id === this.managedActiveTool)\n    ) {\n      this.managedToolsOpen = false;\n      this.managedActiveTool = '';\n      this.managedMobileDestination = 'area';\n    }\n    this.managedInboxTool = resolveAvailableInboxTool(\n      this.managedInboxTool,\n      this.availableInboxTools\n    );\n  }\n\n  @Watch('mobileDestination')\n  @Watch('mobileSheetNavOpen')\n  onMobileStateChange(_next: unknown, previous: unknown) {\n    if (this.managed) {\n      this.managedMobileDestination = this.mobileDestination;\n      this.managedMobileSheetNavOpen = this.mobileSheetNavOpen;\n    }\n    this.syncSlottedMobileState();\n    if (\n      previous === true &&\n      !this.effectiveMobileSheetNavOpen &&\n      this.resolvedMode === 'mobile'\n    ) {\n      requestAnimationFrame(() => {\n        const bar = this.el.querySelector('ds-mobile-bar-nav') as\n          | (HTMLElement & {\n              focusDestination?: (\n                destination: MobileDestination | 'sheet-nav'\n              ) => Promise<void>;\n            })\n          | null;\n        const activeElement = document.activeElement;\n        if (activeElement instanceof HTMLElement && bar?.contains(activeElement)) return;\n        void bar?.focusDestination?.('sheet-nav');\n      });\n    }\n  }\n\n  private updateResponsiveMode() {\n    if (typeof window === 'undefined') return;\n    const next = resolveShellResponsiveMode(window.innerWidth);\n    if (next === this.resolvedMode) return;\n    this.resolvedMode = next;\n    this.syncSlottedMobileState();\n    this.scheduleChromeSync();\n    if (this.hasLoaded) this.dsResponsiveModeChange.emit({ mode: next });\n  }\n\n  private onChromeTransitionStart = (event: Event) => {\n    const source = readChromeTransitionSource(event);\n    if (source === 'panel-tools') {\n      if (readChromeTransitionPhase(event) === 'closing') {\n        this.managedToolsClosing = true;\n      }\n      return;\n    }\n    if (source !== 'panel-nav') return;\n\n    this.panelNavTransition.enter();\n    const viewport = readShellViewportDimensions();\n    this.cachedViewportWidth = viewport.width;\n    this.cachedViewportHeight = viewport.height;\n    this.syncChrome();\n  };\n\n  private onChromeTransitionEnd = (event: Event) => {\n    const source = readChromeTransitionSource(event);\n    if (source === 'panel-tools') {\n      this.managedToolsClosing = false;\n      return;\n    }\n    if (source !== 'panel-nav') return;\n\n    this.panelNavTransition.exit();\n    if (!this.panelNavTransition.isActive) {\n      this.scheduleChromeSync();\n    }\n  };\n\n  /** Coalesce ResizeObserver bursts to one layout read per frame. */\n  private scheduleChromeSync() {\n    this.chromeSyncCoalescer.schedule();\n  }\n\n  private syncSlottedNavStyle() {\n    const panel = this.el.querySelector('ds-panel-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n    const bar = this.el.querySelector('ds-bar-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n    if (panel) {\n      panel.setAttribute('nav-style', this.navStyle);\n      panel.navStyle = this.navStyle;\n    }\n    if (bar) {\n      bar.setAttribute('nav-style', this.navStyle);\n      bar.navStyle = this.navStyle;\n    }\n  }\n\n  private syncSlottedMobileState() {\n    const tools = this.el.querySelector('ds-shell-tools') as\n      | (HTMLElement & { responsiveMode: ShellResponsiveMode })\n      | null;\n    const bar = this.el.querySelector('ds-mobile-bar-nav') as\n      | (HTMLElement & {\n          activeDestination: MobileDestination;\n          sheetNavExpanded: boolean;\n        })\n      | null;\n    const sheetNav = this.el.querySelector('ds-mobile-sheet-nav') as\n      | (HTMLElement & { open: boolean })\n      | null;\n\n    if (tools) {\n      tools.setAttribute('responsive-mode', this.resolvedMode);\n      tools.responsiveMode = this.resolvedMode;\n    }\n    if (bar) {\n      bar.activeDestination = this.effectiveMobileDestination;\n      bar.sheetNavExpanded = this.effectiveMobileSheetNavOpen;\n    }\n    if (sheetNav) {\n      sheetNav.open = this.effectiveMobileSheetNavOpen;\n    }\n  }\n\n  private connectMetricsObserver() {\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.panelNavTransition.isActive) return;\n      this.scheduleChromeSync();\n    });\n    this.resizeObserver.observe(this.el);\n    const panelWrap = this.el.querySelector('.shell-app__panel');\n    if (panelWrap) this.resizeObserver.observe(panelWrap);\n  }\n\n  private connectViewportListeners() {\n    if (typeof window === 'undefined') return;\n\n    window.addEventListener('resize', this.onWindowResize, { passive: true });\n\n    const visual = window.visualViewport;\n    if (visual) {\n      visual.addEventListener('resize', this.onVisualViewportChange, { passive: true });\n      visual.addEventListener('scroll', this.onVisualViewportChange, { passive: true });\n    }\n  }\n\n  private disconnectViewportListeners() {\n    if (typeof window === 'undefined') return;\n\n    window.removeEventListener('resize', this.onWindowResize);\n\n    const visual = window.visualViewport;\n    if (visual) {\n      visual.removeEventListener('resize', this.onVisualViewportChange);\n      visual.removeEventListener('scroll', this.onVisualViewportChange);\n    }\n  }\n\n  private connectPageLifecycleListeners() {\n    if (typeof window === 'undefined' || typeof document === 'undefined') return;\n    document.addEventListener('visibilitychange', this.onDocumentVisibilityChange);\n    window.addEventListener('pageshow', this.onPageShow);\n  }\n\n  private disconnectPageLifecycleListeners() {\n    if (typeof window === 'undefined' || typeof document === 'undefined') return;\n    document.removeEventListener('visibilitychange', this.onDocumentVisibilityChange);\n    window.removeEventListener('pageshow', this.onPageShow);\n  }\n\n  private onDocumentVisibilityChange = () => {\n    if (!document.hidden) this.refreshAfterForegroundRestore();\n  };\n\n  private onPageShow = (event: PageTransitionEvent) => {\n    if (event.persisted) this.refreshAfterForegroundRestore();\n  };\n\n  private cancelForegroundRefresh() {\n    if (this.foregroundRefreshTimer !== null) {\n      window.clearTimeout(this.foregroundRefreshTimer);\n      this.foregroundRefreshTimer = null;\n    }\n    this.el.classList.remove('shell-app--foreground-refresh');\n  }\n\n  private refreshAfterForegroundRestore() {\n    this.updateResponsiveMode();\n    this.syncSlottedMobileState();\n    this.scheduleChromeSync();\n\n    if (this.resolvedMode !== 'mobile') return;\n\n    /*\n     * Mobile WebKit can restore a live, correctly sized DOM without repainting\n     * its suspended shell layer. Re-promote the complete mobile stage for one\n     * painted frame; routed and tool owners remain mounted and keep their state.\n     */\n    this.cancelForegroundRefresh();\n    this.el.classList.add('shell-app--foreground-refresh');\n    void this.el.offsetHeight;\n    // A short timer spans a real compositor commit; resumed WebKit may coalesce\n    // nested animation frames before presenting either one.\n    this.foregroundRefreshTimer = window.setTimeout(() => {\n      this.foregroundRefreshTimer = null;\n      this.el.classList.remove('shell-app--foreground-refresh');\n      // WebKit otherwise may keep presenting the retired composite layer.\n      void this.el.querySelector<HTMLElement>('.shell-app__main')?.offsetHeight;\n    }, ShellApp.FOREGROUND_REFRESH_MS);\n  }\n\n  private cachePanelWidthTokens() {\n    const navRoot = this.el.querySelector('ds-panel-nav .panel-nav') as HTMLElement | null;\n    if (!navRoot) return;\n    this.panelWidthTokens = readPanelNavWidthTokens(navRoot);\n  }\n\n  private applyGradientVars(target: HTMLElement, vars: Record<string, string | null>) {\n    const style = target.style;\n    for (const [name, value] of Object.entries(vars)) {\n      if (value === null) style.removeProperty(name);\n      else style.setProperty(name, value);\n    }\n  }\n\n  private clearGradientPaintVars(targets: HTMLElement[]) {\n    const keys = [\n      SHELL_GRADIENT_IMAGE_VAR,\n      SHELL_GRADIENT_SIZE_VAR,\n      SHELL_GRADIENT_OPACITY_VAR,\n    ];\n    for (const target of targets) {\n      for (const key of keys) target.style.removeProperty(key);\n    }\n  }\n\n  /** Panel/bar wash offsets for scroll fades and badge rings. */\n  private syncChromeLayoutVars(\n    panel: HTMLElement | null,\n    bar: HTMLElement | null,\n    panelPosition: string,\n    barPosition: string,\n  ) {\n    if (panel) {\n      panel.style.setProperty(SHELL_GRADIENT_POSITION_PANEL_VAR, panelPosition);\n    }\n    if (bar) {\n      bar.style.setProperty(SHELL_GRADIENT_POSITION_BAR_VAR, barPosition);\n    }\n  }\n\n  private resolvePanelWidthPx(panelNav: HTMLElement | null): number {\n    const navRoot = panelNav?.querySelector('.panel-nav') as HTMLElement | null;\n\n    if (this.panelNavTransition.isActive && this.panelWidthTokens.expandedPx > 0) {\n      const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n      return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n    }\n\n    const panelWrap = this.el.querySelector('.shell-app__panel') as HTMLElement | null;\n    const measured = panelWrap?.getBoundingClientRect().width ?? 0;\n    if (measured > 0) return measured;\n\n    if (this.panelWidthTokens.expandedPx > 0) {\n      const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n      return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n    }\n\n    return 0;\n  }\n\n  /** Fixed-attachment wash/grid size — always the viewport, never the shell element box. */\n  private resolveViewportDimensions(): { width: number; height: number } {\n    if (this.panelNavTransition.isActive && this.cachedViewportWidth > 0) {\n      return {\n        width: this.cachedViewportWidth,\n        height: this.cachedViewportHeight,\n      };\n    }\n\n    return readShellViewportDimensions();\n  }\n\n  private chromeLayerActive(): boolean {\n    return (\n      this.resolvedMode !== 'mobile' &&\n      normalizeShellGradientPreset(this.gradientPreset) !== 'none'\n    );\n  }\n\n  @Listen('keydown', { target: 'window', capture: true })\n  handleWindowKeyDown(e: KeyboardEvent) {\n    if (!this.shortcutsEnabled) return;\n    if (isEditableShortcutTarget(e.target)) return;\n\n    const action = resolveShellShortcut(e);\n    if (!action) return;\n\n    e.preventDefault();\n\n    const panel = this.el.querySelector('ds-panel-nav') as HTMLDsPanelNavElement | null;\n    const tools = this.el.querySelector('ds-shell-tools, ds-panel-tools') as\n      | (HTMLElement & {\n          closeDrawer?: () => Promise<void>;\n          activateTool?: (id: PanelToolsToolId) => Promise<void>;\n        })\n      | null;\n\n    if (action === 'toggle-panel-nav') {\n      void panel?.toggleCollapsed();\n      return;\n    }\n\n    if (action === 'close-panel-tools') {\n      void tools?.closeDrawer?.();\n      return;\n    }\n\n    if (action.startsWith('open-tool:') && tools) {\n      const toolId = action.slice('open-tool:'.length) as PanelToolsToolId;\n      void tools.activateTool?.(toolId);\n    }\n  }\n\n  /** Open or toggle a managed global tool from application-owned UI. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    const tools = this.el.querySelector('ds-shell-tools, ds-panel-tools') as\n      | (HTMLElement & { activateTool?: (tool: PanelToolsToolId) => Promise<void> })\n      | null;\n    await tools?.activateTool?.(id);\n  }\n\n  /** Close whichever managed global surface is currently visible. */\n  @Method()\n  async closeGlobalSurface() {\n    if (this.managedMobileSheetNavOpen) {\n      this.managedMobileSheetNavOpen = false;\n      return;\n    }\n    const tools = this.el.querySelector('ds-shell-tools, ds-panel-tools') as\n      | (HTMLElement & { closeDrawer?: () => Promise<void> })\n      | null;\n    await tools?.closeDrawer?.();\n  }\n\n  /** Request drawer or fullscreen presentation for the active managed tool. */\n  @Method()\n  async setToolPresentation(presentation: 'drawer' | 'fullscreen') {\n    this.managedToolPresentation = presentation;\n    this.toolsFullscreen = presentation === 'fullscreen';\n  }\n\n  private handleManagedNavSelect = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsNavSelect.emit(event.detail);\n  };\n\n  private handleManagedTabChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsTabChange.emit(event.detail);\n  };\n\n  private handleManagedPageBack = (event: CustomEvent<MouseEvent>) => {\n    event.stopPropagation();\n    this.dsPageBack.emit(event.detail);\n  };\n\n  private handleManagedBreadcrumbSelect = (\n    event: CustomEvent<BreadcrumbSelectDetail>\n  ) => {\n    event.stopPropagation();\n    const forwarded = this.dsBreadcrumbSelect.emit(event.detail);\n    if (forwarded.defaultPrevented) event.preventDefault();\n  };\n\n  private handleManagedSubsectionChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsSubsectionChange.emit(event.detail);\n  };\n\n  private handleManagedPageAction = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsPageAction.emit(event.detail);\n  };\n\n  private handleManagedToolChange = (\n    event: CustomEvent<{ id: PanelToolsToolId; selected: boolean }>\n  ) => {\n    event.stopPropagation();\n    const { id, selected } = event.detail;\n    this.managedActiveTool = id;\n    this.managedToolsOpen = selected;\n    const item = this.resolvedToolItems.find(candidate => candidate.id === id);\n    if (item?.mobileDestination === 'inbox' || isShellInboxTool(id)) {\n      this.managedInboxTool = id;\n    }\n    this.managedMobileDestination = selected\n      ? (item?.mobileDestination ?? shellMobileDestinationForTool(true, id))\n      : 'area';\n    this.managedMobileSheetNavOpen = false;\n    this.dsToolChange.emit(event.detail);\n  };\n\n  private handleManagedPresentationChange = (\n    event: CustomEvent<{ presentation: 'drawer' | 'fullscreen' }>\n  ) => {\n    event.stopPropagation();\n    this.managedToolPresentation = event.detail.presentation;\n    this.toolsFullscreen = event.detail.presentation === 'fullscreen';\n    this.dsPresentationChange.emit(event.detail);\n  };\n\n  private handleManagedHeaderBack = (event: CustomEvent<{ tool: PanelToolsToolId }>) => {\n    event.stopPropagation();\n    this.dsHeaderBack.emit(event.detail);\n  };\n\n  private handleManagedHeaderAction = (\n    event: CustomEvent<{ tool: PanelToolsToolId; id: string }>\n  ) => {\n    event.stopPropagation();\n    this.dsHeaderAction.emit(event.detail);\n  };\n\n  private handleManagedSheetToggle = (event: CustomEvent<boolean>) => {\n    event.stopPropagation();\n    this.managedMobileSheetNavOpen = event.detail;\n  };\n\n  private handleManagedMobileDestination = (\n    event: CustomEvent<MobileBarNavDestinationDetail>\n  ) => {\n    event.stopPropagation();\n    const destination = event.detail.destination;\n    this.managedMobileSheetNavOpen = false;\n    this.managedMobileDestination = destination;\n\n    if (destination === 'area') {\n      this.managedToolsOpen = false;\n      return;\n    }\n\n    const canonicalId =\n      destination === 'inbox'\n        ? resolveAvailableInboxTool(this.managedInboxTool, this.availableInboxTools)\n        : destination;\n    if (!canonicalId) return;\n\n    const item = this.resolvedToolItems.find(\n      candidate =>\n        candidate.id === canonicalId ||\n        (destination !== 'inbox' && candidate.mobileDestination === destination)\n    );\n    if (!item || item.isInactive) return;\n    const id = item.id;\n    this.managedActiveTool = id;\n    this.managedToolsOpen = true;\n    if (isShellInboxTool(id)) this.managedInboxTool = id;\n    this.dsToolChange.emit({ id: id as PanelToolsToolId, selected: true });\n  };\n\n  private handleManagedAreaSelect = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.managedMobileSheetNavOpen = false;\n    this.managedMobileDestination = 'area';\n    this.managedToolsOpen = false;\n    this.dsNavSelect.emit(event.detail);\n  };\n\n  private handleManagedBrowseContext = (event: CustomEvent<NavChromeStyle>) => {\n    event.stopPropagation();\n    this.managedBrowseContext = event.detail;\n    this.dsBrowseContextChange.emit(event.detail);\n  };\n\n  private handleManagedSheetClose = (event: CustomEvent<void>) => {\n    event.stopPropagation();\n    this.managedMobileSheetNavOpen = false;\n  };\n\n  private handleManagedNavFooterAction = (event: CustomEvent<void>) => {\n    event.stopPropagation();\n    this.dsNavFooterAction.emit();\n  };\n\n  private handleManagedNavUserAction = (\n    event: CustomEvent<PanelNavUserActionDetail>\n  ) => {\n    event.stopPropagation();\n    this.dsNavUserAction.emit(event.detail);\n  };\n\n  private get currentArea(): PanelNavItem {\n    const groups = [\n      ...(this.navigation.dashboardGroups ?? []),\n      ...(this.navigation.settingsGroups ?? []),\n      ...this.resolvedNavigationGroups,\n    ];\n    const items = groups.flatMap(group => group.items);\n    const activeId =\n      this.navigation.activeId ||\n      deriveActiveIdFromUrl(\n        this.navigation.currentUrl ?? this.pageChrome.currentUrl ?? '',\n        items\n      );\n    return (\n      items.find(item => item.id === activeId) ??\n      items[0] ?? {\n        id: 'area',\n        icon: 'MapPage',\n        label: this.pageChrome.heading || 'Area',\n      }\n    );\n  }\n\n  private toolDot(id: PanelToolsToolId): boolean {\n    return this.resolvedToolItems.find(item => item.id === id)?.dot ?? false;\n  }\n\n  private syncChrome() {\n    const panelNav = this.el.querySelector('ds-panel-nav') as HTMLElement | null;\n    const bar = this.el.querySelector('ds-bar-nav') as HTMLElement | null;\n    const targets = [this.el, panelNav, bar].filter((el): el is HTMLElement => el !== null);\n\n    const clearLayoutVars = () => {\n      if (panelNav) panelNav.style.removeProperty(SHELL_GRADIENT_POSITION_PANEL_VAR);\n      if (bar) bar.style.removeProperty(SHELL_GRADIENT_POSITION_BAR_VAR);\n    };\n\n    const preset = normalizeShellGradientPreset(this.gradientPreset);\n    if (preset === 'none' || this.resolvedMode === 'mobile') {\n      this.clearGradientPaintVars(targets);\n      clearLayoutVars();\n      return;\n    }\n\n    const viewport = this.resolveViewportDimensions();\n    const panelWidth = this.resolvePanelWidthPx(panelNav);\n\n    const panelPosition = shellGradientPositionPanel();\n    const barPosition = shellGradientPositionBar(panelWidth);\n\n    this.syncChromeLayoutVars(panelNav, bar, panelPosition, barPosition);\n\n    const image = buildShellRadialGradient(preset);\n\n    const size = shellGradientSize({\n      width: viewport.width,\n      height: viewport.height,\n    });\n    const opacity = shellGradientPresetOpacity(preset);\n\n    for (const target of targets) {\n      if (target === this.el) {\n        this.applyGradientVars(target, {\n          [SHELL_GRADIENT_IMAGE_VAR]: image,\n          [SHELL_GRADIENT_SIZE_VAR]: size,\n          [SHELL_GRADIENT_POSITION_PANEL_VAR]: panelPosition,\n          [SHELL_GRADIENT_POSITION_BAR_VAR]: barPosition,\n          [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n        });\n        continue;\n      }\n\n      const isBar = target.tagName.toLowerCase() === 'ds-bar-nav';\n      this.applyGradientVars(target, {\n        [SHELL_GRADIENT_IMAGE_VAR]: image,\n        [SHELL_GRADIENT_SIZE_VAR]: size,\n        [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n        [SHELL_GRADIENT_POSITION_PANEL_VAR]: isBar ? null : panelPosition,\n        [SHELL_GRADIENT_POSITION_BAR_VAR]: isBar ? barPosition : null,\n      });\n    }\n  }\n\n  private renderManagedPanelNav() {\n    const navigation = this.navigation;\n    return (\n      <ds-panel-nav\n        navStyle={this.navStyle}\n        groups={this.resolvedNavigationGroups}\n        breakpoint={SHELL_DESKTOP_BREAKPOINT}\n        routerMode={navigation.routerMode ?? 'event'}\n        activeId={navigation.activeId ?? ''}\n        currentUrl={navigation.currentUrl ?? this.pageChrome.currentUrl ?? ''}\n        storageKey={navigation.storageKey ?? ''}\n        userName={navigation.userName ?? ''}\n        userInitial={navigation.userInitial ?? ''}\n        accountMenuExpanded={navigation.accountMenuExpanded ?? false}\n        dashboardLabel={navigation.dashboardLabel ?? 'Dashboard'}\n        settingsLabel={navigation.settingsLabel ?? 'Settings'}\n        accountLabel={navigation.accountLabel ?? 'Account'}\n        dashboardNavigationLabel={\n          navigation.dashboardNavigationLabel ?? 'Dashboard navigation'\n        }\n        settingsNavigationLabel={\n          navigation.settingsNavigationLabel ?? 'Settings navigation'\n        }\n        navigationItemsLabel={navigation.navigationLabel ?? 'Navigation items'}\n        onDsNavSelect={this.handleManagedNavSelect}\n        onDsNavFooterAction={this.handleManagedNavFooterAction}\n        onDsNavUserAction={this.handleManagedNavUserAction}\n      />\n    );\n  }\n\n  private renderManagedBarNav() {\n    return (\n      <ds-bar-nav\n        navStyle={this.navStyle}\n        tabs={this.pageChrome.tabs ?? []}\n        value={this.pageChrome.value ?? ''}\n        heading={this.pageChrome.routeHeading ?? this.pageChrome.heading}\n        basePath={this.pageChrome.basePath ?? ''}\n        currentUrl={this.pageChrome.currentUrl ?? this.navigation.currentUrl ?? ''}\n        onDsTabChange={this.handleManagedTabChange}\n      />\n    );\n  }\n\n  private renderManagedToolSlots() {\n    const ids = [...new Set(this.resolvedToolItems.map(item => item.id))].sort();\n    return ids.flatMap(id => [\n      <slot key={`tool:${id}`} name={id} slot={id} />,\n      <slot key={`tool-view:${id}`} name={`${id}-view`} slot={`${id}-view`} />,\n    ]);\n  }\n\n  private renderManagedTools() {\n    const tools = this.tools;\n    return (\n      <ds-shell-tools\n        responsiveMode={this.resolvedMode}\n        open={this.managedToolsOpen}\n        activeTool={this.managedActiveTool}\n        presentation={this.managedToolPresentation}\n        fullscreenHeaderMode={tools.fullscreenHeaderMode ?? 'shared'}\n        items={this.resolvedToolItems}\n        headers={tools.headers ?? {}}\n        storageKey={tools.storageKey ?? ''}\n        toolsLabel={tools.toolsLabel ?? 'Tools'}\n        toolShortcutsLabel={tools.toolShortcutsLabel ?? 'Tool shortcuts'}\n        inboxLabel={tools.inboxLabel ?? 'Inbox'}\n        inboxNavigationLabel={tools.inboxNavigationLabel ?? 'Inbox sections'}\n        onDsToolChange={this.handleManagedToolChange}\n        onDsPresentationChange={this.handleManagedPresentationChange}\n        onDsHeaderBack={this.handleManagedHeaderBack}\n        onDsHeaderAction={this.handleManagedHeaderAction}\n      >\n        {this.renderManagedToolSlots()}\n      </ds-shell-tools>\n    );\n  }\n\n  private renderManagedMobileSheetNav() {\n    const navigation = this.navigation;\n    return (\n      <ds-mobile-sheet-nav\n        open={this.managedMobileSheetNavOpen}\n        browseContext={this.managedBrowseContext}\n        dashboardGroups={navigation.dashboardGroups ?? navigation.groups ?? []}\n        settingsGroups={navigation.settingsGroups ?? []}\n        currentUrl={navigation.currentUrl ?? this.pageChrome.currentUrl ?? ''}\n        navigationLabel={navigation.navigationLabel ?? 'Application navigation'}\n        dashboardLabel={navigation.dashboardLabel ?? 'Dashboard'}\n        settingsLabel={navigation.settingsLabel ?? 'Settings'}\n        accountLabel={navigation.accountLabel ?? 'Account'}\n        onDsAreaSelect={this.handleManagedAreaSelect}\n        onDsBrowseContextChange={this.handleManagedBrowseContext}\n        onDsClose={this.handleManagedSheetClose}\n      />\n    );\n  }\n\n  private renderManagedMobileBarNav() {\n    return (\n      <ds-mobile-bar-nav\n        hidden={this.tools.mobileBarHidden ?? false}\n        activeDestination={this.managedMobileDestination}\n        currentArea={this.currentArea}\n        sheetNavExpanded={this.managedMobileSheetNavOpen}\n        searchLabel={this.tools.items?.find(item => item.id === 'search')?.ariaLabel ?? 'Search'}\n        inboxLabel={this.tools.inboxLabel ?? 'Inbox'}\n        messagesLabel={this.tools.items?.find(item => item.id === 'messages')?.ariaLabel ?? 'Messages'}\n        agentsLabel={this.tools.items?.find(item => item.id === 'agents')?.ariaLabel ?? 'Agents'}\n        helpLabel={this.tools.items?.find(item => item.id === 'help')?.ariaLabel ?? 'Help & Support'}\n        searchDot={this.toolDot('search')}\n        inboxDot={\n          this.toolDot('stacks') || this.toolDot('activity')\n        }\n        messagesDot={this.toolDot('messages')}\n        agentsDot={this.toolDot('agents')}\n        onDsSheetNavToggle={this.handleManagedSheetToggle}\n        onDsDestinationChange={this.handleManagedMobileDestination}\n      />\n    );\n  }\n\n  private renderManagedMobileLeading() {\n    if (!this.pageChrome.showBack) {\n      return <slot name=\"page-header-leading\" slot=\"leading\" />;\n    }\n    return [\n      <ds-tooltip\n        slot=\"leading\"\n        label={this.pageChrome.backAriaLabel ?? 'Back'}\n        side=\"bottom\"\n        size=\"sm\"\n      >\n        <ds-button-unfilled\n          variant=\"icon\"\n          icon={this.pageChrome.backIcon ?? 'ChevronLeft'}\n          size=\"md\"\n          aria-label={this.pageChrome.backAriaLabel ?? 'Back'}\n          activeFill={false}\n          hasBorder={false}\n          onDsClick={(event: CustomEvent<MouseEvent>) =>\n            this.dsPageBack.emit(event.detail)\n          }\n        />\n      </ds-tooltip>,\n      <slot name=\"page-header-leading\" slot=\"leading\" />,\n    ];\n  }\n\n  private renderManagedMobileActions() {\n    const actions = this.pageChrome.mobileActions ?? [];\n    return [\n      ...actions.map((action: PanelToolsHeaderAction) => (\n        <ds-tooltip\n          slot=\"trailing\"\n          key={action.id}\n          label={action.ariaLabel}\n          side=\"bottom\"\n          size=\"sm\"\n        >\n          <ds-button-unfilled\n            id={action.triggerId || undefined}\n            variant=\"icon\"\n            icon={action.icon}\n            size=\"md\"\n            aria-label={action.ariaLabel}\n            haspopup={action.haspopup}\n            controls={action.controls}\n            expanded={action.expanded}\n            pressed={action.pressed}\n            isActive={!!action.expanded}\n            isInactive={action.isInactive}\n            activeFill={false}\n            hasBorder={false}\n            onDsClick={() => this.dsPageAction.emit(action.id)}\n          />\n        </ds-tooltip>\n      )),\n      <slot name=\"page-header-trailing\" slot=\"trailing\" />,\n    ];\n  }\n\n  private renderManagedPage() {\n    const page = this.pageChrome;\n    const mobileSections = page.showBack ? [] : (page.tabs ?? []);\n    const barTitleSections: BarTitleSectionItem[] = (page.subsections ?? []).map(item =>\n      'type' in item\n        ? { type: 'divider' }\n        : {\n            id: item.id,\n            label: item.label,\n            isInactive: item.isInactive,\n          }\n    );\n    return (\n      <ds-shell-page\n        responsiveMode={this.resolvedMode}\n        headerCapacity={resolveManagedShellPageCapacity(\n          this.resolvedMode,\n          this.managedToolsOpen || this.managedToolsClosing\n        )}\n        contentInset={page.contentInset ?? 'default'}\n        contentInsetBlockStart={page.contentInsetBlockStart ?? 'default'}\n        contentInsetBlockStartSize={page.contentInsetBlockStartSize}\n        compactContentInsetBlockStartSize={page.compactContentInsetBlockStartSize}\n        scrollCompaction={page.scrollCompaction ?? true}\n        contentSurface={page.contentSurface ?? 'primary'}\n      >\n        <ds-bar-title\n          slot=\"header\"\n          heading={page.heading ?? ''}\n          description={page.description ?? ''}\n          showBack={page.showBack ?? false}\n          backAriaLabel={page.backAriaLabel ?? 'Back'}\n          backLabel={page.backLabel ?? 'Back'}\n          breadcrumbs={page.breadcrumbs ?? []}\n          breadcrumbAriaLabel={page.breadcrumbAriaLabel ?? 'Breadcrumb'}\n          sections={barTitleSections}\n          value={page.subvalue ?? ''}\n          sectionsAriaLabel={page.subsectionsAriaLabel ?? 'Change page subsection'}\n          primaryAction={page.primaryAction ?? null}\n          actions={page.actions ?? []}\n          actionsAriaLabel={page.actionsAriaLabel ?? 'More page actions'}\n          showDivider={page.showHeaderDivider ?? true}\n          showCompactDivider={page.showCompactHeaderDivider}\n          onDsBack={this.handleManagedPageBack}\n          onDsBreadcrumbSelect={this.handleManagedBreadcrumbSelect}\n          onDsSectionChange={this.handleManagedSubsectionChange}\n          onDsAction={this.handleManagedPageAction}\n        />\n        <ds-mobile-header\n          slot=\"mobile-header\"\n          heading={page.heading ?? ''}\n          headingLevel={page.headingLevel ?? 'h1'}\n          sections={mobileSections}\n          value={page.showBack ? '' : (page.value ?? '')}\n          sectionsAriaLabel={page.sectionsAriaLabel ?? 'Change page section'}\n          subsections={page.subsections ?? []}\n          subvalue={page.subvalue ?? ''}\n          subsectionsAriaLabel={\n            page.subsectionsAriaLabel ?? 'Change page subsection'\n          }\n          tone={page.tone ?? 'default'}\n          onDsSectionChange={this.handleManagedTabChange}\n          onDsSubsectionChange={this.handleManagedSubsectionChange}\n        >\n          {this.renderManagedMobileLeading()}\n          {this.renderManagedMobileActions()}\n        </ds-mobile-header>\n        <slot />\n      </ds-shell-page>\n    );\n  }\n\n  private renderSlottedShell(\n    shellCls: Record<string, boolean>,\n    mobile: boolean,\n    mobileToolActive: boolean,\n    mobileStageBlocked: boolean,\n    fullscreen: boolean\n  ) {\n    return (\n      <Host class={shellCls} responsive-mode={this.resolvedMode}>\n        <div class=\"shell-app__banner\">\n          <slot name=\"banner\" />\n        </div>\n        <div class=\"shell-app__row\">\n          <div class=\"shell-app__chrome\" aria-hidden=\"true\" />\n          <div\n            class=\"shell-app__panel\"\n            aria-hidden={fullscreen ? 'true' : undefined}\n            inert={fullscreen ? true : undefined}\n          >\n            <slot name=\"panel\" />\n          </div>\n          <div class=\"shell-app__main\">\n            <div\n              class=\"shell-app__bar\"\n              aria-hidden={fullscreen ? 'true' : undefined}\n              inert={fullscreen ? true : undefined}\n            >\n              <slot name=\"bar\" />\n            </div>\n            <div\n              class=\"shell-app__tools\"\n              aria-hidden={\n                mobile && (!mobileToolActive || this.mobileSheetNavOpen)\n                  ? 'true'\n                  : undefined\n              }\n              inert={\n                mobile && (!mobileToolActive || this.mobileSheetNavOpen)\n                  ? true\n                  : undefined\n              }\n              hidden={mobile && !mobileToolActive}\n            >\n              <slot name=\"tools\" />\n            </div>\n            <div\n              class=\"shell-app__content ds-focus-ring\"\n              aria-hidden={fullscreen || mobileStageBlocked ? 'true' : undefined}\n              inert={fullscreen || mobileStageBlocked ? true : undefined}\n              tabIndex={0}\n            >\n              <slot />\n            </div>\n            <div\n              class=\"shell-app__mobile-sheet-nav\"\n              hidden={!mobile || !this.mobileSheetNavOpen}\n              aria-hidden={\n                mobile && this.mobileSheetNavOpen ? undefined : 'true'\n              }\n              inert={mobile && this.mobileSheetNavOpen ? undefined : true}\n            >\n              <slot name=\"mobile-sheet-nav\" />\n            </div>\n            <div class=\"shell-app__mobile-bar-nav\" hidden={!mobile}>\n              <slot name=\"mobile-bar-nav\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  render() {\n    const chromeActive = this.chromeLayerActive();\n    const mobile = this.resolvedMode === 'mobile';\n    const mobileToolActive = mobile && this.effectiveMobileDestination !== 'area';\n    const mobileStageBlocked =\n      mobile && (mobileToolActive || this.effectiveMobileSheetNavOpen);\n    const fullscreen = !mobile && this.toolsFullscreen;\n    const shellCls: Record<string, boolean> = {\n      'shell-app': true,\n      'shell-app--gradient': chromeActive,\n      [`shell-app--${this.navStyle}`]: true,\n      [`shell-app--${this.resolvedMode}`]: true,\n      'shell-app--tools-fullscreen': fullscreen,\n      'shell-app--mobile-tool-active': mobileToolActive,\n      'shell-app--mobile-sheet-nav-open':\n        mobile && this.effectiveMobileSheetNavOpen,\n      'shell-app--managed': this.managed,\n      'shell-app--slotted': !this.managed,\n    };\n\n    if (!this.managed) {\n      return this.renderSlottedShell(\n        shellCls,\n        mobile,\n        mobileToolActive,\n        mobileStageBlocked,\n        fullscreen\n      );\n    }\n\n    return (\n      <Host class={shellCls} responsive-mode={this.resolvedMode}>\n        <div class=\"shell-app__banner\">\n          <slot name=\"banner\" />\n        </div>\n        <div class=\"shell-app__row\">\n          <div class=\"shell-app__chrome\" aria-hidden=\"true\" />\n          <div class=\"shell-app__panel\" aria-hidden={fullscreen ? 'true' : undefined} inert={fullscreen ? true : undefined}>\n            {this.renderManagedPanelNav()}\n          </div>\n          <div class=\"shell-app__main\">\n            <div class=\"shell-app__bar\" aria-hidden={fullscreen ? 'true' : undefined} inert={fullscreen ? true : undefined}>\n              {this.renderManagedBarNav()}\n            </div>\n            <div\n              class=\"shell-app__tools\"\n              aria-hidden={\n                mobile && (!mobileToolActive || this.effectiveMobileSheetNavOpen)\n                  ? 'true'\n                  : undefined\n              }\n              inert={\n                mobile && (!mobileToolActive || this.effectiveMobileSheetNavOpen)\n                  ? true\n                  : undefined\n              }\n              hidden={mobile && !mobileToolActive}\n            >\n              {this.renderManagedTools()}\n            </div>\n            <div\n              class=\"shell-app__content ds-focus-ring\"\n              aria-hidden={fullscreen || mobileStageBlocked ? 'true' : undefined}\n              inert={fullscreen || mobileStageBlocked ? true : undefined}\n              tabIndex={0}\n            >\n              {this.renderManagedPage()}\n            </div>\n            <div\n              class=\"shell-app__mobile-sheet-nav\"\n              hidden={!mobile || !this.effectiveMobileSheetNavOpen}\n              aria-hidden={\n                mobile && this.effectiveMobileSheetNavOpen ? undefined : 'true'\n              }\n              inert={mobile && this.effectiveMobileSheetNavOpen ? undefined : true}\n            >\n              {this.renderManagedMobileSheetNav()}\n            </div>\n            <div class=\"shell-app__mobile-bar-nav\" hidden={!mobile}>\n              {this.renderManagedMobileBarNav()}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {