@nadicodeai/ui 12.1.32 → 12.1.34

package/dist/index.js

@@ -8,6 +8,8 @@ export * from "./components/agent-orb.js";
 export * from "./components/alert.js";
 export * from "./components/alert-dialog.js";
 export * from "./components/app-mark.js";
+export * from "./components/app-mark-frame.js";
+export * from "./components/app-mark-lazy.js";
 export * from "./components/aspect-ratio.js";
 export * from "./components/avatar.js";
 export * from "./components/automation-section.js";

package/dist/internal/agent-orb-motion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-orb-motion.d.ts","sourceRoot":"","sources":["../../src/internal/agent-orb-motion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AAa7F,wBAAgB,WAAW,CAAC,IAAI,EAAE,cAAc,UAE/C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,cAAc,UAGpE;AAKD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,UAIlE;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM;;;;;;;;EA0CjF;AAED,wBAAgB,WAAW,CACzB,OAAO,EAAE,wBAAwB,EACjC,KAAK,EAAE,aAAa,EACpB,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,SAAS,MAAM,EAAE,EACzB,KAAK,EAAE,MAAM,GAAG,OAAO;AACvB,mFAAmF;AACnF,GAAG,SAAI,QAgER"}
+{"version":3,"file":"agent-orb-motion.d.ts","sourceRoot":"","sources":["../../src/internal/agent-orb-motion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AAc7F,wBAAgB,WAAW,CAAC,IAAI,EAAE,cAAc,UAE/C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,cAAc,UAGpE;AAKD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,UAIlE;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM;;;;;;;;EA0CjF;AAED,wBAAgB,WAAW,CACzB,OAAO,EAAE,wBAAwB,EACjC,KAAK,EAAE,aAAa,EACpB,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,SAAS,MAAM,EAAE,EACzB,KAAK,EAAE,MAAM,GAAG,OAAO;AACvB,mFAAmF;AACnF,GAAG,SAAI,QAgER"}

package/dist/internal/agent-orb-motion.js

@@ -1,6 +1,7 @@
 const personalities = {
     ribbon: { speed: 0.55, tilt: 0.15 },
     nadia: { speed: 0.55, tilt: 0.15 },
+    sofia: { speed: 0.55, tilt: -0.15 },
     lattice: { speed: 0.28, tilt: -0.12 },
     orbit: { speed: 0.7, tilt: 0.2 },
     globe: { speed: 0.35, tilt: -0.16 },

package/dist/internal/agent-orb.d.ts

@@ -10,8 +10,11 @@ declare const agentOrbForms: {
     readonly morph: "shaping";
 };
 export type AgentOrbForm = keyof typeof agentOrbForms;
-/** A chosen form, or Nadia's own ribbon, which nobody chooses. */
-export type AgentOrbFigure = AgentOrbForm | "nadia";
+/**
+ * A chosen form, or one of nadicode's own two Agents, whose figures nobody
+ * chooses: Nadia's ribbon, and Sofia's, the same ribbon facing hers.
+ */
+export type AgentOrbFigure = AgentOrbForm | "nadia" | "sofia";
 export type AgentOrbSize = 20 | 24 | 32 | 40 | 64 | 96 | 160;
 /** How loudly one orb reads on its own ground. */
 export type AgentOrbPresence = "plain" | "over-picture";

package/dist/internal/agent-orb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-orb.d.ts","sourceRoot":"","sources":["../../src/internal/agent-orb.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,QAAQ,EAEb,KAAK,QAAQ,EAId,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,KAAK,aAAa,EAMnB,MAAM,oBAAoB,CAAC;AAE5B,QAAA,MAAM,aAAa;;;;;;;;CAQ0B,CAAC;AAE9C,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AACtD,kEAAkE;AAClE,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,OAAO,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC;AAE7D,kDAAkD;AAClD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,cAAc,CAAC;AACxD,+FAA+F;AAC/F,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,SAAS,CAAC;AA+BlD;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAuDpF;AA4FD,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,cAAc,CAAC;IACrB;;;OAGG;IACH,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,GAClD,CAAC;IAAE,MAAM,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,GAAG;IAAE,MAAM,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,CAAC;AAExF,wBAAgB,aAAa,CAAC,MAAM,EAAE,iBAAiB,EAAE,OAAO,EAAE,oBAAoB;;sBAIzC,OAAO;qBAAuB,aAAa;EAqLvF"}
+{"version":3,"file":"agent-orb.d.ts","sourceRoot":"","sources":["../../src/internal/agent-orb.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,QAAQ,EAEb,KAAK,QAAQ,EAId,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,KAAK,aAAa,EAMnB,MAAM,oBAAoB,CAAC;AAE5B,QAAA,MAAM,aAAa;;;;;;;;CAQ0B,CAAC;AAE9C,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AACtD;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,OAAO,GAAG,OAAO,CAAC;AAC9D,MAAM,MAAM,YAAY,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC;AAE7D,kDAAkD;AAClD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,cAAc,CAAC;AACxD,+FAA+F;AAC/F,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,SAAS,CAAC;AAiDlD;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAuDpF;AAoGD,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,cAAc,CAAC;IACrB;;;OAGG;IACH,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,GAClD,CAAC;IAAE,MAAM,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,GAAG;IAAE,MAAM,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,CAAC;AAExF,wBAAgB,aAAa,CAAC,MAAM,EAAE,iBAAiB,EAAE,OAAO,EAAE,oBAAoB;;sBAIzC,OAAO;qBAAuB,aAAa;EAmMvF"}

package/dist/internal/agent-orb.js

@@ -26,6 +26,22 @@ 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)];
+/**
+ * Sofia's four stripes: cobalto, giallo, the orb's own pigment and arancio, the
+ * identity hues Nadia does not wear, so side by side the two carry all six.
+ */
+const sofiaStripes = [
+    "--nc-identity-cobalto",
+    "--nc-identity-giallo",
+    null,
+    "--nc-identity-arancio",
+];
+const figureStripes = {
+    nadia: nadiaStripes,
+    sofia: sofiaStripes,
+};
 /** A stable direction on the unit sphere, the vendor's Fibonacci lattice. */
 function fibonacci(i, n) {
     const y = 1 - (2 * (i + 0.5)) / n;
@@ -90,13 +106,21 @@ export function stripedRibbonFrame(size, t, opts) {
     }
     return finalizeFrame(dots, [], opts.rMin);
 }
+/** Sofia's ribbon faces Nadia's: the same frame, mirrored across the vertical axis. */
+function facing(frame, size) {
+    for (const dot of frame.dots)
+        dot.x = size - dot.x;
+    return frame;
+}
 function paintAgentOrb(context, input) {
     const { form, size, seconds, color, state, age, reduced, breath, celebrationColors, stripeColors, } = input;
     const presence = presenceWeights[input.presence];
-    const preset = resolvePreset(agentOrbForms[form === "nadia" ? "ribbon" : form], size <= 32 ? 20 : 64);
+    const preset = resolvePreset(agentOrbForms[form === "nadia" || form === "sofia" ? "ribbon" : form], size <= 32 ? 20 : 64);
     const frame = form === "nadia"
         ? stripedRibbonFrame(size, seconds, preset.opts)
-        : MODE_FRAMES[preset.mode](size, seconds, preset.opts);
+        : form === "sofia"
+            ? facing(stripedRibbonFrame(size, seconds, preset.opts), size)
+            : MODE_FRAMES[preset.mode](size, seconds, preset.opts);
     context.clearRect(0, 0, size, size);
     const pose = motionPose(form, input.motion === "ambient" ? "idle" : state, reduced ? (state === "done" ? 2 : 0.6) : age);
     const gestureSeconds = reduced ? 0.8 : age / (state === "done" ? 0.575 : 0.2875);
@@ -159,6 +183,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 +269,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,9 +288,10 @@ 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)`));
-        stripeColors = nadiaStripes.map((token) => (token && appearance.getPropertyValue(token).trim()) || color);
+        celebrationColors = celebrationTokens.map((token) => computedColor(`color-mix(in oklch, ${appearance.getPropertyValue(token).trim() || color} 75%, white)`));
+        stripeColors = (figureStripes[form] ?? []).map((token) => (token && appearance.getPropertyValue(token).trim()) || color);
         play();
     }
     const visibility = new IntersectionObserver(([entry]) => {
@@ -261,7 +299,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 +321,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 +348,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.34",
   "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.34",
     "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"