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

package/dist/components/assistant-ui/elements/option-list.js

@@ -0,0 +1,176 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { inkButton, mono, paper } from "./surfaces.js";
+import { clamp } from "../utils/range.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, Loader2Icon } from "lucide-react";
+//#region src/components/assistant-ui/elements/option-list.tsx
+var option_list_exports = /* @__PURE__ */ __exportAll({ OptionList: () => OptionList });
+const row = "flex w-full items-start gap-2.5 rounded-xl px-2 py-2 text-start transition-colors outline-none focus-visible:ring-1 focus-visible:ring-foreground/20";
+/** The control at the start of a row: a box to tick, or a radio to pick. */
+function OptionMarker({ multiple, selected }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: cn("flex size-3.5 items-center justify-center border transition-colors", multiple ? "rounded-[5px]" : "rounded-full", selected ? "border-foreground bg-foreground" : "border-muted-foreground/40"),
+		children: selected ? multiple ? /* @__PURE__ */ jsx(CheckIcon, { className: "fade-in zoom-in-90 animate-in text-background size-2.5 duration-200 motion-reduce:animate-none" }) : /* @__PURE__ */ jsx("span", { className: "fade-in zoom-in-50 animate-in bg-background size-1.5 rounded-full duration-200 motion-reduce:animate-none" }) : null
+	});
+}
+function OptionText({ option }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 flex-1 flex-col gap-0.5",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-[13.5px] leading-5 break-words",
+			children: option.label
+		}), option.description ? /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground text-xs leading-4 break-words",
+			children: option.description
+		}) : null]
+	});
+}
+function OptionList({ options, selectionMode = "single", defaultValue, minSelections = 1, maxSelections, onConfirm, confirmLabel = "Confirm", choice, className, ...props }) {
+	const multiple = selectionMode === "multiple";
+	const [selected, setSelected] = useState(() => (defaultValue ?? []).filter((id) => options.some((o) => o.id === id)));
+	const [pending, setPending] = useState(null);
+	const [confirmed, setConfirmed] = useState();
+	const [error, setError] = useState(null);
+	const root = cn(paper, "flex w-full max-w-sm flex-col gap-1 rounded-2xl p-2", className);
+	const confirmedChoice = choice ?? confirmed;
+	if (confirmedChoice !== void 0) {
+		const chosen = options.filter((option) => confirmedChoice.includes(option.id));
+		return /* @__PURE__ */ jsx("div", {
+			"data-slot": "option-list",
+			"data-state": "receipt",
+			className: root,
+			...props,
+			children: chosen.length === 0 ? /* @__PURE__ */ jsx("span", {
+				className: cn(mono, "text-muted-foreground px-2 py-2"),
+				children: "Nothing selected"
+			}) : chosen.map((option) => /* @__PURE__ */ jsxs("div", {
+				className: cn(row, "text-muted-foreground"),
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex h-5 w-3.5 shrink-0 items-center justify-center",
+					children: [/* @__PURE__ */ jsx(CheckIcon, {
+						"aria-hidden": true,
+						className: "text-muted-foreground size-3.5"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "Selected:"
+					})]
+				}), /* @__PURE__ */ jsx(OptionText, { option })]
+			}, option.id))
+		});
+	}
+	if (!onConfirm) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "option-list",
+		className: root,
+		...props,
+		children: options.map((option) => /* @__PURE__ */ jsxs("div", {
+			className: cn(row, option.disabled && "text-muted-foreground"),
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "flex h-5 w-3.5 shrink-0 items-center justify-center",
+				children: /* @__PURE__ */ jsx(OptionMarker, {
+					multiple,
+					selected: false
+				})
+			}), /* @__PURE__ */ jsx(OptionText, { option })]
+		}, option.id))
+	});
+	const locked = pending !== null;
+	const max = Math.floor(clamp(maxSelections ?? options.length, 0, options.length));
+	const min = Math.floor(clamp(minSelections, 0, max));
+	const optionIds = new Set(options.map((option) => option.id));
+	const selectedIds = selected.filter((id) => optionIds.has(id));
+	const commit = (ids) => {
+		if (locked) return;
+		setPending(ids);
+		setError(null);
+		(async () => {
+			try {
+				await onConfirm(ids);
+				setConfirmed(ids);
+			} catch (commitError) {
+				setPending(null);
+				setError(commitError instanceof Error ? commitError.message : String(commitError));
+			}
+		})();
+	};
+	const toggle = (id) => {
+		if (locked) return;
+		setSelected((current) => {
+			const available = current.filter((value) => optionIds.has(value));
+			return available.includes(id) ? available.filter((value) => value !== id) : available.length < max ? [...available, id] : available;
+		});
+	};
+	const count = selectedIds.length;
+	const canConfirm = !locked && count >= min && count <= max;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"data-slot": "option-list",
+		"data-state": locked ? "pending" : "open",
+		"aria-busy": locked || void 0,
+		className: root,
+		...props,
+		children: [
+			options.map((option) => {
+				const isSelected = multiple ? selectedIds.includes(option.id) : (pending ?? selected).includes(option.id);
+				const unavailable = option.disabled === true || multiple && !isSelected && count >= max;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					...multiple ? {
+						role: "checkbox",
+						"aria-checked": isSelected
+					} : {},
+					"aria-disabled": unavailable || locked || void 0,
+					disabled: option.disabled,
+					onClick: () => {
+						if (unavailable) return;
+						if (multiple) toggle(option.id);
+						else commit([option.id]);
+					},
+					className: cn(row, isSelected ? "bg-foreground/[0.06]" : !unavailable && !locked && "hover:bg-foreground/[0.035]", unavailable ? "text-muted-foreground" : "text-foreground/90", (unavailable || locked) && "cursor-default"),
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "flex h-5 w-3.5 shrink-0 items-center justify-center",
+						children: pending?.includes(option.id) ? /* @__PURE__ */ jsx(Loader2Icon, { className: "text-muted-foreground size-3.5 animate-spin motion-reduce:animate-none" }) : /* @__PURE__ */ jsx(OptionMarker, {
+							multiple,
+							selected: isSelected
+						})
+					}), /* @__PURE__ */ jsx(OptionText, { option })]
+				}, option.id);
+			}),
+			error ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "px-2 pb-1 text-xs break-words text-destructive dark:text-destructive",
+				children: error
+			}) : null,
+			multiple ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-3 px-2 pt-1.5 pb-1",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-muted-foreground tabular-nums"),
+					children: [
+						count,
+						" selected · up to ",
+						max
+					]
+				}), /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-disabled": !canConfirm || void 0,
+					onClick: () => {
+						if (!canConfirm) return;
+						commit(options.filter((option) => selectedIds.includes(option.id)).map((option) => option.id));
+					},
+					className: cn(inkButton, "flex h-8 items-center gap-1.5 rounded-full px-3.5 text-xs font-medium", !canConfirm && "cursor-default opacity-40 hover:opacity-40"),
+					children: [locked ? /* @__PURE__ */ jsx(Loader2Icon, {
+						"aria-hidden": true,
+						className: "size-3.5 animate-spin motion-reduce:animate-none"
+					}) : null, confirmLabel]
+				})]
+			}) : null
+		]
+	});
+}
+//#endregion
+export { OptionList, option_list_exports };

