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

package/dist/components/assistant-ui/elements/tool-group.aui.js

@@ -0,0 +1,104 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../ui/collapsible.js";
+import { cn } from "../../../lib/utils.js";
+import { memo, useCallback, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, LoaderIcon } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { useScrollLock } from "@assistant-ui/react";
+//#region src/components/assistant-ui/elements/tool-group.aui.tsx
+var tool_group_aui_exports = /* @__PURE__ */ __exportAll({
+	ToolGroup: () => ToolGroup,
+	ToolGroupContent: () => ToolGroupContent,
+	ToolGroupRoot: () => ToolGroupRoot,
+	ToolGroupTrigger: () => ToolGroupTrigger,
+	toolGroupVariants: () => toolGroupVariants
+});
+const ANIMATION_DURATION = 200;
+const toolGroupVariants = cva("aui-tool-group-root group/tool-group w-full", {
+	variants: { variant: {
+		outline: "rounded-lg border py-3",
+		ghost: "",
+		muted: "border-muted-foreground/30 bg-muted/30 rounded-lg border py-3"
+	} },
+	defaultVariants: { variant: "outline" }
+});
+function ToolGroupRoot({ className, variant, open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, children, ...props }) {
+	const collapsibleRef = useRef(null);
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);
+	const isControlled = controlledOpen !== void 0;
+	const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+	const handleOpenChange = useCallback((open) => {
+		lockScroll();
+		if (!isControlled) setUncontrolledOpen(open);
+		controlledOnOpenChange?.(open);
+	}, [
+		lockScroll,
+		isControlled,
+		controlledOnOpenChange
+	]);
+	return /* @__PURE__ */ jsx(Collapsible, {
+		ref: collapsibleRef,
+		"data-slot": "tool-group-root",
+		"data-variant": variant ?? "outline",
+		open: isOpen,
+		onOpenChange: handleOpenChange,
+		className: cn(toolGroupVariants({ variant }), "group/tool-group-root", className),
+		style: { "--animation-duration": `${ANIMATION_DURATION}ms` },
+		...props,
+		children
+	});
+}
+function ToolGroupTrigger({ count, active = false, className, ...props }) {
+	const label = `${count} tool ${count === 1 ? "call" : "calls"}`;
+	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		"data-slot": "tool-group-trigger",
+		className: cn("aui-tool-group-trigger group/trigger flex origin-left items-center gap-2 rounded-md text-sm transition-[color,scale] outline-none active:scale-[0.98]", "focus-visible:ring-[3px] focus-visible:ring-ring/50", "group-data-[variant=ghost]/tool-group-root:text-muted-foreground group-data-[variant=ghost]/tool-group-root:hover:text-foreground group-data-[variant=ghost]/tool-group-root:-mx-1 group-data-[variant=ghost]/tool-group-root:px-1 group-data-[variant=ghost]/tool-group-root:py-1.5", "group-data-[variant=outline]/tool-group-root:w-full group-data-[variant=outline]/tool-group-root:px-4 group-data-[variant=outline]/tool-group-root:-my-3 group-data-[variant=outline]/tool-group-root:min-h-9 group-data-[variant=outline]/tool-group-root:focus-visible:ring-inset", "group-data-[variant=muted]/tool-group-root:w-full group-data-[variant=muted]/tool-group-root:px-4 group-data-[variant=muted]/tool-group-root:-my-3 group-data-[variant=muted]/tool-group-root:min-h-9 group-data-[variant=muted]/tool-group-root:focus-visible:ring-inset", className),
+		...props,
+		children: [
+			active && /* @__PURE__ */ jsx(LoaderIcon, {
+				"data-slot": "tool-group-trigger-loader",
+				className: "aui-tool-group-trigger-loader size-3 shrink-0 animate-spin [animation-duration:0.6s]"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "tool-group-trigger-label",
+				className: cn("aui-tool-group-trigger-label-wrapper inline-block text-start text-xs leading-none font-medium", "group-data-[variant=ghost]/tool-group-root:font-normal", "group-data-[variant=outline]/tool-group-root:grow", "group-data-[variant=muted]/tool-group-root:grow", active && "shimmer motion-reduce:animate-none"),
+				children: label
+			}),
+			/* @__PURE__ */ jsx(ChevronDownIcon, {
+				"data-slot": "tool-group-trigger-chevron",
+				className: cn("aui-tool-group-trigger-chevron size-3 shrink-0", "transition-transform duration-(--animation-duration) ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none", "-rotate-90", "group-data-open/trigger:rotate-0", "group-data-panel-open/trigger:rotate-0")
+			})
+		]
+	});
+}
+function ToolGroupContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsibleContent, {
+		"data-slot": "tool-group-content",
+		className: cn("aui-tool-group-content relative overflow-hidden text-sm outline-none", "group/collapsible-content ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:animate-none", "data-closed:animate-collapsible-up", "data-open:animate-collapsible-down", "data-closed:fill-mode-forwards", "data-closed:pointer-events-none", "[--tw-duration:var(--animation-duration)]", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("mt-2 flex flex-col gap-2", "group-data-[variant=ghost]/tool-group-root:mt-1 group-data-[variant=ghost]/tool-group-root:gap-1", "group-data-[variant=outline]/tool-group-root:mt-3 group-data-[variant=outline]/tool-group-root:border-t group-data-[variant=outline]/tool-group-root:px-4 group-data-[variant=outline]/tool-group-root:pt-3", "group-data-[variant=muted]/tool-group-root:mt-3 group-data-[variant=muted]/tool-group-root:border-t group-data-[variant=muted]/tool-group-root:px-4 group-data-[variant=muted]/tool-group-root:pt-3", "[&>*]:animate-in [&>*]:fade-in-0 [&>*]:blur-in-[2px] [&>*]:slide-in-from-top-1 [&>*]:animation-duration-(--animation-duration) [&>*]:ease-[cubic-bezier(0.32,0.72,0,1)]", "[&>*]:motion-reduce:animate-none", "[&>*:nth-child(2)]:[animation-delay:40ms]", "[&>*:nth-child(3)]:[animation-delay:80ms]", "[&>*:nth-child(4)]:[animation-delay:120ms]", "[&>*:nth-child(n+5)]:[animation-delay:160ms]"),
+			children
+		})
+	});
+}
+const ToolGroupImpl = ({ children, startIndex, endIndex }) => {
+	const toolCount = endIndex - startIndex + 1;
+	return /* @__PURE__ */ jsxs(ToolGroupRoot, { children: [/* @__PURE__ */ jsx(ToolGroupTrigger, { count: toolCount }), /* @__PURE__ */ jsx(ToolGroupContent, { children })] });
+};
+/**
+* @deprecated This wrapper targets the legacy `components.ToolGroup` prop
+* on `<MessagePrimitive.Parts>`. Use `<MessagePrimitive.GroupedParts>` with
+* a `groupBy` returning `"group-tool"` and compose `ToolGroupRoot` /
+* `ToolGroupTrigger` / `ToolGroupContent` directly. See `thread.tsx`.
+*/
+const ToolGroup = memo(ToolGroupImpl);
+ToolGroup.displayName = "ToolGroup";
+ToolGroup.Root = ToolGroupRoot;
+ToolGroup.Trigger = ToolGroupTrigger;
+ToolGroup.Content = ToolGroupContent;
+//#endregion
+export { ToolGroup, ToolGroupContent, ToolGroupRoot, ToolGroupTrigger, toolGroupVariants, tool_group_aui_exports };

