@m4l/components 0.1.75 → 0.1.77

package/components/areas/components/AreasViewer/{index.621c0de4.js → index.9c2aaaeb.js}

@@ -1,103 +1,122 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 import { styled } from "@mui/material/styles";
-import { r as react_resizable_css } from "../../../../react-resizable.24367d77.js";
-import { generateUtilityClasses, Skeleton, styled as styled$1, Typography as Typography$1, Dialog } from "@mui/material";
+import { r as react_resizable_css } from "../../../../react-resizable.ba08699a.js";
+import { generateUtilityClasses, Skeleton, useTheme, Dialog } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../utils/index.b61dccbe.js";
+import { g as getComponentUtilityClass } from "../../../../utils/index.c43a95f4.js";
 import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants.66529246.js";
-import React__default, { useMemo, useState, useRef, useCallback, useEffect } from "react";
-import { WidthProvider, Responsive } from "react-grid-layout";
 import { shallow } from "zustand/shallow";
-import "../../../animate/index.1f8eadd4.js";
-import { m } from "framer-motion";
+import React__default, { useMemo, useState, useCallback, useEffect } from "react";
+import clsx from "clsx";
+import { u as useAreasStore } from "../../hooks/useAreas/index.3406a6cb.js";
+import { useModuleDictionary, useEnvironment, useModuleSkeleton, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.fc5b7c2d.js";
+import "../../../mui_extended/Accordion/index.12b1339a.js";
+import { I as Icon } from "../../../Icon/index.ecb63e65.js";
+import { T as Typography } from "../../../mui_extended/Typography/index.443590d6.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import "../../../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
+import "@mui/material/Button";
+import { B as Button } from "../../../mui_extended/Button/index.4288f9fc.js";
+import "../../../mui_extended/Badge/index.8c2b8b66.js";
+import "../../../Image/index.c18ebf5a.js";
+import "@mui/lab";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index.f5b1c022.js";
+import "../../../mui_extended/Popover/index.9f35d0eb.js";
+import "../../../mui_extended/Pager/index.435af0df.js";
+import "../../../mui_extended/Tab/index.9e2f6e34.js";
+import "../../../mui_extended/Tooltip/index.5a795dcd.js";
+import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
+import { I as ICONS } from "../../icons.8266ccc8.js";
+import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.afb7e3d9.js";
+import { L as LinearProgressIndeterminate } from "../../../LinearProgressIndeterminate/index.60dabc06.js";
+import debounce from "lodash/debounce";
+import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
+import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index.8f3e2a04.js";
+import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.1607c78e.js";
+import "../../../../contexts/ModalContext/index.dee85a61.js";
+import "../../../../contexts/RHFormContext/index.fe175bab.js";
+import "../../../GridLayout/index.4ba3767a.js";
+import { R as Responsive } from "../../../GridLayout/Responsive/index.a12a8cec.js";
+import { W as WidthProvider } from "../../../GridLayout/WidthProvider/index.8ff65909.js";
+import { R as ROW_HEIGTH_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.c8147e8e.js";
+import "../../../animate/index.1f8eadd4.js";
+import "framer-motion";
 import "../../../animate/LoadingScreen/index.1d0c4307.js";
 import "../../../animate/PropagateLoader/index.7fab43c8.js";
-import { useModuleDictionary, useEnvironment, useModuleSkeleton, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
-import { I as Icon } from "../../../Icon/index.f9119f5e.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.3b05af71.js";
-import clsx from "clsx";
-import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender, useResizeObserver } from "@m4l/graphics";
-import { u as useAreasStore } from "../../hooks/useAreas/index.a7b597fb.js";
-import "../AreasAdmin/index.158621e0.js";
-import { I as ICONS } from "../../icons.3ec589d3.js";
+import "../AreasAdmin/index.cc4cbf56.js";
 import "../../../ScrollBar/index.bbe48f4d.js";
-import { R as ROW_HEIGTH_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, C as CONTAINER_PADDING_GRIDLAYOUT, T as THROTTLE_RESIZE_TIME } from "../../contexts/AreasContext/index.d98b89fc.js";
-import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "zustand";
-import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.1607c78e.js";
 import "react-hook-form";
-import "../../../hook-form/RHFAutocomplete/index.af3296ac.js";
-import { I as Image } from "../../../Image/index.8aae9322.js";
-import { T as Typography } from "../../../mui_extended/Typography/index.443590d6.js";
-import "../../../mui_extended/Accordion/index.03bd0e2a.js";
-import "../../../mui_extended/Avatar/index.1e1a91a3.js";
-import "@mui/material/Button";
-import { B as Button } from "../../../mui_extended/Button/index.aebbab34.js";
-import "@mui/lab";
-import "../../../mui_extended/Popover/index.9f35d0eb.js";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.ca5ce35a.js";
-import "../../../mui_extended/Pager/index.80ec975a.js";
-import "../../../mui_extended/Tab/index.e0653a0a.js";
-import "../../../HelperText/index.ec9b3e6a.js";
-import debounce from "lodash/debounce";
-import "../../../hook-form/RHFAutocompleteAsync/index.76864056.js";
-import "../../../hook-form/RHFCheckbox/index.865ba239.js";
+import "../../../hook-form/RHFAutocomplete/index.ac2b1fae.js";
+import "../../../HelperText/index.ef31df1f.js";
+import "../../../hook-form/RHFAutocompleteAsync/index.8b4ccc8d.js";
+import "../../../hook-form/RHFCheckbox/index.acef119c.js";
 import "@mui/x-date-pickers";
-import "../../../hook-form/RHFDateTime/index.fd9c5aca.js";
-import "../../../hook-form/RHFTextField/index.abcbc2d3.js";
-import "../../../hook-form/RHFPeriod/index.77486f61.js";
-import "../../../Period/index.ff110093.js";
-import "../../../CommonActions/components/Actions/index.37ffde59.js";
-import "../../../../contexts/ModalContext/index.a0de81f0.js";
-import { c as cjs } from "../../../../react-draggable.e625b0d1.js";
-import "../../../ModalDialog/index.f652ea12.js";
-import { R as ResizeableWindow } from "../../../Resizeable/index.41a8048b.js";
-import "../../../modal/WindowConfirm.023e293f.js";
-import "../../../modal/WindowBase.c223e4da.js";
+import "../../../hook-form/RHFDateTime/index.5b080342.js";
+import "../../../hook-form/RHFTextField/index.e751dca7.js";
+import "../../../hook-form/RHFPeriod/index.5304e3bd.js";
+import "../../../Period/index.711db043.js";
+import "../../../CommonActions/components/Actions/index.3eba9d91.js";
+import { c as cjs } from "../../../../react-draggable.7abb5d0a.js";
+import { R as ResizeableWindow } from "../../../Resizeable/index.9a9c79a4.js";
+import "../../../modal/index.a0978193.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../../../hook-form/RHFUpload/index.522bcad5.js";
-import "../../../DataGrid/index.c0c626cd.js";
+import "../../../hook-form/RHFUpload/index.25db0511.js";
+import "../../../DataGrid/index.545b492f.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
-import "../../../DynamicFilter/index.3034c6ba.js";
+import "../../../DynamicFilter/index.d7be0f37.js";
 import "yup";
-import "@hookform/resolvers/yup";
-import "../../../../contexts/RHFormContext/index.a7511399.js";
-import "../../../LanguagePopover/index.491e1306.js";
-import "../../../NavLink/index.f8aee9f4.js";
-import "../../../NoItemSelected/index.cce86db4.js";
-import "../../../ObjectLogs/index.c31b3f8b.js";
+import "lodash";
+import "../../../LanguagePopover/index.0023d069.js";
+import "../../../NavLink/index.cd92eceb.js";
+import "../../../NoItemSelected/index.23dfc897.js";
+import "../../../ObjectLogs/index.f174c542.js";
 import "../../../../react-json-view.57125fcf.js";
-import "../../../PaperForm/index.d79c6f76.js";
+import "../../../PaperForm/index.1bd86ee5.js";
 import "../../../Page/index.4237c241.js";
-import "../../../PropertyValue/index.dfcfe1ba.js";
+import "../../../PropertyValue/index.8a1adf3e.js";
 import "../../../SplitLayout/index.9ef430f6.js";
 import "../../../../react-splitter-layout.8b1655c8.js";
-import "../../../SideBar/index.1ae13a73.js";
-import "../../../AppBar/index.cc974d56.js";
-import "../../../AccountPopover/index.93aefccd.js";
-import { g as getAreasDictionary } from "../../dictionary.e72db809.js";
-import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
-import { v as varBounce } from "../../../animate/variants/bounce.784aaaaa.js";
-import { D as DraggableWindow } from "../../../DraggableWindow/index.b95a678e.js";
-import { throttle } from "lodash";
+import "../../../SideBar/index.c5ce0bad.js";
+import "../../../AppBar/index.71b38ee9.js";
+import "../../../AccountPopover/index.3a79c395.js";
 const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "root",
   "areaRoot",
+  "areasLoadingErrorRoot",
+  "areasLoadingErrorLoading",
+  "areasLoadingError",
+  "areasLoadingErrorIcon",
+  "areasLoadingErrorTitle",
+  "areasLoadingErrorDescription",
+  "areasLoadingErrorDivider",
+  "areasLoadingErrorTextAction",
   "areaGridLayoutPanelContainer",
   "areaGridLayout",
   "areaGridLayoutPopupsContainer",
+  "areasWindowPopUpList",
   "windowRoot",
   "windowHeader",
+  "windowHeaderContent",
   "windowHeaderTitle",
   "windowHeaderMainActions",
   "windowContent",
   "windowPopupRoot",
   "windowModalRoot",
+  "windowLinearProgressRoot",
+  "windowLinearProgressBar",
   "windowRootContainer",
   "windowToastiesContainer",
+  "windowToastiesContainerTostys",
   "windowToastyContainer",
   "windowToastyMeesageButtonsContainer",
   "windowToastyMessage",
@@ -106,7 +125,9 @@ const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "windowToastyClose",
   "panelWindowsRoot",
   "panelWindowsButtonContainer",
+  "containerLinearProgress",
   "selected",
+  "colapsed",
   "selectedWindow",
   "isMobile",
   "loading",
@@ -120,19 +141,30 @@ const useAreasViewerUtilityClasses = (ownerState) => {
   const slots = {
     root: ["root", ownerState.status, ownerState.isMobile && "isMobile", ownerState.isSkeleton && "isSkeleton"],
     areaRoot: ["areaRoot"],
+    areasLoadingErrorRoot: ["areasLoadingErrorRoot"],
+    areasLoadingErrorLoading: ["areasLoadingErrorLoading"],
+    areasLoadingError: ["areasLoadingError"],
+    areasLoadingErrorIcon: ["areasLoadingErrorIcon"],
+    areasLoadingErrorTitle: ["areasLoadingErrorTitle"],
+    areasLoadingErrorDescription: ["areasLoadingErrorDescription"],
+    areasLoadingErrorDivider: ["areasLoadingErrorDivider"],
     areaGridLayoutPanelContainer: ["areaGridLayoutPanelContainer"],
     areaGridLayout: ["areaGridLayout"],
     areaGridLayoutPopupsContainer: ["areaGridLayoutPopupsContainer"],
+    areasWindowPopUpList: ["areasWindowPopUpList"],
     windowRoot: ["windowRoot"],
     windowRootContainer: ["windowRootContainer"],
     windowHeader: ["windowHeader"],
     windowHeaderTitle: ["windowHeaderTitle"],
     windowHeaderMainActions: ["windowHeaderMainActions"],
     windowContent: ["windowContent"],
+    windowLinearProgressRoot: ["windowLinearProgressRoot"],
+    windowLinearProgressBar: ["windowLinearProgressBar"],
     windowPopupRoot: ["windowPopupRoot"],
     windowModalRoot: ["windowModalRoot"],
     selectedWindow: ["selectedWindow"],
     windowToastiesContainer: ["windowToastiesContainer"],
+    windowToastiesContainerTostys: ["windowToastiesContainerTostys"],
     windowToastyContainer: ["windowToastiesContainer"],
     windowToastyMeesageButtonsContainer: ["windowToastyMeesageButtonsContainer"],
     windowToastyMessage: ["windowToastyMessage"],
@@ -233,27 +265,6 @@ const AreasViewerRoot = styled("div")`
     & .${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%;
@@ -314,7 +325,7 @@ const AreasViewerRoot = styled("div")`
     }
 
     .react-grid-item.react-grid-placeholder {
-        background: green;
+        background: ${(props) => props.theme.palette.state.focus};
         opacity: 0.2;
         transition-duration: 100ms;
         z-index: 2;
@@ -592,29 +603,41 @@ function getMainActions(isDesktop, moduleActions) {
   );
   return mainActions;
 }
-function getMenuActions(windowId, isDesktop, moduleActions, urlPrefix, saveModuleCookies, resetModuleCookies, version) {
+function getMenuActions(options) {
+  const {
+    windowId,
+    isDesktop,
+    moduleActions,
+    urlPrefix,
+    saveModuleCookies,
+    resetModuleCookies,
+    version,
+    windowOptions = { allowPersistCookies: false }
+  } = options;
   let menuActions = [...moduleActions.filter((action) => action.visibility !== "allways")];
   if (isDesktop !== void 0 && isDesktop) {
     menuActions = menuActions.filter((action) => action.visibility === "normal");
   }
-  const saveCookiesAction = {
-    urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.SAVE_COOKIES}`,
-    onClick: () => saveModuleCookies(windowId),
-    disabled: false,
-    visibility: "normal",
-    dictionaryId: getAreasDictionary("label_persist_module_cookies"),
-    key: "save_cookies"
-  };
-  menuActions.push(saveCookiesAction);
-  const resetCookiesAction = {
-    urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.RESET_COOKIES}`,
-    onClick: () => resetModuleCookies(windowId),
-    disabled: false,
-    visibility: "normal",
-    dictionaryId: getAreasDictionary("label_reset_module_cookies"),
-    key: "reset_cookes"
-  };
-  menuActions.push(resetCookiesAction);
+  if (windowOptions.allowPersistCookies) {
+    const saveCookiesAction = {
+      urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.SAVE_COOKIES}`,
+      onClick: () => saveModuleCookies(windowId),
+      disabled: false,
+      visibility: "normal",
+      dictionaryId: getAreasDictionary(DICCTIONARY.label_persist_module_cookies),
+      key: "save_cookies"
+    };
+    menuActions.push(saveCookiesAction);
+    const resetCookiesAction = {
+      urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.RESET_COOKIES}`,
+      onClick: () => resetModuleCookies(windowId),
+      disabled: false,
+      visibility: "normal",
+      dictionaryId: getAreasDictionary(DICCTIONARY.label_reset_module_cookies),
+      key: "reset_cookes"
+    };
+    menuActions.push(resetCookiesAction);
+  }
   if (version) {
     const versionAction = {
       urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.VERSION}`,
@@ -649,7 +672,7 @@ function MainActions(props) {
     children: mainActions.map((mainAction) => {
       const tooltip = mainAction.label !== void 0 ? mainAction.label : getLabel(mainAction.dictionaryId || "");
       return /* @__PURE__ */ jsx(IconButton, {
-        src: mainAction.urlIcon,
+        src: mainAction.urlIcon || "",
         className: mainAction.className,
         onClick: mainAction.onClick,
         "aria-label": mainAction.label,
@@ -659,23 +682,85 @@ function MainActions(props) {
     })
   });
 }
+const WindowPopUpsList = (props) => {
+  const {
+    areaId,
+    windowId
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const windowsPopUps = useAreasStore((state2) => state2.hashAreas[areaId].hashLayoutItems.filter((li) => state2.hashWindows[li].parentLayoutId === windowId && state2.hashWindows[li].emergeType === "popup").map((lim) => {
+    const w = state2.hashWindows[lim];
+    return {
+      i: w.windowId,
+      url_icon: w.url_icon,
+      title: w.title
+    };
+  }), shallow);
+  const state = useAreasStore((state2) => state2);
+  const theme = useTheme();
+  const {
+    maximizeLayout
+  } = useAreasStore((state2) => state2.areaActions);
+  const onTouched = (layoutId) => {
+    maximizeLayout(areaId, layoutId);
+  };
+  console.log("windowsPopUps", windowsPopUps);
+  console.log("areaId", areaId);
+  console.log("state", state);
+  const menuActions = windowsPopUps ? windowsPopUps.map((element) => {
+    return {
+      onClick: () => onTouched(element.i),
+      label: element.title,
+      urlIcon: element.url_icon
+    };
+  }) : null;
+  if (menuActions && menuActions.length > 0) {
+    return /* @__PURE__ */ jsx(MenuActions, {
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.POPUP}`,
+      arrowType: "no-arrow",
+      marginTop: "12px!important",
+      marginLeft: "14px!important",
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      menuActions,
+      className: areasViewerClasses.areasWindowPopUpList,
+      menuActionSx: theme.components?.M4LAreasViewerWindowPopUpList?.styleOverrides,
+      withBadge: true,
+      badgeContent: menuActions.length.toString()
+    });
+  } else {
+    return null;
+  }
+};
 function Header(props) {
   const {
     areaId,
     windowId,
     emergeType
   } = props;
-  const [url_icon, title, moduleActions, onClose, version, singleId] = useAreasStore((state) => {
+  const [url_icon, title, moduleActions, onClose, version, windowOptions, colapsed] = useAreasStore((state) => {
     const window2 = state.hashWindows[windowId];
-    return [window2.url_icon, window2.title, window2.moduleActions, window2.onClose, window2.version, state.hashAreas[areaId].singleId];
+    return [window2.url_icon, window2.title, window2.moduleActions, window2.onClose, window2.version, window2.windowOptions, window2.colapsed];
   }, shallow);
   const {
     saveModuleCookies,
     resetModuleCookies
   } = useAreasStore((state) => state.windowActions, shallow);
+  const maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId, shallow);
   const {
     maximizeLayout,
-    normalizeLayouts
+    normalizeLayouts,
+    colapseLayoutItem,
+    unColapseLayoutItem
   } = useAreasStore((state) => state.areaActions, shallow);
   const {
     host_static_assets,
@@ -683,131 +768,261 @@ function Header(props) {
   } = useEnvironment();
   const isDesktop = useResponsiveDesktop();
   const isSkeleton = useModuleSkeleton();
+  useModuleDictionary();
   const urlPrefix = `${host_static_assets}/${environment_assets}`;
   const menuActions = useMemo(() => {
-    return getMenuActions(windowId, isDesktop, moduleActions, urlPrefix, saveModuleCookies, resetModuleCookies, version);
+    return getMenuActions({
+      windowId,
+      isDesktop,
+      moduleActions,
+      urlPrefix,
+      saveModuleCookies,
+      resetModuleCookies,
+      version,
+      windowOptions
+    });
   }, [moduleActions, isDesktop]);
   const onCloseLocal = () => {
     onClose && onClose(windowId);
   };
   const maxNormalize = () => {
-    if (singleId) {
+    if (maximizedId === windowId) {
       normalizeLayouts(areaId);
     } else {
       maximizeLayout(areaId, windowId);
     }
   };
+  const colapedToggle = () => {
+    console.log("Toggle", colapsed);
+    if (!colapsed) {
+      colapseLayoutItem(areaId, windowId);
+    } else {
+      unColapseLayoutItem(areaId, windowId);
+    }
+  };
   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, {
-      windowId
-    }), isDesktop && emergeType === "layout" && /* @__PURE__ */ jsx(IconButton, {
-      onClick: maxNormalize,
-      "aria-label": "click",
-      src: singleId ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NORMALIZE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.MAXIMIZE}`
-    }), menuActions.length > 0 && /* @__PURE__ */ jsx(MenuActions, {
-      arrowType: "no-arrow",
-      marginTop: "12px!important",
-      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",
-  position: "absolute"
-}));
-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 /* @__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")
+    children: [/* @__PURE__ */ jsx(LinearProgressIndeterminate, {}), /* @__PURE__ */ jsxs("div", {
+      className: areasViewerClasses.windowHeaderContent,
+      children: [/* @__PURE__ */ jsx(Icon, {
+        src: url_icon,
+        size: "medium"
+      }), /* @__PURE__ */ jsx(Typography, {
+        className: areasViewerClasses.windowHeaderTitle,
+        variant: "h5",
+        children: `${title}`
+      }), /* @__PURE__ */ jsx(MainActions, {
+        windowId
+      }), emergeType === "layout" ? /* @__PURE__ */ jsx(WindowPopUpsList, {
+        areaId,
+        windowId
+      }) : null, 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
+      }), !colapsed && (emergeType === "layout" || emergeType === "popup") && /* @__PURE__ */ jsx(IconButton, {
+        onClick: maxNormalize,
+        "aria-label": "click",
+        src: maximizedId === windowId ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NORMALIZE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.MAXIMIZE}`
+      }), !maximizedId && (emergeType === "layout" || emergeType === "popup") && /* @__PURE__ */ jsx(IconButton, {
+        onClick: colapedToggle,
+        "aria-label": "click",
+        src: !colapsed ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.COLAPSE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.UNCOLPASE}`,
+        dictionaryTooltipId: "pendiente"
+      }), onClose && /* @__PURE__ */ jsx(IconButton, {
+        onClick: onCloseLocal,
+        "aria-label": "click",
+        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CLOSE}`
+      })]
     })]
   });
 }
