@nadicodeai/design-system 0.10.1 → 0.11.0

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

@@ -1,101 +0,0 @@
-/*
- * 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

@@ -1,36 +0,0 @@
-/*
- * 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

@@ -1,54 +0,0 @@
-/*
- * 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→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-dot {
-  width: 5px;
-  height: 5px;
-  border-radius: var(--nc-rounded-full);
-  background: var(--nc-muted);
-}

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

@@ -1,63 +0,0 @@
-/*
- * 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

@@ -1,177 +0,0 @@
-/* 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-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);
-  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);
-}