@nexub/react 4.7.0 → 4.8.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.7.0",
+  "version": "4.8.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark on every pull request; a new violation fails the build.",
@@ -69,6 +69,17 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "approval-card",
+      "name": "Approval Card",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": [
+        "The outcome is announced in a polite live region and replaces the buttons."
+      ]
+    },
     {
       "slug": "aurora",
       "name": "Aurora",
@@ -329,6 +340,17 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "diff-view",
+      "name": "Diff View",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": [
+        "Added and removed lines are spelled out for screen readers; colour is not the only cue."
+      ]
+    },
     {
       "slug": "donut-chart",
       "name": "Donut Chart",
@@ -719,6 +741,17 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "plan-tracker",
+      "name": "Plan Tracker",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": [
+        "Each step reads its status in text; the active step has `aria-current=\"step\"`."
+      ]
+    },
     {
       "slug": "popover",
       "name": "Popover",
@@ -1027,6 +1060,17 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "tool-call",
+      "name": "Tool Call",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": [
+        "A native `<details>` disclosure: opens with Enter or Space."
+      ]
+    },
     {
       "slug": "tooltip",
       "name": "Tooltip",

package/dist/components/AgentKit/AgentKit.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+export type PlanStepStatus = 'done' | 'active' | 'pending' | 'failed';
+export interface PlanStep {
+    title: string;
+    status: PlanStepStatus;
+    detail?: React.ReactNode;
+}
+export interface PlanTrackerProps extends React.HTMLAttributes<HTMLOListElement> {
+    steps: PlanStep[];
+}
+/** An agent's plan: ordered steps with their status, announced in text. */
+export declare function PlanTracker({ steps, className, ...props }: PlanTrackerProps): React.JSX.Element;
+export interface ToolCallProps extends Omit<React.DetailsHTMLAttributes<HTMLDetailsElement>, 'title'> {
+    /** Tool name, e.g. "search_invoices". */
+    name: string;
+    status: 'running' | 'done' | 'failed';
+    /** Arguments, shown as JSON. */
+    input?: unknown;
+    /** Result, shown as given (string) or as JSON. */
+    output?: unknown;
+}
+/** One tool call: name and status, expandable to its input and output. */
+export declare function ToolCall({ name, status, input, output, className, ...props }: ToolCallProps): React.JSX.Element;
+export interface DiffViewProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** A unified diff (lines starting with "+", "-" or " "); "@@" lines become headers. */
+    diff: string;
+    /** File name shown above the diff. */
+    file?: string;
+}
+/** A unified diff, with added and removed lines spelled out for screen readers. */
+export declare function DiffView({ diff, file, className, ...props }: DiffViewProps): React.JSX.Element;

