@dashadmin/dash-boilerplate 1.3.45 → 1.3.46

package/dist/index.cjs

@@ -83,6 +83,7 @@ __export(index_exports, {
   AppWrapperLight: () => AppWrapperLight,
   CustomErrorBoundary: () => CustomErrorBoundary,
   DEFAULT_LAYOUT_DIMENSIONS: () => DEFAULT_LAYOUT_DIMENSIONS,
+  DarkToggleModeLight: () => DarkToggleModeLight,
   DashThemeContext: () => DashThemeContext,
   DashThemeProviderLight: () => DashThemeProviderLight,
   DefaultAppLoadErrorFallback: () => DefaultAppLoadErrorFallback,
@@ -102,6 +103,7 @@ __export(index_exports, {
   injectCriticalStyles: () => injectCriticalStyles,
   isElectron: () => isElectron,
   setElectronStoreValue: () => setElectronStoreValue,
+  setGlobalLoaderIcon: () => setGlobalLoaderIcon,
   syncElectronStore: () => syncElectronStore,
   syncElectronStoreToLocalStorage: () => syncElectronStoreToLocalStorage,
   useAppInitialization: () => useAppInitialization,
@@ -296,25 +298,27 @@ var useTranslateLight = () => {
 
 // src/components/GlobalSmallLoader.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var loaderSvgMarkup = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32px" height="32px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 16 16"><g><path style="opacity:1" fill="#FFFFFF" d="M11.506 12.388q0.306 0.011 0.617 0.008v1.281h-0.89a2 2 0 0 1 -0.898 -0.215 1.24 1.24 0 0 1 -0.629 -0.761 2.5 2.5 0 0 1 -0.094 -0.554q-0.006 -1.082 -0.004 -2.163h-0.609q0.002 -0.398 -0.004 -0.796a616 616 0 0 0 -1.676 2.023 657 657 0 0 0 2.069 2.46q-0.935 0.012 -1.874 0.008L6.003 11.61q-0.006 1.035 -0.004 2.069H4.485q0.004 -2.983 -0.008 -5.966 -0.661 -0.21 -0.863 -0.875a2 2 0 0 1 -0.039 -0.258q-0.008 -2.108 0 -4.217 0.12 -0.356 0.48 -0.246 0.153 0.079 0.191 0.246l0.008 3.272q0.05 0.116 0.168 0.066 0.035 -0.027 0.051 -0.066l0.008 -3.264q0.095 -0.329 0.433 -0.269 0.191 0.059 0.238 0.254l0.008 3.272q0.065 0.14 0.195 0.055l0.023 -0.039 0.008 -3.264q0.086 -0.321 0.418 -0.285 0.197 0.057 0.254 0.254a352 352 0 0 1 0.016 3.295q0.062 0.109 0.176 0.051 0.029 -0.028 0.043 -0.066l0.008 -3.28q0.045 -0.17 0.207 -0.238 0.25 -0.074 0.41 0.129a0.5 0.5 0 0 1 0.047 0.109q0.014 1.063 0.012 2.128 0.002 1.088 -0.012 2.175 -0.137 0.844 -0.96 1.078a301 301 0 0 0 0 3.006q0.753 -1.005 1.503 -2.011 1.05 -0.006 2.101 -0.004 0.002 -0.519 -0.004 -1.039a1.82 1.82 0 0 1 -1.281 -1.101q-0.197 -0.504 -0.211 -1.046a4.7 4.7 0 0 1 0.383 -2.03q0.242 -0.547 0.668 -0.964 0.395 -0.364 0.929 -0.445 0.695 -0.056 1.218 0.398 0.476 0.438 0.73 1.035 0.513 1.212 0.32 2.514a2.26 2.26 0 0 1 -0.484 1.07 1.75 1.75 0 0 1 -0.754 0.5v1.109h0.992v1.265h-0.992q-0.002 1.042 0.004 2.085 0.05 0.323 0.379 0.32"/></g></svg>`;
-var KTIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { dangerouslySetInnerHTML: { __html: loaderSvgMarkup } });
+var DEFAULT_LOADER_ICON_MARKUP = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="1" y="1" width="14" height="14" rx="2" fill="currentColor"/></svg>`;
+var loaderIconMarkup = DEFAULT_LOADER_ICON_MARKUP;
+var setGlobalLoaderIcon = (svgMarkup) => {
+  loaderIconMarkup = svgMarkup;
+};
+var LoaderIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { dangerouslySetInnerHTML: { __html: loaderIconMarkup } });
 var GlobalSmallLoader = ({
   message,
   showMessage = false
-}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "initial-loader", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "initial-loader-spinner" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "initial-loader-icon", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(KTIcon, {}) })
-  ] }),
-  showMessage && message && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "initial-loader-text", children: message })
-] });
-var GlobalLoaderHtmlMarkup = `<div class="initial-loader">
+}) => {
+  injectCriticalStyles();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "initial-loader", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "initial-loader-spinner", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "initial-loader-icon", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoaderIcon, {}) }) }),
+    showMessage && message && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "initial-loader-text", children: message })
+  ] });
+};
+var GlobalLoaderHtmlMarkup = (message = "") => `<div class="initial-loader">
     <div class="initial-loader-spinner">
-        <span class="initial-loader-icon">
-        ${loaderSvgMarkup}
-        </span>
+        <span class="initial-loader-icon">${loaderIconMarkup}</span>
     </div>
-    <div class="initial-loader-text"></div>
+    ${message ? `<div class="initial-loader-text">${message}</div>` : ""}
 </div>`;
 var injectCriticalStyles = () => {
   if (typeof document === "undefined") return;
@@ -339,15 +343,23 @@ var injectCriticalStyles = () => {
         .initial-loader-spinner {
             width: 40px;
             height: 40px;
-            border: 3px solid rgba(255,255,255,0.1);
-            border-top-color: var(--primary-color, #3f51b5);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
             position: relative;
             display: flex;
             justify-content: center;
             align-items: center;
         }
+        /* The ring lives on a pseudo-element (not the container itself) so its
+           rotation never touches .initial-loader-icon \u2014 a real DOM child would
+           inherit a parent's animated transform and spin along with the ring. */
+        .initial-loader-spinner::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border: 3px solid var(--border-color, rgba(128,128,128,0.25));
+            border-top-color: var(--highlight-color, #49a000);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
         .initial-loader-icon {
             position: absolute;
             top: 50%;
@@ -536,129 +548,18 @@ var AppWrapperLight = ({
   ] });
 };
 
-// src/components/DefaultFallbacks.tsx
-var import_react4 = __toESM(require("react"), 1);
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var defaultContainerStyle = {
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  alignItems: "center",
-  minHeight: "100vh",
-  gap: "16px",
-  color: "var(--text-color, #333)",
-  backgroundColor: "var(--background-color, #fff)"
-};
-var defaultErrorMessageStyle = {
-  margin: 0,
-  fontSize: "1.25rem",
-  fontWeight: 500,
-  color: "#f44336"
-};
-var defaultButtonStyle = {
-  marginTop: "16px",
-  padding: "8px 16px",
-  backgroundColor: "#1976d2",
-  color: "white",
-  border: "none",
-  borderRadius: "4px",
-  cursor: "pointer",
-  fontSize: "14px",
-  fontWeight: 500
-};
-var DefaultInitializationErrorFallback = ({
-  error,
-  message = "Failed to initialize application",
-  onRetry = () => window.location.reload(),
-  retryLabel = "Retry",
-  containerStyle,
-  messageStyle,
-  buttonStyle
-}) => {
-  const errorMessage = error instanceof Error ? error.message : error || message;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: __spreadValues(__spreadValues({}, defaultContainerStyle), containerStyle), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h6", { style: __spreadValues(__spreadValues({}, defaultErrorMessageStyle), messageStyle), children: errorMessage }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "button",
-      {
-        onClick: onRetry,
-        style: __spreadValues(__spreadValues({}, defaultButtonStyle), buttonStyle),
-        children: retryLabel
-      }
-    )
-  ] });
-};
-var DefaultAppLoadErrorFallback = ({
-  message = "Failed to load application",
-  onRetry = () => window.location.reload(),
-  retryLabel = "Retry",
-  containerStyle,
-  messageStyle,
-  buttonStyle
-}) => {
-  const appLoadContainerStyle = {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    height: "100vh",
-    color: "#000000",
-    gap: "12px"
-  };
-  const appLoadButtonStyle = {
-    padding: "8px 24px",
-    backgroundColor: "#57005aff",
-    color: "#fff",
-    border: "none",
-    borderRadius: "4px",
-    cursor: "pointer"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: __spreadValues(__spreadValues({}, appLoadContainerStyle), containerStyle), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", { style: messageStyle, children: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "button",
-      {
-        onClick: onRetry,
-        style: __spreadValues(__spreadValues({}, appLoadButtonStyle), buttonStyle),
-        children: retryLabel
-      }
-    )
-  ] });
-};
-var createLazyAppLoader = ({
-  importFn,
-  delay = 100,
-  ErrorFallback: ErrorFallback2 = DefaultAppLoadErrorFallback,
-  errorMessage = "Failed to load application"
-}) => {
-  return import_react4.default.lazy(() => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        importFn().then((mod) => {
-          resolve({ default: mod.default });
-        }).catch((error) => {
-          console.error("Failed to load application:", error);
-          resolve({
-            default: () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              ErrorFallback2,
-              {
-                error,
-                message: errorMessage
-              }
-            )
-          });
-        });
-      }, delay);
-    });
-  });
-};
+// src/components/DarkToggleModeLight.tsx
+var import_react_redux = require("react-redux");
+var import_icons_material = require("@mui/icons-material");
+var import_dash_admin_state = require("dash-admin-state");
+var import_material2 = require("@mui/material");
 
 // src/theme/DashThemeProviderLight.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_CssBaseline = __toESM(require("@mui/material/CssBaseline"), 1);
 var import_material = require("@mui/material");
 var import_dash_utils = require("dash-utils");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var getCssVariableNumber = (varName, defaultValue) => {
   if (typeof document === "undefined") return defaultValue;
   const value = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
@@ -710,8 +611,14 @@ var createMinimalTheme = (mode, extendedOptions) => {
     palette: {
       mode,
       primary: {
-        main: colors.primaryColor,
-        contrastText: colors.primaryContrast
+        main: colors.primaryColor
+        // No explicit contrastText: MUI's palette augmentation derives it via
+        // getContrastText(main) (picks black/white text by contrast ratio) when
+        // omitted. Trusting --primary-contrast here caused illegible button text
+        // whenever an app picked a --primary-contrast too close in tone to
+        // --primary-color (e.g. vanexa-system's near-identical blues, 2026-08-03) —
+        // --primary-contrast is also used standalone as a gradient stop elsewhere,
+        // so it was never guaranteed to double as a legible foreground color.
       },
       secondary: {
         main: colors.secondaryColor
@@ -760,9 +667,9 @@ var createMinimalTheme = (mode, extendedOptions) => {
     }
   }, safeExtendedOptions));
 };
