@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/motion/swipe-row/swipe-row.d.ts

@@ -0,0 +1,52 @@
+import * as React from "react";
+//#region src/motion/swipe-row/swipe-row.d.ts
+export type SwipeRowActionTone = "neutral" | "primary" | "destructive";
+export interface SwipeRowAction {
+  /** Passed to `onAction`. */
+  id: string;
+  /** Visible label, and the action button's accessible name. */
+  label: string;
+  /** A lucide icon, shown above the label. */
+  icon?: React.ReactNode;
+  /** Fill colour. Defaults to `neutral`. */
+  tone?: SwipeRowActionTone;
+}
+export interface SwipeRowProps {
+  /** The row's visible content. */
+  children: React.ReactNode;
+  /** Accessible name of the row, for example the item's title. */
+  label: string;
+  /**
+   * The actions a swipe reveals, primary first. The primary action sits at the
+   * row's outer edge, and a full swipe commits it.
+   */
+  actions: readonly SwipeRowAction[];
+  /** Runs an action, from a button press or a full swipe. */
+  onAction: (actionId: string) => void;
+  /** Commit the primary action when the row is swiped most of the way across. Default `true`. */
+  fullSwipe?: boolean;
+  /** Width of each action button, in pixels. Default 72. */
+  actionWidth?: number;
+  /** Whether the actions are revealed (controlled). */
+  open?: boolean;
+  /** Whether the actions start revealed (uncontrolled). */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+}
+/**
+ * A list row whose actions a swipe toward the start edge reveals: the action
+ * tray follows the swipe in over the row's trailing edge, while the row's own
+ * content stays in place. A flick snaps it open or shut, and a swipe past most
+ * of the row's width commits the primary action, which stretches to fill the
+ * row as it arms.
+ *
+ * The actions are real buttons in the tab order: focusing one reveals the row,
+ * so keyboard and screen-reader users get the same actions. Tapping the row
+ * while it is open closes it.
+ *
+ * Behavior reference: reactbits swipe-row.
+ */
+export declare function SwipeRow(props: SwipeRowProps): React.JSX.Element;
+//#endregion

package/dist/motion/swipe-row/swipe-row.js