package/dist/components/AgentKit/AgentKit.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+const STATUS_TEXT = { done: "Done", active: "In progress", pending: "Not started", failed: "Failed" };
+function StepIcon({ status }) {
+  const ring = "flex size-5 shrink-0 items-center justify-center rounded-full";
+  if (status === "done")
+    return /* @__PURE__ */ jsx("span", { className: cn(ring, "bg-[var(--color-primary)] text-[var(--color-on-primary)]"), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "size-3", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) });
+  if (status === "failed")
+    return /* @__PURE__ */ jsx("span", { className: cn(ring, "bg-[var(--color-error)] text-label-sm font-bold text-[var(--color-on-error)]"), children: "!" });
+  if (status === "active")
+    return /* @__PURE__ */ jsx("span", { className: cn(ring, "border-2 border-[var(--color-primary)]"), children: /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-[var(--color-primary)] motion-safe:animate-pulse" }) });
+  return /* @__PURE__ */ jsx("span", { className: cn(ring, "border-2 border-[var(--color-outline-variant)]") });
+}
+function PlanTracker({ steps, className, ...props }) {
+  return /* @__PURE__ */ jsx("ol", { className: cn("m-0 flex list-none flex-col gap-3 p-0", className), ...props, children: steps.map((s, i) => /* @__PURE__ */ jsxs("li", { "aria-current": s.status === "active" ? "step" : void 0, className: "flex gap-3", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(StepIcon, { status: s.status }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxs("span", { className: cn("text-body-md", s.status === "pending" ? "text-[var(--color-on-surface-variant)]" : "text-[var(--color-on-surface)]"), children: [
+        s.title,
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: `, ${STATUS_TEXT[s.status]}` })
+      ] }),
+      s.detail && /* @__PURE__ */ jsx("span", { className: "text-body-sm text-[var(--color-on-surface-variant)]", children: s.detail })
+    ] })
+  ] }, i)) });
+}
+const json = (v) => typeof v === "string" ? v : JSON.stringify(v, null, 2);
+function ToolCall({ name, status, input, output, className, ...props }) {
+  return /* @__PURE__ */ jsxs("details", { className: cn("group rounded-shape-container border border-[var(--color-outline-variant)] bg-[var(--color-surface-container-low)]", className), ...props, children: [
+    /* @__PURE__ */ jsxs("summary", { className: "nx-state-layer flex cursor-pointer list-none items-center gap-2 rounded-shape-container px-3 py-2 text-label-lg", children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "transition-transform group-open:rotate-90", children: "\u203A" }),
+      /* @__PURE__ */ jsx("code", { className: "font-mono text-label-md", children: name }),
+      /* @__PURE__ */ jsx("span", { className: cn("ms-auto rounded-full px-2 text-label-sm", status === "failed" ? "bg-[var(--color-error-container)] text-[var(--color-on-error-container)]" : status === "done" ? "bg-[var(--color-success-container)] text-[var(--color-on-success-container)]" : "bg-[var(--color-surface-container-high)] text-[var(--color-on-surface-variant)]"), children: status === "running" ? "Running" : status === "done" ? "Done" : "Failed" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 border-t border-[var(--color-outline-variant)] p-3", children: [
+      input !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "m-0 mb-1 text-label-sm text-[var(--color-on-surface-variant)]", children: "Input" }),
+        /* @__PURE__ */ jsx("pre", { className: "m-0 overflow-auto rounded-shape-field bg-[var(--color-surface)] p-2 text-body-sm", children: /* @__PURE__ */ jsx("code", { children: json(input) }) })
+      ] }),
+      output !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "m-0 mb-1 text-label-sm text-[var(--color-on-surface-variant)]", children: "Output" }),
+        /* @__PURE__ */ jsx("pre", { className: "m-0 overflow-auto rounded-shape-field bg-[var(--color-surface)] p-2 text-body-sm", children: /* @__PURE__ */ jsx("code", { children: json(output) }) })
+      ] })
+    ] })
+  ] });
+}
+function DiffView({ diff, file, className, ...props }) {
+  const lines = diff.replace(/\n$/, "").split("\n");
+  return /* @__PURE__ */ jsxs("div", { className: cn("overflow-hidden rounded-shape-container border border-[var(--color-outline-variant)]", className), ...props, children: [
+    file && /* @__PURE__ */ jsx("div", { className: "border-b border-[var(--color-outline-variant)] bg-[var(--color-surface-container-low)] px-3 py-1.5 font-mono text-label-md", children: file }),
+    /* @__PURE__ */ jsx("pre", { className: "m-0 overflow-auto bg-[var(--color-surface)] py-1 text-body-sm", children: lines.map((line, i) => {
+      const kind = line.startsWith("@@") ? "hunk" : line.startsWith("+") ? "add" : line.startsWith("-") ? "del" : "ctx";
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex px-3 font-mono",
+            kind === "add" && "bg-[color-mix(in_oklab,var(--color-success)_14%,transparent)]",
+            kind === "del" && "bg-[color-mix(in_oklab,var(--color-error)_12%,transparent)]",
+            kind === "hunk" && "text-[var(--color-on-surface-variant)]"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "w-4 shrink-0 select-none", children: kind === "add" ? "+" : kind === "del" ? "\u2212" : "" }),
+            kind === "add" && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Added: " }),
+            kind === "del" && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Removed: " }),
+            /* @__PURE__ */ jsx("span", { className: "whitespace-pre", children: kind === "hunk" ? line : line.slice(1) })
+          ]
+        },
+        i
+      );
+    }) })
+  ] });
+}
+export {
+  DiffView,
+  PlanTracker,
+  ToolCall
+};

package/dist/components/AgentKit/ApprovalCard.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface ApprovalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** What the agent wants to do, e.g. "Send 3 invoices to Acme". */
+    title: string;
+    /** Details: who, how much, what changes. */
+    children?: React.ReactNode;
+    onApprove?: () => void;
+    onDeny?: () => void;
+    approveLabel?: string;
+    denyLabel?: string;
+}
+export declare function ApprovalCard({ title, children, onApprove, onDeny, approveLabel, denyLabel, className, ...props }: ApprovalCardProps): React.JSX.Element;

