@geomak/ui 6.21.1 → 6.22.0

package/dist/index.d.cts

@@ -2869,11 +2869,15 @@ interface SecureLayoutProps {
     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. */
+    /** 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 +2891,28 @@ 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>
  */
-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, canAccess, loadingFallback, fallback, onGranted, onDeny, className, }: SecureLayoutProps): react_jsx_runtime.JSX.Element;
 
 interface ThemeColors {
     background?: string;

package/dist/index.d.ts

@@ -2869,11 +2869,15 @@ interface SecureLayoutProps {
     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. */
+    /** 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 +2891,28 @@ 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>
  */
-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, canAccess, loadingFallback, fallback, onGranted, onDeny, className, }: SecureLayoutProps): react_jsx_runtime.JSX.Element;
 
 interface ThemeColors {
     background?: string;

package/dist/index.js

@@ -5850,33 +5850,43 @@ function SecureLayout({
   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 {
+      setState("checking");
+      Promise.resolve(canAccess()).then((ok) => finish(Boolean(ok)));
+    }
     return () => {
       cancelled = true;
     };
@@ -5892,10 +5902,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." })
     ] }) });