@dashadmin/dash-admin-state 1.3.25 → 1.3.26

package/dist/redux/reducers/Page.js

@@ -1 +1,30 @@
-const r="UPDATE_PAGE",a=(e={},t)=>t.type===r?{...e,...t.payload}:e;var p=a;export{r as ACTION_UPDATE_PAGE,p as default};
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const ACTION_UPDATE_PAGE = "UPDATE_PAGE";
+const PageReducer = (state = {}, action) => {
+  switch (action.type) {
+    case ACTION_UPDATE_PAGE:
+      return __spreadValues(__spreadValues({}, state), action.payload);
+    default:
+      return state;
+  }
+};
+var Page_default = PageReducer;
+export {
+  ACTION_UPDATE_PAGE,
+  Page_default as default
+};

package/dist/redux/reducers/Resources.js

@@ -1 +1,19 @@
-import{APPEND_RESOURCES as t,SET_RESOURCES as s}from"../actions/ActionTypes";const m=(r={items:[]},e)=>{switch(e.type){case s:return{items:[...e.payload]};case t:return{items:[...r.items,...e.payload]};default:return r}};var a=m;export{a as default};
+import { APPEND_RESOURCES, SET_RESOURCES } from "../actions/ActionTypes";
+const ResourcesReducer = (state = { items: [] }, action) => {
+  switch (action.type) {
+    case SET_RESOURCES:
+      return {
+        items: [...action.payload]
+      };
+    case APPEND_RESOURCES:
+      return {
+        items: [...state.items, ...action.payload]
+      };
+    default:
+      return state;
+  }
+};
+var Resources_default = ResourcesReducer;
+export {
+  Resources_default as default
+};

package/dist/redux/reducers/Settings.js

@@ -1 +1,79 @@
-import l from"../../DefaultThemeSettings";import{UPDATE_THEME_SETTINGS as T,SWITCH_LANGUAGE as t,SET_RESOURCES as u}from"../actions/ActionTypes";const o=(e={loading:!1,navStyle:void 0,layoutType:"",themeType:void 0,themeColor:"",isDirectionRTL:!1,locale:{languageId:"",locale:"",name:"",icon:""}},r)=>{switch(r.type){case u:return{...e,resources:r.payload};case l.THEME_TYPE:return{...e,themeType:r.themeType};case l.THEME_COLOR:return{...e,themeColor:r.themeColor};case l.UPDATE_RTL_STATUS:return{...e,isDirectionRTL:r.rtlStatus};case T:return{...e,...r.payload};case l.NAV_STYLE:return{...e,navStyle:r.navStyle};case l.LAYOUT_TYPE:return{...e,layoutType:r.layoutType};case t:return{...e,locale:r.payload};default:return e}};var E=o;export{E as default};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import DefaultThemeSettings from "../../DefaultThemeSettings";
+import {
+  UPDATE_THEME_SETTINGS,
+  SWITCH_LANGUAGE,
+  SET_RESOURCES
+} from "../actions/ActionTypes";
+const SettingsReducer = (state = {
+  loading: false,
+  navStyle: void 0,
+  layoutType: "",
+  themeType: void 0,
+  themeColor: "",
+  isDirectionRTL: false,
+  /* @ts-ignore */
+  locale: {
+    languageId: "",
+    locale: "",
+    name: "",
+    icon: ""
+  }
+}, action) => {
+  switch (action.type) {
+    case SET_RESOURCES:
+      return __spreadProps(__spreadValues({}, state), {
+        resources: action.payload
+      });
+    case DefaultThemeSettings.THEME_TYPE:
+      return __spreadProps(__spreadValues({}, state), {
+        themeType: action.themeType
+      });
+    case DefaultThemeSettings.THEME_COLOR:
+      return __spreadProps(__spreadValues({}, state), {
+        themeColor: action.themeColor
+      });
+    case DefaultThemeSettings.UPDATE_RTL_STATUS:
+      return __spreadProps(__spreadValues({}, state), {
+        isDirectionRTL: action.rtlStatus
+      });
+    case UPDATE_THEME_SETTINGS:
+      return __spreadValues(__spreadValues({}, state), action.payload);
+    case DefaultThemeSettings.NAV_STYLE:
+      return __spreadProps(__spreadValues({}, state), {
+        navStyle: action.navStyle
+      });
+    case DefaultThemeSettings.LAYOUT_TYPE:
+      return __spreadProps(__spreadValues({}, state), {
+        layoutType: action.layoutType
+      });
+    case SWITCH_LANGUAGE:
+      return __spreadProps(__spreadValues({}, state), {
+        locale: action.payload
+      });
+    default:
+      return state;
+  }
+};
+var Settings_default = SettingsReducer;
+export {
+  Settings_default as default
+};

