Preserve border sub sections state

apps/builder/app/builder/features/style-panel/sections/borders/border-property.tsx

@@ -13,7 +13,8 @@ import type { RenderCategoryProps } from "../../style-sections";
 import { toValue } from "@webstudio-is/css-engine";
 import { deleteAllProperties, setAllProperties } from "./border-utils";
 import type { StyleProperty, UnitValue } from "@webstudio-is/css-data";
-import { type ReactNode, useState } from "react";
+import { type ReactNode } from "react";
+import { useSelectedInstanceKv } from "../../shared/instances-kv";
 
 const borderPropertyStyleValueDefault: UnitValue = {
   type: "unit",
@@ -52,19 +53,18 @@ export const BorderProperty = ({
       )
     ).size === 1;
 
-  // If individualModeIcon is not defined, we do not want to display individual properties at all.
-  const [showIndividualMode, setShowIndividualMode] = useState(
-    () =>
-      allPropertyValuesAreEqual === false && individualModeIcon !== undefined
-  );
-
   /**
    * We do not use shorthand properties such as borderWidth or borderRadius in our code.
    * However, in the UI, we can display a single field, and in that case, we can use any property
    * from the shorthand property set and pass it instead.
    **/
   const firstPropertyName = borderProperties[0];
 
+  const [showIndividualMode, setShowIndividualMode] = useSelectedInstanceKv(
+    `${firstPropertyName}-showIndividualMode`,
+    allPropertyValuesAreEqual === false && individualModeIcon !== undefined
+  );
+
   const { items: borderPropertyItems } = styleConfigByName(firstPropertyName);
 
   const borderWidthKeywords = borderPropertyItems.map((item) => ({

apps/builder/app/builder/features/style-panel/shared/instances-kv.ts

@@ -0,0 +1,34 @@
+import { useStore } from "@nanostores/react";
+import { map } from "nanostores";
+import { useCallback } from "react";
+import { selectedInstanceSelectorStore } from "~/shared/nano-states";
+
+const instancesKv = map<Record<string, unknown>>({});
+
+/**
+ * This code creates a selected instance key-value store that maintains instance-specific state for a UI.
+ * It differs from useState in that it uses defaultValue instead of initialValue as the second parameter,
+ * allowing the default UI behavior to be used until the user modifies the state.
+ */
+export const useSelectedInstanceKv = <T>(key: string, defaultValue: T) => {
+  const instanceSelector = useStore(selectedInstanceSelectorStore);
+  const keyInstanceSelector = instanceSelector
+    ? `${instanceSelector.join(",")}-${key}`
+    : `undefined-${key}`;
+
+  const mapStore = useStore(instancesKv, {
+    keys: [keyInstanceSelector],
+  });
+
+  const setValue = useCallback(
+    (value: T) => {
+      instancesKv.setKey(keyInstanceSelector, value);
+    },
+    [keyInstanceSelector]
+  );
+
+  return [
+    (mapStore[keyInstanceSelector] as T) ?? defaultValue,
+    setValue,
+  ] as const;
+};