@nadicodeai/design-system 0.10.2 → 0.11.0

package/dist/css/motion.css

@@ -1,225 +0,0 @@
-/*
- * motion layer — the brand's motion contract, defined once and reused.
- *
- * REGISTER: the page breathes; it never performs. Every moment of movement
- * has one owner and one meaning; motion that cannot say what it means is
- * decoration and is cut.
- *
- * THE FOUR MOVES (the complete vocabulary — nothing else animates):
- *   Settle  — entrance. A row's content rises in once on scroll-into-view,
- *             as ONE unit, never element-by-element. (.nc-settle, opt-in)
- *   Type    — the demonstration. chat-autoplay's staggered message/trace
- *             rhythm. The only sustained animation; it is content, not effect.
- *   Confirm — state change. Approval and state surfaces transition at
- *             --nc-duration-confirm; color arrives WITH the meaning, never
- *             before it.
- *   Invite  — hover/press. Surface and underline shifts on hover, gated
- *             behind @media (hover: hover) and (pointer: fine); :active press
- *             feedback at scale(0.97). Nothing changes position on hover.
- *
- * CRAFT RULES:
- *   - Entrances and exits ease OUT (--nc-ease-emphasized for Settle,
- *     --nc-ease-out-strong for feedback); never ease-in, never a weak
- *     built-in where a brand curve exists.
- *   - State feedback completes in 150–200 ms; press <= 160 ms; only the
- *     demonstration (Type) may run longer.
- *   - DURATION TIERS: UI feedback stays under 300 ms.
- *     --nc-duration-msg-in (360 ms) is reserved for the one-time Settle
- *     entrance, never for motion the operator meets on every refetch. No
- *     reflow/count-up timing is adopted; the deprecated compatibility token
- *     below is not an approved semantic use.
- *   - ASYMMETRIC TIMING: a deliberate action opens slower than it dismisses.
- *     Popovers/menus/dialogs open at --nc-duration-open (220 ms) and close at
- *     --nc-duration-close (140 ms); the open invites, the close gets out of the
- *     way.
- *   - ORIGIN-AWARE: a surface that springs from a trigger scales FROM that
- *     trigger (transform-origin at the anchor), not from its own centre — a
- *     popover grows out of the button that opened it.
- *   - INTERRUPTIBLE: gesture- or toast-driven motion retargets from its
- *     current position; it is never restarted from a fixed keyframe mid-flight.
- *   - Nothing enters from scale(0) or from nothing.
- *   - PROPERTY DISCIPLINE: shared product primitive feedback and overlays use
- *     compositor-only opacity and individual translate/scale properties; they
- *     never take over a consumer's full transform. The opt-in Settle/Type
- *     presentation hooks below retain their legacy keyframes.
- *     The Confirm move may additionally transition background-color,
- *     border-color, and color at --nc-duration-confirm — colour is the state
- *     change itself, and a paint-only transition triggers no reflow. Never
- *     animate a property that shifts surrounding layout; no will-change;
- *     zero CLS.
- *   - FREQUENCY RULE: motion a user meets repeatedly (product UI, keyboard-
- *     triggered actions) does not animate. Delight is reserved for rarely-
- *     seen surfaces (marketing pages, first runs). Product surfaces that
- *     grow from this kit inherit THIS rule, not the marketing motion.
- *
- * BANNED: parallax, scroll-jacking, floating/bobbing idle loops, gradient
- * shimmer, staggered letter reveals, anything that moves a seam or hairline
- * after it settles, more than one theatrical moment per page, and
- * `transition: all` / `transition-property: all` (name the properties you
- * animate — a blanket transition drags unintended props off the compositor).
- *
- * REDUCED MOTION: prefers-reduced-motion removes movement entirely — Settle
- * and Type loops gone, Confirm instant, press transforms removed. Immediate
- * state and focus semantics remain. The page must read identically motionless.
- *
- * BOUNDARY: nc-pulse is the live running-state indicator on agentic surfaces
- * ONLY (state-row / run-timeline, running kind). DESIGN.md bans pulses for
- * state communication on state-tag; the two never blur.
- *
- * Provenance: duration/ease token values extracted from the archived prototype
- * `docs/experiments/design-canvas/chat-anim.jsx`. The prototype defined three
- * keyframes (nc-msg-in, nc-typing, nc-pulse) but only wired nc-typing;
- * nc-msg-in was defined-but-dead and nc-pulse's state dot was never rendered,
- * and there was NO reduced-motion handling. This layer finishes the motion.
- */
-
-:root {
-  /* Durations — extracted from chat-anim.jsx applied timings.
-     --nc-duration-stagger  : 160ms  ← `nc-typing 1s ${i*160}ms` per-dot stagger step
-                                        (also the per-message rise-in delay step);
-                                        the smallest brand cadence unit.
-     --nc-duration-msg-in   : 360ms  ← the brand transition rhythm; the prototype's
-                                        rise-in had no explicit duration, so it is
-                                        mapped to the footer's 360ms transition.
-     --nc-duration-transition: 360ms ← footer `width 360ms cubic-bezier(.3,.7,.2,1)`.
-     --nc-duration-typing   : 1s     ← `nc-typing 1s ... infinite` dot bounce loop.
-     --nc-duration-pulse    : 1.6s   ← `nc-pulse 1.6s ease-out infinite` ring loop.
-     --nc-duration-confirm  : 180ms  ← state feedback; 150–200 ms band (Confirm move). */
-  --nc-duration-stagger: 160ms;
-  --nc-duration-msg-in: 360ms;
-  --nc-duration-transition: 360ms;
-  --nc-duration-typing: 1s;
-  --nc-duration-pulse: 1.6s;
-  --nc-duration-confirm: 180ms;
-
-  /* Deprecated 0.10.x compatibility token; remove in a breaking release.
-     It remains defined only so patch upgrades do not invalidate existing
-     consumer CSS. Do not use it for reflow, count-up, or new runtime motion. */
-  --nc-duration-reflow: 250ms;
-
-  /* Asymmetric open/close cadence (craft-rule tokens for the ASYMMETRIC TIMING
-     rule above — a deliberate action opens slower than it dismisses).
-     --nc-duration-open : 220ms drives a popover/menu/dialog opening; the open
-                          invites.
-     --nc-duration-close: 140ms drives its dismissal; the close gets out of the
-                          way. Both stay under the 300ms UI-feedback ceiling. */
-  --nc-duration-open: 220ms;
-  --nc-duration-close: 140ms;
-
-  /* Easings — extracted from chat-anim.jsx.
-     --nc-ease-emphasized  : cubic-bezier(.3,.7,.2,1) ← footer width transition;
-                                                         the brand's settle curve.
-     --nc-ease-bounce      : ease-in-out ← `nc-typing ... ease-in-out` dot bounce.
-     --nc-ease-out         : ease-out    ← `nc-pulse 1.6s ease-out` ring decay;
-                                           the weak built-in stays only where
-                                           nc-pulse already uses it.
-     --nc-ease-out-strong  : cubic-bezier(0.23, 1, 0.32, 1) ← the strong exit/
-                                           feedback curve (Confirm, Invite, press). */
-  --nc-ease-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1);
-  --nc-ease-bounce: ease-in-out;
-  --nc-ease-out: ease-out;
-  --nc-ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
-}
-
-/* ── Keyframes ────────────────────────────────────────────────────────────
-   Three REAL keyframes, all wired below via the `.nc-anim-*` hooks. */
-
-/* Message bubble rise-in — opacity 0→1 + translateY(4px)→0.
-   Was defined-but-dead in the prototype; now real. */
-@keyframes nc-msg-in {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Typing-indicator dot bounce — the only keyframe the prototype actually applied. */
-@keyframes nc-typing {
-  0%,
-  80%,
-  100% {
-    opacity: 0.25;
-    transform: translateY(0);
-  }
-  40% {
-    opacity: 1;
-    transform: translateY(-2px);
-  }
-}
-
-/* Running-state pulse — a deliberate, subtle expanding ring. Drawn with
-   `currentColor` so the consuming atom owns the hue (no hard-coded color here);
-   for the running state only, not every dot. */
-@keyframes nc-pulse {
-  0% {
-    box-shadow: 0 0 0 0 currentColor;
-  }
-  70% {
-    box-shadow: 0 0 0 6px transparent;
-  }
-  100% {
-    box-shadow: 0 0 0 0 transparent;
-  }
-}
-
-/* ── Animation utility hooks (the reuse mechanism, D5) ─────────────────────
-   Each keyframe name appears here in an `animation` declaration so it is wired,
-   not just defined (AC-013). M6 chat atoms opt into these classes. Every hook
-   exposes `--nc-anim-delay` (default 0ms) so atoms can stagger by setting it,
-   e.g. `style="--nc-anim-delay: calc(var(--i) * var(--nc-duration-stagger))"`. */
-
-.nc-anim-msg-in {
-  animation: nc-msg-in var(--nc-duration-msg-in) var(--nc-ease-emphasized) both;
-  animation-delay: var(--nc-anim-delay, 0ms);
-}
-
-.nc-anim-typing {
-  animation: nc-typing var(--nc-duration-typing) var(--nc-ease-bounce) infinite;
-  animation-delay: var(--nc-anim-delay, 0ms);
-}
-
-.nc-anim-pulse {
-  animation: nc-pulse var(--nc-duration-pulse) var(--nc-ease-out) infinite;
-  animation-delay: var(--nc-anim-delay, 0ms);
-}
-
-/* ── Settle — enhancer-armed entrance (opt-in) ────────────────────────────
-   .nc-settle is the layout-container opt-in for scroll-driven entrance.
-   Base state is FULLY VISIBLE — no opacity rule on .nc-settle itself — so
-   no-JS and reduced-motion users get the complete static page.
-
-   Mechanism: enhancer-armed, run-once (no view() scrubbing).
-   chat-autoplay.js sets data-nc-settle="armed" on elements that are fully
-   below the viewport at init, then switches to data-nc-settle="in" on first
-   intersection (IntersectionObserver, threshold ~0.1). The observer unobserves
-   immediately after firing — the rise-in plays once and is never re-triggered
-   on re-entry or reversed on scroll-back. Elements already in or above the
-   viewport at load are never armed (no flash, hero region untouched).
-   No JS → no attribute → page fully visible. */
-@media (prefers-reduced-motion: no-preference) {
-  [data-nc-settle="armed"] {
-    opacity: 0;
-  }
-
-  [data-nc-settle="in"] {
-    animation: nc-msg-in var(--nc-duration-msg-in) var(--nc-ease-emphasized) both;
-  }
-}
-
-/* ── Reduced motion (mandatory, D5) ───────────────────────────────────────
-   Neutralize every hook: no animation, and a static, fully-visible end-state
-   so rise-in content is not stuck hidden at opacity 0. */
-@media (prefers-reduced-motion: reduce) {
-  .nc-anim-msg-in,
-  .nc-anim-typing,
-  .nc-anim-pulse {
-    animation: none;
-    opacity: 1;
-    transform: none;
-    box-shadow: none;
-  }
-}

package/dist/css/primitives.css

@@ -1,333 +0,0 @@
-/* primitives layer — atoms and molecules that sit on the layout-layer grid.
- *
- * Structural-geometry foundation (kept through the Tailwind+shadcn migration; see
- * index.css). The `.nc-marker` crosshair is the brand's corner mark: it stays
- * corners-only (placed via the `data-position` → grid-line-index map below,
- * never auto-placed), monochrome (a single `--nc-cross` color on both arms), and
- * token-weighted (`--nc-guide` line weight). Its position is derived from grid
- * placement (`grid-column-start`/`grid-row-start` against the field's track
- * lines), never a frame-relative pixel offset measured by eye. Every value in
- * this layer references an emitted `--nc-*` token; no raw color/radius/dimension
- * literal lives here. */
-.nc-cell {
-  position: relative;
-  z-index: 2;
-  display: grid;
-  min-width: 0;
-  min-height: var(--nc-h-cell-sm);
-  margin-right: var(--nc-guide);
-  margin-bottom: var(--nc-guide);
-  padding: var(--nc-cell-padding);
-  overflow: hidden;
-  overflow-wrap: anywhere;
-  place-content: center;
-  background: var(--nc-canvas);
-}
-
-.nc-cell-flush {
-  padding: 0;
-}
-
-.nc-diagonal-fill,
-.nc-cell-filler {
-  background:
-    repeating-linear-gradient(
-      -45deg,
-      var(--nc-canvas-soft) 0,
-      var(--nc-canvas-soft) 7px,
-      var(--nc-line) 7px,
-      var(--nc-line) 8px
-    ),
-    var(--nc-canvas);
-}
-
-.nc-dotted-field {
-  background:
-    radial-gradient(var(--nc-line) 0.8px, transparent 0.8px) 0 0 / 12px 12px,
-    var(--nc-canvas);
-}
-
-.nc-marker {
-  /* Centering offset built ONLY from the marker's own size + the universal line
-     token — never a sibling box. The marker is placed as a grid child so its box
-     corner lands on a track-line intersection (grid-column-start/grid-row-start);
-     pulling it back by half-its-size + half-a-line centers the crosshair arms
-     exactly on that intersection. This replaces the deleted seam-offset model,
-     which floated the crosshair off the frame border-half. */
-  --nc-cross-half: calc((var(--nc-cross-size) / 2) + (var(--nc-guide) / 2));
-  position: absolute;
-  z-index: 4;
-  grid-column-start: var(--nc-cross-column);
-  grid-row-start: var(--nc-cross-row);
-  width: var(--nc-cross-size);
-  height: var(--nc-cross-size);
-  inset: calc(var(--nc-cross-half) * -1);
-  pointer-events: none;
-}
-
-/* data-position is the declarative placement API: it maps the four frame
-   corners to the grid-line indices .nc-marker already consumes, so authored
-   markup that names a corner actually lands there. Inline --nc-cross-column /
-   --nc-cross-row still win (inline styles beat stylesheet rules), keeping an
-   explicit escape hatch for internal-track markers. -1 is the last grid line,
-   so corners track the grid across breakpoints — never a hardcoded 13/9. */
-.nc-marker[data-position="top-left"] {
-  --nc-cross-column: 1;
-  --nc-cross-row: 1;
-}
-
-.nc-marker[data-position="top-right"] {
-  --nc-cross-column: -1;
-  --nc-cross-row: 1;
-}
-
-.nc-marker[data-position="bottom-left"] {
-  --nc-cross-column: 1;
-  --nc-cross-row: -1;
-}
-
-.nc-marker[data-position="bottom-right"] {
-  --nc-cross-column: -1;
-  --nc-cross-row: -1;
-}
-
-.nc-marker::before,
-.nc-marker::after {
-  content: "";
-  position: absolute;
-  display: block;
-  background: var(--nc-cross);
-}
-
-.nc-marker::before {
-  top: 0;
-  bottom: 0;
-  left: 50%;
-  width: var(--nc-guide);
-  transform: translateX(-50%);
-}
-
-.nc-marker::after {
-  left: 0;
-  right: 0;
-  top: 50%;
-  height: var(--nc-guide);
-  transform: translateY(-50%);
-}
-
-.nc-blueprint-field {
-  /* The structural grid drawn as a background texture instead of bordered DOM
-     guide elements. Lines are painted at STRUCTURAL pitch — one tile per column
-     and row — so the 12-column reading is preserved (a fixed px pitch would read
-     as graph paper). Pitch reuses the surrounding grid field's column/row count.
-     This is the same technique nc-action-visual already uses; nc-blueprint-field
-     generalizes it so any surface can carry the blueprint without DOM guides. */
-  --nc-blueprint-columns: var(--nc-grid-columns, 12);
-  --nc-blueprint-rows: var(--nc-grid-rows, 8);
-  --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)
-    );
-  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));
-}
-
-/* Opt-in feather: soften the blueprint so it reads as atmosphere, not
-   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%);
-}
-
-.nc-rule-svg {
-  color: var(--nc-seam);
-  overflow: visible;
-}
-
-.nc-rule-svg line {
-  stroke: currentColor;
-  stroke-dasharray: 4 6;
-  stroke-linecap: round;
-}
-
-.nc-panel-cell {
-  display: grid;
-  min-width: 0;
-  min-height: var(--nc-h-cell-md);
-  padding: var(--nc-cell-padding);
-  align-content: center;
-  gap: 12px;
-  overflow: hidden;
-  overflow-wrap: anywhere;
-  background: var(--nc-canvas);
-  color: var(--nc-body);
-}
-
-.nc-artifact-surface {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-  border: var(--nc-guide) solid var(--nc-line);
-  padding: 18px;
-  /* The retired gradient tokens (Italia color contract §6) are gone; the artifact
-     surface keeps a calm, scale-driven dot-grid atmosphere on canvas. */
-  background:
-    radial-gradient(var(--nc-line) 0.8px, transparent 0.8px) 0 0 / 12px 12px,
-    var(--nc-canvas);
-  color: var(--nc-body);
-}
-
-.nc-artifact-bar {
-  height: 10px;
-  background: var(--nc-line);
-}
-
-.nc-artifact-bar:nth-of-type(1) {
-  width: 76%;
-}
-
-.nc-artifact-bar:nth-of-type(2) {
-  width: 56%;
-}
-
-.nc-artifact-bar:nth-of-type(3) {
-  width: 38%;
-}
-
-/* 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
-   stroke, butt caps, miter joins, currentColor — so a raw upstream icon dropped in
-   here also conforms. Size is set by [data-size] (sm 12 / md 16 / lg 24); md is the
-   default. Inline SVG is required for currentColor inheritance — an <img> renders in
-   isolation and cannot read it. */
-.nc-icon {
-  display: inline-flex;
-  flex: none;
-  width: 16px;
-  height: 16px;
-  color: inherit;
-  vertical-align: middle;
-}
-
-.nc-icon[data-size="sm"] {
-  width: 12px;
-  height: 12px;
-}
-
-.nc-icon[data-size="lg"] {
-  width: 24px;
-  height: 24px;
-}
-
-.nc-icon svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.5;
-  stroke-linecap: butt;
-  stroke-linejoin: miter;
-}
-
-/* nc-badge-secondary — a small fully-rounded metadata badge for "New", "Beta",
-   "Live", or similar labels (DESIGN.md badge-secondary). It carries the
-   {colors.canvas-soft} surface, {colors.body} text, and the {rounded.full}
-   radius; the caption type is applied in markup via .nc-type-caption so the
-   contract is the single source of the type. It is an inline chip with no seam
-   of its own beyond its hairline border. */
-.nc-badge-secondary {
-  display: inline-flex;
-  width: fit-content;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  border: var(--nc-guide) solid var(--nc-line);
-  border-radius: var(--nc-rounded-full);
-  padding: 1px 8px;
-  background: var(--nc-canvas-soft);
-  color: var(--nc-body);
-}
-
-/* nc-filter-chip — removable selected-filter label (DESIGN.md filter-chip).
-   It uses neutral chrome only: applied filter state is not workflow, lifecycle,
-   or taxonomy state, so color is reserved for the remove affordance focus ring. */
-.nc-filter-chip {
-  display: inline-flex;
-  width: fit-content;
-  min-height: var(--nc-filter-chip-height);
-  align-items: center;
-  justify-content: center;
-  gap: var(--nc-filter-chip-gap);
-  border: var(--nc-guide) solid var(--nc-line);
-  border-radius: var(--nc-rounded-sm);
-  padding: 0 var(--nc-xs);
-  background: var(--nc-canvas-soft);
-  color: var(--nc-body);
-}
-
-.nc-filter-chip svg {
-  width: var(--nc-filter-chip-icon);
-  height: var(--nc-filter-chip-icon);
-  flex: none;
-  stroke: currentColor;
-  stroke-width: 1.5;
-}
-
-.dark .nc-filter-chip {
-  border-color: var(--nc-dark-line);
-  background: var(--nc-dark-canvas-soft);
-  color: var(--nc-dark-body);
-}
-
-.nc-filter-chip:focus-visible {
-  outline: var(--nc-focus-ring-width) solid var(--nc-focus-ring);
-  outline-offset: 0;
-}
-
-/* nc-link-inline — the inline body link style (DESIGN.md link-inline). It reads
-   in the {colors.link} accent against the body rhythm (the body type is applied
-   in markup via .nc-type-body-md), keeps the natural underline so it stays
-   recognisable in running prose, and exposes a contrast-safe focus ring. It is
-   an inline atom, never a block. */
-.nc-link-inline {
-  color: var(--nc-link);
-  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);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .nc-link-inline:hover {
-    color: var(--nc-link-deep);
-  }
-}
-
-.nc-link-inline:focus-visible {
-  outline: var(--nc-focus-ring-width) solid var(--nc-focus-ring);
-  outline-offset: 0;
-  border-radius: var(--nc-rounded-md);
-}
-
-/* nc-label-mono — the mono eyebrow/kicker for section labels and low-priority
-   metadata (DESIGN.md label-mono). It reads in the {colors.muted} tone and the
-   caption-mono scale (applied in markup via .nc-type-caption-mono); this rule
-   adds only the uppercase eyebrow treatment, which is presentation the type
-   scale does not carry. It owns no box and no seam. */
-.nc-label-mono {
-  display: block;
-  margin: 0;
-  color: var(--nc-muted);
-  text-transform: uppercase;
-}

package/dist/css/reset.css

@@ -1,22 +0,0 @@
-/* reset layer — box-sizing, html/body, heading margins (split from old foundation per D10). */
-* {
-  box-sizing: border-box;
-}
-
-html {
-  min-width: 320px;
-  overflow-x: clip;
-  text-rendering: optimizeLegibility;
-}
-
-body {
-  margin: 0;
-  overflow-x: clip;
-}
-
-h1,
-h2,
-h3,
-p {
-  margin: 0;
-}