@nadicodeai/design-system 0.6.0 → 0.7.0

package/AGENTS.md

@@ -14,7 +14,7 @@ Plain imperatives are the default. The few hard prohibitions below use `never`/`
 - Preserve approved `DESIGN.md` token and component families unless the user explicitly approves a palette/component migration. Website/kernel CSS is implementation evidence, not the complete palette authority; never delete tokens because current prototypes do not use them or because `@google/design.md lint` reports them as unused.
 - Name implemented grids, components, modules, and page elements as NadicodeAI-owned primitives; source brands such as Vercel or Attio may appear only in reference notes, never in component names, CSS comments, `data-module` values, or public-facing contracts.
 - Calculate page grids, module spans, seams, borders, and element placement from explicit grid math; never hand-place visual structure by eye.
-- Author CSS-bundle work as a reusable design-system component architecture first, not as showcase/page-specific code. The design-system CSS lives in `src/css/` (`tokens.generated` [built from `DESIGN.md`] + `tokens.local` [hand-authored] / `reset`/`foundation`/`motion`/`layout`/`primitives` + `components/*`, mirrored to `dist/css/` and exported as `@nadicodeai/design-system/css`). Since the Tailwind+shadcn migration (ADR 0007) the bundle ships only framework-agnostic brand/display CSS components: the cascade is `@layer tokens, reset, foundation, motion, layout, primitives, components;` (no `sections` layer), and `components/*` holds the agent-chat CSS component family, the run-state `state-tag` family, and `image` — the generic marketing/SaaS component CSS and the whole `sections/*` layer retired to React shadcn components in `@nadicodeai/ui`. The delivery tiers map to real authoring homes: tokens → `tokens.generated`/`tokens.local`; page grammar → `layout.css`; CSS primitives/components → `primitives.css` + `components/*`; specimens → `examples/`. Contracted CSS components are paired with `DESIGN.md components:` entries; the three named CSS-internal components are deliberate no-token exceptions. Pages, site-specific page assemblies, and the standard/interactive/section UI belong to consuming surfaces (`../website/`, `../portal/`, sibling Nadia apps) and to the React package (`@nadicodeai/ui`), not this package. Study current source HTML/CSS for approved external references before implementing similar NadicodeAI primitives, then adapt the structure into NadicodeAI-owned tokens, primitives, and components. Specimen HTML demonstrates only already-defined primitives/components; it never invents component geometry, seams, borders, fillers, heights, or responsive behavior inline. The generated token layer (`tokens.generated.css`) and the Tailwind adapter (`nadicode.theme.css`) are emitted by Style Dictionary (`scripts/sd/`, driven from `scripts/build.ts`) as a complete projection of the `@google/design.md` export — never an allowlist or subset; responsive `@media` switching and composed/`calc` vars live in `layout.css`/`tokens.local.css` and reference emitted `--nc-*` tokens only, while the `.nc-type-*` utility classes live in `foundation.css`. Emitted-but-unreferenced tokens are intentional (the contract drives emission, not consumption), and the generated Tailwind adapter owns standard shadcn role maps for both `:root` and `.dark` using generated `--color-*`/`--radius-*` references, plus a small set of `--nc-*` remaps in the `.dark` block (the `state-*`, `selection-*`, and `cross` families → their `--nc-dark-*` counterparts) so design-system CSS components that read those raw brand tokens directly flip on the dark console; `@nadicodeai/ui/globals.css` keeps the Tailwind role bridge plus UI-local product aliases. Correctness is enforced by export-derived structural parity (`tests/guards/token-structural-parity.test.ts` for the `--nc-*` layer; the per-token `@theme` value loops and light/dark role-integrity checks in `tests/guards/tailwind-v4-theme.test.ts` for the adapter), the narrowed two-way parity between `DESIGN.md` component YAML/prose and the retained CSS component surface (`tests/guards/components-yaml-matches-css.test.ts`, ADR 0007 D4), plus consumer discipline (`tests/guards/consumer-css-discipline.test.ts`), not a byte snapshot (ADR 0006 supersedes ADR 0005 D1–D3/D5; ADR 0008 supersedes ADR 0005 D4).
+- Author CSS-bundle work as a reusable design-system component architecture first, not as showcase/page-specific code. The design-system CSS lives in `src/css/` (`tokens.generated` [built from `DESIGN.md`] + `tokens.local` [hand-authored] / `reset`/`foundation`/`motion`/`layout`/`primitives` + `components/*`, mirrored to `dist/css/` and exported as `@nadicodeai/design-system/css`). Since the Tailwind+shadcn migration (ADR 0007) the bundle ships only framework-agnostic brand/display CSS components: the cascade is `@layer tokens, reset, foundation, motion, layout, primitives, components;` (no `sections` layer), and `components/*` holds the agent-chat CSS component family, the run-state `state-tag` family, the entity-status `status-tag` family, and `image` — the generic marketing/SaaS component CSS and the whole `sections/*` layer retired to React shadcn components in `@nadicodeai/ui`. The delivery tiers map to real authoring homes: tokens → `tokens.generated`/`tokens.local`; page grammar → `layout.css`; CSS primitives/components → `primitives.css` + `components/*`; specimens → `examples/`. Contracted CSS components are paired with `DESIGN.md components:` entries; the three named CSS-internal components are deliberate no-token exceptions. Pages, site-specific page assemblies, and the standard/interactive/section UI belong to consuming surfaces (`../website/`, `../portal/`, sibling Nadia apps) and to the React package (`@nadicodeai/ui`), not this package. Study current source HTML/CSS for approved external references before implementing similar NadicodeAI primitives, then adapt the structure into NadicodeAI-owned tokens, primitives, and components. Specimen HTML demonstrates only already-defined primitives/components; it never invents component geometry, seams, borders, fillers, heights, or responsive behavior inline. The generated token layer (`tokens.generated.css`) and the Tailwind adapter (`nadicode.theme.css`) are emitted by Style Dictionary (`scripts/sd/`, driven from `scripts/build.ts`) as a complete projection of the `@google/design.md` export — never an allowlist or subset; responsive `@media` switching and composed/`calc` vars live in `layout.css`/`tokens.local.css` and reference emitted `--nc-*` tokens only, while the `.nc-type-*` utility classes live in `foundation.css`. Emitted-but-unreferenced tokens are intentional (the contract drives emission, not consumption), and the generated Tailwind adapter owns standard shadcn role maps for both `:root` and `.dark` using generated `--color-*`/`--radius-*` references, plus a small set of `--nc-*` remaps in the `.dark` block (the `state-*`, `selection-*`, and `cross` families → their `--nc-dark-*` counterparts) so design-system CSS components that read those raw brand tokens directly flip on the dark console; `@nadicodeai/ui/globals.css` keeps the Tailwind role bridge plus UI-local product aliases. Correctness is enforced by export-derived structural parity (`tests/guards/token-structural-parity.test.ts` for the `--nc-*` layer; the per-token `@theme` value loops and light/dark role-integrity checks in `tests/guards/tailwind-v4-theme.test.ts` for the adapter), the narrowed two-way parity between `DESIGN.md` component YAML/prose and the retained CSS component surface (`tests/guards/components-yaml-matches-css.test.ts`, ADR 0007 D4), plus consumer discipline (`tests/guards/consumer-css-discipline.test.ts`), not a byte snapshot (ADR 0006 supersedes ADR 0005 D1–D3/D5; ADR 0008 supersedes ADR 0005 D4).
 - Follow a source-first reference workflow for external visual references: inspect live/source DOM, stylesheet/CSSOM rules, inline styles, custom properties, computed styles, grid tracks, spans, seam ownership, colors, heights, and breakpoints before writing NadicodeAI code. Screenshots are verification evidence only after implementation; never use them as the source for authoring structure, geometry, or CSS.
 - Never derive reusable kernel geometry from screenshots, eyeballing, one-off browser coordinates, or local patch experiments. Browser measurements may verify an implementation after the source CSS/DOM model is understood, but they do not replace reading the source rules that create the behavior.
 - Map every imported visual behavior to either `DESIGN.md`, an existing kernel token/primitive, or an explicit user-approved change before implementation. If the reference leaves a required decision open, or if `DESIGN.md` does not decide it, ask before coding the missing decision, including height/row span, surface color, visual payload, content slots, crosshair placement, and responsive behavior.

package/DESIGN.md

@@ -251,6 +251,12 @@ typography:
     fontWeight: 400
     lineHeight: 16px
     letterSpacing: 0px
+  caption-strong:
+    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
+    fontSize: 12px
+    fontWeight: 500
+    lineHeight: 16px
+    letterSpacing: 0px
   caption-mono:
     fontFamily: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace
     fontSize: 12px
@@ -364,20 +370,41 @@ components:
     backgroundColor: "{colors.canvas}"
     textColor: "{colors.ink}"
     padding: "{spacing.lg}"
-  status-tag:
-    backgroundColor: "{colors.canvas-soft}"
-    textColor: "{colors.body}"
-    typography: "{typography.caption-mono}"
-    rounded: "{rounded.sm}"
-    padding: "5px 9px"
-    height: 28px
-  status-tag-approved:
-    backgroundColor: "{colors.link-bg-soft}"
-    textColor: "{colors.link-deep}"
-    typography: "{typography.caption-mono}"
-    rounded: "{rounded.sm}"
-    padding: "5px 9px"
-    height: 28px
+  status-tag-gray:
+    backgroundColor: "{colors.gray-200}"
+    textColor: "{colors.gray-900}"
+    typography: "{typography.caption-strong}"
+    rounded: "{rounded.md}"
+    padding: "0px 10px"
+    height: 24px
+  status-tag-green:
+    backgroundColor: "{colors.green-italia-200}"
+    textColor: "{colors.green-italia-900}"
+    typography: "{typography.caption-strong}"
+    rounded: "{rounded.md}"
+    padding: "0px 10px"
+    height: 24px
+  status-tag-red:
+    backgroundColor: "{colors.red-italia-200}"
+    textColor: "{colors.red-italia-900}"
+    typography: "{typography.caption-strong}"
+    rounded: "{rounded.md}"
+    padding: "0px 10px"
+    height: 24px
+  status-tag-amber:
+    backgroundColor: "{colors.amber-200}"
+    textColor: "{colors.amber-900}"
+    typography: "{typography.caption-strong}"
+    rounded: "{rounded.md}"
+    padding: "0px 10px"
+    height: 24px
+  status-tag-blue:
+    backgroundColor: "{colors.blue-cobalto-200}"
+    textColor: "{colors.blue-cobalto-900}"
+    typography: "{typography.caption-strong}"
+    rounded: "{rounded.md}"
+    padding: "0px 10px"
+    height: 24px
   image:
     backgroundColor: "{colors.canvas-soft}"
     textColor: "{colors.body}"
@@ -531,7 +558,7 @@ Backgrounds are `{colors.background-100}` (page default, white) and `{colors.bac
 - **Semantic feedback** (`{colors.success}`, `{colors.error}` + `{colors.error-soft}`/`{colors.error-deep}`, `{colors.warning}` + `{colors.warning-soft}`/`{colors.warning-deep}`, `{colors.info}`): validation, caution, approval, and operational feedback. `success` uses `green-italia-700`; `error` uses `red-italia-800` with soft/deep on `red-italia-200`/`red-italia-900`; `warning` uses `amber-600` with soft/deep on `amber-200`/`amber-900`; `info` (`blue-cobalto-700`) is the new informational role.
 - **Accent** (`{colors.accent}` = `red-italia-700`): UI highlights, badges, and selected markers. Flag red is now an active accent — the former "decoration-only" restriction on flag red is retired. Do not conflate this functional Italia `accent` with the identically-named shadcn surface role `accent`: the latter is a neutral (mapped to `{colors.canvas-soft-2}` in light and `{colors.dark-canvas-soft-2}` in dark) and carries no flag-red hue despite the shared word.
 - **Flag Red** (`{colors.flag-red}`): kept as a stable alias at the same value as `{colors.accent}` (`red-italia-700`, `#cd212a`). `accent` and `flag-red` are two roles at one hex: `accent` is the interface-highlight role, `flag-red` is the identity-mark alias. `error` (`red-italia-800`) stays a distinct, deeper red; never use it as an accent.
-- **Workflow States** (`{colors.state-ready}`, `{colors.state-running}`, `{colors.state-review}`, `{colors.state-blocked}`, `{colors.state-complete}`): the left-border/state vocabulary for agentic work surfaces. `state-running` is `blue-cobalto-700` and `state-complete` is `green-italia-700` — blue means in motion, green means done; `state-ready` is `gray-900`. The dark counterparts (`{colors.dark-state-ready}`, `{colors.dark-state-running}`, `{colors.dark-state-review}`, `{colors.dark-state-blocked}`, `{colors.dark-state-complete}`) preserve the same functional identity instead of shifting to pastel labels: ready uses `gray-700`, running uses `blue-cobalto-600`, review reuses `amber-600`, blocked uses `red-italia-700`, and complete reuses `green-italia-700`. These state colors 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 light and dark.
+- **Workflow States** (`{colors.state-ready}`, `{colors.state-running}`, `{colors.state-review}`, `{colors.state-blocked}`, `{colors.state-complete}`): the left-border/state vocabulary for agentic work surfaces. `state-running` is `blue-cobalto-700` and `state-complete` is `green-italia-700` — blue means in motion, green means done; `state-ready` is `gray-900`. The dark counterparts (`{colors.dark-state-ready}`, `{colors.dark-state-running}`, `{colors.dark-state-review}`, `{colors.dark-state-blocked}`, `{colors.dark-state-complete}`) preserve the same functional identity instead of shifting to pastel labels: ready uses `gray-700`, running uses `blue-cobalto-600`, review reuses `amber-600`, blocked uses `red-italia-700`, and complete reuses `green-italia-700`. These state colors 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 light and dark. 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 ramp pairs (see `## Components`), and the two token sets never cross.
 
 ### Chart categoricals (functional tier)
 
@@ -594,7 +621,7 @@ Do not delete a color because the current website kernel does not consume it. Pr
 
 ## Typography
 
-Geist Sans carries all narrative and interface copy. Geist Mono is reserved for eyebrows, labels, status tags, code, traces, and small technical metadata.
+Geist Sans carries all narrative and interface copy, including the entity-status `status-tag` family. Geist Mono is reserved for eyebrows, labels, run-state `state-tag` labels, code, traces, and small technical metadata.
 
 All body, title, caption, and code typography uses `letterSpacing: 0px`. Do not use viewport-scaled type (no `vw`/`vh` font sizing): use fixed token sizes stepped by breakpoint-specific rules when a headline must grow. The two large display tiers carry a small negative tracking — `display-xl` at `-1.5px` and `display-lg` at `-1px` — so large type reads optically tight; this is a display-heading-only exception and every non-display tier stays at `0px`.
 
@@ -613,7 +640,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-mono}`   | 12px | 500    | 16px        | Eyebrows, labels, status tags.                                             |
+| `{typography.caption-strong}` | 12px | 500    | 16px        | Entity-status `status-tag` labels.                                         |
+| `{typography.caption-mono}`   | 12px | 500    | 16px        | Eyebrows, labels, run-state `state-tag` labels.                            |
 | `{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.                                        |
@@ -656,7 +684,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 (the agent-chat family, the run-state `state-tag` family, `image`, and the small label/badge/link metadata components). Contracted CSS components are paired between `components:` YAML entries and `## Components` Markdown entries, and are realised by design-system CSS. The named CSS-internal components (`artifact-preview`, `typing-dots`, `state-row`) are documented exceptions: they realise brand display structure but carry no exported component token.
+- **Framework-agnostic CSS components** — the brand/display CSS components that remain in this package (the agent-chat family, the run-state `state-tag` family, the entity-status `status-tag` family, `image`, and the small label/badge/link metadata components). Contracted CSS components are paired between `components:` YAML entries and `## Components` Markdown entries, and are realised by design-system CSS. The named CSS-internal components (`artifact-preview`, `typing-dots`, `state-row`) are documented exceptions: they realise brand display structure but carry no exported component token.
 - **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 carry no `components:` YAML entry or exported component token.
 - **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.
@@ -774,9 +802,17 @@ Agentic work surfaces are the NadicodeAI-specific layer. They show people and ag
 
 **`artifact-surface`** — inspectable output area. Use for proposal previews, reports, plans, spreadsheets, schedules, approval states, source traces, run logs, workflow maps, and conversation artifacts.
 
-**`status-tag`** — mono status/proof label. Labels examples, internal states, anonymous examples, review states, or approved artifacts only when source support exists.
+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.
 
-**`status-tag-approved`** — approved or reviewed status variant. Uses the link soft surface and deep link text; only use when the source really supports approval or review.
+**`status-tag-blue`** — an in-progress, pending, or trial entity status still moving toward a resolution.
 
 **`chat-thread`** — conversation container showing how people instruct, correct, review, or approve agents. Autoplaying threads carry an enhancer-injected pause/resume control (WCAG 2.2.2); the control is never authored in static markup.
 

package/dist/css/components/agent-avatar.css

@@ -35,8 +35,18 @@
 }
 
 /* Optional identity accent — same AC-016 map as chat-bubble-agent. */
