ssovee-os-web-ui 0.1.91 → 0.1.92

package/dist/index.cjs

@@ -2453,7 +2453,17 @@ function PluginPlayground({
   );
 }
 var SIDEBAR_WIDTH = 200;
-var TOP_BAR_HEIGHT = 37;
+var initialState = {
+  position: { x: 0, y: 40 },
+  isDragging: false,
+  startPosition: { x: 0, y: 40 },
+  isMinimized: false,
+  isMaximized: false,
+  windowSize: { width: 600, height: 300 },
+  resizeStart: null,
+  defaultSize: { width: 600, height: 300 },
+  preMaximizeState: null
+};
 var reducer = (state, action) => {
   switch (action.type) {
     case "START_DRAG":
@@ -2463,7 +2473,10 @@ var reducer = (state, action) => {
     case "STOP_DRAG":
       return { ...state, isDragging: false };
     case "START_RESIZE":
-      return { ...state, resizeStart: action.payload };
+      return {
+        ...state,
+        resizeStart: action.payload
+      };
     case "RESIZE":
       return { ...state, windowSize: action.payload };
     case "STOP_RESIZE":
@@ -2489,7 +2502,7 @@ var reducer = (state, action) => {
           ...state,
           isMaximized: false,
           windowSize: state.preMaximizeState?.windowSize || state.defaultSize,
-          position: state.preMaximizeState?.position || { x: 0, y: TOP_BAR_HEIGHT },
+          position: state.preMaximizeState?.position || { x: 0, y: 40 },
           preMaximizeState: null
         };
       }
@@ -2501,28 +2514,11 @@ var reducer = (state, action) => {
           windowSize: state.windowSize
         },
         windowSize: action.payload || {
-          width: typeof window !== "undefined" ? window.innerWidth : 600,
-          height: typeof window !== "undefined" ? window.innerHeight - TOP_BAR_HEIGHT : 300
+          width: window.innerWidth,
+          height: window.innerHeight
         },
-        position: { x: 0, y: TOP_BAR_HEIGHT }
+        position: { x: 0, y: 40 }
       };
-    case "CLAMP_BOUNDS": {
-      const clampedWidth = Math.min(state.windowSize.width, action.payload.maxW);
-      const clampedHeight = Math.min(state.windowSize.height, action.payload.maxH);
-      const clampedX = Math.max(
-        0,
-        Math.min(state.position.x, action.payload.maxW - clampedWidth)
-      );
-      const clampedY = Math.max(
-        TOP_BAR_HEIGHT,
-        Math.min(state.position.y, action.payload.maxH - clampedHeight)
-      );
-      return {
-        ...state,
-        windowSize: state.isMaximized ? { width: action.payload.maxW, height: action.payload.maxH } : { width: clampedWidth, height: clampedHeight },
-        position: state.isMaximized ? { x: 0, y: TOP_BAR_HEIGHT } : { x: clampedX, y: clampedY }
-      };
-    }
     default:
       return state;
   }
