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

package/dist/components/assistant-ui/elements/quota-banner.js

@@ -0,0 +1,68 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { inkButton, mono, paper } from "./surfaces.js";
+import { announced, pct } from "../utils/range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/quota-banner.tsx
+var quota_banner_exports = /* @__PURE__ */ __exportAll({ QuotaBanner: () => QuotaBanner });
+function QuotaBanner({ used, limit, unit, resetsIn, upgradeLabel, onUpgrade, className, ...props }) {
+	const left = Math.max(0, limit - used);
+	const ratio = limit === 0 ? 0 : used / limit;
+	const exhausted = left === 0;
+	const tight = !exhausted && ratio >= .9;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "quota-banner",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-2.5 rounded-2xl p-3.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline gap-2",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: cn("text-[13.5px] font-medium", exhausted && "text-destructive", tight && "text-warning dark:text-warning"),
+					children: [
+						left,
+						" ",
+						unit,
+						" left"
+					]
+				}), /* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-muted-foreground ms-auto tabular-nums"),
+					children: ["resets in ", resetsIn]
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "meter",
+				"aria-label": `${unit} used`,
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": announced(pct(used, limit)),
+				"aria-valuetext": `${used} of ${limit} ${unit} used`,
+				className: "bg-foreground/[0.06] h-1 w-full overflow-hidden rounded-full",
+				children: /* @__PURE__ */ jsx("span", {
+					className: cn("block h-full rounded-full transition-[width] duration-500 motion-reduce:transition-none", exhausted ? "bg-destructive" : tight ? "bg-warning" : "bg-foreground/40"),
+					style: { width: `${pct(used, limit)}%` }
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-muted-foreground tabular-nums"),
+					children: [
+						used,
+						" of ",
+						limit,
+						" used"
+					]
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onUpgrade,
+					className: cn(inkButton, "ms-auto flex h-7 items-center rounded-full px-3 text-xs font-medium"),
+					children: upgradeLabel
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { QuotaBanner, quota_banner_exports };

package/dist/components/assistant-ui/elements/quote-reply.d.ts

@@ -0,0 +1,20 @@
+import { ComponentProps } from "react";
+declare namespace quote_reply_d_exports {
+  export { QuoteAction, QuoteReply };
+}
+export interface QuoteAction {
+  key: string;
+  label: string;
+  icon: "quote" | "explain" | "rewrite";
+}
+export declare function QuoteReply({ before, selection, after, actions, toolbarVisible, quoted, onAction, className, ...props }: Omit<ComponentProps<"div">, "children" | "before" | "selection" | "after" | "actions" | "toolbarVisible" | "quoted" | "onAction"> & {
+  before: string;
+  selection: string;
+  after: string;
+  actions: readonly QuoteAction[];
+  toolbarVisible: boolean;
+  quoted?: string;
+  onAction?: (key: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { quote_reply_d_exports };

package/dist/components/assistant-ui/elements/quote-reply.js

@@ -0,0 +1,66 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PencilLineIcon, QuoteIcon, SparklesIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/quote-reply.tsx
+var quote_reply_exports = /* @__PURE__ */ __exportAll({ QuoteReply: () => QuoteReply });
+const ICON = {
+	quote: QuoteIcon,
+	explain: SparklesIcon,
+	rewrite: PencilLineIcon
+};
+function QuoteReply({ before, selection, after, actions, toolbarVisible, quoted, onAction, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "quote-reply",
+		className: cn("flex w-full max-w-sm flex-col gap-2.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("p", {
+				className: "relative text-[13.5px] leading-relaxed",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: before
+					}),
+					selection ? /* @__PURE__ */ jsx("span", {
+						className: "text-foreground/95 rounded bg-info/18 px-0.5 dark:bg-info/25",
+						children: selection
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: after
+					})
+				]
+			}),
+			toolbarVisible && onAction && /* @__PURE__ */ jsx("div", {
+				className: "flex h-9 items-start",
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn("bg-popover border border-border shadow-lg", "fade-in zoom-in-95 slide-in-from-top-1 animate-in flex items-center gap-0.5 rounded-full p-1 duration-200"),
+					children: actions.map((action) => {
+						const Icon = ICON[action.icon];
+						return /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => onAction(action.key),
+							className: "text-muted-foreground hover:bg-foreground/[0.06] hover:text-foreground/90 flex h-7 items-center gap-1.5 rounded-full px-2.5 text-xs font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+							children: [/* @__PURE__ */ jsx(Icon, { className: "size-3.5" }), action.label]
+						}, action.key);
+					})
+				})
+			}),
+			quoted && /* @__PURE__ */ jsxs("div", {
+				className: "fade-in slide-in-from-bottom-1 animate-in flex flex-col gap-1 duration-300",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground"),
+					children: "replying to"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "border-foreground/15 text-muted-foreground border-s-2 ps-2.5 text-xs leading-relaxed",
+					children: quoted
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { QuoteReply, quote_reply_exports };

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

@@ -0,0 +1,61 @@
+import { ComponentProps, FC } from "react";
+import { QuoteIcon } from "lucide-react";
+import { ComposerPrimitive, QuoteMessagePartComponent, SelectionToolbarPrimitive } from "@assistant-ui/react";
+declare namespace quote_aui_d_exports {
+  export { ComposerQuotePreview, ComposerQuotePreviewDismiss, ComposerQuotePreviewIcon, ComposerQuotePreviewRoot, ComposerQuotePreviewText, QuoteBlock, QuoteBlockIcon, QuoteBlockRoot, QuoteBlockText, SelectionToolbar, SelectionToolbarQuote, SelectionToolbarRoot };
+}
+declare function QuoteBlockRoot({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function QuoteBlockIcon({ className, ...props }: ComponentProps<typeof QuoteIcon>): import("react").JSX.Element;
+declare function QuoteBlockText({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+declare const QuoteBlock: QuoteMessagePartComponent & {
+  Root: typeof QuoteBlockRoot;
+  Icon: typeof QuoteBlockIcon;
+  Text: typeof QuoteBlockText;
+};
+declare function SelectionToolbarRoot({ className, ...props }: ComponentProps<typeof SelectionToolbarPrimitive.Root>): import("react").JSX.Element;
+declare function SelectionToolbarQuote({ className, children, ...props }: ComponentProps<typeof SelectionToolbarPrimitive.Quote>): import("react").JSX.Element;
+/**
+ * Floating toolbar that appears when text is selected in a message.
+ *
+ * Render anywhere inside `ThreadPrimitive.Root` (or any `AssistantRuntimeProvider` scope).
+ *
+ * @example
+ * ```tsx
+ * <ThreadPrimitive.Root>
+ *   <ThreadPrimitive.Viewport>...</ThreadPrimitive.Viewport>
+ *   <SelectionToolbar />
+ * </ThreadPrimitive.Root>
+ * ```
+ */
+declare const SelectionToolbarImpl: FC<ComponentProps<typeof SelectionToolbarRoot>>;
+declare const SelectionToolbar: typeof SelectionToolbarImpl & {
+  Root: typeof SelectionToolbarRoot;
+  Quote: typeof SelectionToolbarQuote;
+};
+declare function ComposerQuotePreviewRoot({ className, ...props }: ComponentProps<typeof ComposerPrimitive.Quote>): import("react").JSX.Element;
+declare function ComposerQuotePreviewIcon({ className, ...props }: ComponentProps<typeof QuoteIcon>): import("react").JSX.Element;
+declare function ComposerQuotePreviewText({ className, ...props }: ComponentProps<typeof ComposerPrimitive.QuoteText>): import("react").JSX.Element;
+declare function ComposerQuotePreviewDismiss({ className, children, ...props }: ComponentProps<typeof ComposerPrimitive.QuoteDismiss>): import("react").JSX.Element;
+/**
+ * Quote preview inside the composer. Only renders when a quote is set.
+ *
+ * Place inside `ComposerPrimitive.Root`.
+ *
+ * @example
+ * ```tsx
+ * <ComposerPrimitive.Root>
+ *   <ComposerQuotePreview />
+ *   <ComposerPrimitive.Input />
+ *   <ComposerPrimitive.Send />
+ * </ComposerPrimitive.Root>
+ * ```
+ */
+declare const ComposerQuotePreviewImpl: FC<ComponentProps<typeof ComposerQuotePreviewRoot>>;
+declare const ComposerQuotePreview: typeof ComposerQuotePreviewImpl & {
+  Root: typeof ComposerQuotePreviewRoot;
+  Icon: typeof ComposerQuotePreviewIcon;
+  Text: typeof ComposerQuotePreviewText;
+  Dismiss: typeof ComposerQuotePreviewDismiss;
+};
+//#endregion
+export { ComposerQuotePreview, ComposerQuotePreviewDismiss, ComposerQuotePreviewIcon, ComposerQuotePreviewRoot, ComposerQuotePreviewText, QuoteBlock, QuoteBlockIcon, QuoteBlockRoot, QuoteBlockText, SelectionToolbar, SelectionToolbarQuote, SelectionToolbarRoot, quote_aui_d_exports };

package/dist/components/assistant-ui/elements/quote.aui.js

@@ -0,0 +1,170 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { memo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { QuoteIcon, XIcon } from "lucide-react";
+import { ComposerPrimitive, SelectionToolbarPrimitive } from "@assistant-ui/react";
+//#region src/components/assistant-ui/elements/quote.aui.tsx
+var quote_aui_exports = /* @__PURE__ */ __exportAll({
+	ComposerQuotePreview: () => ComposerQuotePreview,
+	ComposerQuotePreviewDismiss: () => ComposerQuotePreviewDismiss,
+	ComposerQuotePreviewIcon: () => ComposerQuotePreviewIcon,
+	ComposerQuotePreviewRoot: () => ComposerQuotePreviewRoot,
+	ComposerQuotePreviewText: () => ComposerQuotePreviewText,
+	QuoteBlock: () => QuoteBlock,
+	QuoteBlockIcon: () => QuoteBlockIcon,
+	QuoteBlockRoot: () => QuoteBlockRoot,
+	QuoteBlockText: () => QuoteBlockText,
+	SelectionToolbar: () => SelectionToolbar,
+	SelectionToolbarQuote: () => SelectionToolbarQuote,
+	SelectionToolbarRoot: () => SelectionToolbarRoot
+});
+function QuoteBlockRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "quote-block",
+		className: cn("mb-2 flex items-start gap-1.5", className),
+		...props
+	});
+}
+function QuoteBlockIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx(QuoteIcon, {
+		"data-slot": "quote-block-icon",
+		className: cn("text-muted-foreground/60 mt-0.5 size-3 shrink-0", className),
+		...props
+	});
+}
+function QuoteBlockText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "quote-block-text",
+		className: cn("text-muted-foreground line-clamp-2 min-w-0 text-sm italic", className),
+		...props
+	});
+}
+/**
+* Renders quoted text in user messages.
+*
+* Pass this to `MessagePrimitive.Parts` as the `Quote` renderer.
+*
+* @example
+* ```tsx
+* <MessagePrimitive.Quote>
+*   {(quote) => <QuoteBlock {...quote} />}
+* </MessagePrimitive.Quote>
+* ```
+*/
+const QuoteBlockImpl = ({ text }) => {
+	return /* @__PURE__ */ jsxs(QuoteBlockRoot, { children: [/* @__PURE__ */ jsx(QuoteBlockIcon, {}), /* @__PURE__ */ jsx(QuoteBlockText, { children: text })] });
+};
+const QuoteBlock = memo(QuoteBlockImpl);
+QuoteBlock.displayName = "QuoteBlock";
+QuoteBlock.Root = QuoteBlockRoot;
+QuoteBlock.Icon = QuoteBlockIcon;
+QuoteBlock.Text = QuoteBlockText;
+function SelectionToolbarRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SelectionToolbarPrimitive.Root, {
+		"data-slot": "selection-toolbar",
+		className: cn("bg-popover flex items-center gap-1 rounded-lg border px-1 py-1", className),
+		...props
+	});
+}
+function SelectionToolbarQuote({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(SelectionToolbarPrimitive.Quote, {
+		"data-slot": "selection-toolbar-quote",
+		className: cn("text-popover-foreground hover:bg-accent flex items-center gap-1.5 rounded-md px-2.5 py-1 text-sm transition-colors", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(QuoteIcon, { className: "size-3.5" }), "Quote"] })
+	});
+}
+/**
+* Floating toolbar that appears when text is selected in a message.
+*
+* Render anywhere inside `ThreadPrimitive.Root` (or any `AssistantRuntimeProvider` scope).
+*
+* @example
+* ```tsx
+* <ThreadPrimitive.Root>
+*   <ThreadPrimitive.Viewport>...</ThreadPrimitive.Viewport>
+*   <SelectionToolbar />
+* </ThreadPrimitive.Root>
+* ```
+*/
+const SelectionToolbarImpl = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(SelectionToolbarRoot, {
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx(SelectionToolbarQuote, {})
+	});
+};
+const SelectionToolbar = memo(SelectionToolbarImpl);
+SelectionToolbar.displayName = "SelectionToolbar";
+SelectionToolbar.Root = SelectionToolbarRoot;
+SelectionToolbar.Quote = SelectionToolbarQuote;
+function ComposerQuotePreviewRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ComposerPrimitive.Quote, {
+		"data-slot": "composer-quote",
+		className: cn("bg-muted/60 mx-3 mt-2 flex items-start gap-2 rounded-lg px-3 py-2", className),
+		...props
+	});
+}
+function ComposerQuotePreviewIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx(QuoteIcon, {
+		"data-slot": "composer-quote-icon",
+		className: cn("text-muted-foreground/70 mt-0.5 size-3.5 shrink-0", className),
+		...props
+	});
+}
+function ComposerQuotePreviewText({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ComposerPrimitive.QuoteText, {
+		"data-slot": "composer-quote-text",
+		className: cn("text-muted-foreground line-clamp-2 min-w-0 flex-1 text-sm", className),
+		...props
+	});
+}
+function ComposerQuotePreviewDismiss({ className, children, ...props }) {
+	return children ? /* @__PURE__ */ jsx(ComposerPrimitive.QuoteDismiss, {
+		"data-slot": "composer-quote-dismiss",
+		className,
+		...props,
+		children
+	}) : /* @__PURE__ */ jsx(ComposerPrimitive.QuoteDismiss, {
+		"data-slot": "composer-quote-dismiss",
+		"aria-label": "Dismiss quote",
+		className: cn("shrink-0 rounded-sm p-0.5 text-muted-foreground/70 transition-colors hover:bg-accent hover:text-foreground", className),
+		...props,
+		children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+	});
+}
+/**
+* Quote preview inside the composer. Only renders when a quote is set.
+*
+* Place inside `ComposerPrimitive.Root`.
+*
+* @example
+* ```tsx
+* <ComposerPrimitive.Root>
+*   <ComposerQuotePreview />
+*   <ComposerPrimitive.Input />
+*   <ComposerPrimitive.Send />
+* </ComposerPrimitive.Root>
+* ```
+*/
+const ComposerQuotePreviewImpl = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsxs(ComposerQuotePreviewRoot, {
+		className,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ComposerQuotePreviewIcon, {}),
+			/* @__PURE__ */ jsx(ComposerQuotePreviewText, {}),
+			/* @__PURE__ */ jsx(ComposerQuotePreviewDismiss, {})
+		]
+	});
+};
+const ComposerQuotePreview = memo(ComposerQuotePreviewImpl);
+ComposerQuotePreview.displayName = "ComposerQuotePreview";
+ComposerQuotePreview.Root = ComposerQuotePreviewRoot;
+ComposerQuotePreview.Icon = ComposerQuotePreviewIcon;
+ComposerQuotePreview.Text = ComposerQuotePreviewText;
+ComposerQuotePreview.Dismiss = ComposerQuotePreviewDismiss;
+//#endregion
+export { ComposerQuotePreview, ComposerQuotePreviewDismiss, ComposerQuotePreviewIcon, ComposerQuotePreviewRoot, ComposerQuotePreviewText, QuoteBlock, QuoteBlockIcon, QuoteBlockRoot, QuoteBlockText, SelectionToolbar, SelectionToolbarQuote, SelectionToolbarRoot, quote_aui_exports };

