@keboola/design 11.2.0 → 11.4.0

package/COMPONENT-API.md

@@ -319,37 +319,38 @@ Source: `src/blocks/Form/connectors/MultiComboboxField.tsx`
 
 > Several values from a searchable list — state is `string[]`, never objects, so the form value stays what gets submitted. Project labels with `itemToLabel`; add `allowCreate` for an enum the user may extend. Imported by name from `@keboola/design`, composed inside `form.AppField` — NOT reachable as `field.MultiComboboxField`.
 
-| Prop                 | Type                                                                                                                                                                                                               | Required | Default | Description                                                                                                                                                                                                                                                                                                     |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `action`             | `ReactNode`                                                                                                                                                                                                        | no       | —       | Optional node rendered at the trailing edge of the label row (opposite the label) — e.g. a "Forgot password?" link beside a Password label. Presentational placement only; it is a sibling of the `<Label>`, not part of the field's accessible name. Provide an interactive element (`ButtonInline` / `Link`). |
-| `allowClear`         | `boolean`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `allowCreate`        | `boolean`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `allowSelectAll`     | `boolean`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `aria-describedby`   | `string`                                                                                                                                                                                                           | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `className`          | `string`                                                                                                                                                                                                           | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `empty`              | `ReactNode`                                                                                                                                                                                                        | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `focusVariant`       | `"off" \| "on" \| "default" \| null`                                                                                                                                                                               | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `groupToLabel`       | `((group: Group<string>) => ReactNode)`                                                                                                                                                                            | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `help`               | `ReactNode`                                                                                                                                                                                                        | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `indicator`          | `Indicator`                                                                                                                                                                                                        | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `inputClassName`     | `string`                                                                                                                                                                                                           | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `items`              | `readonly (string \| Group<string>)[]`                                                                                                                                                                             | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `itemToChipColor`    | `((item: unknown) => "gray" \| "gray-darker" \| "gray-inverse" \| "green" \| "green-darker" \| "green-inverse" \| "blue" \| "blue-inverse" \| "red" \| "orange" \| "orange-inverse" \| "amber" \| ... 9 more ...)` | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `itemToChipLabel`    | `((item: unknown) => ReactNode)`                                                                                                                                                                                   | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `itemToDisabled`     | `((item: string) => boolean)`                                                                                                                                                                                      | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `itemToIcon`         | `((item: string) => ReactNode)`                                                                                                                                                                                    | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `itemToLabel`        | `((item: string) => ReactNode)`                                                                                                                                                                                    | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `itemToStringLabel`  | `((itemValue: string) => string)`                                                                                                                                                                                  | no       | —       | When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for display in the input. If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.                  |
-| `itemToStringValue`  | `((itemValue: string) => string)`                                                                                                                                                                                  | no       | —       | When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for form submission. If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.                       |
-| `label`              | `ReactNode`                                                                                                                                                                                                        | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `maxVisible`         | `number`                                                                                                                                                                                                           | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `queryToCreateLabel` | `((query: string) => ReactNode)`                                                                                                                                                                                   | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `queryToCreateValue` | `((query: string) => string)`                                                                                                                                                                                      | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `required`           | `boolean`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `requiredMark`       | `RequiredMark`                                                                                                                                                                                                     | no       | —       | Which marker to show beside the label — gated by `required` so it never lies: `'required'` renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it is not; `'hidden'` renders neither. Defaults to `'required'`.                                                          |
-| `sizing`             | `"small" \| "medium" \| "default" \| null`                                                                                                                                                                         | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `tooltip`            | `ReactNode`                                                                                                                                                                                                        | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `variant`            | `"primary" \| "secondary" \| null`                                                                                                                                                                                 | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| Prop                 | Type                                                                                                                                                                                                              | Required | Default | Description                                                                                                                                                                                                                                                                                                     |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `action`             | `ReactNode`                                                                                                                                                                                                       | no       | —       | Optional node rendered at the trailing edge of the label row (opposite the label) — e.g. a "Forgot password?" link beside a Password label. Presentational placement only; it is a sibling of the `<Label>`, not part of the field's accessible name. Provide an interactive element (`ButtonInline` / `Link`). |
+| `allowClear`         | `boolean`                                                                                                                                                                                                         | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `allowCreate`        | `boolean`                                                                                                                                                                                                         | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `allowSelectAll`     | `boolean`                                                                                                                                                                                                         | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `aria-describedby`   | `string`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `className`          | `string`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `empty`              | `ReactNode`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `focusVariant`       | `"off" \| "on" \| "default" \| null`                                                                                                                                                                              | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `groupToLabel`       | `((group: Group<string>) => ReactNode)`                                                                                                                                                                           | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `help`               | `ReactNode`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `indicator`          | `Indicator`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `inputClassName`     | `string`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `items`              | `readonly (string \| Group<string>)[]`                                                                                                                                                                            | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `itemToChipColor`    | `((item: string) => "gray" \| "gray-darker" \| "gray-inverse" \| "green" \| "green-darker" \| "green-inverse" \| "blue" \| "blue-inverse" \| "red" \| "orange" \| "orange-inverse" \| "amber" \| ... 9 more ...)` | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `itemToChipLabel`    | `((item: string) => ReactNode)`                                                                                                                                                                                   | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `itemToDisabled`     | `((item: string) => boolean)`                                                                                                                                                                                     | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `itemToIcon`         | `((item: string) => ReactNode)`                                                                                                                                                                                   | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `itemToLabel`        | `((item: string) => ReactNode)`                                                                                                                                                                                   | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `itemToStringLabel`  | `((itemValue: string) => string)`                                                                                                                                                                                 | no       | —       | When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for display in the input. If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.                  |
+| `itemToStringValue`  | `((itemValue: string) => string)`                                                                                                                                                                                 | no       | —       | When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for form submission. If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.                       |
+| `label`              | `ReactNode`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `maxVisible`         | `number`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `pinnedChipLabels`   | `ReactNode[]`                                                                                                                                                                                                     | no       | —       | Labels for chips the control shows but the user does not own — a pinned set the caller keeps. - Each label gets a chip of its own, ahead of the values and outside the `maxVisible` slice. - No remove button, and no entry in `value` — there is nothing for a removal to report.                              |
+| `queryToCreateLabel` | `((query: string) => ReactNode)`                                                                                                                                                                                  | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `queryToCreateValue` | `((query: string) => string)`                                                                                                                                                                                     | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `required`           | `boolean`                                                                                                                                                                                                         | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `requiredMark`       | `RequiredMark`                                                                                                                                                                                                    | no       | —       | Which marker to show beside the label — gated by `required` so it never lies: `'required'` renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it is not; `'hidden'` renders neither. Defaults to `'required'`.                                                          |
+| `sizing`             | `"small" \| "medium" \| "default" \| null`                                                                                                                                                                        | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `tooltip`            | `ReactNode`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| `variant`            | `"primary" \| "secondary" \| null`                                                                                                                                                                                | no       | —       |                                                                                                                                                                                                                                                                                                                 |
 
 ### `field.CheckboxField`
 
