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

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

@@ -0,0 +1 @@
+{"version":3,"file":"panelRuntime.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../../../packages/components/src/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/BaseArea/helpers/panelRuntime.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAEvC;;GAEG;AACH,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC;;GAEG;AACH,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC;;GAEG;AACH,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,EAAuC,CAAC;AAE3E;;GAEG;AACH,eAAO,MAAM,qBAAqB,GAChC,MAAM,SAAS,KACd,IAAI,IAAI,MAAM,GAAG,OAEnB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,MAAM,SAAS,KACd,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAW7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,MAAM,SAAS,gCAE9C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iCAAiC,GAAI,MAAM,SAAS,+BAEhE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B,GAAI,MAAM,SAAS,KAAG,aA4B5D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,GAAI,MAAM,SAAS,KAAG,aA6B1D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GACzB,MAAM,SAAS,EACf,UAAU,MAAM,EAChB,eAAe,WAAW,GAAG,IAAI,EACjC,OAAO,sBAAsB,WAyB9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,8BAA8B,GACzC,MAAM,SAAS,EACf,cAAc,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,SAAS,CAAC,WAKtD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB;;;;;;;;;;;;;;CAgB9D,CAAC"}

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

@@ -0,0 +1,86 @@
+const N = 360, _ = 280, u = 200, g = 100, a = 10, H = ["top", "left", "right", "bottom"], o = (t) => t === "left" || t === "right", s = (t) => t === "left" ? "right" : t === "right" ? "left" : t === "top" ? "bottom" : "top", r = (t) => o(t) ? "col-resize" : "row-resize", S = (t) => t === "right" || t === "bottom", l = (t) => {
+  const i = {
+    position: "absolute",
+    zIndex: 6,
+    userSelect: "none",
+    touchAction: "none",
+    background: "transparent",
+    cursor: r(t)
+  }, e = s(t);
+  return e === "left" || e === "right" ? {
+    ...i,
+    top: 0,
+    bottom: 0,
+    width: "10px",
+    [e]: "0px"
+  } : {
+    ...i,
+    left: 0,
+    right: 0,
+    height: "10px",
+    [e]: "0px"
+  };
+}, d = (t) => {
+  const i = {
+    position: "absolute",
+    zIndex: 6,
+    userSelect: "none",
+    touchAction: "none",
+    background: "transparent",
+    cursor: r(t),
+    pointerEvents: "auto"
+  }, e = `-${10 / 2}px`;
+  return o(t) ? {
+    ...i,
+    top: 0,
+    bottom: 0,
+    left: e,
+    width: "10px"
+  } : {
+    ...i,
+    left: 0,
+    right: 0,
+    top: e,
+    height: "10px"
+  };
+}, P = (t, i, e, n) => {
+  if (o(t)) {
+    const E = e && e.clientWidth > 0 ? e.clientWidth : Number.POSITIVE_INFINITY, c = Math.max(
+      200,
+      Math.min(n.maxWidth ?? Number.POSITIVE_INFINITY, E)
+    );
+    return Math.max(200, Math.min(i, c));
+  }
+  const h = e && e.clientHeight > 0 ? e.clientHeight : Number.POSITIVE_INFINITY, I = Math.max(
+    100,
+    Math.min(n.maxHeight ?? Number.POSITIVE_INFINITY, h)
+  );
+  return Math.max(100, Math.min(i, I));
+}, m = (t, i) => o(t) ? i.clientX : i.clientY, x = (t) => t.side === "left" || t.side === "right" ? {
+  width: `${t.width}px`,
+  minWidth: `${t.width}px`,
+  maxWidth: `${t.width}px`,
+  height: "100%"
+} : {
+  width: "100%",
+  height: `${t.height}px`,
+  minHeight: `${t.height}px`,
+  maxHeight: `${t.height}px`
+};
+export {
+  _ as PANEL_DEFAULT_HEIGHT,
+  N as PANEL_DEFAULT_WIDTH,
+  g as PANEL_MIN_HEIGHT,
+  u as PANEL_MIN_WIDTH,
+  a as PANEL_RESIZE_HANDLE_SIZE,
+  H as PANEL_SIDES,
+  P as clampPanelSize,
+  l as getInlineResizeHandleStyle,
+  x as getPanelSlotStyle,
+  m as getPointerPositionForPanelSide,
+  d as getRailResizeHandleStyle,
+  r as getResizeCursor,
+  s as getResizeHandleSide,
+  o as isHorizontalPanelSide,
+  S as shouldRenderResizeRailBeforePanel
+};

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

