@geomak/ui 6.21.1 → 6.22.0

package/dist/index.cjs

@@ -5887,33 +5887,43 @@ function SecureLayout({
   canAccess,
   loadingFallback,
   fallback,
+  onGranted,
   onDeny,
   className = ""
 }) {
   const reduced = framerMotion.useReducedMotion();
-  const [state, setState] = React26.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] = React26.useState(
+    () => !passesSync() ? "denied" : canAccess ? "checking" : "granted"
+  );
   React26.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;
     };
@@ -5929,10 +5939,12 @@ function SecureLayout({
     requiredPermissionsKey
   ]);
   if (state === "checking") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["flex min-h-[8rem] items-center justify-center", className].filter(Boolean).join(" "), children: loadingFallback ?? /* @__PURE__ */ jsxRuntime.jsx(Spinner2, {}) });
+    if (loadingFallback === null) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["flex min-h-[8rem] items-center justify-center", className].filter(Boolean).join(" "), children: loadingFallback !== void 0 ? loadingFallback : /* @__PURE__ */ jsxRuntime.jsx(Spinner2, {}) });
   }
   if (state === "denied") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: className || void 0, children: fallback ?? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: className || void 0, children: fallback !== void 0 ? fallback : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-foreground", children: "Access denied" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-foreground-muted", children: "You don\u2019t have permission to view this content." })
     ] }) });