@m4l/components 0.1.65 → 0.1.67

package/components/areas/components/{AreasViewer/index.1aa4d12d.js → index.98d1c90a.js}

@@ -1,86 +1,83 @@
-import { styled } from "@mui/material/styles";
-import { r as react_resizable_css } from "../../../../react-resizable.79fb7404.js";
-import { generateUtilityClasses, Skeleton, styled as styled$1, Typography as Typography$1, Dialog } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../utils/index.64775c34.js";
-import { a as AREAS_VIEWER_CLASS_NAME, g as getAreasDictionary, I as ICONS } from "../../index.bfe6bf91.js";
-import React__default, { createContext, useRef, useEffect, useMemo, useState, useCallback } from "react";
+import { I as IconButton } from "../../mui_extended/IconButton/index.d31f1039.js";
+import { u as useAreasStore, a as useArea, b as useAreas, c as useAreaStore } from "../hooks/useArea/index.443ac11d.js";
+import { useEnvironment, useNetwork, useModuleDictionary, useModuleSkeleton, useHostTools, axiosOperation } from "@m4l/core";
 import { shallow } from "zustand/shallow";
-import { useNetwork, useModuleDictionary, useEnvironment, useModuleSkeleton, useHostTools, axiosOperation } from "@m4l/core";
+import { A as AREAS_VIEWER_CLASS_NAME, a as AREAS_ADMIN_CLASS_NAME, I as ICONS, g as getAreasDictionary } from "../index.6aec2efe.js";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React__default, { createContext, useRef, useEffect, useMemo, useState, useCallback } from "react";
+import { generateUtilityClasses, Skeleton, styled as styled$1, Typography as Typography$1, Dialog } from "@mui/material";
+import { I as Icon } from "../../Icon/index.321976e8.js";
+import clsx from "clsx";
 import { createStore, useStore } from "zustand";
+import "../contexts/AreasContext/index.7dc6f386.js";
+import "../../mui_extended/Accordion/index.466d66d5.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.680f7d77.js";
+import { I as Image } from "../../Image/index.c5b14688.js";
+import "@mui/lab";
+import { T as Typography } from "../../mui_extended/Typography/index.1d866b8b.js";
+import "../../mui_extended/Popover/index.e271e4f0.js";
+import { M as MenuActions } from "../../mui_extended/MenuActions/index.e1749afa.js";
+import "../../mui_extended/Pager/index.bc67d954.js";
+import "../../mui_extended/Tab/index.e0653a0a.js";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass } from "../../../utils/index.3a4700cd.js";
+import { styled } from "@mui/material/styles";
+import { r as react_resizable_css } from "../../../react-resizable.f3de2742.js";
 import { immer } from "zustand/middleware/immer";
 import { devtools } from "zustand/middleware";
 import debounce from "lodash/debounce";
 import cloneDeep from "lodash.clonedeep";
-import { u as useAreasStore, a as useArea, b as useAreas, c as useAreaStore } from "../../hooks/useArea/index.c7e4f3fc.js";
 import { useResponsiveDesktop, useFirstRender, useHostTheme, useFormatter, useLocales } from "@m4l/graphics";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { WidthProvider, Responsive } from "react-grid-layout";
-import { I as Icon } from "../../../Icon/index.6938827f.js";
 import { m } from "framer-motion";
-import "react-router-dom";
-import "../../../animate/LoadingScreen/index.1d0c4307.js";
-import "../../../animate/PropagateLoader/index.be5b02c3.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.78a489d3.js";
-import clsx from "clsx";
-import "../../contexts/AreasContext/index.b3b26965.js";
-import "../AreasAdmin/index.46fab65b.js";
-import { W as WindowToolsMFProvider } from "../../contexts/index.4ebef035.js";
-import { c as createDynamicMFStore, D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.5b3248df.js";
+import "../../animate/LoadingScreen/index.1d0c4307.js";
+import "../../animate/PropagateLoader/index.be5b02c3.js";
 import "react-hook-form";
-import "../../../hook-form/RHFAutocomplete/index.73d33896.js";
-import { I as Image } from "../../../Image/index.674024d4.js";
-import { T as Typography } from "../../../mui_extended/Typography/index.86505aed.js";
-import "../../../mui_extended/Accordion/index.95a1b021.js";
-import "../../../mui_extended/Avatar/index.fe06afd7.js";
-import "@mui/material/Button";
-import { B as Button } from "../../../mui_extended/Button/index.e4c61b66.js";
-import "@mui/lab";
-import "../../../mui_extended/Popover/index.e271e4f0.js";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.742a57d7.js";
-import "../../../mui_extended/Pager/index.a44594e9.js";
-import "../../../mui_extended/Tab/index.e0653a0a.js";
-import "../../../HelperText/index.1a24d41b.js";
-import "../../../hook-form/RHFAutocompleteAsync/index.21f4cb53.js";
-import "../../../hook-form/RHFCheckbox/index.c3b1884b.js";
+import "../../hook-form/RHFAutocomplete/index.9f9d4ed7.js";
+import "../../HelperText/index.5d8bc10a.js";
+import "../../hook-form/RHFAutocompleteAsync/index.af16b28e.js";
+import "../../hook-form/RHFCheckbox/index.938fb1da.js";
 import "@mui/x-date-pickers";
-import "../../../hook-form/RHFDateTime/index.6c129ce4.js";
-import "../../../hook-form/RHFTextField/index.15659666.js";
-import "../../../hook-form/RHFPeriod/index.cc624bb3.js";
-import "../../../Period/index.a1b7b4cc.js";
-import "../../../CommonActions/components/Actions/index.3b882471.js";
-import "../../../../contexts/ModalContext/index.bfc47ba9.js";
-import { c as cjs } from "../../../../react-draggable.d6441025.js";
-import "../../../ModalDialog/index.3db4480d.js";
-import { R as ResizeableWindow } from "../../../Resizeable/index.ee84ebc5.js";
-import "../../../modal/WindowConfirm.60028bce.js";
-import "../../../modal/WindowBase.1b0657de.js";
+import "../../hook-form/RHFDateTime/index.6c129ce4.js";
+import "../../hook-form/RHFTextField/index.e42cd9c0.js";
+import "../../hook-form/RHFPeriod/index.1b1fafa6.js";
+import "../../Period/index.c5179eae.js";
+import "../../CommonActions/components/Actions/index.5da399f8.js";
+import "../../../contexts/ModalContext/index.53e8904e.js";
+import { c as cjs } from "../../../react-draggable.18cf453f.js";
+import "../../ModalDialog/index.c07975ed.js";
+import { R as ResizeableWindow } from "../../Resizeable/index.d3469af2.js";
+import "../../modal/WindowConfirm.993a8ed9.js";
+import "../../modal/WindowBase.39f1310d.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../../../hook-form/RHFUpload/index.ecf5c788.js";
-import "../../../DataGrid/index.dc84293a.js";
+import "../../hook-form/RHFUpload/index.d79721d2.js";
+import "../../DataGrid/index.775deb12.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
-import "../../../DynamicFilter/index.abc697c7.js";
-import "../../../ScrollBar/index.bbe48f4d.js";
+import "../../DynamicFilter/index.7c7c9d30.js";
+import "../../ScrollBar/index.bbe48f4d.js";
 import "yup";
 import "@hookform/resolvers/yup";
-import "../../../../contexts/RHFormContext/index.a7511399.js";
-import { D as DraggableWindow } from "../../../../vendor.2d9f95b4.js";
-import "../../../LanguagePopover/index.47aa8119.js";
-import "../../../NavLink/index.0d125c6b.js";
-import "../../../NoItemSelected/index.1aa96110.js";
-import "../../../ObjectLogs/index.05788334.js";
-import "../../../../react-json-view.57125fcf.js";
-import "../../../PaperForm/index.b3da0da3.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.99ce4e06.js";
-import { a as useWindow, b as useWindowStore } from "../../hooks/index.ffb1009e.js";
-import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
-import { v as varBounce } from "../../../animate/variants/bounce.784aaaaa.js";
+import "../../../contexts/RHFormContext/index.a7511399.js";
+import { D as DraggableWindow } from "../../../vendor.31965c93.js";
+import "../../LanguagePopover/index.6f0bca65.js";
+import "../../NavLink/index.da57f87d.js";
+import "../../NoItemSelected/index.09faa02c.js";
+import "../../ObjectLogs/index.a48a013c.js";
+import "../../../react-json-view.57125fcf.js";
+import "../../PaperForm/index.15002e62.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.9c026180.js";
+import { a as useWindow, b as useWindowStore } from "../hooks/index.1a0b8ab0.js";
+import { L as LinearProgress } from "../../mui_extended/LinearProgress/index.c92b9ba9.js";
+import { v as varBounce } from "../../animate/variants/bounce.784aaaaa.js";
 const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "root",
   "areaRoot",
@@ -118,1833 +115,1985 @@ const useAreasViewerUtilityClasses = (ownerState) => {
   };
   return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_VIEWER_CLASS_NAME), {});
 };
