@nadicodeai/design-system 0.22.0 → 1.0.0

package/AGENTS.md

@@ -1,18 +1,17 @@
 # @nadicodeai/design-system
 
-The `@nadicodeai/design-system` npm workspace. `DESIGN.md` is the normative contract for reusable design tokens and package output; the package ships tokens, the CSS kit (structural geometry plus framework-agnostic brand display components), and assets. Repo-only `examples/` specimens prove that public surface. Standard, interactive, and section UI ships as React components from `@nadicodeai/ui`, not from here. Paths here are relative to `design-system/`; run commands from this directory, or with `-w design-system` from the repo root.
+The `@nadicodeai/design-system` npm workspace. `DESIGN.md` is the normative contract for reusable design tokens and package output; the package ships tokens, the CSS kit (structural geometry plus framework-agnostic brand display components), and assets. Repo-only `examples/` specimens prove that public surface. Standard, interactive, and section UI ships as React components from `@nadicodeai/ui`, not from here. Paths here are relative to `design-system/`; run commands from this directory, or with `-w @nadicodeai/design-system` from the repo root.
 
 ## Commands
 
+Proof escalates by the ladder in the root `AGENTS.md` "Commands": `npm run check -w @nadicodeai/design-system` and `npm run test -w @nadicodeai/design-system` before pushing. `check` carries the `DESIGN.md` contract lint, so a contract edit needs no separate command. This workspace has no app to boot: it ships a package, and `examples/` renders through the website's verification routes.
+
 | Command | When |
 | --- | --- |
-| `npm run lint:design` | After any `DESIGN.md` edit |
-| `npm run build` | After any `DESIGN.md` edit; regenerates every `dist/` artifact (tokens, Tailwind data, icons, complete CSS bundle) |
-| `npm run generate:icons` | After bumping `lucide-static`; rebakes `dist/icons/` (also runs inside `build`) |
-| `npm run lint` / `npm run test` | After TS/JS changes / before handoff (browser-free) |
-| `npm run test:visual` | Rendered CSS checks (`playwright.visual.config.ts`, `tests/visual/`) |
-
-Handoff gate: `npm run lint:design && npm run lint && npm run build && npm run test`.
+| `npm run build -w @nadicodeai/design-system` | After any `DESIGN.md` edit; regenerates every `dist/` artifact (tokens, Tailwind data, icons, complete CSS bundle) |
+| `npm run generate:icons -w @nadicodeai/design-system` | After bumping `lucide-static`; rebakes `dist/icons/` (also runs inside `build`) |
+| `npm run generate:favicons -w @nadicodeai/design-system` | After a favicon source change; the output is git-tracked and the build does not regenerate it |
+| `npm run test:visual -w @nadicodeai/design-system` | Rendered CSS checks (`playwright.visual.config.ts`, `tests/visual/`), outside the browser-free default suite |
 
 ## Routing
 

package/CONTEXT.md

@@ -60,6 +60,12 @@ A visual family for presenting a concrete content type, such as an image or arti
 **Agentic work surface**:
 A NadicodeAI visual family for showing people and agents working together through conversations, artifacts, approvals, tools, handoffs, traces, and inspectable state.
 
+**Agent visual**:
+The decorative metaball identity assigned explicitly to a persistent Agent by
+type. It identifies the Agent across products without carrying status, runtime
+activity, capability, or work output.
+_Avoid_: Agent glyph, Agent avatar
+
 **App-owned product feature**:
 A product-specific route, screen, use case, or behavior owned by the consuming app rather than by the reusable design or UI packages.
 

package/DESIGN.md

@@ -20,6 +20,8 @@ colors:
   canvas: "#ffffff"
   canvas-soft: "#fafafa"
   canvas-soft-2: "#f5f5f5"
+  material-workspace: "#f7f7f7"
+  material-solid: "#ffffff"
   line: "#e5e5e5"
   input: "#757575"
   seam: "#d4d4d4"
@@ -79,6 +81,8 @@ colors:
   dark-canvas: "#000000"
   dark-canvas-soft: "#111111"
   dark-canvas-soft-2: "#1a1a1a"
+  dark-material-workspace: "#000000"
+  dark-material-solid: "#000000"
   dark-ink: "#ededed"
   dark-body: "#c7c7c7"
   dark-muted: "#8f8f8f"
@@ -356,7 +360,7 @@ Every value a role needs is carried by the role token itself; there are no ten-s
 - **Semantic feedback** (`{colors.success}` = verde with `{colors.success-soft}`/`{colors.success-deep}`; `{colors.error}` = rosso funzionale `#d3302f` with `{colors.error-soft}`/`{colors.error-deep}`; `{colors.warning}` = giallo `#ffc220` with `{colors.warning-soft}`/`{colors.warning-deep}`; `{colors.info}` = cobalto `#1e3cff` with `{colors.info-soft}`/`{colors.info-deep}`): validation, caution, approval, and operational feedback. In each pair the `-soft` value is the tinted tag/banner ground and the `-deep` value is the AA-clearing text on it. On a solid `error` fill (the shadcn `destructive` role) text is white; on a solid `warning` or `success` fill text is ink. The success pair intentionally reuses the link pair's AA-safe verde values; its feedback meaning remains distinct from inline navigation and entity-status semantics.
 - **Accent** (`{colors.accent}` = arancio `#ff5a1f`): the attention accent for highlights, exception flags, and emphasis marks. It is an accent only — never a fill, background, or body-text colour, and it never carries text. Do not conflate this functional `accent` with the identically-named shadcn surface role: that role is a neutral (`{colors.canvas-soft-2}` in light, `{colors.dark-canvas-soft-2}` in dark) and carries no hue despite the shared word.
 - **Flag Red** (`{colors.flag-red}` = `#d3302f`): the identity-mark red alias. It shares its hex with `{colors.error}` but stays a distinct role name — `flag-red` is identity, `error` is validation feedback. The attention accent is arancio, not flag red.
-- **Workflow States** (`{colors.state-ready}` neutral, `{colors.state-running}` cobalto, `{colors.state-review}` giallo, `{colors.state-blocked}` rosso, `{colors.state-complete}` verde): the left-border/state vocabulary for agentic work surfaces — cobalto means in motion, verde means done. The dark counterparts (`{colors.dark-state-ready}`, `{colors.dark-state-running}`, `{colors.dark-state-review}`, `{colors.dark-state-blocked}`, `{colors.dark-state-complete}`) keep the same functional identity. These colours are carried only by the `state-tag` 3 px `border-left` rail and related non-text state accents; label text stays on the neutral foreground roles for contrast in both themes. The `{colors.state-*}` tokens stay rail-only for run-state surfaces; entity status is a separate vocabulary carried by the `status-tag` family's background+text pairs (see `## Components`), and the two token sets never cross.
+- **Workflow States** (`{colors.state-ready}` neutral, `{colors.state-running}` cobalto, `{colors.state-review}` giallo, `{colors.state-blocked}` rosso, `{colors.state-complete}` verde): the left-border/state vocabulary for agentic work surfaces — cobalto means in motion, verde means done. The dark counterparts (`{colors.dark-state-ready}`, `{colors.dark-state-running}`, `{colors.dark-state-review}`, `{colors.dark-state-blocked}`, `{colors.dark-state-complete}`) keep the same functional identity. These colours are carried by non-text state accents only — meter and bullet segments, delta marks, and the brand book's own rails; label text stays on the neutral foreground roles for contrast in both themes. Status is not one of their jobs: every status the product renders is the Badge status vocabulary (see `## Status Vocabulary`), which reads from the semantic feedback and link pairs, and the two token sets never cross.
 
 ### Chart categoricals (functional tier)
 
@@ -438,8 +442,8 @@ All body, title, caption, and code typography uses `letterSpacing: 0px`. Do not
 | `{typography.body-sm}`        | 14px | 400    | 20px        | Secondary copy, nav, compact cell copy.                                    |
 | `{typography.body-sm-strong}` | 14px | 500    | 20px        | Emphasised secondary copy and compact labels.                              |
 | `{typography.caption}`        | 12px | 400    | 16px        | Footer secondary lines and badge labels.                                   |
-| `{typography.caption-strong}` | 12px | 500    | 16px        | Entity-status `status-tag` labels.                                         |
-| `{typography.caption-mono}`   | 12px | 500    | 16px        | Eyebrows, identifiers and code, run-state `state-tag` labels.              |
+| `{typography.caption-strong}` | 12px | 500    | 16px        | Compact emphasised labels on chrome and chips.                             |
+| `{typography.caption-mono}`   | 12px | 500    | 16px        | Eyebrows, identifiers and code.                                            |
 | `{typography.code}`           | 13px | 400    | 20px        | Tool calls, snippets, traces.                                              |
 | `{typography.button-lg}`      | 16px | 500    | 24px        | Marketing-scale button labels.                                             |
 | `{typography.button-md}`      | 14px | 500    | 18px        | Standard button and control labels.                                        |
@@ -482,7 +486,7 @@ Kernel compositions arrange approved primitives for a content role. They must no
 Each reusable concern has one home and one authoring surface, so a member is documented and shipped in exactly one place:
 
 - **Tokens** — exact reusable values live in this contract's `colors`, `spacing`, `rounded`, and `typography`; they export to the generated token layer (with a hand-authored local token layer beside it). No component or section may re-encode a token value.
