diff --git a/spx-gui/TODO.md b/spx-gui/TODO.md
new file mode 100644
index 000000000..8f4ccf14b
--- /dev/null
+++ b/spx-gui/TODO.md
@@ -0,0 +1,2 @@
+* 避免到处 new XxxHelpers()
+* XxxHelpers 是否有更合适的名字
diff --git a/spx-gui/src/App.vue b/spx-gui/src/App.vue
index 21f047d20..7e482a1ea 100644
--- a/spx-gui/src/App.vue
+++ b/spx-gui/src/App.vue
@@ -26,6 +26,7 @@ import TutorialRoot from '@/components/tutorials/TutorialRoot.vue'
 import { SpotlightUI } from '@/utils/spotlight'
 import { useI18n } from '@/utils/i18n'
 import { useInstallRouteLoading } from '@/utils/route-loading'
+import { provideAppCtx } from './components/common/app-context'
 
 const { t } = useI18n()
 
@@ -44,6 +45,7 @@ const config = computed<Config>(() => ({
 }))
 
 useInstallRouteLoading()
+provideAppCtx()
 </script>
 
 <style lang="scss">
diff --git a/spx-gui/src/apis/aigc.ts b/spx-gui/src/apis/aigc.ts
index c2e6f84b7..24b53cb8c 100644
--- a/spx-gui/src/apis/aigc.ts
+++ b/spx-gui/src/apis/aigc.ts
@@ -13,7 +13,8 @@ import {
   type UniversalUrl
 } from './common'
 import type { AssetExtraSettings, AssetType } from './asset'
