@nadicodeai/design-system 0.1.0

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

@@ -0,0 +1,135 @@
+/*
+ * run-timeline — vertical step thread for an agent run, handoff, or workflow
+ * execution (DESIGN.md `run-timeline`). The contract fixes the surface
+ * (background `--nc-canvas`, text `--nc-ink`, `body-sm` typography, 0 padding):
+ * the timeline is a transparent fill that drops into a seam-owning grid/lane
+ * primitive and draws no outer structural border of its own.
+ *
+ * Structure: a stacked column of step rows threaded by a single continuous
+ * vertical rail. Single-owner seam law — the rail is one 1px line owned by the
+ * container (`::before`), bounded to the timeline; each step owns exactly one
+ * node marker that sits ON the rail, and a per-step state is carried by the
+ * shared state vocabulary: a 3px colored `border-left`/node tint consuming the
+ * matching `--nc-state-*` token (shape carries the step; color carries state),
+ * identical to the `state-tag-*` family. State is never a swatch, pulse, or
+ * spinner — the optional running pulse reuses the M5 `.nc-anim-pulse` hook and
+ * is neutralized under reduced motion. Color is `var(--nc-*)` only; the round
+ * node markers keep an off-scale literal (no `rounded` token matches a circle);
+ * spacing/font are literals.
+ */
+.nc-run-timeline {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 0;
+  background: var(--nc-canvas);
+  color: var(--nc-ink);
+  font-family: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  /* Geometry knobs the rail + nodes share, so the thread stays single-source. */
+  --nc-run-timeline-rail: 22px; /* rail center, from the left content edge */
+  --nc-run-timeline-node: 11px; /* node diameter */
+}
+
+/* The single continuous rail — one 1px line owned by the container, bounded to
+   the step span (top of the first node to the last node) so it never reaches a
+   surrounding cell seam. The first/last steps trim it to their node centers. */
+.nc-run-timeline::before {
+  content: "";
+  position: absolute;
+  top: 14px;
+  bottom: 14px;
+  left: var(--nc-run-timeline-rail);
+  width: var(--nc-guide);
+  transform: translateX(-50%);
+  background: var(--nc-line);
+}
+
+/* Step row — node gutter + content. The row owns its own node marker only; it
+   draws no rail and no row seam (the rail is the container's). */
+.nc-run-timeline-step {
+  position: relative;
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  padding: 8px 0;
+  animation-name: nc-msg-in;
+}
+
+/* Node marker — a small ringed dot sitting ON the rail. The ring is the canvas,
+   so the node masks the rail behind it (single visible crossing). The dot color
+   carries the step state from the shared `--nc-state-*` tokens; default is the
+   ink/state-ready token, matching the state-tag family's neutral edge. */
+.nc-run-timeline-node {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
+  width: var(--nc-run-timeline-node);
+  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));
+  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);
+}
+
+/* Filled core — the colored center that reads as the state. */
+.nc-run-timeline-node::before {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  border-radius: var(--nc-rounded-full);
+  background: currentColor;
+}
+
+/* Content — label kicker (mono, muted) + claim, mirroring memory-item's slot
+   grammar. A 3px colored left edge echoes the state-tag border vocabulary so
+   the step's state is legible at the text too, not only the node. */
+.nc-run-timeline-content {
+  flex: 1;
+  min-width: 0;
+  padding-left: 12px;
+  border-left: 3px solid var(--nc-line);
+}
+
+.nc-run-timeline-label {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--nc-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.nc-run-timeline-title {
+  font-weight: 500;
+  color: var(--nc-ink);
+}
+
+.nc-run-timeline-detail {
+  margin-top: 2px;
+  font-size: 13px;
+  line-height: 18px;
+  color: var(--nc-body);
+}
+
+/* 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); }

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

@@ -0,0 +1,54 @@
+/*
+ * state-row — CSS-internal atom (NO DESIGN.md contract entry; D8/D14).
+ * Graduated from `chat-anim.jsx` StateRow. A full-width run-state divider: a
+ * centered mono label with a small state dot, flanked by hairline rules that are
+ * bounded to this row only (single-owner: they never reach a thread seam). The
+ * dot color is selected by `[data-kind]` from the `--nc-state-*` tokens; the
+ * `running` kind may opt into the M5 `.nc-anim-pulse` hook in markup (the pulse
+ * uses `currentColor`, so the dot's color drives the ring). Color is
+ * `var(--nc-*)` only; spacing/font are literals.
+ */
+.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;
+}
+
+/* Flanking hairlines — bounded to the row, owned here only. */
+.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;
+}
+
+/* State dot — color carries the run state, sourced from --nc-state-* tokens.
+   `currentColor` is the dot color so an applied .nc-anim-pulse ring matches. */
+.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); }

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

