@corbits/react-ui 0.1.0 → 0.2.0

package/dist/lib/workflow-run-progress.js

@@ -1,38 +1,53 @@
 import { classifyRunError } from "./workflow-run-error.js";
-/** Label colour for a step's status, shared by every stepper/sidebar rendering. */ export function workflowStepLabelClass(status) {
-    if (status === "current") return "text-foreground";
-    if (status === "failed") return "text-destructive";
+/** Label colour for a step's status, shared by every stepper/sidebar rendering. */
+export function workflowStepLabelClass(status) {
+    if (status === "current")
+        return "text-foreground";
+    if (status === "failed")
+        return "text-destructive";
     return "text-muted-foreground";
 }
-/** Mark glyph for a step's status: a checkmark, an exclamation, or its number. */ export function workflowStepGlyph(status, number) {
-    if (status === "completed") return "✓";
-    if (status === "failed") return "!";
+/** Mark glyph for a step's status: a checkmark, an exclamation, or its number. */
+export function workflowStepGlyph(status, number) {
+    if (status === "completed")
+        return "✓";
+    if (status === "failed")
+        return "!";
     return String(number);
 }
 export function getStepPhase(progress, stepId) {
     return progress?.steps.get(stepId)?.phase;
 }
 export function isStepRunning(phase) {
-    return phase === "in-flight" || phase === "awaiting-signal" || phase === "awaiting-timer";
+    return (phase === "in-flight" ||
+        phase === "awaiting-signal" ||
+        phase === "awaiting-timer");
 }
-/** The aggregate phase of a display step from its runtime steps. */ export function displayStepPhase(progress, stepIds) {
-    if (stepIds.length === 0) return undefined;
+/** The aggregate phase of a display step from its runtime steps. */
+export function displayStepPhase(progress, stepIds) {
+    if (stepIds.length === 0)
+        return undefined;
     const terminal = stepIds[stepIds.length - 1];
-    if (terminal !== undefined && getStepPhase(progress, terminal) === "completed") return "completed";
-    for (const id of stepIds){
+    if (terminal !== undefined &&
+        getStepPhase(progress, terminal) === "completed")
+        return "completed";
+    for (const id of stepIds) {
         const phase = getStepPhase(progress, id);
-        if (isStepRunning(phase)) return phase;
+        if (isStepRunning(phase))
+            return phase;
     }
-    for (const id of stepIds){
-        if (getStepPhase(progress, id) === "failed") return "failed";
+    for (const id of stepIds) {
+        if (getStepPhase(progress, id) === "failed")
+            return "failed";
     }
-    for (const id of stepIds){
-        if (getStepPhase(progress, id) !== undefined) return "in-flight";
+    for (const id of stepIds) {
+        if (getStepPhase(progress, id) !== undefined)
+            return "in-flight";
     }
     return undefined;
 }
 function hasAnyProgress(progress, step) {
-    return step.stepIds.some((id)=>getStepPhase(progress, id) !== undefined);
+    return step.stepIds.some((id) => getStepPhase(progress, id) !== undefined);
 }
 /**
  * Index of the display step the run is currently on. A step whose own phase
@@ -40,15 +55,22 @@ function hasAnyProgress(progress, step) {
  * running branch has progressed — independent steps can run concurrently, so
  * a later step's progress says nothing about whether this one failed.
  * Returns the last index once every step is complete.
- */ export function activeDisplayStepIndex(progress, steps) {
-    for(let i = 0; i < steps.length; i++){
+ */
+export function activeDisplayStepIndex(progress, steps) {
+    for (let i = 0; i < steps.length; i++) {
         const step = steps[i];
-        if (step === undefined) continue;
+        if (step === undefined)
+            continue;
         const phase = displayStepPhase(progress, step.stepIds);
-        if (phase === "completed") continue;
-        if (phase === "failed") return i;
-        const laterProgressed = steps.slice(i + 1).some((later)=>hasAnyProgress(progress, later));
-        if (laterProgressed) continue;
+        if (phase === "completed")
+            continue;
+        if (phase === "failed")
+            return i;
+        const laterProgressed = steps
+            .slice(i + 1)
+            .some((later) => hasAnyProgress(progress, later));
+        if (laterProgressed)
+            continue;
         return i;
     }
     return Math.max(0, steps.length - 1);
@@ -59,25 +81,30 @@ export function buildStepperSteps(progress, steps) {
     // behind the run's own terminal phase, and without this it would linger
     // as "current" on an already-finished run.
     const runCompleted = progress?.phase === "completed";
-    return steps.map((step, i)=>{
+    return steps.map((step, i) => {
         let status;
         if (runCompleted || i < activeIdx) {
             status = "completed";
-        } else if (i > activeIdx) {
+        }
+        else if (i > activeIdx) {
             status = "pending";
-        } else {
+        }
+        else {
             const phase = displayStepPhase(progress, step.stepIds);
-            status = phase === "completed" ? "completed" : phase === "failed" ? "failed" : "current";
+            status =
+                phase === "completed"
+                    ? "completed"
+                    : phase === "failed"
+                        ? "failed"
+                        : "current";
         }
-        return {
-            number: i + 1,
-            label: step.label,
-            status
-        };
+        return { number: i + 1, label: step.label, status };
     });
 }
-/** The active display step, or `null` while the run is terminal. */ export function activeDisplayStep(progress, steps) {
-    if (steps.length === 0) return null;
+/** The active display step, or `null` while the run is terminal. */
+export function activeDisplayStep(progress, steps) {
+    if (steps.length === 0)
+        return null;
     return steps[activeDisplayStepIndex(progress, steps)] ?? null;
 }
 /**
@@ -87,33 +114,45 @@ export function buildStepperSteps(progress, steps) {
  * active group is done or parked on a human gate, or when the active step
  * carries no `activityLabel` at all (a gate or intake step): silence there is
  * correct, never a stepper noun standing in for it.
- */ export function liveStatusLabel(progress, steps) {
-    if (progress === null) return null;
-    if (progress.phase === "failed" || progress.phase === "completed") return null;
+ */
+export function liveStatusLabel(progress, steps) {
+    if (progress === null)
+        return null;
+    if (progress.phase === "failed" || progress.phase === "completed")
+        return null;
     const idx = activeDisplayStepIndex(progress, steps);
-    if (idx === 0) return null;
+    if (idx === 0)
+        return null;
     const step = steps[idx];
-    if (step === undefined) return null;
+    if (step === undefined)
+        return null;
     const phase = displayStepPhase(progress, step.stepIds);
-    if (phase === "completed" || phase === "awaiting-signal") return null;
+    if (phase === "completed" || phase === "awaiting-signal")
+        return null;
     return step.activityLabel ?? null;
 }
 /** Label of the first display step whose aggregate phase is `failed`. Does
  * not require `progress.phase === "failed"` — a caller flagging failure from
- * a single failed step ahead of the run's own phase flip still gets a name. */ export function failedDisplayStepLabel(progress, steps) {
-    if (progress === null) return null;
-    for (const step of steps){
-        if (displayStepPhase(progress, step.stepIds) === "failed") return step.label;
+ * a single failed step ahead of the run's own phase flip still gets a name. */
+export function failedDisplayStepLabel(progress, steps) {
+    if (progress === null)
+        return null;
+    for (const step of steps) {
+        if (displayStepPhase(progress, step.stepIds) === "failed")
+            return step.label;
     }
     return null;
 }
 /** The sanitized end-user message from whichever step failed the run, or
  * `null` if the run has not failed or no step carries an error. Uses the
  * first error found in map-iteration order — a run design that attaches an
- * error to more than one step at once is a design this cannot disambiguate. */ export function failedRunErrorMessage(progress) {
-    if (progress?.phase !== "failed") return null;
-    for (const step of progress.steps.values()){
-        if (step.lastErrorMessage !== undefined) return classifyRunError(step.lastErrorMessage).userMessage;
+ * error to more than one step at once is a design this cannot disambiguate. */
+export function failedRunErrorMessage(progress) {
+    if (progress?.phase !== "failed")
+        return null;
+    for (const step of progress.steps.values()) {
+        if (step.lastErrorMessage !== undefined)
+            return classifyRunError(step.lastErrorMessage).userMessage;
     }
     return null;
 }
@@ -124,12 +163,15 @@ export function buildStepperSteps(progress, steps) {
  * (a legacy run, or a read error) that can synthesize the same empty-step
  * shape regardless of phase — in that case whether it started is unknown, so
  * this returns `false` rather than making a false "never started" claim.
- */ export function runNeverStarted(progress, logRead) {
+ */
+export function runNeverStarted(progress, logRead) {
     return progress !== null && logRead && progress.steps.size === 0;
 }
 /** Honest copy for the pre-interactive window before a run's first step has
  * recorded any activity: queued (`pending`, or no progress yet) reads
- * differently from a runtime already booting that first step. */ export function runStartLabel(progress) {
-    if (progress === null || progress.phase === "pending") return "Starting your workflow…";
+ * differently from a runtime already booting that first step. */
+export function runStartLabel(progress) {
+    if (progress === null || progress.phase === "pending")
+        return "Starting your workflow…";
     return "Preparing your workflow…";
 }

package/dist/lib/workflow-run.js

@@ -4,35 +4,39 @@ export const RUN_STATUS_LABEL = {
     awaiting: "Needs you",
     completed: "Completed",
     failed: "Failed",
-    stopped: "Stopped"
+    stopped: "Stopped",
 };
 /**
  * State is the only colour on these surfaces. `awaiting` is the one orange:
  * it is the single status a person can act on, and orange is the registry's
  * "this is for you" tone.
- */ export const RUN_STATUS_TONE = {
+ */
+export const RUN_STATUS_TONE = {
     provisioning: "neutral",
     running: "info",
     awaiting: "accent",
     completed: "success",
     failed: "danger",
-    stopped: "neutral"
+    stopped: "neutral",
 };
 /**
  * The dot only marks liveness and failure — the badge above carries the full
  * status colour. See `status-dot.tsx` for why it is three tones and not six.
- */ export const RUN_STATUS_DOT_TONE = {
+ */
+export const RUN_STATUS_DOT_TONE = {
     provisioning: "neutral",
     running: "emphasis",
     awaiting: "emphasis",
     completed: "neutral",
     failed: "danger",
-    stopped: "neutral"
+    stopped: "neutral",
 };
-/** A run that will not change again without someone starting a new one. */ export function isTerminalRun(status) {
+/** A run that will not change again without someone starting a new one. */
+export function isTerminalRun(status) {
     return status === "completed" || status === "failed" || status === "stopped";
 }
-/** Still moving or still asking — what an "active runs" strip shows. */ export function isActiveRun(status) {
+/** Still moving or still asking — what an "active runs" strip shows. */
+export function isActiveRun(status) {
     return !isTerminalRun(status);
 }
 // Needs-you first, then in-flight, then whatever finished. Failed sorts above
@@ -43,14 +47,14 @@ const ATTENTION_RANK = {
     provisioning: 1,
     failed: 2,
     completed: 3,
-    stopped: 4
+    stopped: 4,
 };
-/** Attention order, newest first within a band. Sorts a copy. */ export function sortRunsByAttention(runs) {
-    return [
-        ...runs
-    ].sort((a, b)=>{
+/** Attention order, newest first within a band. Sorts a copy. */
+export function sortRunsByAttention(runs) {
+    return [...runs].sort((a, b) => {
         const byAttention = ATTENTION_RANK[a.status] - ATTENTION_RANK[b.status];
-        if (byAttention !== 0) return byAttention;
+        if (byAttention !== 0)
+            return byAttention;
         return Date.parse(b.startedAt) - Date.parse(a.startedAt);
     });
 }

package/dist/styles.css

@@ -6,7 +6,6 @@
     --font-sans: "Red Hat Display", "Open Sans", Roboto, Arial, sans-serif;
     --font-mono: "Space Mono", "Fira Code", Monaco, Consolas, monospace;
     --color-black: #000;
-    --color-white: #fff;
     --spacing: 0.25rem;
     --container-xs: 20rem;
     --container-sm: 24rem;
@@ -1169,9 +1168,6 @@
   .bg-background {
     background-color: var(--background);
   }
-  .bg-black {
-    background-color: var(--color-black);
-  }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1718,12 +1714,12 @@
   .text-warn {
     color: var(--warn);
   }
-  .text-white {
-    color: var(--color-white);
-  }
   .capitalize {
     text-transform: capitalize;
   }
+  .lowercase {
+    text-transform: lowercase;
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -2506,7 +2502,11 @@
   --sidebar-row-radius: var(--radius);
   --sidebar-row-selected-bg: var(--primary);
   @supports (color: color-mix(in lab, red, red)) {
-    --sidebar-row-selected-bg: color-mix(in srgb, var(--primary) 10%, transparent);
+    --sidebar-row-selected-bg: color-mix(
+    in srgb,
+    var(--primary) 10%,
+    transparent
+  );
   }
 }
 @keyframes corbits-fade-in {
@@ -2709,14 +2709,14 @@
 }
 @keyframes corbits-thinking-wave {
   0% {
-    transform: scale(.03);
+    transform: scale(0.03);
     opacity: 0;
   }
   10% {
     opacity: 1;
   }
   75% {
-    opacity: .9;
+    opacity: 0.9;
   }
   100% {
     transform: scale(1.35);
@@ -2734,7 +2734,7 @@
     transform: translateY(30px);
   }
   .corbits-thinking-echo {
-    transform: scale(.6);
+    transform: scale(0.6);
   }
 }
 @property --tw-translate-x {

package/dist/test/render-hook.js

@@ -6,33 +6,32 @@ import { createRoot } from "react-dom/client";
  * `callback` and stashes its return value, re-render it on demand, and clean
  * up. No `@testing-library` dependency — `act` plus `react-dom/client` cover
  * everything a hook test in this package needs.
- */ export function renderHook(callback) {
+ */
+export function renderHook(callback) {
     const container = document.createElement("div");
     document.body.appendChild(container);
     let root;
-    const resultBox = {
-        current: undefined
-    };
+    const resultBox = { current: undefined };
     function Probe() {
         resultBox.current = callback();
         return null;
     }
-    act(()=>{
+    act(() => {
         root = createRoot(container);
-        root.render(/*#__PURE__*/ _jsx(Probe, {}));
+        root.render(_jsx(Probe, {}));
     });
     return {
         result: resultBox,
-        rerender () {
-            act(()=>{
-                root.render(/*#__PURE__*/ _jsx(Probe, {}));
+        rerender() {
+            act(() => {
+                root.render(_jsx(Probe, {}));
             });
         },
-        unmount () {
-            act(()=>{
+        unmount() {
+            act(() => {
                 root.unmount();
             });
             container.remove();
-        }
+        },
     };
 }

package/dist/theme.css

@@ -274,7 +274,11 @@
    a `.dark` override of their own. */
 :root {
   --sidebar-row-radius: var(--radius);
-  --sidebar-row-selected-bg: color-mix(in srgb, var(--primary) 10%, transparent);
+  --sidebar-row-selected-bg: color-mix(
+    in srgb,
+    var(--primary) 10%,
+    transparent
+  );
 }
 
 @theme inline {
@@ -603,26 +607,59 @@
 
 /* Ridge-study motion: keep geometry and timing in the original 100 x 70 space. */
 @keyframes corbits-thinking-sweep {
-  0% { transform: translateX(8px); opacity: 0; }
-  8%, 86% { opacity: 1; }
-  100% { transform: translateX(130px); opacity: 0; }
+  0% {
+    transform: translateX(8px);
+    opacity: 0;
+  }
+  8%,
+  86% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(130px);
+    opacity: 0;
+  }
 }
 @keyframes corbits-thinking-rise {
-  0% { transform: translateY(88px); }
-  100% { transform: translateY(-30px); }
+  0% {
+    transform: translateY(88px);
+  }
+  100% {
+    transform: translateY(-30px);
+  }
 }
 @keyframes corbits-thinking-wave {
-  0% { transform: scale(.03); opacity: 0; }
-  10% { opacity: 1; }
-  75% { opacity: .9; }
-  100% { transform: scale(1.35); opacity: 0; }
+  0% {
+    transform: scale(0.03);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 0.9;
+  }
+  100% {
+    transform: scale(1.35);
+    opacity: 0;
+  }
 }
 @media (prefers-reduced-motion: reduce) {
   /* Static poses land the gradient mid-stroke. These offsets mirror the SVG
      geometry in thinking-mark.tsx — change the rect/circle geometry there and
      these poses have to be re-picked to match. */
-  .corbits-thinking-silk, .corbits-thinking-strata, .corbits-thinking-echo { animation: none; }
-  .corbits-thinking-silk { transform: translateX(44px); }
-  .corbits-thinking-strata { transform: translateY(30px); }
-  .corbits-thinking-echo { transform: scale(.6); }
+  .corbits-thinking-silk,
+  .corbits-thinking-strata,
+  .corbits-thinking-echo {
+    animation: none;
+  }
+  .corbits-thinking-silk {
+    transform: translateX(44px);
+  }
+  .corbits-thinking-strata {
+    transform: translateY(30px);
+  }
+  .corbits-thinking-echo {
+    transform: scale(0.6);
+  }
 }

package/dist/ui/agent-turn.d.ts

@@ -5,7 +5,7 @@ export type AgentTurnProps = {
     readonly identity: AgentIdentity;
     /** Rich body for the answer — a markdown renderer. */
     readonly children?: ReactNode;
-    readonly now?: number;
+    readonly now?: number | undefined;
     /** e.g. "Thought for 4s". Shown on the reasoning block once it stops streaming. */
     readonly reasoningDurationLabel?: string;
     readonly className?: string;

package/dist/ui/agent-turn.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { agentInitials, isTurnWorking, messageText, reasoningText, toolParts } from "../lib/chat-message.js";
+import { agentInitials, isTurnWorking, messageText, reasoningText, toolParts, } from "../lib/chat-message.js";
 import { cn } from "../lib/utils.js";
 import { MessageBubble } from "./message-bubble.js";
 import { ReasoningBlock } from "./reasoning-block.js";
@@ -16,45 +16,12 @@ import { ToolNarrative } from "./tool-narrative.js";
  * The avatar is `aria-hidden` and the turn is a labelled region instead: a
  * screen reader should hear "Ada said …" once, not two initials followed by the
  * name.
- */ export function AgentTurn({ message, identity, children, now, reasoningDurationLabel, className }) {
+ */
+export function AgentTurn({ message, identity, children, now, reasoningDurationLabel, className, }) {
     const working = isTurnWorking(message);
     const answer = messageText(message);
     const thinking = reasoningText(message);
     const tools = toolParts(message);
     const hasWork = thinking.length > 0 || tools.length > 0;
-    return /*#__PURE__*/ _jsxs("article", {
-        "data-slot": "agent-turn",
-        "aria-label": `${identity.name} replied`,
-        className: cn("flex gap-3", className),
-        children: [
-            /*#__PURE__*/ _jsx("span", {
-                "aria-hidden": true,
-                className: "mt-0.5 grid size-7 shrink-0 place-items-center rounded-full bg-secondary text-[10px] font-bold text-secondary-foreground",
-                children: agentInitials(identity)
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: "flex min-w-0 flex-1 flex-col gap-1.5",
-                children: [
-                    hasWork ? /*#__PURE__*/ _jsxs("div", {
-                        className: "flex flex-col",
-                        children: [
-                            /*#__PURE__*/ _jsx(ReasoningBlock, {
-                                text: thinking,
-                                streaming: working,
-                                durationLabel: reasoningDurationLabel
-                            }),
-                            tools.map((part)=>/*#__PURE__*/ _jsx(ToolNarrative, {
-                                    part: part
-                                }, part.toolCallId))
-                        ]
-                    }) : null,
-                    answer.length > 0 || children !== undefined ? /*#__PURE__*/ _jsx(MessageBubble, {
-                        message: message,
-                        now: now,
-                        children: children
-                    }) : null
-                ]
-            })
-        ]
-    });
+    return (_jsxs("article", { "data-slot": "agent-turn", "aria-label": `${identity.name} replied`, className: cn("flex gap-3", className), children: [_jsx("span", { "aria-hidden": true, className: "mt-0.5 grid size-7 shrink-0 place-items-center rounded-full bg-secondary text-[10px] font-bold text-secondary-foreground", children: agentInitials(identity) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [hasWork ? (_jsxs("div", { className: "flex flex-col", children: [_jsx(ReasoningBlock, { text: thinking, streaming: working, durationLabel: reasoningDurationLabel }), tools.map((part) => (_jsx(ToolNarrative, { part: part }, part.toolCallId)))] })) : null, answer.length > 0 || children !== undefined ? (_jsx(MessageBubble, { message: message, now: now, children: children })) : null] })] }));
 }

package/dist/ui/animated-number.js

@@ -1,8 +1,9 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
-const easeOut = (t)=>1 - (1 - t) ** 3;
+const easeOut = (t) => 1 - (1 - t) ** 3;
 /**
  * A number that counts to its new value instead of snapping.
  *
@@ -17,12 +18,13 @@ const easeOut = (t)=>1 - (1 - t) ** 3;
  * Reduced motion is checked here rather than left to the theme's CSS override.
  * The theme can collapse a CSS animation, but this is a JS interpolation the
  * cascade cannot reach, so it snaps to the value instead.
- */ export function AnimatedNumber({ value, decimals = 0, format, durationMs = 600, className }) {
+ */
+export function AnimatedNumber({ value, decimals = 0, format, durationMs = 600, className, }) {
     const [display, setDisplay] = useState(value);
     const fromRef = useRef(value);
     const frameRef = useRef(0);
     const reduce = usePrefersReducedMotion();
-    useEffect(()=>{
+    useEffect(() => {
         const from = fromRef.current;
         if (reduce || from === value) {
             fromRef.current = value;
@@ -30,34 +32,19 @@ const easeOut = (t)=>1 - (1 - t) ** 3;
             return;
         }
         const start = performance.now();
-        const step = (now)=>{
+        const step = (now) => {
             const t = Math.min((now - start) / durationMs, 1);
-            setDisplay(from + (value - from) * easeOut(t));
-            if (t < 1) {
+            const current = from + (value - from) * easeOut(t);
+            // A value change mid-count continues from what is on screen, not from
+            // the previous target.
+            fromRef.current = current;
+            setDisplay(current);
+            if (t < 1)
                 frameRef.current = requestAnimationFrame(step);
-            } else {
-                fromRef.current = value;
-            }
         };
         frameRef.current = requestAnimationFrame(step);
-        return ()=>cancelAnimationFrame(frameRef.current);
-    }, [
-        value,
-        durationMs,
-        reduce
-    ]);
+        return () => cancelAnimationFrame(frameRef.current);
+    }, [value, durationMs, reduce]);
     const text = format === undefined ? display.toFixed(decimals) : format(display);
-    return /*#__PURE__*/ _jsxs("span", {
-        className: cn("tabular-nums", className),
-        children: [
-            /*#__PURE__*/ _jsx("span", {
-                "aria-hidden": true,
-                children: text
-            }),
-            /*#__PURE__*/ _jsx("span", {
-                className: "sr-only",
-                children: format === undefined ? value.toFixed(decimals) : format(value)
-            })
-        ]
-    });
+    return (_jsxs("span", { className: cn("tabular-nums", className), children: [_jsx("span", { "aria-hidden": true, children: text }), _jsx("span", { className: "sr-only", children: format === undefined ? value.toFixed(decimals) : format(value) })] }));
 }