@parallelworks/ui 0.51.0 → 0.53.0

package/dist/components/Provider.js

@@ -3,15 +3,26 @@ 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, useMemo, useState } from "react";
+import { createContext, use, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { dequal } from "dequal";
 //#region src/components/Provider.tsx
+var isGroup = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+function mergeStrings(defaults, overrides) {
+	if (!isGroup(overrides) || !isGroup(defaults)) return defaults;
+	const merged = { ...defaults };
+	for (const [key, value] of Object.entries(overrides)) {
+		if (value === void 0) continue;
+		merged[key] = isGroup(value) && isGroup(merged[key]) ? mergeStrings(merged[key], value) : value;
+	}
+	return merged;
+}
 var DefaultLink = ({ href, ...rest }) => /* @__PURE__ */ jsx("a", {
 	href: safeUrl(href),
 	...rest
 });
 /** The provider's link slot, with a plain anchor fallback. */
 function useLink() {
-	return useContext(UIContext).slots.link ?? DefaultLink;
+	return useContext(SlotsContext).link ?? DefaultLink;
 }
 var defaultUseRunFile = () => ({
 	data: void 0,
@@ -84,6 +95,13 @@ var DEFAULTS = {
 			remove: "Remove",
 			sort: "Sort",
 			userAvatar: "User avatar",
+			presence: {
+				online: "online",
+				offline: "offline",
+				busy: "busy",
+				away: "away"
+			},
+			withPresence: (name, presence) => `${name}, ${presence}`,
 			moreInfo: "More information",
 			actions: "Actions",
 			edit: "Edit",
@@ -92,9 +110,12 @@ var DEFAULTS = {
 			clearSearch: "Clear search",
 			filterPlaceholder: "Filter…",
 			breadcrumb: "Breadcrumb",
+			showFullPath: "Show full path",
 			yes: "Yes",
 			no: "No",
 			opensInNewTab: "(opens in a new tab)",
+			codeEditor: "Code editor",
+			readOnlyText: "This text is read-only.",
 			resizePanel: "Resize panel",
 			panelWidth: (px) => `${px} pixels wide`,
 			refresh: "Refresh",
@@ -106,7 +127,8 @@ var DEFAULTS = {
 			noOptionsFound: "No options found",
 			showOptions: "Show options",
 			add: (text) => `Add “${text}”`,
-			limitReached: (max) => `Up to ${max}`
+			limitReached: (max) => `Up to ${max}`,
+			removeValue: (label) => `Remove ${label}`
 		},
 		datePicker: {
 			pickDate: "Pick a date",
@@ -176,9 +198,9 @@ var DEFAULTS = {
 			top: "Top",
 			clearSelection: "Clear selection",
 			copyLines: (count) => count === 1 ? "Copy 1 line" : `Copy ${count} lines`,
-			copyAll: "Copy All",
-			hideDebug: "Hide Debug",
-			showDebug: "Show Debug",
+			copyAll: "Copy all",
+			hideDebug: "Hide debug",
+			showDebug: "Show debug",
 			filterLogs: "Filter logs",
 			beginningOfLog: "Beginning of log",
 			loadingOlderEntries: "Loading older entries…",
@@ -195,7 +217,8 @@ var DEFAULTS = {
 			endBeforeStart: "End time must be after the start time.",
 			endInFuture: "End time cannot be in the future.",
 			follow: "Follow",
-			following: "Following"
+			following: "Following",
+			selectLine: (line) => `Select line ${line}`
 		},
 		dag: {
 			workflow: "Workflow",
@@ -203,7 +226,7 @@ var DEFAULTS = {
 			status: "Status",
 			runtime: "Runtime",
 			submitted: "Submitted",
-			resetView: "Reset View",
+			resetView: "Reset view",
 			previousGraph: "Back to the previous graph",
 			nextGraph: "Forward to the next graph",
 			matrixOf: (name) => `Matrix: ${name}`,
@@ -227,6 +250,23 @@ var DEFAULTS = {
 				warning: "Warning",
 				notice: "Notice"
 			},
+			annotationsLabel: ({ error, warning, notice }) => `Annotations: ${[
+				[
+					error,
+					"error",
+					"errors"
+				],
+				[
+					warning,
+					"warning",
+					"warnings"
+				],
+				[
+					notice,
+					"notice",
+					"notices"
+				]
+			].filter(([count]) => count).map(([count, one, many]) => `${count} ${count === 1 ? one : many}`).join(", ")}`,
 			annotationSource: (job, step) => `in ${job} → ${step}`,
 			stepNumber: (index) => `step ${index}`
 		},
@@ -245,12 +285,13 @@ var DEFAULTS = {
 				select: (name) => `Select ${name}`,
 				viewDetails: "View details",
 				openFolder: "Open folder",
+				link: "link",
 				detailsTab: "Details",
 				previewTab: "Preview",
 				preview: "Preview",
 				openFullPreview: "Open full preview",
 				previewLayout: "Preview layout",
-				quickLook: "Quick Look",
+				compact: "Compact",
 				fullWindow: "Full window",
 				streamed: "Streamed",
 				streamedTooltip: "Streamed securely to your browser over a short-lived signed URL — never written to disk.",
@@ -298,12 +339,12 @@ var DEFAULTS = {
 			uri: "URI",
 			cors: {
 				explanation: {
-					title: "CORS Configuration Required",
+					title: "CORS configuration required",
 					description: "This storage location cannot be accessed from the browser because it is missing Cross-Origin Resource Sharing (CORS) rules.",
 					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: { 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.",
@@ -341,7 +382,7 @@ var DEFAULTS = {
 				noItemsForDeletion: "No items selected for deletion.",
 				deleting: "Deleting item(s) from storage...",
 				deleteSomeFailed: "Failed to delete one or more items. Please try again.",
-				deleteSuccess: "Deleted item(s) from storage successfully!",
+				deleteSuccess: "Deleted from storage.",
 				deleteFailed: (message) => `Failed to delete item(s): ${message}`,
 				noFilesToUpload: "No files to upload or target path not selected.",
 				invalidUploadTarget: "This target path is not valid for upload.",
@@ -351,14 +392,16 @@ var DEFAULTS = {
 				corsNoStorage: "No storage selected",
 				corsAdded: "CORS rules added successfully",
 				corsPropagating: "CORS rules were added, but are still propagating. Try again in a moment.",
-				previewUnsupported: "Preview is not supported for this storage."
+				previewUnsupported: "Preview is not supported for this storage.",
+				loadFailed: (name, message) => `Failed to load contents for ${name}: ${message}`,
+				unknownError: "Unknown error"
 			},
 			chrome: {
 				explorer: "Explorer",
 				upload: "Upload",
 				downloadFromBrowser: "From browser",
 				access: "Access",
-				manageAccess: "Manage Access",
+				manageAccess: "Manage access",
 				selectAll: "Select all",
 				name: "Name",
 				size: "Size",
@@ -373,21 +416,25 @@ var DEFAULTS = {
 				storageClass: "Storage class",
 				details: "Details",
 				selectFiles: "Select files",
-				selectFolder: "Select folder"
+				selectFolder: "Select folder",
+				files: "Files",
+				folders: "Folders",
+				location: "Location",
+				shareHelp: "This will generate a pre-signed URL for this file. Anyone with this link can temporarily access and download the file, even if they don't have an account. The link will automatically expire after 12 hours."
 			},
 			confirmUpload: {
-				title: "Confirm Upload",
+				title: "Confirm upload",
 				text: (path) => `Please confirm the following objects you want to upload to ${path}.`,
 				defaultPath: "the selected path",
 				noPath: "No path selected",
 				confirm: "Confirm",
 				target: "Target:",
-				sizeLimitTitle: "Upload Size Limit Exceeded",
+				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",
+				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."
 			},
 			empty: {
@@ -400,14 +447,14 @@ var DEFAULTS = {
 				shareThisFile: "Share this file"
 			},
 			upload: {
-				inQueue: (position, total) => `In Queue (#${position} of ${total})`,
+				inQueue: (position, total) => `In queue (#${position} of ${total})`,
 				queuedShort: (position, total) => `Queued #${position} / ${total}`,
 				destination: "Destination:",
 				eta: "ETA:",
 				uploading: "Uploading...",
-				completeTitle: "Upload Complete!",
-				failedTitle: "Upload Failed",
-				unknownTitle: "Unknown Status",
+				completeTitle: "Upload complete",
+				failedTitle: "Upload failed",
+				unknownTitle: "Unknown status",
 				unknownShort: "Unknown",
 				canceled: "Canceled",
 				completed: "Completed",
@@ -420,14 +467,14 @@ var DEFAULTS = {
 				minimizeDetails: "Minimize details",
 				sessionNotQueued: (id, status) => `Upload session with ID ${id} is not queued, current status is ${status}`,
 				allCanceled: (count) => `All ${count} file(s) were canceled by user.`,
-				someUploaded: (count) => `${count} file(s) uploaded successfully!`,
+				someUploaded: (count) => `${count} file(s) uploaded.`,
 				someCanceled: (count) => `${count} file(s) canceled by user.`,
-				allUploaded: "Upload file(s) successfully!",
+				allUploaded: "Uploaded the file(s).",
 				failedSummary: (failed, total) => `${failed}/${total} files failed to upload:`,
 				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?",
@@ -451,8 +498,6 @@ var DEFAULTS = {
 			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",
@@ -474,6 +519,9 @@ var DEFAULTS = {
 			labelId: "ID",
 			labelUrl: "URL",
 			couldNotLoad: (noun) => `Couldn't load ${noun}`,
+			data: "data",
+			count: (count, noun) => `${count} ${noun}`,
+			matchCount: (matches, total, nounPlural) => `${matches} of ${total} ${nounPlural}`,
 			displayOptions: "Display options",
 			grouping: "Grouping",
 			ordering: "Ordering",
@@ -483,6 +531,7 @@ var DEFAULTS = {
 			descending: "Descending",
 			columnHeaders: "Column headers",
 			showColumnHeaders: "Show column headers",
+			selectAll: "Select all",
 			showActions: "Show actions",
 			showRowActions: "Show row actions",
 			alwaysShowActions: "Always show actions",
@@ -520,28 +569,32 @@ var DEFAULTS = {
 	},
 	slots: {}
 };
-var UIContext = createContext(DEFAULTS);
+var StringsContext = createContext(DEFAULTS.strings);
+var NavigationContext = createContext(DEFAULTS.navigation);
+var DataContext = createContext(DEFAULTS.data);
+var SlotsContext = createContext(DEFAULTS.slots);
+var EngineContext = createContext(void 0);
 function useStrings() {
-	return useContext(UIContext).strings;
+	return useContext(StringsContext);
 }
 function useNavigation() {
-	return useContext(UIContext).navigation;
+	return useContext(NavigationContext);
 }
 function useWorkflowJsonResolver() {
-	return useContext(UIContext).data.resolveWorkflowJson;
+	return useContext(DataContext).resolveWorkflowJson;
 }
 function useRepoSuggestions() {
-	return useContext(UIContext).data.repoSuggestions;
+	return useContext(DataContext).repoSuggestions;
 }
 var NO_ACTIONS = {};
 function useWorkflowActions() {
-	return useContext(UIContext).data.workflowActions ?? NO_ACTIONS;
+	return useContext(DataContext).workflowActions ?? NO_ACTIONS;
 }
 function useSecretVariablesResolver() {
-	return useContext(UIContext).data.resolveSecretVariables;
+	return useContext(DataContext).resolveSecretVariables;
 }
 function useSlots() {
-	return useContext(UIContext).slots;
+	return useContext(SlotsContext);
 }
 var loadedEngines = /* @__PURE__ */ new WeakMap();
 function loadEngine(load) {
@@ -563,18 +616,18 @@ function resolveEngine(source) {
 }
 /** The engine when one is provided and `enabled`; suspends while a loader resolves. */
 function useOptionalWorkflowEngine(enabled = true) {
-	const source = useContext(UIContext).engine;
+	const source = useContext(EngineContext);
 	if (!enabled || !source) return;
 	return resolveEngine(source);
 }
 function useWorkflowEngine() {
-	const source = useContext(UIContext).engine;
+	const source = useContext(EngineContext);
 	if (!source) throw new Error("Workflow forms and graphs need a UIProvider with an engine.");
 	return resolveEngine(source);
 }
 /** The engine once it has loaded, without suspending; renders again when a loader resolves. */
 function useLoadedWorkflowEngine() {
-	const source = useContext(UIContext).engine;
+	const source = useContext(EngineContext);
 	const [, setLoaded] = useState(0);
 	const entry = typeof source === "function" ? loadEngine(source) : void 0;
 	const engine = typeof source === "function" ? entry?.engine : source;
@@ -598,114 +651,71 @@ function useWorkflowEditing() {
 }
 /** Resolves the engine without suspending, for async callers such as editor completions. */
 function useWorkflowEngineLoader() {
-	const source = useContext(UIContext).engine;
+	const source = useContext(EngineContext);
 	return useCallback(async () => {
 		if (!source) return;
 		return typeof source === "function" ? loadEngine(source).promise : source;
 	}, [source]);
 }
 function useProvisionCorsRules() {
-	return useContext(UIContext).data.provisionCorsRules;
+	return useContext(DataContext).provisionCorsRules;
 }
 function useRunFile(slug, path, options) {
-	const { useRunFile: boundUseRunFile } = useContext(UIContext).data;
+	const { useRunFile: boundUseRunFile } = useContext(DataContext);
 	return boundUseRunFile(slug, path, options);
 }
 function usePersistedState(key, defaultValue) {
-	const { usePersistedState: boundUsePersistedState } = useContext(UIContext).data;
+	const { usePersistedState: boundUsePersistedState } = useContext(DataContext);
 	return boundUsePersistedState(key, defaultValue);
 }
-function UIProvider({ strings, navigation, data, slots, engine, children }) {
+function useByValue(value) {
+	const ref = useRef(value);
+	if (ref.current !== value && !dequal(ref.current, value)) ref.current = value;
+	return ref.current;
+}
+function useMerged(compute, input) {
+	const stableInput = useByValue(input);
+	const ref = useRef(null);
+	if (!ref.current || ref.current.input !== stableInput) ref.current = {
+		input: stableInput,
+		value: compute()
+	};
+	return ref.current.value;
+}
+function UIProvider({ strings, navigation, data, slots, engine: engineProp, children }) {
+	const [firstLoader] = useState(() => typeof engineProp === "function" ? engineProp : void 0);
+	const engine = typeof engineProp === "function" ? firstLoader ?? engineProp : engineProp;
 	useEffect(() => {
 		if (typeof engine === "function") loadEngine(engine);
 	}, [engine]);
-	const value = useMemo(() => ({
-		strings: {
-			modal: {
-				...DEFAULTS.strings.modal,
-				...strings?.modal
-			},
-			common: {
-				...DEFAULTS.strings.common,
-				...strings?.common
-			},
-			dropdown: {
-				...DEFAULTS.strings.dropdown,
-				...strings?.dropdown
-			},
-			datePicker: {
-				...DEFAULTS.strings.datePicker,
-				...strings?.datePicker
-			},
-			colorInput: {
-				...DEFAULTS.strings.colorInput,
-				...strings?.colorInput
-			},
-			oneTimeCode: {
-				...DEFAULTS.strings.oneTimeCode,
-				...strings?.oneTimeCode
-			},
-			theme: {
-				...DEFAULTS.strings.theme,
-				...strings?.theme
-			},
-			logviewer: {
-				...DEFAULTS.strings.logviewer,
-				...strings?.logviewer
-			},
-			dag: {
-				...DEFAULTS.strings.dag,
-				...strings?.dag
-			},
-			jobActions: {
-				...DEFAULTS.strings.jobActions,
-				...strings?.jobActions
-			},
-			graphEditor: {
-				...DEFAULTS.strings.graphEditor,
-				...strings?.graphEditor
-			},
-			inputsEditor: {
-				...DEFAULTS.strings.inputsEditor,
-				...strings?.inputsEditor
-			},
-			fileExplorer: {
-				...DEFAULTS.strings.fileExplorer,
-				...strings?.fileExplorer
-			},
-			form: {
-				...DEFAULTS.strings.form,
-				...strings?.form
-			},
-			time: {
-				...DEFAULTS.strings.time,
-				...strings?.time
-			},
-			list: {
-				...DEFAULTS.strings.list,
-				...strings?.list
-			}
-		},
-		navigation: {
-			...DEFAULTS.navigation,
-			...navigation
-		},
-		data: {
-			...DEFAULTS.data,
-			...data
-		},
-		slots: slots ?? DEFAULTS.slots,
-		engine
-	}), [
-		strings,
-		navigation,
-		data,
-		slots,
-		engine
-	]);
-	return /* @__PURE__ */ jsxs(UIContext.Provider, {
-		value,
-		children: [/* @__PURE__ */ jsx(TooltipProvider, { children }), /* @__PURE__ */ jsx(Toaster, {})]
+	const mergedStrings = useMerged(() => mergeStrings(DEFAULTS.strings, strings), strings);
+	const mergedData = useMerged(() => ({
+		...DEFAULTS.data,
+		...data
+	}), data);
+	const stableSlots = useByValue(slots ?? DEFAULTS.slots);
+	const navigationRef = useRef(navigation);
+	navigationRef.current = navigation;
+	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)
+	}));
+	return /* @__PURE__ */ jsx(StringsContext, {
+		value: mergedStrings,
+		children: /* @__PURE__ */ jsx(NavigationContext, {
+			value: stableNavigation,
+			children: /* @__PURE__ */ jsx(DataContext, {
+				value: mergedData,
+				children: /* @__PURE__ */ jsx(SlotsContext, {
+					value: stableSlots,
+					children: /* @__PURE__ */ jsxs(EngineContext, {
+						value: engine,
+						children: [/* @__PURE__ */ jsx(TooltipProvider, { children }), /* @__PURE__ */ jsx(Toaster, {})]
+					})
+				})
+			})
+		})
 	});
 }
 //#endregion

package/dist/components/Radio.js

@@ -1,4 +1,5 @@
 import { cx } from "../cx.js";
+import { focusOutline } from "./fieldBox.js";
 import { jsx } from "react/jsx-runtime";
 import { Radio } from "@base-ui/react/radio";
 import { RadioGroup } from "@base-ui/react/radio-group";
@@ -8,7 +9,7 @@ import { RadioGroup } from "@base-ui/react/radio-group";
 function Radio$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Radio.Root, {
 		...props,
-		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),
+		className: cx("flex size-4 shrink-0 items-center justify-center rounded-full border border-(--theme-border-strong) bg-(--theme-input-bg) cursor-pointer transition-colors motion-reduce:transition-none", focusOutline, "data-checked:border-(--theme-accent) data-checked:bg-(--theme-accent)", "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)" })
 	});
 }

package/dist/components/RefreshButton.js

@@ -1,20 +1,16 @@
 import { cx } from "../cx.js";
-import { RefreshIcon } from "../icons.js";
 import { buttonClasses } from "./buttonClasses.js";
+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 { useEffect, useRef, useState } from "react";
+import { 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 = () => {
@@ -22,7 +18,7 @@ function RefreshButton({ onRefresh, refreshing = false, updatedAt, size = "md",
 		const result = onRefresh();
 		if (result instanceof Promise) {
 			setPending(true);
-			result.finally(() => mounted.current && setPending(false));
+			result.finally(() => setPending(false));
 		}
 	};
 	const button = /* @__PURE__ */ jsxs("button", {
@@ -38,7 +34,10 @@ function RefreshButton({ onRefresh, refreshing = false, updatedAt, size = "md",
 		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)]
+		}), !iconOnly && (ago ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+			className: "sr-only",
+			children: [t.refresh, ". "]
+		}), t.updated(ago)] }) : t.refresh)]
 	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [iconOnly ? /* @__PURE__ */ jsx(Tooltip, {
 		content: t.refresh,

package/dist/components/RequiredMark.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 function RequiredMark() {
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
-		className: "ml-0.5 text-(--theme-error)",
+		className: "ml-0.5 text-(--theme-error-text)",
 		children: "*"
 	});
 }

package/dist/components/Section.js

@@ -75,7 +75,7 @@ function Section({ title, description, beside, actions, variant = "plain", colla
 			children: /* @__PURE__ */ jsxs(Collapsible.Trigger, {
 				...titleProps,
 				"aria-describedby": describedBy,
-				className: cx("group flex min-w-0 cursor-pointer items-center gap-1 text-left", fill && "w-full", titleClasses[variant], foldedTitleClasses[variant]),
+				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]),
 				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]")

package/dist/components/Select.d.ts

@@ -1,14 +1,9 @@
 import { Select as BaseSelect } from '@base-ui/react/select';
-import type { ReactElement, ReactNode } from 'react';
+import { type ReactElement, type ReactNode } from 'react';
+import { type ComboboxItem } from './comboboxItems.js';
 import { type FieldBoxSize } from './fieldBox.js';
-export interface SelectItem<Value> {
-    value: Value;
-    label: string;
-    /** A second line under the label, such as what an option does. */
-    description?: string | undefined;
-    icon?: ReactNode;
-    disabled?: boolean | undefined;
-}
+/** An option of a Select: the same shape as a Combobox's, so a list moves between them as is. */
+export type SelectItem<Value> = ComboboxItem<Value>;
 export type SelectProps<Value, Multiple extends boolean | undefined = false> = Omit<BaseSelect.Root.Props<Value, Multiple>, 'items' | 'children'> & {
     items: readonly SelectItem<Value>[];
     placeholder?: string | undefined;

package/dist/components/Select.js

@@ -1,15 +1,18 @@
 import { cx } from "../cx.js";
 import { CheckIcon, ChevronDownIcon } from "../icons.js";
-import { panelClassName, panelItemClassName, positionerClassName } from "./floating.js";
+import { panelClassName, positionerClassName } from "./floating.js";
 import { Tooltip } from "./Tooltip.js";
 import { fieldBox } from "./fieldBox.js";
+import { pickerItemClassName } from "./comboboxItems.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { Select } from "@base-ui/react/select";
 //#region src/components/Select.tsx
 var triggerClassName = "flex cursor-pointer items-center justify-between gap-2 pr-1.5 text-left";
 /** Picks one value, or several with `multiple`, from a short list. Use
 *  Combobox when the list is long enough to need filtering. */
 function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-required": required, trigger, triggerTooltip, size = "md", onItemHighlighted, ...rootProps }) {
+	const uid = useId();
 	const labelOf = (value) => items.find((item) => Object.is(item.value, value))?.label;
 	const triggerProps = {
 		"aria-label": ariaLabel,
@@ -50,26 +53,36 @@ function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "ari
 				className: cx("min-w-(--anchor-width) max-w-[min(20rem,var(--available-width))]", panelClassName),
 				children: /* @__PURE__ */ jsx(Select.List, {
 					className: "max-h-[min(15rem,var(--available-height))] overflow-y-auto py-1",
-					children: items.map((item) => /* @__PURE__ */ jsxs(Select.Item, {
+					children: items.map((item, index) => /* @__PURE__ */ jsxs(Select.Item, {
 						value: item.value,
 						disabled: item.disabled,
+						"aria-labelledby": `${uid}${index}label`,
+						"aria-describedby": item.description && `${uid}${index}description`,
 						onFocus: onItemHighlighted && (() => onItemHighlighted(item.value)),
-						className: cx("grid grid-cols-[1rem_1fr]", panelItemClassName),
+						className: pickerItemClassName,
 						children: [
-							/* @__PURE__ */ jsx(Select.ItemIndicator, {
-								className: "col-start-1",
-								children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
+							item.icon && /* @__PURE__ */ jsx("span", {
+								className: "flex shrink-0 items-center",
+								children: item.icon
 							}),
 							/* @__PURE__ */ jsxs("span", {
-								className: "col-start-2 flex min-w-0 items-center gap-2",
-								children: [item.icon, /* @__PURE__ */ jsx(Select.ItemText, {
+								className: "flex min-w-0 flex-col",
+								children: [/* @__PURE__ */ jsx(Select.ItemText, {
+									id: `${uid}${index}label`,
 									className: "truncate",
 									children: item.label
+								}), item.description && /* @__PURE__ */ jsx("span", {
+									id: `${uid}${index}description`,
+									className: "text-xs leading-snug text-(--theme-muted-text-color)",
+									children: item.description
 								})]
 							}),
-							item.description && /* @__PURE__ */ jsx("span", {
-								className: "col-start-2 text-xs text-(--theme-muted-text-color)",
-								children: item.description
+							/* @__PURE__ */ jsx(Select.ItemIndicator, {
+								className: "ml-auto flex shrink-0 items-center",
+								children: /* @__PURE__ */ jsx(CheckIcon, {
+									"aria-hidden": "true",
+									className: "size-3.5"
+								})
 							})
 						]
 					}, String(item.value)))

package/dist/components/SettingModeOption.d.ts

@@ -4,5 +4,5 @@ export declare function SettingModeOption({ value, label, description, disabled,
     value: string;
     label: string;
     description: string;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }): import("react").JSX.Element;