@@ -483,7 +484,7 @@ Source: `src/components/BrandLogo/BrandLogo.tsx`
 
 Source: `src/blocks/AppShell/AppShell.tsx`
 
-> Compound app-root shell that follows the active brand (sidebar vs top-nav). Subcomponents: `AppShell.Sidebar`, `AppShell.Header`, `AppShell.Aside`, `AppShell.Main`. `AppShell.Main` owns the default page gutter (`tw:p-6`) — override with `className="tw:p-0"`. `AppShell.Header` and `AppShell.Aside` take `flush` — pass it when the slot hosts a chrome component that paints itself (`Navbar`, `Sidebar side="right"`), so the slot drops its own padding, background and border instead of insetting the child. Native `<div>` attributes.
+> Compound app-root shell that follows the active brand (sidebar vs top-nav). Subcomponents: `AppShell.Sidebar`, `AppShell.Header`, `AppShell.Aside`, `AppShell.Main`. `AppShell.Main` owns the default page gutter (`tw:p-6`) on a wrapper inside its scroll container — override with `contentClassName="tw:p-0"`, never a `p-*` in `className` (that sits on the scrollport and breaks every sticky header below it, `Table.Header` included). `Main` is also the scrollport by default and its content wrapper grows with the content; pass `clampContent` when the page runs its own `overflow-auto` scroller, so a `flex-1` descendant clamps to the shell instead of resolving against the content. `AppShell.Header` and `AppShell.Aside` take `flush` — pass it when the slot hosts a chrome component that paints itself (`Navbar`, `Sidebar side="right"`), so the slot drops its own padding, background and border instead of insetting the child. Native `<div>` attributes.
 
 | Prop         | Type                 | Required | Default   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | ------------ | -------------------- | -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

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

