ssovee-os-web-ui 0.1.89 → 0.1.91

package/dist/index.cjs

@@ -1615,23 +1615,23 @@ var useShortcutFormatter_default = useShortcutFormatter;
 var globalKeyboardShortcuts = [
   {
     command: "exit_app",
-    shortcut: ["ctrl", "q"],
-    usage: "Exit app"
+    shortcut: ["Ctrl", "E"],
+    usage: "Exit or quit the application"
   },
   {
     command: "minimize_app",
-    shortcut: ["ctrl", "m"],
-    usage: "Minimize app"
+    shortcut: ["Ctrl", "ArrowDown"],
+    usage: "Minimize the application window"
   },
   {
     command: "maximize_app",
-    shortcut: ["ctrl", "shift", "m"],
-    usage: "Maximize app"
+    shortcut: ["Ctrl", "ArrowUp"],
+    usage: "Maximize the application window"
   },
   {
     command: "focus_search",
-    shortcut: ["ctrl", "k"],
-    usage: "Focus search"
+    shortcut: ["Ctrl", "k"],
+    usage: "Focus on current app search"
   }
 ];
 var SearchInput = React23__namespace.default.forwardRef(
@@ -2453,17 +2453,7 @@ function PluginPlayground({
   );
 }
 var SIDEBAR_WIDTH = 200;
-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 TOP_BAR_HEIGHT = 37;
 var reducer = (state, action) => {
   switch (action.type) {
     case "START_DRAG":
@@ -2473,10 +2463,7 @@ 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":
@@ -2502,7 +2489,7 @@ var reducer = (state, action) => {
           ...state,
           isMaximized: false,
           windowSize: state.preMaximizeState?.windowSize || state.defaultSize,
-          position: state.preMaximizeState?.position || { x: 0, y: 40 },
+          position: state.preMaximizeState?.position || { x: 0, y: TOP_BAR_HEIGHT },
           preMaximizeState: null
         };
       }
@@ -2514,11 +2501,28 @@ var reducer = (state, action) => {
           windowSize: state.windowSize
         },
         windowSize: action.payload || {
-          width: window.innerWidth,
-          height: window.innerHeight
+          width: typeof window !== "undefined" ? window.innerWidth : 600,
+          height: typeof window !== "undefined" ? window.innerHeight - TOP_BAR_HEIGHT : 300
         },
-        position: { x: 0, y: 40 }
+        position: { x: 0, y: TOP_BAR_HEIGHT }
       };
+    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;
   }
@@ -2537,12 +2541,40 @@ 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, {
-    ...initialState,
-    windowSize: app.windowSize.windowSize ?? defaultSize,
-    defaultSize: app.windowSize.windowSize ?? defaultSize
+    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
   });
   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 });
@@ -2558,48 +2590,66 @@ var WindowWithSideMenu = ({
       }
     });
   };
-  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 = () => {
+  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(() => {
     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 } });