-- **Framework-agnostic CSS components** — the brand/display CSS components that remain in this package (agent-work artifacts, the run-state `state-tag` family, the entity-status `status-tag` family, `image`, and the small label/badge/link metadata components). Their names and semantics live once in `## Components`; design-system CSS realises that catalog without a second recipe or component-token hierarchy.
+- **Framework-agnostic CSS components** — the brand/display CSS components that remain in this package (agent-work artifacts, `image`, and the small label/badge/link metadata components). Their names and semantics live once in `## Components`; design-system CSS realises that catalog without a second recipe or component-token hierarchy.
 - **Reusable compositions and sections** — patterns that arrange the page grammar and lower tiers for a content role. They ship as React shadcn compositions from `@nadicodeai/ui`, composed over the kept page grammar; they are not a pure-CSS section layer and do not add a second component catalog here.
 - **Layout grammar** — the page-frame, row, lane, seam, stage, and marker system documented across this `## Layout` section, carried by the layout CSS layer.
 - **Specimens** — static demonstrations of already-defined primitives. They invent no geometry, seams, heights, or responsive behavior; they only assemble shipped tiers for inspection.
@@ -531,28 +535,33 @@ These live helpers are part of the kept page-grammar layout layer. They support
 
 NadicodeAI website depth is flat and architectural. Hairlines, contrast, dotted fields, diagonal fills, and dark action bands create hierarchy. The public website does not use floating card stacks as its main structure; the page frame and row grid remain dominant.
 
-Product UI uses explicit material roles. Resting content surfaces use no shadow; hierarchy comes from one owned border, spacing, and surface contrast. Shadows identify genuinely floating UI only. The same low-opacity black shadow stacks are used in light and dark themes so elevation does not change character between modes.
+Product UI uses one shared material ladder. The workspace is one continuous ground (`{colors.material-workspace}` / `{colors.dark-material-workspace}`); every solid object uses the same fill (`{colors.material-solid}` / `{colors.dark-material-solid}`). In dark mode, both are true black. The workspace remains legible because it carries the existing `dotted-field` texture and solid objects occlude it. Elevation never means progressively greyer cards. Physical distance changes only the `shadow-plugin` falloff: `smooth-shadow-ring-md` for resting content, then `lg`, `xl`, and `2xl` when an object is physically raised, floating, or modal. Each utility already integrates the plugin's adaptive optical ring, including the plugin's 18% white dark-mode ring, so an elevated root never adds a border, second ring, local ring tint, or opacity override. Product code chooses only the semantic role.
 
-The Google design schema does not define elevation or opacity groups. These declarations are therefore the authored material-token source inside this contract. The build reads this block strictly, emits generated `--nc-*` hooks, and maps Tailwind's named opacity and shadow utilities to them; consumers never repeat these values.
+Glass is a material variant, not an elevation step. It is reserved for compact control chrome floating over legible content. Cards, KPIs, tables, inspectors, and ordinary modal bodies remain solid. Reduced-transparency mode replaces glass with the same solid material at the same elevation.
+
+The Google design schema does not define opacity groups. These declarations are therefore the authored material-token source inside this contract. The build reads this block strictly and emits generated `--nc-*` hooks. The UI package owns the exact `shadow-plugin` dependency and maps semantic component roles to its utilities without copying the vendor shadow values into this contract.
 
 ```css material-tokens
 --nc-material-scrim-opacity: 10%;
---nc-material-shadow-tooltip: 0 1px 1px rgb(0 0 0 / 2%), 0 4px 8px rgb(0 0 0 / 4%);
---nc-material-shadow-menu: 0 1px 1px rgb(0 0 0 / 2%), 0 4px 8px -4px rgb(0 0 0 / 4%), 0 16px 24px -8px rgb(0 0 0 / 6%);
---nc-material-shadow-dialog: 0 1px 1px rgb(0 0 0 / 2%), 0 8px 16px -4px rgb(0 0 0 / 4%), 0 24px 32px -8px rgb(0 0 0 / 6%);
---nc-material-shadow-sheet: 0 2px 2px rgb(0 0 0 / 4%), 0 8px 16px -4px rgb(0 0 0 / 4%);
+--nc-material-glass-opacity: 76%;
+--nc-material-glass-blur: 28px;
+--nc-material-glass-saturation: 116%;
 ```
 
-| Material role | Border / radius | Elevation | Internal spacing |
-| --- | --- | --- | --- |
-| Resting content surface | 1 px `{colors.line}` / `{colors.dark-line}`; `{rounded.md}` (6 px) | none | 24 px, or 16 px only for an explicitly compact surface |
-| Resting control | 1 px `{colors.input}` / `{colors.dark-input}`; `{rounded.md}` (6 px) | none | `{spacing.control-padding-inline}` inline; `{spacing.xs}` block for textareas; minimum height `{spacing.control-height}` |
-| Tooltip | 1 px `{colors.line}` / `{colors.dark-line}`; `{rounded.md}` (6 px) | tooltip shadow | 6 px block / 12 px inline |
-| Menu | 1 px `{colors.line}` / `{colors.dark-line}`; `{rounded.2xl}` (12 px) | menu shadow | 4 px |
-| Popover | 1 px `{colors.line}` / `{colors.dark-line}`; `{rounded.2xl}` (12 px) | menu shadow | 10 px |
-| Dialog | 1 px `{colors.line}` / `{colors.dark-line}`; `{rounded.2xl}` (12 px) | dialog shadow | 24 px body / 16 px footer |
-| Inset sheet | 1 px `{colors.line}` / `{colors.dark-line}`; `{rounded.3xl}` (16 px) | sheet shadow | 12 px outer inset / 24 px sections |
-| Takeover | 1 px `{colors.line}` / `{colors.dark-line}`; `{rounded.3xl}` (16 px) | dialog shadow | 24 px |
+| Material role | Construction                                                                                                       | Use                                                                                                                                                                                                                      |
+| ------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Workspace     | `dotted-field` on `{colors.material-workspace}` / `{colors.dark-material-workspace}`; no edge or shadow            | The continuous work area behind product objects                                                                                                                                                                          |
+| Resting       | Solid fill; plugin-default integrated ring; `smooth-shadow-ring-md`; `{rounded.3xl}` (16 px)                       | KPI, card, table, setting, and persistent content surfaces                                                                                                                                                               |
+| Raised        | Same solid fill and ring; `smooth-shadow-ring-lg`; `{rounded.3xl}` (16 px)                                         | Active work, a selected object, or an attached inspector above resting siblings                                                                                                                                          |
+| Floating      | Same solid fill and ring; `smooth-shadow-ring-xl`; role-specific corner radius                                     | Compact menus, popovers, dropdowns, and anchored surfaces use `{rounded.2xl}` (12 px); small artifacts such as tooltips and toasts keep `{rounded.md}` (6 px); detached product surfaces may use `{rounded.3xl}` (16 px) |
+| Modal         | Same solid fill and ring; `smooth-shadow-ring-2xl`; `{rounded.3xl}` (16 px)                                        | Dialog, sheet, drawer, and takeover                                                                                                                                                                                      |
+| Glass control | Translucent solid fill at 76%, 28 px backdrop blur, integrated plugin ring, and the falloff for its physical level | Compact control chrome floating above content; never a content container                                                                                                                                                 |
+
+`Card` is the fundamental product container. Its content does not create a second material family: KPIs, Agent cards, settings, and ordinary grouped content use the resting role unless the object is physically raised. Interaction variants may change state or emphasis without changing the material role.
+
+Absence follows the container that owns it. A page-level or region-level empty state is an opaque solid region with a dashed boundary. An empty state inside a Card is transparent and unframed so it does not draw a second container inside the first.
+
+Resting form controls are not elevated material planes. They keep the 1 px `{colors.input}` / `{colors.dark-input}` boundary, `{rounded.md}` (6 px), and no shadow. Their inline padding is `{spacing.control-padding-inline}`, textareas use `{spacing.xs}` block padding, and every default control is at least `{spacing.control-height}` high.
 
 Modal overlays use `{colors.scrim}` / `{colors.dark-scrim}` at the generated `scrim` opacity with no blur. Focus is not elevation: controls use a full-opacity `{spacing.focus-ring-width}` `{colors.focus-ring}` / `{colors.dark-focus-ring}` ring with no offset. Avoid nested decorative borders: one container owns containment, while child groups use spacing, headings, or dividers only when those dividers clarify structure.
 
@@ -563,12 +572,12 @@ On coarse or non-hover input capability, every interactive target is at least 44
 Corners are restrained and assigned by material role.
 
 - Use `{rounded.none}` for page rows, frame edges, grid cells, and structural modules.
-- Use `{rounded.md}` (6 px) for resting content surfaces, controls, buttons, chips, status tags, tooltips, and small artifacts.
-- Use `{rounded.2xl}` (12 px) for menus, popovers, and dialogs.
-- Use `{rounded.3xl}` (16 px) for inset sheets and takeovers.
+- Use `{rounded.md}` (6 px) for controls, buttons, chips, status tags, and small artifacts.
+- Use `{rounded.2xl}` (12 px) for compact menus, popovers, dropdowns, and anchored floating surfaces.
+- Use `{rounded.3xl}` (16 px) for resting and raised product content surfaces, detached inspectors, modal dialogs, inset sheets, and takeovers.
 - Use `{rounded.full}` only for intrinsically circular identity/avatar chrome and compact control marks whose geometry is inherently round or pill-shaped. It never turns a content surface, button, badge, or navigation item into a pill by default.
 
-Public page-grammar cells are not cards and remain square because their parent frame supplies the visual system. Product cards are resting content surfaces and use the 6 px role above; they do not gain thicker borders, nested frames, or a shadow merely because they contain grouped settings.
+Public page-grammar cells are not cards and remain square because their parent frame supplies the visual system. Product cards use the resting material role; they do not gain a second border, nested ring, or stronger elevation merely because they contain grouped settings.
 
 ## Motion
 
