@nadicodeai/design-system 0.12.0 → 0.13.0

package/AGENTS.md

@@ -21,6 +21,7 @@ Handoff gate: `npm run lint:design && npm run lint && npm run build && npm run t
 | Shared design-language terms | `CONTEXT.md` |
 | Colors, tokens, typography, layout doctrine, seam ownership, component semantics | `DESIGN.md` (read it before stating any of these) |
 | CSS layers, token pipeline, dark remaps, generated outputs, their guards | `DESIGN.md` "CSS Architecture & Token Pipeline"; decision history in `../docs/adr/` |
+| Motion direction and runtime | `DESIGN.md` "Motion", `src/css/motion.css`, then `../skills/nadicodeai-product-design/references/motion-craft.md` for agent procedure |
 | Package exports | `package.json` (guard: `tests/guards/build-produces-exports.test.ts`) |
 | Static or non-React consumption | `README.md` |
 | React consumption | `../@nadicodeai/ui/docs/consuming-cross-repo.md` |
@@ -40,4 +41,4 @@ Handoff gate: `npm run lint:design && npm run lint && npm run build && npm run t
 - External references are source-first: read live DOM/CSSOM rules before authoring; screenshots verify, they never author. Map every imported behavior to `DESIGN.md` or an explicit user approval, ask when the contract leaves a decision open, and never import reference mood, polarity, decoration, or animation uninvited. Stop and re-read source before a second visual patch to the same component.
 - Name everything as NadicodeAI-owned primitives; source brands (Vercel, Attio) appear only in reference notes, never in names, comments, or contracts.
 - Any change to package-consumed output ends with an explicit release decision, a version bump or a `[no-publish]` commit marker (enforced by the pre-push release gate; procedure: `../docs/internal/npm-publishing.md`).
-- The deleted `design-canvas/` prototypes live only in git history. `src/css/motion.css` preserves current runtime transitions and animations, while `src/js/chat-autoplay.js` is the single allowed runtime JS enhancer; never reconstruct the prototypes or add a second runtime JS surface.
+- The deleted `design-canvas/` prototypes live only in git history. `src/css/motion.css` owns shared runtime motion primitives, while `src/js/chat-autoplay.js` is the single allowed runtime JS enhancer; never reconstruct the prototypes or add a second runtime JS surface.

package/DESIGN.md

@@ -566,6 +566,10 @@ Corners are restrained and assigned by material role.
 
 Public page-grammar cells are not cards and remain square because their parent frame supplies the visual system. Product cards are resting content surfaces and use the 6 px role above; they do not gain thicker borders, nested frames, or a shadow merely because they contain grouped settings.
 
+## Motion
+
+Motion clarifies state, feedback, hierarchy, or continuity; it does not decorate routine work. Repeated interactions stay fast and quiet, while rare explanatory moments may be more expressive. Motion preserves meaning when movement is reduced.
+
 ## Components
 
 This section is the semantic catalog for framework-agnostic components. Exact reusable values stay in the token maps above; CSS owns component composition. Page grammar and composition semantics live in `## Layout`, while React components and reusable sections live in `@nadicodeai/ui`.

package/dist/css/chat-autoplay.js

@@ -398,8 +398,8 @@
     if (thread.__ncAutoplayPlayer) return thread.__ncAutoplayPlayer;
     var player = new ChatThreadPlayer(thread);
     // Read the stagger token off the live thread (parity with motion.css);
-    // fallback equals the motion.css default (160ms) if the bundle is absent.
-    player.staggerMs = durationToken(thread, "--nc-duration-stagger", 160);
+    // fallback equals the motion.css default (60ms) if the bundle is absent.
+    player.staggerMs = durationToken(thread, "--nc-duration-stagger", 60);
     thread.__ncAutoplayPlayer = player;
     players.push(player);
     // Inject the pause/resume button unless reduced-motion is on (that path

package/dist/css/index.css