@@ -0,0 +1,33 @@
+import { CSSProperties, MouseEvent as ReactMouseEvent, RefObject } from 'react';
+import { PanelRuntimeDescriptor } from '../types';
+type UseOverlayPanelResizeParams = {
+    areaId: string;
+    overlay: boolean;
+    panel: PanelRuntimeDescriptor;
+    selected: boolean;
+};
+/**
+ * Own the local resize lifecycle for overlay panels.
+ */
+export declare const useOverlayPanelResize: ({ areaId, overlay, panel, selected, }: UseOverlayPanelResizeParams) => {
+    containerRef: RefObject<HTMLDivElement | null>;
+    resizeHandleStyle: CSSProperties;
+    slotStyle: {
+        width: string;
+        minWidth: string;
+        maxWidth: string;
+        height: string;
+        minHeight?: undefined;
+        maxHeight?: undefined;
+    } | {
+        width: string;
+        height: string;
+        minHeight: string;
+        maxHeight: string;
+        minWidth?: undefined;
+        maxWidth?: undefined;
+    };
+    handleResizeStart: (event: ReactMouseEvent<HTMLDivElement>) => void;
+};
+export {};
+//# sourceMappingURL=useOverlayPanelResize.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useOverlayPanelResize.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../../../packages/components/src/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/BaseArea/hooks/useOverlayPanelResize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,IAAI,eAAe,EAC7B,SAAS,EACV,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAE,sBAAsB,EAAiB,MAAM,UAAU,CAAC;AAEtE,KAAK,2BAA2B,GAAG;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,sBAAsB,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,GAAI,uCAKnC,2BAA2B;;;;;;;;;;;;;;;;;;+BA0IlB,eAAe,CAAC,cAAc,CAAC;CA8C1C,CAAC"}

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

@@ -0,0 +1,91 @@
+import { useContext as b, useState as P, useRef as m, useEffect as f, useCallback as s, useMemo as H } from "react";
+import { useAreasStore as L } from "../../../../../../../hooks/useAreas/index.js";
+import D from "../../../../../../../utils/useOnClickOutside/index.js";
+import { ModalContext as U } from "../../../../../../../../../contexts/ModalContext/index.js";
+import { isHorizontalPanelSide as n, clampPanelSize as j, getPanelSlotStyle as q, getInlineResizeHandleStyle as B } from "../helpers/panelRuntime.js";
+const V = ({
+  areaId: w,
+  overlay: M,
+  panel: e,
+  selected: W
+}) => {
+  const y = L((t) => t.windowActions.close), l = L((t) => t.areaActions.setPanelSize), C = b(U)?.open === !0, [v, z] = P(e.width), [g, a] = P(e.height), S = m(null), O = S, r = m(e.width), d = m(e.height), c = m(null);
+  f(() => {
+    z(e.width), r.current = e.width;
+  }, [e.width]), f(() => {
+    a(e.height), d.current = e.height;
+  }, [e.height]), D(O, () => {
+    W && M && !C && y(e.windowId);
+  });
+  const R = s(
+    (t) => {
+      const u = c.current;
+      if (!u)
+        return;
+      const X = S.current?.parentElement ?? null, E = (n(e.side) ? t.clientX : t.clientY) - u.pointerStart, Y = e.side === "left" || e.side === "top" ? u.sizeStart + E : u.sizeStart - E, h = j(
+        e.side,
+        Y,
+        X,
+        e
+      );
+      if (n(e.side)) {
+        r.current = h, z(h);
+        return;
+      }
+      d.current = h, a(h);
+    },
+    [e]
+  ), x = s(() => {
+    if (c.current) {
+      if (c.current = null, n(e.side)) {
+        l(w, e.windowId, {
+          width: r.current,
+          maxWidth: e.maxWidth
+        });
+        return;
+      }
+      l(w, e.windowId, {
+        height: d.current,
+        maxHeight: e.maxHeight
+      });
+    }
+  }, [w, e, l]), i = s(
+    (t) => {
+      R(t);
+    },
+    [R]
+  ), o = s(() => {
+    window.removeEventListener("mousemove", i), window.removeEventListener("mouseup", o), x();
+  }, [i, x]);
+  f(() => () => {
+    window.removeEventListener("mousemove", i), window.removeEventListener("mouseup", o);
+  }, [i, o]);
+  const A = s(
+    (t) => {
+      t.preventDefault(), t.stopPropagation(), c.current = {
+        pointerStart: n(e.side) ? t.clientX : t.clientY,
+        sizeStart: n(e.side) ? r.current : d.current
+      }, window.addEventListener("mousemove", i), window.addEventListener("mouseup", o);
+    },
+    [i, o, e.side]
+  ), k = H(
+    () => q({
+      ...e,
+      width: v,
+      height: g
+    }),
+    [g, v, e]
+  ), I = H(
+    () => B(e.side),
+    [e.side]
+  );
+  return {
+    containerRef: S,
+    resizeHandleStyle: I,
+    slotStyle: k,
+    handleResizeStart: A
+  };
+};
+export {
+  V as useOverlayPanelResize
+};

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

