diff --git a/spx-gui/src/components/community/user/UserItem.vue b/spx-gui/src/components/community/user/UserItem.vue
index 481cdfc03..ba61ae795 100644
--- a/spx-gui/src/components/community/user/UserItem.vue
+++ b/spx-gui/src/components/community/user/UserItem.vue
@@ -20,7 +20,7 @@ const userRoute = computed(() => getUserPageRoute(props.user.username))
     <UserAvatar class="avatar" :user="user.username" />
     <RouterUILink class="name" type="boring" :to="userRoute">{{ user.displayName }}</RouterUILink>
     <UserJoinedAt class="joined-at" :time="user.createdAt" />
-    <TextView class="description" :text="user.description" />
+    <TextView v-if="!!user.description" class="description" :text="user.description" />
     <FollowButton class="follow" :name="user.username" />
   </li>
 </template>
diff --git a/spx-gui/src/components/editor/code-editor/code-text-editor/tools/index.ts b/spx-gui/src/components/editor/code-editor/code-text-editor/tools/index.ts
index c9a34d14f..ca8b4ebe2 100644
--- a/spx-gui/src/components/editor/code-editor/code-text-editor/tools/index.ts
+++ b/spx-gui/src/components/editor/code-editor/code-text-editor/tools/index.ts
@@ -188,7 +188,7 @@ export const gameCategory: ToolCategory = {
     },
     {
       label: { en: 'Others', zh: '其他' },
-      tools: [spx.rand, gop.println]
+      tools: [spx.rand, gop.println, spx.getWidget]
     }
   ]
 }
@@ -253,6 +253,23 @@ export function getVariableCategory(project: Project): ToolCategory {
     })
   })
 