package/dist/redux/reducers/index.js

@@ -1 +1,25 @@
-import{combineReducers as e}from"redux";import o from"./Settings";import r from"./Auth";import m from"./Common";import t from"./Page";import c from"./Resources";import u from"./FormData";import p from"./Menu";import a from"./ComponentData";const i=()=>e({page:t,settings:o,auth:r,common:m,resources:c,formData:u,menu:p,componentData:a});var C=i;export{i as createRootReducer,C as default};
+import { combineReducers } from "redux";
+import SettingsReducer from "./Settings";
+import AuthReducer from "./Auth";
+import CommonReducer from "./Common";
+import PageReducer from "./Page";
+import ResourcesReducer from "./Resources";
+import FormDataReducer from "./FormData";
+import MenuReducer from "./Menu";
+import ComponentDataReducer from "./ComponentData";
+const createRootReducer = () => combineReducers({
+  //router: connectRouter(history),
+  page: PageReducer,
+  settings: SettingsReducer,
+  auth: AuthReducer,
+  common: CommonReducer,
+  resources: ResourcesReducer,
+  formData: FormDataReducer,
+  menu: MenuReducer,
+  componentData: ComponentDataReducer
+});
+var reducers_default = createRootReducer;
+export {
+  createRootReducer,
+  reducers_default as default
+};

package/dist/redux/sagas/index.js

@@ -1 +1,9 @@
-import{all as t}from"redux-saga/effects";function*o(a){yield t([])}export{o as default};
+import { all } from "redux-saga/effects";
+function* rootSaga(getState) {
+  yield all([
+    //authSagas(),
+  ]);
+}
+export {
+  rootSaga as default
+};

package/dist/redux/store/index.js

@@ -1 +1,35 @@
-import m from"redux-saga";import{applyMiddleware as i,compose as c}from"redux";import{routerMiddleware as r}from"connected-react-router";import s from"../sagas/index";import d from"../reducers";import{createBrowserHistory as p}from"history";import{legacy_createStore as n}from"redux";import{thunk as f}from"redux-thunk";const o=p(),l=r(o),e=m(),u=[f,e,l],w=t=>{const a=n(d(),t,c(i(r(o),...u)));return e.run(s,{}),a};var B=w;export{w as configureStore,B as default,o as history};
+import createSagaMiddleware from "redux-saga";
+import { applyMiddleware, compose } from "redux";
+import { routerMiddleware } from "connected-react-router";
+import rootSaga from "../sagas/index";
+import createRootReducer from "../reducers";
+import { createBrowserHistory } from "history";
+import { legacy_createStore as createStore } from "redux";
+import { thunk } from "redux-thunk";
+const history = createBrowserHistory();
+const routeMiddleware = routerMiddleware(history);
+const sagaMiddleware = createSagaMiddleware();
+const middlewares = [thunk, sagaMiddleware, routeMiddleware];
+const configureStore = (preloadedState) => {
+  const store = createStore(
+    createRootReducer(
+      /*history*/
+    ),
+    // root reducer with router state
+    preloadedState,
+    compose(
+      applyMiddleware(
+        routerMiddleware(history),
+        ...middlewares
+      )
+    )
+  );
+  sagaMiddleware.run(rootSaga, {});
+  return store;
+};
+var store_default = configureStore;
+export {
+  configureStore,
+  store_default as default,
+  history
+};

package/package.json

