@parallelworks/ui 0.77.0 → 0.79.0

package/dist/components/StatusBadge.js

@@ -1,23 +1,99 @@
 import { cx } from "../cx.js";
 import { toneFill, toneSurface, toneText } from "./tone.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useStrings } from "./Provider.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/StatusBadge.tsx
+var emphasisClasses = {
+	soft: {
+		...toneSurface,
+		accent: "bg-(--theme-accent)/10 text-(--theme-link) border-(--theme-accent)/25"
+	},
+	solid: {
+		default: "bg-(--theme-app) text-(--theme-app-bg) border-transparent",
+		success: "bg-(--theme-success-text) text-(--theme-app-bg) border-transparent",
+		warning: "bg-(--theme-warning-text) text-(--theme-app-bg) border-transparent",
+		error: "bg-(--theme-error-text) text-(--theme-app-bg) border-transparent",
+		info: "bg-(--theme-info-text) text-(--theme-app-bg) border-transparent",
+		muted: "bg-(--theme-muted-text-color) text-(--theme-app-bg) border-transparent",
+		accent: "bg-(--theme-accent) text-(--theme-accent-text) border-transparent"
+	},
+	outline: {
+		default: "bg-transparent text-(--theme-app) border-(--theme-border)",
+		success: "bg-transparent text-(--theme-success-text) border-(--theme-success)/40",
+		warning: "bg-transparent text-(--theme-warning-text) border-(--theme-warning)/40",
+		error: "bg-transparent text-(--theme-error-text) border-(--theme-error)/40",
+		info: "bg-transparent text-(--theme-info-text) border-(--theme-info)/40",
+		muted: "bg-transparent text-(--theme-muted-text-color) border-(--theme-border)",
+		accent: "bg-transparent text-(--theme-link) border-(--theme-accent)/40"
+	}
+};
+var dotFill = {
+	...toneFill,
+	accent: "bg-(--theme-accent)"
+};
+var sizeClasses = {
+	sm: "gap-1 py-px text-[10px] leading-3.5",
+	md: "gap-1.5 py-0.5 text-[11px] leading-4"
+};
+var padClasses = {
+	pill: {
+		sm: "px-1.5",
+		md: "px-2"
+	},
+	tag: {
+		sm: "px-1",
+		md: "px-1.5"
+	}
+};
+var shapeClasses = {
+	pill: "rounded-full",
+	tag: "rounded-[4px]"
+};
 /** A line of text in a variant's color, for a status that stands beside a
 *  dot rather than inside a badge. */
 function statusTextClass(variant) {
-	return toneText[variant];
+	return variant === "accent" ? "text-(--theme-link)" : toneText[variant];
 }
