@gustavolmo/react-window-manager 0.3.1 → 0.4.1

package/dist/index.js

@@ -1,104 +1,357 @@
-// src/window-manager/registration/window-store-factory.tsx
-import { create as create3 } from "zustand";
+// src/window-manager/registration/window-registry.ts
+var windowRegistry = {};
 
-// src/window-manager/internal/features/window-layout.tsx
-import { useEffect as useEffect3, useRef } from "react";
+// src/window-manager/internal/features/workspace/workspace-state.ts
+import { create } from "zustand";
+var useWorkspaceState = create((set, get) => ({
+  wsElement: null,
+  setWsElement: (el) => set({ wsElement: el }),
+  isGridEnabled: true,
+  isDockPannelEnabled: true,
+  responsiveBreak: "sm",
+  isBelowBreakPoint: false,
+  activeWindowId: "react-dynamic-window-instance0",
+  wsRect: {
+    top: 0,
+    left: 0,
+    innerHeight: 0,
+    innerWidth: 0,
+    bottom: 0,
+    right: 0,
+    centerX: 0,
+    centerY: 0
+  }
+}));
 
-// src/window-manager/internal/assets/svg-win-icons.tsx
-import { jsx } from "react/jsx-runtime";
-function IconWinMaximize({ color }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      width: 24,
-      height: 24,
-      strokeWidth: 1.5,
-      stroke: color ? color : "#cccccc",
-      color: color ? color : "#cccccc",
-      className: "size-6",
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          d: "M5.25 7.5A2.25 2.25 0 0 1 7.5 5.25h9a2.25 2.25 0 0 1 2.25 2.25v9a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25v-9Z"
+// src/window-manager/internal/runtime/dock-resolver/dock-commands.ts
+var dockCommandResolver = {
+  DOCK_WINDOW_RIGHT: (targetWinId, wsRect) => {
+    return [
+      {
+        winId: targetWinId,
+        patch: {
+          winCoord: { pointX: wsRect.centerX, pointY: wsRect.top },
+          winWidth: wsRect.innerWidth / 2,
+          winHeight: wsRect.innerHeight,
+          winVisualState: "demaximized",
+          isDragging: false
         }
-      )
-    }
-  );
-}
-function IconWinDemaximize({ color }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      width: 24,
-      height: 24,
-      strokeWidth: 1.5,
-      stroke: color ? color : "#cccccc",
-      color: color ? color : "#cccccc",
-      className: "size-6",
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          d: "M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"
+      }
+    ];
+  },
+  DOCK_WINDOW_LEFT: (targetWinId, wsRect) => {
+    return [
+      {
+        winId: targetWinId,
+        patch: {
+          winCoord: { pointX: wsRect.left, pointY: wsRect.top },
+          winWidth: wsRect.innerWidth / 2,
+          winHeight: wsRect.innerHeight,
+          winVisualState: "demaximized",
+          isDragging: false
         }
-      )
-    }
-  );
-}
-function IconWinMinimize({ color }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      width: 24,
-      height: 24,
-      strokeWidth: 1.5,
-      stroke: color ? color : "#cccccc",
-      color: color ? color : "#cccccc",
-      className: "size-6",
-      children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18 18 6M6 6l12 12" })
-    }
-  );
-}
+      }
+    ];
+  },
+  DOCK_WINDOW_TOP: (targetWinId, wsRect) => {
+    return [
+      {
+        winId: targetWinId,
+        patch: {
+          winCoord: { pointX: wsRect.left, pointY: wsRect.top },
+          winWidth: wsRect.innerWidth,
+          winHeight: wsRect.innerHeight / 2,
+          winVisualState: "demaximized",
+          isDragging: false
+        }
+      }
+    ];
+  },
+  DOCK_WINDOW_BOTTOM: (targetWinId, wsRect) => {
+    return [
+      {
+        winId: targetWinId,
+        patch: {
+          winCoord: { pointX: wsRect.left, pointY: wsRect.centerY },
+          winWidth: wsRect.innerWidth,
+          winHeight: wsRect.innerHeight / 2,
+          winVisualState: "demaximized",
+          isDragging: false
+        }
+      }
+    ];
+  },
+  DOCK_WINDOW_BOTTOM_RIGHT: (targetWinId, wsRect) => {
+    return [
+      {
+        winId: targetWinId,
+        patch: {
+          winCoord: {
+            pointX: wsRect.centerX,
+            pointY: wsRect.centerY
+          },
+          winWidth: wsRect.innerWidth / 2,
+          winHeight: wsRect.innerHeight / 2,
+          winVisualState: "demaximized",
+          isDragging: false
+        }
+      }
+    ];
+  },
+  DOCK_WINDOW_TOP_RIGHT: (targetWinId, wsRect) => {
+    return [
+      {
+        winId: targetWinId,
+        patch: {
+          winCoord: { pointX: wsRect.centerX, pointY: wsRect.top },
+          winWidth: wsRect.innerWidth / 2,
+          winHeight: wsRect.innerHeight / 2,
+          winVisualState: "demaximized",
+          isDragging: false
+        }
+      }
+    ];
+  },
+  DOCK_WINDOW_BOTTOM_LEFT: (targetWinId, wsRect) => {
+    return [
+      {
+        winId: targetWinId,
+        patch: {
+          winCoord: { pointX: wsRect.left, pointY: wsRect.centerY },
+          winWidth: wsRect.innerWidth / 2,
+          winHeight: wsRect.innerHeight / 2,
+          winVisualState: "demaximized",
+          isDragging: false
+        }
+      }
+    ];
+  },
+  DOCK_WINDOW_TOP_LEFT: (targetWinId, wsRect) => {
+    return [
+      {
+        winId: targetWinId,
+        patch: {
+          winCoord: { pointX: wsRect.left, pointY: wsRect.top },
+          winWidth: wsRect.innerWidth / 2,
+          winHeight: wsRect.innerHeight / 2,
+          winVisualState: "demaximized",
+          isDragging: false
+        }
+      }
+    ];
+  },
+  MAXIMIZE_WINDOW: (targetWinId, wsRect) => {
+    return [
+      {
+        winId: targetWinId,
+        patch: {
+          winCoord: { pointX: wsRect.left, pointY: wsRect.top },
+          winHeight: wsRect.innerHeight,
+          winWidth: wsRect.innerWidth,
+          winVisualState: "maximized",
+          isDragging: false
+        }
+      }
+    ];
+  },
+  DEMAXIMIZE_WINDOW: (targetWinId, wsRect) => {
+    return [
+      {
+        winId: targetWinId,
+        patch: {
+          winCoord: { pointX: wsRect.left + 16, pointY: wsRect.top + 16 },
+          winWidth: wsRect.innerWidth * 0.95,
+          winHeight: wsRect.innerHeight * 0.75,
+          winVisualState: "demaximized",
+          isDragging: false
+        }
+      }
+    ];
+  }
+};
+var getDockDependencies = () => {
+  const { wsRect } = useWorkspaceState.getState();
+  return { wsRect };
+};
 
 // src/window-manager/internal/features/cursor/cursor-state.ts