@@ -1,58 +1,76 @@
 {
-  "name": "@dashadmin/dash-admin-state",
-  "version": "1.3.25",
-  "private": false,
-  "license": "MIT",
-  "main": "dist/index.js",
-  "devDependencies": {
-    "@commitlint/cli": "latest",
-    "@commitlint/config-conventional": "latest",
-    "@types/jest": "latest",
-    "@types/node": "latest",
-    "@types/react": "latest",
-    "@types/react-dom": "latest",
-    "@typescript-eslint/eslint-plugin": "latest",
-    "@typescript-eslint/parser": "latest",
-    "eslint-config-airbnb-typescript": "latest",
-    "eslint-config-prettier": "latest",
-    "eslint-plugin-html": "latest",
-    "eslint-plugin-import": "latest",
-    "eslint-plugin-jsdoc": "latest",
-    "eslint-plugin-json": "latest",
-    "eslint-plugin-prettier": "latest",
-    "ts-jest": "latest",
-    "ts-loader": "latest",
-    "tsconfig-paths": "latest",
-    "typescript": "latest",
-    "vite": "^5.2.0",
-    "rollup": "^4.0.0"
-  },
-  "dependencies": {
-    "connected-react-router": "latest",
-    "history": "latest",
-    "react-redux": "latest",
-    "redux-saga": "latest",
-    "redux-thunk": "^3.1.0",
-    "@dashadmin/dash-auto-admin": "1.3.25",
-    "@dashadmin/dash-constants": "1.3.25",
-    "@dashadmin/dash-utils": "1.3.25"
-  },
-  "publishConfig": {
-    "name": "@dashadmin/dash-admin-state",
-    "access": "public"
-  },
-  "files": [
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "import": "./dist/index.js"
-    },
-    "./src/*": {
-      "import": "./dist/*.js"
-    }
-  },
-  "scripts": {
-    "build": "rm -rf dist && node ../dash-build/compile.mjs && vite build"
-  }
-}
+	"name": "@dashadmin/dash-admin-state",
+	"version": "1.3.26",
+	"license": "MIT",
+	"main": "dist/index.js",
+	"devDependencies": {
+		"@commitlint/cli": "latest",
+		"@commitlint/config-conventional": "latest",
+		"@types/jest": "latest",
+		"@types/node": "latest",
+		"@types/react": "latest",
+		"@types/react-dom": "latest",
+		"@typescript-eslint/eslint-plugin": "latest",
+		"@typescript-eslint/parser": "latest",
+		"eslint-config-airbnb-typescript": "latest",
+		"eslint-config-prettier": "latest",
+		"eslint-plugin-html": "latest",
+		"eslint-plugin-import": "latest",
+		"eslint-plugin-jsdoc": "latest",
+		"eslint-plugin-json": "latest",
+		"eslint-plugin-prettier": "latest",
+		"ts-jest": "latest",
+		"ts-loader": "latest",
+		"tsconfig-paths": "latest",
+		"typescript": "latest"
+	},
+	"dependencies": {
+		"connected-react-router": "latest",
+		"history": "latest",
+		"react-redux": "latest",
+		"redux-saga": "latest",
+		"redux-thunk": "^3.1.0",
+		"@dashadmin/dash-auto-admin": "workspace:*",
+		"@dashadmin/dash-constants": "workspace:*",
+		"@dashadmin/dash-utils": "workspace:*"
+	},
+	"module": "dist/index.js",
+	"types": "./src/index.tsx",
+	"exports": {
+		".": "./dist/index.js",
+		"./redux/actions": "./dist/redux/actions/index.js",
+		"./src/redux/actions": "./dist/redux/actions/index.js",
+		"./redux/reducers": "./dist/redux/reducers/index.js",
+		"./src/redux/reducers": "./dist/redux/reducers/index.js",
+		"./redux/sagas": "./dist/redux/sagas/index.js",
+		"./src/redux/sagas": "./dist/redux/sagas/index.js",
+		"./redux/store": "./dist/redux/store/index.js",
+		"./src/redux/store": "./dist/redux/store/index.js",
+		"./*": "./dist/*.js",
+		"./src/*": "./dist/*.js"
+	},
+	"publishConfig": {
+		"access": "public",
+		"registry": "https://registry.npmjs.org"
+	},
+	"scripts": {
+		"build": "tsup"
+	},
+	"type": "module",
+	"files": [
+		"dist",
+		"src"
+	],
+	"typesVersions": {
+		"*": {
+			"src/*": [
+				"src/*",
+				"src/*/index"
+			],
+			"*": [
+				"src/*",
+				"src/*/index"
+			]
+		}
+	}
+}

