@rebasepro/admin 0.14.1-canary.g7e666eb → 0.14.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/admin",
   "type": "module",
-  "version": "0.14.1-canary.g7e666eb",
+  "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/common": "0.14.1-canary.g7e666eb",
-    "@rebasepro/app": "0.14.1-canary.g7e666eb",
-    "@rebasepro/forms": "0.14.1-canary.g7e666eb",
-    "@rebasepro/inference": "0.14.1-canary.g7e666eb",
-    "@rebasepro/ui": "0.14.1-canary.g7e666eb",
-    "@rebasepro/utils": "0.14.1-canary.g7e666eb",
-    "@rebasepro/admin-types": "0.14.1-canary.g7e666eb",
-    "@rebasepro/types": "0.14.1-canary.g7e666eb"
+    "@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/components/CollectionViewBinding/CollectionListViewBinding.tsx

@@ -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";
@@ -1318,6 +1319,11 @@ function ListHeader({
         />
     );
 
+    // 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",
@@ -1371,6 +1377,8 @@ function ListHeaderLabel({
     position?: number;
     onSort?: (additive: boolean) => void;
 }) {
+    const { t } = useTranslation();
+
     const content = (
         <>
             <span className="truncate">{column.label}</span>
@@ -1393,10 +1401,26 @@ 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} — shift-click to add it under the current sort`}
+            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")}
         >

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/SortButton.tsx

@@ -10,6 +10,7 @@ import {
     ChevronDownIcon,
     ChevronUpIcon,
     cls,
+    defaultBorderMixin,
     iconSize,
     IconButton,
     Popover,
@@ -114,6 +115,12 @@ position });
         applySort(keys.filter(([existing]) => existing !== key));
     }, [applySort, keys]);
 
+    /** What a click on an active key will do to it, for the tooltip and the label. */
+    const flipLabel = useCallback(
+        (direction: "asc" | "desc") => direction === "asc" ? t("sort_descending") : t("sort_ascending"),
+        [t]
+    );
+
     /** Swap a key with its neighbour, which is what changes which one decides. */
     const moveKey = useCallback((position: number, delta: -1 | 1) => {
         const target = position + delta;
@@ -128,11 +135,18 @@ position });
     }
 
     const primary = keys[0];
-    const primaryOption = primary ? options.find(option => option.key === primary[0]) : undefined;
-    const label = primaryOption
+    // The key's own name when it has no option to be titled by — a sort can
+    // outlive the column it names (a property hidden since, a `collection.sort`
+    // on something the panel does not render). Falling back to "Sort" there
+    // showed the neutral icon and the inactive label over a collection that
+    // *was* sorted, which is the one thing this control exists to report.
+    const primaryTitle = primary
+        ? options.find(option => option.key === primary[0])?.title ?? primary[0]
+        : undefined;
+    const label = primaryTitle
         ? keys.length > 1
-            ? `${t("sort_by")}: ${primaryOption.title} +${keys.length - 1}`
-            : `${t("sort_by")}: ${primaryOption.title}`
+            ? `${t("sort_by")}: ${primaryTitle} +${keys.length - 1}`
+            : `${t("sort_by")}: ${primaryTitle}`
         : t("sort");
 
     // Icon only, at every width. The arrow says which way the order runs; which
@@ -152,7 +166,7 @@ position });
             size={"small"}
             aria-label={label}
             title={label}
-            className={cls(primaryOption && "text-primary")}
+            className={cls(primaryTitle && "text-primary")}
         >
             {/* Same icon size as the filter controls it sits between: 16 in the
                 split view's narrow toolbar, 20 everywhere else. It was a flat
@@ -186,7 +200,11 @@ position });
                 </Typography>
 
                 {keys.length > 0 && (
-                    <div className="flex flex-col">
+                    // Bounded for the same reason the option list below is: the
+                    // active keys are as many as the collection has sortable
+                    // columns, and an unbounded column pushed "Clear sort" off
+                    // the bottom of the screen on a wide collection.
+                    <div className="flex flex-col max-h-[200px] overflow-y-auto">
                         {keys.map(([key, direction], position) => {
                             const option = options.find(o => o.key === key);
                             return (
@@ -202,7 +220,8 @@ position });
                                     <button
                                         type="button"
                                         onClick={() => onOptionClick(key)}
-                                        title={direction === "asc" ? t("sort_descending") : t("sort_ascending")}
+                                        title={flipLabel(direction)}
+                                        aria-label={`${option?.title ?? key} — ${t("sort_key_position", { position: position + 1 })}. ${flipLabel(direction)}`}
                                         className="flex items-center gap-2 flex-grow min-w-0 text-left cursor-pointer"
                                     >
                                         {option && (
@@ -217,49 +236,65 @@ position });
                                                 : <ArrowUpIcon size={iconSize.smallest}/>}
                                         </span>
                                     </button>
-                                    {keys.length > 1 && (
-                                        <>
-                                            <IconButton
-                                                size="smallest"
-                                                aria-label={t("sort_move_up")}
-                                                title={t("sort_move_up")}
-                                                disabled={position === 0}
-                                                onClick={() => moveKey(position, -1)}
-                                            >
-                                                <ChevronUpIcon size={iconSize.smallest}/>
-                                            </IconButton>
-                                            <IconButton
-                                                size="smallest"
-                                                aria-label={t("sort_move_down")}
-                                                title={t("sort_move_down")}
-                                                disabled={position === keys.length - 1}
-                                                onClick={() => moveKey(position, 1)}
-                                            >
-                                                <ChevronDownIcon size={iconSize.smallest}/>
-                                            </IconButton>
-                                        </>
-                                    )}
-                                    <IconButton
-                                        size="smallest"
-                                        aria-label={t("sort_remove_key")}
-                                        title={t("sort_remove_key")}
-                                        onClick={() => removeKey(key)}
-                                    >
-                                        <XIcon size={iconSize.smallest}/>
-                                    </IconButton>
+                                    {/* Ruled off from the key itself. The row
+                                        carries two arrows that mean different
+                                        things — the direction this key runs, and
+                                        which key outranks which — and side by
+                                        side at 14px they read as one control
+                                        with a stutter. The rule says where the
+                                        key ends and the controls on it begin. */}
+                                    <div className={cls(
+                                        "flex-shrink-0 flex items-center gap-0.5 ml-1 pl-1 border-l",
+                                        defaultBorderMixin
+                                    )}>
+                                        {keys.length > 1 && (
+                                            <>
+                                                <IconButton
+                                                    size="smallest"
+                                                    aria-label={t("sort_move_up")}
+                                                    title={t("sort_move_up")}
+                                                    disabled={position === 0}
+                                                    onClick={() => moveKey(position, -1)}
+                                                >
+                                                    <ChevronUpIcon size={iconSize.smallest}/>
+                                                </IconButton>
+                                                <IconButton
+                                                    size="smallest"
+                                                    aria-label={t("sort_move_down")}
+                                                    title={t("sort_move_down")}
+                                                    disabled={position === keys.length - 1}
+                                                    onClick={() => moveKey(position, 1)}
+                                                >
+                                                    <ChevronDownIcon size={iconSize.smallest}/>
+                                                </IconButton>
+                                            </>
+                                        )}
+                                        <IconButton
+                                            size="smallest"
+                                            aria-label={t("sort_remove_key")}
+                                            title={t("sort_remove_key")}
+                                            onClick={() => removeKey(key)}
+                                        >
+                                            <XIcon size={iconSize.smallest}/>
+                                        </IconButton>
+                                    </div>
                                 </div>
                             );
                         })}
                     </div>
                 )}
 
-                {inactiveOptions.length > 0 && (
+                {/* Only once there is a key to come *after*. With none, the
+                    "Sort by" heading above already names the list, and an empty
+                    caption here left a band of padding that read as a divider
+                    between two groups where there was only one. */}
+                {keys.length > 0 && inactiveOptions.length > 0 && (
                     <Typography
                         variant="caption"
                         color="secondary"
                         className="font-medium uppercase tracking-wider px-3 pt-2 pb-1"
                     >
-                        {keys.length > 0 ? t("sort_then_by") : ""}
+                        {t("sort_then_by")}
                     </Typography>
                 )}
 
@@ -276,8 +311,14 @@ position });
                             <button
                                 key={key}
                                 type="button"
-                                role="menuitemradio"
-                                aria-checked={false}
+                                // Not `menuitemradio`: a sort is a *list* of
+                                // keys, so picking one does not unpick another,
+                                // and the role announced the opposite. There is
+                                // no `role="menu"` around this either, which
+                                // left the radio orphaned as well as wrong.
+                                aria-label={keys.length > 0
+                                    ? `${t("sort_then_by")} ${title}`
+                                    : `${t("sort_by")} ${title}`}
                                 disabled={disabled}
                                 onClick={() => onOptionClick(key)}
                                 className={cls(

package/src/components/DetailViewBinding.tsx

@@ -383,7 +383,12 @@ entityId }
                             openEntityMode={layout} />
                         : <div className="flex items-center justify-center w-full h-full p-3">
                             <Typography variant={"label"}>
-                                {t("save_entity_before_subcollections") ?? "You need to save your entity before adding additional collections"}
+                                {/* No `?? "…"` here: `t` returns the key itself
+                                    when it cannot find one, never null, so the
+                                    fallback never ran and this rendered the raw
+                                    `save_entity_before_subcollections`. The key
+                                    exists now, in all seven locales. */}
+                                {t("save_entity_before_subcollections")}
                             </Typography>
                         </div>)
                 }