@m4l/components 0.1.71 → 0.1.73

package/components/areas/components/{index.31f39977.js → AreasViewer/index.d33b4a7d.js}

@@ -1,83 +1,84 @@
-import { I as IconButton } from "../../mui_extended/IconButton/index.7aab3e04.js";
-import { u as useAreasStore } from "../hooks/useArea/index.c135e0cf.js";
-import { useEnvironment, useModuleDictionary, useModuleSkeleton, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
+import { styled } from "@mui/material/styles";
+import { r as react_resizable_css } from "../../../../react-resizable.67e38975.js";
+import { generateUtilityClasses, Skeleton, styled as styled$1, Typography as Typography$1, Dialog } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass } from "../../../../utils/index.94b9dc32.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 { A as AREAS_VIEWER_CLASS_NAME, a as AREAS_ADMIN_CLASS_NAME, g as getAreasDictionary, I as ICONS, D as DICCTIONARY } from "../index.bd29b1db.js";
-import { I as Icon } from "../../Icon/index.6f2a5618.js";
-import { S as ScrollBar } from "../../ScrollBar/index.bbe48f4d.js";
+import { I as Icon } from "../../../Icon/index.4eeb3de9.js";
+import { m } from "framer-motion";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React__default, { useState, useRef, useMemo, useCallback, useEffect } from "react";
-import { generateUtilityClasses, Skeleton, styled as styled$1, Typography as Typography$1, Dialog } from "@mui/material";
+import "react-router-dom";
+import "../../../animate/LoadingScreen/index.1d0c4307.js";
+import "../../../animate/PropagateLoader/index.be5b02c3.js";
+import { useModuleDictionary, useEnvironment, useModuleSkeleton, useNetwork, useHostTools, axiosOperation } from "@m4l/core";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.89428485.js";
 import clsx from "clsx";
 import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender, useResizeObserver } from "@m4l/graphics";
+import { u as useAreasStore } from "../../hooks/useAreas/index.6540b5ab.js";
+import "../AreasAdmin/index.b26ee1b2.js";
+import { I as ICONS } from "../../icons.3ec589d3.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.9c35425b.js";
+import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "zustand";
-import { R as ROW_HEIGTH_GRIDLAYOUT, M as MARGIN_GRIDLAYOUT, C as CONTAINER_PADDING_GRIDLAYOUT, T as THROTTLE_RESIZE_TIME } from "../contexts/AreasContext/index.e14d6799.js";
-import * as Yup from "yup";
-import "../../mui_extended/Accordion/index.44e96bb8.js";
-import "../../mui_extended/Avatar/index.fe06afd7.js";
-import "react-router-dom";
+import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.1607c78e.js";
+import "react-hook-form";
+import "../../../hook-form/RHFAutocomplete/index.743b5558.js";
+import { I as Image } from "../../../Image/index.52c84d9f.js";
+import { T as Typography } from "../../../mui_extended/Typography/index.1ff05abe.js";
+import "../../../mui_extended/Accordion/index.9c36b7a5.js";
+import "../../../mui_extended/Avatar/index.fe06afd7.js";
 import "@mui/material/Button";
-import { B as Button } from "../../mui_extended/Button/index.ec6525e0.js";
-import { I as Image } from "../../Image/index.1e3b7ff6.js";
+import { B as Button } from "../../../mui_extended/Button/index.1cb53ba2.js";
 import "@mui/lab";
-import { T as Typography } from "../../mui_extended/Typography/index.d5e0f69f.js";
-import { P as Popover } from "../../mui_extended/Popover/index.9f35d0eb.js";
-import { M as MenuActions } from "../../mui_extended/MenuActions/index.bff47c06.js";
-import "../../mui_extended/Pager/index.907d5801.js";
-import "../../mui_extended/Tab/index.e0653a0a.js";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../utils/index.ee16888d.js";
-import { D as DynamicMFParmsProvider } from "../contexts/DynamicMFParmsContext/index.1607c78e.js";
-import "../../../contexts/ModalContext/index.fca184e2.js";
-import { R as RHFormProvider } from "../../../contexts/RHFormContext/index.a7511399.js";
-import "react-hook-form";
-import "../../hook-form/RHFAutocomplete/index.c4ba070a.js";
-import "../../HelperText/index.d7b1b21a.js";
+import "../../../mui_extended/Popover/index.9f35d0eb.js";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index.d426f50b.js";
+import "../../../mui_extended/Pager/index.2c081f2c.js";
+import "../../../mui_extended/Tab/index.e0653a0a.js";
+import "../../../HelperText/index.581ddb8f.js";
 import debounce from "lodash/debounce";