@@ -0,0 +1,6 @@
+import { PanelsByArea } from '../types';
+/**
+ * Group panel windows by side and by docked/overlay mode for one work area.
+ */
+export declare const usePanelsByArea: (areaId: string) => PanelsByArea;
+//# sourceMappingURL=usePanelsByArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelsByArea.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../../../packages/components/src/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/BaseArea/hooks/usePanelsByArea.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAA0B,MAAM,UAAU,CAAC;AAErE;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,iBA8D7C,CAAC"}

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

@@ -0,0 +1,45 @@
+import { useMemo as p } from "react";
+import { useAreasStore as s } from "../../../../../../../hooks/useAreas/index.js";
+import { PANEL_DEFAULT_HEIGHT as a, PANEL_DEFAULT_WIDTH as d, PANEL_SIDES as h } from "../helpers/panelRuntime.js";
+const f = (i) => {
+  const o = s((n) => {
+    const r = n.hashAreas[i];
+    return r ? r.panelItemsIds.map((e) => {
+      const t = n.hashWindows[e];
+      if (t?.emergeType === "panel")
+        return {
+          windowId: e,
+          side: t.panelProps.side,
+          pinned: !!t.panelProps.pinned,
+          width: t.panelProps.width ?? d,
+          height: t.panelProps.height ?? a,
+          maxWidth: t.panelProps.maxWidth,
+          maxHeight: t.panelProps.maxHeight
+        };
+    }).filter((e) => e !== void 0) : [];
+  });
+  return p(() => h.reduce(
+    (n, r) => (n.pinned[r] = o.filter(
+      (e) => e.side === r && e.pinned
+    ), n.overlay[r] = o.filter(
+      (e) => e.side === r && !e.pinned
+    ), n),
+    {
+      pinned: {
+        top: [],
+        left: [],
+        right: [],
+        bottom: []
+      },
+      overlay: {
+        top: [],
+        left: [],
+        right: [],
+        bottom: []
+      }
+    }
+  ), [o]);
+};
+export {
+  f as usePanelsByArea
+};

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

@@ -0,0 +1,16 @@
+import { MouseEvent as ReactMouseEvent } from 'react';
+import { PanelRuntimeDescriptor, PinnedResizeSession } from '../types';
+/**
+ * Coordinate the shared resize lifecycle for pinned panels.
+ */
+export declare const usePinnedPanelResize: (areaId: string) => {
+    centerColumnRef: import('react').RefObject<HTMLDivElement | null>;
+    handlePinnedResizeMove: (event: Pick<MouseEvent, "clientX" | "clientY">) => void;
+    handlePinnedResizeStart: (panel: PanelRuntimeDescriptor, event: ReactMouseEvent<HTMLDivElement>) => void;
+    isPinnedResizeActive: boolean;
+    middleRowRef: import('react').RefObject<HTMLDivElement | null>;
+    pinnedResizeSession: PinnedResizeSession | null;
+    resolvePinnedPanelRuntime: (panel: PanelRuntimeDescriptor) => PanelRuntimeDescriptor;
+    stopPinnedResize: () => void;
+};
+//# sourceMappingURL=usePinnedPanelResize.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePinnedPanelResize.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../../../packages/components/src/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/BaseArea/hooks/usePinnedPanelResize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAS3D,OAAO,KAAK,EAEV,sBAAsB,EACtB,mBAAmB,EACpB,MAAM,UAAU,CAAC;AAElB;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,MAAM;;oCA2EvC,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,SAAS,CAAC;qCA7BvC,sBAAsB,SAAS,eAAe,CAAC,cAAc,CAAC;;;;uCA7B9D,sBAAsB,KAAG,sBAAsB;;CA+L1D,CAAC"}

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

