@nadicodeai/design-system 12.1.111 → 12.1.113

package/DESIGN.md

@@ -2,9 +2,11 @@
 version: alpha
 name: nadicode Design System
 description: >-
-  nadicode's design system and its only design authority: the tokens and the
-  rules every component, website section, and product screen in the website,
-  the Portal, the Nadia desktop app, and the Alveare desktop app builds on.
+  nadicode's design system and its design authority for tokens, visual
+  direction and the rules every component and page shares: every component,
+  website section, and product screen in the website, the Portal, the Nadia
+  desktop app, and the Alveare desktop app builds on it. A component's own
+  contract is the usage page in its source in @nadicodeai/ui.
 
 colors:
   action: "#111111"
@@ -522,7 +524,7 @@ spacing:
 
 ## Overview
 
-This file is nadicode's design system and its only design authority. The tokens above are the values; the sections below are the rules for applying them. Every component in `@nadicodeai/ui`, every website section, and every screen in the Portal, Nadia and Alveare builds on it. Another document may say how one product applies a rule, and links here for the rule; it never restates one. A rule that is missing here is added here first.
+This file is nadicode's design system and its design authority for tokens, visual direction and the rules every component and page shares; a component's own contract is the usage page in its source in `@nadicodeai/ui`. The tokens above are the values; the sections below are the rules for applying them. Every component in `@nadicodeai/ui`, every website section, and every screen in the Portal, Nadia and Alveare builds on it. Another document may say how one product applies a rule, and links here for the rule; it never restates one. A shared rule that is missing here is added here first; a rule of one component is added to its usage page.
 
 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:
 