-import "../../hook-form/RHFAutocompleteAsync/index.a63f3704.js";
-import "../../hook-form/RHFCheckbox/index.9055f88d.js";
+import "../../../hook-form/RHFAutocompleteAsync/index.5be9ea91.js";
+import "../../../hook-form/RHFCheckbox/index.77758da5.js";
 import "@mui/x-date-pickers";
-import "../../hook-form/RHFDateTime/index.2cb94a66.js";
-import { R as RHFTextField } from "../../hook-form/RHFTextField/index.7ce2b16e.js";
-import "../../hook-form/RHFPeriod/index.14dcf762.js";
-import "../../Period/index.53ea0562.js";
-import { A as Actions } from "../../CommonActions/components/Actions/index.6b7d480a.js";
-import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/index.ff90f2c0.js";
-import { A as ActionIntro } from "../../CommonActions/components/ActionIntro/index.e31ab7e9.js";
-import { c as cjs } from "../../../react-draggable.29f78f6d.js";
-import "../../ModalDialog/index.598f9a86.js";
-import { R as ResizeableWindow } from "../../Resizeable/index.ff4ce7a4.js";
-import "../../modal/WindowConfirm.70bcbb69.js";
-import "../../modal/WindowBase.32d35d71.js";
-import { styled } from "@mui/material/styles";
-import { r as react_resizable_css } from "../../../react-resizable.baf54eb2.js";
-import { WidthProvider, Responsive } from "react-grid-layout";
-import { m } from "framer-motion";
-import "../../animate/LoadingScreen/index.1d0c4307.js";
-import "../../animate/PropagateLoader/index.be5b02c3.js";
-import { W as WindowToolsMFProvider } from "../contexts/WindowToolsMFContext/index.8f3e2a04.js";
+import "../../../hook-form/RHFDateTime/index.d554d467.js";
+import "../../../hook-form/RHFTextField/index.5066b599.js";
+import "../../../hook-form/RHFPeriod/index.02253c2d.js";
+import "../../../Period/index.f24d7084.js";
+import "../../../CommonActions/components/Actions/index.665b1d56.js";
+import "../../../../contexts/ModalContext/index.ca4ffa64.js";
+import { c as cjs } from "../../../../react-draggable.64706389.js";
+import "../../../ModalDialog/index.1e6150f6.js";
+import { R as ResizeableWindow } from "../../../Resizeable/index.949b18ff.js";
+import "../../../modal/WindowConfirm.a9e351fa.js";
+import "../../../modal/WindowBase.e59ef8a1.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../../hook-form/RHFUpload/index.c57a43f8.js";
-import "../../DataGrid/index.77ae9b4c.js";
+import "../../../hook-form/RHFUpload/index.6ecf3230.js";
+import "../../../DataGrid/index.860f4d1c.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
-import "../../DynamicFilter/index.b2ba5167.js";
+import "../../../DynamicFilter/index.09d83f9d.js";
+import "yup";
 import "@hookform/resolvers/yup";
-import "../../LanguagePopover/index.310e9a3a.js";
-import "../../NavLink/index.ac3778af.js";
-import "../../NoItemSelected/index.3809e3d1.js";
-import "../../ObjectLogs/index.949d3595.js";
-import "../../../react-json-view.57125fcf.js";
-import "../../PaperForm/index.cf8af08b.js";
-import "../../Page/index.4237c241.js";
-import "../../PropertyValue/index.dfcfe1ba.js";
-import "../../../react-splitter-layout.8b1655c8.js";
-import "../../SplitLayout/index.5a8355d8.js";
-import "../../SideBar/index.4daafbab.js";
-import { D as DraggableWindow } from "../../../vendor.619c3533.js";
-import { L as LinearProgress } from "../../mui_extended/LinearProgress/index.c92b9ba9.js";
-import { v as varBounce } from "../../animate/variants/bounce.784aaaaa.js";
+import "../../../../contexts/RHFormContext/index.a7511399.js";
+import "../../../LanguagePopover/index.f7ee5a9c.js";
+import "../../../NavLink/index.5f3e2493.js";
+import "../../../NoItemSelected/index.b51f007c.js";
+import "../../../ObjectLogs/index.26644722.js";
+import "../../../../react-json-view.57125fcf.js";
+import "../../../PaperForm/index.be12afa3.js";
+import "../../../Page/index.4237c241.js";
+import "../../../PropertyValue/index.dfcfe1ba.js";
+import "../../../../react-splitter-layout.8b1655c8.js";
+import "../../../SplitLayout/index.5a8355d8.js";
+import "../../../SideBar/index.e716e9e0.js";
+import { D as DraggableWindow } from "../../../../vendor.fcb620ee.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 { throttle } from "lodash";
 const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "root",
