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

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

@@ -6,41 +6,41 @@ import { M4LOverridesStyleRules } from '../../../../@types/augmentations';
 export type AreasAdminType = keyof typeof AreasAdminSlots;
 export interface AreasAdminProps {
     /**
-     * Clase CSS personalizada que se aplicará al componente
+     * Component color variant.
      */
     color?: Extract<ComponentPalletColor, 'primary'>;
     /**
-     * Opciones de tamaño del componente.
+     * Supported component sizes.
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
     /**
-     * data-testid para pruebas unitarias.
+     * Optional `data-testid` override for tests.
      */
     dataTestId?: string;
     /**
-     * Clase CSS para sobrescribir los estilos predeterminados del loader.
+     * Optional custom CSS class applied to the root slot.
      */
     className?: string;
     /**
-     * Props adicionales que se pueden pasar al loader.
+     * Additional props forwarded to the root slot.
      */
     [key: string]: unknown;
 }
 export interface AreasAdminOwnerState {
     /**
-     * Indica si el dispositivo es móvil.
+     * Whether the current device layout is mobile.
      */
     isMobile: boolean;
     /**
-     * Tamaño del campo de texto.
+     * Effective component size.
      */
     size: AreasAdminProps['size'];
     /**
-     * Color del componente.
+     * Effective color variant.
      */
     color: AreasAdminProps['color'];
     /**
-     * Props adicionales que se pueden pasar al loader.
+     * Additional owner-state fields consumed by styled slots.
      */
     [key: string]: unknown;
 }

package/components/areas/components/AreasViewer/AreasViewer.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AreasViewer.styles.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/areas/components/AreasViewer/AreasViewer.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,eAAO,MAAM,iBAAiB,EAAE,iBAqE/B,CAAC"}
+{"version":3,"file":"AreasViewer.styles.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/areas/components/AreasViewer/AreasViewer.styles.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,eAAO,MAAM,iBAAiB,EAAE,iBA8O/B,CAAC"}

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