@@ -0,0 +1,52 @@
+/*
+ * state-tag — the single run-state system (DESIGN.md `state-tag-*` family).
+ * Graduated from the archived design-canvas `base.css` `.nc-state-tag` shim.
+ * Compact rectangular caption-mono pill: shape carries meaning, color carries
+ * variant. Each variant differentiates only by a 3px colored `border-left`
+ * consuming the matching `--nc-state-*` token. State is never conveyed through
+ * swatches, dots, pulses, breathing animations, or loading spinners. Variants
+ * use `[data-variant]` (e.g. `data-variant="running"`), not BEM modifiers.
+ * Color comes from `var(--nc-*)` only.
+ */
+.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;
+  /* 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);
+}
+
+.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);
+}

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

@@ -0,0 +1,36 @@
+/*
+ * tool-call-trace — compact mono trace row (DESIGN.md `tool-call-trace`).
+ * Graduated from the `base.css` `.nc-tool-call-trace` shim + `chat-anim.jsx`
+ * ToolTrace. Left-aligned soft-surface code row; use only when tool use is
+ * relevant to the explanation. A leading `›` marker (mono, muted) prefixes the
+ * trace. Message atom → carries the M5 rise-in. Color is `var(--nc-*)` only;
+ * the radius reads `var(--nc-rounded-*)`; spacing/font are literals.
+ */
+.nc-tool-call-trace {
+  align-self: flex-start;
+  width: fit-content;
+  max-width: 92%;
+  padding: 6px 10px;
+  border: var(--nc-guide) solid var(--nc-line);
+  border-radius: var(--nc-rounded-sm);
+  background: var(--nc-canvas-soft-2);
+  color: var(--nc-body);
+  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+  font-size: 12px;
+  line-height: 17px;
+  animation-name: nc-msg-in;
+}
+
+/* Leading invocation marker — Lucide chevron-right, painted via CSS mask so it
+   tints with the muted token. */
+.nc-tool-call-trace::before {
+  content: "";
+  display: inline-block;
+  width: 13px;
+  height: 13px;
+  margin-right: 8px;
+  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;
+}

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

