@geomak/ui 6.21.1 → 6.23.0

package/dist/index.d.cts

@@ -2867,13 +2867,29 @@ interface SecureLayoutProps {
     /** Required permission(s). One needed (or all, with `requireAllPermissions`). */
     requiredPermissions?: string[];
     requireAllPermissions?: boolean;
-    /** Final say. Runs after the built-in checks; may be async. Return false to deny. */
-    canAccess?: () => boolean | Promise<boolean>;
-    /** Shown while the (possibly async) check resolves. */
+    /**
+     * The current route path (e.g. `location.pathname`). Pass it from your
+     * router to do **per-route** access from a single root wrapper: the check
+     * re-runs whenever `route` changes (i.e. on navigation), and the value is
+     * forwarded to `canAccess`. Omit it for a static, app-wide gate.
+     */
+    route?: string;
+    /**
+     * Final say. Runs after the built-in checks; may be async; return false to
+     * deny. Receives the current `route`, so a single wrapper can decide access
+     * per path (e.g. consult a route → permissions map). Keep it synchronous
+     * for instant, flash-free per-route guarding.
+     */
+    canAccess?: (route?: string) => boolean | Promise<boolean>;
+    /** Shown while the (possibly async) check resolves. Pass `null` to render nothing. */
     loadingFallback?: React__default.ReactNode;
-    /** Shown when access is denied. Default is a simple "Access denied" panel. */
+    /** Shown when access is denied. Defaults to a simple "Access denied" panel;
+     *  pass `null` to render nothing (e.g. when `onDeny` redirects away). */
     fallback?: React__default.ReactNode;
-    /** Fired once when access is denied — e.g. to redirect. */
+    /** Fired once when access is granted — e.g. to hydrate app state or redirect
+     *  to a landing route after a successful token check. */
+    onGranted?: () => void;
+    /** Fired once when access is denied — e.g. to redirect to login / logout. */
     onDeny?: () => void;
     className?: string;
 }
