@cueplusplus/ui 0.3.0 → 0.6.0

package/dist/elements/agent-plan.js

@@ -0,0 +1,74 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono } from "./surfaces.js";
+import { pct, progressOf } from "./range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, Loader2Icon } from "lucide-react";
+//#region src/elements/agent-plan.tsx
+/**
+* A checklist the agent works through, with progress you can glance.
+*
+* @example
+* import { AgentPlan } from "@cueplusplus/ui/elements";
+*
+* <AgentPlan
+*   steps={["Read the file", "Draft the fix", "Run tests"]}
+*   activeIndex={1}
+* />
+*/
+function AgentPlan({ steps, activeIndex, className, ...props }) {
+	const total = steps.length;
+	const completed = progressOf(activeIndex, total);
+	const allDone = completed >= total;
+	const progress = pct(completed, total);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "agent-plan",
+		className: cn("flex w-full max-w-sm flex-col gap-3", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-(length:--cue-text-body) font-medium",
+					children: "Plan"
+				}), /* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-fg-subtle tabular-nums"),
+					children: [
+						completed,
+						" of ",
+						total
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "bg-surface-2 h-[3px] w-full overflow-hidden rounded-full",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "bg-accent block h-full rounded-full transition-[width] duration-500",
+					style: { width: `${progress}%` }
+				})
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col gap-2.5",
+				children: steps.map((step, i) => {
+					const done = allDone || i < completed;
+					const active = !allDone && i === completed;
+					return /* @__PURE__ */ jsxs("li", {
+						className: "flex items-center gap-2.5 text-(length:--cue-text-body)",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "flex size-4 shrink-0 items-center justify-center",
+							children: done ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-fg-subtle size-3.5" }) : active ? /* @__PURE__ */ jsx(Loader2Icon, { className: "text-fg size-3.5 animate-spin motion-reduce:animate-none" }) : /* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "bg-surface-3 size-1.5 rounded-full"
+							})
+						}), /* @__PURE__ */ jsx("span", {
+							className: cn(done && "text-fg-subtle", active && "text-fg", !done && !active && "text-fg-subtle"),
+							children: step
+						})]
+					}, step);
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { AgentPlan };

package/dist/elements/agent-status.d.ts

@@ -0,0 +1,29 @@
+import { ComponentProps } from "react";
+//#region src/elements/agent-status.d.ts
+/** What the agent is doing: `working`, `waiting` on the user, or `done`. */
+type AgentState = "working" | "waiting" | "done";
+/** One step of an agent's run, for a surface that lists them rather than showing the last. */
+interface StatusStep {
+  /** The step's own state, drawn as its glyph. */
+  state: AgentState;
+  /** What the step says. */
+  label: string;
+}
+/**
+ * One pill that always answers: what is it doing, and for how long.
+ *
+ * @example
+ * import { AgentStatus } from "@cueplusplus/ui/elements";
+ *
+ * <AgentStatus state="working" label="Editing composer.tsx" elapsed="8s" />
+ */
+declare function AgentStatus({ state, label, elapsed, className, ...props }: Omit<ComponentProps<"div">, "children" | "state" | "label" | "elapsed"> & {
+  /** Visual mode of the pill: working, waiting, or done with a check. */
+  state: AgentState;
+  /** Short status line describing what the agent is doing. */
+  label: string;
+  /** Elapsed time shown in mono when provided. */
+  elapsed?: string;
+}): import("react").JSX.Element;
+//#endregion
+export { AgentState, AgentStatus, StatusStep };

package/dist/elements/agent-status.js

