@rebasepro/admin 0.12.0 → 0.12.1-canary.g06f263c

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/admin",
   "type": "module",
-  "version": "0.12.0",
+  "version": "0.12.1-canary.g06f263c",
   "description": "Rebase CMS — content management views, forms, and routing",
   "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",
@@ -54,66 +54,64 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@floating-ui/dom": "^1.7.6",
+    "@floating-ui/dom": "^1.8.0",
     "cmdk": "^1.1.1",
     "date-fns": "^4.4.0",
     "exceljs": "^4.4.0",
-    "fast-equals": "6.0.0",
-    "fractional-indexing": "3.2.0",
-    "fuse.js": "^7.4.2",
+    "fast-equals": "6.0.2",
+    "fractional-indexing": "4.0.0",
+    "fuse.js": "^7.5.0",
     "json5": "^2.2.3",
-    "markdown-it": "^14.2.0",
+    "markdown-it": "^14.3.0",
     "markdown-it-ins": "^4.0.0",
     "markdown-it-mark": "^4.0.0",
     "markdown-it-task-lists": "^2.1.1",
     "prism-react-renderer": "^2.4.1",
     "prosemirror-commands": "^1.7.1",
-    "prosemirror-dropcursor": "^1.8.2",
+    "prosemirror-dropcursor": "^1.8.3",
     "prosemirror-gapcursor": "^1.4.1",
     "prosemirror-history": "^1.5.0",
     "prosemirror-inputrules": "^1.5.1",
     "prosemirror-keymap": "^1.2.3",
-    "prosemirror-markdown": "^1.13.4",
-    "prosemirror-model": "^1.25.8",
+    "prosemirror-markdown": "^1.13.5",
+    "prosemirror-model": "^1.25.11",
     "prosemirror-schema-list": "^1.5.1",
     "prosemirror-state": "^1.4.4",
     "prosemirror-tables": "^1.8.5",
     "prosemirror-transform": "^1.12.0",
-    "prosemirror-view": "^1.41.9",
-    "react-dropzone": "^15.0.0",
+    "prosemirror-view": "^1.42.2",
+    "react-dropzone": "^19.1.1",
     "react-use-measure": "^2.1.7",
     "zod": "^4.4.3",
