@m4l/components 0.1.50 → 0.1.52

package/components/areas/contexts/AreaContext/{index.282b9a30.js → index.f25f7180.js}

@@ -1,17 +1,21 @@
-import React__default, { createContext, forwardRef, useRef, useImperativeHandle, useEffect, useCallback } from "react";
+import React__default, { createContext, useRef, useEffect } from "react";
 import { shallow } from "zustand/shallow";
-import { W as Window } from "../../components/Window/index.ac629c20.js";
-import { u as useModal } from "../../../../hooks/useModal/index.2097260d.js";
 import { useNetwork } from "@m4l/core";
 import { createStore, useStore } from "zustand";
 import { immer } from "zustand/middleware/immer";
 import { devtools } from "zustand/middleware";
 import debounce from "lodash/debounce";
-import { u as useAreasStore } from "../../hooks/useArea/index.868089ed.js";
+import cloneDeep from "lodash.clonedeep";
+import { u as useAreasStore } from "../../hooks/useArea/index.7bdbbb79.js";
+import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
 import { jsx } from "react/jsx-runtime";
+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 getParmsFromValue = (key, data) => {
   try {
     if (Array.isArray(data)) {
@@ -25,6 +29,60 @@ const getParmsFromValue = (key, data) => {
   }
   return void 0;
 };
+function setAddBreakPoints(state, newLayout) {
+  const layoutsBreakPoints = state.breakpointsLayouts;
+  const beforeMaximizebreakpointsLayouts = state.beforeMaximizebreakpointsLayouts;
+  for (const key in layoutsBreakPoints) {
+    const layoutBreakpoint = layoutsBreakPoints[key];
+    layoutBreakpoint.push(newLayout);
+  }
+  if (state.viewMode === "single") {
+    for (const key in beforeMaximizebreakpointsLayouts) {
+      const beforeLayoutBreakpoint = beforeMaximizebreakpointsLayouts[key];
+      beforeLayoutBreakpoint.push(newLayout);
+    }
+  }
+  return layoutsBreakPoints;
+}
+function setBreakPointsMaximized(state, layoutId) {
+  const layoutsBreakPoints = state.breakpointsLayouts;
+  const container = document.getElementsByClassName(`M4L_Area_wrapper_${state.id}`)[0];
+  if (container) {
+    const clientHeight = container.clientHeight - 40;
+    for (const key in layoutsBreakPoints) {
+      const layoutBreakpoint = layoutsBreakPoints[key];
+      const cols = key in NORMALIZED_COLS ? NORMALIZED_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 = key in NORMALIZED_COLS ? NORMALIZED_COLS[key] : 1;
+          l.minW = 0;
+          l.maxW = cols;
+          l.minH = 0;
+          l.maxH = heigth_by_rowheigth;
+          l.isResizable = false;
+          l.isDraggable = false;
+        } else {
+          l.x = 0;
+          l.y = 1;
+          l.h = 0;
+          l.w = 0;
+          l.minW = 0;
+          l.maxW = 0;
+          l.minH = 0;
+          l.maxH = 0;
+        }
+        l.isResizable = false;
+        l.isDraggable = false;
+      }
+    }
+  }
+  return layoutsBreakPoints;
+}
 function getDataFromResponse(data, state) {
   const newBreakPointsLayouts = getParmsFromValue(COOKIE_BREAKPOINT_LAYOUTS, data);
   const windows = getParmsFromValue(COOKIE_WINDOWS, data);
@@ -44,7 +102,6 @@ function getDataFromResponse(data, state) {
         };
       }
     }