@@ -0,0 +1,105 @@
+import { useRef as w, useState as v, useCallback as r, useEffect as f } from "react";
+import { useAreasStore as W } from "../../../../../../../hooks/useAreas/index.js";
+import { isHorizontalPanelSide as d, getPointerPositionForPanelSide as R, clampPanelSize as b } from "../helpers/panelRuntime.js";
+const M = (l) => {
+  const u = W((e) => e.areaActions.setPanelSize), P = w(null), m = w(null), o = w(null), [n, z] = v(null), [p, a] = v({}), g = !!n, E = r(
+    (e) => {
+      const t = p[e.windowId];
+      return t ? {
+        ...e,
+        width: t.width ?? e.width,
+        height: t.height ?? e.height
+      } : e;
+    },
+    [p]
+  ), S = r((e) => d(e) ? P.current : m.current, []), L = r(
+    (e, t) => {
+      t.preventDefault(), t.stopPropagation(), z({
+        panel: e,
+        pointerStart: R(e.side, t),
+        sizeStart: d(e.side) ? e.width : e.height
+      }), o.current = d(e.side) ? e.width : e.height, a((s) => ({
+        ...s,
+        [e.windowId]: {
+          width: e.width,
+          height: e.height
+        }
+      }));
+    },
+    []
+  ), h = r(
+    (e) => {
+      if (!n)
+        return;
+      const s = R(
+        n.panel.side,
+        e
+      ) - n.pointerStart, x = n.panel.side === "left" || n.panel.side === "top" ? n.sizeStart + s : n.sizeStart - s, c = b(
+        n.panel.side,
+        x,
+        S(n.panel.side),
+        n.panel
+      );
+      o.current = c, a((I) => ({
+        ...I,
+        [n.panel.windowId]: d(
+          n.panel.side
+        ) ? { width: c } : { height: c }
+      }));
+    },
+    [S, n]
+  ), i = r(() => {
+    if (n) {
+      if (d(n.panel.side)) {
+        const e = o.current ?? n.panel.width;
+        u(l, n.panel.windowId, {
+          width: e,
+          maxWidth: n.panel.maxWidth
+        });
+      } else {
+        const e = o.current ?? n.panel.height;
+        u(l, n.panel.windowId, {
+          height: e,
+          maxHeight: n.panel.maxHeight
+        });
+      }
+      z(null), o.current = null, a((e) => {
+        const t = { ...e };
+        return delete t[n.panel.windowId], t;
+      });
+    }
+  }, [l, n, u]);
+  return f(() => {
+    if (n)
+      return window.addEventListener("blur", i), () => {
+        window.removeEventListener("blur", i);
+      };
+  }, [n, i]), f(() => {
+    if (!n)
+      return;
+    const e = (s) => {
+      h(s);
+    }, t = () => {
+      i();
+    };
+    return window.addEventListener("mousemove", e, !0), window.addEventListener("mouseup", t, !0), () => {
+      window.removeEventListener(
+        "mousemove",
+        e,
+        !0
+      ), window.removeEventListener("mouseup", t, !0);
+    };
+  }, [h, n, i]), {
+    centerColumnRef: m,
+    handlePinnedResizeMove: h,
+    handlePinnedResizeStart: L,
+    isPinnedResizeActive: g,
+    middleRowRef: P,
+    pinnedResizeSession: n,
+    resolvePinnedPanelRuntime: E,
+    stopPinnedResize: i
+  };
+};
+export {
+  M as usePinnedPanelResize
+};

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

