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

package/dist/components/assistant-ui/elements/composer.js

@@ -0,0 +1,416 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { ShimmerLabel, field, floating, ghostButton, iconSwap, iconSwapIn, iconSwapOut, inkButton, mono, paper } from "./surfaces.js";
+import { clamp, pct } from "../utils/range.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon, CheckIcon, ChevronDownIcon, FileArchiveIcon, FileImageIcon, FileTextIcon, Loader2Icon, MicIcon, PlusIcon, SquareIcon, XIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/composer.tsx
+var composer_exports = /* @__PURE__ */ __exportAll({
+	Composer: () => Composer,
+	ComposerActions: () => ComposerActions,
+	ComposerAttachButton: () => ComposerAttachButton,
+	ComposerAttachmentChip: () => ComposerAttachmentChip,
+	ComposerAttachments: () => ComposerAttachments,
+	ComposerBar: () => ComposerBar,
+	ComposerCommandItem: () => ComposerCommandItem,
+	ComposerContext: () => ComposerContext,
+	ComposerInput: () => ComposerInput,
+	ComposerMenu: () => ComposerMenu,
+	ComposerMenuItem: () => ComposerMenuItem,
+	ComposerModelItem: () => ComposerModelItem,
+	ComposerModelTrigger: () => ComposerModelTrigger,
+	ComposerPersonItem: () => ComposerPersonItem,
+	ComposerSend: () => ComposerSend,
+	ComposerToolbar: () => ComposerToolbar,
+	ComposerVoice: () => ComposerVoice,
+	ComposerVoiceButton: () => ComposerVoiceButton,
+	applyMention: () => applyMention,
+	useMentionMatches: () => useMentionMatches,
+	useSlashMatches: () => useSlashMatches
+});
+const ATTACHMENT_ICONS = {
+	image: FileImageIcon,
+	text: FileTextIcon,
+	archive: FileArchiveIcon
+};
+const BARS = Array.from({ length: 14 }, (_, i) => i);
+function barHeight(bar, tick) {
+	return 5 + Math.abs(Math.sin(bar * 1.35 + tick * .55)) * 13;
+}
+/** Commands whose name starts with the slash query, or none when not typing one. */
+function useSlashMatches(value, commands) {
+	return useMemo(() => {
+		if (!commands || !value.startsWith("/")) return [];
+		const query = value.slice(1).toLowerCase();
+		return commands.filter((command) => command.name.startsWith(query));
+	}, [commands, value]);
+}
+/** People matching a trailing @mention, or none when the caret is not in one. */
+function useMentionMatches(value, people) {
+	return useMemo(() => {
+		if (!people) return [];
+		const match = /@([\w]*)$/.exec(value);
+		if (!match) return [];
+		const query = match[1]?.toLowerCase() ?? "";
+		return people.filter((person) => person.name.toLowerCase().startsWith(query));
+	}, [people, value]);
+}
+/** Replaces the trailing @mention with the chosen name. */
+function applyMention(value, name) {
+	return value.replace(/@[\w]*$/, `@${name} `);
+}
+function Composer({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "composer",
+		className: cn("relative w-full max-w-lg", className),
+		...props
+	});
+}
+function ComposerBar({ dragActive = false, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "composer-bar",
+		"data-drag-active": dragActive || void 0,
+		className: cn(paper, "flex w-full flex-col gap-2 rounded-[24px] p-2.5 transition-colors", dragActive && "bg-info/[0.04] dark:bg-info/10", className),
+		...props
+	});
+}
+function ComposerMenu({ open, align = "start", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "composer-menu",
+		"data-open": open || void 0,
+		className: cn(floating, "absolute bottom-full z-10 mb-2 flex w-72 flex-col gap-0.5 rounded-2xl p-1.5", align === "start" ? "start-0 origin-bottom-left" : "end-0 origin-bottom-right", "transition-[opacity,scale] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", open ? "scale-100 opacity-100" : "pointer-events-none scale-[0.97] opacity-0", className),
+		...props
+	});
+}
+function ComposerMenuItem({ active = false, className, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-slot": "composer-menu-item",
+		"data-active": active || void 0,
+		className: cn("flex w-full items-center gap-2.5 rounded-[10px] px-2.5 py-2 text-[13.5px] transition-colors", active ? field : "hover:bg-foreground/[0.04]", className),
+		...props
+	});
+}
+function ComposerCommandItem({ command, active, ...props }) {
+	return /* @__PURE__ */ jsxs(ComposerMenuItem, {
+		active,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(command.icon, { className: "text-muted-foreground size-3.5 shrink-0" }),
+			/* @__PURE__ */ jsxs("span", {
+				className: "font-medium",
+				children: ["/", command.name]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground flex-1 truncate text-start text-xs",
+				children: command.description
+			}),
+			active && /* @__PURE__ */ jsx("kbd", {
+				className: "bg-foreground/[0.06] text-muted-foreground rounded px-1 font-mono text-[10px]",
+				children: "↵"
+			})
+		]
+	});
+}
+function ComposerPersonItem({ person, active, ...props }) {
+	return /* @__PURE__ */ jsxs(ComposerMenuItem, {
+		active,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "bg-foreground/[0.06] text-muted-foreground flex size-5 shrink-0 items-center justify-center rounded-full text-[9px] font-medium",
+				children: person.name[0]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "flex-1 truncate text-start",
+				children: person.name
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn(mono, "text-muted-foreground"),
+				children: person.role
+			})
+		]
+	});
+}
+function ComposerAttachments({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "composer-attachments",
+		className: cn("flex flex-wrap gap-2", className),
+		...props
+	});
+}
+function ComposerAttachmentChip({ attachment, onRemove, className, ...props }) {
+	const Icon = ATTACHMENT_ICONS[attachment.kind ?? "text"];
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "composer-attachment",
+		"data-state": attachment.state,
+		className: cn(field, "relative flex items-center gap-2.5 overflow-hidden rounded-[14px] py-1.5 ps-1.5 pe-2.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "bg-background text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-[10px] dark:bg-white/10",
+				children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "max-w-36 truncate text-xs font-medium",
+					children: attachment.name
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn("text-[11px]", attachment.state === "error" ? "text-destructive dark:text-destructive" : "text-muted-foreground"),
+					children: attachment.meta
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "ms-1 flex w-5 items-center justify-end",
+				children: attachment.state === "uploading" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "text-muted-foreground size-3.5 animate-spin motion-reduce:animate-none" }) : attachment.state === "done" && onRemove ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": `Remove ${attachment.name}`,
+					onClick: () => onRemove(attachment.name),
+					className: cn(ghostButton, "size-5 [&_svg]:size-3"),
+					children: /* @__PURE__ */ jsx(XIcon, {})
+				}) : attachment.state === "done" ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 text-success" }) : null
+			}),
+			attachment.state === "uploading" && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "absolute inset-x-0 bottom-0 h-0.5 bg-info/70 transition-[width] duration-300 dark:bg-info/70",
+				style: { width: `${pct(attachment.progress ?? 0, 100)}%` }
+			})
+		]
+	});
+}
+function ComposerInput({ onSubmit, onKeyDown, className, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		"data-slot": "composer-input",
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
+			onSubmit?.();
+		},
+		className: cn("placeholder:text-muted-foreground min-h-11 w-full bg-transparent px-3 text-[15px] caret-blue-500 outline-none dark:caret-blue-400", className),
+		...props
+	});
+}
+function ComposerVoice({ recording, seconds, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "composer-voice",
+		"data-recording": recording || void 0,
+		className: cn("flex min-h-11 items-center gap-3 ps-3", className),
+		...props,
+		children: [
+			recording && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "size-1.5 animate-pulse rounded-full bg-info dark:bg-info"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex h-6 items-center gap-[3px]",
+				"aria-hidden": true,
+				children: BARS.map((bar) => /* @__PURE__ */ jsx("span", {
+					className: cn("w-0.5 rounded-full transition-[height,background-color] duration-150 motion-reduce:transition-none", recording ? "bg-foreground/50" : "bg-foreground/25"),
+					style: { height: recording ? barHeight(bar, seconds * 10) : 3 }
+				}, bar))
+			}),
+			recording ? /* @__PURE__ */ jsxs("span", {
+				className: cn(mono, "text-muted-foreground tabular-nums"),
+				children: ["0:", String(seconds).padStart(2, "0")]
+			}) : /* @__PURE__ */ jsx(ShimmerLabel, {
+				className: "text-muted-foreground relative text-[13px]",
+				children: "Transcribing"
+			})
+		]
+	});
+}
+function ComposerToolbar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "composer-toolbar",
+		className: cn("flex items-center justify-between", className),
+		...props
+	});
+}
+function ComposerActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "composer-actions",
+		className: cn("flex items-center gap-1.5", className),
+		...props
+	});
+}
+function ComposerAttachButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Add attachment",
+		"data-slot": "composer-attach",
+		disabled: !props.onClick,
+		className: cn(ghostButton, "size-8 disabled:pointer-events-none disabled:opacity-30", className),
+		...props,
+		children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-4" })
+	});
+}
+function ComposerModelTrigger({ model, open, className, ...props }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-expanded": open,
+		"data-slot": "composer-model-trigger",
+		className: cn("text-muted-foreground hover:bg-foreground/[0.06] hover:text-foreground/90 dark:hover:bg-foreground/[0.09] flex h-8 items-center gap-1.5 rounded-full px-3 text-[12.5px] transition-colors", className),
+		...props,
+		children: [model, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3 opacity-60" })]
+	});
+}
+function ComposerModelItem({ entry, selected, ...props }) {
+	return /* @__PURE__ */ jsxs(ComposerMenuItem, {
+		active: selected,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "flex-1 text-start",
+				children: entry.name
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn(mono, "text-muted-foreground tabular-nums"),
+				children: entry.meta
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "flex w-4 justify-end",
+				children: selected && /* @__PURE__ */ jsx(CheckIcon, { className: "fade-in zoom-in-90 animate-in size-3.5 duration-200" })
+			})
+		]
+	});
+}
+function ComposerContext({ usage, className, ...props }) {
+	const used = usage.system + usage.tools + usage.messages;
+	const fraction = usage.total === 0 ? 0 : used / usage.total;
+	const warn = fraction > .85;
+	const circumference = 2 * Math.PI * 6;
+	const segments = [
+		{
+			label: "System",
+			value: usage.system,
+			className: "bg-foreground/25"
+		},
+		{
+			label: "Tools",
+			value: usage.tools,
+			className: "bg-foreground/45"
+		},
+		{
+			label: "Messages",
+			value: usage.messages,
+			className: "bg-foreground/80"
+		}
+	];
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "composer-context",
+		className: cn("group/ctx", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn(floating, "absolute end-0 bottom-full z-10 mb-2 flex w-60 origin-bottom-right flex-col gap-3.5 rounded-2xl p-4", "transition-[opacity,scale] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", "pointer-events-none scale-[0.97] opacity-0", "group-hover/ctx:pointer-events-auto group-hover/ctx:scale-100 group-hover/ctx:opacity-100", "group-focus-within/ctx:pointer-events-auto group-focus-within/ctx:scale-100 group-focus-within/ctx:opacity-100"),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-baseline justify-between",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-[13.5px] font-medium",
+						children: "Context"
+					}), /* @__PURE__ */ jsxs("p", {
+						className: cn(mono, "tabular-nums", warn ? "text-destructive dark:text-destructive" : "text-muted-foreground"),
+						children: [Math.round(fraction * 100), "%"]
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "bg-foreground/[0.06] flex h-[5px] w-full gap-px overflow-hidden rounded-full",
+					children: segments.map((segment) => /* @__PURE__ */ jsx("span", {
+						className: cn("h-full transition-[width] duration-700 motion-reduce:transition-none", segment.className),
+						style: { width: `${pct(segment.value, usage.total)}%` }
+					}, segment.label))
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-2",
+					children: segments.map((segment) => /* @__PURE__ */ jsxs("div", {
+						className: "text-muted-foreground flex items-center gap-2.5 text-[13px]",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: cn("size-1.5 rounded-full", segment.className)
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "flex-1",
+								children: segment.label
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: cn(mono, "text-muted-foreground tabular-nums"),
+								children: [segment.value, "k"]
+							})
+						]
+					}, segment.label))
+				}),
+				/* @__PURE__ */ jsx("div", { className: "bg-foreground/[0.06] h-px" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "text-muted-foreground flex items-center justify-between text-[13px]",
+					children: [/* @__PURE__ */ jsx("span", { children: "Total" }), /* @__PURE__ */ jsxs("span", {
+						className: cn(mono, "text-muted-foreground tabular-nums"),
+						children: [
+							used,
+							"k / ",
+							usage.total,
+							"k"
+						]
+					})]
+				})
+			]
+		}), /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-label": "Context usage",
+			className: cn(ghostButton, "h-8 gap-1.5 px-2", warn && "text-destructive dark:text-destructive"),
+			children: [/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": true,
+				className: cn(mono, "tabular-nums"),
+				children: [Math.round(fraction * 100), "%"]
+			}), /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 16 16",
+				className: "size-4 -rotate-90",
+				"aria-hidden": true,
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: "8",
+					cy: "8",
+					r: "6",
+					fill: "none",
+					strokeWidth: "2.5",
+					className: "stroke-foreground/25"
+				}), /* @__PURE__ */ jsx("circle", {
+					cx: "8",
+					cy: "8",
+					r: "6",
+					fill: "none",
+					strokeWidth: "2.5",
+					strokeLinecap: "round",
+					className: "stroke-current transition-[stroke-dashoffset] duration-700 motion-reduce:transition-none",
+					strokeDasharray: circumference,
+					strokeDashoffset: circumference * (1 - clamp(fraction, 0, 1))
+				})]
+			})]
+		})]
+	});
+}
+function ComposerVoiceButton({ active, className, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": active ? "Stop recording" : "Start voice input",
+		"data-slot": "composer-voice-button",
+		className: cn(active ? cn(inkButton, "flex size-8 items-center justify-center rounded-full") : cn(ghostButton, "size-8"), className),
+		...props,
+		children: active ? /* @__PURE__ */ jsx(SquareIcon, { className: "size-3 fill-current" }) : /* @__PURE__ */ jsx(MicIcon, { className: "size-4" })
+	});
+}
+function ComposerSend({ streaming, idle, className, ...props }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-label": streaming ? "Stop generating" : "Send message",
+		"data-slot": "composer-send",
+		className: cn("grid size-8 place-items-center rounded-full", streaming || !idle ? inkButton : "bg-foreground/[0.06] text-muted-foreground dark:bg-foreground/[0.09] transition-colors", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(ArrowUpIcon, { className: cn(iconSwap, "size-4", streaming ? iconSwapOut : iconSwapIn) }), /* @__PURE__ */ jsx(SquareIcon, { className: cn(iconSwap, "size-3 fill-current", streaming ? iconSwapIn : iconSwapOut) })]
+	});
+}
+//#endregion
+export { Composer, ComposerActions, ComposerAttachButton, ComposerAttachmentChip, ComposerAttachments, ComposerBar, ComposerCommandItem, ComposerContext, ComposerInput, ComposerMenu, ComposerMenuItem, ComposerModelItem, ComposerModelTrigger, ComposerPersonItem, ComposerSend, ComposerToolbar, ComposerVoice, ComposerVoiceButton, applyMention, composer_exports, useMentionMatches, useSlashMatches };