package/dist/components/assistant-ui/elements/permission-grant.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps } from "react";
+declare namespace permission_grant_d_exports {
+  export { GrantScope, PermissionGrant };
+}
+export type GrantScope = "session" | "always" | "denied";
+export declare function PermissionGrant({ capability, requester, reach, scope, onGrant, className, ...props }: Omit<ComponentProps<"div">, "children" | "capability" | "requester" | "reach" | "scope" | "onGrant"> & {
+  capability: string;
+  requester: string;
+  reach: readonly string[];
+  scope: GrantScope | "pending";
+  onGrant?: (scope: GrantScope) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { permission_grant_d_exports };

package/dist/components/assistant-ui/elements/permission-grant.js

@@ -0,0 +1,84 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { inkButton, mono, paper } from "./surfaces.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { KeyRoundIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/permission-grant.tsx
+var permission_grant_exports = /* @__PURE__ */ __exportAll({ PermissionGrant: () => PermissionGrant });
+/** The settled or waiting decision, as a dot plus text rather than a pill. */
+function Outcome({ scope }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "fade-in animate-in flex items-center gap-1.5 duration-300",
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cn("size-1.5 shrink-0 rounded-full", scope === "denied" ? "bg-destructive" : scope === "pending" ? "bg-foreground/30" : "bg-success")
+		}), /* @__PURE__ */ jsx("span", {
+			className: cn(mono, "text-muted-foreground"),
+			children: scope === "denied" ? "denied" : scope === "pending" ? "pending" : `granted · ${scope}`
+		})]
+	}, scope);
+}
+function PermissionGrant({ capability, requester, reach, scope, onGrant, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "permission-grant",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3.5 rounded-[20px] p-4", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "bg-foreground/[0.05] text-muted-foreground flex size-7 shrink-0 items-center justify-center rounded-lg",
+					children: /* @__PURE__ */ jsx(KeyRoundIcon, { className: "size-3.5" })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate text-[13.5px] font-medium",
+						children: capability
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground truncate text-xs",
+						children: ["requested by ", requester]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-muted-foreground"),
+					children: "this grants"
+				}), reach.map((item) => /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground flex items-baseline gap-2 text-xs",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "bg-foreground/20 size-1 rounded-full"
+					}), item]
+				}, item))]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex h-8 items-center justify-end gap-2",
+				children: scope === "pending" ? onGrant ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onGrant("denied"),
+						className: "text-muted-foreground hover:bg-foreground/[0.06] hover:text-foreground/90 h-8 rounded-full px-3 text-xs font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+						children: "Deny"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onGrant("session"),
+						className: "text-muted-foreground hover:bg-foreground/[0.06] hover:text-foreground/90 h-8 rounded-full px-3 text-xs font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+						children: "This session"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onGrant("always"),
+						className: cn(inkButton, "flex h-8 items-center rounded-full px-3 text-xs font-medium"),
+						children: "Always"
+					})
+				] }) : /* @__PURE__ */ jsx(Outcome, { scope }) : /* @__PURE__ */ jsx(Outcome, { scope })
+			})
+		]
+	});
+}
+//#endregion
+export { PermissionGrant, permission_grant_exports };