@@ -2541,40 +2537,12 @@ var WindowWithSideMenu = ({
     removeShortcutListener,
     getShortcutByCommand
   } = useShortcutFormatter_default({ globalKeyboardShortcuts });
-  const getInitialDimensions = React23.useCallback(() => {
-    const rawSize = app.windowSize.windowSize ?? defaultSize;
-    if (typeof window === "undefined") return rawSize;
-    return {
-      width: Math.min(rawSize.width, window.innerWidth),
-      height: Math.min(rawSize.height, window.innerHeight - TOP_BAR_HEIGHT)
-    };
-  }, [app.windowSize.windowSize, defaultSize]);
-  const initialDimensions = getInitialDimensions();
   const [state, dispatch] = React23.useReducer(reducer, {
-    position: { x: 0, y: TOP_BAR_HEIGHT },
-    isDragging: false,
-    startPosition: { x: 0, y: TOP_BAR_HEIGHT },
-    isMinimized: false,
-    isMaximized: false,
-    windowSize: initialDimensions,
-    resizeStart: null,
-    defaultSize: initialDimensions,
-    preMaximizeState: null
+    ...initialState,
+    windowSize: app.windowSize.windowSize ?? defaultSize,
+    defaultSize: app.windowSize.windowSize ?? defaultSize
   });
   const windowRef = React23.useRef(null);
-  React23.useEffect(() => {
-    const handleViewportResize = () => {
-      dispatch({
-        type: "CLAMP_BOUNDS",
-        payload: {
-          maxW: window.innerWidth,
-          maxH: window.innerHeight - TOP_BAR_HEIGHT
-        }
-      });
-    };
-    window.addEventListener("resize", handleViewportResize);
-    return () => window.removeEventListener("resize", handleViewportResize);
-  }, []);
   React23.useEffect(() => {
     if (app.isMinimize !== state.isMinimized) {
       dispatch({ type: "SYNC_MINIMIZE_STATE", payload: app.isMinimize });
@@ -2590,66 +2558,48 @@ var WindowWithSideMenu = ({
       }
     });
   };
-  const handleMouseMove = React23.useCallback(
-    (e) => {
-      if (state.isDragging) {
-        const newX = e.clientX - state.startPosition.x;
-        const newY = e.clientY - state.startPosition.y;
-        const boundedX = Math.max(
-          0,
-          Math.min(newX, window.innerWidth - state.windowSize.width)
-        );
-        const boundedY = Math.max(
-          TOP_BAR_HEIGHT,
-          Math.min(newY, window.innerHeight - state.windowSize.height)
-        );
-        dispatch({ type: "DRAG", payload: { x: boundedX, y: boundedY } });
-      }
-      if (state.resizeStart && isResizable && app.windowSize.isAppWindowResizing) {
-        const effectiveMinWidth = Math.min(
-          Math.max(defaultSize.width, state.defaultSize.width),
-          window.innerWidth
-        );
-        const effectiveMinHeight = Math.min(
-          Math.max(defaultSize.height, state.defaultSize.height),
-          window.innerHeight - TOP_BAR_HEIGHT
-        );
-        let newWidth = state.windowSize.width + (e.clientX - state.resizeStart.x);
-        let newHeight = state.windowSize.height + (e.clientY - state.resizeStart.y);
-        newWidth = Math.max(effectiveMinWidth, newWidth);
-        newHeight = Math.max(effectiveMinHeight, newHeight);
-        const maxWidth = window.innerWidth - state.position.x;
-        const maxHeight = window.innerHeight - state.position.y;
-        newWidth = Math.min(newWidth, maxWidth);
-        newHeight = Math.min(newHeight, maxHeight);
-        dispatch({
-          type: "RESIZE",
-          payload: {
-            width: newWidth,
-            height: newHeight
-          }
-        });
-      }
-    },
-    [
-      state.isDragging,
-      state.resizeStart,
-      state.startPosition,
-      state.windowSize,
-      state.position,
-      state.defaultSize,
-      defaultSize.width,
-      defaultSize.height,
-      isResizable,
-      app.windowSize.isAppWindowResizing
-    ]
-  );
-  const handleMouseUp = React23.useCallback(() => {
+  const handleMouseMove = (e) => {
+    if (state.isDragging) {
+      const newX = e.clientX - state.startPosition.x;
+      const newY = e.clientY - state.startPosition.y;
+      const boundedX = Math.max(
+        0,
+        Math.min(newX, window.innerWidth - state.windowSize.width)
+      );
+      const boundedY = Math.max(
+        0,
+        Math.min(newY, window.innerHeight - state.windowSize.height)
+      );
+      dispatch({ type: "DRAG", payload: { x: boundedX, y: boundedY } });
+    }
+    if (state.resizeStart && isResizable && app.windowSize.isAppWindowResizing) {
+      let newWidth = state.windowSize.width + (e.clientX - (state.resizeStart?.x ?? 0));
+      let newHeight = state.windowSize.height + (e.clientY - (state.resizeStart?.y ?? 0));
+      newWidth = Math.max(defaultSize.width, newWidth, state.defaultSize.width);
+      newHeight = Math.max(
+        defaultSize.height,
+        newHeight,
+        state.defaultSize.height
+      );
+      const maxWidth = window.innerWidth - state.position.x;
+      const maxHeight = window.innerHeight - state.position.y;
+      newWidth = Math.min(newWidth, maxWidth);
+      newHeight = Math.min(newHeight, maxHeight);
+      dispatch({
+        type: "RESIZE",
+        payload: {
+          width: newWidth,
+          height: newHeight
+        }
+      });
+    }
+  };
+  const handleMouseUp = () => {
     if (state.isDragging) dispatch({ type: "STOP_DRAG" });
     if (state.resizeStart) dispatch({ type: "STOP_RESIZE" });
-  }, [state.isDragging, state.resizeStart]);
+  };
   const handleResizeStart = (e) => {
-    if (!isResizable || !app.windowSize.isAppWindowResizing) return;
+    if (!isResizable && !app.windowSize.isAppWindowResizing) return;
     e.stopPropagation();
     document.body.style.userSelect = "none";
     dispatch({ type: "START_RESIZE", payload: { x: e.clientX, y: e.clientY } });
@@ -2664,34 +2614,27 @@ var WindowWithSideMenu = ({
       window.removeEventListener("mouseup", handleMouseUp);
       document.body.style.userSelect = "";
     };
-  }, [state.isDragging, state.resizeStart, handleMouseMove, handleMouseUp]);
+  }, [state.isDragging, state.resizeStart]);
   React23.useEffect(() => {
-    const currentRef = windowRef.current;
-    const handleActive = () => {
-      if (app?.callback) {
-        app.callback("CLICKED");
-      }
-    };
-    if (currentRef) {
-      currentRef.addEventListener("click", handleActive);
+    if (windowRef.current) {
+      windowRef.current.addEventListener("click", () => {
+        if (app?.callback) {
+          app?.callback("CLICKED");
+        }
+      });
     }
-    return () => {
-      if (currentRef) {
-        currentRef.removeEventListener("click", handleActive);
-      }
-    };
-  }, [app?.slug, app]);
+  }, [app?.slug, windowRef]);
   React23.useEffect(() => {
     const handleExitApp = () => {
       if (app?.callback) {
-        app.callback("CLOSE_APP");
+        app?.callback("CLOSE_APP");
       }
     };
     addShortcutListener("exit_app", handleExitApp);
     return () => {
       removeShortcutListener("exit_app", handleExitApp);
     };
-  }, [app?.slug, app.isActive, app, addShortcutListener, removeShortcutListener]);
+  }, [app?.slug, app.isActive]);
   React23.useEffect(() => {
     const handleMinimize = () => {
       if (app?.slug && app.isActive) {
@@ -2700,7 +2643,7 @@ var WindowWithSideMenu = ({
           payload: state.windowSize
         });
         if (app?.callback) {
-          app.callback("MINIMIZE_APP");
+          app?.callback("MINIMIZE_APP");
         }
       }
     };
@@ -2708,7 +2651,7 @@ var WindowWithSideMenu = ({
     return () => {
       removeShortcutListener("minimize_app", handleMinimize);
     };
-  }, [app?.slug, app.isActive, state.isMinimized, state.windowSize, app, addShortcutListener, removeShortcutListener]);
+  }, [app?.slug, app.isActive, state.isMinimized, state.windowSize]);
   React23.useEffect(() => {
     const handleMaximize = () => {
       if (app?.slug && app.isActive) {
@@ -2716,7 +2659,7 @@ var WindowWithSideMenu = ({
           type: "TOGGLE_MAXIMIZE",
           payload: {
             width: window.innerWidth,
-            height: window.innerHeight - TOP_BAR_HEIGHT
+            height: window.innerHeight - 37
           }
         });
       }
@@ -2725,7 +2668,7 @@ var WindowWithSideMenu = ({
     return () => {
       removeShortcutListener("maximize_app", handleMaximize);
     };
-  }, [app?.slug, app.isActive, addShortcutListener, removeShortcutListener]);
+  }, [app?.slug, app.isActive]);
   if (state.isMinimized) {
     return null;
   }
@@ -2733,31 +2676,33 @@ var WindowWithSideMenu = ({
     "div",
     {
       ref: windowRef,
-      className: "flex rounded-[10px] overflow-hidden window-drop-shadow",
+      className: "flex rounded-[10px] overflow-hidden window-drop-shadow ",
       style: {
-        width: state.isMaximized ? "100vw" : `${state.windowSize.width}px`,
-        height: state.isMaximized ? `calc(100vh - ${TOP_BAR_HEIGHT}px)` : `${state.windowSize.height}px`,
-        transform: state.isMaximized ? void 0 : `translate(${state.position.x}px, ${state.position.y - TOP_BAR_HEIGHT}px)`,
+        width: `${state.windowSize.width}px`,
+        height: `${state.windowSize.height}px`,
+        transform: state.isMaximized ? void 0 : `translate(${state.position.x}px, ${state.position.y - 37}px)`,
+        overflow: state.isMinimized ? "hidden" : "auto",
         position: "absolute",
-        minWidth: state.isMaximized ? "100vw" : `min(${state.defaultSize.width}px, 100vw)`,
-        minHeight: state.isMaximized ? `calc(100vh - ${TOP_BAR_HEIGHT}px)` : `min(${state.defaultSize.height}px, 100vh)`,
+        minWidth: `${state.defaultSize.width}px`,
+        minHeight: `${state.defaultSize.height}px`,
         zIndex: state.isDragging ? 3 : app?.isActive ? 2 : 1
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "bg-primary flex flex-col shrink-0 overflow-y-auto",
+            className: "bg-primary flex flex-col",
             style: {
               width: `${SIDEBAR_WIDTH}px`,
               minWidth: `${SIDEBAR_WIDTH}px`,
-              maxWidth: `${SIDEBAR_WIDTH}px`
+              maxWidth: `${SIDEBAR_WIDTH}px`,
+              flexShrink: 0
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
-                  className: "flex items-center gap-[8px] pl-[20px] pt-[20px] select-none",
+                  className: "flex items-center gap-[8px] pl-[20px] pt-[20px]",
                   onMouseDown: handleMouseDown,
                   style: { cursor: state.isMaximized ? "default" : "move" },
                   children: [
@@ -2767,7 +2712,7 @@ var WindowWithSideMenu = ({
                         className: "w-[12px] h-[12px] bg-[#FF6157] rounded-full",
                         onClick: () => {
                           if (app?.callback) {
-                            app.callback("CLOSE_APP");
+                            app?.callback("CLOSE_APP");
                           }
                         },
                         title: `Close ${formatKeys(getShortcutByCommand("exit_app"))}`,
@@ -2785,7 +2730,7 @@ var WindowWithSideMenu = ({
                             payload: state.windowSize
                           });
                           if (app?.callback) {
-                            app.callback("MINIMIZE_APP");
+                            app?.callback("MINIMIZE_APP");
                           }
                         },
                         title: state.isMinimized ? "Restore" : `Minimize ${formatKeys(getShortcutByCommand("minimize_app"))}`,
@@ -2802,7 +2747,7 @@ var WindowWithSideMenu = ({
                             type: "TOGGLE_MAXIMIZE",
                             payload: {
                               width: window.innerWidth,
-                              height: window.innerHeight - TOP_BAR_HEIGHT
+                              height: window.innerHeight - 37
                             }
                           });
                         },
@@ -2829,14 +2774,14 @@ var WindowWithSideMenu = ({
                   ]
                 }
               ) }),
-              menu && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[15px] flex flex-col text-[13px]", children: menu.items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+              menu && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[15px]  flex flex-col  text-[13px]", children: menu?.items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
-                  className: `${item.isActive ? "bg-brand-color text-white" : "text-neutral-500"} px-[10px] mx-2 flex items-center gap-[8px] rounded-[6px] h-[30px] cursor-pointer transition-all duration-200`,
+                  className: `${item.isActive ? "bg-brand-color text-white" : "text-neutral-500"} px-[10px] mx-2 flex items-center gap-[8px] rounded-[6px] h-[30px] text-neutral-400 cursor-pointer transition-all duration-200`,
                   onClick: item.onClick,
                   children: [
                     item.icon,
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.title })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "", children: item.title })
                   ]
                 },
                 index
