diff --git a/spx-gui/.env b/spx-gui/.env
index cf290beeef..6bc404cbce 100644
--- a/spx-gui/.env
+++ b/spx-gui/.env
@@ -50,7 +50,7 @@ VITE_CASDOOR_ORGANIZATION_NAME=""
 VITE_DISABLE_AIGC="false"
 
 # Version of spx, keep in sync with the version in `install-spx.sh`.
-VITE_SPX_VERSION="2.0.1"
+VITE_SPX_VERSION="2.0.2"
 
 # Whether to show the license information (including copyright) in the footer.
 VITE_SHOW_LICENSE="false"
diff --git a/spx-gui/install-spx.sh b/spx-gui/install-spx.sh
index 043b82fcac..2d7ccec22b 100755
--- a/spx-gui/install-spx.sh
+++ b/spx-gui/install-spx.sh
@@ -4,7 +4,7 @@ set -e
 cd "$(dirname "$0")"
 
 # Keep this version in sync with `VITE_SPX_VERSION` in `.env`.
-SPX_VERSION="2.0.1"
+SPX_VERSION="2.0.2"
 
 SPX_NAME="spx_${SPX_VERSION}"
 SPX_RELEASE_URL="https://github.com/goplus/spx/releases/download/v${SPX_VERSION}/spx_web.zip"
