@keboola/design 11.5.0 → 11.6.0

package/AGENTS.md

@@ -112,12 +112,13 @@ This file answers **which** component to use; [`COMPONENT-API.md`](./COMPONENT-A
 
 ### Loading
 
-| Use                | When                                                                                            |
-| ------------------ | ----------------------------------------------------------------------------------------------- |
-| `Skeleton`         | Layout-aware placeholder shown in the slot the real content will occupy (initial load, refetch) |
-| `SkeletonList`     | Pre-composed list shell (icon + row, repeated) for Table / Card-list pages                      |
-| `Button isLoading` | In-flight action on a known button — swaps the icon for a spinner and disables the button       |
-| `DotsLoader`       | Indeterminate background work without a layout slot (small inline progress signal)              |
+| Use                 | When                                                                                               |
+| ------------------- | -------------------------------------------------------------------------------------------------- |
+| `Skeleton`          | Layout-aware placeholder shown in the slot the real content will occupy (initial load, refetch)    |
+| `SkeletonList`      | Pre-composed list shell (icon + row, repeated) for Table / Card-list pages                         |
+| `Button isLoading`  | In-flight action on a known button — swaps the icon for a spinner and disables the button          |
+| `DotsLoader`        | Indeterminate background work without a layout slot (small inline progress signal)                 |
+| `ThinkingIndicator` | An agent turn that is in flight with nothing to show yet — every Keboola chat says it the same way |
 
 **Never** build a new "Loader" / "BoxLoader" / "ActionLoader" wrapper component. Compose `Skeleton` directly into the slot the real content will occupy.
 

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @keboola/design
 
+## 11.6.0
+
+### Minor Changes
+
+- `MarkdownTable` ships from `AIKit`: a table in an answer with the fact that it is cut off on the right said out loud. It draws a rail above the grid for the host's own actions, a fade at the cut edge that clears at the end of the scroll, and — once the table is past 1.5× the width it has — an `Open wider` action. Where wider leads is the host's: the action is a prop (`onExpand`), so a docked panel can hand it its own fullscreen switch and a standalone app a modal, and a host with nowhere wider to go omits it and keeps the fade. `surface` names the token the host paints behind the table (`card`, the default, or `background`), which is the colour the fade ends in — naming the wrong one draws a contrasting strip over the cells instead of hiding them. The table passed in has to keep its intrinsic width (`tw:min-w-max`): `Table` is `w-full` with auto layout, so a grid left to wrap into its column never overflows and neither affordance can appear.
+
+  `FullScreenModal` now moves focus into itself when it opens and returns it on close. Its `onEscapeKeyDown` is a `keydown` on the modal element, so until focus was inside, Escape reached nothing and keyboard readers went on walking the page behind. Focus is left alone where the modal's own content has already claimed it, and Escape is now answered only by the modal it was pressed in — a nested modal is portalled beside its parent but React routes its events up the logical tree, so one keypress used to dismiss both. Which modal that is comes off the DOM, where the nesting is not a lie, rather than from `stopPropagation`: a synthetic `stopPropagation` also stops the native event, and React mounts a portal's listeners on `document.body`, so it would cut off every `document`-level `keydown` handler on the page. This is not yet a focus trap: Tab still leaves for the obscured page.
+
+- `Progress` gains `warning` and `error` variants, on the same ramps `Badge` maps `orange` and `red` to, so a meter can carry the state its label already names
+
+### Patch Changes
+
+- `ThinkingIndicator` now announces itself as a live region, so a screen reader hears that an agent's turn is in flight rather than only seeing the spinner.
+
+- Retry a failed diagram chunk instead of rendering source for the rest of the session
+
+  `Markdown` loaded `MermaidDiagram` and `FlintChart` through `lazy()`, which memoizes the settled
+  import for the life of the page. One failed fetch — a dev server restarting, a stale tab after a
+  deploy, a flaky network — left every later `mermaid` and `flint` fence in that tab rendering as
+  raw source until a full reload. The import is now attempted per mount and the failed promise is
+  cleared, and a block that fell back to source carries a Try again button — so one bad fetch costs
+  that one block rather than the session.
+
+- `formatPercentage` prints whole numbers from 1% up, keeping one decimal only below 1%
+
 ## 11.5.0
 
 ### Minor Changes

package/COMPONENT-API.md

@@ -637,11 +637,11 @@ Source: `src/components/Progress/Progress.tsx`
 
 > Single-value determinate progress bar.
 
-| Prop      | Type                             | Required | Default | Description |
-| --------- | -------------------------------- | -------- | ------- | ----------- |
-| `asChild` | `boolean`                        | no       | —       |             |
-| `size`    | `"sm" \| "lg" \| null`           | no       | —       |             |
-| `variant` | `"success" \| "default" \| null` | no       | —       |             |
+| Prop      | Type                                                     | Required | Default | Description |
+| --------- | -------------------------------------------------------- | -------- | ------- | ----------- |
+| `asChild` | `boolean`                                                | no       | —       |             |
+| `size`    | `"sm" \| "lg" \| null`                                   | no       | —       |             |
+| `variant` | `"warning" \| "error" \| "success" \| "default" \| null` | no       | —       |             |
 
 ### `SpotlightBackdrop`
 

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

@@ -4,7 +4,7 @@ import { AlertCircle, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, Circl
 import { Button } from "./Button-DsRrU5F1.js";
 import { ButtonGroup } from "./internal/components/ButtonGroup.js";
 import { ClipboardButton } from "./ClipboardButton-CwZJdRaz.js";
-import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-BvPuYibe.js";
+import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-CN9nAs72.js";
 import { Truncated } from "./internal/components/Truncated.js";
 import { HoverCard } from "./HoverCard-B9ZMJxjn.js";
 import { Command } from "./Command-Bfa1kpbt.js";
@@ -14,9 +14,10 @@ import { Badge } from "./Badge-D0pXdekt.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
 import { Table } from "./Table-CvYuTuNU.js";
 import { DiagramSkeleton } from "./internal/blocks/DiagramShared/DiagramSkeleton.js";
+import { DiagramSource } from "./DiagramSource-C5_d8Gdj.js";
 import { Progress } from "./internal/components/Progress.js";
 import { Slot } from "@radix-ui/react-slot";
-import { Suspense, isValidElement, lazy, useCallback, useEffect, useId, useRef, useState } from "react";
+import { isValidElement, useCallback, useEffect, useId, useRef, useState } from "react";
 import { cva } from "class-variance-authority";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import TextareaAutosize from "react-textarea-autosize";
@@ -188,15 +189,84 @@ const AnswerSummary = ({ items, variant = "success", noAnswerLabel = "No answer"
 	});
 };
 //#endregion
+//#region src/blocks/AIKit/DiagramBlock.tsx
+/**
+* One diagram block: a skeleton while its chunk loads, the fence source plus a retry if it fails.
+*
+* - `load` runs once per mount and once per press of the retry button. The loader drops its own
+*   rejected promise, so every attempt is a fresh fetch.
+* - Recovery is a gesture, not a timer: nothing on the page can tell when a chunk became
+*   reachable again, and a tab left open across a deploy points at a URL that is gone for good —
+*   a background loop would retry that one forever.
+* - The failure is already logged by the loader, which knows the chunk's name.
+* - A new `load` resets the block: every fence renders this same component type, so a block that
+*   switches dialect would otherwise keep drawing through the dialect it had before.
+* - Both the renderer and the loader are functions held in state, so they go in through the
+*   setter form — React runs a bare function as a lazy initializer or an updater instead.
+*/
+const DiagramBlock = ({ load, code }) => {
+	const [Diagram, setDiagram] = useState(null);
+	const [failed, setFailed] = useState(false);
+	const [attempt, setAttempt] = useState(0);
+	const [prevLoad, setPrevLoad] = useState(() => load);
+	if (load !== prevLoad) {
+		setPrevLoad(() => load);
+		setDiagram(null);
+		setFailed(false);
+	}
+	useEffect(() => {
+		let cancelled = false;
+		load().then((component) => {
+			if (!cancelled) setDiagram(() => component);
+		}, () => {
+			if (!cancelled) setFailed(true);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [load, attempt]);
+	if (Diagram) return /* @__PURE__ */ jsx(Diagram, { code });
+	if (failed) return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DiagramSource, { code }), /* @__PURE__ */ jsx(Button, {
+		variant: "inline",
+		size: "small",
+		className: "tw:mb-3",
+		onClick: () => {
+			setFailed(false);
+			setAttempt((count) => count + 1);
+		},
+		children: "Try again"
+	})] });
+	return /* @__PURE__ */ jsx(DiagramSkeleton, {});
+};
+//#endregion
+//#region src/blocks/AIKit/diagramChunk.ts
+/**
+* An on-demand diagram chunk — shared between mounts, and retryable.
+*
+* - `lazy()` is deliberately not used here: it memoizes the settled import for the life of the
+*   page, so one failed fetch (a dev server restarting, a stale tab after a deploy, a flaky
+*   network) leaves every diagram in that tab rendering raw source until a full reload.
+* - A resolved import is kept, so the chunk is fetched once however many blocks mount.
+* - A failed one is cleared, so the next mount imports again. Same contract as
+*   `getFlintRuntime()` one level down, inside `FlintChart`.
+* - The failure is logged here, where the chunk's name is known, so the swap to plain source is
+*   never silent and a retry that fails again says so.
+*/
+const diagramChunk = (name, load) => {
+	let pending = null;
+	return () => {
+		pending ??= load().catch((error) => {
+			console.error(`[AIKit] failed to load the ${name} chunk`, error);
+			pending = null;
+			throw error;
+		});
+		return pending;
+	};
+};
+//#endregion
 //#region src/blocks/AIKit/Markdown.tsx
