@nadicodeai/design-system 0.10.0 → 0.10.1

package/AGENTS.md

@@ -76,6 +76,7 @@ Generated-artifact and runtime-JS prohibitions live in the Forbidden Patterns ta
 | Command | When |
 | --- | --- |
 | `npm run lint:design` | After any `DESIGN.md` edit |
+| `npm run lint` | After editing JavaScript or TypeScript tooling, tests, or the chat enhancer |
 | `npm run build` | After any `DESIGN.md` edit; regenerates `dist/tokens/nadicode.dtcg.json` and `dist/tailwind/nadicode.tailwind.json` |
 | `npm run generate:icons` | After bumping `lucide-static`; rebakes `dist/icons/` (also runs inside `npm run build`) |
 | `npm run test` | Before handoff. Browser-free by design — safe for agents and CI |
@@ -86,7 +87,7 @@ Generated-artifact and runtime-JS prohibitions live in the Forbidden Patterns ta
 Before claiming work complete (from this directory, or with `-w design-system` from the repo root):
 
 ```bash
-npm run lint:design && npm run build && npm run test
+npm run lint:design && npm run lint && npm run build && npm run test
 ```
 
 `npm run test` MUST stay browser-free: browser-driven tests live in `tests/visual/*.visual.ts` (outside the default `*.test.ts` glob) and run only via `npm run test:visual`. Never add a browser test to the default suite — parallel headless sessions inside the gate are what orphaned Chrome and hung it; that is the real constraint, not `agent-browser` itself.

package/dist/css/chat-autoplay.js

@@ -176,10 +176,10 @@
   };
 
   ChatThreadPlayer.prototype._sleep = function (ms) {
-    var self = this;
+    var timers = this.timers;
     return new Promise(function (resolve) {
       var t = setTimeout(resolve, ms);
-      self.timers.push(t);
+      timers.push(t);
     });
   };
 