@@ -1,19 +1,18 @@
 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 { 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 { Button } from "./Button-DsRrU5F1.js";
+import { ClipboardButton } from "./ClipboardButton-D9pDjgkB.js";
+import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-BvPuYibe.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 { 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 { 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 { DiagramSkeleton } from "./internal/blocks/DiagramShared/DiagramSkeleton.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";
@@ -24,12 +23,12 @@ 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"
+	success: "tw:text-muted-foreground tw:focus-visible:outline-ring tw:not-disabled:hover:text-foreground",
+	error: "tw:text-destructive tw:focus-visible:outline-destructive tw:not-disabled:hover:text-destructive",
+	processing: "tw:text-muted-foreground tw:focus-visible:outline-ring tw:not-disabled:hover:text-foreground",
+	dismissed: "tw:text-muted-foreground tw:focus-visible:outline-ring tw:not-disabled:hover:text-foreground"
 };
-const iconClasses = "tw:size-4 tw:shrink-0 tw:basis-4";
+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 });
@@ -41,12 +40,12 @@ const CollapsibleStepHeader = ({ isExpanded, onToggle, label, variant = "success
 		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]),
+		className: cn("tw:flex tw:w-fit tw:items-center tw:gap-1.5 tw:text-left tw:text-xs tw:font-medium 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") })]
+				children: ["⁠", /* @__PURE__ */ jsx(ChevronDown, { className: cn("tw:ml-1.5 tw:inline-block tw:size-3.5 tw:align-middle tw:transition-transform", isExpanded && "tw:rotate-180") })]
 			})]
 		})]
 	});
@@ -54,24 +53,24 @@ const CollapsibleStepHeader = ({ isExpanded, onToggle, label, variant = "success
 //#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",
+	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",
 	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" });
+	if (variant === "processing") return /* @__PURE__ */ jsx(Loader2, { className: "tw:size-3.5 tw:animate-spin tw:text-muted-foreground" });
+	if (variant === "error") return /* @__PURE__ */ jsx(XCircle, { className: "tw:size-3.5 tw:text-destructive" });
+	if (variant === "dismissed") return /* @__PURE__ */ jsx(XCircle, { className: "tw:size-3.5 tw:text-muted-foreground/50" });
+	return /* @__PURE__ */ jsx(CircleCheck, { className: "tw:size-3.5 tw:text-muted-foreground/50" });
 };
 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",
+		className: "tw:relative tw:flex tw:size-5 tw:shrink-0 tw:items-center tw:justify-center tw:[background:var(--inline-step-surface,transparent)]",
 		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",
+		className: "tw:flex tw:min-w-0 tw:flex-wrap tw:items-center tw:gap-x-1.5 tw:gap-y-1 tw:text-xs tw:font-medium tw:text-muted-foreground",
 		children
 	})]
 });
