@m4l/components 0.1.69 → 0.1.70

package/components/areas/components/{index.ffb147c7.js → index.359c2b18.js}

@@ -1,83 +1,82 @@
-import { I as IconButton } from "../../mui_extended/IconButton/index.917f0d3c.js";
-import { u as useAreasStore, a as useArea, b as useAreas, c as useAreaStore } from "../hooks/useArea/index.3a0d4b8c.js";
-import { useEnvironment, useNetwork, useModuleDictionary, useModuleSkeleton, useHostTools, axiosOperation } from "@m4l/core";
+import { I as IconButton } from "../../mui_extended/IconButton/index.57824447.js";
+import { u as useAreasStore } from "../hooks/useArea/index.2adbe001.js";
+import { useEnvironment, useModuleDictionary, useModuleSkeleton, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
 import { shallow } from "zustand/shallow";
-import { A as AREAS_VIEWER_CLASS_NAME, a as AREAS_ADMIN_CLASS_NAME, I as ICONS, g as getAreasDictionary } from "../index.20cbd7b7.js";
-import { I as Icon } from "../../Icon/index.952f0635.js";
+import { A as AREAS_VIEWER_CLASS_NAME, a as AREAS_ADMIN_CLASS_NAME, I as ICONS, g as getAreasDictionary } from "../index.8a58bcbf.js";
+import { I as Icon } from "../../Icon/index.caaed284.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React__default, { createContext, useRef, useEffect, useMemo, useState, useCallback } from "react";
+import React__default, { useMemo, useState, useRef, useCallback, useEffect } from "react";
 import { generateUtilityClasses, Skeleton, styled as styled$1, Typography as Typography$1, Dialog } from "@mui/material";
 import clsx from "clsx";
-import { createStore, useStore } from "zustand";
-import "../contexts/AreasContext/index.7c12b512.js";
-import "../../mui_extended/Accordion/index.51feece8.js";
+import "zustand";
+import { R as ROW_HEIGTH_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, C as CONTAINER_PADDING_GRIDLAYOUT, T as THROTTLE_RESIZE_TIME } from "../contexts/AreasContext/index.de8b4e78.js";
+import "../../mui_extended/Accordion/index.437bb3f8.js";
 import "../../mui_extended/Avatar/index.fe06afd7.js";
 import "react-router-dom";
 import "@mui/material/Button";
-import { B as Button } from "../../mui_extended/Button/index.b34c8b68.js";
-import { I as Image } from "../../Image/index.f30f79f0.js";
+import { B as Button } from "../../mui_extended/Button/index.f8ce9ccd.js";
+import { I as Image } from "../../Image/index.82a6cd46.js";
 import "@mui/lab";
-import { T as Typography } from "../../mui_extended/Typography/index.79e2b06f.js";
+import { T as Typography } from "../../mui_extended/Typography/index.b3c6e71c.js";
 import "../../mui_extended/Popover/index.226f247e.js";
-import { M as MenuActions } from "../../mui_extended/MenuActions/index.651dec44.js";
-import "../../mui_extended/Pager/index.e0663072.js";
+import { M as MenuActions } from "../../mui_extended/MenuActions/index.37043326.js";
+import "../../mui_extended/Pager/index.eeed3bd5.js";
 import "../../mui_extended/Tab/index.e0653a0a.js";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../utils/index.b5c62ef0.js";
+import { g as getComponentUtilityClass } from "../../../utils/index.a2312a73.js";
 import { styled } from "@mui/material/styles";
-import { r as react_resizable_css } from "../../../react-resizable.e0470767.js";
-import { immer } from "zustand/middleware/immer";
-import { devtools } from "zustand/middleware";
-import debounce from "lodash/debounce";
-import cloneDeep from "lodash.clonedeep";
-import { useResponsiveDesktop, useFirstRender, useHostTheme, useFormatter, useLocales } from "@m4l/graphics";
+import { r as react_resizable_css } from "../../../react-resizable.8307e056.js";
 import { WidthProvider, Responsive } from "react-grid-layout";
 import { m } from "framer-motion";
 import "../../animate/LoadingScreen/index.1d0c4307.js";
 import "../../animate/PropagateLoader/index.be5b02c3.js";
+import { W as WindowToolsMFProvider } from "../contexts/WindowToolsMFContext/index.8f3e2a04.js";
+import { D as DynamicMFParmsProvider } from "../contexts/DynamicMFParmsContext/index.1607c78e.js";
 import "react-hook-form";
-import "../../hook-form/RHFAutocomplete/index.21377a2c.js";
-import "../../HelperText/index.742d547d.js";
-import "../../hook-form/RHFAutocompleteAsync/index.8c7e0842.js";
-import "../../hook-form/RHFCheckbox/index.83902d07.js";
+import "../../hook-form/RHFAutocomplete/index.09c400c3.js";
+import "../../HelperText/index.a69e9509.js";
+import debounce from "lodash/debounce";
+import "../../hook-form/RHFAutocompleteAsync/index.e8acff04.js";
+import "../../hook-form/RHFCheckbox/index.70310f35.js";
 import "@mui/x-date-pickers";
-import "../../hook-form/RHFDateTime/index.166250d8.js";
-import "../../hook-form/RHFTextField/index.55687a39.js";
-import "../../hook-form/RHFPeriod/index.61baf76f.js";
-import "../../Period/index.3ff6f53b.js";
-import "../../CommonActions/components/Actions/index.1b2a0921.js";
-import "../../../contexts/ModalContext/index.76d5ccee.js";
-import { c as cjs } from "../../../react-draggable.de1aac90.js";
-import "../../ModalDialog/index.4d663d0a.js";
-import { R as ResizeableWindow } from "../../Resizeable/index.ff97422e.js";
-import "../../modal/WindowConfirm.7ae1326f.js";
-import "../../modal/WindowBase.7ce0b21e.js";
+import "../../hook-form/RHFDateTime/index.7b815072.js";
+import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender, useResizeObserver } from "@m4l/graphics";
+import "../../hook-form/RHFTextField/index.d4c39859.js";
+import "../../hook-form/RHFPeriod/index.3c7d393c.js";
+import "../../Period/index.fbf074d3.js";
+import "../../CommonActions/components/Actions/index.154d7cb6.js";
+import "../../../contexts/ModalContext/index.8e3cd7a8.js";
+import { c as cjs } from "../../../react-draggable.0d64c8b1.js";
+import "../../ModalDialog/index.cdfd1ae8.js";
+import { R as ResizeableWindow } from "../../Resizeable/index.aafda79e.js";
+import "../../modal/WindowConfirm.e21763cb.js";
+import "../../modal/WindowBase.6a40a945.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../../hook-form/RHFUpload/index.eb4d0dac.js";
-import "../../DataGrid/index.75ea6038.js";
+import "../../hook-form/RHFUpload/index.31044674.js";
+import "../../DataGrid/index.2f4a0e64.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
-import "../../DynamicFilter/index.aaeea668.js";
+import "../../DynamicFilter/index.789ab474.js";
 import "../../ScrollBar/index.bbe48f4d.js";
 import "yup";
 import "@hookform/resolvers/yup";
 import "../../../contexts/RHFormContext/index.a7511399.js";
-import { D as DraggableWindow } from "../../../vendor.6a33c6d2.js";
-import "../../LanguagePopover/index.526e544e.js";
-import "../../NavLink/index.92008184.js";
-import "../../NoItemSelected/index.6f2952ab.js";
-import "../../ObjectLogs/index.d1eee18b.js";
+import "../../LanguagePopover/index.5af28b9e.js";
+import "../../NavLink/index.251fcf0d.js";
+import "../../NoItemSelected/index.3b9d16e3.js";
+import "../../ObjectLogs/index.57ea68b3.js";
 import "../../../react-json-view.57125fcf.js";
-import "../../PaperForm/index.e9db704b.js";
+import "../../PaperForm/index.d2d492ea.js";
 import "../../Page/index.4237c241.js";
 import "../../PropertyValue/index.dfcfe1ba.js";
 import "../../../react-splitter-layout.8b1655c8.js";
 import "../../SplitLayout/index.5a8355d8.js";
-import "../../SideBar/index.365f64f0.js";
-import { a as useWindow, b as useWindowStore } from "../hooks/index.d09ea7de.js";
+import "../../SideBar/index.3bc6a634.js";
+import { D as DraggableWindow } from "../../../vendor.8edaef93.js";
 import { L as LinearProgress } from "../../mui_extended/LinearProgress/index.c92b9ba9.js";
 import { v as varBounce } from "../../animate/variants/bounce.784aaaaa.js";
+import { throttle } from "lodash";
 const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "root",
   "areaRoot",