@@ -0,0 +1,46 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ghostButton, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, PauseIcon, RotateCcwIcon } from "lucide-react";
+//#region src/elements/agent-status.tsx
+/**
+* One pill that always answers: what is it doing, and for how long.
+*
+* @example
+* import { AgentStatus } from "@cueplusplus/ui/elements";
+*
+* <AgentStatus state="working" label="Editing composer.tsx" elapsed="8s" />
+*/
+function AgentStatus({ state, label, elapsed, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "agent-status",
+		className: cn(paper, "flex items-center gap-2.5 rounded-full py-1.5 ps-3.5 pe-1.5", className),
+		...props,
+		children: [
+			state === "done" ? /* @__PURE__ */ jsx(CheckIcon, {
+				"aria-hidden": true,
+				className: "size-3 shrink-0 text-ok"
+			}) : /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cn("size-1.5 shrink-0 rounded-full motion-reduce:animate-none", state === "working" ? "animate-pulse bg-stream" : "bg-surface-3 animate-pulse")
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "cue-elements-fade-in cue-elements-blur-in-2 cue-elements-animate-in max-w-44 truncate text-(length:--cue-text-ui) duration-300 motion-reduce:animate-none",
+				children: label
+			}, label),
+			elapsed !== void 0 && state !== "done" && /* @__PURE__ */ jsx("span", {
+				className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle tabular-nums"),
+				children: elapsed
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": state === "done" ? "Run again" : "Pause agent",
+				className: cn(ghostButton, "size-6"),
+				children: state === "done" ? /* @__PURE__ */ jsx(RotateCcwIcon, { className: "size-3" }) : /* @__PURE__ */ jsx(PauseIcon, { className: "size-3" })
+			})
+		]
+	});
+}
+//#endregion
+export { AgentStatus };

package/dist/elements/agent-surface.d.ts

@@ -0,0 +1,65 @@
+import { AgentFidelity, AgentSkin } from "../system/agent-skin.js";
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/elements/agent-surface.d.ts
+interface AgentSurfaceProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /**
+   * Which value-set paints the subtree: `cue` (the default) or `aui`, which
+   * installs assistant-ui's own inks, grounds and hues.
+   */
+  skin?: AgentSkin;
+  /**
+   * How much a supersede island re-points: `cue-metrics` (the default, colour
+   * only) or `upstream`, which also pins assistant-ui's radii, literal type
+   * sizes and spacing so the density ladder stops at the island edge.
+   */
+  fidelity?: AgentFidelity;
+  /**
+   * Replace the rendered element (Base UI render prop). Accepts an element —
+   * `render={<section />}` — or a function returning one.
+   */
+  render?: useRender.RenderProp;
+  /** The subtree that paints with this island's values. */
+  children?: React.ReactNode;
+}
+/**
+ * The supersede island: one subtree, painted by a different set of values.
+ *
+ * Renders a plain `<div data-slot="agent-surface" data-cue-skin="…"
+ * data-cue-fidelity="…">` and publishes the same pair on React context. The attributes do the work —
+ * `@cueplusplus/ui/elements.css` re-declares, under them, the `--cue-*` tokens
+ * the whole elements family reads, and custom properties inherit, so every
+ * element inside repaints with no prop threading and no branch in any
+ * component. The context exists for the one place that cannot see the DOM: an
+ * overlay portaled to `<body>` from inside the island, which
+ * {@link useCuePortalProps} stamps from the same values.
+ *
+ * Two things this is not. It is not a theme — `data-theme`, `data-mode` and
+ * `data-density` are untouched, and a light app keeps a light island. And it is
+ * not needed for cue mode: the elements were rewritten onto cue's tokens by the
+ * vendoring codemod, so `skin="cue"` is what they already do. Reach for this to
+ * show an element the way assistant-ui drew it, or to hand a chat panel back to
+ * upstream's design language inside a console that is otherwise cue's.
+ *
+ * What an `aui` island re-points is this family's own vocabulary rather than the
+ * whole token contract: `--cue-busy`, `--cue-info`, `--cue-selection`,
+ * `--cue-focus`, `--cue-scrim` and every derived `*-soft` / `*-border` stay on
+ * the console's theme. Nothing in the elements group reads them, so the island
+ * is complete for what it is for — but a *cue* component placed inside one (a
+ * `Chip tone="busy"`, a `Toast`) paints half in each palette, and the
+ * derivations cannot be made to follow at all: they are `color-mix()` values
+ * resolved on the theme block and inherited as answers. `elements.css` carries
+ * the full accounting beside the values themselves.
+ *
+ * `elements.css` is a consumer import: `@import "@cueplusplus/ui/elements.css";`
+ * after the main stylesheet. Without it a `skin="aui"` island simply stays in
+ * cue's palette.
+ *
+ * @example
+ * <AgentSurface skin="aui" fidelity="upstream">
+ *   <ToolCall label="Searched" activeLabel="Searching" query="composer" … />
+ * </AgentSurface>
+ */
+declare const AgentSurface: React.ForwardRefExoticComponent<AgentSurfaceProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { AgentSurface, AgentSurfaceProps };

