@ds-mo/ui 12.4.1 → 12.6.0

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

@@ -1057,6 +1057,7 @@
           ],
           "commonlyComposedWith": [
             "component:ds-shell-page",
+            "component:ds-mobile-header",
             "component:ds-button-filled",
             "component:ds-button-unfilled",
             "component:ds-text",
@@ -1071,7 +1072,7 @@
             "Use submitAction.type=submit inside a form so the final action preserves native submission semantics."
           ],
           "states": [
-            "BarWorkflow always renders compact 48px bold-brand chrome and has no expanded, constrained, or responsive variant.",
+            "BarWorkflow always renders compact 48px bold-brand chrome; responsiveMode changes only the action geometry, never workflow state or hierarchy.",
             "An unrecognized value resolves navigation from the first step without mutating the controlled value.",
             "The first step omits Previous. Intermediate steps show Previous and Next. The last step replaces Next with the Check Save or Submit action.",
             "The default empty steps array is a single-step flow with the plain heading, no Previous control, and the final action visible. An explicit one-step array behaves the same way.",
@@ -1079,7 +1080,8 @@
             "submitAction owns the final label, native button type, inactive state, and loading state."
           ],
           "responsiveBehavior": [
-            "BarWorkflow does not expose a presentation variant and never collapses its navigation actions.",
+            "Desktop and tablet keep the established left-aligned identity and trailing actions.",
+            "Mobile uses symmetric MobileHeader geometry with Exit leading, the title and step count centered, and Previous plus Next or Submit trailing.",
             "The heading truncates before Exit, Previous, and Next or Submit lose their complete hit targets.",
             "When slotted into ShellPage, BarWorkflow remains compact while ShellPage continues to provide sticky placement."
           ],
@@ -1133,6 +1135,10 @@
             "type": "string",
             "required": false
           },