-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;
+const areasAdminClasses = generateUtilityClasses(AREAS_ADMIN_CLASS_NAME, [
+  "root",
+  "areaChipRoot",
+  "areaChipTitle",
+  "areaChipDeleteButton",
+  "areaChipEditButton",
+  "areasAddButton",
+  "selected",
+  "isMobile"
+], AREAS_ADMIN_CLASS_NAME);
+const useAreasAdminUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState.status, ownerState.isMobile && "isMobile", ownerState.isSkeleton && "isSkeleton"],
+    areaChipRoot: ["areaChipRoot"],
+    areaChipTitle: ["areaChipTitle"],
+    areaChipDeleteButton: ["areaChipDeleteButton"],
+    areaChipEditButton: ["areaChipEditButton"],
+    areasAddButton: ["areasAddButton"]
+  };
+  return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_ADMIN_CLASS_NAME), {});
 };
-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);
+const AreaChip = (props) => {
+  const {
+    areaId,
+    selected,
+    areaName
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    deleteArea,
+    selectArea
+  } = useAreasStore((state) => state.actions);
+  const onClickDeleteArea = (e) => {
+    e.stopPropagation();
+    deleteArea(areaId);
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    role: "presentation",
+    className: clsx(areasAdminClasses.areaChipRoot, selected ? areasAdminClasses.selected : null),
+    onClick: () => {
+      selectArea(areaId);
+    },
+    children: [/* @__PURE__ */ jsx("span", {
+      className: areasAdminClasses.areaChipTitle,
+      children: areaName
+    }), /* @__PURE__ */ jsx(IconButton, {
+      className: areasAdminClasses.areaChipDeleteButton,
+      src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.DELETE_AREA}`,
+      size: "small",
+      onClick: onClickDeleteArea
+    })]
+  });
+};
+AreaChip.displayName = "AreaButtons";
+const AreasAdminRoot = styled("div")`
+    display: flex;
+    position: relative;
+
+    //areaRoot
+    & .${areasAdminClasses.areaChipRoot} {
+        display: flex;
     }
+
+    & .${areasAdminClasses.areaChipRoot}.${areasAdminClasses.selected}::before {
+        content: "";
+        background-color: ${(props) => props.theme.palette.primary.main};
+        height: 100%;
+        width: 8px;
+    },
+
+    ${(props) => props.theme.components?.M4LAreasAdmin}
+ 
+`;
+function AreasAdmin() {
+  const areas = useAreasStore((state) => state.areas, shallow);
+  const currentArea = useAreasStore((state) => state.currentArea, shallow);
+  const status = useAreasStore((state) => state.ownerState.status);
+  const classesRoot = useAreasStore((state) => state.adminClasses.root);
+  const {
+    addArea
+  } = useAreasStore((state) => state.actions, shallow);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  console.log("Render AreasAdmin", status, areas);
+  if (status !== "loaded") {
+    return null;
   }
-  return layoutsBreakPoints;
+  return /* @__PURE__ */ jsxs(AreasAdminRoot, {
+    className: classesRoot,
+    children: [areas.map((area) => /* @__PURE__ */ jsx(AreaChip, {
+      areaId: area.id,
+      selected: area.id === currentArea,
+      areaName: area.name
+    }, area.id)), /* @__PURE__ */ jsx(IconButton, {
+      className: areasAdminClasses.areasAddButton,
+      src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`,
+      size: "small",
+      onClick: addArea
+    })]
+  });
 }
-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;
-      }
+const AreasViewerRoot = styled("div")`
+
+    /* display: flex; */
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    /* flex-grow: 1; */
+    position: relative;
+    
+    
+
+    //areaRoot
+    & .${areasViewerClasses.areaRoot} {
+        display: none;
+        position: absolute;
+        /* flex-grow: 1; */
+        flex-direction: row;
+        inset: 0;
+        /* width: 100%; */
+        overflow: hidden;
+        justify-content: top;
+        align-items: flex-start;
+
+        visibility: hidden;
     }
-  }
-  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
-        };
-      }
+
+    & .${areasViewerClasses.areaRoot}.${areasViewerClasses.selected} {
+        display: block;
+        visibility: visible;
     }
-  }
-  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);
+
+    &.${areasViewerClasses.isMobile} .${areasViewerClasses.areaRoot} {
+        
     }
-  }, [isDesktop]);
-  useEffect(() => {
-    if (areaStoreRef.current) {
-      setAreaLink(id, areaStoreRef.current);
+
+    // areaGridLayoutPanelContainer
+    & .${areasViewerClasses.areaGridLayoutPanelContainer} {
+        display: flex;
+        flex-direction: row;
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
     }
-    return () => {
-    };
-  }, []);
-  useEffect(() => {
-    if (active && status === "init") {
-      loadFromApi();
+    &.${areasViewerClasses.isMobile} .${areasViewerClasses.areaGridLayoutPanelContainer} {
+        flex-direction: column-reverse;
     }
-  }, [active]);
-  return /* @__PURE__ */ jsx(AreaContext.Provider, {
-    value: areaStoreRef.current,
-    children
-  });
-};
-if (process.env.NODE_ENV !== "production") {
-  AreaProvider.displayName = "AreaProvider";
-}
-React__default.memo(AreaProvider);
-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);
-        }
-      }
+    // areaGridLayout
+    & .${areasViewerClasses.areaGridLayout} {
+        height: 100%!important;
+        overflow: auto;
+        flex-grow: 1;
     }
-  } 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
-              });
-            }
-          }
+    &.${areasViewerClasses.isMobile} .${areasViewerClasses.areaGridLayout} {
+        flex-direction: column-reverse;
+        height: unset;
+        width: 100%;
+    }
+    // areaGridLayoutPopupsContainer
+    & .${areasViewerClasses.areaGridLayoutPopupsContainer} {
+        z-index: 1; //Garantizar q el contenedor de los popus este por encima de los layouts
+        //     // ' .react-draggable': {
+        //     //     position: 'absolute',
+        //     // },
+    }
+
+    // PanelWindowsRoot
+    & .${areasViewerClasses.panelWindowsRoot} {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+    &.${areasViewerClasses.isMobile} .${areasViewerClasses.panelWindowsRoot} {
+        flex-direction: row;
+    }
+    & .${areasViewerClasses.panelWindowsButtonContainer}.${areasViewerClasses.selected} {
+        border: 1px solid red;
+    }
+
+    // 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;
         }
-      })),
-      {
-        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
-}) => ({
-  display: "flex",
-  alignItems: "center",
-  position: "relative",
-  justifyContent: "space-between",
-  minHeight: theme.spacing(5),
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  overflow: "hidden",
-  cursor: "move",
-  height: "60px",
-  " > span": {
-    marginRight: "12px"
-  },
-  "& > h5": {
-    paddingRight: theme.spacing(3),
-    borderRight: `1px solid ${theme.palette.divider}`
-  },
-  " > nav": {
-    marginRight: "12px",
-    flexGrow: 1
-  },
-  "& .splitactions.Mui-disabled": {
-    color: theme.palette.primary.main
-  },
-  "& svg ": {
-    width: "20px",
-    height: "20px"
-  }
-}));
-styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  alignItems: "center",
-  position: "relative",
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  height: "60px",
-  minHeight: "60px",
-  " > span": {
-    marginRight: "12px"
-  },
-  "& > h5": {
-    paddingRight: theme.spacing(3),
-    borderRight: `1px solid ${theme.palette.divider}`
-  },
-  " > nav": {
-    marginRight: "12px",
-    flexGrow: 1
-  },
-  "& .splitactions.Mui-disabled": {
-    color: theme.palette.primary.main
-  },
-  "& svg ": {
-    width: "20px",
-    height: "20px"
-  }
-}));
-const Wrapper = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "space-between",
-  padding: `0 0`,
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  minHeight: "60px"
-}));
-const ModuleTitleContent = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: "auto",
-  gridGap: theme.spacing(1.75),
-  alignItems: "center",
-  width: "auto",
-  height: "auto",
-  [theme.breakpoints.up("sm")]: {
-    gridTemplateColumns: "repeat(3, auto)"
-  }
-}));
-const ModuleTitle = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: `${theme.spacing(3)} auto`,
-  gridGap: theme.spacing(2),
-  alignItems: "center",
-  width: "auto",
-  height: "auto"
-}));
-const Separator = styled("div")(({
-  theme
-}) => ({
-  display: "none",
-  alignItems: "center",
-  width: "1px",
-  background: theme.palette.divider,
-  height: "100%",
-  margin: `0 ${theme.spacing(2)}`,
-  [theme.breakpoints.up("sm")]: {
-    display: "flex"
+    // 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}{
+        padding: 16px;
+    }
+    
+    .react-grid-layout {
+        position: relative;
+        transition: height 200ms ease;
+    }
+    .react-grid-item {
+        transition: all 200ms ease;
+        transition-property: left, top;
+    }
+    .react-grid-item img {
+        pointer-events: none;
+        user-select: none;  
+    }
+    .react-grid-item.cssTransforms {
+        transition-property: transform;
+    }
+    .react-grid-item.resizing {
+        z-index: 1;
+        will-change: width, height;
+    }
+
+    .react-grid-item.react-draggable-dragging {
+        transition: none;
+        z-index: 3;
+        will-change: transform;
+    }
+
+    .react-grid-item.dropping {
+        visibility: hidden;
+    }
+
+    .react-grid-item.react-grid-placeholder {
+        background: green;
+        opacity: 0.2;
+        transition-duration: 100ms;
+        z-index: 2;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        -o-user-select: none;
+        user-select: none;
+    }
+
+    .react-grid-item > .react-resizable-handle {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+    }
+
+    .react-grid-item > .react-resizable-handle::after {
+        content: "";
+        position: absolute;
+        right: 3px;
+        bottom: 3px;
+        width: 5px;
+        height: 5px;
+        border-right: 2px solid rgba(0, 0, 0, 0.4);
+        border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+    }
+
+    .react-resizable-hide > .react-resizable-handle {
+        display: none;
+    }
+
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
+        bottom: 0;
+        left: 0;
+        cursor: sw-resize;
+        transform: rotate(90deg);
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+        bottom: 0;
+        right: 0;
+        cursor: se-resize;
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
+        top: 0;
+        left: 0;
+        cursor: nw-resize;
+        transform: rotate(180deg);
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
+        top: 0;
+        right: 0;
+        cursor: ne-resize;
+        transform: rotate(270deg);
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-w,
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+        top: 50%;
+        margin-top: -10px;
+        cursor: ew-resize;
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-w {
+        left: 0;
+        transform: rotate(135deg);
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+        right: 0;
+        transform: rotate(315deg);
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-n,
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+        left: 50%;
+        margin-left: -10px;
+        cursor: ns-resize;
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-n {
+        top: 0;
+        transform: rotate(225deg);
+    }
+    .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+        bottom: 0;
+        transform: rotate(45deg);
+    }
+
+    
+    ${react_resizable_css}
+
+
+    ${(props) => props.theme.components?.M4LAreasViewer}
+
+    
+`;
+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) {
   }