package/dist/components/assistant-ui/elements/computer-use.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from "react";
+declare namespace computer_use_d_exports {
+  export { ComputerStep, ComputerUse };
+}
+export interface ComputerStep {
+  id: string;
+  action: string;
+  target: string;
+  x: number;
+  y: number;
+}
+export declare function ComputerUse({ url, steps, activeIndex, children, className, ...props }: Omit<ComponentProps<"div">, "url" | "steps" | "activeIndex" | "children"> & {
+  url: string;
+  steps: readonly ComputerStep[];
+  activeIndex: number;
+  children: React.ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+export { computer_use_d_exports };

package/dist/components/assistant-ui/elements/computer-use.js

@@ -0,0 +1,84 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { field, mono, paper } from "./surfaces.js";
+import { at, indexIn } from "../utils/range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MousePointer2Icon } from "lucide-react";
+//#region src/components/assistant-ui/elements/computer-use.tsx
+var computer_use_exports = /* @__PURE__ */ __exportAll({ ComputerUse: () => ComputerUse });
+function ComputerUse({ url, steps, activeIndex, children, className, ...props }) {
+	const index = indexIn(steps, activeIndex);
+	const active = at(steps, index);
+	const trail = steps.slice(Math.max(0, index - 2), index + 1);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "computer-use",
+		className: cn(paper, "flex w-full max-w-md flex-col overflow-hidden rounded-2xl", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 px-3 py-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "flex shrink-0 gap-1",
+					children: [
+						"bg-destructive/50",
+						"bg-warning/50",
+						"bg-success/50"
+					].map((tint) => /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn("size-2 rounded-full", tint)
+					}, tint))
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn(field, mono, "text-muted-foreground min-w-0 flex-1 truncate rounded-full px-2.5 py-1"),
+					children: url
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "border-foreground/[0.07] relative min-h-[8.5rem] overflow-hidden border-t",
+				children: [
+					children,
+					trail.map((step, i) => /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "border-info pointer-events-none absolute size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 bg-transparent transition-opacity duration-300 dark:border-info",
+						style: {
+							left: `${step.x}%`,
+							top: `${step.y}%`,
+							opacity: .14 * (i + 1)
+						}
+					}, step.id)),
+					active && /* @__PURE__ */ jsx(MousePointer2Icon, {
+						"aria-hidden": true,
+						className: "pointer-events-none absolute -mt-[3px] -ml-[3px] size-4 fill-info text-info transition-[left,top] duration-500 ease-out motion-reduce:transition-none dark:fill-info dark:text-info",
+						style: {
+							left: `${active.x}%`,
+							top: `${active.y}%`
+						}
+					})
+				]
+			}),
+			active && /* @__PURE__ */ jsxs("div", {
+				className: "border-foreground/[0.07] flex items-center gap-2 border-t px-3.5 py-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground shrink-0"),
+						children: active.action
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-foreground/80 min-w-0 flex-1 truncate text-[13px]",
+						children: active.target
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground shrink-0 tabular-nums"),
+						children: [
+							index + 1,
+							"/",
+							steps.length
+						]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { ComputerUse, computer_use_exports };

package/dist/components/assistant-ui/elements/confidence-marker.d.ts

@@ -0,0 +1,20 @@
+import { ComponentProps } from "react";
+declare namespace confidence_marker_d_exports {
+  export { Confidence, ConfidenceClaim, ConfidenceMarker };
+}
+export type Confidence = "grounded" | "inferred" | "uncertain";
+export interface ConfidenceClaim {
+  id: string;
+  text: string;
+  confidence: Confidence;
+  basis: string;
+}
+export declare function ConfidenceMarker({ claims, hoveredId, onHover, labels, className, ...props }: Omit<ComponentProps<"div">, "children" | "claims" | "hoveredId" | "onHover"> & {
+  claims: readonly ConfidenceClaim[];
+  hoveredId: string;
+  onHover?: (id: string) => void;
+  /** Replaces the label shown before a claim's basis, per confidence. */
+  labels?: Partial<Record<Confidence, string>>;
+}): import("react").JSX.Element;
+//#endregion
+export { confidence_marker_d_exports };

package/dist/components/assistant-ui/elements/confidence-marker.js

@@ -0,0 +1,58 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import "./surfaces.js";
+import { Fragment, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/confidence-marker.tsx
+var confidence_marker_exports = /* @__PURE__ */ __exportAll({ ConfidenceMarker: () => ConfidenceMarker });
+const UNDERLINE = {
+	grounded: "decoration-emerald-500/50",
+	inferred: "decoration-amber-500/60",
+	uncertain: "decoration-red-500/50 decoration-dotted"
+};
+const LABEL = {
+	grounded: "from a source",
+	inferred: "inferred",
+	uncertain: "unverified"
+};
+function ConfidenceMarker({ claims, hoveredId, onHover, labels, className, ...props }) {
+	const basisId = useId();
+	const hovered = claims.find((claim) => claim.id === hoveredId);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "confidence-marker",
+		className: cn("flex w-full max-w-sm flex-col gap-2.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-[13.5px] leading-relaxed",
+			children: claims.map((claim) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-describedby": hoveredId === claim.id ? basisId : void 0,
+				onMouseEnter: () => onHover?.(claim.id),
+				onMouseLeave: () => onHover?.(""),
+				onFocus: () => onHover?.(claim.id),
+				onBlur: () => onHover?.(""),
+				className: cn("focus-visible:ring-foreground/20 inline cursor-help rounded text-start underline decoration-2 underline-offset-[3px] transition-colors outline-none focus-visible:ring-1", UNDERLINE[claim.confidence], hoveredId === claim.id ? "text-foreground/95" : "text-muted-foreground"),
+				children: claim.text
+			}), " "] }, claim.id))
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-0 items-start",
+			children: hovered && /* @__PURE__ */ jsxs("span", {
+				id: basisId,
+				role: "status",
+				className: cn("bg-popover border border-border shadow-lg", "font-mono text-[11px] tracking-tight", "fade-in zoom-in-95 animate-in text-muted-foreground flex items-center gap-1.5 rounded-full px-2.5 py-1.5 duration-150"),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn("size-1.5 rounded-full", hovered.confidence === "grounded" && "bg-success", hovered.confidence === "inferred" && "bg-warning", hovered.confidence === "uncertain" && "bg-destructive")
+					}),
+					labels?.[hovered.confidence] ?? LABEL[hovered.confidence],
+					" · ",
+					hovered.basis
+				]
+			})
+		})]
+	});
+}
+//#endregion
+export { ConfidenceMarker, confidence_marker_exports };