@@ -0,0 +1,44 @@
+/*
+ * typing-dots — CSS-internal atom (NO DESIGN.md contract entry; D8/D14).
+ * Graduated from `chat-anim.jsx` TypingDots. An agent-shaped bubble shell
+ * (canvas surface, hairline border, 3px accent stripe consuming `--nc-accent`)
+ * holding three muted dots. Each dot opts into the M5 `.nc-anim-typing` hook in
+ * markup and staggers via `--nc-anim-delay` (e.g. `calc(var(--i) *
+ * var(--nc-duration-stagger))`); reduced-motion is inherited from that hook.
+ * The 3px stripe consumes `--nc-accent`, switchable via `[data-accent]` from the
+ * same AC-016 map as `chat-bubble-agent`/`agent-avatar` so the typing shell
+ * tracks the agent's accent (matching the prototype's `TypingDots accent`).
+ * Color is `var(--nc-*)` only; the shell radius reads `var(--nc-rounded-*)`
+ * (the round dots keep an off-scale literal — no `rounded` token matches);
+ * spacing/font are literals.
+ */
+.nc-typing-dots {
+  /* AC-016 accent: default green; switchable via [data-accent]. */
+  --nc-accent: var(--nc-link);
+  align-self: flex-start;
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  width: fit-content;
+  padding: 10px 14px 10px 15px;
+  border: var(--nc-guide) solid var(--nc-line);
+  border-radius: var(--nc-rounded-md);
+  box-shadow: inset 3px 0 0 0 var(--nc-accent);
+  background: var(--nc-canvas);
+}
+
+/* AC-016 accent map → existing --nc-* tokens; identical to chat-bubble-agent and
+   agent-avatar. green→link, cyan→cyan-deep, 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-cyan-deep); }
+.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;
+  height: 5px;
+  border-radius: var(--nc-rounded-full);
+  background: var(--nc-muted);
+}

package/dist/css/components/usage-meter.css

@@ -0,0 +1,63 @@
+/*
+ * usage-meter — token / cost / latency / run-count display (DESIGN.md
+ * `usage-meter`). Graduated from `chat-anim.jsx` ChatFooter. A compact
+ * caption-mono meter: a meta row (model · steps · percent, separated by hairline
+ * pipes) over an optional thin progress track. The fill width is data, set via
+ * `--nc-usage` (0–100%) in markup; its 360ms settle uses the M5 transition
+ * tokens (no re-typed magic numbers). Color is `var(--nc-*)` only;
+ * the radius reads `var(--nc-rounded-*)`; spacing/font are literals.
+ */
+.nc-usage-meter {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: var(--nc-rounded-sm);
+  background: var(--nc-canvas);
+  color: var(--nc-body);
+  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+  font-size: 11px;
+  line-height: 16px;
+}
+
+.nc-usage-meter-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--nc-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+/* Hairline pipe separators between meta fields. */
+.nc-usage-meter-sep {
+  color: var(--nc-line);
+}
+
+/* Push the trailing field (percent) to the right edge. */
+.nc-usage-meter-spacer {
+  flex: 1;
+}
+
+.nc-usage-meter-track {
+  position: relative;
+  height: 2px;
+  overflow: hidden;
+  background: var(--nc-line);
+}
+
+.nc-usage-meter-fill {
+  position: absolute;
+  inset: 0;
+  right: auto;
+  width: var(--nc-usage, 0%);
+  background: var(--nc-ink);
+  transition: width var(--nc-duration-transition) var(--nc-ease-emphasized);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nc-usage-meter-fill {
+    transition: none;
+  }
+}

package/dist/css/foundation.css