+  groups.push({
+    label: { en: 'Widgets', zh: '控件' },
+    tools: project.stage.widgets.map((widget) => {
+      const keyword = `"${widget.name}"`
+      return {
+        type: ToolType.variable,
+        target: ToolContext.all,
+        keyword,
+        desc: { en: `Widget "${widget.name}"`, zh: `控件 ${widget.name}` },
+        usage: {
+          sample: keyword,
+          insertText: keyword
+        }
+      }
+    })
+  })
+
   if (project.selectedSprite != null) {
     groups.push({
       label: {
diff --git a/spx-gui/src/components/editor/code-editor/code-text-editor/tools/spx.ts b/spx-gui/src/components/editor/code-editor/code-text-editor/tools/spx.ts
index 00b533686..f2ceb4b19 100644
--- a/spx-gui/src/components/editor/code-editor/code-text-editor/tools/spx.ts
+++ b/spx-gui/src/components/editor/code-editor/code-text-editor/tools/spx.ts
@@ -974,6 +974,20 @@ export const exit: Tool = {
   }
 }
 
+export const getWidget: Tool = {
+  type: ToolType.function,
+  callEffect: ToolCallEffect.read,
+  target: ToolContext.all,
+  keyword: 'getWidget',
+  desc: { en: 'Get the widget by given name', zh: '通过指定名称获取控件' },
+  usage: {
+    sample: 'getWidget(Monitor, "monitor1")',
+    insertText: 'getWidget(${1:Monitor}, ${2:name})'
+  }
+}
+
+// TODO: definition for widget methods
+
 function defineConst(name: string, desc: LocaleMessage): Tool {
   name = name[0].toUpperCase() + name.slice(1) // it's strange, but required
   return {
diff --git a/spx-gui/src/components/editor/preview/EditorPreview.vue b/spx-gui/src/components/editor/preview/EditorPreview.vue
index 27e5ff655..138589f05 100644
--- a/spx-gui/src/components/editor/preview/EditorPreview.vue
+++ b/spx-gui/src/components/editor/preview/EditorPreview.vue
@@ -19,15 +19,19 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import { UICard, UICardHeader, UIButton, UIFullScreenModal } from '@/components/ui'
 import StageViewer from './stage-viewer/StageViewer.vue'
-import RunnerContainer from '@/components/project/runner/RunnerContainer.vue'
+import RunnerContainer, { preload as preloadRunner } from '@/components/project/runner/RunnerContainer.vue'
 
 let show = ref(false)
 
 const editorCtx = useEditorCtx()
+
+onMounted(() => {
+  preloadRunner()
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue b/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
index fc83fbf98..b6962765d 100644
--- a/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
+++ b/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
@@ -1,6 +1,12 @@
 <template>
   <section class="wrapper">
-    <UIDropdown trigger="manual" :visible="activeSetting != null" placement="top" @click-outside="handleClickOutside">
+    <UIDropdown
+      trigger="manual"
+      :visible="activeSetting != null"
+      placement="top"
+      @click-outside="handleClickOutside"
+      @update:visible="handleDropdownVisibleUpdate"
+    >
       <template #trigger>
         <ul class="settings">
           <li class="setting" :class="{ active: activeSetting === 'duration' }" @click="handleSummaryClick('duration')">
@@ -75,6 +81,10 @@ function handleClickOutside(e: MouseEvent) {
   if (isInPopup(e.target as HTMLElement | null)) return
   activeSetting.value = null
 }
+
+function handleDropdownVisibleUpdate(visible: boolean) {
+  if (!visible) activeSetting.value = null
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/spx-gui/src/components/project/runner/IframeDisplay.vue b/spx-gui/src/components/project/runner/IframeDisplay.vue
index e8dd679ea..6b1502a53 100644
--- a/spx-gui/src/components/project/runner/IframeDisplay.vue
+++ b/spx-gui/src/components/project/runner/IframeDisplay.vue
@@ -1,6 +1,34 @@
 <template>
   <iframe ref="iframe" class="iframe" frameborder="0" src="about:blank" />
 </template>
+
+<script lang="ts">
+import { ref, watch } from 'vue'
+import rawRunnerHtml from '@/assets/ispx/runner.html?raw'
+import wasmExecUrl from '@/assets/wasm_exec.js?url'
+import wasmUrl from '@/assets/ispx/main.wasm?url'
+
+function addPrefetchLink(url: string) {
+  // Use `prefetch` instead of `preload`:
+  // * `preload` indicates higher priority than `prefetch`. Preloaded content are expected to be used soon. For example, chrome will warn if the preloaded content is not used within 3 or 5 seconds. While project here will not be runned until the user clicks some "run" button.
+  // * `preload` results are not shared across different documents, while the iframe content is a different document. The "preloading" is meaningful only when the HTTP cache is shared, which is more like the case of `prefetch`.
+  const link = document.createElement('link')
+  link.rel = 'prefetch'
+  link.href = url
+  link.crossOrigin = 'anonymous'
+  link.onload = link.onerror = () => {
+    document.head.removeChild(link)
+  }
+  document.head.appendChild(link)
+}
+
+// preload resources (for example, wasm files) to accelerate the loading
+export function preload() {
+  addPrefetchLink(wasmExecUrl)
+  addPrefetchLink(wasmUrl)
+}
+</script>
+
 <script setup lang="ts">
 const emit = defineEmits<{
   console: [type: 'log' | 'warn', args: unknown[]]
@@ -12,12 +40,6 @@ interface IframeWindow extends Window {
   console: typeof console
 }
 
-import { ref } from 'vue'
-import rawRunnerHtml from '@/assets/ispx/runner.html?raw'
-import wasmExecUrl from '@/assets/wasm_exec.js?url'
-import wasmUrl from '@/assets/ispx/main.wasm?url'
-import { watch } from 'vue'
-
 const props = defineProps<{ zipData: ArrayBuffer | Uint8Array }>()
 
 const iframe = ref<HTMLIFrameElement>()
diff --git a/spx-gui/src/components/project/runner/ProjectRunner.vue b/spx-gui/src/components/project/runner/ProjectRunner.vue
index 05a11ca2f..1bfb0090b 100644
--- a/spx-gui/src/components/project/runner/ProjectRunner.vue
+++ b/spx-gui/src/components/project/runner/ProjectRunner.vue
@@ -6,13 +6,17 @@
   </div>
 </template>
 
+<script lang="ts">
+import IframeDisplay, { preload } from './IframeDisplay.vue'
+export { preload }
+</script>
+
 <script lang="ts" setup>
 import { onUnmounted, ref } from 'vue'
 import { registerPlayer } from '@/utils/player-registry'
 import { useFileUrl } from '@/utils/file'
 import { Project } from '@/models/project'
 import { UIImg, UILoading } from '@/components/ui'
-import IframeDisplay from './IframeDisplay.vue'
 
 const props = defineProps<{ project: Project }>()
 
diff --git a/spx-gui/src/components/project/runner/RunnerContainer.vue b/spx-gui/src/components/project/runner/RunnerContainer.vue
index 9525e599d..e7fcf97f2 100644
--- a/spx-gui/src/components/project/runner/RunnerContainer.vue
+++ b/spx-gui/src/components/project/runner/RunnerContainer.vue
@@ -48,11 +48,16 @@
     </div>
   </div>
 </template>
+
+<script lang="ts">
+import ProjectRunner, { preload } from './ProjectRunner.vue'
+export { preload }
+</script>
+
 <script setup lang="ts">
 import { onMounted, ref, type CSSProperties, watch, nextTick } from 'vue'
 import dayjs from 'dayjs'
 import type { Project } from '@/models/project'
-import ProjectRunner from './ProjectRunner.vue'
 import { usePublishProject } from '@/components/project'
 import { UIButton, UIIcon, UIModalClose } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
diff --git a/spx-gui/src/components/ui/UIDropdown.vue b/spx-gui/src/components/ui/UIDropdown.vue
index 30d87deb6..70a0213ff 100644
--- a/spx-gui/src/components/ui/UIDropdown.vue
+++ b/spx-gui/src/components/ui/UIDropdown.vue
@@ -32,7 +32,7 @@ export function useDropdown() {
 </script>
 
 <script setup lang="ts">
-import { inject, provide, ref, type InjectionKey, computed, type CSSProperties } from 'vue'
+import { inject, provide, ref, type InjectionKey, computed, type CSSProperties, watchEffect } from 'vue'
 import { NPopover } from 'naive-ui'
 import { usePopupContainer } from './utils'
 
@@ -89,6 +89,13 @@ function handleUpdateShow(show: boolean) {
   emit('update:visible', show)
 }
 
+function setVisible(visible: boolean) {
+  // `NPopover.setShow` sets show status in uncontrolled mode without triggering the `on-update:show` callback.
+  // So we need to manually trigger the `on-update:show` callback.
+  nPopoverRef.value?.setShow(visible)
+  handleUpdateShow(visible)
+}
+
 function handleClickOutside(e: MouseEvent) {
   const triggerEl = nPopoverRef.value?.binderInstRef?.targetRef
   // naive-ui triggers `clickoutside` event when trigger-element clicked, so we need to fix it
@@ -96,14 +103,19 @@ function handleClickOutside(e: MouseEvent) {
   emit('clickOutside', e)
 }
 
-provide(dropdownCtrlKey, {
-  setVisible(visible) {
-    // `NPopover.setShow` sets show status in uncontrolled mode without triggering the `on-update:show` callback.
-    // So we need to manually trigger the `on-update:show` callback.
-    nPopoverRef.value?.setShow(visible)
-    handleUpdateShow(visible)
+watchEffect((onCleanup) => {
+  // Currently, pressing the `Escape` key closes all modals and dropdowns.
+  // TODO: Ideally, only the topmost modal or dropdown should be closed.
+  function handleDocumentKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') setVisible(false)
   }
+  window.addEventListener('keydown', handleDocumentKeydown)
+  onCleanup(() => {
+    window.removeEventListener('keydown', handleDocumentKeydown)
+  })
 })
+
+provide(dropdownCtrlKey, { setVisible })
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/ui/modal/UIDropdownModal.vue b/spx-gui/src/components/ui/modal/UIDropdownModal.vue
index 7655abec2..07d67d43d 100644
--- a/spx-gui/src/components/ui/modal/UIDropdownModal.vue
+++ b/spx-gui/src/components/ui/modal/UIDropdownModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="wrapper">
+  <form class="wrapper" @submit.prevent="emit('confirm')">
     <header class="header">
       <h4 class="title">{{ title }}</h4>
       <UIModalClose class="close" @click="emit('cancel')" />
@@ -12,11 +12,11 @@
       <UIButton type="boring" @click="emit('cancel')">
         {{ $t({ en: 'Cancel', zh: '取消' }) }}
       </UIButton>
-      <UIButton type="primary" @click="emit('confirm')">
+      <UIButton type="primary" html-type="submit">
         {{ $t({ en: 'Confirm', zh: '确认' }) }}
       </UIButton>
     </footer>
-  </section>
+  </form>
 </template>
 <script setup lang="ts">
 import { UIButton, UIDivider } from '@/components/ui'
diff --git a/spx-gui/src/models/project/index.test.ts b/spx-gui/src/models/project/index.test.ts
index 127c9f0be..53a4c2ae4 100644
--- a/spx-gui/src/models/project/index.test.ts
+++ b/spx-gui/src/models/project/index.test.ts
@@ -8,6 +8,7 @@ import { fromText, type Files } from '../common/file'
 import { AutoSaveMode, AutoSaveToCloudState, Project } from '.'
 import * as cloudHelper from '../common/cloud'
 import * as localHelper from '../common/local'
+import * as hashHelper from '../common/hash'
 import { Cancelled } from '@/utils/exception'
 
 function mockFile(name = 'mocked') {
@@ -31,6 +32,10 @@ function makeProject() {
 }
 
 describe('Project', () => {
+  const autoSaveToCloudDelay = 1500 + 1 // 1.5s + 1ms
+  const retryAutoSaveToCloudDelay = 5000 + 1 // 5s + 1ms
+  const autoSaveToLocalCacheDelay = 1000 + 1 // 1s + 1ms
+
   beforeEach(() => {
     vi.useFakeTimers()
   })
@@ -162,11 +167,12 @@ describe('Project', () => {
 
     vi.spyOn(cloudHelper, 'saveFile').mockImplementation(async () => 'data:;,')
 
+    const cloudHelperSaveDelay = 1000 // 1s
     const cloudSaveMock = vi.spyOn(cloudHelper, 'save').mockImplementation((metadata, files, signal) => {
       return new Promise((resolve, reject) => {
         const timeoutId = setTimeout(() => {
           resolve({ metadata, files })
-        }, 1000)
+        }, cloudHelperSaveDelay)
 
         if (signal) {
           signal.addEventListener('abort', () => {
@@ -177,14 +183,17 @@ describe('Project', () => {
       })
     })
 
-    const firstSavePromise = project.saveToCloud()
-    await vi.advanceTimersByTimeAsync(500)
+    const promise1 = project.saveToCloud()
+    await flushPromises()
+
+    vi.advanceTimersByTime(cloudHelperSaveDelay / 2)
 
-    const secondSavePromise = project.saveToCloud()
-    vi.runOnlyPendingTimersAsync()
+    const promise2 = project.saveToCloud()
+    await expect(promise1).rejects.toThrow(Cancelled)
 
-    await expect(firstSavePromise).rejects.toThrow(Cancelled)
-    await expect(secondSavePromise).resolves.not.toThrow()
+    vi.advanceTimersByTime(cloudHelperSaveDelay + 1)
+
+    await expect(promise2).resolves.not.toThrow()
     expect(cloudSaveMock).toHaveBeenCalledTimes(2)
   })
 
@@ -199,49 +208,55 @@ describe('Project', () => {
       })
     })
 
-    const firstSavePromise = project.saveToCloud()
-    await expect(firstSavePromise).resolves.not.toThrow()
+    const promise1 = project.saveToCloud()
+    await expect(promise1).resolves.not.toThrow()
 
-    const secondSavePromise = project.saveToCloud()
-    await expect(secondSavePromise).resolves.not.toThrow()
+    const promise2 = project.saveToCloud()
+    await expect(promise2).resolves.not.toThrow()
 
     expect(cloudSaveMock).toHaveBeenCalledTimes(2)
   })
 
   // https://github.com/goplus/builder/pull/794#discussion_r1728120369
   it('should handle failed auto-save-to-cloud correctly', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+    vi.spyOn(hashHelper, 'hashFiles').mockResolvedValue('hash') // prevent watcher from triggering auto-save-to-cloud
     vi.spyOn(cloudHelper, 'saveFile').mockImplementation(async () => 'data:;,')
     const cloudSaveMock = vi.spyOn(cloudHelper, 'save').mockRejectedValue(new Error('save failed'))
     const localSaveMock = vi.spyOn(localHelper, 'save').mockResolvedValue(undefined)
     const localClearMock = vi.spyOn(localHelper, 'clear').mockResolvedValue(undefined)
 
     const project = makeProject()
+    project['filesHash'] = await hashHelper.hashFiles({})
+    project['lastSyncedFilesHash'] = project['filesHash']
 
     project.setAutoSaveMode(AutoSaveMode.Cloud)
     project['startAutoSaveToCloud']('localCacheKey')
-    await flushPromises() // flush immediate watchers
+    await flushPromises() // finish immediate watchers
     const autoSaveToCloud = project['autoSaveToCloud']
     expect(autoSaveToCloud).toBeTruthy()
 
     project['filesHash'] = 'newHash'
-    project['lastSyncedFilesHash'] = 'hash'
     expect(project.hasUnsyncedChanges).toBe(true)
 
     autoSaveToCloud?.()
     expect(project.autoSaveToCloudState).toBe(AutoSaveToCloudState.Pending)
     expect(project.hasUnsyncedChanges).toBe(true)
 
-    await vi.runOnlyPendingTimersAsync()
+    vi.advanceTimersByTime(autoSaveToCloudDelay)
+    expect(project.autoSaveToCloudState).toBe(AutoSaveToCloudState.Saving)
+    expect(project.hasUnsyncedChanges).toBe(true)
+
     await flushPromises()
     expect(project.autoSaveToCloudState).toBe(AutoSaveToCloudState.Failed)
     expect(project.hasUnsyncedChanges).toBe(true)
     expect(cloudSaveMock).toHaveBeenCalledTimes(1)
     expect(localSaveMock).toHaveBeenCalledTimes(1)
 
-    project['lastSyncedFilesHash'] = project['filesHash']
+    project['filesHash'] = project['lastSyncedFilesHash']
     expect(project.hasUnsyncedChanges).toBe(false)
 
-    await vi.runOnlyPendingTimersAsync()
+    vi.advanceTimersByTime(retryAutoSaveToCloudDelay)
     await flushPromises()
     expect(project.autoSaveToCloudState).toBe(AutoSaveToCloudState.Saved)
     expect(project.hasUnsyncedChanges).toBe(false)
@@ -251,18 +266,20 @@ describe('Project', () => {
   })
 
   it('should cancel pending auto-save-to-cloud when project is disposed', async () => {
+    vi.spyOn(hashHelper, 'hashFiles').mockResolvedValue('hash') // prevent watcher from triggering auto-save-to-cloud
     const cloudSaveMock = vi.spyOn(cloudHelper, 'save').mockRejectedValue(undefined)
 
     const project = makeProject()
+    project['filesHash'] = await hashHelper.hashFiles({})
+    project['lastSyncedFilesHash'] = project['filesHash']
 
     project.setAutoSaveMode(AutoSaveMode.Cloud)
     project['startAutoSaveToCloud']('localCacheKey')
-    await flushPromises() // flush immediate watchers
+    await flushPromises() // finish immediate watchers
     const autoSaveToCloud = project['autoSaveToCloud']
     expect(autoSaveToCloud).toBeTruthy()
 
     project['filesHash'] = 'newHash'
-    project['lastSyncedFilesHash'] = 'hash'
     expect(project.hasUnsyncedChanges).toBe(true)
 
     autoSaveToCloud?.()
@@ -270,7 +287,7 @@ describe('Project', () => {
     expect(project.hasUnsyncedChanges).toBe(true)
 
     project.dispose()
-    await vi.runOnlyPendingTimersAsync()
+    vi.advanceTimersByTime(autoSaveToCloudDelay)
     await flushPromises()
     expect(project.autoSaveToCloudState).toBe(AutoSaveToCloudState.Pending)
     expect(project.hasUnsyncedChanges).toBe(true)
@@ -284,14 +301,14 @@ describe('Project', () => {
 
     project.setAutoSaveMode(AutoSaveMode.LocalCache)
     project['startAutoSaveToLocalCache']('localCacheKey')
-    await flushPromises() // flush immediate watchers
+    await flushPromises() // finish immediate watchers
     const autoSaveToLocalCache = project['autoSaveToLocalCache']
     expect(autoSaveToLocalCache).toBeTruthy()
 
     autoSaveToLocalCache?.()
 
     project.dispose()
-    await vi.runOnlyPendingTimersAsync()
+    vi.advanceTimersByTime(autoSaveToLocalCacheDelay)
     await flushPromises()
     expect(localSaveMock).toHaveBeenCalledTimes(0)
   })
diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
index b2b002bd6..3de9713c7 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/pages/community/project.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useMessageHandle } from '@/utils/exception'
 import { useQuery } from '@/utils/query'
@@ -29,7 +29,7 @@ import {
 import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
 import ProjectsSection from '@/components/community/ProjectsSection.vue'
 import ProjectItem from '@/components/project/ProjectItem.vue'
-import ProjectRunner from '@/components/project/runner/ProjectRunner.vue'
+import ProjectRunner, { preload as preloadRunner } from '@/components/project/runner/ProjectRunner.vue'
 import RemixedFrom from '@/components/community/project/RemixedFrom.vue'
 import OwnerInfo from '@/components/community/project/OwnerInfo.vue'
 import { useCreateProject, useRemoveProject, useShareProject, useUnpublishProject } from '@/components/project'
@@ -267,6 +267,10 @@ const remixesRet = useQuery(
   },
   { en: 'Failed to load projects', zh: '加载失败' }
 )
+
+onMounted(() => {
+  preloadRunner()
+})
 </script>
 
 <template>
diff --git a/spx-gui/src/widgets/spx-runner/SpxRunner.ce.vue b/spx-gui/src/widgets/spx-runner/SpxRunner.ce.vue
index 338ec8da0..a06b319dd 100644
--- a/spx-gui/src/widgets/spx-runner/SpxRunner.ce.vue
+++ b/spx-gui/src/widgets/spx-runner/SpxRunner.ce.vue
@@ -29,8 +29,8 @@
   </div>
 </template>
 <script setup lang="ts">
-import ProjectRunner from '@/components/project/runner/ProjectRunner.vue'
-import { ref, watch } from 'vue'
+import ProjectRunner, { preload as preloadRunner } from '@/components/project/runner/ProjectRunner.vue'
+import { onMounted, ref, watch } from 'vue'
 import { Project, fullName } from '@/models/project'
 import { shallowRef } from 'vue'
 const props = defineProps<{ owner?: string; name?: string }>()
@@ -71,6 +71,10 @@ const onStop = () => {
   run.value = false
   runner.value.stop()
 }
+
+onMounted(() => {
+  preloadRunner()
+})
 </script>
 <style lang="scss">
 .spx-runner-widget {