-.nc-agent-avatar[data-accent="green"]  { --nc-accent: var(--nc-link); }
-.nc-agent-avatar[data-accent="cyan"]   { --nc-accent: var(--nc-info); }
-.nc-agent-avatar[data-accent="amber"]  { --nc-accent: var(--nc-warning-deep); }
-.nc-agent-avatar[data-accent="ink"]    { --nc-accent: var(--nc-ink); }
-.nc-agent-avatar[data-accent="red"]    { --nc-accent: var(--nc-error); }
+.nc-agent-avatar[data-accent="green"] {
+  --nc-accent: var(--nc-link);
+}
+.nc-agent-avatar[data-accent="cyan"] {
+  --nc-accent: var(--nc-info);
+}
+.nc-agent-avatar[data-accent="amber"] {
+  --nc-accent: var(--nc-warning-deep);
+}
+.nc-agent-avatar[data-accent="ink"] {
+  --nc-accent: var(--nc-ink);
+}
+.nc-agent-avatar[data-accent="red"] {
+  --nc-accent: var(--nc-error);
+}

package/dist/css/components/approval-gate.css

@@ -12,16 +12,18 @@
   display: grid;
   gap: 6px;
   padding: 12px;
-  border: var(--nc-guide) solid color-mix(in srgb, var(--nc-warning-deep) 40%, var(--nc-warning-soft));
+  border: var(--nc-guide) solid
+    color-mix(in srgb, var(--nc-warning-deep) 40%, var(--nc-warning-soft));
   border-radius: var(--nc-rounded-md);
   background: var(--nc-warning-soft);
   color: var(--nc-ink);
   font-family: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
   animation-name: nc-msg-in;
   /* Confirm move: state transitions at the 150–200 ms feedback band. */