@@ -2847,36 +2792,50 @@ var WindowWithSideMenu = ({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "flex-1 bg-secondary flex flex-col min-w-0 h-full overflow-hidden",
+            className: "flex-1 bg-secondary flex flex-col",
             style: {
+              minWidth: 0,
               width: `calc(100% - ${SIDEBAR_WIDTH}px)`
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
-                  className: "h-[50px] py-2 flex flex-col border-b border-b-surface-1 border-b-[0.5px] justify-center text-[13px] px-[12px] select-none shrink-0",
+                  className: "h-min-[50px] py-2 flex flex-col border-b border-b-surface-1 border-b-[0.5px] justify-center text-[13px] mx-[12px] select-none",
                   onMouseDown: handleMouseDown,
                   style: {
+                    userSelect: "none",
+                    WebkitUserSelect: "none",
+                    MozUserSelect: "none",
+                    msUserSelect: "none",
                     cursor: state.isMaximized ? "default" : "move"
                   },
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Typography_default, { variant: "p", className: "font-medium text-neutral-500 truncate", children: app?.name }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Typography_default, { variant: "p", className: "text-neutral-400 text-[11px] truncate", children: menu?.items.find((item) => item.isActive)?.title })
+                    /* @__PURE__ */ jsxRuntime.jsx(Typography_default, { variant: "p", className: "font-medium text-neutral-500 ", children: app?.name }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Typography_default, { variant: "p", className: "text-neutral-400 text-[11px]", children: menu?.items.find((item) => item.isActive)?.title })
                   ]
                 }
               ),
