@rebasepro/app 0.9.1-canary.ff338b5 → 0.10.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/app",
   "type": "module",
-  "version": "0.9.1-canary.ff338b5",
+  "version": "0.10.0",
   "description": "Rebase core — framework-agnostic runtime for data-driven admin panels",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -52,11 +52,11 @@
     "magic-string": "^0.30.0",
     "notistack": "^3.0.2",
     "react-i18next": "^17.0.8",
-    "@rebasepro/common": "0.9.1-canary.ff338b5",
-    "@rebasepro/forms": "0.9.1-canary.ff338b5",
-    "@rebasepro/types": "0.9.1-canary.ff338b5",
-    "@rebasepro/ui": "0.9.1-canary.ff338b5",
-    "@rebasepro/utils": "0.9.1-canary.ff338b5"
+    "@rebasepro/common": "0.10.0",
+    "@rebasepro/types": "0.10.0",
+    "@rebasepro/forms": "0.10.0",
+    "@rebasepro/ui": "0.10.0",
+    "@rebasepro/utils": "0.10.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/src/components/UnsavedChangesDialog.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
-import { useTranslation } from "../hooks";
+import { useTranslation } from "../hooks/useTranslation";
 
 export interface UnsavedChangesDialogProps {
     open: boolean;

package/src/contexts/AdminModeController.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AdminModeController } from "../hooks";
+import type { AdminModeController } from "../hooks/useAdminModeController";
 
 const DEFAULT_ADMIN_MODE_STATE: AdminModeController = {
     mode: "content",

package/src/contexts/ModeController.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ModeController } from "../hooks";
+import type { ModeController } from "../hooks/useModeController";
 
 const DEFAULT_MODE_STATE: ModeController = {
     mode: "light",

package/src/core/Rebase.tsx

@@ -288,6 +288,7 @@ export function Rebase<USER extends User>(props: RebaseProps<USER>) {
                 executeSql: wsAdmin.executeSql!.bind(wsAdmin),
                 fetchAvailableDatabases: wsAdmin.fetchAvailableDatabases?.bind(wsAdmin),
                 fetchAvailableRoles: wsAdmin.fetchAvailableRoles?.bind(wsAdmin),
+                fetchApplicationRoles: wsAdmin.fetchApplicationRoles?.bind(wsAdmin),
                 fetchCurrentDatabase: wsAdmin.fetchCurrentDatabase?.bind(wsAdmin),
                 fetchUnmappedTables: wsAdmin.fetchUnmappedTables?.bind(wsAdmin),
                 fetchTableMetadata: wsAdmin.fetchTableMetadata?.bind(wsAdmin),

package/src/hooks/useBuildAdminModeController.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from "react";
-import { AdminModeController } from "./index";
+import type { AdminModeController } from "./useAdminModeController";
 
 /**
  * Use this hook to build an admin mode controller that determines

package/src/hooks/useBuildModeController.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState, useMemo } from "react";
 
-import { ModeController } from "./index";
+import type { ModeController } from "./useModeController";
 
 /**
  * Use this hook to build a color mode controller that determines

package/src/hooks/useNavigationBlocker.tsx

@@ -0,0 +1,108 @@
+import React, { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Blocker, BlockerFunction, useBlocker } from "react-router-dom";
+
+const IDLE_BLOCKER: Blocker = {
+    state: "unblocked",
+    proceed: undefined,
+    reset: undefined,
+    location: undefined
+};
+
+type NavigationBlockerContextValue = {
+    register: (id: string, predicate: BlockerFunction) => void;
+    unregister: (id: string) => void;
+    blocker: Blocker;
+    /** Id of the registration that caused the current block, if any. */
+    blockedBy: string | null;
+};
+
+const NavigationBlockerContext = createContext<NavigationBlockerContextValue | null>(null);
+
+/**
+ * Owns the single React Router blocker for the whole app.
+ *
+ * React Router only honours **one** blocker at a time: `shouldBlockNavigation`
+ * picks the last-registered blocker function and silently ignores every other
+ * one (it only logs a dev warning). Because blockers register in a `useEffect`,
+ * the winner is whichever surface mounted most recently — so an unsaved-changes
+ * guard could be disabled by an unrelated component mounting after it.
+ *
+ * This provider registers the only `useBlocker` in the tree and multiplexes it,
+ * so every surface that needs to guard navigation gets a say regardless of
+ * mount order. Surfaces register through {@link useNavigationBlocker}.
+ */
+export function NavigationBlockerProvider({ children }: { children: React.ReactNode }) {
+
+    const predicates = useRef(new Map<string, BlockerFunction>());
+
+    // State, not a ref: the owning registration only renders its dialog once
+    // this has propagated, so it has to go through React.
+    const [blockedBy, setBlockedBy] = useState<string | null>(null);
+
+    const shouldBlock = useCallback<BlockerFunction>((args) => {
+        for (const [id, predicate] of predicates.current) {
+            if (predicate(args)) {
+                setBlockedBy(id);
+                return true;
+            }
+        }
+        setBlockedBy(null);
+        return false;
+    }, []);
+
+    const blocker = useBlocker(shouldBlock);
+
+    const register = useCallback((id: string, predicate: BlockerFunction) => {
+        predicates.current.set(id, predicate);
+    }, []);
+
+    const unregister = useCallback((id: string) => {
+        predicates.current.delete(id);
+        setBlockedBy((current) => (current === id ? null : current));
+    }, []);
+
+    const value = useMemo<NavigationBlockerContextValue>(() => ({
+        register,
+        unregister,
+        blocker,
+        blockedBy
+    }), [register, unregister, blocker, blockedBy]);
+
+    return (
+        <NavigationBlockerContext.Provider value={value}>
+            {children}
+        </NavigationBlockerContext.Provider>
+    );
+}
+
+/**
+ * Guard navigation with `predicate`, sharing the app-wide blocker.
+ *
+ * Returns a {@link Blocker} that is only ever in the `blocked` state when *this*
+ * registration is what blocked the navigation — so several guards can coexist
+ * without each of them popping a dialog.
+ *
+ * Returns an idle blocker when no {@link NavigationBlockerProvider} is mounted
+ * above, rather than competing for React Router's single blocker slot.
+ */
+export function useNavigationBlocker(predicate: BlockerFunction): Blocker {
+
+    const context = useContext(NavigationBlockerContext);
+    const id = useId();
+
+    // Keep the latest predicate without re-registering on every render.
+    const predicateRef = useRef(predicate);
+    predicateRef.current = predicate;
+
+    const register = context?.register;
+    const unregister = context?.unregister;
+
+    useEffect(() => {
+        if (!register || !unregister) return;
+        register(id, (args) => predicateRef.current(args));
+        return () => unregister(id);
+    }, [register, unregister, id]);
+
+    if (!context) return IDLE_BLOCKER;
+    return context.blockedBy === id ? context.blocker : IDLE_BLOCKER;
+}

package/src/hooks/useUnsavedChangesDialog.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState, useMemo } from "react";
-import { useBlocker } from "react-router-dom";
 import { UnsavedChangesDialogProps } from "../components/UnsavedChangesDialog";