-}));
-const Breadcrumbs = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  alignItems: "center",
-  gridTemplateColumns: `repeat(3, auto)`,
-  gridGap: theme.spacing(2)
-}));
-const ModuleActions = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: "auto",
-  alignItems: "center",
-  width: "auto",
-  height: "auto",
-  [theme.breakpoints.up("sm")]: {
-    gridTemplateColumns: `repeat(3, ${theme.spacing(3)})`,
-    gridGap: theme.spacing(2)
+  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);
   }
-}));
-function SKTModuleHeader() {
-  const isDesktop = useResponsiveDesktop();
-  return /* @__PURE__ */ jsxs(Wrapper, {
-    id: "HeaderSkeleton",
-    children: [/* @__PURE__ */ jsxs(ModuleTitleContent, {
-      children: [/* @__PURE__ */ jsxs(ModuleTitle, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: 120,
-          height: 14
-        })]
-      }), /* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs(Breadcrumbs, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: 68,
-          height: 14
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 4,
-          height: 4
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: 68,
-          height: 14
-        })]
-      })]
-    }), /* @__PURE__ */ jsx(ModuleActions, {
-      children: isDesktop ? /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        })]
-      }) : /* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: 24,
-        height: 24
-      })
-    })]
-  });
-}
-function getMainActions(isDesktop, moduleActions) {
-  let mainActions = [];
-  if (isDesktop !== void 0 && isDesktop) {
-    mainActions = mainActions.concat(
-      moduleActions.filter((action) => action.visibility === "main")
-    );
+  if (state.viewMode === "single") {
+    for (const key in beforeMaximizebreakpointsLayouts) {
+      const beforeLayoutBreakpoint = beforeMaximizebreakpointsLayouts[key];
+      beforeLayoutBreakpoint.push(newLayout);
+    }
   }
-  mainActions = mainActions.concat(
-    moduleActions.filter((action) => action.visibility === "allways")
-  );
-  return mainActions;
+  return layoutsBreakPoints;
 }
-function getMenuActions(isDesktop, moduleActions, urlPrefix, saveModuleCookies, 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,
-    disabled: false,
-    visibility: "normal",
-    dictionaryId: getAreasDictionary("label_persist_module_cookies"),
-    key: "save_props"
-  };
-  menuActions.push(savePropsAction);
-  if (version) {
-    const versionAction = {
-      urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/version.svg`,
-      onClick: () => {
-      },
-      disabled: true,
-      visibility: "normal",
-      label: version,
-      key: "version"
-    };
-    menuActions.push(versionAction);
+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 menuActions;
-}
-function MainActions() {
-  const [moduleActions] = useWindowStore((state) => [state.moduleActions], shallow);
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
-  const mainActions = useMemo(() => {
-    return getMainActions(isDesktop, moduleActions);
-  }, [moduleActions, isDesktop]);
-  return /* @__PURE__ */ jsx("div", {
-    className: areasViewerClasses.windowHeaderMainActions,
-    children: mainActions.map((mainAction) => {
-      const tooltip = mainAction.label !== void 0 ? mainAction.label : getLabel(mainAction.dictionaryId || "");
-      return /* @__PURE__ */ jsx(IconButton, {
-        src: mainAction.urlIcon,
-        className: mainAction.className,
-        onClick: mainAction.onClick,
-        "aria-label": mainAction.label,
-        disabled: mainAction.disabled,
-        tooltip
-      }, mainAction.key);
-    })
-  });
+  return layoutsBreakPoints;
 }
-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);
-  const {
-    saveModuleCookies
-  } = useWindowStore((state) => state.internalActions);
-  const emergeType = useWindowStore((state) => state.emergeType);
-  const maximizedId = useAreaStore((state) => state.singleId);
-  const {
-    maximizeLayout,
-    normalizeLayouts
-  } = useAreaStore((state) => state.actions, shallow);
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const urlPrefix = `${host_static_assets}/${environment_assets}`;
-  const menuActions = useMemo(() => {
-    return getMenuActions(isDesktop, moduleActions, urlPrefix, saveModuleCookies, version);
-  }, [moduleActions, isDesktop]);
-  const onCloseLocal = () => {
-    onClose && onClose(container_id);
-  };
-  const maxNormalize = () => {
-    if (maximizedId) {
-      normalizeLayouts();
-    } else {
-      maximizeLayout(container_id);
+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
+        };
+      }
     }
-  };
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTModuleHeader, {});
   }
