@keboola/design 15.0.0 → 15.1.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @keboola/design
 
+## 15.1.0
+
+### Minor Changes
+
+- `Badge` `color` gains status values — `success`, `warning`, `info`, `destructive`, `neutral`, each with a pastel `-subtle` twin — read from the brand's status tokens, so a status badge re-skins with the brand and follows dark mode. Keep the hue colours for categorical labels. New pastel tokens `bg-<status>-subtle` / `text-<status>-subtle-foreground` back the `-subtle` values; set `--<status>-subtle` / `--<status>-subtle-foreground` to override them. `color="red-inverse"` adds the missing pastel error hue, with a dark-mode pair.
+
+- `useTimeout(callback, delayMs)` runs a callback once after a delay and clears the timer on unmount; a new callback identity does not restart it (UT-5890)
+
+- AIKit: `AttachmentChip` takes `lead` and `label`, `ContextChip` takes `number` and an optional `excerpt` and `onRemove`, `JumpToLatest` takes `tooltip`.
+
+- `PromptInput` takes `shellClassName` for the element around its frame and `onFocusChange`; that element carries `data-focused` while focus is inside.
+
+- `AnswerActions` takes `extraActions` (`{ id, label, icon, onSelect, disabled? }[]`), drawn in the style of copy and thumbs; `actions` stays for a raw node.
+
+- `PromptInput` takes `mentionInsert`: the text a picked `@` mention leaves at the caret, in the same update that removes the token.
+
+### Patch Changes
+
+- Dark mode sits quieter: solid `Badge` colours drop to a deeper rung and `Modal` gets a hairline edge.
+  - `Badge` `green`, `green-darker`, `blue`, `red`, `orange`, `amber`, `teal`, `purple` and `cyan` keep their light fill and take a deeper fill in dark (`green-darker` one rung deeper than `green`), white text where it clears 4.5:1.
+  - `Modal.Content` draws a hairline ring in dark, so its edge no longer depends on the scrim.
+  - `InlineStepLabel` meta text reads `muted-foreground` at full strength, which clears 4.5:1 in dark and reads clearer in light.
+
+- `Modal`, `AlertModal`, `Sheet`, `HoverCard` and the `ZoomableSvg` fullscreen overlay share one layer with `DropdownMenu`, `Popover`, `Select` and `Combobox`: the `z-overlay` utility, backed by the `--z-index-overlay` theme token (`1055`). The one opened last paints on top, so a modal opened from a menu item covers that menu, and anything opened inside a modal sits above it. `Tooltip` (`z-[1060]`) stays above the layer.
+
 ## 15.0.0
 
 ### Major Changes

package/dist/{AIKit-CaAW4GLx.js → AIKit-BR6jfsdI.js}

@@ -7,10 +7,10 @@ import { ClipboardButton } from "./ClipboardButton-B1Hr_n_Z.js";
 import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-DAvvlGOz.js";
 import { Truncated } from "./internal/components/Truncated.js";
 import { useStableCallback } from "./internal/hooks/useStableCallback.js";
-import { HoverCard } from "./HoverCard-Cv5rmvJq.js";
+import { HoverCard } from "./HoverCard-Cf9iYyaW.js";
 import { Command } from "./Command-DhXmqFLT.js";
 import { TextInput } from "./TextInput-CR0_USaY.js";
-import { Badge } from "./Badge-5GHIsgRS.js";
+import { Badge } from "./Badge-CqlOE5A2.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
 import { Kbd, keys } from "./Kbd-CflKthfu.js";
 import { Collapsible } from "./Collapsible-DD4xTL75.js";
@@ -18,7 +18,7 @@ import { Alert } from "./Alert-Chz6KZ7e.js";
 import { Table as Table$1, tableAriaSort } from "./Table-CilEvpMq.js";
 import { DiagramSkeleton } from "./internal/blocks/DiagramShared/DiagramSkeleton.js";
 import { DiagramSource, makeResponsive } from "./svgTransforms-Hnvev3Vs.js";