-  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);
+  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-approval-gate-label {
@@ -87,12 +89,12 @@
   vertical-align: -2px;
   background-color: currentColor;
   -webkit-mask: url("../../icons/check.svg") center / contain no-repeat;
-          mask: url("../../icons/check.svg") center / contain no-repeat;
+  mask: url("../../icons/check.svg") center / contain no-repeat;
 }
 
 .nc-approval-gate-actions button[data-variant="secondary"]::before {
   -webkit-mask-image: url("../../icons/square-pen.svg");
-          mask-image: url("../../icons/square-pen.svg");
+  mask-image: url("../../icons/square-pen.svg");
 }
 
 .nc-approval-gate-actions button:focus-visible {

package/dist/css/components/artifact-preview.css

@@ -35,12 +35,24 @@
   height: 14px;
   background-color: var(--nc-muted);
   -webkit-mask: url("../../icons/file-text.svg") center / contain no-repeat;
-          mask: url("../../icons/file-text.svg") center / contain no-repeat;
+  mask: url("../../icons/file-text.svg") center / contain no-repeat;
+}
+.nc-artifact-preview[data-kind="sheet"] .nc-artifact-preview-header::before {
+  -webkit-mask-image: url("../../icons/table.svg");
+  mask-image: url("../../icons/table.svg");
+}
+.nc-artifact-preview[data-kind="code"] .nc-artifact-preview-header::before {
+  -webkit-mask-image: url("../../icons/code.svg");
+  mask-image: url("../../icons/code.svg");
+}
+.nc-artifact-preview[data-kind="pdf"] .nc-artifact-preview-header::before {
+  -webkit-mask-image: url("../../icons/file.svg");
+  mask-image: url("../../icons/file.svg");
+}
+.nc-artifact-preview[data-kind="report"] .nc-artifact-preview-header::before {
+  -webkit-mask-image: url("../../icons/chart-column.svg");
+  mask-image: url("../../icons/chart-column.svg");
 }
