From 5a8d9b643f5f1e2c5a1b76d572cd7f40db33b859 Mon Sep 17 00:00:00 2001
From: Hanxing Yang <nighca@live.cn>
Date: Mon, 1 Jul 2024 14:50:29 +0800
Subject: [PATCH] component `AnimationSettings` (#621)

* component AnimationSettings

* use UIIcon instead of inline svg

* fix svg icon
---
 spx-gui/src/components/asset/index.ts         |   8 +-
 .../editor/panels/sound/SoundSummaryItem.vue  |   8 +-
 .../sprite/animation/AnimationSettings.vue    | 148 ++++++++++++++++++
 .../sprite/animation/DurationEditor.vue       |  34 ++++
 .../sprite/animation/sound/SoundEditor.vue    | 124 +++++++++++++++
 .../sprite/animation/sound/SoundItem.vue      |  45 ++++++
 .../animation/state/BoundStateEditor.vue      | 106 +++++++++++++
 .../editor/sprite/animation/state/default.svg |   3 +
 .../editor/sprite/animation/state/die.svg     |   3 +
 .../editor/sprite/animation/state/step.svg    |   3 +
 spx-gui/src/components/ui/UIBlockItem.vue     |  43 +++++
 .../src/components/ui/UIConfigProvider.vue    |   7 +
 spx-gui/src/components/ui/UIDropdown.vue      |  10 ++
 spx-gui/src/components/ui/icons/UIIcon.vue    |   8 +-
 spx-gui/src/components/ui/icons/sound.svg     |   3 +
 spx-gui/src/components/ui/icons/status.svg    |   3 +
 spx-gui/src/components/ui/icons/timer.svg     |   3 +
 spx-gui/src/components/ui/index.ts            |   4 +-
 .../components/ui/modal/UIDropdownModal.vue   |  75 +++++++++
 spx-gui/src/components/ui/modal/index.ts      |   1 +
 spx-gui/src/components/ui/utils/index.ts      |  10 ++
 spx-gui/src/models/animation.ts               |   7 +-
 spx-gui/src/models/common/asset-name.test.ts  |   7 +-
 spx-gui/src/utils/audio.ts                    |   7 +-
 24 files changed, 649 insertions(+), 21 deletions(-)
 create mode 100644 spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
 create mode 100644 spx-gui/src/components/editor/sprite/animation/DurationEditor.vue
 create mode 100644 spx-gui/src/components/editor/sprite/animation/sound/SoundEditor.vue
 create mode 100644 spx-gui/src/components/editor/sprite/animation/sound/SoundItem.vue
 create mode 100644 spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
 create mode 100644 spx-gui/src/components/editor/sprite/animation/state/default.svg
 create mode 100644 spx-gui/src/components/editor/sprite/animation/state/die.svg
 create mode 100644 spx-gui/src/components/editor/sprite/animation/state/step.svg
 create mode 100644 spx-gui/src/components/ui/UIBlockItem.vue
 create mode 100644 spx-gui/src/components/ui/icons/sound.svg
 create mode 100644 spx-gui/src/components/ui/icons/status.svg
 create mode 100644 spx-gui/src/components/ui/icons/timer.svg
 create mode 100644 spx-gui/src/components/ui/modal/UIDropdownModal.vue

diff --git a/spx-gui/src/components/asset/index.ts b/spx-gui/src/components/asset/index.ts
index 5e14f87f6..fe30f383c 100644
--- a/spx-gui/src/components/asset/index.ts
+++ b/spx-gui/src/components/asset/index.ts
@@ -24,11 +24,11 @@ function selectAsset(project: Project, asset: AssetModel | undefined) {
   }
 }
 
-export function useAddAssetFromLibrary() {
+export function useAddAssetFromLibrary(autoSelect = true) {
   const invokeAssetLibraryModal = useModal(AssetLibraryModal)
   return async function addAssetFromLibrary<T extends AssetType>(project: Project, type: T) {
     const added = (await invokeAssetLibraryModal({ project, type })) as Array<AssetModel<T>>
-    selectAsset(project, added[0])
+    if (autoSelect) selectAsset(project, added[0])
     return added
   }
 }
@@ -110,13 +110,13 @@ export function useAddCostumeFromLocalFile() {
   }
 }
 
