diff --git a/spx-gui/src/components/editor/common/AnglePicker.vue b/spx-gui/src/components/editor/common/AnglePicker.vue
index 3468a6c4f..620f0721b 100644
--- a/spx-gui/src/components/editor/common/AnglePicker.vue
+++ b/spx-gui/src/components/editor/common/AnglePicker.vue
@@ -2,7 +2,7 @@
 import { computed, ref, watch } from 'vue'
 import { useDraggableAngleForElement } from '@/utils/dom'
 import { makeArcPathString } from '@/utils/svg'
-import { nomalizeDegree, useDebouncedModel } from '@/utils/utils'
+import { normalizeDegree, useDebouncedModel } from '@/utils/utils'
 import { specialDirections } from '@/utils/spx'
 import { UITag } from '@/components/ui'
 
@@ -16,7 +16,7 @@ const emit = defineEmits<{
 
 const [modelValue] = useDebouncedModel<number>(
   () => props.modelValue,
-  (v) => emit('update:modelValue', nomalizeDegree(Math.floor(v)))
+  (v) => emit('update:modelValue', normalizeDegree(Math.floor(v)))
 )
 
 const svgEl = ref<HTMLElement | null>(null)
@@ -26,7 +26,7 @@ const arcPath = computed(() => {
   return makeArcPathString({ x: 70, y: 70, r: 63, start, end })
 })
 const angle = useDraggableAngleForElement(svgEl, { initialValue: props.modelValue, snap: 15 })
-watch(angle, (v) => (modelValue.value = nomalizeDegree(v)))
+watch(angle, (v) => (modelValue.value = normalizeDegree(v)))
 </script>
 
 <template>
diff --git a/spx-gui/src/components/editor/common/config/sprite/SpriteDirection.vue b/spx-gui/src/components/editor/common/config/sprite/SpriteDirection.vue
index 9017f2a47..c64120161 100644
--- a/spx-gui/src/components/editor/common/config/sprite/SpriteDirection.vue
+++ b/spx-gui/src/components/editor/common/config/sprite/SpriteDirection.vue
@@ -7,10 +7,7 @@ import { headingToLeftRight, LeftRight, leftRightToHeading, RotationStyle, type
 import { wrapUpdateHandler } from '../utils'
 
 import AnglePicker from '@/components/editor/common/AnglePicker.vue'
-import { UIButtonGroup, UIButtonGroupItem, UIDropdown, UINumberInput, UITooltip } from '@/components/ui'
-import rotateIcon from './rotate.svg?raw'
-import leftRightIcon from './left-right.svg?raw'
-import noRotateIcon from './no-rotate.svg?raw'
+import { UIButtonGroup, UIButtonGroupItem, UIDropdown, UIIcon, UINumberInput, UITooltip } from '@/components/ui'
 
 const props = defineProps<{
   sprite: Sprite
@@ -71,7 +68,7 @@ const handleHeadingUpdate = wrapUpdateHandler(
         {{ $t(rotationStyleTips.normal) }}
         <template #trigger>
           <UIButtonGroupItem :value="RotationStyle.Normal">
-            <i class="rotation-icon" v-html="rotateIcon"></i>
+            <UIIcon type="rotateAround" />
           </UIButtonGroupItem>
         </template>
       </UITooltip>
@@ -79,7 +76,7 @@ const handleHeadingUpdate = wrapUpdateHandler(
         {{ $t(rotationStyleTips.leftRight) }}
         <template #trigger>
           <UIButtonGroupItem :value="RotationStyle.LeftRight">
-            <i class="rotation-icon" v-html="leftRightIcon"></i>
+            <UIIcon type="leftRight" />
           </UIButtonGroupItem>
         </template>
       </UITooltip>
@@ -87,7 +84,7 @@ const handleHeadingUpdate = wrapUpdateHandler(
         {{ $t(rotationStyleTips.none) }}
         <template #trigger>
           <UIButtonGroupItem :value="RotationStyle.None">
-            <i class="rotation-icon" v-html="noRotateIcon"></i>
+            <UIIcon type="notRotate" />
           </UIButtonGroupItem>
         </template>
       </UITooltip>
@@ -148,14 +145,4 @@ const handleHeadingUpdate = wrapUpdateHandler(
   align-items: center;
   gap: 12px;
 }
-
-.rotation-icon {
-  display: flex;
-  width: 16px;
-  height: 16px;
-  :deep(svg) {
-    width: 100%;
-    height: 100%;
-  }
-}
 </style>
diff --git a/spx-gui/src/components/editor/common/config/sprite/left-right.svg b/spx-gui/src/components/editor/common/config/sprite/left-right.svg
deleted file mode 100644
index ccc9a9491..000000000
--- a/spx-gui/src/components/editor/common/config/sprite/left-right.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<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="M10.6934 11.5485V4.91142C10.6934 4.47076 11.2263 4.25042 11.5378 4.56185L14.8551 7.8816C15.0483 8.07362 15.0483 8.38627 14.8551 8.57953L11.5378 11.8968C11.2263 12.2082 10.6934 11.9879 10.6934 11.5485Z" fill="currentColor"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.61426 3.76112C7.68688 3.78573 7.77305 3.79805 7.8469 3.79805C8.02046 3.79805 8.16817 3.7365 8.29003 3.62449C8.35041 3.5653 8.38709 3.4931 8.4245 3.41948L8.42666 3.41523C8.42792 3.41129 8.4292 3.40734 8.43048 3.40339C8.45278 3.33443 8.47589 3.26292 8.47589 3.18259C8.47589 3.02258 8.40081 2.86255 8.29003 2.75054C8.22971 2.69023 8.16817 2.65207 8.09308 2.61637C7.86044 2.5179 7.58841 2.57945 7.41608 2.75054C7.36685 2.79978 7.31761 2.87486 7.28068 2.94872C7.25729 3.02258 7.23145 3.10751 7.23145 3.18259C7.23145 3.26292 7.25456 3.33443 7.27686 3.40339C7.27814 3.40734 7.27941 3.41129 7.28068 3.41523C7.31761 3.49032 7.36685 3.56417 7.41608 3.62449C7.47763 3.67372 7.53917 3.72296 7.61426 3.76112ZM7.24462 5.59505C7.24462 5.25039 7.51542 4.97959 7.86007 4.97959C8.19241 4.97959 8.47552 5.25039 8.47552 5.59505C8.47552 5.92739 8.19241 6.2105 7.86007 6.2105C7.51542 6.2105 7.24462 5.92739 7.24462 5.59505ZM7.8469 13.4229C7.68688 13.4229 7.53917 13.3613 7.41608 13.2394C7.36685 13.1902 7.31761 13.1152 7.28068 13.0413L7.2769 13.0296C7.2546 12.9606 7.23145 12.889 7.23145 12.8074C7.23145 12.7335 7.25729 12.6474 7.28068 12.5748C7.31761 12.4997 7.36685 12.4258 7.41608 12.3766C7.58841 12.2055 7.86044 12.1427 8.09308 12.2412C8.16817 12.2781 8.22971 12.3163 8.29003 12.3766C8.33926 12.4258 8.38849 12.4997 8.42666 12.5748C8.45004 12.6474 8.47589 12.7335 8.47589 12.8074C8.47589 12.889 8.45274 12.9606 8.43043 13.0296L8.42666 13.0413L8.4213 13.0517C8.38499 13.1221 8.34869 13.1925 8.29003 13.2394C8.18047 13.3613 8.02046 13.4229 7.8469 13.4229ZM7.86007 7.37986C7.51542 7.37986 7.24462 7.65066 7.24462 7.99531C7.24462 8.33874 7.51542 8.61077 7.86007 8.61077C8.19241 8.61077 8.47552 8.33874 8.47552 7.99531C8.47552 7.65066 8.19241 7.37986 7.86007 7.37986ZM7.24462 10.4079C7.24462 10.0632 7.51542 9.79244 7.86007 9.79244C8.19241 9.79244 8.47552 10.0632 8.47552 10.4079C8.47552 10.7402 8.19241 11.0233 7.86007 11.0233C7.51542 11.0233 7.24462 10.7402 7.24462 10.4079Z" fill="currentColor"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.30571 4.91142V11.5485C5.30571 11.9879 4.77396 12.2082 4.46254 11.8968L1.14402 8.57829C0.951995 8.38504 0.951995 8.07239 1.14402 7.88037L4.46254 4.56185C4.77396 4.25042 5.30571 4.47076 5.30571 4.91142Z" fill="currentColor"/>
-</svg>
diff --git a/spx-gui/src/components/editor/common/config/sprite/no-rotate.svg b/spx-gui/src/components/editor/common/config/sprite/no-rotate.svg
deleted file mode 100644
index c71210976..000000000
--- a/spx-gui/src/components/editor/common/config/sprite/no-rotate.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<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="M10.219 6.34489L11.3116 5.05372C11.8132 5.77428 12.1342 6.62944 12.2085 7.5528H13.364C13.8684 7.5528 14.1711 8.11224 13.896 8.53412L11.9608 11.5514C11.7132 11.9458 11.1446 11.9458 10.8878 11.5514L8.96186 8.53412C8.68672 8.11224 8.98937 7.5528 9.49379 7.5528H10.5943C10.5421 7.12113 10.4122 6.71365 10.219 6.34489ZM12.2277 2.64407L3.2157 13.2946C3.19921 13.3141 3.18476 13.3346 3.17233 13.3559L2.75575 13.8483C2.60286 14.0289 2.33244 14.0515 2.15175 13.8986C1.97106 13.7457 1.94852 13.4753 2.10141 13.2946L3.5223 11.6154C2.58262 10.6873 2.00001 9.39859 2.00001 7.97468C2.00001 5.15912 4.29281 2.85715 7.11753 2.85715C8.23482 2.85715 9.26926 3.21794 10.1108 3.82894L11.53 2.15175C11.6829 1.97106 11.9533 1.94852 12.134 2.10141C12.2952 2.23781 12.3305 2.46776 12.2277 2.64407ZM4.92622 12.6L6.01748 11.3104C6.36378 11.4251 6.73365 11.4872 7.11753 11.4872C7.55867 11.4872 7.91543 11.844 7.91543 12.2851C7.91543 12.7345 7.55867 13.0922 7.11753 13.0922C6.33358 13.0922 5.59059 12.9156 4.92622 12.6ZM9.06989 5.05913C8.51199 4.68207 7.84027 4.46211 7.11753 4.46211C5.18333 4.46211 3.60497 6.03955 3.60497 7.97468C3.60497 8.90563 3.97027 9.75381 4.56475 10.3834L9.06989 5.05913Z" fill="currentColor"/>
-</svg>
diff --git a/spx-gui/src/components/editor/common/config/sprite/rotate.svg b/spx-gui/src/components/editor/common/config/sprite/rotate.svg
deleted file mode 100644
index b7f4390df..000000000
--- a/spx-gui/src/components/editor/common/config/sprite/rotate.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<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="M13.896 8.67697L11.9608 11.6943C11.7132 12.0887 11.1446 12.0887 10.8878 11.6943L8.96186 8.67697C8.68672 8.2551 8.98937 7.69565 9.49378 7.69565H10.5943C10.3834 5.95313 8.90683 4.60496 7.11753 4.60496C5.18332 4.60496 3.60496 6.18241 3.60496 8.11753C3.60496 10.0527 5.18332 11.6301 7.11753 11.6301C7.55866 11.6301 7.91542 11.9869 7.91542 12.428C7.91542 12.8774 7.55866 13.2351 7.11753 13.2351C4.2928 13.2351 2 10.9423 2 8.11753C2 5.30197 4.2928 3 7.11753 3C9.79552 3 11.9975 5.07269 12.2085 7.69565H13.364C13.8684 7.69565 14.1711 8.2551 13.896 8.67697Z" fill="currentColor"/>
-</svg>
diff --git a/spx-gui/src/components/editor/common/viewer/DecoratorNode.vue b/spx-gui/src/components/editor/common/viewer/DecoratorNode.vue
index eda0f7de2..f87b7150f 100644
--- a/spx-gui/src/components/editor/common/viewer/DecoratorNode.vue
+++ b/spx-gui/src/components/editor/common/viewer/DecoratorNode.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import type { ImageConfig } from 'konva/lib/shapes/Image'
 import type { Size } from '@/models/common'
 import type { Decorator } from '@/models/tilemap'
-import { nomalizeDegree } from '@/utils/utils'
+import { normalizeDegree } from '@/utils/utils'
 import { useFileImg } from '@/utils/file'
 
 const props = defineProps<{
@@ -24,7 +24,7 @@ const config = computed<ImageConfig>(() => {
     offsetY: pivot.y,
     x: props.mapSize.width / 2 + position.x,
     y: props.mapSize.height / 2 - position.y,
-    rotation: nomalizeDegree(rotation - 90),
+    rotation: normalizeDegree(rotation - 90),
     scaleX: scale.x,
     scaleY: scale.y
   } satisfies ImageConfig
diff --git a/spx-gui/src/components/editor/common/viewer/NodeTransformer.vue b/spx-gui/src/components/editor/common/viewer/NodeTransformer.vue
index 8cb4388de..7e4989d88 100644
--- a/spx-gui/src/components/editor/common/viewer/NodeTransformer.vue
+++ b/spx-gui/src/components/editor/common/viewer/NodeTransformer.vue
@@ -3,12 +3,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, effect, nextTick, ref } from 'vue'
+import { computed, nextTick, ref, watchEffect } from 'vue'
 import type { Node } from 'konva/lib/Node'
 import { Sprite } from '@/models/sprite'
 import type { Widget } from '@/models/widget'
 import type { CustomTransformer, CustomTransformerConfig } from './custom-transformer'
 import { getNodeId } from './common'
+import { debounce } from 'lodash'
+import type Konva from 'konva'
 
 const props = defineProps<{
   target: Sprite | Widget | null
@@ -30,7 +32,36 @@ const config = computed<CustomTransformerConfig>(() => {
   }
 })
 
-effect(async () => {
+const keyboardMovementCodes = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft']
+const keyboardMovementOffset = [
+  [0, -1],
+  [1, 0],
+  [0, 1],
+  [-1, 0]
+]
+
+function setupKeyboardMovement(stage: Konva.Stage, selectedNode: Node) {
+  stage.container().tabIndex = 1
+  stage.container().focus()
+  stage.container().style.outline = 'none'
+  const keyboardMovementEnd = debounce(() => selectedNode.fire('dragend'), 500)
+  const handler = (e: KeyboardEvent) => {
+    const idx = keyboardMovementCodes.indexOf(e.code)
+    if (idx === -1) return
+    selectedNode.x(selectedNode.x() + keyboardMovementOffset[idx][0])
+    selectedNode.y(selectedNode.y() + keyboardMovementOffset[idx][1])
+    selectedNode.fire('dragmove')
+    e.preventDefault()
+    keyboardMovementEnd()
+  }
+  stage.container().addEventListener('keydown', handler)
+  return () => {
+    keyboardMovementEnd.cancel()
+    stage.container().removeEventListener('keydown', handler)
+  }
+}
+
+watchEffect(async (onCleanup) => {
   if (transformer.value == null) return
   const transformerNode = transformer.value.getNode()
   transformerNode.nodes([])
@@ -44,6 +75,8 @@ effect(async () => {
   if (selectedNode == null || selectedNode === (transformerNode as any).node()) return
   await nextTick() // Wait to ensure the selected node updated by Konva
   transformerNode.nodes([selectedNode])
+
+  onCleanup(setupKeyboardMovement(stage, selectedNode))
 })
 
 defineExpose({
diff --git a/spx-gui/src/components/editor/common/viewer/SpriteNode.vue b/spx-gui/src/components/editor/common/viewer/SpriteNode.vue
index d65e0fae2..f1b233e50 100644
--- a/spx-gui/src/components/editor/common/viewer/SpriteNode.vue
+++ b/spx-gui/src/components/editor/common/viewer/SpriteNode.vue
@@ -2,15 +2,18 @@
 import { computed, onMounted, ref, watchEffect } from 'vue'
 import type { KonvaEventObject } from 'konva/lib/Node'
 import type { Image, ImageConfig } from 'konva/lib/shapes/Image'
-import type { Action, Project } from '@/models/project'
-import { LeftRight, RotationStyle, headingToLeftRight, leftRightToHeading, type Sprite } from '@/models/sprite'
+import type { Project } from '@/models/project'
+import { LeftRight, RotationStyle, headingToLeftRight, leftRightToHeading } from '@/models/sprite'
 import type { Size } from '@/models/common'
-import { nomalizeDegree, round, useAsyncComputedLegacy } from '@/utils/utils'
+import { normalizeDegree, round, useAsyncComputedLegacy } from '@/utils/utils'
 import { useFileImg } from '@/utils/file'
 import { cancelBubble, getNodeId } from './common'
+import type { SpriteLocalConfig } from './quick-config/utils'
+import type { TransformOp } from './custom-transformer'
+import type Konva from 'konva'
 
 const props = defineProps<{
-  sprite: Sprite
+  localConfig: SpriteLocalConfig
   selected: boolean
   project: Project
   mapSize: Size
@@ -22,19 +25,35 @@ export type CameraScrollNotifyFn = (
   delta: { x: number; y: number }
 ) => void
 
+type ConfigGetter = {
+  get x(): number
+  get y(): number
+  get rotationStyle(): RotationStyle
+  get heading(): number
+  get size(): number
+  get visible(): boolean
+}
+
 const emit = defineEmits<{
   selected: []
   dragMove: [notifyCameraScroll: CameraScrollNotifyFn]
   dragEnd: []
+  updateTransformOp: [op: TransformOp | null]
 }>()
 
 const nodeRef = ref<KonvaNodeInstance<Image>>()
-const costume = computed(() => props.sprite.defaultCostume)
+const costume = computed(() => props.localConfig.defaultCostume)
 const bitmapResolution = computed(() => costume.value?.bitmapResolution ?? 1)
 const [image] = useFileImg(() => costume.value?.img)
 const rawSize = useAsyncComputedLegacy(async () => costume.value?.getRawSize() ?? null)
 
-const nodeId = computed(() => getNodeId(props.sprite))
+const nodeId = computed(() => getNodeId(props.localConfig))
+
+const snapshotRef = ref<ConfigGetter | null>(null)
+const configGetter = computed(() => {
+  if (snapshotRef.value != null) return snapshotRef.value
+  return props.localConfig
+})
 
 watchEffect((onCleanup) => {
   props.nodeReadyMap.set(nodeId.value, image.value != null)
@@ -48,14 +67,53 @@ 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 = props.project.zorder.indexOf(props.sprite.id)
+  const zIndex = props.project.zorder.indexOf(props.localConfig.id)
   if (zIndex >= 0) {
     nodeRef.value!.getNode().zIndex(zIndex)
   }
 })
 
+function updateLocalConfigByShape(node: Konva.Node) {
+  if (!props.selected) return
+  const localConfig = props.localConfig
+  const { x: oldX, y: oldY, heading: oldHeading, size: oldSize } = configGetter.value
+  const size = toSize(node)
+  if (oldSize !== size) {
+    localConfig.setSize(size)
+    emit('updateTransformOp', 'scale')
+  }
+  const heading = toHeading(node)
+  if (oldHeading !== heading && localConfig.rotationStyle === RotationStyle.Normal) {
+    localConfig.setHeading(heading)
+    emit('updateTransformOp', 'rotate')
+  }
+  // Sprite's pivot causes x or y to change when size or heading changes, so they need to be updated together
+  const { x, y } = toPosition(node)
+  if (oldX !== x || oldY !== y) {
+    localConfig.setX(x)
+    localConfig.setY(y)
+  }
+}
+
+function syncLocalConfigByShape(node: Konva.Node) {
+  const localConfig = props.localConfig
+  localConfig.setSize(toSize(node))
+  localConfig.setHeading(toHeading(node))
+  const { x, y } = toPosition(node)
+  localConfig.setX(x)
+  localConfig.setY(y)
+
+  localConfig.sync()
+}
+
 function handleDragMove(e: KonvaEventObject<unknown>) {
   cancelBubble(e)
+  const localConfig = props.localConfig
+  const { x, y } = toPosition(e.target)
+  localConfig.setX(x)
+  localConfig.setY(y)
+  emit('updateTransformOp', 'move')
+
   emit('dragMove', (delta) => {
     // Adjust position if camera scrolled during dragging to keep the sprite visually unmoved
     e.target.x(e.target.x() - delta.x)
@@ -63,24 +121,33 @@ function handleDragMove(e: KonvaEventObject<unknown>) {
   })
 }
 
-function handleDragEnd(e: KonvaEventObject<unknown>) {
+function handleDragEnd(e: KonvaEventObject<TransformOp>) {
   cancelBubble(e)
-  const sname = props.sprite.name
-  handleChange(e, {
-    name: { en: `Move sprite ${sname}`, zh: `移动精灵 ${sname}` }
-  })
+  syncLocalConfigByShape(e.target)
   emit('dragEnd')
 }
 
-function handleTransformed(e: KonvaEventObject<unknown>) {
-  const sname = props.sprite.name
-  handleChange(e, {
-    name: { en: `Transform sprite ${sname}`, zh: `调整精灵 ${sname}` }
-  })
+// Temporarily cache localConfig data at the start of transformation to prevent abnormal Konva.Node behavior caused by continuous data updates during the process.
+function handleTransformStart() {
+  snapshotRef.value = {
+    x: props.localConfig.x,
+    y: props.localConfig.y,
+    heading: props.localConfig.heading,
+    size: props.localConfig.size,
+    visible: props.localConfig.visible,
+    rotationStyle: props.localConfig.rotationStyle
+  }
+}
+function handleTransform(e: KonvaEventObject<unknown>) {
+  updateLocalConfigByShape(e.target)
+}
+function handleTransformEnd(e: KonvaEventObject<unknown>) {
+  syncLocalConfigByShape(e.target)
+  snapshotRef.value = null
 }
 
 const config = computed<ImageConfig>(() => {
-  const { visible, x, y, rotationStyle, heading, size } = props.sprite
+  const { visible, x, y, rotationStyle, heading, size } = configGetter.value
   const scale = size / bitmapResolution.value
   const costumePivot = costume.value?.pivot ?? { x: 0, y: 0 }
   const config = {
@@ -94,7 +161,7 @@ const config = computed<ImageConfig>(() => {
     visible: visible,
     x: props.mapSize.width / 2 + x,
     y: props.mapSize.height / 2 - y,
-    rotation: nomalizeDegree(heading - 90),
+    rotation: normalizeDegree(heading - 90),
     scaleX: scale,
     scaleY: scale
   } satisfies ImageConfig
@@ -108,22 +175,23 @@ const config = computed<ImageConfig>(() => {
   return config
 })
 
-/** Handler for position-change (drag) or transform */
-function handleChange(e: KonvaEventObject<unknown>, action: Action) {
-  const { sprite, mapSize } = props
-  const x = round(e.target.x() - mapSize.width / 2)
-  const y = round(mapSize.height / 2 - e.target.y())
-  let heading = sprite.heading
-  if (sprite.rotationStyle === RotationStyle.Normal || sprite.rotationStyle === RotationStyle.LeftRight) {
-    heading = nomalizeDegree(round(e.target.rotation() + 90))
+function toPosition(node: Konva.Node) {
+  const { mapSize } = props
+  const x = round(node.x() - mapSize.width / 2)
+  const y = round(mapSize.height / 2 - node.y())
+  return { x, y }
+}
+function toHeading(node: Konva.Node) {
+  const { localConfig } = props
+  let heading = localConfig.heading
+  if (localConfig.rotationStyle === RotationStyle.Normal || localConfig.rotationStyle === RotationStyle.LeftRight) {
+    heading = normalizeDegree(round(node.rotation() + 90))
   }
-  const size = round(Math.abs(e.target.scaleX()) * bitmapResolution.value, 2)
-  props.project.history.doAction(action, () => {
-    sprite.setX(x)
-    sprite.setY(y)
-    sprite.setHeading(heading)
-    sprite.setSize(size)
-  })
+  return heading
+}
+function toSize(node: Konva.Node) {
+  const size = round(Math.abs(node.scaleX()) * bitmapResolution.value, 2)
+  return size
 }
 
 function handleClick() {
@@ -137,7 +205,9 @@ function handleClick() {
     :config="config"
     @dragmove="handleDragMove"
     @dragend="handleDragEnd"
-    @transformend="handleTransformed"
+    @transformstart="handleTransformStart"
+    @transform="handleTransform"
+    @transformend="handleTransformEnd"
     @click="handleClick"
   />
 </template>
diff --git a/spx-gui/src/components/editor/common/viewer/common.ts b/spx-gui/src/components/editor/common/viewer/common.ts
index 0341479aa..7a7cf3d26 100644
--- a/spx-gui/src/components/editor/common/viewer/common.ts
+++ b/spx-gui/src/components/editor/common/viewer/common.ts
@@ -2,9 +2,11 @@ import { Sprite } from '@/models/sprite'
 import type { Widget } from '@/models/widget'
 import type { KonvaEventObject } from 'konva/lib/Node'
 
+import { SpriteLocalConfig, WidgetLocalConfig } from './quick-config/utils'
+
 /** Get name which identifies the node, which may be a sprite or a widget */
-export function getNodeId(target: Sprite | Widget) {
-  const type = target instanceof Sprite ? 'sprite' : 'widget'
+export function getNodeId(target: Sprite | Widget | SpriteLocalConfig | WidgetLocalConfig) {
+  const type = target instanceof Sprite || target instanceof SpriteLocalConfig ? 'sprite' : 'widget'
   return `${type}:${target.id}`
 }
 
diff --git a/spx-gui/src/components/editor/common/viewer/custom-transformer/index.ts b/spx-gui/src/components/editor/common/viewer/custom-transformer/index.ts
index eae8743ca..ae4ea2536 100644
--- a/spx-gui/src/components/editor/common/viewer/custom-transformer/index.ts
+++ b/spx-gui/src/components/editor/common/viewer/custom-transformer/index.ts
@@ -5,7 +5,6 @@ import transformerFlipArrowDisabledPng from './transformer-flip-arrow-disabled.p
 import rotatorCirclePng from './rotate-circle.png'
 import type { RectConfig } from 'konva/lib/shapes/Rect'
 import type { ImageConfig } from 'konva/lib/shapes/Image'
-import { nomalizeDegree, round } from '@/utils/utils'
 
 // There seems to be an issue rendering svg Image.
 // We are using 2x png here.
@@ -19,42 +18,12 @@ transformerFlipArrowDisabledImg.src = transformerFlipArrowDisabledPng
 const rotatorCircleImg = new Image()
 rotatorCircleImg.src = rotatorCirclePng
 
+export type TransformOp = 'rotate' | 'scale' | 'move' | 'flip'
+
 export type CustomTransformerConfig = {
   rotationStyle?: 'none' | 'normal' | 'left-right'
 } & Pick<TransformerConfig, 'centeredScaling'>
 
-class RotatorTag extends Konva.Group {
-  text: Konva.Text
-  constructor() {
-    super()
-
-    // Offset the elements to make the rotation center visually centered.
-    const text = new Konva.Text({
-      text: '',
-      width: 42,
-      fontSize: 12,
-      fill: '#fff',
-      x: -21,
-      y: -5,
-      align: 'center'
-    })
-    const background = new Konva.Rect({
-      x: -21,
-      y: -8,
-      width: 42,
-      height: 16,
-      cornerRadius: 8,
-      fill: 'rgba(87, 96, 106, 1)'
-    })
-    this.text = text
-    this.add(background, text)
-  }
-
-  updateRotationNumber(rotationNumber: number) {
-    this.text.text(`${nomalizeDegree(round(rotationNumber + 90))}°`)
-  }
-}
-
 class FlipButton extends Konva.Group {
   orientation: 'left' | 'right'
   rect: Konva.Rect
@@ -88,7 +57,7 @@ class FlipButton extends Konva.Group {
       strokeWidth: 0.5
     }
     const imageStyle: Partial<ImageConfig> = {
-      width: 4,
+      width: 6,
       height: 8
     }
     this.rect = new Konva.Rect({
@@ -113,7 +82,7 @@ class FlipButton extends Konva.Group {
       ...imageStyle,
       image: enabled ? transformerFlipArrowImg : transformerFlipArrowDisabledImg,
       rotation: enabled ? 180 : 0,
-      x: enabled ? 11 : 9,
+      x: enabled ? 12 : 9,
       y: enabled ? 14 : 6
     })
     this.image.on('mouseenter', () => {
@@ -135,7 +104,6 @@ export class CustomTransformer extends Konva.Transformer {
     left: FlipButton
     right: FlipButton
   }
-  rotatorTag: RotatorTag
 
   rotationStyle(attr?: CustomTransformerConfig['rotationStyle']): CustomTransformerConfig['rotationStyle'] {
     if (!attr) return this.getAttr('rotationStyle')
@@ -200,7 +168,6 @@ export class CustomTransformer extends Konva.Transformer {
       // as it decides the flip based on the rotation only.
       node.scaleY(node.scaleY() * -1)
       node.rotation(node.rotation() - 180)
-      node._fire('transformend', { target: node })
     })
 
     const right = new FlipButton('right')
@@ -212,10 +179,6 @@ export class CustomTransformer extends Konva.Transformer {
       right
     }
 
-    this.rotatorTag = new RotatorTag()
-    this.rotatorTag.visible(false)
-    this.add(this.rotatorTag)
-
     const rotator = this.children.find((n) => n.name().match(/rotater/))
     if (!(rotator instanceof Konva.Rect)) {
       throw new Error('rotator rect not found')
@@ -228,7 +191,6 @@ export class CustomTransformer extends Konva.Transformer {
     }
     let dragging = false
     rotator.on('mousedown touchstart', () => {
-      this.rotatorTag.visible(true)
       dragging = true
       setCursor('grabbing')
     })
@@ -238,7 +200,6 @@ export class CustomTransformer extends Konva.Transformer {
       setCursor('grabbing')
     })
     this.on('transformend', () => {
-      this.rotatorTag.visible(false)
       setCursor('')
       dragging = false
     })
@@ -270,10 +231,5 @@ export class CustomTransformer extends Konva.Transformer {
     } else {
       this.rotateEnabled(false)
     }
-
-    this.rotatorTag.rotation(-this.rotation())
-    this.rotatorTag.updateRotationNumber(this.rotation())
-    this.rotatorTag.x(this.width() / 2)
-    this.rotatorTag.y(-35)
   }
 }
diff --git a/spx-gui/src/components/editor/common/viewer/custom-transformer/rotate-circle.png b/spx-gui/src/components/editor/common/viewer/custom-transformer/rotate-circle.png
index 1cc6ddfe0..00074bd58 100644
Binary files a/spx-gui/src/components/editor/common/viewer/custom-transformer/rotate-circle.png and b/spx-gui/src/components/editor/common/viewer/custom-transformer/rotate-circle.png differ
diff --git a/spx-gui/src/components/editor/common/viewer/custom-transformer/transformer-flip-arrow-disabled.png b/spx-gui/src/components/editor/common/viewer/custom-transformer/transformer-flip-arrow-disabled.png
index 6badccc70..85023df73 100644
Binary files a/spx-gui/src/components/editor/common/viewer/custom-transformer/transformer-flip-arrow-disabled.png and b/spx-gui/src/components/editor/common/viewer/custom-transformer/transformer-flip-arrow-disabled.png differ
diff --git a/spx-gui/src/components/editor/common/viewer/custom-transformer/transformer-flip-arrow.png b/spx-gui/src/components/editor/common/viewer/custom-transformer/transformer-flip-arrow.png
index 0eaadb33d..ad251bee9 100644
Binary files a/spx-gui/src/components/editor/common/viewer/custom-transformer/transformer-flip-arrow.png and b/spx-gui/src/components/editor/common/viewer/custom-transformer/transformer-flip-arrow.png differ
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/QuickConfigWrapper.vue b/spx-gui/src/components/editor/common/viewer/quick-config/QuickConfigWrapper.vue
new file mode 100644
index 000000000..84137d4f4
--- /dev/null
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/QuickConfigWrapper.vue
@@ -0,0 +1,86 @@
+<script lang="ts">
+export type ConfigType = 'default' | 'size' | 'heading' | 'pos'
+
+export const configTypeInjectionKey: InjectionKey<Ref<ConfigType | null>> = Symbol('configType')
+export const updateConfigTypeInjectionKey: InjectionKey<(configType: ConfigType) => void> = Symbol('updateConfigType')
+</script>
+
+<script lang="ts" setup>
+import { provide, ref, type InjectionKey, type Ref, onBeforeUnmount } from 'vue'
+
+import { isInPopup } from '@/components/ui'
+
+const configTypeRef = ref<ConfigType>('default')
+
+const quickConfigRef = ref<HTMLElement | undefined>()
+let timer: NodeJS.Timeout
+let activeInteractions = 0
+
+function resetTimer() {
+  clearTimeout(timer)
+  if (configTypeRef.value === 'default') {
+    return
+  }
+  timer = setTimeout(() => updateConfigType('default'), 2000)
+}
+
+function updateConfigType(configType: ConfigType) {
+  configTypeRef.value = configType
+  if (activeInteractions === 0) {
+    resetTimer()
+  }
+}
+
+function handleInteractionStart() {
+  clearTimeout(timer)
+  activeInteractions++
+}
+function handleInteractionEnd() {
+  activeInteractions = Math.max(0, activeInteractions - 1)
+  if (activeInteractions === 0) {
+    resetTimer()
+  }
+}
+
+function handleMouseLeave(e: MouseEvent) {
+  const relatedTarget = e.relatedTarget
+  // TODO: Temporary. We need a more reliable solution to keep ConfigPanel active.
+  // Current issue: If the mouse leaves ConfigPanel and enters something other than a Popup,
+  // the logic below fails, causing ConfigPanel back to `default`.
+  if (relatedTarget instanceof HTMLElement && isInPopup(relatedTarget)) {
+    relatedTarget.addEventListener('mouseleave', handleInteractionEnd, { once: true })
+    return
+  }
+  handleInteractionEnd()
+}
+
+defineExpose({
+  getElement: () => quickConfigRef.value,
+  updateConfigType
+})
+
+provide(configTypeInjectionKey, configTypeRef)
+provide(updateConfigTypeInjectionKey, updateConfigType)
+
+onBeforeUnmount(() => clearTimeout(timer))
+</script>
+
+<template>
+  <div
+    ref="quickConfigRef"
+    class="quick-config"
+    @focusin="handleInteractionStart"
+    @focusout="handleInteractionEnd"
+    @mouseenter="handleInteractionStart"
+    @mouseleave="handleMouseLeave"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss">
+.quick-config {
+  position: absolute;
+  padding: 4px;
+}
+</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/SpriteQuickConfig.vue b/spx-gui/src/components/editor/common/viewer/quick-config/SpriteQuickConfig.vue
new file mode 100644
index 000000000..32eaf4452
--- /dev/null
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/SpriteQuickConfig.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { inject, watch } from 'vue'
+
+import DefaultConfigPanel from './sprite/DefaultConfigPanel.vue'
+import type { Project } from '@/models/project'
+import SizeConfigPanel from './common/SizeConfigPanel.vue'
+import HeadingConfigPanel from './sprite/HeadingConfigPanel.vue'
+import PositionConfigPanel from './common/PositionConfigPanel.vue'
+import { configTypeInjectionKey, updateConfigTypeInjectionKey } from './QuickConfigWrapper.vue'
+import type { SpriteLocalConfig } from './utils'
+import { RotationStyle } from '@/models/sprite'
+
+const props = defineProps<{
+  localConfig: SpriteLocalConfig
+  project: Project
+}>()
+
+const configType = inject(configTypeInjectionKey)
+
+const updateConfigType = inject(updateConfigTypeInjectionKey)
+watch(
+  () => props.localConfig.rotationStyle,
+  () => {
+    // If the selected sprite's rotationStyle is LeftRight or None, it needs to be restored to default immediately
+    if ([RotationStyle.LeftRight, RotationStyle.None].includes(props.localConfig.rotationStyle)) {
+      updateConfigType?.('default')
+    }
+  }
+)
+</script>
+
+<template>
+  <template v-if="configType != null">
+    <SizeConfigPanel v-if="configType === 'size'" name="sprite" :local-config="localConfig" />
+    <HeadingConfigPanel v-else-if="configType === 'heading'" :local-config="localConfig" />
+    <PositionConfigPanel v-else-if="configType === 'pos'" name="sprite" :local-config="localConfig" />
+    <DefaultConfigPanel v-else-if="configType === 'default'" :local-config="localConfig" :project="project" />
+  </template>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/WidgetQuickConfig.vue b/spx-gui/src/components/editor/common/viewer/quick-config/WidgetQuickConfig.vue
new file mode 100644
index 000000000..8a4f8e923
--- /dev/null
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/WidgetQuickConfig.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { inject } from 'vue'
+
+import type { Project } from '@/models/project'
+import { configTypeInjectionKey } from './QuickConfigWrapper.vue'
+import DefaultConfigPanel from './widget/DefaultConfigPanel.vue'
+import SizeConfigPanel from './common/SizeConfigPanel.vue'
+import PositionConfigPanel from './common/PositionConfigPanel.vue'
+import type { WidgetLocalConfig } from './utils'
+
+defineProps<{
+  localConfig: WidgetLocalConfig
+  project: Project
+}>()
+
+const configType = inject(configTypeInjectionKey)
+</script>
+
+<template>
+  <template v-if="configType != null">
+    <SizeConfigPanel v-if="configType === 'size'" name="monitor" :local-config="localConfig" />
+    <PositionConfigPanel v-else-if="configType === 'pos'" name="monitor" :local-config="localConfig" />
+    <DefaultConfigPanel v-else-if="configType === 'default'" :local-config="localConfig" :project="project" />
+  </template>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue b/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue
new file mode 100644
index 000000000..b4bb3e22f
--- /dev/null
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { UIIcon, type IconType } from '@/components/ui'
+import { useSlots } from 'vue'
+
+defineProps<{ icon?: IconType }>()
+
+const slots = useSlots()
+</script>
+
+<template>
+  <div class="config-item">
+    <UIIcon v-if="slots.default == null && icon != null" class="icon" :type="icon" />
+    <slot v-else></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.config-item {
+  width: 32px;
+  height: 32px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  cursor: pointer;
+
+  .icon {
+    color: var(--ui-color-grey-1000);
+  }
+
+  &:hover,
+  &.active {
+    background: var(--ui-color-turquoise-200);
+
+    .icon {
+      color: var(--ui-color-turquoise-500);
+    }
+  }
+}
+</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigPanel.vue
new file mode 100644
index 000000000..6280dd384
--- /dev/null
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigPanel.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="config-panel">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.config-panel {
+  width: fit-content;
+  height: 36px;
+  border: 2px solid var(--ui-color-grey-100);
+  border-radius: var(--ui-border-radius-2);
+  background: var(--ui-color-grey-100);
+  box-shadow: var(--ui-box-shadow-big);
+}
+</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/common/PositionConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/common/PositionConfigPanel.vue
new file mode 100644
index 000000000..43b0a90f8
--- /dev/null
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/common/PositionConfigPanel.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { debounce } from 'lodash'
+import { UINumberInput } from '@/components/ui'
+import ConfigPanel from '../common/ConfigPanel.vue'
+import type { LocalConfig } from '../utils'
+
+const props = defineProps<{
+  name: 'sprite' | 'monitor'
+  localConfig: LocalConfig
+}>()
+
+const handleUpdateX = debounce((x: number) => {
+  props.localConfig.setX(x)
+  props.localConfig.sync()
+}, 300)
+const handleUpdateY = debounce((y: number) => {
+  props.localConfig.setY(y)
+  props.localConfig.sync()
+}, 300)
+</script>
+
+<template>
+  <ConfigPanel>
+    <div class="position-config-wrapper">
+      <UINumberInput
+        v-radar="{ name: 'X position input', desc: `Input to set ${name} X position` }"
+        :value="localConfig.x"
+        @update:value="handleUpdateX($event ?? 0)"
+      >
+        <template #prefix>X</template>
+      </UINumberInput>
+      <UINumberInput
+        v-radar="{ name: 'Y position input', desc: `Input to set ${name} Y position` }"
+        :value="localConfig.y"
+        @update:value="handleUpdateY($event ?? 0)"
+      >
+        <template #prefix>Y</template>
+      </UINumberInput>
+    </div>
+  </ConfigPanel>
+</template>
+
+<style lang="scss" scoped>
+.position-config-wrapper {
+  display: flex;
+  gap: 4px;
+  width: 158px;
+}
+</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/common/SizeConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/common/SizeConfigPanel.vue
new file mode 100644
index 000000000..7ec6c3532
--- /dev/null
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/common/SizeConfigPanel.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { debounce } from 'lodash'
+import { UINumberInput } from '@/components/ui'
+import ConfigPanel from '../common/ConfigPanel.vue'
+import { round } from '@/utils/utils'
+import type { LocalConfig } from '../utils'
+
+const props = defineProps<{
+  name: 'sprite' | 'monitor'
+  localConfig: LocalConfig
+}>()
+
+const handleSizePercentUpdate = debounce((sizeInPercent: number | null) => {
+  if (sizeInPercent == null) return
+  props.localConfig.setSize(round(sizeInPercent / 100, 2))
+  props.localConfig.sync()
+}, 300)
+</script>
+
+<template>
+  <ConfigPanel>
+    <UINumberInput
+      v-radar="{ name: 'Size input', desc: `Input to set ${name} size percentage` }"
+      class="size-input"
+      :min="0"
+      :value="round(localConfig.size * 100)"
+      @update:value="handleSizePercentUpdate"
+    >
+      <template #prefix>{{ $t({ en: 'Size', zh: '大小' }) }}</template>
+      <template #suffix>%</template>
+    </UINumberInput>
+  </ConfigPanel>
+</template>
+
+<style lang="scss" scoped>
+.size-input {
+  width: 102px;
+}
+</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/common/ZorderConfigItem.vue b/spx-gui/src/components/editor/common/viewer/quick-config/common/ZorderConfigItem.vue
new file mode 100644
index 000000000..3358860e9
--- /dev/null
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/common/ZorderConfigItem.vue
@@ -0,0 +1,65 @@
+<script lang="ts">
+export const moveActionNames = {
+  up: { en: 'Bring forward', zh: '向前移动' },
+  top: { en: 'Bring to front', zh: '移到最前' },
+  down: { en: 'Send backward', zh: '向后移动' },
+  bottom: { en: 'Send to back', zh: '移到最后' }
+}
+export type MoveAction = keyof typeof moveActionNames
+</script>
+
+<script lang="ts" setup>
+import { UIDropdown, UIMenu, UIMenuItem } from '@/components/ui'
+import ConfigItem from './ConfigItem.vue'
+
+defineProps<{ type: 'sprite' | 'widget' }>()
+
+const emit = defineEmits<{
+  'move-zorder': [MoveAction]
+}>()
+
+function moveZorder(action: MoveAction) {
+  emit('move-zorder', action)
+}
+</script>
+
+<template>
+  <UIDropdown trigger="click" placement="top">
+    <template #trigger>
+      <ConfigItem icon="layer" />
+    </template>
+    <UIMenu>
+      <UIMenuItem
+        v-radar="{ name: 'Move up', desc: `Click to move ${type} up in z-order` }"
+        class="item"
+        @click="moveZorder('up')"
+        >{{ $t(moveActionNames.up) }}</UIMenuItem
+      >
+      <UIMenuItem
+        v-radar="{ name: 'Move to top', desc: `Click to move ${type} to top in z-order` }"
+        class="item"
+        @click="moveZorder('top')"
+        >{{ $t(moveActionNames.top) }}</UIMenuItem
+      >
+      <UIMenuItem
+        v-radar="{ name: 'Move down', desc: `Click to move ${type} down in z-order` }"
+        class="item"
+        @click="moveZorder('down')"
+        >{{ $t(moveActionNames.down) }}</UIMenuItem
+      >
+      <UIMenuItem
+        v-radar="{ name: 'Move to bottom', desc: `Click to move ${type} to bottom in z-order` }"
+        class="item"
+        @click="moveZorder('bottom')"
+        >{{ $t(moveActionNames.bottom) }}</UIMenuItem
+      >
+    </UIMenu>
+  </UIDropdown>
+</template>
+
+<style lang="scss" scoped>
+.item {
+  width: 100%;
+  white-space: nowrap;
+}
+</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/sprite/DefaultConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/sprite/DefaultConfigPanel.vue
new file mode 100644
index 000000000..596b0fa71
--- /dev/null
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/sprite/DefaultConfigPanel.vue
@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import { UIDivider, UITooltip, type IconType } from '@/components/ui'
+import ConfigPanel from '../common/ConfigPanel.vue'
+import { headingToLeftRight, leftRightToHeading, RotationStyle } from '@/models/sprite'
+import type { Project } from '@/models/project'
+import type { LocaleMessage } from '@/utils/i18n'
+import ConfigItem from '../common/ConfigItem.vue'
+import ZorderConfigItem, { moveActionNames, type MoveAction } from '../common/ZorderConfigItem.vue'
+import type { SpriteLocalConfig } from '../utils'
+
+const props = defineProps<{
+  localConfig: SpriteLocalConfig
+  project: Project
+}>()
+
+const rotationStyleTips = {
+  [RotationStyle.Normal]: {
+    icon: 'rotateAround',
+    tips: {
+      en: 'Normal: the sprite can be rotated to any heading',
+      zh: '正常旋转：精灵可以被旋转到任意方向'
+    }
+  },
+  [RotationStyle.LeftRight]: {
+    icon: 'leftRight',
+    tips: {
+      en: 'Left-Right: the sprite can only be flipped horizontally',
+      zh: '左右翻转：精灵只可以在水平方向翻转'
+    }
+  },
+  [RotationStyle.None]: {
+    icon: 'notRotate',
+    tips: {
+      en: "Don't Rotate: the sprite will not be rotated",
+      zh: '不旋转：精灵不会被旋转'
+    }
+  }
+} satisfies Record<RotationStyle, { icon: IconType; tips: LocaleMessage }>
+
+function handleRotationStyleUpdate(style: RotationStyle) {
+  const localConfig = props.localConfig
+  localConfig.setRotationStyle(style)
+  if (style === RotationStyle.None) {
+    localConfig.setHeading(90)
+  }
+  if (style === RotationStyle.LeftRight) {
+    // normalize heading to 90 / -90
+    const normalizedHeading = leftRightToHeading(headingToLeftRight(localConfig.heading))
+    localConfig.setHeading(normalizedHeading)
+  }
+  localConfig.sync()
+}
+
+async function moveZorder(direction: MoveAction) {
+  await props.project.history.doAction({ name: moveActionNames[direction] }, () => {
+    const { localConfig, project } = props
+    if (direction === 'up') {
+      project.upSpriteZorder(localConfig.id)
+    } else if (direction === 'down') {
+      project.downSpriteZorder(localConfig.id)
+    } else if (direction === 'top') {
+      project.topSpriteZorder(localConfig.id)
+    } else if (direction === 'bottom') {
+      project.bottomSpriteZorder(localConfig.id)
+    }
+  })
+}
+</script>
+
+<template>
+  <ConfigPanel
+    v-radar="{
+      name: 'Sprite Quick Config Panel',
+      desc: 'Quick config for sprite rotation style, layer order, and more'
+    }"
+  >
+    <div class="default-config-wrapper">
+      <UITooltip v-for="(value, key) in rotationStyleTips" :key="key">
+        {{ $t(value.tips) }}
+        <template #trigger>
+          <ConfigItem
+            :class="{ active: props.localConfig.rotationStyle === key }"
+            :icon="value.icon"
+            @click="handleRotationStyleUpdate(key)"
+          />
+        </template>
+      </UITooltip>
+      <UIDivider vertical />
+      <ZorderConfigItem type="sprite" @move-zorder="moveZorder" />
+    </div>
+  </ConfigPanel>
+</template>
+
+<style lang="scss" scoped>
+.default-config-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/sprite/HeadingConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/sprite/HeadingConfigPanel.vue
new file mode 100644
index 000000000..c785b9dfe
--- /dev/null
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/sprite/HeadingConfigPanel.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { UIDropdown, UINumberInput } from '@/components/ui'
+import ConfigPanel from '../common/ConfigPanel.vue'
+import { RotationStyle } from '@/models/sprite'
+import AnglePicker from '@/components/editor/common/AnglePicker.vue'
+import type { SpriteLocalConfig } from '../utils'
+import { debounce } from 'lodash'
+
+const props = defineProps<{
+  localConfig: SpriteLocalConfig
+}>()
+
+const rotateDropdownVisible = ref(false)
+
+function handleUpdateHeading(heading: number) {
+  props.localConfig.setHeading(heading)
+  props.localConfig.sync()
+}
+const handleUpdateHeadingDebounced = debounce(handleUpdateHeading, 300)
+</script>
+
+<template>
+  <ConfigPanel>
+    <UIDropdown
+      trigger="manual"
+      placement="top"
+      :visible="rotateDropdownVisible"
+      :disabled="localConfig.rotationStyle !== RotationStyle.Normal"
+      @click-outside="rotateDropdownVisible = false"
+    >
+      <template #trigger>
+        <UINumberInput
+          v-radar="{ name: 'Heading input', desc: 'Input to set sprite heading angle' }"
+          class="heading-input"
+          :disabled="localConfig.rotationStyle !== RotationStyle.Normal"
+          :min="-180"
+          :max="180"
+          :value="localConfig.heading"
+          @update:value="handleUpdateHeadingDebounced($event ?? 0)"
+          @focus="rotateDropdownVisible = true"
+        >
+          <template #prefix>{{ $t({ en: 'Heading', zh: '朝向' }) }}</template>
+        </UINumberInput>
+      </template>
+      <div class="rotation-heading-container">
+        <AnglePicker :model-value="localConfig.heading" @update:model-value="handleUpdateHeading($event ?? 0)" />
+      </div>
+    </UIDropdown>
+  </ConfigPanel>
+</template>
+
+<style lang="scss" scoped>
+.heading-input {
+  width: 130px;
+}
+
+.rotation-heading-container {
+  padding: 12px;
+  width: max-content;
+}
+</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/utils.ts b/spx-gui/src/components/editor/common/viewer/quick-config/utils.ts
new file mode 100644
index 000000000..66bf1fbbc
--- /dev/null
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/utils.ts
@@ -0,0 +1,143 @@
+import { ref, type Ref } from 'vue'
+import { RotationStyle, type Sprite } from '@/models/sprite'
+import type { Action, Project } from '@/models/project'
+import type { Widget } from '@/models/widget'
+
+interface ILocalConfigProvider {
+  id: string
+
+  get x(): number
+  get y(): number
+  get size(): number
+  get visible(): boolean
+
+  setX(x: number): void
+  setY(y: number): void
+  setSize(size: number): void
+}
+
+interface LocalConfigChanges {
+  x?: number
+  y?: number
+  size?: number
+  visible?: boolean
+}
+
+export class LocalConfig<T = unknown> {
+  constructor(
+    private provider: ILocalConfigProvider,
+    private project: Project,
+    private action: Action
+  ) {}
+
+  protected changes = ref({}) as Ref<LocalConfigChanges & Partial<T>>
+
+  get id() {
+    return this.provider.id
+  }
+
+  get x() {
+    return this.changes.value.x ?? this.provider.x
+  }
+  setX(x: number) {
+    this.changes.value.x = x
+  }
+
+  get y() {
+    return this.changes.value.y ?? this.provider.y
+  }
+  setY(y: number) {
+    this.changes.value.y = y
+  }
+
+  get size() {
+    return this.changes.value.size ?? this.provider.size
+  }
+  setSize(size: number) {
+    this.changes.value.size = size
+  }
+
+  get visible() {
+    return this.provider.visible
+  }
+
+  sync() {
+    this.project.history.doAction(this.action, () => {
+      Object.keys(this.changes.value).forEach((key) => this.applyChanges(key))
+      this.changes.value = {}
+    })
+  }
+
+  protected applyChanges(key: string) {
+    switch (key) {
+      case 'x':
+        this.provider.setX(this.x)
+        break
+      case 'y':
+        this.provider.setY(this.y)
+        break
+      case 'size':
+        this.provider.setSize(this.size)
+        break
+    }
+  }
+}
+
+export class SpriteLocalConfig extends LocalConfig<{
+  heading?: number
+  rotationStyle?: RotationStyle
+}> {
+  constructor(
+    private sprite: Sprite,
+    project: Project
+  ) {
+    super(sprite, project, { name: { en: `Configure sprite ${sprite.name}`, zh: `修改精灵 ${sprite.name} 配置` } })
+  }
+
+  get heading() {
+    return this.changes.value.heading ?? this.sprite.heading
+  }
+  setHeading(heading: number) {
+    this.changes.value.heading = heading
+  }
+
+  get rotationStyle() {
+    return this.changes.value.rotationStyle ?? this.sprite.rotationStyle
+  }
+  setRotationStyle(rotationStyle: RotationStyle) {
+    this.changes.value.rotationStyle = rotationStyle
+  }
+
+  get defaultCostume() {
+    return this.sprite.defaultCostume
+  }
+
+  override applyChanges(key: string) {
+    super.applyChanges(key)
+    switch (key) {
+      case 'heading':
+        this.sprite.setHeading(this.heading)
+        break
+      case 'rotationStyle':
+        this.sprite.setRotationStyle(this.rotationStyle)
+        break
+    }
+  }
+}
+
+export class WidgetLocalConfig extends LocalConfig {
+  constructor(
+    private widget: Widget,
+    project: Project
+  ) {
+    super(widget, project, { name: { en: `Configure widget ${widget.name}`, zh: `修改组件 ${widget.name} 配置` } })
+  }
+
+  get label() {
+    return this.widget.label
+  }
+
+  get variableName() {
+    return this.widget.variableName
+  }
+}
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/widget/DefaultConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/widget/DefaultConfigPanel.vue
new file mode 100644
index 000000000..c25b02a7a
--- /dev/null
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/widget/DefaultConfigPanel.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import ConfigPanel from '../common/ConfigPanel.vue'
+import type { Project } from '@/models/project'
+import ZorderConfigItem, { moveActionNames, type MoveAction } from '../common/ZorderConfigItem.vue'
+import type { WidgetLocalConfig } from '../utils'
+
+const props = defineProps<{
+  localConfig: WidgetLocalConfig
+  project: Project
+}>()
+
+async function moveZorder(direction: MoveAction) {
+  await props.project.history.doAction({ name: moveActionNames[direction] }, () => {
+    const { localConfig, project } = props
+    if (direction === 'up') {
+      project.stage.upWidgetZorder(localConfig.id)
+    } else if (direction === 'down') {
+      project.stage.downWidgetZorder(localConfig.id)
+    } else if (direction === 'top') {
+      project.stage.topWidgetZorder(localConfig.id)
+    } else if (direction === 'bottom') {
+      project.stage.bottomWidgetZorder(localConfig.id)
+    }
+  })
+}
+</script>
+
+<template>
+  <ConfigPanel v-radar="{ name: 'Widget Quick Config Panel', desc: 'Quick config for widget layer order' }">
+    <ZorderConfigItem type="widget" @move-zorder="moveZorder" />
+  </ConfigPanel>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue b/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue
index e67e4bde9..e8a83d28d 100644
--- a/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue
+++ b/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { throttle } from 'lodash'
-import { computed, reactive, ref, shallowRef, watch, watchEffect } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref, shallowRef, watch, watchEffect } from 'vue'
 import Konva from 'konva'
 import type { KonvaEventObject } from 'konva/lib/Node'
-import type { Stage } from 'konva/lib/Stage'
 import type { LayerConfig } from 'konva/lib/Layer'
-import { UIDropdown, UILoading, UIMenu, UIMenuItem } from '@/components/ui'
+
+import { UILoading } from '@/components/ui'
 import { useContentSize } from '@/utils/dom'
 import { useFileUrl } from '@/utils/file'
-import { untilTaskScheduled } from '@/utils/utils'
+import { timeout, until, untilTaskScheduled } from '@/utils/utils'
 import { getCleanupSignal } from '@/utils/disposable'
 import type { Project } from '@/models/project'
 import type { Sprite } from '@/models/sprite'
@@ -18,6 +18,12 @@ import { getNodeId } from '@/components/editor/common/viewer/common'
 import SpriteNode, { type CameraScrollNotifyFn } from '@/components/editor/common/viewer/SpriteNode.vue'
 import DecoratorNode from '@/components/editor/common/viewer/DecoratorNode.vue'
 import PositionIndicator from '@/components/editor/common/viewer/PositionIndicator.vue'
+import QuickConfigWrapper, {
+  type ConfigType
+} from '@/components/editor/common/viewer/quick-config/QuickConfigWrapper.vue'
+import SpriteQuickConfig from '@/components/editor/common/viewer/quick-config/SpriteQuickConfig.vue'
+import { SpriteLocalConfig } from '@/components/editor/common/viewer/quick-config/utils'
+import type { TransformOp } from '@/components/editor/common/viewer/custom-transformer'
 
 const props = defineProps<{
   project: Project
@@ -68,7 +74,9 @@ const updateMousePos = throttle(() => {
   }
 }, 50)
 
-function handleSpriteSelected(sprite: Sprite) {
+function handleSpriteSelected(localConfig: SpriteLocalConfig) {
+  const sprite = props.project.sprites.find((s) => s.id === localConfig.id)
+  if (sprite == null) return
   emit('update:selectedSprite', sprite)
 }
 
@@ -186,7 +194,7 @@ watch(
         x: viewportSize.value.width / 2 - (mapSize.value.width / 2 + selectedSprite.x) * mapScale.value,
         y: viewportSize.value.height / 2 - (mapSize.value.height / 2 - selectedSprite.y) * mapScale.value
       }
-      setMapPosWithTransition(mapPosForSprite, 300)
+      setMapPosWithTransition(mapPosForSprite, 300).then(updateQuickConfigPosThrottled)
     }
   },
   { immediate: true }
@@ -208,6 +216,7 @@ function handleMapDragMove(e: KonvaEventObject<MouseEvent>) {
   const { x, y } = getValidMapPos({ x: map.x(), y: map.y() })
   map.x(x)
   map.y(y)
+  updateQuickConfigPosThrottled()
 }
 
 function handleMapDragEnd(e: KonvaEventObject<MouseEvent>) {
@@ -282,9 +291,12 @@ const loading = computed(() => {
   return false
 })
 
-const visibleSprites = computed(() => {
+const visibleSpriteLocalConfigs = computed(() => {
   const { zorder, sprites } = props.project
-  return zorder.map((id) => sprites.find((s) => s.id === id)).filter(Boolean) as Sprite[]
+  return zorder
+    .map((id) => sprites.find((s) => s.id === id))
+    .filter(Boolean)
+    .map((sprite) => new SpriteLocalConfig(sprite!, props.project)) as SpriteLocalConfig[]
 })
 
 let cameraEdgeScrollCheckTimer: ReturnType<typeof setInterval> | null = null
@@ -340,62 +352,130 @@ const handleSpriteDragMove = throttle(
   }
 )
 
+// quick config
+const localConfigRef = shallowRef<SpriteLocalConfig | null | undefined>(null)
+watch(
+  () => props.selectedSprite,
+  (sprite) => {
+    if (sprite == null) return
+    localConfigRef.value = visibleSpriteLocalConfigs.value.find(({ id }) => id === sprite.id)
+  },
+  { immediate: true }
+)
+
+function handleUpdateConfigType(configType: ConfigType) {
+  quickConfigRef.value?.updateConfigType(configType)
+}
+function handleSpriteUpdateTransformOp(op: TransformOp | null) {
+  if (op == null) return
+  if (op === 'move') {
+    handleUpdateConfigType('pos')
+  } else if (op === 'rotate') {
+    handleUpdateConfigType('heading')
+  } else if (op === 'scale') {
+    handleUpdateConfigType('size')
+  }
+}
+watch(
+  () => [localConfigRef.value?.x, localConfigRef.value?.y, localConfigRef.value?.heading, localConfigRef.value?.size],
+  () => {
+    nextTick(updateQuickConfigPosThrottled)
+  }
+)
+
+onMounted(async () => {
+  await until(() => !loading.value)
+  updateQuickConfigPos()
+})
+
 function handleSpriteDragEnd() {
   clearCameraEdgeScrollCheckTimer()
+  updateQuickConfigPosThrottled()
 }
 
-const menuVisible = ref(false)
-const menuPos = ref({ x: 0, y: 0 })
+const quickConfigRef = ref<InstanceType<typeof QuickConfigWrapper> | null>(null)
+const quickConfigElRef = computed(() => quickConfigRef.value?.getElement())
+
+function getSpriteNodeAnchor(node: Konva.Node) {
+  const nodeWidth = node.width()
+  const nodeHeight = node.height()
+  const nodeOffsetX = node.offsetX()
+  const nodeOffsetY = node.offsetY()
+  const transform = node.getAbsoluteTransform()
+  const center = transform.point({
+    x: nodeWidth / 2 - nodeOffsetX,
+    y: nodeHeight / 2 - nodeOffsetY
+  })
+  const corners = [
+    { x: -nodeOffsetX, y: -nodeOffsetY },
+    { x: nodeWidth - nodeOffsetX, y: -nodeOffsetY },
+    { x: nodeWidth - nodeOffsetX, y: nodeHeight - nodeOffsetY },
+    { x: -nodeOffsetX, y: nodeHeight - nodeOffsetY }
+  ]
+  let bottomY = center.y
+  corners.forEach((point) => {
+    const globalPoint = transform.point(point)
+    if (globalPoint.y > bottomY) {
+      bottomY = globalPoint.y
+    }
+  })
+  return { centerX: center.x, bottomY }
+}
 
-function handleContextMenu(e: KonvaEventObject<MouseEvent>) {
-  e.evt.preventDefault()
+function updateQuickConfigPos() {
+  if (
+    props.selectedSprite == null ||
+    stageRef.value == null ||
+    containerSize.value == null ||
+    quickConfigElRef.value == null
+  ) {
+    return
+  }
 
-  // Ignore right click on backdrop.
-  // Konva.Rect is a subclass of Konva.Shape.
-  // Currently we have all sprites as Konva.Shape and backdrop as Konva.Rect.
-  if (e.target instanceof Konva.Rect) return
+  const node = nodeTransformerRef.value?.getNode()
+  if (node == null) return
 
-  if (stageRef.value == null || e.target.parent == null) return
-  const stage: Stage = stageRef.value.getStage()
-  const pointerPos = stage.getPointerPosition()
-  if (pointerPos == null) return
-  const stagePos = stage.getContent().getBoundingClientRect()
-  const offsetY = -8 // offset for dropdown menu
-  menuPos.value = {
-    x: stagePos.x + pointerPos.x,
-    y: stagePos.y + pointerPos.y + offsetY
-  }
-  menuVisible.value = true
-}
+  const quickConfigEl = quickConfigElRef.value
+  const quickConfigRect = quickConfigEl.getBoundingClientRect()
+  const extensions = { left: 30, right: 30, top: 30, bottom: 30 }
+  const { centerX, bottomY } = getSpriteNodeAnchor(node)
 
-function handleStageMousedown() {
-  if (menuVisible.value) menuVisible.value = false
-}
+  const GAP = 48
+  let top = bottomY + GAP
+  let left = centerX
 
-const moveActionNames = {
-  up: { en: 'Bring forward', zh: '向前移动' },
-  top: { en: 'Bring to front', zh: '移到最前' },
-  down: { en: 'Send backward', zh: '向后移动' },
-  bottom: { en: 'Send to back', zh: '移到最后' }
-}
+  const { width: configWidth, height: configHeight } = quickConfigRect
+  const { width: containerW, height: containerH } = containerSize.value
 
-async function moveZorder(direction: 'up' | 'down' | 'top' | 'bottom') {
-  const { project, selectedSprite } = props
-  await project.history.doAction({ name: moveActionNames[direction] }, () => {
-    if (selectedSprite != null) {
-      if (direction === 'up') {
-        project.upSpriteZorder(selectedSprite.id)
-      } else if (direction === 'down') {
-        project.downSpriteZorder(selectedSprite.id)
-      } else if (direction === 'top') {
-        project.topSpriteZorder(selectedSprite.id)
-      } else if (direction === 'bottom') {
-        project.bottomSpriteZorder(selectedSprite.id)
-      }
-    }
-  })
-  menuVisible.value = false
+  const halfConfigWidth = configWidth / 2
+  if (left - extensions.left - halfConfigWidth < 0) {
+    left = extensions.left + halfConfigWidth
+  } else if (left + halfConfigWidth + extensions.right > containerW) {
+    left = containerW - halfConfigWidth - extensions.right
+  }
+
+  if (top + configHeight + extensions.bottom > containerH) {
+    top = containerH - configHeight - extensions.bottom
+  }
+  if (top - extensions.top < 0) {
+    top = extensions.top
+  }
+
+  quickConfigEl.style.cssText = `transform: translate(${left}px, ${top}px) translateX(-50%)`
 }
+const updateQuickConfigPosThrottled = throttle(updateQuickConfigPos, 50, { trailing: true })
+watch(
+  // Respond to changes in rotationStyle to avoid quick config position issues
+  () => [props.selectedSprite, props.selectedSprite?.rotationStyle],
+  async ([sprite]) => {
+    if (sprite == null) return
+    await timeout(0)
+    updateQuickConfigPosThrottled()
+  },
+  { immediate: true }
+)
+// Update when container resizes
+watch(containerSize, updateQuickConfigPosThrottled)
 
 const scaleBy = 1.02
 
@@ -415,6 +495,7 @@ const handleWheel = (e: KonvaEventObject<WheelEvent>) => {
     x: pointer.x - mousePointTo.x * newScale,
     y: pointer.y - mousePointTo.y * newScale
   })
+  updateQuickConfigPosThrottled()
 }
 </script>
 
@@ -428,14 +509,7 @@ const handleWheel = (e: KonvaEventObject<WheelEvent>) => {
     class="map-viewer"
     @mousemove="updateMousePos"
   >
-    <v-stage
-      v-if="stageConfig != null"
-      ref="stageRef"
-      :config="stageConfig"
-      @mousedown="handleStageMousedown"
-      @contextmenu="handleContextMenu"
-      @wheel="handleWheel"
-    >
+    <v-stage v-if="stageConfig != null" ref="stageRef" :config="stageConfig" @wheel="handleWheel">
       <v-layer ref="mapRef" :config="mapConfig" @dragmove="handleMapDragMove" @dragend="handleMapDragEnd">
         <v-rect v-if="konvaBackdropConfig" :config="konvaBackdropConfig"></v-rect>
         <DecoratorNode
@@ -447,16 +521,17 @@ const handleWheel = (e: KonvaEventObject<WheelEvent>) => {
         <!-- Refer to: spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue -->
         <v-group>
           <SpriteNode
-            v-for="sprite in visibleSprites"
-            :key="sprite.id"
-            :sprite="sprite"
-            :selected="selectedSprite?.id === sprite.id"
+            v-for="localConfig in visibleSpriteLocalConfigs"
+            :key="localConfig.id"
+            :local-config="localConfig"
+            :selected="selectedSprite?.id === localConfig.id"
             :project="props.project"
             :map-size="mapSize"
             :node-ready-map="nodeReadyMap"
             @drag-move="handleSpriteDragMove"
             @drag-end="handleSpriteDragEnd"
-            @selected="handleSpriteSelected(sprite)"
+            @selected="handleSpriteSelected(localConfig)"
+            @update-transform-op="handleSpriteUpdateTransformOp"
           />
         </v-group>
       </v-layer>
@@ -464,31 +539,12 @@ const handleWheel = (e: KonvaEventObject<WheelEvent>) => {
         <NodeTransformer ref="nodeTransformerRef" :node-ready-map="nodeReadyMap" :target="selectedSprite" />
       </v-layer>
     </v-stage>
-    <UIDropdown trigger="manual" :visible="menuVisible" :pos="menuPos" placement="bottom-start">
-      <UIMenu>
-        <UIMenuItem
-          v-radar="{ name: 'Move up', desc: 'Click to move sprite up in z-order' }"
-          @click="moveZorder('up')"
-          >{{ $t(moveActionNames.up) }}</UIMenuItem
-        >
-        <UIMenuItem
-          v-radar="{ name: 'Move to top', desc: 'Click to move sprite to top in z-order' }"
-          @click="moveZorder('top')"
-          >{{ $t(moveActionNames.top) }}</UIMenuItem
-        >
-        <UIMenuItem
-          v-radar="{ name: 'Move down', desc: 'Click to move sprite down in z-order' }"
-          @click="moveZorder('down')"
-          >{{ $t(moveActionNames.down) }}</UIMenuItem
-        >
-        <UIMenuItem
-          v-radar="{ name: 'Move to bottom', desc: 'Click to move sprite to bottom in z-order' }"
-          @click="moveZorder('bottom')"
-          >{{ $t(moveActionNames.bottom) }}</UIMenuItem
-        >
-      </UIMenu>
-    </UIDropdown>
+    <QuickConfigWrapper v-if="!loading" ref="quickConfigRef" class="quick-config">
+      <SpriteQuickConfig v-if="localConfigRef != null" :local-config="localConfigRef" :project="project" />
+    </QuickConfigWrapper>
+
     <PositionIndicator :position="mousePos" />
+
     <UILoading :visible="loading" cover />
   </div>
 </template>
@@ -509,4 +565,10 @@ const handleWheel = (e: KonvaEventObject<WheelEvent>) => {
   background-size: contain;
   position: relative;
 }
+
+.quick-config {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 </style>
diff --git a/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue b/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
index cdf48a141..410905962 100644
--- a/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
+++ b/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
@@ -23,30 +23,6 @@
     </template>
     <template #details>
       <SpriteList />
-      <PanelFooter
-        v-if="footerExpanded && selectedSprite != null"
-        v-radar="{
-          name: `Basic configuration for selected sprite`,
-          desc: 'Panel for configuring sprite basic settings'
-        }"
-      >
-        <SpriteBasicConfig :sprite="selectedSprite" :project="editorCtx.project" @collapse="footerExpanded = false" />
-      </PanelFooter>
-      <UITooltip v-if="!footerExpanded && selectedSprite != null">
-        <template #trigger>
-          <div
-            v-radar="{
-              name: 'Expand button',
-              desc: 'Button to expand the basic configuration panel for selected sprite'
-            }"
-            class="footer-expand-button"
-            @click="footerExpanded = true"
-          >
-            <UIIcon class="footer-expand-icon" type="doubleArrowDown" />
-          </div>
-        </template>
-        {{ $t({ en: 'Expand', zh: '展开' }) }}
-      </UITooltip>
     </template>
     <template #summary>
       <PanelSummaryList ref="summaryList" :has-more="summaryListData.hasMore">
@@ -65,13 +41,11 @@ import { AssetType } from '@/apis/asset'
 import { useMessageHandle } from '@/utils/exception'
 import { useAddAssetFromLibrary, useAddSpriteFromLocalFile } from '@/components/asset'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
-import { UIMenu, UIMenuItem, UIEmpty, UIIcon, UITooltip } from '@/components/ui'
+import { UIMenu, UIMenuItem, UIEmpty } from '@/components/ui'
 import SpriteList from '@/components/editor/sprite/SpriteList.vue'
 import CommonPanel from '../common/CommonPanel.vue'
 import PanelSummaryList, { useSummaryList } from '../common/PanelSummaryList.vue'
-import PanelFooter from '../common/PanelFooter.vue'
 import SpriteSummaryItem from './SpriteSummaryItem.vue'
-import SpriteBasicConfig from './config/SpriteBasicConfig.vue'
 
 defineProps<{
   expanded: boolean
@@ -83,8 +57,6 @@ const emit = defineEmits<{
 
 const editorCtx = useEditorCtx()
 
-const footerExpanded = ref(false)
-
 const sprites = computed(() => editorCtx.project.sprites)
 const summaryList = ref<InstanceType<typeof PanelSummaryList>>()
 const summaryListData = useSummaryList(sprites, () => summaryList.value?.listWrapper ?? null)
diff --git a/spx-gui/src/components/editor/panels/sprite/config/SpriteBasicConfig.vue b/spx-gui/src/components/editor/panels/sprite/config/SpriteBasicConfig.vue
deleted file mode 100644
index cab868b37..000000000
--- a/spx-gui/src/components/editor/panels/sprite/config/SpriteBasicConfig.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<script setup lang="ts">
-import { type Sprite } from '@/models/sprite'
-import { type Project } from '@/models/project'
-import SpritePositionSize from '@/components/editor/common/config/sprite/SpritePositionSize.vue'
-import SpriteDirection from '@/components/editor/common/config/sprite/SpriteDirection.vue'
-import SpriteVisible from '@/components/editor/common/config/sprite/SpriteVisible.vue'
-import AssetName from '@/components/asset/AssetName.vue'
-import { UIIcon, UITooltip } from '@/components/ui'
-import { useRenameSprite } from '@/components/asset'
-import { useMessageHandle } from '@/utils/exception'
-
-const props = defineProps<{
-  sprite: Sprite
-  project: Project
-}>()
-
-const emit = defineEmits<{
-  collapse: []
-}>()
-
-const renameSprite = useRenameSprite()
-const handleNameEdit = useMessageHandle(() => renameSprite(props.sprite), {
-  en: 'Failed to rename sprite',
-  zh: '重命名精灵失败'
-}).fn
-</script>
-
-<template>
-  <div class="header">
-    <AssetName>{{ sprite.name }}</AssetName>
-    <UIIcon
-      v-radar="{ name: 'Rename button', desc: 'Button to rename the sprite' }"
-      class="icon"
-      :title="$t({ en: 'Rename', zh: '重命名' })"
-      type="edit"
-      @click="handleNameEdit"
-    />
-    <div class="spacer" />
-    <UITooltip>
-      <template #trigger>
-        <UIIcon
-          v-radar="{ name: 'Collapse button', desc: 'Button to collapse the sprite basic configuration panel' }"
-          class="icon"
-          type="doubleArrowDown"
-          @click="emit('collapse')"
-        />
-      </template>
-      {{
-        $t({
-          en: 'Collapse',
-          zh: '收起'
-        })
-      }}
-    </UITooltip>
-  </div>
-  <div class="config-wrapper">
-    <SpritePositionSize :sprite="sprite" :project="project" />
-    <div class="config-item">
-      <div class="label">{{ $t({ en: 'Rotation', zh: '旋转' }) }}</div>
-      <SpriteDirection :sprite="sprite" :project="project" />
-    </div>
-    <div class="config-item">
-      <div class="label">{{ $t({ en: 'Show', zh: '显示' }) }}</div>
-      <SpriteVisible :sprite="sprite" :project="project" />
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.header {
-  height: 28px;
-  color: var(--ui-color-title);
-  display: flex;
-  align-items: center;
-}
-
-.icon {
-  cursor: pointer;
-  color: var(--ui-color-grey-900);
-  &:hover {
-    color: var(--ui-color-grey-800);
-  }
-  &:active {
-    color: var(--ui-color-grey-1000);
-  }
-}
-
-.spacer {
-  flex: 1;
-}
-
-.config-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-gap-middle);
-
-  .config-item {
-    display: flex;
-    align-items: center;
-
-    .label {
-      white-space: nowrap;
-      margin-right: 16px;
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/panels/sprite/config/left-right.svg b/spx-gui/src/components/editor/panels/sprite/config/left-right.svg
deleted file mode 100644
index ccc9a9491..000000000
--- a/spx-gui/src/components/editor/panels/sprite/config/left-right.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<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="M10.6934 11.5485V4.91142C10.6934 4.47076 11.2263 4.25042 11.5378 4.56185L14.8551 7.8816C15.0483 8.07362 15.0483 8.38627 14.8551 8.57953L11.5378 11.8968C11.2263 12.2082 10.6934 11.9879 10.6934 11.5485Z" fill="currentColor"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.61426 3.76112C7.68688 3.78573 7.77305 3.79805 7.8469 3.79805C8.02046 3.79805 8.16817 3.7365 8.29003 3.62449C8.35041 3.5653 8.38709 3.4931 8.4245 3.41948L8.42666 3.41523C8.42792 3.41129 8.4292 3.40734 8.43048 3.40339C8.45278 3.33443 8.47589 3.26292 8.47589 3.18259C8.47589 3.02258 8.40081 2.86255 8.29003 2.75054C8.22971 2.69023 8.16817 2.65207 8.09308 2.61637C7.86044 2.5179 7.58841 2.57945 7.41608 2.75054C7.36685 2.79978 7.31761 2.87486 7.28068 2.94872C7.25729 3.02258 7.23145 3.10751 7.23145 3.18259C7.23145 3.26292 7.25456 3.33443 7.27686 3.40339C7.27814 3.40734 7.27941 3.41129 7.28068 3.41523C7.31761 3.49032 7.36685 3.56417 7.41608 3.62449C7.47763 3.67372 7.53917 3.72296 7.61426 3.76112ZM7.24462 5.59505C7.24462 5.25039 7.51542 4.97959 7.86007 4.97959C8.19241 4.97959 8.47552 5.25039 8.47552 5.59505C8.47552 5.92739 8.19241 6.2105 7.86007 6.2105C7.51542 6.2105 7.24462 5.92739 7.24462 5.59505ZM7.8469 13.4229C7.68688 13.4229 7.53917 13.3613 7.41608 13.2394C7.36685 13.1902 7.31761 13.1152 7.28068 13.0413L7.2769 13.0296C7.2546 12.9606 7.23145 12.889 7.23145 12.8074C7.23145 12.7335 7.25729 12.6474 7.28068 12.5748C7.31761 12.4997 7.36685 12.4258 7.41608 12.3766C7.58841 12.2055 7.86044 12.1427 8.09308 12.2412C8.16817 12.2781 8.22971 12.3163 8.29003 12.3766C8.33926 12.4258 8.38849 12.4997 8.42666 12.5748C8.45004 12.6474 8.47589 12.7335 8.47589 12.8074C8.47589 12.889 8.45274 12.9606 8.43043 13.0296L8.42666 13.0413L8.4213 13.0517C8.38499 13.1221 8.34869 13.1925 8.29003 13.2394C8.18047 13.3613 8.02046 13.4229 7.8469 13.4229ZM7.86007 7.37986C7.51542 7.37986 7.24462 7.65066 7.24462 7.99531C7.24462 8.33874 7.51542 8.61077 7.86007 8.61077C8.19241 8.61077 8.47552 8.33874 8.47552 7.99531C8.47552 7.65066 8.19241 7.37986 7.86007 7.37986ZM7.24462 10.4079C7.24462 10.0632 7.51542 9.79244 7.86007 9.79244C8.19241 9.79244 8.47552 10.0632 8.47552 10.4079C8.47552 10.7402 8.19241 11.0233 7.86007 11.0233C7.51542 11.0233 7.24462 10.7402 7.24462 10.4079Z" fill="currentColor"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.30571 4.91142V11.5485C5.30571 11.9879 4.77396 12.2082 4.46254 11.8968L1.14402 8.57829C0.951995 8.38504 0.951995 8.07239 1.14402 7.88037L4.46254 4.56185C4.77396 4.25042 5.30571 4.47076 5.30571 4.91142Z" fill="currentColor"/>
-</svg>
diff --git a/spx-gui/src/components/editor/panels/sprite/config/no-rotate.svg b/spx-gui/src/components/editor/panels/sprite/config/no-rotate.svg
deleted file mode 100644
index c71210976..000000000
--- a/spx-gui/src/components/editor/panels/sprite/config/no-rotate.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<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="M10.219 6.34489L11.3116 5.05372C11.8132 5.77428 12.1342 6.62944 12.2085 7.5528H13.364C13.8684 7.5528 14.1711 8.11224 13.896 8.53412L11.9608 11.5514C11.7132 11.9458 11.1446 11.9458 10.8878 11.5514L8.96186 8.53412C8.68672 8.11224 8.98937 7.5528 9.49379 7.5528H10.5943C10.5421 7.12113 10.4122 6.71365 10.219 6.34489ZM12.2277 2.64407L3.2157 13.2946C3.19921 13.3141 3.18476 13.3346 3.17233 13.3559L2.75575 13.8483C2.60286 14.0289 2.33244 14.0515 2.15175 13.8986C1.97106 13.7457 1.94852 13.4753 2.10141 13.2946L3.5223 11.6154C2.58262 10.6873 2.00001 9.39859 2.00001 7.97468C2.00001 5.15912 4.29281 2.85715 7.11753 2.85715C8.23482 2.85715 9.26926 3.21794 10.1108 3.82894L11.53 2.15175C11.6829 1.97106 11.9533 1.94852 12.134 2.10141C12.2952 2.23781 12.3305 2.46776 12.2277 2.64407ZM4.92622 12.6L6.01748 11.3104C6.36378 11.4251 6.73365 11.4872 7.11753 11.4872C7.55867 11.4872 7.91543 11.844 7.91543 12.2851C7.91543 12.7345 7.55867 13.0922 7.11753 13.0922C6.33358 13.0922 5.59059 12.9156 4.92622 12.6ZM9.06989 5.05913C8.51199 4.68207 7.84027 4.46211 7.11753 4.46211C5.18333 4.46211 3.60497 6.03955 3.60497 7.97468C3.60497 8.90563 3.97027 9.75381 4.56475 10.3834L9.06989 5.05913Z" fill="currentColor"/>
-</svg>
diff --git a/spx-gui/src/components/editor/panels/sprite/config/rotate.svg b/spx-gui/src/components/editor/panels/sprite/config/rotate.svg
deleted file mode 100644
index b7f4390df..000000000
--- a/spx-gui/src/components/editor/panels/sprite/config/rotate.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<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="M13.896 8.67697L11.9608 11.6943C11.7132 12.0887 11.1446 12.0887 10.8878 11.6943L8.96186 8.67697C8.68672 8.2551 8.98937 7.69565 9.49378 7.69565H10.5943C10.3834 5.95313 8.90683 4.60496 7.11753 4.60496C5.18332 4.60496 3.60496 6.18241 3.60496 8.11753C3.60496 10.0527 5.18332 11.6301 7.11753 11.6301C7.55866 11.6301 7.91542 11.9869 7.91542 12.428C7.91542 12.8774 7.55866 13.2351 7.11753 13.2351C4.2928 13.2351 2 10.9423 2 8.11753C2 5.30197 4.2928 3 7.11753 3C9.79552 3 11.9975 5.07269 12.2085 7.69565H13.364C13.8684 7.69565 14.1711 8.2551 13.896 8.67697Z" fill="currentColor"/>
-</svg>
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 c69b2e463..624a62e96 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
@@ -8,14 +8,7 @@
     class="stage-viewer"
     @mousemove="updateMousePos"
   >
-    <v-stage
-      v-if="stageConfig != null"
-      ref="stageRef"
-      :config="stageConfig"
-      @mousedown="handleStageMousedown"
-      @contextmenu="handleContextMenu"
-      @wheel="handleWheel"
-    >
+    <v-stage v-if="stageConfig != null" ref="stageRef" :config="stageConfig" @wheel="handleWheel">
       <v-layer ref="mapRef" :config="mapConfig" @dragmove="handleMapDragMove" @dragend="handleMapDragEnd">
         <v-rect v-if="konvaBackdropConfig" :config="konvaBackdropConfig"></v-rect>
         <DecoratorNode
@@ -36,26 +29,28 @@
         -->
         <v-group>
           <SpriteNode
-            v-for="sprite in visibleSprites"
-            :key="sprite.id"
-            :sprite="sprite"
-            :selected="editorCtx.state.selectedSprite?.id === sprite.id"
+            v-for="localConfig in visibleSpriteLocalConfigs"
+            :key="localConfig.id"
+            :local-config="localConfig"
+            :selected="editorCtx.state.selectedSprite?.id === localConfig.id"
             :project="editorCtx.project"
             :map-size="mapSize"
             :node-ready-map="nodeReadyMap"
             @drag-move="handleSpriteDragMove"
             @drag-end="handleSpriteDragEnd"
-            @selected="handleSpriteSelected(sprite)"
+            @selected="handleSpriteSelected(localConfig)"
+            @update-transform-op="handleSpriteUpdateTransformOp"
           />
         </v-group>
       </v-layer>
       <v-layer>
         <WidgetNode
-          v-for="widget in visibleWidgets"
-          :key="widget.id"
-          :widget="widget"
+          v-for="localConfig in visibleWidgetLocalConfigs"
+          :key="localConfig.id"
+          :local-config="localConfig"
           :viewport-size="viewportSize"
           :node-ready-map="nodeReadyMap"
+          @update-transform-op="handleSpriteUpdateTransformOp"
         />
       </v-layer>
       <v-layer>
@@ -66,30 +61,18 @@
         />
       </v-layer>
     </v-stage>
-    <UIDropdown trigger="manual" :visible="menuVisible" :pos="menuPos" placement="bottom-start">
-      <UIMenu>
-        <UIMenuItem
-          v-radar="{ name: 'Move up', desc: 'Click to move sprite up in z-order' }"
-          @click="moveZorder('up')"
-          >{{ $t(moveActionNames.up) }}</UIMenuItem
-        >
-        <UIMenuItem
-          v-radar="{ name: 'Move to top', desc: 'Click to move sprite to top in z-order' }"
-          @click="moveZorder('top')"
-          >{{ $t(moveActionNames.top) }}</UIMenuItem
-        >
-        <UIMenuItem
-          v-radar="{ name: 'Move down', desc: 'Click to move sprite down in z-order' }"
-          @click="moveZorder('down')"
-          >{{ $t(moveActionNames.down) }}</UIMenuItem
-        >
-        <UIMenuItem
-          v-radar="{ name: 'Move to bottom', desc: 'Click to move sprite to bottom in z-order' }"
-          @click="moveZorder('bottom')"
-          >{{ $t(moveActionNames.bottom) }}</UIMenuItem
-        >
-      </UIMenu>
-    </UIDropdown>
+    <QuickConfigWrapper ref="quickConfigRef" class="quick-config">
+      <SpriteQuickConfig
+        v-if="localConfigRef instanceof SpriteLocalConfig"
+        :local-config="localConfigRef"
+        :project="editorCtx.project"
+      />
+      <WidgetQuickConfig
+        v-else-if="localConfigRef instanceof WidgetLocalConfig"
+        :local-config="localConfigRef"
+        :project="editorCtx.project"
+      />
+    </QuickConfigWrapper>
     <PositionIndicator :position="mousePos" />
     <UILoading :visible="loading" cover />
   </div>
@@ -100,24 +83,29 @@ import { throttle } from 'lodash'
 import { computed, reactive, ref, shallowRef, watch, watchEffect } from 'vue'
 import Konva from 'konva'
 import type { KonvaEventObject } from 'konva/lib/Node'
-import type { Stage, StageConfig } from 'konva/lib/Stage'
+import type { StageConfig } from 'konva/lib/Stage'
 import type { LayerConfig } from 'konva/lib/Layer'
-import { UIDropdown, UILoading, UIMenu, UIMenuItem } from '@/components/ui'
+import { UILoading } from '@/components/ui'
 import { useContentSize } from '@/utils/dom'
 import { useFileUrl } from '@/utils/file'
 import { untilTaskScheduled, until, untilNotNull } from '@/utils/utils'
 import { getCleanupSignal } from '@/utils/disposable'
 import { fromBlob } from '@/models/common/file'
-import type { Sprite } from '@/models/sprite'
 import { MapMode } from '@/models/stage'
-import type { Widget } from '@/models/widget'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import NodeTransformer from '@/components/editor/common/viewer/NodeTransformer.vue'
 import { getNodeId } from '@/components/editor/common/viewer/common'
 import SpriteNode, { type CameraScrollNotifyFn } from '@/components/editor/common/viewer/SpriteNode.vue'
+import SpriteQuickConfig from '@/components/editor/common/viewer/quick-config/SpriteQuickConfig.vue'
+import WidgetQuickConfig from '@/components/editor/common/viewer/quick-config/WidgetQuickConfig.vue'
 import DecoratorNode from '@/components/editor/common/viewer/DecoratorNode.vue'
 import PositionIndicator from '@/components/editor/common/viewer/PositionIndicator.vue'
 import WidgetNode from './widgets/WidgetNode.vue'
+import QuickConfigWrapper, {
+  type ConfigType
+} from '@/components/editor/common/viewer/quick-config/QuickConfigWrapper.vue'
+import { SpriteLocalConfig, WidgetLocalConfig } from '@/components/editor/common/viewer/quick-config/utils'
+import type { TransformOp } from '@/components/editor/common/viewer/custom-transformer'
 
 const editorCtx = useEditorCtx()
 const container = ref<HTMLDivElement | null>(null)
@@ -358,14 +346,20 @@ const loading = computed(() => {
   return false
 })
 
-const visibleSprites = computed(() => {
+const visibleSpriteLocalConfigs = computed(() => {
   const { zorder, sprites } = editorCtx.project
-  return zorder.map((id) => sprites.find((s) => s.id === id)).filter(Boolean) as Sprite[]
+  return zorder
+    .map((id) => sprites.find((s) => s.id === id))
+    .filter(Boolean)
+    .map((sprite) => new SpriteLocalConfig(sprite!, editorCtx.project)) as SpriteLocalConfig[]
 })
 
-const visibleWidgets = computed(() => {
+const visibleWidgetLocalConfigs = computed(() => {
   const { widgetsZorder, widgets } = editorCtx.project.stage
-  return widgetsZorder.map((id) => widgets.find((w) => w.id === id)).filter(Boolean) as Widget[]
+  return widgetsZorder
+    .map((id) => widgets.find((w) => w.id === id))
+    .filter(Boolean)
+    .map((widget) => new WidgetLocalConfig(widget!, editorCtx.project)) as WidgetLocalConfig[]
 })
 
 let cameraEdgeScrollCheckTimer: ReturnType<typeof setInterval> | null = null
@@ -421,76 +415,42 @@ const handleSpriteDragMove = throttle(
   }
 )
 
-function handleSpriteDragEnd() {
-  clearCameraEdgeScrollCheckTimer()
-}
+// quick config
+const localConfigRef = shallowRef<SpriteLocalConfig | WidgetLocalConfig | null | undefined>(null)
+watch(
+  () => [editorCtx.state.selectedSprite, editorCtx.state.selectedWidget] as const,
+  ([sprite, widget]) => {
+    if (sprite == null && widget == null) return
+    if (sprite != null) {
+      localConfigRef.value = visibleSpriteLocalConfigs.value.find(({ id }) => id === sprite.id)
+    } else if (widget != null) {
+      localConfigRef.value = visibleWidgetLocalConfigs.value.find(({ id }) => id === widget.id)
+    }
+  },
+  { immediate: true }
+)
 
-function handleSpriteSelected(sprite: Sprite) {
-  editorCtx.state.selectSprite(sprite.id)
+const quickConfigRef = ref<InstanceType<typeof QuickConfigWrapper> | null>(null)
+function handleUpdateConfigType(configType: ConfigType) {
+  quickConfigRef.value?.updateConfigType(configType)
 }
-
-const menuVisible = ref(false)
-const menuPos = ref({ x: 0, y: 0 })
-
-function handleContextMenu(e: KonvaEventObject<MouseEvent>) {
-  e.evt.preventDefault()
-
-  // Ignore right click on backdrop.
-  // Konva.Rect is a subclass of Konva.Shape.
-  // Currently we have all sprites as Konva.Shape and backdrop as Konva.Rect.
-  if (e.target instanceof Konva.Rect) return
-
-  if (stageRef.value == null || e.target.parent == null) return
-  const stage: Stage = stageRef.value.getStage()
-  const pointerPos = stage.getPointerPosition()
-  if (pointerPos == null) return
-  const stagePos = stage.getContent().getBoundingClientRect()
-  const offsetY = -8 // offset for dropdown menu
-  menuPos.value = {
-    x: stagePos.x + pointerPos.x,
-    y: stagePos.y + pointerPos.y + offsetY
+function handleSpriteUpdateTransformOp(op: TransformOp | null) {
+  if (op == null) return
+  if (op === 'move') {
+    handleUpdateConfigType('pos')
+  } else if (op === 'rotate') {
+    handleUpdateConfigType('heading')
+  } else if (op === 'scale') {
+    handleUpdateConfigType('size')
   }
-  menuVisible.value = true
-}
-
-function handleStageMousedown() {
-  if (menuVisible.value) menuVisible.value = false
 }
 
-const moveActionNames = {
-  up: { en: 'Bring forward', zh: '向前移动' },
-  top: { en: 'Bring to front', zh: '移到最前' },
-  down: { en: 'Send backward', zh: '向后移动' },
-  bottom: { en: 'Send to back', zh: '移到最后' }
+function handleSpriteDragEnd() {
+  clearCameraEdgeScrollCheckTimer()
 }
 
-async function moveZorder(direction: 'up' | 'down' | 'top' | 'bottom') {
-  const { state, project } = editorCtx
-  const { selectedSprite, selectedWidget } = state
-  await project.history.doAction({ name: moveActionNames[direction] }, () => {
-    if (selectedSprite != null) {
-      if (direction === 'up') {
-        project.upSpriteZorder(selectedSprite.id)
-      } else if (direction === 'down') {
-        project.downSpriteZorder(selectedSprite.id)
-      } else if (direction === 'top') {
-        project.topSpriteZorder(selectedSprite.id)
-      } else if (direction === 'bottom') {
-        project.bottomSpriteZorder(selectedSprite.id)
-      }
-    } else if (selectedWidget != null) {
-      if (direction === 'up') {
-        project.stage.upWidgetZorder(selectedWidget.id)
-      } else if (direction === 'down') {
-        project.stage.downWidgetZorder(selectedWidget.id)
-      } else if (direction === 'top') {
-        project.stage.topWidgetZorder(selectedWidget.id)
-      } else if (direction === 'bottom') {
-        project.stage.bottomWidgetZorder(selectedWidget.id)
-      }
-    }
-  })
-  menuVisible.value = false
+function handleSpriteSelected(localConfig: SpriteLocalConfig) {
+  editorCtx.state.selectSprite(localConfig.id)
 }
 
 function handleWheel(e: KonvaEventObject<WheelEvent>) {
@@ -539,4 +499,10 @@ watchEffect((onCleanup) => {
   background-size: contain;
   position: relative;
 }
+
+.quick-config {
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+}
 </style>
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 685b4f67a..514d55011 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
@@ -1,5 +1,13 @@
 <template>
-  <v-group :config="groupConfig" @dragend="handleDragEnd" @transformend="handleTransformed" @click="handleClick">
+  <v-group
+    :config="groupConfig"
+    @dragmove="handleDragMove"
+    @dragend="handleDragEnd"
+    @transformstart="handleTransformStart"
+    @transform="handleTransform"
+    @transformend="handleTransformEnd"
+    @click="handleClick"
+  >
     <v-rect :config="rectConfig" />
     <v-text ref="labelTextRef" :config="labelTextConfig" />
     <v-shape :config="labelValueSepConfig" />
@@ -9,34 +17,52 @@
 </template>
 <script lang="ts" setup>
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
-import type { KonvaEventObject } from 'konva/lib/Node'
 import type { TextConfig, Text } from 'konva/lib/shapes/Text'
 import type { RectConfig } from 'konva/lib/shapes/Rect'
 import type { GroupConfig } from 'konva/lib/Group'
 import type { ShapeConfig } from 'konva/lib/Shape'
-import type { Action } from '@/models/project'
 import type { Size } from '@/models/common'
 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 { getNodeId } from '@/components/editor/common/viewer/common'
+import type { WidgetLocalConfig } from '@/components/editor/common/viewer/quick-config/utils'
+import type { TransformOp } from '@/components/editor/common/viewer/custom-transformer'
+import type { KonvaEventObject } from 'konva/lib/Node'
+import type Konva from 'konva'
+
+type ConfigGetter = {
+  get x(): number
+  get y(): number
+  get size(): number
+  get visible(): boolean
+}
 
 const props = defineProps<{
-  monitor: Monitor
+  localConfig: WidgetLocalConfig
   viewportSize: Size
   nodeReadyMap: Map<string, boolean>
 }>()
 
+const emits = defineEmits<{
+  updateTransformOp: [op: TransformOp | null]
+}>()
+
 const uiVariables = useUIVariables()
 const editorCtx = useEditorCtx()
 
-const nodeId = computed(() => getNodeId(props.monitor))
+const nodeId = computed(() => getNodeId(props.localConfig))
 const labelTextRef = ref<KonvaNodeInstance<Text>>()
 const valueTextRef = ref<KonvaNodeInstance<Text>>()
 const labelTextWidth = ref(0)
 const valueTextWidth = ref(0)
 
+const snapshotRef = ref<ConfigGetter | null>(null)
+const configGetter = computed(() => {
+  if (snapshotRef.value != null) return snapshotRef.value
+  return props.localConfig
+})
+
 // 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
 async function triggerTransformerUpdate() {
@@ -67,24 +93,57 @@ 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.id)
+  const zIndex = editorCtx.project.stage.widgetsZorder.indexOf(props.localConfig.id)
   if (zIndex >= 0) {
     labelTextRef.value!.getNode().zIndex(zIndex)
   }
 })
 
+function syncLocalConfigByShape(node: Konva.Node) {
+  const localConfig = props.localConfig
+  localConfig.setSize(toSize(node))
+  const { x, y } = toPosition(node)
+  localConfig.setX(x)
+  localConfig.setY(y)
+  props.localConfig.sync()
+}
+
+function handleDragMove(e: KonvaEventObject<unknown>) {
+  const localConfig = props.localConfig
+  const { x, y } = toPosition(e.target)
+  localConfig.setX(x)
+  localConfig.setY(y)
+  emits('updateTransformOp', 'move')
+}
 function handleDragEnd(e: KonvaEventObject<unknown>) {
-  const sname = props.monitor.name
-  handleChange(e, {
-    name: { en: `Move widget ${sname}`, zh: `移动控件 ${sname}` }
-  })
+  syncLocalConfigByShape(e.target)
 }
 
-function handleTransformed(e: KonvaEventObject<unknown>) {
-  const sname = props.monitor.name
-  handleChange(e, {
-    name: { en: `Transform widget ${sname}`, zh: `调整控件 ${sname}` }
-  })
+function handleTransformStart() {
+  snapshotRef.value = {
+    x: props.localConfig.x,
+    y: props.localConfig.y,
+    size: props.localConfig.size,
+    visible: props.localConfig.visible
+  }
+}
+function handleTransform(e: KonvaEventObject<unknown>) {
+  const localConfig = props.localConfig
+  const { size: oldSize, x: oldX, y: oldY } = configGetter.value
+  const size = toSize(e.target)
+  if (oldSize !== size) {
+    localConfig.setSize(size)
+    emits('updateTransformOp', 'scale')
+  }
+  const { x, y } = toPosition(e.target)
+  if (oldX !== x || oldY !== y) {
+    localConfig.setX(x)
+    localConfig.setY(y)
+  }
+}
+function handleTransformEnd(e: KonvaEventObject<unknown>) {
+  syncLocalConfigByShape(e.target)
+  snapshotRef.value = null
 }
 
 const paddingX = 6 // px
@@ -96,7 +155,7 @@ const labelValueSepGap = 2 // px, gap between [label, sep, value]
 const height = fontSize * lineHeight + paddingY * 2
 
 const groupConfig = computed<GroupConfig>(() => {
-  const { visible, x, y, size } = props.monitor
+  const { visible, x, y, size } = configGetter.value
   return {
     nodeId: nodeId.value,
     visible,
@@ -126,7 +185,7 @@ const rectConfig = computed<RectConfig>(() => {
 })
 
 const labelTextConfig = computed<TextConfig>(() => {
-  const { label } = props.monitor
+  const { label } = props.localConfig
   return {
     text: label,
     x: paddingX,
@@ -168,7 +227,7 @@ const valueBgConfig = computed<RectConfig>(() => {
 })
 
 const valueTextConfig = computed<TextConfig>(() => {
-  const { variableName } = props.monitor
+  const { variableName } = props.localConfig
   return {
     text: variableName === '' ? '   ' : `{${variableName}}`,
     x: paddingX + labelTextWidth.value + labelValueSepGap + labelValueSepWidth + labelValueSepGap,
@@ -180,20 +239,18 @@ const valueTextConfig = computed<TextConfig>(() => {
 
 watch(valueTextConfig, () => nextTick().then(updateValueTextWidth))
 
-/** Handler for position-change (drag) or transform */
-function handleChange(e: KonvaEventObject<unknown>, action: Action) {
-  const { monitor, viewportSize: mapSize } = props
-  const x = round(e.target.x() - mapSize.width / 2)
-  const y = round(mapSize.height / 2 - e.target.y())
-  const size = round(e.target.scaleX(), 2)
-  editorCtx.project.history.doAction(action, () => {
-    monitor.setX(x)
-    monitor.setY(y)
-    monitor.setSize(size)
-  })
+function toPosition(node: Konva.Node) {
+  const x = round(node.x() - props.viewportSize.width / 2)
+  const y = round(props.viewportSize.height / 2 - node.y())
+  return { x, y }
+}
+
+function toSize(node: Konva.Node) {
+  const size = round(node.scaleX(), 2)
+  return size
 }
 
 function handleClick() {
-  editorCtx.state.selectWidget(props.monitor.id)
+  editorCtx.state.selectWidget(props.localConfig.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 e7d14ee4a..ef6598cf9 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
@@ -1,30 +1,24 @@
 <script lang="ts" setup>
 import { watchEffect } from 'vue'
 import type { Size } from '@/models/common'
-import type { Widget } from '@/models/widget'
 import MonitorNode from './MonitorNode.vue'
-import { Monitor } from '@/models/widget/monitor'
 import { getNodeId } from '@/components/editor/common/viewer/common'
+import type { WidgetLocalConfig } from '@/components/editor/common/viewer/quick-config/utils'
 
 const props = defineProps<{
-  widget: Widget
+  localConfig: WidgetLocalConfig
   viewportSize: Size
   nodeReadyMap: Map<string, boolean>
 }>()
 
 // TODO: when there are more widget types, we may extract more common logic for reuse
 watchEffect((onCleanup) => {
-  const nodeId = getNodeId(props.widget)
+  const nodeId = getNodeId(props.localConfig)
   props.nodeReadyMap.set(nodeId, true)
   onCleanup(() => props.nodeReadyMap.delete(nodeId))
 })
 </script>
 
 <template>
-  <MonitorNode
-    v-if="widget instanceof Monitor"
-    :monitor="widget"
-    :viewport-size="viewportSize"
-    :node-ready-map="nodeReadyMap"
-  ></MonitorNode>
+  <MonitorNode :local-config="localConfig" :viewport-size="viewportSize" :node-ready-map="nodeReadyMap"></MonitorNode>
 </template>
diff --git a/spx-gui/src/components/editor/sprite/SpriteItem.vue b/spx-gui/src/components/editor/sprite/SpriteItem.vue
index e9ccc76fd..5fd20096c 100644
--- a/spx-gui/src/components/editor/sprite/SpriteItem.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteItem.vue
@@ -7,7 +7,7 @@ import { useDragDroppable } from '@/utils/drag-and-drop'
 import { Sprite } from '@/models/sprite'
 import { Costume } from '@/models/costume'
 import { Animation } from '@/models/animation'
-import { UIImg, UIEditorSpriteItem } from '@/components/ui'
+import { UIImg, UIEditorSpriteItem, UIMenuItem } from '@/components/ui'
 import CostumesAutoPlayer from '@/components/common/CostumesAutoPlayer.vue'
 import { useEditorCtx } from '../EditorContextProvider.vue'
 import {
@@ -52,6 +52,17 @@ const radarNodeMeta = computed(() => {
   return { name, desc }
 })
 
+function toggleSpriteVisible() {
+  const name = props.sprite.name
+  const action = {
+    name: {
+      en: `${props.sprite.visible ? 'Hide' : 'Show'} sprite ${name}`,
+      zh: `${props.sprite.visible ? '隐藏' : '显示'}精灵 ${name}`
+    }
+  }
+  editorCtx.project.history.doAction(action, () => props.sprite.setVisible(!props.sprite.visible))
+}
+
 const { fn: handleDuplicate } = useMessageHandle(
   async () => {
     const sprite = props.sprite
@@ -148,6 +159,7 @@ useDragDroppable(() => (props.droppable ? wrapperRef.value?.$el : null), {
     :name="sprite.name"
     :selectable="selectable"
     :color="color"
+    :visible="sprite.visible"
   >
     <template #img="{ style }">
       <CostumesAutoPlayer
@@ -160,6 +172,12 @@ useDragDroppable(() => (props.droppable ? wrapperRef.value?.$el : null), {
       <UIImg v-else :style="style" :src="imgSrc" :loading="imgLoading" />
     </template>
     <CornerMenu v-if="operable && selectable && selectable.selected" :color="color">
+      <UIMenuItem
+        v-radar="{ name: 'Visibility', desc: 'Click to toggle visibility the sprite' }"
+        @click="toggleSpriteVisible"
+      >
+        {{ $t({ en: `${sprite.visible ? 'Hide' : 'Show'}`, zh: `${sprite.visible ? '隐藏' : '显示'}` }) }}
+      </UIMenuItem>
       <DuplicateMenuItem
         v-radar="{ name: 'Duplicate', desc: 'Click to duplicate the sprite' }"
         @click="handleDuplicate"
diff --git a/spx-gui/src/components/editor/stage/widget/WidgetItem.vue b/spx-gui/src/components/editor/stage/widget/WidgetItem.vue
index 851871fe2..739c50eff 100644
--- a/spx-gui/src/components/editor/stage/widget/WidgetItem.vue
+++ b/spx-gui/src/components/editor/stage/widget/WidgetItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { UIEditorWidgetItem } from '@/components/ui'
+import { UIEditorWidgetItem, UIMenuItem } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
 import type { Widget } from '@/models/widget'
 import { useEditorCtx } from '../../EditorContextProvider.vue'
@@ -31,6 +31,12 @@ const radarNodeMeta = computed(() => {
   return { name, desc }
 })
 
+function toggleWidgetVisible() {
+  const name = props.widget.name
+  const action = { name: { en: `Toggle visibility for widget ${name}`, zh: `切换控件 ${name} 的可见性` } }
+  editorCtx.project.history.doAction(action, () => props.widget.setVisible(!props.widget.visible))
+}
+
 const { fn: handleDuplicate } = useMessageHandle(
   async () => {
     const widget = props.widget
@@ -71,12 +77,24 @@ const { fn: handleRename } = useMessageHandle(() => renameWidget(props.widget),
 </script>
 
 <template>
-  <UIEditorWidgetItem v-radar="radarNodeMeta" :name="widget.name" :selectable="selectable" :color="color">
+  <UIEditorWidgetItem
+    v-radar="radarNodeMeta"
+    :name="widget.name"
+    :selectable="selectable"
+    :color="color"
+    :visible="widget.visible"
+  >
     <template #icon>
       <!-- eslint-disable-next-line vue/no-v-html -->
       <div v-html="getIcon(widget)"></div>
     </template>
     <CornerMenu v-if="operable && selectable && selectable.selected" :color="color">
+      <UIMenuItem
+        v-radar="{ name: 'Visibility control', desc: 'Control to toggle widget visibility' }"
+        @click="toggleWidgetVisible"
+      >
+        {{ $t({ en: `${widget.visible ? 'Hide' : 'Show'} Widget`, zh: `${widget.visible ? '隐藏' : '显示'}控件` }) }}
+      </UIMenuItem>
       <DuplicateMenuItem
         v-radar="{ name: 'Duplicate', desc: 'Click to duplicate the widget' }"
         @click="handleDuplicate"
diff --git a/spx-gui/src/components/ui/UIDivider.vue b/spx-gui/src/components/ui/UIDivider.vue
index 68e3e6338..d6d33e388 100644
--- a/spx-gui/src/components/ui/UIDivider.vue
+++ b/spx-gui/src/components/ui/UIDivider.vue
@@ -1,9 +1,18 @@
 <template>
-  <NDivider class="divider" />
+  <NDivider class="divider" :vertical="vertical" />
 </template>
 
 <script lang="ts" setup>
 import { NDivider } from 'naive-ui'
+
+withDefaults(
+  defineProps<{
+    vertical?: boolean
+  }>(),
+  {
+    vertical: false
+  }
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue b/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue
index cb98fa68a..bb9849538 100644
--- a/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue
+++ b/spx-gui/src/components/ui/block-items/UIBlockItemTitle.vue
@@ -3,12 +3,17 @@
     <span>
       <slot></slot>
     </span>
+    <slot v-if="slots.suffix != null" name="suffix"></slot>
   </div>
 </template>
 <script setup lang="ts">
+import { useSlots } from 'vue'
+
 defineProps<{
   size: 'medium' | 'large'
 }>()
+
+const slots = useSlots()
 </script>
 <style scoped lang="scss">
 .ui-title-container {
@@ -16,8 +21,9 @@ defineProps<{
   align-items: center;
   color: var(--ui-color-title);
   width: 100%;
-
   text-align: center;
+  gap: 8px;
+  padding: 0 6px;
 
   &.medium {
     font-size: 10px;
@@ -31,12 +37,10 @@ defineProps<{
   }
 
   & > span {
-    width: 100%;
-
     overflow: hidden;
+    flex: 1;
     white-space: nowrap;
     text-overflow: ellipsis;
-    padding: 0 6px;
   }
 }
 </style>
diff --git a/spx-gui/src/components/ui/block-items/UIEditorSpriteItem.vue b/spx-gui/src/components/ui/block-items/UIEditorSpriteItem.vue
index c1991ea05..9fee20fb0 100644
--- a/spx-gui/src/components/ui/block-items/UIEditorSpriteItem.vue
+++ b/spx-gui/src/components/ui/block-items/UIEditorSpriteItem.vue
@@ -3,6 +3,9 @@
     <slot name="img" :style="imgStyle"></slot>
     <UIBlockItemTitle size="medium">
       {{ name }}
+      <template v-if="visible === false" #suffix>
+        <UIIcon class="eye-off" type="eyeOff" :title="$t({ en: 'Invisible', zh: '不可见' })" />
+      </template>
     </UIBlockItemTitle>
     <slot></slot>
   </UIBlockItem>
@@ -11,6 +14,7 @@
 import { computed, type CSSProperties } from 'vue'
 import UIBlockItem, { type DroppableState } from './UIBlockItem.vue'
 import UIBlockItemTitle from './UIBlockItemTitle.vue'
+import UIIcon from '../icons/UIIcon.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -18,11 +22,13 @@ const props = withDefaults(
     selectable?: false | { selected: boolean }
     color?: 'sprite' | 'primary'
     droppable?: DroppableState | false
+    visible?: boolean | null
   }>(),
   {
     selectable: false,
     color: 'sprite',
-    droppable: false
+    droppable: false,
+    visible: null
   }
 )
 
@@ -34,4 +40,9 @@ const imgStyle: CSSProperties = {
   width: '60px'
 }
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.eye-off {
+  color: var(--ui-color-grey-700);
+  cursor: auto;
+}
+</style>
diff --git a/spx-gui/src/components/ui/block-items/UIEditorWidgetItem.vue b/spx-gui/src/components/ui/block-items/UIEditorWidgetItem.vue
index abfd7122e..cfb8f9a66 100644
--- a/spx-gui/src/components/ui/block-items/UIEditorWidgetItem.vue
+++ b/spx-gui/src/components/ui/block-items/UIEditorWidgetItem.vue
@@ -5,11 +5,15 @@
     </div>
     <UIBlockItemTitle size="medium">
       {{ name }}
+      <template v-if="visible === false" #suffix>
+        <UIIcon class="eye-off" type="eyeOff" />
+      </template>
     </UIBlockItemTitle>
     <slot></slot>
   </UIBlockItem>
 </template>
 <script setup lang="ts">
+import UIIcon from '../icons/UIIcon.vue'
 import UIBlockItem from './UIBlockItem.vue'
 import UIBlockItemTitle from './UIBlockItemTitle.vue'
 
@@ -18,10 +22,12 @@ withDefaults(
     name: string
     color?: 'stage' | 'primary'
     selectable?: false | { selected: boolean }
+    visible?: boolean | null
   }>(),
   {
     color: 'stage',
-    selectable: false
+    selectable: false,
+    visible: null
   }
 )
 </script>
@@ -36,4 +42,9 @@ withDefaults(
     height: 100%;
   }
 }
+
+.eye-off {
+  color: var(--ui-color-grey-700);
+  cursor: auto;
+}
 </style>
diff --git a/spx-gui/src/components/ui/icons/UIIcon.vue b/spx-gui/src/components/ui/icons/UIIcon.vue
index 3c35bf60e..020cf0801 100644
--- a/spx-gui/src/components/ui/icons/UIIcon.vue
+++ b/spx-gui/src/components/ui/icons/UIIcon.vue
@@ -21,6 +21,7 @@ import trash from './trash.svg?raw'
 import edit from './edit.svg?raw'
 import eye from './eye.svg?raw'
 import eyeSlash from './eye-slash.svg?raw'
+import eyeOff from './eye-off.svg?raw'
 import more from './more.svg?raw'
 import exchange from './exchange.svg?raw'
 import search from './search.svg?raw'
@@ -64,6 +65,10 @@ import redo from './redo.svg?raw'
 import localFile from './local-file.svg?raw'
 import assetLibrary from './asset-library.svg?raw'
 import minus from './minus.svg?raw'
+import layer from './layer.svg?raw'
+import notRotate from './not-rotate.svg?raw'
+import leftRight from './left-right.svg?raw'
+import rotateAround from './rotate-around.svg?raw'
 
 const typeIconMap = {
   file,
@@ -82,12 +87,14 @@ const typeIconMap = {
   edit,
   eye,
   eyeSlash,
+  eyeOff,
   more,
   exchange,
   search,
   close,
   closeCircle,
   rotate,
+  rotateAround,
   share,
   arrowAlt,
   doubleArrowDown,
@@ -124,7 +131,10 @@ const typeIconMap = {
   redo,
   localFile,
   assetLibrary,
-  minus
+  minus,
+  layer,
+  notRotate,
+  leftRight
 }
 
 export type Type = keyof typeof typeIconMap
diff --git a/spx-gui/src/components/ui/icons/eye-off.svg b/spx-gui/src/components/ui/icons/eye-off.svg
new file mode 100644
index 000000000..ba66fe0d8
--- /dev/null
+++ b/spx-gui/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/spx-gui/src/components/ui/icons/layer.svg b/spx-gui/src/components/ui/icons/layer.svg
new file mode 100644
index 000000000..1afdea134
--- /dev/null
+++ b/spx-gui/src/components/ui/icons/layer.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.6678 15.0563C21.1884 14.8728 21.7603 15.1462 21.9442 15.6666C22.128 16.1872 21.8543 16.759 21.3339 16.943L12.8339 19.943C12.6186 20.019 12.3832 20.0189 12.1678 19.943L3.66785 16.943C3.14708 16.7592 2.87369 16.1874 3.0575 15.6666C3.24152 15.1462 3.81325 14.8725 4.33386 15.0563L12.5009 17.9381L20.6678 15.0563ZM20.6678 11.0563C21.1884 10.8728 21.7603 11.1462 21.9442 11.6666C22.128 12.1872 21.8543 12.759 21.3339 12.943L12.8339 15.943C12.6186 16.019 12.3832 16.0189 12.1678 15.943L3.66785 12.943C3.14708 12.7592 2.87369 12.1874 3.0575 11.6666C3.24152 11.1462 3.81325 10.8725 4.33386 11.0563L12.5009 13.9381L20.6678 11.0563ZM12.2157 3.04065C12.4325 2.97631 12.6666 2.98696 12.8778 3.07288L21.3778 6.53088C21.7528 6.68363 21.9989 7.04789 22.0009 7.45276C22.0025 7.85764 21.7592 8.2235 21.3856 8.37952L12.8856 11.9225C12.6395 12.0251 12.3623 12.025 12.1161 11.9225L3.61609 8.37952C3.24222 8.22362 2.99922 7.85782 3.00085 7.45276C3.00277 7.04782 3.24884 6.68358 3.6239 6.53088L12.1239 3.07288L12.2157 3.04065ZM6.62683 7.46741L12.5009 9.91565L18.3739 7.46741L12.5009 5.07874L6.62683 7.46741Z" fill="currentColor"/>
+</svg>
diff --git a/spx-gui/src/components/ui/icons/left-right.svg b/spx-gui/src/components/ui/icons/left-right.svg
new file mode 100644
index 000000000..cea2dcc64
--- /dev/null
+++ b/spx-gui/src/components/ui/icons/left-right.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="M11.124 18.5649C11.3825 18.3083 11.7907 18.2142 12.1396 18.3618C12.2521 18.4171 12.3442 18.4746 12.4346 18.5649C12.5083 18.6386 12.5824 18.7494 12.6396 18.8618C12.6747 18.9707 12.7138 19.1007 12.7139 19.2114C12.7138 19.3336 12.6789 19.441 12.6455 19.5444L12.6396 19.562L12.6318 19.5776C12.5774 19.6832 12.5225 19.7886 12.4346 19.8589C12.2703 20.0416 12.0307 20.1342 11.7705 20.1343C11.5305 20.1343 11.3086 20.0417 11.124 19.8589C11.0503 19.7851 10.9762 19.6726 10.9209 19.562L10.915 19.5444C10.8816 19.441 10.8477 19.3336 10.8477 19.2114C10.8477 19.1007 10.8858 18.9707 10.9209 18.8618C10.9763 18.7494 11.0503 18.6387 11.124 18.5649ZM6.69336 6.84229C7.16034 6.37542 7.95846 6.70618 7.95898 7.3667V17.3228C7.95898 17.9819 7.16048 18.3123 6.69336 17.8452L1.71582 12.8677C1.42802 12.5779 1.42807 12.1088 1.71582 11.8208L6.69336 6.84229ZM16.04 7.3667C16.0406 6.70634 16.8395 6.37592 17.3066 6.84229L22.2822 11.8228C22.572 12.1108 22.572 12.5797 22.2822 12.8696L17.3066 17.8452C16.8394 18.3123 16.04 17.9819 16.04 17.3228V7.3667ZM11.79 14.689C12.2885 14.689 12.7128 15.095 12.7129 15.6118C12.7129 16.1103 12.2886 16.5347 11.79 16.5347C11.2731 16.5346 10.8672 16.1103 10.8672 15.6118C10.8673 15.095 11.2732 14.689 11.79 14.689ZM11.79 11.0698C12.2884 11.0698 12.7126 11.4759 12.7129 11.9927C12.7129 12.5078 12.2886 12.9165 11.79 12.9165C11.2731 12.9164 10.8672 12.5078 10.8672 11.9927C10.8675 11.476 11.2733 11.0699 11.79 11.0698ZM11.79 7.46924C12.2883 7.46924 12.7125 7.87545 12.7129 8.39209C12.7129 8.89061 12.2886 9.31592 11.79 9.31592C11.2731 9.31584 10.8672 8.89056 10.8672 8.39209C10.8676 7.87549 11.2734 7.46932 11.79 7.46924ZM11.124 4.12549C11.3825 3.86903 11.7908 3.77677 12.1396 3.92432C12.2521 3.97775 12.3443 4.03534 12.4346 4.12549C12.6007 4.29346 12.7138 4.53398 12.7139 4.77393C12.7139 4.89432 12.6789 5.00161 12.6455 5.10498C12.6436 5.1108 12.6415 5.11676 12.6396 5.12256L12.6367 5.12939C12.5806 5.23975 12.5251 5.34829 12.4346 5.43701C12.2519 5.60476 12.0306 5.69674 11.7705 5.69678C11.6599 5.69677 11.5307 5.67887 11.4219 5.64209C11.3093 5.58487 11.2163 5.51081 11.124 5.43701C11.0502 5.34656 10.9763 5.23511 10.9209 5.12256C10.9191 5.11682 10.9169 5.11073 10.915 5.10498C10.8816 5.00167 10.8477 4.89425 10.8477 4.77393C10.8477 4.66145 10.8859 4.53399 10.9209 4.42334C10.9763 4.3126 11.0502 4.19931 11.124 4.12549Z" fill="currentColor"/>
+</svg>
diff --git a/spx-gui/src/components/ui/icons/not-rotate.svg b/spx-gui/src/components/ui/icons/not-rotate.svg
new file mode 100644
index 000000000..332165390
--- /dev/null
+++ b/spx-gui/src/components/ui/icons/not-rotate.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 fill-rule="evenodd" clip-rule="evenodd" d="M15.3286 9.51733L16.9673 7.58058C17.7198 8.66142 18.2013 9.94417 18.3127 11.3292H20.046C20.8027 11.3292 21.2566 12.1684 20.8439 12.8012L17.9413 17.3272C17.5698 17.9187 16.7169 17.9187 16.3317 17.3272L13.4428 12.8012C13.0301 12.1684 13.4841 11.3292 14.2407 11.3292H15.8915C15.8131 10.6817 15.6182 10.0705 15.3286 9.51733ZM18.3415 3.96611L4.82355 19.9419C4.79881 19.9711 4.77714 20.0019 4.75849 20.0339L4.13362 20.7724C3.90428 21.0434 3.49865 21.0772 3.22762 20.8479C2.95659 20.6186 2.92279 20.2129 3.15212 19.9419L5.28345 17.4231C3.87394 16.031 3.00001 14.0979 3.00001 11.962C3.00001 7.73868 6.43921 4.28573 10.6763 4.28573C12.3522 4.28573 13.9039 4.8269 15.1662 5.74342L17.295 3.22762C17.5243 2.95659 17.9299 2.92279 18.201 3.15212C18.4428 3.35672 18.4957 3.70163 18.3415 3.96611ZM7.38933 18.9001L9.02622 16.9655C9.54567 17.1377 10.1005 17.2309 10.6763 17.2309C11.338 17.2309 11.8731 17.766 11.8731 18.4277C11.8731 19.1018 11.338 19.6383 10.6763 19.6383C9.50037 19.6383 8.38589 19.3734 7.38933 18.9001ZM13.6048 7.5887C12.768 7.0231 11.7604 6.69316 10.6763 6.69316C7.77499 6.69316 5.40745 9.05933 5.40745 11.962C5.40745 13.3584 5.9554 14.6307 6.84712 15.5751L13.6048 7.5887Z" fill="currentColor"/>
+</svg>
diff --git a/spx-gui/src/components/ui/icons/rotate-around.svg b/spx-gui/src/components/ui/icons/rotate-around.svg
new file mode 100644
index 000000000..e41abbc5f
--- /dev/null
+++ b/spx-gui/src/components/ui/icons/rotate-around.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 fill-rule="evenodd" clip-rule="evenodd" d="M20.8439 13.0155L17.9413 17.5414C17.5698 18.133 16.7169 18.133 16.3317 17.5414L13.4428 13.0155C13.0301 12.3826 13.4841 11.5435 14.2407 11.5435H15.8915C15.5751 8.92969 13.3602 6.90744 10.6763 6.90744C7.77498 6.90744 5.40744 9.27361 5.40744 12.1763C5.40744 15.079 7.77498 17.4451 10.6763 17.4451C11.338 17.4451 11.8731 17.9803 11.8731 18.642C11.8731 19.3161 11.338 19.8526 10.6763 19.8526C6.4392 19.8526 3 16.4134 3 12.1763C3 7.95296 6.4392 4.5 10.6763 4.5C14.6933 4.5 17.9963 7.60904 18.3127 11.5435H20.046C20.8027 11.5435 21.2566 12.3826 20.8439 13.0155Z" fill="currentColor"/>
+</svg>
diff --git a/spx-gui/src/models/sprite.ts b/spx-gui/src/models/sprite.ts
index db8092622..acf6711ad 100644
--- a/spx-gui/src/models/sprite.ts
+++ b/spx-gui/src/models/sprite.ts
@@ -4,7 +4,7 @@
  */
 
 import { reactive } from 'vue'
-import { nomalizeDegree } from '@/utils/utils'
+import { normalizeDegree } from '@/utils/utils'
 import { join } from '@/utils/path'
 import { Disposable } from '@/utils/disposable'
 import { fromText, type Files, fromConfig, toText, toConfig, listDirs } from './common/file'
@@ -723,7 +723,7 @@ export enum LeftRight {
 }
 
 export function headingToLeftRight(heading: number): LeftRight {
-  heading = nomalizeDegree(heading)
+  heading = normalizeDegree(heading)
   if (heading >= 0) return LeftRight.right
   return LeftRight.left
 }
diff --git a/spx-gui/src/utils/utils.test.ts b/spx-gui/src/utils/utils.test.ts
index cecf97f4f..a191c45ef 100644
--- a/spx-gui/src/utils/utils.test.ts
+++ b/spx-gui/src/utils/utils.test.ts
@@ -3,7 +3,7 @@ import { describe, it, expect, vitest } from 'vitest'
 import {
   isImage,
   isSound,
-  nomalizeDegree,
+  normalizeDegree,
   memoizeAsync,
   localStorageRef,
   humanizeListWithLimit,
@@ -73,21 +73,21 @@ describe('isSound', () => {
   })
 })
 
-describe('nomalizeDegree', () => {
+describe('normalizeDegree', () => {
   it('should work well', () => {
-    expect(nomalizeDegree(0)).toBe(0)
-    expect(nomalizeDegree(90)).toBe(90)
-    expect(nomalizeDegree(180)).toBe(180)
-    expect(nomalizeDegree(270)).toBe(-90)
-    expect(nomalizeDegree(360)).toBe(0)
-    expect(nomalizeDegree(450)).toBe(90)
-    expect(nomalizeDegree(720)).toBe(0)
-    expect(nomalizeDegree(-90)).toBe(-90)
-    expect(nomalizeDegree(-180)).toBe(180)
-    expect(nomalizeDegree(-270)).toBe(90)
-    expect(nomalizeDegree(-360)).toBe(0)
-    expect(nomalizeDegree(-450)).toBe(-90)
-    expect(nomalizeDegree(-720)).toBe(0)
+    expect(normalizeDegree(0)).toBe(0)
+    expect(normalizeDegree(90)).toBe(90)
+    expect(normalizeDegree(180)).toBe(180)
+    expect(normalizeDegree(270)).toBe(-90)
+    expect(normalizeDegree(360)).toBe(0)
+    expect(normalizeDegree(450)).toBe(90)
+    expect(normalizeDegree(720)).toBe(0)
+    expect(normalizeDegree(-90)).toBe(-90)
+    expect(normalizeDegree(-180)).toBe(180)
+    expect(normalizeDegree(-270)).toBe(90)
+    expect(normalizeDegree(-360)).toBe(0)
+    expect(normalizeDegree(-450)).toBe(-90)
+    expect(normalizeDegree(-720)).toBe(0)
   })
 })
 
diff --git a/spx-gui/src/utils/utils.ts b/spx-gui/src/utils/utils.ts
index fe2db390a..3acfae505 100644
--- a/spx-gui/src/utils/utils.ts
+++ b/spx-gui/src/utils/utils.ts
@@ -196,7 +196,7 @@ function untilConditionMet<T>(
 }
 
 /** Convert arbitrary degree value to `(-180, 180]` */
-export function nomalizeDegree(num: number) {
+export function normalizeDegree(num: number) {
   if (!Number.isFinite(num) || Number.isNaN(num)) return num
   num = num % 360
   if (num > 180) num = num - 360