-var DashThemeContext = (0, import_react5.createContext)(null);
+var DashThemeContext = (0, import_react4.createContext)(null);
 var useDashThemeContextLight = () => {
-  const context = (0, import_react5.useContext)(DashThemeContext);
+  const context = (0, import_react4.useContext)(DashThemeContext);
   if (!context) {
     throw new Error("useDashThemeContextLight must be used within a DashThemeProviderLight");
   }
@@ -773,13 +680,13 @@ var DashThemeProviderLight = ({
   extendedOptions,
   defaultMode
 }) => {
-  const [currentMode, setCurrentMode] = (0, import_react5.useState)(() => {
+  const [currentMode, setCurrentMode] = (0, import_react4.useState)(() => {
     if (typeof document === "undefined") return defaultMode || "dark";
     const stored = document.documentElement.getAttribute("data-theme");
     return stored === "light" || stored === "dark" ? stored : defaultMode || "dark";
   });
-  const [themeVersion, setThemeVersion] = (0, import_react5.useState)(0);
-  const theme = (0, import_react5.useMemo)(() => {
+  const [themeVersion, setThemeVersion] = (0, import_react4.useState)(0);
+  const theme = (0, import_react4.useMemo)(() => {
     return createMinimalTheme(currentMode, extendedOptions);
   }, [currentMode, extendedOptions, themeVersion]);
   const setMode = (mode) => {
@@ -796,7 +703,7 @@ var DashThemeProviderLight = ({
   const refreshTheme = () => {
     setThemeVersion((v) => v + 1);
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (typeof document === "undefined") return;
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
@@ -816,11 +723,11 @@ var DashThemeProviderLight = ({
     });
     return () => observer.disconnect();
   }, [currentMode]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (typeof document === "undefined") return;
     (0, import_dash_utils.updateDomCssVariables)(currentMode);
   }, [currentMode]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (typeof window === "undefined") return;
     const handler = () => {
       console.log("DashThemeProviderLight: Refreshing theme from CSS variables");
@@ -829,7 +736,7 @@ var DashThemeProviderLight = ({
     window.addEventListener("DASHTRefreshTheme", handler);
     return () => window.removeEventListener("DASHTRefreshTheme", handler);
   }, []);
-  const contextValue = (0, import_react5.useMemo)(
+  const contextValue = (0, import_react4.useMemo)(
     () => ({
       theme,
       currentMode,
@@ -839,22 +746,167 @@ var DashThemeProviderLight = ({
     }),
     [theme, currentMode]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_material.ThemeProvider, { theme, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_CssBaseline.default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DashThemeContext.Provider, { value: contextValue, children })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material.ThemeProvider, { theme, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_CssBaseline.default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DashThemeContext.Provider, { value: contextValue, children })
   ] });
 };
 
+// src/components/DarkToggleModeLight.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DarkToggleModeLight = () => {
+  const { currentMode, setMode } = useDashThemeContextLight();
+  const dispatch = (0, import_react_redux.useDispatch)();
+  const darkMode = currentMode === "dark";
+  const onClick = () => {
+    const newMode = darkMode ? "light" : "dark";
+    setMode(newMode);
+    dispatch(import_dash_admin_state.DASH_REDUX_ACTIONS.toggleThemeType(newMode));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { onClick, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_material2.Avatar,
+    {
+      sizes: "small",
+      sx: { fontSize: "1rem" },
+      style: {
+        width: "30px",
+        height: "30px",
+        minHeight: "30px",
+        cursor: "pointer"
+      },
+      className: "dash-icon-button-color dash-icon-button-bg",
+      children: darkMode ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons_material.LightMode, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons_material.DarkMode, {})
+    }
+  ) });
+};
+
+// src/components/DefaultFallbacks.tsx
+var import_react5 = __toESM(require("react"), 1);
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var defaultContainerStyle = {
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  minHeight: "100vh",
+  gap: "16px",
+  color: "var(--text-color, #333)",
+  backgroundColor: "var(--background-color, #fff)"
+};
+var defaultErrorMessageStyle = {
+  margin: 0,
+  fontSize: "1.25rem",
+  fontWeight: 500,
+  color: "#f44336"
+};
+var defaultButtonStyle = {
+  marginTop: "16px",
+  padding: "8px 16px",
+  backgroundColor: "#1976d2",
+  color: "white",
+  border: "none",
+  borderRadius: "4px",
+  cursor: "pointer",
+  fontSize: "14px",
+  fontWeight: 500
+};
+var DefaultInitializationErrorFallback = ({
+  error,
+  message = "Failed to initialize application",
+  onRetry = () => window.location.reload(),
+  retryLabel = "Retry",
+  containerStyle,
+  messageStyle,
+  buttonStyle
+}) => {
+  const errorMessage = error instanceof Error ? error.message : error || message;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: __spreadValues(__spreadValues({}, defaultContainerStyle), containerStyle), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h6", { style: __spreadValues(__spreadValues({}, defaultErrorMessageStyle), messageStyle), children: errorMessage }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        onClick: onRetry,
+        style: __spreadValues(__spreadValues({}, defaultButtonStyle), buttonStyle),
+        children: retryLabel
+      }
+    )
+  ] });
+};
+var DefaultAppLoadErrorFallback = ({
+  message = "Failed to load application",
+  onRetry = () => window.location.reload(),
+  retryLabel = "Retry",
+  containerStyle,
+  messageStyle,
+  buttonStyle
+}) => {
+  const appLoadContainerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100vh",
+    color: "#000000",
+    gap: "12px"
+  };
+  const appLoadButtonStyle = {
+    padding: "8px 24px",
+    backgroundColor: "#57005aff",
+    color: "#fff",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: __spreadValues(__spreadValues({}, appLoadContainerStyle), containerStyle), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h1", { style: messageStyle, children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        onClick: onRetry,
+        style: __spreadValues(__spreadValues({}, appLoadButtonStyle), buttonStyle),
+        children: retryLabel
+      }
+    )
+  ] });
+};
+var createLazyAppLoader = ({
+  importFn,
+  delay = 100,
+  ErrorFallback: ErrorFallback2 = DefaultAppLoadErrorFallback,
+  errorMessage = "Failed to load application"
+}) => {
+  return import_react5.default.lazy(() => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        importFn().then((mod) => {
+          resolve({ default: mod.default });
+        }).catch((error) => {
+          console.error("Failed to load application:", error);
+          resolve({
+            default: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              ErrorFallback2,
+              {
+                error,
+                message: errorMessage
+              }
+            )
+          });
+        });
+      }, delay);
+    });
+  });
+};
+
 // src/utils/DashBootstrapUtils.ts
 var import_react6 = require("react");