-const MermaidDiagram = lazy(() => import("@keboola/design/mermaid").then((module) => ({ default: module.MermaidDiagram }), (error) => {
-	console.error("[AIKit] failed to load the MermaidDiagram chunk", error);
-	return { default: ({ code }) => /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: code }) }) };
-}));
-const FlintChart = lazy(() => import("@keboola/design/flint").then((module) => ({ default: module.FlintChart }), (error) => {
-	console.error("[AIKit] failed to load the FlintChart chunk", error);
-	return { default: ({ code }) => /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: code }) }) };
-}));
+const loadMermaid = diagramChunk("MermaidDiagram", () => import("@keboola/design/mermaid").then((module) => module.MermaidDiagram));
+const loadFlint = diagramChunk("FlintChart", () => import("@keboola/design/flint").then((module) => module.FlintChart));
 const proseClass = "tw:prose tw:prose-sm tw:max-w-none tw:break-words tw:[&_pre]:bg-muted tw:[&_pre]:text-foreground tw:[&_:not(pre)>code]:bg-muted tw:[&_:not(pre)>code]:text-foreground tw:[&_:not(pre)>code]:rounded tw:[&_:not(pre)>code]:px-1 tw:[&_:not(pre)>code]:py-0.5 tw:[&_:not(pre)>code]:before:content-none tw:[&_:not(pre)>code]:after:content-none";
 const getText = (node) => {
 	if (typeof node === "string") return node;
@@ -221,7 +291,7 @@ const getLanguage = (element) => {
 */
 const baseRemarkPlugins = [remarkGfm];
 /**
-* Fence language → the renderer that draws it.
+* Fence language → the on-demand chunk that draws it.
 *
 * - Both dialects are the agent's, not this package's: kai-agent's prompt tells the model to
 *   write ```mermaid for structure and ```flint for quantitative data, so a chat that renders
@@ -229,13 +299,13 @@ const baseRemarkPlugins = [remarkGfm];
 * - `flint-chart` is an alias — it is the fence tag flint's own docs use, so a model emits it
 *   unprompted often enough to matter. `markdownComponents.tsx` in kbc-ui carries the same pair.
 * - Read through `Object.hasOwn`, never by plain index: a fence tagged ```constructor or
-*   ```valueOf otherwise answers with an `Object.prototype` member, which is truthy, and mounting
-*   it as a component throws — taking the whole message subtree down with it.
+*   ```valueOf otherwise answers with an `Object.prototype` member, which is truthy, and calling
+*   it as a loader throws — taking the whole message subtree down with it.
 */
-const DIAGRAM_RENDERERS = {
-	mermaid: MermaidDiagram,
-	flint: FlintChart,
-	"flint-chart": FlintChart
+const DIAGRAM_CHUNKS = {
+	mermaid: loadMermaid,
+	flint: loadFlint,
+	"flint-chart": loadFlint
 };
 /**
 * The fence languages this renderer draws instead of printing.
@@ -247,18 +317,18 @@ const DIAGRAM_RENDERERS = {
 * - Frozen, because it is that shared contract: a consumer that pushed onto it would change how
 *   every other app in the same bundle holds a fence back.
 */
-const DIAGRAM_LANGUAGES = Object.freeze(Object.keys(DIAGRAM_RENDERERS));
+const DIAGRAM_LANGUAGES = Object.freeze(Object.keys(DIAGRAM_CHUNKS));
 const baseComponents = {
 	pre({ children, ...props }) {
 		const child = Array.isArray(children) ? children[0] : children;
 		const code = getText(child).replace(/\n$/, "");
 		const language = getLanguage(child);
-		const Diagram = language !== void 0 && Object.hasOwn(DIAGRAM_RENDERERS, language) ? DIAGRAM_RENDERERS[language] : void 0;
-		if (Diagram) {
+		const load = language !== void 0 && Object.hasOwn(DIAGRAM_CHUNKS, language) ? DIAGRAM_CHUNKS[language] : void 0;
+		if (load) {
 			if (!code.trim()) return null;
-			return /* @__PURE__ */ jsx(Suspense, {
-				fallback: /* @__PURE__ */ jsx(DiagramSkeleton, {}),
-				children: /* @__PURE__ */ jsx(Diagram, { code })
+			return /* @__PURE__ */ jsx(DiagramBlock, {
+				load,
+				code
 			});
 		}
 		const { node: _node, ...rest } = props;
@@ -343,6 +413,95 @@ const Markdown = ({ children, className, remarkPlugins, components: componentOve
 	});
 };
 //#endregion
+//#region src/blocks/AIKit/MarkdownTable.tsx
+/** How much wider than its column a table has to be before the column is the wrong surface. */
+const EXPAND_RATIO = 1.5;
+/**
+* The token the host paints the table on, which is the colour the fade has to end in.
+*
+* - A gradient hides the cut-off cells by ending in the surface behind them. End it in any other
+*   token and it draws a contrasting strip over the data instead of hiding it.
+* - Full class strings, not a composed `tw:from-${token}`: Tailwind reads literals.
+*/
+const FADE_SURFACE = {
+	card: "tw:from-card",
+	background: "tw:from-background"
+};
+/**
+* A table in an answer, with the fact that it is cut off on the right said out loud.
+*
+* - `overflow-x: auto` scrolls silently, so nothing on screen says there is more to the right.
+* - The controls sit in a rail above the grid, never over the header row or the last row — the
+*   data a reader reaches for them to get at. The rail holds its height, so revealing hover
+*   controls or crossing the ratio cannot shift the table under the pointer.
+* - The fade marks the cut edge only while content remains, so it never reads as a border.
+* - A painted gradient rather than the `tw:scroll-fade-x` mask, which needs scroll-driven
+*   animations: the build floor is `baseline-widely-available` (Safari 16, Firefox 104), and there
+*   the utility either fades both edges of a table that fits or, behind the `supports-` guard
+*   `PageLayout` uses, says nothing at all — which is the state this component exists to end. The
+*   mask also has to sit on the scrolling element, and that is `Table`'s own container, not ours.
+* - Past `EXPAND_RATIO` the fade is joined by `onExpand`'s action, drawn without waiting for a
+*   hover: it reports that content is cut off, which the reader needs before going looking.
+*/
+const MarkdownTable = ({ children, actions, onExpand, surface = "card", className }) => {
+	const frameRef = useRef(null);
+	const [overflow, setOverflow] = useState({
+		scrollable: false,
+		atEnd: true,
+		ratio: 1
+	});
+	const measure = useCallback(() => {
+		const box = frameRef.current?.firstElementChild;
+		if (!box) return;
+		const { scrollLeft, scrollWidth, clientWidth } = box;
+		const hidden = scrollWidth - clientWidth;
+		setOverflow({
+			scrollable: hidden > 1,
+			atEnd: scrollLeft >= hidden - 1,
+			ratio: clientWidth > 0 ? scrollWidth / clientWidth : 1
+		});
+	}, []);
+	useEffect(() => {
+		const box = frameRef.current?.firstElementChild;
+		if (!box) return;
+		measure();
+		box.addEventListener("scroll", measure, { passive: true });
+		const observer = new ResizeObserver(measure);
+		observer.observe(box);
+		if (box.firstElementChild) observer.observe(box.firstElementChild);
+		return () => {
+			box.removeEventListener("scroll", measure);
+			observer.disconnect();
+		};
+	}, [measure]);
+	const showExpand = !!onExpand && overflow.scrollable && overflow.ratio >= EXPAND_RATIO;
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [(actions || onExpand) && /* @__PURE__ */ jsxs("div", {
+			className: "tw:flex tw:h-8 tw:items-center tw:justify-end tw:gap-1",
+			children: [actions, showExpand && /* @__PURE__ */ jsx(Tooltip, {
+				tooltip: "This table is wider than the space it has",
+				placement: "top",
+				triggerAsChild: true,
+				children: /* @__PURE__ */ jsxs(Button, {
+					size: "small",
+					variant: "invisible",
+					onClick: onExpand,
+					children: [/* @__PURE__ */ jsx(Maximize2, { className: "tw:size-3.5" }), "Open wider"]
+				})
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: frameRef,
+			className: "tw:relative",
+			children: [children, overflow.scrollable && !overflow.atEnd && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				"data-testid": "markdown-table-fade",
+				className: cn("tw:pointer-events-none tw:absolute tw:inset-y-px tw:right-px tw:w-12 tw:rounded-r-[10px] tw:bg-gradient-to-l tw:to-transparent", FADE_SURFACE[surface])
+			})]
+		})]
+	});
+};
+//#endregion
 //#region src/blocks/AIKit/MessageBubble.tsx
 const containerClasses = cva([
 	"tw:flex",
@@ -1248,11 +1407,24 @@ const SuggestedPrompt = ({ label, disabled, onClick, icon, className }) => {
 };
 //#endregion
 //#region src/blocks/AIKit/ThinkingIndicator.tsx
+/**
+* The agent's turn is in flight and has nothing to show yet.
+*
+* - Quiet chrome, matching the step rows it precedes (muted ink, no italic), so the hand-off
+*   from "Thinking..." to the first step is seamless.
+* - `role="status"` because a spinner is silence to a screen reader, and for much of a turn
+*   this is all a transcript shows. The label is the announcement, so it is never decorative.
+* - The icon is hidden from the tree: it says the same thing as the label beside it.
+*/
 const ThinkingIndicator = ({ label = "Thinking..." }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "tw:flex tw:items-center tw:gap-1.5",
+		role: "status",
 		"data-testid": "chat-thinking-indicator",
-		children: [/* @__PURE__ */ jsx(Loader2, { className: "tw:size-3.5 tw:animate-spin tw:text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(Loader2, {
+			"aria-hidden": true,
+			className: "tw:size-3.5 tw:animate-spin tw:text-muted-foreground"
+		}), /* @__PURE__ */ jsx("span", {
 			className: "tw:text-xs tw:font-medium tw:text-muted-foreground",
 			children: label
 		})]
@@ -1470,16 +1642,18 @@ const ToolCallStatusHeader = ({ icon: IconComponent, iconSpin, status, text, nee
 */
 const clampPercentage = (value) => Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;
 /**
-* A percentage as text — `72%`, `1.1%`, `99.9%`.
+* A percentage as text — `72%`, `0.2%`, `99%`.
 *
-* - One decimal place, trimmed to a whole number, so `11/1000` reads as `1.1%` rather than `1%`.
-* - Floored, not rounded: rounding `99.96` up to `100%` disagrees with the at-limit state computed
+* - Whole numbers from 1% up; a decimal only below 1%, where rounding would read as `0%`.
+* - A non-zero share never prints as `0.0%` — it floors at `0.1%`.
+* - Never `100%` for a value under 100: the text would disagree with the at-limit state computed
 *   from the raw value, exactly at the boundary everything else turns on.
-* - The `1e-9` nudge is for floating-point noise — `11 / 1000 * 100` is `1.0999999999999999`.
 */
 const formatPercentage = (value) => {
-	const floored = Math.floor(value * 10 + 1e-9) / 10;
-	return `${Number.isInteger(floored) ? floored.toFixed(0) : floored.toFixed(1)}%`;
+	const oneDecimal = Math.round(value * 10) / 10;
+	if (value > 0 && oneDecimal < 1) return `${Math.max(.1, oneDecimal).toFixed(1)}%`;
+	const rounded = Math.round(value);
+	return `${value < 100 ? Math.min(rounded, 99) : rounded}%`;
 };
 //#endregion
 //#region src/blocks/AIKit/UsageStatsRing.tsx
@@ -1541,6 +1715,6 @@ const UsageStats = ({ value, alert = false, children, className, ariaLabel, alig
 	});
 };
 //#endregion
-export { AnswerActions, AnswerSummary, CollapsibleStepHeader, DIAGRAM_LANGUAGES, InlineStepDetail, InlineStepLabel, Markdown, MessageBubble, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageStats, UsageStatsRing, clampPercentage, formatPercentage };
+export { AnswerActions, AnswerSummary, CollapsibleStepHeader, DIAGRAM_LANGUAGES, InlineStepDetail, InlineStepLabel, Markdown, MarkdownTable, MessageBubble, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageStats, UsageStatsRing, clampPercentage, formatPercentage };
 
-//# sourceMappingURL=AIKit-CNX6aiKm.js.map
+//# sourceMappingURL=AIKit-BExvt9pt.js.map