diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json
index 542327bee7..634deed0e0 100644
--- a/client/packages/lowcoder/package.json
+++ b/client/packages/lowcoder/package.json
@@ -101,7 +101,7 @@
     "react-quill-new": "^3.4.6",
     "react-redux": "^7.2.6",
     "react-resizable": "^3.0.4",
-    "react-resize-detector": "^12.0.2",
+    "react-resize-detector": "^12.3.0",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.3.0",
     "react-signature-canvas": "^1.0.6",
@@ -132,7 +132,8 @@
     "y-protocols": "^1.0.6",
     "y-websocket": "^3.0.0",
     "yjs": "^13.6.27",
-    "zod": "^3.25.76"
+    "zod": "^3.25.76",
+    "zustand": "^5.0.14"
   },
   "scripts": {
     "supportedBrowsers": "yarn dlx browserslist-useragent-regexp --allowHigherVersions '>0.2%,not dead,not op_mini all,chrome >=69'",
diff --git a/client/packages/lowcoder/src/components/CompName.tsx b/client/packages/lowcoder/src/components/CompName.tsx
index 69fd8c781e..66bd47643a 100644
--- a/client/packages/lowcoder/src/components/CompName.tsx
+++ b/client/packages/lowcoder/src/components/CompName.tsx
@@ -15,6 +15,7 @@ import { trans } from "i18n";
 import { getComponentDocUrl } from "comps/utils/compDocUtil";
 import { getComponentPlaygroundUrl } from "comps/utils/compDocUtil";
 import { parseCompType } from "comps/utils/remote";
+import { useEditorStore } from "comps/editorStore";
 
 const CompDiv = styled.div<{ $width?: number; $hasSearch?: boolean; $showSearch?: boolean }>`
   width: ${(props) => (props.$width ? props.$width : 312)}px;
@@ -79,7 +80,11 @@ export const CompName = React.memo((props: Iprops) => {
   const [showSearch, setShowSearch] = useState<boolean>(false);
   
   const editorState = useContext(EditorContext);
-  const selectedComp = useMemo(() => values(editorState.selectedComps())[0], [editorState]);
+  const selectedCompNames = useEditorStore((state) => state.selectedCompNames);
+  const selectedComp = useMemo(
+    () => values(editorState.selectedComps(selectedCompNames))[0],
+    [editorState, selectedCompNames]
+  );
   const compType = useMemo(() => selectedComp.children.compType.getView() as UICompType, [selectedComp]);
   const compInfo = useMemo(() => parseCompType(compType), [compType]);
   const docUrl = useMemo(() => getComponentDocUrl(compType), [compType]);
diff --git a/client/packages/lowcoder/src/components/PermissionDialog/AppPermissionDialog.tsx b/client/packages/lowcoder/src/components/PermissionDialog/AppPermissionDialog.tsx
index be9abcc463..57d8da8d2f 100644
--- a/client/packages/lowcoder/src/components/PermissionDialog/AppPermissionDialog.tsx
+++ b/client/packages/lowcoder/src/components/PermissionDialog/AppPermissionDialog.tsx
@@ -127,7 +127,7 @@ export const AppPermissionDialog = React.memo(
     return (
       <StepModal
         open={props.visible}
-        destroyOnClose
+        destroyOnHidden
         onCancel={() => {
           setActiveStepKey("permission");
           props.onVisibleChange(false);
diff --git a/client/packages/lowcoder/src/components/resultPanel/BottomResultPanel.tsx b/client/packages/lowcoder/src/components/resultPanel/BottomResultPanel.tsx
index 7f4f82c23b..8886b6a5c9 100644
--- a/client/packages/lowcoder/src/components/resultPanel/BottomResultPanel.tsx
+++ b/client/packages/lowcoder/src/components/resultPanel/BottomResultPanel.tsx
@@ -3,6 +3,7 @@ import Draggable from "react-draggable";
 import * as React from "react";
 import { useContext, useRef, useState } from "react";
 import { EditorContext } from "../../comps/editorState";
+import { useEditorStore } from "../../comps/editorStore";
 import { Layers } from "constants/Layers";
 import { HeaderWrapper, useResultPanel } from "./index";
 
@@ -31,7 +32,8 @@ interface BottomResultPanelProps {
 export const BottomResultPanel = (props: BottomResultPanelProps) => {
   const { bottom } = props;
   const editorState = useContext(EditorContext);
-  const showResultComp = editorState.showResultComp();
+  const showResultCompName = useEditorStore((state) => state.showResultCompName);
+  const showResultComp = editorState.showResultComp(showResultCompName);
   const result = showResultComp?.result();
 
   const draggableRef = useRef<HTMLDivElement>(null);
diff --git a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
index f370a4ef99..6818db70db 100644
--- a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
@@ -10,9 +10,9 @@ import { NumberControl, StringControl } from "comps/controls/codeControl";
 import { Avatar, Tooltip } from "antd";
 import { clickEvent, doubleClickEvent, eventHandlerControl, refreshEvent } from "../controls/eventHandlerControl";
 import styled from "styled-components";
-import { useContext, ReactElement, useEffect } from "react";
+import { ReactElement, useEffect } from "react";
 import { MultiCompBuilder, stateComp, withDefault } from "../generators";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { IconControl } from "../controls/iconControl";
 import { ColorControl } from "../controls/colorControl";
 import { optionsControl } from "../controls/optionsControl";
@@ -148,9 +148,11 @@ let AvatarGroupBasicComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
     return( <AvatarGroupView {...props} dispatch={dispatch} />
 )}) 
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
-        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["logic", "both"].includes(editorModeStatus) && (
           <>
             <Section name={sectionNames.basic}>
               {children.avatars.propertyView({})}
@@ -175,7 +177,7 @@ let AvatarGroupBasicComp = (function () {
           </>
         )}
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           <>
           <Section name={sectionNames.avatarStyle}>
             {children.avatar.getPropertyView()}
@@ -186,7 +188,8 @@ let AvatarGroupBasicComp = (function () {
           </>
         )}
       </>
-    ))
+    );
+    })
     .build();
 })();
 
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
index bd019ab66c..c4b577a18b 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
@@ -3,6 +3,7 @@ import { dropdownControl } from "comps/controls/dropdownControl";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { IconControl } from "comps/controls/iconControl";
 import { CompNameContext, EditorContext, EditorState } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { withDefault } from "comps/generators";
 import { NewChildren, UICompBuilder } from "comps/generators/uiCompBuilder";
 import {
@@ -146,7 +147,7 @@ type ChildrenType = NewChildren<RecordConstructorToComp<typeof childrenMap>>;
 const ButtonPropertyView = React.memo((props: {
   children: ChildrenType
 }) => {
-  const { editorModeStatus } = useContext(EditorContext);
+  const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
   return (
     <>
       <Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
index ec2fa482e0..8880f4735e 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
@@ -9,8 +9,8 @@ import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { Section, sectionNames } from "lowcoder-design";
 import { trans } from "i18n";
-import React, { ReactElement, useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import React, { ReactElement } from "react";
+import { useEditorStore } from "comps/editorStore";
 import styled from "styled-components";
 import EllipsisOutlined from "@ant-design/icons/EllipsisOutlined";
 import { IconControl } from "comps/controls/iconControl";
@@ -250,13 +250,15 @@ const DropdownTmpComp = (function () {
       </ButtonCompWrapper>
     );
   })
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           {children.options.propertyView({})}
         </Section>
 
-        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "logic" || editorModeStatus === "both") && (
           <><Section name={sectionNames.interaction}>
               {!children.onlyMenu.getView() && !children.onlyIcon.getView()
                 ? children.onEvent.getPropertyView()
@@ -267,7 +269,7 @@ const DropdownTmpComp = (function () {
           </>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "layout" || editorModeStatus === "both") && (
           <>
             <Section name={sectionNames.layout}>
               {children.text.propertyView({ label: trans("label") })}
@@ -290,7 +292,8 @@ const DropdownTmpComp = (function () {
           </>
         )}
       </>
-    ))
+    );
+    })
     .build();
 })();
 
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
index b96fe77ea2..318e5dad26 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -21,8 +21,8 @@ import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import { RefControl } from "comps/controls/refControl";
 
-import { EditorContext } from "comps/editorState";
-import React, { useContext, useEffect } from "react";
+import { useEditorStore } from "comps/editorStore";
+import React, { useEffect } from "react";
 
 const Link = styled(Button)<{
   $style: LinkStyleType;
@@ -120,13 +120,14 @@ const LinkTmpComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
             {children.text.propertyView({ label: trans("text") })}
           </Section>
 
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" || editorModeStatus === "both") && (
             <><Section name={sectionNames.interaction}>
               {children.onEvent.getPropertyView()}
               {disabledPropertyView(children)}
@@ -141,7 +142,7 @@ const LinkTmpComp = (function () {
               </Section></>
           )}
 
-          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "layout" || editorModeStatus === "both") && (
             <>
               <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
               <Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
index 8900ea914c..1d39d09ba4 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
@@ -28,12 +28,11 @@ import React, {
   useEffect,
   useRef,
   useState,
-  useContext,
 } from "react";
 import { arrayStringExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { RefControl } from "comps/controls/refControl";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 
 const Error = styled.div`
   color: #f5222d;
@@ -284,14 +283,16 @@ const ScannerTmpComp = (function () {
       </ButtonCompWrapper>
     );
   })
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           {children.text.propertyView({ label: trans("text") })}
         </Section>
 