@@ -0,0 +1,169 @@
+/* foundation layer — .nc-page / .nc-frame (split from old foundation per D10). */
+
+/* Document-level sans stack. Without this, text outside .nc-copy-stack /
+   .nc-type-* scopes renders in UA Times. Family only — size/weight/line-height
+   stay scoped to the type-scale utilities below. Font stacks are not tokens in
+   this kit (see page-recipes.css precedent); the stack mirrors every sans
+   --nc-type-*-font-family token value exactly. */
+body {
+  font-family: Geist, Inter, system-ui, -apple-system, sans-serif;
+}
+
+.nc-page {
+  width: 100%;
+  max-width: var(--nc-page-max);
+  margin-inline: auto;
+  padding-inline: var(--nc-page-pad);
+}
+
+.nc-frame {
+  width: 100%;
+  max-width: var(--nc-frame-max);
+  margin-inline: auto;
+}
+
+/* Type-scale utility classes.
+   Deliberate layer move: these classes formerly lived in the generated token
+   layer (tokens.generated.css). The faithful-projection rewrite (ADR 0005)
+   makes the generated layer a 1:1 value projection only — it emits the
+   per-property --nc-type-<scale>-* tokens and emits no classes. The class API
+   is restored here in the foundation layer, each class composing the five
+   per-property tokens. reset.css sets no typographic property (font-family /
+   font-size / font-weight / line-height / letter-spacing), so this tokens ->
+   foundation precedence flip has zero rendered delta today; the move is
+   intentional and recorded so a future reset rule cannot silently win. */
+.nc-type-display-xl {
+  font-family: var(--nc-type-display-xl-font-family);
+  font-size: var(--nc-type-display-xl-font-size);
+  font-weight: var(--nc-type-display-xl-font-weight);
+  line-height: var(--nc-type-display-xl-line-height);
+  letter-spacing: var(--nc-type-display-xl-letter-spacing);
+}
+
+.nc-type-display-lg {
+  font-family: var(--nc-type-display-lg-font-family);
+  font-size: var(--nc-type-display-lg-font-size);
+  font-weight: var(--nc-type-display-lg-font-weight);
+  line-height: var(--nc-type-display-lg-line-height);
+  letter-spacing: var(--nc-type-display-lg-letter-spacing);
+}
+
+.nc-type-display-md {
+  font-family: var(--nc-type-display-md-font-family);
+  font-size: var(--nc-type-display-md-font-size);
+  font-weight: var(--nc-type-display-md-font-weight);
+  line-height: var(--nc-type-display-md-line-height);
+  letter-spacing: var(--nc-type-display-md-letter-spacing);
+}
+
+.nc-type-display-sm {
+  font-family: var(--nc-type-display-sm-font-family);
+  font-size: var(--nc-type-display-sm-font-size);
+  font-weight: var(--nc-type-display-sm-font-weight);
+  line-height: var(--nc-type-display-sm-line-height);
+  letter-spacing: var(--nc-type-display-sm-letter-spacing);
+}
+
+.nc-type-title-lg {
+  font-family: var(--nc-type-title-lg-font-family);
+  font-size: var(--nc-type-title-lg-font-size);
+  font-weight: var(--nc-type-title-lg-font-weight);
+  line-height: var(--nc-type-title-lg-line-height);
+  letter-spacing: var(--nc-type-title-lg-letter-spacing);
+}
+
+.nc-type-title-md {
+  font-family: var(--nc-type-title-md-font-family);
+  font-size: var(--nc-type-title-md-font-size);
+  font-weight: var(--nc-type-title-md-font-weight);
+  line-height: var(--nc-type-title-md-line-height);
+  letter-spacing: var(--nc-type-title-md-letter-spacing);
+}
+
+.nc-type-title-sm {
+  font-family: var(--nc-type-title-sm-font-family);
+  font-size: var(--nc-type-title-sm-font-size);
+  font-weight: var(--nc-type-title-sm-font-weight);
+  line-height: var(--nc-type-title-sm-line-height);
+  letter-spacing: var(--nc-type-title-sm-letter-spacing);
+}
+
+.nc-type-body-lg {
+  font-family: var(--nc-type-body-lg-font-family);
+  font-size: var(--nc-type-body-lg-font-size);
+  font-weight: var(--nc-type-body-lg-font-weight);
+  line-height: var(--nc-type-body-lg-line-height);
+  letter-spacing: var(--nc-type-body-lg-letter-spacing);
+}
+
+.nc-type-body-md {
+  font-family: var(--nc-type-body-md-font-family);
+  font-size: var(--nc-type-body-md-font-size);
+  font-weight: var(--nc-type-body-md-font-weight);
+  line-height: var(--nc-type-body-md-line-height);
+  letter-spacing: var(--nc-type-body-md-letter-spacing);
+}
+
+.nc-type-body-md-strong {
+  font-family: var(--nc-type-body-md-strong-font-family);
+  font-size: var(--nc-type-body-md-strong-font-size);
+  font-weight: var(--nc-type-body-md-strong-font-weight);
+  line-height: var(--nc-type-body-md-strong-line-height);
+  letter-spacing: var(--nc-type-body-md-strong-letter-spacing);
+}
+
+.nc-type-body-sm {
+  font-family: var(--nc-type-body-sm-font-family);
+  font-size: var(--nc-type-body-sm-font-size);
+  font-weight: var(--nc-type-body-sm-font-weight);
+  line-height: var(--nc-type-body-sm-line-height);
+  letter-spacing: var(--nc-type-body-sm-letter-spacing);
+}
+
+.nc-type-body-sm-strong {
+  font-family: var(--nc-type-body-sm-strong-font-family);
+  font-size: var(--nc-type-body-sm-strong-font-size);
+  font-weight: var(--nc-type-body-sm-strong-font-weight);
+  line-height: var(--nc-type-body-sm-strong-line-height);
+  letter-spacing: var(--nc-type-body-sm-strong-letter-spacing);
+}
+
+.nc-type-caption {
+  font-family: var(--nc-type-caption-font-family);
+  font-size: var(--nc-type-caption-font-size);
+  font-weight: var(--nc-type-caption-font-weight);
+  line-height: var(--nc-type-caption-line-height);
+  letter-spacing: var(--nc-type-caption-letter-spacing);
+}
+
+.nc-type-caption-mono {
+  font-family: var(--nc-type-caption-mono-font-family);
+  font-size: var(--nc-type-caption-mono-font-size);
+  font-weight: var(--nc-type-caption-mono-font-weight);
+  line-height: var(--nc-type-caption-mono-line-height);
+  letter-spacing: var(--nc-type-caption-mono-letter-spacing);
+}
+
+.nc-type-code {
+  font-family: var(--nc-type-code-font-family);
+  font-size: var(--nc-type-code-font-size);
+  font-weight: var(--nc-type-code-font-weight);
+  line-height: var(--nc-type-code-line-height);
+  letter-spacing: var(--nc-type-code-letter-spacing);
+}
+
+.nc-type-button-md {
+  font-family: var(--nc-type-button-md-font-family);
+  font-size: var(--nc-type-button-md-font-size);
+  font-weight: var(--nc-type-button-md-font-weight);
+  line-height: var(--nc-type-button-md-line-height);
+  letter-spacing: var(--nc-type-button-md-letter-spacing);
+}
+
+.nc-type-button-lg {
+  font-family: var(--nc-type-button-lg-font-family);
+  font-size: var(--nc-type-button-lg-font-size);
+  font-weight: var(--nc-type-button-lg-font-weight);
+  line-height: var(--nc-type-button-lg-line-height);
+  letter-spacing: var(--nc-type-button-lg-letter-spacing);
+}