-var import_react_redux = require("react-redux");
+var import_react_redux2 = require("react-redux");
 var import_dash_auth = require("dash-auth");
-var import_dash_admin_state = require("dash-admin-state");
+var import_dash_admin_state2 = require("dash-admin-state");
 var import_Auth = require("dash-admin-state/src/redux/reducers/Auth");
 var import_DASHAuthenticationService = __toESM(require("dash-admin/src/contexts/auth/DASHAuthenticationService"), 1);
 var import_dash_utils2 = require("dash-utils");
 var useInitializeReduxFromPersisted = (currentAuthState) => {
-  const dispatch = (0, import_react_redux.useDispatch)();
+  const dispatch = (0, import_react_redux2.useDispatch)();
   (0, import_react6.useEffect)(() => {
     const initializeReduxFromPersisted = () => {
       console.log("\u{1F50D} Bootstrap: Checking for persisted auth data...");
@@ -883,7 +935,7 @@ var useInitializeReduxFromPersisted = (currentAuthState) => {
           }
         }
         dispatch(
-          import_dash_admin_state.DASH_REDUX_ACTIONS.updateAuth(import_Auth.ACTION_UPDATE_AUTH, {
+          import_dash_admin_state2.DASH_REDUX_ACTIONS.updateAuth(import_Auth.ACTION_UPDATE_AUTH, {
             user: userObject,
             authenticated: true,
             auth: (persistedAuth == null ? void 0 : persistedAuth.auth) || null
@@ -896,12 +948,12 @@ var useInitializeReduxFromPersisted = (currentAuthState) => {
   }, [dispatch, currentAuthState]);
 };
 var useLogoutEventListener = () => {
-  const dispatch = (0, import_react_redux.useDispatch)();
+  const dispatch = (0, import_react_redux2.useDispatch)();
   (0, import_react6.useEffect)(() => {
     const handleLogoutEvent = (event) => {
       console.log("\u{1F510} Bootstrap: Received logout event", event.detail);
       dispatch(
-        import_dash_admin_state.DASH_REDUX_ACTIONS.updateAuth(import_Auth.ACTION_UPDATE_AUTH, {
+        import_dash_admin_state2.DASH_REDUX_ACTIONS.updateAuth(import_Auth.ACTION_UPDATE_AUTH, {
           user: null,
           authenticated: false,
           auth: null
@@ -919,7 +971,7 @@ var useLogoutEventListener = () => {
 var useAppInitialization = () => {
   const [isLoading, setIsLoading] = (0, import_react6.useState)(true);
   const [initializationError, setInitializationError] = (0, import_react6.useState)(null);
-  const dispatch = (0, import_react_redux.useDispatch)();
+  const dispatch = (0, import_react_redux2.useDispatch)();
   (0, import_react6.useEffect)(() => {
     const initializeApp = () => __async(null, null, function* () {
       var _a, _b;
@@ -931,7 +983,7 @@ var useAppInitialization = () => {
         if (initResult.success) {
           console.log("\u2705 Bootstrap: Auto-login successful");
           dispatch(
-            import_dash_admin_state.DASH_REDUX_ACTIONS.updateAuth(import_Auth.ACTION_UPDATE_AUTH, {
+            import_dash_admin_state2.DASH_REDUX_ACTIONS.updateAuth(import_Auth.ACTION_UPDATE_AUTH, {
               user: initResult.user,
               authenticated: true,
               auth: initResult.auth || null
@@ -957,7 +1009,7 @@ var useAppInitialization = () => {
               if (tokenInitResult.success) {
                 console.log("\u2705 Bootstrap: Token initialization successful");
                 dispatch(
-                  import_dash_admin_state.DASH_REDUX_ACTIONS.updateAuth(import_Auth.ACTION_UPDATE_AUTH, {
+                  import_dash_admin_state2.DASH_REDUX_ACTIONS.updateAuth(import_Auth.ACTION_UPDATE_AUTH, {
                     user: tokenInitResult.user,
                     authenticated: true,
                     auth: tokenInitResult.auth || null
@@ -1015,7 +1067,7 @@ var usePendingRedirect = () => {
 };
 var LOCALE_CHANGE_EVENT2 = "dash:locale-change";
 var useUrlLocaleDetection = (availableLocales = ["es", "en"], defaultLocale = "es") => {
-  const dispatch = (0, import_react_redux.useDispatch)();
+  const dispatch = (0, import_react_redux2.useDispatch)();
   (0, import_react6.useEffect)(() => {
     if (typeof window === "undefined") return;
     const searchParams = new URLSearchParams(window.location.search);
@@ -1035,7 +1087,7 @@ var useUrlLocaleDetection = (availableLocales = ["es", "en"], defaultLocale = "e
       console.log(`\u{1F310} Bootstrap: Initializing locale from storage: ${targetLocale}`);
     }
     console.log(`\u{1F310} Bootstrap: Dispatching locale to Redux: ${targetLocale}`);
-    dispatch(import_dash_admin_state.DASH_REDUX_ACTIONS.switchLanguage(targetLocale));
+    dispatch(import_dash_admin_state2.DASH_REDUX_ACTIONS.switchLanguage(targetLocale));
     console.log(`\u{1F310} Bootstrap: Emitting locale change event: ${targetLocale}`);
     window.dispatchEvent(new CustomEvent(LOCALE_CHANGE_EVENT2, {
       detail: { locale: targetLocale }
@@ -1197,6 +1249,7 @@ var createDefaultPanelSettings = (options = {}) => {
   AppWrapperLight,
   CustomErrorBoundary,
   DEFAULT_LAYOUT_DIMENSIONS,
+  DarkToggleModeLight,
   DashThemeContext,
   DashThemeProviderLight,
   DefaultAppLoadErrorFallback,
@@ -1216,6 +1269,7 @@ var createDefaultPanelSettings = (options = {}) => {
   injectCriticalStyles,
   isElectron,
   setElectronStoreValue,
+  setGlobalLoaderIcon,
   syncElectronStore,
   syncElectronStoreToLocalStorage,
   useAppInitialization,

package/dist/index.js

@@ -227,25 +227,27 @@ var useTranslateLight = () => {
 
 // src/components/GlobalSmallLoader.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var loaderSvgMarkup = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32px" height="32px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 16 16"><g><path style="opacity:1" fill="#FFFFFF" d="M11.506 12.388q0.306 0.011 0.617 0.008v1.281h-0.89a2 2 0 0 1 -0.898 -0.215 1.24 1.24 0 0 1 -0.629 -0.761 2.5 2.5 0 0 1 -0.094 -0.554q-0.006 -1.082 -0.004 -2.163h-0.609q0.002 -0.398 -0.004 -0.796a616 616 0 0 0 -1.676 2.023 657 657 0 0 0 2.069 2.46q-0.935 0.012 -1.874 0.008L6.003 11.61q-0.006 1.035 -0.004 2.069H4.485q0.004 -2.983 -0.008 -5.966 -0.661 -0.21 -0.863 -0.875a2 2 0 0 1 -0.039 -0.258q-0.008 -2.108 0 -4.217 0.12 -0.356 0.48 -0.246 0.153 0.079 0.191 0.246l0.008 3.272q0.05 0.116 0.168 0.066 0.035 -0.027 0.051 -0.066l0.008 -3.264q0.095 -0.329 0.433 -0.269 0.191 0.059 0.238 0.254l0.008 3.272q0.065 0.14 0.195 0.055l0.023 -0.039 0.008 -3.264q0.086 -0.321 0.418 -0.285 0.197 0.057 0.254 0.254a352 352 0 0 1 0.016 3.295q0.062 0.109 0.176 0.051 0.029 -0.028 0.043 -0.066l0.008 -3.28q0.045 -0.17 0.207 -0.238 0.25 -0.074 0.41 0.129a0.5 0.5 0 0 1 0.047 0.109q0.014 1.063 0.012 2.128 0.002 1.088 -0.012 2.175 -0.137 0.844 -0.96 1.078a301 301 0 0 0 0 3.006q0.753 -1.005 1.503 -2.011 1.05 -0.006 2.101 -0.004 0.002 -0.519 -0.004 -1.039a1.82 1.82 0 0 1 -1.281 -1.101q-0.197 -0.504 -0.211 -1.046a4.7 4.7 0 0 1 0.383 -2.03q0.242 -0.547 0.668 -0.964 0.395 -0.364 0.929 -0.445 0.695 -0.056 1.218 0.398 0.476 0.438 0.73 1.035 0.513 1.212 0.32 2.514a2.26 2.26 0 0 1 -0.484 1.07 1.75 1.75 0 0 1 -0.754 0.5v1.109h0.992v1.265h-0.992q-0.002 1.042 0.004 2.085 0.05 0.323 0.379 0.32"/></g></svg>`;
-var KTIcon = () => /* @__PURE__ */ jsx2("span", { dangerouslySetInnerHTML: { __html: loaderSvgMarkup } });
+var DEFAULT_LOADER_ICON_MARKUP = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="1" y="1" width="14" height="14" rx="2" fill="currentColor"/></svg>`;
+var loaderIconMarkup = DEFAULT_LOADER_ICON_MARKUP;
+var setGlobalLoaderIcon = (svgMarkup) => {
+  loaderIconMarkup = svgMarkup;
+};
+var LoaderIcon = () => /* @__PURE__ */ jsx2("span", { dangerouslySetInnerHTML: { __html: loaderIconMarkup } });
 var GlobalSmallLoader = ({
   message,
   showMessage = false
-}) => /* @__PURE__ */ jsxs("div", { children: [
-  /* @__PURE__ */ jsxs("div", { className: "initial-loader", children: [
-    /* @__PURE__ */ jsx2("div", { className: "initial-loader-spinner" }),
-    /* @__PURE__ */ jsx2("span", { className: "initial-loader-icon", children: /* @__PURE__ */ jsx2(KTIcon, {}) })
-  ] }),
-  showMessage && message && /* @__PURE__ */ jsx2("div", { className: "initial-loader-text", children: message })
-] });
-var GlobalLoaderHtmlMarkup = `<div class="initial-loader">
+}) => {
+  injectCriticalStyles();
+  return /* @__PURE__ */ jsxs("div", { className: "initial-loader", children: [
+    /* @__PURE__ */ jsx2("div", { className: "initial-loader-spinner", children: /* @__PURE__ */ jsx2("span", { className: "initial-loader-icon", children: /* @__PURE__ */ jsx2(LoaderIcon, {}) }) }),
+    showMessage && message && /* @__PURE__ */ jsx2("div", { className: "initial-loader-text", children: message })
+  ] });
+};
+var GlobalLoaderHtmlMarkup = (message = "") => `<div class="initial-loader">
     <div class="initial-loader-spinner">
-        <span class="initial-loader-icon">
-        ${loaderSvgMarkup}
-        </span>
+        <span class="initial-loader-icon">${loaderIconMarkup}</span>
     </div>
-    <div class="initial-loader-text"></div>
+    ${message ? `<div class="initial-loader-text">${message}</div>` : ""}
 </div>`;
 var injectCriticalStyles = () => {
   if (typeof document === "undefined") return;
@@ -270,15 +272,23 @@ var injectCriticalStyles = () => {
         .initial-loader-spinner {
             width: 40px;
             height: 40px;
-            border: 3px solid rgba(255,255,255,0.1);
-            border-top-color: var(--primary-color, #3f51b5);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
             position: relative;
             display: flex;
             justify-content: center;
             align-items: center;
         }
+        /* The ring lives on a pseudo-element (not the container itself) so its
+           rotation never touches .initial-loader-icon \u2014 a real DOM child would
+           inherit a parent's animated transform and spin along with the ring. */
+        .initial-loader-spinner::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border: 3px solid var(--border-color, rgba(128,128,128,0.25));
+            border-top-color: var(--highlight-color, #49a000);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
         .initial-loader-icon {
             position: absolute;
             top: 50%;
@@ -467,129 +477,18 @@ var AppWrapperLight = ({
   ] });
 };
 
-// src/components/DefaultFallbacks.tsx
-import React4 from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var defaultContainerStyle = {
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  alignItems: "center",
-  minHeight: "100vh",
-  gap: "16px",
-  color: "var(--text-color, #333)",
-  backgroundColor: "var(--background-color, #fff)"
-};
-var defaultErrorMessageStyle = {
-  margin: 0,
-  fontSize: "1.25rem",
-  fontWeight: 500,
-  color: "#f44336"
-};
-var defaultButtonStyle = {
-  marginTop: "16px",
-  padding: "8px 16px",
-  backgroundColor: "#1976d2",
-  color: "white",
-  border: "none",
-  borderRadius: "4px",
-  cursor: "pointer",
-  fontSize: "14px",
-  fontWeight: 500
-};
-var DefaultInitializationErrorFallback = ({
-  error,
-  message = "Failed to initialize application",
-  onRetry = () => window.location.reload(),
-  retryLabel = "Retry",
-  containerStyle,
-  messageStyle,
-  buttonStyle
-}) => {
-  const errorMessage = error instanceof Error ? error.message : error || message;
-  return /* @__PURE__ */ jsxs4("div", { style: __spreadValues(__spreadValues({}, defaultContainerStyle), containerStyle), children: [
-    /* @__PURE__ */ jsx5("h6", { style: __spreadValues(__spreadValues({}, defaultErrorMessageStyle), messageStyle), children: errorMessage }),
-    /* @__PURE__ */ jsx5(
-      "button",
-      {
-        onClick: onRetry,
-        style: __spreadValues(__spreadValues({}, defaultButtonStyle), buttonStyle),
-        children: retryLabel
-      }
-    )
-  ] });
-};
-var DefaultAppLoadErrorFallback = ({
-  message = "Failed to load application",
-  onRetry = () => window.location.reload(),
-  retryLabel = "Retry",
-  containerStyle,
-  messageStyle,
-  buttonStyle
-}) => {
-  const appLoadContainerStyle = {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    height: "100vh",
-    color: "#000000",
-    gap: "12px"
-  };
-  const appLoadButtonStyle = {
-    padding: "8px 24px",
-    backgroundColor: "#57005aff",
-    color: "#fff",
-    border: "none",
-    borderRadius: "4px",
-    cursor: "pointer"
-  };
-  return /* @__PURE__ */ jsxs4("div", { style: __spreadValues(__spreadValues({}, appLoadContainerStyle), containerStyle), children: [
-    /* @__PURE__ */ jsx5("h1", { style: messageStyle, children: message }),
-    /* @__PURE__ */ jsx5(
-      "button",
-      {
-        onClick: onRetry,
-        style: __spreadValues(__spreadValues({}, appLoadButtonStyle), buttonStyle),
-        children: retryLabel
-      }
-    )
-  ] });
-};
-var createLazyAppLoader = ({
-  importFn,
-  delay = 100,
-  ErrorFallback: ErrorFallback2 = DefaultAppLoadErrorFallback,
-  errorMessage = "Failed to load application"
-}) => {
-  return React4.lazy(() => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        importFn().then((mod) => {
-          resolve({ default: mod.default });
-        }).catch((error) => {
-          console.error("Failed to load application:", error);
-          resolve({
-            default: () => /* @__PURE__ */ jsx5(
-              ErrorFallback2,
-              {
-                error,
-                message: errorMessage
-              }
-            )
-          });
-        });
-      }, delay);
-    });
-  });
-};
+// src/components/DarkToggleModeLight.tsx
+import { useDispatch } from "react-redux";
+import { LightMode, DarkMode } from "@mui/icons-material";
+import { DASH_REDUX_ACTIONS } from "dash-admin-state";
+import { Avatar } from "@mui/material";
 
 // src/theme/DashThemeProviderLight.tsx
 import { createContext as createContext2, useContext as useContext2, useState as useState3, useEffect as useEffect2, useMemo as useMemo2 } from "react";
 import CssBaseline from "@mui/material/CssBaseline";
 import { createTheme, ThemeProvider } from "@mui/material";
 import { updateDomCssVariables } from "dash-utils";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var getCssVariableNumber = (varName, defaultValue) => {
   if (typeof document === "undefined") return defaultValue;
   const value = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
@@ -641,8 +540,14 @@ var createMinimalTheme = (mode, extendedOptions) => {
     palette: {
       mode,
       primary: {
-        main: colors.primaryColor,
-        contrastText: colors.primaryContrast
+        main: colors.primaryColor
+        // No explicit contrastText: MUI's palette augmentation derives it via
+        // getContrastText(main) (picks black/white text by contrast ratio) when
+        // omitted. Trusting --primary-contrast here caused illegible button text
+        // whenever an app picked a --primary-contrast too close in tone to
+        // --primary-color (e.g. vanexa-system's near-identical blues, 2026-08-03) —
+        // --primary-contrast is also used standalone as a gradient stop elsewhere,
+        // so it was never guaranteed to double as a legible foreground color.
       },
       secondary: {
         main: colors.secondaryColor
@@ -770,22 +675,167 @@ var DashThemeProviderLight = ({
     }),
     [theme, currentMode]
   );
-  return /* @__PURE__ */ jsxs5(ThemeProvider, { theme, children: [
-    /* @__PURE__ */ jsx6(CssBaseline, {}),
-    /* @__PURE__ */ jsx6(DashThemeContext.Provider, { value: contextValue, children })
+  return /* @__PURE__ */ jsxs4(ThemeProvider, { theme, children: [
+    /* @__PURE__ */ jsx5(CssBaseline, {}),
+    /* @__PURE__ */ jsx5(DashThemeContext.Provider, { value: contextValue, children })
   ] });
 };
 
+// src/components/DarkToggleModeLight.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var DarkToggleModeLight = () => {
+  const { currentMode, setMode } = useDashThemeContextLight();
+  const dispatch = useDispatch();
+  const darkMode = currentMode === "dark";
+  const onClick = () => {
+    const newMode = darkMode ? "light" : "dark";
+    setMode(newMode);
+    dispatch(DASH_REDUX_ACTIONS.toggleThemeType(newMode));
+  };
+  return /* @__PURE__ */ jsx6("div", { onClick, children: /* @__PURE__ */ jsx6(
+    Avatar,
+    {
+      sizes: "small",
+      sx: { fontSize: "1rem" },
+      style: {
+        width: "30px",
+        height: "30px",
+        minHeight: "30px",
+        cursor: "pointer"
+      },
+      className: "dash-icon-button-color dash-icon-button-bg",
+      children: darkMode ? /* @__PURE__ */ jsx6(LightMode, {}) : /* @__PURE__ */ jsx6(DarkMode, {})
+    }
+  ) });
+};
+
+// src/components/DefaultFallbacks.tsx
+import React5 from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var defaultContainerStyle = {
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  minHeight: "100vh",
+  gap: "16px",
+  color: "var(--text-color, #333)",
+  backgroundColor: "var(--background-color, #fff)"
+};
+var defaultErrorMessageStyle = {
+  margin: 0,
+  fontSize: "1.25rem",
+  fontWeight: 500,
+  color: "#f44336"
+};
+var defaultButtonStyle = {
+  marginTop: "16px",
+  padding: "8px 16px",
+  backgroundColor: "#1976d2",
+  color: "white",
+  border: "none",
+  borderRadius: "4px",
+  cursor: "pointer",
+  fontSize: "14px",
+  fontWeight: 500
+};
+var DefaultInitializationErrorFallback = ({
+  error,
+  message = "Failed to initialize application",
+  onRetry = () => window.location.reload(),
+  retryLabel = "Retry",
+  containerStyle,
+  messageStyle,
+  buttonStyle
+}) => {
+  const errorMessage = error instanceof Error ? error.message : error || message;
+  return /* @__PURE__ */ jsxs5("div", { style: __spreadValues(__spreadValues({}, defaultContainerStyle), containerStyle), children: [
+    /* @__PURE__ */ jsx7("h6", { style: __spreadValues(__spreadValues({}, defaultErrorMessageStyle), messageStyle), children: errorMessage }),
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        onClick: onRetry,
+        style: __spreadValues(__spreadValues({}, defaultButtonStyle), buttonStyle),
+        children: retryLabel
+      }
+    )
+  ] });
+};
+var DefaultAppLoadErrorFallback = ({
+  message = "Failed to load application",
+  onRetry = () => window.location.reload(),
+  retryLabel = "Retry",
+  containerStyle,
+  messageStyle,
+  buttonStyle
+}) => {
+  const appLoadContainerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100vh",
+    color: "#000000",
+    gap: "12px"
+  };
+  const appLoadButtonStyle = {
+    padding: "8px 24px",
+    backgroundColor: "#57005aff",
+    color: "#fff",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer"
+  };
+  return /* @__PURE__ */ jsxs5("div", { style: __spreadValues(__spreadValues({}, appLoadContainerStyle), containerStyle), children: [
+    /* @__PURE__ */ jsx7("h1", { style: messageStyle, children: message }),
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        onClick: onRetry,
+        style: __spreadValues(__spreadValues({}, appLoadButtonStyle), buttonStyle),
+        children: retryLabel
+      }
+    )
+  ] });
+};
+var createLazyAppLoader = ({
+  importFn,
+  delay = 100,
+  ErrorFallback: ErrorFallback2 = DefaultAppLoadErrorFallback,
+  errorMessage = "Failed to load application"
+}) => {
+  return React5.lazy(() => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        importFn().then((mod) => {
+          resolve({ default: mod.default });
+        }).catch((error) => {
+          console.error("Failed to load application:", error);
+          resolve({
+            default: () => /* @__PURE__ */ jsx7(
+              ErrorFallback2,
+              {
+                error,
+                message: errorMessage
+              }
+            )
+          });
+        });
+      }, delay);
+    });
+  });
+};
+
 // src/utils/DashBootstrapUtils.ts
 import { useEffect as useEffect3, useState as useState4 } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch as useDispatch2 } from "react-redux";
 import { AuthPersistenceService, syncDeviceStoreToLocalStorage, syncLocalStorageToDeviceStore } from "dash-auth";
-import { DASH_REDUX_ACTIONS } from "dash-admin-state";
+import { DASH_REDUX_ACTIONS as DASH_REDUX_ACTIONS2 } from "dash-admin-state";
 import { ACTION_UPDATE_AUTH } from "dash-admin-state/src/redux/reducers/Auth";
 import DASHAuthenticationService from "dash-admin/src/contexts/auth/DASHAuthenticationService";
 import { dashStorage, updateDomCssVariables as updateDomCssVariables2 } from "dash-utils";
 var useInitializeReduxFromPersisted = (currentAuthState) => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch2();
   useEffect3(() => {
     const initializeReduxFromPersisted = () => {
       console.log("\u{1F50D} Bootstrap: Checking for persisted auth data...");
@@ -814,7 +864,7 @@ var useInitializeReduxFromPersisted = (currentAuthState) => {
           }
         }
         dispatch(
-          DASH_REDUX_ACTIONS.updateAuth(ACTION_UPDATE_AUTH, {
+          DASH_REDUX_ACTIONS2.updateAuth(ACTION_UPDATE_AUTH, {
             user: userObject,
             authenticated: true,
             auth: (persistedAuth == null ? void 0 : persistedAuth.auth) || null
@@ -827,12 +877,12 @@ var useInitializeReduxFromPersisted = (currentAuthState) => {
   }, [dispatch, currentAuthState]);
 };
 var useLogoutEventListener = () => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch2();
   useEffect3(() => {
     const handleLogoutEvent = (event) => {
       console.log("\u{1F510} Bootstrap: Received logout event", event.detail);
       dispatch(
-        DASH_REDUX_ACTIONS.updateAuth(ACTION_UPDATE_AUTH, {
+        DASH_REDUX_ACTIONS2.updateAuth(ACTION_UPDATE_AUTH, {
           user: null,
           authenticated: false,
           auth: null
@@ -850,7 +900,7 @@ var useLogoutEventListener = () => {
 var useAppInitialization = () => {
   const [isLoading, setIsLoading] = useState4(true);
   const [initializationError, setInitializationError] = useState4(null);
-  const dispatch = useDispatch();
+  const dispatch = useDispatch2();
   useEffect3(() => {
     const initializeApp = () => __async(null, null, function* () {
       var _a, _b;
@@ -862,7 +912,7 @@ var useAppInitialization = () => {
         if (initResult.success) {
           console.log("\u2705 Bootstrap: Auto-login successful");
           dispatch(
-            DASH_REDUX_ACTIONS.updateAuth(ACTION_UPDATE_AUTH, {
+            DASH_REDUX_ACTIONS2.updateAuth(ACTION_UPDATE_AUTH, {
               user: initResult.user,
               authenticated: true,
               auth: initResult.auth || null
@@ -888,7 +938,7 @@ var useAppInitialization = () => {
               if (tokenInitResult.success) {
                 console.log("\u2705 Bootstrap: Token initialization successful");
                 dispatch(
-                  DASH_REDUX_ACTIONS.updateAuth(ACTION_UPDATE_AUTH, {
+                  DASH_REDUX_ACTIONS2.updateAuth(ACTION_UPDATE_AUTH, {
                     user: tokenInitResult.user,
                     authenticated: true,
                     auth: tokenInitResult.auth || null
@@ -946,7 +996,7 @@ var usePendingRedirect = () => {
 };
 var LOCALE_CHANGE_EVENT2 = "dash:locale-change";
 var useUrlLocaleDetection = (availableLocales = ["es", "en"], defaultLocale = "es") => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch2();
   useEffect3(() => {
     if (typeof window === "undefined") return;
     const searchParams = new URLSearchParams(window.location.search);
@@ -966,7 +1016,7 @@ var useUrlLocaleDetection = (availableLocales = ["es", "en"], defaultLocale = "e
       console.log(`\u{1F310} Bootstrap: Initializing locale from storage: ${targetLocale}`);
     }
     console.log(`\u{1F310} Bootstrap: Dispatching locale to Redux: ${targetLocale}`);
-    dispatch(DASH_REDUX_ACTIONS.switchLanguage(targetLocale));
+    dispatch(DASH_REDUX_ACTIONS2.switchLanguage(targetLocale));
     console.log(`\u{1F310} Bootstrap: Emitting locale change event: ${targetLocale}`);
     window.dispatchEvent(new CustomEvent(LOCALE_CHANGE_EVENT2, {
       detail: { locale: targetLocale }
@@ -1127,6 +1177,7 @@ export {
   AppWrapperLight,
   CustomErrorBoundary,
   DEFAULT_LAYOUT_DIMENSIONS,
+  DarkToggleModeLight,
   DashThemeContext,
   DashThemeProviderLight,
   DefaultAppLoadErrorFallback,
@@ -1146,6 +1197,7 @@ export {
   injectCriticalStyles,
   isElectron,
   setElectronStoreValue,
+  setGlobalLoaderIcon,
   syncElectronStore,
   syncElectronStoreToLocalStorage,
   useAppInitialization,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dashadmin/dash-boilerplate",
-	"version": "1.3.45",
+	"version": "1.3.46",
 	"main": "dist/index.cjs",
 	"type": "module",
 	"scripts": {
@@ -12,6 +12,7 @@
 	"dependencies": {
 		"@emotion/react": "latest",
 		"@emotion/styled": "latest",
+		"@mui/icons-material": "^7.3.10",
 		"@mui/material": "^7.3.10",
 		"@dashadmin/dash-admin": "workspace:*",
 		"@dashadmin/dash-admin-state": "workspace:*",