@parallelworks/ui 0.84.2 → 0.85.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/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/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;