-    "@rebasepro/admin-types": "0.12.0",
-    "@rebasepro/app": "0.12.0",
-    "@rebasepro/common": "0.12.0",
-    "@rebasepro/forms": "0.12.0",
-    "@rebasepro/types": "0.12.0",
-    "@rebasepro/inference": "0.12.0",
-    "@rebasepro/ui": "0.12.0",
-    "@rebasepro/utils": "0.12.0"
+    "@rebasepro/app": "0.12.1-canary.g06f263c",
+    "@rebasepro/admin-types": "0.12.1-canary.g06f263c",
+    "@rebasepro/forms": "0.12.1-canary.g06f263c",
+    "@rebasepro/common": "0.12.1-canary.g06f263c",
+    "@rebasepro/inference": "0.12.1-canary.g06f263c",
+    "@rebasepro/types": "0.12.1-canary.g06f263c",
+    "@rebasepro/ui": "0.12.1-canary.g06f263c",
+    "@rebasepro/utils": "0.12.1-canary.g06f263c"
   },
   "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"
   },
   "devDependencies": {
     "@jest/globals": "^30.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
     "@types/markdown-it": "^14.1.2",
-    "@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",
     "jest": "^30.4.2",
-    "react-router": "^7.17.0",
-    "react-router-dom": "^7.17.0",
-    "ts-jest": "^29.4.11",
+    "react-router": "^8.3.0",
+    "ts-jest": "^29.4.12",
     "typescript": "^6.0.3",
-    "vite": "^8.0.16"
+    "vite": "^8.1.5"
   },
   "files": [
     "dist",
@@ -131,13 +129,15 @@
   },
   "jest": {
     "transform": {
-      "^.+\\.[jt]sx?$": "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"
@@ -146,9 +146,7 @@
     "testPathIgnorePatterns": [
       "/node_modules/"
     ],
-    "transformIgnorePatterns": [
-      "node_modules/(?!.*fractional-indexing)/"
-    ],
+    "transformIgnorePatterns": [],
     "setupFilesAfterEnv": [
       "<rootDir>/test/setupTests.ts"
     ],

package/src/collection_editor/ConfigControllerProvider.tsx

@@ -6,7 +6,7 @@ import { deepEqual as equal } from "fast-equals";
 import { CollectionsConfigController } from "./types/config_controller";
 import { useCustomizationController, useRebaseContext, useAuthController, useSnackbarController } from "@rebasepro/app";
 import { getTableName } from "@rebasepro/common";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { CollectionEditorController } from "./types/collection_editor_controller";
 import { CollectionInference } from "./types/collection_inference";
 import { CollectionGenerationCallback } from "./api/generateCollectionApi";

package/src/collection_editor/ui/collection_editor/CollectionEditorDialog.tsx

@@ -30,7 +30,8 @@ import {
     IconButton,
     LoadingButton,
     Tab,
-    Tabs
+    Tabs,
+    Tooltip
 } from "@rebasepro/ui";
 import { EngineProperties, Entity, getDataSourceCapabilities, MapProperty, Properties, Property, TableMetadata, User } from "@rebasepro/types";
 import { PropertyConfig, AdminCollection } from "@rebasepro/admin-types";
@@ -254,11 +255,38 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
             ? applyPropertyConfigs(initialCollection, propertyConfigs)
             : copyFromProp
                 ? (() => {
-                    // When duplicating, copy all properties but clear identifiers
-                    const { subcollections: _sub, ...rest } = copyFromProp as unknown as Record<string, unknown>;
+                    // When duplicating, copy all properties but clear identifiers.
+                    //
+                    // "Identifiers" has to include the ones this dialog cannot
+                    // show. `schema` has no field anywhere in the editor, so a
+                    // duplicate of the Users collection — the one collection
+                    // scaffolded with `schema: "rebase"` — silently produced a
+                    // new collection whose table is created in `rebase` rather
+                    // than `public`, with nothing on screen to explain why.
+                    // Panel-authored collections are `public` collections.
+                    //
+                    // `slug`/`table` are cleared rather than carried: both are
+                    // re-derived from the name the user types (see
+                    // `updateName` in GeneralSettingsForm, which fills untouched
+                    // fields while `isNewCollection`), and carrying them meant a
+                    // duplicate pointed at the source's table until then.
+                    //
+                    // `auth` goes too — a duplicate must not become a second
+                    // auth collection wired to the same user store.
+                    const {
+                        subcollections: _sub,
+                        schema: _schema,
+                        auth: _auth,
+                        ...rest
+                    } = copyFromProp as unknown as Record<string, unknown>;
                     return {
                         ...rest,
                         name: "",
+                        // Same shape the "new collection" branch below starts
+                        // from, so validation and the registry lookups never see
+                        // an undefined slug mid-edit.
+                        slug: fallbackSlug,
+                        table: "",
                         ownerId: authController.user?.uid ?? ""
                     } as AdminCollection<any>;
                 })()
@@ -341,6 +369,10 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
 }
 ) {
 
+    /** Why the submit buttons below are dead, straight from the backend. */
+    const readOnlyTitle = configController?.readOnlyReason
+        || "This backend does not accept collection edits.";
+
     const importConfigRaw = useImportConfig();
     const urlControllerRaw = useUrlController();
     const collectionRegistryRaw = useCollectionRegistryController();
@@ -720,16 +752,23 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
                         )}
                         {fullScreen && !isNewCollection && (
                             <div className="flex items-center gap-2">
-                                <LoadingButton
-                                    variant="filled"
-                                    color="primary"
-                                    type="submit"
-                                    onClick={() => formController.handleSubmit()}
-                                    disabled={!dirty || isSubmitting || configController?.readOnly}
-                                    loading={isSubmitting}
-                                >
-                                    {configController?.readOnly ? "Update (Read-only)" : "Update"}
-                                </LoadingButton>
+                                {/* "(Read-only)" says the button will not work but not why.
+                                    The controller now carries the backend's own reason —
+                                    production, `baas` mode, no `collectionsDir` — so show it. */}
+                                <Tooltip title={configController?.readOnly ? readOnlyTitle : undefined}>
+                                    <div>
+                                        <LoadingButton
+                                            variant="filled"
+                                            color="primary"
+                                            type="submit"
+                                            onClick={() => formController.handleSubmit()}
+                                            disabled={!dirty || isSubmitting || configController?.readOnly}
+                                            loading={isSubmitting}
+                                        >
+                                            {configController?.readOnly ? "Update (Read-only)" : "Update"}
+                                        </LoadingButton>
+                                    </div>
+                                </Tooltip>
                             </div>
                         )}
                     </div>