package/src/DefaultThemeSettings.tsx

@@ -0,0 +1,33 @@
+class DefaultThemeSettings {
+
+	static TAB_SIZE = 992;
+	static MOBILE_SIZE = 575;
+	static THEME_TYPE = 'THEME_TYPE';
+	static THEME_TYPE_LIGHT = 'light';
+	static THEME_TYPE_DARK = 'dark';
+	static THEME_TYPE_DASH_DEFAULT = 'light';
+	static THEME_TYPE_SEMI_DARK = 'THEME_TYPE_SEMI_DARK';
+	static THEME_COLOR = 'THEME_COLOR';
+	static LAYOUT_TYPE = 'LAYOUT_TYPE';
+	static LAYOUT_TYPE_FRAMED = 'framed-layout';
+	static LAYOUT_TYPE_BOXED = 'boxed-layout';
+	static LAYOUT_TYPE_FULL = 'full-layout';
+	static NAV_STYLE = 'NAV_STYLE';
+	static NAV_STYLE_FIXED = 'NAV_STYLE_FIXED';
+	static NAV_STYLE_MINI_SIDEBAR = 'NAV_STYLE_MINI_SIDEBAR';
+	static NAV_STYLE_DRAWER = 'NAV_STYLE_DRAWER';
+	static NAV_STYLE_NO_HEADER_MINI_SIDEBAR = 'NAV_STYLE_NO_HEADER_MINI_SIDEBAR';
+	static NAV_STYLE_NO_HEADER_EXPANDED_SIDEBAR =
+		'NAV_STYLE_NO_HEADER_EXPANDED_SIDEBAR';
+	static NAV_STYLE_DEFAULT_HORIZONTAL = 'NAV_STYLE_DEFAULT_HORIZONTAL';
+	static NAV_STYLE_DARK_HORIZONTAL = 'NAV_STYLE_DARK_HORIZONTAL';
+	static NAV_STYLE_INSIDE_HEADER_HORIZONTAL =
+		'NAV_STYLE_INSIDE_HEADER_HORIZONTAL';
+	static NAV_STYLE_BELOW_HEADER = 'NAV_STYLE_BELOW_HEADER';
+	static NAV_STYLE_ABOVE_HEADER = 'NAV_STYLE_ABOVE_HEADER';
+	static NAV_STYLE_COLLAPSABLE = 'NAV_STYLE_COLLAPSABLE';
+    static UPDATE_RTL_STATUS = 'UPDATE_RTL_STATUS';
+
+}
+
+export default DefaultThemeSettings;

package/src/defaults/defaultAuth.tsx

@@ -0,0 +1,8 @@
+import IAuthState from "../redux/interfaces/IAuthState";
+
+const defaultAuth = {
+	authenticated: false,
+	user: null,
+	auth: null,
+};
+export default defaultAuth;

package/src/defaults/defaultCommon.tsx

@@ -0,0 +1,55 @@
+import ICommonState from "../redux/interfaces/ICommonState";
+
+/**
+ * Default Common State
+ * 
+ * Provides default values for common application state including
+ * layout, navigation, and panel settings. These can be overridden
+ * by the consuming application during store initialization.
+ */
+const defaultCommon: ICommonState = {
+  appPath: '/',
+  error: '',
+  loading: false,
+  message: '',
+  navExpanded: true,
+  width: typeof window !== 'undefined' ? window.innerWidth : 1920,
+  height: typeof window !== 'undefined' ? window.innerHeight : 1080,
+  content_width: null,
+  content_height: null,
+  pathname: '/',
+  componentsState: {},
+  headerToolBar: null,
+  headerToolBarReplace: false,
+  navSize: "small",
+  
+  // Panel settings with sidebar dimensions
+  // These values can be overridden by CSS variables at runtime
+  panelSettings: {
+    // Branding
+    appName: 'Dash App',
+    horizontalLogo: <>🖥</>,
+    squaredLogo: <>🖥</>,
+    loginBackground: undefined,
+    
+    // Sidebar dimensions (can be overridden via CSS variables)
+    sidebarLargeWidth: 255,
+    sidebarSmallWidth: 64,
+    sidebarHorizontalHeight: 120,
+    
+    // Logo dimensions
+    logoVerticalMaxWidth: 130,
+    logoVerticalMaxHeight: 130,
+    logoHorizontalMaxWidth: 200,
+    logoHorizontalMaxHeight: 60,
+    
+    // Content padding (derived from sidebar)
+    paddingHorizontal: 255,
+    paddingVertical: 120,
+    
+    // Position
+    sidebarPosition: 'left',
+  },
+};
+
+export default defaultCommon;

