@nadicodeai/design-system 12.1.82 → 12.1.84

package/DESIGN.md

@@ -12,12 +12,12 @@ colors:
   action-hover: "#2e2e2e"
   action-active: "#000000"
   ink: "#111111"
-  body: "#444444"
+  body: "#666666"
   muted: "#6b6b6b"
   canvas: "#ffffff"
   canvas-soft: "#fafafa"
   canvas-soft-2: "#f5f5f5"
-  material-workspace: "#f7f7f7"
+  material-workspace: "#fafafa"
   material-solid: "#ffffff"
   material-resting: "#ffffff"
   material-raised: "#ffffff"
@@ -27,9 +27,9 @@ colors:
   input: "#757575"
   focus-ring: "#111111"
   scrim: "#000000"
-  link: "#00713d"
-  link-deep: "#00522c"
-  link-bg-soft: "#c6efd9"
+  link: "#0068d6"
+  link-deep: "#0055b3"
+  link-bg-soft: "#ebf5ff"
   info: "#1e3cff"
   info-soft: "#e8ecff"
   info-deep: "#0e1d8a"
@@ -75,7 +75,7 @@ colors:
   dark-material-floating: "#111111"
   dark-material-modal: "#111111"
   dark-ink: "#ededed"
-  dark-body: "#c7c7c7"
+  dark-body: "#a1a1a1"
   dark-muted: "#9e9e9e"
   dark-line: "#262626"
   dark-input: "#747474"
@@ -84,9 +84,9 @@ colors:
   dark-action-foreground: "#0a0a0a"
   dark-action-hover: "#d6d6d6"
   dark-action-active: "#c7c7c7"
-  dark-link: "#4ecf8c"
-  dark-link-deep: "#93e3b8"
-  dark-link-bg-soft: "#00351c"
+  dark-link: "#52a8ff"
+  dark-link-deep: "#8ec8ff"
+  dark-link-bg-soft: "#0f223d"
   dark-focus-ring: "#ededed"
   dark-scrim: "#000000"
   dark-error: "#f5a3a1"
@@ -117,68 +117,141 @@ colors:
   dark-chart-5: "#33d1cb"
   dark-chart-6: "#9575cd"
 
+  category-teal-soft: "#e0f7f4"
+  category-teal-deep: "#08665e"
+  dark-category-teal-soft: "#062b28"
+  dark-category-teal-deep: "#75e0d5"
+  category-purple-soft: "#f3e8ff"
+  category-purple-deep: "#7525a7"
+  dark-category-purple-soft: "#2b143e"
+  dark-category-purple-deep: "#d5a3f7"
+  category-pink-soft: "#fce7f1"
+  category-pink-deep: "#a32464"
+  dark-category-pink-soft: "#381525"
+  dark-category-pink-deep: "#f7a3cf"
+
 typography:
   display-xl:
     fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
     fontSize: 72px
-    fontWeight: 500
-    lineHeight: 74px
-    letterSpacing: -2.52px
+    fontWeight: 600
+    lineHeight: 72px
+    letterSpacing: -4.32px
+  display-wide:
+    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
+    fontSize: 64px
+    fontWeight: 600
+    lineHeight: 64px
+    letterSpacing: -3.84px
   display-lg:
     fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 52px
-    fontWeight: 500
-    lineHeight: 54px
-    letterSpacing: -1.5px
+    fontSize: 56px
+    fontWeight: 600
+    lineHeight: 56px
+    letterSpacing: -3.36px
+  display-section:
+    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
+    fontSize: 48px
+    fontWeight: 600
+    lineHeight: 56px
+    letterSpacing: -2.88px
   display-md:
     fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
     fontSize: 40px
-    fontWeight: 500
-    lineHeight: 42px
-    letterSpacing: -1px
+    fontWeight: 600
+    lineHeight: 48px
+    letterSpacing: -2.4px
   heading-lg:
     fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 30px
+    fontSize: 32px
     fontWeight: 600
-    lineHeight: 32px
-    letterSpacing: 0px
+    lineHeight: 40px
+    letterSpacing: -1.28px
   heading-md:
     fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
     fontSize: 24px
     fontWeight: 600
     lineHeight: 32px
-    letterSpacing: 0px
+    letterSpacing: -0.96px
   heading-sm:
     fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
     fontSize: 20px
     fontWeight: 600
-    lineHeight: 28px
+    lineHeight: 26px
+    letterSpacing: -0.4px
+  heading-xs:
+    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
+    fontSize: 16px
+    fontWeight: 600
+    lineHeight: 24px
+    letterSpacing: -0.32px
+  heading-compact:
+    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
+    fontSize: 14px
+    fontWeight: 600
+    lineHeight: 20px
+    letterSpacing: -0.28px
+  button-lg:
+    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
+    fontSize: 16px
+    fontWeight: 500
+    lineHeight: 20px
     letterSpacing: 0px
-  body-lg:
+  button:
+    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 20px
+    letterSpacing: 0px
+  button-xs:
+    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
+    fontSize: 12px
+    fontWeight: 500
+    lineHeight: 16px
+    letterSpacing: 0px
+  label-display:
+    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
+    fontSize: 20px
+    fontWeight: 400
+    lineHeight: 32px
+    letterSpacing: 0px
+  label-lg:
     fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
     fontSize: 18px
     fontWeight: 400
-    lineHeight: 27px
+    lineHeight: 20px
     letterSpacing: 0px
-  body-md:
+  label-md:
     fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
     fontSize: 16px
     fontWeight: 400
-    lineHeight: 25px
+    lineHeight: 20px
     letterSpacing: 0px
-  body-sm:
+  label:
     fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
     fontSize: 14px
     fontWeight: 400
     lineHeight: 20px
     letterSpacing: 0px
+  label-sm:
+    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
+    fontSize: 13px
+    fontWeight: 400
+    lineHeight: 16px
+    letterSpacing: 0px
   caption:
     fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
     fontSize: 12px
     fontWeight: 400
     lineHeight: 16px
     letterSpacing: 0px
-  code:
+  label-mono-lg:
+    fontFamily: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 20px
+    letterSpacing: 0px
+  label-mono-md:
     fontFamily: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace
     fontSize: 13px
     fontWeight: 400
@@ -187,9 +260,51 @@ typography:
   label-mono:
     fontFamily: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace
     fontSize: 12px
-    fontWeight: 500
+    fontWeight: 400
     lineHeight: 16px
     letterSpacing: 0px
+  body-display:
+    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
+    fontSize: 24px
+    fontWeight: 400
+    lineHeight: 36px
+    letterSpacing: 0px
+  body-lead:
+    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
+    fontSize: 20px
+    fontWeight: 400
+    lineHeight: 36px
+    letterSpacing: 0px
+  body-lg:
+    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
+    fontSize: 18px
+    fontWeight: 400
+    lineHeight: 28px
+    letterSpacing: 0px
+  body-md:
+    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 24px
+    letterSpacing: 0px
+  body-sm:
+    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 20px
+    letterSpacing: 0px
+  body-compact:
+    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
+    fontSize: 13px
+    fontWeight: 400
+    lineHeight: 18px
+    letterSpacing: 0px
+  code:
+    fontFamily: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace
+    fontSize: 13px
+    fontWeight: 400
+    lineHeight: 18px
+    letterSpacing: 0px
 
 rounded:
   none: 0px
@@ -219,8 +334,12 @@ spacing:
   icon-stroke-sm: 1.25px
   focus-outline-width: 2px
   focus-outline-offset: 2px
-  control-height: 32px
-  control-padding-inline: 10px
+  control-height: 36px
+  control-height-sm: 32px
+  control-height-lg: 40px
+  control-height-xs: 24px
+  control-padding-inline: 12px
+  card-padding: 20px
   touch-target: 44px
 
 ---
@@ -232,7 +351,7 @@ This file is nadicode's design system and its only design authority. The tokens
 nadicode puts AI Agents to work inside small and mid-sized companies. Its sites and products read as a technology company with a real product: the interface is neutral and exact, the product is shown working, and colour and depth give the page its energy. Three ideas carry every screen:
 
 - **Neutral structure.** Chrome, controls and text sit on an achromatic spine, so a desaturated screen loses nothing structural. The strongest contrast on a screen belongs to the action.
-- **Colour as stage.** The five identity hues appear at full strength only in the places "Colour as stage" lists, the colour of Agents among them, and never as a section's ground. They carry the brand; they never decorate a control.
+- **Colour as stage.** The five identity hues appear at full strength only in the places "Colour as stage" lists, the colour of Agents among them, and never as a section's ground. They carry the brand; they never decorate a control. Semantic colour identifies statuses, categories and named actions through the component palette below.
 - **Real depth.** Surfaces sit at four heights. A 1 px edge shows the height in both modes, with a faint shadow under it. Glass floats over content that scrolls or moves under it.
 
 The products are still: only Agents move on their own. The website moves with purpose: the product at work, Agents and its few shader objects ("Motion").
@@ -246,7 +365,7 @@ One foundation serves four registers. The foundation is every value in this file
 The neutral spine carries grounds, chrome, text and every control: `{colors.ink}`, `{colors.body}`, `{colors.muted}`, `{colors.canvas}`, `{colors.canvas-soft}`, `{colors.canvas-soft-2}`, `{colors.line}`, the material tones, and their dark pairs. Every neutral is an equal-channel grey (OKLCH chroma 0) in both themes, so no tint paints a surface. Colours are authored here as sRGB hex and emitted as `oklch()`.
 
 - **Action** (`{colors.action}`, `{colors.action-foreground}`, `{colors.action-hover}`, `{colors.action-active}`): the primary control is ink with a white label in light, and dark ink `{colors.dark-action}` with a near-black `{colors.dark-action-foreground}` label in dark, never pure white. The shadcn `primary` role maps here.
-- **Text**: `{colors.ink}` for headings and primary text, `{colors.body}` for supporting text, which clears AA on every canvas. `{colors.muted}` is for placeholders and disabled or inactive text only, never for descriptions, labels or help.
+- **Text**: `{colors.ink}` for headings and primary text, `{colors.body}` for supporting text, which clears AA on every canvas. `{colors.muted}` is for placeholders and disabled or inactive text only, never for descriptions, labels or help. These roles distinguish purpose, not a guaranteed contrast step: their similar neutrals keep supporting text and placeholders near the Geist reference while both meet our AA text floor.
 - **Lines**: `{colors.line}` is the one decorative 1 px divider and is deliberately quiet. `{colors.input}` is the boundary of a field or any control whose edge identifies it (an input, a select, a checkbox, a radio), and clears the 3:1 non-text floor. A button is identified by its label, so an outline or secondary button's edge is the `{colors.line}` hairline, never `{colors.input}`. Never darken a decorative line locally to make it act as a control edge.
 - **Focus** (`{colors.focus-ring}`): a full-opacity outline of `{spacing.focus-outline-width}` at `{spacing.focus-outline-offset}`, the maximum-contrast neutral on each ground, never a box-shadow ring and never a hue.
 - **Interaction states** are contrast steps on the spine. Hover takes the `accent` role (`{colors.canvas-soft-2}`) and a selected row the `muted` role (`{colors.canvas-soft}`); a control's own hover is a step inside its family, as `{colors.action-hover}` is. Persistent navigation marks the current destination with `{colors.navigation-selection-bg}` and `{colors.navigation-selection-fg}`, and local tabs mark the current view with the same pair through the `selection` role.
@@ -266,15 +385,19 @@ The hues appear at full strength and flat, with no tints, steps, gradients or ho
 - **The logo.** The dot of the wordmark and the icon tile ("Brand media authority").
 - **Imagery.** Art direction reads these tokens and keeps no private palette.
 
-Text on a colour ground is the pole that clears AA on that hue: `{colors.identity-white}` on cobalto and rosso; `{colors.identity-ink}` on verde, arancio and giallo. A control on a colour ground uses the button's on-colour variants ("Components"). Product chrome in the Portal and Nadia stays neutral: the identity hues enter a product screen only as Agents, charts and the feedback roles below.
+Text on a colour ground is the pole that clears AA on that hue: `{colors.identity-white}` on cobalto and rosso; `{colors.identity-ink}` on verde, arancio and giallo. A control on a colour ground uses the button's on-colour variants ("Components"). Product chrome in the Portal and Nadia stays neutral. Colour inside that structure identifies Agents, providers, categories, links and feedback. Choose a typed component tone from the semantic palette; never paint a control with an arbitrary identity hex.
 
 ### Meaning
 
 - **Feedback** pairs a hue with a soft ground and a deep text step: success (verde), warning (giallo `{colors.warning}`), error (rosso `{colors.error}`), info (cobalto `{colors.info}`). The `-soft` value is the tinted ground of a tag or banner and the `-deep` value is the AA text on it; a component reaches the pair through the `destructive-soft`, `warning-soft`, `success-soft` and `info-soft` roles and their foregrounds. On a solid fill, error takes white text and warning and success take ink in light; in dark all three take `{colors.dark-on-primary}`.
-- **Link** (`{colors.link}`, `{colors.link-deep}`, `{colors.link-bg-soft}`): inline links and the green status tone. Text green is always the link green; verde as a mark is always identity verde.
-- **Workflow states** (`{colors.state-ready}`, `{colors.state-running}`, `{colors.state-review}`, `{colors.state-blocked}`, `{colors.state-complete}`) colour non-text marks only: meter fills and trend icons. Cobalto means in motion and verde means done. A state's word stays on the neutral text roles.
+- **Link** (`{colors.link}`, `{colors.link-deep}`, `{colors.link-bg-soft}`): blue inline links. Success uses its own green roles; link colour never doubles as a health signal.
+- **Workflow states** (`{colors.state-ready}`, `{colors.state-running}`, `{colors.state-review}`, `{colors.state-blocked}`, `{colors.state-complete}`) colour non-text marks only: meter fills and trend icons. Cobalto means in motion and verde means done. A state's word uses its `StatusBadge` foreground pair; never put a raw meter-fill token on text.
 - **Status** is always a Badge tone with a mark and a word ("Components").
 
+### Category colour
+
+Labels and their icons may carry blue, teal, purple or pink to distinguish named categories. `Tag` owns these categorical tones; `Badge` also offers the corresponding soft fill and contrasting foreground. The same category keeps the same tone across a surface and after sorting. A word remains visible, and a colour never invents status. Green, amber and red remain feedback meanings; the five-tone `StatusBadge` owns those. Icons inherit the tone of their label rather than adding a second colour. Brand marks keep their genuine colours. This uses Geist’s light fill / strong text technique with nadicode’s semantic roles; agents never choose raw palette values in pages.
+
 ### Dark mode
 
 Every token `X` with a `dark-X` pair takes the dark value under a `.dark` ancestor; a component uses the same role in both modes and never ships a `dark:` utility or a mode branch of its own. The dark page is true black, `{colors.dark-canvas}`. Elevated surfaces lift from it by tone ("Elevation & Depth"); the soft steps `{colors.dark-canvas-soft}` and `{colors.dark-canvas-soft-2}` are interaction fills and never become a page, section or panel ground. On a lifted surface the hover and muted fills step up from that surface's own tone. Dark feedback and chart values are brightened so they read on black; `{colors.dark-input}` stays brighter than `{colors.dark-line}` so a field's edge clears 3:1. A surface that is dark by nature, such as Nadia's entry screen, a terminal console, a black website section or a black brand plane inside a product (`BrandField`), stays dark in every theme as one fixed treatment: it scopes `.dark`, so every role and control inside it takes its dark value.
@@ -312,24 +435,41 @@ A hue follows its entity, never its rank or position: one assignment per surface
 
 ## Typography
 