@@ -602,33 +611,9 @@ Content surfaces display specific content types inside the grammar. They are val
 
 Agentic work surfaces are the NadicodeAI-specific display layer outside the conversation renderer. They show concrete work output or workflow state such as memory, state, run progress, identity, and handoffs. Conversation messages, tools, artifacts, approvals, and pending indicators belong to assistant-ui.
 
-**`artifact-surface`** — inspectable output area outside a conversation. Use for proposal previews, reports, plans, spreadsheets, schedules, run logs, and workflow maps.
-
-Status-tag variants share the same compact sans rectangle at `{typography.caption-strong}`, `{rounded.md}` — a small subtle-tinted rectangle, never a capsule — and differentiate by tone: a paired background+text ramp step, not a border-left rail. Tone is `[data-tone]`, not BEM modifiers. Gray is the default tone; color is reserved for marking health and exceptions, so every terminal or no-action entity status (inactive, archived, rejected, canceled, expired, revoked, denied) renders gray. Subtle-only (no solid/filled variant), no icons inside the badge, no text-transform; labels render verbatim from the source's own i18n dictionary. `status-tag` is the entity-status vocabulary — agent, credential, activation, customer, invitation, subscription, and health values that live on a record — and stays a sibling of `state-tag`: the two families never blend, and `status-tag` never touches the `{colors.state-*}` tokens.
-
-**`status-tag-gray`** — default and terminal entity status: no action pending, nothing to watch (inactive, archived, rejected, canceled, expired, revoked, denied).
-
-**`status-tag-green`** — a healthy, active, or successfully completed entity status.
-
-**`status-tag-red`** — a failed, blocked, or otherwise exceptional entity status that needs attention.
-
-**`status-tag-amber`** — a degrading, retiring, or past-due entity status between healthy and failed.
+Agent identity is decorative product identity, not a work artifact or a status signal. Its approved metaball form, closed Agent-type recipes, four surface treatments, palette, still frames, and motion rules live in [`brand/visual-design/AGENT-VISUAL-SYSTEM.md`](../brand/visual-design/AGENT-VISUAL-SYSTEM.md). `@nadicodeai/ui` owns the typed React implementation. Consuming apps assign a recipe explicitly and own placement, data, actions, and accessible meaning.
 
-**`status-tag-blue`** — an in-progress, pending, or trial entity status still moving toward a resolution.
-
-State-tag variants share the same compact rectangular shape at `{typography.caption-mono}` and differentiate by a 3 px colored `border-left` consuming the matching `{colors.state-*}` token. Shape carries meaning; color carries variant.
-
-**`state-tag-ready`** — workflow state tag for work that is ready or waiting to start. Uses `{colors.state-ready}` for the left edge.
-
-**`state-tag-running`** — workflow state tag for work currently being executed by an agent or system. Uses `{colors.state-running}` for the left edge.
-
-**`state-tag-review`** — workflow state tag for human review or approval. Uses `{colors.state-review}` for the left edge.
-
-**`state-tag-blocked`** — workflow state tag for blocked work or failed preconditions. Uses `{colors.state-blocked}` for the left edge.
-
-**`state-tag-complete`** — workflow state tag for completed work. Uses `{colors.state-complete}` for the left edge.
-
-**`state-row`** — full-width workflow-state divider inside an agentic work surface. Its bounded hairlines belong to the row and its dot consumes the same state token as the matching `state-tag` variant.
+**`artifact-surface`** — inspectable output area outside a conversation. Use for proposal previews, reports, plans, spreadsheets, schedules, run logs, and workflow maps.
 
 **`usage-meter`** — token, cost, latency, or run-count display.
 