package/src/defaults/defaultFormState.tsx

@@ -0,0 +1,4 @@
+
+const defaultFormState = {};
+
+export default defaultFormState

package/src/defaults/defaultPage.tsx

@@ -0,0 +1,9 @@
+import IPageState from "../redux/interfaces/IPage";
+
+const defaultPageSettings: IPageState = {
+	title: '',
+	icon: null,
+	subTitle: '',
+};
+
+export default defaultPageSettings;

package/src/defaults/defaultSettings.tsx

@@ -0,0 +1,61 @@
+import ISettingsState from "../redux/interfaces/ISettings";
+import {DASHAdminSystemConstants} from 'dash-constants';
+
+/**
+ * Default Settings State
+ * 
+ * Provides default values for all settings. These can be overridden
+ * by the consuming application during store initialization.
+ */
+const defaultSettings: ISettingsState = {
+  // Loading state
+  loading: false,
+  
+  // Navigation and layout
+  navStyle: DASHAdminSystemConstants.panel.NAV_STYLE_FIXED,
+  layoutType: DASHAdminSystemConstants.panel.LAYOUT_TYPE_FULL,
+  themeType: DASHAdminSystemConstants.panel.THEME_TYPE_DARK,
+  themeColor: '',
+  isDirectionRTL: false,
+  
+  // Layout settings (dimensions, breakpoints, etc.)
+  layoutSettings: {
+    // Sidebar dimensions
+    sidebarLargeWidth: 255,
+    sidebarSmallWidth: 64,
+    sidebarHorizontalHeight: 120,
+    // Logo dimensions
+    logoVerticalMaxWidth: 130,
+    logoVerticalMaxHeight: 130,
+    logoHorizontalMaxWidth: 200,
+    logoHorizontalMaxHeight: 60,
+    // Content padding (based on sidebar)
+    paddingHorizontal: 255,
+    paddingVertical: 120,
+    // Breakpoints
+    mobileBreakpoint: 768,
+    tabletBreakpoint: 1024,
+  },
+  
+  // Localization
+  locale: 'es',
+  availableLocales: [
+    {
+      locale: 'es',
+      languageId: 'spanish',
+      name: 'Español',
+      icon: 'es',
+    },
+    {
+      locale: 'en',
+      languageId: 'english',
+      name: 'English',
+      icon: 'en',
+    },
+  ],
+  
+  // Translations (populated by i18n provider)
+  translations: {},
+};
+
+export default defaultSettings;

package/src/hooks/DashAdminStateSelectors.tsx