@@ -93,12 +94,24 @@ const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "windowPopupRoot",
   "windowModalRoot",
   "windowRootContainer",
+  "windowToastiesContainer",
+  "windowToastyContainer",
+  "windowToastyMeesageButtonsContainer",
+  "windowToastyMessage",
+  "windowToastyButtonsContainer",
+  "windowToastyPin",
+  "windowToastyClose",
   "panelWindowsRoot",
   "panelWindowsButtonContainer",
   "selected",
   "selectedWindow",
   "isMobile",
-  "loading"
+  "loading",
+  "pinIn",
+  "success",
+  "info",
+  "warning",
+  "error"
 ], AREAS_VIEWER_CLASS_NAME);
 const useAreasViewerUtilityClasses = (ownerState) => {
   const slots = {
@@ -116,237 +129,18 @@ const useAreasViewerUtilityClasses = (ownerState) => {
     windowPopupRoot: ["windowPopupRoot"],
     windowModalRoot: ["windowModalRoot"],
     selectedWindow: ["selectedWindow"],
+    windowToastiesContainer: ["windowToastiesContainer"],
+    windowToastyContainer: ["windowToastiesContainer"],
+    windowToastyMeesageButtonsContainer: ["windowToastyMeesageButtonsContainer"],
+    windowToastyMessage: ["windowToastyMessage"],
+    windowToastyButtonsContainer: ["windowToastyButtonsContainer"],
+    windowToastyPin: ["windowToastyPin"],
+    windowToastyClose: ["windowToastyClose"],
     panelWindowsRoot: ["panelWindowsRoot"],
     panelWindowsButtonContainer: ["panelWindowsButtonContainer"]
   };
   return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_VIEWER_CLASS_NAME), {});
 };