-function StatusBadge({ children, variant = "default", pulse = false, dot = false, size = "sm", className }) {
+/** 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 }) {
+	const indicator = emphasis === "solid" ? "bg-current" : dotFill[variant];
+	return useRender({
+		render: render ?? /* @__PURE__ */ jsx("span", {}),
+		props: {
+			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
+			] })
+		}
+	});
+}
+var countSizeClasses = {
+	sm: "min-w-3.5 px-1 text-[10px] leading-3.5",
+	md: "min-w-4 px-1.5 text-[11px] leading-4"
+};
+/** A number beside a link or tab, such as unread messages or items waiting,
+*  capped at `max` so a big count doesn't widen what it sits in. */
+function CountBadge({ count, max = 99, variant = "accent", emphasis = "solid", size = "md", label, showZero = false, locale, className }) {
+	const { common } = useStrings();
+	if (count <= 0 && !showZero) return null;
+	const number = new Intl.NumberFormat(locale);
+	const text = count > max ? common.countOverflow(number.format(max)) : number.format(count);
 	return /* @__PURE__ */ jsxs("span", {
-		className: cx("inline-flex items-center gap-1.5 rounded-full border font-medium", size === "sm" && "px-2 py-0.5 text-[10px]", size === "md" && "px-2.5 py-1 text-xs", toneSurface[variant], className),
-		children: [
-			pulse && /* @__PURE__ */ jsxs("span", {
-				className: "relative flex h-2 w-2",
-				children: [/* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:hidden", toneFill[variant]) }), /* @__PURE__ */ jsx("span", { className: cx("relative inline-flex h-2 w-2 rounded-full", toneFill[variant]) })]
-			}),
-			dot && !pulse && /* @__PURE__ */ jsx("span", { className: cx("inline-flex h-1.5 w-1.5 rounded-full", toneFill[variant]) }),
-			children
-		]
+		"data-count": count,
+		className: cx("inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums", countSizeClasses[size], emphasisClasses[emphasis][variant], className),
+		children: [text, label && /* @__PURE__ */ jsxs("span", {
+			className: "sr-only",
+			children: [" ", label]
+		})]
 	});
 }
 function StatusDot({ variant = "default", pulse = false, size = 8, className }) {
@@ -27,8 +103,8 @@ function StatusDot({ variant = "default", pulse = false, size = 8, className })
 			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", toneFill[variant]) }), /* @__PURE__ */ jsx("span", {
-			className: cx("relative inline-flex rounded-full", toneFill[variant]),
+		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]),
 			style: {
 				width: size,
 				height: size
@@ -37,4 +113,4 @@ function StatusDot({ variant = "default", pulse = false, size = 8, className })
 	});
 }
 //#endregion
-export { StatusBadge, StatusDot, statusTextClass };
+export { CountBadge, StatusBadge, StatusDot, statusTextClass };

package/dist/components/StickyBar.js

@@ -1,7 +1,7 @@
 import { cx } from "../cx.js";
 import { stickyClasses, useStickyTop } from "./stickyTop.js";
-import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/StickyBar.tsx
 /** A strip of a page's own controls, such as a row of filters or a page's
 *  actions, pinned as the page scrolls. It stops just below whatever its

package/dist/components/Table.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 /** Which way a column sorts, as `aria-sort` names it. */
 export type SortDirection = 'ascending' | 'descending' | 'none';
-/** `comfortable` gives each row room; `compact` fits a short key and value list. */
-export type TableDensity = 'comfortable' | 'compact';
+/** `comfortable` gives each row room; `compact` fits a short key and value
+ *  list; `dense` sets small type in tight rows, for a table inside a card or
+ *  a panel of figures. */
+export type TableDensity = 'comfortable' | 'compact' | 'dense';
 interface ItemProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
     /** Lets the text wrap; by default a cell keeps to one line. */
     wrap?: boolean;