package/dist/components/assistant-ui/elements/read-aloud.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+declare namespace read_aloud_d_exports {
+  export { ReadAloud };
+}
+export declare function ReadAloud({ words, spokenIndex, playing, rate, elapsed, duration, onToggle, onRateChange, className, ...props }: Omit<ComponentProps<"div">, "children" | "words" | "spokenIndex" | "playing" | "rate" | "elapsed" | "duration" | "onToggle" | "onRateChange"> & {
+  words: readonly string[];
+  spokenIndex: number;
+  playing: boolean;
+  rate: number;
+  elapsed: string;
+  duration: string;
+  onToggle?: () => void;
+  onRateChange?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { read_aloud_d_exports };

package/dist/components/assistant-ui/elements/read-aloud.js

@@ -0,0 +1,66 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { field, ghostButton, mono, paper } from "./surfaces.js";
+import { announced, pct } from "../utils/range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PauseIcon, PlayIcon, Volume2Icon } from "lucide-react";
+//#region src/components/assistant-ui/elements/read-aloud.tsx
+var read_aloud_exports = /* @__PURE__ */ __exportAll({ ReadAloud: () => ReadAloud });
+function ReadAloud({ words, spokenIndex, playing, rate, elapsed, duration, onToggle, onRateChange, className, ...props }) {
+	const progress = pct(spokenIndex, words.length);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "read-aloud",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-2xl p-3.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-[13.5px] leading-relaxed",
+			children: words.map((word, i) => /* @__PURE__ */ jsxs("span", {
+				className: cn("transition-colors duration-200 motion-reduce:transition-none", i < spokenIndex ? "text-muted-foreground" : i === spokenIndex ? "text-foreground/95 rounded bg-foreground/[0.08]" : "text-muted-foreground"),
+				children: [word, " "]
+			}, `${i}-${word}`))
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2.5",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": playing ? "Pause" : "Play",
+					onClick: onToggle,
+					className: cn(ghostButton, "bg-foreground/[0.06] size-8 shrink-0"),
+					children: playing ? /* @__PURE__ */ jsx(PauseIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(PlayIcon, { className: "size-3.5 translate-x-px" })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					role: "progressbar",
+					"aria-label": "Read aloud progress",
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					"aria-valuenow": announced(progress),
+					"aria-valuetext": `${elapsed} of ${duration}`,
+					className: "bg-foreground/[0.08] h-[3px] min-w-0 flex-1 overflow-hidden rounded-full",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "bg-foreground/80 block h-full rounded-full transition-[width] duration-200 ease-linear motion-reduce:transition-none",
+						style: { width: `${progress}%` }
+					})
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-muted-foreground shrink-0 tabular-nums"),
+					children: [
+						elapsed,
+						" / ",
+						duration
+					]
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-label": `Playback speed, currently ${rate} times`,
+					onClick: onRateChange,
+					className: cn(field, mono, "text-muted-foreground hover:text-foreground/90 flex h-fit min-w-13 shrink-0 items-center justify-center rounded-full px-2 py-1 tabular-nums transition-colors"),
+					children: [rate, "×"]
+				}),
+				/* @__PURE__ */ jsx(Volume2Icon, { className: "text-muted-foreground size-3.5 shrink-0" })
+			]
+		})]
+	});
+}
+//#endregion
+export { ReadAloud, read_aloud_exports };

