@m4l/components 3.1.9 → 4.0.0

package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/ChipMobile/ChipMobile-BsAN3n21.js

@@ -0,0 +1,211 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { useState, useRef, useMemo } from "react";
+import * as Yup from "yup";
+import { useTheme } from "@mui/material";
+import { shallow } from "zustand/shallow";
+import TouchRipple from "@mui/material/ButtonBase/TouchRipple";
+import { u as useAreasStore } from "../../../../../../hooks/useAreas/index-BSiQCHAL.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { g as getAreasDictionary, D as DICCTIONARY } from "../../../../../../dictionary-YUsP9beq.js";
+import { a as areasAdminClasses } from "../../../../classes/index-CryauVAw.js";
+import clsx from "clsx";
+import { I as ICONS } from "../../../../../../icons-CwFr-alN.js";
+import { C as ChipActionsMobile } from "../../../AreaChip/subcomponents/ChipActionsMobile/index-BJgnvkTZ.js";
+import { E as EditAreaHeader } from "../../../AreaChip/styles-CScNS_dH.js";
+import { R as RHFormProvider } from "../../../../../../../../contexts/RHFormContext/index-DE-wmCBw.js";
+import { A as Actions } from "../../../../../../../CommonActions/components/Actions/index-B4L6Y4pL.js";
+import { A as ActionCancel } from "../../../../../../../CommonActions/components/ActionCancel/index-CI0Yqh5P.js";
+import { A as ActionIntro } from "../../../../../../../CommonActions/components/ActionIntro/index-CCc2O0ve.js";
+import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton-1jvQBFbH.js";
+import { P as Popover } from "../../../../../../../mui_extended/Popover/Popover-B9KxhzxZ.js";
+import { T as Typography } from "../../../../../../../mui_extended/Typography/Typography-C_rG8K21.js";
+import { R as RHFTextField } from "../../../../../../../hook-form/RHFTextField/RHFTextField-B2nYzR3E.js";
+const ChipMobile = (props) => {
+  const { areaId, selected, disabled, setAnchorMenuAreas } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { deleteArea, selectArea, editArea } = useAreasStore((state) => state.areasActions);
+  const { setFocus } = useAreasStore((state) => state.areaAdminActions);
+  const areaName = useAreasStore((state) => state.hashAreas[areaId].name, shallow);
+  const listAreas = useAreasStore((state) => state.areasIds, shallow);
+  const [open, setOpen] = useState(false);
+  const { getLabel } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
+  const anchorRef = useRef(null);
+  const theme = useTheme();
+  const onClickDeleteArea = (e) => {
+    if (listAreas.length > 1) {
+      e.stopPropagation();
+      setFocus(true);
+      deleteArea(areaId);
+    }
+  };
+  const onSubmit = (data) => {
+    editArea(areaId, data.inputEditArea);
+    setOpen(false);
+    setFocus(false);
+  };
+  const handlerOpenPopoverEditArea = (e) => {
+    e?.stopPropagation();
+    setFocus(true);
+    setOpen(true);
+  };
+  const initialValues = {
+    inputEditArea: areaName
+  };
+  const validationSchema = useMemo(
+    () => Yup.object().shape({
+      inputEditArea: Yup.string().required(
+        getLabel(getAreasDictionary(DICCTIONARY.validation_edit_area))
+      )
+    }),
+    [getLabel]
+  );
+  const handlerOnClick = (e) => {
+    setAnchorMenuAreas && setAnchorMenuAreas(e.currentTarget);
+    selectArea(areaId);
+  };
+  const rippleRef = useRef(null);
+  const onRippleStart = (e) => {
+    if (rippleRef.current) {
+      rippleRef.current.start(e);
+    }
+  };
+  const onRippleStop = (e) => {
+    if (rippleRef.current) {
+      rippleRef.current.stop(e);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "presentation",
+        ref: anchorRef,
+        onMouseDown: onRippleStart,
+        onMouseUp: onRippleStop,
+        className: clsx(
+          areasAdminClasses.areaChipRoot,
+          selected ? areasAdminClasses.selected : null,
+          disabled ? areasAdminClasses.disabled : null
+        ),
+        onClick: (e) => {
+          handlerOnClick(e);
+        },
+        children: [
+          /* @__PURE__ */ jsx(TouchRipple, { ref: rippleRef, center: false, style: { position: "absolute", inset: "0" } }),
+          /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaChipTitle, children: areaName })
+        ]
+      }
+    ),
+    isDesktop ? /* @__PURE__ */ jsxs("div", { className: areasAdminClasses.areaContainerChipEditButton, children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          className: areasAdminClasses.areaChipEditButton,
+          src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.EDIT_AREA}`,
+          size: "small",
+          onClick: (e) => {
+            handlerOpenPopoverEditArea(e);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          className: areasAdminClasses.areaChipDeleteButton,
+          src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.DELETE_AREA}`,
+          size: "small",
+          onClick: (e) => {
+            onClickDeleteArea(e);
+          }
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(
+      ChipActionsMobile,
+      {
+        areaId,
+        handlerOpenPopoverEditArea
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "presentation",
+        onClick: (e) => {
+          e.stopPropagation();
+        },
+        children: /* @__PURE__ */ jsx(
+          Popover,
+          {
+            arrowType: "top-center",
+            open,
+            className: areasAdminClasses.areaEditPopover,
+            anchorEl: anchorRef.current,
+            anchorOrigin: { vertical: "bottom", horizontal: "center" },
+            transformOrigin: { vertical: "top", horizontal: "center" },
+            onClose: () => {
+              setFocus(false);
+              setOpen(false);
+            },
+            sx: {
+              mt: "10px",
+              ...theme.components?.M4LAreasAdminEditPopover?.styleOverrides
+            },
+            children: /* @__PURE__ */ jsxs(
+              RHFormProvider,
+              {
+                onSubmit,
+                values: initialValues,
+                validationSchema,
+                children: [
+                  /* @__PURE__ */ jsxs(EditAreaHeader, { children: [
+                    /* @__PURE__ */ jsx(Typography, { children: getLabel(getAreasDictionary(DICCTIONARY.label_edit_area)) }),
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CLOSE}`,
+                        size: "small",
+                        onClick: () => {
+                          setFocus(false);
+                          setOpen(false);
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    RHFTextField,
+                    {
+                      name: "inputEditArea",
+                      skeletonWidth: "70%",
+                      skeletonHeight: "18px",
+                      sx: { mt: "20px" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Actions, { children: [
+                    /* @__PURE__ */ jsx(
+                      ActionCancel,
+                      {
+                        onClick: () => {
+                          setOpen(false);
+                          setFocus(false);
+                        },
+                        variant: "outlined",
+                        skeletonWidth: "100%"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "100%" })
+                  ] })
+                ]
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+};
+ChipMobile.displayName = "AreaButtons";
+export {
+  ChipMobile as C
+};

package/components/areas/components/AreasAdmin/subcomponents/PanelWindowPopUp/index-DsVHcBGl.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { useEnvironment } from "@m4l/core";
+import { shallow } from "zustand/shallow";
+import { useTheme } from "@mui/material";
+import { u as useAreasStore } from "../../../../hooks/useAreas/index-BSiQCHAL.js";
+import { I as ICONS } from "../../../../icons-CwFr-alN.js";
+import { a as areasAdminClasses } from "../../classes/index-CryauVAw.js";
+import { M as MenuActions } from "../../../../../mui_extended/MenuActions/MenuActions-BJROCJX9.js";
+const PanelWindowPopUp = (props) => {
+  const { currentAreaId } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const windowsLayouts = useAreasStore(
+    (state) => state.hashAreas[currentAreaId].layoutItemsIds.filter((li) => state.hashWindows[li].emergeType === "layout").map((lim) => {
+      const w = state.hashWindows[lim];
+      return {
+        i: w.windowId,
+        url_icon: w.url_icon,
+        title: w.title
+      };
+    }),
+    shallow
+  );
+  const theme = useTheme();
+  const { maximizeLayout } = useAreasStore((state) => state.areaActions);
+  const onTouched = (layoutId) => {
+    maximizeLayout(currentAreaId, layoutId);
+  };
+  const menuActions = windowsLayouts.map((element) => {
+    return {
+      onClick: () => onTouched(element.i),
+      label: element.title,
+      urlIcon: element.url_icon
+    };
+  });
+  return menuActions.length > 0 ? /* @__PURE__ */ jsx(
+    MenuActions,
+    {
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.LAYERS}`,
+      arrowType: "no-arrow",
+      marginTop: "12px!important",
+      marginLeft: "14px!important",
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
+      menuActions,
+      className: areasAdminClasses.areasPopoverListWindows,
+      iconButtonClassName: areasAdminClasses.areasPopoverListWindowsIcon,
+      menuActionSx: theme.components?.M4LAreasAdminMobilePopoverOptions?.styleOverrides
+    }
+  ) : null;
+};
+export {
+  PanelWindowPopUp as P
+};

package/components/areas/components/AreasViewer/classes/index-Kuh5obMP.js

@@ -0,0 +1,93 @@
+import { generateUtilityClasses } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass } from "../../../../../utils/index-WXiWKKyo.js";
+import { a as AREAS_VIEWER_CLASS_NAME } from "../../../constants-rqODZNZe.js";
+const areasViewerClasses = generateUtilityClasses(
+  AREAS_VIEWER_CLASS_NAME,
+  [
+    /* elements */
+    "root",
+    "areaRoot",
+    "areaGridLayoutPanelContainer",
+    "areaGridLayout",
+    "areaGridLayoutPopupsContainer",
+    "areasWindowPopUpList",
+    "windowRoot",
+    "windowHeader",
+    "windowHeaderContent",
+    "windowHeaderTitle",
+    "windowHeaderMainActions",
+    "windowHeaderCancelHandle",
+    "windowContent",
+    "windowPopupRoot",
+    "windowModalRoot",
+    "windowLinearProgressRoot",
+    "windowLinearProgressBar",
+    "windowRootContainer",
+    "panelWindowsRoot",
+    "panelWindowsButtonContainer",
+    "panelWindowsSeparator",
+    "containerLinearProgress",
+    "resizeHandle",
+    "loaderContainer",
+    "containerComponent",
+    /* states or variants of elements */
+    // 'active',
+    "selected",
+    "colapsed",
+    "selectedWindow",
+    "isMobile",
+    "loading",
+    "pinIn",
+    "success",
+    "info",
+    "warning",
+    "error"
+  ],
+  AREAS_VIEWER_CLASS_NAME
+);
+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"],
+    windowHeaderCancelHandle: ["windowHeaderCancelHandle"],
+    windowContent: ["windowContent"],
+    windowLinearProgressRoot: ["windowLinearProgressRoot"],
+    windowLinearProgressBar: ["windowLinearProgressBar"],
+    windowPopupRoot: ["windowPopupRoot"],
+    windowModalRoot: ["windowModalRoot"],
+    selectedWindow: ["selectedWindow"],
+    panelWindowsRoot: ["panelWindowsRoot"],
+    panelWindowsButtonContainer: ["panelWindowsButtonContainer"],
+    panelWindowsSeparator: ["panelWindowsSeparator"],
+    resizeHandle: ["resizeHandle"],
+    loaderContainer: ["loaderContainer"],
+    containerComponent: ["containerComponent"]
+  };
+  return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_VIEWER_CLASS_NAME), {});
+};
+export {
+  areasViewerClasses as a,
+  useAreasViewerUtilityClasses as u
+};

package/components/areas/components/AreasViewer/index-Bz_d-5Fn.js

@@ -0,0 +1,46 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { A as AreasViewerRoot } from "./styles-CThRq33E.js";
+import { A as Area } from "./subcomponents/Area/index-DawSNkN1.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index-BSiQCHAL.js";
+import { M as MemonizedWindowModal } from "./subcomponents/Area/subcomponents/WindowModal/index-B8owcxU9.js";
+import { shallow } from "zustand/shallow";
+import { L as LoadingError } from "../../../LoadingError/LoadingError-B3XRg-pT.js";
+import { g as getNameDataTestId } from "../../../../test/getNameDataTestId-BaBTWhBr.js";
+import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants-rqODZNZe.js";
+import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock-CF-669v-.js";
+function AreasViewer() {
+  const areas = useAreasStore((state) => state.areasIds, shallow);
+  const windowsModals = useAreasStore((state) => state.windowsModals);
+  const hashWindowsModals = useAreasStore((state) => state.hashWindowsModals);
+  const currentArea = useAreasStore((state) => state.currentAreaId);
+  const status = useAreasStore((state) => state.ownerState.status);
+  const classesRoot = useAreasStore((state) => state.viwerClasses.root);
+  const { init } = useAreasStore((state) => state.areasActions);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      AreasViewerRoot,
+      {
+        className: classesRoot,
+        ...process.env.NODE_ENV !== "production" ? {
+          [TEST_PROP_ID]: getNameDataTestId(
+            AREAS_VIEWER_CLASS_NAME,
+            "root",
+            ""
+          )
+        } : {},
+        children: status === "loaded" ? areas.map((area) => {
+          return /* @__PURE__ */ jsx(Area, { areaId: area, selected: currentArea === area }, area);
+        }) : /* @__PURE__ */ jsx(LoadingError, { status, action: () => init() })
+      }
+    ),
+    windowsModals.map((wm) => {
+      if (hashWindowsModals[wm]) {
+        return /* @__PURE__ */ jsx(MemonizedWindowModal, { ...hashWindowsModals[wm] }, wm);
+      }
+      return null;
+    })
+  ] });
+}
+export {
+  AreasViewer as A
+};