-export function useAddSoundFromLocalFile() {
+export function useAddSoundFromLocalFile(autoSelect = true) {
   return async function addSoundFromLocalFile(project: Project) {
     const audio = await selectAudio()
     const sound = await Sound.create(stripExt(audio.name), fromNativeFile(audio))
     const action = { name: { en: 'Add sound', zh: '添加声音' } }
     await project.history.doAction(action, () => project.addSound(sound))
-    selectAsset(project, sound)
+    if (autoSelect) selectAsset(project, sound)
     return sound
   }
 }
diff --git a/spx-gui/src/components/editor/panels/sound/SoundSummaryItem.vue b/spx-gui/src/components/editor/panels/sound/SoundSummaryItem.vue
index 261a5dff5..96707e460 100644
--- a/spx-gui/src/components/editor/panels/sound/SoundSummaryItem.vue
+++ b/spx-gui/src/components/editor/panels/sound/SoundSummaryItem.vue
@@ -1,16 +1,12 @@
 <template>
   <PanelSummaryItem>
-    <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M10 22.0002C9.71667 22.0002 9.47933 21.9042 9.288 21.7122C9.096 21.5209 9 21.2836 9 21.0002V3.00024C9 2.71691 9.096 2.47924 9.288 2.28724C9.47933 2.09591 9.71667 2.00024 10 2.00024C10.2833 2.00024 10.521 2.09591 10.713 2.28724C10.9043 2.47924 11 2.71691 11 3.00024V21.0002C11 21.2836 10.9043 21.5209 10.713 21.7122C10.521 21.9042 10.2833 22.0002 10 22.0002ZM6 16.0002C5.71667 16.0002 5.479 15.9042 5.287 15.7122C5.09567 15.5209 5 15.2836 5 15.0002V9.00024C5 8.71691 5.09567 8.47924 5.287 8.28724C5.479 8.09591 5.71667 8.00024 6 8.00024C6.28333 8.00024 6.521 8.09591 6.713 8.28724C6.90433 8.47924 7 8.71691 7 9.00024V15.0002C7 15.2836 6.90433 15.5209 6.713 15.7122C6.521 15.9042 6.28333 16.0002 6 16.0002ZM14 18.0002C13.7167 18.0002 13.4793 17.9042 13.288 17.7122C13.096 17.5209 13 17.2836 13 17.0002V7.00024C13 6.71691 13.096 6.47924 13.288 6.28724C13.4793 6.09591 13.7167 6.00024 14 6.00024C14.2833 6.00024 14.521 6.09591 14.713 6.28724C14.9043 6.47924 15 6.71691 15 7.00024V17.0002C15 17.2836 14.9043 17.5209 14.713 17.7122C14.521 17.9042 14.2833 18.0002 14 18.0002ZM18 15.0002C17.7167 15.0002 17.4793 14.9042 17.288 14.7122C17.096 14.5209 17 14.2836 17 14.0002V10.0002C17 9.71691 17.096 9.47924 17.288 9.28724C17.4793 9.09591 17.7167 9.00024 18 9.00024C18.2833 9.00024 18.5207 9.09591 18.712 9.28724C18.904 9.47924 19 9.71691 19 10.0002V14.0002C19 14.2836 18.904 14.5209 18.712 14.7122C18.5207 14.9042 18.2833 15.0002 18 15.0002Z"
-        fill="currentColor"
-      />
-    </svg>
+    <UIIcon class="icon" type="sound" />
   </PanelSummaryItem>
 </template>
 
 <script setup lang="ts">
 import { Sound } from '@/models/sound'
+import { UIIcon } from '@/components/ui'
 import PanelSummaryItem from '../common/PanelSummaryItem.vue'
 
 defineProps<{
diff --git a/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue b/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
new file mode 100644
index 000000000..ed801c818
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
@@ -0,0 +1,148 @@
+<template>
+  <section class="wrapper">
+    <UIDropdown
+      trigger="manual"
+      :visible="activeSetting != null"
+      placement="top"
+      @click-outside="handleClickOutside"
+    >
+      <template #trigger>
+        <ul class="settings">
+          <li
+            class="setting"
+            :class="{ active: activeSetting === 'duration' }"
+            @click="handleSummaryClick('duration')"
+          >
+            <UIIcon type="timer" />
+            {{ $t({ en: 'Duration', zh: '时长' }) }}
+            <span class="value">{{ formatDuration(animation.duration, 2) }}</span>
+          </li>
+          <li
+            class="setting"
+            :class="{ active: activeSetting === 'bound-state' }"
+            @click="handleSummaryClick('bound-state')"
+          >
+            <UIIcon type="status" />
+            {{ $t({ en: 'Binding', zh: '绑定' }) }}
+            <span v-if="boundStateNum > 0" class="value">{{ boundStateNum }}</span>
+          </li>
+          <li
+            class="setting"
+            :class="{ active: activeSetting === 'sound' }"
+            @click="handleSummaryClick('sound')"
+          >
+            <UIIcon type="sound" />
+            {{ $t({ en: 'Sound', zh: '声音' }) }}
+            <span class="value">{{ animation.sound }}</span>
+          </li>
+        </ul>
+      </template>
+      <DurationEditor
+        v-show="activeSetting === 'duration'"
+        :animation="animation"
+        @close="handleEditorClose"
+      />
+      <BoundStateEditor
+        v-show="activeSetting === 'bound-state'"
+        :animation="animation"
+        :sprite="sprite"
+        @close="handleEditorClose"
+      />
+      <SoundEditor
+        v-show="activeSetting === 'sound'"
+        :animation="animation"
+        @close="handleEditorClose"
+      />
+    </UIDropdown>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { formatDuration } from '@/utils/audio'
+import type { Sprite } from '@/models/sprite'
+import type { Animation } from '@/models/animation'
+import { UIDropdown, UIIcon, isInPopup } from '@/components/ui'
+import DurationEditor from './DurationEditor.vue'
+import BoundStateEditor from './state/BoundStateEditor.vue'
+import SoundEditor from './sound/SoundEditor.vue'
+
+const props = defineProps<{
+  sprite: Sprite
+  animation: Animation
+}>()
+
+type Setting = 'duration' | 'bound-state' | 'sound'
+
+const activeSetting = ref<Setting | null>(null)
+
+function handleSummaryClick(setting: Setting) {
+  activeSetting.value = activeSetting.value === setting ? null : setting
+}
+
+function handleEditorClose() {
+  activeSetting.value = null
+}
+
+const boundStateNum = computed(
+  () => props.sprite.getAnimationBoundStates(props.animation.name).length
+)
+
+function handleClickOutside(e: MouseEvent) {
+  // There are popups (dropdown, modal, ...) in setting editor (e.g. "Record" in `SoundEditor`), we should not close the editor when user clicks in the popup content.
+  // TODO: There should be a systematical solution for this, something like event propagation along the component tree instead of DOM tree.
+  if (isInPopup(e.target as HTMLElement | null)) return
+  activeSetting.value = null
+}
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.settings {
+  display: flex;
+  align-items: center;
+
+  padding: 4px;
+  gap: 4px;
+  border-radius: var(--ui-border-radius-1);
+  box-shadow: var(--ui-box-shadow-small);
+}
+
+.setting {
+  display: flex;
+  height: 32px;
+  padding: 4px 12px;
+  align-items: center;
+  gap: 4px;
+
+  border-radius: var(--ui-border-radius-1);
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--ui-color-text-main);
+  cursor: pointer;
+  transition: 0.2s;
+
+  &.active {
+    color: var(--ui-color-primary-main);
+    background: var(--ui-color-primary-200);
+  }
+}
+
+.value {
+  padding: 0px 5px;
+  border-radius: 8px;
+  max-width: 5em;
+  overflow-x: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  font-size: 10px;
+  line-height: 1.6;
+  color: var(--ui-color-grey-800);
+  background-color: var(--ui-color-grey-400);
+}
+</style>
diff --git a/spx-gui/src/components/editor/sprite/animation/DurationEditor.vue b/spx-gui/src/components/editor/sprite/animation/DurationEditor.vue
new file mode 100644
index 000000000..a67abf7d1
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/animation/DurationEditor.vue
@@ -0,0 +1,34 @@
+<template>
+  <UIDropdownModal
+    :title="$t({ en: 'Adjust duration', zh: '调整时长' })"
+    style="width: 280px"
+    @cancel="emit('close')"
+    @confirm="handleConfirm"
+  >
+    <UINumberInput v-model:value="duration" :min="0.01">
+      <template #prefix>{{ $t({ en: 'Duration', zh: '时长' }) }}:</template>
+      <template #suffix>{{ $t({ en: 's', zh: '秒' }) }}</template>
+    </UINumberInput>
+  </UIDropdownModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { Animation } from '@/models/animation'
+import { UIDropdownModal, UINumberInput } from '@/components/ui'
+
+const props = defineProps<{
+  animation: Animation
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const duration = ref(props.animation.duration)
+
+function handleConfirm() {
+  props.animation.setDuration(duration.value)
+  emit('close')
+}
+</script>
diff --git a/spx-gui/src/components/editor/sprite/animation/sound/SoundEditor.vue b/spx-gui/src/components/editor/sprite/animation/sound/SoundEditor.vue
new file mode 100644
index 000000000..b5348fe54
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/animation/sound/SoundEditor.vue
@@ -0,0 +1,124 @@
+<template>
+  <UIDropdownModal
+    :title="$t({ en: 'Select sound', zh: '选择声音' })"
+    style="width: 320px; max-height: 400px"
+    @cancel="emit('close')"
+    @confirm="handleConfirm"
+  >
+    <ul class="sound-items">
+      <SoundItem
+        v-for="sound in editorCtx.project.sounds"
+        :key="sound.name"
+        :sound="sound"
+        :active="sound.name === selected"
+        @click="handleSoundClick(sound.name)"
+      />
+      <UIDropdown trigger="click" placement="top">
+        <template #trigger>
+          <UIBlockItem class="add-sound">
+            <UIIcon class="icon" type="plus" />
+          </UIBlockItem>
+        </template>
+        <UIMenu>
+          <UIMenuItem @click="handleAddFromLocalFile">{{
+            $t({ en: 'Select local file', zh: '选择本地文件' })
+          }}</UIMenuItem>
+          <UIMenuItem @click="handleAddFromAssetLibrary">{{
+            $t({ en: 'Choose from asset library', zh: '从素材库选择' })
+          }}</UIMenuItem>
+          <UIMenuItem @click="handleRecord">{{ $t({ en: 'Record', zh: '录音' }) }}</UIMenuItem>
+        </UIMenu>
+      </UIDropdown>
+    </ul>
+    <SoundRecorderModal v-model:visible="recorderVisible" @saved="handleRecorded" />
+  </UIDropdownModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { Animation } from '@/models/animation'
+import {
+  UIDropdownModal,
+  UIDropdown,
+  UIMenu,
+  UIMenuItem,
+  UIBlockItem,
+  UIIcon
+} from '@/components/ui'
+import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
+import SoundItem from './SoundItem.vue'
+import { useAddAssetFromLibrary, useAddSoundFromLocalFile } from '@/components/asset'
+import SoundRecorderModal from '@/components/editor/sound/SoundRecorderModal.vue'
+import { useMessageHandle } from '@/utils/exception'
+import { AssetType } from '@/apis/asset'
+import type { Sound } from '@/models/sound'
+
+const props = defineProps<{
+  animation: Animation
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const editorCtx = useEditorCtx()
+
+const selected = ref(props.animation.sound)
+function handleSoundClick(sound: string) {
+  selected.value = selected.value === sound ? null : sound
+}
+
+const addFromLocalFile = useAddSoundFromLocalFile(false)
+const handleAddFromLocalFile = useMessageHandle(
+  async () => {
+    const sound = await addFromLocalFile(editorCtx.project)
+    selected.value = sound.name
+  },
+  {
+    en: 'Failed to add sound from local file',
+    zh: '从本地文件添加失败'
+  }
+).fn
+
+const addAssetFromLibrary = useAddAssetFromLibrary(false)
+const handleAddFromAssetLibrary = useMessageHandle(
+  async () => {
+    const sounds = await addAssetFromLibrary(editorCtx.project, AssetType.Sound)
+    selected.value = sounds[0].name
+  },
+  { en: 'Failed to add sound from asset library', zh: '从素材库添加失败' }
+).fn
+
+const recorderVisible = ref(false)
+function handleRecord() {
+  recorderVisible.value = true
+}
+function handleRecorded(sound: Sound) {
+  selected.value = sound.name
+}
+
+function handleConfirm() {
+  props.animation.setSound(selected.value)
+  emit('close')
+}
+</script>
+
+<style lang="scss" scoped>
+.sound-items {
+  flex: 1 1 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 12px;
+}
+
+.add-sound {
+  justify-content: center;
+  color: var(--ui-color-primary-main);
+
+  .icon {
+    width: 24px;
+    height: 24px;
+  }
+}
+</style>
diff --git a/spx-gui/src/components/editor/sprite/animation/sound/SoundItem.vue b/spx-gui/src/components/editor/sprite/animation/sound/SoundItem.vue
new file mode 100644
index 000000000..756f75f1a
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/animation/sound/SoundItem.vue
@@ -0,0 +1,45 @@
+<template>
+  <UIBlockItem :active="active">
+    <div class="content">
+      <SoundPlayer :src="audioSrc" color="primary" />
+    </div>
+    <p class="name">{{ sound.name }}</p>
+  </UIBlockItem>
+</template>
+
+<script setup lang="ts">
+import { useFileUrl } from '@/utils/file'
+import { Sound } from '@/models/sound'
+import { UIBlockItem } from '@/components/ui'
+import SoundPlayer from '@/components/editor/sound/SoundPlayer.vue'
+
+const props = defineProps<{
+  sound: Sound
+  active: boolean
+}>()
+
+const [audioSrc] = useFileUrl(() => props.sound.file)
+</script>
+
+<style lang="scss" scoped>
+.content {
+  margin-top: 4px;
+  width: 56px;
+  height: 56px;
+  padding: 10px;
+}
+
+.name {
+  margin-top: 2px;
+  font-size: 10px;
+  line-height: 1.6;
+  padding: 3px 8px 3px;
+
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: center;
+  text-overflow: ellipsis;
+  color: var(--ui-color-title);
+}
+</style>
diff --git a/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue b/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
new file mode 100644
index 000000000..c743ce3b4
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
@@ -0,0 +1,106 @@
+<!-- eslint-disable vue/no-v-html -->
+
+<template>
+  <UIDropdownModal
+    :title="$t({ en: 'Bind state', zh: '绑定状态' })"
+    style="width: 320px"
+    @cancel="emit('close')"
+    @confirm="handleConfirm"
+  >
+    <ul class="state-items">
+      <UIBlockItem
+        class="state-item"
+        :class="{ active: isBound(State.default) }"
+        @click="handleStateItemClick(State.default)"
+      >
+        <div class="icon" v-html="iconStateDefault"></div>
+        <p class="name">{{ $t({ en: 'Default', zh: '默认' }) }}</p>
+        <UICornerIcon v-show="isBound(State.default)" type="check" />
+      </UIBlockItem>
+      <UIBlockItem
+        class="state-item"
+        :class="{ active: isBound(State.step) }"
+        @click="handleStateItemClick(State.step)"
+      >
+        <div class="icon" v-html="iconStateStep"></div>
+        <p class="name">{{ $t({ en: 'Step', zh: '行走' }) }}</p>
+        <UICornerIcon v-show="isBound(State.step)" type="check" />
+      </UIBlockItem>
+      <UIBlockItem
+        class="state-item"
+        :class="{ active: isBound(State.die) }"
+        @click="handleStateItemClick(State.die)"
+      >
+        <div class="icon" v-html="iconStateDie"></div>
+        <p class="name">{{ $t({ en: 'Die', zh: '死亡' }) }}</p>
+        <UICornerIcon v-show="isBound(State.die)" type="check" />
+      </UIBlockItem>
+    </ul>
+  </UIDropdownModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { Animation } from '@/models/animation'
+import { type Sprite, State } from '@/models/sprite'
+import { UIDropdownModal, UICornerIcon, UIBlockItem } from '@/components/ui'
+import iconStateDefault from './default.svg?raw'
+import iconStateStep from './step.svg?raw'
+import iconStateDie from './die.svg?raw'
+
+const props = defineProps<{
+  animation: Animation
+  sprite: Sprite
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const boundStates = ref(props.sprite.getAnimationBoundStates(props.animation.name))
+
+function isBound(state: State) {
+  return boundStates.value.includes(state)
+}
+
+function handleStateItemClick(state: State) {
+  boundStates.value = boundStates.value.includes(state)
+    ? boundStates.value.filter((s) => s !== state)
+    : [...boundStates.value, state]
+}
+
+function handleConfirm() {
+  props.sprite.setAnimationBoundStates(props.animation.name, boundStates.value)
+  emit('close')
+}
+</script>
+
+<style lang="scss" scoped>
+.state-items {
+  flex: 1 1 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 12px;
+}
+
+.icon {
+  margin-top: 4px;
+  width: 56px;
+  height: 56px;
+}
+
+.name {
+  margin-top: 2px;
+  font-size: 10px;
+  line-height: 1.6;
+  padding: 3px 8px 3px;
+
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: center;
+  text-overflow: ellipsis;
+  color: var(--ui-color-title);
+}
+</style>
diff --git a/spx-gui/src/components/editor/sprite/animation/state/default.svg b/spx-gui/src/components/editor/sprite/animation/state/default.svg
new file mode 100644
index 000000000..8bd52b83e
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/animation/state/default.svg
@@ -0,0 +1,3 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M32.7373 32.625L33.9273 46.0683C33.9515 46.5287 33.8001 46.9812 33.5038 47.3344C33.2075 47.6876 32.7883 47.9153 32.3307 47.9716L32.209 47.9866C31.7297 48.045 31.2468 47.9107 30.8664 47.6131C30.4861 47.3156 30.2394 46.8793 30.1807 46.4L28.594 33.4816C28.3699 33.498 28.1448 33.498 27.9207 33.4816L26.334 46.4C26.2753 46.8793 26.0286 47.3156 25.6483 47.6131C25.2679 47.9107 24.785 48.045 24.3057 47.9866L24.184 47.97C23.7267 47.9137 23.3078 47.6862 23.0115 47.3333C22.7152 46.9805 22.5637 46.5284 22.5874 46.0683L23.7824 32.5766C24.0499 29.5529 24.0243 26.5104 23.7057 23.4917C22.734 25.29 22.0357 28.0117 21.6224 31.765C21.5513 32.2292 21.3037 32.6481 20.9311 32.9342C20.5586 33.2202 20.09 33.3513 19.6232 33.3002C19.1563 33.249 18.7272 33.0194 18.4255 32.6595C18.1238 32.2995 17.9728 31.8369 18.004 31.3683C19.0457 21.855 22.309 16.775 27.959 17.1167C28.1621 17.1032 28.3659 17.1032 28.569 17.1167C34.224 16.77 37.494 21.85 38.5357 31.37C38.5669 31.8386 38.4159 32.3012 38.1142 32.6611C37.8125 33.0211 37.3834 33.2506 36.9166 33.3018C36.4497 33.353 35.9811 33.2219 35.6086 32.9358C35.2361 32.6498 34.9884 32.2309 34.9173 31.7666C34.5007 27.98 33.794 25.2433 32.809 23.445C32.4906 26.4962 32.4666 29.5709 32.7373 32.6266V32.625ZM28.3357 8C28.8139 8 29.2875 8.09419 29.7293 8.27721C30.1711 8.46022 30.5726 8.72846 30.9107 9.06662C31.2489 9.40478 31.5171 9.80623 31.7001 10.2481C31.8832 10.6899 31.9773 11.1634 31.9773 11.6417C31.9773 12.1199 31.8832 12.5934 31.7001 13.0353C31.5171 13.4771 31.2489 13.8785 30.9107 14.2167C30.5726 14.5549 30.1711 14.8231 29.7293 15.0061C29.2875 15.1891 28.8139 15.2833 28.3357 15.2833C27.3699 15.2833 26.4436 14.8997 25.7606 14.2167C25.0777 13.5338 24.694 12.6075 24.694 11.6417C24.694 10.6758 25.0777 9.74956 25.7606 9.06662C26.4436 8.38367 27.3699 8 28.3357 8Z" fill="currentColor" stroke="currentColor" stroke-width="0.5"/>
+</svg>
diff --git a/spx-gui/src/components/editor/sprite/animation/state/die.svg b/spx-gui/src/components/editor/sprite/animation/state/die.svg
new file mode 100644
index 000000000..fc34ebd6a
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/animation/state/die.svg
@@ -0,0 +1,3 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M41.3266 41.2123C41.3266 41.0188 41.3018 40.8398 41.255 40.6712C40.9698 39.8802 40.4477 39.4837 39.686 39.4837C39.044 39.4837 38.2966 39.7969 37.4398 40.4192L32.6989 38.6562L37.5101 36.8906C38.32 37.4193 39.0674 37.6842 39.7575 37.6842C40.5179 37.6842 41.0166 37.2871 41.2549 36.4967C41.3018 36.3281 41.3253 36.1472 41.3253 35.9551C41.3253 34.9492 40.6846 34.4076 39.4008 34.3366C39.9229 33.8086 40.186 33.291 40.186 32.7871C40.186 32.2604 39.9111 31.8145 39.3643 31.4545C39.0805 31.3118 38.7822 31.2389 38.4737 31.2389C37.4282 31.2389 36.7145 32.0904 36.3344 33.7956L27.9919 36.929L19.6508 33.8685C19.2706 32.1159 18.557 31.2389 17.5114 31.2389C17.2029 31.2389 16.906 31.3118 16.6196 31.4545C16.0987 31.8145 15.8357 32.2604 15.8357 32.7871C15.8357 33.291 16.0987 33.8087 16.6196 34.3366C15.3135 34.4076 14.6599 34.9492 14.6599 35.9551C14.6599 36.1472 14.6847 36.3287 14.7316 36.4967C14.992 37.2871 15.4919 37.6842 16.229 37.6842C16.9164 37.6842 17.6665 37.4193 18.4738 36.8906L23.3227 38.6562L18.5441 40.3828C17.7134 39.7839 16.9764 39.4837 16.3358 39.4837C15.5753 39.4837 15.0389 39.8802 14.7316 40.6712C14.6834 40.8398 14.6599 41.0188 14.6599 41.2123C14.6599 42.2194 15.3136 42.7604 16.6196 42.8314C16.0987 43.3594 15.8357 43.877 15.8357 44.3815C15.8357 44.9075 16.0987 45.3515 16.6196 45.7136C16.9529 45.9056 17.2732 46 17.5831 46C18.5571 46 19.2589 45.1602 19.6873 43.4805L27.992 40.4192L36.2993 43.4805C36.7264 45.1602 37.4399 46 38.4373 46C38.7238 46 39.031 45.9056 39.3645 45.7136C39.9112 45.3515 40.1861 44.9075 40.1861 44.3815C40.1861 43.877 39.923 43.3594 39.4009 42.8314C40.6847 42.7604 41.3266 42.2194 41.3266 41.2123ZM22.2185 30.8424V31.3847C22.2185 32.0559 22.4425 32.6204 22.8956 33.0755C23.3461 33.5325 23.9047 33.7845 24.5701 33.8327C25.2602 33.8808 25.7706 33.7604 26.104 33.4726C26.6248 33.8554 27.2081 34.0475 27.8501 34.0475C28.4438 34.0475 28.992 33.8684 29.4894 33.5085C29.8227 33.7715 30.3097 33.8808 30.9517 33.8327C31.617 33.7604 32.1756 33.5025 32.6274 33.0586C33.078 32.6126 33.3045 32.0566 33.3045 31.3847V30.9896C35.8696 30.3164 37.8553 29.1887 39.2577 27.6028C40.6131 26.0918 41.2889 24.304 41.2889 22.2395C41.2889 21.7825 41.2421 21.3027 41.147 20.7981C40.6717 17.7285 39.2694 15.1946 36.9412 13.2031C34.4919 11.0684 31.5102 10 27.992 10C24.4737 10 21.492 11.056 19.044 13.166C16.7159 15.1843 15.3253 17.7285 14.8748 20.7982C14.7784 21.3027 14.7316 21.7826 14.7316 22.2396C14.7316 24.2552 15.3839 26.0182 16.6925 27.5313C17.9985 29.0429 19.8409 30.1484 22.2185 30.8424ZM30.755 18.2617C31.4569 17.4343 32.3071 17.0202 33.3045 17.0202C34.3267 17.0202 35.1873 17.4343 35.8904 18.2617C36.5896 19.0886 36.9412 20.0905 36.9412 21.2663C36.9412 22.4421 36.5896 23.4447 35.8904 24.2728C35.1873 25.1016 34.3267 25.5143 33.3045 25.5143C32.3071 25.5143 31.4569 25.1015 30.755 24.2728C30.0545 23.4447 29.7029 22.4421 29.7029 21.2663C29.7029 20.0905 30.0545 19.0886 30.755 18.2617ZM26.9763 26.515C27.3214 26.0651 27.6586 25.8392 27.992 25.8392C28.3253 25.8392 28.6404 26.0879 28.9373 26.5885C29.2341 27.0866 29.3839 27.5606 29.3839 28.0124C29.3839 28.7005 28.932 29.0436 28.0283 29.0436C27.4347 29.0436 26.9946 28.8887 26.7081 28.5814C26.5414 28.3893 26.4607 28.1529 26.4607 27.8678C26.4607 27.4173 26.6326 26.9668 26.9763 26.515ZM19.7941 18.2617C20.5063 17.4343 21.3618 17.0202 22.3591 17.0202C23.3578 17.0202 24.2133 17.4343 24.9268 18.2617C25.6404 19.0886 25.9971 20.0905 25.9971 21.2663C25.9971 22.4421 25.6404 23.4447 24.9268 24.2728C24.2133 25.1016 23.3578 25.5143 22.3591 25.5143C21.3617 25.5143 20.5063 25.1015 19.7941 24.2728C19.0805 23.4447 18.7237 22.4421 18.7237 21.2663C18.7237 20.0905 19.0805 19.0886 19.7941 18.2617Z" fill="currentColor"/>
+</svg>
diff --git a/spx-gui/src/components/editor/sprite/animation/state/step.svg b/spx-gui/src/components/editor/sprite/animation/state/step.svg
new file mode 100644
index 000000000..505b76d51
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/animation/state/step.svg
@@ -0,0 +1,3 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M31.5833 16.124C33.5498 16.124 35.1453 14.5285 35.1453 12.562C35.1453 10.5955 33.5498 9 31.5833 9C29.6168 9 28.0213 10.5955 28.0213 12.562C28.0213 14.5285 29.6168 16.124 31.5833 16.124ZM38.5959 27.1884L36.8669 26.3127L36.1471 24.131C35.0562 20.8213 32.0137 18.506 28.563 18.4986C25.8915 18.4912 24.4148 19.2481 21.6394 20.3686C20.0365 21.0143 18.7231 22.2387 17.9513 23.7971L17.4541 24.8063C16.8753 25.9788 17.3428 27.4036 18.5079 27.9898C19.6655 28.576 21.0754 28.1011 21.6617 26.9286L22.1589 25.9194C22.4186 25.3999 22.849 24.9918 23.3833 24.7766L25.3721 23.9752L24.2441 28.4796C23.8582 30.0231 24.2738 31.6631 25.3498 32.843L29.7949 37.6962C30.3292 38.2824 30.7076 38.9874 30.9006 39.7517L32.2586 45.1912C32.5777 46.4601 33.8689 47.2393 35.1378 46.9202C36.4068 46.6011 37.186 45.3099 36.8669 44.041L35.2195 37.4365C35.0265 36.6721 34.6481 35.9597 34.1138 35.3809L30.7373 31.6928L32.0137 26.5947L32.4218 27.8191C32.8151 29.0139 33.6611 30.0008 34.7742 30.5648L36.5033 31.4405C37.6609 32.0267 39.0709 31.5518 39.6571 30.3793C40.2285 29.2142 39.761 27.7746 38.5959 27.1884ZM21.6097 37.6294C21.3723 38.2305 21.0161 38.7722 20.556 39.2249L16.8456 42.9427C15.918 43.8703 15.918 45.3767 16.8456 46.3043C17.7732 47.2319 19.2722 47.2319 20.1998 46.3043L24.6077 41.8964C25.0604 41.4437 25.4166 40.902 25.6615 40.3009L26.6633 37.7927C22.5596 33.3179 23.7915 34.6908 23.1458 33.8077L21.6097 37.6294Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/spx-gui/src/components/ui/UIBlockItem.vue b/spx-gui/src/components/ui/UIBlockItem.vue
new file mode 100644
index 000000000..e892b271b
--- /dev/null
+++ b/spx-gui/src/components/ui/UIBlockItem.vue
@@ -0,0 +1,43 @@
+<template>
+  <li class="block-item" :class="{ active }">
+    <slot></slot>
+  </li>
+</template>
+
+<script setup lang="ts">
+// TODO: support more variants, see details in https://github.com/goplus/builder/issues/613
+withDefaults(
+  defineProps<{
+    active?: boolean
+  }>(),
+  {
+    active: false
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.block-item {
+  flex: 0 0 auto;
+  width: 88px;
+  height: 88px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  align-items: center;
+  border-radius: var(--ui-border-radius-1);
+  border: 2px solid var(--ui-color-grey-300);
+  background-color: var(--ui-color-grey-300);
+  cursor: pointer;
+
+  &:not(.active):hover {
+    border-color: var(--ui-color-grey-400);
+    background-color: var(--ui-color-grey-400);
+  }
+
+  &.active {
+    border-color: var(--ui-color-primary-main);
+    background-color: var(--ui-color-primary-200);
+  }
+}
+</style>
diff --git a/spx-gui/src/components/ui/UIConfigProvider.vue b/spx-gui/src/components/ui/UIConfigProvider.vue
index 3db000dc7..ff583331a 100644
--- a/spx-gui/src/components/ui/UIConfigProvider.vue
+++ b/spx-gui/src/components/ui/UIConfigProvider.vue
@@ -181,4 +181,11 @@ h6 {
 button:focus {
   outline: 2px solid var(--ui-color-primary-700);
 }
+
+// vueuc (dep of naive-ui) uses `pointer-events: all` on children of `v-binder-follower-content`, which wraps `Popover` content in naive-ui.
+// It causes pointer behavior issues in popup content. For example, a svg in a `visibility: hidden` element will still be clickable.
+// So we override it here to fix the issue. See details in https://github.com/07akioni/vueuc/issues/314
+.v-binder-follower-content > * {
+  pointer-events: initial;
+}
 </style>
diff --git a/spx-gui/src/components/ui/UIDropdown.vue b/spx-gui/src/components/ui/UIDropdown.vue
index 31cb668c5..e563c5dde 100644
--- a/spx-gui/src/components/ui/UIDropdown.vue
+++ b/spx-gui/src/components/ui/UIDropdown.vue
@@ -12,6 +12,7 @@
     :style="{ marginTop: offset.y + 'px', marginLeft: offset.x + 'px' }"
     raw
     @update:show="(v) => emit('update:visible', v)"
+    @clickoutside="handleClickOutside"
   >
     <template #trigger>
       <slot name="trigger"></slot>
@@ -61,11 +62,20 @@ withDefaults(
 
 const emit = defineEmits<{
   'update:visible': [boolean]
+  clickOutside: [MouseEvent]
 }>()
 
 const attachTo = usePopupContainer()
 
 const nPopoverRef = ref<InstanceType<typeof NPopover>>()
+
+function handleClickOutside(e: MouseEvent) {
+  const triggerEl = nPopoverRef.value?.binderInstRef?.targetRef
+  // naive-ui triggers `clickoutside` event when trigger-element clicked, so we need to fix it
+  if (triggerEl != null && triggerEl.contains(e.target as Node)) return
+  emit('clickOutside', e)
+}
+
 provide(dropdownCtrlKey, {
   setVisible(visible) {
     nPopoverRef.value?.setShow(visible)
diff --git a/spx-gui/src/components/ui/icons/UIIcon.vue b/spx-gui/src/components/ui/icons/UIIcon.vue
index fa2bf48b6..09bd23fb3 100644
--- a/spx-gui/src/components/ui/icons/UIIcon.vue
+++ b/spx-gui/src/components/ui/icons/UIIcon.vue
@@ -29,6 +29,9 @@ import share from './share.svg?raw'
 import arrowAlt from './arrow-alt.svg?raw'
 import doubleArrowDown from './double-arrow-down.svg?raw'
 import clock from './clock.svg?raw'
+import timer from './timer.svg?raw'
+import status from './status.svg?raw'
+import sound from './sound.svg?raw'
 
 const typeIconMap = {
   file,
@@ -54,7 +57,10 @@ const typeIconMap = {
   share,
   arrowAlt,
   doubleArrowDown,
-  clock
+  clock,
+  timer,
+  status,
+  sound
 }
 
 export type Type = keyof typeof typeIconMap
diff --git a/spx-gui/src/components/ui/icons/sound.svg b/spx-gui/src/components/ui/icons/sound.svg
new file mode 100644
index 000000000..28b3aa4d0
--- /dev/null
+++ b/spx-gui/src/components/ui/icons/sound.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.66665 14.6666C6.47776 14.6666 6.31954 14.6026 6.19198 14.4746C6.06398 14.347 5.99998 14.1888 5.99998 13.9999V1.99992C5.99998 1.81103 6.06398 1.65259 6.19198 1.52459C6.31954 1.39703 6.47776 1.33325 6.66665 1.33325C6.85554 1.33325 7.01398 1.39703 7.14198 1.52459C7.26954 1.65259 7.33331 1.81103 7.33331 1.99992V13.9999C7.33331 14.1888 7.26954 14.347 7.14198 14.4746C7.01398 14.6026 6.85554 14.6666 6.66665 14.6666ZM3.99998 10.6666C3.81109 10.6666 3.65265 10.6026 3.52465 10.4746C3.39709 10.347 3.33331 10.1888 3.33331 9.99992V5.99992C3.33331 5.81103 3.39709 5.65259 3.52465 5.52458C3.65265 5.39703 3.81109 5.33325 3.99998 5.33325C4.18887 5.33325 4.34731 5.39703 4.47531 5.52458C4.60287 5.65259 4.66665 5.81103 4.66665 5.99992V9.99992C4.66665 10.1888 4.60287 10.347 4.47531 10.4746C4.34731 10.6026 4.18887 10.6666 3.99998 10.6666ZM9.33331 11.9999C9.14442 11.9999 8.9862 11.9359 8.85865 11.8079C8.73065 11.6804 8.66665 11.5221 8.66665 11.3333V4.66658C8.66665 4.4777 8.73065 4.31925 8.85865 4.19125C8.9862 4.0637 9.14442 3.99992 9.33331 3.99992C9.5222 3.99992 9.68065 4.0637 9.80865 4.19125C9.9362 4.31925 9.99998 4.4777 9.99998 4.66658V11.3333C9.99998 11.5221 9.9362 11.6804 9.80865 11.8079C9.68065 11.9359 9.5222 11.9999 9.33331 11.9999ZM12 9.99992C11.8111 9.99992 11.6529 9.93592 11.5253 9.80792C11.3973 9.68036 11.3333 9.52214 11.3333 9.33325V6.66658C11.3333 6.4777 11.3973 6.31925 11.5253 6.19125C11.6529 6.0637 11.8111 5.99992 12 5.99992C12.1889 5.99992 12.3471 6.0637 12.4746 6.19125C12.6026 6.31925 12.6666 6.4777 12.6666 6.66658V9.33325C12.6666 9.52214 12.6026 9.68036 12.4746 9.80792C12.3471 9.93592 12.1889 9.99992 12 9.99992Z" fill="currentColor"/>
+</svg>
diff --git a/spx-gui/src/components/ui/icons/status.svg b/spx-gui/src/components/ui/icons/status.svg
new file mode 100644
index 000000000..334d5f9c5
--- /dev/null
+++ b/spx-gui/src/components/ui/icons/status.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.9163 11.0909C14.9163 12.169 14.2358 13.0895 12.8962 13.8237C11.6319 14.515 10.0667 14.8803 8.24359 14.909H8.00361C6.07666 14.909 4.42908 14.5437 3.11102 13.8202C1.77146 13.0859 1.09094 12.1654 1.09094 11.0909C1.09094 10.7793 1.15541 10.4713 1.28435 10.174C1.40971 9.8803 1.59954 9.59377 1.8431 9.31798C2.09024 9.04218 2.3911 8.79147 2.7421 8.57656C3.09311 8.36166 3.49068 8.16467 3.92406 7.98916C4.11031 7.91395 4.29298 7.9247 4.46848 8.01782C4.64398 8.10736 4.76218 8.25063 4.82307 8.44404C4.88396 8.62313 4.86605 8.80579 4.77651 8.98129C4.68696 9.15322 4.55444 9.27858 4.37894 9.36095C4.08882 9.47557 3.83094 9.60093 3.60529 9.73345C3.38323 9.86956 3.18982 10.0164 3.03222 10.174C2.86388 10.3316 2.73852 10.4928 2.65614 10.6504C2.57735 10.8044 2.53795 10.9512 2.53795 11.0873C2.53795 11.6962 3.07878 12.2478 4.14613 12.7206C5.24213 13.2077 6.53512 13.4513 7.99287 13.4513H8.00003C9.46136 13.4513 10.7579 13.2041 11.8539 12.7206C12.9213 12.2478 13.4621 11.6962 13.4621 11.0873C13.4621 10.9512 13.4227 10.8044 13.3439 10.6504C13.2615 10.4928 13.1362 10.3316 12.9714 10.1776C12.8103 10.0164 12.6168 9.86956 12.3948 9.73703C12.1727 9.60451 11.9148 9.47915 11.6283 9.36454C11.4456 9.27857 11.3131 9.14963 11.2236 8.98129C11.134 8.80579 11.1197 8.62313 11.177 8.44404C11.2379 8.25063 11.3561 8.10736 11.5316 8.01782C11.7107 7.9247 11.8933 7.91753 12.076 7.98916C12.4592 8.14318 12.8174 8.32226 13.1362 8.51567C13.455 8.70909 13.7415 8.92399 13.9815 9.1568C14.2895 9.44333 14.5223 9.75494 14.6763 10.0773C14.8303 10.4032 14.9091 10.7435 14.9091 11.0909H14.9163ZM3.67693 5.63241H6.04443V11.7105C6.04443 11.9147 6.11606 12.0902 6.25217 12.2263C6.39185 12.366 6.56377 12.434 6.76793 12.434C6.97209 12.434 7.14759 12.3624 7.28369 12.2263C7.42338 12.0866 7.49143 11.9147 7.49143 11.7105V9.34305H8.51222V11.7105C8.51222 11.9147 8.58385 12.0902 8.71995 12.2263C8.85964 12.366 9.03156 12.434 9.23572 12.434C9.43987 12.434 9.61538 12.3624 9.75148 12.2263C9.89117 12.0866 9.95922 11.9147 9.95922 11.7105V5.63241H12.3267C12.5309 5.63241 12.7064 5.56078 12.8425 5.42467C12.9822 5.28499 13.0502 5.11306 13.0502 4.90891C13.0502 4.70475 12.9786 4.52925 12.8425 4.39314C12.7028 4.25346 12.5309 4.18541 12.3267 4.18541H3.67693C3.47277 4.18541 3.29727 4.25704 3.16116 4.39314C3.02148 4.53283 2.95342 4.70475 2.95342 4.90891C2.95342 5.11306 3.02506 5.28857 3.16116 5.42467C3.30085 5.56436 3.47277 5.63241 3.67693 5.63241ZM8.0072 3.77709C8.37611 3.77709 8.69488 3.64457 8.95635 3.38311C9.21781 3.12164 9.35033 2.80287 9.35033 2.43396C9.35033 2.06504 9.21781 1.74627 8.95635 1.48481C8.69488 1.22334 8.37611 1.09082 8.0072 1.09082C7.63828 1.09082 7.31951 1.22334 7.05805 1.48481C6.79658 1.74627 6.66406 2.06504 6.66406 2.43396C6.66406 2.80287 6.79658 3.12164 7.05805 3.38311C7.31951 3.64457 7.63828 3.77709 8.0072 3.77709Z" fill="currentColor"/>
+</svg>
diff --git a/spx-gui/src/components/ui/icons/timer.svg b/spx-gui/src/components/ui/icons/timer.svg
new file mode 100644
index 000000000..17c9b0f56
--- /dev/null
+++ b/spx-gui/src/components/ui/icons/timer.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.49996 2C5.49996 1.724 5.72396 1.5 5.99996 1.5H9.33329C9.60929 1.5 9.83329 1.724 9.83329 2C9.83329 2.276 9.60929 2.5 9.33329 2.5H5.99996C5.72396 2.5 5.49996 2.276 5.49996 2ZM12.6666 9C12.6666 11.7613 10.428 14 7.66663 14C4.90529 14 2.66663 11.7613 2.66663 9C2.66663 6.23867 4.90529 4 7.66663 4C8.78196 4 9.80793 4.36932 10.6399 4.98665L11.6466 3.97998C11.8399 3.78665 12.16 3.78665 12.3533 3.97998C12.5466 4.17331 12.5466 4.49335 12.3533 4.68669L11.38 5.65999C12.1773 6.54599 12.6666 7.71467 12.6666 9ZM9.29993 9.60002L8.16663 8.75V6.66667C8.16663 6.39067 7.94263 6.16667 7.66663 6.16667C7.39063 6.16667 7.16663 6.39067 7.16663 6.66667V9C7.16663 9.15733 7.24066 9.30532 7.36666 9.39998L8.69999 10.4C8.78999 10.4673 8.89531 10.5 8.99931 10.5C9.15198 10.5 9.30202 10.4306 9.40002 10.3C9.56602 10.0793 9.52059 9.76535 9.29993 9.60002Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/spx-gui/src/components/ui/index.ts b/spx-gui/src/components/ui/index.ts
index affc6a070..f543af627 100644
--- a/spx-gui/src/components/ui/index.ts
+++ b/spx-gui/src/components/ui/index.ts
@@ -6,7 +6,7 @@ export { default as UIIconButton } from './UIIconButton.vue'
 export { default as UIDropdown } from './UIDropdown.vue'
 export { default as UITooltip } from './UITooltip.vue'
 export { UIMenu, UIMenuGroup, UIMenuItem } from './menu'
-export { default as UIIcon } from './icons/UIIcon.vue'
+export { default as UIIcon, type Type as IconType } from './icons/UIIcon.vue'
 export * from './form'
 export { default as UITextInput } from './UITextInput.vue'
 export { default as UINumberInput } from './UINumberInput.vue'
@@ -27,8 +27,10 @@ export { default as UIEmpty } from './empty/UIEmpty.vue'
 export { default as UIError } from './error/UIError.vue'
 export { default as UIImg } from './UIImg.vue'
 export { default as UICornerIcon } from './UICornerIcon.vue'
+export { default as UIBlockItem } from './UIBlockItem.vue'
 export * from './tab'
 export { default as UICode } from './UICode.vue'
 export { default as UIButtonGroup } from './UIButtonGroup.vue'
 export { default as UIButtonGroupItem } from './UIButtonGroupItem.vue'
 export { default as UIDropdownWithTooltip } from './UIDropdownWithTooltip.vue'
+export { isInPopup } from './utils'
diff --git a/spx-gui/src/components/ui/modal/UIDropdownModal.vue b/spx-gui/src/components/ui/modal/UIDropdownModal.vue
new file mode 100644
index 000000000..7655abec2
--- /dev/null
+++ b/spx-gui/src/components/ui/modal/UIDropdownModal.vue
@@ -0,0 +1,75 @@
+<template>
+  <section class="wrapper">
+    <header class="header">
+      <h4 class="title">{{ title }}</h4>
+      <UIModalClose class="close" @click="emit('cancel')" />
+    </header>
+    <UIDivider />
+    <main class="body">
+      <slot></slot>
+    </main>
+    <footer class="footer">
+      <UIButton type="boring" @click="emit('cancel')">
+        {{ $t({ en: 'Cancel', zh: '取消' }) }}
+      </UIButton>
+      <UIButton type="primary" @click="emit('confirm')">
+        {{ $t({ en: 'Confirm', zh: '确认' }) }}
+      </UIButton>
+    </footer>
+  </section>
+</template>
+<script setup lang="ts">
+import { UIButton, UIDivider } from '@/components/ui'
+import UIModalClose from './UIModalClose.vue'
+
+defineProps<{
+  title: string
+}>()
+
+const emit = defineEmits<{
+  cancel: []
+  confirm: []
+}>()
+</script>
+
+<style scoped lang="scss">
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.header {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  height: 44px;
+}
+
+.title {
+  font-size: 16px;
+  line-height: 26px;
+  flex: 1;
+  color: var(--ui-color-title);
+}
+
+.close {
+  margin-right: -4px;
+}
+
+.body {
+  padding: 12px 16px;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.footer {
+  flex: 0 0 auto;
+  padding: 16px;
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+}
+</style>
diff --git a/spx-gui/src/components/ui/modal/index.ts b/spx-gui/src/components/ui/modal/index.ts
index 11a9cc783..313325841 100644
--- a/spx-gui/src/components/ui/modal/index.ts
+++ b/spx-gui/src/components/ui/modal/index.ts
@@ -3,3 +3,4 @@ export { default as UISearchableModal } from './UISearchableModal.vue'
 export { default as UIModalProvider, useModal } from './UIModalProvider.vue'
 export { default as UIFullScreenModal } from './UIFullScreenModal.vue'
 export { default as UIModalClose } from './UIModalClose.vue'
+export { default as UIDropdownModal } from './UIDropdownModal.vue'
diff --git a/spx-gui/src/components/ui/utils/index.ts b/spx-gui/src/components/ui/utils/index.ts
index e0aa4d099..ba02e8acb 100644
--- a/spx-gui/src/components/ui/utils/index.ts
+++ b/spx-gui/src/components/ui/utils/index.ts
@@ -16,3 +16,13 @@ export function useRootContainer() {
 export function usePopupContainer() {
   return useRootContainer()
 }
+
+/** If given target in any popup content */
+export function isInPopup(target: HTMLElement | null) {
+  let el = target
+  while (el != null) {
+    if (el.classList.contains('n-popover') || el.classList.contains('n-modal')) return true
+    el = el.parentElement
+  }
+  return false
+}
diff --git a/spx-gui/src/models/animation.ts b/spx-gui/src/models/animation.ts
index a0e2bfc34..958f136e0 100644
--- a/spx-gui/src/models/animation.ts
+++ b/spx-gui/src/models/animation.ts
@@ -125,12 +125,7 @@ export class Animation {
    * Create instance with default inits
    * Note that the "default" means default behavior for builder, not the default behavior of spx
    */
-  static create(
-    nameBase: string,
-    sprite: Sprite,
-    costumes: Costume[],
-    inits?: AnimationInits
-  ) {
+  static create(nameBase: string, sprite: Sprite, costumes: Costume[], inits?: AnimationInits) {
     for (const costume of costumes) {
       sprite.removeCostume(costume.name)
     }
diff --git a/spx-gui/src/models/common/asset-name.test.ts b/spx-gui/src/models/common/asset-name.test.ts
index 762e832fd..35dcd6de1 100644
--- a/spx-gui/src/models/common/asset-name.test.ts
+++ b/spx-gui/src/models/common/asset-name.test.ts
@@ -1,5 +1,10 @@
 import { describe, it, expect } from 'vitest'
-import { getSoundName, getSpriteName, normalizeAssetName, normalizeGopIdentifierAssetName } from './asset-name'
+import {
+  getSoundName,
+  getSpriteName,
+  normalizeAssetName,
+  normalizeGopIdentifierAssetName
+} from './asset-name'
 import { Project } from '../project'
 import { Sprite } from '../sprite'
 import { Sound } from '../sound'
diff --git a/spx-gui/src/utils/audio.ts b/spx-gui/src/utils/audio.ts
index 68987fc36..ddb4dae14 100644
--- a/spx-gui/src/utils/audio.ts
+++ b/spx-gui/src/utils/audio.ts
@@ -67,7 +67,10 @@ function audioBufferToWav(audioBuffer: AudioBuffer): ArrayBuffer {
   return buffer
 }
 
-export const formatDuration = (durationInSeconds: number | null | undefined) => {
+export const formatDuration = (
+  durationInSeconds: number | null | undefined,
+  fractionDigits = 1
+) => {
   if (
     durationInSeconds === null ||
     durationInSeconds === undefined ||
@@ -75,7 +78,7 @@ export const formatDuration = (durationInSeconds: number | null | undefined) =>
   ) {
     return ''
   }
-  return durationInSeconds.toFixed(1) + 's'
+  return durationInSeconds.toFixed(fractionDigits) + 's'
 }
 
 export const useAudioDuration = (audio: () => string | Blob | null) => {