package/dist/components/assistant-ui/elements/prompt-library.d.ts

@@ -0,0 +1,20 @@
+import { ComponentProps } from "react";
+declare namespace prompt_library_d_exports {
+  export { PromptLibrary, SavedPrompt };
+}
+export interface SavedPrompt {
+  id: string;
+  name: string;
+  body: string;
+  variables: readonly string[];
+}
+export declare function PromptLibrary({ prompts, query, selectedId, onQueryChange, onSelect, onInsert, className, ...props }: Omit<ComponentProps<"div">, "children" | "prompts" | "query" | "selectedId" | "onQueryChange" | "onSelect" | "onInsert"> & {
+  prompts: readonly SavedPrompt[];
+  query: string;
+  selectedId: string;
+  onQueryChange?: (query: string) => void;
+  onSelect?: (id: string) => void;
+  onInsert?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { prompt_library_d_exports };

package/dist/components/assistant-ui/elements/prompt-library.js

@@ -0,0 +1,121 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { field, paper } from "./surfaces.js";
+import { useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { BookmarkIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/prompt-library.tsx
+var prompt_library_exports = /* @__PURE__ */ __exportAll({ PromptLibrary: () => PromptLibrary });
+function PromptLibrary({ prompts, query, selectedId, onQueryChange, onSelect, onInsert, className, ...props }) {
+	const listId = useId();
+	const optionId = (id) => `${listId}-${id}`;
+	const matches = prompts.filter((prompt) => prompt.name.toLowerCase().includes(query.toLowerCase()));
+	const selected = matches.find((prompt) => prompt.id === selectedId);
+	const move = (delta) => {
+		if (matches.length === 0) return;
+		const at = matches.findIndex((prompt) => prompt.id === selectedId);
+		const next = matches[((at === -1 ? delta > 0 ? -1 : 0 : at) + delta + matches.length) % matches.length];
+		if (next && onSelect) onSelect(next.id);
+	};
+	const onKeyDown = (event) => {
+		if (event.nativeEvent.isComposing) return;
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			move(1);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			move(-1);
+		} else if (event.key === "Enter" && selected && onInsert) {
+			event.preventDefault();
+			onInsert(selected.id);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "prompt-library",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-2 rounded-2xl p-3", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cn(field, "flex items-center gap-2 rounded-xl px-2.5 py-1.5"),
+				children: [/* @__PURE__ */ jsx(BookmarkIcon, { className: "text-muted-foreground size-3.5 shrink-0" }), /* @__PURE__ */ jsx("input", {
+					value: query,
+					onChange: (event) => onQueryChange?.(event.target.value),
+					onKeyDown,
+					placeholder: "Search prompts",
+					"aria-label": "Search saved prompts",
+					role: "combobox",
+					"aria-expanded": matches.length > 0,
+					"aria-controls": listId,
+					"aria-autocomplete": "list",
+					"aria-activedescendant": selected ? optionId(selected.id) : void 0,
+					className: "text-foreground/85 placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent text-[13px] outline-none"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				id: listId,
+				role: "listbox",
+				"aria-label": "Saved prompts",
+				className: "flex flex-col",
+				children: matches.map((prompt) => {
+					const className = cn("flex items-center gap-2 rounded-xl px-2 py-1.5 text-start transition-colors", prompt.id === selectedId ? "bg-foreground/[0.05]" : onSelect || onInsert ? "hover:bg-foreground/[0.03]" : void 0);
+					const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate text-[13px]",
+						children: prompt.name
+					}), prompt.variables.length > 0 && /* @__PURE__ */ jsxs("span", {
+						className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground shrink-0"),
+						children: [
+							prompt.variables.length,
+							" ",
+							prompt.variables.length === 1 ? "var" : "vars"
+						]
+					})] });
+					return onSelect || onInsert ? /* @__PURE__ */ jsx("button", {
+						id: optionId(prompt.id),
+						type: "button",
+						role: "option",
+						tabIndex: onSelect ? -1 : 0,
+						"aria-selected": prompt.id === selectedId,
+						onMouseDown: onSelect ? (event) => event.preventDefault() : void 0,
+						onClick: (event) => {
+							if (onSelect) onSelect(prompt.id);
+							else if (event.detail <= 1) onInsert?.(prompt.id);
+						},
+						onDoubleClick: onSelect && onInsert ? () => onInsert(prompt.id) : void 0,
+						className,
+						children: content
+					}, prompt.id) : /* @__PURE__ */ jsx("div", {
+						id: optionId(prompt.id),
+						role: "option",
+						"aria-selected": prompt.id === selectedId,
+						className,
+						children: content
+					}, prompt.id);
+				})
+			}),
+			matches.length === 0 && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground block px-2 py-3 text-center text-xs break-words",
+				children: query === "" ? "No saved prompts yet" : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					"Nothing matches “",
+					query,
+					"”"
+				] })
+			}),
+			selected && /* @__PURE__ */ jsxs("div", {
+				className: cn("bg-muted", "fade-in animate-in flex flex-col gap-2 rounded-xl p-2.5 duration-200"),
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs leading-relaxed break-words",
+					children: selected.body
+				}), selected.variables.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-1",
+					children: selected.variables.map((variable) => /* @__PURE__ */ jsx("span", {
+						className: cn("font-mono text-[11px] tracking-tight", "bg-background/70 text-muted-foreground rounded px-1.5 py-0.5"),
+						children: `{${variable}}`
+					}, variable))
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { PromptLibrary, prompt_library_exports };