@@ -2614,27 +2664,34 @@ var WindowWithSideMenu = ({
       window.removeEventListener("mouseup", handleMouseUp);
       document.body.style.userSelect = "";
     };
-  }, [state.isDragging, state.resizeStart]);
+  }, [state.isDragging, state.resizeStart, handleMouseMove, handleMouseUp]);
   React23.useEffect(() => {
-    if (windowRef.current) {
-      windowRef.current.addEventListener("click", () => {
-        if (app?.callback) {
-          app?.callback("CLICKED");
-        }
-      });
+    const currentRef = windowRef.current;
+    const handleActive = () => {
+      if (app?.callback) {
+        app.callback("CLICKED");
+      }
+    };
+    if (currentRef) {
+      currentRef.addEventListener("click", handleActive);
     }
-  }, [app?.slug, windowRef]);
+    return () => {
+      if (currentRef) {
+        currentRef.removeEventListener("click", handleActive);
+      }
+    };
+  }, [app?.slug, app]);
   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?.slug, app.isActive, app, addShortcutListener, removeShortcutListener]);
   React23.useEffect(() => {
     const handleMinimize = () => {
       if (app?.slug && app.isActive) {
@@ -2643,7 +2700,7 @@ var WindowWithSideMenu = ({
           payload: state.windowSize
         });
         if (app?.callback) {
-          app?.callback("MINIMIZE_APP");
+          app.callback("MINIMIZE_APP");
         }
       }
     };
@@ -2651,7 +2708,7 @@ var WindowWithSideMenu = ({
     return () => {
       removeShortcutListener("minimize_app", handleMinimize);
     };
-  }, [app?.slug, app.isActive, state.isMinimized, state.windowSize]);
+  }, [app?.slug, app.isActive, state.isMinimized, state.windowSize, app, addShortcutListener, removeShortcutListener]);
   React23.useEffect(() => {
     const handleMaximize = () => {
       if (app?.slug && app.isActive) {
@@ -2659,7 +2716,7 @@ var WindowWithSideMenu = ({
           type: "TOGGLE_MAXIMIZE",
           payload: {
             width: window.innerWidth,
-            height: window.innerHeight - 37
+            height: window.innerHeight - TOP_BAR_HEIGHT
           }
         });
       }
@@ -2668,7 +2725,7 @@ var WindowWithSideMenu = ({
     return () => {
       removeShortcutListener("maximize_app", handleMaximize);
     };
-  }, [app?.slug, app.isActive]);
+  }, [app?.slug, app.isActive, addShortcutListener, removeShortcutListener]);
   if (state.isMinimized) {
     return null;
   }
@@ -2676,33 +2733,31 @@ 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.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",
+        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)`,
         position: "absolute",
-        minWidth: `${state.defaultSize.width}px`,
-        minHeight: `${state.defaultSize.height}px`,
+        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)`,
         zIndex: state.isDragging ? 3 : app?.isActive ? 2 : 1
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "bg-primary flex flex-col",
+            className: "bg-primary flex flex-col shrink-0 overflow-y-auto",
             style: {
               width: `${SIDEBAR_WIDTH}px`,
               minWidth: `${SIDEBAR_WIDTH}px`,
-              maxWidth: `${SIDEBAR_WIDTH}px`,
-              flexShrink: 0
+              maxWidth: `${SIDEBAR_WIDTH}px`
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
-                  className: "flex items-center gap-[8px] pl-[20px] pt-[20px]",
+                  className: "flex items-center gap-[8px] pl-[20px] pt-[20px] select-none",
                   onMouseDown: handleMouseDown,
                   style: { cursor: state.isMaximized ? "default" : "move" },
                   children: [
@@ -2712,7 +2767,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"))}`,
@@ -2730,7 +2785,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"))}`,
@@ -2747,7 +2802,7 @@ var WindowWithSideMenu = ({
                             type: "TOGGLE_MAXIMIZE",
                             payload: {
                               width: window.innerWidth,
-                              height: window.innerHeight - 37
+                              height: window.innerHeight - TOP_BAR_HEIGHT
                             }
                           });
                         },
@@ -2774,14 +2829,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] text-neutral-400 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] cursor-pointer transition-all duration-200`,
                   onClick: item.onClick,
                   children: [
                     item.icon,
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "", children: item.title })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.title })
                   ]
                 },
                 index
@@ -2792,50 +2847,36 @@ var WindowWithSideMenu = ({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "flex-1 bg-secondary flex flex-col",
+            className: "flex-1 bg-secondary flex flex-col min-w-0 h-full overflow-hidden",
             style: {
-              minWidth: 0,
               width: `calc(100% - ${SIDEBAR_WIDTH}px)`
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
-                  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",
+                  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",
                   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 ", children: app?.name }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Typography_default, { variant: "p", className: "text-neutral-400 text-[11px]", children: menu?.items.find((item) => item.isActive)?.title })
+                    /* @__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 })
                   ]
                 }
               ),
-              !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
-                }
-              )
+              !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 })
             ]
           }
         ),
         isResizable && !state.isMaximized && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "absolute bottom-0 right-0 w-5 h-5 cursor-se-resize",
+            className: "absolute bottom-0 right-0 w-5 h-5 cursor-se-resize z-10",
             style: {
               borderBottomRightRadius: "10px"
             },
@@ -2847,17 +2888,7 @@ var WindowWithSideMenu = ({
   );
 };
 var WindowWithSideMenu_default = WindowWithSideMenu;
-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 TOP_BAR_HEIGHT2 = 37;
 var reducer2 = (state, action) => {
   switch (action.type) {
     case "START_DRAG":
@@ -2867,10 +2898,7 @@ 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":
@@ -2896,7 +2924,10 @@ var reducer2 = (state, action) => {
           ...state,
           isMaximized: false,
           windowSize: state.preMaximizeState?.windowSize || state.defaultSize,
-          position: state.preMaximizeState?.position || { x: 0, y: 40 },
+          position: state.preMaximizeState?.position || {
+            x: 0,
+            y: TOP_BAR_HEIGHT2
+          },
           preMaximizeState: null
         };
       }
@@ -2908,11 +2939,34 @@ var reducer2 = (state, action) => {
           windowSize: state.windowSize
         },
         windowSize: action.payload || {
-          width: window.innerWidth,
-          height: window.innerHeight
+          width: typeof window !== "undefined" ? window.innerWidth : 300,
+          height: typeof window !== "undefined" ? window.innerHeight - TOP_BAR_HEIGHT2 : 300
         },
-        position: state.position
+        position: { x: 0, y: TOP_BAR_HEIGHT2 }
       };
+    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;
   }
@@ -2929,12 +2983,40 @@ 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, {
-    ...initialState2,
-    windowSize: app.windowSize.windowSize ?? defaultSize,
-    defaultSize: app.windowSize.windowSize ?? defaultSize
+    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
   });
   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 });
@@ -2950,44 +3032,64 @@ var WindowWithoutSideMenu = ({
       }
     });
   };
-  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 = () => {
+  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(() => {
     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 } });
@@ -3002,27 +3104,40 @@ var WindowWithoutSideMenu = ({
       window.removeEventListener("mouseup", handleMouseUp);
       document.body.style.userSelect = "";
     };
-  }, [state.isDragging, state.resizeStart]);
+  }, [state.isDragging, state.resizeStart, handleMouseMove, handleMouseUp]);
   React23.useEffect(() => {
-    if (windowRef.current) {
-      windowRef.current.addEventListener("click", () => {
-        if (app?.callback) {
-          app?.callback("CLICKED");
-        }
-      });
+    const currentRef = windowRef.current;
+    const handleActive = () => {
+      if (app?.callback) {
+        app.callback("CLICKED");
+      }
+    };
+    if (currentRef) {
+      currentRef.addEventListener("click", handleActive);
     }
-  }, [app?.slug, windowRef]);
+    return () => {
+      if (currentRef) {
+        currentRef.removeEventListener("click", handleActive);
+      }
+    };
+  }, [app?.slug, app]);
   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?.slug,
+    app.isActive,
+    app,
+    addShortcutListener,
+    removeShortcutListener
+  ]);
   React23.useEffect(() => {
     const handleMinimize = () => {
       if (app?.slug && app.isActive) {
@@ -3031,7 +3146,7 @@ var WindowWithoutSideMenu = ({
           payload: state.windowSize
         });
         if (app?.callback) {
-          app?.callback("MINIMIZE_APP");
+          app.callback("MINIMIZE_APP");
         }
       }
     };
@@ -3039,7 +3154,15 @@ var WindowWithoutSideMenu = ({
     return () => {
       removeShortcutListener("minimize_app", handleMinimize);
     };
-  }, [app?.slug, app.isActive, state.isMinimized, state.windowSize]);
+  }, [
+    app?.slug,
+    app.isActive,
+    state.isMinimized,
+    state.windowSize,
+    app,
+    addShortcutListener,
+    removeShortcutListener
+  ]);
   React23.useEffect(() => {
     const handleMaximize = () => {
       if (app?.slug && app.isActive) {
@@ -3047,7 +3170,7 @@ var WindowWithoutSideMenu = ({
           type: "TOGGLE_MAXIMIZE",
           payload: {
             width: window.innerWidth,
-            height: window.innerHeight - 37
+            height: window.innerHeight - TOP_BAR_HEIGHT2
           }
         });
       }
@@ -3056,7 +3179,7 @@ var WindowWithoutSideMenu = ({
     return () => {
       removeShortcutListener("maximize_app", handleMaximize);
     };
-  }, [app?.slug, app.isActive]);
+  }, [app?.slug, app.isActive, addShortcutListener, removeShortcutListener]);
   if (state.isMinimized) {
     return null;
   }
@@ -3064,117 +3187,106 @@ var WindowWithoutSideMenu = ({
     "div",
     {
       ref: windowRef,
-      className: "window-drop-shadow  rounded-[10px]",
+      className: "window-drop-shadow rounded-[10px] flex flex-col overflow-hidden",
       style: {
-        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",
+        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)`,
         position: "absolute",
-        minWidth: `${state.defaultSize.width}px`,
-        minHeight: `${state.defaultSize.height}px`,
+        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)`,
         zIndex: state.isDragging ? 3 : app?.isActive ? 2 : 1
       },
-      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" }
-                      }
-                    ),
-                    /* @__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" }
+      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");
                       }
-                    ),
-                    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" }
+                    },
+                    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("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
-              }
-            )
-          ]
-        }
-      )
+                    },
+                    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
+          }
+        )
+      ] })
     }
   );
 };