@@ -18,13 +20,29 @@ interface HeaderProps {
     sort?: SortDirection | undefined;
     /** Sorts by this column, or flips its direction. */
     onSort?: (() => void) | undefined;
-    /** False sets the title in sentence case instead of small capitals. */
+    /** False sets the title in sentence case instead of small capitals. The
+     *  table's `caps` by default. */
     caps?: boolean | undefined;
 }
 declare function Header({ children, className, style, colSpan, sort, onSort, caps }: HeaderProps): React.JSX.Element;
 interface TableProps {
     children?: React.ReactNode;
     density?: TableDensity | undefined;
+    /** Each column's width, in order, such as `['20%', '8rem', undefined]`; a
+     *  column left undefined takes what the others leave. With
+     *  `table-fixed` in `className`, the widths hold whatever the cells hold. */
+    columns?: readonly (string | undefined)[] | undefined;
+    /** False sets every header in sentence case, as a small table in a card
+     *  reads best; a header's own `caps` still wins. */
+    caps?: boolean | undefined;
+    /** Drops the outer side padding of the first and last columns and the
+     *  header's fill, for a table inside something already padded, such as a
+     *  card: it reads as part of the card, its titles in line with the card's
+     *  other content and set apart by the rule under them. */
+    flush?: boolean | undefined;
+    /** Rules a line between columns as well as rows, for a grid of figures to
+     *  read across and down. */
+    columnDividers?: boolean | undefined;
     borderless?: boolean;
     /** When false, drops the theme-panel background. */
     panel?: boolean;
@@ -56,7 +74,7 @@ interface TableProps {
 }
 /** Rows of values under a row of column titles. Put `Table.Header`s first among
  *  the children, then `<tr>`s of `Table.Item`s. */
-export declare function Table({ density, borderless, panel, className, wrapperClassName, tbodyClassName, theadClassName, children, roundedTop, rounded, roundedBottom, isLoading, stickyHeader, tableProps, }: TableProps): React.JSX.Element;
+export declare function Table({ density, columns, caps, flush, columnDividers, borderless, panel, className, wrapperClassName, tbodyClassName, theadClassName, children, roundedTop, rounded, roundedBottom, isLoading, stickyHeader, tableProps, }: TableProps): React.JSX.Element;
 export declare namespace Table {
     export { Header };
     export { Item };

package/dist/components/Table.js

@@ -2,16 +2,27 @@ import { cx } from "../cx.js";
 import { SortDownIcon, SortUnsortedIcon, SortUpIcon } from "../icons.js";
 import { Loader } from "./Loader.js";
 import { useStickyTop } from "./stickyTop.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import React, { createContext, useContext, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Table.tsx
 var DensityContext = createContext("comfortable");
+var CapsContext = createContext(true);
+var cellY = {
+	comfortable: "py-4",
+	compact: "py-1.5 text-sm",
+	dense: "py-1 text-xs"
+};
+var headerY = {
+	comfortable: "py-3",
+	compact: "py-2",
+	dense: "py-1.5"
+};
 var cellX = "px-3";
 function Item({ wrap = false, children, className, ...tdProps }) {
 	const density = useContext(DensityContext);
 	return /* @__PURE__ */ jsx("td", {
 		...tdProps,
-		className: cx(cellX, density === "compact" ? "py-1.5 text-sm" : "py-4", !wrap && "whitespace-nowrap", className),
+		className: cx(cellX, cellY[density], !wrap && "whitespace-nowrap", className),
 		children
 	});
 }
@@ -20,15 +31,16 @@ var sortIcons = {
 	descending: SortDownIcon,
 	none: SortUnsortedIcon
 };
-function Header({ children, className, style, colSpan, sort, onSort, caps = true }) {
+function Header({ children, className, style, colSpan, sort, onSort, caps }) {
 	const density = useContext(DensityContext);
+	const tableCaps = useContext(CapsContext);
 	const Icon = sortIcons[sort ?? "none"];
 	return /* @__PURE__ */ jsx("th", {
 		scope: "col",
 		colSpan,
 		style,
 		"aria-sort": onSort ? sort ?? "none" : void 0,
-		className: cx(cellX, density === "compact" ? "py-2" : "py-3", "text-left text-xs font-medium", caps && "uppercase tracking-wider", className),
+		className: cx(cellX, headerY[density], "text-left text-xs font-medium", (caps ?? tableCaps) && "uppercase tracking-wider", className),
 		children: onSort ? /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: onSort,
@@ -46,32 +58,42 @@ var isHeaderChild = (child) => {
 };
 /** Rows of values under a row of column titles. Put `Table.Header`s first among
 *  the children, then `<tr>`s of `Table.Item`s. */
-function Table({ density = "comfortable", borderless = false, panel = true, className, wrapperClassName = "", tbodyClassName = "divide-y", theadClassName = "theme-muted-panel", children, roundedTop = false, rounded = false, roundedBottom = false, isLoading = false, stickyHeader = false, tableProps }) {
+function Table({ density = "comfortable", columns, caps = true, flush = false, columnDividers = false, borderless = false, panel = true, className, wrapperClassName = "", tbodyClassName = "divide-y", theadClassName, children, roundedTop = false, rounded = false, roundedBottom = false, isLoading = false, stickyHeader = false, tableProps }) {
 	const childList = React.Children.toArray(children);
 	const [thead, setThead] = useState(null);
 	useStickyTop(thead, stickyHeader && !isLoading);
 	const hasOverflow = wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-"));
 	return /* @__PURE__ */ jsx(DensityContext, {
 		value: density,
-		children: /* @__PURE__ */ jsx("div", {
-			"aria-busy": isLoading,
-			className: cx("flex w-full flex-col", !hasOverflow && !stickyHeader && "overflow-hidden", wrapperClassName),
-			children: isLoading ? /* @__PURE__ */ jsx("div", {
-				className: "flex h-32 items-center justify-center",
-				children: /* @__PURE__ */ jsx(Loader, {})
-			}) : /* @__PURE__ */ jsx("div", {
-				className: cx("inline-block min-w-full align-middle", !stickyHeader && "overflow-x-auto", panel && "theme-panel", !borderless && "border theme-border", rounded && "rounded-xl", roundedBottom && "rounded-b-xl", roundedTop && "rounded-t-xl"),
-				children: /* @__PURE__ */ jsxs("table", {
-					className: cx("min-w-full divide-y theme-border", className),
-					...tableProps,
-					children: [/* @__PURE__ */ jsx("thead", {
-						ref: setThead,
-						className: cx(stickyHeader && "sticky top-0 z-(--layer-sticky) border-b-0 shadow-[inset_0_-1px_0_var(--theme-border)]", theadClassName),
-						children: /* @__PURE__ */ jsx("tr", { children: childList.filter(isHeaderChild) })
-					}), /* @__PURE__ */ jsx("tbody", {
-						className: tbodyClassName,
-						children: childList.filter((c) => !isHeaderChild(c))
-					})]
+		children: /* @__PURE__ */ jsx(CapsContext, {
+			value: caps,
+			children: /* @__PURE__ */ jsx("div", {
+				"aria-busy": isLoading,
+				className: cx("flex w-full flex-col", !hasOverflow && !stickyHeader && "overflow-hidden", wrapperClassName),
+				children: isLoading ? /* @__PURE__ */ jsx("div", {
+					className: "flex h-32 items-center justify-center",
+					children: /* @__PURE__ */ jsx(Loader, {})
+				}) : /* @__PURE__ */ jsx("div", {
+					className: cx("inline-block min-w-full align-middle", !stickyHeader && "overflow-x-auto", panel && "theme-panel", !borderless && "border theme-border", rounded && "rounded-xl", roundedBottom && "rounded-b-xl", roundedTop && "rounded-t-xl"),
+					children: /* @__PURE__ */ jsxs("table", {
+						className: cx("min-w-full divide-y theme-border", flush && "[&_td:first-child]:pl-0 [&_th:first-child]:pl-0 [&_td:last-child]:pr-0 [&_th:last-child]:pr-0", columnDividers && "[&_tr]:divide-x [&_tr]:divide-(--theme-border)", className),
+						...tableProps,
+						children: [
+							columns && /* @__PURE__ */ jsx("colgroup", {
+								className: "border-0",
+								children: columns.map((width, i) => /* @__PURE__ */ jsx("col", { style: width ? { width } : void 0 }, i))
+							}),
+							/* @__PURE__ */ jsx("thead", {
+								ref: setThead,
+								className: cx(stickyHeader && "sticky top-0 z-(--layer-sticky) border-b-0 shadow-[inset_0_-1px_0_var(--theme-border)]", theadClassName ?? (flush ? "text-(--theme-muted-text-color)" : "theme-muted-panel")),
+								children: /* @__PURE__ */ jsx("tr", { children: childList.filter(isHeaderChild) })
+							}),
+							/* @__PURE__ */ jsx("tbody", {
+								className: tbodyClassName,
+								children: childList.filter((c) => !isHeaderChild(c))
+							})
+						]
+					})
 				})
 			})
 		})

package/dist/components/Tabs.d.ts

@@ -1,11 +1,16 @@
 import { type ReactNode } from 'react';
-import { type SegmentLayout } from './segmented.js';
+import { type SegmentLayout, type SegmentTone } from './segmented.js';
 export interface TabItem<Value extends string = string> {
     value: Value;
     label: string;
     icon?: ReactNode;
     /** Beside the label, or in the corner when only the icon shows. */
     badge?: ReactNode;
+    /** How many things the view holds, as a pill after the label. */
+    count?: number | undefined;
+    /** Colors the label and the count, for a view that needs attention, such
+     *  as what failed or what has been left behind. */
+    tone?: SegmentTone | undefined;
     /** Navigates instead of showing a panel, for tabs that are pages. */
     href?: string;
     disabled?: boolean;
@@ -20,8 +25,8 @@ export interface TabsProps<Value extends string> extends SegmentLayout {
     defaultValue?: Value | undefined;
     onValueChange?: ((value: Value) => void) | undefined;
     /** `line` underlines the current tab across a page; `segmented` matches a
-     *  SegmentedControl, for a few views in a small space. `fill` and `iconOnly`
-     *  apply to `segmented`. */
+     *  SegmentedControl, for a few views in a small space. `fill`, `iconOnly`
+     *  and `size` apply to `segmented`. */
     variant?: 'line' | 'segmented' | undefined;
     /** At the tab row's far end, such as a picker for what the tabs show. */
     end?: ReactNode;
@@ -37,7 +42,7 @@ export interface TabsProps<Value extends string> extends SegmentLayout {
 /** Views of one thing, one shown at a time: panels below the tabs, or pages
  *  the tabs link to. A lone tab would only repeat the page's title, so the row
  *  hides unless there are two or more, or something at its end. */
-export declare function Tabs<Value extends string>({ label, items, value, defaultValue, onValueChange, variant, fill, iconOnly, end, sticky, className, testId, children, }: TabsProps<Value>): import("react").JSX.Element;
+export declare function Tabs<Value extends string>({ label, items, value, defaultValue, onValueChange, variant, fill, iconOnly, size, end, sticky, className, testId, children, }: TabsProps<Value>): import("react").JSX.Element;
 /** One tab's content, shown while its tab is current. */
 export declare function TabPanel({ value, keepMounted, className, children, }: {
     value: string;

package/dist/components/Tabs.js

@@ -3,18 +3,23 @@ import { Tooltip } from "./Tooltip.js";
 import { AppLink } from "./AppLink.js";
 import { SegmentContent, segmentClassName, segmentGroupClassName } from "./segmented.js";
 import { useStickyTop } from "./stickyTop.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/Tabs.tsx
+var lineTone = {
+	warning: "text-(--theme-warning)",
+	danger: "text-(--theme-error-text)"
+};
 /** Views of one thing, one shown at a time: panels below the tabs, or pages
 *  the tabs link to. A lone tab would only repeat the page's title, so the row
 *  hides unless there are two or more, or something at its end. */
-function Tabs$1({ label, items, value, defaultValue, onValueChange, variant = "line", fill = false, iconOnly = false, end, sticky, className, testId, children }) {
+function Tabs$1({ label, items, value, defaultValue, onValueChange, variant = "line", fill = false, iconOnly = false, size = "md", end, sticky, className, testId, children }) {
 	const segmented = variant === "segmented";
 	const layout = {
 		fill,
-		iconOnly: segmented && iconOnly
+		iconOnly: segmented && iconOnly,
+		size
 	};
 	const [own, setOwn] = useState(defaultValue ?? items[0]?.value);
 	const current = value ?? own;
@@ -30,7 +35,7 @@ function Tabs$1({ label, items, value, defaultValue, onValueChange, variant = "l
 				nativeButton: false,
 				render: /* @__PURE__ */ jsx(AppLink, { href: item.href })
 			} : {},
-			className: segmented ? segmentClassName(item.value === current, layout) : "flex cursor-pointer select-none items-center gap-1.5 whitespace-nowrap px-2 py-2 text-sm font-semibold theme-muted-text transition-colors hover:theme-text focus-visible:rounded-sm focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--theme-focus) data-active:text-(--theme-link) data-disabled:cursor-not-allowed data-disabled:opacity-50",
+			className: segmented ? segmentClassName(item.value === current, layout, item.tone) : cx("flex cursor-pointer select-none items-center gap-1.5 whitespace-nowrap px-2 py-2 text-sm font-semibold transition-colors focus-visible:rounded-sm focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--theme-focus) data-disabled:cursor-not-allowed data-disabled:opacity-50", item.tone ? lineTone[item.tone] : "theme-muted-text hover:theme-text data-active:text-(--theme-link)"),
 			children: /* @__PURE__ */ jsx(SegmentContent, {
 				...item,
 				iconOnly: layout.iconOnly

package/dist/components/Tag.d.ts

@@ -0,0 +1,49 @@
+import { type ReactNode } from 'react';
+export interface TagStyle {
+    /** Monospace text, for a value read as code, such as a key=value label. */
+    mono?: boolean | undefined;
+    /** Small capitals with wider spacing, for a short code such as a region. */
+    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. */
+export declare function tagClasses({ mono, caps }?: TagStyle): string;
+export interface TagProps extends TagStyle {
+    children: ReactNode;
+    /** A dot before the text in this color, any CSS color, such as a label's own. */
+    color?: string | undefined;
+    /** Makes the tag a link, through the host's router. */
+    href?: string | undefined;
+    /** Adds an × that removes the tag, named by `removeLabel` ("Remove gpu" by default). */
+    onRemove?: (() => void) | undefined;
+    removeLabel?: string | undefined;
+    /** A hint on hover, such as the full text of a long tag. */
+    title?: string | undefined;
+    className?: string | undefined;
+}
+/** A tag or label on a thing: a pill with an optional color dot, a link with `href`, and an ×
+ *  with `onRemove`. */
+export declare function Tag({ children, color, href, onRemove, removeLabel, title, mono, caps, className, }: TagProps): import("react").JSX.Element;
+/** One tag of a `TagList`: a string is its own key and label. */
+export type TagItem = string | {
+    key: string;
+    label: ReactNode;
+    color?: string | undefined;
+    href?: string | undefined;
+};
+export interface TagListProps extends TagStyle {
+    tags: readonly TagItem[];
+    /** `wrap`, the default, runs onto more lines; `clip` keeps one line and ends with a "+N"
+     *  chip for the tags that don't fit, which lists them on hover or focus. */
+    overflow?: 'wrap' | 'clip' | undefined;
+    /** Shows at most this many, the rest in the "+N" chip. */
+    max?: number | undefined;
+    /** Adds an × to each tag; called with the tag's key. */
+    onRemove?: ((key: string) => void) | undefined;
+    className?: string | undefined;
+}
+/** A thing's tags as a list: wrapped, or on one line ending in "+N" for the rest. */
+export declare function TagList({ tags, overflow, max, mono, caps, onRemove, className, }: TagListProps): import("react").JSX.Element;
+/** Tags as the strings they hold, from an array or a comma-separated string: trimmed, empty
+ *  ones dropped, each once. Anything else is no tags. */
+export declare function normalizeTags(tags: unknown): string[];

package/dist/components/Tag.js

@@ -0,0 +1,199 @@
+import { cx } from "../cx.js";
+import { RemoveIcon } from "../icons.js";
+import { useLocale, useStrings } from "./Provider.js";
+import { AppLink } from "./AppLink.js";
+import { Popover } from "./Popover.js";
+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. */
+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");
+}
+/** A tag or label on a thing: a pill with an optional color dot, a link with `href`, and an ×
+*  with `onRemove`. */
+function Tag({ children, color, href, onRemove, removeLabel, title, mono, caps, className }) {
+	const { dropdown } = useStrings();
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [color && /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "size-2 shrink-0 rounded-full",
+		style: { background: color }
+	}), /* @__PURE__ */ jsx("span", {
+		className: "min-w-0 truncate py-px",
+		children
+	})] });
+	const classes = cx(tagClasses({
+		mono,
+		caps
+	}), className);
+	const hover = "transition-colors hover:bg-(--theme-hover)";
+	if (!onRemove) return href ? /* @__PURE__ */ jsx(AppLink, {
+		href,
+		title,
+		className: cx(classes, hover, "no-underline"),
+		children: content
+	}) : /* @__PURE__ */ jsx("span", {
+		title,
+		className: classes,
+		children: content
+	});
+	const name = removeLabel ?? dropdown.removeValue(typeof children === "string" ? children : "");
+	return /* @__PURE__ */ jsxs("span", {
+		title,
+		className: cx(classes, "pr-0.5"),
+		children: [href ? /* @__PURE__ */ jsx(AppLink, {
+			href,
+			className: "inline-flex min-w-0 items-center gap-1 text-inherit no-underline hover:underline",
+			children: content
+		}) : content, /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onRemove,
+			"aria-label": name.trim(),
+			className: "flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-(--theme-muted-text-color) hover:bg-(--theme-hover) hover:text-(--theme-app) focus-visible:outline-2 focus-visible:outline-(--theme-focus)",
+			children: /* @__PURE__ */ jsx(RemoveIcon, {
+				"aria-hidden": "true",
+				className: "size-2.5"
+			})
+		})]
+	});
+}
+var normal = (tag) => typeof tag === "string" ? {
+	key: tag,
+	label: tag
+} : tag;
+var text = (tag) => typeof tag.label === "string" ? tag.label : tag.key;
+/** A thing's tags as a list: wrapped, or on one line ending in "+N" for the rest. */
+function TagList({ tags, overflow = "wrap", max, mono, caps, onRemove, className }) {
+	const items = tags.map(normal);
+	const clip = overflow === "clip";
+	const capped = max === void 0 ? items.length : Math.max(0, Math.min(max, items.length));
+	const [fit, setFit] = useState(capped);
+	const list = useRef(null);
+	const measure = useRef(null);
+	const signature = items.map((item) => item.key).join("\n");
+	useLayoutEffect(() => {
+		const row = list.current;
+		const copy = measure.current;
+		if (!clip || !row || !copy) return;
+		const place = () => {
+			const width = row.clientWidth;
+			const chips = [...copy.children];
+			const more = chips.pop();
+			const gap = 4;
+			const widths = chips.slice(0, capped).map((chip) => chip.offsetWidth);
+			const total = widths.reduce((sum, w, i) => sum + w + (i ? gap : 0), 0);
+			if (capped === items.length && total <= width) {
+				setFit(capped);
+				return;
+			}
+			const room = width - (more?.offsetWidth ?? 0) - gap;
+			let used = 0;
+			let count = 0;
+			for (const w of widths) {
+				const next = used + (count ? gap : 0) + w;
+				if (next > room) break;
+				used = next;
+				count++;
+			}
+			setFit(count);
+		};
+		place();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(place);
+		observer.observe(row);
+		return () => observer.disconnect();
+	}, [
+		clip,
+		capped,
+		signature,
+		items.length
+	]);
+	const shown = items.slice(0, clip ? fit : capped);
+	const hidden = items.slice(shown.length);
+	const style = {
+		mono,
+		caps
+	};
+	const tag = (item) => /* @__PURE__ */ jsx(Tag, {
+		...style,
+		color: item.color,
+		href: item.href,
+		onRemove: onRemove ? () => onRemove(item.key) : void 0,
+		children: item.label
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("relative min-w-0", clip && "overflow-hidden", className),
+		children: [/* @__PURE__ */ jsxs("ul", {
+			ref: list,
+			className: cx("m-0 flex min-w-0 list-none items-center gap-1 p-0", !clip && "flex-wrap"),
+			children: [shown.map((item) => /* @__PURE__ */ jsx("li", {
+				className: "flex min-w-0",
+				children: tag(item)
+			}, item.key)), hidden.length > 0 && /* @__PURE__ */ jsx("li", {
+				className: "flex shrink-0",
+				children: /* @__PURE__ */ jsx(MoreTags, {
+					tags: hidden,
+					...style
+				})
+			})]
+		}), clip && /* @__PURE__ */ jsxs("div", {
+			ref: measure,
+			"aria-hidden": "true",
+			inert: true,
+			className: "pointer-events-none invisible absolute top-0 left-0 flex h-0 items-center gap-1 overflow-hidden",
+			children: [items.slice(0, capped).map((item) => /* @__PURE__ */ jsx("span", {
+				className: "flex shrink-0",
+				children: tag(item)
+			}, item.key)), /* @__PURE__ */ jsxs("span", {
+				className: tagClasses(style),
+				children: ["+", items.length]
+			})]
+		})]
+	});
+}
+/** "+N" for the tags a list leaves out: a button that shows them in a popover, which also
+*  opens while the pointer rests on it, and whose name lists them. */
+function MoreTags({ tags, ...style }) {
+	const { common } = useStrings();
+	const locale = useLocale();
+	const names = tags.map(text);
+	const count = new Intl.NumberFormat(locale).format(tags.length);
+	return /* @__PURE__ */ jsx(Popover, {
+		openOnHover: true,
+		initialFocus: "popup",
+		"aria-label": common.moreCount(tags.length),
+		className: "max-w-64 p-2",
+		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)"),
+			children: ["+", count]
+		}),
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "m-0 flex list-none flex-wrap gap-1 p-0",
+			children: tags.map((tag) => /* @__PURE__ */ jsx("li", {
+				className: "flex min-w-0",
+				children: /* @__PURE__ */ jsx(Tag, {
+					...style,
+					color: tag.color,
+					href: tag.href,
+					children: tag.label
+				})
+			}, tag.key))
+		})
+	});
+}
+/** Tags as the strings they hold, from an array or a comma-separated string: trimmed, empty
+*  ones dropped, each once. Anything else is no tags. */
+function normalizeTags(tags) {
+	const list = Array.isArray(tags) ? tags : typeof tags === "string" ? tags.split(",") : [];
+	const seen = /* @__PURE__ */ new Set();
+	for (const tag of list) if (typeof tag === "string" || typeof tag === "number") {
+		const value = String(tag).trim();
+		if (value) seen.add(value);
+	}
+	return [...seen];
+}
+//#endregion
+export { Tag, TagList, normalizeTags, tagClasses };

package/dist/components/ThemeEditor.js

@@ -17,8 +17,8 @@ import { Switch } from "./Switch.js";
 import { Select } from "./Select.js";
 import { SegmentedControl } from "./SegmentedControl.js";
 import { Slider } from "./Slider.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ThemeEditor.tsx
 /**
 * Edits a theme: a background, an accent and a contrast for light and for

package/dist/components/Toast.js

@@ -5,8 +5,8 @@ import { Loader } from "./Loader.js";
 import { toneIcon } from "./tone.js";
 import { useStrings } from "./Provider.js";
 import { AppLink } from "./AppLink.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Toast } from "@base-ui/react/toast";
 //#region src/components/Toast.tsx
 function actionFields(action) {