@keboola/design 11.0.0 → 11.2.0

package/dist/AIKit-DiS0CVOW.js

@@ -0,0 +1,1320 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { Tooltip, TooltipProvider } from "./utils-D0c5VAyF.js";
+import { AlertCircle, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CirclePause, CircleX, FileText, Loader2, Maximize2, Minimize2, Play, Send, X, XCircle } from "./icons-Cek151jC.js";
+import { Button } from "./Button-6xBX0nNl.js";
+import { ClipboardButton } from "./ClipboardButton-ClcluT0C.js";
+import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-Cb3PGgh4.js";
+import { Truncated } from "./internal/components/Truncated.js";
+import { HoverCard } from "./HoverCard-WfDkLK1s.js";
+import { Command } from "./Command-C0aZfVTq.js";
+import { TextInput } from "./TextInput-CMuN1WfY.js";
+import { Checkbox } from "./Checkbox-GJ8-srt4.js";
+import { Badge } from "./Badge-Ch26CXoP.js";
+import { Textarea } from "./internal/blocks/Textarea.js";
+import { Table } from "./Table-CvYuTuNU.js";
+import { DiagramSkeleton } from "./DiagramSkeleton-lwBS2YBa.js";
+import { Avatar } from "./internal/components/Avatar.js";
+import { Progress } from "./internal/components/Progress.js";
+import { Slot } from "@radix-ui/react-slot";
+import { Suspense, isValidElement, lazy, useEffect, useId, useRef, useState } from "react";
+import { cva } from "class-variance-authority";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import TextareaAutosize from "react-textarea-autosize";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+//#region src/blocks/AIKit/CollapsibleStepHeader.tsx
+const variantClasses = {
+	success: "tw:text-secondary-500 tw:focus-visible:outline-ring tw:not-disabled:hover:text-secondary-600",
+	error: "tw:text-error-500 tw:focus-visible:outline-error-500 tw:not-disabled:hover:text-error-600",
+	processing: "tw:text-secondary-500 tw:focus-visible:outline-ring tw:not-disabled:hover:text-secondary-600",
+	dismissed: "tw:text-neutral-700 tw:focus-visible:outline-neutral-500 tw:not-disabled:hover:text-neutral-800"
+};
+const iconClasses = "tw:size-4 tw:shrink-0 tw:basis-4";
+const renderVariantIcon$1 = (variant) => {
+	if (variant === "processing") return /* @__PURE__ */ jsx(Loader2, { className: cn(iconClasses, "tw:animate-spin") });
+	if (variant === "error") return /* @__PURE__ */ jsx(XCircle, { className: iconClasses });
+	if (variant === "dismissed") return /* @__PURE__ */ jsx(XCircle, { className: cn(iconClasses, "tw:text-neutral-500") });
+	return /* @__PURE__ */ jsx(CircleCheck, { className: iconClasses });
+};
+const CollapsibleStepHeader = ({ isExpanded, onToggle, label, variant = "success" }) => {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-expanded": isExpanded,
+		onClick: onToggle,
+		className: cn("tw:flex tw:w-fit tw:items-start tw:gap-2 tw:text-left tw:text-sm tw:font-medium tw:italic tw:transition-colors tw:focus-visible:outline tw:focus-visible:outline-2 tw:focus-visible:outline-offset-2 tw:disabled:opacity-40", variantClasses[variant]),
+		children: [renderVariantIcon$1(variant), /* @__PURE__ */ jsxs("span", {
+			className: "tw:min-w-0",
+			children: [label, /* @__PURE__ */ jsxs("span", {
+				className: "tw:whitespace-nowrap",
+				children: ["⁠", /* @__PURE__ */ jsx(ChevronDown, { className: cn("tw:ml-2 tw:inline-block tw:size-4 tw:align-middle tw:transition-transform", isExpanded && "tw:rotate-180") })]
+			})]
+		})]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/InlineStepDetail.tsx
+const InlineStepDetail = ({ children }) => /* @__PURE__ */ jsx("div", {
+	className: "tw:ml-2.5 tw:whitespace-pre-wrap tw:border-l tw:border-neutral-200 tw:pl-3 tw:text-xs tw:text-neutral-400",
+	children
+});
+//#endregion
+//#region src/blocks/AIKit/InlineStepLabel.tsx
+const renderVariantIcon = (variant) => {
+	if (variant === "processing") return /* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:animate-spin tw:text-neutral-200" });
+	if (variant === "error") return /* @__PURE__ */ jsx(XCircle, { className: "tw:size-4 tw:text-error-500" });
+	if (variant === "dismissed") return /* @__PURE__ */ jsx(XCircle, { className: "tw:size-4 tw:text-neutral-200" });
+	return /* @__PURE__ */ jsx(CircleCheck, { className: "tw:size-4 tw:text-neutral-200" });
+};
+const InlineStepLabel = ({ variant, children }) => /* @__PURE__ */ jsxs("div", {
+	className: "tw:flex tw:min-w-0 tw:items-center tw:gap-1",
+	children: [/* @__PURE__ */ jsx("div", {
+		className: "tw:flex tw:size-5 tw:shrink-0 tw:items-center tw:justify-center",
+		children: renderVariantIcon(variant)
+	}), /* @__PURE__ */ jsx("div", {
+		className: "tw:flex tw:min-w-0 tw:flex-wrap tw:items-center tw:gap-x-1.5 tw:gap-y-1 tw:text-sm tw:font-medium tw:italic tw:text-neutral-800",
+		children
+	})]
+});
+//#endregion
+//#region src/blocks/AIKit/AnswerSummary.tsx
+const SECTION_LABELS = {
+	success: "Answered questions",
+	dismissed: "Dismissed questions"
+};
+const AnswerSummary = ({ items, variant = "success", noAnswerLabel = "No answer" }) => {
+	const [isExpanded, setIsExpanded] = useState(false);
+	const toggle = () => setIsExpanded((prev) => !prev);
+	const count = items.length;
+	const [firstItem] = items;
+	const label = count === 1 && firstItem ? firstItem.question : `${count} questions`;
+	return /* @__PURE__ */ jsxs("section", {
+		className: "tw:mt-4 tw:flex tw:flex-col tw:gap-4",
+		"aria-label": SECTION_LABELS[variant],
+		children: [/* @__PURE__ */ jsx(CollapsibleStepHeader, {
+			isExpanded,
+			onToggle: toggle,
+			variant,
+			label
+		}), isExpanded && /* @__PURE__ */ jsx("div", {
+			className: "tw:flex tw:flex-col tw:gap-4 tw:pl-5",
+			children: items.map(({ question, answer }, index) => /* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:flex-col tw:gap-1",
+				children: [/* @__PURE__ */ jsx(InlineStepLabel, {
+					variant,
+					children: question
+				}), /* @__PURE__ */ jsx(InlineStepDetail, { children: answer && answer.length > 0 ? answer : noAnswerLabel })]
+			}, `${index}-${question}`))
+		})]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/Markdown.tsx
+const MermaidDiagram = lazy(() => import("@keboola/design/mermaid").then((module) => ({ default: module.MermaidDiagram }), (error) => {
+	console.error("[AIKit] failed to load the MermaidDiagram chunk", error);
+	return { default: ({ code }) => /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: code }) }) };
+}));
+const proseClass = "tw:prose tw:prose-sm tw:max-w-none tw:break-words tw:[&_pre]:bg-neutral-50 tw:[&_pre]:text-neutral-800 tw:[&_:not(pre)>code]:bg-neutral-50 tw:[&_:not(pre)>code]:rounded tw:[&_:not(pre)>code]:px-1 tw:[&_:not(pre)>code]:py-0.5 tw:[&_:not(pre)>code]:before:content-none tw:[&_:not(pre)>code]:after:content-none";
+const getText = (node) => {
+	if (typeof node === "string") return node;
+	if (typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map(getText).join("");
+	if (isValidElement(node) && typeof node.props === "object" && node.props !== null && "children" in node.props) return getText(node.props.children);
+	return "";
+};
+const getLanguage = (element) => {
+	if (!isValidElement(element)) return void 0;
+	const { props } = element;
+	if (typeof props !== "object" || props === null || !("className" in props)) return void 0;
+	if (typeof props.className !== "string") return void 0;
+	return props.className.match(/language-(\S+)/)?.[1];
+};
+const components = {
+	pre({ children, ...props }) {
+		const child = Array.isArray(children) ? children[0] : children;
+		if (getLanguage(child) === "mermaid") {
+			const code = getText(child).replace(/\n$/, "");
+			if (!code.trim()) return null;
+			return /* @__PURE__ */ jsx(Suspense, {
+				fallback: /* @__PURE__ */ jsx(DiagramSkeleton, {}),
+				children: /* @__PURE__ */ jsx(MermaidDiagram, { code })
+			});
+		}
+		const { node: _node, ...rest } = props;
+		const code = getText(child).replace(/\n$/, "");
+		return /* @__PURE__ */ jsxs("div", {
+			className: "tw:group tw:relative",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "tw:absolute tw:right-2 tw:top-2 tw:opacity-0 tw:transition-opacity tw:group-focus-within:opacity-100 tw:group-hover:opacity-100",
+				children: /* @__PURE__ */ jsx(ClipboardButton, {
+					text: code,
+					tooltip: "Copy",
+					size: "icon-xs",
+					variant: "outline"
+				})
+			}), /* @__PURE__ */ jsx("pre", {
+				...rest,
+				children
+			})]
+		});
+	},
+	a({ children, href, ...props }) {
+		const { node: _node, ...rest } = props;
+		const isExternal = !!href && /^https?:\/\//.test(href);
+		return /* @__PURE__ */ jsx("a", {
+			href,
+			...isExternal ? {
+				target: "_blank",
+				rel: "noopener noreferrer"
+			} : null,
+			...rest,
+			children
+		});
+	},
+	table({ className, ...props }) {
+		const { node: _node, ...rest } = props;
+		return /* @__PURE__ */ jsx("div", {
+			className: "tw:not-prose tw:my-4",
+			children: /* @__PURE__ */ jsx(Table, {
+				bordered: true,
+				className: cn("tw:!mb-0", className),
+				...rest
+			})
+		});
+	},
+	thead(props) {
+		const { node: _node, ...rest } = props;
+		return /* @__PURE__ */ jsx(Table.Header, { ...rest });
+	},
+	tbody(props) {
+		const { node: _node, ...rest } = props;
+		return /* @__PURE__ */ jsx(Table.Body, { ...rest });
+	},
+	tr(props) {
+		const { node: _node, ...rest } = props;
+		return /* @__PURE__ */ jsx(Table.Row, { ...rest });
+	},
+	th(props) {
+		const { node: _node, ...rest } = props;
+		return /* @__PURE__ */ jsx(Table.Head, { ...rest });
+	},
+	td(props) {
+		const { node: _node, ...rest } = props;
+		return /* @__PURE__ */ jsx(Table.Cell, { ...rest });
+	}
+};
+/**
+* Read-only GFM Markdown renderer with design-token typography. Pair with
+* `MessageBubble` to render an assistant message body. Code blocks expose a
+* copy button, so mount a `TooltipProvider` once at the app root.
+*/
+const Markdown = ({ children, className }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-prose": true,
+		className: cn(proseClass, className),
+		children: /* @__PURE__ */ jsx(ReactMarkdown, {
+			remarkPlugins: [remarkGfm],
+			components,
+			children
+		})
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/MessageBubble.tsx
+const containerClasses = cva([
+	"tw:flex",
+	"tw:max-w-full",
+	"tw:gap-4"
+], {
+	variants: { variant: {
+		user: ["tw:justify-self-end", "tw:flex-row-reverse"],
+		assistant: [
+			"tw:justify-self-start",
+			"tw:w-full",
+			"tw:gap-3"
+		]
+	} },
+	defaultVariants: { variant: "assistant" }
+});
+const contentClasses = cva([
+	"tw:flex",
+	"tw:flex-col",
+	"tw:gap-4",
+	"tw:break-words",
+	"tw:leading-relaxed",
+	"tw:text-foreground",
+	"tw:[&_[data-prose]]:text-foreground"
+], {
+	variants: { variant: {
+		assistant: [
+			"tw:flex-1",
+			"tw:w-full",
+			"tw:min-w-0",
+			"tw:[&>*]:min-w-0"
+		],
+		user: [
+			"tw:max-w-screen-sm",
+			"tw:w-fit",
+			"tw:bg-muted",
+			"tw:p-3",
+			"tw:rounded-2xl",
+			"tw:ml-6",
+			"tw:overflow-hidden",
+			"tw:break-anywhere"
+		]
+	} },
+	defaultVariants: { variant: "assistant" }
+});
+const MessageBubble = ({ variant, children, user, actions, createdAt }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: containerClasses({ variant }),
+		"data-testid": `chat-message-${variant}`,
+		children: [variant === "user" && /* @__PURE__ */ jsx(Avatar, {
+			user,
+			size: 30,
+			title: createdAt
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: contentClasses({ variant }),
+				children
+			}), actions]
+		})]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/PlanApproval.tsx
+const defaultStepCountLabel = (count) => `${count} step${count === 1 ? "" : "s"}`;
+const StatusPill = ({ status, pendingLabel, approvedLabel, dismissedLabel, changesRequestedLabel }) => {
+	if (status === "approved") return /* @__PURE__ */ jsx(Badge, {
+		color: "green",
+		variant: "pill",
+		className: "tw:normal-case tw:tracking-normal",
+		children: approvedLabel
+	});
+	if (status === "dismissed") return /* @__PURE__ */ jsx(Badge, {
+		color: "gray",
+		variant: "pill",
+		className: "tw:normal-case tw:tracking-normal",
+		children: dismissedLabel
+	});
+	if (status === "changes-requested") return /* @__PURE__ */ jsx(Badge, {
+		color: "blue",
+		variant: "pill",
+		className: "tw:normal-case tw:tracking-normal",
+		children: changesRequestedLabel
+	});
+	return /* @__PURE__ */ jsx(Badge, {
+		color: "green",
+		variant: "pill",
+		className: "tw:normal-case tw:tracking-normal",
+		children: pendingLabel
+	});
+};
+const ExpandToggle = ({ isExpanded, onToggle, showMoreLabel, showLessLabel }) => /* @__PURE__ */ jsxs("button", {
+	type: "button",
+	onClick: onToggle,
+	"aria-expanded": isExpanded,
+	className: "tw:inline-flex tw:cursor-pointer tw:items-center tw:gap-1 tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:text-secondary-500 tw:hover:text-secondary-600 tw:focus-visible:outline tw:focus-visible:outline-2 tw:focus-visible:outline-offset-2 tw:focus-visible:outline-ring tailwindcss-preflight",
+	children: [/* @__PURE__ */ jsx("span", { children: isExpanded ? showLessLabel : showMoreLabel }), /* @__PURE__ */ jsx(ChevronDown, { className: cn("tw:size-5 tw:transition-transform", isExpanded && "tw:rotate-180") })]
+});
+const ChangeRequestForm = ({ value, onValueChange, onSubmit, onKeyDown, placeholder, submitLabel, formLabel, canSubmit, isSubmitting }) => /* @__PURE__ */ jsx("form", {
+	onSubmit,
+	className: "tw:border-0 tw:border-t tw:border-solid tw:border-neutral-100 tw:bg-white tw:px-4 tw:py-3",
+	"aria-label": formLabel,
+	children: /* @__PURE__ */ jsxs("div", {
+		className: "tw:relative",
+		children: [/* @__PURE__ */ jsx(Textarea, {
+			value,
+			onValueChange,
+			placeholder,
+			maxRows: 4,
+			autoFocus: true,
+			onKeyDown,
+			containerClassName: "tw:pr-12",
+			disabled: isSubmitting,
+			"aria-label": placeholder,
+			"data-testid": "plan-change-request-input"
+		}), /* @__PURE__ */ jsx(Button, {
+			type: "submit",
+			variant: "invisible",
+			size: "icon-sm",
+			"aria-label": submitLabel,
+			disabled: !canSubmit,
+			className: "tw:absolute tw:right-2 tw:top-1/2 tw:-translate-y-1/2 tw:[&_svg]:text-secondary-500 tw:not-disabled:hover:[&_svg]:text-secondary-600",
+			"data-testid": "plan-change-request-submit",
+			children: /* @__PURE__ */ jsx(Send, { className: "tw:size-4" })
+		})]
+	})
+});
+const PlanActions = ({ isRequestingChanges, isSubmitting, onApprove, onRequestChanges, onOpenRequestChanges, onCancelChangeRequest, approveLabel, requestChangesLabel, cancelLabel, approveTooltip }) => /* @__PURE__ */ jsxs("div", {
+	className: "tw:flex tw:shrink-0 tw:items-center tw:gap-2",
+	children: [isRequestingChanges ? /* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		size: "small",
+		onClick: onCancelChangeRequest,
+		disabled: isSubmitting,
+		"data-testid": "plan-cancel-button",
+		className: "tw:shrink-0 tw:whitespace-nowrap",
+		children: cancelLabel
+	}) : onRequestChanges && /* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		size: "small",
+		onClick: onOpenRequestChanges,
+		disabled: isSubmitting,
+		"data-testid": "plan-request-changes-button",
+		className: "tw:shrink-0 tw:whitespace-nowrap",
+		children: requestChangesLabel
+	}), onApprove && (approveTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+		tooltip: approveTooltip,
+		placement: "top",
+		triggerAsChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			size: "small",
+			onClick: onApprove,
+			disabled: isSubmitting || isRequestingChanges,
+			"data-testid": "plan-approve-button",
+			className: "tw:shrink-0 tw:whitespace-nowrap",
+			children: approveLabel
+		})
+	}) : /* @__PURE__ */ jsx(Button, {
+		variant: "primary",
+		size: "small",
+		onClick: onApprove,
+		disabled: isSubmitting || isRequestingChanges,
+		"data-testid": "plan-approve-button",
+		className: "tw:shrink-0 tw:whitespace-nowrap",
+		children: approveLabel
+	}))]
+});
+const PlanApproval = ({ status, title, summary, stepCount, planBody, defaultExpanded = false, isExpanded: isExpandedProp, onExpandToggle, onApprove, onRequestChanges, onClose, isSubmitting = false, approveTooltip, pendingPillLabel = "Ready for approval", approvedPillLabel = "Approved", dismissedPillLabel = "Dismissed", changesRequestedPillLabel = "Changes Requested", approveLabel = "Approve", requestChangesLabel = "Request Changes", cancelLabel = "Cancel", showMoreLabel = "Show more", showLessLabel = "Show less", closeLabel = "Dismiss plan", fullScreenLabel = "View full screen", exitFullScreenLabel = "Exit full screen", changeRequestPlaceholder = "What would you like to change in the plan?", changeRequestSubmitLabel = "Send change request", stepCountLabel = defaultStepCountLabel, className }) => {
+	const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
+	const isExpanded = isExpandedProp ?? uncontrolledExpanded;
+	const [isRequestingChanges, setIsRequestingChanges] = useState(false);
+	const [changeRequest, setChangeRequest] = useState("");
+	const [isFullScreen, setIsFullScreen] = useState(false);
+	const isPending = status === "pending";
+	const showActions = isPending && (onApprove || onRequestChanges);
+	const showClose = isPending && Boolean(onClose);
+	const canShowPlanBody = planBody != null;
+	const trimmedChangeRequest = changeRequest.trim();
+	const canSubmitChangeRequest = trimmedChangeRequest.length > 0 && !isSubmitting;
+	const toggleExpanded = () => {
+		const next = !isExpanded;
+		if (isExpandedProp === void 0) setUncontrolledExpanded(next);
+		onExpandToggle?.(next);
+	};
+	const handleOpenRequestChanges = () => {
+		setIsRequestingChanges(true);
+		if (!isExpanded) toggleExpanded();
+	};
+	const handleCancelChangeRequest = () => {
+		setIsRequestingChanges(false);
+		setChangeRequest("");
+	};
+	const handleSubmitChangeRequest = (event) => {
+		event?.preventDefault();
+		if (!canSubmitChangeRequest) return;
+		onRequestChanges?.(trimmedChangeRequest);
+	};
+	const handleTextareaKeyDown = (event) => {
+		if (event.key === "Enter" && !event.shiftKey) {
+			event.preventDefault();
+			handleSubmitChangeRequest();
+		}
+	};
+	const showChangeRequestForm = isRequestingChanges && isPending;
+	const changeRequestForm = /* @__PURE__ */ jsx(ChangeRequestForm, {
+		value: changeRequest,
+		onValueChange: setChangeRequest,
+		onSubmit: handleSubmitChangeRequest,
+		onKeyDown: handleTextareaKeyDown,
+		placeholder: changeRequestPlaceholder,
+		submitLabel: changeRequestSubmitLabel,
+		formLabel: requestChangesLabel,
+		canSubmit: canSubmitChangeRequest,
+		isSubmitting
+	});
+	const planActions = /* @__PURE__ */ jsx(PlanActions, {
+		isRequestingChanges,
+		isSubmitting,
+		onApprove,
+		onRequestChanges,
+		onOpenRequestChanges: handleOpenRequestChanges,
+		onCancelChangeRequest: handleCancelChangeRequest,
+		approveLabel,
+		requestChangesLabel,
+		cancelLabel,
+		approveTooltip
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("section", {
+		"aria-label": title,
+		className: cn("tw:flex tw:w-full tw:max-w-[800px] tw:flex-col tw:overflow-hidden tw:rounded-xl tw:border tw:border-solid tw:border-border tw:bg-neutral-50", className),
+		"data-testid": "plan-approval-root",
+		"data-plan-status": status,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:items-start tw:gap-2 tw:pl-4 tw:pr-2 tw:pt-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-2 tw:pb-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "tw:flex tw:items-center tw:gap-3",
+						children: [/* @__PURE__ */ jsx(StatusPill, {
+							status,
+							pendingLabel: pendingPillLabel,
+							approvedLabel: approvedPillLabel,
+							dismissedLabel: dismissedPillLabel,
+							changesRequestedLabel: changesRequestedPillLabel
+						}), stepCount != null && stepCount > 0 && /* @__PURE__ */ jsx("span", {
+							className: "tw:text-xs tw:leading-4 tw:text-neutral-500",
+							children: stepCountLabel(stepCount)
+						})]
+					}), /* @__PURE__ */ jsx("p", {
+						className: "tw:m-0 tw:text-base tw:font-semibold tw:leading-6 tw:text-neutral-800",
+						children: title
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "tw:flex tw:items-center tw:gap-2",
+					children: [canShowPlanBody && !isFullScreen && /* @__PURE__ */ jsx(Tooltip, {
+						tooltip: fullScreenLabel,
+						placement: "top",
+						triggerAsChild: true,
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "icon-sm",
+							"aria-label": fullScreenLabel,
+							onClick: () => setIsFullScreen(true),
+							"data-testid": "plan-fullscreen-button",
+							children: /* @__PURE__ */ jsx(Maximize2, { className: "tw:size-4" })
+						})
+					}), showClose && !isFullScreen && /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "icon-sm",
+						"aria-label": closeLabel,
+						onClick: onClose,
+						disabled: isSubmitting,
+						"data-testid": "plan-close-button",
+						children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
+					})]
+				})]
+			}),
+			summary != null && /* @__PURE__ */ jsx("div", {
+				className: cn("tw:whitespace-pre-wrap tw:border-0 tw:border-t tw:border-solid tw:border-neutral-100 tw:px-4 tw:pt-4 tw:text-sm tw:text-neutral-700", isExpanded && canShowPlanBody ? "tw:pb-4" : "tw:pb-2"),
+				children: summary
+			}),
+			isExpanded && canShowPlanBody && /* @__PURE__ */ jsx("div", {
+				className: "tw:max-h-[400px] tw:overflow-y-auto tw:border-0 tw:border-t tw:border-solid tw:border-neutral-100 tw:bg-white tw:p-4 tw:text-sm tw:text-neutral-700",
+				children: planBody
+			}),
+			!isFullScreen && /* @__PURE__ */ jsxs(Fragment$1, { children: [showChangeRequestForm && changeRequestForm, /* @__PURE__ */ jsxs("div", {
+				className: cn("tw:flex tw:items-center tw:gap-2 tw:overflow-x-auto tw:border-0 tw:border-t tw:border-solid tw:border-neutral-100 tw:bg-white tw:px-4 tw:py-3", canShowPlanBody ? "tw:justify-between" : "tw:justify-end"),
+				children: [canShowPlanBody && /* @__PURE__ */ jsx("div", {
+					className: "tw:shrink-0",
+					children: /* @__PURE__ */ jsx(ExpandToggle, {
+						isExpanded,
+						onToggle: toggleExpanded,
+						showMoreLabel,
+						showLessLabel
+					})
+				}), showActions && planActions]
+			})] })
+		]
+	}), canShowPlanBody && isFullScreen && /* @__PURE__ */ jsxs(FullScreenModal, {
+		onEscapeKeyDown: () => setIsFullScreen(false),
+		children: [
+			/* @__PURE__ */ jsx(FullScreenModalHeader, {
+				title: /* @__PURE__ */ jsxs("div", {
+					className: "tw:flex tw:min-w-0 tw:items-center tw:gap-3",
+					children: [/* @__PURE__ */ jsx(StatusPill, {
+						status,
+						pendingLabel: pendingPillLabel,
+						approvedLabel: approvedPillLabel,
+						dismissedLabel: dismissedPillLabel,
+						changesRequestedLabel: changesRequestedPillLabel
+					}), /* @__PURE__ */ jsx("span", {
+						className: "tw:truncate",
+						children: title
+					})]
+				}),
+				onClose: () => setIsFullScreen(false),
+				showPreviousTitle: false,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "tw:flex tw:items-center tw:gap-2",
+					children: [showClose && /* @__PURE__ */ jsx(Tooltip, {
+						tooltip: closeLabel,
+						placement: "bottom",
+						triggerAsChild: true,
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "icon",
+							"aria-label": closeLabel,
+							onClick: onClose,
+							disabled: isSubmitting,
+							"data-testid": "plan-close-button",
+							children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
+						})
+					}), /* @__PURE__ */ jsx(Tooltip, {
+						tooltip: exitFullScreenLabel,
+						placement: "bottom",
+						triggerAsChild: true,
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "icon",
+							"aria-label": exitFullScreenLabel,
+							onClick: () => setIsFullScreen(false),
+							"data-testid": "plan-exit-fullscreen-button",
+							children: /* @__PURE__ */ jsx(Minimize2, { className: "tw:size-4" })
+						})
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(FullScreenModalBody, {
+				className: "tw:bg-white tw:px-6 tw:py-4",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "tw:mx-auto tw:w-full tw:max-w-[800px] tw:text-sm tw:text-neutral-700",
+					children: planBody
+				})
+			}),
+			(showChangeRequestForm || showActions) && /* @__PURE__ */ jsx("div", {
+				className: "tw:shrink-0 tw:border-0 tw:border-t tw:border-solid tw:border-neutral-100 tw:bg-white",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "tw:mx-auto tw:w-full tw:max-w-[800px]",
+					children: [showChangeRequestForm && changeRequestForm, showActions && /* @__PURE__ */ jsx("div", {
+						className: "tw:flex tw:justify-end tw:px-4 tw:py-3",
+						children: planActions
+					})]
+				})
+			})
+		]
+	})] });
+};
+//#endregion
+//#region src/blocks/AIKit/PlanRewritingIndicator.tsx
+const PlanRewritingIndicator = ({ label = "Rewriting the plan..." }) => /* @__PURE__ */ jsxs("div", {
+	className: "tw:flex tw:items-center tw:gap-2",
+	role: "status",
+	"data-testid": "plan-rewriting-indicator",
+	children: [/* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:animate-spin tw:text-secondary-500" }), /* @__PURE__ */ jsx("span", {
+		className: "tw:text-sm tw:italic tw:text-secondary-500",
+		children: label
+	})]
+});
+//#endregion
+//#region src/blocks/AIKit/PromptInputAction.tsx
+const PromptInputAction = ({ ref, onMouseDown, ...rest }) => {
+	const handleOnMouseDown = (event) => {
+		event.stopPropagation();
+		onMouseDown?.(event);
+	};
+	return /* @__PURE__ */ jsx(Slot, {
+		...rest,
+		ref,
+		onMouseDown: handleOnMouseDown
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/PromptInputCommands.tsx
+const PromptInputCommands = ({ items, open, onSelect, filterValue, children }) => {
+	const filtered = filterValue ? items.filter((item) => item.label.toLowerCase().includes(filterValue.toLowerCase()) || item.value.toLowerCase().includes(filterValue.toLowerCase())) : items;
+	const groups = filtered.reduce((acc, item) => {
+		const group = acc[item.group] ?? [];
+		group.push(item);
+		acc[item.group] = group;
+		return acc;
+	}, {});
+	return /* @__PURE__ */ jsxs(Command, {
+		loop: true,
+		className: "tw:relative",
+		shouldFilter: false,
+		children: [open && /* @__PURE__ */ jsx("div", {
+			className: cn("tw:absolute tw:bottom-full tw:left-0 tw:right-0 tw:z-50 tw:mb-1", "tw:rounded-md tw:border tw:border-border tw:bg-popover tw:text-popover-foreground tw:shadow-lg"),
+			children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", {
+				className: "tw:px-4 tw:py-3 tw:text-center tw:text-sm tw:text-muted-foreground",
+				children: "No commands found"
+			}) : /* @__PURE__ */ jsx(Command.List, {
+				viewPortClassName: "tw:max-h-80",
+				children: Object.entries(groups).map(([groupName, groupItems]) => /* @__PURE__ */ jsx(Command.Group, {
+					heading: groupName,
+					children: groupItems.map((item) => /* @__PURE__ */ jsx(Command.Item, {
+						value: item.value,
+						icon: item.icon,
+						onSelect: () => onSelect(item.value),
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "tw:flex tw:min-w-0 tw:flex-1 tw:flex-col",
+							children: [/* @__PURE__ */ jsx("span", { children: item.label }), item.description && /* @__PURE__ */ jsx(Truncated, {
+								text: item.description,
+								twoLines: true,
+								className: "tw:text-xs tw:text-muted-foreground"
+							})]
+						})
+					}, item.value))
+				}, groupName))
+			})
+		}), children]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/PromptInputSubmit.tsx
+const ARIA_LABEL_BY_STATUS = {
+	ready: "Send message",
+	streaming: "Stop",
+	interrupted: "Continue",
+	submitted: "Sending…"
+};
+const PromptInputSubmit = ({ ref, disabled, status = "ready" }) => {
+	const icon = (() => {
+		if (status === "streaming") return /* @__PURE__ */ jsx(CirclePause, { className: "tw:size-4" });
+		if (status === "interrupted") return /* @__PURE__ */ jsx(Play, { className: "tw:size-4" });
+		return /* @__PURE__ */ jsx(Send, { className: "tw:size-4" });
+	})();
+	const getTooltipText = () => {
+		if (status === "streaming") return "Stop";
+		if (status === "interrupted") return "Continue";
+	};
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(PromptInputAction, { children: /* @__PURE__ */ jsx(Button, {
+			ref,
+			type: "submit",
+			disabled,
+			"aria-label": ARIA_LABEL_BY_STATUS[status],
+			size: "icon-sm",
+			variant: "invisible",
+			isLoading: status === "submitted",
+			className: "tw:ml-auto tw:flex tw:items-center tw:rounded-lg tw:[&_svg]:text-secondary-500 tw:not-disabled:hover:[&_svg]:text-secondary-600",
+			children: status !== "submitted" && icon
+		}) })
+	}), getTooltipText() && /* @__PURE__ */ jsx(Tooltip.Content, {
+		placement: "top",
+		variant: "action",
+		children: getTooltipText()
+	})] });
+};
+//#endregion
+//#region src/blocks/AIKit/PromptInput.tsx
+const CMDK_HIJACKED_KEYS = /* @__PURE__ */ new Set([
+	"ArrowUp",
+	"ArrowDown",
+	"Home",
+	"End",
+	"Enter"
+]);
+const isCmdkNavigation = (event) => event.key !== "Enter" || !(event.metaKey || event.ctrlKey || event.altKey);
+const promptInputVariants = cva([
+	"tailwindcss-preflight",
+	"tw:relative",
+	"tw:flex",
+	"tw:gap-2",
+	"tw:justify-center",
+	"tw:border",
+	"tw:border-2",
+	"tw:border-transparent",
+	"tw:rounded-[14px]",
+	"tw:bg-gradient-to-bl",
+	"tw:from-[#61E4FF]",
+	"tw:via-[#1F8FFF]",
+	"tw:to-[#7C5CFF]",
+	"tw:bg-origin-border",
+	"tw:shadow-[inset_0_100vw_rgb(var(--card))]",
+	"tw:has-[textarea:focus]:ring-4",
+	"tw:has-[textarea:focus]:ring-ring/30",
+	"tw:cursor-text",
+	"tw:px-2"
+], {
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: [
+			"tw:flex-col",
+			"tw:pt-3",
+			"tw:pb-2"
+		],
+		inline: [
+			"tw:flex-row",
+			"tw:py-3",
+			"tw:items-center"
+		]
+	} }
+});
+const wrapperVariants = cva(null, {
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: "tw:rounded-[14px]",
+		inline: ""
+	} }
+});
+const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, disabled, disableSubmit, value = "", onValueChange, status = "ready", maxRows = 6, minRows, commands, ...textareaProps }) => {
+	const defaultMinRows = variant === "inline" ? 1 : 2;
+	const isDisabled = (disabled || disableSubmit || !value.trim()) && status !== "streaming" && status !== "interrupted";
+	const textareaId = useId();
+	const textareaRef = useRef(null);
+	const [dismissedValue, setDismissedValue] = useState(null);
+	if (dismissedValue !== null && value !== dismissedValue) setDismissedValue(null);
+	const hasCommands = !!commands && commands.length > 0;
+	const valueLooksLikeSlashCommand = value.startsWith("/") && !/\s/.test(value);
+	const commandsOpen = hasCommands && valueLooksLikeSlashCommand && value !== dismissedValue;
+	const slashFilter = commandsOpen ? value.slice(1) : "";
+	const handleSubmit = () => {
+		if (isDisabled) return;
+		if (status === "streaming") onAbort?.();
+		if (status === "interrupted") onContinue?.();
+		if (status === "ready") onSend?.(value);
+	};
+	const handleOnSubmit = (event) => {
+		event.preventDefault();
+		handleSubmit();
+	};
+	const handleOnChange = (event) => {
+		onValueChange?.(event.target.value);
+	};
+	const handleCommandSelect = (commandValue) => {
+		onValueChange?.(commandValue + " ");
+		textareaRef.current?.focus();
+	};
+	const handleOnKeyDown = (event) => {
+		if (commandsOpen) {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				setDismissedValue(value);
+				return;
+			}
+			if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Enter") return;
+		} else if (hasCommands && CMDK_HIJACKED_KEYS.has(event.key) && isCmdkNavigation(event)) event.stopPropagation();
+		if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
+			event.preventDefault();
+			if (status !== "streaming") handleSubmit();
+		}
+	};
+	const handleOnMouseDown = (event) => {
+		if (event.target === textareaRef.current) return;
+		event.preventDefault();
+		textareaRef.current?.focus();
+	};
+	const formEl = /* @__PURE__ */ jsx("div", {
+		className: wrapperVariants({ variant }),
+		children: /* @__PURE__ */ jsxs("form", {
+			"data-testid": "prompt-input",
+			"data-status": status,
+			onMouseDown: handleOnMouseDown,
+			onSubmit: handleOnSubmit,
+			className: cn(promptInputVariants({ variant }), disabled && "tw:bg-none tw:border-border tw:shadow-[inset_0_100vw_rgb(var(--muted))] tw:cursor-default"),
+			children: [
+				prefix && /* @__PURE__ */ jsx("div", {
+					className: "tw:flex tw:items-center",
+					children: prefix
+				}),
+				/* @__PURE__ */ jsx("label", {
+					htmlFor: textareaId,
+					className: "tw:sr-only",
+					children: "Prompt Input"
+				}),
+				/* @__PURE__ */ jsx(TextareaAutosize, {
+					...textareaProps,
+					disabled,
+					minRows: minRows ?? defaultMinRows,
+					maxRows,
+					id: textareaId,
+					ref: textareaRef,
+					value,
+					onChange: handleOnChange,
+					onKeyDown: handleOnKeyDown,
+					className: cn("tw:resize-none", "tw:outline-hidden", "tw:w-full", "tw:px-2", "tw:bg-transparent", disabled ? "tw:text-muted-foreground" : "tw:text-foreground", "tw:text-sm", "tw:font-sans", "tw:transition-[width]", "tw:delay-75", "tw:ease-linear", "tw:overflow-auto")
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: cn("tw:flex tw:items-center tw:gap-4", variant === "inline" ? "tw:items-end" : "tw:items-center"),
+					children: [suffix, /* @__PURE__ */ jsx(PromptInputSubmit, {
+						disabled: isDisabled,
+						status
+					})]
+				})
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: hasCommands ? /* @__PURE__ */ jsx(PromptInputCommands, {
+		items: commands ?? [],
+		open: commandsOpen,
+		onSelect: handleCommandSelect,
+		filterValue: slashFilter,
+		children: formEl
+	}) : formEl });
+};
+PromptInput.Action = PromptInputAction;
+//#endregion
+//#region src/blocks/AIKit/Question.tsx
+const handleKeyDown = (callback) => (e) => {
+	if (e.key === "Enter" || e.key === " ") {
+		e.preventDefault();
+		callback();
+	}
+};
+const Question = ({ question, header, options, multiSelect = true, selectedOptionIds = [], onSelectionChange, customAnswer = "", onCustomAnswerChange, onCustomAnswerConfirm, showCustomAnswer = true, customAnswerPlaceholder = "Type your answer…", showSkip = true, onSkip, onClose, onNext, submitTooltip, onPrevious, currentStep, totalSteps, renderPreview, className }) => {
+	const [isCustomExpanded, setIsCustomExpanded] = useState(false);
+	const isCustomSelected = isCustomExpanded || customAnswer.length > 0;
+	const hasSteps = currentStep != null && totalSteps != null;
+	const progressValue = hasSteps ? currentStep / totalSteps * 100 : 0;
+	const isFirstStep = currentStep === 1;
+	const isLastStep = hasSteps && currentStep === totalSteps;
+	const handleOptionToggle = (optionId) => {
+		if (multiSelect) {
+			const nextIds = selectedOptionIds.includes(optionId) ? selectedOptionIds.filter((id) => id !== optionId) : [...selectedOptionIds, optionId];
+			onSelectionChange?.(nextIds);
+		} else {
+			setIsCustomExpanded(false);
+			onCustomAnswerChange?.("");
+			onSelectionChange?.([optionId]);
+		}
+	};
+	const handleCustomToggle = (checked) => {
+		setIsCustomExpanded(checked);
+		if (checked) {
+			if (!multiSelect) onSelectionChange?.([]);
+		} else onCustomAnswerChange?.("");
+	};
+	const handleCustomFocus = () => {
+		setIsCustomExpanded(true);
+		if (!multiSelect) onSelectionChange?.([]);
+	};
+	const handleCustomRowClick = () => {
+		if (multiSelect) handleCustomToggle(!isCustomSelected);
+		else handleCustomFocus();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("tw:flex tw:max-w-[800px] tw:flex-col tw:gap-4 tw:overflow-hidden tw:rounded-xl tw:border tw:border-solid tw:border-border tw:bg-neutral-50 tw:shadow-lg", className),
+		"data-testid": "question-root",
+		"data-question-step": currentStep,
+		"data-question-total-steps": totalSteps,
+		"data-question-multi-select": multiSelect,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:items-start tw:gap-2 tw:pl-4 tw:pr-2 tw:pt-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "tw:m-0 tw:text-base tw:font-semibold tw:leading-6 tw:text-neutral-800",
+						children: question
+					}), header && /* @__PURE__ */ jsx("p", {
+						className: "tw:m-0 tw:text-xs tw:leading-4 tw:text-neutral-500",
+						children: header
+					})]
+				}), onClose && /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "icon-sm",
+					"aria-label": "Close",
+					onClick: onClose,
+					"data-testid": "question-close-button",
+					children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "tw:px-4",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "tw:flex tw:flex-col tw:gap-4 tw:border-0 tw:border-l tw:border-solid tw:border-primary tw:px-4 tw:py-2",
+					children: [options.map((option) => /* @__PURE__ */ jsxs("div", {
+						className: "tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:hover:bg-neutral-100",
+						onClick: () => handleOptionToggle(option.id),
+						onKeyDown: handleKeyDown(() => handleOptionToggle(option.id)),
+						role: "button",
+						tabIndex: 0,
+						"data-testid": `question-option-${option.id}`,
+						children: [multiSelect && /* @__PURE__ */ jsx(Checkbox, {
+							checked: selectedOptionIds.includes(option.id),
+							onCheckedChange: () => handleOptionToggle(option.id),
+							onClick: (e) => e.stopPropagation(),
+							className: "tw:shrink-0"
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "tw:flex tw:min-w-0 tw:flex-1 tw:items-start tw:gap-3",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "tw:flex tw:flex-col tw:gap-1.5",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "tw:text-sm tw:font-medium tw:leading-none tw:text-neutral-800",
+									children: option.label
+								}), option.description && /* @__PURE__ */ jsx("span", {
+									className: "tw:text-sm tw:font-normal tw:leading-5 tw:text-muted-foreground",
+									children: option.description
+								})]
+							}), option.preview && /* @__PURE__ */ jsx("div", {
+								className: cn("tw:ml-auto tw:flex tw:max-h-40 tw:min-w-0 tw:max-w-[50%] tw:flex-col tw:overflow-hidden tw:rounded-md", !renderPreview && "tw:overflow-auto tw:border tw:border-solid tw:border-neutral-200 tw:bg-white tw:p-2"),
+								children: renderPreview ? renderPreview(option.preview) : /* @__PURE__ */ jsx("pre", {
+									className: "tw:m-0 tw:overflow-visible tw:border-0 tw:bg-transparent tw:p-0 tw:font-mono tw:text-xs tw:leading-5 tw:text-neutral-700",
+									children: option.preview
+								})
+							})]
+						})]
+					}, option.id)), showCustomAnswer && /* @__PURE__ */ jsxs("div", {
+						className: "tw:flex tw:flex-col tw:gap-2",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:hover:bg-neutral-100",
+							onClick: handleCustomRowClick,
+							onKeyDown: handleKeyDown(handleCustomRowClick),
+							role: "button",
+							tabIndex: 0,
+							children: [multiSelect && /* @__PURE__ */ jsx(Checkbox, {
+								checked: isCustomSelected,
+								onCheckedChange: handleCustomToggle,
+								onClick: (e) => e.stopPropagation(),
+								className: "tw:shrink-0"
+							}), /* @__PURE__ */ jsx("span", {
+								className: cn("tw:text-sm tw:font-medium tw:leading-none", !multiSelect && isCustomSelected ? "tw:text-primary" : "tw:text-neutral-800"),
+								children: "Other"
+							})]
+						}), /* @__PURE__ */ jsx(TextInput, {
+							value: customAnswer,
+							onValueChange: (value) => onCustomAnswerChange?.(value),
+							onFocus: handleCustomFocus,
+							onKeyDown: onCustomAnswerConfirm ? (e) => {
+								if (e.key === "Enter" && !e.shiftKey && !(e.metaKey || e.ctrlKey)) {
+									e.preventDefault();
+									onCustomAnswerConfirm();
+								}
+							} : void 0,
+							placeholder: customAnswerPlaceholder,
+							sizing: "small",
+							testId: "question-custom"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:flex-col",
+				children: [hasSteps && /* @__PURE__ */ jsx(Progress, {
+					size: "sm",
+					value: progressValue,
+					className: "tw:rounded-none"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: cn("tw:flex tw:items-center tw:justify-end tw:gap-4 tw:px-4 tw:py-3", !hasSteps && "tw:border-0 tw:border-t tw:border-solid tw:border-neutral-100"),
+					children: [
+						hasSteps && /* @__PURE__ */ jsxs("div", {
+							className: "tw:flex tw:items-center tw:gap-2",
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									disabled: isFirstStep,
+									className: "tw:flex tw:cursor-pointer tw:items-center tw:justify-center tw:bg-transparent tw:p-0 tw:disabled:cursor-default tailwindcss-preflight",
+									onClick: onPrevious,
+									"aria-label": "Previous step",
+									children: /* @__PURE__ */ jsx(ChevronLeft, { className: cn("tw:size-5", isFirstStep ? "tw:text-primary/25" : "tw:text-primary") })
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "tw:text-xs tw:leading-4 tw:text-neutral-500",
+									children: [
+										currentStep,
+										" of ",
+										totalSteps
+									]
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									disabled: currentStep === totalSteps,
+									className: "tw:flex tw:cursor-pointer tw:items-center tw:justify-center tw:bg-transparent tw:p-0 tw:disabled:cursor-default tailwindcss-preflight",
+									onClick: onNext,
+									"aria-label": "Next step",
+									children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("tw:size-5", currentStep === totalSteps ? "tw:text-primary/25" : "tw:text-primary") })
+								})
+							]
+						}),
+						showSkip && onSkip && /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "small",
+							onClick: onSkip,
+							"data-testid": "question-skip-button",
+							children: "Skip"
+						}),
+						(multiSelect || isCustomSelected) && (submitTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+							tooltip: submitTooltip,
+							placement: "top",
+							triggerAsChild: true,
+							children: /* @__PURE__ */ jsx(Button, {
+								variant: "primary",
+								size: "small",
+								onClick: onNext,
+								"data-testid": "question-next-button",
+								children: isLastStep ? "Submit" : "Next"
+							})
+						}) : /* @__PURE__ */ jsx(Button, {
+							variant: "primary",
+							size: "small",
+							onClick: onNext,
+							"data-testid": "question-next-button",
+							children: isLastStep ? "Submit" : "Next"
+						}))
+					]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/QuestionBlock.tsx
+const QuestionBlock = ({ steps, showSkip = true, onSubmit, onClose, renderPreview, className }) => {
+	const [currentStep, setCurrentStep] = useState(1);
+	const [selections, setSelections] = useState({});
+	const [customAnswers, setCustomAnswers] = useState({});
+	const stepData = steps[currentStep - 1];
+	const isLastStep = currentStep === steps.length;
+	const advance = (updatedSelections) => {
+		const finalSelections = updatedSelections ?? selections;
+		if (isLastStep) onSubmit?.({
+			selections: finalSelections,
+			customAnswers
+		});
+		else setCurrentStep((s) => Math.min(s + 1, steps.length));
+	};
+	const handleSelectionChange = (ids) => {
+		const updated = {
+			...selections,
+			[currentStep]: ids
+		};
+		setSelections(updated);
+		if (!stepData.multiSelect) advance(updated);
+	};
+	return /* @__PURE__ */ jsx(Question, {
+		...stepData,
+		selectedOptionIds: selections[currentStep] ?? [],
+		onSelectionChange: handleSelectionChange,
+		customAnswer: customAnswers[currentStep] ?? "",
+		onCustomAnswerChange: (value) => setCustomAnswers((prev) => ({
+			...prev,
+			[currentStep]: value
+		})),
+		currentStep,
+		totalSteps: steps.length,
+		showSkip: showSkip && !isLastStep,
+		onNext: () => advance(),
+		onPrevious: () => setCurrentStep((s) => Math.max(s - 1, 1)),
+		onSkip: () => setCurrentStep((s) => Math.min(s + 1, steps.length)),
+		onClose,
+		renderPreview,
+		className
+	}, currentStep);
+};
+//#endregion
+//#region src/blocks/AIKit/SuggestedPrompt.tsx
+const SuggestedPrompt = ({ label, disabled, onClick, icon, className }) => {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		disabled,
+		className: cn("tailwindcss-preflight tw:flex tw:items-center tw:justify-start tw:gap-2 tw:whitespace-nowrap tw:rounded-lg tw:p-2 tw:text-left tw:text-sm tw:font-medium tw:text-foreground tw:transition-colors tw:not-disabled:hover:bg-muted tw:disabled:cursor-not-allowed tw:disabled:opacity-50", className),
+		onClick,
+		children: [icon ?? /* @__PURE__ */ jsx(FileText, { className: "tw:size-4 tw:shrink-0 tw:basis-4 tw:[&_*]:stroke-aigradient-600" }), /* @__PURE__ */ jsx("div", {
+			className: "tw:whitespace-normal tw:text-left",
+			children: label
+		})]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/ThinkingIndicator.tsx
+const ThinkingIndicator = ({ label = "Thinking..." }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "tw:flex tw:items-center tw:gap-2",
+		"data-testid": "chat-thinking-indicator",
+		children: [/* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:animate-spin tw:text-secondary-500" }), /* @__PURE__ */ jsx("span", {
+			className: "tw:text-sm tw:italic tw:text-secondary-500",
+			children: label
+		})]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/ToolCall/ToolCallApproval.tsx
+const STATUS_BADGE = {
+	pending: {
+		label: "Needs approval",
+		color: "blue"
+	},
+	approved: {
+		label: "Approved",
+		color: "green"
+	},
+	rejected: {
+		label: "Rejected",
+		color: "red"
+	},
+	expired: {
+		label: "Expired",
+		color: "gray"
+	}
+};
+/**
+* Per-tool-call approve/reject frame — the granular sibling of `PlanApproval`
+* (which approves a whole plan). Chrome + status + actions only: the app
+* renders the call detail as `children` and owns the SDK/permission wiring.
+*/
+const ToolCallApproval = ({ toolName, title, status, onApprove, onReject, children, actions, isSubmitting = false, enableShortcuts = false, approveLabel = "Approve", rejectLabel = "Reject", className }) => {
+	const isPending = status === "pending";
+	const hasCustomActions = actions != null;
+	const showActions = isPending && (isPending && !hasCustomActions && Boolean(onApprove || onReject) || hasCustomActions);
+	const badge = STATUS_BADGE[status];
+	useEffect(() => {
+		if (!enableShortcuts || !isPending || isSubmitting) return;
+		const isEditableTarget = (target) => {
+			if (!(target instanceof HTMLElement)) return false;
+			return target.isContentEditable || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT";
+		};
+		const handleKeyDown = (event) => {
+			if (event.repeat || event.defaultPrevented || isEditableTarget(event.target)) return;
+			if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.metaKey && onApprove) {
+				event.preventDefault();
+				onApprove();
+			} else if (event.key === "Escape" && onReject) {
+				event.preventDefault();
+				onReject();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [
+		enableShortcuts,
+		isPending,
+		isSubmitting,
+		onApprove,
+		onReject
+	]);
+	return /* @__PURE__ */ jsxs("section", {
+		"data-testid": "tool-call-approval",
+		"data-status": status,
+		"aria-label": typeof title === "string" ? title : toolName,
+		className: cn("tw:flex tw:w-full tw:max-w-[800px] tw:flex-col tw:gap-3 tw:overflow-hidden tw:rounded-xl tw:border tw:border-solid tw:border-border tw:bg-muted tw:p-4", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:items-center tw:gap-2",
+				children: [/* @__PURE__ */ jsx(Badge, {
+					color: badge.color,
+					variant: "pill",
+					className: "tw:normal-case tw:tracking-normal",
+					children: badge.label
+				}), /* @__PURE__ */ jsx("code", {
+					className: "tw:rounded tw:bg-background tw:px-1.5 tw:py-0.5 tw:font-mono tw:text-xs tw:text-foreground",
+					children: toolName
+				})]
+			}),
+			title != null && /* @__PURE__ */ jsx("p", {
+				className: "tw:m-0 tw:text-sm tw:font-medium tw:text-foreground",
+				children: title
+			}),
+			children,
+			showActions && /* @__PURE__ */ jsx("div", {
+				className: "tw:flex tw:items-center tw:justify-end tw:gap-2 tw:overflow-x-auto",
+				children: actions ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [onReject && /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "small",
+					onClick: onReject,
+					disabled: isSubmitting,
+					className: "tw:shrink-0 tw:whitespace-nowrap",
+					children: rejectLabel
+				}), onApprove && /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					size: "small",
+					onClick: onApprove,
+					disabled: isSubmitting,
+					className: "tw:shrink-0 tw:whitespace-nowrap",
+					children: approveLabel
+				})] })
+			})
+		]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/ToolCall/ToolCallChip.tsx
+const chipClasses = cva(["tw:inline-flex tw:items-center tw:gap-1.5 tw:rounded-md tw:border tw:border-solid", "tw:border-border tw:bg-muted tw:px-2 tw:py-1 tw:text-xs tw:text-foreground"], {
+	variants: { interactive: {
+		true: "tw:cursor-pointer tw:focus-visible:outline-hidden tw:focus-visible:ring-2 tw:focus-visible:ring-ring tw:not-disabled:hover:bg-accent",
+		false: ""
+	} },
+	defaultVariants: { interactive: false }
+});
+const StateIcon = ({ state }) => {
+	if (state === "processing") return /* @__PURE__ */ jsx(Loader2, { className: "tw:size-3.5 tw:shrink-0 tw:animate-spin tw:text-muted-foreground" });
+	if (state === "error") return /* @__PURE__ */ jsx(CircleX, { className: "tw:size-3.5 tw:shrink-0 tw:text-error-500" });
+	return /* @__PURE__ */ jsx(CircleCheck, { className: "tw:size-3.5 tw:shrink-0 tw:text-primary" });
+};
+/**
+* Presentational chip summarising a single tool call (icon + label + optional
+* trailing action). It has **no** URL/router knowledge — wrap it in a `Link`
+* or pass `onClick` for navigation; the app owns deep-linking.
+*/
+const ToolCallChip = ({ label, state, icon, trailing, onClick, className }) => {
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		icon ?? /* @__PURE__ */ jsx(StateIcon, { state }),
+		/* @__PURE__ */ jsx("span", {
+			className: "tw:min-w-0 tw:truncate",
+			children: label
+		}),
+		trailing != null && /* @__PURE__ */ jsx("span", {
+			className: "tw:ml-auto tw:inline-flex tw:shrink-0 tw:items-center",
+			children: trailing
+		})
+	] });
+	if (onClick) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-testid": "tool-call-chip",
+		"data-state": state,
+		onClick,
+		className: cn("tailwindcss-preflight", chipClasses({ interactive: true }), className),
+		children: content
+	});
+	return /* @__PURE__ */ jsx("span", {
+		"data-testid": "tool-call-chip",
+		"data-state": state,
+		className: cn(chipClasses({ interactive: false }), className),
+		children: content
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/usageStatsHelpers.ts
+/** Clamp a percentage to 0–100 and normalize non-finite input to 0. */
+const clampPercentage = (value) => Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;
+//#endregion
+//#region src/blocks/AIKit/UsageStatsRing.tsx
+const UsageStatsRing = ({ value, size = 16, strokeWidth = 2.5, className }) => {
+	const radius = Math.max(0, (size - strokeWidth) / 2 - 1);
+	const circumference = 2 * Math.PI * radius;
+	const offset = circumference * (1 - clampPercentage(value) / 100);
+	return /* @__PURE__ */ jsxs("svg", {
+		width: size,
+		height: size,
+		viewBox: `0 0 ${size} ${size}`,
+		className: cn("tw:-rotate-90", className),
+		role: "presentation",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: size / 2,
+			cy: size / 2,
+			r: radius,
+			fill: "none",
+			strokeWidth,
+			className: "tw:stroke-neutral-400 tw:opacity-50"
+		}), /* @__PURE__ */ jsx("circle", {
+			cx: size / 2,
+			cy: size / 2,
+			r: radius,
+			fill: "none",
+			strokeWidth,
+			strokeLinecap: "round",
+			strokeDasharray: circumference,
+			strokeDashoffset: offset,
+			className: "tw:stroke-primary tw:transition-all"
+		})]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/UsageStats.tsx
+const UsageStats = ({ value, alert = false, children, className, ariaLabel, align = "end", side = "top", sideOffset = 8 }) => {
+	const defaultLabel = `Usage: ${Math.round(clampPercentage(value))}%${alert ? " (usage alert)" : ""}`;
+	return /* @__PURE__ */ jsxs(HoverCard, { children: [/* @__PURE__ */ jsx(HoverCard.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("span", {
+			"aria-label": ariaLabel ?? defaultLabel,
+			className: cn("tw:relative tw:inline-flex tw:size-8 tw:items-center tw:justify-center", className),
+			children: [/* @__PURE__ */ jsx(UsageStatsRing, { value }), alert && /* @__PURE__ */ jsx(AlertCircle, {
+				"data-testid": "usage-stats-alert",
+				className: "tw:absolute tw:-right-0.5 tw:-top-0.5 tw:size-3 tw:text-error-500"
+			})]
+		})
+	}), /* @__PURE__ */ jsx(HoverCard.Content, {
+		align,
+		side,
+		sideOffset,
+		children
+	})] });
+};
+//#endregion
+export { AnswerSummary, CollapsibleStepHeader, InlineStepDetail, InlineStepLabel, Markdown, MessageBubble, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, UsageStats, UsageStatsRing };
+
+//# sourceMappingURL=AIKit-DiS0CVOW.js.map