@@ -935,15 +974,19 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
                                     {currentView === "properties" && "Create collection"}
                                 </LoadingButton>}
 
-                            {!isNewCollection && !fullScreen && <LoadingButton
-                                variant="filled"
-                                color="primary"
-                                type="submit"
-                                disabled={isSubmitting || configController?.readOnly}
-                                loading={isSubmitting}
-                            >
-                                {configController?.readOnly ? "Update collection (Read-only)" : "Update collection"}
-                            </LoadingButton>}
+                            {!isNewCollection && !fullScreen && <Tooltip title={configController?.readOnly ? readOnlyTitle : undefined}>
+                                <div>
+                                    <LoadingButton
+                                        variant="filled"
+                                        color="primary"
+                                        type="submit"
+                                        disabled={isSubmitting || configController?.readOnly}
+                                        loading={isSubmitting}
+                                    >
+                                        {configController?.readOnly ? "Update collection (Read-only)" : "Update collection"}
+                                    </LoadingButton>
+                                </div>
+                            </Tooltip>}
 
                         </div>
                     )}

package/src/collection_editor/ui/collection_editor/CollectionRLSTab.tsx

@@ -1,6 +1,6 @@
 
 import { getPolicyNamesForRule, getPolicyNamesForRules } from "@rebasepro/utils";
-import { getEffectiveSecurityRules } from "@rebasepro/common";
+import { getGeneratedPolicyNames } from "@rebasepro/common";
 import React, { useState, useEffect, useMemo } from "react";
 
 /**
@@ -39,6 +39,7 @@ import {
     Typography
 } from "@rebasepro/ui";
 import { useFormex } from "@rebasepro/forms";
+import { useCollectionsConfigController } from "../../useCollectionsConfigController";
 import { useRebaseContext } from "@rebasepro/app";
 import type { AdminCollection } from "@rebasepro/admin-types";
 import type { PostgresPolicy, SecurityOperation, SecurityRule } from "@rebasepro/types";
@@ -114,6 +115,14 @@ export function CollectionRLSTab() {
     const { values, setFieldValue } = useFormex<CollectionWithSecurity>();
     const [editingPolicy, setEditingPolicy] = useState<PostgresPolicy | "new" | null>(null);
 
+    // Every other tab in this dialog disables its inputs when the backend will
+    // not accept an edit — the general and display forms behind a `fieldset
+    // disabled`, the properties editor per control. This one did not, so a
+    // read-only panel still invited you to write a policy, delete one, and
+    // reorder the lot, and only said no at the submit button on the way out.
+    const { readOnly, readOnlyReason } = useCollectionsConfigController();
+    const readOnlyTitle = readOnlyReason || "This backend does not accept collection edits.";
+
     const rules: SecurityRule[] = values.securityRules || [];
 
     const { databaseAdmin } = useRebaseContext();
@@ -209,26 +218,14 @@ export function CollectionRLSTab() {
 
     const tableName = values.id || values.table || values.alias;
 
-    /**
-     * Every policy name `rebase db push` would write for this collection.
-     *
-     * Two things make this more than `rules.map(r => r.name)`:
-     *  - a rule without an explicit `name` becomes `<table>_<op>_<hash>`, so
-     *    comparing `rule.name` to `policyname` never matches for it;
-     *  - the generator also injects the safe-by-default baseline
-     *    (`<table>_default_admin_*`), which is in no collection's `securityRules`.
-     *
-     * Missing either made Rebase's own policies look hand-written, and offered to
-     * import them back into the codebase that produced them.
-     */
+    // Every policy name `rebase db push` would write for this collection — see
+    // `getGeneratedPolicyNames`. This used to be derived here by hand, and the
+    // Studio's RLS editor derived a different subset of it by hand, which is
+    // exactly how the two came to disagree about which policies were drift.
     const generatedPolicyNames = useMemo(() => {
         if (!tableName) return new Set<string>();
-        const effectiveRules = getEffectiveSecurityRules(values as AdminCollection);
-        return getPolicyNamesForRules(
-            [...rules, ...effectiveRules],
-            tableName
-        );
-    }, [rules, tableName, values]);
+        return getGeneratedPolicyNames(values as AdminCollection);
+    }, [tableName, values]);
 
     const unmappedPolicies = dbPolicies.filter(dp => !generatedPolicyNames.has(dp.policyname));
 