+import { useNavigationBlocker } from "./useNavigationBlocker";
 
 /**
  * A single, unified hook to prevent navigation when there are unsaved changes.
@@ -18,9 +18,12 @@ export function useUnsavedChangesDialog(
 } {
     const [manualDialogOpen, setManualDialogOpen] = useState(false);
 
-    const blocker = useBlocker(
-        ({ currentLocation, nextLocation }) =>
-            when && currentLocation.pathname !== nextLocation.pathname
+    const blocker = useNavigationBlocker(
+        useCallback(
+            ({ currentLocation, nextLocation }) =>
+                when && currentLocation.pathname !== nextLocation.pathname,
+            [when]
+        )
     );
 
     useEffect(() => {

package/src/index.ts

@@ -12,6 +12,7 @@ export * from "./contexts";
 export { CONTAINER_FULL_WIDTH, ADDITIONAL_TAB_WIDTH, FORM_CONTAINER_WIDTH } from "./internal/common";
 export { useRestoreScroll } from "./internal/useRestoreScroll";
 export { useUnsavedChangesDialog } from "./hooks/useUnsavedChangesDialog";
+export { NavigationBlockerProvider, useNavigationBlocker } from "./hooks/useNavigationBlocker";
 export type { UnsavedChangesDialogProps } from "./components/UnsavedChangesDialog";
 export { UnsavedChangesDialog } from "./components/UnsavedChangesDialog";
 export * from "./i18n/RebaseI18nProvider";