@gustavolmo/react-window-manager 0.4.0 → 0.4.2

package/dist/index.js

@@ -7,7 +7,7 @@ var useWorkspaceState = create((set, get) => ({
   wsElement: null,
   setWsElement: (el) => set({ wsElement: el }),
   isGridEnabled: true,
-  isDockPannelEnabled: true,
+  isDockPanelEnabled: true,
   responsiveBreak: "sm",
   isBelowBreakPoint: false,
   activeWindowId: "react-dynamic-window-instance0",
@@ -169,26 +169,24 @@ var dockCommandResolver = {
     ];
   }
 };
-var getDockDependencies = () => {
-  const { wsRect } = useWorkspaceState.getState();
-  return { wsRect };
-};
 
 // src/window-manager/internal/features/cursor/cursor-state.ts
-import { create as create2 } from "zustand";
-var useCursorState = create2((set) => ({
+var cursorPosition = {
   x: 10,
-  y: 10,
-  setXY: (x, y) => set({ x, y })
-}));
+  y: 10
+};
+var setCursorPosition = ({ x, y }) => {
+  cursorPosition.x = x;
+  cursorPosition.y = y;
+};
 
 // src/window-manager/internal/runtime/drag-resolver/drag-loop.ts
 var rafDragLoopResolver = {
   LOOP_DRAG: (targetWinId, commit) => {
-    const { x, y } = useCursorState.getState();
+    const { x, y } = cursorPosition;
     const { winCoord, isDragging, windowId } = windowRegistry[targetWinId].getState();
     if (!isDragging)
-      throw new Error(`INIT_DRAG_LOOP called with isDragging false for winId: ${windowId}`);
+      throw new Error(`LOOP_DRAG called with isDragging false for winId: ${windowId}`);
     const pointerOffset = {
       left: x - winCoord.pointX,
       top: y - winCoord.pointY
@@ -199,13 +197,13 @@ var rafDragLoopResolver = {
 var dragLoop = (targetWinId, pointerOffset, commit) => {
   const { winCoord, isDragging } = windowRegistry[targetWinId].getState();
   const { wsRect } = useWorkspaceState.getState();
-  const { x, y } = useCursorState.getState();
+  const { x, y } = cursorPosition;
   if (!isDragging)
     return;
-  let adjustedX = x - pointerOffset.left;
+  let adjustedX = Math.round(x - pointerOffset.left);
   if (x > wsRect.right || x < wsRect.left)
     adjustedX = winCoord.pointX;
-  let adjustedY = y - pointerOffset.top;
+  let adjustedY = Math.round(y - pointerOffset.top);
   if (y > wsRect.bottom || y < wsRect.top)
     adjustedY = winCoord.pointY;
   if (adjustedX !== winCoord.pointX || adjustedY !== winCoord.pointY) {
@@ -249,9 +247,6 @@ var dragCommandResolver = {
     ];
   }
 };
-var isDragAllowed = () => {
-  return !useWorkspaceState.getState().isBelowBreakPoint;
-};
 
 // src/window-manager/internal/runtime/focus-resolver/focus-commands.ts
 var focusCommandResolver = {
@@ -328,30 +323,12 @@ var focusCommandResolver = {
   }
 };
 
-// src/window-manager/internal/runtime/stack-resolver/stack-commands.ts
-var stackCommandResolver = {
-  RESET_STACK: () => {
-    const batchUpdate = [];
-    for (const key of Object.keys(windowRegistry)) {
-      const { resetFlag } = windowRegistry[key].getState();
-      batchUpdate.push({
-        winId: key,
-        patch: {
-          resetFlag: !resetFlag,
-          // FIND ME: reset flag is anti-pattern
-          isWindowClosed: true,
-          isActive: false
-        }
-      });
-    }
-    return batchUpdate;
-  }
-};
-
 // src/window-manager/internal/runtime/workspace-resolver/workspace-commands.ts
 var workspaceCommandResolver = {
-  UPDATE_WORKSPACE_RECT: () => {
+  UPDATE_WORKSPACE_SIZE: () => {
+    const prevRect = useWorkspaceState.getState().wsRect;
     const rect = useWorkspaceState.getState().wsElement?.getBoundingClientRect();
+    const breakPoint = useWorkspaceState.getState().responsiveBreak;
     const top = rect?.top ?? 0;
     const left = rect?.left ?? 0;
     const innerHeight = rect?.height ?? 0;
@@ -360,10 +337,8 @@ var workspaceCommandResolver = {
     const right = left + innerWidth;
     const centerX = left + innerWidth / 2;
     const centerY = top + innerHeight / 2;
-    const breakPoint = useWorkspaceState.getState().responsiveBreak;
-    const isBelowBreakPoint = innerWidth < responsiveBreakInPx(breakPoint);
-    return {
-      isBelowBreakPoint,
+    const workspaceUpdate = {
+      isBelowBreakPoint: innerWidth < responsiveBreakInPx(breakPoint),
       wsRect: {
         top,
         left,
@@ -375,20 +350,50 @@ var workspaceCommandResolver = {
         centerY
       }
     };
+    const windowBatchUpdate = [];
+    const { innerHeight: prevWsHeight, innerWidth: prevWsWidth } = prevRect;
+    const currWsHeight = innerHeight;
+    const currWsWidth = innerWidth;
+    const widthChangeRatio = currWsWidth / prevWsWidth;
+    const heightChangeRatio = currWsHeight / prevWsHeight;
+    for (const key of Object.keys(windowRegistry)) {
+      const win = windowRegistry[key].getState();
+      windowBatchUpdate.push({
+        winId: key,
+        patch: {
+          winWidth: win.winWidth * widthChangeRatio,
+          winHeight: win.winHeight * heightChangeRatio,
+          winCoord: {
+            pointX: win.winCoord.pointX * widthChangeRatio,
+            pointY: win.winCoord.pointY * heightChangeRatio
+          }
+        }
+      });
+    }
+    return {
+      win: windowBatchUpdate,
+      ws: workspaceUpdate
+    };
   },
   SET_WORKSPACE_FEATURES: (_, ctx) => {
-    if (ctx?.isGridEnabled === void 0 || ctx?.isDockPannelEnabled === void 0)
+    if (ctx?.isGridEnabled === void 0 || ctx?.isDockPanelEnabled === void 0)
       throw new Error(`SET_WORKSPACE_FEATURES called without a ctx value`);
     return {
-      isGridEnabled: ctx.isGridEnabled,
-      isDockPannelEnabled: ctx.isDockPannelEnabled
+      win: [],
+      ws: {
+        isGridEnabled: ctx.isGridEnabled,
+        isDockPanelEnabled: ctx.isDockPanelEnabled
+      }
     };
   },
   SET_RESPONSIVE_BREAK: (_, ctx) => {
     if (ctx?.responsiveBreak === void 0 || ctx?.responsiveBreak === null)
       throw new Error(`SET_RESPONSIVE_BREAK called without a ctx value`);
     return {
-      responsiveBreak: ctx.responsiveBreak
+      win: [],
+      ws: {
+        responsiveBreak: ctx.responsiveBreak
+      }
     };
   }
 };
@@ -416,7 +421,7 @@ var resizeCommandResolver = {
   ENABLE_RESIZE: (targetWinId, direction) => {
     const currentResizeAction = windowRegistry[targetWinId].getState().resizeAction;
     if (currentResizeAction)
-      throw new Error(`ENABLE_RESIZE called on a window that is already risizing`);
+      throw new Error(`ENABLE_RESIZE called on a window that is already resizing`);
     return [
       {
         winId: targetWinId,
@@ -440,6 +445,108 @@ var resizeCommandResolver = {
   }
 };
 
+// src/window-manager/internal/runtime/resize-resolver/resize-loop-rules.ts
+var resolveNeighbourResizeLimit = (activeWinId, direction) => {
+  switch (direction) {
+    case "e":
+      return neighbourResizeLimit.e(activeWinId);
+    case "w":
+      return neighbourResizeLimit.w(activeWinId);
+    case "n":
+      return neighbourResizeLimit.n(activeWinId);
+    case "s":
+      return neighbourResizeLimit.s(activeWinId);
+    default:
+      return void 0;
+  }
+};
+var neighbourResizeLimit = {
+  e: (activeWinId) => {
+    let leftMostXAtMinWidth = void 0;
+    for (const key of Object.keys(windowRegistry)) {
+      const neighbourWin = windowRegistry[key].getState();
+      if (key === activeWinId)
+        continue;
+      if (neighbourWin.resizeAction !== "w")
+        continue;
+      if (neighbourWin.isWindowClosed)
+        continue;
+      const winBox = neighbourWin.winElement?.getBoundingClientRect();
+      if (!winBox)
+        continue;
+      const xAtMinWidth = winBox.right - neighbourWin.WIN_MIN_WIDTH;
+      if (leftMostXAtMinWidth === void 0)
+        leftMostXAtMinWidth = xAtMinWidth;
+      if (leftMostXAtMinWidth > xAtMinWidth)
+        leftMostXAtMinWidth = xAtMinWidth;
+    }
+    return leftMostXAtMinWidth;
+  },
+  w: (activeWinId) => {
+    let rightMostXAtMinWidth = void 0;
+    for (const key of Object.keys(windowRegistry)) {
+      const neighbourWin = windowRegistry[key].getState();
+      if (key === activeWinId)
+        continue;
+      if (neighbourWin.resizeAction !== "e")
+        continue;
+      if (neighbourWin.isWindowClosed)
+        continue;
+      const winBox = neighbourWin.winElement?.getBoundingClientRect();
+      if (!winBox)
+        continue;
+      const xAtMinWidth = winBox.left + neighbourWin.WIN_MIN_WIDTH;
+      if (rightMostXAtMinWidth === void 0)
+        rightMostXAtMinWidth = xAtMinWidth;
+      if (rightMostXAtMinWidth < xAtMinWidth)
+        rightMostXAtMinWidth = xAtMinWidth;
+    }
+    return rightMostXAtMinWidth;
+  },
+  n: (currentWinId) => {
+    let bottomMostYAtMinWidth = void 0;
+    for (const key of Object.keys(windowRegistry)) {
+      const remoteWin = windowRegistry[key].getState();
+      if (key === currentWinId)
+        continue;
+      if (remoteWin.resizeAction !== "s")
+        continue;
+      if (remoteWin.isWindowClosed)
+        continue;
+      const winBox = remoteWin.winElement?.getBoundingClientRect();
+      if (!winBox)
+        continue;
+      const yAtMinWidth = winBox.top + remoteWin.WIN_MIN_HEIGHT;
+      if (bottomMostYAtMinWidth === void 0)
+        bottomMostYAtMinWidth = yAtMinWidth;
+      if (bottomMostYAtMinWidth < yAtMinWidth)
+        bottomMostYAtMinWidth = yAtMinWidth;
+    }
+    return bottomMostYAtMinWidth;
+  },
+  s: (currentWinId) => {
+    let topMostYAtMinWidth = void 0;
+    for (const key of Object.keys(windowRegistry)) {
+      const remoteWin = windowRegistry[key].getState();
+      if (key === currentWinId)
+        continue;
+      if (remoteWin.resizeAction !== "n")
+        continue;
+      if (remoteWin.isWindowClosed)
+        continue;
+      const winBox = remoteWin.winElement?.getBoundingClientRect();
+      if (!winBox)
+        continue;
+      const yAtMinWidth = winBox.bottom - remoteWin.WIN_MIN_HEIGHT;
+      if (topMostYAtMinWidth === void 0)
+        topMostYAtMinWidth = yAtMinWidth;
+      if (topMostYAtMinWidth > yAtMinWidth)
+        topMostYAtMinWidth = yAtMinWidth;
+    }
+    return topMostYAtMinWidth;
+  }
+};
+
 // src/window-manager/internal/runtime/resize-resolver/resize-loop.ts
 var rafResizeLoopResolver = {
   LOOP_RESIZE: (targetWinId, commitCb) => {
@@ -450,41 +557,77 @@ var rafResizeLoopResolver = {
     const winElementBox = dep.winBox;
     if (!winElementBox)
       throw new Error(`LOOP_RESIZE called with null window element for winId: ${targetWinId}`);
-    requestAnimationFrame(
-      () => resizer[resizeDirection](getRafResizeDependencies(targetWinId), commitCb)
-    );
+    requestAnimationFrame(() => {
+      const neighbourLimit = resolveNeighbourResizeLimit(dep.win.windowId, resizeDirection);
+      resizer[resizeDirection](getRafResizeDependencies(targetWinId), commitCb, neighbourLimit);
+    });
   }
 };
 var resizer = {
-  e: (resizeDep, commit) => {
-    const { wsRect, win, winBox, x, y } = resizeDep;
+  e: (resizeDep, commit, neighbourLimit) => {
+    const { wsRect, win, winBox, x } = resizeDep;
     if (!win.resizeAction)
       return;
     if (!winBox)
       return;
     const cursorOutOfBounds = x > wsRect.right || x < wsRect.left;
-    const minWinWidth = x - winBox.left < win.WIN_MIN_WIDTH;
     const sizeDiff = x - winBox.right;
-    if (!minWinWidth && !cursorOutOfBounds && sizeDiff !== 0) {
+    const isResizeActive = !cursorOutOfBounds && sizeDiff !== 0;
+    const minWinWidth = x - winBox.left < win.WIN_MIN_WIDTH;
+    const leftMostXAtMinWidth = neighbourLimit;
+    const isNeighbourLimit = leftMostXAtMinWidth && x > leftMostXAtMinWidth;
+    if (isNeighbourLimit && isResizeActive) {
+      commit([
+        {
+          winId: win.windowId,
+          patch: { winWidth: leftMostXAtMinWidth - win.winCoord.pointX }
+        }
+      ]);
+    } else if (!minWinWidth && isResizeActive) {
       commit([
         {
           winId: win.windowId,
           patch: { winWidth: win.winWidth + sizeDiff }
         }
       ]);
+    } else if (minWinWidth && isResizeActive) {
+      commit([
+        {
+          winId: win.windowId,
+          patch: { winWidth: win.WIN_MIN_WIDTH }
+        }
+      ]);
     }
-    requestAnimationFrame(() => resizer.e(getRafResizeDependencies(win.windowId), commit));
+    requestAnimationFrame(
+      () => resizer.e(getRafResizeDependencies(win.windowId), commit, neighbourLimit)
+    );
   },
-  w: (resizeDep, commit) => {
-    const { wsRect, win, winBox, x, y } = resizeDep;
+  w: (resizeDep, commit, neighbourLimit) => {
+    const { wsRect, win, winBox, x } = resizeDep;
     if (!win.resizeAction)
       return;
     if (!winBox)
       return;
-    const minWinWidth = winBox.right - x <= win.WIN_MIN_WIDTH;
     const cursorOutOfBounds = x > wsRect.right || x < wsRect.left;
     const sizeDiff = winBox.left - x;
-    if (!minWinWidth && !cursorOutOfBounds && sizeDiff !== 0) {
+    const isResizeActive = !cursorOutOfBounds && sizeDiff !== 0;
+    const minWinWidth = winBox.right - x <= win.WIN_MIN_WIDTH;
+    const rightMostXAtMinWidth = neighbourLimit;
+    const isNeighbourLimit = rightMostXAtMinWidth && x < rightMostXAtMinWidth;
+    if (isNeighbourLimit) {
+      commit([
+        {
+          winId: win.windowId,
+          patch: {
+            winWidth: win.winCoord.pointX - rightMostXAtMinWidth + win.winWidth,
+            winCoord: {
+              pointX: rightMostXAtMinWidth,
+              pointY: win.winCoord.pointY
+            }
+          }
+        }
+      ]);
+    } else if (!minWinWidth && isResizeActive) {
       commit([
         {
           winId: win.windowId,
@@ -494,19 +637,50 @@ var resizer = {
           }
         }
       ]);
+    } else if (minWinWidth && isResizeActive) {
+      commit([
+        {
+          winId: win.windowId,
+          patch: {
+            winCoord: {
+              pointX: win.winCoord.pointX + win.winWidth - win.WIN_MIN_WIDTH,
+              pointY: win.winCoord.pointY
+            },
+            winWidth: win.WIN_MIN_WIDTH
+          }
+        }
+      ]);
     }
-    requestAnimationFrame(() => resizer.w(getRafResizeDependencies(win.windowId), commit));
+    requestAnimationFrame(
+      () => resizer.w(getRafResizeDependencies(win.windowId), commit, neighbourLimit)
+    );
   },
-  n: (resizeDep, commit) => {
-    const { wsRect, win, winBox, x, y } = resizeDep;
+  n: (resizeDep, commit, neighbourLimit) => {
+    const { wsRect, win, winBox, y } = resizeDep;
     if (!win.resizeAction)
       return;
     if (!winBox)
       return;
-    const minWinHeight = winBox.bottom - y <= win.WIN_MIN_HEIGHT;
     const cursorOutOfBounds = y > wsRect.bottom || y < wsRect.top;
     const sizeDiff = winBox.top - y;
-    if (!minWinHeight && !cursorOutOfBounds && sizeDiff !== 0) {
+    const isResizeActive = !cursorOutOfBounds && sizeDiff !== 0;
+    const minWinHeight = winBox.bottom - y <= win.WIN_MIN_HEIGHT;
+    const bottomMostYAtMinWidth = neighbourLimit;
+    const isNeighbourLimit = bottomMostYAtMinWidth && y < bottomMostYAtMinWidth;
+    if (isNeighbourLimit && isResizeActive) {
+      commit([
+        {
+          winId: win.windowId,
+          patch: {
+            winHeight: win.winCoord.pointY - bottomMostYAtMinWidth + win.winHeight,
+            winCoord: {
+              pointX: win.winCoord.pointX,
+              pointY: bottomMostYAtMinWidth
+            }
+          }
+        }
+      ]);
+    } else if (!minWinHeight && isResizeActive) {
       commit([
         {
           winId: win.windowId,
@@ -516,19 +690,46 @@ var resizer = {
           }
         }
       ]);
+    } else if (minWinHeight && isResizeActive) {
+      commit([
+        {
+          winId: win.windowId,
+          patch: {
+            winHeight: win.WIN_MIN_HEIGHT,
+            winCoord: {
+              pointX: win.winCoord.pointX,
+              pointY: win.winCoord.pointY + win.winHeight - win.WIN_MIN_HEIGHT
+            }
+          }
+        }
+      ]);
     }
-    requestAnimationFrame(() => resizer.n(getRafResizeDependencies(win.windowId), commit));
+    requestAnimationFrame(
+      () => resizer.n(getRafResizeDependencies(win.windowId), commit, neighbourLimit)
+    );
   },
-  s: (resizeDep, commit) => {
-    const { wsRect, win, winBox, x, y } = resizeDep;
+  s: (resizeDep, commit, neighbourLimit) => {
+    const { wsRect, win, winBox, y } = resizeDep;
     if (!win.resizeAction)
       return;
     if (!winBox)
       return;
-    const minWinHeight = y - winBox.top < win.WIN_MIN_HEIGHT;
     const cursorOutOfBounds = y > wsRect.bottom || y < wsRect.top;
     const sizeDiff = y - winBox.bottom;
-    if (!minWinHeight && !cursorOutOfBounds && sizeDiff !== 0) {
+    const isResizeActive = !cursorOutOfBounds && sizeDiff !== 0;
+    const minWinHeight = y - winBox.top < win.WIN_MIN_HEIGHT;
+    const topMostYAtMinWidth = neighbourLimit;
+    const isNeighbourLimit = topMostYAtMinWidth && y > topMostYAtMinWidth;
+    if (isNeighbourLimit && isResizeActive) {
+      commit([
+        {
+          winId: win.windowId,
+          patch: {
+            winHeight: topMostYAtMinWidth - win.winCoord.pointY
+          }
+        }
+      ]);
+    } else if (!minWinHeight && isResizeActive) {
       commit([
         {
           winId: win.windowId,
@@ -537,8 +738,17 @@ var resizer = {
           }
         }
       ]);
+    } else if (minWinHeight && isResizeActive) {
+      commit([
+        {
+          winId: win.windowId,
+          patch: { winHeight: win.WIN_MIN_HEIGHT }
+        }
+      ]);
     }
-    requestAnimationFrame(() => resizer.s(getRafResizeDependencies(win.windowId), commit));
+    requestAnimationFrame(
+      () => resizer.s(getRafResizeDependencies(win.windowId), commit, neighbourLimit)
+    );
   },
   nw: (resizeDep, commit) => {
     const { wsRect, win, winBox, x, y } = resizeDep;
@@ -550,37 +760,27 @@ var resizer = {
     const cursorOutOfBoundsX = x > wsRect.right || x < wsRect.left;
     const isCursorOutOfBounds = cursorOutOfBoundsY || cursorOutOfBoundsX;
     if (isCursorOutOfBounds) {
-      requestAnimationFrame(() => resizer.nw(getRafResizeDependencies(win.windowId), commit));
+      return;
     }
     const minWinHeight = winBox.bottom - y <= win.WIN_MIN_HEIGHT;
     const minWinWidth = winBox.right - x <= win.WIN_MIN_WIDTH;
     const sizeDiffY = winBox.top - y;
     const sizeDiffX = winBox.left - x;
-    const stagedChagnes = [];
     if (sizeDiffY !== 0 || sizeDiffX !== 0) {
-      stagedChagnes.push({
-        winId: win.windowId,
-        patch: {
-          winCoord: {
-            pointX: minWinWidth ? win.winCoord.pointX : x,
-            pointY: minWinHeight ? win.winCoord.pointY : y
+      commit([
+        {
+          winId: win.windowId,
+          patch: {
+            winWidth: minWinWidth ? win.WIN_MIN_WIDTH : win.winWidth + sizeDiffX,
+            winHeight: minWinHeight ? win.WIN_MIN_HEIGHT : win.winHeight + sizeDiffY,
+            winCoord: {
+              pointX: minWinWidth ? win.winCoord.pointX + win.winWidth - win.WIN_MIN_WIDTH : x,
+              pointY: minWinHeight ? win.winCoord.pointY + win.winHeight - win.WIN_MIN_HEIGHT : y
+            }
           }
         }
-      });
-    }
-    if (!minWinHeight && sizeDiffY !== 0) {
-      stagedChagnes.push({
-        winId: win.windowId,
-        patch: { winHeight: win.winHeight + sizeDiffY }
-      });
-    }
-    if (!minWinWidth && sizeDiffX !== 0) {
-      stagedChagnes.push({
-        winId: win.windowId,
-        patch: { winWidth: win.winWidth + sizeDiffX }
-      });
+      ]);
     }
-    commit(stagedChagnes);
     requestAnimationFrame(() => resizer.nw(getRafResizeDependencies(win.windowId), commit));
   },
   se: (resizeDep, commit) => {
@@ -600,7 +800,7 @@ var getRafResizeDependencies = (winId) => {
   const win = windowRegistry[winId].getState();
   const winBox = win.winElement?.getBoundingClientRect();
   const wsRect = useWorkspaceState.getState().wsRect;
-  const { x, y } = useCursorState.getState();
+  const { x, y } = cursorPosition;
   return { wsRect, win, winBox, x, y };
 };
 
@@ -610,18 +810,18 @@ var rwmRuntime = {
     switch (subsystem) {
       case "WORKSPACE": {
         const stagedChanges = workspaceCommandResolver[cmd](targetWinId, ctx);
-        commitToWorkspace(stagedChanges);
+        commitBatch(stagedChanges);
         break;
       }
       case "DRAG": {
-        if (!isDragAllowed())
+        if (useWorkspaceState.getState().isBelowBreakPoint)
           return;
         const stagedChanges = dragCommandResolver[cmd](targetWinId);
         commitToWindow(stagedChanges);
         break;
       }
       case "DOCK": {
-        const { wsRect } = getDockDependencies();
+        const { wsRect } = useWorkspaceState.getState();
         const stagedChanges = dockCommandResolver[cmd](targetWinId, wsRect);
         commitToWindow(stagedChanges);
         break;
@@ -631,16 +831,15 @@ var rwmRuntime = {
         commitToWindow(stagedChanges);
         break;
       }
-      case "STACK": {
-        const stagedChanges = stackCommandResolver[cmd](targetWinId);
-        commitToWindow(stagedChanges);
-        break;
-      }
       case "FOCUS": {
         const stagedChanges = focusCommandResolver[cmd](targetWinId);
         commitBatch(stagedChanges);
         break;
       }
+      default:
+        throw new Error(
+          `Unregistered rwmRuntime subsystem called: ${{ subsystem, cmd, targetWinId, ctx }}`
+        );
     }
   }
 };
@@ -648,7 +847,7 @@ var rafRuntime = {
   dispatch: ({ subsystem, cmd, targetWinId }) => {
     switch (subsystem) {
       case "RAF_DRAG": {
-        if (!isDragAllowed())
+        if (useWorkspaceState.getState().isBelowBreakPoint)
           return;
         rafDragLoopResolver[cmd](targetWinId, commitToWindow);
         break;
@@ -657,6 +856,10 @@ var rafRuntime = {
         rafResizeLoopResolver[cmd](targetWinId, commitToWindow);
         break;
       }
+      default:
+        throw new Error(
+          `Unregistered rafRuntime subsystem called: ${{ subsystem, cmd, targetWinId }}`
+        );
     }
   }
 };
@@ -747,13 +950,6 @@ var focusApi = {
   }
 };
 
-// src/window-manager/internal/features/stack/stack-api.ts
-var stackApi = {
-  resetStack: () => {
-    rwmRuntime.dispatch({ subsystem: "STACK", cmd: "RESET_STACK" });
-  }
-};
-
 // src/window-manager/internal/features/workspace/workspace-api.ts
 var wsApi = {
   /**
@@ -773,36 +969,35 @@ var wsApi = {
       ctx: { responsiveBreak: breakPoint }
     });
   },
-  setWsFeatures: ({ isDockPannelEnabled = true, isGridEnabled = true }) => {
+  setWsFeatures: ({ isDockPanelEnabled = true, isGridEnabled = true }) => {
     rwmRuntime.dispatch({
       subsystem: "WORKSPACE",
       cmd: "SET_WORKSPACE_FEATURES",
-      ctx: { isDockPannelEnabled, isGridEnabled }
+      ctx: { isDockPanelEnabled, isGridEnabled }
     });
   },
-  updateWsRect: () => {
-    rwmRuntime.dispatch({ subsystem: "WORKSPACE", cmd: "UPDATE_WORKSPACE_RECT" });
+  updateWsSize: () => {
+    rwmRuntime.dispatch({ subsystem: "WORKSPACE", cmd: "UPDATE_WORKSPACE_SIZE" });
   }
 };
 
 // src/window-manager/rwm.ts
-var { updateWsRect, ...publicWsApi } = wsApi;
+var { updateWsSize, ...publicWsApi } = wsApi;
 var rwm = {
   dockApi,
   focusApi,
-  stackApi,
   workspaceApi: publicWsApi,
   /**
    * @about
    * Zustand hook, can be used to access the current state of the workspace by either
-   * calling `const { <someState> } = worskpaceState()` inside a component or by calling
-   * `worskpaceState.getState()` anywhere.
+   * calling `const { <someState> } = workspaceState()` inside a component or by calling
+   * `workspaceState.getState()` anywhere.
    *
    * @note
    * The hook also exposes the `setState()` method, however, this is highly discouraged. Prefer calling
    * the exposed apis in rwm for state mutation.
    */
-  worskpaceState: useWorkspaceState,
+  workspaceState: useWorkspaceState,
   /**
    * @about
    * use the syntax `const { <someState> } = windowRegistry[<winId>]()` inside a component to access
@@ -824,7 +1019,7 @@ import { useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function DockingControls() {
   const [isHovering, setIsHovering] = useState(false);
-  const { activeWindowId, isDockPannelEnabled, isBelowBreakPoint } = useWorkspaceState();
+  const { activeWindowId, isDockPanelEnabled, isBelowBreakPoint } = useWorkspaceState();
   const { isDragging } = windowRegistry[activeWindowId]();
   const cornerDockControl = /* @__PURE__ */ jsxs("div", { className: `flex xl:p-0 shrink-0 gap-0.5`, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center gap-0.5", children: [
@@ -892,7 +1087,7 @@ function DockingControls() {
       }
     )
   ] });
-  const windowDockPannel = /* @__PURE__ */ jsx(
+  const windowDockPanel = /* @__PURE__ */ jsx(
     "span",
     {
       className: "pointer-events-auto px-4 pb-3",
@@ -916,7 +1111,7 @@ function DockingControls() {
   );
   if (isBelowBreakPoint)
     return;
-  if (!isDockPannelEnabled)
+  if (!isDockPanelEnabled)
     return;
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     "div",
@@ -926,7 +1121,7 @@ function DockingControls() {
         transition-all duration-500
         absolute z-50 flex items-center justify-center 
         w-full mx-auto pointer-events-none`,
-      children: windowDockPannel
+      children: windowDockPanel
     }
   ) });
 }
@@ -956,15 +1151,14 @@ var resizeApi = {
 import { useEffect } from "react";
 import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
 function CursorMoveListener() {
-  const { setXY } = useCursorState();
   useEffect(() => {
-    const handleWindowPosition = (e) => {
+    const handlePointerMove = (e) => {
       e.preventDefault();
-      setXY(e.clientX, e.clientY);
+      setCursorPosition({ x: e.clientX, y: e.clientY });
     };
-    window.addEventListener("pointermove", handleWindowPosition);
-    return () => window.removeEventListener("pointermove", handleWindowPosition);
-  }, [setXY]);
+    window.addEventListener("pointermove", handlePointerMove);
+    return () => window.removeEventListener("pointermove", handlePointerMove);
+  }, []);
   return /* @__PURE__ */ jsx2(Fragment2, {});
 }
 
@@ -977,8 +1171,7 @@ function WorkspaceResizeListener() {
     if (!wsElement)
       return;
     const onResize = () => {
-      wsApi.updateWsRect();
-      stackApi.resetStack();
+      wsApi.updateWsSize();
     };
     onResize();
     const observer = new ResizeObserver(onResize);
@@ -1028,7 +1221,7 @@ function WorkspaceLayout({ children, className }) {
       ref: workspaceRef,
       onPointerLeave: disabledDragAndResize,
       onPointerUp: disabledDragAndResize,
-      className: className ? className : "fixed overflow-hidden h-full w-full touch-none",
+      className: className ? className : "fixed overflow-hidden h-full w-full touch-none -z-50",
       children: [
         /* @__PURE__ */ jsx4(WorkspaceResizeListener, {}),
         /* @__PURE__ */ jsx4(CursorMoveListener, {}),
@@ -1042,7 +1235,7 @@ function WorkspaceLayout({ children, className }) {
 }
 
 // src/window-manager/registration/window-store-factory.tsx
-import { create as create3 } from "zustand";
+import { create as create2 } from "zustand";
 
 // src/window-manager/internal/features/window-layout.tsx
 import { useEffect as useEffect4, useRef as useRef2 } from "react";
@@ -1117,24 +1310,23 @@ function IconWinMinimize({ color }) {
 
 // src/window-manager/internal/features/grid/grid-orchestrator.ts
 var tolerance = 4;
-var gridOrchestrator = {
-  attachAdjacentGridBehavior: (winId) => {
+var resizeOrchestrator = {
+  initializeResize: (winId, direction) => {
     if (!useWorkspaceState.getState().isGridEnabled)
       return;
     if (getOpenWinCount() < 1)
       throw new Error(`gridOrchestrator initalized but all windows are closed`);
-    if (getDraggingWinCount() < 1)
-      throw new Error(`gridOrchestrator initalized but no window is currently resizing`);
-    attachAdjacentGridBehavior(winId);
+    initNeighbourResizeBehavior(winId, /* @__PURE__ */ new Set(), direction);
+    resizeApi.startResize(winId, direction);
   }
 };
-var attachAdjacentGridBehavior = (winId, visited = /* @__PURE__ */ new Set()) => {
+var initNeighbourResizeBehavior = (winId, visited, direction) => {
   if (visited.has(winId))
     return;
   else
     visited.add(winId);
   const thisWin = windowRegistry[winId].getState();
-  const currentResize = thisWin.resizeAction;
+  const currentResize = direction ? direction : thisWin.resizeAction;
   for (const key of Object.keys(windowRegistry)) {
     const remoteWin = windowRegistry[key].getState();
     if (remoteWin.windowId === thisWin.windowId)
@@ -1149,22 +1341,22 @@ var attachAdjacentGridBehavior = (winId, visited = /* @__PURE__ */ new Set()) =>
     if (currentResize === "e") {
       const isRemoteConneted = resizeCase.whenDraggingEast(dependencies);
       if (isRemoteConneted)
-        attachAdjacentGridBehavior(remoteWin.windowId, visited);
+        initNeighbourResizeBehavior(remoteWin.windowId, visited);
     }
     if (currentResize === "w") {
       const isRemoteConneted = resizeCase.whenDragginWest(dependencies);
       if (isRemoteConneted)
-        attachAdjacentGridBehavior(remoteWin.windowId, visited);
+        initNeighbourResizeBehavior(remoteWin.windowId, visited);
     }
     if (currentResize === "n") {
       const isRemoteConneted = resizeCase.whenDragginNorth(dependencies);
       if (isRemoteConneted)
-        attachAdjacentGridBehavior(remoteWin.windowId, visited);
+        initNeighbourResizeBehavior(remoteWin.windowId, visited);
     }
     if (currentResize === "s") {
       const isRemoteConneted = resizeCase.whenDraggingSouth(dependencies);
       if (isRemoteConneted)
-        attachAdjacentGridBehavior(remoteWin.windowId, visited);
+        initNeighbourResizeBehavior(remoteWin.windowId, visited);
     }
   }
 };
@@ -1261,13 +1453,6 @@ var buildDependencies = (thisWin, remoteWin) => {
     isRemoteOutside
   };
 };
-var getDraggingWinCount = () => {
-  let isWindowResizingCount = 0;
-  for (const key of Object.keys(windowRegistry))
-    if (windowRegistry[key].getState().resizeAction)
-      isWindowResizingCount++;
-  return isWindowResizingCount;
-};
 var getOpenWinCount = () => {
   let openWnidowCount = 0;
   for (const key of Object.keys(windowRegistry))
@@ -1281,8 +1466,7 @@ import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-run
 function ResizingControls({ winId }) {
   const { winCoord, winWidth, winHeight, resizeAction } = windowRegistry[winId]();
   const startResize = (direction) => {
-    resizeApi.startResize(winId, direction);
-    gridOrchestrator.attachAdjacentGridBehavior(winId);
+    resizeOrchestrator.initializeResize(winId, direction);
   };
   const stopResize = () => {
     resizeApi.stopResize(winId);
@@ -1413,8 +1597,8 @@ function DragHandle({ winId }) {
       onPointerUp: () => dragApi.stopDrag(winId),
       onDoubleClick: () => dockApi.maximizeWindow(winId),
       className: `
-        grow min-w-8 h-8 px-2 text-white flex items-center text-sm bg-white bg-opacity-0 
-        hover:bg-opacity-5 mix-blend-difference`
+        grow min-w-8 h-8 px-2 text-white flex items-center text-sm bg-zinc-100 bg-opacity-0 
+        hover:bg-opacity-20 hover:mix-blend-overlay`
     }
   );
 }
@@ -1425,6 +1609,8 @@ function WindowLayout({
   children,
   windowName,
   navbarChildren,
+  navbarClassName,
+  className,
   winId,
   defaultDock = "default",
   style
@@ -1432,11 +1618,10 @@ function WindowLayout({
   const { wsElement, wsRect, isBelowBreakPoint } = useWorkspaceState();
   const windowRef = useRef2(null);
   const {
+    setWinElement,
     windowId,
     zIndex,
     isActive,
-    setWinElement,
-    resetFlag,
     winVisualState,
     isWindowClosed,
     winCoord,
@@ -1445,15 +1630,11 @@ function WindowLayout({
   } = windowRegistry[winId]();
   useEffect4(() => {
     setWinElement(windowRef.current);
-  }, [setWinElement, windowRef.current]);
+  }, [setWinElement]);
   useEffect4(() => {
-    if (isBelowBreakPoint) {
-      dockApi.maximizeWindow(winId);
-    } else {
-      dockingRoutes[defaultDock](winId);
-    }
-  }, [wsElement, resetFlag]);
-  const dockingRoutes = {
+    dockingResolver[defaultDock](winId);
+  }, [wsElement]);
+  const dockingResolver = {
     right: dockApi.dockWindowRight,
     left: dockApi.dockWindowLeft,
     full: dockApi.maximizeWindow,
@@ -1494,14 +1675,14 @@ function WindowLayout({
       {
         id: windowId,
         ref: windowRef,
-        className: `fixed bg-white shadow-lg border border-zinc-600 rounded-sm overflow-hidden`,
+        className: `fixed overflow-hidden ${className ? className : "bg-white shadow-lg border border-zinc-600 rounded-sm"} `,
         onPointerDown: () => focusApi.bringWindowToFocus(windowId),
         style: {
           backgroundColor: style?.windowBackgroundColor,
-          top: `${winCoord.pointY}px`,
-          left: `${winCoord.pointX}px`,
-          width: `${winWidth}px`,
-          height: `${winHeight}px`,
+          top: isBelowBreakPoint ? wsRect.top : `${winCoord.pointY}px`,
+          left: isBelowBreakPoint ? wsRect.left : `${winCoord.pointX}px`,
+          width: isBelowBreakPoint ? wsRect.innerWidth : `${winWidth}px`,
+          height: isBelowBreakPoint ? wsRect.innerHeight : `${winHeight}px`,
           zIndex: `${zIndex}`,
           /* MINIMIZE LOGIC */
           transition: "transform 0.2s ease-in-out, opacity 0.3s ease-in-out",
@@ -1516,9 +1697,9 @@ function WindowLayout({
               style: {
                 backgroundColor: style?.navBackgroundColor
               },
-              className: `
-            h-[32px] w-full flex items-center bg-neutral-800
-            ${isActive ? "brightness-100 opacity-100" : "brightness-75 opacity-80"}`,
+              className: `h-[32px] w-full flex items-center
+            ${navbarClassName ? navbarClassName : `bg-neutral-800 ${isActive ? "brightness-100" : "brightness-150"}`} 
+          `,
               children: [
                 /* @__PURE__ */ jsx8("div", { className: "shrink h-8 px-2 text-white flex items-center text-sm truncate min-w-0", children: windowName }),
                 /* @__PURE__ */ jsx8("div", { className: "h-8 px-2 text-white flex items-center text-sm truncate min-w-0", children: navbarChildren }),
@@ -1528,8 +1709,8 @@ function WindowLayout({
               ]
             }
           ),
-          /* @__PURE__ */ jsx8(ResizingControls, { winId }),
-          /* @__PURE__ */ jsx8("div", { className: `relative w-full h-[calc(100%-32px)] overflow-auto`, children })
+          !isBelowBreakPoint && /* @__PURE__ */ jsx8(ResizingControls, { winId }),
+          /* @__PURE__ */ jsx8("div", { className: `relative w-full h-[calc(100%-32px)] overflow-auto select-text`, children })
         ]
       }
     ),
@@ -1562,7 +1743,8 @@ function WindowButton({
       onClick: handleOpenCloseWin,
       className: `
         ${className} 
-        ${isWindowClosed ? isClosedClassName : isActive ? isActiveClassName : isOpenClassName}`,
+        ${isWindowClosed ? isClosedClassName : isActive ? isActiveClassName : isOpenClassName}
+      `,
       children
     }
   );
@@ -1570,25 +1752,24 @@ function WindowButton({
 
 // src/window-manager/registration/window-store-factory.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-var defaultMinWidth = 232;
-var defaultMinHeight = 128;
+var defaultMinWidth = 256;
+var defaultMinHeight = 64;
 var createWindowStore = () => {
   const zIndexAtLaunch = Object.keys(windowRegistry).length + 1;
   const windowInstanceId = `react-dynamic-window-instance${Object.keys(windowRegistry).length}`;
-  const storeInstance = create3((set, get) => ({
+  const storeInstance = create2((set) => ({
     setWinElement: (ref) => set({ winElement: ref }),
     winElement: void 0,
     windowId: windowInstanceId,
-    resetFlag: false,
     zIndex: zIndexAtLaunch,
     winCoord: { pointX: 40, pointY: 40 },
+    winWidth: defaultMinWidth,
+    winHeight: defaultMinHeight,
     winVisualState: "demaximized",
     isActive: false,
     isDragging: false,
     isWindowClosed: true,
     resizeAction: false,
-    winWidth: defaultMinWidth,
-    winHeight: defaultMinHeight,
     WIN_MIN_WIDTH: defaultMinWidth,
     WIN_MIN_HEIGHT: defaultMinHeight
   }));