@@ -251,9 +248,13 @@ export function CollectionRLSTab() {
                 <div className="w-full flex flex-col">
                 <div className="flex items-center justify-between mb-8">
                     <Typography variant="h5">Row Level Security</Typography>
-                    <Button variant="filled" color="neutral" onClick={() => setEditingPolicy("new")}>
-                        CREATE POLICY
-                    </Button>
+                    <Tooltip title={readOnly ? readOnlyTitle : undefined}>
+                        <div>
+                            <Button variant="filled" color="neutral" disabled={readOnly} onClick={() => setEditingPolicy("new")}>
+                                CREATE POLICY
+                            </Button>
+                        </div>
+                    </Tooltip>
                 </div>
 
                 {rules.length === 0 ? (
@@ -282,7 +283,7 @@ export function CollectionRLSTab() {
                                     </div>
                                 </div>
                                 <div className="flex items-center gap-1 sm:gap-2 shrink-0">
-                                    <Button size="small" variant="text" onClick={() => setEditingPolicy({
+                                    <Button size="small" variant="text" disabled={readOnly} onClick={() => setEditingPolicy({
                                         policyname: rule.name ?? "",
                                         tablename: values.id || values.table || values.alias || "your_table",
                                         permissive: (rule.mode || "permissive").toUpperCase() as PostgresPolicy["permissive"],
@@ -293,7 +294,7 @@ export function CollectionRLSTab() {
                                     })}>
                                         EDIT
                                     </Button>
-                                    <IconButton size="small" onClick={() => {
+                                    <IconButton size="small" disabled={readOnly} onClick={() => {
                                         setFieldValue("securityRules", rules.filter((r: SecurityRule) => r.name !== rule.name));
                                     }}>
                                         <Trash2Icon size={iconSize.smallest} className="text-text-secondary dark:text-text-secondary-dark hover:text-red-500 dark:hover:text-red-500 transition-colors"/>
@@ -336,12 +337,19 @@ export function CollectionRLSTab() {
                                         </div>
                                     </div>
                                     <div className="flex items-center gap-1 sm:gap-2 shrink-0">
-                                        <Button size="small" variant="outlined" color="primary" onClick={() => {
-                                             const rule: SecurityRule = toSecurityRule(dp);
-                                            setFieldValue("securityRules", [...rules, rule]);
-                                        }}>
-                                            Import to codebase
-                                        </Button>
+                                        {/* "Import to codebase" is the one action here that
+                                            names its destination, and it is the one the
+                                            backend refuses when it has no codebase to write. */}
+                                        <Tooltip title={readOnly ? readOnlyTitle : undefined}>
+                                            <div>
+                                                <Button size="small" variant="outlined" color="primary" disabled={readOnly} onClick={() => {
+                                                    const rule: SecurityRule = toSecurityRule(dp);
+                                                    setFieldValue("securityRules", [...rules, rule]);
+                                                }}>
+                                                    Import to codebase
+                                                </Button>
+                                            </div>
+                                        </Tooltip>
                                     </div>
                                 </Paper>
                             ))}

package/src/collection_editor/ui/collection_editor/RouterCollectionStudioView.tsx

@@ -10,7 +10,7 @@
  * (which has no react-router dependency).
  */
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { useUrlController } from "../../_cms_internals";
 import { useSnackbarController } from "@rebasepro/app";
 import { CollectionStudioView, CollectionStudioViewProps } from "./CollectionStudioView";

package/src/collection_editor/ui/collection_editor/RouterCollectionsStudioView.tsx

@@ -9,7 +9,7 @@
  * (which has no react-router dependency).
  */
 import React from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router";
 import { useUrlController } from "../../_cms_internals";
 import { CollectionsStudioView, CollectionsStudioViewProps } from "./CollectionsStudioView";
 

package/src/collection_editor/useLocalCollectionsConfigController.tsx

@@ -2,42 +2,87 @@ import { CollectionsConfigController, SaveCollectionParams, UpdateCollectionPara
 import { Properties } from "@rebasepro/types";
 import { getSubcollections } from "@rebasepro/common";
 
-import React, { useMemo, useRef } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import type { AdminCollection } from "@rebasepro/admin-types";
+import { DEFAULT_API_PATH } from "@rebasepro/app";
+
+/**
+ * What the backend said about its schema editor, and how sure we are.
+ *
+ * `unknown` covers both "still asking" and "could not ask" — a backend too old
+ * to have the endpoint, or one that is unreachable. Those fall back to the
+ * build-mode guess below rather than locking the editor for someone whose
+ * editor used to work.
+ */
+type SchemaEditorAvailability =
+    | { state: "unknown" }
+    | { state: "known", enabled: boolean, reason?: string };
+
+/**
+ * The guess this hook used to make on its own.
+ *
+ * `process.env.NODE_ENV` here is the *frontend bundle's* build mode. Whether
+ * the schema editor exists is decided by a different process entirely — the
+ * server's own `NODE_ENV`, its `collectionsDir`, whether its collections were
+ * introspected, whether `ts-morph` is installed. The two disagree in every
+ * ordinary setup: a dev frontend against a deployed API, a `baas` project, a
+ * hosted console. When they did, the editor offered itself and every save came
+ * back `404 Not Found`. It is kept only as the answer for a backend too old to
+ * be asked.
+ */
+const buildModeGuess = (): boolean => process.env.NODE_ENV === "production";
+
 export function useLocalCollectionsConfigController(
     clientOrUrl: any,
     baseCollections: AdminCollection[] = [],
     options?: {
         readOnly?: boolean;
         getAuthToken?: () => Promise<string | null>;
+        /**
+         * Identity of the signed-in user, if any.
+         *
+         * Only used to re-ask the backend when it changes: whether the editor
+         * will accept a write depends on who is asking, and the answer to an
+         * anonymous probe does not survive a sign-in.
+         */
+        authKey?: string | null;
     }
 ): CollectionsConfigController {
 
     const parsedCollections = baseCollections;
-    
+
     // Store latest options in a ref to prevent stale closures in the `request` function
     // due to useMemo caching the saveCollection function.
     const optionsRef = useRef(options);
     optionsRef.current = options;
 
+    // `/api` only by default — a backend configured with another `basePath`
+    // mounts the schema editor under that instead.
+    const clientBaseUrl = typeof clientOrUrl === "string"
+        ? clientOrUrl
+        : (clientOrUrl?.baseUrl ?? "");
+    const clientApiPath = (typeof clientOrUrl === "object" && clientOrUrl !== null && clientOrUrl.apiPath)
+        || DEFAULT_API_PATH;
+    const editorUrl = `${String(clientBaseUrl).replace(/\/$/, "")}${clientApiPath}/schema-editor`;
+
+    const resolveToken = async (): Promise<string | null> => {
+        let token = optionsRef.current?.getAuthToken ? await optionsRef.current.getAuthToken() : null;
+        if (!token && typeof clientOrUrl === "object" && clientOrUrl !== null && clientOrUrl.resolveToken) {
+            token = await clientOrUrl.resolveToken();
+        }
+        return token ?? null;
+    };
+
     const request = async (endpoint: string, payload: Record<string, unknown>) => {
         try {
-            let token = optionsRef.current?.getAuthToken ? await optionsRef.current.getAuthToken() : null;
-            let baseUrl = typeof clientOrUrl === "string" ? clientOrUrl : "";
-
-            if (typeof clientOrUrl === "object" && clientOrUrl !== null) {
-                baseUrl = clientOrUrl.baseUrl || baseUrl;
-                if (!token && clientOrUrl.resolveToken) {
-                    token = await clientOrUrl.resolveToken();
-                }
-            }
+            const token = await resolveToken();
 
             const headers: Record<string, string> = { "Content-Type": "application/json" };
             if (token) {
                 headers["Authorization"] = `Bearer ${token}`;
             }
 
-            const response = await fetch(`${baseUrl.replace(/\/$/, "")}/api/schema-editor${endpoint}`, {
+            const response = await fetch(`${editorUrl}${endpoint}`, {
                 method: "POST",
                 headers,
                 body: JSON.stringify(payload)
@@ -67,10 +112,77 @@ export function useLocalCollectionsConfigController(
         }
     };
 
+    // ── Ask the backend whether it will accept an edit ────────────────
+    const forcedReadOnly = options?.readOnly;
+    const authKey = options?.authKey ?? null;
+    const [availability, setAvailability] = useState<SchemaEditorAvailability>({ state: "unknown" });
+
+    useEffect(() => {
+        // Nothing to ask about: the caller has already decided.
+        if (forcedReadOnly === true) return;
+
+        let cancelled = false;
+        (async () => {
+            try {
+                const token = await resolveToken();
+                const response = await fetch(`${editorUrl}/status`, {
+                    headers: token ? { Authorization: `Bearer ${token}` } : {}
+                });
+                if (cancelled) return;
+
+                // A backend from before the endpoint existed. Guessing from the
+                // bundle's build mode is wrong, but it is what that backend's
+                // admin panel has always done, and locking the editor for
+                // someone whose editor works would be worse.
+                if (response.status === 404) {
+                    setAvailability({ state: "unknown" });
+                    return;
+                }
+
+                const body = await response.json().catch(() => ({})) as {
+                    enabled?: boolean,
+                    reason?: string,
+                    error?: { message?: string }
+                };
+                if (cancelled) return;
+
+                if (response.ok) {
+                    setAvailability({
+                        state: "known",
+                        enabled: body.enabled === true,
+                        reason: body.reason
+                    });
+                } else {
+                    // 401/403 (not an admin) or 501 (no auth configured at all)
+                    // — all of them mean this session cannot edit collections,
+                    // and the body says why better than we could.
+                    setAvailability({
+                        state: "known",
+                        enabled: false,
+                        reason: body.error?.message
+                            ?? `The backend refused to say whether collections are editable (HTTP ${response.status}).`
+                    });
+                }
+            } catch {
+                if (!cancelled) setAvailability({ state: "unknown" });
+            }
+        })();
+
+        return () => { cancelled = true; };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editorUrl, forcedReadOnly, authKey]);
+
+    const readOnly = forcedReadOnly
+        ?? (availability.state === "known" ? !availability.enabled : buildModeGuess());
+
+    const readOnlyReason = availability.state === "known" && availability.reason
+        ? availability.reason
+        : "Collections can only be edited against a backend running the schema editor, which is off in production.";
+
     return useMemo(() => ({
         loading: false,
-        readOnly: options?.readOnly ?? false,
-        readOnlyReason: "Local collection editing is only available in development mode.",
+        readOnly,
+        readOnlyReason,
         collections: parsedCollections,
         getCollection: (id: string) => {
             const found = parsedCollections.find(c => (c as AdminCollection & { id?: string }).id === id || c.slug === id);
@@ -119,5 +231,5 @@ collectionData: { propertiesOrder: newPropertiesOrder } });
 
         navigationEntries: [],
         saveNavigationEntries: async () => { }
-    }), [clientOrUrl, parsedCollections, options?.readOnly, options?.getAuthToken]);
+    }), [clientOrUrl, parsedCollections, readOnly, readOnlyReason, options?.getAuthToken]);
 }

package/src/components/AdminModeSyncer.tsx

@@ -1,6 +1,6 @@
 import type { AppView } from "@rebasepro/admin-types";
 import React, { useEffect } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 ;
 import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { useAdminModeController } from "@rebasepro/app";

package/src/components/CollectionViewBinding/CollectionViewBinding.tsx

@@ -13,7 +13,7 @@ import {
     ViewMode
 } from "@rebasepro/admin-types";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router";
 
 import { deepEqual as equal } from "fast-equals"
 import { CollectionRowActions, CollectionTableBinding } from "../CollectionTableBinding";

package/src/components/CollectionViewBinding/CollectionViewStartActions.tsx

@@ -9,7 +9,7 @@ import { ClearFilterSortButton } from "../ClearFilterSortButton";
 import { FiltersDialog } from "./FiltersDialog";
 import { FilterPresetsButton } from "./FilterPresetsButton";
 import { toArray } from "@rebasepro/utils";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
 import { useAdminContext } from "../../hooks/useAdminContext";
 import { withViewMode } from "../../util/view_mode";

package/src/components/CollectionViewBinding/SplitListView.tsx

@@ -11,7 +11,7 @@ import {
 } from "@rebasepro/ui";
 import { useLargeLayout, UnsavedChangesDialog, useNavigationBlocker } from "@rebasepro/app";
 import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router";
 import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { withViewMode } from "../../util/view_mode";