@@ -728,18 +728,25 @@
 /* src/css/motion.css */
 @layer motion {
   :root {
-    --nc-duration-stagger: 160ms;
-    --nc-duration-msg-in: 360ms;
-    --nc-duration-transition: 360ms;
+    --nc-duration-stagger: 60ms;
+    --nc-duration-msg-in: 240ms;
+    --nc-duration-transition: 240ms;
     --nc-duration-typing: 1s;
     --nc-duration-pulse: 1.6s;
+    --nc-duration-shimmer: 2s;
     --nc-duration-confirm: 180ms;
     --nc-duration-open: 220ms;
     --nc-duration-close: 140ms;
+    --nc-duration-drawer: 450ms;
+    --nc-duration-drawer-swipe: 400ms;
     --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);
+    --nc-ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
+    --nc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+    --nc-ease-bounce: var(--nc-ease-in-out-strong);
+    --nc-ease-out: var(--nc-ease-out-strong);
+    --default-transition-duration: var(--nc-duration-confirm);
+    --default-transition-timing-function: var(--nc-ease-out-strong);
   }
   @keyframes nc-msg-in {
     from {
@@ -763,13 +770,20 @@
   }
   @keyframes nc-pulse {
     0% {
-      box-shadow: 0 0 0 0 currentColor;
+      opacity: 0.45;
+      transform: scale(0.7);
     }
-    70% {
-      box-shadow: 0 0 0 6px transparent;
+    70%, 100% {
+      opacity: 0;
+      transform: scale(1.9);
     }
-    100% {
-      box-shadow: 0 0 0 0 transparent;
+  }
+  @keyframes nc-shimmer {
+    from {
+      background-position: 100% center;
+    }
+    to {
+      background-position: 0% center;
     }
   }
   .nc-anim-msg-in {
@@ -781,9 +795,59 @@
     animation-delay: var(--nc-anim-delay, 0ms);
   }
   .nc-anim-pulse {
+    position: relative;
+  }
+  .nc-anim-pulse::after {
+    content: "";
+    position: absolute;
+    inset: -2px;
+    border: var(--nc-guide) solid currentColor;
+    border-radius: inherit;
+    pointer-events: none;
     animation: nc-pulse var(--nc-duration-pulse) var(--nc-ease-out) infinite;
     animation-delay: var(--nc-anim-delay, 0ms);
   }
+  .nc-anim-shimmer {
+    --nc-shimmer-spread: 1em;
+    position: relative;
+  }
+  .nc-anim-shimmer::after {
+    content: attr(data-nc-shimmer);
+    content: attr(data-nc-shimmer) / "";
+    position: absolute;
+    inset: 0;
+    color: transparent;
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent calc(50% - var(--nc-shimmer-spread)),
+        var(--background) 50%,
+        transparent calc(50% + var(--nc-shimmer-spread)));
+    background-size: 250% 100%;
+    background-repeat: no-repeat;
+    background-clip: text;
+    pointer-events: none;
+    animation: nc-shimmer var(--nc-duration-shimmer) linear infinite;
+  }
+  .nc-transition-paint {
+    transition-property:
+      background-color,
+      border-color,
+      color,
+      opacity;
+    transition-duration: var(--nc-duration-confirm);
+    transition-timing-function: var(--nc-ease-out-strong);
+  }
+  .nc-transition-opacity {
+    transition-property: opacity;
+    transition-duration: var(--nc-duration-confirm);
+    transition-timing-function: var(--nc-ease-out-strong);
+  }
+  .nc-transition-transform {
+    transition-property: transform;
+    transition-duration: var(--nc-duration-confirm);
+    transition-timing-function: var(--nc-ease-out-strong);
+  }
   @media (prefers-reduced-motion: no-preference) {
     [data-nc-settle=armed] {
       opacity: 0;
@@ -794,12 +858,21 @@
   }
   @media (prefers-reduced-motion: reduce) {
     .nc-anim-msg-in,
-    .nc-anim-typing,
-    .nc-anim-pulse {
+    .nc-anim-typing {
       animation: none;
       opacity: 1;
       transform: none;
-      box-shadow: none;
+    }
+    .nc-anim-shimmer::after,
+    .nc-anim-pulse::after {
+      animation: none;
+      opacity: 0;
+      transform: none;
+    }
+    .nc-transition-paint,
+    .nc-transition-opacity,
+    .nc-transition-transform {
+      transition: none;
     }
   }
 }
@@ -1524,10 +1597,10 @@
     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);
+      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),
+      opacity var(--nc-duration-confirm) var(--nc-ease-out-strong);
   }
   @media (hover: hover) and (pointer: fine) {
     .nc-link-inline:hover {
@@ -1751,10 +1824,10 @@
     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);
+      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),
+      opacity var(--nc-duration-confirm) var(--nc-ease-out-strong);
   }
   @media (hover: hover) and (pointer: fine) {
     .nc-chat-pause:hover {
@@ -1767,13 +1840,7 @@
     border-color: var(--nc-body);
   }
   .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;
-    }
+    opacity: 0.9;
   }
   .nc-chat-thread-footer {
     display: flex;
@@ -2368,10 +2435,14 @@
   .nc-usage-meter-fill {
     position: absolute;
     inset: 0;
-    right: auto;
-    width: var(--nc-usage, 0%);
+    width: 100%;
+    scale: var(--nc-usage, 0%) 1;
+    transform-origin: left center;
     background: var(--nc-ink);
-    transition: width var(--nc-duration-transition) var(--nc-ease-emphasized);
+    transition: scale var(--nc-duration-transition) var(--nc-ease-emphasized);
+  }
+  .nc-usage-meter-fill:dir(rtl) {
+    transform-origin: right center;
   }
   @media (prefers-reduced-motion: reduce) {
     .nc-usage-meter-fill {

package/package.json

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