@parallelworks/ui 0.84.2 → 0.86.0

package/dist/components/StatusIcons.js

@@ -1,12 +1,14 @@
 import { cx } from "../cx.js";
-import { ErrorIcon, SuccessIcon } from "../icons.js";
+import { FailFilledIcon, SuccessFilledIcon } from "../icons.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/StatusIcons.tsx
+/** Something done: a solid disc in the success tone with a check cut out of it. */
 function SuccessCheckmark({ className, colored = true }) {
-	return /* @__PURE__ */ jsx(SuccessIcon, { className: cx(colored && "text-(--theme-success)", className) });
+	return /* @__PURE__ */ jsx(SuccessFilledIcon, { className: cx(colored && "text-(--theme-success)", className) });
 }
+/** Something failed: a solid disc in the error tone with an x cut out of it. */
 function ErrorCheckmark({ className, colored = true }) {
-	return /* @__PURE__ */ jsx(ErrorIcon, { className: cx(colored && "text-(--theme-error)", className) });
+	return /* @__PURE__ */ jsx(FailFilledIcon, { className: cx(colored && "text-(--theme-error)", className) });
 }
 //#endregion
 export { ErrorCheckmark, SuccessCheckmark };

package/dist/components/Tabs.js

@@ -2,8 +2,9 @@ import { cx } from "../cx.js";
 import { useStickyTop } from "./stickyTop.js";
 import { Tooltip } from "./Tooltip.js";
 import { AppLink } from "./AppLink.js";
+import { fadeMask, useHiddenEnds } from "./scrollFade.js";
 import { SegmentContent, segmentClassName, segmentGroupClassName } from "./segmented.js";
