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

package/lib/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;CAcjB,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;CAgBjB,CAAC"}

package/lib/icons.js

@@ -1,4 +1,4 @@
-import {FaSearch}from'@react-icons/all-files/fa/FaSearch.js';import {IoMenu}from'@react-icons/all-files/io5/IoMenu.js';import'@react-icons/all-files/ai/AiOutlineDash.js';import {FaChevronDown}from'@react-icons/all-files/fa/FaChevronDown.js';import {FaChevronUp}from'@react-icons/all-files/fa/FaChevronUp.js';import {FaChevronRight}from'@react-icons/all-files/fa/FaChevronRight.js';import {FaChevronLeft}from'@react-icons/all-files/fa/FaChevronLeft.js';import {MdClose}from'@react-icons/all-files/md/MdClose.js';import {RiSettings5Fill}from'@react-icons/all-files/ri/RiSettings5Fill.js';import {IoMdCopy}from'@react-icons/all-files/io/IoMdCopy.js';import {FaCheck}from'@react-icons/all-files/fa/FaCheck.js';import'@react-icons/all-files/io5/IoChevronBackCircleOutline.js';import'@react-icons/all-files/io5/IoChevronForwardCircleOutline.js';const icons = {
+import {FaSearch}from'@react-icons/all-files/fa/FaSearch.js';import {IoMenu}from'@react-icons/all-files/io5/IoMenu.js';import'@react-icons/all-files/ai/AiOutlineDash.js';import {FaChevronDown}from'@react-icons/all-files/fa/FaChevronDown.js';import {FaChevronUp}from'@react-icons/all-files/fa/FaChevronUp.js';import {FaChevronRight}from'@react-icons/all-files/fa/FaChevronRight.js';import {FaChevronLeft}from'@react-icons/all-files/fa/FaChevronLeft.js';import {MdClose}from'@react-icons/all-files/md/MdClose.js';import {RiSettings5Fill}from'@react-icons/all-files/ri/RiSettings5Fill.js';import {IoMdCopy}from'@react-icons/all-files/io/IoMdCopy.js';import {FaCheck}from'@react-icons/all-files/fa/FaCheck.js';import'@react-icons/all-files/io5/IoChevronBackCircleOutline.js';import'@react-icons/all-files/io5/IoChevronForwardCircleOutline.js';import {RiPushpinLine}from'@react-icons/all-files/ri/RiPushpinLine.js';import {RiPushpinFill}from'@react-icons/all-files/ri/RiPushpinFill.js';const icons = {
   SearchIcon: FaSearch,
   ChevronDownIcon: FaChevronDown,
   ChevronRightIcon: FaChevronRight,
@@ -8,5 +8,7 @@ import {FaSearch}from'@react-icons/all-files/fa/FaSearch.js';import {IoMenu}from
   CopyIcon: IoMdCopy,
   CheckIcon: FaCheck,
   ChevronUpIcon: FaChevronUp,
-  ChevronLeftIcon: FaChevronLeft
+  ChevronLeftIcon: FaChevronLeft,
+  PushpinLineIcon: RiPushpinLine,
+  PushpinFillIcon: RiPushpinFill
 };export{icons};//# sourceMappingURL=icons.js.map

package/lib/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sources":["../src/icons.ts"],"sourcesContent":[null],"names":[],"mappings":"u0BAca,MAAA,KAAK,GAAG;sBACP;gCACK;kCACC;kBACR;oBAEC;oCACQ;oBACT;oBACC;4BAGI;;"}
+{"version":3,"file":"icons.js","sources":["../src/icons.ts"],"sourcesContent":[null],"names":[],"mappings":"q9BAgBO,MAAM,KAAK,GAAG;sBACjB;gCACA;kCACA;kBACA;oBAEA;oCACA;oBACA;oBACA;4BAGA;gCACA;gCACA;;"}

package/lib/index.d.ts

@@ -1,6 +1,7 @@
 import { Feature } from '@common-stack/client-react';
 export * from './tailwindConfig';
 export * from './redux';
+export * from './hooks';
 declare const _default: Feature;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;;AAExB,wBAAqC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;;AAExB,wBAAqC"}

package/lib/index.js

@@ -1,2 +1,2 @@
-import {Feature}from'@common-stack/client-react';import settings from'./module.js';export{themeConfig}from'./tailwindConfig.js';export{SEARCH_ACTIONS,clearSearch,searchReducer,setSearchError,setSearchQuery,setSearchResult}from'./redux/searchReducer.js';// eslint-disable-next-line import/no-extraneous-dependencies
+import {Feature}from'@common-stack/client-react';import settings from'./module.js';export{themeConfig}from'./tailwindConfig.js';export{SEARCH_ACTIONS,clearSearch,searchReducer,setSearchError,setSearchQuery,setSearchResult}from'./redux/searchReducer.js';export{useTailwindTheme}from'./hooks/useTailwindTheme.js';export{useMediaQuery}from'./hooks/useMediaQuery.js';// eslint-disable-next-line import/no-extraneous-dependencies
 var index = new Feature(settings);export{index as default};//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":[null],"names":[],"mappings":"6PAAA;AAMA,YAAe,IAAI,OAAO,CAAC,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":[null],"names":[],"mappings":"2WAAA;AAOA,YAAe,IAAI,OAAO,CAAC,QAAQ,CAAC"}

package/lib/machines/selectors.d.ts

@@ -0,0 +1,118 @@
+import { UISettings } from './types';
+/**
+ * XSTATE SELECTORS
+ *
+ * These selector functions provide STABLE references to state values,
+ * preventing unnecessary re-renders and eliminating infinite loop possibilities.
+ *
+ * IMPORTANT RULES:
+ * 1. Components should ONLY use these selectors to access state
+ * 2. NEVER access state.context directly
+ * 3. Selectors only return PUBLIC settings - internal state is never exposed
+ * 4. XState's useSelector hook memoizes these, ensuring stable references
+ *
+ * WHY THIS WORKS:
+ * - Even if context.internal.configModel changes (new reference),
+ *   context.public remains stable (same values = same reference after JSON comparison)
+ * - useSelector only triggers re-render if the RETURNED value changes
+ * - No manual filtering needed - separation is built into the structure
+ */
+/**
+ * Select all UI settings (excludes internal machine state)
+ *
+ * This is the primary selector for getting user-facing settings.
+ * XState's useSelector will automatically memoize this, so it only
+ * re-renders when the UI settings actually change.
+ *
+ * @example
+ * const settings = useSelector(actor, selectPublicSettings);
+ */
+export declare const selectPublicSettings: (state: any) => UISettings;
+/**
+ * Select only changed settings (for save button state).
+ * Use this to check if there are unsaved changes.
+ *
+ * @example
+ * const changedSettings = useSelector(actor, selectChangedSettings);
+ * const hasChanges = Object.keys(changedSettings).length > 0;
+ */
+export declare const selectChangedSettings: (state: any) => Record<string, any>;
+/**
+ * Select current device type (desktop/mobile).
+ * Use this to check which device mode is active.
+ *
+ * @example
+ * const deviceType = useSelector(actor, selectDeviceType);
+ */
+export declare const selectDeviceType: (state: any) => "desktop" | "mobile";
+/**
+ * Select current route path.
+ * Use this to check which route is active.
+ *
+ * @example
+ * const currentRoute = useSelector(actor, selectCurrentRoute);
+ */
+export declare const selectCurrentRoute: (state: any) => string;
+/**
+ * Select a specific setting by key.
+ * Returns a selector function that extracts a specific setting value.
+ *
+ * @example
+ * const navTheme = useSelector(actor, selectSetting('navTheme'));
+ * const primaryColor = useSelector(actor, selectSetting('primaryColor'));
+ */
+export declare const selectSetting: (key: keyof UISettings) => (state: any) => any;
+/**
+ * Select navigation theme specifically.
+ * Commonly used setting, provided as convenience.
+ *
+ * @example
+ * const navTheme = useSelector(actor, selectNavTheme);
+ */
+export declare const selectNavTheme: (state: any) => "light" | "dark" | "realDark";
+/**
+ * Select primary color specifically.
+ * Commonly used setting, provided as convenience.
+ *
+ * @example
+ * const primaryColor = useSelector(actor, selectPrimaryColor);
+ */
+export declare const selectPrimaryColor: (state: any) => string;
+/**
+ * Select whether settings panel should be shown.
+ * Use this to control settings drawer visibility.
+ *
+ * @example
+ * const showSettingPanel = useSelector(actor, selectShowSettingPanel);
+ */
+export declare const selectShowSettingPanel: (state: any) => boolean;
+/**
+ * Select menu visibility settings.
+ * Returns both hiddenMenuKeys and hiddenMenuCategories.
+ *
+ * @example
+ * const { hiddenMenuKeys, hiddenMenuCategories } = useSelector(actor, selectMenuVisibility);
+ */
+export declare const selectMenuVisibility: (state: any) => {
+    hiddenMenuKeys: string[];
+    hiddenMenuCategories: string[];
+};
+/**
+ * Check if there are unsaved changes.
+ * Use this for save button disabled state.
+ *
+ * @example
+ * const hasUnsavedChanges = useSelector(actor, selectHasUnsavedChanges);
+ */
+export declare const selectHasUnsavedChanges: (state: any) => boolean;
+/**
+ * COMPARISON HELPER
+ *
+ * Use this to compare settings between renders without triggering infinite loops.
+ * This performs a deep comparison of UI settings only.
+ *
+ * @example
+ * const settingsChanged = !areUISettingsEqual(prevSettings, currentSettings);
+ */
+export declare const areUISettingsEqual: (a: UISettings, b: UISettings) => boolean;
+//# sourceMappingURL=selectors.d.ts.map

package/lib/machines/selectors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../src/machines/selectors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,UAAU,EAAwB,MAAM,SAAS,CAAC;AAE5E;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,GAAI,OAAO,GAAG,KAAG,UAGjD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,GAAI,OAAO,GAAG,KAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAGpE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,GAAG,KAAG,SAAS,GAAG,QAGzD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,GAAG,KAAG,MAG/C,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GACrB,KAAK,MAAM,UAAU,MACrB,OAAO,GAAG,KAAG,GAGb,CAAC;AAEN;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,GAAG,KAAG,OAAO,GAAG,MAAM,GAAG,UAG9D,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,GAAG,KAAG,MAG/C,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,GAAI,OAAO,GAAG,KAAG,OAGnD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAC7B,OAAO,GAAG,KACX;IACC,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,oBAAoB,EAAE,MAAM,EAAE,CAAC;CAOlC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,GAAI,OAAO,GAAG,KAAG,OAGpD,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,GAAG,UAAU,EAAE,GAAG,UAAU,KAAG,OASjE,CAAC"}

package/lib/machines/settingsMachine.d.ts

@@ -1,6 +1,29 @@
 import { MachineEvent, SettingsContext } from './types';
+/**
+ * SETTINGS MACHINE - COMPLETELY REFACTORED
+ *
+ * DESIGN PHILOSOPHY:
+ * This machine has been completely rewritten to eliminate any possibility of infinite loops
+ * by enforcing a strict separation between:
+ * 1. PUBLIC STATE: User-facing settings (stable, exposed to consumers)
+ * 2. INTERNAL STATE: Machine logic state (may have reference changes, never exposed)
+ *
+ * ARCHITECTURE:
+ * - Context is split into `public` and `internal` namespaces
+ * - Components ONLY access `context.public` via selectors
+ * - NO filtering is needed - separation is built into the structure
+ * - ConfigurationModel reference changes are isolated to `context.internal`
+ * - Redux receives ONLY `context.public` - no manual filtering required
+ *
+ * WHY THIS WORKS:
+ * - Reference changes in `context.internal.configModel` don't affect `context.public`
+ * - Components using selectors get stable references to `context.public`
+ * - No manual filtering means no chance of accidentally exposing internal state
+ * - Type system enforces the separation at compile time
+ */
 export declare const settingsMachine: import("xstate").StateMachine<SettingsContext, MachineEvent, Record<string, import("xstate").AnyActorRef>, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, string, import("xstate").StateValue, string, {
-    settings: SettingsContext;
-    routeSettings?: Record<string, Partial<SettingsContext>>;
+    settings: any;
+    currentRoute?: string;
+    routePattern?: string;
 }, {}, import("xstate").EventObject, import("xstate").MetaObject, any>;
 //# sourceMappingURL=settingsMachine.d.ts.map

package/lib/machines/settingsMachine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settingsMachine.d.ts","sourceRoot":"","sources":["../../src/machines/settingsMachine.ts"],"names":[],"mappings":"AAEA,OAAO,EAEH,YAAY,EACZ,eAAe,EAMlB,MAAM,SAAS,CAAC;AAyFjB,eAAO,MAAM,eAAe;cAMN,eAAe;oBACT,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;sEAsIlE,CAAC"}
+{"version":3,"file":"settingsMachine.d.ts","sourceRoot":"","sources":["../../src/machines/settingsMachine.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,eAAe,EAAoC,MAAM,SAAS,CAAC;AAE1F;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,eAAO,MAAM,eAAe;cAMN,GAAG;mBACE,MAAM;mBACN,MAAM;sEAkL/B,CAAC"}

package/lib/machines/settingsMachine.js

@@ -1,85 +1,25 @@
-import {defaultSettings}from'@admin-layout/client';import {createMachine,assign}from'xstate';import {SearchBarBehavior}from'./types.js';import {cloneDeep,set,merge}from'lodash-es';// Default route settings template
-const DEFAULT_LAYOUT = {
-  navigationMode: 'mixed',
-  sideMenuType: 'expanded',
-  contentWidth: 'fluid',
-  fixedHeader: true,
-  fixedSidebar: true,
-  splitMenus: false,
-  upperMenuDividerName: 'Navigation',
-  middleMenuDividerName: 'Dashboard',
-  lowerMenuDividerName: 'Admin'
-};
-// Default background settings
-const DEFAULT_BACKGROUND = {
-  type: 'color',
-  color: 'inherit',
-  image: '',
-  video: '',
-  videoThumbnail: ''
-};
-const DEFAULT_HEADER = {
-  showLogo: true,
-  showSearchSlot: true,
-  showRightContent: true,
-  showMenuToggle: true,
-  showBackButton: true,
-  showPageTitle: true,
-  showActionButtons: true,
-  position: 'fixed',
-  height: '64px',
-  elevation: 2,
-  showHeader: true,
-  showMenu: true,
-  menuHeaderRender: true,
-  searchBarRender: true,
-  searchBarBehavior: SearchBarBehavior.PERMANENT,
-  searchBarOverlay: true,
-  scrollThreshold: 50
-};
-// Shared view configuration similar to client's defaultSettings
-const SHARED_VIEW_CONFIG = {
-  layout: DEFAULT_LAYOUT,
-  regions: {
-    header: DEFAULT_HEADER,
-    footer: {
-      showFooter: true
-    },
-    background: DEFAULT_BACKGROUND
-  }
-};
-const defaultRouteSettings = {
-  layout: {
-    desktop: SHARED_VIEW_CONFIG.layout,
-    mobile: SHARED_VIEW_CONFIG.layout
-  },
-  regions: {
-    desktop: {
-      header: SHARED_VIEW_CONFIG.regions.header,
-      footer: SHARED_VIEW_CONFIG.regions.footer,
-      background: SHARED_VIEW_CONFIG.regions.background
-    },
-    mobile: {
-      header: SHARED_VIEW_CONFIG.regions.header,
-      footer: SHARED_VIEW_CONFIG.regions.footer,
-      background: SHARED_VIEW_CONFIG.regions.background
-    }
-  }
-};
-// Helper function to deep merge objects
-const deepMerge = (target, source) => {
-  const result = {
-    ...target
-  };
-  for (const key in source) {
-    if (source[key] instanceof Object && key in target) {
-      result[key] = deepMerge(target[key], source[key]);
-    } else {
-      result[key] = source[key];
-    }
-  }
-  return result;
-};
+import {cloneDeep,merge}from'lodash-es';import {createMachine,assign}from'xstate';import {extractConfigurationWithModel}from'@adminide-stack/core';/**
+ * SETTINGS MACHINE - COMPLETELY REFACTORED
+ *
+ * DESIGN PHILOSOPHY:
+ * This machine has been completely rewritten to eliminate any possibility of infinite loops
+ * by enforcing a strict separation between:
+ * 1. PUBLIC STATE: User-facing settings (stable, exposed to consumers)
+ * 2. INTERNAL STATE: Machine logic state (may have reference changes, never exposed)
+ *
+ * ARCHITECTURE:
+ * - Context is split into `public` and `internal` namespaces
+ * - Components ONLY access `context.public` via selectors
+ * - NO filtering is needed - separation is built into the structure
+ * - ConfigurationModel reference changes are isolated to `context.internal`
+ * - Redux receives ONLY `context.public` - no manual filtering required
+ *
+ * WHY THIS WORKS:
+ * - Reference changes in `context.internal.configModel` don't affect `context.public`
+ * - Components using selectors get stable references to `context.public`
+ * - No manual filtering means no chance of accidentally exposing internal state
+ * - Type system enforces the separation at compile time
+ */
 const settingsMachine = createMachine({
   id: 'settings',
   types: {},
@@ -87,119 +27,150 @@ const settingsMachine = createMachine({
   context: ({
     input
   }) => {
-    return merge({}, {
-      navTheme: defaultSettings.navTheme || 'light',
-      primaryColor: defaultSettings.primaryColor || '#1890ff',
-      secondaryColor: defaultSettings.secondaryColor || '#1890ff',
-      theme: defaultSettings.theme || 'default',
-      logo: defaultSettings.logo,
-      title: defaultSettings.title,
-      showSettingPanel: defaultSettings.showSettingPanel,
-      titleColor: defaultSettings.titleColor,
-      language: defaultSettings.language,
-      fontFamily: defaultSettings.fontFamily,
-      titleFontWeight: defaultSettings.titleFontWeight,
-      titleHeight: defaultSettings.titleHeight,
-      titleFontSize: defaultSettings.titleFontSize,
-      letterSpacings: defaultSettings.letterSpacings,
-      siderBgColor: defaultSettings.siderBgColor,
-      headerBgColor: defaultSettings.headerBgColor,
-      textColor: defaultSettings.textColor,
-      themeType: defaultSettings.themeType,
-      loginThemeColor: defaultSettings.loginThemeColor,
-      loginFormPosition: defaultSettings.loginFormPosition,
-      loginSocials: defaultSettings.loginSocials,
-      loginBackgroundImage: defaultSettings.loginBackgroundImage,
-      verifyFormLayout: defaultSettings.verifyFormLayout,
-      verifyFormImageUrl: defaultSettings.verifyFormImageUrl,
-      verifyFormBackgroundStyle: defaultSettings.verifyFormBackgroundStyle,
-      verifyFormVisibleFields: defaultSettings.verifyFormVisibleFields,
-      verifyFormShowSkipButton: defaultSettings.verifyFormShowSkipButton,
-      components: [],
-      activeComponent: null,
-      currentRoute: input?.settings?.currentRoute || '/',
-      routeSettings: {
-        '/': defaultRouteSettings
-      }
-    }, input?.settings);
+    const rawSettings = input?.settings || {};
+    // ConfigurationModel handles ALL bracket patterns automatically
+    const {
+      model: configModel
+    } = extractConfigurationWithModel(rawSettings);
+    const deviceType = 'desktop';
+    const routePattern = input?.routePattern || input?.currentRoute || '/';
+    // Apply overrides by chaining: base -> device -> route+device
+    const deviceOverride = configModel.override([routePattern, deviceType], {
+      strict: true
+    });
+    const effectiveSettings = deviceOverride.getValue('');
+    // Build INTERNAL state (machine only, never exposed)
+    const internalState = {
+      configModel,
+      deviceType,
+      currentRoute: input?.currentRoute || '/',
+      routePattern: input?.routePattern,
+      changedSettings: {},
+      currentChangedSetting: {}
+    };
+    const context = {
+      public: effectiveSettings,
+      internal: internalState
+    };
+    return context;
   },
   states: {
     idle: {
+      entry: ['updateReduxSettings'],
       on: {
-        UPDATE: {
+        UISETTING_UPDATE: {
           actions: [assign(({
             context,
             event
           }) => {
             if (!event.value) return context;
-            const newContext = cloneDeep({
-              ...context
-            });
-            // Handle top-level updates
-            if (event.value.navTheme !== undefined) {
-              newContext.navTheme = event.value.navTheme;
-            }
-            if (event.value.primaryColor !== undefined) {
-              newContext.primaryColor = event.value.primaryColor;
-            }
-            if (event.value.theme !== undefined) {
-              newContext.theme = event.value.theme;
-            }
-            // Add any new keys from event.value that don't exist in context
-            Object.keys(event.value).forEach(key => {
-              set(newContext, key, event.value[key]);
+            console.log('1️⃣ UISETTING_UPDATE state trigger:', event);
+            // Clone context to avoid mutations
+            const newContext = cloneDeep(context);
+            // 1. Extract the configuration model from the new value
+            const {
+              model: updateModel
+            } = extractConfigurationWithModel(event.value);
+            // 2. Merge the new settings into existing config
+            newContext.internal.configModel = newContext.internal.configModel.merge(updateModel);
+            // 3. Track what changed (for saving to cookie later & save button)
+            newContext.internal.currentChangedSetting = event.value;
+            newContext.internal.changedSettings = merge({}, newContext.internal.changedSettings, event.value);
+            // 4. Reapply settings for current route
+            const routePattern = newContext.internal.routePattern || newContext.internal.currentRoute;
+            const deviceOverride = newContext.internal.configModel.override([routePattern, newContext.internal.deviceType], {
+              strict: true
             });
+            // 5. Update the public settings that components see
+            newContext.public = deviceOverride.getValue('');
             return newContext;
           }), 'updateReduxSettings']
         },
-        ROUTE_CHANGE: {
+        UISETTING_ROUTE_CHANGE: {
           actions: [assign(({
             context,
             event
           }) => {
-            const newContext = cloneDeep({
-              ...context
-            });
             const routePath = event.pathname || '/';
-            // Update current route
-            newContext.currentRoute = routePath;
-            // Get the route's saved settings from history or use default
-            const routeSettings = context.routeSettings[routePath];
-            // Initialize route settings if it doesn't exist
-            if (!newContext.routeSettings[routePath]) {
-              newContext.routeSettings[routePath] = cloneDeep({
-                ...defaultRouteSettings
-              });
-              return newContext;
+            const routePattern = event.routePattern;
+            console.log('🔧 ROUTE_CHANGE to:', routePattern);
+            // Clone context to avoid mutations
+            const newContext = cloneDeep(context);
+            // Update internal route and route pattern
+            newContext.internal.currentRoute = routePath;
+            if (routePattern) {
+              newContext.internal.routePattern = routePattern;
             }
-            newContext.routeSettings[routePath] = cloneDeep(routeSettings);
+            // Build override keys using route pattern if available
+            const routeForBracket = routePattern || routePath;
+            const routeDeviceKey = [routeForBracket, context.internal.deviceType];
+            // Apply overrides by chaining: base -> device -> route+device
+            const deviceOverride = context.internal.configModel.override(routeDeviceKey, {
+              strict: true
+            });
+            // Extract final merged settings
+            const effectiveSettings = deviceOverride.getValue('');
+            // Rebuild PUBLIC settings from scratch (no leakage from old route)
+            newContext.public = effectiveSettings;
             return newContext;
-          }), 'updateReduxSettings']
+          })
+          // 'updateReduxSettings',
+          ]
         },
-        UPDATE_ROUTE_SETTINGS: {
+        UISETTING_UPDATE_ROUTE_SETTINGS: {
           actions: [assign(({
-            context,
-            event
+            context
           }) => ({
-            ...context,
-            routeSettings: deepMerge(context.routeSettings, event.settings)
+            ...context
+            // Route settings are now handled via uiSettings overrides
           })), 'updateReduxSettings']
         },
-        RESET: {
-          actions: [assign(() => ({
-            navTheme: defaultSettings.navTheme || 'light',
-            primaryColor: defaultSettings.primaryColor || '#1890ff',
-            theme: 'default',
-            components: [],
-            activeComponent: null,
-            routeSettings: {
-              '/': defaultRouteSettings
+        UISETTING_RESET: {
+          actions: [assign(({
+            context
+          }) => {
+            console.log('1️⃣ UISETTING_RESET state trigger');
+            const newContext = cloneDeep(context);
+            // Reset public state
+            newContext.public.components = [];
+            newContext.public.activeComponent = undefined;
+            // Reset internal tracking
+            newContext.internal.changedSettings = {};
+            return newContext;
+          }), 'updateReduxSettings']
+        },
+        UISETTING_RESET_CHANGED_SETTINGS: {
+          actions: [assign(({
+            context
+          }) => {
+            console.log('1️⃣ UISETTING_RESET_CHANGED_SETTINGS state trigger');
+            const newContext = cloneDeep(context);
+            newContext.internal.changedSettings = {};
+            return newContext;
+          })]
+        },
+        UISETTING_UPDATE_DEVICE_TYPE: {
+          actions: [assign(({
+            context,
+            event
+          }) => {
+            console.log('1️⃣ UISETTING_UPDATE_DEVICE_TYPE state trigger: ', event);
+            const deviceType = event.deviceType || 'desktop';
+            if (context.internal.deviceType === deviceType) {
+              console.log('Device type unchanged');
+              return context;
             }
-          })), 'updateReduxSettings']
+            const newContext = cloneDeep(context);
+            newContext.internal.deviceType = deviceType;
+            // Recalculate settings for new device
+            const routeForBracket = context.internal.routePattern || context.internal.currentRoute;
+            const routeOverride = context.internal.configModel.override([routeForBracket, deviceType], {
+              strict: true
+            });
+            newContext.public = routeOverride.getValue('');
+            return newContext;
+          }), 'updateReduxSettings']
         }
-        // SAVE: {
-        //     actions: ['updateReduxSettings'],
-        // },
       }
     }
   }

package/lib/machines/settingsMachine.js.map

@@ -1 +1 @@
-{"version":3,"file":"settingsMachine.js","sources":["../../src/machines/settingsMachine.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
+{"version":3,"file":"settingsMachine.js","sources":["../../src/machines/settingsMachine.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/lib/machines/settingsMachine.test.d.ts

@@ -0,0 +1,2 @@
+import 'reflect-metadata';
+//# sourceMappingURL=settingsMachine.test.d.ts.map

package/lib/machines/settingsMachine.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settingsMachine.test.d.ts","sourceRoot":"","sources":["../../src/machines/settingsMachine.test.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC"}