package/dist/components/assistant-ui/elements/tool-group.d.ts

@@ -0,0 +1,20 @@
+import { ComponentProps } from "react";
+declare namespace tool_group_d_exports {
+  export { GroupedTool, GroupedToolState, ToolGroup };
+}
+export type GroupedToolState = "running" | "done" | "failed";
+export interface GroupedTool {
+  id: string;
+  name: string;
+  target: string;
+  state: GroupedToolState;
+  durationMs?: number;
+}
+export declare function ToolGroup({ label, tools, open, onOpenChange, className, ...props }: Omit<ComponentProps<"div">, "children" | "label" | "tools" | "open" | "onOpenChange"> & {
+  label: string;
+  tools: readonly GroupedTool[];
+  open: boolean;
+  onOpenChange?: (open: boolean) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { tool_group_d_exports };

package/dist/components/assistant-ui/elements/tool-group.js

@@ -0,0 +1,71 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { mono, paper } from "./surfaces.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronRightIcon, Loader2Icon, XIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/tool-group.tsx
+var tool_group_exports = /* @__PURE__ */ __exportAll({ ToolGroup: () => ToolGroup });
+function ToolGroup({ label, tools, open, onOpenChange, className, ...props }) {
+	const running = tools.filter((tool) => tool.state === "running").length;
+	const failed = tools.filter((tool) => tool.state === "failed").length;
+	const headerClassName = cn("flex items-center gap-2.5 px-3.5 py-2.5 text-start", onOpenChange && "hover:bg-foreground/[0.03] transition-colors", onOpenChange && "rounded-t-2xl outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/50");
+	const header = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("text-muted-foreground size-3 shrink-0 transition-transform duration-200 motion-reduce:transition-none", open && "rotate-90") }),
+		/* @__PURE__ */ jsx("span", {
+			className: "min-w-0 flex-1 truncate text-[13.5px]",
+			children: label
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: cn(mono, "text-muted-foreground shrink-0 tabular-nums"),
+			children: running > 0 ? `${tools.length - running}/${tools.length}` : failed > 0 ? `${failed} failed` : `${tools.length} done`
+		}),
+		running > 0 ? /* @__PURE__ */ jsx(Loader2Icon, { className: "text-muted-foreground size-3.5 shrink-0 animate-spin motion-reduce:animate-none" }) : failed > 0 ? /* @__PURE__ */ jsx(XIcon, { className: "size-3.5 shrink-0 text-destructive" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 shrink-0 text-success" })
+	] });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "tool-group",
+		className: cn(paper, "flex w-full max-w-sm flex-col overflow-hidden rounded-2xl", className),
+		...props,
+		children: [onOpenChange ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-expanded": open,
+			onClick: () => onOpenChange(!open),
+			className: headerClassName,
+			children: header
+		}) : /* @__PURE__ */ jsx("div", {
+			className: headerClassName,
+			children: header
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: "border-foreground/[0.06] fade-in slide-in-from-top-1 animate-in flex flex-col border-t duration-200",
+			children: tools.map((tool) => /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2.5 px-3.5 py-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "flex size-3.5 shrink-0 items-center justify-center",
+						children: tool.state === "running" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "text-muted-foreground size-3 animate-spin motion-reduce:animate-none" }) : tool.state === "failed" ? /* @__PURE__ */ jsx(XIcon, {
+							strokeWidth: 2.75,
+							className: "size-3 text-destructive"
+						}) : /* @__PURE__ */ jsx(CheckIcon, {
+							strokeWidth: 2.75,
+							className: "size-3 text-success"
+						})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground shrink-0"),
+						children: tool.name
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-foreground/80 min-w-0 flex-1 truncate text-[13px]",
+						children: tool.target
+					}),
+					tool.durationMs !== void 0 && /* @__PURE__ */ jsxs("span", {
+						className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground shrink-0 tabular-nums"),
+						children: [tool.durationMs, "ms"]
+					})
+				]
+			}, tool.id))
+		})]
+	});
+}
+//#endregion
+export { ToolGroup, tool_group_exports };

