From 7f4ad228387f267bd550f0bf9d063e833bafdf19 Mon Sep 17 00:00:00 2001
From: nighca <nighca@live.cn>
Date: Tue, 10 Feb 2026 15:00:47 +0800
Subject: [PATCH 1/3] Project interface extraction

---
 spx-gui/src/apis/aigc.ts                      |   3 +-
 .../agent-copilot/CopilotProvider.vue         |   7 +-
 .../asset/animation/GroupCostumesModal.vue    |   6 +-
 .../asset/gen/animation/AnimationGenItem.vue  |   2 +-
 .../gen/animation/AnimationGenPreview.vue     |   2 +-
 .../gen/animation/AnimationSettingsInput.vue  |   2 +-
 .../gen/animation/AnimationVideoPreview.vue   |   2 +-
 .../asset/gen/backdrop/BackdropGen.vue        |   4 +-
 .../asset/gen/backdrop/BackdropGenItem.vue    |   2 +-
 .../gen/backdrop/BackdropSettingsInput.vue    |   2 +-
 .../asset/gen/common/GenStateFailed.vue       |   2 +-
 .../asset/gen/common/ImageSelector.vue        |   2 +-
 .../gen/common/ReferenceCostumeInput.vue      |   2 +-
 .../asset/gen/costume/CostumeGenItem.vue      |   2 +-
 .../asset/gen/costume/CostumeGenPreview.vue   |   2 +-
 .../gen/costume/CostumeSettingsInput.vue      |   2 +-
 .../components/asset/gen/sprite/SpriteGen.vue |   4 +-
 .../asset/gen/sprite/SpriteGenItem.vue        |   2 +-
 .../asset/gen/sprite/SpriteGenModal.vue       |   4 +-
 .../gen/sprite/SpriteGenPhaseContent.vue      |   8 +-
 .../gen/sprite/SpriteGenPhaseSettings.vue     |   2 +-
 .../asset/gen/sprite/SpriteSettingsInput.vue  |   2 +-
 spx-gui/src/components/asset/index.ts         |  76 ++++----
 .../asset/library/AssetLibraryModal.vue       |  25 ++-
 .../asset/library/AssetSaveModal.vue          |  12 +-
 .../components/asset/library/BackdropItem.vue |   2 +-
 .../asset/library/BackdropPreview.vue         |   4 +-
 .../components/asset/library/SoundItem.vue    |   2 +-
 .../components/asset/library/SoundPreview.vue |   4 +-
 .../components/asset/library/SpriteItem.vue   |   2 +-
 .../asset/library/SpritePreview.vue           |   4 +-
 .../library/management/AssetEditModal.vue     |   2 +-
 .../asset/library/management/BackdropItem.vue |   2 +-
 .../asset/library/management/SoundItem.vue    |   2 +-
 .../asset/library/management/SpriteItem.vue   |   2 +-
 .../asset/preprocessing/PreprocessModal.vue   |   2 +-
 .../remove-background/RemoveBackground.vue    |   2 +-
 .../asset/scratch/LoadFromScratch.vue         |  20 +-
 .../asset/scratch/LoadFromScratchModal.vue    |   6 +-
 .../components/asset/scratch/SpriteItem.vue   |   4 +-
 .../components/common/CostumesAutoPlayer.vue  |   2 +-
 .../src/components/common/CostumesPlayer.vue  |   2 +-
 .../src/components/copilot/CopilotRoot.vue    |  13 +-
 .../copilot/custom-elements/CodeBlock.vue     |   2 +-
 .../copilot/custom-elements/CodeChange.vue    |   2 +-
 .../editor/EditorContextProvider.vue          |   6 +-
 .../src/components/editor/ProjectEditor.vue   |   9 +-
 .../editor/code-editor/FormatButton.vue       |   2 +-
 .../editor/code-editor/code-editor.ts         |  14 +-
 .../components/editor/code-editor/common.ts   |  22 +--
 .../components/editor/code-editor/context.ts  |   6 +-
 .../editor/code-editor/lsp/index.ts           |   6 +-
 .../editor/code-editor/text-document.ts       |  28 +--
 .../editor/code-editor/ui/CodeEditorUI.vue    |  14 +-
 .../editor/code-editor/ui/code-editor-ui.ts   |   4 +-
 .../code-editor/ui/diagnostics/index.ts       |   2 +-
 .../ui/document-tab/DocumentTab.vue           |   4 +-
 .../editor/code-editor/ui/inlay-hint/index.ts |   2 +-
 .../ui/input-helper/InputHelper.vue           |   2 +-
 .../code-editor/ui/input-helper/index.ts      |   2 +-
 .../ui/resource-reference/index.ts            |   2 +-
 .../code-editor/ui/resource/ResourceItem.vue  |  14 +-
 .../ui/resource/resource-selector.ts          |  34 ++--
 .../editor/code-editor/ui/snippet.ts          |   8 +-
 .../components/editor/common/EditorList.vue   |   2 +-
 .../common/config/sprite/SpriteDirection.vue  |  11 +-
 .../common/config/sprite/SpritePhysics.vue    |  11 +-
 .../config/sprite/SpritePositionSize.vue      |  11 +-
 .../common/config/sprite/SpriteVisible.vue    |  11 +-
 .../components/editor/common/config/utils.ts  |  10 +-
 .../SaveAssetToLibraryMenuItem.vue            |   8 +-
 .../editor/common/viewer/DecoratorNode.vue    |   2 +-
 .../editor/common/viewer/NodeTransformer.vue  |   4 +-
 .../editor/common/viewer/SpriteNode.vue       |   6 +-
 .../components/editor/common/viewer/common.ts |   4 +-
 .../viewer/quick-config/SpriteQuickConfig.vue |   6 +-
 .../viewer/quick-config/WidgetQuickConfig.vue |   4 +-
 .../sprite/DefaultConfigPanel.vue             |  11 +-
 .../sprite/HeadingConfigPanel.vue             |   2 +-
 .../common/viewer/quick-config/utils.ts       |  18 +-
 .../widget/DefaultConfigPanel.vue             |   9 +-
 spx-gui/src/components/editor/editing.test.ts | 173 +++++++++---------
 spx-gui/src/components/editor/editing.ts      |  83 +++++----
 .../components/editor/editor-state.test.ts    |  51 +++---
 spx-gui/src/components/editor/editor-state.ts |  79 ++++++--
 .../editor}/history.test.ts                   |  10 +-
 .../project => components/editor}/history.ts  |  16 +-
 .../editor/map-editor/MapBasicConfig.vue      |   4 +-
 .../editor/map-editor/MapEditor.vue           |   6 +-
 .../editor/map-editor/MapLayerSortInput.vue   |  11 +-
 .../editor/map-editor/MapPhysicsInput.vue     |  11 +-
 .../editor/map-editor/MapSizeInput.vue        |  15 +-
 .../editor/map-editor/SpriteBasicConfig.vue   |   6 +-
 .../editor/map-editor/SpritesPanel.vue        |   6 +-
 .../map-editor/map-viewer/MapViewer.vue       |  13 +-
 .../components/editor/navbar/EditorNavbar.vue |  28 +--
 .../editor/panels/sound/SoundSummaryItem.vue  |   2 +-
 .../editor/panels/sound/SoundsPanel.vue       |   4 +-
 .../panels/sprite/SpriteSummaryItem.vue       |   2 +-
 .../preview/stage-viewer/StageViewer.vue      |   8 +-
 spx-gui/src/components/editor/runtime.ts      |   6 +-
 .../components/editor/sound/SoundEditor.vue   |   4 +-
 .../src/components/editor/sound/SoundItem.vue |   6 +-
 .../components/editor/sound/SoundRecorder.vue |  11 +-
 .../editor/sound/SoundRecorderModal.vue       |   6 +-
 .../editor/sprite/AnimationDetail.vue         |   2 +-
 .../editor/sprite/AnimationEditor.vue         |   4 +-
 .../editor/sprite/AnimationItem.vue           |   4 +-
 .../editor/sprite/AnimationRemoveModal.vue    |  11 +-
 .../editor/sprite/CheckableCostumeItem.vue    |   2 +-
 .../editor/sprite/CostumeDetail.vue           |   2 +-
 .../components/editor/sprite/CostumeItem.vue  |   8 +-
 .../editor/sprite/CostumesEditor.vue          |  10 +-
 .../editor/sprite/SpriteCollisionEditor.vue   |  13 +-
 .../sprite/SpriteCollisionEditorModal.vue     |   6 +-
 .../components/editor/sprite/SpriteEditor.vue |   6 +-
 .../components/editor/sprite/SpriteItem.vue   |  16 +-
 .../components/editor/sprite/SpriteList.vue   |   8 +-
 .../sprite/animation/AnimationPlayer.vue      |   4 +-
 .../sprite/animation/AnimationSettings.vue    |   2 +-
 .../sprite/animation/DurationEditor.vue       |   4 +-
 .../editor/sprite/animation/SoundEditor.vue   |   4 +-
 .../animation/state/BoundStateEditor.vue      |   6 +-
 .../components/editor/stage/StageEditor.vue   |   6 +-
 .../editor/stage/backdrop/BackdropDetail.vue  |   2 +-
 .../editor/stage/backdrop/BackdropItem.vue    |   6 +-
 .../stage/backdrop/BackdropModeSelector.vue   |   4 +-
 .../editor/stage/backdrop/BackdropsEditor.vue |   8 +-
 .../editor/stage/widget/WidgetItem.vue        |   8 +-
 .../editor/stage/widget/WidgetsEditor.vue     |   4 +-
 .../stage/widget/detail/MonitorDetail.vue     |   4 +-
 .../stage/widget/detail/WidgetDetail.vue      |   4 +-
 .../components/editor/stage/widget/icon.ts    |   4 +-
 .../components/project/ProjectCreateModal.vue |  10 +-
 .../project/ProjectPublishModal.vue           |   8 +-
 .../project/ProjectPublishedModal.vue         |   4 +-
 spx-gui/src/components/project/index.ts       |  11 +-
 .../project/runner/ProjectRunner.vue          |   8 +-
 .../project/runner/ProjectRunnerSurface.vue   |   4 +-
 spx-gui/src/models/common/cloud.ts            |  37 +++-
 spx-gui/src/models/common/local.ts            |  22 ++-
 spx-gui/src/models/common/test.ts             |  74 ++++----
 spx-gui/src/models/common/xbp.test.ts         |  18 +-
 spx-gui/src/models/common/xbp.ts              |  16 +-
 spx-gui/src/models/project.ts                 |  49 +++++
 .../src/models/{ => spx}/animation.test.ts    |  10 +-
 spx-gui/src/models/{ => spx}/animation.ts     |   2 +-
 spx-gui/src/models/{ => spx}/backdrop.test.ts |   2 +-
 spx-gui/src/models/{ => spx}/backdrop.ts      |   2 +-
 .../{ => spx}/common/asset-name.test.ts       |  12 +-
 .../src/models/{ => spx}/common/asset-name.ts |   0
 spx-gui/src/models/{ => spx}/common/asset.ts  |   4 +-
 .../models/{ => spx}/common/resource-model.ts |   0
 spx-gui/src/models/spx/common/test.ts         |  34 ++++
 spx-gui/src/models/{ => spx}/costume.test.ts  |   2 +-
 spx-gui/src/models/{ => spx}/costume.ts       |   2 +-
 spx-gui/src/models/{ => spx}/gen/aigc-mock.ts |   2 +-
 .../{ => spx}/gen/animation-gen.test.ts       |  25 +--
 .../src/models/{ => spx}/gen/animation-gen.ts |  10 +-
 .../models/{ => spx}/gen/backdrop-gen.test.ts |  20 +-
 .../src/models/{ => spx}/gen/backdrop-gen.ts  |  10 +-
 .../src/models/{ => spx}/gen/common.test.ts   |   0
 spx-gui/src/models/{ => spx}/gen/common.ts    |   8 +-
 .../models/{ => spx}/gen/costume-gen.test.ts  |  18 +-
 .../src/models/{ => spx}/gen/costume-gen.ts   |  10 +-
 .../models/{ => spx}/gen/sprite-gen.test.ts   |  22 +--
 .../src/models/{ => spx}/gen/sprite-gen.ts    |  14 +-
 .../index.test.ts => spx/project.test.ts}     |  56 +++---
 .../{project/index.ts => spx/project.ts}      | 132 +++----------
 spx-gui/src/models/{ => spx}/sound.test.ts    |   6 +-
 spx-gui/src/models/{ => spx}/sound.ts         |   8 +-
 spx-gui/src/models/{ => spx}/sprite.test.ts   |   2 +-
 spx-gui/src/models/{ => spx}/sprite.ts        |   8 +-
 spx-gui/src/models/{ => spx}/stage.test.ts    |   2 +-
 spx-gui/src/models/{ => spx}/stage.ts         |   4 +-
 spx-gui/src/models/{ => spx}/tilemap.test.ts  |   2 +-
 spx-gui/src/models/{ => spx}/tilemap.ts       |   4 +-
 spx-gui/src/models/{ => spx}/widget/index.ts  |   0
 .../src/models/{ => spx}/widget/monitor.ts    |   0
 .../models/{ => spx}/widget/widget.test.ts    |   2 +-
 spx-gui/src/models/{ => spx}/widget/widget.ts |   0
 spx-gui/src/pages/community/project.vue       |  19 +-
 spx-gui/src/pages/editor/index.vue            |  22 ++-
 spx-gui/src/utils/project.ts                  |   6 +-
 .../src/widgets/spx-runner/SpxRunner.ce.vue   |   9 +-
 185 files changed, 1138 insertions(+), 908 deletions(-)
 rename spx-gui/src/{models/project => components/editor}/history.test.ts (96%)
 rename spx-gui/src/{models/project => components/editor}/history.ts (84%)
 create mode 100644 spx-gui/src/models/project.ts
 rename spx-gui/src/models/{ => spx}/animation.test.ts (96%)
 rename spx-gui/src/models/{ => spx}/animation.ts (99%)
 rename spx-gui/src/models/{ => spx}/backdrop.test.ts (97%)
 rename spx-gui/src/models/{ => spx}/backdrop.ts (98%)
 rename spx-gui/src/models/{ => spx}/common/asset-name.test.ts (91%)
 rename spx-gui/src/models/{ => spx}/common/asset-name.ts (100%)
 rename spx-gui/src/models/{ => spx}/common/asset.ts (97%)
 rename spx-gui/src/models/{ => spx}/common/resource-model.ts (100%)
 create mode 100644 spx-gui/src/models/spx/common/test.ts
 rename spx-gui/src/models/{ => spx}/costume.test.ts (97%)
 rename spx-gui/src/models/{ => spx}/costume.ts (98%)
 rename spx-gui/src/models/{ => spx}/gen/aigc-mock.ts (99%)
 rename spx-gui/src/models/{ => spx}/gen/animation-gen.test.ts (95%)
 rename spx-gui/src/models/{ => spx}/gen/animation-gen.ts (96%)
 rename spx-gui/src/models/{ => spx}/gen/backdrop-gen.test.ts (94%)
 rename spx-gui/src/models/{ => spx}/gen/backdrop-gen.ts (93%)
 rename spx-gui/src/models/{ => spx}/gen/common.test.ts (100%)
 rename spx-gui/src/models/{ => spx}/gen/common.ts (97%)
 rename spx-gui/src/models/{ => spx}/gen/costume-gen.test.ts (94%)
 rename spx-gui/src/models/{ => spx}/gen/costume-gen.ts (95%)
 rename spx-gui/src/models/{ => spx}/gen/sprite-gen.test.ts (96%)
 rename spx-gui/src/models/{ => spx}/gen/sprite-gen.ts (97%)
 rename spx-gui/src/models/{project/index.test.ts => spx/project.test.ts} (83%)
 rename spx-gui/src/models/{project/index.ts => spx/project.ts} (85%)
 rename spx-gui/src/models/{ => spx}/sound.test.ts (92%)
 rename spx-gui/src/models/{ => spx}/sound.ts (97%)
 rename spx-gui/src/models/{ => spx}/sprite.test.ts (99%)
 rename spx-gui/src/models/{ => spx}/sprite.ts (99%)
 rename spx-gui/src/models/{ => spx}/stage.test.ts (99%)
 rename spx-gui/src/models/{ => spx}/stage.ts (99%)
 rename spx-gui/src/models/{ => spx}/tilemap.test.ts (98%)
 rename spx-gui/src/models/{ => spx}/tilemap.ts (99%)
 rename spx-gui/src/models/{ => spx}/widget/index.ts (100%)
 rename spx-gui/src/models/{ => spx}/widget/monitor.ts (100%)
 rename spx-gui/src/models/{ => spx}/widget/widget.test.ts (96%)
 rename spx-gui/src/models/{ => spx}/widget/widget.ts (100%)

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..fb26109e6 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 { CloudHelper } from '@/models/common/cloud'
 
 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'