-    console.log("GET cookies", newBreakPointsLayouts, newHashWindowLayouts);
   }
   return {
     newBreakPointsLayouts,
@@ -53,17 +110,21 @@ function getDataFromResponse(data, state) {
   };
 }
 const createAreaStore = (initProps) => {
-  console.debug("Creating Area State");
   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(
@@ -71,6 +132,27 @@ const createAreaStore = (initProps) => {
       immer((set, get) => ({
         ...startProps,
         actions: {
+          addWindow: (newWindow) => {
+            const windowId = `${get().id}_window_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
+            console.log("addWindow", newWindow.emergeType);
+            if (newWindow.emergeType === "layout") {
+              get().actions.addWindowLayout(windowId, newWindow);
+            } else if (newWindow.emergeType === "popup") {
+              get().actions.addWindowPopUp(windowId, newWindow);
+            } else if (newWindow.emergeType === "modal") {
+              get().actions.addWindowModal(windowId, newWindow);
+            }
+          },
+          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(
@@ -106,7 +188,6 @@ const createAreaStore = (initProps) => {
                 };
                 state.currentPopUpId = windowId;
               }
-              console.log("addWindowPopUp fin");
             });
             get().actions.selectWindowPopUp(popUpId);
           },
@@ -121,6 +202,9 @@ const createAreaStore = (initProps) => {
               delete state.hashWindowsLayouts[removeLayoutId];
             });
             get().actions.saveLayouts();
+            if (get().singleId === removeLayoutId) {
+              get().actions.maximizeLayout();
+            }
           },
           addWindowLayout: (windowId, newWindow) => {
             const newLayout = {
@@ -138,9 +222,14 @@ const createAreaStore = (initProps) => {
                 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;
@@ -155,7 +244,6 @@ const createAreaStore = (initProps) => {
                 nrKeys++;
               }
             }
-            console.log("saveWindows", nrKeys, saveObjetc, JSON.stringify(saveObjetc));
             if (nrKeys > 0) {
               get().networkOperation({
                 method: "PUT",
@@ -178,7 +266,9 @@ const createAreaStore = (initProps) => {
           },
           bouncedSaveBreakpointsLayouts: debounce(
             () => {
-              const purgedLayouts = { ...get().breakpointsLayouts };
+              const purgedLayouts = {
+                ...get().viewMode === "multiple" ? get().breakpointsLayouts : get().beforeMaximizebreakpointsLayouts
+              };
               const finalLayouts = {};
               for (const key in purgedLayouts) {
                 const element = purgedLayouts[key];
@@ -196,7 +286,6 @@ const createAreaStore = (initProps) => {
                 }
               }
               if (Object.keys(finalLayouts).length > 0) {
-                console.log(finalLayouts);
                 get().networkOperation({
                   method: "PUT",
                   endPoint: `cookies/${get().id}/${COOKIE_BREAKPOINT_LAYOUTS}`,
@@ -214,7 +303,9 @@ const createAreaStore = (initProps) => {
             set((state) => {
               state.breakpointsLayouts = newAllLayouts;
             });
-            get().actions.bouncedSaveBreakpointsLayouts();
+            if (!get().singleId) {
+              get().actions.bouncedSaveBreakpointsLayouts();
+            }
           },
           selectWindowLayout: (layoutId) => {
             set((state) => {
@@ -242,7 +333,7 @@ const createAreaStore = (initProps) => {
             });
             setTimeout(() => {
               const container = document.getElementsByClassName(
-                `M4L_GridLayout_${get().id}`
+                `M4L_WrapperGridLayout_${get().id}`
               )[0];
               const element = document.getElementsByClassName(
                 `M4L_WindowPopUp_${popUpId}`
@@ -250,16 +341,42 @@ const createAreaStore = (initProps) => {
               if (element && container) {
                 const { top, left } = element.getBoundingClientRect();
                 const { top: containerTop, left: containerLeft } = container.getBoundingClientRect();
-                console.log(
-                  "scroll top:",
-                  `M4L_WindowPopUp_${popUpId}`,
-                  top,
-                  containerTop
-                );
                 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: {
@@ -286,17 +403,41 @@ const createAreaStore = (initProps) => {
                   newGridLayouts,
                   newHashWindowLayouts
                 } = getDataFromResponse(response.data, state);
-                state.breakpointsLayouts = newBreakPointsLayouts;
+                if (state.viewMode === "multiple") {
+                  state.breakpointsLayouts = newBreakPointsLayouts;
+                } else {
+                  state.breakpointsLayouts = newBreakPointsLayouts;
+                  state.beforeMaximizebreakpointsLayouts = newBreakPointsLayouts;
+                }
                 state.gridLayouts = newGridLayouts;
                 state.hashWindowsLayouts = newHashWindowLayouts;
-                console.log("Area loaded");
                 state.status = "loaded";
               });
+              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);
+                  }
+                }
+              }
+            }
           }
         }
       })),
@@ -305,7 +446,7 @@ const createAreaStore = (initProps) => {
   );
 };
 const AreaContext = createContext(null);
-const AreaProvider = forwardRef((props, ref) => {
+const AreaProvider = (props) => {
   const {
     children,
     id,
@@ -313,6 +454,11 @@ const AreaProvider = forwardRef((props, ref) => {
     loadWindows = true
   } = props;
   const loadAreasFromNetwork = useAreasStore((state) => state.loadAreasFromNetwork);
+  const {
+    setAreaLink
+  } = useAreasStore((state) => state.internalActions);
+  const isDesktop = useResponsiveDesktop();
+  const isFirstRender = useFirstRender([isDesktop]);
   const {
     networkOperation
   } = useNetwork();
@@ -322,29 +468,23 @@ const AreaProvider = forwardRef((props, ref) => {
       id,
       networkOperation,
       loadAreasFromNetwork,
-      loadWindows
+      loadWindows,
+      isDesktop: !!isDesktop
     });
   }
   const {
-    addWindowLayout,
-    addWindowPopUp
-  } = useStore(areaStoreRef.current, (state) => state.actions, shallow);
-  const {
-    loadFromApi
+    loadFromApi,
+    changeDesktopBreakpoint
   } = useStore(areaStoreRef.current, (state) => state.internalActions, shallow);
   const status = useStore(areaStoreRef.current, (state) => state.status, shallow);
-  const {
-    openModal,
-    closeModal
-  } = useModal();
-  useImperativeHandle(ref, () => ({
-    store: areaStoreRef.current,
-    addWindow
-  }), []);
   useEffect(() => {
-    console.log("useEffect AreaProvider");
+    if (!isFirstRender) {
+      changeDesktopBreakpoint(!!isDesktop);
+    }
+  }, [isDesktop]);
+  useEffect(() => {
+    setAreaLink(id, areaStoreRef.current);
     return () => {
-      console.log("useEffect cluanUp AreaProvider****");
     };
   }, []);
   useEffect(() => {
@@ -352,41 +492,16 @@ const AreaProvider = forwardRef((props, ref) => {
       loadFromApi();
     }
   }, [active]);
-  console.log("Rendeer AreaProvider status", status, loadAreasFromNetwork);
-  const closeWindowModal = useCallback(() => {
-    closeModal();
-  }, []);
-  const openWindowModal = useCallback((container_id, newWindowProps) => {
-    openModal({
-      window: /* @__PURE__ */ jsx(Window, {
-        ...newWindowProps,
-        windowId: container_id,
-        onClose: closeWindowModal
-      })
-    });
-  }, []);
-  const addWindow = useCallback((newWindow) => {
-    const newId = `${id}_window_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
-    if (newWindow.emergeType === "layout") {
-      addWindowLayout(newId, newWindow);
-    } else if (newWindow.emergeType === "popup") {
-      addWindowPopUp(newId, newWindow);
-    } else {
-      openWindowModal(newId, newWindow);
-    }
-    return newId;
-  }, []);
   return /* @__PURE__ */ jsx(AreaContext.Provider, {
-    value: {
-      store: areaStoreRef.current,
-      addWindow
-    },
+    value: areaStoreRef.current,
     children
   });
-});
+};
 AreaProvider.displayName = "AreaProvider";
 React__default.memo(AreaProvider);
 export {
   AreaProvider as A,
+  CONTAINER_PADDING_GRIDLAYOUT as C,
+  ROW_HEIGTH_GRIDLAYOUT as R,
   AreaContext as a
 };

package/components/areas/contexts/AreaContext/store.d.ts

@@ -1,8 +1,15 @@
-import { NetworkProps } from '@m4l/core';
+import { Maybe, NetworkProps } from '@m4l/core';
 import { Layout, Layouts } from 'react-grid-layout';
 import { DebouncedFunc } from 'lodash';
-import { HashWindowsByLayouts, HashWindowsByPopups, NewLayoutProps, NewPopUpProps } from '../../components/Area/types';
+import { HashWindowsByLayouts, HashWindowsByPopups, ModalProps, NewLayoutProps, NewModalProps, NewPopUpProps, NewWindowProps } from '../../components/Area/types';
 export declare type AreaStatus = 'init' | 'load' | 'loaded' | 'error';
+export declare type Breakpoints = {
+    [P: string]: number;
+};
+export declare type Cols = {
+    [P: string]: number;
+};
+export declare type ViewAreaMode = 'multiple' | 'single';
 export interface AreaState {
     zPopUpIndex: number;
     id: string;
@@ -10,16 +17,26 @@ export interface AreaState {
     loadWindows: boolean;
     status: AreaStatus;
     breakpointsLayouts: Layouts;
+    beforeMaximizebreakpointsLayouts: Layouts;
     gridLayouts: Layout[];
     windowsPopUps: string[];
+    windowModal?: Maybe<ModalProps>;
     hashWindowsPopups: HashWindowsByPopups;
     hashWindowsLayouts: HashWindowsByLayouts;
     networkOperation: (props: NetworkProps) => Promise<any>;
     currentLayoutId: string;
     currentPopUpId: string;
+    breakpoints: Breakpoints;
+    cols: Cols;
+    viewMode: ViewAreaMode;
+    singleId?: string;
+    isDesktop: boolean;
 }
 export interface AreaStateWithActions extends AreaState {
     actions: {
+        addWindow: (newWindow: NewWindowProps) => void;
+        closeWindowModal: () => void;
+        addWindowModal: (container_id: string, newWindowModalProps: NewModalProps) => void;
         closeWindowPopUp: (removePopUpId: string) => void;
         addWindowPopUp: (container_id: string, newWindowPopupProps: NewPopUpProps) => void;
         closeWindowLayout: (removeLayoutId: string) => void;
@@ -29,13 +46,16 @@ export interface AreaStateWithActions extends AreaState {
         bouncedSaveBreakpointsLayouts: DebouncedFunc<() => void>;
         selectWindowLayout: (layoutId: string) => void;
         selectWindowPopUp: (popUpId: string) => void;
+        maximizeLayout: (layoutId?: string) => void;
+        normalizeLayouts: () => void;
     };
     internalActions: {
         loadFromApi: () => void;
+        changeDesktopBreakpoint: (isDesktop: boolean) => void;
     };
 }
 declare type DefaultStoreProps = Omit<AreaState, 'id'>;
-declare type InitialStoreProps = Pick<AreaState, 'id' | 'networkOperation' | 'loadAreasFromNetwork' | 'loadWindows'> & Partial<DefaultStoreProps>;
+declare type InitialStoreProps = Pick<AreaState, 'id' | 'networkOperation' | 'loadAreasFromNetwork' | 'loadWindows' | 'isDesktop'> & Partial<DefaultStoreProps>;
 export declare const createAreaStore: (initProps: InitialStoreProps) => Omit<Omit<import("zustand").StoreApi<AreaStateWithActions>, "setState"> & {
     setState<A extends string | {
         type: unknown;

package/components/areas/contexts/AreasContext/{index.cbfa4a53.js → index.7406c20f.js}

@@ -3,7 +3,7 @@ import { useHostTools, useModuleDictionary, useNetwork, EmitEvents } from "@m4l/
 import { createStore, useStore } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { L as LABEL_NEW_AREA } from "../../index.d1ebea1b.js";
+import { L as LABEL_NEW_AREA } from "../../index.6f09d168.js";
 import { shallow } from "zustand/shallow";
 import { useFirstRender } from "@m4l/graphics";
 import { jsx } from "react/jsx-runtime";
@@ -11,7 +11,6 @@ const addAreaNoBoilerPlate = (state) => {
   let newName = "";
   const newId = `area_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
   newName = `${state.getLabel(LABEL_NEW_AREA)} ${state.areas.length + 1}`;
-  console.log("addAreaNoBoilerPlate", newName);
   state.areas.push({ id: newId, name: newName, loadWindows: false });
   state.currentArea = newId;
   if (state.loadAreasFromNetwork) {
@@ -69,7 +68,6 @@ const createAreasStore = (initProps) => {
             });
           },
           selectArea: (newAreaId) => {
-            console.log("Areas selected, ", newAreaId);
             set((state) => {
               if (state.areas.findIndex((area) => area.id === newAreaId) > -1) {
                 state.currentArea = newAreaId;
@@ -116,11 +114,12 @@ const createAreasStore = (initProps) => {
               }
             }
           },
-          setAreaRef: (areaId, ref) => {
+          setAreaLink: (areaId, store) => {
             set((state) => {
               const areaIndex = state.areas.findIndex((area) => area.id === areaId);
-              if (areaIndex > -1 && !state.areas[areaIndex].ref) {
-                state.areas[areaIndex].ref = ref;
+              if (areaIndex > -1) {
+                state.areas[areaIndex].store = store;
+                state.areas[areaIndex].linked = true;
               }
             });
           }
@@ -161,22 +160,17 @@ function AreasProvider(props) {
     setHandlerGetLabel
   } = useStore(areasStoreRef.current, (state) => state.internalActions, shallow);
   const addWindow = useCallback((newWindow) => {
-    console.log("addWindow raw");
     const currentArea = areasStoreRef.current?.getState().currentArea;
     const areas = areasStoreRef.current?.getState().areas;
     if (currentArea && areas) {
       const areaIndex = areas.findIndex((area) => area.id == currentArea);
-      if (areaIndex > -1 && areas[areaIndex].ref) {
-        const areaRef = areas[areaIndex].ref;
-        if (areaRef) {
-          areaRef.addWindow(newWindow);
-        }
+      if (areaIndex > -1 && areas[areaIndex].store) {
+        areas[areaIndex].store?.getState().actions.addWindow(newWindow);
       }
     }
   }, []);
   useEffect(() => {
     if (status === "loaded") {
-      console.log("useEffect Areas loaded");
       onLoad && onLoad();
     }
   }, [status]);
@@ -188,7 +182,6 @@ function AreasProvider(props) {
   useEffect(() => {
     events_add_listener(EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW, addWindow);
     areasStoreRef.current?.getState().internalActions.loadFromApi();
-    console.log("useEffect AreasProvider Emmiter");
     return () => {
       events_remove_listener(EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW, addWindow);
     };

package/components/areas/contexts/AreasContext/store.d.ts

@@ -1,7 +1,7 @@
-import { AreaProviderRef } from '../AreaContext/types';
 import { AreaType } from '../../components/Area/types';
 import { GetLabelType, NetworkProps } from '@m4l/core';
 import { WritableDraft } from 'immer/dist/internal';
+import { AreaStore } from '../AreaContext/store';
 export declare type AreasStatus = 'init' | 'loading' | 'loaded' | 'error';
 export interface AreasState {
     networkOperation: (props: NetworkProps) => Promise<any>;
@@ -20,7 +20,7 @@ export interface AreasStateWithActions extends AreasState {
     internalActions: {
         setHandlerGetLabel: (newHandler: GetLabelType) => void;
         loadFromApi: () => void;
-        setAreaRef: (areaId: string, ref: AreaProviderRef) => void;
+        setAreaLink: (areaId: string, store: AreaStore) => void;
     };
 }
 declare type DefaultStoreProps = Omit<AreasState, 'currentArea'>;

package/components/areas/contexts/{index.ea2185f5.js → index.e80d8f0f.js}

@@ -6,7 +6,7 @@ import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 import cloneDeep from "lodash.clonedeep";
 import { jsx } from "react/jsx-runtime";
-import "./AreasContext/index.cbfa4a53.js";
+import "./AreasContext/index.7406c20f.js";
 function getCookiesContainer(data, containerId) {
   const cookies = {};
   try {
@@ -31,7 +31,7 @@ const createWindowStore = (initProps) => {
   delete startProps.devCookies;
   return createStore(
     devtools(
-      immer((set, get) => ({
+      immer((set, get, _api) => ({
         ...startProps,
         actions: {
           setActions: (newActions) => {
@@ -79,7 +79,6 @@ const createWindowStore = (initProps) => {
         },
         internalActions: {
           loadCookiesFromApi: () => {
-            console.log("loadCookiesFromApi start");
             if (get().status === "init") {
               get().networkOperation({
                 method: "GET",
@@ -102,10 +101,6 @@ const createWindowStore = (initProps) => {
                     response.data,
                     state.windowId
                   );
-                  console.log(
-                    "loadCookiesFromApi end",
-                    state.cookies.moduleCookies
-                  );
                   state.status = "loaded";
                 });
               }).catch((_response) => {
@@ -116,7 +111,6 @@ const createWindowStore = (initProps) => {
             }
           },
           saveModuleCookies: () => {
-            console.log("saveModuleCookies end", get().cookies.moduleCookies);
             for (const key in get().cookies.windowCookies) {
               const cookie = get().cookies.windowCookies[key];
               get().networkOperation({
@@ -132,7 +126,11 @@ const createWindowStore = (initProps) => {
           }
         }
       })),
-      { name: `window store ${initProps.windowId}` }
+      {
+        name: `window store ${initProps.windowId}`,
+        store: `window dev store ${initProps.windowId}`,
+        trace: true
+      }
     )
   );
 };
@@ -162,14 +160,15 @@ function WindowMFProvider(props) {
   }
   useEffect(() => {
     windowStoreRef.current?.getState().internalActions.loadCookiesFromApi();
+    return () => {
+      console.debug("useEffect cleanUP WindowMFProvider", props.windowId, windowStoreRef.current);
+    };
   }, []);
   useEffect(() => {
     if (windowStoreRef.current?.getState().status === "loaded") {
-      console.log("useEffect Reemplazo de ventan");
       dynamicMFStoreRef.current?.getState().actions.changeData(props.dynamicParams);
     }
   }, [props.dynamicParams]);
-  console.log("Render WindowProvider");
   return /* @__PURE__ */ jsx(WindowContext.Provider, {
     value: windowStoreRef.current,
     children
@@ -182,10 +181,6 @@ function WindowToolsMFProvider(props) {
     setActions,
     ...other
   } = props;
-  useEffect(() => {
-    console.log("useEffect {DynamicMFParmsProvider}", other);
-  }, []);
-  console.log("Render WindowToolsMFProvider", other);
   return /* @__PURE__ */ jsx(WindowToolsMFContext.Provider, {
     value: {
       setActions,

package/components/areas/hooks/{index.98cf18fc.js → index.0fd57f88.js}

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { useStore } from "zustand";
-import { b as WindowContext, c as WindowToolsMFContext } from "../contexts/index.ea2185f5.js";
+import { b as WindowContext, c as WindowToolsMFContext } from "../contexts/index.e80d8f0f.js";
 import "../contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 const useWindow = () => {
   const context = useContext(WindowContext);