@@ -2887,13 +2903,39 @@ interface SecureLayoutProps {
  * This is a UI guard, not a security boundary — it controls what renders.
  * Real authorization must be enforced by your API/server.
  *
- * @example
+ * @example Full RBAC + PBAC gate
  * <SecureLayout token={jwt} requiredRoles={['admin']} permissions={user.perms}
  *   requiredPermissions={['reports:read']} onDeny={() => navigate('/login')}>
  *   <AdminDashboard />
  * </SecureLayout>
+ *
+ * @example Simple JWT-only gate with a token-login bootstrap (no roles/perms)
+ * <SecureLayout
+ *   canAccess={async () => {
+ *     const jwt = localStorage.getItem('jwt')
+ *     if (!jwt) return false
+ *     await tokenLogin(jwt)            // hydrate app state from the server
+ *     return true
+ *   }}
+ *   onGranted={() => navigate('/dashboard')}
+ *   onDeny={() => navigate('/logout')}
+ *   fallback={null}                    // redirecting — don't flash a panel
+ * >
+ *   <AppRoutes />
+ * </SecureLayout>
+ *
+ * @example Per-route access from a single root wrapper
+ * // Pass the path so the check re-runs on navigation; decide per route.
+ * const allowed = { '/admin': ['admin'], '/reports': ['analyst', 'admin'] }
+ * <SecureLayout
+ *   route={location.pathname}
+ *   canAccess={(path) => (allowed[path] ?? []).some((r) => user.roles.includes(r))}
+ *   onDeny={() => navigate('/403')}
+ * >
+ *   <AppRoutes />
+ * </SecureLayout>
  */
-declare function SecureLayout({ children, isAuthenticated, token, roles, requiredRoles, requireAllRoles, permissions, requiredPermissions, requireAllPermissions, canAccess, loadingFallback, fallback, onDeny, className, }: SecureLayoutProps): react_jsx_runtime.JSX.Element;
+declare function SecureLayout({ children, isAuthenticated, token, roles, requiredRoles, requireAllRoles, permissions, requiredPermissions, requireAllPermissions, route, canAccess, loadingFallback, fallback, onGranted, onDeny, className, }: SecureLayoutProps): react_jsx_runtime.JSX.Element;
 
 interface ThemeColors {
     background?: string;

package/dist/index.d.ts

@@ -2867,13 +2867,29 @@ interface SecureLayoutProps {
     /** Required permission(s). One needed (or all, with `requireAllPermissions`). */
     requiredPermissions?: string[];
     requireAllPermissions?: boolean;
-    /** Final say. Runs after the built-in checks; may be async. Return false to deny. */
-    canAccess?: () => boolean | Promise<boolean>;
-    /** Shown while the (possibly async) check resolves. */
+    /**
+     * The current route path (e.g. `location.pathname`). Pass it from your
+     * router to do **per-route** access from a single root wrapper: the check
+     * re-runs whenever `route` changes (i.e. on navigation), and the value is
+     * forwarded to `canAccess`. Omit it for a static, app-wide gate.
+     */
+    route?: string;
+    /**
+     * Final say. Runs after the built-in checks; may be async; return false to
+     * deny. Receives the current `route`, so a single wrapper can decide access
+     * per path (e.g. consult a route → permissions map). Keep it synchronous
+     * for instant, flash-free per-route guarding.
+     */
+    canAccess?: (route?: string) => boolean | Promise<boolean>;
+    /** Shown while the (possibly async) check resolves. Pass `null` to render nothing. */
     loadingFallback?: React__default.ReactNode;
-    /** Shown when access is denied. Default is a simple "Access denied" panel. */
+    /** Shown when access is denied. Defaults to a simple "Access denied" panel;
+     *  pass `null` to render nothing (e.g. when `onDeny` redirects away). */
     fallback?: React__default.ReactNode;
-    /** Fired once when access is denied — e.g. to redirect. */
+    /** Fired once when access is granted — e.g. to hydrate app state or redirect
+     *  to a landing route after a successful token check. */
+    onGranted?: () => void;
+    /** Fired once when access is denied — e.g. to redirect to login / logout. */
     onDeny?: () => void;
     className?: string;
 }
@@ -2887,13 +2903,39 @@ interface SecureLayoutProps {
  * This is a UI guard, not a security boundary — it controls what renders.
  * Real authorization must be enforced by your API/server.
  *
- * @example
+ * @example Full RBAC + PBAC gate
  * <SecureLayout token={jwt} requiredRoles={['admin']} permissions={user.perms}
  *   requiredPermissions={['reports:read']} onDeny={() => navigate('/login')}>
  *   <AdminDashboard />
  * </SecureLayout>
+ *
+ * @example Simple JWT-only gate with a token-login bootstrap (no roles/perms)
+ * <SecureLayout
+ *   canAccess={async () => {
+ *     const jwt = localStorage.getItem('jwt')
+ *     if (!jwt) return false
+ *     await tokenLogin(jwt)            // hydrate app state from the server
+ *     return true
+ *   }}
+ *   onGranted={() => navigate('/dashboard')}
+ *   onDeny={() => navigate('/logout')}
+ *   fallback={null}                    // redirecting — don't flash a panel
+ * >
+ *   <AppRoutes />
+ * </SecureLayout>
+ *
+ * @example Per-route access from a single root wrapper
+ * // Pass the path so the check re-runs on navigation; decide per route.
+ * const allowed = { '/admin': ['admin'], '/reports': ['analyst', 'admin'] }
+ * <SecureLayout
+ *   route={location.pathname}
+ *   canAccess={(path) => (allowed[path] ?? []).some((r) => user.roles.includes(r))}
+ *   onDeny={() => navigate('/403')}
+ * >
+ *   <AppRoutes />
+ * </SecureLayout>
  */
-declare function SecureLayout({ children, isAuthenticated, token, roles, requiredRoles, requireAllRoles, permissions, requiredPermissions, requireAllPermissions, canAccess, loadingFallback, fallback, onDeny, className, }: SecureLayoutProps): react_jsx_runtime.JSX.Element;
+declare function SecureLayout({ children, isAuthenticated, token, roles, requiredRoles, requireAllRoles, permissions, requiredPermissions, requireAllPermissions, route, canAccess, loadingFallback, fallback, onGranted, onDeny, className, }: SecureLayoutProps): react_jsx_runtime.JSX.Element;
 
 interface ThemeColors {
     background?: string;

package/dist/index.js

@@ -5847,42 +5847,59 @@ function SecureLayout({
   permissions,
   requiredPermissions,
   requireAllPermissions,
+  route,
   canAccess,
   loadingFallback,
   fallback,
+  onGranted,
   onDeny,
   className = ""
 }) {
   const reduced = useReducedMotion();
-  const [state, setState] = useState("checking");
   const rolesKey = JSON.stringify(roles);
   const requiredRolesKey = JSON.stringify(requiredRoles);
   const permissionsKey = JSON.stringify(permissions);
   const requiredPermissionsKey = JSON.stringify(requiredPermissions);
+  const passesSync = () => {
+    let authed = isAuthenticated;
+    if (authed === void 0 && token !== void 0) authed = tokenValid(token);
+    if (authed === void 0) authed = true;
+    if (!authed) return false;
+    if (requiredRoles?.length && !has(roles, requiredRoles, requireAllRoles)) return false;
+    if (requiredPermissions?.length && !has(permissions, requiredPermissions, requireAllPermissions)) return false;
+    return true;
+  };
+  const [state, setState] = useState(
+    () => !passesSync() ? "denied" : canAccess ? "checking" : "granted"
+  );
   useEffect(() => {
     let cancelled = false;
-    setState("checking");
-    const evaluate = async () => {
-      let authed = isAuthenticated;
-      if (authed === void 0 && token !== void 0) authed = tokenValid(token);
-      if (authed === void 0) authed = true;
-      if (!authed) return false;
-      if (requiredRoles?.length && !has(roles, requiredRoles, requireAllRoles)) return false;
-      if (requiredPermissions?.length && !has(permissions, requiredPermissions, requireAllPermissions)) return false;
-      if (canAccess && !await canAccess()) return false;
-      return true;
-    };
-    evaluate().then((ok) => {
+    const finish = (ok) => {
       if (cancelled) return;
       setState(ok ? "granted" : "denied");
-      if (!ok) onDeny?.();
-    });
+      if (ok) onGranted?.();
+      else onDeny?.();
+    };
+    if (!passesSync()) {
+      finish(false);
+    } else if (!canAccess) {
+      finish(true);
+    } else {
+      const result = canAccess(route);
+      if (result && typeof result.then === "function") {
+        setState("checking");
+        result.then((ok) => finish(Boolean(ok)));
+      } else {
+        finish(Boolean(result));
+      }
+    }
     return () => {
       cancelled = true;
     };
   }, [
     isAuthenticated,
     token,
+    route,
     requireAllRoles,
     requireAllPermissions,
     canAccess,
@@ -5892,10 +5909,12 @@ function SecureLayout({
     requiredPermissionsKey
   ]);
   if (state === "checking") {
-    return /* @__PURE__ */ jsx("div", { className: ["flex min-h-[8rem] items-center justify-center", className].filter(Boolean).join(" "), children: loadingFallback ?? /* @__PURE__ */ jsx(Spinner2, {}) });
+    if (loadingFallback === null) return null;
+    return /* @__PURE__ */ jsx("div", { className: ["flex min-h-[8rem] items-center justify-center", className].filter(Boolean).join(" "), children: loadingFallback !== void 0 ? loadingFallback : /* @__PURE__ */ jsx(Spinner2, {}) });
   }
   if (state === "denied") {
-    return /* @__PURE__ */ jsx("div", { className: className || void 0, children: fallback ?? /* @__PURE__ */ jsxs("div", { className: "flex min-h-[8rem] flex-col items-center justify-center gap-1 rounded-xl border border-border bg-surface p-8 text-center", children: [
+    if (fallback === null) return null;
+    return /* @__PURE__ */ jsx("div", { className: className || void 0, children: fallback !== void 0 ? fallback : /* @__PURE__ */ jsxs("div", { className: "flex min-h-[8rem] flex-col items-center justify-center gap-1 rounded-xl border border-border bg-surface p-8 text-center", children: [
       /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: "Access denied" }),
       /* @__PURE__ */ jsx("div", { className: "text-xs text-foreground-muted", children: "You don\u2019t have permission to view this content." })
     ] }) });