package/dist/elements/agent-surface.js

@@ -0,0 +1,68 @@
+"use client";
+import { AgentSkinContext } from "../system/agent-skin.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/elements/agent-surface.tsx
+/**
+* The supersede island: one subtree, painted by a different set of values.
+*
+* Renders a plain `<div data-slot="agent-surface" data-cue-skin="…"
+* data-cue-fidelity="…">` and publishes the same pair on React context. The attributes do the work —
+* `@cueplusplus/ui/elements.css` re-declares, under them, the `--cue-*` tokens
+* the whole elements family reads, and custom properties inherit, so every
+* element inside repaints with no prop threading and no branch in any
+* component. The context exists for the one place that cannot see the DOM: an
+* overlay portaled to `<body>` from inside the island, which
+* {@link useCuePortalProps} stamps from the same values.
+*
+* Two things this is not. It is not a theme — `data-theme`, `data-mode` and
+* `data-density` are untouched, and a light app keeps a light island. And it is
+* not needed for cue mode: the elements were rewritten onto cue's tokens by the
+* vendoring codemod, so `skin="cue"` is what they already do. Reach for this to
+* show an element the way assistant-ui drew it, or to hand a chat panel back to
+* upstream's design language inside a console that is otherwise cue's.
+*
+* What an `aui` island re-points is this family's own vocabulary rather than the
+* whole token contract: `--cue-busy`, `--cue-info`, `--cue-selection`,
+* `--cue-focus`, `--cue-scrim` and every derived `*-soft` / `*-border` stay on
+* the console's theme. Nothing in the elements group reads them, so the island
+* is complete for what it is for — but a *cue* component placed inside one (a
+* `Chip tone="busy"`, a `Toast`) paints half in each palette, and the
+* derivations cannot be made to follow at all: they are `color-mix()` values
+* resolved on the theme block and inherited as answers. `elements.css` carries
+* the full accounting beside the values themselves.
+*
+* `elements.css` is a consumer import: `@import "@cueplusplus/ui/elements.css";`
+* after the main stylesheet. Without it a `skin="aui"` island simply stays in
+* cue's palette.
+*
+* @example
+* <AgentSurface skin="aui" fidelity="upstream">
+*   <ToolCall label="Searched" activeLabel="Searching" query="composer" … />
+* </AgentSurface>
+*/
+const AgentSurface = React.forwardRef(function AgentSurface({ skin = "cue", fidelity = "cue-metrics", render, children, ...elementProps }, ref) {
+	const island = React.useMemo(() => ({
+		skin,
+		fidelity
+	}), [skin, fidelity]);
+	const element = useRender({
+		render,
+		ref,
+		defaultTagName: "div",
+		props: {
+			...elementProps,
+			"data-slot": "agent-surface",
+			"data-cue-skin": skin,
+			"data-cue-fidelity": fidelity,
+			children
+		}
+	});
+	return /* @__PURE__ */ jsx(AgentSkinContext.Provider, {
+		value: island,
+		children: element
+	});
+});
+//#endregion
+export { AgentSurface };

package/dist/elements/animated-number.d.ts

