@rebasepro/admin 0.14.0 → 0.14.1-canary.g7e666eb

package/dist/{util-C-D5yD2n.js → util-WQP-ljKW.js}

@@ -2,7 +2,7 @@ import * as React$1 from "react";
 import React, { Suspense, createContext, createElement, forwardRef, lazy, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { deepEqual } from "fast-equals";
 import { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, Badge, BooleanSwitchWithLabel, Button, CHIP_COLORS, CHIP_SEED_KEYS, CalendarIcon, Card, CardView, CenteredView, CheckCircleIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, Chip, CircleIcon, CircularProgress, CircularProgressCenter, CodeIcon, Collapse, ColumnsIcon, CopyIcon, DateTimeField, Dialog, DialogActions, DialogContent, DialogTitle, ErrorBoundary, ExpandablePanel, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FilterXIcon, FlagIcon, FolderUpIcon, FunctionSquareIcon, GlobeIcon, HandleIcon, HashIcon, HistoryIcon, IconButton, ImageOffIcon, KanbanIcon, KanbanView, KeyRoundIcon, Label, LayoutGridIcon, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, ListView, LoadingButton, LucideIconByName, MailIcon, Markdown, Maximize2Icon, Menu, MenuItem, MinusIcon, MoreVerticalIcon, MultiSelect, MultiSelectItem, PanelLeftCloseIcon, PanelLeftOpenIcon, PencilIcon, PlusIcon, Popover, PopoverPrimitive, Portal, QuoteIcon, RadioGroup, RadioGroupItem, RefreshCwIcon, RepeatIcon, ResizablePanels, Rows3Icon, SearchBar, SearchIcon, Select, SelectItem, Separator, SettingsIcon, Sheet, Skeleton, Tab, Table, TableBody, TableCell, TableHeader, TableIcon, TableRow, Tabs, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, Typography, Unlink2Icon, UploadIcon, UserIcon, VirtualTable, VirtualTableDateField, VirtualTableInput, VirtualTableInput as VirtualTableInput$1, VirtualTableNumberInput, VirtualTableSwitch, VoteIcon, XCircleIcon, XIcon, cls, coolIconKeys, createVirtualTableSelectionStore, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedDisabled, getColorSchemeForSeed, iconSize, paperMixin, useDebouncedCallback, useOutsideAlerter, usePortalContainer } from "@rebasepro/ui";
-import { CollectionRegistry, DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE, canReadCollection, enumToObjectEntries, getArrayResolvedProperties, getDefaultValueFor, getDefaultValueFortype, getDefaultValuesFor, getEntityChildViews, getLabelOrConfigFrom, getReferenceFrom, getRelationFrom, getRelationTargetPath, getSubcollections, getTableName, isPropertyBuilder, normalizeToEntityRelation, resolveArrayProperties, resolveEnumValues, resolveProperty, resolveRelationProperty, resolveStorageFilenameString, resolveStoragePathString, resolveStorageSource } from "@rebasepro/common";
+import { CollectionRegistry, DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE, canReadCollection, enumToObjectEntries, getArrayResolvedProperties, getDefaultValueFor, getDefaultValueFortype, getDefaultValuesFor, getEntityChildViews, getLabelOrConfigFrom, getReferenceFrom, getRelationFrom, getRelationTargetPath, getSubcollections, getTableName, isPropertyBuilder, normalizeOrderBy, normalizeToEntityRelation, resolveArrayProperties, resolveEnumValues, resolveProperty, resolveRelationProperty, resolveStorageFilenameString, resolveStoragePathString, resolveStorageSource, serializeOrderBy } from "@rebasepro/common";
 import { CONTAINER_FULL_WIDTH, CollectionScopeProvider, DEFAULT_PAGE_SIZE, EntityDisplayCache, ErrorTooltip, ErrorView, IconForView, PluginProviderStack, SIDE_PANEL_DEFAULT_WIDTH, StorageSourceContext, UnsavedChangesDialog, UserDisplay, addInitialSlash, apiBaseOf, buildEnumLabel, createFormexStub, deleteEntityWithCallbacks, entityDisplayKey, flattenKeys, getAdminEntityChildViews, getCollectionBySlugWithin, getCollectionPathsCombinations, getColorScheme, getColumnKeysForProperty, getDisplayPropertyKey, getDisplayResolver, getEntityFromCache, getEntityFromMemoryCache, getEntityImagePreviewPropertyKey, getEntityPreviewKeys, getFormFieldKeys, getIcon, getLastSegment as getLastSegment$1, getLeadingRelationTitleKey, getLocalChangesBackup, getNavigationEntriesFromPath, getParentReferencesFromPath, getPropertyInPath, getRedundantChildViewColumnIds, getRelationIncludeParams, getRowHeight, getTitlePropertyCandidates, getTitlePropertyKey, getTitlePropertyKeyForValues, hasDeclaredDisplay, iconsSearch, isDisabled, isFilterableRelation, isHidden, isReadOnly, looksLikeIdentifierValue, removeEntityFromCache, removeEntityFromMemoryCache, removeInitialAndTrailingSlashes, removeInitialAndTrailingSlashes as removeInitialAndTrailingSlashes$1, removeInitialSlash, removeTrailingSlash, removeTrailingSlash as removeTrailingSlash$1, resolveCollectionPathIds, resolveCollectionPathIds as resolveCollectionPathIds$1, resolveComponentRef, resolveDefaultSelectedView, resolveFilterOperators, resolveFormLayout, saveEntityToCache, saveEntityToMemoryCache, saveEntityWithCallbacks, useAnalyticsController, useApiBase, useApiConfig, useAuthController, useCollectionScope, useColumnIds, useComponentOverride, useCustomizationController, useData, useDataTableController, useFetch, useLargeLayout, useModeController, useNavigationBlocker, usePermissions, useRebaseClient, useRebaseContext, useRelationSelector, useResolvedComponent, useScrollRestoration, useSlot, useSnackbarController, useStorageSource, useStorageSources, useStorageUploadController, useTranslation, useUnsavedChangesDialog, useUserConfigurationPersistence } from "@rebasepro/app";
 import { Field, Formex, getIn, setIn, useCreateFormex, useFormex } from "@rebasepro/forms";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -9318,8 +9318,8 @@ function EditorCollectionAction({ path, parentCollectionSlugs, parentEntityIds,
 }
 //#endregion
 //#region src/components/CollectionViewBinding/CollectionViewActions.tsx
-var ImportCollectionAction = lazy(() => import("./import-C_4edkoD.js").then((n) => n.t).then((m) => ({ default: m.ImportCollectionAction })));
-var ExportCollectionAction = lazy(() => import("./export-L53WektO.js").then((n) => n.t).then((m) => ({ default: m.ExportCollectionAction })));
+var ImportCollectionAction = lazy(() => import("./import-J5vb86xj.js").then((n) => n.t).then((m) => ({ default: m.ImportCollectionAction })));
+var ExportCollectionAction = lazy(() => import("./export-BDynF1En.js").then((n) => n.t).then((m) => ({ default: m.ExportCollectionAction })));
 function CollectionViewActions({ collection, relativePath, parentCollectionSlugs, parentEntityIds, onNewClick, onAddExistingClick, onMultipleDeleteClick, selectionEnabled, path, selectionController, tableController, collectionEntitiesCount, compact, children, openNewDocument }) {
 	const context = useAdminContext();
 	const { canCreate, canDelete } = usePermissions();
@@ -10397,11 +10397,8 @@ function CollectionListViewBinding({ collection, tableController, onEntityClick,
 		columnMode,
 		slotKeys.relationKeys
 	]);
-	/** The property the sort names, when no cell already shows it. */
-	const sortedKey = useMemo(() => {
-		const key = sortBy?.[0];
-		return key && !shownKeys.has(key) ? key : void 0;
-	}, [sortBy, shownKeys]);
+	/** The properties the sort names, minus the ones a cell already shows. */
+	const sortedKeys = useMemo(() => (sortBy ?? []).map(([key]) => key).filter((key) => !shownKeys.has(key)), [sortBy, shownKeys]);
 	/** The properties the filters name, minus the ones a cell already shows. */
 	const filteredKeys = useMemo(() => Object.keys(filterValues ?? {}).filter((key) => !shownKeys.has(key)), [filterValues, shownKeys]);
 	/**
@@ -10413,22 +10410,23 @@ function CollectionListViewBinding({ collection, tableController, onEntityClick,
 	* and clearing a sort says nothing about wanting to stop seeing the property
 	* it sorted on.
 	*
-	* What it does *not* do is accumulate. There is only ever one sort, so
-	* ordering by four properties in turn is changing one's mind four times, not
-	* asking for four columns — and asking for four is how the row lost its
-	* status and its date to a wall of numbers. A new sort therefore replaces
-	* the property the last one left behind, and a new set of filters replaces
-	* the set before it. At most one sort column and one set of filter columns
-	* outlive their request.
+	* What it does *not* do is accumulate. A sort names the properties it names
+	* *now*, so ordering by four properties in turn is changing one's mind four
+	* times, not asking for four columns — and asking for four is how the row
+	* lost its status and its date to a wall of numbers. A new sort therefore
+	* replaces the properties the last one left behind, and a new set of filters
+	* replaces the set before it. At most one sort's columns and one set of
+	* filter columns outlive their request.
 	*
 	* The list remounts per collection (it is keyed by path), so this is the
 	* memory of one visit to one collection, not a preference.
 	*/
-	const [lastSortedKey, setLastSortedKey] = useState(void 0);
+	const [lastSortedKeys, setLastSortedKeys] = useState([]);
 	const [lastFilteredKeys, setLastFilteredKeys] = useState([]);
 	useEffect(() => {
-		if (sortedKey) setLastSortedKey(sortedKey);
-	}, [sortedKey]);
+		if (sortedKeys.length === 0) return;
+		setLastSortedKeys((previous) => previous.length === sortedKeys.length && previous.every((key, i) => key === sortedKeys[i]) ? previous : sortedKeys);
+	}, [sortedKeys]);
 	useEffect(() => {
 		if (filteredKeys.length === 0) return;
 		setLastFilteredKeys((previous) => previous.length === filteredKeys.length && previous.every((key, i) => key === filteredKeys[i]) ? previous : filteredKeys);
@@ -10442,14 +10440,14 @@ function CollectionListViewBinding({ collection, tableController, onEntityClick,
 	* their own order, then the sort's.
 	*/
 	const requestedColumns = useMemo(() => {
-		const active = /* @__PURE__ */ new Set([...filteredKeys, ...sortedKey ? [sortedKey] : []]);
+		const active = /* @__PURE__ */ new Set([...filteredKeys, ...sortedKeys]);
 		const keys = [];
 		const request = (key) => {
 			if (!key || keys.includes(key) || shownKeys.has(key)) return;
 			keys.push(key);
 		};
 		(filteredKeys.length > 0 ? filteredKeys : lastFilteredKeys).forEach(request);
-		request(sortedKey ?? lastSortedKey);
+		(sortedKeys.length > 0 ? sortedKeys : lastSortedKeys).forEach(request);
 		return keys.flatMap((key, index) => {
 			const property = getResolvedPropertyInPath(resolvedCollection.properties, key);
 			if (!property) return [];
@@ -10465,9 +10463,9 @@ function CollectionListViewBinding({ collection, tableController, onEntityClick,
 		});
 	}, [
 		filteredKeys,
-		sortedKey,
+		sortedKeys,
 		lastFilteredKeys,
-		lastSortedKey,
+		lastSortedKeys,
 		shownKeys,
 		resolvedCollection,
 		sortableKeys
@@ -10559,20 +10557,41 @@ function CollectionListViewBinding({ collection, tableController, onEntityClick,
 	const handleRowSelectionChange = useCallback((entity, selected) => {
 		handleSelectionChange(entity, selected);
 	}, [handleSelectionChange]);
+	/** Where each sorted column sits in the order, so a header can show its rank. */
+	const sortIndex = useMemo(() => {
+		const index = /* @__PURE__ */ new Map();
+		(sortBy ?? []).forEach(([key, direction], position) => {
+			if (!index.has(key)) index.set(key, {
+				direction,
+				position
+			});
+		});
+		return index;
+	}, [sortBy]);
 	/**
 	* Order by a column, on the same cycle a table header runs: unordered →
-	* ascending → descending → unordered. Clicking a header here and clicking it
+	* ascending → descending → unordered, and shift-click to add the column
+	* under the sort already in place. Clicking a header here and clicking it
 	* in the table view have to mean the same thing, because they are the same
 	* collection under the same controller.
 	*/
-	const onColumnSort = useCallback((key) => {
+	const onColumnSort = useCallback((key, additive = false) => {
 		if (!setSortBy) return;
-		const active = sortBy?.[0] === key ? sortBy[1] : void 0;
-		setSortBy(active === "asc" ? [key, "desc"] : active === "desc" ? void 0 : [key, "asc"]);
+		const active = sortIndex.get(key)?.direction;
+		const next = active === "asc" ? "desc" : active === "desc" ? void 0 : "asc";
+		const existing = sortBy ?? [];
+		let updated;
+		if (!additive) updated = next ? [[key, next]] : void 0;
+		else if (next === void 0) updated = existing.filter(([existingKey]) => existingKey !== key);
+		else if (active === void 0) updated = [...existing, [key, next]];
+		else updated = existing.map((entry) => entry[0] === key ? [key, next] : entry);
+		if (updated?.length === 0) updated = void 0;
+		setSortBy(updated);
 		setItemCount?.(pageSize);
 	}, [
 		setSortBy,
 		sortBy,
+		sortIndex,
 		setItemCount,
 		pageSize
 	]);
@@ -10585,14 +10604,14 @@ function CollectionListViewBinding({ collection, tableController, onEntityClick,
 	const sortIsAvailable = useCallback((key) => {
 		if (!setSortBy) return false;
 		if (!checkFilterCombination) return true;
-		const active = sortBy?.[0] === key ? sortBy[1] : void 0;
+		const active = sortIndex.get(key)?.direction;
 		if (active === "desc") return true;
-		return checkFilterCombination(filterValues ?? {}, [key, active === "asc" ? "desc" : "asc"]);
+		return checkFilterCombination(filterValues ?? {}, [[key, active === "asc" ? "desc" : "asc"]]);
 	}, [
 		setSortBy,
 		checkFilterCombination,
 		filterValues,
-		sortBy
+		sortIndex
 	]);
 	return /* @__PURE__ */ jsx("div", {
 		ref: containerRef,
@@ -10619,7 +10638,7 @@ function CollectionListViewBinding({ collection, tableController, onEntityClick,
 				selectionEnabled: selectionEnabled && !combineSelection,
 				showImage,
 				actionsWidth,
-				sortBy,
+				sortIndex,
 				onColumnSort,
 				sortIsAvailable
 			}),
@@ -10926,11 +10945,12 @@ function EmptyCell() {
 * against the same widths the rows do, and skips the checkbox and the image —
 * neither is a column, and neither has anything to be called.
 */
-function ListHeader({ titleColumn, columns, selectionEnabled, showImage, actionsWidth, sortBy, onColumnSort, sortIsAvailable }) {
+function ListHeader({ titleColumn, columns, selectionEnabled, showImage, actionsWidth, sortIndex, onColumnSort, sortIsAvailable }) {
 	const headerCell = (column) => /* @__PURE__ */ jsx(ListHeaderLabel, {
 		column,
-		direction: sortBy?.[0] === column.key ? sortBy[1] : void 0,
-		onSort: column.sortable && sortIsAvailable(column.key) ? () => onColumnSort(column.key) : void 0
+		direction: sortIndex.get(column.key)?.direction,
+		position: sortIndex.size > 1 ? sortIndex.get(column.key)?.position : void 0,
+		onSort: column.sortable && sortIsAvailable(column.key) ? (additive) => onColumnSort(column.key, additive) : void 0
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: cls("flex items-center gap-4 px-5 py-1.5 select-none border-b bg-surface-50 dark:bg-surface-900", defaultBorderMixin),
@@ -10962,7 +10982,7 @@ function ListHeader({ titleColumn, columns, selectionEnabled, showImage, actions
 * in a header row are three invitations, and only one of them is ever the
 * answer to "how is this sorted".
 */
-function ListHeaderLabel({ column, direction, onSort }) {
+function ListHeaderLabel({ column, direction, position, onSort }) {
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("span", {
 			className: "truncate",
@@ -10975,6 +10995,10 @@ function ListHeaderLabel({ column, direction, onSort }) {
 		direction === "desc" && /* @__PURE__ */ jsx(ArrowDownIcon, {
 			size: 12,
 			className: "flex-shrink-0"
+		}),
+		direction && position !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: "flex-shrink-0 text-[9px] font-bold leading-none tabular-nums",
+			children: position + 1
 		})
 	] });
 	const base = "inline-flex items-center gap-1 max-w-full text-[11px] leading-none uppercase tracking-wider font-medium";
@@ -10985,8 +11009,8 @@ function ListHeaderLabel({ column, direction, onSort }) {
 	});
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		title: `Sort by ${column.label}`,
-		onClick: onSort,
+		title: `Sort by ${column.label} — shift-click to add it under the current sort`,
+		onClick: (event) => onSort(event.shiftKey),
 		className: cls(base, tone, "cursor-pointer hover:text-surface-700 dark:hover:text-surface-200 transition-colors"),
 		children: content
 	});
@@ -11644,7 +11668,7 @@ function JsonPreviewBinding({ values }) {
 }
 //#endregion
 //#region src/components/EntityInspector.tsx
-var EntityHistoryView = lazy(() => import("./history-D5SKygpJ.js").then((m) => ({ default: m.EntityHistoryView })));
+var EntityHistoryView = lazy(() => import("./history-DS2iXiGi.js").then((m) => ({ default: m.EntityHistoryView })));
 /**
 * Raw values and revision history, as an inspector rather than as tabs.
 *
@@ -15101,13 +15125,13 @@ function FilterPresetsButton({ filterPresets, tableController, compact }) {
 			tableController.setSortBy?.(void 0);
 		} else {
 			tableController.setFilterValues?.(currentFilters);
-			if (!wasActive && preset.sort) tableController.setSortBy?.(preset.sort);
+			if (!wasActive && preset.sort) tableController.setSortBy?.(normalizeOrderBy(preset.sort));
 			else if (wasActive) {
 				let remainingSort;
 				for (let i = 0; i < filterPresets.length; i++) {
 					if (i === index) continue;
 					const other = filterPresets[i];
-					if (isPresetActive(other, currentFilters) && other.sort) remainingSort = other.sort;
+					if (isPresetActive(other, currentFilters) && other.sort) remainingSort = normalizeOrderBy(other.sort);
 				}
 				tableController.setSortBy?.(remainingSort);
 			}
@@ -15153,59 +15177,98 @@ function FilterPresetsButton({ filterPresets, tableController, compact }) {
 //#endregion
 //#region src/components/CollectionViewBinding/SortButton.tsx
 /**
-* Toolbar control that orders the collection by one property.
+* Toolbar control that orders the collection.
 *
 * The table orders by clicking a column header, which leaves every other view
 * mode — list, cards, and either of them inside a split view — with no way to
 * order at all, even though the controller has always carried `sortBy` and the
 * query has always honoured it. This binds a control to it.
 *
-* Clicking the active property flips its direction, so ascending → descending
-* is one click rather than a trip through a direction selector; clicking a
-* different one starts it ascending. The popover stays open through both.
+* It edits the *whole* order rather than a single key. A sort can have several
+* keys, applied in the order shown: the second decides between rows the first
+* calls equal, the third between rows the first two do. So the active keys sit
+* at the top, numbered and movable, and the properties below them are the ones
+* that can still be added under the last. Shift-clicking a column header does
+* the same thing from the table; this is the view for the modes that have no
+* headers, and the only place the order between keys can be changed.
+*
+* Clicking an active key flips its direction, so ascending → descending is one
+* click rather than a trip through a direction selector; clicking an inactive
+* one appends it ascending. The popover stays open through all of it — building
+* a two-key order out of a control that closes on every click is four round
+* trips through a button.
 */
 function SortButton({ tableController, properties, compact }) {
 	const { t } = useTranslation();
 	const [open, setOpen] = useState(false);
 	const options = useMemo(() => getSortablePropertyOptions(properties), [properties]);
 	const { sortBy, setSortBy, setItemCount, pageSize, filterValues, checkFilterCombination } = tableController;
-	const activeKey = sortBy?.[0];
-	const activeDirection = sortBy?.[1];
+	const keys = useMemo(() => sortBy ?? [], [sortBy]);
+	const activeIndex = useMemo(() => {
+		const index = /* @__PURE__ */ new Map();
+		keys.forEach(([key, direction], position) => {
+			if (!index.has(key)) index.set(key, {
+				direction,
+				position
+			});
+		});
+		return index;
+	}, [keys]);
 	const applySort = useCallback((next) => {
-		setSortBy?.(next);
+		setSortBy?.(next && next.length > 0 ? next : void 0);
 		if (pageSize !== void 0) setItemCount?.(pageSize);
 	}, [
 		setSortBy,
 		setItemCount,
 		pageSize
 	]);
+	/** Flip an active key's direction, or append an inactive one ascending. */
 	const onOptionClick = useCallback((key) => {
-		if (key === activeKey) applySort([key, activeDirection === "asc" ? "desc" : "asc"]);
-		else applySort([key, "asc"]);
+		const active = activeIndex.get(key);
+		if (!active) {
+			applySort([...keys, [key, "asc"]]);
+			return;
+		}
+		applySort(keys.map((entry) => entry[0] === key ? [key, active.direction === "asc" ? "desc" : "asc"] : entry));
 	}, [
-		activeKey,
-		activeDirection,
-		applySort
+		activeIndex,
+		applySort,
+		keys
 	]);
+	const removeKey = useCallback((key) => {
+		applySort(keys.filter(([existing]) => existing !== key));
+	}, [applySort, keys]);
+	/** Swap a key with its neighbour, which is what changes which one decides. */
+	const moveKey = useCallback((position, delta) => {
+		const target = position + delta;
+		if (target < 0 || target >= keys.length) return;
+		const next = [...keys];
+		[next[position], next[target]] = [next[target], next[position]];
+		applySort(next);
+	}, [applySort, keys]);
 	if (!setSortBy || options.length === 0) return null;
-	const activeOption = options.find((option) => option.key === activeKey);
-	const label = activeOption ? `${t("sort_by")}: ${activeOption.title}` : t("sort");
+	const primary = keys[0];
+	const primaryOption = primary ? options.find((option) => option.key === primary[0]) : void 0;
+	const label = primaryOption ? keys.length > 1 ? `${t("sort_by")}: ${primaryOption.title} +${keys.length - 1}` : `${t("sort_by")}: ${primaryOption.title}` : t("sort");
 	const arrowSize = compact ? iconSize.smallest : iconSize.small;
+	const primaryDirection = primary?.[1];
+	const trigger = /* @__PURE__ */ jsx(IconButton, {
+		size: "small",
+		"aria-label": label,
+		title: label,
+		className: cls(primaryOption && "text-primary"),
+		children: primaryDirection === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, { size: arrowSize }) : primaryDirection === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, { size: arrowSize }) : /* @__PURE__ */ jsx(ArrowUpDownIcon, { size: arrowSize })
+	});
+	const inactiveOptions = options.filter((option) => !activeIndex.has(option.key));
 	return /* @__PURE__ */ jsx(Popover, {
 		open,
 		onOpenChange: setOpen,
 		modal: false,
 		side: "bottom",
 		align: "start",
-		trigger: /* @__PURE__ */ jsx(IconButton, {
-			size: "small",
-			"aria-label": label,
-			title: label,
-			className: cls(activeOption && "text-primary"),
-			children: activeDirection === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, { size: arrowSize }) : activeDirection === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, { size: arrowSize }) : /* @__PURE__ */ jsx(ArrowUpDownIcon, { size: arrowSize })
-		}),
+		trigger,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "py-2 min-w-[240px] flex flex-col",
+			className: "py-2 min-w-[280px] max-w-[360px] flex flex-col",
 			children: [
 				/* @__PURE__ */ jsx(Typography, {
 					variant: "caption",
@@ -15213,42 +15276,97 @@ function SortButton({ tableController, properties, compact }) {
 					className: "font-medium uppercase tracking-wider px-3 pb-1",
 					children: t("sort_by")
 				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "max-h-[320px] overflow-y-auto flex flex-col",
-					children: options.map(({ key, title, property }) => {
-						const active = key === activeKey;
-						const disabled = checkFilterCombination ? !checkFilterCombination(filterValues ?? {}, [key, active && activeDirection === "asc" ? "desc" : "asc"]) : false;
-						return /* @__PURE__ */ jsxs("button", {
-							type: "button",
-							role: "menuitemradio",
-							"aria-checked": active,
-							disabled,
-							onClick: () => onOptionClick(key),
-							className: cls("flex items-center gap-2 px-3 py-1.5 text-sm text-left w-full", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900", active && "text-primary"),
+				keys.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col",
+					children: keys.map(([key, direction], position) => {
+						const option = options.find((o) => o.key === key);
+						return /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1 pl-3 pr-2 py-1 text-sm text-primary",
 							children: [
 								/* @__PURE__ */ jsx("span", {
-									className: "flex-shrink-0 flex items-center",
-									children: getIconForProperty(property, "smallest")
+									className: "flex-shrink-0 w-4 text-xs tabular-nums text-text-secondary dark:text-text-secondary-dark",
+									children: position + 1
 								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "flex-grow truncate",
-									children: title
+								/* @__PURE__ */ jsxs("button", {
+									type: "button",
+									onClick: () => onOptionClick(key),
+									title: direction === "asc" ? t("sort_descending") : t("sort_ascending"),
+									className: "flex items-center gap-2 flex-grow min-w-0 text-left cursor-pointer",
+									children: [
+										option && /* @__PURE__ */ jsx("span", {
+											className: "flex-shrink-0 flex items-center",
+											children: getIconForProperty(option.property, "smallest")
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "flex-grow truncate",
+											children: option?.title ?? key
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "flex-shrink-0 flex items-center",
+											children: direction === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, { size: iconSize.smallest }) : /* @__PURE__ */ jsx(ArrowUpIcon, { size: iconSize.smallest })
+										})
+									]
 								}),
-								active && /* @__PURE__ */ jsx("span", {
-									className: "flex-shrink-0 flex items-center",
-									children: activeDirection === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, { size: iconSize.smallest }) : /* @__PURE__ */ jsx(ArrowUpIcon, { size: iconSize.smallest })
+								keys.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+									size: "smallest",
+									"aria-label": t("sort_move_up"),
+									title: t("sort_move_up"),
+									disabled: position === 0,
+									onClick: () => moveKey(position, -1),
+									children: /* @__PURE__ */ jsx(ChevronUpIcon, { size: iconSize.smallest })
+								}), /* @__PURE__ */ jsx(IconButton, {
+									size: "smallest",
+									"aria-label": t("sort_move_down"),
+									title: t("sort_move_down"),
+									disabled: position === keys.length - 1,
+									onClick: () => moveKey(position, 1),
+									children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: iconSize.smallest })
+								})] }),
+								/* @__PURE__ */ jsx(IconButton, {
+									size: "smallest",
+									"aria-label": t("sort_remove_key"),
+									title: t("sort_remove_key"),
+									onClick: () => removeKey(key),
+									children: /* @__PURE__ */ jsx(XIcon, { size: iconSize.smallest })
 								})
 							]
 						}, key);
 					})
 				}),
+				inactiveOptions.length > 0 && /* @__PURE__ */ jsx(Typography, {
+					variant: "caption",
+					color: "secondary",
+					className: "font-medium uppercase tracking-wider px-3 pt-2 pb-1",
+					children: keys.length > 0 ? t("sort_then_by") : ""
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "max-h-[280px] overflow-y-auto flex flex-col",
+					children: inactiveOptions.map(({ key, title, property }) => {
+						const disabled = checkFilterCombination ? !checkFilterCombination(filterValues ?? {}, [...keys, [key, "asc"]]) : false;
+						return /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							role: "menuitemradio",
+							"aria-checked": false,
+							disabled,
+							onClick: () => onOptionClick(key),
+							className: cls("flex items-center gap-2 px-3 py-1.5 text-sm text-left w-full", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900"),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "flex-shrink-0 flex items-center",
+								children: getIconForProperty(property, "smallest")
+							}), /* @__PURE__ */ jsx("span", {
+								className: "flex-grow truncate",
+								children: title
+							})]
+						}, key);
+					})
+				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "px-3 pt-2",
 					children: /* @__PURE__ */ jsx(Button, {
 						variant: "text",
 						size: "small",
 						className: "w-full",
-						disabled: !activeOption,
+						disabled: keys.length === 0,
 						onClick: () => applySort(void 0),
 						children: t("clear_sort")
 					})
@@ -16251,14 +16369,13 @@ function DefaultCollectionEmptyState({ canCreate, onNewClick, isSearching, searc
 }
 /**
 * Inflight count request deduplication map.
-* Keyed by `path|filterKey|sortByProperty|sortDir` so that concurrent
+* Keyed by `path|filterKey|sort|search` so that concurrent
 * callers (e.g. React StrictMode double-mount) share the same promise.
 */
 var inflightCountRequests = /* @__PURE__ */ new Map();
 function EntitiesCount({ path, collection, filter, sortBy, searchString, onCountChange }) {
 	const dataClient = useData();
-	const sortByProperty = sortBy ? sortBy[0] : void 0;
-	const currentSort = sortBy ? sortBy[1] : void 0;
+	const sortKey = React.useMemo(() => sortBy ? serializeOrderBy(sortBy) ?? "" : "", [sortBy]);
 	const dataClientRef = React.useRef(dataClient);
 	dataClientRef.current = dataClient;
 	const onCountChangeRef = React.useRef(onCountChange);
@@ -16272,8 +16389,8 @@ function EntitiesCount({ path, collection, filter, sortBy, searchString, onCount
 		}
 		let cancelled = false;
 		const whereParams = filter && Object.keys(filter).length > 0 ? filter : void 0;
-		const orderByParams = sortByProperty && currentSort ? [String(sortByProperty), currentSort] : void 0;
-		const cacheKey = `${path}|${filterKey}|${sortByProperty ?? ""}|${currentSort ?? ""}|${searchString ?? ""}`;
+		const orderByParams = sortBy && sortBy.length > 0 ? sortBy.map(([field, direction]) => [String(field), direction]) : void 0;
+		const cacheKey = `${path}|${filterKey}|${sortKey}|${searchString ?? ""}`;
 		let countPromise = inflightCountRequests.get(cacheKey);
 		if (!countPromise) {
 			countPromise = accessor.count({
@@ -16296,8 +16413,7 @@ function EntitiesCount({ path, collection, filter, sortBy, searchString, onCount
 	}, [
 		path,
 		filterKey,
-		sortByProperty,
-		currentSort,
+		sortKey,
 		searchString
 	]);
 	return null;
@@ -24441,4 +24557,4 @@ function getFullIdPath(propertyKey, propertyNamespace) {
 //#endregion
 export { getEntityViewWidth as $, SkeletonPropertyComponent as $n, resolveCollectionPathIds$1 as $t, SelectFieldBinding as A, ArrayOfStringsPreview as An, saveImportedEntities as At, useSelectionDialog as B, useSidePanel as Bn, FieldCaption as Bt, getDefaultFieldId as C, UserPreview as Cn, isReferenceProperty as Cr, convertDataToEntity as Ct, TextFieldBinding as D, KeyValuePreview as Dn, useImportConfig as Dt, VectorFieldBinding as E, DatePreview as En, getInferenceType as Et, MapFieldBinding as F, ArrayOfReferencesPreview as Fn, parseCsvToObjects as Ft, useTopLevelNavigation as G, getEntityPreviewKeys as Gn, mergeEntityActions as Gt, SideDialogs as H, useCollectionRegistryController as Hn, BreadcrumbsProvider as Ht, KeyValueFieldBinding as I, InlineEntityListPreview as In, unflattenObject as It, useBuildCollectionRegistryController as J, ArrayPropertyPreview as Jn, getCollectionPathsCombinations as Jt, useResolvedViews as K, getEntityTitlePropertyKey as Kn, addInitialSlash as Kt, DateTimeFieldBinding as L, ReferencePreview as Ln, ArrayContainer as Lt, ReferenceFieldBinding as M, ArrayEnumPreview as Mn, convertFileToJson as Mt, MultiSelectFieldBinding as N, ArrayOfStorageComponentsPreview as Nn, detectCsvDelimiter as Nt, SwitchFieldBinding as O, MapPropertyPreview as On, ImportSaveInProgress as Ot, MarkdownEditorFieldBinding as P, RelationPreview as Pn, parseCsvRows as Pt, buildSidePanelsFromUrl as Q, StorageThumbnailInternal as Qn, removeTrailingSlash$1 as Qt, BlockFieldBinding as R, EntityPreviewBinding as Rn, PropertyConfigBadge as Rt, getDefaultFieldConfig as S, PropertyPreview as Sn, getResolvedPropertyInPath as Sr, DataNewPropertiesMapping as St, getFieldId as T, BooleanPreview as Tn, processValueMapping as Tt, useBuildUrlController as U, getUserLabel as Un, resolveEntityAction as Ut, SelectionTableBinding as V, CollectionRegistryContext as Vn, useBreadcrumbsController as Vt, useBuildNavigationStateController as W, useResolvedUser as Wn, resolveEntityView as Wt, resolveNavigationFrom as X, EnumValuesChip as Xn, removeInitialAndTrailingSlashes$1 as Xt, useHistory as Y, StringPropertyPreview as Yn, getLastSegment$1 as Yt, useResolvedNavigationFrom as Z, StorageThumbnail as Zn, removeInitialSlash as Zt, useCollectionsConfigController as _, ReadOnlyFieldBinding as _n, getDefaultPropertiesOrder as _r, CollectionViewActions as _t, namespaceToPropertiesPath as a, SelectableTable as an, ImagePreview as ar, removeEmptyContainers as at, PropertyFieldBinding as b, FieldHelperText as bn, getPropertiesWithPropertiesOrder as br, useCollectionEditorDialogsState as bt, buildCollectionGenerationCallback as c, UrlContext as cn, FormSections as cr, copyEntityAction as ct, fromSerializableCollectionConfigs as d, useNavigationStateController as dn, FieldBlock as dr, resetPasswordAction as dt, resolveOpenEntityMode as en, renderSkeletonCaptionText as er, useBuildSidePanel as et, fromSerializableProperties as f, useSideDialogsController as fn, LABEL_ICON_SIZE as fr, CreationResultDialog as ft, toSerializableProperty as g, useClearRestoreValue as gn, getBracketNotation as gr, EntityCardBinding as gt, toSerializableProperties as h, ArrayCustomShapedFieldBinding as hn, PropertyIdCopyTooltip as hr, CollectionCardViewBinding as ht, namespaceToPropertiesOrderPath as i, CollectionTableBinding as in, UrlComponentPreview as ir, getInitialEntityValues as it, RepeatFieldBinding as j, ArrayPropertyEnumPreview as jn, ImportFileUpload as jt, StorageUploadFieldBinding as k, ArrayOneOfPreview as kn, IMPORT_BATCH_SIZE as kt, validateCollectionJson as l, useUrlController as ln, FormRail as lr, deleteEntityAction as lt, toSerializableCollectionConfig as m, SelectableTableContext as mn, spanClass as mr, EntityViewBinding as mt, getFullIdPath as n, useSelectionController as nn, renderSkeletonImageThumbnail as nr, extractTouchedValues as nt, CollectionGenerationApiError as o, CollectionRowActions as on, sanitizeUrl as or, zodToFormErrors as ot, fromSerializableProperty as p, SideDialogsControllerContext as pn, isSelfLabellingProperty as pr, DetailViewBinding as pt, useResolvedCollections as q, getEntityTitlePropertyKeyForEntity as qn, getCollectionBySlugWithin as qt, idToPropertiesPath as r, VirtualTableInput$1 as rn, renderSkeletonText as rr, getChanges as rt, DEFAULT_COLLECTION_GENERATION_ENDPOINT as s, useAdminContext as sn, EmptyValue as sr, CollectionViewBinding as st, getFullId as t, resolveViewMode as tn, renderSkeletonIcon as tr, EditViewBinding as tt, fromSerializableCollectionConfig as u, NavigationStateContext as un, RecordMeta as ur, editEntityAction as ut, EntityFormBinding as v, LabelWithIconAndTooltip as vn, getIconForProperty as vr, useCollectionEditorController as vt, getFieldConfig as w, NumberPropertyPreview as wn, isRelationProperty as wr, flattenEntry as wt, DEFAULT_FIELD_CONFIGS as x, ArrayOfMapsPreview as xn, getPropertyInPath$1 as xr, ImportNewPropertyFieldPreview as xt, EntityForm as y, LabelWithIcon as yn, getIconForWidget as yr, ConfigControllerProvider as yt, ArrayOfReferencesFieldBinding as z, SidePanelControllerContext as zn, SearchIconsView as zt };
 
-//# sourceMappingURL=util-C-D5yD2n.js.map
+//# sourceMappingURL=util-WQP-ljKW.js.map