@duro-app/cli 5.4.0 → 5.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/cli",
-  "version": "5.4.0",
+  "version": "5.6.0",
   "type": "module",
   "license": "MIT",
   "description": "Machine-queryable docs for the Duro design system: components, props, recipes, tokens and rules as CLI output, JSON, or an MCP server.",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@modelcontextprotocol/sdk": ">=1.0.0",
-    "@duro-app/ui": "^5.4.0"
+    "@duro-app/ui": "^5.6.0"
   },
   "peerDependenciesMeta": {
     "@duro-app/ui": {
@@ -60,9 +60,9 @@
     "@types/node": "^24.0.0",
     "ts-morph": "^26.0.0",
     "typescript": "^5.7.0",
-    "@duro-app/eslint-plugin": "^5.4.0",
-    "@duro-app/ui": "^5.4.0",
-    "@duro-app/tokens": "^5.4.0"
+    "@duro-app/eslint-plugin": "^5.6.0",
+    "@duro-app/tokens": "^5.6.0",
+    "@duro-app/ui": "^5.6.0"
   },
   "scripts": {
     "registry": "node scripts/build-registry.mjs",

package/registry.json

@@ -273,6 +273,93 @@
       ],
       "sourcePath": "packages/ui/src/components/Badge/Badge.tsx"
     },
