@shane_donnelly/dsi-internal-react-utils 0.1.3 → 0.2.0

package/README.md

@@ -26,37 +26,21 @@ import '@shane_donnelly/dsi-internal-react-utils/style.css'
 
 ### Keycloak
 
-Wrapper de simplification pour `keycloak-js`. Gère l'authentification automatique via Identity Provider, le refresh de token, et la protection de routes/zones.
+Wrapper de simplification pour `keycloak-js`. `KeycloakProvider` singleton à la racine, `useKeycloakAuth` pour accéder à l'état d'auth et déclencher login / logout depuis n'importe quel composant.
 
 [Documentation complète du module Keycloak](docs/keycloak.md)
 
 ---
 
-## Exemple complet avec React Router
+## Exemple complet avec React Router v7 (framework mode)
 
-```tsx
-// main.tsx
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
-import App from './App';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </React.StrictMode>,
-);
-```
+React Router v7 framework mode utilise `app/root.tsx` comme layout racine — c'est là que le `KeycloakProvider` doit être placé.
 
 ```tsx
-// App.tsx
-import { Routes, Route } from 'react-router-dom';
-import { KeycloakProvider, ProtectedRoute } from '@shane_donnelly/dsi-internal-react-utils';
-import PublicPage from './pages/PublicPage';
-import Dashboard from './pages/Dashboard';
-import Profile from './pages/Profile';
+// app/root.tsx
+import { Outlet } from 'react-router';
+import { KeycloakProvider } from '@shane_donnelly/dsi-internal-react-utils';
+import '@shane_donnelly/dsi-internal-react-utils/style.css';
 
 const keycloakConfig = {
   url: 'https://keycloak.example.com',
@@ -64,83 +48,51 @@ const keycloakConfig = {
   clientId: 'my-frontend',
 };
 
-export default function App() {
+export default function Root() {
   return (
     <KeycloakProvider config={keycloakConfig} idpHint="oidc" refreshInterval={300}>
-      <Routes>
-        {/* Route publique — accessible sans authentification */}
-        <Route path="/" element={<PublicPage />} />
-
-        {/* Routes protégées — redirection automatique vers l'IDP */}
-        <Route
-          path="/dashboard"
-          element={
-            <ProtectedRoute>
-              <Dashboard />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/profile"
-          element={
-            <ProtectedRoute fallback={<p>Chargement du profil...</p>}>
-              <Profile />
-            </ProtectedRoute>
-          }
-        />
-      </Routes>
+      <Outlet />
     </KeycloakProvider>
   );
 }
 ```
 
 ```tsx
-// pages/Dashboard.tsx
-import { useAuth } from '@shane_donnelly/dsi-internal-react-utils';
+// app/routes/profile.tsx
+import { useEffect } from 'react';
+import { useKeycloakAuth } from '@shane_donnelly/dsi-internal-react-utils';
+
+export default function Profile() {
+  const { status, user, login, logout } = useKeycloakAuth();
+
+  useEffect(() => {
+    if (status === 'unauthenticated') {
+      login({ idpHint: 'oidc' });
+    }
+  }, [status, login]);
 
-export default function Dashboard() {
-  const { user, token, logout } = useAuth();
+  if (status === 'loading' || status === 'unauthenticated') return <p>Chargement...</p>;
+  if (status === 'error') return <p>Erreur d'authentification.</p>;
 
   return (
     <div>
       <h1>Bienvenue {user?.name}</h1>
       <p>Email : {user?.email}</p>
-      <button onClick={() => logout()}>Se déconnecter</button>
+      <button onClick={() => logout({ redirectUri: window.location.origin })}>
+        Se déconnecter
+      </button>
     </div>
   );
 }
 ```
 