package/dist/components/assistant-ui/elements/question-flow.d.ts

@@ -0,0 +1,24 @@
+import { OptionListOption } from "./option-list.js";
+import { ComponentProps } from "react";
+declare namespace question_flow_d_exports {
+  export { QuestionFlow, QuestionFlowProps, QuestionFlowStep };
+}
+export interface QuestionFlowStep {
+  id: string;
+  question: string;
+  description?: string | undefined;
+  options: readonly OptionListOption[];
+  selectionMode?: "single" | "multiple" | undefined;
+  minSelections?: number | undefined;
+  maxSelections?: number | undefined;
+}
+export interface QuestionFlowProps extends Omit<ComponentProps<"div">, "children" | "defaultValue" | "onSubmit"> {
+  steps: readonly QuestionFlowStep[];
+  defaultValue?: Readonly<Record<string, readonly string[]>> | undefined;
+  onComplete?: ((answers: Record<string, string[]>) => void | Promise<void>) | undefined;
+  completeLabel?: string | undefined;
+  choice?: Readonly<Record<string, readonly string[]>> | undefined;
+}
+export declare function QuestionFlow({ steps, defaultValue, onComplete, completeLabel, choice, className, ...props }: QuestionFlowProps): import("react").JSX.Element;
+//#endregion
+export { question_flow_d_exports };

