@nadicodeai/ui 12.1.32 → 12.1.33

package/dist/internal/agent-orb.js

@@ -26,6 +26,8 @@ const presenceWeights = {
  * tricolore stays visible on a white ground as ink.
  */
 const nadiaStripes = ["--nc-identity-azzurro", "--nc-identity-verde", null, "--nc-identity-rosso"];
+const celebrationTokens = ["--nc-chart-5", "--nc-chart-6", "--nc-warning", "--nc-chart-4"];
+const appearanceTokens = [...celebrationTokens, ...nadiaStripes.filter((token) => token !== null)];
 /** A stable direction on the unit sphere, the vendor's Fibonacci lattice. */
 function fibonacci(i, n) {
     const y = 1 - (2 * (i + 0.5)) / n;
@@ -159,6 +161,7 @@ export function mountAgentOrb(canvas, options) {
     let color = getComputedStyle(canvas).color;
     let celebrationColors = [color];
     let stripeColors = [color];
+    let appearanceKey = "";
     /**
      * The box the orb is displayed at, in CSS pixels. A canvas stretched by
      * layout reads as pixels unless the engine paints at that size, so the box
@@ -244,6 +247,18 @@ export function mountAgentOrb(canvas, options) {
         probe.remove();
         return resolved || color;
     }
+    function readAppearanceKey(appearance, side) {
+        return [
+            side,
+            window.devicePixelRatio || 1,
+            appearance.color,
+            ...appearanceTokens.map((token) => appearance.getPropertyValue(token)),
+        ].join("|");
+    }
+    function refreshIfChanged() {
+        if (readAppearanceKey(getComputedStyle(canvas), measure()) !== appearanceKey)
+            refresh();
+    }
     function refresh() {
         painted = measure();
         const backing = Math.max(1, Math.round(painted * Math.min(window.devicePixelRatio || 1, 2)));
@@ -251,8 +266,9 @@ export function mountAgentOrb(canvas, options) {
         canvas.height = backing;
         ratio = backing / painted;
         const appearance = getComputedStyle(canvas);
+        appearanceKey = readAppearanceKey(appearance, painted);
         color = appearance.color;
-        celebrationColors = ["--nc-chart-5", "--nc-chart-6", "--nc-warning", "--nc-chart-4"].map((token) => computedColor(`color-mix(in oklch, ${appearance.getPropertyValue(token).trim() || color} 75%, white)`));
+        celebrationColors = celebrationTokens.map((token) => computedColor(`color-mix(in oklch, ${appearance.getPropertyValue(token).trim() || color} 75%, white)`));
         stripeColors = nadiaStripes.map((token) => (token && appearance.getPropertyValue(token).trim()) || color);
         play();
     }
@@ -261,7 +277,7 @@ export function mountAgentOrb(canvas, options) {
         play();
     });
     visibility.observe(canvas);
-    const appearance = new MutationObserver(refresh);
+    const appearance = new MutationObserver(refreshIfChanged);
     for (let ancestor = canvas; ancestor; ancestor = ancestor.parentElement) {
         appearance.observe(ancestor, {
             attributes: true,
@@ -283,12 +299,12 @@ export function mountAgentOrb(canvas, options) {
         if (event.propertyName === "color" &&
             event.target instanceof Node &&
             event.target.contains(canvas))
-            refresh();
+            refreshIfChanged();
     }
     document.addEventListener("transitionend", settle, true);
     motion.addEventListener("change", play);
     document.addEventListener("visibilitychange", play);
-    window.addEventListener("resize", refresh);
+    window.addEventListener("resize", refreshIfChanged);
     refresh();
     return {
         setState(value) {
@@ -310,7 +326,7 @@ export function mountAgentOrb(canvas, options) {
             document.removeEventListener("transitionend", settle, true);
             motion.removeEventListener("change", play);
             document.removeEventListener("visibilitychange", play);
-            window.removeEventListener("resize", refresh);
+            window.removeEventListener("resize", refreshIfChanged);
         },
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "12.1.32",
+  "version": "12.1.33",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -40,6 +40,11 @@
       "types": "./dist/lib/format-token-count.d.ts",
       "import": "./dist/lib/format-token-count.js"
     },
+    "./components/app-mark-lazy": {
+      "types": "./dist/components/app-mark-lazy.d.ts",
+      "browser": "./dist/components/app-mark-lazy.js",
+      "import": "./dist/components/app-mark-lazy/server.js"
+    },
     "./components/*": {
       "types": "./dist/components/*.d.ts",
       "import": "./dist/components/*.js"
@@ -72,7 +77,7 @@
     "@assistant-ui/react": "0.15.21",
     "@assistant-ui/react-markdown": "0.14.16",
     "@base-ui/react": "^1.8.0",
-    "@nadicodeai/design-system": "12.1.32",
+    "@nadicodeai/design-system": "12.1.33",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -118,6 +123,7 @@
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "shadcn": "4.21.0",
+    "svgo": "^4.1.0",
     "tailwindcss": "^4.3.3",
     "typescript": "^6",
     "vitest": "^5.0.0"