package/dist/components/assistant-ui/elements/tool-timeline.d.ts

@@ -0,0 +1,44 @@
+import { ComponentType } from "react";
+declare namespace tool_timeline_d_exports {
+  export { TimelineStat, TimelineStep, ToolTimeline, ToolTimelineProps };
+}
+export interface TimelineStep {
+  verb: string;
+  chip: string;
+  /** A lucide icon, or any component that takes a className (such as a status mark). */
+  icon: ComponentType<{
+    className?: string;
+  }>;
+  /** A stable id. Required for selection when two steps share a chip. Defaults to the chip. */
+  id?: string;
+  /** The row's accessible name when steps are selectable. Defaults to the verb and chip. */
+  label?: string;
+}
+export interface TimelineStat {
+  file: string;
+  added?: number;
+  removed?: number;
+}
+export interface ToolTimelineProps {
+  steps: readonly TimelineStep[];
+  visibleSteps: number;
+  streaming: boolean;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  restingLabel: string;
+  activeLabel: string;
+  stats: TimelineStat[];
+  className?: string;
+  /** The selected step's id, when steps are selectable. */
+  selectedId?: string | null;
+  /**
+   * Makes the steps a single-select listbox: a click or the arrow keys (Home
+   * and End too) select a step.
+   */
+  onSelectedIdChange?: (id: string) => void;
+  /** Accessible name of the step list when steps are selectable. */
+  listLabel?: string;
+}
+export declare function ToolTimeline({ steps, visibleSteps, streaming, open, onOpenChange, restingLabel, activeLabel, stats, className, selectedId, onSelectedIdChange, listLabel }: ToolTimelineProps): import("react").JSX.Element;
+//#endregion
+export { tool_timeline_d_exports };