-.nc-artifact-preview[data-kind="sheet"]  .nc-artifact-preview-header::before { -webkit-mask-image: url("../../icons/table.svg");        mask-image: url("../../icons/table.svg"); }
-.nc-artifact-preview[data-kind="code"]   .nc-artifact-preview-header::before { -webkit-mask-image: url("../../icons/code.svg");         mask-image: url("../../icons/code.svg"); }
-.nc-artifact-preview[data-kind="pdf"]    .nc-artifact-preview-header::before { -webkit-mask-image: url("../../icons/file.svg");         mask-image: url("../../icons/file.svg"); }
-.nc-artifact-preview[data-kind="report"] .nc-artifact-preview-header::before { -webkit-mask-image: url("../../icons/chart-column.svg"); mask-image: url("../../icons/chart-column.svg"); }
 
 .nc-artifact-preview-title {
   font-size: 13px;

package/dist/css/components/chat-bubble-agent.css

@@ -36,11 +36,21 @@
 /* AC-016 accent map → existing --nc-* tokens. Each rule references a token, no
    hard-coded hex. green→link, cyan→info (blue-cobalto; the killed cyan token
    retired per Italia contract §6), amber→warning-deep, ink→ink, red→error. */
-.nc-chat-bubble-agent[data-accent="green"]  { --nc-accent: var(--nc-link); }
-.nc-chat-bubble-agent[data-accent="cyan"]   { --nc-accent: var(--nc-info); }
-.nc-chat-bubble-agent[data-accent="amber"]  { --nc-accent: var(--nc-warning-deep); }
-.nc-chat-bubble-agent[data-accent="ink"]    { --nc-accent: var(--nc-ink); }
-.nc-chat-bubble-agent[data-accent="red"]    { --nc-accent: var(--nc-error); }
+.nc-chat-bubble-agent[data-accent="green"] {
+  --nc-accent: var(--nc-link);
+}
+.nc-chat-bubble-agent[data-accent="cyan"] {
+  --nc-accent: var(--nc-info);
+}
+.nc-chat-bubble-agent[data-accent="amber"] {
+  --nc-accent: var(--nc-warning-deep);
+}
+.nc-chat-bubble-agent[data-accent="ink"] {
+  --nc-accent: var(--nc-ink);
+}
+.nc-chat-bubble-agent[data-accent="red"] {
+  --nc-accent: var(--nc-error);
+}
 
 /* Inline mono token chip inside an agent bubble (prototype renderInline). */
 .nc-chat-bubble-agent code {

package/dist/css/components/chat-thread.css

@@ -117,10 +117,11 @@
   line-height: var(--nc-type-caption-mono-line-height);
   letter-spacing: var(--nc-type-caption-mono-letter-spacing);
   cursor: pointer;
-  transition: background-color var(--nc-duration-stagger) var(--nc-ease-out-strong),
-              border-color var(--nc-duration-stagger) var(--nc-ease-out-strong),
-              color var(--nc-duration-stagger) var(--nc-ease-out-strong),
-              opacity var(--nc-duration-stagger) var(--nc-ease-out-strong);
+  transition:
+    background-color var(--nc-duration-stagger) var(--nc-ease-out-strong),
+    border-color var(--nc-duration-stagger) var(--nc-ease-out-strong),
+    color var(--nc-duration-stagger) var(--nc-ease-out-strong),
+    opacity var(--nc-duration-stagger) var(--nc-ease-out-strong);
 }
 
 @media (hover: hover) and (pointer: fine) {

package/dist/css/components/handoff-banner.css

@@ -33,5 +33,5 @@
   height: 16px;
   background-color: var(--nc-link);
   -webkit-mask: url("../../icons/arrow-right.svg") center / contain no-repeat;
-          mask: url("../../icons/arrow-right.svg") center / contain no-repeat;
+  mask: url("../../icons/arrow-right.svg") center / contain no-repeat;
 }

package/dist/css/components/run-timeline.css

@@ -69,7 +69,12 @@
   height: var(--nc-run-timeline-node);
   margin-top: 4px;
   /* Center the node on the rail: rail center minus half the node width. */
-  margin-left: calc(var(--nc-run-timeline-rail) - (var(--nc-run-timeline-node) / 2) - 14px - var(--nc-run-timeline-node));
+  margin-left: calc(
+    var(--nc-run-timeline-rail) -
+    (var(--nc-run-timeline-node) / 2) -
+    14px -
+    var(--nc-run-timeline-node)
+  );
   border-radius: var(--nc-rounded-full);
   background: var(--nc-canvas);
   box-shadow: 0 0 0 var(--nc-guide) var(--nc-line);
@@ -123,13 +128,33 @@
 /* State variants — color carries state, sourced from the shared `--nc-state-*`
    tokens (the same vocabulary as state-tag/state-row). The node core and the
    content left edge both take the state token; shape is unchanged. */
-.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); }
+.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);
+}