-const areasAdminClasses = generateUtilityClasses(AREAS_ADMIN_CLASS_NAME, [
-  "root",
-  "areaChipRoot",
-  "areaChipTitle",
-  "areaChipDeleteButton",
-  "areasAddButton",
-  "areaContainerChips",
-  "areaIconLayer",
-  "areaChipEditButton",
-  "selected",
-  "isMobile",
-  "disabled"
-], AREAS_ADMIN_CLASS_NAME);
-const useAreasAdminUtilityClasses = (ownerState) => {
-  const slots = {
-    root: ["root", ownerState.status, ownerState.isMobile && "isMobile", ownerState.isSkeleton && "isSkeleton"],
-    areaChipRoot: ["areaChipRoot"],
-    areaIconLayer: ["areaIconLayer"],
-    areaContainerChips: ["areaContainerChips"],
-    areaChipTitle: ["areaChipTitle"],
-    areaChipDeleteButton: ["areaChipDeleteButton"],
-    areaChipEditButton: ["areaChipEditButton"],
-    areasAddButton: ["areasAddButton"]
-  };
-  return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_ADMIN_CLASS_NAME), {});
-};
-styled("div")(() => ({
-  display: "flex",
-  flexDirection: "row",
-  border: "1px solid gray",
-  "&.active": {
-    border: "1px solid red"
-  }
-}));
-styled("div")(({
-  theme
-}) => ({
-  height: "100%",
-  width: theme.spacing(1),
-  backgroundColor: theme.palette.background.default,
-  "&.active": {
-    backgroundColor: theme.palette.primary.main
-  }
-}));
-const EditAreaHeader = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  width: "100%",
-  height: "25px",
-  borderBottom: "1px solid",
-  borderColor: theme.palette.state.default,
-  justifyContent: "space-between",
-  alignItems: "center"
-}));
-const AreaChip = (props) => {
-  const {
-    areaId,
-    selected,
-    areaName,
-    disabled
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    deleteArea,
-    selectArea,
-    editArea
-  } = useAreasStore((state) => state.areasActions);
-  const [open, setOpen] = useState(false);
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const anchorRef = useRef(null);
-  const onClickDeleteArea = (e) => {
-    e.stopPropagation();
-    deleteArea(areaId);
-  };
-  const onSubmit = (data) => {
-    console.log("data areachip", data);
-    editArea(areaId, data.inputEditArea);
-    setOpen(false);
-  };
-  const handlerOpenPopover = () => {
-    setOpen(true);
-  };
-  const initialValues = {
-    inputEditArea: areaName
-  };
-  const validationSchema = useMemo(() => Yup.object().shape({
-    inputEditArea: Yup.string().required(getLabel(getAreasDictionary("validation_edit_area")))
-  }), [getLabel]);
-  return /* @__PURE__ */ jsxs("div", {
-    role: "presentation",
-    className: clsx(areasAdminClasses.areaChipRoot, selected ? areasAdminClasses.selected : null, disabled ? areasAdminClasses.disabled : null),
-    onClick: () => {
-      selectArea(areaId);
-    },
-    ref: anchorRef,
-    children: [/* @__PURE__ */ jsx("div", {
-      className: areasAdminClasses.areaChipTitle,
-      children: areaName
-    }), /* @__PURE__ */ jsxs("div", {
-      style: {
-        display: "flex"
-      },
-      children: [/* @__PURE__ */ jsx(IconButton, {
-        className: areasAdminClasses.areaChipEditButton,
-        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.EDIT_AREA}`,
-        size: "extraSmall",
-        onClick: handlerOpenPopover
-      }), /* @__PURE__ */ jsx(IconButton, {
-        className: areasAdminClasses.areaChipDeleteButton,
-        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.DELETE_AREA}`,
-        size: "extraSmall",
-        onClick: onClickDeleteArea
-      })]
-    }), /* @__PURE__ */ jsx(Popover, {
-      arrowType: "top-center",
-      open,
-      anchorEl: anchorRef.current,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "center"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "center"
-      },
-      onClose: () => setOpen(false),
-      sx: {
-        mt: "10px"
-      },
-      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: () => setOpen(false)
-          })]
-        }), /* @__PURE__ */ jsx(RHFTextField, {
-          name: "inputEditArea",
-          skeletonWidth: "70%",
-          skeletonHeight: "18px",
-          sx: {
-            mt: "20px"
-          }
-        }), /* @__PURE__ */ jsxs(Actions, {
-          children: [/* @__PURE__ */ jsx(ActionCancel, {
-            onClick: () => setOpen(false),
-            variant: "outlined",
-            skeletonWidth: "100%"
-          }), /* @__PURE__ */ jsx(ActionIntro, {
-            skeletonWidth: "100%"
-          })]
-        })]
-      })
-    })]
-  });
-};
-AreaChip.displayName = "AreaButtons";
-const AreasAdminRoot = styled("div")`
-    display: flex;
-    position: relative;
-
-    //areaRoot
-    & .${areasAdminClasses.areaChipRoot} {
-        display: flex;
-    }
-
-
-    ${(props) => props.theme.components?.M4LAreasAdmin?.styleOverrides}
-
- 
-`;
-function AreasAdmin() {
-  const areas = useAreasStore((state) => state.areas, shallow);
-  const currentArea = useAreasStore((state) => state.currentAreaId, shallow);
-  const status = useAreasStore((state) => state.ownerState.status);
-  const classesRoot = useAreasStore((state) => state.adminClasses.root);
-  const areasLength = useAreasStore((state) => state.areas.length);
-  const {
-    addArea
-  } = useAreasStore((state) => state.areasActions, shallow);
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  console.log("Render AreasAdmin", areas);
-  if (status !== "loaded") {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(AreasAdminRoot, {
-    className: classesRoot,
-    children: [/* @__PURE__ */ jsx("div", {
-      className: areasAdminClasses.areaIconLayer,
-      children: /* @__PURE__ */ jsx(Icon, {
-        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.LAYERS}`
-      })
-    }), /* @__PURE__ */ jsx("div", {
-      className: areasAdminClasses.areaContainerChips,
-      children: /* @__PURE__ */ jsx(ScrollBar, {
-        children: /* @__PURE__ */ jsx(Fragment, {
-          children: areas.map((area) => /* @__PURE__ */ jsx(AreaChip, {
-            areaId: area.id,
-            selected: area.id === currentArea,
-            areaName: area.name,
-            disabled: areasLength === 1
-          }, area.id))
-        })
-      })
-    }), /* @__PURE__ */ jsx(IconButton, {
-      className: areasAdminClasses.areasAddButton,
-      src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`,
-      size: "small",
-      onClick: addArea
-    })]
-  });
-}
 const AreasViewerRoot = styled("div")`
     /* display: flex; */
     width: 100%;
@@ -420,7 +214,7 @@ const AreasViewerRoot = styled("div")`
 
     // windowRoot
     & .${areasViewerClasses.windowRoot} {
-        inset:0;
+        inset: 0;
         position: absolute;
         display: flex;
         flex-direction: column;
@@ -440,21 +234,19 @@ const AreasViewerRoot = styled("div")`
     & .${areasViewerClasses.windowHeader} {
         display: flex;
         gap: 4px;
-        
+
         align-items: center;
         position: relative;
 
         padding: 8px;
         justify-content: end;
-        min-height: ${(props) => props.theme.spacing(5)} ;
+        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;
         }
@@ -477,7 +269,6 @@ const AreasViewerRoot = styled("div")`
         gap: 4px;
     }
 
-    
     // windowHeaderMainActions
     & .${areasViewerClasses.windowContent} {
         flex-grow: 1;
@@ -1219,7 +1010,10 @@ const Component = (props) => {
     ...windowTools,
     children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, {
       store: dynamicMFStore,
-      children: typeof component === "function" ? component() : component
+      children: typeof component === "function" ? component({
+        windowTools,
+        dynamicMFStore
+      }) : component
     })
   });
 };
