@parallelworks/ui 0.88.2 → 0.90.0

package/dist/ai/components/AllocationSelector.js

@@ -1,5 +1,5 @@
 import { ChevronDownIcon } from "../../icons.js";
-import { Select } from "../../components/Select.js";
+import { Combobox } from "../../components/Combobox.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import { chipClassName } from "../ui/chip.js";
@@ -42,8 +42,9 @@ function AllocationSelector({ model, allocation } = {}) {
 	const selected = allocations.find((a) => a.name === selectedAllocation);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex min-w-0 shrink-[3] items-center gap-2",
-		children: [/* @__PURE__ */ jsx(Select, {
+		children: [/* @__PURE__ */ jsx(Combobox, {
 			"aria-label": t.choose,
+			placeholder: t.search,
 			items: allocations.map((a) => ({
 				value: a.name,
 				label: a.name,

package/dist/ai/strings.d.ts

@@ -75,6 +75,7 @@ export interface ChatStrings {
     allocationPicker: {
         choose: string;
         placeholder: string;
+        search: string;
         usage: (used: string, total: string) => string;
     };
     queue: {

package/dist/ai/strings.js

@@ -71,6 +71,7 @@ var defaultChatStrings = {
 	allocationPicker: {
 		choose: "Allocation",
 		placeholder: "Select allocation",
+		search: "Search allocations…",
 		usage: (used, total) => `${used} / ${total}`
 	},
 	activity: {

package/dist/components/Provider.d.ts

@@ -585,6 +585,19 @@ export interface UIStrings {
         backspace: string;
         delete: string;
     };
+    /** A run's status in words, beside its icon: one ended in an error or a fault reads as
+     *  failed, and one skipped after a failure as skipped. */
+    runStatus: {
+        queued: string;
+        running: string;
+        canceling: string;
+        completed: string;
+        warning: string;
+        failed: string;
+        canceled: string;
+        skipped: string;
+        notRun: string;
+    };
     chart: {
         /** The row under a chart's tooltip that sums its series. */
         total: string;
@@ -676,8 +689,11 @@ export interface UIStrings {
         changeValue: (values: string) => string;
         /** Joins the values a chip lists. */
         list: (values: string[]) => string;
-        /** A relative date preset: `today`, `-7d`, `-30d`, `-90d` or `month`; any `-Nd`. */
+        /** A relative date preset: `today`, `month` (so far), `year` (so far), `all` (every date),
+         *  any `-Nd` (the last N days) or any `-Nh` (the last N hours). */
         datePreset: (preset: string) => string;
+        /** At phone width, the toggle that shows a quick filter's other options: "+3 more". */
+        quickMore: (count: number) => string;
         /** The date picker's entry that picks days on a calendar. */
         customDate: string;
         /** Two days a filter spans. */

package/dist/components/Provider.js

@@ -580,6 +580,17 @@ var DEFAULTS = {
 			backspace: "Backspace",
 			delete: "Delete"
 		},
+		runStatus: {
+			queued: "Queued",
+			running: "Running",
+			canceling: "Canceling",
+			completed: "Completed",
+			warning: "Warning",
+			failed: "Failed",
+			canceled: "Canceled",
+			skipped: "Skipped",
+			notRun: "Not run"
+		},
 		chart: {
 			total: "Total",
 			other: "Other"
@@ -647,9 +658,17 @@ var DEFAULTS = {
 			changeValue: (values) => `Value: ${values}`,
 			list: (values) => values.join(", "),
 			datePreset: (preset) => {
+				const named = {
+					today: "Today",
+					month: "This month",
+					year: "This year",
+					all: "All time"
+				};
 				const days = preset.match(/^-(\d+)d$/)?.[1];
-				return preset === "today" ? "Today" : preset === "month" ? "This month" : days ? `Last ${days} days` : preset;
+				const hours = preset.match(/^-(\d+)h$/)?.[1];
+				return named[preset] ?? (days ? `Last ${days} days` : hours ? `Last ${hours} hours` : preset);
 			},
+			quickMore: (count) => `+${count} more`,
 			customDate: "Custom…",
 			between: (from, to) => `${from} – ${to}`,
 			formatDate: (date, locale) => dayFormat(locale)[date.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear() ? "short" : "medium"].format(date),

package/dist/components/RunStatusIcon.d.ts

@@ -4,8 +4,8 @@ import { type Tone } from './tone.js';
 /** A status the icon shows: a run's, or one a host maps onto it, such as
  *  `pending` for something queued and `warning` for something done with problems. */
 export type RunStatusIconStatus = RunStatus | 'pending' | 'warning';
-/** The tone a run status reads in, so a badge that says the status in words matches the
- *  icon: `<StatusBadge variant={runStatusTone(status)}>`. */
+/** The tone a run status reads in, so a host's own mark for it, such as a lamp, matches the
+ *  icon: `<StatusLabel variant={runStatusTone(status)}>`. */
 export declare function runStatusTone(status: RunStatusIconStatus): Tone;
 /** Any other span attribute and the ref reach the icon's element, so it can be a Tooltip's or a
  *  popover's direct child. */
@@ -19,6 +19,6 @@ export interface RunStatusIconProps extends Omit<ComponentPropsWithRef<'span'>,
     className?: string | undefined;
 }
 /** A run's, job's or step's status as an icon in its tone, beside the name of what ran. It
- *  is named by `label`, or else `strings.dag.statusLabel`. To say the status in words, use
- *  `StatusBadge` with `runStatusTone`. */
+ *  is named by `label`, or else `strings.dag.statusLabel`. To say the status in words beside it,
+ *  use `RunStatusLabel`. */
 export declare function RunStatusIcon({ status, label: ownLabel, tooltip, className, ...rest }: RunStatusIconProps): import("react").JSX.Element;

package/dist/components/RunStatusIcon.js

@@ -60,14 +60,14 @@ var looks = {
 		faint: true
 	}
 };
-/** The tone a run status reads in, so a badge that says the status in words matches the
-*  icon: `<StatusBadge variant={runStatusTone(status)}>`. */
+/** The tone a run status reads in, so a host's own mark for it, such as a lamp, matches the
+*  icon: `<StatusLabel variant={runStatusTone(status)}>`. */
 function runStatusTone(status) {
 	return looks[status ?? ""].tone;
 }
 /** A run's, job's or step's status as an icon in its tone, beside the name of what ran. It
-*  is named by `label`, or else `strings.dag.statusLabel`. To say the status in words, use
-*  `StatusBadge` with `runStatusTone`. */
+*  is named by `label`, or else `strings.dag.statusLabel`. To say the status in words beside it,
+*  use `RunStatusLabel`. */
 function RunStatusIcon({ status, label: ownLabel, tooltip = false, className, ...rest }) {
 	const { dag } = useStrings();
 	const look = looks[status ?? ""];

package/dist/components/StatusBadge.d.ts

@@ -6,11 +6,9 @@ export type BadgeVariant = Tone | 'accent';
 /** How loud a badge is: `soft` tints it, `solid` fills it for the one thing that
  *  must catch the eye, and `outline` leaves only its edge and text. */
 export type BadgeEmphasis = 'soft' | 'solid' | 'outline';
-/** A badge's outline: a `pill`, or a squarer `tag` for a label such as "Beta". */
-export type BadgeShape = 'pill' | 'tag';
 declare const sizeClasses: {
-    readonly sm: 'gap-1 py-px text-[10px] leading-3.5';
-    readonly md: 'gap-1.5 py-0.5 text-[11px] leading-4';
+    readonly sm: 'gap-1 px-1.5 py-px text-[10px] leading-3.5';
+    readonly md: 'gap-1.5 px-2 py-0.5 text-[11px] leading-4';
 };
 export type BadgeSize = keyof typeof sizeClasses;
 /** Any other span attribute and the ref reach its element, so it can be a Tooltip's or a popover's
@@ -22,8 +20,6 @@ export interface StatusBadgeProps extends Omit<ComponentPropsWithRef<'span'>, 'c
     variant?: BadgeVariant | undefined;
     /** `soft` (the default) tints it; `solid` fills it; `outline` draws only its edge. */
     emphasis?: BadgeEmphasis | undefined;
-    /** `pill` (the default), or `tag` for a squarer label such as "Preview". */
-    shape?: BadgeShape | undefined;
     /** Uppercase, tracked letters, for a short label such as "Beta". */
     caps?: boolean | undefined;
     /** Cuts a long label off with an ellipsis instead of growing past its cell. */
@@ -44,8 +40,16 @@ export interface StatusBadgeProps extends Omit<ComponentPropsWithRef<'span'>, 'c
 /** A line of text in a variant's color, for a status that stands beside a
  *  dot rather than inside a badge. */
 export declare function statusTextClass(variant: BadgeVariant): string;
-/** A short status or label in a tone, such as "Running" or "Preview". */
-export declare function StatusBadge({ children, variant, emphasis, shape, caps, truncate, pulse, dot, off, size, render, className, ref, ...rest }: StatusBadgeProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** A flag: what's notable about this one. A small soft pill right after a name, for a fixed
+ *  fact worth noticing, such as Inline, New, Your version, Preview, Ends soon or Read only: short
+ *  and rare, at most one or two on a row. It's neutral by default (`muted`, such as Inline, Your
+ *  version or Read only), `accent` for something new to you (New, Preview, Beta), `warning` when
+ *  it warns (Ends soon), and never `success` or `error`, which are statuses.
+ *
+ *  Not for a state, which changes over time: that is a status (`StatusLabel`, or
+ *  `RunStatusLabel` for a run), never a tinted pill. Not for a label someone gave it: that is a
+ *  `Tag`. See "UI/Badges/Which one". */
+export declare function StatusBadge({ children, variant, emphasis, caps, truncate, pulse, dot, off, size, render, className, ref, ...rest }: StatusBadgeProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /** Any other span attribute and the ref reach its element, so it can be a Tooltip's or a popover's
  *  direct child. */
 export interface CountBadgeProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'className'> {

package/dist/components/StatusBadge.js

@@ -32,35 +32,29 @@ var emphasisClasses = {
 var LAMP = "bg-[linear-gradient(var(--lamp-from),var(--lamp-to))] shadow-[0_0_3px_rgb(0_0_0/0.5)]";
 var LAMP_OFF = "shadow-[inset_0_0_0_1.5px_var(--theme-border-strong)]";
 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]"
+	sm: "gap-1 px-1.5 py-px text-[10px] leading-3.5",
+	md: "gap-1.5 px-2 py-0.5 text-[11px] leading-4"
 };
 /** 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 variant === "accent" ? "text-(--theme-link)" : toneText[variant];
 }
-/** A short status or label in a tone, such as "Running" or "Preview". */
-function StatusBadge({ children, variant = "default", emphasis = "soft", shape = "pill", caps = false, truncate = false, pulse = false, dot = false, off = false, size = "sm", render, className, ref, ...rest }) {
+/** A flag: what's notable about this one. A small soft pill right after a name, for a fixed
+*  fact worth noticing, such as Inline, New, Your version, Preview, Ends soon or Read only: short
+*  and rare, at most one or two on a row. It's neutral by default (`muted`, such as Inline, Your
+*  version or Read only), `accent` for something new to you (New, Preview, Beta), `warning` when
+*  it warns (Ends soon), and never `success` or `error`, which are statuses.
+*
+*  Not for a state, which changes over time: that is a status (`StatusLabel`, or
+*  `RunStatusLabel` for a run), never a tinted pill. Not for a label someone gave it: that is a
+*  `Tag`. See "UI/Badges/Which one". */
+function StatusBadge({ children, variant = "default", emphasis = "soft", caps = false, truncate = false, pulse = false, dot = false, off = false, size = "sm", render, className, ref, ...rest }) {
 	return useRender({
 		render: render ?? /* @__PURE__ */ jsx("span", {}),
 		ref,
 		props: mergeProps(rest, {
-			className: cx("inline-flex items-center border font-medium no-underline", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)", sizeClasses[size], padClasses[shape][size], shapeClasses[shape], caps && "uppercase tracking-wider", truncate && "min-w-0 max-w-full", emphasisClasses[emphasis][variant], className),
+			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], "rounded-full", caps && "uppercase tracking-wider", truncate && "min-w-0 max-w-full", emphasisClasses[emphasis][variant], className),
 			children: /* @__PURE__ */ jsxs(Fragment, { children: [(pulse || dot) && /* @__PURE__ */ jsx(StatusDot, {
 				variant,
 				pulse,

package/dist/components/StatusLabel.d.ts

@@ -0,0 +1,44 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { type RunStatusIconStatus } from './RunStatusIcon.js';
+import { type BadgeVariant } from './StatusBadge.js';
+/** Any other span attribute and the ref reach its element, so it can be a Tooltip's or a popover's
+ *  direct child. */
+export interface StatusLabelProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'className'> {
+    /** The state's name, such as "Running". */
+    children: ReactNode;
+    /** The lamp's tone, lit; `off` shows it unlit. Ignored with `icon`. */
+    variant?: BadgeVariant | undefined;
+    /** An unlit lamp, a hollow ring, for something off or not known, such as an offline agent. */
+    off?: boolean | undefined;
+    /** A ping from the lamp, for something under way. */
+    pulse?: boolean | undefined;
+    /** An icon in place of the lamp, such as a `RunStatusIcon`. */
+    icon?: ReactNode | undefined;
+    className?: string | undefined;
+}
+/** A status: what state something is in, as a lamp or icon and the state's name, in muted text
+ *  with no fill. It sits in a status column or under a title, and looks the same for a run, a
+ *  resource or an agent. The name says the status, so the lamp or icon is hidden from assistive
+ *  technology and the status is not read twice. A long name truncates.
+ *
+ *  Not for a fixed fact worth noticing, such as "Preview" (a flag: `StatusBadge`), or a label
+ *  someone gave it (a `Tag`). See "UI/Badges/Which one". */
+export declare function StatusLabel({ children, variant, off, pulse, icon, className, ...rest }: StatusLabelProps): import("react").JSX.Element;
+/** A run's status in the run status icon's look: a status the server sent, or none for one it
+ *  has no look for. */
+export declare function runStatusLook(status: string | null | undefined): RunStatusIconStatus;
+/** Names a run's status in words, from `strings.runStatus`: every status the run status icon
+ *  draws has a name, an error, a fault or a failure reads as failed, and no status reads as not
+ *  run. Only a status the icon doesn't know reads as `fallback` says, or as the server sent it. */
+export declare function useRunStatusName(): (status: string | null | undefined, fallback?: (status: string | null | undefined) => string) => string;
+/** Any other span attribute and the ref reach its element, so it can be a Tooltip's or a popover's
+ *  direct child. */
+export interface RunStatusLabelProps extends Omit<StatusLabelProps, 'children' | 'variant' | 'off' | 'pulse' | 'icon'> {
+    /** The run's status as the server sent it; one with no look shows no icon's shape. */
+    status: string | null | undefined;
+    /** The name for a status the run status icon doesn't know; the status as sent by default. */
+    fallback?: ((status: string | null | undefined) => string) | undefined;
+}
+/** A run's status: the run status icon and its name, as a status (`StatusLabel`). A running or
+ *  canceling run's icon moves. See "UI/Badges/Which one". */
+export declare function RunStatusLabel({ status, fallback, ...rest }: RunStatusLabelProps): import("react").JSX.Element;

package/dist/components/StatusLabel.js

@@ -0,0 +1,92 @@
+import { cx } from "../cx.js";
+import { useStrings } from "./Provider.js";
+import { RunStatusIcon } from "./RunStatusIcon.js";
+import { StatusDot } from "./StatusBadge.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/StatusLabel.tsx
+/** A status: what state something is in, as a lamp or icon and the state's name, in muted text
+*  with no fill. It sits in a status column or under a title, and looks the same for a run, a
+*  resource or an agent. The name says the status, so the lamp or icon is hidden from assistive
+*  technology and the status is not read twice. A long name truncates.
+*
+*  Not for a fixed fact worth noticing, such as "Preview" (a flag: `StatusBadge`), or a label
+*  someone gave it (a `Tag`). See "UI/Badges/Which one". */
+function StatusLabel({ children, variant = "default", off = false, pulse = false, icon, className, ...rest }) {
+	return /* @__PURE__ */ jsxs("span", {
+		...rest,
+		className: cx("inline-flex min-w-0 items-center gap-1.5 text-(--theme-muted-text-color)", className),
+		children: [icon != null ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "inline-flex shrink-0 items-center",
+			children: icon
+		}) : /* @__PURE__ */ jsx(StatusDot, {
+			variant,
+			off,
+			pulse,
+			className: "shrink-0"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 truncate",
+			children
+		})]
+	});
+}
+var RUN_LOOKS = /* @__PURE__ */ new Set([
+	"pending",
+	"started",
+	"running",
+	"completed",
+	"warning",
+	"failed",
+	"error",
+	"skipped",
+	"skipped-failed",
+	"canceled",
+	"faulted",
+	"canceling"
+]);
+/** A run's status in the run status icon's look: a status the server sent, or none for one it
+*  has no look for. */
+function runStatusLook(status) {
+	return status && RUN_LOOKS.has(status) ? status : "";
+}
+/** Names a run's status in words, from `strings.runStatus`: every status the run status icon
+*  draws has a name, an error, a fault or a failure reads as failed, and no status reads as not
+*  run. Only a status the icon doesn't know reads as `fallback` says, or as the server sent it. */
+function useRunStatusName() {
+	const { runStatus: t } = useStrings();
+	return (status, fallback) => {
+		switch (status) {
+			case void 0:
+			case null:
+			case "": return t.notRun;
+			case "pending": return t.queued;
+			case "started":
+			case "running": return t.running;
+			case "canceling": return t.canceling;
+			case "completed": return t.completed;
+			case "error":
+			case "faulted":
+			case "failed": return t.failed;
+			case "canceled": return t.canceled;
+			case "warning": return t.warning;
+			case "skipped":
+			case "skipped-failed": return t.skipped;
+			default: return fallback ? fallback(status) : status;
+		}
+	};
+}
+/** A run's status: the run status icon and its name, as a status (`StatusLabel`). A running or
+*  canceling run's icon moves. See "UI/Badges/Which one". */
+function RunStatusLabel({ status, fallback, ...rest }) {
+	const name = useRunStatusName();
+	return /* @__PURE__ */ jsx(StatusLabel, {
+		...rest,
+		icon: /* @__PURE__ */ jsx(RunStatusIcon, {
+			status: runStatusLook(status),
+			label: ""
+		}),
+		children: name(status, fallback)
+	});
+}
+//#endregion
+export { RunStatusLabel, StatusLabel, runStatusLook, useRunStatusName };

package/dist/components/Tag.d.ts

@@ -24,8 +24,13 @@ export interface TagProps extends TagStyle, Omit<ComponentPropsWithRef<'span'>,
     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`. */
+/** A tag: what someone has labelled a thing. A neutral hairline pill with an optional color
+ *  dot; people add, remove and filter by tags, so it can be a link with `href` and have an ×
+ *  with `onRemove`. For marketplace tags, labels, key=value pairs, and a report's schedule or
+ *  format.
+ *
+ *  Not for a fixed fact worth noticing, such as "Preview" (a flag: `StatusBadge`), or a state
+ *  (a status: `StatusLabel`). See "UI/Badges/Which one". */
 export declare function Tag({ children, color, href, onRemove, removeLabel, title, mono, caps, className, ref, ...rest }: TagProps): import("react").JSX.Element;
 /** One tag of a `TagList`: a string is its own key and label. */
 export type TagItem = string | {

package/dist/components/Tag.js

@@ -12,8 +12,13 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 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) 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`. */
+/** A tag: what someone has labelled a thing. A neutral hairline pill with an optional color
+*  dot; people add, remove and filter by tags, so it can be a link with `href` and have an ×
+*  with `onRemove`. For marketplace tags, labels, key=value pairs, and a report's schedule or
+*  format.
+*
+*  Not for a fixed fact worth noticing, such as "Preview" (a flag: `StatusBadge`), or a state
+*  (a status: `StatusLabel`). See "UI/Badges/Which one". */
 function Tag({ children, color, href, onRemove, removeLabel, title, mono, caps, className, ref, ...rest }) {
 	const { dropdown } = useStrings();
 	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [color && /* @__PURE__ */ jsx("span", {

package/dist/components/ToggleGroup.d.ts

@@ -7,6 +7,9 @@ export interface ToggleGroupOption<T extends string> {
     /** How many items the option matches, after the label. */
     count?: number | undefined;
     disabled?: boolean | undefined;
+    /** `warning`: an option asking to be looked at, such as "Needs attention", whose label takes
+     *  the warning tone while it is off. */
+    tone?: 'warning' | undefined;
     testId?: string;
 }
 export interface ToggleGroupProps<T extends string> {
@@ -33,6 +36,11 @@ export interface ToggleGroupProps<T extends string> {
      *  of what the filter lets through. */
     'aria-describedby'?: string | undefined;
     testId?: string;
+    className?: string | undefined;
+    /** Whether an option that's off dims its icon so the pressed ones lead (default true).
+     *  `false` keeps icons whose color means something, such as status lamps, at full strength;
+     *  the fill and check still say which are on. */
+    dimIcons?: boolean | undefined;
 }
 /** Options that narrow a list, such as run statuses or job states, as a row of
  *  toggle buttons that wraps on a narrow screen. Pressing one adds it to the
@@ -44,4 +52,4 @@ export interface ToggleGroupProps<T extends string> {
  *  value, such as a time range, what to group by, or which view of the same
  *  data to show. A filter that may be off, or takes several values, is a
  *  `ToggleGroup`. */
-export declare function ToggleGroup<T extends string>({ label, options, value, onValueChange, multiple, all, allLabel, size, disabled, 'aria-describedby': describedBy, testId, }: ToggleGroupProps<T>): import("react").JSX.Element;
+export declare function ToggleGroup<T extends string>({ label, options, value, onValueChange, multiple, all, allLabel, size, disabled, 'aria-describedby': describedBy, testId, className, dimIcons, }: ToggleGroupProps<T>): import("react").JSX.Element;

package/dist/components/ToggleGroup.js

@@ -18,7 +18,7 @@ var ALL = "\0all";
 *  value, such as a time range, what to group by, or which view of the same
 *  data to show. A filter that may be off, or takes several values, is a
 *  `ToggleGroup`. */
-function ToggleGroup$1({ label, options, value, onValueChange, multiple = true, all = false, allLabel, size = "sm", disabled = false, "aria-describedby": describedBy, testId }) {
+function ToggleGroup$1({ label, options, value, onValueChange, multiple = true, all = false, allLabel, size = "sm", disabled = false, "aria-describedby": describedBy, testId, className, dimIcons = true }) {
 	const strings = useStrings();
 	const allCount = typeof all === "object" ? all.count : void 0;
 	const pressed = all && value.length === 0 ? [ALL] : value;
@@ -26,7 +26,7 @@ function ToggleGroup$1({ label, options, value, onValueChange, multiple = true,
 		"aria-label": label,
 		"aria-describedby": describedBy,
 		"data-testid": testId,
-		className: "flex flex-wrap items-center gap-1",
+		className: cx("flex flex-wrap items-center gap-1", className),
 		multiple,
 		disabled,
 		value: pressed,
@@ -42,7 +42,8 @@ function ToggleGroup$1({ label, options, value, onValueChange, multiple = true,
 				value: ALL,
 				label: allLabel ?? strings.common.all,
 				count: allCount,
-				size
+				size,
+				dimIcon: dimIcons
 			}),
 			all && options.length > 0 && /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
@@ -50,12 +51,13 @@ function ToggleGroup$1({ label, options, value, onValueChange, multiple = true,
 			}),
 			options.map((option) => /* @__PURE__ */ jsx(Chip, {
 				...option,
-				size
+				size,
+				dimIcon: dimIcons
 			}, option.value))
 		]
 	});
 }
-function Chip({ value, label, icon, count, disabled, testId, size }) {
+function Chip({ value, label, icon, count, disabled, tone, testId, size, dimIcon }) {
 	const locale = useLocale();
 	return /* @__PURE__ */ jsxs(Toggle, {
 		value,
@@ -64,10 +66,10 @@ function Chip({ value, label, icon, count, disabled, testId, size }) {
 		className: cx(buttonClasses({
 			variant: "outline",
 			size
-		}), "group focus-visible:-outline-offset-2 aria-pressed:bg-(--theme-accent-subtle)"),
+		}), "group focus-visible:-outline-offset-2 aria-pressed:bg-(--theme-accent-subtle)", tone === "warning" && "not-aria-pressed:text-(--theme-warning-text)"),
 		children: [
 			icon && /* @__PURE__ */ jsx("span", {
-				className: "inline-flex shrink-0 transition-opacity group-not-aria-pressed:opacity-55",
+				className: cx("inline-flex shrink-0 transition-opacity", dimIcon && "group-not-aria-pressed:opacity-55"),
 				children: icon
 			}),
 			label,

package/dist/index.d.ts

@@ -63,7 +63,8 @@ export { SettingModeOption } from './components/SettingModeOption.js';
 export { SettingRow, SettingsCard, type SettingsCardProps, SettingsHeading, } from './components/SettingsCard.js';
 export { LoadingRegion, Skeleton, type SkeletonProps } from './components/Skeleton.js';
 export { Slider, type SliderProps } from './components/Slider.js';
-export { type BadgeEmphasis, type BadgeShape, type BadgeSize, type BadgeVariant, CountBadge, type CountBadgeProps, StatusBadge, type StatusBadgeProps, StatusDot, type StatusDotProps, statusTextClass, } from './components/StatusBadge.js';
+export { type BadgeEmphasis, type BadgeSize, type BadgeVariant, CountBadge, type CountBadgeProps, StatusBadge, type StatusBadgeProps, StatusDot, type StatusDotProps, statusTextClass, } from './components/StatusBadge.js';
+export { RunStatusLabel, type RunStatusLabelProps, runStatusLook, StatusLabel, type StatusLabelProps, useRunStatusName, } from './components/StatusLabel.js';
 export { StickyBar, type StickyBarProps } from './components/StickyBar.js';
 export { Switch, type SwitchProps } from './components/Switch.js';
 export type { SegmentTone } from './components/segmented.js';

package/dist/index.js

@@ -76,6 +76,7 @@ import { SettingModeOption } from "./components/SettingModeOption.js";
 import { SettingRow, SettingsCard, SettingsHeading } from "./components/SettingsCard.js";
 import { Slider } from "./components/Slider.js";
 import { CountBadge, StatusBadge, StatusDot, statusTextClass } from "./components/StatusBadge.js";
+import { RunStatusLabel, StatusLabel, runStatusLook, useRunStatusName } from "./components/StatusLabel.js";
 import { StickyBar } from "./components/StickyBar.js";
 import { Table } from "./components/Table.js";
 import { TabPanel, Tabs } from "./components/Tabs.js";
@@ -84,4 +85,4 @@ import { ToggleGroup } from "./components/ToggleGroup.js";
 import { useClosingValue } from "./components/useClosingValue.js";
 import { useCssIsDark } from "./components/useCssIsDark.js";
 import { useApplyTheme, useColorMode } from "./components/useTheme.js";
-export { ActionMenu, AppLink, Autocomplete, Avatar, AvatarGroup, Breadcrumbs, Button, CODE_STYLES, Calendar, Callout, Card, CardHeader, ChartLegendList, ChartReadout, ChartTooltipBeside, ChartTooltipContent, ChartTooltipFrame, Checkbox, CheckboxGroup, CodeBlock, ColorInput, Combobox, ConfirmModal, ContextMenuProvider, CopyButton, CopyCodeBlock, CountBadge, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorPage, ErrorText, ExternalLink, Field, FieldOption, FieldValue, FileButton, HoverCard, IconButton, InfoTip, Input, JND, Kbd, LetterBadge, ListboxGroup, ListboxOption, ListboxPanel, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OTHER_SERIES_COLOR, OTHER_SERIES_KEY, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SERIES_LIMIT, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SelectionCopy, SeriesSwatch, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, StickyBar, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Tag, TagList, Textarea, ThemeEditor, ThemePreview, TitleInput, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, ariaKeyShortcuts, avatarInitials, buttonClasses, categoryClasses, categoryOf, chartTooltipPlacement, collapsePanelClassName, composite, contrastRatio, cx, deltaE, deriveTheme, errorPageKind, fieldBox, fitSeed, foldSeries, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatShortcut, formatTimeLeft, generateTheme, isApplePlatform, isDarkColor, isMenuDivider, isMenuGroup, isMenuSubmenu, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, normalizeTags, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, seriesColors, seriesOpacity, seriesSlotColor, shortcutText, statusTextClass, tagClasses, themeStylesheet, toHex, toP3, toast, useApplyTheme, useAvatarColoring, useClock, useCloseMenu, useClosePopover, useClosingValue, useColorMode, useConfirm, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useListboxNavigation, useLocale, useMenuOpenedBy, useNavigation, useOpenMenu, useOptionalWorkflowEngine, usePersistedState, useProblemText, useProvisionCorsRules, useRelativeTime, useRunFile, useSeriesHighlight, useShortcutFormat, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };
+export { ActionMenu, AppLink, Autocomplete, Avatar, AvatarGroup, Breadcrumbs, Button, CODE_STYLES, Calendar, Callout, Card, CardHeader, ChartLegendList, ChartReadout, ChartTooltipBeside, ChartTooltipContent, ChartTooltipFrame, Checkbox, CheckboxGroup, CodeBlock, ColorInput, Combobox, ConfirmModal, ContextMenuProvider, CopyButton, CopyCodeBlock, CountBadge, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorPage, ErrorText, ExternalLink, Field, FieldOption, FieldValue, FileButton, HoverCard, IconButton, InfoTip, Input, JND, Kbd, LetterBadge, ListboxGroup, ListboxOption, ListboxPanel, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OTHER_SERIES_COLOR, OTHER_SERIES_KEY, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, RunStatusLabel, SERIES_LIMIT, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SelectionCopy, SeriesSwatch, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, StatusLabel, StickyBar, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Tag, TagList, Textarea, ThemeEditor, ThemePreview, TitleInput, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, ariaKeyShortcuts, avatarInitials, buttonClasses, categoryClasses, categoryOf, chartTooltipPlacement, collapsePanelClassName, composite, contrastRatio, cx, deltaE, deriveTheme, errorPageKind, fieldBox, fitSeed, foldSeries, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatShortcut, formatTimeLeft, generateTheme, isApplePlatform, isDarkColor, isMenuDivider, isMenuGroup, isMenuSubmenu, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, normalizeTags, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusLook, runStatusTone, schemeFor, serializeTheme, seriesColors, seriesOpacity, seriesSlotColor, shortcutText, statusTextClass, tagClasses, themeStylesheet, toHex, toP3, toast, useApplyTheme, useAvatarColoring, useClock, useCloseMenu, useClosePopover, useClosingValue, useColorMode, useConfirm, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useListboxNavigation, useLocale, useMenuOpenedBy, useNavigation, useOpenMenu, useOptionalWorkflowEngine, usePersistedState, useProblemText, useProvisionCorsRules, useRelativeTime, useRunFile, useRunStatusName, useSeriesHighlight, useShortcutFormat, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };

package/dist/list/ListFilterBar.d.ts

@@ -37,6 +37,10 @@ export interface ListFilterBarProps {
 /** The chips that say what narrows a list, under its toolbar: one per filter, each editable in
  *  place, then "+ Filter" and Clear (or Reset, where the page has default filters). It shows
  *  only while a filter is on or a field is required. At phone width it stops at two lines and
- *  a "+n filters" chip opens the rest in a sheet. */
-export declare function ListFilterBar({ filters, trailing, label, className }: ListFilterBarProps): import("react").JSX.Element | null;
+ *  a "+n filters" chip opens the rest in a sheet.
+ *
+ *  The list's quick filters show above the chips as toggles, always, setting the same filters
+ *  the chips edit. At phone width each keeps to one line, and "+n more" opens the rest in the
+ *  same sheet. */
+export declare function ListFilterBar({ filters, trailing, label, className }: ListFilterBarProps): false | import("react").JSX.Element | null;
 export {};