package/dist/css/components/state-row.css

@@ -47,8 +47,18 @@
   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); }
+.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);
+}

package/dist/css/components/state-tag.css

@@ -26,9 +26,10 @@
   letter-spacing: 0;
   white-space: nowrap;
   /* Confirm move: state transitions at the 150–200 ms feedback band. */
-  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);
+  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);
 }
 
 /*

package/dist/css/components/status-tag.css

@@ -0,0 +1,101 @@
+/*
+ * status-tag — the entity-status system (DESIGN.md `status-tag-*` family).
+ * Sibling of `state-tag`, not a replacement: `state-tag` stays the run-state
+ * rail (ready/running/review/blocked/complete), carried by a 3px border-left
+ * on a neutral canvas. `status-tag` is the entity-status vocabulary — agent,
+ * credential, activation, customer, invitation, subscription, and health
+ * values that live on records, not on a run. It carries state a different
+ * way: a subtle tinted rectangle where BOTH the background and the text
+ * shift together, never a border-left rail, and it never touches the
+ * `--nc-state-*` token family.
+ *
+ * Shape: a small sans rectangle (`{rounded.md}`, not a capsule), never
+ * Geist Mono. Tone comes from `[data-tone]` (gray/green/red/amber/blue), not
+ * BEM modifiers, and each tone is a full background+text ramp pair pulled
+ * directly from the color ramps (gray/green-italia/red-italia/amber/
+ * blue-cobalto) rather than through a semantic alias — status-tag consumes
+ * ramp steps directly, matching `state-tag`'s "shape carries meaning, color
+ * carries variant" discipline but expressed as a bg/text pair instead of a
+ * border.
+ *
+ * Doctrine: gray is the default tone. Color is reserved for marking health
+ * and exceptions — every terminal/no-action state renders gray. Subtle-only
+ * (no solid/filled variants), no icons inside the badge, no text-transform,
+ * labels render verbatim from the i18n dictionary that owns them.
+ */
+.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;
+  /* Confirm move: state transitions at the 150–200 ms feedback band, same as
+     state-tag — color arrives WITH the meaning, never before it. */
+  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-gray-200);
+  color: var(--nc-gray-900);
+}
+
+.nc-status-tag[data-tone="green"] {
+  background: var(--nc-green-italia-200);
+  color: var(--nc-green-italia-900);
+}
+
+.nc-status-tag[data-tone="red"] {
+  background: var(--nc-red-italia-200);
+  color: var(--nc-red-italia-900);
+}
+
+.nc-status-tag[data-tone="amber"] {
+  background: var(--nc-amber-200);
+  color: var(--nc-amber-900);
+}
+
+.nc-status-tag[data-tone="blue"] {
+  background: var(--nc-blue-cobalto-200);
+  color: var(--nc-blue-cobalto-900);
+}
+
+/*
+ * Dark console: each tone flips to its own dark-ramp pair rather than a
+ * shared canvas/ink remap (unlike state-tag's neutral chip), because tone
+ * here is carried by a full bg+text pair, not a single border-left accent.
+ * Scoped per tone so gray's pair (dark-canvas-soft-2/gray-600) does not
+ * collide with the chromatic tones' 1000/400 pairs.
+ */
+.dark .nc-status-tag[data-tone="gray"] {
+  background: var(--nc-dark-canvas-soft-2);
+  color: var(--nc-gray-600);
+}
+
+.dark .nc-status-tag[data-tone="green"] {
+  background: var(--nc-green-italia-1000);
+  color: var(--nc-green-italia-400);
+}
+
+.dark .nc-status-tag[data-tone="red"] {
+  background: var(--nc-red-italia-1000);
+  color: var(--nc-red-italia-400);
+}
+
+.dark .nc-status-tag[data-tone="amber"] {
+  background: var(--nc-amber-1000);
+  color: var(--nc-amber-400);
+}
+
+.dark .nc-status-tag[data-tone="blue"] {
+  background: var(--nc-blue-cobalto-1000);
+  color: var(--nc-blue-cobalto-400);
+}