@@ -638,6 +623,34 @@ State-tag variants share the same compact rectangular shape at `{typography.capt
 
 **`handoff-banner`** — agent-to-agent or human-to-agent handoff surface. It explains the handoff reason and destination. It carries a 3 px colored `border-left` consuming the matching `{colors.link}` token and a leading direction marker tinted with the same token; the accent edge and arrow carry the handoff direction.
 
+## Status Vocabulary
+
+Status is the one thing every surface in the product says: an agent is active, a
+key is revoked, an invitation is waiting, a run is blocked. It is said one way.
+
+**What it is.** The single status carrier is the React `Badge` from
+`@nadicodeai/ui`, rendered in one of five semantic tones with a small mark in
+its icon slot. It is not a CSS component in this package: there is no
+framework-neutral status class, and a static surface that needs to show a status
+shows it as ordinary text. Its React API — the tone variants, the icon slot, and
+what a consuming app must supply — is contracted in
+[`@nadicodeai/ui/docs/contract.md`](../@nadicodeai/ui/docs/contract.md).
+
+**Why.** A status read by colour alone is not read by everyone, and a product
+that speaks status in three grammars teaches its next surface to invent a
+fourth. One badge, carrying an icon and a word with the tone only reinforcing
+both, is legible without colour and leaves nothing to invent.
+
+**What it does.** Five tones, each a soft ground with its deep label from an
+existing semantic pair: gray on the neutral spine for the default and every
+terminal, no-action state; green on the link pair for healthy and complete; red
+on the error pair for unusable and failed; amber on the warning pair for waiting
+on a decision; blue on the info pair for a step in motion. One mark per tone, so
+the shape repeats the tone rather than adding a second axis. The families —
+which statuses exist and which tone each value takes — belong to the consuming
+app, because they are its domain, not this contract's; the Portal keeps its
+whole map in one module and no surface picks a status colour anywhere else.
+
 ## Do's and Don'ts
 
 ### Do
@@ -647,13 +660,13 @@ State-tag variants share the same compact rectangular shape at `{typography.capt
 - Do use `side-fill`, guide strips, or component-owned fillers whenever content does not occupy the outer columns.
 - Do use `{spacing.guide}` and `{colors.line}` for ordinary seams.
 - Do use `{colors.input}` / `{colors.dark-input}` for resting control boundaries and the dedicated focus-ring roles for keyboard focus.
-- Do use exactly one material role per container: resting surfaces are border-only; menus, popovers, dialogs, sheets, and takeovers use their specified floating treatment.
+- Do use exactly one material role per product container; structural page-grammar cells remain border-only, while product cards, menus, popovers, dialogs, sheets, and takeovers use their specified material treatment.
 - Do tune line visibility by changing `{colors.line}` at the token contract, then rebuilding generated exports.
 - Do use `{colors.cross}` for crosshair color while keeping crosshair weight equal to `{spacing.guide}`.
 - Do use fixed height tokens for default component/specimen height and let content grow only when required.
 - Do separate different story beats into separate rows.
 - Do use the full-lane `stage` geometry for one major use-case/artifact story, not as a container for every page concept.
-- Do make agent visuals show conversations, artifacts, review states, or work output.
+- Do use Agent identity visuals only to identify an Agent or its explicit type; use assistant-ui and the agentic work surfaces above for conversations, artifacts, review states, and work output.
 - Do keep ordinary CSS components compact and subordinate to the page grammar.
 - Do use pricing, logo, banner, and showcase compositions only when the page truly contains that content type.
 
@@ -663,7 +676,7 @@ State-tag variants share the same compact rectangular shape at `{typography.capt
 - Don't draw the same seam from two adjacent elements.
 - Don't add borders inside cells to fix visual seams; fix the owner layer.
 - Don't use a 1 px decorative line as an input boundary, or locally increase card border weight to manufacture hierarchy.
-- Don't stack borders around nested groups, add shadows to resting cards, or blur modal scrims.
+- Don't stack borders or rings around an elevated surface, promote a resting card because its content is important, or blur modal scrims.
 - Don't tune seam contrast with local opacity, raw colors, or component-specific border colors.
 - Don't use viewport-scaled typography.
 - Don't use negative letter spacing in the website kernel.
@@ -731,7 +744,7 @@ The NadicodeAI logo has three approved forms:
 
 Other companies' marks are not NadicodeAI company logos and are not governed by anything in this section. They are generated identity images owned by `@nadicodeai/ui/components/brand-icons`, decided in [`docs/adr/0042-third-party-brand-marks-are-generated-identity-images.md`](../docs/adr/0042-third-party-brand-marks-are-generated-identity-images.md). A third-party mark never enters a NadicodeAI logo form, composition, or clear-space measurement.
 
-Nadia's portrait and generated imagery are not NadicodeAI company logos. Their identity and selection rules live in [`brand/visual-design/NADIA-VISUAL-IDENTITY.md`](../brand/visual-design/NADIA-VISUAL-IDENTITY.md); editorial imagery routes through [`brand/visual-design/EDITORIAL-ILLUSTRATION.md`](../brand/visual-design/EDITORIAL-ILLUSTRATION.md). This contract owns only the package delivery interface.
+Nadia's portrait, Agent identity visuals, and generated imagery are not NadicodeAI company logos. Nadia's identity and selection rules live in [`brand/visual-design/NADIA-VISUAL-IDENTITY.md`](../brand/visual-design/NADIA-VISUAL-IDENTITY.md); the Agent identity system lives in [`brand/visual-design/AGENT-VISUAL-SYSTEM.md`](../brand/visual-design/AGENT-VISUAL-SYSTEM.md); editorial imagery routes through [`brand/visual-design/EDITORIAL-ILLUSTRATION.md`](../brand/visual-design/EDITORIAL-ILLUSTRATION.md). This contract owns only the package delivery interface.
 
 The approved transparent Nadia master ships at `assets/nadia-solid-surface`.
 

package/dist/css/index.css

@@ -53,6 +53,8 @@
     --nc-canvas: oklch(1.0000 0.0000 0.00);
     --nc-canvas-soft: oklch(0.9851 0.0000 0.00);
     --nc-canvas-soft-2: oklch(0.9702 0.0000 0.00);
+    --nc-material-workspace: oklch(0.9761 0.0000 0.00);
+    --nc-material-solid: oklch(1.0000 0.0000 0.00);
     --nc-line: oklch(0.9219 0.0000 0.00);
     --nc-input: oklch(0.5624 0.0000 0.00);
     --nc-seam: oklch(0.8699 0.0000 0.00);
@@ -112,6 +114,8 @@
     --nc-dark-canvas: oklch(0.0000 0.0000 0.00);
     --nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00);
     --nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00);
+    --nc-dark-material-workspace: oklch(0.0000 0.0000 0.00);
+    --nc-dark-material-solid: oklch(0.0000 0.0000 0.00);
     --nc-dark-ink: oklch(0.9461 0.0000 0.00);
     --nc-dark-body: oklch(0.8297 0.0000 0.00);
     --nc-dark-muted: oklch(0.6500 0.0000 0.00);
@@ -428,16 +432,9 @@
     --nc-type-button-lg-line-height: 24px;
     --nc-type-button-lg-letter-spacing: 0px;
     --nc-material-scrim-opacity: 10%;
-    --nc-material-shadow-tooltip: 0 1px 1px rgb(0 0 0 / 2%), 0 4px 8px rgb(0 0 0 / 4%);
-    --nc-material-shadow-menu:
-      0 1px 1px rgb(0 0 0 / 2%),
-      0 4px 8px -4px rgb(0 0 0 / 4%),
-      0 16px 24px -8px rgb(0 0 0 / 6%);
-    --nc-material-shadow-dialog:
-      0 1px 1px rgb(0 0 0 / 2%),
-      0 8px 16px -4px rgb(0 0 0 / 4%),
-      0 24px 32px -8px rgb(0 0 0 / 6%);
-    --nc-material-shadow-sheet: 0 2px 2px rgb(0 0 0 / 4%), 0 8px 16px -4px rgb(0 0 0 / 4%);
+    --nc-material-glass-opacity: 76%;
+    --nc-material-glass-blur: 28px;
+    --nc-material-glass-saturation: 116%;
   }
 }
 
@@ -447,6 +444,8 @@
     --nc-canvas: var(--nc-dark-canvas);
     --nc-canvas-soft: var(--nc-dark-canvas-soft);
     --nc-canvas-soft-2: var(--nc-dark-canvas-soft-2);
+    --nc-material-workspace: var(--nc-dark-material-workspace);
+    --nc-material-solid: var(--nc-dark-material-solid);
     --nc-ink: var(--nc-dark-ink);
     --nc-body: var(--nc-dark-body);
     --nc-muted: var(--nc-dark-muted);
@@ -510,9 +509,9 @@
     --radius: var(--nc-rounded-md);
     --background: var(--nc-canvas);
     --foreground: var(--nc-ink);
-    --card: var(--nc-canvas);
+    --card: var(--nc-material-solid);
     --card-foreground: var(--nc-ink);
-    --popover: var(--nc-canvas);
+    --popover: var(--nc-material-solid);
     --popover-foreground: var(--nc-ink);
     --primary: var(--nc-action);
     --primary-foreground: var(--nc-action-foreground);
@@ -554,9 +553,9 @@
     --radius: var(--nc-rounded-md);
     --background: var(--nc-dark-canvas);
     --foreground: var(--nc-dark-ink);
-    --card: var(--nc-dark-canvas);
+    --card: var(--nc-dark-material-solid);
     --card-foreground: var(--nc-dark-ink);
-    --popover: var(--nc-dark-canvas);
+    --popover: var(--nc-dark-material-solid);
     --popover-foreground: var(--nc-dark-ink);
     --primary: var(--nc-dark-action);
     --primary-foreground: var(--nc-dark-action-foreground);
@@ -595,7 +594,7 @@
     --sidebar-ring: var(--nc-dark-focus-ring);
   }
   @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-primary-hover: var(--primary-hover); --color-primary-active: var(--primary-active); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-placeholder: var(--placeholder); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-scrim: var(--scrim); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary-hover: var(--sidebar-primary-hover); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); }
-  @theme { --color-nc-primary: oklch(0.5075 0.1338 151.91); --color-nc-on-primary: oklch(1.0000 0.0000 0.00); --color-nc-action: oklch(0.5075 0.1338 151.91); --color-nc-action-foreground: oklch(1.0000 0.0000 0.00); --color-nc-action-hover: oklch(0.4285 0.1117 152.40); --color-nc-action-active: oklch(0.2722 0.0643 157.47); --color-nc-ink: oklch(0.1776 0.0000 0.00); --color-nc-body: oklch(0.3867 0.0000 0.00); --color-nc-muted: oklch(0.5278 0.0000 0.00); --color-nc-canvas: oklch(1.0000 0.0000 0.00); --color-nc-canvas-soft: oklch(0.9851 0.0000 0.00); --color-nc-canvas-soft-2: oklch(0.9702 0.0000 0.00); --color-nc-line: oklch(0.9219 0.0000 0.00); --color-nc-input: oklch(0.5624 0.0000 0.00); --color-nc-seam: oklch(0.8699 0.0000 0.00); --color-nc-cross: oklch(0.6830 0.0000 0.00); --color-nc-focus-ring: oklch(0.4815 0.1209 154.24); --color-nc-scrim: oklch(0.1776 0.0000 0.00); --color-nc-link: oklch(0.4815 0.1209 154.24); --color-nc-link-deep: oklch(0.3852 0.0953 154.99); --color-nc-link-bg-soft: oklch(0.9170 0.0519 161.77); --color-nc-accent: oklch(0.6824 0.2108 37.70); --color-nc-info: oklch(0.5005 0.2804 266.17); --color-nc-info-soft: oklch(0.9457 0.0259 276.40); --color-nc-info-deep: oklch(0.3197 0.1758 266.79); --color-nc-success: oklch(0.6415 0.1644 153.23); --color-nc-success-soft: oklch(0.9170 0.0519 161.77); --color-nc-success-deep: oklch(0.3852 0.0953 154.99); --color-nc-error: oklch(0.5688 0.1995 26.59); --color-nc-error-soft: oklch(0.9522 0.0207 17.52); --color-nc-error-deep: oklch(0.4235 0.1525 27.08); --color-nc-warning: oklch(0.8466 0.1678 84.63); --color-nc-warning-soft: oklch(0.9649 0.0461 90.87); --color-nc-warning-deep: oklch(0.4834 0.0995 82.44); --color-nc-flag-red: oklch(0.5688 0.1995 26.59); --color-nc-selection-bg: oklch(0.1776 0.0000 0.00); --color-nc-selection-fg: oklch(0.9851 0.0000 0.00); --color-nc-navigation-selection-bg: oklch(0.5005 0.2804 266.17); --color-nc-navigation-selection-fg: oklch(1.0000 0.0000 0.00); --color-nc-navigation-selection-hover: oklch(0.4542 0.2521 265.86); --color-nc-state-ready: oklch(0.5278 0.0000 0.00); --color-nc-state-running: oklch(0.5005 0.2804 266.17); --color-nc-state-review: oklch(0.8466 0.1678 84.63); --color-nc-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-background-100: oklch(1.0000 0.0000 0.00); --color-nc-background-200: oklch(0.9851 0.0000 0.00); --color-nc-campo-verde: oklch(0.6415 0.1644 153.23); --color-nc-campo-rosso: oklch(0.5688 0.1995 26.59); --color-nc-campo-arancio: oklch(0.6824 0.2108 37.70); --color-nc-campo-giallo: oklch(0.8466 0.1678 84.63); --color-nc-campo-cobalto: oklch(0.5005 0.2804 266.17); --color-nc-campo-inchiostro: oklch(0.0000 0.0000 0.00); --color-nc-campo-bianco: oklch(1.0000 0.0000 0.00); --color-nc-chart-1: oklch(0.5005 0.2804 266.17); --color-nc-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-chart-3: oklch(0.7638 0.1562 86.86); --color-nc-chart-4: oklch(0.5688 0.1995 26.59); --color-nc-chart-5: oklch(0.6161 0.1062 208.85); --color-nc-chart-6: oklch(0.5015 0.1883 294.99); --color-nc-chart-seq-1: oklch(0.6998 0.1347 269.48); --color-nc-chart-seq-2: oklch(0.5724 0.1897 270.11); --color-nc-chart-seq-3: oklch(0.4725 0.2271 267.41); --color-nc-chart-seq-4: oklch(0.3989 0.1934 267.50); --color-nc-chart-seq-5: oklch(0.3270 0.1487 267.91); --color-nc-chart-div-warm: oklch(0.7592 0.1560 83.30); --color-nc-chart-div-mid: oklch(0.5278 0.0000 0.00); --color-nc-chart-div-cool: oklch(0.5923 0.2215 269.61); --color-nc-dark-canvas: oklch(0.0000 0.0000 0.00); --color-nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00); --color-nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00); --color-nc-dark-ink: oklch(0.9461 0.0000 0.00); --color-nc-dark-body: oklch(0.8297 0.0000 0.00); --color-nc-dark-muted: oklch(0.6500 0.0000 0.00); --color-nc-dark-line: oklch(0.2686 0.0000 0.00); --color-nc-dark-input: oklch(0.5208 0.0000 0.00); --color-nc-dark-seam: oklch(0.2178 0.0000 0.00); --color-nc-dark-primary: oklch(0.7727 0.1753 155.96); --color-nc-dark-on-primary: oklch(0.1448 0.0000 0.00); --color-nc-dark-action: oklch(0.7727 0.1753 155.96); --color-nc-dark-action-foreground: oklch(0.1448 0.0000 0.00); --color-nc-dark-action-hover: oklch(0.7661 0.1498 157.10); --color-nc-dark-action-active: oklch(0.7019 0.1753 153.20); --color-nc-dark-link: oklch(0.7661 0.1498 157.10); --color-nc-dark-link-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-link-bg-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-focus-ring: oklch(0.7661 0.1498 157.10); --color-nc-dark-scrim: oklch(0.9461 0.0000 0.00); --color-nc-dark-error: oklch(0.7955 0.0980 21.02); --color-nc-dark-error-soft: oklch(0.2296 0.0728 26.06); --color-nc-dark-error-deep: oklch(0.8856 0.0534 19.64); --color-nc-dark-warning: oklch(0.8939 0.1387 90.47); --color-nc-dark-warning-soft: oklch(0.3135 0.0643 85.04); --color-nc-dark-warning-deep: oklch(0.9320 0.0896 90.86); --color-nc-dark-info: oklch(0.7067 0.1528 272.08); --color-nc-dark-info-soft: oklch(0.2118 0.1033 268.28); --color-nc-dark-info-deep: oklch(0.8222 0.0888 274.44); --color-nc-dark-cyan: oklch(0.7820 0.1247 190.99); --color-nc-dark-cyan-soft: oklch(0.8646 0.1000 187.55); --color-nc-dark-cyan-deep: oklch(0.6347 0.1029 191.54); --color-nc-dark-success: oklch(0.7019 0.1753 153.20); --color-nc-dark-success-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-success-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-state-ready: oklch(0.5624 0.0000 0.00); --color-nc-dark-state-running: oklch(0.5923 0.2215 269.61); --color-nc-dark-state-review: oklch(0.8466 0.1678 84.63); --color-nc-dark-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-dark-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-dark-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-dark-selection-fg: oklch(0.1448 0.0000 0.00); --color-nc-dark-navigation-selection-bg: oklch(0.4725 0.2271 267.41); --color-nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00); --color-nc-dark-navigation-selection-hover: oklch(0.5162 0.2247 268.31); --color-nc-dark-cross: oklch(0.4495 0.0000 0.00); --color-nc-dark-chart-1: oklch(0.5923 0.2215 269.61); --color-nc-dark-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-dark-chart-3: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-4: oklch(0.6627 0.1685 23.66); --color-nc-dark-chart-5: oklch(0.7820 0.1247 190.99); --color-nc-dark-chart-6: oklch(0.6297 0.1321 299.36); --color-nc-dark-chart-seq-1: oklch(0.5724 0.1897 270.11); --color-nc-dark-chart-seq-2: oklch(0.6998 0.1347 269.48); --color-nc-dark-chart-seq-3: oklch(0.8072 0.0884 269.44); --color-nc-dark-chart-seq-4: oklch(0.8877 0.0514 270.78); --color-nc-dark-chart-seq-5: oklch(0.9619 0.0179 272.31); --color-nc-dark-chart-div-warm: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-div-mid: oklch(0.9219 0.0000 0.00); --color-nc-dark-chart-div-cool: oklch(0.8222 0.0888 274.44); --font-display-xl: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-code: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-button-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-button-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --text-display-xl: 72px; --text-display-xl--line-height: 74px; --leading-display-xl: 74px; --text-display-xl--letter-spacing: -1.5px; --tracking-display-xl: -1.5px; --text-display-xl--font-weight: 600; --font-weight-display-xl: 600; --text-display-lg: 52px; --text-display-lg--line-height: 54px; --leading-display-lg: 54px; --text-display-lg--letter-spacing: -1px; --tracking-display-lg: -1px; --text-display-lg--font-weight: 600; --font-weight-display-lg: 600; --text-display-md: 24px; --text-display-md--line-height: 32px; --leading-display-md: 32px; --text-display-md--letter-spacing: 0px; --tracking-display-md: 0px; --text-display-md--font-weight: 600; --font-weight-display-md: 600; --text-display-sm: 20px; --text-display-sm--line-height: 28px; --leading-display-sm: 28px; --text-display-sm--letter-spacing: 0px; --tracking-display-sm: 0px; --text-display-sm--font-weight: 600; --font-weight-display-sm: 600; --text-title-lg: 40px; --text-title-lg--line-height: 41px; --leading-title-lg: 41px; --text-title-lg--letter-spacing: 0px; --tracking-title-lg: 0px; --text-title-lg--font-weight: 600; --font-weight-title-lg: 600; --text-title-md: 30px; --text-title-md--line-height: 32px; --leading-title-md: 32px; --text-title-md--letter-spacing: 0px; --tracking-title-md: 0px; --text-title-md--font-weight: 600; --font-weight-title-md: 600; --text-title-sm: 22px; --text-title-sm--line-height: 25px; --leading-title-sm: 25px; --text-title-sm--letter-spacing: 0px; --tracking-title-sm: 0px; --text-title-sm--font-weight: 600; --font-weight-title-sm: 600; --text-body-lg: 18px; --text-body-lg--line-height: 27px; --leading-body-lg: 27px; --text-body-lg--letter-spacing: 0px; --tracking-body-lg: 0px; --text-body-lg--font-weight: 400; --font-weight-body-lg: 400; --text-body-md: 16px; --text-body-md--line-height: 25px; --leading-body-md: 25px; --text-body-md--letter-spacing: 0px; --tracking-body-md: 0px; --text-body-md--font-weight: 400; --font-weight-body-md: 400; --text-body-md-strong: 16px; --text-body-md-strong--line-height: 24px; --leading-body-md-strong: 24px; --text-body-md-strong--letter-spacing: 0px; --tracking-body-md-strong: 0px; --text-body-md-strong--font-weight: 500; --font-weight-body-md-strong: 500; --text-body-sm: 14px; --text-body-sm--line-height: 20px; --leading-body-sm: 20px; --text-body-sm--letter-spacing: 0px; --tracking-body-sm: 0px; --text-body-sm--font-weight: 400; --font-weight-body-sm: 400; --text-body-sm-strong: 14px; --text-body-sm-strong--line-height: 20px; --leading-body-sm-strong: 20px; --text-body-sm-strong--letter-spacing: 0px; --tracking-body-sm-strong: 0px; --text-body-sm-strong--font-weight: 500; --font-weight-body-sm-strong: 500; --text-caption: 12px; --text-caption--line-height: 16px; --leading-caption: 16px; --text-caption--letter-spacing: 0px; --tracking-caption: 0px; --text-caption--font-weight: 400; --font-weight-caption: 400; --text-caption-strong: 12px; --text-caption-strong--line-height: 16px; --leading-caption-strong: 16px; --text-caption-strong--letter-spacing: 0px; --tracking-caption-strong: 0px; --text-caption-strong--font-weight: 500; --font-weight-caption-strong: 500; --text-caption-mono: 12px; --text-caption-mono--line-height: 16px; --leading-caption-mono: 16px; --text-caption-mono--letter-spacing: 0px; --tracking-caption-mono: 0px; --text-caption-mono--font-weight: 500; --font-weight-caption-mono: 500; --text-code: 13px; --text-code--line-height: 20px; --leading-code: 20px; --text-code--letter-spacing: 0px; --tracking-code: 0px; --text-code--font-weight: 400; --font-weight-code: 400; --text-button-md: 14px; --text-button-md--line-height: 18px; --leading-button-md: 18px; --text-button-md--letter-spacing: 0px; --tracking-button-md: 0px; --text-button-md--font-weight: 500; --font-weight-button-md: 500; --text-button-lg: 16px; --text-button-lg--line-height: 24px; --leading-button-lg: 24px; --text-button-lg--letter-spacing: 0px; --tracking-button-lg: 0px; --text-button-lg--font-weight: 500; --font-weight-button-lg: 500; --radius-none: 0px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-3xl: 16px; --radius-pill-sm: 64px; --radius-pill: 100px; --radius-full: 9999px; --ring-width-focus: var(--spacing-nadicode-focus-ring-width); --opacity-scrim: var(--nc-material-scrim-opacity); --shadow-tooltip: var(--nc-material-shadow-tooltip); --shadow-menu: var(--nc-material-shadow-menu); --shadow-dialog: var(--nc-material-shadow-dialog); --shadow-sheet: var(--nc-material-shadow-sheet); --spacing-nadicode-xxs: 4px; --spacing-nadicode-filter-chip-gap: 6px; --spacing-nadicode-xs: 8px; --spacing-nadicode-sm: 12px; --spacing-nadicode-md: 16px; --spacing-nadicode-lg: 24px; --spacing-nadicode-xl: 32px; --spacing-nadicode-2xl: 40px; --spacing-nadicode-3xl: 48px; --spacing-nadicode-4xl: 64px; --spacing-nadicode-5xl: 96px; --spacing-nadicode-6xl: 128px; --spacing-nadicode-section: 192px; --spacing-nadicode-guide: 1px; --spacing-nadicode-icon-stroke: 1.6px; --spacing-nadicode-focus-ring-width: 3px; --spacing-nadicode-control-height: 32px; --spacing-nadicode-control-padding-inline: 10px; --spacing-nadicode-touch-target: 44px; --spacing-nadicode-page-pad: 24px; --spacing-nadicode-page-max-mobile: 448px; --spacing-nadicode-page-max-tablet: 624px; --spacing-nadicode-page-max-desktop: 1440px; --spacing-nadicode-frame-max: 1392px; --spacing-nadicode-frame-gap: 24px; --spacing-nadicode-cell-padding: 24px; --spacing-nadicode-section-gap: 48px; --spacing-nadicode-cross-size-mobile: 11px; --spacing-nadicode-cross-size-tablet: 15px; --spacing-nadicode-cross-size-desktop: 21px; --spacing-nadicode-h-strip-mobile: 72px; --spacing-nadicode-h-strip-tablet: 80px; --spacing-nadicode-h-strip-desktop: 88px; --spacing-nadicode-h-cell-sm: 120px; --spacing-nadicode-h-cell-md-mobile: 144px; --spacing-nadicode-h-cell-md-tablet: 160px; --spacing-nadicode-h-cell-md-desktop: 168px; --spacing-nadicode-h-cell-lg-mobile: 220px; --spacing-nadicode-h-cell-lg-desktop: 240px; --spacing-nadicode-h-visual-mobile: 276px; --spacing-nadicode-h-visual-tablet: 318px; --spacing-nadicode-h-visual-desktop: 360px; --spacing-nadicode-h-precision-mobile: 276px; --spacing-nadicode-h-precision-tablet: 480px; --spacing-nadicode-h-precision-desktop: 720px; --spacing-nadicode-h-hero-mobile: 560px; --spacing-nadicode-h-hero-desktop: 720px; --spacing-nadicode-h-action-strip-mobile: 20px; --spacing-nadicode-h-action-strip-desktop: 32px; --spacing-nadicode-h-action-body-mobile: 320px; --spacing-nadicode-h-action-body-tablet: 338px; --spacing-nadicode-h-action-band: 260px; --spacing-nadicode-h-feature-mobile: 360px; --spacing-nadicode-h-feature-tablet: 400px; --spacing-nadicode-h-feature-desktop: 456px; --spacing-nadicode-h-editorial-feature-mobile: 360px; --spacing-nadicode-h-editorial-feature-tablet: 440px; --spacing-nadicode-h-editorial-feature-desktop: 560px; --spacing-nadicode-h-bento-primary: 384px; --spacing-nadicode-h-bento-secondary: 240px; --spacing-nadicode-h-bento-mobile-copy: 248px; --spacing-nadicode-h-bento-mobile-main: 537px; --spacing-nadicode-h-bento-strip: 20px; --spacing-nadicode-filter-chip-height: 28px; --spacing-nadicode-filter-chip-icon: 14px; --spacing-control-height: var(--spacing-nadicode-control-height); --spacing-control-padding-inline: var(--spacing-nadicode-control-padding-inline); --spacing-touch-target: var(--spacing-nadicode-touch-target); }
+  @theme { --color-nc-primary: oklch(0.5075 0.1338 151.91); --color-nc-on-primary: oklch(1.0000 0.0000 0.00); --color-nc-action: oklch(0.5075 0.1338 151.91); --color-nc-action-foreground: oklch(1.0000 0.0000 0.00); --color-nc-action-hover: oklch(0.4285 0.1117 152.40); --color-nc-action-active: oklch(0.2722 0.0643 157.47); --color-nc-ink: oklch(0.1776 0.0000 0.00); --color-nc-body: oklch(0.3867 0.0000 0.00); --color-nc-muted: oklch(0.5278 0.0000 0.00); --color-nc-canvas: oklch(1.0000 0.0000 0.00); --color-nc-canvas-soft: oklch(0.9851 0.0000 0.00); --color-nc-canvas-soft-2: oklch(0.9702 0.0000 0.00); --color-nc-material-workspace: oklch(0.9761 0.0000 0.00); --color-nc-material-solid: oklch(1.0000 0.0000 0.00); --color-nc-line: oklch(0.9219 0.0000 0.00); --color-nc-input: oklch(0.5624 0.0000 0.00); --color-nc-seam: oklch(0.8699 0.0000 0.00); --color-nc-cross: oklch(0.6830 0.0000 0.00); --color-nc-focus-ring: oklch(0.4815 0.1209 154.24); --color-nc-scrim: oklch(0.1776 0.0000 0.00); --color-nc-link: oklch(0.4815 0.1209 154.24); --color-nc-link-deep: oklch(0.3852 0.0953 154.99); --color-nc-link-bg-soft: oklch(0.9170 0.0519 161.77); --color-nc-accent: oklch(0.6824 0.2108 37.70); --color-nc-info: oklch(0.5005 0.2804 266.17); --color-nc-info-soft: oklch(0.9457 0.0259 276.40); --color-nc-info-deep: oklch(0.3197 0.1758 266.79); --color-nc-success: oklch(0.6415 0.1644 153.23); --color-nc-success-soft: oklch(0.9170 0.0519 161.77); --color-nc-success-deep: oklch(0.3852 0.0953 154.99); --color-nc-error: oklch(0.5688 0.1995 26.59); --color-nc-error-soft: oklch(0.9522 0.0207 17.52); --color-nc-error-deep: oklch(0.4235 0.1525 27.08); --color-nc-warning: oklch(0.8466 0.1678 84.63); --color-nc-warning-soft: oklch(0.9649 0.0461 90.87); --color-nc-warning-deep: oklch(0.4834 0.0995 82.44); --color-nc-flag-red: oklch(0.5688 0.1995 26.59); --color-nc-selection-bg: oklch(0.1776 0.0000 0.00); --color-nc-selection-fg: oklch(0.9851 0.0000 0.00); --color-nc-navigation-selection-bg: oklch(0.5005 0.2804 266.17); --color-nc-navigation-selection-fg: oklch(1.0000 0.0000 0.00); --color-nc-navigation-selection-hover: oklch(0.4542 0.2521 265.86); --color-nc-state-ready: oklch(0.5278 0.0000 0.00); --color-nc-state-running: oklch(0.5005 0.2804 266.17); --color-nc-state-review: oklch(0.8466 0.1678 84.63); --color-nc-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-background-100: oklch(1.0000 0.0000 0.00); --color-nc-background-200: oklch(0.9851 0.0000 0.00); --color-nc-campo-verde: oklch(0.6415 0.1644 153.23); --color-nc-campo-rosso: oklch(0.5688 0.1995 26.59); --color-nc-campo-arancio: oklch(0.6824 0.2108 37.70); --color-nc-campo-giallo: oklch(0.8466 0.1678 84.63); --color-nc-campo-cobalto: oklch(0.5005 0.2804 266.17); --color-nc-campo-inchiostro: oklch(0.0000 0.0000 0.00); --color-nc-campo-bianco: oklch(1.0000 0.0000 0.00); --color-nc-chart-1: oklch(0.5005 0.2804 266.17); --color-nc-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-chart-3: oklch(0.7638 0.1562 86.86); --color-nc-chart-4: oklch(0.5688 0.1995 26.59); --color-nc-chart-5: oklch(0.6161 0.1062 208.85); --color-nc-chart-6: oklch(0.5015 0.1883 294.99); --color-nc-chart-seq-1: oklch(0.6998 0.1347 269.48); --color-nc-chart-seq-2: oklch(0.5724 0.1897 270.11); --color-nc-chart-seq-3: oklch(0.4725 0.2271 267.41); --color-nc-chart-seq-4: oklch(0.3989 0.1934 267.50); --color-nc-chart-seq-5: oklch(0.3270 0.1487 267.91); --color-nc-chart-div-warm: oklch(0.7592 0.1560 83.30); --color-nc-chart-div-mid: oklch(0.5278 0.0000 0.00); --color-nc-chart-div-cool: oklch(0.5923 0.2215 269.61); --color-nc-dark-canvas: oklch(0.0000 0.0000 0.00); --color-nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00); --color-nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00); --color-nc-dark-material-workspace: oklch(0.0000 0.0000 0.00); --color-nc-dark-material-solid: oklch(0.0000 0.0000 0.00); --color-nc-dark-ink: oklch(0.9461 0.0000 0.00); --color-nc-dark-body: oklch(0.8297 0.0000 0.00); --color-nc-dark-muted: oklch(0.6500 0.0000 0.00); --color-nc-dark-line: oklch(0.2686 0.0000 0.00); --color-nc-dark-input: oklch(0.5208 0.0000 0.00); --color-nc-dark-seam: oklch(0.2178 0.0000 0.00); --color-nc-dark-primary: oklch(0.7727 0.1753 155.96); --color-nc-dark-on-primary: oklch(0.1448 0.0000 0.00); --color-nc-dark-action: oklch(0.7727 0.1753 155.96); --color-nc-dark-action-foreground: oklch(0.1448 0.0000 0.00); --color-nc-dark-action-hover: oklch(0.7661 0.1498 157.10); --color-nc-dark-action-active: oklch(0.7019 0.1753 153.20); --color-nc-dark-link: oklch(0.7661 0.1498 157.10); --color-nc-dark-link-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-link-bg-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-focus-ring: oklch(0.7661 0.1498 157.10); --color-nc-dark-scrim: oklch(0.9461 0.0000 0.00); --color-nc-dark-error: oklch(0.7955 0.0980 21.02); --color-nc-dark-error-soft: oklch(0.2296 0.0728 26.06); --color-nc-dark-error-deep: oklch(0.8856 0.0534 19.64); --color-nc-dark-warning: oklch(0.8939 0.1387 90.47); --color-nc-dark-warning-soft: oklch(0.3135 0.0643 85.04); --color-nc-dark-warning-deep: oklch(0.9320 0.0896 90.86); --color-nc-dark-info: oklch(0.7067 0.1528 272.08); --color-nc-dark-info-soft: oklch(0.2118 0.1033 268.28); --color-nc-dark-info-deep: oklch(0.8222 0.0888 274.44); --color-nc-dark-cyan: oklch(0.7820 0.1247 190.99); --color-nc-dark-cyan-soft: oklch(0.8646 0.1000 187.55); --color-nc-dark-cyan-deep: oklch(0.6347 0.1029 191.54); --color-nc-dark-success: oklch(0.7019 0.1753 153.20); --color-nc-dark-success-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-success-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-state-ready: oklch(0.5624 0.0000 0.00); --color-nc-dark-state-running: oklch(0.5923 0.2215 269.61); --color-nc-dark-state-review: oklch(0.8466 0.1678 84.63); --color-nc-dark-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-dark-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-dark-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-dark-selection-fg: oklch(0.1448 0.0000 0.00); --color-nc-dark-navigation-selection-bg: oklch(0.4725 0.2271 267.41); --color-nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00); --color-nc-dark-navigation-selection-hover: oklch(0.5162 0.2247 268.31); --color-nc-dark-cross: oklch(0.4495 0.0000 0.00); --color-nc-dark-chart-1: oklch(0.5923 0.2215 269.61); --color-nc-dark-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-dark-chart-3: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-4: oklch(0.6627 0.1685 23.66); --color-nc-dark-chart-5: oklch(0.7820 0.1247 190.99); --color-nc-dark-chart-6: oklch(0.6297 0.1321 299.36); --color-nc-dark-chart-seq-1: oklch(0.5724 0.1897 270.11); --color-nc-dark-chart-seq-2: oklch(0.6998 0.1347 269.48); --color-nc-dark-chart-seq-3: oklch(0.8072 0.0884 269.44); --color-nc-dark-chart-seq-4: oklch(0.8877 0.0514 270.78); --color-nc-dark-chart-seq-5: oklch(0.9619 0.0179 272.31); --color-nc-dark-chart-div-warm: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-div-mid: oklch(0.9219 0.0000 0.00); --color-nc-dark-chart-div-cool: oklch(0.8222 0.0888 274.44); --font-display-xl: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-code: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-button-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-button-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --text-display-xl: 72px; --text-display-xl--line-height: 74px; --leading-display-xl: 74px; --text-display-xl--letter-spacing: -1.5px; --tracking-display-xl: -1.5px; --text-display-xl--font-weight: 600; --font-weight-display-xl: 600; --text-display-lg: 52px; --text-display-lg--line-height: 54px; --leading-display-lg: 54px; --text-display-lg--letter-spacing: -1px; --tracking-display-lg: -1px; --text-display-lg--font-weight: 600; --font-weight-display-lg: 600; --text-display-md: 24px; --text-display-md--line-height: 32px; --leading-display-md: 32px; --text-display-md--letter-spacing: 0px; --tracking-display-md: 0px; --text-display-md--font-weight: 600; --font-weight-display-md: 600; --text-display-sm: 20px; --text-display-sm--line-height: 28px; --leading-display-sm: 28px; --text-display-sm--letter-spacing: 0px; --tracking-display-sm: 0px; --text-display-sm--font-weight: 600; --font-weight-display-sm: 600; --text-title-lg: 40px; --text-title-lg--line-height: 41px; --leading-title-lg: 41px; --text-title-lg--letter-spacing: 0px; --tracking-title-lg: 0px; --text-title-lg--font-weight: 600; --font-weight-title-lg: 600; --text-title-md: 30px; --text-title-md--line-height: 32px; --leading-title-md: 32px; --text-title-md--letter-spacing: 0px; --tracking-title-md: 0px; --text-title-md--font-weight: 600; --font-weight-title-md: 600; --text-title-sm: 22px; --text-title-sm--line-height: 25px; --leading-title-sm: 25px; --text-title-sm--letter-spacing: 0px; --tracking-title-sm: 0px; --text-title-sm--font-weight: 600; --font-weight-title-sm: 600; --text-body-lg: 18px; --text-body-lg--line-height: 27px; --leading-body-lg: 27px; --text-body-lg--letter-spacing: 0px; --tracking-body-lg: 0px; --text-body-lg--font-weight: 400; --font-weight-body-lg: 400; --text-body-md: 16px; --text-body-md--line-height: 25px; --leading-body-md: 25px; --text-body-md--letter-spacing: 0px; --tracking-body-md: 0px; --text-body-md--font-weight: 400; --font-weight-body-md: 400; --text-body-md-strong: 16px; --text-body-md-strong--line-height: 24px; --leading-body-md-strong: 24px; --text-body-md-strong--letter-spacing: 0px; --tracking-body-md-strong: 0px; --text-body-md-strong--font-weight: 500; --font-weight-body-md-strong: 500; --text-body-sm: 14px; --text-body-sm--line-height: 20px; --leading-body-sm: 20px; --text-body-sm--letter-spacing: 0px; --tracking-body-sm: 0px; --text-body-sm--font-weight: 400; --font-weight-body-sm: 400; --text-body-sm-strong: 14px; --text-body-sm-strong--line-height: 20px; --leading-body-sm-strong: 20px; --text-body-sm-strong--letter-spacing: 0px; --tracking-body-sm-strong: 0px; --text-body-sm-strong--font-weight: 500; --font-weight-body-sm-strong: 500; --text-caption: 12px; --text-caption--line-height: 16px; --leading-caption: 16px; --text-caption--letter-spacing: 0px; --tracking-caption: 0px; --text-caption--font-weight: 400; --font-weight-caption: 400; --text-caption-strong: 12px; --text-caption-strong--line-height: 16px; --leading-caption-strong: 16px; --text-caption-strong--letter-spacing: 0px; --tracking-caption-strong: 0px; --text-caption-strong--font-weight: 500; --font-weight-caption-strong: 500; --text-caption-mono: 12px; --text-caption-mono--line-height: 16px; --leading-caption-mono: 16px; --text-caption-mono--letter-spacing: 0px; --tracking-caption-mono: 0px; --text-caption-mono--font-weight: 500; --font-weight-caption-mono: 500; --text-code: 13px; --text-code--line-height: 20px; --leading-code: 20px; --text-code--letter-spacing: 0px; --tracking-code: 0px; --text-code--font-weight: 400; --font-weight-code: 400; --text-button-md: 14px; --text-button-md--line-height: 18px; --leading-button-md: 18px; --text-button-md--letter-spacing: 0px; --tracking-button-md: 0px; --text-button-md--font-weight: 500; --font-weight-button-md: 500; --text-button-lg: 16px; --text-button-lg--line-height: 24px; --leading-button-lg: 24px; --text-button-lg--letter-spacing: 0px; --tracking-button-lg: 0px; --text-button-lg--font-weight: 500; --font-weight-button-lg: 500; --radius-none: 0px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-3xl: 16px; --radius-pill-sm: 64px; --radius-pill: 100px; --radius-full: 9999px; --ring-width-focus: var(--spacing-nadicode-focus-ring-width); --opacity-scrim: var(--nc-material-scrim-opacity); --spacing-nadicode-xxs: 4px; --spacing-nadicode-filter-chip-gap: 6px; --spacing-nadicode-xs: 8px; --spacing-nadicode-sm: 12px; --spacing-nadicode-md: 16px; --spacing-nadicode-lg: 24px; --spacing-nadicode-xl: 32px; --spacing-nadicode-2xl: 40px; --spacing-nadicode-3xl: 48px; --spacing-nadicode-4xl: 64px; --spacing-nadicode-5xl: 96px; --spacing-nadicode-6xl: 128px; --spacing-nadicode-section: 192px; --spacing-nadicode-guide: 1px; --spacing-nadicode-icon-stroke: 1.6px; --spacing-nadicode-focus-ring-width: 3px; --spacing-nadicode-control-height: 32px; --spacing-nadicode-control-padding-inline: 10px; --spacing-nadicode-touch-target: 44px; --spacing-nadicode-page-pad: 24px; --spacing-nadicode-page-max-mobile: 448px; --spacing-nadicode-page-max-tablet: 624px; --spacing-nadicode-page-max-desktop: 1440px; --spacing-nadicode-frame-max: 1392px; --spacing-nadicode-frame-gap: 24px; --spacing-nadicode-cell-padding: 24px; --spacing-nadicode-section-gap: 48px; --spacing-nadicode-cross-size-mobile: 11px; --spacing-nadicode-cross-size-tablet: 15px; --spacing-nadicode-cross-size-desktop: 21px; --spacing-nadicode-h-strip-mobile: 72px; --spacing-nadicode-h-strip-tablet: 80px; --spacing-nadicode-h-strip-desktop: 88px; --spacing-nadicode-h-cell-sm: 120px; --spacing-nadicode-h-cell-md-mobile: 144px; --spacing-nadicode-h-cell-md-tablet: 160px; --spacing-nadicode-h-cell-md-desktop: 168px; --spacing-nadicode-h-cell-lg-mobile: 220px; --spacing-nadicode-h-cell-lg-desktop: 240px; --spacing-nadicode-h-visual-mobile: 276px; --spacing-nadicode-h-visual-tablet: 318px; --spacing-nadicode-h-visual-desktop: 360px; --spacing-nadicode-h-precision-mobile: 276px; --spacing-nadicode-h-precision-tablet: 480px; --spacing-nadicode-h-precision-desktop: 720px; --spacing-nadicode-h-hero-mobile: 560px; --spacing-nadicode-h-hero-desktop: 720px; --spacing-nadicode-h-action-strip-mobile: 20px; --spacing-nadicode-h-action-strip-desktop: 32px; --spacing-nadicode-h-action-body-mobile: 320px; --spacing-nadicode-h-action-body-tablet: 338px; --spacing-nadicode-h-action-band: 260px; --spacing-nadicode-h-feature-mobile: 360px; --spacing-nadicode-h-feature-tablet: 400px; --spacing-nadicode-h-feature-desktop: 456px; --spacing-nadicode-h-editorial-feature-mobile: 360px; --spacing-nadicode-h-editorial-feature-tablet: 440px; --spacing-nadicode-h-editorial-feature-desktop: 560px; --spacing-nadicode-h-bento-primary: 384px; --spacing-nadicode-h-bento-secondary: 240px; --spacing-nadicode-h-bento-mobile-copy: 248px; --spacing-nadicode-h-bento-mobile-main: 537px; --spacing-nadicode-h-bento-strip: 20px; --spacing-nadicode-filter-chip-height: 28px; --spacing-nadicode-filter-chip-icon: 14px; --spacing-control-height: var(--spacing-nadicode-control-height); --spacing-control-padding-inline: var(--spacing-nadicode-control-padding-inline); --spacing-touch-target: var(--spacing-nadicode-touch-target); }
 }
 
 /* src/css/reset.css */
@@ -1662,97 +1661,6 @@
   }
 }
 
-/* src/css/components/state-tag.css */
-@layer components {
-  .nc-state-tag {
-    display: inline-flex;
-    align-items: center;
-    height: 26px;
-    padding: 0 8px;
-    border: var(--nc-guide) solid var(--nc-line);
-    border-left-width: 3px;
-    border-left-color: var(--nc-ink);
-    border-radius: var(--nc-rounded-sm);
-    background: var(--nc-canvas);
-    color: var(--nc-ink);
-    font-family:
-      "Geist Mono",
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      monospace;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 16px;
-    letter-spacing: 0;
-    white-space: nowrap;
-    transition:
-      background-color var(--nc-duration-confirm) var(--nc-ease-out-strong),
-      border-color var(--nc-duration-confirm) var(--nc-ease-out-strong),
-      color var(--nc-duration-confirm) var(--nc-ease-out-strong);
-  }
-  .nc-state-tag[data-variant=ready] {
-    border-left-color: var(--nc-state-ready);
-  }
-  .nc-state-tag[data-variant=running] {
-    border-left-color: var(--nc-state-running);
-  }
-  .nc-state-tag[data-variant=review] {
-    border-left-color: var(--nc-state-review);
-  }
-  .nc-state-tag[data-variant=blocked] {
-    border-left-color: var(--nc-state-blocked);
-  }
-  .nc-state-tag[data-variant=complete] {
-    border-left-color: var(--nc-state-complete);
-  }
-}
-
-/* src/css/components/status-tag.css */
-@layer components {
-  .nc-status-tag {
-    display: inline-flex;
-    align-items: center;
-    height: 24px;
-    padding: 0 10px;
-    border: 0;
-    border-radius: var(--nc-rounded-md);
-    font-family:
-      Geist,
-      Inter,
-      system-ui,
-      -apple-system,
-      sans-serif;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 16px;
-    letter-spacing: 0;
-    white-space: nowrap;
-    transition: background-color var(--nc-duration-confirm) var(--nc-ease-out-strong), color var(--nc-duration-confirm) var(--nc-ease-out-strong);
-  }
-  .nc-status-tag[data-tone=gray] {
-    background: var(--nc-canvas-soft-2);
-    color: var(--nc-body);
-  }
-  .nc-status-tag[data-tone=green] {
-    background: var(--nc-link-bg-soft);
-    color: var(--nc-link-deep);
-  }
-  .nc-status-tag[data-tone=red] {
-    background: var(--nc-error-soft);
-    color: var(--nc-error-deep);
-  }
-  .nc-status-tag[data-tone=amber] {
-    background: var(--nc-warning-soft);
-    color: var(--nc-warning-deep);
-  }
-  .nc-status-tag[data-tone=blue] {
-    background: var(--nc-info-soft);
-    color: var(--nc-info-deep);
-  }
-}
-
 /* src/css/components/memory-item.css */
 @layer components {
   .nc-memory-item {
@@ -1832,64 +1740,6 @@
   }
 }
 
-/* src/css/components/state-row.css */
-@layer components {
-  .nc-state-row {
-    align-self: stretch;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 3px 0;
-    font-family:
-      "Geist Mono",
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      monospace;
-    font-size: 11px;
-    line-height: 16px;
-    color: var(--nc-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-  }
-  .nc-state-row::before,
-  .nc-state-row::after {
-    content: "";
-    flex: 1;
-    height: var(--nc-guide);
-    background: var(--nc-line);
-  }
-  .nc-state-row-label {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    white-space: nowrap;
-  }
-  .nc-state-row-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: var(--nc-rounded-full);
-    color: var(--nc-state-running);
-    background: currentColor;
-  }
-  .nc-state-row[data-kind=ready] .nc-state-row-dot {
-    color: var(--nc-state-ready);
-  }
-  .nc-state-row[data-kind=running] .nc-state-row-dot {
-    color: var(--nc-state-running);
-  }
-  .nc-state-row[data-kind=review] .nc-state-row-dot {
-    color: var(--nc-state-review);
-  }
-  .nc-state-row[data-kind=blocked] .nc-state-row-dot {
-    color: var(--nc-state-blocked);
-  }
-  .nc-state-row[data-kind=complete] .nc-state-row-dot {
-    color: var(--nc-state-complete);
-  }
-}
-
 /* src/css/components/usage-meter.css */
 @layer components {
   .nc-usage-meter {
@@ -2000,7 +1850,7 @@
     border-radius: var(--nc-rounded-full);
     background: var(--nc-canvas);
     box-shadow: 0 0 0 var(--nc-guide) var(--nc-line);
-    color: var(--nc-state-ready);
+    color: var(--nc-muted);
   }
   .nc-run-timeline-node::before {
     content: "";
@@ -2043,36 +1893,6 @@
     line-height: 18px;
     color: var(--nc-body);
   }
-  .nc-run-timeline-step[data-state=ready] .nc-run-timeline-node {
-    color: var(--nc-state-ready);
-  }
-  .nc-run-timeline-step[data-state=ready] .nc-run-timeline-content {
-    border-left-color: var(--nc-state-ready);
-  }
-  .nc-run-timeline-step[data-state=running] .nc-run-timeline-node {
-    color: var(--nc-state-running);
-  }
-  .nc-run-timeline-step[data-state=running] .nc-run-timeline-content {
-    border-left-color: var(--nc-state-running);
-  }
-  .nc-run-timeline-step[data-state=review] .nc-run-timeline-node {
-    color: var(--nc-state-review);
-  }
-  .nc-run-timeline-step[data-state=review] .nc-run-timeline-content {
-    border-left-color: var(--nc-state-review);
-  }
-  .nc-run-timeline-step[data-state=blocked] .nc-run-timeline-node {
-    color: var(--nc-state-blocked);
-  }
-  .nc-run-timeline-step[data-state=blocked] .nc-run-timeline-content {
-    border-left-color: var(--nc-state-blocked);
-  }
-  .nc-run-timeline-step[data-state=complete] .nc-run-timeline-node {
-    color: var(--nc-state-complete);
-  }
-  .nc-run-timeline-step[data-state=complete] .nc-run-timeline-content {
-    border-left-color: var(--nc-state-complete);
-  }
 }
 
 /* src/css/components/image.css */

package/dist/tailwind/nadicode.tailwind.json

@@ -14,6 +14,8 @@
         "canvas": "#ffffff",
         "canvas-soft": "#fafafa",
         "canvas-soft-2": "#f5f5f5",
+        "material-workspace": "#f7f7f7",
+        "material-solid": "#ffffff",
         "line": "#e5e5e5",
         "input": "#757575",
         "seam": "#d4d4d4",
@@ -73,6 +75,8 @@
         "dark-canvas": "#000000",
         "dark-canvas-soft": "#111111",
         "dark-canvas-soft-2": "#1a1a1a",
+        "dark-material-workspace": "#000000",
+        "dark-material-solid": "#000000",
         "dark-ink": "#ededed",
         "dark-body": "#c7c7c7",
         "dark-muted": "#8f8f8f",

package/dist/tokens/nadicode.dtcg.json

@@ -136,6 +136,28 @@
           "hex": "#f5f5f5"
         }
       },
+      "material-workspace": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.969,
+            0.969,
+            0.969
+          ],
+          "hex": "#f7f7f7"
+        }
+      },
+      "material-solid": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            1,
+            1,
+            1
+          ],
+          "hex": "#ffffff"
+        }
+      },
       "line": {
         "$value": {
           "colorSpace": "srgb",
@@ -785,6 +807,28 @@
           "hex": "#1a1a1a"
         }
       },
+      "dark-material-workspace": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0,
+            0,
+            0
+          ],
+          "hex": "#000000"
+        }
+      },
+      "dark-material-solid": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0,
+            0,
+            0
+          ],
+          "hex": "#000000"
+        }
+      },
       "dark-ink": {
         "$value": {
           "colorSpace": "srgb",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "0.22.0",
+  "version": "1.0.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -154,6 +154,8 @@
     "lint:design": "design.md lint DESIGN.md",
     "lint": "eslint --max-warnings=0",
     "typecheck": "tsc -p tsconfig.json",
+    "check": "npm run lint:design && npm run lint && npm run typecheck",
+    "check:static": "npm run check",
     "test": "vitest run",
     "test:visual": "playwright test --config playwright.visual.config.ts",
     "prepublishOnly": "npm run build"