@ds-mo/ui 13.15.0 → 13.16.1

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

@@ -64,7 +64,7 @@
         "Replace navigation and pageChrome together from one completed route state.",
         "When pageChrome.showBack marks a detail depth, mobile chrome keeps the page heading as its identity and presents only local subsections; peer route tabs remain in desktop BarNav rather than replacing the detail heading.",
         "Managed ShellApp keeps BarNav and ShellPage presentations present and owns page header stickiness and the content scroller.",
-        "Route-owned pageChrome selects ShellPage contentInset and contentSurface independently; ShellApp forwards both without making page-specific layout or surface decisions.",
+        "Route-owned pageChrome independently selects ShellPage contentInset, roomy and compact top seams, scroll compaction, expanded and compact header-divider visibility, and contentSurface; ShellApp forwards them without making page-specific layout or surface decisions.",
         "The application filters unauthorized destinations, sections, and tools before passing them into shell components."
       ],
       "responsiveBehavior": [
@@ -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,12 +595,12 @@
     },
     {
       "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        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          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"
     },
     {
       "path": "src/wc/components/ShellApp/shell-app-types.ts",
-      "content": "import type { BarNavTab } from '../BarNav/bar-nav-types';\nimport type {\n  BarTitleActionItem,\n  BarTitlePrimaryAction,\n} from '../BarTitle/bar-title-types';\nimport type { BreadcrumbItem } from '../Breadcrumb/breadcrumb-types';\nimport type { MobileHeaderTone } from '../MobileHeader/mobile-header-types';\nimport type {\n  PanelNavGroup,\n  PanelNavItem,\n  PanelNavRouterMode,\n} from '../PanelNav/panel-nav-types';\nimport type {\n  PanelToolsHeaders,\n  PanelToolsHeaderAction,\n  PanelToolsItem,\n} from '../PanelTools/panel-tools-types';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport type {\n  ShellPageContentInset,\n  ShellPageContentSurface,\n} from '../ShellPage/shell-page-types';\n\nexport type ShellAppComposition = 'managed' | 'slotted';\n\n/**\n * Router-owned application navigation supplied to managed ShellApp.\n * ShellApp renders the responsive chrome but never performs route changes.\n */\nexport interface ShellNavigationConfig {\n  /** Groups shown in the current desktop/tablet PanelNav context. */\n  groups?: PanelNavGroup[];\n  /** Complete Dashboard collection used by the mobile navigation sheet. */\n  dashboardGroups?: PanelNavGroup[];\n  /** Complete Settings collection used by the mobile navigation sheet. */\n  settingsGroups?: PanelNavGroup[];\n  /** Current application URL used for active-item matching. */\n  currentUrl?: string;\n  /** Optional explicit active destination when URL matching is unavailable. */\n  activeId?: string;\n  /** Current Dashboard or Settings browsing context. */\n  browseContext?: NavChromeStyle;\n  /** Managed shells default to event routing so the application router stays authoritative. */\n  routerMode?: PanelNavRouterMode;\n  /** Persisted desktop PanelNav collapse preference key. */\n  storageKey?: string;\n  userName?: string;\n  userInitial?: string;\n  accountMenuExpanded?: boolean;\n  dashboardLabel?: string;\n  settingsLabel?: string;\n  accountLabel?: string;\n  navigationLabel?: string;\n  dashboardNavigationLabel?: string;\n  settingsNavigationLabel?: string;\n}\n\n/**\n * Route-owned page chrome. The same data drives desktop BarNav/BarTitle and\n * the intentionally different mobile MobileHeader presentation.\n */\nexport interface ShellPageChromeConfig {\n  heading?: string;\n  /** Desktop/tablet route-navigation heading when it differs from the page h1. */\n  routeHeading?: string;\n  description?: string;\n  headingLevel?: 'h1' | 'h2';\n  tabs?: BarNavTab[];\n  value?: string;\n  basePath?: string;\n  currentUrl?: string;\n  sectionsAriaLabel?: string;\n  subsections?: BarNavTab[];\n  subvalue?: string;\n  subsectionsAriaLabel?: string;\n  showBack?: boolean;\n  backAriaLabel?: string;\n  backIcon?: string;\n  backLabel?: string;\n  breadcrumbs?: BreadcrumbItem[];\n  breadcrumbAriaLabel?: string;\n  primaryAction?: BarTitlePrimaryAction | null;\n  actions?: BarTitleActionItem[];\n  /** Icon actions rendered in the mobile header's trailing lane. */\n  mobileActions?: PanelToolsHeaderAction[];\n  actionsAriaLabel?: string;\n  tone?: MobileHeaderTone;\n  contentInset?: ShellPageContentInset;\n  /** Canvas surface painted by ShellPage around and beneath routed content. */\n  contentSurface?: ShellPageContentSurface;\n}\n\n/**\n * Product-owned global tools supplied to managed ShellApp. Tool view content\n * remains mounted in the corresponding named `*-view` slots.\n */\nexport interface ShellToolsConfig {\n  items?: PanelToolsItem[];\n  headers?: PanelToolsHeaders;\n  storageKey?: string;\n  fullscreenHeaderMode?: 'shared' | 'split';\n  toolsLabel?: string;\n  toolShortcutsLabel?: string;\n  inboxLabel?: string;\n  inboxNavigationLabel?: string;\n  /** Temporarily conceal the mobile bar while a tool-owned keyboard interaction needs the space. */\n  mobileBarHidden?: boolean;\n}\n\nexport interface ShellNavigationSelectDetail {\n  id: string;\n  item?: PanelNavItem;\n}\n",
+      "content": "import type { BarNavTab } from '../BarNav/bar-nav-types';\nimport type {\n  BarTitleActionItem,\n  BarTitlePrimaryAction,\n} from '../BarTitle/bar-title-types';\nimport type { BreadcrumbItem } from '../Breadcrumb/breadcrumb-types';\nimport type { MobileHeaderTone } from '../MobileHeader/mobile-header-types';\nimport type {\n  PanelNavGroup,\n  PanelNavItem,\n  PanelNavRouterMode,\n} from '../PanelNav/panel-nav-types';\nimport type {\n  PanelToolsHeaders,\n  PanelToolsHeaderAction,\n  PanelToolsItem,\n} from '../PanelTools/panel-tools-types';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport type {\n  ShellPageContentInset,\n  ShellPageContentSurface,\n} from '../ShellPage/shell-page-types';\n\nexport type ShellAppComposition = 'managed' | 'slotted';\n\n/**\n * Router-owned application navigation supplied to managed ShellApp.\n * ShellApp renders the responsive chrome but never performs route changes.\n */\nexport interface ShellNavigationConfig {\n  /** Groups shown in the current desktop/tablet PanelNav context. */\n  groups?: PanelNavGroup[];\n  /** Complete Dashboard collection used by the mobile navigation sheet. */\n  dashboardGroups?: PanelNavGroup[];\n  /** Complete Settings collection used by the mobile navigation sheet. */\n  settingsGroups?: PanelNavGroup[];\n  /** Current application URL used for active-item matching. */\n  currentUrl?: string;\n  /** Optional explicit active destination when URL matching is unavailable. */\n  activeId?: string;\n  /** Current Dashboard or Settings browsing context. */\n  browseContext?: NavChromeStyle;\n  /** Managed shells default to event routing so the application router stays authoritative. */\n  routerMode?: PanelNavRouterMode;\n  /** Persisted desktop PanelNav collapse preference key. */\n  storageKey?: string;\n  userName?: string;\n  userInitial?: string;\n  accountMenuExpanded?: boolean;\n  dashboardLabel?: string;\n  settingsLabel?: string;\n  accountLabel?: string;\n  navigationLabel?: string;\n  dashboardNavigationLabel?: string;\n  settingsNavigationLabel?: string;\n}\n\n/**\n * Route-owned page chrome. The same data drives desktop BarNav/BarTitle and\n * the intentionally different mobile MobileHeader presentation.\n */\nexport interface ShellPageChromeConfig {\n  heading?: string;\n  /** Desktop/tablet route-navigation heading when it differs from the page h1. */\n  routeHeading?: string;\n  description?: string;\n  headingLevel?: 'h1' | 'h2';\n  tabs?: BarNavTab[];\n  value?: string;\n  basePath?: string;\n  currentUrl?: string;\n  sectionsAriaLabel?: string;\n  subsections?: BarNavTab[];\n  subvalue?: string;\n  subsectionsAriaLabel?: string;\n  showBack?: boolean;\n  backAriaLabel?: string;\n  backIcon?: string;\n  backLabel?: string;\n  breadcrumbs?: BreadcrumbItem[];\n  breadcrumbAriaLabel?: string;\n  primaryAction?: BarTitlePrimaryAction | null;\n  actions?: BarTitleActionItem[];\n  /** Icon actions rendered in the mobile header's trailing lane. */\n  mobileActions?: PanelToolsHeaderAction[];\n  actionsAriaLabel?: string;\n  tone?: MobileHeaderTone;\n  contentInset?: ShellPageContentInset;\n  /** Remove only the content gutter adjacent to the page header. */\n  contentInsetBlockStart?: ShellPageContentInset;\n  /** Exact roomy block-start content inset when the responsive default is not appropriate. */\n  contentInsetBlockStartSize?: string;\n  /** Exact block-start content inset while page-title capacity is compact or constrained. */\n  compactContentInsetBlockStartSize?: string;\n  /** Allow a roomy page title to compact in response to page scrolling. */\n  scrollCompaction?: boolean;\n  /** Draw the divider beneath the desktop/tablet page title. */\n  showHeaderDivider?: boolean;\n  /** Override divider visibility while the page title is compact or constrained. */\n  showCompactHeaderDivider?: boolean;\n  /** Canvas surface painted by ShellPage around and beneath routed content. */\n  contentSurface?: ShellPageContentSurface;\n}\n\n/**\n * Product-owned global tools supplied to managed ShellApp. Tool view content\n * remains mounted in the corresponding named `*-view` slots.\n */\nexport interface ShellToolsConfig {\n  items?: PanelToolsItem[];\n  headers?: PanelToolsHeaders;\n  storageKey?: string;\n  fullscreenHeaderMode?: 'shared' | 'split';\n  toolsLabel?: string;\n  toolShortcutsLabel?: string;\n  inboxLabel?: string;\n  inboxNavigationLabel?: string;\n  /** Temporarily conceal the mobile bar while a tool-owned keyboard interaction needs the space. */\n  mobileBarHidden?: boolean;\n}\n\nexport interface ShellNavigationSelectDetail {\n  id: string;\n  item?: PanelNavItem;\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "shell-page",
   "title": "ShellPage",
-  "description": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, application-supplied BarTitle capacity, stable scroll compaction, and independent page-content inset and canvas surface without creating a nested scroll container.",
+  "description": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, application-supplied BarTitle capacity, optional scroll compaction, and independent page-content inset and canvas surface without creating a nested scroll container.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
@@ -13,7 +13,7 @@
     "intent": {
       "audience": "general",
       "status": "stable",
-      "summary": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, application-supplied BarTitle capacity, stable scroll compaction, and independent page-content inset and canvas surface without creating a nested scroll container.",
+      "summary": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, application-supplied BarTitle capacity, optional scroll compaction, and independent page-content inset and canvas surface without creating a nested scroll container.",
       "useWhen": [
         "Rendering a standard routed page inside ShellApp's default content region.",
         "BarTitle should expand at a roomy page top, compact after scroll, or use constrained action layout when the application shell reports reduced capacity.",
@@ -58,6 +58,9 @@
         "headerPresentation=auto selects the matching header variant from headerCapacity and scroll position.",
         "expanded, compact, and constrained are explicit overrides for exceptional layouts and deterministic examples.",
         "contentInset=default supplies standard page gutters; none permits maps, canvases, and other full-bleed content.",
+        "contentInsetBlockStart=none removes only the gutter adjacent to the page header while retaining the responsive inline and bottom gutters.",
+        "contentInsetBlockStartSize can provide an exact roomy top seam, while compactContentInsetBlockStartSize independently defines the compact and constrained seam. ShellPage exposes their resolved sticky-header offset through --ds-shell-page-content-block-start-offset for viewport-fitted descendants.",
+        "scrollCompaction=false keeps a roomy header expanded and pinned during page scrolling; capacity changes still select compact or constrained variants.",
         "contentSurface=primary keeps the standard page canvas; secondary paints both the inset gutter and the canvas beneath routed content. Desktop and tablet BarTitle chrome matches that canvas in expanded, compact, and constrained presentations; MobileHeader remains primary.",
         "contentInset and contentSurface are independent: either surface supports standard responsive gutters or a full-bleed page-owned layout.",
         "The header slot accepts one desktop BarTitle or BarWorkflow; mobile-header accepts the corresponding MobileHeader presentation. The default slot owns router output and all page product content."
@@ -65,10 +68,12 @@
       "responsiveBehavior": [
         "The owning application shell resolves viewport and persistent-chrome state into the explicit headerCapacity prop; ShellPage never guesses the cause of reduced width from its own rendered size.",
         "Roomy capacity expands at the top and compacts after scroll; compact capacity stays compact; constrained capacity uses the constrained action layout.",
+        "Pages with scrollCompaction=false keep roomy headers expanded while still responding to compact or constrained capacity from tools and breakpoints.",
         "A ShellPage-managed BarTitle remains concealed until headerCapacity is available and its rendered variant matches the resolved presentation, preventing a default-variant flash during route activation.",
         "responsiveMode=mobile hides and inerts the desktop header, exposes mobile-header, and disables desktop scroll-compaction geometry.",
         "Update headerCapacity synchronously with shell layout state so opening tools or crossing application breakpoints cannot briefly render the wrong presentation.",
         "The default content inset is balanced on every side: 32px in desktop mode and 16px in tablet and mobile modes.",
+        "contentInsetBlockStart can independently remove the top gutter for table and canvas pages that should meet the sticky header; exact roomy and compact block-start sizes support pages whose seam changes with header capacity.",
         "The selected content surface persists unchanged across desktop, tablet, and mobile modes.",
         "On a secondary desktop or tablet page, BarTitle matches the page canvas across capacity and scroll-driven variant changes; the separate mobile-header presentation remains primary.",
         "The flow-preservation spacer follows contentSurface so compacting a secondary page cannot expose a primary strip before its content.",
@@ -108,6 +113,14 @@
     },
     "api": {
       "props": {
+        "compactContentInsetBlockStartSize": {
+          "type": "string",
+          "resolvedType": "string | undefined",
+          "attribute": "compact-content-inset-block-start-size",
+          "required": false,
+          "mutable": false,
+          "description": "Exact block-start content inset while the header is compact or constrained."
+        },
         "contentInset": {
           "type": "ShellPageContentInset",
           "resolvedType": "\"default\" | \"none\"",
@@ -117,6 +130,23 @@
           "mutable": false,
           "description": "Standard page gutters, or no inset for full-bleed page content."
         },
+        "contentInsetBlockStart": {
+          "type": "ShellPageContentInset",
+          "resolvedType": "\"default\" | \"none\"",
+          "attribute": "content-inset-block-start",
+          "default": "'default'",
+          "required": false,
+          "mutable": false,
+          "description": "Preserve the responsive side/end gutters while allowing content to meet the header."
+        },
+        "contentInsetBlockStartSize": {
+          "type": "string",
+          "resolvedType": "string | undefined",
+          "attribute": "content-inset-block-start-size",
+          "required": false,
+          "mutable": false,
+          "description": "Exact block-start content inset, overriding the responsive default when provided."
+        },
         "contentSurface": {
           "type": "ShellPageContentSurface",
           "resolvedType": "\"primary\" | \"secondary\"",
@@ -151,6 +181,15 @@
           "required": false,
           "mutable": false,
           "description": "Explicit shell breakpoint presentation. Mobile uses the dedicated mobile-header slot."
+        },
+        "scrollCompaction": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "scroll-compaction",
+          "default": "true",
+          "required": false,
+          "mutable": false,
+          "description": "Allow roomy automatic headers to compact as the page scrolls."
         }
       },
       "events": [],
@@ -158,6 +197,14 @@
       "slots": []
     },
     "props": {
+      "compactContentInsetBlockStartSize": {
+        "type": "string",
+        "resolvedType": "string | undefined",
+        "attribute": "compact-content-inset-block-start-size",
+        "required": false,
+        "mutable": false,
+        "description": "Exact block-start content inset while the header is compact or constrained."
+      },
       "contentInset": {
         "type": "ShellPageContentInset",
         "resolvedType": "\"default\" | \"none\"",
@@ -167,6 +214,23 @@
         "mutable": false,
         "description": "Standard page gutters, or no inset for full-bleed page content."
       },
+      "contentInsetBlockStart": {
+        "type": "ShellPageContentInset",
+        "resolvedType": "\"default\" | \"none\"",
+        "attribute": "content-inset-block-start",
+        "default": "'default'",
+        "required": false,
+        "mutable": false,
+        "description": "Preserve the responsive side/end gutters while allowing content to meet the header."
+      },
+      "contentInsetBlockStartSize": {
+        "type": "string",
+        "resolvedType": "string | undefined",
+        "attribute": "content-inset-block-start-size",
+        "required": false,
+        "mutable": false,
+        "description": "Exact block-start content inset, overriding the responsive default when provided."
+      },
       "contentSurface": {
         "type": "ShellPageContentSurface",
         "resolvedType": "\"primary\" | \"secondary\"",
@@ -201,6 +265,15 @@
         "required": false,
         "mutable": false,
         "description": "Explicit shell breakpoint presentation. Mobile uses the dedicated mobile-header slot."
+      },
+      "scrollCompaction": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "scroll-compaction",
+        "default": "true",
+        "required": false,
+        "mutable": false,
+        "description": "Allow roomy automatic headers to compact as the page scrolls."
       }
     },
     "events": [],
@@ -243,12 +316,12 @@
   "files": [
     {
       "path": "src/wc/components/ShellPage/ShellPage.css",
-      "content": ":host {\n  --_shell-page-content-background: var(--color-background-primary);\n  --_shell-page-header-background: var(--color-background-primary);\n  display: block;\n  position: relative;\n  min-width: 0;\n  min-height: 100%;\n  box-sizing: border-box;\n  background: var(--_shell-page-content-background);\n}\n\n:host(.shell-page-host--surface-secondary) {\n  --_shell-page-content-background: var(--color-background-secondary);\n}\n\n:host(.shell-page-host--surface-secondary[responsive-mode='desktop']),\n:host(.shell-page-host--surface-secondary[responsive-mode='tablet']) {\n  --_shell-page-header-background: var(--color-background-secondary);\n}\n\n.shell-page__scroll-sentinel {\n  position: absolute;\n  inset-block-start: var(--ds-shell-page-header-travel, 0);\n  inset-inline-start: 0;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-stroke-width-012);\n  pointer-events: none;\n}\n\n.shell-page__sticky-header {\n  position: sticky;\n  inset-block-start: var(--ds-shell-page-sticky-offset, 0);\n  z-index: var(--dimension-z-index-raised);\n  min-width: 0;\n  background: var(--_shell-page-header-background);\n  overflow: visible;\n  overflow-anchor: none;\n}\n\n.shell-page__desktop-header ::slotted(ds-bar-title),\n.shell-page__desktop-header ::slotted(ds-bar-workflow),\n.shell-page__mobile-header ::slotted(ds-mobile-header) {\n  display: block;\n  min-width: 0;\n}\n\n.shell-page__desktop-header[hidden],\n.shell-page__mobile-header[hidden] {\n  display: none;\n}\n\n:host(.shell-page-host--mobile) .shell-page__scroll-sentinel,\n:host(.shell-page-host--mobile) .shell-page__flow-spacer {\n  display: none;\n}\n\n.shell-page__flow-spacer {\n  height: var(--ds-shell-page-flow-spacer, 0);\n  background: var(--_shell-page-content-background);\n}\n\n.shell-page__content {\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--_shell-page-content-background);\n}\n\n:host(.shell-page-host--inset-default) .shell-page__content {\n  padding: var(--dimension-space-400);\n}\n\n:host(.shell-page-host--inset-default[responsive-mode='tablet']) .shell-page__content,\n:host(.shell-page-host--inset-default[responsive-mode='mobile']) .shell-page__content {\n  padding: var(--dimension-space-200);\n}\n\n:host(.shell-page-host--inset-none) .shell-page__content {\n  padding: 0;\n}\n",
+      "content": ":host {\n  --_shell-page-content-background: var(--color-background-primary);\n  --_shell-page-header-background: var(--color-background-primary);\n  --_shell-page-responsive-content-block-start-inset: var(--dimension-space-400);\n  --_shell-page-content-block-start-inset: var(\n    --ds-shell-page-content-block-start-inset,\n    var(--_shell-page-responsive-content-block-start-inset)\n  );\n  --ds-shell-page-sticky-header-block-size: var(--dimension-size-600);\n  --ds-shell-page-content-block-start-offset: calc(\n    var(--ds-shell-page-sticky-header-block-size) +\n      var(--_shell-page-content-block-start-inset)\n  );\n  display: block;\n  position: relative;\n  min-width: 0;\n  min-height: 100%;\n  box-sizing: border-box;\n  background: var(--_shell-page-content-background);\n}\n\n:host(.shell-page-host--surface-secondary) {\n  --_shell-page-content-background: var(--color-background-secondary);\n}\n\n:host(.shell-page-host--surface-secondary[responsive-mode='desktop']),\n:host(.shell-page-host--surface-secondary[responsive-mode='tablet']) {\n  --_shell-page-header-background: var(--color-background-secondary);\n}\n\n:host([responsive-mode='tablet']),\n:host([responsive-mode='mobile']) {\n  --_shell-page-responsive-content-block-start-inset: var(--dimension-space-200);\n}\n\n:host(.shell-page-host--header-compact),\n:host(.shell-page-host--header-constrained) {\n  --_shell-page-content-block-start-inset: var(\n    --ds-shell-page-compact-content-block-start-inset,\n    var(--_shell-page-responsive-content-block-start-inset)\n  );\n}\n\n:host(.shell-page-host--inset-none),\n:host(.shell-page-host--block-start-inset-none) {\n  --_shell-page-content-block-start-inset: 0px;\n}\n\n.shell-page__scroll-sentinel {\n  position: absolute;\n  inset-block-start: var(--ds-shell-page-header-travel, 0);\n  inset-inline-start: 0;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-stroke-width-012);\n  pointer-events: none;\n}\n\n.shell-page__sticky-header {\n  position: sticky;\n  inset-block-start: var(--ds-shell-page-sticky-offset, 0);\n  z-index: var(--dimension-z-index-raised);\n  min-width: 0;\n  background: var(--_shell-page-header-background);\n  overflow: visible;\n  overflow-anchor: none;\n}\n\n.shell-page__desktop-header ::slotted(ds-bar-title),\n.shell-page__desktop-header ::slotted(ds-bar-workflow),\n.shell-page__mobile-header ::slotted(ds-mobile-header) {\n  display: block;\n  min-width: 0;\n}\n\n.shell-page__desktop-header[hidden],\n.shell-page__mobile-header[hidden] {\n  display: none;\n}\n\n:host(.shell-page-host--mobile) .shell-page__scroll-sentinel,\n:host(.shell-page-host--mobile) .shell-page__flow-spacer {\n  display: none;\n}\n\n.shell-page__flow-spacer {\n  height: var(--ds-shell-page-flow-spacer, 0);\n  background: var(--_shell-page-content-background);\n}\n\n.shell-page__content {\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--_shell-page-content-background);\n}\n\n:host(.shell-page-host--inset-default) .shell-page__content {\n  padding: var(--dimension-space-400);\n  padding-block-start: var(--_shell-page-content-block-start-inset);\n}\n\n:host(.shell-page-host--inset-default[responsive-mode='tablet']) .shell-page__content,\n:host(.shell-page-host--inset-default[responsive-mode='mobile']) .shell-page__content {\n  padding: var(--dimension-space-200);\n  padding-block-start: var(--_shell-page-content-block-start-inset);\n}\n\n:host(.shell-page-host--inset-none) .shell-page__content {\n  padding: 0;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/ShellPage/ShellPage.tsx",
-      "content": "import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { ShellResponsiveMode } from '../../shell/shell-responsive';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport type { BarTitleVariant } from '../BarTitle/bar-title-types';\nimport { resolveShellPageHeaderVariant } from './shell-page-responsive';\nimport type {\n  ShellPageCapacity,\n  ShellPageContentInset,\n  ShellPageContentSurface,\n  ShellPageHeaderPresentation,\n} from './shell-page-types';\n\ntype BarTitleElement = HTMLElement & { variant: BarTitleVariant };\n\n@Component({\n  tag: 'ds-shell-page',\n  styleUrl: 'ShellPage.css',\n  scoped: true,\n})\nexport class ShellPage {\n  private static readonly MAX_HEADER_REVEAL_FRAMES = 12;\n  private static readonly MAX_HEADER_GEOMETRY_FRAMES = 12;\n\n  @Element() el!: HTMLElement;\n\n  /** Automatic capacity/scroll behavior, or an explicit header variant override. */\n  @Prop() headerPresentation: ShellPageHeaderPresentation = 'auto';\n\n  /** Available page-header capacity supplied by the owning application shell. */\n  @Prop() headerCapacity?: ShellPageCapacity;\n\n  /** Standard page gutters, or no inset for full-bleed page content. */\n  @Prop() contentInset: ShellPageContentInset = 'default';\n\n  /** Canvas surface painted around and beneath routed page content. */\n  @Prop() contentSurface: ShellPageContentSurface = 'primary';\n\n  /** Explicit shell breakpoint presentation. Mobile uses the dedicated mobile-header slot. */\n  @Prop({ attribute: 'responsive-mode', reflect: true })\n  responsiveMode: ShellResponsiveMode = 'desktop';\n\n  @State() private pageTopVisible = true;\n\n  private sentinelEl: HTMLElement | null = null;\n  private spacerEl: HTMLElement | null = null;\n  private stickyHeaderEl: HTMLElement | null = null;\n  private headerEl: BarTitleElement | null = null;\n  private expandedHeaderHeight = 0;\n  private headerTravel = 0;\n  private expandedGeometryFrozen = false;\n  private headerResizeObserver: ResizeObserver | null = null;\n  private headerMutationObserver: MutationObserver | null = null;\n  private headerRevealFrame: number | null = null;\n  private headerGeometryFrame: number | null = null;\n  private reconnectFrame: number | null = null;\n  private scrollRoot: HTMLElement | Window | null = null;\n  private hasLoaded = false;\n\n  @Watch('headerCapacity')\n  @Watch('headerPresentation')\n  handleHeaderContractChange() {\n    this.syncHeaderVariant(true);\n  }\n\n  @Watch('responsiveMode')\n  handleResponsiveModeChange() {\n    this.observeHeader(this.responsiveMode === 'mobile' ? null : this.findHeader());\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.connectRuntime();\n  }\n\n  componentDidRender() {\n    this.syncHeaderVariant();\n  }\n\n  connectedCallback() {\n    if (!this.hasLoaded) return;\n    if (this.reconnectFrame !== null) cancelAnimationFrame(this.reconnectFrame);\n    this.reconnectFrame = requestAnimationFrame(() => {\n      this.reconnectFrame = null;\n      if (this.el.isConnected) this.connectRuntime();\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.reconnectFrame !== null) cancelAnimationFrame(this.reconnectFrame);\n    this.reconnectFrame = null;\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.headerMutationObserver?.disconnect();\n    this.headerMutationObserver = null;\n    this.cancelHeaderReveal();\n    this.cancelHeaderGeometrySync();\n    this.headerEl?.style.removeProperty('--ds-bar-title-divider-inset');\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = null;\n  }\n\n  private connectRuntime() {\n    this.observeHeader(this.responsiveMode === 'mobile' ? null : this.findHeader());\n    this.connectScrollRoot();\n  }\n\n  private get effectiveVariant(): BarTitleVariant {\n    return resolveShellPageHeaderVariant(\n      this.headerPresentation,\n      this.headerCapacity ?? 'roomy',\n      this.pageTopVisible\n    );\n  }\n\n  private get headerContractResolved(): boolean {\n    return this.headerPresentation !== 'auto' || this.headerCapacity !== undefined;\n  }\n\n  private get isScrollCompacted(): boolean {\n    return (\n      this.headerPresentation === 'auto' && this.headerCapacity === 'roomy' && !this.pageTopVisible\n    );\n  }\n\n  private composedParent(element: Element): Element | null {\n    return (element as HTMLElement).assignedSlot?.parentElement ?? element.parentElement;\n  }\n\n  private findScrollRoot(): HTMLElement | Window {\n    let ancestor = this.composedParent(this.el);\n    while (ancestor && ancestor !== document.documentElement) {\n      const overflow = getComputedStyle(ancestor).overflowY;\n      if (overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay') {\n        return ancestor as HTMLElement;\n      }\n      ancestor = this.composedParent(ancestor);\n    }\n    return window;\n  }\n\n  private connectScrollRoot() {\n    const next = this.findScrollRoot();\n    if (next === this.scrollRoot) return;\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = next;\n    this.scrollRoot.addEventListener('scroll', this.handleScroll, { passive: true });\n    this.handleScroll();\n  }\n\n  private get scrollRootResolved(): boolean {\n    const shell = this.el.closest('ds-shell-app');\n    if (!shell) return true;\n    const expected = shell.querySelector<HTMLElement>('.shell-app__content');\n    return expected !== null && this.scrollRoot === expected;\n  }\n\n  private handleScroll = () => {\n    if (!this.sentinelEl || !this.scrollRoot) return;\n    const rootTop =\n      this.scrollRoot === window ? 0 : (this.scrollRoot as HTMLElement).getBoundingClientRect().top;\n    this.syncHeaderDividerInset(rootTop);\n    const nextPageTopVisible = this.sentinelEl.getBoundingClientRect().top >= rootTop;\n    if (\n      !nextPageTopVisible &&\n      this.pageTopVisible &&\n      this.headerEl?.classList.contains(this.variantClass('expanded'))\n    ) {\n      this.captureExpandedHeaderGeometry(this.headerEl);\n      this.expandedGeometryFrozen = true;\n    }\n    if (\n      nextPageTopVisible &&\n      this.expandedGeometryFrozen &&\n      this.el.getBoundingClientRect().top >= rootTop\n    ) {\n      this.expandedGeometryFrozen = false;\n      if (this.headerEl?.classList.contains(this.variantClass('expanded'))) {\n        this.captureExpandedHeaderGeometry(this.headerEl);\n      }\n    }\n    this.pageTopVisible = nextPageTopVisible;\n  };\n\n  private findHeader(): BarTitleElement | null {\n    return this.el.querySelector<BarTitleElement>('ds-bar-title');\n  }\n\n  private get compactHeaderHeight(): number {\n    return resolveCssLengthPx('--dimension-size-600', 0);\n  }\n\n  private syncHeaderDividerInset(rootTop?: number) {\n    const header = this.headerEl;\n    if (!header) return;\n\n    const ownsScrollTransition =\n      this.headerPresentation === 'auto' && this.headerCapacity === 'roomy';\n    const expandedInset = resolveCssLengthPx('--dimension-space-400', 0);\n    if (\n      !ownsScrollTransition ||\n      !this.sentinelEl ||\n      !this.scrollRoot ||\n      this.headerTravel <= 0 ||\n      expandedInset <= 0\n    ) {\n      header.style.removeProperty('--ds-bar-title-divider-inset');\n      return;\n    }\n\n    const scrollRootTop =\n      rootTop ??\n      (this.scrollRoot === window\n        ? 0\n        : (this.scrollRoot as HTMLElement).getBoundingClientRect().top);\n    const remainingTravel = this.sentinelEl.getBoundingClientRect().top - scrollRootTop;\n    const progress = Math.min(1, Math.max(0, 1 - remainingTravel / this.headerTravel));\n    header.style.setProperty('--ds-bar-title-divider-inset', `${expandedInset * (1 - progress)}px`);\n  }\n\n  private setHeaderTravel(distance: number) {\n    const next = Math.max(0, distance);\n    if (Math.abs(next - this.headerTravel) < 0.5) return;\n    this.headerTravel = next;\n    this.el.style.setProperty('--ds-shell-page-header-travel', `${next}px`);\n    this.handleScroll();\n  }\n\n  private measureHeaderTravel(header: BarTitleElement) {\n    const anchor = header.querySelector<HTMLElement>('[data-shell-page-header-anchor]');\n    const compactHeight = this.compactHeaderHeight;\n    if (!anchor || compactHeight <= 0) return;\n\n    const headerRect = header.getBoundingClientRect();\n    const anchorRect = anchor.getBoundingClientRect();\n    if (headerRect.height <= 0 || anchorRect.height <= 0) return;\n\n    const expandedAnchorTop = anchorRect.top - headerRect.top;\n    const compactAnchorTop = Math.max(0, (compactHeight - anchorRect.height) / 2);\n    this.setHeaderTravel(expandedAnchorTop - compactAnchorTop);\n  }\n\n  private captureExpandedHeaderGeometry(header: BarTitleElement) {\n    this.expandedHeaderHeight = header.getBoundingClientRect().height;\n    this.measureHeaderTravel(header);\n  }\n\n  private setSpacerHeight(height: number) {\n    if (!this.spacerEl) return;\n    this.spacerEl.style.setProperty('--ds-shell-page-flow-spacer', `${Math.max(0, height)}px`);\n  }\n\n  private variantClass(variant: BarTitleVariant): string {\n    return `bar-title-host--${variant}`;\n  }\n\n  private setStickyHeaderOffset(renderedVariant: BarTitleVariant) {\n    this.stickyHeaderEl?.style.setProperty(\n      '--ds-shell-page-sticky-offset',\n      renderedVariant === 'expanded' &&\n        this.headerPresentation === 'auto' &&\n        this.headerCapacity === 'roomy'\n        ? `${-this.headerTravel}px`\n        : '0px'\n    );\n  }\n\n  private syncRenderedHeaderGeometry(header: BarTitleElement) {\n    const renderedVariant = this.effectiveVariant;\n    if (!header.classList.contains(this.variantClass(renderedVariant))) return;\n\n    // Update both flow-preservation pieces before reading layout. Otherwise a\n    // reverse compact → expanded render can briefly contain the tall header and\n    // the compact spacer together, giving browser scroll anchoring a transient\n    // height change to compensate.\n    this.setSpacerHeight(\n      this.isScrollCompacted ? this.expandedHeaderHeight - this.compactHeaderHeight : 0\n    );\n    this.setStickyHeaderOffset(renderedVariant);\n\n    if (renderedVariant === 'expanded' && !this.expandedGeometryFrozen) {\n      this.captureExpandedHeaderGeometry(header);\n      this.setStickyHeaderOffset(renderedVariant);\n    }\n  }\n\n  private cancelHeaderGeometrySync() {\n    if (this.headerGeometryFrame !== null) cancelAnimationFrame(this.headerGeometryFrame);\n    this.headerGeometryFrame = null;\n  }\n\n  private scheduleHeaderGeometrySync(header: BarTitleElement) {\n    this.cancelHeaderGeometrySync();\n    let framesRemaining = ShellPage.MAX_HEADER_GEOMETRY_FRAMES;\n    let framesElapsed = 0;\n    const sync = () => {\n      if (this.headerEl !== header) return;\n      framesRemaining -= 1;\n      framesElapsed += 1;\n      // In WebKit a child's componentDidLoad can precede its assignment into\n      // the parent's rendered slot. Revalidate after ShellApp has had a frame\n      // to expose the actual content scroller.\n      this.connectScrollRoot();\n      this.syncRenderedHeaderGeometry(header);\n      const geometryReady =\n        this.effectiveVariant !== 'expanded' ||\n        (this.expandedHeaderHeight > 0 && this.headerTravel > 0);\n      if (\n        (geometryReady && this.scrollRootResolved && framesElapsed >= 2) ||\n        framesRemaining <= 0\n      ) {\n        this.headerGeometryFrame = null;\n        return;\n      }\n      this.headerGeometryFrame = requestAnimationFrame(sync);\n    };\n    this.headerGeometryFrame = requestAnimationFrame(sync);\n  }\n\n  private cancelHeaderReveal() {\n    if (this.headerRevealFrame !== null) cancelAnimationFrame(this.headerRevealFrame);\n    this.headerRevealFrame = null;\n    this.headerEl?.removeAttribute('data-shell-page-syncing');\n  }\n\n  private revealHeaderWhenSynced(header: BarTitleElement, variant: BarTitleVariant) {\n    // Stencil normally re-renders within a frame or two of a prop change. Stop\n    // polling at the cap, but fail closed: a stale variant must never paint.\n    let framesRemaining = ShellPage.MAX_HEADER_REVEAL_FRAMES;\n    const reveal = () => {\n      if (this.headerEl !== header) {\n        header.removeAttribute('data-shell-page-syncing');\n        return;\n      }\n      framesRemaining -= 1;\n      if (header.classList.contains(this.variantClass(variant))) {\n        header.removeAttribute('data-shell-page-syncing');\n        this.headerRevealFrame = null;\n        return;\n      }\n      if (framesRemaining <= 0) {\n        this.headerRevealFrame = null;\n        return;\n      }\n      this.headerRevealFrame = requestAnimationFrame(reveal);\n    };\n    this.headerRevealFrame = requestAnimationFrame(reveal);\n  }\n\n  private syncHeaderVariant(concealUntilSynced = false) {\n    const header = this.headerEl;\n    if (!header) return;\n\n    this.syncHeaderDividerInset();\n    if (!this.headerContractResolved) {\n      this.cancelHeaderReveal();\n      header.setAttribute('data-shell-page-syncing', '');\n      return;\n    }\n\n    const next = this.effectiveVariant;\n    const renderedVariantIsStale = !header.classList.contains(this.variantClass(next));\n    if (!renderedVariantIsStale) this.syncRenderedHeaderGeometry(header);\n    if (concealUntilSynced) {\n      this.cancelHeaderReveal();\n      header.setAttribute('data-shell-page-syncing', '');\n    }\n    if (header.variant !== next) header.variant = next;\n    if (concealUntilSynced) {\n      this.revealHeaderWhenSynced(header, next);\n    }\n  }\n\n  private observeHeader(header: BarTitleElement | null) {\n    this.cancelHeaderReveal();\n    this.cancelHeaderGeometrySync();\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.headerMutationObserver?.disconnect();\n    this.headerMutationObserver = null;\n    this.headerEl?.style.removeProperty('--ds-bar-title-divider-inset');\n    this.headerEl = header;\n    this.expandedHeaderHeight = 0;\n    this.expandedGeometryFrozen = false;\n    this.setHeaderTravel(0);\n    this.setSpacerHeight(0);\n    this.stickyHeaderEl?.style.setProperty('--ds-shell-page-sticky-offset', '0px');\n\n    if (!header) return;\n    if (header.classList.contains(this.variantClass('expanded'))) {\n      this.captureExpandedHeaderGeometry(header);\n    }\n    if (typeof ResizeObserver !== 'undefined') {\n      this.headerResizeObserver = new ResizeObserver(() => {\n        this.syncRenderedHeaderGeometry(header);\n      });\n      this.headerResizeObserver.observe(header);\n    }\n    if (typeof MutationObserver !== 'undefined') {\n      this.headerMutationObserver = new MutationObserver(() => {\n        this.syncRenderedHeaderGeometry(header);\n      });\n      this.headerMutationObserver.observe(header, {\n        attributes: true,\n        attributeFilter: ['class'],\n        childList: true,\n        subtree: true,\n      });\n    }\n    this.syncHeaderVariant(true);\n    this.scheduleHeaderGeometrySync(header);\n  }\n\n  private handleHeaderSlotChange = (event: Event) => {\n    if (this.responsiveMode === 'mobile') return;\n    const slot = event.target as HTMLSlotElement;\n    const header = slot\n      .assignedElements()\n      .find(element => element.tagName.toLowerCase() === 'ds-bar-title');\n    this.observeHeader((header as BarTitleElement | undefined) ?? null);\n  };\n\n  render() {\n    const mobile = this.responsiveMode === 'mobile';\n    return (\n      <Host\n        role=\"main\"\n        class={{\n          'shell-page-host--inset-default': this.contentInset === 'default',\n          'shell-page-host--inset-none': this.contentInset === 'none',\n          'shell-page-host--surface-primary': this.contentSurface === 'primary',\n          'shell-page-host--surface-secondary': this.contentSurface === 'secondary',\n          'shell-page-host--mobile': mobile,\n          [`shell-page-host--header-${this.effectiveVariant}`]: true,\n        }}\n      >\n        <div\n          ref={el => {\n            this.sentinelEl = el ?? null;\n          }}\n          class=\"shell-page__scroll-sentinel\"\n          aria-hidden=\"true\"\n        />\n        <div\n          ref={el => {\n            this.stickyHeaderEl = el ?? null;\n          }}\n          class=\"shell-page__sticky-header\"\n        >\n          <div\n            class=\"shell-page__desktop-header\"\n            hidden={mobile}\n            aria-hidden={mobile ? 'true' : undefined}\n            inert={mobile ? true : undefined}\n          >\n            <slot name=\"header\" onSlotchange={this.handleHeaderSlotChange} />\n          </div>\n          <div\n            class=\"shell-page__mobile-header\"\n            hidden={!mobile}\n            aria-hidden={!mobile ? 'true' : undefined}\n            inert={!mobile ? true : undefined}\n          >\n            <slot name=\"mobile-header\" />\n          </div>\n        </div>\n        <div\n          ref={el => {\n            this.spacerEl = el ?? null;\n          }}\n          class=\"shell-page__flow-spacer\"\n          aria-hidden=\"true\"\n        />\n        <div class=\"shell-page__content\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { ShellResponsiveMode } from '../../shell/shell-responsive';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport type { BarTitleVariant } from '../BarTitle/bar-title-types';\nimport { resolveShellPageHeaderVariant } from './shell-page-responsive';\nimport type {\n  ShellPageCapacity,\n  ShellPageContentInset,\n  ShellPageContentSurface,\n  ShellPageHeaderPresentation,\n} from './shell-page-types';\n\ntype BarTitleElement = HTMLElement & { variant: BarTitleVariant };\n\n@Component({\n  tag: 'ds-shell-page',\n  styleUrl: 'ShellPage.css',\n  scoped: true,\n})\nexport class ShellPage {\n  private static readonly MAX_HEADER_REVEAL_FRAMES = 12;\n  private static readonly MAX_HEADER_GEOMETRY_FRAMES = 12;\n\n  @Element() el!: HTMLElement;\n\n  /** Automatic capacity/scroll behavior, or an explicit header variant override. */\n  @Prop() headerPresentation: ShellPageHeaderPresentation = 'auto';\n\n  /** Available page-header capacity supplied by the owning application shell. */\n  @Prop() headerCapacity?: ShellPageCapacity;\n\n  /** Standard page gutters, or no inset for full-bleed page content. */\n  @Prop() contentInset: ShellPageContentInset = 'default';\n\n  /** Preserve the responsive side/end gutters while allowing content to meet the header. */\n  @Prop() contentInsetBlockStart: ShellPageContentInset = 'default';\n\n  /** Exact block-start content inset, overriding the responsive default when provided. */\n  @Prop() contentInsetBlockStartSize?: string;\n\n  /** Exact block-start content inset while the header is compact or constrained. */\n  @Prop() compactContentInsetBlockStartSize?: string;\n\n  /** Allow roomy automatic headers to compact as the page scrolls. */\n  @Prop() scrollCompaction: boolean = true;\n\n  /** Canvas surface painted around and beneath routed page content. */\n  @Prop() contentSurface: ShellPageContentSurface = 'primary';\n\n  /** Explicit shell breakpoint presentation. Mobile uses the dedicated mobile-header slot. */\n  @Prop({ attribute: 'responsive-mode', reflect: true })\n  responsiveMode: ShellResponsiveMode = 'desktop';\n\n  @State() private pageTopVisible = true;\n\n  private sentinelEl: HTMLElement | null = null;\n  private spacerEl: HTMLElement | null = null;\n  private stickyHeaderEl: HTMLElement | null = null;\n  private headerEl: BarTitleElement | null = null;\n  private expandedHeaderHeight = 0;\n  private headerTravel = 0;\n  private expandedGeometryFrozen = false;\n  private headerResizeObserver: ResizeObserver | null = null;\n  private headerMutationObserver: MutationObserver | null = null;\n  private headerRevealFrame: number | null = null;\n  private headerGeometryFrame: number | null = null;\n  private reconnectFrame: number | null = null;\n  private scrollRoot: HTMLElement | Window | null = null;\n  private hasLoaded = false;\n\n  @Watch('headerCapacity')\n  @Watch('headerPresentation')\n  @Watch('scrollCompaction')\n  handleHeaderContractChange() {\n    this.syncHeaderVariant(true);\n  }\n\n  @Watch('responsiveMode')\n  handleResponsiveModeChange() {\n    this.observeHeader(this.responsiveMode === 'mobile' ? null : this.findHeader());\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.connectRuntime();\n  }\n\n  componentDidRender() {\n    this.syncHeaderVariant();\n  }\n\n  connectedCallback() {\n    if (!this.hasLoaded) return;\n    if (this.reconnectFrame !== null) cancelAnimationFrame(this.reconnectFrame);\n    this.reconnectFrame = requestAnimationFrame(() => {\n      this.reconnectFrame = null;\n      if (this.el.isConnected) this.connectRuntime();\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.reconnectFrame !== null) cancelAnimationFrame(this.reconnectFrame);\n    this.reconnectFrame = null;\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.headerMutationObserver?.disconnect();\n    this.headerMutationObserver = null;\n    this.cancelHeaderReveal();\n    this.cancelHeaderGeometrySync();\n    this.headerEl?.style.removeProperty('--ds-bar-title-divider-inset');\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = null;\n  }\n\n  private connectRuntime() {\n    this.observeHeader(this.responsiveMode === 'mobile' ? null : this.findHeader());\n    this.connectScrollRoot();\n  }\n\n  private get effectiveVariant(): BarTitleVariant {\n    return resolveShellPageHeaderVariant(\n      this.headerPresentation,\n      this.headerCapacity ?? 'roomy',\n      this.scrollCompaction ? this.pageTopVisible : true\n    );\n  }\n\n  private get headerContractResolved(): boolean {\n    return this.headerPresentation !== 'auto' || this.headerCapacity !== undefined;\n  }\n\n  private get isScrollCompacted(): boolean {\n    return (\n      this.scrollCompaction &&\n      this.headerPresentation === 'auto' &&\n      this.headerCapacity === 'roomy' &&\n      !this.pageTopVisible\n    );\n  }\n\n  private get contentInsetStyles(): { [name: string]: string } {\n    const styles: { [name: string]: string } = {};\n    const expanded = this.contentInsetBlockStartSize?.trim();\n    const compact = this.compactContentInsetBlockStartSize?.trim();\n    if (expanded) styles['--ds-shell-page-content-block-start-inset'] = expanded;\n    if (compact) styles['--ds-shell-page-compact-content-block-start-inset'] = compact;\n    return styles;\n  }\n\n  private composedParent(element: Element): Element | null {\n    return (element as HTMLElement).assignedSlot?.parentElement ?? element.parentElement;\n  }\n\n  private findScrollRoot(): HTMLElement | Window {\n    let ancestor = this.composedParent(this.el);\n    while (ancestor && ancestor !== document.documentElement) {\n      const overflow = getComputedStyle(ancestor).overflowY;\n      if (overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay') {\n        return ancestor as HTMLElement;\n      }\n      ancestor = this.composedParent(ancestor);\n    }\n    return window;\n  }\n\n  private connectScrollRoot() {\n    const next = this.findScrollRoot();\n    if (next === this.scrollRoot) return;\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = next;\n    this.scrollRoot.addEventListener('scroll', this.handleScroll, { passive: true });\n    this.handleScroll();\n  }\n\n  private get scrollRootResolved(): boolean {\n    const shell = this.el.closest('ds-shell-app');\n    if (!shell) return true;\n    const expected = shell.querySelector<HTMLElement>('.shell-app__content');\n    return expected !== null && this.scrollRoot === expected;\n  }\n\n  private handleScroll = () => {\n    if (!this.sentinelEl || !this.scrollRoot) return;\n    const rootTop =\n      this.scrollRoot === window ? 0 : (this.scrollRoot as HTMLElement).getBoundingClientRect().top;\n    this.syncHeaderDividerInset(rootTop);\n    const nextPageTopVisible = this.sentinelEl.getBoundingClientRect().top >= rootTop;\n    if (\n      this.scrollCompaction &&\n      !nextPageTopVisible &&\n      this.pageTopVisible &&\n      this.headerEl?.classList.contains(this.variantClass('expanded'))\n    ) {\n      this.captureExpandedHeaderGeometry(this.headerEl);\n      this.expandedGeometryFrozen = true;\n    }\n    if (\n      nextPageTopVisible &&\n      this.expandedGeometryFrozen &&\n      this.el.getBoundingClientRect().top >= rootTop\n    ) {\n      this.expandedGeometryFrozen = false;\n      if (this.headerEl?.classList.contains(this.variantClass('expanded'))) {\n        this.captureExpandedHeaderGeometry(this.headerEl);\n      }\n    }\n    this.pageTopVisible = nextPageTopVisible;\n  };\n\n  private findHeader(): BarTitleElement | null {\n    return this.el.querySelector<BarTitleElement>('ds-bar-title');\n  }\n\n  private get compactHeaderHeight(): number {\n    return resolveCssLengthPx('--dimension-size-600', 0);\n  }\n\n  private syncHeaderDividerInset(rootTop?: number) {\n    const header = this.headerEl;\n    if (!header) return;\n\n    const ownsScrollTransition =\n      this.scrollCompaction &&\n      this.headerPresentation === 'auto' &&\n      this.headerCapacity === 'roomy';\n    const expandedInset = resolveCssLengthPx('--dimension-space-400', 0);\n    if (\n      !ownsScrollTransition ||\n      !this.sentinelEl ||\n      !this.scrollRoot ||\n      this.headerTravel <= 0 ||\n      expandedInset <= 0\n    ) {\n      header.style.removeProperty('--ds-bar-title-divider-inset');\n      return;\n    }\n\n    const scrollRootTop =\n      rootTop ??\n      (this.scrollRoot === window\n        ? 0\n        : (this.scrollRoot as HTMLElement).getBoundingClientRect().top);\n    const remainingTravel = this.sentinelEl.getBoundingClientRect().top - scrollRootTop;\n    const progress = Math.min(1, Math.max(0, 1 - remainingTravel / this.headerTravel));\n    header.style.setProperty('--ds-bar-title-divider-inset', `${expandedInset * (1 - progress)}px`);\n  }\n\n  private setHeaderTravel(distance: number) {\n    const next = Math.max(0, distance);\n    if (Math.abs(next - this.headerTravel) < 0.5) return;\n    this.headerTravel = next;\n    this.el.style.setProperty('--ds-shell-page-header-travel', `${next}px`);\n    this.handleScroll();\n  }\n\n  private measureHeaderTravel(header: BarTitleElement) {\n    const anchor = header.querySelector<HTMLElement>('[data-shell-page-header-anchor]');\n    const compactHeight = this.compactHeaderHeight;\n    if (!anchor || compactHeight <= 0) return;\n\n    const headerRect = header.getBoundingClientRect();\n    const anchorRect = anchor.getBoundingClientRect();\n    if (headerRect.height <= 0 || anchorRect.height <= 0) return;\n\n    const expandedAnchorTop = anchorRect.top - headerRect.top;\n    const compactAnchorTop = Math.max(0, (compactHeight - anchorRect.height) / 2);\n    this.setHeaderTravel(expandedAnchorTop - compactAnchorTop);\n  }\n\n  private captureExpandedHeaderGeometry(header: BarTitleElement) {\n    // Keep the largest observed expanded geometry for this header instance.\n    // During a variant handoff Chromium can briefly report the compact box\n    // before the child host class mutation is delivered; that transient must\n    // not erase the flow reservation captured at the roomy page top.\n    this.expandedHeaderHeight = Math.max(\n      this.expandedHeaderHeight,\n      header.getBoundingClientRect().height\n    );\n    this.measureHeaderTravel(header);\n  }\n\n  private setSpacerHeight(height: number) {\n    if (!this.spacerEl) return;\n    this.spacerEl.style.setProperty('--ds-shell-page-flow-spacer', `${Math.max(0, height)}px`);\n  }\n\n  private variantClass(variant: BarTitleVariant): string {\n    return `bar-title-host--${variant}`;\n  }\n\n  private setStickyHeaderOffset(renderedVariant: BarTitleVariant) {\n    this.stickyHeaderEl?.style.setProperty(\n      '--ds-shell-page-sticky-offset',\n      renderedVariant === 'expanded' &&\n        this.scrollCompaction &&\n        this.headerPresentation === 'auto' &&\n        this.headerCapacity === 'roomy'\n        ? `${-this.headerTravel}px`\n        : '0px'\n    );\n  }\n\n  private syncRenderedHeaderGeometry(header: BarTitleElement) {\n    const renderedVariant = this.effectiveVariant;\n    if (!header.classList.contains(this.variantClass(renderedVariant))) return;\n\n    const renderedHeight = header.getBoundingClientRect().height;\n    if (renderedHeight > 0) {\n      this.el.style.setProperty('--ds-shell-page-sticky-header-block-size', `${renderedHeight}px`);\n    }\n\n    // Update both flow-preservation pieces before reading layout. Otherwise a\n    // reverse compact → expanded render can briefly contain the tall header and\n    // the compact spacer together, giving browser scroll anchoring a transient\n    // height change to compensate.\n    this.setSpacerHeight(\n      this.isScrollCompacted ? this.expandedHeaderHeight - this.compactHeaderHeight : 0\n    );\n    this.setStickyHeaderOffset(renderedVariant);\n\n    if (renderedVariant === 'expanded' && !this.expandedGeometryFrozen) {\n      this.captureExpandedHeaderGeometry(header);\n      this.setStickyHeaderOffset(renderedVariant);\n    }\n  }\n\n  private cancelHeaderGeometrySync() {\n    if (this.headerGeometryFrame !== null) cancelAnimationFrame(this.headerGeometryFrame);\n    this.headerGeometryFrame = null;\n  }\n\n  private scheduleHeaderGeometrySync(header: BarTitleElement) {\n    this.cancelHeaderGeometrySync();\n    let framesRemaining = ShellPage.MAX_HEADER_GEOMETRY_FRAMES;\n    let framesElapsed = 0;\n    const sync = () => {\n      if (this.headerEl !== header) return;\n      framesRemaining -= 1;\n      framesElapsed += 1;\n      // In WebKit a child's componentDidLoad can precede its assignment into\n      // the parent's rendered slot. Revalidate after ShellApp has had a frame\n      // to expose the actual content scroller.\n      this.connectScrollRoot();\n      this.syncRenderedHeaderGeometry(header);\n      const geometryReady =\n        this.effectiveVariant !== 'expanded' ||\n        (this.expandedHeaderHeight > 0 && this.headerTravel > 0);\n      if (\n        (geometryReady && this.scrollRootResolved && framesElapsed >= 2) ||\n        framesRemaining <= 0\n      ) {\n        this.headerGeometryFrame = null;\n        return;\n      }\n      this.headerGeometryFrame = requestAnimationFrame(sync);\n    };\n    this.headerGeometryFrame = requestAnimationFrame(sync);\n  }\n\n  private cancelHeaderReveal() {\n    if (this.headerRevealFrame !== null) cancelAnimationFrame(this.headerRevealFrame);\n    this.headerRevealFrame = null;\n    this.headerEl?.removeAttribute('data-shell-page-syncing');\n  }\n\n  private revealHeaderWhenSynced(header: BarTitleElement, variant: BarTitleVariant) {\n    // Stencil normally re-renders within a frame or two of a prop change. Stop\n    // polling at the cap, but fail closed: a stale variant must never paint.\n    let framesRemaining = ShellPage.MAX_HEADER_REVEAL_FRAMES;\n    const reveal = () => {\n      if (this.headerEl !== header) {\n        header.removeAttribute('data-shell-page-syncing');\n        return;\n      }\n      framesRemaining -= 1;\n      if (header.classList.contains(this.variantClass(variant))) {\n        header.removeAttribute('data-shell-page-syncing');\n        this.headerRevealFrame = null;\n        return;\n      }\n      if (framesRemaining <= 0) {\n        this.headerRevealFrame = null;\n        return;\n      }\n      this.headerRevealFrame = requestAnimationFrame(reveal);\n    };\n    this.headerRevealFrame = requestAnimationFrame(reveal);\n  }\n\n  private syncHeaderVariant(concealUntilSynced = false) {\n    const header = this.headerEl;\n    if (!header) return;\n\n    this.syncHeaderDividerInset();\n    if (!this.headerContractResolved) {\n      this.cancelHeaderReveal();\n      header.setAttribute('data-shell-page-syncing', '');\n      return;\n    }\n\n    const next = this.effectiveVariant;\n    const renderedVariantIsStale = !header.classList.contains(this.variantClass(next));\n    if (!renderedVariantIsStale) this.syncRenderedHeaderGeometry(header);\n    if (renderedVariantIsStale && this.isScrollCompacted) {\n      // Preserve the expanded flow before asking BarTitle to become compact.\n      // This prevents the sentinel from moving back into view during the\n      // parent/child render handoff and keeps the variant transition stable.\n      this.setSpacerHeight(this.expandedHeaderHeight - this.compactHeaderHeight);\n      this.setStickyHeaderOffset(next);\n    }\n    if (concealUntilSynced) {\n      this.cancelHeaderReveal();\n      header.setAttribute('data-shell-page-syncing', '');\n    }\n    if (header.variant !== next) {\n      header.variant = next;\n      // The child update and its MutationObserver callback can land in\n      // different phases across engines. Poll the rendered class as the\n      // authoritative handoff before committing sticky/spacer geometry.\n      this.scheduleHeaderGeometrySync(header);\n    }\n    if (concealUntilSynced) {\n      this.revealHeaderWhenSynced(header, next);\n    }\n  }\n\n  private observeHeader(header: BarTitleElement | null) {\n    this.cancelHeaderReveal();\n    this.cancelHeaderGeometrySync();\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.headerMutationObserver?.disconnect();\n    this.headerMutationObserver = null;\n    this.headerEl?.style.removeProperty('--ds-bar-title-divider-inset');\n    this.headerEl = header;\n    this.expandedHeaderHeight = 0;\n    this.expandedGeometryFrozen = false;\n    this.setHeaderTravel(0);\n    this.setSpacerHeight(0);\n    this.stickyHeaderEl?.style.setProperty('--ds-shell-page-sticky-offset', '0px');\n\n    if (!header) return;\n    if (header.classList.contains(this.variantClass('expanded'))) {\n      this.captureExpandedHeaderGeometry(header);\n    }\n    if (typeof ResizeObserver !== 'undefined') {\n      this.headerResizeObserver = new ResizeObserver(() => {\n        this.syncRenderedHeaderGeometry(header);\n      });\n      this.headerResizeObserver.observe(header);\n    }\n    if (typeof MutationObserver !== 'undefined') {\n      this.headerMutationObserver = new MutationObserver(() => {\n        this.syncRenderedHeaderGeometry(header);\n      });\n      this.headerMutationObserver.observe(header, {\n        attributes: true,\n        attributeFilter: ['class'],\n        childList: true,\n        subtree: true,\n      });\n    }\n    this.syncHeaderVariant(true);\n    this.scheduleHeaderGeometrySync(header);\n  }\n\n  private handleHeaderSlotChange = (event: Event) => {\n    if (this.responsiveMode === 'mobile') return;\n    const slot = event.target as HTMLSlotElement;\n    const header = slot\n      .assignedElements()\n      .find(element => element.tagName.toLowerCase() === 'ds-bar-title');\n    this.observeHeader((header as BarTitleElement | undefined) ?? null);\n  };\n\n  render() {\n    const mobile = this.responsiveMode === 'mobile';\n    return (\n      <Host\n        role=\"main\"\n        style={this.contentInsetStyles}\n        class={{\n          'shell-page-host--inset-default': this.contentInset === 'default',\n          'shell-page-host--inset-none': this.contentInset === 'none',\n          'shell-page-host--block-start-inset-none': this.contentInsetBlockStart === 'none',\n          'shell-page-host--surface-primary': this.contentSurface === 'primary',\n          'shell-page-host--surface-secondary': this.contentSurface === 'secondary',\n          'shell-page-host--mobile': mobile,\n          [`shell-page-host--header-${this.effectiveVariant}`]: true,\n        }}\n      >\n        <div\n          ref={el => {\n            this.sentinelEl = el ?? null;\n          }}\n          class=\"shell-page__scroll-sentinel\"\n          aria-hidden=\"true\"\n        />\n        <div\n          ref={el => {\n            this.stickyHeaderEl = el ?? null;\n          }}\n          class=\"shell-page__sticky-header\"\n        >\n          <div\n            class=\"shell-page__desktop-header\"\n            hidden={mobile}\n            aria-hidden={mobile ? 'true' : undefined}\n            inert={mobile ? true : undefined}\n          >\n            <slot name=\"header\" onSlotchange={this.handleHeaderSlotChange} />\n          </div>\n          <div\n            class=\"shell-page__mobile-header\"\n            hidden={!mobile}\n            aria-hidden={!mobile ? 'true' : undefined}\n            inert={!mobile ? true : undefined}\n          >\n            <slot name=\"mobile-header\" />\n          </div>\n        </div>\n        <div\n          ref={el => {\n            this.spacerEl = el ?? null;\n          }}\n          class=\"shell-page__flow-spacer\"\n          aria-hidden=\"true\"\n        />\n        <div class=\"shell-page__content\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {