@rebasepro/app 0.14.0 → 0.14.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/app",
   "type": "module",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Rebase core — framework-agnostic runtime for data-driven admin panels",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -52,12 +52,12 @@
     "magic-string": "^0.30.0",
     "notistack": "^3.0.2",
     "react-i18next": "^17.0.11",
-    "@rebasepro/admin-types": "0.14.0",
-    "@rebasepro/common": "0.14.0",
-    "@rebasepro/forms": "0.14.0",
-    "@rebasepro/types": "0.14.0",
-    "@rebasepro/ui": "0.14.0",
-    "@rebasepro/utils": "0.14.0"
+    "@rebasepro/admin-types": "0.14.1",
+    "@rebasepro/types": "0.14.1",
+    "@rebasepro/forms": "0.14.1",
+    "@rebasepro/common": "0.14.1",
+    "@rebasepro/utils": "0.14.1",
+    "@rebasepro/ui": "0.14.1"
   },
   "peerDependencies": {
     "react": ">=19.2.7",
@@ -138,7 +138,7 @@
     "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json && pnpm exec esbuild src/vitePlugin.ts --platform=node --format=esm --outfile=dist/vitePlugin.js && node ../../scripts/assert-build-output.mjs",
     "test:lint": "eslint \"src/**\" --quiet",
     "test": "jest --passWithNoTests",
-    "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",
+    "clean": "rm -rf dist && find ./src \\( -name '*.js' -o -name '*.d.ts' \\) -type f | xargs rm -f",
     "generateIcons": "ts-node --esm src/icons/generateIcons.ts"
   }
 }

package/src/components/Debug/UIReferenceView.tsx