diff --git a/spx-gui/src/components/asset/gen/animation/AnimationVideoPreview.vue b/spx-gui/src/components/asset/gen/animation/AnimationVideoPreview.vue
index 9da0b8e2a9..ad5360d986 100644
--- a/spx-gui/src/components/asset/gen/animation/AnimationVideoPreview.vue
+++ b/spx-gui/src/components/asset/gen/animation/AnimationVideoPreview.vue
@@ -17,9 +17,8 @@ function useVideoPlayer(videoRef: Ref<HTMLVideoElement | null>, rangeRef: WatchS
   /** Latest requested preview seek time in ms while a browser seek may still be in flight. */
   let pendingSeekTime: number | null = null
 
-  function flushPendingSeek() {
-    const video = videoRef.value
-    if (video == null || pendingSeekTime == null || video.seeking) return
+  function flushPendingSeek(video: HTMLVideoElement) {
+    if (pendingSeekTime == null) return
     const nextTime = pendingSeekTime
     pendingSeekTime = null
     video.currentTime = nextTime / 1000
@@ -29,7 +28,9 @@ function useVideoPlayer(videoRef: Ref<HTMLVideoElement | null>, rangeRef: WatchS
     const nextTime = Math.max(0, timeInMs)
     currentTime.value = nextTime
     pendingSeekTime = nextTime
-    flushPendingSeek()
+    const video = videoRef.value
+    if (video == null || video.seeking) return
+    flushPendingSeek(video)
   }
 
   function pausePlayback() {
@@ -67,21 +68,19 @@ function useVideoPlayer(videoRef: Ref<HTMLVideoElement | null>, rangeRef: WatchS
     { immediate: true }
   )
 
-  function handleLoadedMetadata() {
-    const video = videoRef.value
-    if (video == null) return
-    duration.value = Number.isFinite(video.duration) ? Math.round(video.duration * 1000) : 0
-  }
-
   watch(
     videoRef,
     (video, _, onCleanup) => {
       if (video == null) return
+      const handleLoadedMetadata = () => {
+        duration.value = Number.isFinite(video.duration) ? Math.round(video.duration * 1000) : 0
+      }
       video.addEventListener('loadedmetadata', handleLoadedMetadata)
-      video.addEventListener('seeked', flushPendingSeek)
+      const handleSeeked = () => flushPendingSeek(video)
+      video.addEventListener('seeked', handleSeeked)
       onCleanup(() => {
         video.removeEventListener('loadedmetadata', handleLoadedMetadata)
-        video.removeEventListener('seeked', flushPendingSeek)
+        video.removeEventListener('seeked', handleSeeked)
       })
     },
     { immediate: true }
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
index eb7c0ab666..d30c8efd01 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
@@ -175,7 +175,7 @@ async function beforeSubmit() {
 const handleSubmit = useMessageHandle(
   async () => {
     await beforeSubmit()
-    const sprite = props.gen.finish()
+    const sprite = await props.gen.finish()
     props.gen.recordAdoption().catch((err) => {
       capture(err, 'failed to record sprite asset adoption')
     })
diff --git a/spx-gui/src/components/asset/scratch/LoadFromScratch.vue b/spx-gui/src/components/asset/scratch/LoadFromScratch.vue
index b9c90bb4d7..3d5f1f6fbe 100644
--- a/spx-gui/src/components/asset/scratch/LoadFromScratch.vue
+++ b/spx-gui/src/components/asset/scratch/LoadFromScratch.vue
@@ -69,6 +69,8 @@ import { Backdrop } from '@/models/spx/backdrop'
 import { Costume } from '@/models/spx/costume'
 import { fromBlob } from '@/models/common/file'
 import { useMessageHandle } from '@/utils/exception'
+import { isSvgMimeType } from '@/utils/file'
+import { getSVGViewBoxRect } from '@/utils/img'
 import type { ExportedScratchCostume, ExportedScratchSound, ExportedScratchSprite } from '@/utils/scratch'
 import { type SpxProject } from '@/models/spx/project'
 import type { AssetModel } from '@/models/spx/common/asset'
@@ -131,17 +133,33 @@ const selectBackdrop = (backdrop: ExportedScratchCostume) => {
 const scratchToSpxFile = (scratchFile: ExportedScratchFile) => {
   return fromBlob(`${scratchFile.name}.${scratchFile.extension}`, scratchFile.blob)
 }
+
+async function getPivotFromScratchCostume(asset: ExportedScratchCostume) {
+  let x = asset.rotationCenterX
+  let y = asset.rotationCenterY
+  // Scratch stores SVG rotation centers in the SVG viewBox coordinate space.
+  // Builder/SPX uses image-top-left as pivot origin, so subtract viewBox origin for SVG.
+  if (isSvgMimeType(asset.blob.type)) {
+    const svgText = await asset.blob.text()
+    const viewBoxRect = getSVGViewBoxRect(svgText)
+    x -= viewBoxRect.x
+    y -= viewBoxRect.y
+  }
+  return {
+    x: x / asset.bitmapResolution,
+    y: y / asset.bitmapResolution
+  }
+}
+
 const importSprite = async (asset: ExportedScratchSprite) => {
   const costumes = await Promise.all(
-    asset.costumes.map((costume) =>
-      Costume.create(costume.name, scratchToSpxFile(costume), {
+    asset.costumes.map(async (costume) => {
+      const pivot = await getPivotFromScratchCostume(costume)
+      return Costume.create(costume.name, scratchToSpxFile(costume), {
         bitmapResolution: costume.bitmapResolution,
-        pivot: {
-          x: costume.rotationCenterX / costume.bitmapResolution,
-          y: costume.rotationCenterY / costume.bitmapResolution
-        }
+        pivot
       })
-    )
+    })
   )
   const sprite = Sprite.create(asset.name)
   for (const costume of costumes) {
@@ -161,8 +179,10 @@ const importSound = async (asset: ExportedScratchSound) => {
 
 const importBackdrop = async (asset: ExportedScratchCostume) => {
   const file = scratchToSpxFile(asset)
+  const pivot = await getPivotFromScratchCostume(asset)
   const backdrop = await Backdrop.create(asset.name, file, {
-    bitmapResolution: asset.bitmapResolution
+    bitmapResolution: asset.bitmapResolution,
+    pivot
   })
   props.project.stage.addBackdrop(backdrop)
   return backdrop
diff --git a/spx-gui/src/components/editor/common/pivot-marker.ts b/spx-gui/src/components/editor/common/pivot-marker.ts
new file mode 100644
index 0000000000..83b0928043
--- /dev/null
+++ b/spx-gui/src/components/editor/common/pivot-marker.ts
@@ -0,0 +1,96 @@
+import type { CircleConfig } from 'konva/lib/shapes/Circle'
+import type { GroupConfig } from 'konva/lib/Group'
+import type { RectConfig } from 'konva/lib/shapes/Rect'
+
+type PivotMarkerOptions = {
+  size?: number
+  interactive: boolean
+}
+
+export type PivotMarkerShapeConfig =
+  | {
+      kind: 'circle'
+      config: CircleConfig
+    }
+  | {
+      kind: 'rect'
+      config: RectConfig
+    }
+
+function getPrimaryColor(interactive: boolean) {
+  return interactive ? '#36C2CF' : '#CBD2D8'
+}
+
+function getOpacity(interactive: boolean) {
+  return interactive ? 1 : 0.9
+}
+
+const defaultPivotMarkerSize = 16
+const pivotMarkerViewBoxSize = 24
+
+export function getPivotMarkerConfigs({ size = defaultPivotMarkerSize, interactive }: PivotMarkerOptions): {
+  drawingGroup: GroupConfig
+  shapes: PivotMarkerShapeConfig[]
+} {
+  const scale = size / pivotMarkerViewBoxSize
+  const primaryColor = getPrimaryColor(interactive)
+  return {
+    drawingGroup: {
+      x: (-pivotMarkerViewBoxSize / 2) * scale,
+      y: (-pivotMarkerViewBoxSize / 2) * scale,
+      scale: {
+        x: scale,
+        y: scale
+      },
+      opacity: getOpacity(interactive),
+      listening: interactive
+    },
+    shapes: [
+      // Interactive marker needs a solid hit area; visible pieces are too sparse for reliable dragging.
+      ...(interactive
+        ? [
+            {
+              kind: 'circle' as const,
+              config: {
+                x: pivotMarkerViewBoxSize / 2,
+                y: pivotMarkerViewBoxSize / 2,
+                radius: pivotMarkerViewBoxSize / 2,
+                fill: 'rgba(0, 0, 0, 0)'
+              }
+            }
+          ]
+        : []),
+      {
+        kind: 'circle',
+        config: {
+          x: pivotMarkerViewBoxSize / 2,
+          y: pivotMarkerViewBoxSize / 2,
+          radius: 9,
+          fill: 'white'
+        }
+      },
+      ...[
+        { x: 0, y: 10, width: 4, height: 4, cornerRadius: 2, fill: 'white' },
+        { x: 20, y: 10, width: 4, height: 4, cornerRadius: 2, fill: 'white' },
+        { x: 10, y: 0, width: 4, height: 4, cornerRadius: 2, fill: 'white' },
+        { x: 10, y: 20, width: 4, height: 4, cornerRadius: 2, fill: 'white' },
+        { x: 1, y: 11, width: 4, height: 2, cornerRadius: 1, fill: primaryColor },
+        { x: 19, y: 11, width: 4, height: 2, cornerRadius: 1, fill: primaryColor },
+        { x: 11, y: 1, width: 2, height: 4, cornerRadius: 1, fill: primaryColor },
+        { x: 11, y: 19, width: 2, height: 4, cornerRadius: 1, fill: primaryColor },
+        { x: 9, y: 11, width: 6, height: 2, cornerRadius: 1, fill: primaryColor },
+        { x: 11, y: 9, width: 2, height: 6, cornerRadius: 1, fill: primaryColor }
+      ].map((config) => ({ kind: 'rect' as const, config })),
+      {
+        kind: 'circle',
+        config: {
+          x: pivotMarkerViewBoxSize / 2,
+          y: pivotMarkerViewBoxSize / 2,
+          radius: 7,
+          stroke: primaryColor,
+          strokeWidth: 2
+        }
+      }
+    ]
+  }
+}
diff --git a/spx-gui/src/components/editor/common/viewer/NodeTransformer.vue b/spx-gui/src/components/editor/common/viewer/NodeTransformer.vue
index 55c5abac93..b66774cab2 100644
--- a/spx-gui/src/components/editor/common/viewer/NodeTransformer.vue
+++ b/spx-gui/src/components/editor/common/viewer/NodeTransformer.vue
@@ -4,13 +4,13 @@
 
 <script setup lang="ts">
 import { computed, nextTick, ref, watchEffect } from 'vue'
+import { debounce } from 'lodash'
 import type Konva from 'konva'
 import type { Node } from 'konva/lib/Node'
 import { Sprite } from '@/models/spx/sprite'
 import type { Widget } from '@/models/spx/widget'
 import type { CustomTransformer, CustomTransformerConfig } from './custom-transformer'
 import { getNodeId } from './common'
-import { debounce } from 'lodash'
 
 const props = defineProps<{
   target: Sprite | Widget | null
diff --git a/spx-gui/src/components/editor/common/viewer/SpriteNode.vue b/spx-gui/src/components/editor/common/viewer/SpriteNode.vue
index 1a3b1c3dc3..dd57af11b6 100644
--- a/spx-gui/src/components/editor/common/viewer/SpriteNode.vue
+++ b/spx-gui/src/components/editor/common/viewer/SpriteNode.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref, watchEffect } from 'vue'
+import { computed, onMounted, ref, watch, watchEffect } from 'vue'
 import type { KonvaEventObject } from 'konva/lib/Node'
 import type { Image, ImageConfig } from 'konva/lib/shapes/Image'
+import type { Group, GroupConfig } from 'konva/lib/Group'
 import type { SpxProject } from '@/models/spx/project'
 import { LeftRight, RotationStyle, headingToLeftRight, leftRightToHeading } from '@/models/spx/sprite'
 import type { Size } from '@/models/common'
@@ -10,15 +11,22 @@ import { useFileImg } from '@/utils/file'
 import { cancelBubble, getNodeId } from './common'
 import type { SpriteLocalConfig } from './quick-config/utils'
 import type { TransformOp } from './custom-transformer'
+import { getPivotMarkerConfigs } from '../pivot-marker'
 import type Konva from 'konva'
 
-const props = defineProps<{
-  localConfig: SpriteLocalConfig
-  selected: boolean
-  project: SpxProject
-  mapSize: Size
-  nodeReadyMap: Map<string, boolean>
-}>()
+const props = withDefaults(
+  defineProps<{
+    localConfig: SpriteLocalConfig
+    selected: boolean
+    project: SpxProject
+    mapSize: Size
+    nodeReadyMap: Map<string, boolean>
+    mapScale?: number
+  }>(),
+  {
+    mapScale: 1
+  }
+)
 
 export type CameraScrollNotifyFn = (
   /** Delta of camera position (in game) change */
@@ -73,6 +81,42 @@ onMounted(() => {
   }
 })
 
+// Keep the selected-only pivot marker inside SpriteNode instead of NodeTransformer. SpriteNode already
+// maps the sprite pivot to the Konva node origin with offsetX/offsetY, so the marker can simply use
+// the same local position as the sprite node. This is a small, low-risk patch compared with teaching
+// CustomTransformer to support custom transform origins via Konva internal method overrides.
+const pivotMarkerRef = ref<KonvaNodeInstance<Group>>()
+
+// Keep the selected sprite's pivot marker above all sprite nodes.
+watch(
+  [() => props.selected, () => props.project.zorder.length, pivotMarkerRef],
+  () => {
+    if (!props.selected) return
+    const pivotMarkerNode = pivotMarkerRef.value?.getNode()
+    if (pivotMarkerNode == null || pivotMarkerNode.getParent() == null) return
+    const zIndex = props.project.zorder.length
+    if (pivotMarkerNode.zIndex() === zIndex) return
+    pivotMarkerNode.zIndex(zIndex)
+  },
+  { immediate: true }
+)
+
+/**
+ * Konva Transformer mutates the live node position directly and does not support using
+ * a custom sprite pivot as the transform origin. Its scale/rotate interaction is based on
+ * the node's geometric center rather than our sprite pivot semantics.
+ *
+ * To keep scale/rotate behavior aligned with quick config, we immediately restore the
+ * node to the pivot position captured at transform start instead of waiting for a later
+ * reactive re-render.
+ */
+function keepNodePivotPosition(node: Konva.Node) {
+  const snapshot = snapshotRef.value
+  if (snapshot == null) return
+  node.x(props.mapSize.width / 2 + snapshot.x)
+  node.y(props.mapSize.height / 2 - snapshot.y)
+}
+
 function updateLocalConfigByShape(node: Konva.Node) {
   if (!props.selected) return
   const localConfig = props.localConfig
@@ -87,6 +131,7 @@ function updateLocalConfigByShape(node: Konva.Node) {
     localConfig.setHeading(heading)
     emit('updateTransformOp', 'rotate')
   }
+  keepNodePivotPosition(node)
   // 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) {
@@ -96,6 +141,7 @@ function updateLocalConfigByShape(node: Konva.Node) {
 }
 
 function syncLocalConfigByShape(node: Konva.Node) {
+  keepNodePivotPosition(node)
   const localConfig = props.localConfig
   localConfig.setSize(toSize(node))
   localConfig.setHeading(toHeading(node))
@@ -181,6 +227,20 @@ const config = computed<ImageConfig>(() => {
   return config
 })
 
+// In map mode SpriteNode is rendered inside the scaled map layer, so the marker would be
+// zoomed together with the map. Apply the inverse map scale to keep its screen size fixed.
+const pivotMarkerGroupConfig = computed<GroupConfig>(() => {
+  const { x, y } = props.localConfig
+  const scale = 1 / props.mapScale
+  return {
+    x: props.mapSize.width / 2 + x,
+    y: props.mapSize.height / 2 - y,
+    scale: { x: scale, y: scale },
+    listening: false
+  }
+})
+const pivotMarkerConfigs = getPivotMarkerConfigs({ interactive: false })
+
 function toPosition(node: Konva.Node) {
   const { mapSize } = props
   const x = round(node.x() - mapSize.width / 2)
@@ -196,8 +256,7 @@ function toHeading(node: Konva.Node) {
   return heading
 }
 function toSize(node: Konva.Node) {
-  const size = round(Math.abs(node.scaleX()) * bitmapResolution.value, 2)
-  return size
+  return round(Math.abs(node.scaleX()) * bitmapResolution.value, 2)
 }
 
 function handleClick() {
@@ -216,4 +275,12 @@ function handleClick() {
     @transformend="handleTransformEnd"
     @click="handleClick"
   />
+  <v-group v-if="selected" ref="pivotMarkerRef" :config="pivotMarkerGroupConfig">
+    <v-group :config="pivotMarkerConfigs.drawingGroup">
+      <template v-for="(shape, idx) in pivotMarkerConfigs.shapes" :key="`sprite-pivot-marker-${idx}`">
+        <v-circle v-if="shape.kind === 'circle'" :config="shape.config" />
+        <v-rect v-else :config="shape.config" />
+      </template>
+    </v-group>
+  </v-group>
 </template>
diff --git a/spx-gui/src/components/editor/common/viewer/common.ts b/spx-gui/src/components/editor/common/viewer/common.ts
index 161604f91c..d9fbdbb93f 100644
--- a/spx-gui/src/components/editor/common/viewer/common.ts
+++ b/spx-gui/src/components/editor/common/viewer/common.ts
@@ -1,6 +1,7 @@
+import type { KonvaEventObject } from 'konva/lib/Node'
+
 import { Sprite } from '@/models/spx/sprite'
 import type { Widget } from '@/models/spx/widget'
-import type { KonvaEventObject } from 'konva/lib/Node'
 
 import { SpriteLocalConfig, WidgetLocalConfig } from './quick-config/utils'
 
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 c7b46428b7..fe805c8e71 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
@@ -22,7 +22,7 @@ export type TransformOp = 'rotate' | 'scale' | 'move' | 'flip'
 
 export type CustomTransformerConfig = {
   rotationStyle?: 'none' | 'normal' | 'left-right'
-} & Pick<TransformerConfig, 'centeredScaling'>
+} & Pick<TransformerConfig, 'centeredScaling' | 'keepRatio'>
 
 class FlipButton extends Konva.Group {
   orientation: 'left' | 'right'
diff --git a/spx-gui/src/components/editor/map-editor/MapBasicConfig.vue b/spx-gui/src/components/editor/map-editor/MapBasicConfig.vue
index 6787053755..477ed1c1e4 100644
--- a/spx-gui/src/components/editor/map-editor/MapBasicConfig.vue
+++ b/spx-gui/src/components/editor/map-editor/MapBasicConfig.vue
@@ -21,7 +21,7 @@ defineProps<{
       <MapPhysicsInput :project="project" />
     </div>
     <div v-if="project.stage.physics.enabled" class="flex items-center">
-      <div class="mr-4 whitespace-nowrap">{{ $t({ en: 'Layer Sorting', zh: '层级排序' }) }}</div>
+      <div class="mr-4 whitespace-nowrap">{{ $t({ en: 'Layer sorting', zh: '层级排序' }) }}</div>
       <MapLayerSortInput :project="project" />
     </div>
   </div>
diff --git a/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue b/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue
index 4e64f96233..b8d6194165 100644
--- a/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue
+++ b/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue
@@ -10,7 +10,7 @@ import SpriteDirection from '@/components/editor/common/config/sprite/SpriteDire
 import SpriteVisible from '@/components/editor/common/config/sprite/SpriteVisible.vue'
 import SpritePhysics from '@/components/editor/common/config/sprite/SpritePhysics.vue'
 import { UIButton, UIIcon, UITooltip, useModal } from '@/components/ui'
-import SpriteCollisionEditorModal from '../sprite/SpriteCollisionEditorModal.vue'
+import PivotCollisionEditorModal from '../sprite/PivotCollisionEditorModal.vue'
 import { useRenameSprite } from '@/components/asset'
 import AssetName from '@/components/asset/AssetName.vue'
 
@@ -29,18 +29,33 @@ const handleNameEdit = useMessageHandle(() => renameSprite(props.sprite), {
   zh: '重命名精灵失败'
 }).fn
 
-const isCollisionSettingsEnabled = computed(() => {
+const isCollisionEditingEnabled = computed(() => {
   if (!props.project.stage.physics.enabled) return false
   if (props.sprite.physicsMode === PhysicsMode.NoPhysics) return false
   return true
 })
 
-const editSpriteCollision = useModal(SpriteCollisionEditorModal)
-const handleEditCollision = useMessageHandle(
-  () => editSpriteCollision({ sprite: props.sprite, project: props.project }),
+const editPivotCollision = useModal(PivotCollisionEditorModal)
+const handleEditPivotCollision = useMessageHandle(
+  () =>
+    editPivotCollision({
+      sprite: props.sprite,
+      collisionEditingEnabled: true
+    }),
   {
-    en: 'Failed to update sprite collision',
-    zh: '更新精灵碰撞失败'
+    en: 'Failed to update sprite pivot or collision',
+    zh: '更新精灵参考点或碰撞体失败'
+  }
+).fn
+const handleEditPivot = useMessageHandle(
+  () =>
+    editPivotCollision({
+      sprite: props.sprite,
+      collisionEditingEnabled: false
+    }),
+  {
+    en: 'Failed to update sprite pivot',
+    zh: '更新精灵参考点失败'
   }
 ).fn
 </script>
@@ -87,9 +102,41 @@ const handleEditCollision = useMessageHandle(
       <div class="mr-4 whitespace-nowrap">{{ $t({ en: 'Physics', zh: '物理特性' }) }}</div>
       <SpritePhysics :sprite="sprite" :project="project" />
     </div>
-    <div v-if="isCollisionSettingsEnabled" class="flex items-center">
-      <div class="mr-4 whitespace-nowrap">{{ $t({ en: 'Collision settings', zh: '碰撞设置' }) }}</div>
-      <UIButton shape="square" icon="setting" type="white" @click="handleEditCollision"></UIButton>
+    <div class="flex items-center">
+      <div class="mr-4 whitespace-nowrap">
+        {{
+          $t({
+            en: `Pivot${isCollisionEditingEnabled ? ' and collision' : ''}`,
+            zh: `参考点${isCollisionEditingEnabled ? '和碰撞体' : ''}`
+          })
+        }}
+      </div>
+      <template v-if="isCollisionEditingEnabled">
+        <UITooltip>
+          {{
+            $t({
+              en: 'Set the pivot point of the sprite and adjust the collision area',
+              zh: '设置精灵的坐标基准，并调整可发生碰撞的范围'
+            })
+          }}
+          <template #trigger>
+            <UIButton shape="square" icon="setting" type="white" @click="handleEditPivotCollision"></UIButton>
+          </template>
+        </UITooltip>
+      </template>
+      <template v-else>
+        <UITooltip>
+          {{
+            $t({
+              en: 'Set the pivot point of the sprite',
+              zh: '设置精灵的坐标基准'
+            })
+          }}
+          <template #trigger>
+            <UIButton shape="square" icon="setting" type="white" @click="handleEditPivot"></UIButton>
+          </template>
+        </UITooltip>
+      </template>
     </div>
   </div>
 </template>
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 ea450f03be..370ced744d 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
@@ -250,11 +250,16 @@ watchEffect(() => {
   })
 })
 
-const konvaBackdropConfig = computed(() => {
+const konvaBackdropRectConfig = computed(() => {
   if (backdropImg.value == null || stageConfig.value == null) {
     return null
   }
 
+  const backdrop = props.project.stage.defaultBackdrop
+  if (backdrop == null) {
+    return null
+  }
+
   const stageWidth = mapSize.value.width
   const stageHeight = mapSize.value.height
   const imageWidth = backdropImg.value.width
@@ -281,18 +286,28 @@ const konvaBackdropConfig = computed(() => {
       fillPatternScaleY: scale
     }
   } else if (props.project.stage.mapMode === MapMode.repeat) {
-    const offsetX = (stageWidth - imageWidth) / 2
-    const offsetY = (stageHeight - imageHeight) / 2
-
+    const patternScale = 1 / backdrop.bitmapResolution
     return {
       fillPatternImage: backdropImg.value,
       width: stageWidth,
       height: stageHeight,
       fillPatternRepeat: 'repeat',
-      fillPatternX: offsetX,
-      fillPatternY: offsetY,
-      fillPatternScaleX: 1,
-      fillPatternScaleY: 1
+      fillPatternX: 0,
+      fillPatternY: 0,
+      fillPatternScaleX: patternScale,
+      fillPatternScaleY: patternScale
+    }
+  } else if (props.project.stage.mapMode === MapMode.actualSize) {
+    const patternScale = 1 / backdrop.bitmapResolution
+    return {
+      fillPatternImage: backdropImg.value,
+      width: stageWidth,
+      height: stageHeight,
+      fillPatternRepeat: 'no-repeat',
+      fillPatternX: stageWidth / 2 - backdrop.pivot.x,
+      fillPatternY: stageHeight / 2 - backdrop.pivot.y,
+      fillPatternScaleX: patternScale,
+      fillPatternScaleY: patternScale
     }
   }
   console.warn('Unsupported map mode:', props.project.stage.mapMode)
@@ -532,7 +547,7 @@ const handleWheel = (e: KonvaEventObject<WheelEvent>) => {
   >
     <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>
+        <v-rect v-if="konvaBackdropRectConfig" :config="konvaBackdropRectConfig"></v-rect>
         <DecoratorNode
           v-for="(decorator, idx) in props.project.tilemap?.decorators ?? []"
           :key="idx"
@@ -548,6 +563,7 @@ const handleWheel = (e: KonvaEventObject<WheelEvent>) => {
             :selected="selectedSprite?.id === localConfig.id"
             :project="props.project"
             :map-size="mapSize"
+            :map-scale="mapScale"
             :node-ready-map="nodeReadyMap"
             @drag-move="handleSpriteDragMove"
             @drag-end="handleSpriteDragEnd"
@@ -567,7 +583,7 @@ const handleWheel = (e: KonvaEventObject<WheelEvent>) => {
     </v-stage>
     <div v-if="!loading && localConfigRef != null" class="absolute left-0 top-0">
       <QuickConfigWrapper ref="quickConfigRef">
-        <SpriteQuickConfig v-if="localConfigRef != null" :local-config="localConfigRef" :project="project" />
+        <SpriteQuickConfig :local-config="localConfigRef" :project="project" />
       </QuickConfigWrapper>
     </div>
 
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 d1740667ca..e153636079 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
@@ -11,7 +11,7 @@
   >
     <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>
+        <v-rect v-if="konvaBackdropRectConfig" :config="konvaBackdropRectConfig"></v-rect>
         <DecoratorNode
           v-for="(decorator, idx) in editorCtx.project.tilemap?.decorators ?? []"
           :key="idx"
@@ -299,11 +299,16 @@ watchEffect(() => {
   })
 })
 
-const konvaBackdropConfig = computed(() => {
+const konvaBackdropRectConfig = computed(() => {
   if (backdropImg.value == null || stageConfig.value == null) {
     return null
   }
 
+  const backdrop = editorCtx.project.stage.defaultBackdrop
+  if (backdrop == null) {
+    return null
+  }
+
   const stageWidth = mapSize.value.width
   const stageHeight = mapSize.value.height
   const imageWidth = backdropImg.value.width
@@ -330,18 +335,28 @@ const konvaBackdropConfig = computed(() => {
       fillPatternScaleY: scale
     }
   } else if (editorCtx.project.stage.mapMode === MapMode.repeat) {
-    const offsetX = (stageWidth - imageWidth) / 2
-    const offsetY = (stageHeight - imageHeight) / 2
-
+    const patternScale = 1 / backdrop.bitmapResolution
     return {
       fillPatternImage: backdropImg.value,
       width: stageWidth,
       height: stageHeight,
       fillPatternRepeat: 'repeat',
-      fillPatternX: offsetX,
-      fillPatternY: offsetY,
-      fillPatternScaleX: 1,
-      fillPatternScaleY: 1
+      fillPatternX: 0,
+      fillPatternY: 0,
+      fillPatternScaleX: patternScale,
+      fillPatternScaleY: patternScale
+    }
+  } else if (editorCtx.project.stage.mapMode === MapMode.actualSize) {
+    const patternScale = 1 / backdrop.bitmapResolution
+    return {
+      fillPatternImage: backdropImg.value,
+      width: stageWidth,
+      height: stageHeight,
+      fillPatternRepeat: 'no-repeat',
+      fillPatternX: stageWidth / 2 - backdrop.pivot.x,
+      fillPatternY: stageHeight / 2 - backdrop.pivot.y,
+      fillPatternScaleX: patternScale,
+      fillPatternScaleY: patternScale
     }
   }
   console.warn('Unsupported map mode:', editorCtx.project.stage.mapMode)
diff --git a/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue b/spx-gui/src/components/editor/sprite/PivotCollisionEditor.vue
similarity index 71%
rename from spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue
rename to spx-gui/src/components/editor/sprite/PivotCollisionEditor.vue
index 600fb0bec8..0337541686 100644
--- a/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue
+++ b/spx-gui/src/components/editor/sprite/PivotCollisionEditor.vue
@@ -7,7 +7,6 @@ import type { KonvaEventObject } from 'konva/lib/Node'
 import type { GroupConfig } from 'konva/lib/Group'
 import type { LayerConfig } from 'konva/lib/Layer'
 import type { Rect, RectConfig } from 'konva/lib/shapes/Rect'
-import type { CircleConfig } from 'konva/lib/shapes/Circle'
 import { useAsyncComputed } from '@/utils/utils'
 import { useI18n } from '@/utils/i18n'
 import { useFileImg } from '@/utils/file'
@@ -17,15 +16,15 @@ import { toNativeFile } from '@/models/common/file'
 import { CollisionShapeType, type Sprite } from '@/models/spx/sprite'
 import type { Pivot as CostumePivot } from '@/models/spx/costume'
 import type { CustomTransformer, CustomTransformerConfig } from '../common/viewer/custom-transformer'
+import { getPivotMarkerConfigs } from '../common/pivot-marker'
 import CheckerboardBackground from './CheckerboardBackground.vue'
 import { UIButton } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
-import type { SpxProject } from '@/models/spx/project'
 import { useEditorCtx } from '../EditorContextProvider.vue'
 
 const props = defineProps<{
-  project: SpxProject
   sprite: Sprite
+  collisionEditingEnabled: boolean
 }>()
 
 const emits = defineEmits<{
@@ -160,23 +159,12 @@ const pivotGroupConfig = computed(() => {
   } satisfies GroupConfig
 })
 
+const pivotMarkerConfigs = getPivotMarkerConfigs({ interactive: true })
+
 function handlePivotCircleGroupDragEnd(e: KonvaEventObject<unknown>) {
   pivotPos.value = { x: e.target.x(), y: e.target.y() }
 }
 
-const pivotCircleConfig = computed(
-  () =>
-    ({
-      radius: 8,
-      fill: 'rgba(10, 165, 190, 1)',
-      stroke: '#fff',
-      strokeWidth: 2,
-      shadowColor: 'rgba(51, 51, 51, 0.2)',
-      shadowBlur: 4,
-      shadowOffset: { x: 0, y: 2 }
-    }) satisfies CircleConfig
-)
-
 const pivotTitleConfig = computed(
   () =>
     ({
@@ -259,33 +247,73 @@ function handleColliderRectTransformEnd(e: KonvaEventObject<unknown>) {
   node.scaleY(1)
 }
 
-const { fn: handleConfirm } = useMessageHandle(
+const { fn: savePivotAndCollision } = useMessageHandle(
   async () => {
     const sprite = props.sprite
     const defaultCostume = props.sprite.defaultCostume
     if (defaultCostume == null) throw new Error('Sprite has no default costume')
 
-    await editorCtx.state.history.doAction({ name: { en: 'Update sprite collision', zh: '更新精灵碰撞' } }, () => {
-      sprite.applyCostumesPivotChange({
+    await editorCtx.state.history.doAction(
+      { name: { en: 'Update sprite pivot and collision', zh: '更新精灵参考点和碰撞体' } },
+      () => {
+        sprite.applyCostumesPivotChange({
+          x: pivotPos.value.x - defaultCostume.pivot.x,
+          y: pivotPos.value.y - defaultCostume.pivot.y
+        })
+        sprite.setCollisionPivot({
+          x: colliderPos.value.x + colliderSize.value.width / 2 - pivotPos.value.x,
+          y: -(colliderPos.value.y + colliderSize.value.height / 2 - pivotPos.value.y)
+        })
+        sprite.setCollisionShapeRect(colliderSize.value.width, colliderSize.value.height)
+      }
+    )
+    dirty.value = false
+    emits('updateSuccess')
+  },
+  {
+    en: 'Failed to update sprite pivot or collision',
+    zh: '更新精灵参考点或碰撞体失败'
+  },
+  {
+    en: 'Save sprite pivot and collision successfully',
+    zh: '更新精灵参考点和碰撞体成功'
+  }
+)
+
+const { fn: savePivot } = useMessageHandle(
+  async () => {
+    const sprite = props.sprite
+    const defaultCostume = props.sprite.defaultCostume
+    if (defaultCostume == null) throw new Error('Sprite has no default costume')
+
+    await editorCtx.state.history.doAction({ name: { en: 'Update sprite pivot', zh: '更新精灵参考点' } }, () => {
+      const dPivot = {
         x: pivotPos.value.x - defaultCostume.pivot.x,
         y: pivotPos.value.y - defaultCostume.pivot.y
-      })
-      sprite.setCollisionPivot({
-        x: colliderPos.value.x + colliderSize.value.width / 2 - pivotPos.value.x,
-        y: -(colliderPos.value.y + colliderSize.value.height / 2 - pivotPos.value.y)
-      })
-      sprite.setCollisionShapeRect(colliderSize.value.width, colliderSize.value.height)
+      }
+      sprite.applyCostumesPivotChange(dPivot)
+
+      // Even when collision editing is hidden, keep any persisted collision pivot aligned
+      // with the artwork after the sprite pivot moves. This intentionally includes Auto
+      // shapes as well, since Auto still carries a stored collisionPivot even though its
+      // bounds are derived from costume content.
+      if (sprite.collisionShapeType !== CollisionShapeType.None) {
+        sprite.setCollisionPivot({
+          x: sprite.collisionPivot.x - dPivot.x,
+          y: sprite.collisionPivot.y + dPivot.y
+        })
+      }
     })
     dirty.value = false
     emits('updateSuccess')
   },
   {
-    en: 'Failed to update sprite collision',
-    zh: '更新精灵碰撞失败'
+    en: 'Failed to update sprite pivot',
+    zh: '更新精灵参考点失败'
   },
   {
-    en: 'Save sprite collision successfully',
-    zh: '更新精灵碰撞成功'
+    en: 'Save sprite pivot successfully',
+    zh: '更新精灵参考点成功'
   }
 )
 </script>
@@ -297,28 +325,51 @@ const { fn: handleConfirm } = useMessageHandle(
       <v-stage v-if="stageConfig != null" :config="stageConfig">
         <v-layer v-if="layerConfig != null" :config="layerConfig">
           <v-image v-if="imgConfig != null" :config="imgConfig" />
-          <v-text ref="colliderTitle" :config="colliderTitleConfig" />
-          <v-rect
-            ref="colliderRect"
-            :config="colliderRectConfig"
-            @dragmove="syncColliderTitlePos"
-            @dragend="handleColliderRectDragEnd"
-            @transform="syncColliderTitlePos"
-            @transformend="handleColliderRectTransformEnd"
-          />
-          <v-custom-transformer ref="colliderRectTransformer" :config="colliderRectTransformerConfig" />
+          <template v-if="collisionEditingEnabled">
+            <v-text ref="colliderTitle" :config="colliderTitleConfig" />
+            <v-rect
+              ref="colliderRect"
+              :config="colliderRectConfig"
+              @dragmove="syncColliderTitlePos"
+              @dragend="handleColliderRectDragEnd"
+              @transform="syncColliderTitlePos"
+              @transformend="handleColliderRectTransformEnd"
+            />
+            <v-custom-transformer ref="colliderRectTransformer" :config="colliderRectTransformerConfig" />
+          </template>
           <v-group :config="pivotGroupConfig" @dragend="handlePivotCircleGroupDragEnd">
+            <v-group :config="pivotMarkerConfigs.drawingGroup">
+              <template v-for="(shape, idx) in pivotMarkerConfigs.shapes" :key="`pivot-marker-${idx}`">
+                <v-circle v-if="shape.kind === 'circle'" :config="shape.config" />
+                <v-rect v-else :config="shape.config" />
+              </template>
+            </v-group>
             <v-text :config="pivotTitleConfig" />
-            <v-circle :config="pivotCircleConfig" />
           </v-group>
         </v-layer>
       </v-stage>
     </div>
     <UIButton
-      v-radar="{ name: 'Save button', desc: 'Click to save sprite collision' }"
+      v-if="collisionEditingEnabled"
+      v-radar="{
+        name: 'Save button',
+        desc: 'Click to save sprite pivot and collision'
+      }"
+      type="green"
+      :disabled="!dirty"
+      @click="savePivotAndCollision"
+    >
+      {{ $t({ en: 'Save', zh: '保存' }) }}
+    </UIButton>
+    <UIButton
+      v-else
+      v-radar="{
+        name: 'Save button',
+        desc: 'Click to save sprite pivot'
+      }"
       type="green"
       :disabled="!dirty"
-      @click="handleConfirm"
+      @click="savePivot"
     >
       {{ $t({ en: 'Save', zh: '保存' }) }}
     </UIButton>
diff --git a/spx-gui/src/components/editor/sprite/PivotCollisionEditorModal.vue b/spx-gui/src/components/editor/sprite/PivotCollisionEditorModal.vue
new file mode 100644
index 0000000000..3f05c12ca0
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/PivotCollisionEditorModal.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { Sprite } from '@/models/spx/sprite'
+import { UIFormModal } from '@/components/ui'
+import PivotCollisionEditor from './PivotCollisionEditor.vue'
+
+defineProps<{
+  sprite: Sprite
+  collisionEditingEnabled: boolean
+  visible: boolean
+}>()
+
+const emit = defineEmits<{
+  cancelled: []
+  resolved: []
+}>()
+</script>
+
+<template>
+  <UIFormModal
+    :radar="{
+      name: `Sprite pivot${collisionEditingEnabled ? ' and collision ' : ' '}modal`,
+      desc: `Modal for editing sprite pivot${collisionEditingEnabled ? ' and collision ' : ' '}settings.`
+    }"
+    style="width: 712px"
+    :title="
+      $t({
+        en: `Sprite pivot${collisionEditingEnabled ? ' and collision ' : ' '}editor`,
+        zh: `精灵参考点${collisionEditingEnabled ? '和碰撞体' : ''}编辑器`
+      })
+    "
+    :visible="visible"
+    @update:visible="emit('cancelled')"
+  >
+    <PivotCollisionEditor
+      style="height: 456px"
+      :sprite="sprite"
+      :collision-editing-enabled="collisionEditingEnabled"
+      @update-success="emit('resolved')"
+    />
+  </UIFormModal>
+</template>
diff --git a/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue b/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue
deleted file mode 100644
index a6178289aa..0000000000
--- a/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import type { Sprite } from '@/models/spx/sprite'
-
-import { UIFormModal } from '@/components/ui'
-
-import SpriteCollisionEditor from './SpriteCollisionEditor.vue'
-import type { SpxProject } from '@/models/spx/project'
-
-defineProps<{
-  sprite: Sprite
-  project: SpxProject
-  visible: boolean
-}>()
-
-const emit = defineEmits<{
-  cancelled: []
-  resolved: []
-}>()
-</script>
-
-<template>
-  <UIFormModal
-    :radar="{
-      name: 'Sprite Collision Modal',
-      desc: 'Sprite collision editor modal, which includes collision, pivot editing, etc.'
-    }"
-    style="width: 712px"
-    :title="$t({ en: 'Sprite Collision Editor', zh: '精灵碰撞编辑器' })"
-    :visible="visible"
-    @update:visible="emit('cancelled')"
-  >
-    <SpriteCollisionEditor
-      style="height: 456px"
-      :sprite="sprite"
-      :project="project"
-      @update-success="emit('resolved')"
-    />
-  </UIFormModal>
-</template>
diff --git a/spx-gui/src/components/editor/stage/backdrop/BackdropModeSelector.vue b/spx-gui/src/components/editor/stage/backdrop/BackdropModeSelector.vue
index b7284c0075..efa3c340d0 100644
--- a/spx-gui/src/components/editor/stage/backdrop/BackdropModeSelector.vue
+++ b/spx-gui/src/components/editor/stage/backdrop/BackdropModeSelector.vue
@@ -1,46 +1,60 @@
 <template>
   <div class="flex items-center gap-xl text-grey-800">
-    <div class="flex items-center gap-1">
-      <div>
-        {{ $t({ en: 'Backdrop Mode', zh: '背景模式' }) }}
-      </div>
-      <UITooltip>
-        <template #default>
-          <pre>{{
-            $t({
-              en: `•Tile Mode: The image will be tiled (repeated) to fill the stage
-•Scale Mode: The image will be proportionally scaled to ensure it covers the stage; some parts of the image may be cropped
-`,
-              zh: `•平铺模式：图片会平铺（重复）以填满舞台
-•缩放模式：图片会被按比例缩放，以确保刚好覆盖舞台；图片的某些部分可能会被裁剪
-`
-            })
-          }}</pre>
-        </template>
-        <template #trigger>
-          <UIIcon type="question" />
-        </template>
-      </UITooltip>
+    <div>
+      {{ $t({ en: 'Backdrop Mode', zh: '背景模式' }) }}
     </div>
     <UIButtonGroup
       v-radar="{ name: 'Backdrop mode selector', desc: 'Selector to choose backdrop mode for the stage' }"
-      type="text"
+      type="icon"
       :value="editorCtx.project.stage.mapMode"
       @update:value="(v) => handleUpdateMapMode(v as MapMode)"
     >
-      <UIButtonGroupItem value="repeat">
-        {{ $t({ en: 'Tile', zh: '平铺' }) }}
-      </UIButtonGroupItem>
-      <UIButtonGroupItem value="fillRatio">
-        {{ $t({ en: 'Scale', zh: '缩放' }) }}
-      </UIButtonGroupItem>
+      <UITooltip>
+        {{
+          $t({
+            en: 'The image will be tiled (repeated) to fill the stage',
+            zh: '图片会平铺（重复）以填满舞台'
+          })
+        }}
+        <template #trigger>
+          <UIButtonGroupItem :value="MapMode.repeat" :aria-label="$t({ en: 'Tile', zh: '平铺' })">
+            <UIIcon type="backdropTile" />
+          </UIButtonGroupItem>
+        </template>
+      </UITooltip>
+      <UITooltip>
+        {{
+          $t({
+            en: 'The image will be proportionally scaled to cover the stage; some parts may be cropped',
+            zh: '图片会被按比例缩放，以覆盖舞台；图片的某些部分可能会被裁剪'
+          })
+        }}
+        <template #trigger>
+          <UIButtonGroupItem :value="MapMode.fillRatio" :aria-label="$t({ en: 'Scale', zh: '缩放' })">
+            <UIIcon type="backdropScale" />
+          </UIButtonGroupItem>
+        </template>
+      </UITooltip>
+      <UITooltip>
+        {{
+          $t({
+            en: 'The image will be aligned to the stage center without scaling or tiling',
+            zh: '图片会以原始尺寸显示，并与舞台中心对齐，不缩放也不平铺'
+          })
+        }}
+        <template #trigger>
+          <UIButtonGroupItem :value="MapMode.actualSize" :aria-label="$t({ en: 'Original', zh: '原图' })">
+            <UIIcon type="backdropOriginal" />
+          </UIButtonGroupItem>
+        </template>
+      </UITooltip>
     </UIButtonGroup>
   </div>
 </template>
 <script setup lang="ts">
 import { UITooltip, UIButtonGroup, UIButtonGroupItem, UIIcon } from '@/components/ui'
 import { useEditorCtx } from '../../EditorContextProvider.vue'
-import type { MapMode } from '@/models/spx/stage'
+import { MapMode } from '@/models/spx/stage'
 
 const handleUpdateMapMode = (mode: MapMode) => {
   editorCtx.state.history.doAction({ name: { en: 'Update backdrop mode', zh: '修改背景模式' } }, () => {
diff --git a/spx-gui/src/components/ui/UIButtonGroupItem.vue b/spx-gui/src/components/ui/UIButtonGroupItem.vue
index efb6bd05f9..d0612205a3 100644
--- a/spx-gui/src/components/ui/UIButtonGroupItem.vue
+++ b/spx-gui/src/components/ui/UIButtonGroupItem.vue
@@ -1,5 +1,13 @@
 <template>
-  <div :class="rootClass" @click="handleClick">
+  <div
+    role="button"
+    :aria-pressed="isActive"
+    tabindex="0"
+    :class="rootClass"
+    @click="handleClick"
+    @keydown.enter.prevent="handleClick"
+    @keydown.space.prevent="handleClick"
+  >
     <slot></slot>
   </div>
 </template>
diff --git a/spx-gui/src/components/ui/icons/UIIcon.vue b/spx-gui/src/components/ui/icons/UIIcon.vue
index 520747e3e2..b0660b2d55 100644
--- a/spx-gui/src/components/ui/icons/UIIcon.vue
+++ b/spx-gui/src/components/ui/icons/UIIcon.vue
@@ -82,6 +82,9 @@ import camera from './camera.svg?raw'
 import zoomIn from './zoom-in.svg?raw'
 import zoomOut from './zoom-out.svg?raw'
 import zoomReset from './zoom-reset.svg?raw'
+import backdropTile from './backdrop-tile.svg?raw'
+import backdropScale from './backdrop-scale.svg?raw'
+import backdropOriginal from './backdrop-original.svg?raw'
 
 const typeIconMap = {
   file,
@@ -158,7 +161,10 @@ const typeIconMap = {
   camera,
   zoomIn,
   zoomOut,
-  zoomReset
+  zoomReset,
+  backdropTile,
+  backdropScale,
+  backdropOriginal
 }
 
 export type Type = keyof typeof typeIconMap
diff --git a/spx-gui/src/components/ui/icons/backdrop-original.svg b/spx-gui/src/components/ui/icons/backdrop-original.svg
new file mode 100644
index 0000000000..9155d89d50
--- /dev/null
+++ b/spx-gui/src/components/ui/icons/backdrop-original.svg
@@ -0,0 +1,3 @@
+<svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5459 1.41699C13.671 1.41723 14.5828 2.32896 14.583 3.4541V12.5459C14.5828 13.671 13.671 14.5828 12.5459 14.583H3.4541C2.32896 14.5828 1.41723 13.671 1.41699 12.5459V3.4541C1.41723 2.32896 2.32896 1.41723 3.4541 1.41699H12.5459ZM3.4541 2.58301C2.9733 2.58325 2.58325 2.9733 2.58301 3.4541V12.5459C2.58325 13.0267 2.9733 13.4168 3.4541 13.417H12.5459C13.0267 13.4168 13.4168 13.0267 13.417 12.5459V3.4541C13.4168 2.9733 13.0267 2.58325 12.5459 2.58301H3.4541ZM10.4443 4.08301C11.2572 4.08312 11.9169 4.74275 11.917 5.55566V10.4443C11.9169 11.2572 11.2572 11.9169 10.4443 11.917H5.55566C4.74275 11.9169 4.08312 11.2572 4.08301 10.4443V5.55566C4.08313 4.74275 4.74275 4.08313 5.55566 4.08301H10.4443ZM5.55566 5.25C5.38708 5.25012 5.25012 5.38708 5.25 5.55566V10.4443C5.25012 10.6129 5.38708 10.7499 5.55566 10.75H10.4443C10.6129 10.7499 10.7499 10.6129 10.75 10.4443V5.55566C10.7499 5.38708 10.6129 5.25012 10.4443 5.25H5.55566Z" fill="currentColor"/>
+</svg>
diff --git a/spx-gui/src/components/ui/icons/backdrop-scale.svg b/spx-gui/src/components/ui/icons/backdrop-scale.svg
new file mode 100644
index 0000000000..854e5f6bd5
--- /dev/null
+++ b/spx-gui/src/components/ui/icons/backdrop-scale.svg
@@ -0,0 +1,3 @@
+<svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.5 2.58301H4.66699C4.25289 2.58301 3.91717 2.91894 3.91699 3.33301V3.41699H12.083V3.33301C12.0828 2.91894 11.7471 2.58301 11.333 2.58301H10.5V1.41699H11.333C12.3914 1.41699 13.2498 2.27461 13.25 3.33301V3.41699H14C15.0584 3.41699 15.9168 4.27461 15.917 5.33301V6H14.75V5.33301C14.7498 4.91894 14.4141 4.58301 14 4.58301H13.25V11.417H14C14.4141 11.417 14.7498 11.0811 14.75 10.667V10H15.917V10.667C15.9168 11.7254 15.0584 12.583 14 12.583H13.25V12.667C13.2498 13.7254 12.3914 14.583 11.333 14.583H10.5V13.417H11.333C11.7471 13.417 12.0828 13.0811 12.083 12.667V12.583H3.91699V12.667C3.91717 13.0811 4.25289 13.417 4.66699 13.417H5.5V14.583H4.66699C3.60855 14.583 2.75018 13.7254 2.75 12.667V12.583H2C0.941563 12.583 0.0831835 11.7254 0.0830078 10.667V10H1.25V10.667C1.25018 11.0811 1.58589 11.417 2 11.417H2.75V4.58301H2C1.5859 4.58301 1.25018 4.91894 1.25 5.33301V6H0.0830078V5.33301C0.0831838 4.27461 0.941563 3.41699 2 3.41699H2.75V3.33301C2.75018 2.27461 3.60855 1.41699 4.66699 1.41699H5.5V2.58301ZM8.83301 14.583H7.16699V13.417H8.83301V14.583ZM3.91699 11.417H12.083V4.58301H3.91699V11.417ZM1.25 8.66699H0.0830078V7.33301H1.25V8.66699ZM15.917 8.66699H14.75V7.33301H15.917V8.66699ZM8.83301 2.58301H7.16699V1.41699H8.83301V2.58301Z" fill="currentColor"/>
+</svg>
diff --git a/spx-gui/src/components/ui/icons/backdrop-tile.svg b/spx-gui/src/components/ui/icons/backdrop-tile.svg
new file mode 100644
index 0000000000..24beefb67c
--- /dev/null
+++ b/spx-gui/src/components/ui/icons/backdrop-tile.svg
@@ -0,0 +1,3 @@
+<svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.667 1.41699C13.7253 1.41717 14.5828 2.27472 14.583 3.33301V12.667C14.5828 13.7253 13.7253 14.5828 12.667 14.583H3.33301C2.27472 14.5828 1.41717 13.7253 1.41699 12.667V3.33301C1.41717 2.27472 2.27472 1.41717 3.33301 1.41699H12.667ZM2.58301 12.667C2.58318 13.0809 2.91905 13.4168 3.33301 13.417H7.41699V8.58301H2.58301V12.667ZM8.58301 13.417H12.667C13.0809 13.4168 13.4168 13.0809 13.417 12.667V8.58301H8.58301V13.417ZM3.33301 2.58301C2.91905 2.58318 2.58318 2.91905 2.58301 3.33301V7.41699H7.41699V2.58301H3.33301ZM8.58301 7.41699H13.417V3.33301C13.4168 2.91905 13.0809 2.58318 12.667 2.58301H8.58301V7.41699Z" fill="currentColor"/>
+</svg>
diff --git a/spx-gui/src/components/xgo-code-editor/completion.ts b/spx-gui/src/components/xgo-code-editor/completion.ts
index ca48e012ad..18a4fb1b27 100644
--- a/spx-gui/src/components/xgo-code-editor/completion.ts
+++ b/spx-gui/src/components/xgo-code-editor/completion.ts
@@ -104,9 +104,11 @@ export class CompletionProvider implements ICompletionProvider {
         const defId = item.data?.definition
         const definition = defId != null ? await this.documentBase.getDocumentation(defId) : null
 
-        // Skip APIs from framework packages without documentation — assumed not recommended
+        // Skip undocumented framework APIs because they are treated as not recommended.
+        // Kwarg snippets are synthesized from call-site context and have no documentation entry by design.
         const classFrameworkPkg = this.classFramework.pkgPaths[0]
-        if (defId != null && defId.package === classFrameworkPkg && definition == null) return null
+        const isUndocumentedFrameworkItem = defId != null && defId.package === classFrameworkPkg && definition == null
+        if (isUndocumentedFrameworkItem && !isKwargCompletionItem(result)) return null
         if (definition != null && definition.hiddenFromList) return null
 
         if (definition != null) {
@@ -137,3 +139,8 @@ export class CompletionProvider implements ICompletionProvider {
     return maybeItems.filter((item) => item != null) as CompletionItem[]
   }
 }
+
+// XGo LSP kwarg completions are snippets with insertText of the form `<label> = ${1:}`.
+function isKwargCompletionItem(item: CompletionItem) {
+  return item.insertTextFormat === InsertTextFormat.Snippet && item.insertText.startsWith(`${item.label} = `)
+}
diff --git a/spx-gui/src/models/common/file.ts b/spx-gui/src/models/common/file.ts
index a9088b77c8..4c608bb760 100644
--- a/spx-gui/src/models/common/file.ts
+++ b/spx-gui/src/models/common/file.ts
@@ -5,7 +5,7 @@
  */
 
 import { markRaw } from 'vue'
-import { getMimeFromExt } from '@/utils/file'
+import { getMimeFromExt, isSvgMimeType } from '@/utils/file'
 import { getSVGSize } from '@/utils/img'
 import { extname } from '@/utils/path'
 import { Disposable, getCleanupSignal, type Disposer } from '@/utils/disposable'
@@ -205,7 +205,7 @@ async function getBitmapImageSize(bitmapImgFile: File) {
 export async function getImageSize(file: File): Promise<Size> {
   if (file.meta.imgSize != null) return file.meta.imgSize
   let size: Size
-  if (file.type === 'image/svg+xml') {
+  if (isSvgMimeType(file.type)) {
     const svgText = await toText(file)
     size = await getSVGSize(svgText)
   } else {
diff --git a/spx-gui/src/models/spx/backdrop.test.ts b/spx-gui/src/models/spx/backdrop.test.ts
index 9aff3637eb..ddb0f2f68b 100644
--- a/spx-gui/src/models/spx/backdrop.test.ts
+++ b/spx-gui/src/models/spx/backdrop.test.ts
@@ -19,18 +19,20 @@ describe('Backdrop', () => {
   it('should clone correctly', () => {
     const stage = makeStage()
     const backdrop = stage.backdrops[0]
+    backdrop.setPivot({ x: 12, y: 34 })
 
     const clone = backdrop.clone()
     expect(clone.id).not.toEqual(backdrop.id)
     expect(clone.name).toEqual(backdrop.name)
     expect(clone.img).toEqual(backdrop.img)
+    expect(clone.pivot).toEqual(backdrop.pivot)
     expect(clone.bitmapResolution).toEqual(backdrop.bitmapResolution)
 
     stage.addBackdrop(clone)
     expect(clone.stage).toEqual(stage)
   })
 
-  it('should populate file metadata size when loading with image dimensions', () => {
+  it('should populate file metadata size when loading with image dimensions', async () => {
     const assetPath = 'backgrounds/backdrop.png'
     const file = new File('backdrop.png', async () => new ArrayBuffer(0), {
       type: 'image/png',
@@ -41,10 +43,12 @@ describe('Backdrop', () => {
       [resolvePath('assets', assetPath)]: file
     }
 
-    const backdrop = Backdrop.load(
+    const backdrop = await Backdrop.load(
       {
         name: 'BackdropA',
         path: assetPath,
+        x: 100,
+        y: 50,
         bitmapResolution: 2,
         imageWidth: 400,
         imageHeight: 300
@@ -53,10 +57,127 @@ describe('Backdrop', () => {
       { includeId: false }
     )
 
+    expect(backdrop.pivot).toEqual({ x: 50, y: 25 })
     expect(backdrop.img.meta.imgSize).toEqual({ width: 400, height: 300 })
     expect(file.meta.imgSize).toEqual({ width: 400, height: 300 })
   })
 
+  it('should default pivot to image center when loading without x and y', async () => {
+    const assetPath = 'backgrounds/backdrop.png'
+    const file = new File('backdrop.png', async () => new ArrayBuffer(0), {
+      type: 'image/png',
+      meta: {
+        imgSize: {
+          width: 400,
+          height: 300
+        }
+      }
+    })
+    const files: Files = {
+      [resolvePath('assets', assetPath)]: file
+    }
+
+    const backdrop = await Backdrop.load(
+      {
+        name: 'BackdropA',
+        path: assetPath,
+        bitmapResolution: 2
+      },
+      files,
+      { includeId: false }
+    )
+
+    expect(backdrop.pivot).toEqual({ x: 100, y: 75 })
+
+    const [config] = backdrop.export({ includeId: false })
+    expect(config.x).toBe(200)
+    expect(config.y).toBe(150)
+  })
+
+  it('should ignore legacy meaningless x and y when faceRight is present', async () => {
+    const assetPath = 'backgrounds/backdrop.png'
+    const file = new File('backdrop.png', async () => new ArrayBuffer(0), {
+      type: 'image/png',
+      meta: {
+        imgSize: {
+          width: 400,
+          height: 300
+        }
+      }
+    })
+    const files: Files = {
+      [resolvePath('assets', assetPath)]: file
+    }
+
+    const backdrop = await Backdrop.load(
+      {
+        name: 'BackdropA',
+        path: assetPath,
+        x: 0,
+        y: 0,
+        faceRight: 90,
+        bitmapResolution: 2
+      },
+      files,
+      { includeId: false }
+    )
+
+    expect(backdrop.pivot).toEqual({ x: 100, y: 75 })
+  })
+
+  it('should get raw size from image metadata', async () => {
+    const file = new File('stage.png', async () => new ArrayBuffer(0), {
+      type: 'image/png',
+      meta: {
+        imgSize: {
+          width: 512,
+          height: 288
+        }
+      }
+    })
+    const backdrop = new Backdrop('BackdropRawSize', file)
+
+    const rawSize = await backdrop.getRawSize()
+
+    expect(rawSize).toEqual({ width: 512, height: 288 })
+  })
+
+  it('should get size divided by bitmap resolution', async () => {
+    const file = new File('stage.png', async () => new ArrayBuffer(0), {
+      type: 'image/png',
+      meta: {
+        imgSize: {
+          width: 512,
+          height: 288
+        }
+      }
+    })
+    const backdrop = new Backdrop('BackdropSize', file, {
+      bitmapResolution: 2
+    })
+
+    const size = await backdrop.getSize()
+
+    expect(size).toEqual({ width: 256, height: 144 })
+  })
+
+  it('should default create pivot to image center', async () => {
+    const file = new File('stage.png', async () => new ArrayBuffer(0), {
+      type: 'image/png',
+      meta: {
+        imgSize: {
+          width: 512,
+          height: 288
+        }
+      }
+    })
+
+    const backdrop = await Backdrop.create('BackdropC', file)
+
+    expect(backdrop.pivot).toEqual({ x: 128, y: 72 })
+    expect(backdrop.bitmapResolution).toBe(2)
+  })
+
   it('should include metadata image size when exporting', () => {
     const file = new File('stage.png', async () => new ArrayBuffer(0), {
       type: 'image/png',
@@ -69,11 +190,14 @@ describe('Backdrop', () => {
     })
     const backdrop = new Backdrop('BackdropB', file, {
       id: 'backdrop-id',
+      pivot: { x: 40, y: 24 },
       bitmapResolution: 2
     })
 
     const [config] = backdrop.export({ includeId: true })
 
+    expect(config.x).toEqual(80)
+    expect(config.y).toEqual(48)
     expect(config.imageWidth).toEqual(512)
     expect(config.imageHeight).toEqual(288)
   })
diff --git a/spx-gui/src/models/spx/backdrop.ts b/spx-gui/src/models/spx/backdrop.ts
index 93631aa04a..40a6aa6cc0 100644
--- a/spx-gui/src/models/spx/backdrop.ts
+++ b/spx-gui/src/models/spx/backdrop.ts
@@ -1,19 +1,36 @@
 import { reactive } from 'vue'
 import { nanoid } from 'nanoid'
+import { isSvgMimeType } from '@/utils/file'
 import { extname, resolve } from '@/utils/path'
 import { adaptImg } from '@/utils/spx'
-import type { File, Files } from '../common/file'
+import { getImageSize, type File, type Files } from '../common/file'
 import { getBackdropName, validateBackdropName } from './common/asset-name'
 import type { AssetMetadata } from './common/asset'
+import type { Pivot } from './costume'
 import type { Stage } from './stage'
 
 export type BackdropInits = {
   id?: string
+  pivot?: Pivot
   bitmapResolution?: number
   assetMetadata?: AssetMetadata
 }
 
-export type RawBackdropConfig = Omit<BackdropInits, 'id' | 'assetMetadata'> & {
+export type RawBackdropConfig = Omit<BackdropInits, 'id' | 'assetMetadata' | 'pivot'> & {
+  /**
+   * Offset on x-axis of the backdrop pivot from left-top corner of the image.
+   * Positive value means right direction, negative means left direction.
+   * Note: This value is relative to the backdrop's raw size and is not divided by bitmapResolution;
+   * for SVG, this image-top-left-based value differs from Scratch's rotationCenterX which is based on viewBox origin.
+   */
+  x?: number
+  /**
+   * Offset on y-axis of the backdrop pivot from left-top corner of the image.
+   * Positive value means down direction, negative means up direction.
+   * Note: This value is relative to the backdrop's raw size and is not divided by bitmapResolution;
+   * for SVG, this image-top-left-based value differs from Scratch's rotationCenterY which is based on viewBox origin.
+   */
+  y?: number
   builder_id?: string
   builder_assetMetadata?: AssetMetadata
   name?: string
@@ -22,6 +39,12 @@ export type RawBackdropConfig = Omit<BackdropInits, 'id' | 'assetMetadata'> & {
   imageWidth?: number
   /* Optional image height for engine performance optimization */
   imageHeight?: number
+  /**
+   * @deprecated Legacy compatibility field produced by old Builder backdrop export behavior
+   * that reused costume logic. This is not part of SPX behavior/spec.
+   * Used only when loading historical Builder data.
+   */
+  faceRight?: number
 }
 
 const backdropAssetPath = 'assets'
@@ -53,11 +76,28 @@ export class Backdrop {
     this.img = img
   }
 
+  pivot: Pivot
+  setPivot(pivot: Pivot) {
+    this.pivot = pivot
+  }
+
   bitmapResolution: number
   setBitmapResolution(bitmapResolution: number) {
     this.bitmapResolution = bitmapResolution
   }
 
+  async getRawSize() {
+    return getImageSize(this.img)
+  }
+
+  async getSize() {
+    const rawSize = await this.getRawSize()
+    return {
+      width: rawSize.width / this.bitmapResolution,
+      height: rawSize.height / this.bitmapResolution
+    }
+  }
+
   assetMetadata: AssetMetadata | null
   setAssetMetadata(metadata: AssetMetadata | null) {
     this.assetMetadata = metadata
@@ -66,6 +106,7 @@ export class Backdrop {
   constructor(name: string, file: File, inits?: BackdropInits) {
     this.name = name
     this.img = file
+    this.pivot = inits?.pivot ?? { x: 0, y: 0 }
     this.bitmapResolution = inits?.bitmapResolution ?? 1
     this.id = inits?.id ?? nanoid()
     this.assetMetadata = inits?.assetMetadata ?? null
@@ -76,26 +117,42 @@ export class Backdrop {
    * Create instance with default inits
    * NOTE: the "default" means default behavior for builder, not the default behavior of spx
    */
-  static async create(nameBase: string, file: File, inits?: BackdropInits) {
+  static async create(nameBase: string, file: File, { bitmapResolution, pivot, ...extraInits }: BackdropInits = {}) {
     const adaptedFile = await adaptImg(file)
+    if (bitmapResolution == null) {
+      bitmapResolution = isSvgMimeType(file.type) ? 1 : 2
+    }
+    if (pivot == null) {
+      const size = await getImageSize(adaptedFile)
+      pivot = {
+        x: size.width / bitmapResolution / 2,
+        y: size.height / bitmapResolution / 2
+      }
+    }
     return new Backdrop(getBackdropName(null, nameBase), adaptedFile, {
-      bitmapResolution: /svg/.test(file.type) ? 1 : 2,
-      ...inits
+      ...extraInits,
+      bitmapResolution,
+      pivot
     })
   }
 
   clone(preserveId = false) {
     return new Backdrop(this.name, this.img, {
       id: preserveId ? this.id : undefined,
+      pivot: this.pivot,
       bitmapResolution: this.bitmapResolution,
       assetMetadata: this.assetMetadata ?? undefined
     })
   }
 
-  static load(
+  static async load(
     {
       name,
       path,
+      x,
+      y,
+      faceRight,
+      bitmapResolution = 1,
       builder_id: id,
       builder_assetMetadata: assetMetadata,
       imageWidth,
@@ -112,8 +169,25 @@ export class Backdrop {
     if (imageWidth != null && imageHeight != null && file.meta.imgSize == null) {
       file.meta.imgSize = { width: imageWidth, height: imageHeight }
     }
+    // Compatibility: some legacy backdrop data was exported via costume logic and may carry
+    // meaningless x/y = 0 together with a numeric faceRight. In this case, ignore x/y and
+    // derive pivot from image size.
+    const isLegacyMeaninglessPivot = typeof faceRight === 'number' && x === 0 && y === 0
+    const usePivotFromConfig = x != null && y != null && !isLegacyMeaninglessPivot
+    let pivot: Pivot
+    if (usePivotFromConfig) {
+      pivot = { x: x / bitmapResolution, y: y / bitmapResolution }
+    } else {
+      const size = await getImageSize(file)
+      pivot = {
+        x: size.width / bitmapResolution / 2,
+        y: size.height / bitmapResolution / 2
+      }
+    }
     return new Backdrop(name, file, {
       ...inits,
+      bitmapResolution,
+      pivot,
       id: includeId ? id : undefined,
       assetMetadata: includeAssetMetadata ? assetMetadata : undefined
     })
@@ -126,6 +200,8 @@ export class Backdrop {
   }: BackdropExportLoadOptions = {}): [RawBackdropConfig, Files] {
     const filename = this.name + extname(this.img.name)
     const config: RawBackdropConfig = {
+      x: this.pivot.x * this.bitmapResolution,
+      y: this.pivot.y * this.bitmapResolution,
       bitmapResolution: this.bitmapResolution,
       name: this.name,
       path: filename
diff --git a/spx-gui/src/models/spx/common/asset.ts b/spx-gui/src/models/spx/common/asset.ts
index f195a259c7..a93e1d36ad 100644
--- a/spx-gui/src/models/spx/common/asset.ts
+++ b/spx-gui/src/models/spx/common/asset.ts
@@ -3,11 +3,10 @@ import type { LocaleMessage } from '@/utils/i18n'
 import { AssetType, type AssetData } from '@/apis/asset'
 import { Sound } from '../sound'
 import { Sprite } from '../sprite'
-import { Costume } from '../costume'
 import { Backdrop, type BackdropInits } from '../backdrop'
 import type { SpriteGen } from '../gen/sprite-gen'
 import type { BackdropGen } from '../gen/backdrop-gen'
-import { fromBlob, fromConfig, toConfig } from '../../common/file'
+import { fromConfig, toConfig } from '../../common/file'
 import { getFiles, saveFiles } from '../../common/cloud'
 import { resourceBackdropName, resourceSoundName, resourceSpriteName } from './resource'
 
@@ -91,7 +90,7 @@ export async function asset2Backdrop({ files: fileCollection, ...metadata }: Ass
   const configFile = files[virtualBackdropConfigFileName]
   if (configFile == null) throw new Error('no config file found')
   const config = (await toConfig(configFile)) as BackdropInits
-  const backdrop = Backdrop.load(config, files, { includeId: false, includeAssetMetadata: false })
+  const backdrop = await Backdrop.load(config, files, { includeId: false, includeAssetMetadata: false })
   backdrop.setAssetMetadata(metadata)
   return backdrop
 }
@@ -116,43 +115,3 @@ export async function asset2Sound({ files: fileCollection, ...metadata }: AssetD
   sound.setAssetMetadata(metadata)
   return sound
 }
-
-export async function genSpriteFromCanvas(name: string, width: number, height: number, color: string) {
-  const canvas = await genAssetFromCanvas(name, width, height, color)
-  const sprite = Sprite.create(name)
-  const costume = new Costume(name, canvas)
-  sprite.addCostume(costume)
-  return sprite
-}
-
-export async function genBackdropFromCanvas(name: string, width: number, height: number, color: string) {
-  const canvas = await genAssetFromCanvas(name, width, height, color)
-  const backdrop = await Backdrop.create(name, canvas)
-  return backdrop
-}
-
-export async function genAssetFromCanvas(name: string, width: number, height: number, color: string) {
-  const canvas = document.createElement('canvas')
-  const ctx = canvas.getContext('2d')!
-
-  // check if the name ends with .png
-  const filename = name.toLowerCase().endsWith('.png') ? name : `${name}.png`
-  // Set canvas dimensions
-  canvas.width = width
-  canvas.height = height
-
-  // Draw a square
-  ctx.fillStyle = color
-  ctx.fillRect(0, 0, width, height)
-
-  // Convert canvas to Blob
-  const blob = await new Promise<Blob>((resolve) => {
-    canvas.toBlob((blob) => {
-      resolve(blob!)
-    }, 'image/png')
-  })
-
-  // Create file from Blob
-  const file = fromBlob(filename, blob)
-  return file
-}
diff --git a/spx-gui/src/models/spx/costume.ts b/spx-gui/src/models/spx/costume.ts
index 4d8d5ef736..0f731e5118 100644
--- a/spx-gui/src/models/spx/costume.ts
+++ b/spx-gui/src/models/spx/costume.ts
@@ -1,6 +1,7 @@
 import { reactive } from 'vue'
 import { nanoid } from 'nanoid'
 
+import { isSvgMimeType } from '@/utils/file'
 import { extname, resolve } from '@/utils/path'
 import { adaptImg } from '@/utils/spx'
 import { File, type Files, getImageSize } from '../common/file'
@@ -33,12 +34,14 @@ export type RawCostumeConfig = Omit<CostumeInits, 'id' | 'pivot'> & {
    * Offset on x-axis of the costume pivot from left-top corner of the image.
    * Positive value means right direction, negative means left direction.
    * Note: This value is relative to the costume's raw size and is not divided by bitmapResolution;
+   * for SVG, this image-top-left-based value differs from Scratch's rotationCenterX which is based on viewBox origin.
    */
   x?: number
   /**
    * Offset on y-axis of the costume pivot from left-top corner of the image.
    * Positive value means down direction, negative means up direction.
    * Note: This value is relative to the costume's raw size and is not divided by bitmapResolution;
+   * for SVG, this image-top-left-based value differs from Scratch's rotationCenterY which is based on viewBox origin.
    */
   y?: number
   builder_id?: string
@@ -147,7 +150,7 @@ export class Costume {
   static async create(nameBase: string, file: File, inits?: CostumeInits) {
     const adaptedFile = await adaptImg(file)
     return new Costume(getCostumeName(null, nameBase), adaptedFile, {
-      bitmapResolution: /svg/.test(file.type) ? 1 : 2,
+      bitmapResolution: isSvgMimeType(file.type) ? 1 : 2,
       ...inits
     })
   }
diff --git a/spx-gui/src/models/spx/gen/backdrop-gen.test.ts b/spx-gui/src/models/spx/gen/backdrop-gen.test.ts
index a382e3c20d..7fa9a6b213 100644
--- a/spx-gui/src/models/spx/gen/backdrop-gen.test.ts
+++ b/spx-gui/src/models/spx/gen/backdrop-gen.test.ts
@@ -4,6 +4,7 @@ import { ArtStyle, BackdropCategory, Perspective } from '@/apis/common'
 import { setupAigcMock } from './aigc-mock' // Put me before importing `@/apis/aigc` to ensure the mock is set up correctly
 import { TaskStatus, TaskType } from '@/apis/aigc'
 import { createI18n } from '@/utils/i18n'
+import * as fileHelpers from '@/models/common/file'
 import { sndFiles } from '@/models/common/test'
 import { GenState } from '@/components/editor/gen'
 import { makeSpxProject } from '../common/test'
@@ -11,6 +12,8 @@ import { BackdropGen } from './backdrop-gen'
 
 const aigcMock = setupAigcMock()
 const i18n = createI18n({ lang: 'en' })
+// TODO: Consider replacing this spy by pre-filling file.meta.imgSize in test fixtures.
+vi.spyOn(fileHelpers, 'getImageSize').mockReturnValue(Promise.resolve({ width: 100, height: 100 }))
 
 describe('BackdropGen', () => {
   beforeEach(() => {
diff --git a/spx-gui/src/models/spx/gen/backdrop-gen.ts b/spx-gui/src/models/spx/gen/backdrop-gen.ts
index c62ec6677d..f09504c5dc 100644
--- a/spx-gui/src/models/spx/gen/backdrop-gen.ts
+++ b/spx-gui/src/models/spx/gen/backdrop-gen.ts
@@ -261,7 +261,9 @@ export class BackdropGen extends Disposable {
         )
       )
     }
-    if (resultConfig != null) inits.result = Backdrop.load(resultConfig, files, { assetPath: `${assetsPath}/result` })
+    if (resultConfig != null) {
+      inits.result = await Backdrop.load(resultConfig, files, { assetPath: `${assetsPath}/result` })
+    }
     const gen = new BackdropGen(i18n, project, inits)
     gen.restoreGenerateTask()
     return gen
diff --git a/spx-gui/src/models/spx/gen/costume-gen.test.ts b/spx-gui/src/models/spx/gen/costume-gen.test.ts
index 7dc4a134cb..ee3ec4f9e7 100644
--- a/spx-gui/src/models/spx/gen/costume-gen.test.ts
+++ b/spx-gui/src/models/spx/gen/costume-gen.test.ts
@@ -12,6 +12,7 @@ import { CostumeGen } from './costume-gen'
 
 const aigcMock = setupAigcMock()
 const i18n = createI18n({ lang: 'en' })
+// TODO: Consider replacing this spy by pre-filling file.meta.imgSize in test fixtures.
 vi.spyOn(fileHelpers, 'getImageSize').mockReturnValue(Promise.resolve({ width: 100, height: 100 }))
 
 describe('CostumeGen', () => {
diff --git a/spx-gui/src/models/spx/gen/sprite-gen.test.ts b/spx-gui/src/models/spx/gen/sprite-gen.test.ts
index a8cbb93c0f..6a4ef0a697 100644
--- a/spx-gui/src/models/spx/gen/sprite-gen.test.ts
+++ b/spx-gui/src/models/spx/gen/sprite-gen.test.ts
@@ -4,16 +4,18 @@ import { ArtStyle, Perspective, SpriteCategory } from '@/apis/common'
 import { setupAigcMock } from './aigc-mock' // Put me before importing `@/apis/aigc` to ensure the mock is set up correctly
 import { TaskStatus } from '@/apis/aigc'
 import { createI18n } from '@/utils/i18n'
+import * as imgHelpers from '@/utils/img'
 import * as fileHelpers from '@/models/common/file'
 import { sndFiles } from '@/models/common/test'
 import { GenState } from '@/components/editor/gen'
-import { RotationStyle, State } from '../sprite'
+import { CollisionShapeType, RotationStyle, State } from '../sprite'
 import { makeSpxProject } from '../common/test'
 import type { CostumeGen } from './costume-gen'
 import type { AnimationGen } from './animation-gen'
 import { SpriteGen } from './sprite-gen'
 
 const aigcMock = setupAigcMock()
+// TODO: Consider replacing this spy by pre-filling file.meta.imgSize in test fixtures.
 vi.spyOn(fileHelpers, 'getImageSize').mockReturnValue(Promise.resolve({ width: 100, height: 100 }))
 
 async function finishCostumeGen(name: string, gen: CostumeGen) {
@@ -126,7 +128,7 @@ describe('SpriteGen', () => {
     await finishAnimationGen('jump', animationJumpGen)
 
     // Finish the whole sprite generation
-    const sprite = gen.finish()
+    const sprite = await gen.finish()
     expect(sprite.name).toBe('UpdatedSprite')
     expect(sprite.assetMetadata?.description).toBe('Updated description for A brave knight')
     expect(sprite.assetMetadata?.extraSettings).toEqual({
@@ -146,6 +148,7 @@ describe('SpriteGen', () => {
     expect(sprite.animations[1].name).toBe('jump')
     expect(sprite.getAnimationBoundStates(sprite.animations[0].id)).toEqual([State.Default])
     expect(sprite.getAnimationBoundStates(sprite.animations[1].id)).toEqual([State.Step])
+    expect(sprite.collisionShapeType).toBe(CollisionShapeType.None)
   })
 
   it('should validate sprite name when parent is set', () => {
@@ -323,7 +326,7 @@ describe('SpriteGen', () => {
     await gen1.genImages()
     gen1.setImageIndex(0)
     await gen1.prepareContent()
-    const sprite1 = gen1.finish()
+    const sprite1 = await gen1.finish()
     expect(sprite1.rotationStyle).toBe(RotationStyle.LeftRight)
 
     // Test AngledTopDown perspective -> LeftRight rotation style
@@ -333,7 +336,7 @@ describe('SpriteGen', () => {
     await gen2.genImages()
     gen2.setImageIndex(0)
     await gen2.prepareContent()
-    const sprite2 = gen2.finish()
+    const sprite2 = await gen2.finish()
     expect(sprite2.rotationStyle).toBe(RotationStyle.LeftRight)
 
     // Test Unspecified perspective -> Normal rotation style
@@ -343,10 +346,60 @@ describe('SpriteGen', () => {
     await gen3.genImages()
     gen3.setImageIndex(0)
     await gen3.prepareContent()
-    const sprite3 = gen3.finish()
+    const sprite3 = await gen3.finish()
     expect(sprite3.rotationStyle).toBe(RotationStyle.Normal)
   })
 
+  it('should infer feet pivot for generated character sprites', async () => {
+    const getContentBoundingRect = vi.spyOn(imgHelpers, 'getContentBoundingRect').mockResolvedValue({
+      x: 10,
+      y: 8,
+      width: 20,
+      height: 30
+    })
+    const toNativeFile = vi
+      .spyOn(fileHelpers, 'toNativeFile')
+      .mockResolvedValue(new File(['sprite'], 'sprite.png', { type: 'image/png' }))
+
+    try {
+      const project = makeSpxProject()
+      const gen = new SpriteGen(createI18n({ lang: 'en' }), project, 'A brave runner')
+
+      await gen.enrich()
+      gen.setSettings({
+        name: 'Runner',
+        category: SpriteCategory.Character,
+        perspective: Perspective.SideScrolling
+      })
+      await gen.genImages()
+      gen.setImageIndex(0)
+      await gen.prepareContent()
+
+      for (const costumeGen of gen.costumes.slice(1)) {
+        await finishCostumeGen(costumeGen.name, costumeGen)
+      }
+      for (const animationGen of gen.animations) {
+        await finishAnimationGen(animationGen.name, animationGen)
+      }
+
+      const sprite = await gen.finish()
+      expect(getContentBoundingRect).toHaveBeenCalledTimes(1)
+      expect(toNativeFile).toHaveBeenCalledTimes(1)
+      expect(sprite.defaultCostume?.pivot).toEqual({ x: 10, y: 19 })
+      expect(sprite.costumes.map((costume) => costume.pivot)).toEqual([
+        { x: 10, y: 19 },
+        { x: 10, y: 19 },
+        { x: 10, y: 19 }
+      ])
+      for (const animation of sprite.animations) {
+        expect(animation.costumes.every((costume) => costume.pivot.x === 10 && costume.pivot.y === 19)).toBe(true)
+      }
+    } finally {
+      toNativeFile.mockRestore()
+      getContentBoundingRect.mockRestore()
+    }
+  })
+
   describe('export/load', () => {
     function getPreviewSpriteContentSnapshot(gen: SpriteGen) {
       const previewSprite = gen.previewSprite
diff --git a/spx-gui/src/models/spx/gen/sprite-gen.ts b/spx-gui/src/models/spx/gen/sprite-gen.ts
index d1b6b8f1cc..5e304d9c3e 100644
--- a/spx-gui/src/models/spx/gen/sprite-gen.ts
+++ b/spx-gui/src/models/spx/gen/sprite-gen.ts
@@ -4,6 +4,7 @@ import type { Prettify } from '@/utils/types'
 import { extname } from '@/utils/path'
 import { Disposable } from '@/utils/disposable'
 import type { I18n, LocaleMessage } from '@/utils/i18n'
+import { getContentBoundingRect } from '@/utils/img'
 import { ArtStyle, Perspective, SpriteCategory } from '@/apis/common'
 import {
   enrichSpriteSettings,
@@ -18,14 +19,14 @@ import {
 } from '@/apis/aigc'
 import { SpxProject } from '../project'
 import { RotationStyle, Sprite, State } from '../sprite'
-import { Costume } from '../costume'
+import { Costume, type Pivot as CostumePivot } from '../costume'
 import type { Animation } from '../animation'
 import { getProjectSettings, mapPhaseResult, Phase, Task, type PhaseSerialized, type TaskSerialized } from './common'
 import { CostumeGen, type RawCostumeGenConfig } from './costume-gen'
 import { AnimationGen, type RawAnimationGenConfig } from './animation-gen'
 import { createFileWithUniversalUrl } from '../../common/cloud'
 import type { File, Files } from '../../common/file'
-import { fromConfig, toConfig, listDirs } from '../../common/file'
+import { fromConfig, toConfig, listDirs, toNativeFile } from '../../common/file'
 import {
   ensureValidSpriteName,
   getAnimationName,
@@ -129,9 +130,6 @@ export class SpriteGen extends Disposable {
     const { name, perspective } = this.settings
     return Sprite.create(name, '', {
       rotationStyle: rotationStyleForPerspective(perspective)
-      // TODO: provide more initial settings when generated
-      // e.g., place the pivot at the feet for character sprites in side-scrolling or angled-top-down perspectives.
-      // For more details, see: https://github.com/goplus/builder/issues/2785
     })
   }
 
@@ -422,7 +420,7 @@ export class SpriteGen extends Disposable {
     this.selectedItem = item
   }
 
-  finish() {
+  async finish() {
     const previewSprite = this.previewSprite
     const sprite = this.createSprite()
     for (const gen of this.costumes) {
@@ -438,6 +436,14 @@ export class SpriteGen extends Disposable {
       sprite.addAnimation(animation)
       sprite.setAnimationBoundStates(animation.id, boundStates)
     }
+    if (shouldUseFeetPivot(this.settings.category, this.settings.perspective) && sprite.defaultCostume != null) {
+      const inferredPivotDelta = await getFeetPivotDelta(sprite.defaultCostume)
+      if (inferredPivotDelta != null) {
+        // Apply once on the final sprite so all generated costumes, including animation frames,
+        // receive the same inferred pivot adjustment.
+        sprite.applyCostumesPivotChange(inferredPivotDelta)
+      }
+    }
     sprite.setAssetMetadata({
       description: this.settings.description,
       extraSettings: {
@@ -620,3 +626,20 @@ function rotationStyleForPerspective(perspective: Perspective): RotationStyle {
       return RotationStyle.Normal
   }
 }
+
+function shouldUseFeetPivot(category: SpriteCategory, perspective: Perspective) {
+  return (
+    category === SpriteCategory.Character &&
+    [Perspective.SideScrolling, Perspective.AngledTopDown].includes(perspective)
+  )
+}
+
+async function getFeetPivotDelta(costume: Costume): Promise<CostumePivot | null> {
+  if (costume.bitmapResolution <= 0) return null
+  const rect = await getContentBoundingRect(await toNativeFile(costume.img))
+  if (rect.width <= 0 || rect.height <= 0) return null
+  return {
+    x: (rect.x + rect.width / 2) / costume.bitmapResolution - costume.pivot.x,
+    y: (rect.y + rect.height) / costume.bitmapResolution - costume.pivot.y
+  }
+}
diff --git a/spx-gui/src/models/spx/stage.test.ts b/spx-gui/src/models/spx/stage.test.ts
index 6f0aebb2ec..30c960407e 100644
--- a/spx-gui/src/models/spx/stage.test.ts
+++ b/spx-gui/src/models/spx/stage.test.ts
@@ -1,6 +1,6 @@
 import { nextTick } from 'vue'
 import { describe, it, expect } from 'vitest'
-import { Stage } from './stage'
+import { MapMode, Stage } from './stage'
 import { Monitor } from './widget/monitor'
 import { Backdrop } from './backdrop'
 import { File } from '../common/file'
@@ -330,4 +330,26 @@ describe('Stage', () => {
     stage.addWidgetAfter(widget3, widget1.id)
     expect(stage.widgets.map((w) => w.id)).toEqual([widget1.id, widget3.id, widget2.id])
   })
+
+  it('should preserve actualSize map mode when loading and exporting', async () => {
+    const stage = await Stage.load(
+      {
+        map: {
+          width: 480,
+          height: 360,
+          mode: 'actualSize'
+        }
+      },
+      {}
+    )
+
+    expect(stage.mapMode).toBe(MapMode.actualSize)
+
+    const [stageConfig] = stage.export()
+    expect(stageConfig.map).toEqual({
+      width: 480,
+      height: 360,
+      mode: 'actualSize'
+    })
+  })
 })
diff --git a/spx-gui/src/models/spx/stage.ts b/spx-gui/src/models/spx/stage.ts
index 14fb5cc11e..f63111fdc7 100644
--- a/spx-gui/src/models/spx/stage.ts
+++ b/spx-gui/src/models/spx/stage.ts
@@ -329,7 +329,9 @@ export class Stage extends Disposable {
       layerSortMode,
       extraConfig
     })
-    const backdrops = (backdropConfigs ?? sceneConfigs ?? costumeConfigs ?? []).map((c) => Backdrop.load(c, files))
+    const backdrops = await Promise.all(
+      (backdropConfigs ?? sceneConfigs ?? costumeConfigs ?? []).map((c) => Backdrop.load(c, files))
+    )
     for (const backdrop of backdrops) {
       stage.addBackdrop(backdrop)
     }
@@ -378,15 +380,17 @@ export class Stage extends Disposable {
   }
 }
 
-// In Builder we only support repeat and fillRatio
+// In Builder we support repeat, fillRatio, and actualSize.
 export enum MapMode {
   // fill = 'fill',
   repeat = 'repeat',
-  fillRatio = 'fillRatio'
+  fillRatio = 'fillRatio',
+  actualSize = 'actualSize'
   // fillCut = 'fillCut'
 }
 
 function getMapMode(mode?: string): MapMode {
   if (mode === 'repeat') return MapMode.repeat
+  if (mode === 'actualSize') return MapMode.actualSize
   return MapMode.fillRatio
 }
diff --git a/spx-gui/src/utils/file.ts b/spx-gui/src/utils/file.ts
index f0d28fcf48..46801b1773 100644
--- a/spx-gui/src/utils/file.ts
+++ b/spx-gui/src/utils/file.ts
@@ -45,6 +45,10 @@ export function getExtFromMime(mime: string) {
   return mime2Ext[mime]
 }
 
+export function isSvgMimeType(type: string) {
+  return type === 'image/svg+xml'
+}
+
 export const imgExts = ['png', 'jpg', 'jpeg', 'svg', 'webp', 'bmp']
 export const audioExts = ['wav', 'mp3', 'ogg', 'webm']
 
diff --git a/spx-gui/src/utils/img.ts b/spx-gui/src/utils/img.ts
index a10d8fc649..65d3c5a7a5 100644
--- a/spx-gui/src/utils/img.ts
+++ b/spx-gui/src/utils/img.ts
@@ -1,4 +1,5 @@
 import { Disposable } from '@/utils/disposable'
+import { isSvgMimeType } from '@/utils/file'
 import { getImgDrawingCtx } from './canvas'
 
 /** Convert arbitrary-type (supported by current browser) image content to another type. */
@@ -13,7 +14,7 @@ export function convertImg(
     const img = new Image()
     img.onload = async () => {
       let size = { width: img.naturalWidth, height: img.naturalHeight }
-      if (input.type === 'image/svg+xml') {
+      if (isSvgMimeType(input.type)) {
         const svgText = await input.text()
         size = await getSVGSize(svgText)
       }
@@ -44,7 +45,7 @@ export async function toPng(blob: Blob) {
 // Chrome and Firefox behave differently when reading `viewBox.baseVal` of SVG without the `viewBox` attribute.
 // Chrome returns `{ x: 0, y: 0, width: 0, height: 0 }` by default, while Firefox returns null.
 // This method retrieves the `viewBox` attribute, ensuring consistent behavior when it exists, and returns `{ x: 0, y: 0, width: 0, height: 0 }` when it doesn't exist.
-function getSVGViewBoxRect(svgElement: SVGSVGElement) {
+function getSVGViewBoxRectFromElement(svgElement: SVGSVGElement) {
   const rect = svgElement.viewBox.baseVal as DOMRect | null // `viewBox.baseVal` may be null in Firefox if not set in SVG
   return {
     width: rect?.width ?? 0,
@@ -54,15 +55,24 @@ function getSVGViewBoxRect(svgElement: SVGSVGElement) {
   }
 }
 
-/** Get the size of the SVG image, keeping consistent with spx. */
-export async function getSVGSize(svgText: string) {
+function parseSVGText(svgText: string) {
   const parser = new DOMParser()
   const svg = parser.parseFromString(svgText, 'image/svg+xml').documentElement
   if (!(svg instanceof SVGSVGElement)) throw new Error('invalid svg')
+  return svg
+}
+
+export function getSVGViewBoxRect(svgText: string) {
+  return getSVGViewBoxRectFromElement(parseSVGText(svgText))
+}
+
+/** Get the size of the SVG image, keeping consistent with spx. */
+export async function getSVGSize(svgText: string) {
+  const svg = parseSVGText(svgText)
   // Keep consistent with spx, for details see:
   // * https://github.com/goplus/spx/blob/15b2e572746f3aaea519c2d9c0027188b50b62c8/internal/svgr/svg.go#L39
   // * https://github.com/qiniu/oksvg/blob/917f53935572252ba3da8909ca4fbedec418bde1/svgd.go#L1015-L1049
-  let { width, height } = getSVGViewBoxRect(svg)
+  let { width, height } = getSVGViewBoxRectFromElement(svg)
   if (width === 0) width = svg.width.baseVal.value
   if (height === 0) height = svg.height.baseVal.value
   return { width, height }
@@ -87,7 +97,7 @@ export async function getContentBoundingRect(imgBlob: Blob): Promise<Rect> {
     img.onload = async () => {
       try {
         let size = { width: img.naturalWidth, height: img.naturalHeight }
-        if (imgBlob.type === 'image/svg+xml') {
+        if (isSvgMimeType(imgBlob.type)) {
           const svgText = await imgBlob.text()
           size = await getSVGSize(svgText)
         }
diff --git a/tools/ai/go.mod b/tools/ai/go.mod
index 6fc3a4b3d6..84d2e6b901 100644
--- a/tools/ai/go.mod
+++ b/tools/ai/go.mod
@@ -2,7 +2,7 @@ module github.com/goplus/builder/tools/ai
 
 go 1.25.0
 
-require github.com/goplus/spx/v2 v2.0.1
+require github.com/goplus/spx/v2 v2.0.2
 
 require (
 	github.com/goplus/spbase v0.1.0 // indirect
diff --git a/tools/ai/go.sum b/tools/ai/go.sum
index 734658c2fd..c97f1c12f8 100644
--- a/tools/ai/go.sum
+++ b/tools/ai/go.sum
@@ -1,7 +1,7 @@
 github.com/goplus/spbase v0.1.0 h1:JNZ0D/65DerYyv9/9IfrXHZZbd0WNK0jHiVvgCtZhwY=
 github.com/goplus/spbase v0.1.0/go.mod h1:brnD3OJnHtipqob2IsJ3/QzGBf+eOnqXNnHGKpv1irQ=
-github.com/goplus/spx/v2 v2.0.1 h1:+WUJFxQP1FwwZVziFN0aVnlNb0Yf8ExtI6B4s29P8g0=
-github.com/goplus/spx/v2 v2.0.1/go.mod h1:kZl4cD2y8UOrsOdyLuu4dSB/pJieCO35xBOHcog/mlY=
+github.com/goplus/spx/v2 v2.0.2 h1:pzPE3fbS+Zo15tY8EnUFtXiaBOPG3mgXgaAdF8l44WU=
+github.com/goplus/spx/v2 v2.0.2/go.mod h1:kZl4cD2y8UOrsOdyLuu4dSB/pJieCO35xBOHcog/mlY=
 github.com/petermattis/goid v0.0.0-20250721140440-ea1c0173183e h1:D0bJD+4O3G4izvrQUmzCL80zazlN7EwJ0PPDhpJWC/I=
 github.com/petermattis/goid v0.0.0-20250721140440-ea1c0173183e/go.mod h1:pxMtw7cyUw6B2bRH0ZBANSPg+AoSud1I1iyJHI69jH4=
 golang.org/x/image v0.23.0 h1:HseQ7c2OpPKTPVzNjG5fwJsOTCiiwS4QdsYi5XU6H68=
diff --git a/tools/ispx/go.mod b/tools/ispx/go.mod
index 5d6d1efb23..2c4f55f24a 100644
--- a/tools/ispx/go.mod
+++ b/tools/ispx/go.mod
@@ -8,7 +8,7 @@ require (
 	github.com/goplus/builder/tools/ai v0.0.0
 	github.com/goplus/ixgo v1.0.8
 	github.com/goplus/mod v0.20.2
-	github.com/goplus/spx/v2 v2.0.1
+	github.com/goplus/spx/v2 v2.0.2
 )
 
 require (
diff --git a/tools/ispx/go.sum b/tools/ispx/go.sum
index 869ba1df4e..7bce652248 100644
--- a/tools/ispx/go.sum
+++ b/tools/ispx/go.sum
@@ -15,8 +15,8 @@ github.com/goplus/reflectx v1.6.4 h1:luq+mKbdG4dGXwcpR7eZpWrsOAg46/lGPnQdRLSzyzY
 github.com/goplus/reflectx v1.6.4/go.mod h1:ksfFSbZGiPzW+EZ3umw7e0pKYlPAb3rkgOCZDo4MCmk=
 github.com/goplus/spbase v0.1.0 h1:JNZ0D/65DerYyv9/9IfrXHZZbd0WNK0jHiVvgCtZhwY=
 github.com/goplus/spbase v0.1.0/go.mod h1:brnD3OJnHtipqob2IsJ3/QzGBf+eOnqXNnHGKpv1irQ=
-github.com/goplus/spx/v2 v2.0.1 h1:+WUJFxQP1FwwZVziFN0aVnlNb0Yf8ExtI6B4s29P8g0=
-github.com/goplus/spx/v2 v2.0.1/go.mod h1:kZl4cD2y8UOrsOdyLuu4dSB/pJieCO35xBOHcog/mlY=
+github.com/goplus/spx/v2 v2.0.2 h1:pzPE3fbS+Zo15tY8EnUFtXiaBOPG3mgXgaAdF8l44WU=
+github.com/goplus/spx/v2 v2.0.2/go.mod h1:kZl4cD2y8UOrsOdyLuu4dSB/pJieCO35xBOHcog/mlY=
 github.com/goplus/xgo v1.7.2-0.20260414235301-df19f4a1b7c2 h1:kXIGYlJUTii+7nv1XTKR0ctMZSeTcgYMoQuEexZPr7A=
 github.com/goplus/xgo v1.7.2-0.20260414235301-df19f4a1b7c2/go.mod h1:fX3+ZaYEzBE6qkgFcJx83D6DbUo/vMO8Y1Allydy2ws=
 github.com/petermattis/goid v0.0.0-20250721140440-ea1c0173183e h1:D0bJD+4O3G4izvrQUmzCL80zazlN7EwJ0PPDhpJWC/I=
diff --git a/tools/spxls/go.mod b/tools/spxls/go.mod
index 7b141196cf..faac72c596 100644
--- a/tools/spxls/go.mod
+++ b/tools/spxls/go.mod
@@ -6,14 +6,14 @@ tool github.com/goplus/xgolsw/cmd/pkgdatagen
 
 require (
 	github.com/goplus/builder/tools/ai v0.0.0
-	github.com/goplus/xgolsw v0.20.1
+	github.com/goplus/xgolsw v0.21.0
 )
 
 require (
 	github.com/goplus/gogen v1.23.0-pre.3.0.20260414234848-6641c10c9d6f // indirect
 	github.com/goplus/mod v0.20.2 // indirect
 	github.com/goplus/spbase v0.1.0 // indirect
-	github.com/goplus/spx/v2 v2.0.1 // indirect
+	github.com/goplus/spx/v2 v2.0.2 // indirect
 	github.com/goplus/xgo v1.7.2-0.20260414235301-df19f4a1b7c2 // indirect
 	github.com/petermattis/goid v0.0.0-20250721140440-ea1c0173183e // indirect
 	github.com/qiniu/x v1.17.0 // indirect
diff --git a/tools/spxls/go.sum b/tools/spxls/go.sum
index 8dd75e934e..d833de9e68 100644
--- a/tools/spxls/go.sum
+++ b/tools/spxls/go.sum
@@ -11,12 +11,12 @@ github.com/goplus/mod v0.20.2 h1:YX72E6AhhRLvlkVnI9cBK6PZvUwtge2hwROh7w9N6Yk=
 github.com/goplus/mod v0.20.2/go.mod h1:lWW62tH7L3Vm42Lr6wlUMYHvsm5w3TkEpE2ulKTgmU8=
 github.com/goplus/spbase v0.1.0 h1:JNZ0D/65DerYyv9/9IfrXHZZbd0WNK0jHiVvgCtZhwY=
 github.com/goplus/spbase v0.1.0/go.mod h1:brnD3OJnHtipqob2IsJ3/QzGBf+eOnqXNnHGKpv1irQ=
-github.com/goplus/spx/v2 v2.0.1 h1:+WUJFxQP1FwwZVziFN0aVnlNb0Yf8ExtI6B4s29P8g0=
-github.com/goplus/spx/v2 v2.0.1/go.mod h1:kZl4cD2y8UOrsOdyLuu4dSB/pJieCO35xBOHcog/mlY=
+github.com/goplus/spx/v2 v2.0.2 h1:pzPE3fbS+Zo15tY8EnUFtXiaBOPG3mgXgaAdF8l44WU=
+github.com/goplus/spx/v2 v2.0.2/go.mod h1:kZl4cD2y8UOrsOdyLuu4dSB/pJieCO35xBOHcog/mlY=
 github.com/goplus/xgo v1.7.2-0.20260414235301-df19f4a1b7c2 h1:kXIGYlJUTii+7nv1XTKR0ctMZSeTcgYMoQuEexZPr7A=
 github.com/goplus/xgo v1.7.2-0.20260414235301-df19f4a1b7c2/go.mod h1:fX3+ZaYEzBE6qkgFcJx83D6DbUo/vMO8Y1Allydy2ws=
-github.com/goplus/xgolsw v0.20.1 h1:lznMaM61jQwoJVO7a9tuvrLQx/+rQt0sRqUeFCRKMDc=
-github.com/goplus/xgolsw v0.20.1/go.mod h1:WYjrrzO/gRzJFebzwHvqeULK7g2xU3GEyDYPnWEvxeM=
+github.com/goplus/xgolsw v0.21.0 h1:JYi7kR/XP70LFGfTxJRRJ0VhzJCudXQdyMTLzbHBCqE=
+github.com/goplus/xgolsw v0.21.0/go.mod h1:p68CHqfgmLAc3muvEOohs6IiWvX5AlUdP0rvF2PpqBs=
 github.com/petermattis/goid v0.0.0-20250721140440-ea1c0173183e h1:D0bJD+4O3G4izvrQUmzCL80zazlN7EwJ0PPDhpJWC/I=
 github.com/petermattis/goid v0.0.0-20250721140440-ea1c0173183e/go.mod h1:pxMtw7cyUw6B2bRH0ZBANSPg+AoSud1I1iyJHI69jH4=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=