@nadicodeai/design-system 0.10.2 → 0.11.0

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

@@ -1,159 +0,0 @@
-/*
- * chat-thread — agent-conversation container (DESIGN.md `chat-thread`).
- * Graduated from the archived design-canvas `base.css` `.nc-chat-thread` shim
- * and the `chat-anim.jsx` ChatHeader/ChatFooter vision. A bordered card with a
- * dotted work-surface body and optional header + footer slots; the body is the
- * scrolling message column. The card owns exactly one outer seam (its border)
- * plus the single hairline between each slot and the body. Color comes from
- * `var(--nc-*)` only; the radius reads `var(--nc-rounded-*)`; spacing/font are
- * literals.
- */
-.nc-chat-thread {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  border: var(--nc-guide) solid var(--nc-line);
-  border-radius: var(--nc-rounded-md);
-  background: var(--nc-canvas);
-  color: var(--nc-ink);
-  font-family: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
-}
-
-/* Header slot — agent identity + workflow kicker. Owns its bottom seam only. */
-.nc-chat-thread-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 14px 16px;
-  border-bottom: var(--nc-guide) solid var(--nc-line);
-  background: var(--nc-canvas);
-}
-
-.nc-chat-thread-domain {
-  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;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.nc-chat-thread-identity {
-  min-width: 0;
-  flex: 1;
-}
-
-.nc-chat-thread-name {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  color: var(--nc-ink);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.nc-chat-thread-name .nc-chat-thread-role {
-  min-width: 0;
-  overflow: hidden;
-  font-weight: 400;
-  color: var(--nc-muted);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.nc-chat-thread-workflow {
-  flex: 0 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
-  font-size: 11px;
-  line-height: 16px;
-  color: var(--nc-body);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Body slot — the dotted work-surface scroll column. The radial-gradient dots
-   are painted on `var(--nc-line)`; the 12px grid + 8px offset mirror the
-   prototype's field. Messages are a stacked, end-anchored column. */
-.nc-chat-thread-body {
-  flex: 1;
-  min-height: 0;
-  overflow: hidden auto;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 16px 18px;
-  background:
-    radial-gradient(var(--nc-line) 0.8px, transparent 0.8px) 8px 8px / 12px 12px,
-    var(--nc-canvas);
-}
-
-/* Pause/resume control — enhancer-injected only; never authored in static markup.
-   Positioned top-right inside the thread card, above the body slot.
-   Quiet chrome: caption-mono scale, hairline border, no hover position shift. */
-.nc-chat-pause {
-  display: block;
-  align-self: flex-end;
-  margin: var(--nc-xs) var(--nc-xs) 0;
-  padding: var(--nc-xs) var(--nc-sm);
-  background: var(--nc-canvas);
-  color: var(--nc-muted);
-  border: var(--nc-guide) solid var(--nc-line);
-  border-radius: var(--nc-rounded-xs);
-  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);
-  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);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .nc-chat-pause:hover {
-    color: var(--nc-ink);
-    border-color: var(--nc-body);
-  }
-}
-
-.nc-chat-pause[aria-pressed="true"] {
-  color: var(--nc-ink);
-  border-color: var(--nc-body);
-}
-
-/* Invite — press feedback. */
-.nc-chat-pause:active {
-  transform: scale(0.97);
-  transition: transform var(--nc-duration-stagger) var(--nc-ease-out-strong);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .nc-chat-pause:active {
-    transform: none;
-  }
-}
-
-/* Footer slot — usage-meter + progress row. Owns its top seam only. */
-.nc-chat-thread-footer {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 10px 16px;
-  border-top: var(--nc-guide) solid var(--nc-line);
-  background: var(--nc-canvas);
-}

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

@@ -1,37 +0,0 @@
-/*
- * handoff-banner — agent-to-agent / human-to-agent handoff surface
- * (DESIGN.md `handoff-banner`). Graduated from the `base.css`
- * `.nc-handoff-banner` shim. Full-width soft-link banner that explains a
- * handoff reason and destination; a leading `→` glyph (link-colored) and a 3px
- * left accent stripe carry the direction. Message atom → carries the M5
- * rise-in. Color is `var(--nc-*)` only; the radius reads `var(--nc-rounded-*)`;
- * spacing/font are literals.
- */
-.nc-handoff-banner {
-  align-self: stretch;
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  padding: 8px 12px;
-  border-left: 3px solid var(--nc-link);
-  border-radius: var(--nc-rounded-md);
-  background: var(--nc-link-bg-soft);
-  color: var(--nc-link-deep);
-  font-family: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 18px;
-  animation-name: nc-msg-in;
-}
-
-/* Leading direction marker — Lucide arrow-right, painted via CSS mask so it
-   tints with the link token. */
-.nc-handoff-banner::before {
-  content: "";
-  flex: none;
-  width: 16px;
-  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;
-}

package/dist/css/components/image.css

@@ -1,87 +0,0 @@
-/*
- * image — editorial media mount (DESIGN.md `image`).
- *
- * The single home for art-directed imagery inside the grammar: a bounded
- * media fill (img / picture / video / inline svg) with an optional mono tag
- * chip overlaid on the media and an optional caption bar below it. Like
- * card-marketing it is SELF-CONTAINED: with `data-frame="true"` it draws
- * exactly one hairline — its own `{colors.line}` border — so it sits inside a
- * borderless panel-cell, split visual slot, or card media slot without
- * repairing or stacking onto any grid seam. It is square-cornered
- * (`{rounded.none}`): a mounted print, not a floating card — the parent frame
- * supplies the visual system.
- *
- * The aspect ratio is a per-instance knob (`--nc-image-ratio`, default
- * 4 / 3) following the bento ratio-prop model: set the prop on the element,
- * never re-derive geometry inline. `data-strip="true"` is the full-width
- * divider form — the ratio unlocks and the height resolves from the
- * `{spacing.h-strip}` responsive tokens via the layout-layer collapsed alias.
- *
- * Color binds to var(--nc-*) only; the image ships zero out-of-contract
- * values. Spacing literals carry their `{spacing.*}` contract values inline.
- */
-.nc-image {
-  --nc-image-ratio: 4 / 3;
-  position: relative;
-  /* The canonical mount is a <figure>; zero the UA figure margin (1em 40px)
-     so the image stays bounded to its slot instead of overflowing it. */
-  margin: 0;
-  display: grid;
-  grid-template-rows: auto;
-  width: 100%;
-  overflow: hidden;
-  background: var(--nc-canvas-soft);
-}
-
-.nc-image[data-frame="true"] {
-  border: var(--nc-guide) solid var(--nc-line);
-}
-
-.nc-image-media {
-  display: block;
-  width: 100%;
-  height: auto;
-  aspect-ratio: var(--nc-image-ratio);
-  object-fit: cover;
-}
-
-/* Mono tag chip overlaid top-left on the media — the image's print label.
-   Typography comes from the generated `.nc-type-caption-mono` utility applied
-   in markup, so the contract stays the single type source. The chip owns its
-   own bounded hairline; it overlays the media, never a grid seam. */
-.nc-image-tag {
-  position: absolute;
-  top: 8px; /* {spacing.xs} */
-  left: 8px; /* {spacing.xs} */
-  padding: 2px 6px;
-  border: var(--nc-guide) solid var(--nc-line);
-  background: var(--nc-canvas);
-  color: var(--nc-ink);
-  text-transform: uppercase;
-}
-
-/* Caption bar below the media, inside the image's bound. Type from the
-   generated `.nc-type-caption` utility applied in markup; body tone (muted
-   fails WCAG AA at caption size on the soft surface). */
-.nc-image-caption {
-  margin: 0;
-  padding: 8px 12px; /* {spacing.xs} {spacing.sm} */
-  color: var(--nc-body);
-  background: var(--nc-canvas);
-}
-
-/* ============================================================
-   Variant: strip
-   ============================================================
-   `data-strip="true"` — the full-width divider form (a thin
-   editorial band between page rows: thread, texture, panorama).
-   The ratio unlocks and the media fills the strip height from the
-   `{spacing.h-strip}` responsive tokens (72/80/88 px) through the
-   layout-layer collapsed alias, so the strip stays a quiet band
-   and never balloons. No frame by default: the hosting page-row
-   owns the strip's top/bottom seams.
-   ============================================================ */
-.nc-image[data-strip="true"] .nc-image-media {
-  aspect-ratio: auto;
-  height: var(--nc-h-strip);
-}

package/dist/css/components/memory-item.css

@@ -1,36 +0,0 @@
-/*
- * memory-item — remembered-fact row (DESIGN.md `memory-item`).
- * Graduated from `chat-anim.jsx` MemoryItem. Left-aligned soft-surface row for
- * company-brain / persistent-context facts: a mono "Memory" label slot plus the
- * remembered fact. Message atom → carries the M5 rise-in. Color is `var(--nc-*)`
- * only; the radius reads `var(--nc-rounded-*)`; spacing/font are literals.
- */
-.nc-memory-item {
-  align-self: flex-start;
-  display: flex;
-  gap: 10px;
-  align-items: flex-start;
-  width: fit-content;
-  max-width: 92%;
-  padding: 8px 12px;
-  border: var(--nc-guide) solid var(--nc-line);
-  border-radius: var(--nc-rounded-sm);
-  background: var(--nc-canvas-soft);
-  color: var(--nc-body);
-  font-family: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
-  font-size: 13px;
-  line-height: 18px;
-  animation-name: nc-msg-in;
-}
-
-.nc-memory-item-label {
-  flex: 0 0 auto;
-  margin-top: 2px;
-  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 16px;
-  color: var(--nc-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-}

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

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

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

@@ -1,67 +0,0 @@
-/*
- * 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);
-}
-
-/*
- * Dark console: the tag's neutral surface flips to the dark ramp so the chip is
- * dark-grounded, not a light chip on the dark canvas. Scoped to the component
- * because canvas/ink/line are global neutrals that must not be remapped in the
- * unscoped .dark block. The variant state colors flip separately via the
- * generated :root.dark --nc-state-* remap in the Tailwind theme map. Direct
- * counterparts: the tag stays a canvas-grounded chip in both themes.
- */
-.dark .nc-state-tag {
-  --nc-canvas: var(--nc-dark-canvas);
-  --nc-ink: var(--nc-dark-ink);
-  --nc-line: var(--nc-dark-line);
-}
-
-.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);
-}