@parallelworks/ui 0.89.0 → 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;

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"

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/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.js

@@ -732,7 +732,7 @@ function QuickRow({ filters, groups, narrow, onMore, end, stacked = false }) {
 		const tops = /* @__PURE__ */ new Set();
 		for (const button of el.querySelectorAll("button")) tops.add(Math.round(button.getBoundingClientRect().top));
 		const shown = limit ?? total;
-		if (tops.size > 1 && shown > 1) setLimit(shown - 1);
+		if (tops.size > 1 && shown > 0) setLimit(shown - 1);
 	});
 	const cap = fits && limit !== null ? limit : total;
 	let index = 0;
@@ -812,6 +812,7 @@ function ListFilterBar({ filters, trailing, label, className }) {
 	const [narrow, setNarrow] = useState(false);
 	const [width, setWidth] = useState(0);
 	const [limit, setLimit] = useState(null);
+	const [clearFolded, setClearFolded] = useState(false);
 	const [sheet, setSheet] = useState(false);
 	const [focusAt, setFocusAt] = useState(null);
 	const chips = filters ? orderedChips(filters) : [];
@@ -826,6 +827,7 @@ function ListFilterBar({ filters, trailing, label, className }) {
 	const empty = chips.length === 0;
 	const hasQuick = quick.length > 0;
 	const chipKeys = chips.map((c) => c.filter.field).join("\0");
+	const fixedChips = chips.filter((c) => c.field.required || c.field.pinned).length;
 	useLayoutEffect(() => {
 		const el = box.current;
 		if (!el) return;
@@ -839,7 +841,10 @@ function ListFilterBar({ filters, trailing, label, className }) {
 		observer.observe(el);
 		return () => observer.disconnect();
 	}, [empty, hasQuick]);
-	useLayoutEffect(() => setLimit(null), [
+	useLayoutEffect(() => {
+		setLimit(null);
+		setClearFolded(false);
+	}, [
 		width,
 		chipKeys,
 		narrow
@@ -848,9 +853,15 @@ function ListFilterBar({ filters, trailing, label, className }) {
 		const el = row.current;
 		if (!el || !narrow) return;
 		const tops = /* @__PURE__ */ new Set();
-		for (const child of el.children) tops.add(Math.round(child.offsetTop));
+		for (const child of el.children) if (!child.hasAttribute("data-filter-clear")) tops.add(Math.round(child.offsetTop));
 		const shown = limit ?? chips.length;
-		if (tops.size > 2 && shown > 1) setLimit(shown - 1);
+		if (tops.size > 2 && shown > Math.max(fixedChips, 1)) {
+			setLimit(shown - 1);
+			return;
+		}
+		const add = el.querySelector("[data-filter-add]");
+		const clear = el.querySelector("[data-filter-clear]");
+		if (add && clear && Math.round(clear.offsetTop) > Math.round(add.offsetTop)) setClearFolded(true);
 	});
 	useEffect(() => {
 		if (focusAt === null || !row.current) return;
@@ -858,7 +869,7 @@ function ListFilterBar({ filters, trailing, label, className }) {
 		setFocusAt(null);
 	}, [focusAt]);
 	const visible = narrow && limit !== null ? limit : chips.length;
-	const shownChips = chips.filter((c, i) => i < visible || c.filter.field === filters?.draft);
+	const shownChips = chips.filter((c, i) => i < visible || c.field.required || c.field.pinned || c.filter.field === filters?.draft);
 	const overflow = chips.length - shownChips.length;
 	const request = filters?.editRequest;
 	const hiddenRequest = request && !shownChips.some((c) => c.filter.field === request.field) && chips.some((c) => c.filter.field === request.field);
@@ -870,6 +881,7 @@ function ListFilterBar({ filters, trailing, label, className }) {
 	const resetting = filters.hasDefaults;
 	const clearButton = (resetting ? !filters.isDefault : removable) && /* @__PURE__ */ jsx("button", {
 		type: "button",
+		"data-filter-clear": "",
 		onClick: resetting ? filters.reset : filters.clear,
 		className: buttonClasses({
 			variant: "ghost",
@@ -939,7 +951,7 @@ function ListFilterBar({ filters, trailing, label, className }) {
 				children: t.overflow(overflow)
 			}),
 			addButton(narrow),
-			clearButton,
+			!(narrow && clearFolded) && clearButton,
 			trailing && /* @__PURE__ */ jsx("div", {
 				className: "ml-auto flex items-center gap-1.5",
 				children: trailing