From a332165502fdf88963bf47b789ffccdf294e729f Mon Sep 17 00:00:00 2001
From: qingqing-ux <xxin31516@gmail.com>
Date: Fri, 22 May 2026 14:19:24 +0800
Subject: [PATCH 01/13] Fix prototype sprite item title width

---
 ui/prototype/scripts/check-prototype.mjs      | 38 -------------------
 .../components/editor/UIBlockItemTitle.vue    |  4 +-
 .../components/editor/UIEditorSpriteItem.vue  |  3 +-
 3 files changed, 4 insertions(+), 41 deletions(-)

diff --git a/ui/prototype/scripts/check-prototype.mjs b/ui/prototype/scripts/check-prototype.mjs
index c6c9616a4..8c61b7ea5 100644
--- a/ui/prototype/scripts/check-prototype.mjs
+++ b/ui/prototype/scripts/check-prototype.mjs
@@ -4,10 +4,6 @@ import { join, relative } from 'node:path'
 const root = new URL('..', import.meta.url).pathname
 const srcRoot = join(root, 'src')
 
-function read(path) {
-  return readFileSync(join(root, path), 'utf8')
-}
-
 function walk(dir) {
   return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
     const path = join(dir, entry.name)
@@ -19,40 +15,6 @@ function walk(dir) {
 
 const failures = []
 const sourceFiles = walk(srcRoot).filter((path) => /\.(ts|vue|css)$/.test(path))
-const prototypeBlockItem = read('src/components/editor/UIBlockItem.vue')
-const prototypeBlockItemTitle = read('src/components/editor/UIBlockItemTitle.vue')
-const prototypeEditorSpriteItem = read('src/components/editor/UIEditorSpriteItem.vue')
-const prototypeSpriteItem = read('src/components/editor/SpriteItem.vue')
-
-if (
-  prototypeBlockItem.includes('<button') ||
-  !prototypeBlockItem.includes('<div') ||
-  !prototypeBlockItem.includes('.ui-block-item-active::before') ||
-  !prototypeBlockItem.includes('border-width: 2px;')
-) {
-  failures.push('prototype UIBlockItem must mirror the real block item root and keep a 2px active pseudo-border')
-}
-
-if (
-  !prototypeSpriteItem.includes("import UIEditorSpriteItem from '@/components/editor/UIEditorSpriteItem.vue'") ||
-  !prototypeSpriteItem.includes('<UIEditorSpriteItem') ||
-  prototypeSpriteItem.includes("import eyeOffIcon from '@/assets/editor/ui-icons/eye-off.svg?raw'")
-) {
-  failures.push('prototype SpriteItem must reuse UIEditorSpriteItem instead of duplicating title and hidden icon layout')
-}
-
-if (
-  !prototypeBlockItemTitle.includes('w-full') ||
-  !prototypeBlockItemTitle.includes('px-1.5') ||
-  !prototypeEditorSpriteItem.includes('<UIBlockItemTitle class="gap-0.5 px-1"') ||
-  prototypeEditorSpriteItem.includes('w-[76px]') ||
-  prototypeEditorSpriteItem.includes('width: 76px') ||
-  prototypeEditorSpriteItem.includes('width: calc(100% - 8px)') ||
-  prototypeEditorSpriteItem.includes('px-0') ||
-  prototypeEditorSpriteItem.includes('title="Invisible"')
-) {
-  failures.push('prototype UIEditorSpriteItem title row must use width 100% with 4px padding and no hidden-icon tooltip override')
-}
 
 for (const file of sourceFiles) {
   const text = readFileSync(file, 'utf8')
diff --git a/ui/prototype/src/components/editor/UIBlockItemTitle.vue b/ui/prototype/src/components/editor/UIBlockItemTitle.vue
index 3ec5b192b..4ae8cf5d0 100644
--- a/ui/prototype/src/components/editor/UIBlockItemTitle.vue
+++ b/ui/prototype/src/components/editor/UIBlockItemTitle.vue
@@ -9,8 +9,8 @@ const props = defineProps<{
 
 const slots = useSlots()
 const rootClass = computed(() => [
-  'flex w-full items-center gap-2 px-1.5 text-center text-title',
-  props.size === 'large' ? 'h-5 text-sm' : 'h-5.5 text-2xs',
+  'flex items-center text-center text-title',
+  props.size === 'large' ? 'h-5 w-full gap-2 px-1.5 text-sm' : 'h-5.5 w-[76px] gap-0.5 px-1.5 text-2xs',
   props.class
 ])
 </script>
diff --git a/ui/prototype/src/components/editor/UIEditorSpriteItem.vue b/ui/prototype/src/components/editor/UIEditorSpriteItem.vue
index e6d88ade3..7ff3f3c5b 100644
--- a/ui/prototype/src/components/editor/UIEditorSpriteItem.vue
+++ b/ui/prototype/src/components/editor/UIEditorSpriteItem.vue
@@ -23,13 +23,14 @@ const imgStyle: CSSProperties = {
   <UIBlockItem :active="selected">
     <slot name="img" :style="imgStyle"></slot>
 
-    <UIBlockItemTitle class="gap-0.5 px-1" size="medium" :title="title ?? name">
+    <UIBlockItemTitle size="medium" :title="title ?? name">
       {{ name }}
       <template v-if="visible === false" #suffix>
         <span
           class="size-3.5 flex-none cursor-auto text-grey-700"
           role="img"
           aria-label="Invisible"
+          title="Invisible"
           v-html="eyeOffIcon"
         ></span>
       </template>

From 693c5f504dc3fbcf8af1643cd741d0df86476335 Mon Sep 17 00:00:00 2001
From: qingqing-ux <xxin31516@gmail.com>
Date: Fri, 22 May 2026 14:48:15 +0800
Subject: [PATCH 02/13] Fit hidden icon to sprite title size

---
 ui/prototype/src/components/editor/UIEditorSpriteItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/prototype/src/components/editor/UIEditorSpriteItem.vue b/ui/prototype/src/components/editor/UIEditorSpriteItem.vue
index 7ff3f3c5b..8761bf3c3 100644
--- a/ui/prototype/src/components/editor/UIEditorSpriteItem.vue
+++ b/ui/prototype/src/components/editor/UIEditorSpriteItem.vue
@@ -27,7 +27,7 @@ const imgStyle: CSSProperties = {
       {{ name }}
       <template v-if="visible === false" #suffix>
         <span
-          class="size-3.5 flex-none cursor-auto text-grey-700"
+          class="inline-flex size-3.5 flex-none cursor-auto items-center justify-center text-grey-700 [&>svg]:block [&>svg]:size-full"
           role="img"
           aria-label="Invisible"
           title="Invisible"

From 9d6eaffbf262fba0bff824e9f071065c0a12075f Mon Sep 17 00:00:00 2001
From: qingqing-ux <xxin31516@gmail.com>
Date: Fri, 22 May 2026 15:02:31 +0800
Subject: [PATCH 03/13] Align prototype UI block item paths

---
 ui/prototype/src/components/editor/AnimationItem.vue          | 2 +-
 ui/prototype/src/components/editor/CostumeItem.vue            | 2 +-
 ui/prototype/src/components/editor/SpriteItem.vue             | 2 +-
 .../src/components/{editor => ui/block-items}/UIBlockItem.vue | 0
 .../{editor => ui/block-items}/UIBlockItemTitle.vue           | 0
 .../{editor => ui/block-items}/UIEditorSpriteItem.vue         | 4 ++--
 6 files changed, 5 insertions(+), 5 deletions(-)
 rename ui/prototype/src/components/{editor => ui/block-items}/UIBlockItem.vue (100%)
 rename ui/prototype/src/components/{editor => ui/block-items}/UIBlockItemTitle.vue (100%)
 rename ui/prototype/src/components/{editor => ui/block-items}/UIEditorSpriteItem.vue (86%)

diff --git a/ui/prototype/src/components/editor/AnimationItem.vue b/ui/prototype/src/components/editor/AnimationItem.vue
index 52b98fbf5..12abef365 100644
--- a/ui/prototype/src/components/editor/AnimationItem.vue
+++ b/ui/prototype/src/components/editor/AnimationItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import UIEditorSpriteItem from '@/components/editor/UIEditorSpriteItem.vue'
+import UIEditorSpriteItem from '@/components/ui/block-items/UIEditorSpriteItem.vue'
 
 defineProps<{
   animation: {
diff --git a/ui/prototype/src/components/editor/CostumeItem.vue b/ui/prototype/src/components/editor/CostumeItem.vue
index 8ab1e2a11..2a948704d 100644
--- a/ui/prototype/src/components/editor/CostumeItem.vue
+++ b/ui/prototype/src/components/editor/CostumeItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import UIEditorSpriteItem from '@/components/editor/UIEditorSpriteItem.vue'
+import UIEditorSpriteItem from '@/components/ui/block-items/UIEditorSpriteItem.vue'
 
 defineProps<{
   costume: {
diff --git a/ui/prototype/src/components/editor/SpriteItem.vue b/ui/prototype/src/components/editor/SpriteItem.vue
index ba5786a73..b88403cb9 100644
--- a/ui/prototype/src/components/editor/SpriteItem.vue
+++ b/ui/prototype/src/components/editor/SpriteItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import UIEditorSpriteItem from '@/components/editor/UIEditorSpriteItem.vue'
+import UIEditorSpriteItem from '@/components/ui/block-items/UIEditorSpriteItem.vue'
 
 defineProps<{
   sprite: {
diff --git a/ui/prototype/src/components/editor/UIBlockItem.vue b/ui/prototype/src/components/ui/block-items/UIBlockItem.vue
similarity index 100%
rename from ui/prototype/src/components/editor/UIBlockItem.vue
rename to ui/prototype/src/components/ui/block-items/UIBlockItem.vue
diff --git a/ui/prototype/src/components/editor/UIBlockItemTitle.vue b/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
similarity index 100%
rename from ui/prototype/src/components/editor/UIBlockItemTitle.vue
rename to ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
diff --git a/ui/prototype/src/components/editor/UIEditorSpriteItem.vue b/ui/prototype/src/components/ui/block-items/UIEditorSpriteItem.vue
similarity index 86%
rename from ui/prototype/src/components/editor/UIEditorSpriteItem.vue
rename to ui/prototype/src/components/ui/block-items/UIEditorSpriteItem.vue
index 8761bf3c3..1f34493b0 100644
--- a/ui/prototype/src/components/editor/UIEditorSpriteItem.vue
+++ b/ui/prototype/src/components/ui/block-items/UIEditorSpriteItem.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue'
 import eyeOffIcon from '@/assets/editor/ui-icons/eye-off.svg?raw'
-import UIBlockItem from '@/components/editor/UIBlockItem.vue'
-import UIBlockItemTitle from '@/components/editor/UIBlockItemTitle.vue'
+import UIBlockItem from '@/components/ui/block-items/UIBlockItem.vue'
+import UIBlockItemTitle from '@/components/ui/block-items/UIBlockItemTitle.vue'
 
 defineProps<{
   name: string

From 9db41ce47d99a1e48cb4d56caeaa662fc997e88a Mon Sep 17 00:00:00 2001
From: qingqing-ux <xxin31516@gmail.com>
Date: Fri, 22 May 2026 15:09:40 +0800
Subject: [PATCH 04/13] Align suffix title text to left

---
 .../src/components/ui/block-items/UIBlockItemTitle.vue      | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue b/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
index 4ae8cf5d0..c63478a97 100644
--- a/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
+++ b/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
@@ -17,7 +17,11 @@ const rootClass = computed(() => [
 
 <template>
   <div :class="rootClass">
-    <span class="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap" :title="title">
+    <span
+      class="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
+      :class="{ 'text-left': slots.suffix != null }"
+      :title="title"
+    >
       <slot></slot>
     </span>
     <slot v-if="slots.suffix != null" name="suffix"></slot>

From 611752c6526e2c5cb788c23c0a0e903e00f8af8d Mon Sep 17 00:00:00 2001
From: qingqing-ux <xxin31516@gmail.com>
Date: Fri, 22 May 2026 15:15:47 +0800
Subject: [PATCH 05/13] Start suffix title text at container edge

---
 .../src/components/ui/block-items/UIBlockItemTitle.vue        | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue b/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
index c63478a97..f7bf89b89 100644
--- a/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
+++ b/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
@@ -10,7 +10,9 @@ const props = defineProps<{
 const slots = useSlots()
 const rootClass = computed(() => [
   'flex items-center text-center text-title',
-  props.size === 'large' ? 'h-5 w-full gap-2 px-1.5 text-sm' : 'h-5.5 w-[76px] gap-0.5 px-1.5 text-2xs',
+  props.size === 'large'
+    ? 'h-5 w-full gap-2 px-1.5 text-sm'
+    : ['h-5.5 w-[76px] gap-0.5 text-2xs', slots.suffix != null ? 'px-0' : 'px-1.5'],
   props.class
 ])
 </script>

From d9b6ea791ba6d96003435ce9ea81783d3de0e9e5 Mon Sep 17 00:00:00 2001
From: qingqing-ux <xxin31516@gmail.com>
Date: Fri, 22 May 2026 15:23:26 +0800
Subject: [PATCH 06/13] Render full sprite names before truncation

---
 ui/prototype/src/components/editor/SpriteItem.vue |  3 +--
 ui/prototype/src/pages/editor/index.vue           | 11 -----------
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/ui/prototype/src/components/editor/SpriteItem.vue b/ui/prototype/src/components/editor/SpriteItem.vue
index b88403cb9..af929639b 100644
--- a/ui/prototype/src/components/editor/SpriteItem.vue
+++ b/ui/prototype/src/components/editor/SpriteItem.vue
@@ -4,7 +4,6 @@ import UIEditorSpriteItem from '@/components/ui/block-items/UIEditorSpriteItem.v
 defineProps<{
   sprite: {
     name: string
-    shortName: string
     image: string
     hidden: boolean
   }
@@ -17,7 +16,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <UIEditorSpriteItem :name="sprite.shortName" :title="sprite.name" :selected="active" :visible="!sprite.hidden" @click="emit('select')">
+  <UIEditorSpriteItem :name="sprite.name" :selected="active" :visible="!sprite.hidden" @click="emit('select')">
     <template #img="{ style }">
       <img :src="sprite.image" :alt="sprite.name" :style="style" />
     </template>
diff --git a/ui/prototype/src/pages/editor/index.vue b/ui/prototype/src/pages/editor/index.vue
index 2e13719f6..0e03ad17b 100644
--- a/ui/prototype/src/pages/editor/index.vue
+++ b/ui/prototype/src/pages/editor/index.vue
@@ -89,7 +89,6 @@ const router = useRouter()
 type SpriteCard = {
   id: string
   name: string
-  shortName: string
   image: string
   hidden: boolean
   x: number
@@ -428,7 +427,6 @@ const niuRunSprites = ref<SpriteCard[]>([
   {
     id: 'niu-xiao-qi',
     name: '牛小七',
-    shortName: '牛小七',
     image: niuXiaoQiUrl,
     hidden: false,
     x: -224,
@@ -440,7 +438,6 @@ const niuRunSprites = ref<SpriteCard[]>([
   {
     id: 'niu-xiao-hua',
     name: '牛小花牛小花牛小花牛小花牛小花牛小花',
-    shortName: '牛小花牛小花...',
     image: niuXiaoHuaUrl,
     hidden: false,
     x: -130,
@@ -452,7 +449,6 @@ const niuRunSprites = ref<SpriteCard[]>([
   {
     id: 'flower',
     name: '花朵花朵花朵花朵花朵花朵花朵花朵花朵',
-    shortName: '花朵花...',
     image: flowerUrl,
     hidden: true,
     x: 0,
@@ -464,7 +460,6 @@ const niuRunSprites = ref<SpriteCard[]>([
   {
     id: 'tornado',
     name: '龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风',
-    shortName: '龙卷风...',
     image: tornadoUrl,
     hidden: true,
     x: 120,
@@ -540,7 +535,6 @@ const weatherggggSprites = ref<SpriteCard[]>([
   {
     id: 'jaime',
     name: 'Jaime',
-    shortName: 'Jaime',
     image: jaimeUrl,
     hidden: false,
     x: -80,
@@ -552,7 +546,6 @@ const weatherggggSprites = ref<SpriteCard[]>([
   {
     id: 'kai',
     name: 'Kai',
-    shortName: 'Kai',
     image: kaiUrl,
     hidden: false,
     x: 80,
@@ -1434,7 +1427,6 @@ function createSpriteCard(source: string, name: string, image: string): SpriteCa
   const sprite: SpriteCard = {
     id: `${source}-sprite-${Date.now()}`,
     name,
-    shortName: name.length > 10 ? `${name.slice(0, 8)}...` : name,
     image,
     hidden: false,
     x: -224,
@@ -1763,7 +1755,6 @@ function duplicateSprite(sprite: SpriteCard) {
     ...sprite,
     id: `${sprite.id}-copy-${Date.now()}`,
     name: `${sprite.name} ${copyIndex}`,
-    shortName: `${sprite.shortName} ${copyIndex}`,
     hidden: false
   }
   const sourceIndex = sprites.value.findIndex((item) => item.id === sprite.id)
@@ -1810,7 +1801,6 @@ function submitSpriteRename() {
     return
   }
   sprite.name = nextName
-  sprite.shortName = nextName.length > 10 ? `${nextName.slice(0, 8)}...` : nextName
   cancelSpriteRename()
   markPrototypeAction()
 }
@@ -1839,7 +1829,6 @@ function submitMapSpriteRename() {
     return
   }
   sprite.name = nextName
-  sprite.shortName = nextName.length > 10 ? `${nextName.slice(0, 8)}...` : nextName
   cancelMapSpriteRename()
 }
 

From d7a0c6690c7e6a5cb79557a4e45d821b066b8b3e Mon Sep 17 00:00:00 2001
From: qingqing-ux <xxin31516@gmail.com>
Date: Fri, 22 May 2026 15:26:01 +0800
Subject: [PATCH 07/13] Make medium sprite titles use full width

---
 .../ui/block-items/UIBlockItemTitle.vue       | 28 ++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue b/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
index f7bf89b89..5b910e724 100644
--- a/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
+++ b/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
@@ -1,3 +1,12 @@
+<template>
+  <div :class="rootClass">
+    <span class="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap" :title="title">
+      <slot></slot>
+    </span>
+    <slot v-if="slots.suffix != null" name="suffix"></slot>
+  </div>
+</template>
+
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
 
@@ -9,23 +18,10 @@ const props = defineProps<{
 
 const slots = useSlots()
 const rootClass = computed(() => [
-  'flex items-center text-center text-title',
+  'flex items-center text-title',
   props.size === 'large'
-    ? 'h-5 w-full gap-2 px-1.5 text-sm'
-    : ['h-5.5 w-[76px] gap-0.5 text-2xs', slots.suffix != null ? 'px-0' : 'px-1.5'],
+    ? 'h-5 w-full gap-2 px-1.5 text-center text-sm'
+    : ['h-5.5 w-[76px] gap-0.5 px-0 text-2xs', slots.suffix != null ? 'text-left' : 'text-center'],
   props.class
 ])
 </script>
-
-<template>
-  <div :class="rootClass">
-    <span
-      class="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
-      :class="{ 'text-left': slots.suffix != null }"
-      :title="title"
-    >
-      <slot></slot>
-    </span>
-    <slot v-if="slots.suffix != null" name="suffix"></slot>
-  </div>
-</template>

From 10405d133139e3331de257bd03440fe914f1e120 Mon Sep 17 00:00:00 2001
From: qingqing-ux <xxin31516@gmail.com>
Date: Fri, 22 May 2026 15:36:47 +0800
Subject: [PATCH 08/13] Default sprite item visibility to neutral

---
 .../ui/block-items/UIEditorSpriteItem.vue       | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/ui/prototype/src/components/ui/block-items/UIEditorSpriteItem.vue b/ui/prototype/src/components/ui/block-items/UIEditorSpriteItem.vue
index 1f34493b0..123c976a5 100644
--- a/ui/prototype/src/components/ui/block-items/UIEditorSpriteItem.vue
+++ b/ui/prototype/src/components/ui/block-items/UIEditorSpriteItem.vue
@@ -4,12 +4,17 @@ import eyeOffIcon from '@/assets/editor/ui-icons/eye-off.svg?raw'
 import UIBlockItem from '@/components/ui/block-items/UIBlockItem.vue'
 import UIBlockItemTitle from '@/components/ui/block-items/UIBlockItemTitle.vue'
 
-defineProps<{
-  name: string
-  title?: string
-  selected?: boolean
-  visible?: boolean
-}>()
+withDefaults(
+  defineProps<{
+    name: string
+    title?: string
+    selected?: boolean
+    visible?: boolean | null
+  }>(),
+  {
+    visible: null
+  }
+)
 
 const imgStyle: CSSProperties = {
   width: '60px',

From da623cab0014d175826bb2c8a4e60b09dbee0707 Mon Sep 17 00:00:00 2001
From: qingqing-ux <xxin31516@gmail.com>
Date: Fri, 22 May 2026 15:40:08 +0800
Subject: [PATCH 09/13] Use block title for prototype backdrop items

---
 .../ui/block-items/UIEditorBackdropItem.vue   | 22 +++++++++++++++++++
 ui/prototype/src/pages/editor/index.vue       | 14 +++++-------
 2 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 ui/prototype/src/components/ui/block-items/UIEditorBackdropItem.vue

diff --git a/ui/prototype/src/components/ui/block-items/UIEditorBackdropItem.vue b/ui/prototype/src/components/ui/block-items/UIEditorBackdropItem.vue
new file mode 100644
index 000000000..b841f2591
--- /dev/null
+++ b/ui/prototype/src/components/ui/block-items/UIEditorBackdropItem.vue
@@ -0,0 +1,22 @@
+<template>
+  <UIBlockItem :active="selected">
+    <div class="mt-0.5 flex min-h-0 w-full flex-col items-center">
+      <img class="h-15 w-20 rounded-[4px] object-cover" :src="imgSrc" :alt="name" />
+    </div>
+    <UIBlockItemTitle size="medium" :title="name">
+      {{ name }}
+    </UIBlockItemTitle>
+    <slot></slot>
+  </UIBlockItem>
+</template>
+
+<script setup lang="ts">
+import UIBlockItem from '@/components/ui/block-items/UIBlockItem.vue'
+import UIBlockItemTitle from '@/components/ui/block-items/UIBlockItemTitle.vue'
+
+defineProps<{
+  imgSrc: string
+  name: string
+  selected?: boolean
+}>()
+</script>
diff --git a/ui/prototype/src/pages/editor/index.vue b/ui/prototype/src/pages/editor/index.vue
index 0e03ad17b..07fb32512 100644
--- a/ui/prototype/src/pages/editor/index.vue
+++ b/ui/prototype/src/pages/editor/index.vue
@@ -15,6 +15,7 @@ import UICardHeader from '@/components/ui/UICardHeader.vue'
 import UITab from '@/components/ui/UITab.vue'
 import UITabs from '@/components/ui/UITabs.vue'
 import UITag from '@/components/ui/UITag.vue'
+import UIEditorBackdropItem from '@/components/ui/block-items/UIEditorBackdropItem.vue'
 import controlIcon from '@/assets/editor/category-icons/control.svg?raw'
 import eventIcon from '@/assets/editor/category-icons/event.svg?raw'
 import gameIcon from '@/assets/editor/category-icons/game.svg?raw'
@@ -2423,17 +2424,14 @@ onBeforeUnmount(() => {
 
         <div v-else-if="activeStageTab === 'backdrops'" class="asset-editor-body">
           <aside class="asset-editor-list" aria-label="Backdrops list">
-            <button
+            <UIEditorBackdropItem
               v-for="backdrop in backdrops"
               :key="backdrop.id"
-              class="editor-asset-item"
-              :class="{ active: selectedBackdropId === backdrop.id }"
-              type="button"
+              :img-src="backdrop.image"
+              :name="backdrop.name"
+              :selected="selectedBackdropId === backdrop.id"
               @click="selectedBackdropId = backdrop.id"
-            >
-              <img :src="backdrop.image" :alt="backdrop.name" />
-              <span class="asset-item-title">{{ backdrop.name }}</span>
-            </button>
+            ></UIEditorBackdropItem>
             <button class="asset-add-button" type="button" aria-label="Add backdrop">+</button>
           </aside>
           <section class="asset-detail" aria-label="Backdrop detail">

From 1f505db3c9f1e64a48ea2f6c492551c4083268c0 Mon Sep 17 00:00:00 2001
From: qingqing-ux <xxin31516@gmail.com>
Date: Fri, 22 May 2026 16:09:06 +0800
Subject: [PATCH 10/13] Skip GHCR login for non-publish builds

---
 .github/workflows/publish-docker-image.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.github/workflows/publish-docker-image.yml b/.github/workflows/publish-docker-image.yml
index 7b5d4283c..ddcc8ce6c 100644
--- a/.github/workflows/publish-docker-image.yml
+++ b/.github/workflows/publish-docker-image.yml
@@ -5,12 +5,16 @@ on:
 jobs:
   publish-docker-image:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
     steps:
       - name: Check out code
         uses: actions/checkout@v6
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v4
       - name: Log in to GitHub Container Registry
+        if: ${{ github.event_name == 'push' && github.ref_name == 'dev' }}
         uses: docker/login-action@v4
         with:
           registry: ghcr.io

From 6c3168844d53b98ee0d7a52bffd533a8b41b905c Mon Sep 17 00:00:00 2001
From: qingqing-ux <xxin31516@gmail.com>
Date: Fri, 22 May 2026 17:24:52 +0800
Subject: [PATCH 11/13] Address prototype UI review comments

---
 .github/workflows/publish-docker-image.yml    |  4 ---
 ui/prototype/package-lock.json                | 11 +++++++
 ui/prototype/package.json                     |  1 +
 ui/prototype/src/components/ui/UITab.vue      | 16 ++++++----
 ui/prototype/src/components/ui/UITabs.vue     |  8 +++--
 .../ui/block-items/UIBlockItemTitle.vue       | 20 +++++++-----
 .../ui/block-items/UIEditorSpriteItem.vue     | 10 +++---
 .../src/components/ui/icons/UIIcon.vue        | 31 +++++++++++++++++++
 .../src/components/ui/icons/eye-off.svg       |  3 ++
 ui/prototype/src/components/ui/utils/cn.ts    | 28 +++++++++++++++++
 ui/prototype/src/components/ui/utils/index.ts |  1 +
 11 files changed, 108 insertions(+), 25 deletions(-)
 create mode 100644 ui/prototype/src/components/ui/icons/UIIcon.vue
 create mode 100644 ui/prototype/src/components/ui/icons/eye-off.svg
 create mode 100644 ui/prototype/src/components/ui/utils/cn.ts
 create mode 100644 ui/prototype/src/components/ui/utils/index.ts

diff --git a/.github/workflows/publish-docker-image.yml b/.github/workflows/publish-docker-image.yml
index ddcc8ce6c..7b5d4283c 100644
--- a/.github/workflows/publish-docker-image.yml
+++ b/.github/workflows/publish-docker-image.yml
@@ -5,16 +5,12 @@ on:
 jobs:
   publish-docker-image:
     runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
     steps:
       - name: Check out code
         uses: actions/checkout@v6
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v4
       - name: Log in to GitHub Container Registry
-        if: ${{ github.event_name == 'push' && github.ref_name == 'dev' }}
         uses: docker/login-action@v4
         with:
           registry: ghcr.io
diff --git a/ui/prototype/package-lock.json b/ui/prototype/package-lock.json
index 6b2a62cf9..1c47cdce7 100644
--- a/ui/prototype/package-lock.json
+++ b/ui/prototype/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@tailwindcss/vite": "4.2.2",
         "@vitejs/plugin-vue": "^6.0.5",
+        "tailwind-merge": "^3.5.0",
         "tailwindcss": "4.2.2",
         "typescript": "^5.9.3",
         "vite": "^8.0.0",
@@ -1306,6 +1307,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.5.0.tgz",
+      "integrity": "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
diff --git a/ui/prototype/package.json b/ui/prototype/package.json
index d456e7216..b16d11d70 100644
--- a/ui/prototype/package.json
+++ b/ui/prototype/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@tailwindcss/vite": "4.2.2",
     "@vitejs/plugin-vue": "^6.0.5",
+    "tailwind-merge": "^3.5.0",
     "tailwindcss": "4.2.2",
     "typescript": "^5.9.3",
     "vite": "^8.0.0",
diff --git a/ui/prototype/src/components/ui/UITab.vue b/ui/prototype/src/components/ui/UITab.vue
index 988f4e6ba..1c31a459c 100644
--- a/ui/prototype/src/components/ui/UITab.vue
+++ b/ui/prototype/src/components/ui/UITab.vue
@@ -2,11 +2,12 @@
 import { computed } from 'vue'
 
 import { useUITabsCtx } from './UITabs.vue'
+import { cn, type ClassValue } from './utils'
 
 const props = withDefaults(
   defineProps<{
     value: string
-    class?: string
+    class?: ClassValue
   }>(),
   {
     class: ''
@@ -15,15 +16,18 @@ const props = withDefaults(
 
 const tabsCtx = useUITabsCtx()
 const active = computed(() => tabsCtx.value.value === props.value)
+const rootClass = computed(() =>
+  cn(
+    'tab flex h-full min-w-0 cursor-pointer items-center overflow-hidden border-b-2 px-md text-xl/8 whitespace-nowrap transition-[color,border-color] duration-200',
+    active.value ? 'border-grey-1000 text-grey-1000' : 'border-transparent text-grey-800 hover:text-grey-1000',
+    props.class
+  )
+)
 </script>
 
 <template>
   <li
-    class="tab flex h-full min-w-0 cursor-pointer items-center overflow-hidden border-b-2 px-md text-xl/8 whitespace-nowrap transition-[color,border-color] duration-200"
-    :class="[
-      active ? 'border-grey-1000 text-grey-1000' : 'border-transparent text-grey-800 hover:text-grey-1000',
-      props.class
-    ]"
+    :class="rootClass"
     @click="tabsCtx.setValue(props.value)"
   >
     <slot />
diff --git a/ui/prototype/src/components/ui/UITabs.vue b/ui/prototype/src/components/ui/UITabs.vue
index ec1d1a54c..b712739f6 100644
--- a/ui/prototype/src/components/ui/UITabs.vue
+++ b/ui/prototype/src/components/ui/UITabs.vue
@@ -18,10 +18,12 @@ export function useUITabsCtx() {
 <script setup lang="ts">
 import { computed, provide } from 'vue'
 
+import { cn, type ClassValue } from './utils'
+
 const props = withDefaults(
   defineProps<{
     value: string
-    class?: string
+    class?: ClassValue
   }>(),
   {
     class: ''
@@ -38,10 +40,12 @@ provide(prototypeTabsCtxKey, {
     emit('update:value', value)
   }
 })
+
+const rootClass = computed(() => cn('m-0 flex min-w-0 list-none overflow-hidden px-2', props.class))
 </script>
 
 <template>
-  <ul class="m-0 flex min-w-0 list-none overflow-hidden px-2" :class="props.class">
+  <ul :class="rootClass">
     <slot />
   </ul>
 </template>
diff --git a/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue b/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
index 5b910e724..7bfdf6ac1 100644
--- a/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
+++ b/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
@@ -10,18 +10,22 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
 
+import { cn, type ClassValue } from '../utils'
+
 const props = defineProps<{
   size: 'medium' | 'large'
   title: string
-  class?: string
+  class?: ClassValue
 }>()
 
 const slots = useSlots()
-const rootClass = computed(() => [
-  'flex items-center text-title',
-  props.size === 'large'
-    ? 'h-5 w-full gap-2 px-1.5 text-center text-sm'
-    : ['h-5.5 w-[76px] gap-0.5 px-0 text-2xs', slots.suffix != null ? 'text-left' : 'text-center'],
-  props.class
-])
+const rootClass = computed(() =>
+  cn(
+    'flex items-center text-title',
+    props.size === 'large'
+      ? 'h-5 w-full gap-2 px-1.5 text-center text-sm'
+      : ['h-5.5 w-[76px] gap-0.5 px-0 text-2xs', slots.suffix != null ? 'text-left' : 'text-center'],
+    props.class
+  )
+)
 </script>
diff --git a/ui/prototype/src/components/ui/block-items/UIEditorSpriteItem.vue b/ui/prototype/src/components/ui/block-items/UIEditorSpriteItem.vue
index 123c976a5..aae854b85 100644
--- a/ui/prototype/src/components/ui/block-items/UIEditorSpriteItem.vue
+++ b/ui/prototype/src/components/ui/block-items/UIEditorSpriteItem.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue'
-import eyeOffIcon from '@/assets/editor/ui-icons/eye-off.svg?raw'
 import UIBlockItem from '@/components/ui/block-items/UIBlockItem.vue'
 import UIBlockItemTitle from '@/components/ui/block-items/UIBlockItemTitle.vue'
+import UIIcon from '@/components/ui/icons/UIIcon.vue'
 
 withDefaults(
   defineProps<{
@@ -31,13 +31,13 @@ const imgStyle: CSSProperties = {
     <UIBlockItemTitle size="medium" :title="title ?? name">
       {{ name }}
       <template v-if="visible === false" #suffix>
-        <span
-          class="inline-flex size-3.5 flex-none cursor-auto items-center justify-center text-grey-700 [&>svg]:block [&>svg]:size-full"
+        <UIIcon
+          class="size-3.5 flex-none cursor-auto text-grey-700"
+          type="eyeOff"
           role="img"
           aria-label="Invisible"
           title="Invisible"
-          v-html="eyeOffIcon"
-        ></span>
+        />
       </template>
     </UIBlockItemTitle>
     <slot></slot>
diff --git a/ui/prototype/src/components/ui/icons/UIIcon.vue b/ui/prototype/src/components/ui/icons/UIIcon.vue
new file mode 100644
index 000000000..1e526924f
--- /dev/null
+++ b/ui/prototype/src/components/ui/icons/UIIcon.vue
@@ -0,0 +1,31 @@
+<template>
+  <!-- eslint-disable-next-line vue/no-v-html -->
+  <div :class="rootClass" :data-icon-type="type" v-html="typeIconMap[type]"></div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { cn, type ClassValue } from '../utils'
+import eyeOff from './eye-off.svg?raw'
+
+const typeIconMap = {
+  eyeOff
+}
+
+export type Type = keyof typeof typeIconMap
+
+const props = defineProps<{
+  type: Type
+  class?: ClassValue
+}>()
+
+const rootClass = computed(() => cn('ui-icon flex h-4 w-4', props.class))
+</script>
+
+<style scoped>
+.ui-icon :deep(svg) {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/ui/prototype/src/components/ui/icons/eye-off.svg b/ui/prototype/src/components/ui/icons/eye-off.svg
new file mode 100644
index 000000000..ba66fe0d8
--- /dev/null
+++ b/ui/prototype/src/components/ui/icons/eye-off.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1133 7.53809C20.3684 7.04844 20.9721 6.85833 21.4619 7.11328C21.9514 7.36845 22.1416 7.97222 21.8867 8.46191C21.4958 9.2128 20.9197 9.87987 20.2227 10.4512C20.1572 10.5049 20.0874 10.5542 20.0195 10.6064L22.2109 12.7979C22.6012 13.1884 22.6013 13.8214 22.2109 14.2119C21.8205 14.6024 21.1874 14.6022 20.7969 14.2119L18.2607 11.6758C17.4741 12.0514 16.6054 12.3553 15.6777 12.5762L16.4893 15.6045C16.6321 16.1378 16.3155 16.687 15.7822 16.8301C15.2489 16.9729 14.7006 16.6554 14.5576 16.1221L13.6973 12.9111C13.1429 12.9684 12.5758 13 12 13C11.4202 13 10.849 12.9682 10.291 12.9102L9.43066 16.123C9.28756 16.6561 8.73922 16.9727 8.20605 16.8301C7.67259 16.6871 7.35609 16.138 7.49902 15.6045L8.31055 12.5732C7.38809 12.3528 6.52399 12.0504 5.74121 11.6768L3.20703 14.2119C2.81658 14.6024 2.18351 14.6022 1.79297 14.2119C1.40261 13.8214 1.4025 13.1883 1.79297 12.7979L3.98145 10.6084C3.913 10.5558 3.84336 10.5053 3.77734 10.4512C3.08027 9.87988 2.50423 9.21275 2.11328 8.46191C1.85831 7.97211 2.04839 7.36837 2.53809 7.11328C3.02785 6.85847 3.63166 7.04846 3.88672 7.53809C4.13045 8.00621 4.51604 8.47083 5.04492 8.9043C6.54375 10.1326 9.06065 11 12 11C14.9394 10.9999 17.4564 10.1326 18.9551 8.9043C19.484 8.47078 19.8696 8.00621 20.1133 7.53809Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/components/ui/utils/cn.ts b/ui/prototype/src/components/ui/utils/cn.ts
new file mode 100644
index 000000000..eda8cbacf
--- /dev/null
+++ b/ui/prototype/src/components/ui/utils/cn.ts
@@ -0,0 +1,28 @@
+import { twMerge } from 'tailwind-merge'
+
+export type ClassDictionary = Record<string, boolean | null>
+export type ClassValue = string | ClassDictionary | null | undefined | false | ClassValue[]
+
+function flattenClassValue(value: ClassValue, tokens: string[]) {
+  if (value == null || value === false) return
+
+  if (typeof value === 'string') {
+    tokens.push(value)
+    return
+  }
+
+  if (Array.isArray(value)) {
+    for (const item of value) flattenClassValue(item, tokens)
+    return
+  }
+
+  for (const [className, enabled] of Object.entries(value)) {
+    if (enabled === true) tokens.push(className)
+  }
+}
+
+export function cn(...values: ClassValue[]) {
+  const tokens: string[] = []
+  for (const value of values) flattenClassValue(value, tokens)
+  return twMerge(tokens.join(' '))
+}
diff --git a/ui/prototype/src/components/ui/utils/index.ts b/ui/prototype/src/components/ui/utils/index.ts
new file mode 100644
index 000000000..c5c1882cf
--- /dev/null
+++ b/ui/prototype/src/components/ui/utils/index.ts
@@ -0,0 +1 @@
+export * from './cn'

From ecf65419abe697261e743e9fe69ee3f54776e019 Mon Sep 17 00:00:00 2001
From: qingqing-ux <xxin31516@gmail.com>
Date: Fri, 22 May 2026 19:26:22 +0800
Subject: [PATCH 12/13] Refine prototype title row sizing

---
 ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue b/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
index 7bfdf6ac1..bdbe1e38e 100644
--- a/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
+++ b/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
@@ -24,7 +24,7 @@ const rootClass = computed(() =>
     'flex items-center text-title',
     props.size === 'large'
       ? 'h-5 w-full gap-2 px-1.5 text-center text-sm'
-      : ['h-5.5 w-[76px] gap-0.5 px-0 text-2xs', slots.suffix != null ? 'text-left' : 'text-center'],
+      : ['h-5.5 w-full gap-0.5 px-1 text-2xs', slots.suffix != null ? 'text-left' : 'text-center'],
     props.class
   )
 )

From 96c5443f15f7053ac6d317acc114259dff8046ff Mon Sep 17 00:00:00 2001
From: qingqing-ux <xxin31516@gmail.com>
Date: Fri, 22 May 2026 19:44:01 +0800
Subject: [PATCH 13/13] Keep prototype item title alignment consistent

---
 ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue b/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
index bdbe1e38e..316c06876 100644
--- a/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
+++ b/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
@@ -24,7 +24,7 @@ const rootClass = computed(() =>
     'flex items-center text-title',
     props.size === 'large'
       ? 'h-5 w-full gap-2 px-1.5 text-center text-sm'
-      : ['h-5.5 w-full gap-0.5 px-1 text-2xs', slots.suffix != null ? 'text-left' : 'text-center'],
+      : 'h-5.5 w-full gap-0.5 px-1 text-center text-2xs',
     props.class
   )
 )