package/dist/components/AgentKit/ApprovalCard.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { Button } from "../Button/Button.js";
+function ApprovalCard({ title, children, onApprove, onDeny, approveLabel = "Approve", denyLabel = "Deny", className, ...props }) {
+  const [choice, setChoice] = React.useState(null);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3 rounded-shape-container border border-[var(--color-outline-variant)] bg-[var(--color-surface-elevated)] p-4", className), ...props, children: [
+    /* @__PURE__ */ jsx("p", { className: "m-0 text-title-sm text-[var(--color-on-surface)]", children: title }),
+    children && /* @__PURE__ */ jsx("div", { className: "text-body-sm text-[var(--color-on-surface-variant)]", children }),
+    /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "text-label-md text-[var(--color-on-surface-variant)]", children: choice === "approved" ? "Approved" : choice === "denied" ? "Denied" : "" }),
+    !choice && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => {
+        setChoice("approved");
+        onApprove?.();
+      }, children: approveLabel }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outlined", onClick: () => {
+        setChoice("denied");
+        onDeny?.();
+      }, children: denyLabel })
+    ] })
+  ] });
+}
+export {
+  ApprovalCard
+};

package/dist/components/AgentKit/index.d.ts

@@ -0,0 +1,4 @@
+export { PlanTracker, ToolCall, DiffView } from './AgentKit.js';
+export type { PlanTrackerProps, PlanStep, PlanStepStatus, ToolCallProps, DiffViewProps } from './AgentKit.js';
+export { ApprovalCard } from './ApprovalCard.js';
+export type { ApprovalCardProps } from './ApprovalCard.js';

package/dist/components/AgentKit/index.js

@@ -0,0 +1,8 @@
+import { PlanTracker, ToolCall, DiffView } from "./AgentKit.js";
+import { ApprovalCard } from "./ApprovalCard.js";
+export {
+  ApprovalCard,
+  DiffView,
+  PlanTracker,
+  ToolCall
+};

package/dist/index.d.ts

@@ -37,6 +37,8 @@ export type { NumberInputProps } from './components/NumberInput/index.js';
 export { MoneyInput } from './components/MoneyInput/index.js';
 export type { MoneyInputProps } from './components/MoneyInput/index.js';
 export { Amount } from './components/Amount/index.js';
+export { PlanTracker, ToolCall, DiffView, ApprovalCard } from './components/AgentKit/index.js';
+export type { PlanTrackerProps, PlanStep, PlanStepStatus, ToolCallProps, DiffViewProps, ApprovalCardProps } from './components/AgentKit/index.js';
 export { SharedElement, transitionName } from './components/SharedElement/index.js';
 export type { SharedElementProps } from './components/SharedElement/index.js';
 export { ScrollProgress } from './components/ScrollProgress/index.js';

package/dist/index.js

@@ -22,6 +22,7 @@ import { Textarea, textareaVariants } from "./components/Textarea/index.js";
 import { NumberInput } from "./components/NumberInput/index.js";
 import { MoneyInput } from "./components/MoneyInput/index.js";
 import { Amount } from "./components/Amount/index.js";
+import { PlanTracker, ToolCall, DiffView, ApprovalCard } from "./components/AgentKit/index.js";
 import { SharedElement, transitionName } from "./components/SharedElement/index.js";
 import { ScrollProgress } from "./components/ScrollProgress/index.js";
 import { FloatingInput } from "./components/FloatingInput/index.js";
@@ -125,6 +126,7 @@ export {
   AlertDialog,
   Amount,
   AppShell,
+  ApprovalCard,
   AspectRatio,
   Aurora,
   Autocomplete,
@@ -159,6 +161,7 @@ export {
   DatePicker,
   DateRangePicker,
   Dialog,
+  DiffView,
   DonutChart,
   Drawer,
   DropdownMenu,
@@ -206,6 +209,7 @@ export {
   PageHeader,
   Pagination,
   PasswordInput,
+  PlanTracker,
   Popover,
   Progress,
   PromptInput,
@@ -249,6 +253,7 @@ export {
   Toaster,
   Toggle,
   ToggleGroup,
+  ToolCall,
   Toolbar,
   Tooltip,
   Provider as TooltipProvider,