@@ -602,7 +602,14 @@ selected: true }, { name: "Tags" }].map(c => (
                         {(["h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "caption", "label", "button"] as const).map(v => (
                             <div key={v} className={cls("flex items-baseline gap-4 border-b pb-3 last:border-0", defaultBorderMixin)}>
                                 <span className="w-24 shrink-0 text-xs text-surface-400 font-mono">{v}</span>
-                                <Typography variant={v}>The quick brown fox jumps over the lazy dog</Typography>
+                                {/* `component="p"` keeps the variant's styling but not its
+                                    element. Rendering the specimen with its native tag put a
+                                    real <h1> — "The quick brown fox jumps over the lazy dog" —
+                                    plus h2-h6 into the document outline of every page that
+                                    embeds this view, including the public rebase.pro/ui gallery,
+                                    where it competed with the page's actual heading. The class
+                                    carries the type, so this renders identically. */}
+                                <Typography variant={v} component="p">The quick brown fox jumps over the lazy dog</Typography>
                             </div>
                         ))}
                     </div>

package/src/components/Debug/UIStyleGuide.tsx

@@ -34,7 +34,10 @@ export const UIStyleGuide = () => {
                     {typographyVariants.map(variant => (
                         <div key={variant} className="flex items-center gap-4 border-b border-surface-100 dark:border-surface-950 pb-4 last:border-0">
                             <span className="w-24 text-[10px] uppercase tracking-wider text-text-disabled font-mono">{variant}</span>
-                            <Typography variant={variant}>
+                            {/* component="p" keeps the variant's styling without emitting a
+                                real h1-h6 into the host page's document outline. See the
+                                matching note in UIReferenceView. */}
+                            <Typography variant={variant} component="p">
                                 The quick brown fox jumps over the lazy dog ({variant})
                             </Typography>
                         </div>

package/src/components/Debug/crm-dashboard/CrmDashboardDemo.tsx

@@ -944,7 +944,11 @@ export function CrmDashboardDemo() {
                 <div className="flex flex-col sm:flex-row sm:items-end justify-between mb-6 gap-4">
                     <div>
                         <Typography variant="h4" className="tracking-tight">
-                            {getGreeting()} 👋
+                            {/* No emoji: this demo renders inside the public rebase.pro/ui
+                                gallery, and emoji render differently on every platform,
+                                cannot be recoloured, and read as a placeholder for a design
+                                decision nobody made. The greeting carries itself. */}
+                            {getGreeting()}
                         </Typography>
                         <Typography variant="body2" color="secondary" className="mt-0.5">
                             {getFormattedDate()} — here&apos;s your crm overview.

package/src/components/LoginView/LoginView.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useId, useRef, useState } from "react";
+import React, { ReactNode, useCallback, useEffect, useId, useRef, useState } from "react";
 
 /** Google Identity Services SDK — injected by the GIS <script> tag. */
 declare global {
@@ -145,11 +145,18 @@ export interface LoginViewProps {
     defaultPassword?: string;
 
     /**
-     * When set, the email/password forms render a "Join the newsletter"
-     * opt-in checkbox. Called with the address that just authenticated —
-     * sign-in or registration — if the box was ticked. Wire it to whatever
-     * stores the subscription; failures are the callback's problem, the
-     * login flow never waits on it.
+     * When set, a "Join the newsletter" opt-in checkbox is offered. Called with
+     * the address that just authenticated — by any method — if the box was
+     * ticked. Wire it to whatever stores the subscription; failures are the
+     * callback's problem, the login flow never waits on it.
+     *
+     * The checkbox sits on the **provider screen**, beside the buttons that
+     * choose how to sign in, rather than on the credentials form. It is a
+     * decision about the visitor, not about the password: asking on the
+     * credentials form put it in front of only the people who got that far by
+     * typing an address, so anyone signing in with Google was never offered it
+     * at all. Bootstrap mode is the exception — there is no provider screen
+     * there, so the form keeps it.
      */
     onNewsletterOptIn?: (email: string) => void;
 }
@@ -225,10 +232,32 @@ export function LoginView({
     const [mode, setMode] = useState<AuthMode>("buttons");
     const [fadeIn, setFadeIn] = useState(false);
     const [viewVisible, setViewVisible] = useState(true);
-    // Lives here, not in LoginForm: the form unmounts on every login↔register
-    // switch, and losing the tick on a mode change would silently drop opt-ins.
+    // Lives here, not in LoginForm: the box is ticked on the provider screen
+    // and read after a sign-in that happens one or two screens later, so it has
+    // to outlive both. The form also unmounts on every login↔register switch.
     const [newsletterOptIn, setNewsletterOptIn] = useState(false);
 
+    // The controller as of the latest render. A provider callback resolves long
+    // after the click that started it, and the `authController` captured in that
+    // closure is the one from the render that mounted the button — which, for a
+    // controller replaced on each render, has no `user` on it yet.
+    const authControllerRef = useRef(authController);
+    authControllerRef.current = authController;
+
+    /**
+     * Subscribe the address that just authenticated, if the visitor asked for
+     * it. Every sign-in path calls this, which is the point: the checkbox sits
+     * beside the provider buttons, so it has to mean the same thing whichever
+     * one is pressed.
+     *
+     * Only ever from a resolution path — a ticked box on a *failed* attempt
+     * must not subscribe an address nobody proved they control.
+     */
+    const subscribeIfOptedIn = useCallback((email?: string | null) => {
+        if (!newsletterOptIn || !onNewsletterOptIn || !email) return;
+        onNewsletterOptIn(email);
+    }, [newsletterOptIn, onNewsletterOptIn]);
+
     const switchMode = (newMode: AuthMode) => {
         setViewVisible(false);
         setTimeout(() => {
@@ -388,9 +417,10 @@ export function LoginView({
                             bootstrapMode={true}
                             defaultEmail={defaultEmail}
                             defaultPassword={defaultPassword}
-                            onNewsletterOptIn={onNewsletterOptIn}
+                            onSignedIn={subscribeIfOptedIn}
                             newsletterOptIn={newsletterOptIn}
                             setNewsletterOptIn={setNewsletterOptIn}
+                            showNewsletterOptIn={Boolean(onNewsletterOptIn)}
                         />
                     )}
 
@@ -419,6 +449,42 @@ export function LoginView({
                                             {topComponent}
                                         </div>
                                     )}
+                                    {/* Above the buttons, not below them: it is a
+                                        condition on the sign-in you are about to
+                                        make, and it reads as one more line of the
+                                        consent block a host puts in
+                                        `topComponent` — the demo's privacy tick
+                                        sits directly above it.
+
+                                        Which is why it pulls back most of the
+                                        column's `gap-3`: at the full gap the two
+                                        ticks sat 24px apart and read as two
+                                        unrelated questions rather than one
+                                        consent block. The offset is against this
+                                        column's own gap, not against whatever
+                                        margins the host's `topComponent` happens
+                                        to carry, so it lands the same way under
+                                        any of them — but only when there is
+                                        something above to hug. With no header
+                                        and no `topComponent` this row is the
+                                        column's first child, and pulling back a
+                                        gap that is not there would crowd it into
+                                        the logo. */}
+                                    {onNewsletterOptIn && (
+                                        <label className={cls(
+                                            "flex items-center gap-2 cursor-pointer",
+                                            (topComponent || title || subtitle) && "-mt-3"
+                                        )}>
+                                            <Checkbox
+                                                checked={newsletterOptIn}
+                                                onCheckedChange={(checked) => setNewsletterOptIn(checked === true)}
+                                                size="small"
+                                            />
+                                            <Typography variant="caption" color="secondary" className="select-none">
+                                                {t("join_newsletter")}
+                                            </Typography>
+                                        </label>
+                                    )}
                                     <LoginButton
                                         disabled={disabled}
                                         text={"Sign in with email"}
@@ -430,6 +496,7 @@ export function LoginView({
                                             disabled={disabled}
                                             googleClientId={googleClientId}
                                             authController={authController}
+                                            onSignedIn={() => subscribeIfOptedIn(authControllerRef.current.user?.email)}
                                         />
                                     )}
                                     {hasGitHubLogin && githubClientId && (
@@ -473,9 +540,7 @@ export function LoginView({
                                     switchToRegister={showRegistration ? () => switchMode("register") : undefined}
                                     defaultEmail={defaultEmail}
                                     defaultPassword={defaultPassword}
-                                    onNewsletterOptIn={onNewsletterOptIn}
-                                    newsletterOptIn={newsletterOptIn}
-                                    setNewsletterOptIn={setNewsletterOptIn}
+                                    onSignedIn={subscribeIfOptedIn}
                                 />
                             )}
 
@@ -491,9 +556,7 @@ export function LoginView({
                                     switchToLogin={() => switchMode("login")}
                                     defaultEmail={defaultEmail}
                                     defaultPassword={defaultPassword}
-                                    onNewsletterOptIn={onNewsletterOptIn}
-                                    newsletterOptIn={newsletterOptIn}
-                                    setNewsletterOptIn={setNewsletterOptIn}
+                                    onSignedIn={subscribeIfOptedIn}
                                 />
                             )}
 
@@ -557,13 +620,21 @@ const GoogleIcon = () => (
 function GoogleLoginButton({
     disabled,
     googleClientId,
-    authController
+    authController,
+    onSignedIn
 }: {
     disabled?: boolean,
     googleClientId: string,
-    authController: AuthControllerExtended
+    authController: AuthControllerExtended,
+    /** Called once the controller has accepted the provider's code. */
+    onSignedIn?: () => void
 }) {
     const codeClientRef = useRef<{ requestCode(): void } | null>(null);
+    // The code client is built once and its callback closes over this render's
+    // props forever. A ref keeps the callback reaching the *current* handler
+    // rather than the one that existed when Google's script happened to load.
+    const onSignedInRef = useRef(onSignedIn);
+    onSignedInRef.current = onSignedIn;
 
     useEffect(() => {
         if (!authController.googleLogin) return;
@@ -587,6 +658,10 @@ function GoogleLoginButton({
                         code: response.code,
                         redirectUri: "postmessage"
                     });
+                    // After the await, and only on the resolution path: a
+                    // newsletter tick must not subscribe an address whose
+                    // sign-in the controller rejected.
+                    onSignedInRef.current?.();
                 } catch (err: unknown) {
                     console.error("Google login error:", err);
                 }
@@ -692,9 +767,10 @@ function LoginForm({
     switchToLogin,
     defaultEmail,
     defaultPassword,
-    onNewsletterOptIn,
+    onSignedIn,
     newsletterOptIn = false,
-    setNewsletterOptIn
+    setNewsletterOptIn,
+    showNewsletterOptIn = false
 }: {
     onClose: () => void,
     onForgotPassword?: () => void,
@@ -707,9 +783,15 @@ function LoginForm({
     switchToLogin?: () => void,
     defaultEmail?: string,
     defaultPassword?: string,
-    onNewsletterOptIn?: (email: string) => void,
+    /** The address the controller just accepted, reported after every success. */
+    onSignedIn?: (email: string) => void,
     newsletterOptIn?: boolean,
-    setNewsletterOptIn?: (checked: boolean) => void
+    setNewsletterOptIn?: (checked: boolean) => void,
+    /**
+     * Render the newsletter opt-in here. Only bootstrap mode does: everywhere
+     * else it lives on the provider screen, which bootstrap mode never shows.
+     */
+    showNewsletterOptIn?: boolean
 }) {
     const passwordRef = useRef<HTMLInputElement | null>(null);
     const { t } = useTranslation();
@@ -749,16 +831,14 @@ function LoginForm({
     // Fires only on the resolution path, i.e. after the controller accepted
     // the credentials — a ticked box on a failed attempt must not subscribe
     // an address its owner never proved they control.
-    function subscribeIfOptedIn(email: string) {
-        if (newsletterOptIn && onNewsletterOptIn) {
-            onNewsletterOptIn(email);
-        }
+    function reportSignedIn(email: string) {
+        onSignedIn?.(email);
     }
 
     function handleEnterPassword() {
         if (email && password && authController.emailPasswordLogin) {
             void Promise.resolve(authController.emailPasswordLogin(email, password))
-                .then(() => subscribeIfOptedIn(email))
+                .then(() => reportSignedIn(email))
                 .catch(() => undefined);
         }
     }
@@ -766,7 +846,7 @@ function LoginForm({
     function handleRegistration() {
         if (email && password && authController.register) {
             void Promise.resolve(authController.register(email, password, displayName))
-                .then(() => subscribeIfOptedIn(email))
+                .then(() => reportSignedIn(email))
                 .catch(() => undefined);
         }
     }
@@ -891,7 +971,10 @@ function LoginForm({
                 </div>
             )}
 
-            {onNewsletterOptIn && (
+            {/* Bootstrap mode only — see `showNewsletterOptIn`. Every other
+                route to this form came through the provider screen, which is
+                where the box now is. */}
+            {showNewsletterOptIn && (
                 <label className="flex items-center gap-2 cursor-pointer mt-1 mb-1">
                     <Checkbox
                         checked={newsletterOptIn}

package/src/components/common/useDataTableController.tsx

@@ -7,7 +7,8 @@ import { useDataOrder } from "../../hooks/data/useDataOrder";
 import { populateFetchCache } from "../../hooks/data/useFetch";
 import { toFindParams } from "../../hooks/data/collectionQuery";
 import { getRelationIncludeParams } from "../../util/previews";
-import { Entity, EntityReference, EntityRelation, FilterValues, User, WhereFilterOp, FindResponse } from "@rebasepro/types";
+import { Entity, EntityReference, EntityRelation, FilterValues, OrderBySpec, OrderByTuple, User, WhereFilterOp, FindResponse } from "@rebasepro/types";
+import { normalizeOrderBy, serializeOrderBy } from "@rebasepro/common";
 import { EntityTableController, RebaseContext, SelectedCellProps, AdminCollection } from "@rebasepro/admin-types";
 import { ScrollRestorationController } from "./useScrollRestoration";
 
@@ -96,17 +97,21 @@ export function useDataTableController<M extends Record<string, any> = any, USER
     });
 
     const checkFilterCombination = useCallback((filterValues: FilterValues<any>,
-        sortBy?: [string, "asc" | "desc"]) => {
+        sortBy?: OrderByTuple[]) => {
         // PostgREST/SQL can handle arbitrary filter/sort combinations natively.
         return true;
     }, []);
 
+    // The collection's default, in the list form the controller works in.
+    // `collection.sort` accepts either spelling so a one-key default stays the
+    // one-liner it always was.
     const sortInternal = useMemo(() => {
-        if (sort && fixedFilter && !checkFilterCombination(fixedFilter, sort)) {
+        const keys = normalizeOrderBy(sort as OrderBySpec | undefined);
+        if (keys && fixedFilter && !checkFilterCombination(fixedFilter, keys)) {
             console.warn("Initial sort is not compatible with the force filter. Ignoring initial sort");
             return undefined;
         }
-        return sort;
+        return keys;
     }, [sort, fixedFilter]);
 
     const {
@@ -115,7 +120,7 @@ export function useDataTableController<M extends Record<string, any> = any, USER
     } = parseFilterAndSort(location.search);
 
     const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string> | (string & {})> | undefined>(fixedFilter ?? (updateUrl ? filterUrl : undefined) ?? defaultFilter ?? undefined);
-    const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string> | (string & {}), "asc" | "desc"] | undefined>((updateUrl ? sortUrl : undefined) ?? sortInternal);
+    const [sortBy, setSortBy] = React.useState<OrderByTuple<Extract<keyof M, string> | (string & {})>[] | undefined>((updateUrl ? sortUrl : undefined) ?? sortInternal);
 
     // Sync filter/sort state from URL on browser navigation (back/forward).
     // Skip initial mount since useState initializers already handle URL params + collection defaults.
@@ -136,7 +141,7 @@ export function useDataTableController<M extends Record<string, any> = any, USER
         if (urlSortBy && fixedFilter && !checkFilterCombination(fixedFilter, urlSortBy)) {
             console.warn("URL sort is not compatible with the force filter.");
         } else {
-            setSortBy(urlSortBy as [Extract<keyof M, string> | (string & {}), "asc" | "desc"] | undefined);
+            setSortBy(urlSortBy as OrderByTuple<Extract<keyof M, string> | (string & {})>[] | undefined);
         }
 
         // Sync search string from URL
@@ -163,8 +168,10 @@ export function useDataTableController<M extends Record<string, any> = any, USER
 
     const [itemCount, setItemCount] = React.useState<number | undefined>(paginationEnabled ? initialItemCount : undefined);
 
-    const sortByProperty = sortBy ? sortBy[0] : undefined;
-    const currentSort = sortBy ? sortBy[1] : undefined;
+    // The whole sort, as one string, so the effect below re-runs when any key
+    // changes — a `sortBy` array is a new reference on every render and would
+    // re-subscribe on each one if used as a dependency directly.
+    const sortKey = sortBy ? serializeOrderBy(sortBy) : undefined;
 
     const context: RebaseContext<USER> = useRebaseContext();
 
@@ -253,7 +260,9 @@ export function useDataTableController<M extends Record<string, any> = any, USER
 
         // filterValues is already FilterValues — pass directly to the accessor
         const whereParams = filterValues && Object.keys(filterValues).length > 0 ? filterValues : undefined;
-        const orderByParams: [string, "asc" | "desc"] | undefined = sortBy ? [String(sortBy[0]), sortBy[1]] : undefined;
+        const orderByParams = sortBy && sortBy.length > 0
+            ? sortBy.map(([field, direction]) => [String(field), direction] as OrderByTuple)
+            : undefined;
 
         let unsubscribe: (() => void) | undefined;
 
@@ -277,7 +286,7 @@ export function useDataTableController<M extends Record<string, any> = any, USER
         }
 
         return unsubscribe;
-    }, [dataClient, path, itemCount, currentSort, sortByProperty, filterValues, searchString]);
+    }, [dataClient, path, itemCount, sortKey, filterValues, searchString]);
 
     const orderedData = useDataOrder({
         data: rawData,
@@ -336,7 +345,7 @@ export function useDataTableController<M extends Record<string, any> = any, USER
 
 function useUpdateUrl<M extends Record<string, any> = any>(
     filterValues: FilterValues<Extract<keyof M, string>> | undefined,
-    sortBy: [Extract<keyof M, string>, "asc" | "desc"] | undefined,
+    sortBy: OrderByTuple<Extract<keyof M, string>>[] | undefined,
     searchString: string | undefined,
     updateUrl: boolean | undefined
 ) {
@@ -371,11 +380,15 @@ function useUpdateUrl<M extends Record<string, any> = any>(
     }, [filterValues, sortBy, searchString, updateUrl]);
 }
 
-function encodeFilterAndSort(filterValues?: FilterValues<string>, sortBy?: [string, "asc" | "desc"] | undefined) {
+function encodeFilterAndSort(filterValues?: FilterValues<string>, sortBy?: OrderByTuple[] | undefined) {
     const entries: Record<string, string> = {};
-    if (sortBy) {
-        entries["__sort"] = encodeURIComponent(sortBy[0]);
-        entries["__sort_order"] = encodeURIComponent(sortBy[1]);
+    if (sortBy && sortBy.length > 0) {
+        // Comma-separated, positionally paired. A single key encodes exactly as
+        // it did before — `__sort=name&__sort_order=asc` — so links already out
+        // in the world keep working, and a reload of a two-key sort no longer
+        // silently comes back sorted by the first key alone.
+        entries["__sort"] = sortBy.map(([field]) => encodeURIComponent(field)).join(",");
+        entries["__sort_order"] = sortBy.map(([, direction]) => direction).join(",");
     }
     if (filterValues) {
         Object.entries(filterValues).forEach(([key, value]) => {
@@ -426,14 +439,23 @@ function encodeFilterAndSort(filterValues?: FilterValues<string>, sortBy?: [stri
 
 function parseFilterAndSort<M>(search: string): {
     filterValues: FilterValues<string> | undefined,
-    sortBy?: [Extract<keyof M, string>, "asc" | "desc"]
+    sortBy?: OrderByTuple<Extract<keyof M, string>>[]
 } {
     const entries = new URLSearchParams(search);
     const filterValues: FilterValues<string> = {};
-    let sortBy: [string, "asc" | "desc"] | undefined = undefined;
+    let sortBy: OrderByTuple[] | undefined = undefined;
     entries.forEach((value, key) => {
         if (key === "__sort") {
-            sortBy = [decodeURIComponent(value), entries.get("__sort_order") as "asc" | "desc"];
+            const directions = (entries.get("__sort_order") ?? "").split(",");
+            const keys = value
+                .split(",")
+                .map((field) => decodeURIComponent(field).trim())
+                .filter(Boolean)
+                // A direction missing from the URL — a hand-written link, or the
+                // one-key form of an older bookmark — is ascending, the same
+                // reading `?orderBy=name` gets everywhere else.
+                .map((field, index): OrderByTuple => [field, directions[index] === "desc" ? "desc" : "asc"]);
+            sortBy = keys.length > 0 ? keys : undefined;
         } else if (key.endsWith("_op")) {
             const field = key.replace("_op", "");
             const filterOp = decodeURIComponent(value) as WhereFilterOp;

package/src/hooks/data/collectionQuery.ts

@@ -1,4 +1,4 @@
-import type { FindParams, FilterValues, LogicalCondition } from "@rebasepro/types";
+import type { FindParams, FilterValues, LogicalCondition, OrderBySpec } from "@rebasepro/types";
 
 /**
  * The one place a collection read's parameters are assembled.
@@ -24,12 +24,12 @@ export interface CollectionQueryInput<M extends Record<string, unknown>> {
     logical?: LogicalCondition;
     /**
      * Loosened from `FindParams["orderBy"]` on purpose: callers hold the sort
-     * as a plain `[string, direction]` read off user config or a URL, where the
-     * column is not statically known. Narrowing it here would push a cast onto
-     * every call site, which is the kind of friction that sends people back to
-     * hand-building the object this exists to replace.
+     * as plain `[string, direction]` pairs read off user config or a URL, where
+     * the columns are not statically known. Narrowing it here would push a cast
+     * onto every call site, which is the kind of friction that sends people back
+     * to hand-building the object this exists to replace.
      */
-    orderBy?: [string, "asc" | "desc"];
+    orderBy?: OrderBySpec;
     limit?: number;
     offset?: number;
     page?: number;

package/src/hooks/useTranslation.ts

@@ -24,8 +24,13 @@ export function useTranslation() {
      * Also supports i18next interpolation variables, e.g.
      *   t("add_to_field", { fieldName: "Tags" })
      *   t("error_deleting", { message: err.message })
+     *   t("sort_key_position", { position: 2 })
+     *
+     * Numbers are accepted as well as strings: i18next interpolates them
+     * either way, and a signature that took only strings pushed a `String()`
+     * onto every call site with a count in it — `{{count}}`, `{{position}}`.
      */
-    const typedT = useCallback((key: string, vars?: Record<string, string>): string =>
+    const typedT = useCallback((key: string, vars?: Record<string, string | number>): string =>
         t(key, vars) as string, [t]);
 
     return useMemo(() => ({ t: typedT,

package/src/locales/de.ts

@@ -43,6 +43,16 @@ export const de: RebaseTranslations = {
     clear_sort: "Sortierung löschen",
     sort: "Sortieren",
     sort_by: "Sortieren nach",
+    sort_then_by: "Dann nach",
+    sort_ascending: "Aufsteigend sortieren",
+    sort_descending: "Absteigend sortieren",
+    sort_remove: "Sortierung entfernen",
+    sort_move_up: "Diesen Schlüssel wichtiger machen",
+    sort_move_down: "Diesen Schlüssel weniger wichtig machen",
+    sort_remove_key: "Diesen Sortierschlüssel entfernen",
+    sort_key_position: "Sortierschlüssel {{position}}",
+    sort_shift_click_hint: "Umschalt+Klick, um eine Spalte unter der aktuellen Sortierung hinzuzufügen",
+    save_entity_before_subcollections: "Du musst den Eintrag speichern, bevor du weitere Sammlungen hinzufügst",
     clear_all: "Alle löschen",
     no_items: "Keine Elemente",
     no_entries_found: "Keine Einträge gefunden",

package/src/locales/en.ts

@@ -53,6 +53,16 @@ export const en: RebaseTranslations = {
     clear_sort: "Clear sort",
     sort: "Sort",
     sort_by: "Sort by",
+    sort_then_by: "Then by",
+    sort_ascending: "Sort ascending",
+    sort_descending: "Sort descending",
+    sort_remove: "Remove sort",
+    sort_move_up: "Make this key more important",
+    sort_move_down: "Make this key less important",
+    sort_remove_key: "Remove this sort key",
+    sort_key_position: "Sort key {{position}}",
+    sort_shift_click_hint: "Shift-click to add a column under the current sort",
+    save_entity_before_subcollections: "You need to save your entity before adding additional collections",
     clear_all: "Clear all",
     no_items: "No items",
     no_entries_found: "No entries found",

package/src/locales/es.ts

@@ -51,6 +51,16 @@ export const es: RebaseTranslations = {
     clear_sort: "Borrar orden",
     sort: "Ordenar",
     sort_by: "Ordenar por",
+    sort_then_by: "Luego por",
+    sort_ascending: "Ordenar ascendente",
+    sort_descending: "Ordenar descendente",
+    sort_remove: "Quitar orden",
+    sort_move_up: "Dar más importancia a esta clave",
+    sort_move_down: "Dar menos importancia a esta clave",
+    sort_remove_key: "Quitar esta clave de orden",
+    sort_key_position: "Clave de orden {{position}}",
+    sort_shift_click_hint: "Mayús+clic para añadir una columna bajo el orden actual",
+    save_entity_before_subcollections: "Debes guardar la entidad antes de añadir colecciones adicionales",
     clear_all: "Borrar todo",
     no_items: "Sin elementos",
     no_entries_found: "No se encontraron entradas",

package/src/locales/fr.ts

@@ -43,6 +43,16 @@ export const fr: RebaseTranslations = {
     clear_sort: "Effacer le tri",
     sort: "Trier",
     sort_by: "Trier par",
+    sort_then_by: "Puis par",
+    sort_ascending: "Trier par ordre croissant",
+    sort_descending: "Trier par ordre décroissant",
+    sort_remove: "Supprimer le tri",
+    sort_move_up: "Rendre cette clé plus importante",
+    sort_move_down: "Rendre cette clé moins importante",
+    sort_remove_key: "Supprimer cette clé de tri",
+    sort_key_position: "Clé de tri {{position}}",
+    sort_shift_click_hint: "Maj+clic pour ajouter une colonne sous le tri actuel",
+    save_entity_before_subcollections: "Vous devez enregistrer l'entité avant d'ajouter des collections supplémentaires",
     clear_all: "Tout effacer",
     no_items: "Aucun élément",
     no_entries_found: "Aucune entrée trouvée",

package/src/locales/hi.ts

@@ -43,6 +43,16 @@ export const hi: RebaseTranslations = {
     clear_sort: "सॉर्ट साफ़ करें",
     sort: "क्रमबद्ध करें",
     sort_by: "इसके अनुसार क्रमबद्ध करें",
+    sort_then_by: "फिर इसके अनुसार",
+    sort_ascending: "आरोही क्रम में लगाएँ",
+    sort_descending: "अवरोही क्रम में लगाएँ",
+    sort_remove: "क्रम हटाएँ",
+    sort_move_up: "इस कुंजी को अधिक महत्व दें",
+    sort_move_down: "इस कुंजी को कम महत्व दें",
+    sort_remove_key: "यह क्रम कुंजी हटाएँ",
+    sort_key_position: "क्रम कुंजी {{position}}",
+    sort_shift_click_hint: "वर्तमान क्रम के नीचे कॉलम जोड़ने के लिए Shift+क्लिक करें",
+    save_entity_before_subcollections: "अतिरिक्त संग्रह जोड़ने से पहले आपको एंटिटी सहेजनी होगी",
     clear_all: "सभी साफ़ करें",
     no_items: "कोई आइटम नहीं",
     no_entries_found: "कोई प्रविष्टि नहीं मिली",

package/src/locales/it.ts

@@ -43,6 +43,16 @@ export const it: RebaseTranslations = {
     clear_sort: "Cancella ordinamento",
     sort: "Ordina",
     sort_by: "Ordina per",
+    sort_then_by: "Poi per",
+    sort_ascending: "Ordina in modo crescente",
+    sort_descending: "Ordina in modo decrescente",
+    sort_remove: "Rimuovi ordinamento",
+    sort_move_up: "Rendi questa chiave più importante",
+    sort_move_down: "Rendi questa chiave meno importante",
+    sort_remove_key: "Rimuovi questa chiave di ordinamento",
+    sort_key_position: "Chiave di ordinamento {{position}}",
+    sort_shift_click_hint: "Maiusc+clic per aggiungere una colonna sotto l'ordinamento attuale",
+    save_entity_before_subcollections: "Devi salvare l'entità prima di aggiungere altre raccolte",
     clear_all: "Cancella tutto",
     no_items: "Nessun elemento",
     no_entries_found: "Nessuna voce trovata",