@rebasepro/admin 0.14.0 → 0.14.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/admin",
   "type": "module",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Rebase CMS — content management views, forms, and routing",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -83,14 +83,14 @@
     "react-dropzone": "^19.1.1",
     "react-use-measure": "^2.1.7",
     "zod": "^4.4.3",
-    "@rebasepro/admin-types": "0.14.0",
-    "@rebasepro/app": "0.14.0",
-    "@rebasepro/forms": "0.14.0",
-    "@rebasepro/inference": "0.14.0",
-    "@rebasepro/types": "0.14.0",
-    "@rebasepro/utils": "0.14.0",
-    "@rebasepro/common": "0.14.0",
-    "@rebasepro/ui": "0.14.0"
+    "@rebasepro/admin-types": "0.14.1",
+    "@rebasepro/forms": "0.14.1",
+    "@rebasepro/app": "0.14.1",
+    "@rebasepro/common": "0.14.1",
+    "@rebasepro/inference": "0.14.1",
+    "@rebasepro/types": "0.14.1",
+    "@rebasepro/ui": "0.14.1",
+    "@rebasepro/utils": "0.14.1"
   },
   "peerDependencies": {
     "react": ">=19.2.7",

package/src/collection_editor/ui/EditorCollectionActionStart.tsx

@@ -12,6 +12,7 @@ import { Button, SaveIcon, Tooltip, UndoIcon } from "@rebasepro/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 import { useCollectionsConfigController } from "../useCollectionsConfigController";
 import { mergeDeep } from "@rebasepro/utils";
+import { normalizeOrderBy } from "@rebasepro/common";
 
 export function EditorCollectionActionStart({
     path,
@@ -30,7 +31,7 @@ export function EditorCollectionActionStart({
 
     let saveDefaultFilterButton = null;
     if (!equal(getObjectOrNull(tableController.filterValues), getObjectOrNull(collection.defaultFilter)) ||
-        !equal(getObjectOrNull(tableController.sortBy), getObjectOrNull(collection.sort))) {
+        !equal(getObjectOrNull(tableController.sortBy), getObjectOrNull(normalizeOrderBy(collection.sort)))) {
         saveDefaultFilterButton = <>
             <Tooltip
                 asChild={true}
@@ -68,7 +69,7 @@ parentEntityIds,
                         if (collection?.defaultFilter)
                             tableController.setFilterValues?.(collection?.defaultFilter);
                         if (collection?.sort)
-                            tableController.setSortBy?.(collection?.sort);
+                            tableController.setSortBy?.(normalizeOrderBy(collection.sort) as Parameters<NonNullable<typeof tableController.setSortBy>>[0]);
                     }}>
                     <UndoIcon/>
                 </Button>

package/src/components/CollectionViewBinding/CollectionListViewBinding.tsx

@@ -1,5 +1,5 @@
 
-import type { Properties, Property } from "@rebasepro/types";
+import type { OrderByTuple, Properties, Property } from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Entity } from "@rebasepro/types";
 import { CollectionSize, EntityAction, EntityTableController, SelectionController, AdminCollection } from "@rebasepro/admin-types";
@@ -24,6 +24,7 @@ import { useAnalyticsController } from "@rebasepro/app";
 import { IconForView } from "@rebasepro/app";
 import { getIcon } from "@rebasepro/app";
 import { hasDeclaredDisplay } from "@rebasepro/app";
+import { useTranslation } from "@rebasepro/app";
 import { formatRelativeTime, getValueInPath } from "@rebasepro/utils";
 import { useCollectionSlotKeys, useEntitySlots, type CollectionSlotKeys, type EntityPreviewSlots } from "./usePreviewSlots";
 import { SlotValue, TagChips } from "./SlotValue";
@@ -540,11 +541,11 @@ export function CollectionListViewBinding<M extends Record<string, unknown> = Re
         ...(columnMode ? [] : slotKeys.relationKeys)
     ]), [titleColumn, imagePropertyKey, subtitleKey, declaredColumns, 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 : undefined;
-    }, [sortBy, shownKeys]);
+    /** The properties the sort names, minus the ones a cell already shows. */
+    const sortedKeys = useMemo(
+        () => (sortBy ?? []).map(([key]) => key as string).filter(key => !shownKeys.has(key)),
+        [sortBy, shownKeys]
+    );
 
     /** The properties the filters name, minus the ones a cell already shows. */
     const filteredKeys = useMemo(
@@ -561,23 +562,28 @@ export function CollectionListViewBinding<M extends Record<string, unknown> = Re
      * 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<string | undefined>(undefined);
+    const [lastSortedKeys, setLastSortedKeys] = useState<string[]>([]);
     const [lastFilteredKeys, setLastFilteredKeys] = useState<string[]>([]);
 
     useEffect(() => {
-        if (sortedKey) setLastSortedKey(sortedKey);
-    }, [sortedKey]);
+        if (sortedKeys.length === 0) return;
+        // Same members, same array — see the filter effect below.
+        setLastSortedKeys(previous =>
+            previous.length === sortedKeys.length && previous.every((key, i) => key === sortedKeys[i])
+                ? previous
+                : sortedKeys);
+    }, [sortedKeys]);
 
     useEffect(() => {
         if (filteredKeys.length === 0) return;
@@ -602,14 +608,14 @@ export function CollectionListViewBinding<M extends Record<string, unknown> = Re
         // read in that order rather than from state alone, because the effects
         // above have not run yet on the render that first sees a request, and
         // waiting a frame would flash the row without its new column.
-        const active = new Set([...filteredKeys, ...(sortedKey ? [sortedKey] : [])]);
+        const active = new Set([...filteredKeys, ...sortedKeys]);
         const keys: string[] = [];
         const request = (key: string | undefined) => {
             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) as Property | undefined;
@@ -624,7 +630,7 @@ export function CollectionListViewBinding<M extends Record<string, unknown> = Re
                 priority: (active.has(key) ? PRIORITY_ACTIVE_REQUEST : PRIORITY_STALE_REQUEST) - index
             }];
         });