-import type { State } from '@/models/sprite.ts'
+// TODO: avoid dep from apis to models
+import type { State } from '@/models/spx/sprite'
 
 export type ProjectSettings = {
   name: string
diff --git a/spx-gui/src/components/agent-copilot/CopilotProvider.vue b/spx-gui/src/components/agent-copilot/CopilotProvider.vue
index 6c3fa49d8..cad9cac04 100644
--- a/spx-gui/src/components/agent-copilot/CopilotProvider.vue
+++ b/spx-gui/src/components/agent-copilot/CopilotProvider.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { InjectionKey } from 'vue'
 import { until } from '@/utils/utils'
+import { useAppCtx } from '@/components/common/app-context'
 
 export type McpConnectionStatus = {
   client: boolean
@@ -99,7 +100,7 @@ import { createProjectToolDescription, CreateProjectArgsSchema } from './mcp/def
 import { getProject, Visibility } from '@/apis/project'
 import { useRouter } from 'vue-router'
 import { getOwnProjectEditorRoute } from '@/router'
-import { Project } from '@/models/project'
+import { SpxProject } from '@/models/spx/project'
 import McpDebugger from './mcp/McpDebugger.vue'
 import { Client } from '@modelcontextprotocol/sdk/client/index.js'
 import { Server } from '@modelcontextprotocol/sdk/server/index.js'
@@ -175,6 +176,8 @@ const initBasicTools = async () => {
   )
 }
 
+const appCtx = useAppCtx()
+
 async function createProject(options: CreateProjectOptions) {
   const projectName = options.projectName
 
@@ -200,11 +203,11 @@ async function createProject(options: CreateProjectOptions) {
     // Handle error checking project existence
   }
 
-  const project = new Project(signedInUsername, projectName)
+  const project = new SpxProject(signedInUsername, projectName)
   project.setVisibility(Visibility.Private)
 
   try {
-    await project.saveToCloud()
+    await appCtx.cloudHelpers.save(project)
 
     const projectRoute = getOwnProjectEditorRoute(projectName)
 
diff --git a/spx-gui/src/components/asset/animation/GroupCostumesModal.vue b/spx-gui/src/components/asset/animation/GroupCostumesModal.vue
index abea982d0..e3258e699 100644
--- a/spx-gui/src/components/asset/animation/GroupCostumesModal.vue
+++ b/spx-gui/src/components/asset/animation/GroupCostumesModal.vue
@@ -56,9 +56,9 @@
 <script setup lang="ts">
 import { ref, reactive, computed } from 'vue'
 import { UIButton, UICheckbox, UIEmpty, UIFormModal } from '@/components/ui'
-import type { Costume } from '@/models/costume'
-import type { Sprite } from '@/models/sprite'
-import { defaultFps } from '@/models/animation'
+import type { Costume } from '@/models/spx/costume'
+import type { Sprite } from '@/models/spx/sprite'
+import { defaultFps } from '@/models/spx/animation'
 import AnimationPlayer from '@/components/editor/sprite/animation/AnimationPlayer.vue'
 import CostumeItem from '@/components/editor/sprite/CheckableCostumeItem.vue'
 
diff --git a/spx-gui/src/components/asset/gen/animation/AnimationGenItem.vue b/spx-gui/src/components/asset/gen/animation/AnimationGenItem.vue
index d53bfb5d3..f34f7bfb8 100644
--- a/spx-gui/src/components/asset/gen/animation/AnimationGenItem.vue
+++ b/spx-gui/src/components/asset/gen/animation/AnimationGenItem.vue
@@ -12,7 +12,7 @@ export function isAnimationsLoading(gens: AnimationGen[]) {
 import { computed, ref } from 'vue'
 
 import { UIBlockItemTitle, UIImg } from '@/components/ui'
-import type { AnimationGen } from '@/models/gen/animation-gen'
+import type { AnimationGen } from '@/models/spx/gen/animation-gen'
 import CornerMenu from '@/components/editor/common/CornerMenu.vue'
 import RenameMenuItem from '@/components/editor/common/corner-menu-item/RenameMenuItem.vue'
 import RemoveMenuItem from '@/components/editor/common/corner-menu-item/RemoveMenuItem.vue'
diff --git a/spx-gui/src/components/asset/gen/animation/AnimationGenPreview.vue b/spx-gui/src/components/asset/gen/animation/AnimationGenPreview.vue
index 8005b9ea8..15192ebe6 100644
--- a/spx-gui/src/components/asset/gen/animation/AnimationGenPreview.vue
+++ b/spx-gui/src/components/asset/gen/animation/AnimationGenPreview.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useMessageHandle } from '@/utils/exception'
-import type { AnimationGen } from '@/models/gen/animation-gen'
+import type { AnimationGen } from '@/models/spx/gen/animation-gen'
 import { UIButton, UIError } from '@/components/ui'
 import AnimationDetail from '@/components/editor/sprite/AnimationDetail.vue'
 import { useRenameAnimationGen } from '../..'
diff --git a/spx-gui/src/components/asset/gen/animation/AnimationSettingsInput.vue b/spx-gui/src/components/asset/gen/animation/AnimationSettingsInput.vue
index 01a6b81d7..feb466bd4 100644
--- a/spx-gui/src/components/asset/gen/animation/AnimationSettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/animation/AnimationSettingsInput.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useMessageHandle } from '@/utils/exception'
-import type { AnimationGen } from '@/models/gen/animation-gen'
+import type { AnimationGen } from '@/models/spx/gen/animation-gen'
 import { UIButton } from '@/components/ui'
 import SettingsInput from '../common/SettingsInput.vue'
 import ReferenceCostumeInput from '../common/ReferenceCostumeInput.vue'
diff --git a/spx-gui/src/components/asset/gen/animation/AnimationVideoPreview.vue b/spx-gui/src/components/asset/gen/animation/AnimationVideoPreview.vue
index f1f25341b..b297a2e07 100644
--- a/spx-gui/src/components/asset/gen/animation/AnimationVideoPreview.vue
+++ b/spx-gui/src/components/asset/gen/animation/AnimationVideoPreview.vue
@@ -106,7 +106,7 @@ import { computed, onScopeDispose, ref, toValue, watch, type Ref, type WatchSour
 import { useFileUrl } from '@/utils/file'
 import { untilNotNull } from '@/utils/utils'
 import type { File } from '@/models/common/file'
-import type { FramesConfig } from '@/models/gen/animation-gen'
+import type { FramesConfig } from '@/models/spx/gen/animation-gen'
 import PlayControl from '@/components/editor/common/PlayControl.vue'
 import GenLoading from '../common/GenLoading.vue'
 
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
index 7223dd79d..811824e10 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { UIButton } from '@/components/ui'
-import type { Backdrop } from '@/models/backdrop'
-import type { BackdropGen } from '@/models/gen/backdrop-gen'
+import type { Backdrop } from '@/models/spx/backdrop'
+import type { BackdropGen } from '@/models/spx/gen/backdrop-gen'
 import { capture, useMessageHandle } from '@/utils/exception'
 import { humanizeRemaining } from '../common/remaining-time'
 import BackdropSettingInput from './BackdropSettingsInput.vue'
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropGenItem.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropGenItem.vue
index d5572dfc4..88a0863dd 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropGenItem.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropGenItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { UIBlockItemTitle } from '@/components/ui'
-import type { BackdropGen } from '@/models/gen/backdrop-gen'
+import type { BackdropGen } from '@/models/spx/gen/backdrop-gen'
 import GenItem from '../common/GenItem.vue'
 import backdropSVG from '../common/backdrop.svg?raw'
 
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropSettingsInput.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropSettingsInput.vue
index a433de996..611f474eb 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropSettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropSettingsInput.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useMessageHandle } from '@/utils/exception'
-import type { BackdropGen } from '@/models/gen/backdrop-gen'
+import type { BackdropGen } from '@/models/spx/gen/backdrop-gen'
 import SettingsInput from '../common/SettingsInput.vue'
 import PerspectiveInput from '../common/PerspectiveInput.vue'
 import ArtStyleInput from '../common/ArtStyleInput.vue'
diff --git a/spx-gui/src/components/asset/gen/common/GenStateFailed.vue b/spx-gui/src/components/asset/gen/common/GenStateFailed.vue
index 61e09a6d7..fc0cef376 100644
--- a/spx-gui/src/components/asset/gen/common/GenStateFailed.vue
+++ b/spx-gui/src/components/asset/gen/common/GenStateFailed.vue
@@ -2,7 +2,7 @@
 import { ApiException, isQuotaExceededMeta } from '@/apis/common/exception'
 import QuotaExceededCountdown from '@/components/common/QuotaExceededCountdown.vue'
 import { UIError } from '@/components/ui'
-import type { PhaseState } from '@/models/gen/common'
+import type { PhaseState } from '@/models/spx/gen/common'
 import { computed } from 'vue'
 
 export type PhaseStateFailed<R> = Extract<PhaseState<R>, { status: 'failed' }>
diff --git a/spx-gui/src/components/asset/gen/common/ImageSelector.vue b/spx-gui/src/components/asset/gen/common/ImageSelector.vue
index e64e836ab..fd3cfe414 100644
--- a/spx-gui/src/components/asset/gen/common/ImageSelector.vue
+++ b/spx-gui/src/components/asset/gen/common/ImageSelector.vue
@@ -23,7 +23,7 @@ export function useImageSelectorDisabled(): ComputedRef<boolean> {
 import { computed, provide, ref } from 'vue'
 import { useContentSize } from '@/utils/dom'
 import type { File } from '@/models/common/file'
-import type { PhaseState } from '@/models/gen/common'
+import type { PhaseState } from '@/models/spx/gen/common'
 
 const props = withDefaults(
   defineProps<{
diff --git a/spx-gui/src/components/asset/gen/common/ReferenceCostumeInput.vue b/spx-gui/src/components/asset/gen/common/ReferenceCostumeInput.vue
index 19f60fefb..d73705f57 100644
--- a/spx-gui/src/components/asset/gen/common/ReferenceCostumeInput.vue
+++ b/spx-gui/src/components/asset/gen/common/ReferenceCostumeInput.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useAsyncComputed } from '@/utils/utils'
-import type { Costume } from '@/models/costume'
+import type { Costume } from '@/models/spx/costume'
 import ParamSelector from './param-settings/ParamSelector.vue'
 import imgCostume from './param-settings/assets/costume.svg'
 
diff --git a/spx-gui/src/components/asset/gen/costume/CostumeGenItem.vue b/spx-gui/src/components/asset/gen/costume/CostumeGenItem.vue
index 9268eaecb..03f22343a 100644
--- a/spx-gui/src/components/asset/gen/costume/CostumeGenItem.vue
+++ b/spx-gui/src/components/asset/gen/costume/CostumeGenItem.vue
@@ -11,7 +11,7 @@ export function isCostumesLoading(gens: CostumeGen[]) {
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { UIBlockItemTitle, UIImg } from '@/components/ui'
-import type { CostumeGen } from '@/models/gen/costume-gen'
+import type { CostumeGen } from '@/models/spx/gen/costume-gen'
 import CornerMenu from '@/components/editor/common/CornerMenu.vue'
 import RenameMenuItem from '@/components/editor/common/corner-menu-item/RenameMenuItem.vue'
 import RemoveMenuItem from '@/components/editor/common/corner-menu-item/RemoveMenuItem.vue'
diff --git a/spx-gui/src/components/asset/gen/costume/CostumeGenPreview.vue b/spx-gui/src/components/asset/gen/costume/CostumeGenPreview.vue
index 0b2ba3cfb..885f143e8 100644
--- a/spx-gui/src/components/asset/gen/costume/CostumeGenPreview.vue
+++ b/spx-gui/src/components/asset/gen/costume/CostumeGenPreview.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import { useMessageHandle } from '@/utils/exception'
 import { useFileUrl } from '@/utils/file'
 import { humanizeRemaining } from '../common/remaining-time'
-import type { CostumeGen } from '@/models/gen/costume-gen'
+import type { CostumeGen } from '@/models/spx/gen/costume-gen'
 import { UIImg, UIButton, UIError } from '@/components/ui'
 import CostumeDetail from '@/components/editor/sprite/CostumeDetail.vue'
 import { useRenameCostumeGen } from '../..'
diff --git a/spx-gui/src/components/asset/gen/costume/CostumeSettingsInput.vue b/spx-gui/src/components/asset/gen/costume/CostumeSettingsInput.vue
index 6c97ad066..8c97d50cc 100644
--- a/spx-gui/src/components/asset/gen/costume/CostumeSettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/costume/CostumeSettingsInput.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useMessageHandle } from '@/utils/exception'
-import type { CostumeGen } from '@/models/gen/costume-gen'
+import type { CostumeGen } from '@/models/spx/gen/costume-gen'
 import { UIButton } from '@/components/ui'
 import SettingsInput from '../common/SettingsInput.vue'
 import ReferenceCostumeInput from '../common/ReferenceCostumeInput.vue'
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue
index 0b5bca8e2..d09638cd8 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computedShallowReactive } from '@/utils/utils'
-import type { SpriteGen } from '@/models/gen/sprite-gen'
-import type { Sprite } from '@/models/sprite'
+import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
+import type { Sprite } from '@/models/spx/sprite'
 import { provideLocalEditorCtx, useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import SpriteGenPhaseSettings from './SpriteGenPhaseSettings.vue'
 import SpriteGenPhaseContent from './SpriteGenPhaseContent.vue'
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenItem.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenItem.vue
index 51d2bbaac..ebc43ca81 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenItem.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenItem.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { UIBlockItemTitle } from '@/components/ui'
-import type { SpriteGen } from '@/models/gen/sprite-gen'
+import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import { computed } from 'vue'
 import GenItem from '../common/GenItem.vue'
 import spriteSVG from '../common/sprite.svg?raw'
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
index 61d08c839..1904bfe9e 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { Sprite } from '@/models/sprite'
-import type { SpriteGen } from '@/models/gen/sprite-gen'
+import type { Sprite } from '@/models/spx/sprite'
+import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import { UIFormModal } from '@/components/ui'
 import SpriteGenComp from './SpriteGen.vue'
 
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
index 730130fa5..35f05649a 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
@@ -8,10 +8,10 @@
 import { computed, watch } from 'vue'
 import { useI18n, type LocaleMessage } from '@/utils/i18n'
 import { capture, useMessageHandle } from '@/utils/exception'
-import type { Sprite } from '@/models/sprite'
-import type { SpriteGen } from '@/models/gen/sprite-gen'
-import type { CostumeGen } from '@/models/gen/costume-gen'
-import type { AnimationGen } from '@/models/gen/animation-gen'
+import type { Sprite } from '@/models/spx/sprite'
+import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
+import type { CostumeGen } from '@/models/spx/gen/costume-gen'
+import type { AnimationGen } from '@/models/spx/gen/animation-gen'
 import { UIButton, UITooltip, useConfirmDialog, type ConfirmOptions } from '@/components/ui'
 import { useRenameAnimationGen, useRenameCostumeGen } from '../..'
 import CostumeSettingInput from '../costume/CostumeSettingsInput.vue'
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
index 7429dd7c9..6887b2929 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { UIButton } from '@/components/ui'
-import type { SpriteGen } from '@/models/gen/sprite-gen'
+import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import { useMessageHandle } from '@/utils/exception'
 import { humanizeRemaining } from '../common/remaining-time'
 import LayoutWithPreview from '../common/LayoutWithPreview.vue'
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue b/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue
index 60afc5b8b..1db68f5ef 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useMessageHandle } from '@/utils/exception'
-import type { SpriteGen } from '@/models/gen/sprite-gen'
+import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import SettingsInput from '../common/SettingsInput.vue'
 import SpriteCategoryInput from './SpriteCategoryInput.vue'
 import ArtStyleInput from '../common/ArtStyleInput.vue'
diff --git a/spx-gui/src/components/asset/index.ts b/spx-gui/src/components/asset/index.ts
index b110ab334..8b1af1b6f 100644
--- a/spx-gui/src/components/asset/index.ts
+++ b/spx-gui/src/components/asset/index.ts
@@ -5,18 +5,18 @@ import { parseScratchFileAssets } from '@/utils/scratch'
 import { stripExt } from '@/utils/path'
 import { useI18n } from '@/utils/i18n'
 import { useNetwork } from '@/utils/network'
-import { type AssetModel } from '@/models/common/asset'
+import { type AssetModel } from '@/models/spx/common/asset'
 import { fromNativeFile } from '@/models/common/file'
-import { type Project } from '@/models/project'
-import { Backdrop } from '@/models/backdrop'
-import { Sound } from '@/models/sound'
-import { Sprite } from '@/models/sprite'
-import { Animation } from '@/models/animation'
+import { type SpxProject } from '@/models/spx/project'
+import { Backdrop } from '@/models/spx/backdrop'
+import { Sound } from '@/models/spx/sound'
+import { Sprite } from '@/models/spx/sprite'
+import { Animation } from '@/models/spx/animation'
 import { selectFileWithUploadLimit, selectFilesWithUploadLimit, saveFiles } from '@/models/common/cloud'
-import { Monitor } from '@/models/widget/monitor'
-import * as assetName from '@/models/common/asset-name'
-import { Costume } from '@/models/costume'
-import type { Widget } from '@/models/widget'
+import { Monitor } from '@/models/spx/widget/monitor'
+import * as assetName from '@/models/spx/common/asset-name'
+import { Costume } from '@/models/spx/costume'
+import type { Widget } from '@/models/spx/widget'
 import RenameModal from '../common/RenameModal.vue'
 import SoundRecorderModal from '../editor/sound/SoundRecorderModal.vue'
 import { useEditorCtx } from '../editor/EditorContextProvider.vue'
@@ -29,15 +29,15 @@ import PreprocessModal from './preprocessing/PreprocessModal.vue'
 import GroupCostumesModal from './animation/GroupCostumesModal.vue'
 import AssetLibraryManagementModal from './library/management/AssetLibraryManagementModal.vue'
 import SpriteGenModal from './gen/sprite/SpriteGenModal.vue'
-import { SpriteGen } from '@/models/gen/sprite-gen'
-import { BackdropGen } from '@/models/gen/backdrop-gen'
-import type { CostumeGen } from '@/models/gen/costume-gen'
-import type { AnimationGen } from '@/models/gen/animation-gen'
+import { SpriteGen } from '@/models/spx/gen/sprite-gen'
+import { BackdropGen } from '@/models/spx/gen/backdrop-gen'
+import type { CostumeGen } from '@/models/spx/gen/costume-gen'
+import type { AnimationGen } from '@/models/spx/gen/animation-gen'
 
 export function useAddAssetFromLibrary() {
   const editorCtx = useEditorCtx()
   const invokeAssetLibraryModal = useModal(AssetLibraryModal)
-  return async function addAssetFromLibrary<T extends AssetType>(project: Project, type: T) {
+  return async function addAssetFromLibrary<T extends AssetType>(project: SpxProject, type: T) {
     return (await invokeAssetLibraryModal({
       project,
       type,
@@ -72,7 +72,7 @@ export function useAssetLibraryManagement() {
 
 export function useLoadFromScratchModal() {
   const invokeModal = useModal(LoadFromScratchModal)
-  return async function loadFromScratchModal(project: Project) {
+  return async function loadFromScratchModal(project: SpxProject) {
     const file = await selectFile({ accept: ['sb3'] })
     const exportedScratchAssets = await parseScratchFileAssets(file)
     return invokeModal({ project, exportedScratchAssets })
@@ -80,8 +80,9 @@ export function useLoadFromScratchModal() {
 }
 
 export function useAddSpriteFromLocalFile() {
+  const editorCtx = useEditorCtx()
   const preprocess = useModal(PreprocessModal)
-  return async function addSpriteFromLocalFile(project: Project) {
+  return async function addSpriteFromLocalFile(project: SpxProject) {
     const actionMessage = { en: 'Add sprite', zh: '添加精灵' }
     const nativeFiles = await selectFilesWithUploadLimit({ accept: imgExts })
     const files = nativeFiles.map((f) => fromNativeFile(f))
@@ -95,7 +96,7 @@ export function useAddSpriteFromLocalFile() {
     for (const costume of costumes) {
       sprite.addCostume(costume)
     }
-    await project.history.doAction({ name: actionMessage }, async () => {
+    await editorCtx.state.history.doAction({ name: actionMessage }, async () => {
       project.addSprite(sprite)
       await sprite.autoFit()
     })
@@ -104,8 +105,9 @@ export function useAddSpriteFromLocalFile() {
 }
 
 export function useAddCostumeFromLocalFile() {
+  const editorCtx = useEditorCtx()
   const preprocess = useModal(PreprocessModal)
-  return async function addCostumeFromLocalFile(sprite: Sprite, project: Project) {
+  return async function addCostumeFromLocalFile(sprite: Sprite) {
     const actionMessage = { en: 'Add costume', zh: '添加造型' }
     const nativeFiles = await selectFilesWithUploadLimit({ accept: imgExts })
     const files = nativeFiles.map((f) => fromNativeFile(f))
@@ -114,7 +116,7 @@ export function useAddCostumeFromLocalFile() {
       title: actionMessage,
       confirmText: { en: 'Add', zh: '添加' }
     })
-    await project.history.doAction({ name: actionMessage }, async () => {
+    await editorCtx.state.history.doAction({ name: actionMessage }, async () => {
       for (const costume of costumes) sprite.addCostume(costume)
     })
     return costumes
@@ -122,10 +124,11 @@ export function useAddCostumeFromLocalFile() {
 }
 
 export function useAddSoundFromLocalFile() {
+  const editorCtx = useEditorCtx()
   const m = useMessage()
   const { t } = useI18n()
   const { isOnline } = useNetwork()
-  return async function addSoundFromLocalFile(project: Project) {
+  return async function addSoundFromLocalFile(project: SpxProject) {
     const audio = await selectFileWithUploadLimit({ accept: await getSupportedAudioExts() })
     const sound = await Sound.create(stripExt(audio.name), fromNativeFile(audio))
 
@@ -134,23 +137,24 @@ export function useAddSoundFromLocalFile() {
     }
 
     const action = { name: { en: 'Add sound', zh: '添加声音' } }
-    await project.history.doAction(action, () => project.addSound(sound))
+    await editorCtx.state.history.doAction(action, () => project.addSound(sound))
     return sound
   }
 }
 
 export function useAddSoundByRecording() {
   const invokeSoundRecorderModal = useModal(SoundRecorderModal)
-  return async function addSoundFromRecording(project: Project): Promise<Sound> {
+  return async function addSoundFromRecording(project: SpxProject): Promise<Sound> {
     return invokeSoundRecorderModal({ project })
   }
 }
 
 export function useAddBackdropFromLocalFile() {
+  const editorCtx = useEditorCtx()
   const m = useMessage()
   const { t } = useI18n()
   const { isOnline } = useNetwork()
-  return async function addBackdropFromLocalFile(project: Project) {
+  return async function addBackdropFromLocalFile(project: SpxProject) {
     const img = await selectFileWithUploadLimit({ accept: imgExts })
     const file = fromNativeFile(img)
     const backdrop = await Backdrop.create(stripExt(img.name), file)
@@ -161,7 +165,7 @@ export function useAddBackdropFromLocalFile() {
       await m.withLoading(saveFiles(backdropFiles), t({ en: 'Uploading files', zh: '上传文件中' }))
     }
 
-    await project.history.doAction(action, () => {
+    await editorCtx.state.history.doAction(action, () => {
       const stage = project.stage
       stage.addBackdrop(backdrop)
     })
@@ -170,11 +174,12 @@ export function useAddBackdropFromLocalFile() {
 }
 
 export function useAddAnimationByGroupingCostumes() {
+  const editorCtx = useEditorCtx()
   const invokeGroupCostumesModal = useModal(GroupCostumesModal)
-  return async function addAnimationByGroupingCostumes(project: Project, sprite: Sprite) {
+  return async function addAnimationByGroupingCostumes(project: SpxProject, sprite: Sprite) {
     const { selectedCostumes, removeCostumes } = await invokeGroupCostumesModal({ sprite })
     const action = { name: { en: 'Group costumes as animation', zh: '合并造型为动画' } }
-    return project.history.doAction(action, () => {
+    return editorCtx.state.history.doAction(action, () => {
       const costumes = selectedCostumes.map((costume) => costume.clone())
       const animation = Animation.create('', costumes)
       sprite.addAnimation(animation)
@@ -191,10 +196,11 @@ export function useAddAnimationByGroupingCostumes() {
 }
 
 export function useAddMonitor() {
-  return async function addMonitor(project: Project) {
+  const editorCtx = useEditorCtx()
+  return async function addMonitor(project: SpxProject) {
     const monitor = await Monitor.create()
     const action = { name: { en: 'Add widget', zh: '添加控件' } }
-    await project.history.doAction(action, () => {
+    await editorCtx.state.history.doAction(action, () => {
       project.stage.addWidget(monitor)
     })
     return monitor
@@ -215,7 +221,7 @@ export function useRenameSprite() {
         },
         async applyName(newName) {
           const action = { name: { en: 'Rename sprite', zh: '重命名精灵' } }
-          await editorCtx.project.history.doAction(action, async () => {
+          await editorCtx.state.history.doAction(action, async () => {
             await codeEditorCtx.mustEditor().renameResource(getResourceIdentifier(sprite), newName)
             sprite.setName(newName)
           })
@@ -241,7 +247,7 @@ export function useRenameSound() {
         },
         async applyName(newName) {
           const action = { name: { en: 'Rename sound', zh: '重命名声音' } }
-          await editorCtx.project.history.doAction(action, async () => {
+          await editorCtx.state.history.doAction(action, async () => {
             await codeEditorCtx.mustEditor().renameResource(getResourceIdentifier(sound), newName)
             sound.setName(newName)
           })
@@ -267,7 +273,7 @@ export function useRenameCostume() {
         },
         async applyName(newName) {
           const action = { name: { en: 'Rename costume', zh: '重命名造型' } }
-          await editorCtx.project.history.doAction(action, async () => {
+          await editorCtx.state.history.doAction(action, async () => {
             await codeEditorCtx.mustEditor().renameResource(getResourceIdentifier(costume), newName)
             costume.setName(newName)
           })
@@ -293,7 +299,7 @@ export function useRenameBackdrop() {
         },
         async applyName(newName) {
           const action = { name: { en: 'Rename backdrop', zh: '重命名背景' } }
-          await editorCtx.project.history.doAction(action, async () => {
+          await editorCtx.state.history.doAction(action, async () => {
             await codeEditorCtx.mustEditor().renameResource(getResourceIdentifier(backdrop), newName)
             backdrop.setName(newName)
           })
@@ -319,7 +325,7 @@ export function useRenameAnimation() {
         },
         async applyName(newName) {
           const action = { name: { en: 'Rename animation', zh: '重命名动画' } }
-          await editorCtx.project.history.doAction(action, async () => {
+          await editorCtx.state.history.doAction(action, async () => {
             await codeEditorCtx.mustEditor().renameResource(getResourceIdentifier(animation), newName)
             animation.setName(newName)
           })
@@ -345,7 +351,7 @@ export function useRenameWidget() {
         },
         async applyName(newName) {
           const action = { name: { en: 'Rename widget', zh: '重命名控件' } }
-          await editorCtx.project.history.doAction(action, async () => {
+          await editorCtx.state.history.doAction(action, async () => {
             await codeEditorCtx.mustEditor().renameResource(getResourceIdentifier(widget), newName)
             widget.setName(newName)
           })
diff --git a/spx-gui/src/components/asset/library/AssetLibraryModal.vue b/spx-gui/src/components/asset/library/AssetLibraryModal.vue
index 762d7e7a3..ace72b3d9 100644
--- a/spx-gui/src/components/asset/library/AssetLibraryModal.vue
+++ b/spx-gui/src/components/asset/library/AssetLibraryModal.vue
@@ -17,8 +17,15 @@ import { debounce } from 'lodash'
 import { useI18n } from '@/utils/i18n'
 import { useMessageHandle } from '@/utils/exception'
 import { useQuery } from '@/utils/query'
-import { type Project } from '@/models/project'
-import { asset2Backdrop, asset2Sound, asset2Sprite, type AssetGenModel, type AssetModel } from '@/models/common/asset'
+import { type SpxProject } from '@/models/spx/project'
+import {
+  asset2Backdrop,
+  asset2Sound,
+  asset2Sprite,
+  type AssetGenModel,
+  type AssetModel
+} from '@/models/spx/common/asset'
+import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import ListResultWrapper from '@/components/common/ListResultWrapper.vue'
 import { getAssetCategories } from './category'
 import SoundItem from './SoundItem.vue'
@@ -26,8 +33,8 @@ import SpriteItem from './SpriteItem.vue'
 import BackdropItem from './BackdropItem.vue'
 import SpriteSettingsInput from '@/components/asset/gen/sprite/SpriteSettingsInput.vue'
 import BackdropSettingsInput from '@/components/asset/gen/backdrop/BackdropSettingsInput.vue'
-import { SpriteGen } from '@/models/gen/sprite-gen'
-import { BackdropGen } from '@/models/gen/backdrop-gen'
+import { SpriteGen } from '@/models/spx/gen/sprite-gen'
+import { BackdropGen } from '@/models/spx/gen/backdrop-gen'
 import { ownerAll } from '@/apis/common'
 import SpriteGenComp from '../gen/sprite/SpriteGen.vue'
 import BackdropGenComp from '../gen/backdrop/BackdropGen.vue'
@@ -40,7 +47,7 @@ import soundBanner from './asset-library-sound-banner.png'
 const props = defineProps<{
   type: AssetType
   visible: boolean
-  project: Project
+  project: SpxProject
   /**
    * When collapse is triggered, we first need to use genCollapseHandler to implement
    * the logic for collapsing generation (e.g., adding it to the editor-state context),
@@ -55,6 +62,8 @@ const emit = defineEmits<{
   resolved: [AssetModel[]]
 }>()
 
+const editorCtx = useEditorCtx()
+
 const i18n = useI18n()
 const searchInput = ref('')
 const keyword = ref('')
@@ -255,7 +264,9 @@ const handleConfirm = useMessageHandle(
     const action = {
       name: { en: `Add ${entityMessage.value.en}`, zh: `添加${entityMessage.value.zh}` }
     }
-    const assetModels = await props.project.history.doAction(action, () => Promise.all(selected.map(addAssetToProject)))
+    const assetModels = await editorCtx.state.history.doAction(action, () =>
+      Promise.all(selected.map(addAssetToProject))
+    )
     emit('resolved', assetModels)
   },
   { en: 'Failed to add asset', zh: '素材添加失败' }
@@ -324,7 +335,7 @@ const handleGenFinished = useMessageHandle(
     // Consider moving asset addition outside AssetLibraryModal for better separation of concerns.
     // However, this would introduce a delay between the modal close and assets addition, potentially degrading UX.
     // TODO: Review this trade-off
-    const added = await props.project.history.doAction(
+    const added = await editorCtx.state.history.doAction(
       {
         name: { en: `Add ${entityMessage.value.en}`, zh: `添加${entityMessage.value.zh}` }
       },
diff --git a/spx-gui/src/components/asset/library/AssetSaveModal.vue b/spx-gui/src/components/asset/library/AssetSaveModal.vue
index 0f10d6b39..56b8ede5a 100644
--- a/spx-gui/src/components/asset/library/AssetSaveModal.vue
+++ b/spx-gui/src/components/asset/library/AssetSaveModal.vue
@@ -15,12 +15,12 @@ import {
 } from '@/components/ui'
 import { type AssetData, addAsset, listAsset, Visibility, AssetType, getAsset, updateAsset } from '@/apis/asset'
 import { useMessageHandle } from '@/utils/exception'
-import { Backdrop } from '@/models/backdrop'
-import { Sound } from '@/models/sound'
-import { Sprite } from '@/models/sprite'
-import { validateAssetDisplayName, getAssetDisplayNameTip } from '@/models/common/asset-name'
-import type { AssetModel, PartialAssetData } from '@/models/common/asset'
-import { backdrop2Asset, sound2Asset, sprite2Asset } from '@/models/common/asset'
+import { Backdrop } from '@/models/spx/backdrop'
+import { Sound } from '@/models/spx/sound'
+import { Sprite } from '@/models/spx/sprite'
+import { validateAssetDisplayName, getAssetDisplayNameTip } from '@/models/spx/common/asset-name'
+import type { AssetModel, PartialAssetData } from '@/models/spx/common/asset'
+import { backdrop2Asset, sound2Asset, sprite2Asset } from '@/models/spx/common/asset'
 import { useI18n } from '@/utils/i18n'
 import { useQuery } from '@/utils/query'
 import { useSignedInUser } from '@/stores/user'
diff --git a/spx-gui/src/components/asset/library/BackdropItem.vue b/spx-gui/src/components/asset/library/BackdropItem.vue
index 22bab9a89..1aae88043 100644
--- a/spx-gui/src/components/asset/library/BackdropItem.vue
+++ b/spx-gui/src/components/asset/library/BackdropItem.vue
@@ -13,7 +13,7 @@
 import { UIBackdropItem, UICornerIcon } from '@/components/ui'
 import { useFileUrl } from '@/utils/file'
 import type { AssetData } from '@/apis/asset'
-import { asset2Backdrop } from '@/models/common/asset'
+import { asset2Backdrop } from '@/models/spx/common/asset'
 import { useAsyncComputedLegacy } from '@/utils/utils'
 
 const props = defineProps<{
diff --git a/spx-gui/src/components/asset/library/BackdropPreview.vue b/spx-gui/src/components/asset/library/BackdropPreview.vue
index 39c7caffd..02de2cd97 100644
--- a/spx-gui/src/components/asset/library/BackdropPreview.vue
+++ b/spx-gui/src/components/asset/library/BackdropPreview.vue
@@ -6,8 +6,8 @@
 import { useAsyncComputedLegacy } from '@/utils/utils'
 import { useFileUrl } from '@/utils/file'
 import type { AssetData } from '@/apis/asset'
-import { asset2Backdrop } from '@/models/common/asset'
-import { Backdrop } from '@/models/backdrop'
+import { asset2Backdrop } from '@/models/spx/common/asset'
+import { Backdrop } from '@/models/spx/backdrop'
 import { UIImg } from '@/components/ui'
 
 const props = defineProps<{
diff --git a/spx-gui/src/components/asset/library/SoundItem.vue b/spx-gui/src/components/asset/library/SoundItem.vue
index 5d5a7805a..e34f1927f 100644
--- a/spx-gui/src/components/asset/library/SoundItem.vue
+++ b/spx-gui/src/components/asset/library/SoundItem.vue
@@ -11,7 +11,7 @@
 import { useFileUrl } from '@/utils/file'
 import type { AssetData } from '@/apis/asset'
 import SoundPlayer from '@/components/editor/sound/SoundPlayer.vue'
-import { asset2Sound } from '@/models/common/asset'
+import { asset2Sound } from '@/models/spx/common/asset'
 import { useAsyncComputedLegacy } from '@/utils/utils'
 import { useAudioDuration } from '@/utils/audio'
 import { UISoundItem, UICornerIcon } from '@/components/ui'
diff --git a/spx-gui/src/components/asset/library/SoundPreview.vue b/spx-gui/src/components/asset/library/SoundPreview.vue
index 2c3bfed9a..b48eae5ec 100644
--- a/spx-gui/src/components/asset/library/SoundPreview.vue
+++ b/spx-gui/src/components/asset/library/SoundPreview.vue
@@ -7,9 +7,9 @@
 <script setup lang="ts">
 import { useAsyncComputedLegacy } from '@/utils/utils'
 import { useFileUrl } from '@/utils/file'
-import { asset2Sound } from '@/models/common/asset'
+import { asset2Sound } from '@/models/spx/common/asset'
 import type { AssetData } from '@/apis/asset'
-import { Sound } from '@/models/sound'
+import { Sound } from '@/models/spx/sound'
 import SoundPlayer from '@/components/editor/sound/SoundPlayer.vue'
 
 const props = defineProps<{
diff --git a/spx-gui/src/components/asset/library/SpriteItem.vue b/spx-gui/src/components/asset/library/SpriteItem.vue
index 67f3107ab..08eeadf4f 100644
--- a/spx-gui/src/components/asset/library/SpriteItem.vue
+++ b/spx-gui/src/components/asset/library/SpriteItem.vue
@@ -19,7 +19,7 @@ import { computed, ref } from 'vue'
 import { UIImg, UISpriteItem, UICornerIcon } from '@/components/ui'
 import { useFileUrl } from '@/utils/file'
 import type { AssetData } from '@/apis/asset'
-import { asset2Sprite } from '@/models/common/asset'
+import { asset2Sprite } from '@/models/spx/common/asset'
 import { useAsyncComputedLegacy } from '@/utils/utils'
 import { useHovered } from '@/utils/dom'
 import CostumesAutoPlayer from '@/components/common/CostumesAutoPlayer.vue'
diff --git a/spx-gui/src/components/asset/library/SpritePreview.vue b/spx-gui/src/components/asset/library/SpritePreview.vue
index 369c124c7..5bd2a73a2 100644
--- a/spx-gui/src/components/asset/library/SpritePreview.vue
+++ b/spx-gui/src/components/asset/library/SpritePreview.vue
@@ -6,8 +6,8 @@
 import { useAsyncComputedLegacy } from '@/utils/utils'
 import { useFileUrl } from '@/utils/file'
 import type { AssetData } from '@/apis/asset'
-import { asset2Sprite } from '@/models/common/asset'
-import { Sprite } from '@/models/sprite'
+import { asset2Sprite } from '@/models/spx/common/asset'
+import { Sprite } from '@/models/spx/sprite'
 import { UIImg } from '@/components/ui'
 
 const props = defineProps<{
diff --git a/spx-gui/src/components/asset/library/management/AssetEditModal.vue b/spx-gui/src/components/asset/library/management/AssetEditModal.vue
index 72697c00a..77d4bf13b 100644
--- a/spx-gui/src/components/asset/library/management/AssetEditModal.vue
+++ b/spx-gui/src/components/asset/library/management/AssetEditModal.vue
@@ -4,7 +4,7 @@ import { UIForm, UIFormItem, UITextInput, UIButton, UIFormModal, UIRadio, UIRadi
 import { useMessageHandle } from '@/utils/exception'
 import { useI18n } from '@/utils/i18n'
 import { type AssetData, AssetType, updateAsset } from '@/apis/asset'
-import { validateAssetDisplayName } from '@/models/common/asset-name'
+import { validateAssetDisplayName } from '@/models/spx/common/asset-name'
 import { getAssetCategories } from '../category'
 import BackdropPreview from '../BackdropPreview.vue'
 import SpritePreview from '../SpritePreview.vue'
diff --git a/spx-gui/src/components/asset/library/management/BackdropItem.vue b/spx-gui/src/components/asset/library/management/BackdropItem.vue
index b82c1f6e0..aad2b81c3 100644
--- a/spx-gui/src/components/asset/library/management/BackdropItem.vue
+++ b/spx-gui/src/components/asset/library/management/BackdropItem.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import { useAsyncComputedLegacy } from '@/utils/utils'
 import { useFileUrl } from '@/utils/file'
 import type { AssetData } from '@/apis/asset'
-import { asset2Backdrop } from '@/models/common/asset'
+import { asset2Backdrop } from '@/models/spx/common/asset'
 import { UIBackdropItem } from '@/components/ui'
 
 const props = defineProps<{
diff --git a/spx-gui/src/components/asset/library/management/SoundItem.vue b/spx-gui/src/components/asset/library/management/SoundItem.vue
index b9bcbc7e3..a883610e0 100644
--- a/spx-gui/src/components/asset/library/management/SoundItem.vue
+++ b/spx-gui/src/components/asset/library/management/SoundItem.vue
@@ -4,7 +4,7 @@ import { useFileUrl } from '@/utils/file'
 import { useAsyncComputedLegacy } from '@/utils/utils'
 import { useAudioDuration } from '@/utils/audio'
 import type { AssetData } from '@/apis/asset'
-import { asset2Sound } from '@/models/common/asset'
+import { asset2Sound } from '@/models/spx/common/asset'
 import { UISoundItem } from '@/components/ui'
 import SoundPlayer from '@/components/editor/sound/SoundPlayer.vue'
 
diff --git a/spx-gui/src/components/asset/library/management/SpriteItem.vue b/spx-gui/src/components/asset/library/management/SpriteItem.vue
index 81eeb3df7..d0deea8ff 100644
--- a/spx-gui/src/components/asset/library/management/SpriteItem.vue
+++ b/spx-gui/src/components/asset/library/management/SpriteItem.vue
@@ -4,7 +4,7 @@ import { useHovered } from '@/utils/dom'
 import { useFileUrl } from '@/utils/file'
 import { useAsyncComputedLegacy } from '@/utils/utils'
 import type { AssetData } from '@/apis/asset'
-import { asset2Sprite } from '@/models/common/asset'
+import { asset2Sprite } from '@/models/spx/common/asset'
 import { UIImg, UISpriteItem } from '@/components/ui'
 import CostumesAutoPlayer from '@/components/common/CostumesAutoPlayer.vue'
 
diff --git a/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue b/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
index cbd8d278a..14716c37e 100644
--- a/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
+++ b/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
@@ -106,7 +106,7 @@ import { computed, ref, shallowReactive, shallowRef, watch } from 'vue'
 import { stripExt } from '@/utils/path'
 import type { LocaleMessage } from '@/utils/i18n'
 import { disableAIGC } from '@/utils/env'
-import { Costume } from '@/models/costume'
+import { Costume } from '@/models/spx/costume'
 import { File } from '@/models/common/file'
 import { UIButton, UIFormModal } from '@/components/ui'
 import type { MethodComponent } from './common/types'
diff --git a/spx-gui/src/components/asset/preprocessing/remove-background/RemoveBackground.vue b/spx-gui/src/components/asset/preprocessing/remove-background/RemoveBackground.vue
index 700251501..fb1eed0cb 100644
--- a/spx-gui/src/components/asset/preprocessing/remove-background/RemoveBackground.vue
+++ b/spx-gui/src/components/asset/preprocessing/remove-background/RemoveBackground.vue
@@ -18,7 +18,7 @@ import { getImgDrawingCtx } from '@/utils/canvas'
 import { taskRemoveBackgroundSupportedImgExts, TaskType } from '@/apis/aigc'
 import { createFileWithUniversalUrl, saveFile } from '@/models/common/cloud'
 import { fromBlob, toNativeFile, File } from '@/models/common/file'
-import { Task } from '@/models/gen/common'
+import { Task } from '@/models/spx/gen/common'
 import type { MethodComponentEmits, MethodComponentProps } from '../common/types'
 import ProcessDetail from '../common/ProcessDetail.vue'
 import ImgPreview from '../common/ImgPreview.vue'
diff --git a/spx-gui/src/components/asset/scratch/LoadFromScratch.vue b/spx-gui/src/components/asset/scratch/LoadFromScratch.vue
index 569ce1c57..4d824c4ff 100644
--- a/spx-gui/src/components/asset/scratch/LoadFromScratch.vue
+++ b/spx-gui/src/components/asset/scratch/LoadFromScratch.vue
@@ -45,30 +45,33 @@
 <script setup lang="ts">
 import { shallowReactive, watch } from 'vue'
 import { NGrid, NGridItem } from 'naive-ui'
-import { Sound } from '@/models/sound'
-import { Sprite } from '@/models/sprite'
+import { Sound } from '@/models/spx/sound'
+import { Sprite } from '@/models/spx/sprite'
 import { type ExportedScratchAssets, type ExportedScratchFile } from '@/utils/scratch'
-import { Backdrop } from '@/models/backdrop'
-import { Costume } from '@/models/costume'
+import { Backdrop } from '@/models/spx/backdrop'
+import { Costume } from '@/models/spx/costume'
 import { fromBlob } from '@/models/common/file'
 import { useMessageHandle } from '@/utils/exception'
 import type { ExportedScratchCostume, ExportedScratchSound, ExportedScratchSprite } from '@/utils/scratch'
-import { type Project } from '@/models/project'
-import type { AssetModel } from '@/models/common/asset'
+import { type SpxProject } from '@/models/spx/project'
+import type { AssetModel } from '@/models/spx/common/asset'
 import { UIButton } from '@/components/ui'
+import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import SoundItem from './SoundItem.vue'
 import SpriteItem from './SpriteItem.vue'
 import BackdropItem from './BackdropItem.vue'
 
 const props = defineProps<{
   scratchAssets: ExportedScratchAssets
-  project: Project
+  project: SpxProject
 }>()
 
 const emit = defineEmits<{
   imported: [AssetModel[]]
 }>()
 
+const editorCtx = useEditorCtx()
+
 const selected = {
   backdrops: shallowReactive(new Set<ExportedScratchCostume>()),
   sounds: shallowReactive(new Set<ExportedScratchSound>()),
@@ -111,7 +114,6 @@ const selectBackdrop = (backdrop: ExportedScratchCostume) => {
 const scratchToSpxFile = (scratchFile: ExportedScratchFile) => {
   return fromBlob(`${scratchFile.name}.${scratchFile.extension}`, scratchFile.blob)
 }
-
 const importSprite = async (asset: ExportedScratchSprite) => {
   const costumes = await Promise.all(
     asset.costumes.map((costume) =>
@@ -153,7 +155,7 @@ const importSelected = useMessageHandle(
   async () => {
     const { sprites, sounds, backdrops } = selected
     const action = { name: { en: 'Import from Scratch file', zh: '从 Scratch 项目文件导入' } }
-    const imported = await props.project.history.doAction(action, () =>
+    const imported = await editorCtx.state.history.doAction(action, () =>
       Promise.all([
         ...Array.from(sprites).map(importSprite),
         ...Array.from(sounds).map(importSound),
diff --git a/spx-gui/src/components/asset/scratch/LoadFromScratchModal.vue b/spx-gui/src/components/asset/scratch/LoadFromScratchModal.vue
index f6aa34f33..a68804db5 100644
--- a/spx-gui/src/components/asset/scratch/LoadFromScratchModal.vue
+++ b/spx-gui/src/components/asset/scratch/LoadFromScratchModal.vue
@@ -14,14 +14,14 @@
   </UIFormModal>
 </template>
 <script setup lang="ts">
-import type { Project } from '@/models/project'
+import type { SpxProject } from '@/models/spx/project'
 import { UIFormModal } from '@/components/ui'
 import type { ExportedScratchAssets } from '@/utils/scratch'
-import type { AssetModel } from '@/models/common/asset'
+import type { AssetModel } from '@/models/spx/common/asset'
 import LoadFromScratch from './LoadFromScratch.vue'
 
 defineProps<{
-  project: Project
+  project: SpxProject
   exportedScratchAssets: ExportedScratchAssets
   visible: boolean
 }>()
diff --git a/spx-gui/src/components/asset/scratch/SpriteItem.vue b/spx-gui/src/components/asset/scratch/SpriteItem.vue
index 7c6d59587..24c1d6ef1 100644
--- a/spx-gui/src/components/asset/scratch/SpriteItem.vue
+++ b/spx-gui/src/components/asset/scratch/SpriteItem.vue
@@ -20,8 +20,8 @@ import { UIImg, UISpriteItem, UICornerIcon } from '@/components/ui'
 import { useHovered } from '@/utils/dom'
 import type { ExportedScratchCostume, ExportedScratchSprite } from '@/utils/scratch'
 import { fromBlob } from '@/models/common/file'
-import { Costume } from '@/models/costume'
-import { defaultFps } from '@/models/animation'
+import { Costume } from '@/models/spx/costume'
+import { defaultFps } from '@/models/spx/animation'
 import CostumesAutoPlayer from '@/components/common/CostumesAutoPlayer.vue'
 
 const props = defineProps<{
diff --git a/spx-gui/src/components/common/CostumesAutoPlayer.vue b/spx-gui/src/components/common/CostumesAutoPlayer.vue
index 295390be4..a904a0609 100644
--- a/spx-gui/src/components/common/CostumesAutoPlayer.vue
+++ b/spx-gui/src/components/common/CostumesAutoPlayer.vue
@@ -2,7 +2,7 @@
 import { ref, watchEffect } from 'vue'
 import { useMessageHandle } from '@/utils/exception'
 import { getCleanupSignal, type OnCleanup } from '@/utils/disposable'
-import type { Costume } from '@/models/costume'
+import type { Costume } from '@/models/spx/costume'
 import CostumesPlayer from './CostumesPlayer.vue'
 
 const props = defineProps<{
diff --git a/spx-gui/src/components/common/CostumesPlayer.vue b/spx-gui/src/components/common/CostumesPlayer.vue
index 34571a7b7..81351f87f 100644
--- a/spx-gui/src/components/common/CostumesPlayer.vue
+++ b/spx-gui/src/components/common/CostumesPlayer.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { getImgDrawingCtx } from '@/utils/canvas'
 import { File } from '@/models/common/file'
-import type { Costume } from '@/models/costume'
+import type { Costume } from '@/models/spx/costume'
 import { UIImg } from '../ui'
 
 const props = defineProps<{
diff --git a/spx-gui/src/components/common/app-context.ts b/spx-gui/src/components/common/app-context.ts
new file mode 100644
index 000000000..4d08d0abe
--- /dev/null
+++ b/spx-gui/src/components/common/app-context.ts
@@ -0,0 +1,26 @@
+import { inject, provide, type InjectionKey } from 'vue'
+import { CloudHelpers } from '@/models/common/cloud'
+import { LocalHelpers } from '@/models/common/local'
+import { XbpHelpers } from '@/models/common/xbp'
+
+export type AppCtx = {
+  cloudHelpers: CloudHelpers
+  localHelpers: LocalHelpers
+  xbpHelpers: XbpHelpers
+}
+
+const appCtxKey: InjectionKey<AppCtx> = Symbol('app-ctx')
+
+export function provideAppCtx() {
+  const cloudHelpers = new CloudHelpers()
+  const localHelpers = new LocalHelpers()
+  const xbpHelpers = new XbpHelpers()
+  const ctx = { cloudHelpers, localHelpers, xbpHelpers }
+  provide(appCtxKey, ctx)
+}
+
+export function useAppCtx() {
+  const ctx = inject(appCtxKey)
+  if (ctx == null) throw new Error('App context expected')
+  return ctx
+}
diff --git a/spx-gui/src/components/copilot/CopilotRoot.vue b/spx-gui/src/components/copilot/CopilotRoot.vue
index 4a02a13d6..9aaf6b541 100644
--- a/spx-gui/src/components/copilot/CopilotRoot.vue
+++ b/spx-gui/src/components/copilot/CopilotRoot.vue
@@ -18,8 +18,8 @@ import { useI18n, type I18n } from '@/utils/i18n'
 import { escapeHTML, unicodeSafeSlice, until } from '@/utils/utils'
 import { useIsRouteLoaded } from '@/utils/route-loading'
 import * as projectApis from '@/apis/project'
-import type { Sprite } from '@/models/sprite'
-import { Project } from '@/models/project'
+import type { Sprite } from '@/models/spx/sprite'
+import { SpxProject } from '@/models/spx/project'
 import { getSignedInUsername } from '@/stores/user'
 import { useModalEvents } from '@/components/ui/modal/UIModalProvider.vue'
 import { useEditorCtxRef, type EditorCtx } from '../editor/EditorContextProvider.vue'
@@ -35,6 +35,8 @@ import * as codeLink from './custom-elements/CodeLink'
 import * as codeChange from './custom-elements/CodeChange.vue'
 import { codeFilePathSchema, parseProjectIdentifier, projectIdentifierSchema } from './common'
 import { userSessionStorageRef } from '@/utils/user-storage'
+import type { CloudHelpers } from '@/models/common/cloud'
+import { useAppCtx } from '@/components/common/app-context'
 
 const copilotInjectionKey: InjectionKey<Copilot> = Symbol('copilot')
 
@@ -64,9 +66,12 @@ const listProjectsTool: ToolDefinition = {
 }
 
 class Retriever {
-  constructor(private editorCtxRef: ComputedRef<EditorCtx | undefined>) {}
+  constructor(
+    private editorCtxRef: ComputedRef<EditorCtx | undefined>,
+    private cloudHelpers: CloudHelpers
+  ) {}
 
-  async getProject(project: string | undefined, signal?: AbortSignal): Promise<Project> {
+  async getProject(project: string | undefined, signal?: AbortSignal): Promise<SpxProject> {
     const currentProject = this.editorCtxRef.value?.project
     if (project == null) {
       if (currentProject == null) throw new Error('No project specified and no current editing project available')
@@ -76,8 +81,8 @@ class Retriever {
     if (currentProject != null && currentProject.owner === owner && currentProject.name === name) {
       return currentProject
     }
-    const p = new Project()
-    await p.loadFromCloud(owner, name, true, signal)
+    const p = new SpxProject(owner, name)
+    await this.cloudHelpers.load(p, true, signal)
     return p
   }
 }
@@ -100,7 +105,7 @@ class GetProjectMetadataTool implements ToolDefinition {
   }
 }
 
-function getProjectContent(project: Project) {
+function getProjectContent(project: SpxProject) {
   const physics = project.stage.physics
   return `\
 ### Sprites (num: ${project.sprites.length})
@@ -416,8 +421,9 @@ const modalEvents = useModalEvents()
 const messageEvents = useMessageEvents()
 const editorCtxRef = useEditorCtxRef()
 const codeEditorCtxRef = useCodeEditorCtxRef()
+const { cloudHelpers } = useAppCtx()
 
-const retriever = new Retriever(editorCtxRef)
+const retriever = new Retriever(editorCtxRef, cloudHelpers)
 const copilot = new Copilot()
 onUnmounted(() => copilot.dispose())
 
diff --git a/spx-gui/src/components/copilot/custom-elements/CodeBlock.vue b/spx-gui/src/components/copilot/custom-elements/CodeBlock.vue
index 893a4ee31..1df6f8c90 100644
--- a/spx-gui/src/components/copilot/custom-elements/CodeBlock.vue
+++ b/spx-gui/src/components/copilot/custom-elements/CodeBlock.vue
@@ -22,7 +22,7 @@ const handleInsert = useMessageHandle(
     if (editorCtx == null) throw new Error('Editor context is not available')
     const codeEditorUI = codeEditorCtxRef.value?.getEditor()?.getAttachedUI()
     if (codeEditorUI == null) throw new Error('Code editor UI is not available')
-    return editorCtx.project.history.doAction({ name: { en: 'Insert code', zh: '插入代码' } }, () =>
+    return editorCtx.state.history.doAction({ name: { en: 'Insert code', zh: '插入代码' } }, () =>
       codeEditorUI.insertBlockText(code.value)
     )
   },
diff --git a/spx-gui/src/components/copilot/custom-elements/CodeChange.vue b/spx-gui/src/components/copilot/custom-elements/CodeChange.vue
index 979989950..342f16100 100644
--- a/spx-gui/src/components/copilot/custom-elements/CodeChange.vue
+++ b/spx-gui/src/components/copilot/custom-elements/CodeChange.vue
@@ -94,7 +94,7 @@ const handleApply = useMessageHandle(
         en: 'The original code has changed',
         zh: '原代码已被更改'
       })
-    await editorCtx.project.history.doAction({ name: { en: 'Apply code change', zh: '应用代码更改' } }, () =>
+    await editorCtx.state.history.doAction({ name: { en: 'Apply code change', zh: '应用代码更改' } }, () =>
       textDocument.pushEdits([{ range, newText: codeToAdd.value }])
     )
   },
diff --git a/spx-gui/src/components/editor/EditorContextProvider.vue b/spx-gui/src/components/editor/EditorContextProvider.vue
index 9ab0eec76..fff9dd2a1 100644
--- a/spx-gui/src/components/editor/EditorContextProvider.vue
+++ b/spx-gui/src/components/editor/EditorContextProvider.vue
@@ -7,7 +7,7 @@ import { useAppProvide, useAppInject } from '@/utils/app-state'
 import type { EditorState } from './editor-state'
 
 export type EditorCtx = {
-  project: Project
+  project: SpxProject
   state: EditorState
 }
 
@@ -38,11 +38,11 @@ export function useEditorCtx() {
 
 <script setup lang="ts">
 import { inject, provide, type InjectionKey } from 'vue'
-import { Project } from '@/models/project'
+import { SpxProject } from '@/models/spx/project'
 import { computedShallowReactive } from '@/utils/utils'
 
 const props = defineProps<{
-  project: Project
+  project: SpxProject
   state: EditorState
 }>()
 
diff --git a/spx-gui/src/components/editor/ProjectEditor.vue b/spx-gui/src/components/editor/ProjectEditor.vue
index 9a98ed115..fd97424f0 100644
--- a/spx-gui/src/components/editor/ProjectEditor.vue
+++ b/spx-gui/src/components/editor/ProjectEditor.vue
@@ -55,15 +55,17 @@ import {
   listMonitorsToolDescription,
   ListMonitorsArgsSchema
 } from '@/components/agent-copilot/mcp/definitions'
-import { genSpriteFromCanvas, genBackdropFromCanvas } from '@/models/common/asset'
+import { genSpriteFromCanvas, genBackdropFromCanvas } from '@/models/spx/common/asset'
 import { computed, watchEffect } from 'vue'
 import type { z } from 'zod'
-import { Monitor } from '@/models/widget/monitor'
+import { Monitor } from '@/models/spx/widget/monitor'
 import { EditMode } from './editor-state'
 import MapEditor from './map-editor/MapEditor.vue'
+import { useAppCtx } from '@/components/common/app-context'
 
 const editorCtx = useEditorCtx()
 const copilotCtx = useAgentCopilotCtx()
+const { cloudHelpers } = useAppCtx()
 const project = computed(() => editorCtx.project)
 const selected = computed(() => editorCtx.state.selected)
 const isPreviewMode = computed(() => editorCtx.state.selectedEditMode === EditMode.Default)
@@ -111,7 +113,7 @@ async function addSpriteFromCanvas(args: AddSpriteFromCanvaOptions) {
   project.value.addSprite(sprite)
   await sprite.autoFit()
   editorCtx.state.selectSprite(sprite.id)
-  project.value.saveToCloud()
+  cloudHelpers.save(project.value)
   return {
     success: true,
     message: `Successfully added sprite "${args.spriteName}" to project "${project.value.name}"`
@@ -122,7 +124,7 @@ async function addBackdropFromCanvas(args: AddStageBackdropFromCanvasOptions) {
   const backdrop = await genBackdropFromCanvas(args.backdropName, 800, 600, args.color)
   project.value.stage.addBackdrop(backdrop)
   editorCtx.state.selectBackdrop(backdrop.id)
-  project.value.saveToCloud()
+  cloudHelpers.save(project.value)
   return {
     success: true,
     message: `Successfully added backdrop "${args.backdropName}" to project "${project.value.name}"`
diff --git a/spx-gui/src/components/editor/code-editor/FormatButton.vue b/spx-gui/src/components/editor/code-editor/FormatButton.vue
index 4a34edb6d..03dc9235e 100644
--- a/spx-gui/src/components/editor/code-editor/FormatButton.vue
+++ b/spx-gui/src/components/editor/code-editor/FormatButton.vue
@@ -24,7 +24,7 @@ const editorCtx = useEditorCtx()
 const codeEditorCtx = useCodeEditorCtx()
 const handleFormat = useMessageHandle(
   () =>
-    editorCtx.project.history.doAction({ name: { en: 'Format code', zh: '格式化代码' } }, () =>
+    editorCtx.state.history.doAction({ name: { en: 'Format code', zh: '格式化代码' } }, () =>
       codeEditorCtx.mustEditor().formatTextDocument(getTextDocumentId(props.codeFilePath))
     ),
   {
diff --git a/spx-gui/src/components/editor/code-editor/code-editor.ts b/spx-gui/src/components/editor/code-editor/code-editor.ts
index c410ff3cb..2aca661b0 100644
--- a/spx-gui/src/components/editor/code-editor/code-editor.ts
+++ b/spx-gui/src/components/editor/code-editor/code-editor.ts
@@ -6,7 +6,8 @@ import { insertSpaces, tabSize } from '@/utils/spx/highlighter'
 import { packageSpx } from '@/utils/spx'
 import { hashFiles } from '@/models/common/hash'
 import type { Files } from '@/models/common/file'
-import type { Project } from '@/models/project'
+import type { SpxProject } from '@/models/spx/project'
+import type { History } from '@/components/editor/history'
 import { RuntimeOutputKind, type Runtime } from '@/components/editor/runtime'
 import { DocumentBase } from './document-base'
 import { SpxLSPClient, type RequestContext } from './lsp'
@@ -362,7 +363,7 @@ class DiagnosticsProvider
   constructor(
     private runtime: Runtime,
     private lspClient: SpxLSPClient,
-    private project: Project
+    private project: SpxProject
   ) {
     super()
 
@@ -386,7 +387,7 @@ class DiagnosticsProvider
 
   private async getRuntimeDiagnostics(ctx: DiagnosticsContext) {
     const { outputs, filesHash } = this.runtime
-    const currentFilesHash = await hashFiles(this.project.exportGameFiles(), ctx.signal)
+    const currentFilesHash = await hashFiles(this.project.exportFiles(), ctx.signal)
     if (filesHash !== currentFilesHash) return []
     const diagnostics: Diagnostic[] = []
     for (const output of outputs) {
@@ -436,7 +437,7 @@ class DiagnosticsProvider
   private lspWorkspaceDiagnosticReportCache = new WeakMap<Files, Promise<lsp.WorkspaceDiagnosticReport>>()
 
   getLSWorkspaceDiagnosticReportWithCache(ctx: RequestContext) {
-    const files = this.project.exportGameFiles()
+    const files = this.project.exportFiles()
     const cached = this.lspWorkspaceDiagnosticReportCache.get(files)
     if (cached != null) return cached
     const result = this.lspClient.workspaceDiagnostic(ctx, { previousResultIds: [] }).catch((err) => {
@@ -765,7 +766,8 @@ export class CodeEditor extends Disposable {
   private hoverProvider: HoverProvider
 
   constructor(
-    private project: Project,
+    private project: SpxProject,
+    private history: History,
     private runtime: Runtime,
     private monaco: Monaco,
     private registry: ToolRegistry
@@ -1012,7 +1014,7 @@ export class CodeEditor extends Disposable {
   private addTextDocument(id: TextDocumentIdentifier) {
     const resourceModelId = textDocumentId2ResourceModelId(id, this.project)
     if (resourceModelId == null) throw new Error(`Invalid text document id: ${id.uri}`)
-    const textDocument = createTextDocument(resourceModelId, this.project, this.monaco)
+    const textDocument = createTextDocument(resourceModelId, this.project, this.history, this.monaco)
     this.textDocuments.set(resourceModelId.toString(), textDocument)
     this.addDisposable(textDocument)
     return textDocument
diff --git a/spx-gui/src/components/editor/code-editor/common.ts b/spx-gui/src/components/editor/code-editor/common.ts
index cd49f09de..ea0039a46 100644
--- a/spx-gui/src/components/editor/code-editor/common.ts
+++ b/spx-gui/src/components/editor/code-editor/common.ts
@@ -3,15 +3,15 @@ import * as lsp from 'vscode-languageserver-protocol'
 import type { LocaleMessage } from '@/utils/i18n'
 import type Emitter from '@/utils/emitter'
 import { exprForSpxDirection, type ColorValue, exprForSpxColor } from '@/utils/spx'
-import type { Project } from '@/models/project'
-import { ResourceModelIdentifier, type ResourceModel, type ResourceModelType } from '@/models/common/resource-model'
-import { Sprite } from '@/models/sprite'
-import { Sound } from '@/models/sound'
-import { Backdrop } from '@/models/backdrop'
-import { Costume } from '@/models/costume'
-import { Animation } from '@/models/animation'
-import { isWidget } from '@/models/widget'
-import { stageCodeFilePaths } from '@/models/stage'
+import type { SpxProject } from '@/models/spx/project'
+import { ResourceModelIdentifier, type ResourceModel, type ResourceModelType } from '@/models/spx/common/resource-model'
+import { Sprite } from '@/models/spx/sprite'
+import { Sound } from '@/models/spx/sound'
+import { Backdrop } from '@/models/spx/backdrop'
+import { Costume } from '@/models/spx/costume'
+import { Animation } from '@/models/spx/animation'
+import { isWidget } from '@/models/spx/widget'
+import { stageCodeFilePaths } from '@/models/spx/stage'
 
 /**
  * Position stands for the position of a **character** in the document.
@@ -595,7 +595,7 @@ export function parseResourceContextURI(uri: ResourceContextURI): ResourceContex
   return { parent, type: lastType }
 }
 
-export function getResourceModel(project: Project, resourceId: ResourceIdentifier): ResourceModel | null {
+export function getResourceModel(project: SpxProject, resourceId: ResourceIdentifier): ResourceModel | null {
   const parsed = parseResourceURI(resourceId.uri)
   switch (parsed[0].type) {
     case 'sound':
@@ -860,7 +860,7 @@ export function getCodeFilePath(textDocumentURI: string) {
 
 export function textDocumentId2ResourceModelId(
   id: TextDocumentIdentifier,
-  project: Project
+  project: SpxProject
 ): ResourceModelIdentifier | null {
   const codeFilePath = getCodeFilePath(id.uri)
   if (stageCodeFilePaths.includes(codeFilePath)) {
diff --git a/spx-gui/src/components/editor/code-editor/context.ts b/spx-gui/src/components/editor/code-editor/context.ts
index 80b99455a..2f51430f2 100644
--- a/spx-gui/src/components/editor/code-editor/context.ts
+++ b/spx-gui/src/components/editor/code-editor/context.ts
@@ -5,7 +5,7 @@ import { ProgressCollector } from '@/utils/progress'
 import { getHighlighter } from '@/utils/spx/highlighter'
 import { composeQuery, useQuery, type QueryRet } from '@/utils/query'
 import { useAppInject, useAppProvide } from '@/utils/app-state'
-import type { Project } from '@/models/project'
+import type { SpxProject } from '@/models/spx/project'
 import { ToolRegistry } from '@/components/agent-copilot/mcp/registry'
 import type { EditorState } from '../editor-state'
 import { DiagnosticSeverity } from './common'
@@ -127,7 +127,7 @@ const spxLanguageConfiguration: monaco.languages.LanguageConfiguration = {
 }
 
 export function useProvideCodeEditorCtx(
-  projectRet: QueryRet<Project>,
+  projectRet: QueryRet<SpxProject>,
   editorStateRet: QueryRet<EditorState>,
   registry: ToolRegistry
 ): QueryRet<unknown> {
@@ -158,7 +158,7 @@ export function useProvideCodeEditorCtx(
         composeQuery(ctx, monacoQueryRet)
       ])
       ctx.signal.throwIfAborted()
-      const codeEditor = new CodeEditor(project, editorState.runtime, monaco, registry)
+      const codeEditor = new CodeEditor(project, editorState.history, editorState.runtime, monaco, registry)
       codeEditor.disposeOnSignal(ctx.signal)
       return codeEditor
     },
diff --git a/spx-gui/src/components/editor/code-editor/lsp/index.ts b/spx-gui/src/components/editor/code-editor/lsp/index.ts
index a3b3b2146..af9744197 100644
--- a/spx-gui/src/components/editor/code-editor/lsp/index.ts
+++ b/spx-gui/src/components/editor/code-editor/lsp/index.ts
@@ -6,7 +6,7 @@ import { Disposable, getCleanupSignal, type Disposer } from '@/utils/disposable'
 import { timeout, until, untilNotNull } from '@/utils/utils'
 import { extname } from '@/utils/path'
 import { createLSPOperationName, createLSPServerOperationName, type LSPTraceOptions } from '@/utils/tracing'
-import type { Project } from '@/models/project'
+import type { SpxProject } from '@/models/spx/project'
 import {
   fromLSPRange,
   type DefinitionIdentifier,
@@ -119,7 +119,7 @@ type TelemetryEventParamsForNotification = TelemetryEventBaseParams & {
 type TelemetryEventParams = TelemetryEventParamsForCall | TelemetryEventParamsForNotification
 
 export class SpxLSPClient extends Disposable {
-  constructor(private project: Project) {
+  constructor(private project: SpxProject) {
     super()
   }
 
@@ -128,7 +128,7 @@ export class SpxLSPClient extends Disposable {
 
   async loadFiles(signal: AbortSignal) {
     this.isFilesStale.value = true
-    const files = this.project.exportGameFiles()
+    const files = this.project.exportFiles()
     const loadedFiles: SpxlsFiles = {}
     await Promise.all(
       Object.entries(files).map(async ([path, file]) => {
diff --git a/spx-gui/src/components/editor/code-editor/text-document.ts b/spx-gui/src/components/editor/code-editor/text-document.ts
index 42e058a67..46809168e 100644
--- a/spx-gui/src/components/editor/code-editor/text-document.ts
+++ b/spx-gui/src/components/editor/code-editor/text-document.ts
@@ -1,10 +1,11 @@
 import { debounce } from 'lodash'
 import { computed, watch, type ComputedRef } from 'vue'
 import Emitter from '@/utils/emitter'
-import { type Stage } from '@/models/stage'
-import type { Action, Project } from '@/models/project'
-import type { Sprite } from '@/models/sprite'
-import type { ResourceModelIdentifier } from '@/models/common/resource-model'
+import { type Stage } from '@/models/spx/stage'
+import type { SpxProject } from '@/models/spx/project'
+import type { Action, History } from '@/components/editor/history'
+import type { Sprite } from '@/models/spx/sprite'
+import type { ResourceModelIdentifier } from '@/models/spx/common/resource-model'
 import {
   type Range,
   type ITextDocument,
@@ -34,7 +35,7 @@ class CodeOwnerStage implements ICodeOwner {
   private action: Action
   constructor(
     private getStage: () => Stage,
-    private project: Project
+    private history: History
   ) {
     this.action = {
       name: { en: 'Update stage code', zh: '修改舞台代码' },
@@ -49,7 +50,7 @@ class CodeOwnerStage implements ICodeOwner {
   }
   setCode(newCode: string, kind: CodeChangeKind) {
     if (kind === CodeChangeKind.Program) return this.getStage().setCode(newCode)
-    return this.project.history.doAction(this.action, () => {
+    return this.history.doAction(this.action, () => {
       this.getStage().setCode(newCode)
     })
   }
@@ -59,7 +60,7 @@ class CodeOwnerSprite implements ICodeOwner {
   private actionComputed: ComputedRef<Action>
   constructor(
     private getSprite: () => Sprite | null,
-    private project: Project
+    private history: History
   ) {
     this.actionComputed = computed(() => {
       const name = this.getSprite()?.name ?? 'Sprite'
@@ -81,18 +82,23 @@ class CodeOwnerSprite implements ICodeOwner {
     const sprite = this.getSprite()
     if (sprite == null) throw new Error('Sprite not found')
     if (kind === CodeChangeKind.Program) return sprite.setCode(newCode)
-    return this.project.history.doAction(this.actionComputed.value, () => {
+    return this.history.doAction(this.actionComputed.value, () => {
       sprite.setCode(newCode)
     })
   }
 }
 
-export function createTextDocument(resourceModelId: ResourceModelIdentifier, project: Project, monaco: Monaco) {
+export function createTextDocument(
+  resourceModelId: ResourceModelIdentifier,
+  project: SpxProject,
+  history: History,
+  monaco: Monaco
+) {
   let codeOwner: ICodeOwner | null = null
   if (resourceModelId.type === 'stage') {
-    codeOwner = new CodeOwnerStage(() => project.stage, project)
+    codeOwner = new CodeOwnerStage(() => project.stage, history)
   } else if (resourceModelId.type === 'sprite') {
-    codeOwner = new CodeOwnerSprite(() => project.getResourceModel(resourceModelId) as Sprite | null, project)
+    codeOwner = new CodeOwnerSprite(() => project.getResourceModel(resourceModelId) as Sprite | null, history)
   }
   if (codeOwner == null) throw new Error(`Invalid text document id: ${resourceModelId}`)
   return new TextDocument(codeOwner, monaco)
diff --git a/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue b/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue
index 573c695a4..3ddfb4282 100644
--- a/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue
@@ -18,7 +18,7 @@ import { getCleanupSignal } from '@/utils/disposable'
 import { theme, tabSize, insertSpaces } from '@/utils/spx/highlighter'
 import { useI18n } from '@/utils/i18n'
 import { getXGoIdentifierNameTip, validateXGoIdentifierName } from '@/utils/spx'
-import { Sprite } from '@/models/sprite'
+import { Sprite } from '@/models/spx/sprite'
 import {
   useRenameAnimation,
   useRenameBackdrop,
@@ -27,11 +27,11 @@ import {
   useRenameSprite,
   useRenameWidget
 } from '@/components/asset'
-import { Sound } from '@/models/sound'
-import { Costume } from '@/models/costume'
-import { Animation } from '@/models/animation'
-import { Backdrop } from '@/models/backdrop'
-import { isWidget } from '@/models/widget'
+import { Sound } from '@/models/spx/sound'
+import { Costume } from '@/models/spx/costume'
+import { Animation } from '@/models/spx/animation'
+import { Backdrop } from '@/models/spx/backdrop'
+import { isWidget } from '@/models/spx/widget'
 import { providePopupContainer, useModal } from '@/components/ui'
 import { useCopilot } from '@/components/copilot/CopilotRoot.vue'
 import RenameModal from '@/components/common/RenameModal.vue'
@@ -88,7 +88,7 @@ async function rename(textDocumentId: TextDocumentIdentifier, position: Position
       name,
       validateName: validateXGoIdentifierName,
       applyName: (newName) =>
-        editorCtx.project.history.doAction({ name: { en: 'Rename', zh: '重命名' } }, () =>
+        editorCtx.state.history.doAction({ name: { en: 'Rename', zh: '重命名' } }, () =>
           codeEditorCtx.mustEditor().rename(textDocumentId, position, newName)
         ),
       inputTip: getXGoIdentifierNameTip(),
diff --git a/spx-gui/src/components/editor/code-editor/ui/code-editor-ui.ts b/spx-gui/src/components/editor/code-editor/ui/code-editor-ui.ts
index 21055b41c..314e41186 100644
--- a/spx-gui/src/components/editor/code-editor/ui/code-editor-ui.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/code-editor-ui.ts
@@ -4,7 +4,7 @@ import { Disposable } from '@/utils/disposable'
 import { timeout } from '@/utils/utils'
 import type { I18n, LocaleMessage } from '@/utils/i18n'
 import { createCodeEditorOperationName, defineIdleTransaction } from '@/utils/tracing'
-import type { Project } from '@/models/project'
+import type { SpxProject } from '@/models/spx/project'
 import type { Copilot } from '@/components/copilot/copilot'
 import type { EditorState } from '../../editor-state'
 import {
@@ -188,7 +188,7 @@ export class CodeEditorUI extends Disposable implements ICodeEditorUI {
 
   constructor(
     private mainTextDocumentId: TextDocumentIdentifier,
-    public project: Project,
+    public project: SpxProject,
     private editorState: EditorState,
     public i18n: I18n,
     public monaco: Monaco,
diff --git a/spx-gui/src/components/editor/code-editor/ui/diagnostics/index.ts b/spx-gui/src/components/editor/code-editor/ui/diagnostics/index.ts
index bdb0bca95..b5d02b6b3 100644
--- a/spx-gui/src/components/editor/code-editor/ui/diagnostics/index.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/diagnostics/index.ts
@@ -55,7 +55,7 @@ export class DiagnosticsController extends Disposable {
 
     this.addDisposer(
       watch(
-        () => [this.ui.project.exportGameFiles(), this.ui.activeTextDocument],
+        () => [this.ui.project.exportFiles(), this.ui.activeTextDocument],
         () => refreshDiagnostics(),
         { immediate: true }
       )
diff --git a/spx-gui/src/components/editor/code-editor/ui/document-tab/DocumentTab.vue b/spx-gui/src/components/editor/code-editor/ui/document-tab/DocumentTab.vue
index 8a0da6d92..3570c849a 100644
--- a/spx-gui/src/components/editor/code-editor/ui/document-tab/DocumentTab.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/document-tab/DocumentTab.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useFileUrl } from '@/utils/file'
-import { Sprite } from '@/models/sprite'
-import { Stage } from '@/models/stage'
+import { Sprite } from '@/models/spx/sprite'
+import { Stage } from '@/models/spx/stage'
 import { UIImg, UITooltip } from '@/components/ui'
 import { textDocumentId2CodeFileName, textDocumentId2ResourceModelId } from '../../common'
 import type { TextDocument } from '../../text-document'
diff --git a/spx-gui/src/components/editor/code-editor/ui/inlay-hint/index.ts b/spx-gui/src/components/editor/code-editor/ui/inlay-hint/index.ts
index 1d6901f00..1bc5e8e13 100644
--- a/spx-gui/src/components/editor/code-editor/ui/inlay-hint/index.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/inlay-hint/index.ts
@@ -48,7 +48,7 @@ export class InlayHintController extends Disposable {
 
     this.addDisposer(
       watch(
-        () => [this.ui.project.exportGameFiles(), this.ui.activeTextDocument],
+        () => [this.ui.project.exportFiles(), this.ui.activeTextDocument],
         () => refresh(),
         { immediate: true }
       )
diff --git a/spx-gui/src/components/editor/code-editor/ui/input-helper/InputHelper.vue b/spx-gui/src/components/editor/code-editor/ui/input-helper/InputHelper.vue
index d6f2cdb4c..1b96d20e6 100644
--- a/spx-gui/src/components/editor/code-editor/ui/input-helper/InputHelper.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/input-helper/InputHelper.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef, watch } from 'vue'
-import { humanizeResourceType } from '@/models/common/resource-model'
+import { humanizeResourceType } from '@/models/spx/common/resource-model'
 import { UITabRadioGroup, UITabRadio, UISelect, UISelectOption } from '@/components/ui'
 import {
   InputKind,
diff --git a/spx-gui/src/components/editor/code-editor/ui/input-helper/index.ts b/spx-gui/src/components/editor/code-editor/ui/input-helper/index.ts
index ea5d6c10e..a6b4f8c70 100644
--- a/spx-gui/src/components/editor/code-editor/ui/input-helper/index.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/input-helper/index.ts
@@ -73,7 +73,7 @@ export class InputHelperController extends Disposable {
 
     this.addDisposer(
       watch(
-        () => [this.providerRef.value, this.ui.project.exportGameFiles(), this.ui.activeTextDocument],
+        () => [this.providerRef.value, this.ui.project.exportFiles(), this.ui.activeTextDocument],
         () => refreshSlots(),
         { immediate: true }
       )
diff --git a/spx-gui/src/components/editor/code-editor/ui/resource-reference/index.ts b/spx-gui/src/components/editor/code-editor/ui/resource-reference/index.ts
index cf73ceb71..a3ab223f8 100644
--- a/spx-gui/src/components/editor/code-editor/ui/resource-reference/index.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/resource-reference/index.ts
@@ -45,7 +45,7 @@ export class ResourceReferenceController extends Emitter<{
 
     this.addDisposer(
       watch(
-        () => [this.providerRef.value, this.ui.project.exportGameFiles(), this.ui.activeTextDocument] as const,
+        () => [this.providerRef.value, this.ui.project.exportFiles(), this.ui.activeTextDocument] as const,
         ([provider]) => {
           if (provider == null) return
           refreshItems()
diff --git a/spx-gui/src/components/editor/code-editor/ui/resource/ResourceItem.vue b/spx-gui/src/components/editor/code-editor/ui/resource/ResourceItem.vue
index ff6b795fb..80b004111 100644
--- a/spx-gui/src/components/editor/code-editor/ui/resource/ResourceItem.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/resource/ResourceItem.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { ResourceModel } from '@/models/common/resource-model'
-import { Animation } from '@/models/animation'
-import { Backdrop } from '@/models/backdrop'
-import { Costume } from '@/models/costume'
-import { Sound } from '@/models/sound'
-import { Sprite } from '@/models/sprite'
-import { isWidget } from '@/models/widget'
+import type { ResourceModel } from '@/models/spx/common/resource-model'
+import { Animation } from '@/models/spx/animation'
+import { Backdrop } from '@/models/spx/backdrop'
+import { Costume } from '@/models/spx/costume'
+import { Sound } from '@/models/spx/sound'
+import { Sprite } from '@/models/spx/sprite'
+import { isWidget } from '@/models/spx/widget'
 import AnimationItem from '@/components/editor/sprite/AnimationItem.vue'
 import CostumeItem from '@/components/editor/sprite/CostumeItem.vue'
 import SoundItem from '@/components/editor/sound/SoundItem.vue'
diff --git a/spx-gui/src/components/editor/code-editor/ui/resource/resource-selector.ts b/spx-gui/src/components/editor/code-editor/ui/resource/resource-selector.ts
index a3413d927..c2e159689 100644
--- a/spx-gui/src/components/editor/code-editor/ui/resource/resource-selector.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/resource/resource-selector.ts
@@ -1,13 +1,13 @@
 import { AssetType } from '@/apis/asset'
-import type { ResourceModel } from '@/models/common/resource-model'
-import type { Project } from '@/models/project'
-import { Sound } from '@/models/sound'
-import { Sprite } from '@/models/sprite'
-import { Animation } from '@/models/animation'
-import { Backdrop } from '@/models/backdrop'
-import { type Widget } from '@/models/widget'
-import { Costume } from '@/models/costume'
-import type { Stage } from '@/models/stage'
+import type { ResourceModel } from '@/models/spx/common/resource-model'
+import type { SpxProject } from '@/models/spx/project'
+import { Sound } from '@/models/spx/sound'
+import { Sprite } from '@/models/spx/sprite'
+import { Animation } from '@/models/spx/animation'
+import { Backdrop } from '@/models/spx/backdrop'
+import { type Widget } from '@/models/spx/widget'
+import { Costume } from '@/models/spx/costume'
+import type { Stage } from '@/models/spx/stage'
 import type { LocaleMessage } from '@/utils/i18n'
 import {
   useAddAssetFromLibrary,
@@ -45,7 +45,7 @@ class SoundSelector implements IResourceSelector<Sound> {
     return this.project.sounds
   }
 
-  constructor(private project: Project) {}
+  constructor(private project: SpxProject) {}
 
   useCreateMethods() {
     const addFromLocalFile = useAddSoundFromLocalFile()
@@ -74,7 +74,7 @@ class SpriteSelector implements IResourceSelector<Sprite> {
     return this.project.sprites
   }
 
-  constructor(private project: Project) {}
+  constructor(private project: SpxProject) {}
 
   useCreateMethods() {
     const addFromLocalFile = useAddSpriteFromLocalFile()
@@ -99,7 +99,7 @@ class AnimationSelector implements IResourceSelector<Animation> {
   }
 
   constructor(
-    private project: Project,
+    private project: SpxProject,
     private sprite: Sprite
   ) {}
 
@@ -120,7 +120,7 @@ class BackdropSelector implements IResourceSelector<Backdrop> {
     return this.project.stage.backdrops
   }
 
-  constructor(private project: Project) {}
+  constructor(private project: SpxProject) {}
 
   useCreateMethods() {
     const addFromLocalFile = useAddBackdropFromLocalFile()
@@ -144,7 +144,7 @@ class WidgetSelector implements IResourceSelector<Widget> {
     return this.project.stage.widgets
   }
 
-  constructor(private project: Project) {}
+  constructor(private project: SpxProject) {}
 
   useCreateMethods() {
     const addMonitor = useAddMonitor()
@@ -164,7 +164,7 @@ class CostumeSelector implements IResourceSelector<Costume> {
   }
 
   constructor(
-    private project: Project,
+    private project: SpxProject,
     private sprite: Sprite
   ) {}
 
@@ -173,14 +173,14 @@ class CostumeSelector implements IResourceSelector<Costume> {
     return [
       {
         label: { en: 'Select local file', zh: '选择本地文件' },
-        handler: () => addFromLocalFile(this.sprite, this.project)
+        handler: () => addFromLocalFile(this.sprite)
       }
     ]
   }
 }
 
 export function createResourceSelector(
-  project: Project,
+  project: SpxProject,
   contextURI: ResourceContextURI
 ): IResourceSelector<SelectableResource> {
   const { parent, type } = parseResourceContextURI(contextURI)
diff --git a/spx-gui/src/components/editor/code-editor/ui/snippet.ts b/spx-gui/src/components/editor/code-editor/ui/snippet.ts
index 2795bda8f..63c1831c7 100644
--- a/spx-gui/src/components/editor/code-editor/ui/snippet.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/snippet.ts
@@ -5,15 +5,15 @@
 
 import { computed } from 'vue'
 import { SnippetParser as BaseSnippetParser, Text, Variable } from '@/utils/snippet-parser'
-import { Sprite } from '@/models/sprite'
-import type { WidgetType } from '@/models/widget'
-import type { Project } from '@/models/project'
+import { Sprite } from '@/models/spx/sprite'
+import type { WidgetType } from '@/models/spx/widget'
+import type { SpxProject } from '@/models/spx/project'
 import { textDocumentId2ResourceModelId } from '../common'
 import type { CodeEditorUI } from './code-editor-ui'
 
 export class SnippetParser {
   constructor(
-    private project: Project,
+    private project: SpxProject,
     private ui: CodeEditorUI
   ) {}
 
diff --git a/spx-gui/src/components/editor/common/EditorList.vue b/spx-gui/src/components/editor/common/EditorList.vue
index 3e2693c6f..34c3da1c9 100644
--- a/spx-gui/src/components/editor/common/EditorList.vue
+++ b/spx-gui/src/components/editor/common/EditorList.vue
@@ -26,7 +26,7 @@
 import { computed, ref } from 'vue'
 import { useDragSortable } from '@/utils/drag-and-drop'
 import type { RadarNodeMeta } from '@/utils/radar'
-import { humanizeResourceType, type ResourceModelType } from '@/models/common/resource-model'
+import { humanizeResourceType, type ResourceModelType } from '@/models/spx/common/resource-model'
 import { UIIcon, type Color, useUIVariables, getCssVars, UIDropdownWithTooltip } from '@/components/ui'
 
 const props = withDefaults(
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 c64120161..5be4eba7e 100644
--- a/spx-gui/src/components/editor/common/config/sprite/SpriteDirection.vue
+++ b/spx-gui/src/components/editor/common/config/sprite/SpriteDirection.vue
@@ -1,24 +1,27 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import { type Project } from '@/models/project'
-import { headingToLeftRight, LeftRight, leftRightToHeading, RotationStyle, type Sprite } from '@/models/sprite'
+import { type SpxProject } from '@/models/spx/project'
+import { headingToLeftRight, LeftRight, leftRightToHeading, RotationStyle, type Sprite } from '@/models/spx/sprite'
 
 import { wrapUpdateHandler } from '../utils'
+import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 
 import AnglePicker from '@/components/editor/common/AnglePicker.vue'
 import { UIButtonGroup, UIButtonGroupItem, UIDropdown, UIIcon, UINumberInput, UITooltip } from '@/components/ui'
 
 const props = defineProps<{
   sprite: Sprite
-  project: Project
+  project: SpxProject
 }>()
 
+const editorCtx = useEditorCtx()
+
 const rotateDropdownVisible = ref(false)
 
 const spriteContext = () => ({
   sprite: props.sprite,
-  project: props.project
+  history: editorCtx.state.history
 })
 
 const rotationStyleTips = {
diff --git a/spx-gui/src/components/editor/common/config/sprite/SpritePhysics.vue b/spx-gui/src/components/editor/common/config/sprite/SpritePhysics.vue
index 5192519fb..466b92ed3 100644
--- a/spx-gui/src/components/editor/common/config/sprite/SpritePhysics.vue
+++ b/spx-gui/src/components/editor/common/config/sprite/SpritePhysics.vue
@@ -9,18 +9,21 @@ enum PhysicsFlag {
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 
-import { type Project } from '@/models/project'
-import { PhysicsMode, type Sprite } from '@/models/sprite'
+import { type SpxProject } from '@/models/spx/project'
+import { PhysicsMode, type Sprite } from '@/models/spx/sprite'
 import { wrapUpdateHandler } from '../utils'
+import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 
 import { UICheckbox, UICheckboxGroup, UITooltip } from '@/components/ui'
 import { isEmpty, xor } from 'lodash'
 
 const props = defineProps<{
   sprite: Sprite
-  project: Project
+  project: SpxProject
 }>()
 
+const editorCtx = useEditorCtx()
+
 function isGravity(checkedList: string[] = checkedPhysicsFlags.value) {
   return checkedList.includes(PhysicsFlag.Gravity)
 }
@@ -51,7 +54,7 @@ watch(
 
 const applyPhysicsModeToSprite = wrapUpdateHandler(
   (physicsMode: PhysicsMode) => props.sprite.setPhysicsMode(physicsMode),
-  () => ({ project: props.project, sprite: props.sprite }),
+  () => ({ history: editorCtx.state.history, sprite: props.sprite }),
   false
 )
 
diff --git a/spx-gui/src/components/editor/common/config/sprite/SpritePositionSize.vue b/spx-gui/src/components/editor/common/config/sprite/SpritePositionSize.vue
index b451ca4a2..b5c766eee 100644
--- a/spx-gui/src/components/editor/common/config/sprite/SpritePositionSize.vue
+++ b/spx-gui/src/components/editor/common/config/sprite/SpritePositionSize.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { type Project } from '@/models/project'
-import { type Sprite } from '@/models/sprite'
+import { type SpxProject } from '@/models/spx/project'
+import { type Sprite } from '@/models/spx/sprite'
 import { wrapUpdateHandler } from '../utils'
+import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 
 import { round } from '@/utils/utils'
 
@@ -11,12 +12,14 @@ import { UINumberInput } from '@/components/ui'
 
 const props = defineProps<{
   sprite: Sprite
-  project: Project
+  project: SpxProject
 }>()
 
+const editorCtx = useEditorCtx()
+
 const spriteContext = () => ({
   sprite: props.sprite,
-  project: props.project
+  history: editorCtx.state.history
 })
 
 // use `round` to avoid `0.07 * 100 = 7.000000000000001`
diff --git a/spx-gui/src/components/editor/common/config/sprite/SpriteVisible.vue b/spx-gui/src/components/editor/common/config/sprite/SpriteVisible.vue
index e6a918376..bb3c585f7 100644
--- a/spx-gui/src/components/editor/common/config/sprite/SpriteVisible.vue
+++ b/spx-gui/src/components/editor/common/config/sprite/SpriteVisible.vue
@@ -1,18 +1,21 @@
 <script setup lang="ts">
-import { type Project } from '@/models/project'
-import { type Sprite } from '@/models/sprite'
+import { type SpxProject } from '@/models/spx/project'
+import { type Sprite } from '@/models/spx/sprite'
 import { wrapUpdateHandler } from '../utils'
+import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 
 import { UIButtonGroup, UIButtonGroupItem, UIIcon } from '@/components/ui'
 
 const props = defineProps<{
   sprite: Sprite
-  project: Project
+  project: SpxProject
 }>()
 
+const editorCtx = useEditorCtx()
+
 const spriteContext = () => ({
   sprite: props.sprite,
-  project: props.project
+  history: editorCtx.state.history
 })
 
 const handleVisibleUpdate = wrapUpdateHandler(
diff --git a/spx-gui/src/components/editor/common/config/utils.ts b/spx-gui/src/components/editor/common/config/utils.ts
index 604388947..5f62259a9 100644
--- a/spx-gui/src/components/editor/common/config/utils.ts
+++ b/spx-gui/src/components/editor/common/config/utils.ts
@@ -1,16 +1,16 @@
 import { debounce } from 'lodash'
 
-import { type Project } from '@/models/project'
-import { type Sprite } from '@/models/sprite'
+import { type Sprite } from '@/models/spx/sprite'
+import type { History } from '@/components/editor/history'
 
 export function wrapUpdateHandler<Args extends any[]>(
   handler: (...args: Args) => unknown,
-  provideSpriteContext: () => { sprite: Sprite; project: Project },
+  provideSpriteContext: () => { sprite: Sprite; history: History },
   withDebounce = true
 ): (...args: Args) => void {
-  const { sprite, project } = provideSpriteContext()
+  const { sprite, history } = provideSpriteContext()
   const sname = sprite.name
   const action = { name: { en: `Configure sprite ${sname}`, zh: `修改精灵 ${sname} 配置` } }
-  const wrapped = (...args: Args) => project.history.doAction(action, () => handler(...args))
+  const wrapped = (...args: Args) => history.doAction(action, () => handler(...args))
   return withDebounce ? debounce(wrapped, 300) : wrapped
 }
diff --git a/spx-gui/src/components/editor/common/corner-menu-item/SaveAssetToLibraryMenuItem.vue b/spx-gui/src/components/editor/common/corner-menu-item/SaveAssetToLibraryMenuItem.vue
index 7cf86f50c..39f534050 100644
--- a/spx-gui/src/components/editor/common/corner-menu-item/SaveAssetToLibraryMenuItem.vue
+++ b/spx-gui/src/components/editor/common/corner-menu-item/SaveAssetToLibraryMenuItem.vue
@@ -4,10 +4,10 @@ import { useSaveAssetToLibrary } from '@/components/asset'
 import { useMessageHandle } from '@/utils/exception'
 import { UIMenuItem } from '@/components/ui'
 
-import type { AssetModel } from '@/models/common/asset'
-import { Sprite } from '@/models/sprite'
-import { Backdrop } from '@/models/backdrop'
-import { Sound } from '@/models/sound'
+import type { AssetModel } from '@/models/spx/common/asset'
+import { Sprite } from '@/models/spx/sprite'
+import { Backdrop } from '@/models/spx/backdrop'
+import { Sound } from '@/models/spx/sound'
 
 const props = defineProps<{
   item: AssetModel
diff --git a/spx-gui/src/components/editor/common/viewer/DecoratorNode.vue b/spx-gui/src/components/editor/common/viewer/DecoratorNode.vue
index f87b7150f..f0e9aa5ba 100644
--- a/spx-gui/src/components/editor/common/viewer/DecoratorNode.vue
+++ b/spx-gui/src/components/editor/common/viewer/DecoratorNode.vue
@@ -2,7 +2,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 type { Decorator } from '@/models/spx/tilemap'
 import { normalizeDegree } from '@/utils/utils'
 import { useFileImg } from '@/utils/file'
 
diff --git a/spx-gui/src/components/editor/common/viewer/NodeTransformer.vue b/spx-gui/src/components/editor/common/viewer/NodeTransformer.vue
index 7e4989d88..ca46f73ee 100644
--- a/spx-gui/src/components/editor/common/viewer/NodeTransformer.vue
+++ b/spx-gui/src/components/editor/common/viewer/NodeTransformer.vue
@@ -5,8 +5,8 @@
 <script setup lang="ts">
 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 { 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'
diff --git a/spx-gui/src/components/editor/common/viewer/SpriteNode.vue b/spx-gui/src/components/editor/common/viewer/SpriteNode.vue
index f1b233e50..c721184a6 100644
--- a/spx-gui/src/components/editor/common/viewer/SpriteNode.vue
+++ b/spx-gui/src/components/editor/common/viewer/SpriteNode.vue
@@ -2,8 +2,8 @@
 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 { Project } from '@/models/project'
-import { LeftRight, RotationStyle, headingToLeftRight, leftRightToHeading } from '@/models/sprite'
+import type { SpxProject } from '@/models/spx/project'
+import { LeftRight, RotationStyle, headingToLeftRight, leftRightToHeading } from '@/models/spx/sprite'
 import type { Size } from '@/models/common'
 import { normalizeDegree, round, useAsyncComputedLegacy } from '@/utils/utils'
 import { useFileImg } from '@/utils/file'
@@ -15,7 +15,7 @@ import type Konva from 'konva'
 const props = defineProps<{
   localConfig: SpriteLocalConfig
   selected: boolean
-  project: Project
+  project: SpxProject
   mapSize: Size
   nodeReadyMap: Map<string, boolean>
 }>()
diff --git a/spx-gui/src/components/editor/common/viewer/common.ts b/spx-gui/src/components/editor/common/viewer/common.ts
index 7a7cf3d26..161604f91 100644
--- a/spx-gui/src/components/editor/common/viewer/common.ts
+++ b/spx-gui/src/components/editor/common/viewer/common.ts
@@ -1,5 +1,5 @@
-import { Sprite } from '@/models/sprite'
-import type { Widget } from '@/models/widget'
+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/quick-config/SpriteQuickConfig.vue b/spx-gui/src/components/editor/common/viewer/quick-config/SpriteQuickConfig.vue
index 32eaf4452..dca95689c 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/SpriteQuickConfig.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/SpriteQuickConfig.vue
@@ -2,17 +2,17 @@
 import { inject, watch } from 'vue'
 
 import DefaultConfigPanel from './sprite/DefaultConfigPanel.vue'
-import type { Project } from '@/models/project'
+import type { SpxProject } from '@/models/spx/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'
+import { RotationStyle } from '@/models/spx/sprite'
 
 const props = defineProps<{
   localConfig: SpriteLocalConfig
-  project: Project
+  project: SpxProject
 }>()
 
 const configType = inject(configTypeInjectionKey)
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
index 8a4f8e923..e0a69652f 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/WidgetQuickConfig.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/WidgetQuickConfig.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { inject } from 'vue'
 
-import type { Project } from '@/models/project'
+import type { SpxProject } from '@/models/spx/project'
 import { configTypeInjectionKey } from './QuickConfigWrapper.vue'
 import DefaultConfigPanel from './widget/DefaultConfigPanel.vue'
 import SizeConfigPanel from './common/SizeConfigPanel.vue'
@@ -10,7 +10,7 @@ import type { WidgetLocalConfig } from './utils'
 
 defineProps<{
   localConfig: WidgetLocalConfig
-  project: Project
+  project: SpxProject
 }>()
 
 const configType = inject(configTypeInjectionKey)
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
index 596b0fa71..70df1e3db 100644
--- 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
@@ -1,18 +1,21 @@
 <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 { headingToLeftRight, leftRightToHeading, RotationStyle } from '@/models/spx/sprite'
+import type { SpxProject } from '@/models/spx/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'
+import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 
 const props = defineProps<{
   localConfig: SpriteLocalConfig
-  project: Project
+  project: SpxProject
 }>()
 
+const editorCtx = useEditorCtx()
+
 const rotationStyleTips = {
   [RotationStyle.Normal]: {
     icon: 'rotateAround',
@@ -52,7 +55,7 @@ function handleRotationStyleUpdate(style: RotationStyle) {
 }
 
 async function moveZorder(direction: MoveAction) {
-  await props.project.history.doAction({ name: moveActionNames[direction] }, () => {
+  await editorCtx.state.history.doAction({ name: moveActionNames[direction] }, () => {
     const { localConfig, project } = props
     if (direction === 'up') {
       project.upSpriteZorder(localConfig.id)
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
index c785b9dfe..8ae074ca8 100644
--- 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
@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { UIDropdown, UINumberInput } from '@/components/ui'
 import ConfigPanel from '../common/ConfigPanel.vue'
-import { RotationStyle } from '@/models/sprite'
+import { RotationStyle } from '@/models/spx/sprite'
 import AnglePicker from '@/components/editor/common/AnglePicker.vue'
 import type { SpriteLocalConfig } from '../utils'
 import { debounce } from 'lodash'
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
index 66bf1fbbc..eb160a40e 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/utils.ts
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/utils.ts
@@ -1,7 +1,7 @@
 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'
+import { RotationStyle, type Sprite } from '@/models/spx/sprite'
+import type { Action, History } from '@/components/editor/history'
+import type { Widget } from '@/models/spx/widget'
 
 interface ILocalConfigProvider {
   id: string
@@ -26,7 +26,7 @@ interface LocalConfigChanges {
 export class LocalConfig<T = unknown> {
   constructor(
     private provider: ILocalConfigProvider,
-    private project: Project,
+    private history: History,
     private action: Action
   ) {}
 
@@ -62,7 +62,7 @@ export class LocalConfig<T = unknown> {
   }
 
   sync() {
-    this.project.history.doAction(this.action, () => {
+    this.history.doAction(this.action, () => {
       Object.keys(this.changes.value).forEach((key) => this.applyChanges(key))
       this.changes.value = {}
     })
@@ -89,9 +89,9 @@ export class SpriteLocalConfig extends LocalConfig<{
 }> {
   constructor(
     private sprite: Sprite,
-    project: Project
+    history: History
   ) {
-    super(sprite, project, { name: { en: `Configure sprite ${sprite.name}`, zh: `修改精灵 ${sprite.name} 配置` } })
+    super(sprite, history, { name: { en: `Configure sprite ${sprite.name}`, zh: `修改精灵 ${sprite.name} 配置` } })
   }
 
   get heading() {
@@ -128,9 +128,9 @@ export class SpriteLocalConfig extends LocalConfig<{
 export class WidgetLocalConfig extends LocalConfig {
   constructor(
     private widget: Widget,
-    project: Project
+    history: History
   ) {
-    super(widget, project, { name: { en: `Configure widget ${widget.name}`, zh: `修改组件 ${widget.name} 配置` } })
+    super(widget, history, { name: { en: `Configure widget ${widget.name}`, zh: `修改组件 ${widget.name} 配置` } })
   }
 
   get label() {
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
index c25b02a7a..26a1e2915 100644
--- 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
@@ -1,16 +1,19 @@
 <script lang="ts" setup>
 import ConfigPanel from '../common/ConfigPanel.vue'
-import type { Project } from '@/models/project'
+import type { SpxProject } from '@/models/spx/project'
 import ZorderConfigItem, { moveActionNames, type MoveAction } from '../common/ZorderConfigItem.vue'
 import type { WidgetLocalConfig } from '../utils'
+import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 
 const props = defineProps<{
   localConfig: WidgetLocalConfig
-  project: Project
+  project: SpxProject
 }>()
 
+const editorCtx = useEditorCtx()
+
 async function moveZorder(direction: MoveAction) {
-  await props.project.history.doAction({ name: moveActionNames[direction] }, () => {
+  await editorCtx.state.history.doAction({ name: moveActionNames[direction] }, () => {
     const { localConfig, project } = props
     if (direction === 'up') {
       project.stage.upWidgetZorder(localConfig.id)
diff --git a/spx-gui/src/components/editor/editing.test.ts b/spx-gui/src/components/editor/editing.test.ts
index 8ec0cb647..b8606e7c3 100644
--- a/spx-gui/src/components/editor/editing.test.ts
+++ b/spx-gui/src/components/editor/editing.test.ts
@@ -1,60 +1,62 @@
-import { shallowReactive, ref, type WatchSource } from 'vue'
+import { ref, type WatchSource } from 'vue'
 import { afterEach, beforeEach, describe, expect, vi, it } from 'vitest'
 import { flushPromises } from '@vue/test-utils'
 import { timeout } from '@/utils/utils'
-import { fromText, type Files } from '@/models/common/file'
-import { Editing, type EditableProject, SavingState, EditingMode, type LocalStorage } from './editing'
+import { type Files } from '@/models/common/file'
+import type { CloudHelpers } from '@/models/common/cloud'
+import { mockFile, SimpleProject } from '@/models/common/test'
+import type { IProject } from '@/models/project'
+import { Editing, SavingState, EditingMode, type ILocalCache } from './editing'
 
-function mockFile(name = 'mocked') {
-  return fromText(name, Math.random() + '')
-}
-
-function mockFiles() {
-  return shallowReactive({
+function makeFiles() {
+  return {
     'file1.txt': mockFile('file1.txt'),
     'file2.txt': mockFile('file2.txt'),
     'file3.txt': mockFile('file3.txt')
-  })
+  }
 }
 
-function mockProject({
-  files,
-  ...extra
-}: Partial<{
+function makeProject({
+  files = makeFiles(),
+  owner,
+  name
+}: {
   owner?: string
+  name?: string
   files?: Files
-  saveToCloud(signal?: AbortSignal): Promise<void>
-  saveToLocalCache(key: string, signal?: AbortSignal): Promise<void>
-}>): EditableProject {
+} = {}) {
+  return new SimpleProject(owner, name, files)
+}
+
+function makeCloudHelper(): CloudHelpers {
   return {
-    owner: 'user',
-    exportGameFiles: () => ({ ...files }),
-    saveToCloud: vi.fn().mockResolvedValue(undefined),
-    saveToLocalCache: vi.fn().mockResolvedValue(undefined),
-    ...extra
+    load: vi.fn().mockResolvedValue(undefined),
+    save: vi.fn().mockResolvedValue(undefined)
   }
 }
 
-function mockLocalStorage() {
+function makeLocalCache(): ILocalCache {
   return {
+    load: vi.fn().mockResolvedValue(undefined),
+    save: vi.fn().mockResolvedValue(undefined),
     clear: vi.fn().mockResolvedValue(undefined)
   }
 }
 
 function makeEditing({
-  project = mockProject({}),
+  project = makeProject({}),
+  mode = EditingMode.AutoSave,
   isOnline = () => true,
-  signedInUsername: username = () => 'user',
-  localCacheKey = 'LOCAL_CACHE_KEY',
-  localStorage = mockLocalStorage()
+  cloudHelper = makeCloudHelper(),
+  localCacheHelper = makeLocalCache()
 }: Partial<{
-  project: EditableProject
+  project: IProject
+  mode: EditingMode
   isOnline: WatchSource<boolean>
-  signedInUsername: WatchSource<string | null>
-  localCacheKey: string
-  localStorage: LocalStorage
+  cloudHelper: CloudHelpers
+  localCacheHelper: ILocalCache
 }>) {
-  return new Editing(project, isOnline, username, localCacheKey, localStorage)
+  return new Editing(mode, project, cloudHelper, localCacheHelper, isOnline)
 }
 
 describe('Editing', () => {
@@ -71,121 +73,122 @@ describe('Editing', () => {
   })
 
   it('should do auto-save correctly', async () => {
-    const files = mockFiles()
-    const project = mockProject({
-      files,
-      saveToCloud: vi.fn(async (signal?: AbortSignal) => timeout(500, signal)),
-      saveToLocalCache: vi.fn(async (localCacheKey: string, signal?: AbortSignal) => timeout(100, signal))
-    })
-    const localStorage = mockLocalStorage()
-    const editing = makeEditing({ project, localStorage })
+    const cloudHelper = makeCloudHelper()
+    vi.mocked(cloudHelper.save).mockImplementation((project: IProject, signal?: AbortSignal) => timeout(500, signal))
+    const localCacheHelper = makeLocalCache()
+    vi.mocked(localCacheHelper.save).mockImplementation((project: IProject, signal?: AbortSignal) =>
+      timeout(100, signal)
+    )
+    const project = makeProject()
+    const editing = makeEditing({ project, localCacheHelper, cloudHelper })
     editing.start()
 
     expect(editing.mode).toBe(EditingMode.AutoSave)
     expect(editing.dirty).toBe(false)
     expect(editing.saving).toBeNull()
 
-    files['file1.txt'] = mockFile('file1.txt updated')
+    project.files['file1.txt'] = mockFile('file1.txt updated')
     await flushPromises()
     expect(editing.dirty).toBe(true)
     expect(editing.saving?.state).toBe(SavingState.Pending)
 
     vi.advanceTimersByTime(autoSaveToLocalCacheDelay)
     await flushPromises()
-    expect(project.saveToLocalCache).toHaveBeenCalledTimes(1)
+    expect(localCacheHelper.save).toHaveBeenCalledTimes(1)
 
     vi.advanceTimersByTime(autoSaveToCloudDelay - autoSaveToLocalCacheDelay + 1)
     await flushPromises()
-    expect(project.saveToCloud).toHaveBeenCalledTimes(1)
+    expect(cloudHelper.save).toHaveBeenCalledTimes(1)
     expect(editing.saving?.state).toBe(SavingState.InProgress)
 
     vi.advanceTimersByTime(500)
     await flushPromises()
     expect(editing.dirty).toBe(false)
     expect(editing.saving?.state).toBe(SavingState.Completed)
-    expect(localStorage.clear).toHaveBeenCalledTimes(1)
-    expect(localStorage.clear).toHaveBeenCalledWith('LOCAL_CACHE_KEY')
+    expect(localCacheHelper.clear).toHaveBeenCalledTimes(1)
   })
 
   // https://github.com/goplus/builder/pull/794#discussion_r1728120369
   it('should handle failed auto-save-to-cloud correctly', async () => {
-    const files = mockFiles()
-    const project = mockProject({
-      files,
-      saveToCloud: vi
-        .fn()
-        .mockRejectedValueOnce(new Error('Cloud save failed'))
-        .mockRejectedValueOnce(new Error('Cloud save failed again'))
-        .mockResolvedValue(undefined)
-    })
-    const editing = makeEditing({ project })
+    const project = makeProject()
+    const cloudHelper = makeCloudHelper()
+    vi.mocked(cloudHelper.save)
+      .mockRejectedValueOnce(new Error('Cloud save failed'))
+      .mockRejectedValueOnce(new Error('Cloud save failed again'))
+      .mockResolvedValue(undefined)
+    const editing = makeEditing({ project, cloudHelper })
     editing.start()
 
-    files['file1.txt'] = mockFile('file1.txt updated')
+    project.files['file1.txt'] = mockFile('file1.txt updated')
     await flushPromises()
 
     vi.advanceTimersByTime(autoSaveToCloudDelay)
     await flushPromises()
-    expect(project.saveToCloud).toHaveBeenCalledTimes(1)
+    expect(cloudHelper.save).toHaveBeenCalledTimes(1)
     expect(editing.saving?.state).toBe(SavingState.Failed)
 
     vi.advanceTimersByTime(retryAutoSaveToCloudDelay)
     await flushPromises()
-    expect(project.saveToCloud).toHaveBeenCalledTimes(2)
+    expect(cloudHelper.save).toHaveBeenCalledTimes(2)
     expect(editing.saving?.state).toBe(SavingState.Failed)
 
     vi.advanceTimersByTime(retryAutoSaveToCloudDelay)
     await flushPromises()
-    expect(project.saveToCloud).toHaveBeenCalledTimes(3)
+    expect(cloudHelper.save).toHaveBeenCalledTimes(3)
     expect(editing.dirty).toBe(false)
     expect(editing.saving?.state).toBe(SavingState.Completed)
   })
 
   it('should cancel pending saving when editing is disposed', async () => {
-    const files = mockFiles()
-    const project = mockProject({ files })
-    const editing = makeEditing({ project })
+    const project = makeProject()
+    const cloudHelper = makeCloudHelper()
+    const localCacheHelper = makeLocalCache()
+    const editing = makeEditing({ project, localCacheHelper, cloudHelper })
     editing.start()
 
-    files['file1.txt'] = mockFile('file1.txt updated')
+    project.files['file1.txt'] = mockFile('file1.txt updated')
     await flushPromises()
 
     editing.dispose()
     vi.advanceTimersByTime(autoSaveToCloudDelay)
     await flushPromises()
-    expect(project.saveToLocalCache).toHaveBeenCalledTimes(0)
-    expect(project.saveToCloud).toHaveBeenCalledTimes(0)
+    expect(localCacheHelper.save).toHaveBeenCalledTimes(0)
+    expect(cloudHelper.save).toHaveBeenCalledTimes(0)
   })
 
   it('should abort previous saveToCloud call when a new one is initiated', async () => {
-    const files = mockFiles()
-    const project = mockProject({ files })
-    const editing = makeEditing({ project })
+    const project = makeProject()
+    const cloudHelper = makeCloudHelper()
+    const localCacheHelper = makeLocalCache()
+    const editing = makeEditing({ project, localCacheHelper, cloudHelper })
     editing.start()
 
-    files['file1.txt'] = mockFile('file1.txt updated')
+    project.files['file1.txt'] = mockFile('file1.txt updated')
     await flushPromises()
     vi.advanceTimersByTime(100)
-    files['file2.txt'] = mockFile('file2.txt updated')
+    project.files['file2.txt'] = mockFile('file2.txt updated')
     await flushPromises()
     vi.advanceTimersByTime(100)
-    files['file3.txt'] = mockFile('file3.txt updated')
+    project.files['file3.txt'] = mockFile('file3.txt updated')
     await flushPromises()
 
     vi.advanceTimersByTime(autoSaveToCloudDelay)
     await flushPromises()
     expect(editing.dirty).toBe(false)
     expect(editing.saving?.state).toBe(SavingState.Completed)
-    expect(project.saveToLocalCache).toHaveBeenCalledTimes(1)
-    expect(project.saveToCloud).toHaveBeenCalledTimes(1)
+    expect(localCacheHelper.save).toHaveBeenCalledTimes(1)
+    expect(cloudHelper.save).toHaveBeenCalledTimes(1)
   })
 
   it('should not trigger auto-save for effect-free mode', async () => {
-    const files = mockFiles()
-    const project = mockProject({ files, owner: 'project-owner' })
+    const project = makeProject({ owner: 'project-owner' })
+    const cloudHelper = makeCloudHelper()
+    const localCacheHelper = makeLocalCache()
     const editing = makeEditing({
       project,
-      signedInUsername: () => 'different-user' // Different user from project owner
+      mode: EditingMode.EffectFree,
+      localCacheHelper,
+      cloudHelper
     })
     editing.start()
 
@@ -194,7 +197,7 @@ describe('Editing', () => {
     expect(editing.saving).toBeNull()
 
     // Make changes to files
-    files['file1.txt'] = mockFile('file1.txt updated')
+    project.files['file1.txt'] = mockFile('file1.txt updated')
     await flushPromises()
 
     // Advance time to when auto-save would normally trigger
@@ -204,27 +207,26 @@ describe('Editing', () => {
     await flushPromises()
 
     // Auto-save should not have been triggered
-    expect(project.saveToLocalCache).toHaveBeenCalledTimes(0)
-    expect(project.saveToCloud).toHaveBeenCalledTimes(0)
+    expect(localCacheHelper.save).toHaveBeenCalledTimes(0)
+    expect(cloudHelper.save).toHaveBeenCalledTimes(0)
     expect(editing.dirty).toBe(true) // Files are dirty, but no saving is triggered
     expect(editing.saving).toBeNull()
   })
 
   it('should wait for online when during auto-save', async () => {
-    const files = mockFiles()
-    const project = mockProject({
-      files,
-      saveToCloud: vi.fn(async (signal?: AbortSignal) => timeout(500, signal)) // Add delay to mock save
-    })
+    const project = makeProject()
+    const cloudHelper = makeCloudHelper()
+    vi.mocked(cloudHelper.save).mockImplementation((project: IProject, signal?: AbortSignal) => timeout(500, signal))
     const isOnline = ref(false) // Start offline
-    const editing = makeEditing({ project, isOnline })
+    const localCacheHelper = makeLocalCache()
+    const editing = makeEditing({ project, isOnline, localCacheHelper, cloudHelper })
     editing.start()
 
     expect(editing.dirty).toBe(false)
     expect(editing.saving).toBeNull()
 
     // Make changes to files
-    files['file1.txt'] = mockFile('file1.txt updated')
+    project.files['file1.txt'] = mockFile('file1.txt updated')
     await flushPromises()
     expect(editing.dirty).toBe(true)
     expect(editing.saving?.state).toBe(SavingState.Pending)
@@ -232,14 +234,14 @@ describe('Editing', () => {
     // Local cache save should happen
     vi.advanceTimersByTime(autoSaveToLocalCacheDelay)
     await flushPromises()
-    expect(project.saveToLocalCache).toHaveBeenCalledTimes(1)
+    expect(localCacheHelper.save).toHaveBeenCalledTimes(1)
 
     // Advance time past cloud save delay, but still offline
     vi.advanceTimersByTime(autoSaveToCloudDelay - autoSaveToLocalCacheDelay + 1)
     await flushPromises()
 
     // Cloud save should not have been called yet because we're offline
-    expect(project.saveToCloud).toHaveBeenCalledTimes(0)
+    expect(cloudHelper.save).toHaveBeenCalledTimes(0)
     expect(editing.dirty).toBe(true)
     expect(editing.saving?.state).toBe(SavingState.Pending)
 
@@ -248,7 +250,7 @@ describe('Editing', () => {
     await flushPromises()
 
     // Now cloud save should be triggered and in progress
-    expect(project.saveToCloud).toHaveBeenCalledTimes(1)
+    expect(cloudHelper.save).toHaveBeenCalledTimes(1)
     expect(editing.saving?.state).toBe(SavingState.InProgress)
 
     // Wait for save to complete
diff --git a/spx-gui/src/components/editor/editing.ts b/spx-gui/src/components/editor/editing.ts
index bd84e68ef..0f7c78e3c 100644
--- a/spx-gui/src/components/editor/editing.ts
+++ b/spx-gui/src/components/editor/editing.ts
@@ -1,20 +1,10 @@
-import { watchEffect, type WatchSource, watch, toValue, ref, shallowRef } from 'vue'
+import { watchEffect, type WatchSource, watch, ref, shallowRef } from 'vue'
 import { Disposable, getCleanupSignal } from '@/utils/disposable'
 import { timeout, until } from '@/utils/utils'
 import { Cancelled, capture } from '@/utils/exception'
-import type { Files } from '@/models/common/file'
-import * as localHelper from '@/models/common/local'
-
-export interface EditableProject {
-  owner?: string
-  exportGameFiles(): Files
-  saveToCloud(signal?: AbortSignal): Promise<void>
-  saveToLocalCache(key: string, signal?: AbortSignal): Promise<void>
-}
-
-export interface LocalStorage {
-  clear(key: string): Promise<void>
-}
+import type { IProject } from '@/models/project'
+import type { CloudHelpers } from '@/models/common/cloud'
+import { History } from './history'
 
 export enum SavingState {
   Pending,
@@ -23,6 +13,12 @@ export enum SavingState {
   Failed
 }
 
+export interface ILocalCache {
+  load(project: IProject): Promise<boolean>
+  save(project: IProject, signal?: AbortSignal): Promise<void>
+  clear(): Promise<void>
+}
+
 export class Saving {
   private stateRef = ref(SavingState.Pending)
   get state() {
@@ -30,10 +26,10 @@ export class Saving {
   }
 
   constructor(
-    private project: EditableProject,
-    private localStorage: LocalStorage,
+    private project: IProject,
+    private cloudHelper: CloudHelpers,
+    private localCacheHelper: ILocalCache,
     private isOnline: WatchSource<boolean>,
-    private localCacheKey: string,
     private signal: AbortSignal
   ) {
     this.start()
@@ -41,7 +37,7 @@ export class Saving {
 
   private async start() {
     timeout(1000, this.signal)
-      .then(() => this.project.saveToLocalCache(this.localCacheKey, this.signal))
+      .then(() => this.localCacheHelper.save(this.project, this.signal))
       .catch((e) => capture(e, 'Failed to save to local cache'))
     try {
       await timeout(1500, this.signal)
@@ -57,10 +53,10 @@ export class Saving {
     const signal = this.signal
     try {
       this.stateRef.value = SavingState.InProgress
-      await this.project.saveToCloud(signal)
+      await this.cloudHelper.save(this.project, signal)
       signal.throwIfAborted()
       this.stateRef.value = SavingState.Completed
-      this.localStorage.clear(this.localCacheKey)
+      this.localCacheHelper.clear().catch((e) => capture(e, 'Failed to clear local cache'))
     } catch (err) {
       if (err instanceof Cancelled) return
       capture(err, 'Failed to save project to cloud')
@@ -92,29 +88,24 @@ export enum EditingMode {
 // TODO: Move `History` into `Editing` (or `EditorState`).
 
 export class Editing extends Disposable {
+  history: History
+
   constructor(
-    private project: EditableProject,
-    private isOnline: WatchSource<boolean>,
-    private signedInUsername: WatchSource<string | null>,
-    private localCacheKey: string,
-    private localStorage: LocalStorage = localHelper
+    public mode: EditingMode,
+    private project: IProject,
+    private cloudHelper: CloudHelpers,
+    private localCacheHelper: ILocalCache,
+    private isOnline: WatchSource<boolean>
   ) {
     super()
-  }
-
-  get mode(): EditingMode {
-    const username = toValue(this.signedInUsername)
-    if (username == null || username !== this.project.owner) {
-      return EditingMode.EffectFree
-    }
-    return EditingMode.AutoSave
+    this.history = new History(project)
   }
 
   private startAutoPreload() {
     this.addDisposer(
       watchEffect((onCleanup) => {
         const signal = getCleanupSignal(onCleanup)
-        const files = this.project.exportGameFiles()
+        const files = this.project.exportFiles()
         Object.values(files).forEach((file) => {
           if (file == null) return
           file.arrayBuffer(signal).catch((e) => {
@@ -134,7 +125,7 @@ export class Editing extends Disposable {
   private startDirtyMonitoring() {
     this.addDisposer(
       watch(
-        () => this.project.exportGameFiles(),
+        () => this.project.exportFiles(),
         () => (this.dirtyRef.value = true)
       )
     )
@@ -159,12 +150,12 @@ export class Editing extends Disposable {
   private startAutoSave() {
     this.addDisposer(
       watch(
-        () => this.project.exportGameFiles(),
+        () => this.project.exportFiles(),
         (_, __, onCleanup) => {
           if (this.mode === EditingMode.EffectFree) return
 
           const signal = getCleanupSignal(onCleanup)
-          const saving = new Saving(this.project, this.localStorage, this.isOnline, this.localCacheKey, signal)
+          const saving = new Saving(this.project, this.cloudHelper, this.localCacheHelper, this.isOnline, signal)
 
           this.savingRef.value = saving
           signal.addEventListener('abort', () => (this.savingRef.value = null))
diff --git a/spx-gui/src/components/editor/editor-state.test.ts b/spx-gui/src/components/editor/editor-state.test.ts
index fe06eb06d..100d592dc 100644
--- a/spx-gui/src/components/editor/editor-state.test.ts
+++ b/spx-gui/src/components/editor/editor-state.test.ts
@@ -1,36 +1,42 @@
 import { ref, type WatchSource } from 'vue'
 import { afterEach, beforeEach, describe, expect, vi, it } from 'vitest'
 import { flushPromises } from '@vue/test-utils'
-import { Project } from '@/models/project'
-import { Sprite } from '@/models/sprite'
-import { Sound } from '@/models/sound'
-import { Backdrop } from '@/models/backdrop'
-import { Monitor } from '@/models/widget/monitor'
-import { Costume } from '@/models/costume'
-import { Animation } from '@/models/animation'
-import { fromText } from '@/models/common/file'
+import { SpxProject } from '@/models/spx/project'
+import { Sprite } from '@/models/spx/sprite'
+import { Sound } from '@/models/spx/sound'
+import { Backdrop } from '@/models/spx/backdrop'
+import { Monitor } from '@/models/spx/widget/monitor'
+import { Costume } from '@/models/spx/costume'
+import { Animation } from '@/models/spx/animation'
 import type * as editing from './editing'
 
 import { EditorState, type IRouter, type Selected } from './editor-state'
+import type { CloudHelpers } from '@/models/common/cloud'
+import { mockFile } from '@/models/common/test'
 
-function mockFile(name = 'mocked') {
-  return fromText(name, Math.random() + '')
+function makeCloudHelpers(): CloudHelpers {
+  return {
+    load: vi.fn().mockResolvedValue(undefined),
+    save: vi.fn().mockResolvedValue(undefined)
+  }
 }
 
-function mockLocalStorage(): editing.LocalStorage {
+function makeLocalCache(): editing.ILocalCache {
   return {
+    load: vi.fn().mockResolvedValue(undefined),
+    save: vi.fn().mockResolvedValue(undefined),
     clear: vi.fn().mockResolvedValue(undefined)
   }
 }
 
-function createEmptyProject(): Project {
-  const project = new Project()
+function makeEmptyProject(): SpxProject {
+  const project = new SpxProject()
   project.bindScreenshotTaker(async () => mockFile())
   return project
 }
 
-function createProjectWithResources(): Project {
-  const project = new Project()
+function makeProjectWithResources(): SpxProject {
+  const project = new SpxProject()
 
   // Add sounds
   const sound1 = new Sound('sound1', mockFile())
@@ -86,7 +92,7 @@ function createProjectWithResources(): Project {
   return project
 }
 
-function mockRouter() {
+function makeRouter() {
   const currentRoute = ref({
     fullPath: '/',
     params: {},
@@ -100,14 +106,14 @@ function mockRouter() {
   } satisfies IRouter
 }
 
-function createEditorState(
-  project: Project = createEmptyProject(),
+function makeEditorState(
+  project: SpxProject = makeEmptyProject(),
   isOnline: WatchSource<boolean> = ref(true),
-  signedInUsername: WatchSource<string | null> = ref('user'),
-  localCacheKey: string = 'test-cache-key',
-  localStorage: editing.LocalStorage = mockLocalStorage()
+  signedInUsername: string | null = 'user',
+  cloudHelpers: CloudHelpers = makeCloudHelpers(),
+  localCache: editing.ILocalCache = makeLocalCache()
 ): EditorState {
-  return new EditorState(project, isOnline, signedInUsername, localCacheKey, localStorage)
+  return new EditorState(project, isOnline, signedInUsername, cloudHelpers, localCache)
 }
 
 describe('EditorState', () => {
@@ -121,8 +127,8 @@ describe('EditorState', () => {
 
   describe('initialization', () => {
     it('should initialize with empty project and default to sprite selection', async () => {
-      const project = createEmptyProject()
-      const editorState = createEditorState(project)
+      const project = makeEmptyProject()
+      const editorState = makeEditorState(project)
 
       await flushPromises()
 
@@ -137,8 +143,8 @@ describe('EditorState', () => {
     })
 
     it('should initialize with normal project and auto-select first sprite', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
 
       await flushPromises()
 
@@ -155,8 +161,8 @@ describe('EditorState', () => {
 
   describe('selection methods', () => {
     it('should select stage correctly', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
 
       editorState.select({ type: 'stage' })
       await flushPromises()
@@ -174,8 +180,8 @@ describe('EditorState', () => {
     })
 
     it('should select sprite by id correctly', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
       const sprite = project.sprites[1] // sprite2
 
       editorState.select({ type: 'sprite', id: sprite.id })
@@ -195,8 +201,8 @@ describe('EditorState', () => {
     })
 
     it('should select sound by id correctly', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
       const sound = project.sounds[1] // sound2
 
       editorState.select({ type: 'sound', id: sound.id })
@@ -212,8 +218,8 @@ describe('EditorState', () => {
     })
 
     it('should handle non-existent sprite id gracefully', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
 
       editorState.select({ type: 'sprite', id: 'non-existent-id' })
       await flushPromises()
@@ -233,8 +239,8 @@ describe('EditorState', () => {
     })
 
     it('should handle non-existent sound id gracefully', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
 
       editorState.select({ type: 'sound', id: 'non-existent-id' })
       await flushPromises()
@@ -251,25 +257,25 @@ describe('EditorState', () => {
     })
 
     it('should select correctly with undo/redo', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
 
       editorState.selectCostume(project.sprites[0].id, project.sprites[0].costumes[0].id)
       await flushPromises()
 
-      await project.history.doAction({ name: { en: 'test', zh: '测试' } }, () =>
+      await editorState.history.doAction({ name: { en: 'test', zh: '测试' } }, () =>
         editorState.selectCostume(project.sprites[0].id, project.sprites[0].costumes[1].id)
       )
       await flushPromises()
 
       expect(editorState.selectedCostume?.name).toBe(project.sprites[0].costumes[1].name)
 
-      await project.history.undo()
+      await editorState.history.undo()
       await flushPromises()
 
       expect(editorState.selectedCostume?.name).toBe(project.sprites[0].costumes[0].name)
 
-      await project.history.doAction({ name: { en: 'test', zh: '测试' } }, () =>
+      await editorState.history.doAction({ name: { en: 'test', zh: '测试' } }, () =>
         editorState.selectCostume(project.sprites[0].id, project.sprites[0].costumes[1].id)
       )
       await flushPromises()
@@ -280,8 +286,8 @@ describe('EditorState', () => {
 
   describe('selectByName methods', () => {
     it('should select sprite by name correctly', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
 
       editorState.selectByName({ type: 'sprite', name: 'sprite2' })
       await flushPromises()
@@ -299,8 +305,8 @@ describe('EditorState', () => {
     })
 
     it('should select sound by name correctly', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
 
       editorState.selectByName({ type: 'sound', name: 'sound2' })
       await flushPromises()
@@ -315,8 +321,8 @@ describe('EditorState', () => {
     })
 
     it('should handle non-existent names gracefully', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
 
       editorState.selectByName({ type: 'sprite', name: 'non-existent' })
       await flushPromises()
@@ -338,8 +344,8 @@ describe('EditorState', () => {
 
   describe('convenience selection methods', () => {
     it('should select sprite by id using selectSprite', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
       const sprite = project.sprites[0]
 
       editorState.selectSprite(sprite.id)
@@ -351,8 +357,8 @@ describe('EditorState', () => {
     })
 
     it('should select sound by id using selectSound', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
       const sound = project.sounds[0]
 
       editorState.selectSound(sound.id)
@@ -364,8 +370,8 @@ describe('EditorState', () => {
     })
 
     it('should select widget correctly', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
       const widget = project.stage.widgets[0]
 
       editorState.selectWidget(widget.id)
@@ -383,8 +389,8 @@ describe('EditorState', () => {
     })
 
     it('should select backdrop correctly', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
       const backdrop = project.stage.backdrops[0]
 
       editorState.selectBackdrop(backdrop.id)
@@ -402,8 +408,8 @@ describe('EditorState', () => {
     })
 
     it('should select costume correctly', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
       const sprite = project.sprites[0]
       const costume = sprite.costumes[1] // costume2
 
@@ -425,8 +431,8 @@ describe('EditorState', () => {
     })
 
     it('should select animation correctly', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
       const sprite = project.sprites[0]
       const animation = sprite.animations[1]
 
@@ -450,8 +456,8 @@ describe('EditorState', () => {
 
   describe('selectResource method', () => {
     it('should select different resource types correctly', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
 
       // Test sprite selection
       editorState.selectResource(project.sprites[1])
@@ -505,9 +511,9 @@ describe('EditorState', () => {
 
   describe('router integration', () => {
     it('should sync selection to router correctly', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
-      const router = mockRouter()
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
+      const router = makeRouter()
 
       editorState.syncWithRouter(router)
       await flushPromises()
@@ -528,9 +534,9 @@ describe('EditorState', () => {
     })
 
     it('should sync from router to selection correctly', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
-      const router = mockRouter()
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
+      const router = makeRouter()
 
       editorState.syncWithRouter(router)
       await flushPromises()
@@ -553,9 +559,9 @@ describe('EditorState', () => {
     })
 
     it('should handle stage routes correctly', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
-      const router = mockRouter()
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
+      const router = makeRouter()
 
       editorState.syncWithRouter(router)
       await flushPromises()
@@ -575,9 +581,9 @@ describe('EditorState', () => {
     })
 
     it('should handle sprite sub-routes correctly', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
-      const router = mockRouter()
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
+      const router = makeRouter()
 
       editorState.syncWithRouter(router)
       await flushPromises()
@@ -604,9 +610,9 @@ describe('EditorState', () => {
     })
 
     it('should default to sprites route when no specific route provided', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
-      const router = mockRouter()
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
+      const router = makeRouter()
 
       editorState.syncWithRouter(router)
       await flushPromises()
@@ -632,9 +638,9 @@ describe('EditorState', () => {
     })
 
     it('should do replace instead of push when selected resource renamed', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
-      const router = mockRouter()
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
+      const router = makeRouter()
 
       editorState.syncWithRouter(router)
       await flushPromises()
@@ -677,8 +683,8 @@ describe('EditorState', () => {
 
   describe('resource management', () => {
     it('should auto-select first sprite when current selection becomes invalid', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
 
       // Select second sprite
       editorState.selectSprite(project.sprites[1].id)
@@ -695,8 +701,8 @@ describe('EditorState', () => {
     })
 
     it('should auto-select first sound when current selection becomes invalid', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
 
       // Select second sound
       editorState.selectSound(project.sounds[1].id)
@@ -712,8 +718,8 @@ describe('EditorState', () => {
     })
 
     it('should handle project with no sprites gracefully', async () => {
-      const project = createEmptyProject()
-      const editorState = createEditorState(project)
+      const project = makeEmptyProject()
+      const editorState = makeEditorState(project)
 
       editorState.select({ type: 'sprite' })
       await flushPromises()
@@ -726,8 +732,8 @@ describe('EditorState', () => {
     })
 
     it('should handle project with no sounds gracefully', async () => {
-      const project = createEmptyProject()
-      const editorState = createEditorState(project)
+      const project = makeEmptyProject()
+      const editorState = makeEditorState(project)
 
       editorState.select({ type: 'sound' })
       await flushPromises()
@@ -739,8 +745,8 @@ describe('EditorState', () => {
     })
 
     it('should handle adding new sprites correctly', async () => {
-      const project = createEmptyProject()
-      const editorState = createEditorState(project)
+      const project = makeEmptyProject()
+      const editorState = makeEditorState(project)
 
       // Initially no sprite selected
       expect(editorState.selectedSprite).toBeNull()
@@ -756,8 +762,8 @@ describe('EditorState', () => {
     })
 
     it('should handle adding new sounds correctly', async () => {
-      const project = createEmptyProject()
-      const editorState = createEditorState(project)
+      const project = makeEmptyProject()
+      const editorState = makeEditorState(project)
       editorState.select({ type: 'sound' })
 
       // Initially no sound selected
@@ -774,8 +780,8 @@ describe('EditorState', () => {
     })
 
     it('should preserve in-sprite type selection when switching between sprites', async () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
 
       editorState.selectSprite(project.sprites[0].id)
       editorState.spriteState!.select('costumes')
@@ -833,8 +839,8 @@ describe('EditorState', () => {
 
   describe('error handling', () => {
     it('should throw error for invalid target type in select', () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
 
       expect(() => {
         editorState.select({ type: 'invalid' } as any)
@@ -844,8 +850,8 @@ describe('EditorState', () => {
     })
 
     it('should throw error for invalid target type in selectByName', () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
 
       expect(() => {
         editorState.selectByName({ type: 'invalid' } as any)
@@ -855,8 +861,8 @@ describe('EditorState', () => {
     })
 
     it('should throw error when trying to select costume without sprite state', async () => {
-      const project = createEmptyProject() // Project with no sprites
-      const editorState = createEditorState(project)
+      const project = makeEmptyProject() // Project with no sprites
+      const editorState = makeEditorState(project)
 
       expect(() => {
         editorState.selectCostume('non-existent-sprite-id', 'costume-id')
@@ -866,8 +872,8 @@ describe('EditorState', () => {
     })
 
     it('should throw error when trying to select animation without sprite state', async () => {
-      const project = createEmptyProject() // Project with no sprites
-      const editorState = createEditorState(project)
+      const project = makeEmptyProject() // Project with no sprites
+      const editorState = makeEditorState(project)
 
       expect(() => {
         editorState.selectAnimation('non-existent-sprite-id', 'animation-id')
@@ -879,8 +885,8 @@ describe('EditorState', () => {
 
   describe('disposal', () => {
     it('should dispose all resources correctly', () => {
-      const project = createProjectWithResources()
-      const editorState = createEditorState(project)
+      const project = makeProjectWithResources()
+      const editorState = makeEditorState(project)
       editorState.selectAnimation(project.sprites[0].id, project.sprites[0].animations[0].id)
 
       // Ensure runtime and editing are created
diff --git a/spx-gui/src/components/editor/editor-state.ts b/spx-gui/src/components/editor/editor-state.ts
index e2028349b..6f8642e8d 100644
--- a/spx-gui/src/components/editor/editor-state.ts
+++ b/spx-gui/src/components/editor/editor-state.ts
@@ -2,26 +2,30 @@ import { ref, shallowReactive, watch, type Ref, type WatchSource } from 'vue'
 import type { RouteLocationAsRelativeGeneric, RouteLocationNormalizedGeneric } from 'vue-router'
 import { shiftPath, type PathSegments } from '@/utils/route'
 import { Disposable } from '@/utils/disposable'
-import type { ResourceModel } from '@/models/common/resource-model'
-import type { Project } from '@/models/project'
-import { Stage } from '@/models/stage'
-import { Sprite } from '@/models/sprite'
-import { Sound } from '@/models/sound'
-import { Backdrop } from '@/models/backdrop'
-import { isWidget } from '@/models/widget'
-import { Costume } from '@/models/costume'
-import { Animation } from '@/models/animation'
-import { SpriteGen } from '@/models/gen/sprite-gen'
-import { BackdropGen } from '@/models/gen/backdrop-gen'
+import { AssetType } from '@/apis/asset'
+import { CloudHelpers } from '@/models/common/cloud'
+import type { AssetGenModel } from '@/models/spx/common/asset'
+import type { ResourceModel } from '@/models/spx/common/resource-model'
+import type { SpxProject } from '@/models/spx/project'
+import { Stage } from '@/models/spx/stage'
+import { Sprite } from '@/models/spx/sprite'
+import { Sound } from '@/models/spx/sound'
+import { Backdrop } from '@/models/spx/backdrop'
+import { isWidget } from '@/models/spx/widget'
+import { Costume } from '@/models/spx/costume'
+import { Animation } from '@/models/spx/animation'
+import { SpriteGen } from '@/models/spx/gen/sprite-gen'
+import { BackdropGen } from '@/models/spx/gen/backdrop-gen'
 import { StageEditorState, type Selected as StageEditorSelected } from './stage/StageEditor.vue'
 import { SpriteEditorState, type Selected as SpriteEditorSelected } from './sprite/SpriteEditor.vue'
 import { Runtime } from './runtime'
 import * as editing from './editing'
-import { AssetType } from '@/apis/asset'
-import type { AssetGenModel } from '@/models/common/asset'
+import { EditingMode } from './editing'
+import type { IProject, Metadata } from '@/models/project'
+import type { Files } from '@/models/common/file'
 
-type GenCollapsePos = { x: number; y: number }
-type CollapsePosProvider<T extends AssetType> = (gen: AssetGenModel<T>) => Promise<GenCollapsePos | null>
+type GenPos = { x: number; y: number }
+type GenPosProvider<T extends AssetType> = (gen: AssetGenModel<T>) => Promise<GenPos | null>
 
 export type SelectedType = 'stage' | 'sprite' | 'sound'
 
@@ -50,44 +54,7 @@ export enum EditMode {
   Map = 'map'
 }
 
-export class EditorState extends Disposable {
-  constructor(
-    private project: Project,
-    isOnline: WatchSource<boolean>,
-    signedInUsername: WatchSource<string | null>,
-    localCacheKey: string,
-    localStorage?: editing.LocalStorage
-  ) {
-    super()
-    this.addDisposable((this.runtime = new Runtime(project)))
-    this.addDisposable(
-      (this.editing = new editing.Editing(project, isOnline, signedInUsername, localCacheKey, localStorage))
-    )
-    this.addDisposable((this.stageState = new StageEditorState(() => project.stage)))
-
-    this.addDisposer(() => this.spriteState?.dispose())
-
-    this.addDisposer(
-      watch(
-        () => this.selected,
-        (selected) => {
-          if (selected.type === 'sprite' && selected.sprite == null && this.project.sprites.length > 0) {
-            this.select({ type: 'sprite', id: this.project.sprites[0].id })
-          }
-          if (selected.type === 'sound' && selected.sound == null && this.project.sounds.length > 0) {
-            this.select({ type: 'sound', id: this.project.sounds[0].id })
-          }
-        },
-        { immediate: true }
-      )
-    )
-  }
-
-  runtime: Runtime
-  editing: editing.Editing
-  stageState: StageEditorState
-  spriteState: SpriteEditorState | null = null
-
+class GenManager {
   spriteGens = shallowReactive<SpriteGen[]>([])
   addSpriteGen(gen: SpriteGen) {
     this.spriteGens.push(gen)
@@ -110,40 +77,201 @@ export class EditorState extends Disposable {
     gen.dispose()
   }
 
-  private genCollapsePosProviderMap = shallowReactive(new Map<AssetType, CollapsePosProvider<AssetType>[]>())
-  private addGenCollapsePosProvider<T extends AssetType>(type: T, provider: CollapsePosProvider<T>) {
-    const providers = this.genCollapsePosProviderMap.get(type) ?? []
-    this.genCollapsePosProviderMap.set(type, [...providers, provider])
+  private genPosProviderMap = shallowReactive(new Map<AssetType, GenPosProvider<AssetType>[]>())
+  private registerGenPosProvider<T extends AssetType>(type: T, provider: GenPosProvider<T>) {
+    const providers = this.genPosProviderMap.get(type) ?? []
+    this.genPosProviderMap.set(type, [...providers, provider])
     return () => {
-      this.genCollapsePosProviderMap.set(
+      this.genPosProviderMap.set(
         type,
-        (this.genCollapsePosProviderMap.get(type) ?? []).filter((p) => p !== provider)
+        (this.genPosProviderMap.get(type) ?? []).filter((p) => p !== provider)
       )
     }
   }
-  addSpriteGenCollapsePosProvider(provider: CollapsePosProvider<AssetType.Sprite>) {
-    return this.addGenCollapsePosProvider(AssetType.Sprite, provider)
+  registerSpriteGenPosProvider(provider: GenPosProvider<AssetType.Sprite>) {
+    return this.registerGenPosProvider(AssetType.Sprite, provider)
   }
-  addBackdropGenCollapsePosProvider(provider: CollapsePosProvider<AssetType.Backdrop>) {
-    return this.addGenCollapsePosProvider(AssetType.Backdrop, provider)
+  registerBackdropGenPosProvider(provider: GenPosProvider<AssetType.Backdrop>) {
+    return this.registerGenPosProvider(AssetType.Backdrop, provider)
   }
   /**
-   * Retrieves the collapse position for the given generator.
-   * Acts as a consumer of collapse positions, returning the result from a registered provider
+   * Retrieves the position for the given generator.
+   * Acts as a consumer of positions, returning the result from a registered provider
    * for the generator's asset type, or null if no providers are available.
    */
-  private async getGenCollapsePos<T extends AssetType>(assetType: T, gen: AssetGenModel<T>) {
-    const providers = this.genCollapsePosProviderMap.get(assetType) ?? []
+  private async getGenPos<T extends AssetType>(assetType: T, gen: AssetGenModel<T>) {
+    const providers = this.genPosProviderMap.get(assetType) ?? []
     const provider = providers.at(-1)
     return provider != null ? provider(gen) : null
   }
-  getSpriteGenCollapsePos(gen: SpriteGen) {
-    return this.getGenCollapsePos(AssetType.Sprite, gen)
+  getSpriteGenPos(gen: SpriteGen) {
+    return this.getGenPos(AssetType.Sprite, gen)
+  }
+  getBackdropGenPos(gen: BackdropGen) {
+    return this.getGenPos(AssetType.Backdrop, gen)
   }
-  getBackdropGenCollapsePos(gen: BackdropGen) {
-    return this.getGenCollapsePos(AssetType.Backdrop, gen)
+
+  static async load(name: string, files: Files): Promise<void> {
+
   }
 
+  export(): Files {
+    const files: Files = {}
+    ;[...this.spriteGens, ...this.backdropGens].forEach((gen => {
+      const genFiles = gen.export()
+      Object.assign(files, genFiles)
+    }))
+    return files
+  }
+}
+
+class ProjectWithGens implements IProject {
+  constructor(
+    private project: SpxProject,
+    private genManager: GenManager
+  ) {}
+  get mutex() {
+    return this.project.mutex
+  }
+  get owner() {
+    return this.project.owner
+  }
+  get name() {
+    return this.project.name
+  }
+  setMetadata(metadata: Metadata) {
+    return this.project.setMetadata(metadata)
+  }
+  exportFiles() {
+    const files: Files = {}
+    const projectFiles = this.project.exportFiles()
+    Object.assign(files, projectFiles)
+    // TODO: Include gen files
+    ;[...this.genManager.spriteGens, ...this.genManager.backdropGens].forEach((gen => {
+      const genFiles = gen.export()
+      Object.assign(files, genFiles)
+    }))
+    return files
+  }
+  loadFiles(files: Files, signal?: AbortSignal): Promise<void> {
+    return Promise.all([
+      this.project.loadFiles(files),
+
+    ])
+  }
+  async load(metadata: Metadata, files: Files, signal?: AbortSignal) {
+    await this.project.load(metadata, files)
+    // TODO: Load gen files
+    return
+  }
+  async export(signal?: AbortSignal): Promise<[Metadata, Files]> {
+    const [metadata, files] = await this.project.export(signal)
+    // TODO: Include gen files
+    return [metadata, files]
+  }
+}
+
+export class EditorState extends Disposable {
+  constructor(
+    private project: SpxProject,
+    isOnline: WatchSource<boolean>,
+    signedInUsername: string | null,
+    cloudHelpers: CloudHelpers,
+    localCache: editing.ILocalCache
+  ) {
+    super()
+    this.addDisposable((this.runtime = new Runtime(project)))
+    let editingMode = EditingMode.AutoSave
+    if (signedInUsername == null || signedInUsername !== this.project.owner) {
+      editingMode = EditingMode.EffectFree
+    }
+    this.addDisposable(
+      (this.editing = new editing.Editing(editingMode, project, cloudHelpers, localCache, isOnline))
+    )
+    this.addDisposable((this.stageState = new StageEditorState(() => project.stage)))
+
+    this.addDisposer(() => this.spriteState?.dispose())
+
+    this.addDisposer(
+      watch(
+        () => this.selected,
+        (selected) => {
+          if (selected.type === 'sprite' && selected.sprite == null && this.project.sprites.length > 0) {
+            this.select({ type: 'sprite', id: this.project.sprites[0].id })
+          }
+          if (selected.type === 'sound' && selected.sound == null && this.project.sounds.length > 0) {
+            this.select({ type: 'sound', id: this.project.sounds[0].id })
+          }
+        },
+        { immediate: true }
+      )
+    )
+  }
+
+  runtime: Runtime
+  editing: editing.Editing
+  get history() {
+    return this.editing.history
+  }
+  stageState: StageEditorState
+  spriteState: SpriteEditorState | null = null
+
+  // spriteGens = shallowReactive<SpriteGen[]>([])
+  // addSpriteGen(gen: SpriteGen) {
+  //   this.spriteGens.push(gen)
+  // }
+  // removeSpriteGen(id: string) {
+  //   const index = this.spriteGens.findIndex((gen) => gen.id === id)
+  //   if (index < 0) throw new Error('SpriteGen not found in editor state')
+  //   const [gen] = this.spriteGens.splice(index, 1)
+  //   gen.dispose()
+  // }
+
+  // backdropGens = shallowReactive<BackdropGen[]>([])
+  // addBackdropGen(gen: BackdropGen) {
+  //   this.backdropGens.push(gen)
+  // }
+  // removeBackdropGen(id: string) {
+  //   const index = this.backdropGens.findIndex((gen) => gen.id === id)
+  //   if (index < 0) throw new Error('BackdropGen not found in editor state')
+  //   const [gen] = this.backdropGens.splice(index, 1)
+  //   gen.dispose()
+  // }
+
+  // private genCollapsePosProviderMap = shallowReactive(new Map<AssetType, CollapsePosProvider<AssetType>[]>())
+  // private addGenCollapsePosProvider<T extends AssetType>(type: T, provider: CollapsePosProvider<T>) {
+  //   const providers = this.genCollapsePosProviderMap.get(type) ?? []
+  //   this.genCollapsePosProviderMap.set(type, [...providers, provider])
+  //   return () => {
+  //     this.genCollapsePosProviderMap.set(
+  //       type,
+  //       (this.genCollapsePosProviderMap.get(type) ?? []).filter((p) => p !== provider)
+  //     )
+  //   }
+  // }
+  // addSpriteGenCollapsePosProvider(provider: CollapsePosProvider<AssetType.Sprite>) {
+  //   return this.addGenCollapsePosProvider(AssetType.Sprite, provider)
+  // }
+  // addBackdropGenCollapsePosProvider(provider: CollapsePosProvider<AssetType.Backdrop>) {
+  //   return this.addGenCollapsePosProvider(AssetType.Backdrop, provider)
+  // }
+  // /**
+  //  * Retrieves the collapse position for the given generator.
+  //  * Acts as a consumer of collapse positions, returning the result from a registered provider
+  //  * for the generator's asset type, or null if no providers are available.
+  //  */
+  // private async getGenCollapsePos<T extends AssetType>(assetType: T, gen: AssetGenModel<T>) {
+  //   const providers = this.genCollapsePosProviderMap.get(assetType) ?? []
+  //   const provider = providers.at(-1)
+  //   return provider != null ? provider(gen) : null
+  // }
+  // getSpriteGenCollapsePos(gen: SpriteGen) {
+  //   return this.getGenCollapsePos(AssetType.Sprite, gen)
+  // }
+  // getBackdropGenCollapsePos(gen: BackdropGen) {
+  //   return this.getGenCollapsePos(AssetType.Backdrop, gen)
+  // }
+
   private selectedEditModeRef = ref<EditMode>(EditMode.Default)
   private selectedTypeRef = ref<SelectedType>('sprite')
   private selectedSpriteIdRef = ref<string | null>(null)
diff --git a/spx-gui/src/models/project/history.test.ts b/spx-gui/src/components/editor/history.test.ts
similarity index 96%
rename from spx-gui/src/models/project/history.test.ts
rename to spx-gui/src/components/editor/history.test.ts
index d12e1dbcc..31d39bf93 100644
--- a/spx-gui/src/models/project/history.test.ts
+++ b/spx-gui/src/components/editor/history.test.ts
@@ -1,9 +1,9 @@
 import { describe, it, expect } from 'vitest'
 import { sleep } from '@/utils/test'
-import { fromText } from '../common/file'
-import { Costume } from '../costume'
-import { Sprite } from '../sprite'
-import { Project } from '.'
+import { fromText } from '@/models/common/file'
+import { Costume } from '@/models/spx/costume'
+import { Sprite } from '@/models/spx/sprite'
+import { SpxProject } from '@/models/spx/project'
 import { History, type Action } from './history'
 
 function mockFile(name = 'mocked') {
@@ -28,7 +28,7 @@ const actionUpdateCode: Action = {
 }
 
 function makeProject() {
-  const project = new Project()
+  const project = new SpxProject()
   const sprite = new Sprite('MySprite')
   const file1 = mockFile()
   const costume = new Costume('costume', file1)
diff --git a/spx-gui/src/models/project/history.ts b/spx-gui/src/components/editor/history.ts
similarity index 84%
rename from spx-gui/src/models/project/history.ts
rename to spx-gui/src/components/editor/history.ts
index d3dfad542..824a1bc84 100644
--- a/spx-gui/src/models/project/history.ts
+++ b/spx-gui/src/components/editor/history.ts
@@ -5,8 +5,8 @@
 
 import { shallowReactive } from 'vue'
 import type { LocaleMessage } from '@/utils/i18n'
-import type { Files } from '../common/file'
-import type { Project } from '.'
+import type { Files } from '@/models/common/file'
+import type { IProject } from '@/models/project'
 
 export type Action = {
   /** Name of the action, will be displayed to the user */
@@ -27,7 +27,7 @@ export type State = {
 
 export class History {
   constructor(
-    private project: Project,
+    private project: IProject,
     /**
      * Max history item num.
      * When exceeded, the old history(s) will be discarded.
@@ -49,7 +49,7 @@ export class History {
 
   private saveCurrentState() {
     this.states[this.index] = {
-      files: this.project.exportGameFiles(),
+      files: this.project.exportFiles(),
       action: this.action
     }
   }
@@ -60,7 +60,7 @@ export class History {
     const { action, files } = this.states[index]
     this.index = index
     this.action = action
-    await this.project.loadGameFiles(files)
+    await this.project.loadFiles(files)
   }
 
   getRedoAction() {
@@ -68,7 +68,7 @@ export class History {
   }
 
   redo() {
-    return this.project.transactionMutex.runExclusive(() => this.goto(this.index + 1))
+    return this.project.mutex.runExclusive(() => this.goto(this.index + 1))
   }
 
   getUndoAction() {
@@ -77,11 +77,11 @@ export class History {
   }
 
   undo() {
-    return this.project.transactionMutex.runExclusive(() => this.goto(this.index - 1))
+    return this.project.mutex.runExclusive(() => this.goto(this.index - 1))
   }
 
   doAction<T>(action: Action, fn: () => T | Promise<T>): Promise<T> {
-    return this.project.transactionMutex.runExclusive(async () => {
+    return this.project.mutex.runExclusive(async () => {
       // history after current state (for redo) will be discarded on any action
       this.states.splice(this.index)
 
diff --git a/spx-gui/src/components/editor/map-editor/MapBasicConfig.vue b/spx-gui/src/components/editor/map-editor/MapBasicConfig.vue
index 652d616ed..29ae24f04 100644
--- a/spx-gui/src/components/editor/map-editor/MapBasicConfig.vue
+++ b/spx-gui/src/components/editor/map-editor/MapBasicConfig.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { Project } from '@/models/project'
+import type { SpxProject } from '@/models/spx/project'
 
 import MapSizeInput from './MapSizeInput.vue'
 import MapPhysicsInput from './MapPhysicsInput.vue'
 import MapLayerSortInput from './MapLayerSortInput.vue'
 
 defineProps<{
-  project: Project
+  project: SpxProject
 }>()
 </script>
 
diff --git a/spx-gui/src/components/editor/map-editor/MapEditor.vue b/spx-gui/src/components/editor/map-editor/MapEditor.vue
index 91ce9fb94..b346330d4 100644
--- a/spx-gui/src/components/editor/map-editor/MapEditor.vue
+++ b/spx-gui/src/components/editor/map-editor/MapEditor.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { UICard, UICardHeader, UIIcon, UITooltip } from '@/components/ui'
-import type { Project } from '@/models/project'
+import type { SpxProject } from '@/models/spx/project'
 import MapViewer from './map-viewer/MapViewer.vue'
 import SpritesPanel from './SpritesPanel.vue'
 import MapBasicConfig from './MapBasicConfig.vue'
-import type { Sprite } from '@/models/sprite'
+import type { Sprite } from '@/models/spx/sprite'
 
 const props = defineProps<{
-  project: Project
+  project: SpxProject
   selectedSpriteId: string | null
 }>()
 
diff --git a/spx-gui/src/components/editor/map-editor/MapLayerSortInput.vue b/spx-gui/src/components/editor/map-editor/MapLayerSortInput.vue
index 2fd6310ca..124d6772a 100644
--- a/spx-gui/src/components/editor/map-editor/MapLayerSortInput.vue
+++ b/spx-gui/src/components/editor/map-editor/MapLayerSortInput.vue
@@ -1,15 +1,18 @@
 <script setup lang="ts">
-import type { Project } from '@/models/project'
-import { LayerSortMode } from '@/models/stage'
+import type { SpxProject } from '@/models/spx/project'
+import { LayerSortMode } from '@/models/spx/stage'
 
 import { UIRadioGroup, UIRadio, UITooltip } from '@/components/ui'
+import { useEditorCtx } from '../EditorContextProvider.vue'
 
 const props = defineProps<{
-  project: Project
+  project: SpxProject
 }>()
 
+const editorCtx = useEditorCtx()
+
 const handleLayerSortModeChange = (v: string | null) => {
-  props.project.history.doAction(
+  editorCtx.state.history.doAction(
     {
       name: {
         en: `Configure map layer sorting to ${v === LayerSortMode.Default ? 'default' : 'vertical'}`,
diff --git a/spx-gui/src/components/editor/map-editor/MapPhysicsInput.vue b/spx-gui/src/components/editor/map-editor/MapPhysicsInput.vue
index b9e175f84..4a7064c1d 100644
--- a/spx-gui/src/components/editor/map-editor/MapPhysicsInput.vue
+++ b/spx-gui/src/components/editor/map-editor/MapPhysicsInput.vue
@@ -1,20 +1,23 @@
 <script setup lang="ts">
-import type { Project } from '@/models/project'
-import type { Physics } from '@/models/stage'
+import type { SpxProject } from '@/models/spx/project'
+import type { Physics } from '@/models/spx/stage'
 
 import { UISwitch } from '@/components/ui'
+import { useEditorCtx } from '../EditorContextProvider.vue'
 
 const props = defineProps<{
-  project: Project
+  project: SpxProject
 }>()
 
+const editorCtx = useEditorCtx()
+
 function applyPhysicsProps(physics: Partial<Physics>) {
   const oldPhysics = props.project.stage.physics
   props.project.stage.setPhysics({ ...oldPhysics, ...physics })
 }
 
 const handlePhysicsEnabledChange = (v: boolean) => {
-  props.project.history.doAction(
+  editorCtx.state.history.doAction(
     { name: { en: `Configure map physics ${v ? 'enable' : 'disable'}`, zh: `修改地图物理特性${v ? '启用' : '禁用'}` } },
     () => applyPhysicsProps({ enabled: v })
   )
diff --git a/spx-gui/src/components/editor/map-editor/MapSizeInput.vue b/spx-gui/src/components/editor/map-editor/MapSizeInput.vue
index 8076e3cf7..c847a49fb 100644
--- a/spx-gui/src/components/editor/map-editor/MapSizeInput.vue
+++ b/spx-gui/src/components/editor/map-editor/MapSizeInput.vue
@@ -1,22 +1,27 @@
 <script setup lang="ts">
 import { debounce } from 'lodash'
 
-import type { Project } from '@/models/project'
+import type { SpxProject } from '@/models/spx/project'
 
 import { UINumberInput } from '@/components/ui'
-import { defaultMapSize } from '@/models/stage'
+import { defaultMapSize } from '@/models/spx/stage'
+import { useEditorCtx } from '../EditorContextProvider.vue'
 
 const props = defineProps<{
-  project: Project
+  project: SpxProject
 }>()
 
+const editorCtx = useEditorCtx()
+
 const handleWidthChange = debounce((v: number | null) => {
   const action = { name: { en: `Configure map width`, zh: `修改地图宽度` } }
-  props.project.history.doAction(action, () => props.project.stage.setMapWidth(v != null ? v : defaultMapSize.width))
+  editorCtx.state.history.doAction(action, () => props.project.stage.setMapWidth(v != null ? v : defaultMapSize.width))
 }, 300)
 const handleHeightChange = debounce((v: number | null) => {
   const action = { name: { en: `Configure map height`, zh: `修改地图高度` } }
-  props.project.history.doAction(action, () => props.project.stage.setMapHeight(v != null ? v : defaultMapSize.height))
+  editorCtx.state.history.doAction(action, () =>
+    props.project.stage.setMapHeight(v != null ? v : defaultMapSize.height)
+  )
 }, 300)
 </script>
 
diff --git a/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue b/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue
index 04488b030..56762a704 100644
--- a/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue
+++ b/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import type { Project } from '@/models/project'
-import { PhysicsMode, type Sprite } from '@/models/sprite'
+import type { SpxProject } from '@/models/spx/project'
+import { PhysicsMode, type Sprite } from '@/models/spx/sprite'
 import { useMessageHandle } from '@/utils/exception'
 
 import SpritePositionSize from '@/components/editor/common/config/sprite/SpritePositionSize.vue'
@@ -16,7 +16,7 @@ import AssetName from '@/components/asset/AssetName.vue'
 
 const props = defineProps<{
   sprite: Sprite
-  project: Project
+  project: SpxProject
 }>()
 
 const emit = defineEmits<{
diff --git a/spx-gui/src/components/editor/map-editor/SpritesPanel.vue b/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
index 48fccdf35..aa47cec23 100644
--- a/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
+++ b/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 
-import type { Project } from '@/models/project'
-import type { Sprite } from '@/models/sprite'
+import type { SpxProject } from '@/models/spx/project'
+import type { Sprite } from '@/models/spx/sprite'
 import { useMessageHandle } from '@/utils/exception'
 
 import { getCssVars, UICard, UIIcon, UIMenu, UIMenuItem, UITooltip, useUIVariables } from '@/components/ui'
@@ -14,7 +14,7 @@ import PanelFooter from '../panels/common/PanelFooter.vue'
 import SpriteBasicConfig from './SpriteBasicConfig.vue'
 
 const props = defineProps<{
-  project: Project
+  project: SpxProject
   selectedSprite: Sprite | null
 }>()
 
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 e8a83d28d..8b865b1ec 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
@@ -10,9 +10,9 @@ import { useContentSize } from '@/utils/dom'
 import { useFileUrl } from '@/utils/file'
 import { timeout, until, untilTaskScheduled } from '@/utils/utils'
 import { getCleanupSignal } from '@/utils/disposable'
-import type { Project } from '@/models/project'
-import type { Sprite } from '@/models/sprite'
-import { MapMode } from '@/models/stage'
+import type { SpxProject } from '@/models/spx/project'
+import type { Sprite } from '@/models/spx/sprite'
+import { MapMode } from '@/models/spx/stage'
 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'
@@ -24,9 +24,10 @@ import QuickConfigWrapper, {
 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'
+import { useEditorCtx } from '../../EditorContextProvider.vue'
 
 const props = defineProps<{
-  project: Project
+  project: SpxProject
   selectedSprite: Sprite | null
 }>()
 
@@ -34,6 +35,8 @@ const emit = defineEmits<{
   'update:selectedSprite': [sprite: Sprite | null]
 }>()
 
+const editorCtx = useEditorCtx()
+
 const container = ref<HTMLElement | null>(null)
 const containerSizeRef = useContentSize(container)
 // Konva canvas cannot have a width or height of zero
@@ -296,7 +299,7 @@ const visibleSpriteLocalConfigs = computed(() => {
   return zorder
     .map((id) => sprites.find((s) => s.id === id))
     .filter(Boolean)
-    .map((sprite) => new SpriteLocalConfig(sprite!, props.project)) as SpriteLocalConfig[]
+    .map((sprite) => new SpriteLocalConfig(sprite!, editorCtx.state.history)) as SpriteLocalConfig[]
 })
 
 let cameraEdgeScrollCheckTimer: ReturnType<typeof setInterval> | null = null
diff --git a/spx-gui/src/components/editor/navbar/EditorNavbar.vue b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
index b2d35fe0a..66223ae87 100644
--- a/spx-gui/src/components/editor/navbar/EditorNavbar.vue
+++ b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
@@ -163,13 +163,14 @@ import { useI18n, type LocaleMessage } from '@/utils/i18n'
 import { useNetwork } from '@/utils/network'
 import { selectFile } from '@/utils/file'
 import { convertScratchToXbp } from '@/apis/sb2xbp'
-import { type Project } from '@/models/project'
+import { type SpxProject } from '@/models/spx/project'
 import { getSignedInUsername, useUser } from '@/stores/user'
 import { Visibility } from '@/apis/common'
 import { getProjectPageRoute } from '@/router'
 import { showTutorialsEntry } from '@/utils/env'
 import { usePublishProject, useRemoveProject, useUnpublishProject } from '@/components/project'
 import { useLoadFromScratchModal } from '@/components/asset'
+import { useAppCtx } from '@/components/common/app-context'
 import NavbarWrapper from '@/components/navbar/NavbarWrapper.vue'
 import NavbarDropdown from '@/components/navbar/NavbarDropdown.vue'
 import NavbarNewProjectItem from '@/components/navbar/NavbarNewProjectItem.vue'
@@ -193,10 +194,12 @@ import defaultModeSvg from './icons/default-mode.svg?raw'
 import mapEditModeSvg from './icons/map-edit-mode.svg?raw'
 
 const props = defineProps<{
-  project: Project | null
+  project: SpxProject | null
   state: EditorState | null
 }>()
 
+const { xbpHelpers } = useAppCtx()
+
 const { isOnline } = useNetwork()
 const i18n = useI18n()
 const router = useRouter()
@@ -227,7 +230,9 @@ const importProjectFileMessage = { en: 'Import project file', zh: '导入项目
 
 const handleImportProjectFile = useMessageHandle(
   async () => {
-    if (props.project == null) throw new Error('No project to import into')
+    const { project, state } = props
+    if (project == null) throw new Error('No project to import into')
+    if (state == null) throw new Error('Editor state expected')
     await confirm({
       title: i18n.t(importProjectFileMessage),
       content: i18n.t({
@@ -239,7 +244,7 @@ const handleImportProjectFile = useMessageHandle(
     const file = await selectFile({ accept: ['xbp', 'gbp' /** For backward compatibility */] })
     const action = { name: importProjectFileMessage }
     await m.withLoading(
-      props.project.history.doAction(action, () => props.project!.loadXbpFile(file)),
+      state.history.doAction(action, () => xbpHelpers.load(project, file)),
       i18n.t({ en: 'Importing project file', zh: '导入项目文件中' })
     )
   },
@@ -254,7 +259,7 @@ const handleExportProjectFile = useMessageHandle(
     if (project == null) throw new Error('No project to export')
     // TODO: Consider moving `project.getSignal()` into `exportXbpFile` as built-in logic
     const xbpFile = await m.withLoading(
-      project.exportXbpFile(project.getSignal()),
+      xbpHelpers.save(project, project.getSignal()),
       i18n.t({ en: 'Exporting project file', zh: '导出项目文件中' })
     )
     saveAs(xbpFile, xbpFile.name) // TODO: what if user cancelled download?
@@ -279,8 +284,9 @@ const handleImportAssetsFromScratch = useMessageHandle(
 const importScratchMessage = { en: 'Import Scratch project file', zh: '导入 Scratch 项目文件' }
 const handleImportFromScratch = useMessageHandle(
   async () => {
-    const { project } = props
+    const { project, state } = props
     if (project == null) throw new Error('project is not available')
+    if (state == null) throw new Error('Editor state is not available')
     // select Scratch project file (.sb2 or .sb3)
     const file = await selectFile({ accept: ['sb3', 'sb2'] })
 
@@ -298,7 +304,7 @@ const handleImportFromScratch = useMessageHandle(
 
     const action = { name: importScratchMessage }
     await m.withLoading(
-      project.history.doAction(action, () => project!.loadXbpFile(xbpFile)),
+      state.history.doAction(action, () => xbpHelpers.load(project, xbpFile)),
       i18n.t({ en: 'Importing converted project file', zh: '导入已转换的项目文件' })
     )
   },
@@ -339,26 +345,26 @@ const handleRemoveProject = useMessageHandle(
   { en: 'Failed to remove project', zh: '删除项目失败' }
 ).fn
 
-const undoAction = computed(() => props.project?.history.getUndoAction() ?? null)
+const undoAction = computed(() => props.state?.history.getUndoAction())
 
 const undoText = computed(() => ({
   en: undoAction.value != null ? `Undo "${undoAction.value.name.en}"` : 'Undo',
   zh: undoAction.value != null ? `撤销“${undoAction.value.name.zh}”` : '撤销'
 }))
 
-const redoAction = computed(() => props.project?.history.getRedoAction() ?? null)
+const redoAction = computed(() => props.state?.history.getRedoAction())
 
 const redoText = computed(() => ({
   en: redoAction.value != null ? `Redo "${redoAction.value.name.en}"` : 'Redo',
   zh: redoAction.value != null ? `重做“${redoAction.value.name.zh}”` : '重做'
 }))
 
-const handleUndo = useMessageHandle(() => props.project!.history.undo(), {
+const handleUndo = useMessageHandle(() => props.state?.history.undo(), {
   en: 'Failed to undo',
   zh: '撤销操作失败'
 })
 
-const handleRedo = useMessageHandle(() => props.project!.history.redo(), {
+const handleRedo = useMessageHandle(() => props.state?.history.redo(), {
   en: 'Failed to redo',
   zh: '重做操作失败'
 })
diff --git a/spx-gui/src/components/editor/panels/sound/SoundSummaryItem.vue b/spx-gui/src/components/editor/panels/sound/SoundSummaryItem.vue
index 96707e460..bf7275b84 100644
--- a/spx-gui/src/components/editor/panels/sound/SoundSummaryItem.vue
+++ b/spx-gui/src/components/editor/panels/sound/SoundSummaryItem.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { Sound } from '@/models/sound'
+import { Sound } from '@/models/spx/sound'
 import { UIIcon } from '@/components/ui'
 import PanelSummaryItem from '../common/PanelSummaryItem.vue'
 
diff --git a/spx-gui/src/components/editor/panels/sound/SoundsPanel.vue b/spx-gui/src/components/editor/panels/sound/SoundsPanel.vue
index a3a19bd55..65a5894db 100644
--- a/spx-gui/src/components/editor/panels/sound/SoundsPanel.vue
+++ b/spx-gui/src/components/editor/panels/sound/SoundsPanel.vue
@@ -55,7 +55,7 @@ import { computed, ref } from 'vue'
 import { UIMenu, UIMenuItem, UIEmpty } from '@/components/ui'
 import { AssetType } from '@/apis/asset'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
-import { Sound } from '@/models/sound'
+import { Sound } from '@/models/spx/sound'
 import { useAddAssetFromLibrary, useAddSoundFromLocalFile, useAddSoundByRecording } from '@/components/asset'
 import { useMessageHandle } from '@/utils/exception'
 import SoundItem from '@/components/editor/sound/SoundItem.vue'
@@ -125,7 +125,7 @@ const handleRecord = useMessageHandle(
 const handleSorted = useMessageHandle(
   async (oldIdx: number, newIdx: number) => {
     const action = { name: { en: 'Update sound order', zh: '更新声音顺序' } }
-    await editorCtx.project.history.doAction(action, () => editorCtx.project.moveSound(oldIdx, newIdx))
+    await editorCtx.state.history.doAction(action, () => editorCtx.project.moveSound(oldIdx, newIdx))
   },
   {
     en: 'Failed to update sound order',
diff --git a/spx-gui/src/components/editor/panels/sprite/SpriteSummaryItem.vue b/spx-gui/src/components/editor/panels/sprite/SpriteSummaryItem.vue
index 48435f6ba..a1eb1b4b6 100644
--- a/spx-gui/src/components/editor/panels/sprite/SpriteSummaryItem.vue
+++ b/spx-gui/src/components/editor/panels/sprite/SpriteSummaryItem.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { UIImg } from '@/components/ui'
 import { useFileUrl } from '@/utils/file'
-import { Sprite } from '@/models/sprite'
+import { Sprite } from '@/models/spx/sprite'
 import PanelSummaryItem from '../common/PanelSummaryItem.vue'
 
 const props = defineProps<{
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 624a62e96..af78441f3 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
@@ -91,7 +91,7 @@ import { useFileUrl } from '@/utils/file'
 import { untilTaskScheduled, until, untilNotNull } from '@/utils/utils'
 import { getCleanupSignal } from '@/utils/disposable'
 import { fromBlob } from '@/models/common/file'
-import { MapMode } from '@/models/stage'
+import { MapMode } from '@/models/spx/stage'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import NodeTransformer from '@/components/editor/common/viewer/NodeTransformer.vue'
 import { getNodeId } from '@/components/editor/common/viewer/common'
@@ -248,7 +248,7 @@ watch(
 
     // Set camera follow sprite
     if (project.cameraFollowSprite !== selectedSprite) {
-      project.history.doAction({ name: { en: 'Set camera follow', zh: '设置相机跟随' } }, () =>
+      editorCtx.state.history.doAction({ name: { en: 'Set camera follow', zh: '设置相机跟随' } }, () =>
         project.setCameraFollowSprite(selectedSprite?.id ?? null)
       )
     }
@@ -351,7 +351,7 @@ const visibleSpriteLocalConfigs = computed(() => {
   return zorder
     .map((id) => sprites.find((s) => s.id === id))
     .filter(Boolean)
-    .map((sprite) => new SpriteLocalConfig(sprite!, editorCtx.project)) as SpriteLocalConfig[]
+    .map((sprite) => new SpriteLocalConfig(sprite!, editorCtx.state.history)) as SpriteLocalConfig[]
 })
 
 const visibleWidgetLocalConfigs = computed(() => {
@@ -359,7 +359,7 @@ const visibleWidgetLocalConfigs = computed(() => {
   return widgetsZorder
     .map((id) => widgets.find((w) => w.id === id))
     .filter(Boolean)
-    .map((widget) => new WidgetLocalConfig(widget!, editorCtx.project)) as WidgetLocalConfig[]
+    .map((widget) => new WidgetLocalConfig(widget!, editorCtx.state.history)) as WidgetLocalConfig[]
 })
 
 let cameraEdgeScrollCheckTimer: ReturnType<typeof setInterval> | null = null
diff --git a/spx-gui/src/components/editor/runtime.ts b/spx-gui/src/components/editor/runtime.ts
index dd3e8c00d..13061fb8e 100644
--- a/spx-gui/src/components/editor/runtime.ts
+++ b/spx-gui/src/components/editor/runtime.ts
@@ -1,7 +1,7 @@
 import { effectScope, reactive, watch } from 'vue'
 import Emitter from '@/utils/emitter'
 import { until } from '@/utils/utils'
-import type { Project } from '@/models/project'
+import type { SpxProject } from '@/models/spx/project'
 
 // TODO: move TextDocumentRange to some proper place
 import type { TextDocumentRange } from './code-editor/common'
@@ -61,7 +61,7 @@ export class Runtime extends Emitter<{
     this.outputs.splice(0, this.outputs.length)
   }
 
-  constructor(private project: Project) {
+  constructor(private project: SpxProject) {
     super()
 
     const reactiveThis = reactive(this) as this
@@ -76,7 +76,7 @@ export class Runtime extends Emitter<{
         () => reactiveThis.emit('didChangeOutput')
       )
       watch(
-        () => reactiveThis.project.exportGameFiles(),
+        () => reactiveThis.project.exportFiles(),
         async () => {
           await until(() => reactiveThis.running.mode !== 'debug')
           reactiveThis.clearOutputs()
diff --git a/spx-gui/src/components/editor/sound/SoundEditor.vue b/spx-gui/src/components/editor/sound/SoundEditor.vue
index 7b5b3e9ec..49c6ec375 100644
--- a/spx-gui/src/components/editor/sound/SoundEditor.vue
+++ b/spx-gui/src/components/editor/sound/SoundEditor.vue
@@ -71,7 +71,7 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { UIIcon, UITab, UITabs } from '@/components/ui'
-import type { Sound } from '@/models/sound'
+import type { Sound } from '@/models/spx/sound'
 import { useFileUrl } from '@/utils/file'
 import { stripExt } from '@/utils/path'
 import AssetName from '@/components/asset/AssetName.vue'
@@ -169,7 +169,7 @@ const handleSave = useMessageHandle(
     const newFile = fromBlob(newFileName, blob)
     const sname = props.sound.name
     const action = { name: { en: `Update sound ${sname}`, zh: `修改声音 ${sname}` } }
-    await editorCtx.project.history.doAction(action, () => props.sound.setFile(newFile))
+    await editorCtx.state.history.doAction(action, () => props.sound.setFile(newFile))
   },
   {
     en: 'Failed to save sound',
diff --git a/spx-gui/src/components/editor/sound/SoundItem.vue b/spx-gui/src/components/editor/sound/SoundItem.vue
index eb43f6474..f26938f8a 100644
--- a/spx-gui/src/components/editor/sound/SoundItem.vue
+++ b/spx-gui/src/components/editor/sound/SoundItem.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { useFileUrl } from '@/utils/file'
 import { useMessageHandle } from '@/utils/exception'
-import { Sound } from '@/models/sound'
+import { Sound } from '@/models/spx/sound'
 import { UIEditorSoundItem } from '@/components/ui'
 import CornerMenu from '../common/CornerMenu.vue'
 import { useEditorCtx } from '../EditorContextProvider.vue'
@@ -44,7 +44,7 @@ const { fn: handleDuplicate } = useMessageHandle(
   async () => {
     const sound = props.sound
     const action = { name: { en: `Duplicate sound ${sound.name}`, zh: `复制声音 ${sound.name}` } }
-    await editorCtx.project.history.doAction(action, () => {
+    await editorCtx.state.history.doAction(action, () => {
       const newSound = sound.clone()
       editorCtx.project.addSoundAfter(newSound, sound.id)
       editorCtx.state.selectSound(newSound.id)
@@ -60,7 +60,7 @@ const handleRemove = useMessageHandle(
   async () => {
     const name = props.sound.name
     const action = { name: { en: `Remove sound ${name}`, zh: `删除声音 ${name}` } }
-    await editorCtx.project.history.doAction(action, () => editorCtx.project.removeSound(props.sound.id))
+    await editorCtx.state.history.doAction(action, () => editorCtx.project.removeSound(props.sound.id))
   },
   {
     en: 'Failed to remove sound',
diff --git a/spx-gui/src/components/editor/sound/SoundRecorder.vue b/spx-gui/src/components/editor/sound/SoundRecorder.vue
index c138f7c07..e4d2690c5 100644
--- a/spx-gui/src/components/editor/sound/SoundRecorder.vue
+++ b/spx-gui/src/components/editor/sound/SoundRecorder.vue
@@ -103,14 +103,15 @@
 import { ref } from 'vue'
 import dayjs from 'dayjs'
 import { fromBlob } from '@/models/common/file'
-import { Sound } from '@/models/sound'
-import type { Project } from '@/models/project'
+import { Sound } from '@/models/spx/sound'
+import type { SpxProject } from '@/models/spx/project'
 import { UIButton, UIIcon } from '@/components/ui'
+import { useEditorCtx } from '../EditorContextProvider.vue'
 import VolumeSlider from './VolumeSlider.vue'
 import { WaveformRecorder } from './waveform'
 
 const props = defineProps<{
-  project: Project
+  project: SpxProject
 }>()
 
 const emit = defineEmits<{
@@ -118,6 +119,8 @@ const emit = defineEmits<{
   recordStarted: []
 }>()
 
+const editorCtx = useEditorCtx()
+
 const recordingState = ref<'yetStarted' | 'recording' | 'recorded'>('yetStarted')
 
 const waveformRecorderRef = ref<InstanceType<typeof WaveformRecorder> | null>(null)
@@ -146,7 +149,7 @@ const saveRecording = async () => {
   const file = fromBlob(`Recording_${dayjs().format('YYYY-MM-DD_HH:mm:ss')}.wav`, wav)
   const sound = await Sound.create('recording', file)
   const action = { name: { en: 'Add recording', zh: '添加录音' } }
-  await props.project.history.doAction(action, () => props.project.addSound(sound))
+  await editorCtx.state.history.doAction(action, () => props.project.addSound(sound))
   emit('saved', sound)
 }
 
diff --git a/spx-gui/src/components/editor/sound/SoundRecorderModal.vue b/spx-gui/src/components/editor/sound/SoundRecorderModal.vue
index d3fe37b83..7febc0b61 100644
--- a/spx-gui/src/components/editor/sound/SoundRecorderModal.vue
+++ b/spx-gui/src/components/editor/sound/SoundRecorderModal.vue
@@ -13,8 +13,8 @@
 import { ref } from 'vue'
 import { useI18n } from '@/utils/i18n'
 import { useMessageHandle } from '@/utils/exception'
-import type { Sound } from '@/models/sound'
-import type { Project } from '@/models/project'
+import type { Sound } from '@/models/spx/sound'
+import type { SpxProject } from '@/models/spx/project'
 import { UIFormModal, useConfirmDialog } from '@/components/ui'
 import SoundRecorder from './SoundRecorder.vue'
 
@@ -22,7 +22,7 @@ const recordStarted = ref(false)
 
 defineProps<{
   visible: boolean
-  project: Project
+  project: SpxProject
 }>()
 
 const emit = defineEmits<{
diff --git a/spx-gui/src/components/editor/sprite/AnimationDetail.vue b/spx-gui/src/components/editor/sprite/AnimationDetail.vue
index b81c97ed1..ce9809e83 100644
--- a/spx-gui/src/components/editor/sprite/AnimationDetail.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationDetail.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { Animation } from '@/models/animation'
+import type { Animation } from '@/models/spx/animation'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import EditorItemDetail from '../common/EditorItemDetail.vue'
 import AnimationPlayer from './animation/AnimationPlayer.vue'
diff --git a/spx-gui/src/components/editor/sprite/AnimationEditor.vue b/spx-gui/src/components/editor/sprite/AnimationEditor.vue
index 1b33799a3..f63adebfd 100644
--- a/spx-gui/src/components/editor/sprite/AnimationEditor.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationEditor.vue
@@ -107,7 +107,7 @@ export class AnimationsEditorState extends Disposable {
 import { ref, type Ref, watch } from 'vue'
 import { Disposable } from '@/utils/disposable'
 import { shiftPath, type PathSegments } from '@/utils/route'
-import type { Sprite } from '@/models/sprite'
+import type { Sprite } from '@/models/spx/sprite'
 import EditorList from '../common/EditorList.vue'
 import { UIMenu, UIMenuItem, UIEmpty, UIButton } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
@@ -140,7 +140,7 @@ const handleGroupCostumes = useMessageHandle(
 const handleSorted = useMessageHandle(
   async (oldIdx: number, newIdx: number) => {
     const action = { name: { en: 'Update animation order', zh: '更新动画顺序' } }
-    await editorCtx.project.history.doAction(action, () => props.sprite.moveAnimation(oldIdx, newIdx))
+    await editorCtx.state.history.doAction(action, () => props.sprite.moveAnimation(oldIdx, newIdx))
   },
   {
     en: 'Failed to update animation order',
diff --git a/spx-gui/src/components/editor/sprite/AnimationItem.vue b/spx-gui/src/components/editor/sprite/AnimationItem.vue
index 1907f476e..9f643e724 100644
--- a/spx-gui/src/components/editor/sprite/AnimationItem.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationItem.vue
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue'
 import { UIImg, UIEditorSpriteItem, useModal } from '@/components/ui'
 import { useFileUrl } from '@/utils/file'
 import { useHovered } from '@/utils/dom'
-import type { Animation } from '@/models/animation'
+import type { Animation } from '@/models/spx/animation'
 import { useMessageHandle } from '@/utils/exception'
 import CostumesAutoPlayer from '@/components/common/CostumesAutoPlayer.vue'
 import { useEditorCtx } from '../EditorContextProvider.vue'
@@ -48,7 +48,7 @@ const { fn: handleDuplicate } = useMessageHandle(
       throw new Error('Unable to duplicate animation because it has not been added to the sprite yet.')
     }
     const action = { name: { en: `Duplicate animation ${animation.name}`, zh: `复制动画 ${animation.name}` } }
-    await editorCtx.project.history.doAction(action, () => {
+    await editorCtx.state.history.doAction(action, () => {
       const newAnimation = animation.clone()
       sprite.addAnimationAfter(newAnimation, animation.id)
       editorCtx.state.selectAnimation(sprite.id, newAnimation.id)
diff --git a/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue b/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue
index 086eb23e1..0094060c8 100644
--- a/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue
@@ -44,27 +44,30 @@
 </template>
 <script setup lang="ts">
 import { UIButton, UICheckbox, UIFormModal } from '@/components/ui'
-import type { Animation } from '@/models/animation'
-import type { Project } from '@/models/project'
+import type { Animation } from '@/models/spx/animation'
+import type { SpxProject } from '@/models/spx/project'
+import { useEditorCtx } from '../EditorContextProvider.vue'
 
 import { ref } from 'vue'
 
 const props = defineProps<{
   visible: boolean
   animation: Animation
-  project: Project
+  project: SpxProject
 }>()
 const emit = defineEmits<{
   cancelled: []
   resolved: []
 }>()
 
+const editorCtx = useEditorCtx()
+
 const preserveCostumes = ref(false)
 
 const handleConfirm = async () => {
   const sprite = props.animation.sprite
   if (sprite == null) throw new Error('sprite not found')
-  await props.project.history.doAction(
+  await editorCtx.state.history.doAction(
     {
       name: {
         en: `Remove animation ${props.animation.name}`,
diff --git a/spx-gui/src/components/editor/sprite/CheckableCostumeItem.vue b/spx-gui/src/components/editor/sprite/CheckableCostumeItem.vue
index b424e65ca..075635fd5 100644
--- a/spx-gui/src/components/editor/sprite/CheckableCostumeItem.vue
+++ b/spx-gui/src/components/editor/sprite/CheckableCostumeItem.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import { useFileUrl } from '@/utils/file'
-import type { Costume } from '@/models/costume'
+import type { Costume } from '@/models/spx/costume'
 import { UIImg, UICornerIcon, UIEditorSpriteItem } from '@/components/ui'
 
 const props = defineProps<{
diff --git a/spx-gui/src/components/editor/sprite/CostumeDetail.vue b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
index 5cffab365..676293b9b 100644
--- a/spx-gui/src/components/editor/sprite/CostumeDetail.vue
+++ b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
@@ -10,7 +10,7 @@
 <script setup lang="ts">
 import { UIImg } from '@/components/ui'
 import { useFileUrl } from '@/utils/file'
-import type { Costume } from '@/models/costume'
+import type { Costume } from '@/models/spx/costume'
 import EditorItemDetail from '../common/EditorItemDetail.vue'
 import CheckerboardBackground from './CheckerboardBackground.vue'
 
diff --git a/spx-gui/src/components/editor/sprite/CostumeItem.vue b/spx-gui/src/components/editor/sprite/CostumeItem.vue
index 4c5191639..c4c212c55 100644
--- a/spx-gui/src/components/editor/sprite/CostumeItem.vue
+++ b/spx-gui/src/components/editor/sprite/CostumeItem.vue
@@ -2,10 +2,10 @@
 import { computed } from 'vue'
 import { UIImg, UIEditorSpriteItem } from '@/components/ui'
 import { useFileUrl } from '@/utils/file'
-import type { Costume } from '@/models/costume'
+import type { Costume } from '@/models/spx/costume'
 import { useEditorCtx } from '../EditorContextProvider.vue'
 import { useMessageHandle } from '@/utils/exception'
-import { Sprite } from '@/models/sprite'
+import { Sprite } from '@/models/spx/sprite'
 import CornerMenu from '../common/CornerMenu.vue'
 import { useRenameCostume } from '@/components/asset'
 import { RenameMenuItem, RemoveMenuItem, DuplicateMenuItem } from '@/components/editor/common/'
@@ -53,7 +53,7 @@ const { fn: handleDuplicate } = useMessageHandle(
       throw new Error('Only costumes whose parent is Sprite can be duplicated')
     }
     const action = { name: { en: `Duplicate costume ${costume.name}`, zh: `复制造型 ${costume.name}` } }
-    await editorCtx.project.history.doAction(action, async () => {
+    await editorCtx.state.history.doAction(action, async () => {
       const newCostume = costume.clone()
       parent.addCostumeAfter(newCostume, costume.id)
       editorCtx.state.selectCostume(parent.id, newCostume.id)
@@ -69,7 +69,7 @@ const handleRemove = useMessageHandle(
   async () => {
     const name = props.costume.name
     const action = { name: { en: `Remove costume ${name}`, zh: `删除造型 ${name}` } }
-    await editorCtx.project.history.doAction(action, () => {
+    await editorCtx.state.history.doAction(action, () => {
       if (parent.value instanceof Sprite) {
         parent.value.removeCostume(props.costume.id)
         return
diff --git a/spx-gui/src/components/editor/sprite/CostumesEditor.vue b/spx-gui/src/components/editor/sprite/CostumesEditor.vue
index ae44058a6..979902ad2 100644
--- a/spx-gui/src/components/editor/sprite/CostumesEditor.vue
+++ b/spx-gui/src/components/editor/sprite/CostumesEditor.vue
@@ -70,8 +70,8 @@ export class CostumesEditorState {
 import { UIMenu, UIMenuItem } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
 import { shiftPath, type PathSegments } from '@/utils/route'
-import type { Sprite } from '@/models/sprite'
-import { Costume } from '@/models/costume'
+import type { Sprite } from '@/models/spx/sprite'
+import { Costume } from '@/models/spx/costume'
 import { useAddCostumeFromLocalFile, useRenameCostume } from '@/components/asset'
 import EditorList from '../common/EditorList.vue'
 import CostumeItem from './CostumeItem.vue'
@@ -87,11 +87,11 @@ const editorCtx = useEditorCtx()
 
 function handleSelect(costume: Costume) {
   const action = { name: { en: 'Set default costume', zh: '设置默认造型' } }
-  editorCtx.project.history.doAction(action, () => props.sprite.setDefaultCostume(costume.id))
+  editorCtx.state.history.doAction(action, () => props.sprite.setDefaultCostume(costume.id))
 }
 
 const addFromLocalFile = useAddCostumeFromLocalFile()
-const handleAddFromLocalFile = useMessageHandle(() => addFromLocalFile(props.sprite, editorCtx.project), {
+const handleAddFromLocalFile = useMessageHandle(() => addFromLocalFile(props.sprite), {
   en: 'Failed to add from local file',
   zh: '从本地文件添加失败'
 }).fn
@@ -99,7 +99,7 @@ const handleAddFromLocalFile = useMessageHandle(() => addFromLocalFile(props.spr
 const handleSorted = useMessageHandle(
   async (oldIdx: number, newIdx: number) => {
     const action = { name: { en: 'Update costume order', zh: '更新造型顺序' } }
-    await editorCtx.project.history.doAction(action, () => props.sprite.moveCostume(oldIdx, newIdx))
+    await editorCtx.state.history.doAction(action, () => props.sprite.moveCostume(oldIdx, newIdx))
   },
   {
     en: 'Failed to update costume order',
diff --git a/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue b/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue
index 9e027a087..3f6a74cce 100644
--- a/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue
@@ -14,16 +14,17 @@ import { useFileImg } from '@/utils/file'
 import { useContentSize } from '@/utils/dom'
 import { getContentBoundingRect } from '@/utils/img'
 import { toNativeFile } from '@/models/common/file'
-import { CollisionShapeType, type Sprite } from '@/models/sprite'
-import type { Pivot as CostumePivot } from '@/models/costume'
+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 CheckerboardBackground from './CheckerboardBackground.vue'
 import { UIButton } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
-import type { Project } from '@/models/project'
+import type { SpxProject } from '@/models/spx/project'
+import { useEditorCtx } from '../EditorContextProvider.vue'
 
 const props = defineProps<{
-  project: Project
+  project: SpxProject
   sprite: Sprite
 }>()
 
@@ -31,6 +32,8 @@ const emits = defineEmits<{
   updateSuccess: []
 }>()
 
+const editorCtx = useEditorCtx()
+
 const i18n = useI18n()
 const wrapper = ref<HTMLDivElement | null>(null)
 const wrapperSize = useContentSize(wrapper)
@@ -262,7 +265,7 @@ const { fn: handleConfirm } = useMessageHandle(
     const defaultCostume = props.sprite.defaultCostume
     if (defaultCostume == null) throw new Error('Sprite has no default costume')
 
-    await props.project.history.doAction({ name: { en: 'Update sprite collision', zh: '更新精灵碰撞' } }, () => {
+    await editorCtx.state.history.doAction({ name: { en: 'Update sprite collision', zh: '更新精灵碰撞' } }, () => {
       sprite.applyCostumesPivotChange({
         x: pivotPos.value.x - defaultCostume.pivot.x,
         y: pivotPos.value.y - defaultCostume.pivot.y
diff --git a/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue b/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue
index f763e99ec..573b31ce4 100644
--- a/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { Sprite } from '@/models/sprite'
+import type { Sprite } from '@/models/spx/sprite'
 
 import { UIFormModal } from '@/components/ui'
 
 import SpriteCollisionEditor from './SpriteCollisionEditor.vue'
-import type { Project } from '@/models/project'
+import type { SpxProject } from '@/models/spx/project'
 
 defineProps<{
   sprite: Sprite
-  project: Project
+  project: SpxProject
   visible: boolean
 }>()
 
diff --git a/spx-gui/src/components/editor/sprite/SpriteEditor.vue b/spx-gui/src/components/editor/sprite/SpriteEditor.vue
index 14c180d71..f6940fada 100644
--- a/spx-gui/src/components/editor/sprite/SpriteEditor.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteEditor.vue
@@ -145,9 +145,9 @@ export class SpriteEditorState extends Disposable {
 import { ref, type Ref } from 'vue'
 import { Disposable } from '@/utils/disposable'
 import { shiftPath, type PathSegments } from '@/utils/route'
-import type { Costume } from '@/models/costume'
-import type { Animation } from '@/models/animation'
-import { type Sprite } from '@/models/sprite'
+import type { Costume } from '@/models/spx/costume'
+import type { Animation } from '@/models/spx/animation'
+import { type Sprite } from '@/models/spx/sprite'
 import { UITabs, UITab } from '@/components/ui'
 import CodeEditorUI from '../code-editor/ui/CodeEditorUI.vue'
 import FormatButton from '../code-editor/FormatButton.vue'
diff --git a/spx-gui/src/components/editor/sprite/SpriteItem.vue b/spx-gui/src/components/editor/sprite/SpriteItem.vue
index 5fd20096c..4e6e9ddaa 100644
--- a/spx-gui/src/components/editor/sprite/SpriteItem.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteItem.vue
@@ -4,9 +4,9 @@ import { useHovered } from '@/utils/dom'
 import { useFileUrl } from '@/utils/file'
 import { useMessageHandle } from '@/utils/exception'
 import { useDragDroppable } from '@/utils/drag-and-drop'
-import { Sprite } from '@/models/sprite'
-import { Costume } from '@/models/costume'
-import { Animation } from '@/models/animation'
+import { Sprite } from '@/models/spx/sprite'
+import { Costume } from '@/models/spx/costume'
+import { Animation } from '@/models/spx/animation'
 import { UIImg, UIEditorSpriteItem, UIMenuItem } from '@/components/ui'
 import CostumesAutoPlayer from '@/components/common/CostumesAutoPlayer.vue'
 import { useEditorCtx } from '../EditorContextProvider.vue'
@@ -60,14 +60,14 @@ function toggleSpriteVisible() {
       zh: `${props.sprite.visible ? '隐藏' : '显示'}精灵 ${name}`
     }
   }
-  editorCtx.project.history.doAction(action, () => props.sprite.setVisible(!props.sprite.visible))
+  editorCtx.state.history.doAction(action, () => props.sprite.setVisible(!props.sprite.visible))
 }
 
 const { fn: handleDuplicate } = useMessageHandle(
   async () => {
     const sprite = props.sprite
     const action = { name: { en: `Duplicate sprite ${sprite.name}`, zh: `复制精灵 ${sprite.name}` } }
-    await editorCtx.project.history.doAction(action, () => {
+    await editorCtx.state.history.doAction(action, () => {
       const newSprite = sprite.clone()
       // Offset the new sprite a bit to avoid being exactly overlapped with the original one
       newSprite.setX(newSprite.x + 10)
@@ -87,7 +87,7 @@ const handleRemove = useMessageHandle(
     const spriteId = props.sprite.id
     const spriteName = props.sprite.name
     const action = { name: { en: `Remove sprite ${spriteName}`, zh: `删除精灵 ${spriteName}` } }
-    await editorCtx.project.history.doAction(action, () => editorCtx.project.removeSprite(spriteId))
+    await editorCtx.state.history.doAction(action, () => editorCtx.project.removeSprite(spriteId))
   },
   {
     en: 'Failed to remove sprite',
@@ -98,7 +98,7 @@ const handleRemove = useMessageHandle(
 const duplicateCostume = useMessageHandle(
   async (costume: Costume) => {
     const action = { name: { en: `Duplicate costume`, zh: `复制造型` } }
-    await editorCtx.project.history.doAction(action, async () => {
+    await editorCtx.state.history.doAction(action, async () => {
       const newCostume = costume.clone()
       props.sprite.addCostume(newCostume)
       props.sprite.setDefaultCostume(newCostume.id)
@@ -119,7 +119,7 @@ const { fn: handleRename } = useMessageHandle(() => renameSprite(props.sprite),
 const duplicateAnimation = useMessageHandle(
   async (animation: Animation) => {
     const action = { name: { en: `Duplicate animation`, zh: `复制动画` } }
-    await editorCtx.project.history.doAction(action, async () => {
+    await editorCtx.state.history.doAction(action, async () => {
       const newAnimation = animation.clone()
       props.sprite.addAnimation(newAnimation)
       if (animation.sprite != null) {
diff --git a/spx-gui/src/components/editor/sprite/SpriteList.vue b/spx-gui/src/components/editor/sprite/SpriteList.vue
index 1f9ba68a6..74dc2ef95 100644
--- a/spx-gui/src/components/editor/sprite/SpriteList.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type ComponentPublicInstance, computed, onBeforeUnmount, shallowReactive } from 'vue'
-import { Sprite } from '@/models/sprite'
-import { SpriteGen } from '@/models/gen/sprite-gen'
+import { Sprite } from '@/models/spx/sprite'
+import { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import { useMessageHandle } from '@/utils/exception'
 import { untilNotNull } from '@/utils/utils'
 import type { DragSortableOptions } from '@/utils/drag-and-drop'
@@ -65,7 +65,7 @@ const handleSorted = useMessageHandle(
   // sprites are always before spriteGens, so the index is correct theoretically
   async (oldIdx: number, newIdx: number) => {
     const action = { name: { en: 'Update sprite order', zh: '更新精灵顺序' } }
-    await editorCtx.project.history.doAction(action, () => editorCtx.project.moveSprite(oldIdx, newIdx))
+    await editorCtx.state.history.doAction(action, () => editorCtx.project.moveSprite(oldIdx, newIdx))
   },
   {
     en: 'Failed to update sprite order',
@@ -83,7 +83,7 @@ const handleSpriteGenClick = useMessageHandle(
     gen.dispose()
     editorCtx.state.removeSpriteGen(gen.id)
 
-    await editorCtx.project.history.doAction({ name: { en: 'Add sprite', zh: '添加精灵' } }, async () => {
+    await editorCtx.state.history.doAction({ name: { en: 'Add sprite', zh: '添加精灵' } }, async () => {
       editorCtx.project.addSprite(result)
       await result.autoFit()
     })
diff --git a/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue b/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue
index 8d992a59b..af5e33671 100644
--- a/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue
+++ b/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue
@@ -11,8 +11,8 @@ import { onUnmounted, ref, watchEffect } from 'vue'
 import { registerPlayer as registerAudioPlayer } from '@/utils/player-registry'
 import { useActivated } from '@/utils/utils'
 import { Cancelled, capture } from '@/utils/exception'
-import type { Costume } from '@/models/costume'
-import type { Sound } from '@/models/sound'
+import type { Costume } from '@/models/spx/costume'
+import type { Sound } from '@/models/spx/sound'
 import { UILoading } from '@/components/ui'
 import CostumesPlayer from '@/components/common/CostumesPlayer.vue'
 import CheckerboardBackground from '../CheckerboardBackground.vue'
diff --git a/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue b/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
index 08dbf3e3e..1f6e49189 100644
--- a/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
+++ b/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
@@ -52,7 +52,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { formatDuration } from '@/utils/audio'
-import type { Animation } from '@/models/animation'
+import type { Animation } from '@/models/spx/animation'
 import { UIDropdown, UIIcon, isInPopup } from '@/components/ui'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import DurationEditor from './DurationEditor.vue'
diff --git a/spx-gui/src/components/editor/sprite/animation/DurationEditor.vue b/spx-gui/src/components/editor/sprite/animation/DurationEditor.vue
index d032a5d40..f8d2f399a 100644
--- a/spx-gui/src/components/editor/sprite/animation/DurationEditor.vue
+++ b/spx-gui/src/components/editor/sprite/animation/DurationEditor.vue
@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import type { Animation } from '@/models/animation'
+import type { Animation } from '@/models/spx/animation'
 import { UIDropdownModal, UINumberInput } from '@/components/ui'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 
@@ -32,7 +32,7 @@ const actionName = { en: 'Adjust animation duration', zh: '调整动画时长' }
 const duration = ref(props.animation.duration)
 
 async function handleConfirm() {
-  await editorCtx.project.history.doAction({ name: actionName }, () => {
+  await editorCtx.state.history.doAction({ name: actionName }, () => {
     props.animation.setDuration(duration.value)
   })
   emit('close')
diff --git a/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue b/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue
index 842c260ff..b5d90b751 100644
--- a/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue
+++ b/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue
@@ -43,7 +43,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import type { Animation } from '@/models/animation'
+import type { Animation } from '@/models/spx/animation'
 import { UIDropdownModal, UIDropdown, UIMenu, UIMenuItem, UIBlockItem, UIIcon } from '@/components/ui'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import SoundItem from '@/components/editor/sound/SoundItem.vue'
@@ -98,7 +98,7 @@ const handleRecord = useMessageHandle(
 ).fn
 
 async function handleConfirm() {
-  await editorCtx.project.history.doAction({ name: actionName }, () => props.animation.setSound(selected.value))
+  await editorCtx.state.history.doAction({ name: actionName }, () => props.animation.setSound(selected.value))
   emit('close')
 }
 </script>
diff --git a/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue b/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
index 3a513213d..3b4ef8d0c 100644
--- a/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
+++ b/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
@@ -45,8 +45,8 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import type { Animation } from '@/models/animation'
-import { State } from '@/models/sprite'
+import type { Animation } from '@/models/spx/animation'
+import { State } from '@/models/spx/sprite'
 import { UIDropdownModal, UICornerIcon, UIBlockItem } from '@/components/ui'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import iconStateDefault from './default.svg?raw'
@@ -76,7 +76,7 @@ function handleStateItemClick(state: State) {
 }
 
 async function handleConfirm() {
-  await editorCtx.project.history.doAction({ name: actionName }, () => {
+  await editorCtx.state.history.doAction({ name: actionName }, () => {
     const sprite = props.animation.sprite
     if (sprite == null) throw new Error('Animation has no associated sprite')
     sprite.setAnimationBoundStates(props.animation.id, boundStates.value)
diff --git a/spx-gui/src/components/editor/stage/StageEditor.vue b/spx-gui/src/components/editor/stage/StageEditor.vue
index 1812aff20..11388087b 100644
--- a/spx-gui/src/components/editor/stage/StageEditor.vue
+++ b/spx-gui/src/components/editor/stage/StageEditor.vue
@@ -156,9 +156,9 @@ export class StageEditorState extends Disposable {
 import { ref, watch } from 'vue'
 import { Disposable } from '@/utils/disposable'
 import { shiftPath, type PathSegments } from '@/utils/route'
-import type { Widget } from '@/models/widget'
-import type { Backdrop } from '@/models/backdrop'
-import type { Stage } from '@/models/stage'
+import type { Widget } from '@/models/spx/widget'
+import type { Backdrop } from '@/models/spx/backdrop'
+import type { Stage } from '@/models/spx/stage'
 import { UITabs, UITab } from '@/components/ui'
 import CodeEditorUI from '../code-editor/ui/CodeEditorUI.vue'
 import FormatButton from '../code-editor/FormatButton.vue'
diff --git a/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue b/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue
index 1d832e1c2..3ad73f5bb 100644
--- a/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue
+++ b/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue
@@ -11,7 +11,7 @@
 import { UILoading } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
 import { useFileUrl } from '@/utils/file'
-import type { Backdrop } from '@/models/backdrop'
+import type { Backdrop } from '@/models/spx/backdrop'
 import { useRenameBackdrop } from '@/components/asset'
 import EditorItemDetail from '../../common/EditorItemDetail.vue'
 
diff --git a/spx-gui/src/components/editor/stage/backdrop/BackdropItem.vue b/spx-gui/src/components/editor/stage/backdrop/BackdropItem.vue
index 92640f9b6..4bf9b52be 100644
--- a/spx-gui/src/components/editor/stage/backdrop/BackdropItem.vue
+++ b/spx-gui/src/components/editor/stage/backdrop/BackdropItem.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { UIEditorBackdropItem } from '@/components/ui'
 import { useFileUrl } from '@/utils/file'
-import type { Backdrop } from '@/models/backdrop'
+import type { Backdrop } from '@/models/spx/backdrop'
 import { useEditorCtx } from '../../EditorContextProvider.vue'
 import CornerMenu from '../../common/CornerMenu.vue'
 import { useMessageHandle } from '@/utils/exception'
@@ -49,7 +49,7 @@ const { fn: handleDuplicate } = useMessageHandle(
   async () => {
     const backdrop = props.backdrop
     const action = { name: { en: `duplicate backdrop ${backdrop.name}`, zh: `复制背景 ${backdrop.name}` } }
-    await editorCtx.project.history.doAction(action, () => {
+    await editorCtx.state.history.doAction(action, () => {
       const stage = stageRef.value
       const newBackdrop = backdrop.clone()
       stage.addBackdropAfter(newBackdrop, backdrop.id)
@@ -66,7 +66,7 @@ const handleRemove = useMessageHandle(
   async () => {
     const name = props.backdrop.name
     const action = { name: { en: `Remove backdrop ${name}`, zh: `删除背景 ${name}` } }
-    await editorCtx.project.history.doAction(action, () => stageRef.value.removeBackdrop(props.backdrop.id))
+    await editorCtx.state.history.doAction(action, () => stageRef.value.removeBackdrop(props.backdrop.id))
   },
   {
     en: 'Failed to remove backdrop',
diff --git a/spx-gui/src/components/editor/stage/backdrop/BackdropModeSelector.vue b/spx-gui/src/components/editor/stage/backdrop/BackdropModeSelector.vue
index 5faa16467..cb35696e5 100644
--- a/spx-gui/src/components/editor/stage/backdrop/BackdropModeSelector.vue
+++ b/spx-gui/src/components/editor/stage/backdrop/BackdropModeSelector.vue
@@ -40,10 +40,10 @@
 <script setup lang="ts">
 import { UITooltip, UIButtonGroup, UIButtonGroupItem, UIIcon } from '@/components/ui'
 import { useEditorCtx } from '../../EditorContextProvider.vue'
-import type { MapMode } from '@/models/stage'
+import type { MapMode } from '@/models/spx/stage'
 
 const handleUpdateMapMode = (mode: MapMode) => {
-  editorCtx.project.history.doAction({ name: { en: 'Update backdrop mode', zh: '修改背景模式' } }, () => {
+  editorCtx.state.history.doAction({ name: { en: 'Update backdrop mode', zh: '修改背景模式' } }, () => {
     editorCtx.project.stage.setMapMode(mode)
   })
 }
diff --git a/spx-gui/src/components/editor/stage/backdrop/BackdropsEditor.vue b/spx-gui/src/components/editor/stage/backdrop/BackdropsEditor.vue
index ce2b19889..a26dc1f00 100644
--- a/spx-gui/src/components/editor/stage/backdrop/BackdropsEditor.vue
+++ b/spx-gui/src/components/editor/stage/backdrop/BackdropsEditor.vue
@@ -71,8 +71,8 @@ import { computed } from 'vue'
 import { UIMenu, UIMenuItem } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
 import { shiftPath, type PathSegments } from '@/utils/route'
-import type { Stage } from '@/models/stage'
-import { Backdrop } from '@/models/backdrop'
+import type { Stage } from '@/models/spx/stage'
+import { Backdrop } from '@/models/spx/backdrop'
 import { useAddAssetFromLibrary, useAddBackdropFromLocalFile } from '@/components/asset'
 import { AssetType } from '@/apis/asset'
 import { useEditorCtx } from '../../EditorContextProvider.vue'
@@ -89,7 +89,7 @@ const stage = computed(() => editorCtx.project.stage)
 
 function handleSelect(backdrop: Backdrop) {
   const action = { name: { en: 'Set default backdrop', zh: '设置默认背景' } }
-  editorCtx.project.history.doAction(action, () => stage.value.setDefaultBackdrop(backdrop.id))
+  editorCtx.state.history.doAction(action, () => stage.value.setDefaultBackdrop(backdrop.id))
 }
 
 const addBackdropFromLocalFile = useAddBackdropFromLocalFile()
@@ -121,7 +121,7 @@ const handleAddFromAssetLibrary = useMessageHandle(
 const handleSorted = useMessageHandle(
   async (oldIdx: number, newIdx: number) => {
     const action = { name: { en: 'Update backdrop order', zh: '更新背景顺序' } }
-    await editorCtx.project.history.doAction(action, () => stage.value.moveBackdrop(oldIdx, newIdx))
+    await editorCtx.state.history.doAction(action, () => stage.value.moveBackdrop(oldIdx, newIdx))
   },
   {
     en: 'Failed to update backdrop order',
diff --git a/spx-gui/src/components/editor/stage/widget/WidgetItem.vue b/spx-gui/src/components/editor/stage/widget/WidgetItem.vue
index 739c50eff..19859ca95 100644
--- a/spx-gui/src/components/editor/stage/widget/WidgetItem.vue
+++ b/spx-gui/src/components/editor/stage/widget/WidgetItem.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { UIEditorWidgetItem, UIMenuItem } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
-import type { Widget } from '@/models/widget'
+import type { Widget } from '@/models/spx/widget'
 import { useEditorCtx } from '../../EditorContextProvider.vue'
 import { getIcon } from './icon'
 import CornerMenu from '../../common/CornerMenu.vue'
@@ -34,7 +34,7 @@ const radarNodeMeta = computed(() => {
 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))
+  editorCtx.state.history.doAction(action, () => props.widget.setVisible(!props.widget.visible))
 }
 
 const { fn: handleDuplicate } = useMessageHandle(
@@ -44,7 +44,7 @@ const { fn: handleDuplicate } = useMessageHandle(
     if (stage == null) throw new Error('stage expected')
 
     const action = { name: { en: `Duplicate widget ${widget.name}`, zh: `复制控件 ${widget.name}` } }
-    await editorCtx.project.history.doAction(action, () => {
+    await editorCtx.state.history.doAction(action, () => {
       const newWidget = widget.clone()
       stage.addWidgetAfter(newWidget, widget.id)
       editorCtx.state.selectWidget(newWidget.id)
@@ -61,7 +61,7 @@ const handleRemove = useMessageHandle(
     const { stage, name } = props.widget
     if (stage == null) throw new Error('stage expected')
     const action = { name: { en: `Remove widget ${name}`, zh: `删除控件 ${name}` } }
-    await editorCtx.project.history.doAction(action, () => stage.removeWidget(props.widget.id))
+    await editorCtx.state.history.doAction(action, () => stage.removeWidget(props.widget.id))
   },
   {
     en: 'Failed to remove widget',
diff --git a/spx-gui/src/components/editor/stage/widget/WidgetsEditor.vue b/spx-gui/src/components/editor/stage/widget/WidgetsEditor.vue
index bb2340643..23510abfd 100644
--- a/spx-gui/src/components/editor/stage/widget/WidgetsEditor.vue
+++ b/spx-gui/src/components/editor/stage/widget/WidgetsEditor.vue
@@ -100,7 +100,7 @@ import { UIMenu, UIMenuItem, UIEmpty, UIButton } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
 import { Disposable } from '@/utils/disposable'
 import { shiftPath, type PathSegments } from '@/utils/route'
-import type { Stage } from '@/models/stage'
+import type { Stage } from '@/models/spx/stage'
 import { useAddMonitor } from '@/components/asset'
 import { useEditorCtx } from '../../EditorContextProvider.vue'
 import EditorList from '../../common/EditorList.vue'
@@ -131,7 +131,7 @@ const handleAddMonitor = useMessageHandle(
 const handleSorted = useMessageHandle(
   async (oldIdx: number, newIdx: number) => {
     const action = { name: { en: 'Update widget order', zh: '更新控件顺序' } }
-    await editorCtx.project.history.doAction(action, () => stage.value.moveWidget(oldIdx, newIdx))
+    await editorCtx.state.history.doAction(action, () => stage.value.moveWidget(oldIdx, newIdx))
   },
   {
     en: 'Failed to update widget order',
diff --git a/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue b/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
index e4c4fef0a..7ee49f4b5 100644
--- a/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
+++ b/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
@@ -81,7 +81,7 @@ import { UITextInput, UINumberInput, UIButtonGroup, UIButtonGroupItem, UIIcon }
 import { round } from '@/utils/utils'
 import { debounce } from 'lodash'
 import { useMessageHandle } from '@/utils/exception'
-import type { Monitor } from '@/models/widget/monitor'
+import type { Monitor } from '@/models/spx/widget/monitor'
 import { useRenameWidget } from '@/components/asset'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import EditorItemDetail from '../../../common/EditorItemDetail.vue'
@@ -128,7 +128,7 @@ function wrapUpdateHandler<Args extends any[]>(
 ): (...args: Args) => void {
   const name = props.monitor.name
   const action = { name: { en: `Configure widget ${name}`, zh: `修改控件 ${name} 配置` } }
-  const wrapped = (...args: Args) => editorCtx.project.history.doAction(action, () => handler(...args))
+  const wrapped = (...args: Args) => editorCtx.state.history.doAction(action, () => handler(...args))
   return withDebounce ? debounce(wrapped, 300) : wrapped
 }
 </script>
diff --git a/spx-gui/src/components/editor/stage/widget/detail/WidgetDetail.vue b/spx-gui/src/components/editor/stage/widget/detail/WidgetDetail.vue
index 73ae3d2d8..2a8465ba9 100644
--- a/spx-gui/src/components/editor/stage/widget/detail/WidgetDetail.vue
+++ b/spx-gui/src/components/editor/stage/widget/detail/WidgetDetail.vue
@@ -3,8 +3,8 @@
 </template>
 
 <script setup lang="ts">
-import type { Widget } from '@/models/widget'
-import { Monitor } from '@/models/widget/monitor'
+import type { Widget } from '@/models/spx/widget'
+import { Monitor } from '@/models/spx/widget/monitor'
 import MonitorDetail from './MonitorDetail.vue'
 
 defineProps<{
diff --git a/spx-gui/src/components/editor/stage/widget/icon.ts b/spx-gui/src/components/editor/stage/widget/icon.ts
index 3a92cf840..fa085f2c8 100644
--- a/spx-gui/src/components/editor/stage/widget/icon.ts
+++ b/spx-gui/src/components/editor/stage/widget/icon.ts
@@ -1,6 +1,6 @@
-import type { Widget } from '@/models/widget'
+import type { Widget } from '@/models/spx/widget'
 import monitorIcon from './monitor.svg?raw'
-import { Monitor } from '@/models/widget/monitor'
+import { Monitor } from '@/models/spx/widget/monitor'
 
 export function getIcon(widget: Widget) {
   if (widget instanceof Monitor) return monitorIcon
diff --git a/spx-gui/src/components/project/ProjectCreateModal.vue b/spx-gui/src/components/project/ProjectCreateModal.vue
index 1ed811836..54bd3a293 100644
--- a/spx-gui/src/components/project/ProjectCreateModal.vue
+++ b/spx-gui/src/components/project/ProjectCreateModal.vue
@@ -54,8 +54,9 @@ import { useMessageHandle } from '@/utils/exception'
 import { untilNotNull } from '@/utils/utils'
 import { getSignedInUsername } from '@/stores/user'
 import { ApiException, ApiExceptionCode } from '@/apis/common/exception'
-import { Project } from '@/models/project'
+import { SpxProject } from '@/models/spx/project'
 import { getDefaultProjectFile } from '@/components/project'
+import { useAppCtx } from '@/components/common/app-context'
 
 const props = defineProps<{
   remixSource?: string
@@ -69,6 +70,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const signedInUsername = computed(() => getSignedInUsername())
+const { cloudHelpers, xbpHelpers } = useAppCtx()
 
 const title = computed(() => {
   if (props.remixSource == null) return { en: 'Create a new project', zh: '创建新的项目' }
@@ -97,10 +99,10 @@ const handleSubmit = useMessageHandle(
     } else {
       const username = await untilNotNull(signedInUsername)
       const defaultProjectFile = await getDefaultProjectFile()
-      const project = new Project(username, projectName)
-      await project.loadXbpFile(defaultProjectFile)
+      const project = new SpxProject(username, projectName)
+      await xbpHelpers.load(project, defaultProjectFile)
       project.setVisibility(Visibility.Private)
-      await project.saveToCloud()
+      await cloudHelpers.save(project)
     }
     emit('resolved', projectName)
     return projectName
diff --git a/spx-gui/src/components/project/ProjectPublishModal.vue b/spx-gui/src/components/project/ProjectPublishModal.vue
index 5d1ce7691..4b1130169 100644
--- a/spx-gui/src/components/project/ProjectPublishModal.vue
+++ b/spx-gui/src/components/project/ProjectPublishModal.vue
@@ -6,13 +6,14 @@ import { useI18n } from '@/utils/i18n'
 import { Visibility } from '@/apis/common'
 import { createRelease } from '@/apis/project-release'
 import { saveFile } from '@/models/common/cloud'
-import type { Project } from '@/models/project'
+import type { SpxProject } from '@/models/spx/project'
 import { isProjectUsingAIInteraction } from '@/utils/project'
 import { UIImg, UIFormModal, UIForm, UIFormItem, UITextInput, UIButton, useForm } from '@/components/ui'
 import { stringifyProjectFullName } from '@/apis/project'
+import { useAppCtx } from '@/components/common/app-context'
 
 const props = defineProps<{
-  project: Project
+  project: SpxProject
   visible: boolean
 }>()
 
@@ -22,6 +23,7 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+const { cloudHelpers } = useAppCtx()
 
 const [thumbnailUrl, thumbnailUrlLoading] = useFileUrl(() => props.project.thumbnail)
 
@@ -69,7 +71,7 @@ const handleSubmit = useMessageHandle(
     project.setDescription(form.value.projectDescription)
     project.setInstructions(form.value.projectInstructions)
     if (isProjectUsingAIInteraction(project)) await project.ensureAIDescription(true) // Ensure AI description is available if needed
-    await project.saveToCloud()
+    await cloudHelpers.save(project)
     const thumbnailUniversalUrl = await saveFile(props.project.thumbnail!)
     await createRelease({
       projectFullName: stringifyProjectFullName(project.owner!, project.name!),
diff --git a/spx-gui/src/components/project/ProjectPublishedModal.vue b/spx-gui/src/components/project/ProjectPublishedModal.vue
index f5d3d3b77..7594694ac 100644
--- a/spx-gui/src/components/project/ProjectPublishedModal.vue
+++ b/spx-gui/src/components/project/ProjectPublishedModal.vue
@@ -3,11 +3,11 @@ import { computed } from 'vue'
 import { UIButton, UIFormModal, UITextInput, UILink } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
 import { getProjectPageRoute } from '@/router'
-import { Project } from '@/models/project'
+import { SpxProject } from '@/models/spx/project'
 
 const props = defineProps<{
   visible: boolean
-  project: Project
+  project: SpxProject
 }>()
 
 const emit = defineEmits<{
diff --git a/spx-gui/src/components/project/index.ts b/spx-gui/src/components/project/index.ts
index 35b58fbc1..c0eff2f95 100644
--- a/spx-gui/src/components/project/index.ts
+++ b/spx-gui/src/components/project/index.ts
@@ -1,7 +1,7 @@
 import { useModal, useConfirmDialog } from '@/components/ui'
 import { Visibility, deleteProject } from '@/apis/project'
 import { useI18n } from '@/utils/i18n'
-import type { Project } from '@/models/project'
+import type { SpxProject } from '@/models/spx/project'
 import ProjectCreateModal from './ProjectCreateModal.vue'
 import ProjectOpenModal from './ProjectOpenModal.vue'
 import ProjectSharingLinkModal from './ProjectSharingLinkModal.vue'
@@ -15,6 +15,7 @@ import ProjectPublishedModal from './ProjectPublishedModal.vue'
  * 4. Replace `./default-project.xbp` with the exported file.
  */
 import defaultProjectFileUrl from './default-project.xbp?url'
+import { useAppCtx } from '@/components/common/app-context'
 
 /**
  * Get the default project file as a File object
@@ -71,7 +72,7 @@ export function usePublishProject() {
   const invokePublishModal = useModal(ProjectPublishModal)
   const invokePublishedModal = useModal(ProjectPublishedModal)
 
-  return async function publishProject(project: Project) {
+  return async function publishProject(project: SpxProject) {
     await invokePublishModal({ project })
     invokePublishedModal({ project })
   }
@@ -80,14 +81,15 @@ export function usePublishProject() {
 export function useUnpublishProject() {
   const { t } = useI18n()
   const withConfirm = useConfirmDialog()
+  const { cloudHelpers } = useAppCtx()
 
   // TODO: message for exception
-  async function makePrivate(project: Project) {
+  async function makePrivate(project: SpxProject) {
     project.setVisibility(Visibility.Private)
-    await project.saveToCloud()
+    await cloudHelpers.save(project)
   }
 
-  return async function unpublishProject(project: Project) {
+  return async function unpublishProject(project: SpxProject) {
     return withConfirm({
       title: t({ en: 'Unpublish project', zh: '取消发布项目' }),
       content: t({
diff --git a/spx-gui/src/components/project/runner/ProjectRunner.vue b/spx-gui/src/components/project/runner/ProjectRunner.vue
index 0dff5c8f3..698da2478 100644
--- a/spx-gui/src/components/project/runner/ProjectRunner.vue
+++ b/spx-gui/src/components/project/runner/ProjectRunner.vue
@@ -141,14 +141,14 @@ import { registerPlayer } from '@/utils/player-registry'
 import { addPrefetchLink } from '@/utils/dom'
 import type { Files } from '@/models/common/file'
 import { hashFiles } from '@/models/common/hash'
-import type { Project } from '@/models/project'
+import type { SpxProject } from '@/models/spx/project'
 import { UIImg, UIDetailedLoading } from '@/components/ui'
 import { apiBaseUrl } from '@/utils/env'
 import { ensureAccessToken } from '@/stores/user'
 import { isProjectUsingAIInteraction } from '@/utils/project'
 import { capture, Cancelled } from '@/utils/exception'
 
-const props = defineProps<{ project: Project }>()
+const props = defineProps<{ project: SpxProject }>()
 
 const emit = defineEmits<{
   console: [type: 'log' | 'warn', args: unknown[]]
@@ -237,7 +237,7 @@ async function reloadIframe() {
 }
 
 async function prepareAIInteraction(
-  project: Project,
+  project: SpxProject,
   iframeWindow: RunnerIframeWindow,
   reporter: ProgressReporter,
   signal?: AbortSignal
@@ -301,7 +301,7 @@ async function runInternal(ctrl: AbortController) {
     const initGameReporter = collector.getSubReporter({ en: 'Initializing project...', zh: '初始化项目中...' }, 5)
     const startGameReporter = collector.getSubReporter({ en: 'Starting project...', zh: '启动项目中...' }, 5)
 
-    const files = props.project.exportGameFiles()
+    const files = props.project.exportFiles()
 
     const iframeWindow = await untilNotNull(runnerIframeWindowRef, ctrl.signal)
     iframeLoadReporter.report(1)
diff --git a/spx-gui/src/components/project/runner/ProjectRunnerSurface.vue b/spx-gui/src/components/project/runner/ProjectRunnerSurface.vue
index 5f25d88a8..7cf352a55 100644
--- a/spx-gui/src/components/project/runner/ProjectRunnerSurface.vue
+++ b/spx-gui/src/components/project/runner/ProjectRunnerSurface.vue
@@ -2,7 +2,7 @@
 import { computed, nextTick, onMounted, ref, shallowRef, watch } from 'vue'
 import { timeout, untilNotNull } from '@/utils/utils'
 import { useMessageHandle } from '@/utils/exception'
-import { Project } from '@/models/project'
+import { SpxProject } from '@/models/spx/project'
 import { UIButton, UITooltip } from '@/components/ui'
 import ProjectRunner from './ProjectRunner.vue'
 
@@ -10,7 +10,7 @@ type RunnerState = 'initial' | 'loading' | 'running'
 
 const props = withDefaults(
   defineProps<{
-    project: Project
+    project: SpxProject
     fullscreen?: boolean
     inlineAnchor?: () => HTMLElement | null
     onRun?: () => void | Promise<void>
diff --git a/spx-gui/src/models/common/cloud.ts b/spx-gui/src/models/common/cloud.ts
index 2c1748b8b..e392e9a07 100644
--- a/spx-gui/src/models/common/cloud.ts
+++ b/spx-gui/src/models/common/cloud.ts
@@ -1,6 +1,7 @@
 import { createDirectUploadTask } from 'qiniu-js'
 import { usercontentBaseUrl } from '@/utils/env'
 import { filename } from '@/utils/path'
+import { ProgressCollector, type ProgressReporter } from '@/utils/progress'
 import { humanizeFileSize, withRetry } from '@/utils/utils'
 import { mergeSignals } from '@/utils/disposable'
 import { ConcurrencyLimitController } from '@/utils/concurrency-limit'
@@ -11,13 +12,47 @@ import { Visibility, addProject, getProject, updateProject } from '@/apis/projec
 import { getUpInfo, makeObjectUrls, type UpInfo as RawUpInfo } from '@/apis/util'
 import { DefaultException, TimeoutException } from '@/utils/exception'
 import { getUphostsByRegion } from '@/utils/kodo'
-import type { Metadata } from '../project'
+import type { Metadata, IProject } from '../project'
 import { File, toText, type Files, isText } from './file'
 import { hashFileCollection } from './hash'
 import { createAIDescriptionFiles, extractAIDescription } from './'
 import { getUniversalUrlScheme, stringifyDataUrl, stringifyKodoUrl, UniversalUrlScheme } from '@/utils/universal-url'
 
-export async function load(owner: string, name: string, preferPublishedContent: boolean = false, signal?: AbortSignal) {
+/** Helpers for cloud storage of project data. */
+export class CloudHelpers {
+  constructor() {}
+  async load(
+    project: IProject,
+    preferPublishedContent: boolean = false,
+    signal?: AbortSignal,
+    reporter?: ProgressReporter
+  ) {
+    const { owner, name } = project
+    if (owner == null || name == null) throw new Error('owner and name expected to load project from cloud')
+    const collector = reporter != null ? ProgressCollector.collectorFor(reporter) : null
+    const cloudLoadReporter = collector?.getSubReporter(
+      { en: 'Downloading project info...', zh: '正在下载项目信息...' },
+      1
+    )
+    const projectLoadReporter = collector?.getSubReporter({ en: 'Loading project...', zh: '正在载入项目...' }, 1)
+
+    const { metadata, files } = await load(owner, name, preferPublishedContent, signal)
+    signal?.throwIfAborted()
+    cloudLoadReporter?.report(1)
+
+    await project.load(metadata, files)
+    signal?.throwIfAborted()
+    projectLoadReporter?.report(1)
+  }
+
+  async save(project: IProject, signal?: AbortSignal): Promise<void> {
+    const [metadata, files] = await project.export(signal)
+    const saved = await save(metadata, files, signal)
+    project.setMetadata(saved.metadata)
+  }
+}
+
+async function load(owner: string, name: string, preferPublishedContent: boolean = false, signal?: AbortSignal) {
   let projectData = await getProject(owner, name, signal)
   if (preferPublishedContent) {
     const published = getPublishedContent(projectData)
@@ -38,7 +73,7 @@ export function getPublishedContent(project: ProjectData) {
   return null
 }
 
-export async function save(metadata: Metadata, files: Files, signal?: AbortSignal) {
+async function save(metadata: Metadata, files: Files, signal?: AbortSignal) {
   const { owner, name, id } = metadata
   if (owner == null) throw new Error('owner expected')
   if (!name) throw new DefaultException({ en: 'project name not specified', zh: '未指定项目名' })
diff --git a/spx-gui/src/models/common/local.ts b/spx-gui/src/models/common/local.ts
index 8fd84da62..4ddacbdef 100644
--- a/spx-gui/src/models/common/local.ts
+++ b/spx-gui/src/models/common/local.ts
@@ -1,5 +1,5 @@
 import localforage from 'localforage'
-import type { Metadata } from '../project'
+import type { Metadata, IProject } from '../project'
 import { File, type Files, type Metadata as FileMetadata } from './file'
 
 const storage = localforage.createInstance({
@@ -65,13 +65,13 @@ async function removeFile(key: string, path: string) {
   await storage.removeItem(`${key}/${path}`)
 }
 
-export async function clear(key: string) {
+async function clear(key: string) {
   const metadataEx = await getMetadataEx(key)
   if (metadataEx == null) return
   await Promise.all([removeMetadataEx(key), ...metadataEx.files.map((path) => removeFile(key, path))])
 }
 
-export async function load(key: string) {
+async function load(key: string) {
   // TODO: check project owner & name
   const metadataEx = await getMetadataEx(key)
   if (metadataEx == null) return null
@@ -93,7 +93,7 @@ export async function load(key: string) {
   }
 }
 
-export async function save(key: string, { thumbnail, ...metadata }: Metadata, files: Files, signal?: AbortSignal) {
+async function save(key: string, { thumbnail, ...metadata }: Metadata, files: Files, signal?: AbortSignal) {
   await clear(key)
   const fileList = Object.keys(files)
   let rawThumbnail: RawFile | null = null
@@ -104,3 +104,31 @@ export async function save(key: string, { thumbnail, ...metadata }: Metadata, fi
     ...fileList.map((path) => writeFile(key, path, files[path]!, signal))
   ])
 }
+
+/** Helpers for local storage (IndexedDB based) of project data. */
+export class LocalHelpers {
+
+  /**
+   * Load project from local storage by given storage key.
+   * Resolves with `false` if no data found.
+   * Resolves with `true` if data loaded successfully.
+   */
+  async load(project: IProject, key: string): Promise<boolean> {
+    const loaded = await load(key)
+    if (loaded == null) return false
+    const { metadata, files } = loaded
+    await project.load(metadata, files)
+    return true
+  }
+
+  /** Save project to local storage with given storage key. */
+  async save(project: IProject, key: string, signal?: AbortSignal) {
+    const [metadata, files] = await project.export(signal)
+    await save(key, metadata, files, signal)
+  }
+
+  /** Clear data in local storage with given storage key. */
+  async clear(key: string) {
+    await clear(key)
+  }
+}
diff --git a/spx-gui/src/models/common/test.ts b/spx-gui/src/models/common/test.ts
index f061d2107..9d3a29f55 100644
--- a/spx-gui/src/models/common/test.ts
+++ b/spx-gui/src/models/common/test.ts
@@ -1,38 +1,50 @@
-import { Project } from '../project'
-import { Sound } from '../sound'
-import { fromText } from '../common/file'
-import { Backdrop } from '../backdrop'
-import { Monitor } from '../widget/monitor'
-import { Sprite } from '../sprite'
-import { Costume } from '../costume'
-import { Animation } from '../animation'
+import { vi } from 'vitest'
+import { shallowReactive } from 'vue'
+import type { IProject, Metadata } from '@/models/project'
+import { fromText, type Files } from '../common/file'
+import Mutex from '@/utils/mutex'
 
 export function mockFile(name = 'mocked') {
   return fromText(name, Math.random() + '')
 }
 
-export function makeProject() {
-  const project = new Project()
-  const sound = new Sound('sound', mockFile())
-  project.addSound(sound)
-
-  const backdrop = new Backdrop('backdrop', mockFile())
-  project.stage.addBackdrop(backdrop)
-  const widget = new Monitor('monitor', {
-    x: 10,
-    y: 20,
-    label: 'Score',
-    variableName: 'score'
+export class SimpleProject implements IProject {
+  mutex = new Mutex()
+  public files: Files
+  constructor(
+    public owner?: string,
+    public name?: string,
+    files: Files = {}
+  ) {
+    this.files = shallowReactive({ ...files })
+  }
+  private getMetadata(): Metadata {
+    return {
+      owner: this.owner,
+      name: this.name
+    }
+  }
+  setMetadata = vi.fn((metadata: Metadata): void => {
+    Object.assign(this, metadata)
+  })
+  loadFiles = vi.fn(async (files: Files, _signal?: AbortSignal): Promise<void> => {
+    void _signal
+    this.files = { ...files }
+  })
+  exportFiles = vi.fn((): Files => {
+    return { ...this.files }
+  })
+  export = vi.fn(async (_signal?: AbortSignal): Promise<[Metadata, Files]> => {
+    void _signal
+    return this.mutex.runExclusive(async () => {
+      return [this.getMetadata(), { ...this.files }]
+    })
+  })
+  load = vi.fn(async (metadata: Metadata, files: Files, _signal?: AbortSignal): Promise<void> => {
+    void _signal
+    await this.mutex.runExclusive(async () => {
+      Object.assign(this, metadata)
+      this.files = { ...files }
+    })
   })
-  project.stage.addWidget(widget)
-
-  const sprite = new Sprite('MySprite')
-  const costume = new Costume('default', mockFile())
-  sprite.addCostume(costume)
-  const animationCostumes = Array.from({ length: 3 }, (_, i) => new Costume(`a${i}`, mockFile()))
-  const animation = Animation.create('default', animationCostumes)
-  sprite.addAnimation(animation)
-  project.addSprite(sprite)
-  project.bindScreenshotTaker(async () => mockFile())
-  return project
 }
diff --git a/spx-gui/src/models/common/xbp.test.ts b/spx-gui/src/models/common/xbp.test.ts
index 30795435d..4dba9ebeb 100644
--- a/spx-gui/src/models/common/xbp.test.ts
+++ b/spx-gui/src/models/common/xbp.test.ts
@@ -1,10 +1,10 @@
 import { describe, it, expect, vi } from 'vitest'
-import { Sprite } from '../sprite'
-import { Animation } from '../animation'
-import { Sound } from '../sound'
-import { Costume } from '../costume'
+import { Sprite } from '../spx/sprite'
+import { Animation } from '../spx/animation'
+import { Sound } from '../spx/sound'
+import { Costume } from '../spx/costume'
 import { fromText, toText } from './file'
-import { Project } from '../project'
+import { SpxProject } from '../spx/project'
 import { load, save } from './xbp'
 
 vi.mock('@/apis/ai-description', () => ({
@@ -16,7 +16,7 @@ function mockFile(name = 'mocked', type = 'text/plain') {
 }
 
 function makeProject(name?: string, screenshotTaker = async () => mockFile()) {
-  const project = new Project(undefined, name)
+  const project = new SpxProject(undefined, name)
   const sound = new Sound('sound', mockFile())
   project.addSound(sound)
 
@@ -46,7 +46,7 @@ describe('save & load', () => {
     const [metadata, files] = await project.export()
     const projectFile = await save(metadata, files)
     const { metadata: loadedMetadata, files: loadedFiles } = await load(projectFile)
-    const project2 = new Project(undefined, 'test2')
+    const project2 = new SpxProject(undefined, 'test2')
     await project2.load(loadedMetadata, loadedFiles)
     expect(project2.name).toBe('test2')
     expect(project2.sprites.length).toBe(1)
@@ -60,7 +60,7 @@ describe('save & load', () => {
     const [metadata, files] = await project.export()
     const projectFile = await save(metadata, files)
     const { metadata: loadedMetadata, files: loadedFiles } = await load(projectFile)
-    const project2 = new Project(undefined, 'test2')
+    const project2 = new SpxProject(undefined, 'test2')
     await project2.load(loadedMetadata, loadedFiles)
     expect(project2.name).toBe('test2')
     expect(project2.description).toBe('test description')
@@ -74,7 +74,7 @@ describe('save & load', () => {
     const [metadata, files] = await project.export()
     const projectFile = await save(metadata, files)
     const { metadata: loadedMetadata, files: loadedFiles } = await load(projectFile)
-    const project2 = new Project(undefined, 'test2')
+    const project2 = new SpxProject(undefined, 'test2')
     await project2.load(loadedMetadata, loadedFiles)
 
     expect(await toText(project2.thumbnail!)).toBe(await toText(thumbnail))
diff --git a/spx-gui/src/models/common/xbp.ts b/spx-gui/src/models/common/xbp.ts
index 4986a6997..af75d2ee1 100644
--- a/spx-gui/src/models/common/xbp.ts
+++ b/spx-gui/src/models/common/xbp.ts
@@ -10,12 +10,24 @@ import { zip, unzip, type Zippable } from '@/utils/zip'
 import { filename, stripExt } from '@/utils/path'
 import { getExtFromMime } from '@/utils/file'
 import { File as LazyFile, toConfig, type Files as LazyFiles } from './file'
-import type { Metadata } from '../project'
+import type { Metadata, IProject } from '../project'
 import { createAIDescriptionFiles, extractAIDescription } from './'
 
 const metadataFileName = 'builder-meta.json'
 const thumbnailFileName = 'builder-thumbnail'
 
+/** Helpers for loading project from or saving project to xbp files. */
+export class XbpHelpers {
+  async load(project: IProject, file: globalThis.File) {
+    const { metadata, files } = await load(file)
+    await project.load(metadata, files)
+  }
+  async save(project: IProject, signal?: AbortSignal) {
+    const [metadata, files] = await project.export(signal)
+    return await save(metadata, files, signal)
+  }
+}
+
 export async function load(xbpFile: File) {
   const metadata: Metadata = {}
   const arrayBuffer = await xbpFile.arrayBuffer()
diff --git a/spx-gui/src/models/project.ts b/spx-gui/src/models/project.ts
new file mode 100644
index 000000000..266bd8b76
--- /dev/null
+++ b/spx-gui/src/models/project.ts
@@ -0,0 +1,49 @@
+import type { Prettify } from '@/utils/types'
+import type { ProjectData } from '@/apis/project'
+import type { File, Files } from './common/file'
+import type Mutex from '@/utils/mutex'
+
+export type CloudMetadata = Prettify<
+  Omit<ProjectData, 'latestRelease' | 'files' | 'thumbnail'> & {
+    thumbnail: File | null
+  }
+>
+
+export type Metadata = Prettify<
+  Partial<CloudMetadata> & {
+    aiDescription?: string | null
+    aiDescriptionHash?: string | null
+  }
+>
+
+export interface IProject {
+  /**
+   * Mutex for transaction operations on the project.
+   * Use this to ensure transactional operations atomicity.
+   */
+  mutex: Mutex
+  /** Username of the project owner. */
+  owner?: string
+  /** Name of the project. */
+  name?: string
+  /** Set metadata fields of the project. */
+  setMetadata(metadata: Metadata): void
+  /** Load project content from files. */
+  loadFiles(files: Files, signal?: AbortSignal): Promise<void>
+  /** Export project content to files. */
+  exportFiles(): Files
+  /**
+   * Load project content from metadata and files.
+   * Typically done in two steps: 1) set metadata via `setMetadata`, 2) load game content via `loadFiles`.
+   * Implementations may combine them to ensure transactional loading, control ordering, or perform
+   * additional work before, during, or after loading.
+   */
+  load(metadata: Metadata, files: Files, signal?: AbortSignal): Promise<void>
+  /**
+   * Export project content to metadata and files for saving
+   * Typically done in two steps: 1) collect metadata, 2) export game content via `exportFiles`.
+   * Implementations may combine them to ensure transactional exporting, control ordering, or perform
+   * additional work before, during, or after exporting.
+   */
+  export(signal?: AbortSignal): Promise<[Metadata, Files]>
+}
diff --git a/spx-gui/src/models/animation.test.ts b/spx-gui/src/models/spx/animation.test.ts
similarity index 96%
rename from spx-gui/src/models/animation.test.ts
rename to spx-gui/src/models/spx/animation.test.ts
index 1a3567ff9..e2fde1c8a 100644
--- a/spx-gui/src/models/animation.test.ts
+++ b/spx-gui/src/models/spx/animation.test.ts
@@ -1,8 +1,8 @@
 import { nextTick } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
 import { delayFile } from '@/utils/test'
-import { fromText, type Files } from './common/file'
-import { Project } from './project'
+import { fromText, type Files } from '../common/file'
+import { SpxProject } from './project'
 import { Sprite } from './sprite'
 import { Costume } from './costume'
 import { Sound } from './sound'
@@ -17,7 +17,7 @@ function mockFile(name = 'mocked') {
 }
 
 function makeProject() {
-  const project = new Project()
+  const project = new SpxProject()
   const sprite = new Sprite('MySprite')
   const costume = new Costume('default', mockFile())
   sprite.addCostume(costume)
@@ -94,7 +94,7 @@ describe('Animation', () => {
     const delayedFiles: Files = Object.fromEntries(
       Object.entries(files).map(([path, file]) => [path, delayFile(file!, 50)])
     )
-    const newProject = new Project()
+    const newProject = new SpxProject()
     await newProject.load(metadata, delayedFiles)
     expect(newProject.sprites[0].animations[0].sound).toBe(newProject.sounds[0].id)
   })
@@ -108,7 +108,7 @@ describe('Animation', () => {
     expect(id).not.toBeNull()
 
     const [metadata, files] = await project.export()
-    const newProject = new Project()
+    const newProject = new SpxProject()
     await newProject.load(metadata, files)
     const newSprite = newProject.sprites[0]
     const newAnimation = newSprite.animations[0]
diff --git a/spx-gui/src/models/animation.ts b/spx-gui/src/models/spx/animation.ts
similarity index 99%
rename from spx-gui/src/models/animation.ts
rename to spx-gui/src/models/spx/animation.ts
index dcba00d6f..95a51f6a4 100644
--- a/spx-gui/src/models/animation.ts
+++ b/spx-gui/src/models/spx/animation.ts
@@ -2,7 +2,7 @@ import { reactive } from 'vue'
 
 import { Disposable } from '@/utils/disposable'
 import { ensureValidCostumeName, getAnimationName, validateAnimationName } from './common/asset-name'
-import type { Files } from './common/file'
+import type { Files } from '../common/file'
 import type { Costume, RawCostumeConfig, Pivot as CostumePivot } from './costume'
 import type { Sprite } from './sprite'
 import { nanoid } from 'nanoid'
diff --git a/spx-gui/src/models/backdrop.test.ts b/spx-gui/src/models/spx/backdrop.test.ts
similarity index 97%
rename from spx-gui/src/models/backdrop.test.ts
rename to spx-gui/src/models/spx/backdrop.test.ts
index 4088f2a44..9aff3637e 100644
--- a/spx-gui/src/models/backdrop.test.ts
+++ b/spx-gui/src/models/spx/backdrop.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { resolve as resolvePath } from '@/utils/path'
-import { File, fromText, type Files } from './common/file'
+import { File, fromText, type Files } from '../common/file'
 import { Stage } from './stage'
 import { Backdrop } from './backdrop'
 
diff --git a/spx-gui/src/models/backdrop.ts b/spx-gui/src/models/spx/backdrop.ts
similarity index 98%
rename from spx-gui/src/models/backdrop.ts
rename to spx-gui/src/models/spx/backdrop.ts
index 8d90df5d7..0d4f59c70 100644
--- a/spx-gui/src/models/backdrop.ts
+++ b/spx-gui/src/models/spx/backdrop.ts
@@ -2,7 +2,7 @@ import { reactive } from 'vue'
 import { nanoid } from 'nanoid'
 import { extname, resolve } from '@/utils/path'
 import { adaptImg } from '@/utils/spx'
-import type { File, Files } from './common/file'
+import type { File, Files } from '../common/file'
 import { getBackdropName, validateBackdropName } from './common/asset-name'
 import type { AssetMetadata } from './common/asset'
 import type { Stage } from './stage'
diff --git a/spx-gui/src/models/common/asset-name.test.ts b/spx-gui/src/models/spx/common/asset-name.test.ts
similarity index 91%
rename from spx-gui/src/models/common/asset-name.test.ts
rename to spx-gui/src/models/spx/common/asset-name.test.ts
index 9ab575706..ac816392e 100644
--- a/spx-gui/src/models/common/asset-name.test.ts
+++ b/spx-gui/src/models/spx/common/asset-name.test.ts
@@ -1,9 +1,9 @@
 import { describe, it, expect } from 'vitest'
 import { getSoundName, getSpriteName, normalizeAssetName } from './asset-name'
-import { Project } from '../project'
+import { SpxProject } from '../project'
 import { Sprite } from '../sprite'
 import { Sound } from '../sound'
-import { fromText } from './file'
+import { fromText } from '../../common/file'
 
 describe('normalizeAssetName', () => {
   it('should work well with camel case', () => {
@@ -28,7 +28,7 @@ describe('normalizeAssetName', () => {
 
 describe('getSpriteName', () => {
   it('should work well', () => {
-    const project = new Project()
+    const project = new SpxProject()
     expect(getSpriteName(project)).toBe('MySprite')
     project.addSprite(new Sprite('MySprite'))
     project.addSprite(new Sprite('MySprite3'))
@@ -36,7 +36,7 @@ describe('getSpriteName', () => {
   })
 
   it('should work well with base', () => {
-    const project = new Project()
+    const project = new SpxProject()
     expect(getSpriteName(project, 'foo_bar')).toBe('FooBar')
     project.addSprite(new Sprite('FooBar'))
     project.addSprite(new Sprite('FooBar2'))
@@ -48,7 +48,7 @@ describe('getSpriteName', () => {
 
 describe('getSoundName', () => {
   it('should work well', () => {
-    const project = new Project()
+    const project = new SpxProject()
     expect(getSoundName(project)).toBe('sound')
     project.addSound(new Sound('sound', mockFile()))
     project.addSound(new Sound('sound3', mockFile()))
@@ -56,7 +56,7 @@ describe('getSoundName', () => {
   })
 
   it('should work well with base', () => {
-    const project = new Project()
+    const project = new SpxProject()
     expect(getSoundName(project, 'foo_bar')).toBe('foo_bar')
     project.addSound(new Sound('foo_bar', mockFile()))
     project.addSound(new Sound('foo_bar2', mockFile()))
diff --git a/spx-gui/src/models/common/asset-name.ts b/spx-gui/src/models/spx/common/asset-name.ts
similarity index 100%
rename from spx-gui/src/models/common/asset-name.ts
rename to spx-gui/src/models/spx/common/asset-name.ts
diff --git a/spx-gui/src/models/common/asset.ts b/spx-gui/src/models/spx/common/asset.ts
similarity index 97%
rename from spx-gui/src/models/common/asset.ts
rename to spx-gui/src/models/spx/common/asset.ts
index d2bf97f53..30dfeb9b0 100644
--- a/spx-gui/src/models/common/asset.ts
+++ b/spx-gui/src/models/spx/common/asset.ts
@@ -6,8 +6,8 @@ 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 './file'
-import { getFiles, saveFiles } from './cloud'
+import { fromBlob, fromConfig, toConfig } from '../../common/file'
+import { getFiles, saveFiles } from '../../common/cloud'
 
 export type AssetMetadata = Partial<Omit<AssetData, 'files'>>
 
diff --git a/spx-gui/src/models/common/resource-model.ts b/spx-gui/src/models/spx/common/resource-model.ts
similarity index 100%
rename from spx-gui/src/models/common/resource-model.ts
rename to spx-gui/src/models/spx/common/resource-model.ts
diff --git a/spx-gui/src/models/spx/common/test.ts b/spx-gui/src/models/spx/common/test.ts
new file mode 100644
index 000000000..0c5b0ed3f
--- /dev/null
+++ b/spx-gui/src/models/spx/common/test.ts
@@ -0,0 +1,34 @@
+import { SpxProject } from '../project'
+import { Sound } from '../sound'
+import { Backdrop } from '../backdrop'
+import { Monitor } from '../widget/monitor'
+import { Sprite } from '../sprite'
+import { Costume } from '../costume'
+import { Animation } from '../animation'
+import { mockFile } from '../../common/test'
+
+export function makeSpxProject() {
+  const project = new SpxProject()
+  const sound = new Sound('sound', mockFile())
+  project.addSound(sound)
+
+  const backdrop = new Backdrop('backdrop', mockFile())
+  project.stage.addBackdrop(backdrop)
+  const widget = new Monitor('monitor', {
+    x: 10,
+    y: 20,
+    label: 'Score',
+    variableName: 'score'
+  })
+  project.stage.addWidget(widget)
+
+  const sprite = new Sprite('MySprite')
+  const costume = new Costume('default', mockFile())
+  sprite.addCostume(costume)
+  const animationCostumes = Array.from({ length: 3 }, (_, i) => new Costume(`a${i}`, mockFile()))
+  const animation = Animation.create('default', animationCostumes)
+  sprite.addAnimation(animation)
+  project.addSprite(sprite)
+  project.bindScreenshotTaker(async () => mockFile())
+  return project
+}
diff --git a/spx-gui/src/models/costume.test.ts b/spx-gui/src/models/spx/costume.test.ts
similarity index 97%
rename from spx-gui/src/models/costume.test.ts
rename to spx-gui/src/models/spx/costume.test.ts
index cc7eaf4b4..4041337f3 100644
--- a/spx-gui/src/models/costume.test.ts
+++ b/spx-gui/src/models/spx/costume.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { resolve as resolvePath } from '@/utils/path'
-import { File, fromText, type Files } from './common/file'
+import { File, fromText, type Files } from '../common/file'
 import { Animation } from './animation'
 import { Costume } from './costume'
 import { Sprite } from './sprite'
diff --git a/spx-gui/src/models/costume.ts b/spx-gui/src/models/spx/costume.ts
similarity index 98%
rename from spx-gui/src/models/costume.ts
rename to spx-gui/src/models/spx/costume.ts
index bc26bfb61..4d8d5ef73 100644
--- a/spx-gui/src/models/costume.ts
+++ b/spx-gui/src/models/spx/costume.ts
@@ -3,7 +3,7 @@ import { nanoid } from 'nanoid'
 
 import { extname, resolve } from '@/utils/path'
 import { adaptImg } from '@/utils/spx'
-import { File, type Files, getImageSize } from './common/file'
+import { File, type Files, getImageSize } from '../common/file'
 import { getCostumeName, validateCostumeName } from './common/asset-name'
 import type { Sprite } from './sprite'
 import type { Animation } from './animation'
diff --git a/spx-gui/src/models/gen/aigc-mock.ts b/spx-gui/src/models/spx/gen/aigc-mock.ts
similarity index 99%
rename from spx-gui/src/models/gen/aigc-mock.ts
rename to spx-gui/src/models/spx/gen/aigc-mock.ts
index d0595fd34..6044b3936 100644
--- a/spx-gui/src/models/gen/aigc-mock.ts
+++ b/spx-gui/src/models/spx/gen/aigc-mock.ts
@@ -17,7 +17,7 @@ import {
 } from '@/apis/aigc'
 import { AnimationLoopMode, ArtStyle, BackdropCategory, Perspective, SpriteCategory } from '@/apis/common'
 import * as aigcApis from '@/apis/aigc'
-import { State } from '@/models/sprite.ts'
+import { State } from '@/models/spx/sprite'
 
 export function setupAigcMock() {
   vi.mock('@/apis/aigc', { spy: true })
diff --git a/spx-gui/src/models/gen/animation-gen.test.ts b/spx-gui/src/models/spx/gen/animation-gen.test.ts
similarity index 95%
rename from spx-gui/src/models/gen/animation-gen.test.ts
rename to spx-gui/src/models/spx/gen/animation-gen.test.ts
index 0c184aa07..19cdd45f7 100644
--- a/spx-gui/src/models/gen/animation-gen.test.ts
+++ b/spx-gui/src/models/spx/gen/animation-gen.test.ts
@@ -2,7 +2,8 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { AnimationLoopMode, ArtStyle, Perspective } from '@/apis/common'
 import { TaskStatus } from '@/apis/aigc'
 import * as fileHelpers from '@/models/common/file'
-import { makeProject, mockFile } from '../common/test'
+import { makeSpxProject } from '../common/test'
+import { mockFile } from '../../common/test'
 import { setupAigcMock, MockAigcApis } from './aigc-mock'
 import { Sprite } from '../sprite'
 import { AnimationGen } from './animation-gen'
@@ -20,7 +21,7 @@ describe('AnimationGen', () => {
   })
 
   it('should work well', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     const defaultCostume = new Costume('default', mockFile())
     sprite.addCostume(defaultCostume)
@@ -80,7 +81,7 @@ describe('AnimationGen', () => {
   })
 
   it('should validate animation name correctly', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     const defaultCostume = new Costume('default', mockFile())
     sprite.addCostume(defaultCostume)
@@ -108,7 +109,7 @@ describe('AnimationGen', () => {
   })
 
   it('should handle errors and retry successfully', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     const defaultCostume = new Costume('default', mockFile())
     sprite.addCostume(defaultCostume)
@@ -138,7 +139,7 @@ describe('AnimationGen', () => {
   })
 
   it('should throw error when generating video without reference costume', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     project.addSprite(sprite)
     const gen = new AnimationGen(sprite, project, { description: 'A test animation' })
@@ -150,7 +151,7 @@ describe('AnimationGen', () => {
   })
 
   it('should throw error when extracting frames without video', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     const defaultCostume = new Costume('default', mockFile())
     sprite.addCostume(defaultCostume)
@@ -168,7 +169,7 @@ describe('AnimationGen', () => {
   })
 
   it('should throw error when extracting frames without frames config', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     const defaultCostume = new Costume('default', mockFile())
     sprite.addCostume(defaultCostume)
@@ -186,7 +187,7 @@ describe('AnimationGen', () => {
   })
 
   it('should throw error when finishing without frames', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     const defaultCostume = new Costume('default', mockFile())
     sprite.addCostume(defaultCostume)
@@ -205,7 +206,7 @@ describe('AnimationGen', () => {
   })
 
   it('should allow multiple enrichments', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     const defaultCostume = new Costume('default', mockFile())
     sprite.addCostume(defaultCostume)
@@ -224,7 +225,7 @@ describe('AnimationGen', () => {
   })
 
   it('should allow multiple video generations', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     const defaultCostume = new Costume('default', mockFile())
     sprite.addCostume(defaultCostume)
@@ -248,7 +249,7 @@ describe('AnimationGen', () => {
   })
 
   it('should track finish state correctly', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     const defaultCostume = new Costume('default', mockFile())
     sprite.addCostume(defaultCostume)
@@ -277,7 +278,7 @@ describe('AnimationGen', () => {
   })
 
   it('should cancel running animation tasks', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     const defaultCostume = new Costume('default', mockFile())
     sprite.addCostume(defaultCostume)
diff --git a/spx-gui/src/models/gen/animation-gen.ts b/spx-gui/src/models/spx/gen/animation-gen.ts
similarity index 96%
rename from spx-gui/src/models/gen/animation-gen.ts
rename to spx-gui/src/models/spx/gen/animation-gen.ts
index 028185806..e2847a797 100644
--- a/spx-gui/src/models/gen/animation-gen.ts
+++ b/spx-gui/src/models/spx/gen/animation-gen.ts
@@ -10,11 +10,11 @@ import {
   TaskType,
   TaskStatus
 } from '@/apis/aigc'
-import type { Project } from '../project'
+import type { SpxProject } from '../project'
 import { Sprite } from '../sprite'
-import type { File } from '../common/file'
+import type { File } from '../../common/file'
 import { ensureValidAnimationName, validateAnimationName } from '../common/asset-name'
-import { createFileWithUniversalUrl, saveFile } from '../common/cloud'
+import { createFileWithUniversalUrl, saveFile } from '../../common/cloud'
 import { Animation } from '../animation'
 import { Costume } from '../costume'
 import { getProjectSettings, getSpriteSettings, Phase, Task } from './common'
@@ -37,7 +37,7 @@ export class AnimationGen extends Disposable {
     if (this.parent instanceof Sprite) return this.parent
     return this.parent.previewSprite
   }
-  private project: Project
+  private project: SpxProject
 
   private enrichPhase: Phase<AnimationSettings>
   private generateVideoTask: Task<TaskType.GenerateAnimationVideo>
@@ -48,7 +48,7 @@ export class AnimationGen extends Disposable {
 
   constructor(
     parent: Sprite | SpriteGen,
-    project: Project,
+    project: SpxProject,
     { referenceCostumeId = null, ...settings }: AnimationGenInits
   ) {
     super()
diff --git a/spx-gui/src/models/gen/backdrop-gen.test.ts b/spx-gui/src/models/spx/gen/backdrop-gen.test.ts
similarity index 94%
rename from spx-gui/src/models/gen/backdrop-gen.test.ts
rename to spx-gui/src/models/spx/gen/backdrop-gen.test.ts
index fec51baf0..00165bbc4 100644
--- a/spx-gui/src/models/gen/backdrop-gen.test.ts
+++ b/spx-gui/src/models/spx/gen/backdrop-gen.test.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach } from 'vitest'
 import { ArtStyle, BackdropCategory, Perspective } from '@/apis/common'
 import { TaskStatus } from '@/apis/aigc'
-import { makeProject } from '../common/test'
+import { makeSpxProject } from '../common/test'
 import { setupAigcMock, MockAigcApis } from './aigc-mock'
 import { BackdropGen } from './backdrop-gen'
 
@@ -16,7 +16,7 @@ describe('BackdropGen', () => {
   })
 
   it('should work well', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
 
     // 1. Create BackdropGen with initial description
     const gen = new BackdropGen(project, 'A sunny beach with palm trees and clear blue water')
@@ -73,7 +73,7 @@ describe('BackdropGen', () => {
   })
 
   it('should handle errors and retry successfully', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const gen = new BackdropGen(project, 'A beautiful sunset over mountains')
 
     // 1. First enrich attempt fails
@@ -109,7 +109,7 @@ describe('BackdropGen', () => {
   })
 
   it('should validate backdrop name correctly', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const gen = new BackdropGen(project, 'A scenic landscape')
 
     await gen.enrich()
@@ -125,7 +125,7 @@ describe('BackdropGen', () => {
   })
 
   it('should throw error when finishing without image', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const gen = new BackdropGen(project, 'A test backdrop')
 
     await gen.enrich()
@@ -136,7 +136,7 @@ describe('BackdropGen', () => {
   })
 
   it('should throw error when recording adoption without result', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const gen = new BackdropGen(project, 'A test backdrop')
 
     await gen.enrich()
@@ -147,7 +147,7 @@ describe('BackdropGen', () => {
   })
 
   it('should track isPreparePhase correctly', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const gen = new BackdropGen(project, 'A test backdrop')
 
     expect(gen.isPreparePhase).toBe(true)
@@ -162,7 +162,7 @@ describe('BackdropGen', () => {
   })
 
   it('should allow multiple enrichments', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const gen = new BackdropGen(project, 'First description')
 
     await gen.enrich()
@@ -174,7 +174,7 @@ describe('BackdropGen', () => {
   })
 
   it('should allow multiple image generations', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const gen = new BackdropGen(project, 'A test backdrop')
 
     await gen.enrich()
@@ -191,7 +191,7 @@ describe('BackdropGen', () => {
   })
 
   it('should cancel running image generation', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const gen = new BackdropGen(project, 'A test backdrop')
     const tasks = aigcMock.tasks
 
diff --git a/spx-gui/src/models/gen/backdrop-gen.ts b/spx-gui/src/models/spx/gen/backdrop-gen.ts
similarity index 91%
rename from spx-gui/src/models/gen/backdrop-gen.ts
rename to spx-gui/src/models/spx/gen/backdrop-gen.ts
index e4bdde06f..eed32163b 100644
--- a/spx-gui/src/models/gen/backdrop-gen.ts
+++ b/spx-gui/src/models/spx/gen/backdrop-gen.ts
@@ -3,22 +3,22 @@ import { reactive } from 'vue'
 import { Disposable } from '@/utils/disposable'
 import { ArtStyle, BackdropCategory, Perspective } from '@/apis/common'
 import { adoptAsset, enrichBackdropSettings, TaskType, TaskStatus, type BackdropSettings } from '@/apis/aigc'
-import type { File } from '../common/file'
-import { createFileWithUniversalUrl } from '../common/cloud'
+import type { File, Files } from '../../common/file'
+import { createFileWithUniversalUrl } from '../../common/cloud'
 import { validateBackdropName } from '../common/asset-name'
 import { backdrop2Asset } from '../common/asset'
-import type { Project } from '../project'
+import type { SpxProject } from '../project'
 import { Backdrop } from '../backdrop'
 import { getProjectSettings, Phase, Task } from './common'
 
 export class BackdropGen extends Disposable {
   id: string
-  private project: Project
+  private project: SpxProject
   private enrichPhase: Phase<BackdropSettings>
   private generateTask: Task<TaskType.GenerateBackdrop>
   private generatePhase: Phase<File[]>
 
-  constructor(project: Project, initialDescription = '') {
+  constructor(project: SpxProject, initialDescription = '') {
     super()
     this.id = nanoid()
     this.project = project
@@ -127,4 +127,13 @@ export class BackdropGen extends Disposable {
   cancel() {
     return this.generateTask.tryCancel()
   }
+
+  export(): Files {
+    // TODO
+    return {}
+  }
+
+  async load(files: Files) {
+    // TODO
+  }
 }
diff --git a/spx-gui/src/models/gen/common.test.ts b/spx-gui/src/models/spx/gen/common.test.ts
similarity index 100%
rename from spx-gui/src/models/gen/common.test.ts
rename to spx-gui/src/models/spx/gen/common.test.ts
diff --git a/spx-gui/src/models/gen/common.ts b/spx-gui/src/models/spx/gen/common.ts
similarity index 91%
rename from spx-gui/src/models/gen/common.ts
rename to spx-gui/src/models/spx/gen/common.ts
index 4b312509a..84df02ca7 100644
--- a/spx-gui/src/models/gen/common.ts
+++ b/spx-gui/src/models/spx/gen/common.ts
@@ -16,10 +16,10 @@ import {
   type TaskParams,
   type TaskResult
 } from '@/apis/aigc'
-import type { Project } from '../project'
+import type { SpxProject } from '../project'
 import type { Sprite } from '../sprite'
 
-export function getProjectSettings(project: Project): ProjectSettings {
+export function getProjectSettings(project: SpxProject): ProjectSettings {
   return {
     name: project.name ?? '',
     description: project.description ?? '',
@@ -30,7 +30,7 @@ export function getProjectSettings(project: Project): ProjectSettings {
 }
 
 /** Infers the project's art style by finding the majority art style among all sprites and backdrops. */
-function inferProjectArtStyle(project: Project): ArtStyle {
+function inferProjectArtStyle(project: SpxProject): ArtStyle {
   const assetArtStyles = [...project.sprites, ...project.stage.backdrops]
     .map((a) => a.assetMetadata?.extraSettings?.artStyle)
     .filter((as) => as != null)
@@ -38,7 +38,7 @@ function inferProjectArtStyle(project: Project): ArtStyle {
 }
 
 /** Infers the project's perspective by finding the majority perspective among all sprites and backdrops. */
-function inferProjectPerspective(project: Project): Perspective {
+function inferProjectPerspective(project: SpxProject): Perspective {
   const assetPerspectives = [...project.sprites, ...project.stage.backdrops]
     .map((a) => a.assetMetadata?.extraSettings?.perspective)
     .filter((p) => p != null)
@@ -82,16 +82,21 @@ export type PhaseState<R> =
       remaining?: null
     }
 
+export type PhaseSerialized = {
+  state: PhaseState<unknown>
+  actionName: LocaleMessage
+}
+
 /** `Phase` tracks the state of an asynchronous process. */
 export class Phase<R> {
-  state: PhaseState<R>
   private _timer: ReturnType<typeof setInterval> | null = null
   constructor(
     /**
      * The name of the action being tracked, used for error messages.
      * For example, "generate video" or "extract frames".
      */
-    private actionName: LocaleMessage
+    private actionName: LocaleMessage,
+    public state: PhaseState<R> = { status: 'initial' }
   ) {
     this.state = { status: 'initial' }
   }
@@ -159,6 +164,10 @@ export class Phase<R> {
   async run(fn: () => Promise<R>, runDuration: number | null = null): Promise<R> {
     return this.track(fn(), runDuration)
   }
+
+  static load(serialized: PhaseSerialized): Phase<unknown> {
+    const phase = new Phase(serialized.actionName, serialized.state)
+  }
 }
 
 const taskErrorMessages: Record<TaskErrorReason, LocaleMessage> = {
@@ -213,16 +222,19 @@ const taskRunDuration: Record<TaskType, number | null> = {
 
 export type TaskApis = Pick<typeof aigcApis, 'createTask' | 'cancelTask' | 'subscribeTaskEvents'>
 
+export type TaskSerialized = {
+  type: TaskType
+  data: TaskData<TaskType> | null
+}
+
 /** `Task` manages the lifecycle and state of an AIGC task. */
 export class Task<T extends TaskType> extends Disposable {
-  data: TaskData<T> | null
-
   constructor(
     private type: T,
-    private apis: TaskApis = aigcApis
+    public data: TaskData<T> | null = null,
+    private apis: TaskApis = aigcApis,
   ) {
     super()
-    this.data = null
   }
 
   /** Estimated duration (in seconds) for this task type, or null if unknown. */
@@ -288,6 +300,14 @@ export class Task<T extends TaskType> extends Disposable {
     // It is usual to call `dispose()` right after calling `tryCancel()` and we should not increase the burden of the caller.
     await this.apis.cancelTask(id).catch((err) => capture(err, `failed to cancel task ${id}`))
   }
+
+  static load(serialized: TaskSerialized, apis: TaskApis = aigcApis): Task<TaskType> {
+    return new Task(serialized.type, serialized.data, apis)
+  }
+
+  export(): TaskSerialized {
+    return { type: this.type, data: this.data }
+  }
 }
 
 /** Returns the majority value (appears more than half) in the array, or null if none exists. */
diff --git a/spx-gui/src/models/gen/costume-gen.test.ts b/spx-gui/src/models/spx/gen/costume-gen.test.ts
similarity index 94%
rename from spx-gui/src/models/gen/costume-gen.test.ts
rename to spx-gui/src/models/spx/gen/costume-gen.test.ts
index d5f3a76a8..1faec6aab 100644
--- a/spx-gui/src/models/gen/costume-gen.test.ts
+++ b/spx-gui/src/models/spx/gen/costume-gen.test.ts
@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { ArtStyle, Perspective } from '@/apis/common'
 import { Facing, TaskStatus } from '@/apis/aigc'
 import * as fileHelpers from '@/models/common/file'
-import { makeProject } from '../common/test'
+import { makeSpxProject } from '../common/test'
 import { setupAigcMock, MockAigcApis } from './aigc-mock'
 import { Sprite } from '../sprite'
 import { CostumeGen } from './costume-gen'
@@ -19,7 +19,7 @@ describe('CostumeGen', () => {
   })
 
   it('should work well', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     project.addSprite(sprite)
 
@@ -59,7 +59,7 @@ describe('CostumeGen', () => {
   })
 
   it('should handle errors and retry successfully', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     project.addSprite(sprite)
     const gen = new CostumeGen(sprite, project, { description: 'A test costume' })
@@ -85,7 +85,7 @@ describe('CostumeGen', () => {
   })
 
   it('should validate costume name correctly', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     project.addSprite(sprite)
 
@@ -103,7 +103,7 @@ describe('CostumeGen', () => {
   })
 
   it('should throw error when finishing without image', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     project.addSprite(sprite)
     const gen = new CostumeGen(sprite, project, { description: 'A test costume' })
@@ -115,7 +115,7 @@ describe('CostumeGen', () => {
   })
 
   it('should allow multiple enrichments', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     project.addSprite(sprite)
     const gen = new CostumeGen(sprite, project, { description: 'First description' })
@@ -129,7 +129,7 @@ describe('CostumeGen', () => {
   })
 
   it('should allow multiple generations', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     project.addSprite(sprite)
     const gen = new CostumeGen(sprite, project, { description: 'A test costume' })
@@ -148,7 +148,7 @@ describe('CostumeGen', () => {
   })
 
   it('should track finish state correctly', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     project.addSprite(sprite)
     const gen = new CostumeGen(sprite, project, { description: 'A test costume' })
@@ -170,7 +170,7 @@ describe('CostumeGen', () => {
   })
 
   it('should cancel running costume generation', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const sprite = Sprite.create('TestSprite', '')
     project.addSprite(sprite)
     const gen = new CostumeGen(sprite, project, { description: 'A test costume' })
diff --git a/spx-gui/src/models/gen/costume-gen.ts b/spx-gui/src/models/spx/gen/costume-gen.ts
similarity index 95%
rename from spx-gui/src/models/gen/costume-gen.ts
rename to spx-gui/src/models/spx/gen/costume-gen.ts
index a606664e9..c78375b4f 100644
--- a/spx-gui/src/models/gen/costume-gen.ts
+++ b/spx-gui/src/models/spx/gen/costume-gen.ts
@@ -4,10 +4,10 @@ import type { Prettify } from '@/utils/types'
 import { Disposable } from '@/utils/disposable'
 import { ArtStyle, Perspective } from '@/apis/common'
 import { enrichCostumeSettings, Facing, TaskType, TaskStatus, type CostumeSettings } from '@/apis/aigc'
-import type { File } from '../common/file'
+import type { File } from '../../common/file'
 import { ensureValidCostumeName, validateCostumeName } from '../common/asset-name'
-import { createFileWithUniversalUrl, saveFile } from '../common/cloud'
-import type { Project } from '../project'
+import { createFileWithUniversalUrl, saveFile } from '../../common/cloud'
+import type { SpxProject } from '../project'
 import { Sprite } from '../sprite'
 import { Costume } from '../costume'
 import { getProjectSettings, getSpriteSettings, Phase, Task } from './common'
@@ -29,7 +29,7 @@ export class CostumeGen extends Disposable {
     if (this.parent instanceof Sprite) return this.parent
     return this.parent.previewSprite
   }
-  private project: Project
+  private project: SpxProject
   private enrichPhase: Phase<CostumeSettings>
   private generateTask: Task<TaskType.GenerateCostume>
   private generatePhase: Phase<File>
@@ -37,7 +37,7 @@ export class CostumeGen extends Disposable {
 
   constructor(
     parent: Sprite | SpriteGen,
-    project: Project,
+    project: SpxProject,
     { referenceCostumeId = null, ...settings }: CostumeGenInits
   ) {
     super()
diff --git a/spx-gui/src/models/gen/sprite-gen.test.ts b/spx-gui/src/models/spx/gen/sprite-gen.test.ts
similarity index 96%
rename from spx-gui/src/models/gen/sprite-gen.test.ts
rename to spx-gui/src/models/spx/gen/sprite-gen.test.ts
index a7cc6bb7d..100ed6716 100644
--- a/spx-gui/src/models/gen/sprite-gen.test.ts
+++ b/spx-gui/src/models/spx/gen/sprite-gen.test.ts
@@ -3,7 +3,7 @@ import { ArtStyle, Perspective, SpriteCategory } from '@/apis/common'
 import { TaskStatus } from '@/apis/aigc'
 import { createI18n } from '@/utils/i18n'
 import * as fileHelpers from '@/models/common/file'
-import { makeProject } from '../common/test'
+import { makeSpxProject } from '../common/test'
 import { setupAigcMock, MockAigcApis } from './aigc-mock'
 import { SpriteGen } from './sprite-gen'
 import { State } from '../sprite'
@@ -47,7 +47,7 @@ describe('SpriteGen', () => {
   })
 
   it('should work well', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
 
     // Create SpriteGen with initial input
     const gen = new SpriteGen(createI18n({ lang: 'en' }), project, 'A brave knight')
@@ -151,7 +151,7 @@ describe('SpriteGen', () => {
   })
 
   it('should validate sprite name correctly', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const gen = new SpriteGen(createI18n({ lang: 'en' }), project, 'A test sprite')
 
     await gen.enrich()
@@ -169,7 +169,7 @@ describe('SpriteGen', () => {
   })
 
   it('should handle errors and retry successfully', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const gen = new SpriteGen(createI18n({ lang: 'en' }), project, 'A test sprite')
 
     // First enrich attempt fails
@@ -192,7 +192,7 @@ describe('SpriteGen', () => {
   })
 
   it('should throw error when preparing content without image', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const gen = new SpriteGen(createI18n({ lang: 'en' }), project, 'A test sprite')
 
     await gen.enrich()
@@ -202,7 +202,7 @@ describe('SpriteGen', () => {
   })
 
   it('should allow multiple enrichments', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const gen = new SpriteGen(createI18n({ lang: 'en' }), project, 'First description')
 
     await gen.enrich()
@@ -214,7 +214,7 @@ describe('SpriteGen', () => {
   })
 
   it('should allow multiple image generations', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const gen = new SpriteGen(createI18n({ lang: 'en' }), project, 'A test sprite')
 
     await gen.enrich()
@@ -229,7 +229,7 @@ describe('SpriteGen', () => {
   })
 
   it('should track content preparing correctly', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const gen = new SpriteGen(createI18n({ lang: 'en' }), project, 'A test sprite')
 
     expect(gen.contentPreparingState.status).toBe('initial')
@@ -247,7 +247,7 @@ describe('SpriteGen', () => {
   })
 
   it('should cancel running image generation', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const gen = new SpriteGen(createI18n({ lang: 'en' }), project, 'A test sprite')
     const tasks = aigcMock.tasks
 
@@ -261,7 +261,7 @@ describe('SpriteGen', () => {
   })
 
   it('should cancel running costume and animation generations', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
     const gen = new SpriteGen(createI18n({ lang: 'en' }), project, 'A test sprite')
     const tasks = aigcMock.tasks
 
@@ -288,7 +288,7 @@ describe('SpriteGen', () => {
   })
 
   it('should set rotation style based on perspective', async () => {
-    const project = makeProject()
+    const project = makeSpxProject()
 
     // Test SideScrolling perspective -> LeftRight rotation style
     const gen1 = new SpriteGen(createI18n({ lang: 'en' }), project, 'A test sprite')
diff --git a/spx-gui/src/models/gen/sprite-gen.ts b/spx-gui/src/models/spx/gen/sprite-gen.ts
similarity index 96%
rename from spx-gui/src/models/gen/sprite-gen.ts
rename to spx-gui/src/models/spx/gen/sprite-gen.ts
index be298035d..d0d608a2a 100644
--- a/spx-gui/src/models/gen/sprite-gen.ts
+++ b/spx-gui/src/models/spx/gen/sprite-gen.ts
@@ -13,15 +13,15 @@ import {
   TaskStatus,
   adoptAsset
 } from '@/apis/aigc'
-import { Project } from '../project'
+import { SpxProject } from '../project'
 import { RotationStyle, Sprite, State } from '../sprite'
 import { Costume } from '../costume'
 import type { Animation } from '../animation'
 import { getProjectSettings, Phase, Task } from './common'
 import { CostumeGen } from './costume-gen'
 import { AnimationGen } from './animation-gen'
-import { createFileWithUniversalUrl } from '../common/cloud'
-import type { File } from '../common/file'
+import { createFileWithUniversalUrl } from '../../common/cloud'
+import type { File, Files } from '../../common/file'
 import { getAnimationName, getCostumeName, validateSpriteName } from '../common/asset-name'
 import { sprite2Asset } from '../common/asset'
 
@@ -31,17 +31,19 @@ type SpriteGenSelected = {
   id: string
 }
 
+export const spriteGenAssetPath = 'assets/sprite-gens'
+
 export class SpriteGen extends Disposable {
   id: string
   private i18n: I18n
-  private project: Project
+  private project: SpxProject
   private enrichPhase: Phase<SpriteSettings>
   private genImagesTask: Task<TaskType.GenerateCostume>
   private genImagesPhase: Phase<File[]>
   private prepareContentPhase: Phase<void>
   private animationGenIdBindings: Partial<Record<State, string>> = {}
 
-  constructor(i18n: I18n, project: Project, initialDescription = '') {
+  constructor(i18n: I18n, project: SpxProject, initialDescription = '') {
     super()
     this.id = nanoid()
     this.i18n = i18n
@@ -59,7 +61,7 @@ export class SpriteGen extends Disposable {
       artStyle: ArtStyle.Unspecified,
       perspective: Perspective.Unspecified
     }
-    this.previewProject = new Project()
+    this.previewProject = new SpxProject()
     this.previewSprite = this.createSprite()
     this.previewProject.addSprite(this.previewSprite)
     this.result = null
@@ -146,7 +148,7 @@ export class SpriteGen extends Disposable {
   }
 
   /** The project instance for preview within generation */
-  previewProject: Project
+  previewProject: SpxProject
   /** The sprite instance for preview within generation */
   previewSprite: Sprite
 
@@ -388,6 +390,20 @@ export class SpriteGen extends Disposable {
       ...this.animations.map((a) => a.cancel())
     ])
   }
+
+  static async loadAll(files: Files) {
+
+  }
+
+  static async load(files: Files) {
+    // TODO
+  }
+
+  export(): Files {
+    // TODO
+    return {}
+  }
+
 }
 
 // TODO: consider moving such logic to AIGC backend to colocate all AIGC generation prompts
diff --git a/spx-gui/src/models/project/index.test.ts b/spx-gui/src/models/spx/project.test.ts
similarity index 83%
rename from spx-gui/src/models/project/index.test.ts
rename to spx-gui/src/models/spx/project.test.ts
index f4644e99e..d8b8ff535 100644
--- a/spx-gui/src/models/project/index.test.ts
+++ b/spx-gui/src/models/spx/project.test.ts
@@ -1,20 +1,20 @@
-import { describe, it, expect, vi } from 'vitest'
-import { Sprite } from '../sprite'
-import { Animation } from '../animation'
-import { Sound } from '../sound'
-import { Costume } from '../costume'
+import { describe, it, expect } from 'vitest'
+import { Sprite } from './sprite'
+import { Animation } from './animation'
+import { Sound } from './sound'
+import { Costume } from './costume'
 import { fromText, toConfig, type Files } from '../common/file'
 import * as hashHelper from '../common/hash'
-import { Backdrop } from '../backdrop'
-import { Monitor } from '../widget/monitor'
-import { Project, projectConfigFilePath, type RawProjectConfig } from '.'
+import { Backdrop } from './backdrop'
+import { Monitor } from './widget/monitor'
+import { SpxProject, projectConfigFilePath, type RawProjectConfig } from './project'
 
 function mockFile(name = 'mocked') {
   return fromText(name, Math.random() + '')
 }
 
 function makeProject() {
-  const project = new Project()
+  const project = new SpxProject()
   const sound = new Sound('sound', mockFile())
   project.addSound(sound)
 
@@ -46,8 +46,8 @@ describe('Project', () => {
     const animation = sprite.animations[0]
     animation.setSound(project.sounds[0].id)
 
-    const files = project.exportGameFiles()
-    await project.loadGameFiles(files)
+    const files = project.exportFiles()
+    await project.loadFiles(files)
     expect(project.sprites[0].animations[0].sound).toBe(project.sounds[0].id)
   })
 
@@ -66,7 +66,7 @@ describe('Project', () => {
     const sound2 = new Sound('sound2', mockFile())
     project.addSound(sound2)
 
-    const files = project.exportGameFiles()
+    const files = project.exportFiles()
 
     const reversedFiles = Object.keys(files)
       .reverse()
@@ -74,7 +74,7 @@ describe('Project', () => {
         acc[key] = files[key]
         return acc
       }, {})
-    await project.loadGameFiles(reversedFiles)
+    await project.loadFiles(reversedFiles)
     expect(project.sprites.map((s) => s.name)).toEqual(['MySprite1', 'MySprite3', 'MySprite2'])
     expect(project.sounds.map((s) => s.name)).toEqual(['sound1', 'sound3', 'sound2'])
 
@@ -84,35 +84,23 @@ describe('Project', () => {
         acc[key] = files[key]
         return acc
       }, {})
-    await project.loadGameFiles(shuffledFiles)
+    await project.loadFiles(shuffledFiles)
     expect(project.sprites.map((s) => s.name)).toEqual(['MySprite1', 'MySprite3', 'MySprite2'])
     expect(project.sounds.map((s) => s.name)).toEqual(['sound1', 'sound3', 'sound2'])
   })
 
-  it('should throw an error when saving a disposed project', async () => {
-    const project = makeProject()
-    const saveToLocalCacheMethod = vi.spyOn(project, 'saveToLocalCache' as any)
-
-    project.dispose()
-
-    await expect(project.saveToCloud()).rejects.toThrow('disposed')
-
-    await expect((project as any).saveToLocalCache('key')).rejects.toThrow('disposed')
-    expect(saveToLocalCacheMethod).toHaveBeenCalledWith('key')
-  })
-
   it('should preserve information after export & load', async () => {
     const project = makeProject()
-    const files = project.exportGameFiles()
+    const files = project.exportFiles()
     const hash = await hashHelper.hashFiles(files)
-    await project.loadGameFiles(files)
-    const files2 = project.exportGameFiles()
+    await project.loadFiles(files)
+    const files2 = project.exportFiles()
     const hash2 = await hashHelper.hashFiles(files2)
     expect(hash).toBe(hash2)
   })
 
   it('should move sprites correctly', async () => {
-    const project = new Project()
+    const project = new SpxProject()
     const sprite1 = new Sprite('sprite1')
     const sprite2 = new Sprite('sprite2')
     const sprite3 = new Sprite('sprite3')
@@ -130,7 +118,7 @@ describe('Project', () => {
   })
 
   it('should move sounds correctly', async () => {
-    const project = new Project()
+    const project = new SpxProject()
     const sound1 = new Sound('sound1', mockFile())
     const sound2 = new Sound('sound2', mockFile())
     const sound3 = new Sound('sound3', mockFile())
@@ -145,12 +133,12 @@ describe('Project', () => {
   })
 
   it('should audio attenuation be enabled when map size exceeds viewport size', async () => {
-    const project = new Project()
+    const project = new SpxProject()
     const stage = project.stage
     const viewport = project.viewportSize
 
     async function reloadProjectConfig() {
-      const exports = project.exportGameFiles()
+      const exports = project.exportFiles()
       return toConfig(exports[projectConfigFilePath]!) as RawProjectConfig
     }
 
@@ -184,7 +172,7 @@ describe('Project', () => {
   })
 
   it('should add sprite after correctly', () => {
-    const project = new Project()
+    const project = new SpxProject()
     const sprite1 = new Sprite('sprite1')
     project.addSprite(sprite1)
 
diff --git a/spx-gui/src/models/project/index.ts b/spx-gui/src/models/spx/project.ts
similarity index 85%
rename from spx-gui/src/models/project/index.ts
rename to spx-gui/src/models/spx/project.ts
index 6ea431d8d..439bbde43 100644
--- a/spx-gui/src/models/project/index.ts
+++ b/spx-gui/src/models/spx/project.ts
@@ -7,49 +7,29 @@ import { computed, reactive, watch, type ComputedRef, toValue, effectScope } fro
 
 import { join } from '@/utils/path'
 import { debounce } from 'lodash'
-import type { Prettify } from '@/utils/types'
 import { Disposable, getCleanupSignal } from '@/utils/disposable'
 import Mutex from '@/utils/mutex'
 import { Cancelled } from '@/utils/exception'
-import { ProgressCollector, type ProgressReporter } from '@/utils/progress'
-import { Visibility, type ProjectData, type ProjectExtraSettings } from '@/apis/project'
+import { Visibility, type ProjectExtraSettings } from '@/apis/project'
 import { toConfig, type Files, fromConfig, File, toText, getImageSize } from '../common/file'
-import * as cloudHelper from '../common/cloud'
-import * as localHelper from '../common/local'
-import * as xbpHelper from '../common/xbp'
 import { assign } from '../common'
-import { ensureValidSpriteName, ensureValidSoundName } from '../common/asset-name'
-import { ResourceModelIdentifier, type ResourceModel } from '../common/resource-model'
+import { ensureValidSpriteName, ensureValidSoundName } from './common/asset-name'
+import { ResourceModelIdentifier, type ResourceModel } from './common/resource-model'
 import { generateAIDescription } from '@/apis/ai-description'
 import { hashFiles } from '../common/hash'
 import { isProjectUsingAIInteraction } from '@/utils/project'
-import { defaultMapSize, Stage, type RawStageConfig } from '../stage'
-import { DumbTilemap as Tilemap } from '../tilemap'
-import { Sprite } from '../sprite'
-import { Sound } from '../sound'
-import type { RawWidgetConfig } from '../widget'
-import { History } from './history'
-
-export type { Action } from './history'
-
-export type CloudMetadata = Prettify<
-  Omit<ProjectData, 'latestRelease' | 'files' | 'thumbnail'> & {
-    thumbnail: File | null
-  }
->
-
-export type Metadata = Prettify<
-  Partial<CloudMetadata> & {
-    aiDescription?: string | null
-    aiDescriptionHash?: string | null
-  }
->
+import { defaultMapSize, Stage, type RawStageConfig } from './stage'
+import { DumbTilemap as Tilemap } from './tilemap'
+import { Sprite } from './sprite'
+import { Sound } from './sound'
+import type { RawWidgetConfig } from './widget'
+import type { CloudMetadata, IProject, Metadata } from '@/models/project'
 
 /**
  * A Project loaded from cloud.
  * TODO: better organization & type derivation
  */
-export type CloudProject = Project & CloudMetadata
+export type CloudProject = SpxProject & CloudMetadata
 
 const projectConfigFileName = 'index.json'
 const assetsDir = 'assets'
@@ -113,7 +93,7 @@ const defaultViewportSize: ViewportSize = defaultMapSize
 const maxAudioAttenuationViewportScale = 1.6 // The maximum scaling factor for the viewport
 const disabledAudioAttenuationFlag = 0
 
-export class Project extends Disposable {
+export class SpxProject extends Disposable {
   id?: string
   createdAt?: string
   updatedAt?: string
@@ -323,13 +303,11 @@ export class Project extends Disposable {
     this.instructions = instructions
   }
 
-  /** History instance which tracks project editing history */
-  history: History // TODO: move to state `Editing`
   /**
    * Mutex for transaction operations on the project.
    * Use this to ensure transactional operations atomicity.
    */
-  transactionMutex = new Mutex()
+  mutex = new Mutex()
 
   // In project editor, we use `bindScreenshotTaker` to register a screenshot taker and
   // update thumbnail automatically. That way, the thumbnail will always reflect the latest changes
@@ -362,7 +340,7 @@ export class Project extends Disposable {
     const scope = effectScope(true)
     scope.run(() =>
       watch(
-        () => this.exportGameFiles(),
+        () => this.exportFiles(),
         (_, __, onCleanup) => this.updateThumbnail(getCleanupSignal(onCleanup)),
         { immediate: true }
       )
@@ -378,7 +356,6 @@ export class Project extends Disposable {
     const reactiveThis = reactive(this) as this
     this.owner = owner
     this.name = name
-    this.history = new History(reactiveThis)
     this.zorder = []
     this.stage = new Stage()
     this.sprites = []
@@ -398,8 +375,8 @@ export class Project extends Disposable {
     return reactiveThis
   }
 
-  private loadMetadata(metadata: Metadata) {
-    assign<Project>(this, metadata)
+  setMetadata(metadata: Metadata) {
+    assign<SpxProject>(this, metadata)
   }
 
   private exportMetadata(): Metadata {
@@ -419,7 +396,7 @@ export class Project extends Disposable {
     }
   }
 
-  async loadGameFiles(files: Files) {
+  async loadFiles(files: Files) {
     const configFile = files[projectConfigFilePath]
     const config: RawProjectConfig = {}
     if (configFile != null) {
@@ -527,92 +504,34 @@ export class Project extends Disposable {
    *
    * TODO: we may need to migrate most callers of this method to use some alternative methods that ensure atomicity.
    */
-  exportGameFiles() {
+  exportFiles() {
     return toValue(this.exportGameFilesComputed)
   }
 
   /** Load with metadata & game files */
   async load(metadata: Metadata, files: Files) {
-    this.loadMetadata(metadata)
-    await this.loadGameFiles(files)
+    // TODO: consume signal
+    this.setMetadata(metadata)
+    await this.loadFiles(files)
   }
 
   /** Export metadata & game files */
   async export(signal?: AbortSignal): Promise<[Metadata, Files]> {
-    return this.transactionMutex.runExclusive(async () => {
+    return this.mutex.runExclusive(async () => {
       // Do flush pending thumbnail updates to ensure the exported thumbnail up-to-date.
       // So the caller of `export` (cloud-saving, local-saving, xbp-exporting, etc.) always get the latest thumbnail.
       // For more details, see https://github.com/goplus/builder/issues/1807 .
       await this.updateThumbnail.flush()
       if (isProjectUsingAIInteraction(this)) await this.ensureAIDescription(undefined, signal) // Ensure AI description is available if needed
-      return [this.exportMetadata(), this.exportGameFiles()]
+      return [this.exportMetadata(), this.exportFiles()]
     })
   }
 
-  async loadXbpFile(file: globalThis.File) {
-    const { metadata, files } = await xbpHelper.load(file)
-    await this.load(metadata, files)
-  }
-
-  async exportXbpFile(signal?: AbortSignal) {
-    const [metadata, files] = await this.export(signal)
-    return await xbpHelper.save(metadata, files, signal)
-  }
-
-  /** Load from cloud */
-  async loadFromCloud(
-    owner: string,
-    name: string,
-    preferPublishedContent: boolean = false,
-    signal?: AbortSignal,
-    reporter?: ProgressReporter
-  ) {
-    const collector = reporter != null ? ProgressCollector.collectorFor(reporter) : null
-    const cloudLoadReporter = collector?.getSubReporter(
-      { en: 'Downloading project info...', zh: '正在下载项目信息...' },
-      1
-    )
-    const projectLoadReporter = collector?.getSubReporter({ en: 'Loading project...', zh: '正在载入项目...' }, 1)
-
-    const { metadata, files } = await cloudHelper.load(owner, name, preferPublishedContent, signal)
-    signal?.throwIfAborted()
-    cloudLoadReporter?.report(1)
-
-    await this.load(metadata, files)
-    signal?.throwIfAborted()
-    projectLoadReporter?.report(1)
-
-    return this as CloudProject
-  }
-
-  async saveToCloud(signal?: AbortSignal) {
-    if (this.isDisposed) throw new Error('disposed')
-    if (isProjectUsingAIInteraction(this)) await this.ensureAIDescription(false, signal) // Ensure AI description is available if needed
-    const [metadata, files] = await this.export(signal)
-    const saved = await cloudHelper.save(metadata, files, signal)
-    this.loadMetadata(saved.metadata)
-  }
-
-  /** Load from local cache */
-  async loadFromLocalCache(key: string) {
-    const cached = await localHelper.load(key)
-    if (cached == null) throw new Error('no project in local cache')
-    const { metadata, files } = cached
-    await this.load(metadata, files)
-  }
-
-  /** Save to local cache */
-  async saveToLocalCache(key: string, signal?: AbortSignal) {
-    if (this.isDisposed) throw new Error('disposed')
-    const [metadata, files] = await this.export(signal)
-    await localHelper.save(key, metadata, files, signal)
-  }
-
   /** Ensure AI description is available */
   async ensureAIDescription(checkForUpdate = false, signal?: AbortSignal) {
     if (this.aiDescription != null && !checkForUpdate) return this.aiDescription
 
-    const files = this.exportGameFiles()
+    const files = this.exportFiles()
     const currentHash = await hashFiles(files, signal)
 
     // Generate or update if necessary
@@ -632,7 +551,7 @@ export class Project extends Disposable {
 
   /** Serialize for AI use */
   private async serializeForAI() {
-    const files = this.exportGameFiles()
+    const files = this.exportFiles()
     let remaining = aiDescriptionMaxContentLength
     let result = ''
     const skippedSections: string[] = []
@@ -794,3 +713,6 @@ function orderBy<T extends Sprite | Sound>(list: T[], order: string[] | undefine
     return order.indexOf(a.id) - order.indexOf(b.id)
   })
 }
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const _p: IProject = new SpxProject() // For type checking only, will not be used at runtime
diff --git a/spx-gui/src/models/sound.test.ts b/spx-gui/src/models/spx/sound.test.ts
similarity index 92%
rename from spx-gui/src/models/sound.test.ts
rename to spx-gui/src/models/spx/sound.test.ts
index 4a270f319..f0afa9a16 100644
--- a/spx-gui/src/models/sound.test.ts
+++ b/spx-gui/src/models/spx/sound.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
-import { fromText } from './common/file'
-import { Project } from './project'
+import { fromText } from '../common/file'
+import { SpxProject } from './project'
 import { Sprite } from './sprite'
 import { Costume } from './costume'
 import { Sound } from './sound'
@@ -11,7 +11,7 @@ function mockFile(name = 'mocked') {
 }
 
 function makeProject() {
-  const project = new Project()
+  const project = new SpxProject()
   const sprite = new Sprite('MySprite')
   const costume = new Costume('default', mockFile())
   sprite.addCostume(costume)
diff --git a/spx-gui/src/models/sound.ts b/spx-gui/src/models/spx/sound.ts
similarity index 97%
rename from spx-gui/src/models/sound.ts
rename to spx-gui/src/models/spx/sound.ts
index 430c12995..7ef24a3b2 100644
--- a/spx-gui/src/models/sound.ts
+++ b/spx-gui/src/models/spx/sound.ts
@@ -2,10 +2,10 @@ import { reactive } from 'vue'
 import { extname, join, resolve } from '@/utils/path'
 import { adaptAudio } from '@/utils/spx'
 import { Disposable } from '@/utils/disposable'
-import { File, fromConfig, type Files, listDirs, toConfig } from './common/file'
+import { File, fromConfig, type Files, listDirs, toConfig } from '../common/file'
 import { getSoundName, validateSoundName } from './common/asset-name'
 import type { AssetMetadata } from './common/asset'
-import type { Project } from './project'
+import type { SpxProject } from './project'
 import { nanoid } from 'nanoid'
 
 export type SoundInits = {
@@ -34,8 +34,8 @@ export type SoundExportLoadOptions = {
 export class Sound extends Disposable {
   id: string
 
-  _project: Project | null = null
-  setProject(project: Project | null) {
+  _project: SpxProject | null = null
+  setProject(project: SpxProject | null) {
     this._project = project
   }
 
diff --git a/spx-gui/src/models/sprite.test.ts b/spx-gui/src/models/spx/sprite.test.ts
similarity index 99%
rename from spx-gui/src/models/sprite.test.ts
rename to spx-gui/src/models/spx/sprite.test.ts
index d962bcd18..895debc55 100644
--- a/spx-gui/src/models/sprite.test.ts
+++ b/spx-gui/src/models/spx/sprite.test.ts
@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest'
 import { Sprite, State } from './sprite'
 import { Animation } from './animation'
 import { Costume } from './costume'
-import { File } from './common/file'
+import { File } from '../common/file'
 
 function makeCostume(name: string) {
   return new Costume(name, new File(`${name}.png`, async () => new ArrayBuffer(0)))
diff --git a/spx-gui/src/models/sprite.ts b/spx-gui/src/models/spx/sprite.ts
similarity index 99%
rename from spx-gui/src/models/sprite.ts
rename to spx-gui/src/models/spx/sprite.ts
index acf6711ad..27d33a0d0 100644
--- a/spx-gui/src/models/sprite.ts
+++ b/spx-gui/src/models/spx/sprite.ts
@@ -7,7 +7,7 @@ import { reactive } from 'vue'
 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'
+import { fromText, type Files, fromConfig, toText, toConfig, listDirs } from '../common/file'
 import {
   ensureValidAnimationName,
   ensureValidCostumeName,
@@ -17,7 +17,7 @@ import {
 import type { AssetMetadata } from './common/asset'
 import { type RawCostumeConfig, Costume, type Pivot as CostumePivot } from './costume'
 import { Animation, type RawAnimationConfig } from './animation'
-import type { Project } from './project'
+import type { SpxProject } from './project'
 import { nanoid } from 'nanoid'
 import type { Sound } from './sound'
 
@@ -150,8 +150,8 @@ export type SpriteExportLoadOptions = {
 export class Sprite extends Disposable {
   id: string
 
-  project: Project | null = null
-  setProject(project: Project | null) {
+  project: SpxProject | null = null
+  setProject(project: SpxProject | null) {
     this.project = project
   }
 
diff --git a/spx-gui/src/models/stage.test.ts b/spx-gui/src/models/spx/stage.test.ts
similarity index 99%
rename from spx-gui/src/models/stage.test.ts
rename to spx-gui/src/models/spx/stage.test.ts
index 2d13fde4c..d658d99bc 100644
--- a/spx-gui/src/models/stage.test.ts
+++ b/spx-gui/src/models/spx/stage.test.ts
@@ -3,7 +3,7 @@ import { describe, it, expect } from 'vitest'
 import { Stage } from './stage'
 import { Monitor } from './widget/monitor'
 import { Backdrop } from './backdrop'
-import { File } from './common/file'
+import { File } from '../common/file'
 
 function makeBackdrop(name: string) {
   return new Backdrop(name, new File(`${name}.png`, async () => new ArrayBuffer(0)))
diff --git a/spx-gui/src/models/stage.ts b/spx-gui/src/models/spx/stage.ts
similarity index 99%
rename from spx-gui/src/models/stage.ts
rename to spx-gui/src/models/spx/stage.ts
index 2308f37cc..14fb5cc11 100644
--- a/spx-gui/src/models/stage.ts
+++ b/spx-gui/src/models/spx/stage.ts
@@ -5,9 +5,9 @@
 
 import { reactive } from 'vue'
 import { filename } from '@/utils/path'
-import { toText, type Files, fromText } from './common/file'
+import { toText, type Files, fromText } from '../common/file'
 import { ensureValidBackdropName, ensureValidWidgetName } from './common/asset-name'
-import type { Size } from './common'
+import type { Size } from '../common'
 import { Backdrop, type RawBackdropConfig } from './backdrop'
 import { type RawWidgetConfig, type Widget, loadWidget } from './widget'
 import { Disposable } from '@/utils/disposable'
diff --git a/spx-gui/src/models/tilemap.test.ts b/spx-gui/src/models/spx/tilemap.test.ts
similarity index 98%
rename from spx-gui/src/models/tilemap.test.ts
rename to spx-gui/src/models/spx/tilemap.test.ts
index ac2eab317..c61737c19 100644
--- a/spx-gui/src/models/tilemap.test.ts
+++ b/spx-gui/src/models/spx/tilemap.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest'
 import { Tilemap, type Coord, type RawTilemapConfig, type RawTileSourceConfig } from './tilemap'
-import { File, fromConfig, toConfig, type Files } from './common/file'
+import { File, fromConfig, toConfig, type Files } from '../common/file'
 import { join } from '@/utils/path'
 
 function markSource(id: number, path: string, coord: Coord, collisionPoints?: Coord[]) {
diff --git a/spx-gui/src/models/tilemap.ts b/spx-gui/src/models/spx/tilemap.ts
similarity index 99%
rename from spx-gui/src/models/tilemap.ts
rename to spx-gui/src/models/spx/tilemap.ts
index 39f81701a..04e7a7f35 100644
--- a/spx-gui/src/models/tilemap.ts
+++ b/spx-gui/src/models/spx/tilemap.ts
@@ -2,8 +2,8 @@ import { markRaw } from 'vue'
 import { resolve } from '@/utils/path'
 import { Disposable } from '@/utils/disposable'
 
-import { File, fromConfig, listAllFiles, toConfig, type Files } from './common/file'
-import type { Size } from './common'
+import { File, fromConfig, listAllFiles, toConfig, type Files } from '../common/file'
+import type { Size } from '../common'
 import { CollisionShapeType, type CollisionPivot, type CollisionShapeParams } from './sprite'
 
 export type Coord = { x: number; y: number }
diff --git a/spx-gui/src/models/widget/index.ts b/spx-gui/src/models/spx/widget/index.ts
similarity index 100%
rename from spx-gui/src/models/widget/index.ts
rename to spx-gui/src/models/spx/widget/index.ts
diff --git a/spx-gui/src/models/widget/monitor.ts b/spx-gui/src/models/spx/widget/monitor.ts
similarity index 100%
rename from spx-gui/src/models/widget/monitor.ts
rename to spx-gui/src/models/spx/widget/monitor.ts
diff --git a/spx-gui/src/models/widget/widget.test.ts b/spx-gui/src/models/spx/widget/widget.test.ts
similarity index 96%
rename from spx-gui/src/models/widget/widget.test.ts
rename to spx-gui/src/models/spx/widget/widget.test.ts
index 1f4c311c3..01577d204 100644
--- a/spx-gui/src/models/widget/widget.test.ts
+++ b/spx-gui/src/models/spx/widget/widget.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { fromText } from '../common/file'
+import { fromText } from '../../common/file'
 import { Stage } from '../stage'
 import { Backdrop } from '../backdrop'
 import { Monitor } from './monitor'
diff --git a/spx-gui/src/models/widget/widget.ts b/spx-gui/src/models/spx/widget/widget.ts
similarity index 100%
rename from spx-gui/src/models/widget/widget.ts
rename to spx-gui/src/models/spx/widget/widget.ts
diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
index b05b373f5..f41b6cef3 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/pages/community/project.vue
@@ -11,7 +11,7 @@ import { usePageTitle } from '@/utils/utils'
 import { ownerAll, recordProjectView, stringifyProjectFullName, stringifyRemixSource, Visibility } from '@/apis/project'
 import { listProject } from '@/apis/project'
 import { listReleases } from '@/apis/project-release'
-import { Project } from '@/models/project'
+import { SpxProject, type CloudProject } from '@/models/spx/project'
 import { useUser, isSignedIn, getSignedInUsername, initiateSignIn } from '@/stores/user'
 import { getOwnProjectEditorRoute, getProjectEditorRoute, getUserPageRoute } from '@/router'
 import {
@@ -39,6 +39,7 @@ import CommunityCard from '@/components/community/CommunityCard.vue'
 import ReleaseHistory from '@/components/community/project/ReleaseHistory.vue'
 import TextView from '@/components/community/TextView.vue'
 import kikoWaveSvg from './kiko-wave.svg?raw'
+import { useAppCtx } from '@/components/common/app-context'
 
 const props = defineProps<{
   owner: string
@@ -46,6 +47,7 @@ const props = defineProps<{
 }>()
 
 const router = useRouter()
+const { cloudHelpers } = useAppCtx()
 
 const {
   data: project,
@@ -54,10 +56,10 @@ const {
   refetch: reloadProject
 } = useQuery(
   async (ctx) => {
-    const p = new Project()
+    const p = new SpxProject(props.owner, props.name)
     ;(window as any).project = p // for debug purpose, TODO: remove me
-    const loaded = await p.loadFromCloud(props.owner, props.name, true, ctx.signal)
-    return loaded
+    await cloudHelpers.load(p, true, ctx.signal)
+    return p as CloudProject
   },
   {
     en: 'Failed to load project',
@@ -199,7 +201,10 @@ const handleLike = useMessageHandle(
   async () => {
     await ensureSignedIn()
     await likeProject(props.owner, props.name)
-    await project.value?.loadFromCloud(props.owner, props.name, true) // refresh project info (likeCount)
+    if (project.value != null) {
+      // refresh project info (likeCount)
+      await cloudHelpers.load(project.value, true)
+    }
   },
   { en: 'Failed to like', zh: '标记喜欢失败' }
 )
@@ -209,7 +214,10 @@ const handleUnlike = useMessageHandle(
   async () => {
     await ensureSignedIn()
     await unlikeProject(props.owner, props.name)
-    await project.value?.loadFromCloud(props.owner, props.name, true) // refresh project info (likeCount)
+    if (project.value != null) {
+      // refresh project info (likeCount)
+      await cloudHelpers.load(project.value, true)
+    }
   },
   { en: 'Failed to unlike', zh: '取消喜欢失败' }
 )
diff --git a/spx-gui/src/pages/editor/index.vue b/spx-gui/src/pages/editor/index.vue
index 506e4bbbb..48468e88b 100644
--- a/spx-gui/src/pages/editor/index.vue
+++ b/spx-gui/src/pages/editor/index.vue
@@ -17,17 +17,33 @@
   </section>
 </template>
 
+<script lang="ts">
+const LOCAL_CACHE_KEY = 'XBUILDER_CACHED_PROJECT'
+
+class LocalCache implements ILocalCache {
+  constructor(private helpers: LocalHelpers) {}
+  load(project: IProject) {
+    return this.helpers.load(project, LOCAL_CACHE_KEY)
+  }
+  save(project: IProject, signal?: AbortSignal) {
+    return this.helpers.save(project, LOCAL_CACHE_KEY, signal)
+  }
+  clear() {
+    return this.helpers.clear(LOCAL_CACHE_KEY)
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { onMounted, onUnmounted, computed } from 'vue'
 import { onBeforeRouteLeave, useRouter } from 'vue-router'
 import { getSignedInUsername } from '@/stores/user'
-import { Project } from '@/models/project'
+import { SpxProject } from '@/models/spx/project'
 import { getProjectEditorRoute } from '@/router'
 import { Cancelled } from '@/utils/exception'
 import { ProgressCollector, ProgressReporter } from '@/utils/progress'
 import { useRegisterUpdateRouteLoaded } from '@/utils/route-loading'
 import { composeQuery, useQuery } from '@/utils/query'
-import { clear } from '@/models/common/local'
 import { UIDetailedLoading, UIError, useConfirmDialogWithResult, useMessage } from '@/components/ui'
 import { useI18n, type LocaleMessage } from '@/utils/i18n'
 import { useNetwork } from '@/utils/network'
@@ -38,8 +54,11 @@ import ProjectEditor from '@/components/editor/ProjectEditor.vue'
 import { useProvideCodeEditorCtx } from '@/components/editor/code-editor/context'
 import { usePublishProject } from '@/components/project'
 import { useAgentCopilotCtx } from '@/components/agent-copilot/CopilotProvider.vue'
-import { EditingMode } from '@/components/editor/editing'
+import { EditingMode, type ILocalCache } from '@/components/editor/editing'
 import { EditorState } from '@/components/editor/editor-state'
+import { useAppCtx } from '@/components/common/app-context'
+import type { IProject } from '@/models/project'
+import type { LocalHelpers } from '@/models/common/local'
 
 const props = defineProps<{
   ownerName: string
@@ -51,7 +70,8 @@ usePageTitle(() => ({
   zh: `编辑 ${props.projectName}`
 }))
 
-const LOCAL_CACHE_KEY = 'XBUILDER_CACHED_PROJECT'
+const { localHelpers, cloudHelpers } = useAppCtx()
+const localCache = new LocalCache(localHelpers)
 
 const signedInUsername = computed(() => getSignedInUsername())
 const copilotCtx = useAgentCopilotCtx()
@@ -94,9 +114,10 @@ const projectQueryRet = useQuery(
 const project = projectQueryRet.data
 
 const stateQueryRet = useQuery(async (ctx) => {
+  const username = signedInUsername.value
   const project = await composeQuery(ctx, projectQueryRet)
   ctx.signal.throwIfAborted()
-  const state = new EditorState(project, isOnline, signedInUsername, LOCAL_CACHE_KEY)
+  const state = new EditorState(project, isOnline, username, cloudHelpers, localCache)
   state.disposeOnSignal(ctx.signal)
   state.syncWithRouter(router)
   state.editing.start()
@@ -149,15 +170,15 @@ async function loadProject(ownerName: string, projectName: string, signal: Abort
     10
   )
 
-  let localProject: Project | null
+  let localProject: SpxProject | null
   try {
-    localProject = new Project()
+    localProject = new SpxProject()
     localProject.disposeOnSignal(signal)
-    await localProject.loadFromLocalCache(LOCAL_CACHE_KEY)
+    await localCache.load(localProject)
   } catch (e) {
     console.warn('Failed to load project from local cache', e)
     localProject = null
-    await clear(LOCAL_CACHE_KEY)
+    await localCache.clear()
   }
   signal.throwIfAborted()
   loadFromLocalCacheReporter.report(1)
@@ -167,7 +188,7 @@ async function loadProject(ownerName: string, projectName: string, signal: Abort
   // Local Cache Saving & Restoring
   if (localProject != null && localProject.owner !== ownerName) {
     // Case 4: Different user: Discard local cache
-    await clear(LOCAL_CACHE_KEY)
+    await localCache.clear()
     localProject = null
   }
 
@@ -175,7 +196,7 @@ async function loadProject(ownerName: string, projectName: string, signal: Abort
     const stillOpenTarget = await confirmOpenTargetWithAnotherInCache(projectName, localProject.name!)
     signal.throwIfAborted()
     if (stillOpenTarget) {
-      await clear(LOCAL_CACHE_KEY)
+      await localCache.clear()
       localProject = null
     } else {
       openProject(localProject.owner!, localProject.name!)
@@ -183,11 +204,11 @@ async function loadProject(ownerName: string, projectName: string, signal: Abort
     }
   }
 
-  let newProject = new Project()
+  let newProject = new SpxProject(ownerName, projectName)
   newProject.disposeOnSignal(signal)
   // For projects not owned by the signed-in user, we prefer to load the published version.
   const preferPublishedContent = signedInUsername.value !== ownerName
-  await newProject.loadFromCloud(ownerName, projectName, preferPublishedContent, signal, loadFromCloudReporter)
+  await cloudHelpers.load(newProject, preferPublishedContent, signal, loadFromCloudReporter)
 
   // If there is no newer cloud version, use local version without confirmation.
   // If there is a newer cloud version, use cloud version without confirmation.
@@ -196,7 +217,7 @@ async function loadProject(ownerName: string, projectName: string, signal: Abort
     if (newProject.version <= localProject.version) {
       newProject = localProject
     } else {
-      await clear(LOCAL_CACHE_KEY)
+      await localCache.clear()
     }
   }
 
diff --git a/spx-gui/src/utils/project.ts b/spx-gui/src/utils/project.ts
index 7677ed20b..171367dde 100644
--- a/spx-gui/src/utils/project.ts
+++ b/spx-gui/src/utils/project.ts
@@ -1,10 +1,10 @@
-import type { Project } from '@/models/project'
+import type { SpxProject } from '@/models/spx/project'
 
 /** Pattern to detect AI Interaction usage in code */
 const aiPlayerPattern = /\sai\.Player/
 
 /** Check if project is using AI Interaction features */
-export function isProjectUsingAIInteraction(project: Project): boolean {
+export function isProjectUsingAIInteraction(project: SpxProject): boolean {
   // Check stage code
   if (project.stage.code && aiPlayerPattern.test(project.stage.code)) {
     return true
@@ -21,7 +21,7 @@ export function isProjectUsingAIInteraction(project: Project): boolean {
 }
 
 /** Check if sign-in is required for running the project */
-export function isSignInRequiredForProject(project: Project): boolean {
+export function isSignInRequiredForProject(project: SpxProject): boolean {
   // AI Interaction features require sign-in
   if (isProjectUsingAIInteraction(project)) {
     return true
diff --git a/spx-gui/src/widgets/spx-runner/SpxRunner.ce.vue b/spx-gui/src/widgets/spx-runner/SpxRunner.ce.vue
index bd3453002..654e85571 100644
--- a/spx-gui/src/widgets/spx-runner/SpxRunner.ce.vue
+++ b/spx-gui/src/widgets/spx-runner/SpxRunner.ce.vue
@@ -31,14 +31,17 @@
 <script setup lang="ts">
 import ProjectRunner from '@/components/project/runner/ProjectRunner.vue'
 import { ref, watch } from 'vue'
-import { Project, fullName } from '@/models/project'
+import { SpxProject, fullName } from '@/models/spx/project'
 import { shallowRef } from 'vue'
+import { useAppCtx } from '@/components/common/app-context'
 const props = defineProps<{ owner?: string; name?: string }>()
 const runner = ref()
 const run = ref(false)
 const ready = ref(false)
 const errorMsg = ref('')
-const project = shallowRef(new Project())
+const project = shallowRef(new SpxProject())
+// TODO: ensure app context is available here
+const { cloudHelpers } = useAppCtx()
 watch(
   () => [props.owner, props.name],
   async ([owner, name]) => {
@@ -46,8 +49,8 @@ watch(
       ready.value = false
       errorMsg.value = ''
       try {
-        const newProject = new Project()
-        await newProject.loadFromCloud(owner, name, true)
+        const newProject = new SpxProject(owner, name)
+        await cloudHelpers.load(newProject, true)
         project.value.dispose()
         project.value = newProject
         ready.value = true