package/dist/css/components/tool-call-trace.css

@@ -32,5 +32,5 @@
   vertical-align: -2px;
   background-color: var(--nc-muted);
   -webkit-mask: url("../../icons/chevron-right.svg") center / contain no-repeat;
-          mask: url("../../icons/chevron-right.svg") center / contain no-repeat;
+  mask: url("../../icons/chevron-right.svg") center / contain no-repeat;
 }

package/dist/css/components/typing-dots.css

@@ -30,11 +30,21 @@
 /* AC-016 accent map → existing --nc-* tokens; identical to chat-bubble-agent and
    agent-avatar. green→link, cyan→info (blue-cobalto; killed cyan token retired
    per Italia contract §6), amber→warning-deep, ink→ink, red→error. No hard-coded hex. */
-.nc-typing-dots[data-accent="green"]  { --nc-accent: var(--nc-link); }
-.nc-typing-dots[data-accent="cyan"]   { --nc-accent: var(--nc-info); }
-.nc-typing-dots[data-accent="amber"]  { --nc-accent: var(--nc-warning-deep); }
-.nc-typing-dots[data-accent="ink"]    { --nc-accent: var(--nc-ink); }
-.nc-typing-dots[data-accent="red"]    { --nc-accent: var(--nc-error); }
+.nc-typing-dots[data-accent="green"] {
+  --nc-accent: var(--nc-link);
+}
+.nc-typing-dots[data-accent="cyan"] {
+  --nc-accent: var(--nc-info);
+}
+.nc-typing-dots[data-accent="amber"] {
+  --nc-accent: var(--nc-warning-deep);
+}
+.nc-typing-dots[data-accent="ink"] {
+  --nc-accent: var(--nc-ink);
+}
+.nc-typing-dots[data-accent="red"] {
+  --nc-accent: var(--nc-error);
+}
 
 .nc-typing-dots-dot {
   width: 5px;

package/dist/css/foundation.css

@@ -136,6 +136,14 @@ body {
   letter-spacing: var(--nc-type-caption-letter-spacing);
 }
 
+.nc-type-caption-strong {
+  font-family: var(--nc-type-caption-strong-font-family);
+  font-size: var(--nc-type-caption-strong-font-size);
+  font-weight: var(--nc-type-caption-strong-font-weight);
+  line-height: var(--nc-type-caption-strong-line-height);
+  letter-spacing: var(--nc-type-caption-strong-letter-spacing);
+}
+
 .nc-type-caption-mono {
   font-family: var(--nc-type-caption-mono-font-family);
   font-size: var(--nc-type-caption-mono-font-size);

package/dist/css/index.css

@@ -11,8 +11,9 @@
  * the structural-geometry foundation (`layout` + `primitives` — kernel grid,
  * single-owner seams, `.nc-marker` corner crosshairs, cell/row grid math, the
  * stage system), the brand display atoms shadcn/Radix has no equivalent for (the
- * 13 agent-chat atoms + the run-state `state-tag` family + `image`), and the
- * token/motion layers. The brand book and every static surface import this
+ * 13 agent-chat atoms + the run-state `state-tag` family + the entity-status
+ * `status-tag` family + `image`), and the token/motion layers. The brand book
+ * and every static surface import this
  * bundle raw — no Tailwind build step runs over `src/css/`, so the geometry is
  * `@layer` CSS, not `@utility` directives a browser would receive un-compiled.
  * The kept-geometry invariant guards stay live (kernel-css-architecture /
@@ -31,6 +32,9 @@
 /* Run-state tags (ADR 0007 D3). Agentic run-state, kept as CSS. */
 @import url("./components/state-tag.css") layer(components);
 
+/* Entity-status tags. Record-level status vocabulary, sibling of state-tag. */
+@import url("./components/status-tag.css") layer(components);
+
 /* Agent-chat atoms (M6 / Part B). Conversation surface + role-grammar atoms. */
 @import url("./components/chat-thread.css") layer(components);
 @import url("./components/chat-bubble-user.css") layer(components);

package/dist/css/layout.css

@@ -210,14 +210,13 @@
   display: none;
   min-width: 0;
   min-height: 0;
-  background:
-    repeating-linear-gradient(
-      125deg,
-      var(--nc-canvas) 0,
-      var(--nc-canvas) 6px,
-      var(--nc-line) 6px,
-      var(--nc-line) 7px
-    );
+  background: repeating-linear-gradient(
+    125deg,
+    var(--nc-canvas) 0,
+    var(--nc-canvas) 6px,
+    var(--nc-line) 6px,
+    var(--nc-line) 7px
+  );
 }
 
 /* The fill owns its single inner boundary rail so the texture is bounded on

package/dist/css/primitives.css

@@ -127,7 +127,11 @@
   --nc-blueprint-line: var(--nc-line);
   background-image:
     linear-gradient(to right, var(--nc-blueprint-line) var(--nc-guide), transparent var(--nc-guide)),
-    linear-gradient(to bottom, var(--nc-blueprint-line) var(--nc-guide), transparent var(--nc-guide));
+    linear-gradient(
+      to bottom,
+      var(--nc-blueprint-line) var(--nc-guide),
+      transparent var(--nc-guide)
+    );
   background-size:
     calc(100% / var(--nc-blueprint-columns)) calc(100% / var(--nc-blueprint-rows)),
     calc(100% / var(--nc-blueprint-columns)) calc(100% / var(--nc-blueprint-rows));
@@ -137,7 +141,7 @@
    scaffolding (used by atmospheric surfaces like the brand hero). */
 .nc-blueprint-field[data-feather="top"] {
   -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 100%);
-          mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 100%);
+  mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 100%);
 }
 
 .nc-rule-svg {
@@ -195,28 +199,6 @@
   width: 38%;
 }
 