-    }, [filteredKeys, sortedKey, lastFilteredKeys, lastSortedKey, shownKeys, resolvedCollection, sortableKeys]);
+    }, [filteredKeys, sortedKeys, lastFilteredKeys, lastSortedKeys, shownKeys, resolvedCollection, sortableKeys]);
 
     // ── Compute list-view-visible actions per entity ──
     const getListViewActions = useCallback((entity: Entity<M>): EntityAction[] => {
@@ -733,26 +739,51 @@ customEntityActions });
         handleSelectionChange(entity, selected);
     }, [handleSelectionChange]);
 
+    /** Where each sorted column sits in the order, so a header can show its rank. */
+    const sortIndex = useMemo(() => {
+        const index = new Map<string, { direction: "asc" | "desc"; position: number }>();
+        (sortBy ?? []).forEach(([key, direction], position) => {
+            if (!index.has(key as string)) index.set(key as string, { 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: string) => {
+    const onColumnSort = useCallback((key: string, additive = false) => {
         if (!setSortBy) return;
-        const active = sortBy?.[0] === key ? sortBy[1] : undefined;
-        const next: [string, "asc" | "desc"] | undefined = active === "asc"
-            ? [key, "desc"]
+        const active = sortIndex.get(key)?.direction;
+        const next: "asc" | "desc" | undefined = active === "asc"
+            ? "desc"
             : active === "desc"
                 ? undefined
-                : [key, "asc"];
-        setSortBy(next);
+                : "asc";
+
+        const existing = (sortBy ?? []) as OrderByTuple[];
+        let updated: OrderByTuple[] | undefined;
+        if (!additive) {
+            updated = next ? [[key, next]] : undefined;
+        } else if (next === undefined) {
+            updated = existing.filter(([existingKey]) => existingKey !== key);
+        } else if (active === undefined) {
+            updated = [...existing, [key, next]];
+        } else {
+            updated = existing.map((entry) => entry[0] === key ? [key, next] as OrderByTuple : entry);
+        }
+        if (updated?.length === 0) updated = undefined;
+
+        setSortBy(updated as Parameters<NonNullable<typeof setSortBy>>[0]);
         // Re-ordering a partially loaded collection invalidates the pages
         // already fetched — they are no longer the rows the query answers with —
         // so pagination starts over, as it does for the table and the sort menu.
         setItemCount?.(pageSize);
-    }, [setSortBy, sortBy, setItemCount, pageSize]);
+    }, [setSortBy, sortBy, sortIndex, setItemCount, pageSize]);
 
     /**
      * Whether a sort can be offered at all next to the filter already applied.
@@ -763,11 +794,11 @@ customEntityActions });
     const sortIsAvailable = useCallback((key: string) => {
         if (!setSortBy) return false;
         if (!checkFilterCombination) return true;
-        const active = sortBy?.[0] === key ? sortBy[1] : undefined;
+        const active = sortIndex.get(key)?.direction;
         // Clearing the sort is always available: it asks nothing of the driver.
         if (active === "desc") return true;
-        return checkFilterCombination(filterValues ?? {}, [key, active === "asc" ? "desc" : "asc"]);
-    }, [setSortBy, checkFilterCombination, filterValues, sortBy]);
+        return checkFilterCombination(filterValues ?? {}, [[key, active === "asc" ? "desc" : "asc"]]);
+    }, [setSortBy, checkFilterCombination, filterValues, sortIndex]);
 
     const header = (titleColumn || visibleColumns.length > 0) && (
         <ListHeader
@@ -776,7 +807,7 @@ customEntityActions });
             selectionEnabled={selectionEnabled && !combineSelection}
             showImage={showImage}
             actionsWidth={actionsWidth}
-            sortBy={sortBy as [string, "asc" | "desc"] | undefined}
+            sortIndex={sortIndex}
             onColumnSort={onColumnSort}
             sortIsAvailable={sortIsAvailable}
         />
@@ -1264,7 +1295,7 @@ function ListHeader({
     selectionEnabled,
     showImage,
     actionsWidth,
-    sortBy,
+    sortIndex,
     onColumnSort,
     sortIsAvailable
 }: {
@@ -1273,18 +1304,26 @@ function ListHeader({
     selectionEnabled?: boolean;
     showImage: boolean;
     actionsWidth: number;
-    sortBy?: [string, "asc" | "desc"];
-    onColumnSort: (key: string) => void;
+    sortIndex: Map<string, { direction: "asc" | "desc"; position: number }>;
+    onColumnSort: (key: string, additive?: boolean) => void;
     sortIsAvailable: (key: string) => boolean;
 }) {
     const headerCell = (column: ListColumn) => (
         <ListHeaderLabel
             column={column}
-            direction={sortBy?.[0] === column.key ? sortBy[1] : undefined}
-            onSort={column.sortable && sortIsAvailable(column.key) ? () => onColumnSort(column.key) : undefined}
+            direction={sortIndex.get(column.key)?.direction}
+            position={sortIndex.size > 1 ? sortIndex.get(column.key)?.position : undefined}
+            onSort={column.sortable && sortIsAvailable(column.key)
+                ? (additive: boolean) => onColumnSort(column.key, additive)
+                : undefined}
         />
     );
 
+    // No `role="columnheader"` / `aria-sort` here, tempting as they are: both
+    // are only valid inside a `row` inside a `table`/`grid`, and neither this
+    // header nor the virtualized `ListView` under it declares one. An orphaned
+    // columnheader is worse than none. The sort state and the rank ride on the
+    // header button's `aria-label` instead — see `ListHeaderLabel`.
     return (
         <div className={cls(
             "flex items-center gap-4 px-5 py-1.5 select-none border-b bg-surface-50 dark:bg-surface-900",
@@ -1329,17 +1368,27 @@ function ListHeader({
 function ListHeaderLabel({
     column,
     direction,
+    position,
     onSort
 }: {
     column: ListColumn;
     direction?: "asc" | "desc";
-    onSort?: () => void;
+    /** Rank in a multi-key sort, or `undefined` when one key says it all. */
+    position?: number;
+    onSort?: (additive: boolean) => void;
 }) {
+    const { t } = useTranslation();
+
     const content = (
         <>
             <span className="truncate">{column.label}</span>
             {direction === "asc" && <ArrowUpIcon size={12} className="flex-shrink-0"/>}
             {direction === "desc" && <ArrowDownIcon size={12} className="flex-shrink-0"/>}
+            {direction && position !== undefined && (
+                <span className="flex-shrink-0 text-[9px] font-bold leading-none tabular-nums">
+                    {position + 1}
+                </span>
+            )}
         </>
     );
 
@@ -1352,11 +1401,27 @@ function ListHeaderLabel({
         return <span className={cls(base, tone)}>{content}</span>;
     }
 
+    // What the *next* click does, which is the only thing a user needs from a
+    // control with three states. This said "Sort by <column>" in every state,
+    // so on a descending column the tooltip promised a sort where the click
+    // removed one — and it said it in English regardless of the panel's
+    // language, alone among the toolbar's sort controls.
+    const nextAction = direction === "asc"
+        ? t("sort_descending")
+        : direction === "desc"
+            ? t("sort_remove")
+            : t("sort_ascending");
+    const rank = direction && position !== undefined
+        ? ` (${t("sort_key_position", { position: position + 1 })})`
+        : "";
+    const label = `${column.label}${rank} — ${nextAction}. ${t("sort_shift_click_hint")}`;
+
     return (
         <button
             type="button"
-            title={`Sort by ${column.label}`}
-            onClick={onSort}
+            title={label}
+            aria-label={label}
+            onClick={(event) => onSort(event.shiftKey)}
             className={cls(base, tone, "cursor-pointer hover:text-surface-700 dark:hover:text-surface-200 transition-colors")}
         >
             {content}

package/src/components/CollectionViewBinding/CollectionViewBinding.tsx

@@ -1,4 +1,5 @@
-import type { Property } from "@rebasepro/types";
+import type { OrderByTuple, Property } from "@rebasepro/types";
+import { serializeOrderBy } from "@rebasepro/common";
 import type { AdditionalFieldDelegate, EntityAction, AdminCollection } from "@rebasepro/admin-types";
 import {
     Entity,
@@ -1322,7 +1323,7 @@ function DefaultCollectionEmptyState({
 
 /**
  * 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.
  */
 const inflightCountRequests = new Map<string, Promise<number>>();
@@ -1338,7 +1339,7 @@ export function EntitiesCount({
     path: string,
     collection: AdminCollection,
     filter?: FilterValues<any>,
-    sortBy?: [string, "asc" | "desc"],
+    sortBy?: OrderByTuple[],
     /**
      * Required, not optional. The term sits in the same scope as the element
      * that mounts this and is passed to the toolbar and the empty state beside
@@ -1352,8 +1353,9 @@ export function EntitiesCount({
 
     const dataClient = useData();
 
-    const sortByProperty = sortBy ? sortBy[0] : undefined;
-    const currentSort = sortBy ? sortBy[1] : undefined;
+    // The whole sort as one string: it keys the dedup cache and drives the
+    // effect, and a `sortBy` array is a new reference on every render.
+    const sortKey = React.useMemo(() => sortBy ? serializeOrderBy(sortBy) ?? "" : "", [sortBy]);
 
     // Use refs for values that should NOT trigger re-fetches
     const dataClientRef = React.useRef(dataClient);
@@ -1375,14 +1377,16 @@ export function EntitiesCount({
 
         // filterValues is already FilterValues — pass directly
         const whereParams = filter && Object.keys(filter).length > 0 ? filter : undefined;
-        const orderByParams: [string, "asc" | "desc"] | undefined = sortByProperty && currentSort ? [String(sortByProperty), currentSort] : undefined;
+        const orderByParams = sortBy && sortBy.length > 0
+            ? sortBy.map(([field, direction]) => [String(field), direction] as OrderByTuple)
+            : undefined;
 
         // Deduplicate inflight count requests (e.g. React StrictMode double-mount)
         // The search term is part of the query, so it is part of the key. The
         // cache is module-level and outlives an unmount, so a key that omits it
         // does not merely lose precision — it answers one search with a
         // different search's total.
-        const cacheKey = `${path}|${filterKey}|${sortByProperty ?? ""}|${currentSort ?? ""}|${searchString ?? ""}`;
+        const cacheKey = `${path}|${filterKey}|${sortKey}|${searchString ?? ""}`;
         let countPromise = inflightCountRequests.get(cacheKey);
         if (!countPromise) {
             countPromise = accessor.count({
@@ -1403,7 +1407,14 @@ export function EntitiesCount({
         });
 
         return () => { cancelled = true; };
-    }, [path, filterKey, sortByProperty, currentSort, searchString]);
+        // `filterKey` and `sortKey` ARE `filter` and `sortBy` — the memoized
+        // serializations a few lines up, and the only stable identity either
+        // has. Both arrive as freshly built objects on every render, so
+        // depending on them directly would re-run this effect each time and
+        // fire a count request per render. The keys change exactly when the
+        // values do, which is the condition this effect actually wants.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [path, filterKey, sortKey, searchString]);
 
     // Count is now displayed in the breadcrumb bar, this component only fetches and reports
     return null;

package/src/components/CollectionViewBinding/CollectionViewStartActions.tsx

@@ -141,15 +141,18 @@ parentEntityIds,
         </Tooltip>
     );
 
-    // Ordering the collection is a click on a column header — which only the
-    // table has. The list and card views showed rows in whatever order the
-    // query returned with no way to change it, so they get the control in the
-    // toolbar instead.
+    // Everywhere a `sortBy` means something — which is every view but the
+    // board, whose columns are ordered by their own order key and which ignores
+    // `sortBy` entirely, so the control would appear to do nothing.
     //
-    // Not the table, where the headers already do this and say which column is
-    // sorted; and not the board, which orders its columns by its own order key
-    // and ignores `sortBy` entirely, so the control would appear to do nothing.
-    const sortButton = resolvedProperties && (viewMode === "list" || viewMode === "cards") && (
+    // Including the table, whose headers were once thought to cover it. They
+    // build a multi-key sort (shift-click) and they show its ranks, but they
+    // cannot *re-rank* it: promoting the third key above the first means
+    // clearing the sort and shift-clicking all three back in the new order.
+    // Nor can they remove a middle key without cycling it through descending
+    // first. This popover is the only place either is one click, and a table
+    // with a three-key sort needs it more than a card grid does, not less.
+    const sortButton = resolvedProperties && viewMode !== "kanban" && (
         <SortButton
             key={"sort_button"}
             tableController={tableController}

package/src/components/CollectionViewBinding/FilterPresetsButton.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo } from "react";
 import { CheckIcon, ChevronsUpDownIcon, cls, FilterChip, Menu, MenuItem, Tooltip } from "@rebasepro/ui";
-import type { FilterValues, FilterPreset } from "@rebasepro/types";
+import type { FilterValues, FilterPreset, OrderByTuple } from "@rebasepro/types";
+import { normalizeOrderBy } from "@rebasepro/common";
 import type { EntityTableController, PropertyPath } from "@rebasepro/admin-types";
 
 export interface FilterPresetsButtonProps<M extends Record<string, unknown>> {
@@ -216,19 +217,19 @@ export function FilterPresetsButton<M extends Record<string, unknown>>({
             // otherwise find sort from remaining active presets
             if (!wasActive && preset.sort) {
                 tableController.setSortBy?.(
-                    preset.sort as [Extract<keyof M, string> | (string & {}), "asc" | "desc"]
+                    normalizeOrderBy(preset.sort) as OrderByTuple<Extract<keyof M, string> | (string & {})>[]
                 );
             } else if (wasActive) {
-                let remainingSort: [string, "asc" | "desc"] | undefined;
+                let remainingSort: OrderByTuple[] | undefined;
                 for (let i = 0; i < filterPresets.length; i++) {
                     if (i === index) continue;
                     const other = filterPresets[i] as FilterPreset<string>;
                     if (isPresetActive(other, currentFilters) && other.sort) {
-                        remainingSort = other.sort;
+                        remainingSort = normalizeOrderBy(other.sort);
                     }
                 }
                 tableController.setSortBy?.(
-                    remainingSort as [Extract<keyof M, string> | (string & {}), "asc" | "desc"] | undefined
+                    remainingSort as OrderByTuple<Extract<keyof M, string> | (string & {})>[] | undefined
                 );
             }
         }