@admin-layout/tailwind-design-pro 12.0.16-alpha.7 → 12.0.16-alpha.71

package/lib/icons.d.ts

@@ -12,5 +12,7 @@ export declare const icons: {
     ChevronForwardCircleIcon: import("@react-icons/all-files/lib").IconType;
     ChevronUpIcon: import("@react-icons/all-files/lib").IconType;
     ChevronLeftIcon: import("@react-icons/all-files/lib").IconType;
+    PushpinLineIcon: import("@react-icons/all-files/lib").IconType;
+    PushpinFillIcon: import("@react-icons/all-files/lib").IconType;
 };
 //# sourceMappingURL=icons.d.ts.map

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;sEAkO/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,set}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,115 +27,186 @@ 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);
+    // Input settings are now flat: { logo: '...', theme: '...', [/route][device]: {...}, ... }
+    const rawSettings = input?.settings || {};
+    console.log('🔍 Context Init - Raw settings:', {
+      hasRawSettings: !!rawSettings,
+      rawSettingsKeys: `${Object.keys(rawSettings).length} keys`
+    });
+    // ConfigurationModel handles ALL bracket patterns automatically
+    const {
+      model: configModel
+    } = extractConfigurationWithModel(rawSettings);
+    // Get current route from input (passed from component) or default to '/'
+    const currentRoute = input?.currentRoute || '/';
+    const routePattern = input?.routePattern;
+    const deviceType = 'desktop'; // Default, will be updated by component
+    // Build override keys with fallback logic - use route pattern if available
+    const routeForBracket = routePattern || currentRoute;
+    const routeDeviceKey = [routeForBracket, deviceType];
+    // Apply overrides by chaining: base -> device -> route+device
+    const routeOverride = configModel.override(routeDeviceKey, {
+      strict: true
+    });
+    // Extract final merged settings (already flat, no uilayout wrapper)
+    const mergedContents = routeOverride.getValue('');
+    const effectiveSettings = mergedContents;
+    // Build PUBLIC settings (exposed to consumers)
+    // Build the UI settings object from all potential sources
+    const publicSettings = effectiveSettings;
+    // Build INTERNAL state (machine only, never exposed)
+    const internalState = {
+      configModel,
+      deviceType,
+      currentRoute,
+      changedSettings: {},
+      routePattern: input?.routePattern
+    };
+    // Return context with EXPLICIT separation
+    const context = {
+      public: publicSettings,
+      internal: internalState
+    };
+    console.log('🔍 Context Init - Final structure:', {
+      hasPublic: !!context.public,
+      hasInternal: !!context.internal,
+      publicKeys: `${Object.keys(context.public).length} keys`,
+      internalKeys: Object.keys(context.internal)
+    });
+    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
+            console.log('🔧 Machine UPDATE event:', event);
+            // Clone context to avoid mutations
+            const newContext = cloneDeep(context);
+            // Process each changed setting
             Object.keys(event.value).forEach(key => {
-              set(newContext, key, event.value[key]);
+              const newValue = event.value[key];
+              console.log('🔧 Processing key:', key, 'value:', newValue);
+              // Update ConfigurationModel
+              newContext.internal.configModel.setValue(key, newValue);
+              // Track in changedSettings
+              newContext.internal.changedSettings[key] = newValue;
+              // If it's a bracket key, check if it applies to current context
+              if (key.startsWith('[')) {
+                const bracketPattern = key.match(/^(\[[^\]]+\])+/);
+                if (bracketPattern) {
+                  const identifier = bracketPattern[0];
+                  // Use route pattern if available, otherwise fall back to current route
+                  const routeForBracket = newContext.internal.routePattern || newContext.internal.currentRoute;
+                  const currentIdentifier = `[${routeForBracket}][${newContext.internal.deviceType}]`;
+                  const deviceOnlyIdentifier = `[${newContext.internal.deviceType}]`;
+                  // If this override applies to current route/device, update public settings
+                  if (identifier === currentIdentifier || identifier === deviceOnlyIdentifier) {
+                    const remainingKey = key.substring(identifier.length);
+                    const path = remainingKey.startsWith('.') ? remainingKey.substring(1) : remainingKey;
+                    set(newContext.public, path, newValue);
+                    set(newContext.public, 'routerPattern', currentIdentifier);
+                  }
+                }
+              } else {
+                // Regular setting - update public settings directly
+                set(newContext.public, key, newValue);
+              }
             });
             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:', routePath, 'pattern:', 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,
-            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
-            }
-          })), 'updateReduxSettings']
+        UISETTING_RESET: {
+          actions: [assign(({
+            context
+          }) => {
+            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
+          }) => {
+            const newContext = cloneDeep(context);
+            newContext.internal.changedSettings = {};
+            return newContext;
+          })]
+        },
+        UISETTING_UPDATE_DEVICE_TYPE: {
+          actions: [assign(({
+            context,
+            event
+          }) => {
+            const deviceType = event.deviceType || 'desktop';
+            console.log('🔧 UPDATE_DEVICE_TYPE to:', deviceType);
+            // Clone context to avoid mutations
+            const newContext = cloneDeep(context);
+            // Update internal device type
+            newContext.internal.deviceType = deviceType;
+            // Build override keys using route pattern if available
+            const routeForBracket = context.internal.routePattern || context.internal.currentRoute;
+            const routeDeviceKey = [routeForBracket, deviceType];
+            // Apply overrides by chaining: base -> device -> route+device
+            const routeOverride = context.internal.configModel.override(routeDeviceKey, {
+              strict: true
+            });
+            // Extract final merged settings
+            const effectiveSettings = routeOverride.getValue('');
+            // Rebuild PUBLIC settings with new device overrides
+            newContext.public = effectiveSettings;
+            return newContext;
+          }), 'updateReduxSettings']
         }
         // SAVE: {
         //     actions: ['updateReduxSettings'],