+          "responsiveMode": {
+            "type": "ShellResponsiveMode",
+            "required": false
+          },
           "steps": {
             "type": "BarWorkflowStep[]",
             "required": false
@@ -1174,6 +1180,7 @@
       "registryDependencies": [
         "button-filled",
         "button-unfilled",
+        "mobile-header",
         "text",
         "tooltip"
       ]
@@ -3294,7 +3301,8 @@
             "The default floating action stays at the lower end corner.",
             "actionLayout footer stretches a long action between 8px side and bottom insets.",
             "Both action layouts share the always-active scroll-overlay fade controller, reserve measured end clearance, and begin fading 8px before the visible action.",
-            "ConversationList paints its measured fade on a separate surface-aware layer so contextual row actions retain a real backdrop for blur; hovered, focused, and menu-open rows rise above that decorative fade."
+            "ConversationList paints its measured fade on a separate surface-aware layer so contextual row actions retain a real backdrop for blur; hovered, focused, and menu-open rows rise above that decorative fade.",
+            "The persistent action wrapper splits its md outer shadow from a top inset-highlight overlay so opaque filled actions keep the complete TokoMo elevation; slotted controls must disable optional resting borders."
           ],
           "responsiveBehavior": [
             "The list fills its owner, scrolls independently, and keeps its persistent action above scrolling rows."
@@ -3367,7 +3375,8 @@
             "Any positive unreadCount renders one dot on the title row rather than a visible counter; the accessible row name may still announce the exact unread quantity.",
             "Hover and press use the shared interaction hover and pressed overlays. Only the selected conversation uses the persistent active fill.",
             "The title uses body-medium, not title-small, and the body-small preview truncates after one line. Unread titles use emphasis with primary foreground; read titles use regular weight with secondary foreground.",
-            "The actions slot overlays the row at an 8px right inset without changing title or preview measure, and paints above the row interaction wash while that wash remains active."
+            "The actions slot overlays the row at an 8px right inset without changing title or preview measure, and paints above the row interaction wash while that wash remains active.",
+            "Contextual actions use the shared md control-elevation wrapper so their transparent backdrop blur is unchanged while the split inset highlight remains above the borderless slotted action."
           ],
           "responsiveBehavior": [
             "Long titles and previews truncate without displacing trailing status."
@@ -4899,6 +4908,7 @@
             "Selection and transcript interaction release automatic following.",
             "Opening saved history, message jumps, and prepended history preserve deliberate position.",
             "The scroll-to-latest action is absent at the live edge, appears only after the reader moves away, and disappears again after returning to the newest message.",
+            "Scroll to latest uses the shared md control-elevation wrapper with a pointer-transparent top highlight, preserving its transparent backdrop blur and borderless unfilled action.",
             "Place a composer container with 8px padding on every side in the overlay slot so messages scroll behind it; the shared scroll-overlay controller tracks every composer growth step, reserves matching transcript clearance, begins the fade 8px before the visible composer, and keeps scroll-to-latest above it."
           ],
           "responsiveBehavior": [
@@ -4954,497 +4964,312 @@
       ]
     },
     {
-      "name": "modal",
-      "title": "Modal",
-      "description": "Dismissible native top-layer dialog for a focused confirmation or short blocking task, with a fixed title-and-close header, composable content, and an optional two-action footer.",
+      "name": "mobile-bar-nav",
+      "title": "MobileBarNav",
+      "description": "Persistent mobile shell navigation for Menu, the router-derived current area, Search, Agents, and Inbox.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
         "distribution": "npm",
-        "storybook": "https://zainadeel.github.io/compomo/?path=/story/modal",
-        "source": "src/wc/components/Modal/Modal.tsx",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/mobile-bar-nav",
+        "source": "src/wc/components/MobileBarNav/MobileBarNav.tsx",
         "intentStatus": "complete",
         "intent": {
-          "audience": "general",
-          "status": "stable",
-          "summary": "Dismissible native top-layer dialog for a focused confirmation or short blocking task, with a fixed title-and-close header, composable content, and an optional two-action footer.",
+          "audience": "specialized",
+          "status": "experimental",
+          "summary": "Persistent mobile shell navigation for Menu, the router-derived current area, Search, Agents, and Inbox.",
           "useWhen": [
-            "The user must confirm or cancel one focused decision before returning to the underlying interface.",
-            "A short blocking task or compact form needs dialog semantics, focus containment, and explicit completion actions.",
-            "The content can be safely dismissed through Close, Escape, or the backdrop."
+            "ShellApp is rendering its dedicated below-768px application composition."
           ],
           "avoidWhen": [
-            "The message is non-blocking feedback or a transient status update.",
-            "The interaction is a contextual list of commands anchored to a trigger.",
-            "The workflow is multi-step, long-form, or requires substantial navigation.",
-            "Dismissal would lose work or leave an irreversible operation in an unsafe state.",
-            "A second modal would be opened over an existing modal."
-          ],
-          "alternatives": [
-            {
-              "when": "The user needs non-blocking feedback or a transient status message.",
-              "component": "component:ds-toast",
-              "reason": "Toast communicates transient status without trapping focus or blocking the page."
-            },
-            {
-              "when": "A trigger reveals a short contextual list of commands.",
-              "component": "component:ds-menu",
-              "reason": "Menu provides anchored command semantics without creating a blocking dialog."
-            },
-            {
-              "when": "Editable settings should remain visible without blocking the rest of the interface.",
-              "component": "component:ds-card-setting",
-              "reason": "CardSetting provides a persistent controlled settings workflow without modal focus containment."
-            }
+            "Rendering desktop or tablet shell chrome.",
+            "An arbitrary set of product tabs is required."
           ],
           "commonlyComposedWith": [
-            "component:ds-button-filled",
-            "component:ds-button-unfilled",
-            "component:ds-field",
-            "component:ds-text"
+            "component:ds-shell-app"
+          ],
+          "patterns": [
+            "pattern:application-shell"
           ],
           "accessibility": [
-            "Provide a concise visible heading; the component uses it as the dialog's accessible name.",
-            "Give the primary explanatory copy a stable id and pass it through aria-describedby so assistive technology receives the decision context.",
-            "Opening the native modal dialog moves focus to the header Close action, whose visible tooltip matches its accessible name, traps Tab navigation inside the top layer, and makes outside content inert.",
-            "Close, Escape, and backdrop activation emit dsClose with close-button, escape, or backdrop reason before beginning dismissal; use the component only when every dismissal path is safe.",
-            "After exit motion completes, the native dialog leaves the top layer, focus returns to the previously focused element, and dsAfterClose emits.",
-            "Use visible label-only footer buttons. Keep at most two actions: one bold filled primary action followed by one bordered unfilled action, or two bordered unfilled actions.",
-            "Use negative intent for a filled destructive action and state the irreversible consequence in the content.",
-            "Do not open a modal from another modal; keep one blocking decision in focus at a time."
+            "Every icon-only item keeps a localized accessible name.",
+            "Only the active destination exposes aria-current; Menu exposes its controlled pane through aria-expanded."
           ],
           "states": [
-            "The owner opens the modal through the open property and responds to the typed dsClose detail for application state synchronization or dismissal analytics.",
-            "The component mutates open to false for Close, Escape, and backdrop dismissal while retaining its rendered surface through exit motion.",
-            "The default slot owns task content; the named footer slot is optional and is hidden when no actions are assigned.",
-            "Primary actions use a bold filled button with semantic intent. Secondary and cancel actions use bordered label-only unfilled buttons.",
-            "The owner performs save, delete, cancel, and other product consequences before or while closing the modal."
+            "The fixed groups are Menu plus current area, followed by Search, Inbox, and Agents.",
+            "Selection promotes foreground to primary without painting a selected fill; unselected destinations use tertiary foreground.",
+            "Opening Mobile Sheet Nav replaces the Menu glyph with Cross while preserving its accessible name.",
+            "Reselecting an active destination does not reset its nested state."
           ],
           "responsiveBehavior": [
-            "Choose the smallest sm, md, or lg width that fits the focused task; the top-layer dialog clamps to the viewport with token-based outer space.",
-            "Content scrolls independently when needed while the 64px header and optional 64px footer remain fixed.",
-            "Avoid layouts whose minimum content width exceeds the narrow viewport clamp.",
-            "The native top layer escapes transformed ancestors, clipping containers, and application stacking contexts without moving slotted content."
+            "Render only below the mobile breakpoint and preserve safe-area clearance.",
+            "The two icon-only control groups remain centered with fixed 40px targets and a divider between Menu and current area."
           ],
-          "frameworkCaveats": {
-            "customElements": [
-              "Set open as a JavaScript property when controlling the modal; inspect dsClose.detail.reason and use dsAfterClose for cleanup that must wait for exit motion and focus restoration.",
-              "Connect the most relevant slotted explanatory text through aria-describedby.",
-              "Footer actions are slotted application-owned controls and must implement their own product consequence."
-            ],
-            "react": [
-              "Pass open to DsModal, inspect onDsClose event detail, and use onDsAfterClose only for cleanup after exit motion and focus restoration.",
-              "Connect the most relevant slotted explanatory text through aria-describedby.",
-              "Assign footer controls with slot=\"footer\" and handle each action before updating open."
-            ],
-            "angular": [
-              "Bind [open], inspect $event.detail from (dsClose), and use (dsAfterClose) only for cleanup after exit motion and focus restoration.",
-              "Connect the most relevant slotted explanatory text through aria-describedby.",
-              "Assign footer controls with slot=\"footer\" and handle each action before updating open."
-            ]
-          },
           "references": [
             {
-              "label": "Storybook confirmation and footer examples",
-              "path": "src/wc/components/Modal/Modal.stories.ts"
-            },
-            {
-              "label": "Cross-browser focus, dismissal, geometry, and accessibility coverage",
-              "path": "tests/e2e/accessibility-overlays.spec.ts"
-            },
-            {
-              "label": "Reduced-motion overlay coverage",
-              "path": "tests/e2e/reduced-motion.spec.ts"
+              "label": "Storybook",
+              "path": "src/wc/components/MobileBarNav/MobileBarNav.stories.ts"
             }
           ]
         },
         "props": {
-          "ariaDescribedby": {
-            "type": "string | undefined",
+          "activeDestination": {
+            "type": "MobileDestination",
             "required": false
           },
-          "closeAriaLabel": {
+          "agentsDot": {
+            "type": "boolean",
+            "required": false
+          },
+          "agentsLabel": {
             "type": "string",
             "required": false
           },
-          "heading": {
+          "currentArea": {
+            "type": "PanelNavItem",
+            "required": false
+          },
+          "helpLabel": {
             "type": "string",
-            "required": true
+            "required": false
           },
-          "modalWidth": {
-            "type": "ModalWidth | string",
+          "inboxDot": {
+            "type": "boolean",
             "required": false
           },
-          "open": {
+          "inboxLabel": {
+            "type": "string",
+            "required": false
+          },
+          "menuLabel": {
+            "type": "string",
+            "required": false
+          },
+          "searchDot": {
+            "type": "boolean",
+            "required": false
+          },
+          "searchLabel": {
+            "type": "string",
+            "required": false
+          },
+          "sheetNavExpanded": {
             "type": "boolean",
             "required": false
           }
         },
         "events": [
           {
-            "name": "dsAfterClose",
-            "detail": "void"
+            "name": "dsDestinationChange",
+            "detail": "MobileBarNavDestinationDetail"
           },
           {
-            "name": "dsClose",
-            "detail": "ModalCloseDetail"
+            "name": "dsSheetNavToggle",
+            "detail": "boolean"
           }
         ],
         "slots": [],
         "exports": {
-          "customElement": "ds-modal",
-          "react": "DsModal",
-          "angular": "DsModal"
+          "customElement": "ds-mobile-bar-nav",
+          "react": "DsMobileBarNav",
+          "angular": "DsMobileBarNav"
         }
       },
       "dependencies": [
         "@ds-mo/ui",
-        "@ds-mo/tokens"
+        "@ds-mo/tokens",
+        "@ds-mo/icons"
       ],
       "registryDependencies": [
-        "button-unfilled",
-        "text",
-        "tooltip"
+        "badge",
+        "icon"
       ]
     },
     {
-      "name": "panel-nav",
-      "title": "PanelNav",
-      "description": "The single persistent primary navigation for an application, providing grouped top-level destinations, active-route state, standard dashboard/settings switching, user access, and collapsible desktop and tablet presentation.",
+      "name": "mobile-header",
+      "title": "MobileHeader",
+      "description": "Consistent mobile top chrome with symmetric action lanes, a centered page identity or peer-section chooser, and an optional subordinate page-section row.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
         "distribution": "npm",
-        "storybook": "https://zainadeel.github.io/compomo/?path=/story/panel-nav",
-        "source": "src/wc/components/PanelNav/PanelNav.tsx",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/mobile-header",
+        "source": "src/wc/components/MobileHeader/MobileHeader.tsx",
         "intentStatus": "complete",
         "intent": {
           "audience": "specialized",
-          "status": "stable",
-          "summary": "The single persistent primary navigation for an application, providing grouped top-level destinations, active-route state, standard dashboard/settings switching, user access, and collapsible desktop and tablet presentation.",
+          "status": "experimental",
+          "summary": "Consistent mobile top chrome with symmetric action lanes, a centered page identity or peer-section chooser, and an optional subordinate page-section row.",
           "useWhen": [
-            "Building the one primary navigation surface for an application that uses the CompoMo system.",
-            "Top-level destinations must remain consistently available while the application's page content changes.",
-            "Primary destinations need visual grouping, icons, notification indicators, active-route state, and expanded or collapsed presentation."
+            "A routed page, persistent tool, account surface, or workflow needs the canonical mobile header presentation."
           ],
           "avoidWhen": [
-            "A second navigation surface is needed within the same application; an application must have only one PanelNav.",
-            "The choices represent sections within the active primary destination; use BarNav instead.",
-            "The choices switch local content without changing the application's primary destination; use TabGroup instead.",
-            "The interaction performs a command or presents temporary contextual choices; use a button or Menu instead.",
-            "Building navigation below the mobile breakpoint; use the application's dedicated mobile navigation component instead."
-          ],
-          "alternatives": [
-            {
-              "when": "The choices represent route sections within the active primary destination.",
-              "component": "component:ds-bar-nav",
-              "reason": "BarNav owns secondary section navigation within the destination selected by PanelNav."
-            },
-            {
-              "when": "The choices switch local content without changing the application's primary destination.",
-              "component": "component:ds-tab-group",
-              "reason": "TabGroup owns local view selection and tab semantics."
-            },
-            {
-              "when": "The choices are commands or temporary contextual actions.",
-              "component": "component:ds-menu",
-              "reason": "Menu owns transient action and option collections rather than persistent destinations."
-            }
+            "Rendering desktop BarTitle, BarNav, or PanelToolHeader.",
+            "Rendering the Mobile Sheet Nav utility lane."
           ],
           "commonlyComposedWith": [
-            "component:ds-shell-app",
-            "component:ds-bar-nav",
-            "component:ds-panel-tools",
-            "component:ds-menu"
+            "component:ds-mobile-section-switcher",
+            "component:ds-shell-page",
+            "component:ds-shell-tools"
           ],
           "patterns": [
             "pattern:application-shell"
           ],
           "accessibility": [
-            "Give every primary destination a concise visible label and an icon that supports rather than replaces that label.",
-            "Provide localized dashboard, settings, account, navigation, collapse, and expand labels.",
-            "Preserve accessible destination names when the panel is collapsed to icon-only presentation.",
-            "Use notification dots as supplemental status and never as the only indication of important information.",
-            "When the destination body overflows, it becomes a localized keyboard-focusable scroll region in addition to the roving destination controls.",
-            "Keep the standard dashboard/settings switch and user/account entry available in the footer."
+            "Static screens render a real h1 or h2 according to headingLevel.",
+            "Section-switching screens expose an equivalent semantic heading alongside the accessible popup trigger.",
+            "Subsections use a separately named navigation landmark and never replace the semantic page identity.",
+            "Leading and trailing slotted icon actions retain their own accessible names and tooltips."
           ],
           "states": [
-            "Render exactly one PanelNav per application; it owns primary application destinations and no other navigation role.",
-            "The host router owns the current route; prefer currentUrl for active destination matching and use activeId only when route matching is unavailable.",
-            "Use anchor mode for native links or routers that intercept anchors; use event mode when the host performs navigation from dsNavSelect.",
-            "Groups visually organize top-level destinations only and must not be interpreted as nested or expandable navigation.",
-            "Dashboard presents day-to-day operational destinations; Settings presents administrative and configuration destinations.",
-            "The standard footer switches the entire destination collection and navStyle between Dashboard and Settings and exposes the user/account entry.",
-            "The host owns the external user menu opened from dsNavUserAction.",
-            "Item and header controls inherit the shared md control radius while local shell geometry continues to own collapsed layout and footer animation positioning.",
-            "On desktop, allow user-controlled expand and collapse and persist the preference with storageKey when cross-session persistence is appropriate."
+            "Without multiple sections the center renders heading.",
+            "With multiple sections the center renders the controlled MobileSectionSwitcher.",
+            "Optional subsections render in a second row and emit dsSubsectionChange without changing the primary section.",
+            "Sections represent peer destinations at the current navigation level; subsections represent local views beneath the selected page or detail identity.",
+            "Brand tone changes surface and foreground without changing geometry or interaction ownership."
           ],
           "responsiveBehavior": [
-            "At 1200px and wider, default to expanded, allow the user to expand or collapse, and restore the locally persisted desktop preference when available.",
-            "From 768px through 1199px, present PanelNav permanently collapsed and do not allow user expansion.",
-            "Below 768px, the consuming application replaces PanelNav with a dedicated mobile navigation component; PanelNav does not own mobile navigation.",
-            "ShellApp permanently owns responsive composition: it determines shell mode, enforces tablet collapse, and replaces PanelNav with future mobile navigation below 768px.",
-            "When the viewport is below breakpoint, PanelNav locks collapsed, disables its header toggle affordance, and preserves the persisted desktop collapse preference.",
-            "Collapsed presentation must preserve destination ordering, active state, notification status, and accessible names."
+            "The primary 48px lane is dedicated to the below-768px presentation; optional subsections add one subordinate 48px lane.",
+            "Equal flexible side lanes keep the center mathematically aligned when actions are asymmetric."
           ],
-          "frameworkCaveats": {
-            "customElements": [
-              "Assign groups as a JavaScript property for structured data; a JSON string attribute is also supported.",
-              "Set nav-style before the element connects when first-paint style must match the current route."
-            ],
-            "react": [
-              "Pass groups as an array through the generated React wrapper and synchronize currentUrl with the host router.",
-              "ShellApp owns mobile replacement; PanelNav enforces its configured breakpoint expansion lock."
-            ],
-            "angular": [
-              "Import DsPanelNav from @ds-mo/ui/angular/ds-panel-nav and bind groups as a property.",
-              "Bind both the nav-style attribute and navStyle property when first-paint route styling must be deterministic.",
-              "ShellApp owns mobile replacement; PanelNav enforces its configured breakpoint expansion lock."
-            ]
-          },
           "references": [
             {
-              "label": "Executable Storybook examples",
-              "path": "src/wc/components/PanelNav/PanelNav.stories.ts"
-            },
-            {
-              "label": "Framework and routing integration",
-              "path": "docs/framework-integration.md"
-            },
-            {
-              "label": "Application shell composition",
-              "path": "agent/patterns/application-shell/pattern.agent.json"
+              "label": "Storybook",
+              "path": "src/wc/components/MobileHeader/MobileHeader.stories.ts"
             }
           ]
         },
         "props": {
-          "accountLabel": {
+          "heading": {
             "type": "string",
             "required": false
           },
-          "accountMenuExpanded": {
-            "type": "boolean",
+          "headingLevel": {
+            "type": "MobileHeaderHeadingLevel",
             "required": false
           },
-          "activeId": {
-            "type": "string",
+          "sections": {
+            "type": "TabItem[]",
             "required": false
           },
-          "breakpoint": {
-            "type": "number",
+          "sectionsAriaLabel": {
+            "type": "string",
             "required": false
           },
-          "collapseNavigationLabel": {
+          "sectionsJson": {
             "type": "string",
             "required": false
           },
-          "collapsed": {
-            "type": "boolean",
+          "subsections": {
+            "type": "TabItem[]",
             "required": false
           },
-          "currentUrl": {
+          "subsectionsAriaLabel": {
             "type": "string",
             "required": false
           },
-          "dashboardLabel": {
+          "subsectionsJson": {
             "type": "string",
             "required": false
           },
-          "dashboardNavigationLabel": {
+          "subvalue": {
             "type": "string",
             "required": false
           },
-          "disableViewTransition": {
-            "type": "boolean",
-            "required": false
-          },
-          "expandNavigationLabel": {
-            "type": "string",
-            "required": false
-          },
-          "groups": {
-            "type": "string | PanelNavGroup[]",
-            "required": false
-          },
-          "navStyle": {
-            "type": "NavChromeStyle",
-            "required": false
-          },
-          "navigationItemsLabel": {
-            "type": "string",
-            "required": false
-          },
-          "routerMode": {
-            "type": "PanelNavRouterMode",
-            "required": false
-          },
-          "settingsLabel": {
-            "type": "string",
-            "required": false
-          },
-          "settingsNavigationLabel": {
-            "type": "string",
-            "required": false
-          },
-          "storageKey": {
-            "type": "string",
-            "required": false
-          },
-          "userInitial": {
-            "type": "string",
+          "tone": {
+            "type": "MobileHeaderTone",
             "required": false
           },
-          "userName": {
+          "value": {
             "type": "string",
             "required": false
           }
         },
         "events": [
           {
-            "name": "dsChromeTransitionEnd",
-            "detail": "ChromeTransitionDetail"
-          },
-          {
-            "name": "dsChromeTransitionStart",
-            "detail": "ChromeTransitionDetail"
-          },
-          {
-            "name": "dsNavFooterAction",
-            "detail": "void"
-          },
-          {
-            "name": "dsNavSelect",
+            "name": "dsSectionChange",
             "detail": "string"
           },
           {
-            "name": "dsNavToggle",
-            "detail": "boolean"
-          },
-          {
-            "name": "dsNavUserAction",
-            "detail": "PanelNavUserActionDetail"
+            "name": "dsSubsectionChange",
+            "detail": "string"
           }
         ],
         "slots": [],
         "exports": {
-          "customElement": "ds-panel-nav",
-          "react": "DsPanelNav",
-          "angular": "DsPanelNav"
+          "customElement": "ds-mobile-header",
+          "react": "DsMobileHeader",
+          "angular": "DsMobileHeader"
         }
       },
       "dependencies": [
         "@ds-mo/ui",
-        "@ds-mo/tokens",
-        "@ds-mo/icons"
+        "@ds-mo/tokens"
       ],
       "registryDependencies": [
-        "badge",
-        "button-unfilled",
-        "icon",
-        "text",
-        "tooltip"
+        "mobile-section-switcher",
+        "text"
       ]
     },
     {
-      "name": "panel-sub-nav",
-      "title": "PanelSubNav",
-      "description": "Persistent vertical tab navigation for a panel or card side rail, switching adjacent local content with menu-like selected fill and stable text weight.",
+      "name": "mobile-section-switcher",
+      "title": "MobileSectionSwitcher",
+      "description": "Controlled mobile section chooser showing the current section, adjacent-position hints, and a complete tap menu.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
         "distribution": "npm",
-        "storybook": "https://zainadeel.github.io/compomo/?path=/story/panel-sub-nav",
-        "source": "src/wc/components/PanelSubNav/PanelSubNav.tsx",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/mobile-section-switcher",
+        "source": "src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.tsx",
         "intentStatus": "complete",
         "intent": {
-          "audience": "general",
-          "status": "stable",
-          "summary": "Persistent vertical tab navigation for a panel or card side rail, switching adjacent local content with menu-like selected fill and stable text weight.",
+          "audience": "specialized",
+          "status": "experimental",
+          "summary": "Controlled mobile section chooser showing the current section, adjacent-position hints, and a complete tap menu.",
           "useWhen": [
-            "A panel or card side rail needs a persistent vertical list that switches adjacent local content.",
-            "Each concise text label controls an immediately available tabpanel without changing application routes."
+            "A mobile page or tool header must combine current-page identity with ordered peer-section navigation."
           ],
           "avoidWhen": [
-            "The navigation is not contained in a panel or card side rail.",
-            "Local views should be arranged horizontally; use TabGroup instead.",
-            "The choices navigate routes in application shell chrome; use PanelNav or BarNav instead.",
-            "The choices are temporary commands or contextual options; use Menu instead.",
-            "Rows need icons, subtext, notification dots, nested levels, or section headers."
-          ],
-          "alternatives": [
-            {
-              "when": "Local panel choices fit a horizontal tab row.",
-              "component": "component:ds-tab-group",
-              "reason": "TabGroup is the horizontal local-view counterpart."
-            },
-            {
-              "when": "The choices are primary application destinations.",
-              "component": "component:ds-panel-nav",
-              "reason": "PanelNav owns primary application navigation."
-            },
-            {
-              "when": "The choices are secondary application routes.",
-              "component": "component:ds-bar-nav",
-              "reason": "BarNav owns route sections inside ShellApp."
-            },
-            {
-              "when": "The choices are transient actions or options.",
-              "component": "component:ds-menu",
-              "reason": "Menu owns temporary popup collections."
-            }
+            "Rendering desktop BarNav.",
+            "The destination collection is primary application navigation."
           ],
           "commonlyComposedWith": [
-            "component:ds-card-setting",
-            "component:ds-text"
+            "component:ds-mobile-header"
+          ],
+          "patterns": [
+            "pattern:application-shell"
           ],
           "accessibility": [
-            "Provide an accessible name with aria-label or aria-labelledby.",
-            "Give every item a unique id and the id of its controlled tabpanel.",
-            "Keep each controlled tabpanel labelled by its matching item id.",
-            "Always provide a valid selected item when enabled items exist so exactly one tab and panel are active.",
-            "ArrowUp and ArrowDown move and activate selection; Home and End select the first and last available items.",
-            "Do not use selected text weight as the selection cue; active fill and primary foreground communicate selection."
+            "The trigger exposes the current section, popup relationship, and expanded state.",
+            "Decorative previous and next position hints are hidden from assistive technology.",
+            "The menu is always available so a future swipe gesture is never the only navigation mechanism."
           ],
           "states": [
-            "The parent owns the canonical selected value and panel visibility, and should update both from dsChange.",
-            "A missing, empty, or unknown selected value is invalid when enabled items exist; the component does not choose a fallback selection.",
-            "Inactive items remain visible but cannot be focused or selected.",
-            "Selection is singular and follows keyboard focus.",
-            "The omitted default surface treatment is for primary and secondary parent surfaces and uses the brand-active selected fill; pass faint explicitly on faint surfaces to use the neutral active fill.",
-            "Rows contain one text label only and do not express nested navigation or grouped hierarchy."
+            "Selection is controlled and dsChange reports intent without mutating value.",
+            "Dividers group menu items but never participate in previous or next resolution.",
+            "The first and last selectable sections expose only the available neighboring direction."
           ],
           "responsiveBehavior": [
-            "The component remains vertical at every width.",
-            "The consuming panel owns responsive adaptation and decides whether to reposition or replace the side rail."
+            "Use only in the dedicated mobile header presentation."
           ],
-          "frameworkCaveats": {
-            "customElements": [
-              "Assign items as a JavaScript property because structured arrays are not represented by HTML attributes.",
-              "Keep value synchronized to a valid enabled item and update the controlled panel from dsChange."
-            ],
-            "react": [
-              "Pass items as an array through the generated wrapper, keep value controlled, and use onDsChange to synchronize the visible panel."
-            ],
-            "angular": [
-              "Bind items and a valid value as properties, and handle dsChange to synchronize the visible panel."
-            ]
-          }
+          "references": [
+            {
+              "label": "Storybook",
+              "path": "src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.stories.ts"
+            }
+          ]
         },
         "props": {
-          "ariaLabel": {
-            "type": "string | null",
-            "required": false
-          },
-          "ariaLabelledby": {
-            "type": "string | undefined",
+          "navigationLabel": {
+            "type": "string",
             "required": false
           },
-          "background": {
-            "type": "PanelSubNavBackground | undefined",
+          "sections": {
+            "type": "TabItem[]",
             "required": false
           },
-          "items": {
-            "type": "PanelSubNavItem[]",
+          "sectionsJson": {
+            "type": "string",
             "required": false
           },
           "value": {
@@ -5460,9 +5285,9 @@
         ],
         "slots": [],
         "exports": {
-          "customElement": "ds-panel-sub-nav",
-          "react": "DsPanelSubNav",
-          "angular": "DsPanelSubNav"
+          "customElement": "ds-mobile-section-switcher",
+          "react": "DsMobileSectionSwitcher",
+          "angular": "DsMobileSectionSwitcher"
         }
       },
       "dependencies": [
@@ -5470,388 +5295,391 @@
         "@ds-mo/tokens"
       ],
       "registryDependencies": [
+        "menu",
         "text"
       ]
     },
     {
-      "name": "panel-tool-header",
-      "title": "PanelToolHeader",
-      "description": "Canonical left-aligned PanelTools header with an optional leading navigation or dismiss action and application-owned trailing icon actions.",
+      "name": "mobile-sheet-nav",
+      "title": "MobileSheetNav",
+      "description": "Full-height mobile navigation sheet with a single brand, context, and utility header above large primary destinations.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
         "distribution": "npm",
-        "storybook": "https://zainadeel.github.io/compomo/?path=/story/panel-tool-header",
-        "source": "src/wc/components/PanelToolHeader/PanelToolHeader.tsx",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/mobile-sheet-nav",
+        "source": "src/wc/components/MobileSheetNav/MobileSheetNav.tsx",
         "intentStatus": "complete",
         "intent": {
-          "audience": "general",
+          "audience": "specialized",
           "status": "experimental",
-          "summary": "Canonical left-aligned PanelTools header with an optional leading navigation or dismiss action and application-owned trailing icon actions.",
+          "summary": "Full-height mobile navigation sheet with a single brand, context, and utility header above large primary destinations.",
           "useWhen": [
-            "PanelTools needs its one shared root or detail header.",
-            "A tool header needs a title with optional Back or Close navigation, menu, fullscreen, or other compact icon actions."
+            "The mobile ShellApp Menu control needs to expose the complete primary navigation collection."
           ],
           "avoidWhen": [
-            "Rendering inside a PanelTools tool body; PanelTools already composes this canonical header above the body.",
-            "The header belongs to page content."
+            "Rendering desktop PanelNav.",
+            "Switching local page content."
           ],
           "commonlyComposedWith": [
-            "component:ds-button-unfilled"
+            "component:ds-shell-app",
+            "component:ds-mobile-bar-nav"
+          ],
+          "patterns": [
+            "pattern:application-shell"
           ],
           "accessibility": [
-            "Leading navigation or dismiss actions and trailing icon actions require concise localized names; the header reuses each name as the action tooltip.",
-            "The visible heading names the active panel or subview."
+            "The sheet is a named navigation landmark and retains visible labels for every primary destination.",
+            "Dashboard and Settings use icon-only tabs with localized accessible names; Help and Account use icon-only actions with matching tooltips.",
+            "Escape requests dismissal and opening moves focus to the selected or first available area."
           ],
           "states": [
-            "The title remains left aligned whether the header has no actions, Back, one trailing action, or several trailing actions.",
-            "Leading and trailing control zones never shrink; only the title consumes and truncates within the remaining width, with a fixed 4px gap between zones.",
-            "Header chrome text is not selectable; actions remain keyboard focusable and interactive.",
-            "Adjacent trailing actions keep the shared 4px control gap in drawer and fullscreen presentations.",
-            "When fullscreen and overflow actions appear together, author fullscreen before overflow so Ellipses remains the rightmost action.",
-            "PanelTools supplies application-owned actions and relays their ids through its shared dsHeaderAction event."
+            "Dashboard and Settings change only the flat destination collection being browsed.",
+            "Area, Help, and Account events express intent while the application owns navigation and product behavior."
           ],
           "responsiveBehavior": [
-            "The title truncates between optional leading navigation and trailing action zones."
+            "The pane fills the mobile content stage while the bottom bar remains available."
           ],
           "references": [
             {
-              "label": "Standalone examples",
-              "path": "src/wc/components/PanelToolHeader/PanelToolHeader.stories.ts"
+              "label": "Storybook",
+              "path": "src/wc/components/MobileSheetNav/MobileSheetNav.stories.ts"
             }
           ]
         },
         "props": {
-          "actions": {
-            "type": "PanelToolsHeaderAction[]",
-            "required": false
-          },
-          "backAriaLabel": {
+          "accountLabel": {
             "type": "string",
             "required": false
           },
-          "backIcon": {
-            "type": "string",
+          "browseContext": {
+            "type": "NavChromeStyle",
             "required": false
           },
-          "heading": {
+          "currentUrl": {
             "type": "string",
             "required": false
           },
-          "menuAriaLabel": {
-            "type": "string",
+          "dashboardGroups": {
+            "type": "PanelNavGroup[]",
             "required": false
           },
-          "menuControls": {
-            "type": "string | undefined",
+          "dashboardLabel": {
+            "type": "string",
             "required": false
           },
-          "menuExpanded": {
-            "type": "boolean",
+          "helpLabel": {
+            "type": "string",
             "required": false
           },
-          "menuTriggerId": {
+          "navigationLabel": {
             "type": "string",
             "required": false
           },
-          "showBack": {
+          "open": {
             "type": "boolean",
             "required": false
           },
-          "showMenu": {
-            "type": "boolean",
+          "settingsGroups": {
+            "type": "PanelNavGroup[]",
+            "required": false
+          },
+          "settingsLabel": {
+            "type": "string",
             "required": false
           }
         },
         "events": [
           {
-            "name": "dsAction",
-            "detail": "{ id: string; originalEvent: MouseEvent }"
+            "name": "dsAreaSelect",
+            "detail": "string"
           },
           {
-            "name": "dsBack",
-            "detail": "MouseEvent"
+            "name": "dsBrowseContextChange",
+            "detail": "NavChromeStyle"
           },
           {
-            "name": "dsMenuToggle",
-            "detail": "MouseEvent"
+            "name": "dsClose",
+            "detail": "void"
           }
         ],
         "slots": [],
         "exports": {
-          "customElement": "ds-panel-tool-header",
-          "react": "DsPanelToolHeader",
-          "angular": "DsPanelToolHeader"
+          "customElement": "ds-mobile-sheet-nav",
+          "react": "DsMobileSheetNav",
+          "angular": "DsMobileSheetNav"
         }
       },
       "dependencies": [
         "@ds-mo/ui",
-        "@ds-mo/tokens"
+        "@ds-mo/tokens",
+        "@ds-mo/icons"
       ],
       "registryDependencies": [
+        "badge",
         "button-unfilled",
+        "icon",
+        "tab-group",
         "text",
         "tooltip"
       ]
     },
     {
-      "name": "panel-tool-search",
-      "title": "PanelToolSearch",
-      "description": "Transparent search row for the top of a PanelTools product view, with a fixed 48px allocation around the standard md search control and an optional filter-menu trigger.",
+      "name": "modal",
+      "title": "Modal",
+      "description": "Dismissible native top-layer dialog for a focused confirmation or short blocking task, with a fixed title-and-close header, composable content, and an optional two-action footer.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
         "distribution": "npm",
-        "storybook": "https://zainadeel.github.io/compomo/?path=/story/panel-tool-search",
-        "source": "src/wc/components/PanelToolSearch/PanelToolSearch.tsx",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/modal",
+        "source": "src/wc/components/Modal/Modal.tsx",
         "intentStatus": "complete",
         "intent": {
           "audience": "general",
-          "status": "experimental",
-          "summary": "Transparent search row for the top of a PanelTools product view, with a fixed 48px allocation around the standard md search control and an optional filter-menu trigger.",
+          "status": "stable",
+          "summary": "Dismissible native top-layer dialog for a focused confirmation or short blocking task, with a fixed title-and-close header, composable content, and an optional two-action footer.",
           "useWhen": [
-            "A PanelTools base view filters or searches the tool's own content.",
-            "Several tool products need the same search-row geometry directly below the shared PanelTools header.",
-            "The product needs a compact filter menu next to search while keeping its filter choices and matching policy application-owned."
+            "The user must confirm or cancel one focused decision before returning to the underlying interface.",
+            "A short blocking task or compact form needs dialog semantics, focus containment, and explicit completion actions.",
+            "The content can be safely dismissed through Close, Escape, or the backdrop."
           ],
           "avoidWhen": [
-            "The search belongs inside a Select or SelectMulti popup; use that component's searchable behavior.",
-            "A form needs a labelled standalone field; compose ds-input inside ds-field instead."
+            "The message is non-blocking feedback or a transient status update.",
+            "The interaction is a contextual list of commands anchored to a trigger.",
+            "The workflow is multi-step, long-form, or requires substantial navigation.",
+            "Dismissal would lose work or leave an irreversible operation in an unsafe state.",
+            "A second modal would be opened over an existing modal."
+          ],
+          "alternatives": [
+            {
+              "when": "The user needs non-blocking feedback or a transient status message.",
+              "component": "component:ds-toast",
+              "reason": "Toast communicates transient status without trapping focus or blocking the page."
+            },
+            {
+              "when": "A trigger reveals a short contextual list of commands.",
+              "component": "component:ds-menu",
+              "reason": "Menu provides anchored command semantics without creating a blocking dialog."
+            },
+            {
+              "when": "Editable settings should remain visible without blocking the rest of the interface.",
+              "component": "component:ds-card-setting",
+              "reason": "CardSetting provides a persistent controlled settings workflow without modal focus containment."
+            }
           ],
           "commonlyComposedWith": [
-            "component:ds-panel-tools",
-            "component:ds-conversation-list",
-            "component:ds-input"
+            "component:ds-button-filled",
+            "component:ds-button-unfilled",
+            "component:ds-field",
+            "component:ds-text"
           ],
           "accessibility": [
-            "Provide an aria-label that names the searched domain, such as Search agent chats or Search messages.",
-            "The standard search clear action restores focus, uses the concise localized clearLabel by itself for both its tooltip and accessible name, and emits both the empty query and dsClear.",
-            "When showFilter is enabled, provide stable filterTriggerId and filterControls values, synchronize filterExpanded with the controlled menu, and restore focus after selection; filterAriaLabel also labels its tooltip."
+            "Provide a concise visible heading; the component uses it as the dialog's accessible name.",
+            "Give the primary explanatory copy a stable id and pass it through aria-describedby so assistive technology receives the decision context.",
+            "Opening the native modal dialog moves focus to the header Close action, whose visible tooltip matches its accessible name, traps Tab navigation inside the top layer, and makes outside content inert.",
+            "Close, Escape, and backdrop activation emit dsClose with close-button, escape, or backdrop reason before beginning dismissal; use the component only when every dismissal path is safe.",
+            "After exit motion completes, the native dialog leaves the top layer, focus returns to the previously focused element, and dsAfterClose emits.",
+            "Use visible label-only footer buttons. Keep at most two actions: one bold filled primary action followed by one bordered unfilled action, or two bordered unfilled actions.",
+            "Use negative intent for a filled destructive action and state the irreversible consequence in the content.",
+            "Do not open a modal from another modal; keep one blocking decision in focus at a time."
           ],
           "states": [
-            "The row is always 48px high with 8px outer padding and a complete md search recipe: 32px control, text-body-medium at 14px/20px, and a 20px md search icon.",
-            "The search icon stays foreground-secondary at rest, hover, focus, active, and while the query is filled.",
-            "The row and control surface remain transparent so the ShellApp chrome wash is visible behind them.",
-            "The row divider remains the same tertiary 1px boundary while the input is focused because it belongs to the 48px container rather than the input control.",
-            "With filtering enabled, the md search control, decorative vertical divider, and borderless md Filter action are separated by 8px; filterActive promotes only the trigger foreground without adding a selected fill."
+            "The owner opens the modal through the open property and responds to the typed dsClose detail for application state synchronization or dismissal analytics.",
+            "The component mutates open to false for Close, Escape, and backdrop dismissal while retaining its rendered surface through exit motion.",
+            "The default slot owns task content; the named footer slot is optional and is hidden when no actions are assigned.",
+            "Primary actions use a bold filled button with semantic intent. Secondary and cancel actions use bordered label-only unfilled buttons.",
+            "The owner performs save, delete, cancel, and other product consequences before or while closing the modal."
           ],
           "responsiveBehavior": [
-            "The row fills the available drawer or fullscreen width, allows its search region to shrink inside a 300px drawer without pushing the filter trigger under the tool rail, and does not reduce its control below md density."
+            "Choose the smallest sm, md, or lg width that fits the focused task; the top-layer dialog clamps to the viewport with token-based outer space.",
+            "Content scrolls independently when needed while the 64px header and optional 64px footer remain fixed.",
+            "Avoid layouts whose minimum content width exceeds the narrow viewport clamp.",
+            "The native top layer escapes transformed ancestors, clipping containers, and application stacking contexts without moving slotted content."
           ],
           "frameworkCaveats": {
             "customElements": [
-              "Listen for dsChange to receive the current string query and dsClear when the clear action is used.",
-              "Listen for dsFilterToggle and pair the trigger with an externally controlled ds-menu; product-specific filter labels and filtering remain outside this component."
+              "Set open as a JavaScript property when controlling the modal; inspect dsClose.detail.reason and use dsAfterClose for cleanup that must wait for exit motion and focus restoration.",
+              "Connect the most relevant slotted explanatory text through aria-describedby.",
+              "Footer actions are slotted application-owned controls and must implement their own product consequence."
             ],
             "react": [
-              "Use DsPanelToolSearch, bind value for controlled state, and handle onDsChange.",
-              "Bind the optional filter trigger state and connect onDsFilterToggle to a controlled DsMenu."
+              "Pass open to DsModal, inspect onDsClose event detail, and use onDsAfterClose only for cleanup after exit motion and focus restoration.",
+              "Connect the most relevant slotted explanatory text through aria-describedby.",
+              "Assign footer controls with slot=\"footer\" and handle each action before updating open."
             ],
             "angular": [
-              "Import DsPanelToolSearch and bind value as a property; this search composition is not a form value accessor.",
-              "Bind showFilter, filterExpanded, and filterActive, then connect dsFilterToggle to a product-owned ds-menu."
+              "Bind [open], inspect $event.detail from (dsClose), and use (dsAfterClose) only for cleanup after exit motion and focus restoration.",
+              "Connect the most relevant slotted explanatory text through aria-describedby.",
+              "Assign footer controls with slot=\"footer\" and handle each action before updating open."
             ]
           },
           "references": [
             {
-              "label": "Storybook examples",
-              "path": "src/wc/components/PanelToolSearch/PanelToolSearch.stories.ts"
+              "label": "Storybook confirmation and footer examples",
+              "path": "src/wc/components/Modal/Modal.stories.ts"
+            },
+            {
+              "label": "Cross-browser focus, dismissal, geometry, and accessibility coverage",
+              "path": "tests/e2e/accessibility-overlays.spec.ts"
+            },
+            {
+              "label": "Reduced-motion overlay coverage",
+              "path": "tests/e2e/reduced-motion.spec.ts"
             }
           ]
         },
         "props": {
-          "ariaLabel": {
-            "type": "string",
-            "required": false
-          },
-          "controls": {
+          "ariaDescribedby": {
             "type": "string | undefined",
             "required": false
           },
-          "filterActive": {
-            "type": "boolean",
-            "required": false
-          },
-          "filterAriaLabel": {
+          "closeAriaLabel": {
             "type": "string",
             "required": false
           },
-          "filterControls": {
-            "type": "string | undefined",
-            "required": false
-          },
-          "filterExpanded": {
-            "type": "boolean",
-            "required": false
-          },
-          "filterTriggerId": {
+          "heading": {
             "type": "string",
-            "required": false
-          },
-          "isInactive": {
-            "type": "boolean",
-            "required": false
+            "required": true
           },
-          "placeholder": {
-            "type": "string",
+          "modalWidth": {
+            "type": "ModalWidth | string",
             "required": false
           },
-          "showFilter": {
+          "open": {
             "type": "boolean",
             "required": false
-          },
-          "value": {
-            "type": "string",
-            "required": false
           }
         },
         "events": [
           {
-            "name": "dsChange",
-            "detail": "string"
-          },
-          {
-            "name": "dsClear",
+            "name": "dsAfterClose",
             "detail": "void"
           },
           {
-            "name": "dsFilterToggle",
-            "detail": "MouseEvent"
+            "name": "dsClose",
+            "detail": "ModalCloseDetail"
           }
         ],
         "slots": [],
         "exports": {
-          "customElement": "ds-panel-tool-search",
-          "react": "DsPanelToolSearch",
-          "angular": "DsPanelToolSearch"
+          "customElement": "ds-modal",
+          "react": "DsModal",
+          "angular": "DsModal"
         }
       },
       "dependencies": [
         "@ds-mo/ui",
-        "@ds-mo/tokens",
-        "@ds-mo/icons"
+        "@ds-mo/tokens"
       ],
       "registryDependencies": [
         "button-unfilled",
-        "divider",
-        "icon",
         "text",
         "tooltip"
       ]
     },
     {
-      "name": "panel-tools",
-      "title": "PanelTools",
-      "description": "Required ShellApp utility rail and persistent drawer host for the fixed set of global Search, Agents, Messages, Stacks, Activity, and Help products.",
+      "name": "panel-nav",
+      "title": "PanelNav",
+      "description": "The single persistent primary navigation for an application, providing grouped top-level destinations, active-route state, standard dashboard/settings switching, user access, and collapsible desktop and tablet presentation.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
         "distribution": "npm",
-        "storybook": "https://zainadeel.github.io/compomo/?path=/story/panel-tools",
-        "source": "src/wc/components/PanelTools/PanelTools.tsx",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/panel-nav",
+        "source": "src/wc/components/PanelNav/PanelNav.tsx",
         "intentStatus": "complete",
         "intent": {
           "audience": "specialized",
           "status": "stable",
-          "summary": "Required ShellApp utility rail and persistent drawer host for the fixed set of global Search, Agents, Messages, Stacks, Activity, and Help products.",
+          "summary": "The single persistent primary navigation for an application, providing grouped top-level destinations, active-route state, standard dashboard/settings switching, user access, and collapsible desktop and tablet presentation.",
           "useWhen": [
-            "Composing the required global tools region inside the application's single ShellApp.",
-            "Users need to move between application-wide utilities without losing each tool's in-progress state.",
-            "Search, AI conversations, user messages, review stacks, notifications, or help content must remain available alongside route content."
+            "Building the one primary navigation surface for an application that uses the CompoMo system.",
+            "Top-level destinations must remain consistently available while the application's page content changes.",
+            "Primary destinations need visual grouping, icons, notification indicators, active-route state, and expanded or collapsed presentation."
           ],
           "avoidWhen": [
-            "The action is specific to the current page or selected content rather than globally available across the application.",
-            "The item navigates to a primary or secondary route; use PanelNav or BarNav instead.",
-            "A consumer wants to add arbitrary tools, reorder fixed tools, or repurpose a semantic tool id.",
-            "Building the mobile tools experience; future mobile ShellApp composition uses a different bottom-bar and panel pattern.",
-            "PanelTools would be mounted outside the application's single ShellApp."
+            "A second navigation surface is needed within the same application; an application must have only one PanelNav.",
+            "The choices represent sections within the active primary destination; use BarNav instead.",
+            "The choices switch local content without changing the application's primary destination; use TabGroup instead.",
+            "The interaction performs a command or presents temporary contextual choices; use a button or Menu instead.",
+            "Building navigation below the mobile breakpoint; use the application's dedicated mobile navigation component instead."
           ],
           "alternatives": [
             {
-              "when": "The action navigates to a top-level application destination.",
-              "component": "component:ds-panel-nav",
-              "reason": "PanelNav exclusively owns primary application navigation."
+              "when": "The choices represent route sections within the active primary destination.",
+              "component": "component:ds-bar-nav",
+              "reason": "BarNav owns secondary section navigation within the destination selected by PanelNav."
             },
             {
-              "when": "The action navigates between route sections of the active destination.",
-              "component": "component:ds-bar-nav",
-              "reason": "BarNav exclusively owns secondary route navigation."
+              "when": "The choices switch local content without changing the application's primary destination.",
+              "component": "component:ds-tab-group",
+              "reason": "TabGroup owns local view selection and tab semantics."
             },
             {
-              "when": "Temporary contextual actions or options are needed.",
+              "when": "The choices are commands or temporary contextual actions.",
               "component": "component:ds-menu",
-              "reason": "Menu owns transient contextual choices rather than persistent global products."
+              "reason": "Menu owns transient action and option collections rather than persistent destinations."
             }
           ],
           "commonlyComposedWith": [
             "component:ds-shell-app",
-            "component:ds-panel-nav",
-            "component:ds-bar-nav"
+            "component:ds-bar-nav",
+            "component:ds-panel-tools",
+            "component:ds-menu"
           ],
           "patterns": [
             "pattern:application-shell"
           ],
           "accessibility": [
-            "Provide localized accessible labels for the rail, shortcut group, and every rendered tool.",
-            "Keep Search first in the rail header and Help last in the rail footer so keyboard and visual order remain predictable.",
-            "Keep focus on the selected rail action when opening a drawer and allow normal Tab navigation into its content.",
-            "Do not trigger global shortcuts while focus is in an editable control.",
-            "Use notification dots only as supplemental unread or new-content status and never as the sole status indication.",
-            "Explain temporarily inactive tools through an accessible label or adjacent product guidance; omit unauthorized tools entirely."
+            "Give every primary destination a concise visible label and an icon that supports rather than replaces that label.",
+            "Provide localized dashboard, settings, account, navigation, collapse, and expand labels.",
+            "Preserve accessible destination names when the panel is collapsed to icon-only presentation.",
+            "Use notification dots as supplemental status and never as the only indication of important information.",
+            "When the destination body overflows, it becomes a localized keyboard-focusable scroll region in addition to the roving destination controls.",
+            "Keep the standard dashboard/settings switch and user/account entry available in the footer."
           ],
           "states": [
-            "Search and Help are required; optional Agents, Messages, Stacks, and Activity tools are filtered by the application for authorization and entitlement.",
-            "Use only the fixed semantic tool ids and canonical order: Search, Agents, Messages, Stacks, Activity, Help; do not reorder, duplicate, or repurpose them.",
-            "Search is application-wide; Agents is user-to-AI chat; Messages is user-to-user chat; Stacks is a specialized inbox of grouped application events for review; Activity is the notification center; Help is drawer content that may link to external resources.",
-            "Only one drawer is open at a time; selecting another tool switches directly and selecting the active tool closes to rail-only mode.",
-            "The drawer starts closed, remains open across ordinary route changes, and retains every mounted tool's independent conversation, query, scroll, and work state.",
-            "When storageKey is set, persist only the last active tool in this browser and still restore the drawer closed after reload.",
-            "The application owns unread state; opening Messages, Agents, Stacks, or Activity does not automatically clear its notification dot.",
-            "PanelTools owns the one visible header above every drawer tool view and above fullscreen views using the default shared header mode. Slotted tool content must not render a second header unless the conversation product explicitly opts into split fullscreen headers.",
-            "PanelTools composes ds-panel-tool-header as its canonical left-aligned header implementation so standalone header stories and shell rendering cannot diverge.",
-            "Each tool supplies its current header title, base-versus-detail Back state, and right-side actions through the headers property. Base views omit Back; deeper views expose Back and update the same header in place.",
-            "Header Back and action events express intent only; the owning tool changes product navigation, menus, and data state. PanelTools keeps the final header action exactly 8px from the drawer edge.",
-            "Menus opened from a right-side header action use PANEL_TOOLS_HEADER_MENU_PLACEMENT: bottom/end choice-cell alignment and a 12px side offset, placing the popup 4px below the 48px header while aligning the final menu item edge with the trigger.",
-            "Tool view roots stay transparent so ShellApp's chrome wash remains visible; only explicitly designed child surfaces introduce a fill.",
-            "Tools with search compose ds-panel-tool-search immediately below the shared header. Its 48px row always contains the md search control and must not be reduced to sm or xs.",
-            "If an active optional tool becomes unavailable, PanelTools closes the drawer, clears activeTool, and emits its deselection.",
-            "Use isInactive only for a temporarily unavailable visible tool; omit tools the user is not authorized to access.",
-            "The application owns slotted tool products and data while PanelTools owns rail ordering, drawer selection, open state, motion, and shell events.",
-            "Opening and closing clip an already-rendered fixed-width surface. Header and tool content remain fully opaque and retained during width motion; transition completion is accepted only at the measured terminal clip width, after which the closed surface becomes inert and paint-skipped.",
-            "Entering and exiting fullscreen snaps without borrowing the drawer open or close animation.",
-            "When fullscreenHeaderMode is split, PanelTools suppresses only its fullscreen shared header. The application renders exactly two canonical ds-panel-tool-header instances: a tool-title/list-actions header over the 300px history pane and a chat-title/Exit-fullscreen/chat-actions header over the detail pane. The detail header omits Back because the list remains visible."
+            "Render exactly one PanelNav per application; it owns primary application destinations and no other navigation role.",
+            "The host router owns the current route; prefer currentUrl for active destination matching and use activeId only when route matching is unavailable.",
+            "Use anchor mode for native links or routers that intercept anchors; use event mode when the host performs navigation from dsNavSelect.",
+            "Groups visually organize top-level destinations only and must not be interpreted as nested or expandable navigation.",
+            "Dashboard presents day-to-day operational destinations; Settings presents administrative and configuration destinations.",
+            "The standard footer switches the entire destination collection and navStyle between Dashboard and Settings and exposes the user/account entry.",
+            "The host owns the external user menu opened from dsNavUserAction.",
+            "Item and header controls inherit the shared md control radius while local shell geometry continues to own collapsed layout and footer animation positioning.",
+            "On desktop, allow user-controlled expand and collapse and persist the preference with storageKey when cross-session persistence is appropriate."
           ],
           "responsiveBehavior": [
-            "The open drawer reduces main-content width and uses --dimension-panel-width-xs (300px) on every supported desktop and tablet viewport.",
-            "ShellApp owns the fixed drawer-width variable; consumers must not hardcode alternate drawer widths.",
-            "Below 768px, do not reuse desktop PanelTools: future ShellApp mobile composition uses a bottom bar for Search, Agents, Notifications, and Stacks, while Help moves into mobile primary navigation.",
-            "Keep named-slot content mounted while tools switch or the drawer closes so users can return to in-progress global work.",
-            "Conversation products may use fullscreenHeaderMode split for a 300px history rail beside a flexible detail pane, each with its own canonical header; the application owns that internal split layout.",
-            "Use fixed drawer widths for now; do not add user resizing or width persistence."
+            "At 1200px and wider, default to expanded, allow the user to expand or collapse, and restore the locally persisted desktop preference when available.",
+            "From 768px through 1199px, present PanelNav permanently collapsed and do not allow user expansion.",
+            "Below 768px, the consuming application replaces PanelNav with a dedicated mobile navigation component; PanelNav does not own mobile navigation.",
+            "ShellApp permanently owns responsive composition: it determines shell mode, enforces tablet collapse, and replaces PanelNav with future mobile navigation below 768px.",
+            "When the viewport is below breakpoint, PanelNav locks collapsed, disables its header toggle affordance, and preserves the persisted desktop collapse preference.",
+            "Collapsed presentation must preserve destination ordering, active state, notification status, and accessible names."
           ],
           "frameworkCaveats": {
             "customElements": [
-              "Assign items as a JavaScript property for structured data; items-json is the string fallback.",
-              "Assign headers as a JavaScript property and replace its object identity whenever an active tool changes title, depth, or actions.",
-              "Keep PanelTools mounted at ShellApp scope across route changes and provide each product through its matching named slot."
+              "Assign groups as a JavaScript property for structured data; a JSON string attribute is also supported.",
+              "Set nav-style before the element connects when first-paint style must match the current route."
             ],
             "react": [
-              "Pass the fixed item collection through the generated React wrapper and keep named-slot product content mounted at ShellApp scope.",
-              "Use storageKey only for same-browser last-tool continuity; do not persist the open drawer."
+              "Pass groups as an array through the generated React wrapper and synchronize currentUrl with the host router.",
+              "ShellApp owns mobile replacement; PanelNav enforces its configured breakpoint expansion lock."
             ],
             "angular": [
-              "Import DsPanelTools from @ds-mo/ui/angular/ds-panel-tools and bind items as a property.",
-              "Bind headers as a replaced object and route dsHeaderBack and dsHeaderAction to the active tool owner.",
-              "Keep the component in the persistent shell layout rather than recreating it in routed page components."
+              "Import DsPanelNav from @ds-mo/ui/angular/ds-panel-nav and bind groups as a property.",
+              "Bind both the nav-style attribute and navStyle property when first-paint route styling must be deterministic.",
+              "ShellApp owns mobile replacement; PanelNav enforces its configured breakpoint expansion lock."
             ]
           },
           "references": [
             {
               "label": "Executable Storybook examples",
-              "path": "src/wc/components/PanelTools/PanelTools.stories.ts"
+              "path": "src/wc/components/PanelNav/PanelNav.stories.ts"
             },
             {
-              "label": "Framework and shell integration",
+              "label": "Framework and routing integration",
               "path": "docs/framework-integration.md"
             },
             {
@@ -5861,47 +5689,83 @@
           ]
         },
         "props": {
-          "activeTool": {
-            "type": "PanelToolsToolId | ''",
+          "accountLabel": {
+            "type": "string",
             "required": false
           },
-          "fullscreenHeaderMode": {
-            "type": "'shared' | 'split'",
+          "accountMenuExpanded": {
+            "type": "boolean",
             "required": false
           },
-          "headers": {
-            "type": "PanelToolsHeaders",
+          "activeId": {
+            "type": "string",
             "required": false
           },
-          "headersJson": {
+          "breakpoint": {
+            "type": "number",
+            "required": false
+          },
+          "collapseNavigationLabel": {
             "type": "string",
             "required": false
           },
-          "items": {
-            "type": "PanelToolsItem[]",
+          "collapsed": {
+            "type": "boolean",
             "required": false
           },
-          "itemsJson": {
+          "currentUrl": {
             "type": "string",
             "required": false
           },
-          "open": {
+          "dashboardLabel": {
+            "type": "string",
+            "required": false
+          },
+          "dashboardNavigationLabel": {
+            "type": "string",
+            "required": false
+          },
+          "disableViewTransition": {
             "type": "boolean",
             "required": false
           },
-          "presentation": {
-            "type": "'drawer' | 'fullscreen'",
+          "expandNavigationLabel": {
+            "type": "string",
+            "required": false
+          },
+          "groups": {
+            "type": "string | PanelNavGroup[]",
+            "required": false
+          },
+          "navStyle": {
+            "type": "NavChromeStyle",
+            "required": false
+          },
+          "navigationItemsLabel": {
+            "type": "string",
+            "required": false
+          },
+          "routerMode": {
+            "type": "PanelNavRouterMode",
+            "required": false
+          },
+          "settingsLabel": {
+            "type": "string",
+            "required": false
+          },
+          "settingsNavigationLabel": {
+            "type": "string",
             "required": false
           },
           "storageKey": {
             "type": "string",
             "required": false
           },
-          "toolShortcutsLabel": {
+          "userInitial": {
             "type": "string",
             "required": false
           },
-          "toolsLabel": {
+          "userName": {
             "type": "string",
             "required": false
           }
@@ -5916,123 +5780,126 @@
             "detail": "ChromeTransitionDetail"
           },
           {
-            "name": "dsHeaderAction",
-            "detail": "{\n    tool: PanelToolsToolId;\n    id: string;\n  }"
+            "name": "dsNavFooterAction",
+            "detail": "void"
           },
           {
-            "name": "dsHeaderBack",
-            "detail": "{\n    tool: PanelToolsToolId;\n  }"
+            "name": "dsNavSelect",
+            "detail": "string"
           },
           {
-            "name": "dsPresentationChange",
-            "detail": "{\n    presentation: 'drawer' | 'fullscreen';\n  }"
+            "name": "dsNavToggle",
+            "detail": "boolean"
           },
           {
-            "name": "dsToolChange",
-            "detail": "{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }"
+            "name": "dsNavUserAction",
+            "detail": "PanelNavUserActionDetail"
           }
         ],
         "slots": [],
         "exports": {
-          "customElement": "ds-panel-tools",
-          "react": "DsPanelTools",
-          "angular": "DsPanelTools"
+          "customElement": "ds-panel-nav",
+          "react": "DsPanelNav",
+          "angular": "DsPanelNav"
         }
       },
       "dependencies": [
         "@ds-mo/ui",
-        "@ds-mo/tokens"
+        "@ds-mo/tokens",
+        "@ds-mo/icons"
       ],
       "registryDependencies": [
+        "badge",
         "button-unfilled",
-        "panel-tool-header",
+        "icon",
+        "text",
         "tooltip"
       ]
     },
     {
-      "name": "radio",
-      "title": "Radio",
-      "description": "Form-associated one-of-many radio selection set with vertical or horizontal layout, three densities, per-option inactive state, and roving keyboard focus.",
+      "name": "panel-sub-nav",
+      "title": "PanelSubNav",
+      "description": "Persistent vertical tab navigation for a panel or card side rail, switching adjacent local content with menu-like selected fill and stable text weight.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
         "distribution": "npm",
-        "storybook": "https://zainadeel.github.io/compomo/?path=/story/radio",
-        "source": "src/wc/components/Radio/Radio.tsx",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/panel-sub-nav",
+        "source": "src/wc/components/PanelSubNav/PanelSubNav.tsx",
         "intentStatus": "complete",
         "intent": {
           "audience": "general",
           "status": "stable",
-          "summary": "Form-associated one-of-many radio selection set with vertical or horizontal layout, three densities, per-option inactive state, and roving keyboard focus.",
+          "summary": "Persistent vertical tab navigation for a panel or card side rail, switching adjacent local content with menu-like selected fill and stable text weight.",
           "useWhen": [
-            "A user must select exactly one visible option from a small set.",
-            "All available choices should remain visible for comparison.",
-            "A form needs one selected string value with native validation, reset, or external form association."
+            "A panel or card side rail needs a persistent vertical list that switches adjacent local content.",
+            "Each concise text label controls an immediately available tabpanel without changing application routes."
           ],
           "avoidWhen": [
-            "A user may select zero or multiple independent choices.",
-            "A binary setting applies immediately rather than selecting from a set.",
-            "The option list is too long or space-constrained to remain visible."
+            "The navigation is not contained in a panel or card side rail.",
+            "Local views should be arranged horizontally; use TabGroup instead.",
+            "The choices navigate routes in application shell chrome; use PanelNav or BarNav instead.",
+            "The choices are temporary commands or contextual options; use Menu instead.",
+            "Rows need icons, subtext, notification dots, nested levels, or section headers."
           ],
           "alternatives": [
             {
-              "when": "A user may select zero or multiple independent choices.",
-              "component": "component:ds-checkbox",
-              "reason": "Checkbox communicates independent selection rather than one-of-many choice."
+              "when": "Local panel choices fit a horizontal tab row.",
+              "component": "component:ds-tab-group",
+              "reason": "TabGroup is the horizontal local-view counterpart."
             },
             {
-              "when": "A binary setting applies immediately.",
-              "component": "component:ds-switch",
-              "reason": "Switch communicates an immediately applied on/off setting."
+              "when": "The choices are primary application destinations.",
+              "component": "component:ds-panel-nav",
+              "reason": "PanelNav owns primary application navigation."
             },
             {
-              "when": "The option list is long or the available space is constrained.",
-              "component": "component:ds-select",
-              "reason": "Select keeps a larger one-of-many choice set compact."
+              "when": "The choices are secondary application routes.",
+              "component": "component:ds-bar-nav",
+              "reason": "BarNav owns route sections inside ShellApp."
+            },
+            {
+              "when": "The choices are transient actions or options.",
+              "component": "component:ds-menu",
+              "reason": "Menu owns temporary popup collections."
             }
           ],
           "commonlyComposedWith": [
-            "component:ds-field",
+            "component:ds-card-setting",
             "component:ds-text"
           ],
           "accessibility": [
-            "The host exposes radiogroup semantics and requires an accessible group name from aria-label or aria-labelledby.",
-            "Each visible option exposes radio semantics, its checked state, its label text, and any inactive state.",
-            "Arrow keys move and select through active options; Home and End select the first and last active options; Space and Enter select the focused option.",
-            "Roving tabindex keeps one active option in the tab order, preferring the selected option."
+            "Provide an accessible name with aria-label or aria-labelledby.",
+            "Give every item a unique id and the id of its controlled tabpanel.",
+            "Keep each controlled tabpanel labelled by its matching item id.",
+            "Always provide a valid selected item when enabled items exist so exactly one tab and panel are active.",
+            "ArrowUp and ArrowDown move and activate selection; Home and End select the first and last available items.",
+            "Do not use selected text weight as the selection cue; active fill and primary foreground communicate selection."
           ],
           "states": [
-            "Unchecked circles use a tertiary-foreground inset stroke: 1.25px at md, 1px at sm, and 0.75px at xs.",
-            "Selected circles remove the border, use a brand fill, and draw a centered on-bold foreground dot sized 8px at md, 6px at sm, and 4px at xs.",
-            "Sizes are md with a 16px circle in a 20px placement, sm with a 12px circle in a 16px placement, and xs with an 8px circle in a 12px placement.",
-            "The initial value is restored by native form reset; the selected value submits under name and a required set is invalid until one active option is selected."
+            "The parent owns the canonical selected value and panel visibility, and should update both from dsChange.",
+            "A missing, empty, or unknown selected value is invalid when enabled items exist; the component does not choose a fallback selection.",
+            "Inactive items remain visible but cannot be focused or selected.",
+            "Selection is singular and follows keyboard focus.",
+            "The omitted default surface treatment is for primary and secondary parent surfaces and uses the brand-active selected fill; pass faint explicitly on faint surfaces to use the neutral active fill.",
+            "Rows contain one text label only and do not express nested navigation or grouped hierarchy."
           ],
           "responsiveBehavior": [
-            "Choose size from the density of the containing form or settings row.",
-            "Prefer vertical layout when labels may wrap or horizontal space is constrained; horizontal layout is appropriate for short labels in a small set."
+            "The component remains vertical at every width.",
+            "The consuming panel owns responsive adaptation and decides whether to reposition or replace the side rail."
           ],
           "frameworkCaveats": {
             "customElements": [
-              "Assign options as a JavaScript property, set value as a property for application state updates, and listen for dsChange.",
-              "Use the form attribute on the host when associating a radio set rendered outside its owning form."
+              "Assign items as a JavaScript property because structured arrays are not represented by HTML attributes.",
+              "Keep value synchronized to a valid enabled item and update the controlled panel from dsChange."
             ],
             "react": [
-              "Use DsRadio, pass options as an array, and handle onDsChange; value is mutable and updates after user selection."
+              "Pass items as an array through the generated wrapper, keep value controlled, and use onDsChange to synchronize the visible panel."
             ],
             "angular": [
-              "Use DsRadio with options and value bindings plus dsChange, or import the generated radio value accessor with the component adapter."
+              "Bind items and a valid value as properties, and handle dsChange to synchronize the visible panel."
             ]
-          },
-          "references": [
-            {
-              "label": "Storybook examples",
-              "path": "src/wc/components/Radio/Radio.stories.ts"
-            },
-            {
-              "label": "Cross-browser form and accessibility coverage",
-              "path": "tests/e2e/forms.spec.ts"
-            }
-          ]
+          }
         },
         "props": {
           "ariaLabel": {
@@ -6043,40 +5910,12 @@
             "type": "string | undefined",
             "required": false
           },
-          "direction": {
-            "type": "'vertical' | 'horizontal'",
-            "required": false
-          },
-          "disabled": {
-            "type": "boolean",
-            "required": false
-          },
-          "form": {
-            "type": "string | undefined",
-            "required": false
-          },
-          "isInactive": {
-            "type": "boolean",
-            "required": false
-          },
-          "name": {
-            "type": "string | undefined",
-            "required": false
-          },
-          "options": {
-            "type": "RadioOption[]",
-            "required": false
-          },
-          "required": {
-            "type": "boolean",
-            "required": false
-          },
-          "requiredMessage": {
-            "type": "string",
+          "background": {
+            "type": "PanelSubNavBackground | undefined",
             "required": false
           },
-          "size": {
-            "type": "RadioSize",
+          "items": {
+            "type": "PanelSubNavItem[]",
             "required": false
           },
           "value": {
@@ -6092,9 +5931,9 @@
         ],
         "slots": [],
         "exports": {
-          "customElement": "ds-radio",
-          "react": "DsRadio",
-          "angular": "DsRadio"
+          "customElement": "ds-panel-sub-nav",
+          "react": "DsPanelSubNav",
+          "angular": "DsPanelSubNav"
         }
       },
       "dependencies": [
@@ -6106,311 +5945,235 @@
       ]
     },
     {
-      "name": "scroll-overlay",
-      "title": "ScrollOverlay",
-      "description": "Generic scroll owner for content that moves behind a persistent footer action or composer with an always-active alpha fade.",
+      "name": "panel-tool-header",
+      "title": "PanelToolHeader",
+      "description": "Canonical left-aligned PanelTools header with an optional leading navigation or dismiss action and application-owned trailing icon actions.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
         "distribution": "npm",
-        "storybook": "https://zainadeel.github.io/compomo/?path=/story/scroll-overlay",
-        "source": "src/wc/components/ScrollOverlay/ScrollOverlay.tsx",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/panel-tool-header",
+        "source": "src/wc/components/PanelToolHeader/PanelToolHeader.tsx",
         "intentStatus": "complete",
         "intent": {
           "audience": "general",
           "status": "experimental",
-          "summary": "Generic scroll owner for content that moves behind a persistent footer action or composer with an always-active alpha fade.",
+          "summary": "Canonical left-aligned PanelTools header with an optional leading navigation or dismiss action and application-owned trailing icon actions.",
           "useWhen": [
-            "A bounded region owns scrolling while footer actions remain overlaid and continuously visible.",
-            "The final content must clear a live-height footer while earlier content can move behind it."
+            "PanelTools needs its one shared root or detail header.",
+            "A tool header needs a title with optional Back or Close navigation, menu, fullscreen, or other compact icon actions."
           ],
           "avoidWhen": [
-            "The footer belongs in normal document flow rather than overlaying content.",
-            "Another component already owns scrolling and cannot delegate its scrollport to this component."
+            "Rendering inside a PanelTools tool body; PanelTools already composes this canonical header above the body.",
+            "The header belongs to page content."
           ],
           "commonlyComposedWith": [
-            "component:ds-button-filled",
-            "component:ds-message-composer"
+            "component:ds-button-unfilled"
           ],
           "accessibility": [
-            "Provide scrollLabel when the scrollport needs its own named, keyboard-focusable region.",
-            "Keep footer actions keyboard accessible and explicitly named; the fade is decorative and never intercepts pointer input."
+            "Leading navigation or dismiss actions and trailing icon actions require concise localized names; the header reuses each name as the action tooltip.",
+            "The visible heading names the active panel or subview."
           ],
           "states": [
-            "The alpha mask remains active at every scroll position and moves in content coordinates so it stays pinned behind the footer without masking native scrollbars.",
-            "The component measures the complete overlay for end clearance, measures its visible child for fade depth, and begins the fade 8px before that visible content.",
-            "An md 32px footer action with 8px bottom inset therefore produces a 48px fade; variable-height composers produce a correspondingly taller measured fade."
+            "The title remains left aligned whether the header has no actions, Back, one trailing action, or several trailing actions.",
+            "Leading and trailing control zones never shrink; only the title consumes and truncates within the remaining width, with a fixed 4px gap between zones.",
+            "Header chrome text is not selectable; actions remain keyboard focusable and interactive.",
+            "Adjacent trailing actions keep the shared 4px control gap in drawer and fullscreen presentations.",
+            "When fullscreen and overflow actions appear together, author fullscreen before overflow so Ellipses remains the rightmost action.",
+            "PanelTools supplies application-owned actions and relays their ids through its shared dsHeaderAction event."
           ],
           "responsiveBehavior": [
-            "The scrollport and overlay fill the available width and height; the owner supplies responsive sizing and overlay insets."
+            "The title truncates between optional leading navigation and trailing action zones."
           ],
-          "frameworkCaveats": {
-            "customElements": [
-              "Place scrollable content in the default slot and one footer wrapper in the overlay slot; use dsScroll only when the application needs position data."
-            ],
-            "react": [
-              "Use DsScrollOverlay with ordinary children plus an element carrying slot=\"overlay\"."
-            ],
-            "angular": [
-              "Import DsScrollOverlay and project the persistent footer wrapper with slot=\"overlay\"."
-            ]
-          },
           "references": [
             {
-              "label": "Storybook examples",
-              "path": "src/wc/components/ScrollOverlay/ScrollOverlay.stories.ts"
+              "label": "Standalone examples",
+              "path": "src/wc/components/PanelToolHeader/PanelToolHeader.stories.ts"
             }
           ]
         },
         "props": {
-          "scrollLabel": {
+          "actions": {
+            "type": "PanelToolsHeaderAction[]",
+            "required": false
+          },
+          "backAriaLabel": {
+            "type": "string",
+            "required": false
+          },
+          "backIcon": {
+            "type": "string",
+            "required": false
+          },
+          "heading": {
+            "type": "string",
+            "required": false
+          },
+          "menuAriaLabel": {
+            "type": "string",
+            "required": false
+          },
+          "menuControls": {
             "type": "string | undefined",
             "required": false
+          },
+          "menuExpanded": {
+            "type": "boolean",
+            "required": false
+          },
+          "menuTriggerId": {
+            "type": "string",
+            "required": false
+          },
+          "showBack": {
+            "type": "boolean",
+            "required": false
+          },
+          "showMenu": {
+            "type": "boolean",
+            "required": false
           }
         },
         "events": [
           {
-            "name": "dsScroll",
-            "detail": "ScrollOverlayScrollDetail"
+            "name": "dsAction",
+            "detail": "{ id: string; originalEvent: MouseEvent }"
+          },
+          {
+            "name": "dsBack",
+            "detail": "MouseEvent"
+          },
+          {
+            "name": "dsMenuToggle",
+            "detail": "MouseEvent"
           }
         ],
         "slots": [],
         "exports": {
-          "customElement": "ds-scroll-overlay",
-          "react": "DsScrollOverlay",
-          "angular": "DsScrollOverlay"
+          "customElement": "ds-panel-tool-header",
+          "react": "DsPanelToolHeader",
+          "angular": "DsPanelToolHeader"
         }
       },
       "dependencies": [
         "@ds-mo/ui",
         "@ds-mo/tokens"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "button-unfilled",
+        "text",
+        "tooltip"
+      ]
     },
     {
-      "name": "select",
-      "title": "Select",
-      "description": "Form-associated single-value select with listbox semantics, local search, rich flat options, grouped sections, loading, clearing, and surface-aware trigger chrome.",
+      "name": "panel-tool-search",
+      "title": "PanelToolSearch",
+      "description": "Transparent search row for the top of a PanelTools product view, with a fixed 48px allocation around the standard md search control and an optional filter-menu trigger.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
         "distribution": "npm",
-        "storybook": "https://zainadeel.github.io/compomo/?path=/story/select",
-        "source": "src/wc/components/Select/Select.tsx",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/panel-tool-search",
+        "source": "src/wc/components/PanelToolSearch/PanelToolSearch.tsx",
         "intentStatus": "complete",
         "intent": {
           "audience": "general",
-          "status": "stable",
-          "summary": "Form-associated single-value select with listbox semantics, local search, rich flat options, grouped sections, loading, clearing, and surface-aware trigger chrome.",
+          "status": "experimental",
+          "summary": "Transparent search row for the top of a PanelTools product view, with a fixed 48px allocation around the standard md search control and an optional filter-menu trigger.",
           "useWhen": [
-            "The user must choose one value from a finite set.",
-            "The option set benefits from local search, subtext, prefix icons, grouping, or disabled choices.",
-            "The choice set has more than roughly 20 options, comes from a user-managed listing, or represents a large domain such as addresses where search materially improves retrieval.",
-            "The selected value must participate in native, Angular, or React form state."
+            "A PanelTools base view filters or searches the tool's own content.",
+            "Several tool products need the same search-row geometry directly below the shared PanelTools header.",
+            "The product needs a compact filter menu next to search while keeping its filter choices and matching policy application-owned."
           ],
           "avoidWhen": [
-            "Several values may be selected at once.",
-            "The rows perform commands rather than choosing a form value.",
-            "The choices form a hierarchy with expandable parents."
-          ],
-          "alternatives": [
-            {
-              "when": "Several independent values may be selected.",
-              "component": "component:ds-select-multi",
-              "reason": "SelectMulti owns array values, multi-selection semantics, and count presentation."
-            },
-            {
-              "when": "The popup contains commands or state-changing actions.",
-              "component": "component:ds-menu",
-              "reason": "Menu uses action-menu roles and command-focused keyboard behavior."
-            },
-            {
-              "when": "A small set of choices should remain visible.",
-              "component": "component:ds-radio",
-              "reason": "Prefer Radio for roughly two to five mutually exclusive choices when the available space allows all choices to remain visible."
-            }
+            "The search belongs inside a Select or SelectMulti popup; use that component's searchable behavior.",
+            "A form needs a labelled standalone field; compose ds-input inside ds-field instead."
           ],
           "commonlyComposedWith": [
-            "component:ds-text",
-            "component:ds-icon",
-            "component:ds-empty-state",
-            "component:ds-loader"
+            "component:ds-panel-tools",
+            "component:ds-conversation-list",
+            "component:ds-input"
           ],
           "accessibility": [
-            "In forms, provide a persistent visible external field label; placeholder text is guidance and must not be the field's only label. In a compact filter bar, the trigger's visible text may supply the accessible name.",
-            "The trigger uses combobox semantics and the popup uses listbox and option semantics; do not replace them with menu roles.",
-            "Disabled options remain visible, expose aria-disabled, and are skipped by keyboard navigation and typeahead.",
-            "Keyboard navigation keeps the aria-activedescendant option scrolled into the visible listbox viewport.",
-            "Selected options rely on active fill and foreground treatment without a redundant trailing check icon.",
-            "Local search moves focus into the search field while preserving the active option through aria-activedescendant.",
-            "Use errorMessage with error so the trigger is described by the rendered alert."
+            "Provide an aria-label that names the searched domain, such as Search agent chats or Search messages.",
+            "The standard search clear action restores focus, uses the concise localized clearLabel by itself for both its tooltip and accessible name, and emits both the empty query and dsClear.",
+            "When showFilter is enabled, provide stable filterTriggerId and filterControls values, synchronize filterExpanded with the controlled menu, and restore focus after selection; filterAriaLabel also labels its tooltip."
           ],
           "states": [
-            "Value is controlled through the mutable value property; dsChange reports user selection and clearing.",
-            "Required Selects begin without an automatic selection and require the user to make an explicit choice; do not preselect the first option merely to satisfy validity.",
-            "When allowClear is enabled, the clear affordance appears only after a value exists. Clearing is valid for optional and required fields; a required field becomes invalid until the user selects again.",
-            "Clearing emits dsChange with an empty string and dsClear, keeps the popup open, and restores useful focus.",
-            "Loading keeps the trigger visible, replaces its prefix icon, marks the control busy, and makes selection interaction temporarily unavailable without presenting the control as inactive.",
-            "The trigger label stays left-aligned at every width. The default size is md in both forms and filter bars; smaller sizes require an explicit density need.",
-            "Use option icons only when they help users differentiate choices. Icons render only when every option in the complete list provides one; mixed icon data falls back to the text-only row layout.",
-            "Create sections only for categories that are meaningful to customers, not merely to break a long list into arbitrary chunks.",
-            "When any option supplies subtext, every row uses the same subtext structure and missing values render an em dash. Subtext should disambiguate or add decision-helpful information.",
-            "Option labels and the selected trigger label stay on one line and truncate when constrained. Option subtext may wrap to at most two lines.",
-            "The optional prefix icon and chevron always use the parent surface's secondary foreground color, including when a selected value promotes the label to primary.",
-            "The shared popup search control stays md at every trigger size, using body-medium text, a 20px icon, and the same internal spacing as a borderless Select trigger. Its container uses menu-item padding on every side and owns a 1px bottom divider that becomes a 1.5px bold-brand stroke while search has focus. Search placeholder text is secondary at rest and quaternary while focused because it becomes decorative once the editable field is active.",
-            "When search contains text, the shared control shows a rounded sm icon-only ButtonUnfilled with the CrossCircle icon and no border. It clears the local term, stays hidden for an empty term, and returns focus to search.",
-            "The shared clear footer mirrors the search region's sizing: menu-item padding surrounds an md-height borderless row, and the Clear label uses the same row and label insets as option text. The outer footer owns a 1px top divider.",
-            "An empty filtered list composes the message-only body variant of EmptyState. Keep the default neutral no-results message unless localized product guidance makes the outcome clearer.",
-            "Enable searchable for more than roughly 20 options, user-managed listings, large domains such as addresses, or sets users cannot efficiently scan. Local matching includes option labels, subtext, and section headings; the owner resolves remote data before assigning options.",
-            "Validation timing belongs to the form owner and may be immediate or deferred until blur or submit; the Select exposes validity and error presentation without imposing that policy.",
-            "The error trigger uses a 1.5px bold-negative inset stroke so invalid state remains distinguishable from the normal 1px border without changing control geometry.",
-            "An initially empty option set is not an expected Select use case. The no-results state describes a search with no matches, not a source with no choices.",
-            "Use options for a flat list or sections for grouped choices; when sections are present they take precedence.",
-            "The background prop describes the actual parent surface and uses the same surface set as ButtonUnfilled."
+            "The row is always 48px high with 8px outer padding and a complete md search recipe: 32px control, text-body-medium at 14px/20px, and a 20px md search icon.",
+            "The search icon stays foreground-secondary at rest, hover, focus, active, and while the query is filled.",
+            "The row and control surface remain transparent so the ShellApp chrome wash is visible behind them.",
+            "The row divider remains the same tertiary 1px boundary while the input is focused because it belongs to the 48px container rather than the input control.",
+            "With filtering enabled, the md search control, decorative vertical divider, and borderless md Filter action are separated by 8px; filterActive promotes only the trigger foreground without adding a selected fill."
           ],
           "responsiveBehavior": [
-            "Use width fill for form fields and width hug for compact filter bars. Override those defaults only when the owning layout has a clear constraint.",
-            "The popup matches the trigger minimum width, may grow for content, and clamps to the viewport.",
-            "Long option collections scroll inside the popup; virtualization and remote search are not part of this component."
+            "The row fills the available drawer or fullscreen width, allows its search region to shrink inside a 300px drawer without pushing the filter trigger under the tool rail, and does not reduce its control below md density."
           ],
           "frameworkCaveats": {
             "customElements": [
-              "Assign options and sections through JavaScript properties because arrays and objects cannot be represented safely as attributes."
+              "Listen for dsChange to receive the current string query and dsClear when the clear action is used.",
+              "Listen for dsFilterToggle and pair the trigger with an externally controlled ds-menu; product-specific filter labels and filtering remain outside this component."
             ],
             "react": [
-              "Pass options or sections as wrapper props and handle onDsChange, onDsClear, and onDsOpenChange."
+              "Use DsPanelToolSearch, bind value for controlled state, and handle onDsChange.",
+              "Bind the optional filter trigger state and connect onDsFilterToggle to a controlled DsMenu."
             ],
             "angular": [
-              "Import DsSelect and SelectValueAccessor when integrating with Angular Forms; bind options and sections as properties."
+              "Import DsPanelToolSearch and bind value as a property; this search composition is not a form value accessor.",
+              "Bind showFilter, filterExpanded, and filterActive, then connect dsFilterToggle to a product-owned ds-menu."
             ]
           },
           "references": [
             {
               "label": "Storybook examples",
-              "path": "src/wc/components/Select/Select.stories.ts"
-            },
-            {
-              "label": "Selection patterns",
-              "path": "src/docs/SelectionPatterns.mdx"
+              "path": "src/wc/components/PanelToolSearch/PanelToolSearch.stories.ts"
             }
           ]
         },
         "props": {
-          "activeFill": {
-            "type": "boolean",
+          "ariaLabel": {
+            "type": "string",
             "required": false
           },
-          "allowClear": {
-            "type": "boolean",
+          "controls": {
+            "type": "string | undefined",
             "required": false
           },
-          "ariaDescribedby": {
-            "type": "string | undefined",
+          "filterActive": {
+            "type": "boolean",
             "required": false
           },
-          "ariaLabel": {
-            "type": "string | null",
+          "filterAriaLabel": {
+            "type": "string",
             "required": false
           },
-          "ariaLabelledby": {
+          "filterControls": {
             "type": "string | undefined",
             "required": false
           },
-          "background": {
-            "type": "SelectBackground | undefined",
+          "filterExpanded": {
+            "type": "boolean",
             "required": false
           },
-          "clearLabel": {
+          "filterTriggerId": {
             "type": "string",
             "required": false
           },
-          "disabled": {
+          "isInactive": {
             "type": "boolean",
             "required": false
           },
-          "error": {
-            "type": "boolean",
+          "placeholder": {
+            "type": "string",
             "required": false
           },
-          "errorMessage": {
-            "type": "string | undefined",
-            "required": false
-          },
-          "hasBorder": {
-            "type": "boolean",
-            "required": false
-          },
-          "icon": {
-            "type": "string | undefined",
-            "required": false
-          },
-          "inputId": {
-            "type": "string | undefined",
-            "required": false
-          },
-          "isInactive": {
-            "type": "boolean",
-            "required": false
-          },
-          "isLoading": {
-            "type": "boolean",
-            "required": false
-          },
-          "loadingLabel": {
-            "type": "string",
-            "required": false
-          },
-          "name": {
-            "type": "string | undefined",
-            "required": false
-          },
-          "noResultsText": {
-            "type": "string",
-            "required": false
-          },
-          "open": {
-            "type": "boolean",
-            "required": false
-          },
-          "options": {
-            "type": "SelectOption[]",
-            "required": false
-          },
-          "placeholder": {
-            "type": "string",
-            "required": false
-          },
-          "required": {
-            "type": "boolean",
-            "required": false
-          },
-          "requiredMessage": {
-            "type": "string",
-            "required": false
-          },
-          "searchPlaceholder": {
-            "type": "string",
-            "required": false
-          },
-          "searchable": {
+          "showFilter": {
             "type": "boolean",
             "required": false
           },
-          "sections": {
-            "type": "SelectSection[]",
-            "required": false
-          },
-          "size": {
-            "type": "SelectSize",
-            "required": false
-          },
           "value": {
             "type": "string",
             "required": false
-          },
-          "width": {
-            "type": "SelectWidth",
-            "required": false
           }
         },
         "events": [
@@ -6423,15 +6186,15 @@
             "detail": "void"
           },
           {
-            "name": "dsOpenChange",
-            "detail": "boolean"
+            "name": "dsFilterToggle",
+            "detail": "MouseEvent"
           }
         ],
         "slots": [],
         "exports": {
-          "customElement": "ds-select",
-          "react": "DsSelect",
-          "angular": "DsSelect"
+          "customElement": "ds-panel-tool-search",
+          "react": "DsPanelToolSearch",
+          "angular": "DsPanelToolSearch"
         }
       },
       "dependencies": [
@@ -6441,189 +6204,155 @@
       ],
       "registryDependencies": [
         "button-unfilled",
-        "empty-state",
+        "divider",
         "icon",
-        "loader",
         "text",
         "tooltip"
       ]
     },
     {
-      "name": "select-multi",
-      "title": "SelectMulti",
-      "description": "Form-associated multi-value select with a persistent trigger label, inline selected count, local search, rich flat options, grouped sections, loading, and clear-all behavior.",
+      "name": "panel-tools",
+      "title": "PanelTools",
+      "description": "Required ShellApp utility rail and persistent drawer host for the fixed set of global Search, Agents, Messages, Stacks, Activity, and Help products.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
         "distribution": "npm",
-        "storybook": "https://zainadeel.github.io/compomo/?path=/story/select-multi",
-        "source": "src/wc/components/SelectMulti/SelectMulti.tsx",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/panel-tools",
+        "source": "src/wc/components/PanelTools/PanelTools.tsx",
         "intentStatus": "complete",
         "intent": {
-          "audience": "general",
+          "audience": "specialized",
           "status": "stable",
-          "summary": "Form-associated multi-value select with a persistent trigger label, inline selected count, local search, rich flat options, grouped sections, loading, and clear-all behavior.",
+          "summary": "Required ShellApp utility rail and persistent drawer host for the fixed set of global Search, Agents, Messages, Stacks, Activity, and Help products.",
           "useWhen": [
-            "The user may choose several independent values from one finite set.",
-            "A compact trigger should summarize selection with the field label and a count.",
-            "The option set benefits from local search, subtext, grouping, or disabled choices.",
-            "The choice set has more than roughly 20 options, comes from a user-managed listing, or represents a large domain where search materially improves retrieval."
+            "Composing the required global tools region inside the application's single ShellApp.",
+            "Users need to move between application-wide utilities without losing each tool's in-progress state.",
+            "Search, AI conversations, user messages, review stacks, notifications, or help content must remain available alongside route content."
           ],
           "avoidWhen": [
-            "Exactly one value may be selected.",
-            "Selected values must remain individually removable as persistent tags outside the popup.",
-            "The choices form a hierarchy with cascading parent selection.",
-            "The customer task benefits more from keeping every choice and checkbox directly visible; choose between SelectMulti and a visible checkbox list from the use-case context rather than a fixed option-count threshold."
+            "The action is specific to the current page or selected content rather than globally available across the application.",
+            "The item navigates to a primary or secondary route; use PanelNav or BarNav instead.",
+            "A consumer wants to add arbitrary tools, reorder fixed tools, or repurpose a semantic tool id.",
+            "Building the mobile tools experience; future mobile ShellApp composition uses a different bottom-bar and panel pattern.",
+            "PanelTools would be mounted outside the application's single ShellApp."
           ],
           "alternatives": [
             {
-              "when": "Exactly one value may be selected.",
-              "component": "component:ds-select",
-              "reason": "Select owns scalar form value and single-select listbox behavior."
+              "when": "The action navigates to a top-level application destination.",
+              "component": "component:ds-panel-nav",
+              "reason": "PanelNav exclusively owns primary application navigation."
             },
             {
-              "when": "The popup contains actions rather than values.",
+              "when": "The action navigates between route sections of the active destination.",
+              "component": "component:ds-bar-nav",
+              "reason": "BarNav exclusively owns secondary route navigation."
+            },
+            {
+              "when": "Temporary contextual actions or options are needed.",
               "component": "component:ds-menu",
-              "reason": "Menu uses command semantics and closes according to action-menu expectations."
+              "reason": "Menu owns transient contextual choices rather than persistent global products."
             }
           ],
           "commonlyComposedWith": [
-            "component:ds-text",
-            "component:ds-checkbox",
-            "component:ds-empty-state",
-            "component:ds-loader"
+            "component:ds-shell-app",
+            "component:ds-panel-nav",
+            "component:ds-bar-nav"
+          ],
+          "patterns": [
+            "pattern:application-shell"
           ],
           "accessibility": [
-            "In forms, provide a persistent visible external field label. In a compact filter bar, the trigger's visible persistent label and count may supply the accessible name.",
-            "The popup is a listbox with aria-multiselectable and every option exposes its independent aria-selected state.",
-            "Disabled options expose aria-disabled and are skipped by keyboard navigation and typeahead.",
-            "Keyboard navigation keeps the aria-activedescendant option scrolled into the visible listbox viewport.",
-            "Each row uses a medium-size presentation-only ds-checkbox indicator; multi-select option rows never add a prefix icon alongside it, and the option remains the sole selection semantic and interaction target.",
-            "The trigger keeps its field label visible and appends the current selected count; an explicit aria-label or aria-labelledby remains the authoritative accessible name when supplied.",
-            "Use errorMessage with error so the trigger is described by the rendered alert."
+            "Provide localized accessible labels for the rail, shortcut group, and every rendered tool.",
+            "Keep Search first in the rail header and Help last in the rail footer so keyboard and visual order remain predictable.",
+            "Keep focus on the selected rail action when opening a drawer and allow normal Tab navigation into its content.",
+            "Do not trigger global shortcuts while focus is in an editable control.",
+            "Use notification dots only as supplemental unread or new-content status and never as the sole status indication.",
+            "Explain temporarily inactive tools through an accessible label or adjacent product guidance; omit unauthorized tools entirely."
           ],
           "states": [
-            "Values is a controlled JavaScript array; dsChange emits a new array after each user toggle.",
-            "Required SelectMulti controls begin without an automatic selection and require the user to make an explicit choice.",
-            "Selecting an option keeps the popup open so additional values can be toggled.",
-            "The trigger label stays left-aligned at every width; every option row uses the same leading medium Checkbox indicator. The default control size is md in both forms and filter bars.",
-            "The selected count always follows the persistent label as plain text separated by a centered dot, including for one selection, and counts every selected value even when search or grouping hides it. Never replace the count with selected option names.",
-            "Create sections only for categories that are meaningful to customers, not merely to break a long list into arbitrary chunks.",
-            "When any option supplies subtext, every row uses the same subtext structure and missing values render an em dash. Subtext should disambiguate or add decision-helpful information.",
-            "Option labels stay on one line and truncate when constrained. Option subtext may wrap to at most two lines.",
-            "The optional prefix icon and chevron always use the parent surface's secondary foreground color, including when selection promotes the label and count to primary.",
-            "The shared popup search control stays md at every trigger size, using body-medium text, a 20px icon, and the same internal spacing as a borderless Select trigger. Its container uses menu-item padding on every side and owns a 1px bottom divider that becomes a 1.5px bold-brand stroke while search has focus. Search placeholder text is secondary at rest and quaternary while focused because it becomes decorative once the editable field is active.",
-            "When search contains text, the shared control shows a rounded sm icon-only ButtonUnfilled with the Cross icon and no border. It clears the local term, stays hidden for an empty term, and returns focus to search.",
-            "The shared summary-and-clear footer mirrors the search region's sizing: menu-item padding surrounds an md-height borderless row, and both texts use the same row and label insets as option text. The outer footer owns a 1px top divider.",
-            "An empty filtered list composes the message-only body variant of EmptyState. Keep the default neutral no-results message unless localized product guidance makes the outcome clearer.",
-            "Enable searchable for more than roughly 20 options, user-managed listings, large domains such as addresses, or sets users cannot efficiently scan. Local matching includes option labels, subtext, and section headings; the owner resolves remote data before assigning options.",
-            "When allowClear is enabled, clear-all appears only after at least one value exists. Clearing is valid for optional and required fields; a required field becomes invalid until the user selects again.",
-            "Clear-all emits an empty dsChange and dsClear while preserving useful popup or search focus.",
-            "Loading keeps the trigger visible, marks the control busy, and makes selection interaction temporarily unavailable without presenting the control as inactive.",
-            "SelectMulti has no maximum-selection behavior; every available non-inactive option may be selected.",
-            "Validation timing belongs to the form owner and may be immediate or deferred until blur or submit; the component exposes validity and error presentation without imposing that policy.",
-            "The error trigger uses a 1.5px bold-negative inset stroke so invalid state remains distinguishable from the normal 1px border without changing control geometry.",
-            "An initially empty option set is not an expected SelectMulti use case. The no-results state describes a search with no matches, not a source with no choices.",
-            "Native form submission emits one entry per selected value under the component name.",
-            "Use options for a flat list or sections for grouped choices. Multi-select option contracts intentionally exclude icons because the leading checkbox owns that row zone; hierarchical parent selection is deferred."
+            "Search and Help are required; optional Agents, Messages, Stacks, and Activity tools are filtered by the application for authorization and entitlement.",
+            "Use only the fixed semantic tool ids and canonical order: Search, Agents, Messages, Stacks, Activity, Help; do not reorder, duplicate, or repurpose them.",
+            "Search is application-wide; Agents is user-to-AI chat; Messages is user-to-user chat; Stacks is a specialized inbox of grouped application events for review; Activity is the notification center; Help is drawer content that may link to external resources.",
+            "Only one drawer is open at a time; selecting another tool switches directly and selecting the active tool closes to rail-only mode.",
+            "The drawer starts closed, remains open across ordinary route changes, and retains every mounted tool's independent conversation, query, scroll, and work state.",
+            "When storageKey is set, persist only the last active tool in this browser and still restore the drawer closed after reload.",
+            "The application owns unread state; opening Messages, Agents, Stacks, or Activity does not automatically clear its notification dot.",
+            "PanelTools owns the one visible header above every drawer tool view and above fullscreen views using the default shared header mode. Slotted tool content must not render a second header unless the conversation product explicitly opts into split fullscreen headers.",
+            "PanelTools composes ds-panel-tool-header as its canonical left-aligned header implementation so standalone header stories and shell rendering cannot diverge.",
+            "Each tool supplies its current header title, base-versus-detail Back state, and right-side actions through the headers property. Base views omit Back; deeper views expose Back and update the same header in place.",
+            "Header Back and action events express intent only; the owning tool changes product navigation, menus, and data state. PanelTools keeps the final header action exactly 8px from the drawer edge.",
+            "Menus opened from a right-side header action use PANEL_TOOLS_HEADER_MENU_PLACEMENT: bottom/end choice-cell alignment and a 12px side offset, placing the popup 4px below the 48px header while aligning the final menu item edge with the trigger.",
+            "Tool view roots stay transparent so ShellApp's chrome wash remains visible; only explicitly designed child surfaces introduce a fill.",
+            "Tools with search compose ds-panel-tool-search immediately below the shared header. Its 48px row always contains the md search control and must not be reduced to sm or xs.",
+            "If an active optional tool becomes unavailable, PanelTools closes the drawer, clears activeTool, and emits its deselection.",
+            "Use isInactive only for a temporarily unavailable visible tool; omit tools the user is not authorized to access.",
+            "The application owns slotted tool products and data while PanelTools owns rail ordering, drawer selection, open state, motion, and shell events.",
+            "Opening and closing clip an already-rendered fixed-width surface. Header and tool content remain fully opaque and retained during width motion; transition completion is accepted only at the measured terminal clip width, after which the closed surface becomes inert and paint-skipped.",
+            "Entering and exiting fullscreen snaps without borrowing the drawer open or close animation.",
+            "When fullscreenHeaderMode is split, PanelTools suppresses only its fullscreen shared header. The application renders exactly two canonical ds-panel-tool-header instances: a tool-title/list-actions header over the 300px history pane and a chat-title/Exit-fullscreen/chat-actions header over the detail pane. The detail header omits Back because the list remains visible."
           ],
           "responsiveBehavior": [
-            "Use width fill for form fields and width hug for compact filter bars; the persistent trigger label avoids variable-width selected labels.",
-            "The popup matches the trigger minimum width, may grow for content, and clamps to the viewport.",
-            "Long option collections scroll inside the popup; virtualization and remote search are not part of this version."
+            "The open drawer reduces main-content width and uses --dimension-panel-width-xs (300px) on every supported desktop and tablet viewport.",
+            "ShellApp owns the fixed drawer-width variable; consumers must not hardcode alternate drawer widths.",
+            "Below 768px, do not reuse desktop PanelTools: future ShellApp mobile composition uses a bottom bar for Search, Agents, Notifications, and Stacks, while Help moves into mobile primary navigation.",
+            "Keep named-slot content mounted while tools switch or the drawer closes so users can return to in-progress global work.",
+            "Conversation products may use fullscreenHeaderMode split for a 300px history rail beside a flexible detail pane, each with its own canonical header; the application owns that internal split layout.",
+            "Use fixed drawer widths for now; do not add user resizing or width persistence."
           ],
           "frameworkCaveats": {
             "customElements": [
-              "Assign values, options, and sections through JavaScript properties; array values cannot be represented safely as attributes."
+              "Assign items as a JavaScript property for structured data; items-json is the string fallback.",
+              "Assign headers as a JavaScript property and replace its object identity whenever an active tool changes title, depth, or actions.",
+              "Keep PanelTools mounted at ShellApp scope across route changes and provide each product through its matching named slot."
             ],
             "react": [
-              "Pass values, options, and sections as wrapper props and handle onDsChange, onDsClear, and onDsOpenChange."
+              "Pass the fixed item collection through the generated React wrapper and keep named-slot product content mounted at ShellApp scope.",
+              "Use storageKey only for same-browser last-tool continuity; do not persist the open drawer."
             ],
             "angular": [
-              "Import DsSelectMulti and SelectMultiValueAccessor when integrating with Angular Forms."
+              "Import DsPanelTools from @ds-mo/ui/angular/ds-panel-tools and bind items as a property.",
+              "Bind headers as a replaced object and route dsHeaderBack and dsHeaderAction to the active tool owner.",
+              "Keep the component in the persistent shell layout rather than recreating it in routed page components."
             ]
           },
           "references": [
             {
-              "label": "Storybook examples",
-              "path": "src/wc/components/SelectMulti/SelectMulti.stories.ts"
+              "label": "Executable Storybook examples",
+              "path": "src/wc/components/PanelTools/PanelTools.stories.ts"
             },
             {
-              "label": "Selection patterns",
-              "path": "src/docs/SelectionPatterns.mdx"
+              "label": "Framework and shell integration",
+              "path": "docs/framework-integration.md"
+            },
+            {
+              "label": "Application shell composition",
+              "path": "agent/patterns/application-shell/pattern.agent.json"
             }
           ]
         },
         "props": {
-          "activeFill": {
-            "type": "boolean",
-            "required": false
-          },
-          "allowClear": {
-            "type": "boolean",
+          "activeTool": {
+            "type": "PanelToolsToolId | ''",
             "required": false
           },
-          "ariaDescribedby": {
-            "type": "string | undefined",
+          "fullscreenHeaderMode": {
+            "type": "'shared' | 'split'",
             "required": false
           },
-          "ariaLabel": {
-            "type": "string | null",
+          "headers": {
+            "type": "PanelToolsHeaders",
             "required": false
           },
-          "ariaLabelledby": {
-            "type": "string | undefined",
+          "headersJson": {
+            "type": "string",
             "required": false
           },
-          "background": {
-            "type": "SelectMultiBackground | undefined",
+          "items": {
+            "type": "PanelToolsItem[]",
             "required": false
           },
-          "clearLabel": {
-            "type": "string",
-            "required": false
-          },
-          "disabled": {
-            "type": "boolean",
-            "required": false
-          },
-          "error": {
-            "type": "boolean",
-            "required": false
-          },
-          "errorMessage": {
-            "type": "string | undefined",
-            "required": false
-          },
-          "hasBorder": {
-            "type": "boolean",
-            "required": false
-          },
-          "icon": {
-            "type": "string | undefined",
-            "required": false
-          },
-          "inputId": {
-            "type": "string | undefined",
-            "required": false
-          },
-          "isInactive": {
-            "type": "boolean",
-            "required": false
-          },
-          "isLoading": {
-            "type": "boolean",
-            "required": false
-          },
-          "loadingLabel": {
-            "type": "string",
-            "required": false
-          },
-          "name": {
-            "type": "string | undefined",
-            "required": false
-          },
-          "noResultsText": {
+          "itemsJson": {
             "type": "string",
             "required": false
           },
@@ -6631,810 +6360,1191 @@
             "type": "boolean",
             "required": false
           },
-          "options": {
-            "type": "SelectMultiOption[]",
-            "required": false
-          },
-          "placeholder": {
-            "type": "string",
-            "required": false
-          },
-          "required": {
-            "type": "boolean",
+          "presentation": {
+            "type": "'drawer' | 'fullscreen'",
             "required": false
           },
-          "requiredMessage": {
+          "storageKey": {
             "type": "string",
             "required": false
           },
-          "searchPlaceholder": {
+          "toolShortcutsLabel": {
             "type": "string",
             "required": false
           },
-          "searchable": {
-            "type": "boolean",
-            "required": false
-          },
-          "sections": {
-            "type": "SelectMultiSection[]",
-            "required": false
-          },
-          "selectedLabel": {
+          "toolsLabel": {
             "type": "string",
             "required": false
-          },
-          "size": {
-            "type": "SelectMultiSize",
-            "required": false
-          },
-          "values": {
-            "type": "string[]",
-            "required": false
-          },
-          "width": {
-            "type": "SelectMultiWidth",
-            "required": false
           }
         },
         "events": [
           {
-            "name": "dsChange",
-            "detail": "string[]"
+            "name": "dsChromeTransitionEnd",
+            "detail": "ChromeTransitionDetail"
           },
           {
-            "name": "dsClear",
-            "detail": "void"
+            "name": "dsChromeTransitionStart",
+            "detail": "ChromeTransitionDetail"
           },
           {
-            "name": "dsOpenChange",
-            "detail": "boolean"
+            "name": "dsHeaderAction",
+            "detail": "{\n    tool: PanelToolsToolId;\n    id: string;\n  }"
+          },
+          {
+            "name": "dsHeaderBack",
+            "detail": "{\n    tool: PanelToolsToolId;\n  }"
+          },
+          {
+            "name": "dsPresentationChange",
+            "detail": "{\n    presentation: 'drawer' | 'fullscreen';\n  }"
+          },
+          {
+            "name": "dsToolChange",
+            "detail": "{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }"
           }
         ],
         "slots": [],
         "exports": {
-          "customElement": "ds-select-multi",
-          "react": "DsSelectMulti",
-          "angular": "DsSelectMulti"
+          "customElement": "ds-panel-tools",
+          "react": "DsPanelTools",
+          "angular": "DsPanelTools"
         }
       },
       "dependencies": [
         "@ds-mo/ui",
-        "@ds-mo/tokens",
-        "@ds-mo/icons"
+        "@ds-mo/tokens"
       ],
       "registryDependencies": [
         "button-unfilled",
-        "checkbox",
-        "empty-state",
-        "icon",
-        "loader",
-        "text",
+        "panel-tool-header",
         "tooltip"
       ]
     },
     {
-      "name": "shell-app",
-      "title": "ShellApp",
-      "description": "The single required workspace root for standard authenticated application pages, coordinating primary and secondary navigation, tools chrome, responsive composition, content geometry, shared styling, and shell behavior.",
+      "name": "radio",
+      "title": "Radio",
+      "description": "Form-associated one-of-many radio selection set with vertical or horizontal layout, three densities, per-option inactive state, and roving keyboard focus.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
         "distribution": "npm",
-        "storybook": "https://zainadeel.github.io/compomo/?path=/story/shell-app",
-        "source": "src/wc/components/ShellApp/ShellApp.tsx",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/radio",
+        "source": "src/wc/components/Radio/Radio.tsx",
         "intentStatus": "complete",
         "intent": {
-          "audience": "specialized",
+          "audience": "general",
           "status": "stable",
-          "summary": "The single required workspace root for standard authenticated application pages, coordinating primary and secondary navigation, tools chrome, responsive composition, content geometry, shared styling, and shell behavior.",
+          "summary": "Form-associated one-of-many radio selection set with vertical or horizontal layout, three densities, per-option inactive state, and roving keyboard focus.",
           "useWhen": [
-            "Building any standard authenticated product or workspace page with CompoMo.",
-            "PanelNav, BarNav, ShellTools, mobile navigation, page content, shared chrome, responsive behavior, and shell shortcuts must be composed as one application frame.",
-            "Future application templates need the supported base-page composition boundary."
+            "A user must select exactly one visible option from a small set.",
+            "All available choices should remain visible for comparison.",
+            "A form needs one selected string value with native validation, reset, or external form association."
           ],
           "avoidWhen": [
-            "Building authentication, onboarding, public, marketing, print, error, or intentionally focused full-screen experiences that require a different layout.",
-            "Another ShellApp already exists in the page; applications must render exactly one and must never nest ShellApps.",
-            "Building content inside an existing ShellApp; render the page content rather than another shell."
+            "A user may select zero or multiple independent choices.",
+            "A binary setting applies immediately rather than selecting from a set.",
+            "The option list is too long or space-constrained to remain visible."
           ],
-          "commonlyComposedWith": [
-            "component:ds-panel-nav",
-            "component:ds-bar-nav",
-            "component:ds-panel-tools",
-            "component:ds-shell-tools",
-            "component:ds-shell-mobile-nav",
-            "component:ds-shell-mobile-section-nav",
-            "component:ds-shell-mobile-bar",
-            "component:ds-shell-page",
-            "component:ds-swatch-picker"
+          "alternatives": [
+            {
+              "when": "A user may select zero or multiple independent choices.",
+              "component": "component:ds-checkbox",
+              "reason": "Checkbox communicates independent selection rather than one-of-many choice."
+            },
+            {
+              "when": "A binary setting applies immediately.",
+              "component": "component:ds-switch",
+              "reason": "Switch communicates an immediately applied on/off setting."
+            },
+            {
+              "when": "The option list is long or the available space is constrained.",
+              "component": "component:ds-select",
+              "reason": "Select keeps a larger one-of-many choice set compact."
+            }
           ],
-          "patterns": [
-            "pattern:application-shell",
-            "pattern:shell-page"
+          "commonlyComposedWith": [
+            "component:ds-field",
+            "component:ds-text"
           ],
           "accessibility": [
-            "Keep primary destinations in PanelNav and secondary route sections in BarNav.",
-            "Ensure the default content region contains the page's single main landmark.",
-            "Keep PanelNav, BarNav, and PanelTools-compatible chrome available in desktop and tablet compositions and the persistent mobile bar available below 768px.",
-            "Do not override browser keyboard chords when enabling shell shortcuts.",
-            "Require Search and Help as the minimum PanelTools actions and provide accessible labels for every tool.",
-            "Preserve focus and accessible names across navigation, collapse, overflow, and responsive presentation changes."
+            "The host exposes radiogroup semantics and requires an accessible group name from aria-label or aria-labelledby.",
+            "Each visible option exposes radio semantics, its checked state, its label text, and any inactive state.",
+            "Arrow keys move and select through active options; Home and End select the first and last active options; Space and Enter select the focused option.",
+            "Roving tabindex keeps one active option in the tab order, preferring the selected option."
           ],
           "states": [
-            "Render exactly one ShellApp as the workspace root and never nest it.",
-            "PanelNav, BarNav, and ShellTools are the responsive shell regions; ShellTools contains at least Search and Help even when no additional product tools apply.",
-            "The application router owns the current route, authorization filtering, Dashboard or Settings context, destination collections, section collections, and localized content labels.",
-            "ShellApp propagates navStyle and resolved responsive mode and coordinates layout, gradient alignment, transitions, metrics, shortcuts, and mobile-stage visibility.",
-            "The application controls mobileDestination and mobileNavigationOpen and keeps router state independent from global tool-surface changes.",
-            "Set gradientPreset to the single resolved global chrome preference: neutral by default, none for solid chrome, or cool, neutral, warm, and fresh for token-based washes.",
-            "The application owns gradient preference persistence, cross-tab synchronization, and server or account precedence; ShellApp owns rendering the resolved preset across authenticated routes.",
-            "Dashboard represents day-to-day operational work while Settings represents administrative and configuration work; route state selects the context.",
-            "Update PanelNav groups, BarNav tabs and heading, navStyle, basePath, and currentUrl atomically from one resolved route state.",
-            "BarNav remains present: it shows route-section tabs when available and the active PanelNav destination label as heading otherwise.",
-            "Render one ShellPage as the default-slot child for each standard routed page; ShellApp owns the content scroller while ShellPage owns page header stickiness and content inset.",
-            "The application filters unauthorized destinations, sections, and tools before passing them into shell components."
+            "Unchecked circles use a tertiary-foreground inset stroke: 1.25px at md, 1px at sm, and 0.75px at xs.",
+            "Selected circles remove the border, use a brand fill, and draw a centered on-bold foreground dot sized 8px at md, 6px at sm, and 4px at xs.",
+            "Sizes are md with a 16px circle in a 20px placement, sm with a 12px circle in a 16px placement, and xs with an 8px circle in a 12px placement.",
+            "The initial value is restored by native form reset; the selected value submits under name and a required set is invalid until one active option is selected."
           ],
           "responsiveBehavior": [
-            "ShellApp owns the fixed system breakpoints and resolves desktop at 1200px and wider, tablet from 768px through 1199px, and mobile below 768px.",
-            "On desktop, PanelNav defaults expanded, permits user collapse or expansion, and respects the locally persisted desktop preference.",
-            "On tablet, ShellApp keeps PanelNav permanently collapsed and prevents user expansion without overwriting the desktop preference.",
-            "On mobile, ShellApp hides and inerts PanelNav and BarNav, uses a solid primary stage, and composes MobileNav, MobileSectionNav, ShellTools, and the persistent five-item MobileBar.",
-            "Mobile global surfaces conceal and inert the routed workspace without unmounting it, preserving nested routes and scroll state.",
-            "Keep PanelNav width, BarNav height, PanelTools chrome, and main-content origin stable except during intentional responsive or collapse transitions.",
-            "The bottom bar remains visible at all route and tool depths in the foundation release."
+            "Choose size from the density of the containing form or settings row.",
+            "Prefer vertical layout when labels may wrap or horizontal space is constrained; horizontal layout is appropriate for short labels in a small set."
           ],
           "frameworkCaveats": {
             "customElements": [
-              "Assign complex navigation and tool collections as JavaScript properties on the slotted components.",
-              "Stamp route-derived nav-style before components connect when deterministic first paint is required."
+              "Assign options as a JavaScript property, set value as a property for application state updates, and listen for dsChange.",
+              "Use the form attribute on the host when associating a radio set rendered outside its owning form."
             ],
             "react": [
-              "Use generated wrappers and preserve native slot names for desktop navigation, responsive tools, mobile navigation, and main content.",
-              "Resolve all shell inputs from one router state before rendering the composition."
+              "Use DsRadio, pass options as an array, and handle onDsChange; value is mutable and updates after user selection."
             ],
             "angular": [
-              "Use generated standalone adapters and preserve slot attributes in templates.",
-              "Bind complex inputs as properties and update navigation inputs atomically from one resolved router state.",
-              "Bind both nav-style attributes and properties when deterministic first paint is required."
+              "Use DsRadio with options and value bindings plus dsChange, or import the generated radio value accessor with the component adapter."
             ]
           },
           "references": [
             {
-              "label": "Component guide",
-              "path": "src/wc/components/ShellApp/ShellApp.mdx"
-            },
-            {
-              "label": "Executable Storybook composition",
-              "path": "src/wc/components/ShellApp/ShellApp.stories.ts"
-            },
-            {
-              "label": "Framework integration",
-              "path": "docs/framework-integration.md"
+              "label": "Storybook examples",
+              "path": "src/wc/components/Radio/Radio.stories.ts"
             },
             {
-              "label": "Application shell contract",
-              "path": "agent/patterns/application-shell/pattern.agent.json"
+              "label": "Cross-browser form and accessibility coverage",
+              "path": "tests/e2e/forms.spec.ts"
             }
           ]
         },
         "props": {
-          "gradientPreset": {
-            "type": "ShellGradientPreset",
+          "ariaLabel": {
+            "type": "string | null",
             "required": false
           },
-          "mobileDestination": {
-            "type": "ShellMobileDestination",
+          "ariaLabelledby": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "direction": {
+            "type": "'vertical' | 'horizontal'",
             "required": false
           },
-          "mobileNavigationOpen": {
+          "disabled": {
             "type": "boolean",
             "required": false
           },
-          "navStyle": {
-            "type": "NavChromeStyle",
+          "form": {
+            "type": "string | undefined",
             "required": false
           },
-          "shortcutsEnabled": {
+          "isInactive": {
             "type": "boolean",
             "required": false
-          }
-        },
-        "events": [
+          },
+          "name": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "options": {
+            "type": "RadioOption[]",
+            "required": false
+          },
+          "required": {
+            "type": "boolean",
+            "required": false
+          },
+          "requiredMessage": {
+            "type": "string",
+            "required": false
+          },
+          "size": {
+            "type": "RadioSize",
+            "required": false
+          },
+          "value": {
+            "type": "string",
+            "required": false
+          }
+        },
+        "events": [
           {
-            "name": "dsResponsiveModeChange",
-            "detail": "{ mode: ShellResponsiveMode }"
+            "name": "dsChange",
+            "detail": "string"
           }
         ],
         "slots": [],
         "exports": {
-          "customElement": "ds-shell-app",
-          "react": "DsShellApp",
-          "angular": "DsShellApp"
+          "customElement": "ds-radio",
+          "react": "DsRadio",
+          "angular": "DsRadio"
         }
       },
       "dependencies": [
         "@ds-mo/ui",
         "@ds-mo/tokens"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "text"
+      ]
     },
     {
-      "name": "shell-gradient-picker",
-      "title": "ShellGradientPicker",
-      "description": "Deprecated compatibility wrapper that maps the fixed ShellApp wash presets into SwatchPicker.",
+      "name": "scroll-overlay",
+      "title": "ScrollOverlay",
+      "description": "Generic scroll owner for content that moves behind a persistent footer action or composer with an always-active alpha fade.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
         "distribution": "npm",
-        "storybook": "https://zainadeel.github.io/compomo/?path=/story/shell-gradient-picker",
-        "source": "src/wc/components/ShellGradientPicker/ShellGradientPicker.tsx",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/scroll-overlay",
+        "source": "src/wc/components/ScrollOverlay/ScrollOverlay.tsx",
         "intentStatus": "complete",
         "intent": {
-          "audience": "specialized",
-          "status": "deprecated",
-          "replacedBy": "component:ds-swatch-picker",
-          "replacementReason": "SwatchPicker now owns the same accessible interaction with a generic option model that supports both flat colors and gradients.",
-          "summary": "Deprecated compatibility wrapper that maps the fixed ShellApp wash presets into SwatchPicker.",
+          "audience": "general",
+          "status": "experimental",
+          "summary": "Generic scroll owner for content that moves behind a persistent footer action or composer with an always-active alpha fade.",
           "useWhen": [
-            "Adding the Appearance or Theme section to the application's user or account menu.",
-            "Users must choose the global ShellApp chrome treatment from none, cool, neutral, warm, or fresh."
+            "A bounded region owns scrolling while footer actions remain overlaid and continuously visible.",
+            "The final content must clear a live-height footer while earlier content can move behind it."
           ],
           "avoidWhen": [
-            "Choosing semantic intent, page background, chart, content, or brand colors.",
-            "Building an arbitrary gradient editor or allowing custom gradient values.",
-            "A picker already exists for the application; provide exactly one canonical preference location.",
-            "Rendering an individual swatch outside the complete picker."
-          ],
-          "alternatives": [
-            {
-              "when": "The user is selecting the application light, dark, or system color mode.",
-              "component": "component:ds-menu",
-              "reason": "Color mode is a separate appearance preference and should use ordinary menu selection rows."
-            }
+            "The footer belongs in normal document flow rather than overlaying content.",
+            "Another component already owns scrolling and cannot delegate its scrollport to this component."
           ],
           "commonlyComposedWith": [
-            "component:ds-shell-app",
-            "component:ds-menu"
-          ],
-          "patterns": [
-            "pattern:application-shell"
+            "component:ds-button-filled",
+            "component:ds-message-composer"
           ],
           "accessibility": [
-            "Provide a localized groupLabel that describes the shell appearance choice.",
-            "Treat the presets as one radio group with one Tab stop; Arrow keys, Home, and End move and select within the group.",
-            "Keep the visible compact swatches and their accessible preset names; do not rely on color alone for assistive technology."
+            "Provide scrollLabel when the scrollport needs its own named, keyboard-focusable region.",
+            "Keep footer actions keyboard accessible and explicitly named; the fade is decorative and never intercepts pointer input."
           ],
           "states": [
-            "Neutral is the default preset; none renders solid shell chrome without a wash.",
-            "Cool, neutral, warm, and fresh use design tokens and automatically adapt to the active light or dark color theme.",
-            "Apply dsChange immediately to ShellApp.gradientPreset and keep the containing account menu open.",
-            "The application owns local persistence, cross-tab synchronization, and server or account preference precedence; the picker owns only selection UI and events.",
-            "Treat the fixed preset union as the only supported values and do not construct custom gradients."
+            "The alpha mask remains active at every scroll position and moves in content coordinates so it stays pinned behind the footer without masking native scrollbars.",
+            "The component measures the complete overlay for end clearance, measures its visible child for fade depth, and begins the fade 8px before that visible content.",
+            "An md 32px footer action with 8px bottom inset therefore produces a 48px fade; variable-height composers produce a correspondingly taller measured fade."
           ],
           "responsiveBehavior": [
-            "Keep the compact picker in the user or account appearance menu on supported desktop and tablet shell compositions.",
-            "The future mobile account surface may present the same preference differently."
+            "The scrollport and overlay fill the available width and height; the owner supplies responsive sizing and overlay insets."
           ],
           "frameworkCaveats": {
             "customElements": [
-              "Listen for dsChange, resolve application preference precedence, and assign the result to the single ShellApp gradientPreset property."
+              "Place scrollable content in the default slot and one footer wrapper in the overlay slot; use dsScroll only when the application needs position data."
             ],
             "react": [
-              "Use the generated wrapper and handle onDsChange without closing the containing account menu."
+              "Use DsScrollOverlay with ordinary children plus an element carrying slot=\"overlay\"."
             ],
             "angular": [
-              "Bind value to the resolved preference and handle dsChange to update application state."
+              "Import DsScrollOverlay and project the persistent footer wrapper with slot=\"overlay\"."
             ]
           },
           "references": [
             {
-              "label": "Replacement stories",
-              "path": "src/wc/components/SwatchPicker/SwatchPicker.stories.ts"
-            },
-            {
-              "label": "ShellApp gradient contract",
-              "path": "src/wc/components/ShellApp/ShellApp.mdx"
-            },
-            {
-              "label": "Application shell composition",
-              "path": "agent/patterns/application-shell/pattern.agent.json"
+              "label": "Storybook examples",
+              "path": "src/wc/components/ScrollOverlay/ScrollOverlay.stories.ts"
             }
           ]
         },
         "props": {
-          "groupLabel": {
-            "type": "string",
-            "required": false
-          },
-          "value": {
-            "type": "ShellGradientPreset",
+          "scrollLabel": {
+            "type": "string | undefined",
             "required": false
           }
         },
         "events": [
           {
-            "name": "dsChange",
-            "detail": "ShellGradientPreset"
+            "name": "dsScroll",
+            "detail": "ScrollOverlayScrollDetail"
           }
         ],
         "slots": [],
         "exports": {
-          "customElement": "ds-shell-gradient-picker",
-          "react": "DsShellGradientPicker",
-          "angular": "DsShellGradientPicker"
+          "customElement": "ds-scroll-overlay",
+          "react": "DsScrollOverlay",
+          "angular": "DsScrollOverlay"
         }
       },
       "dependencies": [
         "@ds-mo/ui",
         "@ds-mo/tokens"
       ],
-      "registryDependencies": [
-        "swatch-picker"
-      ]
+      "registryDependencies": []
     },
     {
-      "name": "shell-gradient-swatch",
-      "title": "ShellGradientSwatch",
-      "description": "Deprecated internal compatibility component for one legacy ShellApp gradient swatch.",
+      "name": "select",
+      "title": "Select",
+      "description": "Form-associated single-value select with listbox semantics, local search, rich flat options, grouped sections, loading, clearing, and surface-aware trigger chrome.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
         "distribution": "npm",
-        "storybook": "https://zainadeel.github.io/compomo/?path=/story/shell-gradient-swatch",
-        "source": "src/wc/components/ShellGradientSwatch/ShellGradientSwatch.tsx",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/select",
+        "source": "src/wc/components/Select/Select.tsx",
         "intentStatus": "complete",
         "intent": {
-          "audience": "internal",
-          "status": "deprecated",
-          "replacedBy": "component:ds-swatch-picker",
-          "replacementReason": "SwatchPicker renders its option buttons internally so an individually published radio swatch is no longer needed.",
-          "summary": "Deprecated internal compatibility component for one legacy ShellApp gradient swatch.",
+          "audience": "general",
+          "status": "stable",
+          "summary": "Form-associated single-value select with listbox semantics, local search, rich flat options, grouped sections, loading, clearing, and surface-aware trigger chrome.",
           "useWhen": [
-            "Maintaining or extending ShellGradientPicker inside CompoMo."
+            "The user must choose one value from a finite set.",
+            "The option set benefits from local search, subtext, prefix icons, grouping, or disabled choices.",
+            "The choice set has more than roughly 20 options, comes from a user-managed listing, or represents a large domain such as addresses where search materially improves retrieval.",
+            "The selected value must participate in native, Angular, or React form state."
           ],
           "avoidWhen": [
-            "Building application UI directly; use ShellGradientPicker instead.",
-            "Selecting semantic, brand, chart, page, or arbitrary gradient colors.",
-            "Creating a partial or custom set of shell gradient choices."
+            "Several values may be selected at once.",
+            "The rows perform commands rather than choosing a form value.",
+            "The choices form a hierarchy with expandable parents."
           ],
           "alternatives": [
             {
-              "when": "An application needs the supported global shell appearance control.",
-              "component": "component:ds-swatch-picker",
-              "reason": "SwatchPicker provides the complete radio-group semantics, keyboard behavior, generic previews, and selection event."
+              "when": "Several independent values may be selected.",
+              "component": "component:ds-select-multi",
+              "reason": "SelectMulti owns array values, multi-selection semantics, and count presentation."
+            },
+            {
+              "when": "The popup contains commands or state-changing actions.",
+              "component": "component:ds-menu",
+              "reason": "Menu uses action-menu roles and command-focused keyboard behavior."
+            },
+            {
+              "when": "A small set of choices should remain visible.",
+              "component": "component:ds-radio",
+              "reason": "Prefer Radio for roughly two to five mutually exclusive choices when the available space allows all choices to remain visible."
             }
           ],
           "commonlyComposedWith": [
-            "component:ds-swatch-picker"
+            "component:ds-text",
+            "component:ds-icon",
+            "component:ds-empty-state",
+            "component:ds-loader"
           ],
           "accessibility": [
-            "Keep radio semantics, aria-checked state, and a preset-specific accessible name on the internal button.",
-            "Let ShellGradientPicker manage the roving tab stop and group keyboard navigation.",
-            "Do not expose an unlabeled color-only choice."
+            "In forms, provide a persistent visible external field label; placeholder text is guidance and must not be the field's only label. In a compact filter bar, the trigger's visible text may supply the accessible name.",
+            "The trigger uses combobox semantics and the popup uses listbox and option semantics; do not replace them with menu roles.",
+            "Disabled options remain visible, expose aria-disabled, and are skipped by keyboard navigation and typeahead.",
+            "Keyboard navigation keeps the aria-activedescendant option scrolled into the visible listbox viewport.",
+            "Selected options rely on active fill and foreground treatment without a redundant trailing check icon.",
+            "Local search moves focus into the search field while preserving the active option through aria-activedescendant.",
+            "Use errorMessage with error so the trigger is described by the rendered alert."
           ],
           "states": [
-            "Preset determines the token-based preview; selected determines radio state and selected visuals.",
-            "The selected swatch owns the radio group's single tab stop while ShellGradientPicker coordinates selection and focus movement.",
-            "isInactive disables interaction but does not remove the accessible name."
+            "Value is controlled through the mutable value property; dsChange reports user selection and clearing.",
+            "Required Selects begin without an automatic selection and require the user to make an explicit choice; do not preselect the first option merely to satisfy validity.",
+            "When allowClear is enabled, the clear affordance appears only after a value exists. Clearing is valid for optional and required fields; a required field becomes invalid until the user selects again.",
+            "Clearing emits dsChange with an empty string and dsClear, keeps the popup open, and restores useful focus.",
+            "Loading keeps the trigger visible, replaces its prefix icon, marks the control busy, and makes selection interaction temporarily unavailable without presenting the control as inactive.",
+            "The trigger label stays left-aligned at every width. The default size is md in both forms and filter bars; smaller sizes require an explicit density need.",
+            "Use option icons only when they help users differentiate choices. Icons render only when every option in the complete list provides one; mixed icon data falls back to the text-only row layout.",
+            "Create sections only for categories that are meaningful to customers, not merely to break a long list into arbitrary chunks.",
+            "When any option supplies subtext, every row uses the same subtext structure and missing values render an em dash. Subtext should disambiguate or add decision-helpful information.",
+            "Option labels and the selected trigger label stay on one line and truncate when constrained. Option subtext may wrap to at most two lines.",
+            "The optional prefix icon and chevron always use the parent surface's secondary foreground color, including when a selected value promotes the label to primary.",
+            "The shared popup search control stays md at every trigger size, using body-medium text, a 20px icon, and the same internal spacing as a borderless Select trigger. Its container uses menu-item padding on every side and owns a 1px bottom divider that becomes a 1.5px bold-brand stroke while search has focus. Search placeholder text is secondary at rest and quaternary while focused because it becomes decorative once the editable field is active.",
+            "When search contains text, the shared control shows a rounded sm icon-only ButtonUnfilled with the CrossCircle icon and no border. It clears the local term, stays hidden for an empty term, and returns focus to search.",
+            "The shared clear footer mirrors the search region's sizing: menu-item padding surrounds an md-height borderless row, and the Clear label uses the same row and label insets as option text. The outer footer owns a 1px top divider.",
+            "An empty filtered list composes the message-only body variant of EmptyState. Keep the default neutral no-results message unless localized product guidance makes the outcome clearer.",
+            "Enable searchable for more than roughly 20 options, user-managed listings, large domains such as addresses, or sets users cannot efficiently scan. Local matching includes option labels, subtext, and section headings; the owner resolves remote data before assigning options.",
+            "Validation timing belongs to the form owner and may be immediate or deferred until blur or submit; the Select exposes validity and error presentation without imposing that policy.",
+            "The error trigger uses a 1.5px bold-negative inset stroke so invalid state remains distinguishable from the normal 1px border without changing control geometry.",
+            "An initially empty option set is not an expected Select use case. The no-results state describes a search with no matches, not a source with no choices.",
+            "Use options for a flat list or sections for grouped choices; when sections are present they take precedence.",
+            "The background prop describes the actual parent surface and uses the same surface set as ButtonUnfilled."
           ],
           "responsiveBehavior": [
-            "Preserve the fixed compact swatch geometry and let ShellGradientPicker own layout."
+            "Use width fill for form fields and width hug for compact filter bars. Override those defaults only when the owning layout has a clear constraint.",
+            "The popup matches the trigger minimum width, may grow for content, and clamps to the viewport.",
+            "Long option collections scroll inside the popup; virtualization and remote search are not part of this component."
           ],
           "frameworkCaveats": {
             "customElements": [
-              "Do not instantiate this internal primitive in consuming applications."
+              "Assign options and sections through JavaScript properties because arrays and objects cannot be represented safely as attributes."
             ],
             "react": [
-              "Use DsShellGradientPicker rather than the generated swatch wrapper."
+              "Pass options or sections as wrapper props and handle onDsChange, onDsClear, and onDsOpenChange."
             ],
             "angular": [
-              "Use DsShellGradientPicker rather than importing DsShellGradientSwatch."
+              "Import DsSelect and SelectValueAccessor when integrating with Angular Forms; bind options and sections as properties."
             ]
           },
           "references": [
             {
-              "label": "Parent picker",
-              "path": "src/wc/components/ShellGradientPicker/ShellGradientPicker.tsx"
+              "label": "Storybook examples",
+              "path": "src/wc/components/Select/Select.stories.ts"
+            },
+            {
+              "label": "Selection patterns",
+              "path": "src/docs/SelectionPatterns.mdx"
             }
           ]
         },
         "props": {
-          "ariaLabel": {
-            "type": "string | null",
+          "activeFill": {
+            "type": "boolean",
             "required": false
           },
-          "isInactive": {
+          "allowClear": {
             "type": "boolean",
             "required": false
           },
-          "preset": {
-            "type": "ShellGradientPreset",
+          "ariaDescribedby": {
+            "type": "string | undefined",
             "required": false
           },
-          "selected": {
-            "type": "boolean",
+          "ariaLabel": {
+            "type": "string | null",
             "required": false
-          }
+          },
+          "ariaLabelledby": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "background": {
+            "type": "SelectBackground | undefined",
+            "required": false
+          },
+          "clearLabel": {
+            "type": "string",
+            "required": false
+          },
+          "disabled": {
+            "type": "boolean",
+            "required": false
+          },
+          "error": {
+            "type": "boolean",
+            "required": false
+          },
+          "errorMessage": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "hasBorder": {
+            "type": "boolean",
+            "required": false
+          },
+          "icon": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "inputId": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "isInactive": {
+            "type": "boolean",
+            "required": false
+          },
+          "isLoading": {
+            "type": "boolean",
+            "required": false
+          },
+          "loadingLabel": {
+            "type": "string",
+            "required": false
+          },
+          "name": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "noResultsText": {
+            "type": "string",
+            "required": false
+          },
+          "open": {
+            "type": "boolean",
+            "required": false
+          },
+          "options": {
+            "type": "SelectOption[]",
+            "required": false
+          },
+          "placeholder": {
+            "type": "string",
+            "required": false
+          },
+          "required": {
+            "type": "boolean",
+            "required": false
+          },
+          "requiredMessage": {
+            "type": "string",
+            "required": false
+          },
+          "searchPlaceholder": {
+            "type": "string",
+            "required": false
+          },
+          "searchable": {
+            "type": "boolean",
+            "required": false
+          },
+          "sections": {
+            "type": "SelectSection[]",
+            "required": false
+          },
+          "size": {
+            "type": "SelectSize",
+            "required": false
+          },
+          "value": {
+            "type": "string",
+            "required": false
+          },
+          "width": {
+            "type": "SelectWidth",
+            "required": false
+          }
         },
         "events": [
           {
-            "name": "dsSelect",
-            "detail": "ShellGradientPreset"
+            "name": "dsChange",
+            "detail": "string"
+          },
+          {
+            "name": "dsClear",
+            "detail": "void"
+          },
+          {
+            "name": "dsOpenChange",
+            "detail": "boolean"
           }
         ],
         "slots": [],
         "exports": {
-          "customElement": "ds-shell-gradient-swatch",
-          "react": "DsShellGradientSwatch",
-          "angular": "DsShellGradientSwatch"
+          "customElement": "ds-select",
+          "react": "DsSelect",
+          "angular": "DsSelect"
         }
       },
       "dependencies": [
         "@ds-mo/ui",
-        "@ds-mo/tokens"
+        "@ds-mo/tokens",
+        "@ds-mo/icons"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "button-unfilled",
+        "empty-state",
+        "icon",
+        "loader",
+        "text",
+        "tooltip"
+      ]
     },
     {
-      "name": "shell-mobile-bar",
-      "title": "ShellMobileBar",
-      "description": "Persistent mobile shell navigation for Menu, the router-derived current area, Search, Agents, and Inbox.",
+      "name": "select-multi",
+      "title": "SelectMulti",
+      "description": "Form-associated multi-value select with a persistent trigger label, inline selected count, local search, rich flat options, grouped sections, loading, and clear-all behavior.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
         "distribution": "npm",
-        "storybook": "https://zainadeel.github.io/compomo/?path=/story/shell-mobile-bar",
-        "source": "src/wc/components/ShellMobileBar/ShellMobileBar.tsx",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/select-multi",
+        "source": "src/wc/components/SelectMulti/SelectMulti.tsx",
         "intentStatus": "complete",
         "intent": {
-          "audience": "specialized",
-          "status": "experimental",
-          "summary": "Persistent mobile shell navigation for Menu, the router-derived current area, Search, Agents, and Inbox.",
+          "audience": "general",
+          "status": "stable",
+          "summary": "Form-associated multi-value select with a persistent trigger label, inline selected count, local search, rich flat options, grouped sections, loading, and clear-all behavior.",
           "useWhen": [
-            "ShellApp is rendering its dedicated below-768px application composition."
+            "The user may choose several independent values from one finite set.",
+            "A compact trigger should summarize selection with the field label and a count.",
+            "The option set benefits from local search, subtext, grouping, or disabled choices.",
+            "The choice set has more than roughly 20 options, comes from a user-managed listing, or represents a large domain where search materially improves retrieval."
           ],
           "avoidWhen": [
-            "Rendering desktop or tablet shell chrome.",
-            "An arbitrary set of product tabs is required."
+            "Exactly one value may be selected.",
+            "Selected values must remain individually removable as persistent tags outside the popup.",
+            "The choices form a hierarchy with cascading parent selection.",
+            "The customer task benefits more from keeping every choice and checkbox directly visible; choose between SelectMulti and a visible checkbox list from the use-case context rather than a fixed option-count threshold."
           ],
-          "commonlyComposedWith": [
-            "component:ds-shell-app"
+          "alternatives": [
+            {
+              "when": "Exactly one value may be selected.",
+              "component": "component:ds-select",
+              "reason": "Select owns scalar form value and single-select listbox behavior."
+            },
+            {
+              "when": "The popup contains actions rather than values.",
+              "component": "component:ds-menu",
+              "reason": "Menu uses command semantics and closes according to action-menu expectations."
+            }
           ],
-          "patterns": [
-            "pattern:application-shell"
+          "commonlyComposedWith": [
+            "component:ds-text",
+            "component:ds-checkbox",
+            "component:ds-empty-state",
+            "component:ds-loader"
           ],
           "accessibility": [
-            "Every item keeps a visible label and accessible name.",
-            "Only the active destination exposes aria-current; Menu exposes its controlled pane through aria-expanded."
+            "In forms, provide a persistent visible external field label. In a compact filter bar, the trigger's visible persistent label and count may supply the accessible name.",
+            "The popup is a listbox with aria-multiselectable and every option exposes its independent aria-selected state.",
+            "Disabled options expose aria-disabled and are skipped by keyboard navigation and typeahead.",
+            "Keyboard navigation keeps the aria-activedescendant option scrolled into the visible listbox viewport.",
+            "Each row uses a medium-size presentation-only ds-checkbox indicator; multi-select option rows never add a prefix icon alongside it, and the option remains the sole selection semantic and interaction target.",
+            "The trigger keeps its field label visible and appends the current selected count; an explicit aria-label or aria-labelledby remains the authoritative accessible name when supplied.",
+            "Use errorMessage with error so the trigger is described by the rendered alert."
           ],
           "states": [
-            "The item order is fixed: Menu, current area, Search, Agents, Inbox.",
-            "Reselecting an active destination does not reset its nested state."
+            "Values is a controlled JavaScript array; dsChange emits a new array after each user toggle.",
+            "Required SelectMulti controls begin without an automatic selection and require the user to make an explicit choice.",
+            "Selecting an option keeps the popup open so additional values can be toggled.",
+            "The trigger label stays left-aligned at every width; every option row uses the same leading medium Checkbox indicator. The default control size is md in both forms and filter bars.",
+            "The selected count always follows the persistent label as plain text separated by a centered dot, including for one selection, and counts every selected value even when search or grouping hides it. Never replace the count with selected option names.",
+            "Create sections only for categories that are meaningful to customers, not merely to break a long list into arbitrary chunks.",
+            "When any option supplies subtext, every row uses the same subtext structure and missing values render an em dash. Subtext should disambiguate or add decision-helpful information.",
+            "Option labels stay on one line and truncate when constrained. Option subtext may wrap to at most two lines.",
+            "The optional prefix icon and chevron always use the parent surface's secondary foreground color, including when selection promotes the label and count to primary.",
+            "The shared popup search control stays md at every trigger size, using body-medium text, a 20px icon, and the same internal spacing as a borderless Select trigger. Its container uses menu-item padding on every side and owns a 1px bottom divider that becomes a 1.5px bold-brand stroke while search has focus. Search placeholder text is secondary at rest and quaternary while focused because it becomes decorative once the editable field is active.",
+            "When search contains text, the shared control shows a rounded sm icon-only ButtonUnfilled with the Cross icon and no border. It clears the local term, stays hidden for an empty term, and returns focus to search.",
+            "The shared summary-and-clear footer mirrors the search region's sizing: menu-item padding surrounds an md-height borderless row, and both texts use the same row and label insets as option text. The outer footer owns a 1px top divider.",
+            "An empty filtered list composes the message-only body variant of EmptyState. Keep the default neutral no-results message unless localized product guidance makes the outcome clearer.",
+            "Enable searchable for more than roughly 20 options, user-managed listings, large domains such as addresses, or sets users cannot efficiently scan. Local matching includes option labels, subtext, and section headings; the owner resolves remote data before assigning options.",
+            "When allowClear is enabled, clear-all appears only after at least one value exists. Clearing is valid for optional and required fields; a required field becomes invalid until the user selects again.",
+            "Clear-all emits an empty dsChange and dsClear while preserving useful popup or search focus.",
+            "Loading keeps the trigger visible, marks the control busy, and makes selection interaction temporarily unavailable without presenting the control as inactive.",
+            "SelectMulti has no maximum-selection behavior; every available non-inactive option may be selected.",
+            "Validation timing belongs to the form owner and may be immediate or deferred until blur or submit; the component exposes validity and error presentation without imposing that policy.",
+            "The error trigger uses a 1.5px bold-negative inset stroke so invalid state remains distinguishable from the normal 1px border without changing control geometry.",
+            "An initially empty option set is not an expected SelectMulti use case. The no-results state describes a search with no matches, not a source with no choices.",
+            "Native form submission emits one entry per selected value under the component name.",
+            "Use options for a flat list or sections for grouped choices. Multi-select option contracts intentionally exclude icons because the leading checkbox owns that row zone; hierarchical parent selection is deferred."
           ],
           "responsiveBehavior": [
-            "Render only below the mobile breakpoint and preserve safe-area clearance."
+            "Use width fill for form fields and width hug for compact filter bars; the persistent trigger label avoids variable-width selected labels.",
+            "The popup matches the trigger minimum width, may grow for content, and clamps to the viewport.",
+            "Long option collections scroll inside the popup; virtualization and remote search are not part of this version."
           ],
+          "frameworkCaveats": {
+            "customElements": [
+              "Assign values, options, and sections through JavaScript properties; array values cannot be represented safely as attributes."
+            ],
+            "react": [
+              "Pass values, options, and sections as wrapper props and handle onDsChange, onDsClear, and onDsOpenChange."
+            ],
+            "angular": [
+              "Import DsSelectMulti and SelectMultiValueAccessor when integrating with Angular Forms."
+            ]
+          },
           "references": [
             {
-              "label": "Storybook",
-              "path": "src/wc/components/ShellMobileBar/ShellMobileBar.stories.ts"
+              "label": "Storybook examples",
+              "path": "src/wc/components/SelectMulti/SelectMulti.stories.ts"
+            },
+            {
+              "label": "Selection patterns",
+              "path": "src/docs/SelectionPatterns.mdx"
             }
           ]
         },
         "props": {
-          "activeDestination": {
-            "type": "ShellMobileDestination",
+          "activeFill": {
+            "type": "boolean",
             "required": false
           },
-          "agentsDot": {
+          "allowClear": {
             "type": "boolean",
             "required": false
           },
-          "agentsLabel": {
+          "ariaDescribedby": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "ariaLabel": {
+            "type": "string | null",
+            "required": false
+          },
+          "ariaLabelledby": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "background": {
+            "type": "SelectMultiBackground | undefined",
+            "required": false
+          },
+          "clearLabel": {
+            "type": "string",
+            "required": false
+          },
+          "disabled": {
+            "type": "boolean",
+            "required": false
+          },
+          "error": {
+            "type": "boolean",
+            "required": false
+          },
+          "errorMessage": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "hasBorder": {
+            "type": "boolean",
+            "required": false
+          },
+          "icon": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "inputId": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "isInactive": {
+            "type": "boolean",
+            "required": false
+          },
+          "isLoading": {
+            "type": "boolean",
+            "required": false
+          },
+          "loadingLabel": {
+            "type": "string",
+            "required": false
+          },
+          "name": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "noResultsText": {
+            "type": "string",
+            "required": false
+          },
+          "open": {
+            "type": "boolean",
+            "required": false
+          },
+          "options": {
+            "type": "SelectMultiOption[]",
+            "required": false
+          },
+          "placeholder": {
+            "type": "string",
+            "required": false
+          },
+          "required": {
+            "type": "boolean",
+            "required": false
+          },
+          "requiredMessage": {
+            "type": "string",
+            "required": false
+          },
+          "searchPlaceholder": {
+            "type": "string",
+            "required": false
+          },
+          "searchable": {
+            "type": "boolean",
+            "required": false
+          },
+          "sections": {
+            "type": "SelectMultiSection[]",
+            "required": false
+          },
+          "selectedLabel": {
             "type": "string",
             "required": false
           },
-          "currentArea": {
-            "type": "PanelNavItem",
+          "size": {
+            "type": "SelectMultiSize",
+            "required": false
+          },
+          "values": {
+            "type": "string[]",
+            "required": false
+          },
+          "width": {
+            "type": "SelectMultiWidth",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsChange",
+            "detail": "string[]"
+          },
+          {
+            "name": "dsClear",
+            "detail": "void"
+          },
+          {
+            "name": "dsOpenChange",
+            "detail": "boolean"
+          }
+        ],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-select-multi",
+          "react": "DsSelectMulti",
+          "angular": "DsSelectMulti"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens",
+        "@ds-mo/icons"
+      ],
+      "registryDependencies": [
+        "button-unfilled",
+        "checkbox",
+        "empty-state",
+        "icon",
+        "loader",
+        "text",
+        "tooltip"
+      ]
+    },
+    {
+      "name": "shell-app",
+      "title": "ShellApp",
+      "description": "The single required workspace root for standard authenticated application pages, coordinating primary and secondary navigation, tools chrome, responsive composition, content geometry, shared styling, and shell behavior.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/shell-app",
+        "source": "src/wc/components/ShellApp/ShellApp.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "specialized",
+          "status": "stable",
+          "summary": "The single required workspace root for standard authenticated application pages, coordinating primary and secondary navigation, tools chrome, responsive composition, content geometry, shared styling, and shell behavior.",
+          "useWhen": [
+            "Building any standard authenticated product or workspace page with CompoMo.",
+            "PanelNav, BarNav, ShellTools, mobile navigation, page content, shared chrome, responsive behavior, and shell shortcuts must be composed as one application frame.",
+            "Future application templates need the supported base-page composition boundary."
+          ],
+          "avoidWhen": [
+            "Building authentication, onboarding, public, marketing, print, error, or intentionally focused full-screen experiences that require a different layout.",
+            "Another ShellApp already exists in the page; applications must render exactly one and must never nest ShellApps.",
+            "Building content inside an existing ShellApp; render the page content rather than another shell."
+          ],
+          "commonlyComposedWith": [
+            "component:ds-panel-nav",
+            "component:ds-bar-nav",
+            "component:ds-panel-tools",
+            "component:ds-shell-tools",
+            "component:ds-mobile-sheet-nav",
+            "component:ds-mobile-header",
+            "component:ds-mobile-bar-nav",
+            "component:ds-shell-page",
+            "component:ds-swatch-picker"
+          ],
+          "patterns": [
+            "pattern:application-shell",
+            "pattern:shell-page"
+          ],
+          "accessibility": [
+            "Keep primary destinations in PanelNav and secondary route sections in BarNav.",
+            "Ensure the default content region contains the page's single main landmark.",
+            "Keep PanelNav, BarNav, and PanelTools-compatible chrome available in desktop and tablet compositions and the persistent mobile bar available below 768px.",
+            "Do not override browser keyboard chords when enabling shell shortcuts.",
+            "Require Search and Help as the minimum PanelTools actions and provide accessible labels for every tool.",
+            "Preserve focus and accessible names across navigation, collapse, overflow, and responsive presentation changes."
+          ],
+          "states": [
+            "Render exactly one ShellApp as the workspace root and never nest it.",
+            "PanelNav, BarNav, and ShellTools are the responsive shell regions; ShellTools contains at least Search and Help even when no additional product tools apply.",
+            "The application router owns the current route, authorization filtering, Dashboard or Settings context, destination collections, section collections, and localized content labels.",
+            "ShellApp propagates navStyle and resolved responsive mode and coordinates layout, gradient alignment, transitions, metrics, shortcuts, and mobile-stage visibility.",
+            "The application controls mobileDestination and mobileSheetNavOpen and keeps router state independent from global tool-surface changes.",
+            "Set gradientPreset to the single resolved global chrome preference: neutral by default, none for solid chrome, or cool, neutral, warm, and fresh for token-based washes.",
+            "The application owns gradient preference persistence, cross-tab synchronization, and server or account precedence; ShellApp owns rendering the resolved preset across authenticated routes.",
+            "Dashboard represents day-to-day operational work while Settings represents administrative and configuration work; route state selects the context.",
+            "Update PanelNav groups, BarNav tabs and heading, navStyle, basePath, and currentUrl atomically from one resolved route state.",
+            "BarNav remains present: it shows route-section tabs when available and the active PanelNav destination label as heading otherwise.",
+            "Render one ShellPage as the default-slot child for each standard routed page; ShellApp owns the content scroller while ShellPage owns page header stickiness and content inset.",
+            "The application filters unauthorized destinations, sections, and tools before passing them into shell components."
+          ],
+          "responsiveBehavior": [
+            "ShellApp owns the fixed system breakpoints and resolves desktop at 1200px and wider, tablet from 768px through 1199px, and mobile below 768px.",
+            "On desktop, PanelNav defaults expanded, permits user collapse or expansion, and respects the locally persisted desktop preference.",
+            "On tablet, ShellApp keeps PanelNav permanently collapsed and prevents user expansion without overwriting the desktop preference.",
+            "On mobile, ShellApp hides and inerts PanelNav and BarNav, uses a solid primary stage, and composes routed ShellPage MobileHeader presentations, MobileSheetNav, ShellTools, and the persistent five-item MobileBarNav.",
+            "Mobile global surfaces conceal and inert the routed workspace without unmounting it, preserving nested routes and scroll state.",
+            "Keep PanelNav width, BarNav height, PanelTools chrome, and main-content origin stable except during intentional responsive or collapse transitions.",
+            "The bottom bar remains visible at all route and tool depths in the foundation release."
+          ],
+          "frameworkCaveats": {
+            "customElements": [
+              "Assign complex navigation and tool collections as JavaScript properties on the slotted components.",
+              "Stamp route-derived nav-style before components connect when deterministic first paint is required."
+            ],
+            "react": [
+              "Use generated wrappers and preserve native slot names for desktop navigation, responsive tools, mobile navigation, and main content.",
+              "Resolve all shell inputs from one router state before rendering the composition."
+            ],
+            "angular": [
+              "Use generated standalone adapters and preserve slot attributes in templates.",
+              "Bind complex inputs as properties and update navigation inputs atomically from one resolved router state.",
+              "Bind both nav-style attributes and properties when deterministic first paint is required."
+            ]
+          },
+          "references": [
+            {
+              "label": "Component guide",
+              "path": "src/wc/components/ShellApp/ShellApp.mdx"
+            },
+            {
+              "label": "Executable Storybook composition",
+              "path": "src/wc/components/ShellApp/ShellApp.stories.ts"
+            },
+            {
+              "label": "Framework integration",
+              "path": "docs/framework-integration.md"
+            },
+            {
+              "label": "Application shell contract",
+              "path": "agent/patterns/application-shell/pattern.agent.json"
+            }
+          ]
+        },
+        "props": {
+          "gradientPreset": {
+            "type": "ShellGradientPreset",
+            "required": false
+          },
+          "mobileDestination": {
+            "type": "MobileDestination",
             "required": false
           },
-          "inboxDot": {
+          "mobileSheetNavOpen": {
             "type": "boolean",
             "required": false
           },
-          "inboxLabel": {
-            "type": "string",
-            "required": false
-          },
-          "menuLabel": {
-            "type": "string",
-            "required": false
-          },
-          "navigationExpanded": {
-            "type": "boolean",
+          "navStyle": {
+            "type": "NavChromeStyle",
             "required": false
           },
-          "searchDot": {
+          "shortcutsEnabled": {
             "type": "boolean",
             "required": false
-          },
-          "searchLabel": {
-            "type": "string",
-            "required": false
           }
         },
         "events": [
           {
-            "name": "dsDestinationChange",
-            "detail": "ShellMobileBarDestinationDetail"
-          },
-          {
-            "name": "dsNavigationToggle",
-            "detail": "boolean"
+            "name": "dsResponsiveModeChange",
+            "detail": "{ mode: ShellResponsiveMode }"
           }
         ],
         "slots": [],
         "exports": {
-          "customElement": "ds-shell-mobile-bar",
-          "react": "DsShellMobileBar",
-          "angular": "DsShellMobileBar"
+          "customElement": "ds-shell-app",
+          "react": "DsShellApp",
+          "angular": "DsShellApp"
         }
       },
       "dependencies": [
         "@ds-mo/ui",
-        "@ds-mo/tokens",
-        "@ds-mo/icons"
+        "@ds-mo/tokens"
       ],
-      "registryDependencies": [
-        "icon",
-        "text"
-      ]
+      "registryDependencies": []
     },
     {
-      "name": "shell-mobile-nav",
-      "title": "ShellMobileNav",
-      "description": "Full-height mobile primary navigation pane with local Dashboard and Settings browsing.",
+      "name": "shell-gradient-picker",
+      "title": "ShellGradientPicker",
+      "description": "Deprecated compatibility wrapper that maps the fixed ShellApp wash presets into SwatchPicker.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
         "distribution": "npm",
-        "storybook": "https://zainadeel.github.io/compomo/?path=/story/shell-mobile-nav",
-        "source": "src/wc/components/ShellMobileNav/ShellMobileNav.tsx",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/shell-gradient-picker",
+        "source": "src/wc/components/ShellGradientPicker/ShellGradientPicker.tsx",
         "intentStatus": "complete",
         "intent": {
           "audience": "specialized",
-          "status": "experimental",
-          "summary": "Full-height mobile primary navigation pane with local Dashboard and Settings browsing.",
+          "status": "deprecated",
+          "replacedBy": "component:ds-swatch-picker",
+          "replacementReason": "SwatchPicker now owns the same accessible interaction with a generic option model that supports both flat colors and gradients.",
+          "summary": "Deprecated compatibility wrapper that maps the fixed ShellApp wash presets into SwatchPicker.",
           "useWhen": [
-            "The mobile ShellApp Menu control needs to expose the complete primary navigation collection."
+            "Adding the Appearance or Theme section to the application's user or account menu.",
+            "Users must choose the global ShellApp chrome treatment from none, cool, neutral, warm, or fresh."
           ],
           "avoidWhen": [
-            "Rendering desktop PanelNav.",
-            "Switching local page content."
+            "Choosing semantic intent, page background, chart, content, or brand colors.",
+            "Building an arbitrary gradient editor or allowing custom gradient values.",
+            "A picker already exists for the application; provide exactly one canonical preference location.",
+            "Rendering an individual swatch outside the complete picker."
+          ],
+          "alternatives": [
+            {
+              "when": "The user is selecting the application light, dark, or system color mode.",
+              "component": "component:ds-menu",
+              "reason": "Color mode is a separate appearance preference and should use ordinary menu selection rows."
+            }
           ],
           "commonlyComposedWith": [
             "component:ds-shell-app",
-            "component:ds-shell-mobile-bar"
+            "component:ds-menu"
           ],
           "patterns": [
             "pattern:application-shell"
           ],
           "accessibility": [
-            "The pane is a named navigation landmark and retains visible labels for every destination.",
-            "Escape requests dismissal and opening moves focus to the selected or first available area."
+            "Provide a localized groupLabel that describes the shell appearance choice.",
+            "Treat the presets as one radio group with one Tab stop; Arrow keys, Home, and End move and select within the group.",
+            "Keep the visible compact swatches and their accessible preset names; do not rely on color alone for assistive technology."
           ],
           "states": [
-            "Dashboard and Settings change only the collection being browsed.",
-            "Area, Help, and Account events express intent while the application owns navigation and product behavior."
+            "Neutral is the default preset; none renders solid shell chrome without a wash.",
+            "Cool, neutral, warm, and fresh use design tokens and automatically adapt to the active light or dark color theme.",
+            "Apply dsChange immediately to ShellApp.gradientPreset and keep the containing account menu open.",
+            "The application owns local persistence, cross-tab synchronization, and server or account preference precedence; the picker owns only selection UI and events.",
+            "Treat the fixed preset union as the only supported values and do not construct custom gradients."
           ],
           "responsiveBehavior": [
-            "The pane fills the mobile content stage while the bottom bar remains available."
+            "Keep the compact picker in the user or account appearance menu on supported desktop and tablet shell compositions.",
+            "The future mobile account surface may present the same preference differently."
           ],
+          "frameworkCaveats": {
+            "customElements": [
+              "Listen for dsChange, resolve application preference precedence, and assign the result to the single ShellApp gradientPreset property."
+            ],
+            "react": [
+              "Use the generated wrapper and handle onDsChange without closing the containing account menu."
+            ],
+            "angular": [
+              "Bind value to the resolved preference and handle dsChange to update application state."
+            ]
+          },
           "references": [
             {
-              "label": "Storybook",
-              "path": "src/wc/components/ShellMobileNav/ShellMobileNav.stories.ts"
+              "label": "Replacement stories",
+              "path": "src/wc/components/SwatchPicker/SwatchPicker.stories.ts"
+            },
+            {
+              "label": "ShellApp gradient contract",
+              "path": "src/wc/components/ShellApp/ShellApp.mdx"
+            },
+            {
+              "label": "Application shell composition",
+              "path": "agent/patterns/application-shell/pattern.agent.json"
             }
           ]
         },
         "props": {
-          "accountLabel": {
-            "type": "string",
-            "required": false
-          },
-          "browseContext": {
-            "type": "NavChromeStyle",
-            "required": false
-          },
-          "currentUrl": {
-            "type": "string",
-            "required": false
-          },
-          "dashboardGroups": {
-            "type": "PanelNavGroup[]",
-            "required": false
-          },
-          "dashboardLabel": {
-            "type": "string",
-            "required": false
-          },
-          "heading": {
-            "type": "string",
-            "required": false
-          },
-          "helpLabel": {
-            "type": "string",
-            "required": false
-          },
-          "navigationLabel": {
+          "groupLabel": {
             "type": "string",
             "required": false
           },
-          "open": {
-            "type": "boolean",
-            "required": false
-          },
-          "settingsGroups": {
-            "type": "PanelNavGroup[]",
-            "required": false
-          },
-          "settingsLabel": {
-            "type": "string",
+          "value": {
+            "type": "ShellGradientPreset",
             "required": false
           }
         },
         "events": [
           {
-            "name": "dsAreaSelect",
-            "detail": "string"
-          },
-          {
-            "name": "dsAuxiliarySelect",
-            "detail": "ShellMobileNavAuxiliaryDetail"
-          },
-          {
-            "name": "dsBrowseContextChange",
-            "detail": "NavChromeStyle"
-          },
-          {
-            "name": "dsClose",
-            "detail": "void"
+            "name": "dsChange",
+            "detail": "ShellGradientPreset"
           }
         ],
         "slots": [],
         "exports": {
-          "customElement": "ds-shell-mobile-nav",
-          "react": "DsShellMobileNav",
-          "angular": "DsShellMobileNav"
+          "customElement": "ds-shell-gradient-picker",
+          "react": "DsShellGradientPicker",
+          "angular": "DsShellGradientPicker"
         }
       },
       "dependencies": [
         "@ds-mo/ui",
-        "@ds-mo/tokens",
-        "@ds-mo/icons"
+        "@ds-mo/tokens"
       ],
       "registryDependencies": [
-        "icon",
-        "tab-group",
-        "text"
+        "swatch-picker"
       ]
     },
     {
-      "name": "shell-mobile-section-nav",
-      "title": "ShellMobileSectionNav",
-      "description": "Horizontally scrollable mobile route navigation corresponding to the active area's desktop BarNav.",
+      "name": "shell-gradient-swatch",
+      "title": "ShellGradientSwatch",
+      "description": "Deprecated internal compatibility component for one legacy ShellApp gradient swatch.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
         "distribution": "npm",
-        "storybook": "https://zainadeel.github.io/compomo/?path=/story/shell-mobile-section-nav",
-        "source": "src/wc/components/ShellMobileSectionNav/ShellMobileSectionNav.tsx",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/shell-gradient-swatch",
+        "source": "src/wc/components/ShellGradientSwatch/ShellGradientSwatch.tsx",
         "intentStatus": "complete",
         "intent": {
-          "audience": "specialized",
-          "status": "experimental",
-          "summary": "Horizontally scrollable mobile route navigation corresponding to the active area's desktop BarNav.",
+          "audience": "internal",
+          "status": "deprecated",
+          "replacedBy": "component:ds-swatch-picker",
+          "replacementReason": "SwatchPicker renders its option buttons internally so an individually published radio swatch is no longer needed.",
+          "summary": "Deprecated internal compatibility component for one legacy ShellApp gradient swatch.",
           "useWhen": [
-            "ShellApp is rendering the below-768px routed workspace and the active area has peer route sections."
+            "Maintaining or extending ShellGradientPicker inside CompoMo."
           ],
           "avoidWhen": [
-            "Choices switch local content without navigation; use TabGroup.",
-            "Rendering the desktop or tablet secondary navigation; use BarNav."
+            "Building application UI directly; use ShellGradientPicker instead.",
+            "Selecting semantic, brand, chart, page, or arbitrary gradient colors.",
+            "Creating a partial or custom set of shell gradient choices."
           ],
           "alternatives": [
             {
-              "when": "The choices switch local content without changing routes.",
-              "component": "component:ds-tab-group",
-              "reason": "TabGroup owns local view selection."
+              "when": "An application needs the supported global shell appearance control.",
+              "component": "component:ds-swatch-picker",
+              "reason": "SwatchPicker provides the complete radio-group semantics, keyboard behavior, generic previews, and selection event."
             }
           ],
           "commonlyComposedWith": [
-            "component:ds-shell-app",
-            "component:ds-shell-mobile-bar",
-            "component:ds-bar-nav"
-          ],
-          "patterns": [
-            "pattern:application-shell"
+            "component:ds-swatch-picker"
           ],
           "accessibility": [
-            "The row is a named navigation landmark and the selected section exposes aria-current.",
-            "Disabled route sections remain visible but cannot emit navigation intent."
+            "Keep radio semantics, aria-checked state, and a preset-specific accessible name on the internal button.",
+            "Let ShellGradientPicker manage the roving tab stop and group keyboard navigation.",
+            "Do not expose an unlabeled color-only choice."
           ],
           "states": [
-            "The host router owns the current URL and handles dsTabChange.",
-            "Detail routes that do not match a section show the active-area heading."
+            "Preset determines the token-based preview; selected determines radio state and selected visuals.",
+            "The selected swatch owns the radio group's single tab stop while ShellGradientPicker coordinates selection and focus movement.",
+            "isInactive disables interaction but does not remove the accessible name."
           ],
           "responsiveBehavior": [
-            "The row scrolls horizontally without wrapping and centers the selected section when selection changes."
+            "Preserve the fixed compact swatch geometry and let ShellGradientPicker own layout."
           ],
           "frameworkCaveats": {
             "customElements": [
-              "Assign tabs as a JavaScript property and update currentUrl and basePath with router state."
+              "Do not instantiate this internal primitive in consuming applications."
             ],
             "react": [
-              "Pass the same BarNavTab array used by the desktop BarNav through the generated React wrapper."
+              "Use DsShellGradientPicker rather than the generated swatch wrapper."
             ],
             "angular": [
-              "Import the generated standalone adapter and bind tabs as a property."
+              "Use DsShellGradientPicker rather than importing DsShellGradientSwatch."
             ]
           },
           "references": [
             {
-              "label": "Storybook",
-              "path": "src/wc/components/ShellMobileSectionNav/ShellMobileSectionNav.stories.ts"
+              "label": "Parent picker",
+              "path": "src/wc/components/ShellGradientPicker/ShellGradientPicker.tsx"
             }
           ]
         },
         "props": {
-          "basePath": {
-            "type": "string",
-            "required": false
-          },
-          "currentUrl": {
-            "type": "string",
-            "required": false
-          },
-          "heading": {
-            "type": "string | undefined",
-            "required": false
-          },
-          "navigationLabel": {
-            "type": "string",
+          "ariaLabel": {
+            "type": "string | null",
             "required": false
           },
-          "tabs": {
-            "type": "BarNavTab[]",
+          "isInactive": {
+            "type": "boolean",
             "required": false
           },
-          "tabsJson": {
-            "type": "string",
+          "preset": {
+            "type": "ShellGradientPreset",
             "required": false
           },
-          "value": {
-            "type": "string",
+          "selected": {
+            "type": "boolean",
             "required": false
           }
         },
         "events": [
           {
-            "name": "dsTabChange",
-            "detail": "string"
+            "name": "dsSelect",
+            "detail": "ShellGradientPreset"
           }
         ],
         "slots": [],
         "exports": {
-          "customElement": "ds-shell-mobile-section-nav",
-          "react": "DsShellMobileSectionNav",
-          "angular": "DsShellMobileSectionNav"
+          "customElement": "ds-shell-gradient-swatch",
+          "react": "DsShellGradientSwatch",
+          "angular": "DsShellGradientSwatch"
         }
       },
       "dependencies": [
         "@ds-mo/ui",
         "@ds-mo/tokens"
       ],
-      "registryDependencies": [
-        "text"
-      ]
+      "registryDependencies": []
     },
     {
       "name": "shell-page",
@@ -7485,7 +7595,7 @@
           ],
           "accessibility": [
             "ShellPage exposes the routed page as the main landmark; render exactly one active ShellPage inside ShellApp.",
-            "Provide exactly one BarTitle or BarWorkflow through the header slot so the page has one h1.",
+            "Provide one BarTitle or BarWorkflow through the desktop header slot and one MobileHeader through mobile-header when the page participates in the mobile shell.",
             "Keep loading, empty, validation, error, progress, success, and failure communication in the default product-content slot.",
             "Responsive variant changes preserve the same heading, controls, accessible names, and keyboard focus targets."
           ],
@@ -7494,12 +7604,13 @@
             "headerPresentation=auto selects the matching header variant from headerCapacity and scroll position.",
             "expanded, compact, and constrained are explicit overrides for exceptional layouts and deterministic examples.",
             "contentInset=default supplies standard page gutters; none permits maps, canvases, and other full-bleed content.",
-            "The required header slot accepts one BarTitle or BarWorkflow. The default slot owns router output and all page product content."
+            "The header slot accepts one desktop BarTitle or BarWorkflow; mobile-header accepts the corresponding MobileHeader presentation. The default slot owns router output and all page product content."
           ],
           "responsiveBehavior": [
             "The owning application shell resolves viewport and persistent-chrome state into the explicit headerCapacity prop; ShellPage never guesses the cause of reduced width from its own rendered size.",
             "Roomy capacity expands at the top and compacts after scroll; compact capacity stays compact; constrained capacity uses the constrained action layout.",
             "A ShellPage-managed BarTitle remains concealed until headerCapacity is available and its rendered variant matches the resolved presentation, preventing a default-variant flash during route activation.",
+            "responsiveMode=mobile hides and inerts the desktop header, exposes mobile-header, and disables desktop scroll-compaction geometry.",
             "Update headerCapacity synchronously with shell layout state so opening tools or crossing application breakpoints cannot briefly render the wrong presentation.",
             "On roomy pages, the expanded header scrolls upward until its title and action row reaches the compact row position, then snaps variants without moving that shared visual anchor.",
             "Scroll compaction preserves the expanded page flow offset so content never jumps beneath the sticky header.",
@@ -7508,15 +7619,15 @@
           ],
           "frameworkCaveats": {
             "customElements": [
-              "Import ShellPage with BarTitle or BarWorkflow, place one header in slot=header, and render route content as default children.",
+              "Import ShellPage with BarTitle or BarWorkflow in slot=header and MobileHeader in slot=mobile-header, then render route content as default children.",
               "Do not set BarTitle.variant while ShellPage owns headerPresentation."
             ],
             "react": [
-              "Render DsBarTitle or DsBarWorkflow with slot=header inside DsShellPage and keep routed content as the remaining children.",
+              "Render the desktop header with slot=header and DsMobileHeader with slot=mobile-header inside DsShellPage.",
               "Use contentInset none only for deliberately full-bleed page products."
             ],
             "angular": [
-              "Import the generated standalone DsShellPage adapter with DsBarTitle or DsBarWorkflow, preserve slot=header, and place router-outlet in the ShellPage default slot.",
+              "Import the generated standalone DsShellPage adapter with the desktop header and DsMobileHeader, preserve both header slots, and place router-outlet in the default slot.",
               "Do not add another overflow auto wrapper around the routed page."
             ]
           },
@@ -7547,6 +7658,10 @@
           "headerPresentation": {
             "type": "ShellPageHeaderPresentation",
             "required": false
+          },
+          "responsiveMode": {
+            "type": "ShellResponsiveMode",
+            "required": false
           }
         },
         "events": [],
@@ -7595,7 +7710,9 @@
           "commonlyComposedWith": [
             "component:ds-shell-app",
             "component:ds-panel-tool-header",
-            "component:ds-shell-mobile-bar"
+            "component:ds-mobile-header",
+            "component:ds-mobile-section-switcher",
+            "component:ds-mobile-bar-nav"
           ],
           "patterns": [
             "pattern:application-shell"
@@ -7603,7 +7720,7 @@
           "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.",
-            "Inbox uses TabGroup semantics for Messages, Stacks, and Activity."
+            "Inbox uses the MobileSectionSwitcher popup trigger for Messages, Stacks, and Activity and never relies on a gesture-only interaction."
           ],
           "states": [
             "The application owns open and activeTool and replaces headers when tool depth changes.",
@@ -7612,7 +7729,7 @@
           ],
           "responsiveBehavior": [
             "Desktop and tablet compose PanelTools-compatible rail and drawer chrome.",
-            "Mobile renders the active tool across the shell stage and groups available inbox tools in a segmented control."
+            "Mobile renders one centered MobileHeader for every tool and presents Messages, Stacks, and Activity directly as peer section titles without an additional Inbox heading."
           ],
           "frameworkCaveats": {
             "customElements": [
@@ -7724,9 +7841,10 @@
         "@ds-mo/tokens"
       ],
       "registryDependencies": [
-        "panel-tool-header",
+        "button-unfilled",
+        "mobile-header",
         "panel-tools",
-        "tab-group"
+        "tooltip"
       ]
     },
     {