-import { ZoomableSvg, toSvgFileContent } from "./ZoomableSvg-DnFXo2L4.js";
+import { ZoomableSvg, toSvgFileContent } from "./ZoomableSvg-CxXKanUR.js";
 import { Progress } from "./internal/components/Progress.js";
 import { digitFromKeyCode, useAltDigitHotkey } from "./internal/hooks/useAltDigitHotkey.js";
 import { createContext, isValidElement, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -93,7 +93,7 @@ const SIZES = {
 * - A vote can be changed but not withdrawn; pressing the pressed one re-sends it.
 * - The caller owns the recorded vote and the write.
 */
-const AnswerActions = ({ copyText, vote, onVote, onCopy, actions, labels = DEFAULT_LABELS, confirmation, size = "small", layout = "inline", onDownComment, commentPlaceholder = "What was wrong? (optional)", onRegenerate, regenerateLabel = "Ask again" }) => {
+const AnswerActions = ({ copyText, vote, onVote, onCopy, actions, extraActions = [], labels = DEFAULT_LABELS, confirmation, size = "small", layout = "inline", onDownComment, commentPlaceholder = "What was wrong? (optional)", onRegenerate, regenerateLabel = "Ask again" }) => {
 	const { button, gap } = SIZES[size];
 	const votes = VOTE_BUTTONS.map(({ vote: candidate, icon }) => {
 		const isRecorded = vote === candidate;
@@ -132,6 +132,19 @@ const AnswerActions = ({ copyText, vote, onVote, onCopy, actions, labels = DEFAU
 			children: /* @__PURE__ */ jsx(RotateCcw, { className: "tw:size-4" })
 		})
 	}) : null;
+	const extras = extraActions.map(({ id, label, icon, onSelect, disabled }) => /* @__PURE__ */ jsx(Tooltip, {
+		tooltip: label,
+		placement: "top",
+		triggerAsChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			size: button,
+			variant: "invisible",
+			"aria-label": label,
+			disabled,
+			onClick: onSelect,
+			children: icon
+		})
+	}, id));
 	const comment = onDownComment && vote === "down" ? /* @__PURE__ */ jsx(AnswerCommentInput, {
 		placeholder: commentPlaceholder,
 		onSubmit: onDownComment
@@ -155,7 +168,8 @@ const AnswerActions = ({ copyText, vote, onVote, onCopy, actions, labels = DEFAU
 				children: [
 					actions,
 					regenerate,
-					copy
+					copy,
+					extras
 				]
 			})
 		]
@@ -165,6 +179,7 @@ const AnswerActions = ({ copyText, vote, onVote, onCopy, actions, labels = DEFAU
 		"aria-label": "Answer actions",
 		children: [
 			copy,
+			extras,
 			votes,
 			regenerate,
 			actions,
@@ -380,7 +395,7 @@ const InlineStepLabel = ({ variant, children, meta, detail, defaultExpanded = fa
 			children: [
 				children,
 				meta && /* @__PURE__ */ jsx("span", {
-					className: "tw:font-normal tw:text-muted-foreground/70",
+					className: "tw:font-normal tw:text-muted-foreground",
 					children: meta
 				}),
 				detail && /* @__PURE__ */ jsx(Button, {
@@ -467,7 +482,7 @@ const AnswerSummary = ({ items, variant = "success", statusLabel = DEFAULT_STATU
 };
 //#endregion
 //#region src/blocks/AIKit/AttachmentChip.tsx
-const Lead = ({ status, thumbnailUrl }) => {
+const Lead = ({ status, thumbnailUrl, lead }) => {
 	if (status === "uploading") return /* @__PURE__ */ jsx(LoaderCircle, {
 		"aria-hidden": true,
 		className: "tw:size-4 tw:shrink-0 tw:animate-spin"
@@ -476,6 +491,7 @@ const Lead = ({ status, thumbnailUrl }) => {
 		"aria-hidden": true,
 		className: "tw:size-4 tw:shrink-0 tw:text-destructive"
 	});
+	if (lead) return lead;
 	if (thumbnailUrl) return /* @__PURE__ */ jsx("img", {
 		src: thumbnailUrl,
 		alt: "",
@@ -492,16 +508,17 @@ const Lead = ({ status, thumbnailUrl }) => {
 * - Capped width with a truncating name, so a long filename cannot push the text away.
 * - `error` explains itself in a tooltip; the remove control stays available in every status.
 */
-const AttachmentChip = ({ name, thumbnailUrl, status, error, onRemove, trailing, className }) => {
+const AttachmentChip = ({ name, thumbnailUrl, lead, label, status, error, onRemove, trailing, className }) => {
 	const chip = /* @__PURE__ */ jsxs("span", {
 		"data-status": status,
 		className: cn("tailwindcss-preflight tw:inline-flex tw:h-6 tw:min-w-0 tw:max-w-48 tw:items-center tw:gap-1 tw:rounded-md tw:bg-muted tw:px-2 tw:text-xs tw:text-muted-foreground", status === "error" && "tw:text-destructive", className),
 		children: [
 			/* @__PURE__ */ jsx(Lead, {
 				status,
-				thumbnailUrl
+				thumbnailUrl,
+				lead
 			}),
-			/* @__PURE__ */ jsx("span", {
+			label ?? /* @__PURE__ */ jsx("span", {
 				className: "tw:min-w-0 tw:truncate",
 				children: name
 			}),
@@ -788,7 +805,7 @@ const CONTEXT_CHIP_EXPANDABLE_LENGTH = 120;
 * - The excerpt is clamped to two lines; "Show all" appears once it is long enough to be cut.
 * - Images sit under the excerpt as small thumbnails.
 */
-const ContextChip = ({ label, excerpt, images = [], onRemove, className }) => {
+const ContextChip = ({ label, excerpt = "", images = [], number, onRemove, className }) => {
 	const [isExpanded, setIsExpanded] = useState(false);
 	const isExpandable = excerpt.length > 120;
 	return /* @__PURE__ */ jsxs("div", {
@@ -797,24 +814,28 @@ const ContextChip = ({ label, excerpt, images = [], onRemove, className }) => {
 			/* @__PURE__ */ jsxs("div", {
 				className: "tw:flex tw:items-center tw:gap-1 tw:text-muted-foreground",
 				children: [
-					/* @__PURE__ */ jsx(Quote, {
+					number === void 0 ? /* @__PURE__ */ jsx(Quote, {
 						"aria-hidden": true,
 						className: "tw:size-3.5 tw:shrink-0"
+					}) : /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "tw:inline-flex tw:size-4 tw:shrink-0 tw:items-center tw:justify-center tw:rounded-full tw:bg-primary tw:text-[10px] tw:font-semibold tw:text-primary-foreground",
+						children: number
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: "tw:min-w-0 tw:flex-1 tw:truncate tw:font-medium",
 						children: label
 					}),
-					/* @__PURE__ */ jsx("button", {
+					onRemove && /* @__PURE__ */ jsx("button", {
 						type: "button",
-						"aria-label": `Remove ${label}`,
+						"aria-label": number === void 0 ? `Remove ${label}` : `Remove ${number}, ${label}`,
 						onClick: onRemove,
 						className: "tw:shrink-0 tw:cursor-pointer tw:rounded-sm tw:border-0 tw:bg-transparent tw:p-0 tw:text-muted-foreground tw:hover:text-foreground tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-ring",
 						children: /* @__PURE__ */ jsx(X, { className: "tw:size-3.5" })
 					})
 				]
 			}),
-			/* @__PURE__ */ jsx("p", {
+			excerpt && /* @__PURE__ */ jsx("p", {
 				className: cn("tw:m-0 tw:whitespace-pre-wrap tw:break-words tw:text-foreground", !isExpanded && "tw:line-clamp-2"),
 				children: excerpt
 			}),
@@ -1057,9 +1078,9 @@ const InlineStepGroup = ({ label, variant = "success", isExpanded, onToggle, sur
 * - Renders nothing while `visible` is false.
 * - Positioning is the host's: pass `className` to pin it over the list.
 */
-const JumpToLatest = ({ visible, working = false, onClick, label, className }) => {
+const JumpToLatest = ({ visible, working = false, onClick, label, tooltip, className }) => {
 	if (!visible) return null;
-	return /* @__PURE__ */ jsxs(Button, {
+	const button = /* @__PURE__ */ jsxs(Button, {
 		variant: "outline",
 		size: label ? "small" : "icon-sm",
 		"aria-label": label ?? "Scroll to bottom",
@@ -1068,6 +1089,13 @@ const JumpToLatest = ({ visible, working = false, onClick, label, className }) =
 		className: cn("tw:rounded-full tw:shadow-md", working && "tw:animate-pulse tw:motion-reduce:animate-none", className),
 		children: [/* @__PURE__ */ jsx(ArrowDown, { className: "tw:size-4" }), label]
 	});
+	if (!tooltip) return button;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		tooltip,
+		placement: "left",
+		triggerAsChild: true,
+		children: button
+	});
 };
 //#endregion
 //#region src/blocks/AIKit/DiagramBlock.tsx
@@ -3016,11 +3044,17 @@ const wrapperVariants = cva(null, {
 		inline: ""
 	} }
 });
-const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, attachments, className, disabled, disableSubmit, busy = false, blurOnEscape = false, onKeyDown, onPasteFiles, canSubmitEmpty = false, allowSendWhileBusy = false, canAbort = true, value = "", onValueChange, status = "ready", maxRows = 6, minRows, commands, commandsEmptyText = "No commands found", commandsLoading = false, slashTrigger = "value", commandsGroupAction, panel, mentions, onMentionSelect, mentionsEmptyText = "Nothing to attach", mentionsGroupHeading, mentionsMultiple = false, history, autoFocus, textareaRef: publishedRef, ...textareaProps }) => {
+const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, attachments, className, shellClassName, onFocusChange, disabled, disableSubmit, busy = false, blurOnEscape = false, onKeyDown, onPasteFiles, canSubmitEmpty = false, allowSendWhileBusy = false, canAbort = true, value = "", onValueChange, status = "ready", maxRows = 6, minRows, commands, commandsEmptyText = "No commands found", commandsLoading = false, slashTrigger = "value", commandsGroupAction, panel, mentions, onMentionSelect, mentionInsert, mentionsEmptyText = "Nothing to attach", mentionsGroupHeading, mentionsMultiple = false, history, autoFocus, textareaRef: publishedRef, ...textareaProps }) => {
 	const defaultMinRows = variant === "inline" ? 1 : 2;
 	const canSendWhileBusy = allowSendWhileBusy && (status === "streaming" || status === "submitted") && !busy && !disabled && !disableSubmit && value.trim() !== "";
 	const showSeparateStop = allowSendWhileBusy && canAbort && (canSendWhileBusy || status === "submitted");
 	const isDisabled = busy || !canSendWhileBusy && (disabled || disableSubmit || !canSubmitEmpty && !value.trim()) && status !== "streaming" && status !== "interrupted";
+	const [isFocused, setIsFocused] = useState(false);
+	const changeFocus = (next) => {
+		if (next === isFocused) return;
+		setIsFocused(next);
+		onFocusChange?.(next);
+	};
 	const textareaId = useId();
 	const textareaRef = useRef(null);
 	const setTextareaNode = useCallback((node) => {
@@ -3104,7 +3138,7 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, att
 			return;
 		}
 		if (mentionToken) {
-			const keep = mentionsMultiple ? "@" : "";
+			const keep = mentionsMultiple ? "@" : mentionInsert?.(item) ?? "";
 			const next = value.slice(0, mentionToken.start) + keep + value.slice(mentionToken.end);
 			const nextCaret = mentionToken.start + keep.length;
 			onValueChange?.(next);
@@ -3179,11 +3213,16 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, att
 		textareaRef.current?.focus();
 	};
 	const formEl = /* @__PURE__ */ jsx("div", {
-		className: wrapperVariants({ variant }),
+		className: cn(wrapperVariants({ variant }), shellClassName),
+		"data-focused": isFocused ? "" : void 0,
 		children: /* @__PURE__ */ jsxs("form", {
 			"data-testid": "prompt-input",
 			"data-status": status,
 			onKeyDown: handleOnFormKeyDown,
+			onFocus: () => changeFocus(true),
+			onBlur: (event) => {
+				if (!event.currentTarget.contains(event.relatedTarget)) changeFocus(false);
+			},
 			onMouseDown: handleOnMouseDown,
 			onSubmit: handleOnSubmit,
 			className: cn(promptInputVariants({ variant }), disabled && "tw:bg-none tw:border-border tw:shadow-[inset_0_100vw_rgb(var(--muted))] tw:cursor-default", className),
@@ -4438,4 +4477,4 @@ const UsageStats = ({ value, alert = false, children, className, ariaLabel, alig
 //#endregion
 export { ANSWER_SOURCES_VISIBLE, AnswerActions, AnswerSources, AnswerSummary, AttachmentChip, CONTEXT_CHIP_EXPANDABLE_LENGTH, ChatInlineIcon, ChatNotice, CollapsibleStepHeader, ContextChip, DIAGRAM_LANGUAGES, FileDownloadChip, FileGallery, InlineStepDetail, InlineStepGroup, InlineStepLabel, JumpToLatest, Markdown, MarkdownTable, MessageBubble, ModeChip, PROMPT_INPUT_CONTAINER, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SourceChip, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageBar, UsageStats, UsageStatsRing, clampPercentage, findMentionToken, findSlashToken, formatPercentage, getChatInlineIconName, splitSealedBlocks, withholdOpenTail };
 
-//# sourceMappingURL=AIKit-CaAW4GLx.js.map
+//# sourceMappingURL=AIKit-BR6jfsdI.js.map