@keboola/design 13.0.1 → 13.1.0

package/AGENTS.md

@@ -99,6 +99,8 @@ This file answers **which** component to use; [`COMPONENT-API.md`](./COMPONENT-A
 
 `FileUpload` composes `FileUpload.DropZone` (the dashed box, owning the drag / error visuals) with `FileUpload.FileList` (selected files; `invalid` tints the rows). It deliberately ships **no** rejection copy — the wording is product copy, so read the current rejections with `useFileUploadRejections()` inside `FileUpload` and write the sentence yourself. Reach for `useFileDropTarget` only when there is no box to render: it returns `getRootProps()` / `isDragActive` for an affordance you style, and `noClick` / `noKeyboard` keep an already-interactive subtree (a composer, a form) from opening the file dialog on every click.
 
+**A `MarkdownEditor` whose markdown another reader renders** (a reply posted to a ticket, a comment shown with `react-markdown`) takes `autoLink` and `pasteMarkdown`: without them a bare URL exports escaped (`a\_b`) and links elsewhere to the wrong address, and a plain-text paste of a fence, list or table lands one paragraph per line. Leave them off where a stored value is saved back on every `onChange`: `autoLink` exports an escaped stored URL unescaped, so it rewrites that value when it is opened.
+
 **`InputGroup.Addon` (`align="inline-start"` / `"inline-end"`) keeps its own content width** — it no longer gives up space to the input, so a badge or a rendered selection stays fully visible instead of being squeezed to an ellipsis. Bound long, caller-controlled content yourself (a `max-w-[…] overflow-hidden` on the addon) if it isn't a fixed-size icon or button. The exception is `TextInput`'s `rightSuffixVariant="addon"` suffix, which shrinks and ellipsizes inline content instead. `InputGroup`'s padding/sizing rules reach any descendant `input`/`textarea`, not just a direct child, so a consumer that wraps the input in its own layout (chips, an overlay) picks up that padding automatically — cancel it with `!px-0`/`!py-0` where the wrapping layout already owns its own edge padding (see `MultiCombobox`).
 
 ### Status surfaces

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @keboola/design
 
+## 13.1.0
+
+### Minor Changes
+
+- `Question` answers to the keyboard: every option and "Other" carry a number, a digit or Enter picks (a picked key turns into a check), ↑↓ move, ⌘/Ctrl+Enter sends, Space skips. `autoFocus` focuses the card; `enableShortcuts` adds ⌥1–9 from anywhere. New `useAltDigitHotkey` hook. Kai's question card uses both (DES-209)
+
+- Kai's follow-ups are message-shaped bubbles (`SuggestedPrompt variant="bubble"`): ↑ from an empty composer enters them, ↑ / ↓ / Tab move, Enter sends and returns the caret (DES-215)
+
+- `MarkdownEditor` takes two opt-in props, both off by default and ignored with `singleLine`; with both off the editor and its markdown are unchanged.
+  - `autoLink`: a typed, pasted or loaded bare URL (`https://`, `http://`, `www.`) or email address exports as typed, `https://example.com/a_b` instead of `https://example.com/a\_b`, so any CommonMark or GFM reader links the same address, and no `*x*` inside it turns italic. What counts as a URL and where it ends follow GFM's autolink rules (`remark-gfm`): trailing `!"'*,.:;?_~]`, an unbalanced `)` and an entity like `&amp;` stay outside. In the box it becomes a link where Lexical's autolink accepts it, with whitespace or `.,;` on both sides; one right after `(` or `<` still exports as typed but shows as text. Code blocks hold no links and inline code exports as code. A value stored with the old escaping (`https://example.com/a\_b`) loads as the same URL and exports unescaped, so the editor emits `onChange` once, on load, with the healed value.
+  - `pasteMarkdown`: a plain-text paste (`text/plain` with no `text/html` and no files) is read as markdown, with the same rules as `value`, and inserted at the selection, so a pasted fence, list, nested list, table or log keeps its shape instead of becoming one paragraph per line. HTML pastes, file pastes and pastes inside a code block keep the current behaviour. One undo removes the whole paste.
+
+- `MarkdownEditor` takes `toolbarMode` and starts the caret where the placeholder is.
+  - `toolbarMode="fixed"` pins the formatting toolbar to the top of the editor instead of floating it over the selection, so a comment or reply box shows it takes Markdown before anything is selected. It renders in the editor rather than portalled to `document.body`, so it inherits the consumer's token scope.
+  - `showToolbar` still decides whether the toolbar shows at all; `toolbarMode` defaults to `floating`, so nothing changes for existing consumers.
+  - The placeholder now covers the editor's content box and repeats its padding instead of guessing an offset, and the editable's first and last blocks drop the `prose` margins that `prose` zeroes only for its own direct children. An empty editor's placeholder and caret line up, and non-`compact` content no longer starts 1.25em below the top padding.
+
+- `useNotification` takes `remindAfter` (ms): a notification the user dismissed comes back after that long while it is still enabled. A visible notification follows its `title` and `description` when they are strings, and a notification without an `id` keeps one id for the component's lifetime — so unmounting before the first frame no longer dismisses every toast on screen.
+
+### Patch Changes
+
+- The README's Storybook links point at `design-keboola-engineering.vercel.app`, the Storybook CI publishes on every release.
+
+## 13.0.2
+
+### Patch Changes
+
+- `DropdownMenu.RadioItem` with `indicator="none"` tints its checked row from theme tokens — `secondary` on legacy chrome, `primary/10` on argo — so the row stays legible under the dark scheme instead of painting a light band behind light text.
+
+- Kai composer submit button: the gradient no longer shows a 1px sliver along its edge.
+
 ## 13.0.1
 
 ### Patch Changes

package/README.md

@@ -3,9 +3,9 @@
 The Keboola design system — shadcn-aligned, Radix-underneath, Lucide icons.
 
 [![npm version](https://img.shields.io/npm/v/@keboola/design.svg)](https://www.npmjs.com/package/@keboola/design)
-[![Storybook](https://img.shields.io/badge/Storybook-live-FF4785)](https://design-keboola.vercel.app/)
+[![Storybook](https://img.shields.io/badge/Storybook-live-FF4785)](https://design-keboola-engineering.vercel.app/)
 
-📦 **Storybook:** https://design-keboola.vercel.app/
+📦 **Storybook:** https://design-keboola-engineering.vercel.app/
 
 📖 **Decision tree:** [`AGENTS.md`](./AGENTS.md) — which component to use when (ships in the tarball).
 🔧 **Prop signatures:** [`COMPONENT-API.md`](./COMPONENT-API.md) — generated, version-pinned (ships in the tarball).

package/dist/{AIKit-VB7CXeQk.js → AIKit-BVCWP9Ks.js}

@@ -9,13 +9,14 @@ import { Truncated } from "./internal/components/Truncated.js";
 import { HoverCard } from "./HoverCard-B8OKu9XZ.js";
 import { Command } from "./Command-BQPiZCNz.js";
 import { TextInput } from "./TextInput-BWYXbfs4.js";
-import { Checkbox } from "./Checkbox-8yIIgY7g.js";
 import { Badge } from "./Badge-Dz0cj6rj.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
 import { Table as Table$1 } from "./Table-BaVT5Tkn.js";
 import { DiagramSkeleton } from "./internal/blocks/DiagramShared/DiagramSkeleton.js";
 import { DiagramSource } from "./DiagramSource-C5_d8Gdj.js";
+import { Kbd, keys } from "./Kbd-J4n1J6i4.js";
 import { Progress } from "./internal/components/Progress.js";
+import { digitFromKeyCode, useAltDigitHotkey } from "./internal/hooks/useAltDigitHotkey.js";
 import { Slot } from "@radix-ui/react-slot";
 import { createContext, isValidElement, use, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { cva } from "class-variance-authority";
@@ -1444,7 +1445,7 @@ const PromptInputSubmit = ({ ref, disabled, status = "ready" }) => {
 			size: "icon-sm",
 			variant: "primary",
 			isLoading: status === "submitted",
-			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"),
+			className: cn("tw:ml-auto tw:flex tw:items-center tw:rounded-full", "tw:bg-gradient-to-br tw:bg-origin-border tw:from-[#61E4FF] tw:via-[#1F8FFF] tw:to-[#7C5CFF]", "tw:hover:not-disabled:brightness-110"),
 			children: status !== "submitted" && icon
 		}) })
 	}), getTooltipText() && /* @__PURE__ */ jsx(Tooltip.Content, {
@@ -1740,33 +1741,153 @@ PromptInput.Action = PromptInputAction;
 PromptInput.MenuTrigger = PromptInputMenuTrigger;
 //#endregion
 //#region src/blocks/AIKit/Question.tsx
+const isEditableTarget = (target) => target instanceof HTMLElement && (target.isContentEditable || [
+	"INPUT",
+	"TEXTAREA",
+	"SELECT"
+].includes(target.tagName));
+const isFieldWithText = (element) => {
+	if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) return element.value !== "";
+	return element instanceof HTMLElement && element.isContentEditable && !!element.textContent;
+};
+const hasCommandModifier = (e) => e.altKey || e.ctrlKey || e.metaKey;
+const SEND_KEY_CLASS = "tw:!bg-white/20 tw:!text-primary-foreground";
+const keyRange = (count) => count > 1 ? `1–${count}` : "1";
+/** An option's key, or a blank slot past the ninth; a picked option's turns into a check. */
+const OptionKey = ({ digit, checked }) => digit === null && !checked ? /* @__PURE__ */ jsx("span", {
+	"aria-hidden": true,
+	className: "tw:w-5 tw:shrink-0"
+}) : /* @__PURE__ */ jsx(Kbd, {
+	"aria-hidden": true,
+	className: cn("tw:-my-0.5", checked && "tw:!bg-primary tw:!text-primary-foreground"),
+	"data-testid": "question-option-digit",
+	children: checked ? /* @__PURE__ */ jsx(Check, { className: "tw:size-3 tw:animate-in tw:fade-in tw:zoom-in-50 tw:duration-150" }) : digit
+});
 const handleKeyDown = (callback) => (e) => {
+	if (hasCommandModifier(e) || e.repeat) return;
 	if (e.key === "Enter" || e.key === " ") {
 		e.preventDefault();
 		callback();
 	}
 };
-const Question = ({ question, header, options, multiSelect = true, selectedOptionIds = [], onSelectionChange, customAnswer = "", onCustomAnswerChange, onCustomAnswerConfirm, showCustomAnswer = true, customAnswerPlaceholder = "Type your answer…", showSkip = true, onSkip, onClose, onNext, submitTooltip, onPrevious, currentStep, totalSteps, renderPreview, className }) => {
+const Question = ({ question, header, options, multiSelect = true, selectedOptionIds = [], onSelectionChange, customAnswer = "", onCustomAnswerChange, onCustomAnswerConfirm, showCustomAnswer = true, customAnswerPlaceholder = "Type your answer…", showSkip = true, onSkip, onClose, onNext, submitTooltip, onPrevious, currentStep, totalSteps, renderPreview, autoFocus = false, enableShortcuts = false, className }) => {
 	const [isCustomExpanded, setIsCustomExpanded] = useState(false);
+	const [activeRow, setActiveRow] = useState(0);
+	const [pendingId, setPendingId] = useState(null);
+	const rootRef = useRef(null);
+	const rowsRef = useRef([]);
+	const customInputRef = useRef(null);
 	const isCustomSelected = isCustomExpanded || customAnswer.length > 0;
 	const hasSteps = currentStep != null && totalSteps != null;
 	const showStepControls = hasSteps && totalSteps > 1;
 	const showSkipButton = showSkip && onSkip != null;
-	const showSubmitButton = multiSelect || isCustomSelected;
+	const chosenId = multiSelect ? null : pendingId ?? selectedOptionIds[0] ?? null;
+	const showSubmitButton = multiSelect || isCustomSelected || chosenId !== null;
 	const showFooter = showStepControls || showSkipButton || showSubmitButton;
 	const progressValue = hasSteps ? currentStep / totalSteps * 100 : 0;
 	const isFirstStep = currentStep === 1;
 	const isLastStep = hasSteps && currentStep === totalSteps;
+	const numberedCount = Math.min(options.length, 9);
+	const otherDigit = showCustomAnswer && options.length < 9 ? options.length + 1 : null;
+	const rowCount = options.length + (showCustomAnswer ? 1 : 0);
+	const tabbableRow = activeRow < rowCount ? activeRow : 0;
 	const handleOptionToggle = (optionId) => {
 		if (multiSelect) {
 			const nextIds = selectedOptionIds.includes(optionId) ? selectedOptionIds.filter((id) => id !== optionId) : [...selectedOptionIds, optionId];
 			onSelectionChange?.(nextIds);
 		} else {
 			setIsCustomExpanded(false);
+			setPendingId(null);
 			onCustomAnswerChange?.("");
 			onSelectionChange?.([optionId]);
 		}
 	};
+	const handleOptionKey = (optionId) => {
+		if (multiSelect) handleOptionToggle(optionId);
+		else {
+			setIsCustomExpanded(false);
+			onCustomAnswerChange?.("");
+			setPendingId(optionId);
+		}
+	};
+	useAltDigitHotkey({
+		count: numberedCount,
+		onDigit: (index) => handleOptionKey(options[index].id),
+		enabled: enableShortcuts,
+		ref: rootRef
+	});
+	useEffect(() => {
+		if (!autoFocus || isFieldWithText(document.activeElement)) return;
+		rootRef.current?.focus({ preventScroll: true });
+	}, [autoFocus]);
+	const focusRow = (index) => {
+		setActiveRow(index);
+		rowsRef.current[index]?.focus();
+	};
+	/**
+	* The card's own keys, never fired from a text field inside it; a held key acts once.
+	*
+	* 1. ↑ / ↓ move focus; a digit picks or toggles; Enter on a row selects or toggles it.
+	* 2. ⌘/Ctrl+Enter sends: the selected option (single-select) or the next step; Space skips.
+	* 3. Any other character starts a custom answer: focus moves to "Other", which receives it.
+	* 4. A key the card takes stops here, so page shortcuts (`a`, `/`) never see it.
+	*/
+	const handleCardKeyDown = (e) => {
+		if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && !e.altKey && !e.repeat) {
+			if (!showSubmitButton) return;
+			send();
+			e.preventDefault();
+			e.stopPropagation();
+			return;
+		}
+		if (e.key === "ArrowUp" && e.target === customInputRef.current && !hasCommandModifier(e)) {
+			e.preventDefault();
+			focusRow(options.length);
+			return;
+		}
+		if (e.defaultPrevented || hasCommandModifier(e) || isEditableTarget(e.target)) return;
+		if ((e.key === "ArrowDown" || e.key === "ArrowUp") && rowCount > 0) {
+			e.preventDefault();
+			const delta = e.key === "ArrowDown" ? 1 : -1;
+			const target = e.target;
+			const current = rowsRef.current.findIndex((row) => target instanceof Node && !!row?.contains(target));
+			focusRow(((current === -1 ? delta > 0 ? -1 : rowCount : current) + delta + rowCount) % rowCount);
+			return;
+		}
+		if (e.repeat) return;
+		const digit = digitFromKeyCode(e.code);
+		if (digit !== null && digit === otherDigit) {
+			e.preventDefault();
+			e.stopPropagation();
+			customInputRef.current?.focus();
+			return;
+		}
+		if (digit !== null && digit <= numberedCount) {
+			e.preventDefault();
+			e.stopPropagation();
+			handleOptionKey(options[digit - 1].id);
+			return;
+		}
+		if (e.key === " " && e.target === e.currentTarget) {
+			e.preventDefault();
+			e.stopPropagation();
+			if (showSkipButton) onSkip?.();
+			return;
+		}
+		if (showCustomAnswer && digit === null && e.key.length === 1 && e.key !== " ") {
+			e.stopPropagation();
+			customInputRef.current?.focus();
+			return;
+		}
+	};
+	const send = () => {
+		if (!multiSelect && !isCustomSelected && chosenId) handleOptionToggle(chosenId);
+		else onNext?.();
+	};
+	const handleNextStep = () => {
+		if (!multiSelect && pendingId) handleOptionToggle(pendingId);
+		else onNext?.();
+	};
 	const handleCustomToggle = (checked) => {
 		setIsCustomExpanded(checked);
 		if (checked) {
@@ -1775,14 +1896,37 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 	};
 	const handleCustomFocus = () => {
 		setIsCustomExpanded(true);
+		setPendingId(null);
 		if (!multiSelect) onSelectionChange?.([]);
 	};
 	const handleCustomRowClick = () => {
 		if (multiSelect) handleCustomToggle(!isCustomSelected);
 		else handleCustomFocus();
 	};
+	const handleCustomRowKey = () => {
+		const opens = !multiSelect || !isCustomSelected;
+		handleCustomRowClick();
+		if (opens) customInputRef.current?.focus();
+	};
+	const submitButton = /* @__PURE__ */ jsxs(Button, {
+		variant: "primary",
+		size: "small",
+		onClick: send,
+		"data-testid": "question-next-button",
+		children: [isLastStep ? "Submit" : "Next", /* @__PURE__ */ jsx(Kbd, {
+			"aria-hidden": true,
+			casing: "as-written",
+			className: SEND_KEY_CLASS,
+			children: `${keys.mod.symbol} Enter`
+		})]
+	});
 	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-card tw:text-card-foreground tw:shadow-lg", className),
+		ref: rootRef,
+		role: "group",
+		"aria-label": question,
+		tabIndex: -1,
+		onKeyDown: handleCardKeyDown,
+		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 tw:outline-none", className),
 		"data-testid": "question-root",
 		"data-question-step": currentStep,
 		"data-question-total-steps": totalSteps,
@@ -1812,56 +1956,76 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 				className: "tw:px-4",
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "tw:flex tw:flex-col tw:gap-4 tw:border-0 tw:border-l tw:border-solid tw:border-primary tw:px-4 tw:py-2",
-					children: [options.map((option) => /* @__PURE__ */ jsxs("div", {
-						className: "tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:hover:bg-accent",
-						onClick: () => handleOptionToggle(option.id),
-						onKeyDown: handleKeyDown(() => handleOptionToggle(option.id)),
-						role: "button",
-						tabIndex: 0,
-						"data-testid": `question-option-${option.id}`,
-						children: [multiSelect && /* @__PURE__ */ jsx(Checkbox, {
-							checked: selectedOptionIds.includes(option.id),
-							onCheckedChange: () => handleOptionToggle(option.id),
-							onClick: (e) => e.stopPropagation(),
-							className: "tw:shrink-0"
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "tw:flex tw:min-w-0 tw:flex-1 tw:items-start tw:gap-3",
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: "tw:flex tw:flex-col tw:gap-1.5",
-								children: [/* @__PURE__ */ jsx("span", {
-									className: "tw:text-sm tw:font-medium tw:leading-none",
-									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
+					children: [options.map((option, index) => {
+						const digit = index < numberedCount ? index + 1 : null;
+						const isSelected = selectedOptionIds.includes(option.id);
+						return /* @__PURE__ */ jsxs("div", {
+							ref: (row) => {
+								rowsRef.current[index] = row;
+							},
+							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:outline-none tw:hover:bg-accent tw:focus-visible:ring-2 tw:focus-visible:ring-ring",
+							onClick: () => handleOptionToggle(option.id),
+							onKeyDown: (e) => {
+								if (hasCommandModifier(e) || e.repeat) return;
+								if (e.key === " " || e.key === "Enter") {
+									e.preventDefault();
+									handleOptionKey(option.id);
+								}
+							},
+							onFocus: () => setActiveRow(index),
+							role: "button",
+							"aria-pressed": multiSelect ? isSelected : chosenId === option.id,
+							tabIndex: index === tabbableRow ? 0 : -1,
+							"aria-keyshortcuts": digit === null ? void 0 : [String(digit), enableShortcuts && `Alt+${digit}`].filter(Boolean).join(" "),
+							"data-question-option": true,
+							"data-testid": `question-option-${option.id}`,
+							children: [/* @__PURE__ */ jsx(OptionKey, {
+								digit,
+								checked: multiSelect ? isSelected : chosenId === option.id
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "tw:flex tw:min-w-0 tw:flex-1 tw:items-start tw:gap-3",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "tw:flex tw:flex-col tw:gap-1.5",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "tw:text-sm tw:font-medium tw:leading-none",
+										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", {
+									"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-foreground",
+										children: option.preview
+									})
 								})]
-							}), option.preview && /* @__PURE__ */ jsx("div", {
-								"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-foreground",
-									children: option.preview
-								})
 							})]
-						})]
-					}, option.id)), showCustomAnswer && /* @__PURE__ */ jsxs("div", {
+						}, 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-accent",
+							ref: (row) => {
+								rowsRef.current[options.length] = row;
+							},
+							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:outline-none tw:hover:bg-accent tw:focus-visible:ring-2 tw:focus-visible:ring-ring",
 							onClick: handleCustomRowClick,
-							onKeyDown: handleKeyDown(handleCustomRowClick),
+							onKeyDown: handleKeyDown(handleCustomRowKey),
+							onFocus: () => setActiveRow(options.length),
 							role: "button",
-							tabIndex: 0,
-							children: [multiSelect && /* @__PURE__ */ jsx(Checkbox, {
-								checked: isCustomSelected,
-								onCheckedChange: handleCustomToggle,
-								onClick: (e) => e.stopPropagation(),
-								className: "tw:shrink-0"
+							"aria-pressed": isCustomSelected,
+							"aria-keyshortcuts": otherDigit === null ? void 0 : String(otherDigit),
+							tabIndex: options.length === tabbableRow ? 0 : -1,
+							children: [/* @__PURE__ */ jsx(OptionKey, {
+								digit: otherDigit,
+								checked: isCustomSelected
 							}), /* @__PURE__ */ jsx("span", {
-								className: cn("tw:text-sm tw:font-medium tw:leading-none", !multiSelect && isCustomSelected && "tw:text-primary"),
+								className: cn("tw:flex-1 tw:text-sm tw:font-medium tw:leading-none", !multiSelect && isCustomSelected && "tw:text-primary"),
 								children: "Other"
 							})]
 						}), /* @__PURE__ */ jsx(TextInput, {
+							ref: customInputRef,
 							value: customAnswer,
 							onValueChange: (value) => onCustomAnswerChange?.(value),
 							onFocus: handleCustomFocus,
@@ -1878,6 +2042,31 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 					})]
 				})
 			}),
+			numberedCount > 0 && /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": true,
+				className: "tw:-mt-1 tw:flex tw:flex-wrap tw:items-center tw:gap-x-3 tw:gap-y-1 tw:px-4 tw:text-xs tw:text-muted-foreground",
+				"data-testid": "question-keyboard-hint",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "tw:inline-flex tw:items-center tw:gap-1",
+						children: [/* @__PURE__ */ jsx(Kbd, {
+							casing: "as-written",
+							children: keyRange(numberedCount + (otherDigit === null ? 0 : 1))
+						}), multiSelect ? "toggle" : "choose"]
+					}),
+					rowCount > 1 && /* @__PURE__ */ jsxs("span", {
+						className: "tw:inline-flex tw:items-center tw:gap-1",
+						children: [/* @__PURE__ */ jsxs(Kbd, { children: [/* @__PURE__ */ jsx(ArrowUp, { className: "tw:size-3" }), /* @__PURE__ */ jsx(ArrowDown, { className: "tw:size-3" })] }), "move"]
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "tw:inline-flex tw:items-center tw:gap-1",
+						children: [/* @__PURE__ */ jsx(Kbd, {
+							casing: "as-written",
+							children: "Enter"
+						}), multiSelect ? "toggle" : "select"]
+					})
+				]
+			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "tw:flex tw:flex-col",
 				children: [showStepControls && /* @__PURE__ */ jsx(Progress, {
@@ -1910,37 +2099,35 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 									type: "button",
 									disabled: currentStep === totalSteps,
 									className: "tw:flex tw:cursor-pointer tw:items-center tw:justify-center tw:bg-transparent tw:p-0 tw:disabled:cursor-default tailwindcss-preflight",
-									onClick: onNext,
+									onClick: handleNextStep,
 									"aria-label": "Next step",
 									children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("tw:size-5", currentStep === totalSteps ? "tw:text-primary/25" : "tw:text-primary") })
 								})
 							]
 						}),
