@ds-mo/ui 14.36.0 → 15.0.0

package/dist/mcp-data/registry/panel-tools.json

@@ -495,7 +495,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -523,12 +523,12 @@
     },
     {
       "path": "src/wc/components/PanelTools/PanelTools.tsx",
-      "content": "import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  State,\n  Watch,\n  Method,\n  Listen,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../shell/chrome-transition';\nimport { ANCHORED_OVERLAY_BOUNDARY_ATTRIBUTE } from '../../utils/anchored-overlay-boundary';\nimport {\n  PANEL_TOOLS_LABELS,\n  PANEL_TOOLS_SHORTCUTS,\n  type PanelToolsHeaderAction,\n  type PanelToolsHeaderActionDetail,\n  type PanelToolsHeaderConfig,\n  type PanelToolsHeaders,\n  type PanelToolsItem,\n  type PanelToolsRailAccessory,\n  type PanelToolsRailAccessoryAction,\n  type PanelToolsRailAccessoryActionDetail,\n  type PanelToolsRailShortcutAccessory,\n  type PanelToolsRailTransientAccessory,\n  type PanelToolsToolId,\n} from './panel-tools-types';\nimport {\n  isPanelToolsToolId,\n  orderPanelToolsRailEntries,\n  orderPanelToolsItems,\n  panelToolsRailAccessoryActionDetail,\n  panelToolsRailFocusKeys,\n  panelToolsDrawerAtTerminal,\n  panelToolsDrawerResting,\n  panelToolsDrawerTransitionMs,\n  panelToolsRailPlacement,\n  reconcilePanelToolsAvailability,\n  reconcilePanelToolsRovingIndex,\n  resolvePanelToolActivation,\n  type PanelToolsRailEntry,\n} from './panel-tools-utils';\n\n@Component({\n  tag: 'ds-panel-tools',\n  styleUrl: 'PanelTools.css',\n  shadow: true,\n})\nexport class PanelTools {\n  @Element() el!: HTMLElement;\n\n  /** When false, only the icon rail is shown. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Drawer presentation or presentation covering the shell stage for the active tool. */\n  @Prop({ mutable: true, reflect: true }) presentation: 'drawer' | 'fullscreen' = 'drawer';\n\n  /** Let a fullscreen product supply independent master/detail headers inside its view. */\n  @Prop({ attribute: 'fullscreen-header-mode', reflect: true })\n  fullscreenHeaderMode: 'shared' | 'split' = 'shared';\n\n  /** Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`. */\n  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n  activeTool: PanelToolsToolId | '' = '';\n\n  /**\n   * Rail items rendered in the right column.\n   * Set via JS property: `el.items = [...]`. Replace the array reference to update.\n   */\n  @Prop() items: PanelToolsItem[] = [];\n\n  /**\n   * Desktop/tablet-only application-owned rail boundaries and direct intents.\n   * Set via JS property and replace the array reference to update.\n   */\n  @Prop() accessories: PanelToolsRailAccessory[] = [];\n\n  @Prop() toolsLabel: string = 'Tools';\n  @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n\n  /** Active header state per tool. Replace the object when title, depth, or actions change. */\n  @Prop() headers: PanelToolsHeaders = {};\n\n  /**\n   * Optional localStorage key for the last active tool. The drawer always starts\n   * closed; only the tool identity is restored for continuity within this browser.\n   */\n  @Prop({ attribute: 'storage-key' }) storageKey: string = '';\n\n  /** Emitted when a rail button is toggled. Detail = { id, selected }. */\n  @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }>;\n\n  /** Emitted when fullscreen changes, including Escape-initiated exits. */\n  @Event({ bubbles: true, composed: true }) dsPresentationChange!: EventEmitter<{\n    presentation: 'drawer' | 'fullscreen';\n  }>;\n\n  /** Requests navigation to the active tool's parent view. */\n  @Event({ bubbles: true, composed: true }) dsHeaderBack!: EventEmitter<{\n    tool: PanelToolsToolId;\n  }>;\n\n  /** Requests one application-owned action from the active tool header. */\n  @Event({ bubbles: true, composed: true })\n  dsHeaderAction!: EventEmitter<PanelToolsHeaderActionDetail>;\n\n  /** Direct accessory intent. Emitting this event never changes the active tool or drawer. */\n  @Event({ bubbles: true, composed: true })\n  dsRailAccessoryAction!: EventEmitter<PanelToolsRailAccessoryActionDetail>;\n\n  /** Bubbling lifecycle — `ds-bar-nav` defers overflow checks during drawer motion. */\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n  /** Arms open vs close easing for the in-flight width transition. */\n  @State() private motion: 'opening' | 'closing' | 'idle' = 'idle';\n\n  /** Keeps header and slotted content painted until the closing clip transition completes. */\n  @State() private drawerSurfaceRetained = false;\n\n  /** Suppresses width transition until the host has painted its initial open state. */\n  @State() private readyForMotion = false;\n\n  /** Fullscreen presentation changes snap without borrowing drawer width motion. */\n  @State() private presentationMotionSuppressed = false;\n\n  @State() private rovingIndex = 0;\n  @State() private fullViewToolIds: PanelToolsToolId[] = [];\n  @State() private railBodyScrollable = false;\n\n  private motionEnableGeneration = 0;\n  private presentationMotionGeneration = 0;\n  private transitionGeneration = 0;\n  private transitionFallbackTimer: number | null = null;\n  /** Ignores the old transition's terminal event when reversing direction. */\n  private ignoreReplacementTerminal = false;\n  private focusBeforeFullscreen: HTMLElement | null = null;\n  private fullViewObserver: MutationObserver | null = null;\n  private railBodyEl?: HTMLElement;\n  private railBodyObserver?: ResizeObserver;\n\n  private get railItems(): PanelToolsItem[] {\n    return this.items ?? [];\n  }\n\n  private get orderedRailItems(): PanelToolsItem[] {\n    return orderPanelToolsItems(this.railItems);\n  }\n\n  private get railAccessories(): PanelToolsRailAccessory[] {\n    return this.accessories ?? [];\n  }\n\n  private get orderedRailEntries(): PanelToolsRailEntry[] {\n    return orderPanelToolsRailEntries(this.railItems, this.railAccessories);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('transitionend', this.handleTransitionEnd);\n    this.el.removeEventListener('transitioncancel', this.handleTransitionEnd);\n    this.el.removeEventListener('dsAction', this.handleComposedHeaderAction);\n    this.clearTransitionCompletion();\n    this.motionEnableGeneration += 1;\n    this.fullViewObserver?.disconnect();\n    this.fullViewObserver = null;\n    this.disconnectRailBodyObserver();\n  }\n\n  @Watch('presentation')\n  presentationChanged(next: 'drawer' | 'fullscreen', previous?: 'drawer' | 'fullscreen') {\n    if (next === previous) return;\n    // Framework property bindings can update slotted master/detail content in\n    // the same render that requests fullscreen. Reflect the host selector\n    // immediately so that content cannot paint once in the drawer geometry\n    // while Stencil waits to commit its next render.\n    if (this.el.getAttribute('presentation') !== next) {\n      this.el.setAttribute('presentation', next);\n    }\n    const presentationGeneration = ++this.presentationMotionGeneration;\n    this.presentationMotionSuppressed = true;\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (presentationGeneration !== this.presentationMotionGeneration) return;\n        this.presentationMotionSuppressed = false;\n      });\n    });\n    if (next === 'fullscreen') {\n      this.focusBeforeFullscreen =\n        document.activeElement instanceof HTMLElement ? document.activeElement : null;\n      this.open = true;\n    } else if (previous === 'fullscreen') {\n      const focusBeforeFullscreen = this.focusBeforeFullscreen;\n      const fallbackActionId = this.activeHeader().actions?.[0]?.id;\n      requestAnimationFrame(async () => {\n        if (focusBeforeFullscreen?.isConnected) {\n          focusBeforeFullscreen.focus({ preventScroll: true });\n        }\n        const focusRestored = focusBeforeFullscreen\n          ? document.activeElement === focusBeforeFullscreen ||\n            focusBeforeFullscreen.contains(document.activeElement)\n          : false;\n        if (!focusRestored && fallbackActionId) await this.focusHeaderAction(fallbackActionId);\n        this.focusBeforeFullscreen = null;\n      });\n    }\n    this.dsPresentationChange.emit({ presentation: next });\n  }\n\n  @Listen('keydown', { target: 'window', capture: true })\n  handleFullscreenEscape(event: KeyboardEvent) {\n    if (this.presentation !== 'fullscreen' || event.key !== 'Escape') return;\n    event.preventDefault();\n    event.stopPropagation();\n    this.presentation = 'drawer';\n  }\n\n  private deferMotionEnable() {\n    if (this.readyForMotion) return;\n    const generation = ++this.motionEnableGeneration;\n    requestAnimationFrame(() => {\n      if (generation !== this.motionEnableGeneration) return;\n      requestAnimationFrame(() => {\n        if (generation !== this.motionEnableGeneration) return;\n        this.readyForMotion = true;\n      });\n    });\n  }\n\n  connectedCallback() {\n    this.el.setAttribute(ANCHORED_OVERLAY_BOUNDARY_ATTRIBUTE, '');\n    this.el.addEventListener('transitionend', this.handleTransitionEnd);\n    this.el.addEventListener('transitioncancel', this.handleTransitionEnd);\n    this.el.addEventListener('dsAction', this.handleComposedHeaderAction);\n  }\n\n  private handleComposedHeaderAction = (event: Event) => {\n    const detail = (event as CustomEvent<{ id?: string; anchor?: HTMLElement }>).detail;\n    if (!this.activeTool || !detail?.id) return;\n    event.stopPropagation();\n    this.dsHeaderAction.emit({\n      tool: this.activeTool,\n      id: detail.id,\n      anchor: detail.anchor,\n    });\n  };\n\n  componentWillLoad() {\n    this.restoreLastActiveTool();\n    this.drawerSurfaceRetained = this.open;\n  }\n\n  @Watch('open')\n  openChanged(isOpen: boolean, wasOpen?: boolean) {\n    if (isOpen) this.drawerSurfaceRetained = true;\n    if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {\n      this.startDrawerTransition(isOpen ? 'opening' : 'closing');\n    } else if (!isOpen) {\n      this.drawerSurfaceRetained = false;\n    }\n    this.deferMotionEnable();\n  }\n\n  @Watch('activeTool')\n  activeToolChanged() {\n    this.persistLastActiveTool();\n    this.deferMotionEnable();\n  }\n\n  @Watch('storageKey')\n  storageKeyChanged() {\n    this.restoreLastActiveTool();\n  }\n\n  componentDidLoad() {\n    this.deferMotionEnable();\n    this.connectRailBodyObserver();\n    this.updateRailBodyScrollable();\n    this.syncFullViewTools();\n    this.fullViewObserver = new MutationObserver(() => this.syncFullViewTools());\n    this.fullViewObserver.observe(this.el, {\n      childList: true,\n      attributes: true,\n      attributeFilter: ['slot'],\n    });\n  }\n\n  componentDidRender() {\n    this.updateRailBodyScrollable();\n  }\n\n  private connectRailBodyObserver() {\n    this.disconnectRailBodyObserver();\n    if (!this.railBodyEl || typeof ResizeObserver === 'undefined') return;\n    this.railBodyObserver = new ResizeObserver(() => this.updateRailBodyScrollable());\n    this.railBodyObserver.observe(this.railBodyEl);\n  }\n\n  private disconnectRailBodyObserver() {\n    this.railBodyObserver?.disconnect();\n    this.railBodyObserver = undefined;\n  }\n\n  private updateRailBodyScrollable() {\n    const next = Boolean(\n      this.railBodyEl && this.railBodyEl.scrollHeight > this.railBodyEl.clientHeight + 1\n    );\n    if (next !== this.railBodyScrollable) this.railBodyScrollable = next;\n  }\n\n  @Watch('items')\n  itemsChanged() {\n    this.rovingIndex = 0;\n    this.reconcileActiveTool();\n    this.deferMotionEnable();\n  }\n\n  @Watch('accessories')\n  accessoriesChanged(\n    next: PanelToolsRailAccessory[] = [],\n    previous: PanelToolsRailAccessory[] = []\n  ) {\n    const previousKeys = panelToolsRailFocusKeys(\n      orderPanelToolsRailEntries(this.railItems, previous)\n    );\n    const nextKeys = panelToolsRailFocusKeys(orderPanelToolsRailEntries(this.railItems, next));\n    const activeElement = (this.renderRoot as ShadowRoot).activeElement as HTMLElement | null;\n    const focusedKey =\n      activeElement?.closest<HTMLElement>('[data-rail-focus-key]')?.dataset.railFocusKey;\n    const focusedIndex = focusedKey ? previousKeys.indexOf(focusedKey) : -1;\n    const currentIndex = focusedIndex >= 0 ? focusedIndex : this.rovingIndex;\n    const nextIndex = reconcilePanelToolsRovingIndex(previousKeys, nextKeys, currentIndex);\n    const restoreFocus = focusedIndex >= 0 && !nextKeys.includes(focusedKey ?? '');\n    this.rovingIndex = nextIndex;\n    if (restoreFocus && nextKeys.length) {\n      requestAnimationFrame(() => this.focusRailAt(nextIndex));\n    }\n  }\n\n  private restoreLastActiveTool() {\n    if (!this.storageKey || this.activeTool) return;\n    try {\n      const stored = localStorage.getItem(this.storageKey);\n      if (isPanelToolsToolId(stored)) this.activeTool = stored;\n    } catch {\n      /* localStorage unavailable */\n    }\n  }\n\n  private persistLastActiveTool() {\n    if (!this.storageKey || !this.activeTool) return;\n    try {\n      localStorage.setItem(this.storageKey, this.activeTool);\n    } catch {\n      /* unavailable */\n    }\n  }\n\n  private clearPersistedTool() {\n    if (!this.storageKey) return;\n    try {\n      localStorage.removeItem(this.storageKey);\n    } catch {\n      /* unavailable */\n    }\n  }\n\n  private reconcileActiveTool() {\n    const next = reconcilePanelToolsAvailability(this.railItems, this.open, this.activeTool);\n    if (!next.removedTool) return;\n    this.clearPersistedTool();\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id: next.removedTool, selected: false });\n  }\n\n  private startDrawerTransition(phase: 'opening' | 'closing') {\n    const drawer = this.renderRoot.querySelector('.panel-tools__drawer') as HTMLElement | null;\n    if (this.motion !== 'idle') {\n      this.finishDrawerTransition();\n      this.ignoreReplacementTerminal = true;\n    }\n    this.motion = phase;\n    this.dsChromeTransitionStart.emit({ source: 'panel-tools', phase });\n    const generation = ++this.transitionGeneration;\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (generation !== this.transitionGeneration || this.motion !== phase) return;\n        if (!drawer) {\n          this.finishDrawerTransition();\n          return;\n        }\n\n        if (this.drawerTransitionAtTerminal(drawer, phase)) {\n          this.finishDrawerTransition();\n          return;\n        }\n\n        const fallbackMs = panelToolsDrawerTransitionMs(getComputedStyle(drawer));\n        if (fallbackMs <= 0) {\n          this.finishDrawerTransition();\n          return;\n        }\n        this.transitionFallbackTimer = window.setTimeout(() => {\n          this.finishDrawerTransition();\n        }, fallbackMs);\n      });\n    });\n  }\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const drawer = this.renderRoot.querySelector('.panel-tools__drawer') as HTMLElement | null;\n    if (event.target !== drawer) return;\n    if (event.propertyName !== 'max-width') return;\n    if (this.ignoreReplacementTerminal) {\n      this.ignoreReplacementTerminal = false;\n      return;\n    }\n    // Changing from the neutral transition recipe to the direction-specific\n    // easing can cancel the transition that the reflected `open` class began.\n    // The replacement transition and its watchdog still own completion; ending\n    // motion here would hide the fixed-width tool surface while it is visible.\n    if (event.type === 'transitioncancel') return;\n    if (drawer && !this.drawerTransitionAtTerminal(drawer, this.motion)) return;\n    this.finishDrawerTransition();\n  };\n\n  private drawerTransitionAtTerminal(\n    drawer: HTMLElement,\n    phase: 'opening' | 'closing' | 'idle'\n  ): boolean {\n    const width = drawer.getBoundingClientRect().width;\n    const surface = drawer.querySelector('.panel-tools__drawer-surface') as HTMLElement | null;\n    const targetWidth = surface?.getBoundingClientRect().width ?? 0;\n    return panelToolsDrawerAtTerminal(width, targetWidth, phase);\n  }\n\n  private finishDrawerTransition() {\n    const completedPhase = this.motion;\n    const wasTransitioning = completedPhase !== 'idle';\n    this.clearTransitionCompletion();\n    if (!wasTransitioning) return;\n    this.ignoreReplacementTerminal = false;\n    this.motion = 'idle';\n    if (completedPhase === 'closing' && !this.open) {\n      this.drawerSurfaceRetained = false;\n    }\n    this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n  }\n\n  private clearTransitionCompletion() {\n    this.transitionGeneration += 1;\n    if (this.transitionFallbackTimer !== null) {\n      window.clearTimeout(this.transitionFallbackTimer);\n      this.transitionFallbackTimer = null;\n    }\n  }\n\n  /** Rail selection follows `open` immediately — independent of the slide animation. */\n  private isRailSelected(id: PanelToolsToolId): boolean {\n    return this.open && this.activeTool === id;\n  }\n\n  /** Drawer body stays mounted while the clip frame animates closed. */\n  private isDrawerPresent(): boolean {\n    return this.open || this.drawerSurfaceRetained;\n  }\n\n  private isViewActive(id: PanelToolsToolId): boolean {\n    return this.isDrawerPresent() && this.activeTool === id;\n  }\n\n  private hasFullView(id: PanelToolsToolId): boolean {\n    return this.fullViewToolIds.includes(id);\n  }\n\n  private syncFullViewTools() {\n    const ids = this.orderedRailItems.map(item => item.id);\n    const next = ids.filter(id => Boolean(this.el.querySelector(`[slot=\"${id}-view\"]`)));\n    if (next.join('|') !== this.fullViewToolIds.join('|')) this.fullViewToolIds = next;\n  }\n\n  private get renderRoot(): ParentNode {\n    return this.el.shadowRoot ?? this.el;\n  }\n\n  private headerLabel(): string {\n    if (!this.isDrawerPresent() || !this.activeTool) return '';\n    const item = this.railItems.find(candidate => candidate.id === this.activeTool);\n    return (\n      item?.label ??\n      PANEL_TOOLS_LABELS[this.activeTool as keyof typeof PANEL_TOOLS_LABELS] ??\n      this.activeTool\n    );\n  }\n\n  private resolvedHeaders(): PanelToolsHeaders {\n    return this.headers ?? {};\n  }\n\n  private activeHeader(): PanelToolsHeaderConfig {\n    if (!this.activeTool) return {};\n    return this.resolvedHeaders()[this.activeTool] ?? {};\n  }\n\n  private handleToolChange = (id: PanelToolsToolId) => {\n    const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id, selected: next.selected });\n  };\n\n  /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    const item = this.railItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\n    this.handleToolChange(id);\n  }\n\n  /** Close the tools drawer when open — used by shell keyboard shortcuts. */\n  @Method()\n  async closeDrawer() {\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) {\n      this.dsToolChange.emit({ id, selected: false });\n    }\n  }\n\n  /** Focus an active tool-header action by its application-owned id. */\n  @Method()\n  async focusHeaderAction(id: string) {\n    const action = this.renderRoot.querySelector(`[data-header-action-id=\"${CSS.escape(id)}\"]`) as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    await action?.setFocus?.();\n  }\n\n  private focusRailAt(index: number) {\n    const keys = panelToolsRailFocusKeys(this.orderedRailEntries);\n    if (!keys.length) return;\n    const bounded = Math.max(0, Math.min(index, keys.length - 1));\n    this.rovingIndex = bounded;\n    const action = this.renderRoot.querySelector(\n      `[data-rail-focus-key=\"${CSS.escape(keys[bounded])}\"]`\n    ) as (HTMLElement & { setFocus?: () => Promise<void> }) | null;\n    if (action?.setFocus) {\n      void action.setFocus();\n    } else {\n      action?.focus({ preventScroll: true });\n    }\n  }\n\n  private handleRailKeyDown = (e: KeyboardEvent, index: number, activate?: () => void) => {\n    const keys = panelToolsRailFocusKeys(this.orderedRailEntries);\n    if (!keys.length) return;\n\n    if ((e.key === 'Enter' || e.key === ' ') && activate) {\n      e.preventDefault();\n      activate();\n      return;\n    }\n\n    if (e.key === 'ArrowDown') {\n      if (index >= keys.length - 1) return;\n      e.preventDefault();\n      this.focusRailAt(index + 1);\n      return;\n    }\n\n    if (e.key === 'ArrowUp') {\n      if (index <= 0) return;\n      e.preventDefault();\n      this.focusRailAt(index - 1);\n    }\n  };\n\n  private renderRailAction(item: PanelToolsItem, index: number) {\n    const focusKey = `tool:${item.id}`;\n    const label =\n      item.ariaLabel ??\n      item.label ??\n      PANEL_TOOLS_LABELS[item.id as keyof typeof PANEL_TOOLS_LABELS] ??\n      item.id;\n    return (\n      <ds-tooltip\n        key={item.id}\n        label={label}\n        shortcutKey={\n          item.shortcutKey ?? PANEL_TOOLS_SHORTCUTS[item.id as keyof typeof PANEL_TOOLS_SHORTCUTS]\n        }\n        side=\"left\"\n        size=\"sm\"\n        boundary=\"viewport\"\n      >\n        <ds-button-unfilled\n          variant=\"icon\"\n          class=\"panel-tools__rail-action\"\n          icon={item.icon}\n          isActive={this.isRailSelected(item.id)}\n          activeFill={false}\n          hasBorder={false}\n          pressScale={false}\n          dot={item.dot ?? false}\n          isInactive={item.isInactive}\n          focusTabIndex={index === this.rovingIndex ? 0 : -1}\n          data-rail-focus-key={focusKey}\n          aria-label={label}\n          pressed={this.isRailSelected(item.id)}\n          onFocusin={() => {\n            this.rovingIndex = index;\n          }}\n          onKeyDown={(e: KeyboardEvent) =>\n            this.handleRailKeyDown(e, index, () => this.handleToolChange(item.id))\n          }\n          onDsClick={() => this.handleToolChange(item.id)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  private accessoryPrimaryLabel(accessory: PanelToolsRailTransientAccessory): string {\n    const actionLabel = accessory.primaryAction.ariaLabel?.trim() || accessory.ariaLabel;\n    const status = accessory.statusText.trim();\n    return status ? `${actionLabel}. ${status}` : actionLabel;\n  }\n\n  private emitAccessoryAction(\n    accessoryId: string,\n    action: PanelToolsRailAccessoryAction,\n    anchor: HTMLElement\n  ) {\n    if (action.isInactive) return;\n    this.dsRailAccessoryAction.emit(\n      panelToolsRailAccessoryActionDetail(accessoryId, action.id, anchor)\n    );\n  }\n\n  private renderAccessoryVisual(accessory: PanelToolsRailTransientAccessory) {\n    if (accessory.visual.type === 'image') {\n      return (\n        <img\n          class=\"panel-tools__accessory-image\"\n          src={accessory.visual.src}\n          alt=\"\"\n          aria-hidden=\"true\"\n        />\n      );\n    }\n    if (accessory.visual.type === 'initial') {\n      const initial = [...accessory.visual.initial.trim()].slice(0, 2).join('');\n      return (\n        <ds-text\n          class=\"panel-tools__accessory-initial\"\n          as=\"span\"\n          variant=\"text-caption\"\n          emphasis\n          color=\"inherit\"\n          aria-hidden=\"true\"\n        >\n          {initial}\n        </ds-text>\n      );\n    }\n    return <ds-icon name={accessory.visual.icon} size=\"sm\" aria-hidden=\"true\" />;\n  }\n\n  private renderRailShortcut(\n    accessory: PanelToolsRailShortcutAccessory,\n    focusIndexes: Map<string, number>\n  ) {\n    const focusKey = `accessory:${accessory.id}:${accessory.action.id}`;\n    const focusIndex = focusIndexes.get(focusKey);\n    const label = accessory.action.ariaLabel?.trim() || accessory.ariaLabel;\n    const initials = [...accessory.initials.trim()].slice(0, 2).join('');\n\n    return (\n      <div\n        key={`accessory:${accessory.id}`}\n        class=\"panel-tools__accessory panel-tools__accessory--shortcut\"\n      >\n        <ds-tooltip label={label} side=\"left\" size=\"sm\" boundary=\"viewport\">\n          <button\n            type=\"button\"\n            class=\"panel-tools__shortcut ds-focus-ring-inset ds-interaction-fill\"\n            disabled={accessory.action.isInactive}\n            tabIndex={focusIndex === this.rovingIndex ? 0 : -1}\n            data-rail-focus-key={focusKey}\n            aria-label={label}\n            onFocus={() => {\n              if (focusIndex !== undefined) this.rovingIndex = focusIndex;\n            }}\n            onKeyDown={(event: KeyboardEvent) =>\n              focusIndex === undefined ? undefined : this.handleRailKeyDown(event, focusIndex)\n            }\n            onClick={(event: MouseEvent) =>\n              this.emitAccessoryAction(\n                accessory.id,\n                accessory.action,\n                event.currentTarget as HTMLElement\n              )\n            }\n          >\n            <span class=\"panel-tools__shortcut-content ds-interaction-fill__content\">\n              <ds-text\n                class=\"panel-tools__shortcut-orb\"\n                as=\"span\"\n                variant=\"text-caption\"\n                emphasis\n                color=\"inherit\"\n              >\n                {initials}\n              </ds-text>\n              {accessory.dot ? (\n                <ds-badge\n                  class=\"panel-tools__shortcut-dot\"\n                  variant=\"dot\"\n                  background=\"var(--color-background-secondary)\"\n                  aria-hidden=\"true\"\n                />\n              ) : null}\n            </span>\n          </button>\n        </ds-tooltip>\n      </div>\n    );\n  }\n\n  private renderRailAccessory(\n    accessory: PanelToolsRailAccessory,\n    focusIndexes: Map<string, number>\n  ) {\n    if (accessory.type === 'divider') {\n      return (\n        <div\n          key={`accessory:${accessory.id}`}\n          class=\"panel-tools__accessory-divider\"\n          aria-hidden=\"true\"\n        >\n          <ds-divider />\n        </div>\n      );\n    }\n\n    if (accessory.type === 'shortcut') {\n      return this.renderRailShortcut(accessory, focusIndexes);\n    }\n\n    const primaryKey = `accessory:${accessory.id}:${accessory.primaryAction.id}`;\n    const primaryIndex = focusIndexes.get(primaryKey);\n    const primaryLabel = this.accessoryPrimaryLabel(accessory);\n    const secondary = accessory.secondaryAction;\n    const secondaryKey = secondary ? `accessory:${accessory.id}:${secondary.id}` : '';\n    const secondaryIndex = secondary ? focusIndexes.get(secondaryKey) : undefined;\n\n    return (\n      <div\n        key={`accessory:${accessory.id}`}\n        class={{\n          'panel-tools__accessory': true,\n          'panel-tools__accessory--transient': true,\n          'panel-tools__accessory--transient-active': accessory.statusTone === 'active',\n          'panel-tools__accessory--transient-positive': accessory.statusTone === 'positive',\n        }}\n      >\n        <ds-tooltip label={primaryLabel} side=\"left\" size=\"sm\" boundary=\"viewport\">\n          <button\n            type=\"button\"\n            class=\"panel-tools__accessory-primary ds-focus-ring-inset ds-interaction-fill ds-interaction-fill--on-bold\"\n            disabled={accessory.primaryAction.isInactive}\n            tabIndex={primaryIndex === this.rovingIndex ? 0 : -1}\n            data-rail-focus-key={primaryKey}\n            aria-label={primaryLabel}\n            onFocus={() => {\n              if (primaryIndex !== undefined) this.rovingIndex = primaryIndex;\n            }}\n            onKeyDown={(event: KeyboardEvent) =>\n              primaryIndex === undefined ? undefined : this.handleRailKeyDown(event, primaryIndex)\n            }\n            onClick={(event: MouseEvent) =>\n              this.emitAccessoryAction(\n                accessory.id,\n                accessory.primaryAction,\n                event.currentTarget as HTMLElement\n              )\n            }\n          >\n            <span class=\"panel-tools__accessory-primary-content ds-interaction-fill__content\">\n              {this.renderAccessoryVisual(accessory)}\n            </span>\n          </button>\n        </ds-tooltip>\n        {secondary ? (\n          <ds-tooltip label={secondary.ariaLabel} side=\"left\" size=\"sm\" boundary=\"viewport\">\n            <ds-button-unfilled\n              class=\"panel-tools__accessory-secondary\"\n              variant=\"icon\"\n              size=\"sm\"\n              rounded\n              background=\"bold\"\n              hasBorder={false}\n              icon={secondary.icon}\n              isInactive={secondary.isInactive}\n              focusTabIndex={secondaryIndex === this.rovingIndex ? 0 : -1}\n              data-rail-focus-key={secondaryKey}\n              aria-label={secondary.ariaLabel}\n              onFocusin={() => {\n                if (secondaryIndex !== undefined) this.rovingIndex = secondaryIndex;\n              }}\n              onKeyDown={(event: KeyboardEvent) =>\n                secondaryIndex === undefined\n                  ? undefined\n                  : this.handleRailKeyDown(event, secondaryIndex)\n              }\n              onDsClick={(event: CustomEvent<MouseEvent>) =>\n                this.emitAccessoryAction(\n                  accessory.id,\n                  secondary,\n                  event.currentTarget as HTMLElement\n                )\n              }\n            />\n          </ds-tooltip>\n        ) : null}\n      </div>\n    );\n  }\n\n  private renderRailEntry(entry: PanelToolsRailEntry, focusIndexes: Map<string, number>) {\n    if (entry.type === 'tool') {\n      return this.renderRailAction(entry.item, focusIndexes.get(`tool:${entry.id}`) ?? 0);\n    }\n    return this.renderRailAccessory(entry.accessory, focusIndexes);\n  }\n\n  render() {\n    const headerLabel = this.headerLabel();\n    const header = this.activeHeader();\n    const headerTitle = header.title?.trim() || headerLabel;\n    const headerActions = header.actions ?? [];\n    const orderedRailItems = this.orderedRailItems;\n    const orderedRailEntries = this.orderedRailEntries;\n    const entryPlacement = (entry: PanelToolsRailEntry) =>\n      entry.type === 'tool' ? panelToolsRailPlacement(entry.item) : entry.accessory.railPlacement;\n    const headerEntries = orderedRailEntries.filter(entry => entryPlacement(entry) === 'header');\n    const bodyEntries = orderedRailEntries.filter(entry => entryPlacement(entry) === 'body');\n    const footerEntries = orderedRailEntries.filter(entry => entryPlacement(entry) === 'footer');\n    const focusIndexes = new Map(\n      panelToolsRailFocusKeys(orderedRailEntries).map((key, index) => [key, index])\n    );\n    const showDrawerChrome = this.isDrawerPresent();\n    const drawerResting = panelToolsDrawerResting(this.open, this.motion);\n    const activeFullView = Boolean(\n      showDrawerChrome && this.activeTool && this.hasFullView(this.activeTool)\n    );\n    const toolIds = orderedRailItems.map(item => item.id);\n\n    return (\n      <Host\n        class={{\n          'panel-tools': true,\n          'panel-tools--open': this.open,\n          'panel-tools--ready': this.readyForMotion,\n          'panel-tools--motion-opening': this.motion === 'opening',\n          'panel-tools--motion-closing': this.motion === 'closing',\n          'panel-tools--drawer-resting': drawerResting,\n          'panel-tools--fullscreen': this.presentation === 'fullscreen',\n          'panel-tools--presentation-snap': this.presentationMotionSuppressed,\n        }}\n        data-ds-overlay-boundary\n        role={this.presentation === 'fullscreen' ? 'dialog' : 'complementary'}\n        aria-modal={this.presentation === 'fullscreen' ? 'true' : undefined}\n        aria-label={this.toolsLabel}\n      >\n        <div class=\"panel-tools__layout\">\n          <nav class=\"panel-tools__rail\" aria-label={this.toolShortcutsLabel}>\n            {headerEntries.length ? (\n              <div\n                class={{\n                  'panel-tools__rail-header': true,\n                  'panel-tools__rail-section--stacked': headerEntries.length > 1,\n                  'ds-chrome-row': headerEntries.length === 1,\n                  'ds-chrome-column': headerEntries.length > 1,\n                  'ds-chrome-space--md': true,\n                }}\n              >\n                {headerEntries.map(entry => this.renderRailEntry(entry, focusIndexes))}\n              </div>\n            ) : null}\n            <div\n              class={{\n                'panel-tools__rail-body': true,\n                'ds-chrome-column': true,\n                'ds-chrome-space--md': true,\n                'ds-scrollbar-hidden': true,\n                'ds-focus-ring': this.railBodyScrollable,\n              }}\n              ref={element => {\n                const next = (element as HTMLElement) ?? undefined;\n                if (next === this.railBodyEl) return;\n                this.railBodyEl = next;\n                this.connectRailBodyObserver();\n              }}\n              role={this.railBodyScrollable ? 'region' : undefined}\n              aria-label={this.railBodyScrollable ? this.toolShortcutsLabel : undefined}\n              tabIndex={this.railBodyScrollable ? 0 : undefined}\n            >\n              <div class=\"panel-tools__rail-actions\">\n                {bodyEntries.map(entry => this.renderRailEntry(entry, focusIndexes))}\n              </div>\n            </div>\n            {footerEntries.length ? (\n              <div\n                class={{\n                  'panel-tools__rail-footer': true,\n                  'panel-tools__rail-section--stacked': footerEntries.length > 1,\n                  'ds-chrome-row': footerEntries.length === 1,\n                  'ds-chrome-column': footerEntries.length > 1,\n                  'ds-chrome-space--md': true,\n                }}\n              >\n                {footerEntries.map(entry => this.renderRailEntry(entry, focusIndexes))}\n              </div>\n            ) : null}\n          </nav>\n\n          <div\n            class={{\n              'panel-tools__drawer': true,\n              'panel-tools__drawer--visible': showDrawerChrome,\n            }}\n            aria-hidden={showDrawerChrome ? null : 'true'}\n            inert={showDrawerChrome ? undefined : true}\n          >\n            <div class=\"panel-tools__drawer-surface\">\n              {this.presentation !== 'fullscreen' || this.fullscreenHeaderMode === 'shared' ? (\n                <ds-panel-tool-header\n                  class=\"panel-tools__header\"\n                  heading={headerTitle}\n                  showBack={header.showBack ?? false}\n                  backIcon={header.backIcon || 'ChevronLeft'}\n                  backAriaLabel={header.backAriaLabel || 'Back'}\n                  showMenu={false}\n                  ref={element => {\n                    const toolHeader = element as\n                      | (HTMLDsPanelToolHeaderElement & {\n                          actions: PanelToolsHeaderAction[];\n                        })\n                      | undefined;\n                    if (toolHeader) toolHeader.actions = headerActions;\n                  }}\n                  onDsBack={() => {\n                    if (this.activeTool) this.dsHeaderBack.emit({ tool: this.activeTool });\n                  }}\n                />\n              ) : null}\n              <div class=\"panel-tools__body\" hidden={activeFullView}>\n                {toolIds.map(id => {\n                  const active = this.isViewActive(id);\n                  return (\n                    <div\n                      class={{\n                        'panel-tools__view': true,\n                        'panel-tools__view--active': active,\n                      }}\n                      hidden={!active}\n                    >\n                      <slot name={id} />\n                    </div>\n                  );\n                })}\n              </div>\n              <div class=\"panel-tools__full-views\" hidden={!activeFullView}>\n                {toolIds.map(id => (\n                  <div\n                    class={{\n                      'panel-tools__full-view': true,\n                      'panel-tools__full-view--active':\n                        this.isViewActive(id) && this.hasFullView(id),\n                    }}\n                    hidden={!(this.isViewActive(id) && this.hasFullView(id))}\n                  >\n                    <slot name={`${id}-view`} />\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  State,\n  Watch,\n  Method,\n  Listen,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../shell/chrome-transition';\nimport { ANCHORED_OVERLAY_BOUNDARY_ATTRIBUTE } from '../../utils/anchored-overlay-boundary';\nimport {\n  PANEL_TOOLS_LABELS,\n  PANEL_TOOLS_SHORTCUTS,\n  type PanelToolsHeaderAction,\n  type PanelToolsHeaderActionDetail,\n  type PanelToolsHeaderConfig,\n  type PanelToolsHeaders,\n  type PanelToolsItem,\n  type PanelToolsRailAccessory,\n  type PanelToolsRailAccessoryAction,\n  type PanelToolsRailAccessoryActionDetail,\n  type PanelToolsRailShortcutAccessory,\n  type PanelToolsRailTransientAccessory,\n  type PanelToolsToolId,\n} from './panel-tools-types';\nimport {\n  isPanelToolsToolId,\n  orderPanelToolsRailEntries,\n  orderPanelToolsItems,\n  panelToolsRailAccessoryActionDetail,\n  panelToolsRailFocusKeys,\n  panelToolsDrawerAtTerminal,\n  panelToolsDrawerResting,\n  panelToolsDrawerTransitionMs,\n  panelToolsRailPlacement,\n  reconcilePanelToolsAvailability,\n  reconcilePanelToolsRovingIndex,\n  resolvePanelToolActivation,\n  type PanelToolsRailEntry,\n} from './panel-tools-utils';\n\n@Component({\n  tag: 'ds-panel-tools',\n  styleUrl: 'PanelTools.css',\n  shadow: true,\n})\nexport class PanelTools {\n  @Element() el!: HTMLElement;\n\n  /** When false, only the icon rail is shown. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Drawer presentation or presentation covering the shell stage for the active tool. */\n  @Prop({ mutable: true, reflect: true }) presentation: 'drawer' | 'fullscreen' = 'drawer';\n\n  /** Let a fullscreen product supply independent master/detail headers inside its view. */\n  @Prop({ attribute: 'fullscreen-header-mode', reflect: true })\n  fullscreenHeaderMode: 'shared' | 'split' = 'shared';\n\n  /** Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`. */\n  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n  activeTool: PanelToolsToolId | '' = '';\n\n  /**\n   * Rail items rendered in the right column.\n   * Set via JS property: `el.items = [...]`. Replace the array reference to update.\n   */\n  @Prop() items: PanelToolsItem[] = [];\n\n  /**\n   * Desktop/tablet-only application-owned rail boundaries and direct intents.\n   * Set via JS property and replace the array reference to update.\n   */\n  @Prop() accessories: PanelToolsRailAccessory[] = [];\n\n  @Prop() toolsLabel: string = 'Tools';\n  @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n\n  /** Active header state per tool. Replace the object when title, depth, or actions change. */\n  @Prop() headers: PanelToolsHeaders = {};\n\n  /**\n   * Optional localStorage key for the last active tool. The drawer always starts\n   * closed; only the tool identity is restored for continuity within this browser.\n   */\n  @Prop({ attribute: 'storage-key' }) storageKey: string = '';\n\n  /** Emitted when a rail button is toggled. Detail = { id, selected }. */\n  @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }>;\n\n  /** Emitted when fullscreen changes, including Escape-initiated exits. */\n  @Event({ bubbles: true, composed: true }) dsPresentationChange!: EventEmitter<{\n    presentation: 'drawer' | 'fullscreen';\n  }>;\n\n  /** Requests navigation to the active tool's parent view. */\n  @Event({ bubbles: true, composed: true }) dsHeaderBack!: EventEmitter<{\n    tool: PanelToolsToolId;\n  }>;\n\n  /** Requests one application-owned action from the active tool header. */\n  @Event({ bubbles: true, composed: true })\n  dsHeaderAction!: EventEmitter<PanelToolsHeaderActionDetail>;\n\n  /** Direct accessory intent. Emitting this event never changes the active tool or drawer. */\n  @Event({ bubbles: true, composed: true })\n  dsRailAccessoryAction!: EventEmitter<PanelToolsRailAccessoryActionDetail>;\n\n  /** Bubbling lifecycle — `ds-bar-nav` defers overflow checks during drawer motion. */\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n  /** Arms open vs close easing for the in-flight width transition. */\n  @State() private motion: 'opening' | 'closing' | 'idle' = 'idle';\n\n  /** Keeps header and slotted content painted until the closing clip transition completes. */\n  @State() private drawerSurfaceRetained = false;\n\n  /** Suppresses width transition until the host has painted its initial open state. */\n  @State() private readyForMotion = false;\n\n  /** Fullscreen presentation changes snap without borrowing drawer width motion. */\n  @State() private presentationMotionSuppressed = false;\n\n  @State() private rovingIndex = 0;\n  @State() private fullViewToolIds: PanelToolsToolId[] = [];\n  @State() private railBodyScrollable = false;\n\n  private motionEnableGeneration = 0;\n  private presentationMotionGeneration = 0;\n  private transitionGeneration = 0;\n  private transitionFallbackTimer: number | null = null;\n  /** Ignores the old transition's terminal event when reversing direction. */\n  private ignoreReplacementTerminal = false;\n  private focusBeforeFullscreen: HTMLElement | null = null;\n  private fullViewObserver: MutationObserver | null = null;\n  private railBodyEl?: HTMLElement;\n  private railBodyObserver?: ResizeObserver;\n\n  private get railItems(): PanelToolsItem[] {\n    return this.items ?? [];\n  }\n\n  private get orderedRailItems(): PanelToolsItem[] {\n    return orderPanelToolsItems(this.railItems);\n  }\n\n  private get railAccessories(): PanelToolsRailAccessory[] {\n    return this.accessories ?? [];\n  }\n\n  private get orderedRailEntries(): PanelToolsRailEntry[] {\n    return orderPanelToolsRailEntries(this.railItems, this.railAccessories);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('transitionend', this.handleTransitionEnd);\n    this.el.removeEventListener('transitioncancel', this.handleTransitionEnd);\n    this.el.removeEventListener('dsAction', this.handleComposedHeaderAction);\n    this.clearTransitionCompletion();\n    this.motionEnableGeneration += 1;\n    this.fullViewObserver?.disconnect();\n    this.fullViewObserver = null;\n    this.disconnectRailBodyObserver();\n  }\n\n  @Watch('presentation')\n  presentationChanged(next: 'drawer' | 'fullscreen', previous?: 'drawer' | 'fullscreen') {\n    if (next === previous) return;\n    // Framework property bindings can update slotted master/detail content in\n    // the same render that requests fullscreen. Reflect the host selector\n    // immediately so that content cannot paint once in the drawer geometry\n    // while Stencil waits to commit its next render.\n    if (this.el.getAttribute('presentation') !== next) {\n      this.el.setAttribute('presentation', next);\n    }\n    const presentationGeneration = ++this.presentationMotionGeneration;\n    this.presentationMotionSuppressed = true;\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (presentationGeneration !== this.presentationMotionGeneration) return;\n        this.presentationMotionSuppressed = false;\n      });\n    });\n    if (next === 'fullscreen') {\n      this.focusBeforeFullscreen =\n        document.activeElement instanceof HTMLElement ? document.activeElement : null;\n      this.open = true;\n    } else if (previous === 'fullscreen') {\n      const focusBeforeFullscreen = this.focusBeforeFullscreen;\n      const fallbackActionId = this.activeHeader().actions?.[0]?.id;\n      requestAnimationFrame(async () => {\n        if (focusBeforeFullscreen?.isConnected) {\n          focusBeforeFullscreen.focus({ preventScroll: true });\n        }\n        const focusRestored = focusBeforeFullscreen\n          ? document.activeElement === focusBeforeFullscreen ||\n            focusBeforeFullscreen.contains(document.activeElement)\n          : false;\n        if (!focusRestored && fallbackActionId) await this.focusHeaderAction(fallbackActionId);\n        this.focusBeforeFullscreen = null;\n      });\n    }\n    this.dsPresentationChange.emit({ presentation: next });\n  }\n\n  @Listen('keydown', { target: 'window', capture: true })\n  handleFullscreenEscape(event: KeyboardEvent) {\n    if (this.presentation !== 'fullscreen' || event.key !== 'Escape') return;\n    event.preventDefault();\n    event.stopPropagation();\n    this.presentation = 'drawer';\n  }\n\n  private deferMotionEnable() {\n    if (this.readyForMotion) return;\n    const generation = ++this.motionEnableGeneration;\n    requestAnimationFrame(() => {\n      if (generation !== this.motionEnableGeneration) return;\n      requestAnimationFrame(() => {\n        if (generation !== this.motionEnableGeneration) return;\n        this.readyForMotion = true;\n      });\n    });\n  }\n\n  connectedCallback() {\n    this.el.setAttribute(ANCHORED_OVERLAY_BOUNDARY_ATTRIBUTE, '');\n    this.el.addEventListener('transitionend', this.handleTransitionEnd);\n    this.el.addEventListener('transitioncancel', this.handleTransitionEnd);\n    this.el.addEventListener('dsAction', this.handleComposedHeaderAction);\n  }\n\n  private handleComposedHeaderAction = (event: Event) => {\n    const detail = (event as CustomEvent<{ id?: string; anchor?: HTMLElement }>).detail;\n    if (!this.activeTool || !detail?.id) return;\n    event.stopPropagation();\n    this.dsHeaderAction.emit({\n      tool: this.activeTool,\n      id: detail.id,\n      anchor: detail.anchor,\n    });\n  };\n\n  componentWillLoad() {\n    this.restoreLastActiveTool();\n    this.drawerSurfaceRetained = this.open;\n  }\n\n  @Watch('open')\n  openChanged(isOpen: boolean, wasOpen?: boolean) {\n    if (isOpen) this.drawerSurfaceRetained = true;\n    if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {\n      this.startDrawerTransition(isOpen ? 'opening' : 'closing');\n    } else if (!isOpen) {\n      this.drawerSurfaceRetained = false;\n    }\n    this.deferMotionEnable();\n  }\n\n  @Watch('activeTool')\n  activeToolChanged() {\n    this.persistLastActiveTool();\n    this.deferMotionEnable();\n  }\n\n  @Watch('storageKey')\n  storageKeyChanged() {\n    this.restoreLastActiveTool();\n  }\n\n  componentDidLoad() {\n    this.deferMotionEnable();\n    this.connectRailBodyObserver();\n    this.updateRailBodyScrollable();\n    this.syncFullViewTools();\n    this.fullViewObserver = new MutationObserver(() => this.syncFullViewTools());\n    this.fullViewObserver.observe(this.el, {\n      childList: true,\n      attributes: true,\n      attributeFilter: ['slot'],\n    });\n  }\n\n  componentDidRender() {\n    this.updateRailBodyScrollable();\n  }\n\n  private connectRailBodyObserver() {\n    this.disconnectRailBodyObserver();\n    if (!this.railBodyEl || typeof ResizeObserver === 'undefined') return;\n    this.railBodyObserver = new ResizeObserver(() => this.updateRailBodyScrollable());\n    this.railBodyObserver.observe(this.railBodyEl);\n  }\n\n  private disconnectRailBodyObserver() {\n    this.railBodyObserver?.disconnect();\n    this.railBodyObserver = undefined;\n  }\n\n  private updateRailBodyScrollable() {\n    const next = Boolean(\n      this.railBodyEl && this.railBodyEl.scrollHeight > this.railBodyEl.clientHeight + 1\n    );\n    if (next !== this.railBodyScrollable) this.railBodyScrollable = next;\n  }\n\n  @Watch('items')\n  itemsChanged() {\n    this.rovingIndex = 0;\n    this.reconcileActiveTool();\n    this.deferMotionEnable();\n  }\n\n  @Watch('accessories')\n  accessoriesChanged(\n    next: PanelToolsRailAccessory[] = [],\n    previous: PanelToolsRailAccessory[] = []\n  ) {\n    const previousKeys = panelToolsRailFocusKeys(\n      orderPanelToolsRailEntries(this.railItems, previous)\n    );\n    const nextKeys = panelToolsRailFocusKeys(orderPanelToolsRailEntries(this.railItems, next));\n    const activeElement = (this.renderRoot as ShadowRoot).activeElement as HTMLElement | null;\n    const focusedKey =\n      activeElement?.closest<HTMLElement>('[data-rail-focus-key]')?.dataset.railFocusKey;\n    const focusedIndex = focusedKey ? previousKeys.indexOf(focusedKey) : -1;\n    const currentIndex = focusedIndex >= 0 ? focusedIndex : this.rovingIndex;\n    const nextIndex = reconcilePanelToolsRovingIndex(previousKeys, nextKeys, currentIndex);\n    const restoreFocus = focusedIndex >= 0 && !nextKeys.includes(focusedKey ?? '');\n    this.rovingIndex = nextIndex;\n    if (restoreFocus && nextKeys.length) {\n      requestAnimationFrame(() => this.focusRailAt(nextIndex));\n    }\n  }\n\n  private restoreLastActiveTool() {\n    if (!this.storageKey || this.activeTool) return;\n    try {\n      const stored = localStorage.getItem(this.storageKey);\n      if (isPanelToolsToolId(stored)) this.activeTool = stored;\n    } catch {\n      /* localStorage unavailable */\n    }\n  }\n\n  private persistLastActiveTool() {\n    if (!this.storageKey || !this.activeTool) return;\n    try {\n      localStorage.setItem(this.storageKey, this.activeTool);\n    } catch {\n      /* unavailable */\n    }\n  }\n\n  private clearPersistedTool() {\n    if (!this.storageKey) return;\n    try {\n      localStorage.removeItem(this.storageKey);\n    } catch {\n      /* unavailable */\n    }\n  }\n\n  private reconcileActiveTool() {\n    const next = reconcilePanelToolsAvailability(this.railItems, this.open, this.activeTool);\n    if (!next.removedTool) return;\n    this.clearPersistedTool();\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id: next.removedTool, selected: false });\n  }\n\n  private startDrawerTransition(phase: 'opening' | 'closing') {\n    const drawer = this.renderRoot.querySelector('.panel-tools__drawer') as HTMLElement | null;\n    if (this.motion !== 'idle') {\n      this.finishDrawerTransition();\n      this.ignoreReplacementTerminal = true;\n    }\n    this.motion = phase;\n    this.dsChromeTransitionStart.emit({ source: 'panel-tools', phase });\n    const generation = ++this.transitionGeneration;\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (generation !== this.transitionGeneration || this.motion !== phase) return;\n        if (!drawer) {\n          this.finishDrawerTransition();\n          return;\n        }\n\n        if (this.drawerTransitionAtTerminal(drawer, phase)) {\n          this.finishDrawerTransition();\n          return;\n        }\n\n        const fallbackMs = panelToolsDrawerTransitionMs(getComputedStyle(drawer));\n        if (fallbackMs <= 0) {\n          this.finishDrawerTransition();\n          return;\n        }\n        this.transitionFallbackTimer = window.setTimeout(() => {\n          this.finishDrawerTransition();\n        }, fallbackMs);\n      });\n    });\n  }\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const drawer = this.renderRoot.querySelector('.panel-tools__drawer') as HTMLElement | null;\n    if (event.target !== drawer) return;\n    if (event.propertyName !== 'max-width') return;\n    if (this.ignoreReplacementTerminal) {\n      this.ignoreReplacementTerminal = false;\n      return;\n    }\n    // Changing from the neutral transition recipe to the direction-specific\n    // easing can cancel the transition that the reflected `open` class began.\n    // The replacement transition and its watchdog still own completion; ending\n    // motion here would hide the fixed-width tool surface while it is visible.\n    if (event.type === 'transitioncancel') return;\n    if (drawer && !this.drawerTransitionAtTerminal(drawer, this.motion)) return;\n    this.finishDrawerTransition();\n  };\n\n  private drawerTransitionAtTerminal(\n    drawer: HTMLElement,\n    phase: 'opening' | 'closing' | 'idle'\n  ): boolean {\n    const width = drawer.getBoundingClientRect().width;\n    const surface = drawer.querySelector('.panel-tools__drawer-surface') as HTMLElement | null;\n    const targetWidth = surface?.getBoundingClientRect().width ?? 0;\n    return panelToolsDrawerAtTerminal(width, targetWidth, phase);\n  }\n\n  private finishDrawerTransition() {\n    const completedPhase = this.motion;\n    const wasTransitioning = completedPhase !== 'idle';\n    this.clearTransitionCompletion();\n    if (!wasTransitioning) return;\n    this.ignoreReplacementTerminal = false;\n    this.motion = 'idle';\n    if (completedPhase === 'closing' && !this.open) {\n      this.drawerSurfaceRetained = false;\n    }\n    this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n  }\n\n  private clearTransitionCompletion() {\n    this.transitionGeneration += 1;\n    if (this.transitionFallbackTimer !== null) {\n      window.clearTimeout(this.transitionFallbackTimer);\n      this.transitionFallbackTimer = null;\n    }\n  }\n\n  /** Rail selection follows `open` immediately — independent of the slide animation. */\n  private isRailSelected(id: PanelToolsToolId): boolean {\n    return this.open && this.activeTool === id;\n  }\n\n  /** Drawer body stays mounted while the clip frame animates closed. */\n  private isDrawerPresent(): boolean {\n    return this.open || this.drawerSurfaceRetained;\n  }\n\n  private isViewActive(id: PanelToolsToolId): boolean {\n    return this.isDrawerPresent() && this.activeTool === id;\n  }\n\n  private hasFullView(id: PanelToolsToolId): boolean {\n    return this.fullViewToolIds.includes(id);\n  }\n\n  private syncFullViewTools() {\n    const ids = this.orderedRailItems.map(item => item.id);\n    const next = ids.filter(id => Boolean(this.el.querySelector(`[slot=\"${id}-view\"]`)));\n    if (next.join('|') !== this.fullViewToolIds.join('|')) this.fullViewToolIds = next;\n  }\n\n  private get renderRoot(): ParentNode {\n    return this.el.shadowRoot ?? this.el;\n  }\n\n  private accessibleLabel(): string {\n    if (!this.isDrawerPresent() || !this.activeTool) return '';\n    const item = this.railItems.find(candidate => candidate.id === this.activeTool);\n    return (\n      item?.label ??\n      PANEL_TOOLS_LABELS[this.activeTool as keyof typeof PANEL_TOOLS_LABELS] ??\n      this.activeTool\n    );\n  }\n\n  private resolvedHeaders(): PanelToolsHeaders {\n    return this.headers ?? {};\n  }\n\n  private activeHeader(): PanelToolsHeaderConfig {\n    if (!this.activeTool) return {};\n    return this.resolvedHeaders()[this.activeTool] ?? {};\n  }\n\n  private handleToolChange = (id: PanelToolsToolId) => {\n    const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id, selected: next.selected });\n  };\n\n  /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    const item = this.railItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\n    this.handleToolChange(id);\n  }\n\n  /** Close the tools drawer when open — used by shell keyboard shortcuts. */\n  @Method()\n  async closeDrawer() {\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) {\n      this.dsToolChange.emit({ id, selected: false });\n    }\n  }\n\n  /** Focus an active tool-header action by its application-owned id. */\n  @Method()\n  async focusHeaderAction(id: string) {\n    const action = this.renderRoot.querySelector(`[data-header-action-id=\"${CSS.escape(id)}\"]`) as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    await action?.setFocus?.();\n  }\n\n  private focusRailAt(index: number) {\n    const keys = panelToolsRailFocusKeys(this.orderedRailEntries);\n    if (!keys.length) return;\n    const bounded = Math.max(0, Math.min(index, keys.length - 1));\n    this.rovingIndex = bounded;\n    const action = this.renderRoot.querySelector(\n      `[data-rail-focus-key=\"${CSS.escape(keys[bounded])}\"]`\n    ) as (HTMLElement & { setFocus?: () => Promise<void> }) | null;\n    if (action?.setFocus) {\n      void action.setFocus();\n    } else {\n      action?.focus({ preventScroll: true });\n    }\n  }\n\n  private handleRailKeyDown = (e: KeyboardEvent, index: number, activate?: () => void) => {\n    const keys = panelToolsRailFocusKeys(this.orderedRailEntries);\n    if (!keys.length) return;\n\n    if ((e.key === 'Enter' || e.key === ' ') && activate) {\n      e.preventDefault();\n      activate();\n      return;\n    }\n\n    if (e.key === 'ArrowDown') {\n      if (index >= keys.length - 1) return;\n      e.preventDefault();\n      this.focusRailAt(index + 1);\n      return;\n    }\n\n    if (e.key === 'ArrowUp') {\n      if (index <= 0) return;\n      e.preventDefault();\n      this.focusRailAt(index - 1);\n    }\n  };\n\n  private renderRailAction(item: PanelToolsItem, index: number) {\n    const focusKey = `tool:${item.id}`;\n    const label =\n      item.ariaLabel ??\n      item.label ??\n      PANEL_TOOLS_LABELS[item.id as keyof typeof PANEL_TOOLS_LABELS] ??\n      item.id;\n    return (\n      <ds-tooltip\n        key={item.id}\n        label={label}\n        shortcutKey={\n          item.shortcutKey ?? PANEL_TOOLS_SHORTCUTS[item.id as keyof typeof PANEL_TOOLS_SHORTCUTS]\n        }\n        side=\"left\"\n        size=\"sm\"\n        boundary=\"viewport\"\n      >\n        <ds-button-unfilled\n          variant=\"icon\"\n          class=\"panel-tools__rail-action\"\n          icon={item.icon}\n          isActive={this.isRailSelected(item.id)}\n          activeFill={false}\n          hasBorder={false}\n          pressScale={false}\n          dot={item.dot ?? false}\n          isInactive={item.isInactive}\n          focusTabIndex={index === this.rovingIndex ? 0 : -1}\n          data-rail-focus-key={focusKey}\n          aria-label={label}\n          pressed={this.isRailSelected(item.id)}\n          onFocusin={() => {\n            this.rovingIndex = index;\n          }}\n          onKeyDown={(e: KeyboardEvent) =>\n            this.handleRailKeyDown(e, index, () => this.handleToolChange(item.id))\n          }\n          onDsClick={() => this.handleToolChange(item.id)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  private accessoryPrimaryLabel(accessory: PanelToolsRailTransientAccessory): string {\n    const actionLabel = accessory.primaryAction.ariaLabel?.trim() || accessory.ariaLabel;\n    const status = accessory.statusText.trim();\n    return status ? `${actionLabel}. ${status}` : actionLabel;\n  }\n\n  private emitAccessoryAction(\n    accessoryId: string,\n    action: PanelToolsRailAccessoryAction,\n    anchor: HTMLElement\n  ) {\n    if (action.isInactive) return;\n    this.dsRailAccessoryAction.emit(\n      panelToolsRailAccessoryActionDetail(accessoryId, action.id, anchor)\n    );\n  }\n\n  private renderAccessoryVisual(accessory: PanelToolsRailTransientAccessory) {\n    if (accessory.visual.type === 'image') {\n      return (\n        <img\n          class=\"panel-tools__accessory-image\"\n          src={accessory.visual.src}\n          alt=\"\"\n          aria-hidden=\"true\"\n        />\n      );\n    }\n    if (accessory.visual.type === 'initial') {\n      const initial = [...accessory.visual.initial.trim()].slice(0, 2).join('');\n      return (\n        <ds-text\n          class=\"panel-tools__accessory-initial\"\n          as=\"span\"\n          variant=\"text-caption\"\n          emphasis\n          color=\"inherit\"\n          aria-hidden=\"true\"\n        >\n          {initial}\n        </ds-text>\n      );\n    }\n    return <ds-icon name={accessory.visual.icon} size=\"sm\" aria-hidden=\"true\" />;\n  }\n\n  private renderRailShortcut(\n    accessory: PanelToolsRailShortcutAccessory,\n    focusIndexes: Map<string, number>\n  ) {\n    const focusKey = `accessory:${accessory.id}:${accessory.action.id}`;\n    const focusIndex = focusIndexes.get(focusKey);\n    const label = accessory.action.ariaLabel?.trim() || accessory.ariaLabel;\n    const initials = [...accessory.initials.trim()].slice(0, 2).join('');\n\n    return (\n      <div\n        key={`accessory:${accessory.id}`}\n        class=\"panel-tools__accessory panel-tools__accessory--shortcut\"\n      >\n        <ds-tooltip label={label} side=\"left\" size=\"sm\" boundary=\"viewport\">\n          <button\n            type=\"button\"\n            class=\"panel-tools__shortcut ds-focus-ring-inset ds-interaction-fill\"\n            disabled={accessory.action.isInactive}\n            tabIndex={focusIndex === this.rovingIndex ? 0 : -1}\n            data-rail-focus-key={focusKey}\n            aria-label={label}\n            onFocus={() => {\n              if (focusIndex !== undefined) this.rovingIndex = focusIndex;\n            }}\n            onKeyDown={(event: KeyboardEvent) =>\n              focusIndex === undefined ? undefined : this.handleRailKeyDown(event, focusIndex)\n            }\n            onClick={(event: MouseEvent) =>\n              this.emitAccessoryAction(\n                accessory.id,\n                accessory.action,\n                event.currentTarget as HTMLElement\n              )\n            }\n          >\n            <span class=\"panel-tools__shortcut-content ds-interaction-fill__content\">\n              <ds-text\n                class=\"panel-tools__shortcut-orb\"\n                as=\"span\"\n                variant=\"text-caption\"\n                emphasis\n                color=\"inherit\"\n              >\n                {initials}\n              </ds-text>\n              {accessory.dot ? (\n                <ds-badge\n                  class=\"panel-tools__shortcut-dot\"\n                  variant=\"dot\"\n                  background=\"var(--color-background-secondary)\"\n                  aria-hidden=\"true\"\n                />\n              ) : null}\n            </span>\n          </button>\n        </ds-tooltip>\n      </div>\n    );\n  }\n\n  private renderRailAccessory(\n    accessory: PanelToolsRailAccessory,\n    focusIndexes: Map<string, number>\n  ) {\n    if (accessory.type === 'divider') {\n      return (\n        <div\n          key={`accessory:${accessory.id}`}\n          class=\"panel-tools__accessory-divider\"\n          aria-hidden=\"true\"\n        >\n          <ds-divider />\n        </div>\n      );\n    }\n\n    if (accessory.type === 'shortcut') {\n      return this.renderRailShortcut(accessory, focusIndexes);\n    }\n\n    const primaryKey = `accessory:${accessory.id}:${accessory.primaryAction.id}`;\n    const primaryIndex = focusIndexes.get(primaryKey);\n    const primaryLabel = this.accessoryPrimaryLabel(accessory);\n    const secondary = accessory.secondaryAction;\n    const secondaryKey = secondary ? `accessory:${accessory.id}:${secondary.id}` : '';\n    const secondaryIndex = secondary ? focusIndexes.get(secondaryKey) : undefined;\n\n    return (\n      <div\n        key={`accessory:${accessory.id}`}\n        class={{\n          'panel-tools__accessory': true,\n          'panel-tools__accessory--transient': true,\n          'panel-tools__accessory--transient-active': accessory.statusTone === 'active',\n          'panel-tools__accessory--transient-positive': accessory.statusTone === 'positive',\n        }}\n      >\n        <ds-tooltip label={primaryLabel} side=\"left\" size=\"sm\" boundary=\"viewport\">\n          <button\n            type=\"button\"\n            class=\"panel-tools__accessory-primary ds-focus-ring-inset ds-interaction-fill ds-interaction-fill--on-bold\"\n            disabled={accessory.primaryAction.isInactive}\n            tabIndex={primaryIndex === this.rovingIndex ? 0 : -1}\n            data-rail-focus-key={primaryKey}\n            aria-label={primaryLabel}\n            onFocus={() => {\n              if (primaryIndex !== undefined) this.rovingIndex = primaryIndex;\n            }}\n            onKeyDown={(event: KeyboardEvent) =>\n              primaryIndex === undefined ? undefined : this.handleRailKeyDown(event, primaryIndex)\n            }\n            onClick={(event: MouseEvent) =>\n              this.emitAccessoryAction(\n                accessory.id,\n                accessory.primaryAction,\n                event.currentTarget as HTMLElement\n              )\n            }\n          >\n            <span class=\"panel-tools__accessory-primary-content ds-interaction-fill__content\">\n              {this.renderAccessoryVisual(accessory)}\n            </span>\n          </button>\n        </ds-tooltip>\n        {secondary ? (\n          <ds-tooltip label={secondary.ariaLabel} side=\"left\" size=\"sm\" boundary=\"viewport\">\n            <ds-button-unfilled\n              class=\"panel-tools__accessory-secondary\"\n              variant=\"icon\"\n              size=\"sm\"\n              rounded\n              background=\"bold\"\n              hasBorder={false}\n              icon={secondary.icon}\n              isInactive={secondary.isInactive}\n              focusTabIndex={secondaryIndex === this.rovingIndex ? 0 : -1}\n              data-rail-focus-key={secondaryKey}\n              aria-label={secondary.ariaLabel}\n              onFocusin={() => {\n                if (secondaryIndex !== undefined) this.rovingIndex = secondaryIndex;\n              }}\n              onKeyDown={(event: KeyboardEvent) =>\n                secondaryIndex === undefined\n                  ? undefined\n                  : this.handleRailKeyDown(event, secondaryIndex)\n              }\n              onDsClick={(event: CustomEvent<MouseEvent>) =>\n                this.emitAccessoryAction(\n                  accessory.id,\n                  secondary,\n                  event.currentTarget as HTMLElement\n                )\n              }\n            />\n          </ds-tooltip>\n        ) : null}\n      </div>\n    );\n  }\n\n  private renderRailEntry(entry: PanelToolsRailEntry, focusIndexes: Map<string, number>) {\n    if (entry.type === 'tool') {\n      return this.renderRailAction(entry.item, focusIndexes.get(`tool:${entry.id}`) ?? 0);\n    }\n    return this.renderRailAccessory(entry.accessory, focusIndexes);\n  }\n\n  render() {\n    const accessibleLabel = this.accessibleLabel();\n    const header = this.activeHeader();\n    const headerTitle = header.title?.trim() || accessibleLabel;\n    const headerActions = header.actions ?? [];\n    const orderedRailItems = this.orderedRailItems;\n    const orderedRailEntries = this.orderedRailEntries;\n    const entryPlacement = (entry: PanelToolsRailEntry) =>\n      entry.type === 'tool' ? panelToolsRailPlacement(entry.item) : entry.accessory.railPlacement;\n    const headerEntries = orderedRailEntries.filter(entry => entryPlacement(entry) === 'header');\n    const bodyEntries = orderedRailEntries.filter(entry => entryPlacement(entry) === 'body');\n    const footerEntries = orderedRailEntries.filter(entry => entryPlacement(entry) === 'footer');\n    const focusIndexes = new Map(\n      panelToolsRailFocusKeys(orderedRailEntries).map((key, index) => [key, index])\n    );\n    const showDrawerChrome = this.isDrawerPresent();\n    const drawerResting = panelToolsDrawerResting(this.open, this.motion);\n    const activeFullView = Boolean(\n      showDrawerChrome && this.activeTool && this.hasFullView(this.activeTool)\n    );\n    const toolIds = orderedRailItems.map(item => item.id);\n\n    return (\n      <Host\n        class={{\n          'panel-tools': true,\n          'panel-tools--open': this.open,\n          'panel-tools--ready': this.readyForMotion,\n          'panel-tools--motion-opening': this.motion === 'opening',\n          'panel-tools--motion-closing': this.motion === 'closing',\n          'panel-tools--drawer-resting': drawerResting,\n          'panel-tools--fullscreen': this.presentation === 'fullscreen',\n          'panel-tools--presentation-snap': this.presentationMotionSuppressed,\n        }}\n        data-ds-overlay-boundary\n        role={this.presentation === 'fullscreen' ? 'dialog' : 'complementary'}\n        aria-modal={this.presentation === 'fullscreen' ? 'true' : undefined}\n        aria-label={this.toolsLabel}\n      >\n        <div class=\"panel-tools__layout\">\n          <nav class=\"panel-tools__rail\" aria-label={this.toolShortcutsLabel}>\n            {headerEntries.length ? (\n              <div\n                class={{\n                  'panel-tools__rail-header': true,\n                  'panel-tools__rail-section--stacked': headerEntries.length > 1,\n                  'ds-chrome-row': headerEntries.length === 1,\n                  'ds-chrome-column': headerEntries.length > 1,\n                  'ds-chrome-space--md': true,\n                }}\n              >\n                {headerEntries.map(entry => this.renderRailEntry(entry, focusIndexes))}\n              </div>\n            ) : null}\n            <div\n              class={{\n                'panel-tools__rail-body': true,\n                'ds-chrome-column': true,\n                'ds-chrome-space--md': true,\n                'ds-scrollbar-hidden': true,\n                'ds-focus-ring': this.railBodyScrollable,\n              }}\n              ref={element => {\n                const next = (element as HTMLElement) ?? undefined;\n                if (next === this.railBodyEl) return;\n                this.railBodyEl = next;\n                this.connectRailBodyObserver();\n              }}\n              role={this.railBodyScrollable ? 'region' : undefined}\n              aria-label={this.railBodyScrollable ? this.toolShortcutsLabel : undefined}\n              tabIndex={this.railBodyScrollable ? 0 : undefined}\n            >\n              <div class=\"panel-tools__rail-actions\">\n                {bodyEntries.map(entry => this.renderRailEntry(entry, focusIndexes))}\n              </div>\n            </div>\n            {footerEntries.length ? (\n              <div\n                class={{\n                  'panel-tools__rail-footer': true,\n                  'panel-tools__rail-section--stacked': footerEntries.length > 1,\n                  'ds-chrome-row': footerEntries.length === 1,\n                  'ds-chrome-column': footerEntries.length > 1,\n                  'ds-chrome-space--md': true,\n                }}\n              >\n                {footerEntries.map(entry => this.renderRailEntry(entry, focusIndexes))}\n              </div>\n            ) : null}\n          </nav>\n\n          <div\n            class={{\n              'panel-tools__drawer': true,\n              'panel-tools__drawer--visible': showDrawerChrome,\n            }}\n            aria-hidden={showDrawerChrome ? null : 'true'}\n            inert={showDrawerChrome ? undefined : true}\n          >\n            <div class=\"panel-tools__drawer-surface\">\n              {this.presentation !== 'fullscreen' || this.fullscreenHeaderMode === 'shared' ? (\n                <ds-panel-tool-header\n                  class=\"panel-tools__header\"\n                  heading={headerTitle}\n                  showBack={header.showBack ?? false}\n                  backIcon={header.backIcon || 'ChevronLeft'}\n                  backAriaLabel={header.backAriaLabel || 'Back'}\n                  showMenu={false}\n                  ref={element => {\n                    const toolHeader = element as\n                      | (HTMLDsPanelToolHeaderElement & {\n                          actions: PanelToolsHeaderAction[];\n                        })\n                      | undefined;\n                    if (toolHeader) toolHeader.actions = headerActions;\n                  }}\n                  onDsBack={() => {\n                    if (this.activeTool) this.dsHeaderBack.emit({ tool: this.activeTool });\n                  }}\n                />\n              ) : null}\n              <div class=\"panel-tools__body\" hidden={activeFullView}>\n                {toolIds.map(id => {\n                  const active = this.isViewActive(id);\n                  return (\n                    <div\n                      class={{\n                        'panel-tools__view': true,\n                        'panel-tools__view--active': active,\n                      }}\n                      hidden={!active}\n                    >\n                      <slot name={id} />\n                    </div>\n                  );\n                })}\n              </div>\n              <div class=\"panel-tools__full-views\" hidden={!activeFullView}>\n                {toolIds.map(id => (\n                  <div\n                    class={{\n                      'panel-tools__full-view': true,\n                      'panel-tools__full-view--active':\n                        this.isViewActive(id) && this.hasFullView(id),\n                    }}\n                    hidden={!(this.isViewActive(id) && this.hasFullView(id))}\n                  >\n                    <slot name={`${id}-view`} />\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/PanelTools/panel-tools-types.ts",
-      "content": "/** Application-owned tool id for the shell rail and responsive tool views. */\nexport type PanelToolsToolId = string;\n\n/** Canonical Motive shell recipe used when item metadata is omitted. */\nexport type CanonicalPanelToolsToolId =\n  | 'search'\n  | 'messages'\n  | 'agents'\n  | 'stacks'\n  | 'activity'\n  | 'help';\n\nexport const PANEL_TOOLS_TOOL_IDS: CanonicalPanelToolsToolId[] = [\n  'agents',\n  'messages',\n  'activity',\n  'search',\n  'stacks',\n  'help',\n];\n\n/** Rail header slot — mirrors panel-nav M logo row. */\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: CanonicalPanelToolsToolId = 'agents';\n\n/** Rail footer slot — flush to the bottom of the tools column. */\nexport const PANEL_TOOLS_FOOTER_TOOL_ID: CanonicalPanelToolsToolId = 'help';\n\nexport const PANEL_TOOLS_LABELS: Record<CanonicalPanelToolsToolId, string> = {\n  search: 'Search',\n  messages: 'Messages',\n  stacks: 'Stacks',\n  activity: 'Activity',\n  agents: 'Agents',\n  help: 'Help & Support',\n};\n\nexport const PANEL_TOOLS_SHORTCUTS: Partial<Record<CanonicalPanelToolsToolId, string>> = {\n  search: 'K',\n  agents: 'A',\n  messages: 'M',\n  stacks: 'S',\n  activity: 'N',\n  help: '/',\n};\n\nexport type PanelToolsRailPlacement = 'header' | 'body' | 'footer';\n\nexport interface PanelToolsItem {\n  id: PanelToolsToolId;\n  /** Icon name for <ds-icon>. */\n  icon: string;\n  /** Visible and accessible fallback label for custom tool ids. */\n  label?: string;\n  /** Explicit rail region; canonical Agents/Help placement is the fallback. */\n  railPlacement?: PanelToolsRailPlacement;\n  /** Stable ordering within the selected rail region. */\n  order?: number;\n  /** Optional shortcut label displayed by the tooltip. */\n  shortcutKey?: string;\n  /** Mobile destination recipe; canonical ids retain their explicit defaults. */\n  mobileDestination?: 'search' | 'inbox' | 'activity' | 'messages' | 'agents' | 'help';\n  /** Whether this rail button is currently pressed/active. */\n  selected?: boolean;\n  /** Show a notification dot. */\n  dot?: boolean;\n  isInactive?: boolean;\n  ariaLabel?: string;\n}\n\nexport type PanelToolsRailAccessoryVisual =\n  | { type: 'icon'; icon: string }\n  | { type: 'initial'; initial: string }\n  | { type: 'image'; src: string };\n\nexport interface PanelToolsRailAccessoryAction {\n  /** Stable application-owned action id emitted with the accessory id. */\n  id: string;\n  /** Overrides the accessory label for the primary action. */\n  ariaLabel?: string;\n  isInactive?: boolean;\n}\n\nexport interface PanelToolsRailAccessorySecondaryAction {\n  id: string;\n  icon: string;\n  ariaLabel: string;\n  isInactive?: boolean;\n}\n\nexport type PanelToolsRailTransientTone = 'active' | 'positive';\n\ninterface PanelToolsRailAccessoryBase {\n  /** Stable application-owned identity. Duplicate or blank ids are omitted. */\n  id: string;\n  /** Explicit rail region; accessories never infer placement from their id. */\n  railPlacement: PanelToolsRailPlacement;\n  /** Stable ordering within the selected rail region. */\n  order: number;\n}\n\n/** Decorative boundary between application-owned rail accessory groups. */\nexport interface PanelToolsRailDividerAccessory extends PanelToolsRailAccessoryBase {\n  type: 'divider';\n}\n\n/**\n * A compact one-action shortcut that matches standard tool-button geometry.\n * PanelTools owns its initial orb, notification dot, and transient interaction paint.\n */\nexport interface PanelToolsRailShortcutAccessory extends PanelToolsRailAccessoryBase {\n  type: 'shortcut';\n  /** Accessible shortcut name and action-label fallback. */\n  ariaLabel: string;\n  /** One or two displayed graphemes. Longer values are truncated visually. */\n  initials: string;\n  /** Supplemental notification dot. Include its meaning in the accessible label when needed. */\n  dot?: boolean;\n  action: PanelToolsRailAccessoryAction;\n}\n\n/**\n * A direct application intent that never selects a tool or changes drawer state.\n * PanelTools owns the two-control-height surface and its focus behavior.\n */\nexport interface PanelToolsRailTransientAccessory extends PanelToolsRailAccessoryBase {\n  type: 'transient';\n  /** Accessible accessory name and primary-action fallback label. */\n  ariaLabel: string;\n  visual: PanelToolsRailAccessoryVisual;\n  /** State announced with the primary action and shown in its tooltip. */\n  statusText: string;\n  /** Bold surface treatment. Active uses brand; positive uses positive semantic color. */\n  statusTone: PanelToolsRailTransientTone;\n  primaryAction: PanelToolsRailAccessoryAction;\n  secondaryAction?: PanelToolsRailAccessorySecondaryAction;\n}\n\nexport type PanelToolsRailAccessory =\n  | PanelToolsRailDividerAccessory\n  | PanelToolsRailShortcutAccessory\n  | PanelToolsRailTransientAccessory;\n\nexport interface PanelToolsRailAccessoryActionDetail {\n  accessoryId: string;\n  actionId: string;\n  /** Rendered action control, suitable for anchoring an application-owned overlay. */\n  anchor: HTMLElement;\n}\n\n/** Canonical shell recipe used by Lab and by managed ShellApp examples. */\nexport const PANEL_TOOLS_DEFAULT_ITEMS: PanelToolsItem[] = [\n  {\n    id: 'agents',\n    icon: 'AI',\n    label: PANEL_TOOLS_LABELS.agents,\n    railPlacement: 'header',\n    order: 0,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.agents,\n    mobileDestination: 'agents',\n  },\n  {\n    id: 'messages',\n    icon: 'MessageBubbleStack',\n    label: PANEL_TOOLS_LABELS.messages,\n    order: 0,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.messages,\n    mobileDestination: 'messages',\n  },\n  {\n    id: 'activity',\n    icon: 'Bell',\n    label: PANEL_TOOLS_LABELS.activity,\n    order: 1,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.activity,\n    mobileDestination: 'activity',\n  },\n  {\n    id: 'search',\n    icon: 'MagnifyingGlass',\n    label: PANEL_TOOLS_LABELS.search,\n    order: 2,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.search,\n    mobileDestination: 'search',\n  },\n  {\n    id: 'help',\n    icon: 'CircleQuestion',\n    label: PANEL_TOOLS_LABELS.help,\n    railPlacement: 'footer',\n    order: 0,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.help,\n    mobileDestination: 'help',\n  },\n];\n\nexport interface PanelToolsHeaderAction {\n  id: string;\n  icon: string;\n  ariaLabel: string;\n  triggerId?: string;\n  controls?: string;\n  expanded?: boolean;\n  /** Associated surface remains visible, including exit motion. */\n  surfaceOpen?: boolean;\n  haspopup?: 'menu' | 'dialog' | 'listbox' | 'tree' | 'grid';\n  pressed?: boolean;\n  isInactive?: boolean;\n}\n\nexport interface PanelToolsHeaderActionDetail {\n  tool: PanelToolsToolId;\n  id: string;\n  /** Rendered header action host. Pass this to an external overlay's element anchor prop. */\n  anchor?: HTMLElement;\n}\n\nexport interface PanelToolHeaderActionDetail {\n  id: string;\n  originalEvent: MouseEvent;\n  /** Rendered action host, suitable for anchoring an external overlay across a shadow boundary. */\n  anchor: HTMLElement;\n}\n\nexport interface PanelToolsHeaderConfig {\n  title?: string;\n  showBack?: boolean;\n  backIcon?: string;\n  backAriaLabel?: string;\n  actions?: PanelToolsHeaderAction[];\n}\n\n/** Per-tool header state. The application replaces the object when a tool changes depth or actions. */\nexport type PanelToolsHeaders = Partial<Record<PanelToolsToolId, PanelToolsHeaderConfig>>;\n",
+      "content": "/** Application-owned tool id for the shell rail and responsive tool views. */\nexport type PanelToolsToolId = string;\n\n/** Canonical Motive shell recipe used when item metadata is omitted. */\nexport type CanonicalPanelToolsToolId =\n  | 'search'\n  | 'messages'\n  | 'agents'\n  | 'stacks'\n  | 'activity'\n  | 'help';\n\nexport const PANEL_TOOLS_TOOL_IDS: CanonicalPanelToolsToolId[] = [\n  'agents',\n  'messages',\n  'activity',\n  'search',\n  'stacks',\n  'help',\n];\n\n/** Rail header slot — mirrors panel-nav M logo row. */\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: CanonicalPanelToolsToolId = 'agents';\n\n/** Rail footer slot — flush to the bottom of the tools column. */\nexport const PANEL_TOOLS_FOOTER_TOOL_ID: CanonicalPanelToolsToolId = 'help';\n\nexport const PANEL_TOOLS_LABELS: Record<CanonicalPanelToolsToolId, string> = {\n  search: 'Search',\n  messages: 'Messages',\n  stacks: 'Stacks',\n  activity: 'Activity',\n  agents: 'Agents',\n  help: 'Help & Support',\n};\n\nexport const PANEL_TOOLS_SHORTCUTS: Partial<Record<CanonicalPanelToolsToolId, string>> = {\n  search: 'K',\n  agents: 'A',\n  messages: 'M',\n  stacks: 'S',\n  activity: 'N',\n  help: '/',\n};\n\nexport type PanelToolsRailPlacement = 'header' | 'body' | 'footer';\n\nexport interface PanelToolsItem {\n  id: PanelToolsToolId;\n  /** Icon name for <ds-icon>. */\n  icon: string;\n  /** Visible and accessible fallback label for custom tool ids. */\n  label?: string;\n  /** Explicit rail region; canonical Agents/Help placement is the fallback. */\n  railPlacement?: PanelToolsRailPlacement;\n  /** Stable ordering within the selected rail region. */\n  order?: number;\n  /** Optional shortcut label displayed by the tooltip. */\n  shortcutKey?: string;\n  /** Mobile destination recipe; canonical ids retain their explicit defaults. */\n  mobileDestination?: 'search' | 'inbox' | 'activity' | 'messages' | 'agents' | 'help';\n  /** Whether this rail button is currently pressed/active. */\n  selected?: boolean;\n  /** Show a notification dot. */\n  dot?: boolean;\n  isInactive?: boolean;\n  ariaLabel?: string;\n}\n\nexport type PanelToolsRailAccessoryVisual =\n  | { type: 'icon'; icon: string }\n  | { type: 'initial'; initial: string }\n  | { type: 'image'; src: string };\n\nexport interface PanelToolsRailAccessoryAction {\n  /** Stable application-owned action id emitted with the accessory id. */\n  id: string;\n  /** Overrides the accessory label for the primary action. */\n  ariaLabel?: string;\n  isInactive?: boolean;\n}\n\nexport interface PanelToolsRailAccessorySecondaryAction {\n  id: string;\n  icon: string;\n  ariaLabel: string;\n  isInactive?: boolean;\n}\n\nexport type PanelToolsRailTransientTone = 'active' | 'positive';\n\ninterface PanelToolsRailAccessoryBase {\n  /** Stable application-owned identity. Duplicate or blank ids are omitted. */\n  id: string;\n  /** Explicit rail region; accessories never infer placement from their id. */\n  railPlacement: PanelToolsRailPlacement;\n  /** Stable ordering within the selected rail region. */\n  order: number;\n}\n\n/** Decorative boundary between application-owned rail accessory groups. */\nexport interface PanelToolsRailDividerAccessory extends PanelToolsRailAccessoryBase {\n  type: 'divider';\n}\n\n/**\n * A compact one-action shortcut that matches standard tool-button geometry.\n * PanelTools owns its initial orb, notification dot, and transient interaction paint.\n */\nexport interface PanelToolsRailShortcutAccessory extends PanelToolsRailAccessoryBase {\n  type: 'shortcut';\n  /** Accessible shortcut name and action-label fallback. */\n  ariaLabel: string;\n  /** One or two displayed graphemes. Longer values are truncated visually. */\n  initials: string;\n  /** Supplemental notification dot. Include its meaning in the accessible label when needed. */\n  dot?: boolean;\n  action: PanelToolsRailAccessoryAction;\n}\n\n/**\n * A direct application intent that never selects a tool or changes drawer state.\n * PanelTools owns the two-control-height surface and its focus behavior.\n */\nexport interface PanelToolsRailTransientAccessory extends PanelToolsRailAccessoryBase {\n  type: 'transient';\n  /** Accessible accessory name and primary-action fallback label. */\n  ariaLabel: string;\n  visual: PanelToolsRailAccessoryVisual;\n  /** State announced with the primary action and shown in its tooltip. */\n  statusText: string;\n  /** Bold surface treatment. Active uses brand; positive uses positive semantic color. */\n  statusTone: PanelToolsRailTransientTone;\n  primaryAction: PanelToolsRailAccessoryAction;\n  secondaryAction?: PanelToolsRailAccessorySecondaryAction;\n}\n\nexport type PanelToolsRailAccessory =\n  | PanelToolsRailDividerAccessory\n  | PanelToolsRailShortcutAccessory\n  | PanelToolsRailTransientAccessory;\n\nexport interface PanelToolsRailAccessoryActionDetail {\n  accessoryId: string;\n  actionId: string;\n  /** Rendered action control, suitable for anchoring an application-owned overlay. */\n  anchor: HTMLElement;\n}\n\n/** Canonical shell recipe used by Lab and by managed ShellApp examples. */\nexport const PANEL_TOOLS_DEFAULT_ITEMS: PanelToolsItem[] = [\n  {\n    id: 'agents',\n    icon: 'AIAsterisk',\n    label: PANEL_TOOLS_LABELS.agents,\n    railPlacement: 'header',\n    order: 0,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.agents,\n    mobileDestination: 'agents',\n  },\n  {\n    id: 'messages',\n    icon: 'MessageBubbleStack',\n    label: PANEL_TOOLS_LABELS.messages,\n    order: 0,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.messages,\n    mobileDestination: 'messages',\n  },\n  {\n    id: 'activity',\n    icon: 'Bell',\n    label: PANEL_TOOLS_LABELS.activity,\n    order: 1,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.activity,\n    mobileDestination: 'activity',\n  },\n  {\n    id: 'search',\n    icon: 'MagnifyingGlass',\n    label: PANEL_TOOLS_LABELS.search,\n    order: 2,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.search,\n    mobileDestination: 'search',\n  },\n  {\n    id: 'help',\n    icon: 'QuestionCircle',\n    label: PANEL_TOOLS_LABELS.help,\n    railPlacement: 'footer',\n    order: 0,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.help,\n    mobileDestination: 'help',\n  },\n];\n\nexport interface PanelToolsHeaderAction {\n  id: string;\n  icon: string;\n  ariaLabel: string;\n  triggerId?: string;\n  controls?: string;\n  expanded?: boolean;\n  /** Associated surface remains visible, including exit motion. */\n  surfaceOpen?: boolean;\n  haspopup?: 'menu' | 'dialog' | 'listbox' | 'tree' | 'grid';\n  pressed?: boolean;\n  isInactive?: boolean;\n}\n\nexport interface PanelToolsHeaderActionDetail {\n  tool: PanelToolsToolId;\n  id: string;\n  /** Rendered header action host. Pass this to an external overlay's element anchor prop. */\n  anchor?: HTMLElement;\n}\n\nexport interface PanelToolHeaderActionDetail {\n  id: string;\n  originalEvent: MouseEvent;\n  /** Rendered action host, suitable for anchoring an external overlay across a shadow boundary. */\n  anchor: HTMLElement;\n}\n\nexport interface PanelToolsHeaderConfig {\n  title?: string;\n  showBack?: boolean;\n  backIcon?: string;\n  backAriaLabel?: string;\n  actions?: PanelToolsHeaderAction[];\n}\n\n/** Per-tool header state. The application replaces the object when a tool changes depth or actions. */\nexport type PanelToolsHeaders = Partial<Record<PanelToolsToolId, PanelToolsHeaderConfig>>;\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/paper-texture.json

@@ -115,7 +115,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/radio.json

@@ -367,7 +367,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }