@keboola/design 11.4.0 → 11.6.0

package/dist/{AIKit-DDg5DBCG.js → AIKit-BExvt9pt.js}

@@ -1,26 +1,95 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip, TooltipProvider } from "./utils-B5Z52hYs.js";
-import { AlertCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleCheck, CirclePause, CircleX, Loader2, Maximize2, Minimize2, Play, Send, Sparkles, TriangleAlert, X, XCircle } from "./icons-Cek151jC.js";
+import { Tooltip, TooltipProvider } from "./utils-DSvrhU8E.js";
+import { AlertCircle, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CirclePause, CircleX, Loader2, Maximize2, Minimize2, Play, Send, Sparkles, ThumbsDown, ThumbsUp, TriangleAlert, X, XCircle } from "./icons-Cek151jC.js";
 import { Button } from "./Button-DsRrU5F1.js";
-import { ClipboardButton } from "./ClipboardButton-D9pDjgkB.js";
-import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-BvPuYibe.js";
+import { ButtonGroup } from "./internal/components/ButtonGroup.js";
+import { ClipboardButton } from "./ClipboardButton-CwZJdRaz.js";
+import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-CN9nAs72.js";
 import { Truncated } from "./internal/components/Truncated.js";
 import { HoverCard } from "./HoverCard-B9ZMJxjn.js";
-import { Command } from "./Command-B7ML9YMv.js";
-import { TextInput } from "./TextInput-DHM6dHmn.js";
-import { Checkbox } from "./Checkbox-fC0BuO2B.js";
-import { Badge } from "./Badge-Ch26CXoP.js";
+import { Command } from "./Command-Bfa1kpbt.js";
+import { TextInput } from "./TextInput-DH5SkbsE.js";
+import { Checkbox } from "./Checkbox-CUIn2jap.js";
+import { Badge } from "./Badge-D0pXdekt.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
 import { Table } from "./Table-CvYuTuNU.js";
 import { DiagramSkeleton } from "./internal/blocks/DiagramShared/DiagramSkeleton.js";
+import { DiagramSource } from "./DiagramSource-C5_d8Gdj.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 { isValidElement, useCallback, 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/AnswerActions.tsx
+const VOTE_BUTTONS = [{
+	vote: "up",
+	label: "Good answer",
+	icon: /* @__PURE__ */ jsx(ThumbsUp, { className: "tw:size-4" })
+}, {
+	vote: "down",
+	label: "Bad answer",
+	icon: /* @__PURE__ */ jsx(ThumbsDown, { className: "tw:size-4" })
+}];
+/**
+* What a reader can do with a finished answer: take it away, and say whether it was any good.
+*
+* - **Always rendered, never hover-only.** A reveal-on-hover row does not exist for anyone
+*   reaching it without a pointer. The buttons are quiet (`invisible`) rather than hidden.
+* - Copy sits first: it is the one action with no round trip.
+* - **A vote can be changed but not withdrawn.** `aria-pressed` says which one is recorded, and
+*   both buttons stay focusable so a reader can switch. Pressing the pressed one re-sends the
+*   same vote.
+* - The recorded vote and the write are the caller's: the two chats vote against different
+*   endpoints, and only the caller knows whether a turn is finished enough to rate.
+*/
+const AnswerActions = ({ copyText, vote, onVote }) => {
+	return /* @__PURE__ */ jsxs(ButtonGroup, {
+		space: "extra-small",
+		"aria-label": "Answer actions",
+		children: [copyText ? /* @__PURE__ */ jsx(ClipboardButton, {
+			text: copyText,
+			tooltip: "Copy answer",
+			size: "icon-xs",
+			variant: "invisible"
+		}) : null, VOTE_BUTTONS.map(({ vote: candidate, label, icon }) => {
+			const isRecorded = vote === candidate;
+			return /* @__PURE__ */ jsx(Tooltip, {
+				tooltip: label,
+				placement: "top",
+				triggerAsChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					size: "icon-xs",
+					variant: isRecorded ? "secondary" : "invisible",
+					"aria-label": label,
+					"aria-pressed": isRecorded,
+					onClick: () => onVote(candidate),
+					children: icon
+				})
+			}, candidate);
+		})]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/CollapsibleBody.tsx
+const CollapsibleBody = ({ isExpanded, isClosing, onClosed, children }) => {
+	const handleTransitionEnd = (event) => {
+		if (event.target !== event.currentTarget) return;
+		if (event.propertyName !== "grid-template-rows") return;
+		if (!isExpanded) onClosed();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("tw:grid tw:transition-[grid-template-rows] tw:duration-300 tw:ease-out tw:motion-reduce:transition-none", isExpanded ? "tw:grid-rows-[1fr]" : "tw:grid-rows-[0fr]"),
+		onTransitionEnd: handleTransitionEnd,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "tw:min-h-0 tw:overflow-hidden",
+			children: (isExpanded || isClosing) && children
+		})
+	});
+};
+//#endregion
 //#region src/blocks/AIKit/CollapsibleStepHeader.tsx
 const variantClasses = {
 	success: "tw:text-muted-foreground tw:focus-visible:outline-ring tw:not-disabled:hover:text-foreground",
@@ -31,8 +100,7 @@ const variantClasses = {
 const iconClasses = "tw:size-3.5 tw:shrink-0 tw:basis-3.5 tw:opacity-70";
 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") });
+	if (variant === "error" || variant === "dismissed") return /* @__PURE__ */ jsx(XCircle, { className: iconClasses });
 	return /* @__PURE__ */ jsx(CircleCheck, { className: iconClasses });
 };
 const CollapsibleStepHeader = ({ isExpanded, onToggle, label, variant = "success" }) => {
@@ -51,6 +119,9 @@ const CollapsibleStepHeader = ({ isExpanded, onToggle, label, variant = "success
 	});
 };
 //#endregion
+//#region src/blocks/AIKit/hasMotion.ts
+const hasMotion = () => typeof window.matchMedia === "function" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+//#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-border tw:pl-3 tw:text-xs tw:text-muted-foreground",
@@ -80,38 +151,122 @@ const SECTION_LABELS = {
 	success: "Answered questions",
 	dismissed: "Dismissed questions"
 };
-const AnswerSummary = ({ items, variant = "success", noAnswerLabel = "No answer" }) => {
+const AnswerSummary = ({ items, variant = "success", noAnswerLabel = "No answer", onExpandToggle }) => {
 	const [isExpanded, setIsExpanded] = useState(false);
-	const toggle = () => setIsExpanded((prev) => !prev);
+	const [isClosing, setIsClosing] = useState(false);
+	const toggle = () => {
+		const next = !isExpanded;
+		if (!next) setIsClosing(hasMotion());
+		setIsExpanded(next);
+		onExpandToggle?.(next);
+	};
 	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",
+		className: "tw:mt-4 tw:flex tw:flex-col",
 		"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}`))
+		}), /* @__PURE__ */ jsx(CollapsibleBody, {
+			isExpanded,
+			isClosing,
+			onClosed: () => setIsClosing(false),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "tw:flex tw:flex-col tw:gap-4 tw:pt-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/DiagramBlock.tsx
+/**
+* One diagram block: a skeleton while its chunk loads, the fence source plus a retry if it fails.
+*
+* - `load` runs once per mount and once per press of the retry button. The loader drops its own
+*   rejected promise, so every attempt is a fresh fetch.
+* - Recovery is a gesture, not a timer: nothing on the page can tell when a chunk became
+*   reachable again, and a tab left open across a deploy points at a URL that is gone for good —
+*   a background loop would retry that one forever.
+* - The failure is already logged by the loader, which knows the chunk's name.
+* - A new `load` resets the block: every fence renders this same component type, so a block that
+*   switches dialect would otherwise keep drawing through the dialect it had before.
+* - Both the renderer and the loader are functions held in state, so they go in through the
+*   setter form — React runs a bare function as a lazy initializer or an updater instead.
+*/
+const DiagramBlock = ({ load, code }) => {
+	const [Diagram, setDiagram] = useState(null);
+	const [failed, setFailed] = useState(false);
+	const [attempt, setAttempt] = useState(0);
+	const [prevLoad, setPrevLoad] = useState(() => load);
+	if (load !== prevLoad) {
+		setPrevLoad(() => load);
+		setDiagram(null);
+		setFailed(false);
+	}
+	useEffect(() => {
+		let cancelled = false;
+		load().then((component) => {
+			if (!cancelled) setDiagram(() => component);
+		}, () => {
+			if (!cancelled) setFailed(true);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [load, attempt]);
+	if (Diagram) return /* @__PURE__ */ jsx(Diagram, { code });
+	if (failed) return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DiagramSource, { code }), /* @__PURE__ */ jsx(Button, {
+		variant: "inline",
+		size: "small",
+		className: "tw:mb-3",
+		onClick: () => {
+			setFailed(false);
+			setAttempt((count) => count + 1);
+		},
+		children: "Try again"
+	})] });
+	return /* @__PURE__ */ jsx(DiagramSkeleton, {});
+};
+//#endregion
+//#region src/blocks/AIKit/diagramChunk.ts
+/**
+* An on-demand diagram chunk — shared between mounts, and retryable.
+*
+* - `lazy()` is deliberately not used here: it memoizes the settled import for the life of the
+*   page, so one failed fetch (a dev server restarting, a stale tab after a deploy, a flaky
+*   network) leaves every diagram in that tab rendering raw source until a full reload.
+* - A resolved import is kept, so the chunk is fetched once however many blocks mount.
+* - A failed one is cleared, so the next mount imports again. Same contract as
+*   `getFlintRuntime()` one level down, inside `FlintChart`.
+* - The failure is logged here, where the chunk's name is known, so the swap to plain source is
+*   never silent and a retry that fails again says so.
+*/
+const diagramChunk = (name, load) => {
+	let pending = null;
+	return () => {
+		pending ??= load().catch((error) => {
+			console.error(`[AIKit] failed to load the ${name} chunk`, error);
+			pending = null;
+			throw error;
+		});
+		return pending;
+	};
+};
+//#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 loadMermaid = diagramChunk("MermaidDiagram", () => import("@keboola/design/mermaid").then((module) => module.MermaidDiagram));
+const loadFlint = diagramChunk("FlintChart", () => import("@keboola/design/flint").then((module) => module.FlintChart));
 const proseClass = "tw:prose tw:prose-sm tw:max-w-none tw:break-words tw:[&_pre]:bg-muted tw:[&_pre]:text-foreground tw:[&_:not(pre)>code]:bg-muted tw:[&_:not(pre)>code]:text-foreground 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;
@@ -135,19 +290,48 @@ const getLanguage = (element) => {
 * - A caller's own plugins are appended to these, never substituted for them.
 */
 const baseRemarkPlugins = [remarkGfm];
+/**
+* Fence language → the on-demand chunk that draws it.
+*
+* - Both dialects are the agent's, not this package's: kai-agent's prompt tells the model to
+*   write ```mermaid for structure and ```flint for quantitative data, so a chat that renders
+*   one and not the other drops output the agent was instructed to produce.
+* - `flint-chart` is an alias — it is the fence tag flint's own docs use, so a model emits it
+*   unprompted often enough to matter. `markdownComponents.tsx` in kbc-ui carries the same pair.
+* - Read through `Object.hasOwn`, never by plain index: a fence tagged ```constructor or
+*   ```valueOf otherwise answers with an `Object.prototype` member, which is truthy, and calling
+*   it as a loader throws — taking the whole message subtree down with it.
+*/
+const DIAGRAM_CHUNKS = {
+	mermaid: loadMermaid,
+	flint: loadFlint,
+	"flint-chart": loadFlint
+};
+/**
+* The fence languages this renderer draws instead of printing.
+*
+* - For a caller that streams: a diagram mounts a lazily loaded chunk, so an answer arriving a
+*   token at a time has to keep a fence that is still open an ordinary code block, or every
+*   keystroke fetches the chunk. Sharing the list is what keeps that hold-back from missing a
+*   dialect this map has and the caller does not.
+* - Frozen, because it is that shared contract: a consumer that pushed onto it would change how
+*   every other app in the same bundle holds a fence back.
+*/
+const DIAGRAM_LANGUAGES = Object.freeze(Object.keys(DIAGRAM_CHUNKS));
 const baseComponents = {
 	pre({ children, ...props }) {
 		const child = Array.isArray(children) ? children[0] : children;
-		if (getLanguage(child) === "mermaid") {
-			const code = getText(child).replace(/\n$/, "");
+		const code = getText(child).replace(/\n$/, "");
+		const language = getLanguage(child);
+		const load = language !== void 0 && Object.hasOwn(DIAGRAM_CHUNKS, language) ? DIAGRAM_CHUNKS[language] : void 0;
+		if (load) {
 			if (!code.trim()) return null;
-			return /* @__PURE__ */ jsx(Suspense, {
-				fallback: /* @__PURE__ */ jsx(DiagramSkeleton, {}),
-				children: /* @__PURE__ */ jsx(MermaidDiagram, { code })
+			return /* @__PURE__ */ jsx(DiagramBlock, {
+				load,
+				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", {
@@ -229,6 +413,95 @@ const Markdown = ({ children, className, remarkPlugins, components: componentOve
 	});
 };
 //#endregion
+//#region src/blocks/AIKit/MarkdownTable.tsx
+/** How much wider than its column a table has to be before the column is the wrong surface. */
+const EXPAND_RATIO = 1.5;
+/**
+* The token the host paints the table on, which is the colour the fade has to end in.
+*
+* - A gradient hides the cut-off cells by ending in the surface behind them. End it in any other
+*   token and it draws a contrasting strip over the data instead of hiding it.
+* - Full class strings, not a composed `tw:from-${token}`: Tailwind reads literals.
+*/
+const FADE_SURFACE = {
+	card: "tw:from-card",
+	background: "tw:from-background"
+};
+/**
+* A table in an answer, with the fact that it is cut off on the right said out loud.
+*
+* - `overflow-x: auto` scrolls silently, so nothing on screen says there is more to the right.
+* - The controls sit in a rail above the grid, never over the header row or the last row — the
+*   data a reader reaches for them to get at. The rail holds its height, so revealing hover
+*   controls or crossing the ratio cannot shift the table under the pointer.
+* - The fade marks the cut edge only while content remains, so it never reads as a border.
+* - A painted gradient rather than the `tw:scroll-fade-x` mask, which needs scroll-driven
+*   animations: the build floor is `baseline-widely-available` (Safari 16, Firefox 104), and there
+*   the utility either fades both edges of a table that fits or, behind the `supports-` guard
+*   `PageLayout` uses, says nothing at all — which is the state this component exists to end. The
+*   mask also has to sit on the scrolling element, and that is `Table`'s own container, not ours.
+* - Past `EXPAND_RATIO` the fade is joined by `onExpand`'s action, drawn without waiting for a
+*   hover: it reports that content is cut off, which the reader needs before going looking.
+*/
+const MarkdownTable = ({ children, actions, onExpand, surface = "card", className }) => {
+	const frameRef = useRef(null);
+	const [overflow, setOverflow] = useState({
+		scrollable: false,
+		atEnd: true,
+		ratio: 1
+	});
+	const measure = useCallback(() => {
+		const box = frameRef.current?.firstElementChild;
+		if (!box) return;
+		const { scrollLeft, scrollWidth, clientWidth } = box;
+		const hidden = scrollWidth - clientWidth;
+		setOverflow({
+			scrollable: hidden > 1,
+			atEnd: scrollLeft >= hidden - 1,
+			ratio: clientWidth > 0 ? scrollWidth / clientWidth : 1
+		});
+	}, []);
+	useEffect(() => {
+		const box = frameRef.current?.firstElementChild;
+		if (!box) return;
+		measure();
+		box.addEventListener("scroll", measure, { passive: true });
+		const observer = new ResizeObserver(measure);
+		observer.observe(box);
+		if (box.firstElementChild) observer.observe(box.firstElementChild);
+		return () => {
+			box.removeEventListener("scroll", measure);
+			observer.disconnect();
+		};
+	}, [measure]);
+	const showExpand = !!onExpand && overflow.scrollable && overflow.ratio >= EXPAND_RATIO;
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [(actions || onExpand) && /* @__PURE__ */ jsxs("div", {
+			className: "tw:flex tw:h-8 tw:items-center tw:justify-end tw:gap-1",
+			children: [actions, showExpand && /* @__PURE__ */ jsx(Tooltip, {
+				tooltip: "This table is wider than the space it has",
+				placement: "top",
+				triggerAsChild: true,
+				children: /* @__PURE__ */ jsxs(Button, {
+					size: "small",
+					variant: "invisible",
+					onClick: onExpand,
+					children: [/* @__PURE__ */ jsx(Maximize2, { className: "tw:size-3.5" }), "Open wider"]
+				})
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: frameRef,
+			className: "tw:relative",
+			children: [children, overflow.scrollable && !overflow.atEnd && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				"data-testid": "markdown-table-fade",
+				className: cn("tw:pointer-events-none tw:absolute tw:inset-y-px tw:right-px tw:w-12 tw:rounded-r-[10px] tw:bg-gradient-to-l tw:to-transparent", FADE_SURFACE[surface])
+			})]
+		})]
+	});
+};
+//#endregion
 //#region src/blocks/AIKit/MessageBubble.tsx
 const containerClasses = cva([
 	"tw:flex",
@@ -335,7 +608,7 @@ const ExpandToggle = ({ isExpanded, onToggle, showMoreLabel, showLessLabel }) =>
 });
 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",
+	className: "tw:border-0 tw:border-t tw:border-solid tw:border-border tw:bg-card tw:text-card-foreground tw:px-4 tw:py-3",
 	"aria-label": formLabel,
 	children: /* @__PURE__ */ jsxs("div", {
 		className: "tw:relative",
@@ -415,8 +688,10 @@ const PlanApproval = ({ status, title, summary, stepCount, planBody, defaultExpa
 	const canShowPlanBody = planBody != null;
 	const trimmedChangeRequest = changeRequest.trim();
 	const canSubmitChangeRequest = trimmedChangeRequest.length > 0 && !isSubmitting;
+	const [isClosing, setIsClosing] = useState(false);
 	const toggleExpanded = () => {
 		const next = !isExpanded;
+		if (!next) setIsClosing(hasMotion());
 		if (isExpandedProp === void 0) setUncontrolledExpanded(next);
 		onExpandToggle?.(next);
 	};
@@ -465,7 +740,7 @@ const PlanApproval = ({ status, title, summary, stepCount, planBody, defaultExpa
 	});
 	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),
+		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-background tw:text-foreground", className),
 		"data-testid": "plan-approval-root",
 		"data-plan-status": status,
 		children: [
@@ -482,11 +757,11 @@ const PlanApproval = ({ status, title, summary, stepCount, planBody, defaultExpa
 							dismissedLabel: dismissedPillLabel,
 							changesRequestedLabel: changesRequestedPillLabel
 						}), stepCount != null && stepCount > 0 && /* @__PURE__ */ jsx("span", {
-							className: "tw:text-xs tw:leading-4 tw:text-neutral-500",
+							className: "tw:text-xs tw:leading-4 tw:text-muted-foreground",
 							children: stepCountLabel(stepCount)
 						})]
 					}), /* @__PURE__ */ jsx("p", {
-						className: "tw:m-0 tw:text-base tw:font-semibold tw:leading-6 tw:text-neutral-800",
+						className: "tw:m-0 tw:text-base tw:font-semibold tw:leading-6",
 						children: title
 					})]
 				}), /* @__PURE__ */ jsxs("div", {
@@ -515,15 +790,20 @@ const PlanApproval = ({ status, title, summary, stepCount, planBody, defaultExpa
 				})]
 			}),
 			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"),
+				className: cn("tw:whitespace-pre-wrap tw:border-0 tw:border-t tw:border-solid tw:border-border tw:px-4 tw:pt-4 tw:text-sm", 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
+			canShowPlanBody && /* @__PURE__ */ jsx(CollapsibleBody, {
+				isExpanded,
+				isClosing,
+				onClosed: () => setIsClosing(false),
+				children: /* @__PURE__ */ jsx("div", {
+					className: "tw:max-h-[400px] tw:overflow-y-auto tw:border-0 tw:border-t tw:border-solid tw:border-border tw:bg-card tw:p-4 tw:text-sm tw:text-card-foreground",
+					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"),
+				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-border tw:bg-card tw:px-4 tw:py-3 tw:text-card-foreground", canShowPlanBody ? "tw:justify-between" : "tw:justify-end"),
 				children: [canShowPlanBody && /* @__PURE__ */ jsx("div", {
 					className: "tw:shrink-0",
 					children: /* @__PURE__ */ jsx(ExpandToggle, {
@@ -585,14 +865,14 @@ const PlanApproval = ({ status, title, summary, stepCount, planBody, defaultExpa
 				})
 			}),
 			/* @__PURE__ */ jsx(FullScreenModalBody, {
-				className: "tw:bg-white tw:px-6 tw:py-4",
+				className: "tw:bg-card tw:px-6 tw:py-4 tw:text-card-foreground",
 				children: /* @__PURE__ */ jsx("div", {
-					className: "tw:mx-auto tw:w-full tw:max-w-[800px] tw:text-sm tw:text-neutral-700",
+					className: "tw:mx-auto tw:w-full tw:max-w-[800px] tw:text-sm",
 					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",
+				className: "tw:shrink-0 tw:border-0 tw:border-t tw:border-solid tw:border-border tw:bg-card tw:text-card-foreground",
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "tw:mx-auto tw:w-full tw:max-w-[800px]",
 					children: [showChangeRequestForm && changeRequestForm, showActions && /* @__PURE__ */ jsx("div", {
@@ -758,11 +1038,15 @@ const wrapperVariants = cva(null, {
 		inline: ""
 	} }
 });
-const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, disabled, disableSubmit, value = "", onValueChange, status = "ready", maxRows = 6, minRows, commands, autoFocus, ...textareaProps }) => {
+const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, disabled, disableSubmit, value = "", onValueChange, status = "ready", maxRows = 6, minRows, commands, autoFocus, textareaRef: publishedRef, ...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 setTextareaNode = useCallback((node) => {
+		textareaRef.current = node;
+		if (publishedRef) publishedRef.current = node;
+	}, [publishedRef]);
 	const [dismissedValue, setDismissedValue] = useState(null);
 	const autoFocusRef = useRef(autoFocus);
 	useEffect(() => {
@@ -833,7 +1117,7 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, dis
 					minRows: minRows ?? defaultMinRows,
 					maxRows,
 					id: textareaId,
-					ref: textareaRef,
+					ref: setTextareaNode,
 					value,
 					onChange: handleOnChange,
 					onKeyDown: handleOnKeyDown,
@@ -1123,11 +1407,24 @@ const SuggestedPrompt = ({ label, disabled, onClick, icon, className }) => {
 };
 //#endregion
 //#region src/blocks/AIKit/ThinkingIndicator.tsx
+/**
+* The agent's turn is in flight and has nothing to show yet.
+*
+* - Quiet chrome, matching the step rows it precedes (muted ink, no italic), so the hand-off
+*   from "Thinking..." to the first step is seamless.
+* - `role="status"` because a spinner is silence to a screen reader, and for much of a turn
+*   this is all a transcript shows. The label is the announcement, so it is never decorative.
+* - The icon is hidden from the tree: it says the same thing as the label beside it.
+*/
 const ThinkingIndicator = ({ label = "Thinking..." }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "tw:flex tw:items-center tw:gap-1.5",
+		role: "status",
 		"data-testid": "chat-thinking-indicator",
-		children: [/* @__PURE__ */ jsx(Loader2, { className: "tw:size-3.5 tw:animate-spin tw:text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(Loader2, {
+			"aria-hidden": true,
+			className: "tw:size-3.5 tw:animate-spin tw:text-muted-foreground"
+		}), /* @__PURE__ */ jsx("span", {
 			className: "tw:text-xs tw:font-medium tw:text-muted-foreground",
 			children: label
 		})]
@@ -1331,14 +1628,33 @@ const ToolCallStatusHeader = ({ icon: IconComponent, iconSpin, status, text, nee
 					className: "tw:text-xs tw:font-medium tw:text-warning",
 					children: "Confirmation required"
 				}), /* @__PURE__ */ jsx(TriangleAlert, { className: "tw:size-3.5 tw:text-warning" })]
-			}), isCollapsible && (isCollapsed ? /* @__PURE__ */ jsx(ChevronDown, { className: "tw:size-3.5 tw:shrink-0 tw:text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronUp, { className: "tw:size-3.5 tw:shrink-0 tw:text-muted-foreground" }))]
+			}), isCollapsible && /* @__PURE__ */ jsx(ChevronDown, { className: cn("tw:size-3.5 tw:shrink-0 tw:text-muted-foreground", "tw:transition-transform tw:duration-300 tw:ease-out tw:motion-reduce:transition-none", !isCollapsed && "tw:rotate-180") })]
 		})]
 	});
 };
 //#endregion
 //#region src/blocks/AIKit/usageStatsHelpers.ts
-/** Clamp a percentage to 0–100 and normalize non-finite input to 0. */
+/**
+* Clamp a percentage to 0–100 and normalize non-finite input to 0.
+*
+* - `Progress`'s indicator is unclamped, so a value over 100 slides the bar off-screen.
+* - `NaN` normalizes to 0 — `Math.min`/`Math.max` propagate it, and it renders as no bar at all.
+*/
 const clampPercentage = (value) => Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;
+/**
+* A percentage as text — `72%`, `0.2%`, `99%`.
+*
+* - Whole numbers from 1% up; a decimal only below 1%, where rounding would read as `0%`.
+* - A non-zero share never prints as `0.0%` — it floors at `0.1%`.
+* - Never `100%` for a value under 100: the text would disagree with the at-limit state computed
+*   from the raw value, exactly at the boundary everything else turns on.
+*/
+const formatPercentage = (value) => {
+	const oneDecimal = Math.round(value * 10) / 10;
+	if (value > 0 && oneDecimal < 1) return `${Math.max(.1, oneDecimal).toFixed(1)}%`;
+	const rounded = Math.round(value);
+	return `${value < 100 ? Math.min(rounded, 99) : rounded}%`;
+};
 //#endregion
 //#region src/blocks/AIKit/UsageStatsRing.tsx
 const UsageStatsRing = ({ value, size = 16, strokeWidth = 2.5, className }) => {
@@ -1357,7 +1673,7 @@ const UsageStatsRing = ({ value, size = 16, strokeWidth = 2.5, className }) => {
 			r: radius,
 			fill: "none",
 			strokeWidth,
-			className: "tw:stroke-neutral-400 tw:opacity-50"
+			className: "tw:stroke-muted-foreground tw:opacity-50"
 		}), /* @__PURE__ */ jsx("circle", {
 			cx: size / 2,
 			cy: size / 2,
@@ -1373,28 +1689,32 @@ const UsageStatsRing = ({ value, size = 16, strokeWidth = 2.5, className }) => {
 };
 //#endregion
 //#region src/blocks/AIKit/UsageStats.tsx
-const UsageStats = ({ value, alert = false, children, className, ariaLabel, align = "end", side = "top", sideOffset = 8 }) => {
+const UsageStats = ({ value, alert = false, children, className, ariaLabel, align = "end", side = "top", sideOffset = 8, open, onOpenChange }) => {
 	const hasAlert = Boolean(alert);
 	const isWarning = alert === "warning";
 	const defaultLabel = `Usage: ${Math.round(clampPercentage(value))}%${hasAlert ? " (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 }), hasAlert && /* @__PURE__ */ jsx(AlertCircle, {
-				"data-testid": "usage-stats-alert",
-				className: cn("tw:absolute tw:-right-0.5 tw:-top-0.5 tw:size-3", isWarning ? "tw:text-warning-500" : "tw:text-error-500")
-			})]
-		})
-	}), /* @__PURE__ */ jsx(HoverCard.Content, {
-		align,
-		side,
-		sideOffset,
-		children
-	})] });
+	return /* @__PURE__ */ jsxs(HoverCard, {
+		open,
+		onOpenChange,
+		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 }), hasAlert && /* @__PURE__ */ jsx(AlertCircle, {
+					"data-testid": "usage-stats-alert",
+					className: cn("tw:absolute tw:-right-0.5 tw:-top-0.5 tw:size-3", isWarning ? "tw:text-warning-500" : "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, ToolCallStatusHeader, UsageStats, UsageStatsRing };
+export { AnswerActions, AnswerSummary, CollapsibleStepHeader, DIAGRAM_LANGUAGES, InlineStepDetail, InlineStepLabel, Markdown, MarkdownTable, MessageBubble, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageStats, UsageStatsRing, clampPercentage, formatPercentage };
 
-//# sourceMappingURL=AIKit-DDg5DBCG.js.map
+//# sourceMappingURL=AIKit-BExvt9pt.js.map