+    "Breadcrumb": {
+      "importPath": "@duro-app/ui",
+      "kind": "compound",
+      "meta": {
+        "anatomy": {
+          "required": [
+            "Root",
+            "Item"
+          ]
+        },
+        "description": "Where the current page sits in the hierarchy: a labelled nav landmark with an ordered list of links, outermost first. An Item is either a link (href, optional onNavigate) or the current page (current: text with aria-current=\"page\"), never both — the types refuse the mix. The › separators are aria-hidden. Links take href and an optional onNavigate(href, event) for a client router (plain clicks only). Compound component — Root is required.",
+        "example": "<Breadcrumb.Root aria-label=\"Breadcrumb\">\n  <Breadcrumb.Item href=\"/docs\" onNavigate={go}>Docs</Breadcrumb.Item>\n  <Breadcrumb.Item href=\"/docs/architecture\" onNavigate={go}>Architecture</Breadcrumb.Item>\n  <Breadcrumb.Item current>AI-ops platform</Breadcrumb.Item>\n</Breadcrumb.Root>\n\n// go = (href, event) => { event.preventDefault(); navigate(href) }",
+        "relatedTo": [
+          {
+            "component": "PageNav",
+            "kind": "contrast",
+            "relationship": "Breadcrumb goes up the hierarchy; PageNav goes along the reading order"
+          },
+          {
+            "component": "admin-detail-page",
+            "kind": "composition",
+            "relationship": "The admin-detail-page recipe heads the record with a Breadcrumb"
+          }
+        ],
+        "whenNotToUse": [
+          "The previous and next pages in reading order — use PageNav",
+          "The sections of the page being read — use TableOfContents",
+          "Primary app navigation — use SideNav"
+        ],
+        "whenToUse": [
+          "A page deep in a hierarchy — docs › section › page, admin › collection › record",
+          "A detail page whose way back to its collection should be one click"
+        ]
+      },
+      "name": "Breadcrumb",
+      "parts": {
+        "Item": {
+          "name": "Item",
+          "props": [
+            {
+              "name": "children",
+              "required": true,
+              "type": "ReactNode"
+            },
+            {
+              "description": "Where the item links to.",
+              "name": "href",
+              "required": false,
+              "type": "string"
+            },
+            {
+              "description": "Client-side navigation: called for a plain primary click (no modifier key). Call `event.preventDefault()`, then your router's navigate.",
+              "name": "onNavigate",
+              "required": false,
+              "type": "OnNavigate"
+            },
+            {
+              "description": "The page the user is on: rendered as text with `aria-current=\"page\"`.",
+              "name": "current",
+              "required": false,
+              "type": "true"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/Breadcrumb/Breadcrumb.tsx"
+        },
+        "Root": {
+          "name": "Root",
+          "props": [
+            {
+              "description": "Names the landmark (\"Breadcrumb\"); required, from your text catalog.",
+              "name": "aria-label",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "description": "`Breadcrumb.Item`s, outermost first.",
+              "name": "children",
+              "required": true,
+              "type": "ReactNode"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/Breadcrumb/Breadcrumb.tsx"
+        }
+      },
+      "props": null,
+      "sourcePath": "packages/ui/src/components/Breadcrumb/Breadcrumb.tsx"
+    },
     "Button": {
       "importPath": "@duro-app/ui",
       "kind": "component",
@@ -2485,7 +2572,15 @@
               "description": "Gap between child elements",
               "name": "gap",
               "required": false,
-              "type": "FieldsetGap"
+              "type": "FieldsetGap",
+              "union": [
+                "xs",
+                "sm",
+                "ms",
+                "md",
+                "lg",
+                "xl"
+              ]
             },
             {
               "name": "children",
@@ -2831,12 +2926,13 @@
         ],
         "whenNotToUse": [
           "Items that should wrap to the next line — use Cluster",
-          "Vertical stacking — use Stack"
+          "Vertical stacking — use Stack",
+          "A breadcrumb trail — use Breadcrumb (a nav landmark with aria-current)"
         ],
         "whenToUse": [
           "Toolbar or button group that must stay on one row",
           "Horizontal alignment of a known, small number of items",
-          "Icon + text pairs, breadcrumbs, action rows"
+          "Icon + text pairs, action rows"
         ]
       },
       "name": "Inline",
@@ -3200,7 +3296,7 @@
       "importPath": "@duro-app/ui",
       "kind": "component",
       "meta": {
-        "description": "Button-styled hyperlink. Renders an <a> tag, not a <button>. Use for navigation, not actions.",
+        "description": "Button-styled hyperlink. Renders an <a> tag, not a <button>. Use for navigation, not actions. onNavigate(href, event) hands a plain primary click to a client router (the app calls event.preventDefault(), then navigates); modified clicks keep the browser default.",
         "example": "<LinkButton href=\"/signup\" variant=\"primary\">\n  Get started\n</LinkButton>\n\n<LinkButton href=\"https://docs.example.com\" target=\"_blank\" variant=\"secondary\">\n  Read the docs\n</LinkButton>",
         "relatedTo": [
           {
@@ -3261,6 +3357,12 @@
           "required": false,
           "type": "string"
         },
+        {
+          "description": "Client-side navigation: called for a plain primary click (no modifier key, no `target`); the browser default runs for every other click. Call `event.preventDefault()`, then your router's navigate.",
+          "name": "onNavigate",
+          "required": false,
+          "type": "OnNavigate"
+        },
         {
           "name": "children",
           "required": true,
@@ -3642,7 +3744,7 @@
             "Item"
           ]
         },
-        "description": "Dropdown action menu. Triggers actions (not value selection). Compound component — Root is required (throws without it). Menu.Trigger renders the button itself: give it the label (text, an Icon), never a Button; an icon-only trigger takes aria-label, and variant=\"ghost\" suits toolbars. The popup is portalled and placed against the trigger (never clipped by a sticky or overflow ancestor), capped at sizes.listMaxH with scrolling, and takes focus on open (WAI-ARIA menu button); Escape closes only the menu, not an enclosing Popover or Dialog.",
+        "description": "Dropdown action menu. Triggers actions (not value selection). Compound component — Root is required (throws without it). Menu.Trigger renders the button itself: give it the label (text, an Icon), never a Button; an icon-only trigger takes aria-label, and variant=\"ghost\" suits toolbars; size=\"small\" matches small Toggles and Buttons (a small ghost trigger is iconButtonSm). The popup is portalled and placed against the trigger (never clipped by a sticky or overflow ancestor), capped at sizes.listMaxH with scrolling, and takes focus on open (WAI-ARIA menu button); Escape closes only the menu, not an enclosing Popover or Dialog.",
         "example": "<Menu.Root>\n  <Menu.Trigger>Actions</Menu.Trigger>\n  <Menu.Popup>\n    <Menu.Item onClick={() => console.log('edit')}>Edit</Menu.Item>\n    <Menu.Item onClick={() => console.log('duplicate')}>Duplicate</Menu.Item>\n    <Menu.Separator />\n    <Menu.LinkItem href=\"/settings\">Settings</Menu.LinkItem>\n  </Menu.Popup>\n</Menu.Root>",
         "relatedTo": [
           {
@@ -3774,6 +3876,17 @@
               "required": false,
               "type": "MenuTriggerVariant"
             },
+            {
+              "default": "'default'",
+              "description": "`small` matches a small Toggle or Button beside it; a small ghost trigger is `iconButtonSm`. Default: `default`.",
+              "name": "size",
+              "required": false,
+              "type": "ControlSize",
+              "union": [
+                "default",
+                "small"
+              ]
+            },
             {
               "name": "ref",
               "required": false,
@@ -3859,6 +3972,124 @@
       ],
       "sourcePath": "packages/diagrams/src/components/Node/Node.tsx"
     },
+    "PageNav": {
+      "importPath": "@duro-app/ui",
+      "kind": "compound",
+      "meta": {
+        "anatomy": {
+          "optional": [
+            "Prev",
+            "Next"
+          ],
+          "required": [
+            "Root"
+          ]
+        },
+        "description": "The previous and next pages in reading order, at the foot of a page: a labelled nav with up to two link cards (a direction label over the page title, both from props). A missing side keeps its slot, so Next stays right-aligned; the cards stack below the xs container width. Links take href and an optional onNavigate(href, event) (plain clicks only). Compound component — Root is required.",
+        "example": "<PageNav.Root aria-label=\"Pages\">\n  <PageNav.Prev href=\"/docs/architecture/clusters\" label=\"Previous\" title=\"Clusters and bootstrap\" onNavigate={go} />\n  <PageNav.Next href=\"/docs/architecture/secrets\" label=\"Next\" title=\"Secrets and Vault\" onNavigate={go} />\n</PageNav.Root>",
+        "relatedTo": [
+          {
+            "component": "Breadcrumb",
+            "kind": "contrast",
+            "relationship": "PageNav goes along the reading order; Breadcrumb goes up the hierarchy"
+          },
+          {
+            "component": "Card",
+            "kind": "contrast",
+            "relationship": "PageNav draws its own link cards; do not wrap a Card in a link to fake a prev/next pair"
+          }
+        ],
+        "whenNotToUse": [
+          "Numbered result pages of a table — use Pagination from @duro-app/ui/table",
+          "Going up the hierarchy — use Breadcrumb"
+        ],
+        "whenToUse": [
+          "Docs or a guide read in order — the foot of each page",
+          "A sequence of steps where each step is its own page"
+        ]
+      },
+      "name": "PageNav",
+      "parts": {
+        "Next": {
+          "name": "Next",
+          "props": [
+            {
+              "name": "href",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "description": "The page's title.",
+              "name": "title",
+              "required": true,
+              "type": "ReactNode"
+            },
+            {
+              "description": "The direction label above the title (\"Previous\", \"Next\"), from your text catalog.",
+              "name": "label",
+              "required": true,
+              "type": "ReactNode"
+            },
+            {
+              "description": "Client-side navigation: called for a plain primary click (no modifier key). Call `event.preventDefault()`, then your router's navigate.",
+              "name": "onNavigate",
+              "required": false,
+              "type": "OnNavigate"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/PageNav/PageNav.tsx"
+        },
+        "Prev": {
+          "name": "Prev",
+          "props": [
+            {
+              "name": "href",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "description": "The page's title.",
+              "name": "title",
+              "required": true,
+              "type": "ReactNode"
+            },
+            {
+              "description": "The direction label above the title (\"Previous\", \"Next\"), from your text catalog.",
+              "name": "label",
+              "required": true,
+              "type": "ReactNode"
+            },
+            {
+              "description": "Client-side navigation: called for a plain primary click (no modifier key). Call `event.preventDefault()`, then your router's navigate.",
+              "name": "onNavigate",
+              "required": false,
+              "type": "OnNavigate"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/PageNav/PageNav.tsx"
+        },
+        "Root": {
+          "name": "Root",
+          "props": [
+            {
+              "description": "Names the landmark (\"Pages\"); required, from your text catalog.",
+              "name": "aria-label",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "description": "A `PageNav.Prev` and/or a `PageNav.Next`.",
+              "name": "children",
+              "required": true,
+              "type": "ReactNode"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/PageNav/PageNav.tsx"
+        }
+      },
+      "props": null,
+      "sourcePath": "packages/ui/src/components/PageNav/PageNav.tsx"
+    },
     "PageShell": {
       "importPath": "@duro-app/ui",
       "kind": "component",
@@ -4053,7 +4284,7 @@
             "Popup"
           ]
         },
-        "description": "Non-modal anchored overlay for small interactive content. Compound component — Root is required (throws without it). Anchored to Popover.Trigger, or to a virtual anchor (a () => DOMRect) when there is no Trigger; call reposition() through a ref when the anchor moves.",
+        "description": "Non-modal anchored overlay for small interactive content. Compound component — Root is required (throws without it). Anchored to Popover.Trigger, or to a virtual anchor (a () => DOMRect) when there is no Trigger; call reposition() through a ref when the anchor moves. Popover.Trigger takes size=\"small\" beside small Toggles. Popover.Popup raised draws it over another floating surface (floatingRaised, popoverRaised in a modal), never over a modal.",
         "example": "const ref = useRef<PopoverHandle>(null)\nconst anchor = () => new DOMRect(point.x, point.y, 0, 0)\n\n<Popover.Root ref={ref} open={open} onOpenChange={setOpen} anchor={anchor} side=\"bottom\" align=\"start\">\n  <Popover.Popup label=\"Edit label\">\n    <Field.Root>\n      <Field.Label>Label</Field.Label>\n      <Input value={label} onChange={(e) => setLabel(e.target.value)} />\n    </Field.Root>\n    <Popover.Close>Done</Popover.Close>\n  </Popover.Popup>\n</Popover.Root>\n// after the anchor moves: ref.current?.reposition()",
         "relatedTo": [
           {
@@ -4102,6 +4333,7 @@
         "whenToUse": [
           "A small form or controls tied to one element that stay open while you work in them",
           "Anchoring to a spot that is not a button (a canvas point, a text selection) with a virtual anchor",
+          "One floating surface over another (a link editor over a selection format bar) — Popover.Popup raised",
           "Holding a Select or Combobox: their portalled list counts as inside the popover, so choosing an item keeps it open; Escape closes an open Select, Combobox or Menu before the popover"
         ]
       },
@@ -4131,6 +4363,12 @@
               "name": "label",
               "required": true,
               "type": "string"
+            },
+            {
+              "description": "Draw over another floating surface: `layers.floatingRaised` outside a modal, `layers.popoverRaised` inside a Dialog or Drawer, instead of `floating` / `popover`. For one floating thing that must cover a sibling one (a link editor over a format bar), never for covering a modal: a Dialog opened later still covers it. A Popover nested inside a raised one is raised too. Default: inherited, else `false`.",
+              "name": "raised",
+              "required": false,
+              "type": "boolean"
             }
           ],
           "sourcePath": "packages/ui/src/components/Popover/Popover.tsx"
@@ -4205,6 +4443,17 @@
               "required": false,
               "type": "string"
             },
+            {
+              "default": "'default'",
+              "description": "`small` matches a small Toggle or Button beside it. Default: `default`.",
+              "name": "size",
+              "required": false,
+              "type": "ControlSize",
+              "union": [
+                "default",
+                "small"
+              ]
+            },
             {
               "description": "The trigger <button>, e.g. to measure it or return focus to it.",
               "name": "ref",
@@ -4457,7 +4706,7 @@
             "Item"
           ]
         },
-        "description": "Dropdown select for choosing one value from a list. Compound component — Root is required (throws without it).",
+        "description": "Dropdown select for choosing one value from a list. Compound component — Root is required (throws without it). Select.Trigger takes size=\"small\" to match small Toggles and Buttons in a toolbar.",
         "example": "<Select.Root name=\"role\" defaultValue=\"viewer\">\n  <Select.Trigger>\n    <Select.Value placeholder=\"Select role\" />\n    <Select.Icon />\n  </Select.Trigger>\n  <Select.Popup>\n    <Select.Item value=\"admin\">Admin</Select.Item>\n    <Select.Item value=\"editor\">Editor</Select.Item>\n    <Select.Item value=\"viewer\">Viewer</Select.Item>\n  </Select.Popup>\n</Select.Root>",
         "relatedTo": [
           {
@@ -4585,6 +4834,17 @@
               "name": "aria-label",
               "required": false,
               "type": "string"
+            },
+            {
+              "default": "'default'",
+              "description": "`small` matches a small Toggle or Button beside it. Default: `default`.",
+              "name": "size",
+              "required": false,
+              "type": "ControlSize",
+              "union": [
+                "default",
+                "small"
+              ]
             }
           ],
           "sourcePath": "packages/ui/src/components/Select/Select.tsx"
@@ -4876,7 +5136,14 @@
         {
           "name": "name",
           "required": true,
-          "type": "StatusIconName"
+          "type": "StatusIconName",
+          "union": [
+            "x-circle",
+            "check-circle",
+            "check-done",
+            "clock",
+            "forbidden"
+          ]
         },
         {
           "default": "'xxl'",
@@ -5333,6 +5600,17 @@
               "name": "rowKey",
               "required": false,
               "type": "(row: Row<TData>) => string"
+            },
+            {
+              "name": "onRowClick",
+              "required": false,
+              "type": "(row: Row<TData>) => void"
+            },
+            {
+              "description": "Accessible name for each clickable row. Required because the row's visible cell content alone is rarely a useful accessible name.",
+              "name": "rowAriaLabel",
+              "required": false,
+              "type": "(row: Row<TData>) => string"
             }
           ],
           "sourcePath": "packages/ui/src/components/Table/FromTanstack.tsx"
@@ -5517,6 +5795,131 @@
       "props": null,
       "sourcePath": "packages/ui/src/table.ts"
     },
+    "TableOfContents": {
+      "importPath": "@duro-app/ui",
+      "kind": "compound",
+      "meta": {
+        "anatomy": {
+          "required": [
+            "Root",
+            "Item"
+          ]
+        },
+        "description": "The \"On this page\" list of a long page's sections: a labelled nav of in-page links (href=\"#id\", level 2 or 3). value is the id of the section being read; that item gets aria-current=\"location\", the nav marker bar and a heavier weight. variant=\"menu\" puts the list behind a disclosure button (aria-expanded) for narrow screens; the disclosure state (open, defaultOpen and its change callback) exists on the menu variant only. No scroll-spy inside: the app computes value. Compound component — Root is required.",
+        "example": "<TableOfContents.Root aria-label=\"On this page\" label=\"On this page\" value={activeId}>\n  <TableOfContents.Item href=\"#components\">The components</TableOfContents.Item>\n  <TableOfContents.Item href=\"#wiring\">Wiring</TableOfContents.Item>\n  <TableOfContents.Item href=\"#webhooks\" level={3}>Webhooks</TableOfContents.Item>\n</TableOfContents.Root>\n\n// narrow screens\n<TableOfContents.Root aria-label=\"On this page\" variant=\"menu\" value={activeId}>\n  …\n</TableOfContents.Root>",
+        "relatedTo": [
+          {
+            "component": "Tabs",
+            "kind": "contrast",
+            "relationship": "Tabs swap the content in place; TableOfContents links to sections of one long page"
+          },
+          {
+            "component": "PageNav",
+            "kind": "contrast",
+            "relationship": "TableOfContents moves within the page; PageNav moves to the next page"
+          }
+        ],
+        "whenNotToUse": [
+          "Navigation between pages — use SideNav, Tree or Breadcrumb",
+          "Switching views of one record — use Tabs",
+          "A page with no H2/H3 — render nothing instead of an empty list"
+        ],
+        "whenToUse": [
+          "A long document page (docs, a runbook, an ADR) with H2/H3 sections",
+          "variant=\"menu\" for the same list on a narrow screen, above the body"
+        ]
+      },
+      "name": "TableOfContents",
+      "parts": {
+        "Item": {
+          "name": "Item",
+          "props": [
+            {
+              "description": "The section's anchor, `#<heading id>`.",
+              "name": "href",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "default": "2",
+              "description": "The heading's level: 2, or 3 (indented under the 2 before it).",
+              "name": "level",
+              "required": false,
+              "type": "2 | 3"
+            },
+            {
+              "description": "Client-side navigation: called for a plain primary click (no modifier key). Call `event.preventDefault()`, then scroll or navigate yourself.",
+              "name": "onNavigate",
+              "required": false,
+              "type": "OnNavigate"
+            },
+            {
+              "name": "children",
+              "required": true,
+              "type": "ReactNode"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/TableOfContents/TableOfContents.tsx"
+        },
+        "Root": {
+          "name": "Root",
+          "props": [
+            {
+              "description": "Names the landmark (\"On this page\"); required, from your text catalog.",
+              "name": "aria-label",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "default": "null",
+              "description": "The id of the section being read; the Item whose href is `#<value>` is active.",
+              "name": "value",
+              "required": false,
+              "type": "string | null"
+            },
+            {
+              "description": "Visible title: the caption above the list, or the menu button's text. The menu button falls back to `aria-label`; the list shows none without it.",
+              "name": "label",
+              "required": false,
+              "type": "ReactNode"
+            },
+            {
+              "name": "children",
+              "required": true,
+              "type": "ReactNode"
+            },
+            {
+              "default": "'list'",
+              "description": "`list` (default) for a sidebar; `menu` for a narrow screen, behind a disclosure button (only `menu` takes open / defaultOpen / onOpenChange).",
+              "name": "variant",
+              "required": false,
+              "type": "'list' | 'menu'"
+            },
+            {
+              "description": "Whether the list is shown (controlled).",
+              "name": "open",
+              "required": false,
+              "type": "boolean"
+            },
+            {
+              "default": "false",
+              "description": "Whether the list starts shown (uncontrolled; default false).",
+              "name": "defaultOpen",
+              "required": false,
+              "type": "boolean"
+            },
+            {
+              "name": "onOpenChange",
+              "required": false,
+              "type": "(open: boolean) => void"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/TableOfContents/TableOfContents.tsx"
+        }
+      },
+      "props": null,
+      "sourcePath": "packages/ui/src/components/TableOfContents/TableOfContents.tsx"
+    },
     "Tabs": {
       "importPath": "@duro-app/ui",
       "kind": "compound",
@@ -5993,7 +6396,7 @@
       "importPath": "@duro-app/ui",
       "kind": "component",
       "meta": {
-        "description": "Inline hyperlink for running text and standalone text links (\"View all\", \"Edit profile\"). Always underlined, so colour is never the only cue: default is accent text with an accent underline; subtle keeps the surrounding text colour with a muted underline and turns accent on hover. target=\"_blank\" defaults rel to noopener noreferrer.",
+        "description": "Inline hyperlink for running text and standalone text links (\"View all\", \"Edit profile\"). Always underlined, so colour is never the only cue: default is accent text with an accent underline; subtle keeps the surrounding text colour with a muted underline and turns accent on hover. target=\"_blank\" defaults rel to noopener noreferrer. onNavigate(href, event) hands a plain primary click to a client router (the app calls event.preventDefault(), then navigates); modified clicks keep the browser default.",
         "example": "<Text>\n  Read the <TextLink href=\"/docs/migrate\">migration guide</TextLink> before you change seats, or{' '}\n  <TextLink href=\"/plans\" variant=\"subtle\">compare plans</TextLink> first.\n</Text>",
         "relatedTo": [
           {
@@ -6053,6 +6456,12 @@
           "required": false,
           "type": "string"
         },
+        {
+          "description": "Client-side navigation: called for a plain primary click (no modifier key, no `target`); the browser default runs for every other click. Call `event.preventDefault()`, then your router's navigate.",
+          "name": "onNavigate",
+          "required": false,
+          "type": "OnNavigate"
+        },
         {
           "name": "children",
           "required": true,
@@ -6599,7 +7008,7 @@
             "Item"
           ]
         },
-        "description": "Hierarchy of items with single selection and expandable branches (the WAI-ARIA tree pattern): one tab stop, arrow keys, Home/End, typeahead. Compound component — Root is required.",
+        "description": "Hierarchy of items with single selection and expandable branches (the WAI-ARIA tree pattern): one tab stop, arrow keys, Home/End, typeahead. An Item with href renders its row as a real link (cmd-click opens a tab) outside the tab order; Enter/Space follows it, through onNavigate(href, event) when given. Compound component — Root is required.",
         "example": "<Tree.Root aria-label=\"Blocs\" defaultExpanded={['energy']} onValueChange={setSelected}>\n  <Tree.Item value=\"energy\" label=\"Core business — Energy\">\n    <Tree.Item value=\"generation\" label=\"Generation\" meta=\"4 apps\" />\n    <Tree.Item value=\"network\" label=\"Network operations\">\n      <Tree.Item value=\"scada\" label=\"SCADA supervision\" />\n    </Tree.Item>\n  </Tree.Item>\n  <Tree.Item value=\"finance\" label=\"Finance & steering\" />\n</Tree.Root>",
         "relatedTo": [
           {
@@ -6620,7 +7029,8 @@
         ],
         "whenToUse": [
           "Browsing data that nests to any depth — a file tree, zones › services › capabilities, namespace › resource",
-          "Picking one node of a hierarchy to show its details beside the tree"
+          "Picking one node of a hierarchy to show its details beside the tree",
+          "A docs tree of sections and pages, each Item with href (and onNavigate for a client router)"
         ]
       },
       "name": "Tree",
@@ -6657,6 +7067,18 @@
               "name": "meta",
               "required": false,
               "type": "ReactNode"
+            },
+            {
+              "description": "Makes the row a link to this URL. A plain click (or Enter / Space) selects the item and calls `onNavigate`; a modified click keeps the browser default (new tab, new window) and does not select.",
+              "name": "href",
+              "required": false,
+              "type": "string"
+            },
+            {
+              "description": "Client-side navigation for `href`: called for a plain primary click. Call `event.preventDefault()`, then your router's navigate.",
+              "name": "onNavigate",
+              "required": false,
+              "type": "OnNavigate"
             }
           ],
           "sourcePath": "packages/ui/src/components/Tree/Tree.tsx"
@@ -7032,6 +7454,14 @@
       "props": [],
       "sourcePath": "packages/ui/src/components/DragDrop/DragDrop.tsx"
     },
+    "useInModal": {
+      "importPath": "@duro-app/ui",
+      "kind": "hook",
+      "meta": null,
+      "name": "useInModal",
+      "props": [],
+      "sourcePath": "packages/ui/src/shared/ModalContext.ts"
+    },
     "usePortalMount": {
       "importPath": "@duro-app/ui",
       "kind": "hook",
@@ -7243,7 +7673,7 @@
     "admin-detail-page": {
       "export": "AdminDetailPageRecipe",
       "meta": {
-        "description": "Admin detail page for one record: breadcrumb link, heading with status and actions, then Tabs whose panels hold the sections (the /admin/<collection>/:id shape).",
+        "description": "Admin detail page for one record: a Breadcrumb back to the collection, heading with status and actions, then Tabs whose panels hold the sections (the /admin/<collection>/:id shape).",
         "example": "<AdminDetailPageRecipe />",
         "whenNotToUse": [
           "One facet only — a PageShell with a Card is enough",
@@ -7256,17 +7686,17 @@
       },
       "name": "admin-detail-page",
       "peerDeps": [],
-      "source": "import {PageShell, Tabs, Stack, Inline, Heading, Text, Badge, Button, LinkButton, Card, EmptyState} from '@duro-app/ui'\n\nfunction Header() {\n  return (\n    <Stack gap=\"sm\">\n      <LinkButton href=\"#applications\" variant=\"secondary\" size=\"small\">\n        ← Applications\n      </LinkButton>\n      <Inline gap=\"md\" align=\"center\" justify=\"between\">\n        <Inline gap=\"sm\" align=\"center\">\n          <Heading level={1}>Grafana</Heading>\n          <Badge variant=\"success\">active</Badge>\n        </Inline>\n        <Inline gap=\"sm\">\n          <Button variant=\"secondary\">Edit</Button>\n          <Button variant=\"danger\">Retire</Button>\n        </Inline>\n      </Inline>\n    </Stack>\n  )\n}\n\nexport function AdminDetailPageRecipe() {\n  return (\n    <PageShell maxWidth=\"lg\" padding=\"md\" header={<Header />}>\n      <Tabs.Root defaultValue=\"overview\">\n        <Tabs.List>\n          <Tabs.Tab value=\"overview\">Overview</Tabs.Tab>\n          <Tabs.Tab value=\"members\">Members</Tabs.Tab>\n          <Tabs.Tab value=\"approvals\">Approvals</Tabs.Tab>\n          <Tabs.Tab value=\"audit\">Audit</Tabs.Tab>\n        </Tabs.List>\n\n        <Tabs.Panel value=\"overview\">\n          <Stack gap=\"lg\">\n            <Card>\n              <Stack gap=\"sm\">\n                <Heading level={3}>About</Heading>\n                <Text color=\"muted\">\n                  Dashboards for the platform team. Owned by platform, reachable at grafana.example.\n                </Text>\n              </Stack>\n            </Card>\n            <Card>\n              <Stack gap=\"sm\">\n                <Heading level={3}>Access</Heading>\n                <Text>3 roles · 2 entitlements · 41 grants</Text>\n              </Stack>\n            </Card>\n          </Stack>\n        </Tabs.Panel>\n\n        <Tabs.Panel value=\"members\">\n          <EmptyState message=\"No members yet.\" action={<Button>Add member</Button>} />\n        </Tabs.Panel>\n        <Tabs.Panel value=\"approvals\">\n          <EmptyState message=\"Every grant is auto-approved. Add a gate to require a decision.\" />\n        </Tabs.Panel>\n        <Tabs.Panel value=\"audit\">\n          <EmptyState message=\"Nothing recorded for this application.\" />\n        </Tabs.Panel>\n      </Tabs.Root>\n    </PageShell>\n  )\n}\n",
+      "source": "import {PageShell, Tabs, Stack, Inline, Heading, Text, Badge, Button, Breadcrumb, Card, EmptyState} from '@duro-app/ui'\n\nfunction Header() {\n  return (\n    <Stack gap=\"sm\">\n      <Breadcrumb.Root aria-label=\"Breadcrumb\">\n        <Breadcrumb.Item href=\"#admin\">Admin</Breadcrumb.Item>\n        <Breadcrumb.Item href=\"#applications\">Applications</Breadcrumb.Item>\n        <Breadcrumb.Item current>Grafana</Breadcrumb.Item>\n      </Breadcrumb.Root>\n      <Inline gap=\"md\" align=\"center\" justify=\"between\">\n        <Inline gap=\"sm\" align=\"center\">\n          <Heading level={1}>Grafana</Heading>\n          <Badge variant=\"success\">active</Badge>\n        </Inline>\n        <Inline gap=\"sm\">\n          <Button variant=\"secondary\">Edit</Button>\n          <Button variant=\"danger\">Retire</Button>\n        </Inline>\n      </Inline>\n    </Stack>\n  )\n}\n\nexport function AdminDetailPageRecipe() {\n  return (\n    <PageShell maxWidth=\"lg\" padding=\"md\" header={<Header />}>\n      <Tabs.Root defaultValue=\"overview\">\n        <Tabs.List>\n          <Tabs.Tab value=\"overview\">Overview</Tabs.Tab>\n          <Tabs.Tab value=\"members\">Members</Tabs.Tab>\n          <Tabs.Tab value=\"approvals\">Approvals</Tabs.Tab>\n          <Tabs.Tab value=\"audit\">Audit</Tabs.Tab>\n        </Tabs.List>\n\n        <Tabs.Panel value=\"overview\">\n          <Stack gap=\"lg\">\n            <Card>\n              <Stack gap=\"sm\">\n                <Heading level={3}>About</Heading>\n                <Text color=\"muted\">\n                  Dashboards for the platform team. Owned by platform, reachable at grafana.example.\n                </Text>\n              </Stack>\n            </Card>\n            <Card>\n              <Stack gap=\"sm\">\n                <Heading level={3}>Access</Heading>\n                <Text>3 roles · 2 entitlements · 41 grants</Text>\n              </Stack>\n            </Card>\n          </Stack>\n        </Tabs.Panel>\n\n        <Tabs.Panel value=\"members\">\n          <EmptyState message=\"No members yet.\" action={<Button>Add member</Button>} />\n        </Tabs.Panel>\n        <Tabs.Panel value=\"approvals\">\n          <EmptyState message=\"Every grant is auto-approved. Add a gate to require a decision.\" />\n        </Tabs.Panel>\n        <Tabs.Panel value=\"audit\">\n          <EmptyState message=\"Nothing recorded for this application.\" />\n        </Tabs.Panel>\n      </Tabs.Root>\n    </PageShell>\n  )\n}\n",
       "sourcePath": "docs/ai/recipes/admin-detail-page.recipe.tsx",
       "title": "Admin Detail Page",
       "usesComponents": [
         "Badge",
+        "Breadcrumb",
         "Button",
         "Card",
         "EmptyState",
         "Heading",
         "Inline",
-        "LinkButton",
         "PageShell",
         "Stack",
         "Tabs",
@@ -8018,6 +8448,10 @@
             "key": "floating",
             "value": "50"
           },
+          {
+            "key": "floatingRaised",
+            "value": "60"
+          },
           {
             "key": "overlay",
             "value": "1000"
@@ -8034,6 +8468,10 @@
             "key": "popover",
             "value": "1040"
           },
+          {
+            "key": "popoverRaised",
+            "value": "1041"
+          },
           {
             "key": "popupBackdrop",
             "value": "1049"
@@ -8715,7 +9153,7 @@
         "importPath": "@duro-app/tokens/tokens/typography.css"
       }
     },
-    "mockupCss": "/*\n * GENERATED by scripts/generate-mockup-css.mjs — do not edit.\n *\n * The design tokens as resolved values, for HTML that loads no stylesheet\n * (mockup artboards, static previews). Same names as vars.css; where vars.css\n * follows the live theme, this file carries every theme and switches on\n * <html data-theme=\"light|high-contrast\">.\n *\n * Inside the component library and the apps, never use this: go through\n * css.create() and the token imports, or vars.css from plain CSS.\n */\n:root {\n  color-scheme: dark;\n  /* colors */\n  --duro-color-accent: #6aaffc;\n  --duro-color-accent-contrast: #000000;\n  --duro-color-accent-hover: #93c5fd;\n  --duro-color-bg: #0f0f0f;\n  --duro-color-bg-card: #1a1a1a;\n  --duro-color-bg-card-hover: #242424;\n  --duro-color-border: #333333;\n  --duro-color-contrast-border: rgba(0, 0, 0, 0.42);\n  --duro-color-contrast-surface: #f5f5f5;\n  --duro-color-error: #f87171;\n  --duro-color-error-bg: rgba(248, 113, 113, 0.1);\n  --duro-color-error-border: rgba(248, 113, 113, 0.3);\n  --duro-color-error-contrast: #000000;\n  --duro-color-error-hover: #fca5a5;\n  --duro-color-error-text: #fca5a5;\n  --duro-color-fixed-light: #ffffff;\n  --duro-color-highlight: #c084fc;\n  --duro-color-highlight-bg: rgba(192, 132, 252, 0.1);\n  --duro-color-highlight-border: rgba(192, 132, 252, 0.3);\n  --duro-color-highlight-text: #d8b4fe;\n  --duro-color-info: #6aaffc;\n  --duro-color-info-bg: rgba(106, 175, 252, 0.1);\n  --duro-color-info-border: rgba(106, 175, 252, 0.3);\n  --duro-color-info-text: #93c5fd;\n  --duro-color-inverse-border: rgba(0, 0, 0, 0.55);\n  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);\n  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);\n  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);\n  --duro-color-on-contrast-surface: #1a1a1a;\n  --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n  --duro-color-scrim: rgba(0, 0, 0, 0.4);\n  --duro-color-success: #22c55e;\n  --duro-color-success-bg: rgba(34, 197, 94, 0.1);\n  --duro-color-success-border: rgba(34, 197, 94, 0.3);\n  --duro-color-success-text: #86efac;\n  --duro-color-text: #e5e5e5;\n  --duro-color-text-muted: #b0b0b0;\n  --duro-color-warning: #fbbf24;\n  --duro-color-warning-bg: rgba(251, 191, 36, 0.1);\n  --duro-color-warning-border: rgba(251, 191, 36, 0.3);\n  --duro-color-warning-text: #fde68a;\n  /* shadows */\n  --duro-shadow-drop-over: inset 0 0 0 2px #6aaffc;\n  --duro-shadow-drop-ready: inset 0 0 0 1px #333333;\n  --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);\n  --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);\n  --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);\n  /* spacing */\n  --duro-spacing-lg: 24px;\n  --duro-spacing-md: 16px;\n  --duro-spacing-ms: 12px;\n  --duro-spacing-sm: 8px;\n  --duro-spacing-xl: 32px;\n  --duro-spacing-xs: 4px;\n  --duro-spacing-xxl: 48px;\n  --duro-spacing-xxxl: 64px;\n  /* microSpacing */\n  --duro-micro-spacing-px1: 1px;\n  --duro-micro-spacing-px2: 2px;\n  --duro-micro-spacing-px3: 3px;\n  --duro-micro-spacing-px5: 5px;\n  --duro-micro-spacing-px6: 6px;\n  /* radii */\n  --duro-radius-full: 9999px;\n  --duro-radius-lg: 16px;\n  --duro-radius-md: 12px;\n  --duro-radius-px6: 6px;\n  --duro-radius-sm: 8px;\n  --duro-radius-xs: 4px;\n  /* sizes */\n  --duro-size-aside-w: 320px;\n  --duro-size-bar-h: 4px;\n  --duro-size-canvas-min-h: 480px;\n  --duro-size-check-mark-h: 9px;\n  --duro-size-check-mark-w: 5px;\n  --duro-size-chip: 24px;\n  --duro-size-color-area-h: 150px;\n  --duro-size-color-picker-w: 196px;\n  --duro-size-color-preview-h: 22px;\n  --duro-size-color-swatch: 20px;\n  --duro-size-color-track-h: 12px;\n  --duro-size-control-lg: 40px;\n  --duro-size-control-md: 39px;\n  --duro-size-control-sm: 28px;\n  --duro-size-day-header-h: 46px;\n  --duro-size-device-bar-w: 96px;\n  --duro-size-dialog-lg: 680px;\n  --duro-size-dialog-md: 520px;\n  --duro-size-dialog-sm: 400px;\n  --duro-size-divider: 1px;\n  --duro-size-drop-zone-min-h: 128px;\n  --duro-size-edge-fade: 32px;\n  --duro-size-editor-min-h: 160px;\n  --duro-size-embed-w: 550px;\n  --duro-size-field-min-w: 160px;\n  --duro-size-field-min-w-sm: 80px;\n  --duro-size-glyph-md: 16px;\n  --duro-size-glyph-sm: 12px;\n  --duro-size-glyph-xs: 10px;\n  --duro-size-grid-col-md: 280px;\n  --duro-size-grid-col-sm: 240px;\n  --duro-size-grid-col-xs: 200px;\n  --duro-size-handle: 16px;\n  --duro-size-icon-button: 32px;\n  --duro-size-icon-button-sm: 28px;\n  --duro-size-icon-lg: 24px;\n  --duro-size-icon-md: 18px;\n  --duro-size-icon-sm: 16px;\n  --duro-size-icon-xl: 36px;\n  --duro-size-icon-xxl: 48px;\n  --duro-size-indicator: 18px;\n  --duro-size-indicator-dot: 8px;\n  --duro-size-label-min-w: 120px;\n  --duro-size-list-max-h: 280px;\n  --duro-size-list-max-h-sm: 200px;\n  --duro-size-meter-h: 6px;\n  --duro-size-nav-marker-h: 18px;\n  --duro-size-nav-marker-w: 3px;\n  --duro-size-page-lg: 1200px;\n  --duro-size-page-md: 800px;\n  --duro-size-page-sm: 600px;\n  --duro-size-page-xl: 1440px;\n  --duro-size-page-xs: 480px;\n  --duro-size-palette-min-w: 96px;\n  --duro-size-panel-lg: 640px;\n  --duro-size-panel-md: 480px;\n  --duro-size-panel-sm: 360px;\n  --duro-size-placeholder-min-h: 80px;\n  --duro-size-popover-w: 320px;\n  --duro-size-popover-w-sm: 240px;\n  --duro-size-popup-max-w: 280px;\n  --duro-size-popup-min-w: 160px;\n  --duro-size-preview-max-h: 320px;\n  --duro-size-readout-w: 40px;\n  --duro-size-scrollbar: 8px;\n  --duro-size-sidebar-w: 240px;\n  --duro-size-skeleton-chip-w: 96px;\n  --duro-size-slider-w: 96px;\n  --duro-size-spinner-lg: 40px;\n  --duro-size-spinner-md: 24px;\n  --duro-size-spinner-sm: 16px;\n  --duro-size-swatch-h: 34px;\n  --duro-size-swatch-w: 44px;\n  --duro-size-switch-thumb: 16px;\n  --duro-size-switch-track-h: 20px;\n  --duro-size-switch-track-w: 36px;\n  --duro-size-tab-indicator: 2px;\n  --duro-size-time-gutter-w: 64px;\n  --duro-size-toast-max-w: 440px;\n  --duro-size-toolbar-h: 36px;\n  --duro-size-touch-target: 44px;\n  /* borders */\n  --duro-border-accent: 3px;\n  --duro-border-focus-offset: 2px;\n  --duro-border-focus-offset-sm: 1px;\n  --duro-border-focus-ring: 2px;\n  --duro-border-hairline: 1px;\n  --duro-border-strong: 2px;\n  /* layers */\n  --duro-layer-floating: 50;\n  --duro-layer-modal: 1001;\n  --duro-layer-modal-raised: 1002;\n  --duro-layer-overlay: 1000;\n  --duro-layer-popover: 1040;\n  --duro-layer-popup: 1050;\n  --duro-layer-popup-backdrop: 1049;\n  --duro-layer-portal: 1100;\n  --duro-layer-raised: 1;\n  --duro-layer-toast: 1060;\n  /* effects */\n  --duro-effect-overlay-blur: blur(2px);\n  --duro-effect-surface-blur: blur(6px);\n  /* layoutSpacing */\n  --duro-layout-spacing-container-lg: 32px;\n  --duro-layout-spacing-container-md: 24px;\n  --duro-layout-spacing-container-sm: 16px;\n  --duro-layout-spacing-inline-lg: 24px;\n  --duro-layout-spacing-inline-md: 16px;\n  --duro-layout-spacing-inline-sm: 8px;\n  --duro-layout-spacing-inline-xs: 4px;\n  --duro-layout-spacing-stack-lg: 24px;\n  --duro-layout-spacing-stack-md: 16px;\n  --duro-layout-spacing-stack-sm: 8px;\n  --duro-layout-spacing-stack-xl: 48px;\n  --duro-layout-spacing-stack-xs: 4px;\n  /* typography */\n  --duro-typography-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  --duro-typography-font-family-mono: \"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", \"Courier New\", monospace;\n  --duro-typography-font-size-heading: 1.5rem;\n  --duro-typography-font-size-lg: 1.125rem;\n  --duro-typography-font-size-md: 1rem;\n  --duro-typography-font-size-sm: 0.875rem;\n  --duro-typography-font-size-xl: 1.25rem;\n  --duro-typography-font-size-xs: 0.75rem;\n  --duro-typography-font-weight-bold: 700;\n  --duro-typography-font-weight-medium: 500;\n  --duro-typography-font-weight-normal: 400;\n  --duro-typography-font-weight-semibold: 600;\n  --duro-typography-line-height: 1.5;\n  /* typeScale */\n  --duro-type-scale-display-lg: clamp(3.5rem, 2rem + 3.5vw, 4.5rem);\n  --duro-type-scale-display-md: clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem);\n  --duro-type-scale-display-sm: clamp(2.25rem, 1.5rem + 2vw, 3rem);\n  --duro-type-scale-font-size1: 0.75rem;\n  --duro-type-scale-font-size2: 0.8125rem;\n  --duro-type-scale-font-size3: 0.875rem;\n  --duro-type-scale-font-size4: 1rem;\n  --duro-type-scale-font-size5: 1.125rem;\n  --duro-type-scale-font-size6: 1.25rem;\n  --duro-type-scale-font-size7: 1.5rem;\n  --duro-type-scale-font-size8: 1.875rem;\n  --duro-type-scale-font-size9: 2.25rem;\n  --duro-type-scale-letter-spacing-normal: 0;\n  --duro-type-scale-letter-spacing-tight: -0.02em;\n  --duro-type-scale-letter-spacing-wide: 0.04em;\n  --duro-type-scale-line-height1: 1rem;\n  --duro-type-scale-line-height2: 1.25rem;\n  --duro-type-scale-line-height3: 1.25rem;\n  --duro-type-scale-line-height4: 1.5rem;\n  --duro-type-scale-line-height5: 1.5rem;\n  --duro-type-scale-line-height6: 1.75rem;\n  --duro-type-scale-line-height7: 2rem;\n  --duro-type-scale-line-height8: 2.25rem;\n  --duro-type-scale-line-height9: 2.75rem;\n  /* duration */\n  --duro-duration-base: 200ms;\n  --duro-duration-brisk: 160ms;\n  --duro-duration-fast: 150ms;\n  --duro-duration-instant: 0ms;\n  --duro-duration-minimal: 1ms;\n  --duro-duration-quick: 120ms;\n  --duro-duration-slow: 280ms;\n  /* easing */\n  --duro-easing-ease-in: cubic-bezier(0.72, 0, 0.68, 0.28);\n  --duro-easing-ease-out: cubic-bezier(0.32, 0.72, 0, 1);\n  --duro-easing-linear: linear;\n  --duro-easing-standard: ease;\n  /* breakpoints */\n  --duro-breakpoint-lg: 1024px;\n  --duro-breakpoint-md: 768px;\n  --duro-breakpoint-sm: 640px;\n  --duro-breakpoint-xl: 1280px;\n  --duro-breakpoint-xs: 480px;\n}\n\n:root[data-theme=\"light\"] {\n  color-scheme: light;\n  /* colors */\n  --duro-color-accent: #1e40af;\n  --duro-color-accent-contrast: #ffffff;\n  --duro-color-accent-hover: #1a3799;\n  --duro-color-bg: #ffffff;\n  --duro-color-bg-card: #f5f5f5;\n  --duro-color-bg-card-hover: #ebebeb;\n  --duro-color-border: #d4d4d4;\n  --duro-color-contrast-border: rgba(255, 255, 255, 0.33);\n  --duro-color-contrast-surface: #1a1a1a;\n  --duro-color-error: #991b1b;\n  --duro-color-error-bg: rgba(153, 27, 27, 0.08);\n  --duro-color-error-border: rgba(153, 27, 27, 0.3);\n  --duro-color-error-contrast: #ffffff;\n  --duro-color-error-hover: #7f1d1d;\n  --duro-color-error-text: #7f1d1d;\n  --duro-color-fixed-light: #ffffff;\n  --duro-color-highlight: #6b21a8;\n  --duro-color-highlight-bg: rgba(107, 33, 168, 0.08);\n  --duro-color-highlight-border: rgba(107, 33, 168, 0.3);\n  --duro-color-highlight-text: #581c87;\n  --duro-color-info: #1e40af;\n  --duro-color-info-bg: rgba(30, 64, 175, 0.08);\n  --duro-color-info-border: rgba(30, 64, 175, 0.3);\n  --duro-color-info-text: #1e40af;\n  --duro-color-inverse-border: rgba(0, 0, 0, 0.55);\n  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);\n  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);\n  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);\n  --duro-color-on-contrast-surface: #e5e5e5;\n  --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n  --duro-color-scrim: rgba(0, 0, 0, 0.4);\n  --duro-color-success: #166534;\n  --duro-color-success-bg: rgba(22, 101, 52, 0.08);\n  --duro-color-success-border: rgba(22, 101, 52, 0.3);\n  --duro-color-success-text: #14532d;\n  --duro-color-text: #1a1a1a;\n  --duro-color-text-muted: #4a4a4a;\n  --duro-color-warning: #92400e;\n  --duro-color-warning-bg: rgba(146, 64, 14, 0.08);\n  --duro-color-warning-border: rgba(146, 64, 14, 0.3);\n  --duro-color-warning-text: #78350f;\n  /* shadows */\n  --duro-shadow-drop-over: inset 0 0 0 2px #1e40af;\n  --duro-shadow-drop-ready: inset 0 0 0 1px #d4d4d4;\n  --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);\n  --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);\n  --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n:root[data-theme=\"high-contrast\"] {\n  color-scheme: dark;\n  /* colors */\n  --duro-color-accent: #60a5fa;\n  --duro-color-accent-contrast: #000000;\n  --duro-color-accent-hover: #93c5fd;\n  --duro-color-bg: #000000;\n  --duro-color-bg-card: #111111;\n  --duro-color-bg-card-hover: #1a1a1a;\n  --duro-color-border: #555555;\n  --duro-color-contrast-border: rgba(0, 0, 0, 0.42);\n  --duro-color-contrast-surface: #ffffff;\n  --duro-color-error: #f87171;\n  --duro-color-error-bg: rgba(248, 113, 113, 0.15);\n  --duro-color-error-border: rgba(248, 113, 113, 0.5);\n  --duro-color-error-contrast: #000000;\n  --duro-color-error-hover: #fca5a5;\n  --duro-color-error-text: #fca5a5;\n  --duro-color-fixed-light: #ffffff;\n  --duro-color-highlight: #d8b4fe;\n  --duro-color-highlight-bg: rgba(216, 180, 254, 0.15);\n  --duro-color-highlight-border: rgba(216, 180, 254, 0.5);\n  --duro-color-highlight-text: #e9d5ff;\n  --duro-color-info: #60a5fa;\n  --duro-color-info-bg: rgba(96, 165, 250, 0.15);\n  --duro-color-info-border: rgba(96, 165, 250, 0.5);\n  --duro-color-info-text: #bfdbfe;\n  --duro-color-inverse-border: rgba(0, 0, 0, 0.55);\n  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);\n  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);\n  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);\n  --duro-color-on-contrast-surface: #000000;\n  --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n  --duro-color-scrim: rgba(0, 0, 0, 0.4);\n  --duro-color-success: #4ade80;\n  --duro-color-success-bg: rgba(74, 222, 128, 0.15);\n  --duro-color-success-border: rgba(74, 222, 128, 0.5);\n  --duro-color-success-text: #86efac;\n  --duro-color-text: #ffffff;\n  --duro-color-text-muted: #b0b0b0;\n  --duro-color-warning: #fcd34d;\n  --duro-color-warning-bg: rgba(252, 211, 77, 0.15);\n  --duro-color-warning-border: rgba(252, 211, 77, 0.5);\n  --duro-color-warning-text: #fef08a;\n  /* shadows */\n  --duro-shadow-drop-over: inset 0 0 0 2px #60a5fa;\n  --duro-shadow-drop-ready: inset 0 0 0 1px #555555;\n  --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.8);\n  --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.7);\n  --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.6);\n}\n"
+    "mockupCss": "/*\n * GENERATED by scripts/generate-mockup-css.mjs — do not edit.\n *\n * The design tokens as resolved values, for HTML that loads no stylesheet\n * (mockup artboards, static previews). Same names as vars.css; where vars.css\n * follows the live theme, this file carries every theme and switches on\n * <html data-theme=\"light|high-contrast\">.\n *\n * Inside the component library and the apps, never use this: go through\n * css.create() and the token imports, or vars.css from plain CSS.\n */\n:root {\n  color-scheme: dark;\n  /* colors */\n  --duro-color-accent: #6aaffc;\n  --duro-color-accent-contrast: #000000;\n  --duro-color-accent-hover: #93c5fd;\n  --duro-color-bg: #0f0f0f;\n  --duro-color-bg-card: #1a1a1a;\n  --duro-color-bg-card-hover: #242424;\n  --duro-color-border: #333333;\n  --duro-color-contrast-border: rgba(0, 0, 0, 0.42);\n  --duro-color-contrast-surface: #f5f5f5;\n  --duro-color-error: #f87171;\n  --duro-color-error-bg: rgba(248, 113, 113, 0.1);\n  --duro-color-error-border: rgba(248, 113, 113, 0.3);\n  --duro-color-error-contrast: #000000;\n  --duro-color-error-hover: #fca5a5;\n  --duro-color-error-text: #fca5a5;\n  --duro-color-fixed-light: #ffffff;\n  --duro-color-highlight: #c084fc;\n  --duro-color-highlight-bg: rgba(192, 132, 252, 0.1);\n  --duro-color-highlight-border: rgba(192, 132, 252, 0.3);\n  --duro-color-highlight-text: #d8b4fe;\n  --duro-color-info: #6aaffc;\n  --duro-color-info-bg: rgba(106, 175, 252, 0.1);\n  --duro-color-info-border: rgba(106, 175, 252, 0.3);\n  --duro-color-info-text: #93c5fd;\n  --duro-color-inverse-border: rgba(0, 0, 0, 0.55);\n  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);\n  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);\n  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);\n  --duro-color-on-contrast-surface: #1a1a1a;\n  --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n  --duro-color-scrim: rgba(0, 0, 0, 0.4);\n  --duro-color-success: #22c55e;\n  --duro-color-success-bg: rgba(34, 197, 94, 0.1);\n  --duro-color-success-border: rgba(34, 197, 94, 0.3);\n  --duro-color-success-text: #86efac;\n  --duro-color-text: #e5e5e5;\n  --duro-color-text-muted: #b0b0b0;\n  --duro-color-warning: #fbbf24;\n  --duro-color-warning-bg: rgba(251, 191, 36, 0.1);\n  --duro-color-warning-border: rgba(251, 191, 36, 0.3);\n  --duro-color-warning-text: #fde68a;\n  /* shadows */\n  --duro-shadow-drop-over: inset 0 0 0 2px #6aaffc;\n  --duro-shadow-drop-ready: inset 0 0 0 1px #333333;\n  --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);\n  --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);\n  --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);\n  /* spacing */\n  --duro-spacing-lg: 24px;\n  --duro-spacing-md: 16px;\n  --duro-spacing-ms: 12px;\n  --duro-spacing-sm: 8px;\n  --duro-spacing-xl: 32px;\n  --duro-spacing-xs: 4px;\n  --duro-spacing-xxl: 48px;\n  --duro-spacing-xxxl: 64px;\n  /* microSpacing */\n  --duro-micro-spacing-px1: 1px;\n  --duro-micro-spacing-px2: 2px;\n  --duro-micro-spacing-px3: 3px;\n  --duro-micro-spacing-px5: 5px;\n  --duro-micro-spacing-px6: 6px;\n  /* radii */\n  --duro-radius-full: 9999px;\n  --duro-radius-lg: 16px;\n  --duro-radius-md: 12px;\n  --duro-radius-px6: 6px;\n  --duro-radius-sm: 8px;\n  --duro-radius-xs: 4px;\n  /* sizes */\n  --duro-size-aside-w: 320px;\n  --duro-size-bar-h: 4px;\n  --duro-size-canvas-min-h: 480px;\n  --duro-size-check-mark-h: 9px;\n  --duro-size-check-mark-w: 5px;\n  --duro-size-chip: 24px;\n  --duro-size-color-area-h: 150px;\n  --duro-size-color-picker-w: 196px;\n  --duro-size-color-preview-h: 22px;\n  --duro-size-color-swatch: 20px;\n  --duro-size-color-track-h: 12px;\n  --duro-size-control-lg: 40px;\n  --duro-size-control-md: 39px;\n  --duro-size-control-sm: 28px;\n  --duro-size-day-header-h: 46px;\n  --duro-size-device-bar-w: 96px;\n  --duro-size-dialog-lg: 680px;\n  --duro-size-dialog-md: 520px;\n  --duro-size-dialog-sm: 400px;\n  --duro-size-divider: 1px;\n  --duro-size-drop-zone-min-h: 128px;\n  --duro-size-edge-fade: 32px;\n  --duro-size-editor-min-h: 160px;\n  --duro-size-embed-w: 550px;\n  --duro-size-field-min-w: 160px;\n  --duro-size-field-min-w-sm: 80px;\n  --duro-size-glyph-md: 16px;\n  --duro-size-glyph-sm: 12px;\n  --duro-size-glyph-xs: 10px;\n  --duro-size-grid-col-md: 280px;\n  --duro-size-grid-col-sm: 240px;\n  --duro-size-grid-col-xs: 200px;\n  --duro-size-handle: 16px;\n  --duro-size-icon-button: 32px;\n  --duro-size-icon-button-sm: 28px;\n  --duro-size-icon-lg: 24px;\n  --duro-size-icon-md: 18px;\n  --duro-size-icon-sm: 16px;\n  --duro-size-icon-xl: 36px;\n  --duro-size-icon-xxl: 48px;\n  --duro-size-indicator: 18px;\n  --duro-size-indicator-dot: 8px;\n  --duro-size-label-min-w: 120px;\n  --duro-size-list-max-h: 280px;\n  --duro-size-list-max-h-sm: 200px;\n  --duro-size-meter-h: 6px;\n  --duro-size-nav-marker-h: 18px;\n  --duro-size-nav-marker-w: 3px;\n  --duro-size-page-lg: 1200px;\n  --duro-size-page-md: 800px;\n  --duro-size-page-sm: 600px;\n  --duro-size-page-xl: 1440px;\n  --duro-size-page-xs: 480px;\n  --duro-size-palette-min-w: 96px;\n  --duro-size-panel-lg: 640px;\n  --duro-size-panel-md: 480px;\n  --duro-size-panel-sm: 360px;\n  --duro-size-placeholder-min-h: 80px;\n  --duro-size-popover-w: 320px;\n  --duro-size-popover-w-sm: 240px;\n  --duro-size-popup-max-w: 280px;\n  --duro-size-popup-min-w: 160px;\n  --duro-size-preview-max-h: 320px;\n  --duro-size-readout-w: 40px;\n  --duro-size-scrollbar: 8px;\n  --duro-size-sidebar-w: 240px;\n  --duro-size-skeleton-chip-w: 96px;\n  --duro-size-slider-w: 96px;\n  --duro-size-spinner-lg: 40px;\n  --duro-size-spinner-md: 24px;\n  --duro-size-spinner-sm: 16px;\n  --duro-size-swatch-h: 34px;\n  --duro-size-swatch-w: 44px;\n  --duro-size-switch-thumb: 16px;\n  --duro-size-switch-track-h: 20px;\n  --duro-size-switch-track-w: 36px;\n  --duro-size-tab-indicator: 2px;\n  --duro-size-time-gutter-w: 64px;\n  --duro-size-toast-max-w: 440px;\n  --duro-size-toolbar-h: 36px;\n  --duro-size-touch-target: 44px;\n  /* borders */\n  --duro-border-accent: 3px;\n  --duro-border-focus-offset: 2px;\n  --duro-border-focus-offset-sm: 1px;\n  --duro-border-focus-ring: 2px;\n  --duro-border-hairline: 1px;\n  --duro-border-strong: 2px;\n  /* layers */\n  --duro-layer-floating: 50;\n  --duro-layer-floating-raised: 60;\n  --duro-layer-modal: 1001;\n  --duro-layer-modal-raised: 1002;\n  --duro-layer-overlay: 1000;\n  --duro-layer-popover: 1040;\n  --duro-layer-popover-raised: 1041;\n  --duro-layer-popup: 1050;\n  --duro-layer-popup-backdrop: 1049;\n  --duro-layer-portal: 1100;\n  --duro-layer-raised: 1;\n  --duro-layer-toast: 1060;\n  /* effects */\n  --duro-effect-overlay-blur: blur(2px);\n  --duro-effect-surface-blur: blur(6px);\n  /* layoutSpacing */\n  --duro-layout-spacing-container-lg: 32px;\n  --duro-layout-spacing-container-md: 24px;\n  --duro-layout-spacing-container-sm: 16px;\n  --duro-layout-spacing-inline-lg: 24px;\n  --duro-layout-spacing-inline-md: 16px;\n  --duro-layout-spacing-inline-sm: 8px;\n  --duro-layout-spacing-inline-xs: 4px;\n  --duro-layout-spacing-stack-lg: 24px;\n  --duro-layout-spacing-stack-md: 16px;\n  --duro-layout-spacing-stack-sm: 8px;\n  --duro-layout-spacing-stack-xl: 48px;\n  --duro-layout-spacing-stack-xs: 4px;\n  /* typography */\n  --duro-typography-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  --duro-typography-font-family-mono: \"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", \"Courier New\", monospace;\n  --duro-typography-font-size-heading: 1.5rem;\n  --duro-typography-font-size-lg: 1.125rem;\n  --duro-typography-font-size-md: 1rem;\n  --duro-typography-font-size-sm: 0.875rem;\n  --duro-typography-font-size-xl: 1.25rem;\n  --duro-typography-font-size-xs: 0.75rem;\n  --duro-typography-font-weight-bold: 700;\n  --duro-typography-font-weight-medium: 500;\n  --duro-typography-font-weight-normal: 400;\n  --duro-typography-font-weight-semibold: 600;\n  --duro-typography-line-height: 1.5;\n  /* typeScale */\n  --duro-type-scale-display-lg: clamp(3.5rem, 2rem + 3.5vw, 4.5rem);\n  --duro-type-scale-display-md: clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem);\n  --duro-type-scale-display-sm: clamp(2.25rem, 1.5rem + 2vw, 3rem);\n  --duro-type-scale-font-size1: 0.75rem;\n  --duro-type-scale-font-size2: 0.8125rem;\n  --duro-type-scale-font-size3: 0.875rem;\n  --duro-type-scale-font-size4: 1rem;\n  --duro-type-scale-font-size5: 1.125rem;\n  --duro-type-scale-font-size6: 1.25rem;\n  --duro-type-scale-font-size7: 1.5rem;\n  --duro-type-scale-font-size8: 1.875rem;\n  --duro-type-scale-font-size9: 2.25rem;\n  --duro-type-scale-letter-spacing-normal: 0;\n  --duro-type-scale-letter-spacing-tight: -0.02em;\n  --duro-type-scale-letter-spacing-wide: 0.04em;\n  --duro-type-scale-line-height1: 1rem;\n  --duro-type-scale-line-height2: 1.25rem;\n  --duro-type-scale-line-height3: 1.25rem;\n  --duro-type-scale-line-height4: 1.5rem;\n  --duro-type-scale-line-height5: 1.5rem;\n  --duro-type-scale-line-height6: 1.75rem;\n  --duro-type-scale-line-height7: 2rem;\n  --duro-type-scale-line-height8: 2.25rem;\n  --duro-type-scale-line-height9: 2.75rem;\n  /* duration */\n  --duro-duration-base: 200ms;\n  --duro-duration-brisk: 160ms;\n  --duro-duration-fast: 150ms;\n  --duro-duration-instant: 0ms;\n  --duro-duration-minimal: 1ms;\n  --duro-duration-quick: 120ms;\n  --duro-duration-slow: 280ms;\n  /* easing */\n  --duro-easing-ease-in: cubic-bezier(0.72, 0, 0.68, 0.28);\n  --duro-easing-ease-out: cubic-bezier(0.32, 0.72, 0, 1);\n  --duro-easing-linear: linear;\n  --duro-easing-standard: ease;\n  /* breakpoints */\n  --duro-breakpoint-lg: 1024px;\n  --duro-breakpoint-md: 768px;\n  --duro-breakpoint-sm: 640px;\n  --duro-breakpoint-xl: 1280px;\n  --duro-breakpoint-xs: 480px;\n}\n\n:root[data-theme=\"light\"] {\n  color-scheme: light;\n  /* colors */\n  --duro-color-accent: #1e40af;\n  --duro-color-accent-contrast: #ffffff;\n  --duro-color-accent-hover: #1a3799;\n  --duro-color-bg: #ffffff;\n  --duro-color-bg-card: #f5f5f5;\n  --duro-color-bg-card-hover: #ebebeb;\n  --duro-color-border: #d4d4d4;\n  --duro-color-contrast-border: rgba(255, 255, 255, 0.33);\n  --duro-color-contrast-surface: #1a1a1a;\n  --duro-color-error: #991b1b;\n  --duro-color-error-bg: rgba(153, 27, 27, 0.08);\n  --duro-color-error-border: rgba(153, 27, 27, 0.3);\n  --duro-color-error-contrast: #ffffff;\n  --duro-color-error-hover: #7f1d1d;\n  --duro-color-error-text: #7f1d1d;\n  --duro-color-fixed-light: #ffffff;\n  --duro-color-highlight: #6b21a8;\n  --duro-color-highlight-bg: rgba(107, 33, 168, 0.08);\n  --duro-color-highlight-border: rgba(107, 33, 168, 0.3);\n  --duro-color-highlight-text: #581c87;\n  --duro-color-info: #1e40af;\n  --duro-color-info-bg: rgba(30, 64, 175, 0.08);\n  --duro-color-info-border: rgba(30, 64, 175, 0.3);\n  --duro-color-info-text: #1e40af;\n  --duro-color-inverse-border: rgba(0, 0, 0, 0.55);\n  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);\n  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);\n  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);\n  --duro-color-on-contrast-surface: #e5e5e5;\n  --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n  --duro-color-scrim: rgba(0, 0, 0, 0.4);\n  --duro-color-success: #166534;\n  --duro-color-success-bg: rgba(22, 101, 52, 0.08);\n  --duro-color-success-border: rgba(22, 101, 52, 0.3);\n  --duro-color-success-text: #14532d;\n  --duro-color-text: #1a1a1a;\n  --duro-color-text-muted: #4a4a4a;\n  --duro-color-warning: #92400e;\n  --duro-color-warning-bg: rgba(146, 64, 14, 0.08);\n  --duro-color-warning-border: rgba(146, 64, 14, 0.3);\n  --duro-color-warning-text: #78350f;\n  /* shadows */\n  --duro-shadow-drop-over: inset 0 0 0 2px #1e40af;\n  --duro-shadow-drop-ready: inset 0 0 0 1px #d4d4d4;\n  --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);\n  --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);\n  --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n:root[data-theme=\"high-contrast\"] {\n  color-scheme: dark;\n  /* colors */\n  --duro-color-accent: #60a5fa;\n  --duro-color-accent-contrast: #000000;\n  --duro-color-accent-hover: #93c5fd;\n  --duro-color-bg: #000000;\n  --duro-color-bg-card: #111111;\n  --duro-color-bg-card-hover: #1a1a1a;\n  --duro-color-border: #555555;\n  --duro-color-contrast-border: rgba(0, 0, 0, 0.42);\n  --duro-color-contrast-surface: #ffffff;\n  --duro-color-error: #f87171;\n  --duro-color-error-bg: rgba(248, 113, 113, 0.15);\n  --duro-color-error-border: rgba(248, 113, 113, 0.5);\n  --duro-color-error-contrast: #000000;\n  --duro-color-error-hover: #fca5a5;\n  --duro-color-error-text: #fca5a5;\n  --duro-color-fixed-light: #ffffff;\n  --duro-color-highlight: #d8b4fe;\n  --duro-color-highlight-bg: rgba(216, 180, 254, 0.15);\n  --duro-color-highlight-border: rgba(216, 180, 254, 0.5);\n  --duro-color-highlight-text: #e9d5ff;\n  --duro-color-info: #60a5fa;\n  --duro-color-info-bg: rgba(96, 165, 250, 0.15);\n  --duro-color-info-border: rgba(96, 165, 250, 0.5);\n  --duro-color-info-text: #bfdbfe;\n  --duro-color-inverse-border: rgba(0, 0, 0, 0.55);\n  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);\n  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);\n  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);\n  --duro-color-on-contrast-surface: #000000;\n  --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n  --duro-color-scrim: rgba(0, 0, 0, 0.4);\n  --duro-color-success: #4ade80;\n  --duro-color-success-bg: rgba(74, 222, 128, 0.15);\n  --duro-color-success-border: rgba(74, 222, 128, 0.5);\n  --duro-color-success-text: #86efac;\n  --duro-color-text: #ffffff;\n  --duro-color-text-muted: #b0b0b0;\n  --duro-color-warning: #fcd34d;\n  --duro-color-warning-bg: rgba(252, 211, 77, 0.15);\n  --duro-color-warning-border: rgba(252, 211, 77, 0.5);\n  --duro-color-warning-text: #fef08a;\n  /* shadows */\n  --duro-shadow-drop-over: inset 0 0 0 2px #60a5fa;\n  --duro-shadow-drop-ready: inset 0 0 0 1px #555555;\n  --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.8);\n  --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.7);\n  --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.6);\n}\n"
   },
   "unions": {
     "AlertVariant": [
@@ -8776,6 +9214,10 @@
       "default",
       "spacious"
     ],
+    "ControlSize": [
+      "default",
+      "small"
+    ],
     "DetailPanelSize": [
       "sm",
       "md"
@@ -8804,6 +9246,14 @@
       "base",
       "slow"
     ],
+    "FieldsetGap": [
+      "xs",
+      "sm",
+      "ms",
+      "md",
+      "lg",
+      "xl"
+    ],
     "HeadingVariant": [
       "displayLg",
       "displayMd",
@@ -8952,6 +9402,13 @@
       "md",
       "lg"
     ],
+    "StatusIconName": [
+      "x-circle",
+      "check-circle",
+      "check-done",
+      "clock",
+      "forbidden"
+    ],
     "StatusIconVariant": [
       "error",
       "success",
@@ -8959,6 +9416,10 @@
       "info",
       "muted"
     ],
+    "TableOfContentsVariant": [
+      "list",
+      "menu"
+    ],
     "TableSize": [
       "sm",
       "md"