@@ -272,34 +272,33 @@
   // continuation can detect that the player was stopped-and-re-armed underneath
   // it (see the `generation` note in the constructor).
   ChatThreadPlayer.prototype._runLoop = function () {
-    var self = this;
     var myGen = this.generation;
-    var stale = function () {
-      return self.cancelled || self.generation !== myGen;
-    };
-    return (function loop() {
-      if (stale()) return Promise.resolve();
-      self._hideAllMessages();
-      self._hideTyping();
-      self._setMeter(0);
-      return self
+    function stale(player) {
+      return player.cancelled || player.generation !== myGen;
+    }
+    function loop(player) {
+      if (stale(player)) return Promise.resolve();
+      player._hideAllMessages();
+      player._hideTyping();
+      player._setMeter(0);
+      return player
         ._sleep(START_DELAY)
         .then(function () {
           var chain = Promise.resolve();
-          self.messages.forEach(function (msg, i) {
+          player.messages.forEach(function (msg, i) {
             chain = chain.then(function () {
-              if (stale()) return;
+              if (stale(player)) return;
               var role = roleOf(msg);
               var t = defaultTiming(role, (msg.textContent || "").trim().length);
               var step = function () {
-                if (stale()) return;
-                self._hideTyping();
-                self._reveal(msg, i);
-                return self._sleep(t.holdMs);
+                if (stale(player)) return;
+                player._hideTyping();
+                player._reveal(msg, i);
+                return player._sleep(t.holdMs);
               };
               if (t.typingMs > 0) {
-                self._showTyping();
-                return self._sleep(t.typingMs).then(step);
+                player._showTyping();
+                return player._sleep(t.typingMs).then(step);
               }
               return step();
             });
@@ -307,17 +306,18 @@
           return chain;
         })
         .then(function () {
-          if (stale()) return;
+          if (stale(player)) return;
           // Mark completion before the hold so the observer entry branch can
           // show the final state on re-entry without replaying from blank.
-          self.completedOnce = true;
-          return self._sleep(LOOP_HOLD);
+          player.completedOnce = true;
+          return player._sleep(LOOP_HOLD);
         })
         .then(function () {
-          if (stale()) return;
-          return loop();
+          if (stale(player)) return;
+          return loop(player);
         });
-    })();
+    }
+    return loop(this);
   };
 
   ChatThreadPlayer.prototype.play = function () {
@@ -363,7 +363,6 @@
   // Never called in reduced-motion mode (contract (b): no button for a path
   // that plays nothing).
   ChatThreadPlayer.prototype._injectPauseButton = function () {
-    var self = this;
     var thread = this.thread;
     var subject = thread.getAttribute("data-nc-autoplay-name") || "demonstration";
     var btn = document.createElement("button");
@@ -371,22 +370,25 @@
     btn.className = "nc-chat-pause";
     btn.setAttribute("aria-pressed", "false");
     btn.textContent = "Pause " + subject;
-    btn.addEventListener("click", function () {
-      if (self.userPaused) {
-        // Resume: clear the latch, rearm and play.
-        self.userPaused = false;
-        btn.setAttribute("aria-pressed", "false");
-        btn.textContent = "Pause " + subject;
-        self.rearm();
-        self.play();
-      } else {
-        // Pause: set the latch, stop and reveal full content.
-        self.userPaused = true;
-        btn.setAttribute("aria-pressed", "true");
-        btn.textContent = "Resume " + subject;
-        self.stop();
-      }
-    });
+    btn.addEventListener(
+      "click",
+      function () {
+        if (this.userPaused) {
+          // Resume: clear the latch, rearm and play.
+          this.userPaused = false;
+          btn.setAttribute("aria-pressed", "false");
+          btn.textContent = "Pause " + subject;
+          this.rearm();
+          this.play();
+        } else {
+          // Pause: set the latch, stop and reveal full content.
+          this.userPaused = true;
+          btn.setAttribute("aria-pressed", "true");
+          btn.textContent = "Resume " + subject;
+          this.stop();
+        }
+      }.bind(this),
+    );
     // Insert before the body so the button sits above the scrolling content.
     var body = thread.querySelector(".nc-chat-thread-body");
     if (body) {

package/dist/css/motion.css

@@ -23,8 +23,26 @@
  *     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. Medium-frequency
+ *     product motion (list reflow, rolling numbers) uses --nc-duration-reflow
+ *     (250 ms); --nc-duration-msg-in (360 ms) is reserved for the one-time
+ *     Settle entrance, never for motion the operator meets on every refetch.
+ *   - 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.
- *   - Compositor-only (opacity/transform); no will-change; zero CLS.
+ *   - PROPERTY DISCIPLINE: movement is compositor-only (opacity/transform).
+ *     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
@@ -32,7 +50,9 @@
  *
  * 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.
+ * 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 still. The page must read
@@ -68,6 +88,24 @@
   --nc-duration-pulse: 1.6s;
   --nc-duration-confirm: 180ms;
 
+  /* Frequency-tiered UI cadence (craft rule, not a prototype extraction).
+     --nc-duration-reflow : 250ms ← medium-frequency product motion (list
+                                     reflow, rolling numbers) — kept under the
+                                     300ms UI-feedback ceiling so it never feels
+                                     sluggish on a surface met on every refetch.
+                                     360ms (--nc-duration-msg-in) stays reserved
+                                     for the one-time Settle entrance. */
+  --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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -46,6 +46,7 @@
     "generate:icons": "tsx scripts/generate-icons.ts",
     "generate:favicons": "tsx scripts/generate-favicons.ts",
     "lint:design": "design.md lint DESIGN.md",
+    "lint": "eslint --max-warnings=0",
     "test": "vitest run",
     "test:visual": "vitest run --config vitest.visual.config.ts",
     "prepublishOnly": "npm run build"
@@ -54,10 +55,12 @@
     "@google/design.md": "0.1.1",
     "@types/node": "^22",
     "agent-browser": "^0.31.1",
+    "eslint": "^9.39.4",
     "lucide-static": "^1.17.0",
     "style-dictionary": "^5.4.3",
     "tsx": "^4.21.0",
     "typescript": "^5",
+    "typescript-eslint": "^8.46.0",
     "vitest": "^4.1.6"
   }
 }