-						showSkipButton && /* @__PURE__ */ jsx(Button, {
-							variant: "outline",
-							size: "small",
-							onClick: onSkip,
-							"data-testid": "question-skip-button",
-							children: "Skip"
-						}),
-						showSubmitButton && (submitTooltip ? /* @__PURE__ */ jsx(Tooltip, {
-							tooltip: submitTooltip,
+						showSkipButton && /* @__PURE__ */ jsx(Tooltip, {
+							tooltip: /* @__PURE__ */ jsx(Kbd, {
+								variant: "primary",
+								casing: "as-written",
+								children: "Space"
+							}),
 							placement: "top",
 							triggerAsChild: true,
 							children: /* @__PURE__ */ jsx(Button, {
-								variant: "primary",
+								variant: "outline",
 								size: "small",
-								onClick: onNext,
-								"data-testid": "question-next-button",
-								children: isLastStep ? "Submit" : "Next"
+								onClick: onSkip,
+								"aria-keyshortcuts": "Space",
+								"data-testid": "question-skip-button",
+								children: "Skip"
 							})
-						}) : /* @__PURE__ */ jsx(Button, {
-							variant: "primary",
-							size: "small",
-							onClick: onNext,
-							"data-testid": "question-next-button",
-							children: isLastStep ? "Submit" : "Next"
-						}))
+						}),
+						showSubmitButton && (submitTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+							tooltip: submitTooltip,
+							placement: "top",
+							triggerAsChild: true,
+							children: submitButton
+						}) : submitButton)
 					]
 				})]
 			})
