@admin-layout/tailwind-design-pro 12.0.16-alpha.9 → 12.0.16-alpha.90

package/lib/components/SettingDrawer/{NavigationsModes.js → components/NavigationsModes.js}

@@ -1,4 +1,4 @@
-import {jsxs,jsx}from'react/jsx-runtime';import'react';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import {useMediaQuery}from'../../hooks/useMediaQuery.js';const navigationModes = [{
+import {jsxs,jsx}from'react/jsx-runtime';import {useMemo}from'react';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import {useMediaQuery}from'../../../hooks/useMediaQuery.js';import {getSettingValue}from'../../../utils/settingsUtils.js';const navigationModes = [{
   key: 'sidebar',
   title: 'Sidebar',
   svg: jsxs("svg", {
@@ -183,55 +183,106 @@ const menuTypes = [{
     })]
   })
 }, {
-  key: 'grouping',
-  title: 'Grouping',
+  key: 'perplexLayout',
+  title: 'Perplex Layout',
   svg: jsxs("svg", {
     width: "58",
     height: "50",
-    viewBox: "0 0 58 50",
+    viewBox: "0 0 80 60",
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [jsx("rect", {
-      width: "58",
-      height: "50",
-      rx: "8",
-      fill: "#ffffff"
+      x: "1",
+      y: "1",
+      width: "78",
+      height: "58",
+      rx: "4",
+      fill: "white",
+      stroke: "#E5E7EB",
+      strokeWidth: "2"
     }), jsx("rect", {
-      x: "0",
-      y: "0",
-      width: "58",
-      height: "14",
-      fill: "#001529"
+      x: "1",
+      y: "1",
+      width: "20",
+      height: "58",
+      rx: "3",
+      fill: "#0F172A"
     }), jsx("rect", {
-      x: "8",
-      y: "6",
+      x: "5",
+      y: "10",
       width: "10",
-      height: "2",
-      rx: "1",
-      fill: "#ffffff",
-      opacity: "0.65"
+      height: "3",
+      rx: "1.5",
+      fill: "white",
+      opacity: "0.9"
     }), jsx("rect", {
-      x: "24",
-      y: "6",
+      x: "5",
+      y: "20",
       width: "10",
-      height: "2",
-      rx: "1",
-      fill: "#ffffff",
-      opacity: "0.65"
+      height: "3",
+      rx: "1.5",
+      fill: "white",
+      opacity: "0.6"
+    }), jsx("rect", {
+      x: "5",
+      y: "30",
+      width: "10",
+      height: "3",
+      rx: "1.5",
+      fill: "white",
+      opacity: "0.4"
+    }), jsx("rect", {
+      x: "25",
+      y: "10",
+      width: "40",
+      height: "3",
+      rx: "1.5",
+      fill: "#0F172A",
+      opacity: "0.7"
+    }), jsx("rect", {
+      x: "25",
+      y: "20",
+      width: "30",
+      height: "3",
+      rx: "1.5",
+      fill: "#0F172A",
+      opacity: "0.5"
+    }), jsx("rect", {
+      x: "25",
+      y: "35",
+      width: "45",
+      height: "3",
+      rx: "1.5",
+      fill: "#0F172A",
+      opacity: "0.4"
+    }), jsx("rect", {
+      x: "25",
+      y: "45",
+      width: "35",
+      height: "3",
+      rx: "1.5",
+      fill: "#0F172A",
+      opacity: "0.3"
     })]
   })
 }];
 function NavigationModes({
   changeSetting,
   settings,
-  location
+  location,
+  routePattern,
+  applyToAllRoutes = false
 }) {
   const {
     isMobile
   } = useMediaQuery();
-  const currentRoute = location?.pathname || '/';
-  const routeSettings = settings?.routeSettings?.[currentRoute] || settings?.routeSettings?.['/'] || settings;
+  const currentRoute = routePattern || location?.pathname || '/';
   const deviceType = isMobile ? 'mobile' : 'desktop';
-  const deviceLayout = routeSettings?.layout?.[deviceType] || {};
+  // Get navigation values using the utility function
+  const navigationValues = useMemo(() => ({
+    navigationMode: getSettingValue(settings, 'navigationMode', applyToAllRoutes, currentRoute, deviceType, 'mixed'),
+    sideMenuType: getSettingValue(settings, 'sideMenuType', applyToAllRoutes, currentRoute, deviceType, 'expanded')
+  }), [settings, applyToAllRoutes, currentRoute, deviceType]);
   return jsxs("div", {
     className: "space-y-8",
     children: [jsxs("section", {
@@ -242,13 +293,13 @@ function NavigationModes({
         className: "flex flex-row gap-4",
         children: navigationModes.map((mode, index) => jsx("div", {
           className: "relative cursor-pointer hover:opacity-80 transition-opacity shadow-sm dark:shadow-md rounded overflow-hidden",
-          onClick: () => changeSetting(`routeSettings.${currentRoute}.layout.${deviceType}`, {
-            ...deviceLayout,
-            navigationMode: mode.key
-          }),
+          onClick: () => {
+            // Pass simple key - handleSettingChange in SettingDrawer will decide if it's global or route-specific
+            changeSetting('navigationMode', mode.key);
+          },
           children: jsxs("div", {
             className: "relative",
-            children: [mode.svg, deviceLayout?.navigationMode === mode.key && jsx("svg", {
+            children: [mode.svg, navigationValues.navigationMode === mode.key && jsx("svg", {
               className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-6 h-6 text-blue-500 pointer-events-none",
               viewBox: "0 0 24 24",
               fill: "currentColor",
@@ -267,13 +318,13 @@ function NavigationModes({
         className: "flex flex-row gap-4",
         children: menuTypes.map((type, index) => jsx("div", {
           className: "relative cursor-pointer hover:opacity-80 transition-opacity shadow-sm dark:shadow-md rounded overflow-hidden",
-          onClick: () => changeSetting(`routeSettings.${currentRoute}.layout.${deviceType}`, {
-            ...deviceLayout,
-            sideMenuType: type.key
-          }),
+          onClick: () => {
+            // Pass simple key - handleSettingChange in SettingDrawer will decide if it's global or route-specific
+            changeSetting('sideMenuType', type.key);
+          },
           children: jsxs("div", {
             className: "relative",
-            children: [type.svg, deviceLayout?.sideMenuType === type.key && jsx("svg", {
+            children: [type.svg, navigationValues.sideMenuType === type.key && jsx("svg", {
               className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-6 h-6 text-blue-500 pointer-events-none",
               viewBox: "0 0 24 24",
               fill: "currentColor",
@@ -286,4 +337,4 @@ function NavigationModes({
       })]
     })]
   });
-}export{NavigationModes as default};//# sourceMappingURL=NavigationsModes.js.map
+}export{NavigationModes};//# sourceMappingURL=NavigationsModes.js.map

package/lib/components/SettingDrawer/components/NavigationsModes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationsModes.js","sources":["../../../../src/components/SettingDrawer/components/NavigationsModes.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"sRAMA,MAAM,eAAe,GAAG,CAAA;AACpB,EAAA,GAAA,EAAA,SAAA;AACI,EAAA,KAAA,EAAA,SAAK;AACL,EAAA,GAAA,EAAAA,IAAA,CAAK,KAAE,EAAA;AACP,IAAA,KAAA,EAAG,IACC;AAQP,IAAA,MAAA,EAAA,IAAA;AACD,IAAA,OAAA,EAAA,WAAA;AACI,IAAA,KAAA,EAAG,4BAAU;AACb,IAAA,QAAA,GAAOC,GAAA,CAAA,MAAS,EAAA;AAChB,MAAA,KAAG,EAAE,IACD;AAQP,MAAA,MAAA,EAAA,IAAA;AACD,MAAA,EAAA,EAAA,GAAA;AACI,MAAA,IAAA;AACA,KAAA,CAAA,EAAAA,GAAA,CAAK,MAAE,EAAA;SACP,GAAG;AAaN,MAAA,CAAA,EAAA,GAAA;MACH,KAAA,EAAA,IAAA;AACF,MAAM,YAAY;AACd,MAAA,IAAA,EAAA;AACI,KAAA,CAAA,EAAAA,IAAK,MAAA,EAAA;AACL,MAAA,CAAA,EAAA,GAAA;SACA,GAAG;AAQN,MAAA,KAAA,EAAA,IAAA;AACD,MAAA,MAAA,EAAA,GAAA;AACI,MAAA,EAAA,EAAA,GAAK;AACL,MAAA,IAAA,EAAA;AACA,KAAA,CAAA,EAAAA,GAAG,CAAE,MACD,EAAA;AAYP,MAAA,CAAA,EAAA,GAAA;MACH,CAAA,EAAA,IAAA;AAEF,MAAM,KAAA,EAAA,IAAU;AAOZ,MAAA,MAAQ,EAAA,GAAA;MACR,EAAA,EAAM,GAAA;AACN,MAAA,IAAM,EAAA,SAAU;MAEhB,OAAA,EAAA;AACA,KAAA,CAAA,EAAAA;AAEQ,MAAA,CAAA,EAAA,GAAA;AAQA,MAAA,CAAA,EAAA,IAAA;MAQF,KACD,EAAA,IAAQ;MAGb,MACI;;AAawB,MAAA,IAAA,EAAA,SAAA;;;AAgCA,GAAA;;AAqBhC,EAAC,GAAA,EAAA,QAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/SettingDrawer/components/RegionalSettings.d.ts

@@ -0,0 +1,3 @@
+import { IRegionalSettingsProps } from '../utils/types';
+export declare function RegionalSettings(props: IRegionalSettingsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RegionalSettings.d.ts.map

package/lib/components/SettingDrawer/components/RegionalSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegionalSettings.d.ts","sourceRoot":"","sources":["../../../../src/components/SettingDrawer/components/RegionalSettings.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAMxD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,sBAAsB,2CA4hB7D"}

package/lib/components/SettingDrawer/{RegionalSettings.js → components/RegionalSettings.js}

@@ -1,19 +1,18 @@
-import {jsxs,jsx,Fragment}from'react/jsx-runtime';import*as React from'react';import {useTranslation}from'react-i18next';import {Switch}from'./Switch/index.js';import {SearchBarBehavior}from'../../machines/types.js';import {config}from'../../config/env-config.js';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import {useMediaQuery}from'../../hooks/useMediaQuery.js';function RegionalSettings(props) {
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import*as React from'react';import {useTranslation}from'react-i18next';import {Switch}from'./Switch.js';import {SearchBarBehavior}from'../../../machines/types.js';import {config}from'../../../config/env-config.js';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import {useMediaQuery}from'../../../hooks/useMediaQuery.js';import {getSettingValue}from'../../../utils/settingsUtils.js';function RegionalSettings(props) {
   const {
     t
   } = useTranslation('settings');
   const {
     settings,
     changeSetting,
-    location
+    location,
+    routePattern,
+    applyToAllRoutes = false
   } = props;
   const {
     navTheme
   } = settings || {};
-  const currentRoute = location?.pathname || '/';
-  const {
-    regions = {}
-  } = settings?.routeSettings?.[currentRoute] || {};
+  const currentRoute = routePattern || location?.pathname || '/';
   const [isHeaderExpanded, setIsHeaderExpanded] = React.useState(false);
   const [isBackgroundExpanded, setIsBackgroundExpanded] = React.useState(true);
   const [activeBackgroundTab, setActiveBackgroundTab] = React.useState('desktop');
@@ -23,36 +22,55 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import*as React from'react';im
   } = useMediaQuery();
   const scrollThresholdConfig = JSON.parse(config.SCROLL_THRESHOLD);
   const deviceType = isMobile ? 'mobile' : 'desktop';
-  const handleRegionChange = (key, value) => {
+  // Helper to get config value using the utility function
+  const getConfigValue = (configKey, defaultValue, useActiveTab = true) => {
+    const device = useActiveTab ? activeBackgroundTab || activeHeaderTab : deviceType;
+    return getSettingValue(settings, configKey, applyToAllRoutes, currentRoute, device, defaultValue);
+  };
+  // Helper to set config value with override
+  const setConfigValue = (configKey, value, useActiveTab = true) => {
     if (!changeSetting) return;
-    changeSetting(`routeSettings.${currentRoute}.regions.${deviceType}.header`, {
-      ...regions[deviceType]?.header,
-      [key]: value
-    });
+    // Pass simple key - handleSettingChange in SettingDrawer will decide if it's global or route-specific
+    // based on the applyToAllRoutes flag
+    changeSetting(configKey, value);
+  };
+  const handleRegionChange = (key, value) => {
+    setConfigValue(`header.${key}`, value, false);
   };
   const handleRegionFooterChange = (key, value) => {
-    if (!changeSetting) return;
-    changeSetting(`routeSettings.${currentRoute}.regions.${deviceType}.footer`, {
-      ...regions[deviceType]?.footer,
-      [key]: value
-    });
+    setConfigValue(`footer.${key}`, value, false);
   };
   const handleBackgroundChange = (property, value) => {
-    if (!changeSetting) return;
-    changeSetting(`routeSettings.${currentRoute}.regions.${deviceType}.background`, {
-      ...regions[deviceType].background,
-      [property]: value
-    });
+    setConfigValue(`background.${property}`, value, true);
   };
   const handleHeaderChange = (element, value) => {
-    if (!changeSetting) return;
-    changeSetting(`routeSettings.${currentRoute}.regions.${deviceType}.header`, {
-      ...regions[deviceType]?.header,
-      [element]: value
-    });
+    setConfigValue(`header.${element}`, value, true);
   };
-  const header = regions[deviceType]?.header;
-  const background = regions[deviceType]?.background;
+  // Get current values using the override-aware getter with active header tab
+  const header = React.useMemo(() => ({
+    showLogo: getConfigValue('header.showLogo', true, true),
+    showSearchSlot: getConfigValue('header.showSearchSlot', true, true),
+    showRightContent: getConfigValue('header.showRightContent', true, true),
+    showMenuToggle: getConfigValue('header.showMenuToggle', true, true),
+    showBackButton: getConfigValue('header.showBackButton', true, true),
+    showPageTitle: getConfigValue('header.showPageTitle', true, true),
+    showActionButtons: getConfigValue('header.showActionButtons', true, true),
+    fixedHeader: getConfigValue('header.fixedHeader', true, true),
+    showHeader: getConfigValue('header.showHeader', true, true),
+    showMenu: getConfigValue('header.showMenu', true, true),
+    menuHeaderRender: getConfigValue('header.menuHeaderRender', true, true),
+    searchBarRender: getConfigValue('header.searchBarRender', true, true),
+    searchBarBehavior: getConfigValue('header.searchBarBehavior', SearchBarBehavior.PERMANENT, true),
+    searchBarOverlay: getConfigValue('header.searchBarOverlay', true, true),
+    scrollThreshold: getConfigValue('header.scrollThreshold', scrollThresholdConfig.DEFAULT, true)
+  }), [activeHeaderTab, currentRoute, settings, applyToAllRoutes]);
+  const background = React.useMemo(() => ({
+    type: getConfigValue('background.type', 'color', true),
+    color: getConfigValue('background.color', 'inherit', true),
+    image: getConfigValue('background.image', '', true),
+    video: getConfigValue('background.video', '', true),
+    videoThumbnail: getConfigValue('background.videoThumbnail', '', true)
+  }), [activeBackgroundTab, currentRoute, settings, applyToAllRoutes]);
   // Helper function to render background settings based on current active tab
   const renderBackgroundSettings = () => {
     return jsxs(Fragment, {
@@ -263,7 +281,6 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import*as React from'react';im
   };
   // Helper function to render header settings based on current active tab
   const renderHeaderSettings = () => {
-    const isDesktop = activeHeaderTab === 'desktop';
     return jsxs("div", {
       className: "space-y-2",
       children: [jsxs("div", {
@@ -276,7 +293,7 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import*as React from'react';im
         }), jsx("div", {
           className: "flex-grow"
         }), jsx(Switch, {
-          value: isDesktop ? regions.desktop?.header?.showHeader ?? true : regions.mobile?.header?.showHeader ?? true,
+          value: header?.showHeader ?? true,
           onChange: checked => handleHeaderChange('showHeader', checked)
         })]
       }), jsxs("div", {
@@ -498,82 +515,12 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import*as React from'react';im
         className: `grid transition-all duration-300 ease-in-out ${isBackgroundExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'}`,
         children: jsx("div", {
           className: "overflow-hidden",
-          children: jsxs("div", {
+          children: jsx("div", {
             className: "ml-4 mb-4 border-l-2 border-gray-200 pl-4",
-            children: [jsxs("div", {
-              className: "flex mb-4 mt-1",
-              children: [jsx("button", {
-                className: `flex-1 py-2 px-4 text-sm font-medium transition-colors duration-200 rounded-l-lg border border-r-0 border-gray-300 ${activeBackgroundTab === 'desktop' ? 'bg-blue-500 text-white border-blue-500' : 'bg-white text-gray-700 hover:bg-gray-50'}`,
-                onClick: () => setActiveBackgroundTab('desktop'),
-                children: jsxs("span", {
-                  className: "flex items-center justify-center",
-                  children: [jsxs("svg", {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    className: "mr-1",
-                    children: [jsx("rect", {
-                      x: "2",
-                      y: "3",
-                      width: "20",
-                      height: "14",
-                      rx: "2",
-                      ry: "2"
-                    }), jsx("line", {
-                      x1: "8",
-                      y1: "21",
-                      x2: "16",
-                      y2: "21"
-                    }), jsx("line", {
-                      x1: "12",
-                      y1: "17",
-                      x2: "12",
-                      y2: "21"
-                    })]
-                  }), t('desktop_tab')]
-                })
-              }), jsx("button", {
-                className: `flex-1 py-2 px-4 text-sm font-medium transition-colors duration-200 rounded-r-lg border border-gray-300 ${activeBackgroundTab === 'mobile' ? 'bg-blue-500 text-white border-blue-500' : 'bg-white text-gray-700 hover:bg-gray-50'}`,
-                onClick: () => setActiveBackgroundTab('mobile'),
-                children: jsxs("span", {
-                  className: "flex items-center justify-center",
-                  children: [jsxs("svg", {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    className: "mr-1",
-                    children: [jsx("rect", {
-                      x: "5",
-                      y: "2",
-                      width: "14",
-                      height: "20",
-                      rx: "2",
-                      ry: "2"
-                    }), jsx("line", {
-                      x1: "12",
-                      y1: "18",
-                      x2: "12",
-                      y2: "18"
-                    })]
-                  }), t('mobile_tab')]
-                })
-              })]
-            }), jsx("div", {
+            children: jsx("div", {
               className: "mb-4",
               children: renderBackgroundSettings()
-            })]
+            })
           })
         })
       })]
@@ -607,77 +554,7 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import*as React from'react';im
           className: "overflow-hidden",
           children: jsxs("div", {
             className: "ml-4 mb-4 border-l-2 border-gray-200 pl-4",
-            children: [jsxs("div", {
-              className: "flex mb-4 mt-1",
-              children: [jsx("button", {
-                className: `flex-1 py-2 px-4 text-sm font-medium transition-colors duration-200 rounded-l-lg border border-r-0 border-gray-300 ${activeHeaderTab === 'desktop' ? 'bg-blue-500 text-white border-blue-500' : 'bg-white text-gray-700 hover:bg-gray-50'}`,
-                onClick: () => setActiveHeaderTab('desktop'),
-                children: jsxs("span", {
-                  className: "flex items-center justify-center",
-                  children: [jsxs("svg", {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    className: "mr-1",
-                    children: [jsx("rect", {
-                      x: "2",
-                      y: "3",
-                      width: "20",
-                      height: "14",
-                      rx: "2",
-                      ry: "2"
-                    }), jsx("line", {
-                      x1: "8",
-                      y1: "21",
-                      x2: "16",
-                      y2: "21"
-                    }), jsx("line", {
-                      x1: "12",
-                      y1: "17",
-                      x2: "12",
-                      y2: "21"
-                    })]
-                  }), t('desktop_tab')]
-                })
-              }), jsx("button", {
-                className: `flex-1 py-2 px-4 text-sm font-medium transition-colors duration-200 rounded-r-lg border border-gray-300 ${activeHeaderTab === 'mobile' ? 'bg-blue-500 text-white border-blue-500' : 'bg-white text-gray-700 hover:bg-gray-50'}`,
-                onClick: () => setActiveHeaderTab('mobile'),
-                children: jsxs("span", {
-                  className: "flex items-center justify-center",
-                  children: [jsxs("svg", {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    className: "mr-1",
-                    children: [jsx("rect", {
-                      x: "5",
-                      y: "2",
-                      width: "14",
-                      height: "20",
-                      rx: "2",
-                      ry: "2"
-                    }), jsx("line", {
-                      x1: "12",
-                      y1: "18",
-                      x2: "12",
-                      y2: "18"
-                    })]
-                  }), t('mobile_tab')]
-                })
-              })]
-            }), jsx("div", {
+            children: [jsx("div", {
               className: "mb-4",
               children: renderHeaderSettings()
             }), jsxs("div", {
@@ -706,7 +583,7 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import*as React from'react';im
       }), jsx("div", {
         className: "flex-grow"
       }), jsx(Switch, {
-        value: regions[deviceType]?.footer?.showFooter,
+        value: getConfigValue('footer.showFooter', true),
         onChange: checked => handleRegionFooterChange('showFooter', checked)
       })]
     }), jsxs("div", {
@@ -719,7 +596,7 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import*as React from'react';im
       }), jsx("div", {
         className: "flex-grow"
       }), jsx(Switch, {
-        value: regions[deviceType]?.header?.showMenu,
+        value: getConfigValue('header.showMenu', true),
         onChange: checked => handleRegionChange('showMenu', checked)
       })]
     }), jsxs("div", {
@@ -732,9 +609,9 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import*as React from'react';im
       }), jsx("div", {
         className: "flex-grow"
       }), jsx(Switch, {
-        value: regions[deviceType]?.header?.menuHeaderRender,
+        value: getConfigValue('header.menuHeaderRender', true),
         onChange: checked => handleRegionChange('menuHeaderRender', checked)
       })]
     })]
   });
-}export{RegionalSettings as default};//# sourceMappingURL=RegionalSettings.js.map
+}export{RegionalSettings};//# sourceMappingURL=RegionalSettings.js.map

package/lib/components/SettingDrawer/components/RegionalSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegionalSettings.js","sources":["../../../../src/components/SettingDrawer/components/RegionalSettings.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/lib/components/SettingDrawer/components/SettingsActions.d.ts

@@ -0,0 +1,12 @@
+interface SettingsActionsProps {
+    hasChanges: boolean;
+    copied: boolean;
+    copiedModified: boolean;
+    onSave: () => void;
+    onCopyAll: () => void;
+    onCopyModified: () => void;
+    onReset: () => void;
+}
+export declare function SettingsActions({ hasChanges, copied, copiedModified, onSave, onCopyAll, onCopyModified, onReset, }: SettingsActionsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SettingsActions.d.ts.map

package/lib/components/SettingDrawer/components/SettingsActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsActions.d.ts","sourceRoot":"","sources":["../../../../src/components/SettingDrawer/components/SettingsActions.tsx"],"names":[],"mappings":"AAIA,UAAU,oBAAoB;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,cAAc,EAAE,OAAO,CAAC;IACxB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,eAAe,CAAC,EAC5B,UAAU,EACV,MAAM,EACN,cAAc,EACd,MAAM,EACN,SAAS,EACT,cAAc,EACd,OAAO,GACV,EAAE,oBAAoB,2CAwEtB"}

package/lib/components/SettingDrawer/components/SettingsActions.js

@@ -0,0 +1,69 @@
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import clsx from'clsx';import {icons}from'../../../icons.js';function SettingsActions({
+  hasChanges,
+  copied,
+  copiedModified,
+  onSave,
+  onCopyAll,
+  onCopyModified,
+  onReset
+}) {
+  const {
+    CopyIcon,
+    CheckIcon
+  } = icons;
+  return jsxs("div", {
+    className: "bg-yellow-50 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 rounded-lg p-4 mt-4",
+    children: [jsx("p", {
+      className: "text-sm text-yellow-700 dark:text-yellow-200",
+      children: "Setting panel shows in development environment only, please manually modify"
+    }), jsxs("div", {
+      className: "flex flex-wrap gap-2 mt-2",
+      children: [jsx("button", {
+        disabled: !hasChanges,
+        className: clsx('flex-1 min-w-[140px] sm:flex-none sm:w-auto px-4 py-2 rounded-lg border text-sm font-medium shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2', !hasChanges ? 'border-gray-300 text-gray-500 bg-gray-50 cursor-not-allowed dark:border-gray-600 dark:text-gray-400 dark:bg-gray-800' : 'border-yellow-300 text-yellow-700 bg-yellow-50 hover:bg-yellow-100 active:bg-yellow-200 dark:border-yellow-600 dark:text-yellow-200 dark:bg-yellow-900/50 dark:hover:bg-yellow-900'),
+        onClick: onSave,
+        children: jsx("span", {
+          children: !hasChanges ? 'No Changes' : 'Save Settings'
+        })
+      }), jsx("button", {
+        className: clsx('flex-1 min-w-[140px] sm:flex-none sm:w-auto px-4 py-2 rounded-lg border text-sm font-medium shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2', copied ? 'border-green-300 text-green-700 bg-green-50 dark:border-green-600 dark:text-green-200 dark:bg-green-900' : 'border-yellow-300 text-yellow-700 bg-yellow-50 hover:bg-yellow-100 active:bg-yellow-200 dark:border-yellow-600 dark:text-yellow-200 dark:bg-yellow-900/50 dark:hover:bg-yellow-900'),
+        onClick: onCopyAll,
+        children: copied ? jsxs(Fragment, {
+          children: [jsx(CheckIcon, {
+            className: "w-4 h-4"
+          }), jsx("span", {
+            children: "Copied!"
+          })]
+        }) : jsxs(Fragment, {
+          children: [jsx(CopyIcon, {
+            className: "w-4 h-4"
+          }), jsx("span", {
+            children: "Copy All Settings"
+          })]
+        })
+      }), jsx("button", {
+        className: clsx('flex-1 min-w-[140px] sm:flex-none sm:w-auto px-4 py-2 rounded-lg border text-sm font-medium shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2', copiedModified ? 'border-green-300 text-green-700 bg-green-50 dark:border-green-600 dark:text-green-200 dark:bg-green-900' : 'border-blue-300 text-blue-700 bg-blue-50 hover:bg-blue-100 active:bg-blue-200 dark:border-blue-600 dark:text-blue-200 dark:bg-blue-900/50 dark:hover:bg-blue-900'),
+        onClick: onCopyModified,
+        children: copiedModified ? jsxs(Fragment, {
+          children: [jsx(CheckIcon, {
+            className: "w-4 h-4"
+          }), jsx("span", {
+            children: "Copied!"
+          })]
+        }) : jsxs(Fragment, {
+          children: [jsx(CopyIcon, {
+            className: "w-4 h-4"
+          }), jsx("span", {
+            children: "Copy Modified Settings"
+          })]
+        })
+      }), jsx("button", {
+        className: "flex-1 min-w-[140px] sm:flex-none sm:w-auto px-4 py-2 rounded-lg border border-red-300 text-red-700 bg-red-50 hover:bg-red-100 active:bg-red-200 dark:border-red-600 dark:text-red-200 dark:bg-red-900/50 dark:hover:bg-red-900 text-sm font-medium shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500",
+        onClick: onReset,
+        children: jsx("span", {
+          children: "\uD83D\uDD04 Reset All Settings"
+        })
+      })]
+    })]
+  });
+}export{SettingsActions};//# sourceMappingURL=SettingsActions.js.map

package/lib/components/SettingDrawer/components/SettingsActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsActions.js","sources":["../../../../src/components/SettingDrawer/components/SettingsActions.tsx"],"sourcesContent":[null],"names":[],"mappings":"wHAcgB,eAAe,CAAC;AAS5B,EAAA,UAAQ;AAER,EAAA,MAAA;AAWwB,EAAA,cAAA;AACA,EAAA,MAAA;AAUA,EAAA,SAAA;;AAqBA,EAAA;;AA0B5B,EAAC,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/SettingDrawer/components/SettingsDrawerHeader.d.ts

@@ -0,0 +1,4 @@
+export declare function SettingsDrawerHeader({ onClose }: {
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SettingsDrawerHeader.d.ts.map

package/lib/components/SettingDrawer/components/SettingsDrawerHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsDrawerHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/SettingDrawer/components/SettingsDrawerHeader.tsx"],"names":[],"mappings":"AAIA,wBAAgB,oBAAoB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,2CAgBxE"}

package/lib/components/SettingDrawer/components/SettingsDrawerHeader.js

@@ -0,0 +1,25 @@
+import {jsxs,jsx}from'react/jsx-runtime';import {useTranslation}from'react-i18next';import {icons}from'../../../icons.js';function SettingsDrawerHeader({
+  onClose
+}) {
+  const {
+    t
+  } = useTranslation('settings');
+  const {
+    CloseIcon
+  } = icons;
+  return jsxs("div", {
+    className: "flex flex-row items-center",
+    children: [jsx("p", {
+      className: "text-2xl mb-0 text-black dark:text-white",
+      children: t('setting')
+    }), jsx("div", {
+      className: "flex-grow"
+    }), jsx("button", {
+      onClick: onClose,
+      className: "bg-transparent border-none rounded-lg w-10 h-10 cursor-pointer mb-2 hover:bg-gray-200 dark:hover:bg-[#2a2a2a]",
+      children: jsx(CloseIcon, {
+        fontSize: '36px'
+      })
+    })]
+  });
+}export{SettingsDrawerHeader};//# sourceMappingURL=SettingsDrawerHeader.js.map