-const LoadingMF = (props) => {
+const ProggessLoadingMF = (props) => {
   const {
-    loadingProgress,
-    setNetworkRefresh
+    loadingProgress
   } = props;
-  if (loadingProgress !== -1) {
-    return /* @__PURE__ */ jsx(WrapperLinearProgress, {
-      id: "WrapperLinearProgress",
+  if (loadingProgress >= 0 && loadingProgress <= 100) {
+    return /* @__PURE__ */ jsx("div", {
+      className: areasViewerClasses.containerLinearProgress,
       children: /* @__PURE__ */ jsx(LinearProgress, {
         variant: "determinate",
         value: loadingProgress
       })
     });
+  } else {
+    console.log("LoadingMF***************************************", loadingProgress);
+  }
+  return null;
+};
+class ObservableLoaderMF {
+  constructor(host, scriptId, networkOperation, isRemote) {
+    __publicField(this, "host");
+    __publicField(this, "isRemote");
+    __publicField(this, "eventStatus");
+    __publicField(this, "scriptId");
+    __publicField(this, "networkOperation");
+    __publicField(this, "subscribers");
+    this.host = host;
+    this.subscribers = [];
+    this.scriptId = scriptId;
+    this.networkOperation = networkOperation;
+    this.isRemote = isRemote;
+    this.eventStatus = "progress";
+    console.log("ObservableLoaderMF constructor", this.host, scriptId);
+    this.start = this.start.bind(this);
+    this.subscribe = this.subscribe.bind(this);
+    this.unsubscribe = this.unsubscribe.bind(this);
+    this.notify = this.notify.bind(this);
+    this.tryAgain = this.tryAgain.bind(this);
+    setTimeout(this.start, 100);
+  }
+  tryAgain() {
+    console.log("start tryAgain");
+    if (this.eventStatus === "error") {
+      setTimeout(this.start, 100);
+      new Promise((resolve) => {
+        resolve("ok");
+      }).then(() => {
+        this.start();
+      });
+    }
+    console.log("end tryAgain");
+  }
+  async start() {
+    let percentCompleted = 0;
+    this.notify("progress", percentCompleted);
+    console.log("ObservableLoaderMF start", this.host);
+    const manifest = await fetch(`${this.host}/manifest.json?rnd=${Math.random()}`).then((res) => res.json()).catch(() => {
+      console.debug("Error fetching manifest", `${this.host}/manifest.json`);
+      setTimeout(() => this.notify("error", 0), 300);
+      return void 0;
+    });
+    console.log("ObservableLoaderMF cargado de manifest");
+    if (!manifest) {
+      return;
+    }
+    percentCompleted = 10;
+    this.notify("progress", percentCompleted);
+    const urlFile = `${this.host}/${manifest["src/index.tsx"]["file"]}?rnd=${Math.random()}`;
+    console.log("ObservableLoaderMF file", urlFile);
+    const controller = new AbortController();
+    const ret = await this.networkOperation({
+      method: "GET",
+      endPoint: urlFile,
+      isRemote: this.isRemote,
+      headers: { "Content-Type": "application/json" },
+      onDownloadProgress: (progressEvent) => {
+        try {
+          if (progressEvent.lengthComputable) {
+            percentCompleted = 10 + Math.round(progressEvent.loaded * 90 / progressEvent.total);
+          } else {
+            percentCompleted = 10 + progressEvent.loaded / 15e5 * 90;
+            if (percentCompleted > 95)
+              percentCompleted = 95;
+          }
+        } catch (error) {
+        }
+        this.notify("progress", percentCompleted);
+      },
+      isExternalUrl: true,
+      responseType: "text",
+      signal: controller.signal
+    }).then(() => {
+      return "ok";
+    }).catch(() => {
+      this.notify("error", 0);
+      return "error";
+    });
+    if (ret == "ok") {
+      const script = document.createElement("script");
+      const startTime = new Date().getTime();
+      script.id = this.scriptId;
+      script.crossOrigin = "";
+      script.type = "module";
+      script.src = urlFile || "";
+      script.onload = () => {
+        console.debug("Completed", new Date().getTime(), new Date().getTime() - startTime);
+        this.notify("complete", 100);
+      };
+      document.head.appendChild(script);
+      console.debug("Script appened", startTime);
+    }
   }
-  return /* @__PURE__ */ jsx(FallBackNotFound, {
-    setNetworkRefresh
+  subscribe(subscriber) {
+    this.subscribers.push(subscriber);
+    this.tryAgain();
+  }
+  unsubscribe(subscriber) {
+    console.log("unsubscribe", subscriber);
+    const index = this.subscribers.indexOf(subscriber);
+    if (index !== -1) {
+      this.subscribers.splice(index, 1);
+    }
+  }
+  notify(newEvent, progress) {
+    this.eventStatus = newEvent;
+    this.subscribers.forEach((subscriber) => {
+      subscriber(newEvent, progress);
+    });
+  }
+}
+const AreasLoadingError = (props) => {
+  const {
+    status,
+    action
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  console.log("test status view", status);
+  return /* @__PURE__ */ jsx("div", {
+    className: areasViewerClasses.areasLoadingErrorRoot,
+    children: status !== "error" ? /* @__PURE__ */ jsx("div", {
+      className: areasViewerClasses.areasLoadingErrorLoading,
+      children: /* @__PURE__ */ jsx(LinearProgressIndeterminate, {})
+    }) : /* @__PURE__ */ jsxs("div", {
+      className: areasViewerClasses.areasLoadingError,
+      children: [/* @__PURE__ */ jsx(Icon, {
+        className: areasViewerClasses.areasLoadingErrorIcon,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NAVIGATE_ERROR}`
+      }), /* @__PURE__ */ jsx(Typography, {
+        variant: "h3",
+        skeletonWidth: "100px",
+        className: areasViewerClasses.areasLoadingErrorTitle,
+        children: getLabel(getAreasDictionary(DICCTIONARY.area_error_title))
+      }), /* @__PURE__ */ jsx(Typography, {
+        variant: "subtitle",
+        skeletonWidth: "100px",
+        className: areasViewerClasses.areasLoadingErrorDescription,
+        children: getLabel(getAreasDictionary(DICCTIONARY.area_error_description))
+      }), /* @__PURE__ */ jsx("div", {
+        className: areasViewerClasses.areasLoadingErrorDivider
+      }), /* @__PURE__ */ jsx(Typography, {
+        variant: "paragraph",
+        skeletonWidth: "100px",
+        className: areasViewerClasses.areasLoadingErrorTextAction,
+        children: getLabel(getAreasDictionary(DICCTIONARY.area_error_recommendation))
+      }), /* @__PURE__ */ jsx(Button, {
+        onClick: action,
+        children: getLabel(getAreasDictionary(DICCTIONARY.area_error_intro))
+      })]
+    })
   });
 };
 function getDivScritId(prefix, moduleId) {
@@ -837,14 +1052,12 @@ function MFLoader(props) {
   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 [statusLoader, setStatusLoader] = useState("progress");
+  const [loadingProgress, setLoadingProgress] = useState(-1);
   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) {
@@ -868,7 +1081,6 @@ function MFLoader(props) {
   }
   const renderMicroFrontend = useCallback((newDScript) => {
     try {
-      setIsLoading(false);
       window[`render_${prefix}_${newDScript.moduleId}`](newDScript.divContainerId, environment, hostTools, currentLocale, {
         hostThemeOptions,
         fnComponentsOverrides
@@ -893,103 +1105,49 @@ function MFLoader(props) {
     return () => {
     };
   }, [moduleId]);
+  const tryAgainOnError = useCallback(() => {
+    window[`observable_${prefix}_${moduleId}`]?.tryAgain();
+  }, []);
   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);
-        }
+    const observableDownload = (event, progress) => {
+      setLoadingProgress(progress);
+      setStatusLoader(event);
+      if (event === "complete") {
+        renderMicroFrontend(dsScript);
       }
     };
-    loadIfNotLoaded();
+    if (!window[`render_${prefix}_${moduleId}`]) {
+      let observableLoaderMF;
+      if (!window[`observable_${prefix}_${moduleId}`]) {
+        observableLoaderMF = new ObservableLoaderMF(final_host, dsScript.scriptId, networkOperation, !environment.isLocalhost);
+        window[`observable_${prefix}_${moduleId}`] = observableLoaderMF;
+      } else {
+        observableLoaderMF = window[`observable_${prefix}_${moduleId}`];
+      }
+      observableLoaderMF.subscribe(observableDownload);
+    } else {
+      setStatusLoader("complete");
+      renderMicroFrontend(dsScript);
+    }
     return () => {
-      mounted = false;
-      controller.abort();
+      window[`observable_${prefix}_${moduleId}`].unsubscribe(observableDownload);
       cleanUp(dsScript);
     };
   }, [divScript]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx("div", {
-      id: divScript.divContainerId,
-      style: {
-        width: "100%",
-        height: "100%"
-      }
-    }), isLoading ? /* @__PURE__ */ jsx(LoadingMF, {
-      loadingProgress: networkProgress,
-      setNetworkRefresh
+  return /* @__PURE__ */ jsxs("div", {
+    id: divScript.divContainerId,
+    style: {
+      width: "100%",
+      height: "100%"
+    },
+    children: [statusLoader === "progress" ? /* @__PURE__ */ jsx(ProggessLoadingMF, {
+      loadingProgress
+    }) : null, statusLoader === "error" ? /* @__PURE__ */ jsx(AreasLoadingError, {
+      status: statusLoader,
+      action: tryAgainOnError
     }) : null]
   });
 }
@@ -1022,8 +1180,7 @@ const Component = (props) => {
 };
 React__default.memo(Component);
 const WindowRoot = styled("div")`
-
-    inset:0;
+    inset: 0;
     position: absolute;
     display: flex;
     flex-direction: column;
@@ -1039,28 +1196,6 @@ const WindowRoot = styled("div")`
     }
 
     // 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;
-        }
-    }
     /* 
     &.${areasViewerClasses.loading} .${areasViewerClasses.windowHeader} {
         border-bottom: 2px solid red !important; 
@@ -1084,13 +1219,16 @@ const WindowRoot = styled("div")`
         gap: 4px;
     }
 
-    
     // windowHeaderMainActions
     & .${areasViewerClasses.windowContent} {
         flex-grow: 1;
         position: relative;
     }
 
+    & .${areasViewerClasses.windowContent}.${areasViewerClasses.colapsed} {
+        display: none !important;
+        prop1: juan;
+    }
     // windowModalRoot
     & .${areasViewerClasses.windowModalRoot} {
         padding: 16px;
@@ -1107,37 +1245,29 @@ const WindowRoot = styled("div")`
         flex-direction: column;
     }
     // windowToastyContainer
-    & .${areasViewerClasses.windowToastyContainer}.${areasViewerClasses.success}  {
-    background-color: ${(props) => props.theme.palette.success.main}
+    & .${areasViewerClasses.windowToastyContainer}.${areasViewerClasses.success} {
+        background-color: ${(props) => props.theme.palette.success.main};
     }
 
     // windowToastyMeesageButtonsContainer
     & .${areasViewerClasses.windowToastyMeesageButtonsContainer} {
         display: flex;
-
     }
     & .MuiLinearProgress-root {
         width: 100%;
     }
 
-    
-
-
     // windowToastyMessage
     & .${areasViewerClasses.windowToastyMessage} {
         flex-grow: 1;
     }
 
-        // windowToastyContainer
+    // windowToastyContainer
     & .${areasViewerClasses.windowToastyPin}.${areasViewerClasses.pinIn} {
         border: 1px solid red;
     }
 
-
-
     ${(props) => props.theme.components?.M4LAreasViewerWindow?.styleOverrides}
-
-    
 `;
 function Toasty(props) {
   const {
@@ -1147,23 +1277,23 @@ function Toasty(props) {
   const toasty = useAreasStore((state) => state.hashWindows[windowId].hashToasties[toastyId], shallow);
   console.log("percentExecuted", toasty.percentExecuted, toasty.timer);
   const {
-    pinToasty,
-    closeToasty
+    pinToast: pinToasty,
+    closeToast: closeToasty
   } = useAreasStore((state) => state.windowActions, shallow);
   const {
     host_static_assets,
     environment_assets
   } = useEnvironment();
-  return /* @__PURE__ */ jsxs("div", {
+  return /* @__PURE__ */ jsx("div", {
     className: clsx(areasViewerClasses.windowToastyContainer, areasViewerClasses[toasty.type]),
-    children: [toasty.timer ? /* @__PURE__ */ jsx(LinearProgress, {
-      variant: "determinate",
-      value: toasty.percentExecuted
-    }) : null, /* @__PURE__ */ jsxs("div", {
+    children: /* @__PURE__ */ jsxs("div", {
       className: areasViewerClasses.windowToastyMeesageButtonsContainer,
-      children: [/* @__PURE__ */ jsx("div", {
+      children: [/* @__PURE__ */ jsxs("div", {
         className: areasViewerClasses.windowToastyMessage,
-        children: toasty.message
+        children: [toasty.timer ? /* @__PURE__ */ jsx(LinearProgress, {
+          variant: "determinate",
+          value: toasty.percentExecuted
+        }) : null, toasty.message]
       }), /* @__PURE__ */ jsxs("div", {
         className: areasViewerClasses.windowToastyButtonsContainer,
         children: [/* @__PURE__ */ jsx(IconButton, {
@@ -1180,7 +1310,7 @@ function Toasty(props) {
           src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.TOASTY_CLOSE}`
         })]
       })]
-    })]
+    })
   });
 }
 function Toasties(props) {
@@ -1193,46 +1323,53 @@ function Toasties(props) {
   }
   return /* @__PURE__ */ jsx("div", {
     className: areasViewerClasses.windowToastiesContainer,
-    children: tosties.map((t) => {
-      return /* @__PURE__ */ jsx(Toasty, {
-        windowId,
-        toastyId: t.id
-      }, t.id);
+    children: /* @__PURE__ */ jsx("div", {
+      className: areasViewerClasses.windowToastiesContainerTostys,
+      children: tosties.map((t) => {
+        return /* @__PURE__ */ jsx(Toasty, {
+          windowId,
+          toastyId: t.id
+        }, t.id);
+      })
     })
   });
 }
 const Window = (props) => {
   const {
-    emergeType,
-    windowId,
-    moduleId,
-    areaId
+    areaId,
+    windowId
   } = props;
-  const selected = useAreasStore((state) => emergeType === "layout" ? state.hashAreas[areaId].currentLayoutId : state.hashAreas[areaId].currentPopUpId) === windowId;
-  const wd = useAreasStore((state) => state.hashWindows[windowId], shallow);
+  const [emergeType, moduleId, winType] = useAreasStore((state) => {
+    return [state.hashWindows[windowId]?.emergeType, state.hashWindows[windowId]?.moduleId, state.hashWindows[windowId]?.winType];
+  }, shallow);
+  const selected = useAreasStore((state) => {
+    return emergeType === "layout" ? state.hashAreas[areaId]?.currentLayoutId : state.hashAreas[areaId]?.currentPopUpId;
+  }) === windowId;
+  const mfProps = useAreasStore((state) => state.hashWindows[windowId]?.mfProps, shallow);
+  const component = useAreasStore((state) => state.hashWindows[windowId]?.component, shallow);
+  const loading = useAreasStore((state) => state.hashWindows[windowId]?.loading, shallow);
+  const status = useAreasStore((state) => state.hashWindows[windowId]?.status, shallow);
+  const colapsed = useAreasStore((state) => state.hashWindows[windowId]?.colapsed, shallow);
+  const dynamicMFStore = useAreasStore((state) => state.hashWindows[windowId]?.dynamicMFStore, shallow);
   const {
     setActions,
     getCookie,
     getCookies,
     setCookie,
     close,
-    setLoading,
-    toasty
+    startProgress,
+    stopProgress,
+    toast
   } = useAreasStore((state) => state.windowActions, shallow);
   const {
-    selectWindowPopUp,
-    selectWindowLayout
-  } = useAreasStore((state) => state.areaActions);
+    selectLayout
+  } = useAreasStore((state) => state.areaActions, shallow);
   const {
     loadCookiesFromApi
-  } = useAreasStore((state) => state.windowActions);
+  } = useAreasStore((state) => state.windowActions, shallow);
   const onTouch = () => {
     if (!selected) {
-      if (emergeType === "popup") {
-        selectWindowPopUp(areaId, props.windowId);
-      } else if (emergeType === "layout") {
-        selectWindowLayout(areaId, props.windowId);
-      }
+      selectLayout(areaId, props.windowId);
     }
   };
   const windowTools = useMemo(() => ({
@@ -1246,119 +1383,75 @@ const Window = (props) => {
       setCookie(windowId, id, type, cookie);
     },
     close: () => close(windowId),
-    setLoading: (isLoading) => {
-      setLoading(windowId, isLoading);
-    },
-    toasty: (toastyOptions) => {
-      toasty(windowId, toastyOptions);
+    startProgress: () => startProgress(windowId),
+    stopProgress: () => stopProgress(windowId),
+    toast: (toastyOptions) => {
+      toast(windowId, toastyOptions);
     }
   }), []);
   useEffect(() => {
-    loadCookiesFromApi(windowId);
-  }, []);
-  return /* @__PURE__ */ jsxs(WindowRoot, {
+    if (status === "init") {
+      loadCookiesFromApi(windowId);
+    }
+  }, [status]);
+  console.log(
+    `Window Render***#,selected:${selected}`,
+    moduleId,
+    status,
+    loading
+  );
+  if (status === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(WindowRoot, {
     role: "presentation",
-    className: clsx(areasViewerClasses.windowRoot, selected ? areasViewerClasses.selectedWindow : null, wd.loading ? areasViewerClasses.loading : null),
+    className: clsx(areasViewerClasses.windowRoot, selected ? areasViewerClasses.selectedWindow : null, loading ? areasViewerClasses.loading : null),
     onMouseDown: onTouch,
-    children: [/* @__PURE__ */ jsx(Header, {
-      areaId,
-      windowId,
-      emergeType
-    }), /* @__PURE__ */ jsx(Toasties, {
-      windowId
-    }), /* @__PURE__ */ jsx("div", {
-      className: areasViewerClasses.windowContent,
-      children: wd.status === "init" ? /* @__PURE__ */ jsx("div", {
-        children: "BRUCE cargando"
-      }) : wd.winType === "microfrontend" ? /* @__PURE__ */ jsx(MemonizedMicroFrontend, {
-        moduleId,
-        dynamicMFStore: wd.dynamicMFStore,
-        windowTools,
-        ...wd.mfProps
-      }) : /* @__PURE__ */ jsx(Component, {
-        moduleId,
-        dynamicMFStore: wd.dynamicMFStore,
-        windowTools,
-        component: wd.component
-      })
-    })]
-  });
-};
-const MemonizedWindow = React__default.memo(Window);
-const WindowPopUp = (props) => {
-  const {
-    areaId,
-    windowProps,
-    windowId
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    selectWindowPopUp
-  } = useAreasStore((store) => store.areaActions);
-  const selectedPopUpId = useAreasStore((store) => store.hashAreas[areaId].currentPopUpId);
-  const zIndex = useAreasStore((store) => store.hashAreas[areaId].hashWindowsPopups[props.windowId].zIndex);
-  const isSelected = props.windowId === selectedPopUpId;
-  const onTouch = () => {
-    if (!isSelected) {
-      selectWindowPopUp(areaId, props.windowId);
-    }
-  };
-  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();
-      },
-      handle: (resizeHandle, ref) => /* @__PURE__ */ jsx("div", {
-        ref,
-        children: /* @__PURE__ */ jsx(Icon, {
-          src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.RESIZE}`,
-          className: `custom-handle custom-handle-${resizeHandle}`
-        })
-      }, resizeHandle),
-      children: /* @__PURE__ */ jsx(Window, {
-        ...props
-      })
+    children: /* @__PURE__ */ jsxs("div", {
+      className: areasViewerClasses.windowRootContainer,
+      children: [/* @__PURE__ */ jsx(Header, {
+        areaId,
+        windowId,
+        emergeType
+      }), /* @__PURE__ */ jsx(Toasties, {
+        windowId
+      }), /* @__PURE__ */ jsxs("div", {
+        className: clsx(areasViewerClasses.windowContent, colapsed ? areasViewerClasses.colapsed : null),
+        children: [status === "init" ? /* @__PURE__ */ jsx(Fragment, {
+          children: "...Brucee porr analizar Componente de carga"
+        }) : null, status === "loaded" ? winType === "microfrontend" ? /* @__PURE__ */ jsx(MemonizedMicroFrontend, {
+          moduleId,
+          dynamicMFStore,
+          windowTools,
+          ...mfProps
+        }) : /* @__PURE__ */ jsx(Component, {
+          moduleId,
+          dynamicMFStore,
+          windowTools,
+          component
+        }) : null]
+      })]
     })
   });
 };
-const MemonizedWindowPopUp = React__default.memo(WindowPopUp);
+React__default.memo(Window);
 const ResponsiveGridLayout = WidthProvider(Responsive);
-const GridLayout = (props) => {
+const AreaGridLayout = (props) => {
   const {
     areaId
   } = props;
-  const windowsLayouts = useAreasStore((state) => state.hashAreas[areaId].windowsLayouts, shallow);
-  const hashWindowsPopups = useAreasStore((state) => state.hashAreas[areaId].hashWindowsPopups, shallow);
-  const hashWindowsLayouts = useAreasStore((state) => state.hashAreas[areaId].hashWindowsLayouts, shallow);
-  const breakPointsLayouts = useAreasStore((state) => state.hashAreas[areaId].breakPointsLayouts, shallow);
-  const windowsPopUps = useAreasStore((state) => state.hashAreas[areaId].windowsPopUps, shallow);
+  const hashLayoutItems = useAreasStore((state) => state.hashAreas[areaId].hashLayoutItems, shallow);
+  const layouts = useAreasStore((state) => state.hashAreas[areaId].layouts, shallow);
+  const colapsedItems = useAreasStore((state) => state.hashAreas[areaId].colapsedItems, shallow);
   const breakpoints = useAreasStore((state) => state.hashAreas[areaId].breakpoints, shallow);
-  const viewMode = useAreasStore((state) => state.hashAreas[areaId].viewMode, shallow);
+  const maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId, shallow);
   const cols = useAreasStore((state) => state.hashAreas[areaId].cols, shallow);
   const {
-    onBreakpointsLayoutsChange
+    onBreakpointsLayoutsChange,
+    onContainerChange
   } = useAreasStore((state) => state.areaActions, shallow);
-  function onBreakpointChange(_newBreakpoint, _newCols) {
-  }
-  useEffect(() => {
-    setTimeout(() => {
-      window.dispatchEvent(new Event("resize"));
-    }, 100);
-  }, [viewMode, windowsLayouts]);
-  return /* @__PURE__ */ jsxs(
+  console.debug("Window***", hashLayoutItems, layouts);
+  return /* @__PURE__ */ jsx(
     ResponsiveGridLayout,
     {
       autoSize: false,
@@ -1366,54 +1459,37 @@ const GridLayout = (props) => {
       measureBeforeMount: true,
       resizeHandles: ["nw", "se"],
       className: clsx(areasViewerClasses.areaGridLayout, `${areasViewerClasses.areaGridLayout}-${areaId}`),
-      layouts: breakPointsLayouts,
-      onLayoutChange: (currentLayouts, newAllLayouts) => onBreakpointsLayoutsChange(areaId, currentLayouts, newAllLayouts),
-      onBreakpointChange,
+      layouts,
+      onLayoutChange: (layout, newLayouts) => onBreakpointsLayoutsChange(areaId, layout, newLayouts),
+      layoutItemRender: (p) => {
+        console.debug("layoutItemRender window", hashLayoutItems, p.i, p.type);
+        if (hashLayoutItems.indexOf(p.i) === -1) {
+          console.debug("NO EXISTE window", hashLayoutItems, p.i);
+          return /* @__PURE__ */ jsx(Fragment, {});
+        }
+        if (p.type === "placeholder") {
+          return /* @__PURE__ */ jsx("div", {
+            children: "Place holder"
+          });
+        }
+        return /* @__PURE__ */ jsx(Window, {
+          windowId: p.i,
+          areaId
+        });
+      },
       breakpoints,
       cols,
       rowHeight: ROW_HEIGTH_GRIDLAYOUT,
-      margin: [MARGIN_GRIDLAYOUT, MARGIN_GRIDLAYOUT],
-      containerPadding: [CONTAINER_PADDING_GRIDLAYOUT, CONTAINER_PADDING_GRIDLAYOUT],
+      containerMargin: [MARGIN_GRIDLAYOUT, MARGIN_GRIDLAYOUT],
+      containerPadding: [PADDING_GRIDLAYOUT, PADDING_GRIDLAYOUT],
       draggableHandle: ".m4l_draggable_handle",
-      onWidthChange: () => {
-        console.log("onWidthChange", areaId);
+      onContainerChange: (e) => {
+        onContainerChange(areaId, e);
       },
       preventCollision: false,
       verticalCompact: true,
-      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"), windowsLayouts.map((l) => {
-        if (hashWindowsLayouts[l.i]) {
-          return /* @__PURE__ */ jsx("div", {
-            children: /* @__PURE__ */ jsx(MemonizedWindow, {
-              ...hashWindowsLayouts[l.i]
-            })
-          }, l.i);
-        }
-        return null;
-      })]
+      maximizeId: maximizedId,
+      colapsedItems
     }
   );
 };
@@ -1422,10 +1498,12 @@ const PanelWindows = (props) => {
     areaId
   } = props;
   const status = useAreasStore((state) => state.hashAreas[areaId].status);
-  const mode = useAreasStore((state) => state.hashAreas[areaId].viewMode);
-  const singleId = useAreasStore((state) => state.hashAreas[areaId].singleId);
-  const windowsLayouts = useAreasStore((state) => state.hashAreas[areaId].windowsLayouts, shallow);
-  const hashWindowsLayouts = useAreasStore((state) => state.hashAreas[areaId].hashWindowsLayouts, shallow);
+  const maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId);
+  const hashLayoutItems = useAreasStore((state) => state.hashAreas[areaId].hashLayoutItems.map((key) => ({
+    i: key,
+    url_icon: state.hashWindows[key].url_icon,
+    title: state.hashWindows[key].title
+  })), shallow);
   const {
     maximizeLayout
   } = useAreasStore((state) => state.areaActions);
@@ -1433,21 +1511,21 @@ const PanelWindows = (props) => {
     maximizeLayout(areaId, layoutId);
   };
   if (status === "loaded") {
-    if (mode !== "single" || windowsLayouts.length < 2) {
+    if (!maximizedId || hashLayoutItems.length < 2) {
       return null;
     }
     return /* @__PURE__ */ jsx("div", {
       className: areasViewerClasses.panelWindowsRoot,
-      children: windowsLayouts.map((l) => {
+      children: hashLayoutItems.map((kl) => {
         return /* @__PURE__ */ jsx("div", {
-          className: clsx(areasViewerClasses.panelWindowsButtonContainer, singleId === l.i ? areasViewerClasses.selected : null),
+          className: clsx(areasViewerClasses.panelWindowsButtonContainer, maximizedId === kl.i ? areasViewerClasses.selected : null),
           children: /* @__PURE__ */ jsx(IconButton, {
-            src: hashWindowsLayouts[l.i].url_icon,
+            src: kl.url_icon,
             size: "small",
-            onClick: () => onTouched(l.i),
-            tooltip: singleId !== l.i ? hashWindowsLayouts[l.i].title : void 0
+            onClick: () => onTouched(kl.i),
+            tooltip: maximizedId !== kl.i ? kl.title : void 0
           })
-        }, l.i);
+        }, kl.i);
       })
     });
   } else {
@@ -1458,18 +1536,22 @@ const InnerForHooks = (props) => {
   const {
     areaId
   } = props;
+  const isDesktop = useResponsiveDesktop();
   const status = useAreasStore((state) => state.hashAreas[areaId].status);
+  console.debug("Area InnerForHooks***", status);
   return /* @__PURE__ */ jsxs("div", {
     className: clsx(areasViewerClasses.areaGridLayoutPanelContainer, `${areasViewerClasses.areaGridLayoutPanelContainer}-${areaId}`),
     children: [
-      status === "loaded" ? /* @__PURE__ */ jsx(GridLayout, {
+      status === "loaded" ? /* @__PURE__ */ jsx(AreaGridLayout, {
         areaId
-      }) : /* @__PURE__ */ jsx("div", {
-        children: "Loading.. Intentar si falla."
+      }) : /* @__PURE__ */ jsx(AreasLoadingError, {
+        status,
+        action: () => {
+        }
       }),
-      /* @__PURE__ */ jsx(PanelWindows, {
+      isDesktop ? /* @__PURE__ */ jsx(PanelWindows, {
         areaId
-      })
+      }) : null
     ]
   });
 };
@@ -1480,25 +1562,11 @@ const Area = (props) => {
   } = props;
   const classesAreaRoot = useAreasStore((state) => state.viwerClasses.areaRoot);
   const status = useAreasStore((state) => state.hashAreas[areaId].status);
-  const {
-    resizeMaximixedLayout
-  } = useAreasStore((state) => state.areaActions, shallow);
-  const throttleResizeMaximixedLayout = throttle(() => {
-    console.log("throttleResizeMaximixedLayout", areaId);
-    resizeMaximixedLayout(areaId);
-  }, THROTTLE_RESIZE_TIME, {
-    leading: false
-  });
-  const onResize = useCallback((_target) => {
-    throttleResizeMaximixedLayout();
-  }, []);
-  const ref = useResizeObserver(onResize);
   if (status === "init") {
     return null;
   }
   return /* @__PURE__ */ jsx("div", {
     className: clsx(classesAreaRoot, selected ? areasViewerClasses.selected : null, status === "loading" ? areasViewerClasses.loading : null),
-    ref,
     children: /* @__PURE__ */ jsx(InnerForHooks, {
       areaId
     })
@@ -1540,7 +1608,6 @@ const WindowModal = (props) => {
       children: /* @__PURE__ */ jsx(ResizeableWindow, {
         width: props.windowProps?.width || 400,
         height: props.windowProps?.height || 300,
-        className: areasViewerClasses.windowModalRoot,
         handle: (resizeHandle, ref) => /* @__PURE__ */ jsx("div", {
           ref,
           children: /* @__PURE__ */ jsx(Icon, {
@@ -1585,16 +1652,20 @@ function AreasViewer() {
   const currentArea = useAreasStore((state) => state.currentAreaId);
   const status = useAreasStore((state) => state.ownerState.status);
   const classesRoot = useAreasStore((state) => state.viwerClasses.root);
+  const {
+    init
+  } = useAreasStore((state) => state.areasActions);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(AreasViewerRoot, {
       className: classesRoot,
       children: status === "loaded" ? areas.map((area) => {
         return /* @__PURE__ */ jsx(Area, {
-          areaId: area.id,
-          selected: currentArea === area.id
-        }, area.id);
-      }) : /* @__PURE__ */ jsx(Fragment, {
-        children: "Bruce cargando"
+          areaId: area,
+          selected: currentArea === area
+        }, area);
+      }) : /* @__PURE__ */ jsx(AreasLoadingError, {
+        status,
+        action: () => init()
       })
     }), windowsModals.map((wm) => {
       if (hashWindowsModals[wm]) {
@@ -1608,6 +1679,5 @@ function AreasViewer() {
 }
 export {
   AreasViewer as A,
-  areasViewerClasses as a,
   useAreasViewerUtilityClasses as u
 };