@@ -0,0 +1,86 @@
+import * as React from "react";
+//#region src/elements/animated-number.d.ts
+/**
+ * A count in the shape a status line writes it: `842`, `1.2k`, `3.4M`.
+ *
+ * The reference's own rule — `value < 1000 ? value : (value / 1000).toFixed(1)
+ * + "k"` — with two extensions it needs to survive real data: a million rung,
+ * because a context window is now measured in them, and a sign, because a
+ * delta is a number too. One decimal at every rung above the first, so the
+ * width of the string stops changing once it is short.
+ *
+ * Anything that is not a finite number is `0`: this formats a caller's
+ * arithmetic, and a division that has not happened yet is a real state.
+ *
+ * @param value The number to write.
+ * @returns The compact form, without a unit — `tokens` is the caller's word.
+ * @example
+ * formatCompactNumber(842);      // "842"
+ * formatCompactNumber(1240);     // "1.2k"
+ * formatCompactNumber(3_400_000); // "3.4M"
+ */
+declare function formatCompactNumber(value: number): string;
+interface AnimatedNumberProps extends Omit<React.ComponentPropsWithoutRef<"span">, "children"> {
+  /**
+   * The number to show. Every change eases from whatever is on screen to this,
+   * including a change that arrives mid-tween — which is the case a live
+   * counter is actually made of.
+   *
+   * A non-finite value paints `0` rather than the word `NaN`: these arrive from
+   * a caller's arithmetic over a stream that may not have started.
+   */
+  value: number;
+  /**
+   * How long one tween lasts, in milliseconds. Defaults to `400` — long enough
+   * to read as counting, short enough that a counter updated every second is
+   * never behind the run it is describing. `0` steps.
+   */
+  duration?: number;
+  /**
+   * How to write the number. Defaults to grouped digits in `en-US`
+   * (`1,240`), which is deterministic across a server render and a client one;
+   * {@link formatCompactNumber} is the other one this family uses (`1.2k`).
+   *
+   * Called on every frame, so keep it cheap.
+   */
+  format?: (value: number) => string;
+}
+/**
+ * A number that counts to its new value instead of jumping to it.
+ *
+ * The smallest element in the canon and the one that touches the most rows: a
+ * token count, a cost, a duration, a file tally. Two rules, both from the same
+ * teardown. Tween, because a value that steps reads as a new fact while a value
+ * that counts reads as the same fact moving — and a transcript's numbers are
+ * almost always the second thing. And `tabular-nums`, because a proportional
+ * `1` is narrower than a `0`, so a stepping counter nudges everything to its
+ * right on every update.
+ *
+ * It holds the only state in the canon, and it is a tween rather than a fact:
+ * `value` is still a prop, every tween ends exactly on it, and a replay that
+ * sets the prop paints the same number at every frame it rests on.
+ *
+ * **Reduced motion is answered by arriving, not by stopping.** A reader who has
+ * asked for stillness gets the value immediately and no frames are ever
+ * scheduled — the number is information, and the animation was only ever how it
+ * got there.
+ *
+ * While a tween is in flight the digits on screen are `aria-hidden` and the
+ * settled value is carried beside them for a screen reader, so an assistive
+ * technology reads the number the run actually reported rather than whichever
+ * frame it happened to land on. Once the tween ends there is one node again and
+ * nothing is duplicated.
+ *
+ * @example
+ * import { AnimatedNumber } from "@cueplusplus/ui/elements";
+ *
+ * <AnimatedNumber value={tokens} />
+ * @example
+ * // The reference's own readout: compact, inline, in the status line.
+ * <span className="text-fg-muted">
+ *   · <AnimatedNumber value={tokens} format={formatCompactNumber} /> tokens
+ * </span>
+ */
+declare const AnimatedNumber: React.ForwardRefExoticComponent<AnimatedNumberProps & React.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { AnimatedNumber, AnimatedNumberProps, formatCompactNumber };

package/dist/elements/animated-number.js