package/dist/css/index.css

@@ -0,0 +1,52 @@
+/*
+ * @nadicodeai/design-system/css — bundle entry.
+ * Seven explicit, public-named cascade layers (D9). Each partial imports
+ * into its own layer so cascade order is data and consumer overrides are
+ * predictable. The `components` layer carries the KEPT atom family only.
+ *
+ * Tailwind+shadcn migration: the generic marketing/SaaS component CSS and ALL
+ * section CSS retired in lockstep with their `DESIGN.md` contract entries — they
+ * ship as React shadcn components from `@nadicodeai/ui`. The `sections` cascade
+ * layer is dropped with them. What stays here is the framework-agnostic core:
+ * 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
+ * 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 /
+ * kernel-rendered-geometry / marker-placement).
+ */
+@layer tokens, reset, foundation, motion, layout, primitives, components;
+
+@import url("./tokens.generated.css") layer(tokens);
+@import url("./tokens.local.css") layer(tokens);
+@import url("./reset.css") layer(reset);
+@import url("./foundation.css") layer(foundation);
+@import url("./motion.css") layer(motion);
+@import url("./layout.css") layer(layout);
+@import url("./primitives.css") layer(primitives);
+
+/* Run-state tags (ADR 0007 D3). Agentic run-state, kept as CSS. */
+@import url("./components/state-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);
+@import url("./components/chat-bubble-agent.css") layer(components);
+@import url("./components/tool-call-trace.css") layer(components);
+@import url("./components/memory-item.css") layer(components);
+@import url("./components/handoff-banner.css") layer(components);
+@import url("./components/approval-gate.css") layer(components);
+@import url("./components/artifact-preview.css") layer(components);
+@import url("./components/typing-dots.css") layer(components);
+@import url("./components/state-row.css") layer(components);
+@import url("./components/agent-avatar.css") layer(components);
+@import url("./components/usage-meter.css") layer(components);
+@import url("./components/run-timeline.css") layer(components);
+
+/* Editorial media mount. The bounded home for art-directed imagery: media fill
+   + optional tag chip + optional caption, framed or strip form. Self-contained;
+   owns at most its own hairline. */
+@import url("./components/image.css") layer(components);