package/dist/components/assistant-ui/elements/tool-timeline.js

@@ -0,0 +1,109 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../ui/collapsible.js";
+import { cn } from "../../../lib/utils.js";
+import { ShimmerLabel, SwapLabel, collapsePanel } from "./surfaces.js";
+import { take } from "../utils/range.js";
+import { useId, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/tool-timeline.tsx
+var tool_timeline_exports = /* @__PURE__ */ __exportAll({ ToolTimeline: () => ToolTimeline });
+const stepId = (step) => step.id ?? step.chip;
+function ToolTimeline({ steps, visibleSteps, streaming, open, onOpenChange, restingLabel, activeLabel, stats, className, selectedId, onSelectedIdChange, listLabel = "Steps" }) {
+	const baseId = useId();
+	const listRef = useRef(null);
+	const selectable = onSelectedIdChange !== void 0;
+	const shown = take(steps, visibleSteps);
+	const optionId = (id) => `${baseId}-step-${encodeURIComponent(id)}`;
+	const selectedVisible = shown.some((step) => stepId(step) === selectedId);
+	const onKeyDown = (event) => {
+		if (!onSelectedIdChange || shown.length === 0) return;
+		const at = shown.findIndex((step) => stepId(step) === selectedId);
+		const next = event.key === "ArrowDown" ? Math.min(at + 1, shown.length - 1) : event.key === "ArrowUp" ? Math.max(at - 1, 0) : event.key === "Home" ? 0 : event.key === "End" ? shown.length - 1 : null;
+		if (next === null) return;
+		event.preventDefault();
+		const target = shown[next];
+		if (!target || stepId(target) === selectedId) return;
+		onSelectedIdChange(stepId(target));
+		listRef.current?.querySelector(`#${CSS.escape(optionId(stepId(target)))}`)?.scrollIntoView({ block: "nearest" });
+	};
+	const statChips = stats.length > 0 ? /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-wrap gap-1.5 pt-1", selectable && "ps-4 pt-2"),
+		children: stats.map((stat) => /* @__PURE__ */ jsxs("span", {
+			className: "bg-foreground/[0.06] text-foreground inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 font-mono text-[11px]",
+			children: [
+				/* @__PURE__ */ jsx("span", { children: stat.file }),
+				stat.added !== void 0 && /* @__PURE__ */ jsxs("span", {
+					className: "text-success dark:text-success",
+					children: ["+", stat.added]
+				}),
+				stat.removed !== void 0 && /* @__PURE__ */ jsxs("span", {
+					className: "text-destructive dark:text-destructive",
+					children: ["−", stat.removed]
+				})
+			]
+		}, stat.file))
+	}) : null;
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		"data-slot": "tool-timeline",
+		open,
+		onOpenChange,
+		className: cn("w-full max-w-sm", className),
+		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			className: "group/trigger text-muted-foreground hover:text-foreground/90 flex items-center gap-1.5 rounded-md py-1 text-[13.5px] transition-colors outline-none",
+			children: [/* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5 shrink-0 opacity-60 transition-transform duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-open/trigger:rotate-90 group-data-panel-open/trigger:rotate-90 motion-reduce:transition-none" }), /* @__PURE__ */ jsxs(SwapLabel, {
+				active: streaming ? 0 : 1,
+				className: "text-start tabular-nums",
+				children: [/* @__PURE__ */ jsx(ShimmerLabel, {
+					active: streaming,
+					className: "shimmer-color-foreground relative inline-block leading-none",
+					children: activeLabel
+				}), /* @__PURE__ */ jsx(Fragment$1, { children: restingLabel })]
+			})]
+		}), /* @__PURE__ */ jsxs(CollapsibleContent, {
+			className: cn(collapsePanel, "outline-none"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				ref: listRef,
+				className: cn("flex flex-col gap-2.5 ps-4 pt-2.5", selectable && "@container/timeline-steps ms-2 mt-2 gap-0.5 rounded-lg p-1 outline-none focus-visible:ring-1 focus-visible:ring-ring/70 focus-visible:ring-inset"),
+				...selectable ? {
+					role: "listbox",
+					"aria-label": listLabel,
+					tabIndex: 0,
+					"aria-activedescendant": selectedId && selectedVisible ? optionId(selectedId) : void 0,
+					onKeyDown
+				} : {},
+				children: [shown.map((step, index) => {
+					const Icon = step.icon;
+					const active = streaming && index === shown.length - 1;
+					const id = stepId(step);
+					const selected = selectable && id === selectedId;
+					return /* @__PURE__ */ jsxs("div", {
+						className: cn("fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground text-[13.5px] duration-300", selectable ? "grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-x-2 gap-y-0.5 rounded-md px-1.5 py-1 transition-colors hover:bg-foreground/[0.03] aria-selected:bg-foreground/[0.06] aria-selected:text-foreground aria-selected:hover:bg-foreground/[0.06] @sm/timeline-steps:grid-cols-[auto_minmax(0,1fr)_auto]" : "flex items-center gap-2"),
+						...selectable ? {
+							id: optionId(id),
+							role: "option",
+							"aria-selected": selected,
+							"aria-label": step.label ?? `${step.verb}, ${step.chip}`,
+							onClick: () => onSelectedIdChange(id)
+						} : {},
+						children: [
+							/* @__PURE__ */ jsx(Icon, { className: cn("text-muted-foreground size-3.5 shrink-0", selectable && "mt-[3px] self-start") }),
+							/* @__PURE__ */ jsx(ShimmerLabel, {
+								active,
+								className: cn("relative inline-block leading-none", selectable && "min-w-0 leading-normal @sm/timeline-steps:truncate"),
+								children: step.verb
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: cn("bg-foreground/[0.06] text-foreground rounded-md px-1.5 py-0.5 font-mono text-[11px]", selectable && "col-start-2 max-w-full min-w-0 justify-self-start truncate @sm/timeline-steps:col-start-3 @sm/timeline-steps:max-w-[45cqw] @sm/timeline-steps:justify-self-end"),
+								children: step.chip
+							})
+						]
+					}, id);
+				}), selectable ? null : statChips]
+			}), selectable ? statChips : null]
+		})]
+	});
+}
+//#endregion
+export { ToolTimeline, tool_timeline_exports };