@@ -614,7 +616,7 @@ Every chart and KPI card is a stock shadcn registry component owned by `@nadicod
 - A multi-series chart has a legend below the plot, left-aligned and wrapping: a round dot and the entity name, in series order.
 - A signed comparison keeps a visible zero line so losses and gains share one baseline, and colours each bar by its consequence: `success` where the value is favourable, `destructive` where it is not.
 - A chart is a named section: its card title is the heading that names the plot.
-- Every chart card has one header, the same on every page (`ChartCard`): its title and its period on the left ("Usage", "Per day · today is partial"), its controls, such as the metric switch, on the right, then the way to its owner as a small ghost link ending in a chevron, as OpenRouter's "Explore ›" ("Explore", or "Open in Analytics" when the owner is another page), which stays top right on a phone. The period's choice sits on the page's title row where the page has one. The footer holds the reading time on the left, "Read at 12:42", and at most a command on the reading on the right, such as Refresh. A daily axis labels every second day from the first, fewer in a half-width card, and the y axis five round ticks. A ranked list beside a chart is one line per entity (place, colour, name, share, figure), so it never stands taller than the chart; a category axis is as wide as its longest name up to 128 px, a longer name wrapping to a second line; a short window's activity calendar draws larger cells and shares its row with a sibling card, never a lone narrow card.
+- Every chart card has one header and footer, the same on every page: `ChartCard`, whose usage page holds them. The period's choice sits on the page's title row where the page has one. A daily axis labels every second day from the first, fewer in a half-width card. A ranked list beside a chart is one line per entity (place, colour, name, share, figure), so it never stands taller than the chart; a category axis is as wide as its longest name up to 128 px, a longer name wrapping to a second line; a short window's activity calendar draws larger cells and shares its row with a sibling card, never a lone narrow card.
 
 No pie, donut, radar or dual-axis chart, and no mark or logo inside a legend. The one ring is `Gauge`, a control for a single ratio out of 100 against a fixed maximum, not a chart.
 
@@ -634,8 +636,7 @@ A hue follows its entity, never its rank or position: one assignment per surface
 
 ### Meters, deltas and labels
 
-- **Meter**: the stock `Progress` in one tone, default, secondary, success, warning or critical, with an accessible name and the real value printed beside it; `stops` mark genuine stages, each named. Over its cap it is a full bar in the critical tone; the printed figure states the overage.
-- **Gauge**: a ring for one ratio out of 100 where the comparison is the point (a hit rate, an uptime), in one product-chosen tone from the same set, with an adjacent label that names the measure and carries the unit. Its figure is the bare number, never a percent sign. It has no indeterminate form: an unknown wait is the waiting line.
+- **Meter** and **Gauge**: `Progress` for consumption against a cap and `Gauge` for one ratio out of 100 where the comparison is the point; their usage pages hold their tones, stops, overage and figure. Neither has an indeterminate form: an unknown wait is the waiting line.
 - **Delta**: an outline Badge with a trend icon (`TrendingUp`, `TrendingDown`, `Minus`) and the signed value, followed by a muted "vs {period}". Direction crossed with whether up is good sets the tone; a neutral direction stays neutral. Never bare signed text, colour alone, or a ▲▼ glyph. A figure with no comparison shows no badge.
 - **Labels**: legend, axis and label text are ink roles and never wear the series colour. A single series is titled, not legended. Tooltips enhance a chart and never hold the only copy of a value; where a page needs the numbers as text, it shows a real table built from the same data.
 
@@ -735,7 +736,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 36 px control. Compact controls use 32 px and prominent controls 40 px; an embedded text button inside a field is 24 px (`InputGroupButton` `xs`); an embedded icon button fills the field's row and sits flush against its edge, except the combobox's open-list button, which is 30 px high and centred at the default size and fills the row at 32 and 40 px, as in Geist. A page header, a toolbar, a card's header and footer, a filter row and a collection row's actions take `{spacing.control-height}` with a `{typography.button}` label, and so does the three-dot trigger, wherever it stands; a button's `sm` and `xs` sizes are for a control nested inside dense content, such as a notice's or a banner's one action, a descriptive item's trailing controls, a composer or an input group, and never for chrome. A `SegmentedControl` has options 24, 28 or 32 px high (`{spacing.control-height-xs}`, 28 px, `{spacing.control-height-sm}`) inside a 4 px padded track, so the control itself is 32, 36 or 40 px high like every other control.
+Product chrome uses the 36 px control: a page header, a toolbar, a card's header and footer, a filter row, a collection row's actions and the three-dot trigger take `{spacing.control-height}` with a `{typography.button}` label. Compact controls use 32 px and prominent controls 40 px; a button's `sm` and `xs` sizes are for a control nested inside dense content, such as a notice's or a banner's one action, a descriptive item's trailing controls, a composer or an input group, and never for chrome. A control nested in a field, and `SegmentedControl`'s options, keep the same outer heights; their usage pages hold how.
 
 ### The website column
 
@@ -757,25 +758,14 @@ The Portal, Nadia and Alveare are product shells: persistent navigation on the l
 | Getting the app | Above the account | Downloads, an outlined row | The update card, only when there is one | The update card |
 | The page's actions | The page's title row | Secondary, primary, the three dots | The window header's trailing edge: the Agent's three dots, after the chat switcher | The channel header's trailing edge |
 
-- **The sidebar swaps, and is never joined by a second.** Inside an object, the same column shows a back link, what you are in (its identity mark at 24 px and its name) and its sections, and the top bar keeps the path (`SidebarSections`). No rail, second column or tab row of an object's sections appears beside it. In the Portal an Agent is the exception, because she is a deployment: the sidebar stays on the places, and her sections stand as the `TabsNav` band under the top bar, as Vercel draws a deployment's tabs, at most six (Overview, Scheduled tasks, Usage, Capabilities, Messaging, Settings); a tab that holds several sections opens on the first and shows them as line tabs at the top of its content. Her Overview is her `ObjectPage`: her facts, then rows of checks, each summed up by `CheckCounts` and closed by a `CheckState`.
+- **The sidebar swaps, and is never joined by a second.** Inside an object, the same column shows a back link, what you are in (its identity mark at 24 px and its name) and its sections, and the top bar keeps the path (`SidebarSections`). No rail, second column or tab row of an object's sections appears beside it. In the Portal an Agent is the exception, because she is a deployment: the sidebar stays on the places, and her sections stand as the `TabsNav` band under the top bar, as Vercel draws a deployment's tabs, at most six (Overview, Scheduled tasks, Usage, Capabilities, Messaging, Settings); a tab that holds several sections opens on the first and shows them as line tabs at the top of its content.
 - **An area whose pages are siblings opens as a sub-menu, as Vercel's sidebar does.** Vercel marks such a row with a › at its end ("Logs", "Observability", "Firewall", "Settings"), and its press replaces the places with one row, a ‹ at its start and the area's name centred, above the area's pages as words alone, the open one filled like a selected row; a row that only opens a page has no ›. In the Portal these areas are Settings (nadicode), Company (whoever manages a company) and Library (everyone who sees it: Agent templates, Skills, Plugins), each with its › row, and Account, opened from the account menu; their pages are never tabs (`SidebarSections` without an identity, its row ending in `SidebarMenuChevron`). “Tabs imply the views share scope, URL parent, and data model” (https://vercel.com/geist/tabs): Library's pages hold different objects with different lists and different ways to add, so they are a sub-menu, as Vercel's AI Gateway is. A destination whose pages are views of one reading, Analytics, keeps its tabs, as Vercel's Analytics and OpenRouter's Activity do. The ‹ returns to where the person opened the area from.
 - **The top bar holds only the path, never an action.** It names where the open page sits, ending at the place or the object, and never the page's own title; an object's own status sits beside its name in the path and nowhere else on the page. A top bar that only says where you are cannot be mistaken for a toolbar.
 - **Find goes to places.** It opens from the outlined field at the top of the sidebar and on ⌘K, and names every sidebar place, chat and settings page; it never runs a command. Its field names what it searches, never a bare "Search"; ⌘K or Ctrl+K opens it and no other field takes that binding; a shortcut on a row is a `CommandShortcut`; and a polite live region reads how many results remain as the person types.
 - **The account lives at the sidebar's foot.** `AccountMenu` names who is signed in and for whom, opens the account's settings from its gear, and holds Theme, Language and Sign out; the offer to get or update the app stands just above it.
 - **Navigation names stable destinations.** An object opened from search or a link still shows its parent in the path; a return link remembers a visit and never replaces the parent. A scope selector keeps the current section 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 shared chrome controls and centres the macOS window buttons; the Portal keeps its own top bar.
-
-**Nadia's window** sorts every thing by what it belongs to, in four scopes: the company (what every Agent here shares), one Agent (her work and her setup), one chat (what is happening now) and the person on this computer (how the app behaves). The company's pages of work, Wiki and Skills, sit in the list; what it sets once, its Memory, Mail and Alveare, sits in Settings beside this computer's settings.
-
-- **The list at rest** holds, top to bottom: Find; Scheduled tasks; the company's Wiki and Skills; the group "Agents", Nadia first, then by name ("Agent orbs"); then the update card and the account. Nothing else, and no chats under an Agent: her chats are in the switcher by her name.
-- **The company's pages**, Wiki and Skills, are rows under Scheduled tasks at the top of the list, each its own page with its own title and its actions on that title's row, never tabs under the company's name.
-- **Scheduled tasks** is a place: one page of every Agent's scheduled work, each row with its Agent's orb, its schedule and its last or next run, failures first, filtered by Agent, with New task on the title row; a task opens for editing in its row. The row carries a red count of the tasks that failed (`SidebarMenuBadge tone="attention"`), so the person sees a failure before looking for it.
-- **⋯ → Edit** stays as it is: it swaps the list to the Agent's Profile, Skills, Apps, MCP, Messaging, Plugins and Passwords. The chat switcher by her name stays as it is.
-- **Settings** is what is set once rather than worked in: how the app behaves on this computer (its language, look, notifications, services and updates) and the company's Memory, Mail and Alveare. It opens from the account menu's gear and swaps the list to a back link to the Agents and its sections, each its own page: General, Appearance, Notifications, and the company's Memory, Mail and Alveare, then Updates; the account menu holds the gear in its header, then Usage (only once billing has answered with its page), Theme, Language and Sign out, and never a second Settings row.
-- **The window header** is the Agent's title row: her orb and name, the chat switcher, then, on a chat, the side panel's toggle, and her three dots last (New chat, Edit, Open in Portal, Delete).
-- **The side panel is opened, never pushed.** On a chat, the header's toggle opens the window's right side on the panel the person last chose: the Browser, or Artifacts, the images, documents and links in the Agent's chats, as Hermes names them, newest first, one opening large in their place. Its 44 px band names the panel, then the switch between the two, then ×; while she browses behind Artifacts or with the panel closed, the toggle and the switch's Browser carry a dot, and nothing moves by itself. × or Esc closes it and gives focus back to the toggle, while a page she is browsing keeps loading behind. Opened, it takes 44% of the window, held between 28rem and 48rem, and yields first: by its drag edge it narrows to 352 px and widens only as far as leaves the Agents list and 360 px of chat; under 1024 px it lies over the chat at the same width, without a drag edge. It is not a `Sheet`: it never blocks the chat, takes focus or dims the page.
-- **The list narrows.** From 640 to 899 px it becomes a column of 48 px squares: Find, Scheduled tasks, Wiki and Skills, then the orbs, each named with its state line in a tooltip; under 640 px it leaves for a sheet the header's sidebar button opens.
+Nadia's window, its list, its Settings and its side panel are Nadia's register ([Nadia's design doctrine](../../apps/nadia/docs/design-doctrine.md#the-window)).
 
 **Alveare** keeps the same arrangement in Buzz's components: places in the sidebar, Inbox first; the channel header names the channel and holds only the channel's own controls; the update card and the package's `AccountMenu` stand at the sidebar's foot; the top band keeps only the sidebar toggle.
 
@@ -785,17 +775,19 @@ A product page is one of five page compositions, each answering one question fir
 
 | Composition | Owner | First answer | Structure |
 | --- | --- | --- | --- |
-| Overview | `OverviewPage` | What needs attention? | The period on the title row; the figures in one row of `KpiCard`s; the chart cards, each with its one header; then the exceptions that need a person, a `RecordList` with its heading, each row opening its owner. Never a stack of previews of every section. |
-| Collection | `CollectionPage` | Which record? | The title with the page's actions on its row and nothing under it; the page's sibling collections as line tabs, when it has them; one toolbar (search, filters, sort); then one line per record (`RecordList`, "Tables and missing values"). One row is one hover and one open target. The Portal's Agents are its exception, because an Agent is a deployment: they are Vercel's Deployments list, a `DataTable` with `rows="entities"` under the same title row and toolbar: no headings, one 72 px entity row per Agent (her orb at 32 and her name over her model, or over why she needs a look when she does; her status as a `StatusDot` and its word; her Customer as a `Tag`; her Installation in mono with its system's mark; when she last synced). Below the width those columns need, her status, her Customer, her Installation's name and that time stand in the one muted line under her name, so two Agents of one name on two machines stay told apart on a phone. A collection whose reader must also see what waits on them across all its records, as nadicode's Customers and Partners and a Partner's Customers do, takes a `rail`: under the toolbar, from 1280 px, a 300 px column of titled cards at the left of the records, as Vercel's Projects page stands Usage, Alerts and Recent Previews beside its projects; each card has its title above it at `{typography.heading-xs}`, an optional 44 px muted summary row whose one outline button stands at its end, never in a row of its own, then its items, 36 px for a figure (its title, its number at the trailing edge) and a 24 px mark over a title and a muted line that wraps to a second before it is cut, for a record, the item opening its record, or its `cleared` or `nothingYet` line, one 44 px row like an item (`EmptyState` `scope="line"`), never a tall empty tile. Beside a rail the records are Vercel's project rows (`RecordList` `layout="line"`), one line from a 448 px card: the 32 px mark and the name over its address, then the facts and the exception's status on one muted line joined by a middle dot ("5 of 5 Agents active · Partner Alpha"), left out first on a card under 576 px, then the time, the checklist ring and the three dots, which keep even a lone command; only on a phone do the facts and the time move under the name, as one muted line joined by middle dots in the same row, with no labels and no rule between them. Below 1280 px the records come first and the rail follows. The records' card takes no heading of its own: the page's title names it. |
-| Object | `ObjectPage` | What is this, what can I do? | The parent in the path and its sections in the sidebar; then the object card, as Vercel's Deployment Details: a header bar with its name and, at the end, one secondary action, then the three dots, never a primary; under it its identity mark at 64 px centred in a 300 px tile on the muted ground, and beside it one optional line saying what it is and its key facts in a grid of four columns (two on phones), each a muted label over its value; then, in a card of its own 12 px under it, the rows that open one by one, chevron first and summary at the end (`CheckCounts`, `CheckState`, whose pass is a blue check); then its sections, each a card only where it owns a decision. 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, read whole and never cut, 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. |
-| Settings | `SettingsPage` | What can I change? | The page's title row, then section cards across the content width 24 px apart, each with its title and one-line description (the card's only help) and a label above each control; a card of choices applies each as it is made, and a card of typed values has its own Save in its footer. | The danger zone closes the page: transfer, pause, delete.
-| Library | `LibraryShelf` for Agent templates; `CollectionPage` for Skills and Plugins | What reusable thing can I use? | Agent templates as Vercel's Templates gallery: the search, then `AgentCard`s three to a row. Skills and Plugins as an entity collection: the search and the category filter, then one row per entry (its picture or its kind's tile, its name over one line, who it is for and which Agents have it, Add, the three dots), staff's hub beside them as the collection's rail; detail shows content, requirements, source and revision, with Add as its filled primary. |
+| Overview | `OverviewPage` | What needs attention? | The period, the figures, the chart cards, then the exceptions that need a person. Never a stack of previews of every section. |
+| Collection | `CollectionPage` | Which record? | The title and the page's actions, the sibling collections as line tabs, one toolbar, then one line per record ("Tables and missing values"); one row is one hover and one open target. A collection whose reader must also see what waits on them across its records takes a `rail`. The Portal's Agents are its exception, a `DataTable` of entity rows, as Vercel's Deployments list. |
+| Object | `ObjectPage` | What is this, what can I do? | The parent in the path and its sections in the sidebar, then the object card, then its sections, each a card only where it owns a decision. An Agent's first section, Profile, opens with her `AgentProfileCard`, the same in every product. |
+| Settings | `SettingsPage` | What can I change? | Section cards, each saving its own fields; the danger zone closes the page. |
+| Library | `LibraryShelf` for Agent templates; `CollectionPage` for Skills and Plugins | What reusable thing can I use? | Agent templates as Vercel's Templates gallery; Skills and Plugins as an entity collection, with staff's hub as its rail. |
+
+Each composition's usage page holds its slots, geometry and states.
 
 The pages share the parts below them, each with one owner: one line per record is `RecordList`, which `CollectionPage`, an overview's exceptions and an object's "Needs attention" section draw; an absence is `EmptyState` ("Elevation & Depth"); an overlay is the owner its job names ("Menus and commands"); what happened is `ActivityFeed` ("Activity"); a record's mark is `IdentityMark` ("Identity marks").
 
-Every setting is that Settings 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"). In the Portal the settings cards take the content's width under the page's title row, as every other page does and as Vercel's settings cards fill their column; Nadia keeps its settings column at most 42rem. The sections stand 24 px apart. Inputs are bounded at 20rem under their labels, 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, and a matrix whose every column must stay, such as notification audiences by group, keeps them all and lets its names wrap instead.
+Every setting is that Settings 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 card's header and fields share one uninterrupted body, and only its save footer has a divider. `SettingsPage`'s, `SettingsSection`'s and `SettingsField`'s usage pages hold the column, the cards and the fields; Nadia keeps its settings column at most 42rem. A structured table keeps visible column names while its container can hold the data, and a matrix whose every column must stay, such as notification audiences by group, keeps them all and lets its names wrap.
 
-Collections and working pages open with the same header (`PageHeader`), which the product's chrome or the composition's `title` draws. Settings pages open directly with their section cards 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 ("Product shells"): 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: an overview's period first, then at most one `outline` secondary action, then the `default` primary action, then the three dots at the trailing edge. On a phone the title keeps one action on its row, as Vercel's does; the actions wrap under the title only when they would leave it less than 128 px. `PageActions` is their only owner: it takes a `period`, a `secondary`, a `primary` and a `menu`, and draws their order and variants. The menu is data, the record it acts on and its commands, drawn by `ActionMenu`, and a page's three dots open only for two commands or more; one command is a button. An action always sits on the title of the thing it acts on, never on a tab's. 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. 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`, with the page's actions on the title's row through `PageActions`, whose usage pages hold their order, variants and wrapping. Settings pages open directly with their section cards and keep a screen-reader h1 for the destination; an extra visible title would duplicate the navigation and delay the first setting. An action always sits on the title of the thing it acts on, never on a tab's, and one command is a button, never a menu of one. Navigation remains a visible link or part of the navigation, never an overflow command. Under the title sits at most the one muted line saying what the page's records are for; nothing introduces, explains or counts the page. 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, 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; its first use shows one, in every product ("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.
 
@@ -834,18 +826,9 @@ The owner approved the materials on 18 October 2026: Vercel's surfaces with a li
 
 **Product views on the website** preserve the real interface. Nadia uses captures of the running application, with the unchanged full-size image linked and capture provenance recorded in the repository, following the founder's 12 October correction of invented UI. Portal and Alveare may use inert scenes built from real components with fictional example data recorded in the repository. Never invent interface controls or frame a view in a device mockup. A product window takes the raised height on its ground; a card that overlaps it floats. Live components use dark mode in a black section; captures preserve the application's captured theme.
 
-Absence follows its container, and only a first use has a picture. In every product, the Portal included, a collection's first use shows its section's picture, and every other kind of absence goes without one. A picture sits on a working screen only there: never in a populated collection, a row or any other card; whole-page moments keep theirs ("Entry screens"). A page or region absence is a resting card with its own edge, never a dashed boundary; an absence inside a card is unframed, because the card already owns the edge, and `CollectionPage` puts every absence it draws in its card. `EmptyState` (`@nadicodeai/ui/components/empty-state`) is the only owner of an absence: nothing else draws one (`empty-state-owner`), its `scope` (`page`, `region` or `card`) sets that frame, and it has no presentation option, so every product draws each kind the same way. A composition takes its absences as props (`empty`, `noMatch`, `failed`), as a `DataTable` takes `empty`. Its kind determines the cause it names, the mark or picture and the recovery:
+Absence follows its container, and only a first use has a picture. In every product, the Portal included, a collection's first use shows its section's picture, and every other kind of absence goes without one. A picture sits on a working screen only there: never in a populated collection, a row or any other card; whole-page moments keep theirs ("Entry screens"). A page or region absence is a resting card with its own edge, never a dashed boundary; an absence inside a card is unframed, because the card already owns the edge, and `CollectionPage` puts every absence it draws in its card. `EmptyState` is the only owner of an absence: nothing else draws one (`empty-state-owner`), its `scope` (`page`, `region` or `card`) sets that frame, and it has no presentation option, so every product draws each kind the same way. A composition takes its absences as props (`empty`, `noMatch`, `failed`), as a `DataTable` takes `empty`. Its kind names the cause, and `EmptyState`'s usage page holds what each kind draws: `firstUse` (a collection with no records yet: its section's picture from the approved set in `@nadicodeai/design-system/assets/empty`, which [the art direction](../../skills/design/art-direction/references/surfaces.md#the-empty-state-set) keeps, and the one action that adds the first record, which the page's title row also keeps as its filled primary; a create action carries the leading +), `nothingYet`, `noResults`, `cleared`, `denied` and `failed`; a card-sized failure is `failed` with `scope="card"`, and there is no `ErrorCard`.
 
-- `firstUse`: a collection with no records yet, whoever the viewer is and however the collection fills. Its section's picture from the approved set in `@nadicodeai/design-system/assets/empty`, 240 × 176 on a page and 200 × 144 in a region or a card, which arrives once as it first renders ("Motion"); a title and one line saying what will live there; and, when this viewer can add the first record, the one action that adds it, as the filled primary button, beside an optional outline second path, as Vercel's Connect draws *Create Connector* beside *Browse Connectors* in its empty card; the page's title row keeps that same action as its filled primary whether the collection is empty or not. A create action carries the leading +. The set's pictures share one canvas, one ground line and one grammar, which [the art direction](../../skills/design/art-direction/references/surfaces.md#the-empty-state-set) keeps. One link to the product's documentation stands beside the action when the section has a page that explains it.
-- `nothingYet`: a list that is empty now and fills by itself. One line, no picture, nothing to press.
-- `noResults`: a search or filter that matches nothing. One line and Clear filters (or Clear search), no picture. A single typed query is quoted in curly quotes.
-- `cleared`: work that is finished. The success mark and one line.
-- `denied`: this viewer's role or plan does not open the page or region. The lock mark, a title (a heading), one line naming the feature and, when the plan gates it, the plan, and the one way out. One gated tile inside an open page is a `MessageNotice`, never a `denied`.
-- `failed`: a read that failed where content would be. The warning mark, the message's title and body, at most two controls with Retry first, and, for a failure on our side, its identifier in a collapsed disclosure, in monospace, with a copy button. A failure that fills a page moves focus to its first control. A card-sized failure is `failed` with `scope="card"`; there is no `ErrorCard`.
-
-The quiet lines (`nothingYet`, `noResults`, `cleared`) carry no live role of their own: the wrapper that stays mounted while rows and absence swap announces them, once.
-
-A persistent notice sits in the section it concerns, action feedback is a toast, and field validation stays with its field. A notice carries one action, a 32 px outline button, and at most a second one after it, such as Nadia's Ask Nadia after Try again, and has no close button: it stays until the state changes, and one note stands for one concept. A section notice is always the framed note, with or without its action; the page or the account gets a `NoticeBanner`, which carries its one fix as a command (never a ready-made button), reads at 16 px and draws its button as a pill. A toast leaves after 6 s, which is also the Undo window; a failure the person must handle is never a toast alone but a very short toast beside a persistent notice. A notice, a failed read, a confirmation's error and a toast each show a message its product's catalogue worded, never a sentence written where it shows: `MessageNotice` under the control whose write failed (`action`) or atop the section it concerns (`section`), `EmptyState` `failed`, `ConfirmDialog`'s error and the toast. Each wraps a long word, never truncates, closes its title with a full stop before a body that follows on the same line, and shows a body only when it says more than the title ([the decision](../../docs/adr/2026-10-08-every-message-a-customer-reads-is-a-code-its-products-catalogue-words.md)).
+A persistent notice sits in the section it concerns, action feedback is a toast, and field validation stays with its field. A notice has no close button: it stays until the state changes, and one note stands for one concept. A section notice is `MessageNotice`; the page or the account gets a `NoticeBanner`; a failure the person must handle is never a toast alone but a very short toast beside a persistent notice. A notice, a failed read, a confirmation's error and a toast each show a message its product's catalogue worded, never a sentence written where it shows ([the decision](../../docs/adr/2026-10-08-every-message-a-customer-reads-is-a-code-its-products-catalogue-words.md)). Each wraps a long word, never truncates, closes its title with a full stop before a body that follows on the same line, and shows a body only when it says more than the title; their usage pages hold how each draws it.
 
 Dialogs, sheets, drawers and the command palette sit over the scrim ("Colors"); popovers, selects and toasts float without one. Focus is not elevation: it is always the focus outline.
 
@@ -890,16 +873,16 @@ answer keeps its component, density, value format and action placement.
 
 | Information | Component and context |
 | --- | --- |
-| Records a person finds one of and acts on | `RecordList`, inside `CollectionPage` on a page of its own: one line per record that names itself, a few facts, the exception, the time, the row's command and its menu. |
-| Records with the same comparable facts | `DataTable`: one identity per row, typed columns each with a `size` (one column takes the rest), visible headings, sortable headings when the headings sort, and a menu when secondary mutations exist. |
-| A descriptive item with supporting prose | `ItemGroup` and `Item`: identity, description and at most two trailing actions, rather than invented table columns. |
-| What happened, in order | `ActivityFeed`: one row per event under its day ("Activity"). |
-| The identity of a record in a collection | `RecordIdentity`: its name, one muted line and its `IdentityMark`; the containing list owns navigation. |
-| Facts about one object | `ObjectPage`'s facts, `ObjectFacts` or `SettingsFactsSection`: 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` with its `save` and `SettingsField`: the section owns its fields, its one-line help, recovery and local Save, with no help line under a field (a card of several fields gives a row that needs it an (i) with a tooltip), and compares its fields with what is saved. |
-| 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. |
+| Records a person finds one of and acts on | `RecordList` inside `CollectionPage`, on a page of its own. |
+| Records with the same comparable facts | `DataTable`. |
+| A descriptive item with supporting prose | `ItemGroup` and `Item`, rather than invented table columns. |
+| What happened, in order | `ActivityFeed` ("Activity"). |
+| The identity of a record in a collection | `RecordIdentity`; the containing list owns navigation. |
+| Facts about one object | `ObjectPage`'s facts, `ObjectFacts` or `SettingsFactsSection`, 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` with its `save` and `SettingsField`. |
+| A classification, lifecycle or operation | `Badge`, `StatusBadge` or `ActionStatus`. A missing value, an empty list and a failed read remain distinct. |
 | Another view or sibling collection of the current scope | `TabsNav` or line `Tabs` ("Controls"). A tab never introduces 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. |
+| A measurement over time or across objects | The KPI or chart composition for the reading ("Data Visualization"); a named comparison is a `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
@@ -917,7 +900,7 @@ Every component has a usage page, as Geist documents each of its own: what it is
 | Words | Which strings the product words, and how. |
 | Access | Its role, its name, its keyboard path and its focus. |
 
-The page is written in the component's own source, as the TSDoc of its main export (`@family`, `@when`, `@instead`, `@behaviour`, `@words`, `@access`), so an editor shows it on hover in every product; `@nadicodeai/ui`'s showcase renders every page, family by family, with the component drawn in its states. A component without its usage page, or a page without its specimen, fails the package's checks. A usage page applies the rules in this file and never restates one.
+The page is written in the component's own source, as the TSDoc of its main export (`@family`, `@when`, `@instead`, `@behaviour`, `@words`, `@access`), so an editor shows it on hover in every product; `@nadicodeai/ui`'s showcase renders every page, family by family, with the component drawn in its states. A component without its usage page, or a page without its specimen, fails the package's checks. A usage page holds its component's own rules, applies the shared rules in this file and never restates one.
 
 The table below maps all 73 entries in the [Geist component reference](https://vercel.com/geist/introduction) to our shared owners; how each owner is used is on its usage page. **Component** means a public owner exists for the job; it does not promise every Geist prop. **Composition** means existing parts provide the presentation together. 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`. A dedicated name in Geist does not require another primitive in our library; prefer existing compositions before adding another registry or dependency.
 
@@ -927,79 +910,79 @@ Every example and consuming surface covers its reachable populated, empty, loadi
 
 | Geist reference | Shared owner |
 | --- | --- |
-| [Address Input](https://vercel.com/geist/address-input) | Composition: `Field` parts in a `FieldGroup` 16 px apart: a `NativeSelect` country first, a street `Combobox` (or `Input` when there is no lookup), Address line 2 with (optional) written in its label, then pairs such as State and ZIP or Postal code and City two-up. A failed lookup always ends in the manual fields, never a dead end. No dedicated export: it needs a provider only a product has. |
-| [Avatar](https://vercel.com/geist/avatar) | Component: `Avatar` (16, 24, 32 and 48 px), `AvatarImage`, `AvatarFallback`, `AvatarGroup` (`members`, `limit`, `reverse`, `overlap`, one `label`; it draws its own `+N` count), `AvatarWithIcon` (name required, optional `label` for the state), `AvatarBadge` in `avatar.tsx`, and `avatarInitials`; a record's mark, a person's included, is `IdentityMark`, and an Agent is her `AgentOrb`. Not adopted: the loading `placeholder` (a still skeleton is ours), git-provider avatars and the username fetch. |
-| [Badge](https://vercel.com/geist/badge) | Component: `Badge` (`sm` 16, `md` 20, `lg` 24 px; one `icon`; `pill` as the link look through `render`); `StatusBadge` for state; `Tag` for a categorical fact. Kept ours: sentence case, and the tone mark on every `StatusBadge` so a status reads without colour. Choose a typed tone; the owner supplies label geometry. |
-| [Banner](https://vercel.com/geist/banner) | Component: `NoticeBanner`; no announcement strip. |
-| [Book](https://vercel.com/geist/book) | Optional composition: `Card` / `PictureLabel` + `AspectRatio` and cover artwork. No dedicated book-frame export. |
-| [Breadcrumbs](https://vercel.com/geist/breadcrumbs) | Component: `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink` (with `disabled` for an ancestor the person may not open), `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis`. The menu type (each crumb opens its siblings) is not built. |
-| [Browser](https://vercel.com/geist/browser) | Optional composition: `Card` + `AspectRatio` and decorative browser chrome. `DesktopShell` remains real product chrome. |
-| [Button](https://vercel.com/geist/button) | Component: `Button` with `loading`, `loadingLabel`, `prefix`, `suffix` and `shape`; `ButtonLink` for links drawn as buttons; `buttonVariants` for elements that are neither. Our appearance prop is `variant`, submission is `type`. No `CustomButton` and no `warning` look: colour is ours. |
-| [Calendar](https://vercel.com/geist/calendar) | Component: `Calendar` (month grid, `minValue`/`maxValue` for the data window); `DateRangeControl` for metric windows, one button that opens the presets as buttons beside the calendar. |
-| [Checkbox](https://vercel.com/geist/checkbox) | Component: `Checkbox` + `FieldSet`, `FieldLegend`, `FieldLabel`. A box is named by `aria-label`, `aria-labelledby` or the `id` of its `FieldLabel`; one with none does not compile. Mixed is an unfilled box with a grey dash. |
-| [Choicebox](https://vercel.com/geist/choicebox) | Component: `ChoiceboxGroup` with `ChoiceboxGroupItem`; `type` is `radio` or `checkbox`, each tile has a title, a required description, optional grey `specs` chips, one `badge` such as Recommended, a `disabledReason` and selected-only content. Tiles share one row and wrap to a column on a narrow screen. The selected tile is the one place blue sits on a choice: border, tint behind the row, words and corner mark; an unavailable tile stays grey. |
-| [Clearable Input](https://vercel.com/geist/clearable-input) | Component: `ClearableInput` (clear button once there is text, Escape empties and keeps focus, `onClear`, `label` and `error` as on `Input`, optional `shortcut` keys that become Esc); other fixed parts are `InputGroup` compositions. |
-| [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. |
-| [Code Block](https://vercel.com/geist/code-block) | `CodeBlock`: numbered lines that link to themselves, `highlightedLinesNumbers`, `addedLinesNumbers`, `removedLinesNumbers`, `hideLineNumbers` (marks still show and are announced), a `switcher` (select) or `tabs` for the language, a header only with a `filename`, `switcher` or `tabs`, and a `CopyButton` (32 px, not Geist's 28 px: CopyButton has no 28 px size). No syntax colour until a highlighter is adopted. Conversation `MarkdownText` keeps its job; `FileDiff` computes a before and after. |
-| [Collapse](https://vercel.com/geist/collapse) | Component: `Accordion` (`size` default, small, large; `multiple` for independent sections), `Collapsible`; complete `Disclosure`. Closed panels stay in the page, hidden until found, so find-in-page opens them; `hiddenUntilFound={false}` mounts a heavy panel only when open. A collapse never nests in another. |
-| [Combobox](https://vercel.com/geist/combobox) | Component: `Combobox`, input (sizes `sm`/default/`lg`, fills its container, leading search mark, named open-list and clear buttons)/content/list/item/group/label/empty/loading/chips parts. The list opens 8 px under the box at its width (a narrower width centres), in a 6 px inset, up to 210 px tall, rows 36 px with no gap and a 16 px check; the open-list and clear buttons are muted until hovered. |
-| [Command Menu](https://vercel.com/geist/command-menu) | Component: `CommandDialog` (title, description and `resultCount` required; it draws `Command` itself), `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandShortcut` (a `Kbd`). Find goes to places and runs no command, so there is no page stack. |
-| [Context Card](https://vercel.com/geist/context-card) | Component: `HoverCard`, `HoverCardTrigger`, `HoverCardContent` and `HoverCardSummary` (name, one identifying line, two to four label and value facts, at most one link that takes the product's router link through `render`). Opens above after 150 ms. |
-| [Context Menu](https://vercel.com/geist/context-menu) | Component: `ActionContextMenu`, the same `RecordMenu` as the row's `ActionMenu`, over the `ContextMenu` family. |
-| [Copy Button](https://vercel.com/geist/copy-button) | `CopyButton` owns Button + existing clipboard behavior, pending state and an announced result. `TextWithCopyButton` binds a shown value to it. |
-| [Description](https://vercel.com/geist/description) | Component: `ObjectPage`'s `facts`, `ObjectFacts` (a fact takes `tooltip`, `ellipsis` and `right`), `SettingsFactsSection`, `TableValue`. |
-| [Destructive Action Modal](https://vercel.com/geist/destructive-action-modal) | Component: `ConfirmDialog`, with `verify` for the typed-name gate and `irreversible` for the band. |
-| [Dots Menu](https://vercel.com/geist/dots-menu) | Component: `ActionMenu` for a record, `PageActions`' `menu` for a page. |
-| [Drawer](https://vercel.com/geist/drawer) | Component: `Drawer`, the bottom sheet for a short job on a phone, with `height` for the case where the default clips the action and `unsaved` to hold back a swipe, Escape or the back gesture while input is typed ([Menus and commands](#menus-and-commands)). `CatalogDrawer` and `FormDrawer` are Geist's Sheet in shape and are listed on the Sheet row. |
-| [Empty State](https://vercel.com/geist/empty-state) | Component: [EmptyState](../ui/src/components/empty-state.tsx) with the kinds `firstUse`, `nothingYet`, `noResults`, `cleared`, `denied` and `failed`, following the [absence contract](#elevation--depth). |
-| [Entity](https://vercel.com/geist/entity) | Component: `RecordList` for records (72 px entity rows, an optional `select` column); `Item`, `ItemGroup` and `ItemSelect` for a descriptive list; `CatalogEntry` in `LibraryShelf` and `CatalogDrawer`; `AgentListRow`. |
-| [Error](https://vercel.com/geist/error) | Component: `FieldError` (a field), `MessageNotice` (a control or section), `EmptyState kind="failed"` with its reference (a block). |
-| [Error Card](https://vercel.com/geist/error-card) | `EmptyState kind="failed" scope="card"`; no ErrorCard export. |
-| [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. |
-| [Fieldset](https://vercel.com/geist/fieldset) | Component: `SettingsSection` with `save`, `tone`, `lockedReason` and `unlock`; `SettingsField`; `FieldSet`/`FieldLegend` for semantic subgroups. Required: the title, the description and the footer's left line (`footerHint`, `save.hint` or `lockedReason`); only a card of title and line has no footer. Tone error or warning: a 1px border in the hue and a footer tinted in it with its line in the hue, the body and the buttons neutral. Its DisabledWall is `lockedReason`. |
-| [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. |
-| [Gauge](https://vercel.com/geist/gauge) | Component: `Gauge` in `gauge.tsx`, one ratio out of 100 on Base UI `Meter`, `xs`/`sm`/`md`/`lg` (16, 32, 64 and 128 px), the number or an icon in the centre, our `Progress` tones. Not adopted: `indeterminate` (the waiting line), the two-arc `equal` ratio and the `colors` map (the tone is the product's threshold). |
-| [Grid](https://vercel.com/geist/grid) | Composition: layout grid, `CardRow`, website `nc-page`; no ruled `Grid` API. |
-| [Input](https://vercel.com/geist/input) | Component: `Input` (sizes `sm` 32, default 36, `lg` 40; props `label` (with `id`), `error`, `prefix` and `suffix` as filled cells, `look="plain"` for marks on the box fill, `rounded` for a pill), `InputGroup` for a button inside the box, a block addon, a textarea toolbar or a read-only server-given value with its copy button, `SettingsField`/`Field` for the card around it. Geist's `prefixContainer` and `suffixContainer` are compositions of `InputGroup`. |
-| [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. |
-| [Keyboard Input](https://vercel.com/geist/keyboard-input) | Component: `Kbd`, which takes `meta`, `shift`, `alt` and `ctrl` flags, draws the person's platform (⌘ ⇧ ⌥ ⌃ on Apple systems, Ctrl Shift Alt elsewhere) and has two sizes, `default` (24 px) and `sm` (20 px) in a menu row, a command item or a table cell; `CommandShortcut` draws the same `Kbd`. There is no `KbdGroup`: several modifiers are one key. |
-| [Label](https://vercel.com/geist/label) | Component: `Label`, `FieldLabel`, `FieldLegend`, at regular weight. Geist's `value`, `withInput` and `bypassCasing` are not needed: the label is children, the `Field` spaces it 8 px above the box at 13 px regular, and casing is never transformed. `htmlFor` ties it to the control's id. |
-| [Load More Button](https://vercel.com/geist/load-more-button) | Component: `LoadMoreButton`, the full-width outline button under a list that grows in place; `ActivityFeed`'s `older` is one, or a `ButtonLink` when it navigates. It sits one `{spacing.md}` step below its list, and `noGap` removes the step for a list inside a card. |
-| [Loading Dots](https://vercel.com/geist/loading-dots) | Personalization: `Button`'s `loading` and `WaitingLine`; no LoadingDots. |
-| [Menu](https://vercel.com/geist/menu) | Component: `ActionMenu`, `ActionContextMenu`, `PageActions`' `menu` and `AccountMenu`, which draw their rows with `DropdownMenuCommand` (a command can be `disabled` with a reason, or `locked` with the reason it is locked); the `DropdownMenu` family directly only for a choice menu such as a sort, with `DropdownMenuLink` for a destination row. Every row, of any kind, is 36 px (44 on touch) with `{rounded.sm}` corners. |
-| [MiddleTruncate](https://vercel.com/geist/middle-truncate) | `MiddleTruncate`: a path, URL, ID, hash or branch cut in the middle with one ellipsis glyph, the last third (at most 16 characters) kept whole, the full value in the page and, while cut, on the clipboard. Prose still ends in an end ellipsis. |
-| [Modal](https://vercel.com/geist/modal) | Component: `Dialog` family (a bottom sheet on a phone), `FormDialog` for short forms with the `unsaved` guard, and `ConfirmDialog` for consequences. |
-| [Multi Select](https://vercel.com/geist/multi-select) | Component: `MultiSelect` (checkbox menu, count in the trigger; a row is a checkbox square plus a button holding the name, whose word is Select all on a chosen row while some rows are unchosen and Select only otherwise); `Combobox multiple` when typing to find matters more; `CollectionFilters` for query facets, where a suggested value waits as a dashed, muted chip led by a +, never looking like a filter in force. |
-| [Note](https://vercel.com/geist/note) | Component: `MessageNotice placement="section"` (the framed note, one action and at most a second after it); `Alert` is its primitive. No success, violet or cyan tone: our tones are neutral, info, warning and destructive. |
-| [Pagination](https://vercel.com/geist/pagination) | Not built until a page needs it: the pages of a table of records are `DataTable`'s own Previous and Next under its card, and `RecordList`'s footer paging. |
-| [Phone](https://vercel.com/geist/phone) | Optional composition: `AspectRatio` + decorative frame and captured content. No dedicated device-frame export. |
-| [Pill](https://vercel.com/geist/badge#pill) | `Badge variant="pill"` with `render={<a href=... />}` for a link-like badge; static category: `Tag`; filters: `CollectionFilters`; buttons keep their semantics. |
-| [Progress](https://vercel.com/geist/progress) | Component: `Progress` (tones, `stops`; the track is 4 px), `ProgressTrack`, `ProgressIndicator`, `ProgressLabel`, `ProgressValue`; `UsageMeter`. aria-valuenow follows the reading at most once a second. |
-| [Project Banner](https://vercel.com/geist/project-banner) | Component: `NoticeBanner` (label, icon, one action as a command, no close, one at a time). |
-| [Radio](https://vercel.com/geist/radio) | Component: `RadioGroup`, `RadioGroupItem` with FieldSet/legend. Rows are 24 px apart. The chosen radio keeps an empty circle with an ink edge and an 8 px ink dot; each option is named like a checkbox. |
-| [Relative Time Card](https://vercel.com/geist/relative-time-card) | Component: `RecordTime`: the time in its verb's sentence or the clock time, the exact moment in UTC and the local zone in its hover card (above, after 150 ms); `children` carries a state no time describes (Pending, Queued). The product's words stay: Intl relative words inside the phrase, not Geist's 2m / 5h short form. |
-| [Scroller](https://vercel.com/geist/scroller) | Component: `ScrollArea` (`overflow` y, x or both; an edge fade on each clipped edge; `buttonLabels` for two round buttons that scroll to the next direct child) and `ScrollBar`. `Carousel` stays a separate component until its fold into `ScrollArea` is done. |
-| [Search Input](https://vercel.com/geist/search-input) | Component: `CollectionSearch` in `CollectionToolbar`: search mark or custom `prefix`, clear button and Escape, `loading` (busy plus the waiting line after a second), optional `shortcut` keys that become Esc. |
-| [Select](https://vercel.com/geist/select) | Component: `Select` family and `NativeSelect` family, sizes `sm`/default/`lg`, optional `prefix` and `suffix` (a suffix takes the chevron's place); `label` and `error` as props on `SelectTrigger` and `NativeSelect`. A list of two or three static options is `RadioGroup`, as Geist says. |
-| [Separator](https://vercel.com/geist/separator) | Component: `Separator` (hidden from assistive technology by default; `inset` keeps 1 px clear at each end where a divider meets a frame painted over the content); `FieldSeparator` and menu/group separators for scoped roles. |
-| [Sheet](https://vercel.com/geist/sheet) | Component: `Sheet`, not modal by default (`modal` dims the page, `noOverlay` drops the scrim), with `RecordSheet` for one record looked at from a list, and `FormDrawer`/`CatalogDrawer` as its modal catalogue and steps forms. |
-| [Show more](https://vercel.com/geist/show-more) | Not built until a page needs it: a list that grows from the server takes `LoadMoreButton`. `Disclosure` and `Collapsible` stay for optional sections. |
-| [Skeleton](https://vercel.com/geist/skeleton) | Component: `Skeleton` (still; with a size it shows a bar until its content arrives, unsized it wraps a control and `show` covers it) and `SkeletonRegion` (the aria-busy region). Geist's shimmer and `animated` option are not taken. |
-| [Slider](https://vercel.com/geist/slider) | Component: `Slider` takes a label and the real `min`, `max` and `step`, draws its live value and, on request, start and end boxes (`Input` `sm`); values are arrays and a range has two thumbs named by the label and their position. The track is 8 px, the filled part is blue and turns grey when disabled, and the thumb is a 6 by 14 px bar that grows by a fifth while dragged or focused. |
-| [Snippet](https://vercel.com/geist/snippet) | `Snippet`: one command (or a few lines) after a prompt the component draws and never copies, with `CopyButton`, `placeholder` for the empty state, `copyText` for a highlighted element, `copied` and `onCopy`. No `dark`, `type` or `width`: colour and size are ours. Longer scripts are a `CodeBlock`. |
-| [Spinner](https://vercel.com/geist/spinner) | Personalization: `Button`'s `loading` and `WaitingLine`, no Spinner export. |
-| [Split Button](https://vercel.com/geist/split-button) | Not built until a page needs it. |
-| [Status Dot](https://vercel.com/geist/status-dot) | Component: [StatusDot](../ui/src/components/status-dot.tsx) and `StatusBadge`. Kept ours: the dot is still, has four generic tones and no deployment states; the word beside it is its name. |
-| [Switch](https://vercel.com/geist/switch) | Component: `SegmentedControl` for two or three exclusive views of one surface (radio semantics, option heights `sm` 24, `default` 28, `lg` 32 inside a 4 px inset, so the control is 32, 36 or 40 px high); `Tabs` for panels; `ToggleGroup` for pressed buttons that can be several or none; the theme stays `ThemeModeSwitcher`. |
-| [Table](https://vercel.com/geist/table) | Component: `Table` with `TableColgroup`/`TableCol` and a `TableBody` that takes `striped`, `bordered` and `interactive`; `DataTable` for records with sizes and sortable headings; `RecordList` for rows that name themselves; `TableCard` and `TableValue`. Virtualization remains a separate capability. |
-| [Tabs](https://vercel.com/geist/tabs) | Component: `Tabs`, `TabsList` (`variant` default or line), `TabsTrigger` (`disabledReason` with `disabled`), `TabsContent`; URL views use `TabsNav`/`TabsLink`. |
-| [Text With Copy Button](https://vercel.com/geist/text-with-copy-button) | `TextWithCopyButton`: the value in the mono label type plus `CopyButton` (32 px); `ellipsis` cuts it in the middle and the whole value still copies. The Portal uses it for identifiers and checksums. |
-| [Textarea](https://vercel.com/geist/textarea) | Component: `Textarea` (100 px minimum, grows with its content, `lg` for 16 px type, `label` with `id` and `error` as props) + Field/SettingsField. Its height is its content with a 100 px floor; `rows` is not a size. The save of `FormDialog`, `FormDrawer`, `RowEditForm` and `SettingsSection` trims its ends. |
-| [Theme Switcher](https://vercel.com/geist/theme-switcher) | Component: `ThemeModeSwitcher` (three named tiles with their icons, System, Light, Dark, the one order every theme choice keeps) on the settings page, `ThemeModeMenu` in the account menu, `ThemeModeSegments` in the corner of a page. |
-| [Toast](https://vercel.com/geist/toast) | Component: `Toaster` (6 s); `showMessageToast` from `@nadicodeai/ui/components/toast`. Gaps held in `toast.ts`: `preserve`, a literal Undo, a neutral tone. |
-| [Toggle](https://vercel.com/geist/toggle) | Component: our `Switch` for a boolean setting; a bare `Switch` is the 28 by 14 px track, on is blue and a disabled one is grey. It sits in a card's body with its state word, or at the end of a row of a multi-row card. Our `Toggle` is a pressed button. |
-| [Tooltip](https://vercel.com/geist/tooltip) | Component: `TooltipProvider`, `Tooltip`, `TooltipTrigger`, `TooltipContent`. Opens after 150 ms (`delay` on the trigger or provider; `delay={0}` for none); `arrow={false}` is Geist's `tip={false}` and `centerText={false}` its `center={false}`. Geist's coloured `type` is not provided. |
-| [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. |
+| [Address Input](https://vercel.com/geist/address-input) | `Field` parts in a `FieldGroup` 16 px apart: a `NativeSelect` country first, a street `Combobox` (or `Input` when there is no lookup), Address line 2 with (optional) written in its label, then pairs such as State and ZIP or Postal code and City two-up; a failed lookup ends in the manual fields. No dedicated export: it needs a provider only a product has |
+| [Avatar](https://vercel.com/geist/avatar) | The `Avatar` family; a record's mark is `IdentityMark`, and an Agent is her `AgentOrb` |
+| [Badge](https://vercel.com/geist/badge) | `Badge`; `StatusBadge` for state, `Tag` for a categorical fact |
+| [Banner](https://vercel.com/geist/banner) | `NoticeBanner` |
+| [Book](https://vercel.com/geist/book) | `Card` / `PictureLabel` + `AspectRatio` and cover artwork; no book-frame export |
+| [Breadcrumbs](https://vercel.com/geist/breadcrumbs) | The `Breadcrumb` family |
+| [Browser](https://vercel.com/geist/browser) | `Card` + `AspectRatio` and decorative browser chrome; `DesktopShell` stays real product chrome |
+| [Button](https://vercel.com/geist/button) | `Button`, `ButtonLink` and `buttonVariants` |
+| [Calendar](https://vercel.com/geist/calendar) | `Calendar`; `DateRangeControl` for a metric's window |
+| [Checkbox](https://vercel.com/geist/checkbox) | `Checkbox` with the Field parts |
+| [Choicebox](https://vercel.com/geist/choicebox) | `ChoiceboxGroup` |
+| [Clearable Input](https://vercel.com/geist/clearable-input) | `ClearableInput` |
+| [Code](https://vercel.com/geist/code) | Semantic `code` with the shared mono typography roles |
+| [Code Block](https://vercel.com/geist/code-block) | `CodeBlock` |
+| [Collapse](https://vercel.com/geist/collapse) | `Accordion`, `Collapsible` and the complete `Disclosure`; a collapse never nests in another |
+| [Combobox](https://vercel.com/geist/combobox) | `Combobox` |
+| [Command Menu](https://vercel.com/geist/command-menu) | `CommandDialog` |
+| [Context Card](https://vercel.com/geist/context-card) | `HoverCard` with `HoverCardSummary` |
+| [Context Menu](https://vercel.com/geist/context-menu) | `ActionContextMenu` |
+| [Copy Button](https://vercel.com/geist/copy-button) | `CopyButton`; `TextWithCopyButton` binds a shown value to it |
+| [Description](https://vercel.com/geist/description) | `ObjectPage`'s `facts`, `ObjectFacts`, `SettingsFactsSection`, `TableValue` |
+| [Destructive Action Modal](https://vercel.com/geist/destructive-action-modal) | `ConfirmDialog` |
+| [Dots Menu](https://vercel.com/geist/dots-menu) | `ActionMenu` for a record, `PageActions`' `menu` for a page |
+| [Drawer](https://vercel.com/geist/drawer) | `Drawer`, the phone's bottom sheet for a short job |
+| [Empty State](https://vercel.com/geist/empty-state) | `EmptyState`, following the [absence contract](#elevation--depth) |
+| [Entity](https://vercel.com/geist/entity) | `RecordList` for records; `Item`, `ItemGroup` and `ItemSelect` for a descriptive list; `CatalogEntry` in `LibraryShelf` and `CatalogDrawer`; `AgentListRow` |
+| [Error](https://vercel.com/geist/error) | `FieldError` (a field), `MessageNotice` (a control or section), `EmptyState kind="failed"` with its reference (a block) |
+| [Error Card](https://vercel.com/geist/error-card) | `EmptyState kind="failed" scope="card"`; no ErrorCard export |
+| [Feedback](https://vercel.com/geist/feedback) | `Popover`, `Field`, `Textarea`, `RadioGroup`, optional `Select`, and `Button` |
+| [Fieldset](https://vercel.com/geist/fieldset) | `SettingsSection` with `SettingsField`; `FieldSet` and `FieldLegend` for semantic subgroups |
+| [File Tree](https://vercel.com/geist/file-tree) | `SidebarMenu` + `Collapsible` + `FileTypeIcon` can follow sidebar-11 for nested files |
+| [Gauge](https://vercel.com/geist/gauge) | `Gauge` |
+| [Grid](https://vercel.com/geist/grid) | Layout grid, `CardRow`, website `nc-page`; no ruled `Grid` API |
+| [Input](https://vercel.com/geist/input) | `Input`; `InputGroup` for parts inside the box; `Field` or `SettingsField` for the card around it |
+| [JSON View](https://vercel.com/geist/json-view) | Composition for static JSON: code display with exact serialized text |
+| [Keyboard Input](https://vercel.com/geist/keyboard-input) | `Kbd` |
+| [Label](https://vercel.com/geist/label) | `Label`, `FieldLabel` and `FieldLegend` |
+| [Load More Button](https://vercel.com/geist/load-more-button) | `LoadMoreButton` |
+| [Loading Dots](https://vercel.com/geist/loading-dots) | `Button`'s `loading` and `WaitingLine`; no LoadingDots |
+| [Menu](https://vercel.com/geist/menu) | `ActionMenu`, `ActionContextMenu`, `PageActions`' `menu` and `AccountMenu`; the `DropdownMenu` family directly only for a choice menu such as a sort |
+| [MiddleTruncate](https://vercel.com/geist/middle-truncate) | `MiddleTruncate` |
+| [Modal](https://vercel.com/geist/modal) | The `Dialog` family, `FormDialog` for a short form and `ConfirmDialog` for a consequence |
+| [Multi Select](https://vercel.com/geist/multi-select) | `MultiSelect`; `Combobox multiple` when typing to find matters more; `CollectionFilters` for query facets |
+| [Note](https://vercel.com/geist/note) | `MessageNotice placement="section"` |
+| [Pagination](https://vercel.com/geist/pagination) | Not built until a page needs it: the pages of a table of records are `DataTable`'s own Previous and Next under its card, and `RecordList`'s footer paging |
+| [Phone](https://vercel.com/geist/phone) | `AspectRatio` + decorative frame and captured content; no device-frame export |
+| [Pill](https://vercel.com/geist/badge#pill) | `Badge` through `render` for a link-like badge; `Tag` for a static category; `CollectionFilters` for filters |
+| [Progress](https://vercel.com/geist/progress) | The `Progress` family; `UsageMeter` |
+| [Project Banner](https://vercel.com/geist/project-banner) | `NoticeBanner` |
+| [Radio](https://vercel.com/geist/radio) | `RadioGroup` |
+| [Relative Time Card](https://vercel.com/geist/relative-time-card) | `RecordTime` |
+| [Scroller](https://vercel.com/geist/scroller) | `ScrollArea` and `ScrollBar` |
+| [Search Input](https://vercel.com/geist/search-input) | `CollectionSearch` in `CollectionToolbar` |
+| [Select](https://vercel.com/geist/select) | The `Select` and `NativeSelect` families |
+| [Separator](https://vercel.com/geist/separator) | `Separator` |
+| [Sheet](https://vercel.com/geist/sheet) | `Sheet`; `RecordSheet` for one record looked at from a list; `FormDrawer` and `CatalogDrawer` for its steps and catalogue forms |
+| [Show more](https://vercel.com/geist/show-more) | Not built until a page needs it: a list that grows from the server takes `LoadMoreButton` |
+| [Skeleton](https://vercel.com/geist/skeleton) | `Skeleton` and `SkeletonRegion` |
+| [Slider](https://vercel.com/geist/slider) | `Slider` |
+| [Snippet](https://vercel.com/geist/snippet) | `Snippet` |
+| [Spinner](https://vercel.com/geist/spinner) | `Button`'s `loading` and `WaitingLine`, no Spinner export |
+| [Split Button](https://vercel.com/geist/split-button) | Not built until a page needs it |
+| [Status Dot](https://vercel.com/geist/status-dot) | `StatusDot` and `StatusBadge` |
+| [Switch](https://vercel.com/geist/switch) | `SegmentedControl` for two or three exclusive views of one surface; `Tabs` for panels; `ToggleGroup` for pressed buttons; `ThemeModeSwitcher` for the theme |
+| [Table](https://vercel.com/geist/table) | `Table`; `DataTable` for records; `RecordList` for rows that name themselves; `TableCard` and `TableValue` |
+| [Tabs](https://vercel.com/geist/tabs) | `Tabs`, and `TabsNav` with `TabsLink` for URL views |
+| [Text With Copy Button](https://vercel.com/geist/text-with-copy-button) | `TextWithCopyButton` |
+| [Textarea](https://vercel.com/geist/textarea) | `Textarea` with `Field` or `SettingsField` |
+| [Theme Switcher](https://vercel.com/geist/theme-switcher) | `ThemeModeSwitcher`, `ThemeModeMenu` and `ThemeModeSegments` |
+| [Toast](https://vercel.com/geist/toast) | `Toaster` and `showMessageToast` |
+| [Toggle](https://vercel.com/geist/toggle) | `Switch` for a boolean setting; our `Toggle` is a pressed button |
+| [Tooltip](https://vercel.com/geist/tooltip) | The `Tooltip` family |
+| [Video](https://vercel.com/geist/video) | `AspectRatio` + native video, controls, poster and caption tracks |
 
 ### Additional shared building blocks
 
@@ -1008,47 +991,40 @@ These shared components also follow the same foundations, although Geist does no
 | Owner | Use and composition contract |
 | --- | --- |
 | `Sidebar`, `SidebarSections`, `UpdateCard`, `AccountMenu`, `DesktopShell`; the Portal's `PortalShellFrame` | Persistent product navigation and workspace chrome ("Product shells"). The product owns destinations and active state; the shell owns compact behavior, landmarks and layout. `SidebarSections` is the sidebar's swap into an object's sections or an area's sub-menu, `UpdateCard` the offer to update above the account. Never add a competing sidebar to a page. |
-| `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. Which form surface a job takes is decided in [Menus and commands](#menus-and-commands). |
-| `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. |
-| Field parts and form adapters | Connect actual validation to controls, help and errors. Use the field owner that matches the product's form engine; preserve values through recoverable failure. Do not change the form engine during visual styling. |
-| `PairingCode` | A short code two screens show at once so a person can tell they are talking to each other, such as the four digits Nadia and Alveare Server both show while a Nadia asks to join. Each digit stands in its own cell at `{typography.heading-lg}` with tabular figures, large enough to compare from across a desk, and assistive technology reads the label, then the digits one by one. It only shows a code: a code a person types is `InputOTP`. |
-| `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. |
 
+`Popover`, `InputOTP`, `Carousel`, the resizable panels, `AspectRatio`, the Field parts, `PairingCode`, `QrCode` and `FileDiff` each hold their contract on their usage page. Which form surface a job takes is decided in [Menus and commands](#menus-and-commands).
+
 ### 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 |
-| --- | --- | --- |
-| Settings | `SettingsPage` → `SettingsSection` with its `save` → `SettingsField`. | The section's title and one line, its fields, what saving does (`save.action`), the product's toast for a save that went through (`save.saved`), the save's words and, where the card has something specific to say, its hint. The section owns the changed state, Save and a failure under its field. |
-| Read-only facts | `ObjectPage`'s `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. |
-| Entity collection | `CollectionPage` on `RecordList`: the title's actions, the line tabs, search, filters and sort, then rows that identify themselves (`RecordIdentity` with its `IdentityMark` and `detail`, a status only for the exception, `RecordTime`), the row's command or menu, an action's failure inside its row, the edit inside its row (`RowEditForm`), and its loading, empty and no-match states. | The records, what each one says, its commands as data, its catalogue message when an action fails, and the edit form. Never its own toolbar, table, rows or menus. |
-| A list inside another page | `RecordList` with its `heading`: an overview's exceptions, an object's "Needs attention". | The same as a collection's rows, and the heading's title. |
-| Comparable collection | `DataTable` within `TableCard`, under `PageActions` and `CollectionToolbar`. | Stable record IDs, columns, visible headings, search/filter/sort, URL state, row commands, pagination and `empty`. Numeric columns align at the trailing edge; the first and last columns stand in from the card's edges by the card's spacing, so the first lines up with the title; totals and paging use their own footer zone. On a phone the toolbar's search takes the first line and its filters and sort one scrolling line under it. |
-| Overview | `OverviewPage` with its `KpiCard` figures, its `ChartCard`s and its exceptions. | Measurement, unit, comparison period, truthful delta and stable categorical assignment; the reading time and the way to each figure's owner. Status colour and series colour retain different meanings. |
-| Object | `ObjectPage` with `ObjectSection`, `ObjectFacts`, a `RecordList` with its heading, a `SettingsSection` or an `ActivityFeed` as its sections. | The object, its mark, its facts, its one secondary action and its menu, and its sections. An Agent's Profile keeps `AgentProfileCard`. |
-| A reusable thing to add | `LibraryShelf` with `AgentCard`s for a gallery of templates; `CollectionPage` for a catalog a person finds, opens and adds from (the Portal's Skills and Plugins); `CatalogDrawer` with `CatalogEntry`s where the choice opens from a page. | The cards or the rows, one line each, the add and its state. |
-| What happened | `ActivityFeed`; one run's steps are `RunTimeline` ("Activity"). | The events, each with its time, actor, sentence, the exception and a detail line, grouped by day. |
-| Getting something set up | `NumberedSteps` for the steps on a page; `FormDrawer job="steps"` for a setup with a wait. | The steps, the current one where the sequence tracks real progress, and each step's own action. |
-| Short form: a new record, or one or two values from a command | `FormDialog` with Field parts; Portal binds it through `ActionDialogForm`. A record in a list edits inside its row (Entity collection); a catalog uses `CatalogDrawer` and a setup in steps `FormDrawer` ([Menus and commands](#menus-and-commands)). | 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. |
-| One record looked at from a list | `RecordSheet`. | The record's name, one line, its facts, an optional payload and the way to its owner. |
-| Destructive confirmation | `ConfirmDialog`; the app's confirm-action adapter. | A title naming the record as a statement, the real consequence, a confirm repeating the verb and the noun, pending state, failure and operation. `verify` asks for the record's name before the confirm enables, for a high-stakes action (delete, rotate, revoke, disconnect, downgrade, a protection switched off), even a reversible one; `irreversible` names what cannot be undone and is left out when the action can be reversed. A routine confirmation (discard a draft) takes neither. |
-| Global commands or record actions | `CommandDialog` for Find; `ActionMenu` and `ActionContextMenu` for one record; `PageActions` for a page. | Real commands as data, the record they act on, permissions, disabled reasons and keyboard shortcuts. The destructive command stays last. |
-| Absence or failed read | `EmptyState`, through the composition's `empty`, `noMatch` and `failed` or `DataTable.empty`; `MessageNotice` for persistent conditions. | First use with its section's picture, nothing yet, no matches, finished work, a denial or a failed read, with the real recovery action. Empty state belongs outside the semantic table body, inside the composition's persisting polite wrapper. |
-| Rich choices | `ChoiceboxGroup` with `ChoiceboxGroupItem`, in the group's own `FieldSet` and legend. | Known options (no more than six), selection model, labels, a description for every tile, disabled reasons. The whole tile selects, its corner always shows the dot or the check, a selected tile is blue (border, tint behind its row, words and corner mark) unless it is unavailable, and only the tile draws the focus ring; a tile's content is for reading, never a link or a button. |
-| Copyable identifier or command | `TextWithCopyButton` for a value, `Snippet` for a command; the prompt is the component's and is never copied. | Exact `value` or `text`, translated `copyLabel`, `copiedLabel`, `copyFailedLabel`. The shown text is the copied text; a long one takes `ellipsis`. |
-| Plain code or static JSON | `CodeBlock`. | Exact `code`, accessible `label`, `filename` only when the code has a place to be pasted into, copy labels. Serialize static JSON in the adapter; use FileDiff for a before/after comparison. |
-| A record's time | `RecordTime`: the time in its verb's sentence, or the clock time in a feed, with UTC and the local zone in its hover card. | The machine-readable timestamp, the phrase, the locale and the product's refresh policy. |
-| 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`, `TextWithCopyButton`, `Snippet` and `CodeBlock` for their complete compositions. Feedback and expandable file navigation combine existing parts with product adapters. Syntax colour 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.
+| Task | Shared composition |
+| --- | --- |
+| Settings | `SettingsPage` → `SettingsSection` with its `save` → `SettingsField`. |
+| Read-only facts | `ObjectPage`'s `facts`, `SettingsFactsSection` or `ObjectFacts`, with `TableValue` for missing facts. |
+| Entity collection | `CollectionPage` on `RecordList`, with `RowEditForm` for the edit inside a row. The page supplies its records and their commands as data, never its own toolbar, table, rows or menus. |
+| A list inside another page | `RecordList` with its `heading`: an overview's exceptions, an object's "Needs attention". |
+| Comparable collection | `DataTable` within `TableCard`, under `PageActions` and `CollectionToolbar`. |
+| Overview | `OverviewPage` with its `KpiCard` figures, its `ChartCard`s and its exceptions; the product supplies the reading time and the way to each figure's owner. |
+| Object | `ObjectPage` with `ObjectSection`, `ObjectFacts`, a `RecordList` with its heading, a `SettingsSection` or an `ActivityFeed` as its sections. |
+| A reusable thing to add | `LibraryShelf` with `AgentCard`s for a gallery of templates; `CollectionPage` for a catalog a person finds, opens and adds from (the Portal's Skills and Plugins); `CatalogDrawer` with `CatalogEntry`s where the choice opens from a page. |
+| What happened | `ActivityFeed`; one run's steps are `RunTimeline` ("Activity"). |
+| Getting something set up | `NumberedSteps` for the steps on a page; `FormDrawer job="steps"` for a setup with a wait. |
+| Short form: a new record, or one or two values from a command | `FormDialog` with Field parts; Portal binds it through `ActionDialogForm`. A record in a list edits inside its row (Entity collection); a catalog uses `CatalogDrawer` and a setup in steps `FormDrawer` ([Menus and commands](#menus-and-commands)). |
+| One record looked at from a list | `RecordSheet`. |
+| Destructive confirmation | `ConfirmDialog`; the app's confirm-action adapter. |
+| Global commands or record actions | `CommandDialog` for Find; `ActionMenu` and `ActionContextMenu` for one record; `PageActions` for a page. |
+| Absence or failed read | `EmptyState`, through the composition's `empty`, `noMatch` and `failed` or `DataTable.empty`; `MessageNotice` for persistent conditions. |
+| Rich choices | `ChoiceboxGroup` with `ChoiceboxGroupItem`, in the group's own `FieldSet` and legend. |
+| Copyable identifier or command | `TextWithCopyButton` for a value, `Snippet` for a command; the prompt is the component's and is never copied. |
+| Plain code or static JSON | `CodeBlock`. |
+| A record's time | `RecordTime`: the time in its verb's sentence, or the clock time in a feed, with UTC and the local zone in its hover card; the product supplies its refresh policy. |
+| Expandable file navigation | `SidebarMenu` and `Collapsible`, following shadcn sidebar-11, with file icons and real file links or commands. Keep the nested lists semantic; selection and roving arrow-key navigation, a full tree widget, need a separately verified keyboard contract. |
+| Feedback collection | `Popover` with Field, Textarea, optional RadioGroup/Select and Button; inline rendering uses the same form parts. The product supplies the prompt, the topic choices, the permitted context and the destination; no collection backend is implied. |
+| Native media playback | `AspectRatio` around a native video with its controls, poster and caption tracks. The product supplies the source, the captions, a transcript where needed, the playback policy and the recovery when the media is unavailable; a richer player needs a concrete media requirement. |
+
+Use `CopyButton`, `TextWithCopyButton`, `Snippet` and `CodeBlock` for their complete compositions. Feedback and expandable file navigation combine existing parts with product adapters. Syntax colour, full JSON or tree-widget navigation, and a JSON view's search highlighting and depth controls remain behaviour gaps: do not invent undocumented props or copy a local implementation into every caller.
 
 ### Personalization boundaries
 
@@ -1061,95 +1037,65 @@ The owner's decisions where Geist and ours differ:
 - A settings toggle, the theme included, is a draft that its section's Save applies, where Geist applies a toggle on change. The exception is a switch in a card's header: it applies at once, and that card has no Save, only its footer line.
 - Find goes to places only: it runs no command and has no page stack.
 - A wait stays still, with no spinner, loading dots or shimmer; a `Button` takes Geist's `loading` behaviour with its pending word in place of the spinner.
-- `Gauge` is a control for one ratio, never a chart.
 - `ChoiceboxGroup`, `ClearableInput`, `Snippet` and `LoadMoreButton` are components, never recipes a page assembles.
 - The three-dot trigger stays 36 px, ruled by the owner on 14 October 2026.
 
 ### Controls
 
-- **Buttons.** A button is 24, 32, 36 or 40 px high (`{spacing.control-height-xs}`, `{spacing.control-height-sm}`, `{spacing.control-height}`, `{spacing.control-height-lg}`) with `{rounded.sm}` corners, `{rounded.md}` at 40 px and `{rounded.xs-plus}` on the 24 px icon button. The label is `{typography.button}` at 32 and 36 px, `{typography.button-lg}` at 40 px and `{typography.button-xs}` at 24 px, and the inline padding is `{spacing.button-padding-inline-sm}` at 32 px, `{spacing.button-padding-inline}` at 36 px and `{spacing.button-padding-inline-lg}` at 40 px ("Layout" says where the smaller sizes may go). An icon leads or trails the label as the button's `prefix` or `suffix`; an icon-only button is named by its `aria-label`. A working button is `loading`: it says the label's -ing form in the label's place, ignores a second press, keeps focus and shows no spinner. A disabled filled button drops to the muted fill, the muted text and the hairline at full opacity; `ghost` and `link` dim instead. A link drawn as a button is a `ButtonLink`. `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.
+`Button`'s usage page holds its sizes, variants and loading; `textLinkVariants`' holds the link treatments; `Checkbox`'s and `RadioGroup`'s hold their checked marks.
+
 - **Dialog footers.** A dialog's Cancel sits at the footer's leading edge and its primary at the trailing edge; a dialog with one button fills the footer with it. A step back (Previous) is grouped with Cancel in one wrapper at the leading edge, so the footer keeps two ends. A choice to stop being asked is a checkbox at the end of the body, remembered by whichever action is taken, never a third button. On a phone the dialog and the confirmation are bottom sheets whose footer keeps its one row, Cancel leading and the primary trailing.
-- **Tabs** switch between sibling collections or views of one scope, such as a company's Members, Invitations and Teams, or Billing's Subscriptions, Approvals and Stripe events. One shows at a time; the choice lives in the URL, as a route or `?tab=` with the first tab left out, so it survives a reload, Back and a shared link; and switching never changes whose things you are looking at. A tab never introduces a new scope: another company or Agent is another place, reached from the sidebar or a scope selector, and a choice of whose things are listed is a filter in the toolbar. A tab title is a noun with no icon and no count; the count belongs to the list's footer. A page's collections take the line tabs (`Tabs` with `TabsList variant="line"`), under the title row and above the toolbar: the current tab in ink on a 2 px ink underline, the rest muted until hover. The page's actions stay on its title row whichever tab is shown, the toolbar belongs to the tab shown and switching clears its search and page, and two lists are never stacked with a tab row between them. A section's views take `TabsNav` and `TabsLink` in the band under the top bar, the current link on the selection fill, scrolling sideways on a phone and fading out over 32 px at each end where more links stand beyond it. A set of different things, such as Nadia's company sections, is pages in the sidebar, never tabs. A pill tab (`TabsList`, `TabsNav`) is 32 px high with 12 px sides, `{typography.label-sm}` at 400 and no gap between tabs. A line tab (`variant="line"`) is 50 px high with 2 px sides, `{typography.body-sm}` at 400, 24 px between tabs and a 1 px rule under a full-width row. A row of line tabs holds at most 7 tabs on a desktop and 4 on a phone; a `TabsNav` band, which scrolls sideways on a phone, holds at most 7 at every width, as an Agent's six views do. One tab is disabled only for a permission or an empty state and says why with `disabledReason`. Label the row with `aria-label` or `aria-labelledby` and keep keyboard navigation. 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** draw their edge as a 1 px ring outside the box in `{colors.input}`, darker on hover and full strength with a 4 px halo on focus, `{rounded.sm}` (`{rounded.md}` at 40 px; `rounded` makes a pill), in three heights that Input, Textarea, Select, NativeSelect, Combobox, MultiSelect and InputGroup share: `{spacing.control-height-sm}`, `{spacing.control-height}` and `{spacing.control-height-lg}`. Inline padding is `{spacing.control-padding-inline}`. A prefix or suffix is a filled cell with a divider, or `plain` on the box fill, with a 14 px mark; an icon button inside a field fills the row flush to its edge, is muted until hovered and never fills. Every field has a name: a visible label of 13 px in the secondary text colour, 8 px above the box, tied by id (or `aria-label` where the name is drawn elsewhere). Colour sits in one place: an error turns the ring red, fills the halo (also while the box has focus) and colours the 13 px message under it (8 px below, with an alert mark; 16 px beside a 40 px field), and a Combobox colours its typed text; the label, fill, text, placeholder and marks stay neutral. A disabled box, and the label of a disabled control, step down in fill and text, never in opacity, and ignore hover. A field fills its container. Help is the one-line description of the card that holds the field, one setting to a card, never a line under each field; the error takes its place while it shows. A field that may stay empty says so in its label, never in its placeholder. A field validates when it loses focus, stays focusable while it saves, and the save of a `FormDialog`, `FormDrawer`, `RowEditForm` or `SettingsSection` trims the ends of its text.
+- **Tabs** switch between sibling collections or views of one scope, such as a company's Members, Invitations and Teams, or Billing's Subscriptions, Approvals and Stripe events. One shows at a time; the choice lives in the URL, as a route or `?tab=` with the first tab left out, so it survives a reload, Back and a shared link; and switching never changes whose things you are looking at. A tab never introduces a new scope: another company or Agent is another place, reached from the sidebar or a scope selector, and a choice of whose things are listed is a filter in the toolbar. A page's collections take the line tabs (`Tabs` with `TabsList variant="line"`), under the title row and above the toolbar. The page's actions stay on its title row whichever tab is shown, the toolbar belongs to the tab shown and switching clears its search and page, and two lists are never stacked with a tab row between them. A set of different things, such as Nadia's company sections, is pages in the sidebar, never tabs. A choice that changes a value rather than a view uses radio or toggle semantics instead. `Tabs`' usage page holds the tabs' geometry and words.
+- **Fields.** Input, Textarea, Select, NativeSelect, Combobox, MultiSelect and InputGroup share one box in three heights, `Input`'s, and `Field`'s label and message: their usage pages hold the geometry, the states and the validation. Help is the one-line description of the card that holds the field, one setting to a card, never a line under each field; a field that may stay empty says so in its label, never in its placeholder.
 - **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, and greys on hover unless disabled. A checked checkbox fills with the action pair; a checked radio stays an empty circle with an ink edge and an 8 px ink dot; a mixed checkbox stays unfilled with a grey dash.
+- 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, and greys on hover unless disabled.
 
 ### 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. Its one header action, a single button, badge or three dots, stays at the title's right at every width, as Vercel keeps a card's Add on its title row on a phone; only an action of several controls moves under the description in a header narrower than 28rem. A card's or a section's title carries no icon, unless the card stands for one external system, whose mark it then carries. 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 the shape follows the data, and when it saves follows whether a half-done edit makes sense. A reversible choice (a switch, a theme, a language, a pick from a short list) applies at once, with no Save, and the product's toast confirms it; a change that fails says so in the toast and the control shows the stored value again. A typed value (a name, a URL, a server, a port, a key) gets its own card, which saves its fields through its own `save`, with its own Save in its footer: always visible and off until something in that card differs from what is saved; while saving, its pending word; a save that succeeds calls `save.saved`, and the product announces it through its own toast, a catalogue message: "Completion toasts follow `{Noun} {past-participle}`: `Blob deleted`, `Domain added`, `Environment variable saved`. Never include `successfully`; the action name implies it." (https://vercel.com/geist/toast), and Save returns to disabled with no saved state in the footer; a failure keeps every value and shows under the field it is about. A collection is a table whose Add opens a form and whose every row carries **⋯**, and a destructive action there confirms first. A status is a read-only card with the one action that fixes it. A section that reports a condition of its own (a failed payment, a trial ending) takes `tone="error"` or `tone="warning"`: a 1px border in the hue and a footer tinted in it with its line in the hue, while the title, description, fields and buttons stay neutral, and says the condition in words in the footer line. A button takes the hue of its command, not of the card: red for a permanent loss (Delete), amber for a disruptive command that can be undone (Pause, Archive). A section the person may not change takes `lockedReason`: its fields stay in view, their text muted and out of reach under a not-allowed cursor, the title and description unchanged; the footer line says why, and `unlock` is the way to get access when there is one; a locked section has no Save or header action. An object's section that edits in place swaps to the same section with Cancel before Save. 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, only where it says something specific to that card (a limit such as "Please use 32 characters at maximum.", what a value is for, the plan a feature needs or a link to learn more) and never one sentence every card repeats, 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; its label is words alone, with no icon. A figure that carries its own values over the period, as on Analytics' Activity, reads as Vercel Observability's overview tile: the label across the tile, the value with the change badge at its right, a thin line across the tile's width under them, and the comparison under the line on up to two lines that every tile of the row reserves, with no footer, so nothing in a row of five is cut. A row of five figures sits in one row from 1280 px, three over two below that, two by two with the fifth across on a tablet, and one column on a phone; it never leaves one figure alone beside a hole.
+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 card's or a section's title carries no icon, unless the card stands for one external system, whose mark it then carries. On a settings page the shape follows the data, and when it saves follows whether a half-done edit makes sense. A reversible choice (a switch, a theme, a language, a pick from a short list) applies at once, with no Save, and the product's toast confirms it; a change that fails says so in the toast and the control shows the stored value again. A collection is a table whose Add opens a form and whose every row carries **⋯**, and a destructive action there confirms first. A status is a read-only card with the one action that fixes it. A row of five figures sits in one row from 1280 px, three over two below that, two by two with the fifth across on a tablet, and one column on a phone; it never leaves one figure alone beside a hole.
+
+`Card`, `CardRow`, `SettingsSection`, `SettingsFactsSection` and `KpiCard` hold their own shapes on their usage pages.
 
 ### Menus and commands
 
-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 opens the record inside its row, as in Vercel Domains; Connect belongs beside an available connection. Additional mutations use an end-aligned `ActionMenu`, the same commands on a right-click through `ActionContextMenu`; a menu is not required when the row has no secondary mutations. Commands reach a person only through `PageActions` (a page), `ActionMenu` and `ActionContextMenu` (a record) and `AccountMenu` (the account), each taking its commands as data (`menu-owner`). The three-dot trigger is a `{spacing.control-height}` ghost icon button named for its record, "More for pec@acme.it", and comes last, after any button. A record's or a page's menu opens under its trigger at the floating height and draws, top to bottom: its first line naming the record it acts on, in muted type; the commands, each with its icon leading the label, as Geist and Vercel draw them; then, after a divider, the destructive command last, in the error colour. A command that cannot run now is disabled and stays in place with its reason under its label; a command the person may not run is locked: it stays in place, inert, with a lock at its end and the reason under its label, which is required. A menu holds about ten commands at most, and one level of submenu at most, never for a destructive command. A destructive command never becomes the loudest repeated action: it is never a button on every row. The lists of a Select, a Combobox and a MultiSelect share this geometry: a 12 px corner, a 6 px inset (8 px for MultiSelect), rows 36 px (28 px for MultiSelect) with no gap, opened 8 px from their trigger; they are solid, as every menu is ("Elevation & Depth"), and a row that cannot be chosen turns its text muted, never dimmed. Ruled by the owner on 14 October 2026. The account menu is the one exception, drawn as Vercel's below: its icons trail their labels and Sign out is in the body colour.
+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 opens the record inside its row, as in Vercel Domains; Connect belongs beside an available connection. Additional mutations use an end-aligned `ActionMenu`, the same commands on a right-click through `ActionContextMenu`; a menu is not required when the row has no secondary mutations. Commands reach a person only through `PageActions` (a page), `ActionMenu` and `ActionContextMenu` (a record) and `AccountMenu` (the account), each taking its commands as data (`menu-owner`). A menu names the record it acts on, keeps a command that cannot run in place with its reason, and puts the destructive command last after a divider; `ActionMenu`'s usage page holds how it draws them, and `AccountMenu`'s the account menu's one exception. A destructive command never becomes the loudest repeated action: it is never a button on every row.
 
 Choose the surface by where the thing being changed is shown and how big the job is, never by the page that happens to need it: the same job takes the same surface in every product. Adding a skill is the catalogue drawer in the Portal and in Nadia, and editing a task or an MCP server opens its row in both. Each surface has one owner:
 
 | The person wants to | Surface | Owner | Example |
 | --- | --- | --- | --- |
-| Change a record shown in a list | Its row opens into the form, with Cancel and Save in the form's footer, Save off until something changes; the other rows stay where they are | `RowEditForm` in `CollectionPage`'s `editor` | Vercel Domains › Edit; a task, a mailbox, an MCP server, a channel |
+| Change a record shown in a list | Its row opens into the form | `RowEditForm` in `CollectionPage`'s `editor` | Vercel Domains › Edit; a task, a mailbox, an MCP server, a channel |
 | Change a fact on a record's own page or card | In place: a pencil turns the fact into its field, saved by the card's Save | `AgentProfileCard`; an `ObjectSection` that swaps to its `SettingsSection` | An Agent's name and description |
 | Add a record through a few fields, or change one or two values from a command | A centred dialog | `FormDialog`; the Portal's `ActionDialogForm` | New task, add a mailbox, add an MCP server |
-| Choose from a catalogue | A modal sheet at the right edge: the search, then the entries, each with its Add | `CatalogDrawer` | Add a skill, in both products; Vercel Domains › Add |
-| Set up in several steps with a wait | The same sheet, its progress, "Step 2 of 3", in mono over the title, which stays the job's name | `FormDrawer job="steps"` | Connect a messaging channel; Telegram's QR setup |
-| Look at one record from a list, then go back to the list | A sheet from the right that leaves the page usable, its title naming the record, its facts and its payload; a press outside does not close it, Close and Escape do and give focus back to the row | `RecordSheet` | One Stripe event in Billing |
+| Choose from a catalogue | A modal sheet at the right edge | `CatalogDrawer` | Add a skill, in both products; Vercel Domains › Add |
+| Set up in several steps with a wait | The same sheet, with its progress | `FormDrawer job="steps"` | Connect a messaging channel; Telegram's QR setup |
+| Look at one record from a list, then go back to the list | A sheet from the right that leaves the page usable | `RecordSheet` | One Stripe event in Billing |
 | Do a workflow a person could link to | Its own page | The page's composition | Vercel Add New › Project; New Agent |
 | Confirm a consequence | A confirmation | `ConfirmDialog` | Remove, Disconnect |
 
-A record already on screen is never edited in a dialog or a sheet, and a sheet is never chosen because an action takes input: a catalogue is `CatalogDrawer`, a setup in steps is `FormDrawer` with `job="steps"`, and a sheet owns its one width, 512 px from 1024 px and the window less its margins below it, which no caller sets. A `Drawer` is only the phone's bottom sheet for a short job, never a desktop surface and never a confirmation. A confirmation's title names the record as a statement, never a question: "Delete Bandi di Bergamo"; its body says what happens, and its button repeats the verb and the noun, "Delete task". A settings page is the Settings composition. These choices follow the live Vercel Domains, Projects and settings pages and the [Geist Modal](https://vercel.com/geist/modal), [Sheet](https://vercel.com/geist/sheet) 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, drawn as Vercel's: 288 px wide, opening 6 px above its trigger; a header of the name and the lines under it with the gear at its end, and no picture; then one divider and the rows, 36 px high, each its label leading and its icon or its control trailing in muted ink, Theme and Language as a small round pill of choices, a product's own reading before its icon, and Sign out last in the body colour, since signing out destroys nothing. Ruled by the owner on 16 October 2026.
+A record already on screen is never edited in a dialog or a sheet, and a sheet is never chosen because an action takes input: a catalogue is `CatalogDrawer` and a setup in steps is `FormDrawer` with `job="steps"`. A `Drawer` is only the phone's bottom sheet for a short job, never a desktop surface and never a confirmation. A settings page is the Settings composition. These choices follow the live Vercel Domains, Projects and settings pages and the [Geist Modal](https://vercel.com/geist/modal), [Sheet](https://vercel.com/geist/sheet) 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.
 
 ### Tables and missing values
 
-A table is native table structure: a head row of 36 px labels over 12 px of room and then its rule, so the first body row starts at the rule like every other, 40 px body rows for comparable facts (a cell that holds a control, such as the three dots, is padded just enough to keep the row at 40), every cell padded 8 px sideways (10 px above and below in the body), headings at 14 px / 20 px and weight 500, visible because people compare and sort by them. Numeric columns align to the trailing edge with tabular figures. A sortable heading is a button inside its header cell: the arrow is decorative, the cell carries `aria-sort`, and the button names the next sort. `striped`, `bordered` and `interactive` belong to the table body; an interactive, striped or bordered row rounds the outer corners of its first and last cell to 6 px.
+`Table`, `DataTable`, `TableCard`, `RecordList`, `Item` and `Tag` hold their geometry, columns and rows on their usage pages; `page-composition` refuses a `DataTable` without column headings. No heading sorts the rows, so no heading is a button: the page holds the order, through a `CollectionSort` above the list, and `aria-sort` marks the column the rows follow.
 
-A record row is one line per record, drawn by `RecordList`, which `CollectionPage` renders, and nothing else draws one (`page-composition` refuses a `DataTable` without column headings): a 72 px entity row, with 16 px above and below, whose columns stand left to right at the widths the list declares, so a person reads every list the same way:
-
-| Slot | Width | Holds |
-| --- | --- | --- |
-| Selection | 40 px, only when the list is picked from | A box named "Select {name}" |
-| Identity | The rest: the one column without a size | The record's 32 px identity mark ("Identity marks"), then its name (600) over one muted 14 px line saying what it is or where it comes from, each on one line ending in an ellipsis (`RecordIdentity`'s `detail`: "Company skill · every Agent has it") |
-| Facts | Each fact's `size` | A few facts on one line, ending in an ellipsis |
-| Status | `status.size` | Only the exception, the status that tells this row apart from the others; empty for the usual record |
-| Time | `time.size`, tabular | The time in its verb's sentence (`RecordTime`: "Updated 3 hours ago", the date after a week, the exact moment on hover) |
-| Checklist | 52 px, only when the record has steps to be ready | Its `ProgressChecklist` ring ("Status") |
-| The row's command and the three dots | `commandsSize`; left out, 64 px for the three dots alone, or as wide as the widest lone menu command drawn as a button, never cutting its label | One command that is not destructive, as an `outline` button, then the row's `ActionMenu`; or a muted chevron when the row only opens |
-
-A status column stands only while a record in the list shows its exception, the commands column only while a record has a command, a menu or a message or the rows open, and the commands column widens for a failed action's next steps only while a row shows one, so the name and its line keep the room the row leaves. Never the three dots before the button, a decorative icon for the record's mark, a status on every row, or a destructive button on every row. An action that failed or was refused shows as its catalogue message inside its own row, with its next step, never a notice under the row, and an edit opens inside its row. A screen gives `RecordList` the records and what each one says, never its own toolbar, table, rows or menus, and anything more than a few facts lives on the record's page. A descriptive list uses `ItemGroup` and `Item` instead of table semantics: 16 px padding, a 600 title over one 20 px description with no gap, a row of 72 px, and at most two trailing controls (`size="sm"`, 32 px), the rest in the three dots. A list a person picks from starts each row with `ItemSelect`, whose box is named "Select {name}". 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: each column is as wide as its definition's `size` in pixels, the one column without a size takes what is left, and a card narrower than the sized columns plus 160 px for the unsized one keeps the identity and the actions in their columns and takes every other column out of the row, as Vercel's lists read on a phone: each joins one muted line under the name, joined by a middle dot and ending in an ellipsis, with no labels on screen, or is dropped when its column says `compact: "dropped"`, for a fact the record's page holds and the phone can spare; a status keeps its own mark. A row on a phone is the name over that one line, never a stack of labelled values: in a record row the facts join the identity's own line after a middle dot, so the record stays one 72 px row, the name over one line. A table whose every column must stay, a settings matrix, names them all in `primaryColumns` and lays out by its content on a narrow card, so its names wrap beside the columns. A titled table card carries its toolbar on the title's row, title left and controls right, as Vercel heads a card's list; under 576 px the toolbar takes its own line under the title. A value too long for its column holds one line and 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 breaks at any character in a row of wrapped text, or is cut in the middle with `MiddleTruncate` on one line. 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, its identity mark at 32 px.
+A collection fits its container without sideways scrolling, and on a phone a row is the name over one line, never a stack of labelled values, where a status keeps its own mark; `DataTable`'s and `RecordList`'s usage pages hold how their columns give way. 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 breaks at any character in wrapped text, or is cut in the middle with `MiddleTruncate` on one line.
 
 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.
 
 ### Status
 
-A status is one `StatusBadge`: a mark and a word in one of five tones, so it reads without colour.
-
-| Tone | Means | Pair |
-| --- | --- | --- |
-| Gray | Default, and every terminal state that needs no action | `{colors.canvas-soft-2}` / `{colors.body}` |
-| 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}` |
+A status is one `StatusBadge`: a mark and a word in one of five tones, so it reads without colour. `StatusBadge`'s usage page holds the tones; `ProgressChecklist`'s holds how far a record is through the steps that make it ready.
 
 The Portal, Nadia and Alveare draw every status with the one `StatusBadge` in `@nadicodeai/ui`, which owns the tones and their marks; each app keeps only its value-to-tone map in one module, and nothing else chooses a status colour. A status never moves.
 
-How far a record is through the steps that make it ready is a `ProgressChecklist`, as Vercel ends a project's row with its Production Checklist: a 24 px blue `Gauge`, its track and its arc the share of steps done, a whole ring when all are, with the double check inside in ink, on a 36 px ghost button before the row's commands whose tooltip names the checklist and how far it is ("Customer setup 3/4"), that opens the steps in a sheet at the right: the ring, the title, one line, then a card per step with its icon on a tile of its hue, its title, one line and the outline button that leads where it is done; every step is the same hairline card, and a done step differs only by the blue Done chip after its title and by having no button, so the steps still to do lead the eye. A step is done because the thing it asks for exists, so the checklist remembers nothing and has no Skip. The step's hue says which kind of step it is, never whether it is done.
-
 In a list or a feed a status shows only for the exception: the record or the event that differs from the others, such as a failure, a revocation or a wait for a person's decision. The usual state shows nothing, so a status never stands on every row. An object's own status sits beside its name in the path ("Product shells").
 
 ### Activity
 
-What happened has one shape in every product, `ActivityFeed`, and an event is one row: its time, the actor's mark, one sentence, then one muted line of detail.
-
-- **Time.** The time of day in the viewer's own zone, tabular (`RecordTime`); UTC and the local zone in its hover card. One rule for every feed, never a time printed in UTC.
-- **Actor.** The actor's identity mark at 24 px: a person's initials, an Agent's real orb, an Installation's tile. The system's own work has no mark, and never takes an orb.
-- **Sentence.** The actor's name, the action, then the object as a link that keeps the text's colour; a status after it only for the exception.
-- **Order.** Rows group under their day, its name over its date, newest first, then "Show older events", never a page count. The search and filters stand right above the rows and live in the URL.
-- **Frame.** The tab is the feed's title: the feed adds no card header of its own. It loads as still skeleton rows in the row's shape; an empty feed is one quiet line, never a picture; a failed read is the warning mark and Retry, never "no events".
-
-One run's steps are its run timeline (`RunTimeline`): a neutral rail whose nodes mark done, current and to come and never grade a step; the outcome that needs a person is the `StatusBadge` inside its step, "Needs your decision", and each step's time stands in the feed's column.
+What happened has one shape in every product, `ActivityFeed`, whose usage page holds its row and frame; one run's steps are `RunTimeline`'s.
 
 ### System activity
 
@@ -1162,11 +1108,11 @@ Who does the work decides how it looks. An Agent's work is that Agent's orb in i
 | Measurable | A progress line with a written count, "Step 2 of 3" or "12 of 40 MB". Never a percentage. A ratio of a fixed maximum is a `Gauge`, which prints the bare number and leaves the unit to its label. |
 | A page load | Still skeleton placeholders in the shape of the content, inside one `SkeletonRegion`, never pulsing and never paired with a waiting line. |
 
-One wait gets one indicator. A request waiting for a person is not a wait: queued, paused, blocked, failed and done take the status or feedback treatment. A wait is ink; info blue never marks one. Under reduced motion the waiting line breathes in opacity instead of travelling.
+One wait gets one indicator. A request waiting for a person is not a wait: queued, paused, blocked, failed and done take the status or feedback treatment. A wait is ink; info blue never marks one.
 
 ### Failure surfaces
 
-A page that cannot show what was asked for opens with a picture, the way a Portal email does: one whole cut-out in art direction's editorial register, centred above the words, whose idea says what happened. The picture carries a label, the way a museum labels a work: its title says what the figure is doing, which is the page's one joke, and a mono line gives its materials and year. The label stands centred under the picture at every width. Below the label, on the same centre line, stand a mono eyebrow naming the situation, the page's one heading, one plain sentence, and the recovery action, which leads. The cut-out's transparent ground takes the page's own, so one file serves light and dark, and it stays whole at every width: it scales down with the column and is never cropped by the viewport. No orb turns on a failure page.
+A page that cannot show what was asked for opens with a picture, the way a Portal email does: one whole cut-out in art direction's editorial register, centred above the words, whose idea says what happened. The picture carries its label (`LabelledPicture`). Below the label, on the same centre line, stand a mono eyebrow naming the situation, the page's one heading, one plain sentence, and the recovery action, which leads. The cut-out's transparent ground takes the page's own, so one file serves light and dark, and it stays whole at every width: it scales down with the column and is never cropped by the viewport. No orb turns on a failure page.
 
 A Portal email, whether the Portal or Knock sends it, follows the same order under its picture, in one structure: the picture, the eyebrow and a short heading keep the centre line; one sentence of consequence, a list between hairlines when the email is about several things (each a semibold heading over its one sentence), a table of its facts between hairlines when it has facts, one to-do sentence, the fallback link and the footer stand flush left; the button stays centred.
 
@@ -1179,39 +1125,21 @@ An absence inside a product's own chrome, such as an address or a record the Por
 
 ### Agent orbs
 
-An Agent is its orb, in every product; there is no other Agent picture. An orb is one of seven forms, `ribbon`, `lattice`, `orbit`, `globe`, `network`, `braid` and `morph`, in one colour a person chose: cobalto, verde or arancio, or none, which draws it in the text colour. Giallo is not offered because it fails 3:1 on white; rosso is not offered because it is the error red. nadicode's own two Agents are the only ones with a figure nobody chooses, the same at every size and in every state: Nadia is her striped ribbon, the form `nadia`, azzurro, verde, the text colour and rosso along its whole length; Sofia, the Agent that looks up a new company, is her sister, the form `sofia`, the same ribbon turned to face Nadia's, striped cobalto, giallo, the text colour and arancio, the identity hues Nadia does not wear. Neither figure is ever stored as an Agent's look.
+An Agent is its orb, in every product; there is no other Agent picture. `AgentOrb`'s usage page holds its forms, colours, sizes, states and reduced motion, and `AgentListRow`'s holds an Agent's row in Nadia's list. A surface that only knows a machine checked in draws idle.
 
-- **Stored look.** An Agent's form is stored as `orb:<form>` and its colour as the identity hex or nothing; a template declares its starting look the same way. The root Agent always draws as Nadia. An unknown form draws `orbit`, an unknown colour the text colour, and a stored rosso draws arancio. The look is a person's choice and is never derived from a name, id or role.
-- **Sizes** are 20, 24, 32, 40, 64, 96 and 160 px. On a photograph an orb takes the stronger `over-picture` weight; everywhere else it is `plain`.
-- **States.** Idle turns at its form's own pace and breathes. Working and thinking move with their cue, the ribbon around working and three dots above thinking, waiting holds, blocked makes one interrupted effort and stops, and done celebrates once and settles back into idle. A surface that only knows a machine checked in draws idle. No state draws a circle around the orb, and a label names the state wherever the exact state matters.
-- **In Nadia's list.** Each Agent's row (`AgentListRow`) is 52 px high: her orb at 32 px in her real state, her name, and one state line in words, "Working", "Idle" or "Needs you". Only "Needs you" takes a 6 px status dot before its words; the orb shows working by itself. In the list's narrow column (from 640 to 899 px) each orb stands at 40 px in a 48 px square, named with its state line in a tooltip. Only an orb moves in the list.
-- **Status and ambient.** An orb that stands for an Agent shows its real state. An orb in decorative artwork, such as a sign-in picture, takes ambient motion: its form moves at its own pace with no state pose or cue, and it claims no activity.
-- **Reduced motion.** Movement stops; a thinking or working orb breathes between full ink and 0.45 opacity so busy still reads as busy, and an ambient orb holds still.
 - **In a conversation.** Her states are the conversation's own: the orb in its header follows them, and every mark of her activity in the thread is her own orb in her real state, never another Agent's figure, a spinner, a ticker or a pulse. Her steps and tool calls hold still and say in words what they do or did, with a tool's kind as a decorative icon beside the words and no state of its own; the outcome of a step or a request is the `StatusBadge`, and a failed turn is the `MessageNotice`. A conversation has two actors, her and the person, and every wait in it belongs to one of them. Everything she does, including what follows the person's approval or answer, is her orb in its state: working once Run is pressed, thinking once a question is answered, waiting while an approval or a question waits for the person, blocked when a turn fails, done once when she finishes. The person's own action in progress shows on what they made: a file stays veiled on its own chip until it is uploaded, and fills only where its upload reports progress; the microphone shows it records. A pressed control keeps its place and changes only its word, a button through its `loading`. The waiting line is for the window's own loading, outside the conversation. Ruled by the owner on 11 October 2026: the Agent's states are the chat's default states, not random icons; and on 13 October 2026: the person never meets "the app" in a conversation, only the Agent.
 
-Text sits beside an orb, never on it.
-
 ### Agent card
 
-An Agent is shown as one card shape wherever it appears as an object, in the Portal's Library and Nadia's gallery alike, as Vercel's Templates gallery draws a template: the name over the job, cut after two lines, the small meta and a status row under them, the one action at the name's right, and under them the preview tile, inset 32 px from the leading edge and running off the trailing and bottom edges, her orb at 96 px in its middle on the recessed ground. On an Agent's own page the name is the page heading.
+An Agent shown as an object, in the Portal's Library and Nadia's gallery alike, is one `AgentCard`, whose usage page holds its shape.
 
 ### 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 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.card-graphite}`, its own tone, so the card keeps its look whatever the heights do) 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 company's card is `CompanyCard`, whose usage page holds where it appears (sign-up, the account's Profile, the Partner invitation), its face, foil and motion.
 
 ### Identity marks
 
-An identity mark says which thing a record is, and `IdentityMark` is its one owner: a row's, an object's, a feed's and a sidebar's mark is one of its kinds, never a decorative icon. A list gets its richness from real identity marks, never from decoration.
-
-| Kind | The mark |
-| --- | --- |
-| An Agent | Her real orb from the orb engine, at its largest size not above the mark's, with no tile and no ring; never a painted circle ("Agent orbs") |
-| An app | Its own logo in the tile |
-| A company | Its logo: the one white ink Sofia keeps from its site, on a black tile (`{colors.identity-ink}`) in both themes, as its card stamps it, or a square SVG icon in its own colours filling the tile, as Vercel shows a project's favicon; its two initials in a ringed tile on the card ground until a logo is found |
-| A person | Their picture, or their initials, round |
-| A record of a kind | The kind's own icon in a ringed tile on the card ground, the same icon its section has in the navigation: Mail for a mailbox, a server for an MCP server, a key for a password. A Library skill takes the purple category ground with the Skills icon and a plugin the `info-soft` ground with the Plugins icon, both without a ring, so the ground says which kind it is; an entry that has its own object picture draws it on that ground in the icon's place |
-
-Initials stand only for a company or a person. The mark is 32 px in a record's row, 64 px at the head of an object's page, 40 px on a Library entry, 24 px in a feed and on a sidebar's identity line, and 28 px for the company at the top of Nadia's list; a tile takes 6 px corners, 8 px at 40 and 64.
+An identity mark says which thing a record is, and `IdentityMark` is its one owner: a row's, an object's, a feed's and a sidebar's mark is one of its kinds, never a decorative icon. A list gets its richness from real identity marks, never from decoration. `IdentityMark`'s usage page holds its kinds and sizes.
 
 A recognised app, platform or model maker is drawn with its genuine mark beside its readable name; an unknown one keeps its name and a text monogram, never a guessed logo. A model's maker is 24 px, 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 catalogue icon is one of the catalogue'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.
 
@@ -1225,9 +1153,9 @@ These three ship as framework-neutral CSS; `@nadicodeai/ui` wraps the last two f
 
 **`dotted-field`** — the ground of a canvas where a person or an Agent places and arranges objects: a diagram of an Agent's work, a board of its outputs. The dots say that things here can be moved, so the field never sits behind a dashboard, a list, settings or a website section, and it never stands in for elevation.
 
-**`usage-meter`** — consumption shown against its allowance: tokens, cost, latency or runs, with the figure printed.
+**`usage-meter`** — consumption against its allowance; `UsageMeter`'s usage page holds the rest.
 
-**`run-timeline`** — the vertical thread of an Agent's run, a handoff or a workflow, one step per row.
+**`run-timeline`** — the thread of an Agent's run, one step per row; `RunTimeline`'s usage page holds the rest.
 
 ## Iconography
 
@@ -1293,1560 +1221,10 @@ The clear space is one stroke width of the rendered logo on every side. The mini
 - Do say a status with a `StatusBadge` tone, a mark and a word. Don't use colour alone or a bare dot.
 - Do open a failure page with one whole cut-out whose idea says what happened, labelled like a work in a museum, above the words on one centre line, with the recovery action leading and the diagnostic code only for a request that stopped. Don't apologise, don't crop the picture, don't joke about lost work, and don't put an orb on a failure page.
 - Do use the dotted field only on a canvas where things are arranged. Don't put it behind lists, dashboards, settings or website sections.
-- Do build a page from its composition, put the row's command before its three dots, and give a record its identity mark. Don't put the three dots before the button, a decorative icon in place of a record's mark, a status on every row or a destructive button on every row.
-- Do name a tab with a noun, and keep a list's count in its footer. Don't put a count in a tab, or switch whose things are shown with a tab.
+- Do build a page from its composition. Don't assemble a page's header, toolbar, rows or menus by hand.
 - Do put the path alone in the top bar and the page's actions on its title row. Don't put an action in the top bar or a second sidebar beside the first.
-- Do add a rule here before a product needs it. Don't restate a rule in another document; link to it.
+- Do add a shared rule here, and a component's own rule to its usage page, before a product needs it. Don't restate a rule in another document; link to it.
 
 ## Token extension
 
-The YAML front matter holds the four groups the DESIGN.md format defines: colors, typography, rounded and spacing. Everything else is authored in the one `json design-tokens` fence below, in the W3C design-tokens format: `core.material` (the scrim and glass values, a `dark-` value beside one that differs in dark), `core.elevation` (the four heights and the glass edge, per mode), `core.motion` (durations and easings), `semantic` (the shared colour roles and radius) and `register.website` (the website column). An alias is written `{core.color.canvas}`. In CSS a token is `--nc-<name>`, an elevation is reached only through `nc-elevation-<height>`, and Tailwind names the values through the `nc-` and `nadicode-` namespaces. How the build turns this file into CSS and token files is described in `packages/design-system/README.md`.
-
-```json design-tokens
-{
-  "core": {
-    "material": {
-      "$type": "number",
-      "scrim-opacity": {
-        "$value": 0.8
-      },
-      "dark-scrim-opacity": {
-        "$value": 0.6
-      },
-      "glass-opacity": {
-        "$value": 0.72
-      },
-      "glass-saturation": {
-        "$value": 1.8
-      },
-      "glass-blur": {
-        "$type": "dimension",
-        "$value": {
-          "value": 20,
-          "unit": "px"
-        }
-      }
-    },
-    "elevation": {
-      "$type": "shadow",
-      "light": {
-        "resting": {
-          "$value": [
-            {
-              "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
-              }
-            }
-          ]
-        },
-        "raised": {
-          "$value": [
-            {
-              "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": 16,
-                "unit": "px"
-              },
-              "spread": {
-                "value": -4,
-                "unit": "px"
-              },
-              "color": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0,
-                  0
-                ],
-                "alpha": 0.08
-              }
-            }
-          ]
-        },
-        "floating": {
-          "$value": [
-            {
-              "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.06
-              }
-            },
-            {
-              "offsetX": {
-                "value": 0,
-                "unit": "px"
-              },
-              "offsetY": {
-                "value": 16,
-                "unit": "px"
-              },
-              "blur": {
-                "value": 32,
-                "unit": "px"
-              },
-              "spread": {
-                "value": -8,
-                "unit": "px"
-              },
-              "color": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0,
-                  0
-                ],
-                "alpha": 0.1
-              }
-            }
-          ]
-        },
-        "modal": {
-          "$value": [
-            {
-              "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": 8,
-                "unit": "px"
-              },
-              "blur": {
-                "value": 24,
-                "unit": "px"
-              },
-              "spread": {
-                "value": -12,
-                "unit": "px"
-              },
-              "color": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0,
-                  0
-                ],
-                "alpha": 0.12
-              }
-            },
-            {
-              "offsetX": {
-                "value": 0,
-                "unit": "px"
-              },
-              "offsetY": {
-                "value": 32,
-                "unit": "px"
-              },
-              "blur": {
-                "value": 72,
-                "unit": "px"
-              },
-              "spread": {
-                "value": -12,
-                "unit": "px"
-              },
-              "color": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0,
-                  0
-                ],
-                "alpha": 0.12
-              }
-            }
-          ]
-        },
-        "glass": {
-          "$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.75
-              },
-              "inset": true
-            },
-            {
-              "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.35
-              },
-              "inset": true
-            },
-            {
-              "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": 4,
-                "unit": "px"
-              },
-              "blur": {
-                "value": 8,
-                "unit": "px"
-              },
-              "spread": {
-                "value": -4,
-                "unit": "px"
-              },
-              "color": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0,
-                  0
-                ],
-                "alpha": 0.06
-              }
-            },
-            {
-              "offsetX": {
-                "value": 0,
-                "unit": "px"
-              },
-              "offsetY": {
-                "value": 16,
-                "unit": "px"
-              },
-              "blur": {
-                "value": 32,
-                "unit": "px"
-              },
-              "spread": {
-                "value": -8,
-                "unit": "px"
-              },
-              "color": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0,
-                  0
-                ],
-                "alpha": 0.08
-              }
-            }
-          ]
-        }
-      },
-      "dark": {
-        "resting": {
-          "$value": [
-            {
-              "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": 2,
-                "unit": "px"
-              },
-              "color": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0,
-                  0
-                ],
-                "alpha": 1
-              }
-            },
-            {
-              "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.5
-              }
-            }
-          ]
-        },
-        "raised": {
-          "$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.06
-              },
-              "inset": true
-            },
-            {
-              "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.16
-              }
-            },
-            {
-              "offsetX": {
-                "value": 0,
-                "unit": "px"
-              },
-              "offsetY": {
-                "value": 0,
-                "unit": "px"
-              },
-              "blur": {
-                "value": 0,
-                "unit": "px"
-              },
-              "spread": {
-                "value": 2,
-                "unit": "px"
-              },
-              "color": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0,
-                  0
-                ],
-                "alpha": 1
-              }
-            },
-            {
-              "offsetX": {
-                "value": 0,
-                "unit": "px"
-              },
-              "offsetY": {
-                "value": 12,
-                "unit": "px"
-              },
-              "blur": {
-                "value": 24,
-                "unit": "px"
-              },
-              "spread": {
-                "value": -8,
-                "unit": "px"
-              },
-              "color": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0,
-                  0
-                ],
-                "alpha": 0.8
-              }
-            }
-          ]
-        },
-        "floating": {
-          "$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.08
-              },
-              "inset": true
-            },
-            {
-              "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.16
-              }
-            },
-            {
-              "offsetX": {
-                "value": 0,
-                "unit": "px"
-              },
-              "offsetY": {
-                "value": 0,
-                "unit": "px"
-              },
-              "blur": {
-                "value": 0,
-                "unit": "px"
-              },
-              "spread": {
-                "value": 2,
-                "unit": "px"
-              },
-              "color": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0,
-                  0
-                ],
-                "alpha": 1
-              }
-            },
-            {
-              "offsetX": {
-                "value": 0,
-                "unit": "px"
-              },
-              "offsetY": {
-                "value": 24,
-                "unit": "px"
-              },
-              "blur": {
-                "value": 48,
-                "unit": "px"
-              },
-              "spread": {
-                "value": -12,
-                "unit": "px"
-              },
-              "color": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0,
-                  0
-                ],
-                "alpha": 0.9
-              }
-            }
-          ]
-        },
-        "modal": {
-          "$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.1
-              },
-              "inset": true
-            },
-            {
-              "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.18
-              }
-            },
-            {
-              "offsetX": {
-                "value": 0,
-                "unit": "px"
-              },
-              "offsetY": {
-                "value": 0,
-                "unit": "px"
-              },
-              "blur": {
-                "value": 0,
-                "unit": "px"
-              },
-              "spread": {
-                "value": 2,
-                "unit": "px"
-              },
-              "color": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0,
-                  0
-                ],
-                "alpha": 1
-              }
-            },
-            {
-              "offsetX": {
-                "value": 0,
-                "unit": "px"
-              },
-              "offsetY": {
-                "value": 48,
-                "unit": "px"
-              },
-              "blur": {
-                "value": 96,
-                "unit": "px"
-              },
-              "spread": {
-                "value": -24,
-                "unit": "px"
-              },
-              "color": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0,
-                  0
-                ],
-                "alpha": 1
-              }
-            }
-          ]
-        },
-        "glass": {
-          "$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.1
-              },
-              "inset": true
-            },
-            {
-              "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.14
-              }
-            },
-            {
-              "offsetX": {
-                "value": 0,
-                "unit": "px"
-              },
-              "offsetY": {
-                "value": 16,
-                "unit": "px"
-              },
-              "blur": {
-                "value": 32,
-                "unit": "px"
-              },
-              "spread": {
-                "value": -12,
-                "unit": "px"
-              },
-              "color": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0,
-                  0
-                ],
-                "alpha": 0.8
-              }
-            }
-          ]
-        }
-      }
-    },
-    "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"
-          }
-        },
-        "arrive": {
-          "$value": {
-            "value": 300,
-            "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
-          ]
-        }
-      }
-    }
-  },
-  "semantic": {
-    "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}"
-        },
-        "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-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"
-        ]
-      },
-      "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"
-          }
-        }
-      }
-    }
-  }
-}
-```
+The YAML front matter holds the four groups the DESIGN.md format defines: colors, typography, rounded and spacing. Every other value is authored in `src/tokens/extension.tokens.json`, in the W3C design-tokens format: `core.material` (the scrim and glass values, a `dark-` value beside one that differs in dark), `core.elevation` (the four heights and the glass edge, per mode), `core.motion` (durations and easings), `semantic` (the shared colour roles and radius) and `register.website` (the website column). An alias is written `{core.color.canvas}`. In CSS a token is `--nc-<name>`, an elevation is reached only through `nc-elevation-<height>`, and Tailwind names the values through the `nc-` and `nadicode-` namespaces. The build composes the two into the package's token files and CSS, as the package README describes.