@duro-app/cli 5.6.0 → 5.8.0

package/registry.json

@@ -173,6 +173,167 @@
       ],
       "sourcePath": "packages/ui/src/components/Alert/Alert.tsx"
     },
+    "AppShell": {
+      "importPath": "@duro-app/ui",
+      "kind": "compound",
+      "meta": {
+        "anatomy": {
+          "optional": [
+            "Rail",
+            "Header"
+          ],
+          "required": [
+            "Root",
+            "Main"
+          ]
+        },
+        "description": "An application's frame: a navigation rail (a labelled nav, the brand at its top, an optional footer at its foot) beside the main content (main), with an optional Header. Below collapseBelow (sm default, md or lg), measured on the shell's own width, the rail is hidden and one sticky bar (a banner, appBarH tall) holds a Menu button that opens the same navigation in a left Drawer, the brand, and the Header's content when there is one — a shell without a Header still has its navigation on a phone. Above it the Header is a row that scrolls with the page and the rail stays sticky. CSS makes the switch: the server renders one HTML for every width with the brand in both places, and display: none hides the inactive copy, so nothing moves after hydration. A skip link (the first tab stop) focuses Main; an Aside inside Main sticks below the bar. Labels come from props. Compound component — Root is required.",
+        "example": "<AppShell.Root\n  menuLabel=\"Menu\"\n  closeLabel=\"Close navigation\"\n  skipLabel=\"Skip to content\"\n  brand={<TextLink href=\"/\">Acme</TextLink>}\n  collapseBelow=\"md\"\n>\n  <AppShell.Rail aria-label=\"Navigation\" footer={<Text variant=\"bodySm\">{user.name}</Text>}>\n    {({close}) => (\n      <SideNav.Root value={pathname} onValueChange={(v) => { close(); navigate(v) }}>\n        <SideNav.Item value=\"/docs\">Docs</SideNav.Item>\n      </SideNav.Root>\n    )}\n  </AppShell.Rail>\n  <AppShell.Header>{search}</AppShell.Header>\n  <AppShell.Main>{children}</AppShell.Main>\n</AppShell.Root>",
+        "relatedTo": [
+          {
+            "component": "SideNav",
+            "kind": "composition",
+            "relationship": "The usual content of AppShell.Rail; call the render function close() in its onValueChange so the drawer shuts after a pick"
+          },
+          {
+            "component": "PageShell",
+            "kind": "contrast",
+            "relationship": "PageShell centres one page under a header; AppShell frames the whole app around a rail"
+          },
+          {
+            "component": "Drawer",
+            "kind": "composition",
+            "relationship": "AppShell opens the rail in a Drawer below collapseBelow; do not add a second one for it"
+          },
+          {
+            "component": "Aside",
+            "kind": "composition",
+            "relationship": "An Aside inside AppShell.Main sticks below the shell's bar (appBarH) below collapseBelow, and at its own offset above"
+          }
+        ],
+        "whenNotToUse": [
+          "A single page with a header and no rail — use PageShell",
+          "A rail beside one region inside a page — use Grid layout=\"split-wide\" with a SideNav"
+        ],
+        "whenToUse": [
+          "The frame of an app with a persistent navigation rail: an admin, a docs site, a dashboard",
+          "A layout whose navigation must collapse into a drawer on a phone",
+          "An app with no header at all: the bar still gives the Menu button and the brand below collapseBelow"
+        ]
+      },
+      "name": "AppShell",
+      "parts": {
+        "Header": {
+          "name": "Header",
+          "props": [
+            {
+              "description": "The header's content: a search form, the account menu. Below `collapseBelow` it joins the Menu button and the brand in the sticky bar; above, it is a row over Main that scrolls with the page.",
+              "name": "children",
+              "required": false,
+              "type": "ReactNode"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/AppShell/AppShell.tsx"
+        },
+        "Main": {
+          "name": "Main",
+          "props": [
+            {
+              "name": "children",
+              "required": true,
+              "type": "ReactNode"
+            },
+            {
+              "description": "The skip link's target; Root makes one with `useId` when it is left out.",
+              "name": "id",
+              "required": false,
+              "type": "string"
+            },
+            {
+              "description": "The `main` element: the container to hand `useContainerBelow`.",
+              "name": "ref",
+              "required": false,
+              "type": "Ref<HTMLElement>"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/AppShell/AppShell.tsx"
+        },
+        "Rail": {
+          "name": "Rail",
+          "props": [
+            {
+              "description": "Names the navigation landmark and the drawer (\"Navigation\"); required.",
+              "name": "aria-label",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "description": "The navigation (a SideNav, a Tree). Rendered in the rail, or in the drawer while it is open (never both); a function receives `close`.",
+              "name": "children",
+              "required": true,
+              "type": "RailContent"
+            },
+            {
+              "description": "What sits at the rail's foot — the signed-in user, a licence line — and at the end of the drawer. A function receives `close`.",
+              "name": "footer",
+              "required": false,
+              "type": "RailContent"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/AppShell/AppShell.tsx"
+        },
+        "Root": {
+          "name": "Root",
+          "props": [
+            {
+              "description": "The narrow-width button that opens the navigation (\"Menu\"), from your text catalog.",
+              "name": "menuLabel",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "description": "The accessible name of the drawer's close button (\"Close navigation\").",
+              "name": "closeLabel",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "description": "The skip link's text (\"Skip to content\"): the first tab stop, it moves focus to Main.",
+              "name": "skipLabel",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "description": "The app's name or logo — usually a link home. Shown at the top of the rail and, below `collapseBelow`, in the bar beside the Menu button.",
+              "name": "brand",
+              "required": false,
+              "type": "ReactNode"
+            },
+            {
+              "default": "'sm'",
+              "description": "Below this breakpoint, measured on the shell's own width, the rail becomes a Drawer behind the Menu button. Default `sm`.",
+              "name": "collapseBelow",
+              "required": false,
+              "type": "AppShellCollapse",
+              "union": [
+                "sm",
+                "md",
+                "lg"
+              ]
+            },
+            {
+              "description": "`AppShell.Rail`, `AppShell.Main` and an optional `AppShell.Header`, as direct children (Root places the Header's content in its bar).",
+              "name": "children",
+              "required": true,
+              "type": "ReactNode"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/AppShell/AppShell.tsx"
+        }
+      },
+      "props": null,
+      "sourcePath": "packages/ui/src/components/AppShell/AppShell.tsx"
+    },
     "Arrow": {
       "importPath": "@duro-app/diagrams",
       "kind": "component",
@@ -223,6 +384,72 @@
       ],
       "sourcePath": "packages/diagrams/src/components/Arrow/Arrow.tsx"
     },
+    "Aside": {
+      "importPath": "@duro-app/ui",
+      "kind": "component",
+      "meta": {
+        "description": "Content beside the main reading column — a table of contents, related pages: a labelled aside landmark that sticks within the viewport while the page scrolls and scrolls on its own when taller (offset from a spacing token, the raised layer). Forwards ref to the aside element.",
+        "example": "<Grid layout=\"content-aside\" gap=\"xl\">\n  <Prose>{body}</Prose>\n  <Aside aria-label=\"Page outline\">\n    <TableOfContents.Root aria-label=\"On this page\" title=\"On this page\">…</TableOfContents.Root>\n  </Aside>\n</Grid>",
+        "relatedTo": [
+          {
+            "component": "Grid",
+            "kind": "composition",
+            "relationship": "Grid layout=\"content-aside\" gives Aside its asideW track and stacks it below md"
+          },
+          {
+            "component": "TableOfContents",
+            "kind": "composition",
+            "relationship": "The usual content of an Aside on a docs page"
+          }
+        ],
+        "whenNotToUse": [
+          "Inspecting a selected record — use DetailPanel",
+          "A navigation rail for the app — use AppShell.Rail"
+        ],
+        "whenToUse": [
+          "The second track of Grid layout=\"content-aside\": an \"On this page\" list, related links",
+          "Secondary content that should stay in view beside a long page"
+        ]
+      },
+      "name": "Aside",
+      "props": [
+        {
+          "description": "Names the landmark (\"Page outline\"); required, from your text catalog.",
+          "name": "aria-label",
+          "required": true,
+          "type": "string"
+        },
+        {
+          "default": "'lg'",
+          "description": "The gap kept above the aside while it is stuck, and below it when it is taller than the viewport. Default `lg`.",
+          "name": "offset",
+          "required": false,
+          "type": "SpacingToken",
+          "union": [
+            "xs",
+            "sm",
+            "ms",
+            "md",
+            "lg",
+            "xl",
+            "xxl",
+            "xxxl"
+          ]
+        },
+        {
+          "description": "The `aside` element.",
+          "name": "ref",
+          "required": false,
+          "type": "Ref<HTMLElement>"
+        },
+        {
+          "name": "children",
+          "required": true,
+          "type": "ReactNode"
+        }
+      ],
+      "sourcePath": "packages/ui/src/components/Aside/Aside.tsx"
+    },
     "Badge": {
       "importPath": "@duro-app/ui",
       "kind": "component",
@@ -937,6 +1164,69 @@
       ],
       "sourcePath": "packages/ui/src/components/Cluster/Cluster.tsx"
     },
+    "CodeBlock": {
+      "importPath": "@duro-app/ui",
+      "kind": "component",
+      "meta": {
+        "description": "A block of code with a copy button: a pre that scrolls sideways when a line is long, and a Button that copies its text, shows the copied label for copiedDuration ms and announces it through a polite LiveRegion. Labels come from props.",
+        "example": "<CodeBlock copyLabel=\"Copy\" copiedLabel=\"Copied\">\n  <code>pnpm add @duro-app/ui</code>\n</CodeBlock>",
+        "relatedTo": [
+          {
+            "component": "Prose",
+            "kind": "composition",
+            "relationship": "CodeBlock keeps its own styles inside Prose"
+          },
+          {
+            "component": "LiveRegion",
+            "kind": "composition",
+            "relationship": "The copied confirmation is announced through a LiveRegion"
+          }
+        ],
+        "whenNotToUse": [
+          "A short identifier in running text — use inline code (Prose styles it)",
+          "Editable code — use Textarea"
+        ],
+        "whenToUse": [
+          "Code or a command the reader is likely to paste: a docs page, an install step",
+          "A Markdown renderer's pre, inside Prose"
+        ]
+      },
+      "name": "CodeBlock",
+      "props": [
+        {
+          "description": "The code: text, or the `<code>` element a Markdown renderer produced (highlighted spans included). What is copied is its text content.",
+          "name": "children",
+          "required": true,
+          "type": "ReactNode"
+        },
+        {
+          "description": "The copy button's label (\"Copy\"), from your text catalog.",
+          "name": "copyLabel",
+          "required": true,
+          "type": "string"
+        },
+        {
+          "description": "The label while the copy is confirmed (\"Copied\"), also announced to screen readers.",
+          "name": "copiedLabel",
+          "required": true,
+          "type": "string"
+        },
+        {
+          "default": "2000",
+          "description": "How long the confirmation stays, in milliseconds. Default 2000.",
+          "name": "copiedDuration",
+          "required": false,
+          "type": "number"
+        },
+        {
+          "description": "Called when the clipboard refuses the write (an insecure context, a denied permission).",
+          "name": "onCopyError",
+          "required": false,
+          "type": "(error: unknown) => void"
+        }
+      ],
+      "sourcePath": "packages/ui/src/components/CodeBlock/CodeBlock.tsx"
+    },
     "ColorInput": {
       "importPath": "@duro-app/ui",
       "kind": "component",
@@ -1947,14 +2237,17 @@
       "kind": "compound",
       "meta": {
         "anatomy": {
+          "optional": [
+            "Handle"
+          ],
           "required": [
             "Root",
             "Zone",
             "Item"
           ]
         },
-        "description": "Move items between zones with one pointer — mouse, pen and touch through the same pointer-event path (touch holds briefly, then drags; a moving touch stays a scroll). A ghost follows the pointer, the zone under it lights up, and the Root announces picks and drops to screen readers. Dragging is pointer-only by design: keep a button or remove affordance that does the same thing.",
-        "example": "<DragDrop.Root onDrop={({item, target}) => move(item.id, target.zone, target.index)}>\n  <DragDrop.Zone id=\"roster\" label=\"Roster\">\n    <Cluster gap=\"sm\">\n      {people.map((p) => (\n        <DragDrop.Item key={p.id} id={p.id} zone=\"roster\" label={p.name} data={p}>\n          <Button variant=\"secondary\" size=\"small\" onClick={() => slot(p)}>{p.name}</Button>\n        </DragDrop.Item>\n      ))}\n    </Cluster>\n  </DragDrop.Zone>\n  <DragDrop.Zone id=\"gates\" label=\"Gates\" orientation=\"horizontal\">\n    <Inline gap=\"sm\">\n      {gates.map((g) => (\n        <DragDrop.Item key={g.id} id={g.id} zone=\"gates\" label={g.name} data={g}>\n          <Tag removable onRemove={() => unslot(g)}>{g.name}</Tag>\n        </DragDrop.Item>\n      ))}\n    </Inline>\n  </DragDrop.Zone>\n</DragDrop.Root>",
+        "description": "Move items between zones by pointer (mouse, pen and touch through one pointer-event path; touch holds briefly, then drags) or by keyboard (a Handle per item: Space picks up, arrows move, Space drops, Escape cancels). The innermost accepting zone wins, so a zone nested in an Item (a card in a column) takes its own drops; a zone can refuse with a reason that is shown and announced. Placeholders, edge auto-scroll and list-style announcements (through `announce`, for catalog strings) come with it.",
+        "example": "<DragDrop.Root\n  onDrop={({item, target}) => move(item.id, target.zone, target.index)}\n  renderPlaceholder={({label}) => <Text variant=\"caption\">→ {label}</Text>}\n  announce={(e) => t(`board.drag.${e.kind}`, e)}\n>\n  {columns.map((col) => (\n    <DragDrop.Zone key={col.id} id={col.id} label={col.name} orientation=\"vertical\" list\n      accepts={(item) => item.data.kind === 'task' || {ok: false, reason: t('board.attachOnCard')}}>\n      {col.cards.map((card) => (\n        <DragDrop.Item key={card.id} id={card.id} zone={col.id} label={card.title} data={card}>\n          <DragDrop.Handle>\n            <DragDrop.Zone id={`attach:${card.id}`} label={card.title}\n              accepts={(item) => item.data.kind === 'activity'}>\n              <Card>{card.title}</Card>\n            </DragDrop.Zone>\n          </DragDrop.Handle>\n        </DragDrop.Item>\n      ))}\n    </DragDrop.Zone>\n  ))}\n</DragDrop.Root>",
         "relatedTo": [
           {
             "component": "Tag",
@@ -1968,18 +2261,36 @@
           }
         ],
         "whenNotToUse": [
-          "As the ONLY way to do something — every drag needs a tap/click equivalent (WCAG 2.5.7); this component does not provide one",
-          "Long lists that scroll while dragging — the ghost follows the pointer but zones do not auto-scroll",
+          "As the ONLY way to do something — WCAG 2.5.7 asks for a single-pointer alternative to dragging (a button or menu that moves the item); a Handle adds the keyboard path, not a click one",
           "Sorting tabular data — sort the Table instead",
           "React Native — Item renders its children without drag behaviour there"
         ],
         "whenToUse": [
           "Slotting things into places — people into approval gates, cards into columns, files into folders",
-          "Reordering a short row or list when the order is visible and meaningful"
+          "Reordering a short row or list when the order is visible and meaningful",
+          "A board: columns as labelled lists (`list`), cards with a Handle, an attach zone nested in each card"
         ]
       },
       "name": "DragDrop",
       "parts": {
+        "Handle": {
+          "name": "Handle",
+          "props": [
+            {
+              "description": "Defaults to the Item's label.",
+              "name": "aria-label",
+              "required": false,
+              "type": "string"
+            },
+            {
+              "description": "What the handle shows: a grip, or the item's whole face. Keep other controls out of it — a handle is one widget.",
+              "name": "children",
+              "required": true,
+              "type": "ReactNode"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/DragDrop/DragDrop.tsx"
+        },
         "Item": {
           "name": "Item",
           "props": [
@@ -1995,7 +2306,7 @@
               "type": "string"
             },
             {
-              "description": "Read to screen readers when picked up or dropped.",
+              "description": "Read to screen readers when picked up or dropped; a Handle's default accessible name.",
               "name": "label",
               "required": true,
               "type": "string"
@@ -2030,16 +2341,35 @@
           "name": "Root",
           "props": [
             {
-              "description": "Called when an item is released over a zone that accepts it. Reordering inside the item's own zone arrives here too, with the new index.",
+              "description": "Called when an item is released over a zone that accepts it (or dropped with Space/Enter). Reordering inside the item's own zone arrives here too, with the new index.",
               "name": "onDrop",
               "required": true,
               "type": "(event: DragDropEvent<T>) => void"
             },
             {
-              "description": "Overrides the default screen-reader announcements.",
+              "description": "Called whenever the target under the drag changes — a new zone or index, nothing, or a refusal.",
+              "name": "onDragOver",
+              "required": false,
+              "type": "(event: DragDropOverEvent<T>) => void"
+            },
+            {
+              "description": "Supplies every live-region string (pick, move, drop, cancel, refuse), e.g. from the app's message catalog. Defaults to English.",
               "name": "announce",
               "required": false,
-              "type": "(event: {kind: 'pick' | 'drop' | 'cancel'; item: string; zone?: string}) => string"
+              "type": "(event: DragDropAnnouncement) => string"
+            },
+            {
+              "description": "What marks the insertion point in a zone while dragging; a Zone's own renderPlaceholder wins. Without one, only the zone lights up.",
+              "name": "renderPlaceholder",
+              "required": false,
+              "type": "DragDropRenderPlaceholder"
+            },
+            {
+              "default": "DEFAULT_INSTRUCTIONS",
+              "description": "Read by screen readers on a focused Handle.",
+              "name": "instructions",
+              "required": false,
+              "type": "string"
             },
             {
               "name": "children",
@@ -2058,7 +2388,7 @@
               "type": "string"
             },
             {
-              "description": "Read to screen readers when an item is dropped here.",
+              "description": "Read to screen readers when an item moves or drops here; the list's accessible name with `list`.",
               "name": "label",
               "required": true,
               "type": "string"
@@ -2071,10 +2401,53 @@
               "type": "'horizontal' | 'vertical'"
             },
             {
-              "description": "Refuse an item; the zone then never lights up for it.",
+              "description": "Take the item (`true`), let it pass to an outer zone (`false`), or refuse it with a reason that is shown and announced (`{ok: false, reason}`). Omitted: every item is taken.",
               "name": "accepts",
               "required": false,
-              "type": "(item: DragDropItemData<T>) => boolean"
+              "type": "(item: DragDropItemData<T>) => DragDropVerdict"
+            },
+            {
+              "description": "Keyboard order across zones (Left/Right); zones without one follow, in DOM order.",
+              "name": "order",
+              "required": false,
+              "type": "number"
+            },
+            {
+              "description": "Marks the insertion point in this zone; overrides the Root's.",
+              "name": "renderPlaceholder",
+              "required": false,
+              "type": "DragDropRenderPlaceholder"
+            },
+            {
+              "default": "false",
+              "description": "Render the zone as a labelled list (`role=\"list\"`) laid out along `orientation`, its Items as list items. Put the Items directly in it.",
+              "name": "list",
+              "required": false,
+              "type": "boolean"
+            },
+            {
+              "default": "'sm'",
+              "description": "Gap between the Items of a `list` zone.",
+              "name": "gap",
+              "required": false,
+              "type": "SpacingToken",
+              "union": [
+                "xs",
+                "sm",
+                "ms",
+                "md",
+                "lg",
+                "xl",
+                "xxl",
+                "xxxl"
+              ]
+            },
+            {
+              "default": "false",
+              "description": "Stretch to fill the parent (a Timeline bar, a card) instead of sizing to the content.",
+              "name": "fill",
+              "required": false,
+              "type": "boolean"
             },
             {
               "name": "children",
@@ -2677,7 +3050,7 @@
       "importPath": "@duro-app/ui",
       "kind": "component",
       "meta": {
-        "description": "Grid layout. Columns are a count (1-6), a list of weights ([1, 2] for one-third / two-thirds), responsive auto-fit via minColumnWidth, or a named split layout (list/detail, nav/content) that collapses to one column on the width of its own container, so it is safe to nest and to place beside a DetailPanel. Weights rather than CSS template strings, so the same props render as CSS grid on web and as a wrapping flex row on native. For a fixed track beside fractions (content + a 320px aside), tracks takes a token track list — tracks={['1fr', 'asideW']} — web only, equal columns on native.",
+        "description": "Grid layout. Columns are a count (1-6), a list of weights ([1, 2] for one-third / two-thirds), responsive auto-fit via minColumnWidth, or a named split layout (list/detail, nav/content) that collapses to one column on the width of its own container, so it is safe to nest and to place beside a DetailPanel. Weights rather than CSS template strings, so the same props render as CSS grid on web and as a wrapping flex row on native. layout=\"content-aside\" is a reading column beside an Aside (asideW), one column below md on its own container. ref resolves to the outer element (with a layout, the container its query measures — hand it to useContainerBelow). For another fixed track beside fractions, tracks takes a token track list — tracks={['1fr', 'gridColXs']} — web only, equal columns on native.",
         "example": "// Split: list ≥ sizes.gridColSm (240px) beside a detail pane, one column below md\n<Grid layout=\"split\" gap=\"lg\">\n  <List.Root>…</List.Root>\n  <Panel.Root>…</Panel.Root>\n</Grid>\n\n// Responsive: columns auto-fit based on min width\n<Grid minColumnWidth=\"gridColMd\" gap=\"md\">\n  <Card>A</Card>\n  <Card>B</Card>\n  <Card>C</Card>\n</Grid>\n\n// Fixed: always 3 columns\n<Grid columns={3} gap=\"md\">\n  <Card>A</Card>\n  <Card>B</Card>\n  <Card>C</Card>\n</Grid>\n\n// Weighted: a one-third / two-thirds split (works on native too)\n<Grid columns={[1, 2]} gap=\"md\">\n  <Card>Sidebar</Card>\n  <Card>Content</Card>\n</Grid>",
         "relatedTo": [
           {
@@ -2698,7 +3071,8 @@
         "whenToUse": [
           "Card grids, dashboard layouts, multi-column forms",
           "Responsive layouts that should auto-adjust column count",
-          "A list/detail or nav/content screen — layout=\"split\" | \"split-wide\", never a hand-rolled gridTemplateColumns with its own @media; a split inside a split is fine, each collapses on its own room"
+          "A list/detail or nav/content screen — layout=\"split\" | \"split-wide\", never a hand-rolled gridTemplateColumns with its own @media; a split inside a split is fine, each collapses on its own room",
+          "A long page with a table of contents beside it — layout=\"content-aside\" with an Aside"
         ]
       },
       "name": "Grid",
@@ -2732,10 +3106,15 @@
           "type": "Length"
         },
         {
-          "description": "A named responsive layout. `split` is list/detail (1:2, list ≥ 240px), `split-wide` is nav/content (1:3, nav ≥ 280px). Each collapses to one column on the width of its OWN container — `split` below `sm` (640px), `split-wide` below `md` (768px) — so a split nested inside another split, or beside an open DetailPanel, collapses when it runs out of room rather than when the window does. Wins over `columns` / `minColumnWidth`.",
+          "description": "A named responsive layout. `split` is list/detail (1:2, list ≥ 240px), `split-wide` is nav/content (1:3, nav ≥ 280px). Each collapses to one column on the width of its OWN container — `split` below `sm` (640px), `split-wide` below `md` (768px) — so a split nested inside another split, or beside an open DetailPanel, collapses when it runs out of room rather than when the window does. `content-aside` is a reading column beside an `Aside` (`asideW`, 320px), one column below `md`. Wins over `columns` / `minColumnWidth`.",
           "name": "layout",
           "required": false,
-          "type": "GridLayout"
+          "type": "GridLayout",
+          "union": [
+            "split",
+            "split-wide",
+            "content-aside"
+          ]
         },
         {
           "description": "An explicit track list, for columns that are not all fractions: a size token for a fixed track (`['1fr', 'asideW']`), or `minmax()` / `fit-content()` of tokens and fractions (`'minmax(gridColXs, 1fr)'`). A px is a type error. Web only — on native it falls back to equal columns, one per track. Wins over `columns` / `minColumnWidth`; `layout` wins over it.",
@@ -2743,6 +3122,12 @@
           "required": false,
           "type": "readonly GridTrack[]"
         },
+        {
+          "description": "The Grid's outer element: with a `layout`, the wrapper its container query measures (hand it to `useContainerBelow` to follow the same collapse); otherwise the grid itself. Web only: on native the ref is not attached.",
+          "name": "ref",
+          "required": false,
+          "type": "Ref<HTMLDivElement>"
+        },
         {
           "name": "children",
           "required": true,
@@ -2807,6 +3192,12 @@
           "required": false,
           "type": "'start' | 'center' | 'end'"
         },
+        {
+          "description": "The heading's id: an in-page link's target (`href=\"#id\"`), an `aria-labelledby` reference.",
+          "name": "id",
+          "required": false,
+          "type": "string"
+        },
         {
           "name": "children",
           "required": true,
@@ -3728,6 +4119,68 @@
       "props": null,
       "sourcePath": "packages/ui/src/components/Listbox/Listbox.tsx"
     },
+    "LiveRegion": {
+      "importPath": "@duro-app/ui",
+      "kind": "component",
+      "meta": {
+        "description": "Tells assistive tech about a change that has no focus move: a polite (role=\"status\") or assertive (role=\"alert\") region. Always mounted — render it empty and change its content to announce; visuallyHidden keeps it off screen.",
+        "example": "<LiveRegion visuallyHidden>{copied ? 'Link copied' : ''}</LiveRegion>",
+        "relatedTo": [
+          {
+            "component": "VisuallyHidden",
+            "kind": "contrast",
+            "relationship": "VisuallyHidden hides static text; LiveRegion visuallyHidden announces changing text"
+          },
+          {
+            "component": "CodeBlock",
+            "kind": "composition",
+            "relationship": "CodeBlock announces \"copied\" through a LiveRegion"
+          }
+        ],
+        "whenNotToUse": [
+          "A message that also needs to be seen and dismissed — use Toast (it announces itself)",
+          "An inline field error — use Field.Error"
+        ],
+        "whenToUse": [
+          "Confirming an action that leaves focus where it is (\"Link copied\", \"Saved\")",
+          "A result that arrives later (\"12 results\", \"Answer ready\")",
+          "An error the person must hear now — politeness=\"assertive\""
+        ]
+      },
+      "name": "LiveRegion",
+      "props": [
+        {
+          "description": "What to announce. Change it to announce; leave it empty when there is nothing to say — never unmount the region to clear it.",
+          "name": "children",
+          "required": false,
+          "type": "ReactNode"
+        },
+        {
+          "default": "'polite'",
+          "description": "`polite` (default) waits for the screen reader to finish (`role=\"status\"`): \"Copied\", \"3 results\". `assertive` interrupts (`role=\"alert\"`): only for what the person must hear now, such as an error that blocks them.",
+          "name": "politeness",
+          "required": false,
+          "type": "LiveRegionPoliteness",
+          "union": [
+            "polite",
+            "assertive"
+          ]
+        },
+        {
+          "default": "false",
+          "description": "Keeps the region off screen and in the accessibility tree. Default false.",
+          "name": "visuallyHidden",
+          "required": false,
+          "type": "boolean"
+        },
+        {
+          "name": "id",
+          "required": false,
+          "type": "string"
+        }
+      ],
+      "sourcePath": "packages/ui/src/components/LiveRegion/LiveRegion.tsx"
+    },
     "Menu": {
       "importPath": "@duro-app/ui",
       "kind": "compound",
@@ -3895,9 +4348,81 @@
           ],
           "sourcePath": "packages/ui/src/components/Menu/Menu.tsx"
         }
-      },
-      "props": null,
-      "sourcePath": "packages/ui/src/components/Menu/Menu.tsx"
+      },
+      "props": null,
+      "sourcePath": "packages/ui/src/components/Menu/Menu.tsx"
+    },
+    "Meter": {
+      "importPath": "@duro-app/ui",
+      "kind": "component",
+      "meta": {
+        "description": "A scalar inside a known range — WIP 2 of 3, a milestone 40% done — as role=\"meter\" with a value text, drawn as a thin bar (the meterH token). The label is the accessible name; valueText says the value in words.",
+        "example": "<Meter label=\"In progress WIP\" value={2} max={3} valueText=\"2 of 3\" />\n<Meter label=\"Milestone done\" value={0.4} tone=\"success\" />",
+        "relatedTo": [
+          {
+            "component": "Badge",
+            "kind": "contrast",
+            "relationship": "Badge states a status or a count; Meter shows a level within a range"
+          }
+        ],
+        "whenNotToUse": [
+          "Progress of a task that is still running — use Spinner (or a determinate progress pattern)",
+          "Picking a value — use an input; a meter has no thumb",
+          "A status with no range (ok/failing) — use Badge or StatusIcon"
+        ],
+        "whenToUse": [
+          "A level against a limit or a total: WIP against its limit, tasks done in a milestone, quota used",
+          "Beside a count, when the proportion matters more than the number"
+        ]
+      },
+      "name": "Meter",
+      "props": [
+        {
+          "name": "value",
+          "required": true,
+          "type": "number"
+        },
+        {
+          "default": "0",
+          "description": "Defaults to 0.",
+          "name": "min",
+          "required": false,
+          "type": "number"
+        },
+        {
+          "default": "1",
+          "description": "Defaults to 1, so a fraction needs nothing else.",
+          "name": "max",
+          "required": false,
+          "type": "number"
+        },
+        {
+          "description": "The accessible name, e.g. \"In progress WIP\".",
+          "name": "label",
+          "required": true,
+          "type": "string"
+        },
+        {
+          "description": "What screen readers read for the value, e.g. \"4 of 3, over the limit\". Defaults to the percentage.",
+          "name": "valueText",
+          "required": false,
+          "type": "string"
+        },
+        {
+          "default": "'accent'",
+          "description": "The fill's colour; defaults to accent.",
+          "name": "tone",
+          "required": false,
+          "type": "MeterTone",
+          "union": [
+            "accent",
+            "success",
+            "warning",
+            "error"
+          ]
+        }
+      ],
+      "sourcePath": "packages/ui/src/components/Meter/Meter.tsx"
     },
     "Node": {
       "importPath": "@duro-app/diagrams",
@@ -4467,6 +4992,50 @@
       "props": null,
       "sourcePath": "packages/ui/src/components/Popover/Popover.tsx"
     },
+    "Prose": {
+      "importPath": "@duro-app/ui",
+      "kind": "component",
+      "meta": {
+        "description": "The container for HTML Duro does not author — rendered Markdown, CMS output: headings, paragraphs, lists, tables, blockquotes, inline code, links and images are styled from tokens by descendant rules scoped to it (plain CSS in dist/index.css, :where() and its own cascade layer). Duro components inside it keep their styles, and an app's own CSS wins over every Prose rule. Web only.",
+        "example": "<Prose>\n  <ReactMarkdown components={{pre: ({children}) => <CodeBlock copyLabel=\"Copy\" copiedLabel=\"Copied\">{children}</CodeBlock>}}>\n    {body}\n  </ReactMarkdown>\n</Prose>",
+        "relatedTo": [
+          {
+            "component": "CodeBlock",
+            "kind": "composition",
+            "relationship": "Pass CodeBlock as the Markdown renderer's pre, for a copy button"
+          },
+          {
+            "component": "TextLink",
+            "kind": "composition",
+            "relationship": "Pass TextLink as the renderer's a, for onNavigate; it keeps its own styles inside Prose"
+          }
+        ],
+        "whenNotToUse": [
+          "Text you write as components — use Heading, Text and Stack",
+          "A short label or paragraph — use Text"
+        ],
+        "whenToUse": [
+          "The body of a docs page rendered from Markdown",
+          "Any HTML produced by a renderer you do not write as JSX"
+        ]
+      },
+      "name": "Prose",
+      "props": [
+        {
+          "description": "HTML Duro does not author: the output of a Markdown renderer.",
+          "name": "children",
+          "required": true,
+          "type": "ReactNode"
+        },
+        {
+          "description": "The container element.",
+          "name": "ref",
+          "required": false,
+          "type": "Ref<HTMLDivElement>"
+        }
+      ],
+      "sourcePath": "packages/ui/src/components/Prose/Prose.tsx"
+    },
     "RadioGroup": {
       "importPath": "@duro-app/ui",
       "kind": "compound",
@@ -4968,6 +5537,12 @@
               "required": true,
               "type": "ReactNode"
             },
+            {
+              "description": "Names the navigation landmark (\"Main\", \"Settings\"). Give one whenever the page has another nav (a breadcrumb, a pager): screen readers list landmarks by name.",
+              "name": "aria-label",
+              "required": false,
+              "type": "string"
+            },
             {
               "name": "value",
               "required": false,
@@ -6617,11 +7192,254 @@
       ],
       "sourcePath": "packages/ui/src/components/ThemeProvider/ThemeProvider.tsx"
     },
+    "Time": {
+      "importPath": "@duro-app/ui",
+      "kind": "component",
+      "meta": {
+        "description": "A date or time in running text as a <time> element: the visible text comes from you, the exact instant goes in dateTime (an ISO string) and title. relative(date, {now, locale}) gives the text on Intl.RelativeTimeFormat (\"3 days ago\", \"il y a 3 jours\"); now is required, so the server and the client render the same string. Web only.",
+        "example": "<Time dateTime={doc.lastCommitAt} title={formatFull(doc.lastCommitAt, locale)}>\n  {relative(doc.lastCommitAt, {now: loaderNow, locale})}\n</Time>",
+        "whenNotToUse": [
+          "A date the person edits — use an Input",
+          "A live countdown or a clock — Time renders once from the now you pass"
+        ],
+        "whenToUse": [
+          "When something happened: \"Updated 3 days ago\", a commit date, a last-indexed time",
+          "Any date shown as relative text whose exact value should stay available"
+        ]
+      },
+      "name": "Time",
+      "props": [
+        {
+          "description": "The instant, machine-readable: a `Date` (written as its ISO string) or an ISO 8601 string, which is passed through unchanged.",
+          "name": "dateTime",
+          "required": true,
+          "type": "Date | string"
+        },
+        {
+          "description": "The exact date and time, shown on hover (\"8 October 2026, 14:03 UTC\"), formatted by you in the reader's locale.",
+          "name": "title",
+          "required": false,
+          "type": "string"
+        },
+        {
+          "description": "What the reader sees: a relative label from `relative()`, or a date.",
+          "name": "children",
+          "required": true,
+          "type": "ReactNode"
+        }
+      ],
+      "sourcePath": "packages/ui/src/components/Time/Time.tsx"
+    },
+    "Timeline": {
+      "importPath": "@duro-app/ui",
+      "kind": "compound",
+      "meta": {
+        "anatomy": {
+          "required": [
+            "Root",
+            "Row",
+            "Bar"
+          ]
+        },
+        "description": "Rows of date bars against a date axis (milestones, releases, sprints), with a progress fill per bar and a today marker. Dates are calendar days (YYYY-MM-DD, UTC). A bar is a toggle button (selected/onSelect), can be a DragDrop.Zone target (dropZone), and its edges are keyboard sliders whose value text is a date (onStartChange/onEndChange).",
+        "example": "<Timeline.Root aria-label=\"Milestones\" start=\"2026-09-21\" end=\"2026-11-08\" today=\"2026-10-08\">\n  {milestones.map((m) => (\n    <Timeline.Row key={m.id} label={m.title} description={`${m.done} of ${m.total} done`}>\n      <Timeline.Bar\n        label={m.title}\n        start={m.start}\n        end={m.end}\n        progress={m.done / m.total}\n        selected={selected === m.id}\n        onSelect={() => select(m.id)}\n        onEndChange={(end) => reschedule(m.id, {end})}\n        dropZone={{id: `ms:${m.id}`, label: m.title}}\n      >\n        {m.done}/{m.total}\n      </Timeline.Bar>\n    </Timeline.Row>\n  ))}\n</Timeline.Root>",
+        "relatedTo": [
+          {
+            "component": "DragDrop",
+            "kind": "composition",
+            "relationship": "Pass dropZone to make a bar a DragDrop.Zone inside a DragDrop.Root"
+          },
+          {
+            "component": "Meter",
+            "kind": "contrast",
+            "relationship": "Meter shows one level; Timeline places spans of time"
+          }
+        ],
+        "whenNotToUse": [
+          "A schedule by hour — a calendar grid fits (timeGutterW, dayHeaderH)",
+          "A dependency graph or a full Gantt chart with links — this draws bars, not edges",
+          "Moving dates with the pointer — edges are keyboard sliders; give a date field for the rest"
+        ],
+        "whenToUse": [
+          "Milestones or releases over weeks, where the overlap and today matter",
+          "Dropping work onto a milestone (bars as DragDrop zones)"
+        ]
+      },
+      "name": "Timeline",
+      "parts": {
+        "Bar": {
+          "name": "Bar",
+          "props": [
+            {
+              "name": "start",
+              "required": true,
+              "type": "TimelineDate"
+            },
+            {
+              "name": "end",
+              "required": true,
+              "type": "TimelineDate"
+            },
+            {
+              "description": "The bar's accessible name.",
+              "name": "label",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "description": "Done fraction, 0–1, drawn as a fill from the start edge.",
+              "name": "progress",
+              "required": false,
+              "type": "number"
+            },
+            {
+              "default": "'default'",
+              "description": "`planned` draws a dashed outline; `done` the success tone.",
+              "name": "tone",
+              "required": false,
+              "type": "'default' | 'planned' | 'done'"
+            },
+            {
+              "description": "Makes the bar a toggle button (aria-pressed).",
+              "name": "selected",
+              "required": false,
+              "type": "boolean"
+            },
+            {
+              "name": "onSelect",
+              "required": false,
+              "type": "() => void"
+            },
+            {
+              "description": "Adds the start-edge slider.",
+              "name": "onStartChange",
+              "required": false,
+              "type": "(date: TimelineDate) => void"
+            },
+            {
+              "description": "Adds the end-edge slider.",
+              "name": "onEndChange",
+              "required": false,
+              "type": "(date: TimelineDate) => void"
+            },
+            {
+              "description": "Names of the edge sliders; default \"<label>, start\" / \"<label>, end\".",
+              "name": "startLabel",
+              "required": false,
+              "type": "string"
+            },
+            {
+              "name": "endLabel",
+              "required": false,
+              "type": "string"
+            },
+            {
+              "description": "Makes the bar a DragDrop.Zone (needs a DragDrop.Root above).",
+              "name": "dropZone",
+              "required": false,
+              "type": "TimelineBarDropZone<T>"
+            },
+            {
+              "description": "Text inside the bar, e.g. \"4/7\".",
+              "name": "children",
+              "required": false,
+              "type": "ReactNode"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/Timeline/Timeline.tsx"
+        },
+        "Root": {
+          "name": "Root",
+          "props": [
+            {
+              "description": "First day on the axis.",
+              "name": "start",
+              "required": true,
+              "type": "TimelineDate"
+            },
+            {
+              "description": "Last day on the axis (included).",
+              "name": "end",
+              "required": true,
+              "type": "TimelineDate"
+            },
+            {
+              "description": "Draws the today marker when inside the range.",
+              "name": "today",
+              "required": false,
+              "type": "TimelineDate"
+            },
+            {
+              "description": "The timeline's accessible name.",
+              "name": "aria-label",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "description": "Text above the row labels, e.g. \"Milestones\".",
+              "name": "heading",
+              "required": false,
+              "type": "ReactNode"
+            },
+            {
+              "default": "'Today'",
+              "description": "The today marker's text.",
+              "name": "todayLabel",
+              "required": false,
+              "type": "string"
+            },
+            {
+              "description": "BCP 47 locale for the default date format.",
+              "name": "locale",
+              "required": false,
+              "type": "string"
+            },
+            {
+              "description": "Formats a day for the axis and the edge sliders' value text.",
+              "name": "formatDate",
+              "required": false,
+              "type": "(date: TimelineDate) => string"
+            },
+            {
+              "name": "children",
+              "required": true,
+              "type": "ReactNode"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/Timeline/Timeline.tsx"
+        },
+        "Row": {
+          "name": "Row",
+          "props": [
+            {
+              "description": "The row's name, shown in the label column.",
+              "name": "label",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "description": "A second line under the label, e.g. \"4 of 7 done\".",
+              "name": "description",
+              "required": false,
+              "type": "ReactNode"
+            },
+            {
+              "name": "children",
+              "required": false,
+              "type": "ReactNode"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/Timeline/Timeline.tsx"
+        }
+      },
+      "props": null,
+      "sourcePath": "packages/ui/src/components/Timeline/Timeline.tsx"
+    },
     "ToastProvider": {
       "importPath": "@duro-app/ui",
       "kind": "provider",
       "meta": {
-        "description": "Transient, self-dismissing notification for the RESULT of an action (saved, sent, revoked, failed). Mount <ToastProvider> once at the app root and call useToast().toast() from anywhere. Toasts stack and portal above dialogs.",
+        "description": "Transient, self-dismissing notification for the RESULT of an action (saved, sent, revoked, failed). Mount <ToastProvider> once at the app root and call useToast().toast() from anywhere. Toasts stack and portal above dialogs. Variants: success, info, warning, error. The countdown pauses while a toast is hovered or holds focus, and every toast has a close button (`dismissLabel` on the provider names it).",
         "example": "function Example() {\n  const {toast} = useToast()\n  return (\n    <Button onClick={() => toast({variant: 'success', message: 'Grant revoked', action: {label: 'Undo', onClick: restore}})}>\n      Revoke\n    </Button>\n  )\n}",
         "relatedTo": [
           {
@@ -6643,11 +7461,19 @@
         "whenToUse": [
           "Confirming an action succeeded (e.g. \"Grant revoked\")",
           "Reporting an action failed, with the reason",
-          "Reversible actions that benefit from an inline Undo"
+          "Reversible actions that benefit from an inline Undo",
+          "A soft limit crossed but allowed (variant warning), e.g. a column over its WIP limit"
         ]
       },
       "name": "ToastProvider",
       "props": [
+        {
+          "default": "'Dismiss'",
+          "description": "Accessible name of each toast's close button, e.g. from the app's message catalog.",
+          "name": "dismissLabel",
+          "required": false,
+          "type": "string"
+        },
         {
           "name": "children",
           "required": true,
@@ -7318,6 +8144,25 @@
       ],
       "sourcePath": "packages/ui/src/components/VisuallyHidden/VisuallyHidden.tsx"
     },
+    "relative": {
+      "importPath": "@duro-app/ui",
+      "kind": "function",
+      "meta": {
+        "description": "A date or time in running text as a <time> element: the visible text comes from you, the exact instant goes in dateTime (an ISO string) and title. relative(date, {now, locale}) gives the text on Intl.RelativeTimeFormat (\"3 days ago\", \"il y a 3 jours\"); now is required, so the server and the client render the same string. Web only.",
+        "example": "<Time dateTime={doc.lastCommitAt} title={formatFull(doc.lastCommitAt, locale)}>\n  {relative(doc.lastCommitAt, {now: loaderNow, locale})}\n</Time>",
+        "whenNotToUse": [
+          "A date the person edits — use an Input",
+          "A live countdown or a clock — Time renders once from the now you pass"
+        ],
+        "whenToUse": [
+          "When something happened: \"Updated 3 days ago\", a commit date, a last-indexed time",
+          "Any date shown as relative text whose exact value should stay available"
+        ]
+      },
+      "name": "relative",
+      "props": [],
+      "sourcePath": "packages/ui/src/components/Time/relative.ts"
+    },
     "useColorMode": {
       "importPath": "@duro-app/ui",
       "kind": "hook",
@@ -7359,6 +8204,14 @@
       "props": [],
       "sourcePath": "packages/ui/src/components/ColorMode/ColorMode.tsx"
     },
+    "useContainerBelow": {
+      "importPath": "@duro-app/ui",
+      "kind": "hook",
+      "meta": null,
+      "name": "useContainerBelow",
+      "props": [],
+      "sourcePath": "packages/ui/src/hooks/useContainerBelow.ts"
+    },
     "useContainerQuery": {
       "importPath": "@duro-app/ui",
       "kind": "hook",
@@ -7419,14 +8272,17 @@
       "kind": "hook",
       "meta": {
         "anatomy": {
+          "optional": [
+            "Handle"
+          ],
           "required": [
             "Root",
             "Zone",
             "Item"
           ]
         },
-        "description": "Move items between zones with one pointer — mouse, pen and touch through the same pointer-event path (touch holds briefly, then drags; a moving touch stays a scroll). A ghost follows the pointer, the zone under it lights up, and the Root announces picks and drops to screen readers. Dragging is pointer-only by design: keep a button or remove affordance that does the same thing.",
-        "example": "<DragDrop.Root onDrop={({item, target}) => move(item.id, target.zone, target.index)}>\n  <DragDrop.Zone id=\"roster\" label=\"Roster\">\n    <Cluster gap=\"sm\">\n      {people.map((p) => (\n        <DragDrop.Item key={p.id} id={p.id} zone=\"roster\" label={p.name} data={p}>\n          <Button variant=\"secondary\" size=\"small\" onClick={() => slot(p)}>{p.name}</Button>\n        </DragDrop.Item>\n      ))}\n    </Cluster>\n  </DragDrop.Zone>\n  <DragDrop.Zone id=\"gates\" label=\"Gates\" orientation=\"horizontal\">\n    <Inline gap=\"sm\">\n      {gates.map((g) => (\n        <DragDrop.Item key={g.id} id={g.id} zone=\"gates\" label={g.name} data={g}>\n          <Tag removable onRemove={() => unslot(g)}>{g.name}</Tag>\n        </DragDrop.Item>\n      ))}\n    </Inline>\n  </DragDrop.Zone>\n</DragDrop.Root>",
+        "description": "Move items between zones by pointer (mouse, pen and touch through one pointer-event path; touch holds briefly, then drags) or by keyboard (a Handle per item: Space picks up, arrows move, Space drops, Escape cancels). The innermost accepting zone wins, so a zone nested in an Item (a card in a column) takes its own drops; a zone can refuse with a reason that is shown and announced. Placeholders, edge auto-scroll and list-style announcements (through `announce`, for catalog strings) come with it.",
+        "example": "<DragDrop.Root\n  onDrop={({item, target}) => move(item.id, target.zone, target.index)}\n  renderPlaceholder={({label}) => <Text variant=\"caption\">→ {label}</Text>}\n  announce={(e) => t(`board.drag.${e.kind}`, e)}\n>\n  {columns.map((col) => (\n    <DragDrop.Zone key={col.id} id={col.id} label={col.name} orientation=\"vertical\" list\n      accepts={(item) => item.data.kind === 'task' || {ok: false, reason: t('board.attachOnCard')}}>\n      {col.cards.map((card) => (\n        <DragDrop.Item key={card.id} id={card.id} zone={col.id} label={card.title} data={card}>\n          <DragDrop.Handle>\n            <DragDrop.Zone id={`attach:${card.id}`} label={card.title}\n              accepts={(item) => item.data.kind === 'activity'}>\n              <Card>{card.title}</Card>\n            </DragDrop.Zone>\n          </DragDrop.Handle>\n        </DragDrop.Item>\n      ))}\n    </DragDrop.Zone>\n  ))}\n</DragDrop.Root>",
         "relatedTo": [
           {
             "component": "Tag",
@@ -7440,14 +8296,14 @@
           }
         ],
         "whenNotToUse": [
-          "As the ONLY way to do something — every drag needs a tap/click equivalent (WCAG 2.5.7); this component does not provide one",
-          "Long lists that scroll while dragging — the ghost follows the pointer but zones do not auto-scroll",
+          "As the ONLY way to do something — WCAG 2.5.7 asks for a single-pointer alternative to dragging (a button or menu that moves the item); a Handle adds the keyboard path, not a click one",
           "Sorting tabular data — sort the Table instead",
           "React Native — Item renders its children without drag behaviour there"
         ],
         "whenToUse": [
           "Slotting things into places — people into approval gates, cards into columns, files into folders",
-          "Reordering a short row or list when the order is visible and meaningful"
+          "Reordering a short row or list when the order is visible and meaningful",
+          "A board: columns as labelled lists (`list`), cards with a Handle, an attach zone nested in each card"
         ]
       },
       "name": "useDragDrop",
@@ -7484,7 +8340,7 @@
       "importPath": "@duro-app/ui",
       "kind": "hook",
       "meta": {
-        "description": "Transient, self-dismissing notification for the RESULT of an action (saved, sent, revoked, failed). Mount <ToastProvider> once at the app root and call useToast().toast() from anywhere. Toasts stack and portal above dialogs.",
+        "description": "Transient, self-dismissing notification for the RESULT of an action (saved, sent, revoked, failed). Mount <ToastProvider> once at the app root and call useToast().toast() from anywhere. Toasts stack and portal above dialogs. Variants: success, info, warning, error. The countdown pauses while a toast is hovered or holds focus, and every toast has a close button (`dismissLabel` on the provider names it).",
         "example": "function Example() {\n  const {toast} = useToast()\n  return (\n    <Button onClick={() => toast({variant: 'success', message: 'Grant revoked', action: {label: 'Undo', onClick: restore}})}>\n      Revoke\n    </Button>\n  )\n}",
         "relatedTo": [
           {
@@ -7506,7 +8362,8 @@
         "whenToUse": [
           "Confirming an action succeeded (e.g. \"Grant revoked\")",
           "Reporting an action failed, with the reason",
-          "Reversible actions that benefit from an inline Undo"
+          "Reversible actions that benefit from an inline Undo",
+          "A soft limit crossed but allowed (variant warning), e.g. a column over its WIP limit"
         ]
       },
       "name": "useToast",
@@ -9003,6 +9860,14 @@
           {
             "key": "dayHeaderH",
             "value": "46px"
+          },
+          {
+            "key": "timelineLabelW",
+            "value": "180px"
+          },
+          {
+            "key": "appBarH",
+            "value": "61px"
           }
         ],
         "exportName": "sizes",
@@ -9153,7 +10018,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-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"
+    "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-app-bar-h: 61px;\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-timeline-label-w: 180px;\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": [
@@ -9162,6 +10027,11 @@
       "warning",
       "info"
     ],
+    "AppShellCollapse": [
+      "sm",
+      "md",
+      "lg"
+    ],
     "BadgeSize": [
       "sm",
       "md"
@@ -9254,6 +10124,11 @@
       "lg",
       "xl"
     ],
+    "GridLayout": [
+      "split",
+      "split-wide",
+      "content-aside"
+    ],
     "HeadingVariant": [
       "displayLg",
       "displayMd",
@@ -9340,6 +10215,16 @@
       "listMaxH",
       "listMaxHSm"
     ],
+    "LiveRegionPoliteness": [
+      "polite",
+      "assertive"
+    ],
+    "MeterTone": [
+      "accent",
+      "success",
+      "warning",
+      "error"
+    ],
     "PageShellMaxWidth": [
       "sm",
       "md",
@@ -9474,7 +10359,8 @@
     "ToastVariant": [
       "success",
       "error",
-      "info"
+      "info",
+      "warning"
     ],
     "ToggleSize": [
       "default",