@@ -0,0 +1,208 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { useControllableValue, useLatest } from "ahooks";
+import { animate, motion, useMotionValue, useMotionValueEvent, useReducedMotionConfig, useTransform } from "motion/react";
+//#region src/motion/swipe-row/swipe-row.tsx
+/** Share of the row's width past which a released swipe commits the primary action. */
+const COMMIT_RATIO = .6;
+/** Release velocity (px/s) that counts as a flick. */
+const FLICK_VELOCITY = 600;
+/** Reveal distance under which the action tray stays hidden. */
+const TRAY_HIDDEN_PX = 8;
+/** Width of the fade on the content's trailing edge while the row is open. */
+const CONTENT_FADE_PX = 32;
+const SPRING = {
+	type: "spring",
+	stiffness: 520,
+	damping: 44,
+	mass: .9
+};
+const INSTANT = { duration: 0 };
+const toneClass = {
+	neutral: "bg-primary text-primary-foreground",
+	primary: "bg-primary text-primary-foreground",
+	destructive: "bg-(--soft-critical-fill) text-(--soft-critical-on-fill)"
+};
+/**
+* A list row whose actions a swipe toward the start edge reveals: the action
+* tray follows the swipe in over the row's trailing edge, while the row's own
+* content stays in place. A flick snaps it open or shut, and a swipe past most
+* of the row's width commits the primary action, which stretches to fill the
+* row as it arms.
+*
+* The actions are real buttons in the tab order: focusing one reveals the row,
+* so keyboard and screen-reader users get the same actions. Tapping the row
+* while it is open closes it.
+*
+* Behavior reference: reactbits swipe-row.
+*/
+function SwipeRow(props) {
+	const { children, label, actions, onAction, fullSwipe = true, actionWidth = 72, disabled = false, className } = props;
+	const [open, setOpen] = useControllableValue(props, {
+		defaultValue: false,
+		valuePropName: "open",
+		defaultValuePropName: "defaultOpen",
+		trigger: "onOpenChange"
+	});
+	const reduced = useReducedMotionConfig() ?? false;
+	const transition = reduced ? INSTANT : SPRING;
+	const rowRef = React.useRef(null);
+	const draggedRef = React.useRef(false);
+	const committingRef = React.useRef(false);
+	const onActionRef = useLatest(onAction);
+	const primary = actions[0];
+	const revealWidth = actions.length * actionWidth;
+	const x = useMotionValue(open ? -revealWidth : 0);
+	const trayWidth = useTransform(x, (value) => Math.max(revealWidth, -value));
+	const trayX = useTransform(x, (value) => Math.max(0, revealWidth + value));
+	const trayOpacity = useTransform(x, (value) => -value > TRAY_HIDDEN_PX ? 1 : 0);
+	const contentMask = useTransform(x, (value) => {
+		const offset = Math.max(0, -value);
+		return `linear-gradient(to left, transparent ${offset}px, black ${offset + Math.min(offset / 3, CONTENT_FADE_PX)}px)`;
+	});
+	const contentX = useTransform(x, (value) => Math.max(0, value));
+	const [armed, setArmed] = React.useState(false);
+	const rowWidth = () => rowRef.current?.offsetWidth ?? revealWidth / COMMIT_RATIO;
+	useMotionValueEvent(x, "change", (value) => {
+		const next = fullSwipe && primary !== void 0 && -value > rowWidth() * COMMIT_RATIO;
+		setArmed((previous) => previous === next ? previous : next);
+	});
+	React.useEffect(() => {
+		if (committingRef.current) return;
+		const controls = animate(x, open ? -revealWidth : 0, transition);
+		return () => controls.stop();
+	}, [
+		open,
+		revealWidth,
+		transition,
+		x
+	]);
+	const settle = (next) => {
+		if (next === open) animate(x, next ? -revealWidth : 0, transition);
+		else setOpen(next);
+	};
+	const commit = (actionId) => {
+		committingRef.current = true;
+		animate(x, -rowWidth(), transition).then(() => {
+			onActionRef.current(actionId);
+			committingRef.current = false;
+			setOpen(false);
+			animate(x, 0, transition);
+		});
+	};
+	const panStartRef = React.useRef(0);
+	const handlePanStart = () => {
+		draggedRef.current = true;
+		panStartRef.current = x.get();
+	};
+	const handlePan = (_event, info) => {
+		if (committingRef.current) return;
+		const raw = panStartRef.current + info.offset.x;
+		if (raw > 0) x.set(raw * .15);
+		else if (!fullSwipe && raw < -revealWidth) x.set(-revealWidth + (raw + revealWidth) * .2);
+		else x.set(raw);
+	};
+	const handlePanEnd = (_event, info) => {
+		if (committingRef.current) return;
+		const offset = -x.get();
+		const velocity = -info.velocity.x;
+		if (fullSwipe && primary && offset > rowWidth() * COMMIT_RATIO) {
+			commit(primary.id);
+			return;
+		}
+		if (velocity > FLICK_VELOCITY) {
+			settle(true);
+			return;
+		}
+		if (velocity < -600) {
+			settle(false);
+			return;
+		}
+		settle(offset > revealWidth / 2);
+	};
+	const handleBlur = (event) => {
+		const next = event.relatedTarget;
+		if (next instanceof Node && event.currentTarget.contains(next)) return;
+		if (open) setOpen(false);
+	};
+	const handleContentClick = (event) => {
+		if (draggedRef.current) {
+			draggedRef.current = false;
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		if (open) {
+			event.preventDefault();
+			event.stopPropagation();
+			setOpen(false);
+		}
+	};
+	const trayActions = [...actions].reverse();
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rowRef,
+		role: "group",
+		"aria-label": label,
+		"data-slot": "swipe-row",
+		"data-state": open ? "open" : "closed",
+		"data-armed": armed ? "" : void 0,
+		"data-reduced-motion": reduced ? "" : void 0,
+		onBlur: handleBlur,
+		className: cn("relative isolate overflow-clip rounded-md bg-card", className),
+		children: [/* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "swipe-row-actions",
+			style: {
+				width: trayWidth,
+				x: trayX,
+				opacity: trayOpacity
+			},
+			className: "absolute inset-y-0 right-0 z-20 flex",
+			onFocus: () => {
+				if (!open) setOpen(true);
+			},
+			children: trayActions.map((action) => {
+				const isPrimary = action.id === primary?.id;
+				const grow = armed ? isPrimary ? 1 : 0 : 1;
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled,
+					"data-slot": "swipe-row-action",
+					"data-primary": isPrimary ? "" : void 0,
+					onClick: () => onActionRef.current(action.id),
+					style: {
+						flexGrow: grow,
+						flexBasis: grow === 0 ? 0 : actionWidth
+					},
+					className: cn("relative flex min-w-0 shrink flex-col items-center justify-center overflow-hidden px-1 text-xs font-medium whitespace-nowrap outline-none", "before:pointer-events-none before:absolute before:inset-0 before:bg-black/10 before:opacity-0 enabled:hover:before:opacity-100 focus-visible:before:opacity-100 dark:before:bg-white/10", "after:pointer-events-none after:absolute after:inset-1.5 after:rounded-md after:ring-current/50 focus-visible:after:ring-2", "disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", reduced ? "transition-none" : "transition-[flex-grow,flex-basis] duration-200 ease-out", toneClass[action.tone ?? "neutral"]),
+					children: /* @__PURE__ */ jsxs("span", {
+						className: "relative flex min-w-0 flex-col items-center gap-1",
+						children: [action.icon, /* @__PURE__ */ jsx("span", {
+							className: "max-w-full truncate",
+							children: action.label
+						})]
+					})
+				}, action.id);
+			})
+		}), /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "swipe-row-content",
+			style: {
+				x: contentX,
+				touchAction: "pan-y",
+				maskImage: contentMask,
+				WebkitMaskImage: contentMask
+			},
+			onPanStart: disabled ? void 0 : handlePanStart,
+			onPan: disabled ? void 0 : handlePan,
+			onPanEnd: disabled ? void 0 : handlePanEnd,
+			onPointerDownCapture: () => {
+				draggedRef.current = false;
+			},
+			onClickCapture: handleContentClick,
+			className: cn("relative z-10 bg-card text-card-foreground", !disabled && "cursor-grab active:cursor-grabbing"),
+			children
+		})]
+	});
+}
+//#endregion
+export { SwipeRow };