-  return /* @__PURE__ */ jsxs("div", {
-    className: clsx(areasViewerClasses.windowHeader, "m4l_draggable_handle"),
-    children: [/* @__PURE__ */ jsx(Icon, {
-      src: url_icon,
-      size: "medium"
-    }), /* @__PURE__ */ jsx(Typography, {
-      className: areasViewerClasses.windowHeaderTitle,
-      variant: "h5",
-      children: `${title}`
-    }), /* @__PURE__ */ jsx(MainActions, {}), 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}`
-    }), menuActions.length > 0 && /* @__PURE__ */ jsx(MenuActions, {
-      arrowType: "no-arrow",
-      marginTop: "12px!important",
-      marginLeft: "14px!important",
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "right"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      menuActions
-    }), onClose && /* @__PURE__ */ jsx(IconButton, {
-      onClick: onCloseLocal,
-      "aria-label": "click",
-      src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CLOSE}`
-    })]
-  });
-}
-const WrapperLinearProgress = styled$1("div")(() => ({
-  width: "70%",
-  margin: "auto auto"
-}));
-const WrapperFallBackNotFound = styled$1("div")(({
-  theme
-}) => ({
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  alignItems: "center",
-  gap: theme.spacing(3)
-}));
-function FallBackNotFound(props) {
-  const {
-    setNetworkRefresh
-  } = props;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const handlerClick = () => {
-    setNetworkRefresh((prop) => !prop);
+  return {
+    newBreakPointsLayouts,
+    newGridLayouts,
+    newHashWindowLayouts
   };
-  return /* @__PURE__ */ jsxs(WrapperFallBackNotFound, {
-    children: [/* @__PURE__ */ jsx(m.div, {
-      variants: varBounce().in,
-      children: /* @__PURE__ */ jsx(Typography$1, {
-        variant: "h3",
-        paragraph: true,
-        children: getLabel("loading_mf_title")
-      })
-    }), /* @__PURE__ */ jsx(Typography$1, {
-      sx: {
-        color: "text.secondary"
-      },
-      children: getLabel("loading_mf_description")
-    }), /* @__PURE__ */ jsx(m.div, {
-      variants: varBounce().in,
-      children: /* @__PURE__ */ jsx(Image, {
-        src: `${host_static_assets}/${environment_assets}/frontend/domain/host/commons/assets/img/illustration_noauth.png`,
-        ratio: "1:1"
-      })
-    }), /* @__PURE__ */ jsx(Button, {
-      size: "medium",
-      variant: "contained",
-      onClick: handlerClick,
-      children: getLabel("loading_mf_intro")
-    })]
-  });
 }
-const LoadingMF = (props) => {
-  const {
-    loadingProgress,
-    setNetworkRefresh
-  } = props;
-  if (loadingProgress !== -1) {
-    return /* @__PURE__ */ jsx(WrapperLinearProgress, {
-      id: "WrapperLinearProgress",
-      children: /* @__PURE__ */ jsx(LinearProgress, {
-        variant: "determinate",
-        value: loadingProgress
-      })
-    });
-  }
-  return /* @__PURE__ */ jsx(FallBackNotFound, {
-    setNetworkRefresh
-  });
+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}` }
+    )
+  );
 };
-function getDivScritId(prefix, moduleId) {
-  const rotational_id = `${Math.round(new Date().getTime() / 1e3)}_rnd_${Math.round(Math.random() * 1e3)}`;
-  return {
-    divContainerId: `container_${prefix}_${moduleId}_${rotational_id}`,
-    scriptId: `script_${moduleId}_${rotational_id}`,
-    moduleId
-  };
-}
-function MFLoader(props) {
+const AreaContext = createContext(null);
+const AreaProvider = (props) => {
   const {
-    prefix,
-    moduleId,
-    cache = true,
-    debug_port,
-    dynamicMFStore,
-    windowTools
+    children,
+    id,
+    selected: active,
+    loadWindows = true
   } = props;
+  const [loadAreasFromNetwork, loadCookiesFromNetwork] = useAreasStore((state) => [state.loadAreasFromNetwork, state.loadCookiesFromNetwork], shallow);
   const {
-    hostThemeOptions,
-    fnComponentsOverrides
-  } = useHostTheme();
+    setAreaLink
+  } = useAreasStore((state) => state.internalActions);
+  const isDesktop = useResponsiveDesktop();
+  const isFirstRender = useFirstRender([isDesktop]);
   const {
     networkOperation
   } = useNetwork();
-  const environment = useEnvironment();
-  const hostTools = useHostTools();
-  const formatter = useFormatter();
-  const [isLoading, setIsLoading] = useState(true);
-  const [networkProgress, setNetworkProgress] = useState(-1);
-  const [_networkRefresh, setNetworkRefresh] = useState(false);
-  const {
-    currentLocale
-  } = useLocales();
-  const [divScript, setDivScript] = useState(getDivScritId(prefix, moduleId));
-  const refTime = useRef(0);
-  const isFirstRender = useFirstRender([moduleId]);
-  const final_host = environment.isLocalhost ? `https://localhost:${debug_port}` : `https://${window.location.host}/mf/${moduleId}`;
-  function cleanUp(dScript) {
-    try {
-      if (window[`unmount_${prefix}_${dScript.moduleId}`]) {
-        window[`unmount_${prefix}_${dScript.moduleId}`](dScript.divContainerId);
-      }
-    } catch (error) {
-    }
-    if (!cache) {
-      const script = document.getElementById(dScript.scriptId);
-      if (script) {
-        try {
-          document.head.removeChild(script);
-          delete window[`render_${prefix}_${dScript.moduleId}`];
-          delete window[`unmount_${prefix}_${dScript.moduleId}`];
-        } catch (error) {
-        }
-      }
-    }
+  const areaStoreRef = useRef();
+  if (!areaStoreRef.current) {
+    areaStoreRef.current = createAreaStore({
+      id,
+      networkOperation,
+      loadAreasFromNetwork,
+      loadCookiesFromNetwork,
+      loadWindows,
+      isDesktop: !!isDesktop
+    });
   }
-  const renderMicroFrontend = useCallback((newDScript) => {
-    try {
-      setIsLoading(false);
-      window[`render_${prefix}_${newDScript.moduleId}`](newDScript.divContainerId, environment, hostTools, currentLocale, {
-        hostThemeOptions,
-        fnComponentsOverrides
-      }, axiosOperation, formatter, dynamicMFStore, windowTools);
-    } catch (error) {
-    }
-  }, [hostThemeOptions, currentLocale, formatter]);
-  const debouncedSetDivScript = useCallback(debounce((newName) => {
-    const newDivScript = getDivScritId(prefix, newName);
-    if (newName !== divScript.moduleId) {
-      setDivScript({
-        ...newDivScript
-      });
-    }
-  }, 200), [divScript]);
+  const {
+    loadFromApi,
+    changeDesktopBreakpoint
+  } = useStore(areaStoreRef.current, (state) => state.internalActions, shallow);
+  const status = useStore(areaStoreRef.current, (state) => state.status, shallow);
   useEffect(() => {
     if (!isFirstRender) {
-      debouncedSetDivScript(moduleId + "");
-      if (moduleId !== divScript.moduleId)
-        ;
+      changeDesktopBreakpoint(!!isDesktop);
+    }
+  }, [isDesktop]);
+  useEffect(() => {
+    if (areaStoreRef.current) {
+      setAreaLink(id, areaStoreRef.current);
     }
     return () => {
     };
-  }, [moduleId]);
+  }, []);
   useEffect(() => {
-    setIsLoading(true);
-    let mounted = true;
-    const controller = new AbortController();
-    const dsScript = {
-      ...divScript
-    };
-    const loadIfNotLoaded = async () => {
-      if (!window[`render_${prefix}_${moduleId}`]) {
-        let urlFile = "";
-        setNetworkProgress(0);
-        const manifest = await fetch(`${final_host}/manifest.json?rnd=${Math.random()}`).then((res) => res.json()).catch(() => {
-          console.debug("Error fetching manifest", `${final_host}/manifest.json`);
-          return void 0;
-        });
-        if (!manifest) {
-          return;
+    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;
+            });
+          }
         }
-        setNetworkProgress(10);
-        if (mounted) {
-          urlFile = `${final_host}/${manifest["src/index.tsx"]["file"]}?rnd=${Math.random()}`;
-          refTime.current = 0;
-          await networkOperation({
-            method: "GET",
-            endPoint: urlFile,
-            isRemote: !environment.isLocalhost,
-            headers: {
-              "Content-Type": "application/json"
-            },
-            onDownloadProgress: (progressEvent) => {
-              let percentCompleted = 0;
-              try {
-                if (progressEvent.lengthComputable) {
-                  percentCompleted = 10 + Math.round(progressEvent.loaded * 90 / progressEvent.total);
-                } else {
-                  if (refTime.current === 0) {
-                    refTime.current = new Date().getTime();
-                  }
-                  percentCompleted = 10 + progressEvent.loaded / 15e5 * 90;
-                  if (percentCompleted > 95)
-                    percentCompleted = 95;
-                }
-              } catch (error) {
-              }
-              if (mounted) {
-                setNetworkProgress(percentCompleted);
-              }
-            },
-            isExternalUrl: true,
-            responseType: "text",
-            signal: controller.signal
-          }).then(() => {
-            if (mounted) {
-              setNetworkProgress(100);
+      })),
+      { 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;
             }
-          }).catch(() => {
-          });
-          if (mounted) {
-            const script = document.createElement("script");
-            script.id = divScript.scriptId;
-            script.crossOrigin = "";
-            script.type = "module";
-            script.src = urlFile || "";
-            script.onload = () => {
-              if (mounted) {
-                console.debug("Script loaded", new Date().getTime());
-                setNetworkProgress(100);
-                renderMicroFrontend(dsScript);
+          },
+          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;
               }
-            };
-            document.head.appendChild(script);
-            console.debug("Script appened", new Date().getTime());
+            });
+          }
+        },
+        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
+              });
+            }
           }
         }
