[autofix.ci] apply automated fixes

Author: autofix-ci[bot]

packages/applet/src/components/state/RootStateViewer.vue

@@ -50,7 +50,7 @@ const { expanded, toggleExpanded } = useToggleExpanded(props.expandedStateId)
         />
         <!-- placeholder -->
         <span v-else pl5 />
-        <span font-state-field text-3.5 text-hex-a3a3a3>
+        <span text-3.5 text-hex-a3a3a3 font-state-field>
           {{ key }}
         </span>
       </div>

packages/applet/src/components/state/StateFieldViewer.vue

@@ -207,7 +207,7 @@ async function submitDrafting() {
   <div>
     <div
       ref="containerRef"
-      class="font-state-field flex items-center text-3.5"
+      class="flex items-center text-3.5 font-state-field"
       :class="[hasChildren && 'cursor-pointer hover:(bg-active)']"
       :style="{ paddingLeft: `${depth * 15 + 4}px` }"
       @click="toggleExpanded(`${depth}-${index}`)"
@@ -240,7 +240,7 @@ async function submitDrafting() {
         </template>
       </VueButton>
       <div v-if="draftingNewProp.enable" :style="{ paddingLeft: `${(depth + 1) * 15 + 4}px` }">
-        <span overflow-hidden text-ellipsis whitespace-nowrap state-key>
+        <span state-key overflow-hidden text-ellipsis whitespace-nowrap>
           <StateFieldInputEditor v-model="draftingNewProp.key" :show-actions="false" />
         </span>
         <span mx-1>:</span>

packages/applet/src/components/tree/TreeViewer.vue

@@ -53,7 +53,7 @@ function select(id: string) {
       />
       <!-- placeholder -->
       <span v-else pl5 />
-      <span font-state-field text-3.5>
+      <span text-3.5 font-state-field>
         <span v-if="withTag" class="text-gray-400 dark:text-gray-600 group-hover:(text-white op50) [.active_&]:(op50 text-white!)">&lt;</span>
         <span group-hover:text-white class="ws-nowrap [.active_&]:(text-white)">{{ normalizeLabel(item) }}</span>
         <!-- @vue-expect-error skip type check -->

packages/applet/src/modules/components/index.vue

@@ -447,7 +447,7 @@ function closeComponentRenderCode() {
         <div class="h-full flex flex-col p2">
           <div class="flex py2">
             <!-- component name -->
-            <span v-if="activeTreeNode?.name" class="font-state-field flex items-center px-1 text-3.5">
+            <span v-if="activeTreeNode?.name" class="flex items-center px-1 text-3.5 font-state-field">
               <span class="text-gray-400 dark:text-gray-600">&lt;</span>
               <span group-hover:text-white class="max-w-40 of-hidden text-ellipsis ws-nowrap [.active_&]:(text-white)">{{ activeTreeNode.name }}</span>
               <span class="text-gray-400 dark:text-gray-600">&gt;</span>