@parallelworks/ui 0.84.2 → 0.86.0

package/README.md

@@ -125,7 +125,7 @@ Each need has one component. Reach for it before styling markup by hand.
 | A status in words | `StatusBadge`, or `StatusDot` beside text that says it |
 | A thing's tags or labels | `Tag`; `TagList` for several, wrapped or on one line ending in "+N" |
 | Keys to press | `Kbd`, with `Mod` for Command or Control; `ariaKeyShortcuts` for the control the keys press |
-| A chart's colors, legend and tooltip | `seriesColors`, `ChartLegendList`, `ChartTooltipContent` and `useSeriesHighlight`, around a chart drawn by hand or by a library |
+| A chart's colors, legend and tooltip | `seriesColors` (by each series' place in a stable key list, eight at most) and `foldSeries` (the rest into "Other"), `ChartLegendList`, `ChartTooltipContent` placed beside the crosshair with `ChartTooltipBeside` or `chartTooltipPlacement`, and `useSeriesHighlight`, around a chart drawn by hand or by a library |
 | A run's, job's or step's status beside its name | `RunStatusIcon`; `StatusBadge` with `runStatusTone` to say it in words |
 | A copy action | `CopyButton`; `CopyCodeBlock` for a command or snippet, with `secret` for a value shown once; `SelectionCopy` to copy part of a block by selecting it; `useCopy` for a menu row or a control of your own |
 | A live relative time or duration | `RelativeTime` (with a `fallback`, an `exact` style for its tooltip, or `show="absolute"`), `Elapsed` |

package/dist/ai/components/ChatMessage.js

@@ -121,6 +121,12 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 					isStreaming,
 					onApprovalAnswer: approvalAnswer
 				}),
+				hasError && /* @__PURE__ */ jsx(Callout, {
+					tone: "error",
+					size: "sm",
+					className: "mt-2",
+					children: message.error
+				}),
 				isStreaming && !isUser && /* @__PURE__ */ jsx("div", {
 					"aria-hidden": true,
 					className: "mt-2 h-7"

package/dist/ai/core/ChatProvider.js

@@ -312,7 +312,7 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 		state.currentConversation,
 		navigation
 	]);