@@ -94,7 +93,8 @@ const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "panelWindowsRoot",
   "panelWindowsButtonContainer",
   "selected",
-  "isMobile"
+  "isMobile",
+  "loading"
 ], AREAS_VIEWER_CLASS_NAME);
 const useAreasViewerUtilityClasses = (ownerState) => {
   const slots = {
@@ -125,7 +125,8 @@ const areasAdminClasses = generateUtilityClasses(AREAS_ADMIN_CLASS_NAME, [
   "areaContainerChips",
   "areaIconLayer",
   "selected",
-  "isMobile"
+  "isMobile",
+  "disabled"
 ], AREAS_ADMIN_CLASS_NAME);
 const useAreasAdminUtilityClasses = (ownerState) => {
   const slots = {
@@ -144,7 +145,8 @@ const AreaChip = (props) => {
   const {
     areaId,
     selected,
-    areaName
+    areaName,
+    disabled
   } = props;
   const {
     host_static_assets,
@@ -153,14 +155,14 @@ const AreaChip = (props) => {
   const {
     deleteArea,
     selectArea
-  } = useAreasStore((state) => state.actions);
+  } = useAreasStore((state) => state.areasActions);
   const onClickDeleteArea = (e) => {
     e.stopPropagation();
     deleteArea(areaId);
   };
   return /* @__PURE__ */ jsxs("div", {
     role: "presentation",
-    className: clsx(areasAdminClasses.areaChipRoot, selected ? areasAdminClasses.selected : null),
+    className: clsx(areasAdminClasses.areaChipRoot, selected ? areasAdminClasses.selected : null, disabled ? areasAdminClasses.disabled : null),
     onClick: () => {
       selectArea(areaId);
     },
@@ -171,6 +173,7 @@ const AreaChip = (props) => {
       className: areasAdminClasses.areaChipDeleteButton,
       src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.DELETE_AREA}`,
       size: "small",
+      disabled,
       onClick: onClickDeleteArea
     })]
   });
@@ -198,17 +201,18 @@ const AreasAdminRoot = styled("div")`
 `;
 function AreasAdmin() {
   const areas = useAreasStore((state) => state.areas, shallow);
-  const currentArea = useAreasStore((state) => state.currentArea, shallow);
+  const currentArea = useAreasStore((state) => state.currentAreaId, shallow);
   const status = useAreasStore((state) => state.ownerState.status);
   const classesRoot = useAreasStore((state) => state.adminClasses.root);
+  const areasLength = useAreasStore((state) => state.areas.length);
   const {
     addArea
-  } = useAreasStore((state) => state.actions, shallow);
+  } = useAreasStore((state) => state.areasActions, shallow);
   const {
     host_static_assets,
     environment_assets
   } = useEnvironment();
-  console.log("Render AreasAdmin", status, areas);
+  console.log("Render AreasAdmin", areas);
   if (status !== "loaded") {
     return null;
   }
@@ -224,7 +228,8 @@ function AreasAdmin() {
       children: areas.map((area) => /* @__PURE__ */ jsx(AreaChip, {
         areaId: area.id,
         selected: area.id === currentArea,
-        areaName: area.name
+        areaName: area.name,
+        disabled: areasLength === 1
       }, area.id))
     }), /* @__PURE__ */ jsx(IconButton, {
       className: areasAdminClasses.areasAddButton,
@@ -235,15 +240,12 @@ function AreasAdmin() {
   });
 }
 const AreasViewerRoot = styled("div")`
-
     /* display: flex; */
     width: 100%;
     height: 100%;
     overflow: hidden;
     /* flex-grow: 1; */
     position: relative;
-    
-    
 
     //areaRoot
     & .${areasViewerClasses.areaRoot} {
@@ -266,7 +268,6 @@ const AreasViewerRoot = styled("div")`
     }
 
     &.${areasViewerClasses.isMobile} .${areasViewerClasses.areaRoot} {
-        
     }
 
     // areaGridLayoutPanelContainer
@@ -282,7 +283,7 @@ const AreasViewerRoot = styled("div")`
     }
     // areaGridLayout
     & .${areasViewerClasses.areaGridLayout} {
-        height: 100%!important;
+        height: 100% !important;
         overflow: auto;
         flex-grow: 1;
     }
@@ -313,76 +314,12 @@ const AreasViewerRoot = styled("div")`
     }
 
     // windowRoot
-    & .${areasViewerClasses.windowRoot} {
-        inset:0;
-        position: absolute;
-        display: flex;
-        flex-direction: column;
-        /* height: 100%; */
-        /* width: 100%; */
-        overflow: hidden;
-        border: 1px solid gray;
-
-        background-color: ${(props) => props.theme.palette.background.default};
-        padding: ${(props) => props.theme.spacing(0)};
-    }
-
-    & .${areasViewerClasses.windowRoot}.${areasViewerClasses.selected} {
-        border-top: 1px solid green;
-    }
-    // windowHeader
-    & .${areasViewerClasses.windowHeader} {
-        display: flex;
-        gap: 4px;
-        
-        align-items: center;
-        position: relative;
-
-        padding: 8px;
-        justify-content: end;
-        min-height: ${(props) => props.theme.spacing(5)} ;
-
-        border-bottom: 1px solid ${(props) => props.theme.palette.divider},
-        overflow: hidden;
-        cursor: move;
-        height: 60px;
-
-
-
-        > span: {
-            margin-right: 12px;
-        }
-    }
-    // windowHeaderTitle
-    & .${areasViewerClasses.windowHeaderTitle} {
-        width: 100%;
-        max-width: 100%;
-        overflow: hidden;
-        white-space: nowrap;
-        color: ${(props) => props.theme.palette.text.primary};
-        margin-left: 12px;
-        margin-right: 24px;
-        text-overflow: ellipsis;
-    }
-    // windowHeaderMainActions
-    & .${areasViewerClasses.windowHeaderMainActions} {
-        display: flex;
-
-        gap: 4px;
-    }
-
-    
-    // windowHeaderMainActions
-    & .${areasViewerClasses.windowContent} {
-        flex-grow: 1;
-        position: relative;
-    }
 
     // windowModalRoot
-    & .${areasViewerClasses.windowModalRoot} .${areasViewerClasses.windowRoot}{
+    & .${areasViewerClasses.windowModalRoot} {
         padding: 16px;
     }
-    
+
     .react-grid-layout {
         position: relative;
         transition: height 200ms ease;
@@ -393,7 +330,7 @@ const AreasViewerRoot = styled("div")`
     }
     .react-grid-item img {
         pointer-events: none;
-        user-select: none;  
+        user-select: none;
     }
     .react-grid-item.cssTransforms {
         transition-property: transform;
@@ -432,7 +369,7 @@ const AreasViewerRoot = styled("div")`
     }
 
     .react-grid-item > .react-resizable-handle::after {
-        content: "";
+        content: '';
         position: absolute;
         right: 3px;
         bottom: 3px;
@@ -498,747 +435,10 @@ const AreasViewerRoot = styled("div")`
         transform: rotate(45deg);
     }
 
-    
     ${react_resizable_css}
 
-
     ${(props) => props.theme.components?.M4LAreasViewer?.styleOverrides}
-
-    
 `;
-const ROW_HEIGTH_GRIDLAYOUT = 100;
-const CONTAINER_PADDING_GRIDLAYOUT = 3;
-const DEBOUCED_SAVE_TIME = 500;
-const COOKIE_BREAKPOINT_LAYOUTS = "layoutPros";
-const COOKIE_WINDOWS = "windows";
-const NORMALIZED_BREAKPOINTS = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 };
-const NORMALIZED_COLS = { lg: 24, md: 20, sm: 12, xs: 8, xxs: 2 };
-const MAXIMIZED_COLS = { lg: 24, md: 20, sm: 12, xs: 8, xxs: 2 };
-const getParmsFromValue = (key, data) => {
-  try {
-    if (Array.isArray(data)) {
-      let ob = data.find((f) => f.id === key);
-      if (ob) {
-        ob = JSON.parse(ob.value);
-      }
-      return ob;
-    }
-  } catch (error) {
-  }
-  return void 0;
-};
-function setAddBreakPoints(state, newLayout) {
-  const layoutsBreakPoints = state.breakpointsLayouts;
-  const beforeMaximizebreakpointsLayouts = state.beforeMaximizebreakpointsLayouts;
-  for (const key in layoutsBreakPoints) {
-    const layoutBreakpoint = layoutsBreakPoints[key];
-    layoutBreakpoint.push(newLayout);
-  }
-  if (state.viewMode === "single") {
-    for (const key in beforeMaximizebreakpointsLayouts) {
-      const beforeLayoutBreakpoint = beforeMaximizebreakpointsLayouts[key];
-      beforeLayoutBreakpoint.push(newLayout);
-    }
-  }
-  return layoutsBreakPoints;
-}
-function setBreakPointsMaximized(state, layoutId) {
-  const layoutsBreakPoints = state.breakpointsLayouts;
-  const container = document.getElementsByClassName(`${areasViewerClasses.areaRoot}`)[0];
-  console.log(`Setting breakpoints`, container);
-  if (container) {
-    const clientHeight = container.clientHeight;
-    for (const key in layoutsBreakPoints) {
-      const layoutBreakpoint = layoutsBreakPoints[key];
-      const cols = key in MAXIMIZED_COLS ? MAXIMIZED_COLS[key] : 1;
-      const heigth_by_rowheigth = clientHeight / (ROW_HEIGTH_GRIDLAYOUT + 2 * CONTAINER_PADDING_GRIDLAYOUT);
-      for (let index = 0; index < layoutBreakpoint.length; index++) {
-        const l = layoutBreakpoint[index];
-        if (l.i === layoutId) {
-          l.x = 0;
-          l.y = 0;
-          l.h = heigth_by_rowheigth;
-          l.w = cols;
-          l.minW = 0;
-          l.maxW = cols;
-          l.minH = 0;
-          l.maxH = heigth_by_rowheigth;
-          l.isResizable = false;
-          l.isDraggable = false;
-        } else {
-          l.x = 0;
-          l.y = 1;
-          l.h = 0;
-          l.w = 0;
-          l.minW = 0;
-          l.maxW = 0;
-          l.minH = 0;
-          l.maxH = 0;
-        }
-        l.isResizable = false;
-        l.isDraggable = false;
-      }
-    }
-  }
-  return layoutsBreakPoints;
-}
-function getDataFromResponse(data, state) {
-  const newBreakPointsLayouts = getParmsFromValue(COOKIE_BREAKPOINT_LAYOUTS, data);
-  const windows = getParmsFromValue(COOKIE_WINDOWS, data);
-  const newGridLayouts = [];
-  const newHashWindowLayouts = {};
-  if (windows) {
-    for (const key in windows) {
-      const element = windows[key];
-      if (element && element["layoutProps"] && element["mfProps"] && element["emergeType"] === "layout" && element["winType"] === "microfrontend") {
-        element["layoutProps"].i = key;
-        newGridLayouts.push(element["layoutProps"]);
-        newHashWindowLayouts[key] = {
-          ...element,
-          windowId: key,
-          emergeType: "layout",
-          onClose: state.actions.closeWindowLayout
-        };
-      }
-    }
-  }
-  return {
-    newBreakPointsLayouts,
-    newGridLayouts,
-    newHashWindowLayouts
-  };
-}
-const createAreaStore = (initProps) => {
-  const startProps = {
-    zPopUpIndex: 999,
-    status: "init",
-    breakpointsLayouts: {},
-    beforeMaximizebreakpointsLayouts: {},
-    gridLayouts: [],
-    windowModal: null,
-    windowsPopUps: [],
-    hashWindowsPopups: {},
-    hashWindowsLayouts: {},
-    currentLayoutId: "",
-    currentPopUpId: "",
-    viewMode: initProps.isDesktop ? "multiple" : "single",
-    breakpoints: NORMALIZED_BREAKPOINTS,
-    cols: NORMALIZED_COLS,
-    ...initProps
-  };
-  return createStore(
-    devtools(
-      immer((set, get) => ({
-        ...startProps,
-        actions: {
-          addWindow: (newWindowProps) => {
-            const windowId = `${get().id}_window_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
-            console.log("addWindow", newWindowProps.emergeType);
-            if (newWindowProps.emergeType === "layout") {
-              get().actions.addWindowLayout(windowId, newWindowProps);
-            } else if (newWindowProps.emergeType === "popup") {
-              get().actions.addWindowPopUp(windowId, newWindowProps);
-            } else if (newWindowProps.emergeType === "modal") {
-              get().actions.addWindowModal(windowId, newWindowProps);
-            }
-          },
-          closeWindowModal: () => {
-            set((state) => {
-              state.windowModal = void 0;
-            });
-          },
-          addWindowModal: (container_id, newWindowModalProps) => {
-            set((state) => {
-              state.windowModal = { ...newWindowModalProps, windowId: container_id };
-            });
-          },
-          closeWindowPopUp: (removePopUpId) => {
-            set((state) => {
-              const removeIndex = state.windowsPopUps.findIndex(
-                (wpId) => wpId === removePopUpId
-              );
-              if (removeIndex > -1) {
-                state.windowsPopUps.splice(removeIndex, 1);
-              }
-              delete state.hashWindowsPopups[removePopUpId];
-            });
-          },
-          addWindowPopUp: (windowId, newWindowPopupProps) => {
-            let popUpId = windowId;
-            set((state) => {
-              if (newWindowPopupProps.replaceMeId) {
-                for (const key in state.hashWindowsPopups) {
-                  const WindoPopUp = state.hashWindowsPopups[key];
-                  if (WindoPopUp.replaceMeId === newWindowPopupProps.replaceMeId) {
-                    popUpId = key;
-                    state.hashWindowsPopups[key].dynamicParams = newWindowPopupProps.dynamicParams;
-                    break;
-                  }
-                }
-              }
-              if (popUpId === windowId) {
-                state.windowsPopUps.push(windowId);
-                state.hashWindowsPopups[windowId] = {
-                  ...newWindowPopupProps,
-                  emergeType: "popup",
-                  windowId,
-                  onClose: get().actions.closeWindowPopUp,
-                  zIndex: state.zPopUpIndex
-                };
-                state.currentPopUpId = windowId;
-              }
-            });
-            get().actions.selectWindowPopUp(popUpId);
-          },
-          closeWindowLayout: (removeLayoutId) => {
-            set((state) => {
-              const removeIndex = state.gridLayouts.findIndex(
-                (gl) => gl.i === removeLayoutId
-              );
-              if (removeIndex > -1) {
-                state.gridLayouts.splice(removeIndex, 1);
-              }
-              delete state.hashWindowsLayouts[removeLayoutId];
-            });
-            get().actions.saveLayouts();
-            if (get().singleId === removeLayoutId) {
-              get().actions.maximizeLayout();
-            }
-          },
-          addWindowLayout: (windowId, newWindow) => {
-            const newLayout = {
-              ...newWindow.layoutProps,
-              i: windowId,
-              isDraggable: true,
-              isResizable: true,
-              winType: newWindow.winType
-            };
-            set((state) => {
-              state.gridLayouts.push(newLayout);
-              state.hashWindowsLayouts[windowId] = {
-                ...newWindow,
-                windowId,
-                emergeType: "layout",
-                onClose: get().actions.closeWindowLayout
-              };
-              setAddBreakPoints(state, newLayout);
-            });
-            get().actions.selectWindowLayout(windowId);
-            if (get().viewMode === "single") {
-              get().actions.maximizeLayout(windowId);
-            }
-            get().actions.saveLayouts();
-            get().actions.bouncedSaveBreakpointsLayouts();
-          },
-          saveLayouts: () => {
-            let nrKeys = 0;
-            const saveObjetc = {};
-            for (const key in get().hashWindowsLayouts) {
-              const element = get().hashWindowsLayouts[key];
-              if (element.winType === "microfrontend") {
-                const newElement = { ...element };
-                delete newElement.onClose;
-                delete newElement.devCookies;
-                saveObjetc[key] = newElement;
-                nrKeys++;
-              }
-            }
-            if (nrKeys > 0) {
-              get().networkOperation({
-                method: "PUT",
-                endPoint: `cookies/${get().id}/${COOKIE_WINDOWS}`,
-                data: {
-                  value: JSON.stringify(saveObjetc)
-                },
-                toastSuccess: false,
-                toastError: false
-              });
-            } else {
-              get().networkOperation({
-                method: "DELETE",
-                endPoint: `cookies`,
-                data: { f: [{ n: "container_id", o: "c", o1: get().id }] },
-                toastSuccess: false,
-                toastError: false
-              });
-            }
-          },
-          bouncedSaveBreakpointsLayouts: debounce(
-            () => {
-              const purgedLayouts = {
-                ...get().viewMode === "multiple" ? get().breakpointsLayouts : get().beforeMaximizebreakpointsLayouts
-              };
-              const finalLayouts = {};
-              for (const key in purgedLayouts) {
-                const element = purgedLayouts[key];
-                purgedLayouts[key] = element.filter((l) => {
-                  if (l.i === "none") {
-                    return false;
-                  }
-                  if (get().hashWindowsLayouts[l.i]) {
-                    return true;
-                  }
-                  return false;
-                });
-                if (purgedLayouts[key].length > 0) {
-                  finalLayouts[key] = purgedLayouts[key];
-                }
-              }
-              if (Object.keys(finalLayouts).length > 0) {
-                get().networkOperation({
-                  method: "PUT",
-                  endPoint: `cookies/${get().id}/${COOKIE_BREAKPOINT_LAYOUTS}`,
-                  data: {
-                    value: JSON.stringify(finalLayouts)
-                  },
-                  toastSuccess: false,
-                  toastError: false
-                });
-              }
-            },
-            DEBOUCED_SAVE_TIME
-          ),
-          onBreakpointsLayoutsChange: (_currentLayouts, newAllLayouts) => {
-            set((state) => {
-              state.breakpointsLayouts = newAllLayouts;
-            });
-            if (!get().singleId) {
-              get().actions.bouncedSaveBreakpointsLayouts();
-            }
-          },
-          selectWindowLayout: (layoutId) => {
-            set((state) => {
-              state.currentLayoutId = layoutId;
-              if (state.currentPopUpId !== "" && state.hashWindowsPopups[state.currentPopUpId]) {
-                const windowPopup = state.hashWindowsPopups[state.currentPopUpId];
-                if (windowPopup.parentLayoutId !== layoutId) {
-                  state.currentPopUpId = "";
-                }
-              }
-            });
-          },
-          selectWindowPopUp: (popUpId) => {
-            set((state) => {
-              state.zPopUpIndex++;
-              state.currentPopUpId = popUpId;
-              state.zPopUpIndex++;
-              state.currentPopUpId = popUpId;
-              state.hashWindowsPopups[popUpId].zIndex = state.zPopUpIndex;
-              if (state.hashWindowsPopups[popUpId].parentLayoutId && state.hashWindowsPopups[popUpId].parentLayoutId !== "") {
-                state.currentLayoutId = state.hashWindowsPopups[popUpId].parentLayoutId;
-              } else {
-                state.currentLayoutId = "";
-              }
-            });
-            setTimeout(() => {
-              const container = document.getElementsByClassName(
-                `${areasViewerClasses.areaGridLayoutPanelContainer}-${get().id}`
-              )[0];
-              const element = document.getElementsByClassName(
-                `${areasViewerClasses.windowPopupRoot}-${popUpId}`
-              )[0];
-              if (element && container) {
-                const { top, left } = element.getBoundingClientRect();
-                const { top: containerTop, left: containerLeft } = container.getBoundingClientRect();
-                container.scrollTop = container.scrollTop + top - containerTop;
-                container.scrollLeft = container.scrollLeft + left - containerLeft;
-              }
-            }, 100);
-          },
-          maximizeLayout: (layoutId) => {
-            let finalLayoutId = layoutId;
-            set((state) => {
-              if (state.viewMode === "multiple") {
-                state.beforeMaximizebreakpointsLayouts = cloneDeep(
-                  state.breakpointsLayouts
-                );
-              }
-              if (!finalLayoutId) {
-                if (state.gridLayouts.length > 0) {
-                  finalLayoutId = state.gridLayouts[0].i;
-                }
-              }
-              state.viewMode = "single";
-              state.singleId = finalLayoutId;
-              setBreakPointsMaximized(state, finalLayoutId);
-            });
-            if (finalLayoutId) {
-              get().actions.selectWindowLayout(finalLayoutId);
-            }
-          },
-          normalizeLayouts: () => {
-            set((state) => {
-              if (!state.isDesktop)
-                return;
-              if (state.isDesktop && state.viewMode === "single") {
-                state.viewMode = "multiple";
-                state.singleId = void 0;
-                state.breakpointsLayouts = state.beforeMaximizebreakpointsLayouts;
-              }
-            });
-          }
-        },
-        internalActions: {
-          loadFromApi: () => {
-            if (get().status !== "init") {
-              return;
-            }
-            if (!get().loadAreasFromNetwork || !get().loadWindows) {
-              set((state) => {
-                state.status = "loaded";
-              });
-              return;
-            }
-            get().networkOperation({
-              method: "GET",
-              endPoint: `cookies`,
-              parms: { f: [{ n: "container_id", o: "e", o1: get().id }] },
-              toastSuccess: false,
-              toastError: false
-            }).then((response) => {
-              set((state) => {
-                const {
-                  newBreakPointsLayouts,
-                  newGridLayouts,
-                  newHashWindowLayouts
-                } = getDataFromResponse(response.data, state);
-                if (state.viewMode === "multiple") {
-                  state.breakpointsLayouts = newBreakPointsLayouts;
-                } else {
-                  state.breakpointsLayouts = newBreakPointsLayouts;
-                  state.beforeMaximizebreakpointsLayouts = newBreakPointsLayouts;
-                }
-                state.gridLayouts = newGridLayouts;
-                state.hashWindowsLayouts = newHashWindowLayouts;
-                state.status = "loaded";
-              });
-              console.log("loadFromApi", get().viewMode);
-              if (get().viewMode === "single") {
-                get().actions.maximizeLayout();
-              }
-            }).catch((_response) => {
-              set((state) => {
-                state.status = "loaded";
-              });
-            });
-          },
-          changeDesktopBreakpoint: (isDesktop) => {
-            const previousState = get().isDesktop;
-            set((state) => {
-              state.isDesktop = isDesktop;
-            });
-            if (previousState != isDesktop) {
-              if (isDesktop) {
-                get().actions.normalizeLayouts();
-              } else {
-                if (get().viewMode === "multiple") {
-                  if (get().gridLayouts.length > 0) {
-                    get().actions.maximizeLayout(get().gridLayouts[0].i);
-                  }
-                }
-              }
-            }
-          }
-        }
-      })),
-      { name: `Area state ${initProps.id}` }
-    )
-  );
-};
-const AreaContext = createContext(null);
-const AreaProvider = (props) => {
-  const {
-    children,
-    id,
-    selected: active,
-    loadWindows = true
-  } = props;
-  const [loadAreasFromNetwork, loadCookiesFromNetwork] = useAreasStore((state) => [state.loadAreasFromNetwork, state.loadCookiesFromNetwork], shallow);
-  const {
-    setAreaLink
-  } = useAreasStore((state) => state.internalActions);
-  const isDesktop = useResponsiveDesktop();
-  const isFirstRender = useFirstRender([isDesktop]);
-  const {
-    networkOperation
-  } = useNetwork();
-  const areaStoreRef = useRef();
-  if (!areaStoreRef.current) {
-    areaStoreRef.current = createAreaStore({
-      id,
-      networkOperation,
-      loadAreasFromNetwork,
-      loadCookiesFromNetwork,
-      loadWindows,
-      isDesktop: !!isDesktop
-    });
-  }
-  const {
-    loadFromApi,
-    changeDesktopBreakpoint
-  } = useStore(areaStoreRef.current, (state) => state.internalActions, shallow);
-  const status = useStore(areaStoreRef.current, (state) => state.status, shallow);
-  useEffect(() => {
-    if (!isFirstRender) {
-      changeDesktopBreakpoint(!!isDesktop);
-    }
-  }, [isDesktop]);
-  useEffect(() => {
-    if (areaStoreRef.current) {
-      setAreaLink(id, areaStoreRef.current);
-    }
-    return () => {
-    };
-  }, []);
-  useEffect(() => {
-    if (active && status === "init") {
-      loadFromApi();
-    }
-  }, [active]);
-  return /* @__PURE__ */ jsx(AreaContext.Provider, {
-    value: areaStoreRef.current,
-    children
-  });
-};
-if (process.env.NODE_ENV !== "production") {
-  AreaProvider.displayName = "AreaProvider";
-}
-React__default.memo(AreaProvider);
-const WindowToolsMFContext = createContext(null);
-function WindowToolsMFProvider(props) {
-  const {
-    children,
-    ...other
-  } = props;
-  return /* @__PURE__ */ jsx(WindowToolsMFContext.Provider, {
-    value: {
-      ...other
-    },
-    children
-  });
-}
-React__default.memo(WindowToolsMFProvider);
-const DynamicMFParmsContext = createContext(null);
-function DynamicMFParmsProvider(props) {
-  const {
-    children,
-    store
-  } = props;
-  return /* @__PURE__ */ jsx(DynamicMFParmsContext.Provider, {
-    value: store,
-    children
-  });
-}
-const MemonizedDynamicMFParmsProvider = React__default.memo(DynamicMFParmsProvider);
-const createDynamicMFStore = (initProps) => {
-  const startProps = {
-    ...initProps
-  };
-  return createStore(
-    devtools(
-      immer((set, _get) => ({
-        ...startProps,
-        actions: {
-          changeData: (newDynamicMFState) => {
-            set((state) => {
-              state.dynamicMFParameters = newDynamicMFState;
-            });
-          }
-        }
-      })),
-      { name: `dyamic store ${initProps.windowId}` }
-    )
-  );
-};
-function getCookiesContainer(data, containerId) {
-  const cookies = {};
-  try {
-    if (Array.isArray(data)) {
-      for (let i = 0; i < data.length; i++) {
-        if (data[i]?.container_id === containerId && data[i]?.id) {
-          cookies[data[i]?.id] = JSON.parse(data[i].value);
-        }
-      }
-    }
-  } catch (error) {
-  }
-  return cookies;
-}
-const createWindowStore = (initProps) => {
-  const startProps = {
-    status: "init",
-    moduleActions: [],
-    cookies: initProps.devCookies || { moduleCookies: {}, windowCookies: {} },
-    ...initProps
-  };
-  delete startProps.devCookies;
-  return createStore(
-    devtools(
-      immer((set, get, _api) => ({
-        ...startProps,
-        actions: {
-          setActions: (newActions, version) => {
-            set((state) => {
-              state.moduleActions = cloneDeep(newActions);
-              state.version = version;
-              console.log("LLEGO Version", version);
-            });
-          },
-          close: () => {
-            const onClose = get().onClose;
-            if (onClose) {
-              onClose(get().windowId);
-            }
-          },
-          getWindowId: () => {
-            return get().windowId;
-          },
-          getCookie: (id) => {
-            return get().cookies.windowCookies[id] || get().cookies.moduleCookies[id];
-          },
-          getCookies: (type) => {
-            if (type === "window") {
-              return get().cookies.windowCookies;
-            } else {
-              return get().cookies.moduleCookies;
-            }
-          },
-          setCookie: (id, type, cookie) => {
-            get().networkOperation({
-              method: "PUT",
-              endPoint: `cookies/${type === "module" ? get().moduleId : get().windowId}/${id}`,
-              data: {
-                value: JSON.stringify(cookie)
-              },
-              toastSuccess: false,
-              toastError: false
-            });
-            set((state) => {
-              if (type === "window") {
-                state.cookies.windowCookies[id] = cookie;
-              } else {
-                state.cookies.moduleCookies[id] = cookie;
-              }
-            });
-          }
-        },
-        internalActions: {
-          loadCookiesFromApi: () => {
-            if (get().status === "init") {
-              get().networkOperation({
-                method: "GET",
-                endPoint: `cookies`,
-                parms: {
-                  f: [
-                    { n: "container_id", o: "e", o1: get().windowId },
-                    { n: "container_id", o: "e", o1: get().moduleId }
-                  ]
-                },
-                toastSuccess: false,
-                toastError: false
-              }).then((response) => {
-                set((state) => {
-                  state.cookies.moduleCookies = getCookiesContainer(
-                    response.data,
-                    state.moduleId
-                  );
-                  state.cookies.windowCookies = getCookiesContainer(
-                    response.data,
-                    state.windowId
-                  );
-                  state.status = "loaded";
-                });
-              }).catch((_response) => {
-                set((state) => {
-                  state.status = "loaded";
-                });
-              });
-            }
-          },
-          saveModuleCookies: () => {
-            for (const key in get().cookies.windowCookies) {
-              const cookie = get().cookies.windowCookies[key];
-              get().networkOperation({
-                method: "PUT",
-                endPoint: `cookies/${get().moduleId}/${key}`,
-                data: {
-                  value: JSON.stringify(cookie)
-                },
-                toastSuccess: false,
-                toastError: false
-              });
-            }
-          }
-        }
-      })),
-      {
-        name: `window store ${initProps.windowId}`,
-        store: `window dev store ${initProps.windowId}`,
-        trace: true
-      }
-    )
-  );
-};
-const WindowContext = createContext(null);
-function WindowMFProvider(props) {
-  const {
-    children,
-    ...other
-  } = props;
-  const {
-    networkOperation
-  } = useNetwork();
-  const windowStoreRef = useRef();
-  const dynamicMFStoreRef = useRef();
-  const areaStore = useArea();
-  const areasStore = useAreas();
-  if (!dynamicMFStoreRef.current) {
-    dynamicMFStoreRef.current = createDynamicMFStore({
-      dynamicMFParameters: props.dynamicParams,
-      windowId: props.windowId
-    });
-  }
-  if (!windowStoreRef.current) {
-    windowStoreRef.current = createWindowStore({
-      ...other,
-      dynamicMFStore: dynamicMFStoreRef.current,
-      networkOperation,
-      areaStore,
-      areasStore
-    });
-  }
-  useEffect(() => {
-    windowStoreRef.current?.getState().internalActions.loadCookiesFromApi();
-    return () => {
-      console.debug("useEffect cleanUP WindowMFProvider", props.windowId, windowStoreRef.current);
-    };
-  }, []);
-  useEffect(() => {
-    if (windowStoreRef.current?.getState().status === "loaded") {
-      dynamicMFStoreRef.current?.getState().actions.changeData(props.dynamicParams);
-    }
-  }, [props.dynamicParams]);
-  return /* @__PURE__ */ jsx(WindowContext.Provider, {
-    value: windowStoreRef.current,
-    children
-  });
-}
-const Component = (props) => {
-  const {
-    component
-  } = props;
-  const store = useWindow();
-  const dynamicMFStore = useWindowStore((state) => state.dynamicMFStore);
-  const actions = useWindowStore((state) => state.actions, shallow);
-  return /* @__PURE__ */ jsx(WindowToolsMFProvider, {
-    ...actions,
-    children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, {
-      store: dynamicMFStore,
-      children: typeof component === "function" ? component(store) : component
-    })
-  });
-};
-React__default.memo(Component);
 styled("div")(({
   theme
 }) => ({
@@ -1429,24 +629,32 @@ function getMainActions(isDesktop, moduleActions) {
   );
   return mainActions;
 }
-function getMenuActions(isDesktop, moduleActions, urlPrefix, saveModuleCookies, version) {
+function getMenuActions(windowId, isDesktop, moduleActions, urlPrefix, saveModuleCookies, resetModuleCookies, version) {
   let menuActions = [...moduleActions.filter((action) => action.visibility !== "allways")];
   if (isDesktop !== void 0 && isDesktop) {
     menuActions = menuActions.filter((action) => action.visibility === "normal");
   }
-  console.log("getMenuActions", version);
-  const savePropsAction = {
-    urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/split_vertical.svg`,
-    onClick: () => saveModuleCookies,
+  const saveCookiesAction = {
+    urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.SAVE_COOKIES}`,
+    onClick: () => saveModuleCookies(windowId),
     disabled: false,
     visibility: "normal",
     dictionaryId: getAreasDictionary("label_persist_module_cookies"),
-    key: "save_props"
+    key: "save_cookies"
+  };
+  menuActions.push(saveCookiesAction);
+  const resetCookiesAction = {
+    urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.RESET_COOKIES}`,
+    onClick: () => resetModuleCookies(windowId),
+    disabled: false,
+    visibility: "normal",
+    dictionaryId: getAreasDictionary("label_reset_module_cookies"),
+    key: "reset_cookes"
   };
-  menuActions.push(savePropsAction);
+  menuActions.push(resetCookiesAction);
   if (version) {
     const versionAction = {
-      urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/version.svg`,
+      urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.VERSION}`,
       onClick: () => {
       },
       disabled: true,
@@ -1458,8 +666,14 @@ function getMenuActions(isDesktop, moduleActions, urlPrefix, saveModuleCookies,
   }
   return menuActions;
 }
-function MainActions() {
-  const [moduleActions] = useWindowStore((state) => [state.moduleActions], shallow);
+function MainActions(props) {
+  const {
+    windowId
+  } = props;
+  const moduleActions = useAreasStore((state) => {
+    const window2 = state.hashWindows[windowId];
+    return window2?.moduleActions || [];
+  }, shallow);
   const {
     getLabel
   } = useModuleDictionary();
@@ -1482,17 +696,24 @@ function MainActions() {
     })
   });
 }
-function Header() {
-  const [url_icon, title, moduleActions, onClose, container_id, version] = useWindowStore((state) => [state.url_icon, state.title, state.moduleActions, state.onClose, state.windowId, state.version], shallow);
+function Header(props) {
   const {
-    saveModuleCookies
-  } = useWindowStore((state) => state.internalActions);
-  const emergeType = useWindowStore((state) => state.emergeType);
-  const maximizedId = useAreaStore((state) => state.singleId);
+    areaId,
+    windowId,
+    emergeType
+  } = props;
+  const [url_icon, title, moduleActions, onClose, version, singleId] = useAreasStore((state) => {
+    const window2 = state.hashWindows[windowId];
+    return [window2.url_icon, window2.title, window2.moduleActions, window2.onClose, window2.version, state.hashAreas[areaId].singleId];
+  }, shallow);
+  const {
+    saveModuleCookies,
+    resetModuleCookies
+  } = useAreasStore((state) => state.windowActions, shallow);
   const {
     maximizeLayout,
     normalizeLayouts
-  } = useAreaStore((state) => state.actions, shallow);
+  } = useAreasStore((state) => state.areaActions, shallow);
   const {
     host_static_assets,
     environment_assets
@@ -1501,16 +722,16 @@ function Header() {
   const isSkeleton = useModuleSkeleton();
   const urlPrefix = `${host_static_assets}/${environment_assets}`;
   const menuActions = useMemo(() => {
-    return getMenuActions(isDesktop, moduleActions, urlPrefix, saveModuleCookies, version);
+    return getMenuActions(windowId, isDesktop, moduleActions, urlPrefix, saveModuleCookies, resetModuleCookies, version);
   }, [moduleActions, isDesktop]);
   const onCloseLocal = () => {
-    onClose && onClose(container_id);
+    onClose && onClose(windowId);
   };
   const maxNormalize = () => {
-    if (maximizedId) {
-      normalizeLayouts();
+    if (singleId) {
+      normalizeLayouts(areaId);
     } else {
-      maximizeLayout(container_id);
+      maximizeLayout(areaId, windowId);
     }
   };
   if (isSkeleton) {
@@ -1525,10 +746,12 @@ function Header() {
       className: areasViewerClasses.windowHeaderTitle,
       variant: "h5",
       children: `${title}`
-    }), /* @__PURE__ */ jsx(MainActions, {}), isDesktop && emergeType === "layout" && /* @__PURE__ */ jsx(IconButton, {
+    }), /* @__PURE__ */ jsx(MainActions, {
+      windowId
+    }), isDesktop && emergeType === "layout" && /* @__PURE__ */ jsx(IconButton, {
       onClick: maxNormalize,
       "aria-label": "click",
-      src: maximizedId ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NORMALIZE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.MAXIMIZE}`
+      src: singleId ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NORMALIZE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.MAXIMIZE}`
     }), menuActions.length > 0 && /* @__PURE__ */ jsx(MenuActions, {
       arrowType: "no-arrow",
       marginTop: "12px!important",
@@ -1795,7 +1018,11 @@ function MFLoader(props) {
   }, [divScript]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
-      id: divScript.divContainerId
+      id: divScript.divContainerId,
+      style: {
+        width: "100%",
+        height: "100%"
+      }
     }), isLoading ? /* @__PURE__ */ jsx(LoadingMF, {
       loadingProgress: networkProgress,
       setNetworkRefresh
@@ -1807,84 +1034,195 @@ MFLoader.defaultProps = {
   window
 };
 const MicroFrontend = (props) => {
-  const dynamicMFStore = useWindowStore((state) => state.dynamicMFStore, shallow);
-  const moduleId = useWindowStore((state) => state.moduleId, shallow);
-  const actions = useWindowStore((state) => state.actions, shallow);
   return /* @__PURE__ */ jsx(MFLoader, {
-    ...props,
-    moduleId,
-    dynamicMFStore,
-    windowTools: {
-      ...actions
-    }
+    ...props
   });
 };
-React__default.memo(MicroFrontend);
-const InnerForHooks$1 = (props) => {
+const MemonizedMicroFrontend = React__default.memo(MicroFrontend);
+const Component = (props) => {
   const {
-    winType
+    component,
+    dynamicMFStore,
+    windowTools
   } = props;
-  const status = useWindowStore((state) => state.status);
-  if (status !== "loaded") {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(Header, {}), /* @__PURE__ */ jsx("div", {
-      className: areasViewerClasses.windowContent,
-      children: winType === "microfrontend" ? /* @__PURE__ */ jsx(MicroFrontend, {
-        ...props.mfProps
-      }) : /* @__PURE__ */ jsx(Component, {
-        component: props.component
-      })
-    })]
+  return /* @__PURE__ */ jsx(WindowToolsMFProvider, {
+    ...windowTools,
+    children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, {
+      store: dynamicMFStore,
+      children: typeof component === "function" ? component() : component
+    })
   });
 };
-React__default.memo(InnerForHooks$1);
+React__default.memo(Component);
+const WindowRoot = styled("div")`
+
+    inset:0;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    /* height: 100%; */
+    /* width: 100%; */
+    overflow: hidden;
+    border: 1px solid gray;
+
+    background-color: ${(props) => props.theme.palette.background.default};
+    padding: ${(props) => props.theme.spacing(0)};
+    &.${areasViewerClasses.selected} {
+        border-top: 1px solid green;
+    }
+    &.${areasViewerClasses.loading} {
+        border-left: 2px solid red;
+    }
+    // windowHeader
+    & .${areasViewerClasses.windowHeader} {
+        display: flex;
+        gap: 4px;
+        
+        align-items: center;
+        position: relative;
+
+        padding: 8px;
+        justify-content: end;
+        min-height: ${(props) => props.theme.spacing(5)} ;
+
+        border-bottom: 1px solid ${(props) => props.theme.palette.divider},
+        overflow: hidden;
+        cursor: move;
+        height: 60px;
+
+
+
+        > span: {
+            margin-right: 12px;
+        }
+    }
+    // windowHeaderTitle
+    & .${areasViewerClasses.windowHeaderTitle} {
+        width: 100%;
+        max-width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        color: ${(props) => props.theme.palette.text.primary};
+        margin-left: 12px;
+        margin-right: 24px;
+        text-overflow: ellipsis;
+    }
+    // windowHeaderMainActions
+    & .${areasViewerClasses.windowHeaderMainActions} {
+        display: flex;
+
+        gap: 4px;
+    }
+
+    
+    // windowHeaderMainActions
+    & .${areasViewerClasses.windowContent} {
+        flex-grow: 1;
+        position: relative;
+    }
+
+    // windowModalRoot
+    & .${areasViewerClasses.windowModalRoot} {
+        padding: 16px;
+    }
+
+    ${(props) => props.theme.components?.M4LAreasViewerWindow?.styleOverrides}
+
+    
+`;
 const Window = (props) => {
   const {
-    emergeType
+    emergeType,
+    windowId,
+    moduleId,
+    areaId
   } = props;
-  const selected = useAreaStore((state) => emergeType === "layout" ? state.currentLayoutId : state.currentPopUpId) === props.windowId;
+  const selected = useAreasStore((state) => emergeType === "layout" ? state.hashAreas[areaId].currentLayoutId : state.hashAreas[areaId].currentPopUpId) === windowId;
+  const wd = useAreasStore((state) => state.hashWindows[windowId], shallow);
+  const {
+    setActions,
+    getCookie,
+    getCookies,
+    setCookie,
+    close,
+    setLoading
+  } = useAreasStore((state) => state.windowActions, shallow);
   const {
     selectWindowPopUp,
     selectWindowLayout
-  } = useAreaStore((state) => state.actions);
+  } = useAreasStore((state) => state.areaActions);
+  const {
+    loadCookiesFromApi
+  } = useAreasStore((state) => state.windowActions);
   const onTouch = () => {
     if (!selected) {
       if (emergeType === "popup") {
-        selectWindowPopUp(props.windowId);
+        selectWindowPopUp(areaId, props.windowId);
       } else if (emergeType === "layout") {
-        selectWindowLayout(props.windowId);
+        selectWindowLayout(areaId, props.windowId);
       }
     }
   };
-  return /* @__PURE__ */ jsx("div", {
+  const windowTools = useMemo(() => ({
+    getWindowId: () => windowId,
+    setActions: (newActions, version) => {
+      setActions(windowId, newActions, version);
+    },
+    getCookie: (id) => getCookie(windowId, id),
+    getCookies: (type) => getCookies(windowId, type),
+    setCookie: (id, type, cookie) => {
+      setCookie(windowId, id, type, cookie);
+    },
+    close: () => close(windowId),
+    setLoading: (isLoading) => {
+      setLoading(windowId, isLoading);
+    }
+  }), []);
+  useEffect(() => {
+    loadCookiesFromApi(windowId);
+  }, []);
+  return /* @__PURE__ */ jsxs(WindowRoot, {
     role: "presentation",
-    className: clsx(areasViewerClasses.windowRoot, selected ? areasViewerClasses.selected : null),
+    className: clsx(areasViewerClasses.windowRoot, selected ? areasViewerClasses.selected : null, wd.loading ? areasViewerClasses.loading : null),
     onMouseDown: onTouch,
-    children: /* @__PURE__ */ jsx(WindowMFProvider, {
-      ...props,
-      children: /* @__PURE__ */ jsx(InnerForHooks$1, {
-        ...props
+    children: [/* @__PURE__ */ jsx(Header, {
+      areaId,
+      windowId,
+      emergeType
+    }), /* @__PURE__ */ jsx("div", {
+      className: areasViewerClasses.windowContent,
+      children: wd.status === "init" ? /* @__PURE__ */ jsx("div", {
+        children: "BRUCE cargando"
+      }) : wd.winType === "microfrontend" ? /* @__PURE__ */ jsx(MemonizedMicroFrontend, {
+        moduleId,
+        dynamicMFStore: wd.dynamicMFStore,
+        windowTools,
+        ...wd.mfProps
+      }) : /* @__PURE__ */ jsx(Component, {
+        moduleId,
+        dynamicMFStore: wd.dynamicMFStore,
+        windowTools,
+        component: wd.component
       })
-    })
+    })]
   });
 };
 const MemonizedWindow = React__default.memo(Window);
 const WindowPopUp = (props) => {
   const {
+    areaId,
     windowProps,
     windowId
   } = props;
   const {
     selectWindowPopUp
-  } = useAreaStore((store) => store.actions);
-  const selectedPopUpId = useAreaStore((store) => store.currentPopUpId);
-  const zIndex = useAreaStore((store) => store.hashWindowsPopups[props.windowId].zIndex);
+  } = useAreasStore((store) => store.areaActions);
+  const selectedPopUpId = useAreasStore((store) => store.hashAreas[areaId].currentPopUpId);
+  const zIndex = useAreasStore((store) => store.hashAreas[areaId].hashWindowsPopups[props.windowId].zIndex);
   const isSelected = props.windowId === selectedPopUpId;
   const onTouch = () => {
     if (!isSelected) {
-      selectWindowPopUp(props.windowId);
+      selectWindowPopUp(areaId, props.windowId);
     }
   };
   return /* @__PURE__ */ jsx(DraggableWindow, {
@@ -1909,105 +1247,51 @@ const WindowPopUp = (props) => {
   });
 };
 const MemonizedWindowPopUp = React__default.memo(WindowPopUp);
-styled("div")(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  height: "100%",
-  overflow: "hidden",
-  padding: theme.spacing(3)
-}));
-const WrapperWindowModal = styled(Dialog)(() => ({
-  "& .MuiDialog-container": {},
-  "&.m4l_selected": {
-    borderTop: "1px solid green"
-  }
-}));
-const WindowModal = (props) => {
-  const {
-    closeWindowModal
-  } = useAreaStore((state) => state.actions);
-  const isDesktop = useResponsiveDesktop();
-  const onClose = () => {
-    closeWindowModal();
-  };
-  const DragabblePaperComponent = (_props) => {
-    return /* @__PURE__ */ jsx(cjs.exports, {
-      handle: ".m4l_draggable_handle",
-      bounds: "parent",
-      children: /* @__PURE__ */ jsx(ResizeableWindow, {
-        className: areasViewerClasses.windowModalRoot,
-        width: props.width,
-        height: props.height,
-        children: /* @__PURE__ */ jsx(Window, {
-          ...props,
-          onClose
-        })
-      })
-    });
-  };
-  function PaperComponent(_props) {
-    return /* @__PURE__ */ jsx(Window, {
-      ...props,
-      onClose
-    });
-  }
-  return /* @__PURE__ */ jsx(WrapperWindowModal, {
-    open: true,
-    disablePortal: true,
-    scroll: "paper",
-    onKeyDown: (event) => {
-      if (event.key === "Escape") {
-        onClose();
-      }
-    },
-    "aria-labelledby": "child-modal-title",
-    "aria-describedby": "child-modal-description",
-    PaperComponent: isDesktop ? DragabblePaperComponent : PaperComponent,
-    maxWidth: false,
-    fullWidth: !isDesktop,
-    fullScreen: false,
-    disableEnforceFocus: true
-  });
-};
-const MemonizedWindowModal = React__default.memo(WindowModal);
 const ResponsiveGridLayout = WidthProvider(Responsive);
-const GridLayout = () => {
-  const gridLayouts = useAreaStore((state) => state.gridLayouts, shallow);
-  const hashWindowsPopups = useAreaStore((state) => state.hashWindowsPopups, shallow);
-  const hashWindowsLayouts = useAreaStore((state) => state.hashWindowsLayouts, shallow);
-  const breakPointsLayouts = useAreaStore((state) => state.breakpointsLayouts, shallow);
-  const windowsPopUps = useAreaStore((state) => state.windowsPopUps, shallow);
-  const windowModal = useAreaStore((state) => state.windowModal, shallow);
-  const breakpoints = useAreaStore((state) => state.breakpoints, shallow);
-  const viewMode = useAreaStore((state) => state.viewMode, shallow);
-  const cols = useAreaStore((state) => state.cols, shallow);
+const GridLayout = (props) => {
+  const {
+    areaId
+  } = props;
+  const windowsLayouts = useAreasStore((state) => state.hashAreas[areaId].windowsLayouts, shallow);
+  const hashWindowsPopups = useAreasStore((state) => state.hashAreas[areaId].hashWindowsPopups, shallow);
+  const hashWindowsLayouts = useAreasStore((state) => state.hashAreas[areaId].hashWindowsLayouts, shallow);
+  const breakPointsLayouts = useAreasStore((state) => state.hashAreas[areaId].breakPointsLayouts, shallow);
+  const windowsPopUps = useAreasStore((state) => state.hashAreas[areaId].windowsPopUps, shallow);
+  const breakpoints = useAreasStore((state) => state.hashAreas[areaId].breakpoints, shallow);
+  const viewMode = useAreasStore((state) => state.hashAreas[areaId].viewMode, shallow);
+  const cols = useAreasStore((state) => state.hashAreas[areaId].cols, shallow);
   const {
     onBreakpointsLayoutsChange
-  } = useAreaStore((state) => state.actions);
+  } = useAreasStore((state) => state.areaActions, shallow);
   function onBreakpointChange(_newBreakpoint, _newCols) {
   }
   useEffect(() => {
-    console.log("ResponsiveGridLayout resize");
-    window.dispatchEvent(new Event("resize"));
-  }, [viewMode, gridLayouts]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsxs(ResponsiveGridLayout, {
+    setTimeout(() => {
+      window.dispatchEvent(new Event("resize"));
+    }, 100);
+  }, [viewMode, windowsLayouts]);
+  return /* @__PURE__ */ jsxs(
+    ResponsiveGridLayout,
+    {
       autoSize: false,
       compactType: "vertical",
       measureBeforeMount: true,
       resizeHandles: ["nw", "se"],
-      className: areasViewerClasses.areaGridLayout,
+      className: clsx(areasViewerClasses.areaGridLayout, `${areasViewerClasses.areaGridLayout}-${areaId}`),
       layouts: breakPointsLayouts,
-      onLayoutChange: onBreakpointsLayoutsChange,
+      onLayoutChange: (currentLayouts, newAllLayouts) => onBreakpointsLayoutsChange(areaId, currentLayouts, newAllLayouts),
       onBreakpointChange,
       breakpoints,
       cols,
       rowHeight: ROW_HEIGTH_GRIDLAYOUT,
-      margin: [5, 5],
+      margin: [MARGIN_GRIDLAYOUT, MARGIN_GRIDLAYOUT],
       containerPadding: [CONTAINER_PADDING_GRIDLAYOUT, CONTAINER_PADDING_GRIDLAYOUT],
       draggableHandle: ".m4l_draggable_handle",
-      isBounded: false,
+      onWidthChange: () => {
+        console.log("onWidthChange", areaId);
+      },
       preventCollision: false,
+      verticalCompact: true,
       children: [/* @__PURE__ */ jsx("div", {
         className: areasViewerClasses.areaGridLayoutPopupsContainer,
         "data-grid": {
@@ -2032,7 +1316,7 @@ const GridLayout = () => {
           }
           return null;
         })
-      }, "none"), gridLayouts.map((l) => {
+      }, "none"), windowsLayouts.map((l) => {
         if (hashWindowsLayouts[l.i]) {
           return /* @__PURE__ */ jsx("div", {
             children: /* @__PURE__ */ jsx(MemonizedWindow, {
@@ -2042,40 +1326,31 @@ const GridLayout = () => {
         }
         return null;
       })]
-    }), windowModal && /* @__PURE__ */ jsx(MemonizedWindowModal, {
-      ...windowModal
-    })]
-  });
-};
-const InnerForHooks = () => {
-  const status = useAreaStore((state) => state.status);
-  if (status === "loaded") {
-    return /* @__PURE__ */ jsx(GridLayout, {});
-  } else {
-    return /* @__PURE__ */ jsx("div", {
-      children: "Loading.. Intentar si falla."
-    });
-  }
+    }
+  );
 };
-const PanelWindows = () => {
-  const status = useAreaStore((state) => state.status);
-  const mode = useAreaStore((state) => state.viewMode);
-  const singleId = useAreaStore((state) => state.singleId);
-  const gridLayouts = useAreaStore((state) => state.gridLayouts, shallow);
-  const hashWindowsLayouts = useAreaStore((state) => state.hashWindowsLayouts, shallow);
+const PanelWindows = (props) => {
+  const {
+    areaId
+  } = props;
+  const status = useAreasStore((state) => state.hashAreas[areaId].status);
+  const mode = useAreasStore((state) => state.hashAreas[areaId].viewMode);
+  const singleId = useAreasStore((state) => state.hashAreas[areaId].singleId);
+  const windowsLayouts = useAreasStore((state) => state.hashAreas[areaId].windowsLayouts, shallow);
+  const hashWindowsLayouts = useAreasStore((state) => state.hashAreas[areaId].hashWindowsLayouts, shallow);
   const {
     maximizeLayout
-  } = useAreaStore((state) => state.actions);
+  } = useAreasStore((state) => state.areaActions);
   const onTouched = (layoutId) => {
-    maximizeLayout(layoutId);
+    maximizeLayout(areaId, layoutId);
   };
   if (status === "loaded") {
-    if (mode !== "single" || gridLayouts.length < 2) {
+    if (mode !== "single" || windowsLayouts.length < 2) {
       return null;
     }
     return /* @__PURE__ */ jsx("div", {
       className: areasViewerClasses.panelWindowsRoot,
-      children: gridLayouts.map((l) => {
+      children: windowsLayouts.map((l) => {
         return /* @__PURE__ */ jsx("div", {
           className: clsx(areasViewerClasses.panelWindowsButtonContainer, singleId === l.i ? areasViewerClasses.selected : null),
           children: /* @__PURE__ */ jsx(IconButton, {
@@ -2090,51 +1365,150 @@ const PanelWindows = () => {
     return null;
   }
 };
+const InnerForHooks = (props) => {
+  const {
+    areaId
+  } = props;
+  const status = useAreasStore((state) => state.hashAreas[areaId].status);
+  return /* @__PURE__ */ jsxs("div", {
+    className: clsx(areasViewerClasses.areaGridLayoutPanelContainer, `${areasViewerClasses.areaGridLayoutPanelContainer}-${areaId}`),
+    children: [
+      status === "loaded" ? /* @__PURE__ */ jsx(GridLayout, {
+        areaId
+      }) : /* @__PURE__ */ jsx("div", {
+        children: "Loading.. Intentar si falla."
+      }),
+      /* @__PURE__ */ jsx(PanelWindows, {
+        areaId
+      })
+    ]
+  });
+};
 const Area = (props) => {
   const {
-    selected
+    selected,
+    areaId
   } = props;
   const classesAreaRoot = useAreasStore((state) => state.viwerClasses.areaRoot);
+  const status = useAreasStore((state) => state.hashAreas[areaId].status);
+  const {
+    resizeMaximixedLayout
+  } = useAreasStore((state) => state.areaActions, shallow);
+  const throttleResizeMaximixedLayout = throttle(() => {
+    console.log("throttleResizeMaximixedLayout", areaId);
+    resizeMaximixedLayout(areaId);
+  }, THROTTLE_RESIZE_TIME, {
+    leading: false
+  });
+  const onResize = useCallback((_target) => {
+    throttleResizeMaximixedLayout();
+  }, []);
+  const ref = useResizeObserver(onResize);
+  if (status === "init") {
+    return null;
+  }
   return /* @__PURE__ */ jsx("div", {
-    className: clsx(classesAreaRoot, selected ? areasViewerClasses.selected : null),
-    children: /* @__PURE__ */ jsx(AreaProvider, {
-      ...props,
-      children: /* @__PURE__ */ jsxs("div", {
-        className: clsx(areasViewerClasses.areaGridLayoutPanelContainer, `${areasViewerClasses.areaGridLayoutPanelContainer}-${props.id}`),
-        children: [/* @__PURE__ */ jsx(InnerForHooks, {}), /* @__PURE__ */ jsx(PanelWindows, {})]
-      })
+    className: clsx(classesAreaRoot, selected ? areasViewerClasses.selected : null, status === "loading" ? areasViewerClasses.loading : null),
+    ref,
+    children: /* @__PURE__ */ jsx(InnerForHooks, {
+      areaId
     })
   });
 };
 Area.displayName = "Area";
+styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  overflow: "hidden",
+  padding: theme.spacing(3)
+}));
+const WrapperWindowModal = styled(Dialog)(({ theme }) => ({
+  hola: 1,
+  backgroundColor: theme.palette.background.paper,
+  "& .MuiDialog-container": {},
+  "&.m4l_selected": {
+    borderTop: "1px solid green"
+  },
+  ...theme.components?.M4LAreasViewerModal?.styleOverrides
+}));
+const WindowModal = (props) => {
+  const {
+    windowId
+  } = props;
+  const {
+    onClose
+  } = useAreasStore((state) => state.hashWindowsModals[windowId]);
+  const isDesktop = useResponsiveDesktop();
+  const DragabblePaperComponent = (_props) => {
+    return /* @__PURE__ */ jsx(cjs.exports, {
+      handle: ".m4l_draggable_handle",
+      bounds: "parent",
+      children: /* @__PURE__ */ jsx(ResizeableWindow, {
+        width: props.windowProps?.width || 400,
+        height: props.windowProps?.height || 300,
+        children: /* @__PURE__ */ jsx(Window, {
+          ...props
+        })
+      })
+    });
+  };
+  function PaperComponent(_props) {
+    return /* @__PURE__ */ jsx(Window, {
+      ...props
+    });
+  }
+  return /* @__PURE__ */ jsx(WrapperWindowModal, {
+    className: areasViewerClasses.windowModalRoot,
+    open: true,
+    scroll: "paper",
+    onKeyDown: (event) => {
+      if (event.key === "Escape") {
+        onClose && onClose(windowId);
+      }
+    },
+    "aria-labelledby": "child-modal-title",
+    "aria-describedby": "child-modal-description",
+    PaperComponent: isDesktop ? DragabblePaperComponent : PaperComponent,
+    maxWidth: false,
+    fullWidth: !isDesktop,
+    fullScreen: false,
+    disableEnforceFocus: true
+  });
+};
+const MemonizedWindowModal = React__default.memo(WindowModal);
 function AreasViewer() {
-  const areas = useAreasStore((state) => state.areas);
-  const currentArea = useAreasStore((state) => state.currentArea);
+  const areas = useAreasStore((state) => state.areas, shallow);
+  const windowsModals = useAreasStore((state) => state.windowsModals);
+  const hashWindowsModals = useAreasStore((state) => state.hashWindowsModals);
+  const currentArea = useAreasStore((state) => state.currentAreaId);
   const status = useAreasStore((state) => state.ownerState.status);
   const classesRoot = useAreasStore((state) => state.viwerClasses.root);
-  return /* @__PURE__ */ jsx(AreasViewerRoot, {
-    className: classesRoot,
-    children: status === "loaded" ? areas.map((area) => {
-      return /* @__PURE__ */ jsx(Area, {
-        id: area.id,
-        selected: currentArea === area.id,
-        loadWindows: area.loadWindows
-      }, area.id);
-    }) : /* @__PURE__ */ jsx(Fragment, {
-      children: "Bruce cargando"
-    })
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(AreasViewerRoot, {
+      className: classesRoot,
+      children: status === "loaded" ? areas.map((area) => {
+        return /* @__PURE__ */ jsx(Area, {
+          areaId: area.id,
+          selected: currentArea === area.id
+        }, area.id);
+      }) : /* @__PURE__ */ jsx(Fragment, {
+        children: "Bruce cargando"
+      })
+    }), windowsModals.map((wm) => {
+      if (hashWindowsModals[wm]) {
+        return /* @__PURE__ */ jsx(MemonizedWindowModal, {
+          ...hashWindowsModals[wm]
+        }, wm);
+      }
+      return null;
+    })]
   });
 }
 export {
-  AreaContext as A,
-  DynamicMFParmsContext as D,
-  MemonizedDynamicMFParmsProvider as M,
-  WindowContext as W,
+  AreasAdmin as A,
   useAreasAdminUtilityClasses as a,
-  WindowToolsMFContext as b,
-  AreasAdmin as c,
-  AreasViewer as d,
-  WindowToolsMFProvider as e,
-  DynamicMFParmsProvider as f,
+  areasViewerClasses as b,
+  AreasViewer as c,
   useAreasViewerUtilityClasses as u
 };