-Geist and Geist Mono are the two families. The twelve tokens are named by role, never by size; strong is a weight, so a 500 run of body copy is `body-md` at weight 500. `code` and `label-mono` are Geist Mono; every other token is Geist.
+Geist and Geist Mono are the two families. The role scale follows the measured [Geist typography](https://vercel.com/geist/typography): headings, buttons, single-line labels and multiline copy each have their own line height and weight. The `label-mono` family and `code` use Geist Mono. Fonts ship with the package and their SIL Open Font License; no network font fetch is required.
 
-| Token | Use |
-| --- | --- |
-| `{typography.display-xl}` | The largest page title. |
-| `{typography.display-lg}` | A hero headline and the one statement of a page. |
-| `{typography.display-md}` | A section heading. |
-| `{typography.heading-lg}` | A standard section title inside a page or panel. |
-| `{typography.heading-md}` | A card, artifact or panel title. |
-| `{typography.heading-sm}` | The smallest heading, above a group or a step. |
-| `{typography.body-lg}` | A lead paragraph. |
-| `{typography.body-md}` | Default body copy; large control labels at 500. |
-| `{typography.body-sm}` | Secondary copy, navigation, compact cells; control labels at 500. |
-| `{typography.caption}` | Badges, compact chrome labels, footer lines. |
-| `{typography.code}` | Tool calls, snippets, traces. |
-| `{typography.label-mono}` | Opaque identifiers, codes and mono eyebrows; never a person's, Agent's or computer's display name. |
-
-A token has one size at every width; nothing is sized in `vw` or `vh`. Only the three display tokens carry negative tracking. Card, panel and section titles are sentence-case Geist. The website and the CSS components name the tokens by role, through the `nc-type-*` classes or the theme's `text-<token>` utilities (`text-display-md`); product UI in `@nadicodeai/ui`, the Portal and Nadia sizes text with Tailwind's `text-xs`, `text-sm` and `text-base`, which match `caption`, `body-sm` and `body-md` in size.
+| Token | Size / line height | Use |
+| --- | --- | --- |
+| `{typography.display-xl}` | 72 / 72 px | Largest display heading. |
+| `{typography.display-wide}` | 64 / 64 px | Wide display heading. |
+| `{typography.display-lg}` | 56 / 56 px | Hero headline. |
+| `{typography.display-section}` | 48 / 56 px | Large section heading. |
+| `{typography.display-md}` | 40 / 48 px | Section headline. |
+| `{typography.heading-lg}` | 32 / 40 px | Large product section. |
+| `{typography.heading-md}` | 24 / 32 px | Page or object title. |
+| `{typography.heading-sm}` | 20 / 26 px | Card, settings section or dialog title. |
+| `{typography.heading-xs}` | 16 / 24 px | Compact card or group title. |
+| `{typography.heading-compact}` | 14 / 20 px | Dense subsection title. |
+| `{typography.button-lg}` | 16 / 20 px | Large button label. |
+| `{typography.button}` | 14 / 20 px | Default and small button label. |
+| `{typography.button-xs}` | 12 / 16 px | Embedded button label only. |
+| `{typography.label-display}` | 20 / 32 px | Large single-line label. |
+| `{typography.label-lg}` | 18 / 20 px | Prominent single-line label. |
+| `{typography.label-md}` | 16 / 20 px | Object or item label. |
+| `{typography.label}` | 14 / 20 px | Menu, navigation and field label. |
+| `{typography.label-sm}` | 13 / 16 px | Secondary metadata label. |
+| `{typography.caption}` | 12 / 16 px | Tertiary label or badge. |
+| `{typography.label-mono-lg}` | 14 / 20 px | Mono beside large labels. |
+| `{typography.label-mono-md}` | 13 / 20 px | Mono beside 14 px labels. |
+| `{typography.label-mono}` | 12 / 16 px | Compact identifier. |
+| `{typography.body-display}` | 24 / 36 px | Large marketing lead. |
+| `{typography.body-lead}` | 20 / 36 px | Marketing lead. |
+| `{typography.body-lg}` | 18 / 28 px | Long lead or quotation. |
+| `{typography.body-md}` | 16 / 24 px | Dialog copy and entry instructions. |
+| `{typography.body-sm}` | 14 / 20 px | Default product description. |
+| `{typography.body-compact}` | 13 / 18 px | Dense secondary copy. |
+| `{typography.code}` | 13 / 18 px | Inline code or code block. |
+
+A token has one size at every width; nothing is sized in `vw` or `vh`. A role includes family, size, line height, weight and tracking together. Use the shared `nc-type-*` classes or the generated `text-<token>` utilities, such as `text-display-md`, with `font-label-mono` for the `label-mono` family and `font-code` for `code`, rather than assembling role metrics at a call site. Existing `text-xs`, `text-sm` and `text-base` body sizes match `caption`, `body-sm` and `body-md`. Card, panel and section titles are sentence-case Geist. Headings use weight 600 and their optical negative tracking. A softer run inside a heading uses 500; a strong run inside a label uses 500; strong paragraph copy uses 550. Labels align single lines and icons; paragraphs use the copy roles and can wrap. Headings and the heading and display roles wrap balanced, so no line of a title is left short; copy wraps pretty, so a paragraph never ends on a lone word; centred copy wraps balanced, whatever its role. The type layer applies this, Nadia's skin takes it with the roles and Alveare's type adapter with its type steps, so a screen sets text wrapping only to depart from it. Numeric comparisons use tabular digits, and identifiers use mono. Semantic heading levels express document structure independently of visual size. Never shrink type to fit: wrap, reflow or move supporting detail.
 
 ### The website's text
 
@@ -367,7 +507,7 @@ Control geometry is the same in every product:
 | `{spacing.icon-stroke}`, `{spacing.icon-stroke-sm}` | The icon line ("Iconography") |
 | `{spacing.focus-outline-width}`, `{spacing.focus-outline-offset}` | The focus outline |
 
-Product chrome uses the 32 px control. A page header, a toolbar, a card's header and footer, a tab row, a filter row and a collection row's actions take `{spacing.control-height}` with a `{typography.body-sm}` label at 500; a button's `sm` and `xs` sizes are for a control nested inside dense content, such as a composer or an input group, and never for chrome.
+Product chrome uses the 36 px control. Compact controls use 32 px and prominent controls 40 px; 24 px is reserved for an embedded control inside a field. A page header, a toolbar, a card's header and footer, a tab row, a filter row and a collection row's actions take `{spacing.control-height}` with a `{typography.body-sm}` label at 500; a button's `sm` and `xs` sizes are for a control nested inside dense content, such as a composer or an input group, and never for chrome.
 
 ### The website column
 
@@ -381,7 +521,7 @@ The Portal and Nadia are product shells: persistent navigation on the left, the
 
 - **Navigation names stable destinations.** An object opened from search or a link still shows its parent in a breadcrumb; local tabs directly below the top bar ask different questions about the same object, and they are always the package's Tabs ("Controls"); a return link remembers a visit and never replaces the parent. A scope selector keeps the current tab when the next object has it, and otherwise opens its overview.
 - **Compact screens keep the same relationships.** Tabs scroll horizontally, primary content stacks before supporting facts, and no second sidebar appears.
-- **The desktop window has one top band.** In Nadia, the window's header row and the left column's top band are one 44 px band that holds the 32 px chrome controls and centres the macOS window buttons; the Portal keeps its own top bar.
+- **The desktop window has one top band.** In Nadia, the window's header row and the left column's top band are one 44 px band that holds the shared chrome controls and centres the macOS window buttons; the Portal keeps its own top bar.
 
 ### Page compositions
 
@@ -392,22 +532,22 @@ A product page is one of five compositions, each answering one question first:
 | Overview | What needs attention? | Scoped facts, the exceptions that matter, links to their owners. Never a stack of previews of every section. |
 | Collection | Which object? | The page header (its title with the page's actions on the title's row, and nothing under it), then one toolbar (filters, search, sort), one line per record with its identity and a few comparable facts, and the row's menu. One row is one hover and one open target. |
 | Object | What is this, where does it belong, what can I do? | The parent in the breadcrumb and its sections (tabs, or the sidebar for an object worked inside); then the object's header on the page ground, never in a card: its picture, its name at `{typography.heading-md}`, one line saying what it is, a row of key facts as label and value, and at the trailing edge the page's one primary action and the three dots; then grouped facts and settings sections as the cards below. An Agent is the exception: her first section, Profile, opens with her card, the same in every product (`AgentProfileCard`): on the left her orb at 64 px, her name with a ghost pencil that turns her name, description and, where the product holds it, her look into fields in place, saved by the card's own Save, with no drawer or overlay, her description and her facts (status, last activity, the template she was made from); on the right her model, drawn with its maker's mark, her reasoning and, where the product holds them, her permissions, saved from the card's footer; her instructions follow as the next card. The page's commands sit in the window's three dots where the product has one, and otherwise at the end of her name's row. |
-| Configuration | What can I change? | A centred reading column of titled sections, help beside each field, a local save and recovery. |
+| Configuration | What can I change? | A centred configuration column of titled sections, labels and help above each control, a local save and recovery. |
 | Library | What reusable thing can I use? | The shelf's title with its one definition line, the search, then the entries as two-column rows: each its kind's tile, its name, one line of description and its add control; detail shows content, requirements, source and revision. |
 
-Every setting is that Configuration composition, whether it belongs to the person, to the platform or to one record's Settings tab, so the column keeps its width and its field layout from one entry of a settings menu to the next, and each section saves its own fields from its own footer ("Cards and sections"). A table that reaches a reading column keeps the identity and the action beside it and lets its remaining columns fall to the row's supporting detail, rather than widening the page or scrolling sideways.
+Every setting is that Configuration composition, whether it belongs to the person, to the platform or to one record's Settings tab, so the column keeps its width and its field layout from one entry of a settings menu to the next, and each section saves its own fields from its own footer ("Cards and sections"). The Portal configuration column is at most 56rem. Inputs are bounded at 20rem under their labels and descriptions, and related fields may share two columns when the section can accommodate them. Section headings use heading-sm. The header and fields share one uninterrupted body; only the local save footer has a divider. A profile avatar is the upload button in the section header. Structured tables keep visible column names and remain tabular while their container can accommodate the data; only compact containers move supporting facts beneath the identity.
 
-Every page in every product opens with the same header (`PageHeader`). The top bar holds only the path to the page: its sidebar group or its parents, ending at the destination or the object, such as "Business › Agents" or "Beta Studio › Beta Desk", and never the page's own title. The content then starts with the title at `{typography.heading-md}`, on the left, and on the same row at the trailing edge the page's actions: the page's three dots when it has two further commands or more, then at most one `outline` button, then the one `default` primary, rightmost. `PageActions` is their only owner: it takes a `primary`, a `secondary` and a `menu` of two commands or more, and draws the order and the variants, so a page never passes buttons of its own. Nothing sits under the title: no line introduces, explains or counts the page, and the toolbar, the list or the page follows the title row directly. The one exception is a catalog shelf of the Library (Skills, Plugins): one line under its title says what kind of thing the shelf holds, because a skill and a plugin are drawn alike and that line is what tells the two shelves apart; it never counts or introduces anything else. Inside an object worked from a section sidebar, the title is the section's name ("Apps"); a page that opens with the object's own header or card, such as an Agent's Profile (`AgentProfileCard`), has it as its title and no title row above it.
+Collections and working pages open with the same header (`PageHeader`). Configuration pages open directly with their titled settings sections and retain a screen-reader h1 for the destination; an extra visible title would duplicate the navigation and delay the first setting. The top bar holds only the path to the page: its sidebar group or its parents, ending at the destination or the object, such as "Business › Agents" or "Beta Studio › Beta Desk", and never the page's own title. The content then starts with the title at `{typography.heading-md}`, on the left, and on the same row at the trailing edge the page's actions: at most one `outline` secondary action, then the `default` primary action, then the overflow menu at the trailing edge. `PageActions` is their only owner: it takes a `primary`, a `secondary` and a `menu`, and draws their order and variants. An existing record-command menu can occupy that same menu slot without rebuilding its confirmation logic. Navigation remains a visible link or part of the navigation, never an overflow command. Nothing sits under the title: no line introduces, explains or counts the page, and the toolbar, the list or the page follows the title row directly. The one exception is a catalog shelf of the Library (Skills, Plugins): one line under its title says what kind of thing the shelf holds, because the shelf explains how its kind of item is used; it never counts or introduces anything else. Inside an object worked from a section sidebar, the title is the section's name ("Apps"); a page that opens with the object's own header or card, such as an Agent's Profile (`AgentProfileCard`), has it as its title and no title row above it.
 
-A collection is named once, by the page's title, and the collection's card never adds a header that only describes it. A populated collection carries no picture; a picture belongs only to a collection's first use ("Elevation & Depth"). The table's footer holds only a count or the paging, never a help sentence: guidance a step needs lives in that step.
+A collection is named once, by the page's title, and the collection's card never adds a header that only describes it. A populated collection carries no picture; a product that uses illustrated presentation may show one only for a collection's first use ("Elevation & Depth"). The table's footer holds only a count or the paging, never a help sentence: guidance a step needs lives in that step.
 
-A section earns a card when it owns a decision, not for every label and value. A row links to its object and keeps its commands in its menu ("Menus and commands"). A summary on an overview opens the same owner as its tab. Supporting detail collapses only behind a summary that keeps a count, state or consequence.
+A section earns a card when it owns a decision, not for every label and value. A row links to its object and keeps secondary mutations in its menu ("Menus and commands"). A summary on an overview opens the same owner as its tab. Supporting detail collapses only behind a summary that keeps a count, state or consequence.
 
 ## Elevation & Depth
 
 Product UI sits on one continuous workspace ground, `{colors.material-workspace}` (true black in dark), and solid objects rise above it at four heights: `nc-elevation-resting` for resting content, then `nc-elevation-raised`, `nc-elevation-floating` and `nc-elevation-modal` when an object is physically raised, floating or modal. Physical role chooses the height, never the importance of the content. Each recipe carries its own edge, so an elevated surface never adds a border, a ring or a second shadow.
 
-**The edge carries height, the same way in both modes.** Each recipe is a 1 px ring around the surface and a faint black shadow under it; the ring is black at 8% on light and white at 14.5% on dark, and it is the last layer. Light and dark share the shadow geometry: a 2 px contact shadow for resting, a short drop added for raised, and one soft shadow of 24 px blur for floating and 32 px for modal, at no more than 6% in light. Shadows stay black: a tinted or wide shadow makes a card float off the page and parts light from dark.
+**The edge carries height, the same way in both modes.** Each recipe is a 1 px ring around the surface and a faint black shadow under it; the ring is black at 8% on light and white at 14.5% on dark, and it is the first layer. A final opaque backing edge prevents the shadows beneath from darkening that optical ring. Light and dark share the shadow geometry: a 2 px contact shadow for resting, a short drop added for raised, and one soft shadow of 24 px blur for floating and 32 px for modal, at no more than 6% in light. Shadows stay black: a tinted or wide shadow makes a card float off the page and parts light from dark.
 
 **In dark, every surface stays near black.** The page is `{colors.dark-canvas}`; a surface is a few points above it, so the ring, not a grey fill, separates it: resting `{colors.dark-material-resting}`, raised `{colors.dark-material-raised}`, floating `{colors.dark-material-floating}`, modal `{colors.dark-material-modal}`. The design-system checks fail a height darker than the one below it or past 1.15:1 against the page, and a dark ring that does not clear 1.5:1 against the page over the resting tone. `{colors.dark-ink}` and `{colors.dark-muted}` keep the WCAG AA text floor on the top step. Hover and selected fills step up from the surface they sit on. A component names only its height and its role (`bg-card`, `bg-popover`); `@nadicodeai/ui/globals.css` sets those roles to the height's tone on the element.
 
@@ -421,19 +561,21 @@ Product UI sits on one continuous workspace ground, `{colors.material-workspace}
 | Outlined | `{colors.material-solid}` | None; one `line` border | A flat panel: fact cells inside a record, the website's explanatory cards. |
 | Plain | `{colors.material-solid}` | None | A structural card with no edge of its own. |
 
-**Glass** is a material, not a height: the floating fill at 60% over a 20 px backdrop blur at 180% saturation, so colour behind it comes through saturated rather than grey. Its edge is the floating recipe, its 1 px ring and faint shadow, and a 5% monochrome grain keeps the blurred colour from banding. Glass may go where something behind it moves or carries colour:
+**Glass** is a material, not a height: the floating fill at 60% over a 20 px backdrop blur at 180% saturation, so colour behind it comes through saturated rather than grey. Its edge uses the floating recipe plus the tokenized inset top highlight, and a 5% monochrome grain keeps the blurred colour from banding. Glass may go where something behind it moves or carries colour:
 
 - floating chrome over our own content: popovers, selects, comboboxes, the menubar, navigation popups, the command palette and control bars, including a collection's toolbar over the rows that scroll under it (on a page whose rows never pass under it, the toolbar is the plain row, with no fill or edge of its own) and Nadia's chat bar over her conversation;
 - the website header as the page scrolls under it;
 - a small floating card over moving Agents.
 
-Content stays solid: cards, KPIs, tables, chat, forms, and dialog, sheet and drawer bodies. Menus stay solid: a dropdown menu and a context menu open over dense rows their labels would compete with, and one set of commands reached both ways looks the same both ways. Glass over a plain white or black ground shows nothing, so it never goes there. Reduced transparency replaces glass with the same solid surface at the same height.
+Content stays solid: cards, KPIs, tables, chat, forms, and dialog, sheet and drawer bodies. Menus stay solid: a dropdown menu and a context menu open over dense rows their labels would compete with, and one set of commands reached both ways looks the same both ways. Glass over a plain white or black ground shows nothing, so it never goes there. Reduced transparency and browsers without backdrop-filter replace glass with the same solid surface at the same height. Transparency never reduces the opacity of labels or controls.
+
+Related membership collections share one tabbed workspace: Members, Invitations and, where supported, Teams. One collection is visible at a time and its selection is retained in the URL.
 
 **Product views on the website** are the product itself, built from the real components with example data that is labelled as such; never a screenshot, a device mockup or an invented interface. A product window takes the raised height on its ground; a card that overlaps it floats; in a black section it renders in dark mode.
 
-Absence follows its container. A page or region with nothing in it is an opaque region with a dashed boundary; an empty state inside a card is unframed, because the card already owns the edge. `EmptyState` (`@nadicodeai/ui/components/empty-state`) is the only owner of an absence: nothing else draws one, and its `scope` (`page`, `region` or `card`) sets that frame. A collection's `DataTable` takes the same props as `empty`. Its kind decides everything it shows:
+Absence follows its container. The Portal uses plain operational empty states throughout: no collection illustrations, a solid boundary for a page or region, and the same spacing and typography for first use, no data, and no results. Other products may use the illustrated register with a dashed boundary. In every product, an empty state inside a card is unframed, because the card already owns the edge. `EmptyState` (`@nadicodeai/ui/components/empty-state`) is the only owner of an absence: nothing else draws one, and its `scope` (`page`, `region` or `card`) sets that frame. A collection's `DataTable` takes the same props as `empty`. Its kind determines the message and recovery; presentation determines whether first-use artwork is present:
 
-- `firstUse`: a collection with no records yet whose kind has a picture in the approved set in `@nadicodeai/design-system/assets/empty`, whoever the viewer is and however the collection fills. The picture, a title and one line saying what will live there, and, when this viewer can add the first record, the action that adds it.
+- `firstUse`: a collection with no records yet, whoever the viewer is and however the collection fills. Illustrated presentation takes its picture from the approved set in `@nadicodeai/design-system/assets/empty`. A title and one line saying what will live there, the picture when the product uses illustrated presentation, and, when this viewer can add the first record, the action that adds it.
 - `nothingYet`: a list whose kind has no picture of its own, such as invoices or history, or a table inside a page. One line, with no picture and nothing to press.
 - `noResults`: a search or filter that matches nothing. One line and Clear filters (or Clear search), with no picture.
 - `failed`: a read that failed where content would be. The warning mark, the message's title and body, and its controls, Retry among them.
@@ -444,7 +586,7 @@ Modal overlays use the scrim with no blur. Focus is not elevation: it is always
 
 ## Shapes
 
-A corner follows what the thing is, on one scale: buttons, inputs, badges, tabs, menu rows and app-mark tiles take `{rounded.md}` (8 px); cards, tables, menus, popovers, dialogs, sheets, tooltips and toasts take `{rounded.lg}` (12 px), and so does a drawer on each edge not flush with the window; a collection's glass toolbar takes `{rounded.xl}` (16 px); a conversation bubble takes `{rounded.2xl}` (20 px); Nadia's chat bar takes `{rounded.3xl}` (24 px). A checkbox mark is a square at `{rounded.sm}` (6 px), because `{rounded.md}` on its 16 px mark would draw a circle and read as a radio. A surface never earns a larger corner by sitting higher. A corner nested inside another takes the outer radius minus the gap between them. Full-bleed sections take `{rounded.none}`. `{rounded.full}` is for avatars, switch and radio marks, slider thumbs, filter chips and tags. The other radii are for inner marks and geometry a component owns, such as a progress track.
+A corner follows what the thing is, on one scale: buttons, inputs, badges, tabs and menu rows take `{rounded.sm}` (6 px); resting cards and tables also take `{rounded.sm}`; menus, popovers, dialogs, sheets and toasts take `{rounded.lg}` (12 px), and so does a drawer on each edge not flush with the window; tooltips take `{rounded.sm}` (6 px); a collection's glass toolbar takes `{rounded.lg}` (12 px); a conversation bubble takes `{rounded.2xl}` (20 px); Nadia's chat bar takes `{rounded.3xl}` (24 px). A checkbox mark is a square at `{rounded.xs}` (2 px), keeping its 16 px mark distinct from a circular radio. A surface never earns a larger corner by sitting higher. A corner nested inside another takes the outer radius minus the gap between them. Full-bleed sections take `{rounded.none}`. `{rounded.full}` is for avatars, switch and radio marks, slider thumbs, filter chips and tags. The other radii are for inner marks and geometry a component owns, such as a progress track.
 
 ## Motion
 
@@ -468,31 +610,191 @@ The easings are `emphasized`, `out-strong`, `in-out-strong` and `drawer`; the wa
 
 ## Components
 
-Every product builds from `@nadicodeai/ui`: stock shadcn components on Base UI, the chart kit, the assistant-ui conversation interface, and the compositions below. A component styles itself only through the roles and tokens in this file; it carries no raw colour, no `dark:` utility and no theme of its own. A page arranges and sizes a component and never restyles it: a new appearance is a typed variant or slot added to the component, and a missing composition is added to the package, even while one product alone needs it. Visible controls always come from the package.
+Every product builds from `@nadicodeai/ui`: stock shadcn components on Base UI, the chart kit, the assistant-ui conversation interface, and the compositions below. A component styles itself only through the roles and tokens in this file; it carries no raw colour, no `dark:` utility and no theme of its own. A page arranges and sizes a component and never restyles it: a new appearance is a typed variant or slot added to the component, and a missing reusable composition is added to the shared package, even while one product alone needs it. Product-specific data and persistence stay in the app adapter. Visible controls always come from the package.
+
+### Information shapes
+
+Choose the presentation from the answer the data gives. A change of page or
+viewer scope changes the records and available actions, while the same kind of
+answer keeps its component, density, value format and action placement.
+
+| Information | Component and context |
+| --- | --- |
+| Records with the same comparable facts | `DataTable`: one identity per row, typed columns, visible headings by default, and a menu when secondary mutations exist. Use the compact heading exception only for a self-describing directory. |
+| A descriptive item with supporting prose | `ItemGroup` and `Item`: identity, description and trailing actions. Use this for a feed or a descriptive list rather than inventing table columns. |
+| The identity of a record in a collection | `RecordIdentity`: name with its kind's optional mark; the containing table owns navigation. Agent and model identities keep their specialized owners. |
+| Facts about one object | `ObjectFacts` or `SettingsFacts`: labelled values in one coherent section. A relation uses its same identity or `Tag`; it does not become a separate card. |
+| A coherent set of changes | `SettingsSection` and `SettingsField`: the section owns its fields, help, recovery and local Save. Native uncontrolled forms use `SettingsForm` and `SettingsSubmitButton`; controlled editors derive their changed state from their own committed values. |
+| A classification, lifecycle or operation | `Badge`, `StatusBadge` or `ActionStatus`, according to the existing state contract. A missing value, an empty list and a failed read remain distinct. |
+| Another view of the current scope | `TabsNav`; an object's ancestry remains in breadcrumbs. A tab does not introduce a new scope or a second collection owner. |
+| A measurement over time or across objects | The existing KPI or chart composition for the reading; a named comparison uses the same `DataTable`, with units and visible headings. |
+
+One section holds one complete task or answer. A status, explanatory sentence
+or Change button belongs beside the facts or fields it qualifies; it does not
+earn a second section by itself.
+
+### Component selection and usage
+
+This catalog maps all 72 entries in the [Geist component reference](https://vercel.com/geist/introduction) to our shared owners. **Component** means a public owner exists for the job; it does not promise every Geist prop. **Composition** means existing parts can provide the described presentation together; the row names any behavior still needed. **Available upstream composition** identifies a stock shadcn example not yet packaged in our library. An **enhanced capability gap** names specific behavior, not the absence of a matching component name. Use our exported APIs and names, not Geist's prop names: for example, our Button appearance is `variant`, while HTML submission behavior is `type`.
+
+The shadcn column identifies official primitives, examples and blocks that supply the pattern. Prefer these compositions before adding another registry or dependency. A dedicated name in Geist does not require another primitive in our library. The separate [shadcn.io Code Block](https://www.shadcn.io/components/code-block) supplies richer code display in the wider shadcn ecosystem; it is not the official `@shadcn` registry. Neither it nor AI Elements is required for plain code, snippets or copyable values.
+
+Read the relevant row before building a surface, then use the [complete compositions](#complete-compositions) before assembling primitives. Component mechanics and supported props live in [the shared UI source](../ui/src/components); product adapters supply data, routes, translations, permissions and persistence. A component's visual owner supplies its geometry, typography, colour, focus and surface zones. A caller supplies layout and content.
+
+Every example and consuming surface covers its reachable populated, empty, loading, invalid, disabled, failed and compact states. A failed request is not empty data; a disabled control has a reason. Controls keep their visible names, keyboard behavior and focus return. Keep product wording in sentence case. A source reference establishes a pattern, while rendered examples establish what the implementation actually looks like.
+
+| Geist reference | Shared owner and coverage | Official shadcn pattern | Use and composition contract |
+| --- | --- | --- | --- |
+| [Avatar](https://vercel.com/geist/avatar) | Component: `Avatar`, `AvatarImage`, `AvatarFallback`, `AvatarGroup`, `AvatarGroupCount`, `AvatarBadge` in `avatar.tsx`; Agent identity remains `AgentOrb`. | [Avatar](https://ui.shadcn.com/docs/components/base/avatar) | One person/team gets one image with literal identity and initials fallback. Groups use the group owner and a group label; overflow count is explicit. Use the [avatar owner](../ui/src/components/avatar.tsx) for a compact identity; larger object identity uses the existing object composition. Image failure retains identity. Decorative repeated image avoids double announcement. |
+| [Badge](https://vercel.com/geist/badge) | Component: `Badge`; `StatusBadge` for state; `Tag` for a categorical fact. Choose a typed tone; the owner supplies label geometry. | [Badge](https://ui.shadcn.com/docs/components/base/badge) | Short metadata beside its subject. A status, category and filter have different semantics. Use a word with semantic color; never a click handler on a static label. Explain lifecycle restrictions through supplementary help. Do not nest badges or pack paragraphs inside one. |
+| [Banner](https://vercel.com/geist/banner) | Composition: `NoticeBanner` / `MessageNotice`; no announcement-specific owner. | [Alert](https://ui.shadcn.com/docs/components/base/alert) + action Button. | Container-wide important message at its scope. Persistent condition has a resolver; transient success is a toast. Choose meaning and announcement urgency through the [NoticeBanner owner](../ui/src/components/notice-banner.tsx); a field error stays with its field. Only announce on a meaningful change. |
+| [Book](https://vercel.com/geist/book) | Optional composition: `Card` / `PictureLabel` + `AspectRatio` and cover artwork. No dedicated book-frame export. | [Card](https://ui.shadcn.com/docs/components/base/card) + [Aspect Ratio](https://ui.shadcn.com/docs/components/base/aspect-ratio) + cover artwork; decorative composition, no stock book primitive. | Marketing/docs cover artwork only. Never required to represent product records or Library entries. If adopted, keep its heading semantics, honest link target and stable aspect ratio; no fake spine/control behavior. |
+| [Breadcrumbs](https://vercel.com/geist/breadcrumbs) | Component: `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis`. | [Breadcrumb](https://ui.shadcn.com/docs/components/base/breadcrumb) | Express hierarchy, not browsing history. Ancestors link; current location uses `BreadcrumbPage`. Separators are decorative. Long paths may disclose middle ancestors, but preserve parent and current item; never replace the path with a back button. |
+| [Browser](https://vercel.com/geist/browser) | Optional composition: `Card` + `AspectRatio` and decorative browser chrome. `DesktopShell` remains real product chrome. | [Card](https://ui.shadcn.com/docs/components/base/card) + [Aspect Ratio](https://ui.shadcn.com/docs/components/base/aspect-ratio) + decorative header; no stock browser frame. | Use only when an actual captured browser view needs a frame. Its controls are decorative/nonfocusable. Do not wrap our live product examples in fictional browser controls or treat `DesktopShell` as an equivalent prop API. |
+| [Button](https://vercel.com/geist/button) | Component: `Button`, `buttonVariants`, `PendingLabel`; no native `loading` prop. | [Button](https://ui.shadcn.com/docs/components/base/button) + [Spinner](https://ui.shadcn.com/docs/components/base/spinner) for upstream pending treatment. | State-changing command uses a button; navigation uses `render` with a real anchor/router link. Primary, supporting, tertiary and destructive roles use typed variants. Name the action/object. Preserve dimensions and busy announcement while working; use `PendingLabel`, `aria-busy` and the caller's duplicate-submit protection. Icon-only needs its own action label. |
+| [Calendar](https://vercel.com/geist/calendar) | Component: `Calendar`; `DateRangeControl` for metric windows. | [Calendar](https://ui.shadcn.com/docs/components/base/calendar); [Date Picker](https://ui.shadcn.com/docs/components/base/date-picker) combines Calendar and Popover. | Dates/ranges whose month/day context matters. Respect locale, timezone, available window and committed selection. Presets are real buttons. Pair trigger with selected range, not a forgotten placeholder. Retain DayPicker keyboard operation; announce completed range and return focus after closing. |
+| [Checkbox](https://vercel.com/geist/checkbox) | Component: `Checkbox` + `FieldSet`, `FieldLegend`, `FieldLabel`. | [Checkbox](https://ui.shadcn.com/docs/components/base/checkbox) + [Field](https://ui.shadcn.com/docs/components/base/field) | Independent options, acknowledgments and row selection. Group related options semantically; label each row selection by record name. Derive mixed state from child selection. Required acknowledgment validates on submit. Mixed selection uses a distinct mark, not the checked mark. |
+| [Choicebox](https://vercel.com/geist/choicebox) | Composition: `FieldLabel` containing `Field`, `FieldContent`, `FieldTitle`/`FieldDescription` plus `RadioGroupItem` or `Checkbox`; no `Choicebox` export. | [Field](https://ui.shadcn.com/docs/components/base/field) choice-card examples with Checkbox or Radio Group. | Rich choices with description/icon, usually 4–6 or fewer. One selection model per group. Whole tile activates its radio/checkbox; no nested link/button stealing selection. Selected mark accompanies border. Fieldset/legend names the set; disabled reasons remain available. Make this one documented recipe rather than custom card styles. |
+| [Clearable Input](https://vercel.com/geist/clearable-input) | Composition: `InputGroup`, `InputGroupInput`, `InputGroupAddon`, `InputGroupButton`; no clearable wrapper. | [Input Group](https://ui.shadcn.com/docs/components/base/input-group) + InputGroupButton reset action. | Editable single-line text with an explicit reset. A named clear button resets controlled state and restores input focus. Escape clears only while the field owns the interaction and has a value; do not swallow an overlay's dismissal otherwise. Preserve disabled, invalid and empty states. |
+| [Code](https://vercel.com/geist/code) | Composition: semantic `code` with the shared mono typography roles. Conversation `MarkdownText` already owns its inline code; no standalone `Code` export is required for that use. | [Typography inline-code example](https://ui.shadcn.com/r/styles/new-york-v4/typography-inline-code.json); [Typeset](https://ui.shadcn.com/docs/typeset) for rendered prose. | Inline tokens and short syntax need mono, selectable text, sufficient contrast and no visual line numbers in copied value. Static documentation code and conversation rendering have different owners. Do not expose assistant internals as a general component contract. |
+| [Code Block](https://vercel.com/geist/code-block) | Component composition: `CodeBlock` owns `InputGroup`, read-only `InputGroupTextarea`, optional filename/language addons and `CopyButton`. Conversation `MarkdownText` and `FileDiff` retain their specialized jobs; plain display does not imply syntax highlighting. | [Input Group](https://ui.shadcn.com/docs/components/base/input-group) code-editor example: textarea, filename addon, copy button; use readOnly for display. | Multi-line code with honest filename/language, optional copy and line context. Preserve exact runnable text and whitespace. Overflow stays readable. Name the code region and translate copy feedback through the [CodeBlock owner](../ui/src/components/code-block.tsx). Its language label describes plain read-only text; syntax highlighting, highlighted lines, language selection and line numbers remain enhanced capabilities. |
+| [Collapse](https://vercel.com/geist/collapse) | Component: `Accordion`, `Collapsible`; complete `Disclosure` and `ExpandableBlock`. | [Collapsible](https://ui.shadcn.com/docs/components/base/collapsible) or [Accordion](https://ui.shadcn.com/docs/components/base/accordion) | Optional/advanced content, not the page's primary answer. Related independent sections may remain open together; mutually exclusive sections may use single-open mode. Trigger names the topic and exposes expansion. Preserve useful summary and field state. Do not bury essential warning or nest many disclosure levels. |
+| [Combobox](https://vercel.com/geist/combobox) | Component: `Combobox`, input/content/list/item/group/label/empty/chips parts. | [Combobox](https://ui.shadcn.com/docs/components/base/combobox) | Type to filter a known set. Short fixed choices use Select; free text uses Input. Keep async loading distinct from no matches; retain current selection while fetching. Visible label, scoped query hint, deterministic keyboard selection and no accidental parent-form submit. Use the [Combobox owner](../ui/src/components/combobox.tsx) for its clear control and selection behavior. |
+| [Command Menu](https://vercel.com/geist/command-menu) | Component: `CommandDialog`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandShortcut`. | [Command](https://ui.shadcn.com/docs/components/base/command) + [Dialog](https://ui.shadcn.com/docs/components/base/dialog) | Global resource/action finding, not a row menu. App binds platform shortcut once. Name scope and groups; show useful defaults, retain query through nested navigation if implemented. Trap/restore focus through dialog; announce results appropriately. Page stacks/recents are app behavior, not provided public props. |
+| [Context Card](https://vercel.com/geist/context-card) | Component: `HoverCard`, `HoverCardTrigger`, `HoverCardContent`. | [Hover Card](https://ui.shadcn.com/docs/components/base/hover-card) | Supplementary entity preview with a few facts. A short explanation is Tooltip; a persistent editor is Sheet/page. Preserve trigger name and a stable route to full detail. Never put the only destructive action or essential information behind hover. Interactive-preview keyboard behavior must be exercised. |
+| [Context Menu](https://vercel.com/geist/context-menu) | Component: `ContextMenu` family; same commands as `ActionMenu`/`DropdownMenu`. | [Context Menu](https://ui.shadcn.com/docs/components/base/context-menu) | Right-click convenience on a record/canvas target. Every command remains reachable from a visible trigger. Keep same permission and consequence. Confine interception to that target; support keyboard menu invocation, Escape and focus return. Destructive commands group last; avoid deep submenu trees. |
+| [Copy Button](https://vercel.com/geist/copy-button) | Component composition: `CopyButton` owns Button + existing clipboard behavior, pending state and an announced result. Portal `CopyableIdentifier` binds product identifiers to it. | [Button](https://ui.shadcn.com/docs/components/base/button) + Clipboard API; [Input Group](https://ui.shadcn.com/docs/components/base/input-group) has copy-action examples. | Copy exact underlying value and acknowledge only clipboard success; expose failure/retry. Keep control stable and label the target. Translate copy feedback through the [CopyButton owner](../ui/src/components/copy-button.tsx). |
+| [Description](https://vercel.com/geist/description) | Component: `ObjectFacts`, `SettingsFactsSection`, `TableValue`. | [Card](https://ui.shadcn.com/docs/components/base/card) title/description or [Item](https://ui.shadcn.com/docs/components/base/item); semantic description list for key/value facts. | Key/value object facts in a semantic definition list. Static metadata is not a two-column comparison table. Key names the fact; value retains exact identifiers, links or copy action. Unknown uses accessible dash, zero remains zero. Long prose may use a block fact. |
+| [Destructive Action Modal](https://vercel.com/geist/destructive-action-modal) | Component for ordinary confirmation: `ConfirmDialog`; gap for typed-name confirmation. | [Alert Dialog](https://ui.shadcn.com/docs/components/base/alert-dialog) + [Field](https://ui.shadcn.com/docs/components/base/field) and Input for typed verification. | Name object, irreversible effects and recovery before destructive command. Keep failed mutation open, preserve focus and prevent duplicate commit. Use the [ConfirmDialog owner](../ui/src/components/confirm-dialog.tsx) for ordinary confirmation. A typed-name gate for a high-stakes operation needs a shared extension before a surface promises it. |
+| [Dots Menu](https://vercel.com/geist/dots-menu) | Component: `ActionMenu` and `DropdownMenuCommand`. | [Dropdown Menu](https://ui.shadcn.com/docs/components/base/dropdown-menu) + named icon Button. | One discoverable overflow trigger for secondary record actions. Name whose actions the [ActionMenu owner](../ui/src/components/action-menu.tsx) opens and supply real menu commands. Keep the target easy to hit and the menu inside the viewport. |
+| [Drawer](https://vercel.com/geist/drawer) | Component: low-level `Drawer` family; `FormDrawer` owns substantial right-side form workflows. | [Drawer](https://ui.shadcn.com/docs/components/base/drawer) pattern; keep our Base UI implementation. | Geist uses mobile bottom drawers; do not silently call our right-side form behavior identical. Choose one shared adaptive recipe if parity is adopted. Preserve dirty fields, visible footer actions, contained scroll, dismissal and focus return. Destructive decisions use a blocking confirmation. |
+| [Empty State](https://vercel.com/geist/empty-state) | Component: [EmptyState](../ui/src/components/empty-state.tsx), following the [absence contract](#elevation--depth). | [Empty](https://ui.shadcn.com/docs/components/base/empty) + appropriate action. | Absence, unmatched filters and failed fetch are different states. First-use action exists only with permission and a real creation path. Search offers clear/reset; failure offers actual recovery. Put outside an empty table body. Permission/upgrade/cleared variants are not exported and must not be faked as noResults. |
+| [Entity](https://vercel.com/geist/entity) | Component: `ItemGroup`, `Item`, `ItemMedia`, `ItemContent`, `ItemTitle`, `ItemDescription`, `ItemActions`; domain `CatalogEntry`, `AgentListRow`. | [Item](https://ui.shadcn.com/docs/components/base/item) with media, content and actions. | Descriptive row with identity, secondary detail and action, not sortable comparative columns. Use divided group for peers and one coherent hit target with independent nested controls. Skeleton matches row geometry. Primary direct action may remain visible; secondary commands use overflow. |
+| [Error](https://vercel.com/geist/error) | Component: `FieldError`, `MessageNotice`, `EmptyState kind="failed"`, `FeedbackState` for existing owned surfaces. | [Field](https://ui.shadcn.com/docs/components/base/field) error or [Alert](https://ui.shadcn.com/docs/components/base/alert) at the relevant scope. | Put field validation by field, action failure by action, failed read where content would be. State what failed, retained work and concrete recovery. Catalog-resolved messages own product wording. Diagnostic identifier only when available; never raw exception or fake error ID. Async failure is announced without stealing useful input. |
+| [Error Card](https://vercel.com/geist/error-card) | Composition: existing failed-state owner within `Card`/section; no ErrorCard export. | [Card](https://ui.shadcn.com/docs/components/base/card) + [Alert](https://ui.shadcn.com/docs/components/base/alert) or [Empty](https://ui.shadcn.com/docs/components/base/empty) | One failed region retains surrounding useful page and its geometry. Do not render an empty card or turn a whole page into an error because one card failed. Recovery remains inside its region. |
+| [Feedback](https://vercel.com/geist/feedback) | Composition: `Popover`, `Field`, `Textarea`, `RadioGroup`, optional `Select`, and `Button`. The app supplies the submission destination and result; no collection backend is implied. | [Popover](https://ui.shadcn.com/docs/components/base/popover) + [Field](https://ui.shadcn.com/docs/components/base/field), Textarea, Radio Group and Button; optional Select. | Explicit feedback submission with optional sentiment, context and a real destination. Preserve text on error and acknowledge success. Emotion controls need text names; do not fabricate sending or collect unsolicited sensitive page content. Public Geist demos supply no detailed reusable behavior contract. |
+| [Fieldset](https://vercel.com/geist/fieldset) | Component: `SettingsSection`, `SettingsField`, `SettingsForm` and `SettingsSubmitButton`; `FieldSet`/`FieldLegend` for semantic subgroups. | [Card](https://ui.shadcn.com/docs/components/base/card) + [Field](https://ui.shadcn.com/docs/components/base/field) and footer action. | One independently saved setting group: heading/description, content, feedback, recessed footer with local save. Use `controlProps` from SettingsField to bind id/help/error/disabled/required. Gated state explains how to resolve it; a disabled wall is not yet a shared prop. Header and content share one body plane; the local save footer uses the recessed fill. |
+| [File Tree](https://vercel.com/geist/file-tree) | Composition: `SidebarMenu` + `Collapsible` + `FileTypeIcon` can follow sidebar-11 for nested files. Full tree-widget selection and roving arrow-key navigation require additional behavior. | [sidebar-11](https://ui.shadcn.com/blocks/sidebar#sidebar-11): Sidebar + Collapsible for nested file navigation. | Hierarchical files when structure is the task. Use semantic nested lists and Collapsible for expandable file navigation, following sidebar-11. A tree widget with `role="tree"` additionally needs roving keyboard focus, expand/collapse and selection semantics; do not claim those from the disclosure pattern alone. |
+| [Gauge](https://vercel.com/geist/gauge) | Available upstream composition: chart-radial-text uses Card + Chart + installed Recharts. Our existing `UsageMeter`/`Progress` cover linear readings; a radial wrapper is not yet exported. | [Radial Charts](https://ui.shadcn.com/charts/radial), especially chart-radial-text; existing Recharts dependency. | Ratio/allowance with a meaningful maximum and adjacent value/label; never fake a percentage for unknown work. The product owns thresholds; a source example cannot change them. Circular form is a visual choice requiring a shared owner if adopted; no radial API exists today. |
+| [Grid](https://vercel.com/geist/grid) | Composition: layout grid, `CardRow`, website `nc-page`; no ruled `Grid` API. | [Card](https://ui.shadcn.com/docs/components/base/card) in CSS grid; ruled presentation guides are decorative layout. | Ordinary card layout uses layout utilities/CardRow. Geist visible guides are for marketing/docs composition; guides are decorative, do not affect reading order, and are drawn once at joins. Do not install a grid mechanism merely for normal responsive columns. |
+| [Input](https://vercel.com/geist/input) | Component: `Input`, `InputGroup`, `SettingsField`/`Field`. | [Input](https://ui.shadcn.com/docs/components/base/input) + [Field](https://ui.shadcn.com/docs/components/base/field) | One free-form value. Correct type/autocomplete/inputMode, visible label, stable help and field error. Domain rules decide trimming; never trim passwords/secrets/code indiscriminately. Preserve entry through request failures. Size and state belong to owner; label/error strings are composed, not built-in Input props. |
+| [JSON View](https://vercel.com/geist/json-view) | Composition for static JSON: code display with exact serialized text. `Collapsible` supports grouped disclosure; Geist-style keyboard tree navigation, search highlighting and depth controls remain an enhanced capability gap. | [Input Group](https://ui.shadcn.com/docs/components/base/input-group) for static code; [Collapsible](https://ui.shadcn.com/docs/components/base/collapsible) for disclosure. Full JSON tree navigation/search is additional behavior. | Structured payload inspection warrants an accessible expandable tree with selectable/copyable values. Static documentation can use a code block. No `defaultExpandDepth`/`highlightPattern` API exists in our package; do not claim conversation output is parity. |
+| [Keyboard Input](https://vercel.com/geist/keyboard-input) | Component: `Kbd`, `KbdGroup`, `CommandShortcut`; platform mapping is caller-owned. | [Kbd](https://ui.shadcn.com/docs/components/base/kbd) and KbdGroup. | Shortcut hints near a command, not an interactive input. Keep each key meaningful, surrounding prose outside the key. Show OS-correct modifiers and only shortcuts actually bound. Our Kbd has no Geist modifier booleans or automatic OS mapping. |
+| [Label](https://vercel.com/geist/label) | Component: `Label`, `FieldLabel`, `FieldLegend`. | [Field](https://ui.shadcn.com/docs/components/base/field) label/legend or [Label](https://ui.shadcn.com/docs/components/base/label) | Visible name attached to the control or semantic group. Placeholder is example/hint, not label replacement. Mark requirement and help separately. Do not use another aria-label that overrides an already correct visible label. |
+| [Load More Button](https://vercel.com/geist/load-more-button) | Composition: `Button` + `PendingLabel` and app pagination; no complete owner. | [Button](https://ui.shadcn.com/docs/components/base/button) + pending feedback and app pagination. | Append records while preserving scroll, previous rows and focus. Expose pending/error/exhausted states; no duplicate fetch or disappearance while focused. A request for another page differs from exposing already-loaded hidden content. |
+| [Loading Dots](https://vercel.com/geist/loading-dots) | Personalization: `PendingLabel` / `WaitingLine`; no LoadingDots. | [Spinner](https://ui.shadcn.com/docs/components/base/spinner) supplies upstream indeterminate feedback; retain our waiting treatment. | Inline indeterminate wait names actual work, announces busy state once, and uses one indicator. Agent work uses the Agent's own state; system waiting follows the activity rules below. Never animate completed text. |
+| [Menu](https://vercel.com/geist/menu) | Component: `DropdownMenu` family, `DropdownMenuCommand`, `ActionMenu`. | [Dropdown Menu](https://ui.shadcn.com/docs/components/base/dropdown-menu) | Resource actions from a discoverable trigger. Choice lists use appropriate radio/checkbox menu items. Keep label first, target clear, related groups separated and destructive group last. Use library positioning, typeahead, keyboard selection, Escape and focus return. A locked command needs readable reason. |
+| [MiddleTruncate](https://vercel.com/geist/middle-truncate) | Composition for technical text: mono value + `Tooltip` + copy action. The width-aware middle-truncation behavior is not provided by those parts or a public shared owner. | [Tooltip](https://ui.shadcn.com/docs/components/base/tooltip) + code/text layout and copy. No stock middle-truncation algorithm. | Paths/URLs/IDs where prefix and suffix matter. Keep original text available and copy the original, not ellipsis. Prose uses wrapping or end truncation. Avoid jitter under resize, preserve accessible full value, and never make tooltip the only way to recover an essential action. |
+| [Modal](https://vercel.com/geist/modal) | Component: `Dialog` family, `FormDialog` for short forms, and `ConfirmDialog` for consequences. | [Dialog](https://ui.shadcn.com/docs/components/base/dialog) | Blocking decision or bounded focused job. Title, description when useful, scrollable body and footer; return focus predictably. Save failure retains data. Allow safe dismissal; explicitly protect unsaved/destructive context. Persistent context uses Sheet/page, not stacked dialogs. |
+| [Multi Select](https://vercel.com/geist/multi-select) | Composition: `Combobox multiple` with chips/list; `CollectionFilters` for query facets; checkbox menus for small sets. | [Combobox](https://ui.shadcn.com/docs/components/base/combobox) multiple mode and chips. | Multiple known values with visible selection/count, labelled remove controls and empty/search states. Match controlled state to URL/server. Keep keyboard movement/removal delegated to Base UI. No separate MultiSelect export or built-in select-only/all contract. |
+| [Note](https://vercel.com/geist/note) | Component: `Alert`, `NoticeBanner`, `MessageNotice`. | [Alert](https://ui.shadcn.com/docs/components/base/alert) | Persistent contextual explanation/constraint next to its subject. Choose semantic tone, one concept and one resolver. Success/violet/cyan extensions must be real typed variants before taught. Avoid dismissing an unresolved important condition, or using a toast as its only home. |
+| [Pagination](https://vercel.com/geist/pagination) | Component for numbered/data pager: `Pagination` family / `DataTable`; compose Geist's previous/next article rail from links. | [Pagination](https://ui.shadcn.com/docs/components/base/pagination); named links for an article rail. | Distinguish navigating sibling pages from paging rows. Data pager keeps count/range and disabled boundaries; article rail names the next destination and omits absent ends. Announce current page and route through the app. |
+| [Phone](https://vercel.com/geist/phone) | Optional composition: `AspectRatio` + decorative frame and captured content. No dedicated device-frame export. | [Aspect Ratio](https://ui.shadcn.com/docs/components/base/aspect-ratio) + decorative frame; no stock phone primitive. | Captured mobile showcase only; decorative chrome hidden from accessibility, content has meaningful alternative. Preserve aspect ratio and paused/reduced-motion behavior. Product parity does not require fake device surrounds. |
+| [Pill](https://vercel.com/geist/badge#pill) | Component for static category: `Tag`; filters: `CollectionFilters`; links/buttons keep their semantics. | [Badge](https://ui.shadcn.com/docs/components/base/badge) for metadata; [Toggle Group](https://ui.shadcn.com/docs/components/base/toggle-group) or buttons for interactive state. | A shape is not a new interaction. Static metadata stays static; active filter has remove/reset and state; navigation is a link. Avoid wrapping arbitrary clickable badge spans. |
+| [Progress](https://vercel.com/geist/progress) | Component: `Progress`, `ProgressTrack`, `ProgressIndicator`, `ProgressLabel`, `ProgressValue`; `UsageMeter`. | [Progress](https://ui.shadcn.com/docs/components/base/progress) | Known completed amount against real `max`; print work and units. Unknown wait uses waiting treatment. Semantic warnings come from product thresholds. Accessible value/name and sensible update frequency; completion becomes the actual finished state. Stops/labels are not a provided prop. |
+| [Project Banner](https://vercel.com/geist/project-banner) | Composition: scoped `MessageNotice`/`NoticeBanner`; prioritization belongs to the app. | [Alert](https://ui.shadcn.com/docs/components/base/alert) + action at the page scope. | One strongest unresolved object-wide condition above its content, with a resolving action. It remains until underlying state changes. App chooses urgency and authorization. Never stack duplicate section notices or dismiss away a blocking condition. |
+| [Radio](https://vercel.com/geist/radio) | Component: `RadioGroup`, `RadioGroupItem` with FieldSet/legend. | [Radio Group](https://ui.shadcn.com/docs/components/base/radio-group) + [Field](https://ui.shadcn.com/docs/components/base/field) | Small mutually exclusive choices; rich ones use choice tiles; large searchable ones use Combobox. Safe default when justified; require deliberate choice when consequential. Group label, named options, arrow selection, one tab stop and disabled reasons. |
+| [Relative Time Card](https://vercel.com/geist/relative-time-card) | Composition: `HoverCard` + semantic time + locale formatting. Portal already has `formatRelativeTime` and `portalRelativeTimeFormatter`; a shared wrapper can accept formatted strings from the product. | [Hover Card](https://ui.shadcn.com/docs/components/base/hover-card) + semantic time and locale formatting. | Recent time in dense rows with exact date/timezone on focus/hover. Centralize compact locale format and transition to absolute dates; preserve machine-readable timestamp. Missing/stale/loading differ. Do not claim Vercel's seven-day cutoff already exists. |
+| [Scroller](https://vercel.com/geist/scroller) | Component: `ScrollArea`, `ScrollBar`; `Carousel` for a controlled rail. | [Scroll Area](https://ui.shadcn.com/docs/components/base/scroll-area); [Carousel](https://ui.shadcn.com/docs/components/base/carousel) for a controlled rail. | One overflow axis where appropriate; preserve reading order, keyboard focus visibility and meaningful controls. Large datasets require a measured virtualization need and owner. Our ScrollArea has no Geist direct-child scroll-button API. |
+| [Search Input](https://vercel.com/geist/search-input) | Component: `CollectionSearch` in `CollectionToolbar`; richer reset/loading is a gap. | [Input Group](https://ui.shadcn.com/docs/components/base/input-group) search icon, input, reset button and pending state. | Scope-specific query, clear/reset, retained results while updating and no-results recovery. Use [CollectionSearch](../ui/src/components/collection-search.tsx) for the query control; compose a reset when the task requires one. Preserve the global command-menu shortcut. |
+| [Select](https://vercel.com/geist/select) | Component: `Select` family, `NativeSelect` family. | [Select](https://ui.shadcn.com/docs/components/base/select) or [Native Select](https://ui.shadcn.com/docs/components/base/native-select) | Short fixed known options; a few meaningful options may be radio/segmented; many searchable ones use Combobox. Label and validation are field composition. Keep placeholder distinct from an actual option, groups semantic and keyboard selection native to primitive. |
+| [Separator](https://vercel.com/geist/separator) | Component: `Separator`; `FieldSeparator` and menu/group separators for scoped roles. | [Separator](https://ui.shadcn.com/docs/components/base/separator) | Divide distinct groups, not every paragraph. Each join has one line. Preserve semantic orientation and decorative treatment. Frame inset is needed only where overlaid edge would double a line; do not add caller borders to an elevated owner. |
+| [Sheet](https://vercel.com/geist/sheet) | Component: `Sheet` family; actual modal/dismissal defaults differ from Geist. | [Sheet](https://ui.shadcn.com/docs/components/base/sheet) | Persistent associated context such as row inspection. Title, explicit close, contained scrolling and focus return to originating record. Decide nonmodal behavior deliberately; do not repeat Geist's contradictory “nonmodal but trap focus” guidance mechanically. Blocking destructive consequence uses confirmation. |
+| [Show more](https://vercel.com/geist/show-more) | Composition: `Disclosure`/`Collapsible`/`ExpandableBlock` depending content. | [Collapsible](https://ui.shadcn.com/docs/components/base/collapsible) + named trigger. | Reveal already-loaded supporting content with meaningful hidden count and stable context. Trigger exposes expansion and target; preserve reading position and focus. Do not call a network fetch merely “show more” without pending/error behavior. |
+| [Skeleton](https://vercel.com/geist/skeleton) | Component: `Skeleton`. | [Skeleton](https://ui.shadcn.com/docs/components/base/skeleton) | Known loading geometry only; match final shape and avoid layout shift. Loading region is busy, skeleton decorative/nonfocusable. It must resolve to data, absence or failure. Static is our current material choice; shimmer adoption must reconcile motion owner. |
+| [Slider](https://vercel.com/geist/slider) | Component: `Slider`; compose with `Input` for precision. | [Slider](https://ui.shadcn.com/docs/components/base/slider) + [Input](https://ui.shadcn.com/docs/components/base/input) for exact values. | Bounded range where position matters, with explicit minimum/maximum/step, current value/unit and accessible thumb labels. Exact numeric entry remains available when precision matters. Keyboard operation stays with primitive; no fabricated threshold colors. |
+| [Snippet](https://vercel.com/geist/snippet) | Composition: read-only mono `InputGroupInput` + addon `CopyButton`, or `CodeBlock` for multiple lines. A shell prompt is separate from the copied value; no separate selection or clipboard engine is needed. | [Input Group](https://ui.shadcn.com/docs/components/base/input-group) read-only mono value + copy button. | A short exact command or value intended for copying. Displayed shell prompt is not copied. One command, selectable code and honest copy success/failure. Secrets need explicit reveal policy and must not leak into logs/labels. Build on existing clipboard capability. |
+| [Spinner](https://vercel.com/geist/spinner) | Personalization: `PendingLabel`/`WaitingLine`, no Spinner export. | [Spinner](https://ui.shadcn.com/docs/components/base/spinner) is the upstream alternative; retain our waiting treatment. | Short indeterminate system action. The shared waiting recipe owns stable sizing, focus and announcement; never replace Agent identity with spinner. Respect reduced motion and avoid two indicators for one wait. |
+| [Split Button](https://vercel.com/geist/split-button) | Composition: `ButtonGroup`, `Button`, `DropdownMenu`; no unified SplitButton. | [Button Group](https://ui.shadcn.com/docs/components/base/button-group) split/dropdown examples. | Clear default with a few closely related alternatives. Menu trigger names the action family. Include default in menu, share pending/disabled state and keep destructive actions out of an ambiguous split primary. A reusable wrapper avoids caller seam/rounding mistakes. |
+| [Status Dot](https://vercel.com/geist/status-dot) | Component: [StatusDot](../ui/src/components/status-dot.tsx) and `StatusBadge`. | [Badge](https://ui.shadcn.com/docs/components/base/badge) + labelled status dot; existing StatusDot owns our visual. | Our dot is generic; Geist's is specifically deployment lifecycle. Do not import Vercel state vocabulary into Agents. Pair with readable state; decorative dot when text already names it. Motion/status meaning remains truthful to product state. |
+| [Switch](https://vercel.com/geist/switch) | Composition: `RadioGroup` for mutually exclusive segmented values; `Tabs` for panels; `ToggleGroup` where pressed-button semantics fit. | [Radio Group](https://ui.shadcn.com/docs/components/base/radio-group), [Toggle Group](https://ui.shadcn.com/docs/components/base/toggle-group) or [Tabs](https://ui.shadcn.com/docs/components/base/tabs) according to selection semantics. | Geist Switch means segmented selection, not our boolean `Switch`. Two/three short peer values, one selected state, stable widths and named options. Choose radio or tab semantics by job; do not mislabel button toggles as radios. |
+| [Table](https://vercel.com/geist/table) | Component: [Table](../ui/src/components/table.tsx) family + `DataTable` + `TableCard` + `TableValue`; density, striping and borders belong to the shared owner. Virtualization remains a separate capability. | [Table](https://ui.shadcn.com/docs/components/base/table) + [Data Table](https://ui.shadcn.com/docs/components/base/data-table) with TanStack Table. | Comparable shared columns use table; descriptive rows use Item; key/value facts use ObjectFacts. Visible column labels when comparing/sorting. Numeric columns tabular/right aligned. Shared toolbar, body, totals and footer own consistent geometry. Empty state sits outside body; rows keep stable IDs, nested controls and compact details. |
+| [Tabs](https://vercel.com/geist/tabs) | Component: `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`; URL views use `TabsNav`/`TabsLink`. | [Tabs](https://ui.shadcn.com/docs/components/base/tabs) | Sibling views of the same object. App owns route/query persistence. Choose the shared `line` variant for an underline or the default variant for a segmented treatment, keeping siblings consistent; never draw either in route styles. Keep overflow navigable and selection/focus distinct; label tablist, preserve keyboard behavior and use nouns for views. |
+| [Text With Copy Button](https://vercel.com/geist/text-with-copy-button) | Composition: mono text + `CopyButton`; Portal `CopyableIdentifier` supplies the product value and translated labels. Copying and result feedback stay in the shared owner. | [Input Group](https://ui.shadcn.com/docs/components/base/input-group) or text + [Button](https://ui.shadcn.com/docs/components/base/button) and clipboard behavior. | IDs/addresses users actually need elsewhere. Keep exact value and target-specific copy label; acknowledge true success, handle failure and expose full value if truncated. Avoid turning ordinary prose into copyable chrome. |
+| [Textarea](https://vercel.com/geist/textarea) | Component: `Textarea` + Field/SettingsField. | [Textarea](https://ui.shadcn.com/docs/components/base/textarea) + [Field](https://ui.shadcn.com/docs/components/base/field) | Multiline description, notes or code. Useful rows/maximum growth, retained content, visible label/help/error and character limit only when real. Do not trim deliberate whitespace in code or secrets. Ensure footer actions stay reachable on compact screens. |
+| [Theme Switcher](https://vercel.com/geist/theme-switcher) | Component: `ThemeModeSwitcher`, `ThemeModeMenu`. | [Dark mode](https://ui.shadcn.com/docs/dark-mode) + [Dropdown Menu](https://ui.shadcn.com/docs/components/base/dropdown-menu) or radio choices; app theme provider owns persistence. | One canonical light/system/dark preference per shell/settings context, app provider is source of truth. Bind the [theme controls](../ui/src/components/theme-mode-switcher.tsx) to that provider, name the group and localize its choices. Respect forced mode in the product adapter. |
+| [Toast](https://vercel.com/geist/toast) | Component: `Toaster`; `showMessageToast` from `@nadicodeai/ui/components/toast`. | [Toast](https://ui.shadcn.com/docs/components/base/toast) for current Base UI source; our existing Toaster/message adapter remains the public owner. | One terminal acknowledgment per user action. Field validation and persistent urgent problems retain their local home. Product catalog supplies wording. Only show Undo when safe rollback exists; do not make transient toast the only route to recovery or essential navigation. |
+| [Toggle](https://vercel.com/geist/toggle) | Component: our `Switch` for boolean setting; our `Toggle` is a pressed button. | [Switch](https://ui.shadcn.com/docs/components/base/switch) for a boolean setting; [Toggle](https://ui.shadcn.com/docs/components/base/toggle) for a pressed action. | Name what ON means. Persist immediately only when the actual setting contract says so; otherwise belong to a saved setting group. Expose pending failure and recover to truthful state. Checkbox is for selection/acknowledgment, segmented control for exclusive values. |
+| [Tooltip](https://vercel.com/geist/tooltip) | Component: `TooltipProvider`, `Tooltip`, `TooltipTrigger`, `TooltipContent`. | [Tooltip](https://ui.shadcn.com/docs/components/base/tooltip) | Short supplementary constraint or meaning, hover and focus. Visible control already names itself. Never sole home for important action/error or substitute for icon button's accessible name. Rich entity preview uses HoverCard; forms help remains connected field text. |
+| [Video](https://vercel.com/geist/video) | Composition: `AspectRatio` + native video, controls, poster and caption tracks. A richer player needs a concrete media requirement; no shared Video export is needed for native playback. | [Aspect Ratio](https://ui.shadcn.com/docs/components/base/aspect-ratio) + native video controls, poster and caption tracks. | Real media with controls, captions/transcript where speech matters, deliberate autoplay/mute and reduced-motion poster. Preserve layout while loading and recover from unavailable media. Do not create dummy controls or claim a general video system from one marketing embedding. |
+
+### Additional shared building blocks
+
+These shared components also follow the same foundations, although Geist does not list each as a separate component. Use the existing product composition before choosing one directly.
+
+| Owner | Use and composition contract |
+| --- | --- |
+| `Sidebar`, `DashboardShell`, `DesktopShell`, `PortalSidebarFrame` | Persistent product navigation and workspace chrome. The product owns destinations and active state; the shell owns compact behavior, landmarks and layout. Never add a competing sidebar to a page. |
+| `NavigationMenu` | A site's grouped navigation links, with genuine destinations and usable keyboard paths. Product object views use shared tabs; commands use a menu. |
+| `Menubar` | A persistent application command bar with related menus. Use only when the workspace has that command model; do not substitute it for website navigation or a row's actions. |
+| `Popover` | A bounded contextual control such as filters or a scope chooser. Name its trigger, keep essential meaning visible outside hover, and restore focus when it closes. A short independently saved record form uses `FormDialog`; a substantial workflow may use `FormDrawer`. |
+| `InputOTP` and its group/slot parts | A fixed-length verification code. Keep one logical input with paste and keyboard behavior, a visible label, invalid/retry state and a real resend policy. The product owns length, expiry and submission. |
+| `Carousel` | A finite horizontal rail where adjacent media or items have a meaningful sequence. Give previous/next controls clear names and boundaries; preserve keyboard access and reduced motion. A sortable record collection uses a table or entity list. |
+| `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle` | A workspace with genuinely adjustable panes. Keep keyboard resizing, meaningful minimum sizes, readable content and a compact alternative. The product owns persistence of pane sizes. |
+| `AspectRatio` | Stable layout for real media while it loads. Supply a meaningful ratio and correct media alternative; the wrapper creates neither playback controls nor a device-frame component. |
+| `Form`, Field parts and form adapters | Connect actual validation to controls, help and errors. Use the field owner that matches the existing form engine; preserve values through recoverable failure. Do not change the form engine during visual styling. |
+| `DirectionProvider` | Direction context when the product supports right-to-left content. Keep reading and focus order meaningful; direction does not translate strings or change locale by itself. |
+| `QrCode` | A real scannable value with a readable fallback and an alternative action when scanning is unavailable. Keep secrets out of accessible labels and show expiry or invalidity from actual state. |
+| `FileDiff` | Existing code-change comparison, with file identity and additions/removals explained. A diff is not a general code editor or JSON viewer. Preserve exact source and the established conversation/tool owner. |
+| Chart kit and `KpiCard` | Choose the reading through [Data Visualization](#data-visualization), then use its shared chart owner with units, period, legend and accessible data. Geometry never decides business thresholds. |
+
+### Complete compositions
+
+Choose the owner for the whole task. Keep its slots and state handling together so pages supply content without recreating card zones, toolbar geometry or overlay behavior.
+
+| Task | Shared composition | What the product adapter supplies |
+| --- | --- | --- |
+| Independently saved settings | `ReadingColumn` → `SettingsSection` → `SettingsField`; Portal selects the configuration width and form presentation through `SettingsPage` and its `SettingsSection` adapter. `SettingsForm` and `SettingsSubmitButton` own native form dirty/pending state. `footerHint` and `footer` stay in the recessed strip. | Values, validation, dirty/pending state, local Save, retained input and failure. Header and content share one body plane; the footer has one seam. |
+| Read-only facts | `SettingsFactsSection` or `ObjectFacts`, with `TableValue` for missing facts. | Label/value pairs, actual timestamps, identifier format, links and permission-aware actions. Unknown remains distinct from zero. |
+| Comparable collection | `PageHeader`/`PageActions`, `CollectionToolbar`, `DataTable` within `TableCard` when framed. | Stable record IDs, columns, visible headings, search/filter/sort, URL state, row commands, pagination and `empty`. Numeric columns align at the trailing edge; totals and paging use their own footer zone. |
+| Descriptive entity list | `ItemGroup divided` with `ItemMedia`, `ItemContent`, `ItemTitle`, `ItemDescription`, `ItemActions`; domain owners include `AgentListRow` and `CatalogEntry`. | Identity, a short description, categorical facts, one primary task and secondary menu. Long values wrap or truncate predictably; a row never gains a second nested hit target by accident. |
+| Overview figures | `CardRow` with `KpiCard` or the chosen chart card. | Measurement, unit, comparison period, truthful delta and stable categorical assignment. Related cards align; status colour and series colour retain different meanings. |
+| Object workspace | `ObjectOverview`, `ObjectIdentity`, `ObjectFacts`, `ObjectSection` and shared tabs. | The actual object, scope, hierarchy, sections, routes and commands. Agent identity retains its orb and the Agent-specific composition. |
+| Short create/edit form | `FormDialog` with Field parts; Portal binds it through `ActionDialogForm`. Substantial workflows explicitly select `FormDrawer`. | Submit operation, labels, validation, dirty state, retained input, permissions and dismissal policy. Use the owned scroll body and fixed footer; do not nest another overlay. |
+| Destructive confirmation | `ConfirmDialog`; the app's confirm-action adapter. | Named target, real consequence, labels, pending state, failure and operation. Typed-name verification is not a supported prop; extend the owner when that capability is needed. |
+| Global commands or record actions | `CommandDialog` for cross-resource search; `ActionMenu` and `DropdownMenuCommand` for one record. | Real commands, grouping, permissions, disabled reasons and keyboard shortcuts. Choose by scope; keep the destructive group last. |
+| Absence or failed read | `EmptyState` through `DataTable.empty` or the affected content region; `MessageNotice` for persistent conditions. | First use, nothing yet, no matches or failed read, with the real recovery action. Empty state belongs outside the semantic table body. |
+| Rich choices | `FieldSet`/`FieldLegend`, then `FieldLabel` containing `Field`, its content and a radio or checkbox. | Known options, selection model, labels, descriptions, validation and disabled reasons. The tile label activates its control; a nested link cannot steal the choice. |
+| Split action | `ButtonGroup` with the default `Button` and a `DropdownMenu` trigger. | One action family, default action, alternatives and shared pending/disabled state. Label the group and menu trigger. Preserve one seam and include the default in the menu. |
+| Copyable identifier or command | Mono text or read-only `InputGroupInput` plus `CopyButton`; put the optional shell prompt outside the copied value. | Exact source value, visible representation and translated `copyLabel`, `copiedLabel`, `copyFailedLabel`. Preserve the full source when the displayed representation is shortened. |
+| Plain code or static JSON | `CodeBlock` owns the read-only InputGroup composition and CopyButton. | Exact `code`, accessible `label`, optional filename/language and copy labels. Serialize static JSON in the adapter; use FileDiff for an actual before/after comparison. |
+| Relative timestamp preview | Semantic `time` with `HoverCard`; keep the exact timestamp available to assistive technology. | Machine-readable timestamp, formatted relative and absolute text, timezone, and the product's refresh policy. Portal keeps its existing locale formatter. |
+| Expandable file navigation | `SidebarMenu` and `Collapsible`, following shadcn sidebar-11, with file icons and real file links or commands. | Hierarchy, stable identity, current file, labels and actions. Preserve semantic nested lists; a full tree widget needs a separately verified keyboard contract. |
+| Feedback collection | `Popover` with Field, Textarea, optional RadioGroup/Select and Button; inline rendering uses the same form parts. | Prompt, topic choices, permitted context, destination, pending/result state and retained input on failure. |
+| Native media playback | `AspectRatio` around a native video with its controls, poster and caption tracks. | Media source, captions, transcript where needed, aspect ratio, playback policy and unavailable-media recovery. |
+
+Use `CopyButton` and `CodeBlock` for their complete compositions. Relative-time previews, feedback and expandable file navigation combine existing parts with product adapters. Enhanced code highlighting and full JSON/tree-widget navigation remain specific behavior gaps; do not invent undocumented props or copy a local implementation into every caller. [shadcn Button Group](https://ui.shadcn.com/docs/components/base/button-group), [Field](https://ui.shadcn.com/docs/components/base/field) and [Data Table](https://ui.shadcn.com/docs/components/base/data-table) provide the underlying composition patterns; our public wrappers and this document own their product use.
+
+### Personalization boundaries
+
+Keep Geist's hierarchy, control metrics, typography roles, neutral surface zones and disciplined semantic colour. Keep nadicode's stronger visible materials, glass transmission and highlight, Agent orbs, genuine provider marks, categorical Library colours and restrained activity language. These differences are tokenized or owned by a typed component variant. Business status, permissions, transaction boundaries and product copy remain the product's truth; a visual reference cannot change them.
 
 ### Controls
 
-- **Buttons.** Every button is `{spacing.control-height}` high with a `{typography.body-sm}` label at 500 and `{rounded.md}` corners ("Layout" says where the smaller sizes may go). `default` is the action (ink, white label; `{colors.dark-action}` with a `{colors.dark-action-foreground}` label in dark); `outline` and `secondary` are the quieter steps, edged with the `{colors.line}` hairline; `ghost` has no edge and is only for an icon-only button (the three dots, close, collapse), never a text button in a list; `destructive` is the error pair; `link` is inline. On a colour or black ground a control takes a variant whose label clears AA there: `brandSolid` (white, ink label) or `brandGhost` (white label, no fill) on cobalto, rosso and black, and the default ink button on verde, arancio and giallo.
+- **Buttons.** Every button is `{spacing.control-height}` high with a `{typography.body-sm}` label at 500 and `{rounded.sm}` corners ("Layout" says where the smaller sizes may go). `default` is the action (ink, white label; `{colors.dark-action}` with a `{colors.dark-action-foreground}` label in dark); `outline` and `secondary` are the quieter steps, edged with the `{colors.line}` hairline; `ghost` has no edge and serves a tertiary text action or an icon-only command (the three dots, close, collapse); `destructive` is the error pair; `link` is inline. On a colour or black ground a control takes a variant whose label clears AA there: `brandSolid` (white, ink label) or `brandGhost` (white label, no fill) on cobalto, rosso and black, and the default ink button on verde, arancio and giallo.
 - **Dialog footers.** A dialog's actions sit at the footer's trailing edge, the primary last. A choice to stop being asked is a checkbox at the footer's leading edge, remembered by whichever action is taken, never a third button.
-- **Tabs** switch between one object's views. They are pills in one row directly under the top bar: `{spacing.control-height}` high, a `{typography.body-sm}` label at 500, `{spacing.sm}` inline padding and `{rounded.md}` corners. The current tab is filled with the `selection` role (`{colors.navigation-selection-bg}` with `{colors.navigation-selection-fg}`, `{colors.dark-navigation-selection-bg}` in dark); the others have no fill and `{colors.muted}` text, which turns ink on hover. A tab that opens a URL is a link in `TabsNav` with the same look; the `line` variant is for tabs inside a panel.
-- **Links** read as text. A link inside a sentence, or offered alone as a section's way on, is `{colors.link}` and underlined at rest; a link that is itself the value, such as a record's name or a fact, keeps the text's colour and underlines on hover; a secondary way out beside the content, such as a card header's "see everything" or a return link, is `{colors.muted}` and turns ink with its underline on hover. The underline sits 4 px under the text.
-- **Fields** keep the `{colors.input}` edge, `{rounded.md}`, no shadow and at least `{spacing.control-height}`. Help sits beside its field, and validation stays with it.
+- **Tabs** switch between sibling views of one object. Use `Tabs` with `TabsList`, `TabsTrigger` and `TabsContent` for panels; use `TabsNav` and `TabsLink` for URLs. Both page sections and local panels may use the shared `line` treatment for an underline or the default segmented treatment. Choose by the surrounding composition: existing shells retain their segmented tabs, and the inbox retains its local line tabs. Select the treatment through the component API, never a page border or colour override. Keep one treatment among siblings, label the group, and retain keyboard navigation and compact overflow. A choice that changes a value rather than a view uses radio or toggle semantics instead.
+- **Links** read as text. A link inside a sentence, or offered alone as a section's way on, is `{colors.link}` and underlined at rest; a link that is itself the value, such as a record's name or a fact, keeps the text's colour and underlines on hover; a secondary way out beside the content, such as a card header's "see everything", uses the same blue link treatment. Breadcrumb and back navigation retain their quieter navigation treatment. The underline sits 4 px under the text.
+- **Fields** keep the `{colors.input}` edge, `{rounded.sm}`, no shadow and at least `{spacing.control-height}`. Help stays with its field; in configuration sections, the label and help sit above the control, and validation stays with it.
 - **Focus** is drawn once, by the base layer, on every `:focus-visible` element. A component never repaints it; it may move it to a proxy that stands for the focused element, as a field group does for its input.
 - Enabled buttons show a pointer; a disabled control advertises nothing. On coarse or non-hover input every target is at least `{spacing.touch-target}`, while a checkbox or radio mark stays compact and its label supplies the target. An unchecked checkbox or radio mark is its `{colors.input}` edge with no fill of its own, so it shows the surface it sits on; checked, it fills with the action pair.
 
 ### Cards and sections
 
-`Card` is the product's container, at the resting height by default ("Elevation & Depth"). A row of cards is a `CardRow`: siblings share one height, and the row collapses to one column below its breakpoint. A card or settings section is composed around a real task, collection or form; its header names the content and may explain scope or consequence, and it is never a card holding only an introduction. A settings section owns its heading, a one-line description of what the setting changes, its fields and its local save. On a settings page each card saves its own fields with its own Save in its footer, always visible and disabled until something in that card changes; nothing on a settings page applies on change. Only the preferences in the account menu, Theme and Language, apply at once. Its footer is a strip one tone off the card body inside the card's edge, the `recessed` role behind a `{colors.line}` seam: `{colors.canvas-soft}` below the white card in light, and `{colors.dark-material-raised}` one step above the resting tone in dark: an optional hint on the left, such as the plan a feature needs or a link to learn more, and the section's action on the right; a facts section shows labelled facts as plain pairs, the label above its value, in two equal columns, stacked on compact screens, with every label kept in place when a value is missing; a fact never gets a box of its own inside the card. A KPI card is one figure: label, value, the change as a badge in the top right, and a footer with the comparison.
+`Card` is the product's container, at the resting height by default ("Elevation & Depth"). A row of cards is a `CardRow`: siblings share one height, and the row collapses to one column below its breakpoint. A card or settings section is composed around a real task, collection or form; its header names the content and may explain scope or consequence, and it is never a card holding only an introduction. A settings section owns its heading, a one-line description of what the setting changes, its fields and its local save. On a settings page each card saves its own fields with its own Save in its footer, always visible and disabled until something in that card changes; nothing on a settings page applies on change. Only the preferences in the account menu, Theme and Language, apply at once. Its footer is a strip one tone off the card body inside the card's edge, the `recessed` role behind a `{colors.line}` seam: `{colors.canvas-soft}` below the white card in light, and `{colors.dark-canvas}` below the resting body in dark: an optional hint on the left, such as the plan a feature needs or a link to learn more, and the section's action on the right; a facts section shows labelled facts as plain pairs, the label above its value, in two equal columns, stacked on compact screens, with every label kept in place when a value is missing; a fact never gets a box of its own inside the card. A KPI card is one figure: label, value, the change as a badge in the top right, and a footer with the comparison.
 
 ### Menus and commands
 
-A record's actions sit behind one three-dot trigger, a `{spacing.control-height}` ghost icon button that opens an end-aligned menu. In a collection every row's commands live in that menu, enabling, disabling, editing, pairing again and removing included, as plain text commands in task order: Edit, then the record's own commands, then the views that read it; a command that cannot run now stays in place, greyed, with its reason; the destructive command comes last, in the error colour, after a separator. A row shows no other text button, with one exception: a row whose main job is to start or open something it is not doing yet shows that one outline button ("Connect", "Connect again", "Manage"), and a row that has any other command keeps its three dots after that button. Menu rows put the label first and a decorative icon at the trailing edge.
+A record's primary destination is its visible name or a labelled link. Navigation is never hidden in its action menu. Keep the main task visible: Edit can expand a row in place, as in Vercel Domains; Connect belongs beside an available connection. Additional mutations use an end-aligned `ActionMenu`, with destructive commands after a separator. A menu is not required when the row has no secondary mutations. Disabled commands retain an explanation. The three-dot trigger is a `{spacing.control-height}` ghost icon button. Menu rows put the label first and a decorative icon at the trailing edge; a destructive command never becomes the loudest repeated action.
+
+Choose the surface from the task. Settings use a centred column of independently saved `SettingsSection` fieldsets with labels above bounded controls. A short row action uses `FormDialog`; editing a fact on a detail page stays in place. An invitation can be an inline fieldset above the member directory. A substantial workflow that needs persistent context may opt into `FormDrawer`. Confirmation of a consequence uses `ConfirmDialog`. A dedicated workflow page remains a page. Never select a drawer merely because an action accepts input. These choices follow the live Vercel General settings, Members and Domains pages and the [Geist Modal](https://vercel.com/geist/modal) and [Fieldset](https://vercel.com/geist/fieldset) patterns.
+
+Collection search and filters stay immediately above their rows. The title row holds the collection's primary action, unless an inline form already exposes that task. Scope selectors preserve the authorized organization or account. Filters do not compete with primary actions. The account menu identifies the signed-in person and exposes their account settings, theme and language.
 
-Every collection has the same toolbar: Add filter when the collection has facets, the search filling the row, then sort; the page's actions are never in it, they sit on the title's row ("Page compositions"). Creating a record (New or Add) is exactly one `default` button there; it opens a drawer from the right with the "Add …" title and a close control at the top, the fields in its body and the save as the primary button in its footer, and never an inline form on the page. Editing a record and connecting one (an app, a channel, a server) open the same drawer, from the record's Edit or Connect; a centred dialog only confirms a consequence: delete, revoke, sign out. One component draws that drawer in every product: `FormDrawer` (`@nadicodeai/ui/components/form-drawer`). A page has at most one other visible action, an `outline` button left of the create button; anything more goes in the page's three dots. A search box never stands alone in a box of its own. A collection's filters are chips, never a dropdown above the table: an Add filter button, a dashed chip for each suggested filter that applies in one click, and one outline chip per active filter with its own remove control. A sort control, an outline button naming the current order, sits at the toolbar's trailing edge. The scope a page works in, such as the company or the account it reports on, is a scope switcher: a ghost trigger reading the current name and ⇅ that opens a popover with a Find search, the choices with the current one checked, and a Create row at the bottom when the scope can be created there. The account menu names who is signed in, carries one gear to the account section, and holds the Theme and Language choices as compact inline rows. The command palette is glass and fills its dialog.
 
 ### Tables and missing values
 
-A table is native table structure at one density: 48 px body rows. A collection row is one line: the record's identity and at most about five facts, and anything more lives on the record's page. Rows explain themselves by their cells (an identity with its orb or mark, a status badge, a tag, a relative time), so a collection's column header row is kept for screen readers only. A table whose columns are figures a reader cannot tell apart without their names, such as a statement or an analytics comparison, opts in to a visible header row of 36 px. The table inherits its enclosing surface, whose Card owns the outer edge; a visible header and every record except the last end with a quiet 1 px `border` divider. A body row takes the full `accent` fill on hover, on keyboard focus within it and while its menu is open; a selected row takes `muted`; headers and footers never highlight. A collection fits its container without sideways scrolling: identity and actions keep their columns, and supporting facts move into a detail row inside the same record before the table gets cramped. The identity column claims up to a third of the table, gives it back down to a floor, and holds its name on one line: a long name ends in an ellipsis and is whole in its title, as a dashboard row does. A fact holds one line at its own width; a column of words, such as a summary or a sentence, holds one line up to a cap of `16rem`, shrinks to a floor of its own in a narrow table, and past the cap ends in an ellipsis, whole in its title, as a long name does. A document's table, such as a legal page's, is read whole instead: its columns take the `wraps` option, so their words wrap and the row grows, and it shows its header row. In the compact layout every cell but the identity wraps between words. Text anywhere in the product breaks between words, and inside a word only when that word alone cannot fit a line; a machine string such as a hash or a key may break at any character. One categorical fact in a row, such as an installation or a partner, is a `Tag`: a 24 px pill with its mark, dashed when the fact states an absence. An app in a row is its brand mark in the 28 px tile.
+A table is native table structure: 40 px rows for comparable facts and 48 px rows for entity collections. Visible headings use 14 px / 20 px at weight 500 in a 36 px row; numeric columns align to the trailing edge with tabular figures. A collection row is one line: the record's identity and at most about five facts, and anything more lives on the record's page. Column headings are visible by default and remain visible when people compare or sort values. A compact entity collection whose cells identify themselves may keep accessible headings visually hidden with `showColumnHeaders={false}`; choose this exception deliberately. A simple descriptive list uses `ItemGroup` and `Item` instead of table semantics. The table inherits its enclosing surface, whose Card owns the outer edge; a visible header and every record except the last end with a quiet 1 px `border` divider. An interactive body row takes the full `accent` fill on hover, on keyboard focus within it and while its menu is open; a passive table does not imply an action on hover; a selected row takes `muted`; headers and footers never highlight. A collection fits its container without sideways scrolling: identity and actions keep their columns, and supporting facts move into a detail row inside the same record before the table gets cramped. The identity column claims up to a third of the table, gives supporting columns more room in a wide comparison, gives it back down to a floor, and holds its name on one line: a long name ends in an ellipsis and is whole in its title, as a dashboard row does. A fact holds one line at its own width; a status sentence in a figure column wraps at word boundaries while the figure keeps its numeric alignment. A column of words, such as a summary or a sentence, holds one line up to a cap of `16rem`, shrinks to a floor of its own in a narrow table, and past the cap ends in an ellipsis, whole in its title, as a long name does. A document's table, such as a legal page's, is read whole instead: its columns take the `wraps` option, so their words wrap and the row grows, and it shows its header row. In the compact layout every cell but the identity wraps between words. Text anywhere in the product breaks between words, and inside a word only when that word alone cannot fit a line; a machine string such as a hash or a key may break at any character. One categorical fact in a row, such as an installation or a partner, is a `Tag`: a 24 px pill with its mark, dashed when the fact states an absence. An app in a row is its brand mark in the 28 px tile.
 
 An unknown or not-applicable value in a table, a comparison list or a set of facts is a muted `—` with screen-reader text, in the same slot as a present value; zero stays zero. An absent report is not `None`: `None` is only for a complete report that found nothing. A stale value keeps its last reading with a short `Stale` qualifier. Loading, failure, missing permission and actionable setup each keep their own visible state and never turn into a dash. Essential reasons and actions never live only in a hover tooltip.
 
@@ -503,7 +805,7 @@ A status is one Badge: a mark and a word in one of five tones, so it reads witho
 | Tone | Means | Pair |
 | --- | --- | --- |
 | Gray | Default, and every terminal state that needs no action | `{colors.canvas-soft-2}` / `{colors.body}` |
-| Green | Healthy, complete | `{colors.link-bg-soft}` / `{colors.link-deep}` |
+| Green | Healthy, complete | `{colors.success-soft}` / `{colors.success-deep}` |
 | Red | Unusable, failed | `{colors.error-soft}` / `{colors.error-deep}` |
 | Amber | Waiting on a person's decision | `{colors.warning-soft}` / `{colors.warning-deep}` |
 | Blue | A step in motion | `{colors.info-soft}` / `{colors.info-deep}` |
@@ -555,11 +857,11 @@ An Agent is shown as one card shape wherever it appears as an object, in the Por
 
 ### Company card
 
-The sign-up page draws the account being made as the company's card: one object of the ID-1 proportion, dark by nature in every theme, carrying on its top line the wordmark and, once Sofia has found it on the company's site, the company's own logo after a hairline, stamped in `{colors.identity-white}` as one ink (a company with no logo found has the wordmark alone); below, the holder's name and the company's domain. No Agent stands on it, and nothing sits in the engraving: a guilloché engraving in `{colors.identity-white}` at 10%. Beside a wide form it fills in as the form is typed and answers the pointer; on a phone the form keeps the screen, and the card appears once it is issued. It is the one object besides an Agent that moves on its own, once: when it first appears, and again when the account is asked for and it is issued, it turns in the light in 2.2 s, leaning one way and back while the light crosses it from corner to corner, so a person sees it is a card that answers the hand, and then it is still. The foil wakes as the pointer comes within one card width and eases toward it; a pointer that near ends the turn, and a pointer anywhere else on the page moves nothing. The account's Profile shows the person the same card, and a Partner's Overview opens with its card, the Partner edition, on the identity plane, as the invitation it shares. Arriving through a Partner's referral link, the sign-up plane stands the Partner's card behind the one being made, leaning back, so the person's own card stays in front and whole; the drawer of a Partner's email invitation shows the card the invited company will be issued. Where the browser has WebGPU, its foil is vgpu's holographic card shader: matte graphite (`{colors.dark-material-floating}`) whose etched contours diffract the pointer's light, turning toward it by at most 9°. The diffraction and its pearlescent wash fall in pure bands of the identity hues, never a colour between two of them: a company's card takes the cool half, cobalto, azzurro and verde, and a Partner's the warm half, giallo, arancio and rosso. Without WebGPU the engraving catches the light as flat, hard-edged stripes of the same hues. Under reduced motion the card keeps still and the light still finds the foil. The form owns every word the card repeats, so the card is hidden from assistive technology.
+The sign-up page draws the account being made as the company's card: one object of the ID-1 proportion, dark by nature in every theme, carrying on its top line the wordmark and, once Sofia has found it on the company's site, the company's own logo after a hairline, stamped in `{colors.identity-white}` as one ink (a company with no logo found has the wordmark alone); below, the holder's name and the company's domain. No Agent stands on it, and nothing sits in the engraving: a guilloché engraving in `{colors.identity-white}` at 10%. Beside a wide form it fills in as the form is typed and answers the pointer; on a phone the form keeps the screen, and the card appears once it is issued. It is the one object besides an Agent that moves on its own, once: when it first appears, and again when the account is asked for and it is issued, it turns in the light in 2.2 s, leaning one way and back while the light crosses it from corner to corner, so a person sees it is a card that answers the hand, and then it is still. The foil wakes as the pointer comes within one card width and eases toward it; a pointer that near ends the turn, and a pointer anywhere else on the page moves nothing. The account's Profile shows the person the same card, and the Partner invitation panel opens with its card, the Partner edition, on the identity plane, as the invitation it shares. Arriving through a Partner's referral link, the sign-up plane stands the Partner's card behind the one being made, leaning back, so the person's own card stays in front and whole; the Partner's email invitation dialog shows the card the invited company will be issued. Where the browser has WebGPU, its foil is vgpu's holographic card shader: matte graphite (`{colors.dark-material-floating}`) whose etched contours diffract the pointer's light, turning toward it by at most 9°. The diffraction and its pearlescent wash fall in pure bands of the identity hues, never a colour between two of them: a company's card takes the cool half, cobalto, azzurro and verde, and a Partner's the warm half, giallo, arancio and rosso. Without WebGPU the engraving catches the light as flat, hard-edged stripes of the same hues. Under reduced motion the card keeps still and the light still finds the foil. The form owns every word the card repeats, so the card is hidden from assistive technology.
 
 ### Identity marks
 
-A recognised app, platform or model maker is drawn with its genuine mark beside its readable name, in a tile that owns the box; an unknown one keeps its name and a text monogram, never a guessed logo. Where a mark names a row, the tile is 28 px for an app or a channel, in a collection's 48 px row, and 24 px for a model's maker, in a model list, a routing table or a setting, and on the website's lists of apps and makers; a mark grows only where it stands for the object itself, as on its card or at the head of its page, and there every surface of that object draws it at one size. A mark identifies and never replaces the label, and its colour identifies the maker, never a connection's health. Marks are used nominatively, to name a platform, an integration or a provider, never next to wording that implies endorsement. A brand mark never stands in for a UI icon, and a UI icon never stands in for a brand. A Library skill is drawn with its line icon on a `card` tile with a hairline `border`, the tile an app mark sits in, and a plugin with its line icon on the `info-soft` tile (`CatalogTile`), at 40 px in a row and 64 px at the head of its page, so the tile's ground says which kind it is; the icon is one of the catalog's fixed set, never a brand mark, and an app keeps its brand mark. In a chart, a model is named by its label, and marks stay out of legends.
+A recognised app, platform or model maker is drawn with its genuine mark beside its readable name, in a tile that owns the box; an unknown one keeps its name and a text monogram, never a guessed logo. Where a mark names a row, the tile is 28 px for an app or a channel, in a collection's 48 px row, and 24 px for a model's maker, in a model list, a routing table or a setting, and on the website's lists of apps and makers; a mark grows only where it stands for the object itself, as on its card or at the head of its page, and there every surface of that object draws it at one size. A mark identifies and never replaces the label, and its colour identifies the maker, never a connection's health. Marks are used nominatively, to name a platform, an integration or a provider, never next to wording that implies endorsement. A brand mark never stands in for a UI icon, and a UI icon never stands in for a brand. A Library skill uses the purple `CatalogTile` tone and a plugin uses its blue `info` tone, each with the catalog's line icon, at 40 px in a row and 64 px at the head of its page, so the tile's ground says which kind it is; the icon is one of the catalog's fixed set, never a brand mark, and an app keeps its brand mark. In a chart, a model is named by its label, and marks stay out of legends.
 
 ### Product views
 
@@ -579,7 +881,7 @@ These four ship as framework-neutral CSS; `@nadicodeai/ui` wraps the last three
 
 ## Iconography
 
-Every product draws Lucide's shapes, unedited, in the house render: a 1.5 px line (`{spacing.icon-stroke}`) measured on screen at every size and 1.25 px (`{spacing.icon-stroke-sm}`) at 12 px, round caps and joins, no fill, and the text colour. Sizes are 12, 16, 20 and 24 px, 16 by default, and inside a stock component the registry's own icon size stands; persistent navigation uses 20 so its entries read before the content beside them, and a collapsed rail keeps 16. A surface draws a small, disciplined set, never the whole library.
+Every product draws Lucide's shapes, unedited, in the house render: a 1.5 px line (`{spacing.icon-stroke}`) measured on screen at every size and 1.25 px (`{spacing.icon-stroke-sm}`) at 12 px, round caps and joins, no fill, and the text colour by default. Semantic icons may use their status or category tone with an adjacent readable label; navigation icons stay neutral. Sizes are 12, 16, 20 and 24 px, 16 by default, and inside a stock component the registry's own icon size stands; persistent navigation uses 20 so its entries read before the content beside them, and a collapsed rail keeps 16. A surface draws a small, disciplined set, never the whole library.
 
 Three icons are the house's own, drawn on Lucide's grid in the same render: `arch` for the company and its doors, `approvals`, the arch with a check, for work waiting on a person, and `agent`, the orb seen face-on with the Agent as the dot on its path. They name those three things wherever an icon does, and no Lucide glyph stands in for them. An icon beside text is decorative; an icon-only control carries an accessible name.
 
@@ -637,70 +939,953 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
   "core": {
     "material": {
       "$type": "number",
-      "scrim-opacity": {"$value":0.5},
-      "glass-opacity": {"$value":0.6},
-      "glass-saturation": {"$value":1.8},
-      "glass-blur": {"$type":"dimension","$value":{"value":20,"unit":"px"}}
+      "scrim-opacity": {
+        "$value": 0.5
+      },
+      "glass-opacity": {
+        "$value": 0.6
+      },
+      "glass-saturation": {
+        "$value": 1.8
+      },
+      "glass-blur": {
+        "$type": "dimension",
+        "$value": {
+          "value": 20,
+          "unit": "px"
+        }
+      },
+      "glass-highlight": {
+        "$type": "shadow",
+        "$value": {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 1,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 0,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              1,
+              1,
+              1
+            ],
+            "alpha": 0.18
+          },
+          "inset": true
+        }
+      }
     },
     "elevation": {
       "$type": "shadow",
       "light": {
         "resting": {
           "$value": [
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":2,"unit":"px"},"blur":{"value":2,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.04}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.08}}
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.08
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 2,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 2,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.04
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  1,
+                  1,
+                  1
+                ],
+                "alpha": 1
+              }
+            }
           ]
         },
         "raised": {
           "$value": [
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":2,"unit":"px"},"blur":{"value":2,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.04}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":8,"unit":"px"},"blur":{"value":8,"unit":"px"},"spread":{"value":-8,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.04}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.08}}
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.08
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 2,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 2,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.04
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 8,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 8,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -8,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.04
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  1,
+                  1,
+                  1
+                ],
+                "alpha": 1
+              }
+            }
           ]
         },
         "floating": {
           "$value": [
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1,"unit":"px"},"blur":{"value":1,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.02}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":4,"unit":"px"},"blur":{"value":8,"unit":"px"},"spread":{"value":-4,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.04}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":16,"unit":"px"},"blur":{"value":24,"unit":"px"},"spread":{"value":-8,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.06}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.08}}
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.08
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 1,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 1,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.02
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 4,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 8,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -4,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.04
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 16,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 24,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -8,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.06
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  1,
+                  1,
+                  1
+                ],
+                "alpha": 1
+              }
+            }
           ]
         },
         "modal": {
           "$value": [
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1,"unit":"px"},"blur":{"value":1,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.02}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":8,"unit":"px"},"blur":{"value":16,"unit":"px"},"spread":{"value":-4,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.04}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":24,"unit":"px"},"blur":{"value":32,"unit":"px"},"spread":{"value":-8,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.06}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.08}}
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.08
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 1,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 1,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.02
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 8,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 16,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -4,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.04
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 24,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 32,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -8,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.06
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  1,
+                  1,
+                  1
+                ],
+                "alpha": 1
+              }
+            }
           ]
         }
       },
       "dark": {
         "resting": {
           "$value": [
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1,"unit":"px"},"blur":{"value":2,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.16}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.145}}
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  1,
+                  1,
+                  1
+                ],
+                "alpha": 0.145
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 1,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 2,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.16
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 1
+              }
+            }
           ]
         },
         "raised": {
           "$value": [
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":2,"unit":"px"},"blur":{"value":2,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.2}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":8,"unit":"px"},"blur":{"value":8,"unit":"px"},"spread":{"value":-8,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.3}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.145}}
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  1,
+                  1,
+                  1
+                ],
+                "alpha": 0.145
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 2,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 2,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.2
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 8,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 8,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -8,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.3
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 1
+              }
+            }
           ]
         },
         "floating": {
           "$value": [
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":4,"unit":"px"},"blur":{"value":8,"unit":"px"},"spread":{"value":-4,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.4}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":16,"unit":"px"},"blur":{"value":24,"unit":"px"},"spread":{"value":-8,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.5}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.145}}
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  1,
+                  1,
+                  1
+                ],
+                "alpha": 0.145
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 4,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 8,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -4,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.4
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 16,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 24,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -8,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.5
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 1
+              }
+            }
           ]
         },
         "modal": {
           "$value": [
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":8,"unit":"px"},"blur":{"value":16,"unit":"px"},"spread":{"value":-4,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.4}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":24,"unit":"px"},"blur":{"value":32,"unit":"px"},"spread":{"value":-8,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.55}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.145}}
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  1,
+                  1,
+                  1
+                ],
+                "alpha": 0.145
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 8,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 16,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -4,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.4
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 24,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 32,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -8,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.55
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 1
+              }
+            }
           ]
         }
       }
@@ -708,154 +1893,517 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
     "motion": {
       "duration": {
         "$type": "duration",
-        "control": {"$value":{"value":100,"unit":"ms"}},
-        "close": {"$value":{"value":140,"unit":"ms"}},
-        "confirm": {"$value":{"value":180,"unit":"ms"}},
-        "open": {"$value":{"value":220,"unit":"ms"}},
-        "msg-in": {"$value":{"value":240,"unit":"ms"}},
-        "transition": {"$value":{"value":240,"unit":"ms"}},
-        "drawer-swipe": {"$value":{"value":400,"unit":"ms"}},
-        "drawer": {"$value":{"value":450,"unit":"ms"}},
-        "wait": {"$value":{"value":1.6,"unit":"s"}}
+        "control": {
+          "$value": {
+            "value": 100,
+            "unit": "ms"
+          }
+        },
+        "close": {
+          "$value": {
+            "value": 140,
+            "unit": "ms"
+          }
+        },
+        "confirm": {
+          "$value": {
+            "value": 180,
+            "unit": "ms"
+          }
+        },
+        "open": {
+          "$value": {
+            "value": 220,
+            "unit": "ms"
+          }
+        },
+        "msg-in": {
+          "$value": {
+            "value": 240,
+            "unit": "ms"
+          }
+        },
+        "transition": {
+          "$value": {
+            "value": 240,
+            "unit": "ms"
+          }
+        },
+        "drawer-swipe": {
+          "$value": {
+            "value": 400,
+            "unit": "ms"
+          }
+        },
+        "drawer": {
+          "$value": {
+            "value": 450,
+            "unit": "ms"
+          }
+        },
+        "wait": {
+          "$value": {
+            "value": 1.6,
+            "unit": "s"
+          }
+        }
       },
       "ease": {
         "$type": "cubicBezier",
-        "emphasized": {"$value":[0.3,0.7,0.2,1]},
-        "out-strong": {"$value":[0.23,1,0.32,1]},
-        "in-out-strong": {"$value":[0.77,0,0.175,1]},
-        "drawer": {"$value":[0.32,0.72,0,1]}
+        "emphasized": {
+          "$value": [
+            0.3,
+            0.7,
+            0.2,
+            1
+          ]
+        },
+        "out-strong": {
+          "$value": [
+            0.23,
+            1,
+            0.32,
+            1
+          ]
+        },
+        "in-out-strong": {
+          "$value": [
+            0.77,
+            0,
+            0.175,
+            1
+          ]
+        },
+        "drawer": {
+          "$value": [
+            0.32,
+            0.72,
+            0,
+            1
+          ]
+        }
       }
     }
   },
   "semantic": {
-    "radius": {"$type":"dimension","$value":"{core.rounded.md}"},
+    "radius": {
+      "$type": "dimension",
+      "$value": "{core.rounded.md}"
+    },
     "color": {
       "$type": "color",
       "light": {
-        "background": {"$value":"{core.color.canvas}"},
-        "foreground": {"$value":"{core.color.ink}"},
-        "card": {"$value":"{core.color.material-solid}"},
-        "card-foreground": {"$value":"{core.color.ink}"},
-        "popover": {"$value":"{core.color.material-solid}"},
-        "popover-foreground": {"$value":"{core.color.ink}"},
-        "primary": {"$value":"{core.color.action}"},
-        "primary-foreground": {"$value":"{core.color.action-foreground}"},
-        "primary-hover": {"$value":"{core.color.action-hover}"},
-        "primary-active": {"$value":"{core.color.action-active}"},
-        "secondary": {"$value":"{core.color.canvas-soft}"},
-        "secondary-foreground": {"$value":"{core.color.ink}"},
-        "muted": {"$value":"{core.color.canvas-soft}"},
-        "muted-foreground": {"$value":"{core.color.body}"},
-        "placeholder": {"$value":"{core.color.muted}"},
-        "accent": {"$value":"{core.color.canvas-soft-2}"},
-        "accent-foreground": {"$value":"{core.color.ink}"},
-        "destructive": {"$value":"{core.color.error}"},
-        "destructive-foreground": {"$value":"{core.color.identity-white}"},
-        "warning": {"$value":"{core.color.warning}"},
-        "warning-foreground": {"$value":"{core.color.ink}"},
-        "success": {"$value":"{core.color.success}"},
-        "success-foreground": {"$value":"{core.color.ink}"},
-        "info": {"$value":"{core.color.info}"},
-        "info-foreground": {"$value":"{core.color.identity-white}"},
-        "destructive-soft": {"$value":"{core.color.error-soft}"},
-        "destructive-soft-foreground": {"$value":"{core.color.error-deep}"},
-        "warning-soft": {"$value":"{core.color.warning-soft}"},
-        "warning-soft-foreground": {"$value":"{core.color.warning-deep}"},
-        "success-soft": {"$value":"{core.color.success-soft}"},
-        "success-soft-foreground": {"$value":"{core.color.success-deep}"},
-        "info-soft": {"$value":"{core.color.info-soft}"},
-        "info-soft-foreground": {"$value":"{core.color.info-deep}"},
-        "border": {"$value":"{core.color.line}"},
-        "input": {"$value":"{core.color.input}"},
-        "ring": {"$value":"{core.color.focus-ring}"},
-        "scrim": {"$value":"{core.color.scrim}"},
-        "chart-1": {"$value":"{core.color.chart-1}"},
-        "chart-2": {"$value":"{core.color.chart-2}"},
-        "chart-3": {"$value":"{core.color.chart-3}"},
-        "chart-4": {"$value":"{core.color.chart-4}"},
-        "chart-5": {"$value":"{core.color.chart-5}"},
-        "selection": {"$value":"{core.color.navigation-selection-bg}"},
-        "selection-foreground": {"$value":"{core.color.navigation-selection-fg}"},
-        "recessed": {"$value":"{core.color.canvas-soft}"},
-        "sidebar": {"$value":"{core.color.canvas-soft}"},
-        "sidebar-foreground": {"$value":"{core.color.ink}"},
-        "sidebar-primary": {"$value":"{core.color.navigation-selection-bg}"},
-        "sidebar-primary-foreground": {"$value":"{core.color.navigation-selection-fg}"},
-        "sidebar-primary-hover": {"$value":"{core.color.navigation-selection-hover}"},
-        "sidebar-accent": {"$value":"{core.color.canvas-soft-2}"},
-        "sidebar-accent-foreground": {"$value":"{core.color.ink}"},
-        "sidebar-border": {"$value":"{core.color.line}"},
-        "sidebar-ring": {"$value":"{core.color.focus-ring}"}
+        "background": {
+          "$value": "{core.color.canvas}"
+        },
+        "foreground": {
+          "$value": "{core.color.ink}"
+        },
+        "card": {
+          "$value": "{core.color.material-solid}"
+        },
+        "card-foreground": {
+          "$value": "{core.color.ink}"
+        },
+        "popover": {
+          "$value": "{core.color.material-solid}"
+        },
+        "popover-foreground": {
+          "$value": "{core.color.ink}"
+        },
+        "primary": {
+          "$value": "{core.color.action}"
+        },
+        "primary-foreground": {
+          "$value": "{core.color.action-foreground}"
+        },
+        "primary-hover": {
+          "$value": "{core.color.action-hover}"
+        },
+        "primary-active": {
+          "$value": "{core.color.action-active}"
+        },
+        "secondary": {
+          "$value": "{core.color.canvas-soft}"
+        },
+        "secondary-foreground": {
+          "$value": "{core.color.ink}"
+        },
+        "muted": {
+          "$value": "{core.color.canvas-soft}"
+        },
+        "muted-foreground": {
+          "$value": "{core.color.body}"
+        },
+        "placeholder": {
+          "$value": "{core.color.muted}"
+        },
+        "accent": {
+          "$value": "{core.color.canvas-soft-2}"
+        },
+        "accent-foreground": {
+          "$value": "{core.color.ink}"
+        },
+        "destructive": {
+          "$value": "{core.color.error}"
+        },
+        "destructive-foreground": {
+          "$value": "{core.color.identity-white}"
+        },
+        "warning": {
+          "$value": "{core.color.warning}"
+        },
+        "warning-foreground": {
+          "$value": "{core.color.ink}"
+        },
+        "success": {
+          "$value": "{core.color.success}"
+        },
+        "success-foreground": {
+          "$value": "{core.color.ink}"
+        },
+        "info": {
+          "$value": "{core.color.info}"
+        },
+        "info-foreground": {
+          "$value": "{core.color.identity-white}"
+        },
+        "destructive-soft": {
+          "$value": "{core.color.error-soft}"
+        },
+        "destructive-soft-foreground": {
+          "$value": "{core.color.error-deep}"
+        },
+        "warning-soft": {
+          "$value": "{core.color.warning-soft}"
+        },
+        "warning-soft-foreground": {
+          "$value": "{core.color.warning-deep}"
+        },
+        "success-soft": {
+          "$value": "{core.color.success-soft}"
+        },
+        "success-soft-foreground": {
+          "$value": "{core.color.success-deep}"
+        },
+        "info-soft": {
+          "$value": "{core.color.info-soft}"
+        },
+        "info-soft-foreground": {
+          "$value": "{core.color.info-deep}"
+        },
+        "border": {
+          "$value": "{core.color.line}"
+        },
+        "input": {
+          "$value": "{core.color.input}"
+        },
+        "ring": {
+          "$value": "{core.color.focus-ring}"
+        },
+        "scrim": {
+          "$value": "{core.color.scrim}"
+        },
+        "chart-1": {
+          "$value": "{core.color.chart-1}"
+        },
+        "chart-2": {
+          "$value": "{core.color.chart-2}"
+        },
+        "chart-3": {
+          "$value": "{core.color.chart-3}"
+        },
+        "chart-4": {
+          "$value": "{core.color.chart-4}"
+        },
+        "chart-5": {
+          "$value": "{core.color.chart-5}"
+        },
+        "selection": {
+          "$value": "{core.color.navigation-selection-bg}"
+        },
+        "selection-foreground": {
+          "$value": "{core.color.navigation-selection-fg}"
+        },
+        "recessed": {
+          "$value": "{core.color.canvas-soft}"
+        },
+        "sidebar": {
+          "$value": "{core.color.canvas-soft}"
+        },
+        "sidebar-foreground": {
+          "$value": "{core.color.ink}"
+        },
+        "sidebar-primary": {
+          "$value": "{core.color.navigation-selection-bg}"
+        },
+        "sidebar-primary-foreground": {
+          "$value": "{core.color.navigation-selection-fg}"
+        },
+        "sidebar-primary-hover": {
+          "$value": "{core.color.navigation-selection-hover}"
+        },
+        "sidebar-accent": {
+          "$value": "{core.color.canvas-soft-2}"
+        },
+        "sidebar-accent-foreground": {
+          "$value": "{core.color.ink}"
+        },
+        "sidebar-border": {
+          "$value": "{core.color.line}"
+        },
+        "sidebar-ring": {
+          "$value": "{core.color.focus-ring}"
+        },
+        "category-teal": {
+          "$value": "{core.color.category-teal-soft}"
+        },
+        "category-teal-foreground": {
+          "$value": "{core.color.category-teal-deep}"
+        },
+        "category-purple": {
+          "$value": "{core.color.category-purple-soft}"
+        },
+        "category-purple-foreground": {
+          "$value": "{core.color.category-purple-deep}"
+        },
+        "category-pink": {
+          "$value": "{core.color.category-pink-soft}"
+        },
+        "category-pink-foreground": {
+          "$value": "{core.color.category-pink-deep}"
+        }
       },
       "dark": {
-        "background": {"$value":"{core.color.dark-canvas}"},
-        "foreground": {"$value":"{core.color.dark-ink}"},
-        "card": {"$value":"{core.color.dark-material-solid}"},
-        "card-foreground": {"$value":"{core.color.dark-ink}"},
-        "popover": {"$value":"{core.color.dark-material-solid}"},
-        "popover-foreground": {"$value":"{core.color.dark-ink}"},
-        "primary": {"$value":"{core.color.dark-action}"},
-        "primary-foreground": {"$value":"{core.color.dark-action-foreground}"},
-        "primary-hover": {"$value":"{core.color.dark-action-hover}"},
-        "primary-active": {"$value":"{core.color.dark-action-active}"},
-        "secondary": {"$value":"{core.color.dark-canvas-soft}"},
-        "secondary-foreground": {"$value":"{core.color.dark-ink}"},
-        "muted": {"$value":"{core.color.dark-canvas-soft}"},
-        "muted-foreground": {"$value":"{core.color.dark-body}"},
-        "placeholder": {"$value":"{core.color.dark-muted}"},
-        "accent": {"$value":"{core.color.dark-canvas-soft-2}"},
-        "accent-foreground": {"$value":"{core.color.dark-ink}"},
-        "destructive": {"$value":"{core.color.dark-error}"},
-        "destructive-foreground": {"$value":"{core.color.dark-on-primary}"},
-        "warning": {"$value":"{core.color.dark-warning}"},
-        "warning-foreground": {"$value":"{core.color.dark-on-primary}"},
-        "success": {"$value":"{core.color.dark-success}"},
-        "success-foreground": {"$value":"{core.color.dark-on-primary}"},
-        "info": {"$value":"{core.color.dark-info}"},
-        "info-foreground": {"$value":"{core.color.dark-on-primary}"},
-        "destructive-soft": {"$value":"{core.color.dark-error-soft}"},
-        "destructive-soft-foreground": {"$value":"{core.color.dark-error-deep}"},
-        "warning-soft": {"$value":"{core.color.dark-warning-soft}"},
-        "warning-soft-foreground": {"$value":"{core.color.dark-warning-deep}"},
-        "success-soft": {"$value":"{core.color.dark-success-soft}"},
-        "success-soft-foreground": {"$value":"{core.color.dark-success-deep}"},
-        "info-soft": {"$value":"{core.color.dark-info-soft}"},
-        "info-soft-foreground": {"$value":"{core.color.dark-info-deep}"},
-        "border": {"$value":"{core.color.dark-line}"},
-        "input": {"$value":"{core.color.dark-input}"},
-        "ring": {"$value":"{core.color.dark-focus-ring}"},
-        "scrim": {"$value":"{core.color.dark-scrim}"},
-        "chart-1": {"$value":"{core.color.dark-chart-1}"},
-        "chart-2": {"$value":"{core.color.dark-chart-2}"},
-        "chart-3": {"$value":"{core.color.dark-chart-3}"},
-        "chart-4": {"$value":"{core.color.dark-chart-4}"},
-        "chart-5": {"$value":"{core.color.dark-chart-5}"},
-        "selection": {"$value":"{core.color.dark-navigation-selection-bg}"},
-        "selection-foreground": {"$value":"{core.color.dark-navigation-selection-fg}"},
-        "recessed": {"$value":"{core.color.dark-material-raised}"},
-        "sidebar": {"$value":"{core.color.dark-canvas}"},
-        "sidebar-foreground": {"$value":"{core.color.dark-ink}"},
-        "sidebar-primary": {"$value":"{core.color.dark-navigation-selection-bg}"},
-        "sidebar-primary-foreground": {"$value":"{core.color.dark-navigation-selection-fg}"},
-        "sidebar-primary-hover": {"$value":"{core.color.dark-navigation-selection-hover}"},
-        "sidebar-accent": {"$value":"{core.color.dark-canvas-soft-2}"},
-        "sidebar-accent-foreground": {"$value":"{core.color.dark-ink}"},
-        "sidebar-border": {"$value":"{core.color.dark-line}"},
-        "sidebar-ring": {"$value":"{core.color.dark-focus-ring}"}
+        "background": {
+          "$value": "{core.color.dark-canvas}"
+        },
+        "foreground": {
+          "$value": "{core.color.dark-ink}"
+        },
+        "card": {
+          "$value": "{core.color.dark-material-solid}"
+        },
+        "card-foreground": {
+          "$value": "{core.color.dark-ink}"
+        },
+        "popover": {
+          "$value": "{core.color.dark-material-solid}"
+        },
+        "popover-foreground": {
+          "$value": "{core.color.dark-ink}"
+        },
+        "primary": {
+          "$value": "{core.color.dark-action}"
+        },
+        "primary-foreground": {
+          "$value": "{core.color.dark-action-foreground}"
+        },
+        "primary-hover": {
+          "$value": "{core.color.dark-action-hover}"
+        },
+        "primary-active": {
+          "$value": "{core.color.dark-action-active}"
+        },
+        "secondary": {
+          "$value": "{core.color.dark-canvas-soft}"
+        },
+        "secondary-foreground": {
+          "$value": "{core.color.dark-ink}"
+        },
+        "muted": {
+          "$value": "{core.color.dark-canvas-soft}"
+        },
+        "muted-foreground": {
+          "$value": "{core.color.dark-body}"
+        },
+        "placeholder": {
+          "$value": "{core.color.dark-muted}"
+        },
+        "accent": {
+          "$value": "{core.color.dark-canvas-soft-2}"
+        },
+        "accent-foreground": {
+          "$value": "{core.color.dark-ink}"
+        },
+        "destructive": {
+          "$value": "{core.color.dark-error}"
+        },
+        "destructive-foreground": {
+          "$value": "{core.color.dark-on-primary}"
+        },
+        "warning": {
+          "$value": "{core.color.dark-warning}"
+        },
+        "warning-foreground": {
+          "$value": "{core.color.dark-on-primary}"
+        },
+        "success": {
+          "$value": "{core.color.dark-success}"
+        },
+        "success-foreground": {
+          "$value": "{core.color.dark-on-primary}"
+        },
+        "info": {
+          "$value": "{core.color.dark-info}"
+        },
+        "info-foreground": {
+          "$value": "{core.color.dark-on-primary}"
+        },
+        "destructive-soft": {
+          "$value": "{core.color.dark-error-soft}"
+        },
+        "destructive-soft-foreground": {
+          "$value": "{core.color.dark-error-deep}"
+        },
+        "warning-soft": {
+          "$value": "{core.color.dark-warning-soft}"
+        },
+        "warning-soft-foreground": {
+          "$value": "{core.color.dark-warning-deep}"
+        },
+        "success-soft": {
+          "$value": "{core.color.dark-success-soft}"
+        },
+        "success-soft-foreground": {
+          "$value": "{core.color.dark-success-deep}"
+        },
+        "info-soft": {
+          "$value": "{core.color.dark-info-soft}"
+        },
+        "info-soft-foreground": {
+          "$value": "{core.color.dark-info-deep}"
+        },
+        "border": {
+          "$value": "{core.color.dark-line}"
+        },
+        "input": {
+          "$value": "{core.color.dark-input}"
+        },
+        "ring": {
+          "$value": "{core.color.dark-focus-ring}"
+        },
+        "scrim": {
+          "$value": "{core.color.dark-scrim}"
+        },
+        "chart-1": {
+          "$value": "{core.color.dark-chart-1}"
+        },
+        "chart-2": {
+          "$value": "{core.color.dark-chart-2}"
+        },
+        "chart-3": {
+          "$value": "{core.color.dark-chart-3}"
+        },
+        "chart-4": {
+          "$value": "{core.color.dark-chart-4}"
+        },
+        "chart-5": {
+          "$value": "{core.color.dark-chart-5}"
+        },
+        "selection": {
+          "$value": "{core.color.dark-navigation-selection-bg}"
+        },
+        "selection-foreground": {
+          "$value": "{core.color.dark-navigation-selection-fg}"
+        },
+        "recessed": {
+          "$value": "{core.color.dark-canvas}"
+        },
+        "sidebar": {
+          "$value": "{core.color.dark-canvas}"
+        },
+        "sidebar-foreground": {
+          "$value": "{core.color.dark-ink}"
+        },
+        "sidebar-primary": {
+          "$value": "{core.color.dark-navigation-selection-bg}"
+        },
+        "sidebar-primary-foreground": {
+          "$value": "{core.color.dark-navigation-selection-fg}"
+        },
+        "sidebar-primary-hover": {
+          "$value": "{core.color.dark-navigation-selection-hover}"
+        },
+        "sidebar-accent": {
+          "$value": "{core.color.dark-canvas-soft-2}"
+        },
+        "sidebar-accent-foreground": {
+          "$value": "{core.color.dark-ink}"
+        },
+        "sidebar-border": {
+          "$value": "{core.color.dark-line}"
+        },
+        "sidebar-ring": {
+          "$value": "{core.color.dark-focus-ring}"
+        },
+        "category-teal": {
+          "$value": "{core.color.dark-category-teal-soft}"
+        },
+        "category-teal-foreground": {
+          "$value": "{core.color.dark-category-teal-deep}"
+        },
+        "category-purple": {
+          "$value": "{core.color.dark-category-purple-soft}"
+        },
+        "category-purple-foreground": {
+          "$value": "{core.color.dark-category-purple-deep}"
+        },
+        "category-pink": {
+          "$value": "{core.color.dark-category-pink-soft}"
+        },
+        "category-pink-foreground": {
+          "$value": "{core.color.dark-category-pink-deep}"
+        }
       }
     }
   },
   "register": {
     "website": {
-      "$extensions": {"ai.nadicode.targets":["css","data"]},
+      "$extensions": {
+        "ai.nadicode.targets": [
+          "css",
+          "data"
+        ]
+      },
       "layout": {
         "$type": "dimension",
-        "content-max": {"$value":{"value":1200,"unit":"px"}},
-        "gutter-mobile": {"$value":{"value":20,"unit":"px"}},
-        "gutter-tablet": {"$value":{"value":40,"unit":"px"}},
-        "gutter-desktop": {"$value":{"value":64,"unit":"px"}},
-        "section-step-mobile": {"$value":{"value":64,"unit":"px"}},
-        "section-step-desktop": {"$value":{"value":96,"unit":"px"}}
+        "content-max": {
+          "$value": {
+            "value": 1200,
+            "unit": "px"
+          }
+        },
+        "gutter-mobile": {
+          "$value": {
+            "value": 20,
+            "unit": "px"
+          }
+        },
+        "gutter-tablet": {
+          "$value": {
+            "value": 40,
+            "unit": "px"
+          }
+        },
+        "gutter-desktop": {
+          "$value": {
+            "value": 64,
+            "unit": "px"
+          }
+        },
+        "section-step-mobile": {
+          "$value": {
+            "value": 64,
+            "unit": "px"
+          }
+        },
+        "section-step-desktop": {
+          "$value": {
+            "value": 96,
+            "unit": "px"
+          }
+        }
       }
     }
   }