-import { create } from "zustand";
-var useCursorState = create((set) => ({
+import { create as create2 } from "zustand";
+var useCursorState = create2((set) => ({
   x: 10,
   y: 10,
-  setX: (newX) => set({ x: newX }),
-  setY: (newY) => set({ y: newY })
+  setXY: (x, y) => set({ x, y })
 }));
 
-// src/window-manager/internal/features/resizing/resizing-controls.tsx
-import { useEffect } from "react";
+// src/window-manager/internal/runtime/drag-resolver/drag-loop.ts
+var rafDragLoopResolver = {
+  LOOP_DRAG: (targetWinId, commit) => {
+    const { x, y } = useCursorState.getState();
+    const { winCoord, isDragging, windowId } = windowRegistry[targetWinId].getState();
+    if (!isDragging)
+      throw new Error(`LOOP_DRAG called with isDragging false for winId: ${windowId}`);
+    const pointerOffset = {
+      left: x - winCoord.pointX,
+      top: y - winCoord.pointY
+    };
+    requestAnimationFrame(() => dragLoop(targetWinId, pointerOffset, commit));
+  }
+};
+var dragLoop = (targetWinId, pointerOffset, commit) => {
+  const { winCoord, isDragging } = windowRegistry[targetWinId].getState();
+  const { wsRect } = useWorkspaceState.getState();
+  const { x, y } = useCursorState.getState();
+  if (!isDragging)
+    return;
+  let adjustedX = Math.round(x - pointerOffset.left);
+  if (x > wsRect.right || x < wsRect.left)
+    adjustedX = winCoord.pointX;
+  let adjustedY = Math.round(y - pointerOffset.top);
+  if (y > wsRect.bottom || y < wsRect.top)
+    adjustedY = winCoord.pointY;
+  if (adjustedX !== winCoord.pointX || adjustedY !== winCoord.pointY) {
+    commit([
+      {
+        winId: targetWinId,
+        patch: { winCoord: { pointX: adjustedX, pointY: adjustedY } }
+      }
+    ]);
+  }
+  requestAnimationFrame(() => dragLoop(targetWinId, pointerOffset, commit));
+};
 
-// src/window-manager/internal/features/workspace/workspace-state.ts
-import { create as create2 } from "zustand";
-var useWorkspaceState = create2((set) => ({
-  ref: null,
-  setRef: (newRef) => set({ ref: newRef }),
-  activeWindowId: "react-dynamic-window-instance0",
-  setActiveWindowId: (newId) => set({ activeWindowId: newId }),
-  responsiveBreak: "sm",
-  setResponsiveBreak: (breakPoint) => set({ responsiveBreak: breakPoint })
-}));
+// src/window-manager/internal/runtime/drag-resolver/drag-commands.ts
+var dragCommandResolver = {
+  ENABLE_DRAG: (targetWinId) => {
+    const { wsRect } = useWorkspaceState.getState();
+    const { winVisualState } = windowRegistry[targetWinId].getState();
+    const patch = winVisualState === "maximized" ? {
+      winCoord: { pointX: wsRect.left + 16, pointY: wsRect.top + 4 },
+      winWidth: wsRect.innerWidth * 0.95,
+      winHeight: wsRect.innerHeight * 0.75,
+      winVisualState: "demaximized",
+      isDragging: true
+    } : { isDragging: true };
+    return [
+      {
+        winId: targetWinId,
+        patch
+      }
+    ];
+  },
+  DISABLE_DRAG: (targetWinId) => {
+    return [
+      {
+        winId: targetWinId,
+        patch: {
+          isDragging: false
+        }
+      }
+    ];
+  }
+};
+var isDragAllowed = () => {
+  return !useWorkspaceState.getState().isBelowBreakPoint;
+};
 
-// src/window-manager/internal/features/workspace/workspace-api.ts
-var wsApi = {
-  getRect: () => {
-    const rect = useWorkspaceState.getState().ref?.getBoundingClientRect();
+// src/window-manager/internal/runtime/focus-resolver/focus-commands.ts
+var focusCommandResolver = {
+  FOCUS_WINDOW: (targetWinId) => {
+    const targetWin = windowRegistry[targetWinId].getState();
+    if (targetWin.isActive && !targetWin.isWindowClosed)
+      return { win: [], ws: {} };
+    const newStackOrderUpdate = [];
+    const workspaceUpdate = { activeWindowId: targetWinId };
+    for (const key of Object.keys(windowRegistry)) {
+      const otherWin = windowRegistry[key].getState();
+      if (otherWin.windowId === targetWin.windowId)
+        continue;
+      const adjustedIndex = otherWin.zIndex >= targetWin.zIndex ? otherWin.zIndex - 1 : otherWin.zIndex;
+      newStackOrderUpdate.push({
+        winId: otherWin.windowId,
+        patch: {
+          isActive: false,
+          zIndex: adjustedIndex
+        }
+      });
+    }
+    newStackOrderUpdate.push({
+      winId: targetWin.windowId,
+      patch: {
+        isWindowClosed: false,
+        isActive: true,
+        zIndex: newStackOrderUpdate.length + 1
+      }
+    });
+    return {
+      win: newStackOrderUpdate,
+      ws: workspaceUpdate
+    };
+  },
+  CLOSE_WINDOW_AND_REFOCUS: (targetWinId) => {
+    const isTargetWinClosed = windowRegistry[targetWinId].getState().isWindowClosed;
+    if (isTargetWinClosed)
+      return { win: [], ws: {} };
+    let prevIndex = 0;
+    let highestIndexWinId = void 0;
+    for (const key of Object.keys(windowRegistry)) {
+      const { zIndex, windowId, isWindowClosed } = windowRegistry[key].getState();
+      if (windowId === targetWinId)
+        continue;
+      if (isWindowClosed)
+        continue;
+      if (zIndex > prevIndex) {
+        prevIndex = zIndex;
+        highestIndexWinId = windowId;
+      }
+    }
+    return !highestIndexWinId ? {
+      ws: {},
+      win: [
+        {
+          winId: targetWinId,
+          patch: { isActive: false, isWindowClosed: true }
+        }
+      ]
+    } : {
+      ws: { activeWindowId: highestIndexWinId },
+      win: [
+        {
+          winId: highestIndexWinId,
+          patch: { isActive: true }
+        },
+        {
+          winId: targetWinId,
+          patch: { isActive: false, isWindowClosed: true }
+        }
+      ]
+    };
+  }
+};
+
+// 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: () => {
+    const rect = useWorkspaceState.getState().wsElement?.getBoundingClientRect();
     const top = rect?.top ?? 0;
     const left = rect?.left ?? 0;
     const innerHeight = rect?.height ?? 0;
@@ -107,22 +360,36 @@ var wsApi = {
     const right = left + innerWidth;
     const centerX = left + innerWidth / 2;
     const centerY = top + innerHeight / 2;
-    const wsWindow = {
-      top,
-      left,
-      innerHeight,
-      innerWidth,
-      bottom,
-      right,
-      centerX,
-      centerY
+    const breakPoint = useWorkspaceState.getState().responsiveBreak;
+    const isBelowBreakPoint = innerWidth < responsiveBreakInPx(breakPoint);
+    return {
+      isBelowBreakPoint,
+      wsRect: {
+        top,
+        left,
+        innerHeight,
+        innerWidth,
+        bottom,
+        right,
+        centerX,
+        centerY
+      }
     };
-    return wsWindow;
   },
-  isBelowBreakPoint: () => {
-    const wsRect = wsApi.getRect();
-    const breakPoint = useWorkspaceState.getState().responsiveBreak;
-    return wsRect.innerWidth < responsiveBreakInPx(breakPoint);
+  SET_WORKSPACE_FEATURES: (_, ctx) => {
+    if (ctx?.isGridEnabled === void 0 || ctx?.isDockPannelEnabled === void 0)
+      throw new Error(`SET_WORKSPACE_FEATURES called without a ctx value`);
+    return {
+      isGridEnabled: ctx.isGridEnabled,
+      isDockPannelEnabled: ctx.isDockPannelEnabled
+    };
+  },
+  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
+    };
   }
 };
 var responsiveBreakInPx = (breakPoint) => {
@@ -144,341 +411,948 @@ var responsiveBreakInPx = (breakPoint) => {
   }
 };
 
-// src/window-manager/internal/features/resizing/resizing-api.ts
-var resizeApi = {
-  stopAllDragAndResize: () => {
-    for (const key of Object.keys(windowRegistry)) {
-      windowRegistry[key].getState().isDragging = false;
-      windowRegistry[key].getState().resizeAction = false;
-    }
-  },
-  setResizeAction: (winId, action) => {
-    windowRegistry[winId].setState({ resizeAction: action });
+// src/window-manager/internal/runtime/resize-resolver/resize-commands.ts
+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`);
+    return [
+      {
+        winId: targetWinId,
+        patch: {
+          resizeAction: direction,
+          winVisualState: "demaximized"
+        }
+      }
+    ];
   },
-  dispatchResizeAction: (winId) => {
-    const ctx = getDependencies(winId);
-    if (!ctx.win.resizeAction)
-      return;
-    ctx.win.setWinVisualState("demaximized");
-    switch (ctx.win.resizeAction) {
-      case "s":
-        privateApi.resizeBottomWinHeight(ctx);
-        break;
-      case "n":
-        privateApi.resizeTopWinHeight(ctx);
-        break;
-      case "e":
-        privateApi.resizeRightWinWidth(ctx);
-        break;
-      case "w":
-        privateApi.resizeLeftWinWidth(ctx);
-        break;
-      case "se":
-        privateApi.resizeRightBottomWidthAndHeight(ctx);
-        break;
-      case "sw":
-        privateApi.resizeLeftBottomWidthAndHeight(ctx);
-        break;
-      case "ne":
-        privateApi.resizeRightTopWidthAndHeight(ctx);
-        break;
-      case "nw":
-        privateApi.resizeLeftTopWidthAndHeight(ctx);
-        break;
-    }
+  DISABLE_RESIZE: (_) => {
+    const patch = [];
+    for (const key of Object.keys(windowRegistry))
+      patch.push({
+        winId: key,
+        patch: {
+          resizeAction: false
+        }
+      });
+    return patch;
   }
 };
-var privateApi = {
-  resizeRightWinWidth: (resizeCtx) => {
-    const { wsRect, win, winBox, x, y } = resizeCtx;
-    if (!winBox)
+
+// src/window-manager/internal/runtime/resize-resolver/resize-loop.ts
+var rafResizeLoopResolver = {
+  LOOP_RESIZE: (targetWinId, commitCb) => {
+    const dep = getRafResizeDependencies(targetWinId);
+    const resizeDirection = dep.win.resizeAction;
+    if (!resizeDirection)
+      throw new Error(`LOOP_RESIZE called with resizeAction as false for winId: ${targetWinId}`);
+    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)
+    );
+  }
+};
+var resizer = {
+  e: (resizeDep, commit) => {
+    const { wsRect, win, winBox, x } = resizeDep;
+    if (!win.resizeAction)
       return;
-    const minWinWidth = x - winBox.left < win.WIN_MIN_WIDTH;
-    if (minWinWidth)
+    if (!winBox)
       return;
     const cursorOutOfBounds = x > wsRect.right || x < wsRect.left;
-    if (cursorOutOfBounds)
-      return;
+    const minWinWidth = x - winBox.left < win.WIN_MIN_WIDTH;
     const sizeDiff = x - winBox.right;
-    win.setWinWidth(win.winWidth + sizeDiff);
+    if (!minWinWidth && !cursorOutOfBounds && sizeDiff !== 0) {
+      commit([
+        {
+          winId: win.windowId,
+          patch: { winWidth: Math.round(win.winWidth + sizeDiff) }
+        }
+      ]);
+    }
+    requestAnimationFrame(() => resizer.e(getRafResizeDependencies(win.windowId), commit));
   },
-  resizeLeftWinWidth: (resizeCtx) => {
-    const { wsRect, win, winBox, x, y } = resizeCtx;
+  w: (resizeDep, commit) => {
+    const { wsRect, win, winBox, x } = resizeDep;
+    if (!win.resizeAction)
+      return;
     if (!winBox)
       return;
     const minWinWidth = winBox.right - x <= win.WIN_MIN_WIDTH;
-    if (minWinWidth)
-      return;
     const cursorOutOfBounds = x > wsRect.right || x < wsRect.left;
-    if (cursorOutOfBounds)
-      return;
     const sizeDiff = winBox.left - x;
-    win.setWinWidth(win.winWidth + sizeDiff);
-    win.setWinCoord({ pointX: x, pointY: win.winCoord.pointY });
+    if (!minWinWidth && !cursorOutOfBounds && sizeDiff !== 0) {
+      commit([
+        {
+          winId: win.windowId,
+          patch: {
+            winWidth: Math.round(win.winWidth + sizeDiff),
+            winCoord: { pointX: x, pointY: win.winCoord.pointY }
+          }
+        }
+      ]);
+    }
+    requestAnimationFrame(() => resizer.w(getRafResizeDependencies(win.windowId), commit));
   },
-  resizeTopWinHeight: (resizeCtx) => {
-    const { wsRect, win, winBox, x, y } = resizeCtx;
+  n: (resizeDep, commit) => {
+    const { wsRect, win, winBox, y } = resizeDep;
+    if (!win.resizeAction)
+      return;
     if (!winBox)
       return;
     const minWinHeight = winBox.bottom - y <= win.WIN_MIN_HEIGHT;
-    if (minWinHeight)
-      return;
     const cursorOutOfBounds = y > wsRect.bottom || y < wsRect.top;
-    if (cursorOutOfBounds)
-      return;
     const sizeDiff = winBox.top - y;
-    win.setWinHeight(win.winHeight + sizeDiff);
-    win.setWinCoord({ pointX: win.winCoord.pointX, pointY: y });
+    if (!minWinHeight && !cursorOutOfBounds && sizeDiff !== 0) {
+      commit([
+        {
+          winId: win.windowId,
+          patch: {
+            winHeight: Math.round(win.winHeight + sizeDiff),
+            winCoord: { pointX: win.winCoord.pointX, pointY: y }
+          }
+        }
+      ]);
+    }
+    requestAnimationFrame(() => resizer.n(getRafResizeDependencies(win.windowId), commit));
   },
-  resizeBottomWinHeight: (resizeCtx) => {
-    const { wsRect, win, winBox, x, y } = resizeCtx;
+  s: (resizeDep, commit) => {
+    const { wsRect, win, winBox, y } = resizeDep;
+    if (!win.resizeAction)
+      return;
     if (!winBox)
       return;
     const minWinHeight = y - winBox.top < win.WIN_MIN_HEIGHT;
-    if (minWinHeight)
-      return;
     const cursorOutOfBounds = y > wsRect.bottom || y < wsRect.top;
-    if (cursorOutOfBounds)
-      return;
     const sizeDiff = y - winBox.bottom;
-    win.setWinHeight(win.winHeight + sizeDiff);
-  },
-  resizeRightBottomWidthAndHeight: (resizeCtx) => {
-    privateApi.resizeRightWinWidth(resizeCtx);
-    privateApi.resizeBottomWinHeight(resizeCtx);
-  },
-  resizeLeftBottomWidthAndHeight: (resizeCtx) => {
-    privateApi.resizeLeftWinWidth(resizeCtx);
-    privateApi.resizeBottomWinHeight(resizeCtx);
-  },
-  resizeRightTopWidthAndHeight: (resizeCtx) => {
-    privateApi.resizeRightWinWidth(resizeCtx);
-    privateApi.resizeTopWinHeight(resizeCtx);
+    if (!minWinHeight && !cursorOutOfBounds && sizeDiff !== 0) {
+      commit([
+        {
+          winId: win.windowId,
+          patch: {
+            winHeight: Math.round(win.winHeight + sizeDiff)
+          }
+        }
+      ]);
+    }
+    requestAnimationFrame(() => resizer.s(getRafResizeDependencies(win.windowId), commit));
   },
-  /**
-   * @note this specific case needs it's own logic instead of simply calling
-   * resizeLeftWinWidth & resizeTopWinHeight. Since both manipulate
-   * winWidth, winHeight and winCoord, one's logic will override the other
-   */
-  resizeLeftTopWidthAndHeight: (resizeCtx) => {
-    const { wsRect, win, winBox, x, y } = resizeCtx;
+  nw: (resizeDep, commit) => {
+    const { wsRect, win, winBox, x, y } = resizeDep;
+    if (!win.resizeAction)
+      return;
     if (!winBox)
       return;
     const cursorOutOfBoundsY = y > wsRect.bottom || y < wsRect.top;
     const cursorOutOfBoundsX = x > wsRect.right || x < wsRect.left;
-    if (cursorOutOfBoundsY || cursorOutOfBoundsX)
-      return;
+    const isCursorOutOfBounds = cursorOutOfBoundsY || cursorOutOfBoundsX;
+    if (isCursorOutOfBounds) {
+      requestAnimationFrame(() => resizer.nw(getRafResizeDependencies(win.windowId), commit));
+    }
     const minWinHeight = winBox.bottom - y <= win.WIN_MIN_HEIGHT;
     const minWinWidth = winBox.right - x <= win.WIN_MIN_WIDTH;
-    win.setWinCoord({
-      pointX: minWinWidth ? win.winCoord.pointX : x,
-      pointY: minWinHeight ? win.winCoord.pointY : y
+    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
+          }
+        }
+      });
+    }
+    if (!minWinHeight && sizeDiffY !== 0) {
+      stagedChagnes.push({
+        winId: win.windowId,
+        patch: { winHeight: Math.round(win.winHeight + sizeDiffY) }
+      });
+    }
+    if (!minWinWidth && sizeDiffX !== 0) {
+      stagedChagnes.push({
+        winId: win.windowId,
+        patch: { winWidth: Math.round(win.winWidth + sizeDiffX) }
+      });
+    }
+    commit(stagedChagnes);
+    requestAnimationFrame(() => resizer.nw(getRafResizeDependencies(win.windowId), commit));
+  },
+  se: (resizeDep, commit) => {
+    resizer.e(resizeDep, commit);
+    resizer.s(resizeDep, commit);
+  },
+  sw: (resizeDep, commit) => {
+    resizer.w(resizeDep, commit);
+    resizer.s(resizeDep, commit);
+  },
+  ne: (resizeDep, commit) => {
+    resizer.e(resizeDep, commit);
+    resizer.n(resizeDep, commit);
+  }
+};
+var getRafResizeDependencies = (winId) => {
+  const win = windowRegistry[winId].getState();
+  const winBox = win.winElement?.getBoundingClientRect();
+  const wsRect = useWorkspaceState.getState().wsRect;
+  const { x, y } = useCursorState.getState();
+  return { wsRect, win, winBox, x, y };
+};
+
+// src/window-manager/internal/runtime/rwm-runtime.ts
+var rwmRuntime = {
+  dispatch: ({ subsystem, cmd, targetWinId, ctx }) => {
+    switch (subsystem) {
+      case "WORKSPACE": {
+        const stagedChanges = workspaceCommandResolver[cmd](targetWinId, ctx);
+        commitToWorkspace(stagedChanges);
+        break;
+      }
+      case "DRAG": {
+        if (!isDragAllowed())
+          return;
+        const stagedChanges = dragCommandResolver[cmd](targetWinId);
+        commitToWindow(stagedChanges);
+        break;
+      }
+      case "DOCK": {
+        const { wsRect } = getDockDependencies();
+        const stagedChanges = dockCommandResolver[cmd](targetWinId, wsRect);
+        commitToWindow(stagedChanges);
+        break;
+      }
+      case "RESIZE": {
+        const stagedChanges = resizeCommandResolver[cmd](targetWinId, ctx);
+        commitToWindow(stagedChanges);
+        break;
+      }
+      case "STACK": {
+        const stagedChanges = stackCommandResolver[cmd](targetWinId);
+        commitToWindow(stagedChanges);
+        break;
+      }
+      case "FOCUS": {
+        const stagedChanges = focusCommandResolver[cmd](targetWinId);
+        commitBatch(stagedChanges);
+        break;
+      }
+    }
+  }
+};
+var rafRuntime = {
+  dispatch: ({ subsystem, cmd, targetWinId }) => {
+    switch (subsystem) {
+      case "RAF_DRAG": {
+        if (!isDragAllowed())
+          return;
+        rafDragLoopResolver[cmd](targetWinId, commitToWindow);
+        break;
+      }
+      case "RAF_RESIZE": {
+        rafResizeLoopResolver[cmd](targetWinId, commitToWindow);
+        break;
+      }
+    }
+  }
+};
+function commitBatch({ win, ws }) {
+  commitToWorkspace(ws);
+  commitToWindow(win);
+}
+function commitToWindow(patchStack) {
+  patchStack.forEach(({ winId, patch }) => {
+    windowRegistry[winId].setState(patch);
+  });
+}
+function commitToWorkspace(patch) {
+  if (patch) {
+    useWorkspaceState.setState(patch);
+  }
+}
+
+// src/window-manager/internal/features/docking/docking-api.ts
+var dockApi = {
+  dockWindowRight: (winId) => rwmRuntime.dispatch({
+    targetWinId: winId,
+    subsystem: "DOCK",
+    cmd: "DOCK_WINDOW_RIGHT"
+  }),
+  dockWindowLeft: (winId) => rwmRuntime.dispatch({
+    targetWinId: winId,
+    subsystem: "DOCK",
+    cmd: "DOCK_WINDOW_LEFT"
+  }),
+  dockWindowTop: (winId) => rwmRuntime.dispatch({
+    targetWinId: winId,
+    subsystem: "DOCK",
+    cmd: "DOCK_WINDOW_TOP"
+  }),
+  dockWindowBottom: (winId) => rwmRuntime.dispatch({
+    targetWinId: winId,
+    subsystem: "DOCK",
+    cmd: "DOCK_WINDOW_BOTTOM"
+  }),
+  dockWindowBottomRight: (winId) => rwmRuntime.dispatch({
+    targetWinId: winId,
+    subsystem: "DOCK",
+    cmd: "DOCK_WINDOW_BOTTOM_RIGHT"
+  }),
+  dockWindowTopRight: (winId) => rwmRuntime.dispatch({
+    targetWinId: winId,
+    subsystem: "DOCK",
+    cmd: "DOCK_WINDOW_TOP_RIGHT"
+  }),
+  dockWindowBottomLeft: (winId) => rwmRuntime.dispatch({
+    targetWinId: winId,
+    subsystem: "DOCK",
+    cmd: "DOCK_WINDOW_BOTTOM_LEFT"
+  }),
+  dockWindowTopLeft: (winId) => rwmRuntime.dispatch({
+    targetWinId: winId,
+    subsystem: "DOCK",
+    cmd: "DOCK_WINDOW_TOP_LEFT"
+  }),
+  maximizeWindow: (winId) => rwmRuntime.dispatch({
+    targetWinId: winId,
+    subsystem: "DOCK",
+    cmd: "MAXIMIZE_WINDOW"
+  }),
+  demaximizeWindow: (winId) => rwmRuntime.dispatch({
+    targetWinId: winId,
+    subsystem: "DOCK",
+    cmd: "DEMAXIMIZE_WINDOW"
+  })
+};
+
+// src/window-manager/internal/features/focus/focus-api.ts
+var focusApi = {
+  bringWindowToFocus: (targetId) => {
+    rwmRuntime.dispatch({
+      targetWinId: targetId,
+      subsystem: "FOCUS",
+      cmd: "FOCUS_WINDOW"
+    });
+  },
+  closeWindowAndRefocus: (targetId) => {
+    rwmRuntime.dispatch({
+      targetWinId: targetId,
+      subsystem: "FOCUS",
+      cmd: "CLOSE_WINDOW_AND_REFOCUS"
+    });
+  }
+};
+
+// 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 = {
+  /**
+   * Always relative to the WorkspaceLayout dimensions. Use `wsApi.setWsResponsiveBreak` to modify the value
+   * @default 'sm'
+   * @param sm uses mobile format at 640px
+   * @param md uses mobile format at 768px
+   * @param lg uses mobile format at 1024px
+   * @param xl uses mobile format at 1280px
+   * @param never never uses mobile format
+   * @param always always uses mobile format
+   * @param number set custom break point value in px */
+  setWsResponsiveBreak: (breakPoint) => {
+    rwmRuntime.dispatch({
+      subsystem: "WORKSPACE",
+      cmd: "SET_RESPONSIVE_BREAK",
+      ctx: { responsiveBreak: breakPoint }
+    });
+  },
+  setWsFeatures: ({ isDockPannelEnabled = true, isGridEnabled = true }) => {
+    rwmRuntime.dispatch({
+      subsystem: "WORKSPACE",
+      cmd: "SET_WORKSPACE_FEATURES",
+      ctx: { isDockPannelEnabled, isGridEnabled }
+    });
+  },
+  updateWsRect: () => {
+    rwmRuntime.dispatch({ subsystem: "WORKSPACE", cmd: "UPDATE_WORKSPACE_RECT" });
+  }
+};
+
+// src/window-manager/rwm.ts
+var { updateWsRect, ...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.
+   *
+   * @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,
+  /**
+   * @about
+   * use the syntax `const { <someState> } = windowRegistry[<winId>]()` inside a component to access
+   * the zustand hook or `windowRegistry[<winId>].getState()` to get the current state of a window anywhere
+   *
+   * @note
+   * Each hook also exposes the `setState()` method, however, this is highly discouraged. Prefer calling
+   * the exposed apis in rwm for state mutation.
+   */
+  windowRegistry
+};
+var rwm_default = rwm;
+
+// src/window-manager/workspace-layout.tsx
+import { useEffect as useEffect3, useRef } from "react";
+
+// src/window-manager/internal/features/docking/docking-controls.tsx
+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 { 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: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "hover:bg-zinc-300 border border-zinc-500 bg-zinc-600 w-10 h-6 rounded-sm",
+          onPointerUp: () => dockApi.dockWindowTopLeft(activeWindowId)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "hover:bg-zinc-300 border border-zinc-500 bg-zinc-600 w-10 h-6 rounded-sm",
+          onPointerUp: () => dockApi.dockWindowBottomLeft(activeWindowId)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center gap-0.5", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "hover:bg-zinc-300 border border-zinc-500 bg-zinc-600 w-10 h-6 rounded-sm",
+          onPointerUp: () => dockApi.dockWindowTopRight(activeWindowId)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "hover:bg-zinc-300 border border-zinc-500 bg-zinc-600 w-10 h-6 rounded-sm",
+          onPointerUp: () => dockApi.dockWindowBottomRight(activeWindowId)
+        }
+      )
+    ] })
+  ] });
+  const sideDideControl = /* @__PURE__ */ jsxs("div", { className: `flex shrink-0 items-center gap-0.5`, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "hover:bg-zinc-300 border border-zinc-500 bg-zinc-600 w-8 h-12 rounded-sm",
+        onPointerUp: () => dockApi.dockWindowLeft(activeWindowId)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "hover:bg-zinc-300 border border-zinc-500 bg-zinc-600 w-8 h-12 rounded-sm",
+        onPointerUp: () => dockApi.dockWindowRight(activeWindowId)
+      }
+    )
+  ] });
+  const horizontalDockControl = /* @__PURE__ */ jsxs("div", { className: `flex flex-col shrink-0 items-center gap-0.5`, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "hover:bg-zinc-300 border border-zinc-500 bg-zinc-600 w-14 h-6 rounded-sm",
+        onPointerUp: () => dockApi.dockWindowTop(activeWindowId)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "hover:bg-zinc-300 border border-zinc-500 bg-zinc-600 w-14 h-6 rounded-sm",
+        onPointerUp: () => dockApi.dockWindowBottom(activeWindowId)
+      }
+    )
+  ] });
+  const windowDockPannel = /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "pointer-events-auto px-4 pb-3",
+      onPointerOver: () => setIsHovering(true),
+      onPointerLeave: () => setIsHovering(false),
+      children: /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: `
+        flex w-fit border border-zinc-600 border-t-0 rounded-b-md bg-zinc-800 
+        overflow-hidden px-8 gap-4 h-full py-4 
+        `,
+          children: [
+            cornerDockControl,
+            horizontalDockControl,
+            sideDideControl
+          ]
+        }
+      )
+    }
+  );
+  if (isBelowBreakPoint)
+    return;
+  if (!isDockPannelEnabled)
+    return;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `
+        ${isDragging ? isHovering ? "top-0 opacity-50" : "top-[-68px] opacity-80" : "top-[-104px] opacity-0"} 
+        transition-all duration-500
+        absolute z-50 flex items-center justify-center 
+        w-full mx-auto pointer-events-none`,
+      children: windowDockPannel
+    }
+  ) });
+}
+
+// src/window-manager/internal/features/resizing/resizing-api.ts
+var resizeApi = {
+  startResize: (winId, direction) => {
+    rwmRuntime.dispatch({
+      targetWinId: winId,
+      subsystem: "RESIZE",
+      cmd: "ENABLE_RESIZE",
+      ctx: direction
+    });
+    rafRuntime.dispatch({ targetWinId: winId, subsystem: "RAF_RESIZE", cmd: "LOOP_RESIZE" });
+  },
+  stopResize: (winId) => {
+    rwmRuntime.dispatch({
+      targetWinId: winId,
+      subsystem: "RESIZE",
+      cmd: "DISABLE_RESIZE",
+      ctx: false
+    });
+  }
+};
+
+// src/window-manager/internal/features/cursor/cursor-move-listener.tsx
+import { useEffect } from "react";
+import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+function CursorMoveListener() {
+  const { setXY } = useCursorState();
+  useEffect(() => {
+    const handlePointerMove = (e) => {
+      e.preventDefault();
+      setXY(e.clientX, e.clientY);
+    };
+    window.addEventListener("pointermove", handlePointerMove);
+    return () => window.removeEventListener("pointermove", handlePointerMove);
+  }, [setXY]);
+  return /* @__PURE__ */ jsx2(Fragment2, {});
+}
+
+// src/window-manager/internal/features/workspace/workspace-resize-listener.tsx
+import { useEffect as useEffect2 } from "react";
+import { Fragment as Fragment3, jsx as jsx3 } from "react/jsx-runtime";
+function WorkspaceResizeListener() {
+  const { wsElement } = useWorkspaceState();
+  useEffect2(() => {
+    if (!wsElement)
+      return;
+    const onResize = () => {
+      wsApi.updateWsRect();
+      stackApi.resetStack();
+    };
+    onResize();
+    const observer = new ResizeObserver(onResize);
+    observer.observe(wsElement);
+    return () => observer.disconnect();
+  }, [wsElement]);
+  return /* @__PURE__ */ jsx3(Fragment3, {});
+}
+
+// src/window-manager/internal/features/drag/drag-api.ts
+var dragApi = {
+  startDrag: (targetWinId) => {
+    rwmRuntime.dispatch({
+      targetWinId,
+      subsystem: "DRAG",
+      cmd: "ENABLE_DRAG"
+    });
+    rafRuntime.dispatch({ targetWinId, subsystem: "RAF_DRAG", cmd: "LOOP_DRAG" });
+  },
+  stopDrag: (targetWinId) => {
+    rwmRuntime.dispatch({
+      targetWinId,
+      subsystem: "DRAG",
+      cmd: "DISABLE_DRAG"
     });
-    if (!minWinHeight) {
-      const sizeDiffY = winBox.top - y;
-      win.setWinHeight(win.winHeight + sizeDiffY);
+  }
+};
+
+// src/window-manager/workspace-layout.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function WorkspaceLayout({ children, className }) {
+  const { setWsElement, wsElement, isBelowBreakPoint, activeWindowId } = useWorkspaceState();
+  const workspaceRef = useRef(null);
+  useEffect3(() => {
+    if (!workspaceRef.current)
+      return;
+    setWsElement(workspaceRef.current);
+  }, [wsElement]);
+  const disabledDragAndResize = () => {
+    dragApi.stopDrag(activeWindowId);
+    resizeApi.stopResize(activeWindowId);
+  };
+  return /* @__PURE__ */ jsxs2(
+    "section",
+    {
+      id: "rwm-workspace-layout",
+      ref: workspaceRef,
+      onPointerLeave: disabledDragAndResize,
+      onPointerUp: disabledDragAndResize,
+      className: className ? className : "fixed overflow-hidden h-full w-full touch-none -z-50",
+      children: [
+        /* @__PURE__ */ jsx4(WorkspaceResizeListener, {}),
+        /* @__PURE__ */ jsx4(CursorMoveListener, {}),
+        /* @__PURE__ */ jsxs2("div", { className: " w-full h-full relative overflow-hidden", children: [
+          !isBelowBreakPoint && /* @__PURE__ */ jsx4(DockingControls, {}),
+          children
+        ] })
+      ]
+    }
+  );
+}
+
+// src/window-manager/registration/window-store-factory.tsx
+import { create as create3 } from "zustand";
+
+// src/window-manager/internal/features/window-layout.tsx
+import { useEffect as useEffect4, useRef as useRef2 } from "react";
+
+// src/window-manager/internal/assets/svg-win-icons.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function IconWinMaximize({ color }) {
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      width: 24,
+      height: 24,
+      strokeWidth: 1.5,
+      stroke: color ? color : "#cccccc",
+      color: color ? color : "#cccccc",
+      className: "size-6",
+      children: /* @__PURE__ */ jsx5(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M5.25 7.5A2.25 2.25 0 0 1 7.5 5.25h9a2.25 2.25 0 0 1 2.25 2.25v9a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25v-9Z"
+        }
+      )
+    }
+  );
+}
+function IconWinDemaximize({ color }) {
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      width: 24,
+      height: 24,
+      strokeWidth: 1.5,
+      stroke: color ? color : "#cccccc",
+      color: color ? color : "#cccccc",
+      className: "size-6",
+      children: /* @__PURE__ */ jsx5(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"
+        }
+      )
     }
-    if (!minWinWidth) {
-      const sizeDiffX = winBox.left - x;
-      win.setWinWidth(win.winWidth + sizeDiffX);
+  );
+}
+function IconWinMinimize({ color }) {
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      width: 24,
+      height: 24,
+      strokeWidth: 1.5,
+      stroke: color ? color : "#cccccc",
+      color: color ? color : "#cccccc",
+      className: "size-6",
+      children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18 18 6M6 6l12 12" })
     }
-  }
-};
-var getDependencies = (winId) => {
-  const wsRect = wsApi.getRect();
-  const win = windowRegistry[winId].getState();
-  const winBox = win.self?.current?.getBoundingClientRect();
-  const { x, y } = useCursorState.getState();
-  return { wsRect, win, winBox, x, y };
-};
+  );
+}
 
-// src/window-manager/internal/features/stack/stack-api.ts
-var stackApi = {
-  bringTargetWindowToFront: (targetId) => {
-    const targetWindow = windowRegistry[targetId].getState();
-    for (const key of Object.keys(windowRegistry)) {
-      const window2 = windowRegistry[key].getState();
-      if (window2.windowId === targetWindow.windowId) {
-        continue;
-      }
-      window2.setIsActive(false);
-      if (window2.zIndex >= targetWindow.zIndex) {
-        window2.setZIndex(window2.zIndex - 1);
-      }
-    }
-    targetWindow.setZIndex(Object.keys(windowRegistry).length);
-    targetWindow.setIsActive(true);
-  },
-  getOpenedWindowCount: () => {
-    let openWnidowCount = 0;
-    for (const key of Object.keys(windowRegistry))
-      if (!windowRegistry[key].getState().isWindowClosed)
-        openWnidowCount++;
-    return openWnidowCount;
-  },
-  resetStack: () => {
-    for (const key of Object.keys(windowRegistry)) {
-      windowRegistry[key].getState().reset();
-    }
+// src/window-manager/internal/features/grid/grid-orchestrator.ts
+var tolerance = 4;
+var gridOrchestrator = {
+  attachAdjacentGridBehavior: (winId) => {
+    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);
   }
 };
-
-// src/window-manager/internal/features/grid/grid-api.ts
-var gridApi = {
-  orchestrateGridResize: (winId) => orchestrationGridResize(winId)
-};
-var orchestrationGridResize = (winId) => {
-  const tolerance = 4;
-  const allowDistantResize = stackApi.getOpenedWindowCount() >= 3;
+var attachAdjacentGridBehavior = (winId, visited = /* @__PURE__ */ new Set()) => {
+  if (visited.has(winId))
+    return;
+  else
+    visited.add(winId);
   const thisWin = windowRegistry[winId].getState();
   const currentResize = thisWin.resizeAction;
   for (const key of Object.keys(windowRegistry)) {
     const remoteWin = windowRegistry[key].getState();
-    if (remoteWin.windowId === thisWin.windowId) {
+    if (remoteWin.windowId === thisWin.windowId)
       continue;
-    }
-    const thisWinStartY = thisWin.winCoord.pointY;
-    const thisWinEndY = thisWin.winCoord.pointY + thisWin.winHeight;
-    const remoteWinStartY = remoteWin.winCoord.pointY;
-    const remoteWinEndY = remoteWin.winCoord.pointY + remoteWin.winHeight;
-    const thisWinStartX = thisWin.winCoord.pointX;
-    const thisWinEndX = thisWin.winCoord.pointX + thisWin.winWidth;
-    const remoteWinStartX = remoteWin.winCoord.pointX;
-    const remoteWinEndX = remoteWin.winCoord.pointX + remoteWin.winWidth;
-    const isRemoteOutside = remoteWinEndY !== thisWinEndY || remoteWinEndX !== thisWinEndX || remoteWinStartY !== thisWinStartY || remoteWinStartX !== thisWinStartX;
+    if (remoteWin.isWindowClosed)
+      continue;
+    if (remoteWin.resizeAction)
+      continue;
+    if (visited.has(remoteWin.windowId))
+      continue;
+    const dependencies = buildDependencies(thisWin, remoteWin);
     if (currentResize === "e") {
-      const isEdgeAlignedOnXAxis = Math.abs(thisWinEndX - remoteWinStartX) <= tolerance;
-      const isOverlapOnYAxis = thisWinStartY <= remoteWinEndY && thisWinEndY >= remoteWinStartY;
-      const isEdgeResize = allowDistantResize ? isEdgeAlignedOnXAxis : isEdgeAlignedOnXAxis && isOverlapOnYAxis;
-      if (isEdgeResize) {
-        remoteWin.setResizeAction("w");
-      }
-      const isRemoteOnSameLane = Math.abs(thisWinEndX - remoteWinEndX) < tolerance && Math.abs(thisWinStartX - remoteWinStartX) < tolerance;
-      const isRemoteEdgeConnected = Math.abs(thisWinEndY - remoteWinStartY) < tolerance || Math.abs(thisWinStartY - remoteWinEndY) < tolerance;
-      const isStackResize = allowDistantResize ? isRemoteOnSameLane && isRemoteOutside : isRemoteOnSameLane && isRemoteEdgeConnected;
-      if (isStackResize) {
-        remoteWin.setResizeAction("e");
-      }
+      const isRemoteConneted = resizeCase.whenDraggingEast(dependencies);
+      if (isRemoteConneted)
+        attachAdjacentGridBehavior(remoteWin.windowId, visited);
     }
     if (currentResize === "w") {
-      const isEdgeAlignedOnXAxis = Math.abs(thisWinStartX - remoteWinEndX) <= tolerance;
-      const isOverlapOnYAxis = thisWinStartY <= remoteWinEndY && thisWinEndY >= remoteWinStartY;
-      const isEdgeResize = allowDistantResize ? isEdgeAlignedOnXAxis : isEdgeAlignedOnXAxis && isOverlapOnYAxis;
-      if (isEdgeResize) {
-        remoteWin.setResizeAction("e");
-      }
-      const isRemoteOnSameLane = Math.abs(thisWinEndX - remoteWinEndX) < tolerance && Math.abs(thisWinStartX - remoteWinStartX) < tolerance;
-      const isRemoteEdgeConnected = Math.abs(thisWinEndY - remoteWinStartY) < tolerance || Math.abs(thisWinStartY - remoteWinEndY) < tolerance;
-      const isStackResize = allowDistantResize ? isRemoteOnSameLane && isRemoteOutside : isRemoteOnSameLane && isRemoteEdgeConnected;
-      if (isStackResize) {
-        remoteWin.setResizeAction("w");
-      }
+      const isRemoteConneted = resizeCase.whenDragginWest(dependencies);
+      if (isRemoteConneted)
+        attachAdjacentGridBehavior(remoteWin.windowId, visited);
     }
     if (currentResize === "n") {
-      const isEdgeAlignedOnYAxis = Math.abs(thisWinStartY - remoteWinEndY) <= tolerance;
-      const isOverlapOnXAxis = thisWinStartX <= remoteWinEndX && thisWinEndX >= remoteWinStartX;
-      const isEdgeResize = allowDistantResize ? isEdgeAlignedOnYAxis : isEdgeAlignedOnYAxis && isOverlapOnXAxis;
-      if (isEdgeResize) {
-        remoteWin.setResizeAction("s");
-      }
-      const isRemoteOnSameLane = Math.abs(thisWinEndY - remoteWinEndY) < tolerance && Math.abs(thisWinStartY - remoteWinStartY) < tolerance;
-      const isRemoteEdgeConnected = Math.abs(thisWinEndX - remoteWinStartX) < tolerance || Math.abs(thisWinStartX - remoteWinEndX) < tolerance;
-      const isStackResize = allowDistantResize ? isRemoteOnSameLane && isRemoteOutside : isRemoteOnSameLane && isRemoteEdgeConnected;
-      if (isStackResize) {
-        remoteWin.setResizeAction("n");
-      }
+      const isRemoteConneted = resizeCase.whenDragginNorth(dependencies);
+      if (isRemoteConneted)
+        attachAdjacentGridBehavior(remoteWin.windowId, visited);
     }
     if (currentResize === "s") {
-      const isEdgeAlignedOnYAxis = Math.abs(thisWinEndY - remoteWinStartY) <= tolerance;
-      const isOverlapOnXAxis = thisWinStartX <= remoteWinEndX && thisWinEndX >= remoteWinStartX;
-      const isEdgeResize = allowDistantResize ? isEdgeAlignedOnYAxis : isEdgeAlignedOnYAxis && isOverlapOnXAxis;
-      if (isEdgeResize) {
-        remoteWin.setResizeAction("n");
-      }
-      const isRemoteOnSameLane = Math.abs(thisWinEndY - remoteWinEndY) < tolerance && Math.abs(thisWinStartY - remoteWinStartY) < tolerance;
-      const isRemoteEdgeConnected = Math.abs(thisWinEndX - remoteWinStartX) < tolerance || Math.abs(thisWinStartX - remoteWinEndX) < tolerance;
-      const isStackResize = allowDistantResize ? isRemoteOnSameLane && isRemoteOutside : isRemoteOnSameLane && isRemoteEdgeConnected;
-      if (isStackResize) {
-        remoteWin.setResizeAction("s");
-      }
+      const isRemoteConneted = resizeCase.whenDraggingSouth(dependencies);
+      if (isRemoteConneted)
+        attachAdjacentGridBehavior(remoteWin.windowId, visited);
+    }
+  }
+};
+var resizeCase = {
+  whenDraggingEast: (d) => {
+    const isOppositeEdgeAlignedOnXAxis = Math.abs(d.thisWinEndX - d.remoteWinStartX) <= tolerance;
+    const isOverlapOnYAxis = d.thisWinStartY <= d.remoteWinEndY && d.thisWinEndY >= d.remoteWinStartY;
+    const isEdgeResize = isOppositeEdgeAlignedOnXAxis && isOverlapOnYAxis;
+    if (isEdgeResize) {
+      resizeApi.startResize(d.remoteId, "w");
+      return true;
+    }
+    const isSameEdgeAlignedOnXAxis = Math.abs(d.thisWinEndX - d.remoteWinEndX) <= tolerance;
+    const isRemoteNorthOrSouthEdgeConnected = Math.abs(d.thisWinEndY - d.remoteWinStartY) < tolerance || Math.abs(d.thisWinStartY - d.remoteWinEndY) < tolerance;
+    const isStackResize = isSameEdgeAlignedOnXAxis && isRemoteNorthOrSouthEdgeConnected;
+    if (isStackResize) {
+      resizeApi.startResize(d.remoteId, "e");
+      return true;
+    }
+    return false;
+  },
+  whenDragginWest: (d) => {
+    const isOppositeEdgeAlignedOnXAxis = Math.abs(d.thisWinStartX - d.remoteWinEndX) <= tolerance;
+    const isOverlapOnYAxis = d.thisWinStartY <= d.remoteWinEndY && d.thisWinEndY >= d.remoteWinStartY;
+    const isEdgeResize = isOppositeEdgeAlignedOnXAxis && isOverlapOnYAxis;
+    if (isEdgeResize) {
+      resizeApi.startResize(d.remoteId, "e");
+      return true;
+    }
+    const isSameEdgeAlignedOnXAxis = Math.abs(d.thisWinStartX - d.remoteWinStartX) <= tolerance;
+    const isRemoteNorthOrSouthEdgeConnected = Math.abs(d.thisWinEndY - d.remoteWinStartY) < tolerance || Math.abs(d.thisWinStartY - d.remoteWinEndY) < tolerance;
+    const isStackResize = isSameEdgeAlignedOnXAxis && isRemoteNorthOrSouthEdgeConnected;
+    if (isStackResize) {
+      resizeApi.startResize(d.remoteId, "w");
+      return true;
+    }
+    return false;
+  },
+  whenDragginNorth: (d) => {
+    const isOppositeEdgeAlignedOnYAxis = Math.abs(d.thisWinStartY - d.remoteWinEndY) <= tolerance;
+    const isOverlapOnXAxis = d.thisWinStartX <= d.remoteWinEndX && d.thisWinEndX >= d.remoteWinStartX;
+    const isEdgeResize = isOppositeEdgeAlignedOnYAxis && isOverlapOnXAxis;
+    if (isEdgeResize) {
+      resizeApi.startResize(d.remoteId, "s");
+      return true;
+    }
+    const isSameEdgeAlignedOnYAxis = Math.abs(d.thisWinStartY - d.remoteWinStartY) <= tolerance;
+    const isRemoteEastOrWestEdgeConnected = Math.abs(d.thisWinEndX - d.remoteWinStartX) < tolerance || Math.abs(d.thisWinStartX - d.remoteWinEndX) < tolerance;
+    const isStackResize = isSameEdgeAlignedOnYAxis && isRemoteEastOrWestEdgeConnected;
+    if (isStackResize) {
+      resizeApi.startResize(d.remoteId, "n");
+      return true;
+    }
+    return false;
+  },
+  whenDraggingSouth: (d) => {
+    const isOppositeEdgeAlignedOnYAxis = Math.abs(d.thisWinEndY - d.remoteWinStartY) <= tolerance;
+    const isOverlapOnXAxis = d.thisWinStartX <= d.remoteWinEndX && d.thisWinEndX >= d.remoteWinStartX;
+    const isEdgeResize = isOppositeEdgeAlignedOnYAxis && isOverlapOnXAxis;
+    if (isEdgeResize) {
+      resizeApi.startResize(d.remoteId, "n");
+      return true;
     }
+    const isSameEdgeAlignedOnYAxis = Math.abs(d.thisWinEndY - d.remoteWinEndY) <= tolerance;
+    const isRemoteEastOrWestEdgeConnected = Math.abs(d.thisWinEndX - d.remoteWinStartX) < tolerance || Math.abs(d.thisWinStartX - d.remoteWinEndX) < tolerance;
+    const isStackResize = isSameEdgeAlignedOnYAxis && isRemoteEastOrWestEdgeConnected;
+    if (isStackResize) {
+      resizeApi.startResize(d.remoteId, "s");
+      return true;
+    }
+    return false;
   }
 };
+var buildDependencies = (thisWin, remoteWin) => {
+  const thisWinStartY = thisWin.winCoord.pointY;
+  const thisWinEndY = thisWin.winCoord.pointY + thisWin.winHeight;
+  const remoteWinStartY = remoteWin.winCoord.pointY;
+  const remoteWinEndY = remoteWin.winCoord.pointY + remoteWin.winHeight;
+  const thisWinStartX = thisWin.winCoord.pointX;
+  const thisWinEndX = thisWin.winCoord.pointX + thisWin.winWidth;
+  const remoteWinStartX = remoteWin.winCoord.pointX;
+  const remoteWinEndX = remoteWin.winCoord.pointX + remoteWin.winWidth;
+  const isRemoteOutside = remoteWinEndY !== thisWinEndY || remoteWinEndX !== thisWinEndX || remoteWinStartY !== thisWinStartY || remoteWinStartX !== thisWinStartX;
+  return {
+    remoteId: remoteWin.windowId,
+    thisWinStartY,
+    thisWinEndY,
+    remoteWinStartY,
+    remoteWinEndY,
+    thisWinStartX,
+    thisWinEndX,
+    remoteWinStartX,
+    remoteWinEndX,
+    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))
+    if (!windowRegistry[key].getState().isWindowClosed)
+      openWnidowCount++;
+  return openWnidowCount;
+};
 
 // src/window-manager/internal/features/resizing/resizing-controls.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function ResizingControls({ winId }) {
-  const { x, y } = useCursorState();
   const { winCoord, winWidth, winHeight, resizeAction } = windowRegistry[winId]();
-  useEffect(() => {
-    resizeApi.dispatchResizeAction(winId);
-  }, [resizeAction, x, y]);
-  const handleResizeClick = (resizeAction2) => {
-    resizeApi.setResizeAction(winId, resizeAction2);
-    gridApi.orchestrateGridResize(winId);
+  const startResize = (direction) => {
+    resizeApi.startResize(winId, direction);
+    gridOrchestrator.attachAdjacentGridBehavior(winId);
+  };
+  const stopResize = () => {
+    resizeApi.stopResize(winId);
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs3(Fragment4, { children: [
+    /* @__PURE__ */ jsx6(
       "span",
       {
-        onMouseUp: () => handleResizeClick(false),
-        onMouseDown: () => handleResizeClick("e"),
+        onPointerUp: stopResize,
+        onPointerDown: () => startResize("e"),
         id: "win-resize-right-width",
-        className: "fixed w-2 opacity-60 cursor-w-resize z-10",
+        className: `fixed w-2 ${resizeAction === "e" ? "opacity-50" : ""} opacity-0 mix-blend-difference cursor-w-resize z-10 flex-col flex justify-center items-center overflow-hidden`,
         style: {
           top: `${winCoord.pointY}px`,
           left: `${winCoord.pointX + winWidth - 4}px`,
           height: `${winHeight}px`
-        }
+        },
+        children: /* @__PURE__ */ jsx6("div", { className: `w-1 h-full bg-zinc-50` })
       }
     ),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx6(
       "span",
       {
-        onMouseUp: () => handleResizeClick(false),
-        onMouseDown: () => handleResizeClick("w"),
+        onPointerUp: stopResize,
+        onPointerDown: () => startResize("w"),
         id: "win-resize-left-width",
-        className: "fixed w-2 opacity-60 cursor-w-resize z-10",
+        className: `fixed w-2 ${resizeAction === "w" ? "opacity-50" : ""} opacity-0 mix-blend-difference cursor-w-resize z-10 flex-col flex justify-center items-center`,
         style: {
           top: `${winCoord.pointY}px`,
           left: `${winCoord.pointX - 4}px`,
           height: `${winHeight}px`
-        }
+        },
+        children: /* @__PURE__ */ jsx6("div", { className: `w-1 h-full bg-zinc-50` })
       }
     ),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx6(
       "span",
       {
-        onMouseUp: () => handleResizeClick(false),
-        onMouseDown: () => handleResizeClick("s"),
+        onPointerUp: stopResize,
+        onPointerDown: () => startResize("s"),
         id: "win-resize-bottom-height",
-        className: "fixed h-2 opacity-60 cursor-s-resize z-10",
+        className: `fixed h-2 ${resizeAction === "s" ? "opacity-50" : ""} opacity-0 mix-blend-difference cursor-s-resize z-10 flex justify-center items-center`,
         style: {
-          top: `${winCoord.pointY + winHeight - 6}px`,
+          top: `${winCoord.pointY + winHeight - 4}px`,
           left: `${winCoord.pointX}px`,
           width: `${winWidth}px`
-        }
+        },
+        children: /* @__PURE__ */ jsx6("div", { className: `w-full h-1 bg-zinc-50` })
       }
     ),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx6(
       "span",
       {
-        onMouseUp: () => handleResizeClick(false),
-        onMouseDown: () => handleResizeClick("n"),
+        onPointerUp: stopResize,
+        onPointerDown: () => startResize("n"),
         id: "win-resize-top-height",
-        className: "fixed h-2 opacity-60 cursor-s-resize z-10",
+        className: `fixed h-2 ${resizeAction === "n" ? "opacity-50" : ""} opacity-0 mix-blend-difference cursor-s-resize z-10 flex justify-center items-center`,
         style: {
-          top: `${winCoord.pointY - 6}px`,
+          top: `${winCoord.pointY - 4}px`,
           left: `${winCoord.pointX}px`,
           width: `${winWidth}px`
-        }
+        },
+        children: /* @__PURE__ */ jsx6("div", { className: `w-full h-1 bg-zinc-50` })
       }
     ),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx6(
       "span",
       {
-        onMouseUp: () => handleResizeClick(false),
-        onMouseDown: () => handleResizeClick("se"),
+        onPointerUp: stopResize,
+        onPointerDown: () => startResize("se"),
         id: "win-resize-bottom-right-all",
         className: "fixed h-3 w-3 opacity-60 cursor-se-resize z-20",
         style: {
@@ -487,11 +1361,11 @@ function ResizingControls({ winId }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx6(
       "span",
       {
-        onMouseUp: () => handleResizeClick(false),
-        onMouseDown: () => handleResizeClick("sw"),
+        onPointerUp: stopResize,
+        onPointerDown: () => startResize("sw"),
         id: "win-resize-bottom-left-all",
         className: "fixed h-3 w-3 opacity-60 cursor-sw-resize z-20",
         style: {
@@ -500,11 +1374,11 @@ function ResizingControls({ winId }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx6(
       "span",
       {
-        onMouseUp: () => handleResizeClick(false),
-        onMouseDown: () => handleResizeClick("ne"),
+        onPointerUp: stopResize,
+        onPointerDown: () => startResize("ne"),
         id: "win-resize-top-right-all",
         className: "fixed h-3 w-3 opacity-60 cursor-ne-resize z-20",
         style: {
@@ -513,11 +1387,11 @@ function ResizingControls({ winId }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx6(
       "span",
       {
-        onMouseUp: () => handleResizeClick(false),
-        onMouseDown: () => handleResizeClick("nw"),
+        onPointerUp: stopResize,
+        onPointerDown: () => startResize("nw"),
         id: "win-resize-top-left-all",
         className: "fixed h-3 w-3 opacity-60 cursor-nw-resize z-20",
         style: {
@@ -530,63 +1404,40 @@ function ResizingControls({ winId }) {
 }
 
 // src/window-manager/internal/features/drag/drag-handle.tsx
-import { useEffect as useEffect2, useState } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function DragHandle({ winId }) {
-  const { x, y } = useCursorState();
-  const { winVisualState, isDragging, winCoord, setWinCoord, setIsDragging } = windowRegistry[winId]();
-  const [dragClickOffset, setDragClickOffset] = useState({
-    pointX: wsApi.getRect().left,
-    pointY: wsApi.getRect().top
-  });
-  useEffect2(() => {
-    if (wsApi.isBelowBreakPoint())
-      return;
-    if (!isDragging)
-      return;
-    if (winVisualState === "maximized")
-      dockApi.demaximizeWindow(winId);
-    const wsRect = wsApi.getRect();
-    let adjustedX = x - dragClickOffset.pointX;
-    if (x > wsRect.right || x < wsRect.left)
-      adjustedX = winCoord.pointX;
-    let adjustedY = y - dragClickOffset.pointY;
-    if (y > wsRect.bottom || y < wsRect.top)
-      adjustedY = winCoord.pointY;
-    setWinCoord({ pointX: adjustedX, pointY: adjustedY });
-  }, [isDragging, x, y]);
-  const startDrag = (isDragging2) => {
-    setDragClickOffset({ pointX: x - winCoord.pointX, pointY: y - winCoord.pointY });
-    setIsDragging(isDragging2);
-  };
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
-      onMouseDown: () => startDrag(true),
-      onMouseUp: () => startDrag(false),
+      onPointerDown: () => dragApi.startDrag(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"
+      className: `
+        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`
     }
   );
 }
 
 // src/window-manager/internal/features/window-layout.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function WindowLayout({
   children,
   windowName,
   navbarChildren,
+  navbarClassName,
+  className,
   winId,
   defaultDock = "default",
   style
 }) {
-  const { ref: wsRef } = useWorkspaceState();
-  const windowRef = useRef(null);
+  const { wsElement, wsRect, isBelowBreakPoint } = useWorkspaceState();
+  const windowRef = useRef2(null);
   const {
     windowId,
     zIndex,
     isActive,
-    setSelf,
+    setWinElement,
     resetFlag,
     winVisualState,
     isWindowClosed,
@@ -594,14 +1445,16 @@ function WindowLayout({
     winWidth,
     winHeight
   } = windowRegistry[winId]();
-  useEffect3(() => {
-    setSelf(windowRef);
-    if (wsApi.isBelowBreakPoint()) {
+  useEffect4(() => {
+    setWinElement(windowRef.current);
+  }, [setWinElement, windowRef.current]);
+  useEffect4(() => {
+    if (isBelowBreakPoint) {
       dockApi.maximizeWindow(winId);
-      return;
+    } else {
+      dockingRoutes[defaultDock](winId);
     }
-    dockingRoutes[defaultDock](winId);
-  }, [setSelf, windowRef, resetFlag, wsRef]);
+  }, [wsElement, resetFlag]);
   const dockingRoutes = {
     right: dockApi.dockWindowRight,
     left: dockApi.dockWindowLeft,
@@ -614,37 +1467,37 @@ function WindowLayout({
     "bottom-left": dockApi.dockWindowBottomLeft,
     default: dockApi.demaximizeWindow
   };
-  const maximizeControl = winVisualState === "maximized" ? /* @__PURE__ */ jsx4(
+  const maximizeControl = winVisualState === "maximized" ? /* @__PURE__ */ jsx8(
     "button",
     {
       className: `block hover:bg-gray-500 hover:bg-opacity-10 px-5 h-full`,
       onClick: () => dockApi.demaximizeWindow(winId),
-      children: /* @__PURE__ */ jsx4(IconWinDemaximize, { color: style?.navControlsColor })
+      children: /* @__PURE__ */ jsx8(IconWinDemaximize, { color: style?.navControlsColor })
     }
-  ) : /* @__PURE__ */ jsx4(
+  ) : /* @__PURE__ */ jsx8(
     "button",
     {
       className: `block hover:bg-gray-500 hover:bg-opacity-10 px-5 h-full`,
       onClick: () => dockApi.maximizeWindow(winId),
-      children: /* @__PURE__ */ jsx4(IconWinMaximize, { color: style?.navControlsColor })
+      children: /* @__PURE__ */ jsx8(IconWinMaximize, { color: style?.navControlsColor })
     }
   );
-  const closeControl = /* @__PURE__ */ jsx4(
+  const closeControl = /* @__PURE__ */ jsx8(
     "button",
     {
       className: "hover:bg-red-500 hover:bg-opacity-20 px-5 h-full",
-      onClick: () => dockApi.closeWindow(winId),
-      children: /* @__PURE__ */ jsx4(IconWinMinimize, { color: style?.navControlsColor })
+      onClick: () => focusApi.closeWindowAndRefocus(winId),
+      children: /* @__PURE__ */ jsx8(IconWinMinimize, { color: style?.navControlsColor })
     }
   );
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs4(Fragment5, { children: [
+    /* @__PURE__ */ jsxs4(
       "div",
       {
         id: windowId,
         ref: windowRef,
-        className: `fixed bg-white shadow-lg border border-zinc-600 rounded-sm overflow-hidden`,
-        onMouseDown: () => stackApi.bringTargetWindowToFront(windowId),
+        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`,
@@ -655,30 +1508,30 @@ function WindowLayout({
           /* MINIMIZE LOGIC */
           transition: "transform 0.2s ease-in-out, opacity 0.3s ease-in-out",
           opacity: isWindowClosed ? 0 : 1,
-          transform: isWindowClosed ? `translate(${wsApi.getRect().innerWidth / 2 - winCoord.pointX - winWidth / 2}px,
-              ${wsApi.getRect().innerHeight - winCoord.pointY - winHeight / 2}px) scale(0.02)` : ""
+          transform: isWindowClosed ? `translate(${wsRect.innerWidth / 2 - winCoord.pointX - winWidth / 2}px,
+              ${wsRect.innerHeight - winCoord.pointY - winHeight / 2}px) scale(0.02)` : ""
         },
         children: [
-          /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsxs4(
             "nav",
             {
               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__ */ jsx4("div", { className: "w-fit shrink-0 h-8 px-2 text-white flex items-center text-sm truncate", children: windowName }),
-                /* @__PURE__ */ jsx4("div", { className: "h-8 px-2 text-white flex items-center text-sm truncate", children: navbarChildren }),
-                /* @__PURE__ */ jsx4(DragHandle, { winId }),
-                !wsApi.isBelowBreakPoint() && maximizeControl,
+                /* @__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 }),
+                /* @__PURE__ */ jsx8(DragHandle, { winId }),
+                !isBelowBreakPoint && maximizeControl,
                 closeControl
               ]
             }
           ),
-          !wsApi.isBelowBreakPoint() && /* @__PURE__ */ jsx4(ResizingControls, { winId }),
-          /* @__PURE__ */ jsx4("div", { className: `relative w-full h-[calc(100%-32px)] overflow-auto`, children })
+          /* @__PURE__ */ jsx8(ResizingControls, { winId }),
+          /* @__PURE__ */ jsx8("div", { className: `relative w-full h-[calc(100%-32px)] overflow-auto select-text`, children })
         ]
       }
     ),
@@ -687,367 +1540,72 @@ function WindowLayout({
 }
 
 // src/window-manager/internal/features/window-button.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function WindowButton({
   children,
   winId,
   className,
-  isClosedClassName = "brightness-[85%]",
-  isOpenClassName = "brightness-150"
+  isClosedClassName = "brightness-[85%] border-t-2 border-t-transparent",
+  isOpenClassName = "brightness-150 border-t-2 border-t-transparent",
+  isActiveClassName = "brightness-150 border-t-2 border-zinc-400 bg-zinc-50/10"
 }) {
   const { isWindowClosed, windowId, isActive } = windowRegistry[winId]();
   const handleOpenCloseWin = () => {
-    if (isWindowClosed) {
-      stackApi.bringTargetWindowToFront(windowId);
-      dockApi.openWindow(winId);
-      return;
+    if (!isWindowClosed && isActive) {
+      focusApi.closeWindowAndRefocus(windowId);
+    } else {
+      focusApi.bringWindowToFocus(windowId);
     }
-    if (isActive)
-      dockApi.closeWindow(winId);
-    stackApi.bringTargetWindowToFront(windowId);
   };
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       id: `${windowId}_button`,
       onClick: handleOpenCloseWin,
       className: `
         ${className} 
-        ${isWindowClosed ? isClosedClassName : isOpenClassName}`,
+        ${isWindowClosed ? isClosedClassName : isActive ? isActiveClassName : isOpenClassName}
+      `,
       children
     }
   );
 }
 
 // src/window-manager/registration/window-store-factory.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var windownMinWidth = 232;
-var windownMinHeight = 128;
-var windowRegistry = {};
+import { jsx as jsx10 } from "react/jsx-runtime";
+var defaultMinWidth = 232;
+var defaultMinHeight = 128;
 var createWindowStore = () => {
   const zIndexAtLaunch = Object.keys(windowRegistry).length + 1;
   const windowInstanceId = `react-dynamic-window-instance${Object.keys(windowRegistry).length}`;
   const storeInstance = create3((set, get) => ({
+    setWinElement: (ref) => set({ winElement: ref }),
+    winElement: void 0,
     windowId: windowInstanceId,
-    self: void 0,
-    setSelf: (ref) => set({ self: ref }),
-    WIN_MIN_WIDTH: windownMinWidth,
-    setWIN_MIN_WIDTH: (w) => set({ WIN_MIN_WIDTH: w }),
-    WIN_MIN_HEIGHT: windownMinHeight,
-    setWIN_MIN_HEIGHT: (h) => set({ WIN_MIN_HEIGHT: h }),
-    isActive: false,
-    setIsActive: (isActive) => {
-      useWorkspaceState.getState().setActiveWindowId(get().windowId);
-      set({ isActive });
-    },
     resetFlag: false,
-    reset: () => set({ resetFlag: !get().resetFlag, isWindowClosed: true }),
     zIndex: zIndexAtLaunch,
-    setZIndex: (newIndex) => set({ zIndex: newIndex }),
+    winCoord: { pointX: 40, pointY: 40 },
     winVisualState: "demaximized",
-    setWinVisualState: (newState) => set({ winVisualState: newState }),
+    isActive: false,
+    isDragging: false,
     isWindowClosed: true,
-    setisWindowClosed: (isClosed) => set({ isWindowClosed: isClosed }),
-    winCoord: { pointX: 40, pointY: 40 },
-    setWinCoord: (newWinCoord) => set({ winCoord: { pointX: newWinCoord.pointX, pointY: newWinCoord.pointY } }),
-    winWidth: windownMinWidth,
-    setWinWidth: (newWinWidth) => set({ winWidth: newWinWidth }),
-    winHeight: windownMinHeight,
-    setWinHeight: (newWinHeight) => set({ winHeight: newWinHeight }),
     resizeAction: false,
-    setResizeAction: (updatedIsResizing) => set({ resizeAction: updatedIsResizing }),
-    isDragging: false,
-    setIsDragging: (updatedIsDragging) => set({ isDragging: updatedIsDragging })
+    winWidth: defaultMinWidth,
+    winHeight: defaultMinHeight,
+    WIN_MIN_WIDTH: defaultMinWidth,
+    WIN_MIN_HEIGHT: defaultMinHeight
   }));
   windowRegistry[windowInstanceId] = storeInstance;
   return {
     id: storeInstance.getState().windowId,
     store: storeInstance,
-    Window: (props) => /* @__PURE__ */ jsx6(WindowLayout, { ...props, winId: windowInstanceId }),
-    Button: (props) => /* @__PURE__ */ jsx6(WindowButton, { ...props, winId: windowInstanceId })
+    Window: (props) => /* @__PURE__ */ jsx10(WindowLayout, { ...props, winId: windowInstanceId }),
+    Button: (props) => /* @__PURE__ */ jsx10(WindowButton, { ...props, winId: windowInstanceId })
   };
 };
-
-// src/window-manager/internal/features/docking/docking-api.ts
-var dockApi = {
-  dockWindowRight: (winId) => {
-    windowRegistry[winId].setState({
-      winCoord: { pointX: wsApi.getRect().centerX, pointY: wsApi.getRect().top },
-      winWidth: wsApi.getRect().innerWidth / 2,
-      winHeight: wsApi.getRect().innerHeight,
-      winVisualState: "demaximized"
-    });
-  },
-  dockWindowLeft: (winId) => {
-    windowRegistry[winId].setState({
-      winCoord: { pointX: wsApi.getRect().left, pointY: wsApi.getRect().top },
-      winWidth: wsApi.getRect().innerWidth / 2,
-      winHeight: wsApi.getRect().innerHeight,
-      winVisualState: "demaximized"
-    });
-  },
-  dockWindowTop: (winId) => {
-    windowRegistry[winId].setState({
-      winCoord: { pointX: wsApi.getRect().left, pointY: wsApi.getRect().top },
-      winWidth: wsApi.getRect().innerWidth,
-      winHeight: wsApi.getRect().innerHeight / 2,
-      winVisualState: "demaximized"
-    });
-  },
-  dockWindowBottom: (winId) => {
-    windowRegistry[winId].setState({
-      winCoord: { pointX: wsApi.getRect().left, pointY: wsApi.getRect().centerY },
-      winWidth: wsApi.getRect().innerWidth,
-      winHeight: wsApi.getRect().innerHeight / 2,
-      winVisualState: "demaximized"
-    });
-  },
-  dockWindowBottomRight: (winId) => {
-    windowRegistry[winId].setState({
-      winCoord: {
-        pointX: wsApi.getRect().centerX,
-        pointY: wsApi.getRect().centerY
-      },
-      winWidth: wsApi.getRect().innerWidth / 2,
-      winHeight: wsApi.getRect().innerHeight / 2,
-      winVisualState: "demaximized"
-    });
-  },
-  dockWindowTopRight: (winId) => {
-    windowRegistry[winId].setState({
-      winCoord: { pointX: wsApi.getRect().centerX, pointY: wsApi.getRect().top },
-      winWidth: wsApi.getRect().innerWidth / 2,
-      winHeight: wsApi.getRect().innerHeight / 2,
-      winVisualState: "demaximized"
-    });
-  },
-  dockWindowBottomLeft: (winId) => {
-    windowRegistry[winId].setState({
-      winCoord: { pointX: wsApi.getRect().left, pointY: wsApi.getRect().centerY },
-      winWidth: wsApi.getRect().innerWidth / 2,
-      winHeight: wsApi.getRect().innerHeight / 2,
-      winVisualState: "demaximized"
-    });
-  },
-  dockWindowTopLeft: (winId) => {
-    windowRegistry[winId].setState({
-      winCoord: { pointX: wsApi.getRect().left, pointY: wsApi.getRect().top },
-      winWidth: wsApi.getRect().innerWidth / 2,
-      winHeight: wsApi.getRect().innerHeight / 2,
-      winVisualState: "demaximized"
-    });
-  },
-  maximizeWindow: (winId) => {
-    windowRegistry[winId].setState({
-      winCoord: { pointX: wsApi.getRect().left, pointY: wsApi.getRect().top },
-      winHeight: wsApi.getRect().innerHeight,
-      winWidth: wsApi.getRect().innerWidth,
-      winVisualState: "maximized"
-    });
-  },
-  demaximizeWindow: (winId) => {
-    windowRegistry[winId].setState({
-      winCoord: { pointX: wsApi.getRect().left + 16, pointY: wsApi.getRect().top + 16 },
-      winWidth: wsApi.getRect().innerWidth * 0.95,
-      winHeight: wsApi.getRect().innerHeight * 0.75,
-      winVisualState: "demaximized"
-    });
-  },
-  closeWindow: (winId) => {
-    windowRegistry[winId].setState({ isWindowClosed: true });
-  },
-  openWindow: (winId) => {
-    const winState = windowRegistry[winId].getState();
-    const winRef = winState.self;
-    if (winState.isWindowClosed && winRef?.current) {
-      windowRegistry[winId].setState({ isWindowClosed: false });
-      winRef.current.style.transform = "translate(0, 0) scale(1)";
-    }
-  }
-};
-
-// src/window-manager/rwm.ts
-var rwm = {
-  dockApi,
-  resizeApi,
-  stackApi,
-  workspaceApi: wsApi,
-  worskpaceState: useWorkspaceState
-};
-var rwm_default = rwm;
-
-// src/window-manager/workspace-layout.tsx
-import { useEffect as useEffect6, useRef as useRef2 } from "react";
-
-// src/window-manager/internal/features/docking/docking-controls.tsx
-import { useState as useState2 } from "react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-function DockingControls() {
-  const [isHovering, setIsHovering] = useState2(false);
-  const { activeWindowId } = useWorkspaceState();
-  const { isDragging } = windowRegistry[activeWindowId]();
-  const cornerDockControl = /* @__PURE__ */ jsxs3("div", { className: `flex xl:p-0 shrink-0 gap-0.5`, children: [
-    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col justify-center gap-0.5", children: [
-      /* @__PURE__ */ jsx7(
-        "button",
-        {
-          className: "hover:bg-zinc-300 border border-zinc-500 bg-zinc-600 w-10 h-6 rounded-sm",
-          onMouseUp: () => dockApi.dockWindowTopLeft(activeWindowId)
-        }
-      ),
-      /* @__PURE__ */ jsx7(
-        "button",
-        {
-          className: "hover:bg-zinc-300 border border-zinc-500 bg-zinc-600 w-10 h-6 rounded-sm",
-          onMouseUp: () => dockApi.dockWindowBottomLeft(activeWindowId)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col justify-center gap-0.5", children: [
-      /* @__PURE__ */ jsx7(
-        "button",
-        {
-          className: "hover:bg-zinc-300 border border-zinc-500 bg-zinc-600 w-10 h-6 rounded-sm",
-          onMouseUp: () => dockApi.dockWindowTopRight(activeWindowId)
-        }
-      ),
-      /* @__PURE__ */ jsx7(
-        "button",
-        {
-          className: "hover:bg-zinc-300 border border-zinc-500 bg-zinc-600 w-10 h-6 rounded-sm",
-          onMouseUp: () => dockApi.dockWindowBottomRight(activeWindowId)
-        }
-      )
-    ] })
-  ] });
-  const sideDideControl = /* @__PURE__ */ jsxs3("div", { className: `flex shrink-0 items-center gap-0.5`, children: [
-    /* @__PURE__ */ jsx7(
-      "button",
-      {
-        className: "hover:bg-zinc-300 border border-zinc-500 bg-zinc-600 w-8 h-12 rounded-sm",
-        onMouseUp: () => dockApi.dockWindowLeft(activeWindowId)
-      }
-    ),
-    /* @__PURE__ */ jsx7(
-      "button",
-      {
-        className: "hover:bg-zinc-300 border border-zinc-500 bg-zinc-600 w-8 h-12 rounded-sm",
-        onMouseUp: () => dockApi.dockWindowRight(activeWindowId)
-      }
-    )
-  ] });
-  const horizontalDockControl = /* @__PURE__ */ jsxs3("div", { className: `flex flex-col shrink-0 items-center gap-0.5`, children: [
-    /* @__PURE__ */ jsx7(
-      "button",
-      {
-        className: "hover:bg-zinc-300 border border-zinc-500 bg-zinc-600 w-14 h-6 rounded-sm",
-        onMouseUp: () => dockApi.dockWindowTop(activeWindowId)
-      }
-    ),
-    /* @__PURE__ */ jsx7(
-      "button",
-      {
-        className: "hover:bg-zinc-300 border border-zinc-500 bg-zinc-600 w-14 h-6 rounded-sm",
-        onMouseUp: () => dockApi.dockWindowBottom(activeWindowId)
-      }
-    )
-  ] });
-  const windowDockPannel = /* @__PURE__ */ jsx7(
-    "span",
-    {
-      className: "pointer-events-auto px-4 pb-2",
-      onMouseOver: () => setIsHovering(true),
-      onMouseLeave: () => setIsHovering(false),
-      children: /* @__PURE__ */ jsxs3(
-        "section",
-        {
-          className: `
-        flex w-fit border border-zinc-600 border-t-0 rounded-b-md bg-zinc-800 
-        overflow-hidden px-8 gap-4 h-full py-4 
-        `,
-          children: [
-            cornerDockControl,
-            horizontalDockControl,
-            sideDideControl
-          ]
-        }
-      )
-    }
-  );
-  return /* @__PURE__ */ jsx7(
-    "div",
-    {
-      className: `
-        ${isDragging ? isHovering ? "top-0 opacity-50" : "top-[-68px] opacity-80" : "top-[-104px] opacity-0"} 
-        transition-all duration-500
-        absolute z-50 flex items-center justify-center 
-        w-full mx-auto pointer-events-none`,
-      children: windowDockPannel
-    }
-  );
-}
-
-// src/window-manager/internal/features/cursor/cursor-move-listener.tsx
-import { useEffect as useEffect4 } from "react";
-import { Fragment as Fragment3, jsx as jsx8 } from "react/jsx-runtime";
-function CursorMoveListener() {
-  const { setX, setY } = useCursorState();
-  useEffect4(() => {
-    const handleWindowPosition = (e) => {
-      e.preventDefault();
-      setX(e.clientX);
-      setY(e.clientY);
-    };
-    window.addEventListener("pointermove", handleWindowPosition);
-    return () => window.removeEventListener("pointermove", handleWindowPosition);
-  }, [setX, setY]);
-  return /* @__PURE__ */ jsx8(Fragment3, {});
-}
-
-// src/window-manager/internal/features/view-port/view-port-resize-listener.tsx
-import { useEffect as useEffect5 } from "react";
-import { Fragment as Fragment4, jsx as jsx9 } from "react/jsx-runtime";
-function ViewPortResizeListener() {
-  useEffect5(() => {
-    window.addEventListener("resize", stackApi.resetStack);
-    return () => window.removeEventListener("resize", stackApi.resetStack);
-  }, []);
-  return /* @__PURE__ */ jsx9(Fragment4, {});
-}
-
-// src/window-manager/workspace-layout.tsx
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
-function WorkspaceLayout({ children, className, responsiveBreak = "sm" }) {
-  const workspaceRef = useRef2(null);
-  const { setRef, setResponsiveBreak } = useWorkspaceState();
-  useEffect6(() => {
-    setRef(workspaceRef.current);
-  }, []);
-  useEffect6(() => {
-    setResponsiveBreak(responsiveBreak);
-  }, [responsiveBreak]);
-  return /* @__PURE__ */ jsxs4(
-    "section",
-    {
-      ref: workspaceRef,
-      onMouseLeave: resizeApi.stopAllDragAndResize,
-      onMouseUp: resizeApi.stopAllDragAndResize,
-      className: className ? className : "fixed overflow-hidden h-full w-full touch-none",
-      children: [
-        /* @__PURE__ */ jsx10(ViewPortResizeListener, {}),
-        /* @__PURE__ */ jsx10(CursorMoveListener, {}),
-        /* @__PURE__ */ jsxs4("div", { className: " w-full h-full relative overflow-hidden", children: [
-          !wsApi.isBelowBreakPoint() && /* @__PURE__ */ jsx10(DockingControls, {}),
-          children
-        ] })
-      ]
-    }
-  );
-}
 export {
   WorkspaceLayout,
   createWindowStore,
-  rwm_default as rwm,
-  windowRegistry
+  rwm_default as rwm
 };
 //# sourceMappingURL=index.js.map