package/components/areas/components/AreasViewer/styles-CThRq33E.js

@@ -0,0 +1,124 @@
+import "../../../../react-resizable-Dpx4PV2R.js";
+import { styled } from "@mui/material/styles";
+import { a as areasViewerClasses } from "./classes/index-Kuh5obMP.js";
+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;
+  }
+
+  // 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.vars.palette.background.default};
+    padding: ${(props) => props.theme.spacing(0)};
+  }
+
+  & .${areasViewerClasses.windowRoot}.${areasViewerClasses.selected} {
+    border-top: 1px solid green;
+  }
+  // windowHeaderTitle
+  & .${areasViewerClasses.windowHeaderTitle} {
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    color: ${(props) => props.theme.vars.palette.text.primary};
+    text-overflow: ellipsis;
+  }
+  // windowHeaderMainActions
+  & .${areasViewerClasses.windowHeaderMainActions} {
+    display: flex;
+
+    gap: 4px;
+  }
+
+  // windowHeaderMainActions
+  & .${areasViewerClasses.windowContent} {
+    flex-grow: 1;
+    position: relative;
+  }
+
+  // windowModalRoot
+  & .${areasViewerClasses.windowModalRoot} {
+    padding: 16px;
+  }
+
+  ${(props) => props.theme.components?.M4LAreasViewer?.styleOverrides}
+`;
+export {
+  AreasViewerRoot as A
+};

package/components/areas/components/AreasViewer/subcomponents/Area/index-DawSNkN1.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { I as InnerForHooks } from "./subcomponents/InnerForHooks/index-B0owbalS.js";
+import clsx from "clsx";
+import { u as useAreasStore } from "../../../../hooks/useAreas/index-BSiQCHAL.js";
+import { a as areasViewerClasses } from "../../classes/index-Kuh5obMP.js";
+const Area = (props) => {
+  const { selected, areaId } = props;
+  const classesAreaRoot = useAreasStore((state) => state.viwerClasses.areaRoot);
+  const status = useAreasStore((state) => state.hashAreas[areaId].status);
+  if (status === "init") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        classesAreaRoot,
+        selected ? areasViewerClasses.selected : null,
+        status === "loading" ? areasViewerClasses.loading : null
+      ),
+      children: /* @__PURE__ */ jsx(InnerForHooks, { areaId })
+    }
+  );
+};
+Area.displayName = "Area";
+export {
+  Area as A
+};

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/AreaGridLayout/index-AmBS9Uk1.js

@@ -0,0 +1,64 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { shallow } from "zustand/shallow";
+import { W as Window } from "../Window/index-BwqYKnS_.js";
+import { u as useAreasStore } from "../../../../../../hooks/useAreas/index-BSiQCHAL.js";
+import { a as areasViewerClasses } from "../../../../classes/index-Kuh5obMP.js";
+import clsx from "clsx";
+import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../../../../../contexts/AreasContext/helper-C7Cw4wso.js";
+import { R as ResizeHandle } from "./subcomponents/ResizeHandle/index-DStAG9ZF.js";
+import { w as withSizeProvider } from "../../../../../../../GridLayout/subcomponents/withSizeProvider/index-DXbMA_Cf.js";
+import { R as Responsive } from "../../../../../../../GridLayout/subcomponents/Responsive/index-Co4cLAS4.js";
+const ResponsiveGridLayout = withSizeProvider(Responsive);
+const AreaGridLayout = (props) => {
+  const { areaId } = props;
+  const hashLayoutItems = useAreasStore((state) => state.hashAreas[areaId].layoutItemsIds, shallow);
+  const layouts = useAreasStore((state) => state.hashAreas[areaId].layouts, shallow);
+  const breakpoints = useAreasStore((state) => state.hashAreas[areaId].breakpoints, shallow);
+  const maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId, shallow);
+  const cols = useAreasStore((state) => state.hashAreas[areaId].cols, shallow);
+  const { onBreakpointsLayoutsChange, onContainerChange } = useAreasStore(
+    (state) => state.areaActions,
+    shallow
+  );
+  return /* @__PURE__ */ jsx(
+    ResponsiveGridLayout,
+    {
+      autoSize: false,
+      compactType: "vertical",
+      measureBeforeMount: true,
+      resizeHandles: ["nw", "se"],
+      className: clsx(
+        areasViewerClasses.areaGridLayout,
+        `${areasViewerClasses.areaGridLayout}-${areaId}`
+      ),
+      layouts,
+      onLayoutChange: (layout, newLayouts) => onBreakpointsLayoutsChange(areaId, layout, newLayouts),
+      draggableHandle: ".m4l_draggable_handle",
+      draggableCancel: `.${areasViewerClasses.windowHeaderCancelHandle}`,
+      layoutItemRender: (p) => {
+        if (hashLayoutItems.indexOf(p.i) === -1) {
+          return /* @__PURE__ */ jsx(Fragment, {});
+        }
+        if (p.type === "placeholder") {
+          return /* @__PURE__ */ jsx("div", {});
+        }
+        return /* @__PURE__ */ jsx(Window, { windowId: p.i, areaId });
+      },
+      breakpoints,
+      colapsedHeight: RESPONSIVE_COLAPSED_HEIGHTS,
+      rowHeight: RESPONSIVE_ROW_HEIGHTS,
+      cols,
+      containerMargin: [MARGIN_GRIDLAYOUT, MARGIN_GRIDLAYOUT],
+      containerPadding: [PADDING_GRIDLAYOUT, PADDING_GRIDLAYOUT],
+      onContainerChange: (e) => {
+        onContainerChange(areaId, e);
+      },
+      preventCollision: false,
+      maximizeId: maximizedId,
+      resizeHandle: /* @__PURE__ */ jsx(ResizeHandle, {})
+    }
+  );
+};
+export {
+  AreaGridLayout as A
+};

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/AreaGridLayout/subcomponents/ResizeHandle/index-DStAG9ZF.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { a as areasViewerClasses } from "../../../../../../classes/index-Kuh5obMP.js";
+const ResizeHandle = React__default.forwardRef(
+  (props, ref) => {
+    const { handleAxis, ...restProps } = props;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx(
+          `react-resizable-handle react-resizable-handle-${handleAxis}`,
+          areasViewerClasses.resizeHandle
+        ),
+        ...restProps
+      }
+    );
+  }
+);
+export {
+  ResizeHandle as R
+};

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/InnerForHooks/index-B0owbalS.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { A as AreaGridLayout } from "../AreaGridLayout/index-AmBS9Uk1.js";
+import { P as PanelWindows } from "../PanelWindows/index-WtuGbyR0.js";
+import clsx from "clsx";
+import { a as areasViewerClasses } from "../../../../classes/index-Kuh5obMP.js";
+import { u as useAreasStore } from "../../../../../../hooks/useAreas/index-BSiQCHAL.js";
+import { L as LoadingError } from "../../../../../../../LoadingError/LoadingError-B3XRg-pT.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+const InnerForHooks = (props) => {
+  const { areaId } = props;
+  const isDesktop = useResponsiveDesktop();
+  const status = useAreasStore((state) => state.hashAreas[areaId].status);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        areasViewerClasses.areaGridLayoutPanelContainer,
+        `${areasViewerClasses.areaGridLayoutPanelContainer}-${areaId}`
+      ),
+      children: [
+        status === "loaded" ? /* @__PURE__ */ jsx(AreaGridLayout, { areaId }) : /* @__PURE__ */ jsx(LoadingError, { status, action: () => {
+        } }),
+        isDesktop ? /* @__PURE__ */ jsx(PanelWindows, { areaId }) : null
+      ]
+    }
+  );
+};
+export {
+  InnerForHooks as I
+};