package/dist/components/assistant-ui/elements/reasoning-effort.d.ts

@@ -0,0 +1,17 @@
+import { ComponentProps } from "react";
+declare namespace reasoning_effort_d_exports {
+  export { EffortLevel, ReasoningEffort };
+}
+export interface EffortLevel {
+  key: string;
+  label: string;
+  budget: number;
+}
+export declare function ReasoningEffort({ levels, selectedKey, spent, onSelect, className, ...props }: Omit<ComponentProps<"div">, "children" | "levels" | "selectedKey" | "spent" | "onSelect"> & {
+  levels: readonly EffortLevel[];
+  selectedKey: string;
+  spent: number;
+  onSelect?: (key: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { reasoning_effort_d_exports };

package/dist/components/assistant-ui/elements/reasoning-effort.js

@@ -0,0 +1,67 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { field, mono } from "./surfaces.js";
+import { announced, pct } from "../utils/range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/reasoning-effort.tsx
+var reasoning_effort_exports = /* @__PURE__ */ __exportAll({ ReasoningEffort: () => ReasoningEffort });
+const fmt = (n) => n.toLocaleString("en-US");
+function ReasoningEffort({ levels, selectedKey, spent, onSelect, className, ...props }) {
+	const budget = levels.find((level) => level.key === selectedKey)?.budget ?? 0;
+	const used = pct(spent, budget);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "reasoning-effort",
+		className: cn("flex w-full max-w-sm flex-col gap-2.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-[13.5px] font-medium",
+					children: "Thinking"
+				}), /* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-muted-foreground tabular-nums"),
+					children: [
+						fmt(spent),
+						" / ",
+						fmt(budget)
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn(field, "flex gap-0.5 rounded-full p-0.5"),
+				children: levels.map((level) => {
+					const active = level.key === selectedKey;
+					const className = cn("flex-1 rounded-full py-1 text-center text-xs font-medium transition-[background-color,color,scale] duration-150", onSelect && "focus-visible:ring-ring/40 outline-none focus-visible:ring-1 focus-visible:ring-inset active:scale-[0.97]", active ? "bg-background text-foreground/90" : onSelect ? "text-muted-foreground hover:text-muted-foreground focus-visible:text-muted-foreground" : "text-muted-foreground");
+					return onSelect ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-pressed": active,
+						onClick: () => onSelect(level.key),
+						className,
+						children: level.label
+					}, level.key) : /* @__PURE__ */ jsx("span", {
+						"aria-current": active ? "true" : void 0,
+						className,
+						children: level.label
+					}, level.key);
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "progressbar",
+				"aria-label": "Thinking budget used",
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": announced(used),
+				"aria-valuetext": `${fmt(spent)} of ${fmt(budget)}`,
+				className: "bg-foreground/[0.06] h-[3px] w-full overflow-hidden rounded-full",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "block h-full rounded-full bg-info transition-[width] duration-500 motion-reduce:transition-none dark:bg-info",
+					style: { width: `${used}%` }
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { ReasoningEffort, reasoning_effort_exports };

package/dist/components/assistant-ui/elements/reasoning-panel.d.ts

@@ -0,0 +1,20 @@
+declare namespace reasoning_panel_d_exports {
+  export { ReasoningPanel, ReasoningPanelProps, ReasoningStep };
+}
+export interface ReasoningStep {
+  title: string;
+  body: string;
+}
+export interface ReasoningPanelProps {
+  steps: ReasoningStep[];
+  visibleSteps: number;
+  streaming: boolean;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  restingLabel: string;
+  elapsed?: string;
+  className?: string;
+}
+export declare function ReasoningPanel({ steps, visibleSteps, streaming, open, onOpenChange, restingLabel, elapsed, className }: ReasoningPanelProps): import("react").JSX.Element;
+//#endregion
+export { reasoning_panel_d_exports };

package/dist/components/assistant-ui/elements/reasoning-panel.js

@@ -0,0 +1,60 @@
+"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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/reasoning-panel.tsx
+var reasoning_panel_exports = /* @__PURE__ */ __exportAll({ ReasoningPanel: () => ReasoningPanel });
+function ReasoningPanel({ steps, visibleSteps, streaming, open, onOpenChange, restingLabel, elapsed, className }) {
+	const shown = take(steps, visibleSteps);
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		"data-slot": "reasoning-panel",
+		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 py-1 text-[13.5px] transition-[color,scale] outline-none active:scale-[0.98]",
+			children: [/* @__PURE__ */ jsxs(SwapLabel, {
+				active: streaming ? 0 : 1,
+				className: "text-start",
+				children: [/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ShimmerLabel, {
+					active: streaming,
+					className: "relative inline-block leading-none",
+					children: "Thinking"
+				}), elapsed !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground tabular-nums"),
+					children: elapsed
+				})] }), /* @__PURE__ */ jsx(Fragment, { children: restingLabel })]
+			}), /* @__PURE__ */ jsx(ChevronDownIcon, { 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-180 group-data-panel-open/trigger:rotate-180 motion-reduce:transition-none" })]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, {
+			className: cn(collapsePanel, "outline-none"),
+			children: /* @__PURE__ */ jsx("ol", {
+				className: "flex flex-col gap-4 pt-3 pb-1",
+				children: shown.map((step, i) => {
+					const active = streaming && i === shown.length - 1;
+					return /* @__PURE__ */ jsxs("li", {
+						className: "fade-in slide-in-from-bottom-1 animate-in fill-mode-both flex gap-3 duration-300",
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: cn("mt-[7px] size-[5px] shrink-0 rounded-full transition-colors duration-300", active ? "animate-pulse bg-info dark:bg-info" : "bg-foreground/20")
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 flex-1 flex-col",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "text-foreground/90 text-[13.5px] font-medium",
+								children: step.title
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground mt-0.5 text-[13px] leading-relaxed break-words",
+								children: step.body
+							})]
+						})]
+					}, step.title);
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { ReasoningPanel, reasoning_panel_exports };

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