-.nc-status-tag {
-  display: inline-flex;
-  width: fit-content;
-  min-height: 28px;
-  align-items: center;
-  justify-content: center;
-  border: var(--nc-guide) solid var(--nc-line);
-  /* status-tag = {rounded.sm} (DESIGN.md). */
-  border-radius: var(--nc-rounded-sm);
-  padding: 5px 9px;
-  background: var(--nc-canvas-soft);
-  color: var(--nc-body);
-  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-.nc-status-tag[data-proof-state="approved"] {
-  border-color: color-mix(in srgb, var(--nc-link) 35%, var(--nc-line));
-  background: color-mix(in srgb, var(--nc-link-bg-soft) 48%, var(--nc-canvas));
-}
-
 /* nc-icon — the icon slot. Icons are derived from Lucide (ISC) by a build
    transform that bakes the house render into the SVG (see scripts/generate-icons.ts).
    This primitive renders an INLINE <svg> child and re-asserts that key — 1.5px
@@ -319,10 +301,11 @@
   text-decoration: underline;
   text-underline-offset: 2px;
   text-decoration-thickness: var(--nc-guide);
-  transition: background-color var(--nc-duration-stagger) var(--nc-ease-out-strong),
-              border-color var(--nc-duration-stagger) var(--nc-ease-out-strong),
-              color var(--nc-duration-stagger) var(--nc-ease-out-strong),
-              opacity var(--nc-duration-stagger) var(--nc-ease-out-strong);
+  transition:
+    background-color var(--nc-duration-stagger) var(--nc-ease-out-strong),
+    border-color var(--nc-duration-stagger) var(--nc-ease-out-strong),
+    color var(--nc-duration-stagger) var(--nc-ease-out-strong),
+    opacity var(--nc-duration-stagger) var(--nc-ease-out-strong);
 }
 
 @media (hover: hover) and (pointer: fine) {

package/dist/css/tokens.generated.css

@@ -314,6 +314,11 @@
   --nc-type-caption-font-weight: 400;
   --nc-type-caption-line-height: 16px;
   --nc-type-caption-letter-spacing: 0px;
+  --nc-type-caption-strong-font-family: Geist, Inter, system-ui, -apple-system, sans-serif;
+  --nc-type-caption-strong-font-size: 12px;
+  --nc-type-caption-strong-font-weight: 500;
+  --nc-type-caption-strong-line-height: 16px;
+  --nc-type-caption-strong-letter-spacing: 0px;
   --nc-type-caption-mono-font-family: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
   --nc-type-caption-mono-font-size: 12px;
   --nc-type-caption-mono-font-weight: 500;

package/dist/tailwind/nadicode.tailwind.json

@@ -206,6 +206,9 @@
         "caption": [
           "Geist, Inter, system-ui, -apple-system, sans-serif"
         ],
+        "caption-strong": [
+          "Geist, Inter, system-ui, -apple-system, sans-serif"
+        ],
         "caption-mono": [
           "Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace"
         ],
@@ -324,6 +327,14 @@
             "fontWeight": "400"
           }
         ],
+        "caption-strong": [
+          "12px",
+          {
+            "lineHeight": "16px",
+            "letterSpacing": "0px",
+            "fontWeight": "500"
+          }
+        ],
         "caption-mono": [
           "12px",
           {

package/dist/tailwind/nadicode.theme.css

@@ -366,6 +366,7 @@
   --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;
@@ -461,6 +462,13 @@
   --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;

package/dist/tokens/nadicode.dtcg.json

@@ -2463,6 +2463,22 @@
           "lineHeight": 16
         }
       },
+      "caption-strong": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Geist, Inter, system-ui, -apple-system, sans-serif",
+          "fontSize": {
+            "value": 12,
+            "unit": "px"
+          },
+          "fontWeight": 500,
+          "letterSpacing": {
+            "value": 0,
+            "unit": "px"
+          },
+          "lineHeight": 16
+        }
+      },
       "caption-mono": {
         "$type": "typography",
         "$value": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "publishConfig": {
     "access": "public"