@gustavolmo/react-window-manager 0.4.2 → 0.4.3

package/dist/index.js

@@ -804,6 +804,117 @@ var getRafResizeDependencies = (winId) => {
   return { wsRect, win, winBox, x, y };
 };
 
+// src/window-manager/internal/runtime/history-resolver/app-history.ts
+var MAX_HISTORY = 100;
+var excludedCommands = [
+  "UPDATE_WORKSPACE_SIZE",
+  "SET_RESPONSIVE_BREAK",
+  "SET_WORKSPACE_FEATURES",
+  "APPLY_PREVIOUS",
+  "APPLY_NEXT",
+  "ENABLE_DRAG",
+  "ENABLE_RESIZE"
+];
+var appHistory = {
+  snapshots: [],
+  ptr: -1
+};
+function saveSnapshot(cmd) {
+  if (excludedCommands.includes(cmd))
+    return;
+  const snapshot = getSnapshot();
+  if (!snapshot)
+    return;
+  if (appHistory.ptr < appHistory.snapshots.length - 1) {
+    appHistory.snapshots = appHistory.snapshots.slice(0, appHistory.ptr + 1);
+  }
+  appHistory.snapshots.push(snapshot);
+  if (appHistory.snapshots.length > MAX_HISTORY) {
+    appHistory.snapshots.shift();
+  }
+  appHistory.ptr = appHistory.snapshots.length - 1;
+}
+var getSnapshot = () => {
+  const { wsElement, setWsElement, ...wsSnapshot } = useWorkspaceState.getState();
+  const wsUpdate = structuredClone(wsSnapshot);
+  const winStateSnapshots = [];
+  for (const key of Object.keys(windowRegistry)) {
+    const { winElement, setWinElement, isDragging, resizeAction, ...windowSnapshot } = windowRegistry[key].getState();
+    winStateSnapshots.push(structuredClone(windowSnapshot));
+  }
+  if (!isValidSnapshot(winStateSnapshots)) {
+    return;
+  }
+  return {
+    ws: wsUpdate,
+    winState: winStateSnapshots
+  };
+};
+var isValidSnapshot = (winStateSnapshots) => {
+  if (appHistory.ptr < 0)
+    return true;
+  const prevSnapshot = appHistory.snapshots[appHistory.ptr].winState;
+  for (const newWinState of winStateSnapshots) {
+    for (const prevWinState of prevSnapshot) {
+      if (newWinState.windowId !== prevWinState.windowId)
+        continue;
+      if (newWinState.zIndex !== prevWinState.zIndex || newWinState.winVisualState !== prevWinState.winVisualState || newWinState.isWindowClosed !== prevWinState.isWindowClosed || newWinState.winCoord?.pointX !== prevWinState.winCoord?.pointX || newWinState.winCoord?.pointY !== prevWinState.winCoord?.pointY || newWinState.winWidth !== prevWinState.winWidth || newWinState.winHeight !== prevWinState.winHeight)
+        return true;
+    }
+  }
+  return false;
+};
+
+// src/window-manager/internal/runtime/history-resolver/history-commands.ts
+var historyCommandResolver = {
+  APPLY_PREVIOUS: () => {
+    if (appHistory.ptr <= 0)
+      return { ws: {}, win: [] };
+    appHistory.ptr -= 1;
+    const snapshot = appHistory.snapshots[appHistory.ptr];
+    const wsUpdate = snapshot.ws;
+    const winBatchUpdate = [];
+    snapshot.winState.forEach((win) => {
+      const { windowId, setWinElement, ...state } = win;
+      winBatchUpdate.push({
+        winId: windowId,
+        patch: { ...state }
+      });
+    });
+    return {
+      ws: wsUpdate,
+      win: winBatchUpdate
+    };
+  },
+  APPLY_NEXT: () => {
+    if (appHistory.ptr >= appHistory.snapshots.length - 1)
+      return { ws: {}, win: [] };
+    appHistory.ptr += 1;
+    const snapshot = appHistory.snapshots[appHistory.ptr];
+    const wsUpdate = snapshot.ws;
+    const winBatchUpdate = [];
+    snapshot.winState.forEach((win) => {
+      const { windowId, setWinElement, ...state } = win;
+      winBatchUpdate.push({
+        winId: windowId,
+        patch: { ...state }
+      });
+    });
+    return {
+      ws: wsUpdate,
+      win: winBatchUpdate
+    };
+  },
+  CLEAR_HISTORY: () => {
+    appHistory.ptr = -1;
+    appHistory.snapshots = [];
+    return {
+      ws: {},
+      win: []
+    };
+  }
+};
+
 // src/window-manager/internal/runtime/rwm-runtime.ts
 var rwmRuntime = {
   dispatch: ({ subsystem, cmd, targetWinId, ctx }) => {
@@ -836,11 +947,17 @@ var rwmRuntime = {
         commitBatch(stagedChanges);
         break;
       }
+      case "HISTORY": {
+        const stagedChanges = historyCommandResolver[cmd]();
+        commitBatch(stagedChanges);
+        break;
+      }
       default:
         throw new Error(
           `Unregistered rwmRuntime subsystem called: ${{ subsystem, cmd, targetWinId, ctx }}`
         );
     }
+    saveSnapshot(cmd);
   }
 };
 var rafRuntime = {
@@ -1012,7 +1129,7 @@ var rwm = {
 var rwm_default = rwm;
 
 // src/window-manager/workspace-layout.tsx
-import { useEffect as useEffect3, useRef } from "react";
+import { useEffect as useEffect4, useRef } from "react";
 
 // src/window-manager/internal/features/docking/docking-controls.tsx
 import { useState } from "react";
@@ -1138,6 +1255,9 @@ var resizeApi = {
     rafRuntime.dispatch({ targetWinId: winId, subsystem: "RAF_RESIZE", cmd: "LOOP_RESIZE" });
   },
   stopResize: (winId) => {
+    const isNotResizing = !windowRegistry[winId].getState().resizeAction;
+    if (isNotResizing)
+      return;
     rwmRuntime.dispatch({
       targetWinId: winId,
       subsystem: "RESIZE",
@@ -1164,6 +1284,21 @@ function CursorMoveListener() {
 
 // src/window-manager/internal/features/workspace/workspace-resize-listener.tsx
 import { useEffect as useEffect2 } from "react";
+
+// src/window-manager/internal/features/history/history-api.ts
+var appHistoryApi = {
+  moveToPreviousSnapshot: () => {
+    rwmRuntime.dispatch({ subsystem: "HISTORY", cmd: "APPLY_PREVIOUS" });
+  },
+  moveToNextSnapshot: () => {
+    rwmRuntime.dispatch({ subsystem: "HISTORY", cmd: "APPLY_NEXT" });
+  },
+  clearHistory: () => {
+    rwmRuntime.dispatch({ subsystem: "HISTORY", cmd: "CLEAR_HISTORY" });
+  }
+};
+
+// src/window-manager/internal/features/workspace/workspace-resize-listener.tsx
 import { Fragment as Fragment3, jsx as jsx3 } from "react/jsx-runtime";
 function WorkspaceResizeListener() {
   const { wsElement } = useWorkspaceState();
@@ -1172,6 +1307,7 @@ function WorkspaceResizeListener() {
       return;
     const onResize = () => {
       wsApi.updateWsSize();
+      appHistoryApi.clearHistory();
     };
     onResize();
     const observer = new ResizeObserver(onResize);
@@ -1192,6 +1328,9 @@ var dragApi = {
     rafRuntime.dispatch({ targetWinId, subsystem: "RAF_DRAG", cmd: "LOOP_DRAG" });
   },
   stopDrag: (targetWinId) => {
+    const isNotDragging = !windowRegistry[targetWinId].getState().isDragging;
+    if (isNotDragging)
+      return;
     rwmRuntime.dispatch({
       targetWinId,
       subsystem: "DRAG",
@@ -1200,12 +1339,36 @@ var dragApi = {
   }
 };
 
+// src/window-manager/internal/features/history/history-keys-listener.tsx
+import { useEffect as useEffect3 } from "react";
+import { Fragment as Fragment4, jsx as jsx4 } from "react/jsx-runtime";
+function HistoryKeysListener() {
+  useEffect3(() => {
+    const handleKeyDown = (e) => {
+      const ctrlOrCmd = e.metaKey || e.ctrlKey;
+      if (!ctrlOrCmd)
+        return;
+      if (e.key.toLowerCase() === "z" && !e.shiftKey) {
+        e.preventDefault();
+        appHistoryApi.moveToPreviousSnapshot();
+      }
+      if (e.key.toLowerCase() === "z" && e.shiftKey) {
+        e.preventDefault();
+        appHistoryApi.moveToNextSnapshot();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+  return /* @__PURE__ */ jsx4(Fragment4, {});
+}
+
 // src/window-manager/workspace-layout.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function WorkspaceLayout({ children, className }) {
   const { setWsElement, wsElement, isBelowBreakPoint, activeWindowId } = useWorkspaceState();
   const workspaceRef = useRef(null);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!workspaceRef.current)
       return;
     setWsElement(workspaceRef.current);
@@ -1223,10 +1386,11 @@ function WorkspaceLayout({ children, className }) {
       onPointerUp: disabledDragAndResize,
       className: className ? className : "fixed overflow-hidden h-full w-full touch-none -z-50",
       children: [
-        /* @__PURE__ */ jsx4(WorkspaceResizeListener, {}),
-        /* @__PURE__ */ jsx4(CursorMoveListener, {}),
+        /* @__PURE__ */ jsx5(WorkspaceResizeListener, {}),
+        /* @__PURE__ */ jsx5(HistoryKeysListener, {}),
+        /* @__PURE__ */ jsx5(CursorMoveListener, {}),
         /* @__PURE__ */ jsxs2("div", { className: " w-full h-full relative overflow-hidden", children: [
-          !isBelowBreakPoint && /* @__PURE__ */ jsx4(DockingControls, {}),
+          !isBelowBreakPoint && /* @__PURE__ */ jsx5(DockingControls, {}),
           children
         ] })
       ]
@@ -1238,12 +1402,12 @@ function WorkspaceLayout({ children, className }) {
 import { create as create2 } from "zustand";
 
 // src/window-manager/internal/features/window-layout.tsx
-import { useEffect as useEffect4, useRef as useRef2 } from "react";
+import { useEffect as useEffect5, useRef as useRef2 } from "react";
 
 // src/window-manager/internal/assets/svg-win-icons.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function IconWinMaximize({ color }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1255,7 +1419,7 @@ function IconWinMaximize({ color }) {
       stroke: color ? color : "#cccccc",
       color: color ? color : "#cccccc",
       className: "size-6",
-      children: /* @__PURE__ */ jsx5(
+      children: /* @__PURE__ */ jsx6(
         "path",
         {
           strokeLinecap: "round",
@@ -1267,7 +1431,7 @@ function IconWinMaximize({ color }) {
   );
 }
 function IconWinDemaximize({ color }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1279,7 +1443,7 @@ function IconWinDemaximize({ color }) {
       stroke: color ? color : "#cccccc",
       color: color ? color : "#cccccc",
       className: "size-6",
-      children: /* @__PURE__ */ jsx5(
+      children: /* @__PURE__ */ jsx6(
         "path",
         {
           strokeLinecap: "round",
@@ -1291,7 +1455,7 @@ function IconWinDemaximize({ color }) {
   );
 }
 function IconWinMinimize({ color }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1303,7 +1467,7 @@ function IconWinMinimize({ color }) {
       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" })
+      children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18 18 6M6 6l12 12" })
     }
   );
 }
@@ -1462,7 +1626,7 @@ var getOpenWinCount = () => {
 };
 
 // src/window-manager/internal/features/resizing/resizing-controls.tsx
-import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function ResizingControls({ winId }) {
   const { winCoord, winWidth, winHeight, resizeAction } = windowRegistry[winId]();
   const startResize = (direction) => {
@@ -1471,8 +1635,8 @@ function ResizingControls({ winId }) {
   const stopResize = () => {
     resizeApi.stopResize(winId);
   };
-  return /* @__PURE__ */ jsxs3(Fragment4, { children: [
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs3(Fragment5, { children: [
+    /* @__PURE__ */ jsx7(
       "span",
       {
         onPointerUp: stopResize,
@@ -1484,10 +1648,10 @@ function ResizingControls({ winId }) {
           left: `${winCoord.pointX + winWidth - 4}px`,
           height: `${winHeight}px`
         },
-        children: /* @__PURE__ */ jsx6("div", { className: `w-1 h-full bg-zinc-50` })
+        children: /* @__PURE__ */ jsx7("div", { className: `w-1 h-full bg-zinc-50` })
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "span",
       {
         onPointerUp: stopResize,
@@ -1499,10 +1663,10 @@ function ResizingControls({ winId }) {
           left: `${winCoord.pointX - 4}px`,
           height: `${winHeight}px`
         },
-        children: /* @__PURE__ */ jsx6("div", { className: `w-1 h-full bg-zinc-50` })
+        children: /* @__PURE__ */ jsx7("div", { className: `w-1 h-full bg-zinc-50` })
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "span",
       {
         onPointerUp: stopResize,
@@ -1514,10 +1678,10 @@ function ResizingControls({ winId }) {
           left: `${winCoord.pointX}px`,
           width: `${winWidth}px`
         },
-        children: /* @__PURE__ */ jsx6("div", { className: `w-full h-1 bg-zinc-50` })
+        children: /* @__PURE__ */ jsx7("div", { className: `w-full h-1 bg-zinc-50` })
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "span",
       {
         onPointerUp: stopResize,
@@ -1529,10 +1693,10 @@ function ResizingControls({ winId }) {
           left: `${winCoord.pointX}px`,
           width: `${winWidth}px`
         },
-        children: /* @__PURE__ */ jsx6("div", { className: `w-full h-1 bg-zinc-50` })
+        children: /* @__PURE__ */ jsx7("div", { className: `w-full h-1 bg-zinc-50` })
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "span",
       {
         onPointerUp: stopResize,
@@ -1545,7 +1709,7 @@ function ResizingControls({ winId }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "span",
       {
         onPointerUp: stopResize,
@@ -1558,7 +1722,7 @@ function ResizingControls({ winId }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "span",
       {
         onPointerUp: stopResize,
@@ -1566,12 +1730,12 @@ function ResizingControls({ winId }) {
         id: "win-resize-top-right-all",
         className: "fixed h-3 w-3 opacity-60 cursor-ne-resize z-20",
         style: {
-          top: `${winCoord.pointY - 6}px`,
-          left: `${winCoord.pointX + winWidth - 6}px`
+          top: `${winCoord.pointY - 8}px`,
+          left: `${winCoord.pointX + winWidth - 8}px`
         }
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "span",
       {
         onPointerUp: stopResize,
@@ -1579,8 +1743,8 @@ function ResizingControls({ winId }) {
         id: "win-resize-top-left-all",
         className: "fixed h-3 w-3 opacity-60 cursor-nw-resize z-20",
         style: {
-          top: `${winCoord.pointY - 6}px`,
-          left: `${winCoord.pointX - 6}px`
+          top: `${winCoord.pointY - 8}px`,
+          left: `${winCoord.pointX - 8}px`
         }
       }
     )
@@ -1588,9 +1752,9 @@ function ResizingControls({ winId }) {
 }
 
 // src/window-manager/internal/features/drag/drag-handle.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function DragHandle({ winId }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       onPointerDown: () => dragApi.startDrag(winId),
@@ -1604,7 +1768,7 @@ function DragHandle({ winId }) {
 }
 
 // src/window-manager/internal/features/window-layout.tsx
-import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 function WindowLayout({
   children,
   windowName,
@@ -1628,11 +1792,12 @@ function WindowLayout({
     winWidth,
     winHeight
   } = windowRegistry[winId]();
-  useEffect4(() => {
+  useEffect5(() => {
     setWinElement(windowRef.current);
   }, [setWinElement]);
-  useEffect4(() => {
+  useEffect5(() => {
     dockingResolver[defaultDock](winId);
+    appHistoryApi.clearHistory();
   }, [wsElement]);
   const dockingResolver = {
     right: dockApi.dockWindowRight,
@@ -1646,30 +1811,30 @@ function WindowLayout({
     "bottom-left": dockApi.dockWindowBottomLeft,
     default: dockApi.demaximizeWindow
   };
-  const maximizeControl = winVisualState === "maximized" ? /* @__PURE__ */ jsx8(
+  const maximizeControl = winVisualState === "maximized" ? /* @__PURE__ */ jsx9(
     "button",
     {
       className: `block hover:bg-gray-500 hover:bg-opacity-10 px-5 h-full`,
       onClick: () => dockApi.demaximizeWindow(winId),
-      children: /* @__PURE__ */ jsx8(IconWinDemaximize, { color: style?.navControlsColor })
+      children: /* @__PURE__ */ jsx9(IconWinDemaximize, { color: style?.navControlsColor })
     }
-  ) : /* @__PURE__ */ jsx8(
+  ) : /* @__PURE__ */ jsx9(
     "button",
     {
       className: `block hover:bg-gray-500 hover:bg-opacity-10 px-5 h-full`,
       onClick: () => dockApi.maximizeWindow(winId),
-      children: /* @__PURE__ */ jsx8(IconWinMaximize, { color: style?.navControlsColor })
+      children: /* @__PURE__ */ jsx9(IconWinMaximize, { color: style?.navControlsColor })
     }
   );
-  const closeControl = /* @__PURE__ */ jsx8(
+  const closeControl = /* @__PURE__ */ jsx9(
     "button",
     {
       className: "hover:bg-red-500 hover:bg-opacity-20 px-5 h-full",
       onClick: () => focusApi.closeWindowAndRefocus(winId),
-      children: /* @__PURE__ */ jsx8(IconWinMinimize, { color: style?.navControlsColor })
+      children: /* @__PURE__ */ jsx9(IconWinMinimize, { color: style?.navControlsColor })
     }
   );
-  return /* @__PURE__ */ jsxs4(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment6, { children: [
     /* @__PURE__ */ jsxs4(
       "div",
       {
@@ -1701,16 +1866,16 @@ function WindowLayout({
             ${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 }),
-                /* @__PURE__ */ jsx8(DragHandle, { winId }),
+                /* @__PURE__ */ jsx9("div", { className: "shrink h-8 px-2 text-white flex items-center text-sm truncate min-w-0", children: windowName }),
+                /* @__PURE__ */ jsx9("div", { className: "h-8 px-2 text-white flex items-center text-sm truncate min-w-0", children: navbarChildren }),
+                /* @__PURE__ */ jsx9(DragHandle, { winId }),
                 !isBelowBreakPoint && maximizeControl,
                 closeControl
               ]
             }
           ),
-          !isBelowBreakPoint && /* @__PURE__ */ jsx8(ResizingControls, { winId }),
-          /* @__PURE__ */ jsx8("div", { className: `relative w-full h-[calc(100%-32px)] overflow-auto select-text`, children })
+          !isBelowBreakPoint && /* @__PURE__ */ jsx9(ResizingControls, { winId }),
+          /* @__PURE__ */ jsx9("div", { className: `relative w-full h-[calc(100%-32px)] overflow-auto select-text`, children })
         ]
       }
     ),
@@ -1719,7 +1884,7 @@ function WindowLayout({
 }
 
 // src/window-manager/internal/features/window-button.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function WindowButton({
   children,
   winId,
@@ -1736,7 +1901,7 @@ function WindowButton({
       focusApi.bringWindowToFocus(windowId);
     }
   };
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "button",
     {
       id: `${windowId}_button`,
@@ -1751,7 +1916,7 @@ function WindowButton({
 }
 
 // src/window-manager/registration/window-store-factory.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var defaultMinWidth = 256;
 var defaultMinHeight = 64;
 var createWindowStore = () => {
@@ -1767,8 +1932,8 @@ var createWindowStore = () => {
     winHeight: defaultMinHeight,
     winVisualState: "demaximized",
     isActive: false,
-    isDragging: false,
     isWindowClosed: true,
+    isDragging: false,
     resizeAction: false,
     WIN_MIN_WIDTH: defaultMinWidth,
     WIN_MIN_HEIGHT: defaultMinHeight
@@ -1777,8 +1942,8 @@ var createWindowStore = () => {
   return {
     id: storeInstance.getState().windowId,
     store: storeInstance,
-    Window: (props) => /* @__PURE__ */ jsx10(WindowLayout, { ...props, winId: windowInstanceId }),
-    Button: (props) => /* @__PURE__ */ jsx10(WindowButton, { ...props, winId: windowInstanceId })
+    Window: (props) => /* @__PURE__ */ jsx11(WindowLayout, { ...props, winId: windowInstanceId }),
+    Button: (props) => /* @__PURE__ */ jsx11(WindowButton, { ...props, winId: windowInstanceId })
   };
 };
 export {