@@ -0,0 +1,24 @@
+import { ReasoningContent, ReasoningFade, ReasoningRootProps, ReasoningText, ReasoningTrigger, reasoningVariants } from "./reasoning.js";
+import { ReasoningMessagePartComponent } from "@assistant-ui/react";
+declare namespace reasoning_aui_d_exports {
+  export { Reasoning, ReasoningContent, ReasoningFade, ReasoningGroup, ReasoningRoot, ReasoningRootProps, ReasoningText, ReasoningTrigger, reasoningVariants };
+}
+/** `ReasoningRoot` with the thread viewport scroll locked during disclosure animations. */
+declare function ReasoningRoot({ ref, onAnimationStart, ...props }: ReasoningRootProps): import("react").JSX.Element;
+declare const Reasoning: ReasoningMessagePartComponent & {
+  Root: typeof ReasoningRoot;
+  Trigger: typeof ReasoningTrigger;
+  Content: typeof ReasoningContent;
+  Text: typeof ReasoningText;
+  Fade: typeof ReasoningFade;
+};
+/**
+ * @deprecated This wrapper targets the legacy `components.ReasoningGroup`
+ * prop on `<MessagePrimitive.Parts>`. Use `<MessagePrimitive.GroupedParts>`
+ * with a `groupBy` returning `"group-reasoning"` and compose `ReasoningRoot`
+ * / `ReasoningTrigger` / `ReasoningContent` / `ReasoningText` directly.
+ * See `thread.aui.tsx` for an example.
+ */
+declare const ReasoningGroup: import("react").NamedExoticComponent<import("@assistant-ui/react").ReasoningGroupProps>;
+//#endregion
+export { Reasoning, ReasoningContent, ReasoningFade, ReasoningGroup, ReasoningRoot, type ReasoningRootProps, ReasoningText, ReasoningTrigger, reasoningVariants, reasoning_aui_d_exports };