package/dist/components/assistant-ui/elements/tooltip-icon-button.d.ts

@@ -0,0 +1,12 @@
+import { Button } from "../../ui/button.js";
+import { ComponentPropsWithRef } from "react";
+declare namespace tooltip_icon_button_d_exports {
+  export { TooltipIconButton, TooltipIconButtonProps };
+}
+export type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
+  tooltip: string;
+  side?: "top" | "bottom" | "left" | "right";
+};
+export declare const TooltipIconButton: import("react").ForwardRefExoticComponent<Omit<TooltipIconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { tooltip_icon_button_d_exports };

package/dist/components/assistant-ui/elements/tooltip-icon-button.js

@@ -0,0 +1,30 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { Button } from "../../ui/button.js";
+import { cn } from "../../../lib/utils.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/tooltip-icon-button.tsx
+var tooltip_icon_button_exports = /* @__PURE__ */ __exportAll({ TooltipIconButton: () => TooltipIconButton });
+const TooltipIconButton = forwardRef(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			...rest,
+			className: cn("aui-button-icon size-6 p-1 active:scale-90", className),
+			ref
+		}),
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: "aui-sr-only sr-only",
+			children: tooltip
+		})]
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side,
+		children: tooltip
+	})] }) });
+});
+TooltipIconButton.displayName = "TooltipIconButton";
+//#endregion
+export { TooltipIconButton, tooltip_icon_button_exports };

package/dist/components/assistant-ui/elements/trace-waterfall.d.ts

