primus-react-ui 1.0.14 → 1.1.0

package/dist/index.mjs

@@ -760,7 +760,7 @@ var SecurityDashboard = ({
 };
 
 // src/components/auth/PrimusLogin.tsx
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 
 // src/context/PrimusThemeProvider.tsx
 import { createContext, useContext, useState as useState12, useCallback } from "react";
@@ -844,240 +844,144 @@ function PrimusThemeToggle() {
   );
 }
 
-// src/components/auth/PrimusLogin.tsx
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
-var providerConfigs = {
-  google: {
-    name: "Google",
-    icon: /* @__PURE__ */ jsxs12("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", children: [
-      /* @__PURE__ */ jsx13("path", { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }),
-      /* @__PURE__ */ jsx13("path", { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }),
-      /* @__PURE__ */ jsx13("path", { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }),
-      /* @__PURE__ */ jsx13("path", { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })
-    ] }),
-    colors: { light: "bg-white hover:bg-gray-50 text-gray-700 border-gray-300", dark: "bg-white hover:bg-gray-100 text-gray-700 border-gray-300" }
-  },
-  azure: {
-    name: "Microsoft",
-    icon: /* @__PURE__ */ jsxs12("svg", { className: "h-5 w-5", viewBox: "0 0 23 23", children: [
-      /* @__PURE__ */ jsx13("path", { fill: "#f35325", d: "M1 1h10v10H1z" }),
-      /* @__PURE__ */ jsx13("path", { fill: "#81bc06", d: "M12 1h10v10H12z" }),
-      /* @__PURE__ */ jsx13("path", { fill: "#05a6f0", d: "M1 12h10v10H1z" }),
-      /* @__PURE__ */ jsx13("path", { fill: "#ffba08", d: "M12 12h10v10H12z" })
-    ] }),
-    colors: { light: "bg-white hover:bg-gray-50 text-gray-700 border-gray-300", dark: "bg-white hover:bg-gray-100 text-gray-700 border-gray-300" }
-  },
-  github: {
-    name: "GitHub",
-    icon: /* @__PURE__ */ jsx13("svg", { className: "h-5 w-5", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { fillRule: "evenodd", d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z", clipRule: "evenodd" }) }),
-    colors: { light: "bg-gray-900 hover:bg-gray-800 text-white border-gray-900", dark: "bg-white hover:bg-gray-100 text-gray-900 border-gray-300" }
-  },
-  microsoft: {
-    name: "Microsoft",
-    icon: /* @__PURE__ */ jsxs12("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", children: [
-      /* @__PURE__ */ jsx13("path", { fill: "#F25022", d: "M1 1h10v10H1z" }),
-      /* @__PURE__ */ jsx13("path", { fill: "#00A4EF", d: "M1 13h10v10H1z" }),
-      /* @__PURE__ */ jsx13("path", { fill: "#7FBA00", d: "M13 1h10v10H13z" }),
-      /* @__PURE__ */ jsx13("path", { fill: "#FFB900", d: "M13 13h10v10H13z" })
-    ] }),
-    colors: { light: "bg-white hover:bg-gray-50 text-gray-700 border-gray-300", dark: "bg-white hover:bg-gray-100 text-gray-700 border-gray-300" }
-  },
-  apple: {
-    name: "Apple",
-    icon: /* @__PURE__ */ jsx13("svg", { className: "h-5 w-5", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { d: "M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" }) }),
-    colors: { light: "bg-black hover:bg-gray-900 text-white border-black", dark: "bg-white hover:bg-gray-100 text-black border-gray-300" }
-  },
-  facebook: {
-    name: "Facebook",
-    icon: /* @__PURE__ */ jsx13("svg", { className: "h-5 w-5", fill: "white", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }) }),
-    colors: { light: "bg-[#1877F2] hover:bg-[#166FE5] text-white border-[#1877F2]", dark: "bg-[#1877F2] hover:bg-[#166FE5] text-white border-[#1877F2]" }
-  }
-};
-function PrimusLogin({
-  onLogin,
-  socialProviders = [],
-  onSocialLogin,
-  authEndpoint = "/api/auth",
-  showEmailLogin = true,
-  title = "Welcome Back",
-  subtitle = "Enter your credentials to continue",
-  logo,
-  theme: themeOverride
-}) {
-  const themeContext = usePrimusTheme();
-  const theme = themeOverride || themeContext.theme;
-  const isLight = theme === "light";
-  const [username, setUsername] = useState13("");
-  const [password, setPassword] = useState13("");
-  const [loading, setLoading] = useState13(false);
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!username || !password) return;
-    setLoading(true);
-    try {
-      onLogin?.({ username, password });
-    } finally {
-      setLoading(false);
-    }
-  };
-  const handleSocialClick = (provider) => {
-    if (onSocialLogin) {
-      onSocialLogin(provider);
-    } else {
-      window.location.href = `${authEndpoint}/${provider}`;
-    }
-  };
-  const bgGradient = isLight ? "bg-gradient-to-br from-gray-50 via-white to-violet-50" : "bg-gray-950";
-  const cardBg = isLight ? "bg-white border-gray-200 shadow-xl" : "bg-gray-900/50 border-white/10";
-  const headingColor = isLight ? "text-gray-900" : "text-white";
-  const subtextColor = isLight ? "text-gray-500" : "text-slate-400";
-  const labelColor = isLight ? "text-gray-600" : "text-slate-300";
-  const inputClasses = isLight ? "bg-gray-50 border-gray-300 text-gray-900 placeholder:text-gray-400 focus:border-violet-500 focus:ring-violet-500" : "bg-gray-950/50 border-slate-700 text-white placeholder:text-slate-600 focus:border-blue-500 focus:ring-blue-500";
-  const buttonGradient = isLight ? "bg-gradient-to-r from-violet-600 to-purple-600" : "bg-gradient-to-r from-blue-600 to-indigo-600";
-  const logoBg = isLight ? "bg-violet-600 shadow-violet-500/20" : "bg-blue-600 shadow-blue-500/20";
-  const dividerColor = isLight ? "border-gray-200" : "border-slate-700";
-  const hasSocial = socialProviders.length > 0;
-  return /* @__PURE__ */ jsxs12("div", { className: `min-h-screen ${bgGradient} flex items-center justify-center p-4`, children: [
-    !isLight && /* @__PURE__ */ jsxs12("div", { className: "absolute inset-0 overflow-hidden", children: [
-      /* @__PURE__ */ jsx13("div", { className: "absolute -top-[20%] -left-[10%] w-[50%] h-[50%] bg-blue-600/20 rounded-full blur-[120px]" }),
-      /* @__PURE__ */ jsx13("div", { className: "absolute -bottom-[20%] -right-[10%] w-[50%] h-[50%] bg-purple-600/20 rounded-full blur-[120px]" })
-    ] }),
-    /* @__PURE__ */ jsxs12("div", { className: `w-full max-w-md ${cardBg} p-8 rounded-2xl border backdrop-blur-xl relative z-10`, children: [
-      /* @__PURE__ */ jsxs12("div", { className: "text-center mb-8", children: [
-        logo ? typeof logo === "string" ? /* @__PURE__ */ jsx13("img", { src: logo, alt: "Logo", className: "h-12 w-12 mx-auto mb-4 rounded-xl" }) : /* @__PURE__ */ jsx13("div", { className: "mb-4", children: logo }) : /* @__PURE__ */ jsx13("div", { className: `h-12 w-12 ${logoBg} rounded-xl mx-auto flex items-center justify-center mb-4 shadow-lg`, children: /* @__PURE__ */ jsx13("span", { className: "font-bold text-xl text-white", children: "P" }) }),
-        /* @__PURE__ */ jsx13("h1", { className: `text-2xl font-bold ${headingColor} tracking-tight`, children: title }),
-        /* @__PURE__ */ jsx13("p", { className: `${subtextColor} text-sm mt-2`, children: subtitle })
-      ] }),
-      hasSocial && /* @__PURE__ */ jsx13("div", { className: "space-y-3 mb-6", children: socialProviders.map((provider) => {
-        const config = providerConfigs[provider];
-        if (!config) return null;
-        return /* @__PURE__ */ jsxs12(
-          "button",
-          {
-            onClick: () => handleSocialClick(provider),
-            className: `w-full flex items-center justify-center gap-3 px-4 py-2.5 border rounded-lg font-medium text-sm transition-all duration-200 ${isLight ? config.colors.light : config.colors.dark}`,
-            children: [
-              config.icon,
-              /* @__PURE__ */ jsxs12("span", { children: [
-                "Continue with ",
-                config.name
-              ] })
-            ]
-          },
-          provider
-        );
-      }) }),
-      hasSocial && showEmailLogin && /* @__PURE__ */ jsxs12("div", { className: "relative my-6", children: [
-        /* @__PURE__ */ jsx13("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx13("div", { className: `w-full border-t ${dividerColor}` }) }),
-        /* @__PURE__ */ jsx13("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsx13("span", { className: `${isLight ? "bg-white" : "bg-gray-900/50"} px-2 ${subtextColor}`, children: "Or continue with email" }) })
-      ] }),
-      showEmailLogin && /* @__PURE__ */ jsxs12("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs12("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx13("label", { className: `text-xs font-medium ${labelColor} ml-1`, children: "EMAIL" }),
-          /* @__PURE__ */ jsx13(
-            "input",
-            {
-              type: "text",
-              value: username,
-              onChange: (e) => setUsername(e.target.value),
-              className: `w-full px-4 py-2.5 ${inputClasses} border rounded-lg focus:outline-none focus:ring-1 transition-all text-sm`,
-              placeholder: "you@example.com"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs12("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx13("label", { className: `text-xs font-medium ${labelColor} ml-1`, children: "PASSWORD" }),
-          /* @__PURE__ */ jsx13(
-            "input",
-            {
-              type: "password",
-              value: password,
-              onChange: (e) => setPassword(e.target.value),
-              className: `w-full px-4 py-2.5 ${inputClasses} border rounded-lg focus:outline-none focus:ring-1 transition-all text-sm`,
-              placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx13(
-          "button",
-          {
-            type: "submit",
-            disabled: loading,
-            className: `w-full mt-4 py-2.5 ${buttonGradient} text-white font-medium rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50`,
-            children: loading ? "Signing in..." : "Sign In"
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
-var LoginPage = PrimusLogin;
-
 // src/context/PrimusProvider.tsx
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect8, useState as useState14, useCallback as useCallback2 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect8, useState as useState13, useCallback as useCallback2, useRef } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var PrimusAuthContext = createContext2(void 0);
 var PrimusProvider = ({
   children,
   authority,
+  authBasePath = "/api/auth",
+  csrfCookieName = "XSRF-TOKEN",
+  csrfHeaderName = "X-Primus-CSRF",
+  seedCsrfOnLoad = true,
   clientId,
   onLoginSuccess,
-  onLoginError
+  onLoginError,
+  heartbeatInterval = 3e5
+  // 5 minutes
 }) => {
   void clientId;
-  const [isAuthenticated, setIsAuthenticated] = useState14(false);
-  const [user, setUser] = useState14(null);
-  const [token, setToken] = useState14(null);
-  const [isLoading, setIsLoading] = useState14(false);
-  useEffect8(() => {
-    const storedToken = localStorage.getItem("primus_token");
-    const storedUser = localStorage.getItem("primus_user");
-    if (storedToken && storedUser) {
-      try {
-        setToken(storedToken);
-        setUser(JSON.parse(storedUser));
-        setIsAuthenticated(true);
-      } catch {
-        localStorage.removeItem("primus_token");
-        localStorage.removeItem("primus_user");
+  const [isAuthenticated, setIsAuthenticated] = useState13(false);
+  const [user, setUser] = useState13(null);
+  const [token, setToken] = useState13(null);
+  const [isLoading, setIsLoading] = useState13(true);
+  const heartbeatRef = useRef(null);
+  const trimTrailingSlash = (value) => value.replace(/\/+$/, "");
+  const ensureLeadingSlash = (value) => value.startsWith("/") ? value : `/${value}`;
+  const joinUrl = (base, path) => `${trimTrailingSlash(base)}${ensureLeadingSlash(path)}`;
+  const authBaseUrl = trimTrailingSlash(joinUrl(authority, authBasePath));
+  const getCookie = (name) => {
+    if (typeof document === "undefined") return null;
+    const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const matches = document.cookie.match(new RegExp(`(?:^|; )${escaped}=([^;]*)`));
+    return matches ? decodeURIComponent(matches[1]) : null;
+  };
+  const fetchSessionUser = useCallback2(async () => {
+    const response = await fetch(`${authBaseUrl}/me`, {
+      credentials: "include",
+      headers: {
+        "Accept": "application/json"
       }
+    });
+    if (!response.ok) return null;
+    const data = await response.json().catch(() => null);
+    if (!data) return null;
+    const resolvedUser = data.user ?? data;
+    return resolvedUser ?? null;
+  }, [authBaseUrl]);
+  const startHeartbeat = useCallback2(() => {
+    if (typeof window === "undefined") return;
+    if (heartbeatRef.current) clearInterval(heartbeatRef.current);
+    heartbeatRef.current = setInterval(() => {
+      fetchSessionUser().catch(() => {
+      });
+    }, heartbeatInterval);
+  }, [heartbeatInterval, fetchSessionUser]);
+  const stopHeartbeat = useCallback2(() => {
+    if (heartbeatRef.current) {
+      clearInterval(heartbeatRef.current);
+      heartbeatRef.current = null;
     }
   }, []);
+  useEffect8(() => {
+    return () => stopHeartbeat();
+  }, [stopHeartbeat]);
+  const seedCsrf = useCallback2(async () => {
+    try {
+      await fetch(`${authBaseUrl}/providers`, {
+        credentials: "include",
+        headers: { "Accept": "application/json" }
+      });
+    } catch {
+    }
+  }, [authBaseUrl]);
+  useEffect8(() => {
+    const checkSession = async () => {
+      setIsLoading(true);
+      try {
+        if (seedCsrfOnLoad) {
+          await seedCsrf();
+        }
+        const userData = await fetchSessionUser();
+        if (userData) {
+          setUser(userData);
+          setIsAuthenticated(true);
+          setToken("session-active");
+          startHeartbeat();
+        } else {
+          stopHeartbeat();
+        }
+      } catch (err) {
+        console.debug("No active session found", err);
+        setIsAuthenticated(false);
+        setUser(null);
+        stopHeartbeat();
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    checkSession();
+  }, [fetchSessionUser, seedCsrf, seedCsrfOnLoad, startHeartbeat, stopHeartbeat]);
   const login = useCallback2(async (credentials) => {
     setIsLoading(true);
     try {
-      let endpoint;
-      let body;
       if ("provider" in credentials) {
-        endpoint = `${authority}/auth/${credentials.provider}`;
-        body = {};
-      } else {
-        endpoint = `${authority}/auth/local`;
-        body = { email: credentials.email, password: credentials.password };
+        window.location.href = `${authBaseUrl}/${credentials.provider}`;
+        return { success: true };
+      }
+      const csrfToken = getCookie(csrfCookieName);
+      const headers = {
+        "Content-Type": "application/json"
+      };
+      if (csrfToken) {
+        headers[csrfHeaderName] = csrfToken;
       }
-      const response = await fetch(endpoint, {
+      const response = await fetch(`${authBaseUrl}/login`, {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(body)
+        headers,
+        credentials: "include",
+        // CRITICAL: Persist HttpOnly Cookie
+        body: JSON.stringify({ email: credentials.email, password: credentials.password })
       });
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        const errorMsg = errorData.message || `Login failed (${response.status})`;
+        const errorMsg = errorData.message || errorData.title || `Login failed (${response.status})`;
         onLoginError?.(errorMsg);
         return { success: false, error: errorMsg };
       }
-      const data = await response.json();
-      const accessToken = data.access_token || data.token;
-      const userData = data.user || {
-        name: "Authenticated User",
-        email: "provider" in credentials ? `${credentials.provider}@primus.local` : credentials.email
-      };
-      localStorage.setItem("primus_token", accessToken);
-      localStorage.setItem("primus_user", JSON.stringify(userData));
-      setToken(accessToken);
-      setUser(userData);
+      const data = await response.json().catch(() => null);
+      const userData = data ? data.user || data : null;
+      const refreshedUser = userData ?? await fetchSessionUser();
+      setToken("session-active");
+      if (refreshedUser) {
+        setUser(refreshedUser);
+        startHeartbeat();
+      }
       setIsAuthenticated(true);
-      onLoginSuccess?.(userData, accessToken);
+      if (refreshedUser) {
+        onLoginSuccess?.(refreshedUser, "session-active");
+      }
       return { success: true };
     } catch (err) {
       const errorMsg = err instanceof Error ? err.message : "Network error";
@@ -1086,15 +990,38 @@ var PrimusProvider = ({
     } finally {
       setIsLoading(false);
     }
-  }, [authority, onLoginSuccess, onLoginError]);
+  }, [authBaseUrl, csrfCookieName, csrfHeaderName, fetchSessionUser, onLoginError, onLoginSuccess, startHeartbeat]);
   const logout = useCallback2(async () => {
-    localStorage.removeItem("primus_token");
-    localStorage.removeItem("primus_user");
-    setToken(null);
-    setIsAuthenticated(false);
-    setUser(null);
-  }, []);
-  return /* @__PURE__ */ jsx14(PrimusAuthContext.Provider, { value: { isAuthenticated, user, login, logout, token, isLoading }, children });
+    try {
+      stopHeartbeat();
+      const csrfToken = getCookie(csrfCookieName);
+      const headers = {};
+      if (csrfToken) {
+        headers[csrfHeaderName] = csrfToken;
+      }
+      await fetch(`${authBaseUrl}/logout`, {
+        method: "POST",
+        credentials: "include",
+        headers
+      });
+    } catch (e) {
+      console.error("Logout failed", e);
+    } finally {
+      setToken(null);
+      setIsAuthenticated(false);
+      setUser(null);
+    }
+  }, [authBaseUrl, csrfCookieName, csrfHeaderName, stopHeartbeat]);
+  return /* @__PURE__ */ jsx13(PrimusAuthContext.Provider, { value: {
+    isAuthenticated,
+    user,
+    login,
+    logout,
+    token,
+    isLoading,
+    csrfCookieName,
+    csrfHeaderName
+  }, children });
 };
 var usePrimusAuth = () => {
   const context = useContext2(PrimusAuthContext);
@@ -1106,18 +1033,304 @@ var usePrimusAuth = () => {
       logout: async () => {
       },
       token: null,
-      isLoading: false
+      isLoading: false,
+      csrfCookieName: "XSRF-TOKEN",
+      csrfHeaderName: "X-Primus-CSRF"
     };
   }
   return context;
 };
 
+// src/components/auth/PrimusLogin.tsx
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var styles = {
+  container: {
+    minHeight: "100vh",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "24px",
+    fontFamily: '"Segoe UI", Arial, sans-serif',
+    transition: "background-color 0.3s, color 0.3s"
+  },
+  card: {
+    width: "100%",
+    maxWidth: "420px",
+    borderRadius: "16px",
+    padding: "24px",
+    boxShadow: "0 20px 40px rgba(15, 23, 42, 0.08)",
+    border: "1px solid #e2e8f0",
+    backgroundColor: "#ffffff"
+  },
+  header: {
+    marginBottom: "24px",
+    textAlign: "center"
+  },
+  logoStr: {
+    width: "48px",
+    height: "48px",
+    borderRadius: "12px",
+    marginBottom: "16px",
+    objectFit: "cover"
+  },
+  title: {
+    margin: "12px 0 4px",
+    fontSize: "22px",
+    fontWeight: "600"
+  },
+  subtitle: {
+    margin: 0,
+    fontSize: "13px",
+    color: "#64748b"
+  },
+  socialGrid: {
+    display: "grid",
+    gap: "10px",
+    marginTop: "16px"
+  },
+  socialBtn: {
+    border: "1px solid #cbd5e1",
+    background: "#ffffff",
+    padding: "10px",
+    borderRadius: "10px",
+    fontSize: "13px",
+    cursor: "pointer",
+    color: "#0f172a",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
+    width: "100%",
+    fontWeight: 500,
+    transition: "background-color 0.2s"
+  },
+  divider: {
+    margin: "24px 0",
+    textAlign: "center",
+    fontSize: "12px",
+    color: "#94a3b8",
+    position: "relative"
+  },
+  // Form
+  form: {
+    display: "grid",
+    gap: "16px"
+  },
+  label: {
+    display: "block",
+    fontSize: "12px",
+    color: "#64748b",
+    fontWeight: 600,
+    marginBottom: "6px",
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  },
+  input: {
+    width: "100%",
+    border: "1px solid #cbd5e1",
+    borderRadius: "8px",
+    padding: "10px 12px",
+    background: "#ffffff",
+    color: "#0f172a",
+    fontSize: "14px",
+    outline: "none"
+  },
+  submitBtn: {
+    marginTop: "8px",
+    background: "#0f172a",
+    // Slate-900
+    color: "#ffffff",
+    border: "none",
+    borderRadius: "8px",
+    padding: "12px",
+    cursor: "pointer",
+    fontWeight: 600,
+    fontSize: "14px",
+    width: "100%"
+  },
+  error: {
+    marginTop: "12px",
+    color: "#dc2626",
+    fontSize: "12px",
+    textAlign: "center"
+  }
+};
+var darkStyles = {
+  container: { backgroundColor: "#0f172a", color: "#f8fafc" },
+  card: { backgroundColor: "#1e293b", borderColor: "#334155", boxShadow: "none" },
+  subtitle: { color: "#94a3b8" },
+  socialBtn: { backgroundColor: "#1e293b", borderColor: "#334155", color: "#f8fafc" },
+  label: { color: "#94a3b8" },
+  input: { backgroundColor: "#0f172a", borderColor: "#334155", color: "#f8fafc" },
+  submitBtn: { backgroundColor: "#8b5cf6" }
+  // Violet for dark mode
+};
+var Icons = {
+  google: /* @__PURE__ */ jsxs12("svg", { width: "18", height: "18", viewBox: "0 0 18 18", children: [
+    /* @__PURE__ */ jsx14("path", { d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z", fill: "#4285F4" }),
+    /* @__PURE__ */ jsx14("path", { d: "M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z", fill: "#34A853" }),
+    /* @__PURE__ */ jsx14("path", { d: "M3.964 10.707c-.18-.54-.282-1.117-.282-1.707 0-.593.102-1.17.282-1.709V4.958H.957C.347 6.173 0 7.548 0 9c0 1.452.348 2.827.957 4.042l3.007-2.335z", fill: "#FBBC05" }),
+    /* @__PURE__ */ jsx14("path", { d: "M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z", fill: "#EA4335" })
+  ] }),
+  microsoft: /* @__PURE__ */ jsxs12("svg", { width: "18", height: "18", viewBox: "0 0 18 18", children: [
+    /* @__PURE__ */ jsx14("path", { d: "M0 0h8.571v8.571H0V0z", fill: "#F25022" }),
+    /* @__PURE__ */ jsx14("path", { d: "M9.429 0H18v8.571H9.429V0z", fill: "#7FBA00" }),
+    /* @__PURE__ */ jsx14("path", { d: "M0 9.429h8.571V18H0V9.429z", fill: "#00A4EF" }),
+    /* @__PURE__ */ jsx14("path", { d: "M9.429 9.429H18V18H9.429V9.429z", fill: "#FFB900" })
+  ] }),
+  github: /* @__PURE__ */ jsx14("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "currentColor", children: /* @__PURE__ */ jsx14("path", { d: "M9 0C4.029 0 0 4.029 0 9c0 3.977 2.578 7.348 6.155 8.537.45.082.615-.195.615-.433 0-.213-.008-.923-.012-1.674-2.505.544-3.034-1.073-3.034-1.073-.41-1.04-1-1.316-1-1.316-.817-.558.062-.547.062-.547.903.064 1.378.927 1.378.927.803 1.376 2.107.978 2.62.748.082-.582.314-.978.572-1.203-2-.227-4.1-1-4.1-4.448 0-.983.35-1.786.927-2.416-.093-.228-.402-1.144.088-2.383 0 0 .756-.242 2.475.923A8.63 8.63 0 019 4.347c.765.004 1.535.103 2.254.303 1.718-1.165 2.473-.923 2.473-.923.491 1.239.182 2.155.089 2.383.578.63.926 1.433.926 2.416 0 3.457-2.104 4.218-4.109 4.44.323.278.611.827.611 1.667 0 1.203-.011 2.173-.011 2.469 0 .24.163.52.619.432C15.424 16.345 18 12.976 18 9c0-4.971-4.029-9-9-9z" }) }),
+  apple: /* @__PURE__ */ jsx14("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "currentColor", children: /* @__PURE__ */ jsx14("path", { d: "M14.94 13.52c-.36.77-.54 1.12-1.01 1.8-.66.95-1.59 2.13-2.74 2.14-1.02.01-1.29-.66-2.68-.65-1.39.01-1.69.66-2.71.65-1.15-.01-2.01-1.07-2.67-2.02-1.85-2.66-2.04-5.78-.9-7.44.81-1.18 2.09-1.87 3.29-1.87 1.22 0 1.99.67 3 .67.98 0 1.58-.67 2.99-.67 1.07 0 2.2.58 3.01 1.58-2.64 1.45-2.21 5.23.42 6.81zM11.53 3.96c.52-.67.92-1.61.77-2.56-.84.04-1.84.59-2.43 1.29-.52.62-.96 1.58-.79 2.5.94.02 1.91-.53 2.45-1.23z" }) }),
+  auth0: /* @__PURE__ */ jsx14("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "#EB5424", children: /* @__PURE__ */ jsx14("path", { d: "M13.98 0L9 7.83 4.02 0H0l9 15.59L18 0h-4.02zM9 10.41L4.02 18h9.96L9 10.41z" }) }),
+  facebook: /* @__PURE__ */ jsx14("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "#1877F2", children: /* @__PURE__ */ jsx14("path", { d: "M18 9.05C18 4.05 13.97 0 9 0S0 4.05 0 9.05C0 13.58 3.29 17.34 7.59 18v-6.28H5.31V9.05h2.28V7.05c0-2.25 1.34-3.49 3.39-3.49.98 0 2.01.18 2.01.18v2.21h-1.13c-1.11 0-1.46.69-1.46 1.4v1.68h2.49l-.4 2.67h-2.09V18C14.71 17.34 18 13.58 18 9.05z" }) })
+};
+function PrimusLogin({
+  onLogin,
+  socialProviders = [],
+  onSocialLogin,
+  authEndpoint = "/api/auth",
+  showEmailLogin = true,
+  title = "Welcome Back",
+  subtitle = "Enter your credentials to continue",
+  logo,
+  theme: themeOverride,
+  variant = "standalone",
+  useAuth = false
+}) {
+  const themeContext = usePrimusTheme();
+  const auth = usePrimusAuth();
+  const theme = themeOverride || themeContext.theme;
+  const isLight = theme === "light";
+  const isDark = !isLight;
+  const [username, setUsername] = useState14("");
+  const [password, setPassword] = useState14("");
+  const [loading, setLoading] = useState14(false);
+  const [errorMessage, setErrorMessage] = useState14("");
+  const currentStyles = {
+    container: { ...styles.container, ...isDark ? darkStyles.container : {} },
+    card: { ...styles.card, ...isDark ? darkStyles.card : {} },
+    title: { ...styles.title, color: isLight ? "#0f172a" : "#f8fafc" },
+    subtitle: { ...styles.subtitle, ...isDark ? darkStyles.subtitle : {} },
+    input: { ...styles.input, ...isDark ? darkStyles.input : {} },
+    socialBtn: { ...styles.socialBtn, ...isDark ? darkStyles.socialBtn : {} },
+    label: { ...styles.label, ...isDark ? darkStyles.label : {} },
+    submitBtn: { ...styles.submitBtn, ...isDark ? darkStyles.submitBtn : {} }
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!username || !password) return;
+    setLoading(true);
+    setErrorMessage("");
+    try {
+      if (useAuth) {
+        const result = await auth.login({ email: username, password });
+        if (!result.success) {
+          setErrorMessage(result.error || "Login failed");
+          return;
+        }
+      }
+      onLogin?.({ username, password });
+    } catch (err) {
+      setErrorMessage("Login failed. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleSocialClick = (provider) => {
+    if (onSocialLogin) {
+      onSocialLogin(provider);
+    } else {
+      const base = authEndpoint.replace(/\/+$/, "");
+      window.location.href = `${base}/${provider}`;
+    }
+  };
+  const renderSocialIcon = (p) => {
+    const key = p === "azure" ? "microsoft" : p;
+    return Icons[key] || null;
+  };
+  const content = /* @__PURE__ */ jsxs12("div", { style: currentStyles.card, className: "primus-login-card", children: [
+    /* @__PURE__ */ jsxs12("div", { style: styles.header, className: "primus-login-header", children: [
+      logo && (typeof logo === "string" ? /* @__PURE__ */ jsx14("img", { src: logo, alt: "Logo", style: styles.logoStr }) : /* @__PURE__ */ jsx14("div", { style: { marginBottom: "16px", display: "flex", justifyContent: "center" }, children: logo })),
+      /* @__PURE__ */ jsx14("h2", { style: currentStyles.title, children: title }),
+      /* @__PURE__ */ jsx14("p", { style: currentStyles.subtitle, children: subtitle })
+    ] }),
+    socialProviders.length > 0 && /* @__PURE__ */ jsx14("div", { style: styles.socialGrid, className: "primus-social", children: socialProviders.map((provider) => /* @__PURE__ */ jsxs12(
+      "button",
+      {
+        type: "button",
+        onClick: () => handleSocialClick(provider),
+        style: currentStyles.socialBtn,
+        onMouseOver: (e) => {
+          if (isLight) e.currentTarget.style.backgroundColor = "#f1f5f9";
+          else e.currentTarget.style.backgroundColor = "#334155";
+        },
+        onMouseOut: (e) => {
+          if (isLight) e.currentTarget.style.backgroundColor = "#ffffff";
+          else e.currentTarget.style.backgroundColor = "#1e293b";
+        },
+        children: [
+          renderSocialIcon(provider),
+          "Continue with ",
+          provider === "azure" ? "Microsoft" : provider.charAt(0).toUpperCase() + provider.slice(1)
+        ]
+      },
+      provider
+    )) }),
+    socialProviders.length > 0 && showEmailLogin && /* @__PURE__ */ jsxs12("div", { style: styles.divider, className: "primus-divider", children: [
+      /* @__PURE__ */ jsx14("span", { style: { backgroundColor: isLight ? "#fff" : "#1e293b", padding: "0 8px", position: "relative", zIndex: 1 }, children: "Or continue with email" }),
+      /* @__PURE__ */ jsx14("div", { style: { position: "absolute", top: "50%", left: 0, right: 0, borderTop: isLight ? "1px solid #e2e8f0" : "1px solid #334155", zIndex: 0 } })
+    ] }),
+    showEmailLogin && /* @__PURE__ */ jsxs12("form", { onSubmit: handleSubmit, style: styles.form, className: "primus-form", children: [
+      /* @__PURE__ */ jsxs12("div", { children: [
+        /* @__PURE__ */ jsx14("label", { style: currentStyles.label, children: "Email" }),
+        /* @__PURE__ */ jsx14(
+          "input",
+          {
+            type: "text",
+            value: username,
+            onChange: (e) => setUsername(e.target.value),
+            style: currentStyles.input,
+            placeholder: "you@example.com"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs12("div", { children: [
+        /* @__PURE__ */ jsx14("label", { style: currentStyles.label, children: "Password" }),
+        /* @__PURE__ */ jsx14(
+          "input",
+          {
+            type: "password",
+            value: password,
+            onChange: (e) => setPassword(e.target.value),
+            style: currentStyles.input,
+            placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx14(
+        "button",
+        {
+          type: "submit",
+          disabled: loading,
+          style: { ...currentStyles.submitBtn, opacity: loading ? 0.7 : 1 },
+          children: loading ? "Signing in..." : "Sign In"
+        }
+      )
+    ] }),
+    errorMessage && /* @__PURE__ */ jsx14("p", { style: styles.error, children: errorMessage })
+  ] });
+  if (variant === "embedded") {
+    return content;
+  }
+  return /* @__PURE__ */ jsx14("div", { style: { ...currentStyles.container, background: isLight ? "#f8fafc" : "#0f172a" }, className: `primus-login ${isDark ? "dark" : ""}`, children: content });
+}
+var LoginPage = PrimusLogin;
+
 // src/components/shared/Button.tsx
-import React13 from "react";
+import React14 from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var Button = React13.forwardRef(
+var Button = React14.forwardRef(
   ({ style, variant = "primary", size = "md", color = "sapphire", disabled, ...props }, ref) => {
-    const [isHovered, setIsHovered] = React13.useState(false);
+    const [isHovered, setIsHovered] = React14.useState(false);
     const colorStyles = {
       sapphire: {
         solid: "#1341a7",
@@ -1256,6 +1469,51 @@ var UserProfile = ({
   ] });
 };
 
+// src/hooks/usePrimusFetch.ts
+import { useCallback as useCallback3 } from "react";
+function usePrimusFetch() {
+  const { logout, csrfCookieName = "XSRF-TOKEN", csrfHeaderName = "X-Primus-CSRF" } = usePrimusAuth();
+  const getCookie = useCallback3((name) => {
+    if (typeof document === "undefined") return null;
+    try {
+      const matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") + "=([^;]*)"));
+      return matches ? decodeURIComponent(matches[1]) : null;
+    } catch {
+      return null;
+    }
+  }, []);
+  const primusFetch = useCallback3(async (input, init) => {
+    const { skipAuth, ...fetchInit } = init || {};
+    const config = {
+      ...fetchInit,
+      headers: new Headers(fetchInit.headers)
+    };
+    if (!skipAuth) {
+      config.credentials = "include";
+    }
+    const method = (config.method || "GET").toUpperCase();
+    if (!["GET", "HEAD", "OPTIONS"].includes(method)) {
+      const csrfToken = getCookie(csrfCookieName);
+      if (csrfToken) {
+        config.headers.set(csrfHeaderName, csrfToken);
+      }
+    }
+    try {
+      const response = await window.fetch(input, config);
+      if (response.status === 401 && !skipAuth) {
+        console.debug("[PrimusFetch] 401 Unauthorized detected. triggering logout.");
+        logout();
+      }
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  }, [getCookie, logout, csrfCookieName, csrfHeaderName]);
+  return {
+    fetch: primusFetch
+  };
+}
+
 // src/hooks/useNotifications.ts
 import { useState as useState15, useEffect as useEffect9, useMemo } from "react";
 var useNotifications = ({
@@ -1399,7 +1657,7 @@ var PrimusNotificationFeed = ({ useMock, mockData, apiUrl, className }) => {
 };
 
 // src/components/notifications/PrimusNotificationCenter.tsx
-import { useState as useState16, useEffect as useEffect10, useCallback as useCallback3 } from "react";
+import { useState as useState16, useEffect as useEffect10, useCallback as useCallback4 } from "react";
 import { Bell, Send, X, Check, AlertTriangle, Info, AlertCircle } from "lucide-react";
 import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var API_URL = "http://localhost:5222";
@@ -1421,7 +1679,7 @@ function PrimusNotificationCenter({
   const [newMessage, setNewMessage] = useState16("");
   const [newType, setNewType] = useState16("info");
   const [sending, setSending] = useState16(false);
-  const fetchNotifications = useCallback3(async () => {
+  const fetchNotifications = useCallback4(async () => {
     try {
       const response = await fetch(`${apiUrl}/api/notifications`);
       if (response.ok) {
@@ -1645,7 +1903,7 @@ var NotificationBell = PrimusNotificationCenter;
 var PrimusNotifications = PrimusNotificationCenter;
 
 // src/hooks/useRealtimeNotifications.ts
-import { useState as useState17, useEffect as useEffect11, useCallback as useCallback4 } from "react";
+import { useState as useState17, useEffect as useEffect11, useCallback as useCallback5 } from "react";
 var useRealtimeNotifications = (options) => {
   const { apiUrl, pollInterval = 3e3, userId } = options;
   const [notifications, setNotifications] = useState17([]);
@@ -1653,7 +1911,7 @@ var useRealtimeNotifications = (options) => {
   const [loading, setLoading] = useState17(true);
   const [error, setError] = useState17(null);
   const baseUrl = `${apiUrl}/api/notifications`;
-  const fetchNotifications = useCallback4(async () => {
+  const fetchNotifications = useCallback5(async () => {
     try {
       const url = userId ? `${baseUrl}?userId=${userId}` : baseUrl;
       const response = await fetch(url);
@@ -1669,7 +1927,7 @@ var useRealtimeNotifications = (options) => {
       setLoading(false);
     }
   }, [baseUrl, userId]);
-  const sendNotification = useCallback4(async (title, message, type = "info") => {
+  const sendNotification = useCallback5(async (title, message, type = "info") => {
     try {
       const response = await fetch(baseUrl, {
         method: "POST",
@@ -1685,7 +1943,7 @@ var useRealtimeNotifications = (options) => {
       return false;
     }
   }, [baseUrl, userId, fetchNotifications]);
-  const markAsRead = useCallback4(async (id) => {
+  const markAsRead = useCallback5(async (id) => {
     try {
       await fetch(`${baseUrl}/${id}/read`, { method: "PUT" });
       setNotifications((prev) => prev.map((n) => n.id === id ? { ...n, read: true } : n));
@@ -1693,13 +1951,13 @@ var useRealtimeNotifications = (options) => {
     } catch {
     }
   }, [baseUrl]);
-  const markAllAsRead = useCallback4(async () => {
+  const markAllAsRead = useCallback5(async () => {
     const unread = notifications.filter((n) => !n.read);
     await Promise.all(unread.map((n) => fetch(`${baseUrl}/${n.id}/read`, { method: "PUT" })));
     setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
     setUnreadCount(0);
   }, [notifications, baseUrl]);
-  const deleteNotification = useCallback4(async (id) => {
+  const deleteNotification = useCallback5(async (id) => {
     try {
       await fetch(`${baseUrl}/${id}`, { method: "DELETE" });
       setNotifications((prev) => prev.filter((n) => n.id !== id));
@@ -1728,7 +1986,7 @@ var useRealtimeNotifications = (options) => {
 import { useState as useState18 } from "react";
 
 // src/components/shared/Input.tsx
-import React14 from "react";
+import React15 from "react";
 import { clsx as clsx2 } from "clsx";
 import { XMarkIcon } from "@heroicons/react/20/solid";
 import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
@@ -1742,20 +2000,48 @@ var iconSizeClasses = {
   md: "w-5 h-5 [&>*]:w-full [&>*]:h-full",
   lg: "w-6 h-6 [&>*]:w-full [&>*]:h-full"
 };
-var Input = React14.forwardRef(
-  ({ className, style, label, error, disabled, startIcon, endIcon, onClear, value, onChange, size = "md", loading = false, ...props }, ref) => {
+var Input = React15.forwardRef(
+  ({
+    className,
+    style,
+    label,
+    error,
+    disabled,
+    startIcon,
+    endIcon,
+    onClear,
+    value,
+    onChange,
+    onValueChange,
+    size = "md",
+    loading = false,
+    autoSelect = false,
+    onFocus,
+    ...props
+  }, ref) => {
+    const handleFocus = (e) => {
+      if (autoSelect) {
+        e.target.select();
+      }
+      onFocus?.(e);
+    };
+    const handleChange = (e) => {
+      onChange?.(e);
+      onValueChange?.(e.target.value);
+    };
     const hasValue = value !== void 0 && value !== "" && value !== null;
+    const isDisabled = disabled || loading;
     return /* @__PURE__ */ jsxs16("div", { className: clsx2("w-full", className), style, children: [
       label && /* @__PURE__ */ jsx19("label", { className: clsx2(
         "block font-medium mb-1.5",
         size === "sm" ? "text-xs" : "text-sm",
-        disabled ? "text-gray-400 opacity-70" : "text-gray-700"
+        isDisabled ? "text-gray-400 opacity-70" : "text-gray-700"
       ), children: label }),
       /* @__PURE__ */ jsxs16("div", { className: clsx2(
         "relative flex items-center w-full rounded-lg transition-all duration-200 ease-in-out bg-white overflow-hidden",
         "border",
         error ? "border-red-500 hover:border-red-600 focus-within:ring-2 focus-within:ring-red-500/20 focus-within:border-red-500" : "border-gray-200 hover:border-gray-300 focus-within:ring-2 focus-within:ring-primus-500/20 focus-within:border-primus-500",
-        disabled && "bg-gray-50 opacity-60 cursor-not-allowed"
+        isDisabled && "bg-gray-50 opacity-60 cursor-not-allowed"
       ), children: [
         startIcon && /* @__PURE__ */ jsx19("div", { className: clsx2(
           "flex-shrink-0 pl-3 pr-2 text-gray-400 select-none pointer-events-none flex items-center justify-center",
@@ -1765,9 +2051,10 @@ var Input = React14.forwardRef(
           "input",
           {
             ref,
-            disabled,
+            disabled: isDisabled,
             value,
-            onChange,
+            onChange: handleChange,
+            onFocus: handleFocus,
             className: clsx2(
               "flex-1 w-full border-none bg-transparent p-0 placeholder:text-gray-400 focus:ring-0 outline-none",
               sizeClasses[size],
@@ -1778,7 +2065,7 @@ var Input = React14.forwardRef(
             ...props
           }
         ),
-        onClear && hasValue && !disabled && !loading && /* @__PURE__ */ jsx19("div", { className: "flex-shrink-0 pr-2 flex items-center justify-center", children: /* @__PURE__ */ jsx19(
+        onClear && hasValue && !isDisabled && /* @__PURE__ */ jsx19("div", { className: "flex-shrink-0 pr-2 flex items-center justify-center", children: /* @__PURE__ */ jsx19(
           "button",
           {
             type: "button",
@@ -1786,7 +2073,8 @@ var Input = React14.forwardRef(
               e.stopPropagation();
               onClear();
             },
-            className: "p-1 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors",
+            className: "p-1 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-primus-500",
+            tabIndex: 0,
             children: /* @__PURE__ */ jsx19(XMarkIcon, { className: "h-4 w-4" })
           }
         ) }),
@@ -2394,7 +2682,7 @@ var PrimusSidebar = ({
 };
 
 // src/components/layout/PrimusHeader.tsx
-import React18 from "react";
+import React19 from "react";
 import { jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
 var PrimusHeader = ({
   title,
@@ -2405,7 +2693,7 @@ var PrimusHeader = ({
 }) => {
   return /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between w-full", children: [
     /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-4", children: [
-      breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx30("nav", { className: "flex items-center gap-2 text-sm", children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs27(React18.Fragment, { children: [
+      breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx30("nav", { className: "flex items-center gap-2 text-sm", children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs27(React19.Fragment, { children: [
         index > 0 && /* @__PURE__ */ jsx30("span", { className: "text-gray-500", children: "/" }),
         /* @__PURE__ */ jsx30("span", { className: index === breadcrumbs.length - 1 ? "text-white" : "text-gray-400 hover:text-white cursor-pointer", children: crumb.label })
       ] }, index)) }),
@@ -2431,9 +2719,30 @@ var PrimusHeader = ({
   ] });
 };
 
+// src/components/layout/PrimusSection.tsx
+import { jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
+var PrimusSection = ({
+  title,
+  subtitle,
+  children,
+  className = "",
+  actions
+}) => {
+  return /* @__PURE__ */ jsxs28("section", { className: `py-6 ${className}`, children: [
+    /* @__PURE__ */ jsxs28("div", { className: "flex items-end justify-between mb-6 border-b border-gray-200 dark:border-gray-800 pb-4", children: [
+      /* @__PURE__ */ jsxs28("div", { children: [
+        /* @__PURE__ */ jsx31("h2", { className: "text-2xl font-bold tracking-tight text-gray-900 dark:text-white", children: title }),
+        subtitle && /* @__PURE__ */ jsx31("p", { className: "mt-1 text-base text-gray-500 dark:text-gray-400", children: subtitle })
+      ] }),
+      actions && /* @__PURE__ */ jsx31("div", { className: "flex items-center gap-2", children: actions })
+    ] }),
+    /* @__PURE__ */ jsx31("div", { children })
+  ] });
+};
+
 // src/components/crud/PrimusDataTable.tsx
 import { useState as useState21, useMemo as useMemo2 } from "react";
-import { jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs29 } from "react/jsx-runtime";
 function PrimusDataTable({
   data,
   columns,
@@ -2512,10 +2821,10 @@ function PrimusDataTable({
       onSelectionChange?.(scopeKeys);
     }
   };
-  return /* @__PURE__ */ jsxs28("div", { className: "flex flex-col space-y-4", children: [
-    searchable && /* @__PURE__ */ jsx31("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ jsxs28("div", { className: "relative group", children: [
-      /* @__PURE__ */ jsx31("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx31("svg", { className: "h-4 w-4 text-gray-500 group-focus-within:text-purple-400 transition-colors", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx31("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }),
-      /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs29("div", { className: "flex flex-col space-y-4", children: [
+    searchable && /* @__PURE__ */ jsx32("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ jsxs29("div", { className: "relative group", children: [
+      /* @__PURE__ */ jsx32("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx32("svg", { className: "h-4 w-4 text-gray-500 group-focus-within:text-purple-400 transition-colors", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx32("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }),
+      /* @__PURE__ */ jsx32(
         "input",
         {
           type: "text",
@@ -2531,9 +2840,9 @@ function PrimusDataTable({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx31("div", { className: `overflow-hidden rounded-xl border border-white/5 bg-slate-900/40 backdrop-blur-md shadow-xl ring-1 ring-white/5 ${loading ? "opacity-80" : ""}`, children: /* @__PURE__ */ jsx31("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs28("table", { className: "w-full text-left border-collapse", children: [
-      /* @__PURE__ */ jsx31("thead", { className: "bg-white/5 border-b border-white/5 backdrop-blur-md sticky top-0 z-20", children: /* @__PURE__ */ jsxs28("tr", { children: [
-        selectable && /* @__PURE__ */ jsx31("th", { className: "w-12 px-6 py-4", children: /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx32("div", { className: `overflow-hidden rounded-xl border border-white/5 bg-slate-900/40 backdrop-blur-md shadow-xl ring-1 ring-white/5 ${loading ? "opacity-80" : ""}`, children: /* @__PURE__ */ jsx32("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs29("table", { className: "w-full text-left border-collapse", children: [
+      /* @__PURE__ */ jsx32("thead", { className: "bg-white/5 border-b border-white/5 backdrop-blur-md sticky top-0 z-20", children: /* @__PURE__ */ jsxs29("tr", { children: [
+        selectable && /* @__PURE__ */ jsx32("th", { className: "w-12 px-6 py-4", children: /* @__PURE__ */ jsx32(
           "input",
           {
             type: "checkbox",
@@ -2542,25 +2851,25 @@ function PrimusDataTable({
             className: "rounded border-gray-600 bg-gray-800 text-purple-600 focus:ring-offset-gray-900 focus:ring-purple-500 transition-colors cursor-pointer"
           }
         ) }),
-        columns.map((col) => /* @__PURE__ */ jsx31(
+        columns.map((col) => /* @__PURE__ */ jsx32(
           "th",
           {
             className: `px-6 py-4 text-xs font-semibold text-gray-400 uppercase tracking-wider ${col.sortable ? "cursor-pointer hover:text-white group" : ""}`,
             style: { width: col.width },
             onClick: () => col.sortable && handleSort(String(col.key)),
-            children: /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2", children: [
+            children: /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
               col.header,
-              col.sortable && /* @__PURE__ */ jsx31("span", { className: `transition-opacity duration-200 ${sortKey === col.key ? "opacity-100 text-purple-400" : "opacity-0 group-hover:opacity-50"}`, children: sortDir === "asc" ? "\u2191" : "\u2193" })
+              col.sortable && /* @__PURE__ */ jsx32("span", { className: `transition-opacity duration-200 ${sortKey === col.key ? "opacity-100 text-purple-400" : "opacity-0 group-hover:opacity-50"}`, children: sortDir === "asc" ? "\u2191" : "\u2193" })
             ] })
           },
           String(col.key)
         )),
-        actions && /* @__PURE__ */ jsx31("th", { className: "w-24 px-6 py-4 text-right text-xs font-semibold text-gray-400 uppercase tracking-wider" })
+        actions && /* @__PURE__ */ jsx32("th", { className: "w-24 px-6 py-4 text-right text-xs font-semibold text-gray-400 uppercase tracking-wider" })
       ] }) }),
-      /* @__PURE__ */ jsx31("tbody", { className: "divide-y divide-white/5", children: loading ? /* @__PURE__ */ jsx31("tr", { children: /* @__PURE__ */ jsx31("td", { colSpan: columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0), className: "px-6 py-24 text-center text-gray-500", children: /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center justify-center gap-3", children: [
-        /* @__PURE__ */ jsx31("div", { className: "w-6 h-6 border-2 border-purple-500/50 border-t-purple-500 rounded-full animate-spin" }),
-        /* @__PURE__ */ jsx31("span", { className: "text-sm font-medium", children: "Loading data..." })
-      ] }) }) }) : filteredData.length === 0 ? /* @__PURE__ */ jsx31("tr", { children: /* @__PURE__ */ jsx31("td", { colSpan: columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0), className: "px-6 py-24 text-center text-gray-500", children: /* @__PURE__ */ jsx31("p", { className: "text-sm", children: emptyMessage }) }) }) : pageData.map((row) => /* @__PURE__ */ jsxs28(
+      /* @__PURE__ */ jsx32("tbody", { className: "divide-y divide-white/5", children: loading ? /* @__PURE__ */ jsx32("tr", { children: /* @__PURE__ */ jsx32("td", { colSpan: columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0), className: "px-6 py-24 text-center text-gray-500", children: /* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center justify-center gap-3", children: [
+        /* @__PURE__ */ jsx32("div", { className: "w-6 h-6 border-2 border-purple-500/50 border-t-purple-500 rounded-full animate-spin" }),
+        /* @__PURE__ */ jsx32("span", { className: "text-sm font-medium", children: "Loading data..." })
+      ] }) }) }) : filteredData.length === 0 ? /* @__PURE__ */ jsx32("tr", { children: /* @__PURE__ */ jsx32("td", { colSpan: columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0), className: "px-6 py-24 text-center text-gray-500", children: /* @__PURE__ */ jsx32("p", { className: "text-sm", children: emptyMessage }) }) }) : pageData.map((row) => /* @__PURE__ */ jsxs29(
         "tr",
         {
           onClick: () => onRowClick?.(row),
@@ -2570,7 +2879,7 @@ function PrimusDataTable({
                                             ${selectedKeys.includes(row[rowKey]) ? "bg-purple-500/10 hover:bg-purple-500/20" : ""}
                                         `,
           children: [
-            selectable && /* @__PURE__ */ jsx31("td", { className: "px-6 py-4", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx31(
+            selectable && /* @__PURE__ */ jsx32("td", { className: "px-6 py-4", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx32(
               "input",
               {
                 type: "checkbox",
@@ -2579,15 +2888,15 @@ function PrimusDataTable({
                 className: "rounded border-gray-600 bg-gray-800 text-purple-600 focus:ring-offset-gray-900 focus:ring-purple-500 cursor-pointer"
               }
             ) }),
-            columns.map((col) => /* @__PURE__ */ jsx31("td", { className: "px-6 py-4 text-sm text-gray-300 group-hover:text-white transition-colors", children: col.render ? col.render(row[col.key], row) : String(row[col.key] ?? "") }, String(col.key))),
-            actions && /* @__PURE__ */ jsx31("td", { className: "px-6 py-4 text-right", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx31("div", { className: "opacity-0 group-hover:opacity-100 transition-opacity transform translate-x-2 group-hover:translate-x-0", children: actions(row) }) })
+            columns.map((col) => /* @__PURE__ */ jsx32("td", { className: "px-6 py-4 text-sm text-gray-300 group-hover:text-white transition-colors", children: col.render ? col.render(row[col.key], row) : String(row[col.key] ?? "") }, String(col.key))),
+            actions && /* @__PURE__ */ jsx32("td", { className: "px-6 py-4 text-right", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx32("div", { className: "opacity-0 group-hover:opacity-100 transition-opacity transform translate-x-2 group-hover:translate-x-0", children: actions(row) }) })
           ]
         },
         String(row[rowKey])
       )) })
     ] }) }) }),
-    paginated && totalPages > 1 && /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between text-sm text-gray-400 px-2", children: [
-      /* @__PURE__ */ jsx31(
+    paginated && totalPages > 1 && /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between text-sm text-gray-400 px-2", children: [
+      /* @__PURE__ */ jsx32(
         "button",
         {
           type: "button",
@@ -2597,13 +2906,13 @@ function PrimusDataTable({
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ jsxs28("span", { children: [
+      /* @__PURE__ */ jsxs29("span", { children: [
         "Page ",
         currentPageIndex + 1,
         " of ",
         totalPages
       ] }),
-      /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx32(
         "button",
         {
           type: "button",
@@ -2618,7 +2927,7 @@ function PrimusDataTable({
 }
 
 // src/components/crud/PrimusModal.tsx
-import { jsx as jsx32, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
 var PrimusModal = ({
   open,
   onClose,
@@ -2634,34 +2943,34 @@ var PrimusModal = ({
     lg: "max-w-lg",
     xl: "max-w-xl"
   };
-  return /* @__PURE__ */ jsxs29("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs30("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx33(
       "div",
       {
         className: "absolute inset-0 bg-black/60 backdrop-blur-sm",
         onClick: onClose
       }
     ),
-    /* @__PURE__ */ jsxs29("div", { className: `relative w-full ${sizeClasses2[size]} mx-4 bg-gray-800 rounded-xl border border-gray-700 shadow-2xl`, children: [
-      title && /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-700", children: [
-        /* @__PURE__ */ jsx32("h2", { className: "text-lg font-semibold text-white", children: title }),
-        /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsxs30("div", { className: `relative w-full ${sizeClasses2[size]} mx-4 bg-gray-800 rounded-xl border border-gray-700 shadow-2xl`, children: [
+      title && /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-700", children: [
+        /* @__PURE__ */ jsx33("h2", { className: "text-lg font-semibold text-white", children: title }),
+        /* @__PURE__ */ jsx33(
           "button",
           {
             onClick: onClose,
             className: "text-gray-400 hover:text-white transition-colors",
-            children: /* @__PURE__ */ jsx32("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx32("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+            children: /* @__PURE__ */ jsx33("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx33("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
           }
         )
       ] }),
-      /* @__PURE__ */ jsx32("div", { className: "p-6", children }),
-      footer && /* @__PURE__ */ jsx32("div", { className: "flex justify-end gap-3 px-6 py-4 border-t border-gray-700 bg-gray-800/50", children: footer })
+      /* @__PURE__ */ jsx33("div", { className: "p-6", children }),
+      footer && /* @__PURE__ */ jsx33("div", { className: "flex justify-end gap-3 px-6 py-4 border-t border-gray-700 bg-gray-800/50", children: footer })
     ] })
   ] });
 };
 
 // src/components/dashboard/PrimusDashboard.tsx
-import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
 var PrimusStatCard = ({
   title,
   value,
@@ -2697,35 +3006,35 @@ var PrimusStatCard = ({
     const linePath = points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" ");
     const areaPath = `${linePath} L 100 100 L 0 100 Z`;
     const gradientId = `gradient-${title.replace(/\s/g, "")}`;
-    return /* @__PURE__ */ jsxs30("svg", { className: "w-full h-12 opacity-60 absolute bottom-0 left-0", viewBox: "0 0 100 100", preserveAspectRatio: "none", "data-trend": trend.join(","), children: [
-      /* @__PURE__ */ jsx33("defs", { children: /* @__PURE__ */ jsxs30("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-        /* @__PURE__ */ jsx33("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "0.25" }),
-        /* @__PURE__ */ jsx33("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })
+    return /* @__PURE__ */ jsxs31("svg", { className: "w-full h-12 opacity-60 absolute bottom-0 left-0", viewBox: "0 0 100 100", preserveAspectRatio: "none", "data-trend": trend.join(","), children: [
+      /* @__PURE__ */ jsx34("defs", { children: /* @__PURE__ */ jsxs31("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ jsx34("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "0.25" }),
+        /* @__PURE__ */ jsx34("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })
       ] }) }),
-      /* @__PURE__ */ jsx33("path", { d: areaPath, fill: `url(#${gradientId})`, stroke: "none" }),
-      /* @__PURE__ */ jsx33("path", { d: linePath, fill: "none", stroke: "currentColor", strokeWidth: "1.8", opacity: "0.6" })
+      /* @__PURE__ */ jsx34("path", { d: areaPath, fill: `url(#${gradientId})`, stroke: "none" }),
+      /* @__PURE__ */ jsx34("path", { d: linePath, fill: "none", stroke: "currentColor", strokeWidth: "1.8", opacity: "0.6" })
     ] });
   };
-  return /* @__PURE__ */ jsxs30("div", { className: "relative overflow-hidden bg-slate-900/40 backdrop-blur-md rounded-2xl border border-white/5 hover:border-white/10 transition-all duration-300 group", children: [
-    /* @__PURE__ */ jsx33("div", { className: "absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" }),
-    /* @__PURE__ */ jsxs30("div", { className: "p-6 relative z-10", children: [
-      /* @__PURE__ */ jsxs30("div", { className: "flex items-start justify-between mb-4", children: [
-        /* @__PURE__ */ jsx33("div", { className: "p-2.5 rounded-lg bg-white/5 text-gray-300 ring-1 ring-white/10 group-hover:bg-purple-500/20 group-hover:text-purple-300 transition-colors", children: icon || /* @__PURE__ */ jsx33("div", { className: "w-5 h-5 bg-current opacity-20" }) }),
-        change && /* @__PURE__ */ jsxs30("span", { className: `px-2 py-0.5 text-xs font-medium rounded-full flex items-center gap-1 ${changeColors[change.type]}`, children: [
+  return /* @__PURE__ */ jsxs31("div", { className: "relative overflow-hidden bg-slate-900/40 backdrop-blur-md rounded-2xl border border-white/5 hover:border-white/10 transition-all duration-300 group", children: [
+    /* @__PURE__ */ jsx34("div", { className: "absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" }),
+    /* @__PURE__ */ jsxs31("div", { className: "p-6 relative z-10", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "flex items-start justify-between mb-4", children: [
+        /* @__PURE__ */ jsx34("div", { className: "p-2.5 rounded-lg bg-white/5 text-gray-300 ring-1 ring-white/10 group-hover:bg-purple-500/20 group-hover:text-purple-300 transition-colors", children: icon || /* @__PURE__ */ jsx34("div", { className: "w-5 h-5 bg-current opacity-20" }) }),
+        change && /* @__PURE__ */ jsxs31("span", { className: `px-2 py-0.5 text-xs font-medium rounded-full flex items-center gap-1 ${changeColors[change.type]}`, children: [
           changeIcons[change.type],
           " ",
           Math.abs(change.value),
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ jsxs30("div", { children: [
-        /* @__PURE__ */ jsx33("h3", { className: "text-sm font-medium text-gray-400 tracking-wide", children: title }),
-        /* @__PURE__ */ jsx33("div", { className: "mt-1 flex items-baseline gap-2", children: /* @__PURE__ */ jsx33("span", { className: "text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-400", children: value }) }),
-        description && /* @__PURE__ */ jsx33("p", { className: "text-xs text-gray-500 mt-2 font-medium", children: description })
+      /* @__PURE__ */ jsxs31("div", { children: [
+        /* @__PURE__ */ jsx34("h3", { className: "text-sm font-medium text-gray-400 tracking-wide", children: title }),
+        /* @__PURE__ */ jsx34("div", { className: "mt-1 flex items-baseline gap-2", children: /* @__PURE__ */ jsx34("span", { className: "text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-400", children: value }) }),
+        description && /* @__PURE__ */ jsx34("p", { className: "text-xs text-gray-500 mt-2 font-medium", children: description })
       ] })
     ] }),
     renderSparkline(),
-    /* @__PURE__ */ jsx33("div", { className: `absolute -bottom-2 -right-4 w-32 h-32 blur-2xl opacity-20 rounded-full transition-colors duration-500 ${change?.type === "increase" ? "bg-emerald-500" : change?.type === "decrease" ? "bg-rose-500" : "bg-blue-500"}` })
+    /* @__PURE__ */ jsx34("div", { className: `absolute -bottom-2 -right-4 w-32 h-32 blur-2xl opacity-20 rounded-full transition-colors duration-500 ${change?.type === "increase" ? "bg-emerald-500" : change?.type === "decrease" ? "bg-rose-500" : "bg-blue-500"}` })
   ] });
 };
 var PrimusDashboard = ({
@@ -2734,13 +3043,13 @@ var PrimusDashboard = ({
   subtitle,
   actions
 }) => {
-  return /* @__PURE__ */ jsxs30("div", { className: "space-y-8 animate-enter", children: [
-    (title || actions) && /* @__PURE__ */ jsxs30("div", { className: "flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-white/5 pb-6", children: [
-      /* @__PURE__ */ jsxs30("div", { children: [
-        title && /* @__PURE__ */ jsx33("h1", { className: "text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white via-gray-200 to-gray-400 tracking-tight", children: title }),
-        subtitle && /* @__PURE__ */ jsx33("p", { className: "text-gray-400 mt-2 text-lg font-light leading-relaxed", children: subtitle })
+  return /* @__PURE__ */ jsxs31("div", { className: "space-y-8 animate-enter", children: [
+    (title || actions) && /* @__PURE__ */ jsxs31("div", { className: "flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-white/5 pb-6", children: [
+      /* @__PURE__ */ jsxs31("div", { children: [
+        title && /* @__PURE__ */ jsx34("h1", { className: "text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white via-gray-200 to-gray-400 tracking-tight", children: title }),
+        subtitle && /* @__PURE__ */ jsx34("p", { className: "text-gray-400 mt-2 text-lg font-light leading-relaxed", children: subtitle })
       ] }),
-      actions && /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-3", children: actions })
+      actions && /* @__PURE__ */ jsx34("div", { className: "flex items-center gap-3", children: actions })
     ] }),
     children
   ] });
@@ -2755,25 +3064,119 @@ var DashboardGrid = ({
     3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
     4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
   };
-  return /* @__PURE__ */ jsx33("div", { className: `grid gap-6 ${colClasses[columns]}`, children });
+  return /* @__PURE__ */ jsx34("div", { className: `grid gap-6 ${colClasses[columns]}`, children });
 };
 
-// src/components/dashboard/PrimusActivityFeed.tsx
-import { useMemo as useMemo3 } from "react";
-import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
-var statusClasses = {
-  success: "bg-emerald-500/10 text-emerald-300 border-emerald-500/30",
-  warning: "bg-amber-500/10 text-amber-300 border-amber-500/30",
-  error: "bg-rose-500/10 text-rose-300 border-rose-500/30",
-  info: "bg-blue-500/10 text-blue-300 border-blue-500/30"
-};
-var PrimusActivityFeed = ({
-  items,
-  maxItems = 10,
-  showTimestamps = true,
-  groupByDate = false,
-  loading = false
-}) => {
+// src/components/shared/Card.tsx
+import React21 from "react";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var Card = React21.forwardRef(
+  ({ style, variant = "default", padding = "md", children, ...props }, ref) => {
+    const [isHovered, setIsHovered] = React21.useState(false);
+    const paddingStyles = {
+      none: "0",
+      sm: "0.75rem",
+      md: "1.5rem",
+      lg: "2rem"
+    };
+    const variantStyles = {
+      default: {
+        normal: {
+          backgroundColor: "#ffffff",
+          border: "1px solid #e5e7eb",
+          boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)"
+        },
+        hover: {
+          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)"
+        }
+      },
+      outlined: {
+        normal: {
+          backgroundColor: "#ffffff",
+          border: "2px solid #e5e7eb",
+          boxShadow: "none"
+        },
+        hover: {
+          borderColor: "#d1d5db"
+        }
+      },
+      elevated: {
+        normal: {
+          backgroundColor: "#ffffff",
+          border: "none",
+          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)"
+        },
+        hover: {
+          boxShadow: "0 10px 15px rgba(0, 0, 0, 0.15)",
+          transform: "translateY(-2px)"
+        }
+      }
+    };
+    const baseStyles = {
+      borderRadius: "0.5rem",
+      padding: paddingStyles[padding],
+      transition: "all 0.2s ease"
+    };
+    const currentVariant = variantStyles[variant];
+    const combinedStyles = {
+      ...baseStyles,
+      ...currentVariant.normal,
+      ...isHovered ? currentVariant.hover : {},
+      ...style
+    };
+    return /* @__PURE__ */ jsx35(
+      "div",
+      {
+        ref,
+        style: combinedStyles,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+
+// src/components/dashboard/PrimusSummaryCard.tsx
+import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
+var PrimusSummaryCard = ({
+  title,
+  subtitle,
+  actionLabel,
+  onAction,
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsx36(Card, { className, children: /* @__PURE__ */ jsxs32("div", { className: "p-6", children: [
+    /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsxs32("div", { children: [
+        /* @__PURE__ */ jsx36("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: title }),
+        subtitle && /* @__PURE__ */ jsx36("p", { className: "text-sm text-gray-500 dark:text-gray-400 mt-1", children: subtitle })
+      ] }),
+      actionLabel && onAction && /* @__PURE__ */ jsx36(Button, { variant: "outline", size: "sm", onClick: onAction, children: actionLabel })
+    ] }),
+    /* @__PURE__ */ jsx36("div", { className: "mt-4", children })
+  ] }) });
+};
+
+// src/components/dashboard/PrimusActivityFeed.tsx
+import { useMemo as useMemo3 } from "react";
+import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
+var statusClasses = {
+  success: "bg-emerald-500/10 text-emerald-300 border-emerald-500/30",
+  warning: "bg-amber-500/10 text-amber-300 border-amber-500/30",
+  error: "bg-rose-500/10 text-rose-300 border-rose-500/30",
+  info: "bg-blue-500/10 text-blue-300 border-blue-500/30"
+};
+var PrimusActivityFeed = ({
+  items,
+  maxItems = 10,
+  showTimestamps = true,
+  groupByDate = false,
+  loading = false
+}) => {
   const visibleItems = useMemo3(() => items.slice(0, maxItems), [items, maxItems]);
   const groups = useMemo3(() => {
     if (!groupByDate) {
@@ -2789,18 +3192,18 @@ var PrimusActivityFeed = ({
     return Array.from(map.entries()).map(([label, groupItems]) => ({ label, items: groupItems }));
   }, [groupByDate, visibleItems]);
   if (loading) {
-    return /* @__PURE__ */ jsx34("div", { className: "rounded-xl border border-white/10 bg-slate-900/40 p-6 text-sm text-gray-400", children: "Loading activity..." });
+    return /* @__PURE__ */ jsx37("div", { className: "rounded-xl border border-white/10 bg-slate-900/40 p-6 text-sm text-gray-400", children: "Loading activity..." });
   }
-  return /* @__PURE__ */ jsx34("div", { className: "rounded-xl border border-white/10 bg-slate-900/40 p-6 space-y-6", children: groups.map((group, index) => /* @__PURE__ */ jsxs31("div", { children: [
-    group.label && /* @__PURE__ */ jsx34("div", { className: "text-xs uppercase tracking-wide text-gray-500 mb-3", children: group.label }),
-    /* @__PURE__ */ jsx34("div", { className: "space-y-4", children: group.items.map((item, itemIndex) => /* @__PURE__ */ jsxs31("div", { className: "flex items-start gap-4", children: [
-      /* @__PURE__ */ jsx34("div", { className: `mt-1 h-2.5 w-2.5 rounded-full border ${statusClasses[item.status ?? "info"]}` }),
-      /* @__PURE__ */ jsxs31("div", { className: "flex-1", children: [
-        /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between gap-4", children: [
-          /* @__PURE__ */ jsx34("div", { className: "text-sm font-medium text-gray-100", children: item.title }),
-          showTimestamps && /* @__PURE__ */ jsx34("div", { className: "text-xs text-gray-500", children: formatTime(item.timestamp) })
+  return /* @__PURE__ */ jsx37("div", { className: "rounded-xl border border-white/10 bg-slate-900/40 p-6 space-y-6", children: groups.map((group, index) => /* @__PURE__ */ jsxs33("div", { children: [
+    group.label && /* @__PURE__ */ jsx37("div", { className: "text-xs uppercase tracking-wide text-gray-500 mb-3", children: group.label }),
+    /* @__PURE__ */ jsx37("div", { className: "space-y-4", children: group.items.map((item, itemIndex) => /* @__PURE__ */ jsxs33("div", { className: "flex items-start gap-4", children: [
+      /* @__PURE__ */ jsx37("div", { className: `mt-1 h-2.5 w-2.5 rounded-full border ${statusClasses[item.status ?? "info"]}` }),
+      /* @__PURE__ */ jsxs33("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsx37("div", { className: "text-sm font-medium text-gray-100", children: item.title }),
+          showTimestamps && /* @__PURE__ */ jsx37("div", { className: "text-xs text-gray-500", children: formatTime(item.timestamp) })
         ] }),
-        item.description && /* @__PURE__ */ jsx34("div", { className: "text-xs text-gray-400 mt-1", children: item.description })
+        item.description && /* @__PURE__ */ jsx37("div", { className: "text-xs text-gray-400 mt-1", children: item.description })
       ] })
     ] }, item.id ?? `${itemIndex}-${item.title}`)) })
   ] }, `${group.label}-${index}`)) });
@@ -2827,12 +3230,12 @@ var formatTime = (value) => {
 };
 
 // src/components/charts/PrimusChartBase.tsx
-import { useEffect as useEffect14, useMemo as useMemo4, useRef } from "react";
+import { useEffect as useEffect14, useMemo as useMemo4, useRef as useRef2 } from "react";
 import {
   Chart,
   registerables
 } from "chart.js";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var registered = false;
 var ensureRegistered = () => {
   if (!registered) {
@@ -2855,8 +3258,8 @@ var PrimusChartBase = ({
   className,
   datasetTransform
 }) => {
-  const canvasRef = useRef(null);
-  const chartRef = useRef(null);
+  const canvasRef = useRef2(null);
+  const chartRef = useRef2(null);
   const builtData = useMemo4(() => {
     if (data) {
       return data;
@@ -2923,13 +3326,13 @@ var PrimusChartBase = ({
       chartRef.current = null;
     };
   }, [type, builtData, builtOptions]);
-  return /* @__PURE__ */ jsx35("div", { className, style: { height, width }, children: /* @__PURE__ */ jsx35("canvas", { ref: canvasRef, "aria-label": ariaLabel, role: "img" }) });
+  return /* @__PURE__ */ jsx38("div", { className, style: { height, width }, children: /* @__PURE__ */ jsx38("canvas", { ref: canvasRef, "aria-label": ariaLabel, role: "img" }) });
 };
 
 // src/components/charts/PrimusLineChart.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var PrimusLineChart = (props) => {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx39(
     PrimusChartBase,
     {
       ...props,
@@ -2947,9 +3350,9 @@ var PrimusLineChart = (props) => {
 };
 
 // src/components/charts/PrimusAreaChart.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var PrimusAreaChart = (props) => {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx40(
     PrimusChartBase,
     {
       ...props,
@@ -2967,7 +3370,7 @@ var PrimusAreaChart = (props) => {
 };
 
 // src/components/charts/PrimusBarChart.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var PrimusBarChart = ({ stacked = false, options, ...props }) => {
   const mergedOptions = {
     ...options,
@@ -2977,7 +3380,7 @@ var PrimusBarChart = ({ stacked = false, options, ...props }) => {
       ...options?.scales ?? {}
     }
   };
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx41(
     PrimusChartBase,
     {
       ...props,
@@ -2993,13 +3396,13 @@ var PrimusBarChart = ({ stacked = false, options, ...props }) => {
 };
 
 // src/components/charts/PrimusPieChart.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var PrimusPieChart = ({ donut = false, cutout = "55%", options, ...props }) => {
   const mergedOptions = {
     ...options,
     cutout: donut ? cutout : void 0
   };
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx42(
     PrimusChartBase,
     {
       ...props,
@@ -3016,7 +3419,7 @@ var PrimusPieChart = ({ donut = false, cutout = "55%", options, ...props }) => {
 
 // src/components/charts/PrimusSparkline.tsx
 import { useMemo as useMemo5 } from "react";
-import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
 var PrimusSparkline = ({
   series = [],
   data,
@@ -3049,7 +3452,7 @@ var PrimusSparkline = ({
   if (!values.length) {
     return null;
   }
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs34(
     "svg",
     {
       className,
@@ -3060,17 +3463,17 @@ var PrimusSparkline = ({
       "aria-label": ariaLabel,
       role: "img",
       children: [
-        type === "area" && /* @__PURE__ */ jsx40("path", { d: areaPath, fill: color, opacity: 0.2, stroke: "none" }),
-        /* @__PURE__ */ jsx40("path", { d: linePath, fill: "none", stroke: color, strokeWidth })
+        type === "area" && /* @__PURE__ */ jsx43("path", { d: areaPath, fill: color, opacity: 0.2, stroke: "none" }),
+        /* @__PURE__ */ jsx43("path", { d: linePath, fill: "none", stroke: color, strokeWidth })
       ]
     }
   );
 };
 
 // src/components/shared/Checkbox.tsx
-import React22 from "react";
-import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
-var Checkbox = React22.forwardRef(
+import React24 from "react";
+import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
+var Checkbox = React24.forwardRef(
   ({ style, label, error, disabled, className, ...props }, ref) => {
     const containerStyles = {
       display: "flex",
@@ -3107,9 +3510,9 @@ var Checkbox = React22.forwardRef(
       marginTop: "0.25rem",
       marginLeft: "1.75rem"
     };
-    return /* @__PURE__ */ jsxs33("div", { children: [
-      /* @__PURE__ */ jsxs33("div", { style: containerStyles, children: [
-        /* @__PURE__ */ jsx41("div", { style: checkboxWrapperStyles, children: /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsxs35("div", { children: [
+      /* @__PURE__ */ jsxs35("div", { style: containerStyles, children: [
+        /* @__PURE__ */ jsx44("div", { style: checkboxWrapperStyles, children: /* @__PURE__ */ jsx44(
           "input",
           {
             ref,
@@ -3122,21 +3525,21 @@ var Checkbox = React22.forwardRef(
             ...props
           }
         ) }),
-        label && /* @__PURE__ */ jsx41("label", { style: labelStyles, onClick: (e) => {
+        label && /* @__PURE__ */ jsx44("label", { style: labelStyles, onClick: (e) => {
           if (!disabled) {
             const input = e.currentTarget.previousElementSibling?.querySelector("input");
             input?.click();
           }
         }, children: label })
       ] }),
-      error && /* @__PURE__ */ jsx41("p", { style: errorTextStyles, children: error })
+      error && /* @__PURE__ */ jsx44("p", { style: errorTextStyles, children: error })
     ] });
   }
 );
 Checkbox.displayName = "Checkbox";
 
 // src/components/shared/RadioGroup.tsx
-import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
 var RadioGroup = ({
   name,
   options,
@@ -3176,9 +3579,9 @@ var RadioGroup = ({
     color: "#ef4444",
     marginTop: "0.5rem"
   };
-  return /* @__PURE__ */ jsxs34("div", { children: [
-    /* @__PURE__ */ jsx42("div", { style: containerStyles, children: options.map((option) => /* @__PURE__ */ jsxs34("div", { style: optionStyles, children: [
-      /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsxs36("div", { children: [
+    /* @__PURE__ */ jsx45("div", { style: containerStyles, children: options.map((option) => /* @__PURE__ */ jsxs36("div", { style: optionStyles, children: [
+      /* @__PURE__ */ jsx45(
         "input",
         {
           type: "radio",
@@ -3190,7 +3593,7 @@ var RadioGroup = ({
           style: radioStyles
         }
       ),
-      /* @__PURE__ */ jsx42(
+      /* @__PURE__ */ jsx45(
         "label",
         {
           style: {
@@ -3206,17 +3609,17 @@ var RadioGroup = ({
         }
       )
     ] }, option.value)) }),
-    error && /* @__PURE__ */ jsx42("p", { style: errorTextStyles, children: error })
+    error && /* @__PURE__ */ jsx45("p", { style: errorTextStyles, children: error })
   ] });
 };
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/shared/Select.tsx
-import React23, { useState as useState22 } from "react";
+import React25, { useState as useState22 } from "react";
 import { Combobox, Transition as Transition2 } from "@headlessui/react";
 import { CheckIcon as CheckIcon2, ChevronUpDownIcon, XMarkIcon as XMarkIcon3 } from "@heroicons/react/20/solid";
 import { clsx as clsx7 } from "clsx";
-import { Fragment as Fragment5, jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
 var Select = ({
   label,
   error,
@@ -3238,7 +3641,7 @@ var Select = ({
       onChange?.(value.filter((v) => v !== valToRemove));
     }
   };
-  return /* @__PURE__ */ jsx43("div", { className: clsx7("w-full", className), children: /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx46("div", { className: clsx7("w-full", className), children: /* @__PURE__ */ jsx46(
     Combobox,
     {
       value,
@@ -3247,21 +3650,21 @@ var Select = ({
       },
       multiple,
       disabled,
-      children: ({}) => /* @__PURE__ */ jsxs35("div", { className: "relative", children: [
-        label && /* @__PURE__ */ jsx43(Combobox.Label, { className: "block text-sm font-medium text-gray-700 mb-1", children: label }),
-        /* @__PURE__ */ jsxs35("div", { className: clsx7(
+      children: ({}) => /* @__PURE__ */ jsxs37("div", { className: "relative", children: [
+        label && /* @__PURE__ */ jsx46(Combobox.Label, { className: "block text-sm font-medium text-gray-700 mb-1", children: label }),
+        /* @__PURE__ */ jsxs37("div", { className: clsx7(
           "relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left focus-within:ring-2 focus-within:ring-primus-500",
           "border transition-all duration-200 ease-in-out",
           error ? "border-red-500 focus-within:ring-red-500" : "border-gray-300",
           disabled && "opacity-50 cursor-not-allowed bg-gray-50"
         ), children: [
-          /* @__PURE__ */ jsxs35("div", { className: clsx7(
+          /* @__PURE__ */ jsxs37("div", { className: clsx7(
             "flex flex-wrap items-center gap-1.5 w-full py-1.5 pl-3 pr-10 text-sm",
             "min-h-[2.5rem]"
           ), children: [
-            multiple && Array.isArray(value) && value.map((val) => /* @__PURE__ */ jsxs35("span", { className: "inline-flex items-center gap-1 rounded bg-primus-50 px-2 py-0.5 text-xs font-medium text-primus-700 ring-1 ring-inset ring-primus-700/10 max-w-[150px]", children: [
-              /* @__PURE__ */ jsx43("span", { className: "truncate", children: getLabel(val) }),
-              /* @__PURE__ */ jsxs35(
+            multiple && Array.isArray(value) && value.map((val) => /* @__PURE__ */ jsxs37("span", { className: "inline-flex items-center gap-1 rounded bg-primus-50 px-2 py-0.5 text-xs font-medium text-primus-700 ring-1 ring-inset ring-primus-700/10 max-w-[150px]", children: [
+              /* @__PURE__ */ jsx46("span", { className: "truncate", children: getLabel(val) }),
+              /* @__PURE__ */ jsxs37(
                 "button",
                 {
                   type: "button",
@@ -3273,13 +3676,13 @@ var Select = ({
                   },
                   onMouseDown: (e) => e.preventDefault(),
                   children: [
-                    /* @__PURE__ */ jsx43("span", { className: "sr-only", children: "Remove" }),
-                    /* @__PURE__ */ jsx43(XMarkIcon3, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+                    /* @__PURE__ */ jsx46("span", { className: "sr-only", children: "Remove" }),
+                    /* @__PURE__ */ jsx46(XMarkIcon3, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
                   ]
                 }
               )
             ] }, val)),
-            /* @__PURE__ */ jsx43(
+            /* @__PURE__ */ jsx46(
               Combobox.Input,
               {
                 className: "border-none p-0 text-gray-900 focus:ring-0 outline-none placeholder:text-gray-400 bg-transparent min-w-[50px] flex-1 text-sm leading-5 py-0.5",
@@ -3289,7 +3692,7 @@ var Select = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx43(Combobox.Button, { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsx46(Combobox.Button, { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ jsx46(
             ChevronUpDownIcon,
             {
               className: "h-5 w-5 text-gray-400",
@@ -3297,15 +3700,15 @@ var Select = ({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx46(
           Transition2,
           {
-            as: React23.Fragment,
+            as: React25.Fragment,
             leave: "transition ease-in duration-100",
             leaveFrom: "opacity-100",
             leaveTo: "opacity-0",
             afterLeave: () => setQuery(""),
-            children: /* @__PURE__ */ jsx43(Combobox.Options, { className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm", children: filteredOptions.length === 0 && query !== "" ? /* @__PURE__ */ jsx43("div", { className: "relative cursor-default select-none py-2 px-4 text-gray-700", children: "Nothing found." }) : filteredOptions.map((option) => /* @__PURE__ */ jsx43(
+            children: /* @__PURE__ */ jsx46(Combobox.Options, { className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm", children: filteredOptions.length === 0 && query !== "" ? /* @__PURE__ */ jsx46("div", { className: "relative cursor-default select-none py-2 px-4 text-gray-700", children: "Nothing found." }) : filteredOptions.map((option) => /* @__PURE__ */ jsx46(
               Combobox.Option,
               {
                 className: ({ active }) => clsx7(
@@ -3314,16 +3717,16 @@ var Select = ({
                 ),
                 value: option.value,
                 disabled: option.disabled,
-                children: ({ selected, active }) => /* @__PURE__ */ jsxs35(Fragment5, { children: [
-                  /* @__PURE__ */ jsx43("span", { className: clsx7("block truncate", selected ? "font-medium" : "font-normal"), children: option.label }),
-                  selected ? /* @__PURE__ */ jsx43(
+                children: ({ selected, active }) => /* @__PURE__ */ jsxs37(Fragment5, { children: [
+                  /* @__PURE__ */ jsx46("span", { className: clsx7("block truncate", selected ? "font-medium" : "font-normal"), children: option.label }),
+                  selected ? /* @__PURE__ */ jsx46(
                     "span",
                     {
                       className: clsx7(
                         "absolute inset-y-0 left-0 flex items-center pl-3",
                         active ? "text-white" : "text-primus-600"
                       ),
-                      children: /* @__PURE__ */ jsx43(CheckIcon2, { className: "h-5 w-5", "aria-hidden": "true" })
+                      children: /* @__PURE__ */ jsx46(CheckIcon2, { className: "h-5 w-5", "aria-hidden": "true" })
                     }
                   ) : null
                 ] })
@@ -3332,15 +3735,15 @@ var Select = ({
             )) })
           }
         ),
-        error && /* @__PURE__ */ jsx43("p", { className: "mt-1 text-sm text-red-500", children: error })
+        error && /* @__PURE__ */ jsx46("p", { className: "mt-1 text-sm text-red-500", children: error })
       ] })
     }
   ) });
 };
 
 // src/components/shared/Toggle.tsx
-import React24 from "react";
-import { jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
+import React26 from "react";
+import { jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
 var Toggle = ({
   checked = false,
   onChange,
@@ -3348,7 +3751,7 @@ var Toggle = ({
   label,
   size = "md"
 }) => {
-  const [isHovered, setIsHovered] = React24.useState(false);
+  const [isHovered, setIsHovered] = React26.useState(false);
   const sizes = {
     sm: { width: "2.25rem", height: "1.25rem", thumbSize: "0.875rem" },
     md: { width: "2.75rem", height: "1.5rem", thumbSize: "1.125rem" },
@@ -3395,8 +3798,8 @@ var Toggle = ({
       onChange?.(!checked);
     }
   };
-  return /* @__PURE__ */ jsxs36("div", { style: containerStyles, children: [
-    /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs38("div", { style: containerStyles, children: [
+    /* @__PURE__ */ jsx47(
       "div",
       {
         style: switchStyles,
@@ -3412,20 +3815,23 @@ var Toggle = ({
             handleClick();
           }
         },
-        children: /* @__PURE__ */ jsx44("div", { style: thumbStyles })
+        children: /* @__PURE__ */ jsx47("div", { style: thumbStyles })
       }
     ),
-    label && /* @__PURE__ */ jsx44("label", { style: labelStyles, onClick: handleClick, children: label })
+    label && /* @__PURE__ */ jsx47("label", { style: labelStyles, onClick: handleClick, children: label })
   ] });
 };
 Toggle.displayName = "Toggle";
 
 // src/components/shared/Textarea.tsx
-import React25 from "react";
-import { jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
-var Textarea = React25.forwardRef(
-  ({ style, label, error, disabled, resize = "vertical", ...props }, ref) => {
-    const [isFocused, setIsFocused] = React25.useState(false);
+import React27 from "react";
+import { jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
+var Textarea = React27.forwardRef(
+  ({ style, label, error, disabled, resize = "vertical", onChange, onValueChange, className, ...props }, ref) => {
+    const handleChange = (e) => {
+      onChange?.(e);
+      onValueChange?.(e.target.value);
+    };
     const containerStyles = {
       width: "100%"
     };
@@ -3433,11 +3839,11 @@ var Textarea = React25.forwardRef(
       fontSize: "0.875rem",
       lineHeight: "1.25rem",
       fontWeight: "500",
-      marginBottom: "0.5rem",
+      marginBottom: "0.375rem",
       display: "block",
       color: "#374151",
-      cursor: disabled ? "not-allowed" : "default",
-      opacity: disabled ? 0.7 : 1
+      opacity: disabled ? 0.7 : 1,
+      cursor: disabled ? "not-allowed" : "default"
     };
     const textareaStyles = {
       display: "flex",
@@ -3450,12 +3856,11 @@ var Textarea = React25.forwardRef(
       fontSize: "0.875rem",
       lineHeight: "1.5rem",
       outline: "none",
-      transition: "all 0.2s ease",
-      cursor: disabled ? "not-allowed" : "text",
+      transition: "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out",
       opacity: disabled ? 0.5 : 1,
+      cursor: disabled ? "not-allowed" : "text",
       resize,
-      fontFamily: "inherit",
-      boxShadow: isFocused ? error ? "0 0 0 2px rgba(239, 68, 68, 0.2)" : "0 0 0 2px rgba(3, 7, 18, 0.1)" : "none"
+      fontFamily: "inherit"
     };
     const errorTextStyles = {
       fontSize: "0.875rem",
@@ -3463,9 +3868,9 @@ var Textarea = React25.forwardRef(
       color: "#ef4444",
       marginTop: "0.25rem"
     };
-    return /* @__PURE__ */ jsxs37("div", { style: containerStyles, children: [
-      label && /* @__PURE__ */ jsx45("label", { style: labelStyles, children: label }),
-      /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsxs39("div", { style: containerStyles, className, children: [
+      label && /* @__PURE__ */ jsx48("label", { style: labelStyles, children: label }),
+      /* @__PURE__ */ jsx48(
         "textarea",
         {
           ref,
@@ -3473,94 +3878,28 @@ var Textarea = React25.forwardRef(
             ...textareaStyles,
             ...style
           },
-          onFocus: () => setIsFocused(true),
-          onBlur: () => setIsFocused(false),
           disabled,
+          onChange: handleChange,
+          className: `primus-textarea ${error ? "error" : ""}`,
           ...props
         }
       ),
-      error && /* @__PURE__ */ jsx45("p", { style: errorTextStyles, children: error })
+      /* @__PURE__ */ jsx48("style", { children: `
+                    .primus-textarea:focus {
+                        border-color: ${error ? "#ef4444" : "#6366f1"};
+                        box-shadow: 0 0 0 1px ${error ? "#ef4444" : "#6366f1"};
+                    }
+                    ` }),
+      error && /* @__PURE__ */ jsx48("p", { style: errorTextStyles, children: error })
     ] });
   }
 );
 Textarea.displayName = "Textarea";
 
-// src/components/shared/Card.tsx
-import React26 from "react";
-import { jsx as jsx46 } from "react/jsx-runtime";
-var Card = React26.forwardRef(
-  ({ style, variant = "default", padding = "md", children, ...props }, ref) => {
-    const [isHovered, setIsHovered] = React26.useState(false);
-    const paddingStyles = {
-      none: "0",
-      sm: "0.75rem",
-      md: "1.5rem",
-      lg: "2rem"
-    };
-    const variantStyles = {
-      default: {
-        normal: {
-          backgroundColor: "#ffffff",
-          border: "1px solid #e5e7eb",
-          boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)"
-        },
-        hover: {
-          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)"
-        }
-      },
-      outlined: {
-        normal: {
-          backgroundColor: "#ffffff",
-          border: "2px solid #e5e7eb",
-          boxShadow: "none"
-        },
-        hover: {
-          borderColor: "#d1d5db"
-        }
-      },
-      elevated: {
-        normal: {
-          backgroundColor: "#ffffff",
-          border: "none",
-          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)"
-        },
-        hover: {
-          boxShadow: "0 10px 15px rgba(0, 0, 0, 0.15)",
-          transform: "translateY(-2px)"
-        }
-      }
-    };
-    const baseStyles = {
-      borderRadius: "0.5rem",
-      padding: paddingStyles[padding],
-      transition: "all 0.2s ease"
-    };
-    const currentVariant = variantStyles[variant];
-    const combinedStyles = {
-      ...baseStyles,
-      ...currentVariant.normal,
-      ...isHovered ? currentVariant.hover : {},
-      ...style
-    };
-    return /* @__PURE__ */ jsx46(
-      "div",
-      {
-        ref,
-        style: combinedStyles,
-        onMouseEnter: () => setIsHovered(true),
-        onMouseLeave: () => setIsHovered(false),
-        ...props,
-        children
-      }
-    );
-  }
-);
-Card.displayName = "Card";
-
 // src/components/shared/Badge.tsx
-import React27 from "react";
-import { jsx as jsx47 } from "react/jsx-runtime";
-var Badge = React27.forwardRef(
+import React28 from "react";
+import { jsx as jsx49 } from "react/jsx-runtime";
+var Badge = React28.forwardRef(
   ({ style, variant = "default", size = "md", children, ...props }, ref) => {
     const variantStyles = {
       default: {
@@ -3614,14 +3953,14 @@ var Badge = React27.forwardRef(
       ...sizeStyles[size],
       ...style
     };
-    return /* @__PURE__ */ jsx47("span", { ref, style: combinedStyles, ...props, children });
+    return /* @__PURE__ */ jsx49("span", { ref, style: combinedStyles, ...props, children });
   }
 );
 Badge.displayName = "Badge";
 
 // src/components/shared/Table.tsx
-import React28 from "react";
-import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+import React29 from "react";
+import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
 function Table({
   columns,
   data,
@@ -3630,7 +3969,7 @@ function Table({
   bordered = true,
   style
 }) {
-  const [hoveredRow, setHoveredRow] = React28.useState(null);
+  const [hoveredRow, setHoveredRow] = React29.useState(null);
   const tableStyles = {
     width: "100%",
     borderCollapse: "collapse",
@@ -3655,8 +3994,8 @@ function Table({
     backgroundColor: hoverable && hoveredRow === rowIndex ? "#f9fafb" : striped && rowIndex % 2 === 1 ? "#f9fafb" : "#ffffff",
     transition: "background-color 0.15s ease"
   });
-  return /* @__PURE__ */ jsx48("div", { style: { overflowX: "auto", borderRadius: "0.5rem", border: bordered ? "1px solid #e5e7eb" : "none" }, children: /* @__PURE__ */ jsxs38("table", { style: tableStyles, children: [
-    /* @__PURE__ */ jsx48("thead", { style: theadStyles, children: /* @__PURE__ */ jsx48("tr", { children: columns.map((column) => /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx50("div", { style: { overflowX: "auto", borderRadius: "0.5rem", border: bordered ? "1px solid #e5e7eb" : "none" }, children: /* @__PURE__ */ jsxs40("table", { style: tableStyles, children: [
+    /* @__PURE__ */ jsx50("thead", { style: theadStyles, children: /* @__PURE__ */ jsx50("tr", { children: columns.map((column) => /* @__PURE__ */ jsx50(
       "th",
       {
         style: {
@@ -3667,12 +4006,12 @@ function Table({
       },
       column.key
     )) }) }),
-    /* @__PURE__ */ jsx48("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx50("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx50(
       "tr",
       {
         onMouseEnter: () => hoverable && setHoveredRow(rowIndex),
         onMouseLeave: () => hoverable && setHoveredRow(null),
-        children: columns.map((column) => /* @__PURE__ */ jsx48("td", { style: getTdStyles(rowIndex), children: column.render ? column.render(row) : row[column.key] }, column.key))
+        children: columns.map((column) => /* @__PURE__ */ jsx50("td", { style: getTdStyles(rowIndex), children: column.render ? column.render(row) : row[column.key] }, column.key))
       },
       rowIndex
     )) })
@@ -3681,9 +4020,9 @@ function Table({
 Table.displayName = "Table";
 
 // src/components/shared/Container.tsx
-import React29 from "react";
-import { jsx as jsx49 } from "react/jsx-runtime";
-var Container = React29.forwardRef(
+import React30 from "react";
+import { jsx as jsx51 } from "react/jsx-runtime";
+var Container = React30.forwardRef(
   ({ style, maxWidth = "lg", padding = "md", children, ...props }, ref) => {
     const maxWidthStyles = {
       sm: "640px",
@@ -3708,15 +4047,15 @@ var Container = React29.forwardRef(
       paddingRight: paddingStyles[padding],
       ...style
     };
-    return /* @__PURE__ */ jsx49("div", { ref, style: containerStyles, ...props, children });
+    return /* @__PURE__ */ jsx51("div", { ref, style: containerStyles, ...props, children });
   }
 );
 Container.displayName = "Container";
 
 // src/components/shared/Grid.tsx
-import React30 from "react";
-import { jsx as jsx50 } from "react/jsx-runtime";
-var Grid = React30.forwardRef(
+import React31 from "react";
+import { jsx as jsx52 } from "react/jsx-runtime";
+var Grid = React31.forwardRef(
   ({ style, columns = 3, rows, gap = "md", width = "100%", height = "auto", responsive = true, children, ...props }, ref) => {
     const gapStyles = {
       none: "0",
@@ -3734,15 +4073,15 @@ var Grid = React30.forwardRef(
       height,
       ...style
     };
-    return /* @__PURE__ */ jsx50("div", { ref, style: gridStyles, ...props, children });
+    return /* @__PURE__ */ jsx52("div", { ref, style: gridStyles, ...props, children });
   }
 );
 Grid.displayName = "Grid";
 
 // src/components/shared/Stack.tsx
-import React31 from "react";
-import { jsx as jsx51 } from "react/jsx-runtime";
-var Stack = React31.forwardRef(
+import React32 from "react";
+import { jsx as jsx53 } from "react/jsx-runtime";
+var Stack = React32.forwardRef(
   ({ style, direction = "vertical", gap = "md", align = "stretch", justify = "start", children, ...props }, ref) => {
     const gapStyles = {
       none: "0",
@@ -3772,14 +4111,14 @@ var Stack = React31.forwardRef(
       justifyContent: justifyStyles[justify],
       ...style
     };
-    return /* @__PURE__ */ jsx51("div", { ref, style: stackStyles, ...props, children });
+    return /* @__PURE__ */ jsx53("div", { ref, style: stackStyles, ...props, children });
   }
 );
 Stack.displayName = "Stack";
 
 // src/components/shared/Modal.tsx
-import React32 from "react";
-import { jsx as jsx52, jsxs as jsxs39 } from "react/jsx-runtime";
+import React33 from "react";
+import { jsx as jsx54, jsxs as jsxs41 } from "react/jsx-runtime";
 var Modal = ({
   isOpen,
   onClose,
@@ -3788,7 +4127,7 @@ var Modal = ({
   size = "md",
   closeOnOverlayClick = true
 }) => {
-  React32.useEffect(() => {
+  React33.useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = "hidden";
     } else {
@@ -3857,20 +4196,20 @@ var Modal = ({
     overflowY: "auto",
     flex: 1
   };
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx54(
     "div",
     {
       style: overlayStyles,
       onClick: closeOnOverlayClick ? onClose : void 0,
-      children: /* @__PURE__ */ jsxs39(
+      children: /* @__PURE__ */ jsxs41(
         "div",
         {
           style: modalStyles,
           onClick: (e) => e.stopPropagation(),
           children: [
-            title && /* @__PURE__ */ jsxs39("div", { style: headerStyles, children: [
-              /* @__PURE__ */ jsx52("h2", { style: titleStyles, children: title }),
-              /* @__PURE__ */ jsx52(
+            title && /* @__PURE__ */ jsxs41("div", { style: headerStyles, children: [
+              /* @__PURE__ */ jsx54("h2", { style: titleStyles, children: title }),
+              /* @__PURE__ */ jsx54(
                 "button",
                 {
                   style: closeButtonStyles,
@@ -3880,7 +4219,7 @@ var Modal = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx52("div", { style: contentStyles, children })
+            /* @__PURE__ */ jsx54("div", { style: contentStyles, children })
           ]
         }
       )
@@ -3891,7 +4230,7 @@ Modal.displayName = "Modal";
 
 // src/components/shared/DateRangePicker.tsx
 import { useEffect as useEffect15, useMemo as useMemo6, useState as useState23 } from "react";
-import { jsx as jsx53, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs42 } from "react/jsx-runtime";
 var PrimusDateRangePicker = ({
   startDate = null,
   endDate = null,
@@ -3927,8 +4266,8 @@ var PrimusDateRangePicker = ({
     setEnd(nextEnd);
     onRangeChange?.({ startDate: nextStart, endDate: nextEnd, label: range.label });
   };
-  return /* @__PURE__ */ jsxs40("div", { className: "space-y-3", children: [
-    normalizedRanges.length > 0 && /* @__PURE__ */ jsx53("div", { className: "flex flex-wrap gap-2", children: normalizedRanges.map((range) => /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsxs42("div", { className: "space-y-3", children: [
+    normalizedRanges.length > 0 && /* @__PURE__ */ jsx55("div", { className: "flex flex-wrap gap-2", children: normalizedRanges.map((range) => /* @__PURE__ */ jsx55(
       "button",
       {
         type: "button",
@@ -3939,8 +4278,8 @@ var PrimusDateRangePicker = ({
       },
       range.label
     )) }),
-    /* @__PURE__ */ jsxs40("div", { className: "flex flex-col md:flex-row gap-3", children: [
-      /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsxs42("div", { className: "flex flex-col md:flex-row gap-3", children: [
+      /* @__PURE__ */ jsx55(
         "input",
         {
           type: "date",
@@ -3952,7 +4291,7 @@ var PrimusDateRangePicker = ({
           className: "w-full px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-gray-200 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500/50"
         }
       ),
-      /* @__PURE__ */ jsx53(
+      /* @__PURE__ */ jsx55(
         "input",
         {
           type: "date",
@@ -4003,7 +4342,7 @@ var toDateInputValue = (value) => {
 };
 
 // src/components/shared/FilterBar.tsx
-import { jsx as jsx54, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs43 } from "react/jsx-runtime";
 var PrimusFilterBar = ({
   filters,
   activeFilters,
@@ -4017,9 +4356,9 @@ var PrimusFilterBar = ({
     };
     onChange?.(next);
   };
-  return /* @__PURE__ */ jsxs41("div", { className: "flex flex-wrap gap-4 items-end", children: [
-    filters.map((filter) => /* @__PURE__ */ jsxs41("div", { className: "min-w-[220px]", children: [
-      filter.type === "select" && /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsxs43("div", { className: "flex flex-wrap gap-4 items-end", children: [
+    filters.map((filter) => /* @__PURE__ */ jsxs43("div", { className: "min-w-[220px]", children: [
+      filter.type === "select" && /* @__PURE__ */ jsx56(
         Select,
         {
           label: filter.label,
@@ -4029,7 +4368,7 @@ var PrimusFilterBar = ({
           onChange: (value) => updateFilter(filter.key, value)
         }
       ),
-      filter.type === "toggle" && /* @__PURE__ */ jsx54(
+      filter.type === "toggle" && /* @__PURE__ */ jsx56(
         Toggle,
         {
           label: filter.label,
@@ -4037,7 +4376,7 @@ var PrimusFilterBar = ({
           onChange: (checked) => updateFilter(filter.key, checked)
         }
       ),
-      filter.type === "search" && /* @__PURE__ */ jsx54(
+      filter.type === "search" && /* @__PURE__ */ jsx56(
         Input,
         {
           label: filter.label,
@@ -4053,7 +4392,7 @@ var PrimusFilterBar = ({
 
 // src/components/shared/ExportMenu.tsx
 import { useEffect as useEffect16, useState as useState24 } from "react";
-import { jsx as jsx55, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs44 } from "react/jsx-runtime";
 var PrimusExportMenu = ({
   formats = ["CSV", "PDF", "PNG", "JSON"],
   includeCharts = true,
@@ -4078,29 +4417,29 @@ var PrimusExportMenu = ({
       includeTables: tables
     });
   };
-  return /* @__PURE__ */ jsxs42("div", { className: "flex flex-wrap items-center gap-3", children: [
-    /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsxs44("div", { className: "flex flex-wrap items-center gap-3", children: [
+    /* @__PURE__ */ jsx57(
       "select",
       {
         value: format,
         onChange: (event) => setFormat(event.target.value),
         className: "px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-gray-200 text-sm",
-        children: formats.map((item) => /* @__PURE__ */ jsx55("option", { value: item, children: item }, item))
+        children: formats.map((item) => /* @__PURE__ */ jsx57("option", { value: item, children: item }, item))
       }
     ),
-    /* @__PURE__ */ jsxs42("label", { className: "flex items-center gap-2 text-xs text-gray-300", children: [
-      /* @__PURE__ */ jsx55("input", { type: "checkbox", checked: charts, onChange: (e) => setCharts(e.target.checked) }),
+    /* @__PURE__ */ jsxs44("label", { className: "flex items-center gap-2 text-xs text-gray-300", children: [
+      /* @__PURE__ */ jsx57("input", { type: "checkbox", checked: charts, onChange: (e) => setCharts(e.target.checked) }),
       "Charts"
     ] }),
-    /* @__PURE__ */ jsxs42("label", { className: "flex items-center gap-2 text-xs text-gray-300", children: [
-      /* @__PURE__ */ jsx55("input", { type: "checkbox", checked: stats, onChange: (e) => setStats(e.target.checked) }),
+    /* @__PURE__ */ jsxs44("label", { className: "flex items-center gap-2 text-xs text-gray-300", children: [
+      /* @__PURE__ */ jsx57("input", { type: "checkbox", checked: stats, onChange: (e) => setStats(e.target.checked) }),
       "Stats"
     ] }),
-    /* @__PURE__ */ jsxs42("label", { className: "flex items-center gap-2 text-xs text-gray-300", children: [
-      /* @__PURE__ */ jsx55("input", { type: "checkbox", checked: tables, onChange: (e) => setTables(e.target.checked) }),
+    /* @__PURE__ */ jsxs44("label", { className: "flex items-center gap-2 text-xs text-gray-300", children: [
+      /* @__PURE__ */ jsx57("input", { type: "checkbox", checked: tables, onChange: (e) => setTables(e.target.checked) }),
       "Tables"
     ] }),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx57(
       "button",
       {
         type: "button",
@@ -4114,7 +4453,7 @@ var PrimusExportMenu = ({
 
 // src/components/shared/Search.tsx
 import { useEffect as useEffect17, useMemo as useMemo7, useState as useState25 } from "react";
-import { jsx as jsx56, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs45 } from "react/jsx-runtime";
 var PrimusSearch = ({
   placeholder = "Search...",
   debounce = 300,
@@ -4142,8 +4481,8 @@ var PrimusSearch = ({
     }
     return suggestions.filter((item) => item.toLowerCase().includes(query.toLowerCase())).slice(0, 5);
   }, [suggestions, query, showSuggestions]);
-  return /* @__PURE__ */ jsxs43("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsxs45("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx58(
       "input",
       {
         type: "text",
@@ -4153,7 +4492,7 @@ var PrimusSearch = ({
         className: "w-full px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-gray-200 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500/50"
       }
     ),
-    visibleSuggestions.length > 0 && /* @__PURE__ */ jsx56("div", { className: "absolute mt-2 w-full rounded-lg border border-white/10 bg-slate-900/90 backdrop-blur-sm shadow-lg z-10", children: visibleSuggestions.map((item) => /* @__PURE__ */ jsx56(
+    visibleSuggestions.length > 0 && /* @__PURE__ */ jsx58("div", { className: "absolute mt-2 w-full rounded-lg border border-white/10 bg-slate-900/90 backdrop-blur-sm shadow-lg z-10", children: visibleSuggestions.map((item) => /* @__PURE__ */ jsx58(
       "button",
       {
         type: "button",
@@ -4165,6 +4504,304 @@ var PrimusSearch = ({
     )) })
   ] });
 };
+
+// src/components/shared/PrimusWizard.tsx
+import React37, { useState as useState26 } from "react";
+import { Fragment as Fragment6, jsx as jsx59, jsxs as jsxs46 } from "react/jsx-runtime";
+var PrimusStep = ({ children }) => {
+  return /* @__PURE__ */ jsx59(Fragment6, { children });
+};
+var PrimusStepper = ({ steps, currentStep }) => {
+  return /* @__PURE__ */ jsx59("nav", { "aria-label": "Progress", className: "mb-8", children: /* @__PURE__ */ jsx59("ol", { role: "list", className: "overflow-hidden rounded-md items-center flex md:border md:border-gray-200 dark:md:border-gray-800", children: steps.map((step, stepIdx) => /* @__PURE__ */ jsx59("li", { className: "relative md:flex-1 md:flex", children: stepIdx < currentStep ? /* @__PURE__ */ jsx59("div", { className: "group flex flex-1 items-center md:border-b-0 md:border-r border-gray-200 dark:border-gray-800 py-2 pl-4 md:py-3 md:pl-6 bg-white dark:bg-gray-900", children: /* @__PURE__ */ jsxs46("span", { className: "flex items-center text-sm font-medium text-purple-600 dark:text-purple-400", children: [
+    /* @__PURE__ */ jsx59("span", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-purple-600 hover:bg-purple-800 text-white dark:bg-purple-500 dark:text-white", children: /* @__PURE__ */ jsx59("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx59("path", { fillRule: "evenodd", d: "M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z", clipRule: "evenodd" }) }) }),
+    /* @__PURE__ */ jsx59("span", { className: "ml-4 text-sm font-medium", children: step.label })
+  ] }) }) : stepIdx === currentStep ? /* @__PURE__ */ jsx59("div", { className: "flex flex-1 items-center md:border-b-0 md:border-r border-gray-200 dark:border-gray-800 py-2 pl-4 md:py-3 md:pl-6 bg-white dark:bg-gray-900", "aria-current": "step", children: /* @__PURE__ */ jsxs46("span", { className: "flex items-center text-sm font-medium text-purple-600 dark:text-purple-400", children: [
+    /* @__PURE__ */ jsx59("span", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border-2 border-purple-600 dark:border-purple-500", children: /* @__PURE__ */ jsx59("span", { className: "text-purple-600 dark:text-purple-500 font-bold", children: stepIdx + 1 }) }),
+    /* @__PURE__ */ jsx59("span", { className: "ml-4 text-sm font-medium text-gray-900 dark:text-white", children: step.label })
+  ] }) }) : /* @__PURE__ */ jsx59("div", { className: "group flex flex-1 items-center md:border-b-0 md:border-r border-gray-200 dark:border-gray-800 py-2 pl-4 md:py-3 md:pl-6 bg-gray-50 dark:bg-gray-800/50", children: /* @__PURE__ */ jsxs46("span", { className: "flex items-center text-sm font-medium text-gray-500 dark:text-gray-400", children: [
+    /* @__PURE__ */ jsx59("span", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border-2 border-gray-300 dark:border-gray-700", children: /* @__PURE__ */ jsx59("span", { className: "text-gray-500 dark:text-gray-400 font-medium", children: stepIdx + 1 }) }),
+    /* @__PURE__ */ jsx59("span", { className: "ml-4", children: step.label })
+  ] }) }) }, step.label)) }) });
+};
+var PrimusWizard = ({
+  title,
+  subtitle,
+  children,
+  onComplete,
+  className,
+  startStep = 0
+}) => {
+  const [currentStep, setCurrentStep] = useState26(startStep);
+  const steps = React37.Children.toArray(children).filter(
+    (child) => React37.isValidElement(child) && (child.type === PrimusStep || child.type.name === "PrimusStep")
+  );
+  const totalSteps = steps.length;
+  const isFirstStep = currentStep === 0;
+  const isLastStep = currentStep === totalSteps - 1;
+  const handleNext = () => {
+    if (isLastStep) {
+      onComplete?.();
+    } else {
+      setCurrentStep((prev) => prev + 1);
+    }
+  };
+  const handleBack = () => {
+    if (!isFirstStep) {
+      setCurrentStep((prev) => prev - 1);
+    }
+  };
+  if (totalSteps === 0) {
+    return /* @__PURE__ */ jsx59("div", { className: "text-red-500", children: "Error: PrimusWizard requires PrimusStep children" });
+  }
+  const currentStepConfig = steps[currentStep].props;
+  return /* @__PURE__ */ jsxs46("div", { className: `space-y-6 ${className}`, children: [
+    /* @__PURE__ */ jsxs46("div", { children: [
+      title && /* @__PURE__ */ jsx59("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: title }),
+      subtitle && /* @__PURE__ */ jsx59("p", { className: "mt-1 text-gray-500 dark:text-gray-400", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsx59(
+      PrimusStepper,
+      {
+        steps: steps.map((s) => ({ label: s.props.label, description: s.props.description })),
+        currentStep
+      }
+    ),
+    /* @__PURE__ */ jsxs46(Card, { className: "p-6 min-h-[300px]", children: [
+      /* @__PURE__ */ jsx59("div", { className: "mb-8", children: steps[currentStep] }),
+      /* @__PURE__ */ jsxs46("div", { className: "flex justify-between pt-6 border-t border-gray-100 dark:border-gray-800", children: [
+        /* @__PURE__ */ jsx59(
+          Button,
+          {
+            variant: "ghost",
+            onClick: handleBack,
+            disabled: isFirstStep,
+            children: "Back"
+          }
+        ),
+        /* @__PURE__ */ jsx59(
+          Button,
+          {
+            onClick: handleNext,
+            disabled: currentStepConfig.isValid === false,
+            children: isLastStep ? "Complete" : "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/shared/Field.tsx
+import React38 from "react";
+import { clsx as clsx8 } from "clsx";
+import { ExclamationCircleIcon } from "@heroicons/react/20/solid";
+import { jsx as jsx60, jsxs as jsxs47 } from "react/jsx-runtime";
+var FieldContext = React38.createContext(void 0);
+var useFieldContext = () => React38.useContext(FieldContext);
+var Field = ({ children, error, disabled, dense, className, ...props }) => {
+  const id = React38.useId();
+  return /* @__PURE__ */ jsx60(FieldContext.Provider, { value: { id, error, disabled }, children: /* @__PURE__ */ jsx60(
+    "div",
+    {
+      className: clsx8(
+        "flex flex-col w-full",
+        dense ? "gap-1" : "gap-1.5",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+};
+var Label = ({ className, children, required, indicator, ...props }) => {
+  const context = useFieldContext();
+  return /* @__PURE__ */ jsxs47(
+    "label",
+    {
+      htmlFor: context?.id,
+      className: clsx8(
+        "block text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        context?.disabled ? "text-gray-400 opacity-70" : "text-gray-700",
+        props.onClick ? "cursor-pointer" : "cursor-default",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        required && /* @__PURE__ */ jsx60("span", { className: "ml-0.5 text-red-500", children: "*" }),
+        indicator
+      ]
+    }
+  );
+};
+var FieldDescription = ({ className, children, ...props }) => {
+  const context = useFieldContext();
+  return /* @__PURE__ */ jsx60(
+    "p",
+    {
+      className: clsx8(
+        "text-[0.8rem] text-muted-foreground text-gray-500",
+        context?.disabled && "opacity-70",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+var FieldError = ({ className, children, forceVisible, ...props }) => {
+  const context = useFieldContext();
+  const error = context?.error || children;
+  if (!error && !forceVisible) return null;
+  return /* @__PURE__ */ jsxs47(
+    "p",
+    {
+      className: clsx8(
+        "text-[0.8rem] font-medium text-red-500 flex items-center gap-1.5 animate-in slide-in-from-top-1 fade-in-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx60(ExclamationCircleIcon, { className: "h-4 w-4 shrink-0" }),
+        error
+      ]
+    }
+  );
+};
+
+// src/components/shared/InputGroup.tsx
+import React39 from "react";
+import { clsx as clsx9 } from "clsx";
+import { jsx as jsx61 } from "react/jsx-runtime";
+var InputGroup = ({ className, children, size = "md", ...props }) => {
+  return /* @__PURE__ */ jsx61(
+    "div",
+    {
+      className: clsx9(
+        "flex items-stretch w-full rounded-lg shadow-sm",
+        // Target direct children to remove borders and rounded corners where they touch
+        "[&>*:first-child]:rounded-r-none",
+        "[&>*:last-child]:rounded-l-none",
+        "[&>*:not(:first-child):not(:last-child)]:rounded-none",
+        // Handle borders to prevent double borders
+        "[&>*:not(:first-child)]:-ml-px",
+        // Ensure z-index handling for focus rings
+        "[&>*:focus-within]:z-10",
+        className
+      ),
+      ...props,
+      children: React39.Children.map(children, (child) => {
+        if (React39.isValidElement(child)) {
+          return React39.cloneElement(child, { size });
+        }
+        return child;
+      })
+    }
+  );
+};
+var InputAddon = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsx61(
+    "div",
+    {
+      className: clsx9(
+        "flex items-center px-3 border border-gray-200 bg-gray-50 text-gray-500 text-sm whitespace-nowrap",
+        // These will be overridden by the group's first/last child selectors usually, but good defaults:
+        "first:rounded-l-lg last:rounded-r-lg",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+
+// src/components/shared/PasswordInput.tsx
+import React40, { useState as useState27 } from "react";
+import { EyeIcon, EyeSlashIcon } from "@heroicons/react/20/solid";
+import { jsx as jsx62, jsxs as jsxs48 } from "react/jsx-runtime";
+var PasswordInput = React40.forwardRef(
+  (props, ref) => {
+    const [showPassword, setShowPassword] = useState27(false);
+    const toggleVisibility = () => {
+      setShowPassword(!showPassword);
+    };
+    return /* @__PURE__ */ jsx62(
+      Input,
+      {
+        ref,
+        type: showPassword ? "text" : "password",
+        endIcon: /* @__PURE__ */ jsxs48(
+          "button",
+          {
+            type: "button",
+            onClick: toggleVisibility,
+            className: "text-gray-400 hover:text-gray-600 focus:outline-none focus:text-primus-600 transition-colors pointer-events-auto cursor-pointer p-0.5 rounded",
+            tabIndex: -1,
+            children: [
+              showPassword ? /* @__PURE__ */ jsx62(EyeSlashIcon, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx62(EyeIcon, { className: "h-4 w-4", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx62("span", { className: "sr-only", children: showPassword ? "Hide password" : "Show password" })
+            ]
+          }
+        ),
+        ...props
+      }
+    );
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+
+// src/components/shared/SearchInput.tsx
+import React41, { useState as useState28, useEffect as useEffect18 } from "react";
+import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
+import { jsx as jsx63 } from "react/jsx-runtime";
+var SearchInput = React41.forwardRef(
+  ({ value, onSearch, debounceMs = 300, className, ...props }, ref) => {
+    const [localValue, setLocalValue] = useState28(value || "");
+    const [isDebouncing, setIsDebouncing] = useState28(false);
+    useEffect18(() => {
+      if (value !== void 0) {
+        setLocalValue(value);
+      }
+    }, [value]);
+    useEffect18(() => {
+      if (debounceMs === 0) {
+        onSearch?.(localValue);
+        return;
+      }
+      const handler = setTimeout(() => {
+        onSearch?.(localValue);
+        setIsDebouncing(false);
+      }, debounceMs);
+      return () => {
+        clearTimeout(handler);
+      };
+    }, [localValue, debounceMs]);
+    const handleChange = (e) => {
+      const newVal = e.target.value;
+      setLocalValue(newVal);
+      if (debounceMs > 0) setIsDebouncing(true);
+    };
+    const handleClear = () => {
+      setLocalValue("");
+      props.onClear?.();
+    };
+    return /* @__PURE__ */ jsx63(
+      Input,
+      {
+        ref,
+        type: "text",
+        startIcon: /* @__PURE__ */ jsx63(MagnifyingGlassIcon, { className: "h-4 w-4" }),
+        value: localValue,
+        onChange: handleChange,
+        onClear: handleClear,
+        loading: props.loading || props.loading === void 0 && isDebouncing,
+        className,
+        ...props
+      }
+    );
+  }
+);
+SearchInput.displayName = "SearchInput";
 export {
   AICopilot,
   AccountDashboard,
@@ -4181,17 +4818,24 @@ export {
   DashboardGrid,
   DocumentViewer,
   FeatureFlagToggle,
+  Field,
+  FieldDescription,
+  FieldError,
   FileUploader,
   FraudDetectionDashboard,
   Grid,
   Input,
+  InputAddon,
+  InputGroup,
   KYCVerification,
+  Label,
   LoanCalculator,
   LogViewer,
   LoginPage,
   Modal,
   NotificationBell,
   PrimusNotificationFeed as NotificationFeed,
+  PasswordInput,
   PolicyCard,
   PremiumCalculator,
   PrimusActivityFeed,
@@ -4207,10 +4851,16 @@ export {
   PrimusDataTable,
   PrimusDateRangePicker,
   PrimusExportMenu,
+  Field as PrimusField,
+  FieldDescription as PrimusFieldDescription,
+  FieldError as PrimusFieldError,
   PrimusFilterBar,
   Grid as PrimusGrid,
   PrimusHeader,
   Input as PrimusInput,
+  InputAddon as PrimusInputAddon,
+  InputGroup as PrimusInputGroup,
+  Label as PrimusLabel,
   PrimusLayout,
   PrimusLineChart,
   PrimusLogin,
@@ -4219,22 +4869,31 @@ export {
   PrimusNotificationCenter,
   PrimusNotificationFeed,
   PrimusNotifications,
+  PasswordInput as PrimusPasswordInput,
   PrimusPieChart,
   PrimusProvider,
   RadioGroup as PrimusRadioGroup,
   PrimusSearch,
+  SearchInput as PrimusSearchInput,
+  PrimusSection,
   Select as PrimusSelect,
   PrimusSidebar,
   PrimusSparkline,
   Stack as PrimusStack,
   PrimusStatCard,
+  PrimusStatCard as PrimusStatsCard,
+  PrimusStep,
+  PrimusStepper,
+  PrimusSummaryCard,
   Table as PrimusTable,
   Textarea as PrimusTextarea,
   PrimusThemeProvider,
   PrimusThemeToggle,
   Toggle as PrimusToggle,
+  PrimusWizard,
   QuoteComparison,
   RadioGroup,
+  SearchInput,
   SecurityDashboard,
   Select,
   Stack,
@@ -4246,6 +4905,7 @@ export {
   themeColors,
   useNotifications,
   usePrimusAuth,
+  usePrimusFetch,
   usePrimusTheme,
   useRealtimeNotifications
 };