@@ -1,9 +1,10 @@
-import { dragResizeWindowRNDClasses as i } from "../../../DragResizeWindowRND/classes/index.js";
-const r = {
+import { dragResizeWindowRNDClasses as t } from "../../../DragResizeWindowRND/classes/index.js";
+import { AREAS_VIEWER_PANEL_INTERACTION_LAYER_OFFSET as n, AREAS_VIEWER_PANEL_RESIZE_RAIL_OFFSET as l, AREAS_VIEWER_PANEL_STACKING_OFFSET as o } from "./constants.js";
+const d = {
   /**
    * Root areas viewer Styles
    */
-  root: ({ theme: e, ownerState: o }) => ({
+  root: ({ theme: e, ownerState: i }) => ({
     width: "100%",
     height: "100%",
     overflow: "hidden",
@@ -14,13 +15,14 @@ const r = {
       height: "100% !important",
       overflow: "auto",
       flexGrow: 1,
-      [`&.${i.dragging}, &.${i.resizing}`]: {
+      [`&.${t.dragging}, &.${t.resizing}`]: {
+        // Prevent nested window gestures from competing with panel-resize gestures.
         pointerEvents: "none",
         userSelect: "none",
         touchAction: "none"
       }
     },
-    ...o?.maximized ? {
+    ...i?.maximized ? {
       background: e.vars.palette.background.default
     } : {}
   }),
@@ -51,6 +53,172 @@ const r = {
     width: "100%",
     overflow: "hidden"
   }),
+  /**
+   * Panel-aware layout wrapper for one area body.
+   */
+  panelLayout: () => ({
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    height: "100%",
+    minWidth: 0,
+    minHeight: 0,
+    overflow: "hidden",
+    position: "relative"
+  }),
+  /**
+   * Horizontal row that holds docked left/right panels plus the main layout flow.
+   */
+  panelMiddleRow: () => ({
+    display: "flex",
+    flexDirection: "row",
+    flexGrow: 1,
+    minWidth: 0,
+    minHeight: 0,
+    overflow: "hidden"
+  }),
+  /**
+   * Central column that keeps top/bottom docked panels aligned with the grid width.
+   */
+  panelCenterColumn: () => ({
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    minWidth: 0,
+    minHeight: 0,
+    overflow: "hidden"
+  }),
+  /**
+   * Main layout flow that keeps the responsive grid and overlay panels together.
+   */
+  mainLayoutFlow: ({ ownerState: e }) => ({
+    position: "relative",
+    display: "flex",
+    flexGrow: 1,
+    minWidth: 0,
+    minHeight: 0,
+    overflow: "hidden",
+    ...e?.isResizingPanel ? {
+      // Let the temporary panel interaction layer own the pointer while a pinned panel resizes.
+      pointerEvents: "none"
+    } : {}
+  }),
+  /**
+   * Overlay root used by unpinned panels so they sit above the main layout flow.
+   */
+  overlayPanels: ({ ownerState: e }) => ({
+    position: "absolute",
+    inset: 0,
+    zIndex: (e?.panelZIndexBase ?? 0) + o,
+    pointerEvents: "none",
+    "& > *": {
+      // Overlay children recover pointer events normally, except during an active pinned resize session.
+      pointerEvents: e?.isResizingPanel ? "none" : "auto"
+    }
+  }),
+  /**
+   * Shared slot used by docked and overlay panels.
+   */
+  panelSlot: ({ ownerState: e, theme: i }) => ({
+    display: "flex",
+    flexShrink: 0,
+    minWidth: 0,
+    minHeight: 0,
+    overflow: "hidden",
+    ...e?.overlay ? {
+      position: "absolute",
+      zIndex: (e?.panelZIndexBase ?? 0) + o
+    } : {
+      position: "relative",
+      zIndex: (e?.panelZIndexBase ?? 0) + o
+    },
+    ...e?.side === "left" && {
+      left: 0,
+      top: 0,
+      bottom: 0,
+      height: "100%",
+      ...e?.overlay ? {
+        boxShadow: `12px 0 16px 0 ${i.vars.palette.background.neutral} !important`
+      } : {}
+    },
+    ...e?.side === "right" && {
+      right: 0,
+      top: 0,
+      bottom: 0,
+      height: "100%",
+      ...e?.overlay ? {
+        boxShadow: `-12px 0 16px 0  ${i.vars.palette.background.neutral} !important`
+      } : {}
+    },
+    ...e?.side === "top" && {
+      top: 0,
+      left: 0,
+      right: 0,
+      width: "100%",
+      ...e?.overlay ? {
+        boxShadow: `0 12px 16px 0 ${i.vars.palette.background.neutral} !important`
+      } : {}
+    },
+    ...e?.side === "bottom" && {
+      bottom: 0,
+      left: 0,
+      right: 0,
+      width: "100%",
+      ...e?.overlay ? {
+        boxShadow: `0 -12px 16px 0 ${i.vars.palette.background.neutral} !important`
+      } : {}
+    }
+  }),
+  /**
+   * Full-size host that lets the Window shell occupy the resolved panel slot
+   * without depending on DragResizeWindowRND as an extra wrapper.
+   */
+  panelWindowHost: () => ({
+    position: "relative",
+    display: "flex",
+    flexGrow: 1,
+    width: "100%",
+    height: "100%",
+    minWidth: 0,
+    minHeight: 0,
+    overflow: "hidden"
+  }),
+  /**
+   * Stable sibling rail used by pinned panels so the resize gesture does not
+   * depend on the shrinking panel slot itself.
+   */
+  panelResizeRail: ({ ownerState: e }) => ({
+    position: "relative",
+    flexShrink: 0,
+    overflow: "visible",
+    pointerEvents: "none",
+    zIndex: (e?.panelZIndexBase ?? 0) + l,
+    ...e?.side === "left" || e?.side === "right" ? {
+      width: 0,
+      minWidth: 0,
+      height: "100%",
+      alignSelf: "stretch"
+    } : {
+      height: 0,
+      minHeight: 0,
+      width: "100%"
+    }
+  }),
+  /**
+   * Transparent layer mounted only while a pinned-panel resize session is active.
+   * It owns the gesture after the rail mousedown so the user can move quickly
+   * across the whole viewer without depending on the narrow rail hit area.
+   */
+  panelResizeInteractionLayer: ({ ownerState: e }) => ({
+    position: "absolute",
+    inset: 0,
+    zIndex: (e?.panelZIndexBase ?? 0) + n,
+    background: "transparent",
+    pointerEvents: "auto",
+    userSelect: "none",
+    touchAction: "none",
+    cursor: e?.side === "left" || e?.side === "right" ? "col-resize" : "row-resize"
+  }),
   /**
    * Wrapper window modal Styles
    */
@@ -65,5 +233,5 @@ const r = {
   windowBase: () => ({})
 };
 export {
-  r as areasViewerStyles
+  d as areasViewerStyles
 };

package/components/areas/components/AreasViewer/constants.d.ts

@@ -1,2 +1,14 @@
 export declare const AREAS_VIEWER_KEY_COMPONENT = "M4LAreasViewer";
+/**
+ * Keep panel shells one layer above the highest popup z-index currently in use.
+ */
+export declare const AREAS_VIEWER_PANEL_STACKING_OFFSET = 1;
+/**
+ * Keep the pinned-panel resize rail above the panel shell it controls.
+ */
+export declare const AREAS_VIEWER_PANEL_RESIZE_RAIL_OFFSET = 2;
+/**
+ * Keep the temporary interaction layer above every panel shell and resize rail.
+ */
+export declare const AREAS_VIEWER_PANEL_INTERACTION_LAYER_OFFSET = 3;
 //# sourceMappingURL=constants.d.ts.map

package/components/areas/components/AreasViewer/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/areas/components/AreasViewer/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B,mBAAmB,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/areas/components/AreasViewer/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B,mBAAmB,CAAC;AAE3D;;GAEG;AACH,eAAO,MAAM,kCAAkC,IAAI,CAAC;AAEpD;;GAEG;AACH,eAAO,MAAM,qCAAqC,IAAI,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,2CAA2C,IAAI,CAAC"}

package/components/areas/components/AreasViewer/constants.js

@@ -1,4 +1,7 @@
-const E = "M4LAreasViewer";
+const E = "M4LAreasViewer", _ = 1, A = 2, R = 3;
 export {
-  E as AREAS_VIEWER_KEY_COMPONENT
+  E as AREAS_VIEWER_KEY_COMPONENT,
+  R as AREAS_VIEWER_PANEL_INTERACTION_LAYER_OFFSET,
+  A as AREAS_VIEWER_PANEL_RESIZE_RAIL_OFFSET,
+  _ as AREAS_VIEWER_PANEL_STACKING_OFFSET
 };

package/components/areas/components/AreasViewer/slots/AreasViewerEnum.d.ts

@@ -2,6 +2,15 @@ export declare enum AreasViewerSlots {
     root = "root",
     areaRoot = "areaRoot",
     baseArea = "baseArea",
+    panelLayout = "panelLayout",
+    panelMiddleRow = "panelMiddleRow",
+    panelCenterColumn = "panelCenterColumn",
+    mainLayoutFlow = "mainLayoutFlow",
+    overlayPanels = "overlayPanels",
+    panelSlot = "panelSlot",
+    panelWindowHost = "panelWindowHost",
+    panelResizeRail = "panelResizeRail",
+    panelResizeInteractionLayer = "panelResizeInteractionLayer",
     wrapperWindowModal = "wrapperWindowModal",
     windowBase = "windowBase"
 }

package/components/areas/components/AreasViewer/slots/AreasViewerEnum.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AreasViewerEnum.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/components/src/components/areas/components/AreasViewer/slots/AreasViewerEnum.ts"],"names":[],"mappings":"AAAA,oBAAY,gBAAgB;IAE1B,IAAI,SAAS;IAEb,QAAQ,aAAa;IAErB,QAAQ,aAAa;IAIrB,kBAAkB,uBAAuB;IAEzC,UAAU,eAAe;CAC1B"}
+{"version":3,"file":"AreasViewerEnum.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/components/src/components/areas/components/AreasViewer/slots/AreasViewerEnum.ts"],"names":[],"mappings":"AAAA,oBAAY,gBAAgB;IAE1B,IAAI,SAAS;IAEb,QAAQ,aAAa;IAErB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,cAAc,mBAAmB;IACjC,iBAAiB,sBAAsB;IACvC,cAAc,mBAAmB;IACjC,aAAa,kBAAkB;IAC/B,SAAS,cAAc;IACvB,eAAe,oBAAoB;IACnC,eAAe,oBAAoB;IACnC,2BAA2B,gCAAgC;IAE3D,kBAAkB,uBAAuB;IAEzC,UAAU,eAAe;CAC1B"}

package/components/areas/components/AreasViewer/slots/AreasViewerEnum.js

@@ -1,4 +1,4 @@
-var o = /* @__PURE__ */ ((a) => (a.root = "root", a.areaRoot = "areaRoot", a.baseArea = "baseArea", a.wrapperWindowModal = "wrapperWindowModal", a.windowBase = "windowBase", a))(o || {});
+var a = /* @__PURE__ */ ((n) => (n.root = "root", n.areaRoot = "areaRoot", n.baseArea = "baseArea", n.panelLayout = "panelLayout", n.panelMiddleRow = "panelMiddleRow", n.panelCenterColumn = "panelCenterColumn", n.mainLayoutFlow = "mainLayoutFlow", n.overlayPanels = "overlayPanels", n.panelSlot = "panelSlot", n.panelWindowHost = "panelWindowHost", n.panelResizeRail = "panelResizeRail", n.panelResizeInteractionLayer = "panelResizeInteractionLayer", n.wrapperWindowModal = "wrapperWindowModal", n.windowBase = "windowBase", n))(a || {});
 export {
-  o as AreasViewerSlots
+  a as AreasViewerSlots
 };

package/components/areas/components/AreasViewer/slots/AreasViewerSlots.d.ts

@@ -7,6 +7,33 @@ export declare const AreaRootStyled: import('@emotion/styled').StyledComponent<i
 export declare const BaseAreaStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const PanelLayoutStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const PanelMiddleRowStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const PanelCenterColumnStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const MainLayoutFlowStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const OverlayPanelsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const PanelSlotStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const PanelWindowHostStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const PanelResizeRailStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const PanelResizeInteractionLayerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const WrapperWindowModalStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/areas/components/AreasViewer/slots/AreasViewerSlots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AreasViewerSlots.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/components/src/components/areas/components/AreasViewer/slots/AreasViewerSlots.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,qBAAqB;;6NAGP,CAAC;AAC5B,eAAO,MAAM,cAAc;;6NAGI,CAAC;AAChC,eAAO,MAAM,cAAc;;6NAGI,CAAC;AAGhC,eAAO,MAAM,wBAAwB;;6NAGI,CAAC;AAE1C,eAAO,MAAM,gBAAgB;;UAGI,CAAC"}
+{"version":3,"file":"AreasViewerSlots.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/components/src/components/areas/components/AreasViewer/slots/AreasViewerSlots.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,qBAAqB;;6NAGP,CAAC;AAC5B,eAAO,MAAM,cAAc;;6NAGI,CAAC;AAChC,eAAO,MAAM,cAAc;;6NAGI,CAAC;AAChC,eAAO,MAAM,iBAAiB;;6NAGI,CAAC;AACnC,eAAO,MAAM,oBAAoB;;6NAGI,CAAC;AACtC,eAAO,MAAM,uBAAuB;;6NAGI,CAAC;AACzC,eAAO,MAAM,oBAAoB;;6NAGI,CAAC;AACtC,eAAO,MAAM,mBAAmB;;6NAGI,CAAC;AACrC,eAAO,MAAM,eAAe;;6NAGI,CAAC;AACjC,eAAO,MAAM,qBAAqB;;6NAGI,CAAC;AACvC,eAAO,MAAM,qBAAqB;;6NAGI,CAAC;AACvC,eAAO,MAAM,iCAAiC;;6NAGI,CAAC;AAGnD,eAAO,MAAM,wBAAwB;;6NAGI,CAAC;AAE1C,eAAO,MAAM,gBAAgB;;UAGI,CAAC"}

package/components/areas/components/AreasViewer/slots/AreasViewerSlots.js

@@ -1,28 +1,65 @@
-import { styled as o } from "@mui/material/styles";
-import { AREAS_VIEWER_KEY_COMPONENT as e } from "../constants.js";
-import { AreasViewerSlots as r } from "./AreasViewerEnum.js";
-import { areasViewerStyles as a } from "../AreasViewer.styles.js";
-import { WindowBase as t } from "../../../../WindowBase/WindowBase.js";
-const m = o("div", {
-  name: e,
-  slot: r.root
-})(a?.root), w = o("div", {
-  name: e,
-  slot: r.areaRoot
-})(a?.areaRoot), p = o("div", {
-  name: e,
-  slot: r.baseArea
-})(a?.baseArea), A = o("div", {
-  name: e,
-  slot: r.wrapperWindowModal
-})(a?.wrapperWindowModal), S = o(t, {
-  name: e,
-  slot: r.windowBase
-})(a?.windowBase);
+import { styled as e } from "@mui/material/styles";
+import { AREAS_VIEWER_KEY_COMPONENT as o } from "../constants.js";
+import { AreasViewerSlots as a } from "./AreasViewerEnum.js";
+import { areasViewerStyles as t } from "../AreasViewer.styles.js";
+import { WindowBase as n } from "../../../../WindowBase/WindowBase.js";
+const m = e("div", {
+  name: o,
+  slot: a.root
+})(t?.root), p = e("div", {
+  name: o,
+  slot: a.areaRoot
+})(t?.areaRoot), y = e("div", {
+  name: o,
+  slot: a.baseArea
+})(t?.baseArea), w = e("div", {
+  name: o,
+  slot: a.panelLayout
+})(t?.panelLayout), S = e("div", {
+  name: o,
+  slot: a.panelMiddleRow
+})(t?.panelMiddleRow), R = e("div", {
+  name: o,
+  slot: a.panelCenterColumn
+})(t?.panelCenterColumn), c = e("div", {
+  name: o,
+  slot: a.mainLayoutFlow
+})(t?.mainLayoutFlow);
+e("div", {
+  name: o,
+  slot: a.overlayPanels
+})(t?.overlayPanels);
+const v = e("div", {
+  name: o,
+  slot: a.panelSlot
+})(t?.panelSlot), P = e("div", {
+  name: o,
+  slot: a.panelWindowHost
+})(t?.panelWindowHost), W = e("div", {
+  name: o,
+  slot: a.panelResizeRail
+})(t?.panelResizeRail), u = e("div", {
+  name: o,
+  slot: a.panelResizeInteractionLayer
+})(t?.panelResizeInteractionLayer), L = e("div", {
+  name: o,
+  slot: a.wrapperWindowModal
+})(t?.wrapperWindowModal), A = e(n, {
+  name: o,
+  slot: a.windowBase
+})(t?.windowBase);
 export {
-  w as AreaRootStyled,
+  p as AreaRootStyled,
   m as AreasViewerRootStyled,
-  p as BaseAreaStyled,
-  S as WindowBaseStyled,
-  A as WrapperWindowModalStyled
+  y as BaseAreaStyled,
+  c as MainLayoutFlowStyled,
+  R as PanelCenterColumnStyled,
+  w as PanelLayoutStyled,
+  S as PanelMiddleRowStyled,
+  u as PanelResizeInteractionLayerStyled,
+  W as PanelResizeRailStyled,
+  v as PanelSlotStyled,
+  P as PanelWindowHostStyled,
+  A as WindowBaseStyled,
+  L as WrapperWindowModalStyled
 };

package/components/areas/components/AreasViewer/subcomponents/Area/Area.d.ts

@@ -1,9 +1,6 @@
 import { AreaProps } from './types';
 /**
- * Funcion encargada de renderizar un área completa.
- * El AreaProvider crea el store del área, por medio del cual se controla todo el estado y almacenamiento del área
- * @param props AreaProps
- * @returns JSX
+ * Render one complete Areas workspace once its area-level state has initialized.
  */
 export declare const Area: {
     (props: AreaProps): import("@emotion/react/jsx-runtime").JSX.Element | null;

package/components/areas/components/AreasViewer/subcomponents/Area/Area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Area.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/areas/components/AreasViewer/subcomponents/Area/Area.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC;;;;;GAKG;AACH,eAAO,MAAM,IAAI;YAAW,SAAS;;CAWpC,CAAC"}
+{"version":3,"file":"Area.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/areas/components/AreasViewer/subcomponents/Area/Area.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC;;GAEG;AACH,eAAO,MAAM,IAAI;YAAW,SAAS;;CAWpC,CAAC"}

package/components/areas/components/AreasViewer/subcomponents/Area/Area.js

@@ -1,10 +1,10 @@
-import { jsx as t } from "@emotion/react/jsx-runtime";
+import { jsx as e } from "@emotion/react/jsx-runtime";
 import { BaseArea as i } from "./subcomponents/BaseArea/BaseArea.js";
 import { useAreasStore as m } from "../../../../hooks/useAreas/index.js";
 import { AreaRootStyled as n } from "../../slots/AreasViewerSlots.js";
-const u = (e) => {
-  const { selected: s, areaId: r, size: a } = e;
-  return m((o) => o.hashAreas[r].status) === "init" ? null : /* @__PURE__ */ t(n, { ownerState: { selected: s }, children: /* @__PURE__ */ t(i, { areaId: r, size: a }) });
+const u = (s) => {
+  const { selected: r, areaId: t, size: a } = s;
+  return m((o) => o.hashAreas[t].status) === "init" ? null : /* @__PURE__ */ e(n, { ownerState: { selected: r }, children: /* @__PURE__ */ e(i, { areaId: t, selected: r, size: a }) });
 };
 u.displayName = "Area";
 export {

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/AreaGridLayout/AreaGridLayout.d.ts

@@ -1,7 +1,6 @@
 import { GridLayoutProps } from './types';
 /**
- * Retorna el componente GridLayout con las ventanas (layouts) y popups tomados del área de trabajo.
- * @returns JSX
+ * Render the responsive grid for one area together with its popup overlay layer.
  */
 export declare const AreaGridLayout: (props: GridLayoutProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AreaGridLayout.d.ts.map

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/AreaGridLayout/AreaGridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AreaGridLayout.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../../packages/components/src/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/AreaGridLayout/AreaGridLayout.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAa1C;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,eAAe,qDAsIpD,CAAC"}
+{"version":3,"file":"AreaGridLayout.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../../packages/components/src/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/AreaGridLayout/AreaGridLayout.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAa1C;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,eAAe,qDAsIpD,CAAC"}

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/BaseArea/BaseArea.d.ts

@@ -1,6 +1,6 @@
 import { InnerForHooksProps } from './types';
 /**
- * Componente encargado de renderizar el área de trabajo.
+ * Render the current work area body or its loading/error state.
  */
 export declare const BaseArea: (props: InnerForHooksProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=BaseArea.d.ts.map

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/BaseArea/BaseArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseArea.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../../packages/components/src/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/BaseArea/BaseArea.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAK7C;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,OAAO,kBAAkB,qDAmBjD,CAAC"}
+{"version":3,"file":"BaseArea.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../../packages/components/src/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/BaseArea/BaseArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAK7C;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,OAAO,kBAAkB,qDAqBjD,CAAC"}

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/BaseArea/BaseArea.js

@@ -1,17 +1,18 @@
-import { jsx as a } from "@emotion/react/jsx-runtime";
-import { AreaGridLayout as d } from "../AreaGridLayout/AreaGridLayout.js";
-import { useAreasStore as e } from "../../../../../../hooks/useAreas/index.js";
-import { LoadingError as n } from "../../../../../../../LoadingError/LoadingError.js";
+import { jsx as o } from "@emotion/react/jsx-runtime";
+import { AreaGridLayout as n } from "../AreaGridLayout/AreaGridLayout.js";
+import { AreaPanels as c } from "./subcomponents/AreaPanels/AreaPanels.js";
+import { useAreasStore as s } from "../../../../../../hooks/useAreas/index.js";
+import { LoadingError as l } from "../../../../../../../LoadingError/LoadingError.js";
 import { BaseAreaStyled as p } from "../../../../slots/AreasViewerSlots.js";
-import { shallow as c } from "zustand/shallow";
-const z = (s) => {
-  const { areaId: r, size: i } = s, t = e((o) => o.hashAreas[r].status), m = e(
-    (o) => r ? o.hashAreas[r]?.maximizedId : void 0,
-    c
+import { shallow as f } from "zustand/shallow";
+const w = (i) => {
+  const { areaId: r, selected: m, size: a } = i, t = s((e) => e.hashAreas[r].status), d = s(
+    (e) => r ? e.hashAreas[r]?.maximizedId : void 0,
+    f
   );
-  return /* @__PURE__ */ a(p, { ownerState: { maximizedId: m }, children: t === "loaded" ? /* @__PURE__ */ a(d, { areaId: r, size: i }) : /* @__PURE__ */ a(n, { status: t, action: () => {
+  return /* @__PURE__ */ o(p, { ownerState: { maximizedId: d }, children: t === "loaded" ? /* @__PURE__ */ o(c, { areaId: r, selected: m, size: a, children: /* @__PURE__ */ o(n, { areaId: r, size: a }) }) : /* @__PURE__ */ o(l, { status: t, action: () => {
   } }) });
 };
 export {
-  z as BaseArea
+  w as BaseArea
 };

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/BaseArea/helpers/panelRuntime.d.ts

@@ -0,0 +1,78 @@
+import { CSSProperties } from 'react';
+import { PanelSide } from '../../../../../../../types';
+import { PanelRuntimeDescriptor } from '../types';
+/**
+ * Default runtime width applied when a side panel does not persist a custom size yet.
+ */
+export declare const PANEL_DEFAULT_WIDTH = 360;
+/**
+ * Default runtime height applied when a top/bottom panel does not persist a custom size yet.
+ */
+export declare const PANEL_DEFAULT_HEIGHT = 280;
+/**
+ * Hard minimum width used to avoid collapsing left/right panels into unusable shells.
+ */
+export declare const PANEL_MIN_WIDTH = 200;
+/**
+ * Hard minimum height used to avoid collapsing top/bottom panels into unusable shells.
+ */
+export declare const PANEL_MIN_HEIGHT = 100;
+/**
+ * Invisible hit-area thickness for resize affordances.
+ */
+export declare const PANEL_RESIZE_HANDLE_SIZE = 10;
+/**
+ * Canonical side order used to render and group panel windows.
+ */
+export declare const PANEL_SIDES: PanelSide[];
+/**
+ * Detect whether a panel grows along the horizontal axis.
+ */
+export declare const isHorizontalPanelSide: (side: PanelSide) => side is "left" | "right";
+/**
+ * Resolve the edge that should expose the resize affordance for a panel side.
+ */
+export declare const getResizeHandleSide: (side: PanelSide) => "left" | "right" | "top" | "bottom";
+/**
+ * Resolve the resize cursor that matches the panel growth axis.
+ */
+export declare const getResizeCursor: (side: PanelSide) => "col-resize" | "row-resize";
+/**
+ * Resolve whether the stable rail should render before the panel slot in DOM order.
+ */
+export declare const shouldRenderResizeRailBeforePanel: (side: PanelSide) => side is "bottom" | "right";
+/**
+ * Build the inline overlay handle style for panels that still own their local resize affordance.
+ */
+export declare const getInlineResizeHandleStyle: (side: PanelSide) => CSSProperties;
+/**
+ * Build the pinned-panel rail handle style so the hit area sits on the actual layout boundary.
+ */
+export declare const getRailResizeHandleStyle: (side: PanelSide) => CSSProperties;
+/**
+ * Clamp a panel size to the allowed runtime limits for its emergence side.
+ */
+export declare const clampPanelSize: (side: PanelSide, nextSize: number, parentElement: HTMLElement | null, panel: PanelRuntimeDescriptor) => number;
+/**
+ * Read the pointer coordinate that belongs to the resize axis for one panel side.
+ */
+export declare const getPointerPositionForPanelSide: (side: PanelSide, pointerEvent: Pick<MouseEvent, "clientX" | "clientY">) => number;
+/**
+ * Compute the slot dimensions that should be reserved for a panel side.
+ */
+export declare const getPanelSlotStyle: (panel: PanelRuntimeDescriptor) => {
+    width: string;
+    minWidth: string;
+    maxWidth: string;
+    height: string;
+    minHeight?: undefined;
+    maxHeight?: undefined;
+} | {
+    width: string;
+    height: string;
+    minHeight: string;
+    maxHeight: string;
+    minWidth?: undefined;
+    maxWidth?: undefined;
+};
+//# sourceMappingURL=panelRuntime.d.ts.map