@@ -0,0 +1,118 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { usePrefersReducedMotion } from "../instruments/_motion.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/animated-number.tsx
+/**
+* A count in the shape a status line writes it: `842`, `1.2k`, `3.4M`.
+*
+* The reference's own rule — `value < 1000 ? value : (value / 1000).toFixed(1)
+* + "k"` — with two extensions it needs to survive real data: a million rung,
+* because a context window is now measured in them, and a sign, because a
+* delta is a number too. One decimal at every rung above the first, so the
+* width of the string stops changing once it is short.
+*
+* Anything that is not a finite number is `0`: this formats a caller's
+* arithmetic, and a division that has not happened yet is a real state.
+*
+* @param value The number to write.
+* @returns The compact form, without a unit — `tokens` is the caller's word.
+* @example
+* formatCompactNumber(842);      // "842"
+* formatCompactNumber(1240);     // "1.2k"
+* formatCompactNumber(3_400_000); // "3.4M"
+*/
+function formatCompactNumber(value) {
+	if (!Number.isFinite(value)) return "0";
+	const sign = value < 0 ? "-" : "";
+	const size = Math.abs(value);
+	if (size < 1e3) return `${sign}${Math.round(size)}`;
+	if (size < 1e6) return `${sign}${(size / 1e3).toFixed(1)}k`;
+	return `${sign}${(size / 1e6).toFixed(1)}M`;
+}
+/** Grouped digits, in a fixed locale so a server and a client agree. */
+const GROUPED = (value) => value.toLocaleString("en-US");
+/**
+* A number that counts to its new value instead of jumping to it.
+*
+* The smallest element in the canon and the one that touches the most rows: a
+* token count, a cost, a duration, a file tally. Two rules, both from the same
+* teardown. Tween, because a value that steps reads as a new fact while a value
+* that counts reads as the same fact moving — and a transcript's numbers are
+* almost always the second thing. And `tabular-nums`, because a proportional
+* `1` is narrower than a `0`, so a stepping counter nudges everything to its
+* right on every update.
+*
+* It holds the only state in the canon, and it is a tween rather than a fact:
+* `value` is still a prop, every tween ends exactly on it, and a replay that
+* sets the prop paints the same number at every frame it rests on.
+*
+* **Reduced motion is answered by arriving, not by stopping.** A reader who has
+* asked for stillness gets the value immediately and no frames are ever
+* scheduled — the number is information, and the animation was only ever how it
+* got there.
+*
+* While a tween is in flight the digits on screen are `aria-hidden` and the
+* settled value is carried beside them for a screen reader, so an assistive
+* technology reads the number the run actually reported rather than whichever
+* frame it happened to land on. Once the tween ends there is one node again and
+* nothing is duplicated.
+*
+* @example
+* import { AnimatedNumber } from "@cueplusplus/ui/elements";
+*
+* <AnimatedNumber value={tokens} />
+* @example
+* // The reference's own readout: compact, inline, in the status line.
+* <span className="text-fg-muted">
+*   · <AnimatedNumber value={tokens} format={formatCompactNumber} /> tokens
+* </span>
+*/
+const AnimatedNumber = React.forwardRef(function AnimatedNumber({ value, duration = 400, format = GROUPED, className, ...elementProps }, ref) {
+	const target = Number.isFinite(value) ? value : 0;
+	const reduced = usePrefersReducedMotion();
+	const [shown, setShown] = React.useState(target);
+	const painted = React.useRef(target);
+	React.useEffect(() => {
+		const from = painted.current;
+		if (from === target) return;
+		if (reduced || duration <= 0 || typeof requestAnimationFrame !== "function") {
+			painted.current = target;
+			setShown(target);
+			return;
+		}
+		let origin = -1;
+		let frameId = requestAnimationFrame(function tick(at) {
+			if (origin < 0) origin = at;
+			const through = Math.min(1, (at - origin) / duration);
+			const next = through >= 1 ? target : Math.floor(from + (target - from) * through);
+			painted.current = next;
+			setShown(next);
+			if (through >= 1) return;
+			frameId = requestAnimationFrame(tick);
+		});
+		return () => cancelAnimationFrame(frameId);
+	}, [
+		duration,
+		reduced,
+		target
+	]);
+	const tweening = shown !== target;
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		"data-slot": "animated-number",
+		"data-tweening": String(tweening),
+		className: cn("tabular-nums", className),
+		...elementProps,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": tweening || void 0,
+			children: format(shown)
+		}), tweening ? /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: format(target)
+		}) : null]
+	});
+});
+//#endregion
+export { AnimatedNumber, formatCompactNumber };

package/dist/elements/approval-card.d.ts