-	const streamReply = useCallback(async (targetConversationId, request, parentId, onFailure, routePart) => {
+	const streamReply = useCallback(async (targetConversationId, request, parentId, onFailure, routePart, onAccepted) => {
 		backgroundStreamsRef.current.set(targetConversationId, {
 			content: "",
 			reasoning: "",
@@ -335,7 +335,10 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 			let thinkingStart = null;
 			let thinkingEnd = null;
 			const markStreamStart = () => {
-				if (thinkingStart === null) thinkingStart = Date.now();
+				if (thinkingStart === null) {
+					thinkingStart = Date.now();
+					onAccepted?.();
+				}
 			};
 			let liveParts = [];
 			let liveText = "";
@@ -637,7 +640,8 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 		isSendingRef.current = true;
 		const targetConversationId = conversation.id;
 		const t = resolvedConfig.strings.agentTranscript;
-		let pausedParts = paused.parts ?? [];
+		const askedParts = paused.parts ?? [];
+		let pausedParts = askedParts;
 		const updatePaused = (updates) => dispatch({
 			type: "UPDATE_MESSAGE",
 			messageId: paused.id,
@@ -648,6 +652,7 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 			pausedParts = applyPartDelta(pausedParts, delta);
 			updatePaused({ parts: pausedParts });
 		};
+		if (paused.error) updatePaused({ error: null });
 		applyToPaused({
 			type: "approval_resolved",
 			id: approvalId,
@@ -677,8 +682,9 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 		}
 		streamingToConversationRef.current = targetConversationId;
 		startStreaming(targetConversationId);
+		let accepted = false;
 		try {
-			await streamReply(targetConversationId, {
+			if (await streamReply(targetConversationId, {
 				model: modelString,
 				messages: historyMessages(conversation.messages.slice(0, pausedAt + 1), state.selectedProvider),
 				conversationId: targetConversationId,
@@ -698,7 +704,12 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 				if (delta.type !== "tool_end" || delta.id !== approvalId) return false;
 				applyToPaused(delta);
 				return true;
-			});
+			}, () => {
+				accepted = true;
+			}) === "failed" && !accepted) {
+				pausedParts = askedParts;
+				updatePaused({ parts: askedParts });
+			}
 		} finally {
 			isSendingRef.current = false;
 		}

package/dist/components/CopyButton.d.ts

@@ -48,11 +48,16 @@ export interface CopyCodeBlockProps {
      *  surface reads on a panel and a tinted callout alike, and the buttons stay right after the
      *  value, always shown. The copy confirms with its check alone, as the change shows there. */
     inline?: boolean | undefined;
+    /** False also says "Copied" in a toast. By default the copy confirms with the button's
+     *  check alone, which stays in view until it turns back, as the button is where the reader
+     *  pressed; a failure toasts either way. */
+    quiet?: boolean | undefined;
     className?: string | undefined;
 }
 /** A block of code, such as a command to run, with a button that copies it. The
  *  buttons show while the pointer is over the block or focus is in it, and always
- *  where there is no hover to reveal them. With `inline` it is a compact value in the line
+ *  where there is no hover to reveal them. A copy confirms with the button's check,
+ *  not a toast; a failure still toasts. With `inline` it is a compact value in the line
  *  instead, such as a token shown once, its buttons always beside it. With `secret` it
  *  masks the value until the eye shows it, and copies it either way. */
-export declare function CopyCodeBlock({ text, label, children, secret, revealed: revealedProp, defaultRevealed, onRevealedChange, inline, wrap, className, }: CopyCodeBlockProps): import("react").JSX.Element;
+export declare function CopyCodeBlock({ text, label, children, secret, revealed: revealedProp, defaultRevealed, onRevealedChange, inline, wrap, quiet, className, }: CopyCodeBlockProps): import("react").JSX.Element;

package/dist/components/CopyButton.js

@@ -4,7 +4,8 @@ import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
 import { useStrings } from "./Provider.js";
 import { useCopy } from "./useCopy.js";
 import { IconButton } from "./IconButton.js";
-import { useEffectEvent, useLayoutEffect, useRef, useState } from "react";
+import { fadeMask, useHiddenEnds } from "./scrollFade.js";
+import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/CopyButton.tsx
 /** The one copy control: a button that copies its text, turns into a check for a
@@ -23,6 +24,7 @@ function CopyButton({ text, label, quiet = false, showLabel = false, variant = s
 	if (showLabel) return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		...props,
+		"data-copied": copied || void 0,
 		"aria-label": props["aria-label"] ?? name,
 		onClick,
 		className: cx(buttonClasses({
@@ -33,6 +35,7 @@ function CopyButton({ text, label, quiet = false, showLabel = false, variant = s
 	});
 	return /* @__PURE__ */ jsx(IconButton, {
 		...props,
+		"data-copied": copied || void 0,
 		variant,
 		size,
 		label: name,
@@ -40,60 +43,14 @@ function CopyButton({ text, label, quiet = false, showLabel = false, variant = s
 		onClick
 	});
 }
-var NO_ENDS = {
-	start: false,
-	end: false
-};
-function useHiddenEnds(active) {
-	const ref = useRef(null);
-	const [ends, setEnds] = useState(NO_ENDS);
-	const measureNow = () => {
-		const el = ref.current;
-		if (!el || !active) {
-			setEnds(NO_ENDS);
-			return;
-		}
-		const scrolled = Math.abs(el.scrollLeft);
-		const start = scrolled > 1;
-		const end = scrolled + el.clientWidth < el.scrollWidth - 1;
-		setEnds((was) => was.start === start && was.end === end ? was : {
-			start,
-			end
-		});
-	};
-	const measure = useEffectEvent(measureNow);
-	useLayoutEffect(() => {
-		measure();
-	});
-	useLayoutEffect(() => {
-		const el = ref.current;
-		if (!el || !active || typeof ResizeObserver === "undefined") return;
-		const observer = new ResizeObserver(() => measure());
-		observer.observe(el);
-		return () => observer.disconnect();
-	}, [active]);
-	return {
-		ref,
-		ends,
-		onScroll: measureNow
-	};
-}
-var FADE = "1.25rem";
-function fadeMask({ start, end }) {
-	if (!start && !end) return;
-	const image = `linear-gradient(to var(--fade-end, right), ${start ? `transparent, #000 ${FADE}` : "#000"}, ${end ? `#000 calc(100% - ${FADE}), transparent` : "#000"})`;
-	return {
-		maskImage: image,
-		WebkitMaskImage: image
-	};
-}
 var MASK = "•".repeat(24);
 /** A block of code, such as a command to run, with a button that copies it. The
 *  buttons show while the pointer is over the block or focus is in it, and always
-*  where there is no hover to reveal them. With `inline` it is a compact value in the line
+*  where there is no hover to reveal them. A copy confirms with the button's check,
+*  not a toast; a failure still toasts. With `inline` it is a compact value in the line
 *  instead, such as a token shown once, its buttons always beside it. With `secret` it
 *  masks the value until the eye shows it, and copies it either way. */
-function CopyCodeBlock({ text, label, children, secret = false, revealed: revealedProp, defaultRevealed = false, onRevealedChange, inline = false, wrap = false, className }) {
+function CopyCodeBlock({ text, label, children, secret = false, revealed: revealedProp, defaultRevealed = false, onRevealedChange, inline = false, wrap = false, quiet = true, className }) {
 	const { common: t } = useStrings();
 	const [ownRevealed, setOwnRevealed] = useState(defaultRevealed);
 	const revealed = revealedProp ?? ownRevealed;
@@ -102,6 +59,7 @@ function CopyCodeBlock({ text, label, children, secret = false, revealed: reveal
 		onRevealedChange?.(next);
 	};
 	const reveal = "opacity-0 group-hover/code:opacity-100 group-focus-within/code:opacity-100 pointer-coarse:opacity-100";
+	const revealCopy = `${reveal} data-copied:opacity-100`;
 	let shown = children ?? text;
 	if (secret && !revealed && children === void 0) shown = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
@@ -140,7 +98,7 @@ function CopyCodeBlock({ text, label, children, secret = false, revealed: reveal
 				text,
 				label,
 				size: "xs",
-				quiet: true
+				quiet
 			}), revealButton]
 		})]
 	});
@@ -154,7 +112,8 @@ function CopyCodeBlock({ text, label, children, secret = false, revealed: reveal
 			children: [revealButton, /* @__PURE__ */ jsx(CopyButton, {
 				text,
 				label,
-				className: cx("bg-(--theme-muted-panel-bg)", reveal)
+				quiet,
+				className: cx("bg-(--theme-muted-panel-bg)", revealCopy)
 			})]
 		})]
 	});

package/dist/components/PageHeaderAction.d.ts

@@ -35,8 +35,15 @@ export type PageHeaderActionProps = Target & {
     disabledReason?: string | undefined;
     /** A hint shown on hover and focus while it can be pressed. */
     tooltip?: string | undefined;
-    /** In the error color, as a destructive menu entry is, for an action that
-     *  removes or breaks something. */
+    /** How a labeled action reads in the bar: `outline`, the page's small
+     *  secondary button, as "+ Add" is; or `link`, text in the link color, for a
+     *  page that keeps the older look. On a narrow bar the label folds into the
+     *  tooltip and the outline stays, so the action is an outlined icon. An
+     *  `iconOnly` action, such as a pencil beside the title, is always bare. */
+    variant?: 'outline' | 'link' | undefined;
+    /** For an action that removes or breaks something: in the error color where
+     *  it is a menu entry, in the header's "…" menu. In the bar it reads as the
+     *  others do; a page's destructive actions belong in its menu. */
     destructive?: boolean | undefined;
     /** A toggle's state, such as a favorite: set, it reads as pressed. Buttons only. */
     pressed?: boolean | undefined;
@@ -47,10 +54,10 @@ export type PageHeaderActionProps = Target & {
 /**
  * An action in the page header: a link (`href`, `external` for a new tab,
  * `reloadDocument` for a path the router doesn't serve), a
- * button (`onClick`) or a menu (`menu`). Labeled actions read in the link
- * color, so the page's commands stand apart from the trail.
+ * button (`onClick`) or a menu (`menu`). A labeled action is a small outline
+ * button, as "+ Add" is, so the page's commands stand apart from the trail.
  */
-export declare function PageHeaderAction({ icon: Icon, label, ariaLabel, iconOnly, disabled, disabledReason, tooltip, destructive, pressed, loading, ...target }: PageHeaderActionProps): import("react").JSX.Element;
+export declare function PageHeaderAction({ icon: Icon, label, ariaLabel, iconOnly, variant, disabled, disabledReason, tooltip, destructive, pressed, loading, ...target }: PageHeaderActionProps): import("react").JSX.Element;
 export type PageHeaderAddButtonProps = Target & {
     /** The full action, such as "New cluster": the tooltip and accessible name. */
     label: string;

package/dist/components/PageHeaderAction.js

@@ -55,11 +55,16 @@ function HeaderControl({ name, tooltip, disabled, disabledReason, loading = fals
 /**
 * An action in the page header: a link (`href`, `external` for a new tab,
 * `reloadDocument` for a path the router doesn't serve), a
-* button (`onClick`) or a menu (`menu`). Labeled actions read in the link
-* color, so the page's commands stand apart from the trail.
+* button (`onClick`) or a menu (`menu`). A labeled action is a small outline
+* button, as "+ Add" is, so the page's commands stand apart from the trail.
 */
-function PageHeaderAction({ icon: Icon, label, ariaLabel, iconOnly = false, disabled = false, disabledReason, tooltip, destructive = false, pressed, loading = false, ...target }) {
-	const tone = destructive ? "*:text-(--theme-error-text)" : iconOnly ? void 0 : "*:text-(--theme-link)";
+function PageHeaderAction({ icon: Icon, label, ariaLabel, iconOnly = false, variant = "outline", disabled = false, disabledReason, tooltip, destructive = false, pressed, loading = false, ...target }) {
+	const link = variant === "link" && !iconOnly;
+	const className = cx(buttonClasses({
+		variant: link || iconOnly ? "ghost" : "outline",
+		size: "xs",
+		iconOnly
+	}), link && "*:text-(--theme-link)");
 	const icon = loading ? /* @__PURE__ */ jsx(Loader, {
 		inline: true,
 		decorative: true,
@@ -83,11 +88,7 @@ function PageHeaderAction({ icon: Icon, label, ariaLabel, iconOnly = false, disa
 			disabledReason,
 			loading,
 			pressed,
-			className: cx(buttonClasses({
-				variant: "ghost",
-				size: "xs",
-				iconOnly
-			}), tone),
+			className,
 			children: [icon, !iconOnly && /* @__PURE__ */ jsx("span", {
 				className: "@max-md:sr-only",
 				children: label

package/dist/components/Pagination.d.ts

@@ -23,8 +23,10 @@ export interface PaginationProps {
     /** Numbers the pages between previous and next, for a list a reader jumps
      *  around in, such as a catalog: the first and last, and a window around
      *  the current one, with gaps between. `max` is how many steps show at
-     *  most, gaps included (7 by default, 5 at least). Needs a `total`; hidden
-     *  on a phone-width screen, where previous and next remain. */
+     *  most, gaps included (7 by default, 5 at least). Needs a `total`. Where
+     *  the bar is narrow, as on a phone, the window narrows to the first, the
+     *  current and the last page (5 steps), and where even those won't fit, to
+     *  the current page and the count: "5 / 12". */
     pageNumbers?: boolean | {
         max?: number | undefined;
     } | undefined;

package/dist/components/Pagination.js

@@ -6,7 +6,7 @@ import { AppLink } from "./AppLink.js";
 import { IconButton } from "./IconButton.js";
 import { formatInteger } from "../format.js";
 import { Select } from "./Select.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Pagination.tsx
 /** Page sizes a list offers; the first is the default. */
 var PAGE_SIZES = [
@@ -45,6 +45,7 @@ function pageSteps(page, count, max = 7) {
 *  nothing when everything fits on one page. */
 function Pagination({ page, pageSize, total, hasNext, onPageChange, pageHref, pageSizes = PAGE_SIZES, onPageSizeChange, summary, pageNumbers = false, className }) {
 	const t = useStrings().list;
+	const locale = useLocale();
 	const start = page * pageSize + 1;
 	const pageEnd = (page + 1) * pageSize;
 	const known = total !== void 0;
@@ -59,7 +60,7 @@ function Pagination({ page, pageSize, total, hasNext, onPageChange, pageHref, pa
 	const position = summary ?? (known ? t.pager(start, end, pastCap ? end : total, pastCap) : null);
 	return /* @__PURE__ */ jsxs("nav", {
 		"aria-label": t.pagination,
-		className: cx("flex h-8 shrink-0 items-center justify-between gap-3 px-2.5", className),
+		className: cx("@container/pager flex h-8 shrink-0 items-center justify-between gap-3 px-2.5", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 flex-1 items-center gap-3 text-xs text-(--theme-muted-text-color)",
 			children: [position && /* @__PURE__ */ jsx("span", {
@@ -87,22 +88,39 @@ function Pagination({ page, pageSize, total, hasNext, onPageChange, pageHref, pa
 					onPageChange,
 					pageHref
 				}),
-				pageNumbers && pageCount !== void 0 && pageCount > 1 && /* @__PURE__ */ jsx("ol", {
-					className: "m-0 hidden list-none items-center gap-1 p-0 sm:flex",
-					children: pageSteps(page, pageCount, typeof pageNumbers === "object" ? pageNumbers.max : void 0).map((step, i) => /* @__PURE__ */ jsx("li", {
-						className: "flex",
-						children: step === null ? /* @__PURE__ */ jsx(MoreIcon, {
+				pageNumbers && pageCount !== void 0 && pageCount > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(PageNumbers, {
+						steps: pageSteps(page, pageCount, typeof pageNumbers === "object" ? pageNumbers.max : void 0),
+						page,
+						className: "hidden @min-[34rem]/pager:flex",
+						onPageChange,
+						pageHref
+					}),
+					/* @__PURE__ */ jsx(PageNumbers, {
+						steps: pageSteps(page, pageCount, 5),
+						page,
+						className: "hidden @min-[19rem]/pager:flex @min-[34rem]/pager:hidden",
+						onPageChange,
+						pageHref
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex items-center px-1 text-xs whitespace-nowrap text-(--theme-muted-text-color) tabular-nums @min-[19rem]/pager:hidden",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: t.pageOfTotal(page + 1, pageCount)
+						}), /* @__PURE__ */ jsxs("span", {
 							"aria-hidden": "true",
-							className: "size-3.5 w-5 text-(--theme-muted-text-color)"
-						}) : /* @__PURE__ */ jsx(PageNumber, {
-							to: step,
-							current: step === page,
-							label: t.page(step + 1),
-							onPageChange,
-							pageHref
-						})
-					}, step ?? `gap-${i}`))
-				}),
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "text-(--theme-app)",
+									children: formatInteger(page + 1, locale)
+								}),
+								" / ",
+								formatInteger(pageCount, locale)
+							]
+						})]
+					})
+				] }),
 				/* @__PURE__ */ jsx(PageStep, {
 					to: page + 1,
 					enabled: hasMore,
@@ -115,6 +133,25 @@ function Pagination({ page, pageSize, total, hasNext, onPageChange, pageHref, pa
 		})]
 	});
 }
+function PageNumbers({ steps, page, className, onPageChange, pageHref }) {
+	const t = useStrings().list;
+	return /* @__PURE__ */ jsx("ol", {
+		className: cx("m-0 list-none items-center gap-1 p-0", className),
+		children: steps.map((step, i) => /* @__PURE__ */ jsx("li", {
+			className: "flex",
+			children: step === null ? /* @__PURE__ */ jsx(MoreIcon, {
+				"aria-hidden": "true",
+				className: "size-3.5 w-4 text-(--theme-muted-text-color)"
+			}) : /* @__PURE__ */ jsx(PageNumber, {
+				to: step,
+				current: step === page,
+				label: t.page(step + 1),
+				onPageChange,
+				pageHref
+			})
+		}, step ?? `gap-${i}`))
+	});
+}
 function PageStep({ to, enabled, label, icon, onPageChange, pageHref }) {
 	if (pageHref && enabled) return /* @__PURE__ */ jsx(IconButton, {
 		variant: "outline",

package/dist/components/Provider.d.ts

@@ -588,6 +588,8 @@ export interface UIStrings {
     chart: {
         /** The row under a chart's tooltip that sums its series. */
         total: string;
+        /** The series that sums a chart's series past the eighth. */
+        other: string;
     };
     list: {
         moreActions: string;
@@ -635,6 +637,8 @@ export interface UIStrings {
         pagination: string;
         /** A numbered page's name in `Pagination`, counting from 1. */
         page: (page: number) => string;
+        /** Where the page sits, for `Pagination` too narrow for page numbers: it shows "5 / 12". */
+        pageOfTotal: (page: number, total: number) => string;
         removeSearchTerm: (term: string) => string;
     };
     /** The chip row of a list's active filters, its Filter menu and its pickers. Field and option

package/dist/components/Provider.js

@@ -580,7 +580,10 @@ var DEFAULTS = {
 			backspace: "Backspace",
 			delete: "Delete"
 		},
-		chart: { total: "Total" },
+		chart: {
+			total: "Total",
+			other: "Other"
+		},
 		list: {
 			moreActions: "More actions",
 			labelName: "name",
@@ -619,6 +622,7 @@ var DEFAULTS = {
 			paginationNext: "Next",
 			pagination: "Pagination",
 			page: (page) => `Page ${page}`,
+			pageOfTotal: (page, total) => `Page ${page} of ${total}`,
 			removeSearchTerm: (term) => `Remove filter ${term}`
 		},
 		filters: {

package/dist/components/RunStatusIcon.js

@@ -1,5 +1,5 @@
 import { cx } from "../cx.js";
-import { CancelIcon, FailIcon, NotRunningIcon, PendingIcon, RunningIcon, SkipIcon, SuccessIcon, WarningIcon } from "../icons.js";
+import { CancelFilledIcon, FailFilledIcon, NotRunningIcon, PendingRingIcon, RunningRingIcon, SkipIcon, SuccessFilledIcon, WarningFilledIcon } from "../icons.js";
 import { toneIcon } from "./tone.js";
 import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
@@ -8,33 +8,31 @@ import { jsx } from "react/jsx-runtime";
 var looks = {
 	pending: {
 		tone: "muted",
-		icon: PendingIcon
+		icon: PendingRingIcon
 	},
 	started: {
 		tone: "info",
-		icon: RunningIcon,
-		spin: true
+		icon: RunningRingIcon
 	},
 	running: {
 		tone: "info",
-		icon: RunningIcon,
-		spin: true
+		icon: RunningRingIcon
 	},
 	completed: {
 		tone: "success",
-		icon: SuccessIcon
+		icon: SuccessFilledIcon
 	},
 	warning: {
 		tone: "warning",
-		icon: WarningIcon
+		icon: WarningFilledIcon
 	},
 	failed: {
 		tone: "error",
-		icon: FailIcon
+		icon: FailFilledIcon
 	},
 	error: {
 		tone: "error",
-		icon: FailIcon
+		icon: FailFilledIcon
 	},
 	skipped: {
 		tone: "muted",
@@ -46,21 +44,20 @@ var looks = {
 	},
 	canceled: {
 		tone: "info",
-		icon: CancelIcon
+		icon: CancelFilledIcon
 	},
 	faulted: {
 		tone: "error",
-		icon: RunningIcon,
-		spin: true
+		icon: RunningRingIcon
 	},
 	canceling: {
 		tone: "info",
-		icon: RunningIcon,
-		spin: true
+		icon: RunningRingIcon
 	},
 	"": {
 		tone: "muted",
-		icon: NotRunningIcon
+		icon: NotRunningIcon,
+		faint: true
 	}
 };
 /** The tone a run status reads in, so a badge that says the status in words matches the
@@ -86,7 +83,7 @@ function RunStatusIcon({ status, label: ownLabel, tooltip = false, className, ..
 		className: cx("flex h-2 items-center", toneIcon[look.tone], className),
 		children: /* @__PURE__ */ jsx(Icon, {
 			"aria-hidden": "true",
-			className: cx(look.spin && "animate-spin rounded-full")
+			className: cx(look.faint && "opacity-55")
 		})
 	});
 	return tooltip && label ? /* @__PURE__ */ jsx(Tooltip, {

package/dist/components/StatusBadge.d.ts

@@ -72,10 +72,19 @@ export declare function CountBadge({ count, max, variant, emphasis, size, label,
 /** Any other span attribute and the ref reach its element, so it can be a Tooltip's or a popover's
  *  direct child. */
 export interface StatusDotProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'className'> {
+    /** The status's tone. */
     variant?: BadgeVariant | undefined;
+    /** A ping that ripples out from the dot, for something under way; still for reduced motion. */
     pulse?: boolean | undefined;
+    /** The dot's width and height in pixels, without its halo; 8 by default. */
     size?: number | undefined;
+    /** Takes the text's color with no halo, for a dot on a solid fill, where the tone would
+     *  vanish into it. */
+    current?: boolean | undefined;
     className?: string | undefined;
 }
-export declare function StatusDot({ variant, pulse, size, className, style, ...rest }: StatusDotProps): import("react").JSX.Element;
+/** A status's dot in its tone with a soft halo, for a status that stands beside its words
+ *  without a badge, such as "running" in a list's cell. A badge's own dot is this one. Name
+ *  the status in words beside it; the dot alone is only seen. */
+export declare function StatusDot({ variant, pulse, size, current, className, style, ...rest }: StatusDotProps): import("react").JSX.Element;
 export {};

package/dist/components/StatusBadge.js

@@ -33,6 +33,15 @@ var dotFill = {
 	...toneFill,
 	accent: "bg-(--theme-accent)"
 };
+var dotHalo = {
+	default: "ring-2 ring-(--theme-app)/22",
+	success: "ring-2 ring-(--theme-success)/22",
+	warning: "ring-2 ring-(--theme-warning)/22",
+	error: "ring-2 ring-(--theme-error)/22",
+	info: "ring-2 ring-(--theme-info)/22",
+	muted: "ring-2 ring-(--theme-muted-text-color)/22",
+	accent: "ring-2 ring-(--theme-accent)/22"
+};
 var sizeClasses = {
 	sm: "gap-1 py-px text-[10px] leading-3.5",
 	md: "gap-1.5 py-0.5 text-[11px] leading-4"
@@ -58,23 +67,21 @@ function statusTextClass(variant) {
 }
 /** A short status or label in a tone, such as "Running" or "Preview". */
 function StatusBadge({ children, variant = "default", emphasis = "soft", shape = "pill", caps = false, truncate = false, pulse = false, dot = false, size = "sm", render, className, ref, ...rest }) {
-	const indicator = emphasis === "solid" ? "bg-current" : dotFill[variant];
 	return useRender({
 		render: render ?? /* @__PURE__ */ jsx("span", {}),
 		ref,
 		props: mergeProps(rest, {
 			className: cx("inline-flex items-center border font-medium no-underline", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)", sizeClasses[size], padClasses[shape][size], shapeClasses[shape], caps && "uppercase tracking-wider", truncate && "min-w-0 max-w-full", emphasisClasses[emphasis][variant], className),
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [
-				pulse && /* @__PURE__ */ jsxs("span", {
-					className: "relative flex h-2 w-2 shrink-0",
-					children: [/* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:hidden", indicator) }), /* @__PURE__ */ jsx("span", { className: cx("relative inline-flex h-2 w-2 rounded-full", indicator) })]
-				}),
-				dot && !pulse && /* @__PURE__ */ jsx("span", { className: cx("inline-flex h-1.5 w-1.5 shrink-0 rounded-full", indicator) }),
-				truncate ? /* @__PURE__ */ jsx("span", {
-					className: "min-w-0 truncate",
-					children
-				}) : children
-			] })
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [(pulse || dot) && /* @__PURE__ */ jsx(StatusDot, {
+				variant,
+				pulse,
+				size: pulse ? 8 : 6,
+				current: emphasis === "solid",
+				className: "shrink-0"
+			}), truncate ? /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				children
+			}) : children] })
 		})
 	});
 }
@@ -99,8 +106,13 @@ function CountBadge({ count, max = 99, variant = "accent", emphasis = "solid", s
 		})]
 	});
 }
-function StatusDot({ variant = "default", pulse = false, size = 8, className, style, ...rest }) {
+/** A status's dot in its tone with a soft halo, for a status that stands beside its words
+*  without a badge, such as "running" in a list's cell. A badge's own dot is this one. Name
+*  the status in words beside it; the dot alone is only seen. */
+function StatusDot({ variant = "default", pulse = false, size = 8, current = false, className, style, ...rest }) {
+	const fill = current ? "bg-current" : dotFill[variant];
 	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": "true",
 		...rest,
 		className: cx("relative inline-flex", className),
 		style: {
@@ -108,8 +120,8 @@ function StatusDot({ variant = "default", pulse = false, size = 8, className, st
 			width: size,
 			height: size
 		},
-		children: [pulse && /* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:hidden", dotFill[variant]) }), /* @__PURE__ */ jsx("span", {
-			className: cx("relative inline-flex rounded-full", dotFill[variant]),
+		children: [pulse && /* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:hidden", fill) }), /* @__PURE__ */ jsx("span", {
+			className: cx("relative inline-flex rounded-full", fill, !current && dotHalo[variant]),
 			style: {
 				width: size,
 				height: size

package/dist/components/StatusIcons.d.ts

@@ -2,6 +2,8 @@ interface IBaseCheckmarkProps {
     className?: string;
     colored?: boolean;
 }
+/** Something done: a solid disc in the success tone with a check cut out of it. */
 export declare function SuccessCheckmark({ className, colored }: IBaseCheckmarkProps): import("react").JSX.Element;
+/** Something failed: a solid disc in the error tone with an x cut out of it. */
 export declare function ErrorCheckmark({ className, colored }: IBaseCheckmarkProps): import("react").JSX.Element;
 export {};