-              !state.isMinimized && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 w-full overflow-y-auto min-h-0", children: React23.isValidElement(children) && typeof children.type !== "string" ? React23__namespace.default.cloneElement(children, {
-                windowSize: state.windowSize,
-                isAppWindowResizing: state.resizeStart !== null
-              }) : children })
+              !state.isMinimized && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "h-full w-full overflow-y-auto",
+                  style: {
+                    maxHeight: `${state.windowSize.height - 37}px`
+                  },
+                  children: React23.isValidElement(children) && typeof children.type !== "string" ? React23__namespace.default.cloneElement(children, {
+                    windowSize: state.windowSize,
+                    isAppWindowResizing: state.resizeStart !== null
+                  }) : children
+                }
+              )
             ]
           }
         ),
         isResizable && !state.isMaximized && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "absolute bottom-0 right-0 w-5 h-5 cursor-se-resize z-10",
+            className: "absolute bottom-0 right-0 w-5 h-5 cursor-se-resize",
             style: {
               borderBottomRightRadius: "10px"
             },
@@ -2888,7 +2847,17 @@ var WindowWithSideMenu = ({
   );
 };
 var WindowWithSideMenu_default = WindowWithSideMenu;
-var TOP_BAR_HEIGHT2 = 37;
+var initialState2 = {
+  position: { x: 0, y: 40 },
+  isDragging: false,
+  startPosition: { x: 0, y: 40 },
+  isMinimized: false,
+  isMaximized: false,
+  windowSize: { width: 300, height: 300 },
+  resizeStart: null,
+  defaultSize: { width: 300, height: 300 },
+  preMaximizeState: null
+};
 var reducer2 = (state, action) => {
   switch (action.type) {
     case "START_DRAG":
@@ -2898,7 +2867,10 @@ var reducer2 = (state, action) => {
     case "STOP_DRAG":
       return { ...state, isDragging: false };
     case "START_RESIZE":
-      return { ...state, resizeStart: action.payload };
+      return {
+        ...state,
+        resizeStart: action.payload
+      };
     case "RESIZE":
       return { ...state, windowSize: action.payload };
     case "STOP_RESIZE":
@@ -2924,10 +2896,7 @@ var reducer2 = (state, action) => {
           ...state,
           isMaximized: false,
           windowSize: state.preMaximizeState?.windowSize || state.defaultSize,
-          position: state.preMaximizeState?.position || {
-            x: 0,
-            y: TOP_BAR_HEIGHT2
-          },
+          position: state.preMaximizeState?.position || { x: 0, y: 40 },
           preMaximizeState: null
         };
       }
@@ -2939,34 +2908,11 @@ var reducer2 = (state, action) => {
           windowSize: state.windowSize
         },
         windowSize: action.payload || {
-          width: typeof window !== "undefined" ? window.innerWidth : 300,
-          height: typeof window !== "undefined" ? window.innerHeight - TOP_BAR_HEIGHT2 : 300
+          width: window.innerWidth,
+          height: window.innerHeight
         },
-        position: { x: 0, y: TOP_BAR_HEIGHT2 }
+        position: state.position
       };
-    case "CLAMP_BOUNDS": {
-      const clampedWidth = Math.min(
-        state.windowSize.width,
-        action.payload.maxW
-      );
-      const clampedHeight = Math.min(
-        state.windowSize.height,
-        action.payload.maxH
-      );
-      const clampedX = Math.max(
-        0,
-        Math.min(state.position.x, action.payload.maxW - clampedWidth)
-      );
-      const clampedY = Math.max(
-        TOP_BAR_HEIGHT2,
-        Math.min(state.position.y, action.payload.maxH - clampedHeight)
-      );
-      return {
-        ...state,
-        windowSize: state.isMaximized ? { width: action.payload.maxW, height: action.payload.maxH } : { width: clampedWidth, height: clampedHeight },
-        position: state.isMaximized ? { x: 0, y: TOP_BAR_HEIGHT2 } : { x: clampedX, y: clampedY }
-      };
-    }
     default:
       return state;
   }
