diff --git a/spx-gui/.env.prod b/spx-gui/.env.prod
new file mode 100644
index 000000000..855c321cd
--- /dev/null
+++ b/spx-gui/.env.prod
@@ -0,0 +1,11 @@
+# Config for env production
+
+# Casdoor configuration
+VITE_CASDOOR_ENDPOINT="https://acc.goplus.org"
+VITE_CASDOOR_CLIENT_ID="4ff910257e9cdd89b6b8"
+
+# Used not for authentication, but for fetching user profile
+VITE_CASDOOR_ORGANIZATION_NAME="built-in"
+VITE_CASDOOR_APP_NAME="application_stem"
+
+VITE_API_BASE_URL="https://builder.goplus.org/api"
diff --git a/spx-gui/src/apis/common/client.ts b/spx-gui/src/apis/common/client.ts
index 474b84339..bd75bfc37 100644
--- a/spx-gui/src/apis/common/client.ts
+++ b/spx-gui/src/apis/common/client.ts
@@ -11,6 +11,7 @@ export type RequestOptions = {
   headers?: Headers
   /** Timeout duration in milisecond, from request-sent to server-response-got */
   timeout?: number
+  signal?: AbortSignal
 }
 
 /** Response body when exception encountered for API calling */
@@ -74,6 +75,11 @@ export class Client {
     const req = await this.prepareRequest(url, payload, options)
     const timeout = options?.timeout ?? defaultTimeout
     const ctrl = new AbortController()
+    if (options?.signal != null) {
+      // TODO: Reimplement this using `AbortSignal.any()` once it is widely supported.
+      options.signal.throwIfAborted()
+      options.signal.addEventListener('abort', () => ctrl.abort(options.signal?.reason))
+    }
     const resp = await Promise.race([
       fetch(req, { signal: ctrl.signal }),
       new Promise<never>((_, reject) => setTimeout(() => reject(new TimeoutException()), timeout))
diff --git a/spx-gui/src/apis/project.ts b/spx-gui/src/apis/project.ts
index e573b2a93..f1c5c2712 100644
--- a/spx-gui/src/apis/project.ts
+++ b/spx-gui/src/apis/project.ts
@@ -30,8 +30,8 @@ export type ProjectData = {
 
 export type AddProjectParams = Pick<ProjectData, 'name' | 'isPublic' | 'files'>
 
-export function addProject(params: AddProjectParams) {
-  return client.post('/project', params) as Promise<ProjectData>
+export function addProject(params: AddProjectParams, signal?: AbortSignal) {
+  return client.post('/project', params, { signal }) as Promise<ProjectData>
 }
 
 export type UpdateProjectParams = Pick<ProjectData, 'isPublic' | 'files'>
@@ -40,8 +40,13 @@ function encode(owner: string, name: string) {
   return `${encodeURIComponent(owner)}/${encodeURIComponent(name)}`
 }
 
-export function updateProject(owner: string, name: string, params: UpdateProjectParams) {
-  return client.put(`/project/${encode(owner, name)}`, params) as Promise<ProjectData>
+export function updateProject(
+  owner: string,
+  name: string,
+  params: UpdateProjectParams,
+  signal?: AbortSignal
+) {
+  return client.put(`/project/${encode(owner, name)}`, params, { signal }) as Promise<ProjectData>
 }
 
 export function deleteProject(owner: string, name: string) {
diff --git a/spx-gui/src/components/asset/animation/GroupCostumesModal.vue b/spx-gui/src/components/asset/animation/GroupCostumesModal.vue
index 9fe8f3fda..6fef5d583 100644
--- a/spx-gui/src/components/asset/animation/GroupCostumesModal.vue
+++ b/spx-gui/src/components/asset/animation/GroupCostumesModal.vue
@@ -15,7 +15,7 @@
       <ul class="costume-list">
         <CostumeItem
           v-for="costume in props.sprite.costumes"
-          :key="costume.name"
+          :key="costume.id"
           :costume="costume"
           :selected="selectedCostumeSet.has(costume)"
           @click="handleCostumeClick(costume)"
diff --git a/spx-gui/src/components/asset/index.ts b/spx-gui/src/components/asset/index.ts
index 7e2a1bb8b..db52943a4 100644
--- a/spx-gui/src/components/asset/index.ts
+++ b/spx-gui/src/components/asset/index.ts
@@ -18,11 +18,11 @@ import { useI18n } from '@/utils/i18n'
 import { useNetwork } from '@/utils/network'
 
 function selectAsset(project: Project, asset: AssetModel | undefined) {
-  if (asset instanceof Sprite) project.select({ type: 'sprite', name: asset.name })
-  else if (asset instanceof Sound) project.select({ type: 'sound', name: asset.name })
+  if (asset instanceof Sprite) project.select({ type: 'sprite', id: asset.id })
+  else if (asset instanceof Sound) project.select({ type: 'sound', id: asset.id })
   else if (asset instanceof Backdrop) {
     project.select({ type: 'stage' })
-    project.stage.setDefaultBackdrop(asset.name)
+    project.stage.setDefaultBackdrop(asset.id)
   }
 }
 
@@ -71,6 +71,7 @@ export function useAddSpriteFromLocalFile() {
     }
     await project.history.doAction({ name: actionMessage }, async () => {
       project.addSprite(sprite)
+      await sprite.autoFitCostumes()
       await sprite.autoFit()
     })
     selectAsset(project, sprite)
@@ -89,9 +90,10 @@ export function useAddCostumeFromLocalFile() {
       title: actionMessage,
       confirmText: { en: 'Add', zh: '添加' }
     })
-    await project.history.doAction({ name: actionMessage }, () => {
+    await project.history.doAction({ name: actionMessage }, async () => {
       for (const costume of costumes) sprite.addCostume(costume)
-      sprite.setDefaultCostume(costumes[0].name)
+      await sprite.autoFitCostumes(costumes)
+      sprite.setDefaultCostume(costumes[0].id)
     })
   }
 }
diff --git a/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue b/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
index d1d702ecc..357aeba15 100644
--- a/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
+++ b/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
@@ -56,7 +56,7 @@
           <ul class="costume-list">
             <CostumeItem
               v-for="costume in costumes"
-              :key="costume.name"
+              :key="costume.id"
               :costume="costume"
               :selected="isCostumeSelected(costume)"
               @click="handleCostumeClick(costume)"
@@ -191,14 +191,14 @@ function handleMethodApplied(method: Method, output: File[]) {
   const idx = supportedMethods.value.findIndex((m) => m.value === method)
   // methods are applied in order, so we need to unapply the following methods, as thier inputs have changed
   outputs.splice(idx)
-  outputs.push(output)
+  outputs[idx] = output
   updateCostumes(output)
 }
 
 function handleMethodCancel(method: Method) {
   const idx = supportedMethods.value.findIndex((m) => m.value === method)
   outputs.splice(idx)
-  outputs.push(null)
+  outputs[idx] = null
   updateCostumes(getMethodInput(method))
 }
 
@@ -220,11 +220,11 @@ async function updateCostumes(files: File[]) {
 }
 
 function isCostumeSelected(costume: Costume) {
-  return selectedCostumes.some((a) => a.name === costume.name)
+  return selectedCostumes.some((a) => a.id === costume.id)
 }
 
 async function handleCostumeClick(costume: Costume) {
-  const index = selectedCostumes.findIndex((c) => c.name === costume.name)
+  const index = selectedCostumes.findIndex((c) => c.id === costume.id)
   if (index < 0) selectedCostumes.push(costume)
   else selectedCostumes.splice(index, 1)
 }
@@ -233,7 +233,11 @@ const handleConfirm = useMessageHandle(
   async () => {
     if (isOnline.value) {
       const files = selectedCostumes
-        .map((costume) => costume.export(''))
+        .map((costume) =>
+          costume.export({
+            basePath: ''
+          })
+        )
         .reduce((acc, [, files]) => ({ ...acc, ...files }), {})
       await saveFiles(files)
     }
@@ -288,7 +292,7 @@ watch(
   margin-bottom: -16px;
 }
 .footer-title {
-  color: --ui-color-title;
+  color: var(--ui-color-title);
 }
 .costume-wrapper {
   width: 100%;
diff --git a/spx-gui/src/components/editor/code-editor/CodeEditor.vue b/spx-gui/src/components/editor/code-editor/CodeEditor.vue
index 86aeb764f..f64b34d45 100644
--- a/spx-gui/src/components/editor/code-editor/CodeEditor.vue
+++ b/spx-gui/src/components/editor/code-editor/CodeEditor.vue
@@ -32,6 +32,7 @@
     <div class="code-text-editor-wrapper">
       <CodeTextEditor
         ref="codeTextEditor"
+        :file="file"
         :value="value"
         @update:value="(v) => emit('update:value', v)"
       />
@@ -87,6 +88,7 @@ import { useFileUrl } from '@/utils/file'
 withDefaults(
   defineProps<{
     loading?: boolean
+    file: string
     value: string
   }>(),
   {
diff --git a/spx-gui/src/components/editor/code-editor/code-text-editor/CodeTextEditor.vue b/spx-gui/src/components/editor/code-editor/code-text-editor/CodeTextEditor.vue
index 2bf619032..9a1647502 100644
--- a/spx-gui/src/components/editor/code-editor/code-text-editor/CodeTextEditor.vue
+++ b/spx-gui/src/components/editor/code-editor/code-text-editor/CodeTextEditor.vue
@@ -4,6 +4,29 @@
 <script lang="ts">
 let monaco: typeof import('monaco-editor')
 let editorCtx: EditorCtx // define `editorCtx` here so `getProject` in `initMonaco` can get the right `editorCtx.project`
+
+type EditorState = {
+  scrollLeft: number
+  scrollTop: number
+}
+
+/** Map from file-path to editor-state */
+const editorStates = new Map<string, EditorState>()
+
+function saveEditorState(file: string, editor: editor.IStandaloneCodeEditor) {
+  editorStates.set(file, {
+    scrollLeft: editor.getScrollLeft(),
+    scrollTop: editor.getScrollTop()
+  })
+}
+
+function resumeEditorState(file: string, editor: editor.IStandaloneCodeEditor) {
+  const state = editorStates.get(file)
+  editorStates.delete(file)
+  if (state == null) return
+  editor.setScrollLeft(state.scrollLeft)
+  editor.setScrollTop(state.scrollTop)
+}
 </script>
 <script setup lang="ts">
 import { ref, shallowRef, watch, watchEffect } from 'vue'
@@ -17,6 +40,7 @@ import { initMonaco, defaultThemeName } from './monaco'
 import { useLocalStorage } from '@/utils/utils'
 
 const props = defineProps<{
+  file: string
   value: string
 }>()
 const emit = defineEmits<{
@@ -127,21 +151,22 @@ watchEffect(async (onClenaup) => {
   })
 
   monacoEditor.value = editor
+  resumeEditorState(props.file, editor)
 
   onClenaup(() => {
+    saveEditorState(props.file, editor)
     editor.dispose()
   })
 })
 
 watch(
-  () => props.value,
-  (val) => {
-    if (monaco && monacoEditor.value) {
-      const editorValue = monacoEditor.value.getValue()
-      if (val !== editorValue) {
-        monacoEditor.value.setValue(val)
-      }
-    }
+  () => [props.file, props.value],
+  ([file, value], [oldFile]) => {
+    const editor = monacoEditor.value
+    if (editor == null) return
+    if (file !== oldFile) saveEditorState(oldFile, editor)
+    if (value !== editor.getValue()) editor.setValue(value)
+    if (file !== oldFile) resumeEditorState(file, editor)
   }
 )
 
diff --git a/spx-gui/src/components/editor/panels/EditorPanels.vue b/spx-gui/src/components/editor/panels/EditorPanels.vue
index 2810d3799..04c697808 100644
--- a/spx-gui/src/components/editor/panels/EditorPanels.vue
+++ b/spx-gui/src/components/editor/panels/EditorPanels.vue
@@ -34,18 +34,18 @@ watch(
   { immediate: true }
 )
 
-const lastSelectedSprite = shallowRef<string | null>(null)
-const lastSelectedSound = shallowRef<string | null>(null)
+const lastSelectedSpriteId = shallowRef<string | null>(null)
+const lastSelectedSoundId = shallowRef<string | null>(null)
 watch(
   () => [editorCtx.project, editorCtx.project.selected] as const,
   ([project], [lastProject, lastSelected]) => {
     if (project !== lastProject) {
-      lastSelectedSprite.value = null
-      lastSelectedSound.value = null
+      lastSelectedSpriteId.value = null
+      lastSelectedSoundId.value = null
       return
     }
-    if (lastSelected?.type === 'sprite') lastSelectedSprite.value = lastSelected.name
-    else if (lastSelected?.type === 'sound') lastSelectedSound.value = lastSelected.name
+    if (lastSelected?.type === 'sprite') lastSelectedSpriteId.value = lastSelected.id
+    else if (lastSelected?.type === 'sound') lastSelectedSoundId.value = lastSelected.id
   }
 )
 
@@ -60,7 +60,7 @@ watch(
     ) {
       project.select({
         type: 'sprite',
-        name: lastSelectedSprite.value ?? project.sprites[0].name
+        id: lastSelectedSpriteId.value ?? project.sprites[0].id
       })
     } else if (
       expanded === 'sounds' &&
@@ -69,7 +69,7 @@ watch(
     ) {
       project.select({
         type: 'sound',
-        name: lastSelectedSound.value ?? editorCtx.project.sounds[0].name
+        id: lastSelectedSoundId.value ?? editorCtx.project.sounds[0].id
       })
     }
   }
diff --git a/spx-gui/src/components/editor/panels/sound/SoundItem.vue b/spx-gui/src/components/editor/panels/sound/SoundItem.vue
index 0e166dd15..3aa5cbd17 100644
--- a/spx-gui/src/components/editor/panels/sound/SoundItem.vue
+++ b/spx-gui/src/components/editor/panels/sound/SoundItem.vue
@@ -37,7 +37,9 @@ const handleRemove = useMessageHandle(
   async () => {
     const name = props.sound.name
     const action = { name: { en: `Remove sound ${name}`, zh: `删除声音 ${name}` } }
-    await editorCtx.project.history.doAction(action, () => editorCtx.project.removeSound(name))
+    await editorCtx.project.history.doAction(action, () =>
+      editorCtx.project.removeSound(props.sound.id)
+    )
   },
   {
     en: 'Failed to remove sound',
diff --git a/spx-gui/src/components/editor/panels/sound/SoundsPanel.vue b/spx-gui/src/components/editor/panels/sound/SoundsPanel.vue
index b9dea74fa..74c3e3678 100644
--- a/spx-gui/src/components/editor/panels/sound/SoundsPanel.vue
+++ b/spx-gui/src/components/editor/panels/sound/SoundsPanel.vue
@@ -25,7 +25,7 @@
         </UIEmpty>
         <SoundItem
           v-for="sound in sounds"
-          :key="sound.name"
+          :key="sound.id"
           :sound="sound"
           :selected="isSelected(sound)"
           @click="handleSoundClick(sound)"
@@ -37,7 +37,7 @@
         <UIEmpty v-if="sounds.length === 0" size="small">
           {{ $t({ en: 'Empty', zh: '无' }) }}
         </UIEmpty>
-        <SoundSummaryItem v-for="sound in summaryListData.list" :key="sound.name" :sound="sound" />
+        <SoundSummaryItem v-for="sound in summaryListData.list" :key="sound.id" :sound="sound" />
       </PanelSummaryList>
     </template>
   </CommonPanel>
@@ -73,11 +73,11 @@ const summaryList = ref<InstanceType<typeof PanelSummaryList>>()
 const summaryListData = useSummaryList(sounds, () => summaryList.value?.listWrapper ?? null)
 
 function isSelected(sound: Sound) {
-  return sound.name === editorCtx.project.selectedSound?.name
+  return sound.id === editorCtx.project.selectedSound?.id
 }
 
 function handleSoundClick(sound: Sound) {
-  editorCtx.project.select({ type: 'sound', name: sound.name })
+  editorCtx.project.select({ type: 'sound', id: sound.id })
 }
 
 const addFromLocalFile = useAddSoundFromLocalFile()
@@ -99,7 +99,7 @@ function handleRecord() {
 }
 
 function handleRecorded(sound: Sound) {
-  editorCtx.project.select({ type: 'sound', name: sound.name })
+  editorCtx.project.select({ type: 'sound', id: sound.id })
 }
 </script>
 
diff --git a/spx-gui/src/components/editor/panels/sprite/SpriteItem.vue b/spx-gui/src/components/editor/panels/sprite/SpriteItem.vue
index 42f2ca712..676a7479c 100644
--- a/spx-gui/src/components/editor/panels/sprite/SpriteItem.vue
+++ b/spx-gui/src/components/editor/panels/sprite/SpriteItem.vue
@@ -34,9 +34,10 @@ const [imgSrc, imgLoading] = useFileUrl(() => props.sprite.defaultCostume?.img)
 
 const handleRemove = useMessageHandle(
   async () => {
-    const sname = props.sprite.name
-    const action = { name: { en: `Remove sprite ${sname}`, zh: `删除精灵 ${sname}` } }
-    await editorCtx.project.history.doAction(action, () => editorCtx.project.removeSprite(sname))
+    const spriteId = props.sprite.id
+    const spriteName = props.sprite.name
+    const action = { name: { en: `Remove sprite ${spriteName}`, zh: `删除精灵 ${spriteName}` } }
+    await editorCtx.project.history.doAction(action, () => editorCtx.project.removeSprite(spriteId))
   },
   {
     en: 'Failed to remove sprite',
diff --git a/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue b/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
index 8f01a90ea..74789d23f 100644
--- a/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
+++ b/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
@@ -23,7 +23,7 @@
         </UIEmpty>
         <SpriteItem
           v-for="sprite in sprites"
-          :key="sprite.name"
+          :key="sprite.id"
           :sprite="sprite"
           :selected="isSelected(sprite)"
           @click="handleSpriteClick(sprite)"
@@ -52,7 +52,7 @@
         </UIEmpty>
         <SpriteSummaryItem
           v-for="sprite in summaryListData.list"
-          :key="sprite.name"
+          :key="sprite.id"
           :sprite="sprite"
         />
       </PanelSummaryList>
@@ -93,11 +93,11 @@ const summaryList = ref<InstanceType<typeof PanelSummaryList>>()
 const summaryListData = useSummaryList(sprites, () => summaryList.value?.listWrapper ?? null)
 
 function isSelected(sprite: Sprite) {
-  return sprite.name === editorCtx.project.selectedSprite?.name
+  return sprite.id === editorCtx.project.selectedSprite?.id
 }
 
 function handleSpriteClick(sprite: Sprite) {
-  editorCtx.project.select({ type: 'sprite', name: sprite.name })
+  editorCtx.project.select({ type: 'sprite', id: sprite.id })
 }
 
 const addFromLocalFile = useAddSpriteFromLocalFile()
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/NodeTransformer.vue b/spx-gui/src/components/editor/preview/stage-viewer/NodeTransformer.vue
index 1d4a3a073..15df133ba 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/NodeTransformer.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/NodeTransformer.vue
@@ -7,7 +7,7 @@ import { computed, effect, nextTick, ref } from 'vue'
 import type { Node } from 'konva/lib/Node'
 import { useEditorCtx } from '../../EditorContextProvider.vue'
 import type { CustomTransformer, CustomTransformerConfig } from './custom-transformer'
-import { getNodeName } from './node'
+import { getNodeId } from './node'
 
 const props = defineProps<{
   nodeReadyMap: Map<string, boolean>
@@ -37,12 +37,12 @@ effect(async () => {
   const project = editorCtx.project
   const selected = project.selectedSprite ?? project.stage.selectedWidget
   if (selected == null) return
-  const nodeName = getNodeName(selected)
+  const nodeId = getNodeId(selected)
   // Wait for node ready, so that Konva can get correct node size
-  if (!props.nodeReadyMap.get(nodeName)) return
+  if (!props.nodeReadyMap.get(nodeId)) return
   const stage = transformerNode.getStage()
   if (stage == null) throw new Error('no stage')
-  const selectedNode = stage.findOne((node: Node) => node.getAttr('nodeName') === nodeName)
+  const selectedNode = stage.findOne((node: Node) => node.getAttr('nodeId') === nodeId)
   if (selectedNode == null || selectedNode === (transformerNode as any).node()) return
   await nextTick() // Wait to ensure the selected node updated by Konva
   transformerNode.nodes([selectedNode])
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/SpriteNode.vue b/spx-gui/src/components/editor/preview/stage-viewer/SpriteNode.vue
index 3f9dc028e..2f726c788 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/SpriteNode.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/SpriteNode.vue
@@ -23,7 +23,7 @@ import type { Size } from '@/models/common'
 import { nomalizeDegree, round } from '@/utils/utils'
 import { useFileImg } from '@/utils/file'
 import { useEditorCtx } from '../../EditorContextProvider.vue'
-import { getNodeName } from './node'
+import { getNodeId } from './node'
 
 const props = defineProps<{
   sprite: Sprite
@@ -37,11 +37,11 @@ const costume = computed(() => props.sprite.defaultCostume)
 const bitmapResolution = computed(() => costume.value?.bitmapResolution ?? 1)
 const [image] = useFileImg(() => costume.value?.img)
 
-const nodeName = computed(() => getNodeName(props.sprite))
+const nodeId = computed(() => getNodeId(props.sprite))
 
 watchEffect((onCleanup) => {
-  props.nodeReadyMap.set(nodeName.value, image.value != null)
-  onCleanup(() => props.nodeReadyMap.delete(nodeName.value))
+  props.nodeReadyMap.set(nodeId.value, image.value != null)
+  onCleanup(() => props.nodeReadyMap.delete(nodeId.value))
 })
 
 onMounted(() => {
@@ -51,7 +51,7 @@ onMounted(() => {
   // Konva warning: Node has no parent. zIndex parameter is ignored.
   // Konva warning: Unexpected value 2 for zIndex property. zIndex is just index of a node in children of its parent. Expected value is from 0 to 1.
   // ```
-  const zIndex = editorCtx.project.zorder.indexOf(props.sprite.name)
+  const zIndex = editorCtx.project.zorder.indexOf(props.sprite.id)
   if (zIndex >= 0) {
     nodeRef.value!.getNode().zIndex(zIndex)
   }
@@ -75,7 +75,7 @@ const config = computed<ImageConfig>(() => {
   const { visible, x, y, rotationStyle, heading, size, pivot } = props.sprite
   const scale = size / bitmapResolution.value
   const config = {
-    nodeName: nodeName.value,
+    nodeId: nodeId.value,
     image: image.value ?? undefined,
     draggable: true,
     offsetX: 0,
@@ -124,6 +124,6 @@ function handleChange(e: KonvaEventObject<unknown>, action: Action) {
 }
 
 function handleMousedown() {
-  editorCtx.project.select({ type: 'sprite', name: props.sprite.name })
+  editorCtx.project.select({ type: 'sprite', id: props.sprite.id })
 }
 </script>
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
index 3694ee453..d4b983a38 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
@@ -13,7 +13,7 @@
       <v-layer>
         <SpriteNode
           v-for="sprite in visibleSprites"
-          :key="sprite.name"
+          :key="sprite.id"
           :sprite="sprite"
           :map-size="mapSize!"
           :node-ready-map="nodeReadyMap"
@@ -22,7 +22,7 @@
       <v-layer>
         <WidgetNode
           v-for="widget in visibleWidgets"
-          :key="widget.name"
+          :key="widget.id"
           :widget="widget"
           :map-size="mapSize!"
           :node-ready-map="nodeReadyMap"
@@ -59,7 +59,7 @@ import { useEditorCtx } from '../../EditorContextProvider.vue'
 import NodeTransformer from './NodeTransformer.vue'
 import SpriteNode from './SpriteNode.vue'
 import WidgetNode from './widgets/WidgetNode.vue'
-import { getNodeName } from './node'
+import { getNodeId } from './node'
 
 const editorCtx = useEditorCtx()
 const conatiner = ref<HTMLElement | null>(null)
@@ -160,21 +160,19 @@ const konvaBackdropConfig = computed(() => {
 
 const loading = computed(() => {
   if (backdropSrcLoading.value || !backdropImg.value) return true
-  if (editorCtx.project.sprites.some((s) => !nodeReadyMap.get(getNodeName(s)))) return true
-  if (editorCtx.project.stage.widgets.some((w) => !nodeReadyMap.get(getNodeName(w)))) return true
+  if (editorCtx.project.sprites.some((s) => !nodeReadyMap.get(getNodeId(s)))) return true
+  if (editorCtx.project.stage.widgets.some((w) => !nodeReadyMap.get(getNodeId(w)))) return true
   return false
 })
 
 const visibleSprites = computed(() => {
   const { zorder, sprites } = editorCtx.project
-  return zorder.map((name) => sprites.find((s) => s.name === name)).filter(Boolean) as Sprite[]
+  return zorder.map((id) => sprites.find((s) => s.id === id)).filter(Boolean) as Sprite[]
 })
 
 const visibleWidgets = computed(() => {
   const { widgetsZorder, widgets } = editorCtx.project.stage
-  return widgetsZorder
-    .map((name) => widgets.find((w) => w.name === name))
-    .filter(Boolean) as Widget[]
+  return widgetsZorder.map((id) => widgets.find((w) => w.id === id)).filter(Boolean) as Widget[]
 })
 
 const menuVisible = ref(false)
@@ -219,23 +217,23 @@ async function moveZorder(direction: 'up' | 'down' | 'top' | 'bottom') {
   await project.history.doAction({ name: moveActionNames[direction] }, () => {
     if (selectedSprite != null) {
       if (direction === 'up') {
-        project.upSpriteZorder(selectedSprite.name)
+        project.upSpriteZorder(selectedSprite.id)
       } else if (direction === 'down') {
-        project.downSpriteZorder(selectedSprite.name)
+        project.downSpriteZorder(selectedSprite.id)
       } else if (direction === 'top') {
-        project.topSpriteZorder(selectedSprite.name)
+        project.topSpriteZorder(selectedSprite.id)
       } else if (direction === 'bottom') {
-        project.bottomSpriteZorder(selectedSprite.name)
+        project.bottomSpriteZorder(selectedSprite.id)
       }
     } else if (selectedWidget != null) {
       if (direction === 'up') {
-        project.stage.upWidgetZorder(selectedWidget.name)
+        project.stage.upWidgetZorder(selectedWidget.id)
       } else if (direction === 'down') {
-        project.stage.downWidgetZorder(selectedWidget.name)
+        project.stage.downWidgetZorder(selectedWidget.id)
       } else if (direction === 'top') {
-        project.stage.topWidgetZorder(selectedWidget.name)
+        project.stage.topWidgetZorder(selectedWidget.id)
       } else if (direction === 'bottom') {
-        project.stage.bottomWidgetZorder(selectedWidget.name)
+        project.stage.bottomWidgetZorder(selectedWidget.id)
       }
     }
   })
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/node.ts b/spx-gui/src/components/editor/preview/stage-viewer/node.ts
index fbe138685..7db506879 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/node.ts
+++ b/spx-gui/src/components/editor/preview/stage-viewer/node.ts
@@ -2,7 +2,7 @@ import { Sprite } from '@/models/sprite'
 import type { Widget } from '@/models/widget'
 
 /** Get name which identifies the node, which may be a sprite or a widget */
-export function getNodeName(target: Sprite | Widget) {
+export function getNodeId(target: Sprite | Widget) {
   const type = target instanceof Sprite ? 'sprite' : 'widget'
-  return `${type}:${target.name}`
+  return `${type}:${target.id}`
 }
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/widgets/MonitorNode.vue b/spx-gui/src/components/editor/preview/stage-viewer/widgets/MonitorNode.vue
index 95e1cb74e..5fd6eddfc 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/widgets/MonitorNode.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/widgets/MonitorNode.vue
@@ -23,7 +23,7 @@ import { round } from '@/utils/utils'
 import type { Monitor } from '@/models/widget/monitor'
 import { useUIVariables } from '@/components/ui'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
-import { getNodeName } from '../node'
+import { getNodeId } from '../node'
 
 const props = defineProps<{
   monitor: Monitor
@@ -34,7 +34,7 @@ const props = defineProps<{
 const uiVariables = useUIVariables()
 const editorCtx = useEditorCtx()
 
-const nodeName = computed(() => getNodeName(props.monitor))
+const nodeId = computed(() => getNodeId(props.monitor))
 const labelTextRef = ref<KonvaNodeInstance<Text>>()
 const valueTextRef = ref<KonvaNodeInstance<Text>>()
 const labelTextWidth = ref(0)
@@ -47,9 +47,9 @@ async function updateTextWidth() {
 
   // text change triggers node-size change, we need to trigger transformer update manually.
   // It's a Transformer bug that it doesn't update correctly when attached node size changed causing by text content change
-  props.nodeReadyMap.set(nodeName.value, false)
+  props.nodeReadyMap.set(nodeId.value, false)
   await nextTick()
-  props.nodeReadyMap.set(nodeName.value, true)
+  props.nodeReadyMap.set(nodeId.value, true)
 }
 
 watch(
@@ -67,7 +67,7 @@ onMounted(() => {
   // Konva warning: Node has no parent. zIndex parameter is ignored.
   // Konva warning: Unexpected value 2 for zIndex property. zIndex is just index of a node in children of its parent. Expected value is from 0 to 1.
   // ```
-  const zIndex = editorCtx.project.stage.widgetsZorder.indexOf(props.monitor.name)
+  const zIndex = editorCtx.project.stage.widgetsZorder.indexOf(props.monitor.id)
   if (zIndex >= 0) {
     labelTextRef.value!.getNode().zIndex(zIndex)
   }
@@ -100,7 +100,7 @@ const valueWidth = computed(() => valueTextWidth.value + valuePaddingX * 2)
 const groupConfig = computed<GroupConfig>(() => {
   const { visible, x, y, size } = props.monitor
   return {
-    nodeName: nodeName.value,
+    nodeId: nodeId.value,
     visible,
     draggable: true,
     x: props.mapSize.width / 2 + x,
@@ -170,6 +170,6 @@ function handleChange(e: KonvaEventObject<unknown>, action: Action) {
 
 function handleMousedown() {
   editorCtx.project.select({ type: 'stage' })
-  editorCtx.project.stage.selectWidget(props.monitor.name)
+  editorCtx.project.stage.selectWidget(props.monitor.id)
 }
 </script>
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/widgets/WidgetNode.vue b/spx-gui/src/components/editor/preview/stage-viewer/widgets/WidgetNode.vue
index c785a4fbc..ed1c4c73b 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/widgets/WidgetNode.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/widgets/WidgetNode.vue
@@ -12,7 +12,7 @@ import type { Size } from '@/models/common'
 import type { Widget } from '@/models/widget'
 import MonitorNode from './MonitorNode.vue'
 import { Monitor } from '@/models/widget/monitor'
-import { getNodeName } from '../node'
+import { getNodeId } from '../node'
 
 const props = defineProps<{
   widget: Widget
@@ -22,8 +22,8 @@ const props = defineProps<{
 
 // TODO: when there are more widget types, we may extract more common logic for reuse
 watchEffect((onCleanup) => {
-  const nodeName = getNodeName(props.widget)
-  props.nodeReadyMap.set(nodeName, true)
-  onCleanup(() => props.nodeReadyMap.delete(nodeName))
+  const nodeId = getNodeId(props.widget)
+  props.nodeReadyMap.set(nodeId, true)
+  onCleanup(() => props.nodeReadyMap.delete(nodeId))
 })
 </script>
diff --git a/spx-gui/src/components/editor/sound/SoundPlayer.vue b/spx-gui/src/components/editor/sound/SoundPlayer.vue
index baa5f561e..9f63e792a 100644
--- a/spx-gui/src/components/editor/sound/SoundPlayer.vue
+++ b/spx-gui/src/components/editor/sound/SoundPlayer.vue
@@ -7,12 +7,13 @@
     :color="color"
     :play-handler="handlePlay"
     :loading="loading"
-    @stop="handleStop"
+    @stop="stop"
   />
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
+import { computed, onUnmounted, reactive, ref } from 'vue'
+import { registerPlayer } from '@/utils/player-registry'
 import type { Color } from '@/components/ui'
 import DumbSoundPlayer from './DumbSoundPlayer.vue'
 
@@ -27,10 +28,12 @@ type Playing = {
 }
 
 const playing = ref<Playing | null>(null)
+const registered = registerPlayer(stop)
 
 async function handlePlay() {
   if (props.src == null) return
   playing.value = makePlaying(props.src)
+  registered.onStart()
   await playing.value.audio.play()
 }
 
@@ -42,19 +45,22 @@ function makePlaying(src: string) {
   })
   audio.addEventListener('error', (e) => {
     console.warn('audio error:', e)
-    handleStop()
+    stop()
   })
   audio.addEventListener('ended', () => {
     // delay to make the animation more natural
-    setTimeout(handleStop, 400)
+    setTimeout(stop, 400)
   })
   return p
 }
 
 const loading = computed(() => props.src == null) // TODO: seeking?
 
-function handleStop() {
+function stop() {
   playing.value?.audio.pause()
   playing.value = null
+  registered.onStopped()
 }
+
+onUnmounted(stop)
 </script>
diff --git a/spx-gui/src/components/editor/sound/waveform/WaveformPlayer.vue b/spx-gui/src/components/editor/sound/waveform/WaveformPlayer.vue
index 26797218f..869762330 100644
--- a/spx-gui/src/components/editor/sound/waveform/WaveformPlayer.vue
+++ b/spx-gui/src/components/editor/sound/waveform/WaveformPlayer.vue
@@ -18,6 +18,7 @@ import { ref, watch } from 'vue'
 import WaveformWithControls from './WaveformWithControls.vue'
 import { getAudioContext, trimAndApplyGainToWavBlob } from '@/utils/audio'
 import { useAsyncComputed } from '@/utils/utils'
+import { registerPlayer } from '@/utils/player-registry'
 
 const props = defineProps<{
   audioSrc?: string
@@ -26,6 +27,8 @@ const props = defineProps<{
   gain: number
 }>()
 
+const registered = registerPlayer(stop)
+
 const play = async () => {
   if (!audioElement.value) return
   if (!Number.isFinite(audioElement.value.duration)) {
@@ -36,20 +39,24 @@ const play = async () => {
     return
   }
   audioElement.value.currentTime = audioElement.value.duration * props.range.left
+  registered.onStart()
   await audioElement.value.play()
   emit('play')
 }
 
+function stop() {
+  if (!audioElement.value) return
+  audioElement.value.pause()
+  audioElement.value.currentTime = Number.isFinite(audioElement.value.duration)
+    ? audioElement.value.duration * props.range.left
+    : 0
+  progress.value = 0
+  registered.onStopped()
+}
+
 defineExpose({
   play,
-  stop: () => {
-    if (!audioElement.value) return
-    audioElement.value.pause()
-    audioElement.value.currentTime = Number.isFinite(audioElement.value.duration)
-      ? audioElement.value.duration * props.range.left
-      : 0
-    progress.value = 0
-  },
+  stop,
   exportWav: async (): Promise<Blob> => {
     if (!props.audioSrc) throw new Error('audioSrc is not provided')
     const audio = audioElement.value
diff --git a/spx-gui/src/components/editor/sprite/AnimationDetail.vue b/spx-gui/src/components/editor/sprite/AnimationDetail.vue
index ce4f6942a..c80098892 100644
--- a/spx-gui/src/components/editor/sprite/AnimationDetail.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationDetail.vue
@@ -6,7 +6,7 @@
       :duration="animation.duration"
       class="animation-player"
     />
-    <AnimationSettings :animation="animation" :sprite="sprite" />
+    <AnimationSettings :animation="animation" :sprite="sprite" :sounds="editorCtx.project.sounds" />
   </EditorItemDetail>
 </template>
 
@@ -30,7 +30,7 @@ const props = defineProps<{
 const editorCtx = useEditorCtx()
 const renameCostume = useModal(AnimationRenameModal)
 const sound = computed(
-  () => editorCtx.project.sounds.find((sound) => sound.name === props.animation.sound) ?? null
+  () => editorCtx.project.sounds.find((sound) => sound.id === props.animation.sound) ?? null
 )
 
 const handleRename = useMessageHandle(
diff --git a/spx-gui/src/components/editor/sprite/AnimationEditor.vue b/spx-gui/src/components/editor/sprite/AnimationEditor.vue
index b79230655..0906d95f0 100644
--- a/spx-gui/src/components/editor/sprite/AnimationEditor.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationEditor.vue
@@ -13,11 +13,11 @@
   <EditorList v-else color="sprite" :add-text="$t({ en: 'Add animation', zh: '添加动画' })">
     <AnimationItem
       v-for="animation in sprite.animations"
-      :key="animation.name"
+      :key="animation.id"
       :sprite="sprite"
       :animation="animation"
-      :selected="selectedAnimation === animation"
-      @click="selectedAnimation = animation"
+      :selected="selectedAnimationId === animation.id"
+      @click="selectedAnimationId = animation.id"
     />
     <template #add-options>
       <UIMenu>
@@ -33,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import { shallowRef, watchEffect } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import type { Sprite } from '@/models/sprite'
 import EditorList from '../common/EditorList.vue'
 import { UIMenu, UIMenuItem, useModal, UIEmpty, UIButton } from '@/components/ui'
@@ -51,14 +51,15 @@ const props = defineProps<{
 
 const editorCtx = useEditorCtx()
 
-const selectedAnimation = shallowRef<Animation | null>(props.sprite.animations[0] || null)
+const selectedAnimationId = ref<string | null>(props.sprite.animations[0]?.id || null)
+const selectedAnimation = computed(
+  () =>
+    props.sprite.animations.find((animation) => animation.id === selectedAnimationId.value) ?? null
+)
 
 watchEffect(() => {
-  if (
-    selectedAnimation.value == null ||
-    !props.sprite.animations.includes(selectedAnimation.value)
-  ) {
-    selectedAnimation.value = props.sprite.animations[0] ?? null
+  if (selectedAnimationId.value == null || !selectedAnimation.value) {
+    selectedAnimationId.value = props.sprite.animations[0]?.id ?? null
   }
 })
 
@@ -84,10 +85,10 @@ const handleGroupCostumes = useMessageHandle(
           for (let i = selectedCostumes.length - 1; i >= 0; i--) {
             // Do not remove the last costume
             if (props.sprite.costumes.length <= 1) break
-            props.sprite.removeCostume(selectedCostumes[i].name)
+            props.sprite.removeCostume(selectedCostumes[i].id)
           }
         }
-        selectedAnimation.value = animation
+        selectedAnimationId.value = animation.id
       }
     )
   },
diff --git a/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue b/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue
index 52cc7b8bc..1958d0c04 100644
--- a/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue
@@ -63,7 +63,7 @@ const handleConfirm = async () => {
       }
     },
     () => {
-      props.sprite.removeAnimation(props.animation.name)
+      props.sprite.removeAnimation(props.animation.id)
       if (preserveCostumes.value) {
         for (const costume of props.animation.costumes) {
           const clonedCostume = costume.clone()
diff --git a/spx-gui/src/components/editor/sprite/CostumeItem.vue b/spx-gui/src/components/editor/sprite/CostumeItem.vue
index 4eff6f05d..c51b52d6a 100644
--- a/spx-gui/src/components/editor/sprite/CostumeItem.vue
+++ b/spx-gui/src/components/editor/sprite/CostumeItem.vue
@@ -33,7 +33,9 @@ const handleRemove = useMessageHandle(
   async () => {
     const name = props.costume.name
     const action = { name: { en: `Remove costume ${name}`, zh: `删除造型 ${name}` } }
-    await editorCtx.project.history.doAction(action, () => props.sprite.removeCostume(name))
+    await editorCtx.project.history.doAction(action, () =>
+      props.sprite.removeCostume(props.costume.id)
+    )
   },
   {
     en: 'Failed to remove costume',
diff --git a/spx-gui/src/components/editor/sprite/CostumesEditor.vue b/spx-gui/src/components/editor/sprite/CostumesEditor.vue
index 75a0f8506..48dd30062 100644
--- a/spx-gui/src/components/editor/sprite/CostumesEditor.vue
+++ b/spx-gui/src/components/editor/sprite/CostumesEditor.vue
@@ -2,10 +2,10 @@
   <EditorList color="sprite" :add-text="$t({ en: 'Add costume', zh: '添加造型' })">
     <CostumeItem
       v-for="costume in sprite.costumes"
-      :key="costume.name"
+      :key="costume.id"
       :sprite="sprite"
       :costume="costume"
-      :selected="selected?.name === costume.name"
+      :selected="selected?.id === costume.id"
       @click="handleSelect(costume)"
     />
     <template #add-options>
@@ -42,7 +42,7 @@ const selected = computed(() => props.sprite.defaultCostume)
 
 function handleSelect(costume: Costume) {
   const action = { name: { en: 'Set default costume', zh: '设置默认造型' } }
-  editorCtx.project.history.doAction(action, () => props.sprite.setDefaultCostume(costume.name))
+  editorCtx.project.history.doAction(action, () => props.sprite.setDefaultCostume(costume.id))
 }
 
 const addFromLocalFile = useAddCostumeFromLocalFile()
diff --git a/spx-gui/src/components/editor/sprite/SpriteEditor.vue b/spx-gui/src/components/editor/sprite/SpriteEditor.vue
index fe5ff7017..d11be1387 100644
--- a/spx-gui/src/components/editor/sprite/SpriteEditor.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteEditor.vue
@@ -16,6 +16,7 @@
     v-show="selectedTab === 'code'"
     ref="codeEditor"
     :loading="code == null"
+    :file="sprite.codeFilePath"
     :value="code ?? ''"
     @update:value="handleCodeUpdate"
   />
diff --git a/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue b/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
index 2066390e7..881cef50e 100644
--- a/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
+++ b/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
@@ -33,7 +33,7 @@
           >
             <UIIcon type="sound" />
             {{ $t({ en: 'Sound', zh: '声音' }) }}
-            <span class="value">{{ animation.sound }}</span>
+            <span class="value">{{ soundName }}</span>
           </li>
         </ul>
       </template>
@@ -66,12 +66,16 @@ import { UIDropdown, UIIcon, isInPopup } from '@/components/ui'
 import DurationEditor from './DurationEditor.vue'
 import BoundStateEditor from './state/BoundStateEditor.vue'
 import SoundEditor from './sound/SoundEditor.vue'
+import type { Sound } from '@/models/sound'
 
 const props = defineProps<{
   sprite: Sprite
   animation: Animation
+  sounds: Sound[]
 }>()
 
+const soundName = computed(() => props.sounds.find((s) => s.id === props.animation.sound)?.name)
+
 type Setting = 'duration' | 'bound-state' | 'sound'
 
 const activeSetting = ref<Setting | null>(null)
@@ -85,7 +89,7 @@ function handleEditorClose() {
 }
 
 const boundStateNum = computed(
-  () => props.sprite.getAnimationBoundStates(props.animation.name).length
+  () => props.sprite.getAnimationBoundStates(props.animation.id).length
 )
 
 function handleClickOutside(e: MouseEvent) {
diff --git a/spx-gui/src/components/editor/sprite/animation/sound/SoundEditor.vue b/spx-gui/src/components/editor/sprite/animation/sound/SoundEditor.vue
index 23955707c..51871e5d7 100644
--- a/spx-gui/src/components/editor/sprite/animation/sound/SoundEditor.vue
+++ b/spx-gui/src/components/editor/sprite/animation/sound/SoundEditor.vue
@@ -8,10 +8,10 @@
     <ul class="sound-items">
       <SoundItem
         v-for="sound in editorCtx.project.sounds"
-        :key="sound.name"
+        :key="sound.id"
         :sound="sound"
-        :selected="sound.name === selected"
-        @click="handleSoundClick(sound.name)"
+        :selected="sound.id === selected"
+        @click="handleSoundClick(sound.id)"
       />
       <UIDropdown trigger="click" placement="top">
         <template #trigger>
@@ -73,7 +73,7 @@ const addFromLocalFile = useAddSoundFromLocalFile(false)
 const handleAddFromLocalFile = useMessageHandle(
   async () => {
     const sound = await addFromLocalFile(editorCtx.project)
-    selected.value = sound.name
+    selected.value = sound.id
   },
   {
     en: 'Failed to add sound from local file',
@@ -85,7 +85,7 @@ const addAssetFromLibrary = useAddAssetFromLibrary(false)
 const handleAddFromAssetLibrary = useMessageHandle(
   async () => {
     const sounds = await addAssetFromLibrary(editorCtx.project, AssetType.Sound)
-    selected.value = sounds[0].name
+    selected.value = sounds[0].id
   },
   { en: 'Failed to add sound from asset library', zh: '从素材库添加失败' }
 ).fn
@@ -95,7 +95,7 @@ function handleRecord() {
   recorderVisible.value = true
 }
 function handleRecorded(sound: Sound) {
-  selected.value = sound.name
+  selected.value = sound.id
 }
 
 async function handleConfirm() {
diff --git a/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue b/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
index ceb0666be..bcb9df305 100644
--- a/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
+++ b/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
@@ -60,7 +60,7 @@ const emit = defineEmits<{
 
 const editorCtx = useEditorCtx()
 const actionName = { en: 'Bind state', zh: '绑定状态' }
-const boundStates = ref(props.sprite.getAnimationBoundStates(props.animation.name))
+const boundStates = ref(props.sprite.getAnimationBoundStates(props.animation.id))
 
 function isBound(state: State) {
   return boundStates.value.includes(state)
@@ -74,7 +74,7 @@ function handleStateItemClick(state: State) {
 
 async function handleConfirm() {
   await editorCtx.project.history.doAction({ name: actionName }, () => {
-    props.sprite.setAnimationBoundStates(props.animation.name, boundStates.value)
+    props.sprite.setAnimationBoundStates(props.animation.id, boundStates.value)
   })
   emit('close')
 }
diff --git a/spx-gui/src/components/editor/stage/StageEditor.vue b/spx-gui/src/components/editor/stage/StageEditor.vue
index 5038627b5..b17e72223 100644
--- a/spx-gui/src/components/editor/stage/StageEditor.vue
+++ b/spx-gui/src/components/editor/stage/StageEditor.vue
@@ -17,6 +17,7 @@
     v-show="selectedTab === 'code'"
     ref="codeEditor"
     :loading="code == null"
+    :file="stage.codeFilePath"
     :value="code ?? ''"
     @update:value="handleCodeUpdate"
   />
diff --git a/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue b/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue
index 7b1b47cb0..5793cc282 100644
--- a/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue
+++ b/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue
@@ -39,6 +39,7 @@ const [imgSrc, imgLoading] = useFileUrl(() => props.backdrop.img)
 .img-wrapper {
   width: 100%;
   flex: 1 1 0;
+  min-height: 0;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/spx-gui/src/components/editor/stage/backdrop/BackdropItem.vue b/spx-gui/src/components/editor/stage/backdrop/BackdropItem.vue
index a0d608f29..f4db8399e 100644
--- a/spx-gui/src/components/editor/stage/backdrop/BackdropItem.vue
+++ b/spx-gui/src/components/editor/stage/backdrop/BackdropItem.vue
@@ -40,7 +40,9 @@ const handleRemove = useMessageHandle(
   async () => {
     const name = props.backdrop.name
     const action = { name: { en: `Remove backdrop ${name}`, zh: `删除背景 ${name}` } }
-    await editorCtx.project.history.doAction(action, () => props.stage.removeBackdrop(name))
+    await editorCtx.project.history.doAction(action, () =>
+      props.stage.removeBackdrop(props.backdrop.id)
+    )
   },
   {
     en: 'Failed to remove backdrop',
diff --git a/spx-gui/src/components/editor/stage/backdrop/BackdropsEditor.vue b/spx-gui/src/components/editor/stage/backdrop/BackdropsEditor.vue
index 682c2449c..ef0b66fc2 100644
--- a/spx-gui/src/components/editor/stage/backdrop/BackdropsEditor.vue
+++ b/spx-gui/src/components/editor/stage/backdrop/BackdropsEditor.vue
@@ -2,10 +2,10 @@
   <EditorList color="stage" :add-text="$t({ en: 'Add backdrop', zh: '添加背景' })">
     <BackdropItem
       v-for="backdrop in stage.backdrops"
-      :key="backdrop.name"
+      :key="backdrop.id"
       :stage="stage"
       :backdrop="backdrop"
-      :selected="selected?.name === backdrop.name"
+      :selected="selected?.id === backdrop.id"
       @click="handleSelect(backdrop)"
     />
     <template #add-options>
@@ -52,7 +52,7 @@ const selected = computed(() => stage.value.defaultBackdrop)
 
 function handleSelect(backdrop: Backdrop) {
   const action = { name: { en: 'Set default backdrop', zh: '设置默认背景' } }
-  editorCtx.project.history.doAction(action, () => stage.value.setDefaultBackdrop(backdrop.name))
+  editorCtx.project.history.doAction(action, () => stage.value.setDefaultBackdrop(backdrop.id))
 }
 
 const handleAddFromLocalFile = useMessageHandle(
@@ -69,7 +69,7 @@ const handleAddFromLocalFile = useMessageHandle(
 
     await editorCtx.project.history.doAction(action, () => {
       stage.value.addBackdrop(backdrop)
-      stage.value.setDefaultBackdrop(backdrop.name)
+      stage.value.setDefaultBackdrop(backdrop.id)
     })
   },
   { en: 'Failed to add from local file', zh: '从本地文件添加失败' }
diff --git a/spx-gui/src/components/editor/stage/widget/WidgetItem.vue b/spx-gui/src/components/editor/stage/widget/WidgetItem.vue
index af3f552a8..c68357629 100644
--- a/spx-gui/src/components/editor/stage/widget/WidgetItem.vue
+++ b/spx-gui/src/components/editor/stage/widget/WidgetItem.vue
@@ -28,7 +28,9 @@ const handleRemove = useMessageHandle(
   async () => {
     const name = props.widget.name
     const action = { name: { en: `Remove widget ${name}`, zh: `删除控件 ${name}` } }
-    await editorCtx.project.history.doAction(action, () => props.stage.removeWidget(name))
+    await editorCtx.project.history.doAction(action, () =>
+      props.stage.removeWidget(props.widget.id)
+    )
   },
   {
     en: 'Failed to remove widget',
diff --git a/spx-gui/src/components/editor/stage/widget/WidgetsEditor.vue b/spx-gui/src/components/editor/stage/widget/WidgetsEditor.vue
index 6bbd8b096..e7795cfe3 100644
--- a/spx-gui/src/components/editor/stage/widget/WidgetsEditor.vue
+++ b/spx-gui/src/components/editor/stage/widget/WidgetsEditor.vue
@@ -13,10 +13,10 @@
   <EditorList v-else color="stage" :add-text="$t({ en: 'Add widget', zh: '添加控件' })">
     <WidgetItem
       v-for="widget in stage.widgets"
-      :key="widget.name"
+      :key="widget.id"
       :stage="stage"
       :widget="widget"
-      :selected="selected?.name === widget.name"
+      :selected="selected?.id === widget.id"
       @click="handleSelect(widget)"
     />
     <template #add-options>
@@ -47,7 +47,7 @@ const stage = computed(() => editorCtx.project.stage)
 const selected = computed(() => stage.value.selectedWidget)
 
 function handleSelect(widget: Widget) {
-  stage.value.selectWidget(widget.name)
+  stage.value.selectWidget(widget.id)
 }
 
 const handleAddMonitor = useMessageHandle(
@@ -56,7 +56,7 @@ const handleAddMonitor = useMessageHandle(
     const action = { name: { en: 'Add widget', zh: '添加控件' } }
     await editorCtx.project.history.doAction(action, () => {
       stage.value.addWidget(monitor)
-      stage.value.selectWidget(monitor.name)
+      stage.value.selectWidget(monitor.id)
     })
   },
   {
diff --git a/spx-gui/src/components/project/ProjectItem.vue b/spx-gui/src/components/project/ProjectItem.vue
index fb67015d9..3ac24e41b 100644
--- a/spx-gui/src/components/project/ProjectItem.vue
+++ b/spx-gui/src/components/project/ProjectItem.vue
@@ -137,6 +137,7 @@ const creationTime = computed(() => dayjs(props.projectData.cTime).format('YYYY.
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 10px;
   }
 }
 
@@ -147,10 +148,13 @@ const creationTime = computed(() => dayjs(props.projectData.cTime).format('YYYY.
     padding: 10px 10px 8px;
   }
 
+  .name-container {
+    margin-bottom: 4px;
+  }
+
   .name {
     font-size: 16px;
     line-height: 24px;
-    margin-bottom: 4px;
   }
 
   .creation-time {
diff --git a/spx-gui/src/components/project/runner/ProjectRunner.vue b/spx-gui/src/components/project/runner/ProjectRunner.vue
index 2c7655b5d..83d0865cb 100644
--- a/spx-gui/src/components/project/runner/ProjectRunner.vue
+++ b/spx-gui/src/components/project/runner/ProjectRunner.vue
@@ -3,8 +3,9 @@
 </template>
 
 <script lang="ts" setup>
+import { onUnmounted, ref } from 'vue'
+import { registerPlayer } from '@/utils/player-registry'
 import { Project } from '@/models/project'
-import { ref } from 'vue'
 import IframeDisplay from './IframeDisplay.vue'
 
 const props = defineProps<{ project: Project }>()
@@ -19,13 +20,26 @@ const handleConsole = (type: 'log' | 'warn', args: unknown[]) => {
   emit('console', type, args)
 }
 
+const registered = registerPlayer(() => {
+  // For now we don't need to implement stop handler here because there's no chance for
+  // the user to activate another audio player when `ProjectRunner` visible.
+  // If you see this warning in console, you need to think what the proper behavior is.
+  console.warn('unexpected call')
+})
+
+onUnmounted(() => {
+  registered.onStopped()
+})
+
 defineExpose({
   run: async () => {
+    registered.onStart()
     const gbpFile = await props.project.exportGbpFile()
     zipData.value = await gbpFile.arrayBuffer()
   },
   stop: () => {
     zipData.value = null
+    registered.onStopped()
   }
 })
 </script>
diff --git a/spx-gui/src/components/ui/block-items/UIBlockItem.vue b/spx-gui/src/components/ui/block-items/UIBlockItem.vue
index f13aefbf9..ba32c190d 100644
--- a/spx-gui/src/components/ui/block-items/UIBlockItem.vue
+++ b/spx-gui/src/components/ui/block-items/UIBlockItem.vue
@@ -39,17 +39,16 @@ const style = computed(() => ({
 
 <style lang="scss" scoped>
 .block-item {
+  width: var(--block-item-size);
+  height: var(--block-item-size);
+  // it may shrink without min-width / min-height
+  min-width: var(--block-item-size);
+  min-height: var(--block-item-size);
   &.block-item-medium {
-    width: 88px;
-    height: 88px;
-    min-height: 88px;
-    // Without min-height, the height of the element can be smaller than 88px
-    // in editor sider list.
+    --block-item-size: 88px;
   }
   &.block-item-large {
-    width: 140px;
-    height: 140px;
-    min-height: 140px;
+    --block-item-size: 140px;
   }
   display: flex;
   flex-direction: column;
diff --git a/spx-gui/src/models/animation.test.ts b/spx-gui/src/models/animation.test.ts
index c422c2e3b..ef8970f4a 100644
--- a/spx-gui/src/models/animation.test.ts
+++ b/spx-gui/src/models/animation.test.ts
@@ -44,46 +44,47 @@ describe('Animation', () => {
     const project = makeProject()
     const sprite = project.sprites[0]
     const animation = sprite.animations[0]
-    animation.setSound(project.sounds[0].name)
-    expect(animation.sound).toBe(project.sounds[0].name)
+    animation.setSound(project.sounds[0].id)
+    expect(animation.sound).toBe(project.sounds[0].id)
 
     const sound2 = new Sound('sound2', mockFile())
     project.addSound(sound2)
-    animation.setSound(sound2.name)
-    expect(animation.sound).toBe(sound2.name)
+    animation.setSound(sound2.id)
+    expect(animation.sound).toBe(sound2.id)
 
     animation.setSound(null)
     expect(animation.sound).toBeNull()
 
-    animation.setSound(project.sounds[0].name)
-    expect(animation.sound).toBe(project.sounds[0].name)
+    animation.setSound(project.sounds[0].id)
+    expect(animation.sound).toBe(project.sounds[0].id)
   })
 
   it('should work well with sound renaming', async () => {
     const project = makeProject()
     const sprite = project.sprites[0]
     const animation = sprite.animations[0]
-    animation.setSound(project.sounds[0].name)
+    animation.setSound(project.sounds[0].id)
     await nextTick()
     project.sounds[0].setName('newSound')
     await nextTick()
-    expect(animation.sound).toBe('newSound')
+    const newSound = project.sounds.find((s) => s.id === animation.sound)
+    expect(newSound?.name).toBe('newSound')
   })
 
   it('should work well with sound deletion', async () => {
     const project = makeProject()
     const sprite = project.sprites[0]
     const animation = sprite.animations[0]
-    animation.setSound(project.sounds[0].name)
+    animation.setSound(project.sounds[0].id)
     await nextTick()
-    project.removeSound(project.sounds[0].name)
+    project.removeSound(project.sounds[0].id)
     await nextTick()
     expect(animation.sound).toBeNull()
   })
 
   it('should work correctly while project loads', async () => {
     const project = makeProject()
-    project.sprites[0].animations[0].setSound(project.sounds[0].name)
+    project.sprites[0].animations[0].setSound(project.sounds[0].id)
 
     const [metadata, files] = await project.export()
     const delayedFiles: Files = Object.fromEntries(
@@ -91,6 +92,37 @@ describe('Animation', () => {
     )
     const newProject = new Project()
     await newProject.load(metadata, delayedFiles)
-    expect(newProject.sprites[0].animations[0].sound).toBe(newProject.sounds[0].name)
+    expect(newProject.sprites[0].animations[0].sound).toBe(newProject.sounds[0].id)
+  })
+
+  it('should be able to keep the id upon export and import. if the id is not provided, it should be generated', async () => {
+    const project = makeProject()
+    const sprite = project.sprites[0]
+    const animation = sprite.animations[0]
+    const id = animation.id
+    // id should be not null and not empty
+    expect(id).not.toBeNull()
+
+    const [metadata, files] = await project.export()
+    const newProject = new Project()
+    await newProject.load(metadata, files)
+    const newSprite = newProject.sprites[0]
+    const newAnimation = newSprite.animations[0]
+    expect(newAnimation.id).toBe(id)
+  })
+  it('should not export id if includeId is false', async () => {
+    const project = makeProject()
+    const sprite = project.sprites[0]
+    const animation = sprite.animations[0]
+    const id = animation.id
+    // id should be not null and not empty
+    expect(id).not.toBeNull()
+
+    const exportedId = animation.export({
+      basePath: '',
+      includeId: false,
+      sounds: project.sounds
+    })[0].builder_id
+    expect(exportedId).toBeUndefined()
   })
 })
diff --git a/spx-gui/src/models/animation.ts b/spx-gui/src/models/animation.ts
index a659ce262..0346cdd6c 100644
--- a/spx-gui/src/models/animation.ts
+++ b/spx-gui/src/models/animation.ts
@@ -9,6 +9,8 @@ import {
 import type { Files } from './common/file'
 import type { Costume, RawCostumeConfig } from './costume'
 import type { Sprite } from './sprite'
+import { nanoid } from 'nanoid'
+import type { Sound } from './sound'
 
 type ActionConfig = {
   /** Sound name to play */
@@ -20,29 +22,34 @@ type ActionConfig = {
 export const defaultFps = 10
 
 export type AnimationInits = {
+  id?: string
   /** Duration for animation to be played once */
   duration?: number
-  onStart?: ActionConfig
-
-  // not supported by builder:
-  isLoop?: boolean // TODO
-  onPlay?: ActionConfig
+  sound?: string
 }
 
-export type RawAnimationConfig = Omit<AnimationInits, 'duration'> & {
-  anitype?: number
+export type RawAnimationConfig = {
+  builder_id?: string
   frameFrom?: number | string
   frameTo?: number | string
   frameFps?: number
+  onStart?: ActionConfig
 
   // legacy APIs, for compatibility only:
   from?: number | string
   to?: number | string
   fps?: number
+
+  // not supported by builder:
   duration?: number
+  anitype?: number
+  isLoop?: boolean
+  onPlay?: ActionConfig
 }
 
 export class Animation extends Disposable {
+  id: string
+
   private sprite: Sprite | null = null
   setSprite(sprite: Sprite | null) {
     this.sprite = sprite
@@ -62,21 +69,11 @@ export class Animation extends Disposable {
     return `__animation_${this.name}_`
   }
 
-  withCostumeNamePrefix(name: string) {
-    return this.costumeNamePrefix + name
-  }
-
-  private stripCostumeNamePrefix(name: string) {
-    if (!name.startsWith(this.costumeNamePrefix)) return name
-    return name.slice(this.costumeNamePrefix.length)
-  }
-
   costumes: Costume[]
   // For now, detailed methods to manipulate costumes are not needed, we may implement them later
   setCostumes(costumes: Costume[]) {
     for (const costume of costumes) {
-      let costumeName = this.stripCostumeNamePrefix(costume.name)
-      costumeName = ensureValidCostumeName(costumeName, this)
+      const costumeName = ensureValidCostumeName(costume.name, this)
       costume.setParent(this)
       costume.setName(costumeName)
     }
@@ -92,8 +89,8 @@ export class Animation extends Disposable {
   }
 
   sound: string | null
-  setSound(sound: string | null) {
-    this.sound = sound
+  setSound(soundId: string | null) {
+    this.sound = soundId
   }
 
   constructor(name: string, inits?: AnimationInits) {
@@ -101,11 +98,8 @@ export class Animation extends Disposable {
     this.name = name
     this.costumes = []
     this.duration = inits?.duration ?? 0
-    this.sound = inits?.onStart?.play ?? null
-
-    for (const field of ['isLoop', 'onPlay'] as const) {
-      if (inits?.[field] != null) console.warn(`unsupported field: ${field} for sprite ${name}`)
-    }
+    this.sound = inits?.sound ?? null
+    this.id = inits?.id ?? nanoid()
 
     return reactive(this) as this
   }
@@ -123,52 +117,87 @@ export class Animation extends Disposable {
   static load(
     name: string,
     {
+      builder_id: id,
       frameFrom,
       frameTo,
       frameFps,
       from,
       to,
       fps,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      duration: _spxDuration, // drop spx `duration`, which is different from ours
-      ...inits
+      onStart,
+      duration: spxDuration,
+      isLoop,
+      onPlay,
+      anitype
     }: RawAnimationConfig,
-    sprite: Sprite
-  ) {
+    costumes: Costume[],
+    sounds: Sound[]
+  ): [animation: Animation, animationCostumeNames: string[]] {
     frameFrom = frameFrom ?? from
     frameTo = frameTo ?? to
     frameFps = frameFps ?? fps
     if (frameFrom == null || frameTo == null)
       throw new Error(`from and to expected for Animation ${name}`)
-    const fromIndex = getCostumeIndex(sprite.costumes, frameFrom)
-    const toIndex = getCostumeIndex(sprite.costumes, frameTo)
-    const costumes = sprite.costumes.slice(fromIndex, toIndex + 1)
-    const duration = costumes.length / (frameFps ?? defaultFps)
-    const animation = new Animation(name, { ...inits, duration })
-    animation.setCostumes(costumes.map((costume) => costume.clone()))
-    for (const costume of costumes) {
-      sprite.removeCostume(costume.name)
+    const fromIndex = getCostumeIndex(costumes, frameFrom)
+    const toIndex = getCostumeIndex(costumes, frameTo)
+    const animationCostumes = costumes.slice(fromIndex, toIndex + 1).map((c) => c.clone())
+    const duration = animationCostumes.length / (frameFps ?? defaultFps)
+    // drop spx `duration`, which is different from ours
+    if (spxDuration != null) console.warn(`unsupported field: duration for animation ${name}`)
+    if (isLoop != null) console.warn(`unsupported field: isLoop for animation ${name}`)
+    if (onPlay != null) console.warn(`unsupported field: onPlay for animation ${name}`)
+    if (anitype != null) console.warn(`unsupported field: anitype for animation ${name}`)
+    let soundId: string | undefined = undefined
+    if (onStart?.play != null) {
+      const sound = sounds.find((s) => s.name === onStart.play)
+      if (sound == null)
+        console.warn(`Sound ${onStart.play} not found when creating animation ${name}`)
+      else soundId = sound.id
     }
-    return animation
+    const animation = new Animation(name, {
+      id,
+      duration,
+      sound: soundId
+    })
+    const animationCostumeNames = animationCostumes.map((c) => c.name)
+    for (const costume of animationCostumes) {
+      if (costume.name.startsWith(animation.costumeNamePrefix)) {
+        costume.setName(costume.name.slice(animation.costumeNamePrefix.length))
+      }
+    }
+    animation.setCostumes(animationCostumes)
+    return [animation, animationCostumeNames]
   }
 
   export(
     /** Path of directory which contains the sprite's config file */
-    basePath: string
+    {
+      basePath,
+      sounds,
+      includeId = true
+    }: { basePath: string; includeId?: boolean; sounds: Sound[] }
   ): [RawAnimationConfig, RawCostumeConfig[], Files] {
     const costumeConfigs: RawCostumeConfig[] = []
     const files: Files = {}
     for (const costume of this.costumes) {
-      const [costumeConfig, costumeFiles] = costume.export(basePath)
+      const [costumeConfig, costumeFiles] = costume.export({
+        basePath,
+        includeId,
+        namePrefix: this.costumeNamePrefix
+      })
       costumeConfigs.push(costumeConfig)
       Object.assign(files, costumeFiles)
     }
     const config: RawAnimationConfig = {
       frameFrom: costumeConfigs[0]?.name,
       frameTo: costumeConfigs[costumeConfigs.length - 1]?.name,
-      frameFps: Math.ceil(this.costumes.length / this.duration),
-      onStart: this.sound == null ? undefined : { play: this.sound }
+      frameFps: Math.ceil(this.costumes.length / this.duration)
+    }
+    const soundName = sounds.find((s) => s.id === this.sound)?.name
+    if (soundName) {
+      config.onStart = { play: soundName }
     }
+    if (includeId) config.builder_id = this.id
     return [config, costumeConfigs, files]
   }
 }
diff --git a/spx-gui/src/models/backdrop.ts b/spx-gui/src/models/backdrop.ts
index 716998226..798f8b1c0 100644
--- a/spx-gui/src/models/backdrop.ts
+++ b/spx-gui/src/models/backdrop.ts
@@ -49,7 +49,7 @@ export class Backdrop extends Costume {
     return new Backdrop(name, file, inits)
   }
 
-  export(): [RawBackdropConfig, Files] {
-    return super.export(backdropAssetPath)
+  export({ includeId = true }: { includeId?: boolean } = {}): [RawBackdropConfig, Files] {
+    return super.export({ basePath: backdropAssetPath, includeId })
   }
 }
diff --git a/spx-gui/src/models/common/asset.ts b/spx-gui/src/models/common/asset.ts
index e60dd71a7..f4f597a78 100644
--- a/spx-gui/src/models/common/asset.ts
+++ b/spx-gui/src/models/common/asset.ts
@@ -16,7 +16,9 @@ export type AssetModel<T extends AssetType = AssetType> = T extends AssetType.So
       : never
 
 export async function sprite2Asset(sprite: Sprite): Promise<PartialAssetData> {
-  const { fileCollection, fileCollectionHash } = await saveFiles(sprite.export(false))
+  const { fileCollection, fileCollectionHash } = await saveFiles(
+    sprite.export({ includeId: false, sounds: [], includeCode: false }) // animation sound is not preserved when saving as assets
+  )
   return {
     displayName: sprite.name,
     assetType: AssetType.Sprite,
@@ -27,7 +29,7 @@ export async function sprite2Asset(sprite: Sprite): Promise<PartialAssetData> {
 
 export async function asset2Sprite(assetData: PartialAssetData) {
   const files = await getFiles(assetData.files)
-  const sprites = await Sprite.loadAll(files)
+  const sprites = await Sprite.loadAll(files, [])
   if (sprites.length === 0) throw new Error('no sprite loaded')
   return sprites[0]
 }
@@ -36,7 +38,7 @@ export async function asset2Sprite(assetData: PartialAssetData) {
 const virtualBackdropConfigFileName = 'assets/__backdrop__.json'
 
 export async function backdrop2Asset(backdrop: Backdrop): Promise<PartialAssetData> {
-  const [config, files] = backdrop.export()
+  const [config, files] = backdrop.export({ includeId: false })
   files[virtualBackdropConfigFileName] = fromConfig(virtualBackdropConfigFileName, config)
   const { fileCollection, fileCollectionHash } = await saveFiles(files)
   return {
@@ -56,7 +58,7 @@ export async function asset2Backdrop(assetData: PartialAssetData) {
 }
 
 export async function sound2Asset(sound: Sound): Promise<PartialAssetData> {
-  const { fileCollection, fileCollectionHash } = await saveFiles(sound.export())
+  const { fileCollection, fileCollectionHash } = await saveFiles(sound.export({ includeId: false }))
   return {
     displayName: sound.name,
     assetType: AssetType.Sound,
diff --git a/spx-gui/src/models/common/cloud.ts b/spx-gui/src/models/common/cloud.ts
index 416d097c9..6ed401b16 100644
--- a/spx-gui/src/models/common/cloud.ts
+++ b/spx-gui/src/models/common/cloud.ts
@@ -24,15 +24,20 @@ export async function load(owner: string, name: string) {
   return await parseProjectData(projectData)
 }
 
-export async function save(metadata: Metadata, files: Files) {
+export async function save(metadata: Metadata, files: Files, signal?: AbortSignal) {
   const { owner, name, id } = metadata
   if (owner == null) throw new Error('owner expected')
   if (!name) throw new DefaultException({ en: 'project name not specified', zh: '未指定项目名' })
-  const { fileCollection } = await saveFiles(files)
+
+  const { fileCollection } = await saveFiles(files, signal)
+  signal?.throwIfAborted()
+
   const isPublic = metadata.isPublic ?? IsPublic.personal
   const projectData = await (id != null
-    ? updateProject(owner, name, { isPublic, files: fileCollection })
-    : addProject({ name, isPublic, files: fileCollection }))
+    ? updateProject(owner, name, { isPublic, files: fileCollection }, signal)
+    : addProject({ name, isPublic, files: fileCollection }, signal))
+  signal?.throwIfAborted()
+
   return { metadata: projectData, files }
 }
 
@@ -42,11 +47,12 @@ export async function parseProjectData({ files: fileCollection, ...metadata }: P
 }
 
 export async function saveFiles(
-  files: Files
+  files: Files,
+  signal?: AbortSignal
 ): Promise<{ fileCollection: FileCollection; fileCollectionHash: string }> {
   const fileCollection = Object.fromEntries(
     await Promise.all(
-      Object.keys(files).map(async (path) => [path, await saveFile(files[path]!)] as const)
+      Object.keys(files).map(async (path) => [path, await saveFile(files[path]!, signal)] as const)
     )
   )
   const fileCollectionHash = await hashFileCollection(fileCollection)
@@ -90,8 +96,8 @@ export function createFileWithWebUrl(url: WebUrl, name = filename(url)) {
   })
 }
 
-export async function saveFileForWebUrl(file: File) {
-  const universalUrl = await saveFile(file)
+export async function saveFileForWebUrl(file: File, signal?: AbortSignal) {
+  const universalUrl = await saveFile(file, signal)
   return universalUrlToWebUrl(universalUrl)
 }
 
@@ -102,11 +108,11 @@ async function universalUrlToWebUrl(universalUrl: UniversalUrl) {
   return map[universalUrl]
 }
 
-async function saveFile(file: File) {
+async function saveFile(file: File, signal?: AbortSignal) {
   const savedUrl = getUniversalUrl(file)
   if (savedUrl != null) return savedUrl
 
-  const url = await (isInlineable(file) ? inlineFile(file) : uploadToKodo(file))
+  const url = await (isInlineable(file) ? inlineFile(file) : uploadToKodo(file, signal))
   setUniversalUrl(file, url)
   return url
 }
@@ -135,7 +141,7 @@ type KodoUploadRes = {
   hash: string
 }
 
-async function uploadToKodo(file: File): Promise<UniversalUrl> {
+async function uploadToKodo(file: File, signal?: AbortSignal): Promise<UniversalUrl> {
   const nativeFile = await toNativeFile(file)
   const { token, maxSize, bucket, region } = await getUpInfo()
   if (nativeFile.size > maxSize) throw new Error(`file size exceeds the limit (${maxSize} bytes)`)
@@ -150,7 +156,11 @@ async function uploadToKodo(file: File): Promise<UniversalUrl> {
     { region: region as any }
   )
   const { key } = await new Promise<KodoUploadRes>((resolve, reject) => {
-    observable.subscribe({
+    if (signal?.aborted) {
+      reject(signal.reason)
+      return
+    }
+    const subscription = observable.subscribe({
       error(e) {
         reject(e)
       },
@@ -158,6 +168,10 @@ async function uploadToKodo(file: File): Promise<UniversalUrl> {
         resolve(res)
       }
     })
+    signal?.addEventListener('abort', () => {
+      subscription.unsubscribe()
+      reject(signal.reason)
+    })
   })
   return `${fileUniversalUrlSchemes.kodo}//${bucket}/${key}`
 }
diff --git a/spx-gui/src/models/costume.ts b/spx-gui/src/models/costume.ts
index 5bd25b8bc..28f3f0a51 100644
--- a/spx-gui/src/models/costume.ts
+++ b/spx-gui/src/models/costume.ts
@@ -1,27 +1,32 @@
 import { reactive } from 'vue'
+import { nanoid } from 'nanoid'
 
 import { extname, resolve } from '@/utils/path'
 import { adaptImg } from '@/utils/spx'
 import { Disposable } from '@/utils/disposable'
 import { File, type Files } from './common/file'
-import { type Size } from './common'
-import type { Sprite } from './sprite'
+import type { Size } from './common'
 import { getCostumeName, validateCostumeName } from './common/asset-name'
-import { Animation } from './animation'
+import type { Sprite } from './sprite'
+import type { Animation } from './animation'
 
 export type CostumeInits = {
+  id?: string
   x?: number
   y?: number
   faceRight?: number
   bitmapResolution?: number
 }
 
-export type RawCostumeConfig = CostumeInits & {
+export type RawCostumeConfig = Omit<CostumeInits, 'id'> & {
+  builder_id?: string
   name?: string
   path?: string
 }
 
 export class Costume {
+  id: string
+
   private parent: Sprite | Animation | null = null
   setParent(parent: Sprite | Animation | null) {
     this.parent = parent
@@ -59,7 +64,7 @@ export class Costume {
     this.bitmapResolution = bitmapResolution
   }
 
-  async getSize() {
+  private async getRawSize() {
     const d = new Disposable()
     const imgUrl = await this.img.url((fn) => d.addDisposer(fn))
     return new Promise<Size>((resolve, reject) => {
@@ -67,8 +72,8 @@ export class Costume {
       img.src = imgUrl
       img.onload = () => {
         resolve({
-          width: img.width / this.bitmapResolution,
-          height: img.height / this.bitmapResolution
+          width: img.width,
+          height: img.height
         })
       }
       img.onerror = (e) => {
@@ -79,6 +84,14 @@ export class Costume {
     })
   }
 
+  async getSize() {
+    const rawSize = await this.getRawSize()
+    return {
+      width: rawSize.width / this.bitmapResolution,
+      height: rawSize.height / this.bitmapResolution
+    }
+  }
+
   constructor(name: string, file: File, inits?: CostumeInits) {
     this.name = name
     this.img = file
@@ -86,6 +99,7 @@ export class Costume {
     this.y = inits?.y ?? 0
     this.faceRight = inits?.faceRight ?? 0
     this.bitmapResolution = inits?.bitmapResolution ?? 1
+    this.id = inits?.id ?? nanoid()
     return reactive(this) as this
   }
 
@@ -98,6 +112,19 @@ export class Costume {
     })
   }
 
+  /**
+   * Adjust position to fit current sprite
+   * TODO: review the relation between `autoFit` & `Costume.create` / `Sprite addCostume`
+   */
+  async autoFit() {
+    if (this.parent == null) throw new Error(`parent required to autoFit costume ${this.name}`)
+    const reference = this.parent.costumes[0]
+    if (reference == null || reference === this) return
+    const [referenceSize, size] = await Promise.all([reference.getRawSize(), this.getRawSize()])
+    this.setX(reference.x + (size.width - referenceSize.width) / 2)
+    this.setY(reference.y + (size.height - referenceSize.height) / 2)
+  }
+
   /**
    * Create instance with default inits
    * Note that the "default" means default behavior for builder, not the default behavior of spx
@@ -111,7 +138,7 @@ export class Costume {
   }
 
   static load(
-    { name, path, ...inits }: RawCostumeConfig,
+    { builder_id: id, name, path, ...inits }: RawCostumeConfig,
     files: Files,
     /** Path of directory which contains the sprite's config file */
     basePath: string
@@ -120,15 +147,20 @@ export class Costume {
     if (path == null) throw new Error(`path expected for costume ${name}`)
     const file = files[resolve(basePath, path)]
     if (file == null) throw new Error(`file ${path} for costume ${name} not found`)
-    return new Costume(name, file, inits)
+    return new Costume(name, file, { ...inits, id })
   }
 
-  export(
+  export({
+    basePath,
+    includeId = true,
+    namePrefix = ''
+  }: {
     /** Path of directory which contains the sprite's config file */
     basePath: string
-  ): [RawCostumeConfig, Files] {
-    const name =
-      this.parent instanceof Animation ? this.parent.withCostumeNamePrefix(this.name) : this.name
+    includeId?: boolean
+    namePrefix?: string
+  }): [RawCostumeConfig, Files] {
+    const name = namePrefix + this.name
     const filename = name + extname(this.img.name)
     const config: RawCostumeConfig = {
       x: this.x,
@@ -138,6 +170,7 @@ export class Costume {
       name,
       path: filename
     }
+    if (includeId) config.builder_id = this.id
     const files = {
       [resolve(basePath, filename)]: this.img
     }
diff --git a/spx-gui/src/models/project/index.test.ts b/spx-gui/src/models/project/index.test.ts
index 19034b87d..a2a08ed99 100644
--- a/spx-gui/src/models/project/index.test.ts
+++ b/spx-gui/src/models/project/index.test.ts
@@ -8,6 +8,8 @@ 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 type { ProjectData } from '@/apis/project'
+import { Cancelled } from '@/utils/exception'
 
 function mockFile(name = 'mocked') {
   return fromText(name, Math.random() + '')
@@ -15,28 +17,38 @@ function mockFile(name = 'mocked') {
 
 function makeProject() {
   const project = new Project()
+  const sound = new Sound('sound', mockFile())
+  project.addSound(sound)
+
   const sprite = new Sprite('Sprite')
   const costume = new Costume('default', mockFile())
   sprite.addCostume(costume)
   const animationCostumes = Array.from({ length: 3 }, (_, i) => new Costume(`a${i}`, mockFile()))
   const animation = Animation.create('default', animationCostumes)
   sprite.addAnimation(animation)
-  const sound = new Sound('sound', mockFile())
   project.addSprite(sprite)
-  project.addSound(sound)
   return project
 }
 
 describe('Project', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    vi.restoreAllMocks()
+  })
+
   it('should preserve animation sound with exportGameFiles & loadGameFiles', async () => {
     const project = makeProject()
     const sprite = project.sprites[0]
     const animation = sprite.animations[0]
-    animation.setSound(project.sounds[0].name)
+    animation.setSound(project.sounds[0].id)
 
     const files = project.exportGameFiles()
     await project.loadGameFiles(files)
-    expect(project.sprites[0].animations[0].sound).toBe(project.sounds[0].name)
+    expect(project.sprites[0].animations[0].sound).toBe(project.sounds[0].id)
   })
 
   it('should preserve order for sprites & sounds however files are sorted', async () => {
@@ -87,21 +99,27 @@ describe('Project', () => {
     project.addSound(sound3)
 
     project.select({ type: 'stage' })
-    project.removeSound('sound3')
+    project.removeSound(sound3.id)
     expect(project.selected).toEqual({ type: 'stage' })
 
-    project.select({ type: 'sound', name: 'sound' })
+    project.select({ type: 'sound', id: project.sounds[0].id })
 
-    project.removeSound('sound')
+    project.removeSound(project.sounds[0].id)
+    const sound2Id = project.sounds.find((s) => s.name === 'sound2')?.id
+    expect(sound2Id).toBeTruthy()
+    expect(sound2Id).toEqual(sound2.id)
     expect(project.selected).toEqual({
       type: 'sound',
-      name: 'sound2'
+      id: sound2Id
     })
 
-    project.removeSound('sound2')
+    project.removeSound(sound2.id)
+
+    const spriteId = project.sprites.find((s) => s.name === 'Sprite')?.id
+    expect(spriteId).toBeTruthy()
     expect(project.selected).toEqual({
       type: 'sprite',
-      name: 'Sprite'
+      id: spriteId
     })
   })
 
@@ -113,18 +131,17 @@ describe('Project', () => {
     project.addSprite(sprite3)
 
     project.select({ type: 'stage' })
-    project.removeSprite('Sprite3')
+    project.removeSprite(sprite3.id)
     expect(project.selected).toEqual({ type: 'stage' })
 
-    project.select({ type: 'sprite', name: 'Sprite' })
+    project.select({ type: 'sprite', id: project.sprites[0].id })
 
-    project.removeSprite('Sprite')
-    expect(project.selected).toEqual({
-      type: 'sprite',
-      name: 'Sprite2'
-    })
+    project.removeSprite(project.sprites[0].id)
+    const nextId: string = (project.selected as any).id
+    expect(nextId).toBeTruthy()
+    expect(nextId).toEqual(project.sprites.find((s) => s.name === 'Sprite2')?.id)
 
-    project.removeSprite('Sprite2')
+    project.removeSprite(sprite2.id)
     expect(project.selected).toBeNull()
   })
 
@@ -139,16 +156,54 @@ describe('Project', () => {
     await expect((project as any).saveToLocalCache('key')).rejects.toThrow('disposed')
     expect(saveToLocalCacheMethod).toHaveBeenCalledWith('key')
   })
-})
 
-describe('ProjectAutoSave', () => {
-  beforeEach(() => {
-    vi.useFakeTimers()
+  it('should abort previous saveToCloud call when a new one is initiated', async () => {
+    const project = makeProject()
+
+    const cloudSaveMock = vi
+      .spyOn(cloudHelper, 'save')
+      .mockImplementation((metadata, files, signal) => {
+        return new Promise((resolve, reject) => {
+          const timeoutId = setTimeout(() => {
+            resolve({ metadata: metadata as ProjectData, files })
+          }, 1000)
+
+          if (signal) {
+            signal.addEventListener('abort', () => {
+              clearTimeout(timeoutId)
+              reject(signal.reason)
+            })
+          }
+        })
+      })
+
+    const firstSavePromise = project.saveToCloud()
+    await vi.advanceTimersByTimeAsync(500)
+
+    const secondSavePromise = project.saveToCloud()
+    vi.runAllTimersAsync()
+
+    await expect(firstSavePromise).rejects.toThrow(Cancelled)
+    await expect(secondSavePromise).resolves.not.toThrow()
+    expect(cloudSaveMock).toHaveBeenCalledTimes(2)
   })
 
-  afterEach(() => {
-    vi.useRealTimers()
-    vi.restoreAllMocks()
+  it('should not abort saveToCloud call if it completes before a new one is initiated', async () => {
+    const project = makeProject()
+
+    const cloudSaveMock = vi.spyOn(cloudHelper, 'save').mockImplementation((metadata, files) => {
+      return new Promise((resolve) => {
+        resolve({ metadata: metadata as ProjectData, files })
+      })
+    })
+
+    const firstSavePromise = project.saveToCloud()
+    await expect(firstSavePromise).resolves.not.toThrow()
+
+    const secondSavePromise = project.saveToCloud()
+    await expect(secondSavePromise).resolves.not.toThrow()
+
+    expect(cloudSaveMock).toHaveBeenCalledTimes(2)
   })
 
   // https://github.com/goplus/builder/pull/794#discussion_r1728120369
@@ -177,7 +232,7 @@ describe('ProjectAutoSave', () => {
     expect(cloudSaveMock).toHaveBeenCalledTimes(1)
     expect(localSaveMock).toHaveBeenCalledTimes(1)
 
-    project.removeSprite(newSprite.name)
+    project.removeSprite(newSprite.id)
     await flushPromises()
     await vi.advanceTimersByTimeAsync(1000) // wait for changes to be picked up
     await flushPromises()
diff --git a/spx-gui/src/models/project/index.ts b/spx-gui/src/models/project/index.ts
index 730401c85..b09f64c93 100644
--- a/spx-gui/src/models/project/index.ts
+++ b/spx-gui/src/models/project/index.ts
@@ -22,6 +22,8 @@ import { Sound } from '../sound'
 import type { RawWidgetConfig } from '../widget'
 import { History } from './history'
 import Mutex from '@/utils/mutex'
+import { Cancelled } from '@/utils/exception'
+import { untilConditionMet } from '@/utils/utils'
 
 export type { Action } from './history'
 
@@ -43,11 +45,11 @@ const projectConfigFilePath = join('assets', projectConfigFileName)
 export type Selected =
   | {
       type: 'sprite'
-      name: string
+      id: string
     }
   | {
       type: 'sound'
-      name: string
+      id: string
     }
   | {
       type: 'stage'
@@ -111,10 +113,11 @@ export class Project extends Disposable {
   sounds: Sound[]
   zorder: string[]
 
-  removeSprite(name: string) {
-    const idx = this.sprites.findIndex((s) => s.name === name)
+  removeSprite(id: string) {
+    const idx = this.sprites.findIndex((s) => s.id === id)
+    if (idx < 0) throw new Error(`sprite ${id} not found`)
     const [sprite] = this.sprites.splice(idx, 1)
-    this.zorder = this.zorder.filter((v) => v !== sprite.name)
+    this.zorder = this.zorder.filter((v) => v !== sprite.id)
     sprite.dispose()
     this.autoSelect()
   }
@@ -128,53 +131,43 @@ export class Project extends Disposable {
     sprite.setProject(this)
     sprite.addDisposer(() => sprite.setProject(null))
     this.sprites.push(sprite)
-    if (!this.zorder.includes(sprite.name)) {
-      this.zorder = [...this.zorder, sprite.name]
+    if (!this.zorder.includes(sprite.id)) {
+      this.zorder = [...this.zorder, sprite.id]
     }
-    sprite.addDisposer(
-      // update zorder & selected when sprite renamed
-      watch(
-        () => sprite.name,
-        (newName, originalName) => {
-          this.zorder = this.zorder.map((v) => (v === originalName ? newName : v))
-          if (this.selected?.type === 'sprite' && this.selected.name === originalName) {
-            this.select({ type: 'sprite', name: newName })
-          }
-        }
-      )
-    )
   }
+  // TODO: Test this method
   private setSpriteZorderIdx(
-    name: string,
+    id: string,
     newIdx: number | ((idx: number, length: number) => number)
   ) {
-    const idx = this.zorder.findIndex((v) => v === name)
-    if (idx < 0) throw new Error(`sprite ${name} not found in zorder`)
+    const idx = this.zorder.findIndex((v) => v === id)
+    if (idx < 0) throw new Error(`sprite ${id} not found in zorder`)
     const newIdxVal = typeof newIdx === 'function' ? newIdx(idx, this.zorder.length) : newIdx
-    const newZorder = this.zorder.filter((v) => v !== name)
-    newZorder.splice(newIdxVal, 0, name)
+    const newZorder = this.zorder.filter((v) => v !== id)
+    newZorder.splice(newIdxVal, 0, id)
     this.zorder = newZorder
   }
-  upSpriteZorder(name: string) {
-    this.setSpriteZorderIdx(name, (i, len) => Math.min(i + 1, len - 1))
+  upSpriteZorder(id: string) {
+    this.setSpriteZorderIdx(id, (i, len) => Math.min(i + 1, len - 1))
   }
-  downSpriteZorder(name: string) {
-    this.setSpriteZorderIdx(name, (i) => Math.max(i - 1, 0))
+  downSpriteZorder(id: string) {
+    this.setSpriteZorderIdx(id, (i) => Math.max(i - 1, 0))
   }
-  topSpriteZorder(name: string) {
-    this.setSpriteZorderIdx(name, (_, len) => len - 1)
+  topSpriteZorder(id: string) {
+    this.setSpriteZorderIdx(id, (_, len) => len - 1)
   }
-  bottomSpriteZorder(name: string) {
-    this.setSpriteZorderIdx(name, 0)
+  bottomSpriteZorder(id: string) {
+    this.setSpriteZorderIdx(id, 0)
   }
 
-  removeSound(name: string) {
-    const idx = this.sounds.findIndex((s) => s.name === name)
+  removeSound(id: string) {
+    const idx = this.sounds.findIndex((s) => s.id === id)
+    if (idx < 0) throw new Error(`sound ${id} not found`)
     const [sound] = this.sounds.splice(idx, 1)
-    // TODO: it may be better to do `setSound(null)` in `Animation`, but for now it is difficult for `Animation` to know when sound is removed
+    // TODO: it may be better to do `setSoundId(null)` in `Animation`, but for now it is difficult for `Animation` to know when sound is removed
     for (const sprite of this.sprites) {
       for (const animation of sprite.animations) {
-        if (animation.sound === sound.name) {
+        if (animation.sound === sound.id) {
           animation.setSound(null)
         }
       }
@@ -192,25 +185,6 @@ export class Project extends Disposable {
     sound.setProject(this)
     sound.addDisposer(() => sound.setProject(null))
     this.sounds.push(sound)
-    sound.addDisposer(
-      // update animation.sound & selected when sound renamed
-      // TODO: there are quite some similar logic to deal with such references among models, we may introduce model `ID` to simplify that
-      watch(
-        () => sound.name,
-        (newName, originalName) => {
-          for (const sprite of this.sprites) {
-            for (const animation of sprite.animations) {
-              if (animation.sound === originalName) {
-                animation.setSound(newName)
-              }
-            }
-          }
-          if (this.selected?.type === 'sound' && this.selected.name === originalName) {
-            this.select({ type: 'sound', name: newName })
-          }
-        }
-      )
-    )
   }
 
   setPublic(isPublic: IsPublic) {
@@ -222,13 +196,13 @@ export class Project extends Disposable {
   get selectedSprite() {
     const { selected, sprites } = this
     if (selected?.type !== 'sprite') return null
-    return sprites.find((s) => s.name === selected.name) ?? null
+    return sprites.find((s) => s.id === selected.id) ?? null
   }
 
   get selectedSound() {
     const { selected, sounds } = this
     if (selected?.type !== 'sound') return null
-    return sounds.find((s) => s.name === selected.name) ?? null
+    return sounds.find((s) => s.id === selected.id) ?? null
   }
 
   select(selected: Selected) {
@@ -243,11 +217,11 @@ export class Project extends Disposable {
     const selected = this.selected
     if (selected?.type === 'stage') return
     if (selected?.type === 'sound' && this.selectedSound == null && this.sounds[0] != null) {
-      this.select({ type: 'sound', name: this.sounds[0].name })
+      this.select({ type: 'sound', id: this.sounds[0].id })
       return
     }
     if (this.selectedSprite == null) {
-      this.select(this.sprites[0] != null ? { type: 'sprite', name: this.sprites[0].name } : null)
+      this.select(this.sprites[0] != null ? { type: 'sprite', id: this.sprites[0].id } : null)
     }
   }
 
@@ -265,6 +239,8 @@ export class Project extends Disposable {
     this.addDisposer(() => {
       this.sprites.splice(0).forEach((s) => s.dispose())
       this.sounds.splice(0).forEach((s) => s.dispose())
+      this.zorder = []
+      this.stage.dispose()
     })
     return reactiveThis
   }
@@ -299,18 +275,30 @@ export class Project extends Disposable {
       builder_soundOrder: soundOrder,
       ...rawStageConfig
     } = config
+
+    const sounds = await Sound.loadAll(files)
+    const sprites = await Sprite.loadAll(files, sounds)
+
     const widgets: RawWidgetConfig[] = []
     const zorder: string[] = []
     rawZorder?.forEach((item) => {
-      if (typeof item === 'string') zorder.push(item)
-      else widgets.push(item)
+      if (typeof item === 'string') {
+        // `item` is a sprite name
+        const id = sprites.find((s) => s.name === item)?.id
+        if (id == null) {
+          console.warn(`sprite ${item} not found`)
+          return
+        }
+        zorder.push(id)
+      } else {
+        // `item` is a widget config
+        widgets.push(item)
+      }
     })
+
     const stageConfig = { ...rawStageConfig, widgets }
-    const [stage, sounds, sprites] = await Promise.all([
-      Stage.load(stageConfig, files),
-      Sound.loadAll(files),
-      Sprite.loadAll(files)
-    ])
+    const stage = await Stage.load(stageConfig, files)
+
     this.stage = stage
     this.sprites.splice(0).forEach((s) => s.dispose())
     orderBy(sprites, spriteOrder).forEach((s) => this.addSprite(s))
@@ -324,6 +312,11 @@ export class Project extends Disposable {
     const files: Files = {}
     const [stageConfig, stageFiles] = this.stage.export()
     const { widgets, ...restStageConfig } = stageConfig
+    const zorderNames = this.zorder.map((id) => {
+      const sprite = this.sprites.find((s) => s.id === id)
+      if (sprite == null) throw new Error(`sprite ${id} not found`)
+      return sprite.name
+    })
     const config: RawProjectConfig = {
       ...restStageConfig,
       run: {
@@ -333,13 +326,13 @@ export class Project extends Disposable {
         width: stageConfig.map?.width,
         height: stageConfig.map?.height
       },
-      zorder: [...this.zorder, ...(widgets ?? [])],
-      builder_spriteOrder: this.sprites.map((s) => s.name),
-      builder_soundOrder: this.sounds.map((s) => s.name)
+      zorder: [...zorderNames, ...(widgets ?? [])],
+      builder_spriteOrder: this.sprites.map((s) => s.id),
+      builder_soundOrder: this.sounds.map((s) => s.id)
     }
     files[projectConfigFilePath] = fromConfig(projectConfigFileName, config)
     Object.assign(files, stageFiles)
-    Object.assign(files, ...this.sprites.map((s) => s.export()))
+    Object.assign(files, ...this.sprites.map((s) => s.export({ sounds: this.sounds })))
     Object.assign(files, ...this.sounds.map((s) => s.export()))
     return files
   }
@@ -383,12 +376,28 @@ export class Project extends Disposable {
   }
 
   /** Save to cloud */
+  private saveToCloudAbortController: AbortController | null = null
+  private get isSavingToCloud() {
+    return this.saveToCloudAbortController != null
+  }
   async saveToCloud() {
-    const [metadata, files] = await this.export()
-    if (this.isDisposed) throw new Error('disposed')
-    const saved = await cloudHelper.save(metadata, files)
-    this.loadMetadata(saved.metadata)
-    this.lastSyncedFilesHash = await hashFiles(files)
+    if (this.saveToCloudAbortController != null) {
+      this.saveToCloudAbortController.abort(new Cancelled('aborted'))
+    }
+    const abortController = new AbortController()
+    this.saveToCloudAbortController = abortController
+
+    try {
+      if (this.isDisposed) throw new Error('disposed')
+      const [metadata, files] = await this.export()
+      const saved = await cloudHelper.save(metadata, files, abortController.signal)
+      this.loadMetadata(saved.metadata)
+      this.lastSyncedFilesHash = await hashFiles(files)
+    } finally {
+      if (this.saveToCloudAbortController === abortController) {
+        this.saveToCloudAbortController = null
+      }
+    }
   }
 
   /** Load from local cache */
@@ -401,8 +410,8 @@ export class Project extends Disposable {
 
   /** Save to local cache */
   private async saveToLocalCache(key: string) {
-    const [metadata, files] = await this.export()
     if (this.isDisposed) throw new Error('disposed')
+    const [metadata, files] = await this.export()
     await localHelper.save(key, metadata, files)
   }
 
@@ -428,13 +437,25 @@ export class Project extends Disposable {
         this.autoSaveToCloudState = AutoSaveToCloudState.Saving
 
         try {
+          if (this.isSavingToCloud) {
+            await untilConditionMet(
+              () => this.isSavingToCloud,
+              () => !this.isSavingToCloud
+            )
+          }
+
           if (this.hasUnsyncedChanges) await this.saveToCloud()
           this.autoSaveToCloudState = AutoSaveToCloudState.Saved
         } catch (e) {
           this.autoSaveToCloudState = AutoSaveToCloudState.Failed
-          retryAutoSave()
-          await this.saveToLocalCache(localCacheKey) // prevent data loss
-          console.error('failed to auto save to cloud', e)
+          if (e instanceof Cancelled) {
+            autoSaveToCloud()
+            save.flush()
+          } else {
+            retryAutoSave()
+            await this.saveToLocalCache(localCacheKey) // prevent data loss
+            console.error('failed to auto save to cloud', e)
+          }
           return
         }
 
@@ -454,6 +475,20 @@ export class Project extends Disposable {
       }, 5000)
       this.addDisposer(retryAutoSave.cancel)
 
+      // fire pending or retryable auto saves immediately when a new save occurs, making autoSaveToCloudState more responsive
+      this.addDisposer(
+        watch(
+          () => this.isSavingToCloud,
+          async () => {
+            if (this.isSavingToCloud) {
+              await retryAutoSave.flush()
+              save.flush()
+            }
+          },
+          { immediate: true }
+        )
+      )
+
       return () => {
         retryAutoSave.cancel()
         if (this.autoSaveToCloudState !== AutoSaveToCloudState.Saving)
@@ -527,6 +562,6 @@ export function fullName(owner: string, name: string) {
 function orderBy<T extends Sprite | Sound>(list: T[], order: string[] | undefined) {
   if (order == null) return list
   return list.slice().sort((a, b) => {
-    return order.indexOf(a.name) - order.indexOf(b.name)
+    return order.indexOf(a.id) - order.indexOf(b.id)
   })
 }
diff --git a/spx-gui/src/models/sound.ts b/spx-gui/src/models/sound.ts
index 822b114b2..de2edc6a2 100644
--- a/spx-gui/src/models/sound.ts
+++ b/spx-gui/src/models/sound.ts
@@ -5,13 +5,16 @@ import { Disposable } from '@/utils/disposable'
 import { File, fromConfig, type Files, listDirs, toConfig } from './common/file'
 import { getSoundName, validateSoundName } from './common/asset-name'
 import type { Project } from './project'
+import { nanoid } from 'nanoid'
 
 export type SoundInits = {
+  id?: string
   rate?: number
   sampleCount?: number
 }
 
-export type RawSoundConfig = SoundInits & {
+export type RawSoundConfig = Omit<SoundInits, 'id'> & {
+  builder_id?: string
   path?: string
 }
 
@@ -19,6 +22,8 @@ export const soundAssetPath = 'assets/sounds'
 export const soundConfigFileName = 'index.json'
 
 export class Sound extends Disposable {
+  id: string
+
   _project: Project | null = null
   setProject(project: Project | null) {
     this._project = project
@@ -52,6 +57,7 @@ export class Sound extends Disposable {
     this.file = file
     this.rate = inits?.rate ?? 0
     this.sampleCount = inits?.sampleCount ?? 0
+    this.id = inits?.id ?? nanoid()
     return reactive(this) as this
   }
 
@@ -68,11 +74,11 @@ export class Sound extends Disposable {
     const pathPrefix = join(soundAssetPath, name)
     const configFile = files[join(pathPrefix, soundConfigFileName)]
     if (configFile == null) return null
-    const { path, ...inits } = (await toConfig(configFile)) as RawSoundConfig
+    const { builder_id: id, path, ...inits } = (await toConfig(configFile)) as RawSoundConfig
     if (path == null) throw new Error(`path expected for sound ${name}`)
     const file = files[resolve(pathPrefix, path)]
     if (file == null) throw new Error(`file ${path} for sound ${name} not found`)
-    return new Sound(name, file, inits)
+    return new Sound(name, file, { ...inits, id })
   }
 
   static async loadAll(files: Files) {
@@ -90,13 +96,14 @@ export class Sound extends Disposable {
   }
 
   // config is included in files
-  export(): Files {
+  export({ includeId = true }: { includeId?: boolean } = {}): Files {
     const filename = this.name + extname(this.file.name)
     const config: RawSoundConfig = {
       rate: this.rate,
       sampleCount: this.sampleCount,
       path: filename
     }
+    if (includeId) config.builder_id = this.id
     const files: Files = {}
     const assetPath = join(soundAssetPath, this.name)
     files[join(assetPath, soundConfigFileName)] = fromConfig(soundConfigFileName, config)
diff --git a/spx-gui/src/models/sprite.test.ts b/spx-gui/src/models/sprite.test.ts
new file mode 100644
index 000000000..aeeee5dd2
--- /dev/null
+++ b/spx-gui/src/models/sprite.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import { Sprite, State } from './sprite'
+import { Animation } from './animation'
+import { Costume } from './costume'
+import { File } from './common/file'
+
+function makeCostume(name: string) {
+  return new Costume(name, new File(`${name}.png`, async () => new ArrayBuffer(0)))
+}
+
+describe('Sprite', () => {
+  it('should export & load animations correctly', async () => {
+    const sprite = new Sprite('Sprite')
+    sprite.addCostume(makeCostume('costume1'))
+    sprite.addCostume(makeCostume('costume2'))
+    const animation1 = new Animation('animation1')
+    animation1.setCostumes([makeCostume('costume3'), makeCostume('costume4')])
+    const animation2 = new Animation('animation2')
+    animation2.setCostumes([makeCostume('costume5'), makeCostume('costume6')])
+    sprite.addAnimation(animation1)
+    sprite.addAnimation(animation2)
+    const exported = sprite.export({ sounds: [] })
+    const [loadedSprite] = await Sprite.loadAll(exported, [])
+    expect(loadedSprite.costumes.map((c) => c.name)).toEqual(['costume1', 'costume2'])
+    expect(loadedSprite.animations.map((c) => c.name)).toEqual(['animation1', 'animation2'])
+    expect(loadedSprite.animations[0].costumes.map((c) => c.name)).toEqual(['costume3', 'costume4'])
+    expect(loadedSprite.animations[1].costumes.map((c) => c.name)).toEqual(['costume5', 'costume6'])
+  })
+  it('should handle id-name conversion for animationBindings correctly', async () => {
+    const sprite = new Sprite('Sprite')
+    const animation = new Animation('animation')
+    animation.setCostumes([makeCostume('costume1')])
+    sprite.addAnimation(animation)
+    sprite.setAnimationBoundStates(animation.id, [State.turn, State.die])
+    expect(sprite.getAnimationBoundStates(animation.id)).toEqual([State.die, State.turn])
+
+    const exported = sprite.export({ sounds: [] })
+    const imported = await Sprite.loadAll(exported, [])
+
+    expect(imported[0].getAnimationBoundStates(animation.id)).toEqual([State.die, State.turn])
+  })
+})
diff --git a/spx-gui/src/models/sprite.ts b/spx-gui/src/models/sprite.ts
index 51ffc2438..80b9d8660 100644
--- a/spx-gui/src/models/sprite.ts
+++ b/spx-gui/src/models/sprite.ts
@@ -3,7 +3,7 @@
  * @desc Object-model definition for Sprite & Costume
  */
 
-import { reactive, watch } from 'vue'
+import { reactive } from 'vue'
 import { nomalizeDegree } from '@/utils/utils'
 import { join } from '@/utils/path'
 import { Disposable } from '@/utils/disposable'
@@ -17,6 +17,8 @@ import {
 import { type RawCostumeConfig, Costume } from './costume'
 import { Animation, type RawAnimationConfig } from './animation'
 import type { Project } from './project'
+import { nanoid } from 'nanoid'
+import type { Sound } from './sound'
 
 export enum RotationStyle {
   none = 'none',
@@ -39,23 +41,27 @@ export type Pivot = {
 }
 
 export type SpriteInits = {
+  id?: string
   heading?: number
   x?: number
   y?: number
   size?: number
   rotationStyle?: string
   costumeIndex?: number
-  currentCostumeIndex?: number // For compatibility
   visible?: boolean
   isDraggable?: boolean
-  defaultAnimation?: string
-  animBindings?: Record<string, string | undefined>
+  animationBindings?: Record<State, string | undefined>
   pivot?: Pivot
 }
 
-export type RawSpriteConfig = SpriteInits & {
+export type RawSpriteConfig = Omit<SpriteInits, 'id' | 'animationBindings'> & {
+  builder_id?: string
+  /** Same as costumeIndex, for compatibility only */
+  currentCostumeIndex?: number
   costumes?: RawCostumeConfig[]
   fAnimations?: Record<string, RawAnimationConfig | undefined>
+  defaultAnimation?: string
+  animBindings?: Record<string, string | undefined>
   // Not supported by builder:
   costumeSet?: unknown
   costumeMPSet?: unknown
@@ -69,13 +75,15 @@ export function getSpriteAssetPath(name: string) {
   return join(spriteAssetPath, name)
 }
 
-function getSpriteCodeFileName(name: string) {
+function getSpriteCodeFilePath(name: string) {
   return `${name}.spx`
 }
 
 export const spriteConfigFileName = 'index.json'
 
 export class Sprite extends Disposable {
+  id: string
+
   private project: Project | null = null
   setProject(project: Project | null) {
     this.project = project
@@ -92,20 +100,23 @@ export class Sprite extends Disposable {
   setCode(code: string) {
     this.code = code
   }
+  get codeFilePath() {
+    return getSpriteCodeFilePath(this.name)
+  }
 
   costumes: Costume[]
   private costumeIndex: number
   get defaultCostume(): Costume | null {
     return this.costumes[this.costumeIndex] ?? null
   }
-  setDefaultCostume(name: string) {
-    const idx = this.costumes.findIndex((s) => s.name === name)
-    if (idx === -1) throw new Error(`costume ${name} not found`)
+  setDefaultCostume(id: string) {
+    const idx = this.costumes.findIndex((s) => s.id === id)
+    if (idx === -1) throw new Error(`costume ${id} not found`)
     this.costumeIndex = idx
   }
-  removeCostume(name: string) {
-    const idx = this.costumes.findIndex((s) => s.name === name)
-    if (idx === -1) throw new Error(`costume ${name} not found`)
+  removeCostume(id: string) {
+    const idx = this.costumes.findIndex((s) => s.id === id)
+    if (idx === -1) throw new Error(`costume ${id} not found`)
     const [constume] = this.costumes.splice(idx, 1)
     constume.setParent(null)
 
@@ -130,12 +141,12 @@ export class Sprite extends Disposable {
   }
 
   animations: Animation[]
-  removeAnimation(name: string) {
-    const idx = this.animations.findIndex((s) => s.name === name)
-    if (idx === -1) throw new Error(`animation ${name} not found`)
+  removeAnimation(id: string) {
+    const idx = this.animations.findIndex((s) => s.id === id)
+    if (idx === -1) throw new Error(`animation ${id} not found`)
     const [animation] = this.animations.splice(idx, 1)
-    Object.entries(this.animationBindings).forEach(([state, name]) => {
-      if (name === animation.name) this.animationBindings[state as State] = undefined
+    Object.entries(this.animationBindings).forEach(([state, id]) => {
+      if (id === animation.id) this.animationBindings[state as State] = undefined
     })
     animation.setSprite(null)
     animation.dispose()
@@ -149,31 +160,20 @@ export class Sprite extends Disposable {
     animation.setName(newAnimationName)
     animation.setSprite(this)
     this.animations.push(animation)
-    animation.addDisposer(
-      // update animationBindings when sprite renamed
-      watch(
-        () => animation.name,
-        (newName, originalName) => {
-          Object.entries(this.animationBindings).forEach(([state, name]) => {
-            if (name === originalName) this.animationBindings[state as State] = newName
-          })
-        }
-      )
-    )
   }
 
   private animationBindings: Record<State, string | undefined>
-  getAnimationBoundStates(animationName: string) {
+  getAnimationBoundStates(animationId: string) {
     const states: State[] = []
-    Object.entries(this.animationBindings).forEach(([state, name]) => {
-      if (name === animationName) states.push(state as State)
+    Object.entries(this.animationBindings).forEach(([state, id]) => {
+      if (id === animationId) states.push(state as State)
     })
     return states
   }
-  setAnimationBoundStates(animationName: string, states: State[]) {
+  setAnimationBoundStates(animationId: string, states: State[]) {
     Object.entries(this.animationBindings).forEach(([state, bound]) => {
-      if (states.includes(state as State)) this.animationBindings[state as State] = animationName
-      else if (bound === animationName) this.animationBindings[state as State] = undefined
+      if (states.includes(state as State)) this.animationBindings[state as State] = animationId
+      else if (bound === animationId) this.animationBindings[state as State] = undefined
     })
   }
 
@@ -226,22 +226,23 @@ export class Sprite extends Disposable {
     this.addDisposer(() => {
       this.animations.splice(0).forEach((a) => a.dispose())
     })
-    this.animationBindings = {
-      [State.default]: inits?.defaultAnimation,
-      [State.die]: inits?.animBindings?.[State.die],
-      [State.step]: inits?.animBindings?.[State.step],
-      [State.turn]: inits?.animBindings?.[State.turn],
-      [State.glide]: inits?.animBindings?.[State.glide]
+    this.animationBindings = inits?.animationBindings ?? {
+      [State.default]: undefined,
+      [State.die]: undefined,
+      [State.step]: undefined,
+      [State.turn]: undefined,
+      [State.glide]: undefined
     }
     this.heading = inits?.heading ?? 0
     this.x = inits?.x ?? 0
     this.y = inits?.y ?? 0
     this.size = inits?.size ?? 0
     this.rotationStyle = getRotationStyle(inits?.rotationStyle)
-    this.costumeIndex = inits?.costumeIndex ?? inits?.currentCostumeIndex ?? 0
+    this.costumeIndex = inits?.costumeIndex ?? 0
     this.visible = inits?.visible ?? false
     this.isDraggable = inits?.isDraggable ?? false
     this.pivot = inits?.pivot ?? { x: 0, y: 0 }
+    this.id = inits?.id ?? nanoid()
     return reactive(this) as this
   }
 
@@ -276,6 +277,10 @@ export class Sprite extends Disposable {
     }
   }
 
+  async autoFitCostumes(costumes = this.costumes) {
+    await Promise.all(costumes.map((c) => c.autoFit()))
+  }
+
   /** Create sprite within builder (by user actions) */
   static create(nameBase: string, code?: string, inits?: SpriteInits) {
     return new Sprite(getSpriteName(null, nameBase), code, {
@@ -288,26 +293,30 @@ export class Sprite extends Disposable {
     })
   }
 
-  static async load(name: string, files: Files) {
+  static async load(name: string, files: Files, sounds: Sound[]) {
     const pathPrefix = getSpriteAssetPath(name)
     const configFile = files[join(pathPrefix, spriteConfigFileName)]
     if (configFile == null) return null
     const {
+      builder_id: id,
+      currentCostumeIndex,
       costumes: costumeConfigs,
       costumeSet,
       costumeMPSet,
       fAnimations: animationConfigs,
       mAnimations,
       tAnimations,
+      defaultAnimation,
+      animBindings,
       ...inits
     } = (await toConfig(configFile)) as RawSpriteConfig
-    const codeFile = files[getSpriteCodeFileName(name)]
+    const codeFile = files[getSpriteCodeFilePath(name)]
     const code = codeFile != null ? await toText(codeFile) : ''
-    const sprite = new Sprite(name, code, inits)
+
+    const costumes: Costume[] = []
     if (costumeConfigs != null) {
-      const costumes = (costumeConfigs ?? []).map((c) => Costume.load(c, files, pathPrefix))
-      for (const costume of costumes) {
-        sprite.addCostume(costume)
+      for (const config of costumeConfigs) {
+        costumes.push(Costume.load(config, files, pathPrefix))
       }
     } else {
       if (costumeSet != null) console.warn(`unsupported field: costumeSet for sprite ${name}`)
@@ -315,25 +324,50 @@ export class Sprite extends Disposable {
         console.warn(`unsupported field: costumeMPSet for sprite ${name}`)
       else console.warn(`no costume found for sprite: ${name}`)
     }
+
+    const animationCostumeSet = new Set<string>()
+    const animations: Animation[] = []
     if (animationConfigs != null) {
-      const animations = Object.entries(animationConfigs).map(([name, config]) =>
-        Animation.load(name, config!, sprite)
-      )
-      for (const animation of animations) {
-        sprite.addAnimation(animation)
+      for (const [name, config] of Object.entries(animationConfigs)) {
+        const [animation, animationCostumes] = Animation.load(name, config!, costumes, sounds)
+        animations.push(animation)
+        for (const c of animationCostumes) animationCostumeSet.add(c)
       }
     }
     if (mAnimations != null) console.warn(`unsupported field: mAnimations for sprite ${name}`)
     if (tAnimations != null) console.warn(`unsupported field: tAnimations for sprite ${name}`)
+
+    const animationNameToId = (name?: string) => name && animations.find((a) => a.name === name)?.id
+
+    const sprite = new Sprite(name, code, {
+      ...inits,
+      id,
+      costumeIndex: inits.costumeIndex ?? currentCostumeIndex,
+      animationBindings: {
+        [State.default]: animationNameToId(defaultAnimation),
+        [State.die]: animationNameToId(animBindings?.[State.die]),
+        [State.step]: animationNameToId(animBindings?.[State.step]),
+        [State.turn]: animationNameToId(animBindings?.[State.turn]),
+        [State.glide]: animationNameToId(animBindings?.[State.glide])
+      }
+    })
+    for (const costume of costumes) {
+      // If this costume is included by any animation, exclude it from sprite's costume list
+      if (animationCostumeSet.has(costume.name)) continue
+      sprite.addCostume(costume)
+    }
+    for (const animation of animations) {
+      sprite.addAnimation(animation)
+    }
     return sprite
   }
 
-  static async loadAll(files: Files) {
+  static async loadAll(files: Files, sounds: Sound[]) {
     const spriteNames = listDirs(files, spriteAssetPath)
     const sprites = (
       await Promise.all(
         spriteNames.map(async (spriteName) => {
-          const sprite = await Sprite.load(spriteName, files)
+          const sprite = await Sprite.load(spriteName, files, sounds)
           if (sprite == null) console.warn('failed to load sprite:', spriteName)
           return sprite
         })
@@ -342,23 +376,47 @@ export class Sprite extends Disposable {
     return sprites
   }
 
-  export(includeCode = true): Files {
+  export({
+    includeCode = true,
+    includeId = true,
+    sounds
+  }: {
+    includeCode?: boolean
+    includeId?: boolean
+    sounds: Sound[]
+  }): Files {
     const assetPath = getSpriteAssetPath(this.name)
     const costumeConfigs: RawCostumeConfig[] = []
     const files: Files = {}
     for (const c of this.costumes) {
-      const [costumeConfig, costumeFiles] = c.export(assetPath)
+      const [costumeConfig, costumeFiles] = c.export({ basePath: assetPath, includeId })
       costumeConfigs.push(costumeConfig)
       Object.assign(files, costumeFiles)
     }
     const animationConfigs: Record<string, RawAnimationConfig> = {}
     for (const a of this.animations) {
-      const [animationConfig, animationCostumesConfigs, animationFiles] = a.export(assetPath)
+      const [animationConfig, animationCostumesConfigs, animationFiles] = a.export({
+        basePath: assetPath,
+        sounds
+      })
       animationConfigs[a.name] = animationConfig
       costumeConfigs.push(...animationCostumesConfigs)
       Object.assign(files, animationFiles)
     }
-    const { [State.default]: defaultAnimation, ...animBindings } = this.animationBindings
+    const { [State.default]: defaultAnimationId, ...animBindings } = this.animationBindings
+    const defaultAnimationName = this.animations.find((a) => a.id === defaultAnimationId)?.name
+    if (defaultAnimationId && defaultAnimationName == null)
+      console.warn('default animation', defaultAnimationId, 'not found for sprite:', this.name)
+    const animationBindingsNames = Object.entries(animBindings).reduce<
+      Record<string, string | undefined>
+    >((acc, [state, id]) => {
+      const name = this.animations.find((a) => a.id === id)?.name
+      if (id && name == null) {
+        console.warn('animation', id, 'not found for sprite:', this.name)
+      }
+      acc[state] = name
+      return acc
+    }, {})
     const config: RawSpriteConfig = {
       heading: this.heading,
       x: this.x,
@@ -371,13 +429,14 @@ export class Sprite extends Disposable {
       pivot: this.pivot,
       costumes: costumeConfigs,
       fAnimations: animationConfigs,
-      defaultAnimation: defaultAnimation,
-      animBindings: animBindings
+      defaultAnimation: defaultAnimationName,
+      animBindings: animationBindingsNames
     }
     if (includeCode) {
-      const codeFileName = getSpriteCodeFileName(this.name)
-      files[codeFileName] = fromText(codeFileName, this.code)
+      const codeFilePath = getSpriteCodeFilePath(this.name)
+      files[codeFilePath] = fromText(codeFilePath, this.code)
     }
+    if (includeId) config.builder_id = this.id
     files[`${assetPath}/${spriteConfigFileName}`] = fromConfig(spriteConfigFileName, config)
     return files
   }
diff --git a/spx-gui/src/models/stage.test.ts b/spx-gui/src/models/stage.test.ts
index 58fa2d214..b059ff8e7 100644
--- a/spx-gui/src/models/stage.test.ts
+++ b/spx-gui/src/models/stage.test.ts
@@ -46,11 +46,11 @@ describe('Stage', () => {
     const [stageConfig] = stage.export()
     expect(stageConfig.widgets!.length).toBe(2)
     expect(stageConfig.widgets![0]).toEqual({
+      builder_id: monitor1.id,
       type: 'monitor',
       name: 'monitor',
       mode: 1,
       target: '',
-      color: 15629590,
       label: 'label1',
       val: 'getVar:value1',
       x: 10,
@@ -59,11 +59,11 @@ describe('Stage', () => {
       visible: true
     })
     expect(stageConfig.widgets![1]).toEqual({
+      builder_id: monitor2.id,
       type: 'monitor',
       name: 'monitor2',
       mode: 1,
       target: '',
-      color: 15629590,
       label: 'label2',
       val: 'getVar:value2',
       x: 0,
@@ -75,7 +75,7 @@ describe('Stage', () => {
 
   it('should work well with zorder', async () => {
     const stage = new Stage()
-    const monitor1 = new Monitor('monitor', {
+    const monitor = new Monitor('monitor', {
       label: 'label1',
       variableName: 'value1',
       x: 10,
@@ -83,7 +83,7 @@ describe('Stage', () => {
       size: 2,
       visible: true
     })
-    stage.addWidget(monitor1)
+    stage.addWidget(monitor)
     const monitor2 = new Monitor('monitor2', {
       label: 'label2',
       variableName: 'value2',
@@ -93,32 +93,32 @@ describe('Stage', () => {
       visible: false
     })
     stage.addWidget(monitor2)
-    stage.upWidgetZorder('monitor')
-    expect(stage.widgetsZorder).toEqual(['monitor2', 'monitor'])
-    stage.upWidgetZorder('monitor')
-    expect(stage.widgetsZorder).toEqual(['monitor2', 'monitor'])
-    stage.downWidgetZorder('monitor')
-    expect(stage.widgetsZorder).toEqual(['monitor', 'monitor2'])
-    stage.topWidgetZorder('monitor')
-    expect(stage.widgetsZorder).toEqual(['monitor2', 'monitor'])
-    stage.bottomWidgetZorder('monitor')
-    expect(stage.widgetsZorder).toEqual(['monitor', 'monitor2'])
-    stage.bottomWidgetZorder('monitor2')
-    expect(stage.widgetsZorder).toEqual(['monitor2', 'monitor'])
+    stage.upWidgetZorder(monitor.id)
+    expect(stage.widgetsZorder).toEqual([monitor2.id, monitor.id])
+    stage.upWidgetZorder(monitor.id)
+    expect(stage.widgetsZorder).toEqual([monitor2.id, monitor.id])
+    stage.downWidgetZorder(monitor.id)
+    expect(stage.widgetsZorder).toEqual([monitor.id, monitor2.id])
+    stage.topWidgetZorder(monitor.id)
+    expect(stage.widgetsZorder).toEqual([monitor2.id, monitor.id])
+    stage.bottomWidgetZorder(monitor.id)
+    expect(stage.widgetsZorder).toEqual([monitor.id, monitor2.id])
+    stage.bottomWidgetZorder(monitor2.id)
+    expect(stage.widgetsZorder).toEqual([monitor2.id, monitor.id])
 
     const [stageConfig] = stage.export()
     expect(stageConfig.widgets!.length).toBe(2)
-    expect(stageConfig.widgets![0].name).toBe('monitor2')
-    expect(stageConfig.widgets![1].name).toBe('monitor')
+    expect(stageConfig.widgets![0].builder_id).toBe(monitor2.id)
+    expect(stageConfig.widgets![1].builder_id).toBe(monitor.id)
 
-    monitor1.setName('monitor1')
+    monitor.setName('monitor1')
     await nextTick()
-    expect(stage.widgetsZorder).toEqual(['monitor2', 'monitor1'])
+    expect(stage.widgetsZorder).toEqual([monitor2.id, monitor.id])
 
-    stage.removeWidget('monitor2')
+    stage.removeWidget(monitor2.id)
     expect(stage.widgets.length).toBe(1)
     expect(stage.widgets[0].name).toBe('monitor1')
-    expect(stage.widgetsZorder).toEqual(['monitor1'])
+    expect(stage.widgetsZorder).toEqual([monitor.id])
   })
 
   it('should work well with load', async () => {
@@ -126,11 +126,11 @@ describe('Stage', () => {
       {
         widgets: [
           {
+            builder_id: 'monitor#1111',
             type: 'monitor',
             name: 'monitor',
             mode: 1,
             target: '',
-            color: 15629590,
             label: 'label1',
             val: 'getVar:value1',
             x: 10,
@@ -139,11 +139,11 @@ describe('Stage', () => {
             visible: true
           },
           {
+            builder_id: 'monitor#2222',
             type: 'monitor',
             name: 'monitor2',
             mode: 1,
             target: '',
-            color: 15629590,
             label: 'label2',
             val: 'getVar:value2',
             x: 0,
@@ -168,11 +168,11 @@ describe('Stage', () => {
     const [stageConfig] = stage.export()
     expect(stageConfig.widgets!.length).toBe(2)
     expect(stageConfig.widgets![0]).toEqual({
+      builder_id: 'monitor#1111',
       type: 'monitor',
       name: 'monitor',
       mode: 1,
       target: '',
-      color: 15629590,
       label: 'label1',
       val: 'getVar:value1',
       x: 10,
@@ -181,11 +181,11 @@ describe('Stage', () => {
       visible: true
     })
     expect(stageConfig.widgets![1]).toEqual({
+      builder_id: 'monitor#2222',
       type: 'monitor',
       name: 'monitor2',
       mode: 1,
       target: '',
-      color: 15629590,
       label: 'label2',
       val: 'getVar:value2',
       x: 0,
diff --git a/spx-gui/src/models/stage.ts b/spx-gui/src/models/stage.ts
index b725f976f..66071c3d1 100644
--- a/spx-gui/src/models/stage.ts
+++ b/spx-gui/src/models/stage.ts
@@ -3,19 +3,20 @@
  * @desc Object-model definition for Stage & Costume
  */
 
-import { reactive, watch } from 'vue'
+import { reactive } from 'vue'
 import { filename } from '@/utils/path'
 import { toText, type Files, fromText } from './common/file'
 import { ensureValidBackdropName, ensureValidWidgetName } from './common/asset-name'
 import type { Size } from './common'
 import { Backdrop, type RawBackdropConfig } from './backdrop'
 import { type RawWidgetConfig, type Widget, loadWidget } from './widget'
+import { Disposable } from '@/utils/disposable'
 
 export type StageInits = {
   backdropIndex: number
   mapWidth?: number
   mapHeight?: number
-  mapMode: MapMode
+  mapMode?: MapMode
 }
 
 export type RawMapConfig = {
@@ -47,20 +48,21 @@ const stageCodeFileName = filename(stageCodeFilePath)
 
 export const defaultMapSize: MapSize = { width: 480, height: 360 }
 
-export class Stage {
+export class Stage extends Disposable {
   code: string
   setCode(code: string) {
     this.code = code
   }
+  codeFilePath = stageCodeFilePath
 
   backdrops: Backdrop[]
   private backdropIndex: number
   get defaultBackdrop(): Backdrop | null {
     return this.backdrops[this.backdropIndex] ?? null
   }
-  setDefaultBackdrop(name: string) {
-    const idx = this.backdrops.findIndex((s) => s.name === name)
-    if (idx === -1) throw new Error(`backdrop ${name} not found`)
+  setDefaultBackdrop(id: string) {
+    const idx = this.backdrops.findIndex((s) => s.id === id)
+    if (idx === -1) throw new Error(`backdrop ${id} not found`)
     this.backdropIndex = idx
   }
 
@@ -75,8 +77,8 @@ export class Stage {
     this.backdrops.push(backdrop)
   }
 
-  removeBackdrop(name: string): void {
-    const idx = this.backdrops.findIndex((s) => s.name === name)
+  removeBackdrop(id: string): void {
+    const idx = this.backdrops.findIndex((s) => s.id === id)
     if (idx === -1) {
       throw new Error(`backdrop ${name} not found`)
     }
@@ -109,71 +111,55 @@ export class Stage {
     widget.addDisposer(() => widget.setStage(null))
     this.widgets.push(widget)
 
-    if (!this.widgetsZorder.includes(widget.name)) {
-      this.widgetsZorder = [...this.widgetsZorder, widget.name]
+    if (!this.widgetsZorder.includes(widget.id)) {
+      this.widgetsZorder = [...this.widgetsZorder, widget.id]
     }
-    widget.addDisposer(
-      // update zorder & selected when widget renamed
-      watch(
-        () => widget.name,
-        (newName, originalName) => {
-          this.widgetsZorder = this.widgetsZorder.map((v) => (v === originalName ? newName : v))
-          if (this.selectedWidgetName === originalName) {
-            this.selectedWidgetName = newName
-          }
-        }
-      )
-    )
-    widget.addDisposer(() => {
-      this.widgetsZorder = this.widgetsZorder.filter((v) => v !== widget.name)
-      if (this.selectedWidgetName === widget.name) {
-        this.selectedWidgetName = null
-      }
-    })
   }
-  removeWidget(name: string): void {
-    const idx = this.widgets.findIndex((s) => s.name === name)
+  removeWidget(id: string): void {
+    const idx = this.widgets.findIndex((s) => s.id === id)
     if (idx === -1) {
-      throw new Error(`widget ${name} not found`)
+      throw new Error(`widget ${id} not found`)
     }
 
     const [widget] = this.widgets.splice(idx, 1)
     widget.dispose()
+
+    this.widgetsZorder = this.widgetsZorder.filter((v) => v !== id)
   }
   private setWidgetZorderIdx(
-    name: string,
+    id: string,
     newIdx: number | ((idx: number, length: number) => number)
   ) {
-    const idx = this.widgetsZorder.findIndex((v) => v === name)
-    if (idx < 0) throw new Error(`widget ${name} not found in zorder`)
+    const idx = this.widgetsZorder.findIndex((v) => v === id)
+    if (idx < 0) throw new Error(`widget ${id} not found in zorder`)
     const newIdxVal = typeof newIdx === 'function' ? newIdx(idx, this.widgetsZorder.length) : newIdx
-    const newZorder = this.widgetsZorder.filter((v) => v !== name)
-    newZorder.splice(newIdxVal, 0, name)
+    const newZorder = this.widgetsZorder.filter((v) => v !== id)
+    newZorder.splice(newIdxVal, 0, id)
     this.widgetsZorder = newZorder
   }
-  upWidgetZorder(name: string) {
-    this.setWidgetZorderIdx(name, (i, len) => Math.min(i + 1, len - 1))
+  upWidgetZorder(id: string) {
+    this.setWidgetZorderIdx(id, (i, len) => Math.min(i + 1, len - 1))
   }
-  downWidgetZorder(name: string) {
-    this.setWidgetZorderIdx(name, (i) => Math.max(i - 1, 0))
+  downWidgetZorder(id: string) {
+    this.setWidgetZorderIdx(id, (i) => Math.max(i - 1, 0))
   }
-  topWidgetZorder(name: string) {
-    this.setWidgetZorderIdx(name, (_, len) => len - 1)
+  topWidgetZorder(id: string) {
+    this.setWidgetZorderIdx(id, (_, len) => len - 1)
   }
-  bottomWidgetZorder(name: string) {
-    this.setWidgetZorderIdx(name, 0)
+  bottomWidgetZorder(id: string) {
+    this.setWidgetZorderIdx(id, 0)
   }
 
-  private selectedWidgetName: string | null = null
-  selectWidget(name: string | null) {
-    this.selectedWidgetName = name
+  private selectedWidgetId: string | null = null
+  selectWidget(id: string | null) {
+    this.selectedWidgetId = id
   }
   get selectedWidget(): Widget | null {
-    return this.widgets.find((w) => w.name === this.selectedWidgetName) ?? null
+    return this.widgets.find((w) => w.id === this.selectedWidgetId) ?? null
   }
   autoSelectWidget() {
     if (this.selectedWidget != null) return
-    this.selectWidget(this.widgets[0]?.name)
+    this.selectWidget(this.widgets[0]?.id)
   }
 
   mapWidth: number
@@ -196,14 +182,19 @@ export class Stage {
   }
 
   constructor(code: string = '', inits?: Partial<StageInits>) {
+    super()
     this.code = code
     this.backdrops = []
     this.backdropIndex = inits?.backdropIndex ?? 0
     this.widgets = []
     this.widgetsZorder = []
+    this.addDisposer(() => {
+      this.widgets.splice(0).forEach((w) => w.dispose())
+      this.widgetsZorder = []
+    })
     this.mapWidth = inits?.mapWidth ?? defaultMapSize.width
     this.mapHeight = inits?.mapHeight ?? defaultMapSize.height
-    this.mapMode = getMapMode(inits?.mapMode)
+    this.mapMode = inits?.mapMode ?? MapMode.fillRatio
     return reactive(this) as this
   }
 
@@ -252,9 +243,9 @@ export class Stage {
       Object.assign(files, backdropFiles)
     }
     const { backdropIndex, mapWidth, mapHeight, mapMode } = this
-    const widgetsConfig: RawWidgetConfig[] = this.widgetsZorder.map((widgetName) => {
-      const widget = this.widgets.find((w) => w.name === widgetName)
-      if (widget == null) throw new Error(`widget ${widgetName} not found`)
+    const widgetsConfig: RawWidgetConfig[] = this.widgetsZorder.map((id) => {
+      const widget = this.widgets.find((w) => w.id === id)
+      if (widget == null) throw new Error(`widget ${id} not found`)
       return widget.export()
     })
     const config: RawStageConfig = {
diff --git a/spx-gui/src/models/widget/monitor.ts b/spx-gui/src/models/widget/monitor.ts
index 49d7f7045..b259b2117 100644
--- a/spx-gui/src/models/widget/monitor.ts
+++ b/spx-gui/src/models/widget/monitor.ts
@@ -1,6 +1,6 @@
 import { reactive } from 'vue'
 import { getWidgetName } from '../common/asset-name'
-import { BaseWidget, type BaseWidgetInits } from './widget'
+import { BaseWidget, type BaseWidgetInits, type BaseRawWidgetConfig } from './widget'
 import { defaultMapSize } from '../stage'
 
 export type MonitorInits = BaseWidgetInits & {
@@ -9,13 +9,12 @@ export type MonitorInits = BaseWidgetInits & {
   variableName?: string
 }
 
-export type RawMonitorConfig = Omit<MonitorInits, 'variableName'> & {
+export type RawMonitorConfig = BaseRawWidgetConfig & {
   type: 'monitor'
-  name?: string
   mode?: number
+  label?: string
   target?: string
   val?: string
-  color?: number // TODO: remove me
 }
 
 // There are different modes for monitor, but only `mode: 1` is supported
@@ -60,8 +59,8 @@ export class Monitor extends BaseWidget {
     })
   }
 
-  static load({ type, name, mode, target, val, ...inits }: RawMonitorConfig) {
-    if (type !== 'monitor') throw new Error(`unexoected type ${type}`)
+  static load({ builder_id: id, type, name, mode, target, val, ...inits }: RawMonitorConfig) {
+    if (type !== 'monitor') throw new Error(`unexpected type ${type}`)
     if (name == null) throw new Error('name expected for monitor')
     if (mode !== supportedMode) throw new Error(`unsupported mode: ${mode} for monitor ${name}`)
     if (target !== supportedTarget)
@@ -70,7 +69,7 @@ export class Monitor extends BaseWidget {
     if (!val.startsWith(prefixForVariable))
       throw new Error(`unexpected val: ${val} for monitor ${name}`)
     const variableName = val.slice(prefixForVariable.length)
-    return new Monitor(name, { ...inits, variableName })
+    return new Monitor(name, { ...inits, id, variableName })
   }
 
   export(): RawMonitorConfig {
@@ -80,8 +79,7 @@ export class Monitor extends BaseWidget {
       label: this.label,
       val: `${prefixForVariable}${this.variableName}`,
       mode: supportedMode,
-      target: supportedTarget,
-      color: 15629590 // TODO: remove me
+      target: supportedTarget
     }
   }
 }
diff --git a/spx-gui/src/models/widget/widget.ts b/spx-gui/src/models/widget/widget.ts
index 04dbaeec9..f27ffff1c 100644
--- a/spx-gui/src/models/widget/widget.ts
+++ b/spx-gui/src/models/widget/widget.ts
@@ -2,19 +2,24 @@ import { reactive } from 'vue'
 import { Disposable } from '@/utils/disposable'
 import { validateWidgetName } from '../common/asset-name'
 import type { Stage } from '../stage'
+import { nanoid } from 'nanoid'
 
 export type BaseWidgetInits = {
+  id?: string
   x?: number
   y?: number
   size?: number
   visible?: boolean
 }
 
-export type BaseRawWidgetConfig = BaseWidgetInits & {
+export type BaseRawWidgetConfig = Omit<BaseWidgetInits, 'id'> & {
+  builder_id?: string
   name?: string
 }
 
 export class BaseWidget extends Disposable {
+  id: string
+
   private stage: Stage | null = null
   setStage(stage: Stage | null) {
     this.stage = stage
@@ -54,12 +59,13 @@ export class BaseWidget extends Disposable {
     this.y = inits?.y ?? 0
     this.size = inits?.size ?? 1
     this.visible = inits?.visible ?? false
+    this.id = inits?.id ?? nanoid()
     return reactive(this) as this
   }
 
-  static load({ name, ...inits }: BaseRawWidgetConfig) {
+  static load({ builder_id: id, name, ...inits }: BaseRawWidgetConfig) {
     if (name == null) throw new Error('name expected for widget')
-    return new BaseWidget(name, inits)
+    return new BaseWidget(name, { ...inits, id })
   }
 
   export(): BaseRawWidgetConfig {
@@ -68,7 +74,8 @@ export class BaseWidget extends Disposable {
       x: this.x,
       y: this.y,
       size: this.size,
-      visible: this.visible
+      visible: this.visible,
+      builder_id: this.id
     }
   }
 }
diff --git a/spx-gui/src/utils/file.ts b/spx-gui/src/utils/file.ts
index 8649bf678..c43a7d0a0 100644
--- a/spx-gui/src/utils/file.ts
+++ b/spx-gui/src/utils/file.ts
@@ -140,6 +140,10 @@ export function useFileUrl(fileSource: WatchSource<File | undefined>) {
         .then((url) => {
           urlRef.value = url
         })
+        .catch((e) => {
+          if (e instanceof Cancelled) return
+          throw e
+        })
         .finally(() => {
           loadingRef.value = false
         })
diff --git a/spx-gui/src/utils/player-registry.ts b/spx-gui/src/utils/player-registry.ts
new file mode 100644
index 000000000..d81897d6a
--- /dev/null
+++ b/spx-gui/src/utils/player-registry.ts
@@ -0,0 +1,41 @@
+/**
+ * @file Registry for audio players across application
+ * @desc Use central registry to ensure that at most one player plays at a time.
+ */
+
+type Player = {
+  onStart: () => void
+  onStopped: () => void
+}
+
+type InternalPlayer = Player & {
+  stopHandler: () => void
+}
+
+class PlayerRegistry {
+  private playing: InternalPlayer | null = null
+
+  register(stopHandler: () => void): Player {
+    const player: InternalPlayer = {
+      onStart: () => {
+        if (this.playing != null) {
+          this.playing.stopHandler()
+        }
+        this.playing = player
+      },
+      onStopped: () => {
+        if (this.playing === player) {
+          this.playing = null
+        }
+      },
+      stopHandler
+    }
+    return player
+  }
+}
+
+const registry = new PlayerRegistry()
+
+export function registerPlayer(stopHandler: () => void) {
+  return registry.register(stopHandler)
+}
diff --git a/spx-gui/src/utils/utils.ts b/spx-gui/src/utils/utils.ts
index 7c7c015ac..3dc9b1ecf 100644
--- a/spx-gui/src/utils/utils.ts
+++ b/spx-gui/src/utils/utils.ts
@@ -84,12 +84,29 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
  * ```
  */
 export function untilNotNull<T>(valueSource: WatchSource<T | null | undefined>) {
+  return untilConditionMet(
+    valueSource as WatchSource<T | null | undefined>,
+    (value): value is NonNullable<T> => value != null
+  ) as Promise<NonNullable<T>>
+}
+
+/**
+ * Wait until a given condition is met for a (reactive) value.
+ * ```ts
+ * const foo = await untilConditionMet(fooRef, (value) => value !== null)
+ * const bar = await untilConditionMet(() => getBar(), (value) => value > 10)
+ * ```
+ */
+export function untilConditionMet<T>(
+  valueSource: WatchSource<T>,
+  condition: (value: T) => boolean
+): Promise<T> {
   return new Promise<T>((resolve) => {
     let stopWatch: (() => void) | null = null
     stopWatch = watch(
       valueSource,
       (value) => {
-        if (value == null) return
+        if (!condition(value)) return
         resolve(value)
         stopWatch?.()
       },
diff --git a/tools/ispx/go.mod b/tools/ispx/go.mod
index a8895b2ca..4a6e88c02 100644
--- a/tools/ispx/go.mod
+++ b/tools/ispx/go.mod
@@ -5,16 +5,16 @@ go 1.21
 require (
 	github.com/goplus/igop v0.27.1
 	github.com/goplus/reflectx v1.2.2
-	github.com/goplus/spx v1.0.1-0.20240828022121-d1b083ef69a3
-	github.com/hajimehoshi/ebiten/v2 v2.7.8
+	github.com/goplus/spx v1.0.1-0.20240909022156-1b3a5bfdee29
+	github.com/hajimehoshi/ebiten/v2 v2.8.0-alpha.3
 )
 
 require (
 	github.com/ajstarks/svgo v0.0.0-20210927141636-6d70534b1098 // indirect
 	github.com/ebitengine/gomobile v0.0.0-20240518074828-e86332849895 // indirect
 	github.com/ebitengine/hideconsole v1.0.0 // indirect
-	github.com/ebitengine/oto/v3 v3.2.0 // indirect
-	github.com/ebitengine/purego v0.7.0 // indirect
+	github.com/ebitengine/oto/v3 v3.3.0-alpha.3 // indirect
+	github.com/ebitengine/purego v0.8.0-alpha.3 // indirect
 	github.com/esimov/stackblur-go v1.0.1-0.20190121110005-00e727e3c7a9 // indirect
 	github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0 // indirect
 	github.com/gopherjs/gopherjs v0.0.0-20200217142428-fce0ec30dd00 // indirect
@@ -36,11 +36,11 @@ require (
 	github.com/visualfc/xtype v0.2.0 // indirect
 	golang.org/x/image v0.18.0 // indirect
 	golang.org/x/mobile v0.0.0-20220518205345-8578da9835fd // indirect
-	golang.org/x/mod v0.17.0 // indirect
+	golang.org/x/mod v0.19.0 // indirect
 	golang.org/x/sync v0.7.0 // indirect
-	golang.org/x/sys v0.20.0 // indirect
+	golang.org/x/sys v0.22.0 // indirect
 	golang.org/x/text v0.16.0 // indirect
-	golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d // indirect
+	golang.org/x/tools v0.23.0 // indirect
 	golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1 // indirect
 )
 
diff --git a/tools/ispx/go.sum b/tools/ispx/go.sum
index 3d3af220e..593af6c06 100644
--- a/tools/ispx/go.sum
+++ b/tools/ispx/go.sum
@@ -11,10 +11,10 @@ github.com/ebitengine/gomobile v0.0.0-20240518074828-e86332849895 h1:48bCqKTuD7Z
 github.com/ebitengine/gomobile v0.0.0-20240518074828-e86332849895/go.mod h1:XZdLv05c5hOZm3fM2NlJ92FyEZjnslcMcNRrhxs8+8M=
 github.com/ebitengine/hideconsole v1.0.0 h1:5J4U0kXF+pv/DhiXt5/lTz0eO5ogJ1iXb8Yj1yReDqE=
 github.com/ebitengine/hideconsole v1.0.0/go.mod h1:hTTBTvVYWKBuxPr7peweneWdkUwEuHuB3C1R/ielR1A=
-github.com/ebitengine/oto/v3 v3.2.0 h1:FuggTJTSI3/3hEYwZEIN0CZVXYT29ZOdCu+z/f4QjTw=
-github.com/ebitengine/oto/v3 v3.2.0/go.mod h1:dOKXShvy1EQbIXhXPFcKLargdnFqH0RjptecvyAxhyw=
-github.com/ebitengine/purego v0.7.0 h1:HPZpl61edMGCEW6XK2nsR6+7AnJ3unUxpTZBkkIXnMc=
-github.com/ebitengine/purego v0.7.0/go.mod h1:ah1In8AOtksoNK6yk5z1HTJeUkC1Ez4Wk2idgGslMwQ=
+github.com/ebitengine/oto/v3 v3.3.0-alpha.3 h1:L8Odh8gVr4F+0CzSfqOfw/nEnXXWkB+UhGOKUYrP+Nk=
+github.com/ebitengine/oto/v3 v3.3.0-alpha.3/go.mod h1:yYvXK7mgNwsFawY5RsvGI6yhMHtD+0MfaPkDTl9/uv8=
+github.com/ebitengine/purego v0.8.0-alpha.3 h1:qoFlpGuVwJ6J85kuj6Qpyp0DBgxsNYfSY9efidSNFgA=
+github.com/ebitengine/purego v0.8.0-alpha.3/go.mod h1:b94LtM1jUWDZPKDyENVhB0WsLdLWFApjbNw5AyxmKyI=
 github.com/esimov/stackblur-go v1.0.1-0.20190121110005-00e727e3c7a9 h1:TJdKpA5v3Xu24Vv0yQy1MyRJgpt7vk9AT58fGPfiZcs=
 github.com/esimov/stackblur-go v1.0.1-0.20190121110005-00e727e3c7a9/go.mod h1:a3zzeKuJKUpCcReHmEsuPaEnq42D2b/bHoCI8UjIuMY=
 github.com/fsnotify/fsnotify v1.7.0/go.mod h1:40Bi/Hjc2AVfZrqy+aj+yEI+/bRxZnMJyTJwOpGvigM=
@@ -31,18 +31,16 @@ github.com/goplus/gogen v1.15.2 h1:Q6XaSx/Zi5tWnjfAziYsQI6Jv6MgODRpFtOYqNkiiqM=
 github.com/goplus/gogen v1.15.2/go.mod h1:92qEzVgv7y8JEFICWG9GvYI5IzfEkxYdsA1DbmnTkqk=
 github.com/goplus/gop v1.2.6 h1:kog3c5Js+8EopqmI4+CwueXsqibnBwYVt5q5N7juRVY=
 github.com/goplus/gop v1.2.6/go.mod h1:uREWbR1MrFaviZ4Mbx4ZCcAYDoqzO0iv1Qo6Np0Xx4E=
-github.com/goplus/igop v0.27.0 h1:4Wk5CIdm3FI1w6d0Y8GO2IC9sgs4wwYdpizCgRdcfYs=
-github.com/goplus/igop v0.27.0/go.mod h1:V8Kf/b4nrw0OPPodwnOYZPCpXvU+hqzuhSAXIToT0ME=
 github.com/goplus/igop v0.27.1 h1:nLfk+2a8TZ1XvMb6XZnD6f1DlJ6Owj5We1gt6BMKqaI=
 github.com/goplus/igop v0.27.1/go.mod h1:V8Kf/b4nrw0OPPodwnOYZPCpXvU+hqzuhSAXIToT0ME=
 github.com/goplus/mod v0.13.10 h1:5Om6KOvo31daN7N30kWU1vC5zhsJPM+uPbcEN/FnlzE=
 github.com/goplus/mod v0.13.10/go.mod h1:HDuPZgpWiaTp3PUolFgsiX+Q77cbUWB/mikVHfYND3c=
 github.com/goplus/reflectx v1.2.2 h1:T1p20OIH/HcnAvQQNnDLwl6AZOjU34icsfc6migD6L8=
 github.com/goplus/reflectx v1.2.2/go.mod h1:wHOS9ilbB4zrecI0W1dMmkW9JMcpXV7VjALVbNU9xfM=
-github.com/goplus/spx v1.0.1-0.20240828022121-d1b083ef69a3 h1:W5d93j+hZ+qeV9Do51Tm7JlPQkua4TG5aylTAwetWTU=
-github.com/goplus/spx v1.0.1-0.20240828022121-d1b083ef69a3/go.mod h1:UNZub8iRpxDvLpjJYYpiM7r36GqweTn2SNSKN49kG90=
-github.com/hajimehoshi/ebiten/v2 v2.7.8 h1:QrlvF2byCzMuDsbxFReJkOCbM3O2z1H/NKQaGcA8PKk=
-github.com/hajimehoshi/ebiten/v2 v2.7.8/go.mod h1:Ulbq5xDmdx47P24EJ+Mb31Zps7vQq+guieG9mghQUaA=
+github.com/goplus/spx v1.0.1-0.20240909022156-1b3a5bfdee29 h1:wHe/XPmOzeliV2RwF+k3fj2NHsBqUMZCcuQFJw257fI=
+github.com/goplus/spx v1.0.1-0.20240909022156-1b3a5bfdee29/go.mod h1:UNZub8iRpxDvLpjJYYpiM7r36GqweTn2SNSKN49kG90=
+github.com/hajimehoshi/ebiten/v2 v2.8.0-alpha.3 h1:cKpQdzW3I+iLID68l25GaxzPZHSZVRdE9/Pz4SOPBR8=
+github.com/hajimehoshi/ebiten/v2 v2.8.0-alpha.3/go.mod h1:iKp1U/H0J0rv9X4ztGSTXCyN6z/DKKrUL+D9sjg7SbI=
 github.com/hajimehoshi/go-mp3 v0.3.2/go.mod h1:qMJj/CSDxx6CGHiZeCgbiq2DSUkbK0UbtXShQcnfyMM=
 github.com/hajimehoshi/go-mp3 v0.3.4 h1:NUP7pBYH8OguP4diaTZ9wJbUbk3tC0KlfzsEpWmYj68=
 github.com/hajimehoshi/go-mp3 v0.3.4/go.mod h1:fRtZraRFcWb0pu7ok0LqyFhCUrPeMsGRSVop0eemFmo=
@@ -139,8 +137,8 @@ golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.17.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/sys v0.18.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
-golang.org/x/sys v0.20.0 h1:Od9JTbYCk261bKm4M/mw7AklTlFYIa0bIp9BgSm1S8Y=
-golang.org/x/sys v0.20.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.22.0 h1:RI27ohtqKCnwULzJLqkv897zojh5/DwS/ENaMzUOaWI=
+golang.org/x/sys v0.22.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/telemetry v0.0.0-20240228155512-f48c80bd79b2/go.mod h1:TeRTkGYfJXctD9OcfyVLyj2J3IxLnKwHJR8f4D8a3YE=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
@@ -165,8 +163,8 @@ golang.org/x/tools v0.1.2/go.mod h1:o0xws9oXOQQZyjljx8fwUC0k7L1pTE6eaCbjGeHmOkk=
 golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
 golang.org/x/tools v0.6.0/go.mod h1:Xwgl3UAJ/d3gWutnCtw505GrjyAbvKui8lOU390QaIU=
 golang.org/x/tools v0.19.0/go.mod h1:qoJWxmGSIBmAeriMx19ogtrEPrGtDbPK634QFIcLAhc=
-golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d h1:vU5i/LfpvrRCpgM/VPfJLg5KjxD3E+hfT1SH+d9zLwg=
-golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d/go.mod h1:aiJjzUbINMkxbQROHiO6hDPo2LHcIPhhQsa9DLh0yGk=
+golang.org/x/tools v0.23.0 h1:SGsXPZ+2l4JsgaCKkx+FQ9YZ5XEtA1GZYuoDjenLjvg=
+golang.org/x/tools v0.23.0/go.mod h1:pnu6ufv6vQkll6szChhK3C3L/ruaIv5eBeztNG8wtsI=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191011141410-1b5146add898/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1 h1:go1bK/D/BFZV2I8cIQd1NKEZ+0owSTG1fDTci4IqFcE=