@@ -0,0 +1,142 @@
+import { useSelector } from 'react-redux';
+import { useMemo } from 'react';
+import { isEqual } from 'lodash';
+import { IDASHAppState } from '../';
+import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
+
+// Custom hook for layout-related state
+export const useLayoutState = <U, A>() => {
+  return useSelector(
+    (state: IDASHAppState<U, A, IDashAutoAdminResourceConfig>) => ({
+      navStyle: state.settings.navStyle,
+      layoutType: state.settings.layoutType,
+      themeType: state.settings.themeType,
+      layoutSettings: state.settings.layoutSettings,
+      navExpanded: state.common?.navExpanded ?? state.common?.navExpanded ?? true,
+      navSize: state.common.navSize,
+      panelSettings: state.common.panelSettings,
+    }),
+    isEqual
+  );
+};
+
+// Custom hook for authentication state
+export const useAuthState = <U, A>() => {
+  return useSelector(
+    (state: IDASHAppState<U, A, IDashAutoAdminResourceConfig>) => ({
+      authenticated: state.auth.authenticated,
+      user: state.auth.user,
+    }),
+    isEqual
+  );
+};
+
+// Custom hook for app settings
+export const useSettingsState = <U, A>() => {
+  return useSelector(
+    (state: IDASHAppState<U, A, IDashAutoAdminResourceConfig>) => ({
+      groupIcons: state.settings.groupIcons,
+      locale: state.settings.locale,
+      themeColor: state.settings.themeColor,
+      availableLocales: state.settings.availableLocales,
+      isDirectionRTL: state.settings.isDirectionRTL,
+    }),
+    isEqual
+  );
+};
+
+// Custom hook for common state
+export const useCommonState = <U, A>() => {
+  return useSelector(
+    (state: IDASHAppState<U, A, IDashAutoAdminResourceConfig>) => ({
+      appPath: state.common.appPath,
+      width: state.common.width,
+      height: state.common.height,
+      headerToolBar: state.common.headerToolBar,
+      panelSettings: state.common.panelSettings,
+    }),
+    isEqual
+  );
+};
+
+// Custom hook for page state
+export const usePageState = <U, A>() => {
+  return useSelector(
+    (state: IDASHAppState<U, A, IDashAutoAdminResourceConfig>) => ({
+      title: state.page.title,
+      icon: state.page.icon,
+      subTitle: state.page.subTitle,
+    }),
+    isEqual
+  );
+};
+
+// Custom hook for resources state
+export const useResourcesState = <U, A>() => {
+  return useSelector(
+    (state: IDASHAppState<U, A, IDashAutoAdminResourceConfig>) => ({
+      items: state.resources.items,
+    }),
+    isEqual
+  );
+};
+
+// Memoized hook for logo settings specifically
+export const useLogoSettings = <U, A>() => {
+  const { panelSettings } = useCommonState<U, A>();
+
+  return useMemo(() => ({
+    horizontalLogo: panelSettings?.horizontalLogo || <></>,
+    squaredLogo: panelSettings?.squaredLogo || <></>,
+    loginBackground: panelSettings?.loginBackground,
+  }), [panelSettings]);
+};
+
+// Memoized hook for sidebar/panel settings (dimensions, position, padding)
+export const usePanelSettings = <U, A>() => {
+  const { panelSettings } = useCommonState<U, A>();
+
+  return useMemo(() => ({
+    // Sidebar position: 'left' | 'right' | 'top' | 'bottom'
+    sidebarPosition: panelSettings?.sidebarPosition || 'left',
+    // Sidebar dimensions
+    sidebarLargeWidth: panelSettings?.sidebarLargeWidth || 255,
+    sidebarSmallWidth: panelSettings?.sidebarSmallWidth || 60,
+    sidebarHorizontalHeight: panelSettings?.sidebarHorizontalHeight || 120,
+    // Logo dimensions for vertical sidebar (left/right)
+    logoVerticalMaxWidth: panelSettings?.logoVerticalMaxWidth || 130,
+    logoVerticalMaxHeight: panelSettings?.logoVerticalMaxHeight || 130,
+    // Logo dimensions for horizontal sidebar (top/bottom)
+    logoHorizontalMaxWidth: panelSettings?.logoHorizontalMaxWidth || 200,
+    logoHorizontalMaxHeight: panelSettings?.logoHorizontalMaxHeight || 60,
+    // Padding configuration
+    paddingHorizontal: panelSettings?.paddingHorizontal || 255,
+    paddingVertical: panelSettings?.paddingVertical || 120,
+    // App name
+    appName: panelSettings?.appName || 'DASH',
+  }), [panelSettings]);
+};
+
+// Combined hook for theme-related state (optimized for DomainTheme)
+export const useThemeState = <U, A>() => {
+  const layoutState = useLayoutState<U, A>();
+  const logoSettings = useLogoSettings<U, A>();
+
+  return useMemo(() => ({
+    ...layoutState,
+    ...logoSettings,
+  }), [layoutState, logoSettings]);
+};
+
+// Hook for navigation state specifically
+export const useNavigationState = <U, A>() => {
+  return useSelector(
+    (state: IDASHAppState<U, A, IDashAutoAdminResourceConfig>) => ({
+      navExpanded: state.common?.navExpanded ?? state.common?.navExpanded ?? true,
+      navSize: state.common.navSize,
+      navStyle: state.settings.navStyle,
+      layoutSettings: state.settings.layoutSettings,
+    }),
+    isEqual
+  );
+};