@@ -2983,40 +2929,12 @@ var WindowWithoutSideMenu = ({
     removeShortcutListener,
     getShortcutByCommand
   } = useShortcutFormatter_default({ globalKeyboardShortcuts });
-  const getInitialDimensions = React23.useCallback(() => {
-    const rawSize = app.windowSize.windowSize ?? defaultSize;
-    if (typeof window === "undefined") return rawSize;
-    return {
-      width: Math.min(rawSize.width, window.innerWidth),
-      height: Math.min(rawSize.height, window.innerHeight - TOP_BAR_HEIGHT2)
-    };
-  }, [app.windowSize.windowSize, defaultSize]);
-  const initialDimensions = getInitialDimensions();
   const [state, dispatch] = React23.useReducer(reducer2, {
-    position: { x: 0, y: TOP_BAR_HEIGHT2 },
-    isDragging: false,
-    startPosition: { x: 0, y: TOP_BAR_HEIGHT2 },
-    isMinimized: false,
-    isMaximized: false,
-    windowSize: initialDimensions,
-    resizeStart: null,
-    defaultSize: initialDimensions,
-    preMaximizeState: null
+    ...initialState2,
+    windowSize: app.windowSize.windowSize ?? defaultSize,
+    defaultSize: app.windowSize.windowSize ?? defaultSize
   });
   const windowRef = React23.useRef(null);
-  React23.useEffect(() => {
-    const handleViewportResize = () => {
-      dispatch({
-        type: "CLAMP_BOUNDS",
-        payload: {
-          maxW: window.innerWidth,
-          maxH: window.innerHeight - TOP_BAR_HEIGHT2
-        }
-      });
-    };
-    window.addEventListener("resize", handleViewportResize);
-    return () => window.removeEventListener("resize", handleViewportResize);
-  }, []);
   React23.useEffect(() => {
     if (app.isMinimize !== state.isMinimized) {
       dispatch({ type: "SYNC_MINIMIZE_STATE", payload: app.isMinimize });
@@ -3032,64 +2950,44 @@ var WindowWithoutSideMenu = ({
       }
     });
   };
-  const handleMouseMove = React23.useCallback(
-    (e) => {
-      if (state.isDragging) {
-        const newX = e.clientX - state.startPosition.x;
-        const newY = e.clientY - state.startPosition.y;
-        const boundedX = Math.max(
-          0,
-          Math.min(newX, window.innerWidth - state.windowSize.width)
-        );
-        const boundedY = Math.max(
-          TOP_BAR_HEIGHT2,
-          Math.min(newY, window.innerHeight - state.windowSize.height)
-        );
-        dispatch({ type: "DRAG", payload: { x: boundedX, y: boundedY } });
-      }
-      if (state.resizeStart && isResizable && app.windowSize.isAppWindowResizing) {
-        const effectiveMinWidth = Math.min(
-          state.defaultSize.width,
-          window.innerWidth
-        );
-        const effectiveMinHeight = Math.min(
-          state.defaultSize.height,
-          window.innerHeight - TOP_BAR_HEIGHT2
-        );
-        let newWidth = state.windowSize.width + (e.clientX - state.resizeStart.x);
-        let newHeight = state.windowSize.height + (e.clientY - state.resizeStart.y);
-        newWidth = Math.max(effectiveMinWidth, newWidth);
-        newHeight = Math.max(effectiveMinHeight, newHeight);
-        const maxWidth = window.innerWidth - state.position.x;
-        const maxHeight = window.innerHeight - state.position.y;
-        newWidth = Math.min(newWidth, maxWidth);
-        newHeight = Math.min(newHeight, maxHeight);
-        dispatch({
-          type: "RESIZE",
-          payload: {
-            width: newWidth,
-            height: newHeight
-          }
-        });
-      }
-    },
-    [
-      state.isDragging,
-      state.resizeStart,
-      state.startPosition,
-      state.windowSize,
-      state.position,
-      state.defaultSize,
-      isResizable,
-      app.windowSize.isAppWindowResizing
-    ]
-  );
-  const handleMouseUp = React23.useCallback(() => {
+  const handleMouseMove = (e) => {
+    if (state.isDragging) {
+      const newX = e.clientX - state.startPosition.x;
+      const newY = e.clientY - state.startPosition.y;
+      const boundedX = Math.max(
+        0,
+        Math.min(newX, window.innerWidth - state.windowSize.width)
+      );
+      const boundedY = Math.max(
+        0,
+        Math.min(newY, window.innerHeight - state.windowSize.height)
+      );
+      dispatch({ type: "DRAG", payload: { x: boundedX, y: boundedY } });
+    }
+    if (state.resizeStart && isResizable && app.windowSize.isAppWindowResizing) {
+      let newWidth = state.windowSize.width + (e.clientX - (state.resizeStart?.x ?? 0));
+      let newHeight = state.windowSize.height + (e.clientY - (state.resizeStart?.y ?? 0));
+      newWidth = Math.max(state.defaultSize.width, newWidth);
+      newHeight = Math.max(state.defaultSize.height, newHeight);
+      const maxWidth = window.innerWidth - state.position.x;
+      const maxHeight = window.innerHeight - state.position.y;
+      newWidth = Math.min(newWidth, maxWidth);
+      newHeight = Math.min(newHeight, maxHeight);
+      dispatch({
+        type: "RESIZE",
+        payload: {
+          width: newWidth,
+          height: newHeight
+        }
+      });
+    }
+  };
+  const handleMouseUp = () => {
     if (state.isDragging) dispatch({ type: "STOP_DRAG" });
     if (state.resizeStart) dispatch({ type: "STOP_RESIZE" });
-  }, [state.isDragging, state.resizeStart]);
+  };
   const handleResizeStart = (e) => {
-    if (!isResizable || !app.windowSize.isAppWindowResizing) return;
+    if (!isResizable && !app.windowSize.isAppWindowResizing) return;
     e.stopPropagation();
     document.body.style.userSelect = "none";
     dispatch({ type: "START_RESIZE", payload: { x: e.clientX, y: e.clientY } });
@@ -3104,40 +3002,27 @@ var WindowWithoutSideMenu = ({
       window.removeEventListener("mouseup", handleMouseUp);
       document.body.style.userSelect = "";
     };
-  }, [state.isDragging, state.resizeStart, handleMouseMove, handleMouseUp]);
+  }, [state.isDragging, state.resizeStart]);
   React23.useEffect(() => {
-    const currentRef = windowRef.current;
-    const handleActive = () => {
-      if (app?.callback) {
-        app.callback("CLICKED");
-      }
-    };
-    if (currentRef) {
-      currentRef.addEventListener("click", handleActive);
+    if (windowRef.current) {
+      windowRef.current.addEventListener("click", () => {
+        if (app?.callback) {
+          app?.callback("CLICKED");
+        }
+      });
     }
-    return () => {
-      if (currentRef) {
-        currentRef.removeEventListener("click", handleActive);
-      }
-    };
-  }, [app?.slug, app]);
+  }, [app?.slug, windowRef]);
   React23.useEffect(() => {
     const handleExitApp = () => {
       if (app?.callback) {
-        app.callback("CLOSE_APP");
+        app?.callback("CLOSE_APP");
       }
     };
     addShortcutListener("exit_app", handleExitApp);
     return () => {
       removeShortcutListener("exit_app", handleExitApp);
     };
-  }, [
-    app?.slug,
-    app.isActive,
-    app,
-    addShortcutListener,
-    removeShortcutListener
-  ]);
+  }, [app?.slug, app.isActive]);
   React23.useEffect(() => {
     const handleMinimize = () => {
       if (app?.slug && app.isActive) {
@@ -3146,7 +3031,7 @@ var WindowWithoutSideMenu = ({
           payload: state.windowSize
         });
         if (app?.callback) {
-          app.callback("MINIMIZE_APP");
+          app?.callback("MINIMIZE_APP");
         }
       }
     };
@@ -3154,15 +3039,7 @@ var WindowWithoutSideMenu = ({
     return () => {
       removeShortcutListener("minimize_app", handleMinimize);
     };
-  }, [
-    app?.slug,
-    app.isActive,
-    state.isMinimized,
-    state.windowSize,
-    app,
-    addShortcutListener,
-    removeShortcutListener
-  ]);
+  }, [app?.slug, app.isActive, state.isMinimized, state.windowSize]);
   React23.useEffect(() => {
     const handleMaximize = () => {
       if (app?.slug && app.isActive) {
@@ -3170,7 +3047,7 @@ var WindowWithoutSideMenu = ({
           type: "TOGGLE_MAXIMIZE",
           payload: {
             width: window.innerWidth,
-            height: window.innerHeight - TOP_BAR_HEIGHT2
+            height: window.innerHeight - 37
           }
         });
       }
@@ -3179,7 +3056,7 @@ var WindowWithoutSideMenu = ({
     return () => {
       removeShortcutListener("maximize_app", handleMaximize);
     };
-  }, [app?.slug, app.isActive, addShortcutListener, removeShortcutListener]);
+  }, [app?.slug, app.isActive]);
   if (state.isMinimized) {
     return null;
   }
@@ -3187,106 +3064,117 @@ var WindowWithoutSideMenu = ({
     "div",
     {
       ref: windowRef,
-      className: "window-drop-shadow rounded-[10px] flex flex-col overflow-hidden",
+      className: "window-drop-shadow  rounded-[10px]",
       style: {
-        width: state.isMaximized ? "100vw" : `${state.windowSize.width}px`,
-        height: state.isMaximized ? `calc(100vh - ${TOP_BAR_HEIGHT2}px)` : `${state.windowSize.height}px`,
-        transform: state.isMaximized ? void 0 : `translate(${state.position.x}px, ${state.position.y - TOP_BAR_HEIGHT2}px)`,
+        width: `${state.windowSize.width}px`,
+        height: `${state.windowSize.height}px`,
+        transform: state.isMaximized ? void 0 : `translate(${state.position.x}px, ${state.position.y - 37}px)`,
+        overflow: state.isMinimized ? "hidden" : "auto",
         position: "absolute",
-        minWidth: state.isMaximized ? "100vw" : `min(${state.defaultSize.width}px, 100vw)`,
-        minHeight: state.isMaximized ? `calc(100vh - ${TOP_BAR_HEIGHT2}px)` : `min(${state.defaultSize.height}px, 100vh)`,
+        minWidth: `${state.defaultSize.width}px`,
+        minHeight: `${state.defaultSize.height}px`,
         zIndex: state.isDragging ? 3 : app?.isActive ? 2 : 1
       },
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full w-full relative min-w-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "relative flex items-center bg-primary h-[35px] select-none shrink-0",
-            onMouseDown: handleMouseDown,
-            style: { cursor: state.isMaximized ? "default" : "move" },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[8px] pl-[10px]", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    className: "w-[12px] h-[12px] bg-[#FF6157] rounded-full",
-                    onClick: () => {
-                      if (app?.callback) {
-                        app.callback("CLOSE_APP");
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "mx-auto overflow-hidden h-full w-full",
+          style: {
+            minWidth: `${state.defaultSize.width}px`,
+            minHeight: `${state.defaultSize.height}px`,
+            position: "relative"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "relative flex items-center bg-primary h-[35px] select-none",
+                onMouseDown: handleMouseDown,
+                style: { cursor: state.isMaximized ? "default" : "move" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[8px] pl-[10px]", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        className: "w-[12px] h-[12px] bg-[#FF6157] rounded-full",
+                        onClick: () => {
+                          if (app?.callback) {
+                            app?.callback("CLOSE_APP");
+                          }
+                        },
+                        title: `Close ${formatKeys(getShortcutByCommand("exit_app"))}`,
+                        style: { outline: "none", border: "none" }
                       }
-                    },
-                    title: `Close ${formatKeys(getShortcutByCommand("exit_app"))}`,
-                    style: { outline: "none", border: "none" },
-                    tabIndex: -1
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    className: "w-[12px] h-[12px] bg-[#FFC12F] rounded-full",
-                    onClick: () => {
-                      dispatch({
-                        type: "TOGGLE_MINIMIZE",
-                        payload: state.windowSize
-                      });
-                      if (app?.callback) {
-                        app.callback("MINIMIZE_APP");
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        className: "w-[12px] h-[12px] bg-[#FFC12F] rounded-full",
+                        onClick: () => {
+                          dispatch({
+                            type: "TOGGLE_MINIMIZE",
+                            payload: state.windowSize
+                          });
+                          if (app?.callback) {
+                            app?.callback("MINIMIZE_APP");
+                          }
+                        },
+                        title: state.isMinimized ? "Restore" : `Minimize ${formatKeys(
+                          getShortcutByCommand("minimize_app")
+                        )}`,
+                        style: { outline: "none", border: "none" }
                       }
-                    },
-                    title: state.isMinimized ? "Restore" : `Minimize ${formatKeys(
-                      getShortcutByCommand("minimize_app")
-                    )}`,
-                    style: { outline: "none", border: "none" },
-                    tabIndex: -1
-                  }
-                ),
-                isResizable && app.windowSize.isAppWindowResizing && /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    className: "w-[12px] h-[12px] bg-[#2ACB42] rounded-full",
-                    onClick: () => {
-                      dispatch({
-                        type: "TOGGLE_MAXIMIZE",
-                        payload: {
-                          width: window.innerWidth,
-                          height: window.innerHeight - TOP_BAR_HEIGHT2
-                        }
-                      });
-                    },
-                    title: state.isMaximized ? "Restore" : `Maximize ${formatKeys(
-                      getShortcutByCommand("maximize_app")
-                    )}`,
-                    style: { outline: "none", border: "none" },
-                    tabIndex: -1
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[60%] truncate", children: /* @__PURE__ */ jsxRuntime.jsx(
-                Typography_default,
-                {
-                  variant: "p",
-                  className: "text-neutral-500 text-[15px] truncate",
-                  children: app.name
-                }
-              ) })
-            ]
-          }
-        ),
-        !state.isMinimized && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 w-full bg-secondary overflow-y-auto min-h-0", children: React23.isValidElement(children) && typeof children.type !== "string" ? React23__namespace.default.cloneElement(children, {
-          windowSize: state.windowSize,
-          isAppWindowResizing: state.resizeStart !== null
-        }) : children }),
-        isResizable && !state.isMaximized && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "absolute bottom-0 right-0 w-5 h-5 cursor-se-resize z-10",
-            style: {
-              borderBottomRightRadius: "10px"
-            },
-            onMouseDown: handleResizeStart
-          }
-        )
-      ] })
+                    ),
+                    isResizable && app.windowSize.isAppWindowResizing && /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        className: "w-[12px] h-[12px] bg-[#2ACB42] rounded-full",
+                        onClick: () => {
+                          dispatch({
+                            type: "TOGGLE_MAXIMIZE",
+                            payload: {
+                              width: window.innerWidth,
+                              height: window.innerHeight - 37
+                            }
+                          });
+                        },
+                        title: state.isMaximized ? "Restore" : `Maximize ${formatKeys(
+                          getShortcutByCommand("maximize_app")
+                        )}`,
+                        style: { outline: "none", border: "none" }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(Typography_default, { variant: "p", className: "text-neutral-500 text-[15px]", children: app.name }) })
+                ]
+              }
+            ),
+            !state.isMinimized && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "h-full w-full bg-secondary",
+                style: {
+                  maxHeight: `${state.windowSize.height - 37}px`
+                },
+                children: React23.isValidElement(children) && typeof children.type !== "string" ? React23__namespace.default.cloneElement(children, {
+                  windowSize: state.windowSize,
+                  isAppWindowResizing: state.resizeStart !== null
+                }) : children
+              }
+            ),
+            isResizable && !state.isMaximized && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "absolute bottom-0 right-0 w-5 h-5 cursor-se-resize",
+                style: {
+                  borderBottomRightRadius: "10px"
+                },
+                onMouseDown: handleResizeStart
+              }
+            )
+          ]
+        }
+      )
     }
   );
 };