@@ -0,0 +1,6 @@
+import { AreaPanelsProps } from '../../types';
+/**
+ * Render the panel-aware work-area body with stable per-side hosts for overlay and docked panels.
+ */
+export declare const AreaPanels: ({ areaId, children, selected }: AreaPanelsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AreaPanels.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AreaPanels.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../../../../packages/components/src/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/BaseArea/subcomponents/AreaPanels/AreaPanels.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAA0B,MAAM,aAAa,CAAC;AA2F3E;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,gCAAgC,eAAe,qDAqHzE,CAAC"}

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

@@ -0,0 +1,158 @@
+import { jsxs as c, jsx as l } from "@emotion/react/jsx-runtime";
+import { usePopupsStore as S } from "../../../../../../../../../popups/components/PopupsProvider/hooks/usePopupsStore.js";
+import { PanelLayoutStyled as z, PanelMiddleRowStyled as H, PanelCenterColumnStyled as M, MainLayoutFlowStyled as $ } from "../../../../../../slots/AreasViewerSlots.js";
+import { usePanelsByArea as b } from "../../hooks/usePanelsByArea.js";
+import { usePinnedPanelResize as A } from "../../hooks/usePinnedPanelResize.js";
+import { PanelResizeInteractionLayer as W } from "./subcomponents/PanelResizeInteractionLayer.js";
+import { PanelWindow as m } from "./subcomponents/PanelWindow.js";
+const y = (e, o) => {
+  const i = {
+    position: "relative",
+    display: "flex",
+    flexDirection: e.side === "left" || e.side === "right" ? "row" : "column",
+    flexShrink: 0,
+    minWidth: 0,
+    minHeight: 0,
+    overflow: o ? "visible" : "hidden"
+  };
+  if (e.side === "left" || e.side === "right") {
+    const n = o ? 0 : e.width;
+    return {
+      ...i,
+      width: `${n}px`,
+      minWidth: `${n}px`,
+      maxWidth: `${n}px`,
+      height: "100%"
+    };
+  }
+  const t = o ? 0 : e.height;
+  return {
+    ...i,
+    width: "100%",
+    height: `${t}px`,
+    minHeight: `${t}px`,
+    maxHeight: `${t}px`
+  };
+}, u = (e, o, i) => {
+  const t = e[e.length - 1];
+  if (t)
+    return {
+      overlay: !0,
+      panel: t
+    };
+  const n = o[o.length - 1];
+  return n ? {
+    overlay: !1,
+    panel: i(n)
+  } : null;
+}, F = ({ areaId: e, children: o, selected: i }) => {
+  const t = S((g) => g.currentZindex), n = b(e), {
+    centerColumnRef: P,
+    handlePinnedResizeMove: f,
+    handlePinnedResizeStart: p,
+    isPinnedResizeActive: w,
+    middleRowRef: R,
+    pinnedResizeSession: v,
+    resolvePinnedPanelRuntime: h,
+    stopPinnedResize: x
+  } = A(e), r = u(
+    n.overlay.left,
+    n.pinned.left,
+    h
+  ), a = u(
+    n.overlay.top,
+    n.pinned.top,
+    h
+  ), s = u(
+    n.overlay.right,
+    n.pinned.right,
+    h
+  ), d = u(
+    n.overlay.bottom,
+    n.pinned.bottom,
+    h
+  );
+  return /* @__PURE__ */ c(z, { children: [
+    /* @__PURE__ */ c(H, { ref: R, children: [
+      r ? /* @__PURE__ */ l("div", { style: y(r.panel, r.overlay), children: /* @__PURE__ */ l(
+        m,
+        {
+          areaId: e,
+          panel: r.panel,
+          panelZIndexBase: t,
+          selected: i,
+          overlay: r.overlay,
+          onPinnedResizeStart: p
+        },
+        r.panel.windowId
+      ) }) : null,
+      /* @__PURE__ */ c(
+        M,
+        {
+          "data-testid": "areas-panel-center-column",
+          ref: P,
+          children: [
+            a ? /* @__PURE__ */ l("div", { style: y(a.panel, a.overlay), children: /* @__PURE__ */ l(
+              m,
+              {
+                areaId: e,
+                panel: a.panel,
+                panelZIndexBase: t,
+                selected: i,
+                overlay: a.overlay,
+                onPinnedResizeStart: p
+              },
+              a.panel.windowId
+            ) }) : null,
+            /* @__PURE__ */ l(
+              $,
+              {
+                "data-testid": "areas-main-layout-flow",
+                ownerState: { isResizingPanel: w },
+                children: o
+              },
+              "areas-main-layout-flow"
+            ),
+            d ? /* @__PURE__ */ l("div", { style: y(d.panel, d.overlay), children: /* @__PURE__ */ l(
+              m,
+              {
+                areaId: e,
+                panel: d.panel,
+                panelZIndexBase: t,
+                selected: i,
+                overlay: d.overlay,
+                onPinnedResizeStart: p
+              },
+              d.panel.windowId
+            ) }) : null
+          ]
+        },
+        "areas-panel-center-column"
+      ),
+      s ? /* @__PURE__ */ l("div", { style: y(s.panel, s.overlay), children: /* @__PURE__ */ l(
+        m,
+        {
+          areaId: e,
+          panel: s.panel,
+          panelZIndexBase: t,
+          selected: i,
+          overlay: s.overlay,
+          onPinnedResizeStart: p
+        },
+        s.panel.windowId
+      ) }) : null
+    ] }, "areas-panel-middle-row"),
+    v ? /* @__PURE__ */ l(
+      W,
+      {
+        side: v.panel.side,
+        panelZIndexBase: t,
+        onMouseMove: f,
+        onMouseUp: x
+      }
+    ) : null
+  ] });
+};
+export {
+  F as AreaPanels
+};

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

@@ -0,0 +1,15 @@
+import { MouseEvent as ReactMouseEvent } from 'react';
+import { PanelSide } from '../../../../../../../../../types';
+type PanelResizeInteractionLayerProps = {
+    side: PanelSide;
+    panelZIndexBase: number;
+    onMouseMove: (event: ReactMouseEvent<HTMLDivElement>) => void;
+    onMouseUp: () => void;
+};
+/**
+ * Transparent layer that owns the active pinned-panel resize gesture once it
+ * starts from the rail.
+ */
+export declare const PanelResizeInteractionLayer: ({ side, panelZIndexBase, onMouseMove, onMouseUp, }: PanelResizeInteractionLayerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PanelResizeInteractionLayer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelResizeInteractionLayer.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../../../../../packages/components/src/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/BaseArea/subcomponents/AreaPanels/subcomponents/PanelResizeInteractionLayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAGlE,KAAK,gCAAgC,GAAG;IACtC,IAAI,EAAE,SAAS,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,2BAA2B,GAAI,oDAKzC,gCAAgC,qDASlC,CAAC"}

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

@@ -0,0 +1,19 @@
+import { jsx as n } from "@emotion/react/jsx-runtime";
+import { PanelResizeInteractionLayerStyled as i } from "../../../../../../../slots/AreasViewerSlots.js";
+const l = ({
+  side: e,
+  panelZIndexBase: t,
+  onMouseMove: r,
+  onMouseUp: a
+}) => /* @__PURE__ */ n(
+  i,
+  {
+    ownerState: { side: e, panelZIndexBase: t },
+    "data-testid": "areas-panel-resize-interaction-layer",
+    onMouseMove: r,
+    onMouseUp: a
+  }
+);
+export {
+  l as PanelResizeInteractionLayer
+};

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

@@ -0,0 +1,14 @@
+import { MouseEvent as ReactMouseEvent } from 'react';
+import { PanelRuntimeDescriptor } from '../../../types';
+type PanelResizeRailProps = {
+    panel: PanelRuntimeDescriptor;
+    side: PanelRuntimeDescriptor['side'];
+    panelZIndexBase: number;
+    onResizeStart: (panel: PanelRuntimeDescriptor, event: ReactMouseEvent<HTMLDivElement>) => void;
+};
+/**
+ * Render the stable resize rail used by pinned panels.
+ */
+export declare const PanelResizeRail: ({ panel, side, panelZIndexBase, onResizeStart, }: PanelResizeRailProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PanelResizeRail.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelResizeRail.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../../../../../packages/components/src/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/BaseArea/subcomponents/AreaPanels/subcomponents/PanelResizeRail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAG1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAG7D,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,sBAAsB,CAAC;IAC9B,IAAI,EAAE,sBAAsB,CAAC,MAAM,CAAC,CAAC;IACrC,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,CACb,KAAK,EAAE,sBAAsB,EAC7B,KAAK,EAAE,eAAe,CAAC,cAAc,CAAC,KACnC,IAAI,CAAC;CACX,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,kDAK7B,oBAAoB,qDAuBtB,CAAC"}

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

@@ -0,0 +1,35 @@
+import { jsx as t } from "@emotion/react/jsx-runtime";
+import { useMemo as n } from "react";
+import { getRailResizeHandleStyle as s } from "../../../helpers/panelRuntime.js";
+import { PanelResizeRailStyled as m } from "../../../../../../../slots/AreasViewerSlots.js";
+const f = ({
+  panel: a,
+  side: e,
+  panelZIndexBase: r,
+  onResizeStart: l
+}) => {
+  const o = n(
+    () => s(e),
+    [e]
+  );
+  return /* @__PURE__ */ t(
+    m,
+    {
+      ownerState: { side: e, panelZIndexBase: r },
+      "data-testid": `areas-panel-resize-rail-${e}`,
+      children: /* @__PURE__ */ t(
+        "div",
+        {
+          "data-testid": `areas-panel-resize-handle-${e}`,
+          onMouseDown: (i) => {
+            l(a, i);
+          },
+          style: o
+        }
+      )
+    }
+  );
+};
+export {
+  f as PanelResizeRail
+};