@rebasepro/app 0.12.0 → 0.12.1-canary.g35be8cb

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/app",
   "type": "module",
-  "version": "0.12.0",
+  "version": "0.12.1-canary.g35be8cb",
   "description": "Rebase core — framework-agnostic runtime for data-driven admin panels",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -18,7 +18,7 @@
   "types": "./dist/index.d.ts",
   "source": "src/index.ts",
   "engines": {
-    "node": ">=20"
+    "node": ">=22.22.0"
   },
   "keywords": [
     "rebase",
@@ -45,48 +45,47 @@
   },
   "dependencies": {
     "compressorjs": "^1.3.0",
-    "fast-equals": "6.0.0",
-    "fuse.js": "^7.4.2",
-    "i18next": "^26.3.1",
-    "lucide-react": "1.18.0",
+    "fast-equals": "6.0.2",
+    "fuse.js": "^7.5.0",
+    "i18next": "^26.3.6",
+    "lucide-react": "1.27.0",
     "magic-string": "^0.30.0",
     "notistack": "^3.0.2",
-    "react-i18next": "^17.0.8",
-    "@rebasepro/admin-types": "0.12.0",
-    "@rebasepro/types": "0.12.0",
-    "@rebasepro/ui": "0.12.0",
-    "@rebasepro/forms": "0.12.0",
-    "@rebasepro/utils": "0.12.0",
-    "@rebasepro/common": "0.12.0"
+    "react-i18next": "^17.0.11",
+    "@rebasepro/common": "0.12.1-canary.g35be8cb",
+    "@rebasepro/admin-types": "0.12.1-canary.g35be8cb",
+    "@rebasepro/forms": "0.12.1-canary.g35be8cb",
+    "@rebasepro/types": "0.12.1-canary.g35be8cb",
+    "@rebasepro/ui": "0.12.1-canary.g35be8cb",
+    "@rebasepro/utils": "0.12.1-canary.g35be8cb"
   },
   "peerDependencies": {
-    "react": ">=19.0.0",
-    "react-dom": ">=19.0.0",
-    "react-router": "^7.0.0",
-    "react-router-dom": "^7.0.0",
+    "react": ">=19.2.7",
+    "react-dom": ">=19.2.7",
+    "react-router": "^8.3.0",
     "typescript": ">=5.0.0"
   },
   "devDependencies": {
     "@jest/globals": "^30.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
-    "@types/node": "^25.9.3",
+    "@types/node": "^26.1.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/react-measure": "^2.0.12",
-    "@vitejs/plugin-react": "^6.0.2",
+    "@vitejs/plugin-react": "^6.0.4",
     "babel-plugin-react-compiler": "beta",
     "cross-env": "^10.1.0",
     "esbuild": "^0.28.1",
     "jest": "^30.4.2",
     "jest-environment-jsdom": "^30.4.1",
-    "react-router-dom": "^7.17.0",
-    "ts-jest": "^29.4.11",
+    "react-router": "^8.3.0",
+    "ts-jest": "^29.4.12",
     "tsd": "^0.33.0",
     "typescript": "^6.0.3",
-    "vite": "^8.0.16"
+    "vite": "^8.1.5"
   },
   "files": [
     "dist",
@@ -104,13 +103,15 @@
   },
   "jest": {
     "transform": {
-      "^.+\\.tsx?$": "ts-jest"
+      "^.+\\.tsx?$": "ts-jest",
+      "^.+\\.m?jsx?$": "<rootDir>/../../scripts/jest/react-router-esm-transform.cjs"
     },
     "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
     "moduleFileExtensions": [
       "ts",
       "tsx",
       "js",
+      "mjs",
       "jsx",
       "json",
       "node"
@@ -127,7 +128,10 @@
       "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
       "^@rebasepro/([a-z0-9-]+)$": "<rootDir>/../$1/src/index.ts",
       "^@rebasepro/admin-types$": "<rootDir>/../admin-types/src/index.ts"
-    }
+    },
+    "transformIgnorePatterns": [
+      "node_modules/(?!.*(?:react-router|cookie-es|fractional-indexing))"
+    ]
   },
   "scripts": {
     "watch": "vite build --watch",

package/src/auth/api.ts

@@ -10,6 +10,7 @@
  */
 
 import { RebaseApiError } from "@rebasepro/types";
+import { DEFAULT_API_PATH } from "../hooks/ApiConfigContext";
 
 /**
  * @deprecated Use {@link RebaseApiError} (from `@rebasepro/types`, re-exported by
@@ -113,7 +114,12 @@ export function createAuthConfigCache(): AuthConfigCache {
  * Concurrent calls are deduplicated: only one network request is made
  * and all callers share the same promise.
  */
-export async function fetchAuthConfig(apiUrl: string, cache: AuthConfigCache): Promise<AuthConfigResponse> {
+export async function fetchAuthConfig(
+    apiUrl: string,
+    cache: AuthConfigCache,
+    /** The backend's `basePath`; only needed if it is not the default. */
+    apiPath: string = DEFAULT_API_PATH
+): Promise<AuthConfigResponse> {
     if (cache.cached) {
         return cache.cached;
     }
@@ -123,7 +129,7 @@ export async function fetchAuthConfig(apiUrl: string, cache: AuthConfigCache): P
     }
 
     cache.inflight = (async () => {
-        const response = await fetchWithHandling(`${apiUrl}/api/auth/config`, {
+        const response = await fetchWithHandling(`${apiUrl.replace(/\/+$/, "")}${apiPath}/auth/config`, {
             method: "GET",
             headers: { "Content-Type": "application/json" }
         });

package/src/components/Debug/UIReferenceView.tsx

@@ -687,6 +687,14 @@ selected: true }, { name: "Tags" }].map(c => (
                                 <TextField label="With value" value="Filled value" onChange={() => {}}/>
                                 <TextField label="Error state" error value="Bad value" onChange={() => {}}/>
                                 <TextField label="Disabled" disabled value="Read only" onChange={() => {}}/>
+                                {/* The smaller sizes are the ones dialogs use, and they
+                                    were absent here — which is how a labelled `small`
+                                    field shipped with its label sitting on top of its
+                                    placeholder. Keep all four so the collision is
+                                    visible on this page rather than in a modal. */}
+                                <TextField size="medium" label="Medium" placeholder="Placeholder under the label"/>
+                                <TextField size="small" label="Small" placeholder="Placeholder under the label"/>
+                                <TextField size="smallest" label="Smallest" value="Filled value" onChange={() => {}}/>
                             </div>
                         </div>
                         <div className="col-span-12 sm:col-span-6 flex flex-col gap-4">

package/src/components/NotFoundPage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Button, Typography } from "@rebasepro/ui";
 import { useTranslation } from "../hooks";
 

package/src/components/common/useDataTableController.tsx

@@ -1,6 +1,6 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 
 import { useData, useRebaseContext } from "../../hooks";
 import { useDataOrder } from "../../hooks/data/useDataOrder";

package/src/core/Rebase.tsx

@@ -415,7 +415,11 @@ export function Rebase<USER extends User>(props: RebaseProps<USER>) {
 
     if (resolvedApiUrl) {
         return (
-            <ApiConfigProvider apiUrl={resolvedApiUrl} getAuthToken={authController.getAuthToken}>
+            <ApiConfigProvider
+                apiUrl={resolvedApiUrl}
+                apiPath={client?.apiPath}
+                getAuthToken={authController.getAuthToken}
+            >
                 {content}
             </ApiConfigProvider>
         );

package/src/core/RebaseRouter.tsx

@@ -1,4 +1,5 @@
-import { createBrowserRouter, RouterProvider } from "react-router-dom"
+import { createBrowserRouter } from "react-router"
+import { RouterProvider } from "react-router/dom"
 import { removeInitialAndTrailingSlashes } from "@rebasepro/app";
 
 export function RebaseRouter({

package/src/core/RebaseRoutes.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Route, Routes, useLocation } from "react-router-dom";
+import { Route, Routes, useLocation } from "react-router";
 
 
 /**

package/src/hooks/ApiConfigContext.tsx

@@ -9,9 +9,24 @@ import React, { useContext } from "react";
  */
 export interface ApiConfig {
     apiUrl: string;
+    /**
+     * The path the backend mounts its API under, appended to {@link apiUrl}.
+     *
+     * `"/api"` by default, which is the server's default `basePath`. It is
+     * carried here because a good deal of UI builds request URLs by hand
+     * instead of going through the client's typed methods, and every one of
+     * those sites used to write `/api` as a literal — so a backend configured
+     * with any other `basePath` served an admin panel whose auth-provider
+     * discovery, storage browser, history panel, user picker and Studio tools
+     * all requested paths that did not exist.
+     */
+    apiPath: string;
     getAuthToken?: () => Promise<string | null>;
 }
 
+/** What the server uses when `basePath` is not configured. */
+export const DEFAULT_API_PATH = "/api";
+
 const ApiConfigContext = React.createContext<ApiConfig | undefined>(undefined);
 
 /**
@@ -23,16 +38,43 @@ export function useApiConfig(): ApiConfig | undefined {
 }
 
 /**
- * Provide API configuration (apiUrl, getAuthToken) to the entire subtree.
+ * `apiUrl` and `apiPath` joined, with no trailing slash — the prefix to build a
+ * request URL from.
+ *
+ * Returns `undefined` when there is no provider, so a caller can keep its own
+ * fallback rather than silently requesting a relative path.
+ */
+export function useApiBase(): string | undefined {
+    const config = useApiConfig();
+    if (!config?.apiUrl) return undefined;
+    return config.apiUrl.replace(/\/+$/, "") + (config.apiPath || DEFAULT_API_PATH);
+}
+
+/**
+ * The same prefix, derived from a client rather than from context.
+ *
+ * For the code that holds a `RebaseClient` but sits outside (or above) an
+ * `ApiConfigProvider`. Returns `undefined` when the client has no base URL,
+ * which is the signal every caller already treats as "cannot build a request".
+ */
+export function apiBaseOf(client?: { baseUrl?: string; apiPath?: string }): string | undefined {
+    if (!client?.baseUrl) return undefined;
+    return client.baseUrl.replace(/\/+$/, "") + (client.apiPath || DEFAULT_API_PATH);
+}
+
+/**
+ * Provide API configuration (apiUrl, apiPath, getAuthToken) to the entire subtree.
  * Typically rendered inside `<Rebase>` or at the app root.
  */
 export function ApiConfigProvider({
     apiUrl,
+    apiPath = DEFAULT_API_PATH,
     getAuthToken,
     children
-}: ApiConfig & { children: React.ReactNode }) {
+}: Omit<ApiConfig, "apiPath"> & { apiPath?: string; children: React.ReactNode }) {
     const value = React.useMemo(() => ({ apiUrl,
-getAuthToken }), [apiUrl, getAuthToken]);
+apiPath,
+getAuthToken }), [apiUrl, apiPath, getAuthToken]);
     return (
         <ApiConfigContext.Provider value={value}>
             {children}

package/src/hooks/useAuthSubscription.ts

@@ -8,16 +8,42 @@ export function useAuthSubscription(authClient?: AuthClient): AuthController {
     const currentSession = authClient?.getSession();
     const [user, setUser] = useState<User | null>(currentSession?.user ?? null);
 
-    const [initialLoading, setInitialLoading] = useState(!currentSession);
     const [authLoading, setAuthLoading] = useState(false);
     const [authError, setAuthError] = useState<Error>();
     const [loginSkipped, setLoginSkipped] = useState(false);
     const [extra, setExtra] = useState<any>();
 
+    /**
+     * Whether asking the server "who am I?" could possibly answer.
+     *
+     * A client configured with `persistSession: false` and JSON auth — the
+     * shape used when one client borrows another's credential, as the hosted
+     * Studio does — has no stored session and no auth cookie, so the probe
+     * below is guaranteed to 401. Sending it anyway put three failing
+     * `GET /auth/me` calls on the wire per mount, each one landing in the
+     * *customer's* request log as an authentication failure against their own
+     * backend.
+     *
+     * A client that does not implement the capability is treated as "might
+     * work" — the historical behaviour.
+     */
+    const mayHaveRestorableSession = authClient?.canRestoreSession?.() ?? true;
+
+    /**
+     * `true` only while a probe is genuinely outstanding.
+     *
+     * It used to be seeded from `!currentSession` alone, which left a client
+     * that cannot restore a session — and therefore never runs the probe that
+     * clears the flag — reporting "still loading" forever. Anything gated on
+     * `initialLoading` (a spinner, a redirect to the login view) would never
+     * resolve.
+     */
+    const [initialLoading, setInitialLoading] = useState(!currentSession && mayHaveRestorableSession);
+
     useEffect(() => {
         if (!authClient) return;
         // If we don't have a session initially, try to get user which restores session if a persistent token exists
-        if (!currentSession) {
+        if (!currentSession && mayHaveRestorableSession) {
             setInitialLoading(true);
             authClient.getUser()
                 .then(user => {
@@ -32,7 +58,7 @@ export function useAuthSubscription(authClient?: AuthClient): AuthController {
                     setInitialLoading(false);
                 });
         }
-    }, [authClient, currentSession]);
+    }, [authClient, currentSession, mayHaveRestorableSession]);
 
     useEffect(() => {
         if (!authClient) return;

package/src/hooks/useBackendStorageSource.ts

@@ -10,12 +10,18 @@ import {
     DownloadConfig,
     StorageListResult
 } from "@rebasepro/types";
+import { DEFAULT_API_PATH } from "./ApiConfigContext";
 
 export interface BackendStorageSourceProps {
     /**
      * Backend API URL (e.g., 'http://localhost:3001')
      */
     apiUrl: string;
+    /**
+     * The path the backend mounts its API under. Defaults to the server's own
+     * default; pass the backend's `basePath` if it was configured otherwise.
+     */
+    apiPath?: string;
     /**
      * Function to get the current auth token
      */
@@ -39,10 +45,11 @@ export interface BackendStorageSourceProps {
  */
 export function useBackendStorageSource({
     apiUrl,
+    apiPath = DEFAULT_API_PATH,
     getAuthToken
 }: BackendStorageSourceProps): StorageSource {
 
-    const storageBasePath = `${apiUrl}/api/storage`;
+    const storageBasePath = `${apiUrl.replace(/\/+$/, "")}${apiPath}/storage`;
 
     // Cache for download URLs to avoid redundant API calls
     const urlsCache = useMemo(() => new Map<string, DownloadConfig>(), []);

package/src/hooks/useNavigationBlocker.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
-import { Blocker, BlockerFunction, useBlocker } from "react-router-dom";
+import { Blocker, BlockerFunction, useBlocker } from "react-router";
 
 const IDLE_BLOCKER: Blocker = {
     state: "unblocked",

package/src/hooks/useStudioBridge.tsx

@@ -28,6 +28,32 @@ export interface StudioBridge {
     urlController: UrlController;
     navigationState: NavigationStateController;
     breadcrumbs: BreadcrumbsController;
+    capabilities: StudioCapabilities;
+}
+
+/**
+ * What the *host* of these tools can do, as opposed to what the backend can.
+ *
+ * Studio is mounted in two very different places. In a project's own admin
+ * panel it runs next to the collection source files and can edit them through
+ * the schema-editor routes. In the hosted console it runs against somebody
+ * else's deployed container: there is no source to edit — the container is
+ * rebuilt from the customer's repository on every deploy — and the routes that
+ * would edit it are not mounted at all, because the framework switches the
+ * schema editor off under `NODE_ENV=production`.
+ *
+ * Tools that would otherwise offer a write into the codebase read this to
+ * decide whether that write is even meaningful.
+ */
+export interface StudioCapabilities {
+    /**
+     * Whether the host has the project's collection source at hand and can
+     * write to it.
+     *
+     * Defaults to `true`, which is what an admin panel running beside its own
+     * `collectionsDir` has always assumed.
+     */
+    codebase: boolean;
 }
 
 // ─── Noop defaults ──────────────────────────────────────────────────
@@ -71,12 +97,17 @@ const NOOP_BREADCRUMBS: BreadcrumbsController = {
     updateCount: () => {}
 };
 
+const DEFAULT_CAPABILITIES: StudioCapabilities = {
+    codebase: true
+};
+
 const NOOP_BRIDGE: StudioBridge = {
     collectionRegistry: NOOP_COLLECTION_REGISTRY,
     sidePanelController: NOOP_SIDE_PANEL,
     urlController: NOOP_URL_CONTROLLER,
     navigationState: NOOP_NAVIGATION_STATE,
-    breadcrumbs: NOOP_BREADCRUMBS
+    breadcrumbs: NOOP_BREADCRUMBS,
+    capabilities: DEFAULT_CAPABILITIES
 };
 
 // ─── Context & Provider ─────────────────────────────────────────────
@@ -107,10 +138,22 @@ export function StudioBridgeProvider({
     value: Partial<StudioBridge>;
     children: React.ReactNode;
 }) {
+    // Keyed on the slices rather than on `value`: callers write the object
+    // inline (`value={{ collectionRegistry }}`), so a `[value]` dependency
+    // rebuilt the context on every render of the host and re-rendered every
+    // Studio consumer with it.
     const merged = React.useMemo(
         () => ({ ...NOOP_BRIDGE,
 ...value }),
-        [value]
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
+            value.collectionRegistry,
+            value.sidePanelController,
+            value.urlController,
+            value.navigationState,
+            value.breadcrumbs,
+            value.capabilities
+        ]
     );
     return (
         <StudioBridgeContext.Provider value={merged}>
@@ -146,6 +189,11 @@ export function useStudioBreadcrumbs(): BreadcrumbsController {
     return useContext(StudioBridgeContext).breadcrumbs;
 }
 
+/** What the host can do — see {@link StudioCapabilities}. */
+export function useStudioCapabilities(): StudioCapabilities {
+    return useContext(StudioBridgeContext).capabilities;
+}
+
 // ─── Self-Assembling Bridge Registry ────────────────────────────────
 
 /**

package/src/internal/useRestoreScroll.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 
 const scrollsMap: Record<string, number> = {};