@@ -0,0 +1,33 @@
+import { ComponentProps } from "react";
+declare namespace trace_waterfall_d_exports {
+  export { SpanStatus, TraceSpan, TraceWaterfall };
+}
+export type SpanStatus = "running" | "completed" | "failed";
+export interface TraceSpan {
+  id: string;
+  name: string;
+  depth: number;
+  startMs: number;
+  durationMs: number;
+  status: SpanStatus;
+  /** The row's accessible name when spans are selectable. Defaults to name, status and timing. */
+  label?: string;
+}
+export declare function TraceWaterfall({ spans, totalMs, visibleCount, selectedId, onSelectedIdChange, listLabel, formatDuration, className, ...props }: Omit<ComponentProps<"div">, "children" | "spans" | "totalMs" | "visibleCount" | "selectedId" | "onSelectedIdChange" | "formatDuration"> & {
+  spans: readonly TraceSpan[];
+  totalMs: number;
+  visibleCount: number;
+  /** The selected span's id, when spans are selectable. */
+  selectedId?: string | null;
+  /**
+   * Makes the spans a single-select listbox: a click or the arrow keys (Home
+   * and End too) select a span.
+   */
+  onSelectedIdChange?: (id: string) => void;
+  /** Accessible name of the span list when spans are selectable. */
+  listLabel?: string;
+  /** Formats the total and each span's duration. Defaults to bare milliseconds. */
+  formatDuration?: (ms: number) => string;
+}): import("react").JSX.Element;
+//#endregion
+export { trace_waterfall_d_exports };

package/dist/components/assistant-ui/elements/trace-waterfall.js

@@ -0,0 +1,102 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { mono, paper } from "./surfaces.js";
+import { pct, take } from "../utils/range.js";
+import { useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/trace-waterfall.tsx
+var trace_waterfall_exports = /* @__PURE__ */ __exportAll({ TraceWaterfall: () => TraceWaterfall });
+const TONE = {
+	running: "bg-chart-2",
+	completed: "bg-foreground/35",
+	failed: "bg-destructive/80"
+};
+function TraceWaterfall({ spans, totalMs, visibleCount, selectedId, onSelectedIdChange, listLabel = "Trace spans", formatDuration, className, ...props }) {
+	const span = totalMs || 1;
+	const baseId = useId();
+	const listRef = useRef(null);
+	const selectable = onSelectedIdChange !== void 0;
+	const shown = take(spans, visibleCount);
+	const optionId = (id) => `${baseId}-span-${encodeURIComponent(id)}`;
+	const selectedVisible = shown.some((item) => item.id === selectedId);
+	const onKeyDown = (event) => {
+		if (!onSelectedIdChange || shown.length === 0) return;
+		const at = shown.findIndex((item) => item.id === selectedId);
+		const next = event.key === "ArrowDown" ? Math.min(at + 1, shown.length - 1) : event.key === "ArrowUp" ? Math.max(at - 1, 0) : event.key === "Home" ? 0 : event.key === "End" ? shown.length - 1 : null;
+		if (next === null) return;
+		event.preventDefault();
+		const target = shown[next];
+		if (!target || target.id === selectedId) return;
+		onSelectedIdChange(target.id);
+		listRef.current?.querySelector(`#${CSS.escape(optionId(target.id))}`)?.scrollIntoView({ block: "nearest" });
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "trace-waterfall",
+		className: cn(paper, "flex w-full max-w-md flex-col gap-2 rounded-2xl p-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-[13.5px] font-medium",
+				children: "Trace"
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn(mono, "text-muted-foreground tabular-nums"),
+				children: formatDuration ? formatDuration(totalMs) : `${totalMs}ms`
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			ref: listRef,
+			className: cn("flex flex-col gap-1", selectable && "group/trace-list -mx-2.5 rounded-lg p-1 outline-none focus-visible:ring-1 focus-visible:ring-ring/70 focus-visible:ring-inset"),
+			...selectable ? {
+				role: "listbox",
+				"aria-label": listLabel,
+				tabIndex: 0,
+				"aria-activedescendant": selectedId && selectedVisible ? optionId(selectedId) : void 0,
+				onKeyDown
+			} : {},
+			children: shown.map((item) => {
+				const left = pct(item.startMs, span);
+				const width = Math.max(1.5, pct(item.durationMs, span));
+				const selected = selectable && item.id === selectedId;
+				return /* @__PURE__ */ jsxs("div", {
+					className: cn("fade-in slide-in-from-left-1 animate-in fill-mode-both grid items-center gap-2 duration-300", selectable ? "grid-cols-[minmax(0,3fr)_minmax(0,2fr)_3.5rem] rounded-md px-1.5 py-0.5 transition-colors hover:bg-foreground/[0.03] aria-selected:bg-foreground/[0.06] aria-selected:hover:bg-foreground/[0.06]" : "grid-cols-[7.5rem_1fr_2.5rem]"),
+					...selectable ? {
+						id: optionId(item.id),
+						role: "option",
+						"aria-selected": selected,
+						"aria-label": item.label ?? `${item.name}, ${item.status}, starts at ${item.startMs}ms, runs ${item.durationMs}ms`,
+						onClick: () => onSelectedIdChange(item.id)
+					} : {},
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: cn("min-w-0 truncate text-xs", selected ? "text-foreground font-medium" : "text-muted-foreground"),
+							style: { paddingInlineStart: `${item.depth * .75}rem` },
+							title: item.name,
+							children: item.name
+						}),
+						/* @__PURE__ */ jsx("span", {
+							...selectable ? { "aria-hidden": true } : {
+								role: "img",
+								"aria-label": `${item.status}, starts at ${item.startMs}ms, runs ${item.durationMs}ms`
+							},
+							className: "relative flex h-4 min-w-0 items-center",
+							children: /* @__PURE__ */ jsx("span", {
+								className: cn("absolute h-[7px] rounded-full transition-[width] duration-500 ease-out motion-reduce:transition-none", TONE[item.status], item.status === "running" && "animate-pulse"),
+								style: {
+									insetInlineStart: `${left}%`,
+									width: `${width}%`
+								}
+							})
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cn(mono, "text-end tabular-nums", selected ? "text-foreground/80" : "text-muted-foreground"),
+							children: formatDuration ? formatDuration(item.durationMs) : item.durationMs
+						})
+					]
+				}, item.id);
+			})
+		})]
+	});
+}
+//#endregion
+export { TraceWaterfall, trace_waterfall_exports };