-### Mode plug & play (sans Provider)
-
-Pour un usage rapide sans `KeycloakProvider`, passez `config` directement à `ProtectedRoute` :
-
-```tsx
-import { ProtectedRoute } from '@shane_donnelly/dsi-internal-react-utils';
-
-function App() {
-  return (
-    <ProtectedRoute
-      config={{
-        url: 'https://keycloak.example.com',
-        realm: 'my-realm',
-        clientId: 'my-frontend',
-      }}
-      idpHint="oidc"
-    >
-      <Dashboard />
-    </ProtectedRoute>
-  );
-}
-```
-
 ### Utiliser le token pour les appels API
 
 ```tsx
-import { useAuth } from '@shane_donnelly/dsi-internal-react-utils';
+import { useKeycloakAuth } from '@shane_donnelly/dsi-internal-react-utils';
 
 function useAuthFetch() {
-  const { token } = useAuth();
+  const { token } = useKeycloakAuth();
 
   return (url: string, options?: RequestInit) =>
     fetch(url, {
@@ -156,10 +108,10 @@ function useAuthFetch() {
 ### Accéder à l'instance keycloak-js (usage avancé)
 
 ```tsx
-import { useAuth } from '@shane_donnelly/dsi-internal-react-utils';
+import { useKeycloakAuth } from '@shane_donnelly/dsi-internal-react-utils';
 
 function AdvancedComponent() {
-  const { keycloak } = useAuth();
+  const { keycloak } = useKeycloakAuth();
 
   // Accès direct à l'instance keycloak-js pour des cas spécifiques
   console.log(keycloak?.tokenParsed);
@@ -171,10 +123,10 @@ function AdvancedComponent() {
 Deux fonctions sont disponibles pour manipuler l'instance Keycloak en dehors de React (intercepteurs HTTP, services, etc.) :
 
 ```tsx
-import { useAuth, logoutKeycloak, refreshTokenKeycloak } from '@shane_donnelly/dsi-internal-react-utils';
+import { useKeycloakAuth, logoutKeycloak, refreshTokenKeycloak } from '@shane_donnelly/dsi-internal-react-utils';
 
-// Récupérer l'instance keycloak via useAuth()
-const { keycloak } = useAuth();
+// Récupérer l'instance keycloak via useKeycloakAuth()
+const { keycloak } = useKeycloakAuth();
 
 // Rafraîchir le token (minValidity en secondes, défaut: 30)
 const refreshed = await refreshTokenKeycloak(keycloak!, 60);

package/dist/keycloak/core/types.d.ts

@@ -20,9 +20,25 @@ export type KeycloakAuthOptions = {
     refreshInterval?: number;
     /** Validité minimale du token en secondes avant rafraîchissement (défaut: 30) */
     minTokenValidity?: number;
-    /** Comportement en cas d'erreur d'auth: 'login' pour rediriger, 'logout' pour déconnecter, ou un handler custom */
+    /** Comportement en cas d'erreur de refresh token: 'login' pour rediriger, 'logout' pour déconnecter, ou un handler custom */
     onAuthError?: 'login' | 'logout' | ((error: unknown) => void);
 };
+/**
+ * Options pour déclencher le login Keycloak.
+ */
+export type LoginOptions = {
+    /** Identity provider hint, override le `idpHint` du `KeycloakProvider` */
+    idpHint?: string;
+    /** URI vers laquelle Keycloak redirige après le login */
+    redirectUri?: string;
+};
+/**
+ * Options pour déclencher le logout.
+ */
+export type LogoutOptions = {
+    /** URI de redirection après déconnexion (défaut: `window.location.origin`) */
+    redirectUri?: string;
+};
 /**
  * État de l'authentification.
  * - `loading` : vérification en cours
@@ -45,7 +61,7 @@ export type AuthUser = {
     [key: string]: unknown;
 };
 /**
- * Valeur du contexte d'authentification exposée par `KeycloakProvider` et `useAuth`.
+ * Valeur du contexte d'authentification exposée par `KeycloakProvider` et `useKeycloakAuth`.
  */
 export type AuthContextValue = {
     /** État actuel de l'authentification */
@@ -58,10 +74,10 @@ export type AuthContextValue = {
     isAuthenticated: boolean;
     /** Instance keycloak-js sous-jacente (pour usage avancé) */
     keycloak: Keycloak | null;
-    /** Déclencher une redirection de login. Accepte un idpHint optionnel pour override celui du Provider. */
-    login: (idpHint?: string) => Promise<void>;
-    /** Déclencher un logout. Accepte un redirectUri optionnel (défaut: origin). */
-    logout: (redirectUri?: string) => Promise<void>;
+    /** Déclencher une redirection vers le login Keycloak */
+    login: (options?: LoginOptions) => Promise<void>;
+    /** Déclencher le logout. Redirige vers `redirectUri` après déconnexion (défaut: `window.location.origin`). */
+    logout: (options?: LogoutOptions) => Promise<void>;
     /** Rafraîchir manuellement le token. Retourne true si réussi. */
     refreshToken: () => Promise<boolean>;
 };

package/dist/keycloak/index.d.ts

@@ -1,7 +1,5 @@
 export { KeycloakProvider } from './react/KeycloakProvider';
 export type { KeycloakProviderProps } from './react/KeycloakProvider';
-export { ProtectedRoute } from './react/ProtectedRoute';
-export type { ProtectedRouteProps } from './react/ProtectedRoute';
-export { useAuth } from './react/hooks/useAuth';
+export { useKeycloakAuth } from './react/hooks/useKeycloakAuth';
 export { logoutKeycloak, refreshTokenKeycloak } from './core/client';
-export type { KeycloakConfig, KeycloakAuthOptions, AuthStatus, AuthUser, AuthContextValue, } from './core/types';
+export type { KeycloakConfig, KeycloakAuthOptions, AuthStatus, AuthUser, AuthContextValue, LoginOptions, LogoutOptions, } from './core/types';

package/dist/keycloak/index.js

@@ -1,5 +1,4 @@
 import { logoutKeycloak as e, refreshTokenKeycloak as t } from "./core/client.js";
 import { KeycloakProvider as n } from "./react/KeycloakProvider/index.js";
-import { useAuth as r } from "./react/hooks/useAuth.js";
-import { t as i } from "../ProtectedRoute-_48urWWd.js";
-export { n as KeycloakProvider, i as ProtectedRoute, e as logoutKeycloak, t as refreshTokenKeycloak, r as useAuth };
+import { useKeycloakAuth as r } from "./react/hooks/useKeycloakAuth.js";
+export { n as KeycloakProvider, e as logoutKeycloak, t as refreshTokenKeycloak, r as useKeycloakAuth };

package/dist/keycloak/react/KeycloakProvider/index.js

@@ -4,65 +4,70 @@ import { jsx as c } from "react/jsx-runtime";
 //#region lib/keycloak/react/KeycloakProvider/index.tsx
 var l = r(null);
 function u({ config: r, children: u, idpHint: d, refreshInterval: f = 300, minTokenValidity: p = 30, onAuthError: m }) {
-	let [h, g] = s("loading"), [_, v] = s(null), [y, b] = s(null), x = o(null), S = o(!1), C = i((e) => {
+	let [h, g] = s("loading"), [_, v] = s(null), [y, b] = s(null), x = o(null), S = o(!1), C = o(d), w = i((e) => {
 		e.authenticated && e.token ? (v(e.token), b(n(e)), g("authenticated")) : (v(null), b(null), g("unauthenticated"));
-	}, []), w = i(async (e) => {
-		m === "login" ? await x.current?.login({ idpHint: d }) : m === "logout" ? await x.current?.logout({ redirectUri: window.location.origin }) : typeof m == "function" && m(e);
-	}, [m, d]), T = i(async () => {
+	}, []), T = i(async (e) => {
+		m === "logout" ? await x.current?.logout({ redirectUri: window.location.origin }) : typeof m == "function" ? m(e) : await x.current?.login({ idpHint: C.current });
+	}, [m, d]), E = i(async () => {
 		let e = x.current;
 		if (!e) return !1;
 		try {
-			return await e.updateToken(p) && C(e), !0;
+			return await e.updateToken(p) && w(e), !0;
 		} catch (e) {
-			return console.warn("[dsi-keycloak] Token refresh failed:", e), await w(e), !1;
+			return console.warn("[dsi-keycloak] Token refresh failed:", e), await T(e), !1;
 		}
 	}, [
 		p,
-		C,
-		w
+		w,
+		T
 	]);
 	a(() => {
 		if (S.current) return;
 		S.current = !0;
 		let n = e(r);
 		x.current = n, t(n).then((e) => {
-			C(n), e || g("unauthenticated");
+			w(n), e || g("unauthenticated");
 		}).catch((e) => {
 			console.error("[dsi-keycloak] Init error:", e), g("error");
 		});
 	}, []), a(() => {
 		if (h !== "authenticated") return;
 		let e = window.setInterval(() => {
-			T();
+			E();
 		}, f * 1e3), t = () => {
-			document.visibilityState === "visible" && T();
-		};
-		return document.addEventListener("visibilitychange", t), () => {
-			clearInterval(e), document.removeEventListener("visibilitychange", t);
+			document.visibilityState === "visible" && E();
+		}, n = () => E(), r = () => E();
+		return document.addEventListener("visibilitychange", t), window.addEventListener("focus", n), window.addEventListener("online", r), () => {
+			clearInterval(e), document.removeEventListener("visibilitychange", t), window.removeEventListener("focus", n), window.removeEventListener("online", r);
 		};
 	}, [
 		h,
 		f,
-		T
+		E
 	]);
-	let E = i(async (e) => {
+	let D = i(async (e) => {
 		let t = x.current;
-		t && await t.login({ idpHint: e ?? d });
-	}, [d]), D = i(async (e) => {
+		if (!t) return;
+		let n = e?.idpHint ?? d;
+		C.current = n, await t.login({
+			idpHint: n,
+			redirectUri: e?.redirectUri
+		});
+	}, [d]), O = i(async (e) => {
 		let t = x.current;
-		t && await t.logout({ redirectUri: e ?? window.location.origin });
-	}, []), O = {
+		t && await t.logout({ redirectUri: e?.redirectUri ?? window.location.origin });
+	}, []), k = {
 		status: h,
 		token: _,
 		user: y,
 		isAuthenticated: h === "authenticated",
 		keycloak: x.current,
-		login: E,
-		logout: D,
-		refreshToken: T
+		login: D,
+		logout: O,
+		refreshToken: E
 	};
 	return /* @__PURE__ */ c(l.Provider, {
-		value: O,
+		value: k,
 		children: u
 	});
 }

package/dist/keycloak/react/hooks/{useAuth.d.ts → useKeycloakAuth.d.ts}

@@ -5,14 +5,14 @@ import { AuthContextValue } from '../../core/types';
  * Donne accès à l'état d'authentification, au token, aux infos utilisateur,
  * et aux actions (login, logout, refreshToken).
  *
- * Doit être utilisé à l'intérieur d'un `KeycloakProvider` ou d'un `ProtectedRoute` avec `config`.
+ * Doit être utilisé à l'intérieur d'un `KeycloakProvider`.
  *
  * @returns Objet d'authentification complet
  *
  * @example
  * ```tsx
  * function UserProfile() {
- *   const { user, token, isAuthenticated, logout } = useAuth();
+ *   const { user, token, isAuthenticated, logout } = useKeycloakAuth();
  *
  *   if (!isAuthenticated) return null;
  *
@@ -25,10 +25,23 @@ import { AuthContextValue } from '../../core/types';
  * }
  * ```
  *
+ * @example Déconnexion
+ * ```tsx
+ * function LogoutButton() {
+ *   const { logout } = useKeycloakAuth();
+ *
+ *   return (
+ *     <button onClick={() => logout()}>
+ *       Se déconnecter
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
  * @example Utiliser le token pour des appels API
  * ```tsx
  * function useFetchWithAuth(url: string) {
- *   const { token } = useAuth();
+ *   const { token } = useKeycloakAuth();
  *
  *   return fetch(url, {
  *     headers: { Authorization: `Bearer ${token}` },
@@ -36,4 +49,4 @@ import { AuthContextValue } from '../../core/types';
  * }
  * ```
  */
-export declare function useAuth(): AuthContextValue;
+export declare function useKeycloakAuth(): AuthContextValue;

package/dist/keycloak/react/hooks/useKeycloakAuth.js

@@ -0,0 +1,10 @@
+import { KeycloakAuthContext as e } from "../KeycloakProvider/index.js";
+import { useContext as t } from "react";
+//#region lib/keycloak/react/hooks/useKeycloakAuth.ts
+function n() {
+	let n = t(e);
+	if (!n) throw Error("[dsi-keycloak] useKeycloakAuth() must be used within a <KeycloakProvider>.");
+	return n;
+}
+//#endregion
+export { n as useKeycloakAuth };

package/dist/main.d.ts

@@ -1,2 +1,2 @@
-export { KeycloakProvider, ProtectedRoute, useAuth, logoutKeycloak, refreshTokenKeycloak, } from './keycloak';
-export type { KeycloakProviderProps, ProtectedRouteProps, KeycloakConfig, KeycloakAuthOptions, AuthStatus, AuthUser, AuthContextValue, } from './keycloak';
+export { KeycloakProvider, useKeycloakAuth, logoutKeycloak, refreshTokenKeycloak, } from './keycloak';
+export type { KeycloakProviderProps, KeycloakConfig, KeycloakAuthOptions, AuthStatus, AuthUser, AuthContextValue, LoginOptions, LogoutOptions, } from './keycloak';

package/dist/main.js

@@ -1,6 +1,5 @@
 import { logoutKeycloak as e, refreshTokenKeycloak as t } from "./keycloak/core/client.js";
 import { KeycloakProvider as n } from "./keycloak/react/KeycloakProvider/index.js";
-import { useAuth as r } from "./keycloak/react/hooks/useAuth.js";
-import { t as i } from "./ProtectedRoute-_48urWWd.js";
+import { useKeycloakAuth as r } from "./keycloak/react/hooks/useKeycloakAuth.js";
 import "./keycloak/index.js";
-export { n as KeycloakProvider, i as ProtectedRoute, e as logoutKeycloak, t as refreshTokenKeycloak, r as useAuth };
+export { n as KeycloakProvider, e as logoutKeycloak, t as refreshTokenKeycloak, r as useKeycloakAuth };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shane_donnelly/dsi-internal-react-utils",
   "private": false,
-  "version": "0.1.3",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/dist/ProtectedRoute-_48urWWd.js

@@ -1,55 +0,0 @@
-import { KeycloakProvider as e } from "./keycloak/react/KeycloakProvider/index.js";
-import { useAuth as t } from "./keycloak/react/hooks/useAuth.js";
-import { useEffect as n, useRef as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-var s = {
-	loadingContainer: "_loadingContainer_1th3z_1",
-	spinner: "_spinner_1th3z_11",
-	spin: "_spin_1th3z_11",
-	errorContainer: "_errorContainer_1th3z_26",
-	errorMessage: "_errorMessage_1th3z_36"
-};
-//#endregion
-//#region lib/keycloak/react/ProtectedRoute/index.tsx
-function c() {
-	return /* @__PURE__ */ o("div", {
-		className: s.loadingContainer,
-		children: [/* @__PURE__ */ a("div", { className: s.spinner }), /* @__PURE__ */ a("p", { children: "Authentication in progress..." })]
-	});
-}
-function l() {
-	return /* @__PURE__ */ a("div", {
-		className: s.errorContainer,
-		children: /* @__PURE__ */ a("p", {
-			className: s.errorMessage,
-			children: "Authentication error. Please try again later."
-		})
-	});
-}
-function u({ children: e, fallback: o, errorFallback: s }) {
-	let { status: u, login: d } = t(), f = r(!1);
-	return n(() => {
-		u === "unauthenticated" && !f.current && (f.current = !0, d().catch((e) => {
-			console.error("[dsi-keycloak] Login redirect failed:", e);
-		}));
-	}, [u, d]), u === "loading" || u === "unauthenticated" ? /* @__PURE__ */ a(i, { children: o ?? /* @__PURE__ */ a(c, {}) }) : u === "error" ? /* @__PURE__ */ a(i, { children: s ?? /* @__PURE__ */ a(l, {}) }) : /* @__PURE__ */ a(i, { children: e });
-}
-function d(e) {
-	return "config" in e && e.config != null;
-}
-function f(t) {
-	if (d(t)) {
-		let { config: n, idpHint: r, refreshInterval: i, minTokenValidity: o, onAuthError: s, ...c } = t;
-		return /* @__PURE__ */ a(e, {
-			config: n,
-			idpHint: r,
-			refreshInterval: i,
-			minTokenValidity: o,
-			onAuthError: s,
-			children: /* @__PURE__ */ a(u, { ...c })
-		});
-	}
-	return /* @__PURE__ */ a(u, { ...t });
-}
-//#endregion
-export { f as t };

package/dist/keycloak/react/ProtectedRoute/index.d.ts

@@ -1,69 +0,0 @@
-import { ReactNode } from 'react';
-import { KeycloakConfig, KeycloakAuthOptions } from '../../core/types';
-/**
- * Props de base du composant `ProtectedRoute`.
- */
-interface BaseProtectedRouteProps {
-    /** Contenu protégé, affiché une fois authentifié */
-    children: ReactNode;
-    /** Composant affiché pendant le chargement / la redirection (défaut: spinner) */
-    fallback?: ReactNode;
-    /** Composant affiché en cas d'erreur d'authentification (défaut: message d'erreur) */
-    errorFallback?: ReactNode;
-}
-/**
- * Props pour le mode standalone (sans `KeycloakProvider` parent).
- * Inclut la configuration Keycloak et les options d'authentification.
- */
-interface StandaloneProtectedRouteProps extends BaseProtectedRouteProps, KeycloakAuthOptions {
-    /** Configuration du serveur Keycloak */
-    config: KeycloakConfig;
-}
-/**
- * Props pour le mode contexte (à l'intérieur d'un `KeycloakProvider`).
- */
-type ContextProtectedRouteProps = BaseProtectedRouteProps;
-/**
- * Union des props acceptées par `ProtectedRoute`.
- */
-export type ProtectedRouteProps = StandaloneProtectedRouteProps | ContextProtectedRouteProps;
-/**
- * Composant de protection de route / zone authentifiée.
- *
- * Fonctionne en deux modes :
- *
- * **Mode standalone** (plug & play) : fournir `config` et les options directement.
- * Crée automatiquement un `KeycloakProvider` interne.
- *
- * **Mode contexte** : utiliser à l'intérieur d'un `KeycloakProvider` parent.
- * Ne nécessite que `children` et optionnellement `fallback` / `errorFallback`.
- *
- * Dans les deux cas, le composant :
- * - Vérifie l'état d'authentification via `check-sso`
- * - Redirige vers le login Keycloak (via l'IDP configuré) si non authentifié
- * - Affiche un fallback pendant le chargement
- * - Rend les enfants une fois authentifié
- *
- * Basé sur `keycloak-js`.
- *
- * @example Mode standalone (plug & play)
- * ```tsx
- * <ProtectedRoute
- *   config={{ url: 'https://keycloak.example.com', realm: 'my-realm', clientId: 'my-client' }}
- *   idpHint="oidc"
- * >
- *   <Dashboard />
- * </ProtectedRoute>
- * ```
- *
- * @example Mode contexte (avec KeycloakProvider parent)
- * ```tsx
- * <KeycloakProvider config={...} idpHint="oidc">
- *   <ProtectedRoute>
- *     <Dashboard />
- *   </ProtectedRoute>
- * </KeycloakProvider>
- * ```
- */
-export declare function ProtectedRoute(props: ProtectedRouteProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/keycloak/react/ProtectedRoute/index.js

@@ -1,2 +0,0 @@
-import { t as e } from "../../../ProtectedRoute-_48urWWd.js";
-export { e as ProtectedRoute };

package/dist/keycloak/react/hooks/useAuth.js

@@ -1,10 +0,0 @@
-import { KeycloakAuthContext as e } from "../KeycloakProvider/index.js";
-import { useContext as t } from "react";
-//#region lib/keycloak/react/hooks/useAuth.ts
-function n() {
-	let n = t(e);
-	if (!n) throw Error("[dsi-keycloak] useAuth() must be used within a <KeycloakProvider> or a <ProtectedRoute config={...}>.");
-	return n;
-}
-//#endregion
-export { n as useAuth };

package/dist/style.css

@@ -1,2 +0,0 @@
-._loadingContainer_1th3z_1{flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:100vh;font-family:system-ui,-apple-system,sans-serif;display:flex}._spinner_1th3z_11{border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;width:40px;height:40px;animation:1s linear infinite _spin_1th3z_11}@keyframes _spin_1th3z_11{to{transform:rotate(360deg)}}._errorContainer_1th3z_26{flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:100vh;font-family:system-ui,-apple-system,sans-serif;display:flex}._errorMessage_1th3z_36{color:#dc2626;text-align:center;background:#fef2f2;border-radius:12px;max-width:400px;padding:1.5rem}
-/*$vite$:1*/