@ds-mo/ui 14.22.2 → 14.23.0

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

@@ -41,21 +41,24 @@
       "accessibility": [
         "Only the active mobile tool view participates in focus or the accessibility tree.",
         "Header Back and application-owned header actions preserve the PanelTools event contract.",
-        "A direct Activity destination renders its own named tool view; an explicitly grouped Inbox uses a named label-only TabGroup."
+        "A direct Activity destination renders its own named tool view; an explicitly grouped Inbox uses a named label-only TabGroup.",
+        "Desktop and tablet rail accessories retain PanelTools-owned labels, focus order, decorative-boundary semantics, and direct-action events."
       ],
       "states": [
         "The application owns open and activeTool and replaces headers when tool depth changes.",
         "Items with mobileDestination inbox map to one mobile Inbox destination while retaining the actual active tool id; the canonical recipe exposes Activity directly and keeps Inbox grouping opt-in.",
         "Stable tool ids own named slots; label, order, rail placement, shortcut, and mobile destination are explicit item data.",
+        "Application-owned rail accessories are forwarded unchanged to PanelTools on desktop and tablet and remain independent from activeTool and open.",
         "Switching responsive mode must not recreate application-owned slotted product elements."
       ],
       "responsiveBehavior": [
         "Desktop and tablet compose PanelTools-compatible rail and drawer chrome.",
-        "Mobile renders one centered MobileHeader for every direct tool; explicitly grouped Inbox tools use the large segmented section control."
+        "Mobile renders one centered MobileHeader for every direct tool; explicitly grouped Inbox tools use the large segmented section control.",
+        "Mobile intentionally omits desktop and tablet rail accessories instead of promoting them into tool views. Applications provide an equivalent persistent mobile status surface through ShellApp's top banner or status region."
       ],
       "frameworkCaveats": {
         "customElements": [
-          "Assign items and headers as JavaScript properties and place each persistent owner in its named *-view slot."
+          "Assign items, accessories, and headers as JavaScript properties and place each persistent owner in its named *-view slot."
         ],
         "react": [
           "Keep stable keyed product owner elements in the generated wrapper's named slots."
@@ -77,6 +80,14 @@
     },
     "api": {
       "props": {
+        "accessories": {
+          "type": "PanelToolsRailAccessory[]",
+          "resolvedType": "PanelToolsRailAccessory[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Desktop/tablet rail accessories. Intentionally omitted from the mobile tool stage."
+        },
         "activeTool": {
           "type": "PanelToolsToolId | ''",
           "resolvedType": "string",
@@ -195,6 +206,13 @@
           "cancelable": true,
           "composed": true
         },
+        {
+          "name": "dsRailAccessoryAction",
+          "detail": "PanelToolsRailAccessoryActionDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
         {
           "name": "dsToolChange",
           "detail": "{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }",
@@ -223,6 +241,14 @@
       "slots": []
     },
     "props": {
+      "accessories": {
+        "type": "PanelToolsRailAccessory[]",
+        "resolvedType": "PanelToolsRailAccessory[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Desktop/tablet rail accessories. Intentionally omitted from the mobile tool stage."
+      },
       "activeTool": {
         "type": "PanelToolsToolId | ''",
         "resolvedType": "string",
@@ -341,6 +367,13 @@
         "cancelable": true,
         "composed": true
       },
+      {
+        "name": "dsRailAccessoryAction",
+        "detail": "PanelToolsRailAccessoryActionDetail",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
       {
         "name": "dsToolChange",
         "detail": "{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }",
@@ -392,10 +425,10 @@
         "import": "import { DsShellTools } from '@ds-mo/ui/angular/ds-shell-tools';",
         "example": "<ds-shell-tools></ds-shell-tools>"
       },
-      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: headers, items.",
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: accessories, headers, items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
@@ -420,7 +453,7 @@
     },
     {
       "path": "src/wc/components/ShellTools/ShellTools.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport {\n  PANEL_TOOLS_LABELS,\n  type PanelToolsHeaderConfig,\n  type PanelToolsHeaders,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from '../PanelTools/panel-tools-types';\nimport {\n  orderPanelToolsItems,\n  reconcilePanelToolsAvailability,\n  resolvePanelToolActivation,\n} from '../PanelTools/panel-tools-utils';\nimport {\n  itemUsesShellInbox,\n  isShellInboxTool,\n  resolveAvailableInboxTool,\n  type ShellInboxToolId,\n  type ShellResponsiveMode,\n} from '../../shell/shell-responsive';\n\n@Component({\n  tag: 'ds-shell-tools',\n  styleUrl: 'ShellTools.css',\n  shadow: true,\n})\nexport class ShellTools {\n  @Element() el!: HTMLElement;\n\n  /** Resolved by ShellApp; mobile uses a full-stage tool presentation. */\n  @Prop({ attribute: 'responsive-mode', reflect: true })\n  responsiveMode: ShellResponsiveMode = 'desktop';\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n  activeTool: PanelToolsToolId | '' = '';\n  @Prop({ mutable: true, reflect: true }) presentation: 'drawer' | 'fullscreen' = 'drawer';\n  @Prop({ attribute: 'fullscreen-header-mode', reflect: true })\n  fullscreenHeaderMode: 'shared' | 'split' = 'shared';\n  @Prop() items: PanelToolsItem[] = [];\n  @Prop() headers: PanelToolsHeaders = {};\n  @Prop({ attribute: 'storage-key' }) storageKey: string = '';\n  @Prop() toolsLabel: string = 'Tools';\n  @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n  @Prop() inboxLabel: string = 'Inbox';\n  @Prop() inboxNavigationLabel: string = 'Inbox sections';\n\n  @Watch('presentation')\n  presentationChanged(next: 'drawer' | 'fullscreen', previous: 'drawer' | 'fullscreen') {\n    if (next === previous) return;\n\n    /*\n     * Consumers update ShellTools and their slotted master/detail layout in the\n     * same render. Forward the request immediately so PanelTools can conceal\n     * its surface until its matching render class commits on the next frame.\n     */\n    if (this.panelToolsEl && this.panelToolsEl.getAttribute('presentation') !== next) {\n      this.panelToolsEl.setAttribute('presentation', next);\n    }\n  }\n\n  @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }>;\n  @Event({ bubbles: true, composed: true }) dsPresentationChange!: EventEmitter<{\n    presentation: 'drawer' | 'fullscreen';\n  }>;\n  @Event({ bubbles: true, composed: true }) dsHeaderBack!: EventEmitter<{\n    tool: PanelToolsToolId;\n  }>;\n  @Event({ bubbles: true, composed: true }) dsHeaderAction!: EventEmitter<{\n    tool: PanelToolsToolId;\n    id: string;\n  }>;\n\n  private panelToolsEl: HTMLDsPanelToolsElement | null = null;\n\n  private get resolvedItems(): PanelToolsItem[] {\n    return this.items ?? [];\n  }\n\n  private get availableInboxTools(): ShellInboxToolId[] {\n    return this.resolvedItems\n      .filter(item => !item.isInactive && itemUsesShellInbox(item))\n      .map(item => item.id as ShellInboxToolId);\n  }\n\n  private get mobileViewOrder(): PanelToolsToolId[] {\n    return orderPanelToolsItems(this.resolvedItems).map(item => item.id);\n  }\n\n  private toolLabel(id: PanelToolsToolId): string {\n    const item = this.resolvedItems.find(candidate => candidate.id === id);\n    return (\n      item?.label ??\n      item?.ariaLabel ??\n      PANEL_TOOLS_LABELS[id as keyof typeof PANEL_TOOLS_LABELS] ??\n      id\n    );\n  }\n\n  private get mobileActiveTool(): PanelToolsToolId | '' {\n    const item = this.resolvedItems.find(candidate => candidate.id === this.activeTool);\n    const inbox = item ? itemUsesShellInbox(item) : isShellInboxTool(this.activeTool);\n    if (!inbox) return this.activeTool;\n    return resolveAvailableInboxTool(this.activeTool, this.availableInboxTools);\n  }\n\n  componentWillLoad() {\n    this.reconcileAvailability();\n  }\n\n  @Watch('items')\n  handleItemsChange() {\n    this.reconcileAvailability();\n  }\n\n  private reconcileAvailability() {\n    const next = reconcilePanelToolsAvailability(this.resolvedItems, this.open, this.activeTool);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n  }\n\n  private resolvedHeaders(): PanelToolsHeaders {\n    return this.headers ?? {};\n  }\n\n  private activeHeader(tool: PanelToolsToolId): PanelToolsHeaderConfig {\n    return this.resolvedHeaders()[tool] ?? {};\n  }\n\n  private activateMobileTool(id: PanelToolsToolId) {\n    const item = this.resolvedItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\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  private selectInboxTool = (event: CustomEvent<string>) => {\n    const id = event.detail;\n    if (!this.availableInboxTools.includes(id) || id === this.mobileActiveTool) return;\n    this.open = true;\n    this.activeTool = id;\n    this.dsToolChange.emit({ id, selected: true });\n  };\n\n  private handlePanelToolChange = (\n    event: CustomEvent<{ id: PanelToolsToolId; selected: boolean }>\n  ) => {\n    this.activeTool = event.detail.id;\n    this.open = event.detail.selected;\n  };\n\n  private handlePanelPresentationChange = (\n    event: CustomEvent<{ presentation: 'drawer' | 'fullscreen' }>\n  ) => {\n    this.presentation = event.detail.presentation;\n  };\n\n  private handleMobileHeaderAction = (\n    tool: PanelToolsToolId,\n    id: string,\n    event: CustomEvent<MouseEvent>\n  ) => {\n    event.stopPropagation();\n    this.dsHeaderAction.emit({ tool, id });\n  };\n\n  /** Match PanelTools' imperative activation contract in every responsive mode. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.activateTool(id);\n      return;\n    }\n    this.activateMobileTool(id);\n  }\n\n  /** Close the active global tool surface. */\n  @Method()\n  async closeDrawer() {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.closeDrawer();\n      return;\n    }\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) this.dsToolChange.emit({ id, selected: false });\n  }\n\n  /** Focus an application-owned action in the visible shared tool header. */\n  @Method()\n  async focusHeaderAction(id: string) {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.focusHeaderAction(id);\n      return;\n    }\n    const action = (this.el.shadowRoot ?? this.el).querySelector(\n      `[data-header-action-id=\"${CSS.escape(id)}\"]`\n    ) as (HTMLElement & { setFocus?: () => Promise<void> }) | null;\n    await action?.setFocus?.();\n  }\n\n  private renderForwardedSlots() {\n    return this.mobileViewOrder.flatMap(id => [\n      <div key={`tool:${id}`} class=\"shell-tools__slot-proxy\" slot={id}>\n        <slot name={id} />\n      </div>,\n      <div key={`tool-view:${id}`} class=\"shell-tools__slot-proxy\" slot={`${id}-view`}>\n        <slot name={`${id}-view`} />\n      </div>,\n    ]);\n  }\n\n  private renderDesktop() {\n    return (\n      <div class=\"shell-tools__desktop\">\n        <ds-panel-tools\n          open={this.open}\n          activeTool={this.activeTool}\n          presentation={this.presentation}\n          fullscreenHeaderMode={this.fullscreenHeaderMode}\n          items={this.resolvedItems}\n          headers={this.resolvedHeaders()}\n          storageKey={this.storageKey}\n          toolsLabel={this.toolsLabel}\n          toolShortcutsLabel={this.toolShortcutsLabel}\n          ref={element => {\n            this.panelToolsEl = element as HTMLDsPanelToolsElement | null;\n          }}\n          onDsToolChange={this.handlePanelToolChange}\n          onDsPresentationChange={this.handlePanelPresentationChange}\n        >\n          {this.renderForwardedSlots()}\n        </ds-panel-tools>\n      </div>\n    );\n  }\n\n  private renderMobileHeader(tool: PanelToolsToolId) {\n    const header = this.activeHeader(tool);\n    const configuredTitle = header.title?.trim();\n    const title = configuredTitle || this.toolLabel(tool);\n    const actions = (header.actions ?? []).filter(action => action.id !== 'fullscreen');\n    const item = this.resolvedItems.find(candidate => candidate.id === tool);\n    const inboxRoot = Boolean(item && itemUsesShellInbox(item) && !header.showBack);\n    const sections = inboxRoot\n      ? this.availableInboxTools.map(id => {\n          const item = this.resolvedItems.find(candidate => candidate.id === id);\n          return {\n            id,\n            label: this.toolLabel(id),\n            variant: 'label' as const,\n            dot: item?.dot,\n          };\n        })\n      : [];\n\n    return (\n      <ds-mobile-header\n        class=\"shell-tools__mobile-header\"\n        heading={title}\n        headingLevel=\"h2\"\n        sections={sections}\n        value={tool}\n        sectionsAriaLabel={this.inboxNavigationLabel}\n        sectionsPresentation={inboxRoot ? 'segmented' : 'switcher'}\n        sectionsSize=\"lg\"\n        onDsSectionChange={this.selectInboxTool}\n      >\n        {header.showBack ? (\n          <ds-tooltip slot=\"leading\" label={header.backAriaLabel || 'Back'} side=\"bottom\" size=\"sm\">\n            <ds-button-unfilled\n              variant=\"icon\"\n              icon={header.backIcon || 'ChevronLeft'}\n              size=\"md\"\n              aria-label={header.backAriaLabel || 'Back'}\n              activeFill={false}\n              hasBorder={false}\n              onDsClick={() => this.dsHeaderBack.emit({ tool })}\n            />\n          </ds-tooltip>\n        ) : null}\n        {actions.map(action => (\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              data-header-action-id={action.id}\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              isInactive={action.isInactive}\n              activeFill={false}\n              hasBorder={false}\n              onDsClick={(event: CustomEvent<MouseEvent>) =>\n                this.handleMobileHeaderAction(tool, action.id, event)\n              }\n            />\n          </ds-tooltip>\n        ))}\n      </ds-mobile-header>\n    );\n  }\n\n  private renderMobile() {\n    const tool = this.mobileActiveTool;\n    return (\n      <div\n        class=\"shell-tools__mobile\"\n        aria-hidden={this.open && tool ? undefined : 'true'}\n        inert={this.open && tool ? undefined : true}\n      >\n        {tool ? this.renderMobileHeader(tool) : null}\n        <div class=\"shell-tools__mobile-body\">\n          {this.mobileViewOrder.map(id => {\n            const active = this.open && id === tool;\n            return (\n              <div\n                key={`mobile-tool-view:${id}`}\n                class={{\n                  'shell-tools__view': true,\n                  'shell-tools__view--active': active,\n                }}\n                hidden={!active}\n                aria-hidden={active ? undefined : 'true'}\n                inert={active ? undefined : true}\n              >\n                <slot name={`${id}-view`}>\n                  <slot name={id} />\n                </slot>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const mobile = this.responsiveMode === 'mobile';\n    return (\n      <Host\n        role={\n          mobile ? (this.presentation === 'fullscreen' ? 'dialog' : 'complementary') : undefined\n        }\n        aria-modal={mobile && this.presentation === 'fullscreen' ? 'true' : undefined}\n        aria-label={mobile ? this.toolsLabel : undefined}\n      >\n        {mobile ? this.renderMobile() : this.renderDesktop()}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport {\n  PANEL_TOOLS_LABELS,\n  type PanelToolsHeaderConfig,\n  type PanelToolsHeaders,\n  type PanelToolsItem,\n  type PanelToolsRailAccessory,\n  type PanelToolsRailAccessoryActionDetail,\n  type PanelToolsToolId,\n} from '../PanelTools/panel-tools-types';\nimport {\n  orderPanelToolsItems,\n  reconcilePanelToolsAvailability,\n  resolvePanelToolActivation,\n} from '../PanelTools/panel-tools-utils';\nimport {\n  itemUsesShellInbox,\n  isShellInboxTool,\n  resolveAvailableInboxTool,\n  type ShellInboxToolId,\n  type ShellResponsiveMode,\n} from '../../shell/shell-responsive';\n\n@Component({\n  tag: 'ds-shell-tools',\n  styleUrl: 'ShellTools.css',\n  shadow: true,\n})\nexport class ShellTools {\n  @Element() el!: HTMLElement;\n\n  /** Resolved by ShellApp; mobile uses a full-stage tool presentation. */\n  @Prop({ attribute: 'responsive-mode', reflect: true })\n  responsiveMode: ShellResponsiveMode = 'desktop';\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n  activeTool: PanelToolsToolId | '' = '';\n  @Prop({ mutable: true, reflect: true }) presentation: 'drawer' | 'fullscreen' = 'drawer';\n  @Prop({ attribute: 'fullscreen-header-mode', reflect: true })\n  fullscreenHeaderMode: 'shared' | 'split' = 'shared';\n  @Prop() items: PanelToolsItem[] = [];\n  /** Desktop/tablet rail accessories. Intentionally omitted from the mobile tool stage. */\n  @Prop() accessories: PanelToolsRailAccessory[] = [];\n  @Prop() headers: PanelToolsHeaders = {};\n  @Prop({ attribute: 'storage-key' }) storageKey: string = '';\n  @Prop() toolsLabel: string = 'Tools';\n  @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n  @Prop() inboxLabel: string = 'Inbox';\n  @Prop() inboxNavigationLabel: string = 'Inbox sections';\n\n  @Watch('presentation')\n  presentationChanged(next: 'drawer' | 'fullscreen', previous: 'drawer' | 'fullscreen') {\n    if (next === previous) return;\n\n    /*\n     * Consumers update ShellTools and their slotted master/detail layout in the\n     * same render. Forward the request immediately so PanelTools can conceal\n     * its surface until its matching render class commits on the next frame.\n     */\n    if (this.panelToolsEl && this.panelToolsEl.getAttribute('presentation') !== next) {\n      this.panelToolsEl.setAttribute('presentation', next);\n    }\n  }\n\n  @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }>;\n  @Event({ bubbles: true, composed: true }) dsPresentationChange!: EventEmitter<{\n    presentation: 'drawer' | 'fullscreen';\n  }>;\n  @Event({ bubbles: true, composed: true }) dsHeaderBack!: EventEmitter<{\n    tool: PanelToolsToolId;\n  }>;\n  @Event({ bubbles: true, composed: true }) dsHeaderAction!: EventEmitter<{\n    tool: PanelToolsToolId;\n    id: string;\n  }>;\n  @Event({ bubbles: true, composed: true })\n  dsRailAccessoryAction!: EventEmitter<PanelToolsRailAccessoryActionDetail>;\n\n  private panelToolsEl: HTMLDsPanelToolsElement | null = null;\n\n  private get resolvedItems(): PanelToolsItem[] {\n    return this.items ?? [];\n  }\n\n  private get availableInboxTools(): ShellInboxToolId[] {\n    return this.resolvedItems\n      .filter(item => !item.isInactive && itemUsesShellInbox(item))\n      .map(item => item.id as ShellInboxToolId);\n  }\n\n  private get mobileViewOrder(): PanelToolsToolId[] {\n    return orderPanelToolsItems(this.resolvedItems).map(item => item.id);\n  }\n\n  private toolLabel(id: PanelToolsToolId): string {\n    const item = this.resolvedItems.find(candidate => candidate.id === id);\n    return (\n      item?.label ??\n      item?.ariaLabel ??\n      PANEL_TOOLS_LABELS[id as keyof typeof PANEL_TOOLS_LABELS] ??\n      id\n    );\n  }\n\n  private get mobileActiveTool(): PanelToolsToolId | '' {\n    const item = this.resolvedItems.find(candidate => candidate.id === this.activeTool);\n    const inbox = item ? itemUsesShellInbox(item) : isShellInboxTool(this.activeTool);\n    if (!inbox) return this.activeTool;\n    return resolveAvailableInboxTool(this.activeTool, this.availableInboxTools);\n  }\n\n  componentWillLoad() {\n    this.reconcileAvailability();\n  }\n\n  @Watch('items')\n  handleItemsChange() {\n    this.reconcileAvailability();\n  }\n\n  private reconcileAvailability() {\n    const next = reconcilePanelToolsAvailability(this.resolvedItems, this.open, this.activeTool);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n  }\n\n  private resolvedHeaders(): PanelToolsHeaders {\n    return this.headers ?? {};\n  }\n\n  private activeHeader(tool: PanelToolsToolId): PanelToolsHeaderConfig {\n    return this.resolvedHeaders()[tool] ?? {};\n  }\n\n  private activateMobileTool(id: PanelToolsToolId) {\n    const item = this.resolvedItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\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  private selectInboxTool = (event: CustomEvent<string>) => {\n    const id = event.detail;\n    if (!this.availableInboxTools.includes(id) || id === this.mobileActiveTool) return;\n    this.open = true;\n    this.activeTool = id;\n    this.dsToolChange.emit({ id, selected: true });\n  };\n\n  private handlePanelToolChange = (\n    event: CustomEvent<{ id: PanelToolsToolId; selected: boolean }>\n  ) => {\n    this.activeTool = event.detail.id;\n    this.open = event.detail.selected;\n  };\n\n  private handlePanelPresentationChange = (\n    event: CustomEvent<{ presentation: 'drawer' | 'fullscreen' }>\n  ) => {\n    this.presentation = event.detail.presentation;\n  };\n\n  private handlePanelRailAccessoryAction = (\n    event: CustomEvent<PanelToolsRailAccessoryActionDetail>\n  ) => {\n    event.stopPropagation();\n    this.dsRailAccessoryAction.emit(event.detail);\n  };\n\n  private handleMobileHeaderAction = (\n    tool: PanelToolsToolId,\n    id: string,\n    event: CustomEvent<MouseEvent>\n  ) => {\n    event.stopPropagation();\n    this.dsHeaderAction.emit({ tool, id });\n  };\n\n  /** Match PanelTools' imperative activation contract in every responsive mode. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.activateTool(id);\n      return;\n    }\n    this.activateMobileTool(id);\n  }\n\n  /** Close the active global tool surface. */\n  @Method()\n  async closeDrawer() {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.closeDrawer();\n      return;\n    }\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) this.dsToolChange.emit({ id, selected: false });\n  }\n\n  /** Focus an application-owned action in the visible shared tool header. */\n  @Method()\n  async focusHeaderAction(id: string) {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.focusHeaderAction(id);\n      return;\n    }\n    const action = (this.el.shadowRoot ?? this.el).querySelector(\n      `[data-header-action-id=\"${CSS.escape(id)}\"]`\n    ) as (HTMLElement & { setFocus?: () => Promise<void> }) | null;\n    await action?.setFocus?.();\n  }\n\n  private renderForwardedSlots() {\n    return this.mobileViewOrder.flatMap(id => [\n      <div key={`tool:${id}`} class=\"shell-tools__slot-proxy\" slot={id}>\n        <slot name={id} />\n      </div>,\n      <div key={`tool-view:${id}`} class=\"shell-tools__slot-proxy\" slot={`${id}-view`}>\n        <slot name={`${id}-view`} />\n      </div>,\n    ]);\n  }\n\n  private renderDesktop() {\n    return (\n      <div class=\"shell-tools__desktop\">\n        <ds-panel-tools\n          open={this.open}\n          activeTool={this.activeTool}\n          presentation={this.presentation}\n          fullscreenHeaderMode={this.fullscreenHeaderMode}\n          items={this.resolvedItems}\n          accessories={this.accessories ?? []}\n          headers={this.resolvedHeaders()}\n          storageKey={this.storageKey}\n          toolsLabel={this.toolsLabel}\n          toolShortcutsLabel={this.toolShortcutsLabel}\n          ref={element => {\n            this.panelToolsEl = element as HTMLDsPanelToolsElement | null;\n          }}\n          onDsToolChange={this.handlePanelToolChange}\n          onDsPresentationChange={this.handlePanelPresentationChange}\n          onDsRailAccessoryAction={this.handlePanelRailAccessoryAction}\n        >\n          {this.renderForwardedSlots()}\n        </ds-panel-tools>\n      </div>\n    );\n  }\n\n  private renderMobileHeader(tool: PanelToolsToolId) {\n    const header = this.activeHeader(tool);\n    const configuredTitle = header.title?.trim();\n    const title = configuredTitle || this.toolLabel(tool);\n    const actions = (header.actions ?? []).filter(action => action.id !== 'fullscreen');\n    const item = this.resolvedItems.find(candidate => candidate.id === tool);\n    const inboxRoot = Boolean(item && itemUsesShellInbox(item) && !header.showBack);\n    const sections = inboxRoot\n      ? this.availableInboxTools.map(id => {\n          const item = this.resolvedItems.find(candidate => candidate.id === id);\n          return {\n            id,\n            label: this.toolLabel(id),\n            variant: 'label' as const,\n            dot: item?.dot,\n          };\n        })\n      : [];\n\n    return (\n      <ds-mobile-header\n        class=\"shell-tools__mobile-header\"\n        heading={title}\n        headingLevel=\"h2\"\n        sections={sections}\n        value={tool}\n        sectionsAriaLabel={this.inboxNavigationLabel}\n        sectionsPresentation={inboxRoot ? 'segmented' : 'switcher'}\n        sectionsSize=\"lg\"\n        onDsSectionChange={this.selectInboxTool}\n      >\n        {header.showBack ? (\n          <ds-tooltip slot=\"leading\" label={header.backAriaLabel || 'Back'} side=\"bottom\" size=\"sm\">\n            <ds-button-unfilled\n              variant=\"icon\"\n              icon={header.backIcon || 'ChevronLeft'}\n              size=\"md\"\n              aria-label={header.backAriaLabel || 'Back'}\n              activeFill={false}\n              hasBorder={false}\n              onDsClick={() => this.dsHeaderBack.emit({ tool })}\n            />\n          </ds-tooltip>\n        ) : null}\n        {actions.map(action => (\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              data-header-action-id={action.id}\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              isInactive={action.isInactive}\n              activeFill={false}\n              hasBorder={false}\n              onDsClick={(event: CustomEvent<MouseEvent>) =>\n                this.handleMobileHeaderAction(tool, action.id, event)\n              }\n            />\n          </ds-tooltip>\n        ))}\n      </ds-mobile-header>\n    );\n  }\n\n  private renderMobile() {\n    const tool = this.mobileActiveTool;\n    return (\n      <div\n        class=\"shell-tools__mobile\"\n        aria-hidden={this.open && tool ? undefined : 'true'}\n        inert={this.open && tool ? undefined : true}\n      >\n        {tool ? this.renderMobileHeader(tool) : null}\n        <div class=\"shell-tools__mobile-body\">\n          {this.mobileViewOrder.map(id => {\n            const active = this.open && id === tool;\n            return (\n              <div\n                key={`mobile-tool-view:${id}`}\n                class={{\n                  'shell-tools__view': true,\n                  'shell-tools__view--active': active,\n                }}\n                hidden={!active}\n                aria-hidden={active ? undefined : 'true'}\n                inert={active ? undefined : true}\n              >\n                <slot name={`${id}-view`}>\n                  <slot name={id} />\n                </slot>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const mobile = this.responsiveMode === 'mobile';\n    return (\n      <Host\n        role={\n          mobile ? (this.presentation === 'fullscreen' ? 'dialog' : 'complementary') : undefined\n        }\n        aria-modal={mobile && this.presentation === 'fullscreen' ? 'true' : undefined}\n        aria-label={mobile ? this.toolsLabel : undefined}\n      >\n        {mobile ? this.renderMobile() : this.renderDesktop()}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

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

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

@@ -634,7 +634,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: formatOptions, valueTexts.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/swatch-picker.json

@@ -204,7 +204,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: options, sections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

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

package/dist/mcp-data/registry/tab-group.json

@@ -281,7 +281,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: tabs.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/table-filter.json

@@ -442,7 +442,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: filters, matchModes, values.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/table-group.json

@@ -269,7 +269,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: grouping, options.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/table-saved-views.json

@@ -348,7 +348,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: views.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/table-search.json

@@ -298,7 +298,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: columns, selectedFieldIds.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/table-sort.json

@@ -195,7 +195,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: columns, sort.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/table-toolbar.json

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

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

@@ -1294,7 +1294,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: collapsedGroupIds, columnOrder, columns, grouping, groups, hiddenColumnIds, highlightFieldIds, highlightTerms, pagination, rows, selectedRowIds, sort.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

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

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

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

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

@@ -312,7 +312,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: manager, swipeDirections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/tooltip-chart.json

@@ -231,7 +231,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

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

package/dist/mcp-data/registry/typing-indicator.json

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

package/dist/react/ds-panel-tools.d.ts

@@ -3,7 +3,7 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type ChromeTransitionDetail, type DsPanelToolsCustomEvent, type PanelToolsHeaderActionDetail, type PanelToolsToolId } from "@ds-mo/ui";
+import { type ChromeTransitionDetail, type DsPanelToolsCustomEvent, type PanelToolsHeaderActionDetail, type PanelToolsRailAccessoryActionDetail, type PanelToolsToolId } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsPanelTools as DsPanelToolsElement } from "@ds-mo/ui/dist/components/ds-panel-tools.js";
 export type DsPanelToolsEvents = {
@@ -18,6 +18,7 @@ export type DsPanelToolsEvents = {
         tool: PanelToolsToolId;
     }>>;
     onDsHeaderAction: EventName<DsPanelToolsCustomEvent<PanelToolsHeaderActionDetail>>;
+    onDsRailAccessoryAction: EventName<DsPanelToolsCustomEvent<PanelToolsRailAccessoryActionDetail>>;
     onDsChromeTransitionStart: EventName<DsPanelToolsCustomEvent<ChromeTransitionDetail>>;
     onDsChromeTransitionEnd: EventName<DsPanelToolsCustomEvent<ChromeTransitionDetail>>;
 };

package/dist/react/ds-panel-tools.js

@@ -12,6 +12,7 @@ export const DsPanelTools = /*@__PURE__*/ createComponent({
         onDsPresentationChange: 'dsPresentationChange',
         onDsHeaderBack: 'dsHeaderBack',
         onDsHeaderAction: 'dsHeaderAction',
+        onDsRailAccessoryAction: 'dsRailAccessoryAction',
         onDsChromeTransitionStart: 'dsChromeTransitionStart',
         onDsChromeTransitionEnd: 'dsChromeTransitionEnd'
     },

package/dist/react/ds-shell-app.d.ts

@@ -3,7 +3,7 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type BreadcrumbSelectDetail, type DsShellAppCustomEvent, type NavChromeStyle, type PanelNavChildSelectDetail, type PanelNavUserActionDetail, type PanelToolsToolId, type ShellResponsiveMode } from "@ds-mo/ui";
+import { type BreadcrumbSelectDetail, type DsShellAppCustomEvent, type NavChromeStyle, type PanelNavChildSelectDetail, type PanelNavUserActionDetail, type PanelToolsRailAccessoryActionDetail, type PanelToolsToolId, type ShellResponsiveMode } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsShellApp as DsShellAppElement } from "@ds-mo/ui/dist/components/ds-shell-app.js";
 export type DsShellAppEvents = {
@@ -28,6 +28,7 @@ export type DsShellAppEvents = {
         tool: PanelToolsToolId;
         id: string;
     }>>;
+    onDsRailAccessoryAction: EventName<DsShellAppCustomEvent<PanelToolsRailAccessoryActionDetail>>;
     onDsPresentationChange: EventName<DsShellAppCustomEvent<{
         presentation: 'drawer' | 'fullscreen';
     }>>;

package/dist/react/ds-shell-app.js

@@ -19,6 +19,7 @@ export const DsShellApp = /*@__PURE__*/ createComponent({
         onDsToolChange: 'dsToolChange',
         onDsHeaderBack: 'dsHeaderBack',
         onDsHeaderAction: 'dsHeaderAction',
+        onDsRailAccessoryAction: 'dsRailAccessoryAction',
         onDsPresentationChange: 'dsPresentationChange',
         onDsBrowseContextChange: 'dsBrowseContextChange',
         onDsNavFooterAction: 'dsNavFooterAction',

package/dist/react/ds-shell-tools.d.ts

@@ -3,7 +3,7 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type DsShellToolsCustomEvent, type PanelToolsToolId } from "@ds-mo/ui";
+import { type DsShellToolsCustomEvent, type PanelToolsRailAccessoryActionDetail, type PanelToolsToolId } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsShellTools as DsShellToolsElement } from "@ds-mo/ui/dist/components/ds-shell-tools.js";
 export type DsShellToolsEvents = {
@@ -21,5 +21,6 @@ export type DsShellToolsEvents = {
         tool: PanelToolsToolId;
         id: string;
     }>>;
+    onDsRailAccessoryAction: EventName<DsShellToolsCustomEvent<PanelToolsRailAccessoryActionDetail>>;
 };
 export declare const DsShellTools: StencilReactComponent<DsShellToolsElement, DsShellToolsEvents, Components.DsShellTools>;

package/dist/react/ds-shell-tools.js

@@ -11,7 +11,8 @@ export const DsShellTools = /*@__PURE__*/ createComponent({
         onDsToolChange: 'dsToolChange',
         onDsPresentationChange: 'dsPresentationChange',
         onDsHeaderBack: 'dsHeaderBack',
-        onDsHeaderAction: 'dsHeaderAction'
+        onDsHeaderAction: 'dsHeaderAction',
+        onDsRailAccessoryAction: 'dsRailAccessoryAction'
     },
     defineCustomElement: defineDsShellTools
 });

package/dist/types/components/MessageScroller/MessageScroller.d.ts

@@ -28,13 +28,26 @@ export declare class MessageScroller {
     private activeTurnAnchorViewportTop?;
     private turnClearance;
     private prependReconciliation;
+    private turnPositionGeneration;
+    private defaultPositionGeneration;
+    private transcriptResetPending;
+    private hasLoaded;
     componentDidLoad(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     scrollToMessage(id: string): Promise<boolean>;
     scrollToStart(): Promise<void>;
     scrollToEnd(): Promise<void>;
     private motionBehavior;
     private scrollTo;
+    private invalidateTranscriptWork;
+    private clearActiveTurnAnchor;
+    private resetTranscriptTracking;
+    private resetTranscriptPositionState;
+    private trackTranscript;
+    private seedTranscriptBaseline;
+    private pruneTranscriptTracking;
+    private scheduleDefaultPosition;
     private connectObservers;
     private handleContentGrowth;
     private rememberFirstChildTop;
@@ -43,6 +56,7 @@ export declare class MessageScroller {
     private reconcilePrependPosition;
     private schedulePrependReconciliation;
     private handleTranscriptSlotChange;
+    private scheduleNewTurnPosition;
     private positionNewTurn;
     private finishPositionNewTurn;
     private rememberActiveTurnAnchorTop;

package/dist/types/components/MessageScroller/message-scroller-transcript.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A transcript reset replaces the current baseline instead of appending or
+ * prepending around surviving nodes. Emptying a populated transcript also
+ * starts a reset that completes when its next baseline is supplied.
+ */
+export declare function isMessageScrollerTranscriptReset<T>(previous: readonly T[], current: readonly T[]): boolean;
+/** Keep identity tracking bounded to nodes in the current transcript. */
+export declare function pruneMessageScrollerTranscriptSet<T>(known: Set<T>, current: readonly T[]): void;
+//# sourceMappingURL=message-scroller-transcript.d.ts.map

package/dist/types/components/PanelTools/PanelTools.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { ChromeTransitionDetail } from '../../shell/chrome-transition';
-import { type PanelToolsHeaderActionDetail, type PanelToolsHeaders, type PanelToolsItem, type PanelToolsToolId } from './panel-tools-types';
+import { type PanelToolsHeaderActionDetail, type PanelToolsHeaders, type PanelToolsItem, type PanelToolsRailAccessory, type PanelToolsRailAccessoryActionDetail, type PanelToolsToolId } from './panel-tools-types';
 export declare class PanelTools {
     el: HTMLElement;
     /** When false, only the icon rail is shown. */
@@ -16,6 +16,11 @@ export declare class PanelTools {
      * Set via JS property: `el.items = [...]`. Replace the array reference to update.
      */
     items: PanelToolsItem[];
+    /**
+     * Desktop/tablet-only application-owned rail boundaries and direct intents.
+     * Set via JS property and replace the array reference to update.
+     */
+    accessories: PanelToolsRailAccessory[];
     toolsLabel: string;
     toolShortcutsLabel: string;
     /** Active header state per tool. Replace the object when title, depth, or actions change. */
@@ -40,6 +45,8 @@ export declare class PanelTools {
     }>;
     /** Requests one application-owned action from the active tool header. */
     dsHeaderAction: EventEmitter<PanelToolsHeaderActionDetail>;
+    /** Direct accessory intent. Emitting this event never changes the active tool or drawer. */
+    dsRailAccessoryAction: EventEmitter<PanelToolsRailAccessoryActionDetail>;
     /** Bubbling lifecycle — `ds-bar-nav` defers overflow checks during drawer motion. */
     dsChromeTransitionStart: EventEmitter<ChromeTransitionDetail>;
     dsChromeTransitionEnd: EventEmitter<ChromeTransitionDetail>;
@@ -66,6 +73,8 @@ export declare class PanelTools {
     private railBodyObserver?;
     private get railItems();
     private get orderedRailItems();
+    private get railAccessories();
+    private get orderedRailEntries();
     disconnectedCallback(): void;
     presentationChanged(next: 'drawer' | 'fullscreen', previous?: 'drawer' | 'fullscreen'): void;
     handleFullscreenEscape(event: KeyboardEvent): void;
@@ -82,6 +91,7 @@ export declare class PanelTools {
     private disconnectRailBodyObserver;
     private updateRailBodyScrollable;
     itemsChanged(): void;
+    accessoriesChanged(next?: PanelToolsRailAccessory[], previous?: PanelToolsRailAccessory[]): void;
     private restoreLastActiveTool;
     private persistLastActiveTool;
     private clearPersistedTool;
@@ -112,6 +122,12 @@ export declare class PanelTools {
     private focusRailAt;
     private handleRailKeyDown;
     private renderRailAction;
+    private accessoryPrimaryLabel;
+    private emitAccessoryAction;
+    private renderAccessoryVisual;
+    private renderRailShortcut;
+    private renderRailAccessory;
+    private renderRailEntry;
     render(): any;
 }
 //# sourceMappingURL=PanelTools.d.ts.map

package/dist/types/components/PanelTools/index.d.ts

@@ -1,3 +1,3 @@
-export type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';
+export type { PanelToolsItem, PanelToolsRailAccessory, PanelToolsRailAccessoryAction, PanelToolsRailAccessoryActionDetail, PanelToolsRailAccessorySecondaryAction, PanelToolsRailAccessoryVisual, PanelToolsRailDividerAccessory, PanelToolsRailPlacement, PanelToolsRailShortcutAccessory, PanelToolsRailTransientAccessory, PanelToolsRailTransientTone, PanelToolsToolId, } from './panel-tools-types';
 export { PANEL_TOOLS_FOOTER_TOOL_ID, PANEL_TOOLS_DEFAULT_ITEMS, PANEL_TOOLS_LABELS, PANEL_TOOLS_PRIMARY_TOOL_ID, PANEL_TOOLS_SHORTCUTS, PANEL_TOOLS_TOOL_IDS, } from './panel-tools-types';
 //# sourceMappingURL=index.d.ts.map