-        {(useContext(EditorContext).editorModeStatus === "logic" ||
-          useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "logic" ||
+          editorModeStatus === "both") && (
           <>
             <Section name={sectionNames.interaction}>
               {children.onEvent.getPropertyView()}
@@ -315,14 +316,15 @@ const ScannerTmpComp = (function () {
           </>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" ||
-          useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "layout" ||
+          editorModeStatus === "both") && (
           <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
           </Section>
         )}
       </>
-    ))
+    );
+    })
     .setExposeMethodConfigs(buttonRefMethods)
     .build();
 })();
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
index ce82c9ff51..7e093f4299 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
@@ -24,8 +24,8 @@ import {
 import { styleControl } from "comps/controls/styleControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { RefControl } from "comps/controls/refControl";
-import React, { useContext, useEffect } from "react";
-import { EditorContext } from "comps/editorState"; 
+import React, { useEffect } from "react";
+import { useEditorStore } from "comps/editorStore";
 import { Tooltip } from "antd";
 
 const IconWrapper = styled.div`
@@ -103,7 +103,9 @@ const ToggleTmpComp = (function () {
       </ButtonCompWrapperStyled>
     );
   })
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           {children.value.propertyView({
@@ -112,7 +114,7 @@ const ToggleTmpComp = (function () {
           })}
         </Section>
 
-        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "logic" || editorModeStatus === "both") && (
           <><Section name={sectionNames.interaction}>
               {children.onEvent.getPropertyView()}
               {disabledPropertyView(children)}
@@ -143,8 +145,8 @@ const ToggleTmpComp = (function () {
           </>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" ||
-          useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "layout" ||
+          editorModeStatus === "both") && (
           <>
             <Section name={sectionNames.style}>
               {children.showBorder.propertyView({
@@ -160,7 +162,8 @@ const ToggleTmpComp = (function () {
         
         <Section name={trans("prop.disabledStyle")}>{children.disabledStyle.getPropertyView()}</Section>
       </>
-    ))
+    );
+    })
     .setExposeMethodConfigs(buttonRefMethods)
     .build();
 })();
diff --git a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
index 5d3f6d77bb..46964c72a1 100644
--- a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
@@ -15,8 +15,7 @@ import { ArrayStringControl } from "comps/controls/codeControl";
 import { styleControl } from "comps/controls/styleControl";
 import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/controls/styleControlConstants";
 
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 
 // TODO: dots at top position needs proper margin (should be the same as bottom position)
 
@@ -84,13 +83,14 @@ let CarouselBasicComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
             {children.data.propertyView({ label: trans("data") })}
           </Section>
 
-          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["logic", "both"].includes(editorModeStatus) && (
             <><FormDataPropertyView {...children} />
             <Section name={sectionNames.interaction}>
               {children.onEvent.getPropertyView()}
@@ -98,7 +98,7 @@ let CarouselBasicComp = (function () {
               {children.autoPlay.propertyView({ label: trans("carousel.autoPlay") })}
             </Section></>
           )}
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["layout", "both"].includes(editorModeStatus) && (
             <><Section name={sectionNames.layout}>
                 {children.showDots.propertyView({ label: trans("carousel.showDots") })}
                 {children.dotPosition.propertyView({
diff --git a/client/packages/lowcoder/src/comps/comps/chatBoxComponent/chatBoxComp.tsx b/client/packages/lowcoder/src/comps/comps/chatBoxComponent/chatBoxComp.tsx
index d8a874cb3b..9c293f1e37 100644
--- a/client/packages/lowcoder/src/comps/comps/chatBoxComponent/chatBoxComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/chatBoxComponent/chatBoxComp.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useState } from "react";
 import { Section, sectionNames, controlItem } from "lowcoder-design";
 import { default as Segmented } from "antd/es/segmented";
 import { UICompBuilder, withDefault, stateComp } from "../../generators";
@@ -41,7 +41,7 @@ import {
 } from "comps/controls/styleControlConstants";
 import { RefControl } from "comps/controls/refControl";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { trans } from "i18n";
 
 import { ChatBoxView } from "./components/ChatBoxView";
@@ -187,7 +187,7 @@ const avatarStyleOptions = [
 
 const ChatBoxPropertyView = React.memo((props: { children: any }) => {
   const { children } = props;
-  const editorMode = useContext(EditorContext).editorModeStatus;
+  const editorMode = useEditorStore((state) => state.editorModeStatus);
   const [messageStyleSegment, setMessageStyleSegment] = useState<MessageStyleSegment>("own");
   const [avatarStyleSegment, setAvatarStyleSegment] = useState<MessageStyleSegment>("own");
 
diff --git a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
index 2fc3fbdd62..4bde0299c9 100644
--- a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
@@ -35,8 +35,8 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
 import { BoolControl } from "comps/controls/boolControl";
 import { BoolCodeControl, NumberControl, StringControl } from "comps/controls/codeControl";
 
-import { useContext, useEffect } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEffect } from "react";
+import { useEditorStore } from "comps/editorStore";
 
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
@@ -250,6 +250,7 @@ export const ResponsiveLayoutBaseComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
@@ -259,14 +260,14 @@ export const ResponsiveLayoutBaseComp = (function () {
             })}
           </Section>
 
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" || editorModeStatus === "both") && (
             <Section name={sectionNames.interaction}>
               {disabledPropertyView(children)}
               {hiddenPropertyView(children)}
             </Section>
           )}
 
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["layout", "both"].includes(editorModeStatus) && (
             <>
             <Section name={sectionNames.layout}>
               {children.autoHeight.getPropertyView()}
@@ -291,7 +292,7 @@ export const ResponsiveLayoutBaseComp = (function () {
             </>
           )}
 
-          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "layout" || editorModeStatus === "both") && (
             <>
               <Section name={sectionNames.style}>
                 {children.style.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
index f3b14959c9..4001728b17 100644
--- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, useContext } from "react";
+import React, { useEffect, useState, useRef } from "react";
 // Render the component to the editor
 import {
   changeChildAction,
@@ -27,7 +27,7 @@ import {
   mentionEvent,
   doubleClickEvent,
 } from "comps/controls/eventHandlerControl"; 
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 
 
 // Introducing styles
@@ -379,7 +379,9 @@ let CommentBasicComp = (function () {
     return (
     <CommentCompBase {...props} dispatch={dispatch} />
   )})
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           {children.title.propertyView({
@@ -387,7 +389,7 @@ let CommentBasicComp = (function () {
           })}
         </Section>
 
-        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "logic" || editorModeStatus === "both") && (
           <>
           <Section name={sectionNames.data}>
             {children.value.propertyView({
@@ -418,7 +420,7 @@ let CommentBasicComp = (function () {
           </>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "layout" || editorModeStatus === "both") && (
           <><Section name={sectionNames.layout}>
             {children.sendCommentAble.getView() &&
               children.buttonText.propertyView({
@@ -437,7 +439,8 @@ let CommentBasicComp = (function () {
         )}
 
       </>
-    ))
+    );
+    })
     .build();
 })();
 
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
index c8661fa969..5a8cb9eca5 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
@@ -9,8 +9,8 @@ import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsProp
 import { trans } from "i18n";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { BoolControl } from "comps/controls/boolControl";
-import { useContext, useEffect, useRef, useState } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEffect, useRef, useState } from "react";
+import { useEditorStore } from "comps/editorStore";
 import { Card } from "antd";
 import styled from "styled-components";
 import { AnimationStyle, AnimationStyleType, CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
@@ -276,9 +276,10 @@ export const ContainerBaseComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" || editorModeStatus === "both") && (
             <>
               <Section name={sectionNames.basic}>
                 {children.size.propertyView({
@@ -337,7 +338,7 @@ export const ContainerBaseComp = (function () {
             </>
           )}
 
-          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "layout" || editorModeStatus === "both") && (
             <>
               <Section name={sectionNames.layout}>
                 {children.cardType.propertyView({
@@ -366,4 +367,3 @@ export const ContainerBaseComp = (function () {
 })();
 
 export const CardComp = withExposingConfigs(ContainerBaseComp, [NameConfigHidden]);
-
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
index 1fa38cdc5c..adfbcebc67 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
@@ -14,8 +14,7 @@ import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUt
 import { trans } from "i18n";
 import { BoolCodeControl } from "comps/controls/codeControl";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
-import React, { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 
@@ -32,16 +31,17 @@ export const ContainerBaseComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" || editorModeStatus === "both") && (
             <Section name={sectionNames.interaction}>
               {disabledPropertyView(children)}
               {hiddenPropertyView(children)}
             </Section>
           )}
 
-          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "layout" || editorModeStatus === "both") && (
             <><Section name={sectionNames.layout}>
               {children.container.getPropertyView()}
             </Section>
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
index dbf4d5d8f5..39404ad63f 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
@@ -2,6 +2,7 @@ import { EditorContext, EditorState } from "comps/editorState";
 import { sameTypeMap, stateComp, valueComp } from "comps/generators";
 import { addMapChildAction, addMapCompChildAction } from "comps/generators/sameTypeMap";
 import { hookCompCategory, HookCompType } from "comps/hooks/hookCompTypes";
+import { shouldOpenOverlayOnCreate } from "comps/hooks/hookSelection";
 import { UICompLayoutInfo, uiCompRegistry, UICompType } from "comps/uiCompRegistry";
 import { genRandomKey } from "comps/utils/idGenerator";
 import { parseCompType } from "comps/utils/remote";
@@ -54,6 +55,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { useEditorStore } from "comps/editorStore";
 import { ResizePayload, useResizeDetector } from "react-resize-detector";
 import styled from "styled-components";
 import { checkIsMobile } from "util/commonUtils";
@@ -215,13 +217,16 @@ const onDrop = async (
   // log.debug("layout: onDrop start. layout: ", layout, " items: ", items, " compType: ", compType);
   if (hookCompCategory(compType) === "ui") {
     const compName = editorState.getNameGenerator().genItemName(compType);
+    const hookValue = {
+      name: compName,
+      compType: compType as HookCompType,
+      ...(shouldOpenOverlayOnCreate(compType) && { comp: { visible: true } }),
+    };
     editorState
       .getHooksComp()
       .dispatch(
         wrapActionExtraInfo(
-          editorState
-            .getHooksComp()
-            .pushAction({ name: compName, compType: compType as HookCompType }),
+          editorState.getHooksComp().pushAction(hookValue),
           { compInfos: [{ compName: compName, compType: compType, type: "add" }] }
         )
       );
@@ -328,10 +333,10 @@ const GridItemWrapper = React.memo(React.forwardRef(
     props: React.PropsWithChildren<HTMLAttributes<HTMLDivElement>>,
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
-    const editorState = useContext(EditorContext);
+    const disableInteract = useEditorStore((state) => state.disableInteract);
     const { children, ...divProps } = props;
     return (
-      <ItemWrapper ref={ref} $disableInteract={editorState?.disableInteract} {...divProps}>
+      <ItemWrapper ref={ref} $disableInteract={disableInteract} {...divProps}>
         {props.children}
       </ItemWrapper>
     );
@@ -354,6 +359,9 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
   const [currentRowCount, setRowCount] = useState(rowCount || Infinity);
   const [currentRowHeight, setRowHeight] = useState(positionParams.rowHeight || DEFAULT_ROW_HEIGHT);
   const editorState = useContext(EditorContext);
+  const selectedCompNames = useEditorStore((state) => state.selectedCompNames);
+  const isDragging = useEditorStore((state) => state.isDragging);
+  const showGridLines = useEditorStore((state) => state.isDragging || state.forceShowGrid);
   const { readOnly } = useContext(ExternalEditorContext);
   const appSettingsComp = editorState?.getAppSettingsComp().getView();
 
@@ -377,10 +385,10 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
       getExtraLayout(
         props.items,
         props.layout,
-        editorState?.selectedCompNames,
+        selectedCompNames,
         props.dragSelectedComps
       ),
-    [props.items, props.layout, editorState?.selectedCompNames, props.dragSelectedComps]
+    [props.items, props.layout, selectedCompNames, props.dragSelectedComps]
   );
 
   const [containerSelectNames, setContainerSelectNames] = useState<Set<string>>(new Set([]));
@@ -397,8 +405,8 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
   }, [extraLayout, containerSelectNames]);
 
   const canAddSelect = useMemo(
-    () => _.size(containerSelectNames) === _.size(editorState?.selectedCompNames),
-    [containerSelectNames, editorState?.selectedCompNames]
+    () => _.size(containerSelectNames) === _.size(selectedCompNames),
+    [containerSelectNames, selectedCompNames]
   );
 
   const dispatchPositionParamsTimerRef = useRef(0);
@@ -532,7 +540,7 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
       style={props.style}
       scrollContainerRef={props.scrollContainerRef}
       width={width ?? 0}
-      showGridLines={editorState?.showGridLines() && (isDroppable || enableGridLines)}
+      showGridLines={showGridLines && (isDroppable || enableGridLines)}
       isRowCountLocked={isRowCountLocked}
       isDraggable={isDraggable}
       isResizable={isResizable}
@@ -590,12 +598,12 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
       minHeight={props.minHeight}
       bgColor={props.bgColor}
       radius={props.radius}
-      hintPlaceholder={!editorState?.isDragging && !readOnly && props.hintPlaceholder}
+      hintPlaceholder={!isDragging && !readOnly && props.hintPlaceholder}
       selectedSize={_.size(containerSelectNames)}
       clickItem={clickItem}
       isCanvas={props.isCanvas}
       showName={props.showName}
-      disableDirectionKey={editorState?.isDragging || readOnly}
+      disableDirectionKey={isDragging || readOnly}
     >
       {itemViews}
     </ReactGridLayout>
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx
index 71bb7b83d8..f84c61d967 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx
@@ -8,6 +8,7 @@ import { EditorContext } from "comps/editorState";
 import { ThemeContext } from "comps/utils/themeContext";
 import styled from "styled-components";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
+import { useEditorStore } from "comps/editorStore";
 
 const FlowContainerWrapper = styled.div<{ $bgColor: string; $maxWidth?: number; $minHeight: string }>`
   background-color: ${(props) => props.$bgColor};
@@ -37,6 +38,7 @@ export function FlowContainerView(
   const layouts = props.layout;
   const { selectable, minHeight, maxWidth } = props;
   const editorState = useContext(EditorContext);
+  const selectedCompNames = useEditorStore((state) => state.selectedCompNames);
   const bgColor = (useContext(ThemeContext)?.theme || defaultTheme).canvas;
 
   return (
@@ -63,7 +65,7 @@ export function FlowContainerView(
               }}
               autoHeight={false}
               resizeHandles={[]}
-              isSelected={editorState.selectedCompNames.has(comp.name)}
+              isSelected={selectedCompNames.has(comp.name)}
               onClick={() => {
                 editorState.setSelectedCompNames(new Set([comp.name]));
               }}
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
index efa3dc6b3d..706c049c6f 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
@@ -10,8 +10,8 @@ import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUt
 import { trans } from "i18n";
 import { BoolCodeControl } from "comps/controls/codeControl";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
-import React, { useContext, useEffect, useState } from "react";
-import { EditorContext } from "comps/editorState";
+import { useState } from "react";
+import { useEditorStore } from "comps/editorStore";
 
 import {
   ContainerChildren,
@@ -38,9 +38,10 @@ export const ContainerBaseComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" || editorModeStatus === "both") && (
             <Section name={sectionNames.interaction}>
               {disabledPropertyView(children)}
               {hiddenPropertyView(children)}
@@ -48,7 +49,7 @@ export const ContainerBaseComp = (function () {
             </Section>
           )}
 
-          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "layout" || editorModeStatus === "both") && (
             <><Section name={sectionNames.layout}>
               {children.container.getPropertyView()}
             </Section>
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx
index 653363f017..f22d3acbb4 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx
@@ -21,8 +21,7 @@ import { dropdownControl } from "comps/controls/dropdownControl";
 import { withDefault } from "comps/generators/simpleGenerators";
 import { styleControl } from "comps/controls/styleControl";
 import { AnimationStyle, TextContainerStyle } from "comps/controls/styleControlConstants";
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { alignWithJustifyControl } from "comps/controls/alignControl";
 
 const typeOptions = [
@@ -69,6 +68,7 @@ export const ContainerBaseComp = (function () {
     return <TriContainer {...props} />;
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
@@ -76,12 +76,12 @@ export const ContainerBaseComp = (function () {
             {children.text.propertyView({})}
           </Section>
 
-          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["logic", "both"].includes(editorModeStatus) && (
             <Section name={sectionNames.interaction}>
               {hiddenPropertyView(children)}
             </Section>
           )}
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["layout", "both"].includes(editorModeStatus) && (
             <>
               <Section name={sectionNames.layout}>
                 {children.container.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
index dd9d6489f5..83c217b1a4 100644
--- a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
@@ -5,13 +5,13 @@ import { jsonObjectStateControl } from "comps/controls/codeStateControl";
 import { UICompBuilder, withDefault } from "comps/generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
-import { useEffect, useRef, useContext } from "react";
+import { useEffect, useRef } from "react";
 import styled from "styled-components";
 import { getPromiseAfterDispatch } from "util/promiseUtils";
 import { EventData, EventTypeEnum } from "./types";
 import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { AnimationStyle, AnimationStyleType, CustomStyle, CustomStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 // TODO: eventually to embedd in container so we have styling?
@@ -241,9 +241,10 @@ const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
   );
 })
   .setPropertyViewFn((children) => {
+    const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
     return (
       <>
-        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "logic" || editorModeStatus === "both") && (
           <><Section name={sectionNames.interaction}>
               {children.model.propertyView({ label: trans("customComp.data") })}
               {children.code.propertyView({ label: trans("customComp.code"), language: "html" })}
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
index e26bf4ab69..643d6ea98b 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
@@ -16,7 +16,7 @@ import {
   focusEvent,
 } from "../../controls/eventHandlerControl";
 import { LabelControl } from "../../controls/labelControl";
-import { stringExposingStateControl } from "../../controls/codeStateControl";
+import { stringExposingStateControl, withLinkedDefaultValue } from "../../controls/codeStateControl";
 import { UICompBuilder, withDefault } from "../../generators";
 import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing";
 import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
@@ -39,7 +39,7 @@ import {
 } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { DATE_FORMAT, DATE_TIME_FORMAT, DateParser, PickerMode } from "util/dateTimeUtils";
-import React, { ReactNode, useContext, useEffect, useState } from "react";
+import React, { ReactNode, useEffect, useState } from "react";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import { Section, sectionNames } from "components/Section";
@@ -49,7 +49,7 @@ import { useIsMobile } from "util/hooks";
 import { RefControl } from "comps/controls/refControl";
 // import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
 import { DateRangeUIView } from "comps/comps/dateComp/dateRangeUIView";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { timeZoneOptions } from "./timeZone";
 import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators";
@@ -228,19 +228,14 @@ const getFormattedDate = (
 }
 
 const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
-  const defaultValue = { ...props.defaultValue }.value;
   const value = { ...props.value }.value;
-    
+
   let time: dayjs.Dayjs | null = null;
   if (value !== '') {
     time = dayjs(value, DateParser);
   }
-  
-  const [tempValue, setTempValue] = useState<dayjs.Dayjs | null>(time);
 
-  useEffect(() => {
-    props.value.onChange(defaultValue);
-  }, [defaultValue]);
+  const [tempValue, setTempValue] = useState<dayjs.Dayjs | null>(time);
 
   useEffect(() => {
     const newValue = value ? dayjs(value, DateParser) : null;
@@ -293,6 +288,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
   });
 })
   .setPropertyViewFn((children) => {
+    const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
     const isMobile = useIsMobile();
     return (
       <>
@@ -312,7 +308,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
 
         <FormDataPropertyView {...children} />
 
-        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "logic" || editorModeStatus === "both") && (
           <><Section name={sectionNames.validation}>
             {requiredPropertyView(children)}
             {children.showValidationWhenEmpty.propertyView({
@@ -333,24 +329,24 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
         )}
 
         {/*{commonAdvanceSection(children, children.dateType.value === "date")}*/}
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && children.label.getPropertyView()}
+        {(editorModeStatus === "layout" || editorModeStatus === "both") && children.label.getPropertyView()}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "layout" || editorModeStatus === "both") && (
           <Section name={sectionNames.layout}>
             {formatPropertyView({ children, placeholder: DATE_FORMAT })}
             {children.placeholder.propertyView({ label: trans("date.placeholderText") })}
           </Section>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "logic" || editorModeStatus === "both") && (
           <><Section name={sectionNames.advanced}>
             {timeFields(children, isMobile)}
             {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
           </Section></>
         )}
-        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && !isMobile && commonAdvanceSection(children)}
+        {(editorModeStatus === "logic" || editorModeStatus === "both") && !isMobile && commonAdvanceSection(children)}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "layout" || editorModeStatus === "both") && (
           <>
             <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
@@ -378,7 +374,10 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
   .setExposeMethodConfigs(dateRefMethods)
   .build();
 
-export const datePickerControl = migrateOldData(DatePickerTmpCmp, fixOldInputCompData);
+export const datePickerControl = migrateOldData(
+  withLinkedDefaultValue(DatePickerTmpCmp, "defaultValue", "value"),
+  fixOldInputCompData
+);
 
 export function fixOldDateOrTimeRangeData(oldData: any) {
   if (!oldData) return oldData;
@@ -412,17 +411,14 @@ let DateRangeTmpCmp = (function () {
   };
 
   return new UICompBuilder(childrenMap, (props) => {
-    const defaultStart = { ...props.defaultStart }.value;
     const startValue = { ...props.start }.value;
-
-    const defaultEnd = { ...props.defaultEnd }.value;
     const endValue = { ...props.end }.value;
 
     let start: dayjs.Dayjs | null = null;
     if (startValue !== '') {
       start = dayjs(startValue, DateParser);
     }
-    
+
     let end: dayjs.Dayjs | null = null;
     if (endValue !== '') {
       end = dayjs(endValue, DateParser);
@@ -431,14 +427,6 @@ let DateRangeTmpCmp = (function () {
     const [tempStartValue, setTempStartValue] = useState<dayjs.Dayjs | null>(start);
     const [tempEndValue, setTempEndValue] = useState<dayjs.Dayjs | null>(end);
 
-    useEffect(() => {
-      props.start.onChange(defaultStart);
-    }, [defaultStart]);
-
-    useEffect(() => {
-      props.end.onChange(defaultEnd);
-    }, [defaultEnd]);
-
     useEffect(() => {
       const value = startValue ? dayjs(startValue, DateParser) : null;
       setTempStartValue(value);
@@ -510,6 +498,7 @@ let DateRangeTmpCmp = (function () {
     });
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       const isMobile = useIsMobile();
       return (
         <>
@@ -534,7 +523,7 @@ let DateRangeTmpCmp = (function () {
           
           <FormDataPropertyView {...children} />
 
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" || editorModeStatus === "both") && (
             <><Section name={sectionNames.validation}>
               {requiredPropertyView(children)}
               {children.showValidationWhenEmpty.propertyView({
@@ -554,24 +543,24 @@ let DateRangeTmpCmp = (function () {
             </>
           )}
 
-          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && children.label.getPropertyView()}
+          {(editorModeStatus === "layout" || editorModeStatus === "both") && children.label.getPropertyView()}
 
-          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "layout" || editorModeStatus === "both") && (
             <Section name={sectionNames.layout}>
               {formatPropertyView({ children })}
               {children.placeholder.propertyView({ label: trans("date.placeholderText") })}
             </Section>
           )}
 
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" || editorModeStatus === "both") && (
             <><Section name={sectionNames.advanced}>
               {timeFields(children, isMobile)}
               {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
             </Section></>
           )}
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && commonAdvanceSection(children)}
+          {(editorModeStatus === "logic" || editorModeStatus === "both") && commonAdvanceSection(children)}
 
-          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "layout" || editorModeStatus === "both") && (
             <>
               <Section name={sectionNames.style}>
                 {children.style.getPropertyView()}
@@ -597,7 +586,14 @@ let DateRangeTmpCmp = (function () {
     .build();
 })();
 
-export const dateRangeControl = migrateOldData(DateRangeTmpCmp, fixOldDateOrTimeRangeData);
+export const dateRangeControl = migrateOldData(
+  withLinkedDefaultValue(
+    withLinkedDefaultValue(DateRangeTmpCmp, "defaultStart", "start"),
+    "defaultEnd",
+    "end"
+  ),
+  fixOldDateOrTimeRangeData
+);
 
 const getTimeZoneInfo = (timeZone: any, otherTimeZone: any) => {
   const tz = timeZone === 'UserChoice' ? otherTimeZone : timeZone;
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
index c5b8ecc6b6..c3363fd611 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
@@ -15,7 +15,7 @@ import {
   eventHandlerControl,
   focusEvent,
 } from "../../controls/eventHandlerControl";
-import { stringExposingStateControl } from "../../controls/codeStateControl";
+import { stringExposingStateControl, withLinkedDefaultValue } from "../../controls/codeStateControl";
 import { LabelControl } from "../../controls/labelControl";
 import { UICompBuilder, withDefault } from "../../generators";
 import {
@@ -42,7 +42,7 @@ import {
 } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { TIME_FORMAT, TimeParser } from "util/dateTimeUtils";
-import React, { ReactNode, useContext, useEffect, useState } from "react";
+import React, { ReactNode, useEffect, useState } from "react";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import { Section, sectionNames } from "components/Section";
@@ -53,7 +53,7 @@ import { RefControl } from "comps/controls/refControl";
 // import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
 import { TimePickerProps } from "antd/es/time-picker";
 
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { timeZoneOptions } from "./timeZone";
 import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators";
@@ -159,19 +159,14 @@ export type TimeCompViewProps = Pick<
 };
 
 const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
-  const defaultValue = { ...props.defaultValue }.value;
   const value = { ...props.value }.value;
 
   let time: dayjs.Dayjs | null = null;
   if(value !== '') {
     time = dayjs(value, TimeParser);
   }
-  
-  const [tempValue, setTempValue] = useState<dayjs.Dayjs | null>(time);
 
-  useEffect(() => {
-    props.value.onChange(defaultValue);
-  }, [defaultValue]);
+  const [tempValue, setTempValue] = useState<dayjs.Dayjs | null>(time);
 
   useEffect(() => {
     const newValue = value ? dayjs(value, TimeParser) : null;
@@ -221,7 +216,9 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
     ...validate(props),
   });
 })
-  .setPropertyViewFn((children) => (
+  .setPropertyViewFn((children) => {
+    const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+    return (
     <>
       <Section name={sectionNames.basic}>
         {children.defaultValue.propertyView({
@@ -235,7 +232,7 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
 
       <FormDataPropertyView {...children} />
 
-      {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+      {(editorModeStatus === "logic" || editorModeStatus === "both") && (
         <><Section name={sectionNames.validation}>
           {requiredPropertyView(children)}
           {children.showValidationWhenEmpty.propertyView({
@@ -254,15 +251,15 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
         </Section></>
       )}
 
-      {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && children.label.getPropertyView()}
-      {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+      {(editorModeStatus === "layout" || editorModeStatus === "both") && children.label.getPropertyView()}
+      {(editorModeStatus === "layout" || editorModeStatus === "both") && (
         <Section name={sectionNames.layout}>
           {formatPropertyView({ children, placeholder: TIME_FORMAT })}
           {children.placeholder.propertyView({ label: trans("time.placeholderText") })}
         </Section>
       )}
 
-      {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+      {(editorModeStatus === "logic" || editorModeStatus === "both") && (
         <Section name={sectionNames.advanced}>
           {commonAdvanceSection(children)}
           {children.use12Hours.propertyView({ label: trans("prop.use12Hours") })}
@@ -270,7 +267,7 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
         </Section>
       )}
 
-      {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+      {(editorModeStatus === "layout" || editorModeStatus === "both") && (
         <>
           <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
@@ -290,11 +287,15 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
         </>
       )}
     </>
-  ))
+  );
+  })
   .setExposeMethodConfigs(dateRefMethods)
   .build();
 
-export const timePickerControl = migrateOldData(TimePickerTmpCmp, fixOldInputCompData);
+export const timePickerControl = migrateOldData(
+  withLinkedDefaultValue(TimePickerTmpCmp, "defaultValue", "value"),
+  fixOldInputCompData
+);
 
 const TimeRangeTmpCmp = (function () {
   const childrenMap = {
@@ -308,10 +309,7 @@ const TimeRangeTmpCmp = (function () {
   };
 
   return new UICompBuilder(childrenMap, (props) => {
-    const defaultStart = { ...props.defaultStart }.value;
     const startValue = { ...props.start }.value;
-
-    const defaultEnd = { ...props.defaultEnd }.value;
     const endValue = { ...props.end }.value;
 
     let start: dayjs.Dayjs | null = null;
@@ -326,14 +324,6 @@ const TimeRangeTmpCmp = (function () {
     const [tempStartValue, setTempStartValue] = useState<dayjs.Dayjs | null>(start);
     const [tempEndValue, setTempEndValue] = useState<dayjs.Dayjs | null>(end);
 
-    useEffect(() => {
-      props.start.onChange(defaultStart);
-    }, [defaultStart]);
-
-    useEffect(() => {
-      props.end.onChange(defaultEnd);
-    }, [defaultEnd]);
-
     useEffect(() => {
       const value = startValue ? dayjs(startValue, TimeParser) : null;
       setTempStartValue(value);
@@ -395,7 +385,9 @@ const TimeRangeTmpCmp = (function () {
         : startResult),
     });
   })
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           {children.defaultStart.propertyView({
@@ -413,7 +405,7 @@ const TimeRangeTmpCmp = (function () {
         
         <FormDataPropertyView {...children} />
 
-        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "logic" || editorModeStatus === "both") && (
           <><Section name={sectionNames.validation}>
             {requiredPropertyView(children)}
             {children.showValidationWhenEmpty.propertyView({
@@ -432,15 +424,15 @@ const TimeRangeTmpCmp = (function () {
           </Section></>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && children.label.getPropertyView()}
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "layout" || editorModeStatus === "both") && children.label.getPropertyView()}
+        {(editorModeStatus === "layout" || editorModeStatus === "both") && (
           <Section name={sectionNames.layout}>
             {formatPropertyView({ children, placeholder: TIME_FORMAT })}
             {children.placeholder.propertyView({ label: trans("time.placeholderText") })}
           </Section>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "logic" || editorModeStatus === "both") && (
           <Section name={sectionNames.advanced}>
             {commonAdvanceSection(children)}
             {children.use12Hours.propertyView({ label: trans("prop.use12Hours") })}
@@ -448,7 +440,7 @@ const TimeRangeTmpCmp = (function () {
           </Section>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "layout" || editorModeStatus === "both") && (
           <>
             <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
@@ -468,11 +460,19 @@ const TimeRangeTmpCmp = (function () {
           </>
         )}
       </>
-    ))
+    );
+    })
     .build();
 })();
 
-export const timeRangeControl = migrateOldData(TimeRangeTmpCmp, fixOldDateOrTimeRangeData);
+export const timeRangeControl = migrateOldData(
+  withLinkedDefaultValue(
+    withLinkedDefaultValue(TimeRangeTmpCmp, "defaultStart", "start"),
+    "defaultEnd",
+    "end"
+  ),
+  fixOldDateOrTimeRangeData
+);
 
 const getTimeZoneInfo = (timeZone: any, otherTimeZone: any) => {
   const tz = timeZone === 'UserChoice' ? otherTimeZone : timeZone;
diff --git a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
index 287b684091..2f0eccbc94 100644
--- a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
@@ -15,8 +15,7 @@ import { trans } from "i18n";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 
 
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 
 type IProps = DividerProps & {
   $style: DividerStyleType;
@@ -124,6 +123,7 @@ const DividerTempComp = migrateOldData(
     );
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
         {!children?.type?.getView() && 
@@ -131,13 +131,13 @@ const DividerTempComp = migrateOldData(
          {children.title.propertyView({ label: trans("divider.title") })}
          </Section>}
         
-          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["logic", "both"].includes(editorModeStatus) && (
             <Section name={sectionNames.interaction}>
               {hiddenPropertyView(children)}
             </Section>
           )}
 
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["layout", "both"].includes(editorModeStatus) && (
             <>
               <Section name={sectionNames.layout}>
                 {!_.isEmpty(children.title.getView()) &&
diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
index b804c53410..7659056daf 100644
--- a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
@@ -44,8 +44,7 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
 import { CustomModal } from "lowcoder-design";
 import { DraggerUpload } from "./draggerUpload";
 import { ImageCaptureModal } from "./ImageCaptureModal";
-import  { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { checkIsMobile } from "@lowcoder-ee/util/commonUtils";
 import { AutoHeightControl } from "@lowcoder-ee/comps/controls/autoHeightControl";
 
@@ -515,7 +514,9 @@ let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => {
   
   return <Upload {...props} dispatch={dispatch} />;
 })
-  .setPropertyViewFn((children) => (
+  .setPropertyViewFn((children) => {
+    const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+    return (
     <>
       <Section name={sectionNames.basic}>
         {children.text.propertyView({
@@ -535,7 +536,7 @@ let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => {
 
       <FormDataPropertyView {...children} />
 
-      {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+      {(editorModeStatus === "logic" || editorModeStatus === "both") && (
         <><Section name={sectionNames.validation}>
           {children.uploadType.getView() !== "single" && children.maxFiles.propertyView({ label: trans("file.maxFiles") })}
           {commonValidationFields(children)}
@@ -580,14 +581,15 @@ let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => {
         </>
       )}
 
-      {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+      {(editorModeStatus === "layout" || editorModeStatus === "both") && (
         <>
           <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
           <Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
         </>
       )}
     </>
-  ))
+  );
+  })
   .build();
 
   class FileImplComp extends FileTmpComp {
diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
index 159595231d..b2511f6d7a 100644
--- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
@@ -10,8 +10,7 @@ import { UICompBuilder, withDefault } from "../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
 import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { AutoHeightControl } from "../controls/autoHeightControl";
 import { BoolControl } from "../controls/boolControl";
 
@@ -98,6 +97,7 @@ let FileViewerBasicComp = (function () {
     />;
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
@@ -109,7 +109,7 @@ let FileViewerBasicComp = (function () {
             })}
           </Section>
 
-          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["logic", "both"].includes(editorModeStatus) && (
             <Section name={sectionNames.interaction}>
               {hiddenPropertyView(children)}
               {showDataLoadingIndicatorsPropertyView(children)}
@@ -124,7 +124,7 @@ let FileViewerBasicComp = (function () {
                 )}
           </Section>
 
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["layout", "both"].includes(editorModeStatus) && (
             <>
               <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
index bece24fe23..bb5167b33a 100644
--- a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
@@ -7,6 +7,7 @@ import {
 import { Section, sectionNames } from "lowcoder-design";
 import { genQueryId } from "comps/utils/idGenerator";
 import { CompNameContext, EditorContext, EditorState } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { withMethodExposing } from "comps/generators/withMethodExposing";
 import { ContainerPlaceholder } from "lowcoder-design";
 import {
@@ -208,13 +209,14 @@ const FormBaseComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
             {children.resetAfterSubmit.propertyView({ label: trans("formComp.resetAfterSubmit") })}
           </Section>
 
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" || editorModeStatus === "both") && (
             <><Section name={sectionNames.interaction}>
                 {children.onEvent.getPropertyView()}
                 {disabledPropertyView(children)}
@@ -225,7 +227,7 @@ const FormBaseComp = (function () {
             </>
           )}
 
-          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "layout" || editorModeStatus === "both") && (
             <>
               <Section name={sectionNames.layout}>
                 {children.container.getPropertyView()}
@@ -233,14 +235,14 @@ const FormBaseComp = (function () {
             </>
           )}
 
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" || editorModeStatus === "both") && (
             <Section name={sectionNames.advanced}>
               {children.initialData.propertyView({ label: trans("formComp.initialData") })}
               {children.invalidFormMessage.propertyView({ label: trans("formComp.invalidFormMessage") })}
             </Section>
           )}
 
-          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "layout" || editorModeStatus === "both") && (
             <>
               <Section name={sectionNames.style}>
                 {children.container.stylePropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
index 8cc3716e16..de467cd793 100644
--- a/client/packages/lowcoder/src/comps/comps/iconComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
@@ -29,8 +29,7 @@ import {
   eventHandlerControl,
   doubleClickEvent,
 } from "../controls/eventHandlerControl";
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { AssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl";
 import { dropdownControl } from "../controls/dropdownControl";
 import { useCompClickEventHandler } from "../utils/useCompClickEventHandler";
@@ -150,7 +149,9 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
 let IconBasicComp = (function () {
   return new UICompBuilder(childrenMap, (props) => {
     return(<IconView {...props} />)})
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           { children.sourceMode.propertyView({
@@ -166,7 +167,7 @@ let IconBasicComp = (function () {
           })}
         </Section> 
 
-        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["logic", "both"].includes(editorModeStatus) && (
           <Section name={sectionNames.interaction}>
             {children.onEvent.getPropertyView()}
             {hiddenPropertyView(children)}
@@ -174,7 +175,7 @@ let IconBasicComp = (function () {
           </Section>
         )}
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           <><Section name={sectionNames.layout}>
             {children.autoHeight.propertyView({
             label: trans("iconComp.autoSize"),
@@ -193,7 +194,8 @@ let IconBasicComp = (function () {
           </>
         )}
       </>
-    ))
+    );
+    })
     .build();
 })();
 
@@ -206,4 +208,3 @@ IconBasicComp = class extends IconBasicComp {
 export const IconComp = withExposingConfigs(IconBasicComp, [
   NameConfigHidden,
 ]);
-
diff --git a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
index c401653d16..9f18bd00a6 100644
--- a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
@@ -10,8 +10,7 @@ import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps
 import { trans } from "i18n";
 import log from "loglevel";
 
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 
 const Wrapper = styled.div<{$style: IframeStyleType; $animationStyle:AnimationStyleType}>`
   width: 100%;
@@ -67,13 +66,15 @@ let IFrameCompBase = new UICompBuilder(
     );
   }
 )
-  .setPropertyViewFn((children) => (
+  .setPropertyViewFn((children) => {
+    const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+    return (
     <>
       <Section name={sectionNames.basic}>
         {children.url.propertyView({ label: "Source URL", placeholder: "https://example.com", tooltip: trans("iframe.URLDesc") })}
       </Section>
 
-      {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+      {["logic", "both"].includes(editorModeStatus) && (
         <Section name={sectionNames.interaction}>
           {hiddenPropertyView(children)}
           {children.allowDownload.propertyView({ label: trans("iframe.allowDownload") })}
@@ -85,7 +86,7 @@ let IFrameCompBase = new UICompBuilder(
         </Section>
       )}
 
-      {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+      {["layout", "both"].includes(editorModeStatus) && (
         <>
         <Section name={sectionNames.style}>
           {children.style.getPropertyView()}
@@ -96,7 +97,8 @@ let IFrameCompBase = new UICompBuilder(
         </>
       )}
     </>
-  ))
+  );
+  })
   .build();
 
 IFrameCompBase = class extends IFrameCompBase {
diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
index 8bc246a2b1..450f356b70 100644
--- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -32,8 +32,7 @@ import { BoolControl } from "comps/controls/boolControl";
 import { default as AntImage } from "antd/es/image";
 import { DEFAULT_IMG_URL } from "util/stringUtils";
 
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { StringControl } from "../controls/codeControl";
 import { PositionControl } from "comps/controls/dropdownControl";
 import { dropdownControl } from "../controls/dropdownControl";
@@ -246,6 +245,7 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
   return <ContainerImg {...props} />;
 })
   .setPropertyViewFn((children) => {
+    const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
     return (
       <>
         <Section name={sectionNames.basic}>
@@ -259,7 +259,7 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
           {children.sourceMode.getView() === 'asset-library' && children.iconScoutAsset.propertyView({})}
         </Section>
 
-        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["logic", "both"].includes(editorModeStatus) && (
           <Section name={sectionNames.interaction}>
             {children.onEvent.getPropertyView()}
             {hiddenPropertyView(children)}
@@ -274,7 +274,7 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
           </Section>
         )}
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           <>
             <Section name={sectionNames.layout}>
 
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
index 8b1d4c8400..0b2fab07bb 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
@@ -12,14 +12,14 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
 import { AnimationStyle, JsonEditorStyle } from "comps/controls/styleControlConstants";
 import { styleControl } from "comps/controls/styleControl";
 import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
-import { useRef, useEffect, useContext, useCallback, useMemo } from "react";
+import { useRef, useEffect, useCallback, useMemo } from "react";
 import {
   EditorState,
   EditorView,
   type EditorView as EditorViewType,
 } from "base/codeEditor/codeMirror";
 import { useExtensions } from "base/codeEditor/extensions";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { AutoHeightControl } from "@lowcoder-ee/comps/controls/autoHeightControl";
 import { BoolControl } from "@lowcoder-ee/comps/controls/boolControl";
 
@@ -177,9 +177,9 @@ let JsonEditorTmpComp = (function () {
     });
   })
     .setPropertyViewFn((children) => {
-      const editorContext = useContext(EditorContext);
-      const isLogicMode = editorContext.editorModeStatus === "logic" || editorContext.editorModeStatus === "both";
-      const isLayoutMode = editorContext.editorModeStatus === "layout" || editorContext.editorModeStatus === "both";
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      const isLogicMode = editorModeStatus === "logic" || editorModeStatus === "both";
+      const isLayoutMode = editorModeStatus === "layout" || editorModeStatus === "both";
 
       return (
         <>
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
index f929dd68ce..194c28d45f 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
@@ -9,8 +9,8 @@ import { dropdownControl } from "comps/controls/dropdownControl";
 import { ArrayOrJSONObjectControl, NumberControl } from "comps/controls/codeControl";
 import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
-import { EditorContext } from "comps/editorState";
-import { useContext, useEffect } from "react";
+import { useEditorStore } from "comps/editorStore";
+import { useEffect } from "react";
 import { AnimationStyle, AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 import { AutoHeightControl } from "@lowcoder-ee/comps/controls/autoHeightControl";
@@ -80,6 +80,7 @@ let JsonExplorerTmpComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
@@ -96,7 +97,7 @@ let JsonExplorerTmpComp = (function () {
              })}
           </Section>
 
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" || editorModeStatus === "both") && (
             <Section name={sectionNames.interaction}>
               {hiddenPropertyView(children)}
               {children.expandToggle.propertyView({ label: trans("jsonExplorer.expandToggle") })}
@@ -104,7 +105,7 @@ let JsonExplorerTmpComp = (function () {
             </Section>
           )}
 
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" || editorModeStatus === "both") && (
             <Section name={sectionNames.advanced}>
               {children.indent.propertyView({ label: trans("jsonExplorer.indent") })}
             </Section>
@@ -117,8 +118,8 @@ let JsonExplorerTmpComp = (function () {
               label: trans('prop.showVerticalScrollbar'),
             })}
           </Section>}
-          {(useContext(EditorContext).editorModeStatus === 'layout' ||
-            useContext(EditorContext).editorModeStatus === 'both') && (
+          {(editorModeStatus === 'layout' ||
+            editorModeStatus === 'both') && (
             <>
               <Section name={sectionNames.style}>
                 {children.theme.propertyView({
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
index 92f3559368..977f30bc58 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
@@ -10,7 +10,7 @@ import { styleControl } from "comps/controls/styleControl";
 import { AnimationStyle, LottieStyle } from "comps/controls/styleControlConstants";
 import { trans } from "i18n";
 import { Section, sectionNames } from "lowcoder-design";
-import { useContext, lazy, useEffect, useState, useCallback } from "react";  
+import { lazy, useEffect, useState, useCallback } from "react";
 import { stateComp, UICompBuilder, withDefault } from "../../generators";
 import {
   NameConfig,
@@ -18,7 +18,7 @@ import {
   withExposingConfigs,
 } from "../../generators/withExposing";
 import { defaultLottie } from "./jsonConstants";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { AssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl";
 import { DotLottie } from "@lottiefiles/dotlottie-react";
 import { AutoHeightControl } from "@lowcoder-ee/comps/controls/autoHeightControl";
@@ -279,6 +279,7 @@ let JsonLottieTmpComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
@@ -292,7 +293,7 @@ let JsonLottieTmpComp = (function () {
             {children.sourceMode.getView() === 'asset-library' && children.iconScoutAsset.propertyView({})}
           </Section>
 
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" || editorModeStatus === "both") && (
             <><Section name={sectionNames.interaction}>
                 {children.onEvent.getPropertyView()}
                 {children.speed.propertyView({ label: trans("jsonLottie.speed")})}
@@ -305,7 +306,7 @@ let JsonLottieTmpComp = (function () {
             </>
           )}
 
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["layout", "both"].includes(editorModeStatus) && (
             <Section name={sectionNames.layout}>
               {children.autoHeight.getPropertyView()}
               {children.aspectRatio.propertyView({
@@ -316,7 +317,7 @@ let JsonLottieTmpComp = (function () {
             </Section>
           )}
 
-          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "layout" || editorModeStatus === "both") && (
             <>
               <Section name={sectionNames.style}>
                 {children.container.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
index d5c956b85c..74076e4ba4 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
@@ -23,7 +23,7 @@ import { Theme } from "@rjsf/antd";
 import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { AutoHeightControl } from "../../controls/autoHeightControl";
 import { useContext, useEffect, useRef, useState, createContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import ObjectFieldTemplate from './ObjectFieldTemplate';
 import ArrayFieldTemplate from './ArrayFieldTemplate';
 import { Select } from 'antd';
@@ -373,6 +373,7 @@ let FormBasicComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       const formType = children.formType.getView();
       const uiSchemaFieldDescription =
         formType === "rjsf"
@@ -380,8 +381,8 @@ let FormBasicComp = (function () {
           : "JSONForms UI schema object for configuring controls, scopes, layouts, categories, rules, and renderer options. It should match the JSON Schema fields.";
       return (
         <>
-          {(useContext(EditorContext).editorModeStatus === "logic" ||
-            useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" ||
+            editorModeStatus === "both") && (
             <Section name={sectionNames.basic}>
               {children.formType.propertyView({
                 radioButton: true,
@@ -514,7 +515,7 @@ let FormBasicComp = (function () {
             </Section>
           )}
 
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" || editorModeStatus === "both") && (
             <Section name={sectionNames.interaction}>
               {children.onEvent.getPropertyView()}
               {hiddenPropertyView(children)}
@@ -524,7 +525,7 @@ let FormBasicComp = (function () {
               {showDataLoadingIndicatorsPropertyView(children)}
             </Section>
           )}
-          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "layout" || editorModeStatus === "both") && (
             <>
               <Section name={sectionNames.layout}>
                 {children.autoHeight.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
index 4b62a66b93..5dec51164e 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
@@ -1,5 +1,6 @@
 import { default as Pagination } from "antd/es/pagination";
 import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
 import _ from "lodash";
 import { ConstructorToView } from "lowcoder-core";
@@ -319,7 +320,7 @@ export function ListView(props: Props) {
   const children = comp.children;
   const ref = useRef(null);
   const editorState = useContext(EditorContext);
-  const isDragging = editorState.isDragging;
+  const isDragging = useEditorStore((state) => state.isDragging);
   const [listHeight, setListHeight] = useDelayState(0, isDragging);
   const dynamicHeight = useMemo(() => children.dynamicHeight.getView(), [children.dynamicHeight]);
   const heightUnitOfRow = useMemo(
@@ -375,7 +376,7 @@ export function ListView(props: Props) {
 
   const commonLayout = comp.realSimpleContainer()!.children.layout.getView();
   const isOneItem =
-    pageInfo.currentPageSize > 0 && (_.isEmpty(commonLayout) || editorState.isDragging);
+    pageInfo.currentPageSize > 0 && (_.isEmpty(commonLayout) || isDragging);
   const noOfRows = isOneItem
     ? 1
     : Math.floor((pageInfo.currentPageSize + noOfColumns - 1) / noOfColumns);
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
index b3c3911ce1..05f8ea1ffa 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
@@ -2,8 +2,7 @@ import { trans, transToNode } from "i18n";
 import { Section, sectionNames } from "lowcoder-design";
 import { ListViewImplComp } from "./listViewComp";
 import { ListCompType } from "./listViewUtils";
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 
 type Props = {
@@ -12,6 +11,7 @@ type Props = {
 
 export function listPropertyView(compType: ListCompType) {
   return (props: Props) => {
+    const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
     const { comp } = props;
     const children = comp.children;
     return (
@@ -47,13 +47,13 @@ export function listPropertyView(compType: ListCompType) {
           })}
         </Section>
 
-        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "logic" || editorModeStatus === "both") && (
           <Section name={trans("prop.pagination")}>
             {comp.children.pagination.getPropertyView()}
           </Section>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "logic" || editorModeStatus === "both") && (
           <Section name={sectionNames.interaction}>
             {children.onEvent.getPropertyView()}
             {hiddenPropertyView(children)}
@@ -64,7 +64,7 @@ export function listPropertyView(compType: ListCompType) {
           </Section>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "layout" || editorModeStatus === "both") && (
           <><Section name={sectionNames.layout}>
               {children.horizontalGridCells.propertyView({
                 label: trans('prop.horizontalGridCells'),
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
index 9b64c1bbc2..e25f72f9f6 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
@@ -13,8 +13,8 @@ import { withDefault } from "../../generators/simpleGenerators";
 import { trans } from "i18n";
 import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { mediaCommonChildren, mediaMethods } from "./mediaUtils";
-import { useContext, useEffect } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEffect } from "react";
+import { useEditorStore } from "comps/editorStore";
 
 const Container = styled.div<{ $style: any; $animationStyle: AnimationStyleType }>`
 ${props => props.$style};
@@ -78,6 +78,7 @@ let AudioBasicComp = (function () {
     return <ContainerAudio {...props} />;
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
@@ -87,7 +88,7 @@ let AudioBasicComp = (function () {
             })}
           </Section>
 
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" || editorModeStatus === "both") && (
             <Section name={sectionNames.interaction}>
               {children.onEvent.getPropertyView()}
               {hiddenPropertyView(children)}
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
index a4f5fb751e..ea7738035b 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
@@ -21,8 +21,7 @@ import { Video } from "lowcoder-design";
 import type ReactPlayer from "react-player";
 import { mediaCommonChildren, mediaMethods } from "./mediaUtils";
 
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import styled, { css } from "styled-components";
 
 const EventOptions = [
@@ -132,6 +131,7 @@ let VideoBasicComp = (function () {
     return <ContainerVideo {...props} />;
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
@@ -141,7 +141,7 @@ let VideoBasicComp = (function () {
             })}
           </Section>
 
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" || editorModeStatus === "both") && (
 
             <><Section name={sectionNames.interaction}>
                 {children.onEvent.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
index c5e7709c97..337ef0d833 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -3,6 +3,7 @@ import { dropdownControl } from "comps/controls/dropdownControl";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { IconControl } from "comps/controls/iconControl";
 import { CompNameContext, EditorContext, EditorState } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { withDefault } from "comps/generators";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import _ from "lodash";
@@ -38,7 +39,6 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
 
-import { useContext } from "react";
 import { Tooltip } from "antd";
 import { AssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl";
 import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";
@@ -319,7 +319,9 @@ let ButtonTmpComp = (function () {
       </EditorContext.Consumer>
     );
   })
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           { children.sourceMode.propertyView({
@@ -337,8 +339,8 @@ let ButtonTmpComp = (function () {
           })}
         </Section>
 
-        {(useContext(EditorContext).editorModeStatus === "logic" ||
-          useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "logic" ||
+          editorModeStatus === "both") && (
           <Section name={sectionNames.interaction}>
             {children.onEvent.getPropertyView()}
             {disabledPropertyView(children)}
@@ -348,8 +350,8 @@ let ButtonTmpComp = (function () {
           </Section>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" ||
-          useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "layout" ||
+          editorModeStatus === "both") && (
           <>
             <Section name={sectionNames.layout}>
               {children.autoHeight.getPropertyView()}
@@ -369,7 +371,8 @@ let ButtonTmpComp = (function () {
           </>
         )}
       </>
-    ))
+    );
+    })
     .build();
 })();
 ButtonTmpComp = class extends ButtonTmpComp {
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
index 41006481e5..7881c60668 100644
--- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
@@ -33,8 +33,8 @@ import {
 import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 
-import { useContext, useState, useCallback } from "react";
-import { EditorContext } from "comps/editorState";
+import { useState, useCallback } from "react";
+import { useEditorStore } from "comps/editorStore";
 import { createNavItemsControl } from "./components/NavItemsControl";
 import { Layers } from "constants/Layers";
 import { CanvasContainerID } from "constants/domLocators";
@@ -478,6 +478,23 @@ function renderStyleSections(
   );
 }
 
+function NavPropertyView({ childrenMap }: { childrenMap: any }) {
+  const mode = useEditorStore((state) => state.editorModeStatus);
+  const showLogic = mode === "logic" || mode === "both";
+  const showLayout = mode === "layout" || mode === "both";
+  const [styleSegment, setStyleSegment] = useState<MenuItemStyleOptionValue>("normal");
+
+  return (
+    <>
+      {renderBasicSection(childrenMap)}
+      {showLogic && renderInteractionSection(childrenMap)}
+      {showLayout && renderLayoutSection(childrenMap)}
+      {showLogic && renderAdvancedSection(childrenMap)}
+      {showLayout && renderStyleSections(childrenMap, styleSegment, setStyleSegment)}
+    </>
+  );
+}
+
 const childrenMap = {
   logoUrl: StringControl,
   logoEvent: withDefault(eventHandlerControl(logoEventHandlers), [{ name: "click" }]),
@@ -745,7 +762,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
             width={["left", "right"].includes(props.placement as any) ? transToPxSize(props.drawerWidth || DEFAULT_SIZE) : undefined as any}
             height={["top", "bottom"].includes(props.placement as any) ? transToPxSize(props.drawerHeight || DEFAULT_SIZE) : undefined as any}
             styles={{ body: { padding: 0 } }}
-            destroyOnClose
+            destroyOnHidden
           >
             <DrawerContent 
               $background={props.drawerContainerStyle?.background || '#FFFFFF'}
@@ -773,22 +790,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
     </Wrapper>
   );
 })
-  .setPropertyViewFn((children) => {
-    const mode = useContext(EditorContext).editorModeStatus;
-    const showLogic = mode === "logic" || mode === "both";
-    const showLayout = mode === "layout" || mode === "both";
-    const [styleSegment, setStyleSegment] = useState<MenuItemStyleOptionValue>("normal");
-
-    return (
-      <>
-        {renderBasicSection(children)}
-        {showLogic && renderInteractionSection(children)}
-        {showLayout && renderLayoutSection(children)}
-        {showLogic && renderAdvancedSection(children)}
-        {showLayout && renderStyleSections(children, styleSegment, setStyleSegment)}
-      </>
-    );
-  })
+  .setPropertyViewFn((children) => <NavPropertyView childrenMap={children} />)
   .build();
 
 export const NavComp = withExposingConfigs(NavCompBase, [
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
index fad9d36d14..310f5fab4e 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -50,9 +50,9 @@ import {
   setSelectionRangeMethod,
 } from "comps/utils/methodUtils";
 
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { migrateOldData } from "comps/generators/simpleGenerators";
+import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 
 const getStyle = (style: InputLikeStyleType) => {
@@ -311,7 +311,6 @@ const childrenMap = {
 
 const CustomInputNumber = (props: RecordConstructorToView<typeof childrenMap>) => {
   const ref = useRef<HTMLInputElement | null>(null);
-  const defaultValue = props.defaultValue.value;
   const mountedRef = useRef(true);
 
   // Cleanup on unmount
@@ -322,17 +321,6 @@ const CustomInputNumber = (props: RecordConstructorToView<typeof childrenMap>) =
     };
   }, []);
 
-  useEffect(() => {
-    if (!mountedRef.current) return;
-    let value = 0;
-    if (defaultValue === 'null' && props.allowNull) {
-      value = NaN;
-    } else if (!isNaN(Number(defaultValue))) {
-      value = Number(defaultValue);
-    }
-    props.value.onChange(value);
-  }, [defaultValue, props.allowNull]);
-
   const formatFn = (value: number) =>
     format(value, props.allowNull, props.formatter, props.precision, props.thousandsSeparator);
 
@@ -448,7 +436,9 @@ let NumberInputTmpComp = (function () {
       ...validate(props),
     });
   })
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           {children.defaultValue.propertyView({ label: trans("prop.defaultValue") })}
@@ -458,7 +448,7 @@ let NumberInputTmpComp = (function () {
 
         <FormDataPropertyView {...children} />
 
-        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "logic" || editorModeStatus === "both") && (
           <><Section name={sectionNames.validation}>
             {requiredPropertyView(children)}
             {children.showValidationWhenEmpty.propertyView({label: trans("prop.showEmptyValidation")})}
@@ -475,11 +465,11 @@ let NumberInputTmpComp = (function () {
           </>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "layout" || editorModeStatus === "both") && (
           children.label.getPropertyView()
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "logic" || editorModeStatus === "both") && (
           <Section name={sectionNames.advanced}>
             {children.step.propertyView({ label: trans("numberInput.step") })}
             {children.precision.propertyView({ label: trans("numberInput.precision") })}
@@ -494,7 +484,7 @@ let NumberInputTmpComp = (function () {
           </Section>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "layout" || editorModeStatus === "both") && (
           <>
           <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
@@ -514,11 +504,24 @@ let NumberInputTmpComp = (function () {
           </>
         )}
       </>
-    ))
+    );
+    })
     .build();
 })();
 
-NumberInputTmpComp = migrateOldData(NumberInputTmpComp, fixOldInputCompData);
+NumberInputTmpComp = migrateOldData(
+  withLinkedDefaultValue(NumberInputTmpComp, "defaultValue", "value", (defaultValue: any, comp: any) => {
+    const allowNull = comp.children.allowNull?.getView?.();
+    if (defaultValue === "null" && allowNull) {
+      return NaN;
+    }
+    if (!isNaN(Number(defaultValue))) {
+      return Number(defaultValue);
+    }
+    return 0;
+  }),
+  fixOldInputCompData
+);
 
 const NumberInputTmp2Comp = withMethodExposing(
   NumberInputTmpComp,
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
index c2a45c121a..c20b03bf10 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
@@ -12,8 +12,8 @@ import { darkenColor, fadeColor } from "lowcoder-design";
 import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { IconControl } from "comps/controls/iconControl";
 import { trans } from "i18n";
-import { memo, useCallback, useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { memo, useCallback } from "react";
+import { useEditorStore } from "comps/editorStore";
 
 const getStyle = (style: SliderStyleType, vertical: boolean, disabledStyle?: DisabledSliderStyleType) => {
   return css`
@@ -112,7 +112,7 @@ export const SliderChildren = {
 };
 
 const InteractionSection = memo(({ children }: { children: RecordConstructorToComp<typeof SliderChildren & { hidden: typeof BoolCodeControl }> }) => {
-  const editorModeStatus = useContext(EditorContext).editorModeStatus;
+  const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
   
   if (!["logic", "both"].includes(editorModeStatus)) {
     return null;
@@ -130,7 +130,7 @@ const InteractionSection = memo(({ children }: { children: RecordConstructorToCo
 });
 
 const LayoutSection = memo(({ children }: { children: RecordConstructorToComp<typeof SliderChildren & { hidden: typeof BoolCodeControl }> }) => {
-  const editorModeStatus = useContext(EditorContext).editorModeStatus;
+  const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
   
   if (!["layout", "both"].includes(editorModeStatus)) {
     return null;
diff --git a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
index e4e70a6327..1f3fa50e8f 100644
--- a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
@@ -11,8 +11,7 @@ import { trans } from "i18n";
 import { BoolControl } from "../controls/boolControl";
 import { dropdownControl } from "../controls/dropdownControl";
 import { NumberControl } from "../controls/codeControl";
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { 
   ProgressTypeOptions, 
   StrokeLinecapOptions, 
@@ -118,6 +117,7 @@ let ProgressCircleTmpComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       const progressType = children.progressType.getView();
       const stepsEnabled = children.stepsEnabled.getView();
       
@@ -184,13 +184,13 @@ let ProgressCircleTmpComp = (function () {
             </Section>
           )}
 
-          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["logic", "both"].includes(editorModeStatus) && (
             <Section name={sectionNames.interaction}>
               {hiddenPropertyView(children)}
             </Section>
           )}
 
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["layout", "both"].includes(editorModeStatus) && (
             <>
               <Section name={sectionNames.style}>
                 {children.style.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/progressComp.tsx b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
index 1863c01508..4c449465a0 100644
--- a/client/packages/lowcoder/src/comps/comps/progressComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
@@ -10,8 +10,7 @@ import styled, { css } from "styled-components";
 import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 
 const getStyle = (style: ProgressStyleType) => {
   return css`
@@ -67,6 +66,7 @@ const ProgressBasicComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
@@ -76,7 +76,7 @@ const ProgressBasicComp = (function () {
             })}
           </Section>
 
-          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["logic", "both"].includes(editorModeStatus) && (
             <Section name={sectionNames.interaction}>
               {hiddenPropertyView(children)}
               {children.showInfo.propertyView({
@@ -86,7 +86,7 @@ const ProgressBasicComp = (function () {
             </Section>
           )}
 
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["layout", "both"].includes(editorModeStatus) && (
             <>
               <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
index 1836bfe9e9..5b35a875a4 100644
--- a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
@@ -12,8 +12,8 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { StringControl } from "comps/controls/codeControl";
 
-import { useContext, useEffect } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEffect } from "react";
+import { useEditorStore } from "comps/editorStore";
 import { withDefault } from "../generators";
 
 // TODO: add styling for image (size)
@@ -80,7 +80,9 @@ const QRCodeView = (props: RecordConstructorToView<typeof childrenMap>) => {
 let QRCodeBasicComp = (function () {
   return new UICompBuilder(childrenMap, (props) => {
     return( <QRCodeView {...props} />)})
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           {children.value.propertyView({
@@ -90,7 +92,7 @@ let QRCodeBasicComp = (function () {
           })}
         </Section>
 
-        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["logic", "both"].includes(editorModeStatus) && (
           <><Section name={sectionNames.interaction}>
               {hiddenPropertyView(children)}
             </Section>
@@ -107,7 +109,7 @@ let QRCodeBasicComp = (function () {
           </>
         )}
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           <>
             <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
@@ -119,7 +121,8 @@ let QRCodeBasicComp = (function () {
           </>
         )}
       </>
-    ))
+    );
+    })
     .build();
 })();
 
diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
index 025453c256..9e29e9c81f 100644
--- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
@@ -12,11 +12,12 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst
 import { styleControl } from "comps/controls/styleControl";
 import {  AnimationStyle, InputFieldStyle, LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
+import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
 import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 
-import { useContext, useEffect, useRef } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEffect, useRef } from "react";
+import { useEditorStore } from "comps/editorStore";
 
 const EventOptions = [changeEvent] as const;
 
@@ -56,7 +57,6 @@ const RatingBasicComp = (function () {
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props) => {
-    const defaultValue = { ...props.defaultValue }.value;
     const value = { ...props.value }.value;
     const changeRef = useRef(false);
     const mountedRef = useRef(true);
@@ -78,10 +78,6 @@ const RatingBasicComp = (function () {
       };
     }, []);
 
-    useEffect(() => {
-      props.value.onChange(defaultValue);
-    }, [defaultValue]);
-
     useEffect(() => {
       if (!changeRef.current) return;
 
@@ -113,6 +109,7 @@ const RatingBasicComp = (function () {
     });
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
@@ -124,7 +121,7 @@ const RatingBasicComp = (function () {
 
           <FormDataPropertyView {...children} />
 
-          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["logic", "both"].includes(editorModeStatus) && (
             <><Section name={sectionNames.interaction}>
               {children.onEvent.getPropertyView()}
               {disabledPropertyView(children)}
@@ -140,11 +137,11 @@ const RatingBasicComp = (function () {
             </>
           )}
 
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["layout", "both"].includes(editorModeStatus) && (
             children.label.getPropertyView()
           )}
 
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["layout", "both"].includes(editorModeStatus) && (
             <>
               <Section name={sectionNames.style}>
                 {children.style.getPropertyView()}
@@ -166,11 +163,14 @@ const RatingBasicComp = (function () {
     .build();
 })();
 
-export const RatingComp = withExposingConfigs(RatingBasicComp, [
-  new NameConfig("value", trans("export.ratingValueDesc")),
-  new NameConfig("max", trans("export.ratingMaxDesc")),
-  ...CommonNameConfig,
-]);
+export const RatingComp = withExposingConfigs(
+  withLinkedDefaultValue(RatingBasicComp, "defaultValue", "value"),
+  [
+    new NameConfig("value", trans("export.ratingValueDesc")),
+    new NameConfig("max", trans("export.ratingMaxDesc")),
+    ...CommonNameConfig,
+  ]
+);
 
 const getStyle = (style: RatingStyleType) => {
   return css`
diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
index e4a7fd0b57..1c4ad81b89 100644
--- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
@@ -37,8 +37,7 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
 import { BoolControl } from "comps/controls/boolControl";
 import { BoolCodeControl, NumberControl } from "comps/controls/codeControl";
 
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
@@ -292,6 +291,7 @@ export const ResponsiveLayoutBaseComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
@@ -301,14 +301,14 @@ export const ResponsiveLayoutBaseComp = (function () {
             })}
           </Section>
 
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" || editorModeStatus === "both") && (
             <Section name={sectionNames.interaction}>
               {disabledPropertyView(children)}
               {hiddenPropertyView(children)}
             </Section>
           )}
 
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["layout", "both"].includes(editorModeStatus) && (
             <>
             <Section name={sectionNames.layout}>
               {children.autoHeight.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
index 979b7fbfa3..6eece5b864 100644
--- a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
@@ -25,8 +25,7 @@ import { default as Skeleton } from "antd/es/skeleton";
 import { styleControl } from "comps/controls/styleControl";
 import { RichTextEditorStyle, RichTextEditorStyleType } from "comps/controls/styleControlConstants";
 
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 
 const localizeStyle = css`
   & .ql-snow {
@@ -400,6 +399,7 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
   );
 })
   .setPropertyViewFn((children) => {
+    const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
     return (
       <>
         <Section name={sectionNames.basic}>
@@ -409,7 +409,7 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
 
         <FormDataPropertyView {...children} />
 
-        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["logic", "both"].includes(editorModeStatus) && (
           <Section name={sectionNames.interaction}>
             {children.onEvent.getPropertyView()}
             {hiddenPropertyView(children)}
@@ -419,7 +419,7 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
           </Section>
         )}
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           <>
             <Section name={sectionNames.layout}>
               {children.autoHeight.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/rootComp.tsx b/client/packages/lowcoder/src/comps/comps/rootComp.tsx
index 3c663028d7..8c63a97ea3 100644
--- a/client/packages/lowcoder/src/comps/comps/rootComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/rootComp.tsx
@@ -8,7 +8,7 @@ import { HookListComp } from "comps/hooks/hookListComp";
 import { QueryListComp } from "comps/queries/queryComp";
 import { NameAndExposingInfo } from "comps/utils/exposingTypes";
 import { handlePromiseAndDispatch } from "util/promiseUtils";
-import { HTMLAttributes, Suspense, lazy, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { HTMLAttributes, Suspense, lazy, useContext, useMemo, useState } from "react";
 import { setFieldsNoTypeCheck } from "util/objectUtils";
 import { AppSettingsComp } from "./appSettingsComp";
 import { PreloadComp } from "./preLoadComp";
@@ -24,11 +24,6 @@ import { getGlobalSettings } from "comps/utils/globalSettings";
 import { getCurrentTheme } from "comps/utils/themeUtil";
 import { DataChangeResponderListComp } from "./dataChangeResponderComp";
 import { FolderListComp } from "./folderListComp";
-import {
-  PropertySectionContext,
-  PropertySectionContextType,
-  PropertySectionState,
-} from "lowcoder-design";
 import RefTreeComp from "./refTreeComp";
 import { ExternalEditorContext } from "util/context/ExternalEditorContext";
 import { useUserViewMode } from "util/hooks";
@@ -36,8 +31,9 @@ import React from "react";
 import { isEqual } from "lodash";
 import {LoadingBarHideTrigger} from "@lowcoder-ee/util/hideLoading";
 import clsx from "clsx";
-import { useUnmount } from "react-use";
 import { AIHelperModal, AIHelperProvider } from "components/ai-helper";
+import { createEditorStore, EditorStoreProvider } from "comps/editorStore";
+import { EditorPropertySectionProvider } from "comps/editorPropertySectionContext";
 
 const EditorView = lazy(
   () => import("pages/editor/editorView"),
@@ -64,13 +60,20 @@ const childrenMap = {
 const RootView = React.memo((props: RootViewProps) => {
   const previewTheme = useContext(ThemeContext);
   const { comp, isModuleRoot, ...divProps } = props;
-  const [editorState, setEditorState] = useState<EditorState>();
-  const [propertySectionState, setPropertySectionState] = useState<PropertySectionState>({});
+  const [editorStore] = useState(createEditorStore);
+  const [editorState, setEditorState] = useState(
+    () =>
+      new EditorState(
+        comp,
+        (changeEditorStateFn) => {
+          setEditorState(changeEditorStateFn);
+        },
+        isModuleRoot,
+        editorStore
+      )
+  );
   const { readOnly } = useContext(ExternalEditorContext);
   const isUserViewMode = useUserViewMode();
-  const mountedRef = useRef(true);
-  const editorStateRef = useRef<EditorState>();
-  const prevCompRef = useRef(comp);
 
   const appThemeId = comp.children.settings.getView().themeId;
   const { orgCommonSettings } = getGlobalSettings();
@@ -86,48 +89,13 @@ const RootView = React.memo((props: RootViewProps) => {
     previewTheme?.previewTheme ? "preview-theme" : 'default-theme-id'
   ); 
 
-  useEffect(() => {
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!mountedRef.current) return;
-
-    const newEditorState = new EditorState(comp, (changeEditorStateFn) => {
-      if (mountedRef.current) {
-        setEditorState((oldState) => {
-          return (oldState ? changeEditorStateFn(oldState) : undefined)
-        });
-      }
-    }, undefined, isModuleRoot);
-    editorStateRef.current = newEditorState;
-    setEditorState(newEditorState);
-
-    return () => {
-      if (editorStateRef.current) {
-        editorStateRef.current = undefined;
-      }
-    };
-  }, [isModuleRoot]);
-
-  useEffect(() => {
-    if (!mountedRef.current || !editorState) return;
-
-    if (prevCompRef.current !== comp) {
-      editorState.setComp(() => comp);
-      prevCompRef.current = comp;
-    }
-  }, [comp, editorState]);
-
-  useUnmount(() => {
-    setEditorState(undefined);
-    setPropertySectionState({});
-    if (editorStateRef.current) {
-      editorStateRef.current = undefined;
-    }
-  });
+  const currentEditorState = useMemo(
+    () =>
+      editorState.rootComp === comp
+        ? editorState
+        : setFieldsNoTypeCheck(editorState, { rootComp: comp }),
+    [comp, editorState]
+  );
 
   const themeContextValue = useMemo(
     () => ({
@@ -137,57 +105,32 @@ const RootView = React.memo((props: RootViewProps) => {
     [theme, themeId]
   );
 
-  const propertySectionContextValue = useMemo<PropertySectionContextType>(() => {
-    const compName = Object.keys(editorState?.selectedComps() || {})[0];
-    return {
-      compName,
-      state: propertySectionState,
-      toggle: (compName: string, sectionName: string) => {
-        if (!mountedRef.current) return;
-        
-        setPropertySectionState((oldState) => {
-          const nextSectionState: PropertySectionState = { ...oldState };
-          const compState = nextSectionState[compName] || {};
-          compState[sectionName] = compState[sectionName] === false;
-          nextSectionState[compName] = compState;
-          return nextSectionState;
-        });
-      },
-    };
-  }, [editorState, propertySectionState]);
-
-  if (!editorState && !isUserViewMode && readOnly) {
-    return <ModuleLoading />;
-  }
-
   const SuspenseFallback = isModuleRoot ? <ModuleLoading /> : <EditorSkeletonView />;
 
-  if (!editorState) {
-    return SuspenseFallback;
-  }
-
   return (
     <div {...divProps}
           className={clsx(
             divProps.id, 
           )} 
        style={{height: '100%'}}>
-      <PropertySectionContext.Provider value={propertySectionContextValue}>
-        <ThemeContext.Provider value={themeContextValue}>
-          <EditorContext.Provider value={editorState}>
-            <AIHelperProvider>
-              {Object.keys(comp.children.queries.children).map((key) => (
-                <div key={key}>{comp.children.queries.children[key].getView()}</div>
-              ))}
-              <Suspense fallback={!readOnly || isUserViewMode ? SuspenseFallback : null}>
-                <LoadingBarHideTrigger />
-                <EditorView uiComp={comp.children.ui} preloadComp={comp.children.preload} />
-              </Suspense>
-              {!readOnly && !isUserViewMode && !isModuleRoot && <AIHelperModal />}
-            </AIHelperProvider>
-          </EditorContext.Provider>
-        </ThemeContext.Provider>
-      </PropertySectionContext.Provider>
+      <EditorStoreProvider store={editorStore}>
+        <EditorPropertySectionProvider editorState={currentEditorState}>
+          <ThemeContext.Provider value={themeContextValue}>
+            <EditorContext.Provider value={currentEditorState}>
+              <AIHelperProvider>
+                {Object.keys(comp.children.queries.children).map((key) => (
+                  <div key={key}>{comp.children.queries.children[key].getView()}</div>
+                ))}
+                <Suspense fallback={!readOnly || isUserViewMode ? SuspenseFallback : null}>
+                  <LoadingBarHideTrigger />
+                  <EditorView uiComp={comp.children.ui} preloadComp={comp.children.preload} />
+                </Suspense>
+                {!readOnly && !isUserViewMode && !isModuleRoot && <AIHelperModal />}
+              </AIHelperProvider>
+            </EditorContext.Provider>
+          </ThemeContext.Provider>
+        </EditorPropertySectionProvider>
+      </EditorStoreProvider>
     </div>
   );
 }, (prevProps, nextProps) => {
@@ -203,7 +146,6 @@ export class RootComp extends RootCompBase {
   preloaded = false;
   preloadId = "";
   isModuleRoot = false;
-  private editorStateRef?: EditorState;
 
   getView() {
     if (!this.preloaded) {
@@ -214,7 +156,6 @@ export class RootComp extends RootCompBase {
 
   clearPreload() {
     this.children.preload.clear();
-    this.editorStateRef = undefined;
   }
 
   setModuleRoot(moduleRoot: boolean) {
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
index d88289c880..b61b2ed508 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
@@ -22,8 +22,7 @@ import { CascaderRef } from "antd/es/cascader";
 import { MarginControl } from "../../controls/marginControl";
 import { PaddingControl } from "../../controls/paddingControl";
 
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 
 export const defaultDataSource = JSON.stringify(i18nObjs.cascader, null, " ");
 
@@ -49,7 +48,9 @@ export const CascaderChildren = {
 
 export const CascaderPropertyView = (
   children: RecordConstructorToComp<typeof CascaderChildren & { hidden: typeof BoolCodeControl }>
-) => (
+) => {
+  const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+  return (
   <>
     <Section name={sectionNames.basic}>
       {children.options.propertyView({ label: trans("cascader.options") })}
@@ -57,7 +58,7 @@ export const CascaderPropertyView = (
       {placeholderPropertyView(children)}
     </Section>
 
-    {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+    {["logic", "both"].includes(editorModeStatus) && (
       <Section name={sectionNames.interaction}>
         {children.onEvent.getPropertyView()}
         {disabledPropertyView(children)}
@@ -67,18 +68,18 @@ export const CascaderPropertyView = (
       </Section>
     )}
 
-    {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+    {["layout", "both"].includes(editorModeStatus) && (
       children.label.getPropertyView()
     )}
 
-    {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+    {["logic", "both"].includes(editorModeStatus) && (
       <Section name={sectionNames.advanced}>
         {allowClearPropertyView(children)}
         {showSearchPropertyView(children)}
       </Section>
     )}
 
-    {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+    {["layout", "both"].includes(editorModeStatus) && (
       <>
         <Section name={sectionNames.style}>
           {children.style.getPropertyView()}
@@ -99,3 +100,4 @@ export const CascaderPropertyView = (
     )}
   </>
 );
+};
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
index 6f3cfec54b..6226b7083a 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -23,6 +23,7 @@ import { EllipsisTextCss } from "lowcoder-design";
 import { trans } from "i18n";
 import { RefControl } from "comps/controls/refControl";
 import { migrateOldData } from "comps/generators/simpleGenerators";
+import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 import Tooltip from "antd/es/tooltip";
 import { useCallback, useRef, useEffect, memo } from "react";
@@ -281,7 +282,10 @@ let CheckboxBasicComp = (function () {
     .build();
 })();
 
-CheckboxBasicComp = migrateOldData(CheckboxBasicComp, fixOldInputCompData);
+CheckboxBasicComp = migrateOldData(
+  withLinkedDefaultValue(CheckboxBasicComp, "defaultValue", "value"),
+  fixOldInputCompData
+);
 
 export const CheckboxComp = withExposingConfigs(CheckboxBasicComp, [
   new NameConfig("value", trans("selectInput.valueDesc")),
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
index 2527d57bd4..9cac2ca2ac 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
@@ -15,6 +15,7 @@ import { SelectInputInvalidConfig, useSelectInputValidate } from "./selectInputC
 import { PaddingControl } from "../../controls/paddingControl";	
 import { MarginControl } from "../../controls/marginControl";
 import { migrateOldData } from "comps/generators/simpleGenerators";
+import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 
 let MultiSelectBasicComp = (function () {
@@ -63,7 +64,10 @@ let MultiSelectBasicComp = (function () {
     .build();
 })();
 
-MultiSelectBasicComp = migrateOldData(MultiSelectBasicComp, fixOldInputCompData);
+MultiSelectBasicComp = migrateOldData(
+  withLinkedDefaultValue(MultiSelectBasicComp, "defaultValue", "value"),
+  fixOldInputCompData
+);
 
 export const MultiSelectComp = withExposingConfigs(MultiSelectBasicComp, [
   new NameConfig("value", trans("selectInput.valueDesc")),
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
index 28d5d6f3db..7d4e680957 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
@@ -13,6 +13,7 @@ import { EllipsisTextCss, ValueFromOption } from "lowcoder-design";
 import { trans } from "i18n";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
+import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
 import Tooltip from "antd/es/tooltip";
 import { useCallback, useRef, useEffect, memo } from "react";
 
@@ -215,7 +216,10 @@ let RadioBasicComp = (function () {
     .build();
 })();
 
-RadioBasicComp = migrateOldData(RadioBasicComp, fixOldInputCompData);
+RadioBasicComp = migrateOldData(
+  withLinkedDefaultValue(RadioBasicComp, "defaultValue", "value"),
+  fixOldInputCompData
+);
 
 export const RadioComp = withExposingConfigs(RadioBasicComp, [
   new NameConfig("value", trans("selectInput.valueDesc")),
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
index 25efd5ef75..57e097d69e 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
@@ -20,8 +20,7 @@ import { hiddenPropertyView, disabledPropertyView, showDataLoadingIndicatorsProp
 import { trans } from "i18n";
 import { RefControl } from "comps/controls/refControl";
 
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { withDefault } from "@lowcoder-ee/comps/generators";
 
 export const RadioLayoutOptions = [
@@ -59,14 +58,16 @@ export const RadioPropertyView = (
         | ReturnType<typeof arrayStringExposingStateControl>;
     }
   >
-) => (
+) => {
+  const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+  return (
   <>
     <Section name={sectionNames.basic}>
       {children.options.propertyView({})}
       {children.defaultValue.propertyView({ label: trans("prop.defaultValue") })}
     </Section>
 
-    {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+    {["logic", "both"].includes(editorModeStatus) && (
       <><SelectInputValidationSection {...children} />
       <FormDataPropertyView {...children} />
       <Section name={sectionNames.interaction}>
@@ -79,7 +80,7 @@ export const RadioPropertyView = (
       </>
     )}
 
-    {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+    {["layout", "both"].includes(editorModeStatus) && (
       <Section name={sectionNames.layout}>
         {children.layout.propertyView({
           label: trans("radio.options"),
@@ -94,11 +95,11 @@ export const RadioPropertyView = (
       </Section>
     )}
 
-    {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( 
+    {["layout", "both"].includes(editorModeStatus) && (
       children.label.getPropertyView() 
     )}
 
-    {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+    {["layout", "both"].includes(editorModeStatus) && (
       <>
       <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
       <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
@@ -108,3 +109,4 @@ export const RadioPropertyView = (
     )}
   </>
 );
+};
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
index 78724cab55..9a37648bc7 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
@@ -23,9 +23,10 @@ import { trans } from "i18n";
 import { hasIcon } from "comps/utils";
 import { RefControl } from "comps/controls/refControl";
 
-import { useContext, useEffect } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEffect } from "react";
+import { useEditorStore } from "comps/editorStore";
 import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
+import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 
 const getStyle = (style: SegmentStyleType) => {
@@ -119,14 +120,16 @@ let SegmentedControlBasicComp = (function () {
       ...validateState,
     });
   })
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           {children.options.propertyView({})}
           {children.defaultValue.propertyView({ label: trans("prop.defaultValue") })}
         </Section>
 
-        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["logic", "both"].includes(editorModeStatus) && (
           <><SelectInputValidationSection {...children} />
           <FormDataPropertyView {...children} />
           <Section name={sectionNames.interaction}>
@@ -136,11 +139,11 @@ let SegmentedControlBasicComp = (function () {
           </Section></>
         )}
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           children.label.getPropertyView()
         )}
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           <>
           <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
@@ -154,12 +157,16 @@ let SegmentedControlBasicComp = (function () {
             </>
         )}
       </>
-    ))
+    );
+    })
     .setExposeMethodConfigs(selectDivRefMethods)
     .build();
 })();
 
-SegmentedControlBasicComp = migrateOldData(SegmentedControlBasicComp, fixOldInputCompData);
+SegmentedControlBasicComp = migrateOldData(
+  withLinkedDefaultValue(SegmentedControlBasicComp, "defaultValue", "value"),
+  fixOldInputCompData
+);
 
 export const SegmentedControlComp = withExposingConfigs(SegmentedControlBasicComp, [
   new NameConfig("value", trans("selectInput.valueDesc")),
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
index a2415b4a58..662a7b5ab6 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
@@ -15,10 +15,11 @@ import {
   SelectInputInvalidConfig,
   useSelectInputValidate,
 } from "./selectInputConstants";
-import { useContext, useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { RecordConstructorToView } from "lowcoder-core";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
+import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
 
 let SelectBasicComp = (function () {
   const childrenMap = {
@@ -64,7 +65,10 @@ let SelectBasicComp = (function () {
     .build();
 })();
 
-SelectBasicComp = migrateOldData(SelectBasicComp, fixOldInputCompData);
+SelectBasicComp = migrateOldData(
+  withLinkedDefaultValue(SelectBasicComp, "defaultValue", "value"),
+  fixOldInputCompData
+);
 
 export const SelectComp = withExposingConfigs(SelectBasicComp, [
   new NameConfig("value", trans("selectInput.valueDesc")),
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
index 08d7690fd9..a474666bd9 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -57,8 +57,7 @@ import { RefControl } from "comps/controls/refControl";
 import { BaseSelectRef } from "rc-select";
 import { refMethods } from "comps/generators/withMethodExposing";
 import { blurMethod, focusMethod } from "comps/utils/methodUtils";
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { styleControl } from "comps/controls/styleControl";
 import SupaDemoDisplay from "comps/utils/supademoDisplay";
 
@@ -335,7 +334,9 @@ export const SelectPropertyView = (
     inputFieldStyle: { getPropertyView: () => ControlNode };
     childrenInputFieldStyle: { getPropertyView: () => ControlNode };
   }
-) => (
+) => {
+  const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+  return (
   <>
     <Section name={sectionNames.basic}>
       {children.options.propertyView({})}
@@ -345,7 +346,7 @@ export const SelectPropertyView = (
       {placeholderPropertyView(children)}
     </Section>
 
-    {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+    {["logic", "both"].includes(editorModeStatus) && (
       <>
         <>
           <SelectInputValidationSection {...children} />
@@ -361,10 +362,10 @@ export const SelectPropertyView = (
       </>
     )}
 
-    {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) &&
+    {["layout", "both"].includes(editorModeStatus) &&
       children.label.getPropertyView()}
 
-    {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+    {["logic", "both"].includes(editorModeStatus) && (
       <Section name={sectionNames.advanced}>
         {allowClearPropertyView(children)}
         {showSearchPropertyView(children)}
@@ -372,7 +373,7 @@ export const SelectPropertyView = (
     )}
 
     {["layout", "both"].includes(
-      useContext(EditorContext).editorModeStatus
+      editorModeStatus
     ) && (
         <>
           <Section name={sectionNames.style}>
@@ -391,6 +392,7 @@ export const SelectPropertyView = (
       )}
   </>
 );
+};
 
 export const baseSelectRefMethods = refMethods<BaseSelectRef>([
   focusMethod,
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectInputConstants.tsx
index d7b5648e17..96b17c21fa 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectInputConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectInputConstants.tsx
@@ -61,7 +61,6 @@ export const useSelectInputValidate = (props: ValidationParams) => {
   propsRef.current = props;
 
   const selectValue = props.value.value;
-  const defaultValue = props.defaultValue?.value;
 
   const handleValidate = (value: string | (string | number)[]) => {
     setValidateState(
@@ -74,10 +73,6 @@ export const useSelectInputValidate = (props: ValidationParams) => {
     );
   };
 
-  useEffect(() => {
-    props.value.onChange?.(defaultValue)
-  }, [defaultValue]);
-  
   useEffect(() => {
     if (!changeRef.current) return;
 
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
index a3aad710ea..be1739dd8c 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
@@ -34,8 +34,7 @@ import { trans } from "i18n";
 import { hasIcon } from "comps/utils";
 import { RefControl } from "comps/controls/refControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
 import { AutoHeightControl } from "@lowcoder-ee/comps/controls/autoHeightControl";
 
@@ -404,7 +403,9 @@ let StepControlBasicComp = (function () {
       </StyledWrapper>
     );
   })
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           {children.options.propertyView({})}
@@ -414,9 +415,7 @@ let StepControlBasicComp = (function () {
           })}
         </Section>
 
-        {["logic", "both"].includes(
-          useContext(EditorContext).editorModeStatus,
-        ) && (
+        {["logic", "both"].includes(editorModeStatus) && (
           <>
             <Section name={sectionNames.interaction}>
               {children.onEvent.getPropertyView()}
@@ -439,9 +438,7 @@ let StepControlBasicComp = (function () {
           </>
         )}
 
-        {["layout", "both"].includes(
-          useContext(EditorContext).editorModeStatus,
-        ) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           <Section name={sectionNames.layout}>
             {children.autoHeight.getPropertyView()}
             {children.size.propertyView({
@@ -484,9 +481,7 @@ let StepControlBasicComp = (function () {
           </Section>
         )}
 
-        {["layout", "both"].includes(
-          useContext(EditorContext).editorModeStatus,
-        ) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           <>
             <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
@@ -497,7 +492,8 @@ let StepControlBasicComp = (function () {
           </>
         )}
       </>
-    ))
+    );
+    })
     .setExposeMethodConfigs(selectDivRefMethods)
     .build();
 })();
diff --git a/client/packages/lowcoder/src/comps/comps/shapeComp/shapeComp.tsx b/client/packages/lowcoder/src/comps/comps/shapeComp/shapeComp.tsx
index fca9c6b8b8..10f406a31a 100644
--- a/client/packages/lowcoder/src/comps/comps/shapeComp/shapeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/shapeComp/shapeComp.tsx
@@ -23,8 +23,8 @@ import {
 import { trans } from "i18n";
 import { BoolCodeControl } from "comps/controls/codeControl";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
-import React, { useContext, useEffect, useState } from "react";
-import { EditorContext } from "comps/editorState";
+import React, { useEffect, useState } from "react";
+import { useEditorStore } from "comps/editorStore";
 
 export const ContainerBaseComp = (function () {
   const childrenMap = {
@@ -41,6 +41,7 @@ export const ContainerBaseComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
@@ -49,8 +50,8 @@ export const ContainerBaseComp = (function () {
               IconType: "All",
             })}
           </Section>
-          {(useContext(EditorContext).editorModeStatus === "logic" ||
-            useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" ||
+            editorModeStatus === "both") && (
             <Section name={sectionNames.interaction}>
               {disabledPropertyView(children)}
               {hiddenPropertyView(children)}
@@ -58,8 +59,8 @@ export const ContainerBaseComp = (function () {
             </Section>
           )}
 
-          {(useContext(EditorContext).editorModeStatus === "layout" ||
-            useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "layout" ||
+            editorModeStatus === "both") && (
             <>
               <Section name={sectionNames.layout}>
                 {children.container.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
index d113e08df4..10d951f09c 100644
--- a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
@@ -27,8 +27,7 @@ import { UICompBuilder } from "../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
 import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants";
 
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 
 const Wrapper = styled.div<{ $style: SignatureStyleType; $isEmpty: boolean }>`
   height: 100%;
@@ -227,6 +226,7 @@ let SignatureTmpComp = (function () {
     });
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
@@ -235,7 +235,7 @@ let SignatureTmpComp = (function () {
 
           <FormDataPropertyView {...children} />
 
-          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["logic", "both"].includes(editorModeStatus) && (
             <Section name={sectionNames.interaction}>
               {children.onEvent.getPropertyView()}
               {hiddenPropertyView(children)}
@@ -245,11 +245,11 @@ let SignatureTmpComp = (function () {
             </Section>
           )}
 
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["layout", "both"].includes(editorModeStatus) && (
             children.label.getPropertyView()
           )}
 
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["layout", "both"].includes(editorModeStatus) && (
             <>
               <Section name={sectionNames.style}>
                 {children.style.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/splitLayout/splitLayout.tsx b/client/packages/lowcoder/src/comps/comps/splitLayout/splitLayout.tsx
index 04f3ca3d66..15daa723c3 100644
--- a/client/packages/lowcoder/src/comps/comps/splitLayout/splitLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/splitLayout/splitLayout.tsx
@@ -15,8 +15,7 @@ import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
 import { Section, sectionNames} from "lowcoder-design";
 import { trans } from "i18n";
 import { ContainerBaseProps, gridItemCompToGridItems, InnerGrid } from "../containerComp/containerView";
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
@@ -196,19 +195,21 @@ const SplitLayout = (props: SplitLayoutProps) => {
 
 export const SplitLayoutBaseComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => <SplitLayout {...props} dispatch={dispatch} />)
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           {children.columns.propertyView({ title: trans("splitLayout.column") })}
         </Section>
 
-        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "logic" || editorModeStatus === "both") && (
             <Section name={sectionNames.interaction}>
               {disabledPropertyView(children)}
               {hiddenPropertyView(children)}
             </Section>
           )}
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           <>
             <Section name={sectionNames.layout}>
               {children.orientation.propertyView({
@@ -242,7 +243,8 @@ export const SplitLayoutBaseComp = (function () {
           </>
         )}
       </>
-    ))
+    );
+    })
     .build();
 })();
 
@@ -348,4 +350,4 @@ class SplitLayoutImplComp extends SplitLayoutBaseComp implements IContainer {
 export const SplitLayoutComp = withExposingConfigs(
   SplitLayoutImplComp,
   [ NameConfigHidden]
-);
\ No newline at end of file
+);
diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
index 40bada394f..df0b68c3c2 100644
--- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
@@ -6,6 +6,7 @@ import { LabelControl } from "comps/controls/labelControl";
 import { styleControl } from "comps/controls/styleControl";
 import { SwitchStyle, SwitchStyleType, LabelStyle,  InputFieldStyle, AnimationStyle } from "comps/controls/styleControlConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
+import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
 import { Section, lightenColor, sectionNames } from "lowcoder-design";
 import styled, { css } from "styled-components";
 import { UICompBuilder } from "../generators";
@@ -18,8 +19,8 @@ import { refMethods } from "comps/generators/withMethodExposing";
 import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUtils";
 import { fixOldInputCompData } from "./textInputComp/textInputConstants";
 
-import { useCallback, useContext, useEffect } from "react";
-import { EditorContext } from "comps/editorState";
+import { useCallback } from "react";
+import { useEditorStore } from "comps/editorStore";
 
 const EventOptions = [
   changeEvent,
@@ -108,13 +109,8 @@ let SwitchTmpComp = (function () {
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props) => {
-    const defaultValue = { ...props.defaultValue }.value;
     const value = { ...props.value }.value;
 
-    useEffect(() => {
-      props.value.onChange(defaultValue);
-    }, [defaultValue]);
-
     const handleChange = useCallback((checked: boolean) => {
       props.value.onChange(checked);
       props.onEvent("change");
@@ -140,7 +136,7 @@ let SwitchTmpComp = (function () {
     });
   })
     .setPropertyViewFn((children) => {
-      const editorModeStatus = useContext(EditorContext).editorModeStatus;
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       const isLogicMode = ["logic", "both"].includes(editorModeStatus);
       const isLayoutMode = ["layout", "both"].includes(editorModeStatus);
 
@@ -189,7 +185,10 @@ let SwitchTmpComp = (function () {
     .build();
 })();
 
-SwitchTmpComp = migrateOldData(SwitchTmpComp, fixOldInputCompData);
+SwitchTmpComp = migrateOldData(
+  withLinkedDefaultValue(SwitchTmpComp, "defaultValue", "value"),
+  fixOldInputCompData
+);
 
 export const SwitchComp = withExposingConfigs(SwitchTmpComp, [
   new NameConfig("value", trans("switchComp.valueDesc")),
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMultilineTextComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMultilineTextComp.tsx
index 5006e86f3f..196bce238f 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMultilineTextComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMultilineTextComp.tsx
@@ -61,7 +61,7 @@ const MultilineEditModal = React.memo((props: {
       cancelText={trans("table.multilineEditorCancel")}
       width={560}
       maskClosable={false}
-      destroyOnClose
+      destroyOnHidden
     >
       <TextArea
         ref={textAreaRef}
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx
index a2eca21fe2..a28c77dcc5 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx
@@ -60,8 +60,7 @@ import { getSelectedRowKeys } from "./selectionControl";
 import { compTablePropertyView } from "./tablePropertyView";
 import { RowColorComp, RowHeightComp, SortValue, TableChildrenView, TableInitComp } from "./tableTypes";
 
-import { useContext, useState } from "react";
-import { EditorContext } from "comps/editorState";
+import { useState } from "react";
 
 export class TableImplComp extends TableInitComp implements IContainer {
   private prevUnevaledValue?: string;
@@ -564,16 +563,7 @@ let TableTmpComp = withViewFn(TableImplComp, (comp) => {
 });
 
 
-const withEditorModeStatus = (Component:any) => (props:any) => {
-  const editorModeStatus = useContext(EditorContext).editorModeStatus;
-  const {ref, ...otherProps} = props;
-  return <Component {...otherProps} editorModeStatus={editorModeStatus} />;
-};
-
-// Use this HOC when defining TableTmpComp
-TableTmpComp = withPropertyViewFn(TableTmpComp, (comp) => withEditorModeStatus(compTablePropertyView)(comp));
-
-// TableTmpComp = withPropertyViewFn(TableTmpComp, compTablePropertyView);
+TableTmpComp = withPropertyViewFn(TableTmpComp, compTablePropertyView);
 
 
 
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
index 2e2dc73f26..1cd11d21aa 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -35,6 +35,7 @@ import { alignOptions } from "comps/controls/dropdownControl";
 import { ColumnTypeCompMap } from "comps/comps/tableComp/column/columnTypeComp";
 import Segmented from "antd/es/segmented";
 import { CheckboxChangeEvent } from "antd/es/checkbox";
+import { useEditorStore } from "comps/editorStore";
 
 const InsertDiv = styled.div`
   display: flex;
@@ -496,8 +497,8 @@ function columnPropertyView<T extends MultiBaseComp<TableChildrenType>>(comp: T)
   ];
 }
 
-export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType> & { editorModeStatus: string }>(comp: T) {
-  const editorModeStatus = comp.editorModeStatus;
+function TablePropertyView<T extends MultiBaseComp<TableChildrenType>>({ comp }: { comp: T }) {
+  const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
   const dataLabel = trans("data");
 
   return (
@@ -661,3 +662,7 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
     </>
   );
 }
+
+export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>>(comp: T) {
+  return <TablePropertyView comp={comp} />;
+}
diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableComp.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableComp.tsx
index 652867aa9d..e7e16bf10f 100644
--- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableComp.tsx
@@ -40,8 +40,6 @@ import { getSelectedRowKeys } from "./selectionControl";
 import { compTablePropertyView } from "./tablePropertyView";
 import { RowColorComp, RowHeightComp, TableChildrenView, TableInitComp } from "./tableTypes";
 
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
 import { tableMethodExposings } from "./methods/tableMethodExposings";
 import { buildSortedDataNode, buildFilteredDataNode, buildOriDisplayDataNode, buildColumnAggrNode } from "./nodes/dataNodes";
 
@@ -241,14 +239,7 @@ let TableTmpComp = withViewFn(TableImplComp, (comp) => {
   );
 });
 
-const withEditorModeStatus = (Component:any) => (props:any) => {
-  const editorModeStatus = useContext(EditorContext).editorModeStatus;
-  const {ref, ...otherProps} = props;
-  return <Component {...otherProps} editorModeStatus={editorModeStatus} />;
-};
-
-
-TableTmpComp = withPropertyViewFn(TableTmpComp, (comp) => withEditorModeStatus(compTablePropertyView)(comp));
+TableTmpComp = withPropertyViewFn(TableTmpComp, compTablePropertyView);
 
 TableTmpComp = withDispatchHook(TableTmpComp, (dispatch) => (action) => {
   if (!dispatch) {
diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tablePropertyView.tsx
index acf68cc140..3ff0888b97 100644
--- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tablePropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tablePropertyView.tsx
@@ -35,6 +35,7 @@ import { alignOptions } from "comps/controls/dropdownControl";
 import { ColumnTypeCompMap } from "./column/columnTypeComp";
 import Segmented from "antd/es/segmented";
 import { CheckboxChangeEvent } from "antd/es/checkbox";
+import { useEditorStore } from "comps/editorStore";
 
 const InsertDiv = styled.div`
   display: flex;
@@ -485,8 +486,8 @@ function columnPropertyView<T extends MultiBaseComp<TableChildrenType>>(comp: T)
   ];
 }
 
-export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType> & { editorModeStatus: string }>(comp: T) {
-  const editorModeStatus = comp.editorModeStatus;
+function TablePropertyView<T extends MultiBaseComp<TableChildrenType>>({ comp }: { comp: T }) {
+  const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
   const dataLabel = trans("data");
 
   return (
@@ -635,3 +636,7 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
     </>
   );
 }
+
+export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>>(comp: T) {
+  return <TablePropertyView comp={comp} />;
+}
diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
index 5a724e5f6b..437eb4f5e1 100644
--- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -15,7 +15,7 @@ import { NameGenerator } from "comps/utils";
 import { ScrollBar, Section, sectionNames } from "lowcoder-design";
 import { HintPlaceHolder } from "lowcoder-design";
 import _ from "lodash";
-import React, {useContext, useMemo, useEffect } from "react";
+import React, {useMemo, useEffect } from "react";
 import styled, { css } from "styled-components";
 import { IContainer } from "../containerBase/iContainer";
 import { SimpleContainerComp } from "../containerBase/simpleContainerComp";
@@ -30,7 +30,7 @@ import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUt
 import { trans } from "i18n";
 import { BoolCodeControl, NumberControl } from "comps/controls/codeControl";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { BoolControl } from "comps/controls/boolControl";
 import { PositionControl,dropdownControl } from "comps/controls/dropdownControl";
@@ -339,6 +339,7 @@ export const TabbedContainerBaseComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
@@ -349,7 +350,7 @@ export const TabbedContainerBaseComp = (function () {
             {children.selectedTabKey.propertyView({ label: trans("prop.defaultValue") })}
           </Section>
 
-          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["logic", "both"].includes(editorModeStatus) && (
             <Section name={sectionNames.interaction}>
               {children.onEvent.getPropertyView()}
               {disabledPropertyView(children)}
@@ -377,7 +378,7 @@ export const TabbedContainerBaseComp = (function () {
             </Section>
           )}
 
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["layout", "both"].includes(editorModeStatus) && (
             <>
               <Section name={sectionNames.layout}>
                 {children.placement.propertyView({ label: trans("tabbedContainer.placement"), radioButton: true })}
diff --git a/client/packages/lowcoder/src/comps/comps/tagsComp/tagsCompView.tsx b/client/packages/lowcoder/src/comps/comps/tagsComp/tagsCompView.tsx
index cb9c443325..cd499439a1 100644
--- a/client/packages/lowcoder/src/comps/comps/tagsComp/tagsCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tagsComp/tagsCompView.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
-import React, { useContext, useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { Tag, App } from "antd";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { PresetStatusColorTypes } from "antd/es/_util/colors";
 import { hashToNum } from "util/stringUtils";
 import { TagsCompOptionsControl } from "comps/controls/optionsControl";
@@ -336,6 +336,7 @@ const multiTags = (function () {
     );
   })
     .setPropertyViewFn((children: any) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
@@ -343,7 +344,7 @@ const multiTags = (function () {
             {children.editable.propertyView({ label: "Editable" })}           
           </Section>
 
-          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["logic", "both"].includes(editorModeStatus) && (
             <Section name={sectionNames.interaction}>
               {children.onEvent.getPropertyView()}
               {hiddenPropertyView(children)}
@@ -351,7 +352,7 @@ const multiTags = (function () {
             </Section>
           )}
 
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["layout", "both"].includes(editorModeStatus) && (
             <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
           )}
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 708a4f4aa3..cefa90fa26 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -18,8 +18,8 @@ import { alignWithJustifyControl } from "comps/controls/alignControl";
 import { MarginControl } from "../controls/marginControl";
 import { PaddingControl } from "../controls/paddingControl";
 
-import React, { useContext, useEffect, useRef, useMemo } from "react";
-import { EditorContext } from "comps/editorState";
+import React, { useMemo } from "react";
+import { useEditorStore } from "comps/editorStore";
 import { clickEvent, doubleClickEvent, eventHandlerControl } from "../controls/eventHandlerControl";
 import { NewChildren } from "../generators/uiCompBuilder";
 import { RecordConstructorToComp } from "lowcoder-core";
@@ -160,8 +160,7 @@ type ChildrenType = NewChildren<RecordConstructorToComp<typeof childrenMap>>;
 const TextPropertyView = React.memo((props: {
   children: ChildrenType
 }) => {
-  const editorContext = useContext(EditorContext);
-  const editorModeStatus = useMemo(() => editorContext.editorModeStatus, [editorContext.editorModeStatus]);
+  const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
 
   const basicSection = useMemo(() => (
     <Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
index 0a3ca6bf63..24fd07cf28 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -32,11 +32,12 @@ import { hasIcon } from "comps/utils";
 import { InputRef } from "antd/es/input";
 import { RefControl } from "comps/controls/refControl";
 import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
+import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
 import { numberSimpleControl } from "comps/controls/numberSimpleControl";
 import { NumberControl } from "comps/controls/codeControl";
 
-import React, { useContext, useEffect } from "react";
-import { EditorContext } from "comps/editorState";
+import React, { useEffect } from "react";
+import { useEditorStore } from "comps/editorStore";
 
 /**
  * Input Comp
@@ -101,16 +102,17 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
   });
 })
   .setPropertyViewFn((children) => {
+    const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
     return (
       <>
         <TextInputBasicSection {...children} />
         <FormDataPropertyView {...children} />
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           children.label.getPropertyView()
         )}
 
-        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["logic", "both"].includes(editorModeStatus) && (
           <><TextInputInteractionSection {...children} />
             <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
             <Section name={sectionNames.advanced}>
@@ -123,7 +125,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
             <TextInputValidationSection {...children} />
           </>
         )}
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           <>
             <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
             <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
@@ -145,6 +147,9 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
   .build();
 
 
-const InputComp = migrateOldData(InputBasicComp, fixOldInputCompData);
+const InputComp = migrateOldData(
+  withLinkedDefaultValue(InputBasicComp, "defaultValue", "value"),
+  fixOldInputCompData
+);
 
 export { InputComp };
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
index da307ce764..5c0a4eec5c 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
@@ -54,9 +54,10 @@ import {
   changeEvent
 } from "comps/controls/eventHandlerControl";
 
-import React, { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import React from "react";
+import { useEditorStore } from "comps/editorStore";
 import { migrateOldData } from "comps/generators/simpleGenerators";
+import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
 
 const Wrapper = styled.div<{
   $style: InputLikeStyleType;
@@ -221,14 +222,16 @@ let MentionTmpComp = (function () {
       ...validateState,
     });
   })
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           {children.value.propertyView({ label: trans("prop.defaultValue") })}
           {children.placeholder.propertyView({
             label: trans("prop.placeholder"),
           })}
-          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["logic", "both"].includes(editorModeStatus) && (
             children.mentionList.propertyView({
               label: trans("mention.mentionList"),
             })
@@ -236,11 +239,11 @@ let MentionTmpComp = (function () {
         </Section>
         <FormDataPropertyView {...children} />
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           children.label.getPropertyView()
         )}
 
-        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["logic", "both"].includes(editorModeStatus) && (
           <><Section name={sectionNames.interaction}>
             {children.onEvent.getPropertyView()}
             {disabledPropertyView(children)}
@@ -259,7 +262,7 @@ let MentionTmpComp = (function () {
             </Section></>
         )}
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           <>
             <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
@@ -270,7 +273,8 @@ let MentionTmpComp = (function () {
           </>
         )}
       </>
-    ))
+    );
+    })
     .build();
 })();
 
@@ -281,7 +285,10 @@ MentionTmpComp = class extends MentionTmpComp {
   }
 };
 
-MentionTmpComp = migrateOldData(MentionTmpComp, fixOldInputCompData);
+MentionTmpComp = migrateOldData(
+  withLinkedDefaultValue(MentionTmpComp, "defaultValue", "value"),
+  fixOldInputCompData
+);
 
 const TextareaTmp2Comp = withMethodExposing(
   MentionTmpComp,
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
index 4b9cf56389..704ac762e5 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
@@ -39,9 +39,10 @@ import { trans } from "i18n";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import { RefControl } from "comps/controls/refControl";
-import React, { useContext, useEffect } from "react";
-import { EditorContext } from "comps/editorState";
+import React, { useEffect } from "react";
+import { useEditorStore } from "comps/editorStore";
 import { migrateOldData } from "comps/generators/simpleGenerators";
+import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
 import { NumberControl } from "comps/controls/codeControl";
 
 const PasswordStyle = styled(InputPassword)<{
@@ -101,16 +102,17 @@ let PasswordTmpComp = (function () {
     });
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <TextInputBasicSection {...children} />
           <FormDataPropertyView {...children} />
 
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["layout", "both"].includes(editorModeStatus) && (
             children.label.getPropertyView()
           )}
 
-          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["logic", "both"].includes(editorModeStatus) && (
             <><TextInputInteractionSection {...children} />
               <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
               <Section name={sectionNames.advanced}>
@@ -130,7 +132,7 @@ let PasswordTmpComp = (function () {
               </Section></>
           )}
 
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["layout", "both"].includes(editorModeStatus) && (
             <>
               <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
               <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
@@ -145,7 +147,10 @@ let PasswordTmpComp = (function () {
     .build();
 })();
 
-PasswordTmpComp = migrateOldData(PasswordTmpComp, fixOldInputCompData);
+PasswordTmpComp = migrateOldData(
+  withLinkedDefaultValue(PasswordTmpComp, "defaultValue", "value"),
+  fixOldInputCompData
+);
 
 const PasswordTmp2Comp = withMethodExposing(PasswordTmpComp, inputRefMethods);
 
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
index 049d5d88d7..50fc2f40cf 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
@@ -35,9 +35,10 @@ import { TextAreaRef } from "antd/es/input/TextArea";
 import { blurMethod, focusWithOptions } from "comps/utils/methodUtils";
 import { NumberControl } from "comps/controls/codeControl";
 
-import React, { useContext, useEffect } from "react";
-import { EditorContext } from "comps/editorState";
+import React, { useEffect } from "react";
+import { useEditorStore } from "comps/editorStore";
 import { migrateOldData } from "comps/generators/simpleGenerators";
+import { withLinkedDefaultValue } from "comps/controls/codeStateControl";
 
 const TextAreaStyled = styled(TextArea)<{
   $style: InputLikeStyleType;
@@ -121,16 +122,18 @@ let TextAreaTmpComp = (function () {
       ...validateState,
     });
   })
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <TextInputBasicSection {...children} />
         <FormDataPropertyView {...children} />
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           children.label.getPropertyView()
         )}
 
-        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["logic", "both"].includes(editorModeStatus) && (
           <><TextInputInteractionSection {...children} />
             <Section name={sectionNames.layout}>
               {children.autoHeight.getPropertyView()}
@@ -148,7 +151,7 @@ let TextAreaTmpComp = (function () {
             <TextInputValidationSection {...children} /></>
         )}
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           <>
             <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
             <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
@@ -158,7 +161,8 @@ let TextAreaTmpComp = (function () {
           </>
         )}
       </>
-    ))
+    );
+    })
     .build();
 })();
 
@@ -168,7 +172,10 @@ TextAreaTmpComp = class extends TextAreaTmpComp {
   }
 };
 
-TextAreaTmpComp = migrateOldData(TextAreaTmpComp, fixOldInputCompData);
+TextAreaTmpComp = migrateOldData(
+  withLinkedDefaultValue(TextAreaTmpComp, "defaultValue", "value"),
+  fixOldInputCompData
+);
 
 const TextareaTmp2Comp = withMethodExposing(
   TextAreaTmpComp,
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
index 3b03a2ed4f..d806d2325a 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
@@ -175,14 +175,8 @@ export const useTextInputProps = (props: RecordConstructorToView<typeof textInpu
   const propsRef = useRef<RecordConstructorToView<typeof textInputChildren>>(props);
   propsRef.current = props;
 
-  const defaultValue = { ...props.defaultValue }.value;
   const inputValue = { ...props.value }.value;
 
-  useEffect(() => {
-    setLocalInputValue(defaultValue);
-    props.value.onChange(defaultValue)
-  }, [defaultValue]);
-
   useEffect(() => {
     if (!touchRef.current) {
       setLocalInputValue(inputValue);
diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
index 06e1ff1a4e..5ae49df465 100644
--- a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from "react";
+import React, { useEffect, useState } from "react";
 import { default as Button } from "antd/es/button";
 import {
   changeChildAction,
@@ -48,7 +48,7 @@ import {
 import { timelineDate, timelineNode, TimelineDataTooltip } from "./timelineConstants";
 import { convertTimeLineData } from "./timelineUtils";
 import { default as Timeline } from "antd/es/timeline";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { styled } from "styled-components";
 import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";
 
@@ -191,7 +191,9 @@ let TimeLineBasicComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => (
     <TimelineComp {...props} dispatch={dispatch} />
   ))
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           {children.value.propertyView({
@@ -201,7 +203,7 @@ let TimeLineBasicComp = (function () {
           })}
         </Section>
 
-        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["logic", "both"].includes(editorModeStatus) && (
           <Section name={sectionNames.interaction}>
             {children.onEvent.getPropertyView()}
             {hiddenPropertyView(children)}
@@ -209,7 +211,7 @@ let TimeLineBasicComp = (function () {
           </Section>
         )}
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           <><Section name={sectionNames.layout}>
               {children.autoHeight.getPropertyView()}
               {!children.autoHeight.getView() && 
@@ -234,7 +236,8 @@ let TimeLineBasicComp = (function () {
           </>
         )}
       </>
-    ))
+    );
+    })
     .build();
 })();
 
diff --git a/client/packages/lowcoder/src/comps/comps/timerComp.tsx b/client/packages/lowcoder/src/comps/comps/timerComp.tsx
index e9fc26ad05..62779e210c 100644
--- a/client/packages/lowcoder/src/comps/comps/timerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/timerComp.tsx
@@ -9,9 +9,9 @@ import { trans } from "i18n";
 import { Button, Space } from "antd";
 import { countdownEvent, eventHandlerControl, pauseEvent, resetEvent, resumeEvent, startEvent } from "../controls/eventHandlerControl";
 import styled from "styled-components";
-import { useContext, useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { stateComp } from "../generators";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { dropdownControl } from "../controls/dropdownControl";
 import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { BoolControl } from "comps/controls/boolControl";
@@ -227,9 +227,10 @@ const TimerCompView = React.memo((props: RecordConstructorToView<typeof children
 const TimerCompPropertyView = React.memo((props: {
   children: ChildrenType
 }) => {
+  const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
   return (
     <>
-      {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+      {["logic", "both"].includes(editorModeStatus) && (
         <>
           <Section name={sectionNames.basic}>
             {props.children.timerType.propertyView({
@@ -250,7 +251,7 @@ const TimerCompPropertyView = React.memo((props: {
         </>
       )}
 
-      {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+      {["layout", "both"].includes(editorModeStatus) && (
         <>
         <Section name={sectionNames.style}>
           {props.children.style.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/transferComp.tsx b/client/packages/lowcoder/src/comps/comps/transferComp.tsx
index 466622cd93..d2ee9fcf9b 100644
--- a/client/packages/lowcoder/src/comps/comps/transferComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/transferComp.tsx
@@ -14,7 +14,7 @@ import type { TransferKey } from "antd/es/transfer/interface";
 import { useResizeDetector } from "react-resize-detector";
 import { changeEvent, eventHandlerControl, searchEvent, selectedChangeEvent } from "../controls/eventHandlerControl";
 import styled, { css } from "styled-components";
-import { useContext, useEffect, useRef, useState, useCallback } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 import { valueComp, withDefault } from "../generators";
 import type { TransferDirection } from 'antd/es/transfer';
 import React from "react";
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
index a2747e0090..bcbb840004 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
@@ -26,8 +26,7 @@ import {
 import { selectInputValidate } from "../selectInputComp/selectInputConstants";
 import { TreeEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { trans } from "i18n";
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { AutoHeightControl } from "@lowcoder-ee/comps/controls/autoHeightControl";
 import { showDataLoadingIndicatorsPropertyView } from "@lowcoder-ee/comps/utils/propertyUtils";
 
@@ -139,13 +138,15 @@ let TreeBasicComp = (function () {
   return new UICompBuilder(childrenMap, (props) => {
     return(<TreeCompView {...props} />)}
 )
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           {treeDataPropertyView(children)}
         </Section>
 
-        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["logic", "both"].includes(editorModeStatus) && (
           <><SelectInputValidationSection {...children} />
             {formSection(children)}
             <Section name={sectionNames.interaction}>
@@ -164,7 +165,7 @@ let TreeBasicComp = (function () {
           </>
         )}
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           <Section name={sectionNames.layout}>
             {children.autoHeight.getPropertyView()}
             {!children.autoHeight.getView() && 
@@ -178,9 +179,9 @@ let TreeBasicComp = (function () {
           </Section>
         )}
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (children.label.getPropertyView())}
+        {["layout", "both"].includes(editorModeStatus) && (children.label.getPropertyView())}
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           <>
             <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
             <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
@@ -188,7 +189,8 @@ let TreeBasicComp = (function () {
           </>
         )}
       </>
-    ))
+    );
+    })
     .build();
 })();
 
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
index 482316e0fe..52e7005951 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
@@ -35,8 +35,7 @@ import {
 } from "comps/utils/propertyUtils";
 import { BaseSelectRef } from "rc-select";
 import { RefControl } from "comps/controls/refControl";
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 
 const StyledTreeSelect = styled(TreeSelect)<{ $style: TreeSelectStyleType }>`
   width: 100%;
@@ -153,14 +152,16 @@ let TreeBasicComp = (function () {
     return(
     <TreeCompView {...props} dispatch={dispatch} />
   )})
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           {treeDataPropertyView(children)}
           {placeholderPropertyView(children)}
         </Section>
 
-        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["logic", "both"].includes(editorModeStatus) && (
           <><SelectInputValidationSection {...children} />
             {formSection(children)}
             <Section name={sectionNames.interaction}>
@@ -179,7 +180,7 @@ let TreeBasicComp = (function () {
           </>
         )}
       
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           <Section name={sectionNames.layout}>
             {children.expanded.propertyView({ label: trans("tree.expanded") })}
             {children.defaultExpandAll.propertyView({ label: trans("tree.defaultExpandAll") })}
@@ -188,9 +189,9 @@ let TreeBasicComp = (function () {
           </Section>
         )}
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( children.label.getPropertyView() )}
+        {["layout", "both"].includes(editorModeStatus) && ( children.label.getPropertyView() )}
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           <>
           <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
           <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
@@ -198,7 +199,8 @@ let TreeBasicComp = (function () {
           </>
         )}
       </>
-    ))
+    );
+    })
     .setExposeMethodConfigs(baseSelectRefMethods)
     .build();
 })();
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
index 457a807baf..da5d84e978 100644
--- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
+++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
@@ -256,13 +256,12 @@ export function TriContainer(props: TriContainerProps) {
                 $style={props.style}
                 $horizontalAlignment={props.horizontalAlignment}
               >
-                <p>
-                  {props.type === "markdown" ? (
-                    <TacoMarkDown>{text.value}</TacoMarkDown>
-                  ) : (
-                    text.value
-                  )}
-                </p>
+                {/* markdown renders block elements, so it can't live inside a <p> */}
+                {props.type === "markdown" ? (
+                  <TacoMarkDown>{text.value}</TacoMarkDown>
+                ) : (
+                  <p>{text.value}</p>
+                )}
               </FloatTextWrapper>
             </div>
           </ScrollBar>
diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
index 2ab7186edb..e924b39c63 100644
--- a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
+++ b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
@@ -2,6 +2,7 @@ import { executeQueryAction, routeByNameAction } from "lowcoder-core";
 import { InputTypeEnum } from "comps/comps/moduleContainerComp/ioComp/inputListItemComp";
 import { SimpleNameComp } from "comps/comps/simpleNameComp";
 import { EditorContext, EditorState } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { MultiCompBuilder } from "comps/generators/multi";
 import { BranchDiv, Dropdown } from "lowcoder-design";
 import { BottomResTypeEnum } from "types/bottomRes";
@@ -18,6 +19,11 @@ const ExecuteQueryPropertyView = ({
   comp: any,
   placement?: "query" | "table"
 }) => {
+  // subscribed so the EditorContext.Consumer below re-renders when the selected
+  // bottom resource changes (that field no longer flips EditorContext's identity)
+  useEditorStore((state) => state.selectedBottomResName);
+  useEditorStore((state) => state.selectedBottomResType);
+
   const getQueryOptions = useCallback((editorState?: EditorState) => {
     if (!editorState) return [];
       const options: {
diff --git a/client/packages/lowcoder/src/comps/controls/codeControl.tsx b/client/packages/lowcoder/src/comps/controls/codeControl.tsx
index 36788b842d..72b9cc1fcb 100644
--- a/client/packages/lowcoder/src/comps/controls/codeControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/codeControl.tsx
@@ -2,6 +2,7 @@ import type { EditorState } from "@codemirror/state";
 import { isThemeColorKey } from "api/commonSettingApi";
 import type { Language } from "base/codeEditor/codeEditorTypes";
 import { EditorContext } from "comps/editorState";
+import { EditorStoreSelector } from "comps/editorStore";
 import { withDefault } from "comps/generators/simpleGenerators";
 import { CompExposingContext } from "comps/generators/withContext";
 import { exposingDataForAutoComplete } from "comps/utils/exposingTypes";
@@ -195,31 +196,33 @@ export function codeControl<
           {(editorState) => (
             <CompExposingContext.Consumer>
               {(exposingData) => (
-                <>
-                  <Suspense fallback={null}>
-                    <CodeEditor
-                      key={key}
-                      {...restParams}
-                      bordered
-                      value={this.unevaledValue}
-                      codeType={codeType}
-                      cardTitle={toCardTitle(codeControlParams?.expectedType, this.valueAndMsg.value)}
-                      cardContent={cardContent}
-                      onChange={this.handleChange}
-                      hasError={this.valueAndMsg?.hasError()}
-                      segments={this.valueAndMsg?.extra?.segments}
-                      exposingData={{
-                        ...exposingDataForAutoComplete(
-                          editorState?.nameAndExposingInfo(),
-                          evalWithMethods
-                        ),
-                        ...exposingData,
-                      }}
-                      boostExposingData={exposingData}
-                      enableClickCompName={editorState?.forceShowGrid}
-                    />
-                  </Suspense>
-                </>
+                <EditorStoreSelector selector={(state) => state.forceShowGrid}>
+                  {(forceShowGrid) => (
+                    <Suspense fallback={null}>
+                      <CodeEditor
+                        key={key}
+                        {...restParams}
+                        bordered
+                        value={this.unevaledValue}
+                        codeType={codeType}
+                        cardTitle={toCardTitle(codeControlParams?.expectedType, this.valueAndMsg.value)}
+                        cardContent={cardContent}
+                        onChange={this.handleChange}
+                        hasError={this.valueAndMsg?.hasError()}
+                        segments={this.valueAndMsg?.extra?.segments}
+                        exposingData={{
+                          ...exposingDataForAutoComplete(
+                            editorState?.nameAndExposingInfo(),
+                            evalWithMethods
+                          ),
+                          ...exposingData,
+                        }}
+                        boostExposingData={exposingData}
+                        enableClickCompName={forceShowGrid}
+                      />
+                    </Suspense>
+                  )}
+                </EditorStoreSelector>
               )}
             </CompExposingContext.Consumer>
           )}
diff --git a/client/packages/lowcoder/src/comps/controls/codeStateControl.tsx b/client/packages/lowcoder/src/comps/controls/codeStateControl.tsx
index 1cf26df100..d70f911c83 100644
--- a/client/packages/lowcoder/src/comps/controls/codeStateControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/codeStateControl.tsx
@@ -22,6 +22,7 @@ import _ from "lodash";
 import {
   AbstractComp,
   AbstractNode,
+  changeChildAction,
   CompAction,
   CompActionTypes,
   ConstructorToView,
@@ -159,6 +160,38 @@ function withTmpState<T extends CodeControlJSONType>(
   );
 }
 
+// Links a value child to a sibling defaultValue child: value starts at defaultValue and keeps whatever it's explicitly set to once defaultValue stops changing.
+export function withLinkedDefaultValue<
+  TCtor extends new (...args: any[]) => AbstractComp<any, any> & {
+    children: Record<string, any>;
+  }
+>(
+  Base: TCtor,
+  defaultValueKey: string,
+  valueKey: string,
+  transformDefaultValue?: (defaultValue: any, comp: any) => any
+): TCtor {
+  class LinkedDefaultValueComp extends (Base as any) {
+    reduce(action: CompAction): this {
+      const ret = super.reduce(action) as this;
+      if (
+        action.type === CompActionTypes.UPDATE_NODES_V2 &&
+        (ret.children as any)[defaultValueKey] !== (this.children as any)[defaultValueKey]
+      ) {
+        const defaultValue = (ret.children as any)[defaultValueKey].getView().value;
+        const valueChild = (ret.children as any)[valueKey];
+        const newValue = transformDefaultValue ? transformDefaultValue(defaultValue, ret) : defaultValue;
+        if (!_.isEqual(newValue, valueChild.getView().value)) {
+          return (ret as any).setChild(valueKey, valueChild.reduce(changeChildAction("value", newValue, false)));
+        }
+      }
+      return ret;
+    }
+  }
+
+  return LinkedDefaultValueComp as unknown as TCtor;
+}
+
 function convertValue(value: EvalParamType, type: ParamType) {
   switch (type) {
     case "string":
diff --git a/client/packages/lowcoder/src/comps/controls/codeTextControl.tsx b/client/packages/lowcoder/src/comps/controls/codeTextControl.tsx
index 5f6021d930..f77ded8993 100644
--- a/client/packages/lowcoder/src/comps/controls/codeTextControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/codeTextControl.tsx
@@ -1,6 +1,7 @@
 // import { CodeEditor } from "base/codeEditor/codeEditor";
 import { CompParams } from "lowcoder-core";
 import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { valueComp } from "comps/generators";
 import { CompExposingContext } from "comps/generators/withContext";
 import { exposingDataForAutoComplete } from "comps/utils/exposingTypes";
@@ -26,6 +27,7 @@ function CodeTextEditor(props: CodeTextEditorProps) {
   const { codeText, onChange, enableExposingDataAutoCompletion = false, ...params } = props;
   const compExposingData = useContext(CompExposingContext);
   const editorState = useContext(EditorContext);
+  const forceShowGrid = useEditorStore((state) => state.forceShowGrid);
 
   const expsoingData = useMemo(() => {
     if (enableExposingDataAutoCompletion) {
@@ -47,7 +49,7 @@ function CodeTextEditor(props: CodeTextEditorProps) {
         exposingData={expsoingData}
         boostExposingData={compExposingData}
         onChange={(state) => onChange(state.doc.toString())}
-        enableClickCompName={editorState.forceShowGrid}
+        enableClickCompName={forceShowGrid}
       />
     </Suspense>
   );
diff --git a/client/packages/lowcoder/src/comps/editorPropertySectionContext.tsx b/client/packages/lowcoder/src/comps/editorPropertySectionContext.tsx
new file mode 100644
index 0000000000..8fa1562414
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/editorPropertySectionContext.tsx
@@ -0,0 +1,53 @@
+import {
+  PropertySectionContext,
+  type PropertySectionContextType,
+  type PropertySectionState,
+} from "lowcoder-design";
+import React, { type PropsWithChildren, useCallback, useMemo, useState } from "react";
+import type { EditorState } from "./editorState";
+import { useEditorStore } from "./editorStore";
+
+type EditorPropertySectionProviderProps = PropsWithChildren<{
+  editorState: EditorState;
+}>;
+
+export function EditorPropertySectionProvider({
+  children,
+  editorState,
+}: EditorPropertySectionProviderProps) {
+  const selectedCompNames = useEditorStore((state) => state.selectedCompNames);
+  const [propertySectionState, setPropertySectionState] = useState<PropertySectionState>({});
+
+  const compName = useMemo(
+    () => Object.keys(editorState.selectedComps(selectedCompNames))[0] ?? "",
+    [editorState, selectedCompNames]
+  );
+
+  const toggle = useCallback((targetCompName: string, sectionName: string) => {
+    setPropertySectionState((oldState) => {
+      const oldCompState = oldState[targetCompName] ?? {};
+      return {
+        ...oldState,
+        [targetCompName]: {
+          ...oldCompState,
+          [sectionName]: oldCompState[sectionName] === false,
+        },
+      };
+    });
+  }, []);
+
+  const contextValue = useMemo<PropertySectionContextType>(
+    () => ({
+      compName,
+      state: propertySectionState,
+      toggle,
+    }),
+    [compName, propertySectionState, toggle]
+  );
+
+  return (
+    <PropertySectionContext.Provider value={contextValue}>
+      {children}
+    </PropertySectionContext.Provider>
+  );
+}
diff --git a/client/packages/lowcoder/src/comps/editorState.tsx b/client/packages/lowcoder/src/comps/editorState.tsx
index 243eefb7de..1011180be8 100644
--- a/client/packages/lowcoder/src/comps/editorState.tsx
+++ b/client/packages/lowcoder/src/comps/editorState.tsx
@@ -17,7 +17,14 @@ import { NameAndExposingInfo } from "./utils/exposingTypes";
 import { checkName } from "./utils/rename";
 import { trans } from "i18n";
 import type { UiLayoutType } from "./comps/uiComp";
-import { getEditorModeStatus, saveCollisionStatus } from "util/localStorageUtil";
+import { saveCollisionStatus } from "util/localStorageUtil";
+import {
+  createEditorStore,
+  type EditorStoreApi,
+  type SelectSourceType,
+  type DeviceType,
+  type DeviceOrientation,
+} from "./editorStore";
 
 type RootComp = InstanceType<typeof RootCompTmp>;
 
@@ -33,10 +40,7 @@ export type CompInfo = {
   dataDesc: Record<string, ReactNode>;
 };
 
-type SelectSourceType = "editor" | "leftPanel" | "addComp" | "rightPanel";
-
-export type DeviceType = "desktop" | "tablet" | "mobile";
-export type DeviceOrientation = "landscape" | "portrait";
+export type { DeviceType, DeviceOrientation };
 
 /**
  * All editor states are placed here and are still immutable.
@@ -47,20 +51,7 @@ export type DeviceOrientation = "landscape" | "portrait";
  */
 export class EditorState {
   readonly rootComp: RootComp;
-  readonly showPropertyPane: boolean = false;
-  readonly selectedCompNames: Set<string> = new Set();
-  readonly editorModeStatus: string = "";
   readonly collisionStatus: boolean = false;
-  readonly isDragging: boolean = false;
-  readonly draggingCompType: string = "button";
-  readonly forceShowGrid: boolean = false; // show grid lines
-  readonly disableInteract: boolean = false; // disable comp's interaction (such as click button event)
-  readonly selectedBottomResName: string = "";
-  readonly selectedBottomResType?: BottomResTypeEnum;
-  readonly showResultCompName: string = "";
-  readonly selectSource?: SelectSourceType; // the source of select type
-  readonly deviceType: DeviceType = "desktop";
-  readonly deviceOrientation: DeviceOrientation = "portrait";
 
   private readonly setEditorState: (
     fn: (editorState: EditorState) => EditorState
@@ -69,12 +60,11 @@ export class EditorState {
   constructor(
     rootComp: RootComp,
     setEditorState: (fn: (editorState: EditorState) => EditorState) => void,
-    initialEditorModeStatus: string = getEditorModeStatus(),
     isModuleRoot: boolean = false,
+    private readonly editorStore: EditorStoreApi = createEditorStore(),
   ) {
     this.rootComp = rootComp;
     this.setEditorState = setEditorState;
-    this.editorModeStatus = initialEditorModeStatus;
 
     // save collision status from app dsl to localstorage
     // but only for apps, not for modules (to prevent modules from overwriting the app's setting)
@@ -83,9 +73,6 @@ export class EditorState {
     }
   }
 
-  /**
-   * use changeState most of the time, and you can use this method to get the latest editorState. (similar to react's setState method)
-   */
   private changeStateFn(fn: (editorState: EditorState) => ChangeableProps) {
     this.setEditorState((oldState) => {
       const stateChanges = fn(oldState);
@@ -93,8 +80,52 @@ export class EditorState {
     });
   }
 
-  private changeState(params: ChangeableProps) {
-    this.changeStateFn(() => params);
+  get showPropertyPane() {
+    return this.editorStore.getState().showPropertyPane;
+  }
+
+  get selectedCompNames() {
+    return this.editorStore.getState().selectedCompNames;
+  }
+
+  get selectSource() {
+    return this.editorStore.getState().selectSource;
+  }
+
+  get isDragging() {
+    return this.editorStore.getState().isDragging;
+  }
+
+  get draggingCompType() {
+    return this.editorStore.getState().draggingCompType;
+  }
+
+  get forceShowGrid() {
+    return this.editorStore.getState().forceShowGrid;
+  }
+
+  get disableInteract() {
+    return this.editorStore.getState().disableInteract;
+  }
+
+  get selectedBottomResName() {
+    return this.editorStore.getState().selectedBottomResName;
+  }
+
+  get selectedBottomResType() {
+    return this.editorStore.getState().selectedBottomResType;
+  }
+
+  get showResultCompName() {
+    return this.editorStore.getState().showResultCompName;
+  }
+
+  get deviceType() {
+    return this.editorStore.getState().deviceType;
+  }
+
+  get deviceOrientation() {
+    return this.editorStore.getState().deviceOrientation;
   }
 
   getAllCompMap() {
@@ -272,7 +303,7 @@ export class EditorState {
       });
   }
 
-  showResultComp(): BottomResComp | undefined {
+  showResultComp(showResultCompName = this.showResultCompName): BottomResComp | undefined {
     const bottomResComps = Object.values(BottomResTypeEnum).reduce<
       BottomResComp[]
     >((a, b) => {
@@ -280,24 +311,24 @@ export class EditorState {
       return a.concat(items);
     }, []);
 
-    return bottomResComps.find((i) => i.name() === this.showResultCompName);
+    return bottomResComps.find((i) => i.name() === showResultCompName);
   }
 
   /**
    * @deprecated
    */
-  selectedComp(): OptionalComp {
+  selectedComp(selectedCompNames: Set<string> = this.selectedCompNames): OptionalComp {
     // temporary glue code
     const compType = this.getUIComp().children.compType.getView();
     if (compType !== "normal" && compType !== "module") {
       return this.getUIComp().children.comp;
     }
     const compMap = this.getAllCompMap();
-    if (this.selectedCompNames.size > 1) {
+    if (selectedCompNames.size > 1) {
       return undefined;
     }
     return Object.values(compMap).find((item) =>
-      this.selectedCompNames.has(item.children.name.getView())
+      selectedCompNames.has(item.children.name.getView())
     );
   }
 
@@ -306,10 +337,10 @@ export class EditorState {
     return this.getUIComp().getComp()?.getPositionParams();
   }
 
-  selectedComps() {
+  selectedComps(selectedCompNames: Set<string> = this.selectedCompNames) {
     const compMap = this.getAllCompMap();
     const selectedComps = _.pickBy(compMap, (item) =>
-      this.selectedCompNames.has(item.children.name.getView())
+      selectedCompNames.has(item.children.name.getView())
     );
     return selectedComps;
   }
@@ -362,47 +393,36 @@ export class EditorState {
     return this.getAppSettingsComp().getView();
   }
 
-  setEditorModeStatus(newEditorModeStatus: string) {
-    this.changeState({ editorModeStatus: newEditorModeStatus });
-  }
-
   setDeviceType(type: DeviceType) {
-    this.changeState({ deviceType: type });
+    this.editorStore.getState().setDeviceType(type);
   }
 
   setDeviceOrientation(orientation: DeviceOrientation) {
-    this.changeState({ deviceOrientation: orientation });
+    this.editorStore.getState().setDeviceOrientation(orientation);
   }
 
   setDragging(dragging: boolean) {
-    if (this.isDragging === dragging) {
-      return;
-    }
-    this.changeState({ isDragging: dragging });
+    this.editorStore.getState().setDragging(dragging);
   }
 
   setDraggingCompType(draggingComp: string) {
-    this.changeState({ draggingCompType: draggingComp, isDragging: true });
+    this.editorStore.getState().setDraggingCompType(draggingComp);
   }
 
   setForceShowGrid(forceShowGrid: boolean) {
-    if (this.forceShowGrid !== forceShowGrid) {
-      this.changeState({ forceShowGrid });
-    }
+    this.editorStore.getState().setForceShowGrid(forceShowGrid);
   }
 
   showGridLines() {
-    return this.isDragging || this.forceShowGrid;
+    return this.editorStore.getState().showGridLines();
   }
 
   setDisableInteract(disableInteract: boolean) {
-    if (this.disableInteract !== disableInteract) {
-      this.changeState({ disableInteract });
-    }
+    this.editorStore.getState().setDisableInteract(disableInteract);
   }
 
   setShowPropertyPane(showPropertyPane: boolean) {
-    this.changeState({ showPropertyPane: showPropertyPane });
+    this.editorStore.getState().setShowPropertyPane(showPropertyPane);
   }
 
   setComp(compFn: (comp: RootComp) => RootComp) {
@@ -415,25 +435,15 @@ export class EditorState {
     selectedCompNames: Set<string>,
     selectSource?: SelectSourceType
   ) {
-    if (selectedCompNames.size === 0 && this.selectedCompNames.size === 0) {
-      return;
-    }
-    this.changeState({
-      selectedCompNames: selectedCompNames,
-      showPropertyPane: selectedCompNames.size > 0,
-      selectSource: selectSource,
-    });
+    this.editorStore.getState().setSelectedCompNames(selectedCompNames, selectSource);
   }
 
   setSelectedBottomRes(name: string, type?: BottomResTypeEnum) {
-    this.changeState({
-      selectedBottomResName: name,
-      selectedBottomResType: type,
-    });
+    this.editorStore.getState().setSelectedBottomRes(name, type);
   }
 
   setShowResultCompName(showResultCompName: string | undefined) {
-    this.changeState({ showResultCompName });
+    this.editorStore.getState().setShowResultCompName(showResultCompName);
   }
 
   getUIComp() {
diff --git a/client/packages/lowcoder/src/comps/editorStore/bottomResSlice.ts b/client/packages/lowcoder/src/comps/editorStore/bottomResSlice.ts
new file mode 100644
index 0000000000..13af12c800
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/editorStore/bottomResSlice.ts
@@ -0,0 +1,33 @@
+import type { StateCreator } from "zustand/vanilla";
+import { BottomResTypeEnum } from "types/bottomRes";
+import type { EditorStoreState } from "./types";
+
+export type BottomResSlice = {
+  selectedBottomResName: string;
+  selectedBottomResType?: BottomResTypeEnum;
+  showResultCompName: string | undefined;
+  setSelectedBottomRes: (name: string, type?: BottomResTypeEnum) => void;
+  setShowResultCompName: (showResultCompName: string | undefined) => void;
+};
+
+export const createBottomResSlice: StateCreator<
+  EditorStoreState,
+  [],
+  [],
+  BottomResSlice
+> = (set) => ({
+  selectedBottomResName: "",
+  selectedBottomResType: undefined,
+  showResultCompName: "",
+  setSelectedBottomRes: (selectedBottomResName, selectedBottomResType) =>
+    set((state) =>
+      state.selectedBottomResName === selectedBottomResName &&
+      state.selectedBottomResType === selectedBottomResType
+        ? state
+        : { selectedBottomResName, selectedBottomResType }
+    ),
+  setShowResultCompName: (showResultCompName) =>
+    set((state) =>
+      state.showResultCompName === showResultCompName ? state : { showResultCompName }
+    ),
+});
diff --git a/client/packages/lowcoder/src/comps/editorStore/context.tsx b/client/packages/lowcoder/src/comps/editorStore/context.tsx
new file mode 100644
index 0000000000..87c8f4fe18
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/editorStore/context.tsx
@@ -0,0 +1,39 @@
+import React, { createContext, type PropsWithChildren, type ReactNode, useContext } from "react";
+import { useStore } from "zustand";
+import type { EditorStoreApi, EditorStoreState } from "./types";
+
+const EditorStoreContext = createContext<EditorStoreApi | undefined>(undefined);
+
+type EditorStoreProviderProps = PropsWithChildren<{
+  store: EditorStoreApi;
+}>;
+
+export function EditorStoreProvider({ children, store }: EditorStoreProviderProps) {
+  return <EditorStoreContext.Provider value={store}>{children}</EditorStoreContext.Provider>;
+}
+
+function useEditorStoreApi(): EditorStoreApi {
+  const store = useContext(EditorStoreContext);
+  if (!store) {
+    throw new Error("useEditorStore must be used inside EditorStoreProvider");
+  }
+  return store;
+}
+
+export function useEditorStore<T>(selector: (state: EditorStoreState) => T): T {
+  return useStore(useEditorStoreApi(), selector);
+}
+
+/**
+ * Render-prop escape hatch for reading the store reactively from class components
+ * (e.g. Comp subclasses), which can't call the useEditorStore hook directly.
+ */
+export function EditorStoreSelector<T>({
+  selector,
+  children,
+}: {
+  selector: (state: EditorStoreState) => T;
+  children: (value: T) => ReactNode;
+}) {
+  return <>{children(useEditorStore(selector))}</>;
+}
diff --git a/client/packages/lowcoder/src/comps/editorStore/deviceSlice.ts b/client/packages/lowcoder/src/comps/editorStore/deviceSlice.ts
new file mode 100644
index 0000000000..f5e04846f9
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/editorStore/deviceSlice.ts
@@ -0,0 +1,28 @@
+import type { StateCreator } from "zustand/vanilla";
+import type { EditorStoreState } from "./types";
+
+export type DeviceType = "desktop" | "tablet" | "mobile";
+export type DeviceOrientation = "landscape" | "portrait";
+
+export type DeviceSlice = {
+  deviceType: DeviceType;
+  deviceOrientation: DeviceOrientation;
+  setDeviceType: (deviceType: DeviceType) => void;
+  setDeviceOrientation: (deviceOrientation: DeviceOrientation) => void;
+};
+
+export const createDeviceSlice: StateCreator<
+  EditorStoreState,
+  [],
+  [],
+  DeviceSlice
+> = (set) => ({
+  deviceType: "desktop",
+  deviceOrientation: "portrait",
+  setDeviceType: (deviceType) =>
+    set((state) => (state.deviceType === deviceType ? state : { deviceType })),
+  setDeviceOrientation: (deviceOrientation) =>
+    set((state) =>
+      state.deviceOrientation === deviceOrientation ? state : { deviceOrientation }
+    ),
+});
diff --git a/client/packages/lowcoder/src/comps/editorStore/editorModeSlice.ts b/client/packages/lowcoder/src/comps/editorStore/editorModeSlice.ts
new file mode 100644
index 0000000000..cf31e9e661
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/editorStore/editorModeSlice.ts
@@ -0,0 +1,26 @@
+import type { StateCreator } from "zustand/vanilla";
+import { getEditorModeStatus, saveEditorModeStatus } from "util/localStorageUtil";
+import type { EditorModeStatus } from "pages/common/header";
+import type { EditorStoreState } from "./types";
+
+export type EditorModeSlice = {
+  editorModeStatus: EditorModeStatus;
+  setEditorModeStatus: (editorModeStatus: EditorModeStatus) => void;
+};
+
+export const createEditorModeSlice: StateCreator<
+  EditorStoreState,
+  [],
+  [],
+  EditorModeSlice
+> = (set, get) => ({
+  editorModeStatus: getEditorModeStatus(),
+  // persistence lives here so callers can't forget to write it through
+  setEditorModeStatus: (editorModeStatus) => {
+    if (get().editorModeStatus === editorModeStatus) {
+      return;
+    }
+    saveEditorModeStatus(editorModeStatus);
+    set({ editorModeStatus });
+  },
+});
diff --git a/client/packages/lowcoder/src/comps/editorStore/index.ts b/client/packages/lowcoder/src/comps/editorStore/index.ts
new file mode 100644
index 0000000000..6102934c1b
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/editorStore/index.ts
@@ -0,0 +1,8 @@
+export type { SelectSourceType, EditorStoreState, EditorStoreApi } from "./types";
+export type { SelectionSlice } from "./selectionSlice";
+export type { InteractionSlice } from "./interactionSlice";
+export type { EditorModeSlice } from "./editorModeSlice";
+export type { BottomResSlice } from "./bottomResSlice";
+export type { DeviceSlice, DeviceType, DeviceOrientation } from "./deviceSlice";
+export { createEditorStore } from "./store";
+export { EditorStoreProvider, useEditorStore, EditorStoreSelector } from "./context";
diff --git a/client/packages/lowcoder/src/comps/editorStore/interactionSlice.ts b/client/packages/lowcoder/src/comps/editorStore/interactionSlice.ts
new file mode 100644
index 0000000000..528d89b6ca
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/editorStore/interactionSlice.ts
@@ -0,0 +1,39 @@
+import type { StateCreator } from "zustand/vanilla";
+import type { EditorStoreState } from "./types";
+
+export type InteractionSlice = {
+  isDragging: boolean;
+  draggingCompType: string;
+  forceShowGrid: boolean;
+  disableInteract: boolean;
+  setDragging: (dragging: boolean) => void;
+  setDraggingCompType: (draggingCompType: string) => void;
+  setForceShowGrid: (forceShowGrid: boolean) => void;
+  setDisableInteract: (disableInteract: boolean) => void;
+  showGridLines: () => boolean;
+};
+
+export const createInteractionSlice: StateCreator<
+  EditorStoreState,
+  [],
+  [],
+  InteractionSlice
+> = (set, get) => ({
+  isDragging: false,
+  draggingCompType: "button",
+  forceShowGrid: false,
+  disableInteract: false,
+  setDragging: (dragging) =>
+    set((state) => (state.isDragging === dragging ? state : { isDragging: dragging })),
+  setDraggingCompType: (draggingCompType) =>
+    set({ draggingCompType, isDragging: true }),
+  setForceShowGrid: (forceShowGrid) =>
+    set((state) =>
+      state.forceShowGrid === forceShowGrid ? state : { forceShowGrid }
+    ),
+  setDisableInteract: (disableInteract) =>
+    set((state) =>
+      state.disableInteract === disableInteract ? state : { disableInteract }
+    ),
+  showGridLines: () => get().isDragging || get().forceShowGrid,
+});
diff --git a/client/packages/lowcoder/src/comps/editorStore/selectionSlice.ts b/client/packages/lowcoder/src/comps/editorStore/selectionSlice.ts
new file mode 100644
index 0000000000..4902c8a9cc
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/editorStore/selectionSlice.ts
@@ -0,0 +1,50 @@
+import type { StateCreator } from "zustand/vanilla";
+import type { EditorStoreState, SelectSourceType } from "./types";
+import { areSetsEqual } from "./types";
+
+export type SelectionSlice = {
+  selectedCompNames: Set<string>;
+  selectSource?: SelectSourceType;
+  showPropertyPane: boolean;
+  setSelectedCompNames: (
+    selectedCompNames: Set<string>,
+    selectSource?: SelectSourceType
+  ) => void;
+  setShowPropertyPane: (showPropertyPane: boolean) => void;
+};
+
+export const createSelectionSlice: StateCreator<
+  EditorStoreState,
+  [],
+  [],
+  SelectionSlice
+> = (set) => ({
+  selectedCompNames: new Set(),
+  selectSource: undefined,
+  showPropertyPane: false,
+  setSelectedCompNames: (selectedCompNames, selectSource) =>
+    set((state) => {
+      if (selectedCompNames.size === 0 && state.selectedCompNames.size === 0) {
+        return state;
+      }
+
+      const showPropertyPane = selectedCompNames.size > 0;
+      if (
+        areSetsEqual(state.selectedCompNames, selectedCompNames) &&
+        state.selectSource === selectSource &&
+        state.showPropertyPane === showPropertyPane
+      ) {
+        return state;
+      }
+
+      return {
+        selectedCompNames: new Set(selectedCompNames),
+        selectSource,
+        showPropertyPane,
+      };
+    }),
+  setShowPropertyPane: (showPropertyPane) =>
+    set((state) =>
+      state.showPropertyPane === showPropertyPane ? state : { showPropertyPane }
+    ),
+});
diff --git a/client/packages/lowcoder/src/comps/editorStore/store.test.ts b/client/packages/lowcoder/src/comps/editorStore/store.test.ts
new file mode 100644
index 0000000000..17bef0e1ba
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/editorStore/store.test.ts
@@ -0,0 +1,184 @@
+import { createEditorStore } from "./store";
+import { BottomResTypeEnum } from "types/bottomRes";
+
+describe("editorStore selection slice", () => {
+  test("updates selection and property pane together", () => {
+    const store = createEditorStore();
+    const selectedCompNames = new Set(["button1"]);
+
+    store.getState().setSelectedCompNames(selectedCompNames, "leftPanel");
+
+    expect(store.getState().selectedCompNames).toEqual(selectedCompNames);
+    expect(store.getState().selectedCompNames).not.toBe(selectedCompNames);
+    expect(store.getState().selectSource).toBe("leftPanel");
+    expect(store.getState().showPropertyPane).toBe(true);
+
+    store.getState().setSelectedCompNames(new Set());
+    expect(store.getState().selectedCompNames.size).toBe(0);
+    expect(store.getState().showPropertyPane).toBe(false);
+  });
+
+  test("does not notify subscribers for an unchanged selection", () => {
+    const store = createEditorStore();
+    const subscriber = jest.fn();
+    const unsubscribe = store.subscribe(subscriber);
+
+    store.getState().setSelectedCompNames(new Set(["button1"]), "leftPanel");
+    store.getState().setSelectedCompNames(new Set(["button1"]), "leftPanel");
+
+    expect(subscriber).toHaveBeenCalledTimes(1);
+    unsubscribe();
+  });
+
+  test("creates isolated editor stores", () => {
+    const firstStore = createEditorStore();
+    const secondStore = createEditorStore();
+
+    firstStore.getState().setSelectedCompNames(new Set(["button1"]));
+
+    expect(firstStore.getState().selectedCompNames).toEqual(new Set(["button1"]));
+    expect(secondStore.getState().selectedCompNames.size).toBe(0);
+  });
+});
+
+describe("editorStore interaction slice", () => {
+  test("defaults to not dragging with grid lines hidden", () => {
+    const store = createEditorStore();
+
+    expect(store.getState().isDragging).toBe(false);
+    expect(store.getState().forceShowGrid).toBe(false);
+    expect(store.getState().draggingCompType).toBe("button");
+    expect(store.getState().disableInteract).toBe(false);
+    expect(store.getState().showGridLines()).toBe(false);
+  });
+
+  test("showGridLines is true while dragging or forced", () => {
+    const store = createEditorStore();
+
+    store.getState().setDragging(true);
+    expect(store.getState().showGridLines()).toBe(true);
+
+    store.getState().setDragging(false);
+    expect(store.getState().showGridLines()).toBe(false);
+
+    store.getState().setForceShowGrid(true);
+    expect(store.getState().showGridLines()).toBe(true);
+  });
+
+  test("setDraggingCompType also marks dragging as true", () => {
+    const store = createEditorStore();
+
+    store.getState().setDraggingCompType("table");
+
+    expect(store.getState().draggingCompType).toBe("table");
+    expect(store.getState().isDragging).toBe(true);
+  });
+
+  test("does not notify subscribers for unchanged interaction fields", () => {
+    const store = createEditorStore();
+    const subscriber = jest.fn();
+    const unsubscribe = store.subscribe(subscriber);
+
+    store.getState().setDragging(false); // already false
+    store.getState().setForceShowGrid(false); // already false
+    store.getState().setDisableInteract(false); // already false
+
+    expect(subscriber).not.toHaveBeenCalled();
+    unsubscribe();
+  });
+
+  test("interaction state is isolated across store instances", () => {
+    const firstStore = createEditorStore();
+    const secondStore = createEditorStore();
+
+    firstStore.getState().setForceShowGrid(true);
+
+    expect(firstStore.getState().forceShowGrid).toBe(true);
+    expect(secondStore.getState().forceShowGrid).toBe(false);
+  });
+});
+
+describe("editorStore editor mode slice", () => {
+  test("defaults to the persisted editor mode status", () => {
+    localStorage.setItem("editor_mode_status", "logic");
+    const store = createEditorStore();
+
+    expect(store.getState().editorModeStatus).toBe("logic");
+    localStorage.removeItem("editor_mode_status");
+  });
+
+  test("does not notify subscribers for an unchanged editor mode", () => {
+    const store = createEditorStore();
+    const subscriber = jest.fn();
+    store.getState().setEditorModeStatus("both");
+    const unsubscribe = store.subscribe(subscriber);
+
+    store.getState().setEditorModeStatus("both");
+
+    expect(subscriber).not.toHaveBeenCalled();
+    unsubscribe();
+  });
+});
+
+describe("editorStore bottom res slice", () => {
+  test("selecting a bottom resource sets name and type together", () => {
+    const store = createEditorStore();
+
+    store.getState().setSelectedBottomRes("query1", BottomResTypeEnum.Query);
+
+    expect(store.getState().selectedBottomResName).toBe("query1");
+    expect(store.getState().selectedBottomResType).toBe(BottomResTypeEnum.Query);
+  });
+
+  test("setShowResultCompName accepts undefined to clear the result panel", () => {
+    const store = createEditorStore();
+
+    store.getState().setShowResultCompName("query1");
+    expect(store.getState().showResultCompName).toBe("query1");
+
+    store.getState().setShowResultCompName(undefined);
+    expect(store.getState().showResultCompName).toBeUndefined();
+  });
+
+  test("does not notify subscribers for an unchanged bottom resource selection", () => {
+    const store = createEditorStore();
+    store.getState().setSelectedBottomRes("query1", BottomResTypeEnum.Query);
+    const subscriber = jest.fn();
+    const unsubscribe = store.subscribe(subscriber);
+
+    store.getState().setSelectedBottomRes("query1", BottomResTypeEnum.Query);
+
+    expect(subscriber).not.toHaveBeenCalled();
+    unsubscribe();
+  });
+});
+
+describe("editorStore device slice", () => {
+  test("defaults to desktop portrait", () => {
+    const store = createEditorStore();
+
+    expect(store.getState().deviceType).toBe("desktop");
+    expect(store.getState().deviceOrientation).toBe("portrait");
+  });
+
+  test("updates device type and orientation independently", () => {
+    const store = createEditorStore();
+
+    store.getState().setDeviceType("mobile");
+    store.getState().setDeviceOrientation("landscape");
+
+    expect(store.getState().deviceType).toBe("mobile");
+    expect(store.getState().deviceOrientation).toBe("landscape");
+  });
+
+  test("does not notify subscribers for an unchanged device type", () => {
+    const store = createEditorStore();
+    const subscriber = jest.fn();
+    const unsubscribe = store.subscribe(subscriber);
+
+    store.getState().setDeviceType("desktop"); // already desktop
+
+    expect(subscriber).not.toHaveBeenCalled();
+    unsubscribe();
+  });
+});
diff --git a/client/packages/lowcoder/src/comps/editorStore/store.ts b/client/packages/lowcoder/src/comps/editorStore/store.ts
new file mode 100644
index 0000000000..5b9abf79bc
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/editorStore/store.ts
@@ -0,0 +1,17 @@
+import { createStore } from "zustand/vanilla";
+import type { EditorStoreApi, EditorStoreState } from "./types";
+import { createSelectionSlice } from "./selectionSlice";
+import { createInteractionSlice } from "./interactionSlice";
+import { createEditorModeSlice } from "./editorModeSlice";
+import { createBottomResSlice } from "./bottomResSlice";
+import { createDeviceSlice } from "./deviceSlice";
+
+export function createEditorStore(): EditorStoreApi {
+  return createStore<EditorStoreState>((...a) => ({
+    ...createSelectionSlice(...a),
+    ...createInteractionSlice(...a),
+    ...createEditorModeSlice(...a),
+    ...createBottomResSlice(...a),
+    ...createDeviceSlice(...a),
+  }));
+}
diff --git a/client/packages/lowcoder/src/comps/editorStore/types.ts b/client/packages/lowcoder/src/comps/editorStore/types.ts
new file mode 100644
index 0000000000..6b8154f599
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/editorStore/types.ts
@@ -0,0 +1,31 @@
+import type { StoreApi } from "zustand/vanilla";
+import type { SelectionSlice } from "./selectionSlice";
+import type { InteractionSlice } from "./interactionSlice";
+import type { EditorModeSlice } from "./editorModeSlice";
+import type { BottomResSlice } from "./bottomResSlice";
+import type { DeviceSlice } from "./deviceSlice";
+
+export type SelectSourceType =
+  | "editor"
+  | "leftPanel"
+  | "addComp"
+  | "rightPanel"
+  | "alignComp"
+  | "layoutComp"
+  | "nestComp"
+  | "deleteComp"
+  | "moveComp"
+  | "renameComp"
+  | "resizeComp";
+
+export type EditorStoreState = SelectionSlice &
+  InteractionSlice &
+  EditorModeSlice &
+  BottomResSlice &
+  DeviceSlice;
+
+export type EditorStoreApi = StoreApi<EditorStoreState>;
+
+export function areSetsEqual(left: Set<string>, right: Set<string>) {
+  return left.size === right.size && Array.from(left).every((name) => right.has(name));
+}
diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index 7f6a0bdeaf..692c0778fc 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -34,6 +34,7 @@ import { getNpmPackageMeta } from "../utils/remote";
 import { compPluginsList } from "constants/compPluginConstants";
 import Select from "antd/es/select";
 import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
+import { useEditorStore } from "../editorStore";
 
 export type NewChildren<ChildrenCompMap extends Record<string, Comp<unknown>>> =
   ChildrenCompMap & {
@@ -77,7 +78,11 @@ export const ExtendedPropertyView = React.memo(<
   const [compVersions, setCompVersions] = useState(['latest']);
   const [compName, setCompName] = useState('');
   const editorState = useContext(EditorContext);
-  const selectedComp = values(editorState?.selectedComps())[0];
+  const selectedCompNames = useEditorStore((state) => state.selectedCompNames);
+  const selectedComp = useMemo(
+    () => values(editorState?.selectedComps(selectedCompNames))[0],
+    [editorState, selectedCompNames]
+  );
   const compType = selectedComp?.children?.compType?.getView() as UICompType;
   const timeoutRef = useRef<NodeJS.Timeout>();
 
diff --git a/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx b/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx
index 30d4f98739..bcfbe07625 100644
--- a/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx
+++ b/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx
@@ -43,7 +43,7 @@ const LoadingWrapper = ({
     const compDataIndicator = compState.comp?.comp?.showDataLoadingIndicators;
 
     return isLoading ? (
-      compDataIndicator !== 'undefined' ? compDataIndicator : Boolean(themeDataIndicator)
+      compDataIndicator !== undefined ? compDataIndicator : Boolean(themeDataIndicator)
     ) : false;
   }, [
     isLoading,
diff --git a/client/packages/lowcoder/src/comps/hooks/hookComp.tsx b/client/packages/lowcoder/src/comps/hooks/hookComp.tsx
index dc841d5a9f..87b096880e 100644
--- a/client/packages/lowcoder/src/comps/hooks/hookComp.tsx
+++ b/client/packages/lowcoder/src/comps/hooks/hookComp.tsx
@@ -1,8 +1,6 @@
 import { CompName } from "components/CompName";
-import { getAllCompItems } from "comps/comps/containerBase/utils";
 import { SimpleNameComp } from "comps/comps/simpleNameComp";
 import { StringControl } from "comps/controls/codeControl";
-import { EditorContext } from "comps/editorState";
 import { RemoteCompInfo } from "types/remoteComp";
 import {
   simpleMultiComp,
@@ -17,17 +15,14 @@ import { DrawerComp } from "comps/hooks/drawerComp";
 import { remoteComp } from "comps/comps/remoteComp/remoteComp";
 
 import {
-  HookCompConstructor,
   HookCompMapRawType,
-  HookCompType,
 } from "comps/hooks/hookCompTypes";
 import { ModalComp } from "comps/hooks/modalComp";
 import { trans } from "i18n";
 import _ from "lodash";
 import dayjs from "dayjs";
-import { ConstructorToComp } from "lowcoder-core";
 import { ScrollBar, Section, sectionNames } from "lowcoder-design";
-import React, { useContext, useEffect, useMemo, useCallback } from "react";
+import React, { useEffect, useMemo, useCallback } from "react";
 import { useInterval, useTitle, useWindowSize } from "react-use";
 import { useCurrentUser } from "util/currentUser";
 import { LocalStorageComp } from "./localStorageComp";
@@ -38,6 +33,7 @@ import UrlParamsHookComp from "./UrlParamsHookComp";
 import { UtilsComp } from "./utilsComp";
 import { ScreenInfoHookComp } from "./screenInfoComp";
 import { ChatControllerComp } from "./chatControllerComp";
+import { useEditorStore } from "comps/editorStore";
 
 window._ = _;
 window.dayjs = dayjs;
@@ -126,78 +122,17 @@ export const HookTmpComp = withTypeAndChildren(HookMap, "title", {
   name: SimpleNameComp,
 });
 
-function SelectHookView(props: {
+type SelectHookViewProps = {
   children: React.ReactNode;
   compName: string;
-  compType: HookCompType;
-  comp: ConstructorToComp<HookCompConstructor>;
-}) {
-  const editorState = useContext(EditorContext);
-  const selectedComp = editorState.selectedComp();
-
-  // Memoize the comp tree calculation
-  const compTree = useMemo(() => {
-    if (!props.comp || !(props.comp as any).getCompTree) return null;
-    return (props.comp as any).getCompTree();
-  }, [props.comp]);
-
-  // Memoize the child components calculation
-  const allChildComp = useMemo(() => {
-    if (!compTree) return {};
-    return getAllCompItems(compTree);
-  }, [compTree]);
-
-  // Memoize the click handler
-  const handleClick = useCallback(() => {
-    editorState.setSelectedCompNames(new Set([props.compName]));
-  }, [editorState, props.compName]);
-
-  // Select the modal and its subcomponents on the left to display the modal
-  useEffect(() => {
-    if (
-      (props.compType !== "modal" &&
-        props.compType !== "drawer" &&
-        props.compType !== "meeting") ||
-      !selectedComp ||
-      (editorState.selectSource !== "addComp" &&
-        editorState.selectSource !== "leftPanel")
-    ) {
-      return;
-    } else if (
-      (selectedComp as any).children.comp === props.comp
-    ) {
-      if ((selectedComp as any).children.comp?.remoteInfo?.isRemote){
-        return;
-      }
-
-      // Select the current modal to display the modal
-      !props.comp.children.visible.getView().value &&
-        props.comp.children.visible.dispatch(
-          props.comp.children.visible.changeChildAction("value", true)
-        );
-    } else {
-      // all child components of modal
-      const selectChildComp = Object.values(allChildComp).find(
-        (child) => child === selectedComp
-      );
-      const visible = props.comp.children.visible.getView().value;
-      if (selectChildComp && !visible) {
-        props.comp.children.visible.dispatch(
-          props.comp.children.visible.changeChildAction("value", true)
-        );
-      } else if (!selectChildComp && visible) {
-        props.comp.children.visible.dispatch(
-          props.comp.children.visible.changeChildAction("value", false)
-        );
-      }
-    }
-  }, [selectedComp, editorState.selectSource, allChildComp]);
+};
 
-  return (
-    <div onClick={handleClick}>
-      {props.children}
-    </div>
-  );
+function SelectHookView(props: SelectHookViewProps) {
+  const setSelectedCompNames = useEditorStore((state) => state.setSelectedCompNames);
+  const handleClick = useCallback(() => {
+    setSelectedCompNames(new Set([props.compName]));
+  }, [props.compName, setSelectedCompNames]);
+  return <div onClick={handleClick}>{props.children}</div>;
 }
 
 export class HookComp extends HookTmpComp {
@@ -218,8 +153,6 @@ export class HookComp extends HookTmpComp {
     return (
       <SelectHookView
         compName={this.children.name.getView()}
-        compType={this.children.compType.getView()}
-        comp={this.children.comp}
       >
         {view}
       </SelectHookView>
diff --git a/client/packages/lowcoder/src/comps/hooks/hookSelection.ts b/client/packages/lowcoder/src/comps/hooks/hookSelection.ts
new file mode 100644
index 0000000000..918bcf8843
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/hooks/hookSelection.ts
@@ -0,0 +1,71 @@
+import type { CompTree } from "comps/comps/containerBase/utils";
+import type { EditorState } from "comps/editorState";
+import type { HookCompType } from "./hookCompTypes";
+
+const overlayHookTypes = new Set<HookCompType>(["drawer", "modal", "meeting"]);
+
+export function shouldOpenOverlayOnCreate(compType: string) {
+  return compType === "drawer" || compType === "modal";
+}
+
+function containsSelectedComp(compTree: CompTree, selectedCompName: string): boolean {
+  const selectedHere = Object.values(compTree.items).some(
+    (child) => child.children.name.getView() === selectedCompName
+  );
+
+  return (
+    selectedHere ||
+    Object.values(compTree.children).some((childTree) =>
+      containsSelectedComp(childTree, selectedCompName)
+    )
+  );
+}
+
+function syncOverlayVisibility(editorState: EditorState, selectedCompNames: Set<string>) {
+  if (selectedCompNames.size !== 1) {
+    return;
+  }
+
+  const selectedCompName = selectedCompNames.values().next().value;
+  if (!selectedCompName) {
+    return;
+  }
+
+  Object.values(editorState.getHooksComp().children).forEach((hookComp) => {
+    const compType = hookComp.children.compType.getView();
+    if (!overlayHookTypes.has(compType)) {
+      return;
+    }
+
+    const comp: any = hookComp.children.comp;
+    const selectedOverlay = hookComp.children.name.getView() === selectedCompName;
+    if (selectedOverlay && comp.remoteInfo?.isRemote) {
+      return;
+    }
+
+    const visibleControl = comp.children?.visible;
+    if (!visibleControl) {
+      return;
+    }
+
+    const compTree = comp.getCompTree?.();
+    const shouldBeVisible =
+      selectedOverlay ||
+      (compTree ? containsSelectedComp(compTree, selectedCompName) : false);
+    const isVisible = visibleControl.getView().value;
+
+    if (isVisible !== shouldBeVisible) {
+      visibleControl.dispatch(
+        visibleControl.changeChildAction("value", shouldBeVisible)
+      );
+    }
+  });
+}
+
+export function selectCompsFromLeftPanel(
+  editorState: EditorState,
+  selectedCompNames: Set<string>
+) {
+  editorState.setSelectedCompNames(selectedCompNames, "leftPanel");
+  syncOverlayVisibility(editorState, selectedCompNames);
+}
diff --git a/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx b/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
index fd4939da47..b282e481a2 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
@@ -27,6 +27,7 @@ import { useSelector } from "react-redux";
 import { getDataSource, getDataSourceTypes } from "redux/selectors/datasourceSelectors";
 import { BottomResTypeEnum } from "types/bottomRes";
 import { EditorContext } from "../../editorState";
+import { useEditorStore } from "../../editorStore";
 import { JSTriggerTypeOptions, QueryComp, TriggerType, TriggerTypeOptions } from "../queryComp";
 import { ResourceDropdown } from "../resourceDropdown";
 import { NOT_SUPPORT_GUI_SQL_QUERY, SQLQuery } from "../sqlQuery/SQLQuery";
@@ -216,6 +217,8 @@ export const QueryGeneralPropertyView = (props: {
 }) => {
   const { comp, placement = "editor" } = props;
   const editorState = useContext(EditorContext);
+  const selectedBottomResName = useEditorStore((state) => state.selectedBottomResName);
+  const selectedBottomResType = useEditorStore((state) => state.selectedBottomResType);
   const datasource = useSelector(getDataSource);
 
   const children = comp.children;
@@ -261,8 +264,8 @@ export const QueryGeneralPropertyView = (props: {
         }))
         .filter((option) => {
           // Filter out the current query under query
-          if (editorState.selectedBottomResType === BottomResTypeEnum.Query) {
-            return option.value !== editorState.selectedBottomResName;
+          if (selectedBottomResType === BottomResTypeEnum.Query) {
+            return option.value !== selectedBottomResName;
           }
           return true;
         }) || [];
@@ -278,7 +281,7 @@ export const QueryGeneralPropertyView = (props: {
         }
       });
     return options;
-  }, [editorState]);
+  }, [editorState, selectedBottomResName, selectedBottomResType]);
 
   return (
     <QueryPropertyViewWrapper>
diff --git a/client/packages/lowcoder/src/comps/utils/compContext.tsx b/client/packages/lowcoder/src/comps/utils/compContext.tsx
index 5b744b3e31..bd1238d4b1 100644
--- a/client/packages/lowcoder/src/comps/utils/compContext.tsx
+++ b/client/packages/lowcoder/src/comps/utils/compContext.tsx
@@ -1,6 +1,20 @@
 import React from "react";
 
+// Only the specific fields consumers read (styleControl, withIsLoading, remoteComp).
+// Deliberately not the full comp JSON - keeping this cheap to compute matters,
+// since gridLayout.tsx rebuilds this value on every canvas render.
+export type CompContextInnerFields = {
+  appliedThemeId?: string;
+  preventStyleOverwriting?: boolean;
+  showDataLoadingIndicators?: boolean;
+  version?: string;
+};
+
+export type CompContextCompInfo = {
+  comp?: CompContextInnerFields;
+};
+
 export const CompContext = React.createContext<{
-  comp?: any;
+  comp?: CompContextCompInfo;
   compType: string;
 }>({ comp: undefined, compType: '' });
diff --git a/client/packages/lowcoder/src/comps/utils/hookCompOperator.ts b/client/packages/lowcoder/src/comps/utils/hookCompOperator.ts
index dd7e5bf3b0..9e96732fd1 100644
--- a/client/packages/lowcoder/src/comps/utils/hookCompOperator.ts
+++ b/client/packages/lowcoder/src/comps/utils/hookCompOperator.ts
@@ -1,6 +1,7 @@
 import { HookComp } from "comps/hooks/hookComp";
 import { EditorState } from "comps/editorState";
 import { singletonHookComp } from "comps/hooks/hookCompTypes";
+import { selectCompsFromLeftPanel, shouldOpenOverlayOnCreate } from "comps/hooks/hookSelection";
 import { wrapActionExtraInfo } from "lowcoder-core";
 import {
   writeHookOnlyToClipboard,
@@ -57,7 +58,9 @@ export class HookCompOperator {
         ...(item.fullValue || {}),
         name: newName,
         compType: item.compType,
-        comp: item.comp,
+        comp: shouldOpenOverlayOnCreate(item.compType)
+          ? { ...item.comp, visible: true }
+          : item.comp,
       };
 
       hooksComp.dispatch(
@@ -77,7 +80,7 @@ export class HookCompOperator {
       newNames.add(newName);
     });
 
-    editorState.setSelectedCompNames(newNames, "leftPanel");
+    selectCompsFromLeftPanel(editorState, newNames);
     return true;
   }
 }
diff --git a/client/packages/lowcoder/src/index.sdk.ts b/client/packages/lowcoder/src/index.sdk.ts
index 63a34b1e9a..6dbb7619cf 100644
--- a/client/packages/lowcoder/src/index.sdk.ts
+++ b/client/packages/lowcoder/src/index.sdk.ts
@@ -24,6 +24,7 @@ export * from "comps/utils/methodUtils";
 
 export { useUserViewMode } from "util/hooks";
 export * from "comps/editorState";
+export * from "comps/editorStore";
 export * from "redux/store/store";
 
 // util
diff --git a/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx b/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
index 739e87723f..fb73a86be3 100644
--- a/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
+++ b/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
@@ -1,4 +1,4 @@
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { UICompType } from "comps/uiCompRegistry";
 import { Layers } from "constants/Layers";
 import { ModulePrimaryColor, PrimaryColor } from "constants/style";
@@ -10,11 +10,9 @@ import React, {
   MouseEvent,
   MouseEventHandler,
   useCallback,
-  useContext,
   useMemo,
   useRef,
   useState,
-  useEffect,
 } from "react";
 import { ResizePayload, useResizeDetector } from "react-resize-detector";
 import styled, { css } from "styled-components";
@@ -244,6 +242,9 @@ const ResizableChildren = React.memo((props: {
   const { ref: innerRef } = useResizeDetector({
     refreshMode: "debounce",
     refreshRate: 10,
+    // The callback updates the parent grid layout. Avoid invoking it from the
+    // resize detector's internal React state updater.
+    disableRerender: true,
     onResize: ({width, height}: ResizePayload) => props.onInnerResize(width ?? undefined, height ?? undefined),
     observerOptions: { box: "border-box" }
   });
@@ -280,17 +281,9 @@ export const CompSelectionWrapper = React.memo((props: {
   resizeIconSize: "small" | "normal";
 }) => {
   const nameDivRef = useRef<HTMLDivElement>(null);
-  const editorState = useContext(EditorContext);
+  const showGridLines = useEditorStore((state) => state.isDragging || state.forceShowGrid);
   const [hover, setHover] = useState(false);
 
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      // Reset state
-      setHover(false);
-    };
-  }, []);
-
   const onMouseOver = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
       e.stopPropagation();
@@ -329,7 +322,7 @@ export const CompSelectionWrapper = React.memo((props: {
           onMouseOut,
           onClick: props.onClick,
           $hover: hover || undefined,
-          $showDashLine: editorState.showGridLines() || props.hidden,
+          $showDashLine: showGridLines || props.hidden,
           $isSelected: props.isSelected,
           $isHidden: props.hidden,
         }
diff --git a/client/packages/lowcoder/src/layout/gridItem.tsx b/client/packages/lowcoder/src/layout/gridItem.tsx
index 11821eca2a..8d02232bf7 100644
--- a/client/packages/lowcoder/src/layout/gridItem.tsx
+++ b/client/packages/lowcoder/src/layout/gridItem.tsx
@@ -7,7 +7,6 @@ import React, {
   SyntheticEvent,
   useCallback,
   useContext,
-  useEffect,
   useMemo,
   useRef,
   useState,
@@ -134,21 +133,6 @@ export const GridItem = React.memo((props: GridItemProps) => {
   // record the real height of the comp content
   const itemHeightRef = useRef<number | undefined>(undefined);
 
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      // Clear any pending state
-      setResizing(undefined);
-      setDragging(undefined);
-      
-      // Clear refs
-      itemHeightRef.current = undefined;
-      
-      // Clear any dragging data
-      // draggingUtils.clearData();
-    };
-  }, []);
-
   const onDragStart = useCallback((e: DragEvent<HTMLDivElement>) => {
     e.stopPropagation();
     const { i } = props as Required<GridItemProps>;
@@ -300,16 +284,21 @@ export const GridItem = React.memo((props: GridItemProps) => {
         onDrag={onDrag}
         onDragEnd={onDragEnd}
         onMouseDown={(e) => {
-          const parentContainer = editorState.findUIParentContainer(props.name!)?.toJsonValue();
+          // A temporary drag placeholder does not always have backing comp data.
+          // Treat it as a regular grid item instead of calling .includes on undefined.
+          const compType = props.compType ?? "";
+          const parentContainer = props.name
+            ? editorState.findUIParentContainer(props.name)?.toJsonValue()
+            : undefined;
 
           // allow mouseDown event on lowcoder-comp-kanban to make drag/drop work
           if(
-            (props.compType as string).includes('lowcoder-comp-kanban')
+            compType.includes('lowcoder-comp-kanban')
             || parentContainer?.compType?.includes('lowcoder-comp-kanban')
           ) return;
 
           // allow mouseDown event on lowcoder-comp-excalidraw to make drag/drop work
-          if((props.compType as string).includes('lowcoder-comp-excalidraw')) return;
+          if(compType.includes('lowcoder-comp-excalidraw')) return;
           e.stopPropagation();
           const event = new MouseEvent("mousedown");
           document.dispatchEvent(event);
diff --git a/client/packages/lowcoder/src/layout/gridLayout.tsx b/client/packages/lowcoder/src/layout/gridLayout.tsx
index 6da595584e..5fe89cb4cf 100644
--- a/client/packages/lowcoder/src/layout/gridLayout.tsx
+++ b/client/packages/lowcoder/src/layout/gridLayout.tsx
@@ -53,7 +53,7 @@ import {
   updateInCanvasCount,
 } from "./utils";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { CompContext } from "@lowcoder-ee/comps/utils/compContext";
+import { CompContext, CompContextCompInfo, CompContextInnerFields } from "@lowcoder-ee/comps/utils/compContext";
 
 type GridLayoutState = {
   layout: Layout;
@@ -122,9 +122,46 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
   ref = this.props.innerRef ?? this.innerRef;
   innerHeight = 0;
 
+  // Preserve context value identity across drag-driven renders.
+  compContextCache = new Map<
+    string,
+    { compType: UICompType | ""; widgetComp: any; value: { compType: UICompType | ""; comp?: CompContextCompInfo } }
+  >();
+
+  // Coalesces drag-tick layout commits to one per animation frame.
+  latestDragOps?: LayoutOps;
+  opsCommitRafId?: number;
+
+  scheduleOpsCommit = (ops: LayoutOps) => {
+    this.latestDragOps = ops;
+    if (this.opsCommitRafId !== undefined) return;
+    this.opsCommitRafId = requestAnimationFrame(() => {
+      this.opsCommitRafId = undefined;
+      if (this.latestDragOps !== undefined) {
+        this.setState({ ops: this.latestDragOps, nextLayout: undefined });
+      }
+    });
+  };
+
+  cancelPendingOpsCommit() {
+    if (this.opsCommitRafId !== undefined) {
+      cancelAnimationFrame(this.opsCommitRafId);
+      this.opsCommitRafId = undefined;
+    }
+    this.latestDragOps = undefined;
+  }
+
+  takeLatestOps() {
+    const latestOps = this.latestDragOps ?? this.state.ops;
+    this.cancelPendingOpsCommit();
+    return latestOps;
+  }
+
   throttleDebug = _.throttle(log.debug, 200);
 
   componentWillUnmount() {
+    this.cancelPendingOpsCommit();
+    this.compContextCache.clear();
     // Cleanup throttled debug function
     this.throttleDebug.cancel();
   }
@@ -209,6 +246,7 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
       // log.debug( "layout: didUpdate. oldLayout: ", oldLayout, " newLayout: ", newLayout, " prevProps: ", prevProps.layout, "thisProps: ", this.props.layout);
       this.onLayoutMaybeChanged(newLayout, oldLayout);
     }
+    this.pruneCompContextCache(Object.keys(this.getUILayout()));
   }
 
   isValidMounted(): boolean {
@@ -249,6 +287,7 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
       e.preventDefault();
       return;
     }
+    this.cancelPendingOpsCommit();
 
     let keys = this.getSelectedKeys();
     if (!keys.includes(i)) {
@@ -286,7 +325,8 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
     let { offsetX, offsetY } = calcOffsetXY(e, this.ref.current as HTMLDivElement, transformScale);
 
     const recoverDragStartFn = () => {
-      this.setState({ ops: undefined });
+      this.cancelPendingOpsCommit();
+      this.setState({ ops: undefined, nextLayout: undefined });
       // Ensure dragging data is cleared
       draggingUtils.clearData();
     };
@@ -424,6 +464,42 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
     }
   };
 
+  // Avoid serializing the entire component tree for context consumers.
+  getWidgetCompInfo(widgetComp: any): CompContextInnerFields | undefined {
+    if (!widgetComp?.children) return undefined;
+    return {
+      appliedThemeId: widgetComp.children.appliedThemeId?.getView?.(),
+      preventStyleOverwriting: widgetComp.children.preventStyleOverwriting?.getView?.(),
+      showDataLoadingIndicators: widgetComp.children.showDataLoadingIndicators?.getView?.(),
+      version: widgetComp.children.version?.getView?.(),
+    };
+  }
+
+  getCompContextValue(itemId: string, extraItem?: ExtraItem) {
+    const compType: UICompType | "" = extraItem?.compType ?? "";
+    const widgetComp = extraItem?.comp?.children?.comp;
+    const cached = this.compContextCache.get(itemId);
+    if (cached && cached.compType === compType && cached.widgetComp === widgetComp) {
+      return cached.value;
+    }
+    const value: { compType: UICompType | ""; comp?: CompContextCompInfo } = {
+      compType,
+      comp: widgetComp ? { comp: this.getWidgetCompInfo(widgetComp) } : undefined,
+    };
+    this.compContextCache.set(itemId, { compType, widgetComp, value });
+    return value;
+  }
+
+  pruneCompContextCache(currentKeys: Iterable<string>) {
+    if (this.compContextCache.size === 0) return;
+    const keep = new Set(currentKeys);
+    for (const key of this.compContextCache.keys()) {
+      if (!keep.has(key)) {
+        this.compContextCache.delete(key);
+      }
+    }
+  }
+
   processGridItem(
     zIndex: number,
     item: LayoutItem,
@@ -456,10 +532,7 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
     return (
       <CompContext.Provider
         key={item.i}
-        value={{
-          compType: extraItem?.compType,
-          comp: extraItem?.comp?.toJsonValue(),
-        }}
+        value={this.getCompContextValue(item.i, extraItem)}
       >
         <CompTypeContext.Provider value={extraItem?.compType}>
           <GridItem
@@ -641,7 +714,8 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
       // log.debug("flyOverRecoverFn: ", startOps, " layout: ", getUILayout(this.state.layout, startOps));
       const isSameRef = flyOverInfo?.layoutRef === this.ref;
       if (!isSameRef) {
-        this.setState({ ops: startOps });
+        this.cancelPendingOpsCommit();
+        this.setState({ ops: startOps, nextLayout: undefined });
       }
       if (flyOverInfo) {
         const newFlyOverInfo = isSameRef
@@ -705,7 +779,7 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
       } else {
         flyOverInfo.switchFn(newFlyOverInfo);
       }
-      this.setState({ ops, nextLayout: undefined });
+      this.scheduleOpsCommit(ops);
       // log.debug("setStateFn. ops: ", ops);
     };
 
@@ -830,8 +904,8 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
     const flyStartInfo = draggingUtils.getData<FlyStartInfo>(FLY_START_INFO);
     if (!flyStartInfo) {
       const { droppingItem } = this.props as Required<GridLayoutProps>;
-      const ops = layoutOpUtils.push(this.state.ops, deleteItemOp(droppingItem.i as string));
-      this.setState({ ops });
+      const ops = layoutOpUtils.push(this.takeLatestOps(), deleteItemOp(droppingItem.i as string));
+      this.setState({ ops, nextLayout: undefined });
     }
   }
 
@@ -874,14 +948,14 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
     const i = dragStartInfo.flyItemI;
 
     const ops = layoutOpUtils.batchPush(
-      this.state.ops,
+      this.takeLatestOps(),
       _.flattenDeep<LayoutOp>([
         keys.map((key) => changeItemOp(key, { placeholder: undefined })),
         renameItemOp(droppingKey, i),
       ])
     );
     this.dragEnterCounter = 0;
-    this.setState({ ops });
+    this.setState({ ops, nextLayout: undefined });
 
     const layout = getUILayout(
       this.state.layout,
@@ -906,21 +980,25 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
       // move the logic to onDragEnd function when dragging from the canvas
       return;
     }
-    let layout = this.getUILayout();
-    const ops = layoutOpUtils.push(this.state.ops, deleteItemOp(droppingKey));
+    const latestOps = this.takeLatestOps();
+    let layout = this.getUILayout(latestOps);
+    const ops = layoutOpUtils.push(latestOps, deleteItemOp(droppingKey));
     const items = _.pick(layout, droppingKey);
     layout = _.omit(layout, droppingKey);
     // log.debug("layout: onDrop gridLayout. items: ", items);
     // reset dragEnter counter on drop
     this.dragEnterCounter = 0;
-    this.setState({ ops });
+    this.setState({ ops, nextLayout: undefined });
 
     onDrop?.(layout, items, e);
     draggingUtils.clearData();
   };
 
   onDragEnd = (i: string, e: DragEvent<HTMLDivElement>, node: HTMLDivElement) => {
-    if (!draggingUtils.isDragging()) return;
+    if (!draggingUtils.isDragging()) {
+      this.cancelPendingOpsCommit();
+      return;
+    }
 
     let flyStartInfo = draggingUtils.getData<FlyStartInfo>(FLY_START_INFO);
     let flyOverInfo = draggingUtils.getData<FlyOverInfo>(FLY_OVER_INFO);
@@ -1104,7 +1182,7 @@ const LayoutContainer = styled.div<{
   overflow: ${(props) =>
     props.$maxRows !== DEFAULT_ROW_COUNT
     ? 'hidden'
-    : props.$overflow ?? "overlay"
+    : props.$overflow ?? (props.$autoHeight ? 'hidden' : 'overlay')
   };
   ${(props) =>
     props.$autoHeight &&
@@ -1118,7 +1196,7 @@ const ResizeWrapper = (props: {
   children: JSX.Element | React.ReactNode;
   onResize: (width?: number, height?: number) => void;
 }) => {
-  const { width, height } = useResizeDetector({
+  useResizeDetector({
     targetRef: props.targetRef,
     onResize: ({ width, height }: ResizePayload) => {
       props.onResize(width ?? undefined, height ?? undefined);
@@ -1126,6 +1204,9 @@ const ResizeWrapper = (props: {
     handleHeight: true,
     refreshMode: 'debounce',
     refreshRate: 100,
+    // This wrapper only uses the callback, so the hook does not need its own
+    // render cycle to track and expose width/height.
+    disableRerender: true,
   });
 
   return <>{props.children}</>;
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/common/Example.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/common/Example.tsx
index 968fde3426..c12363bdab 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/common/Example.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/common/Example.tsx
@@ -16,6 +16,7 @@ import { ExampleContext } from "../ExampleContext";
 import { trans } from "i18n";
 import { EditorContext, EditorState } from "comps/editorState";
 import { RootComp } from "comps/comps/rootComp";
+import { createEditorStore, EditorStoreProvider } from "comps/editorStore";
 
 const Wrapper = styled.div`
   border: 1px solid #d7d9e0;
@@ -191,7 +192,8 @@ const externalState: ExternalEditorContextState = {
   appType: AppTypeEnum.Application,
 };
 
-const editorState = new EditorState(new RootComp({ value: {} }), () => {});
+const editorStore = createEditorStore();
+const editorState = new EditorState(new RootComp({ value: {} }), () => {}, false, editorStore);
 
 export default function Example(props: IProps) {
   const {
@@ -251,7 +253,9 @@ export default function Example(props: IProps) {
             </OperationBtn>
           </OperationWrapper>
           <Bound show={isBorderShow} style={{ width, height }}>
-            <EditorContext.Provider value={editorState}>{view}</EditorContext.Provider>
+            <EditorStoreProvider store={editorStore}>
+              <EditorContext.Provider value={editorState}>{view}</EditorContext.Provider>
+            </EditorStoreProvider>
           </Bound>
         </div>
         {!hideSettings && (
diff --git a/client/packages/lowcoder/src/pages/ComponentPlayground/index.tsx b/client/packages/lowcoder/src/pages/ComponentPlayground/index.tsx
index 50bd0935aa..8c5fb8d0e4 100644
--- a/client/packages/lowcoder/src/pages/ComponentPlayground/index.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentPlayground/index.tsx
@@ -9,6 +9,7 @@ import { RootComp } from "comps/comps/rootComp";
 import { useMemo } from "react";
 import { lazyLoadComp } from "@lowcoder-ee/comps/comps/lazyLoadComp/lazyLoadComp";
 import { LoadingBarHideTrigger } from "@lowcoder-ee/util/hideLoading";
+import { createEditorStore, EditorStoreProvider } from "comps/editorStore";
 
 type CompInfo = UICompManifest & { key: string };
 const groups: Partial<Record<UICompCategory, CompInfo[]>> = {};
@@ -50,7 +51,8 @@ const Wrapper = styled.div`
   }
 `;
 
-const editorState = new EditorState(new RootComp({ value: {} }), () => {});
+const editorStore = createEditorStore();
+const editorState = new EditorState(new RootComp({ value: {} }), () => {}, false, editorStore);
 
 export default function ComponentPlayground() {
   window.__LOWCODER_ORG__ = {};
@@ -75,13 +77,15 @@ export default function ComponentPlayground() {
     <Wrapper>
       <LoadingBarHideTrigger />
       <div className="content">
-        <EditorContext.Provider value={editorState}>
-          <CompPlayground
-            initialValue={dsl}
-            compFactory={comp as unknown as Comp<any>}
-            layoutInfo={compManifest.layoutInfo || { h: 5, w: 5 }}
-          />
-        </EditorContext.Provider>
+        <EditorStoreProvider store={editorStore}>
+          <EditorContext.Provider value={editorState}>
+            <CompPlayground
+              initialValue={dsl}
+              compFactory={comp as unknown as Comp<any>}
+              layoutInfo={compManifest.layoutInfo || { h: 5, w: 5 }}
+            />
+          </EditorContext.Provider>
+        </EditorStoreProvider>
       </div>
     </Wrapper>
   );
diff --git a/client/packages/lowcoder/src/pages/common/header.tsx b/client/packages/lowcoder/src/pages/common/header.tsx
index 8dd758386d..146f14a1cb 100644
--- a/client/packages/lowcoder/src/pages/common/header.tsx
+++ b/client/packages/lowcoder/src/pages/common/header.tsx
@@ -30,6 +30,7 @@ import {
 } from "lowcoder-design";
 import { trans } from "i18n";
 import dayjs from "dayjs";
+import { useEditorLayoutStore } from "pages/editor/editorLayoutStore";
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import {
@@ -57,7 +58,6 @@ import { HeaderStartDropdown } from "./headerStartDropdown";
 import { AppPermissionDialog } from "../../components/PermissionDialog/AppPermissionDialog";
 import { getBrandingConfig } from "../../redux/selectors/configSelectors";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
-import { EditorContext } from "../../comps/editorState";
 import Tooltip from "antd/es/tooltip";
 import { LockOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 import UserApi from "@lowcoder-ee/api/userApi";
@@ -364,19 +364,16 @@ export type ToggleEditorModeStatus = (
 ) => void;
 
 type HeaderProps = {
-  panelStatus: PanelStatus;
-  togglePanel: TogglePanel;
   editorModeStatus: EditorModeStatus;
   toggleEditorModeStatus: ToggleEditorModeStatus;
 };
 
 // header in editor page
 export default function Header(props: HeaderProps) {
-  const editorState = useContext(EditorContext);
   const { blockEditing, fetchApplication } = useContext(ExternalEditorContext);
-  const { togglePanel } = props;
   const { toggleEditorModeStatus } = props;
-  const { left, bottom, right } = props.panelStatus;
+  const togglePanel = useEditorLayoutStore((state) => state.togglePanel);
+  const { left, bottom, right } = useEditorLayoutStore((state) => state.panelStatus);
   const user = useSelector(getUser);
   const application = useSelector(currentApplication);
   const isPublicApp = useSelector(isPublicApplication);
@@ -432,7 +429,6 @@ export default function Header(props: HeaderProps) {
     target: { value },
   }: RadioChangeEvent) => {
     toggleEditorModeStatus(value);
-    editorState.setEditorModeStatus(value);
   };
 
   const headerStart = (
diff --git a/client/packages/lowcoder/src/pages/common/previewHeader.tsx b/client/packages/lowcoder/src/pages/common/previewHeader.tsx
index bf73cd9803..2e63d061aa 100644
--- a/client/packages/lowcoder/src/pages/common/previewHeader.tsx
+++ b/client/packages/lowcoder/src/pages/common/previewHeader.tsx
@@ -26,6 +26,7 @@ import MobileOutlined from "@ant-design/icons/MobileOutlined";
 import TabletOutlined from "@ant-design/icons/TabletOutlined";
 import DesktopOutlined from "@ant-design/icons/DesktopOutlined";
 import { DeviceOrientation, DeviceType, EditorContext } from "@lowcoder-ee/comps/editorState";
+import { useEditorStore } from "@lowcoder-ee/comps/editorStore";
 import { getBrandingSetting } from "@lowcoder-ee/redux/selectors/enterpriseSelectors";
 import { buildMaterialPreviewURL } from "@lowcoder-ee/util/materialUtils";
 
@@ -150,6 +151,8 @@ export function HeaderProfile(props: { user: User }) {
 const PreviewHeaderComp = () => {
   const params = useParams<AppPathParams>();
   const editorState = useContext(EditorContext);
+  const deviceType = useEditorStore((state) => state.deviceType);
+  const deviceOrientation = useEditorStore((state) => state.deviceOrientation);
   const user = useSelector(getUser);
   const application = useSelector(currentApplication);
   const isPublicApp = useSelector(isPublicApplication);
@@ -237,20 +240,20 @@ const PreviewHeaderComp = () => {
             { value: 'tablet', icon: <TabletOutlined /> },
             { value: 'desktop', icon: <DesktopOutlined /> },
           ]}
-          value={editorState.deviceType}
+          value={deviceType}
           onChange={(value) => {
             editorState.setDeviceType(value);
           }}
         />
 
         {/* Orientation */}
-        {editorState.deviceType !== 'desktop' && (
+        {deviceType !== 'desktop' && (
           <Segmented<DeviceOrientation>
             options={[
               { value: 'portrait', label: "Portrait" },
               { value: 'landscape', label: "Landscape" },
             ]}
-            value={editorState.deviceOrientation}
+            value={deviceOrientation}
             onChange={(value) => {
               editorState.setDeviceOrientation(value);
             }}
@@ -260,8 +263,8 @@ const PreviewHeaderComp = () => {
     );
   }, [
     isPublicApp,
-    editorState.deviceType,
-    editorState.deviceOrientation,
+    deviceType,
+    deviceOrientation,
   ]);
 
   return (
diff --git a/client/packages/lowcoder/src/pages/editor/LeftContent.tsx b/client/packages/lowcoder/src/pages/editor/LeftContent.tsx
index 1b403d6823..966b7f1174 100644
--- a/client/packages/lowcoder/src/pages/editor/LeftContent.tsx
+++ b/client/packages/lowcoder/src/pages/editor/LeftContent.tsx
@@ -17,6 +17,7 @@ import {
 } from "lowcoder-design";
 import React, { ReactNode, useCallback, useContext, useMemo, useState } from "react";
 import { hookCompCategory } from "comps/hooks/hookCompTypes";
+import { selectCompsFromLeftPanel } from "comps/hooks/hookSelection";
 import _ from "lodash";
 import styled from "styled-components";
 import { leftCompListClassName } from "pages/tutorials/tutorialsConstant";
@@ -32,6 +33,7 @@ import type { UICompType } from "comps/uiCompRegistry";
 import { CollapseWrapper, DirectoryTreeStyle, Node } from "./styledComponents";
 import { DataNode, EventDataNode } from "antd/es/tree";
 import { isAggregationApp } from "util/appUtils";
+import { useEditorStore } from "comps/editorStore";
 import Modal from "antd/es/modal/Modal";
 
 const CollapseTitleWrapper = styled.div`
@@ -282,6 +284,8 @@ const LeftContentWrapper = styled.div`
 export const LeftContent = (props: LeftContentProps) => {
   const { uiComp } = props;
   const editorState = useContext(EditorContext);
+  const selectedCompNames = useEditorStore((state) => state.selectedCompNames);
+  const selectedBottomResName = useEditorStore((state) => state.selectedBottomResName);
   const [expandedKeys, setExpandedKeys] = useState<Array<React.Key>>([]);
   const [showData, setShowData] = useState<NodeInfo[]>([]);
 
@@ -351,7 +355,7 @@ export const LeftContent = (props: LeftContentProps) => {
 
   const uiCollapseClick = useCallback(
     (compName: string) => {
-      editorState.setSelectedCompNames(new Set([compName]), "leftPanel");
+      selectCompsFromLeftPanel(editorState, new Set([compName]));
     },
     [editorState]
   );
@@ -483,8 +487,8 @@ export const LeftContent = (props: LeftContentProps) => {
         : editorState.getHooksComp().getUITree();
     const explorerData: NodeItem[] = getTree(tree, []);
     let selectedKeys = [];
-    if (editorState.selectedCompNames.size === 1) {
-      const key = Object.keys(editorState.selectedComps())[0];
+    if (selectedCompNames.size === 1) {
+      const key = Object.keys(editorState.selectedComps(selectedCompNames))[0];
       const parentKeys = getParentNodeKeysByKey(explorerData, key);
       if (parentKeys && parentKeys.length) {
         let needSet = false;
@@ -543,11 +547,11 @@ export const LeftContent = (props: LeftContentProps) => {
           name={item.name}
           desc={item.dataDesc}
           data={item.data}
-          isSelected={editorState.selectedBottomResName === item.name}
+          isSelected={selectedBottomResName === item.name}
           onClick={() => handleBottomResItemClick(item.type as BottomResTypeEnum, item.name)}
         />
       ));
-  }, [editorState, handleBottomResItemClick]);
+  }, [editorState, selectedBottomResName, handleBottomResItemClick]);
 
   const hookCompsCollapse = useMemo(() => {
     return _.sortBy(
@@ -618,4 +622,4 @@ export const LeftContent = (props: LeftContentProps) => {
       </LeftContentTabs>
     </LeftContentWrapper>
   );
-};
\ No newline at end of file
+};
diff --git a/client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx b/client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx
index 907a78867e..eb1b2a8266 100644
--- a/client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx
+++ b/client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx
@@ -29,6 +29,8 @@ import { default as Button } from "antd/es/button";
 import { default as Divider } from "antd/es/divider";
 import { default as Dropdown } from "antd/es/dropdown";
 import { default as Flex } from "antd/es/flex";
+import { useEditorStore } from "comps/editorStore";
+import { selectCompsFromLeftPanel } from "comps/hooks/hookSelection";
 import { default as Input } from "antd/es/input";
 import { default as Menu } from "antd/es/menu";
 import { default as Space } from "antd/es/space";
@@ -152,6 +154,7 @@ const CustomDropdown = styled(Dropdown)`
 export const LeftLayersContent = (props: LeftLayersContentProps) => {
   const { uiComp } = props;
   const editorState = useContext(EditorContext);
+  const selectedCompNames = useEditorStore((state) => state.selectedCompNames);
   const [expandedKeys, setExpandedKeys] = useState<Array<React.Key>>([]);
   const dispatch = useDispatch();
   const applicationId = useApplicationId();
@@ -212,7 +215,7 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
 
   const uiCollapseClick = useCallback(
     (compName: string) => {
-      editorState.setSelectedCompNames(new Set([compName]), "leftPanel");
+      selectCompsFromLeftPanel(editorState, new Set([compName]));
     },
     [editorState]
   );
@@ -244,12 +247,12 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
 
     if (dsl.ui.compType === "module") {
       explorerData.forEach(data => {
-        data['pos'] = dsl.ui.comp.container.layout[data.key].pos;
+        data['pos'] = dsl.ui.comp.container.layout[data.key]?.pos ?? 0;
       })
     }
     else {
       explorerData.forEach(data => {
-        data['pos'] = dsl.ui.layout[data.key].pos;
+        data['pos'] = dsl.ui.layout[data.key]?.pos ?? 0;
       })
     }
 
@@ -426,7 +429,7 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
     const selectedComponentsOnCanvas: string[] = [];
     const compTree = editorState.getUIComp().getTree();
     const explorerData: NodeItem[] = getTree(compTree, []);
-    for (let value of editorState.selectedCompNames) {
+    for (let value of selectedCompNames) {
       for (let key of explorerData) {
         if (key.title === value) {
           selectedComponentsOnCanvas.push(key.key);
@@ -434,7 +437,7 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
       }
     }
     setCheckedKeys(selectedComponentsOnCanvas);
-  }, [editorState]);
+  }, [editorState, selectedCompNames]);
 
   // make sure to handle the selectedActionKey for the changed input fields
   /* useEffect(() => {
@@ -448,7 +451,7 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
     for (let key of e.checkedNodes){
       checkedComponents.add(key.title);
     }
-    editorState.setSelectedCompNames(checkedComponents, "leftPanel");
+    selectCompsFromLeftPanel(editorState, checkedComponents);
   }
 
   const getCheckedKeys = () => {
@@ -611,4 +614,4 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
 
   return <LeftLayersContentWrapper className="cypress-left-content">{layerControlContent}</LeftLayersContentWrapper>;
   
-};
\ No newline at end of file
+};
diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomContent.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomContent.tsx
index a233558154..7acc70c2c0 100644
--- a/client/packages/lowcoder/src/pages/editor/bottom/BottomContent.tsx
+++ b/client/packages/lowcoder/src/pages/editor/bottom/BottomContent.tsx
@@ -3,6 +3,7 @@ import styled, { css } from "styled-components";
 import { NofileIcon } from "lowcoder-design";
 import { EmptyTab } from "./BottomTabs";
 import { CompNameContext, EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { BottomSidebar } from "./BottomSidebar";
 import { useSelector } from "react-redux";
 import { MetaDataContext } from "base/codeEditor/codeEditorTypes";
@@ -62,6 +63,8 @@ export function BottomSkeleton() {
 export const BottomContent = () => {
   const editorState = useContext(EditorContext);
   const datasourceInfos = useSelector(getDataSource);
+  const selectedBottomResName = useEditorStore((state) => state.selectedBottomResName);
+  const selectedBottomResType = useEditorStore((state) => state.selectedBottomResType);
   const selectedComp = editorState.selectedBottomResComp();
   const [isCreatePanelShow, showCreatePanel] = useState(false);
 
@@ -70,7 +73,7 @@ export const BottomContent = () => {
   const transformerItems = editorState.getTransformersComp().getView();
   const folderItems = editorState.getFoldersComp().getView();
   const dataResponderItems = editorState.getDataRespondersComp().getView();
-  const isFolderSelected = editorState.selectedBottomResType === BottomResTypeEnum.Folder;
+  const isFolderSelected = selectedBottomResType === BottomResTypeEnum.Folder;
   const refTreeComp = editorState.rootComp.children.refTree;
 
   const bottomResItems = [
@@ -97,7 +100,7 @@ export const BottomContent = () => {
     showCreatePanel(false);
 
     const isFolder = type === BottomResTypeEnum.Folder;
-    const parent = isFolderSelected && !isFolder ? editorState.selectedBottomResName : "";
+    const parent = isFolderSelected && !isFolder ? selectedBottomResName : "";
     const index = isFolder ? folderItems.length : undefined;
     editorState.rootComp.children.refTree.appendRef(parent, id, index);
   };
@@ -123,8 +126,8 @@ export const BottomContent = () => {
   };
 
   useEffect(() => {
-    editorState.selectedBottomResName && showCreatePanel(false);
-  }, [editorState.selectedBottomResName, showCreatePanel]);
+    selectedBottomResName && showCreatePanel(false);
+  }, [selectedBottomResName, showCreatePanel]);
 
   // keep reference unchanged when metaData unchange, avoid re-configure when auto-completion changes
   const selectedDatasourceId =
diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomPanel.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomPanel.tsx
index ea45ffa359..1d65c44925 100644
--- a/client/packages/lowcoder/src/pages/editor/bottom/BottomPanel.tsx
+++ b/client/packages/lowcoder/src/pages/editor/bottom/BottomPanel.tsx
@@ -4,11 +4,10 @@ import styled from "styled-components";
 import * as React from "react";
 import { useContext, useEffect, useMemo, useState } from "react";
 import {
-  getPanelStyle,
   getSelectedAIQueryName,
-  savePanelStyle,
   saveSelectedAIQueryName,
 } from "util/localStorageUtil";
+import { useEditorLayoutStore } from "pages/editor/editorLayoutStore";
 import { BottomResultPanel } from "../../../components/resultPanel/BottomResultPanel";
 import { AppState } from "../../../redux/reducers";
 import { getUser } from "../../../redux/selectors/usersSelectors";
@@ -106,15 +105,14 @@ const removeListener = () => {
 };
 
 function Bottom(props: any) {
-  const panelStyle = useMemo(() => getPanelStyle(), []);
+  const bottomHeight = useEditorLayoutStore((state) => state.panelStyle.bottom.h);
+  const setBottomHeight = useEditorLayoutStore((state) => state.setBottomHeight);
   const clientHeight = document.documentElement.clientHeight;
   const resizeStop = (e: React.SyntheticEvent, data: ResizeCallbackData) => {
-    savePanelStyle({ ...panelStyle, bottom: { h: data.size.height } });
     setBottomHeight(data.size.height);
     removeListener();
   };
 
-  const [bottomHeight, setBottomHeight] = useState(panelStyle.bottom.h);
   const [currentOption, setCurrentOption] = useState("data");
   const [selectedQuery, setSelectedQuery] = useState<string>(() => getSelectedAIQueryName());
 
@@ -144,7 +142,7 @@ function Bottom(props: any) {
       <BottomResultPanel bottom={bottomHeight} />
       <StyledResizableBox
         width={Infinity}
-        height={panelStyle.bottom.h}
+        height={bottomHeight}
         resizeHandles={["n"]}
         minConstraints={[680, 285]}
         maxConstraints={[Infinity, clientHeight - 48 - 40]}
diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
index 6f8a6f4d79..fd6c563c25 100644
--- a/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
+++ b/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
@@ -14,6 +14,7 @@ import {
 } from "lowcoder-design";
 import { CSSProperties, useContext, useEffect, useState } from "react";
 import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { useSelector } from "react-redux";
 import { showAppSnapshotSelector } from "redux/selectors/appSnapshotSelector";
 import { BottomResComp, BottomResTypeEnum } from "types/bottomRes";
@@ -440,7 +441,8 @@ function BottomSidebarItem(props: BottomSidebarItemProps) {
   const [editing, setEditing] = useState(false);
   const editorState = useContext(EditorContext);
   const readOnly = useSelector(showAppSnapshotSelector);
-  const { selectedBottomResName, selectedBottomResType } = editorState;
+  const selectedBottomResName = useEditorStore((state) => state.selectedBottomResName);
+  const selectedBottomResType = useEditorStore((state) => state.selectedBottomResType);
   const level = path.length - 1;
   const type = resComp.type();
   const name = resComp.name();
diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomTabs.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomTabs.tsx
index 0813ddfb31..5a150d9465 100644
--- a/client/packages/lowcoder/src/pages/editor/bottom/BottomTabs.tsx
+++ b/client/packages/lowcoder/src/pages/editor/bottom/BottomTabs.tsx
@@ -10,6 +10,7 @@ import {
 import React, { ReactNode, useContext, useEffect, useState } from "react";
 import styled from "styled-components";
 import { EditorContext } from "../../../comps/editorState";
+import { useEditorStore } from "../../../comps/editorStore";
 import _ from "lodash";
 import { ReadOnlyMask } from "pages/common/styledComponent";
 import { useSelector } from "react-redux";
@@ -222,10 +223,11 @@ export function BottomTabs<T extends TabsConfigType>(props: {
   const [editing, setEditing] = useState(false);
   const editorState = useContext(EditorContext);
   const readOnly = useSelector(showAppSnapshotSelector);
+  const selectedBottomResName = useEditorStore((state) => state.selectedBottomResName);
 
   const valueInfoMap = _.fromPairs(tabsConfig.map((c) => [c.key, c]));
 
-  useEffect(() => setKey("general"), [editorState.selectedBottomResName]);
+  useEffect(() => setKey("general"), [selectedBottomResName]);
 
   const RunButtonWrapper = () => (
     <RunButton
diff --git a/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx b/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx
index dbb07d685f..ab8a9694c0 100644
--- a/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx
+++ b/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { ReactNode, useContext, useMemo, useRef, useState, useCallback, useEffect } from "react";
+import { ReactNode, useContext, useRef, useState, useCallback, useEffect } from "react";
 import { Layers } from "../../constants/Layers";
 import { CodeEditorOpenIcon, CodeEditorPinnedIcon, CodeEditorUnPinnedIcon } from "lowcoder-design";
 import { CodeEditorCloseIcon } from "lowcoder-design";
@@ -8,7 +8,7 @@ import Trigger from "rc-trigger";
 import { Resizable } from "react-resizable";
 import Handle from "../../layout/handler";
 import Draggable from "react-draggable";
-import { getPanelStyle, savePanelStyle } from "../../util/localStorageUtil";
+import { useEditorLayoutStore } from "./editorLayoutStore";
 import { CompNameContext } from "../../comps/editorState";
 import { isEmpty } from "lodash";
 import { trans } from "i18n";
@@ -146,8 +146,10 @@ export const CodeEditorPanel = (props: {
     right: 0,
   });
 
-  const panelStyle = useMemo(() => getPanelStyle(), []);
-  const [size, setSize] = useState({ w: panelStyle.codeEditor.w, h: panelStyle.codeEditor.h });
+  const savedSize = useEditorLayoutStore((state) => state.panelStyle.codeEditor);
+  const setCodeEditorSize = useEditorLayoutStore((state) => state.setCodeEditorSize);
+  // local state drives the live drag; only the committed size goes to the store
+  const [size, setSize] = useState({ w: savedSize.w, h: savedSize.h });
 
   const [visible, setVisible] = useState(false);
 
@@ -189,9 +191,9 @@ export const CodeEditorPanel = (props: {
 
   const handleResizeStop = useCallback(() => {
     if (mountedRef.current) {
-      savePanelStyle({ ...panelStyle, codeEditor: { w: size.w, h: size.h } });
+      setCodeEditorSize({ w: size.w, h: size.h });
     }
-  }, [panelStyle, size.w, size.h]);
+  }, [setCodeEditorSize, size.w, size.h]);
 
   const handleVisibleChange = useCallback((visible: boolean) => {
     if (mountedRef.current) {
diff --git a/client/packages/lowcoder/src/pages/editor/editorHotKeys.tsx b/client/packages/lowcoder/src/pages/editor/editorHotKeys.tsx
index 00456fe1cb..67d7a13028 100644
--- a/client/packages/lowcoder/src/pages/editor/editorHotKeys.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorHotKeys.tsx
@@ -12,7 +12,8 @@ import {
   selectCompModifierKeyPressed,
   ShortcutsWrapper,
 } from "util/keyUtils";
-import { PanelStatus, TogglePanel } from "pages/common/header";
+import type { TogglePanel } from "pages/common/header";
+import { useEditorLayoutStore } from "pages/editor/editorLayoutStore";
 import { clickCompNameClass } from "base/codeEditor/clickCompName";
 import { getShortcutAction } from "pages/common/shortcutConfigs";
 import { preview } from "constants/routesURL";
@@ -49,8 +50,6 @@ type Props = {
 };
 
 type GlobalProps = Props & {
-  togglePanel: TogglePanel;
-  panelStatus: PanelStatus;
   toggleShortcutList: () => void;
 };
 
@@ -163,7 +162,9 @@ function handleMouseDown(e: MouseEvent, editorState: EditorState, showLeftPanel:
 export const EditorGlobalHotKeys = React.memo((props: GlobalProps) => {
   const editorState = useContext(EditorContext);
   const { history: editorHistory } = useContext(ExternalEditorContext);
-  const { togglePanel, panelStatus, toggleShortcutList } = props;
+  const { toggleShortcutList } = props;
+  const togglePanel = useEditorLayoutStore((state) => state.togglePanel);
+  const panelStatus = useEditorLayoutStore((state) => state.panelStatus);
   const applicationId = useApplicationId();
   const mountedRef = useRef(true);
 
diff --git a/client/packages/lowcoder/src/pages/editor/editorLayoutStore.ts b/client/packages/lowcoder/src/pages/editor/editorLayoutStore.ts
new file mode 100644
index 0000000000..bb34ad39bc
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/editor/editorLayoutStore.ts
@@ -0,0 +1,84 @@
+import { create } from "zustand";
+import type { PanelStatus } from "pages/common/header";
+import {
+  DefaultPanelStatus,
+  getPanelStatus,
+  getPanelStyle,
+  savePanelStatus,
+  savePanelStyle,
+  type PanelStyle,
+} from "util/localStorageUtil";
+
+// Standalone editor panel store keeps layout available outside EditorStoreProvider.
+export type EditorLayoutState = {
+  panelStatus: PanelStatus;
+  prePanelStatus: PanelStatus;
+  panelStyle: PanelStyle;
+
+  /** Toggle one panel, or all of them at once when called with no argument. */
+  togglePanel: (panel?: keyof PanelStatus) => void;
+  setPanel: (panel: keyof PanelStatus, open: boolean) => void;
+  /** Open every panel without persisting - used by the new-user guide. */
+  resetPanelStatus: () => void;
+
+  setBottomHeight: (h: number) => void;
+  setCodeEditorSize: (size: { w: number; h: number }) => void;
+};
+
+export const useEditorLayoutStore = create<EditorLayoutState>((set, get) => ({
+  panelStatus: getPanelStatus(),
+  prePanelStatus: DefaultPanelStatus,
+  panelStyle: getPanelStyle(),
+
+  togglePanel: (panel) => {
+    const { panelStatus, prePanelStatus } = get();
+    let nextStatus: PanelStatus;
+    let nextPreStatus = prePanelStatus;
+
+    if (panel) {
+      nextStatus = { ...panelStatus, [panel]: !panelStatus[panel] };
+    } else if (Object.values(panelStatus).some((value) => value)) {
+      // collapsing everything - remember the current layout so we can restore it
+      nextPreStatus = panelStatus;
+      nextStatus = { left: false, bottom: false, right: false };
+    } else {
+      nextStatus = prePanelStatus;
+    }
+
+    savePanelStatus(nextStatus);
+    set({ panelStatus: nextStatus, prePanelStatus: nextPreStatus });
+  },
+
+  setPanel: (panel, open) => {
+    const { panelStatus } = get();
+    if (panelStatus[panel] === open) {
+      return;
+    }
+    const nextStatus = { ...panelStatus, [panel]: open };
+    savePanelStatus(nextStatus);
+    set({ panelStatus: nextStatus });
+  },
+
+  // Start the guide from defaults without overwriting the saved layout.
+  resetPanelStatus: () => set({ panelStatus: DefaultPanelStatus }),
+
+  setBottomHeight: (h) => {
+    const { panelStyle } = get();
+    if (panelStyle.bottom.h === h) {
+      return;
+    }
+    const nextStyle = { ...panelStyle, bottom: { h } };
+    savePanelStyle(nextStyle);
+    set({ panelStyle: nextStyle });
+  },
+
+  setCodeEditorSize: ({ w, h }) => {
+    const { panelStyle } = get();
+    if (panelStyle.codeEditor.w === w && panelStyle.codeEditor.h === h) {
+      return;
+    }
+    const nextStyle = { ...panelStyle, codeEditor: { w, h } };
+    savePanelStyle(nextStyle);
+    set({ panelStyle: nextStyle });
+  },
+}));
diff --git a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx b/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
index 200282e50c..c0f29088ee 100644
--- a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
@@ -1,14 +1,10 @@
-import Header from "pages/common/header";
 import React, { lazy, useCallback, useEffect, useRef } from "react";
 import {
   Body,
   EditorContainer,
   Height100Div,
 } from "pages/common/styledComponent";
-import { getPanelStatus, getEditorModeStatus, getPanelStyle } from "util/localStorageUtil";
-// import { BottomSkeleton } from "pages/editor/bottom/BottomContent";
-// import RightPanel from "pages/editor/right/RightPanel";
-import _ from "lodash";
+import { useEditorLayoutStore } from "pages/editor/editorLayoutStore";
 
 import styled from "styled-components";
 import { default as Skeleton } from "antd/es/skeleton";
@@ -55,9 +51,9 @@ export const EditorLoadingSpin = React.memo((props: { height?: string | number }
 
 export default function EditorSkeletonView() {
   const mountedRef = useRef(true);
-  const panelStatus = getPanelStatus();
-  const editorModeStatus = getEditorModeStatus();
-  const panelStyle = getPanelStyle();
+  // no provider here - the skeleton renders while the app is still loading
+  const panelStatus = useEditorLayoutStore((state) => state.panelStatus);
+  const bottomHeight = useEditorLayoutStore((state) => state.panelStyle.bottom.h);
   const isUserViewMode = useUserViewMode();
   const isTemplate = useTemplateViewMode();
 
@@ -83,12 +79,6 @@ export default function EditorSkeletonView() {
   return (
     <>
       <Height100Div>
-        {/* <Header
-          panelStatus={panelStatus}
-          togglePanel={_.noop}
-          editorModeStatus={editorModeStatus}
-          toggleEditorModeStatus={_.noop}
-        /> */}
         <Body>
           <SiderStyled />
           {panelStatus.left && (
@@ -104,7 +94,7 @@ export default function EditorSkeletonView() {
               <EditorLoadingSpin />
             </EditorContainer>
             {panelStatus.bottom && (
-              <div style={{ height: panelStyle.bottom.h + "px" }}>
+              <div style={{ height: bottomHeight + "px" }}>
                 <BottomSkeleton />
               </div>
             )}
diff --git a/client/packages/lowcoder/src/pages/editor/editorView.tsx b/client/packages/lowcoder/src/pages/editor/editorView.tsx
index 60edc7249f..f1e91f2e1b 100644
--- a/client/packages/lowcoder/src/pages/editor/editorView.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorView.tsx
@@ -20,8 +20,6 @@ import {
 } from "lowcoder-design";
 import { useTemplateViewMode } from "util/hooks";
 import {
-  type PanelStatus,
-  type TogglePanel,
   type EditorModeStatus,
   type ToggleEditorModeStatus
 } from "pages/common/header";
@@ -48,13 +46,6 @@ import { currentApplication, isPublicApplication } from "redux/selectors/applica
 import { showAppSnapshotSelector } from "redux/selectors/appSnapshotSelector";
 import styled from "styled-components";
 import { ExternalEditorContext } from "util/context/ExternalEditorContext";
-import {
-  DefaultPanelStatus,
-  getPanelStatus,
-  savePanelStatus,
-  getEditorModeStatus,
-  saveEditorModeStatus,
-} from "util/localStorageUtil";
 import { isAggregationApp } from "util/appUtils";
 import EditorSkeletonView from "./editorSkeletonView";
 import {
@@ -65,6 +56,8 @@ import { AppSettingContext, AppSettingType } from "@lowcoder-ee/comps/utils/appS
 import { getBrandingSetting } from "@lowcoder-ee/redux/selectors/enterpriseSelectors";
 import Flex from "antd/es/flex";
 import { PreviewContainerID } from "constants/domLocators";
+import { useEditorStore } from "comps/editorStore";
+import { useEditorLayoutStore } from "./editorLayoutStore";
 // import { BottomSkeleton } from "./bottom/BottomContent";
 
 const Header = lazy(
@@ -259,7 +252,7 @@ const PreloadDiv = styled.div`
 `;
 
 export const EditorWrapper = styled.div`
-  overflow: auto;
+  overflow: hidden;
   position: relative;
   flex: 1 1 0;
 `;
@@ -412,6 +405,13 @@ function EditorView(props: EditorViewProps) {
   const { uiComp } = props;
   const params = useParams<AppPathParams>();
   const editorState = useContext(EditorContext);
+  const showPropertyPane = useEditorStore((state) => state.showPropertyPane);
+  const editorModeStatus = useEditorStore(
+    (state) => state.editorModeStatus as EditorModeStatus
+  );
+  const setEditorModeStatus = useEditorStore((state) => state.setEditorModeStatus);
+  const deviceType = useEditorStore((state) => state.deviceType);
+  const deviceOrientation = useEditorStore((state) => state.deviceOrientation);
   const { readOnly, hideHeader } = useContext(ExternalEditorContext);
   const application = useSelector(currentApplication);
   const isPublicApp = useSelector(isPublicApplication);
@@ -429,49 +429,25 @@ function EditorView(props: EditorViewProps) {
   const [height, setHeight] = useState<number>();
   const dispatch = useDispatch();
 
-  const [panelStatus, setPanelStatus] = useState(() => {
-    return showNewUserGuide ? DefaultPanelStatus : getPanelStatus();
-  });
+  const panelStatus = useEditorLayoutStore((state) => state.panelStatus);
+  const setPanel = useEditorLayoutStore((state) => state.setPanel);
+  const resetPanelStatus = useEditorLayoutStore((state) => state.resetPanelStatus);
 
-  const [prePanelStatus, setPrePanelStatus] =
-    useState<PanelStatus>(DefaultPanelStatus);
+  // the guide starts from the default layout; layout effect so it lands before paint
+  useLayoutEffect(() => {
+    if (showNewUserGuide) {
+      resetPanelStatus();
+    }
+  }, [showNewUserGuide, resetPanelStatus]);
 
   const isViewMode = params.viewMode === 'view';
 
   const appSettingsComp = editorState.getAppSettingsComp();
   const { showHeaderInPublic } = appSettingsComp.getView();
 
-  const togglePanel: TogglePanel = useCallback(
-    (key) => {
-      let newPanelStatus;
-      if (key) {
-        newPanelStatus = Object.assign({}, panelStatus);
-        newPanelStatus[key] = !panelStatus[key];
-      } else {
-        if (Object.values(panelStatus).some((value) => value)) {
-          setPrePanelStatus(panelStatus);
-          newPanelStatus = { left: false, bottom: false, right: false };
-        } else {
-          newPanelStatus = prePanelStatus;
-        }
-      }
-      setPanelStatus(newPanelStatus);
-      savePanelStatus(newPanelStatus);
-    },
-    [panelStatus, prePanelStatus]
-  );
-
-  // added by Falk Wolsky to support a Layout and Logic Mode in Lowcoder
-  const [editorModeStatus, setEditorModeStatus] = useState(() => {
-    return getEditorModeStatus();
-  });
-
   const toggleEditorModeStatus: ToggleEditorModeStatus = useCallback(
-    (value) => {
-      setEditorModeStatus(value ? value : ("both" as EditorModeStatus));
-      saveEditorModeStatus(value ? value : ("both" as EditorModeStatus));
-    },
-    [editorModeStatus]
+    (value) => setEditorModeStatus(value ?? "both"),
+    [setEditorModeStatus]
   );
 
   const onCompDrag = useCallback(
@@ -509,7 +485,7 @@ function EditorView(props: EditorViewProps) {
     return () => {
       window.removeEventListener(eventType, updateSize);
     };
-  }, [panelStatus, editorModeStatus]);
+  }, []);
 
   const hideBodyHeader = useTemplateViewMode() || (isViewMode && (!showHeaderInPublic || !commonSettings.showHeaderInPublicApps));
 
@@ -534,10 +510,10 @@ function EditorView(props: EditorViewProps) {
     if (isViewMode) return uiComp.getView();
 
     return (
-      editorState.deviceType === "mobile" || editorState.deviceType === "tablet" ? (
+      deviceType === "mobile" || deviceType === "tablet" ? (
         <DeviceWrapper
-            deviceType={editorState.deviceType}
-            deviceOrientation={editorState.deviceOrientation}
+            deviceType={deviceType}
+            deviceOrientation={deviceOrientation}
           >
             <div id={PreviewContainerID}>
               {uiComp.getView()}
@@ -552,22 +528,10 @@ function EditorView(props: EditorViewProps) {
   }, [
     uiComp,
     isViewMode,
-    editorState.deviceType,
-    editorState.deviceOrientation,
+    deviceType,
+    deviceOrientation,
   ]);
 
-  useEffect(() => {
-    return () => {
-      setPanelStatus(DefaultPanelStatus);
-      setEditorModeStatus("both");
-      setShowShortcutList(false);
-      setMenuKey(SiderKey.State);
-      setHeight(undefined);
-      savePanelStatus(panelStatus);
-      saveEditorModeStatus(editorModeStatus);
-    };
-  }, []);
-
   const isLowCoderDomain = window.location.hostname === 'app.lowcoder.cloud';
   const isLocalhost = window.location.hostname === 'localhost';
   if (readOnly && hideHeader) {
@@ -620,12 +584,8 @@ function EditorView(props: EditorViewProps) {
   const showRight = panelStatus.right || showAppSnapshot;
 
   const clickMenu = (params: { key: string }) => {
-    let left = true;
-    if (panelStatus.left && params.key === menuKey) {
-      left = false;
-    }
-    setPanelStatus({ ...panelStatus, left });
-    savePanelStatus({ ...panelStatus, left });
+    // clicking the active menu entry collapses the left panel, otherwise open it
+    setPanel("left", !(panelStatus.left && params.key === menuKey));
     setMenuKey(params.key);
   };
 
@@ -661,8 +621,6 @@ function EditorView(props: EditorViewProps) {
           ? <PreviewHeader />
           : (
             <Header
-              togglePanel={togglePanel}
-              panelStatus={panelStatus}
               toggleEditorModeStatus={toggleEditorModeStatus}
               editorModeStatus={editorModeStatus}
             />
@@ -672,8 +630,6 @@ function EditorView(props: EditorViewProps) {
         {showNewUserGuide && <EditorTutorials />}
         <EditorGlobalHotKeys
           disabled={readOnly}
-          togglePanel={togglePanel}
-          panelStatus={panelStatus}
           toggleShortcutList={toggleShortcutList}
         >
           <Body>
@@ -781,7 +737,7 @@ function EditorView(props: EditorViewProps) {
                 <RightPanel
                   uiComp={uiComp}
                   onCompDrag={onCompDrag}
-                  showPropertyPane={editorState.showPropertyPane}
+                  showPropertyPane={showPropertyPane}
                   onTabChange={setShowPropertyPane} />
               )}
             </Suspense>
@@ -794,4 +750,3 @@ function EditorView(props: EditorViewProps) {
 export default React.memo(EditorView, (prevProps, newProps) => {
   return isEqual(prevProps, newProps);
 });
-
diff --git a/client/packages/lowcoder/src/pages/editor/right/PropertyView.tsx b/client/packages/lowcoder/src/pages/editor/right/PropertyView.tsx
index f051a28983..4e878c4fcd 100644
--- a/client/packages/lowcoder/src/pages/editor/right/PropertyView.tsx
+++ b/client/packages/lowcoder/src/pages/editor/right/PropertyView.tsx
@@ -6,6 +6,7 @@ import { SelectedComps } from "lowcoder-design";
 import { ScrollBar } from "lowcoder-design";
 import { ReactNode, useContext } from "react";
 import { trans } from "i18n";
+import { useEditorStore } from "comps/editorStore";
 
 const ScrollWrapper = (props: { children: ReactNode }) => (
   <ScrollBar>
@@ -20,8 +21,8 @@ interface PropertyViewProps {
 export default function PropertyView(props: PropertyViewProps) {
   const { uiComp } = props;
   const editorState = useContext(EditorContext);
-  const selectedCompNames = editorState.selectedCompNames;
-  const selectedComp = editorState.selectedComp();
+  const selectedCompNames = useEditorStore((state) => state.selectedCompNames);
+  const selectedComp = editorState.selectedComp(selectedCompNames);
   const moduleLayoutComp = uiComp?.getModuleLayoutComp();
 
   let propertyView;
diff --git a/client/packages/lowcoder/src/util/editoryHistory.ts b/client/packages/lowcoder/src/util/editoryHistory.ts
index 3f5a8496cb..09024255a0 100644
--- a/client/packages/lowcoder/src/util/editoryHistory.ts
+++ b/client/packages/lowcoder/src/util/editoryHistory.ts
@@ -4,7 +4,7 @@ import { Comp } from "lowcoder-core";
 import { CompContainer } from "comps/utils/useCompInstance";
 import { AppSnapshotContext } from "constants/applicationConstants";
 import _ from "lodash";
-import { Dispatch, useMemo } from "react";
+import { Dispatch, useEffect, useMemo } from "react";
 import { useDispatch } from "react-redux";
 import { createSnapshotAction } from "redux/reduxActions/appSnapshotActions";
 import { HistoryManager } from "util/historyManager";
@@ -20,33 +20,45 @@ export function useAppHistory(
 ) {
   const reduxDispatch = useDispatch();
 
-  return useMemo(() => {
+  // only reset the undo stack when the container itself changes, not on readOnly/blockEditing flips
+  const history = useMemo(() => {
     if (!compContainer) {
       return undefined;
     }
-    const history = new EditorHistory((x: any) => compContainer.setComp(x));
-    const addHistory = (actions: Array<CompAction>) => {
-      const comp = compContainer.comp;
-      if (!history.dslChanged(comp)) {
-        return;
-      }
-      // record editing history
-      history.debounceAdd(comp);
-      // svae dsl snapshot
-      history.saveSnapshot(comp, actions, reduxDispatch, appId);
-    };
+    return new EditorHistory((x: any) => compContainer.setComp(x));
+  }, [compContainer]);
+
+  // registered in an effect (with cleanup) so listeners don't pile up on compContainer across re-renders
+  useEffect(() => {
+    if (!compContainer || !history) {
+      return;
+    }
 
-    compContainer.addChangeListener((actions) => {
+    const handler = (actions?: Array<CompAction>) => {
       if (readOnly || !actions || blockEditing) {
         return;
       }
-      // maybe slow: comparing dsl by `toJson`
       // debounce may cause action missed when dispatching two actions continuously (such as add table, delete)
-      // tried with 100 comps in 1.5ms, resolve this if further slower
-      showCost("addHistory", () => addHistory(actions));
-    });
-    return history;
-  }, [appId, compContainer, reduxDispatch, readOnly, blockEditing]);
+      showCost("addHistory", () => {
+        const comp = compContainer.comp;
+        const jsonValue = history.dslChanged(comp);
+        if (jsonValue === false) {
+          return;
+        }
+        // record editing history
+        history.debounceAdd(comp);
+        // save dsl snapshot
+        history.saveSnapshot(comp, jsonValue, actions, reduxDispatch, appId);
+      });
+    };
+
+    compContainer.addChangeListener(handler);
+    return () => {
+      compContainer.removeChangeListener(handler);
+    };
+  }, [compContainer, history, readOnly, blockEditing, reduxDispatch, appId]);
+
+  return history;
 }
 
 /**
@@ -117,8 +129,10 @@ export class EditorHistory {
     this.setComp = setComp;
   }
 
-  dslChanged(curComp: Comp) {
-    const curJson = JSON.stringify(curComp.toJsonValue());
+  // returns the new JSON value if the DSL changed, or false otherwise -- reuse it instead of re-serializing
+  dslChanged(curComp: Comp): JSONValue | false {
+    const curJsonValue = curComp.toJsonValue();
+    const curJson = JSON.stringify(curJsonValue);
     let dslChanged = false;
     if (this.prevDslStr && this.prevDslStr !== curJson) {
       dslChanged = true;
@@ -129,7 +143,7 @@ export class EditorHistory {
     }
     this.prevComp = curComp;
     this.prevDslStr = curJson;
-    return dslChanged;
+    return dslChanged ? curJsonValue : false;
   }
 
   debounceAdd = _.debounce((comp: Comp) => {
@@ -188,12 +202,13 @@ export class EditorHistory {
 
   saveSnapshot(
     comp: Comp,
+    jsonValue: JSONValue,
     actions: CompAction[],
     reduxDispatch: Dispatch<any>,
     applicationId: string
   ) {
     const operations = actions.flatMap((a) => getSnapshotOperations(comp, a));
     operations.forEach((o) => this.operationQueue.push(o));
-    this.doSaveSnapshot(comp.toJsonValue(), reduxDispatch, applicationId);
+    this.doSaveSnapshot(jsonValue, reduxDispatch, applicationId);
   }
 }
diff --git a/client/packages/lowcoder/src/util/localStorageUtil.ts b/client/packages/lowcoder/src/util/localStorageUtil.ts
index 6522733452..63eaade7a8 100644
--- a/client/packages/lowcoder/src/util/localStorageUtil.ts
+++ b/client/packages/lowcoder/src/util/localStorageUtil.ts
@@ -1,6 +1,6 @@
-import { PanelStatus } from "pages/common/header";
-import { DisabledCollisionStatus as DisabledCollisionStatus } from "pages/editor/LeftLayersContent";
-import { EditorModeStatus } from "pages/common/header";
+import type { PanelStatus } from "pages/common/header";
+import type { DisabledCollisionStatus as DisabledCollisionStatus } from "pages/editor/LeftLayersContent";
+import type { EditorModeStatus } from "pages/common/header";
 import log from "loglevel";
 import { JSONValue } from "util/jsonTypes";
 
diff --git a/client/yarn.lock b/client/yarn.lock
index 7e563bc56e..fadf2a1ab5 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -11873,6 +11873,20 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"es-toolkit@npm:^1.39.6":
+  version: 1.50.0
+  resolution: "es-toolkit@npm:1.50.0"
+  dependenciesMeta:
+    "@trivago/prettier-plugin-sort-imports@4.3.0":
+      unplugged: true
+    prettier-plugin-sort-re-exports@0.0.1:
+      unplugged: true
+    vitepress-plugin-sandpack@1.1.4:
+      unplugged: true
+  checksum: f75c8ee986190b84a07eb3c96c28285e357a95baca123762675f717a542aa56ecbfedaf0d722bd2e2d88475da8e194c36fa9ee21ebb91e4c7b482bfdf1e13275
+  languageName: node
+  linkType: hard
+
 "esbuild@npm:^0.18.10":
   version: 0.18.20
   resolution: "esbuild@npm:0.18.20"
@@ -16843,7 +16857,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     react-quill-new: ^3.4.6
     react-redux: ^7.2.6
     react-resizable: ^3.0.4
-    react-resize-detector: ^12.0.2
+    react-resize-detector: ^12.3.0
     react-router: ^5.2.1
     react-router-dom: ^5.3.0
     react-signature-canvas: ^1.0.6
@@ -16885,6 +16899,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     y-websocket: ^3.0.0
     yjs: ^13.6.27
     zod: ^3.25.76
+    zustand: ^5.0.14
   languageName: unknown
   linkType: soft
 
@@ -20929,14 +20944,14 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"react-resize-detector@npm:^12.0.2":
-  version: 12.0.2
-  resolution: "react-resize-detector@npm:12.0.2"
+"react-resize-detector@npm:^12.3.0":
+  version: 12.3.0
+  resolution: "react-resize-detector@npm:12.3.0"
   dependencies:
-    lodash: ^4.17.21
+    es-toolkit: ^1.39.6
   peerDependencies:
     react: ^18.0.0 || ^19.0.0
-  checksum: 44f8adb5841c78f597894b9d3888acb651f797c0ffba553a8dc038759f9b7ed5d982497427a4e998d29a9bc983e795284c8bae984b2232579e3f9faa10e438a6
+  checksum: c6f98a23fcefd1737c75fabce95af7d958ab4f38fb96be1150e8bee7c91267b8e1d75d84491ce0c3366c051ef20686d788506f577430d964ed2aed0b51c2d459
   languageName: node
   linkType: hard
 
@@ -25957,6 +25972,27 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"zustand@npm:^5.0.14":
+  version: 5.0.14
+  resolution: "zustand@npm:5.0.14"
+  peerDependencies:
+    "@types/react": ">=18.0.0"
+    immer: ">=9.0.6"
+    react: ">=18.0.0"
+    use-sync-external-store: ">=1.2.0"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    immer:
+      optional: true
+    react:
+      optional: true
+    use-sync-external-store:
+      optional: true
+  checksum: 9b660a4cd510f1c0512a71cecbe6a03ce0c353da93391c83dbc4d4904d7d1b45ecf44791e235bea514450ee50ff771cabf45a9a49edeec44a5886a5cdf1a7d3d
+  languageName: node
+  linkType: hard
+
 "zwitch@npm:^2.0.0":
   version: 2.0.4
   resolution: "zwitch@npm:2.0.4"