package/dist/components/assistant-ui/elements/typing-indicator.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+declare namespace typing_indicator_d_exports {
+  export { TypingIndicator };
+}
+export declare function TypingIndicator({ variant, className, ...props }: Omit<ComponentProps<"div">, "children" | "variant" | "role" | "aria-label"> & {
+  variant?: "bubble" | "bare";
+}): import("react").JSX.Element;
+//#endregion
+export { typing_indicator_d_exports };

package/dist/components/assistant-ui/elements/typing-indicator.js

@@ -0,0 +1,45 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { paper } from "./surfaces.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/typing-indicator.tsx
+var typing_indicator_exports = /* @__PURE__ */ __exportAll({ TypingIndicator: () => TypingIndicator });
+const DOT_DELAYS = [
+	"-0.32s",
+	"-0.16s",
+	"0s"
+];
+function TypingIndicator({ variant = "bubble", className, ...props }) {
+	const dots = DOT_DELAYS.map((delay) => /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "bg-foreground/40 size-1.5 animate-bounce rounded-full motion-reduce:animate-none",
+		style: {
+			animationDelay: delay,
+			animationDuration: "1.1s"
+		}
+	}, delay));
+	if (variant === "bare") return /* @__PURE__ */ jsx("div", {
+		"data-slot": "typing-indicator",
+		"data-variant": "bare",
+		role: "status",
+		"aria-label": "Assistant is typing",
+		className: cn("flex gap-1", className),
+		...props,
+		children: dots
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "typing-indicator",
+		"data-variant": "bubble",
+		className: cn(paper, "w-fit rounded-full px-4 py-3.5", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			role: "status",
+			"aria-label": "Assistant is typing",
+			className: "flex gap-1",
+			children: dots
+		})
+	});
+}
+//#endregion
+export { TypingIndicator, typing_indicator_exports };

package/dist/components/assistant-ui/elements/voice-conversation.aui.d.ts

@@ -0,0 +1,11 @@
+import { VoiceMode, VoiceTurn } from "./voice-conversation.js";
+import { FC } from "react";
+declare namespace voice_conversation_aui_d_exports {
+  export { VoiceConversation, VoiceMode, VoiceTurn, useVoiceTranscript };
+}
+export declare const useVoiceTranscript: () => readonly VoiceTurn[];
+export declare const VoiceConversation: FC<{
+  className?: string;
+}>;
+//#endregion
+export { type VoiceMode, type VoiceTurn, voice_conversation_aui_d_exports };