package/dist/motion/thinking-trace/thinking-trace.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+//#region src/motion/thinking-trace/thinking-trace.d.ts
+export interface ThinkingTraceProps extends Omit<React.ComponentProps<"div">, "children"> {
+  /** True while the agent is still reasoning. */
+  working: boolean;
+  /** Reasoning steps, oldest first. The last one is the live step while working. */
+  steps: string[];
+  /** Label while working. */
+  label?: string;
+  /** Label once settled, given the formatted elapsed time ("4.2s"). */
+  doneLabel?: (elapsed: string) => string;
+  /** Show the elapsed time while working. */
+  showTimer?: boolean;
+  /** Elapsed time in ms, from the app. When omitted the trace runs its own clock while working. */
+  elapsedMs?: number;
+  /** Whether the step list is open (controlled). */
+  expanded?: boolean;
+  /** Initial open state when uncontrolled. */
+  defaultExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  /** Close the step list when `working` turns false. */
+  collapseOnSettle?: boolean;
+}
+/**
+ * Streaming reasoning: a "Thinking" label with an elapsed timer over a list
+ * of steps that grows as they arrive, collapsing to a settled label ("Thought
+ * for 4.2s") when the agent finishes. The header toggles the list.
+ *
+ * Behavior reference: reactbits thought-line.
+ */
+export declare function ThinkingTrace({ working, steps, label, doneLabel, showTimer, elapsedMs, expanded: _expanded, defaultExpanded: _defaultExpanded, onExpandedChange: _onExpandedChange, collapseOnSettle, className, ...props }: ThinkingTraceProps): React.JSX.Element;
+//#endregion

package/dist/motion/thinking-trace/thinking-trace.js

