@parallelworks/ui 0.43.0 → 0.45.0

package/dist/components/Provider.js

@@ -1,8 +1,9 @@
 import { safeUrl } from "../safeUrl.js";
+import { useLocalPersistedState } from "./persistedState.js";
+import { Toaster } from "./Toast.js";
 import { TooltipProvider } from "./Tooltip.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { useLocalStorage } from "usehooks-ts";
 //#region src/components/Provider.tsx
 var DefaultLink = ({ href, ...rest }) => /* @__PURE__ */ jsx("a", {
 	href: safeUrl(href),
@@ -17,39 +18,62 @@ var defaultUseRunFile = () => ({
 	isLoading: false,
 	error: void 0
 });
-function useLocalStoragePersistedState(key, defaultValue) {
-	const [value, setValue] = useLocalStorage(key, defaultValue);
-	return [value, setValue];
-}
 var DEFAULTS = {
-	notify: {
-		info: () => {},
-		success: () => {},
-		warning: () => {},
-		error: () => {},
-		loading: () => "toast",
-		update: () => {},
-		dismiss: () => {}
-	},
 	strings: {
-		loading: "Loading…",
 		modal: {
-			cancel: "Cancel",
-			close: "Close",
-			create: "Create",
 			creating: "Creating…",
 			addDescription: "Add description…",
 			advanced: "Advanced",
 			favorite: "Favorite",
 			favorited: "Favorited",
 			favoriteHintOn: "Your item will be favorited when it's created",
-			favoriteHintOff: "Favorite your item when it's created",
-			filter: "Filter"
+			favoriteHintOff: "Favorite your item when it's created"
 		},
 		common: {
+			cancel: "Cancel",
+			close: "Close",
+			save: "Save",
+			clear: "Clear",
+			delete: "Delete",
+			download: "Download",
+			retry: "Retry",
+			reset: "Reset",
+			apply: "Apply",
+			dismiss: "Dismiss",
+			notifications: "Notifications",
+			rename: "Rename",
+			share: "Share",
+			send: "Send",
+			filter: "Filter",
+			loading: "Loading…",
+			loadMore: "Load more",
+			showMore: "Show more",
+			showLess: "Show less",
+			previous: "Previous",
+			next: "Next",
+			zoomIn: "Zoom in",
+			zoomOut: "Zoom out",
+			expandAll: "Expand all",
+			collapseAll: "Collapse all",
+			moveUp: "Move up",
+			moveDown: "Move down",
+			undo: "Undo",
+			redo: "Redo",
+			duplicate: "Duplicate",
+			copied: "Copied",
+			copyToClipboard: "Copy to clipboard",
+			copiedToClipboard: "Copied to clipboard",
+			copyFailed: "Couldn't copy to the clipboard",
+			copyThing: (label) => `Copy ${label}`,
+			copiedThing: (label) => `Copied ${label}`,
+			copyThingFailed: (label) => `Couldn't copy ${label}`,
+			invalidName: "Use letters, numbers, dashes, and underscores.",
+			invalidNumber: "Use a number.",
 			copy: "Copy",
-			copied: "Copied!",
-			copyFailed: "Failed to copy text to clipboard",
+			showValue: "Show value",
+			hideValue: "Hide value",
+			expand: "Expand",
+			collapse: "Collapse",
 			showHiddenFields: "Show hidden fields",
 			add: "Add",
 			create: "Create",
@@ -58,12 +82,87 @@ var DEFAULTS = {
 			remove: "Remove",
 			sort: "Sort",
 			userAvatar: "User avatar",
-			moreInfo: "More information"
+			moreInfo: "More information",
+			actions: "Actions",
+			edit: "Edit",
+			submit: "Submit",
+			search: "Search",
+			clearSearch: "Clear search",
+			filterPlaceholder: "Filter…",
+			breadcrumb: "Breadcrumb",
+			yes: "Yes",
+			no: "No",
+			opensInNewTab: "(opens in a new tab)",
+			resizePanel: "Resize panel",
+			panelWidth: (px) => `${px} pixels wide`,
+			refresh: "Refresh",
+			refreshing: "Refreshing",
+			updated: (ago) => `Updated ${ago}`
 		},
 		dropdown: {
 			select: (type) => `Select ${type}`,
 			noOptionsFound: "No options found",
-			showOptions: "Show options"
+			showOptions: "Show options",
+			add: (text) => `Add “${text}”`,
+			limitReached: (max) => `Up to ${max}`
+		},
+		datePicker: {
+			pickDate: "Pick a date",
+			time: "Time",
+			previousMonth: "Previous month",
+			nextMonth: "Next month"
+		},
+		theme: {
+			appearance: "Appearance",
+			light: "Light",
+			dark: "Dark",
+			system: "System",
+			editing: "Colors for",
+			presets: "Presets",
+			base: "Background",
+			accent: "Accent",
+			contrast: "Contrast",
+			contrastHelp: "Separates surfaces and strengthens text. Text always meets WCAG AA.",
+			customSidebar: "Custom sidebar",
+			sidebarBase: "Sidebar background",
+			sidebarAccent: "Sidebar accent",
+			code: "Code",
+			codeStyle: (style) => ({
+				balanced: "Balanced",
+				vivid: "Vivid",
+				muted: "Muted",
+				mono: "Monochrome"
+			})[style],
+			pick: (name) => `Pick ${name.toLowerCase()}`,
+			invalidColor: "Enter a hex color, such as #1f6feb.",
+			copy: "Copy theme",
+			copied: "theme",
+			import: "Import theme",
+			importLabel: "Theme to import",
+			importPlaceholder: "Paste a copied theme",
+			apply: "Apply",
+			reset: "Reset",
+			importError: (code, path) => ({
+				json: "This isn’t a copied theme: it isn’t valid JSON.",
+				version: "This theme is from a version this app can’t read.",
+				shape: `This theme is incomplete${path ? ` at ${path}` : ""}.`,
+				color: `${path} isn’t a color.`,
+				range: `${path} is out of range.`
+			})[code],
+			preview: "Preview",
+			previewNav: [
+				"Home",
+				"Runs",
+				"Settings"
+			],
+			previewHeading: "Weekly report",
+			previewBody: "Twelve runs finished and two need attention.",
+			previewMuted: "Updated a minute ago",
+			previewLink: "View runs",
+			previewButton: "Run again",
+			previewSearch: "Search runs",
+			previewPassed: "Passed",
+			previewFailed: "Failed"
 		},
 		logviewer: {
 			error: "Error:",
@@ -76,7 +175,6 @@ var DEFAULTS = {
 			hideDebug: "Hide Debug",
 			showDebug: "Show Debug",
 			filterLogs: "Filter logs",
-			download: "Download",
 			beginningOfLog: "Beginning of log",
 			loadingOlderEntries: "Loading older entries…",
 			loadOlderEntries: "Load older entries",
@@ -87,12 +185,12 @@ var DEFAULTS = {
 			timeRangeHelp: "Times are interpreted in your local timezone. Applying a range re-queries the log source and replaces what is loaded. Setting an end time stops live tailing until you clear it.",
 			timeRangeFrom: "From",
 			timeRangeTo: "To",
-			apply: "Apply",
-			clear: "Clear",
 			invalidStartTime: "Start time is not a valid date.",
 			invalidEndTime: "End time is not a valid date.",
 			endBeforeStart: "End time must be after the start time.",
-			endInFuture: "End time cannot be in the future."
+			endInFuture: "End time cannot be in the future.",
+			follow: "Follow",
+			following: "Following"
 		},
 		dag: {
 			workflow: "Workflow",
@@ -100,10 +198,6 @@ var DEFAULTS = {
 			status: "Status",
 			runtime: "Runtime",
 			submitted: "Submitted",
-			expandAll: "Expand All",
-			collapseAll: "Collapse All",
-			zoomIn: "Zoom in",
-			zoomOut: "Zoom out",
 			resetView: "Reset View",
 			previousGraph: "Back to the previous graph",
 			nextGraph: "Forward to the next graph",
@@ -113,7 +207,23 @@ var DEFAULTS = {
 			noLogFound: "No log found",
 			logLoadFailed: "Log could not be loaded",
 			statusLabel: (status) => status,
-			statusReason: () => void 0
+			statusReason: () => void 0,
+			generalLog: "General log",
+			previousStep: "Previous step",
+			nextStep: "Next step",
+			graphView: "DAG",
+			treeView: "Tree",
+			summary: "Summary",
+			dependsOn: "depends on:",
+			subworkflow: "(subworkflow)",
+			annotations: "Annotations",
+			annotationType: {
+				error: "Error",
+				warning: "Warning",
+				notice: "Notice"
+			},
+			annotationSource: (job, step) => `in ${job} → ${step}`,
+			stepNumber: (index) => `step ${index}`
 		},
 		jobActions: {
 			openSubworkflowLogs: "Open subworkflow logs",
@@ -130,11 +240,11 @@ var DEFAULTS = {
 				select: (name) => `Select ${name}`,
 				viewDetails: "View details",
 				openFolder: "Open folder",
-				delete: "Delete",
 				detailsTab: "Details",
 				previewTab: "Preview",
 				preview: "Preview",
 				openFullPreview: "Open full preview",
+				previewLayout: "Preview layout",
 				quickLook: "Quick Look",
 				fullWindow: "Full window",
 				streamed: "Streamed",
@@ -152,10 +262,6 @@ var DEFAULTS = {
 				unsupportedMessage: "This file type can't be previewed in the browser. Download the file to view it.",
 				notebookParseError: "This notebook couldn't be parsed.",
 				copyUri: "Copy URI",
-				download: "Download",
-				close: "Close",
-				zoomIn: "Zoom in",
-				zoomOut: "Zoom out",
 				previousFile: "Previous file",
 				nextFile: "Next file",
 				csvRows: (count, columns) => `${count} rows · ${columns} columns`,
@@ -175,7 +281,6 @@ var DEFAULTS = {
 				success: (name) => `Created ${name}.`,
 				error: (message) => `Couldn't create folder: ${message}`,
 				invalidTarget: "Select a folder before creating a new folder.",
-				noWriteAccess: "You do not have write access to this storage.",
 				unsupported: "Folder creation is not supported for this storage.",
 				validation: {
 					reserved: "The folder name cannot be . or ..",
@@ -184,6 +289,8 @@ var DEFAULTS = {
 				}
 			},
 			readOnly: "Read-only",
+			fileLink: "file link",
+			uri: "URI",
 			cors: {
 				explanation: {
 					title: "CORS Configuration Required",
@@ -191,10 +298,7 @@ var DEFAULTS = {
 					action: "You can automatically configure these rules to allow access from this domain.",
 					note: "Note: Changes may take up to 30 seconds to propagate."
 				},
-				actions: {
-					retry: "Retry Connection",
-					addRules: "Add CORS Rules"
-				},
+				actions: { addRules: "Add CORS Rules" },
 				propagating: {
 					title: "Propagating CORS rules",
 					description: "The storage provider is rolling out the new rules to its endpoints. This usually completes within a minute.",
@@ -208,13 +312,10 @@ var DEFAULTS = {
 			},
 			selectedCount: (count) => `${count} selected`,
 			loadingMore: "Loading more items…",
-			loadMore: "Load more",
-			retry: "Retry",
 			partialCount: (count) => `${count.toLocaleString()}+ items`,
 			notFound: {
 				title: (name) => `Couldn't find ${name}`,
-				description: "It may have been moved or deleted, or it may sit further into a folder than we have listed.",
-				retry: "Try again"
+				description: "It may have been moved or deleted, or it may sit further into a folder than we have listed."
 			},
 			treeMoreCount: (count) => `${count.toLocaleString()} more`,
 			treeMoreCountPartial: (count) => `${count.toLocaleString()}+ more`,
@@ -224,10 +325,7 @@ var DEFAULTS = {
 				noFilesForDownload: "No files selected for download.",
 				downloadLinkFailed: "Failed to generate download link",
 				fileLinkFailed: "Failed to generate file link",
-				fileLinkCopied: "File link copied to clipboard",
 				noUri: "No URI available for this file.",
-				uriCopied: "URI copied to clipboard",
-				uriCopyFailed: "Failed to copy URI",
 				storageUnavailable: "This storage is not available at the moment. Please try again later.",
 				waitForCurrentUpload: "Please wait for the current upload to finish before starting a new one.",
 				waitForUpload: "Please wait for the upload to finish.",
@@ -247,25 +345,30 @@ var DEFAULTS = {
 				connectFailed: "Failed to connect to storage provider. Please check your storage settings and try again.",
 				corsNoStorage: "No storage selected",
 				corsAdded: "CORS rules added successfully",
-				corsPropagating: "CORS rules were added, but are still propagating. Try again in a moment."
+				corsPropagating: "CORS rules were added, but are still propagating. Try again in a moment.",
+				previewUnsupported: "Preview is not supported for this storage."
 			},
 			chrome: {
 				explorer: "Explorer",
-				refresh: "Refresh",
-				collapse: "Collapse",
 				upload: "Upload",
-				download: "Download",
 				downloadFromBrowser: "From browser",
 				access: "Access",
 				manageAccess: "Manage Access",
-				delete: "Delete",
-				copyToClipboard: "Copy to clipboard",
 				selectAll: "Select all",
 				name: "Name",
 				size: "Size",
 				created: "Created",
 				hash: "Hash",
-				storageIconAlt: "An icon for the storage"
+				storageIconAlt: "An icon for the storage",
+				type: "Type",
+				storages: "Storages",
+				modified: "Modified",
+				lastModified: "Last modified",
+				contentType: "Content type",
+				storageClass: "Storage class",
+				details: "Details",
+				selectFiles: "Select files",
+				selectFolder: "Select folder"
 			},
 			confirmUpload: {
 				title: "Confirm Upload",
@@ -274,15 +377,13 @@ var DEFAULTS = {
 				noPath: "No path selected",
 				confirm: "Confirm",
 				target: "Target:",
-				totalSize: "Total Size:",
 				sizeLimitTitle: "Upload Size Limit Exceeded",
 				sizeLimitBody: (total, max) => `The total upload size (${total}) exceeds the maximum allowed limit of ${max}.`,
 				sizeLimitHint: "Please reduce the number of files or upload them in smaller batches."
 			},
 			confirmDelete: {
 				title: "Confirm Delete",
-				text: "Are you sure you want to delete the following item(s)? Folders are deleted with everything inside them. This action cannot be undone.",
-				action: "Delete"
+				text: "Are you sure you want to delete the following item(s)? Folders are deleted with everything inside them. This action cannot be undone."
 			},
 			empty: {
 				nothingSelected: "Nothing selected",
@@ -291,7 +392,6 @@ var DEFAULTS = {
 				dropHint: "Drag files or a folder here to upload.",
 				readOnlyHint: "You have read-only access to this storage.",
 				connectionIssue: "Connection issue",
-				tryAgain: "Try again",
 				shareThisFile: "Share this file"
 			},
 			upload: {
@@ -301,9 +401,7 @@ var DEFAULTS = {
 				eta: "ETA:",
 				uploading: "Uploading...",
 				completeTitle: "Upload Complete!",
-				completeShort: "Completed",
 				failedTitle: "Upload Failed",
-				failedShort: "Failed",
 				unknownTitle: "Unknown Status",
 				unknownShort: "Unknown",
 				cancelled: "Cancelled",
@@ -311,7 +409,8 @@ var DEFAULTS = {
 				failed: "Failed",
 				totalSize: "Total size:",
 				size: "Size:",
-				calculating: "Calculating...",
+				calculating: "Calculating…",
+				almostDone: "Almost done",
 				expandDetails: "Expand details",
 				minimizeDetails: "Minimize details",
 				sessionNotQueued: (id, status) => `Upload session with ID ${id} is not queued, current status is ${status}`,
@@ -323,17 +422,36 @@ var DEFAULTS = {
 				failReasonGeneric: "The file(s) may be too large or the connection may have been interrupted.",
 				refreshFailed: (name, message) => `Failed to refresh storage data for ${name}. ${message}. Please try again.`,
 				unknownError: "Unknown error",
-				overallProgress: "Overall Progress"
+				overallProgress: "Overall Progress",
+				cancelFile: (name) => `Cancel ${name}`,
+				confirmCancelFile: "Cancel?",
+				confirmCancelAll: "Cancel all uploading files?",
+				filesDone: (done, total) => `${done} / ${total} files done`,
+				progress: (uploading, done, total) => uploading > 0 ? `${uploading} uploading (${done} / ${total} done)` : `${done} / ${total} done`,
+				fileCount: (count) => count === 1 ? "1 file" : `${count.toLocaleString()} files`,
+				keepPageOpen: "Please don't refresh this page during upload to prevent any data loss."
 			}
 		},
 		form: {
+			required: "Enter a value.",
+			checkValue: "Check this value.",
 			invalidDuration: "Enter a duration as DD-HH:MM:SS or HH:MM:SS.",
 			durationOutOfRange: (min, max) => `Must be between ${min} and ${max}.`,
 			durationBelowMin: (min) => `Must be at least ${min}.`,
 			copyTitle: (title, number) => `${title} ${number}`,
 			addCopy: (title) => `+ Add ${title}`,
 			removeCopy: (title) => `Remove ${title}`,
-			steps: "Steps"
+			steps: "Steps",
+			stepOf: (number, total) => `Step ${number} of ${total}`,
+			allSteps: "All steps",
+			stepDone: "Done",
+			stepNeedsAttention: "Needs a fix",
+			previousStep: "Go to previous step",
+			nextStep: "Go to next step",
+			runWizard: "Execute",
+			fixErrorsToContinue: "Please fix errors before proceeding",
+			stepFailed: "An error occurred",
+			stepLabel: (number, title) => `Step ${number}: ${title}`
 		},
 		time: {
 			now: "now",
@@ -343,10 +461,6 @@ var DEFAULTS = {
 			years: (n) => `${n}y`
 		},
 		list: {
-			copyMenu: "Copy",
-			copy: (label) => `Copy ${label}`,
-			copied: (label) => `Copied ${label}`,
-			couldntCopy: (label) => `Couldn't copy ${label}`,
 			moreActions: "More actions",
 			labelName: "name",
 			labelEmail: "email",
@@ -371,45 +485,14 @@ var DEFAULTS = {
 			displayProperties: "Display properties",
 			pinnedActions: "Pinned actions",
 			pinnedActionsHelp: "Pinned actions show as quick buttons on the right of each row (on hover), alongside the ⋯ menu. Each only appears on rows where that action is available, so a row's buttons vary by its type and status.",
-			reset: "Reset",
 			none: "None",
-			filter: "Filter",
-			clear: "Clear",
 			searchOptions: "Search options…",
 			pager: (start, end, total, atLeast) => `${start}–${end} of ${total}${atLeast ? "+" : ""}`,
 			perPage: "Per page",
 			paginationPrevious: "Previous",
 			paginationNext: "Next",
-			paginationShowing: (name, start, end) => /* @__PURE__ */ jsxs(Fragment, { children: [
-				"Showing ",
-				name,
-				" ",
-				/* @__PURE__ */ jsx("span", {
-					className: "font-medium",
-					children: start
-				}),
-				" to",
-				" ",
-				/* @__PURE__ */ jsx("span", {
-					className: "font-medium",
-					children: end
-				})
-			] }),
-			paginationShowingTimeRange: (name, startTime, endTime) => /* @__PURE__ */ jsxs(Fragment, { children: [
-				"Showing ",
-				name,
-				" from ",
-				/* @__PURE__ */ jsx("span", {
-					className: "font-medium",
-					children: startTime
-				}),
-				" to",
-				" ",
-				/* @__PURE__ */ jsx("span", {
-					className: "font-medium",
-					children: endTime
-				})
-			] })
+			pagination: "Pagination",
+			removeSearchTerm: (term) => `Remove filter ${term}`
 		}
 	},
 	navigation: {
@@ -428,14 +511,11 @@ var DEFAULTS = {
 	},
 	data: {
 		useRunFile: defaultUseRunFile,
-		usePersistedState: useLocalStoragePersistedState
+		usePersistedState: useLocalPersistedState
 	},
 	slots: {}
 };
 var UIContext = createContext(DEFAULTS);
-function useNotify() {
-	return useContext(UIContext).notify;
-}
 function useStrings() {
 	return useContext(UIContext).strings;
 }
@@ -530,17 +610,12 @@ function usePersistedState(key, defaultValue) {
 	const { usePersistedState: boundUsePersistedState } = useContext(UIContext).data;
 	return boundUsePersistedState(key, defaultValue);
 }
-function UIProvider({ notify, strings, navigation, data, slots, engine, children }) {
+function UIProvider({ strings, navigation, data, slots, engine, children }) {
 	useEffect(() => {
 		if (typeof engine === "function") loadEngine(engine);
 	}, [engine]);
 	const value = useMemo(() => ({
-		notify: {
-			...DEFAULTS.notify,
-			...notify
-		},
 		strings: {
-			loading: strings?.loading ?? DEFAULTS.strings.loading,
 			modal: {
 				...DEFAULTS.strings.modal,
 				...strings?.modal
@@ -553,6 +628,14 @@ function UIProvider({ notify, strings, navigation, data, slots, engine, children
 				...DEFAULTS.strings.dropdown,
 				...strings?.dropdown
 			},
+			datePicker: {
+				...DEFAULTS.strings.datePicker,
+				...strings?.datePicker
+			},
+			theme: {
+				...DEFAULTS.strings.theme,
+				...strings?.theme
+			},
 			logviewer: {
 				...DEFAULTS.strings.logviewer,
 				...strings?.logviewer
@@ -601,17 +684,16 @@ function UIProvider({ notify, strings, navigation, data, slots, engine, children
 		slots: slots ?? DEFAULTS.slots,
 		engine
 	}), [
-		notify,
 		strings,
 		navigation,
 		data,
 		slots,
 		engine
 	]);
-	return /* @__PURE__ */ jsx(UIContext.Provider, {
+	return /* @__PURE__ */ jsxs(UIContext.Provider, {
 		value,
-		children: /* @__PURE__ */ jsx(TooltipProvider, { children })
+		children: [/* @__PURE__ */ jsx(TooltipProvider, { children }), /* @__PURE__ */ jsx(Toaster, {})]
 	});
 }
 //#endregion
-export { UIProvider, useLink, useLoadedWorkflowEngine, useNavigation, useNotify, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRepoSuggestions, useRunFile, useSecretVariablesResolver, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader, useWorkflowJsonResolver };
+export { UIProvider, useLink, useLoadedWorkflowEngine, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRepoSuggestions, useRunFile, useSecretVariablesResolver, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader, useWorkflowJsonResolver };

package/dist/components/Radio.d.ts

@@ -4,5 +4,5 @@ export interface RadioProps<Value> extends Omit<BaseRadio.Root.Props<Value>, 'cl
     className?: string | undefined;
 }
 /** One choice in a `RadioGroup`, which holds the value. Name it with an
- *  enclosing `<label>`. */
+ *  enclosing `<label>`, or a `FieldOption` inside a `Field`. */
 export declare function Radio<Value>({ className, ...props }: RadioProps<Value>): import("react").JSX.Element;

package/dist/components/Radio.js

@@ -1,15 +1,15 @@
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
 import { jsx } from "react/jsx-runtime";
 import { Radio } from "@base-ui/react/radio";
 import { RadioGroup } from "@base-ui/react/radio-group";
 //#region src/components/Radio.tsx
 /** One choice in a `RadioGroup`, which holds the value. Name it with an
-*  enclosing `<label>`. */
+*  enclosing `<label>`, or a `FieldOption` inside a `Field`. */
 function Radio$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Radio.Root, {
 		...props,
-		className: clsx("flex size-4 shrink-0 items-center justify-center rounded-full border border-(--theme-border) bg-(--theme-input-bg) cursor-pointer outline-none transition-colors", "data-checked:border-(--theme-element) data-checked:bg-(--theme-element)", "focus-visible:ring-2 focus-visible:ring-(--theme-focus-ring) aria-invalid:border-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
-		children: /* @__PURE__ */ jsx(Radio.Indicator, { className: "size-1.5 rounded-full bg-(--theme-element-text)" })
+		className: cx("flex size-4 shrink-0 items-center justify-center rounded-full border border-(--theme-border) bg-(--theme-input-bg) cursor-pointer outline-none transition-colors", "data-checked:border-(--theme-accent) data-checked:bg-(--theme-accent)", "focus-visible:ring-2 focus-visible:ring-(--theme-focus-ring) aria-invalid:border-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		children: /* @__PURE__ */ jsx(Radio.Indicator, { className: "size-1.5 rounded-full bg-(--theme-accent-text)" })
 	});
 }
 //#endregion

package/dist/components/RefreshButton.d.ts

@@ -0,0 +1,15 @@
+import { type ButtonSize } from './buttonClasses.js';
+export interface RefreshButtonProps {
+    /** May return a promise; the button spins until it settles. */
+    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;
+    size?: ButtonSize | undefined;
+    /** Only the icon shows, with "Refresh" as its name and tooltip. */
+    iconOnly?: boolean | 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;

package/dist/components/RefreshButton.js

@@ -0,0 +1,53 @@
+import { cx } from "../cx.js";
+import { RefreshIcon } from "../icons.js";
+import { buttonClasses } from "./buttonClasses.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 { useEffect, useRef, useState } from "react";
+//#region src/components/RefreshButton.tsx
+/** Fetches again on demand, and says so while it does, out loud too. */
+function RefreshButton({ onRefresh, refreshing = false, updatedAt, size = "md", iconOnly = false }) {
+	const { common: t } = useStrings();
+	const [pending, setPending] = useState(false);
+	const mounted = useRef(true);
+	useEffect(() => () => {
+		mounted.current = false;
+	}, []);
+	const busy = refreshing || pending;
+	const ago = useRelativeTime(updatedAt);
+	const refresh = () => {
+		if (busy) return;
+		const result = onRefresh();
+		if (result instanceof Promise) {
+			setPending(true);
+			result.finally(() => mounted.current && setPending(false));
+		}
+	};
+	const button = /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: refresh,
+		"aria-busy": busy,
+		"aria-label": iconOnly ? t.refresh : void 0,
+		className: cx(buttonClasses({
+			variant: "ghost",
+			size,
+			iconOnly
+		}), "group aria-busy:cursor-progress"),
+		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 ? t.updated(ago) : t.refresh)]
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [iconOnly ? /* @__PURE__ */ jsx(Tooltip, {
+		content: t.refresh,
+		children: button
+	}) : button, /* @__PURE__ */ jsx("span", {
+		role: "status",
+		className: "sr-only",
+		children: busy ? t.refreshing : ""
+	})] });
+}
+//#endregion
+export { RefreshButton };

package/dist/components/RunStatusIcon.d.ts

@@ -0,0 +1,12 @@
+import type { RunStatus } from '../engine.js';
+import { type Tone } from './tone.js';
+/** 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;
+    className?: string | undefined;
+}): import("react").JSX.Element;