@nadicodeai/ui 12.1.133 → 12.1.135

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

@@ -1,19 +1,27 @@
+import { spring } from "motion";
 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 },
-    network: { speed: 0.55, tilt: 0.1 },
-    braid: { speed: 0.65, tilt: -0.2 },
-    morph: { speed: 0.9, tilt: 0.12 },
+    ribbon: { speed: 0.55 },
+    nadia: { speed: 0.55 },
+    sofia: { speed: 0.55 },
+    lattice: { speed: 0.28 },
+    orbit: { speed: 0.7 },
+    globe: { speed: 0.35 },
+    network: { speed: 0.55 },
+    braid: { speed: 0.65 },
+    morph: { speed: 0.9 },
 };
 export function nativeSpeed(form) {
     return personalities[form].speed;
 }
-export function stateSpeed(state, form) {
-    const speed = { idle: 1, working: 1, thinking: 1, waiting: 0, blocked: 0, done: 0.65 };
+export function stateSpeed(state, form, age = 0, timing = defaultTiming) {
+    const speed = {
+        idle: 0.864,
+        working: 1,
+        thinking: 0.55,
+        waiting: 0,
+        blocked: 0,
+        done: age >= timing.doneDuration ? 0.72 : 0.65,
+    };
     return speed[state] * nativeSpeed(form);
 }
 /** The breath's period, in seconds. */
@@ -29,58 +37,166 @@ export function reducedBreath(state, seconds) {
     const phase = (1 - Math.cos((seconds * Math.PI * 2) / BREATH_SECONDS)) / 2;
     return 1 - 0.55 * phase;
 }
-export function motionPose(form, state, age) {
-    const personality = personalities[form];
+export function readOrbTiming(style) {
+    const seconds = (name, fallback) => {
+        const token = style?.getPropertyValue(`--nc-duration-${name}`).trim() ?? "";
+        return token ? Number.parseFloat(token) * (token.endsWith("ms") ? 0.001 : 1) : fallback;
+    };
+    const wait = seconds("wait", 1.6);
+    const confirm = seconds("confirm", 0.18);
+    const transition = seconds("transition", 0.24);
+    const period = (beats) => Math.round(wait * beats * 1000) / 1000;
+    const gesture = spring({ keyframes: [0, 1], duration: transition * 2000, bounce: 0.1 });
+    return {
+        wait,
+        confirm,
+        transition,
+        doneDuration: period(3),
+        blockedDuration: period(1.25),
+        gestureAge: (age) => (age * transition * 2) / wait,
+        settle: (age, delay = 0) => age < delay ? 0 : gesture.next((age - delay) * 1000).value,
+    };
+}
+const defaultTiming = readOrbTiming();
+const clamp = (value) => Math.min(1, Math.max(0, value));
+const smooth = (value) => {
+    const t = clamp(value);
+    return t * t * (3 - 2 * t);
+};
+export function motionPose(state, age, timing = defaultTiming, reduced = false) {
     let sx = 0.82;
     let sy = 0.82;
     let y = 0;
-    const x = 0;
+    let x = 0;
     let rotation = 0;
-    const split = 0;
-    let opacity = 1;
     if (state === "idle") {
-        const breath = Math.sin((age * Math.PI) / 2);
+        const breath = Math.sin(((reduced ? 0.6 : age) * Math.PI * 2) / (timing.wait * 4));
         sx += breath * 0.01;
         sy += breath * 0.01;
         y = -breath * 0.004;
     }
-    else if (state === "waiting") {
-        sx = 0.8;
-        sy = 0.84;
-        y = -0.015;
-        opacity = 0.75;
+    else if (!reduced && state === "waiting") {
+        const gestureAge = timing.gestureAge(age);
+        const breath = Math.sin((age * Math.PI * 2) / (timing.wait * 3));
+        const anticipation = Math.sin(clamp(gestureAge / timing.confirm) * Math.PI);
+        const lean = timing.settle(gestureAge, timing.confirm * 0.55);
+        const scale = 1 - anticipation * 0.018 + breath * 0.006;
+        sx *= scale;
+        sy *= scale;
+        y = -lean * 0.018;
+        rotation = (-lean * 4.5 * Math.PI) / 180;
     }
-    else if (state === "blocked") {
-        const stop = Math.min(1, age / 0.25);
-        const effort = Math.sin(stop * Math.PI);
-        sx = 0.8 + effort * 0.015;
-        sy = 0.82 - stop * 0.08;
-        y = stop * 0.025 - effort * 0.018;
-        rotation = personality.tilt * stop * 0.4;
-        opacity = 1 - stop * 0.4;
+    else if (!reduced && state === "blocked") {
+        const gestureAge = timing.gestureAge(age);
+        const strikeAt = timing.confirm * 0.85;
+        const recoil = smooth(gestureAge / strikeAt) * (1 - timing.settle(gestureAge, strikeAt));
+        sx *= 1 - recoil * 0.018;
+        sy *= 1 + recoil * 0.012;
+        x = -recoil * 0.034;
+        y = recoil * 0.014;
+        rotation = (-recoil * 4 * Math.PI) / 180;
     }
-    else if (state === "done") {
-        if (age < 0.18) {
-            const anticipation = Math.sin((Math.PI * age) / 0.18);
+    else if (!reduced && state === "done") {
+        const phase = (age * 1.3) / (timing.wait * 2.25);
+        if (phase < 0.18) {
+            const anticipation = Math.sin((Math.PI * phase) / 0.18);
             sx += 0.03 * anticipation;
             sy -= 0.04 * anticipation;
             y = 0.012 * anticipation;
         }
-        else if (age < 1.3) {
-            const leap = (age - 0.18) / 1.12;
+        else if (phase < 1.3) {
+            const leap = (phase - 0.18) / 1.12;
             y = -0.07 * Math.sin(Math.PI * leap);
             sx += 0.025 * Math.sin(Math.PI * leap);
             sy += 0.035 * Math.sin(Math.PI * leap);
             rotation = Math.sin(leap * Math.PI * 2) * 0.07;
         }
     }
-    return { sx, sy, x, y, rotation, split, opacity };
+    return { sx, sy, x, y, rotation };
+}
+// Lucide Pause and Ban geometry, lucide-static 1.58.0, ISC licence.
+function paintHeldCue(context, state, size, age, reduced, color, timing) {
+    const gestureAge = timing.gestureAge(age);
+    const enter = reduced ? 1 : smooth((gestureAge - timing.confirm * 0.35) / timing.confirm);
+    const landed = reduced ? 1 : timing.settle(gestureAge, timing.confirm * 0.35);
+    const side = Math.max(7, Math.min(36, size * 0.26));
+    context.save();
+    context.fillStyle = color;
+    context.strokeStyle = color;
+    context.globalAlpha = enter * 0.95;
+    context.translate(size / 2, size / 2);
+    if (state === "waiting") {
+        const lean = reduced ? 0 : timing.settle(gestureAge, timing.confirm * 0.55);
+        const breath = reduced ? 0 : Math.sin((age * Math.PI * 2) / (timing.wait * 3));
+        context.translate(0, (1 - landed) * -0.12 * side);
+        context.rotate((-lean * 2 * Math.PI) / 180);
+        const scale = 0.94 + landed * 0.06;
+        context.scale(scale, scale);
+        context.scale(side / 24, side / 24);
+        for (const [index, x] of [14, 5].entries()) {
+            const arrival = reduced
+                ? 1
+                : timing.settle(gestureAge, timing.confirm * (index === 0 ? 0.65 : 0.2));
+            const direction = index === 0 ? 1 : -1;
+            context.save();
+            context.globalAlpha = enter * 0.95 * clamp(arrival) * (reduced ? 1 : 0.96 + breath * 0.04);
+            context.translate(x - 9.5 + direction * (1 - arrival) * 1.45 * 5, (1 - arrival) * -0.24 * 18);
+            context.rotate((direction * (1 - arrival) * 14 * Math.PI) / 180);
+            context.scale(1, 1 + (1 - arrival) * 0.12);
+            context.beginPath();
+            context.roundRect(-2.5, -9, 5, 18, 1);
+            context.fill();
+            context.restore();
+        }
+    }
+    else {
+        context.translate(0, (1 - landed) * -0.1 * side);
+        context.rotate(((1 - landed) * -12 * Math.PI) / 180);
+        const scale = 1 + (1 - landed) * 0.18;
+        context.scale(scale, scale);
+        context.scale(side / 24, side / 24);
+        context.lineWidth = Math.max(1.6, 24 / side);
+        context.lineCap = "round";
+        context.beginPath();
+        context.arc(0, 0, 10, 0, Math.PI * 2);
+        context.stroke();
+        const slash = reduced ? 1 : smooth((gestureAge - timing.confirm * 0.8) / timing.confirm);
+        context.beginPath();
+        context.moveTo(-7.071, -7.071);
+        context.lineTo(-7.071 + 14.141 * slash, -7.071 + 14.142 * slash);
+        context.stroke();
+        if (!reduced && size >= 40) {
+            const impact = clamp((gestureAge - timing.confirm * 0.85) / timing.transition);
+            context.globalAlpha *= Math.sin(impact * Math.PI) * 0.65;
+            context.lineWidth = (1.4 * 24) / side;
+            for (const direction of [-1, 1]) {
+                context.beginPath();
+                const x = direction * (14.52 + impact * 5.472);
+                const y = direction * (10.34 + impact * 1.68);
+                context.moveTo(x - 1.612, y - 1.612);
+                context.lineTo(x + 1.612, y + 1.612);
+                context.stroke();
+            }
+        }
+    }
+    context.restore();
 }
 export function paintOrbCue(context, state, size, seconds, reduced, colors, depth, 
 /** The orb's whole ink, so the cue breathes with the body under reduced motion. */
-ink = 1) {
+ink = 1, timing = defaultTiming, statusColor = colors[0] ?? "currentColor") {
+    if (state === "waiting" || state === "blocked") {
+        if (depth === "front")
+            paintHeldCue(context, state, size, seconds, reduced, statusColor, timing);
+        return;
+    }
     if (state !== "working" && state !== "thinking" && state !== "done")
         return;
+    seconds *=
+        state === "done"
+            ? 3.1 / timing.doneDuration
+            : state === "working"
+                ? 7.2 / (timing.wait * 2)
+                : 3.6 / (timing.wait * 1.5);
     context.save();
     if (state === "thinking") {
         if (depth === "front") {

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;;;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;AAqGD,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;EAoMvF"}
+{"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,EAOnB,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;AAyDlD;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAuDpF;AA6HD,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;EA0MvF"}

package/dist/internal/agent-orb.js

@@ -1,5 +1,5 @@
 import { finalizeFrame, MODE_FRAMES, makeProj, radiusScale, resolvePreset, } from "thinking-orbs/engine";
-import { motionPose, nativeSpeed, paintOrbCue, reducedBreath, stateSpeed, } from "./agent-orb-motion.js";
+import { motionPose, nativeSpeed, paintOrbCue, reducedBreath, readOrbTiming, stateSpeed, } from "./agent-orb-motion.js";
 const agentOrbForms = {
     orbit: "working",
     globe: "searching",
@@ -27,7 +27,15 @@ const presenceWeights = {
  */
 const nadiaStripes = ["--nc-identity-azzurro", "--nc-identity-verde", null, "--nc-identity-rosso"];
 const celebrationTokens = ["--nc-acqua-700", "--nc-viola-700", "--nc-warning", "--nc-rosso-700"];
-const appearanceTokens = [...celebrationTokens, ...nadiaStripes.filter((token) => token !== null)];
+const statusTokens = { waiting: "--nc-warning-deep", blocked: "--nc-error" };
+const appearanceTokens = [
+    ...celebrationTokens,
+    ...nadiaStripes.filter((token) => token !== null),
+    ...Object.values(statusTokens),
+    "--nc-duration-wait",
+    "--nc-duration-confirm",
+    "--nc-duration-transition",
+];
 /**
  * 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.
@@ -122,22 +130,25 @@ function paintAgentOrb(context, input) {
             ? 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);
+    const done = state === "done" && age >= input.timing.doneDuration;
+    const visualState = input.motion === "ambient" || done ? "idle" : state;
+    const poseAge = input.motion === "ambient" ? 0 : done ? age - input.timing.doneDuration : age;
+    const pose = motionPose(visualState, poseAge, input.timing, reduced);
+    const cueAge = done ? age - input.timing.doneDuration : age;
+    const statusColor = visualState === "waiting" || visualState === "blocked"
+        ? input.statusColors[visualState]
+        : color;
     const project = (x, y) => {
         const dx = (x - size / 2) * pose.sx;
         const dy = (y - size / 2) * pose.sy;
         return [
-            size / 2 +
-                dx * Math.cos(pose.rotation) -
-                dy * Math.sin(pose.rotation) +
-                (pose.x + Math.sign(dx) * pose.split) * size,
+            size / 2 + dx * Math.cos(pose.rotation) - dy * Math.sin(pose.rotation) + pose.x * size,
             size / 2 + dx * Math.sin(pose.rotation) + dy * Math.cos(pose.rotation) + pose.y * size,
         ];
     };
-    const ink = pose.opacity * breath;
+    const ink = breath;
     if (input.motion === "status") {
-        paintOrbCue(context, state, size, gestureSeconds, reduced, celebrationColors, "back", breath);
+        paintOrbCue(context, visualState, size, cueAge, reduced, celebrationColors, "back", breath, input.timing, statusColor);
     }
     context.fillStyle = color;
     context.strokeStyle = color;
@@ -159,7 +170,7 @@ function paintAgentOrb(context, input) {
     }
     context.globalAlpha = 1;
     if (input.motion === "status") {
-        paintOrbCue(context, state, size, gestureSeconds, reduced, celebrationColors, "front", breath);
+        paintOrbCue(context, visualState, size, cueAge, reduced, celebrationColors, "front", breath, input.timing, statusColor);
     }
 }
 export function mountAgentOrb(canvas, options) {
@@ -185,6 +196,8 @@ export function mountAgentOrb(canvas, options) {
     let celebrationColors = [color];
     let stripeColors = [color];
     let appearanceKey = "";
+    let timing = readOrbTiming();
+    let statusColors = { waiting: color, blocked: color };
     /**
      * 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
@@ -213,6 +226,8 @@ export function mountAgentOrb(canvas, options) {
             motion: orbMotion,
             celebrationColors,
             stripeColors,
+            statusColors,
+            timing,
         });
     }
     function running() {
@@ -223,7 +238,7 @@ export function mountAgentOrb(canvas, options) {
             return orbMotion === "status" && (state === "thinking" || state === "working");
         if (orbMotion === "ambient")
             return true;
-        return state !== "waiting" && !(state === "blocked" && age >= 0.3);
+        return !(state === "blocked" && age >= timing.blockedDuration);
     }
     function tick(now) {
         request = 0;
@@ -235,21 +250,19 @@ export function mountAgentOrb(canvas, options) {
                 breath += elapsed;
             else {
                 seconds +=
-                    elapsed * (orbMotion === "ambient" ? nativeSpeed(form) : stateSpeed(state, form));
+                    elapsed *
+                        (orbMotion === "ambient" ? nativeSpeed(form) : stateSpeed(state, form, age, timing));
                 if (orbMotion === "status")
-                    age += elapsed * (state === "done" ? 0.575 : 0.2875);
-                if (state === "done" && age >= 1.8) {
-                    state = "idle";
-                    age = 0;
-                }
+                    age += elapsed;
             }
         }
         previous = now;
-        if (now - lastPaint >= 1000 / 30) {
+        if (now - lastPaint >= 1000 / 30 || !running()) {
             paint();
             lastPaint = now;
         }
-        request = requestAnimationFrame(tick);
+        if (running())
+            request = requestAnimationFrame(tick);
     }
     function play() {
         cancelAnimationFrame(request);
@@ -293,6 +306,11 @@ export function mountAgentOrb(canvas, options) {
         const appearance = getComputedStyle(canvas);
         appearanceKey = readAppearanceKey(appearance, painted);
         color = appearance.color;
+        timing = readOrbTiming(appearance);
+        statusColors = {
+            waiting: computedColor(appearance.getPropertyValue(statusTokens.waiting).trim() || color),
+            blocked: computedColor(appearance.getPropertyValue(statusTokens.blocked).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();

package/dist/internal/table-compact-line.d.ts

@@ -17,11 +17,6 @@ type TableCompactLineValue = {
     layout: TableCompactLayout;
     facts: readonly TableDetailFact[];
 };
-/**
- * The facts an entity row moves onto the line under its name on a card narrower than its
- * columns, so the record stays one 72 px row: the name over one muted line. `RecordIdentity`
- * draws them after its own line.
- */
 export declare function TableCompactLine({ children, ...value }: TableCompactLineValue & {
     children: React.ReactNode;
 }): React.JSX.Element;

package/dist/internal/table-compact-line.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-compact-line.d.ts","sourceRoot":"","sources":["../../src/internal/table-compact-line.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAG1F,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4HAA4H;IAC5H,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wGAAwG;IACxG,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,gBAAwB,GACzB,EAAE;IACD,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,uBAQA;AAED,KAAK,qBAAqB,GAAG;IAAE,MAAM,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,CAAC;AAI/F;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAEvD;AAED,4IAA4I;AAC5I,wBAAgB,iBAAiB,6BAiBhC;AAED,2KAA2K;AAC3K,wBAAgB,qBAAqB,6BAkBpC;AAID;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAEA;AAED,wBAAgB,sBAAsB,IAAI,OAAO,CAEhD"}
+{"version":3,"file":"table-compact-line.d.ts","sourceRoot":"","sources":["../../src/internal/table-compact-line.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAG1F,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4HAA4H;IAC5H,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wGAAwG;IACxG,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,gBAAwB,GACzB,EAAE;IACD,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,uBAQA;AAED,KAAK,qBAAqB,GAAG;IAAE,MAAM,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,CAAC;AAI/F,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAEvD;AAED,4IAA4I;AAC5I,wBAAgB,iBAAiB,6BAgBhC;AAED,2KAA2K;AAC3K,wBAAgB,qBAAqB,6BAkBpC;AAID;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAEA;AAED,wBAAgB,sBAAsB,IAAI,OAAO,CAEhD"}

package/dist/internal/table-compact-line.js

@@ -7,11 +7,6 @@ export function DetailFacts({ facts, leadingSeparator = false, }) {
     return facts.map((fact, index) => (_jsxs("span", { children: [index > 0 || leadingSeparator ? _jsx("span", { "aria-hidden": "true", children: " \u00B7 " }) : null, _jsxs("span", { className: "sr-only", children: [fact.label, ": "] }), fact.value] }, fact.id)));
 }
 const TableCompactLineContext = React.createContext(null);
-/**
- * The facts an entity row moves onto the line under its name on a card narrower than its
- * columns, so the record stays one 72 px row: the name over one muted line. `RecordIdentity`
- * draws them after its own line.
- */
 export function TableCompactLine({ children, ...value }) {
     return _jsx(TableCompactLineContext, { value: value, children: children });
 }
@@ -23,7 +18,7 @@ export function TableCompactFacts() {
     const facts = line.facts.filter((fact) => !fact.besideName);
     if (facts.length === 0)
         return null;
-    return (_jsx("span", { className: cn("[&_[data-slot=tag]]:contents [&>span>:is(div,p,.block,.grid,.flex)]:inline", tableCompactLayouts[line.layout].details), "data-slot": "table-detail-line", "data-wraps": facts.some((fact) => fact.wraps) || undefined, children: _jsx(DetailFacts, { facts: facts, leadingSeparator: true }) }));
+    return (_jsx("span", { className: cn("[&_[data-slot=tag]]:contents [&>span>:is(div,p,.block,.grid,.flex)]:inline", tableCompactLayouts[line.layout].details), "data-slot": "table-detail-line", children: _jsx(DetailFacts, { facts: facts, leadingSeparator: true }) }));
 }
 /** The compact facts that stand beside the name of the row this stands in, which no ellipsis cuts; nothing outside such a row or on a card wide enough for the columns. */
 export function TableCompactNameFacts() {

package/dist/showcase/specimens/other.js

@@ -37,7 +37,7 @@ function CompanyCardSpecimen() {
 }
 function HiveSceneSpecimen() {
     const art = useEmptyArt();
-    return (_jsx("div", { className: "h-96 overflow-hidden rounded-md", children: _jsx(HiveScene, { className: "size-full", logo: { src: HIVE_LOGO, label: "Alveare" }, mode: "join", picture: _jsx("img", { alt: "", className: "size-full object-cover", src: art.teams }), children: _jsx("p", { className: "text-lg font-semibold", children: "Join Acme's workspace" }) }) }));
+    return (_jsx("div", { className: "h-96 overflow-hidden rounded-md", style: { contain: "paint" }, children: _jsx(HiveScene, { className: "size-full", logo: { src: HIVE_LOGO, label: "Alveare" }, mode: "join", picture: _jsx("img", { alt: "", className: "size-full object-cover", src: art.teams }), children: _jsx("p", { className: "text-lg font-semibold", children: "Join Acme's workspace" }) }) }));
 }
 function NadiaPresenceSpecimen() {
     const [reveal, setReveal] = useState(0.6);

package/dist/showcase/specimens/status.d.ts

@@ -1,8 +1,9 @@
 declare function ActionStatusSpecimen(): import("react").JSX.Element;
 declare function GaugeSpecimen(): import("react").JSX.Element;
+declare function AgentOrbSpecimen(): import("react").JSX.Element;
 export declare const STATUS: {
     ActionStatus: typeof ActionStatusSpecimen;
-    AgentOrb: () => import("react").JSX.Element;
+    AgentOrb: typeof AgentOrbSpecimen;
     AppMark: () => import("react").JSX.Element;
     ArchIcon: () => import("react").JSX.Element;
     Avatar: () => import("react").JSX.Element;

package/dist/showcase/specimens/status.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/status.tsx"],"names":[],"mappings":"AAwDA,iBAAS,oBAAoB,gCAiB5B;AAYD,iBAAS,aAAa,gCA2DrB;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;CAoQQ,CAAC"}
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/status.tsx"],"names":[],"mappings":"AAyDA,iBAAS,oBAAoB,gCAiB5B;AAYD,iBAAS,aAAa,gCA2DrB;AAWD,iBAAS,gBAAgB,gCAkExB;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;CAuPQ,CAAC"}

package/dist/showcase/specimens/status.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { useId, useState } from "react";
 import { Building2, Check, Clock, CreditCard, Database, Lock, Mail, MonitorDown, Pause, Save, Wrench, } from "lucide-react";
 import { ActionStatus } from "../../components/action-status.js";
 import { AgentOrb } from "../../components/agent-orb.js";
 import { AppMark, composioLogo } from "../../components/app-mark.js";
 import { Avatar, AvatarFallback, AvatarGroup, AvatarWithIcon } from "../../components/avatar.js";
 import { Badge } from "../../components/badge.js";
+import { Button } from "../../components/button.js";
 import { BrandMark, BrandWordmark } from "../../components/brand.js";
 import { CheckCounts, CheckState } from "../../components/check-counts.js";
 import { FileTypeIcon } from "../../components/file-type-icon.js";
@@ -21,7 +22,7 @@ import { RecordIdentity } from "../../components/record-identity.js";
 import { StatusBadge } from "../../components/status-badge.js";
 import { Tag } from "../../components/tag.js";
 import { ObjectFactValue } from "../../components/object-fact-value.js";
-import { ARANCIO, COBALTO, nothing, VERDE } from "../samples.js";
+import { COBALTO, nothing } from "../samples.js";
 const SAMPLE_LOGO = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 16"><rect width="64" height="16" fill="white"/><text x="0" y="13" fill="navy" font-family="sans-serif" font-size="14" font-weight="700">ROSSI</text></svg>')}`;
 const SAMPLE_ICON = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="royalblue"/><path d="M10 9h8a5 5 0 0 1 0 10h-4v5h-4z" fill="white"/></svg>')}`;
 const MEMBERS = [
@@ -41,9 +42,22 @@ function GaugeRow({ label, gauge }) {
 function GaugeSpecimen() {
     return (_jsxs("div", { className: "grid gap-6", children: [_jsxs("div", { className: "flex flex-wrap items-end gap-6", children: [_jsx(GaugeRow, { gauge: (id) => _jsx(Gauge, { "aria-labelledby": id, size: "xs", value: 42 }), label: "Storage used" }), _jsx(GaugeRow, { gauge: (id) => _jsx(Gauge, { "aria-labelledby": id, size: "sm", value: 64 }), label: "Plan used" }), _jsx(GaugeRow, { gauge: (id) => _jsx(Gauge, { "aria-labelledby": id, size: "md", value: 87 }), label: "Tasks done" }), _jsx(GaugeRow, { gauge: (id) => _jsx(Gauge, { "aria-labelledby": id, size: "lg", value: 99.97 }), label: "Cache hit rate" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx(GaugeRow, { gauge: (id) => _jsx(Gauge, { "aria-labelledby": id, showValue: true, size: "sm", value: 64 }), label: "Plan used, 64%" }), _jsx(GaugeRow, { gauge: (id) => _jsx(Gauge, { "aria-labelledby": id, showValue: true, size: "md", value: 87 }), label: "Tasks done, 87%" }), _jsx(GaugeRow, { gauge: (id) => _jsx(Gauge, { "aria-labelledby": id, showValue: true, size: "lg", value: 99.97 }), label: "Cache hit rate, 99.97%" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx(GaugeRow, { gauge: (id) => (_jsx(Gauge, { "aria-labelledby": id, showValue: true, size: "md", tone: "warning", value: 82 })), label: "Model budget, 82%: close to the limit" }), _jsx(GaugeRow, { gauge: (id) => (_jsx(Gauge, { "aria-labelledby": id, showValue: true, size: "md", tone: "critical", value: 97 })), label: "Mailbox space, 97%: almost full" }), _jsx(GaugeRow, { gauge: (id) => (_jsx(Gauge, { "aria-labelledby": id, size: "md", value: 58, children: _jsx(Database, { "aria-hidden": "true" }) })), label: "Memory used" })] })] }));
 }
+const ORB_STATES = [
+    "idle",
+    "working",
+    "thinking",
+    "waiting",
+    "blocked",
+    "done",
+];
+function AgentOrbSpecimen() {
+    const [replay, setReplay] = useState(0);
+    const [state, setState] = useState("waiting");
+    return (_jsxs("div", { className: "grid gap-6", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [ORB_STATES.map((option) => (_jsx(Button, { variant: state === option ? "default" : "outline", size: "sm", "aria-pressed": state === option, onClick: () => setState(option), children: option }, option))), _jsx(Button, { variant: "outline", size: "sm", onClick: () => setReplay((value) => value + 1), children: "Replay motion" })] }), _jsx("div", { className: "flex flex-wrap items-end gap-6", children: ORB_STATES.map((status) => (_jsxs("div", { className: "grid justify-items-center gap-2 text-sm", children: [_jsx(AgentOrb, { form: "nadia", label: `Nadia, ${status}`, size: 96, state: status, motionKey: replay }), _jsx("span", { children: status })] }, status))) }), _jsx("div", { className: "flex flex-wrap items-end gap-6", children: [20, 24, 32, 40, 64, 96, 160].map((size) => (_jsxs("div", { className: "grid justify-items-center gap-2 text-sm", children: [_jsx(AgentOrb, { form: "nadia", label: `Nadia, ${state}, ${size} px`, size: size, state: state, motionKey: replay }), _jsxs("span", { children: [size, " px"] })] }, size))) }), _jsx("div", { className: "flex flex-wrap items-end gap-6", children: ["sofia", "ribbon", "lattice", "orbit", "globe", "network", "braid", "morph"].map((form) => (_jsx(AgentOrb, { form: form, label: `${form}, ${state}`, color: form === "sofia" ? undefined : COBALTO, size: 64, state: state, motionKey: replay }, form))) })] }));
+}
 export const STATUS = {
     ActionStatus: ActionStatusSpecimen,
-    AgentOrb: () => (_jsxs("div", { className: "flex flex-wrap items-end gap-6", children: [_jsx(AgentOrb, { color: COBALTO, form: "orbit", label: "Invoices, working", size: 64, state: "working" }), _jsx(AgentOrb, { color: VERDE, form: "lattice", label: "Orders, waiting for you", size: 64, state: "waiting" }), _jsx(AgentOrb, { color: ARANCIO, form: "braid", label: "Support", size: 32 }), _jsx(AgentOrb, { form: "nadia", label: "Nadia", size: 96 })] })),
+    AgentOrb: AgentOrbSpecimen,
     AppMark: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-3 text-sm", children: [_jsx(AppMark, { app: "gmail", logo: composioLogo("gmail") }), "Gmail", _jsx(AppMark, { app: "telegram", platform: "telegram" }), "Telegram", _jsx(AppMark, { app: "Fatture in Cloud" }), "Fatture in Cloud"] })),
     ArchIcon: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(ArchIcon, { "aria-hidden": "true", className: "size-5" }), "Company"] }), _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(ApprovalsIcon, { "aria-hidden": "true", className: "size-5" }), "Approvals"] }), _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(AgentIcon, { "aria-hidden": "true", className: "size-5" }), "Agents"] })] })),
     Avatar: () => (_jsxs("div", { className: "grid gap-6", children: [_jsx("div", { className: "flex flex-wrap items-center gap-4", children: ["xs", "sm", "default", "lg"].map((size) => (_jsx(Avatar, { label: "Ada Rossi", size: size, children: _jsx(AvatarFallback, { children: size === "xs" ? "A" : "AR" }) }, size))) }), _jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx(AvatarGroup, { label: "5 members", limit: 3, members: MEMBERS }), _jsx(AvatarGroup, { label: "5 members, last on top", limit: 3, members: MEMBERS, reverse: true }), _jsx(AvatarGroup, { label: "5 members, tight", limit: 3, members: MEMBERS, overlap: 6 })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-6 text-sm", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(AvatarWithIcon, { icon: _jsx(Check, {}), iconBackground: true, label: "Ada Rossi, approved", name: "Ada Rossi" }), "Ada Rossi"] }), _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(AvatarWithIcon, { icon: _jsx(Pause, {}), iconBackground: true, label: "Marco Bianchi, paused", name: "Marco Bianchi" }), "Marco Bianchi"] }), _jsx(AvatarWithIcon, { icon: _jsx(Clock, {}), iconBackground: true, label: "Luca Conti, waiting for approval", name: "Luca Conti" })] })] })),