-import { useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/Tabs.tsx
@@ -26,6 +27,31 @@ function Tabs$1({ label, items, value, defaultValue, onValueChange, variant = "l
 	const showRow = items.length > 1 || !!end;
 	const [row, setRow] = useState(null);
 	useStickyTop(row, !!sticky);
+	const scroller = useHiddenEnds(!segmented && showRow);
+	const scrolled = useRef(false);
+	useLayoutEffect(() => {
+		const list = scroller.ref.current;
+		const tab = list?.querySelector("[aria-selected=\"true\"]");
+		if (!list || !tab || segmented) return;
+		const margin = 24;
+		const left = tab.offsetLeft;
+		const right = left + tab.offsetWidth;
+		let to;
+		if (left - margin < list.scrollLeft) to = Math.max(0, left - margin);
+		else if (right + margin > list.scrollLeft + list.clientWidth) to = right + margin - list.clientWidth;
+		if (to !== void 0) {
+			const smooth = scrolled.current && !globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+			list.scrollTo?.({
+				left: to,
+				behavior: smooth ? "smooth" : "instant"
+			});
+		}
+		scrolled.current = true;
+	}, [
+		current,
+		segmented,
+		scroller.ref
+	]);
 	const tabs = items.map((item) => {
 		const tab = /* @__PURE__ */ jsx(Tabs.Tab, {
 			value: item.value,
@@ -61,7 +87,10 @@ function Tabs$1({ label, items, value, defaultValue, onValueChange, variant = "l
 			className: cx("flex items-center justify-between gap-2", !segmented && "border-b border-(--theme-border)", sticky && "sticky top-0 z-(--layer-sticky) bg-(--theme-app-bg)", className),
 			children: [/* @__PURE__ */ jsxs(Tabs.List, {
 				"aria-label": label,
-				className: cx(segmented ? segmentGroupClassName(layout) : "relative flex min-w-0 overflow-x-auto"),
+				ref: segmented ? void 0 : scroller.ref,
+				onScroll: segmented ? void 0 : scroller.onScroll,
+				style: segmented ? void 0 : fadeMask(scroller.ends),
+				className: cx(segmented ? segmentGroupClassName(layout) : "relative flex min-w-0 overflow-x-auto rtl:[--fade-end:left]"),
 				children: [tabs, !segmented && /* @__PURE__ */ jsx(Tabs.Indicator, { className: "absolute bottom-0 left-0 h-0.5 w-(--active-tab-width) translate-x-(--active-tab-left) bg-(--theme-link) transition-[translate,width] duration-200 ease-in-out motion-reduce:transition-none" })]
 			}), end]
 		}), children]

package/dist/components/Tag.d.ts

@@ -6,7 +6,8 @@ export interface TagStyle {
     caps?: boolean | undefined;
 }
 /** The one tag look: a pill with a hairline border and 11px text. Another component's chip,
- *  such as a picker's chosen value, uses it to look the same. */
+ *  such as a picker's chosen value, uses it to look the same. It has the panel's fill, so its
+ *  edge shows on a hovered or selected row too, whose fill can match the border. */
 export declare function tagClasses({ mono, caps }?: TagStyle): string;
 /** Any other attribute and the ref reach the tag's element, its link with `href` and no `onRemove`,
  *  so it can be a Tooltip's or a popover's direct child. */

package/dist/components/Tag.js

@@ -7,9 +7,10 @@ import { useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Tag.tsx
 /** The one tag look: a pill with a hairline border and 11px text. Another component's chip,
-*  such as a picker's chosen value, uses it to look the same. */
+*  such as a picker's chosen value, uses it to look the same. It has the panel's fill, so its
+*  edge shows on a hovered or selected row too, whose fill can match the border. */
 function tagClasses({ mono = false, caps = false } = {}) {
-	return cx("inline-flex h-5 max-w-full min-w-0 shrink-0 items-center gap-1 rounded-full border border-(--theme-border) px-2 text-[11px] leading-none whitespace-nowrap text-(--theme-app)", mono ? "font-mono" : "font-sans", caps && "text-[10px] font-medium tracking-wide uppercase");
+	return cx("inline-flex h-5 max-w-full min-w-0 shrink-0 items-center gap-1 rounded-full border border-(--theme-border) bg-(--theme-panel-bg) px-2 text-[11px] leading-none whitespace-nowrap text-(--theme-app)", mono ? "font-mono" : "font-sans", caps && "text-[10px] font-medium tracking-wide uppercase");
 }
 /** A tag or label on a thing: a pill with an optional color dot, a link with `href`, and an ×
 *  with `onRemove`. */
@@ -27,7 +28,7 @@ function Tag({ children, color, href, onRemove, removeLabel, title, mono, caps,
 		mono,
 		caps
 	}), className);
-	const hover = "transition-colors hover:bg-(--theme-hover)";
+	const hover = "transition-colors hover:bg-(--theme-muted-panel-bg)";
 	if (!onRemove) return href ? /* @__PURE__ */ jsx(AppLink, {
 		...rest,
 		ref,
@@ -173,7 +174,7 @@ function MoreTags({ tags, ...style }) {
 		trigger: /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"aria-label": `${common.moreCount(tags.length)}: ${names.join(", ")}`,
-			className: cx(tagClasses(style), "cursor-pointer text-(--theme-muted-text-color) tabular-nums hover:bg-(--theme-hover) hover:text-(--theme-app) focus-visible:outline-2 focus-visible:outline-(--theme-focus) data-popup-open:bg-(--theme-hover)"),
+			className: cx(tagClasses(style), "cursor-pointer text-(--theme-muted-text-color) tabular-nums hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) focus-visible:outline-2 focus-visible:outline-(--theme-focus) data-popup-open:bg-(--theme-muted-panel-bg)"),
 			children: ["+", count]
 		}),
 		children: /* @__PURE__ */ jsx("ul", {

package/dist/components/chart.d.ts

@@ -1,14 +1,28 @@
 import { type CSSProperties, type ReactNode } from 'react';
-/** A series' mark color for palette slot 1–8: the theme's category hue, between the slot's
- *  soft fill and its text and twice as saturated, so a bar or a line stands out from the page
- *  in light and dark alike and keeps the hue the slot has everywhere else. */
-export declare function seriesSlotColor(slot: number): string;
-/** A series' color by its key, any CSS color for a fill, a stroke or a style: the same key
- *  gets the same color on every chart, as `categoryOf` gives a name its avatar color. */
-export declare function seriesColor(key: string): string;
-/** Colors for a chart's series, each key its `seriesColor` unless another key took that slot
- *  first, when it moves to the next free one: up to eight series never share a color. */
+/** How many series a chart colors: a series past the eighth folds into "Other" (`foldSeries`)
+ *  rather than taking a hue made up for it. */
+export declare const SERIES_LIMIT: 8;
+/** The key `foldSeries` gives the series that sums those past the limit. */
+export declare const OTHER_SERIES_KEY = "__other__";
+/** The mark color of the "Other" series: a neutral gray, so it never reads as one more series. */
+export declare const OTHER_SERIES_COLOR = "color-mix(in oklch, var(--theme-muted-text-color) 75%, var(--theme-panel-bg))";
+/** The color of a chart's nth series, 1–8: the theme's category hue, between the slot's soft
+ *  fill and its text and twice as saturated, so a bar or a line stands out from the page in
+ *  light and dark alike. Past the eighth it is the "Other" gray; a hue is never repeated. */
+export declare function seriesSlotColor(position: number): string;
+/** Colors for a chart's series by their place in `keys`: the first takes the first color, the
+ *  second the next, so the first few are always the most distinct. Pass every key the chart can
+ *  show, in an order that doesn't depend on the data shown, such as by name or as configured:
+ *  a filter that hides a series then leaves the others their colors. `OTHER_SERIES_KEY`, and any
+ *  key past the eighth, is the "Other" gray; fold them first with `foldSeries`. */
 export declare function seriesColors(keys: readonly string[]): Record<string, string>;
+/** Splits a chart's series at the limit: up to eight show as they are, and more keep the first
+ *  seven and fold the rest into one "Other" series, `OTHER_SERIES_KEY`, whose value at a point
+ *  is the sum of `folded`. Name it with the `chart.other` string. */
+export declare function foldSeries(keys: readonly string[], limit?: number): {
+    keys: string[];
+    folded: string[];
+};
 export type SeriesSwatchShape = 'square' | 'dot' | 'line';
 /** A series' color as a mark, for a legend or a tooltip's row. Only seen: the series' name
  *  beside it says which it is. */
@@ -64,6 +78,39 @@ export declare function ChartTooltipContent({ label, items, formatValue, total,
     /** Lists the largest value first; on by default. */
     sort?: boolean | undefined;
     className?: string | undefined;
-    /** Places it, such as beside the point it describes. */
+    /** Places it; `ChartTooltipBeside` places it beside a crosshair. */
     style?: CSSProperties | undefined;
 }): import("react").JSX.Element;
+export interface ChartTooltipPlacement {
+    /** The tooltip's left edge. */
+    left: number;
+    side: 'left' | 'right';
+    /** A width to hold it to when neither side has room for all of it, its names truncating. */
+    maxWidth: number | null;
+}
+/** Where a chart's tooltip goes beside a crosshair at `x`, so it never covers the column under
+ *  the pointer: `gap` to the `prefer` side, or the other when it doesn't fit between `x` and
+ *  that edge, or held to the wider side when neither fits. `start` and `end` bound it, in the
+ *  same coordinates as `x`, such as the chart's box or the viewport. A charting library's
+ *  tooltip takes `left` as its position. */
+export declare function chartTooltipPlacement({ x, width, start, end, gap, prefer, }: {
+    x: number;
+    width: number;
+    start: number;
+    end: number;
+    gap?: number | undefined;
+    prefer?: 'left' | 'right' | undefined;
+}): ChartTooltipPlacement;
+/** Holds a chart's tooltip beside its crosshair, inside a positioned box around the plot: `x`
+ *  is the crosshair in that box, and the tooltip sits `top` from its top, to the crosshair's
+ *  inline end, or its start where the box has no room. When neither side of the box has room,
+ *  as on a phone, it may reach past the box to the viewport's edge, and is held narrower when
+ *  even that is too small. It never covers the hovered column or the pointer on it. Nothing
+ *  shows while `x` is null. */
+export declare function ChartTooltipBeside({ x, top, gap, className, children, }: {
+    x: number | null;
+    top?: number | undefined;
+    gap?: number | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element | null;

package/dist/components/chart.js

@@ -1,36 +1,65 @@
 import { cx } from "../cx.js";
 import { useLocale, useStrings } from "./Provider.js";
-import { CATEGORY_CLASSES, categoryOf } from "./category.js";
-import { useCallback, useMemo, useState } from "react";
+import { CATEGORY_CLASSES } from "./category.js";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/chart.tsx
-var SLOTS = CATEGORY_CLASSES.length;
-/** A series' mark color for palette slot 1–8: the theme's category hue, between the slot's
-*  soft fill and its text and twice as saturated, so a bar or a line stands out from the page
-*  in light and dark alike and keeps the hue the slot has everywhere else. */
-function seriesSlotColor(slot) {
-	const n = ((slot - 1) % SLOTS + SLOTS) % SLOTS + 1;
+/** How many series a chart colors: a series past the eighth folds into "Other" (`foldSeries`)
+*  rather than taking a hue made up for it. */
+var SERIES_LIMIT = CATEGORY_CLASSES.length;
+/** The theme's category slots in the order series take them. Each run from the first — three,
+*  four or all eight — keeps neighbors apart in hue and lightness, for color-blind readers too,
+*  in light and dark, where the theme's own order steps through neighboring hues. */
+var SERIES_ORDER = [
+	5,
+	2,
+	8,
+	3,
+	6,
+	4,
+	7,
+	1
+];
+/** The key `foldSeries` gives the series that sums those past the limit. */
+var OTHER_SERIES_KEY = "__other__";
+/** The mark color of the "Other" series: a neutral gray, so it never reads as one more series. */
+var OTHER_SERIES_COLOR = "color-mix(in oklch, var(--theme-muted-text-color) 75%, var(--theme-panel-bg))";
+/** The color of a chart's nth series, 1–8: the theme's category hue, between the slot's soft
+*  fill and its text and twice as saturated, so a bar or a line stands out from the page in
+*  light and dark alike. Past the eighth it is the "Other" gray; a hue is never repeated. */
+function seriesSlotColor(position) {
+	const n = SERIES_ORDER[position - 1];
+	if (n === void 0) return OTHER_SERIES_COLOR;
 	return `oklch(from color-mix(in oklch, var(--theme-category-${n}), var(--theme-category-${n}-text)) l calc(c * 2) h)`;
 }
-/** A series' color by its key, any CSS color for a fill, a stroke or a style: the same key
-*  gets the same color on every chart, as `categoryOf` gives a name its avatar color. */
-function seriesColor(key) {
-	return seriesSlotColor(categoryOf(key));
-}
-/** Colors for a chart's series, each key its `seriesColor` unless another key took that slot
-*  first, when it moves to the next free one: up to eight series never share a color. */
+/** Colors for a chart's series by their place in `keys`: the first takes the first color, the
+*  second the next, so the first few are always the most distinct. Pass every key the chart can
+*  show, in an order that doesn't depend on the data shown, such as by name or as configured:
+*  a filter that hides a series then leaves the others their colors. `OTHER_SERIES_KEY`, and any
+*  key past the eighth, is the "Other" gray; fold them first with `foldSeries`. */
 function seriesColors(keys) {
-	const taken = /* @__PURE__ */ new Set();
 	const colors = {};
+	let position = 0;
 	for (const key of keys) {
 		if (key in colors) continue;
-		let slot = categoryOf(key);
-		if (taken.size < SLOTS) while (taken.has(slot)) slot = slot % SLOTS + 1;
-		taken.add(slot);
-		colors[key] = seriesSlotColor(slot);
+		colors[key] = key === "__other__" ? OTHER_SERIES_COLOR : seriesSlotColor(++position);
 	}
 	return colors;
 }
+/** Splits a chart's series at the limit: up to eight show as they are, and more keep the first
+*  seven and fold the rest into one "Other" series, `OTHER_SERIES_KEY`, whose value at a point
+*  is the sum of `folded`. Name it with the `chart.other` string. */
+function foldSeries(keys, limit = SERIES_LIMIT) {
+	const unique = [...new Set(keys)];
+	if (unique.length <= limit) return {
+		keys: unique,
+		folded: []
+	};
+	return {
+		keys: [...unique.slice(0, limit - 1), OTHER_SERIES_KEY],
+		folded: unique.slice(limit - 1)
+	};
+}
 /** A series' color as a mark, for a legend or a tooltip's row. Only seen: the series' name
 *  beside it says which it is. */
 function SeriesSwatch({ color, shape = "square", className }) {
@@ -107,7 +136,7 @@ function ChartTooltipContent({ label, items, formatValue, total, highlighted, hi
 	const sum = rows.reduce((acc, item) => acc + item.value, 0);
 	const showTotal = total ?? rows.length > 1;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("min-w-40 rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) p-3 text-xs text-(--theme-app) shadow-(--theme-shadow-lg)", className),
+		className: cx("min-w-[var(--chart-tooltip-min,10rem)] rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) p-3 text-xs text-(--theme-app) shadow-(--theme-shadow-lg)", className),
 		style,
 		children: [
 			label != null && label !== "" && /* @__PURE__ */ jsx("div", {
@@ -141,5 +170,71 @@ function ChartTooltipContent({ label, items, formatValue, total, highlighted, hi
 		]
 	});
 }
+/** Where a chart's tooltip goes beside a crosshair at `x`, so it never covers the column under
+*  the pointer: `gap` to the `prefer` side, or the other when it doesn't fit between `x` and
+*  that edge, or held to the wider side when neither fits. `start` and `end` bound it, in the
+*  same coordinates as `x`, such as the chart's box or the viewport. A charting library's
+*  tooltip takes `left` as its position. */
+function chartTooltipPlacement({ x, width, start, end, gap = 12, prefer = "right" }) {
+	const room = {
+		left: x - gap - start,
+		right: end - x - gap
+	};
+	let side = (prefer === "right" ? ["right", "left"] : ["left", "right"]).find((s) => width <= room[s]);
+	let maxWidth = null;
+	if (side === void 0) {
+		side = room.right >= room.left ? "right" : "left";
+		maxWidth = Math.max(0, room[side]);
+	}
+	const shown = maxWidth ?? width;
+	return {
+		left: side === "right" ? x + gap : x - gap - shown,
+		side,
+		maxWidth
+	};
+}
+/** Keeps a tooltip clear of the viewport's edge by this much. */
+var VIEWPORT_MARGIN = 8;
+/** Holds a chart's tooltip beside its crosshair, inside a positioned box around the plot: `x`
+*  is the crosshair in that box, and the tooltip sits `top` from its top, to the crosshair's
+*  inline end, or its start where the box has no room. When neither side of the box has room,
+*  as on a phone, it may reach past the box to the viewport's edge, and is held narrower when
+*  even that is too small. It never covers the hovered column or the pointer on it. Nothing
+*  shows while `x` is null. */
+function ChartTooltipBeside({ x, top = 0, gap = 12, className, children }) {
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el || x === null) return;
+		el.style.maxWidth = "";
+		el.style.removeProperty("--chart-tooltip-min");
+		const width = el.offsetWidth;
+		const box = el.offsetParent;
+		const origin = box ? box.getBoundingClientRect().left + box.clientLeft : 0;
+		const view = document.documentElement.clientWidth || window.innerWidth;
+		const place = (start, end) => chartTooltipPlacement({
+			x,
+			width,
+			start,
+			end,
+			gap,
+			prefer: getComputedStyle(el).direction === "rtl" ? "left" : "right"
+		});
+		let placement = box ? place(0, box.clientWidth) : null;
+		if (placement === null || placement.maxWidth !== null) placement = place(VIEWPORT_MARGIN - origin, view - VIEWPORT_MARGIN - origin);
+		el.style.left = `${placement.left}px`;
+		if (placement.maxWidth !== null) {
+			el.style.maxWidth = `${placement.maxWidth}px`;
+			el.style.setProperty("--chart-tooltip-min", "0px");
+		}
+	});
+	if (x === null) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pointer-events-none absolute z-10 w-max", className),
+		style: { top },
+		children
+	});
+}
 //#endregion
-export { ChartLegendList, ChartTooltipContent, SeriesSwatch, seriesColor, seriesColors, seriesOpacity, seriesSlotColor, useSeriesHighlight };
+export { ChartLegendList, ChartTooltipBeside, ChartTooltipContent, OTHER_SERIES_COLOR, OTHER_SERIES_KEY, SERIES_LIMIT, SeriesSwatch, chartTooltipPlacement, foldSeries, seriesColors, seriesOpacity, seriesSlotColor, useSeriesHighlight };

package/dist/components/scrollFade.d.ts

@@ -0,0 +1,13 @@
+import { type CSSProperties } from 'react';
+/** Which ends of a sideways scroller hide some of its content, kept up to date as it
+ *  scrolls or resizes. */
+export type HiddenEnds = {
+    start: boolean;
+    end: boolean;
+};
+export declare function useHiddenEnds(active: boolean): {
+    ref: import("react").RefObject<HTMLElement | null>;
+    ends: HiddenEnds;
+    onScroll: () => void;
+};
+export declare function fadeMask({ start, end }: HiddenEnds): CSSProperties | undefined;

package/dist/components/scrollFade.js

@@ -0,0 +1,51 @@
+import { useEffectEvent, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/scrollFade.ts
+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
+	};
+}
+//#endregion
+export { fadeMask, useHiddenEnds };

package/dist/file-explorer/FileExplorer.js

@@ -551,6 +551,14 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	const triggerBrowserDownload = (url, filename) => {
 		const href = safeUrl(url);
 		if (!href) return;
+		if (new URL(href, window.location.href).origin !== window.location.origin) {
+			const frame = document.createElement("iframe");
+			frame.hidden = true;
+			frame.src = href;
+			document.body.appendChild(frame);
+			setTimeout(() => frame.remove(), 6e4);
+			return;
+		}
 		const a = document.createElement("a");
 		a.href = href;
 		a.download = filename;

package/dist/icons.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, SVGProps } from 'react';
+import { type ReactNode, type SVGProps } from 'react';
 export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
     /** Width and height; the text's size by default. */
     size?: string | number | undefined;
@@ -284,6 +284,19 @@ export declare const WorkspaceMountIcon: IconType;
 export declare const ZipIcon: IconType;
 export declare const ZoomInIcon: IconType;
 export declare const ZoomOutIcon: IconType;
+/** Done: a solid disc with a check cut out of it. */
+export declare const SuccessFilledIcon: IconType;
+/** Failed: a solid disc with an x cut out of it. */
+export declare const FailFilledIcon: IconType;
+/** Canceled: a solid disc with a dash cut out of it. */
+export declare const CancelFilledIcon: IconType;
+/** Done with problems: a solid triangle with an exclamation mark cut out of it. */
+export declare const WarningFilledIcon: IconType;
+/** Under way: a faint track, a quarter arc that turns around it and a center dot that breathes.
+ *  Both hold still for a reader who asks for reduced motion. */
+export declare function RunningRingIcon({ children, color, ...props }: IconProps): import("react").JSX.Element;
+/** Waiting to start: a dashed ring, eight even dashes around it. */
+export declare const PendingRingIcon: IconType;
 export { ErrorCheckmark, SuccessCheckmark } from './components/StatusIcons.js';
 /** @deprecated Renamed NamespaceIcon, which says what it means. */
 export declare const KubernetesNamespaceIcon: IconType;

package/dist/icons.js

@@ -1,4 +1,5 @@
 import { ErrorCheckmark, SuccessCheckmark } from "./components/StatusIcons.js";
+import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/icons.tsx
 var STROKE_WIDTH = 1.5;
@@ -306,6 +307,108 @@ var WorkspaceMountIcon = /* @__PURE__ */ drawn("M2 4.5A1.5 1.5 0 0 1 3.5 3h2.6l1
 var ZipIcon = /* @__PURE__ */ drawn("M9.5 1.75h-5a1 1 0 0 0-1 1v10.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V4.75ZM9.5 1.75v3h3M6.5 4h.01M6.5 6.5h.01M6.5 8.75v1.25M6.5 12.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z");
 var ZoomInIcon = /* @__PURE__ */ drawn("M7 12A5 5 0 1 0 7 2a5 5 0 0 0 0 10ZM14 14l-3.5-3.5M7 5v4M5 7h4");
 var ZoomOutIcon = /* @__PURE__ */ drawn("M7 12A5 5 0 1 0 7 2a5 5 0 0 0 0 10ZM14 14l-3.5-3.5M5 7h4");
+var DISC = "M8 14.75A6.75 6.75 0 1 0 8 1.25a6.75 6.75 0 0 0 0 13.5Z";
+var TRIANGLE = "M7.13 1.9a1 1 0 0 1 1.74 0l6.1 10.6a1 1 0 0 1-.87 1.5H1.9a1 1 0 0 1-.87-1.5Z";
+var KNOCKOUT_WIDTH = 1.6;
+/** The `svg` every status icon shares: the 16px grid at the text's size, hidden from assistive
+*  technology unless a title or label names it. */
+function StatusSvg({ title, children, size = "1em", color = "currentColor", strokeWidth = STROKE_WIDTH, ...props }) {
+	const named = Boolean(title || props["aria-label"] || props["aria-labelledby"]);
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 16 16",
+		width: size,
+		height: size,
+		fill: "none",
+		stroke: color,
+		strokeWidth,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...named ? { role: "img" } : { "aria-hidden": true },
+		...props,
+		children: [title && /* @__PURE__ */ jsx("title", { children: title }), children]
+	});
+}
+/** A solid `shape` with `mark` cut out of it. The mask's id is the instance's own, so two on a
+*  page never borrow each other's. */
+function knockedOut(shape, mark) {
+	function Icon({ children, color = "currentColor", ...props }) {
+		const id = `status-mask-${useId().replace(/[^\w-]/g, "")}`;
+		return /* @__PURE__ */ jsxs(StatusSvg, {
+			color,
+			"data-status-icon": "filled",
+			...props,
+			children: [
+				/* @__PURE__ */ jsxs("mask", {
+					id,
+					maskUnits: "userSpaceOnUse",
+					x: "0",
+					y: "0",
+					width: "16",
+					height: "16",
+					children: [/* @__PURE__ */ jsx("rect", {
+						width: "16",
+						height: "16",
+						fill: "#fff",
+						stroke: "none"
+					}), /* @__PURE__ */ jsx("path", {
+						d: mark,
+						stroke: "#000",
+						strokeWidth: KNOCKOUT_WIDTH
+					})]
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: shape,
+					fill: color,
+					stroke: "none",
+					mask: `url(#${id})`
+				}),
+				children
+			]
+		});
+	}
+	return Icon;
+}
+/** Done: a solid disc with a check cut out of it. */
+var SuccessFilledIcon = /* @__PURE__ */ knockedOut(DISC, "M5.25 8.25 7 10l3.5-4");
+/** Failed: a solid disc with an x cut out of it. */
+var FailFilledIcon = /* @__PURE__ */ knockedOut(DISC, "M6 6l4 4M10 6l-4 4");
+/** Canceled: a solid disc with a dash cut out of it. */
+var CancelFilledIcon = /* @__PURE__ */ knockedOut(DISC, "M5.5 8h5");
+/** Done with problems: a solid triangle with an exclamation mark cut out of it. */
+var WarningFilledIcon = /* @__PURE__ */ knockedOut(TRIANGLE, "M8 6v3M8 11.4h.01");
+/** Under way: a faint track, a quarter arc that turns around it and a center dot that breathes.
+*  Both hold still for a reader who asks for reduced motion. */
+function RunningRingIcon({ children, color = "currentColor", ...props }) {
+	return /* @__PURE__ */ jsxs(StatusSvg, {
+		color,
+		"data-status-icon": "ring",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "8",
+				r: "6",
+				opacity: "0.25"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M8 2a6 6 0 0 1 6 6",
+				className: "origin-center [transform-box:view-box] motion-safe:animate-[spin_1.6s_linear_infinite]"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "8",
+				r: "2.6",
+				fill: color,
+				stroke: "none",
+				className: "motion-safe:animate-pulse"
+			}),
+			children
+		]
+	});
+}
+/** Waiting to start: a dashed ring, eight even dashes around it. */
+var PendingRingIcon = /* @__PURE__ */ drawn("M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z", { strokeDasharray: "2.2 2.5124" });
 /** @deprecated Renamed NamespaceIcon, which says what it means. */
 var KubernetesNamespaceIcon = NamespaceIcon;
 /** @deprecated Renamed CommandShellIcon, which says what it means. */
@@ -313,4 +416,4 @@ var PowershellIcon = CommandShellIcon;
 /** @deprecated Renamed QuickActionIcon, which says what it means. */
 var ZapIcon = QuickActionIcon;
 //#endregion
-export { APIIcon, AccessIcon, AddAllocationIcon, AddIcon, AddProjectIcon, AddUserIcon, AgentIcon, AiProviderIcon, AllocationIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArticleIcon, AttachmentIcon, AuthenticationIcon, BannerIcon, BillingIcon, BranchIcon, BriefcaseIcon, BucketIcon, BuildWorkflowIcon, CalendarIcon, CancelIcon, CelebrateIcon, CertificateIcon, ChangesRequestedIcon, ChartIcon, ChatIcon, CheckIcon, ChevronDoubleDownIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardCheckIcon, ClockIcon, CloseIcon, CloudIcon, CloudNetworkIcon, ClusterIcon, CodeIcon, CollapseIcon, ColumnsIcon, CommandShellIcon, CommentIcon, CommitIcon, ComputeIcon, ConfigIcon, ConnectIcon, ContractIcon, CopyIcon, CustomizeIcon, DefaultIcon, DefinitionIcon, DeprovisionIcon, DesktopIcon, DestroyIcon, DeviceIcon, DirectoryIcon, DirectorySyncIcon, DisableCostIcon, DisableUserIcon, DisconnectIcon, DiskIcon, DisplayIcon, DownloadIcon, DragHandleIcon, DuplicateIcon, EditIcon, EditorIcon, EducationIcon, EnableCostIcon, EnableUserIcon, EndpointIcon, ErrorCheckmark, ErrorIcon, EventsIcon, ExpandIcon, ExpandVerticalIcon, ExpiredIcon, ExpiringIcon, ExpressionIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FailIcon, FavoriteIcon, FavoriteOutlineIcon, FeaturedIcon, FileIcon, FileTextIcon, FilesIcon, FilesystemIcon, FilterClearIcon, FilterIcon, FlaggedIcon, FlaskIcon, FolderIcon, FolderOpenIcon, FolderTreeIcon, ForbiddenIcon, ForkIcon, GearsIcon, GlobeIcon, GovernmentIcon, GraphIcon, GridIcon, HealthMonitoringIcon, HelpIcon, HistoryIcon, HomeIcon, IdCardIcon, ImageIcon, ImpersonateIcon, InboxIcon, IndexIcon, InfoIcon, InfrastructureLayersIcon, InputFormIcon, InstallIcon, InstanceIcon, InstanceTypeIcon, IpAddressIcon, IssueIcon, JobIcon, JsonIcon, KeyIcon, KeyboardIcon, KubernetesNamespaceIcon, LanguageIcon, LegalIcon, LibraryIcon, LicenseIcon, LinkIcon, ListViewIcon, LoadingIcon, LockIcon, LogsIcon, MFAIcon, MachineImageIcon, MailFailedIcon, MailIcon, MailVerifiedIcon, MapPinIcon, MarketplaceIcon, MatrixIcon, MegaphoneIcon, MigrationIcon, MinimizeIcon, MinusIcon, MlIcon, MoneyIcon, MoonIcon, MoreIcon, MusicIcon, MuteIcon, NamespaceIcon, NavigationIcon, NetworkInterfaceIcon, NetworkShareIcon, NewChatIcon, NodeIcon, NotRunningIcon, NotebookIcon, NotificationIcon, OnboardingIcon, OpenInNewGraphIcon, OrganizationIcon, OwnerIcon, PartnerIcon, PasswordIcon, PauseIcon, PdfIcon, PendingIcon, PhoneIcon, PieChartIcon, PinFilledIcon, PinIcon, PowerIcon, PowershellIcon, PreviewIcon, PrintIcon, ProjectIcon, ProvisionIcon, PublishIcon, PullRequestIcon, QRCodeIcon, QueueIcon, QuickActionIcon, QuotaIcon, RedoIcon, RefreshIcon, ReleaseIcon, RemoveIcon, RemoveUserIcon, RenameIcon, RenewIcon, ReportIcon, RepositoryIcon, ResetIcon, ResetLayoutIcon, ResourceGroupIcon, ResourceIcon, RestartIcon, RestoreIcon, RetryIcon, RevokeIcon, RoleIcon, RollbackIcon, RunWorkflowIcon, RunningIcon, RunsIcon, SaveIcon, SchedulerIcon, ScriptIcon, SearchIcon, SendIcon, ServiceIcon, SessionIcon, SettingsIcon, ShareIcon, SharedIcon, ShieldIcon, ShieldOffIcon, ShrinkIcon, SidebarCloseIcon, SidebarIcon, SidebarOpenIcon, SignInIcon, SignOutIcon, SkipIcon, SnapshotIcon, SortDownIcon, SortUnsortedIcon, SortUpIcon, SparklesIcon, SplitIcon, SpreadsheetIcon, StartIcon, StopIcon, StorageIcon, SubdomainIcon, SuccessCheckmark, SuccessIcon, SummaryIcon, SunIcon, SupportIcon, SwapIcon, TagIcon, TerminalIcon, ThinkingIcon, TodoIcon, TokenIcon, ToolsIcon, TrashIcon, TunnelIcon, UndoIcon, UnfavoriteIcon, UnlinkIcon, UnmuteIcon, UnsplitIcon, UploadIcon, UserIcon, UserWorkspaceIcon, UsersIcon, VariableIcon, VerifiedIcon, VideoIcon, WarningIcon, WebhookIcon, WorkerIcon, WorkflowIcon, WorkloadIcon, WorkspaceMountIcon, ZapIcon, ZipIcon, ZoomInIcon, ZoomOutIcon };
+export { APIIcon, AccessIcon, AddAllocationIcon, AddIcon, AddProjectIcon, AddUserIcon, AgentIcon, AiProviderIcon, AllocationIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArticleIcon, AttachmentIcon, AuthenticationIcon, BannerIcon, BillingIcon, BranchIcon, BriefcaseIcon, BucketIcon, BuildWorkflowIcon, CalendarIcon, CancelFilledIcon, CancelIcon, CelebrateIcon, CertificateIcon, ChangesRequestedIcon, ChartIcon, ChatIcon, CheckIcon, ChevronDoubleDownIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardCheckIcon, ClockIcon, CloseIcon, CloudIcon, CloudNetworkIcon, ClusterIcon, CodeIcon, CollapseIcon, ColumnsIcon, CommandShellIcon, CommentIcon, CommitIcon, ComputeIcon, ConfigIcon, ConnectIcon, ContractIcon, CopyIcon, CustomizeIcon, DefaultIcon, DefinitionIcon, DeprovisionIcon, DesktopIcon, DestroyIcon, DeviceIcon, DirectoryIcon, DirectorySyncIcon, DisableCostIcon, DisableUserIcon, DisconnectIcon, DiskIcon, DisplayIcon, DownloadIcon, DragHandleIcon, DuplicateIcon, EditIcon, EditorIcon, EducationIcon, EnableCostIcon, EnableUserIcon, EndpointIcon, ErrorCheckmark, ErrorIcon, EventsIcon, ExpandIcon, ExpandVerticalIcon, ExpiredIcon, ExpiringIcon, ExpressionIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FailFilledIcon, FailIcon, FavoriteIcon, FavoriteOutlineIcon, FeaturedIcon, FileIcon, FileTextIcon, FilesIcon, FilesystemIcon, FilterClearIcon, FilterIcon, FlaggedIcon, FlaskIcon, FolderIcon, FolderOpenIcon, FolderTreeIcon, ForbiddenIcon, ForkIcon, GearsIcon, GlobeIcon, GovernmentIcon, GraphIcon, GridIcon, HealthMonitoringIcon, HelpIcon, HistoryIcon, HomeIcon, IdCardIcon, ImageIcon, ImpersonateIcon, InboxIcon, IndexIcon, InfoIcon, InfrastructureLayersIcon, InputFormIcon, InstallIcon, InstanceIcon, InstanceTypeIcon, IpAddressIcon, IssueIcon, JobIcon, JsonIcon, KeyIcon, KeyboardIcon, KubernetesNamespaceIcon, LanguageIcon, LegalIcon, LibraryIcon, LicenseIcon, LinkIcon, ListViewIcon, LoadingIcon, LockIcon, LogsIcon, MFAIcon, MachineImageIcon, MailFailedIcon, MailIcon, MailVerifiedIcon, MapPinIcon, MarketplaceIcon, MatrixIcon, MegaphoneIcon, MigrationIcon, MinimizeIcon, MinusIcon, MlIcon, MoneyIcon, MoonIcon, MoreIcon, MusicIcon, MuteIcon, NamespaceIcon, NavigationIcon, NetworkInterfaceIcon, NetworkShareIcon, NewChatIcon, NodeIcon, NotRunningIcon, NotebookIcon, NotificationIcon, OnboardingIcon, OpenInNewGraphIcon, OrganizationIcon, OwnerIcon, PartnerIcon, PasswordIcon, PauseIcon, PdfIcon, PendingIcon, PendingRingIcon, PhoneIcon, PieChartIcon, PinFilledIcon, PinIcon, PowerIcon, PowershellIcon, PreviewIcon, PrintIcon, ProjectIcon, ProvisionIcon, PublishIcon, PullRequestIcon, QRCodeIcon, QueueIcon, QuickActionIcon, QuotaIcon, RedoIcon, RefreshIcon, ReleaseIcon, RemoveIcon, RemoveUserIcon, RenameIcon, RenewIcon, ReportIcon, RepositoryIcon, ResetIcon, ResetLayoutIcon, ResourceGroupIcon, ResourceIcon, RestartIcon, RestoreIcon, RetryIcon, RevokeIcon, RoleIcon, RollbackIcon, RunWorkflowIcon, RunningIcon, RunningRingIcon, RunsIcon, SaveIcon, SchedulerIcon, ScriptIcon, SearchIcon, SendIcon, ServiceIcon, SessionIcon, SettingsIcon, ShareIcon, SharedIcon, ShieldIcon, ShieldOffIcon, ShrinkIcon, SidebarCloseIcon, SidebarIcon, SidebarOpenIcon, SignInIcon, SignOutIcon, SkipIcon, SnapshotIcon, SortDownIcon, SortUnsortedIcon, SortUpIcon, SparklesIcon, SplitIcon, SpreadsheetIcon, StartIcon, StopIcon, StorageIcon, SubdomainIcon, SuccessCheckmark, SuccessFilledIcon, SuccessIcon, SummaryIcon, SunIcon, SupportIcon, SwapIcon, TagIcon, TerminalIcon, ThinkingIcon, TodoIcon, TokenIcon, ToolsIcon, TrashIcon, TunnelIcon, UndoIcon, UnfavoriteIcon, UnlinkIcon, UnmuteIcon, UnsplitIcon, UploadIcon, UserIcon, UserWorkspaceIcon, UsersIcon, VariableIcon, VerifiedIcon, VideoIcon, WarningFilledIcon, WarningIcon, WebhookIcon, WorkerIcon, WorkflowIcon, WorkloadIcon, WorkspaceMountIcon, ZapIcon, ZipIcon, ZoomInIcon, ZoomOutIcon };

package/dist/index.d.ts

@@ -15,7 +15,7 @@ export { ContextMenuProvider, type MenuCloseTrigger, type MenuOpener, type OpenM
 export { CopyButton, type CopyButtonProps, CopyCodeBlock, type CopyCodeBlockProps, } from './components/CopyButton.js';
 export { CreateModal, CreateModalSelect, CreateModalSwitch, } from './components/CreateModal.js';
 export { categoryClasses, categoryOf } from './components/category.js';
-export { type ChartLegendItem, ChartLegendList, ChartTooltipContent, type ChartTooltipItem, SeriesSwatch, type SeriesSwatchShape, seriesColor, seriesColors, seriesOpacity, seriesSlotColor, useSeriesHighlight, } from './components/chart.js';
+export { type ChartLegendItem, ChartLegendList, ChartTooltipBeside, ChartTooltipContent, type ChartTooltipItem, type ChartTooltipPlacement, chartTooltipPlacement, foldSeries, OTHER_SERIES_COLOR, OTHER_SERIES_KEY, SERIES_LIMIT, SeriesSwatch, type SeriesSwatchShape, seriesColors, seriesOpacity, seriesSlotColor, useSeriesHighlight, } from './components/chart.js';
 export { Calendar, type CalendarProps, DatePicker, type DatePickerProps, } from './components/DatePicker.js';
 export { DescriptionListGroup, DescriptionListItem, type DescriptionListItemProps, type DescriptionListProps, type DescriptionListSize, type DescriptionListVariant, default as DescriptionList, } from './components/DescriptionList.js';
 export { collapsePanelClassName, Disclosure, DisclosurePanel, type DisclosureProps, } from './components/Disclosure.js';