@ds-mo/ui 12.2.0 → 12.3.0

package/README.md

@@ -76,6 +76,12 @@ instruction telling agents to retrieve the applicable pattern before composing
 multiple design-system components; connecting the MCP makes recipes available,
 while the instruction makes their use consistent.
 
+Registry-oriented tools return both readable Markdown and schema-validated
+`structuredContent`. Compatible MCP clients can consume the generated component
+API, authored design intent, dependencies, and executable pattern recipes as JSON
+without reparsing prose; text content remains available for older clients. Every
+tool is annotated as read-only, idempotent, and closed-world.
+
 ## Components
 
 All tags are `ds-*` custom elements. Grouped by role (see Storybook for props and stories):
@@ -93,11 +99,11 @@ All tags are `ds-*` custom elements. Grouped by role (see Storybook for props an
 - **Modal**, **Menu**, **Tooltip**, **Select**, **Toast**
 
 ### Navigation
-- **TabGroup** (horizontal local views), **PanelSubNav** (vertical local views)
+- **Breadcrumb** (hierarchical page ancestors), **TabGroup** (horizontal local views), **PanelSubNav** (vertical local views)
 - **ShellApp**, **ShellPage**, **PanelNav**, **BarNav**, **BarTitle**, **BarWorkflow**, **PanelTools**
 
 ### Status & layout
-- **EmptyState**, **Loader**, **Skeleton**, **CardSetting**, **CardDataVizDonut**
+- **EmptyState**, **Loader**, **Skeleton**, **CardSetting**, **CardDataVizDonut**, **CardDataVizLine**
 
 ## Token dependency
 

package/dist/.build-stamp

@@ -1 +1 @@
-1784783184986
+1784842126322

package/dist/agent-patterns.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "12.2.0",
+  "packageVersion": "12.3.0",
   "kind": "patterns",
   "entries": [
     {
@@ -443,7 +443,7 @@
         "Keep route loading, error, empty, success, and validation communication in the ShellPage content slot."
       ],
       "responsiveBehavior": [
-        "Let ShellPage select expanded, compact, and constrained variants from its own capacity and scroll position.",
+        "Resolve viewport and persistent shell chrome into ShellPage.headerCapacity; ShellPage uses that explicit capacity plus scroll position to select expanded, compact, or constrained presentation.",
         "Set primaryAction.collapse to never only when an ordinary routed-page action must preserve visible hierarchy; create and edit workflows use BarWorkflow instead.",
         "Use contentInset none only for deliberately full-bleed products such as maps and canvases.",
         "Place TabGroup inside ShellPage content for inner-page panels; route-level sections remain in BarTitle."
@@ -460,7 +460,7 @@
                 {
                   "path": "page.html",
                   "language": "html",
-                  "content": "<ds-shell-app>\n  <ds-shell-page>\n    <ds-bar-title\n      id=\"drivers-header\"\n      slot=\"header\"\n      heading=\"Drivers\"\n      value=\"active\"\n    ></ds-bar-title>\n    <section aria-label=\"Driver results\">Page content</section>\n  </ds-shell-page>\n</ds-shell-app>"
+                  "content": "<ds-shell-app>\n  <ds-shell-page header-capacity=\"roomy\">\n    <ds-bar-title\n      id=\"drivers-header\"\n      slot=\"header\"\n      heading=\"Drivers\"\n      value=\"active\"\n    ></ds-bar-title>\n    <section aria-label=\"Driver results\">Page content</section>\n  </ds-shell-page>\n</ds-shell-app>"
                 },
                 {
                   "path": "page.ts",
@@ -490,7 +490,7 @@
                 {
                   "path": "DriversPage.tsx",
                   "language": "tsx",
-                  "content": "import { useState } from 'react'\nimport { DsShellApp, DsBarTitle, DsShellPage } from '@ds-mo/ui/react'\n\nconst sections = [\n  { id: 'active', label: 'Active' },\n  { id: 'inactive', label: 'Inactive' },\n]\n\nexport function DriversPage() {\n  const [value, setValue] = useState('active')\n  return (\n    <DsShellApp>\n      <DsShellPage>\n        <DsBarTitle\n          slot=\"header\"\n          heading=\"Drivers\"\n          sections={sections}\n          value={value}\n          primaryAction={{ id: 'create', label: 'Create driver' }}\n          onDsSectionChange={event => setValue(event.detail)}\n        />\n        <section aria-label=\"Driver results\">Page content</section>\n      </DsShellPage>\n    </DsShellApp>\n  )\n}"
+                  "content": "import { useState } from 'react'\nimport { DsShellApp, DsBarTitle, DsShellPage } from '@ds-mo/ui/react'\n\nconst sections = [\n  { id: 'active', label: 'Active' },\n  { id: 'inactive', label: 'Inactive' },\n]\n\nexport function DriversPage() {\n  const [value, setValue] = useState('active')\n  return (\n    <DsShellApp>\n      <DsShellPage headerCapacity=\"roomy\">\n        <DsBarTitle\n          slot=\"header\"\n          heading=\"Drivers\"\n          sections={sections}\n          value={value}\n          primaryAction={{ id: 'create', label: 'Create driver' }}\n          onDsSectionChange={event => setValue(event.detail)}\n        />\n        <section aria-label=\"Driver results\">Page content</section>\n      </DsShellPage>\n    </DsShellApp>\n  )\n}"
                 }
               ],
               "notes": [
@@ -515,12 +515,12 @@
                 {
                   "path": "drivers-page.component.html",
                   "language": "html",
-                  "content": "<ds-shell-page>\n  <ds-bar-title\n    slot=\"header\"\n    heading=\"Drivers\"\n    [sections]=\"sections\"\n    [value]=\"selectedSection\"\n    [primaryAction]=\"primaryAction\"\n    (dsSectionChange)=\"selectSection($event.detail)\"\n  ></ds-bar-title>\n  <router-outlet />\n</ds-shell-page>"
+                  "content": "<ds-shell-page [headerCapacity]=\"headerCapacity\">\n  <ds-bar-title\n    slot=\"header\"\n    heading=\"Drivers\"\n    [sections]=\"sections\"\n    [value]=\"selectedSection\"\n    [primaryAction]=\"primaryAction\"\n    (dsSectionChange)=\"selectSection($event.detail)\"\n  ></ds-bar-title>\n  <router-outlet />\n</ds-shell-page>"
                 },
                 {
                   "path": "drivers-page.component.ts",
                   "language": "typescript",
-                  "content": "import { Component } from '@angular/core'\nimport { RouterOutlet } from '@angular/router'\nimport { DsBarTitle } from '@ds-mo/ui/angular/ds-bar-title'\nimport { DsShellPage } from '@ds-mo/ui/angular/ds-shell-page'\n\n@Component({\n  standalone: true,\n  imports: [DsBarTitle, DsShellPage, RouterOutlet],\n  templateUrl: './drivers-page.component.html',\n})\nexport class DriversPageComponent {\n  readonly sections = [\n    { id: 'active', label: 'Active' },\n    { id: 'inactive', label: 'Inactive' },\n  ]\n  readonly primaryAction = { id: 'create', label: 'Create driver' }\n  selectedSection = 'active'\n\n  selectSection(id: string) {\n    this.selectedSection = id\n    // Navigate to the matching child route.\n  }\n}"
+                  "content": "import { Component } from '@angular/core'\nimport { RouterOutlet } from '@angular/router'\nimport type { ShellPageCapacity } from '@ds-mo/ui'\nimport { DsBarTitle } from '@ds-mo/ui/angular/ds-bar-title'\nimport { DsShellPage } from '@ds-mo/ui/angular/ds-shell-page'\n\n@Component({\n  standalone: true,\n  imports: [DsBarTitle, DsShellPage, RouterOutlet],\n  templateUrl: './drivers-page.component.html',\n})\nexport class DriversPageComponent {\n  readonly headerCapacity: ShellPageCapacity = 'roomy'\n  readonly sections = [\n    { id: 'active', label: 'Active' },\n    { id: 'inactive', label: 'Inactive' },\n  ]\n  readonly primaryAction = { id: 'create', label: 'Create driver' }\n  selectedSection = 'active'\n\n  selectSection(id: string) {\n    this.selectedSection = id\n    // Navigate to the matching child route.\n  }\n}"
                 }
               ],
               "notes": [