@@ -113,7 +112,7 @@ const MermaidDiagram = lazy(() => import("@keboola/design/mermaid").then((module
 	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 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;
 	if (typeof node === "number") return String(node);
@@ -128,7 +127,15 @@ const getLanguage = (element) => {
 	if (typeof props.className !== "string") return void 0;
 	return props.className.match(/language-(\S+)/)?.[1];
 };
-const components = {
+/**
+* The plugins this renderer always runs.
+*
+* - GFM is part of its contract: tables route through the design `Table`, and autolinks and
+*   task lists are what an assistant answer is written in.
+* - A caller's own plugins are appended to these, never substituted for them.
+*/
+const baseRemarkPlugins = [remarkGfm];
+const baseComponents = {
 	pre({ children, ...props }) {
 		const child = Array.isArray(children) ? children[0] : children;
 		if (getLanguage(child) === "mermaid") {
@@ -207,13 +214,16 @@ const components = {
 * `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 }) => {
+const Markdown = ({ children, className, remarkPlugins, components: componentOverrides }) => {
 	return /* @__PURE__ */ jsx("div", {
 		"data-prose": true,
 		className: cn(proseClass, className),
 		children: /* @__PURE__ */ jsx(ReactMarkdown, {
-			remarkPlugins: [remarkGfm],
-			components,
+			remarkPlugins: remarkPlugins === void 0 ? baseRemarkPlugins : [...baseRemarkPlugins, ...remarkPlugins],
+			components: componentOverrides === void 0 ? baseComponents : {
+				...baseComponents,
+				...componentOverrides
+			},
 			children
 		})
 	});
@@ -223,22 +233,31 @@ const Markdown = ({ children, className }) => {
 const containerClasses = cva([
 	"tw:flex",
 	"tw:max-w-full",
-	"tw:gap-4"
+	"tw:gap-3"
 ], {
 	variants: { variant: {
-		user: ["tw:justify-self-end", "tw:flex-row-reverse"],
-		assistant: [
-			"tw:justify-self-start",
-			"tw:w-full",
-			"tw:gap-3"
-		]
+		user: ["tw:justify-end"],
+		assistant: ["tw:justify-start", "tw:w-full"]
+	} },
+	defaultVariants: { variant: "assistant" }
+});
+const stackClasses = cva([
+	"tw:flex",
+	"tw:min-w-0",
+	"tw:flex-1",
+	"tw:flex-col",
+	"tw:gap-2"
+], {
+	variants: { variant: {
+		user: ["tw:items-end"],
+		assistant: []
 	} },
 	defaultVariants: { variant: "assistant" }
 });
 const contentClasses = cva([
 	"tw:flex",
 	"tw:flex-col",
-	"tw:gap-4",
+	"tw:gap-3",
 	"tw:break-words",
 	"tw:leading-relaxed",
 	"tw:text-foreground",
@@ -252,33 +271,30 @@ const contentClasses = cva([
 			"tw:[&>*]:min-w-0"
 		],
 		user: [
-			"tw:max-w-screen-sm",
+			"tw:max-w-[min(85%,40rem)]",
 			"tw:w-fit",
 			"tw:bg-muted",
-			"tw:p-3",
-			"tw:rounded-2xl",
-			"tw:ml-6",
+			"tw:px-3",
+			"tw:py-2",
+			"tw:rounded-xl",
 			"tw:overflow-hidden",
 			"tw:break-anywhere"
 		]
 	} },
 	defaultVariants: { variant: "assistant" }
 });
-const MessageBubble = ({ variant, children, user, actions, createdAt }) => {
-	return /* @__PURE__ */ jsxs("div", {
+const MessageBubble = ({ variant, children, actions, createdAt }) => {
+	return /* @__PURE__ */ jsx("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__ */ jsxs("div", {
+			className: stackClasses({ variant }),
 			children: [/* @__PURE__ */ jsx("div", {
 				className: contentClasses({ variant }),
+				title: variant === "user" ? createdAt : void 0,
 				children
 			}), actions]
-		})]
+		})
 	});
 };
 //#endregion
@@ -665,7 +681,7 @@ 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" });
+		return /* @__PURE__ */ jsx(Send, { className: "tw:size-4 tw:translate-x-[-1px] tw:translate-y-[1px]" });
 	})();
 	const getTooltipText = () => {
 		if (status === "streaming") return "Stop";
@@ -679,9 +695,9 @@ const PromptInputSubmit = ({ ref, disabled, status = "ready" }) => {
 			disabled,
 			"aria-label": ARIA_LABEL_BY_STATUS[status],
 			size: "icon-sm",
-			variant: "invisible",
+			variant: "primary",
 			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",
+			className: cn("tw:ml-auto tw:flex tw:items-center tw:rounded-full", "tw:bg-gradient-to-br tw:from-[#61E4FF] tw:via-[#1F8FFF] tw:to-[#7C5CFF]", "tw:hover:not-disabled:brightness-110"),
 			children: status !== "submitted" && icon
 		}) })
 	}), getTooltipText() && /* @__PURE__ */ jsx(Tooltip.Content, {
@@ -742,12 +758,16 @@ const wrapperVariants = cva(null, {
 		inline: ""
 	} }
 });
-const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, disabled, disableSubmit, value = "", onValueChange, status = "ready", maxRows = 6, minRows, commands, ...textareaProps }) => {
+const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, disabled, disableSubmit, value = "", onValueChange, status = "ready", maxRows = 6, minRows, commands, autoFocus, ...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);
+	const autoFocusRef = useRef(autoFocus);
+	useEffect(() => {
+		if (autoFocusRef.current) textareaRef.current?.focus({ preventScroll: true });
+	}, []);
 	if (dismissedValue !== null && value !== dismissedValue) setDismissedValue(null);
 	const hasCommands = !!commands && commands.length > 0;
 	const valueLooksLikeSlashCommand = value.startsWith("/") && !/\s/.test(value);
@@ -878,7 +898,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 		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),
+		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-card tw:text-card-foreground tw:shadow-lg", className),
 		"data-testid": "question-root",
 		"data-question-step": currentStep,
 		"data-question-total-steps": totalSteps,
@@ -889,10 +909,10 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 				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",
+						className: "tw:m-0 tw:text-base tw:font-semibold tw:leading-6",
 						children: question
 					}), header && /* @__PURE__ */ jsx("p", {
-						className: "tw:m-0 tw:text-xs tw:leading-4 tw:text-neutral-500",
+						className: "tw:m-0 tw:text-xs tw:leading-4 tw:text-muted-foreground",
 						children: header
 					})]
 				}), onClose && /* @__PURE__ */ jsx(Button, {
@@ -909,7 +929,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 				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",
+						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-accent",
 						onClick: () => handleOptionToggle(option.id),
 						onKeyDown: handleKeyDown(() => handleOptionToggle(option.id)),
 						role: "button",
@@ -925,16 +945,17 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 							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",
+									className: "tw:text-sm tw:font-medium tw:leading-none",
 									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"),
+								"data-testid": "question-option-preview",
+								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-border tw:bg-muted tw:p-2 tw:text-foreground"),
 								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",
+									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-foreground",
 									children: option.preview
 								})
 							})]
@@ -942,7 +963,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 					}, 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",
+							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-accent",
 							onClick: handleCustomRowClick,
 							onKeyDown: handleKeyDown(handleCustomRowClick),
 							role: "button",
@@ -953,7 +974,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 								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"),
+								className: cn("tw:text-sm tw:font-medium tw:leading-none", !multiSelect && isCustomSelected && "tw:text-primary"),
 								children: "Other"
 							})]
 						}), /* @__PURE__ */ jsx(TextInput, {
@@ -980,7 +1001,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 					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"),
+					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-border"),
 					children: [
 						hasSteps && /* @__PURE__ */ jsxs("div", {
 							className: "tw:flex tw:items-center tw:gap-2",
@@ -994,7 +1015,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 									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",
+									className: "tw:text-xs tw:leading-4 tw:text-muted-foreground",
 									children: [
 										currentStep,
 										" of ",
@@ -1092,9 +1113,9 @@ 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),
+		className: cn("tailwindcss-preflight tw:flex tw:items-center tw:justify-start tw:gap-2.5 tw:whitespace-nowrap", "tw:rounded-lg tw:px-3 tw:py-2", "tw:text-left tw:text-sm tw:font-medium tw:text-foreground", "tw:transition-colors tw:not-disabled:hover:bg-accent", "tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-ring tw:focus-visible:ring-offset-1", "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", {
+		children: [icon ?? /* @__PURE__ */ jsx(Sparkles, { 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
 		})]
@@ -1104,10 +1125,10 @@ const SuggestedPrompt = ({ label, disabled, onClick, icon, className }) => {
 //#region src/blocks/AIKit/ThinkingIndicator.tsx
 const ThinkingIndicator = ({ label = "Thinking..." }) => {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "tw:flex tw:items-center tw:gap-2",
+		className: "tw:flex tw:items-center tw:gap-1.5",
 		"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: [/* @__PURE__ */ jsx(Loader2, { 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
 		})]
 	});
@@ -1258,6 +1279,63 @@ const ToolCallChip = ({ label, state, icon, trailing, onClick, className }) => {
 	});
 };
 //#endregion
+//#region src/blocks/AIKit/ToolCallStatusHeader.tsx
+const headerVariants = cva("tw:flex tw:items-center tw:justify-between tw:gap-2 tw:px-2.5 tw:py-1.5", {
+	variants: { status: {
+		processing: "tw:border-b tw:border-border/60",
+		warning: "tw:bg-warning/10",
+		success: "tw:border-b tw:border-border/60",
+		error: "tw:bg-destructive/10"
+	} },
+	defaultVariants: { status: "success" }
+});
+const statusInk = {
+	processing: "tw:text-muted-foreground",
+	warning: "tw:text-warning",
+	success: "tw:text-muted-foreground",
+	error: "tw:text-destructive"
+};
+const statusIconInk = {
+	processing: "tw:text-muted-foreground",
+	warning: "tw:text-warning",
+	success: "tw:text-success/70",
+	error: "tw:text-destructive"
+};
+const ToolCallStatusHeader = ({ icon: IconComponent, iconSpin, status, text, needsConfirmation, isCollapsible, isCollapsed, onToggleCollapse }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		role: isCollapsible ? "button" : void 0,
+		tabIndex: isCollapsible ? 0 : void 0,
+		"aria-expanded": isCollapsible ? !isCollapsed : void 0,
+		"data-status": status,
+		className: cn(headerVariants({ status }), isCollapsible && "tw:cursor-pointer"),
+		onClick: isCollapsible ? onToggleCollapse : void 0,
+		onKeyDown: isCollapsible ? (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				onToggleCollapse?.();
+			}
+		} : void 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "tw:flex tw:min-w-0 tw:flex-1 tw:items-center tw:gap-1.5",
+			children: [/* @__PURE__ */ jsx(IconComponent, { className: cn("tw:size-3.5 tw:shrink-0", statusIconInk[status], iconSpin && "tw:animate-spin") }), /* @__PURE__ */ jsx("span", {
+				"data-testid": "tool-status-text",
+				className: cn("tw:truncate tw:pr-0.5 tw:text-xs tw:font-medium", statusInk[status]),
+				children: text
+			})]
+		}), (needsConfirmation || isCollapsible) && /* @__PURE__ */ jsxs("div", {
+			className: "tw:flex tw:shrink-0 tw:items-center tw:gap-2",
+			children: [needsConfirmation && /* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:items-center tw:gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-testid": "tool-confirmation-required",
+					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" }))]
+		})]
+	});
+};
+//#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;
@@ -1296,15 +1374,17 @@ 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 defaultLabel = `Usage: ${Math.round(clampPercentage(value))}%${alert ? " (usage alert)" : ""}`;
+	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 }), alert && /* @__PURE__ */ jsx(AlertCircle, {
+			children: [/* @__PURE__ */ jsx(UsageStatsRing, { value }), hasAlert && /* @__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"
+				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, {
@@ -1315,6 +1395,6 @@ const UsageStats = ({ value, alert = false, children, className, ariaLabel, alig
 	})] });
 };
 //#endregion
-export { AnswerSummary, CollapsibleStepHeader, InlineStepDetail, InlineStepLabel, Markdown, MessageBubble, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, UsageStats, UsageStatsRing };
+export { AnswerSummary, CollapsibleStepHeader, InlineStepDetail, InlineStepLabel, Markdown, MessageBubble, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageStats, UsageStatsRing };
 
-//# sourceMappingURL=AIKit-DiS0CVOW.js.map
+//# sourceMappingURL=AIKit-DDg5DBCG.js.map