-      } else {
-        if (mounted) {
-          renderMicroFrontend(dsScript);
-        }
+      })),
+      {
+        name: `window store ${initProps.windowId}`,
+        store: `window dev store ${initProps.windowId}`,
+        trace: true
       }
-    };
-    loadIfNotLoaded();
+    )
+  );
+};
+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 () => {
-      mounted = false;
-      controller.abort();
-      cleanUp(dsScript);
+      console.debug("useEffect cleanUP WindowMFProvider", props.windowId, windowStoreRef.current);
     };
-  }, [divScript]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx("div", {
-      id: divScript.divContainerId
-    }), isLoading ? /* @__PURE__ */ jsx(LoadingMF, {
-      loadingProgress: networkProgress,
-      setNetworkRefresh
-    }) : null]
+  }, []);
+  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
   });
 }
-MFLoader.defaultProps = {
-  document,
-  window
-};
-const MicroFrontend = (props) => {
-  const dynamicMFStore = useWindowStore((state) => state.dynamicMFStore, shallow);
-  const moduleId = useWindowStore((state) => state.moduleId, shallow);
+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(MFLoader, {
-    ...props,
-    moduleId,
-    dynamicMFStore,
-    windowTools: {
-      ...actions
-    }
+  return /* @__PURE__ */ jsx(WindowToolsMFProvider, {
+    ...actions,
+    children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, {
+      store: dynamicMFStore,
+      children: typeof component === "function" ? component(store) : component
+    })
   });
 };
-React__default.memo(MicroFrontend);
-const InnerForHooks$1 = (props) => {
-  const {
-    winType
-  } = props;
-  const status = useWindowStore((state) => state.status);
-  if (status !== "loaded") {
-    return null;
+React__default.memo(Component);
+styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  position: "relative",
+  justifyContent: "space-between",
+  minHeight: theme.spacing(5),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  overflow: "hidden",
+  cursor: "move",
+  height: "60px",
+  " > span": {
+    marginRight: "12px"
+  },
+  "& > h5": {
+    paddingRight: theme.spacing(3),
+    borderRight: `1px solid ${theme.palette.divider}`
+  },
+  " > nav": {
+    marginRight: "12px",
+    flexGrow: 1
+  },
+  "& .splitactions.Mui-disabled": {
+    color: theme.palette.primary.main
+  },
+  "& svg ": {
+    width: "20px",
+    height: "20px"
+  }
+}));
+styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  position: "relative",
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  height: "60px",
+  minHeight: "60px",
+  " > span": {
+    marginRight: "12px"
+  },
+  "& > h5": {
+    paddingRight: theme.spacing(3),
+    borderRight: `1px solid ${theme.palette.divider}`
+  },
+  " > nav": {
+    marginRight: "12px",
+    flexGrow: 1
+  },
+  "& .splitactions.Mui-disabled": {
+    color: theme.palette.primary.main
+  },
+  "& svg ": {
+    width: "20px",
+    height: "20px"
+  }
+}));
+const Wrapper = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  padding: `0 0`,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  minHeight: "60px"
+}));
+const ModuleTitleContent = styled("div")(({
+  theme
+}) => ({
+  display: "grid",
+  gridTemplateColumns: "auto",
+  gridGap: theme.spacing(1.75),
+  alignItems: "center",
+  width: "auto",
+  height: "auto",
+  [theme.breakpoints.up("sm")]: {
+    gridTemplateColumns: "repeat(3, auto)"
   }
-  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
+}));
+const ModuleTitle = styled("div")(({
+  theme
+}) => ({
+  display: "grid",
+  gridTemplateColumns: `${theme.spacing(3)} auto`,
+  gridGap: theme.spacing(2),
+  alignItems: "center",
+  width: "auto",
+  height: "auto"
+}));
+const Separator = styled("div")(({
+  theme
+}) => ({
+  display: "none",
+  alignItems: "center",
+  width: "1px",
+  background: theme.palette.divider,
+  height: "100%",
+  margin: `0 ${theme.spacing(2)}`,
+  [theme.breakpoints.up("sm")]: {
+    display: "flex"
+  }
+}));
+const Breadcrumbs = styled("div")(({
+  theme
+}) => ({
+  display: "grid",
+  alignItems: "center",
+  gridTemplateColumns: `repeat(3, auto)`,
+  gridGap: theme.spacing(2)
+}));
+const ModuleActions = styled("div")(({
+  theme
+}) => ({
+  display: "grid",
+  gridTemplateColumns: "auto",
+  alignItems: "center",
+  width: "auto",
+  height: "auto",
+  [theme.breakpoints.up("sm")]: {
+    gridTemplateColumns: `repeat(3, ${theme.spacing(3)})`,
+    gridGap: theme.spacing(2)
+  }
+}));
+function SKTModuleHeader() {
+  const isDesktop = useResponsiveDesktop();
+  return /* @__PURE__ */ jsxs(Wrapper, {
+    id: "HeaderSkeleton",
+    children: [/* @__PURE__ */ jsxs(ModuleTitleContent, {
+      children: [/* @__PURE__ */ jsxs(ModuleTitle, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: 120,
+          height: 14
+        })]
+      }), /* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs(Breadcrumbs, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: 68,
+          height: 14
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 4,
+          height: 4
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: 68,
+          height: 14
+        })]
+      })]
+    }), /* @__PURE__ */ jsx(ModuleActions, {
+      children: isDesktop ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 24,
+          height: 24
+        })]
+      }) : /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 24,
+        height: 24
       })
     })]
   });