@@ -200,11 +201,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 new CloudHelper().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/copilot/CopilotRoot.vue b/spx-gui/src/components/copilot/CopilotRoot.vue
index 4a02a13d6..031f054da 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,7 @@ 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 { CloudHelper } from '@/models/common/cloud'
 
 const copilotInjectionKey: InjectionKey<Copilot> = Symbol('copilot')
 
@@ -66,7 +67,7 @@ const listProjectsTool: ToolDefinition = {
 class Retriever {
   constructor(private editorCtxRef: ComputedRef<EditorCtx | undefined>) {}
 
-  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 +77,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 new CloudHelper().load(p, true, signal)
     return p
   }
 }
@@ -100,7 +101,7 @@ class GetProjectMetadataTool implements ToolDefinition {
   }
 }
 
-function getProjectContent(project: Project) {
+function getProjectContent(project: SpxProject) {
   const physics = project.stage.physics
   return `\
 ### Sprites (num: ${project.sprites.length})
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..6938fee8d 100644
--- a/spx-gui/src/components/editor/ProjectEditor.vue
+++ b/spx-gui/src/components/editor/ProjectEditor.vue
@@ -55,12 +55,13 @@ 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 { CloudHelper } from '@/models/common/cloud'
 
 const editorCtx = useEditorCtx()
 const copilotCtx = useAgentCopilotCtx()
@@ -111,7 +112,7 @@ async function addSpriteFromCanvas(args: AddSpriteFromCanvaOptions) {
   project.value.addSprite(sprite)
   await sprite.autoFit()
   editorCtx.state.selectSprite(sprite.id)
-  project.value.saveToCloud()
+  new CloudHelper().save(project.value)
   return {
     success: true,
     message: `Successfully added sprite "${args.spriteName}" to project "${project.value.name}"`
@@ -122,7 +123,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()
+  new CloudHelper().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..5180d4956 100644
--- a/spx-gui/src/components/editor/editing.test.ts
+++ b/spx-gui/src/components/editor/editing.test.ts
@@ -1,60 +1,61 @@
-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'
-
-function mockFile(name = 'mocked') {
-  return fromText(name, Math.random() + '')
-}
+import { type Files } from '@/models/common/file'
+import type { CloudHelper } from '@/models/common/cloud'
+import { mockFile, SimpleProject } from '@/models/common/test'
+import type { IProject } from '@/models/project'
+import { Editing, SavingState, EditingMode, type ILocalCacheHelper } from './editing'
 
 function mockFiles() {
-  return shallowReactive({
+  return {
     'file1.txt': mockFile('file1.txt'),
     'file2.txt': mockFile('file2.txt'),
     'file3.txt': mockFile('file3.txt')
-  })
+  }
 }
 
 function mockProject({
-  files,
-  ...extra
-}: Partial<{
+  files = mockFiles(),
+  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 mockCloudHelper(): CloudHelper {
   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 mockLocalCacheHelper(): ILocalCacheHelper {
   return {
+    save: vi.fn().mockResolvedValue(undefined),
     clear: vi.fn().mockResolvedValue(undefined)
   }
 }
 
 function makeEditing({
   project = mockProject({}),
+  mode = EditingMode.AutoSave,
   isOnline = () => true,
-  signedInUsername: username = () => 'user',
-  localCacheKey = 'LOCAL_CACHE_KEY',
-  localStorage = mockLocalStorage()
+  cloudHelper = mockCloudHelper(),
+  localCacheHelper = mockLocalCacheHelper()
 }: Partial<{
-  project: EditableProject
+  project: IProject
+  mode: EditingMode
   isOnline: WatchSource<boolean>
-  signedInUsername: WatchSource<string | null>
-  localCacheKey: string
-  localStorage: LocalStorage
+  cloudHelper: CloudHelper
+  localCacheHelper: ILocalCacheHelper
 }>) {
-  return new Editing(project, isOnline, username, localCacheKey, localStorage)
+  return new Editing(mode, project, cloudHelper, localCacheHelper, isOnline)
 }
 
 describe('Editing', () => {
@@ -71,121 +72,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 = mockCloudHelper()
+    vi.mocked(cloudHelper.save).mockImplementation((project: IProject, signal?: AbortSignal) => timeout(500, signal))
+    const localCacheHelper = mockLocalCacheHelper()
+    vi.mocked(localCacheHelper.save).mockImplementation((project: IProject, signal?: AbortSignal) =>
+      timeout(100, signal)
+    )
+    const project = mockProject()
+    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 = mockProject()
+    const cloudHelper = mockCloudHelper()
+    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 = mockProject()
+    const cloudHelper = mockCloudHelper()
+    const localCacheHelper = mockLocalCacheHelper()
+    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 = mockProject()
+    const cloudHelper = mockCloudHelper()
+    const localCacheHelper = mockLocalCacheHelper()
+    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 = mockProject({ owner: 'project-owner' })
+    const cloudHelper = mockCloudHelper()
+    const localCacheHelper = mockLocalCacheHelper()
     const editing = makeEditing({
       project,
-      signedInUsername: () => 'different-user' // Different user from project owner
+      mode: EditingMode.EffectFree,
+      localCacheHelper,
+      cloudHelper
     })
     editing.start()
 
@@ -194,7 +196,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 +206,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 = mockProject()
+    const cloudHelper = mockCloudHelper()
+    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 = mockLocalCacheHelper()
+    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 +233,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 +249,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..9f18c06d7 100644
--- a/spx-gui/src/components/editor/editing.ts
+++ b/spx-gui/src/components/editor/editing.ts
@@ -1,19 +1,15 @@
-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 { LocalHelper } from '@/models/common/local'
+import type { IProject } from '@/models/project'
+import type { CloudHelper } from '@/models/common/cloud'
+import { History } from './history'
+
+export interface ILocalCacheHelper {
+  save(project: IProject, signal?: AbortSignal): Promise<void>
+  clear(): Promise<void>
 }
 
 export enum SavingState {
@@ -30,10 +26,10 @@ export class Saving {
   }
 
   constructor(
-    private project: EditableProject,
-    private localStorage: LocalStorage,
+    private project: IProject,
+    private cloudHelper: CloudHelper,
+    private localCacheHelper: ILocalCacheHelper,
     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')
@@ -89,32 +85,49 @@ export enum EditingMode {
   EffectFree
 }
 
+export class LocalCacheHelper implements ILocalCacheHelper {
+  constructor(
+    private localHelper: LocalHelper,
+    private cacheKey: string
+  ) {}
+  async save(project: IProject, signal?: AbortSignal) {
+    await this.localHelper.save(project, this.cacheKey, signal)
+  }
+  async clear() {
+    await this.localHelper.clear(this.cacheKey)
+  }
+}
+
 // 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: CloudHelper,
+    private localCacheHelper: ILocalCacheHelper,
+    private isOnline: WatchSource<boolean>
+    // private signedInUsername: WatchSource<string | null>
   ) {
     super()
+    this.history = new History(project)
   }
 
-  get mode(): EditingMode {
-    const username = toValue(this.signedInUsername)
-    if (username == null || username !== this.project.owner) {
-      return EditingMode.EffectFree
-    }
-    return EditingMode.AutoSave
-  }
+  // get mode(): EditingMode {
+  //   const username = toValue(this.signedInUsername)
+  //   if (username == null || username !== this.project.owner) {
+  //     return EditingMode.EffectFree
+  //   }
+  //   return EditingMode.AutoSave
+  // }
 
   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 +147,7 @@ export class Editing extends Disposable {
   private startDirtyMonitoring() {
     this.addDisposer(
       watch(
-        () => this.project.exportGameFiles(),
+        () => this.project.exportFiles(),
         () => (this.dirtyRef.value = true)
       )
     )
@@ -159,12 +172,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..646be98c0 100644
--- a/spx-gui/src/components/editor/editor-state.test.ts
+++ b/spx-gui/src/components/editor/editor-state.test.ts
@@ -1,36 +1,41 @@
 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 { CloudHelper } from '@/models/common/cloud'
+import { mockFile } from '@/models/common/test'
 
-function mockFile(name = 'mocked') {
-  return fromText(name, Math.random() + '')
+function mockCloudHelper(): CloudHelper {
+  return {
+    load: vi.fn().mockResolvedValue(undefined),
+    save: vi.fn().mockResolvedValue(undefined)
+  }
 }
 
-function mockLocalStorage(): editing.LocalStorage {
+function mockLocalCacheHelper(): editing.ILocalCacheHelper {
   return {
+    save: vi.fn().mockResolvedValue(undefined),
     clear: vi.fn().mockResolvedValue(undefined)
   }
 }
 
-function createEmptyProject(): Project {
-  const project = new Project()
+function createEmptyProject(): SpxProject {
+  const project = new SpxProject()
   project.bindScreenshotTaker(async () => mockFile())
   return project
 }
 
-function createProjectWithResources(): Project {
-  const project = new Project()
+function createProjectWithResources(): SpxProject {
+  const project = new SpxProject()
 
   // Add sounds
   const sound1 = new Sound('sound1', mockFile())
@@ -101,13 +106,13 @@ function mockRouter() {
 }
 
 function createEditorState(
-  project: Project = createEmptyProject(),
+  project: SpxProject = createEmptyProject(),
   isOnline: WatchSource<boolean> = ref(true),
-  signedInUsername: WatchSource<string | null> = ref('user'),
-  localCacheKey: string = 'test-cache-key',
-  localStorage: editing.LocalStorage = mockLocalStorage()
+  signedInUsername: string | null = 'user',
+  cloudHelper: CloudHelper = mockCloudHelper(),
+  localCacheHelper: editing.ILocalCacheHelper = mockLocalCacheHelper()
 ): EditorState {
-  return new EditorState(project, isOnline, signedInUsername, localCacheKey, localStorage)
+  return new EditorState(project, isOnline, signedInUsername, cloudHelper, localCacheHelper)
 }
 
 describe('EditorState', () => {
@@ -257,19 +262,19 @@ describe('EditorState', () => {
       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()
diff --git a/spx-gui/src/components/editor/editor-state.ts b/spx-gui/src/components/editor/editor-state.ts
index e2028349b..18bfe3c86 100644
--- a/spx-gui/src/components/editor/editor-state.ts
+++ b/spx-gui/src/components/editor/editor-state.ts
@@ -2,23 +2,25 @@ 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 { CloudHelper } 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'
 
 type GenCollapsePos = { x: number; y: number }
 type CollapsePosProvider<T extends AssetType> = (gen: AssetGenModel<T>) => Promise<GenCollapsePos | null>
@@ -50,18 +52,56 @@ export enum EditMode {
   Map = 'map'
 }
 
+// class ProjectWithGens implements IProject {
+//   constructor(private project: IProject) {}
+//   get transactionMutex() {
+//     return this.project.transactionMutex
+//   }
+//   get owner() {
+//     return this.project.owner
+//   }
+//   get name() {
+//     return this.project.name
+//   }
+//   loadMetadata(metadata: Metadata) {
+//     return this.project.loadMetadata(metadata)
+//   }
+//   exportFiles() {
+//     const files = this.project.exportFiles()
+//     // TODO: Include gen files
+//     return files
+//   }
+//   loadFiles(files: Files, signal?: AbortSignal): Promise<void> {
+//     return this.project.loadFiles(files, signal)
+//   }
+//   async load(metadata: Metadata, files: Files, signal?: AbortSignal) {
+//     await this.project.load(metadata, files, signal)
+//     // 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: Project,
+    private project: SpxProject,
     isOnline: WatchSource<boolean>,
-    signedInUsername: WatchSource<string | null>,
-    localCacheKey: string,
-    localStorage?: editing.LocalStorage
+    signedInUsername: string | null,
+    cloudHelper: CloudHelper,
+    localCacheHelper: editing.ILocalCacheHelper
   ) {
     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(project, isOnline, signedInUsername, localCacheKey, localStorage))
+      (this.editing = new editing.Editing(editingMode, project, cloudHelper, localCacheHelper, isOnline))
     )
     this.addDisposable((this.stageState = new StageEditorState(() => project.stage)))
 
@@ -85,6 +125,9 @@ export class EditorState extends Disposable {
 
   runtime: Runtime
   editing: editing.Editing
+  get history() {
+    return this.editing.history
+  }
   stageState: StageEditorState
   spriteState: SpriteEditorState | 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..6940bb873 100644
--- a/spx-gui/src/components/editor/navbar/EditorNavbar.vue
+++ b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
@@ -163,7 +163,8 @@ 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 { XbpHelper } from '@/models/common/xbp'
+import { type SpxProject } from '@/models/spx/project'
 import { getSignedInUsername, useUser } from '@/stores/user'
 import { Visibility } from '@/apis/common'
 import { getProjectPageRoute } from '@/router'
@@ -193,7 +194,7 @@ 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
 }>()
 
@@ -223,11 +224,15 @@ const ownerInfoToDisplay = computed(() => {
   return null
 })
 
+const xbpHelper = new XbpHelper()
+
 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, () => xbpHelper.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()),
+      xbpHelper.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, () => xbpHelper.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..2ee454ff3 100644
--- a/spx-gui/src/components/project/ProjectCreateModal.vue
+++ b/spx-gui/src/components/project/ProjectCreateModal.vue
@@ -54,8 +54,10 @@ 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 { XbpHelper } from '@/models/common/xbp'
+import { SpxProject } from '@/models/spx/project'
 import { getDefaultProjectFile } from '@/components/project'
+import { CloudHelper } from '@/models/common/cloud'
 
 const props = defineProps<{
   remixSource?: string
@@ -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 new XbpHelper().load(project, defaultProjectFile)
       project.setVisibility(Visibility.Private)
-      await project.saveToCloud()
+      await new CloudHelper().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..b90834395 100644
--- a/spx-gui/src/components/project/ProjectPublishModal.vue
+++ b/spx-gui/src/components/project/ProjectPublishModal.vue
@@ -5,14 +5,14 @@ import { useMessageHandle } from '@/utils/exception'
 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 { CloudHelper, saveFile } from '@/models/common/cloud'
+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'
 
 const props = defineProps<{
-  project: Project
+  project: SpxProject
   visible: boolean
 }>()
 
@@ -69,7 +69,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 new CloudHelper().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..04df40839 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 { CloudHelper } from '@/models/common/cloud'
 
 /**
  * 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 })
   }
@@ -82,12 +83,12 @@ export function useUnpublishProject() {
   const withConfirm = useConfirmDialog()
 
   // TODO: message for exception
-  async function makePrivate(project: Project) {
+  async function makePrivate(project: SpxProject) {
     project.setVisibility(Visibility.Private)
-    await project.saveToCloud()
+    await new CloudHelper().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..ec4093a56 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,12 +12,46 @@ 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 class CloudHelper {
+  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)
+  }
+}
+
 export async function load(owner: string, name: string, preferPublishedContent: boolean = false, signal?: AbortSignal) {
   let projectData = await getProject(owner, name, signal)
   if (preferPublishedContent) {
diff --git a/spx-gui/src/models/common/local.ts b/spx-gui/src/models/common/local.ts
index 8fd84da62..b803cf504 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({
@@ -7,6 +7,26 @@ const storage = localforage.createInstance({
   storeName: 'project'
 })
 
+export class LocalHelper {
+  constructor() {}
+
+  async load(project: IProject, key: string) {
+    const cached = await load(key)
+    if (cached == null) throw new Error('no project in local cache')
+    const { metadata, files } = cached
+    await project.load(metadata, files)
+  }
+
+  async save(project: IProject, key: string, signal?: AbortSignal) {
+    const [metadata, files] = await project.export(signal)
+    await save(key, metadata, files, signal)
+  }
+
+  clear(key: string) {
+    return clear(key)
+  }
+}
+
 type MetadataEx = Omit<Metadata, 'thumbnail'> & {
   files: string[]
   // `?`(`undefined`) for compatibility with legacy data
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..5b5a5a358 100644
--- a/spx-gui/src/models/common/xbp.ts
+++ b/spx-gui/src/models/common/xbp.ts
@@ -10,12 +10,26 @@ 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'
 
+export class XbpHelper {
+  constructor() {}
+
+  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 93%
rename from spx-gui/src/models/gen/backdrop-gen.ts
rename to spx-gui/src/models/spx/gen/backdrop-gen.ts
index e4bdde06f..a32a1e432 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 } 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
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 97%
rename from spx-gui/src/models/gen/common.ts
rename to spx-gui/src/models/spx/gen/common.ts
index 4b312509a..0dc056aad 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)
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 97%
rename from spx-gui/src/models/gen/sprite-gen.ts
rename to spx-gui/src/models/spx/gen/sprite-gen.ts
index be298035d..3bf7f4177 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 } from '../../common/file'
 import { getAnimationName, getCostumeName, validateSpriteName } from '../common/asset-name'
 import { sprite2Asset } from '../common/asset'
 
@@ -34,14 +34,14 @@ type SpriteGenSelected = {
 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 +59,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 +146,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
 
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..25985774b 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 { CloudHelper } from '@/models/common/cloud'
 
 const props = defineProps<{
   owner: string
@@ -54,10 +55,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 new CloudHelper().load(p, true, ctx.signal)
+    return p as CloudProject
   },
   {
     en: 'Failed to load project',
@@ -199,7 +200,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 new CloudHelper().load(project.value, true)
+    }
   },
   { en: 'Failed to like', zh: '标记喜欢失败' }
 )
@@ -209,7 +213,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 new CloudHelper().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..50615d270 100644
--- a/spx-gui/src/pages/editor/index.vue
+++ b/spx-gui/src/pages/editor/index.vue
@@ -21,13 +21,13 @@
 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 { LocalHelper, 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 +38,9 @@ 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, LocalCacheHelper } from '@/components/editor/editing'
 import { EditorState } from '@/components/editor/editor-state'
+import { CloudHelper } from '@/models/common/cloud'
 
 const props = defineProps<{
   ownerName: string
@@ -52,6 +53,8 @@ usePageTitle(() => ({
 }))
 
 const LOCAL_CACHE_KEY = 'XBUILDER_CACHED_PROJECT'
+const localCacheHelper = new LocalCacheHelper(new LocalHelper(), LOCAL_CACHE_KEY)
+const cloudHelper = new CloudHelper()
 
 const signedInUsername = computed(() => getSignedInUsername())
 const copilotCtx = useAgentCopilotCtx()
@@ -94,9 +97,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, cloudHelper, localCacheHelper)
   state.disposeOnSignal(ctx.signal)
   state.syncWithRouter(router)
   state.editing.start()
@@ -149,11 +153,11 @@ 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 new LocalHelper().load(localProject, LOCAL_CACHE_KEY)
   } catch (e) {
     console.warn('Failed to load project from local cache', e)
     localProject = null
@@ -183,11 +187,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 new CloudHelper().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.
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..c25619183 100644
--- a/spx-gui/src/widgets/spx-runner/SpxRunner.ce.vue
+++ b/spx-gui/src/widgets/spx-runner/SpxRunner.ce.vue
@@ -31,14 +31,15 @@
 <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 { CloudHelper } from '@/models/common/cloud'
 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())
 watch(
   () => [props.owner, props.name],
   async ([owner, name]) => {
@@ -46,8 +47,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 new CloudHelper().load(newProject, true)
         project.value.dispose()
         project.value = newProject
         ready.value = true

From 54dbfbf17844df85b8ce4955aed35d369f89019d Mon Sep 17 00:00:00 2001
From: nighca <nighca@live.cn>
Date: Wed, 11 Feb 2026 15:47:23 +0800
Subject: [PATCH 2/3] Fix usages

---
 spx-gui/AGENTS.md                             |  12 +-
 .../agent-copilot/CopilotProvider.vue         |   4 +-
 .../components/asset/gen/sprite/SpriteGen.vue |  29 ++-
 .../src/components/copilot/CopilotRoot.vue    |  12 +-
 .../editor/EditorContextProvider.vue          |   1 +
 .../src/components/editor/ProjectEditor.vue   |   6 +-
 spx-gui/src/components/editor/editing.test.ts |  63 +++---
 spx-gui/src/components/editor/editing.ts      |  44 ++---
 .../components/editor/editor-state.test.ts    | 179 +++++++++---------
 spx-gui/src/components/editor/editor-state.ts |  44 +----
 .../components/editor/navbar/EditorNavbar.vue |  10 +-
 .../components/project/ProjectCreateModal.vue |   9 +-
 .../project/ProjectPublishModal.vue           |   5 +-
 spx-gui/src/components/project/index.ts       |   5 +-
 spx-gui/src/models/common/cloud.ts            |  11 +-
 spx-gui/src/models/common/local.ts            |  33 ++--
 spx-gui/src/models/common/test.ts             |  11 +-
 spx-gui/src/models/common/xbp.ts              |   8 +-
 spx-gui/src/models/project.ts                 |  45 ++++-
 spx-gui/src/models/spx/project.ts             |   5 +-
 spx-gui/src/pages/community/project.vue       |   9 +-
 spx-gui/src/pages/editor/index.vue            |  43 +++--
 .../src/widgets/spx-runner/SpxRunner.ce.vue   |  21 +-
 23 files changed, 308 insertions(+), 301 deletions(-)

diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index ad13bef1f..67ed96f5f 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -26,10 +26,6 @@ Keep import statements in order:
 2. Internal libraries: from base to specific, e.g., from `utils` to `models` to `components`
 3. Local files: relative paths starting with `./` or `../`
 
-### Code Formatting
-
-* Use Prettier (`npx prettier --write <file>`) for code formatting after making changes.
-
 ### Naming Conventions
 
 * Use `PascalCase` for the following:
@@ -50,6 +46,14 @@ Keep import statements in order:
 * It's OK to use type assertions like `as any` or `as unknown` to bypass type errors if you are sure of the types, but try to avoid them if possible.
 * Avoid data sharing among test cases. Each test case should be independent and not rely on the state set by another test case.
 
+## Static Checks and Formatting
+
+* `npm run type-check` runs TypeScript type checking.
+* `npm run lint` runs ESLint.
+* `npm run test` runs unit tests.
+* Run the appropriate checks when making large changes and there are no pending TODOs that would cause static checks to fail.
+* Use Prettier (`npx prettier --write <file>`) for code formatting after making changes.
+
 ## Vue Component Development
 
 * Generate accessibility info for interactive elements using `v-radar` directive.
diff --git a/spx-gui/src/components/agent-copilot/CopilotProvider.vue b/spx-gui/src/components/agent-copilot/CopilotProvider.vue
index fb26109e6..6ff81d554 100644
--- a/spx-gui/src/components/agent-copilot/CopilotProvider.vue
+++ b/spx-gui/src/components/agent-copilot/CopilotProvider.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { InjectionKey } from 'vue'
 import { until } from '@/utils/utils'
-import { CloudHelper } from '@/models/common/cloud'
+import { cloudHelpers } from '@/models/common/cloud'
 
 export type McpConnectionStatus = {
   client: boolean
@@ -205,7 +205,7 @@ async function createProject(options: CreateProjectOptions) {
   project.setVisibility(Visibility.Private)
 
   try {
-    await new CloudHelper().save(project)
+    await cloudHelpers.save(project)
 
     const projectRoute = getOwnProjectEditorRoute(projectName)
 
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue
index d09638cd8..bf1100772 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
-import { computedShallowReactive } from '@/utils/utils'
+import { computed } from 'vue'
+import { computedShallowReactive, useComputedDisposable } from '@/utils/utils'
+import { useNetwork } from '@/utils/network'
 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 { getSignedInUsername } from '@/stores/user'
+import { cloudHelpers } from '@/models/common/cloud'
+import { provideLocalEditorCtx } from '@/components/editor/EditorContextProvider.vue'
+import { EditorState } from '@/components/editor/editor-state'
+import type { ILocalCache } from '@/components/editor/editing'
 import SpriteGenPhaseSettings from './SpriteGenPhaseSettings.vue'
 import SpriteGenPhaseContent from './SpriteGenPhaseContent.vue'
 
@@ -16,13 +22,24 @@ const emit = defineEmits<{
   finished: [Sprite]
 }>()
 
-const editorCtx = useEditorCtx()
-const localEditorCtx = computedShallowReactive(() => ({
+const signedInUsername = computed(() => getSignedInUsername())
+const { isOnline } = useNetwork()
+// Local cache is not really used in sprite gen, so a dummy implementation is sufficient.
+const localCache: ILocalCache = {
+  load: () => Promise.reject(new Error('Not implemented')),
+  save: () => Promise.reject(new Error('Not implemented')),
+  clear: () => Promise.reject(new Error('Not implemented'))
+}
+// We should override the state to avoid history operations caused by animation / costume changes within sprite gen.
+const editorStateInGen = useComputedDisposable(
+  () => new EditorState(props.gen.previewProject, isOnline, signedInUsername.value, cloudHelpers, localCache)
+)
+const editorCtxInGen = computedShallowReactive(() => ({
   project: props.gen.previewProject,
-  state: editorCtx.state
+  state: editorStateInGen.value
 }))
 
-provideLocalEditorCtx(localEditorCtx)
+provideLocalEditorCtx(editorCtxInGen)
 </script>
 
 <template>
diff --git a/spx-gui/src/components/copilot/CopilotRoot.vue b/spx-gui/src/components/copilot/CopilotRoot.vue
index 031f054da..05557c56a 100644
--- a/spx-gui/src/components/copilot/CopilotRoot.vue
+++ b/spx-gui/src/components/copilot/CopilotRoot.vue
@@ -35,7 +35,7 @@ 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 { CloudHelper } from '@/models/common/cloud'
+import { cloudHelpers, type CloudHelpers } from '@/models/common/cloud'
 
 const copilotInjectionKey: InjectionKey<Copilot> = Symbol('copilot')
 
@@ -65,7 +65,10 @@ 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<SpxProject> {
     const currentProject = this.editorCtxRef.value?.project
@@ -78,7 +81,7 @@ class Retriever {
       return currentProject
     }
     const p = new SpxProject(owner, name)
-    await new CloudHelper().load(p, true, signal)
+    await this.cloudHelpers.load(p, true, signal)
     return p
   }
 }
@@ -417,8 +420,7 @@ const modalEvents = useModalEvents()
 const messageEvents = useMessageEvents()
 const editorCtxRef = useEditorCtxRef()
 const codeEditorCtxRef = useCodeEditorCtxRef()
-
-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/editor/EditorContextProvider.vue b/spx-gui/src/components/editor/EditorContextProvider.vue
index fff9dd2a1..50a92f369 100644
--- a/spx-gui/src/components/editor/EditorContextProvider.vue
+++ b/spx-gui/src/components/editor/EditorContextProvider.vue
@@ -6,6 +6,7 @@
 import { useAppProvide, useAppInject } from '@/utils/app-state'
 import type { EditorState } from './editor-state'
 
+// TODO: consider merging EditorCtx with EditorState, since EditorState already contains all the data in EditorCtx and more.
 export type EditorCtx = {
   project: SpxProject
   state: EditorState
diff --git a/spx-gui/src/components/editor/ProjectEditor.vue b/spx-gui/src/components/editor/ProjectEditor.vue
index 6938fee8d..e5c40c0c4 100644
--- a/spx-gui/src/components/editor/ProjectEditor.vue
+++ b/spx-gui/src/components/editor/ProjectEditor.vue
@@ -61,7 +61,7 @@ import type { z } from 'zod'
 import { Monitor } from '@/models/spx/widget/monitor'
 import { EditMode } from './editor-state'
 import MapEditor from './map-editor/MapEditor.vue'
-import { CloudHelper } from '@/models/common/cloud'
+import { cloudHelpers } from '@/models/common/cloud'
 
 const editorCtx = useEditorCtx()
 const copilotCtx = useAgentCopilotCtx()
@@ -112,7 +112,7 @@ async function addSpriteFromCanvas(args: AddSpriteFromCanvaOptions) {
   project.value.addSprite(sprite)
   await sprite.autoFit()
   editorCtx.state.selectSprite(sprite.id)
-  new CloudHelper().save(project.value)
+  cloudHelpers.save(project.value)
   return {
     success: true,
     message: `Successfully added sprite "${args.spriteName}" to project "${project.value.name}"`
@@ -123,7 +123,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)
-  new CloudHelper().save(project.value)
+  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/editing.test.ts b/spx-gui/src/components/editor/editing.test.ts
index 5180d4956..eb130462a 100644
--- a/spx-gui/src/components/editor/editing.test.ts
+++ b/spx-gui/src/components/editor/editing.test.ts
@@ -3,12 +3,12 @@ import { afterEach, beforeEach, describe, expect, vi, it } from 'vitest'
 import { flushPromises } from '@vue/test-utils'
 import { timeout } from '@/utils/utils'
 import { type Files } from '@/models/common/file'
-import type { CloudHelper } from '@/models/common/cloud'
-import { mockFile, SimpleProject } from '@/models/common/test'
+import type { CloudHelpers } from '@/models/common/cloud'
+import { mockFile, MockProject } from '@/models/common/test'
 import type { IProject } from '@/models/project'
-import { Editing, SavingState, EditingMode, type ILocalCacheHelper } from './editing'
+import { Editing, SavingState, EditingMode, type ILocalCache } from './editing'
 
-function mockFiles() {
+function makeFiles() {
   return {
     'file1.txt': mockFile('file1.txt'),
     'file2.txt': mockFile('file2.txt'),
@@ -16,8 +16,8 @@ function mockFiles() {
   }
 }
 
-function mockProject({
-  files = mockFiles(),
+function makeProject({
+  files = makeFiles(),
   owner,
   name
 }: {
@@ -25,35 +25,36 @@ function mockProject({
   name?: string
   files?: Files
 } = {}) {
-  return new SimpleProject(owner, name, files)
+  return new MockProject(owner, name, files)
 }
 
-function mockCloudHelper(): CloudHelper {
+function makeCloudHelper(): CloudHelpers {
   return {
     load: vi.fn().mockResolvedValue(undefined),
     save: vi.fn().mockResolvedValue(undefined)
   }
 }
 
-function mockLocalCacheHelper(): ILocalCacheHelper {
+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,
-  cloudHelper = mockCloudHelper(),
-  localCacheHelper = mockLocalCacheHelper()
+  cloudHelper = makeCloudHelper(),
+  localCacheHelper = makeLocalCache()
 }: Partial<{
   project: IProject
   mode: EditingMode
   isOnline: WatchSource<boolean>
-  cloudHelper: CloudHelper
-  localCacheHelper: ILocalCacheHelper
+  cloudHelper: CloudHelpers
+  localCacheHelper: ILocalCache
 }>) {
   return new Editing(mode, project, cloudHelper, localCacheHelper, isOnline)
 }
@@ -72,13 +73,13 @@ describe('Editing', () => {
   })
 
   it('should do auto-save correctly', async () => {
-    const cloudHelper = mockCloudHelper()
+    const cloudHelper = makeCloudHelper()
     vi.mocked(cloudHelper.save).mockImplementation((project: IProject, signal?: AbortSignal) => timeout(500, signal))
-    const localCacheHelper = mockLocalCacheHelper()
+    const localCacheHelper = makeLocalCache()
     vi.mocked(localCacheHelper.save).mockImplementation((project: IProject, signal?: AbortSignal) =>
       timeout(100, signal)
     )
-    const project = mockProject()
+    const project = makeProject()
     const editing = makeEditing({ project, localCacheHelper, cloudHelper })
     editing.start()
 
@@ -109,8 +110,8 @@ describe('Editing', () => {
 
   // https://github.com/goplus/builder/pull/794#discussion_r1728120369
   it('should handle failed auto-save-to-cloud correctly', async () => {
-    const project = mockProject()
-    const cloudHelper = mockCloudHelper()
+    const project = makeProject()
+    const cloudHelper = makeCloudHelper()
     vi.mocked(cloudHelper.save)
       .mockRejectedValueOnce(new Error('Cloud save failed'))
       .mockRejectedValueOnce(new Error('Cloud save failed again'))
@@ -139,9 +140,9 @@ describe('Editing', () => {
   })
 
   it('should cancel pending saving when editing is disposed', async () => {
-    const project = mockProject()
-    const cloudHelper = mockCloudHelper()
-    const localCacheHelper = mockLocalCacheHelper()
+    const project = makeProject()
+    const cloudHelper = makeCloudHelper()
+    const localCacheHelper = makeLocalCache()
     const editing = makeEditing({ project, localCacheHelper, cloudHelper })
     editing.start()
 
@@ -156,9 +157,9 @@ describe('Editing', () => {
   })
 
   it('should abort previous saveToCloud call when a new one is initiated', async () => {
-    const project = mockProject()
-    const cloudHelper = mockCloudHelper()
-    const localCacheHelper = mockLocalCacheHelper()
+    const project = makeProject()
+    const cloudHelper = makeCloudHelper()
+    const localCacheHelper = makeLocalCache()
     const editing = makeEditing({ project, localCacheHelper, cloudHelper })
     editing.start()
 
@@ -180,9 +181,9 @@ describe('Editing', () => {
   })
 
   it('should not trigger auto-save for effect-free mode', async () => {
-    const project = mockProject({ owner: 'project-owner' })
-    const cloudHelper = mockCloudHelper()
-    const localCacheHelper = mockLocalCacheHelper()
+    const project = makeProject({ owner: 'project-owner' })
+    const cloudHelper = makeCloudHelper()
+    const localCacheHelper = makeLocalCache()
     const editing = makeEditing({
       project,
       mode: EditingMode.EffectFree,
@@ -213,11 +214,11 @@ describe('Editing', () => {
   })
 
   it('should wait for online when during auto-save', async () => {
-    const project = mockProject()
-    const cloudHelper = mockCloudHelper()
+    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 localCacheHelper = mockLocalCacheHelper()
+    const localCacheHelper = makeLocalCache()
     const editing = makeEditing({ project, isOnline, localCacheHelper, cloudHelper })
     editing.start()
 
diff --git a/spx-gui/src/components/editor/editing.ts b/spx-gui/src/components/editor/editing.ts
index 9f18c06d7..0f7c78e3c 100644
--- a/spx-gui/src/components/editor/editing.ts
+++ b/spx-gui/src/components/editor/editing.ts
@@ -2,16 +2,10 @@ 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 { LocalHelper } from '@/models/common/local'
 import type { IProject } from '@/models/project'
-import type { CloudHelper } from '@/models/common/cloud'
+import type { CloudHelpers } from '@/models/common/cloud'
 import { History } from './history'
 
-export interface ILocalCacheHelper {
-  save(project: IProject, signal?: AbortSignal): Promise<void>
-  clear(): Promise<void>
-}
-
 export enum SavingState {
   Pending,
   InProgress,
@@ -19,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() {
@@ -27,8 +27,8 @@ export class Saving {
 
   constructor(
     private project: IProject,
-    private cloudHelper: CloudHelper,
-    private localCacheHelper: ILocalCacheHelper,
+    private cloudHelper: CloudHelpers,
+    private localCacheHelper: ILocalCache,
     private isOnline: WatchSource<boolean>,
     private signal: AbortSignal
   ) {
@@ -85,19 +85,6 @@ export enum EditingMode {
   EffectFree
 }
 
-export class LocalCacheHelper implements ILocalCacheHelper {
-  constructor(
-    private localHelper: LocalHelper,
-    private cacheKey: string
-  ) {}
-  async save(project: IProject, signal?: AbortSignal) {
-    await this.localHelper.save(project, this.cacheKey, signal)
-  }
-  async clear() {
-    await this.localHelper.clear(this.cacheKey)
-  }
-}
-
 // TODO: Move `History` into `Editing` (or `EditorState`).
 
 export class Editing extends Disposable {
@@ -106,23 +93,14 @@ export class Editing extends Disposable {
   constructor(
     public mode: EditingMode,
     private project: IProject,
-    private cloudHelper: CloudHelper,
-    private localCacheHelper: ILocalCacheHelper,
+    private cloudHelper: CloudHelpers,
+    private localCacheHelper: ILocalCache,
     private isOnline: WatchSource<boolean>
-    // private signedInUsername: WatchSource<string | null>
   ) {
     super()
     this.history = new History(project)
   }
 
-  // get mode(): EditingMode {
-  //   const username = toValue(this.signedInUsername)
-  //   if (username == null || username !== this.project.owner) {
-  //     return EditingMode.EffectFree
-  //   }
-  //   return EditingMode.AutoSave
-  // }
-
   private startAutoPreload() {
     this.addDisposer(
       watchEffect((onCleanup) => {
diff --git a/spx-gui/src/components/editor/editor-state.test.ts b/spx-gui/src/components/editor/editor-state.test.ts
index 646be98c0..100d592dc 100644
--- a/spx-gui/src/components/editor/editor-state.test.ts
+++ b/spx-gui/src/components/editor/editor-state.test.ts
@@ -11,30 +11,31 @@ import { Animation } from '@/models/spx/animation'
 import type * as editing from './editing'
 
 import { EditorState, type IRouter, type Selected } from './editor-state'
-import type { CloudHelper } from '@/models/common/cloud'
+import type { CloudHelpers } from '@/models/common/cloud'
 import { mockFile } from '@/models/common/test'
 
-function mockCloudHelper(): CloudHelper {
+function makeCloudHelpers(): CloudHelpers {
   return {
     load: vi.fn().mockResolvedValue(undefined),
     save: vi.fn().mockResolvedValue(undefined)
   }
 }
 
-function mockLocalCacheHelper(): editing.ILocalCacheHelper {
+function makeLocalCache(): editing.ILocalCache {
   return {
+    load: vi.fn().mockResolvedValue(undefined),
     save: vi.fn().mockResolvedValue(undefined),
     clear: vi.fn().mockResolvedValue(undefined)
   }
 }
 
-function createEmptyProject(): SpxProject {
+function makeEmptyProject(): SpxProject {
   const project = new SpxProject()
   project.bindScreenshotTaker(async () => mockFile())
   return project
 }
 
-function createProjectWithResources(): SpxProject {
+function makeProjectWithResources(): SpxProject {
   const project = new SpxProject()
 
   // Add sounds
@@ -91,7 +92,7 @@ function createProjectWithResources(): SpxProject {
   return project
 }
 
-function mockRouter() {
+function makeRouter() {
   const currentRoute = ref({
     fullPath: '/',
     params: {},
@@ -105,14 +106,14 @@ function mockRouter() {
   } satisfies IRouter
 }
 
-function createEditorState(
-  project: SpxProject = createEmptyProject(),
+function makeEditorState(
+  project: SpxProject = makeEmptyProject(),
   isOnline: WatchSource<boolean> = ref(true),
   signedInUsername: string | null = 'user',
-  cloudHelper: CloudHelper = mockCloudHelper(),
-  localCacheHelper: editing.ILocalCacheHelper = mockLocalCacheHelper()
+  cloudHelpers: CloudHelpers = makeCloudHelpers(),
+  localCache: editing.ILocalCache = makeLocalCache()
 ): EditorState {
-  return new EditorState(project, isOnline, signedInUsername, cloudHelper, localCacheHelper)
+  return new EditorState(project, isOnline, signedInUsername, cloudHelpers, localCache)
 }
 
 describe('EditorState', () => {
@@ -126,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()
 
@@ -142,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()
 
@@ -160,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()
@@ -179,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 })
@@ -200,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 })
@@ -217,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()
@@ -238,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()
@@ -256,8 +257,8 @@ 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()
@@ -285,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()
@@ -304,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()
@@ -320,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()
@@ -343,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)
@@ -356,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)
@@ -369,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)
@@ -388,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)
@@ -407,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
 
@@ -430,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]
 
@@ -455,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])
@@ -510,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()
@@ -533,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()
@@ -558,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()
@@ -580,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()
@@ -609,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()
@@ -637,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()
@@ -682,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)
@@ -700,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)
@@ -717,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()
@@ -731,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()
@@ -744,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()
@@ -761,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
@@ -779,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')
@@ -838,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)
@@ -849,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)
@@ -860,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')
@@ -871,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')
@@ -884,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 18bfe3c86..378c3fb02 100644
--- a/spx-gui/src/components/editor/editor-state.ts
+++ b/spx-gui/src/components/editor/editor-state.ts
@@ -3,7 +3,7 @@ import type { RouteLocationAsRelativeGeneric, RouteLocationNormalizedGeneric } f
 import { shiftPath, type PathSegments } from '@/utils/route'
 import { Disposable } from '@/utils/disposable'
 import { AssetType } from '@/apis/asset'
-import { CloudHelper } from '@/models/common/cloud'
+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'
@@ -52,47 +52,13 @@ export enum EditMode {
   Map = 'map'
 }
 
-// class ProjectWithGens implements IProject {
-//   constructor(private project: IProject) {}
-//   get transactionMutex() {
-//     return this.project.transactionMutex
-//   }
-//   get owner() {
-//     return this.project.owner
-//   }
-//   get name() {
-//     return this.project.name
-//   }
-//   loadMetadata(metadata: Metadata) {
-//     return this.project.loadMetadata(metadata)
-//   }
-//   exportFiles() {
-//     const files = this.project.exportFiles()
-//     // TODO: Include gen files
-//     return files
-//   }
-//   loadFiles(files: Files, signal?: AbortSignal): Promise<void> {
-//     return this.project.loadFiles(files, signal)
-//   }
-//   async load(metadata: Metadata, files: Files, signal?: AbortSignal) {
-//     await this.project.load(metadata, files, signal)
-//     // 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,
-    cloudHelper: CloudHelper,
-    localCacheHelper: editing.ILocalCacheHelper
+    cloudHelpers: CloudHelpers,
+    localCache: editing.ILocalCache
   ) {
     super()
     this.addDisposable((this.runtime = new Runtime(project)))
@@ -100,9 +66,7 @@ export class EditorState extends Disposable {
     if (signedInUsername == null || signedInUsername !== this.project.owner) {
       editingMode = EditingMode.EffectFree
     }
-    this.addDisposable(
-      (this.editing = new editing.Editing(editingMode, project, cloudHelper, localCacheHelper, isOnline))
-    )
+    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())
diff --git a/spx-gui/src/components/editor/navbar/EditorNavbar.vue b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
index 6940bb873..3d1e949b4 100644
--- a/spx-gui/src/components/editor/navbar/EditorNavbar.vue
+++ b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
@@ -163,7 +163,6 @@ import { useI18n, type LocaleMessage } from '@/utils/i18n'
 import { useNetwork } from '@/utils/network'
 import { selectFile } from '@/utils/file'
 import { convertScratchToXbp } from '@/apis/sb2xbp'
-import { XbpHelper } from '@/models/common/xbp'
 import { type SpxProject } from '@/models/spx/project'
 import { getSignedInUsername, useUser } from '@/stores/user'
 import { Visibility } from '@/apis/common'
@@ -171,6 +170,7 @@ import { getProjectPageRoute } from '@/router'
 import { showTutorialsEntry } from '@/utils/env'
 import { usePublishProject, useRemoveProject, useUnpublishProject } from '@/components/project'
 import { useLoadFromScratchModal } from '@/components/asset'
+import { xbpHelpers } from '@/models/common/xbp'
 import NavbarWrapper from '@/components/navbar/NavbarWrapper.vue'
 import NavbarDropdown from '@/components/navbar/NavbarDropdown.vue'
 import NavbarNewProjectItem from '@/components/navbar/NavbarNewProjectItem.vue'
@@ -224,8 +224,6 @@ const ownerInfoToDisplay = computed(() => {
   return null
 })
 
-const xbpHelper = new XbpHelper()
-
 const importProjectFileMessage = { en: 'Import project file', zh: '导入项目文件' }
 
 const handleImportProjectFile = useMessageHandle(
@@ -244,7 +242,7 @@ const handleImportProjectFile = useMessageHandle(
     const file = await selectFile({ accept: ['xbp', 'gbp' /** For backward compatibility */] })
     const action = { name: importProjectFileMessage }
     await m.withLoading(
-      state.history.doAction(action, () => xbpHelper.load(project, file)),
+      state.history.doAction(action, () => xbpHelpers.load(project, file)),
       i18n.t({ en: 'Importing project file', zh: '导入项目文件中' })
     )
   },
@@ -259,7 +257,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(
-      xbpHelper.save(project, project.getSignal()),
+      xbpHelpers.save(project, project.getSignal()),
       i18n.t({ en: 'Exporting project file', zh: '导出项目文件中' })
     )
     saveAs(xbpFile, xbpFile.name) // TODO: what if user cancelled download?
@@ -304,7 +302,7 @@ const handleImportFromScratch = useMessageHandle(
 
     const action = { name: importScratchMessage }
     await m.withLoading(
-      state.history.doAction(action, () => xbpHelper.load(project, xbpFile)),
+      state.history.doAction(action, () => xbpHelpers.load(project, xbpFile)),
       i18n.t({ en: 'Importing converted project file', zh: '导入已转换的项目文件' })
     )
   },
diff --git a/spx-gui/src/components/project/ProjectCreateModal.vue b/spx-gui/src/components/project/ProjectCreateModal.vue
index 2ee454ff3..55b35ff58 100644
--- a/spx-gui/src/components/project/ProjectCreateModal.vue
+++ b/spx-gui/src/components/project/ProjectCreateModal.vue
@@ -54,10 +54,10 @@ import { useMessageHandle } from '@/utils/exception'
 import { untilNotNull } from '@/utils/utils'
 import { getSignedInUsername } from '@/stores/user'
 import { ApiException, ApiExceptionCode } from '@/apis/common/exception'
-import { XbpHelper } from '@/models/common/xbp'
+import { cloudHelpers } from '@/models/common/cloud'
+import { xbpHelpers } from '@/models/common/xbp'
 import { SpxProject } from '@/models/spx/project'
 import { getDefaultProjectFile } from '@/components/project'
-import { CloudHelper } from '@/models/common/cloud'
 
 const props = defineProps<{
   remixSource?: string
@@ -71,7 +71,6 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const signedInUsername = computed(() => getSignedInUsername())
-
 const title = computed(() => {
   if (props.remixSource == null) return { en: 'Create a new project', zh: '创建新的项目' }
   return { en: `Remix ${props.remixSource}`, zh: `改编 ${props.remixSource}` }
@@ -100,9 +99,9 @@ const handleSubmit = useMessageHandle(
       const username = await untilNotNull(signedInUsername)
       const defaultProjectFile = await getDefaultProjectFile()
       const project = new SpxProject(username, projectName)
-      await new XbpHelper().load(project, defaultProjectFile)
+      await xbpHelpers.load(project, defaultProjectFile)
       project.setVisibility(Visibility.Private)
-      await new CloudHelper().save(project)
+      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 b90834395..519c752e1 100644
--- a/spx-gui/src/components/project/ProjectPublishModal.vue
+++ b/spx-gui/src/components/project/ProjectPublishModal.vue
@@ -5,7 +5,7 @@ import { useMessageHandle } from '@/utils/exception'
 import { useI18n } from '@/utils/i18n'
 import { Visibility } from '@/apis/common'
 import { createRelease } from '@/apis/project-release'
-import { CloudHelper, saveFile } from '@/models/common/cloud'
+import { cloudHelpers, saveFile } from '@/models/common/cloud'
 import type { SpxProject } from '@/models/spx/project'
 import { isProjectUsingAIInteraction } from '@/utils/project'
 import { UIImg, UIFormModal, UIForm, UIFormItem, UITextInput, UIButton, useForm } from '@/components/ui'
@@ -22,7 +22,6 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-
 const [thumbnailUrl, thumbnailUrlLoading] = useFileUrl(() => props.project.thumbnail)
 
 /** If this is the first time the project is published */
@@ -69,7 +68,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 new CloudHelper().save(project)
+    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/index.ts b/spx-gui/src/components/project/index.ts
index 04df40839..d990ebdb4 100644
--- a/spx-gui/src/components/project/index.ts
+++ b/spx-gui/src/components/project/index.ts
@@ -15,7 +15,7 @@ import ProjectPublishedModal from './ProjectPublishedModal.vue'
  * 4. Replace `./default-project.xbp` with the exported file.
  */
 import defaultProjectFileUrl from './default-project.xbp?url'
-import { CloudHelper } from '@/models/common/cloud'
+import { cloudHelpers } from '@/models/common/cloud'
 
 /**
  * Get the default project file as a File object
@@ -81,11 +81,10 @@ export function usePublishProject() {
 export function useUnpublishProject() {
   const { t } = useI18n()
   const withConfirm = useConfirmDialog()
-
   // TODO: message for exception
   async function makePrivate(project: SpxProject) {
     project.setVisibility(Visibility.Private)
-    await new CloudHelper().save(project)
+    await cloudHelpers.save(project)
   }
 
   return async function unpublishProject(project: SpxProject) {
diff --git a/spx-gui/src/models/common/cloud.ts b/spx-gui/src/models/common/cloud.ts
index ec4093a56..20ad48949 100644
--- a/spx-gui/src/models/common/cloud.ts
+++ b/spx-gui/src/models/common/cloud.ts
@@ -18,9 +18,8 @@ import { hashFileCollection } from './hash'
 import { createAIDescriptionFiles, extractAIDescription } from './'
 import { getUniversalUrlScheme, stringifyDataUrl, stringifyKodoUrl, UniversalUrlScheme } from '@/utils/universal-url'
 
-export class CloudHelper {
-  constructor() {}
-
+/** Helpers for cloud storage of project data. */
+export class CloudHelpers {
   async load(
     project: IProject,
     preferPublishedContent: boolean = false,
@@ -52,7 +51,9 @@ export class CloudHelper {
   }
 }
 
-export async function load(owner: string, name: string, preferPublishedContent: boolean = false, signal?: AbortSignal) {
+export const cloudHelpers = new CloudHelpers()
+
+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)
@@ -73,7 +74,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 b803cf504..ea4db8cab 100644
--- a/spx-gui/src/models/common/local.ts
+++ b/spx-gui/src/models/common/local.ts
@@ -7,26 +7,35 @@ const storage = localforage.createInstance({
   storeName: 'project'
 })
 
-export class LocalHelper {
-  constructor() {}
-
-  async load(project: IProject, key: string) {
-    const cached = await load(key)
-    if (cached == null) throw new Error('no project in local cache')
-    const { metadata, files } = cached
+/** 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(key: string) {
-    return clear(key)
+  /** Clear data in local storage with given storage key. */
+  async clear(key: string) {
+    await clear(key)
   }
 }
 
+export const localHelpers = new LocalHelpers()
+
 type MetadataEx = Omit<Metadata, 'thumbnail'> & {
   files: string[]
   // `?`(`undefined`) for compatibility with legacy data
@@ -85,13 +94,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
@@ -113,7 +122,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
diff --git a/spx-gui/src/models/common/test.ts b/spx-gui/src/models/common/test.ts
index 9d3a29f55..c497c1399 100644
--- a/spx-gui/src/models/common/test.ts
+++ b/spx-gui/src/models/common/test.ts
@@ -1,5 +1,5 @@
 import { vi } from 'vitest'
-import { shallowReactive } from 'vue'
+import { reactive } from 'vue'
 import type { IProject, Metadata } from '@/models/project'
 import { fromText, type Files } from '../common/file'
 import Mutex from '@/utils/mutex'
@@ -8,7 +8,7 @@ export function mockFile(name = 'mocked') {
   return fromText(name, Math.random() + '')
 }
 
-export class SimpleProject implements IProject {
+export class MockProject implements IProject {
   mutex = new Mutex()
   public files: Files
   constructor(
@@ -16,7 +16,8 @@ export class SimpleProject implements IProject {
     public name?: string,
     files: Files = {}
   ) {
-    this.files = shallowReactive({ ...files })
+    this.files = { ...files }
+    return reactive(this) as this
   }
   private getMetadata(): Metadata {
     return {
@@ -32,12 +33,12 @@ export class SimpleProject implements IProject {
     this.files = { ...files }
   })
   exportFiles = vi.fn((): Files => {
-    return { ...this.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 }]
+      return [this.getMetadata(), this.files]
     })
   })
   load = vi.fn(async (metadata: Metadata, files: Files, _signal?: AbortSignal): Promise<void> => {
diff --git a/spx-gui/src/models/common/xbp.ts b/spx-gui/src/models/common/xbp.ts
index 5b5a5a358..e3916d84d 100644
--- a/spx-gui/src/models/common/xbp.ts
+++ b/spx-gui/src/models/common/xbp.ts
@@ -16,20 +16,20 @@ import { createAIDescriptionFiles, extractAIDescription } from './'
 const metadataFileName = 'builder-meta.json'
 const thumbnailFileName = 'builder-thumbnail'
 
-export class XbpHelper {
-  constructor() {}
-
+/** 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 const xbpHelpers = new XbpHelpers()
+
 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
index 266bd8b76..7c175f8d2 100644
--- a/spx-gui/src/models/project.ts
+++ b/spx-gui/src/models/project.ts
@@ -1,7 +1,7 @@
 import type { Prettify } from '@/utils/types'
+import type Mutex from '@/utils/mutex'
 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'> & {
@@ -9,38 +9,63 @@ export type CloudMetadata = Prettify<
   }
 >
 
-export type Metadata = Prettify<
-  Partial<CloudMetadata> & {
-    aiDescription?: string | null
-    aiDescriptionHash?: string | null
-  }
->
+export type Metadata = Partial<CloudMetadata> & {
+  // The ai-description related fields are specific for spx projects.
+  // We retain them in the project metadata for easier access and management,
+  // and they will be saved to the cloud or xbp as separate files.
+  // TODO: Consider relocating them from project metadata (to project files?) if they are not applicable to other project types.
+  // Refer to https://github.com/goplus/builder/pull/1932#discussion_r2266234375 before implementing this change.
+  aiDescription?: string | null
+  aiDescriptionHash?: string | null
+}
 
 export interface IProject {
   /**
    * Mutex for transaction operations on the project.
    * Use this to ensure transactional operations atomicity.
+   *
+   * For example, when a project is processing time-cost changes (e.g., loading from a xbp file),
+   * we want to ensure that the project is not saved in the middle of loading, which may cause incomplete
+   * or corrupted content to be saved. By acquiring the mutex during loading, we can prevent saving until loading is complete.
    */
   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. */
+
+  /**
+   * Export project content to files.
+   *
+   * The result is expected to be memoized, and will only be re-computed when the project content changed.
+   * By watching result of this method, the caller can get notified when project content changed.
+   *
+   * NOTE: this method may return intermediate result during transactional edits.
+   *
+   * TODO: we may need to migrate most callers of this method to use some alternative methods that ensure atomicity.
+   */
   exportFiles(): Files
+
   /**
-   * Load project content from metadata and files.
+   * Load project 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
+   * Export project 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.
diff --git a/spx-gui/src/models/spx/project.ts b/spx-gui/src/models/spx/project.ts
index 439bbde43..3615efbfd 100644
--- a/spx-gui/src/models/spx/project.ts
+++ b/spx-gui/src/models/spx/project.ts
@@ -93,7 +93,7 @@ const defaultViewportSize: ViewportSize = defaultMapSize
 const maxAudioAttenuationViewportScale = 1.6 // The maximum scaling factor for the viewport
 const disabledAudioAttenuationFlag = 0
 
-export class SpxProject extends Disposable {
+export class SpxProject extends Disposable implements IProject {
   id?: string
   createdAt?: string
   updatedAt?: string
@@ -713,6 +713,3 @@ 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/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
index 25985774b..3d459e937 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/pages/community/project.vue
@@ -38,8 +38,8 @@ import { useCreateProject, useRemoveProject, useShareProject, useUnpublishProjec
 import CommunityCard from '@/components/community/CommunityCard.vue'
 import ReleaseHistory from '@/components/community/project/ReleaseHistory.vue'
 import TextView from '@/components/community/TextView.vue'
+import { cloudHelpers } from '@/models/common/cloud'
 import kikoWaveSvg from './kiko-wave.svg?raw'
-import { CloudHelper } from '@/models/common/cloud'
 
 const props = defineProps<{
   owner: string
@@ -47,7 +47,6 @@ const props = defineProps<{
 }>()
 
 const router = useRouter()
-
 const {
   data: project,
   isLoading,
@@ -57,7 +56,7 @@ const {
   async (ctx) => {
     const p = new SpxProject(props.owner, props.name)
     ;(window as any).project = p // for debug purpose, TODO: remove me
-    await new CloudHelper().load(p, true, ctx.signal)
+    await cloudHelpers.load(p, true, ctx.signal)
     return p as CloudProject
   },
   {
@@ -202,7 +201,7 @@ const handleLike = useMessageHandle(
     await likeProject(props.owner, props.name)
     if (project.value != null) {
       // refresh project info (likeCount)
-      await new CloudHelper().load(project.value, true)
+      await cloudHelpers.load(project.value, true)
     }
   },
   { en: 'Failed to like', zh: '标记喜欢失败' }
@@ -215,7 +214,7 @@ const handleUnlike = useMessageHandle(
     await unlikeProject(props.owner, props.name)
     if (project.value != null) {
       // refresh project info (likeCount)
-      await new CloudHelper().load(project.value, true)
+      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 50615d270..fa305784b 100644
--- a/spx-gui/src/pages/editor/index.vue
+++ b/spx-gui/src/pages/editor/index.vue
@@ -17,6 +17,23 @@
   </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'
@@ -27,7 +44,6 @@ import { Cancelled } from '@/utils/exception'
 import { ProgressCollector, ProgressReporter } from '@/utils/progress'
 import { useRegisterUpdateRouteLoaded } from '@/utils/route-loading'
 import { composeQuery, useQuery } from '@/utils/query'
-import { LocalHelper, 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,9 +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, LocalCacheHelper } from '@/components/editor/editing'
+import { EditingMode, type ILocalCache } from '@/components/editor/editing'
 import { EditorState } from '@/components/editor/editor-state'
-import { CloudHelper } from '@/models/common/cloud'
+import { cloudHelpers } from '@/models/common/cloud'
+import { localHelpers, type LocalHelpers } from '@/models/common/local'
+import type { IProject } from '@/models/project'
 
 const props = defineProps<{
   ownerName: string
@@ -52,9 +70,7 @@ usePageTitle(() => ({
   zh: `编辑 ${props.projectName}`
 }))
 
-const LOCAL_CACHE_KEY = 'XBUILDER_CACHED_PROJECT'
-const localCacheHelper = new LocalCacheHelper(new LocalHelper(), LOCAL_CACHE_KEY)
-const cloudHelper = new CloudHelper()
+const localCache = new LocalCache(localHelpers)
 
 const signedInUsername = computed(() => getSignedInUsername())
 const copilotCtx = useAgentCopilotCtx()
@@ -100,7 +116,7 @@ const stateQueryRet = useQuery(async (ctx) => {
   const username = signedInUsername.value
   const project = await composeQuery(ctx, projectQueryRet)
   ctx.signal.throwIfAborted()
-  const state = new EditorState(project, isOnline, username, cloudHelper, localCacheHelper)
+  const state = new EditorState(project, isOnline, username, cloudHelpers, localCache)
   state.disposeOnSignal(ctx.signal)
   state.syncWithRouter(router)
   state.editing.start()
@@ -157,11 +173,12 @@ async function loadProject(ownerName: string, projectName: string, signal: Abort
   try {
     localProject = new SpxProject()
     localProject.disposeOnSignal(signal)
-    await new LocalHelper().load(localProject, LOCAL_CACHE_KEY)
+    const loaded = await localCache.load(localProject)
+    if (!loaded) localProject = null
   } 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)
@@ -171,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
   }
 
@@ -179,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!)
@@ -191,7 +208,7 @@ async function loadProject(ownerName: string, projectName: string, signal: Abort
   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 new CloudHelper().load(newProject, 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.
@@ -200,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/widgets/spx-runner/SpxRunner.ce.vue b/spx-gui/src/widgets/spx-runner/SpxRunner.ce.vue
index c25619183..07f586edd 100644
--- a/spx-gui/src/widgets/spx-runner/SpxRunner.ce.vue
+++ b/spx-gui/src/widgets/spx-runner/SpxRunner.ce.vue
@@ -1,11 +1,3 @@
-<!--
- * @Author: Zhang Zhi Yang
- * @Date: 2024-02-26 17:49:39
- * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-03-09 14:46:03
- * @FilePath: \builder\spx-gui\src\widgets\widget\spx-runner\SpxRunner.ce.vue
- * @Description: 
--->
 <template>
   <div class="spx-runner-widget">
     <div class="operation">
@@ -28,18 +20,20 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
-import ProjectRunner from '@/components/project/runner/ProjectRunner.vue'
-import { ref, watch } from 'vue'
+import { ref, watch, shallowRef } from 'vue'
 import { SpxProject, fullName } from '@/models/spx/project'
-import { shallowRef } from 'vue'
-import { CloudHelper } from '@/models/common/cloud'
+import { cloudHelpers } from '@/models/common/cloud'
+import ProjectRunner from '@/components/project/runner/ProjectRunner.vue'
+
 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 SpxProject())
+
 watch(
   () => [props.owner, props.name],
   async ([owner, name]) => {
@@ -48,7 +42,7 @@ watch(
       errorMsg.value = ''
       try {
         const newProject = new SpxProject(owner, name)
-        await new CloudHelper().load(newProject, true)
+        await cloudHelpers.load(newProject, true)
         project.value.dispose()
         project.value = newProject
         ready.value = true
@@ -73,6 +67,7 @@ const onStop = () => {
   runner.value.stop()
 }
 </script>
+
 <style lang="scss">
 .spx-runner-widget {
   position: relative;

From 36dee3b02d93b0dd167034e00f2370aa8985f6d1 Mon Sep 17 00:00:00 2001
From: nighca <nighca@live.cn>
Date: Wed, 11 Feb 2026 16:08:29 +0800
Subject: [PATCH 3/3] Fix unit test

---
 spx-gui/src/components/editor/editing.test.ts | 16 +++++++-------
 spx-gui/src/models/common/test.ts             | 22 +++++++++++--------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/spx-gui/src/components/editor/editing.test.ts b/spx-gui/src/components/editor/editing.test.ts
index eb130462a..78e27d6c5 100644
--- a/spx-gui/src/components/editor/editing.test.ts
+++ b/spx-gui/src/components/editor/editing.test.ts
@@ -87,7 +87,7 @@ describe('Editing', () => {
     expect(editing.dirty).toBe(false)
     expect(editing.saving).toBeNull()
 
-    project.files['file1.txt'] = mockFile('file1.txt updated')
+    project.setFile('file1.txt', mockFile('file1.txt updated'))
     await flushPromises()
     expect(editing.dirty).toBe(true)
     expect(editing.saving?.state).toBe(SavingState.Pending)
@@ -119,7 +119,7 @@ describe('Editing', () => {
     const editing = makeEditing({ project, cloudHelper })
     editing.start()
 
-    project.files['file1.txt'] = mockFile('file1.txt updated')
+    project.setFile('file1.txt', mockFile('file1.txt updated'))
     await flushPromises()
 
     vi.advanceTimersByTime(autoSaveToCloudDelay)
@@ -146,7 +146,7 @@ describe('Editing', () => {
     const editing = makeEditing({ project, localCacheHelper, cloudHelper })
     editing.start()
 
-    project.files['file1.txt'] = mockFile('file1.txt updated')
+    project.setFile('file1.txt', mockFile('file1.txt updated'))
     await flushPromises()
 
     editing.dispose()
@@ -163,13 +163,13 @@ describe('Editing', () => {
     const editing = makeEditing({ project, localCacheHelper, cloudHelper })
     editing.start()
 
-    project.files['file1.txt'] = mockFile('file1.txt updated')
+    project.setFile('file1.txt', mockFile('file1.txt updated'))
     await flushPromises()
     vi.advanceTimersByTime(100)
-    project.files['file2.txt'] = mockFile('file2.txt updated')
+    project.setFile('file2.txt', mockFile('file2.txt updated'))
     await flushPromises()
     vi.advanceTimersByTime(100)
-    project.files['file3.txt'] = mockFile('file3.txt updated')
+    project.setFile('file3.txt', mockFile('file3.txt updated'))
     await flushPromises()
 
     vi.advanceTimersByTime(autoSaveToCloudDelay)
@@ -197,7 +197,7 @@ describe('Editing', () => {
     expect(editing.saving).toBeNull()
 
     // Make changes to files
-    project.files['file1.txt'] = mockFile('file1.txt updated')
+    project.setFile('file1.txt', mockFile('file1.txt updated'))
     await flushPromises()
 
     // Advance time to when auto-save would normally trigger
@@ -226,7 +226,7 @@ describe('Editing', () => {
     expect(editing.saving).toBeNull()
 
     // Make changes to files
-    project.files['file1.txt'] = mockFile('file1.txt updated')
+    project.setFile('file1.txt', mockFile('file1.txt updated'))
     await flushPromises()
     expect(editing.dirty).toBe(true)
     expect(editing.saving?.state).toBe(SavingState.Pending)
diff --git a/spx-gui/src/models/common/test.ts b/spx-gui/src/models/common/test.ts
index c497c1399..076de5a99 100644
--- a/spx-gui/src/models/common/test.ts
+++ b/spx-gui/src/models/common/test.ts
@@ -1,7 +1,7 @@
 import { vi } from 'vitest'
-import { reactive } from 'vue'
+import { shallowRef } from 'vue'
 import type { IProject, Metadata } from '@/models/project'
-import { fromText, type Files } from '../common/file'
+import { fromText, type File, type Files } from '../common/file'
 import Mutex from '@/utils/mutex'
 
 export function mockFile(name = 'mocked') {
@@ -10,14 +10,18 @@ export function mockFile(name = 'mocked') {
 
 export class MockProject implements IProject {
   mutex = new Mutex()
-  public files: Files
+
+  private filesRef = shallowRef<Files>({})
+  setFile(path: string, file: File): void {
+    this.filesRef.value = { ...this.filesRef.value, [path]: file }
+  }
+
   constructor(
     public owner?: string,
     public name?: string,
     files: Files = {}
   ) {
-    this.files = { ...files }
-    return reactive(this) as this
+    this.filesRef.value = files
   }
   private getMetadata(): Metadata {
     return {
@@ -30,22 +34,22 @@ export class MockProject implements IProject {
   })
   loadFiles = vi.fn(async (files: Files, _signal?: AbortSignal): Promise<void> => {
     void _signal
-    this.files = { ...files }
+    this.filesRef.value = files
   })
   exportFiles = vi.fn((): Files => {
-    return this.files
+    return this.filesRef.value
   })
   export = vi.fn(async (_signal?: AbortSignal): Promise<[Metadata, Files]> => {
     void _signal
     return this.mutex.runExclusive(async () => {
-      return [this.getMetadata(), this.files]
+      return [this.getMetadata(), this.filesRef.value]
     })
   })
   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 }
+      this.filesRef.value = { ...files }
     })
   })
 }