@m4l/components 9.17.1-beta-feature-731-m4l-components-code-editor.0 → 9.18.0

package/components/WindowBase/WindowBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WindowBase.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/WindowBase/WindowBase.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwB,eAAe,EAAE,MAAM,SAAS,CAAC;AAShE;;;;GAIG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,qDA6EhD,CAAC"}
+{"version":3,"file":"WindowBase.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/WindowBase/WindowBase.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwB,eAAe,EAAE,MAAM,SAAS,CAAC;AAShE;;;;GAIG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,qDAkFhD,CAAC"}

package/components/WindowBase/WindowBase.js

@@ -1,75 +1,75 @@
-import { jsx as e, jsxs as z } from "@emotion/react/jsx-runtime";
+import { jsx as e, jsxs as T } from "@emotion/react/jsx-runtime";
 import { getPropDataTestId as i } from "../../test/getNameDataTestId.js";
 import { WINDOW_BASE_KEY_COMPONENT as o } from "./constants.js";
-import { getComponentSlotRoot as T } from "../../utils/getComponentSlotRoot.js";
-import N from "clsx";
-import { HeaderWindowBase as v } from "./subcomponents/Header/HeaderWindowBase.js";
-import { EditionInfo as E } from "./subcomponents/EditionInfo/EditionInfo.js";
-import { WindowBaseStyled as P, ToastContainerStyled as D, ContentWindowStyled as O, LinearProgressIndeterminateStyled as _ } from "./slots/WindowBaseSlots.js";
-import { useComponentSize as b, AppearanceComponentProvider as j } from "@m4l/graphics";
-import { WindowBaseSlots as r } from "./slots/WindowBaseEnum.js";
-const G = (u) => {
+import { getComponentSlotRoot as b } from "../../utils/getComponentSlotRoot.js";
+import v from "clsx";
+import { HeaderWindowBase as N } from "./subcomponents/Header/HeaderWindowBase.js";
+import { EditionInfo as D } from "./subcomponents/EditionInfo/EditionInfo.js";
+import { WindowBaseStyled as E, ToastContainerStyled as P, ContentWindowStyled as O, LinearProgressIndeterminateStyled as _ } from "./slots/WindowBaseSlots.js";
+import { useComponentSize as j, AppearanceComponentProvider as A } from "@m4l/graphics";
+import { WindowBaseSlots as a } from "./slots/WindowBaseEnum.js";
+const J = (w) => {
   const {
-    children: S,
-    size: a = "medium",
-    selected: d = !1,
+    children: u,
+    size: d = "medium",
+    selected: s = !1,
     maximized: t,
-    variant: s = "outlined",
-    version: W,
-    buildTime: g,
+    variant: m = "outlined",
+    version: S,
+    buildTime: W,
     dataTestId: n,
     onClose: B,
     className: C,
     isLoading: I,
     windowId: x,
     onMouseDown: h,
-    editionInfo: m,
-    emergeType: p = "layout",
-    collapsed: l,
-    draggable: c = !0,
-    ...y
-  } = u, { currentSize: f } = b(a), w = {
-    selected: d,
-    variant: t ? "text" : s,
-    size: f,
-    emergeType: p,
+    editionInfo: l,
+    emergeType: r = "layout",
+    collapsed: p,
+    draggable: y,
+    ...z
+  } = w, { currentSize: c } = j(d), f = y ?? r !== "panel", g = {
+    selected: s,
+    variant: t ? "text" : m,
+    size: c,
+    emergeType: r,
     maximized: t,
-    collapsed: l,
-    draggable: c
+    collapsed: p,
+    draggable: f
   };
-  return /* @__PURE__ */ e(j, { defaultSize: f, children: /* @__PURE__ */ z(
-    P,
+  return /* @__PURE__ */ e(A, { defaultSize: c, children: /* @__PURE__ */ T(
+    E,
     {
-      className: N(T(o), C),
-      ...i(o, r.wrapperWindowBase, n),
-      ownerState: w,
+      className: v(b(o), C),
+      ...i(o, a.wrapperWindowBase, n),
+      ownerState: g,
       onMouseDown: h,
       children: [
         /* @__PURE__ */ e(
-          v,
+          N,
           {
-            ...i(o, r.headerContentWindowBase, n),
-            version: W,
-            buildTime: g,
-            size: a,
-            variant: s,
-            selected: d,
+            ...i(o, a.headerContentWindowBase, n),
+            version: S,
+            buildTime: W,
+            size: d,
+            variant: m,
+            selected: s,
             maximized: t,
-            collapsed: l,
+            collapsed: p,
             onClose: B,
-            emergeType: p,
-            draggable: c,
-            ...y
+            emergeType: r,
+            draggable: f,
+            ...z
           }
         ),
-        /* @__PURE__ */ e(D, { fixed: !1, position: "top-right", containerId: x }),
-        m && /* @__PURE__ */ e(E, { editionInfo: m }),
+        /* @__PURE__ */ e(P, { fixed: !1, position: "top-right", containerId: x }),
+        l && /* @__PURE__ */ e(D, { editionInfo: l }),
         /* @__PURE__ */ e(
           O,
           {
-            ...i(o, r.contentWindowBase, n),
-            ownerState: w,
-            children: S
+            ...i(o, a.contentWindowBase, n),
+            ownerState: g,
+            children: u
           }
         ),
         I && /* @__PURE__ */ e(_, {})
@@ -78,5 +78,5 @@ const G = (u) => {
   ) });
 };
 export {
-  G as WindowBase
+  J as WindowBase
 };

package/components/WindowBase/WindowBase.styles.d.ts

@@ -1,6 +1,6 @@
 import { WindowBaseStyles } from './types';
 /**
- * Calcula la altura del header de la ventana base.
+ * Define the shared visual styles for the WindowBase shell.
  */
 export declare const windowBaseStyles: WindowBaseStyles;
 //# sourceMappingURL=WindowBase.styles.d.ts.map

package/components/WindowBase/WindowBase.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WindowBase.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/WindowBase/WindowBase.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,gBA0a9B,CAAC"}
+{"version":3,"file":"WindowBase.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/WindowBase/WindowBase.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,gBAqc9B,CAAC"}

package/components/WindowBase/WindowBase.styles.js

@@ -1,5 +1,5 @@
-import { getTypographyStyles as r } from "../../utils/getTypographyStyles.js";
-import { getSizeStyles as e } from "../../utils/getSizeStyles/getSizeStyles.js";
+import { getTypographyStyles as e } from "../../utils/getTypographyStyles.js";
+import { getSizeStyles as r } from "../../utils/getSizeStyles/getSizeStyles.js";
 const t = {
   /**
    * Styles for the window base wrapper component.
@@ -45,6 +45,17 @@ const t = {
           }
         }
       },
+      ...o?.emergeType === "panel" && {
+        "&&&": {
+          // boxShadow: theme.vars.customShadows.z1,
+          // border: `1px solid ${theme.vars.palette?.border.secondary}`,
+          borderRadius: a.vars.size.borderRadius.r0
+          // ...(ownerState?.selected && {
+          //   boxShadow: theme.vars.customShadows.z4,
+          //   border: `1px solid ${theme.vars.palette?.primary.activeOpacity}`,
+          // }),
+        }
+      },
       ...o?.emergeType === "layout" && {
         ...o?.selected && !o?.maximized ? {
           boxShadow: a.vars.customShadows.primary
@@ -73,7 +84,7 @@ const t = {
    * Window  component content Styles by emergeType
    */
   windowContainerComponent: () => ({
-    //Mover el estilado para adentro
+    // Keep the shell container styling local to WindowBase.
     position: "relative",
     display: "flex",
     width: "100%",
@@ -88,7 +99,7 @@ const t = {
     display: "flex",
     padding: a.vars.size.baseSpacings.sp1,
     marginTop: 1,
-    ...(o?.emergeType === "popup" || o?.emergeType === "modal") && {
+    ...(o?.emergeType === "popup" || o?.emergeType === "modal" || o?.emergeType === "panel") && {
       padding: `${a.vars.size.baseSpacings["sp2-5"]} ${a.vars.size.baseSpacings.sp2} 0 ${a.vars.size.baseSpacings.sp2}`
     },
     alignItems: "center",
@@ -97,7 +108,7 @@ const t = {
     alignSelf: "stretch",
     cursor: o?.draggable ? "all-scroll" : "default",
     position: "relative",
-    ...o?.emergeType === "layout" || o?.emergeType === "modal" ? e(
+    ...o?.emergeType === "layout" || o?.emergeType === "modal" ? r(
       a,
       o?.size || "medium",
       "container",
@@ -105,7 +116,7 @@ const t = {
         minHeight: i
       })
     ) : {
-      ...e(
+      ...r(
         a,
         o?.size || "medium",
         "action",
@@ -161,7 +172,7 @@ const t = {
     cursor: o?.draggable ? "all-scroll" : "default",
     ...o?.maximized && {
       "&&&": {
-        ...r(
+        ...e(
           a.generalSettings.isMobile,
           o?.size || "small",
           "paragraphDens"
@@ -227,7 +238,7 @@ const t = {
     gap: a.vars.size.baseSpacings["sp0-5"],
     // override the default styles of the icon button
     "& .window-actions.MuiSkeleton-root": {
-      ...e(
+      ...r(
         a,
         o?.size || "medium",
         "base",
@@ -241,7 +252,7 @@ const t = {
       marginBottom: o?.emergeType === "layout" ? "auto" : "unset"
     },
     '& .window-actions[class*="M4LIconButton-styledMUIIconButton"]': {
-      ...e(
+      ...r(
         a,
         o?.size || "medium",
         "base",
@@ -287,6 +298,20 @@ const t = {
           }
         }
       },
+      "&.pin-toggle": {
+        "&:hover": {
+          backgroundColor: `${a.vars.palette.chips.info.contained.backgroundColor} !important`,
+          "& .M4LIcon-icon": {
+            backgroundColor: `${a.vars.palette.chips.info.contained.backgroundColorTone} !important`
+          }
+        },
+        "&:active": {
+          backgroundColor: `${a.vars.palette.chips.info.contained.backgroundHover} !important`,
+          "& .M4LIcon-icon": {
+            backgroundColor: `${a.vars.palette.chips.info.contained.backgroundColorTone} !important`
+          }
+        }
+      },
       "&.close-button": {
         "&:hover": {
           backgroundColor: `${a.vars.palette.chips.error.contained.backgroundColor} !important`,
@@ -320,7 +345,7 @@ const t = {
         backgroundColor: `${a.vars.palette.text.secondary} !important`
       }
     },
-    ...e(
+    ...r(
       a,
       o?.size || "medium",
       "base"
@@ -331,7 +356,7 @@ const t = {
    */
   menuActionsWindowBase: ({ theme: a, ownerState: o }) => ({
     ...o?.emergeType === "layout" ? {
-      ...e(
+      ...r(
         a,
         o?.size || "medium",
         "action"
@@ -390,7 +415,7 @@ const t = {
     gap: a.vars.size.baseSpacings.sp1,
     alignItems: "center",
     "& .M4LIconButton-styledMUIIconButton": {
-      ...e(a, o?.size || "medium", "case", (i) => ({
+      ...r(a, o?.size || "medium", "case", (i) => ({
         width: `${i}!important`,
         height: `${i}!important`
       }))

package/components/WindowBase/contexts/WindowToolsMFContext/types.d.ts

@@ -1,88 +1,73 @@
 import { ReactNode } from 'react';
 import { Toaster } from '@m4l/core';
-import { CookieType } from '../../../areas/types';
+import { CookieType, WindowQueryCloseHandler } from '../../../areas/types';
 import { ModuleAction } from '../../types';
 /**
- * Interfaz que define un conjunto de herramientas relacionadas con la ventana que pueden ser proporcionadas por el contexto WindowToolsMF.
+ * Window-scoped tools exposed through the WindowToolsMF context.
  */
+export type { WindowQueryCloseRequest } from '../../../areas/types';
 export interface WindowToolsMF {
     /**
-     * Método para obtener una cookie específica por su ID.
-     * @param id El ID de la cookie que se desea obtener.
-     * @returns La cookie correspondiente si se encuentra, de lo contrario, undefined.
+     * Read one cookie by id.
      */
     getCookie: (id: string) => Record<string, any> | undefined;
     /**
-     * Método para obtener el ID de la ventana actual.
-     * @returns El ID de la ventana actual.
+     * Read the current window id.
      */
     getWindowId: () => string;
     /**
-     * Método para obtener todas las cookies de un tipo específico.
-     * @param type El tipo de cookie del cual se desean obtener todas las cookies.
-     * @returns Un objeto que contiene todas las cookies del tipo especificado.
+     * Read all cookies for one scope.
      */
     getCookies: (type: CookieType) => Record<string, any>;
     /**
-     * Método para establecer las acciones de ventana para el área actual.
-     * @param newActions Las nuevas acciones de ventana que se desean establecer.
-     * @param version (Opcional) La versión de las acciones de ventana.
-     * @param buildTime (Opcional) El buildTime del Microfrontend.
+     * Replace the shell actions exposed by the mounted content.
      */
     setActions: (newActions: ModuleAction[], version?: string, buildTime?: string) => void;
     /**
-     * Método para establecer una cookie específica.
-     * @param id El ID de la cookie que se desea establecer.
-     * @param type El tipo de cookie que se desea establecer.
-     * @param cookie El contenido de la cookie que se desea establecer.
+     * Persist one cookie in the requested scope.
      */
     setCookie: (id: string, type: CookieType, cookie: Record<string, any> | Array<any>) => void;
     /**
-     * Método para iniciar el indicador de progreso.
+     * Start the shell progress indicator.
      */
     startProgress: () => void;
     /**
-     * Método para detener el indicador de progreso.
+     * Stop the shell progress indicator.
      */
     stopProgress: () => void;
     /**
-     * Método para mostrar una notificación toast.
-     * @param options Las opciones de configuración para la notificación toast.
+     * Create toasts scoped to the current window.
      */
     toast: Toaster;
     /**
-     * Método para cerrar la ventana actual.
+     * Close the current window.
      */
     close: (useFnQueryClose?: boolean) => void;
     /**
-     * Método para establecer la función de consulta de cierre de la ventana.
-     * @param fnQueryClose La función de consulta de cierre de la ventana que se desea establecer.
+     * Replace the default close flow with a guarded close handler.
      */
-    setFnQueryClose: (fnQueryClose: () => void) => void;
+    setFnQueryClose: (fnQueryClose: WindowQueryCloseHandler) => void;
     /**
-     * Método para setear el titulo de la ventana y que pueda cambiar de idioma
-     * @param {string} title Titulo que se visulizará en la ventana del módulo
+     * Update the window title.
      */
     setWindowTitle: (title: string) => void;
     /**
-     * Método para setear el subtitulo de la ventana y que pueda cambiar de idioma
-     * @param {string} subtitle Subtitulo que se visulizará en la ventana del módulo
+     * Update the window subtitle.
      */
     setWindowSubTitle: (subtitle: string) => void;
     /**
-     * Método para setear la información de edición de la ventana y que pueda cambiar de idioma
-     * @param {string} editionInfo Información de edición que se visulizará en la ventana del módulo
+     * Update the edit-context label shown by the shell.
      */
     setWindowEditionInfo: (editionInfo: string) => void;
 }
 /**
- * Props del componente WindowToolsMFProvider que incluyen las herramientas de ventana proporcionadas por la interfaz WindowToolsMF.
+ * Props accepted by the WindowToolsMF provider component.
  */
 export interface WindowToolsMFProviderProps extends WindowToolsMF {
     children: ReactNode;
 }
 /**
- * Props del contexto WindowToolsMF, excluyendo la prop children.
+ * WindowToolsMF context value without the React children prop.
  */
 export type WindowToolsMFContextProps = Omit<WindowToolsMFProviderProps, 'children'>;
 //# sourceMappingURL=types.d.ts.map

package/components/WindowBase/contexts/WindowToolsMFContext/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/WindowBase/contexts/WindowToolsMFContext/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAC;IAC3D;;;OAGG;IACH,WAAW,EAAE,MAAM,MAAM,CAAC;IAC1B;;;;OAIG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACtD;;;;;OAKG;IACH,UAAU,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACvF;;;;;OAKG;IACH,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAC5F;;OAEG;IACH,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B;;OAEG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB;;;OAGG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,CAAC,eAAe,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C;;;OAGG;IACH,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IACpD;;;OAGG;IACH,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,oBAAoB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AACD;;GAEG;AACH,MAAM,WAAW,0BAA2B,SAAQ,aAAa;IAC/D,QAAQ,EAAE,SAAS,CAAC;CACrB;AACD;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,0BAA0B,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/WindowBase/contexts/WindowToolsMFContext/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,KAAK,EACV,UAAU,EACV,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C;;GAEG;AACH,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,WAAW,EAAE,MAAM,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACtD;;OAEG;IACH,UAAU,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACvF;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAC5F;;OAEG;IACH,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B;;OAEG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,CAAC,eAAe,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C;;OAEG;IACH,eAAe,EAAE,CAAC,YAAY,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACjE;;OAEG;IACH,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,oBAAoB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AACD;;GAEG;AACH,MAAM,WAAW,0BAA2B,SAAQ,aAAa;IAC/D,QAAQ,EAAE,SAAS,CAAC;CACrB;AACD;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,0BAA0B,EAAE,UAAU,CAAC,CAAC"}

package/components/WindowBase/subcomponents/Header/HeaderWindowBase.js

@@ -1,4 +1,4 @@
-import { jsxs as m, jsx as s } from "@emotion/react/jsx-runtime";
+import { jsxs as m, jsx as i } from "@emotion/react/jsx-runtime";
 import { useEnvironment as H } from "@m4l/core";
 import { useState as b, useEffect as F, useMemo as M } from "react";
 import { ICONS as p } from "../../icons.js";
@@ -16,24 +16,24 @@ const ue = (N) => {
     subTitle: u,
     onClose: y,
     iconUrl: C,
-    size: i,
+    size: r,
     selected: B,
     maximized: _,
     version: d,
     buildTime: f,
     variant: E,
-    actions: r = [],
+    actions: a = [],
     collapsed: S,
-    emergeType: a,
+    emergeType: s,
     draggable: g
-  } = N, { host_static_assets: l, environment_assets: c } = H(), { dateFormatter: h } = P(), [O, R] = b(() => r.filter((t) => t.place === "left")), [x, z] = b(() => r.filter((t) => t.place === "right")), [I, v] = b(() => r.filter((t) => t.place === "inside"));
+  } = N, { host_static_assets: l, environment_assets: c } = H(), { dateFormatter: h } = P(), [O, R] = b(() => a.filter((t) => t.place === "left")), [x, z] = b(() => a.filter((t) => t.place === "right")), [I, v] = b(() => a.filter((t) => t.place === "inside"));
   F(() => {
-    const t = r.reduce(
+    const t = a.reduce(
       (e, o) => (e[o.place]?.push(o), e),
       { left: [], right: [], inside: [] }
     );
     R((e) => w(e, t.left) ? e : t.left), z((e) => w(e, t.right) ? e : t.right), v((e) => w(e, t.inside) ? e : t.inside);
-  }, [r]);
+  }, [a]);
   const $ = M(() => {
     const t = [
       ...I.map((e) => e.type === "groupActions" ? e.actions.map((o) => ({
@@ -68,25 +68,25 @@ const ue = (N) => {
     selected: B,
     maximized: _,
     variant: E,
-    size: i,
-    emergeType: a,
+    size: r,
+    emergeType: s,
     collapsed: S,
     draggable: g
   }, D = W(O), L = W(x);
   return /* @__PURE__ */ m(U, { className: Z(g && A.draggableHandle, k.headerWindowComponent), ownerState: n, children: [
     /* @__PURE__ */ m(j, { ownerState: n, className: k.headerContentWindowBase, children: [
-      C && /* @__PURE__ */ s(V, { size: i, ownerState: n, src: C, "aria-label": "main icon" }),
-      /* @__PURE__ */ m(q, { size: i, ownerState: n, children: [
-        /* @__PURE__ */ s(K, { variant: a === "popup" || a === "modal" ? "bodyStandard" : "captionDens", size: i, skeletonWidth: 100, ownerState: n, children: T }),
-        u && /* @__PURE__ */ s(
+      C && /* @__PURE__ */ i(V, { size: r, ownerState: n, src: C, "aria-label": "main icon" }),
+      /* @__PURE__ */ m(q, { size: r, ownerState: n, children: [
+        /* @__PURE__ */ i(K, { variant: s === "popup" || s === "modal" || s === "panel" ? "bodyStandard" : "captionDens", size: r, skeletonWidth: 100, ownerState: n, children: T }),
+        u && /* @__PURE__ */ i(
           G,
           {
             src: `${l}/${c}/frontend/components/window_base/assets/icons/${p.POINT}`,
-            size: i,
+            size: r,
             ownerState: n
           }
         ),
-        u && /* @__PURE__ */ s(J, { variant: a === "popup" || a === "modal" ? "bodyStandard" : "captionDens", size: i, skeletonWidth: 100, ownerState: n, children: u })
+        u && /* @__PURE__ */ i(J, { variant: s === "popup" || s === "modal" || s === "panel" ? "bodyStandard" : "captionDens", size: r, skeletonWidth: 100, ownerState: n, children: u })
       ] })
     ] }),
     /* @__PURE__ */ m(
@@ -96,8 +96,8 @@ const ue = (N) => {
         className: A.draggableCancel,
         ownerState: n,
         children: [
-          /* @__PURE__ */ s(X, { ownerState: { collapsed: S }, children: D }),
-          $.length > 0 && /* @__PURE__ */ s(
+          /* @__PURE__ */ i(X, { ownerState: { collapsed: S }, children: D }),
+          $.length > 0 && /* @__PURE__ */ i(
             Y,
             {
               type: "menuItem",
@@ -112,7 +112,7 @@ const ue = (N) => {
             }
           ),
           L,
-          y && /* @__PURE__ */ s(
+          y && /* @__PURE__ */ i(
             ee,
             {
               icon: `${l}/${c}/frontend/components/window_base/assets/icons/${p.CLOSE}`,

package/components/areas/components/AreasAdmin/AreasAdmin.d.ts

@@ -1,10 +1,7 @@
 import { AreasAdminProps } from './types';
 /**
- * AreasAdmin
- * Componente para administrar áreas.
- * Este componente permite al usuario administrar las áreas disponibles,
- * seleccionar un área específica y agregar nuevas áreas.
- * Utiliza hooks como useAreasStore, useEnvironment, useModuleDictionary.
+ * Render the Areas admin control surface used to switch, create, and manage work areas.
+ * It also exposes the maximized-layout selector when the current area has more than one layout window.
  */
 export declare const AreasAdmin: (props: AreasAdminProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=AreasAdmin.d.ts.map

package/components/areas/components/AreasAdmin/AreasAdmin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AreasAdmin.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/areas/components/AreasAdmin/AreasAdmin.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAwB,eAAe,EAAE,MAAM,SAAS,CAAC;AAShE;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4DAmLhD,CAAC"}
+{"version":3,"file":"AreasAdmin.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/areas/components/AreasAdmin/AreasAdmin.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAwB,eAAe,EAAE,MAAM,SAAS,CAAC;AAShE;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4DAoLhD,CAAC"}

package/components/areas/components/AreasAdmin/AreasAdmin.js

@@ -1,13 +1,13 @@
-import { jsx as e, jsxs as f, Fragment as C } from "@emotion/react/jsx-runtime";
+import { jsx as e, jsxs as I, Fragment as y } from "@emotion/react/jsx-runtime";
 import { useAreasStore as n } from "../../hooks/useAreas/index.js";
 import { useEnvironment as L, useModuleDictionary as P } from "@m4l/core";
 import j from "clsx";
 import { AreaChip as Y } from "./subcomponents/AreaChip/AreaChip.js";
 import { shallow as s } from "zustand/shallow";
-import { ICONS as I } from "../../icons.js";
+import { ICONS as w } from "../../icons.js";
 import { AreaChipMobile as B } from "./subcomponents/AreaChipMobile/AreaChipMobile.js";
-import { useRef as y } from "react";
-import { getAreasDictionary as z, AREAS_DICCTIONARY as w } from "../../dictionary.js";
+import { useRef as z } from "react";
+import { getAreasDictionary as l, AREAS_DICCTIONARY as u } from "../../dictionary.js";
 import { AreasAdminRootStyled as F, AreasAdminContentStyled as G, AreasContainerChipIconStyled as K, AreasContainerContentChipsStyled as U, IconButtonAddAreaStyled as q, AreaContentChipStyled as H, ContainerAdminWindowsStyled as J } from "./slots/AreasAdminSlots.js";
 import { useIsMobile as Q } from "@m4l/graphics";
 import { useComponentSize as V } from "../../../../hooks/useComponentSize/index.js";
@@ -17,14 +17,14 @@ import { getComponentSlotRoot as Z } from "../../../../utils/getComponentSlotRoo
 import { getPropDataTestId as oo } from "../../../../test/getNameDataTestId.js";
 import { MenuActions as eo } from "../../../MenuActions/MenuActions.js";
 import { AreasAdminSlots as ro } from "./slots/AreasAdminEnum.js";
-const go = (g) => {
+const _o = (_) => {
   const {
-    color: l = "primary",
-    size: _ = "medium",
+    color: p = "primary",
+    size: g = "medium",
     className: R,
     dataTestId: b,
     ...D
-  } = g, d = Q(), { currentSize: r } = V(_), N = n((o) => o.areasIds ?? [], s), a = n((o) => o.currentAreaId, s), $ = n((o) => o.ownerState?.status), x = n((o) => o.areasIds.length), { addArea: E } = n((o) => o.areasActions, s), { maximizeLayout: O } = n((o) => o.areaActions), u = n(
+  } = _, h = Q(), { currentSize: r } = V(g), N = n((o) => o.areasIds ?? [], s), a = n((o) => o.currentAreaId, s), $ = n((o) => o.ownerState?.status), x = n((o) => o.areasIds.length), { addArea: E } = n((o) => o.areasActions, s), { maximizeLayout: O } = n((o) => o.areaActions), A = n(
     (o) => o.hashAreas[a] ? o.hashAreas[a].maximizedId : !1,
     s
   ), m = n(
@@ -37,12 +37,12 @@ const go = (g) => {
       };
     }) ?? [],
     s
-  ), T = n((o) => m.reduce((t, i) => (t[i.i] = o.hashWindows[i.i]?.moduleCount, t), {}), s), { host_static_assets: p, environment_assets: h } = L(), { getLabel: A } = P(), v = y(null), M = y(null);
+  ), T = n((o) => m.reduce((t, i) => (t[i.i] = o.hashWindows[i.i]?.moduleCount, t), {}), s), { host_static_assets: f, environment_assets: C } = L(), { getLabel: c } = P(), v = z(null), M = z(null);
   if ($ !== "loaded")
     return null;
-  const c = {
-    isMobile: d,
-    color: l,
+  const d = {
+    isMobile: h,
+    color: p,
     size: r
   }, k = (o) => {
     O(a, o);
@@ -54,7 +54,7 @@ const go = (g) => {
       label: `${o.title}${t ? `:${t}` : ""}`,
       urlIcon: o.url_icon,
       checkable: !0,
-      checked: u === o.i
+      checked: A === o.i
     };
   });
   return /* @__PURE__ */ e(
@@ -63,7 +63,7 @@ const go = (g) => {
       className: j(Z(S), R),
       ...oo(S, ro.root, b),
       role: "areas-admin-role",
-      ownerState: c,
+      ownerState: d,
       ref: M,
       ...D,
       children: /* @__PURE__ */ e(
@@ -80,17 +80,17 @@ const go = (g) => {
                 U,
                 {
                   size: r,
-                  children: d ? /* @__PURE__ */ e(B, {}) : /* @__PURE__ */ f(C, { children: [
+                  children: h ? /* @__PURE__ */ e(B, {}) : /* @__PURE__ */ I(y, { children: [
                     /* @__PURE__ */ e(
                       q,
                       {
-                        "aria-label": "Agregar área",
+                        "aria-label": c(l(u.area_add_new)),
                         size: r,
                         variant: "contained",
-                        ownerState: c,
-                        src: `${p}/${h}/frontend/components/areas/assets/icons/${I.ADD_AREA}`,
+                        ownerState: d,
+                        src: `${f}/${C}/frontend/components/areas/assets/icons/${w.ADD_AREA}`,
                         onClick: E,
-                        tooltip: A(z(w.area_add_new))
+                        tooltip: c(l(u.area_add_new))
                       }
                     ),
                     /* @__PURE__ */ e(
@@ -101,7 +101,7 @@ const go = (g) => {
                           Y,
                           {
                             size: r,
-                            color: l,
+                            color: p,
                             areaId: o,
                             selected: o === a,
                             disabled: x === 1
@@ -110,13 +110,13 @@ const go = (g) => {
                         ))
                       }
                     ),
-                    u && m.length > 1 && /* @__PURE__ */ e(C, { children: /* @__PURE__ */ f(J, { size: r, ownerState: c, children: [
-                      /* @__PURE__ */ e(X, { size: r, skeletonWidth: "80px", children: A(z(w.label_window)) }),
+                    A && m.length > 1 && /* @__PURE__ */ e(y, { children: /* @__PURE__ */ I(J, { size: r, ownerState: d, children: [
+                      /* @__PURE__ */ e(X, { size: r, skeletonWidth: "80px", children: c(l(u.label_window)) }),
                       /* @__PURE__ */ e(
                         eo,
                         {
                           size: r,
-                          icon: `${p}/${h}/frontend/components/areas_admin/assets/icons/${I.PENDING_ORDER}`,
+                          icon: `${f}/${C}/frontend/components/areas_admin/assets/icons/${w.PENDING_ORDER}`,
                           arrowType: "no-arrow",
                           anchorOrigin: { vertical: "bottom", horizontal: "right" },
                           transformOrigin: { vertical: "top", horizontal: "left" },
@@ -135,5 +135,5 @@ const go = (g) => {
   );
 };
 export {
-  go as AreasAdmin
+  _o as AreasAdmin
 };