package/dist/components/assistant-ui/elements/connection-state.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps } from "react";
+declare namespace connection_state_d_exports {
+  export { ConnectionPhase, ConnectionState };
+}
+export type ConnectionPhase = "online" | "dropped" | "reconnecting" | "resumed";
+export declare function ConnectionState({ phase, attempt, resumedTokens, onRetry, className, ...props }: Omit<ComponentProps<"div">, "children" | "phase" | "attempt" | "resumedTokens" | "onRetry"> & {
+  phase: ConnectionPhase;
+  attempt?: number;
+  resumedTokens?: number;
+  onRetry?: () => void;
+}): import("react").JSX.Element | null;
+//#endregion
+export { connection_state_d_exports };

package/dist/components/assistant-ui/elements/connection-state.js

@@ -0,0 +1,59 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { paper } from "./surfaces.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CloudOffIcon, Loader2Icon } from "lucide-react";
+//#region src/components/assistant-ui/elements/connection-state.tsx
+var connection_state_exports = /* @__PURE__ */ __exportAll({ ConnectionState: () => ConnectionState });
+function ConnectionState({ phase, attempt, resumedTokens, onRetry, className, ...props }) {
+	if (phase === "online") return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "connection-state",
+		className: cn(paper, "fade-in slide-in-from-top-1 animate-in flex w-full max-w-sm items-center gap-2.5 rounded-2xl px-3.5 py-2.5 duration-300", className),
+		...props,
+		children: [
+			phase === "dropped" && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(CloudOffIcon, { className: "size-3.5 shrink-0 text-warning dark:text-warning" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 text-[13px]",
+					children: "Connection lost. The run kept going on the server."
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onRetry,
+					className: "text-muted-foreground hover:bg-foreground/[0.06] hover:text-foreground/95 shrink-0 rounded-full px-2.5 py-1 text-xs font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+					children: "Reconnect"
+				})
+			] }),
+			phase === "reconnecting" && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(Loader2Icon, { className: "text-muted-foreground size-3.5 shrink-0 animate-spin motion-reduce:animate-none" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 text-[13px]",
+					children: "Reconnecting"
+				}),
+				attempt !== void 0 && /* @__PURE__ */ jsxs("span", {
+					className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground shrink-0 tabular-nums"),
+					children: ["attempt ", attempt]
+				})
+			] }),
+			phase === "resumed" && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 shrink-0 text-success" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 text-[13px]",
+					children: "Picked the stream back up."
+				}),
+				resumedTokens !== void 0 && /* @__PURE__ */ jsxs("span", {
+					className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground shrink-0 tabular-nums"),
+					children: [
+						"+",
+						resumedTokens,
+						" tokens"
+					]
+				})
+			] })
+		]
+	});
+}
+//#endregion
+export { ConnectionState, connection_state_exports };