@@ -0,0 +1,40 @@
+import { ComponentProps } from "react";
+//#region src/elements/approval-card.d.ts
+/**
+ * Where an approval has got to: `request` while it waits on the user, then `running`,
+ * `done` or `denied`.
+ */
+type ApprovalState = "request" | "running" | "done" | "denied";
+/**
+ * Human in the loop: the agent asks before it runs anything with side effects.
+ *
+ * @example
+ * import { ApprovalCard } from "@cueplusplus/ui/elements";
+ *
+ * <ApprovalCard
+ *   state="request"
+ *   command="pnpm db:migrate"
+ *   title="Run migration"
+ *   subtitle="Needs your approval"
+ *   onAllowOnce={() => approve()}
+ *   onDeny={() => deny()}
+ * />
+ */
+declare function ApprovalCard({ state, command, title, subtitle, onAllowOnce, onAlwaysAllow, onDeny, className, ...props }: Omit<ComponentProps<"div">, "children" | "state" | "command" | "title" | "subtitle" | "onAllowOnce" | "onAlwaysAllow" | "onDeny"> & {
+  /** Lifecycle of the card: request with actions, running spinner, done check, or denied. */
+  state: ApprovalState;
+  /** Command shown in the mono field the agent wants to run. */
+  command: string;
+  /** Headline naming the action that needs approval. */
+  title: string;
+  /** Supporting line under the title explaining the request. */
+  subtitle: string;
+  /** Called when the user clicks Allow once. */
+  onAllowOnce?: () => void;
+  /** Called when the user clicks Always allow. */
+  onAlwaysAllow?: () => void;
+  /** Called when the user clicks Deny. */
+  onDeny?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { ApprovalCard, ApprovalState };

package/dist/elements/approval-card.js

@@ -0,0 +1,78 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, inkButton, paper } from "./surfaces.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, Loader2Icon, TerminalIcon, XIcon } from "lucide-react";
+//#region src/elements/approval-card.tsx
+/**
+* Human in the loop: the agent asks before it runs anything with side effects.
+*
+* @example
+* import { ApprovalCard } from "@cueplusplus/ui/elements";
+*
+* <ApprovalCard
+*   state="request"
+*   command="pnpm db:migrate"
+*   title="Run migration"
+*   subtitle="Needs your approval"
+*   onAllowOnce={() => approve()}
+*   onDeny={() => deny()}
+* />
+*/
+function ApprovalCard({ state, command, title, subtitle, onAllowOnce, onAlwaysAllow, onDeny, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "approval-card",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3.5 rounded-(--radius-overlay) p-4", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "bg-surface-1 text-fg-muted flex size-9 shrink-0 items-center justify-center rounded-(--radius-surface)",
+					children: /* @__PURE__ */ jsx(TerminalIcon, { className: "size-4" })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-(length:--cue-text-body) font-medium",
+						children: title
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-fg-muted text-(length:--cue-text-ui)",
+						children: subtitle
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn(field, "text-fg-muted rounded-(--radius-surface) px-3.5 py-2.5 font-mono text-(length:--cue-text-ui)"),
+				children: command
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex h-8 items-center justify-end gap-2",
+				children: state === "request" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onDeny,
+						className: "text-fg-muted hover:bg-surface-2 hover:text-fg h-8 rounded-full px-3.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+						children: "Deny"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onAlwaysAllow,
+						className: "text-fg-muted hover:bg-surface-2 hover:text-fg h-8 rounded-full px-3.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+						children: "Always allow"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onAllowOnce,
+						className: cn(inkButton, "flex h-8 items-center rounded-full px-3.5 text-(length:--cue-text-ui) font-medium"),
+						children: "Allow once"
+					})
+				] }) : /* @__PURE__ */ jsx("div", {
+					className: "cue-elements-fade-in cue-elements-animate-in text-fg-muted flex items-center gap-2 text-(length:--cue-text-ui) duration-300",
+					children: state === "running" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Loader2Icon, { className: "text-fg-muted size-3.5 animate-spin" }), "Approved, running"] }) : state === "denied" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XIcon, { className: "text-fg-muted size-3.5" }), "Denied"] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 text-ok" }), "Finished with exit 0"] })
+				}, state)
+			})
+		]
+	});
+}
+//#endregion
+export { ApprovalCard };

package/dist/elements/artifact-card.d.ts

@@ -0,0 +1,30 @@
+import { ComponentProps } from "react";
+//#region src/elements/artifact-card.d.ts
+/**
+ * A generated document as a tangible object, written live and versioned.
+ *
+ * @example
+ * import { ArtifactCard } from "@cueplusplus/ui/elements";
+ *
+ * <ArtifactCard
+ *   title="Draft persistence RFC"
+ *   meta="Document · v3 · just now"
+ *   generating={isWriting}
+ *   words={wordCount}
+ * />
+ */
+declare function ArtifactCard({ title, meta, generating, words, className, ...props }: Omit<ComponentProps<"div">, "children" | "title" | "meta" | "generating" | "words"> & {
+  /** Name of the generated artifact. */
+  title: string;
+  /**
+   * Resting meta line shown once generation finishes, for example kind, version, and
+   * recency.
+   */
+  meta: string;
+  /** While true the icon pulses and the meta line shows a live word count with a shimmer. */
+  generating?: boolean;
+  /** Live word count shown while generating. */
+  words?: number;
+}): import("react").JSX.Element;
+//#endregion
+export { ArtifactCard };