@@ -0,0 +1,186 @@
+import { useLoop } from "../../lib/motion-loop.js";
+import { formatElapsed, useElapsed } from "../../lib/elapsed.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { CheckIcon, ChevronDownIcon, SparklesIcon } from "lucide-react";
+import { useControllableValue, useUpdateEffect } from "ahooks";
+import { AnimatePresence, motion, useReducedMotionConfig, useTransform } from "motion/react";
+//#region src/motion/thinking-trace/thinking-trace.tsx
+const defaultDoneLabel = (elapsed) => `Thought for ${elapsed}`;
+/**
+* Streaming reasoning: a "Thinking" label with an elapsed timer over a list
+* of steps that grows as they arrive, collapsing to a settled label ("Thought
+* for 4.2s") when the agent finishes. The header toggles the list.
+*
+* Behavior reference: reactbits thought-line.
+*/
+function ThinkingTrace({ working, steps, label = "Thinking", doneLabel = defaultDoneLabel, showTimer = true, elapsedMs, expanded: _expanded, defaultExpanded: _defaultExpanded, onExpandedChange: _onExpandedChange, collapseOnSettle = true, className, ...props }) {
+	const reduced = useReducedMotionConfig() ?? false;
+	const listId = React.useId();
+	const clock = useElapsed(working, elapsedMs, formatElapsed);
+	const [expanded, setExpanded] = useControllableValue(pickExpandedProps({
+		expanded: _expanded,
+		defaultExpanded: _defaultExpanded,
+		onExpandedChange: _onExpandedChange
+	}), {
+		valuePropName: "expanded",
+		defaultValuePropName: "defaultExpanded",
+		trigger: "onExpandedChange",
+		defaultValue: working
+	});
+	useUpdateEffect(() => {
+		if (!working && collapseOnSettle) setExpanded(false);
+		if (working) setExpanded(true);
+	}, [working]);
+	const elapsedText = clock.text;
+	const hasSteps = steps.length > 0;
+	const title = working ? `${label}…` : doneLabel(elapsedText);
+	const breath = useLoop([
+		1,
+		.45,
+		1
+	], { duration: 1.6 }, working && !reduced, 1);
+	const breathScale = useTransform(breath, [.45, 1], [.88, 1]);
+	const fade = reduced ? { duration: 0 } : {
+		duration: .2,
+		ease: "easeOut"
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "thinking-trace",
+		"data-state": working ? "working" : "settled",
+		"data-motion": reduced ? "reduced" : "full",
+		className: cn("flex flex-col text-xs/relaxed", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs(Header, {
+				interactive: steps.length > 0,
+				expanded,
+				controls: expanded ? listId : void 0,
+				onToggle: () => setExpanded(!expanded),
+				children: [
+					/* @__PURE__ */ jsx(motion.span, {
+						"aria-hidden": "true",
+						className: "inline-flex",
+						style: {
+							opacity: breath,
+							scale: breathScale
+						},
+						children: /* @__PURE__ */ jsx(SparklesIcon, { className: "size-3.5" })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: title
+					}),
+					working && showTimer ? /* @__PURE__ */ jsx("span", {
+						ref: clock.textRef,
+						"aria-hidden": "true",
+						"data-slot": "thinking-trace-timer",
+						className: "font-mono text-[0.6875rem] tabular-nums",
+						children: elapsedText
+					}) : null,
+					hasSteps ? /* @__PURE__ */ jsx(ChevronDownIcon, {
+						"aria-hidden": "true",
+						className: cn("size-3.5 transition-transform duration-200 motion-reduce:transition-none", reduced && "transition-none", expanded && "rotate-180")
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsx(AnimatePresence, {
+				initial: false,
+				children: expanded && hasSteps ? /* @__PURE__ */ jsx(motion.div, {
+					id: listId,
+					"data-slot": "thinking-trace-steps",
+					className: "overflow-hidden",
+					initial: {
+						height: 0,
+						opacity: 0
+					},
+					animate: {
+						height: "auto",
+						opacity: 1
+					},
+					exit: {
+						height: 0,
+						opacity: 0
+					},
+					transition: reduced ? { duration: 0 } : {
+						duration: .22,
+						ease: "easeOut"
+					},
+					children: /* @__PURE__ */ jsx("ol", {
+						"aria-label": label,
+						className: "flex flex-col gap-0.5 pt-1 pl-5",
+						children: /* @__PURE__ */ jsx(AnimatePresence, {
+							initial: false,
+							children: steps.map((text, index) => {
+								const live = working && index === steps.length - 1;
+								return /* @__PURE__ */ jsxs(motion.li, {
+									"data-slot": "thinking-trace-step",
+									"data-live": live || void 0,
+									className: cn("flex items-start gap-2", live ? "text-foreground" : "text-muted-foreground"),
+									initial: reduced ? false : {
+										opacity: 0,
+										y: 4
+									},
+									animate: {
+										opacity: 1,
+										y: 0
+									},
+									transition: fade,
+									children: [/* @__PURE__ */ jsx("span", {
+										"aria-hidden": "true",
+										className: "mt-0.75 flex size-3 shrink-0 items-center justify-center",
+										children: live ? /* @__PURE__ */ jsx(LiveDot, { reduced }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3" })
+									}), /* @__PURE__ */ jsx("span", { children: text })]
+								}, index);
+							})
+						})
+					})
+				}, "steps") : null
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				className: "sr-only",
+				children: working ? `${label}…` : doneLabel(elapsedText)
+			})
+		]
+	});
+}
+const HEADER = "-mx-1 inline-flex w-fit items-center gap-1.5 rounded-md px-1 py-0.5 text-muted-foreground";
+/** The toggle button over the steps, or plain text while there are none. */
+function Header({ interactive, expanded, controls, onToggle, children }) {
+	if (!interactive) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "thinking-trace-header",
+		className: HEADER,
+		children
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-slot": "thinking-trace-trigger",
+		"aria-expanded": expanded,
+		"aria-controls": controls,
+		onClick: onToggle,
+		className: cn(HEADER, "outline-none transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50"),
+		children
+	});
+}
+/** The pulsing dot beside the live step; steady under reduced motion. */
+function LiveDot({ reduced }) {
+	const opacity = useLoop([
+		.35,
+		1,
+		.35
+	], { duration: 1.2 }, !reduced, .7);
+	return /* @__PURE__ */ jsx(motion.span, {
+		className: "size-1.5 rounded-full bg-current",
+		style: { opacity }
+	});
+}
+/** Only the keys the caller actually set, so useControllableValue sees uncontrolled use. */
+function pickExpandedProps(props) {
+	const picked = {};
+	for (const [key, value] of Object.entries(props)) if (value !== void 0) picked[key] = value;
+	return picked;
+}
+//#endregion
+export { ThinkingTrace };

package/dist/motion/tool-call-chip/tool-call-chip.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+//#region src/motion/tool-call-chip/tool-call-chip.d.ts
+export type ToolCallChipStatus = "running" | "success" | "error";
+export interface ToolCallChipProps extends Omit<React.ComponentProps<"span">, "children" | "ref"> {
+  /** The tool's name, for example "bash". */
+  name: string;
+  /** A short argument summary, for example "npm test". */
+  detail?: string;
+  status: ToolCallChipStatus;
+  /** Leading icon. Defaults to a terminal glyph. */
+  icon?: React.ReactNode;
+  /**
+   * Duration in ms, from the app. When omitted the chip runs its own
+   * millisecond counter while running and freezes it after.
+   */
+  elapsedMs?: number;
+  /** Shows a retry button in the error state. */
+  onRetry?: () => void;
+  /** Accessible label of the retry button. Defaults to "Retry <name>". */
+  retryLabel?: string;
+  /**
+   * Make the chip a polite live region that announces its outcome. Off by
+   * default: a thread holds many chips, and each one live would flood screen
+   * readers. Turn it on for a chip shown alone, or announce from the thread.
+   */
+  announce?: boolean;
+}
+/**
+ * An inline tool-call chip for a conversation thread: a fill sweeps it while
+ * the call runs with a live millisecond counter, a success wash settles it, and
+ * an error shakes once and offers a retry.
+ *
+ * Behavior reference: reactbits call-chip.
+ */
+export declare function ToolCallChip({ name, detail, status, icon, elapsedMs, onRetry, retryLabel, announce, className, ...props }: ToolCallChipProps): React.JSX.Element;
+//#endregion

package/dist/motion/tool-call-chip/tool-call-chip.js

@@ -0,0 +1,135 @@
+import { formatMilliseconds, useElapsed } from "../../lib/elapsed.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { CheckIcon, RotateCcwIcon, SquareTerminalIcon, XIcon } from "lucide-react";
+import { animate, motion, useAnimate, useMotionValue, useReducedMotionConfig } from "motion/react";
+//#region src/motion/tool-call-chip/tool-call-chip.tsx
+const FILL_TAU_MS = 2400;
+/**
+* An inline tool-call chip for a conversation thread: a fill sweeps it while
+* the call runs with a live millisecond counter, a success wash settles it, and
+* an error shakes once and offers a retry.
+*
+* Behavior reference: reactbits call-chip.
+*/
+function ToolCallChip({ name, detail, status, icon, elapsedMs, onRetry, retryLabel, announce = false, className, ...props }) {
+	const reduced = useReducedMotionConfig() ?? false;
+	const [scope, animate$1] = useAnimate();
+	const runFill = useMotionValue(0);
+	const clock = useElapsed(status === "running", elapsedMs, formatMilliseconds, {
+		tick: 47,
+		onTick: (ms) => runFill.set(1 - Math.exp(-ms / FILL_TAU_MS))
+	});
+	const time = clock.text;
+	React.useEffect(() => {
+		if (status === "running") {
+			if (elapsedMs !== void 0) runFill.set(1 - Math.exp(-elapsedMs / FILL_TAU_MS));
+			return;
+		}
+		if (reduced) {
+			runFill.set(1);
+			return;
+		}
+		const controls = animate(runFill, 1, {
+			duration: .18,
+			ease: "easeOut"
+		});
+		return () => controls.stop();
+	}, [
+		status,
+		reduced,
+		elapsedMs,
+		runFill
+	]);
+	const outcome = status === "running" ? `${name} running` : status === "success" ? `${name} succeeded in ${time}` : `${name} failed after ${time}`;
+	React.useEffect(() => {
+		if (status !== "error" || reduced || !scope.current) return;
+		const controls = animate$1(scope.current, { x: [
+			0,
+			-4,
+			4,
+			-3,
+			3,
+			0
+		] }, { duration: .36 });
+		return () => controls.stop();
+	}, [
+		status,
+		reduced,
+		animate$1,
+		scope
+	]);
+	return /* @__PURE__ */ jsxs("span", {
+		ref: scope,
+		"data-slot": "tool-call-chip",
+		"data-status": status,
+		"data-motion": reduced ? "reduced" : "full",
+		className: cn("relative isolate inline-flex h-6 max-w-full items-center gap-1.5 overflow-hidden rounded-md border pl-2 align-middle text-xs/relaxed", status === "error" ? "border-destructive/40 bg-destructive/5 dark:bg-destructive/15" : "border-border bg-muted/60 dark:bg-input/30", onRetry && status === "error" ? "pr-0.5" : "pr-2", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(motion.span, {
+				"aria-hidden": "true",
+				"data-slot": "tool-call-chip-fill",
+				className: "absolute inset-y-0 left-0 -z-10 w-full origin-left bg-linear-to-r from-foreground/6 from-60% to-transparent",
+				style: { scaleX: runFill },
+				initial: false,
+				animate: { opacity: status === "running" && !reduced ? 1 : 0 },
+				transition: reduced ? { duration: 0 } : {
+					duration: status === "running" ? .1 : .5,
+					delay: .18
+				}
+			}),
+			status === "success" ? /* @__PURE__ */ jsx(motion.span, {
+				"aria-hidden": "true",
+				"data-slot": "tool-call-chip-wash",
+				className: "absolute inset-0 -z-10 bg-chart-2/15",
+				initial: { opacity: reduced ? 0 : 1 },
+				animate: { opacity: 0 },
+				transition: reduced ? { duration: 0 } : {
+					duration: .9,
+					delay: .15,
+					ease: "easeOut"
+				}
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("inline-flex shrink-0 [&_svg]:size-3.5", status === "success" && "text-chart-2", status === "error" && "text-destructive", status === "running" && "text-muted-foreground"),
+				children: status === "success" ? /* @__PURE__ */ jsx(CheckIcon, {}) : status === "error" ? /* @__PURE__ */ jsx(XIcon, {}) : icon ?? /* @__PURE__ */ jsx(SquareTerminalIcon, {})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "font-medium text-foreground",
+				children: name
+			}),
+			detail ? /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate text-muted-foreground",
+				children: detail
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				ref: clock.textRef,
+				"data-slot": "tool-call-chip-time",
+				className: "shrink-0 font-mono text-[0.6875rem] text-muted-foreground tabular-nums",
+				children: time
+			}),
+			status === "error" && onRetry ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "tool-call-chip-retry",
+				"aria-label": retryLabel ?? `Retry ${name}`,
+				onClick: onRetry,
+				className: "inline-flex size-[18px] shrink-0 items-center justify-center rounded-sm text-destructive outline-none transition-colors hover:bg-destructive/15 focus-visible:bg-destructive/15 focus-visible:ring-2 focus-visible:ring-destructive/50 focus-visible:ring-inset",
+				children: /* @__PURE__ */ jsx(RotateCcwIcon, {
+					"aria-hidden": "true",
+					className: "size-3"
+				})
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				...announce ? { role: "status" } : {},
+				children: outcome
+			})
+		]
+	});
+}
+//#endregion
+export { ToolCallChip };