package/dist/components/assistant-ui/elements/question-flow.js

@@ -0,0 +1,180 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { ghostButton, mono, paper } from "./surfaces.js";
+import { OptionList } from "./option-list.js";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/question-flow.tsx
+var question_flow_exports = /* @__PURE__ */ __exportAll({ QuestionFlow: () => QuestionFlow });
+function QuestionFlow({ steps, defaultValue, onComplete, completeLabel = "Submit", choice, className, ...props }) {
+	const [stepIndex, setStepIndex] = useState(0);
+	const [answers, setAnswers] = useState(() => {
+		const initial = {};
+		for (const [id, value] of Object.entries(defaultValue ?? {})) initial[id] = [...value];
+		return initial;
+	});
+	const [confirmedAnswers, setConfirmedAnswers] = useState();
+	const [isCompleting, setIsCompleting] = useState(false);
+	const questionPrefix = useId();
+	const optionListRef = useRef(null);
+	const currentIndex = Math.min(stepIndex, Math.max(0, steps.length - 1));
+	const currentStep = steps[currentIndex];
+	const previousStepId = useRef(currentStep?.id);
+	useLayoutEffect(() => {
+		if (previousStepId.current === currentStep?.id) return;
+		previousStepId.current = currentStep?.id;
+		optionListRef.current?.querySelector("button:not([disabled]):not([aria-disabled=\"true\"])")?.focus();
+	}, [currentStep?.id]);
+	const root = cn(paper, "flex w-full max-w-sm flex-col rounded-2xl p-2", className);
+	const completedChoice = choice ?? confirmedAnswers;
+	if (completedChoice !== void 0) return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-slot": "question-flow",
+		"data-state": "receipt",
+		className: cn(root, "gap-3"),
+		children: steps.flatMap((step) => {
+			const selected = completedChoice[step.id];
+			if (!selected?.length) return [];
+			const labels = step.options.filter((option) => selected.includes(option.id)).map((option) => option.label).join(", ");
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-0.5 px-2 py-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-xs leading-4",
+					children: step.question
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-foreground/80 text-[13.5px] leading-5 break-words",
+					children: labels
+				})]
+			}, step.id);
+		})
+	});
+	if (!onComplete) return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-slot": "question-flow",
+		"data-state": "open",
+		className: cn(root, "gap-5"),
+		children: steps.map((step) => {
+			const questionId = `${questionPrefix}-${step.id}`;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-0.5 px-2 pt-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						id: questionId,
+						className: "text-[13.5px] leading-5 font-medium",
+						children: step.question
+					}), step.description ? /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-xs leading-4",
+						children: step.description
+					}) : null]
+				}), /* @__PURE__ */ jsx(OptionList, {
+					"aria-labelledby": questionId,
+					options: step.options,
+					selectionMode: step.selectionMode,
+					className: "max-w-none border-0 bg-transparent p-0 dark:bg-transparent"
+				})]
+			}, step.id);
+		})
+	});
+	if (!currentStep) return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-slot": "question-flow",
+		"data-state": "open",
+		className: root
+	});
+	const questionId = `${questionPrefix}-${currentStep.id}`;
+	const currentAnswer = answers[currentStep.id];
+	const finalStep = currentIndex === steps.length - 1;
+	const confirm = (ids) => {
+		const nextAnswers = {
+			...answers,
+			[currentStep.id]: ids
+		};
+		if (!finalStep) {
+			setAnswers(nextAnswers);
+			setStepIndex(currentIndex + 1);
+			return;
+		}
+		const stepIds = new Set(steps.map((step) => step.id));
+		const completedAnswers = Object.fromEntries(Object.entries(nextAnswers).filter(([id]) => stepIds.has(id)));
+		setIsCompleting(true);
+		try {
+			return Promise.resolve(onComplete(completedAnswers)).then(() => {
+				setAnswers(nextAnswers);
+				setConfirmedAnswers(completedAnswers);
+			}, (error) => {
+				setIsCompleting(false);
+				throw error;
+			});
+		} catch (error) {
+			setIsCompleting(false);
+			return Promise.reject(error);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-slot": "question-flow",
+		"data-state": "open",
+		className: cn(root, "gap-3"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-3 px-2 pt-1",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-muted-foreground tabular-nums"),
+					children: [
+						currentIndex + 1,
+						" of ",
+						steps.length
+					]
+				}), currentIndex > 0 ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled: isCompleting,
+					onClick: () => setStepIndex(currentIndex - 1),
+					className: cn(ghostButton, "h-7 px-2.5 text-xs font-medium", isCompleting && "cursor-default opacity-40"),
+					children: "Back"
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "progressbar",
+				"aria-label": "Progress",
+				"aria-valuenow": currentIndex + 1,
+				"aria-valuemin": 1,
+				"aria-valuemax": steps.length,
+				"aria-valuetext": `Question ${currentIndex + 1} of ${steps.length}`,
+				className: "bg-foreground/[0.08] mx-2 h-[3px] overflow-hidden rounded-full",
+				children: /* @__PURE__ */ jsx("div", {
+					style: { width: `${(currentIndex + 1) / steps.length * 100}%` },
+					className: "bg-foreground/80 h-full transition-[width] duration-200 motion-reduce:transition-none"
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-0.5 px-2",
+				children: [/* @__PURE__ */ jsx("p", {
+					id: questionId,
+					className: "text-[13.5px] leading-5 font-medium",
+					children: currentStep.question
+				}), currentStep.description ? /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs leading-4",
+					children: currentStep.description
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: optionListRef,
+				children: /* @__PURE__ */ jsx(OptionList, {
+					"aria-labelledby": questionId,
+					options: currentStep.options,
+					selectionMode: currentStep.selectionMode,
+					defaultValue: currentAnswer,
+					minSelections: currentStep.minSelections,
+					maxSelections: currentStep.maxSelections,
+					onConfirm: confirm,
+					confirmLabel: finalStep ? completeLabel : "Next",
+					className: "max-w-none border-0 bg-transparent p-0 dark:bg-transparent"
+				}, currentStep.id)
+			})
+		]
+	});
+}
+//#endregion
+export { QuestionFlow, question_flow_exports };

package/dist/components/assistant-ui/elements/quota-banner.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps } from "react";
+declare namespace quota_banner_d_exports {
+  export { QuotaBanner };
+}
+export declare function QuotaBanner({ used, limit, unit, resetsIn, upgradeLabel, onUpgrade, className, ...props }: Omit<ComponentProps<"div">, "children" | "used" | "limit" | "unit" | "resetsIn" | "upgradeLabel" | "onUpgrade"> & {
+  used: number;
+  limit: number;
+  unit: string;
+  resetsIn: string;
+  upgradeLabel: string;
+  onUpgrade?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { quota_banner_d_exports };