@@ -1993,11 +2180,16 @@ const QuestionBlock = ({ steps, showSkip = true, onSubmit, onClose, renderPrevie
 };
 //#endregion
 //#region src/blocks/AIKit/SuggestedPrompt.tsx
-const SuggestedPrompt = ({ label, disabled, onClick, icon, className }) => {
+const SuggestedPrompt = ({ label, disabled, onClick, icon, variant = "row", className }) => {
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		disabled,
-		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),
+		"data-variant": variant,
+		className: cn("tailwindcss-preflight tw:flex tw:items-center tw:justify-start tw:gap-2.5 tw:whitespace-nowrap", "tw:text-left tw:text-sm tw:text-foreground tw:transition-colors", "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", variant === "bubble" ? [
+			"tw:w-fit tw:max-w-[min(85%,40rem)] tw:rounded-xl tw:px-3 tw:py-2",
+			"tw:border tw:border-solid tw:border-border tw:bg-card",
+			"tw:not-disabled:hover:bg-muted tw:focus-visible:bg-muted"
+		] : "tw:rounded-lg tw:px-3 tw:py-2 tw:font-medium tw:not-disabled:hover:bg-accent", className),
 		onClick,
 		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",
@@ -2337,4 +2529,4 @@ const UsageStats = ({ value, alert = false, children, className, ariaLabel, alig
 //#endregion
 export { AnswerActions, AnswerSummary, ChatInlineIcon, CollapsibleStepHeader, DIAGRAM_LANGUAGES, FileDownloadChip, InlineStepDetail, InlineStepGroup, InlineStepLabel, Markdown, MarkdownTable, MessageBubble, PROMPT_INPUT_CONTAINER, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageBar, UsageStats, UsageStatsRing, clampPercentage, findMentionToken, findSlashToken, formatPercentage, getChatInlineIconName };
 
-//# sourceMappingURL=AIKit-VB7CXeQk.js.map
+//# sourceMappingURL=AIKit-BVCWP9Ks.js.map