@@ -1296,10 +1090,111 @@ const WindowRoot = styled("div")`
         padding: 16px;
     }
 
+    // windowToastiesContainer
+    & .${areasViewerClasses.windowToastiesContainer} {
+        padding: 4px;
+    }
+
+    // windowToastyContainer
+    & .${areasViewerClasses.windowToastyContainer} {
+        display: flex;
+        flex-direction: column;
+    }
+    // windowToastyContainer
+    & .${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
+    & .${areasViewerClasses.windowToastyPin}.${areasViewerClasses.pinIn} {
+        border: 1px solid red;
+    }
+
+
+
     ${(props) => props.theme.components?.M4LAreasViewerWindow?.styleOverrides}
 
     
 `;
+function Toasty(props) {
+  const {
+    windowId,
+    toastyId
+  } = props;
+  const toasty = useAreasStore((state) => state.hashWindows[windowId].hashToasties[toastyId], shallow);
+  console.log("percentExecuted", toasty.percentExecuted, toasty.timer);
+  const {
+    pinToasty,
+    closeToasty
+  } = useAreasStore((state) => state.windowActions, shallow);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  return /* @__PURE__ */ jsxs("div", {
+    className: clsx(areasViewerClasses.windowToastyContainer, areasViewerClasses[toasty.type]),
+    children: [toasty.timer ? /* @__PURE__ */ jsx(LinearProgress, {
+      variant: "determinate",
+      value: toasty.percentExecuted
+    }) : null, /* @__PURE__ */ jsxs("div", {
+      className: areasViewerClasses.windowToastyMeesageButtonsContainer,
+      children: [/* @__PURE__ */ jsx("div", {
+        className: areasViewerClasses.windowToastyMessage,
+        children: toasty.message
+      }), /* @__PURE__ */ jsxs("div", {
+        className: areasViewerClasses.windowToastyButtonsContainer,
+        children: [/* @__PURE__ */ jsx(IconButton, {
+          className: clsx(areasViewerClasses.windowToastyPin, toasty.timer ? null : areasViewerClasses.pinIn),
+          onClick: () => {
+            pinToasty(windowId, toastyId);
+          },
+          src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.TOASTY_PIN}`
+        }), /* @__PURE__ */ jsx(IconButton, {
+          className: areasViewerClasses.windowToastyClose,
+          onClick: () => {
+            closeToasty(windowId, toastyId);
+          },
+          src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.TOASTY_CLOSE}`
+        })]
+      })]
+    })]
+  });
+}
+function Toasties(props) {
+  const {
+    windowId
+  } = props;
+  const tosties = useAreasStore((state) => state.hashWindows[windowId].toasties, shallow);
+  if (tosties.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", {
+    className: areasViewerClasses.windowToastiesContainer,
+    children: tosties.map((t) => {
+      return /* @__PURE__ */ jsx(Toasty, {
+        windowId,
+        toastyId: t.id
+      }, t.id);
+    })
+  });
+}
 const Window = (props) => {
   const {
     emergeType,
@@ -1315,7 +1210,8 @@ const Window = (props) => {
     getCookies,
     setCookie,
     close,
-    setLoading
+    setLoading,
+    toasty
   } = useAreasStore((state) => state.windowActions, shallow);
   const {
     selectWindowPopUp,
@@ -1346,6 +1242,9 @@ const Window = (props) => {
     close: () => close(windowId),
     setLoading: (isLoading) => {
       setLoading(windowId, isLoading);
+    },
+    toasty: (toastyOptions) => {
+      toasty(windowId, toastyOptions);
     }
   }), []);
   useEffect(() => {
@@ -1359,6 +1258,8 @@ const Window = (props) => {
       areaId,
       windowId,
       emergeType
+    }), /* @__PURE__ */ jsx(Toasties, {
+      windowId
     }), /* @__PURE__ */ jsx("div", {
       className: areasViewerClasses.windowContent,
       children: wd.status === "init" ? /* @__PURE__ */ jsx("div", {
@@ -1699,9 +1600,7 @@ function AreasViewer() {
   });
 }
 export {
-  AreasAdmin as A,
-  useAreasAdminUtilityClasses as a,
-  areasViewerClasses as b,
-  AreasViewer as c,
+  AreasViewer as A,
+  areasViewerClasses as a,
   useAreasViewerUtilityClasses as u
 };

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Header/helper.d.ts

@@ -1,3 +1,3 @@
-import { ModuleAction } from '../../../../../../../../contexts';
-export declare function getMainActions(isDesktop: boolean | undefined, moduleActions: ModuleAction[]): ModuleAction[];
-export declare function getMenuActions(windowId: string, isDesktop: boolean | undefined, moduleActions: ModuleAction[], urlPrefix: string, saveModuleCookies: (wd: string) => void, resetModuleCookies: (wd: string) => void, version?: string): ModuleAction[];
+import { AreaWindowAction } from '../../../../../../../../types';
+export declare function getMainActions(isDesktop: boolean | undefined, moduleActions: AreaWindowAction[]): AreaWindowAction[];
+export declare function getMenuActions(windowId: string, isDesktop: boolean | undefined, moduleActions: AreaWindowAction[], urlPrefix: string, saveModuleCookies: (wd: string) => void, resetModuleCookies: (wd: string) => void, version?: string): AreaWindowAction[];

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Toasties/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type ToastiesProps = {
+    windowId: string;
+};
+export declare function Toasties(props: ToastiesProps): import("react").JSX.Element | null;
+export {};

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Toasties/subcomponents/Toasty/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type ToastyProps = {
+    windowId: string;
+    toastyId: number;
+};
+export declare function Toasty(props: ToastyProps): import("react").JSX.Element;
+export {};

package/components/areas/components/index.b2ee7610.js

@@ -0,0 +1,14 @@
+import "react";
+import "@m4l/core";
+import "@mui/material";
+import "../../Icon/index.4eeb3de9.js";
+import "clsx";
+import "react/jsx-runtime";
+import "../../mui_extended/IconButton/index.89428485.js";
+import "@m4l/graphics";
+import "zustand";
+import "../contexts/AreasContext/index.9c35425b.js";
+import "./AreasAdmin/index.b26ee1b2.js";
+import "zustand/shallow";
+import "../../ScrollBar/index.bbe48f4d.js";
+import "./AreasViewer/index.d33b4a7d.js";

package/components/areas/constants.66529246.js

@@ -0,0 +1,6 @@
+const AREAS_VIEWER_CLASS_NAME = "M4LAreasViewer";
+const AREAS_ADMIN_CLASS_NAME = "M4LAreasAdmin";
+export {
+  AREAS_ADMIN_CLASS_NAME as A,
+  AREAS_VIEWER_CLASS_NAME as a
+};