@parallelworks/ui 0.77.0 → 0.79.0

package/dist/components/Provider.js

@@ -1,12 +1,42 @@
 import { safeUrl } from "../safeUrl.js";
+import { ContextMenuProvider } from "./ContextMenu.js";
 import { useLocalPersistedState } from "./persistedState.js";
 import { Toaster } from "./Toast.js";
 import { TooltipProvider } from "./Tooltip.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CSPProvider } from "@base-ui/react/csp-provider";
 import { dequal } from "dequal";
 //#region src/components/Provider.tsx
+/** What a host passes to translate the strings: any group, any string in it, at any depth.
+*  A string it leaves out stays in English. */
+var OPERATOR_WORDS = {
+	is: (n) => n > 1 ? "is any of" : "is",
+	isNot: (n) => n > 1 ? "is none of" : "is not",
+	includesAll: (n) => n > 1 ? "includes all of" : "includes",
+	after: () => "is after",
+	before: () => "is before",
+	between: () => "is between",
+	contains: () => "contains",
+	notContains: () => "does not contain",
+	isSet: () => "is set",
+	isNotSet: () => "is not set"
+};
+var dayFormats = /* @__PURE__ */ new Map();
+function dayFormat(locale) {
+	let formats = dayFormats.get(locale);
+	if (!formats) {
+		formats = {
+			short: new Intl.DateTimeFormat(locale, {
+				month: "short",
+				day: "numeric"
+			}),
+			medium: new Intl.DateTimeFormat(locale, { dateStyle: "medium" })
+		};
+		dayFormats.set(locale, formats);
+	}
+	return formats;
+}
 var isGroup = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 function mergeStrings(defaults, overrides) {
 	if (!isGroup(overrides) || !isGroup(defaults)) return defaults;
@@ -81,6 +111,7 @@ var DEFAULTS = {
 			copyThing: (label) => `Copy ${label}`,
 			copiedThing: (label) => `Copied ${label}`,
 			copyThingFailed: (label) => `Couldn't copy ${label}`,
+			countOverflow: (max) => `${max}+`,
 			noValue: "None",
 			invalidName: "Use letters, numbers, dashes, and underscores.",
 			invalidNumber: "Use a number.",
@@ -122,7 +153,10 @@ var DEFAULTS = {
 			panelWidth: (px) => `${px} pixels wide`,
 			refresh: "Refresh",
 			refreshing: "Refreshing",
-			updated: (ago) => `Updated ${ago}`
+			updated: (ago) => `Updated ${ago}`,
+			moreCount: (count) => `${count} more`,
+			copySelection: "Copy selection",
+			hiddenValue: "Hidden value"
 		},
 		dropdown: {
 			select: (type) => `Select ${type}`,
@@ -130,6 +164,8 @@ var DEFAULTS = {
 			searching: "Searching…",
 			showOptions: "Show options",
 			add: (text) => `Add “${text}”`,
+			create: (text) => `Create “${text}”`,
+			suggested: "Suggested",
 			limitReached: (max) => `Up to ${max}`,
 			removeValue: (label) => `Remove ${label}`
 		},
@@ -137,7 +173,9 @@ var DEFAULTS = {
 			pickDate: "Pick a date",
 			time: "Time",
 			previousMonth: "Previous month",
-			nextMonth: "Next month"
+			nextMonth: "Next month",
+			typeDate: "Type a date",
+			invalidDate: "Not a date that can be chosen"
 		},
 		colorInput: {
 			pick: (name) => name ? `Pick ${name.toLowerCase()}` : "Pick a color",
@@ -282,7 +320,8 @@ var DEFAULTS = {
 			].filter(([count]) => count).map(([count, one, many]) => `${count} ${count === 1 ? one : many}`).join(", ")}`,
 			annotationSource: (job, step) => `in ${job} → ${step}`,
 			stepNumber: (index) => `step ${index}`,
-			warningCount: (count) => count === 1 ? "1 warning" : `${count} warnings`
+			warningCount: (count) => count === 1 ? "1 warning" : `${count} warnings`,
+			warningAbout: "About this warning"
 		},
 		jobActions: {
 			openSubworkflowLogs: "Open subworkflow logs",
@@ -524,8 +563,23 @@ var DEFAULTS = {
 			minutes: (n) => `${n}m`,
 			hours: (n) => `${n}h`,
 			days: (n) => `${n}d`,
-			years: (n) => `${n}y`
+			years: (n) => `${n}y`,
+			inFuture: (label) => `in ${label}`,
+			date: (date, locale) => dayFormat(locale)[date.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear() ? "short" : "medium"].format(date)
+		},
+		keys: {
+			ctrl: "Ctrl",
+			alt: "Alt",
+			shift: "Shift",
+			meta: "Meta",
+			enter: "Enter",
+			escape: "Esc",
+			space: "Space",
+			tab: "Tab",
+			backspace: "Backspace",
+			delete: "Delete"
 		},
+		chart: { total: "Total" },
 		list: {
 			moreActions: "More actions",
 			labelName: "name",
@@ -535,6 +589,7 @@ var DEFAULTS = {
 			labelId: "ID",
 			labelUrl: "URL",
 			couldNotLoad: (noun) => `Couldn't load ${noun}`,
+			couldNotLoadHint: "Something went wrong. Try again in a moment.",
 			data: "data",
 			count: (count, noun) => `${count} ${noun}`,
 			matchCount: (matches, total, nounPlural) => `${matches} of ${total} ${nounPlural}`,
@@ -562,7 +617,62 @@ var DEFAULTS = {
 			paginationPrevious: "Previous",
 			paginationNext: "Next",
 			pagination: "Pagination",
+			page: (page) => `Page ${page}`,
 			removeSearchTerm: (term) => `Remove filter ${term}`
+		},
+		filters: {
+			addFilter: "Filter",
+			searchFields: "Filter by…",
+			activeFilters: "Active filters",
+			filterButton: (count) => count > 0 ? `Filter, ${count} on` : "Filter",
+			any: "Any",
+			pending: "Choose…",
+			operator: (op, count) => OPERATOR_WORDS[op](count),
+			more: (count) => `+${count}`,
+			overflow: (count) => `+${count} ${count === 1 ? "filter" : "filters"}`,
+			sheetTitle: "Filters",
+			remove: (field) => `Remove ${field} filter`,
+			chip: (field, operator, values) => [
+				field,
+				operator,
+				values
+			].filter(Boolean).join(" "),
+			changeField: (field) => `Field: ${field}`,
+			changeOperator: (operator) => `Condition: ${operator}`,
+			changeValue: (values) => `Value: ${values}`,
+			list: (values) => values.join(", "),
+			datePreset: (preset) => {
+				const days = preset.match(/^-(\d+)d$/)?.[1];
+				return preset === "today" ? "Today" : preset === "month" ? "This month" : days ? `Last ${days} days` : preset;
+			},
+			customDate: "Custom…",
+			between: (from, to) => `${from} – ${to}`,
+			formatDate: (date, locale) => dayFormat(locale)[date.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear() ? "short" : "medium"].format(date),
+			textPlaceholder: "Type, then press Enter",
+			yes: "Yes",
+			no: "No"
+		},
+		errorPage: {
+			back: "Back",
+			home: "Back to home",
+			error: "This page couldn’t load",
+			statusTitle: (status) => `Error ${status}`,
+			titles: {
+				notFound: "Could not find the requested page",
+				forbidden: "No access",
+				unauthenticated: "Signed out",
+				unavailable: "The service is unreachable",
+				server: "Something went wrong on our side",
+				network: "You’re offline"
+			},
+			descriptions: {
+				notFound: "This page does not exist, or you do not have access to it.",
+				forbidden: "You can’t open this. Ask an administrator for access.",
+				unauthenticated: "Your session ended. Sign in again to pick up where you were.",
+				unavailable: "The server isn’t answering right now. Try again in a moment.",
+				server: "The page couldn’t load because of an error on the server.",
+				network: "The server couldn’t be reached. Check your connection and try again."
+			}
 		}
 	},
 	navigation: {
@@ -577,11 +687,14 @@ var DEFAULTS = {
 		openExternal: (href) => {
 			const url = safeUrl(href);
 			if (url) window.open(url, "_blank");
-		}
+		},
+		goBack: () => window.history.back(),
+		canGoBack: () => typeof window !== "undefined" && window.history.length > 1
 	},
 	data: {
 		useRunFile: defaultUseRunFile,
-		usePersistedState: useLocalPersistedState
+		usePersistedState: useLocalPersistedState,
+		useProblemMessage: useNoProblemMessage
 	},
 	slots: {}
 };
@@ -590,9 +703,20 @@ var NavigationContext = createContext(DEFAULTS.navigation);
 var DataContext = createContext(DEFAULTS.data);
 var SlotsContext = createContext(DEFAULTS.slots);
 var EngineContext = createContext(void 0);
+var LocaleContext = createContext(void 0);
+var AvatarColoringContext = createContext("name");
 function useStrings() {
 	return useContext(StringsContext);
 }
+/** The host's locale for dates and times, such as `de-DE`. Undefined without one, which leaves
+*  each format's own default: the date library's for its times, the browser's for the rest. */
+function useLocale() {
+	return useContext(LocaleContext);
+}
+/** How the host colors avatars, UIProvider's `avatarColoring`. */
+function useAvatarColoring() {
+	return useContext(AvatarColoringContext);
+}
 function useNavigation() {
 	return useContext(NavigationContext);
 }
@@ -680,6 +804,17 @@ function useRunFile(slug, path, options) {
 	const { useRunFile: boundUseRunFile } = useContext(DataContext);
 	return boundUseRunFile(slug, path, options);
 }
+var noProblemMessage = () => void 0;
+function useNoProblemMessage() {
+	return noProblemMessage;
+}
+/** A coded problem's text in the reader's language: the host's message for its code and type, or
+*  else its own `message`. */
+function useProblemText() {
+	const { useProblemMessage: boundUseProblemMessage } = useContext(DataContext);
+	const message = boundUseProblemMessage();
+	return useCallback((problem) => (problem.code ? message(problem.code, problem.params ?? void 0, problem.type ?? void 0) : void 0) ?? problem.message, [message]);
+}
 function usePersistedState(key, defaultValue) {
 	const { usePersistedState: boundUsePersistedState } = useContext(DataContext);
 	return boundUsePersistedState(key, defaultValue);
@@ -698,7 +833,7 @@ function useMerged(compute, input) {
 	};
 	return ref.current.value;
 }
-function UIProvider({ strings, navigation, data, slots, engine: engineProp, nonce, children }) {
+function UIProvider({ strings, navigation, data, slots, engine: engineProp, nonce, locale, avatarColoring = "name", children }) {
 	const [firstLoader] = useState(() => typeof engineProp === "function" ? engineProp : void 0);
 	const engine = typeof engineProp === "function" ? firstLoader ?? engineProp : engineProp;
 	useEffect(() => {
@@ -715,7 +850,9 @@ function UIProvider({ strings, navigation, data, slots, engine: engineProp, nonc
 	const [stableNavigation] = useState(() => ({
 		goTo: (to) => (navigationRef.current?.goTo ?? DEFAULTS.navigation.goTo)(to),
 		openStepSource: (uses, sourceUrl) => (navigationRef.current?.openStepSource ?? DEFAULTS.navigation.openStepSource)(uses, sourceUrl),
-		openExternal: (href) => (navigationRef.current?.openExternal ?? DEFAULTS.navigation.openExternal)(href)
+		openExternal: (href) => (navigationRef.current?.openExternal ?? DEFAULTS.navigation.openExternal)(href),
+		goBack: () => (navigationRef.current?.goBack ?? DEFAULTS.navigation.goBack)(),
+		canGoBack: () => (navigationRef.current?.canGoBack ?? DEFAULTS.navigation.canGoBack)()
 	}));
 	return /* @__PURE__ */ jsx(StringsContext, {
 		value: mergedStrings,
@@ -727,10 +864,16 @@ function UIProvider({ strings, navigation, data, slots, engine: engineProp, nonc
 					value: stableSlots,
 					children: /* @__PURE__ */ jsx(EngineContext, {
 						value: engine,
-						children: /* @__PURE__ */ jsxs(CSPProvider, {
-							nonce,
-							disableStyleElements: true,
-							children: [/* @__PURE__ */ jsx(TooltipProvider, { children }), /* @__PURE__ */ jsx(Toaster, {})]
+						children: /* @__PURE__ */ jsx(LocaleContext, {
+							value: locale,
+							children: /* @__PURE__ */ jsx(AvatarColoringContext, {
+								value: avatarColoring,
+								children: /* @__PURE__ */ jsxs(CSPProvider, {
+									nonce,
+									disableStyleElements: true,
+									children: [/* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(ContextMenuProvider, { children }) }), /* @__PURE__ */ jsx(Toaster, {})]
+								})
+							})
 						})
 					})
 				})
@@ -739,4 +882,4 @@ function UIProvider({ strings, navigation, data, slots, engine: engineProp, nonc
 	});
 }
 //#endregion
-export { UIProvider, useLink, useLoadedWorkflowEngine, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRepoSuggestions, useRunFile, useSecretVariablesResolver, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader, useWorkflowJsonResolver };
+export { UIProvider, useAvatarColoring, useLink, useLoadedWorkflowEngine, useLocale, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProblemText, useProvisionCorsRules, useRepoSuggestions, useRunFile, useSecretVariablesResolver, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader, useWorkflowJsonResolver };

package/dist/components/RefreshButton.d.ts

@@ -1,15 +1,22 @@
-import { type ButtonSize } from './buttonClasses.js';
+import type { TimeValue } from '../format.js';
+import { type ButtonSize, type ButtonVariant } from './buttonClasses.js';
 export interface RefreshButtonProps {
-    /** May return a promise; the button spins until it settles. */
+    /** May return a promise; the button spins until it settles. A rejection only
+     *  stops the spinning, so report a failure from the handler. */
     onRefresh: () => unknown;
     /** Spins for a refresh the host tracks itself, such as a revalidation. */
     refreshing?: boolean | undefined;
-    /** When the data was last fetched. The button then reads "Updated 5
-     *  seconds ago" instead of "Refresh", and keeps that current. */
-    updatedAt?: Date | number | null | undefined;
+    /** When the data was last fetched: a Date, epoch milliseconds, an ISO string or a luxon
+     *  DateTime. The button then reads "Updated 5 seconds ago" instead of "Refresh", and
+     *  keeps that current. */
+    updatedAt?: TimeValue;
     size?: ButtonSize | undefined;
+    /** A button's look, `ghost` by default; `inline` is text-sized muted text with no box, for
+     *  a line of details such as a header's "Updated 2 minutes ago". */
+    variant?: ButtonVariant | 'inline' | undefined;
     /** Only the icon shows, with "Refresh" as its name and tooltip. */
     iconOnly?: boolean | undefined;
+    className?: string | undefined;
 }
 /** Fetches again on demand, and says so while it does, out loud too. */
-export declare function RefreshButton({ onRefresh, refreshing, updatedAt, size, iconOnly, }: RefreshButtonProps): import("react").JSX.Element;
+export declare function RefreshButton({ onRefresh, refreshing, updatedAt, size, variant, iconOnly, className, }: RefreshButtonProps): import("react").JSX.Element;

package/dist/components/RefreshButton.js

@@ -4,11 +4,12 @@ import { RefreshIcon } from "../icons.js";
 import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
 import { useRelativeTime } from "./relativeTime.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/RefreshButton.tsx
+var inlineClasses = "inline-flex cursor-pointer items-center gap-1 rounded px-1 py-0.5 text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-focus) [&_svg]:size-3";
 /** Fetches again on demand, and says so while it does, out loud too. */
-function RefreshButton({ onRefresh, refreshing = false, updatedAt, size = "md", iconOnly = false }) {
+function RefreshButton({ onRefresh, refreshing = false, updatedAt, size = "md", variant = "ghost", iconOnly = false, className }) {
 	const { common: t } = useStrings();
 	const [pending, setPending] = useState(false);
 	const busy = refreshing || pending;
@@ -18,7 +19,8 @@ function RefreshButton({ onRefresh, refreshing = false, updatedAt, size = "md",
 		const result = onRefresh();
 		if (result instanceof Promise) {
 			setPending(true);
-			result.finally(() => setPending(false));
+			const done = () => setPending(false);
+			result.then(done, done);
 		}
 	};
 	const button = /* @__PURE__ */ jsxs("button", {
@@ -26,20 +28,26 @@ function RefreshButton({ onRefresh, refreshing = false, updatedAt, size = "md",
 		onClick: refresh,
 		"aria-busy": busy,
 		"aria-label": iconOnly ? t.refresh : void 0,
-		className: cx(buttonClasses({
-			variant: "ghost",
+		className: cx(variant === "inline" ? inlineClasses : buttonClasses({
+			variant,
 			size,
 			iconOnly
-		}), "group aria-busy:cursor-progress"),
+		}), "group aria-busy:cursor-progress", className),
 		children: [/* @__PURE__ */ jsx(RefreshIcon, {
 			"aria-hidden": "true",
 			className: cx("shrink-0 motion-reduce:animate-none motion-reduce:transition-none", busy ? "animate-spin" : "transition-transform duration-300 group-hover:rotate-180")
-		}), !iconOnly && (ago ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+		}), !iconOnly && (ago ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
 			className: "sr-only",
 			children: [t.refresh, ". "]
-		}), t.updated(ago)] }) : t.refresh)]
+		}), t.updated(ago)] }) : busy ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: t.refresh
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children: t.refreshing
+		})] }) : t.refresh)]
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [iconOnly ? /* @__PURE__ */ jsx(Tooltip, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [iconOnly ? /* @__PURE__ */ jsx(Tooltip, {
 		content: t.refresh,
 		children: button
 	}) : button, /* @__PURE__ */ jsx("span", {

package/dist/components/RunStatusIcon.d.ts

@@ -1,12 +1,21 @@
 import type { RunStatus } from '../engine.js';
 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)}>`. */
-export declare function runStatusTone(status: RunStatus): 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 `strings.dag.statusLabel`. To say the status in words, use `StatusBadge` with
- *  `runStatusTone`. */
-export declare function RunStatusIcon({ status, className, }: {
-    status: RunStatus;
+export declare function runStatusTone(status: RunStatusIconStatus): Tone;
+export interface RunStatusIconProps {
+    status: RunStatusIconStatus;
+    /** Names the icon in place of `strings.dag.statusLabel`, for a host's own status
+     *  shown in a run's look, such as "Provisioning" as running. */
+    label?: string | undefined;
+    /** Shows the name on hover and focus too, for an icon that stands without words. */
+    tooltip?: boolean | undefined;
     className?: string | undefined;
-}): import("react").JSX.Element;
+}
+/** 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`. */
+export declare function RunStatusIcon({ status, label: ownLabel, tooltip, className, }: RunStatusIconProps): import("react").JSX.Element;

package/dist/components/RunStatusIcon.js

@@ -1,17 +1,22 @@
 import { cx } from "../cx.js";
-import { CancelIcon, FailIcon, NotRunningIcon, RunningIcon, SkipIcon, SuccessIcon } from "../icons.js";
+import { CancelIcon, FailIcon, NotRunningIcon, PendingIcon, RunningIcon, SkipIcon, SuccessIcon, WarningIcon } from "../icons.js";
 import { toneIcon } from "./tone.js";
+import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/RunStatusIcon.tsx
 var looks = {
+	pending: {
+		tone: "muted",
+		icon: PendingIcon
+	},
 	started: {
-		tone: "warning",
+		tone: "info",
 		icon: RunningIcon,
 		spin: true
 	},
 	running: {
-		tone: "warning",
+		tone: "info",
 		icon: RunningIcon,
 		spin: true
 	},
@@ -19,6 +24,10 @@ var looks = {
 		tone: "success",
 		icon: SuccessIcon
 	},
+	warning: {
+		tone: "warning",
+		icon: WarningIcon
+	},
 	failed: {
 		tone: "error",
 		icon: FailIcon
@@ -60,14 +69,14 @@ 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 `strings.dag.statusLabel`. To say the status in words, use `StatusBadge` with
-*  `runStatusTone`. */
-function RunStatusIcon({ status, className }) {
+*  is named by `label`, or else `strings.dag.statusLabel`. To say the status in words, use
+*  `StatusBadge` with `runStatusTone`. */
+function RunStatusIcon({ status, label: ownLabel, tooltip = false, className }) {
 	const { dag } = useStrings();
 	const look = looks[status ?? ""];
 	const Icon = look.icon;
-	const label = dag.statusLabel(status ?? "");
-	return /* @__PURE__ */ jsx("span", {
+	const label = ownLabel ?? dag.statusLabel(status ?? "");
+	const icon = /* @__PURE__ */ jsx("span", {
 		...label ? {
 			role: "img",
 			"aria-label": label
@@ -79,6 +88,10 @@ function RunStatusIcon({ status, className }) {
 			className: cx(look.spin && "animate-spin rounded-full")
 		})
 	});
+	return tooltip && label ? /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		children: icon
+	}) : icon;
 }
 //#endregion
 export { RunStatusIcon, runStatusTone };

package/dist/components/Section.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
-export type SectionVariant = 'plain' | 'card';
+export type SectionVariant = 'plain' | 'bare' | 'card';
+export type SectionTone = 'default' | 'error';
 export type SectionSpacing = 'regular' | 'tight';
 export interface SectionProps {
     title: ReactNode;
@@ -10,9 +11,15 @@ export interface SectionProps {
     beside?: ReactNode;
     /** At the header's far end, such as an add button or a range picker. */
     actions?: ReactNode;
-    /** `plain` rules the title off from the content under it; `card` frames the
-     *  section as a panel. */
+    /** `plain` rules the title off from the content under it; `bare` sets the title
+     *  over the content with no rule; `card` frames the section as a panel. */
     variant?: SectionVariant | undefined;
+    /** `error` marks a card of irreversible actions, such as deleting what the page
+     *  shows: its border and title turn the error color over a clear body. */
+    tone?: SectionTone | undefined;
+    /** A card's content reaches its edges, such as a table or a list ruled to its
+     *  sides, instead of sitting inset under the header. */
+    flush?: boolean | undefined;
     /** The room between a `plain` section's rule and its content. `tight` suits content that
      *  spaces itself tightly, such as a form with its labels over its fields, so the first row
      *  sits as far under the rule as the rows under it sit under one another. */
@@ -35,4 +42,4 @@ export interface SectionProps {
  *  that can fold away. Folding keeps the content mounted, so fields hold their
  *  values and validation while closed. For a line inside content that reveals
  *  more detail, use Disclosure. */
-export declare function Section({ title, description, beside, actions, variant, spacing, collapsible, open, onOpenChange, defaultOpen, headingLevel, id, className, children, }: SectionProps): import("react").JSX.Element;
+export declare function Section({ title, description, beside, actions, variant, tone, flush, spacing, collapsible, open, onOpenChange, defaultOpen, headingLevel, id, className, children, }: SectionProps): import("react").JSX.Element;

package/dist/components/Section.js

@@ -1,18 +1,22 @@
 import { cx } from "../cx.js";
 import { ChevronRightIcon } from "../icons.js";
 import { collapsePanelClassName } from "./Disclosure.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/components/Section.tsx
 var rootClasses = {
 	plain: "flex w-full flex-col",
+	bare: "flex w-full flex-col",
 	card: "panel mb-1 flex w-full flex-col"
 };
+var errorCardClassName = "border-(--theme-error)/30 bg-transparent";
 var headerClasses = {
-	plain: "flex w-full items-center gap-2 border-b border-(--theme-border) pb-1",
-	card: "flex w-full items-center gap-2 p-4"
+	plain: "@container/section-header flex w-full flex-wrap items-center gap-x-2 gap-y-2 border-b border-(--theme-border) pb-1",
+	bare: "@container/section-header flex w-full flex-wrap items-center gap-x-2 gap-y-2",
+	card: "@container/section-header flex w-full flex-wrap items-center gap-x-2 gap-y-2 px-4 py-3"
 };
+var actionsClassName = "flex shrink-0 ms-auto @max-[24rem]/section-header:ms-0 @max-[24rem]/section-header:basis-full";
 var ruleGaps = {
 	regular: "mb-4",
 	tight: "mb-1.5"
@@ -20,10 +24,12 @@ var ruleGaps = {
 var cardBodyClassName = "px-4 pb-4";
 var titleClasses = {
 	plain: "text-base font-semibold",
+	bare: "text-base font-semibold",
 	card: "text-base font-semibold"
 };
 var foldedTitleClasses = {
 	plain: "",
+	bare: "",
 	card: "not-data-panel-open:text-(--theme-muted-text-color)"
 };
 var chevronIndent = "pl-6";
@@ -31,19 +37,27 @@ var chevronIndent = "pl-6";
 *  that can fold away. Folding keeps the content mounted, so fields hold their
 *  values and validation while closed. For a line inside content that reveals
 *  more detail, use Disclosure. */
-function Section({ title, description, beside, actions, variant = "plain", spacing = "regular", collapsible = true, open, onOpenChange, defaultOpen = true, headingLevel = 3, id, className, children }) {
+function Section({ title, description, beside, actions, variant = "plain", tone = "default", flush = false, spacing = "regular", collapsible = true, open, onOpenChange, defaultOpen = true, headingLevel = 3, id, className, children }) {
 	const Heading = `h${headingLevel}`;
 	const descriptionId = useId();
 	const describedBy = description ? descriptionId : void 0;
 	const titleProps = { "data-section-title": "" };
 	const fill = !beside && !actions;
+	const card = variant === "card";
+	const danger = card && tone === "error";
+	const rootClassName = cx(rootClasses[variant], danger && errorCardClassName, className);
+	const titleTone = danger && "text-(--theme-error-text)";
+	const body = card && !flush ? /* @__PURE__ */ jsx("div", {
+		className: cardBodyClassName,
+		children
+	}) : children;
 	const header = (heading) => /* @__PURE__ */ jsxs("div", {
-		className: cx(headerClasses[variant], variant === "plain" && ruleGaps[spacing]),
+		className: cx(headerClasses[variant], !card && ruleGaps[spacing]),
 		"data-section-header": true,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 flex-1 flex-col gap-0.5",
+			className: "flex min-w-0 grow basis-0 flex-col gap-0.5",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 items-center gap-2",
+				className: "flex min-w-0 items-start gap-2",
 				children: [heading, beside]
 			}), description && /* @__PURE__ */ jsx("p", {
 				id: descriptionId,
@@ -51,22 +65,22 @@ function Section({ title, description, beside, actions, variant = "plain", spaci
 				children: description
 			})]
 		}), actions && /* @__PURE__ */ jsx("div", {
-			className: "flex shrink-0 items-center gap-2",
-			children: actions
+			className: cx(actionsClassName, collapsible && "@max-[24rem]/section-header:ps-6"),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex w-fit items-center gap-2",
+				children: actions
+			})
 		})]
 	});
 	if (!collapsible) return /* @__PURE__ */ jsxs("section", {
 		id,
 		"aria-describedby": describedBy,
-		className: cx(rootClasses[variant], className),
+		className: rootClassName,
 		children: [header(/* @__PURE__ */ jsx(Heading, {
 			...titleProps,
-			className: cx("flex items-center", titleClasses[variant]),
+			className: cx("flex items-center", titleClasses[variant], titleTone),
 			children: title
-		})), variant === "card" ? /* @__PURE__ */ jsx("div", {
-			className: cardBodyClassName,
-			children
-		}) : children]
+		})), body]
 	});
 	return /* @__PURE__ */ jsxs(Collapsible.Root, {
 		id,
@@ -74,25 +88,22 @@ function Section({ title, description, beside, actions, variant = "plain", spaci
 		open,
 		onOpenChange: (next) => onOpenChange?.(next),
 		defaultOpen,
-		className: cx(rootClasses[variant], className),
+		className: rootClassName,
 		children: [header(/* @__PURE__ */ jsx(Heading, {
 			className: cx("flex min-w-0", fill && "flex-1"),
 			children: /* @__PURE__ */ jsxs(Collapsible.Trigger, {
 				...titleProps,
 				"aria-describedby": describedBy,
-				className: cx("group flex min-w-0 cursor-pointer items-center gap-1 rounded-sm text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)", fill && "w-full", titleClasses[variant], foldedTitleClasses[variant]),
+				className: cx("group flex min-w-0 cursor-pointer items-start gap-1 rounded-sm text-left select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)", fill && "w-full", titleClasses[variant], titleTone || foldedTitleClasses[variant]),
 				children: [/* @__PURE__ */ jsx(ChevronRightIcon, {
 					"aria-hidden": "true",
-					className: cx("shrink-0 transition-transform group-data-panel-open:rotate-90 motion-reduce:transition-none", "px-1 text-[1.25rem]")
+					className: cx("shrink-0 transition-transform group-data-panel-open:rotate-90 motion-reduce:transition-none", "mt-0.5 px-1 text-[1.25rem]")
 				}), title]
 			})
 		})), /* @__PURE__ */ jsx(Collapsible.Panel, {
 			keepMounted: true,
 			className: collapsePanelClassName,
-			children: variant === "card" ? /* @__PURE__ */ jsx("div", {
-				className: cardBodyClassName,
-				children
-			}) : children
+			children: body
 		})]
 	});
 }