-};
-React__default.memo(InnerForHooks$1);
-const Window = (props) => {
-  const {
-    emergeType
-  } = props;
-  const selected = useAreaStore((state) => emergeType === "layout" ? state.currentLayoutId : state.currentPopUpId) === props.windowId;
-  const {
-    selectWindowPopUp,
-    selectWindowLayout
-  } = useAreaStore((state) => state.actions);
-  const onTouch = () => {
-    if (!selected) {
-      if (emergeType === "popup") {
-        selectWindowPopUp(props.windowId);
-      } else if (emergeType === "layout") {
-        selectWindowLayout(props.windowId);
-      }
-    }
+}
+function getMainActions(isDesktop, moduleActions) {
+  let mainActions = [];
+  if (isDesktop !== void 0 && isDesktop) {
+    mainActions = mainActions.concat(
+      moduleActions.filter((action) => action.visibility === "main")
+    );
+  }
+  mainActions = mainActions.concat(
+    moduleActions.filter((action) => action.visibility === "allways")
+  );
+  return mainActions;
+}
+function getMenuActions(isDesktop, moduleActions, urlPrefix, saveModuleCookies, 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,
+    disabled: false,
+    visibility: "normal",
+    dictionaryId: getAreasDictionary("label_persist_module_cookies"),
+    key: "save_props"
   };
+  menuActions.push(savePropsAction);
+  if (version) {
+    const versionAction = {
+      urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/version.svg`,
+      onClick: () => {
+      },
+      disabled: true,
+      visibility: "normal",
+      label: version,
+      key: "version"
+    };
+    menuActions.push(versionAction);
+  }
+  return menuActions;
+}
+function MainActions() {
+  const [moduleActions] = useWindowStore((state) => [state.moduleActions], shallow);
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
+  const mainActions = useMemo(() => {
+    return getMainActions(isDesktop, moduleActions);
+  }, [moduleActions, isDesktop]);
   return /* @__PURE__ */ jsx("div", {
-    role: "presentation",
-    className: clsx(areasViewerClasses.windowRoot, selected ? areasViewerClasses.selected : null),
-    onMouseDown: onTouch,
-    children: /* @__PURE__ */ jsx(WindowMFProvider, {
-      ...props,
-      children: /* @__PURE__ */ jsx(InnerForHooks$1, {
-        ...props
-      })
+    className: areasViewerClasses.windowHeaderMainActions,
+    children: mainActions.map((mainAction) => {
+      const tooltip = mainAction.label !== void 0 ? mainAction.label : getLabel(mainAction.dictionaryId || "");
+      return /* @__PURE__ */ jsx(IconButton, {
+        src: mainAction.urlIcon,
+        className: mainAction.className,
+        onClick: mainAction.onClick,
+        "aria-label": mainAction.label,
+        disabled: mainAction.disabled,
+        tooltip
+      }, mainAction.key);
     })
   });
-};
-const MemonizedWindow = React__default.memo(Window);
-const WindowPopUp = (props) => {
+}
+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);
   const {
-    windowProps,
-    windowId
-  } = props;
+    saveModuleCookies
+  } = useWindowStore((state) => state.internalActions);
+  const emergeType = useWindowStore((state) => state.emergeType);
+  const maximizedId = useAreaStore((state) => state.singleId);
   const {
-    selectWindowPopUp
-  } = useAreaStore((store) => store.actions);
-  const selectedPopUpId = useAreaStore((store) => store.currentPopUpId);
-  const zIndex = useAreaStore((store) => store.hashWindowsPopups[props.windowId].zIndex);
-  const isSelected = props.windowId === selectedPopUpId;
-  const onTouch = () => {
-    if (!isSelected) {
-      selectWindowPopUp(props.windowId);
+    maximizeLayout,
+    normalizeLayouts
+  } = useAreaStore((state) => state.actions, shallow);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const urlPrefix = `${host_static_assets}/${environment_assets}`;
+  const menuActions = useMemo(() => {
+    return getMenuActions(isDesktop, moduleActions, urlPrefix, saveModuleCookies, version);
+  }, [moduleActions, isDesktop]);
+  const onCloseLocal = () => {
+    onClose && onClose(container_id);
+  };
+  const maxNormalize = () => {
+    if (maximizedId) {
+      normalizeLayouts();
+    } else {
+      maximizeLayout(container_id);
     }
   };
-  return /* @__PURE__ */ jsx(DraggableWindow, {
-    handle: ".m4l_draggable_handle",
-    cancel: "",
-    defaultPosition: windowProps,
-    children: /* @__PURE__ */ jsx(ResizeableWindow, {
-      className: clsx(areasViewerClasses.windowPopupRoot, `${areasViewerClasses.windowPopupRoot}-${windowId}`),
-      width: windowProps.width,
-      height: windowProps.height,
-      style: {
-        zIndex,
-        position: "absolute"
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTModuleHeader, {});
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    className: clsx(areasViewerClasses.windowHeader, "m4l_draggable_handle"),
+    children: [/* @__PURE__ */ jsx(Icon, {
+      src: url_icon,
+      size: "medium"
+    }), /* @__PURE__ */ jsx(Typography, {
+      className: areasViewerClasses.windowHeaderTitle,
+      variant: "h5",
+      children: `${title}`
+    }), /* @__PURE__ */ jsx(MainActions, {}), 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}`
+    }), menuActions.length > 0 && /* @__PURE__ */ jsx(MenuActions, {
+      arrowType: "no-arrow",
+      marginTop: "12px!important",
+      marginLeft: "14px!important",
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
       },
-      onResizeStart: () => {
-        onTouch();
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
       },
-      children: /* @__PURE__ */ jsx(Window, {
-        ...props
-      })
-    })
+      menuActions
+    }), onClose && /* @__PURE__ */ jsx(IconButton, {
+      onClick: onCloseLocal,
+      "aria-label": "click",
+      src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CLOSE}`
+    })]
   });
-};
-const MemonizedWindowPopUp = React__default.memo(WindowPopUp);
-styled("div")(({ theme }) => ({
+}
+const WrapperLinearProgress = styled$1("div")(() => ({
+  width: "70%",
+  margin: "auto auto"
+}));
+const WrapperFallBackNotFound = styled$1("div")(({
+  theme
+}) => ({
+  width: "100%",
+  height: "100%",
   display: "flex",
   flexDirection: "column",
-  height: "100%",
-  overflow: "hidden",
-  padding: theme.spacing(3)
-}));
-const WrapperWindowModal = styled(Dialog)(() => ({
-  "& .MuiDialog-container": {},
-  "&.m4l_selected": {
-    borderTop: "1px solid green"
-  }
+  justifyContent: "center",
+  alignItems: "center",
+  gap: theme.spacing(3)
 }));
-const WindowModal = (props) => {
+function FallBackNotFound(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);
+    setNetworkRefresh
+  } = props;
   const {
-    onBreakpointsLayoutsChange
-  } = useAreaStore((state) => state.actions);
-  function onBreakpointChange(_newBreakpoint, _newCols) {
-  }
-  useEffect(() => {
-    console.log("ResponsiveGridLayout resize");
-    window.dispatchEvent(new Event("resize"));
-  }, [viewMode, gridLayouts]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsxs(ResponsiveGridLayout, {
-      autoSize: false,
-      compactType: "vertical",
-      measureBeforeMount: true,
-      resizeHandles: ["nw", "se"],
-      className: areasViewerClasses.areaGridLayout,
-      layouts: breakPointsLayouts,
-      onLayoutChange: onBreakpointsLayoutsChange,
-      onBreakpointChange,
-      breakpoints,
-      cols,
-      rowHeight: ROW_HEIGTH_GRIDLAYOUT,
-      margin: [5, 5],
-      containerPadding: [CONTAINER_PADDING_GRIDLAYOUT, CONTAINER_PADDING_GRIDLAYOUT],
-      draggableHandle: ".m4l_draggable_handle",
-      isBounded: false,
-      preventCollision: false,
-      children: [/* @__PURE__ */ jsx("div", {
-        className: areasViewerClasses.areaGridLayoutPopupsContainer,
-        "data-grid": {
-          i: "none",
-          x: 0,
-          y: 0,
-          w: 0,
-          h: 0,
-          maxW: 0,
-          maxH: 0,
-          minW: 0,
-          minH: 0,
-          static: true,
-          isDraggable: false,
-          isResizable: false
-        },
-        children: windowsPopUps.map((wp) => {
-          if (hashWindowsPopups[wp]) {
-            return /* @__PURE__ */ jsx(MemonizedWindowPopUp, {
-              ...hashWindowsPopups[wp]
-            }, hashWindowsPopups[wp].windowId);
-          }
-          return null;
-        })
-      }, "none"), gridLayouts.map((l) => {
-        if (hashWindowsLayouts[l.i]) {
-          return /* @__PURE__ */ jsx("div", {
-            children: /* @__PURE__ */ jsx(MemonizedWindow, {
-              ...hashWindowsLayouts[l.i]
-            })
-          }, l.i);
-        }
-        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);
+    getLabel
+  } = useModuleDictionary();
   const {
-    maximizeLayout
-  } = useAreaStore((state) => state.actions);
-  const onTouched = (layoutId) => {
-    maximizeLayout(layoutId);
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const handlerClick = () => {
+    setNetworkRefresh((prop) => !prop);
   };
-  if (status === "loaded") {
-    if (mode !== "single" || gridLayouts.length < 2) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx("div", {
-      className: areasViewerClasses.panelWindowsRoot,
-      children: gridLayouts.map((l) => {
-        return /* @__PURE__ */ jsx("div", {
-          className: clsx(areasViewerClasses.panelWindowsButtonContainer, singleId === l.i ? areasViewerClasses.selected : null),
-          children: /* @__PURE__ */ jsx(IconButton, {
-            src: hashWindowsLayouts[l.i].url_icon,
-            size: "small",
-            onClick: () => onTouched(l.i)
-          })
-        }, l.i);
+  return /* @__PURE__ */ jsxs(WrapperFallBackNotFound, {
+    children: [/* @__PURE__ */ jsx(m.div, {
+      variants: varBounce().in,
+      children: /* @__PURE__ */ jsx(Typography$1, {
+        variant: "h3",
+        paragraph: true,
+        children: getLabel("loading_mf_title")
       })
-    });
-  } else {
-    return null;
-  }
-};
-const Area = (props) => {
+    }), /* @__PURE__ */ jsx(Typography$1, {
+      sx: {
+        color: "text.secondary"
+      },
+      children: getLabel("loading_mf_description")
+    }), /* @__PURE__ */ jsx(m.div, {
+      variants: varBounce().in,
+      children: /* @__PURE__ */ jsx(Image, {
+        src: `${host_static_assets}/${environment_assets}/frontend/domain/host/commons/assets/img/illustration_noauth.png`,
+        ratio: "1:1"
+      })
+    }), /* @__PURE__ */ jsx(Button, {
+      size: "medium",
+      variant: "contained",
+      onClick: handlerClick,
+      children: getLabel("loading_mf_intro")
+    })]
+  });
+}
+const LoadingMF = (props) => {
   const {
-    selected
+    loadingProgress,
+    setNetworkRefresh
   } = props;
-  const classesAreaRoot = useAreasStore((state) => state.viwerClasses.areaRoot);
-  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, {})]
+  if (loadingProgress !== -1) {
+    return /* @__PURE__ */ jsx(WrapperLinearProgress, {
+      id: "WrapperLinearProgress",
+      children: /* @__PURE__ */ jsx(LinearProgress, {
+        variant: "determinate",
+        value: loadingProgress
       })
-    })
+    });
+  }
+  return /* @__PURE__ */ jsx(FallBackNotFound, {
+    setNetworkRefresh
   });
 };
-Area.displayName = "Area";
-const AreasViewerRoot = styled("div")`
-
-    /* display: flex; */
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    /* flex-grow: 1; */
-    position: relative;
-    
-    
-
-    //areaRoot
-    & .${areasViewerClasses.areaRoot} {
-        display: none;
-        position: absolute;
-        /* flex-grow: 1; */
-        flex-direction: row;
-        inset: 0;
-        /* width: 100%; */
-        overflow: hidden;
-        justify-content: top;
-        align-items: flex-start;
-
-        visibility: hidden;
-    }
-
-    & .${areasViewerClasses.areaRoot}.${areasViewerClasses.selected} {
-        display: block;
-        visibility: visible;
-    }
-
-    &.${areasViewerClasses.isMobile} .${areasViewerClasses.areaRoot} {
-        
-    }
-
-    // areaGridLayoutPanelContainer
-    & .${areasViewerClasses.areaGridLayoutPanelContainer} {
-        display: flex;
-        flex-direction: row;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    &.${areasViewerClasses.isMobile} .${areasViewerClasses.areaGridLayoutPanelContainer} {
-        flex-direction: column-reverse;
-    }
-    // areaGridLayout
-    & .${areasViewerClasses.areaGridLayout} {
-        height: 100%!important;
-        overflow: auto;
-        flex-grow: 1;
-    }
-    &.${areasViewerClasses.isMobile} .${areasViewerClasses.areaGridLayout} {
-        flex-direction: column-reverse;
-        height: unset;
-        width: 100%;
-    }
-    // areaGridLayoutPopupsContainer
-    & .${areasViewerClasses.areaGridLayoutPopupsContainer} {
-        z-index: 1; //Garantizar q el contenedor de los popus este por encima de los layouts
-        //     // ' .react-draggable': {
-        //     //     position: 'absolute',
-        //     // },
-    }
-
-    // PanelWindowsRoot
-    & .${areasViewerClasses.panelWindowsRoot} {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-    }
-    &.${areasViewerClasses.isMobile} .${areasViewerClasses.panelWindowsRoot} {
-        flex-direction: row;
-    }
-    & .${areasViewerClasses.panelWindowsButtonContainer}.${areasViewerClasses.selected} {
-        border: 1px solid red;
-    }
-
-    // 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}{
-        padding: 16px;
-    }
-    
-    .react-grid-layout {
-        position: relative;
-        transition: height 200ms ease;
-    }
-    .react-grid-item {
-        transition: all 200ms ease;
-        transition-property: left, top;
-    }
-    .react-grid-item img {
-        pointer-events: none;
-        user-select: none;  
-    }
-    .react-grid-item.cssTransforms {
-        transition-property: transform;
-    }
-    .react-grid-item.resizing {
-        z-index: 1;
-        will-change: width, height;
-    }
-
-    .react-grid-item.react-draggable-dragging {
-        transition: none;
-        z-index: 3;
-        will-change: transform;
-    }
-
-    .react-grid-item.dropping {
-        visibility: hidden;
-    }
-
-    .react-grid-item.react-grid-placeholder {
-        background: green;
-        opacity: 0.2;
-        transition-duration: 100ms;
-        z-index: 2;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        -o-user-select: none;
-        user-select: none;
-    }
-
-    .react-grid-item > .react-resizable-handle {
-        position: absolute;
-        width: 20px;
-        height: 20px;
-    }
-
-    .react-grid-item > .react-resizable-handle::after {
-        content: "";
-        position: absolute;
-        right: 3px;
-        bottom: 3px;
-        width: 5px;
-        height: 5px;
-        border-right: 2px solid rgba(0, 0, 0, 0.4);
-        border-bottom: 2px solid rgba(0, 0, 0, 0.4);
-    }
-
-    .react-resizable-hide > .react-resizable-handle {
-        display: none;
-    }
-
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
-        bottom: 0;
-        left: 0;
-        cursor: sw-resize;
-        transform: rotate(90deg);
-    }
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-se {
-        bottom: 0;
-        right: 0;
-        cursor: se-resize;
+function getDivScritId(prefix, moduleId) {
+  const rotational_id = `${Math.round(new Date().getTime() / 1e3)}_rnd_${Math.round(Math.random() * 1e3)}`;
+  return {
+    divContainerId: `container_${prefix}_${moduleId}_${rotational_id}`,
+    scriptId: `script_${moduleId}_${rotational_id}`,
+    moduleId
+  };
+}
+function MFLoader(props) {
+  const {
+    prefix,
+    moduleId,
+    cache = true,
+    debug_port,
+    dynamicMFStore,
+    windowTools
+  } = props;
+  const {
+    hostThemeOptions,
+    fnComponentsOverrides
+  } = useHostTheme();
+  const {
+    networkOperation
+  } = useNetwork();
+  const environment = useEnvironment();
+  const hostTools = useHostTools();
+  const formatter = useFormatter();
+  const [isLoading, setIsLoading] = useState(true);
+  const [networkProgress, setNetworkProgress] = useState(-1);
+  const [_networkRefresh, setNetworkRefresh] = useState(false);
+  const {
+    currentLocale
+  } = useLocales();
+  const [divScript, setDivScript] = useState(getDivScritId(prefix, moduleId));
+  const refTime = useRef(0);
+  const isFirstRender = useFirstRender([moduleId]);
+  const final_host = environment.isLocalhost ? `https://localhost:${debug_port}` : `https://${window.location.host}/mf/${moduleId}`;
+  function cleanUp(dScript) {
+    try {
+      if (window[`unmount_${prefix}_${dScript.moduleId}`]) {
+        window[`unmount_${prefix}_${dScript.moduleId}`](dScript.divContainerId);
+      }
+    } catch (error) {
     }
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
-        top: 0;
-        left: 0;
-        cursor: nw-resize;
-        transform: rotate(180deg);
+    if (!cache) {
+      const script = document.getElementById(dScript.scriptId);
+      if (script) {
+        try {
+          document.head.removeChild(script);
+          delete window[`render_${prefix}_${dScript.moduleId}`];
+          delete window[`unmount_${prefix}_${dScript.moduleId}`];
+        } catch (error) {
+        }
+      }
     }
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
-        top: 0;
-        right: 0;
-        cursor: ne-resize;
-        transform: rotate(270deg);
+  }
+  const renderMicroFrontend = useCallback((newDScript) => {
+    try {
+      setIsLoading(false);
+      window[`render_${prefix}_${newDScript.moduleId}`](newDScript.divContainerId, environment, hostTools, currentLocale, {
+        hostThemeOptions,
+        fnComponentsOverrides
+      }, axiosOperation, formatter, dynamicMFStore, windowTools);
+    } catch (error) {
     }
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-w,
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
-        top: 50%;
-        margin-top: -10px;
-        cursor: ew-resize;
+  }, [hostThemeOptions, currentLocale, formatter]);
+  const debouncedSetDivScript = useCallback(debounce((newName) => {
+    const newDivScript = getDivScritId(prefix, newName);
+    if (newName !== divScript.moduleId) {
+      setDivScript({
+        ...newDivScript
+      });
     }
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-w {
-        left: 0;
-        transform: rotate(135deg);
+  }, 200), [divScript]);
+  useEffect(() => {
+    if (!isFirstRender) {
+      debouncedSetDivScript(moduleId + "");
+      if (moduleId !== divScript.moduleId)
+        ;
     }
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
-        right: 0;
-        transform: rotate(315deg);
+    return () => {
+    };
+  }, [moduleId]);
+  useEffect(() => {
+    setIsLoading(true);
+    let mounted = true;
+    const controller = new AbortController();
+    const dsScript = {
+      ...divScript
+    };
+    const loadIfNotLoaded = async () => {
+      if (!window[`render_${prefix}_${moduleId}`]) {
+        let urlFile = "";
+        setNetworkProgress(0);
+        const manifest = await fetch(`${final_host}/manifest.json?rnd=${Math.random()}`).then((res) => res.json()).catch(() => {
+          console.debug("Error fetching manifest", `${final_host}/manifest.json`);
+          return void 0;
+        });
+        if (!manifest) {
+          return;
+        }
+        setNetworkProgress(10);
+        if (mounted) {
+          urlFile = `${final_host}/${manifest["src/index.tsx"]["file"]}?rnd=${Math.random()}`;
+          refTime.current = 0;
+          await networkOperation({
+            method: "GET",
+            endPoint: urlFile,
+            isRemote: !environment.isLocalhost,
+            headers: {
+              "Content-Type": "application/json"
+            },
+            onDownloadProgress: (progressEvent) => {
+              let percentCompleted = 0;
+              try {
+                if (progressEvent.lengthComputable) {
+                  percentCompleted = 10 + Math.round(progressEvent.loaded * 90 / progressEvent.total);
+                } else {
+                  if (refTime.current === 0) {
+                    refTime.current = new Date().getTime();
+                  }
+                  percentCompleted = 10 + progressEvent.loaded / 15e5 * 90;
+                  if (percentCompleted > 95)
+                    percentCompleted = 95;
+                }
+              } catch (error) {
+              }
+              if (mounted) {
+                setNetworkProgress(percentCompleted);
+              }
+            },
+            isExternalUrl: true,
+            responseType: "text",
+            signal: controller.signal
+          }).then(() => {
+            if (mounted) {
+              setNetworkProgress(100);
+            }
+          }).catch(() => {
+          });
+          if (mounted) {
+            const script = document.createElement("script");
+            script.id = divScript.scriptId;
+            script.crossOrigin = "";
+            script.type = "module";
+            script.src = urlFile || "";
+            script.onload = () => {
+              if (mounted) {
+                console.debug("Script loaded", new Date().getTime());
+                setNetworkProgress(100);
+                renderMicroFrontend(dsScript);
+              }
+            };
+            document.head.appendChild(script);
+            console.debug("Script appened", new Date().getTime());
+          }
+        }
+      } else {
+        if (mounted) {
+          renderMicroFrontend(dsScript);
+        }
+      }
+    };
+    loadIfNotLoaded();
+    return () => {
+      mounted = false;
+      controller.abort();
+      cleanUp(dsScript);
+    };
+  }, [divScript]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      id: divScript.divContainerId
+    }), isLoading ? /* @__PURE__ */ jsx(LoadingMF, {
+      loadingProgress: networkProgress,
+      setNetworkRefresh
+    }) : null]
+  });
+}
+MFLoader.defaultProps = {
+  document,
+  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
     }
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-n,
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
-        left: 50%;
-        margin-left: -10px;
-        cursor: ns-resize;
+  });
+};
+React__default.memo(MicroFrontend);
+const InnerForHooks$1 = (props) => {
+  const {
+    winType
+  } = 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
+      })
+    })]
+  });
+};
+React__default.memo(InnerForHooks$1);
+const Window = (props) => {
+  const {
+    emergeType
+  } = props;
+  const selected = useAreaStore((state) => emergeType === "layout" ? state.currentLayoutId : state.currentPopUpId) === props.windowId;
+  const {
+    selectWindowPopUp,
+    selectWindowLayout
+  } = useAreaStore((state) => state.actions);
+  const onTouch = () => {
+    if (!selected) {
+      if (emergeType === "popup") {
+        selectWindowPopUp(props.windowId);
+      } else if (emergeType === "layout") {
+        selectWindowLayout(props.windowId);
+      }
     }
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-n {
-        top: 0;
-        transform: rotate(225deg);
+  };
+  return /* @__PURE__ */ jsx("div", {
+    role: "presentation",
+    className: clsx(areasViewerClasses.windowRoot, selected ? areasViewerClasses.selected : null),
+    onMouseDown: onTouch,
+    children: /* @__PURE__ */ jsx(WindowMFProvider, {
+      ...props,
+      children: /* @__PURE__ */ jsx(InnerForHooks$1, {
+        ...props
+      })
+    })
+  });
+};
+const MemonizedWindow = React__default.memo(Window);
+const WindowPopUp = (props) => {
+  const {
+    windowProps,
+    windowId
+  } = props;
+  const {
+    selectWindowPopUp
+  } = useAreaStore((store) => store.actions);
+  const selectedPopUpId = useAreaStore((store) => store.currentPopUpId);
+  const zIndex = useAreaStore((store) => store.hashWindowsPopups[props.windowId].zIndex);
+  const isSelected = props.windowId === selectedPopUpId;
+  const onTouch = () => {
+    if (!isSelected) {
+      selectWindowPopUp(props.windowId);
     }
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
-        bottom: 0;
-        transform: rotate(45deg);
+  };
+  return /* @__PURE__ */ jsx(DraggableWindow, {
+    handle: ".m4l_draggable_handle",
+    cancel: "",
+    defaultPosition: windowProps,
+    children: /* @__PURE__ */ jsx(ResizeableWindow, {
+      className: clsx(areasViewerClasses.windowPopupRoot, `${areasViewerClasses.windowPopupRoot}-${windowId}`),
+      width: windowProps.width,
+      height: windowProps.height,
+      style: {
+        zIndex,
+        position: "absolute"
+      },
+      onResizeStart: () => {
+        onTouch();
+      },
+      children: /* @__PURE__ */ jsx(Window, {
+        ...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 {
+    onBreakpointsLayoutsChange
+  } = useAreaStore((state) => state.actions);
+  function onBreakpointChange(_newBreakpoint, _newCols) {
+  }
+  useEffect(() => {
+    console.log("ResponsiveGridLayout resize");
+    window.dispatchEvent(new Event("resize"));
+  }, [viewMode, gridLayouts]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs(ResponsiveGridLayout, {
+      autoSize: false,
+      compactType: "vertical",
+      measureBeforeMount: true,
+      resizeHandles: ["nw", "se"],
+      className: areasViewerClasses.areaGridLayout,
+      layouts: breakPointsLayouts,
+      onLayoutChange: onBreakpointsLayoutsChange,
+      onBreakpointChange,
+      breakpoints,
+      cols,
+      rowHeight: ROW_HEIGTH_GRIDLAYOUT,
+      margin: [5, 5],
+      containerPadding: [CONTAINER_PADDING_GRIDLAYOUT, CONTAINER_PADDING_GRIDLAYOUT],
+      draggableHandle: ".m4l_draggable_handle",
+      isBounded: false,
+      preventCollision: false,
+      children: [/* @__PURE__ */ jsx("div", {
+        className: areasViewerClasses.areaGridLayoutPopupsContainer,
+        "data-grid": {
+          i: "none",
+          x: 0,
+          y: 0,
+          w: 0,
+          h: 0,
+          maxW: 0,
+          maxH: 0,
+          minW: 0,
+          minH: 0,
+          static: true,
+          isDraggable: false,
+          isResizable: false
+        },
+        children: windowsPopUps.map((wp) => {
+          if (hashWindowsPopups[wp]) {
+            return /* @__PURE__ */ jsx(MemonizedWindowPopUp, {
+              ...hashWindowsPopups[wp]
+            }, hashWindowsPopups[wp].windowId);
+          }
+          return null;
+        })
+      }, "none"), gridLayouts.map((l) => {
+        if (hashWindowsLayouts[l.i]) {
+          return /* @__PURE__ */ jsx("div", {
+            children: /* @__PURE__ */ jsx(MemonizedWindow, {
+              ...hashWindowsLayouts[l.i]
+            })
+          }, l.i);
+        }
+        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 {
+    maximizeLayout
+  } = useAreaStore((state) => state.actions);
+  const onTouched = (layoutId) => {
+    maximizeLayout(layoutId);
+  };
+  if (status === "loaded") {
+    if (mode !== "single" || gridLayouts.length < 2) {
+      return null;
     }
-
-    
-    ${react_resizable_css}
-
-
-    ${(props) => props.theme.components?.M4LAreasViewer}
-
-    
-`;
+    return /* @__PURE__ */ jsx("div", {
+      className: areasViewerClasses.panelWindowsRoot,
+      children: gridLayouts.map((l) => {
+        return /* @__PURE__ */ jsx("div", {
+          className: clsx(areasViewerClasses.panelWindowsButtonContainer, singleId === l.i ? areasViewerClasses.selected : null),
+          children: /* @__PURE__ */ jsx(IconButton, {
+            src: hashWindowsLayouts[l.i].url_icon,
+            size: "small",
+            onClick: () => onTouched(l.i)
+          })
+        }, l.i);
+      })
+    });
+  } else {
+    return null;
+  }
+};
+const Area = (props) => {
+  const {
+    selected
+  } = props;
+  const classesAreaRoot = useAreasStore((state) => state.viwerClasses.areaRoot);
+  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, {})]
+      })
+    })
+  });
+};
+Area.displayName = "Area";
 function AreasViewer() {
   const areas = useAreasStore((state) => state.areas);
   const currentArea = useAreasStore((state) => state.currentArea);
@@ -1965,8 +2114,14 @@ function AreasViewer() {
 }
 export {
   AreaContext as A,
+  DynamicMFParmsContext as D,
+  MemonizedDynamicMFParmsProvider as M,
   WindowContext as W,
-  Area as a,
-  AreasViewer as b,
+  useAreasAdminUtilityClasses as a,
+  WindowToolsMFContext as b,
+  AreasAdmin as c,
+  AreasViewer as d,
+  WindowToolsMFProvider as e,
+  DynamicMFParmsProvider as f,
   useAreasViewerUtilityClasses as u
 };