diff --git a/.gitignore b/.gitignore
index 8c630a677c..f6df3d1eb8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,5 +18,10 @@
 # Go workspace file
 go.work
 
+# Agent workflow artifacts
+docs/superpowers/
+*/docs/superpowers/
+.playwright-mcp/
+
 .idea/
 *.wasm
diff --git a/ui/README.md b/ui/README.md
index 1ab2453528..0187aa6460 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -48,7 +48,7 @@ The same requirement should use one issue to connect the Design PR and Code PR.
 
 `ui/prototype` is a runnable product prototype, not an isolated demo.
 
-It is used during Design PR to express product behavior, page structure, visual design, and basic interactions. See [Prototype Maintenance](skills/prototype-maintenance/SKILL.md) for detailed maintenance rules.
+It is used during Design PR to express product behavior, page structure, visual design, and basic interactions. See [`prototype/AGENTS.md`](prototype/AGENTS.md) for detailed maintenance rules.
 
 ## Quick Start
 
@@ -79,12 +79,6 @@ It is used during Design PR to express product behavior, page structure, visual
 | [Design to Code Mapping (Legacy)](docs/design-to-code-mapping-legacy.md) | Legacy `.pen` to `spx-gui` mapping rules |
 | [Component Docs Naming](docs/component-docs-naming.md) | Component documentation naming conventions |
 
-## Skills
-
-| Skill | Description |
-| ----- | ----------- |
-| [Prototype Maintenance](skills/prototype-maintenance/SKILL.md) | Use when maintaining `ui/prototype` and keeping it aligned with the real frontend structure, routes, and interactions |
-
 ## Tests and Validation
 
 `ui/tests/pen/` contains design asset validation tests for protecting the component library and page-level Pencil files. See [Design Asset Validation](docs/design-asset-validation.md) for details.
diff --git a/ui/README.zh.md b/ui/README.zh.md
index ccda809bfa..b950544cb4 100644
--- a/ui/README.zh.md
+++ b/ui/README.zh.md
@@ -48,7 +48,7 @@ PR（Code 发布）
 
 `ui/prototype` 是可运行的功能原型，不是孤立 demo。
 
-它用于在 Design PR 阶段表达产品功能、页面结构、设计样式和基础交互。具体维护规则见 [Prototype Maintenance](skills/prototype-maintenance/SKILL.md)。
+它用于在 Design PR 阶段表达产品功能、页面结构、设计样式和基础交互。具体维护规则见 [`prototype/AGENTS.md`](prototype/AGENTS.md)。
 
 ## 快速开始
 
@@ -79,12 +79,6 @@ PR（Code 发布）
 | [设计到代码映射（旧版）](docs/design-to-code-mapping-legacy.md) | 旧版 `.pen` 到 `spx-gui` 的映射规则，历史参考 |
 | [组件文档命名](docs/component-docs-naming.md) | 组件文档命名约定 |
 
-## Skills
-
-| Skill | 说明 |
-| ----- | ---- |
-| [Prototype Maintenance](skills/prototype-maintenance/SKILL.md) | 维护 `ui/prototype` 时使用，确保 prototype 与真实前端结构、路由和交互保持一致 |
-
 ## 测试与校验
 
 `ui/tests/pen/` 存放设计资产校验测试，用于保护组件库和页面级 Pencil 文件。详细说明见 [设计资产校验](docs/design-asset-validation.md)。
diff --git a/ui/docs/design-to-code-mapping-legacy.md b/ui/docs/design-to-code-mapping-legacy.md
index 0eba928a4b..34ce9297aa 100644
--- a/ui/docs/design-to-code-mapping-legacy.md
+++ b/ui/docs/design-to-code-mapping-legacy.md
@@ -1,7 +1,7 @@
 # Design to Code Mapping Guide (Legacy)
 
 > 本文是旧版 `.pen` 到 `spx-gui` 的映射与规范化文档，主要服务旧版设计同步流程。
-> 当前 prototype 维护规则请优先查看 [`ui/skills/prototype-maintenance/SKILL.md`](../skills/prototype-maintenance/SKILL.md)。
+> 当前 prototype 维护规则请优先查看 [`ui/prototype/AGENTS.md`](../prototype/AGENTS.md)。
 
 本文记录整个仓库里 `.pen` 设计资产与 `spx-gui` 前端实现之间的对应关系，供后续开发者同步设计稿到代码时使用。
 
diff --git a/ui/docs/team-workflow.md b/ui/docs/team-workflow.md
index 9f12623edc..8069807af7 100644
--- a/ui/docs/team-workflow.md
+++ b/ui/docs/team-workflow.md
@@ -108,11 +108,11 @@ Code PR 不应只从静态设计稿重新推导实现方案，而应把 Design P
 
 ## Prototype 维护
 
-Prototype 的维护规则已经单独整理为 skill：
+Prototype 的维护规则已经合并到原型目录：
 
-- [`ui/skills/prototype-maintenance/SKILL.md`](../skills/prototype-maintenance/SKILL.md)
+- [`ui/prototype/AGENTS.md`](../prototype/AGENTS.md)
 
-当任务涉及 `ui/prototype`、Pencil 页面改动同步、prototype 预览环境或 prototype 与真实前端代码对齐时，应优先使用该 skill。
+当任务涉及 `ui/prototype`、Pencil 页面改动同步、prototype 预览环境或 prototype 与真实前端代码对齐时，应优先遵循该文件。
 
 ## 责任边界
 
@@ -142,5 +142,5 @@ Code PR 不应绕开 issue 和 Design PR 单独解释需求。
 
 - Issue 编写规则：[Issue 模板](./issue-template.md)
 - Design PR 编写规则：[PR 模板](./pr-template.md)
-- Prototype 维护规则：[`ui/skills/prototype-maintenance/SKILL.md`](../skills/prototype-maintenance/SKILL.md)
+- Prototype 维护规则：[`ui/prototype/AGENTS.md`](../prototype/AGENTS.md)
 - 旧版协作流程：[团队工作流程（旧版）](./team-workflow-legacy.md)
diff --git a/ui/images/tutorials-banner.jpg b/ui/images/tutorials-banner.jpg
new file mode 100644
index 0000000000..3753884a15
Binary files /dev/null and b/ui/images/tutorials-banner.jpg differ
diff --git a/ui/prototype/AGENTS.md b/ui/prototype/AGENTS.md
index a77670f646..6f17bd2d5d 100644
--- a/ui/prototype/AGENTS.md
+++ b/ui/prototype/AGENTS.md
@@ -4,31 +4,60 @@ This file guides AI agents working under `ui/prototype/`.
 
 ## Purpose
 
-`ui/prototype/` is a standalone, design-driven UI preview workspace, usually generated from `.pen` files in `ui/pages/` and assets in `ui/images/`.
+`ui/prototype/` is a standalone, runnable XBuilder frontend prototype. It exists for Design PR work: product behavior, page structure, visual design, and basic interactions should be experienced here before production logic is implemented in `spx-gui/`.
 
-It should stay close to the real frontend in stack and presentation style, but it is not the real frontend.
+The prototype must look and behave like the current Builder frontend, but it must be disconnected from the server. Data shown in the prototype is local fake data.
 
 ## Core Contract
 
-- `spx-gui/` is the real product frontend.
-- `ui/prototype/` is a local preview sandbox.
-- The prototype should resemble the real frontend in structure, theme shape, typography, and implementation style.
-- The prototype must not depend on the real frontend at runtime, build time, or type-check time.
+- `spx-gui/` is the real product frontend and the reference implementation.
+- `ui/prototype/` is an independent frontend app with its own install, dev, build, and preview flow.
+- Prototype code must follow the real frontend's stack and organization where practical: Vite, Vue 3, Vue Router, Tailwind CSS v4, page/component/API-style boundaries, local theme tokens, and local app styles.
+- Runtime, build, and typecheck must not depend on `spx-gui/`.
+- The prototype must not call real backend services.
 
 Stable rule:
 
-- You may copy or adapt presentation-layer patterns from the real frontend.
-- You must not import code, config, styles, fonts, routes, tokens, utilities, or components directly from `spx-gui/`.
+- Inspect the current real frontend implementation before changing the corresponding prototype surface.
+- Recreate the needed structure locally under `ui/prototype/`.
+- Use local mock APIs and fake data instead of real network calls.
+- Do not import code, config, styles, fonts, routes, tokens, utilities, or components directly from `spx-gui/`.
 
-If something is needed from the real frontend, copy the minimum local version into `ui/prototype/` and remove production-only concerns.
+If something is needed from the real frontend, copy or adapt the minimum local presentation-layer subset into `ui/prototype/` and remove production-only concerns.
 
 ## Source Priority
 
 When changing the prototype, use this order:
 
-1. Design files and design assets decide what should be rendered.
-2. Existing prototype files decide local conventions.
-3. The real frontend is only a reference for structure, theme, naming, and visual implementation patterns.
+1. The changed Pencil design file or design asset decides the intended UI.
+2. The current real frontend decides the page structure, route shape, component boundaries, styling approach, and interaction model.
+3. Existing prototype files decide local conventions.
+
+Do not invent an unrelated demo architecture when a matching real frontend surface exists.
+
+## Required Workflow
+
+1. Start from the real frontend.
+   - Inspect the corresponding implementation in the current Builder frontend before editing prototype code.
+   - Reuse the same route model, page/component split, style approach, and interaction logic where practical.
+
+2. Ensure the target prototype surface exists.
+   - If `ui/prototype` does not have the changed page or UI, initialize it from the current real frontend structure.
+   - If it exists but has drifted from the real frontend organization, align the structure first, then apply the design change.
+
+3. Apply only the current design change.
+   - Sync the latest relevant Pencil page change into `ui/prototype`.
+   - If only one page changed, only override that page or component surface.
+   - Other pages, routes, and features must remain accessible and usable through local mock behavior.
+
+4. Keep the prototype offline.
+   - Replace server APIs with local `src/apis/*` mock modules.
+   - Replace auth, persistence, permission, and backend state with deterministic local state.
+   - Keep interactions local and preview-oriented.
+
+5. Keep edits scoped.
+   - Write prototype-related changes under `ui/` unless the user explicitly authorizes broader scope.
+   - Do not modify `spx-gui/` by default.
 
 ## Boundaries
 
@@ -38,8 +67,7 @@ Agents must preserve all of the following:
 - Runtime and build dependencies stay inside `ui/prototype/`, except shared static assets under `ui/images/`.
 - Do not import from `../../spx-gui` or any other real frontend directory.
 - Do not extend, merge, or proxy real frontend config.
-- Do not add business logic, network requests, auth flow, persistence, or real app state.
-- Keep interactions local, minimal, and preview-oriented.
+- Do not add real network requests, real auth flow, real persistence, or real app state.
 - Keep mock data local.
 
 Forbidden shortcuts include:
@@ -47,13 +75,16 @@ Forbidden shortcuts include:
 - importing the real frontend's Vite config, router, token files, or components
 - reading fonts from the real frontend instead of copying them locally
 - using aliases that resolve into the real frontend project
+- adding `fetch`, `axios`, or backend client calls for prototype data
+- replacing the app with a single isolated static demo page
 
 ## Alignment And Simplification
 
 Keep these areas aligned with the real frontend when practical:
 
 - Vite + Vue 3 + Vue Router + Tailwind CSS v4
-- page/component/data/style directory split
+- route names and URL shape for community, search, tutorials, project, and editor surfaces
+- page/component/API-style directory split
 - semantic token naming and UI-facing class style
 - typography, spacing, radius, shadow, and color conventions
 - `src/styles/app.css`, especially the `@theme inline` bridge and base presentation rules
@@ -61,8 +92,10 @@ Keep these areas aligned with the real frontend when practical:
 At the same time, keep the prototype simpler than the real frontend:
 
 - replace business state with static data or minimal local state
-- replace real flows with a small local router
-- replace product actions with no-op handlers or local feedback
+- replace real APIs with local functions returning mock data
+- replace product actions with local feedback
+- replace game/project runtime surfaces with static placeholder previews; do not copy SPX engine assets or parse XBP files
+- do not recreate `/docs/*` pages or `src/widgets/*` entry surfaces because they are not end-user prototype UI
 - omit infrastructure and edge-case handling unless it changes the visual result
 
 ## Editing Rules
@@ -70,51 +103,38 @@ At the same time, keep the prototype simpler than the real frontend:
 When iterating on the prototype:
 
 1. Start from the design artifact that changed.
-2. Reuse existing prototype components before adding abstractions.
-3. Prefer pure presentational Vue components.
-4. Prefer Tailwind utility classes.
-5. Keep `src/styles/app.css` structurally aligned with the real frontend's `app.css`.
-6. If new token families are needed, add local `--ui-*` variables first, then expose them through local `@theme inline` mapping.
-7. If copying from the real frontend, copy the minimum presentational subset and strip production logic.
-
-## Long-Term Stability
-
-These rules are more important than reducing duplication:
-
-- Never reintroduce a direct dependency on the real frontend.
-- Prefer local copies over shared imports for theme, style, asset, and config surfaces.
-- Keep the prototype's public shape similar to the real frontend so later migration stays easy.
-- Keep the prototype's implementation simpler so preview work stays cheap.
-- If the prototype deliberately diverges from the real frontend, document that near the affected file or in `README.md`.
-
-Sync direction:
-
-1. Copy semantic token names and theme structure.
-2. Copy base presentation rules.
-3. Copy static assets locally when needed.
-4. Recreate markup and styling locally.
-5. Drop production-only logic.
-
-Do not treat prototype code as the source of truth for production code.
+2. Inspect the matching real frontend files.
+3. Reuse existing prototype components before adding abstractions.
+4. Prefer pure presentational Vue components.
+5. Prefer Tailwind utility classes.
+6. Keep `src/styles/app.css` structurally aligned with the real frontend's `app.css`.
+7. If new token families are needed, add local `--ui-*` variables first, then expose them through local `@theme inline` mapping.
+8. If copying from the real frontend, copy the minimum presentational subset and strip production logic.
 
 ## Validation
 
-After substantive changes:
+After substantive changes, run from `ui/prototype/`:
 
-- run `npm run build` inside `ui/prototype/`
+```bash
+npm run test:prototype
+npm run build
+```
 
-When UI structure or styling changes, also do the following when possible:
+When UI structure or styling changes, also:
 
 - run the dev server from `ui/prototype/`
 - open the preview in a browser
 - verify the main route renders
-- verify any local preview interaction still works
+- verify changed pages are accessible
+- verify important unchanged pages still load
+- verify navigation, search, course-card navigation, project pages, and editor preview flows when relevant
 
 Before finishing, confirm:
 
 - no import points into `spx-gui/`
 - no config references the real frontend
-- the prototype still behaves as a standalone app
+- no real backend calls exist
+- the prototype still behaves as a standalone offline app
 
 ## Keep This File Updated
 
@@ -125,6 +145,7 @@ Update this file when any of the following changes:
 - the allowed relationship with the real frontend
 - the validation flow
 - the local prototype architecture
+- the mock API/data strategy
 - the sync strategy for theme, asset, or config surfaces
 
-If a change creates pressure to depend on the real frontend directly, document the local alternative here instead.
\ No newline at end of file
+If a change creates pressure to depend on the real frontend directly, document the local alternative here instead.
diff --git a/ui/prototype/README.md b/ui/prototype/README.md
index 9a5039cfc6..306e578c6a 100644
--- a/ui/prototype/README.md
+++ b/ui/prototype/README.md
@@ -1,8 +1,8 @@
 # XBuilder Prototype Preview
 
-这是一个独立的 UI 原型工程，用来预览 `ui/pages/spx/tutorial.pen` 对应的设计实现。
+这是一个独立的 XBuilder 前端原型工程，用来在 Design PR 阶段预览页面结构、视觉样式和基础交互。
 它保持与真实前端相近的组织方式和技术栈：基于 Vite、Vue 3、Vue Router、Tailwind CSS v4，按页面、
-组件、数据和样式拆分；主题 token、基础排版和字体资源尽量与真实前端保持一致，但不包含业务逻辑，也不直接依赖真实前端项目。
+组件、mock API、数据和样式拆分；主题 token、基础排版和字体资源尽量与真实前端保持一致，但不直接依赖真实前端项目，也不调用服务端。
 
 ## Run
 
@@ -19,14 +19,24 @@ http://127.0.0.1:5174/
 
 ## Scope
 
-- `/` 重定向到 `/tutorials`
-- `/tutorials` 使用 prototype 页面，并直接引用 `ui/images` 中的设计资源
+- `/`、`/explore`、`/search`、`/user/:nameInput` 以及 `/user/:nameInput/projects|likes|followers|following` 复刻社区和用户主页结构
+- `/project/:ownerInput/:nameInput` 复刻项目详情、运行预览、owner、说明、remix、release history 和相关项目区域
+- `/tutorials`、`/course-series/:courseSeriesIdInput`、`/course/:courseSeriesIdInput/:courseIdInput/start` 复刻教程主流程
+- `/editor/:ownerNameInput/:projectNameInput/:inEditorPath*` 提供离线编辑器预览，并包含 sprite editor 局部 prototype surface
+- `/sign-in/callback`、`/sign-in/token` 提供本地模拟登录页面，不触发真实鉴权
 - 样式通过 Tailwind v4 utility class 实现，并在 `src/styles/app.css` 中维护与真实前端接近的 `@theme inline` token 映射
-- 本地 mock 教程数据与卡片点击反馈
-- 导航、banner、列表和页脚都保留为纯展示层实现
+- 数据由 `src/apis/*` 和 `src/data/mock.ts` 提供，全部为本地假数据；导航、搜索、课程卡片跳转、项目页、编辑器局部交互均为本地状态
 
 ## Constraints
 
 - 这个目录应始终可单独安装、单独启动、单独构建
 - 可以复用 `ui/images` 这类设计资源，但不要直接 import 真实前端项目中的代码或配置
-- 如需模拟交互，只保留用于预览 UI 的最小本地状态
+- 不要加入真实 `fetch`、`axios`、鉴权、持久化、OpenAPI 服务加载或服务端状态
+- 不复刻 `/docs/*` 页面、`src/widgets/*` entry surface、SPX engine runtime 或 XBP 解析逻辑；项目运行区域使用静态占位预览
+
+## Validate
+
+```bash
+npm run test:prototype
+npm run build
+```
diff --git a/ui/prototype/package.json b/ui/prototype/package.json
index 03f212c479..d456e72160 100644
--- a/ui/prototype/package.json
+++ b/ui/prototype/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test:prototype": "node scripts/check-prototype.mjs"
   },
   "dependencies": {
     "@tailwindcss/vite": "4.2.2",
diff --git a/ui/prototype/scripts/check-prototype.mjs b/ui/prototype/scripts/check-prototype.mjs
new file mode 100644
index 0000000000..e760398c6d
--- /dev/null
+++ b/ui/prototype/scripts/check-prototype.mjs
@@ -0,0 +1,875 @@
+import { readFileSync, readdirSync, statSync } from 'node:fs'
+import { join, relative } from 'node:path'
+
+// Prototype contract check:
+// keep this app offline and aligned with the real frontend surfaces we intentionally mirror,
+// while rejecting production-only runtime/docs/widget artifacts that should not be copied here.
+const root = new URL('..', import.meta.url).pathname
+const srcRoot = join(root, 'src')
+
+function read(path) {
+  return readFileSync(join(root, path), 'utf8')
+}
+
+function walk(dir) {
+  return readdirSync(dir).flatMap((entry) => {
+    const path = join(dir, entry)
+    if (entry === 'node_modules' || entry === 'dist') return []
+    if (statSync(path).isDirectory()) return walk(path)
+    return [path]
+  })
+}
+
+const failures = []
+const sourceFiles = walk(srcRoot).filter((path) => /\.(ts|vue|css)$/.test(path))
+const router = read('src/router.ts')
+const communityHome = read('src/pages/community/home.vue')
+const communityExplore = read('src/pages/community/explore.vue')
+const communityProject = read('src/pages/community/project.vue')
+const guestBanner = read('src/components/community/home/GuestBanner.vue')
+const navbar = read('src/components/community/CommunityNavbar.vue')
+const projectsSection = read('src/components/community/ProjectsSection.vue')
+const projectCard = read('src/components/project/ProjectCard.vue')
+const app = read('src/App.vue')
+const styles = read('src/styles/app.css')
+const mockData = read('src/data/mock.ts')
+const editorPage = read('src/pages/editor/index.vue')
+const quickConfigBackIcon = read('src/assets/editor/quick-config/back.svg')
+const codeZoomInIcon = read('src/assets/editor/code-editor/zoom-in.svg')
+const codeZoomOutIcon = read('src/assets/editor/code-editor/zoom-out.svg')
+const codeZoomResetIcon = read('src/assets/editor/code-editor/zoom-reset.svg')
+const codeCloseCircleIcon = read('src/assets/editor/code-editor/close-circle.svg')
+const tutorialIcon = read('src/assets/editor/navbar-icons/tutorial.svg')
+const editorTimerIcon = read('src/assets/editor/ui-icons/timer.svg')
+const editorStatusIcon = read('src/assets/editor/ui-icons/status.svg')
+const editorSoundIcon = read('src/assets/editor/ui-icons/sound.svg')
+const editorArrowDownIcon = read('src/assets/editor/ui-icons/arrow-down.svg')
+const editorProjectFileIcon = read('src/assets/editor/navbar-icons/file.svg')
+const navbarArrowMiniIcon = read('src/assets/navbar-icons/arrow-mini.svg')
+const editorEyeOffIcon = read('src/assets/editor/ui-icons/eye-off.svg')
+const editorPlusIcon = read('src/assets/editor/ui-icons/plus.svg')
+const editorPublishIcon = read('src/assets/editor/ui-icons/publish.svg')
+const editorLoadingIcon = read('src/assets/editor/ui-icons/loading.svg')
+const editorMonitorIcon = read('src/assets/editor/widget/monitor.svg')
+const projectRunner = read('src/components/project/ProjectRunner.vue')
+const prototypeButton = read('src/components/ui/UIButton.vue')
+const copilot = read('src/components/copilot/Copilot.vue')
+const communityApi = read('src/apis/community.ts')
+const centeredWrapper = read('src/components/community/CenteredWrapper.vue')
+const prototypeTag = read('src/components/ui/UITag.vue')
+const prototypeTab = read('src/components/ui/UITab.vue')
+const prototypeSpriteItem = read('src/components/editor/SpriteItem.vue')
+const prototypeCardHeader = read('src/components/ui/UICardHeader.vue')
+const publishProjectModal = read('src/components/editor/PublishProjectModal.vue')
+const spriteGeneratorModal = read('src/components/editor/SpriteGeneratorModal.vue')
+
+for (const route of [
+  '/',
+  '/explore',
+  '/search',
+  '/user/:nameInput',
+  'projects',
+  'likes',
+  'followers',
+  'following',
+  '/project/:ownerInput/:nameInput',
+  '/editor',
+  '/editor/:ownerNameInput/:projectNameInput/:inEditorPath*',
+  '/tutorials',
+  '/course-series/:courseSeriesIdInput',
+  '/course/:courseSeriesIdInput/:courseIdInput/start',
+  '/sign-in/callback',
+  '/sign-in/token',
+  '/share/:owner/:name',
+  '/:pathMatch(.*)*'
+]) {
+  if (!router.includes(route)) failures.push(`missing route: ${route}`)
+}
+
+for (const requiredFile of [
+  'src/apis/community.ts',
+  'src/apis/project.ts',
+  'src/apis/tutorials.ts',
+  'src/assets/projects/weathergggg/thumbnail.jpg',
+  'src/assets/projects/niu-run/thumbnail.jpeg',
+  'src/assets/editor/navbar-icons/tutorial.svg',
+  'src/assets/editor/ui-icons/timer.svg',
+  'src/assets/editor/ui-icons/status.svg',
+  'src/assets/editor/ui-icons/sound.svg',
+  'src/assets/editor/ui-icons/arrow-down.svg',
+  'src/assets/editor/navbar-icons/file.svg',
+  'src/assets/editor/ui-icons/plus.svg',
+  'src/assets/editor/ui-icons/publish.svg',
+  'src/assets/editor/ui-icons/loading.svg',
+  'src/assets/editor/widget/monitor.svg',
+  'src/components/project/ProjectRunner.vue',
+  'src/components/editor/SpriteItem.vue',
+  'src/components/editor/PublishProjectModal.vue',
+  'src/components/editor/SpriteGeneratorModal.vue',
+  'src/components/ui/UICardHeader.vue',
+  'src/components/community/home/GuestBanner.vue',
+  'src/pages/community/index.vue',
+  'src/pages/community/project.vue',
+  'src/pages/community/user/overview.vue',
+  'src/pages/community/user/projects.vue',
+  'src/pages/community/user/likes.vue',
+  'src/pages/community/user/followers.vue',
+  'src/pages/community/user/following.vue',
+  'src/pages/editor/index.vue',
+  'src/pages/sign-in/callback.vue',
+  'src/pages/sign-in/token.vue',
+  'src/pages/tutorials/course-series.vue',
+  'src/pages/tutorials/course-start.vue'
+]) {
+  try {
+    statSync(join(root, requiredFile))
+  } catch {
+    failures.push(`missing file: ${requiredFile}`)
+  }
+}
+
+for (const forbiddenPath of [
+  'public/spx_2.0.0',
+  'src/assets/projects/weathergggg/Weathergggg.xbp',
+  'src/assets/projects/niu-run/niu-run.xbp',
+  'src/pages/docs',
+  'src/widgets'
+]) {
+  try {
+    statSync(join(root, forbiddenPath))
+    failures.push(`production-only prototype artifact must not exist: ${forbiddenPath}`)
+  } catch {
+    // Expected: these surfaces are intentionally not copied into the prototype.
+  }
+}
+
+if (router.includes('/docs') || router.includes('docs-api') || router.includes('docs-ui-design')) {
+  failures.push('prototype router must not include docs routes because docs are not end-user UI')
+}
+
+if (mockData.includes('.xbp') || mockData.includes('Local XBP')) {
+  failures.push('mock project data must not depend on bundled XBP files')
+}
+
+for (const renamedComponent of [
+  'PrototypeCopilot.vue',
+  'PrototypeProjectRunner.vue',
+  'PrototypeSpriteItem.vue',
+  'PrototypeButton.vue',
+  'PrototypeCard.vue',
+  'PrototypeCardHeader.vue',
+  'PrototypeTab.vue',
+  'PrototypeTabs.vue',
+  'PrototypeTag.vue'
+]) {
+  for (const sourceFile of sourceFiles) {
+    const rel = relative(root, sourceFile)
+    const text = readFileSync(sourceFile, 'utf8')
+    if (text.includes(renamedComponent)) failures.push(`component filename must not keep Prototype prefix: ${rel}`)
+  }
+}
+
+if (communityHome.includes('Build, play, and remix games') || communityHome.includes('ai-boy.png')) {
+  failures.push('community home must mirror real community home, not render a standalone marketing hero')
+}
+
+for (const bannerToken of ['Join XBuilder', 'Build and share your projects', 'Join now', 'guest-banner-bg.png']) {
+  if (!guestBanner.includes(bannerToken)) failures.push(`guest home banner must mirror real token: ${bannerToken}`)
+}
+
+for (const signedInOnlyToken of ['Your projects', '/explore?o=following']) {
+  if (communityHome.includes(signedInOnlyToken)) failures.push(`default community home must render guest state, not signed-in token: ${signedInOnlyToken}`)
+}
+
+if (navbar.includes('to="/explore"')) {
+  failures.push('community navbar must mirror dev branch and avoid a standalone explore icon entry')
+}
+
+if (communityExplore.includes('Browse fake local projects')) {
+  failures.push('community explore header must not render prototype-only helper copy')
+}
+
+if (
+  !communityExplore.includes('border-b border-grey-400 bg-grey-100') ||
+  !communityExplore.includes('rounded-md border px-4') ||
+  !communityExplore.includes("'border-primary-main bg-primary-main text-grey-100'")
+) {
+  failures.push('community explore header filters must mirror the real CommunityHeader chip radio styling')
+}
+
+if (projectCard.includes('remixes')) {
+  failures.push('project card must mirror dev branch metadata and show updated time instead of remix count')
+}
+
+if (communityProject.includes('Remixed from {{ project.remixedFrom.title }}')) {
+  failures.push('project page remixed-from copy must mirror real text/link structure')
+}
+
+if (!communityProject.includes('type="primary"') || !communityProject.includes('type="secondary"') || communityProject.includes('!rounded-md')) {
+  failures.push('project page action buttons must use prototype button variants instead of ad-hoc overrides')
+}
+
+if (!communityProject.includes('release-timeline') || !communityProject.includes('group/timeline-item')) {
+  failures.push('project page release history must render timeline-style release notes')
+}
+
+if (!projectCard.includes('updatedAt')) {
+  failures.push('project card must render updatedAt metadata')
+}
+
+for (const route of ['/explore?o=likes', '/explore?o=remix']) {
+  if (!communityHome.includes(route)) failures.push(`community home must use real explore route: ${route}`)
+}
+
+if (!navbar.includes('Sign in') || !navbar.includes('openSignInModal') || !navbar.includes('role="dialog"')) {
+  failures.push('community navbar must expose the real guest sign-in entry')
+}
+
+if (!projectsSection.includes('link-primary flex items-center text-lg')) {
+  failures.push('projects section more link must mirror real RouterUILink/link-primary styling')
+}
+
+if (projectsSection.includes('stroke="currentColor"')) {
+  failures.push('projects section more link must use real arrowRightSmall icon, not chevron stroke icon')
+}
+
+if (!app.includes('Copilot')) {
+  failures.push('prototype must mount the offline Copilot surface globally')
+}
+
+if (copilot.includes('const isOpen = ref(true)')) {
+  failures.push('offline Copilot must default to collapsed so it does not cover editor panels')
+}
+
+if (
+  projectRunner.includes('<iframe') ||
+  projectRunner.includes('initEngine') ||
+  projectRunner.includes('loadProjectFiles') ||
+  projectRunner.includes('fetch(') ||
+  projectRunner.includes('spx_2.0.0') ||
+  projectRunner.includes('fflate')
+) {
+  failures.push('project runner must be a static offline placeholder, not a copied SPX runtime')
+}
+
+if (
+  !projectRunner.includes("const state = ref<'initial' | 'loading' | 'running'>('initial')") ||
+  !projectRunner.includes('const loading = computed(() => state.value === \'loading\')') ||
+  !projectRunner.includes('window.setTimeout') ||
+  !projectRunner.includes(':loading="loading"') ||
+  !prototypeButton.includes("import loadingIcon from '@/assets/editor/ui-icons/loading.svg?raw'") ||
+  !prototypeButton.includes('loading?: boolean') ||
+  !prototypeButton.includes('v-if="loading"') ||
+  !prototypeButton.includes('animate-spin') ||
+  !editorLoadingIcon.includes('M6.99975 1.74999')
+) {
+  failures.push('project runner Run button must expose a local UIButton loading animation before running')
+}
+
+if (copilot.includes('const panelHeight =')) {
+  failures.push('copilot drag clamp must not compute unused panelHeight on every move')
+}
+
+if (!copilot.includes('let resizeTimer') || !copilot.includes('setTimeout(persistPanelPosition, 100)')) {
+  failures.push('copilot resize persistence must be debounced')
+}
+
+if (
+  !copilot.includes("right: isOpen.value ? `${panelPosition.value.right}px` : '-340px'") ||
+  !copilot.includes('class="copilot-trigger right visible group') ||
+  !copilot.includes("-translate-x-full") ||
+  !copilot.includes("bg-[linear-gradient(90deg,#c390ff_0%,#72bbff_100%)]") ||
+  copilot.includes('<style scoped>') ||
+  copilot.includes('.copilot-panel.closed .footer-wrapper') ||
+  copilot.includes('width: 64px') ||
+  copilot.includes('height: 64px')
+) {
+  failures.push('copilot launcher must use Tailwind utilities and mirror the real side-attached trigger')
+}
+
+if (/if \(normalized === ''\) return projects\s*(?:\n|;)/.test(communityApi)) {
+  failures.push('empty community search must return a defensive copy of mock projects')
+}
+
+if (communityApi.includes('Math.max(4, offset + 4)')) {
+  failures.push('user likes pagination must clamp missing users before slicing')
+}
+
+if (!/function handleKeydown\(event: KeyboardEvent\) \{\s*if \(event\.key === 'Escape'\) \{\s*closeProjectMenu\(\)/.test(navbar)) {
+  failures.push('community navbar Escape handler must close the project menu')
+}
+
+if (centeredWrapper.includes('w-310') || centeredWrapper.includes('w-247')) {
+  failures.push('centered wrapper must use explicit arbitrary width classes instead of undefined numeric widths')
+}
+
+if (!styles.includes('--ui-font-size-lg: 15px;')) {
+  failures.push('prototype typography tokens must mirror real frontend lg size at 15px')
+}
+
+for (const localProject of ['weathergggg', 'niu-run']) {
+  if (!mockData.includes(`name: '${localProject}'`)) {
+    failures.push(`mock data must register local project: ${localProject}`)
+  }
+}
+
+if (editorPage.includes('Inspector') || editorPage.includes('Editor sprite prototype surface')) {
+  failures.push('editor page must mirror the real dev editor, not the old simplified inspector prototype')
+}
+
+if (!editorPage.includes("back.svg?raw") || quickConfigBackIcon.includes('M15 18l-6-6')) {
+  failures.push('editor quick config back control must use the real back icon asset')
+}
+
+if (!editorPage.includes("import UIButton from '@/components/ui/UIButton.vue'") || !editorPage.includes('<UIButton') || editorPage.includes('class="format-button" type="button"')) {
+  failures.push('editor format action must use the prototype UI Button component')
+}
+
+if (
+  !editorPage.includes("import UITag from '@/components/ui/UITag.vue'") ||
+  !editorPage.includes('<UITag') ||
+  editorPage.includes('project-menu-badge') ||
+  editorPage.includes('.profile-menu-item span + span')
+) {
+  failures.push('editor labels must use the prototype UI Tag component instead of ad-hoc label styles')
+}
+
+if (!prototypeTag.includes('--ui-color-grey-900') || !prototypeTag.includes('--ui-color-grey-300') || !prototypeTag.includes('--ui-color-grey-400')) {
+  failures.push('prototype tag must mirror the real default tag grey tokens')
+}
+
+if (
+  !editorPage.includes("import UITabs from '@/components/ui/UITabs.vue'") ||
+  !editorPage.includes("import UITab from '@/components/ui/UITab.vue'") ||
+  !editorPage.includes('<UITabs') ||
+  !editorPage.includes('code-tabs flex h-[47px] items-end overflow-hidden') ||
+  !editorPage.includes('class="h-full flex-1 gap-6"') ||
+  !editorPage.includes('<UITab value="costumes">Costumes</UITab>') ||
+  editorPage.includes('class="tab" :class') ||
+  !prototypeTab.includes('h-full min-w-0') ||
+  !prototypeTab.includes('overflow-hidden') ||
+  !prototypeTab.includes('whitespace-nowrap') ||
+  !read('src/components/ui/UITabs.vue').includes('m-0 flex min-w-0 list-none overflow-hidden') ||
+  !prototypeTab.includes('text-xl/8') ||
+  !prototypeTab.includes('text-grey-800 hover:text-grey-1000') ||
+  !prototypeTab.includes('border-grey-1000 text-grey-1000')
+) {
+  failures.push('editor tabs must use the local prototype tab component mirroring UITab states and typography')
+}
+
+if (
+  !editorPage.includes("import UICardHeader from '@/components/ui/UICardHeader.vue'") ||
+  !editorPage.includes('<UICardHeader class="panel-header justify-between gap-3">') ||
+  !editorPage.includes('<h2 class="m-0 flex-1 text-xl font-normal text-title">Preview</h2>') ||
+  !editorPage.includes('<UICardHeader class="asset-header justify-between">') ||
+  !editorPage.includes('<UICardHeader class="stage-panel-header justify-center">Stage</UICardHeader>') ||
+  !editorPage.includes('<UICardHeader class="map-card-header justify-between">') ||
+  !prototypeCardHeader.includes('h-12 items-center border-b border-grey-400 px-3 text-xl text-title') ||
+  editorPage.includes('.panel-header h2') ||
+  editorPage.includes('.asset-header h2') ||
+  editorPage.includes('.map-card-header h2')
+) {
+  failures.push('editor module headers must mirror UICardHeader typography with local UICardHeader and text-title tokens')
+}
+
+if (
+  !editorPage.includes('.stage-thumb.active {') ||
+  !editorPage.includes('background: var(--ui-color-primary-200);') ||
+  !editorPage.includes('width: 56px;') ||
+  !editorPage.includes('height: 56px;') ||
+  !editorPage.includes('margin: 12px 0;') ||
+  !editorPage.includes('width: 44px;') ||
+  !editorPage.includes('height: 44px;') ||
+  !editorPage.includes('.stage-thumb:hover:not(.active)') ||
+  !editorPage.includes('<div class="stage-divider" aria-hidden="true"></div>') ||
+  !editorPage.includes('.stage-divider {') ||
+  !editorPage.includes('width: 40px;') ||
+  !editorPage.includes('height: 1px;') ||
+  !editorPage.includes('background: var(--ui-color-dividing-line-2);') ||
+  !editorPage.includes('.stage-entry.active {\n  color: var(--ui-color-primary-main);') ||
+  !editorPage.includes('.stage-entry:hover:not(.active)') ||
+  !editorPage.includes('.stage-entry-icon {\n  width: 24px;\n  height: 24px;') ||
+  editorPage.includes('.stage-entry.active {\n  color: var(--ui-color-grey-800);') ||
+  editorPage.includes('.stage-entry:hover {\n  background: var(--ui-color-grey-300);')
+) {
+  failures.push('stage panel entries must mirror StagePanel transparent entry states and UIIcon sizing')
+}
+
+if (
+  !editorPage.includes('class="editor-asset-item sound-asset-item"') ||
+  !editorPage.includes('class="sound-wave-icon"') ||
+  !editorPage.includes('class="asset-item-title">{{ sound.name }}</span>') ||
+  !editorPage.includes('.editor-asset-item .asset-item-title') ||
+  /\\.editor-asset-item\\s+span\\s*\\{/.test(editorPage)
+) {
+  failures.push('editor sound asset item must preserve the UIEditorSoundItem player size and scope text styles to the title only')
+}
+
+if (
+  !editorPage.includes('type SoundEditState = {') ||
+  !editorPage.includes('const selectedSoundEdit = computed') ||
+  !editorPage.includes('const selectedSoundEditing = computed') ||
+  !editorPage.includes('const selectedSoundDuration = computed') ||
+  !editorPage.includes('function startSoundRangeDrag') ||
+  !editorPage.includes('function updateSelectedSoundGain') ||
+  !editorPage.includes('function resetSelectedSoundEdit') ||
+  !editorPage.includes('function saveSelectedSoundEdit') ||
+  !editorPage.includes('aria-label="Sound waveform trim editor"') ||
+  !editorPage.includes('aria-label="Trim sound start"') ||
+  !editorPage.includes('aria-label="Trim sound end"') ||
+  !editorPage.includes('role="slider" aria-label="Sound volume"') ||
+  !editorPage.includes('v-if="selectedSoundEditing" class="sound-edit-actions"') ||
+  !editorPage.includes('>Cancel</UIButton>') ||
+  !editorPage.includes('>Save</UIButton>') ||
+  !editorPage.includes('--sound-range-left') ||
+  !editorPage.includes('--sound-gain')
+) {
+  failures.push('editor sound detail must expose local waveform trim, volume editing, and Cancel/Save actions')
+}
+
+if (
+  !editorPage.includes("import monitorWidgetIcon from '@/assets/editor/widget/monitor.svg?raw'") ||
+  !editorPage.includes('class="editor-asset-item widget-asset-item"') ||
+  !editorPage.includes('class="widget-icon" v-html="monitorWidgetIcon"') ||
+  !editorPage.includes('class="asset-item-title">{{ widget.name }}</span>') ||
+  !editorPage.includes('.widget-icon {\n  width: 40px;\n  height: 40px;') ||
+  !editorPage.includes('margin: 10px 0 12px;') ||
+  !editorPage.includes('.widget-icon :deep(svg) {\n  width: 100%;\n  height: 100%;') ||
+  editorPage.includes('.widget-icon {\n  width: 44px;') ||
+  /\\.widget-icon\\s*\\{[^}]*background: var\\(--ui-color-primary-100\\);/s.test(editorPage) ||
+  !editorMonitorIcon.includes('M27.8989 5.90625')
+) {
+  failures.push('editor widget asset item must mirror UIEditorWidgetItem with the monitor icon and component icon sizing')
+}
+
+if (
+  !editorPage.includes('category-rail flex flex-none flex-col gap-3 border-r border-grey-400 px-1 py-3') ||
+  !editorPage.includes('category flex h-13 w-13 cursor-pointer flex-col items-center justify-center rounded-md') ||
+  !editorPage.includes('text-center text-[10px]/4') ||
+  !editorPage.includes("category-icons/event.svg?raw") ||
+  !editorPage.includes('v-html="category.icon"') ||
+  !editorPage.includes("'bg-grey-400 text-grey-1000'") ||
+  !editorPage.includes("'bg-transparent text-grey-800 hover:bg-grey-300'") ||
+  editorPage.includes(':src="category.icon"') ||
+  editorPage.includes('.category-rail {') ||
+  editorPage.includes('.category.active')
+) {
+  failures.push('editor code category rail must mirror APIReferenceUI spacing and states with Tailwind utilities')
+}
+
+if (
+  !editorPage.includes("function: 'text-[#b08a01]'") ||
+  !editorPage.includes("identifier: 'text-[#0774cd]'") ||
+  !editorPage.includes("number: 'text-[#139707]'") ||
+  !editorPage.includes("string: 'text-[#9c2c2c]'") ||
+  !editorPage.includes("keyword: 'text-[#892ba8]'") ||
+  !editorPage.includes("getSourceParts(line[1])") ||
+  editorPage.includes("class=\"token-") ||
+  editorPage.includes("`token-${part.type}`") ||
+  editorPage.includes("{ text: 'KeyA', type: 'custom' }")
+) {
+  failures.push('editor code snippets must follow the local XBuilder code theme mapping instead of ad-hoc token classes')
+}
+
+if (
+  !editorPage.includes('function startSnippetHorizontalDrag(event: PointerEvent)') ||
+  !editorPage.includes('function moveSnippetHorizontalDrag(event: PointerEvent)') ||
+  !editorPage.includes('function endSnippetHorizontalDrag(event: PointerEvent)') ||
+  (editorPage.match(/@pointerdown="startSnippetHorizontalDrag"/g) ?? []).length < 2 ||
+  !editorPage.includes('overflow-x: auto;') ||
+  !editorPage.includes('scrollbar-width: none;') ||
+  !editorPage.includes('.events-list::-webkit-scrollbar') ||
+  !editorPage.includes('min-width: max-content;') ||
+  !editorPage.includes('width: max-content;')
+) {
+  failures.push('editor snippets panel must support horizontal drag scrolling for long code snippets')
+}
+
+if (
+  !editorPage.includes('.editor-navbar') ||
+  !editorPage.includes('background: inherit;') ||
+  editorPage.includes('.editor-navbar {\n  height: 56px;\n  display: grid;\n  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);\n  align-items: center;\n  background: inherit;\n  border-bottom:')
+) {
+  failures.push('editor navbar must inherit page background without a bottom border')
+}
+
+if (
+  !editorPage.includes('<Teleport to="body">') ||
+  !editorPage.includes('spriteMenuPosition') ||
+  !editorPage.includes('position: fixed;') ||
+  !editorPage.includes('toggleSpriteVisibility') ||
+  !editorPage.includes('duplicateSprite') ||
+  !editorPage.includes('removeSprite')
+) {
+  failures.push('editor sprite options dropdown must escape panel clipping and keep local menu actions')
+}
+
+if (!editorPage.includes('grid-template-columns: repeat(4, 88px);') || !editorPage.includes('grid-auto-rows: 88px;')) {
+  failures.push('editor sprites panel must keep fixed 4-column sprite item rows')
+}
+
+if (
+  !editorPage.includes("import SpriteItem from '@/components/editor/SpriteItem.vue'") ||
+  (editorPage.match(/<SpriteItem/g) ?? []).length < 2 ||
+  editorPage.includes('class="sprite-card"') ||
+  !prototypeSpriteItem.includes('.prototype-sprite-item.active::before') ||
+  !prototypeSpriteItem.includes('width: 88px;') ||
+  !prototypeSpriteItem.includes('height: 88px;')
+) {
+  failures.push('editor and map sprite lists must share the prototype sprite item component')
+}
+
+if (
+  !editorPage.includes('.map-sprite-config') ||
+  !editorPage.includes('position: absolute;') ||
+  !editorPage.includes('bottom: 0;') ||
+  !editorPage.includes('box-shadow: 0 -12px 24px')
+) {
+  failures.push('map sprite config must render as an overlay drawer above the sprite list')
+}
+
+if (
+  !editorPage.includes('map-button-group') ||
+  !editorPage.includes('Map sprite rotation style') ||
+  !editorPage.includes('Map sprite visibility') ||
+  !editorPage.includes('map-checkbox-group') ||
+  editorPage.includes('<button type="button">Normal</button>') ||
+  editorPage.includes('<button type="button">Visible</button>') ||
+  editorPage.includes('<button type="button">No physics</button>')
+) {
+  failures.push('map sprite basic config must use component-library style button groups and checkboxes')
+}
+
+if (
+  !editorPage.includes('<span class="project-name-edit-icon" v-html="editIcon"></span>') ||
+  editorPage.includes('✎') ||
+  !editorPage.includes('.map-config-icon.collapse :deep(svg)') ||
+  !editorPage.includes("import arrowDownIcon from '@/assets/editor/ui-icons/arrow-down.svg?raw'") ||
+  !editorPage.includes('aria-label="Collapse global config" v-html="arrowDownIcon"') ||
+  !editorPage.includes('aria-label="Collapse sprite config" @click="mapSpriteConfigExpanded = false" v-html="arrowDownIcon"') ||
+  !editorArrowDownIcon.includes('M7.13182 10.2639') ||
+  editorPage.includes('.map-config-icon svg {\n  width: 16px;\n  height: 16px;\n  fill: none;')
+) {
+  failures.push('editor edit icons must use the component-library edit SVG without ad-hoc stroke styling')
+}
+
+if (
+  !editorPage.includes("import settingTimerIcon from '@/assets/editor/ui-icons/timer.svg?raw'") ||
+  !editorPage.includes("import settingStatusIcon from '@/assets/editor/ui-icons/status.svg?raw'") ||
+  !editorPage.includes("import settingSoundIcon from '@/assets/editor/ui-icons/sound.svg?raw'") ||
+  !editorPage.includes('<span class="setting-icon" v-html="settingTimerIcon"></span>') ||
+  !editorPage.includes('<span class="setting-icon" v-html="settingStatusIcon"></span>') ||
+  !editorPage.includes('<span class="setting-icon" v-html="settingSoundIcon"></span>') ||
+  !editorPage.includes('color: currentColor;') ||
+  !editorTimerIcon.includes('M5.49996 2') ||
+  !editorStatusIcon.includes('M14.9163 11.0909') ||
+  !editorSoundIcon.includes('M6.66665 14.6666') ||
+  /[◷●♪⌄▣]/.test(editorPage)
+) {
+  failures.push('editor animation and panel icons must use copied UIIcon SVG assets with component token sizing and color')
+}
+
+if (
+  !editorPage.includes("import plusIcon from '@/assets/editor/ui-icons/plus.svg?raw'") ||
+  !editorPage.includes('<span aria-hidden="true" v-html="plusIcon"></span>') ||
+  !editorPage.includes('.asset-header button > span,\n.asset-header button > span :deep(svg)') ||
+  !editorPage.includes('color: var(--ui-color-grey-800);') ||
+  !editorPage.includes('.asset-header button:active') ||
+  !editorPage.includes('background: var(--ui-color-grey-500);') ||
+  !editorPage.includes('.asset-header button:focus-visible') ||
+  !editorPlusIcon.includes('M12 2.125C12.4832 2.125') ||
+  editorPage.includes('aria-label="Add sprite"\n                  :aria-expanded="addSpriteMenuOpen"\n                  aria-haspopup="menu"\n                  @click.stop="toggleAddSpriteMenu"\n                >\n                  +')
+) {
+  failures.push('editor add sprite trigger must use the copied UIIcon plus asset with PanelHeader icon button states')
+}
+
+if (
+  !editorPage.includes("import publishActionIcon from '@/assets/editor/ui-icons/publish.svg?raw'") ||
+  !editorPage.includes('<span class="button-icon" aria-hidden="true" v-html="publishActionIcon"></span>') ||
+  !editorPage.includes('@click="openPublishModal"') ||
+  !editorPage.includes('.button-icon,\n.button-icon :deep(svg)') ||
+  !editorPage.includes('width: 16px;\n  height: 16px;') ||
+  !editorPublishIcon.includes('M12.0458 1.81972') ||
+  editorPage.includes('<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m21 3-7 18-4-8-8-4 19-6Z" /></svg>')
+) {
+  failures.push('editor publish action must use the copied UIIcon publish asset without hand-drawn stroke SVG')
+}
+
+if (
+  !editorPage.includes("import PublishProjectModal from '@/components/editor/PublishProjectModal.vue'") ||
+  !editorPage.includes('const publishModalOpen = ref(false)') ||
+  !editorPage.includes('const publishSubmitting = ref(false)') ||
+  !editorPage.includes('function openPublishModal()') ||
+  !editorPage.includes('function submitPublishProject()') ||
+  !editorPage.includes("action: openPublishModal") ||
+  !editorPage.includes('<PublishProjectModal') ||
+  !editorPage.includes('@publish="submitPublishProject"') ||
+  !publishProjectModal.includes('role="dialog"') ||
+  !publishProjectModal.includes('aria-modal="true"') ||
+  !publishProjectModal.includes('aria-labelledby="publish-project-title"') ||
+  !publishProjectModal.includes('Publish {{ projectDisplayName }}') ||
+  !publishProjectModal.includes('aria-label="Release description"') ||
+  !publishProjectModal.includes('aria-label="Project description"') ||
+  !publishProjectModal.includes('aria-label="Play instructions"') ||
+  !publishProjectModal.includes(':loading="submitting"') ||
+  !editorPage.includes('class="publish-toast" role="status"') ||
+  !publishProjectModal.includes('Published projects will be visible to all XBuilder users.') ||
+  !publishProjectModal.includes('.publish-modal {') ||
+  !publishProjectModal.includes('.publish-preview {')
+) {
+  failures.push('editor publish action must open a local project publish modal and complete with feedback')
+}
+
+if (
+  !editorPage.includes('const addAnimationMenuOpen = ref(false)') ||
+  !editorPage.includes('function toggleAddAnimationMenu(event: MouseEvent)') ||
+  !editorPage.includes('function handleGroupCostumesAsAnimation()') ||
+  !editorPage.includes('class="animation-add-menu"') ||
+  !editorPage.includes('Group costumes as animation') ||
+  !editorPage.includes('@click.stop="toggleAddAnimationMenu"') ||
+  !editorPage.includes('role="menuitem" @click="handleGroupCostumesAsAnimation"') ||
+  !editorPage.includes('.animation-add-menu {') ||
+  !editorPage.includes("target.closest('.animation-add-menu')")
+) {
+  failures.push('editor add animation button must expose the real add-options menu and trigger group-costumes behavior')
+}
+
+if (
+  !editorPage.includes('.project-menu,\n.profile-menu,\n.animation-add-menu,\n.asset-add-menu,\n.animation-options-menu,\n.asset-options-menu,\n.quick-layer-menu,\n.add-sprite-menu,\n.sprite-options-menu') ||
+  !editorPage.includes('box-shadow: var(--ui-box-shadow-sm);') ||
+  !editorPage.includes('overflow: hidden;') ||
+  !editorPage.includes('.project-menu-item,\n.profile-menu-user,\n.profile-menu-item,\n.animation-add-menu-item,\n.asset-add-menu-item,\n.animation-options-item,\n.asset-options-item,\n.quick-layer-menu button,\n.asset-header .add-sprite-menu-item,\n.map-card-header .add-sprite-menu-item,\n.sprite-options-item') ||
+  !editorPage.includes('padding: 8px 40px 8px 8px;') ||
+  !editorPage.includes('margin-top: 13px;') ||
+  !editorPage.includes('border-top: 1px solid var(--ui-color-dividing-line-2);') ||
+  editorPage.includes('box-shadow: var(--ui-box-shadow-md);\n}\n\n.hidden-mark')
+) {
+  failures.push('editor dropdown menus must share the local UIMenu/UIMenuItem style contract')
+}
+
+if (
+  !editorPage.includes('const animationMenuOpenFor = ref<string | null>(null)') ||
+  !editorPage.includes('const animationPendingRemoval = ref<AssetItem | null>(null)') ||
+  !editorPage.includes('function toggleAnimationMenu(animationId: string, event: MouseEvent)') ||
+  !editorPage.includes('function duplicateAnimation(animation: AssetItem)') ||
+  !editorPage.includes('function renameAnimation(animation: AssetItem)') ||
+  !editorPage.includes('function requestRemoveAnimation(animation: AssetItem)') ||
+  !editorPage.includes('function confirmRemoveAnimation()') ||
+  !editorPage.includes('class="animation-options-menu"') ||
+  !editorPage.includes('Duplicate') ||
+  !editorPage.includes('Rename') ||
+  !editorPage.includes('Remove') ||
+  !editorPage.includes('aria-label="Animation options"') ||
+  !editorPage.includes('role="dialog" aria-modal="true" aria-labelledby="remove-animation-title"') ||
+  !editorPage.includes('Preserve (the costumes will be moved to the sprite') ||
+  !editorPage.includes('@click="renameAnimation(selectedAnimation)"')
+) {
+  failures.push('editor animation list items must support duplicate, rename, and remove through the local item menu')
+}
+
+if (
+  !editorPage.includes('const addCostumeMenuOpen = ref(false)') ||
+  !editorPage.includes('const costumeMenuOpenFor = ref<string | null>(null)') ||
+  !editorPage.includes('function toggleAddCostumeMenu(event: MouseEvent)') ||
+  !editorPage.includes('function addCostumeFromLocalFile()') ||
+  !editorPage.includes('function toggleCostumeMenu(costumeId: string, event: MouseEvent)') ||
+  !editorPage.includes('function duplicateCostume(costume: AssetItem)') ||
+  !editorPage.includes('function renameCostume(costume: AssetItem)') ||
+  !editorPage.includes('function removeCostume(costume: AssetItem)') ||
+  !editorPage.includes('class="costume-options-menu asset-options-menu"') ||
+  !editorPage.includes('aria-label="Costume options"') ||
+  !editorPage.includes('Select local file') ||
+  !editorPage.includes(':disabled="costumes.length <= 1"') ||
+  !editorPage.includes('@click="renameCostume(selectedCostume)"') ||
+  !editorPage.includes("target.closest('.costume-options-menu')") ||
+  !editorPage.includes("target.closest('.costume-add-menu')")
+) {
+  failures.push('editor costume list must support add-options plus duplicate, rename, and guarded remove actions')
+}
+
+if (
+  !editorPage.includes('const spritePendingRename = ref<SpriteCard | null>(null)') ||
+  !editorPage.includes('const draftSpriteRenameName = ref') ||
+  !editorPage.includes('const spriteRenameError = ref') ||
+  !editorPage.includes('async function renameSprite(sprite: SpriteCard)') ||
+  !editorPage.includes('function submitSpriteRename()') ||
+  !editorPage.includes('role="dialog" aria-modal="true" aria-labelledby="rename-sprite-title"') ||
+  !editorPage.includes('aria-label="Sprite name"') ||
+  !editorPage.includes('A sprite with this name already exists.') ||
+  editorPage.includes("window.prompt('Rename sprite'")
+) {
+  failures.push('editor sprite rename action must use the local rename modal instead of a browser prompt')
+}
+
+if (
+  !prototypeSpriteItem.includes("import eyeOffIcon from '@/assets/editor/ui-icons/eye-off.svg?raw'") ||
+  !prototypeSpriteItem.includes('v-html="eyeOffIcon"') ||
+  !prototypeSpriteItem.includes('width: 16px;') ||
+  !prototypeSpriteItem.includes('height: 16px;') ||
+  !prototypeSpriteItem.includes('color: var(--ui-color-grey-700);') ||
+  prototypeSpriteItem.includes('⌁') ||
+  !editorEyeOffIcon.includes('M20.1133 7.53809')
+) {
+  failures.push('prototype sprite hidden state must use the copied UIIcon eyeOff asset at component icon size')
+}
+
+if (
+  !editorPage.includes("import SpriteGeneratorModal, { type SpriteGeneratorResult } from '@/components/editor/SpriteGeneratorModal.vue'") ||
+  !editorPage.includes('const spriteGenModalOpen = ref(false)') ||
+  !editorPage.includes('function openSpriteGenModal()') ||
+  !editorPage.includes('function addGeneratedSprite(result: SpriteGeneratorResult)') ||
+  !editorPage.includes('<SpriteGeneratorModal') ||
+  !editorPage.includes('@add-sprite="addGeneratedSprite"') ||
+  !editorPage.includes('@click="openSpriteGenModal"') ||
+  !spriteGeneratorModal.includes('role="dialog"') ||
+  !spriteGeneratorModal.includes('aria-modal="true"') ||
+  !spriteGeneratorModal.includes('aria-labelledby="sprite-gen-title"') ||
+  !spriteGeneratorModal.includes('Sprite Generator') ||
+  !spriteGeneratorModal.includes('aria-label="Sprite description"') ||
+  !spriteGeneratorModal.includes('Generated sprite candidates') ||
+  !spriteGeneratorModal.includes('class="sprite-gen-body"') ||
+  !spriteGeneratorModal.includes(":class=\"{ 'has-preview': generated }\"") ||
+  !spriteGeneratorModal.includes('class="sprite-gen-main-panel"') ||
+  !spriteGeneratorModal.includes('class="sprite-gen-preview-panel"') ||
+  !spriteGeneratorModal.includes('Generated sprite content editor') ||
+  !spriteGeneratorModal.includes('Costume') ||
+  !spriteGeneratorModal.includes('Animation') ||
+  !spriteGeneratorModal.includes('Minimize') ||
+  spriteGeneratorModal.includes('Generated sprite candidates will appear here.') ||
+  !spriteGeneratorModal.includes('style="width: 1076px; height: 800px"') ||
+  !spriteGeneratorModal.includes('selectedIndex') ||
+  editorPage.includes("addLocalSprite('ai')")
+) {
+  failures.push('editor Generate with AI menu item must open a local sprite generator modal and add a generated sprite')
+}
+
+if (
+  !editorPage.includes("activeQuickConfig === 'position'") ||
+  !editorPage.includes('X position input') ||
+  !editorPage.includes('Y position input') ||
+  !editorPage.includes('updateSelectedSpriteX') ||
+  !editorPage.includes('selectedSpriteCoordinate') ||
+  !editorPage.includes('getStageSpriteFrameStyle') ||
+  !editorPage.includes('startStageSpriteDrag') ||
+  !editorPage.includes('@pointerdown.stop.prevent="startStageSpriteDrag')
+) {
+  failures.push('editor sprite quick config must support coordinate display plus direct stage positioning and dragging')
+}
+
+if (
+  !editorPage.includes('getMapSpriteFrameStyle') ||
+  !editorPage.includes('selectedMapSpriteCoordinate') ||
+  !editorPage.includes('updateSelectedMapSpriteX') ||
+  !editorPage.includes('@pointerdown.stop.prevent="startMapSpriteDrag') ||
+  editorPage.includes('class="map-sprite-coordinate">-224, 74</span>') ||
+  editorPage.includes('<label><span>X</span><input value="-224" readonly /></label>') ||
+  editorPage.includes('.map-sprite-jaime {\n  left: 41%;') ||
+  editorPage.includes('.map-sprite-kai {\n  left: 68%;')
+) {
+  failures.push('map editor sprite positions and coordinate controls must be data-driven instead of hardcoded')
+}
+
+if (
+  !editorPage.includes("activeQuickConfig === 'layer'") ||
+  !editorPage.includes('Layer order options') ||
+  !editorPage.includes('moveSelectedSpriteLayer') ||
+  !editorPage.includes('Bring to front')
+) {
+  failures.push('editor sprite quick config must support layer order actions')
+}
+
+if (
+  !editorPage.includes("import UICard from '@/components/ui/UICard.vue'") ||
+  !editorPage.includes('<UICard class="map-card">') ||
+  !editorPage.includes('<UICard class="map-card map-sprites-card">')
+) {
+  failures.push('editor map side cards must use the prototype card component instead of hand-rolled sections')
+}
+
+if (
+  !editorPage.includes("zoom-in.svg?raw") ||
+  !editorPage.includes("zoom-out.svg?raw") ||
+  !editorPage.includes("zoom-reset.svg?raw") ||
+  !editorPage.includes('zoomCodeEditor') ||
+  editorPage.includes('>⌕<') ||
+  editorPage.includes('>⌔<') ||
+  editorPage.includes('>⊜<')
+) {
+  failures.push('editor code zoom controls must use real zoom icons and local zoom actions')
+}
+
+if (!codeZoomInIcon.includes('11.6667 8.54167H9.79167') || !codeZoomOutIcon.includes('11.6667 8.54167H6.66667') || !codeZoomResetIcon.includes('11.6667 7.29167H6.66667')) {
+  failures.push('editor code zoom icon assets must mirror the real code editor zoom icons')
+}
+
+if (
+  !editorPage.includes("close-circle.svg?raw") ||
+  !editorPage.includes('mainCodeDocumentTab') ||
+  !editorPage.includes('tempCodeDocumentTabs') ||
+  !editorPage.includes('openCodeDocumentTab') ||
+  !editorPage.includes('Close temporary code previews') ||
+  !editorPage.includes('code-document-tab active')
+) {
+  failures.push('editor code panel must include real document preview tabs above zoom controls')
+}
+
+if (!codeCloseCircleIcon.includes('M9.99984 1.0415') || !codeCloseCircleIcon.includes('fill="currentColor"')) {
+  failures.push('editor code document close icon must mirror the real close-circle icon asset')
+}
+
+if (
+  !editorPage.includes("import projectFileIcon from '@/assets/editor/navbar-icons/file.svg?raw'") ||
+  !editorPage.includes("import arrowMiniIcon from '@/assets/navbar-icons/arrow-mini.svg?raw'") ||
+  !editorPage.includes('class="project-file-icon"') ||
+  !editorPage.includes('class="project-menu-arrow"') ||
+  editorPage.includes('<span class="caret"></span>') ||
+  !editorProjectFileIcon.includes('M6.6084 1.77051') ||
+  !navbarArrowMiniIcon.includes('M5.66107 2.46085')
+) {
+  failures.push('editor project menu trigger must use the real file and arrowMini icons')
+}
+
+if (
+  !editorPage.includes('.project-menu-trigger {\n  height: 100%;\n  width: auto;\n  padding: 0 12px;\n  color: var(--ui-color-grey-1000);') ||
+  !editorPage.includes('.project-menu-trigger svg {\n  color: inherit;')
+) {
+  failures.push('editor project menu trigger icon color must use the real title token')
+}
+
+if (
+  !editorPage.includes("import tutorialIcon from '@/assets/editor/navbar-icons/tutorial.svg?raw'") ||
+  !editorPage.includes('to="/tutorials" aria-label="Tutorials"') ||
+  !editorPage.includes('flex h-full items-center px-3 text-grey-1000 hover:bg-grey-400') ||
+  !tutorialIcon.includes('M10.9023 2.19043')
+) {
+  failures.push('editor navbar must include the real tutorials entry after the project menu')
+}
+
+if (!editorPage.includes('.stage-tools button') || !editorPage.includes('color: var(--ui-color-grey-1000);')) {
+  failures.push('editor quick config controls must use the real grey-1000 icon token')
+}
+
+if (!editorPage.includes('.stage-tools button:hover') || !editorPage.includes('color: var(--ui-color-turquoise-500);')) {
+  failures.push('editor quick config controls must use the real hover icon token')
+}
+
+for (const editorToken of ['Code', 'Costumes', 'Animations', 'Preview', 'Sprites', 'Stage']) {
+  if (!editorPage.includes(editorToken)) failures.push(`editor page must include real editor surface token: ${editorToken}`)
+}
+
+for (const file of sourceFiles) {
+  const text = readFileSync(file, 'utf8')
+  const rel = relative(root, file)
+  if (text.includes('spx-gui')) failures.push(`forbidden real frontend reference: ${rel}`)
+  if (/\baxios\b/.test(text)) failures.push(`forbidden server call primitive: ${rel}`)
+  if (/\bfetch\s*\(\s*['"`]https?:\/\//.test(text)) failures.push(`forbidden remote fetch call: ${rel}`)
+  if (text.includes('@scalar/api-reference')) failures.push(`forbidden docs runtime reference: ${rel}`)
+}
+
+if (failures.length > 0) {
+  console.error(`Prototype contract check failed with ${failures.length} issue(s):`)
+  for (const failure of failures) console.error(`- ${failure}`)
+  process.exit(1)
+}
+
+console.log('Prototype contract check passed.')
diff --git a/ui/prototype/src/App.vue b/ui/prototype/src/App.vue
index 5b6e678092..ccf707a32d 100644
--- a/ui/prototype/src/App.vue
+++ b/ui/prototype/src/App.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
+
+import Copilot from '@/components/copilot/Copilot.vue'
 </script>
 
 <template>
   <div class="prototype-root">
     <RouterView />
+    <Copilot />
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/ui/prototype/src/apis/community.ts b/ui/prototype/src/apis/community.ts
new file mode 100644
index 0000000000..a0e3205ca9
--- /dev/null
+++ b/ui/prototype/src/apis/community.ts
@@ -0,0 +1,57 @@
+import { projects, users, type Project, type UserProfile } from '@/data/mock'
+
+export type CommunityHome = {
+  mine: Project[]
+  liked: Project[]
+  remixing: Project[]
+  following: Project[]
+}
+
+export function getCommunityHome(): CommunityHome {
+  return {
+    mine: projects.slice(0, 4),
+    liked: projects.slice(0, 4),
+    remixing: projects.slice(2, 6),
+    following: projects.slice(1, 5)
+  }
+}
+
+export function exploreProjects(order = 'likes'): Project[] {
+  const sorted = [...projects]
+  if (order === 'remix' || order === 'remixes') return sorted.sort((a, b) => b.remixes - a.remixes)
+  if (order === 'following' || order === 'latest') return sorted.reverse()
+  return sorted.sort((a, b) => b.likes - a.likes)
+}
+
+export function searchCommunity(keyword: string): Project[] {
+  const normalized = keyword.trim().toLowerCase()
+  if (normalized === '') return projects.slice()
+  return projects.filter((project) =>
+    [project.title, project.description, project.owner.displayName, ...project.tags].some((value) =>
+      value.toLowerCase().includes(normalized)
+    )
+  )
+}
+
+export function getUserProfile(username: string): UserProfile {
+  return users.find((user) => user.username === username) ?? users[0]
+}
+
+export function listUserProjects(username: string): Project[] {
+  const owned = projects.filter((project) => project.owner.username === username)
+  return owned.length > 0 ? owned : projects.slice(0, 3)
+}
+
+export function listUserLikes(username: string): Project[] {
+  const userIndex = users.findIndex((user) => user.username === username)
+  const offset = Math.max(0, userIndex)
+  return projects.slice(offset, offset + 4)
+}
+
+export function listFollowers(username: string): UserProfile[] {
+  return users.filter((user) => user.username !== username)
+}
+
+export function listFollowing(username: string): UserProfile[] {
+  return [...users].reverse().filter((user) => user.username !== username)
+}
diff --git a/ui/prototype/src/apis/project.ts b/ui/prototype/src/apis/project.ts
new file mode 100644
index 0000000000..0f13769022
--- /dev/null
+++ b/ui/prototype/src/apis/project.ts
@@ -0,0 +1,26 @@
+import { projects, type Project } from '@/data/mock'
+
+export function listProjects(): Project[] {
+  return projects
+}
+
+export function getProject(owner: string, name: string): Project {
+  return projects.find((project) => project.owner.username === owner && project.name === name) ?? projects[0]
+}
+
+export function listRelatedProjects(project: Project): Project[] {
+  return projects.filter((item) => item.id !== project.id).slice(0, 4)
+}
+
+export function toggleProjectLike(project: Project, liked: boolean): Project {
+  project.likes = liked ? project.likes + 1 : Math.max(0, project.likes - 1)
+  return project
+}
+
+export function getProjectRoute(project: Project): string {
+  return `/project/${encodeURIComponent(project.owner.username)}/${encodeURIComponent(project.name)}`
+}
+
+export function getProjectEditorRoute(project: Project): string {
+  return `/editor/${encodeURIComponent(project.owner.username)}/${encodeURIComponent(project.name)}`
+}
diff --git a/ui/prototype/src/apis/tutorials.ts b/ui/prototype/src/apis/tutorials.ts
new file mode 100644
index 0000000000..4d6477c4ff
--- /dev/null
+++ b/ui/prototype/src/apis/tutorials.ts
@@ -0,0 +1,20 @@
+import { courseSeries, type Course, type CourseSeries } from '@/data/mock'
+
+export function listCourseSeries(): CourseSeries[] {
+  return courseSeries
+}
+
+export function getCourseSeries(id: string): CourseSeries {
+  return courseSeries.find((series) => series.id === id) ?? courseSeries[0]
+}
+
+export function getCourse(seriesId: string, courseId: string): Course {
+  const series = getCourseSeries(seriesId)
+  return series.courses.find((course) => course.id === courseId) ?? series.courses[0]
+}
+
+export function getNextCourse(seriesId: string, courseId: string): Course | null {
+  const series = getCourseSeries(seriesId)
+  const index = series.courses.findIndex((course) => course.id === courseId)
+  return series.courses[index + 1] ?? null
+}
diff --git a/ui/prototype/src/apis/user.ts b/ui/prototype/src/apis/user.ts
new file mode 100644
index 0000000000..6a2e87c951
--- /dev/null
+++ b/ui/prototype/src/apis/user.ts
@@ -0,0 +1,21 @@
+import { signedInUsername, users, type UserProfile } from '@/data/mock'
+
+export function getSignedInUser(): UserProfile {
+  return getUserProfile(signedInUsername)
+}
+
+export function isSignedInUser(username: string): boolean {
+  return username === signedInUsername
+}
+
+export function getUserProfile(username: string): UserProfile {
+  return users.find((user) => user.username === username) ?? users[0]
+}
+
+export function listFollowers(username: string): UserProfile[] {
+  return users.filter((user) => user.username !== username)
+}
+
+export function listFollowing(username: string): UserProfile[] {
+  return [...users].reverse().filter((user) => user.username !== username)
+}
diff --git a/ui/prototype/src/assets/community/guest-banner-bg.png b/ui/prototype/src/assets/community/guest-banner-bg.png
new file mode 100644
index 0000000000..6ef2645391
Binary files /dev/null and b/ui/prototype/src/assets/community/guest-banner-bg.png differ
diff --git a/ui/prototype/src/assets/community/user-cover-qingqing.jpg b/ui/prototype/src/assets/community/user-cover-qingqing.jpg
new file mode 100644
index 0000000000..e88a61f1f4
Binary files /dev/null and b/ui/prototype/src/assets/community/user-cover-qingqing.jpg differ
diff --git a/ui/prototype/src/assets/editor/category-icons/control.svg b/ui/prototype/src/assets/editor/category-icons/control.svg
new file mode 100644
index 0000000000..456413b501
--- /dev/null
+++ b/ui/prototype/src/assets/editor/category-icons/control.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 2C20.6569 2 22 3.34315 22 5V19C22 20.6051 20.7394 21.9158 19.1543 21.9961L19 22H5L4.8457 21.9961C3.31166 21.9184 2.08163 20.6883 2.00391 19.1543L2 19V5C2 3.34315 3.34315 2 5 2H19ZM5 3.75C4.30964 3.75 3.75 4.30964 3.75 5V19C3.75 19.6904 4.30964 20.25 5 20.25H19C19.6904 20.25 20.25 19.6904 20.25 19V5C20.25 4.30964 19.6904 3.75 19 3.75H5ZM8.5 6.125C8.98325 6.125 9.375 6.51675 9.375 7V11.293C10.2534 11.6415 10.875 12.4975 10.875 13.5C10.875 14.5023 10.2532 15.3574 9.375 15.7061V17C9.375 17.4832 8.98325 17.875 8.5 17.875C8.01675 17.875 7.625 17.4832 7.625 17V15.7061C6.74681 15.3574 6.125 14.5023 6.125 13.5C6.125 12.4975 6.74663 11.6415 7.625 11.293V7C7.625 6.51675 8.01675 6.125 8.5 6.125ZM15.5 6.125C15.9832 6.125 16.375 6.51675 16.375 7V8.29297C17.2534 8.6415 17.875 9.49753 17.875 10.5C17.875 11.5023 17.2532 12.3574 16.375 12.7061V17C16.375 17.4832 15.9832 17.875 15.5 17.875C15.0168 17.875 14.625 17.4832 14.625 17V12.7061C13.7468 12.3574 13.125 11.5023 13.125 10.5C13.125 9.49753 13.7466 8.6415 14.625 8.29297V7C14.625 6.51675 15.0168 6.125 15.5 6.125ZM8.5 12.875C8.15482 12.875 7.875 13.1548 7.875 13.5C7.875 13.8452 8.15482 14.125 8.5 14.125C8.84518 14.125 9.125 13.8452 9.125 13.5C9.125 13.1548 8.84518 12.875 8.5 12.875ZM15.5 9.875C15.1548 9.875 14.875 10.1548 14.875 10.5C14.875 10.8452 15.1548 11.125 15.5 11.125C15.8452 11.125 16.125 10.8452 16.125 10.5C16.125 10.1548 15.8452 9.875 15.5 9.875Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/category-icons/event.svg b/ui/prototype/src/assets/editor/category-icons/event.svg
new file mode 100644
index 0000000000..633ccc3e17
--- /dev/null
+++ b/ui/prototype/src/assets/editor/category-icons/event.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.3086 6.00781C19.4789 6.16843 22 8.78979 22 12C22 15.2102 19.4789 17.8316 16.3086 17.9922L16 18H8C4.68629 18 2 15.3137 2 12C2 8.68629 4.68629 6 8 6H16L16.3086 6.00781ZM8 7.75C5.65279 7.75 3.75 9.65279 3.75 12C3.75 14.3472 5.65279 16.25 8 16.25H16C18.3472 16.25 20.25 14.3472 20.25 12C20.25 9.65279 18.3472 7.75 16 7.75H8ZM8 9C9.65685 9 11 10.3431 11 12C11 13.6569 9.65685 15 8 15C6.34315 15 5 13.6569 5 12C5 10.3431 6.34315 9 8 9ZM8 10.75C7.30964 10.75 6.75 11.3096 6.75 12C6.75 12.6904 7.30964 13.25 8 13.25C8.69036 13.25 9.25 12.6904 9.25 12C9.25 11.3096 8.69036 10.75 8 10.75Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/category-icons/game.svg b/ui/prototype/src/assets/editor/category-icons/game.svg
new file mode 100644
index 0000000000..6f16a95599
--- /dev/null
+++ b/ui/prototype/src/assets/editor/category-icons/game.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 4.625C21.6524 4.625 22.875 6.05439 22.875 7.66699V16.333C22.875 17.9456 21.6524 19.375 20 19.375H4C2.34756 19.375 1.125 17.9456 1.125 16.333V7.66699C1.125 6.05439 2.34756 4.625 4 4.625H20ZM4 6.375C3.44331 6.375 2.875 6.88636 2.875 7.66699V16.333C2.875 17.1136 3.44331 17.625 4 17.625H20C20.5567 17.625 21.125 17.1136 21.125 16.333V7.66699C21.125 6.88636 20.5567 6.375 20 6.375H4ZM8 9.125C8.48325 9.125 8.875 9.51675 8.875 10V11.125H10C10.4832 11.125 10.875 11.5168 10.875 12C10.875 12.4832 10.4832 12.875 10 12.875H8.875V14C8.875 14.4832 8.48325 14.875 8 14.875C7.51675 14.875 7.125 14.4832 7.125 14V12.875H6C5.51675 12.875 5.125 12.4832 5.125 12C5.125 11.5168 5.51675 11.125 6 11.125H7.125V10C7.125 9.51675 7.51675 9.125 8 9.125ZM15.0098 12C15.5621 12 16.0098 12.4477 16.0098 13C16.0098 13.5523 15.5621 14 15.0098 14H15C14.4477 14 14 13.5523 14 13C14 12.4477 14.4477 12 15 12H15.0098ZM18.0098 10C18.562 10 19.0098 10.4477 19.0098 11C19.0098 11.5523 18.562 12 18.0098 12H18C17.4477 12 17 11.5523 17 11C17 10.4477 17.4477 10 18 10H18.0098Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/category-icons/look.svg b/ui/prototype/src/assets/editor/category-icons/look.svg
new file mode 100644
index 0000000000..56c42d1a34
--- /dev/null
+++ b/ui/prototype/src/assets/editor/category-icons/look.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.93935 2.69824C10.1295 3.21636 10.4387 3.63825 10.8095 3.92383C11.1781 4.20759 11.5936 4.34668 12.0038 4.34668C12.414 4.3466 12.8296 4.20766 13.1981 3.92383C13.5689 3.63824 13.8772 3.21632 14.0673 2.69824L14.2782 2.125H16.1239L16.3739 2.13281C16.9538 2.16871 17.5201 2.32845 18.0429 2.60059C18.6396 2.91133 19.1633 3.35974 19.5849 3.90723L22.5468 7.75293C22.6402 7.87016 22.7132 7.99878 22.7665 8.13379L22.8163 8.28223L22.8515 8.43262C22.8783 8.58455 22.8824 8.73993 22.8641 8.89258C22.8398 9.09614 22.7748 9.29754 22.6688 9.48047C22.5691 9.65246 22.4309 9.80689 22.2597 9.92871L22.2606 9.93066L20.2313 11.4238L20.2157 11.4355C19.8825 11.6693 19.4667 11.7682 19.0526 11.6865C18.9116 11.6586 18.7797 11.6095 18.6571 11.5469V20.2676C18.6564 20.6534 18.526 21.0457 18.2626 21.3535C17.9955 21.6655 17.6015 21.8738 17.1561 21.875H6.85145C6.40608 21.8739 6.01213 21.6654 5.74501 21.3535C5.48143 21.0457 5.35117 20.6535 5.35048 20.2676V11.542C5.22558 11.6069 5.09052 11.6569 4.94618 11.6855C4.53291 11.7673 4.1181 11.6694 3.78505 11.4365L3.76747 11.4248L1.73817 9.93066L1.74013 9.92871C1.56792 9.80623 1.42879 9.65163 1.32899 9.47852C1.22347 9.29542 1.15949 9.09416 1.13563 8.89062C1.11181 8.68708 1.128 8.47895 1.18446 8.28027L1.23427 8.13281C1.28767 7.99848 1.36172 7.87052 1.45497 7.75391L4.42274 3.90527L4.58485 3.70508C4.97554 3.24847 5.44165 2.87129 5.96376 2.59961C6.5611 2.28883 7.21528 2.12504 7.88173 2.125H9.72938L9.93935 2.69824ZM7.88173 3.875C7.505 3.87504 7.12695 3.96735 6.77138 4.15234C6.45956 4.31463 6.16804 4.54698 5.91493 4.84277L5.80849 4.97363L2.96474 8.66016L4.60438 9.86719L5.13661 9.08887C5.73274 8.21529 7.10048 8.63769 7.10048 9.69531V20.125H16.9071V9.70801C16.9071 8.6831 18.1905 8.25517 18.8124 9.02441L18.871 9.10254L19.3925 9.86816L21.035 8.6582L18.1981 4.97461C17.9218 4.61577 17.5917 4.33901 17.2352 4.15332C16.9239 3.99123 16.5953 3.89928 16.2655 3.87891L16.1239 3.875H15.4559C15.1615 4.43708 14.7587 4.92973 14.2655 5.30957C13.6085 5.81556 12.822 6.0966 12.0038 6.09668C11.1856 6.09668 10.3991 5.81552 9.74208 5.30957C9.2489 4.92975 8.84616 4.43708 8.55165 3.875H7.88173Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/category-icons/motion.svg b/ui/prototype/src/assets/editor/category-icons/motion.svg
new file mode 100644
index 0000000000..836ada12dc
--- /dev/null
+++ b/ui/prototype/src/assets/editor/category-icons/motion.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4697 2.01562C14.8079 2.12549 17.0389 3.05458 18.7676 4.64746C20.6116 6.34663 21.7963 8.67763 22.001 11.1768H21.9951V20.1846C21.9951 20.2691 21.9272 20.3376 21.8428 20.3379C21.6732 20.8248 21.3558 21.2473 20.9355 21.5459L20.7744 21.6514C20.3896 21.8822 19.9482 22.0048 19.4971 22.0049L19.3047 21.9971C18.8573 21.9624 18.4264 21.8072 18.0586 21.5459C17.6383 21.2473 17.321 20.8248 17.1514 20.3379H16.8447C16.6751 20.8247 16.3586 21.2473 15.9385 21.5459C15.5182 21.8445 15.0146 22.0049 14.499 22.0049C13.9836 22.0048 13.4807 21.8445 13.0605 21.5459C12.6403 21.2473 12.3239 20.8247 12.1543 20.3379H11.8477C11.678 20.8248 11.3607 21.2473 10.9404 21.5459C10.5202 21.8444 10.0175 22.0049 9.50195 22.0049C8.98645 22.0049 8.48372 21.8445 8.06348 21.5459C7.6432 21.2473 7.32587 20.8248 7.15625 20.3379H7.00293C6.7984 20.8319 6.45173 21.2542 6.00684 21.5508C5.56206 21.8473 5.03942 22.0051 4.50488 22.0039L4.3125 21.9961C3.9293 21.9656 3.55819 21.8471 3.22852 21.6494L3.06738 21.5439C2.64735 21.2456 2.32999 20.8239 2.15918 20.3379C2.07454 20.3379 2.00586 20.2692 2.00586 20.1846V11.1768H2.01074L2.06055 10.71C2.34462 8.54333 3.35641 6.52788 4.89551 4.97363L5.2334 4.64746C7.0774 2.94829 9.49348 2.00488 12.001 2.00488L12.4697 2.01562ZM12.001 3.75488C9.93288 3.75488 7.93981 4.53315 6.41895 5.93457C4.88819 7.34525 3.92551 9.26876 3.75586 11.3096V19.6016L3.81055 19.7578C3.86138 19.9024 3.95512 20.0284 4.08008 20.1172C4.20515 20.206 4.35538 20.2536 4.50879 20.2539C4.6965 20.2543 4.87993 20.1988 5.03613 20.0947C5.19243 19.9905 5.31487 19.8425 5.38672 19.6689L5.83398 18.5879H8.40039L8.80957 19.7627C8.8597 19.9064 8.95307 20.031 9.07715 20.1191C9.20128 20.2073 9.34968 20.2549 9.50195 20.2549C9.65422 20.2549 9.80262 20.2073 9.92676 20.1191C10.0509 20.0309 10.1452 19.9065 10.1953 19.7627L10.6035 18.5879H13.3975L13.8066 19.7627C13.8567 19.9064 13.9502 20.031 14.0742 20.1191C14.1983 20.2073 14.3469 20.2548 14.499 20.2549C14.6513 20.2549 14.8006 20.2074 14.9248 20.1191C15.0488 20.031 15.1423 19.9064 15.1924 19.7627L15.6016 18.5879H18.3945L18.8037 19.7627C18.8538 19.9065 18.9481 20.0309 19.0723 20.1191C19.1964 20.2073 19.3449 20.2549 19.4971 20.2549C19.6493 20.2548 19.7978 20.2073 19.9219 20.1191C20.0459 20.031 20.1393 19.9064 20.1895 19.7627L20.2451 19.6025V11.2168C20.0544 9.21456 19.0928 7.32674 17.582 5.93457C16.0612 4.53322 14.069 3.75495 12.001 3.75488ZM11.2227 12C12.1427 12 12.8887 12.373 12.8887 12.833C12.8883 13.2928 12.1424 13.666 11.2227 13.666C10.303 13.6659 9.55799 13.2928 9.55762 12.833C9.55762 12.3731 10.3028 12.0001 11.2227 12ZM7.8916 7.7793C8.8114 7.77948 9.55656 8.5255 9.55664 9.44531C9.55664 10.3652 8.81145 11.1111 7.8916 11.1113C6.9716 11.1113 6.22559 10.3653 6.22559 9.44531C6.22567 8.52538 6.97165 7.7793 7.8916 7.7793ZM14.5547 7.7793C15.4745 7.77941 16.2206 8.52545 16.2207 9.44531C16.2207 10.3652 15.4746 11.1112 14.5547 11.1113C13.6347 11.1113 12.8887 10.3653 12.8887 9.44531C12.8888 8.52538 13.6347 7.7793 14.5547 7.7793Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/category-icons/sensing.svg b/ui/prototype/src/assets/editor/category-icons/sensing.svg
new file mode 100644
index 0000000000..ba30cb508b
--- /dev/null
+++ b/ui/prototype/src/assets/editor/category-icons/sensing.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.0166 5.01378C4.35831 4.67262 4.91333 4.67236 5.25488 5.01378C5.59642 5.35532 5.59609 5.91031 5.25488 6.25206C4.50055 7.00638 3.90149 7.90227 3.49316 8.8878C3.08495 9.87337 2.87508 10.9304 2.875 11.9972C2.87502 13.064 3.08496 14.1209 3.49316 15.1066C3.90147 16.0922 4.50048 16.9879 5.25488 17.7423C5.59615 18.0837 5.59571 18.6379 5.25488 18.9796C4.91318 19.3213 4.35831 19.3213 4.0166 18.9796C3.09986 18.0628 2.37217 16.9743 1.87598 15.7765C1.37983 14.5785 1.12502 13.2938 1.125 11.9972C1.12508 10.7006 1.3798 9.41578 1.87598 8.21788C2.37225 7.02003 3.09977 5.9306 4.0166 5.01378ZM18.7441 5.01378C19.0857 4.67245 19.6408 4.67253 19.9824 5.01378C20.8993 5.93062 21.6268 7.02 22.123 8.21788C22.6192 9.41578 22.8739 10.7006 22.874 11.9972C22.874 13.2938 22.6192 14.5785 22.123 15.7765C21.6269 16.9743 20.8991 18.0628 19.9824 18.9796C19.6407 19.3213 19.0858 19.3213 18.7441 18.9796C18.4032 18.6379 18.4028 18.0838 18.7441 17.7423C19.4985 16.9879 20.0976 16.0922 20.5059 15.1066C20.914 14.1209 21.124 13.064 21.124 11.9972C21.1239 10.9304 20.9141 9.87337 20.5059 8.8878C20.0975 7.90224 19.4985 7.0064 18.7441 6.25206C18.4028 5.91032 18.4026 5.35536 18.7441 5.01378ZM7.29883 8.47179C7.58879 8.08558 8.13795 8.00733 8.52441 8.29698C8.91081 8.58691 8.98895 9.13603 8.69922 9.52257C8.16385 10.2365 7.87412 11.1048 7.87402 11.9972C7.87402 12.8895 8.16393 13.7578 8.69922 14.4718C8.98909 14.8583 8.91073 15.4074 8.52441 15.6974C8.13785 15.9873 7.5888 15.9091 7.29883 15.5226C6.53625 14.5057 6.12402 13.2682 6.12402 11.9972C6.12412 10.7261 6.5362 9.48862 7.29883 8.47179ZM15.4746 8.29698C15.8611 8.00746 16.4103 8.08557 16.7002 8.47179C17.4628 9.48861 17.8749 10.7262 17.875 11.9972C17.875 13.2682 17.4627 14.5057 16.7002 15.5226C16.4103 15.909 15.8612 15.9872 15.4746 15.6974C15.0883 15.4074 15.0099 14.8583 15.2998 14.4718C15.835 13.7579 16.125 12.8895 16.125 11.9972C16.1249 11.1049 15.8351 10.2364 15.2998 9.52257C15.01 9.13603 15.0882 8.58693 15.4746 8.29698ZM11.999 10.7999C12.8273 10.7999 13.4988 11.4716 13.499 12.2999V12.3107C13.499 13.1391 12.8275 13.8107 11.999 13.8107C11.1708 13.8105 10.499 13.139 10.499 12.3107V12.2999C10.4992 11.4718 11.1709 10.8001 11.999 10.7999Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/category-icons/sound.svg b/ui/prototype/src/assets/editor/category-icons/sound.svg
new file mode 100644
index 0000000000..4ff334a026
--- /dev/null
+++ b/ui/prototype/src/assets/editor/category-icons/sound.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2822 3.93389C10.503 3.9069 10.7273 3.92966 10.9385 3.99932L11.043 4.03839L11.1445 4.08428C11.3763 4.20098 11.5746 4.37646 11.7197 4.59307C11.8854 4.84062 11.974 5.13212 11.9746 5.42999V18.5667C11.975 18.8653 11.8872 19.1581 11.7217 19.4066C11.556 19.655 11.3197 19.8487 11.0439 19.9632C10.768 20.0776 10.4639 20.1075 10.1709 20.0491C9.87785 19.9907 9.60855 19.8466 9.39746 19.6351L6.35254 16.5901L6.35156 16.5882C6.31572 16.5522 6.2725 16.5237 6.22559 16.5042C6.17862 16.4848 6.12796 16.4748 6.07715 16.4749H3.90039C3.42963 16.4749 2.97741 16.2883 2.64453 15.9554C2.31198 15.6226 2.12513 15.1709 2.125 14.7005V9.30011C2.12515 8.82972 2.31201 8.37793 2.64453 8.04522C2.97738 7.71252 3.42976 7.52471 3.90039 7.52471H6.07715C6.12804 7.52484 6.17857 7.51489 6.22559 7.49542C6.2725 7.47592 6.31575 7.44746 6.35156 7.41143L9.39844 4.36456C9.60949 4.15404 9.87948 4.01049 10.1719 3.95245L10.2822 3.93389ZM18.0088 5.65362C18.3505 5.31223 18.9054 5.31213 19.2471 5.65362C20.0803 6.48691 20.7414 7.47705 21.1924 8.56573C21.6433 9.65444 21.875 10.8219 21.875 12.0003C21.875 13.1787 21.6433 14.3461 21.1924 15.4349C20.7414 16.5236 20.0803 17.5136 19.2471 18.347C18.9055 18.6886 18.3505 18.6884 18.0088 18.347C17.6674 18.0054 17.6675 17.4513 18.0088 17.1097C18.6796 16.4388 19.2121 15.6414 19.5752 14.7649C19.9381 13.8885 20.125 12.9489 20.125 12.0003C20.125 11.0517 19.9381 10.112 19.5752 9.23565C19.2122 8.35929 18.6795 7.56269 18.0088 6.8919C17.6672 6.55018 17.6671 5.99529 18.0088 5.65362ZM7.59082 8.64678C7.39209 8.84629 7.15566 9.00478 6.89551 9.11261C6.63524 9.22042 6.35592 9.27425 6.07422 9.27374L3.90039 9.27471C3.89395 9.27471 3.88746 9.27806 3.88281 9.28253C3.87826 9.28708 3.87517 9.29367 3.875 9.30011V14.7005C3.87512 14.7068 3.87839 14.7135 3.88281 14.7181C3.88746 14.7225 3.89396 14.7249 3.90039 14.7249H6.07422C6.35584 14.7244 6.6353 14.7802 6.89551 14.888C7.15545 14.9957 7.39218 15.1536 7.59082 15.3528L10.2246 17.9866V6.013L7.59082 8.64678ZM15.0752 8.59991C15.4617 8.31045 16.0109 8.38854 16.3008 8.77471C16.9984 9.70499 17.3759 10.8375 17.376 12.0003C17.3759 13.163 16.9982 14.2947 16.3008 15.2249C16.0109 15.6114 15.4618 15.6894 15.0752 15.3997C14.6891 15.1097 14.6106 14.5615 14.9004 14.1751C15.3708 13.5478 15.6259 12.7844 15.626 12.0003C15.6259 11.2162 15.3708 10.4528 14.9004 9.8255C14.6106 9.43896 14.6888 8.88985 15.0752 8.59991Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/code-editor/close-circle.svg b/ui/prototype/src/assets/editor/code-editor/close-circle.svg
new file mode 100644
index 0000000000..4e8ad96f7d
--- /dev/null
+++ b/ui/prototype/src/assets/editor/code-editor/close-circle.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.99984 1.0415C5.05984 1.0415 1.0415 5.06067 1.0415 9.99984C1.0415 14.939 5.05984 18.9582 9.99984 18.9582C14.9398 18.9582 18.9582 14.939 18.9582 9.99984C18.9582 5.06067 14.9398 1.0415 9.99984 1.0415ZM9.99984 17.7082C5.749 17.7082 2.2915 14.2507 2.2915 9.99984C2.2915 5.749 5.749 2.2915 9.99984 2.2915C14.2507 2.2915 17.7082 5.749 17.7082 9.99984C17.7082 14.2507 14.2507 17.7082 9.99984 17.7082ZM12.9415 7.94153L10.8832 9.99984L12.9415 12.0581C13.1857 12.3023 13.1857 12.6982 12.9415 12.9423C12.8198 13.064 12.6598 13.1257 12.4998 13.1257C12.3398 13.1257 12.1798 13.0648 12.0582 12.9423L9.99984 10.884L7.9415 12.9423C7.81984 13.064 7.65984 13.1257 7.49984 13.1257C7.33984 13.1257 7.17984 13.0648 7.05817 12.9423C6.814 12.6982 6.814 12.3023 7.05817 12.0581L9.11651 9.99984L7.05817 7.94153C6.814 7.69736 6.814 7.3015 7.05817 7.05733C7.30234 6.81317 7.69818 6.81317 7.94234 7.05733L10.0007 9.11569L12.059 7.05733C12.3032 6.81317 12.699 6.81317 12.9432 7.05733C13.1857 7.3015 13.1857 7.69819 12.9415 7.94153Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/code-editor/zoom-in.svg b/ui/prototype/src/assets/editor/code-editor/zoom-in.svg
new file mode 100644
index 0000000000..4750a194a6
--- /dev/null
+++ b/ui/prototype/src/assets/editor/code-editor/zoom-in.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.9417 17.0583L14.7409 13.8575C15.8109 12.5883 16.4583 10.9525 16.4583 9.16667C16.4583 5.14583 13.1875 1.875 9.16667 1.875C5.14583 1.875 1.875 5.14583 1.875 9.16667C1.875 13.1875 5.14583 16.4583 9.16667 16.4583C10.9525 16.4583 12.5884 15.8108 13.8575 14.7408L17.0583 17.9417C17.18 18.0633 17.34 18.125 17.5 18.125C17.66 18.125 17.82 18.0642 17.9417 17.9417C18.1859 17.6983 18.1859 17.3025 17.9417 17.0583ZM3.125 9.16667C3.125 5.835 5.835 3.125 9.16667 3.125C12.4983 3.125 15.2083 5.835 15.2083 9.16667C15.2083 12.4983 12.4983 15.2083 9.16667 15.2083C5.835 15.2083 3.125 12.4983 3.125 9.16667ZM11.6667 8.54167H9.79167V6.66667C9.79167 6.32167 9.51167 6.04167 9.16667 6.04167C8.82167 6.04167 8.54167 6.32167 8.54167 6.66667V8.54167H6.66667C6.32167 8.54167 6.04167 8.82167 6.04167 9.16667C6.04167 9.51167 6.32167 9.79167 6.66667 9.79167H8.54167V11.6667C8.54167 12.0117 8.82167 12.2917 9.16667 12.2917C9.51167 12.2917 9.79167 12.0117 9.79167 11.6667V9.79167H11.6667C12.0117 9.79167 12.2917 9.51167 12.2917 9.16667C12.2917 8.82167 12.0117 8.54167 11.6667 8.54167Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/code-editor/zoom-out.svg b/ui/prototype/src/assets/editor/code-editor/zoom-out.svg
new file mode 100644
index 0000000000..4dc02dd7d9
--- /dev/null
+++ b/ui/prototype/src/assets/editor/code-editor/zoom-out.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.9417 17.0583L14.7409 13.8575C15.8109 12.5883 16.4583 10.9525 16.4583 9.16667C16.4583 5.14583 13.1875 1.875 9.16667 1.875C5.14583 1.875 1.875 5.14583 1.875 9.16667C1.875 13.1875 5.14583 16.4583 9.16667 16.4583C10.9525 16.4583 12.5884 15.8108 13.8575 14.7408L17.0583 17.9417C17.18 18.0633 17.34 18.125 17.5 18.125C17.66 18.125 17.82 18.0642 17.9417 17.9417C18.1859 17.6983 18.1859 17.3025 17.9417 17.0583ZM3.125 9.16667C3.125 5.835 5.835 3.125 9.16667 3.125C12.4983 3.125 15.2083 5.835 15.2083 9.16667C15.2083 12.4983 12.4983 15.2083 9.16667 15.2083C5.835 15.2083 3.125 12.4983 3.125 9.16667ZM11.6667 8.54167H6.66667C6.32167 8.54167 6.04167 8.82167 6.04167 9.16667C6.04167 9.51167 6.32167 9.79167 6.66667 9.79167H11.6667C12.0117 9.79167 12.2917 9.51167 12.2917 9.16667C12.2917 8.82167 12.0117 8.54167 11.6667 8.54167Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/code-editor/zoom-reset.svg b/ui/prototype/src/assets/editor/code-editor/zoom-reset.svg
new file mode 100644
index 0000000000..12223157b0
--- /dev/null
+++ b/ui/prototype/src/assets/editor/code-editor/zoom-reset.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.9417 17.0583L14.7409 13.8575C15.8109 12.5883 16.4583 10.9525 16.4583 9.16667C16.4583 5.14583 13.1875 1.875 9.16667 1.875C5.14583 1.875 1.875 5.14583 1.875 9.16667C1.875 13.1875 5.14583 16.4583 9.16667 16.4583C10.9525 16.4583 12.5884 15.8108 13.8575 14.7408L17.0583 17.9417C17.18 18.0633 17.34 18.125 17.5 18.125C17.66 18.125 17.82 18.0642 17.9417 17.9417C18.1859 17.6983 18.1859 17.3025 17.9417 17.0583ZM3.125 9.16667C3.125 5.835 5.835 3.125 9.16667 3.125C12.4983 3.125 15.2083 5.835 15.2083 9.16667C15.2083 12.4983 12.4983 15.2083 9.16667 15.2083C5.835 15.2083 3.125 12.4983 3.125 9.16667ZM11.6667 7.29167H6.66667C6.32167 7.29167 6.04167 7.57167 6.04167 7.91667C6.04167 8.26167 6.32167 8.54167 6.66667 8.54167H11.6667C12.0117 8.54167 12.2917 8.26167 12.2917 7.91667C12.2917 7.57167 12.0117 7.29167 11.6667 7.29167ZM10 9.79167H6.66667C6.32167 9.79167 6.04167 10.0717 6.04167 10.4167C6.04167 10.7617 6.32167 11.0417 6.66667 11.0417H10C10.345 11.0417 10.625 10.7617 10.625 10.4167C10.625 10.0717 10.345 9.79167 10 9.79167Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/navbar-icons/cloud-check.svg b/ui/prototype/src/assets/editor/navbar-icons/cloud-check.svg
new file mode 100644
index 0000000000..d8a1c7814d
--- /dev/null
+++ b/ui/prototype/src/assets/editor/navbar-icons/cloud-check.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M16 19.75H9.5C5.502 19.75 2.25 16.498 2.25 12.5C2.25 8.502 5.502 5.25 9.5 5.25C11.264 5.25 12.9641 5.89198 14.2881 7.05798C14.7021 7.42298 15.0711 7.83303 15.3921 8.28003C15.5931 8.25903 15.794 8.24902 16 8.24902C19.171 8.24902 21.75 10.828 21.75 13.999C21.75 17.17 19.171 19.75 16 19.75ZM9.5 6.75C6.329 6.75 3.75 9.329 3.75 12.5C3.75 15.671 6.329 18.25 9.5 18.25H16C18.344 18.25 20.25 16.344 20.25 14C20.25 11.656 18.344 9.75 16 9.75C15.717 9.75 15.4449 9.77503 15.1689 9.82703C14.8669 9.88503 14.5551 9.74801 14.3931 9.48401C14.0931 8.99901 13.7239 8.56102 13.2959 8.18402C12.2469 7.25902 10.898 6.75 9.5 6.75ZM11.863 15.364L14.53 12.697C14.823 12.404 14.823 11.929 14.53 11.636C14.237 11.343 13.762 11.343 13.469 11.636L11.332 13.772L10.5291 12.969C10.2361 12.676 9.76102 12.676 9.46802 12.969C9.17502 13.262 9.17502 13.737 9.46802 14.03L10.801 15.363C10.942 15.504 11.1321 15.583 11.3311 15.583C11.5321 15.583 11.723 15.504 11.863 15.364Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/ui/prototype/src/assets/editor/navbar-icons/default-mode.svg b/ui/prototype/src/assets/editor/navbar-icons/default-mode.svg
new file mode 100644
index 0000000000..412c879597
--- /dev/null
+++ b/ui/prototype/src/assets/editor/navbar-icons/default-mode.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M14.6221 3.44141C15.5595 3.48515 16.4558 3.85292 17.1553 4.48438C17.8985 5.15544 18.3665 6.07767 18.4717 7.07324L18.4863 7.19824C18.5503 7.73051 19.0624 11.989 19.0625 13.333C19.0625 14.1894 18.7228 15.0116 18.1172 15.6172C17.5116 16.2227 16.6894 16.5625 15.833 16.5625C14.6794 16.5623 14.0747 15.9399 13.6504 15.5156L12.4727 14.3379C12.3189 14.1841 12.1169 14.0888 11.9023 14.0674L11.8096 14.0625H8.19043C7.94183 14.0626 7.70311 14.1621 7.52734 14.3379L6.34961 15.5156C5.92531 15.9399 5.3208 16.5624 4.16699 16.5625C3.31056 16.5625 2.4884 16.2228 1.88281 15.6172C1.27726 15.0116 0.9375 14.1894 0.9375 13.333C0.937578 11.9899 1.44969 7.73065 1.51367 7.19824L1.51562 7.18555C1.52069 7.14858 1.51817 7.15374 1.52734 7.07422C1.63232 6.07805 2.10199 5.1557 2.8457 4.48438C3.59187 3.81104 4.56135 3.43779 5.56641 3.4375H14.4336L14.6221 3.44141ZM5.32617 4.90723C4.7692 4.95907 4.2407 5.18878 3.82227 5.56641C3.34401 5.99809 3.0426 6.59252 2.97656 7.2334V7.24219C2.97568 7.24996 2.96714 7.32262 2.96094 7.37109L2.96191 7.37207C2.89067 7.96488 2.39559 12.1025 2.39551 13.333C2.39551 13.8026 2.582 14.2538 2.91406 14.5859C3.24616 14.918 3.69734 15.1045 4.16699 15.1045C4.67948 15.1044 4.90858 14.8932 5.31738 14.4844L6.49609 13.3057C6.94527 12.8565 7.55517 12.6046 8.19043 12.6045H11.8096C12.4447 12.6046 13.0548 12.8567 13.5039 13.3057L14.6826 14.4844C15.0914 14.8932 15.3206 15.1044 15.833 15.1045C16.3026 15.1045 16.7538 14.918 17.0859 14.5859C17.418 14.2538 17.6045 13.8027 17.6045 13.333C17.6044 12.1108 17.117 8.02619 17.04 7.38574C17.0353 7.35184 17.0316 7.32035 17.0293 7.29785L17.0234 7.2334C16.9575 6.59263 16.6558 5.99909 16.1777 5.56738C15.6994 5.13555 15.0771 4.89567 14.4326 4.89551H5.56738L5.32617 4.90723ZM6.66699 6.77051C7.06961 6.77062 7.39551 7.09736 7.39551 7.5V8.4375H8.33398C8.7366 8.43761 9.06348 8.76435 9.06348 9.16699C9.06323 9.56943 8.73645 9.8954 8.33398 9.89551H7.39551V10.833C7.39545 11.2356 7.06957 11.5624 6.66699 11.5625C6.26432 11.5625 5.93755 11.2357 5.9375 10.833V9.89551H5.00098C4.59842 9.89551 4.27173 9.56949 4.27148 9.16699C4.27148 8.76428 4.59827 8.4375 5.00098 8.4375H5.9375V7.5C5.9375 7.09729 6.26428 6.77051 6.66699 6.77051ZM12.5088 9.27051C12.9114 9.27062 13.2383 9.59736 13.2383 10C13.2382 10.4026 12.9114 10.7294 12.5088 10.7295H12.501C12.0983 10.7295 11.7716 10.4027 11.7715 10C11.7715 9.59729 12.0983 9.27051 12.501 9.27051H12.5088ZM15.0088 7.60449C15.4113 7.6046 15.7381 7.93051 15.7383 8.33301C15.7382 8.7356 15.4114 9.06239 15.0088 9.0625H15.001C14.5983 9.0625 14.2715 8.73567 14.2715 8.33301C14.2716 7.93044 14.5984 7.60449 15.001 7.60449H15.0088Z"
+    fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/ui/prototype/src/assets/editor/navbar-icons/export-project.svg b/ui/prototype/src/assets/editor/navbar-icons/export-project.svg
new file mode 100644
index 0000000000..e72e57ccd6
--- /dev/null
+++ b/ui/prototype/src/assets/editor/navbar-icons/export-project.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17 9C15 9 14 8 14 6V3H8C6 3 5 4 5 6V18C5 20 6 21 8 21H17C19 21 20 20 20 18V9H17Z" fill="#51DADC"/>
+  <path d="M17 9H20L14 3V6C14 8 15 9 17 9Z" fill="#0AA5BE"/>
+  <path d="M14.6919 15.287C14.7679 15.104 14.7679 14.897 14.6919 14.714C14.6539 14.622 14.599 14.539 14.53 14.47L12.53 12.47C12.237 12.177 11.762 12.177 11.469 12.47C11.176 12.763 11.176 13.238 11.469 13.531L12.189 14.251H9C8.586 14.251 8.25 14.587 8.25 15.001C8.25 15.415 8.586 15.751 9 15.751H12.189L11.469 16.471C11.176 16.764 11.176 17.239 11.469 17.532C11.615 17.678 11.807 17.752 11.999 17.752C12.191 17.752 12.3831 17.679 12.5291 17.532L14.5291 15.532C14.5991 15.461 14.6539 15.378 14.6919 15.287Z" fill="white"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/navbar-icons/failed-to-save.svg b/ui/prototype/src/assets/editor/navbar-icons/failed-to-save.svg
new file mode 100644
index 0000000000..b8612a6d16
--- /dev/null
+++ b/ui/prototype/src/assets/editor/navbar-icons/failed-to-save.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M16 8.25C15.794 8.25 15.5931 8.26001 15.3921 8.28101C15.0721 7.83401 14.7031 7.42402 14.2881 7.05902C12.9641 5.89302 11.264 5.25098 9.5 5.25098C5.502 5.25098 2.25 8.50298 2.25 12.501C2.25 16.499 5.502 19.751 9.5 19.751H16C19.171 19.751 21.75 17.172 21.75 14.001C21.75 10.83 19.171 8.25 16 8.25ZM16 18.25H9.5C6.329 18.25 3.75 15.671 3.75 12.5C3.75 9.329 6.329 6.75 9.5 6.75C10.898 6.75 12.2469 7.25902 13.2959 8.18402C13.7239 8.56202 14.0931 8.99901 14.3931 9.48401C14.5551 9.74801 14.8669 9.88503 15.1689 9.82703C15.4449 9.77503 15.717 9.75 16 9.75C18.344 9.75 20.25 11.656 20.25 14C20.25 16.344 18.344 18.25 16 18.25ZM14.03 12.53L13.0601 13.5L14.03 14.47C14.323 14.763 14.323 15.238 14.03 15.531C13.884 15.677 13.692 15.751 13.5 15.751C13.308 15.751 13.116 15.678 12.97 15.531L12 14.561L11.03 15.531C10.884 15.677 10.692 15.751 10.5 15.751C10.308 15.751 10.116 15.678 9.96997 15.531C9.67697 15.238 9.67697 14.763 9.96997 14.47L10.9399 13.5L9.96997 12.53C9.67697 12.237 9.67697 11.762 9.96997 11.469C10.263 11.176 10.738 11.176 11.031 11.469L12.001 12.439L12.9709 11.469C13.2639 11.176 13.739 11.176 14.032 11.469C14.323 11.762 14.323 12.238 14.03 12.53Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/ui/prototype/src/assets/editor/navbar-icons/file.svg b/ui/prototype/src/assets/editor/navbar-icons/file.svg
new file mode 100644
index 0000000000..3a185d0d53
--- /dev/null
+++ b/ui/prototype/src/assets/editor/navbar-icons/file.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M6.6084 1.77051C7.00493 1.77063 7.39605 1.8695 7.74512 2.05762C8.09163 2.24443 8.38686 2.51387 8.60449 2.8418L9.2793 3.8418L9.28418 3.84961C9.37032 3.98023 9.4879 4.08753 9.62598 4.16113C9.76424 4.23474 9.91955 4.27199 10.0762 4.27051H16.667C17.3023 4.27059 17.9121 4.52343 18.3613 4.97266C18.8104 5.42193 19.0625 6.03173 19.0625 6.66699V15C19.0625 15.6353 18.8105 16.245 18.3613 16.6943C17.9121 17.1436 17.3023 17.3954 16.667 17.3955H3.33301C2.69771 17.3954 2.0879 17.1436 1.63867 16.6943C1.18947 16.245 0.9375 15.6353 0.9375 15V4.16699C0.9375 3.53173 1.18957 2.92193 1.63867 2.47266C2.0879 2.02343 2.69771 1.77059 3.33301 1.77051H6.6084ZM2.39551 15C2.39551 15.2486 2.49421 15.4873 2.66992 15.6631C2.84566 15.8388 3.08448 15.9374 3.33301 15.9375H16.667C16.9155 15.9374 17.1543 15.8388 17.3301 15.6631C17.5058 15.4873 17.6045 15.2486 17.6045 15V9.0625H2.39551V15ZM3.33301 3.22949C3.08456 3.22958 2.84565 3.32729 2.66992 3.50293C2.49411 3.67875 2.39551 3.91835 2.39551 4.16699V7.60449H17.6045V6.66699C17.6045 6.41835 17.5059 6.17875 17.3301 6.00293C17.1544 5.82729 16.9154 5.72958 16.667 5.72949H10.083C9.68507 5.73215 9.29276 5.63524 8.94141 5.44824C8.59002 5.26111 8.29029 4.98894 8.07031 4.65723L7.39551 3.6582L7.39062 3.65039C7.30537 3.52117 7.18899 3.4153 7.05273 3.3418C6.91626 3.2683 6.7634 3.22957 6.6084 3.22949H3.33301Z"
+    fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/ui/prototype/src/assets/editor/navbar-icons/import-assets-scratch.svg b/ui/prototype/src/assets/editor/navbar-icons/import-assets-scratch.svg
new file mode 100644
index 0000000000..3d8fa51a13
--- /dev/null
+++ b/ui/prototype/src/assets/editor/navbar-icons/import-assets-scratch.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M17 9C15 9 14 8 14 6V3H8C6 3 5 4 5 6V18C5 20 6 21 8 21H17C19 21 20 20 20 18V9H17Z" fill="#51DADC"/>
+  <path d="M17 9H20L14 3V6C14 8 15 9 17 9Z" fill="#0AA5BE"/>
+  <path d="M12.8741 10.978L13.629 12.476C13.686 12.589 13.7962 12.667 13.9222 12.685L15.6651 12.933C15.9851 12.978 16.1122 13.364 15.8812 13.585L14.6212 14.787C14.5292 14.875 14.4871 15.002 14.5091 15.126L14.7972 16.772C14.8552 17.106 14.4982 17.36 14.1932 17.203L12.681 16.425C12.567 16.367 12.4322 16.367 12.3192 16.425L10.8082 17.202C10.5022 17.36 10.144 17.104 10.203 16.77L10.491 15.126C10.513 15.002 10.471 14.875 10.379 14.787L9.11897 13.585C8.88697 13.364 9.01504 12.978 9.33504 12.933L11.078 12.685C11.205 12.667 11.3152 12.589 11.3712 12.476L12.1261 10.978C12.2791 10.674 12.7211 10.674 12.8741 10.978Z" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/ui/prototype/src/assets/editor/navbar-icons/import-project.svg b/ui/prototype/src/assets/editor/navbar-icons/import-project.svg
new file mode 100644
index 0000000000..44e7e6de17
--- /dev/null
+++ b/ui/prototype/src/assets/editor/navbar-icons/import-project.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17 9C15 9 14 8 14 6V3H8C6 3 5 4 5 6V18C5 20 6 21 8 21H17C19 21 20 20 20 18V9H17Z" fill="#51DADC"/>
+  <path d="M17 9H20L14 3V6C14 8 15 9 17 9Z" fill="#0AA5BE"/>
+  <path d="M14.0001 14.25H10.8112L11.5311 13.53C11.8241 13.237 11.8241 12.762 11.5311 12.469C11.2381 12.176 10.7631 12.176 10.4701 12.469L8.47009 14.469C8.40109 14.538 8.34622 14.621 8.30822 14.713C8.23222 14.896 8.23222 15.103 8.30822 15.286C8.34622 15.378 8.40109 15.461 8.47009 15.53L10.4701 17.53C10.6161 17.676 10.8081 17.75 11.0001 17.75C11.1921 17.75 11.3841 17.677 11.5301 17.53C11.8231 17.237 11.8231 16.762 11.5301 16.469L10.8102 15.749H14.0001C14.4141 15.749 14.7501 15.413 14.7501 14.999C14.7501 14.585 14.4141 14.25 14.0001 14.25Z" fill="white"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/navbar-icons/import-scratch.svg b/ui/prototype/src/assets/editor/navbar-icons/import-scratch.svg
new file mode 100644
index 0000000000..92c1964cfc
--- /dev/null
+++ b/ui/prototype/src/assets/editor/navbar-icons/import-scratch.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 9C15 9 14 8 14 6V3H8C6 3 5 4 5 6V18C5 20 6 21 8 21H17C19 21 20 20 20 18V9H17Z" fill="#51DADC"/>
+<path d="M17 9H20L14 3V6C14 8 15 9 17 9Z" fill="#0AA5BE"/>
+<path d="M13.2746 9.20438C13.3189 9.19892 13.4206 9.19995 13.4691 9.20018C13.8961 9.20362 14.3146 9.32021 14.6818 9.53805C15.3546 9.93532 15.7966 10.6307 15.8706 11.4085C15.8918 11.6271 15.8743 11.8617 15.8664 12.0822C15.8541 12.4229 15.8399 12.7635 15.8237 13.104C15.8174 13.2379 15.8093 13.3718 15.7993 13.5055C15.7884 13.6619 15.7613 13.74 15.8371 13.8838C15.9475 14.093 16.0323 14.3245 16.0904 14.5538C16.3193 15.4239 16.1867 16.3496 15.7227 17.1204C15.2262 17.944 14.4249 18.5384 13.4927 18.7746C13.3535 18.8092 13.2141 18.8346 13.0719 18.8542C12.9775 18.8671 12.8213 18.8655 12.7353 18.8934C12.6648 18.9163 12.5397 19.0196 12.4649 19.0616C12.225 19.1967 12.0178 19.2712 11.7525 19.3383C11.6602 19.3563 11.563 19.3744 11.4695 19.3826C10.8172 19.4416 10.1684 19.2376 9.66718 18.8161C9.21443 18.4358 8.91697 17.9027 8.8312 17.3177C8.79863 17.0847 8.80206 16.8099 8.80072 16.5733C8.79906 16.2824 8.79916 15.9913 8.81707 15.7009C8.83769 15.3431 8.81925 14.9814 8.87011 14.6262C8.90848 14.3583 8.99413 14.1463 9.09122 13.9004C9.10286 13.8709 9.08979 13.7519 9.08595 13.7138C9.04976 13.3561 9.06873 12.9984 9.11475 12.6425C9.18488 11.8833 9.40843 11.1449 9.90976 10.5509C10.3628 10.0135 10.9944 9.65733 11.6887 9.54766C11.8803 9.51684 12.059 9.50776 12.2513 9.49933C12.2929 9.49752 12.4696 9.40016 12.5249 9.37766C12.7706 9.27776 13.0106 9.22701 13.2746 9.20438Z" fill="#FEFEFE"/>
+<path d="M13.3787 10.32C13.4296 10.3147 13.4815 10.3181 13.5325 10.3219C14.0326 10.3589 14.4721 10.6705 14.6615 11.1366C14.7132 11.2639 14.7448 11.3984 14.7554 11.5354C14.7632 11.6427 14.756 11.7705 14.7523 11.8798L14.731 12.4277C14.7224 12.6926 14.7118 12.9574 14.6992 13.2221C14.6867 13.5091 14.6975 13.7363 14.5832 14.0068C14.6058 14.0341 14.6278 14.062 14.6492 14.0904C14.9943 14.5556 15.1413 15.1721 15.0542 15.7435C14.861 17.0127 13.5609 17.9375 12.3045 17.7456C12.2565 17.7928 12.2056 17.8573 12.1557 17.9069C12.0015 18.0602 11.8634 18.1383 11.6625 18.2094C11.5453 18.2445 11.4706 18.2577 11.3503 18.2649C10.9722 18.2875 10.6343 18.1775 10.3544 17.919C10.0751 17.6609 9.93309 17.3231 9.93016 16.9445C9.92719 16.7703 9.91518 16.5942 9.9173 16.4201C9.92239 15.9984 9.95222 15.5766 9.9564 15.1551C9.95811 14.9821 9.95783 14.8279 10.003 14.6583C10.0591 14.4481 10.1568 14.287 10.3037 14.1299C10.1478 13.6119 10.1878 13.0995 10.2645 12.5732C10.3564 11.9428 10.5405 11.3892 11.0752 10.9866C11.4955 10.6702 12.0594 10.5738 12.5736 10.6488C12.8291 10.4368 13.046 10.342 13.3787 10.32Z" fill="#51DADC"/>
+<path d="M13.3853 11.3168C13.8112 11.2845 13.7393 11.673 13.7266 11.9505L13.7045 12.5009L13.6802 13.0938C13.6758 13.2164 13.6705 13.3402 13.6651 13.4641C13.6546 13.705 13.3901 13.8232 13.1979 13.7033C13.0298 13.5986 13.0684 13.3313 13.0206 13.1535C12.9424 12.8621 12.8339 12.6454 12.6015 12.4463C12.537 12.3861 12.4745 12.3271 12.3984 12.2815C12.2482 12.1913 12.025 12.1996 11.9417 12.3757C11.8629 12.5423 11.8475 12.7335 11.8203 12.9141C11.7976 13.065 11.7819 13.2198 11.7821 13.3724C11.7824 13.4778 11.7936 13.5663 11.8212 13.6669C11.9192 14.0241 12.237 14.0118 12.5358 14.0659C13.1447 14.1782 13.8459 14.4274 14.0347 15.0866C14.1276 15.4112 14.0851 15.7105 13.9203 16.0043C13.7212 16.3521 13.3915 16.606 13.0044 16.7095C12.4717 16.8545 11.9841 16.6787 11.5243 16.4181C11.5244 16.5673 11.5255 16.7189 11.5328 16.8679C11.5427 17.0704 11.4832 17.2081 11.276 17.2608C11.0531 17.2914 10.932 17.1406 10.9238 16.9315C10.9048 16.4477 10.9237 15.9666 10.9431 15.4833C10.9526 15.3116 10.9372 15.1424 10.9584 14.9709C10.9952 14.6735 11.4135 14.6015 11.5341 14.8773C11.5653 14.9488 11.5614 15.0617 11.5677 15.1407C11.5852 15.3574 11.6355 15.59 11.7996 15.7455C12.0338 15.9609 12.2563 16.12 12.5819 16.1285C13.0028 16.1395 13.4627 15.802 13.4646 15.3582C13.4666 14.8689 12.8046 14.7156 12.4267 14.6373C12.2674 14.6043 12.0931 14.5874 11.9369 14.5382C11.4012 14.3776 11.1981 13.8639 11.1974 13.3436C11.1914 13.1695 11.218 12.9966 11.2379 12.8255C11.3063 12.2368 11.4767 11.6204 12.1904 11.6183C12.6333 11.6169 12.8433 11.8093 13.1477 12.1046C13.143 11.9782 13.1467 11.8486 13.1434 11.7226C13.1381 11.5147 13.1686 11.3858 13.3853 11.3168Z" fill="#FEFEFE"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/navbar-icons/map-edit-mode.svg b/ui/prototype/src/assets/editor/navbar-icons/map-edit-mode.svg
new file mode 100644
index 0000000000..df4f3d22df
--- /dev/null
+++ b/ui/prototype/src/assets/editor/navbar-icons/map-edit-mode.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M7.49903 1.96777C7.87072 1.96777 8.23781 2.0536 8.57032 2.21973L12.0801 3.97559C12.2102 4.04055 12.3536 4.07519 12.499 4.0752C12.6444 4.0752 12.7879 4.04055 12.918 3.97559L15.9668 2.4502C16.205 2.33127 16.4704 2.27605 16.7363 2.28809C17.0025 2.30021 17.2617 2.37929 17.4883 2.51953C17.7148 2.65977 17.9018 2.85608 18.0313 3.08887C18.1605 3.32139 18.2287 3.5836 18.2285 3.84961V14.4863C18.2284 14.7763 18.1476 15.061 17.9951 15.3076C17.8427 15.554 17.6243 15.7531 17.3652 15.8828L13.5703 17.7812C13.2378 17.9474 12.8708 18.0342 12.499 18.0342C12.1739 18.0342 11.8526 17.9676 11.5547 17.8398L11.4277 17.7812L7.91797 16.0254C7.78789 15.9604 7.64444 15.9268 7.49903 15.9268C7.35359 15.9268 7.21018 15.9614 7.08008 16.0264L4.03125 17.5508C3.79281 17.6699 3.527 17.7261 3.26075 17.7139C2.99447 17.7016 2.73536 17.6219 2.50879 17.4814C2.28236 17.341 2.09518 17.145 1.96582 16.9121C1.83648 16.6791 1.76893 16.4159 1.76954 16.1494V5.51562L1.77442 5.40625C1.79213 5.15433 1.87054 4.91005 2.00391 4.69434C2.15644 4.44775 2.37446 4.24784 2.63379 4.11816L6.42774 2.2207C6.76024 2.05458 7.12734 1.96778 7.49903 1.96777ZM8.22852 14.583C8.34537 14.6204 8.45993 14.6665 8.57032 14.7217L11.7695 16.3213V5.41797C11.6969 5.39472 11.625 5.36901 11.5547 5.33887L11.4277 5.28027L8.22852 3.67969V14.583ZM16.6436 3.74609L16.6191 3.75488L13.5703 5.28027C13.46 5.3354 13.3453 5.38057 13.2285 5.41797V16.3213L16.7119 14.5791C16.7292 14.5705 16.7447 14.5565 16.7549 14.54C16.7648 14.5237 16.7695 14.5045 16.7695 14.4854V3.84863C16.7696 3.83087 16.7655 3.8124 16.7568 3.79688C16.7483 3.78168 16.7355 3.769 16.7207 3.75977C16.7058 3.75055 16.6884 3.74502 16.6709 3.74414C16.6619 3.74373 16.6523 3.74422 16.6436 3.74609ZM3.28614 5.42285C3.26891 5.43147 3.2543 5.44457 3.24414 5.46094C3.23404 5.47728 3.2286 5.49641 3.22852 5.51562V16.1533C3.22855 16.1709 3.23268 16.1887 3.24121 16.2041C3.24984 16.2195 3.26333 16.2329 3.27832 16.2422C3.29311 16.2512 3.30987 16.2569 3.32715 16.2578C3.34491 16.2586 3.36301 16.254 3.37891 16.2461L6.42774 14.7217L6.55469 14.6631C6.62508 14.6329 6.69681 14.6063 6.76954 14.583V3.67969L3.28614 5.42285Z"
+    fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/ui/prototype/src/assets/editor/navbar-icons/modify-project-name.svg b/ui/prototype/src/assets/editor/navbar-icons/modify-project-name.svg
new file mode 100644
index 0000000000..e47eef4937
--- /dev/null
+++ b/ui/prototype/src/assets/editor/navbar-icons/modify-project-name.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5945 12.3288C11.7937 11.5968 12.1021 10.4688 12.2701 9.86045C12.2946 9.78587 12.3356 9.71778 12.3901 9.66125C13.9158 8.1355 16.4155 5.65167 16.8616 5.20842C16.9003 5.17 16.9622 5.17006 17.0013 5.20803L19.2598 7.39986C19.2991 7.43806 19.3003 7.50074 19.2632 7.54123C19.2446 7.56159 19.2275 7.58075 19.2109 7.59965C17.5681 9.24125 16.4509 10.3596 14.8069 11.9916C14.7273 12.0706 14.6284 12.1273 14.5201 12.156C13.8877 12.336 12.8041 12.636 12.0973 12.8292C12.0278 12.8489 11.9543 12.8498 11.8844 12.8317C11.8145 12.8135 11.7506 12.7771 11.6994 12.7262C11.6482 12.6752 11.6115 12.6116 11.5931 12.5417C11.5746 12.4719 11.5751 12.3984 11.5945 12.3288ZM20.1253 6.65187C20.0865 6.68978 20.0246 6.69001 19.9857 6.65232L17.7312 4.47135C17.6925 4.43383 17.6904 4.37228 17.7266 4.3322C17.7406 4.31663 17.7505 4.30565 17.7505 4.30565C17.7793 4.27805 18.5341 3.51125 18.9325 3.12125C19.2483 2.83076 19.6633 2.67213 20.0923 2.67789C20.5214 2.68364 20.932 2.85335 21.2399 3.1522C21.5478 3.45105 21.7297 3.85639 21.7482 4.28508C21.7668 4.71377 21.6206 5.13331 21.3397 5.45765C20.9431 5.85765 20.5389 6.24689 20.1253 6.65187Z" fill="#0AA5BE"/>
+<path d="M15.8065 13.0248C15.5217 13.312 15.1571 13.5068 14.7601 13.584L10.8493 14.3388C10.7348 14.3609 10.6166 14.3544 10.5053 14.3197C10.394 14.2851 10.2929 14.2234 10.2112 14.1403C10.1294 14.0571 10.0696 13.955 10.0368 13.8431C10.0041 13.7312 9.99963 13.6129 10.0237 13.4988L10.8709 9.52081C10.9545 9.13047 11.1515 8.77353 11.4373 8.49481L15.9872 4.06956C16.2446 3.81922 16.0674 3.38281 15.7083 3.38281H6.18972C5.33847 3.38281 4.52205 3.7208 3.9199 4.3225C3.31775 4.9242 2.97915 5.74037 2.97852 6.59161V18.1392C2.97852 18.5609 3.06158 18.9784 3.22298 19.3679C3.38437 19.7574 3.62092 20.1114 3.91913 20.4095C4.21733 20.7075 4.57134 20.944 4.96093 21.1052C5.35053 21.2665 5.76807 21.3494 6.18972 21.3492H18.0157C18.8671 21.3492 19.6835 21.011 20.2855 20.409C20.8875 19.807 21.2257 18.9906 21.2257 18.1392V8.53774C21.2257 8.1807 20.7935 8.00254 20.5419 8.2559L15.8065 13.0248ZM13.1353 18.0732H6.97452C6.83675 18.0779 6.69944 18.0549 6.57077 18.0054C6.44211 17.9559 6.32472 17.8811 6.22559 17.7853C6.12647 17.6895 6.04764 17.5747 5.9938 17.4478C5.93996 17.3209 5.91221 17.1845 5.91221 17.0466C5.91221 16.9088 5.93996 16.7723 5.9938 16.6454C6.04764 16.5185 6.12647 16.4038 6.22559 16.308C6.32472 16.2122 6.44211 16.1373 6.57077 16.0878C6.69944 16.0384 6.83675 16.0153 6.97452 16.02H13.1353C13.4015 16.0291 13.6538 16.1413 13.8389 16.3328C14.024 16.5243 14.1274 16.7803 14.1274 17.0466C14.1274 17.313 14.024 17.5689 13.8389 17.7604C13.6538 17.952 13.4015 18.0641 13.1353 18.0732Z" fill="#51DADC"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/navbar-icons/new.svg b/ui/prototype/src/assets/editor/navbar-icons/new.svg
new file mode 100644
index 0000000000..f60b49c7ff
--- /dev/null
+++ b/ui/prototype/src/assets/editor/navbar-icons/new.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21 10V17C21 19 20 20 18 20H6C4 20 3 19 3 17V7C3 5 4 4 6 4H10L13 7H18C20 7 21 8 21 10Z" fill="#51DADC"/>
+  <path d="M14.5 12.75H12.75V11C12.75 10.586 12.414 10.25 12 10.25C11.586 10.25 11.25 10.586 11.25 11V12.75H9.5C9.086 12.75 8.75 13.086 8.75 13.5C8.75 13.914 9.086 14.25 9.5 14.25H11.25V16C11.25 16.414 11.586 16.75 12 16.75C12.414 16.75 12.75 16.414 12.75 16V14.25H14.5C14.914 14.25 15.25 13.914 15.25 13.5C15.25 13.086 14.914 12.75 14.5 12.75Z" fill="white"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/navbar-icons/offline.svg b/ui/prototype/src/assets/editor/navbar-icons/offline.svg
new file mode 100644
index 0000000000..711e1ff0e0
--- /dev/null
+++ b/ui/prototype/src/assets/editor/navbar-icons/offline.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M21.5301 3.53002L3.53011 21.53C3.38411 21.676 3.19208 21.75 3.00008 21.75C2.80808 21.75 2.61605 21.677 2.47005 21.53C2.17705 21.237 2.17705 20.762 2.47005 20.469L11.1312 11.808C9.41718 11.984 7.79407 12.672 6.49007 13.797C6.34807 13.919 6.17408 13.979 6.00008 13.979C5.79008 13.979 5.58118 13.891 5.43318 13.719C5.16218 13.406 5.19709 12.932 5.51009 12.661C7.30509 11.112 9.61008 10.259 12.0001 10.259C12.2201 10.259 12.4321 10.279 12.6461 10.293L14.859 8.08001C13.92 7.86501 12.9631 7.74902 12.0001 7.74902C8.85908 7.74902 5.84108 8.90301 3.50008 10.998C3.35708 11.126 3.17908 11.189 3.00008 11.189C2.79408 11.189 2.589 11.105 2.441 10.939C2.165 10.63 2.19108 10.156 2.50008 9.88003C5.11608 7.53803 8.49008 6.24902 12.0001 6.24902C13.3841 6.24902 14.7531 6.46001 16.0831 6.85601L20.47 2.46902C20.763 2.17602 21.2381 2.17602 21.5311 2.46902C21.8231 2.76202 21.8231 3.23802 21.5301 3.53002ZM12.0001 18C11.4481 18 11.0001 18.448 11.0001 19C11.0001 19.552 11.4481 20 12.0001 20C12.5521 20 13.0001 19.552 13.0001 19C13.0001 18.448 12.5521 18 12.0001 18ZM13.033 14.362C12.625 14.289 12.2362 14.56 12.1622 14.968C12.0892 15.376 12.3602 15.766 12.7672 15.839C13.4192 15.956 14.033 16.224 14.543 16.616C14.679 16.72 14.8391 16.771 14.9981 16.771C15.2241 16.771 15.4461 16.67 15.5941 16.478C15.8471 16.149 15.7842 15.678 15.4552 15.426C14.7572 14.889 13.919 14.521 13.033 14.362ZM16.378 11.275C16.001 11.093 15.5571 11.25 15.3751 11.622C15.1941 11.995 15.35 12.443 15.722 12.624C16.375 12.941 16.9761 13.336 17.5101 13.797C17.6521 13.92 17.8261 13.98 18.0001 13.98C18.2101 13.98 18.419 13.892 18.567 13.72C18.838 13.407 18.8031 12.933 18.4901 12.662C17.8581 12.116 17.147 11.649 16.378 11.275ZM19.4071 8.33804C19.0521 8.12404 18.592 8.23803 18.378 8.59203C18.163 8.94603 18.2772 9.40803 18.6322 9.62203C19.2852 10.018 19.915 10.482 20.503 11.002C20.646 11.128 20.8231 11.19 21.0001 11.19C21.2071 11.19 21.4131 11.105 21.5621 10.937C21.8361 10.627 21.8081 10.153 21.4981 9.87801C20.8421 9.29901 20.1391 8.78104 19.4071 8.33804Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/ui/prototype/src/assets/editor/navbar-icons/open.svg b/ui/prototype/src/assets/editor/navbar-icons/open.svg
new file mode 100644
index 0000000000..677c5441d0
--- /dev/null
+++ b/ui/prototype/src/assets/editor/navbar-icons/open.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5.09497 12.573C5.62497 11.624 6.62899 11.035 7.71899 11.036L18.9861 11.042L19 11.036V10C19 8 18 7 16 7H10L8 5H5C3 5 2 6 2 8V18.496L2.0061 18.493C2.0081 18.255 2.06092 18.011 2.19092 17.78L5.09497 12.573Z" fill="#0AA5BE"/>
+  <path d="M20.4991 11.043L18.9871 11.042L7.72001 11.036C6.63001 11.035 5.62499 11.624 5.09599 12.573L2.19194 17.78C2.06294 18.012 2.00912 18.255 2.00712 18.493C2.00112 19.279 2.62497 20 3.50297 20H16.284C17.373 20 18.377 19.412 18.906 18.464L21.8101 13.263C22.3651 12.268 21.6421 11.043 20.4991 11.043Z" fill="#51DADC"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/navbar-icons/project-page.svg b/ui/prototype/src/assets/editor/navbar-icons/project-page.svg
new file mode 100644
index 0000000000..14f7c12bf8
--- /dev/null
+++ b/ui/prototype/src/assets/editor/navbar-icons/project-page.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M19 19.25H13.8521C13.6491 18.75 13.251 18.351 12.75 18.148V15H11.25V18.148C10.75 18.351 10.3509 18.749 10.1479 19.25H5C4.586 19.25 4.25 19.586 4.25 20C4.25 20.414 4.586 20.75 5 20.75H10.1479C10.4449 21.482 11.161 22 12 22C12.839 22 13.5551 21.482 13.8521 20.75H19C19.414 20.75 19.75 20.414 19.75 20C19.75 19.586 19.414 19.25 19 19.25Z" fill="#0AA5BE"/>
+  <path d="M17 4H12L10 2H7C5 2 4 3 4 5V12C4 14 5 15 7 15H11.25H12.75H17C19 15 20 14 20 12V7C20 5 19 4 17 4Z" fill="#51DADC"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/navbar-icons/publish.svg b/ui/prototype/src/assets/editor/navbar-icons/publish.svg
new file mode 100644
index 0000000000..189e952283
--- /dev/null
+++ b/ui/prototype/src/assets/editor/navbar-icons/publish.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M22 13C22 15.76 19.76 18 17 18H12.301C12.101 18 12 17.837 12 17.67C12 16.58 11.4799 15.61 10.6599 15C11.4799 14.39 12 13.42 12 12.33C12 10.5 10.4999 9 8.66992 9C7.26992 9 6.05006 9.89002 5.56006 11.15L4.26001 11.8C4.05101 11.896 4 11.669 4 11.5C4 7.91 6.91 5 10.5 5C12.15 5 13.65 5.61 14.79 6.62C15.27 7.05 15.69 7.54003 16.03 8.09003C16.35 8.03003 16.67 8 17 8C19.76 8 22 10.24 22 13Z" fill="#51DADC"/>
+  <path d="M8.66699 15.8329C8.14999 15.8329 7.68507 16.05 7.35107 16.395L5.13794 15.2889C5.15294 15.1949 5.16699 15.0989 5.16699 15.0009C5.16699 14.9029 5.15294 14.807 5.13794 14.713L7.35107 13.6069C7.68407 13.9519 8.14999 14.1689 8.66699 14.1689C9.67799 14.1689 10.5 13.3459 10.5 12.3359C10.5 11.3249 9.67799 10.5029 8.66699 10.5029C7.70799 10.5029 6.92812 11.2449 6.84912 12.1829L4.30493 13.455C4.02293 13.277 3.69101 13.1699 3.33301 13.1699C2.32201 13.1699 1.5 13.9929 1.5 15.0029C1.5 16.0129 2.32201 16.8359 3.33301 16.8359C3.69101 16.8359 4.02193 16.729 4.30493 16.551L6.84912 17.8229C6.92812 18.7609 7.70799 19.5029 8.66699 19.5029C9.67799 19.5029 10.5 18.6799 10.5 17.6699C10.5 16.6559 9.67799 15.8329 8.66699 15.8329Z" fill="#0AA5BE"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/navbar-icons/remove-project.svg b/ui/prototype/src/assets/editor/navbar-icons/remove-project.svg
new file mode 100644
index 0000000000..f5ad899315
--- /dev/null
+++ b/ui/prototype/src/assets/editor/navbar-icons/remove-project.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21 13.2983V10C21 8 20 7 18 7H13L10 4H6C4 4 3 5 3 7V17C3 19 4 20 6 20H12.9541C12.8901 19.3446 13.109 18.6667 13.6111 18.1647L14.2756 17.5001L13.6109 16.8355C12.7205 15.9451 12.7205 14.5015 13.6109 13.6111C14.5013 12.7207 15.9449 12.7207 16.8353 13.6111L17.5 14.2757L18.1648 13.6109C18.9347 12.841 20.1182 12.7368 21 13.2983Z" fill="#51DADC"/>
+    <path d="M15.7322 14.6716C15.4393 14.3787 14.9645 14.3787 14.6716 14.6716C14.3787 14.9645 14.3787 15.4393 14.6716 15.7322L16.4393 17.5L14.6716 19.2678C14.3787 19.5607 14.3787 20.0355 14.6716 20.3284C14.9645 20.6213 15.4393 20.6213 15.7322 20.3284L17.5 18.5607L19.2678 20.3284C19.5607 20.6213 20.0355 20.6213 20.3284 20.3284C20.6213 20.0355 20.6213 19.5607 20.3284 19.2678L18.5607 17.5L20.3284 15.7322C20.6213 15.4393 20.6213 14.9645 20.3284 14.6716C20.0355 14.3787 19.5607 14.3787 19.2678 14.6716L17.5 16.4393L15.7322 14.6716Z" fill="#0AA5BE"/>
+    </svg>
+    
\ No newline at end of file
diff --git a/ui/prototype/src/assets/editor/navbar-icons/saving.svg b/ui/prototype/src/assets/editor/navbar-icons/saving.svg
new file mode 100644
index 0000000000..0ec9462a53
--- /dev/null
+++ b/ui/prototype/src/assets/editor/navbar-icons/saving.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M9.69345 19.02H15.7035C18.6354 19.02 21.02 16.7034 21.02 13.856C21.02 11.0087 18.6354 8.69292 15.7035 8.69292C15.5517 8.69292 15.403 8.69862 15.2548 8.71047C15.1844 8.7161 15.1158 8.68582 15.0729 8.62977C14.7924 8.26362 14.4743 7.92627 14.1206 7.62344C12.8964 6.57646 11.3245 6 9.69345 6C5.99684 6 2.98999 8.92007 2.98999 12.51C2.98999 16.0999 5.99684 19.02 9.69345 19.02Z"
+    stroke="currentColor"
+    stroke-width="1.5"
+  />
+</svg>
diff --git a/ui/prototype/src/assets/editor/navbar-icons/tutorial.svg b/ui/prototype/src/assets/editor/navbar-icons/tutorial.svg
new file mode 100644
index 0000000000..5cdb144f50
--- /dev/null
+++ b/ui/prototype/src/assets/editor/navbar-icons/tutorial.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.9023 2.19043C11.3051 2.19043 11.6318 2.51721 11.6318 2.91992C11.6318 3.32262 11.305 3.64941 10.9023 3.64941H4.88379C4.39368 3.64948 3.95524 3.78617 3.66211 3.98926C3.37171 4.19061 3.29805 4.39568 3.29785 4.52344V13.1416C3.78767 12.895 4.34947 12.7676 4.91309 12.7676H16.8398V12.2041C16.8398 11.8014 17.1666 11.4746 17.5693 11.4746C17.9719 11.4748 18.2979 11.8015 18.2979 12.2041V16.3711C18.2979 16.827 18.0609 17.2106 17.7383 17.458C17.4198 17.7021 17.0201 17.8193 16.6318 17.8193H4.91309C4.15177 17.8193 3.39383 17.5889 2.81152 17.1426C2.3323 16.7752 1.98804 16.2681 1.87793 15.6904C1.85401 15.6183 1.83987 15.5411 1.83984 15.4609V4.52344C1.84005 3.8006 2.25503 3.18987 2.83203 2.79004C3.4069 2.39182 4.14653 2.1905 4.88379 2.19043H10.9023ZM4.91309 14.2256C4.43137 14.2256 3.99598 14.3742 3.69922 14.6016C3.40665 14.8258 3.29785 15.083 3.29785 15.2939L3.30273 15.374C3.32738 15.5675 3.44327 15.7881 3.69922 15.9844C3.99599 16.2118 4.43123 16.3604 4.91309 16.3604H16.6318C16.7305 16.3603 16.8025 16.3308 16.8398 16.3066V14.2256H4.91309ZM15.9092 3.125C16.0393 3.12508 16.1654 3.17084 16.2656 3.25391C16.3658 3.33711 16.434 3.45308 16.458 3.58105L16.8271 5.5293C16.8456 5.62657 16.8929 5.7171 16.9629 5.78711C17.0328 5.85691 17.1226 5.90348 17.2197 5.92188L19.168 6.29102L19.2617 6.31641C19.352 6.35028 19.4327 6.40747 19.4951 6.48242C19.5784 6.58267 19.6249 6.70953 19.625 6.83984C19.625 6.97025 19.5784 7.09694 19.4951 7.19727C19.4327 7.27235 19.3521 7.32935 19.2617 7.36328L19.168 7.38965L17.2197 7.75781C17.1226 7.77622 17.0329 7.82367 16.9629 7.89355C16.8929 7.96362 16.8455 8.05402 16.8271 8.15137L16.458 10.0996C16.434 10.2276 16.3658 10.3436 16.2656 10.4268C16.1655 10.5097 16.0393 10.5556 15.9092 10.5557C15.779 10.5556 15.652 10.5099 15.5518 10.4268C15.4767 10.3643 15.4197 10.2828 15.3857 10.1924L15.3594 10.0996L14.9912 8.15137C14.9728 8.05408 14.9254 7.9636 14.8555 7.89355C14.7855 7.82372 14.6958 7.77621 14.5986 7.75781L12.6494 7.38965C12.5216 7.36554 12.4054 7.29736 12.3223 7.19727C12.2391 7.09699 12.1934 6.97013 12.1934 6.83984C12.1934 6.70957 12.239 6.58266 12.3223 6.48242C12.4054 6.38238 12.5216 6.3151 12.6494 6.29102L14.5986 5.92188C14.6957 5.90347 14.7855 5.85693 14.8555 5.78711C14.9255 5.71712 14.9728 5.62654 14.9912 5.5293L15.3594 3.58105C15.3834 3.45313 15.4517 3.33711 15.5518 3.25391C15.652 3.17064 15.7789 3.12507 15.9092 3.125Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/quick-config/back.svg b/ui/prototype/src/assets/editor/quick-config/back.svg
new file mode 100644
index 0000000000..7debc6d8f4
--- /dev/null
+++ b/ui/prototype/src/assets/editor/quick-config/back.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.5857 2.25274C5.81343 2.02507 6.18406 2.02519 6.41187 2.25274C6.63922 2.48046 6.6392 2.85022 6.41187 3.07794L4.07398 5.41485H9.66578C10.2236 5.41492 10.7764 5.52564 11.2918 5.73907C11.8072 5.95261 12.2761 6.26548 12.6707 6.65997C13.0652 7.0545 13.378 7.52344 13.5916 8.03888C13.805 8.55426 13.9157 9.10701 13.9158 9.66485C13.9158 10.2229 13.8051 10.7762 13.5916 11.2918C13.378 11.8073 13.0652 12.2761 12.6707 12.6707C12.2761 13.0653 11.8073 13.378 11.2918 13.5916C10.7763 13.8051 10.2237 13.9148 9.66578 13.9149H7.33179C7.00979 13.9147 6.74879 13.6539 6.74879 13.3318C6.74902 13.01 7.00993 12.749 7.33179 12.7488H9.66578C10.0705 12.7488 10.4716 12.6683 10.8455 12.5135C11.2194 12.3585 11.5593 12.1317 11.8455 11.8455C12.1318 11.5592 12.3585 11.2186 12.5134 10.8445C12.6682 10.4706 12.7488 10.0695 12.7488 9.66485C12.7487 9.26024 12.6683 8.85899 12.5134 8.48517C12.3585 8.11138 12.1316 7.77128 11.8455 7.48517C11.5593 7.19908 11.2193 6.9721 10.8455 6.8172C10.4716 6.66241 10.0704 6.58191 9.66578 6.58185H4.07398L6.41187 8.91876C6.6396 9.1465 6.63948 9.51711 6.41187 9.74493C6.18407 9.97274 5.81351 9.97273 5.5857 9.74493L2.25269 6.41095C2.02527 6.18311 2.02502 5.81343 2.25269 5.58575L5.5857 2.25274Z" fill="currentColor" />
+</svg>
diff --git a/ui/prototype/src/assets/editor/quick-config/edit.svg b/ui/prototype/src/assets/editor/quick-config/edit.svg
new file mode 100644
index 0000000000..65f22b6743
--- /dev/null
+++ b/ui/prototype/src/assets/editor/quick-config/edit.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.93831 7.00113L4.66667 12.25H1.75V9.33332L6.99886 4.06175C7.06711 3.99291 7.17797 3.99291 7.24681 4.06175L9.93888 6.75383C10.0071 6.82207 10.0071 6.93288 9.93831 7.00113ZM10.5629 6.1413C10.6312 6.20955 10.7421 6.20955 10.8103 6.1413L11.9058 5.04584C12.3631 4.5885 12.3631 3.84652 11.9058 3.38919L10.6108 2.09414C10.1535 1.6368 9.41156 1.6368 8.95422 2.09414L7.85862 3.18967C7.79037 3.25792 7.79037 3.36872 7.85862 3.43697L10.5629 6.1413ZM12.25 11.8125H8.16667C7.92517 11.8125 7.72917 12.0085 7.72917 12.25C7.72917 12.4915 7.92517 12.6875 8.16667 12.6875H12.25C12.4915 12.6875 12.6875 12.4915 12.6875 12.25C12.6875 12.0085 12.4915 11.8125 12.25 11.8125Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/quick-config/layer.svg b/ui/prototype/src/assets/editor/quick-config/layer.svg
new file mode 100644
index 0000000000..1d02c58291
--- /dev/null
+++ b/ui/prototype/src/assets/editor/quick-config/layer.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7706 10.6038C14.0742 10.4969 14.4075 10.6567 14.5147 10.9602C14.6218 11.264 14.462 11.5971 14.1583 11.7044L8.19343 13.8098C8.06803 13.854 7.93114 13.854 7.80574 13.8098L1.84089 11.7044C1.53728 11.5971 1.37738 11.2639 1.48445 10.9602C1.59165 10.6567 1.92501 10.497 2.22859 10.6038L8.00007 12.6409L13.7706 10.6038ZM13.7706 7.79712C14.0743 7.6902 14.4075 7.84991 14.5147 8.15357C14.6218 8.4573 14.462 8.79051 14.1583 8.89771L8.19343 11.0032C8.06806 11.0473 7.9311 11.0473 7.80574 11.0032L1.84089 8.89771C1.53726 8.79049 1.37746 8.45725 1.48445 8.15357C1.59161 7.84994 1.92493 7.69027 2.22859 7.79712L8.00007 9.83423L13.7706 7.79712ZM7.83406 2.17408C7.9602 2.13676 8.09589 2.14373 8.21882 2.19361L14.1837 4.61939C14.4026 4.70845 14.5469 4.9211 14.5479 5.15748C14.5488 5.39342 14.4071 5.60642 14.1895 5.69751L8.22468 8.18384C8.08117 8.24362 7.91899 8.24359 7.77546 8.18384L1.81062 5.69751C1.59274 5.60653 1.45037 5.39359 1.45124 5.15748C1.45227 4.92131 1.59589 4.70858 1.81453 4.61939L7.77937 2.19361L7.83406 2.17408ZM3.56648 5.16626L8.00007 7.01392L12.4317 5.16626L7.9991 3.36353L3.56648 5.16626Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/quick-config/more.svg b/ui/prototype/src/assets/editor/quick-config/more.svg
new file mode 100644
index 0000000000..a6183f6672
--- /dev/null
+++ b/ui/prototype/src/assets/editor/quick-config/more.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.02002 14C2.91602 14 2.01501 13.104 2.01501 12C2.01501 10.896 2.90501 10 4.01001 10H4.02002C5.12402 10 6.02002 10.896 6.02002 12C6.02002 13.104 5.12502 14 4.02002 14ZM14.02 12C14.02 10.896 13.124 10 12.02 10H12.01C10.906 10 10.015 10.896 10.015 12C10.015 13.104 10.915 14 12.02 14C13.125 14 14.02 13.104 14.02 12ZM22.02 12C22.02 10.896 21.124 10 20.02 10H20.01C18.906 10 18.015 10.896 18.015 12C18.015 13.104 18.915 14 20.02 14C21.125 14 22.02 13.104 22.02 12Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/quick-config/position.svg b/ui/prototype/src/assets/editor/quick-config/position.svg
new file mode 100644
index 0000000000..93ae6ffcd4
--- /dev/null
+++ b/ui/prototype/src/assets/editor/quick-config/position.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0.75C8.32206 0.75 8.58283 1.01099 8.58301 1.33301V2.7832C11.0163 3.05226 12.9477 4.98365 13.2168 7.41699H14.667C14.989 7.41717 15.25 7.67794 15.25 8C15.25 8.32206 14.989 8.58283 14.667 8.58301H13.2168C12.9477 11.0163 11.0163 12.9467 8.58301 13.2158V14.667C8.58283 14.989 8.32206 15.25 8 15.25C7.67794 15.25 7.41717 14.989 7.41699 14.667V13.2158C4.98368 12.9467 3.05225 11.0163 2.7832 8.58301H1.33301C1.01099 8.58283 0.75 8.32206 0.75 8C0.75 7.67794 1.01099 7.41717 1.33301 7.41699H2.7832C3.05226 4.98365 4.98365 3.05226 7.41699 2.7832V1.33301C7.41717 1.01099 7.67794 0.75 8 0.75ZM8 3.91699C5.74484 3.91699 3.91699 5.74484 3.91699 8C3.91699 10.2552 5.74484 12.083 8 12.083C10.2552 12.083 12.083 10.2552 12.083 8C12.083 5.74484 10.2552 3.91699 8 3.91699ZM8 6C9.10457 6 10 6.89543 10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6ZM8 7.16699C7.53976 7.16699 7.16699 7.53976 7.16699 8C7.16699 8.46024 7.53976 8.83301 8 8.83301C8.46024 8.83301 8.83301 8.46024 8.83301 8C8.83301 7.53976 8.46024 7.16699 8 7.16699Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/quick-config/resize.svg b/ui/prototype/src/assets/editor/quick-config/resize.svg
new file mode 100644
index 0000000000..7179e93957
--- /dev/null
+++ b/ui/prototype/src/assets/editor/quick-config/resize.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99902 1.41699C8.32108 1.41699 8.58283 1.67798 8.58301 2C8.58301 2.32217 8.32119 2.58398 7.99902 2.58398H3.33301C3.1341 2.58398 2.94241 2.66208 2.80176 2.80273C2.66111 2.94339 2.58301 3.13507 2.58301 3.33398V12.667C2.58301 12.8658 2.66131 13.0566 2.80176 13.1973C2.94241 13.3379 3.1341 13.417 3.33301 13.417H12.666C12.8649 13.417 13.0556 13.3379 13.1963 13.1973C13.3369 13.0566 13.416 12.8659 13.416 12.667V8C13.4162 7.67809 13.6771 7.41717 13.999 7.41699C14.3211 7.41699 14.5828 7.67798 14.583 8V12.667C14.583 13.1753 14.3809 13.663 14.0215 14.0225C13.662 14.3819 13.1743 14.584 12.666 14.584H3.33301C2.82475 14.584 2.33697 14.3818 1.97754 14.0225C1.61809 13.663 1.41602 13.1753 1.41602 12.667V3.33398C1.41602 2.82565 1.61809 2.33796 1.97754 1.97852C2.33698 1.61907 2.82468 1.41699 3.33301 1.41699H7.99902ZM14.1104 1.42773L14.1172 1.42871C14.1211 1.42952 14.125 1.43076 14.1289 1.43164C14.1607 1.43885 14.1922 1.44834 14.2227 1.46094C14.2288 1.46347 14.2352 1.46601 14.2412 1.46875C14.3032 1.49691 14.3612 1.53695 14.4121 1.58789C14.4628 1.63858 14.5022 1.69619 14.5303 1.75781C14.533 1.76382 14.5355 1.77025 14.5381 1.77637C14.5649 1.84098 14.5785 1.90967 14.5811 1.97852C14.5813 1.98566 14.583 1.99279 14.583 2V5.33398C14.5828 5.656 14.3211 5.91699 13.999 5.91699C13.6771 5.91682 13.4162 5.65589 13.416 5.33398V3.40918L7.4082 9.41699H9.33301C9.65492 9.41717 9.91584 9.67809 9.91602 10C9.91602 10.3221 9.65502 10.5838 9.33301 10.584H5.99902C5.96048 10.584 5.92172 10.5799 5.88379 10.5723C5.87885 10.5713 5.87403 10.5695 5.86914 10.5684C5.8373 10.5611 5.80588 10.5517 5.77539 10.5391C5.76928 10.5365 5.76284 10.534 5.75684 10.5312C5.69522 10.5031 5.6376 10.4637 5.58691 10.4131C5.53597 10.3621 5.49593 10.3042 5.46777 10.2422C5.46504 10.2362 5.4625 10.2297 5.45996 10.2236C5.4305 10.1523 5.41602 10.076 5.41602 10V6.66699C5.41602 6.34493 5.67701 6.08416 5.99902 6.08398C6.32119 6.08398 6.58301 6.34483 6.58301 6.66699V8.5918L12.5908 2.58398H10.666C10.3438 2.58398 10.083 2.32217 10.083 2C10.0832 1.67798 10.344 1.41699 10.666 1.41699H13.999C14.0362 1.41699 14.0737 1.42067 14.1104 1.42773Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/quick-config/rotate.svg b/ui/prototype/src/assets/editor/quick-config/rotate.svg
new file mode 100644
index 0000000000..77b61d0dcf
--- /dev/null
+++ b/ui/prototype/src/assets/editor/quick-config/rotate.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0645 8.08789C14.3842 8.12358 14.6153 8.41157 14.5801 8.73145C14.525 9.22943 14.4139 9.71136 14.2539 10.1699C13.3576 12.739 10.9135 14.5837 8.03711 14.584C5.79071 14.5839 3.80793 13.4586 2.62012 11.7422V13.334C2.62009 13.656 2.35907 13.9177 2.03711 13.918C1.71496 13.918 1.45315 13.6561 1.45312 13.334V10.0674C1.45327 9.70861 1.74474 9.41811 2.10352 9.41797H5.37012C5.69224 9.41802 5.95312 9.67884 5.95312 10.001C5.9531 10.3231 5.69223 10.5839 5.37012 10.584H3.27441C4.19226 12.2721 5.98187 13.4179 8.03711 13.418C10.402 13.4177 12.4143 11.9012 13.1523 9.78613C13.2837 9.40958 13.3746 9.01323 13.4199 8.60352C13.4555 8.28357 13.7445 8.05269 14.0645 8.08789ZM8 1.41797C10.2462 1.41805 12.2292 2.54255 13.417 4.25879V2.66797C13.417 2.3459 13.678 2.08411 14 2.08398C14.322 2.08413 14.584 2.34591 14.584 2.66797V5.93457C14.5838 6.29326 14.2922 6.5837 13.9336 6.58398H10.667C10.3448 6.58398 10.084 6.32314 10.084 6.00098C10.084 5.67883 10.3448 5.41797 10.667 5.41797H12.7617C11.8439 3.72999 10.0551 2.58408 8 2.58398C5.63498 2.58409 3.62284 4.10072 2.88477 6.21582C2.7534 6.59239 2.66251 6.98871 2.61719 7.39844C2.58167 7.71837 2.29261 7.94921 1.97266 7.91406C1.65269 7.87854 1.42183 7.59051 1.45703 7.27051C1.51209 6.7725 1.62324 6.29062 1.7832 5.83203C2.67956 3.26284 5.12342 1.41807 8 1.41797Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/sprite-generator/animation.svg b/ui/prototype/src/assets/editor/sprite-generator/animation.svg
new file mode 100644
index 0000000000..4f5d538d5d
--- /dev/null
+++ b/ui/prototype/src/assets/editor/sprite-generator/animation.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M8.33203 6.71387C8.58841 6.68143 8.96092 6.70911 9.22656 6.72168L10.3428 6.77148L11.6182 6.82617C11.9965 6.84119 12.4493 6.84839 12.8135 6.93457C13.2592 7.0378 13.6775 7.23786 14.0381 7.51953C14.2418 7.67852 14.4509 7.8688 14.6465 8.04004L15.6357 8.90723C15.7729 9.02732 16.0907 9.32047 16.2178 9.4082C16.437 9.34407 16.6821 9.25382 16.9014 9.17871L18.0723 8.77734C18.2541 8.71505 18.4388 8.65324 18.6201 8.58984C18.8798 8.4992 19.1262 8.49359 19.373 8.63086C19.5711 8.73991 19.7175 8.92458 19.7773 9.14258C19.8379 9.36141 19.8077 9.59622 19.6943 9.79297C19.6263 9.90967 19.5305 10.0084 19.416 10.0801C19.3034 10.1513 19.078 10.2479 18.9492 10.3066L18.1875 10.6543L17.1836 11.1152C16.9507 11.2223 16.658 11.3693 16.416 11.4326C15.9652 11.5504 15.4483 11.47 15.0498 11.2305C14.9028 11.142 14.7609 11.0304 14.623 10.9268L14.0537 10.498C13.9563 10.4245 13.801 10.3007 13.6992 10.2441C13.6187 10.6082 13.5178 10.994 13.4287 11.3584L12.9766 13.207L15.3809 15.7793C15.8167 16.2444 16.133 16.5497 16.1094 17.2441C16.1044 17.4357 16.0617 17.6249 15.9834 17.7998C15.9053 17.9785 15.7544 18.2313 15.6553 18.4092L14.3096 20.8262C14.1788 21.0612 14.049 21.2999 13.9141 21.5312C13.8118 21.7065 13.6568 21.8445 13.4756 21.9316C13.4352 21.951 13.3755 21.9756 13.3398 22H12.6787L12.6709 21.9951C12.5954 21.9522 12.5174 21.9216 12.4404 21.876C12.0454 21.6416 11.8649 21.1595 11.9756 20.7188C12.0255 20.5202 12.1377 20.3258 12.2148 20.1357C12.2585 20.0318 12.3083 19.9257 12.3545 19.8223L13.1084 18.1279C13.215 17.8885 13.4104 17.4848 13.4961 17.2471L11.8545 15.6768L11.3965 15.2373C11.3308 15.1742 11.2133 15.0551 11.1465 15.002C10.9941 15.1689 10.8004 15.4247 10.6553 15.6064L6.27539 21.0928C6.16291 21.2336 5.93342 21.5374 5.81152 21.6475C5.64359 21.7993 5.42816 21.8898 5.20215 21.9023C4.94867 21.9151 4.67972 21.8085 4.49316 21.6377C4.30022 21.4637 4.18722 21.2178 4.18066 20.958C4.16681 20.5173 4.44129 20.2317 4.68262 19.8906L8.03125 15.1562L8.6377 14.3008C8.70958 14.1995 8.8679 13.9849 8.92383 13.8857C8.96924 13.8048 9.03691 13.4847 9.06348 13.373L9.28027 12.4639L10.1699 8.75098C9.58157 8.75047 8.96255 8.74077 8.37695 8.75684C8.26343 8.90772 8.14721 9.09117 8.04102 9.25098L7.49414 10.0732C7.38002 10.2448 7.20404 10.5356 7.05957 10.6689C6.92422 10.7936 6.75423 10.8749 6.57227 10.9023C6.31959 10.9404 6.06171 10.8745 5.8584 10.7197C5.65491 10.5656 5.52147 10.3474 5.4873 10.0938C5.46508 9.92969 5.48569 9.76222 5.54688 9.6084C5.59956 9.4796 5.71409 9.3196 5.79395 9.2002L6.62305 7.96387C6.72569 7.81077 6.83948 7.63246 6.95117 7.48828C7.29089 7.05782 7.78755 6.77909 8.33203 6.71387ZM13.8252 2C13.898 2.02971 13.9963 2.03605 14.0742 2.05469C14.7456 2.21529 15.2522 2.72834 15.4639 3.37695C15.6475 3.95451 15.5948 4.58174 15.3184 5.12109C15.0649 5.62489 14.6215 6.00778 14.0859 6.18457C13.6235 6.32762 13.1225 6.2834 12.6924 6.06152C12.2192 5.80875 11.8665 5.37654 11.7139 4.8623C11.541 4.28226 11.603 3.65723 11.8857 3.12207C12.1647 2.59849 12.6321 2.19884 13.2139 2.06152C13.2983 2.04165 13.3904 2.02833 13.4727 2.00293L13.4814 2H13.8252Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/ui/prototype/src/assets/editor/sprite-generator/costume.svg b/ui/prototype/src/assets/editor/sprite-generator/costume.svg
new file mode 100644
index 0000000000..28da62f42c
--- /dev/null
+++ b/ui/prototype/src/assets/editor/sprite-generator/costume.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.7415 9.62334L19.7131 10.9021C19.5659 10.9905 19.392 11.0233 19.2227 10.9947C19.0534 10.9661 18.9 10.8779 18.7901 10.746L17.7824 9.48053V19.0755C17.7821 19.2419 17.7158 19.4015 17.5981 19.5192C17.4804 19.6369 17.3208 19.7032 17.1543 19.7036H6.85324C6.68676 19.7032 6.5272 19.6369 6.40948 19.5192C6.29176 19.4015 6.22548 19.2419 6.22513 19.0755V9.46995L5.20824 10.746C5.09838 10.8775 4.94518 10.9655 4.7762 10.9941C4.60723 11.0228 4.4336 10.9901 4.28657 10.9021L2.25677 9.62334C2.18893 9.58436 2.13094 9.53034 2.08724 9.46544C2.04355 9.40054 2.01532 9.32649 2.00472 9.24897C1.99412 9.17146 2.00143 9.09254 2.0261 9.01829C2.05077 8.94405 2.09213 8.87644 2.14701 8.82068L5.11568 5.52539C5.46462 5.13751 5.89122 4.82734 6.3678 4.61502C6.84438 4.4027 7.36029 4.29298 7.88203 4.29297H9.11842C9.36045 4.85762 9.76284 5.33885 10.2757 5.67702C10.7886 6.0152 11.3894 6.19545 12.0038 6.19545C12.6181 6.19545 13.219 6.0152 13.7318 5.67702C14.2447 5.33885 14.6471 4.85762 14.8891 4.29297H16.1242C16.6462 4.29312 17.1624 4.40304 17.6392 4.61559C18.116 4.82813 18.5428 5.13856 18.8919 5.52672L21.8539 8.81936C21.9087 8.87542 21.9499 8.9433 21.9744 9.01776C21.9988 9.09223 22.0059 9.17131 21.9951 9.24894C21.9842 9.32656 21.9557 9.40067 21.9118 9.46558C21.8678 9.53048 21.8096 9.58445 21.7415 9.62334Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/sprite-generator/param-settings/art-style.svg b/ui/prototype/src/assets/editor/sprite-generator/param-settings/art-style.svg
new file mode 100644
index 0000000000..cdd741f54c
--- /dev/null
+++ b/ui/prototype/src/assets/editor/sprite-generator/param-settings/art-style.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.999 5.25391C14.3815 5.25406 16.3135 7.18581 16.3135 9.56836C16.3135 9.88869 16.2772 10.2006 16.2109 10.501C16.9876 10.8524 17.6466 11.4282 18.0996 12.1592C18.642 13.0347 18.8534 14.076 18.6953 15.0938C18.5372 16.1114 18.0197 17.0392 17.2373 17.709C16.455 18.3785 15.4584 18.7468 14.4287 18.7461V18.7451C13.5584 18.7461 12.7123 18.4824 11.999 17.9951C11.8556 18.093 11.7058 18.1835 11.5508 18.2637C10.9379 18.5807 10.2574 18.7463 9.56738 18.7461C8.53878 18.7443 7.54323 18.375 6.7627 17.7051C5.98226 17.0352 5.46631 16.1082 5.30859 15.0918C5.15098 14.0754 5.36256 13.036 5.90332 12.1611C6.35511 11.4305 7.0129 10.8544 7.78809 10.502C7.7217 10.2012 7.68459 9.88902 7.68457 9.56836C7.68457 7.18594 9.61669 5.25427 11.999 5.25391ZM15.7227 11.7451C15.2733 12.5119 14.5949 13.1272 13.7803 13.4971C13.8912 13.9971 13.9125 14.5144 13.8418 15.0244C13.7469 15.7079 13.4893 16.3594 13.0908 16.9229C13.0611 16.9649 13.0282 17.005 12.9971 17.0459C13.433 17.2851 13.9254 17.4138 14.4287 17.4131L14.4297 17.4121C15.1411 17.4126 15.8296 17.1587 16.3701 16.6963C16.9105 16.2336 17.2686 15.5926 17.3779 14.8896C17.4871 14.1865 17.3405 13.4672 16.9658 12.8623C16.6649 12.3766 16.2326 11.9901 15.7227 11.7451ZM8.27539 11.7451C7.76764 11.9909 7.3368 12.3776 7.03711 12.8623C6.66353 13.4668 6.51707 14.1854 6.62598 14.8877C6.73502 15.5899 7.09165 16.2305 7.63086 16.6934C8.16993 17.1561 8.857 17.4106 9.56738 17.4121C10.0442 17.4122 10.515 17.2981 10.9385 17.0791C11.3618 16.8601 11.7266 16.5424 12.002 16.1533C12.2773 15.764 12.4549 15.3131 12.5205 14.8408C12.5662 14.5114 12.5553 14.1778 12.4912 13.8535C12.3299 13.8718 12.1653 13.8818 11.999 13.8818C10.4111 13.8816 9.02423 13.0229 8.27539 11.7451ZM11.999 6.58691C10.3531 6.58728 9.01855 7.92232 9.01855 9.56836C9.01871 11.2143 10.3532 12.5485 11.999 12.5488C13.6451 12.5487 14.9793 11.2144 14.9795 9.56836C14.9795 7.92219 13.6452 6.58707 11.999 6.58691Z" fill="#57606A"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/sprite-generator/param-settings/category.svg b/ui/prototype/src/assets/editor/sprite-generator/param-settings/category.svg
new file mode 100644
index 0000000000..879eb94da5
--- /dev/null
+++ b/ui/prototype/src/assets/editor/sprite-generator/param-settings/category.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.1211 5.56348C16.6278 5.50916 17.1411 5.53087 17.5879 5.8252C17.8226 5.97995 18.0239 6.18139 18.1787 6.41602C18.4732 6.86271 18.4947 7.37607 18.4404 7.88281C18.3864 8.38681 18.2392 9.02131 18.0625 9.78711L17.6436 11.6035C17.5779 11.888 17.5257 12.1303 17.417 12.3555C17.3834 12.425 17.3458 12.4932 17.3047 12.5586C17.1714 12.7703 16.9927 12.9428 16.7861 13.1494L12.6123 17.3242C12.2488 17.6877 11.9384 17.9988 11.6602 18.2227C11.372 18.4544 11.0572 18.6436 10.6689 18.7051C10.4539 18.7391 10.2346 18.7391 10.0195 18.7051C9.63147 18.6435 9.3173 18.4543 9.0293 18.2227C8.75106 17.9988 8.44059 17.6877 8.07715 17.3242L6.68066 15.9277C6.31713 15.5642 6.00515 15.2539 5.78125 14.9756C5.54954 14.6875 5.36031 14.3725 5.29883 13.9844C5.26485 13.7693 5.26478 13.55 5.29883 13.335C5.36035 12.9467 5.54948 12.6318 5.78125 12.3438C6.00515 12.0655 6.31719 11.7561 6.68066 11.3926L10.8545 7.21777C11.0611 7.01118 11.2346 6.83255 11.4463 6.69922C11.5114 6.65824 11.5792 6.6214 11.6484 6.58789C11.8737 6.47901 12.1167 6.42702 12.4014 6.36133L14.2168 5.94141C14.9826 5.76467 15.617 5.61754 16.1211 5.56348ZM16.2627 6.88867C15.8576 6.93217 15.3163 7.05569 14.5166 7.24023L12.7012 7.66016C12.3605 7.73877 12.2891 7.7593 12.2295 7.78809C12.2046 7.80013 12.1797 7.81339 12.1562 7.82812C12.1002 7.86345 12.0451 7.91286 11.7979 8.16016L7.62305 12.335C7.23863 12.7194 6.98845 12.9708 6.82031 13.1797C6.66056 13.3783 6.62656 13.4784 6.61621 13.543C6.604 13.6201 6.60402 13.6993 6.61621 13.7764C6.62644 13.8409 6.66027 13.9407 6.82031 14.1396C6.98839 14.3486 7.23871 14.6 7.62305 14.9844L9.01953 16.3809C9.40363 16.765 9.65543 17.0155 9.86426 17.1836C10.0627 17.3432 10.163 17.3783 10.2275 17.3887C10.3046 17.4009 10.3839 17.4008 10.4609 17.3887C10.5255 17.3784 10.625 17.3438 10.8242 17.1836C11.0332 17.0155 11.2845 16.7653 11.6689 16.3809L15.8438 12.207C16.0915 11.9593 16.1414 11.9038 16.1768 11.8477C16.1914 11.8244 16.2048 11.8001 16.2168 11.7754C16.2456 11.7157 16.2661 11.6444 16.3447 11.3037L16.7637 9.4873C16.9483 8.68729 17.0718 8.14636 17.1152 7.74121C17.1583 7.33907 17.1036 7.20832 17.0654 7.15039C17.01 7.0664 16.9385 6.99389 16.8545 6.93848C16.7965 6.90028 16.6646 6.84558 16.2627 6.88867ZM12.9307 8.67578C13.5911 8.01531 14.6626 8.01565 15.3232 8.67578C15.9838 9.33642 15.9839 10.4077 15.3232 11.0684C14.6626 11.7288 13.5912 11.7289 12.9307 11.0684C12.2706 10.4078 12.2704 9.33627 12.9307 8.67578ZM14.4277 9.57227C14.2618 9.40636 13.9931 9.40631 13.8271 9.57227C13.6614 9.73823 13.6613 10.0069 13.8271 10.1729C13.9931 10.3387 14.2618 10.3386 14.4277 10.1729C14.5937 10.0069 14.5936 9.73824 14.4277 9.57227Z" fill="#57606A"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/sprite-generator/param-settings/perspective.svg b/ui/prototype/src/assets/editor/sprite-generator/param-settings/perspective.svg
new file mode 100644
index 0000000000..130fec47c3
--- /dev/null
+++ b/ui/prototype/src/assets/editor/sprite-generator/param-settings/perspective.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.71973 6.40039C10.7991 5.42202 13.2067 5.42195 15.2861 6.40039L17.9033 7.63184C18.3706 7.85173 18.6689 8.3283 18.6689 8.84473C18.6689 13.1494 16.1829 17.0674 12.2881 18.9004L12.0029 19.0342L11.7178 18.9004C7.82274 17.0674 5.33599 13.1495 5.33594 8.84473C5.336 8.3283 5.63428 7.85173 6.10156 7.63184L8.71973 6.40039ZM6.69824 9.4834C6.90509 12.6528 8.64119 15.5168 11.332 17.1699V11.6641L6.69824 9.4834ZM12.6729 11.6641V17.1699C15.3638 15.5168 17.0998 12.6529 17.3066 9.4834L12.6729 11.6641ZM14.7158 7.61328C12.9977 6.80475 11.0082 6.80483 9.29004 7.61328L7.5791 8.41797L12.0029 10.498L16.4258 8.41797L14.7158 7.61328Z" fill="#57606A"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/sprite-generator/phase-settings-left-bottom-bg.png b/ui/prototype/src/assets/editor/sprite-generator/phase-settings-left-bottom-bg.png
new file mode 100644
index 0000000000..a1945f6c66
Binary files /dev/null and b/ui/prototype/src/assets/editor/sprite-generator/phase-settings-left-bottom-bg.png differ
diff --git a/ui/prototype/src/assets/editor/sprite-generator/phase-settings-right-top-bg.png b/ui/prototype/src/assets/editor/sprite-generator/phase-settings-right-top-bg.png
new file mode 100644
index 0000000000..9f9220f26e
Binary files /dev/null and b/ui/prototype/src/assets/editor/sprite-generator/phase-settings-right-top-bg.png differ
diff --git a/ui/prototype/src/assets/editor/stage-panel/backdrop.svg b/ui/prototype/src/assets/editor/stage-panel/backdrop.svg
new file mode 100644
index 0000000000..127a74efc1
--- /dev/null
+++ b/ui/prototype/src/assets/editor/stage-panel/backdrop.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M19 2.12451C20.5877 2.12451 21.8748 3.41188 21.875 4.99951V18.9995C21.875 20.5873 20.5878 21.8745 19 21.8745H5C3.41236 21.8743 2.125 20.5872 2.125 18.9995V4.99951C2.12522 3.41201 3.4125 2.12473 5 2.12451H19ZM5 3.87451C4.379 3.87473 3.87522 4.37851 3.875 4.99951V18.9995C3.875 19.6207 4.37886 20.1243 5 20.1245H5.63672L14.4668 11.2944C15.0058 10.7557 15.7379 10.4527 16.5 10.4526C17.262 10.4526 17.9932 10.7559 18.5322 11.2944L20.125 12.8862V4.99951C20.1248 4.37837 19.6212 3.87451 19 3.87451H5ZM16.5 12.2026C16.2021 12.2027 15.9159 12.3212 15.7051 12.5317L8.1123 20.1245H19C19.6213 20.1245 20.125 19.6208 20.125 18.9995V15.3618L17.2949 12.5317C17.084 12.3214 16.7979 12.2026 16.5 12.2026ZM9.00098 6.12451C10.5886 6.12464 11.8758 7.41196 11.876 8.99951C11.8759 10.5872 10.5886 11.8744 9.00098 11.8745C7.41338 11.8743 6.12604 10.5871 6.12598 8.99951C6.12619 7.41201 7.41347 6.12473 9.00098 6.12451ZM9.00098 7.87451C8.37997 7.87473 7.87619 8.37851 7.87598 8.99951C7.87604 9.62064 8.37988 10.1243 9.00098 10.1245C9.62214 10.1244 10.1259 9.62069 10.126 8.99951C10.1258 8.37846 9.62205 7.87464 9.00098 7.87451Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/ui/prototype/src/assets/editor/stage-panel/sound.svg b/ui/prototype/src/assets/editor/stage-panel/sound.svg
new file mode 100644
index 0000000000..b646939f14
--- /dev/null
+++ b/ui/prototype/src/assets/editor/stage-panel/sound.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M19.5 2.12451C20.8115 2.12451 21.8748 3.18802 21.875 4.49951V19.4995C21.875 20.8112 20.8117 21.8745 19.5 21.8745H4.5C3.18851 21.8743 2.125 20.8111 2.125 19.4995V4.49951C2.12522 3.18815 3.18864 2.12473 4.5 2.12451H19.5ZM4.5 3.87451C4.15514 3.87473 3.87522 4.15465 3.875 4.49951V19.4995C3.875 19.8446 4.15501 20.1243 4.5 20.1245H19.5C19.8452 20.1245 20.125 19.8447 20.125 19.4995V4.49951C20.1248 4.15452 19.845 3.87451 19.5 3.87451H4.5ZM9.59277 6.12939C9.99277 6.17221 10.3126 6.48282 10.3672 6.88135L11.4062 14.5044L12.6836 11.1851L12.7344 11.0757C12.8705 10.8297 13.1191 10.6611 13.4033 10.6294C13.7282 10.5934 14.0471 10.7423 14.2285 11.0142L15.542 12.9839L16.2998 11.9741C16.465 11.754 16.7248 11.6246 17 11.6245H18.5C18.9831 11.6245 19.3748 12.0164 19.375 12.4995C19.375 12.9828 18.9832 13.3745 18.5 13.3745H17.4385L16.2002 15.0249C16.0298 15.252 15.7594 15.3824 15.4756 15.3745C15.1919 15.3665 14.9289 15.221 14.7715 14.9849L13.709 13.3911L11.8164 18.314C11.6729 18.6865 11.2951 18.9148 10.8984 18.8687C10.5021 18.8221 10.1867 18.5132 10.1328 18.1177L9.11133 10.6274L8.32227 12.7983C8.19652 13.1441 7.86794 13.3745 7.5 13.3745H6C5.51693 13.3743 5.125 12.9826 5.125 12.4995C5.12522 12.0166 5.51707 11.6247 6 11.6245H6.8877L8.67773 6.70068L8.74023 6.56592C8.91001 6.26823 9.24292 6.09227 9.59277 6.12939Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/ui/prototype/src/assets/editor/stage-panel/widget.svg b/ui/prototype/src/assets/editor/stage-panel/widget.svg
new file mode 100644
index 0000000000..54dd923e54
--- /dev/null
+++ b/ui/prototype/src/assets/editor/stage-panel/widget.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M17.7002 12.6255C20.3238 12.6256 22.375 14.851 22.375 17.5005C22.375 20.15 20.3238 22.3754 17.7002 22.3755H6.2998C3.67622 22.3754 1.625 20.15 1.625 17.5005C1.625 14.851 3.67622 12.6256 6.2998 12.6255H17.7002ZM6.2998 14.3755C4.7262 14.3756 3.375 15.7318 3.375 17.5005C3.375 19.2691 4.7262 20.6254 6.2998 20.6255H17.7002C19.2738 20.6254 20.625 19.2691 20.625 17.5005C20.625 15.7318 19.2738 14.3756 17.7002 14.3755H6.2998ZM6.5 15.1255C7.8117 15.1255 8.875 16.1888 8.875 17.5005C8.875 18.8122 7.8117 19.8755 6.5 19.8755C5.1883 19.8755 4.125 18.8122 4.125 17.5005C4.125 16.1888 5.1883 15.1255 6.5 15.1255ZM6.5 16.8755C6.1548 16.8755 5.875 17.1553 5.875 17.5005C5.875 17.8457 6.1548 18.1255 6.5 18.1255C6.8452 18.1255 7.125 17.8457 7.125 17.5005C7.125 17.1553 6.8452 16.8755 6.5 16.8755ZM17.7002 1.62549C20.3238 1.6256 22.375 3.851 22.375 6.50049C22.375 9.14999 20.3238 11.3754 17.7002 11.3755H6.2998C3.67622 11.3754 1.625 9.14999 1.625 6.50049C1.625 3.851 3.67622 1.6256 6.2998 1.62549H17.7002ZM6.2998 3.37549C4.7262 3.3756 3.375 4.73184 3.375 6.50049C3.375 8.26915 4.7262 9.62538 6.2998 9.62549H17.7002C19.2738 9.62538 20.625 8.26915 20.625 6.50049C20.625 4.73184 19.2738 3.3756 17.7002 3.37549H6.2998ZM17.5 4.12549C18.8117 4.12549 19.875 5.18879 19.875 6.50049C19.875 7.81219 18.8117 8.87549 17.5 8.87549C16.1883 8.87549 15.125 7.81219 15.125 6.50049C15.125 5.18879 16.1883 4.12549 17.5 4.12549ZM17.5 5.87549C17.1548 5.87549 16.875 6.15529 16.875 6.50049C16.875 6.84569 17.1548 7.12549 17.5 7.12549C17.8452 7.12549 18.125 6.84569 18.125 6.50049C18.125 6.15529 17.8452 5.87549 17.5 5.87549Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/ui/prototype/src/assets/editor/ui-icons/arrow-down.svg b/ui/prototype/src/assets/editor/ui-icons/arrow-down.svg
new file mode 100644
index 0000000000..4c6d5464e6
--- /dev/null
+++ b/ui/prototype/src/assets/editor/ui-icons/arrow-down.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M7.13182 10.2639L4.2119 6.80119C3.72124 6.21919 4.13719 5.33325 4.90119 5.33325H11.0985C11.8625 5.33325 12.2784 6.21985 11.7877 6.80119L8.86783 10.2639C8.41516 10.8006 7.58449 10.8006 7.13182 10.2639Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/ui-icons/close.svg b/ui/prototype/src/assets/editor/ui-icons/close.svg
new file mode 100644
index 0000000000..948df13580
--- /dev/null
+++ b/ui/prototype/src/assets/editor/ui-icons/close.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.1784 10L15.5892 5.58916C15.915 5.26416 15.915 4.73588 15.5892 4.41088C15.2634 4.08505 14.7367 4.08505 14.4109 4.41088L10 8.82169L5.58921 4.41088C5.26338 4.08505 4.73671 4.08505 4.41088 4.41088C4.08505 4.73588 4.08505 5.26416 4.41088 5.58916L8.82171 10L4.41088 14.4109C4.08505 14.7359 4.08505 15.2642 4.41088 15.5892C4.57338 15.7517 4.78671 15.8334 5.00005 15.8334C5.21338 15.8334 5.42671 15.7517 5.58921 15.5892L10 11.1784L14.4109 15.5892C14.5734 15.7517 14.7867 15.8334 15 15.8334C15.2134 15.8334 15.4267 15.7517 15.5892 15.5892C15.915 15.2642 15.915 14.7359 15.5892 14.4109L11.1784 10Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/ui-icons/edit.svg b/ui/prototype/src/assets/editor/ui-icons/edit.svg
new file mode 100644
index 0000000000..65f22b6743
--- /dev/null
+++ b/ui/prototype/src/assets/editor/ui-icons/edit.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.93831 7.00113L4.66667 12.25H1.75V9.33332L6.99886 4.06175C7.06711 3.99291 7.17797 3.99291 7.24681 4.06175L9.93888 6.75383C10.0071 6.82207 10.0071 6.93288 9.93831 7.00113ZM10.5629 6.1413C10.6312 6.20955 10.7421 6.20955 10.8103 6.1413L11.9058 5.04584C12.3631 4.5885 12.3631 3.84652 11.9058 3.38919L10.6108 2.09414C10.1535 1.6368 9.41156 1.6368 8.95422 2.09414L7.85862 3.18967C7.79037 3.25792 7.79037 3.36872 7.85862 3.43697L10.5629 6.1413ZM12.25 11.8125H8.16667C7.92517 11.8125 7.72917 12.0085 7.72917 12.25C7.72917 12.4915 7.92517 12.6875 8.16667 12.6875H12.25C12.4915 12.6875 12.6875 12.4915 12.6875 12.25C12.6875 12.0085 12.4915 11.8125 12.25 11.8125Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/ui-icons/eye-off.svg b/ui/prototype/src/assets/editor/ui-icons/eye-off.svg
new file mode 100644
index 0000000000..ba66fe0d89
--- /dev/null
+++ b/ui/prototype/src/assets/editor/ui-icons/eye-off.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1133 7.53809C20.3684 7.04844 20.9721 6.85833 21.4619 7.11328C21.9514 7.36845 22.1416 7.97222 21.8867 8.46191C21.4958 9.2128 20.9197 9.87987 20.2227 10.4512C20.1572 10.5049 20.0874 10.5542 20.0195 10.6064L22.2109 12.7979C22.6012 13.1884 22.6013 13.8214 22.2109 14.2119C21.8205 14.6024 21.1874 14.6022 20.7969 14.2119L18.2607 11.6758C17.4741 12.0514 16.6054 12.3553 15.6777 12.5762L16.4893 15.6045C16.6321 16.1378 16.3155 16.687 15.7822 16.8301C15.2489 16.9729 14.7006 16.6554 14.5576 16.1221L13.6973 12.9111C13.1429 12.9684 12.5758 13 12 13C11.4202 13 10.849 12.9682 10.291 12.9102L9.43066 16.123C9.28756 16.6561 8.73922 16.9727 8.20605 16.8301C7.67259 16.6871 7.35609 16.138 7.49902 15.6045L8.31055 12.5732C7.38809 12.3528 6.52399 12.0504 5.74121 11.6768L3.20703 14.2119C2.81658 14.6024 2.18351 14.6022 1.79297 14.2119C1.40261 13.8214 1.4025 13.1883 1.79297 12.7979L3.98145 10.6084C3.913 10.5558 3.84336 10.5053 3.77734 10.4512C3.08027 9.87988 2.50423 9.21275 2.11328 8.46191C1.85831 7.97211 2.04839 7.36837 2.53809 7.11328C3.02785 6.85847 3.63166 7.04846 3.88672 7.53809C4.13045 8.00621 4.51604 8.47083 5.04492 8.9043C6.54375 10.1326 9.06065 11 12 11C14.9394 10.9999 17.4564 10.1326 18.9551 8.9043C19.484 8.47078 19.8696 8.00621 20.1133 7.53809Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/ui-icons/loading.svg b/ui/prototype/src/assets/editor/ui-icons/loading.svg
new file mode 100644
index 0000000000..60a9f32efa
--- /dev/null
+++ b/ui/prototype/src/assets/editor/ui-icons/loading.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.99975 1.74999C4.74762 1.74999 2.82529 3.16836 2.08012 5.16252C1.96735 5.4643 1.63128 5.61753 1.3295 5.50476C1.02771 5.39199 0.874487 5.05592 0.987258 4.75414C1.89727 2.31885 4.2451 0.583328 6.99975 0.583328C10.5436 0.583328 13.4164 3.45617 13.4164 7C13.4164 10.5438 10.5436 13.4167 6.99975 13.4167C4.2451 13.4167 1.89727 11.6811 0.987258 9.24585C0.874487 8.94407 1.02771 8.608 1.3295 8.49523C1.63128 8.38246 1.96735 8.53569 2.08012 8.83747C2.82529 10.8316 4.74762 12.25 6.99975 12.25C9.89924 12.25 12.2497 9.89949 12.2497 7C12.2497 4.1005 9.89924 1.74999 6.99975 1.74999Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/ui-icons/more.svg b/ui/prototype/src/assets/editor/ui-icons/more.svg
new file mode 100644
index 0000000000..a6183f6672
--- /dev/null
+++ b/ui/prototype/src/assets/editor/ui-icons/more.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.02002 14C2.91602 14 2.01501 13.104 2.01501 12C2.01501 10.896 2.90501 10 4.01001 10H4.02002C5.12402 10 6.02002 10.896 6.02002 12C6.02002 13.104 5.12502 14 4.02002 14ZM14.02 12C14.02 10.896 13.124 10 12.02 10H12.01C10.906 10 10.015 10.896 10.015 12C10.015 13.104 10.915 14 12.02 14C13.125 14 14.02 13.104 14.02 12ZM22.02 12C22.02 10.896 21.124 10 20.02 10H20.01C18.906 10 18.015 10.896 18.015 12C18.015 13.104 18.915 14 20.02 14C21.125 14 22.02 13.104 22.02 12Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/ui-icons/plus.svg b/ui/prototype/src/assets/editor/ui-icons/plus.svg
new file mode 100644
index 0000000000..c333c2aacb
--- /dev/null
+++ b/ui/prototype/src/assets/editor/ui-icons/plus.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2.125C12.4832 2.125 12.875 2.51675 12.875 3V11.125H21C21.4832 11.125 21.875 11.5168 21.875 12C21.875 12.4832 21.4832 12.875 21 12.875H12.875V21C12.875 21.4832 12.4832 21.875 12 21.875C11.5168 21.875 11.125 21.4832 11.125 21V12.875H3C2.51675 12.875 2.125 12.4832 2.125 12C2.125 11.5168 2.51675 11.125 3 11.125H11.125V3C11.125 2.51675 11.5168 2.125 12 2.125Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/ui-icons/publish.svg b/ui/prototype/src/assets/editor/ui-icons/publish.svg
new file mode 100644
index 0000000000..d2a0f2f5fe
--- /dev/null
+++ b/ui/prototype/src/assets/editor/ui-icons/publish.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0458 1.81972C13.3342 1.49767 14.5016 2.66506 14.1796 3.95351L12.0194 12.5932C11.5261 14.5665 8.8121 14.7914 8.00086 12.9262L6.50672 9.4916L3.07312 7.99843C1.20853 7.18696 1.43319 4.47337 3.40613 3.97988L12.0458 1.81972ZM12.9218 3.63906C13.0064 3.30004 12.6993 2.99284 12.3602 3.07754L3.72059 5.23769C2.94869 5.43092 2.86106 6.49249 3.5907 6.80996L6.8534 8.2289L9.35047 5.73086C9.60342 5.47778 10.0133 5.47812 10.2665 5.73086C10.5196 5.98383 10.5203 6.39365 10.2675 6.64687L7.77039 9.14492L9.18934 12.4086C9.50672 13.1386 10.5685 13.0509 10.7616 12.2787L12.9218 3.63906Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/ui-icons/sound.svg b/ui/prototype/src/assets/editor/ui-icons/sound.svg
new file mode 100644
index 0000000000..28b3aa4d04
--- /dev/null
+++ b/ui/prototype/src/assets/editor/ui-icons/sound.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.66665 14.6666C6.47776 14.6666 6.31954 14.6026 6.19198 14.4746C6.06398 14.347 5.99998 14.1888 5.99998 13.9999V1.99992C5.99998 1.81103 6.06398 1.65259 6.19198 1.52459C6.31954 1.39703 6.47776 1.33325 6.66665 1.33325C6.85554 1.33325 7.01398 1.39703 7.14198 1.52459C7.26954 1.65259 7.33331 1.81103 7.33331 1.99992V13.9999C7.33331 14.1888 7.26954 14.347 7.14198 14.4746C7.01398 14.6026 6.85554 14.6666 6.66665 14.6666ZM3.99998 10.6666C3.81109 10.6666 3.65265 10.6026 3.52465 10.4746C3.39709 10.347 3.33331 10.1888 3.33331 9.99992V5.99992C3.33331 5.81103 3.39709 5.65259 3.52465 5.52458C3.65265 5.39703 3.81109 5.33325 3.99998 5.33325C4.18887 5.33325 4.34731 5.39703 4.47531 5.52458C4.60287 5.65259 4.66665 5.81103 4.66665 5.99992V9.99992C4.66665 10.1888 4.60287 10.347 4.47531 10.4746C4.34731 10.6026 4.18887 10.6666 3.99998 10.6666ZM9.33331 11.9999C9.14442 11.9999 8.9862 11.9359 8.85865 11.8079C8.73065 11.6804 8.66665 11.5221 8.66665 11.3333V4.66658C8.66665 4.4777 8.73065 4.31925 8.85865 4.19125C8.9862 4.0637 9.14442 3.99992 9.33331 3.99992C9.5222 3.99992 9.68065 4.0637 9.80865 4.19125C9.9362 4.31925 9.99998 4.4777 9.99998 4.66658V11.3333C9.99998 11.5221 9.9362 11.6804 9.80865 11.8079C9.68065 11.9359 9.5222 11.9999 9.33331 11.9999ZM12 9.99992C11.8111 9.99992 11.6529 9.93592 11.5253 9.80792C11.3973 9.68036 11.3333 9.52214 11.3333 9.33325V6.66658C11.3333 6.4777 11.3973 6.31925 11.5253 6.19125C11.6529 6.0637 11.8111 5.99992 12 5.99992C12.1889 5.99992 12.3471 6.0637 12.4746 6.19125C12.6026 6.31925 12.6666 6.4777 12.6666 6.66658V9.33325C12.6666 9.52214 12.6026 9.68036 12.4746 9.80792C12.3471 9.93592 12.1889 9.99992 12 9.99992Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/ui-icons/status.svg b/ui/prototype/src/assets/editor/ui-icons/status.svg
new file mode 100644
index 0000000000..334d5f9c58
--- /dev/null
+++ b/ui/prototype/src/assets/editor/ui-icons/status.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.9163 11.0909C14.9163 12.169 14.2358 13.0895 12.8962 13.8237C11.6319 14.515 10.0667 14.8803 8.24359 14.909H8.00361C6.07666 14.909 4.42908 14.5437 3.11102 13.8202C1.77146 13.0859 1.09094 12.1654 1.09094 11.0909C1.09094 10.7793 1.15541 10.4713 1.28435 10.174C1.40971 9.8803 1.59954 9.59377 1.8431 9.31798C2.09024 9.04218 2.3911 8.79147 2.7421 8.57656C3.09311 8.36166 3.49068 8.16467 3.92406 7.98916C4.11031 7.91395 4.29298 7.9247 4.46848 8.01782C4.64398 8.10736 4.76218 8.25063 4.82307 8.44404C4.88396 8.62313 4.86605 8.80579 4.77651 8.98129C4.68696 9.15322 4.55444 9.27858 4.37894 9.36095C4.08882 9.47557 3.83094 9.60093 3.60529 9.73345C3.38323 9.86956 3.18982 10.0164 3.03222 10.174C2.86388 10.3316 2.73852 10.4928 2.65614 10.6504C2.57735 10.8044 2.53795 10.9512 2.53795 11.0873C2.53795 11.6962 3.07878 12.2478 4.14613 12.7206C5.24213 13.2077 6.53512 13.4513 7.99287 13.4513H8.00003C9.46136 13.4513 10.7579 13.2041 11.8539 12.7206C12.9213 12.2478 13.4621 11.6962 13.4621 11.0873C13.4621 10.9512 13.4227 10.8044 13.3439 10.6504C13.2615 10.4928 13.1362 10.3316 12.9714 10.1776C12.8103 10.0164 12.6168 9.86956 12.3948 9.73703C12.1727 9.60451 11.9148 9.47915 11.6283 9.36454C11.4456 9.27857 11.3131 9.14963 11.2236 8.98129C11.134 8.80579 11.1197 8.62313 11.177 8.44404C11.2379 8.25063 11.3561 8.10736 11.5316 8.01782C11.7107 7.9247 11.8933 7.91753 12.076 7.98916C12.4592 8.14318 12.8174 8.32226 13.1362 8.51567C13.455 8.70909 13.7415 8.92399 13.9815 9.1568C14.2895 9.44333 14.5223 9.75494 14.6763 10.0773C14.8303 10.4032 14.9091 10.7435 14.9091 11.0909H14.9163ZM3.67693 5.63241H6.04443V11.7105C6.04443 11.9147 6.11606 12.0902 6.25217 12.2263C6.39185 12.366 6.56377 12.434 6.76793 12.434C6.97209 12.434 7.14759 12.3624 7.28369 12.2263C7.42338 12.0866 7.49143 11.9147 7.49143 11.7105V9.34305H8.51222V11.7105C8.51222 11.9147 8.58385 12.0902 8.71995 12.2263C8.85964 12.366 9.03156 12.434 9.23572 12.434C9.43987 12.434 9.61538 12.3624 9.75148 12.2263C9.89117 12.0866 9.95922 11.9147 9.95922 11.7105V5.63241H12.3267C12.5309 5.63241 12.7064 5.56078 12.8425 5.42467C12.9822 5.28499 13.0502 5.11306 13.0502 4.90891C13.0502 4.70475 12.9786 4.52925 12.8425 4.39314C12.7028 4.25346 12.5309 4.18541 12.3267 4.18541H3.67693C3.47277 4.18541 3.29727 4.25704 3.16116 4.39314C3.02148 4.53283 2.95342 4.70475 2.95342 4.90891C2.95342 5.11306 3.02506 5.28857 3.16116 5.42467C3.30085 5.56436 3.47277 5.63241 3.67693 5.63241ZM8.0072 3.77709C8.37611 3.77709 8.69488 3.64457 8.95635 3.38311C9.21781 3.12164 9.35033 2.80287 9.35033 2.43396C9.35033 2.06504 9.21781 1.74627 8.95635 1.48481C8.69488 1.22334 8.37611 1.09082 8.0072 1.09082C7.63828 1.09082 7.31951 1.22334 7.05805 1.48481C6.79658 1.74627 6.66406 2.06504 6.66406 2.43396C6.66406 2.80287 6.79658 3.12164 7.05805 3.38311C7.31951 3.64457 7.63828 3.77709 8.0072 3.77709Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/ui-icons/timer.svg b/ui/prototype/src/assets/editor/ui-icons/timer.svg
new file mode 100644
index 0000000000..3a538e6f06
--- /dev/null
+++ b/ui/prototype/src/assets/editor/ui-icons/timer.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.49996 2C5.49996 1.724 5.72396 1.5 5.99996 1.5H9.33329C9.60929 1.5 9.83329 1.724 9.83329 2C9.83329 2.276 9.60929 2.5 9.33329 2.5H5.99996C5.72396 2.5 5.49996 2.276 5.49996 2ZM12.6666 9C12.6666 11.7613 10.428 14 7.66663 14C4.90529 14 2.66663 11.7613 2.66663 9C2.66663 6.23867 4.90529 4 7.66663 4C8.78196 4 9.80793 4.36932 10.6399 4.98665L11.6466 3.97998C11.8399 3.78665 12.16 3.78665 12.3533 3.97998C12.5466 4.17331 12.5466 4.49335 12.3533 4.68669L11.38 5.65999C12.1773 6.54599 12.6666 7.71467 12.6666 9ZM9.29993 9.60002L8.16663 8.75V6.66667C8.16663 6.39067 7.94263 6.16667 7.66663 6.16667C7.39063 6.16667 7.16663 6.39067 7.16663 6.66667V9C7.16663 9.15733 7.24066 9.30532 7.36666 9.39998L8.69999 10.4C8.78999 10.4673 8.89531 10.5 8.99931 10.5C9.15198 10.5 9.30202 10.4306 9.40002 10.3C9.56602 10.0793 9.52059 9.76535 9.29993 9.60002Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/editor/widget/monitor.svg b/ui/prototype/src/assets/editor/widget/monitor.svg
new file mode 100644
index 0000000000..69706b2fb0
--- /dev/null
+++ b/ui/prototype/src/assets/editor/widget/monitor.svg
@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M27.8989 5.90625C30.8811 5.90625 33.2995 8.3236 33.2998 11.3057V23.9062C33.2998 26.8886 30.8813 29.3057 27.8989 29.3057H8.09863C5.11656 29.3054 2.69922 26.8884 2.69922 23.9062V11.3057C2.69953 8.32379 5.11676 5.90657 8.09863 5.90625H27.8989ZM19.7617 8.60596L15.2998 26.606H26.9995C28.9873 26.6057 30.5983 24.9946 30.5986 23.0068V12.2065C30.5986 10.2185 28.9875 8.60619 26.9995 8.60596H19.7617Z" fill="currentColor" />
+</svg>
diff --git a/ui/prototype/src/assets/empty/game.svg b/ui/prototype/src/assets/empty/game.svg
new file mode 100644
index 0000000000..b9744a83d6
--- /dev/null
+++ b/ui/prototype/src/assets/empty/game.svg
@@ -0,0 +1,48 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="74" height="80" viewBox="0 0 74 80" fill="none">
+  <path d="M5.75 1.25H68.25C68.25 1.25 73.25 1.25 73.25 6.25V56.25C73.25 56.25 73.25 61.25 68.25 61.25H5.75C5.75 61.25 0.75 61.25 0.75 56.25V6.25C0.75 6.25 0.75 1.25 5.75 1.25Z" fill="#ECF8FF" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M14.5 53.75L26.1161 42.1339C26.3963 41.8537 26.729 41.6314 27.0951 41.4797C27.4613 41.3281 27.8537 41.25 28.25 41.25C28.6463 41.25 29.0387 41.3281 29.4049 41.4797C29.771 41.6314 30.1037 41.8537 30.3839 42.1339L42 53.75H14.5Z" fill="#6FDAFB" stroke="#6FDAFB" stroke-width="1.2" stroke-miterlimit="10"/>
+  <path d="M0.75 56.25L0.75 53.75L73.25 53.75V56.25C73.25 57.5761 72.7232 58.8479 71.7855 59.7855C70.8479 60.7232 69.5761 61.25 68.25 61.25L5.75 61.25C4.42392 61.25 3.15215 60.7232 2.21447 59.7855C1.27679 58.8479 0.75 57.5761 0.75 56.25Z" fill="#F87D30" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M6.35852 47.4669C6.21869 47.4669 6.07901 47.4763 5.94042 47.495C5.86888 46.4448 5.40159 45.461 4.63288 44.742C3.86417 44.023 2.85131 43.6224 1.79875 43.6211C1.44424 43.625 1.09173 43.6749 0.75 43.7693V53.7498H6.35852C7.19061 53.7482 7.98805 53.4165 8.57584 52.8275C9.16363 52.2386 9.49375 51.4405 9.49375 50.6084C9.49375 49.7763 9.16363 48.9782 8.57584 48.3892C7.98805 47.8003 7.19061 47.4685 6.35852 47.4669Z" fill="#82CBAA" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M48.25 43.75H63.25V53.75H48.25V43.75Z" fill="#199A4A" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M48.25 37.5H63.25C63.25 37.5 64.5 37.5 64.5 38.75V42.5C64.5 42.5 64.5 43.75 63.25 43.75H48.25C48.25 43.75 47 43.75 47 42.5V38.75C47 38.75 47 37.5 48.25 37.5Z" fill="#1E4BDE" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M48.25 37.5H63.25C63.25 37.5 64.5 37.5 64.5 38.75V42.5C64.5 42.5 64.5 43.75 63.25 43.75H48.25C48.25 43.75 47 43.75 47 42.5V38.75C47 38.75 47 37.5 48.25 37.5Z" fill="#199A4A" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M15.2287 16.2842C16.3266 16.2855 17.395 16.6399 18.2761 17.295C19.1572 17.9502 19.8042 18.8713 20.1217 19.9223C20.7386 19.7602 21.383 19.7314 22.012 19.8379C22.6409 19.9445 23.2399 20.1838 23.769 20.5401C24.2982 20.8964 24.7452 21.3614 25.0805 21.9041C25.4157 22.4468 25.6314 23.0547 25.7132 23.6874C25.7949 24.32 25.7409 24.9628 25.5546 25.5729C25.3684 26.183 25.0542 26.7464 24.633 27.2255C24.2119 27.7046 23.6934 28.0884 23.1123 28.3513C22.5311 28.6142 21.9005 28.7503 21.2626 28.7503H9.61666C9.08704 28.7505 8.56303 28.6419 8.07711 28.4313C7.59119 28.2206 7.15373 27.9124 6.79186 27.5257C6.42999 27.139 6.15142 26.682 5.97343 26.1832C5.79544 25.6844 5.72182 25.1544 5.75715 24.6259C5.79247 24.0975 5.93598 23.582 6.17878 23.1113C6.42158 22.6406 6.75849 22.2248 7.16861 21.8897C7.57873 21.5546 8.05333 21.3073 8.56296 21.1632C9.07259 21.0191 9.6064 20.9813 10.1313 21.052C10.2193 19.7595 10.7944 18.5486 11.7405 17.6637C12.6866 16.7787 13.9332 16.2857 15.2287 16.2842Z" fill="white" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.75 26.25H34.5C34.5 26.25 35.75 26.25 35.75 27.5V32.5C35.75 32.5 35.75 33.75 34.5 33.75H10.75C10.75 33.75 9.5 33.75 9.5 32.5V27.5C9.5 27.5 9.5 26.25 10.75 26.25Z" fill="#C8D4FA" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M14.5 26.25H19.5C19.5 26.25 20.75 26.25 20.75 27.5V32.5C20.75 32.5 20.75 33.75 19.5 33.75H14.5C14.5 33.75 13.25 33.75 13.25 32.5V27.5C13.25 27.5 13.25 26.25 14.5 26.25Z" fill="#DBAE5D" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M29.5 26.25H34.5C34.5 26.25 35.75 26.25 35.75 27.5V32.5C35.75 32.5 35.75 33.75 34.5 33.75H29.5C29.5 33.75 28.25 33.75 28.25 32.5V27.5C28.25 27.5 28.25 26.25 29.5 26.25Z" fill="#DBAE5D" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M22 26.25H27C27 26.25 28.25 26.25 28.25 27.5V32.5C28.25 32.5 28.25 33.75 27 33.75H22C22 33.75 20.75 33.75 20.75 32.5V27.5C20.75 27.5 20.75 26.25 22 26.25Z" fill="#9B6C33" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.75 26.25H12C12 26.25 13.25 26.25 13.25 27.5V32.5C13.25 32.5 13.25 33.75 12 33.75H10.75C10.75 33.75 9.5 33.75 9.5 32.5V27.5C9.5 27.5 9.5 26.25 10.75 26.25Z" fill="#9B6C33" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M72.1334 45.1133C71.3477 45.1143 70.5883 45.3966 69.9927 45.909C69.3971 46.4215 69.0046 47.1303 68.8863 47.907L68.8269 47.9064C68.0521 47.9064 67.3089 48.2142 66.761 48.7622C66.2131 49.3101 65.9053 50.0532 65.9053 50.8281C65.9053 51.603 66.2131 52.3461 66.761 52.894C67.3089 53.4419 68.0521 53.7498 68.8269 53.7498H73.2497V45.3151C72.8922 45.1832 72.5145 45.1149 72.1334 45.1133Z" fill="#82CBAA" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M61.6742 25.0166C62.3604 25.0174 63.0282 25.2389 63.5789 25.6484C64.1295 26.0578 64.5339 26.6335 64.7323 27.2904C65.1179 27.1891 65.5207 27.1711 65.9137 27.2377C66.3068 27.3043 66.6812 27.454 67.0119 27.6766C67.3425 27.8993 67.6219 28.1899 67.8315 28.5291C68.041 28.8683 68.1758 29.2482 68.2269 29.6436C68.278 30.039 68.2442 30.4407 68.1278 30.822C68.0114 31.2033 67.815 31.5554 67.5518 31.8549C67.2886 32.1543 66.9646 32.3942 66.6014 32.5585C66.2382 32.7229 65.8441 32.8079 65.4454 32.8079H58.1667C57.8357 32.8081 57.5081 32.7402 57.2044 32.6086C56.9007 32.4769 56.6273 32.2843 56.4011 32.0426C56.1749 31.8009 56.0008 31.5153 55.8896 31.2035C55.7783 30.8918 55.7323 30.5605 55.7544 30.2302C55.7765 29.8999 55.8662 29.5777 56.0179 29.2835C56.1697 28.9893 56.3803 28.7295 56.6366 28.52C56.8929 28.3106 57.1896 28.1561 57.5081 28.066C57.8266 27.9759 58.1603 27.9523 58.4883 27.9965C58.5433 27.1887 58.9027 26.4319 59.4941 25.8788C60.0854 25.3257 60.8645 25.0176 61.6742 25.0166Z" fill="white" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8.875 6.62452C8.997 6.5008 9.14326 6.40363 9.30458 6.3391C9.46591 6.27457 9.63883 6.24407 9.8125 6.24952C9.92892 6.24078 10.0459 6.25549 10.1566 6.29276C10.2672 6.33004 10.3692 6.38912 10.4567 6.46652C10.5441 6.54393 10.6151 6.63807 10.6654 6.74339C10.7158 6.84871 10.7446 6.96307 10.75 7.07969C10.75 7.6029 10.2159 8.20173 8.875 8.74952C7.53414 8.20173 7 7.6029 7 7.07969C7.00542 6.96307 7.03417 6.84871 7.08456 6.74339C7.13494 6.63807 7.20594 6.54393 7.29335 6.46652C7.38075 6.38912 7.4828 6.33004 7.59344 6.29276C7.70408 6.25549 7.82108 6.24078 7.9375 6.24952C8.11117 6.24407 8.28409 6.27457 8.44542 6.3391C8.60674 6.40363 8.753 6.5008 8.875 6.62452Z" fill="#E62234" stroke="#E62234" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M21.375 6.62452C21.497 6.5008 21.6433 6.40363 21.8046 6.3391C21.9659 6.27457 22.1388 6.24407 22.3125 6.24952C22.4289 6.24078 22.5459 6.25549 22.6566 6.29276C22.7672 6.33004 22.8692 6.38912 22.9567 6.46652C23.0441 6.54393 23.1151 6.63807 23.1654 6.74339C23.2158 6.84871 23.2446 6.96307 23.25 7.07969C23.25 7.6029 22.7159 8.20173 21.375 8.74952C20.0341 8.20173 19.5 7.6029 19.5 7.07969C19.5054 6.96307 19.5342 6.84871 19.5846 6.74339C19.6349 6.63807 19.7059 6.54393 19.7933 6.46652C19.8808 6.38912 19.9828 6.33004 20.0934 6.29276C20.2041 6.25549 20.3211 6.24078 20.4375 6.24952C20.6112 6.24407 20.7841 6.27457 20.9454 6.3391C21.1067 6.40363 21.253 6.5008 21.375 6.62452Z" fill="#E62234" stroke="#E62234" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M15.125 6.62452C15.247 6.5008 15.3933 6.40363 15.5546 6.3391C15.7159 6.27457 15.8888 6.24407 16.0625 6.24952C16.1789 6.24078 16.2959 6.25549 16.4066 6.29276C16.5172 6.33004 16.6192 6.38912 16.7067 6.46652C16.7941 6.54393 16.8651 6.63807 16.9154 6.74339C16.9658 6.84871 16.9946 6.96307 17 7.07969C17 7.6029 16.4659 8.20173 15.125 8.74952C13.7841 8.20173 13.25 7.6029 13.25 7.07969C13.2554 6.96307 13.2842 6.84871 13.3346 6.74339C13.3849 6.63807 13.4559 6.54393 13.5433 6.46652C13.6308 6.38912 13.7328 6.33004 13.8434 6.29276C13.9541 6.25549 14.0711 6.24078 14.1875 6.24952C14.3612 6.24407 14.5341 6.27457 14.6954 6.3391C14.8567 6.40363 15.003 6.5008 15.125 6.62452Z" fill="#E62234" stroke="#E62234" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M60.75 6.25H68.25" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M68.25 8.75H63.25" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M57 16.25H58.25C58.5815 16.25 58.8995 16.3817 59.1339 16.6161C59.3683 16.8505 59.5 17.1685 59.5 17.5V20H55.75V17.5C55.75 17.1685 55.8817 16.8505 56.1161 16.6161C56.3505 16.3817 56.6685 16.25 57 16.25Z" fill="#FBE8C2" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M55.75 25V20H59.5V21.25C59.5 22.2446 59.1049 23.1984 58.4016 23.9017C57.6984 24.6049 56.7446 25 55.75 25Z" fill="#F6C944" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M45.75 21.25H55.75V25H45.75V21.25Z" fill="#F6C944" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M60.75 28.75H59.5V25L60.75 23.75V28.75Z" fill="#1E4BDE" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M44.5 28.75H45.75V32.5L44.5 33.75V28.75Z" fill="#1E4BDE" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M53.25 25H59.5V28.75H53.25V25Z" fill="#E62234" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M53.25 25H45.75V32.5H49.5C50.4946 32.5 51.4484 32.1049 52.1516 31.4017C52.8549 30.6984 53.25 29.7446 53.25 28.75V25Z" fill="#E62234" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M55.75 21.25H45.75V12.5C45.75 11.837 46.0134 11.2011 46.4822 10.7322C46.9511 10.2634 47.587 10 48.25 10H53.25C53.913 10 54.5489 10.2634 55.0178 10.7322C55.4866 11.2011 55.75 11.837 55.75 12.5V15L57 16.875L55.75 18.125V21.25Z" fill="#FBE8C2" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M50.2812 17.6562C50.2812 17.8635 50.3636 18.0622 50.5101 18.2087C50.6566 18.3552 50.8553 18.4375 51.0625 18.4375C51.2697 18.4375 51.4684 18.3552 51.6149 18.2087C51.7614 18.0622 51.8438 17.8635 51.8438 17.6562C51.8438 17.449 51.7614 17.2503 51.6149 17.1038C51.4684 16.9573 51.2697 16.875 51.0625 16.875C50.8553 16.875 50.6566 16.9573 50.5101 17.1038C50.3636 17.2503 50.2812 17.449 50.2812 17.6562Z" fill="#F89C70"/>
+  <path d="M45.75 13.75H58.25" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M52.9375 15.9375V16.5625V15.9375Z" fill="white"/>
+  <path d="M52.9375 15.9375V16.5625" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M52 19.375C52.8004 18.5746 53.8859 18.125 55.0178 18.125H55.75" fill="white"/>
+  <path d="M52 19.375C52.8004 18.5746 53.8859 18.125 55.0178 18.125H55.75" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M45.75 25V21.25C44.7554 21.25 43.8016 21.6451 43.0984 22.3483C42.3951 23.0516 42 24.0054 42 25C42 25.9946 42.3951 26.9484 43.0984 27.6517C43.8016 28.3549 44.7554 28.75 45.75 28.75V25Z" fill="#F6C944" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M45.75 25H48.25C48.5815 25 48.8995 25.1317 49.1339 25.3661C49.3683 25.6005 49.5 25.9185 49.5 26.25V27.5C49.5 27.8315 49.3683 28.1495 49.1339 28.3839C48.8995 28.6183 48.5815 28.75 48.25 28.75H45.75V25Z" fill="#FBE8C2" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M45.75 13.75H49.5V16.25C49.5 16.913 49.2366 17.5489 48.7678 18.0178C48.2989 18.4866 47.663 18.75 47 18.75H45.75V13.75Z" fill="#24292F" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M48.25 10H53.25C53.913 10 54.5489 10.2634 55.0178 10.7322C55.4866 11.2011 55.75 11.837 55.75 12.5V13.75H45.75V12.5C45.75 11.837 46.0134 11.2011 46.4822 10.7322C46.9511 10.2634 47.587 10 48.25 10Z" fill="#E62234" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M55.7498 51.25H23.2498C20.8055 51.2481 18.405 51.8978 16.2953 53.1322C14.1857 54.3666 12.4432 56.141 11.2473 58.2727C10.0515 60.4044 9.44547 62.8164 9.49172 65.2602C9.53797 67.704 10.2348 70.0913 11.5105 72.1762C12.7861 74.2612 14.5945 75.9684 16.7494 77.122C18.9042 78.2757 21.3276 78.8341 23.77 78.7398C26.2124 78.6454 28.5856 77.9017 30.645 76.5852C32.7044 75.2688 34.3757 73.4271 35.4867 71.25H43.5128C44.6243 73.4255 46.2955 75.2655 48.3543 76.5805C50.4131 77.8956 52.7852 78.6382 55.2264 78.7319C57.6676 78.8256 60.0896 78.2671 62.2432 77.1138C64.3968 75.9604 66.2041 74.254 67.4791 72.1702C68.7542 70.0863 69.4508 67.7003 69.4973 65.2577C69.5438 62.8152 68.9385 60.4044 67.7438 58.2735C66.5491 56.1426 64.808 54.3686 62.6999 53.1341C60.5918 51.8997 58.1927 51.2493 55.7498 51.25Z" fill="#E4E4E4" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M53.875 58.75C53.875 59.413 54.1384 60.0489 54.6072 60.5178C55.0761 60.9866 55.712 61.25 56.375 61.25C57.038 61.25 57.6739 60.9866 58.1428 60.5178C58.6116 60.0489 58.875 59.413 58.875 58.75C58.875 58.087 58.6116 57.4511 58.1428 56.9822C57.6739 56.5134 57.038 56.25 56.375 56.25C55.712 56.25 55.0761 56.5134 54.6072 56.9822C54.1384 57.4511 53.875 58.087 53.875 58.75Z" fill="#F6C944" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M53.875 71.25C53.875 71.913 54.1384 72.5489 54.6072 73.0178C55.0761 73.4866 55.712 73.75 56.375 73.75C57.038 73.75 57.6739 73.4866 58.1428 73.0178C58.6116 72.5489 58.875 71.913 58.875 71.25C58.875 70.587 58.6116 69.9511 58.1428 69.4822C57.6739 69.0134 57.038 68.75 56.375 68.75C55.712 68.75 55.0761 69.0134 54.6072 69.4822C54.1384 69.9511 53.875 70.587 53.875 71.25Z" fill="#82CBAA" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M60.125 65C60.125 65.663 60.3884 66.2989 60.8572 66.7678C61.3261 67.2366 61.962 67.5 62.625 67.5C63.288 67.5 63.9239 67.2366 64.3928 66.7678C64.8616 66.2989 65.125 65.663 65.125 65C65.125 64.337 64.8616 63.7011 64.3928 63.2322C63.9239 62.7634 63.288 62.5 62.625 62.5C61.962 62.5 61.3261 62.7634 60.8572 63.2322C60.3884 63.7011 60.125 64.337 60.125 65Z" fill="#E62234" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M47.625 65C47.625 65.663 47.8884 66.2989 48.3572 66.7678C48.8261 67.2366 49.462 67.5 50.125 67.5C50.788 67.5 51.4239 67.2366 51.8928 66.7678C52.3616 66.2989 52.625 65.663 52.625 65C52.625 64.337 52.3616 63.7011 51.8928 63.2322C51.4239 62.7634 50.788 62.5 50.125 62.5C49.462 62.5 48.8261 62.7634 48.3572 63.2322C47.8884 63.7011 47.625 64.337 47.625 65Z" fill="#6FDAFB" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M30.125 62.5H26.375V58.75C26.375 58.4185 26.2433 58.1005 26.0089 57.8661C25.7745 57.6317 25.4565 57.5 25.125 57.5H22.625C22.2935 57.5 21.9755 57.6317 21.7411 57.8661C21.5067 58.1005 21.375 58.4185 21.375 58.75V62.5H17.625C17.2935 62.5 16.9755 62.6317 16.7411 62.8661C16.5067 63.1005 16.375 63.4185 16.375 63.75V66.25C16.375 66.5815 16.5067 66.8995 16.7411 67.1339C16.9755 67.3683 17.2935 67.5 17.625 67.5H21.375V71.25C21.375 71.5815 21.5067 71.8995 21.7411 72.1339C21.9755 72.3683 22.2935 72.5 22.625 72.5H25.125C25.4565 72.5 25.7745 72.3683 26.0089 72.1339C26.2433 71.8995 26.375 71.5815 26.375 71.25V67.5H30.125C30.4565 67.5 30.7745 67.3683 31.0089 67.1339C31.2433 66.8995 31.375 66.5815 31.375 66.25V63.75C31.375 63.4185 31.2433 63.1005 31.0089 62.8661C30.7745 62.6317 30.4565 62.5 30.125 62.5Z" fill="#808080" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M43.25 58.75H41.375" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M37.625 58.75H35.75" stroke="#24292F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/ui/prototype/src/assets/navbar-icons/arrow-mini.svg b/ui/prototype/src/assets/navbar-icons/arrow-mini.svg
new file mode 100644
index 0000000000..e8422cc724
--- /dev/null
+++ b/ui/prototype/src/assets/navbar-icons/arrow-mini.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.66107 2.46085C5.91485 2.20707 6.32714 2.20721 6.581 2.46085C6.83477 2.71469 6.83481 3.12695 6.581 3.38077L4.53021 5.43155C4.23741 5.72399 3.76248 5.72398 3.46967 5.43155L1.41889 3.38077C1.16505 3.12693 1.16507 2.71469 1.41889 2.46085C1.67273 2.20709 2.085 2.20703 2.33881 2.46085L3.99994 4.12198L5.66107 2.46085Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/assets/navbar-icons/folder.svg b/ui/prototype/src/assets/navbar-icons/folder.svg
new file mode 100644
index 0000000000..09c8921c6f
--- /dev/null
+++ b/ui/prototype/src/assets/navbar-icons/folder.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M6.6084 1.77051C7.00493 1.77063 7.39605 1.8695 7.74512 2.05762C8.09163 2.24443 8.38686 2.51387 8.60449 2.8418L9.2793 3.8418L9.28418 3.84961C9.37032 3.98023 9.4879 4.08753 9.62598 4.16113C9.76424 4.23474 9.91955 4.27199 10.0762 4.27051H16.667C17.3023 4.27059 17.9121 4.52343 18.3613 4.97266C18.8104 5.42193 19.0625 6.03173 19.0625 6.66699V15C19.0625 15.6353 18.8105 16.245 18.3613 16.6943C17.9121 17.1436 17.3023 17.3954 16.667 17.3955H3.33301C2.69771 17.3954 2.0879 17.1436 1.63867 16.6943C1.18947 16.245 0.9375 15.6353 0.9375 15V4.16699C0.9375 3.53173 1.18957 2.92193 1.63867 2.47266C2.0879 2.02343 2.69771 1.77059 3.33301 1.77051H6.6084ZM3.33301 3.22949C3.08456 3.22958 2.84565 3.32729 2.66992 3.50293C2.49411 3.67875 2.39551 3.91835 2.39551 4.16699V15C2.39551 15.2486 2.49421 15.4873 2.66992 15.6631C2.84566 15.8388 3.08448 15.9374 3.33301 15.9375H16.667C16.9155 15.9374 17.1543 15.8388 17.3301 15.6631C17.5058 15.4873 17.6045 15.2486 17.6045 15V6.66699C17.6045 6.41835 17.5059 6.17875 17.3301 6.00293C17.1544 5.82729 16.9154 5.72958 16.667 5.72949H10.083C9.68507 5.73215 9.29276 5.63524 8.94141 5.44824C8.59002 5.26111 8.29029 4.98894 8.07031 4.65723L7.39551 3.6582L7.39062 3.65039C7.30537 3.52117 7.18899 3.4153 7.05273 3.3418C6.91626 3.2683 6.7634 3.22957 6.6084 3.22949H3.33301ZM10 7.60449C10.4026 7.60449 10.7293 7.93045 10.7295 8.33301V10.1045H12.5C12.9026 10.1045 13.2293 10.4304 13.2295 10.833C13.2295 11.2357 12.9027 11.5625 12.5 11.5625H10.7295V13.333C10.7295 13.7357 10.4027 14.0625 10 14.0625C9.59729 14.0625 9.27051 13.7357 9.27051 13.333V11.5625H7.5C7.09729 11.5625 6.77051 11.2357 6.77051 10.833C6.77068 10.4304 7.0974 10.1045 7.5 10.1045H9.27051V8.33301C9.27068 7.93045 9.5974 7.60449 10 7.60449Z"
+    fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/ui/prototype/src/assets/navbar-logo.svg b/ui/prototype/src/assets/navbar-logo.svg
new file mode 100644
index 0000000000..7c7f76a7f3
--- /dev/null
+++ b/ui/prototype/src/assets/navbar-logo.svg
@@ -0,0 +1,54 @@
+<svg width="102" height="30" viewBox="0 0 102 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M96.2342 13.9078V23.4001C96.2342 23.9524 95.7865 24.4001 95.2342 24.4001H93.6624C93.1101 24.4001 92.6624 23.9524 92.6624 23.4001V11.9808C92.6624 11.4285 93.1101 10.9808 93.6624 10.9808H95.0928C95.6172 10.9808 96.0526 11.3859 96.0902 11.909L96.2342 13.9078ZM100.005 10.8193C100.171 10.8523 100.275 11.0073 100.272 11.1767L100.224 13.7529C100.219 13.9933 100.005 14.1764 99.7655 14.1569C99.707 14.1521 99.6462 14.1476 99.5829 14.1434C99.3431 14.1186 99.124 14.1062 98.9255 14.1062C98.4212 14.1062 97.983 14.1723 97.6109 14.3046C97.2471 14.4287 96.9412 14.6147 96.6931 14.8627C96.4533 15.1108 96.2714 15.4126 96.1474 15.7681C96.0317 16.1236 95.9655 16.5288 95.949 16.9835L95.2296 16.7603C95.2296 15.8921 95.3165 15.0942 95.4901 14.3666C95.6637 13.6308 95.9159 12.99 96.2466 12.4443C96.5856 11.8986 96.999 11.4769 97.4869 11.1792C97.9747 10.8816 98.5328 10.7328 99.1612 10.7328C99.3596 10.7328 99.5622 10.7493 99.7689 10.7824C99.8539 10.7926 99.9326 10.8049 100.005 10.8193Z"
+    fill="#24292f"
+  />
+  <path
+    d="M85.6297 24.6482C84.5879 24.6482 83.6536 24.4828 82.8268 24.1521C82 23.8131 81.2972 23.3459 80.7184 22.7506C80.1479 22.1553 79.7097 21.4649 79.4038 20.6794C79.0978 19.8857 78.9449 19.0423 78.9449 18.1494V17.6533C78.9449 16.6363 79.0896 15.7061 79.3789 14.8627C79.6683 14.0194 80.0817 13.2876 80.6192 12.6675C81.1649 12.0474 81.8263 11.572 82.6036 11.2413C83.3808 10.9023 84.2572 10.7328 85.2329 10.7328C86.1837 10.7328 87.0271 10.8899 87.7629 11.204C88.4988 11.5182 89.1148 11.9647 89.6109 12.5435C90.1152 13.1223 90.4956 13.8168 90.7519 14.6271C91.0082 15.4291 91.1364 16.3221 91.1364 17.306V18.7943H80.4704V16.413H87.6265V16.1402C87.6265 15.6441 87.5356 15.2017 87.3537 14.8131C87.18 14.4163 86.9154 14.1021 86.5599 13.8706C86.2044 13.639 85.7496 13.5233 85.1956 13.5233C84.7244 13.5233 84.3192 13.6266 83.9802 13.8333C83.6412 14.04 83.3642 14.3294 83.1493 14.7015C82.9426 15.0736 82.7855 15.5118 82.678 16.0162C82.5787 16.5122 82.5291 17.058 82.5291 17.6533V18.1494C82.5291 18.6868 82.6036 19.1829 82.7524 19.6376C82.9095 20.0924 83.1286 20.4851 83.4097 20.8159C83.6991 21.1466 84.0464 21.4029 84.4515 21.5848C84.8649 21.7667 85.3321 21.8577 85.853 21.8577C86.4979 21.8577 87.0973 21.7336 87.6513 21.4856C88.0767 21.2916 88.4572 21.0243 88.7927 20.6836C88.9653 20.5083 89.2532 20.4959 89.4199 20.6769L90.6216 21.9816C90.7485 22.1194 90.7642 22.328 90.6457 22.4731C90.3897 22.7867 90.0696 23.09 89.6853 23.3831C89.2057 23.7552 88.627 24.0611 87.949 24.3009C87.271 24.5324 86.4979 24.6482 85.6297 24.6482Z"
+    fill="#24292f"
+  />
+  <path
+    d="M73.5741 21.4732V6.35014C73.5741 5.79786 74.0219 5.35014 74.5741 5.35014H76.1708C76.7231 5.35014 77.1708 5.79786 77.1708 6.35014V23.4001C77.1708 23.9524 76.7231 24.4001 76.1708 24.4001H74.8185C74.3133 24.4001 73.8875 24.0235 73.8259 23.5221L73.5741 21.4732ZM65.0909 17.8517V17.5913C65.0909 16.566 65.2067 15.6358 65.4382 14.8007C65.6697 13.9574 66.0087 13.2339 66.4552 12.6303C66.9017 12.0267 67.4515 11.5596 68.1047 11.2289C68.7579 10.8981 69.502 10.7328 70.3371 10.7328C71.1226 10.7328 71.8089 10.8981 72.3959 11.2289C72.9912 11.5596 73.4956 12.0309 73.909 12.6427C74.3307 13.2463 74.6697 13.9615 74.926 14.7883C75.1823 15.6069 75.3684 16.504 75.4841 17.4796V18.0501C75.3684 18.9845 75.1823 19.8526 74.926 20.6546C74.6697 21.4567 74.3307 22.1595 73.909 22.763C73.4956 23.3583 72.9912 23.8214 72.3959 24.1521C71.8006 24.4828 71.1061 24.6482 70.3123 24.6482C69.4772 24.6482 68.7331 24.4787 68.0799 24.1397C67.435 23.8007 66.8893 23.3253 66.4428 22.7134C66.0046 22.1016 65.6697 21.3822 65.4382 20.5554C65.2067 19.7286 65.0909 18.8274 65.0909 17.8517ZM68.6628 17.5913V17.8517C68.6628 18.4057 68.7042 18.9224 68.7868 19.402C68.8778 19.8816 69.0225 20.3074 69.2209 20.6794C69.4276 21.0432 69.6922 21.3285 70.0147 21.5352C70.3454 21.7336 70.7464 21.8329 71.2177 21.8329C71.8295 21.8329 72.3339 21.6964 72.7308 21.4236C73.1277 21.1425 73.4295 20.758 73.6362 20.2702C73.8511 19.7823 73.9752 19.2201 74.0082 18.5834V16.9587C73.9834 16.4378 73.909 15.9707 73.785 15.5573C73.6692 15.1356 73.4956 14.7759 73.2641 14.4783C73.0408 14.1806 72.7597 13.9491 72.4207 13.7837C72.09 13.6184 71.6973 13.5357 71.2425 13.5357C70.7795 13.5357 70.3826 13.6432 70.0519 13.8582C69.7212 14.0649 69.4524 14.3501 69.2457 14.7139C69.0473 15.0777 68.8985 15.5077 68.7992 16.0038C68.7083 16.4916 68.6628 17.0207 68.6628 17.5913Z"
+    fill="#24292f"
+  />
+  <path
+    d="M62.2053 5.35014C62.7576 5.35014 63.2053 5.79786 63.2053 6.35014V23.4001C63.2053 23.9524 62.7576 24.4001 62.2053 24.4001H60.621C60.0687 24.4001 59.621 23.9524 59.621 23.4001V6.35014C59.621 5.79786 60.0687 5.35014 60.621 5.35014H62.2053Z"
+    fill="#24292f"
+  />
+  <path
+    d="M55.9912 10.9808C56.5435 10.9808 56.9912 11.4285 56.9912 11.9808V23.4002C56.9912 23.9524 56.5435 24.4002 55.9912 24.4002H54.407C53.8547 24.4002 53.4069 23.9524 53.4069 23.4002V11.9808C53.4069 11.4285 53.8547 10.9808 54.4069 10.9808H55.9912ZM53.1837 7.48335C53.1837 6.96245 53.3656 6.53251 53.7294 6.19351C54.0932 5.85451 54.581 5.68501 55.1929 5.68501C55.7965 5.68501 56.2802 5.85451 56.644 6.19351C57.016 6.53251 57.2021 6.96245 57.2021 7.48335C57.2021 8.00425 57.016 8.4342 56.644 8.7732C56.2802 9.11219 55.7965 9.28169 55.1929 9.28169C54.581 9.28169 54.0932 9.11219 53.7294 8.7732C53.3656 8.4342 53.1837 8.00425 53.1837 7.48335Z"
+    fill="#24292f"
+  />
+  <path
+    d="M47.4285 21.1879V11.9808C47.4285 11.4285 47.8762 10.9808 48.4285 10.9808H50.0004C50.5527 10.9808 51.0004 11.4285 51.0004 11.9808V23.4001C51.0004 23.9524 50.5527 24.4001 50.0004 24.4001H48.5759C48.049 24.4001 47.6125 23.9914 47.578 23.4656L47.4285 21.1879ZM47.8254 18.4346L48.8796 18.4098C48.8796 19.3028 48.7762 20.1337 48.5695 20.9027C48.3628 21.6634 48.0528 22.3248 47.6394 22.8871C47.2259 23.441 46.705 23.8751 46.0767 24.1893C45.4483 24.4952 44.7083 24.6482 43.8566 24.6482C43.2035 24.6482 42.5999 24.5572 42.0459 24.3753C41.5002 24.1852 41.0289 23.8916 40.632 23.4948C40.2434 23.0896 39.9375 22.5729 39.7143 21.9445C39.4993 21.3078 39.3918 20.543 39.3918 19.65V11.9808C39.3918 11.4285 39.8395 10.9808 40.3918 10.9808H41.9637C42.516 10.9808 42.9637 11.4285 42.9637 11.9808V19.6748C42.9637 20.0717 43.0092 20.4066 43.1001 20.6794C43.1993 20.9523 43.3357 21.1755 43.5094 21.3492C43.683 21.5228 43.8856 21.6468 44.1171 21.7212C44.3569 21.7956 44.6215 21.8329 44.9108 21.8329C45.6467 21.8329 46.2255 21.684 46.6472 21.3864C47.0771 21.0887 47.3789 20.6836 47.5525 20.1709C47.7344 19.65 47.8254 19.0713 47.8254 18.4346Z"
+    fill="#24292f"
+  />
+  <path
+    d="M31.0693 16.475H26.4309L26.4061 13.9202H30.3004C30.9867 13.9202 31.5489 13.8333 31.9871 13.6597C32.4253 13.4778 32.7519 13.2174 32.9669 12.8784C33.1901 12.5311 33.3018 12.1094 33.3018 11.6133C33.3018 11.0511 33.1943 10.5963 32.9793 10.2491C32.7726 9.9018 32.446 9.64962 31.9995 9.49253C31.5613 9.33543 30.9949 9.25688 30.3004 9.25688H27.7207V24.4001H25.6C24.7163 24.4001 24 23.6838 24 22.8001V7.94233C24 7.05868 24.7163 6.34233 25.6 6.34233H30.3004C31.3505 6.34233 32.2889 6.44155 33.1157 6.63999C33.9508 6.83842 34.6577 7.14021 35.2365 7.54536C35.8153 7.9505 36.2576 8.46313 36.5636 9.08325C36.8695 9.6951 37.0225 10.4227 37.0225 11.2661C37.0225 12.0102 36.853 12.6965 36.514 13.3249C36.1832 13.9532 35.6582 14.4659 34.9389 14.8627C34.2278 15.2596 33.2976 15.4787 32.1483 15.5201L31.0693 16.475ZM30.9081 24.4001H25.4139L26.8649 21.498H30.9081C31.5613 21.498 32.0946 21.3946 32.508 21.1879C32.9214 20.973 33.2273 20.6836 33.4258 20.3198C33.6242 19.956 33.7234 19.5384 33.7234 19.0671C33.7234 18.538 33.6325 18.0791 33.4506 17.6905C33.277 17.3019 32.9958 17.0042 32.6072 16.7975C32.2186 16.5825 31.706 16.475 31.0693 16.475H27.4851L27.5099 13.9202H31.9747L32.8305 14.9248C33.9301 14.9082 34.8148 15.1025 35.4846 15.5077C36.1626 15.9045 36.6545 16.4213 36.9604 17.058C37.2746 17.6946 37.4317 18.3767 37.4317 19.1043C37.4317 20.2619 37.1796 21.2375 36.6752 22.0313C36.1708 22.8168 35.4308 23.408 34.4552 23.8048C33.4878 24.2017 32.3054 24.4001 30.9081 24.4001Z"
+    fill="#24292f"
+  />
+  <path
+    d="M19.6347 6.68961C18.7176 5.86504 17.8901 5.96828 17.2246 6.68961L16.7772 7.17436L19.2579 9.649L19.6338 9.30177C20.2994 8.58044 20.6994 7.70725 19.6338 6.68961H19.6347Z"
+    fill="#24292f"
+  />
+  <path
+    d="M4.20431 20.0879L3.06538 22.05L2.20955 23.8797C2.09955 24.1149 2.34368 24.3594 2.57898 24.2492L4.4076 23.3931L6.3643 22.2491L6.36245 22.2473L6.36755 22.2459L4.20431 20.0879Z"
+    fill="#24292f"
+  />
+  <path
+    d="M6.6502 21.4986L7.01731 21.8667L7.14309 21.7931C7.14634 21.7912 7.14959 21.7884 7.15237 21.7857L18.778 10.1601L18.3969 9.78049L6.6502 21.4986Z"
+    fill="#24292f"
+  />
+  <path
+    d="M4.66564 19.2967C4.66286 19.2994 4.66054 19.3027 4.65822 19.3059L4.58442 19.4332L6.15638 21.006L17.9036 9.28741L16.2889 7.67206L4.66518 19.2967H4.66564Z"
+    fill="#24292f"
+  />
+  <path
+    d="M6.38396 12.4271L17.7056 23.7684C18.3906 24.4545 19.5012 24.4545 20.1863 23.7684C20.8713 23.0823 20.8713 21.9697 20.1863 21.2836L8.86605 9.9437L6.38396 12.4271Z"
+    fill="#24292f"
+  />
+  <path
+    d="M9.46336 5.46387C8.87765 5.98102 8.10861 6.29492 7.26671 6.29492C6.91537 6.29492 6.57657 6.24029 6.25865 6.1389C6.22523 6.12825 6.18857 6.13658 6.16351 6.16158L1.43511 10.8979C1.25503 11.0785 1.25503 11.3711 1.43511 11.5516L3.52409 13.6443C3.70416 13.8249 3.99656 13.8249 4.1771 13.6443L8.37037 9.44692L8.36852 9.44507L10.6399 7.16996C10.82 6.9894 10.82 6.69679 10.6399 6.51623L9.59192 5.46711C9.55665 5.43192 9.50049 5.431 9.4629 5.46387H9.46336Z"
+    fill="#24292f"
+  />
+</svg>
diff --git a/ui/prototype/src/assets/projects/niu-run/editor/backdrop.png b/ui/prototype/src/assets/projects/niu-run/editor/backdrop.png
new file mode 100644
index 0000000000..dad2f70eaf
Binary files /dev/null and b/ui/prototype/src/assets/projects/niu-run/editor/backdrop.png differ
diff --git a/ui/prototype/src/assets/projects/niu-run/editor/sprite-flower.png b/ui/prototype/src/assets/projects/niu-run/editor/sprite-flower.png
new file mode 100644
index 0000000000..88a13e9aec
Binary files /dev/null and b/ui/prototype/src/assets/projects/niu-run/editor/sprite-flower.png differ
diff --git a/ui/prototype/src/assets/projects/niu-run/editor/sprite-niu-xiao-hua.png b/ui/prototype/src/assets/projects/niu-run/editor/sprite-niu-xiao-hua.png
new file mode 100644
index 0000000000..5425889c20
Binary files /dev/null and b/ui/prototype/src/assets/projects/niu-run/editor/sprite-niu-xiao-hua.png differ
diff --git a/ui/prototype/src/assets/projects/niu-run/editor/sprite-niu-xiao-qi.png b/ui/prototype/src/assets/projects/niu-run/editor/sprite-niu-xiao-qi.png
new file mode 100644
index 0000000000..02c800df35
Binary files /dev/null and b/ui/prototype/src/assets/projects/niu-run/editor/sprite-niu-xiao-qi.png differ
diff --git a/ui/prototype/src/assets/projects/niu-run/editor/sprite-tornado.svg b/ui/prototype/src/assets/projects/niu-run/editor/sprite-tornado.svg
new file mode 100644
index 0000000000..b8d9c46eb6
--- /dev/null
+++ b/ui/prototype/src/assets/projects/niu-run/editor/sprite-tornado.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #eceff1;
+      }
+
+      .cls-2 {
+        fill: #cfd8dc;
+      }
+    </style>
+  </defs>
+  <g id="Tornado">
+    <path class="cls-1" d="m104.62,20.67c-22.1,8.45-42.19,21.45-54.98,40.73-2.49,3.75-4.69,7.63-6.38,11.81-3.25,8.04-4.59,17.38-1.05,25.3,3.39,7.58,10.8,12.77,18.69,15.38,7.89,2.61,16.31,2.99,24.61,3.34-3.46.75-5.7,5.73-7.29,8.89-1.3,2.59-2.35,5.47-1.96,8.35.46,3.39,2.89,6.27,5.78,8.09,2.9,1.83,6.25,2.77,9.55,3.68-4.99,1.78-10.06,7.58-10.04,12.88.02,5.3,3.66,10.4,8.67,12.15-4.27,1.2-7.09,5.87-7.18,10.31-.09,4.43,1.97,8.66,4.64,12.2-2.07-.62-4.12,1.54-4.48,3.67-.35,2.13.57,4.26,1.59,6.16s2.21,3.81,2.46,5.96c-4.68.33-6.11,5.85-5.32,10.47.79,4.63,3.23,9.03,2.88,13.71-.33,4.31-3.05,8.15-6.45,10.81-3.4,2.66-7.46,4.33-11.46,5.96,7.89-2.89,15.31-2.84,23.2-5.72,6.07-2.22,12.31-4.55,17.03-8.96,4.72-4.41,7.57-11.49,5.16-17.48,5.79-1.77,11.9-3.76,15.83-8.36,3.92-4.61,4.34-12.73-.75-16.01,2.45-3.49,6.43-5.48,10.06-7.71,3.63-2.23,7.28-5.16,8.23-9.32.95-4.15-2.47-9.3-6.65-8.44,7.61-5.24,14.81-11.07,21.52-17.42,2.28-2.16,2.35-5.78.17-8.04,6.82-4.8,13.78-9.74,18.52-16.6,4.74-6.86,6.88-16.14,3.24-23.63.38.78,19.02-14.27,20.55-15.78,16.05-15.89,37.42-54.12,14.23-73.24-15.47-12.75-39.43-7.52-57.58-5.67-17.77,1.8-37.07,5.67-55.04,12.55Z"/>
+    <path class="cls-2" d="m43.32,93.99c-.45-6.69.33-13.45,2.29-19.86.8,7.98,6.93,14.68,14.16,18.16,7.23,3.48,15.44,4.25,23.46,4.48,23.08.68,46.41-2.66,67.9-11.11,21.49-8.44,41.1-22.1,55.42-40.21,2.77-3.5,5.38-7.26,6.52-11.57,1.14-4.31.55-9.31-2.49-12.58,4.52,2.34,7.2,7.34,7.95,12.37.75,5.03-.15,10.16-1.23,15.13-2.3,10.59-5.53,21.27-12.08,29.9-9.42,12.4-24.48,19.06-39.29,23.88-26.24,8.53-53.84,12.84-81.42,12.72-8.54-.04-17.7-.72-25.47-4.59-7.1-3.54-15.14-8.18-15.71-16.71Z"/>
+    <path class="cls-2" d="m162.54,126.98c2.53-1.34,5.08-2.83,6.84-5.08,1.77-2.25,2.61-5.45,1.39-8.04,2.73.95,4.05,4.26,3.65,7.12-.4,2.86-2.1,5.36-3.81,7.69-5.18,7.05-11.3,13.94-19.49,17.04-4.79,1.82-9.99,2.21-15.11,2.59-14.74,1.09-29.86,2.13-44.03-2.09-4.88-1.45-12.66-5.6-10.41-12.07,2.25-6.46,9.85-1.94,13.86-.4,13.6,5.23,29.3,5.15,43.36,2.01,8.26-1.85,16.26-4.83,23.75-8.77Z"/>
+    <path class="cls-2" d="m109.25,172.72c6.01.02,12.02-.51,17.93-1.58,4.67-.84,9.37-2.06,13.42-4.53,4.06-2.47,7.45-6.35,8.43-11-7.16,6.58-16.51,10.59-26.14,11.89-9.64,1.3-19.53-.03-28.73-3.21-1.48-.51-5.7-1.95-6.97-.31-1.62,2.08,3,4.39,4.75,5.31,5.26,2.76,11.46,3.4,17.31,3.42Z"/>
+    <path class="cls-2" d="m118.71,180.18c1.15-.21,2.3-.45,3.45-.69,3.24-.69,14.87-5.91,16.57-1.08.7,1.99-1.44,4.46-2.64,5.82-3.19,3.61-7.69,5.97-12.37,6.98-3.47.75-28.82,2.45-26.23-5.96,1.29-4.2,7.23-4.14,10.74-4.07,3.55.07,7.03-.36,10.48-1Z"/>
+    <path class="cls-2" d="m106.69,207.69c5.88-.98,11.3-3.86,16.14-7.34.41-.3.88-.61,1.38-.53.47.07.81.47,1.07.87,2.02,3.08,1.45,7.39-.75,10.34s-5.74,4.66-9.35,5.39c-6.03,1.22-12.53-.14-17.56-3.67-1.76-1.23-3.45-2.72-4.84-4.37-1.62-1.91-2.46-2.91.13-2.58,2.19.28,4.39,1.74,6.71,2.04,2.35.31,4.74.25,7.08-.14Z"/>
+    <path class="cls-2" d="m95.14,235.86c-4.14,4.5-10.13,6.46-14.76,10.34,1.72-.63,3.64-.29,5.41-.69,1.91-.43,3.79-1.02,5.61-1.75,3.46-1.39,6.65-3.33,9.6-5.61,2.9-2.24,8.47-6.44,6.43-10.76-1.21-2.57-5.36-4.02-6.87-.94-1.67,3.42-2.75,6.52-5.42,9.42Z"/>
+    <path class="cls-2" d="m180.99,16.7c-38.48.43-76.69,13.98-106.84,37.88-3.65,2.9-7.25,6-9.74,9.95-2.49,3.94-3.77,8.87-2.45,13.35,3.17-10.36,12.57-17.09,21.66-22.99,30.11-19.55,61.75-33.7,97.37-38.19Z"/>
+    <path class="cls-2" d="m83.2,79.3c18.25.83,36.68-2.43,53.53-9.47-17.54,9.38-37.52,14.15-57.4,13.72-3.85-.08-8.91-.7-10.7-4.68-1.54-3.42.46-8.99,4.33-9.6-2.36,7.16,4.34,9.77,10.24,10.03Z"/>
+    <path class="cls-2" d="m198.34,29.71c-.27,2.72-1.98,5.06-3.71,7.17-11.39,13.87-26.7,24.49-43.69,30.3,7.25-6.28,14.49-12.56,21.74-18.84,3.36-2.91,7.03-6.56,6.57-10.98-.49-4.77-6.89-7.72-10.84-5.01,5.06-3.51,12.01-8.64,17.81-10.73,5.42-1.96,12.77,1.6,12.13,8.1Z"/>
+    <path class="cls-2" d="m106.32,49.06c9.19-5.42,18.88-9.99,28.9-13.65,8.91-3.25,19.79-4.08,28.17-8-5.81-5.68-20.73,1.44-26.79,3.84-11.36,4.5-19.98,11.73-30.28,17.81Z"/>
+    <path class="cls-2" d="m88.32,66.95c-1.17,1.54-1.84,3.6-1.26,5.45.57,1.84,2.28,3.16,4.12,3.74,1.84.59,3.81.55,5.73.46,13.44-.64,26.76-3.9,38.98-9.52-8.57,1.29-17.14,2.58-25.72,3.87-2.44.37-5.83.82-8.03-.65-3.69-2.47-1.24-4.43-1.73-7.59-1.05-6.79-9.35.63-12.09,4.24Z"/>
+    <path class="cls-2" d="m156.45,36.25c3.34-.8,7.6-1.27,9.49,1.6,1.17,1.77.81,4.23-.33,6.01-1.14,1.79-2.93,3.05-4.71,4.22-12.52,8.19-26.74,13.77-41.49,16.27,9.56-3.63,18.84-7.98,27.76-12.98,2.52-1.41,6.03-3.89,5.1-7.26-.86-3.09-4.51-2.98-6.42-4.93,2.67-1.74,7.31-2.15,10.6-2.94Z"/>
+    <path class="cls-2" d="m106.54,62.88c7.53-8.99,17.76-15.62,29.03-18.86-5.29,1.46-11.85,1.8-16.84,3.98-5.85,2.55-10.42,8.92-12.19,14.88Z"/>
+    <path class="cls-2" d="m166.97,107.37c-4.69,2.12-8.8,6.54-13.57,8.91-5.14,2.55-10.59,4.47-16.19,5.71-9.41,2.09-23.78,3.82-32.66-.83,21.82-1.84,42.19-4.65,62.43-13.79Z"/>
+    <path class="cls-2" d="m124.75,151.79c-4.83,3.92-11.15,5.94-17.36,5.57-4.03-.24-9.96-1.52-12.7-4.62,3-1.92,10.15.83,13.74.95,5.49.18,11.01-.45,16.31-1.91Z"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/ui/prototype/src/assets/projects/niu-run/thumbnail.jpeg b/ui/prototype/src/assets/projects/niu-run/thumbnail.jpeg
new file mode 100644
index 0000000000..16d8f84987
Binary files /dev/null and b/ui/prototype/src/assets/projects/niu-run/thumbnail.jpeg differ
diff --git a/ui/prototype/src/assets/projects/weathergggg/editor/jaime.png b/ui/prototype/src/assets/projects/weathergggg/editor/jaime.png
new file mode 100644
index 0000000000..821a10cc17
Binary files /dev/null and b/ui/prototype/src/assets/projects/weathergggg/editor/jaime.png differ
diff --git a/ui/prototype/src/assets/projects/weathergggg/editor/kai.png b/ui/prototype/src/assets/projects/weathergggg/editor/kai.png
new file mode 100644
index 0000000000..ad0d8b9d98
Binary files /dev/null and b/ui/prototype/src/assets/projects/weathergggg/editor/kai.png differ
diff --git a/ui/prototype/src/assets/projects/weathergggg/editor/urban1.png b/ui/prototype/src/assets/projects/weathergggg/editor/urban1.png
new file mode 100644
index 0000000000..3308cf1e5a
Binary files /dev/null and b/ui/prototype/src/assets/projects/weathergggg/editor/urban1.png differ
diff --git a/ui/prototype/src/assets/projects/weathergggg/thumbnail.jpg b/ui/prototype/src/assets/projects/weathergggg/thumbnail.jpg
new file mode 100644
index 0000000000..7bca7cd49f
Binary files /dev/null and b/ui/prototype/src/assets/projects/weathergggg/thumbnail.jpg differ
diff --git a/ui/prototype/src/assets/stage-bg.svg b/ui/prototype/src/assets/stage-bg.svg
new file mode 100644
index 0000000000..4ed2511929
--- /dev/null
+++ b/ui/prototype/src/assets/stage-bg.svg
@@ -0,0 +1,152 @@
+<svg width="468" height="351" viewBox="0 0 468 351" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_1007_2114)">
+  <rect x="-4" y="-27" width="484" height="409" rx="8" fill="#EAEFF3"/>
+  <path d="M-6 31H478" stroke="white"/>
+  <path d="M-6 63H478" stroke="white"/>
+  <path d="M-6 95H478" stroke="white"/>
+  <path d="M-6 127H478" stroke="white"/>
+  <path d="M-6 159H478" stroke="white"/>
+  <path d="M-6 191H478" stroke="white"/>
+  <path d="M-6 223H478" stroke="white"/>
+  <path d="M-6 255H478" stroke="white"/>
+  <path d="M-6 287H478" stroke="white"/>
+  <path d="M-6 319H478" stroke="white"/>
+  <path d="M-6 351H478" stroke="white"/>
+  <path d="M28 -28V382" stroke="white"/>
+  <path d="M58 -28V382" stroke="white"/>
+  <path d="M88 -28V382" stroke="white"/>
+  <path d="M118 -28V382" stroke="white"/>
+  <path d="M148 -28V382" stroke="white"/>
+  <path d="M178 -28V382" stroke="white"/>
+  <path d="M208 -28V382" stroke="white"/>
+  <path d="M238 -28V382" stroke="white"/>
+  <path d="M268 -28V382" stroke="white"/>
+  <path d="M298 -28V382" stroke="white"/>
+  <path d="M328 -28V382" stroke="white"/>
+  <path d="M358 -28V382" stroke="white"/>
+  <path d="M388 -28V382" stroke="white"/>
+  <path d="M418 -28V382" stroke="white"/>
+  <path d="M448 -28V382" stroke="white"/>
+  <path d="M208 191L238 159L268.5 191L238 223L208 191Z" stroke="white"/>
+  <path d="M208 159L148 223" stroke="white"/>
+  <path d="M148 223L178 255" stroke="white"/>
+  <path d="M178 223L148 255" stroke="white"/>
+  <path d="M178 255L118 319" stroke="white"/>
+  <path d="M148 159L88 223" stroke="white"/>
+  <path d="M58 159L-2 223" stroke="white"/>
+  <path d="M58 95L-2 159" stroke="white"/>
+  <path d="M118 255L178 319" stroke="white"/>
+  <path d="M118 255L88 287" stroke="white"/>
+  <path d="M88 255L118 287" stroke="white"/>
+  <path d="M28 287L-2 319" stroke="white"/>
+  <path d="M-2 287L28 319" stroke="white"/>
+  <path d="M28 319L-2 351" stroke="white"/>
+  <path d="M88 255L58 287" stroke="white"/>
+  <path d="M88 287L58 255L28 223" stroke="white"/>
+  <path d="M88 351L58 319L28 287" stroke="white"/>
+  <path d="M-2 223L28 255" stroke="white"/>
+  <path d="M28 191L58 223" stroke="white"/>
+  <path d="M88 191L58 223" stroke="white"/>
+  <path d="M28 159L-2 191" stroke="white"/>
+  <path d="M88 127L148 191" stroke="white"/>
+  <path d="M28 95L88 159" stroke="white"/>
+  <path d="M58 159L88 191" stroke="white"/>
+  <path d="M118 319L148 351" stroke="white"/>
+  <path d="M148 319L118 351" stroke="white"/>
+  <path d="M88 319L118 351" stroke="white"/>
+  <path d="M418 -33L358 31" stroke="white"/>
+  <path d="M358 -33L418 31" stroke="white"/>
+  <path d="M268 -1L238 31" stroke="white"/>
+  <path d="M238 -1L268 31" stroke="white"/>
+  <path d="M268 31L238 63" stroke="white"/>
+  <path d="M328 63L298 31L268 -1" stroke="white"/>
+  <path d="M358 31L388 63" stroke="white"/>
+  <path d="M388 31L358 63" stroke="white"/>
+  <path d="M328 31L358 63" stroke="white"/>
+  <path d="M508 191L448 255" stroke="white"/>
+  <path d="M448 255L478 287" stroke="white"/>
+  <path d="M478 255L448 287" stroke="white"/>
+  <path d="M478 287L418 351" stroke="white"/>
+  <path d="M448 191L388 255" stroke="white"/>
+  <path d="M358 191L298 255" stroke="white"/>
+  <path d="M358 127L298 191" stroke="white"/>
+  <path d="M418 287L478 351" stroke="white"/>
+  <path d="M418 287L388 319" stroke="white"/>
+  <path d="M388 287L418 319" stroke="white"/>
+  <path d="M328 319L298 351" stroke="white"/>
+  <path d="M298 319L328 351" stroke="white"/>
+  <path d="M328 351L298 383" stroke="white"/>
+  <path d="M388 287L358 319" stroke="white"/>
+  <path d="M388 319L358 287L328 255" stroke="white"/>
+  <path d="M388 383L358 351L328 319" stroke="white"/>
+  <path d="M298 255L328 287" stroke="white"/>
+  <path d="M328 223L358 255" stroke="white"/>
+  <path d="M388 223L358 255" stroke="white"/>
+  <path d="M328 191L298 223" stroke="white"/>
+  <path d="M388 159L448 223" stroke="white"/>
+  <path d="M328 127L388 191" stroke="white"/>
+  <path d="M358 191L388 223" stroke="white"/>
+  <path d="M418 351L448 383" stroke="white"/>
+  <path d="M448 351L418 383" stroke="white"/>
+  <path d="M388 351L418 383" stroke="white"/>
+  <path d="M238 -1L178 63" stroke="white"/>
+  <path d="M178 -1L238 63" stroke="white"/>
+  <path d="M178 -1L148 31" stroke="white"/>
+  <path d="M148 -1L178 31" stroke="white"/>
+  <path d="M88 31L58 63" stroke="white"/>
+  <path d="M58 31L88 63" stroke="white"/>
+  <path d="M88 63L58 95" stroke="white"/>
+  <path d="M148 -1L118 31" stroke="white"/>
+  <path d="M148 31L118 -1L88 -33" stroke="white"/>
+  <path d="M148 95L118 63L88 31" stroke="white"/>
+  <path d="M178 63L208 95" stroke="white"/>
+  <path d="M208 63L178 95" stroke="white"/>
+  <path d="M148 63L178 95" stroke="white"/>
+  <path d="M262.514 72.4017C263.452 73.7504 264.112 75.308 264.411 76.9908H268V81.0932H264.411C264.112 82.776 263.452 84.3335 262.514 85.6823L265.053 88.2279L262.16 91.1287L259.622 88.5831C258.277 89.5236 256.724 90.1853 255.045 90.485V94.084H250.955V90.485C249.276 90.1853 247.723 89.5236 246.378 88.5831L243.84 91.1287L240.947 88.2279L243.486 85.6823C242.548 84.3335 241.888 82.776 241.589 81.0932H238V76.9908H241.589C241.888 75.308 242.548 73.7504 243.486 72.4017L240.947 69.8561L243.84 66.9553L246.378 69.5009C247.723 68.5604 249.276 67.8987 250.955 67.599V64H255.045V67.599C256.724 67.8987 258.277 68.5604 259.622 69.5009L262.16 66.9553L265.053 69.8561L262.514 72.4017Z" fill="#EAEFF3" stroke="white" stroke-linejoin="round"/>
+  <path d="M253 82.8022C255.071 82.8022 256.75 81.1186 256.75 79.0417C256.75 76.9649 255.071 75.2812 253 75.2812C250.929 75.2812 249.25 76.9649 249.25 79.0417C249.25 81.1186 250.929 82.8022 253 82.8022Z" fill="#EAEFF3" stroke="white" stroke-linejoin="round"/>
+  <path d="M352.514 105.402C353.452 106.75 354.112 108.308 354.411 109.991H358V114.093H354.411C354.112 115.776 353.452 117.334 352.514 118.682L355.053 121.228L352.16 124.129L349.622 121.583C348.277 122.524 346.724 123.185 345.045 123.485V127.084H340.955V123.485C339.276 123.185 337.723 122.524 336.378 121.583L333.84 124.129L330.947 121.228L333.486 118.682C332.548 117.334 331.888 115.776 331.589 114.093H328V109.991H331.589C331.888 108.308 332.548 106.75 333.486 105.402L330.947 102.856L333.84 99.9553L336.378 102.501C337.723 101.56 339.276 100.899 340.955 100.599V97H345.045V100.599C346.724 100.899 348.277 101.56 349.622 102.501L352.16 99.9553L355.053 102.856L352.514 105.402Z" fill="#EAEFF3" stroke="white" stroke-linejoin="round"/>
+  <path d="M343 115.802C345.071 115.802 346.75 114.119 346.75 112.042C346.75 109.965 345.071 108.281 343 108.281C340.929 108.281 339.25 109.965 339.25 112.042C339.25 114.119 340.929 115.802 343 115.802Z" fill="#EAEFF3" stroke="white" stroke-linejoin="round"/>
+  <path d="M407.029 81.8034C408.905 84.5009 410.224 87.6159 410.822 90.9816H418V99.1864H410.822C410.224 102.552 408.905 105.667 407.029 108.365L412.106 113.456L406.321 119.257L401.243 114.166C398.554 116.047 395.447 117.371 392.091 117.97V125.168H383.909V117.97C380.553 117.371 377.446 116.047 374.757 114.166L369.679 119.257L363.894 113.456L368.971 108.365C367.095 105.667 365.776 102.552 365.178 99.1864H358V90.9816H365.178C365.776 87.6159 367.095 84.5009 368.971 81.8034L363.894 76.7121L369.679 70.9106L374.757 76.0017C377.446 74.1209 380.553 72.7973 383.909 72.1981V65H392.091V72.1981C395.447 72.7973 398.554 74.1209 401.243 76.0017L406.321 70.9106L412.106 76.7121L407.029 81.8034Z" fill="#EAEFF3" stroke="white" stroke-linejoin="round"/>
+  <path d="M388 102.604C392.142 102.604 395.5 99.2372 395.5 95.0835C395.5 90.9298 392.142 87.5625 388 87.5625C383.858 87.5625 380.5 90.9298 380.5 95.0835C380.5 99.2372 383.858 102.604 388 102.604Z" fill="#EAEFF3" stroke="white" stroke-linejoin="round"/>
+  <path d="M202.514 297.402C203.452 298.75 204.112 300.308 204.411 301.991H208V306.093H204.411C204.112 307.776 203.452 309.334 202.514 310.682L205.053 313.228L202.16 316.129L199.622 313.583C198.277 314.524 196.724 315.185 195.045 315.485V319.084H190.955V315.485C189.276 315.185 187.723 314.524 186.378 313.583L183.84 316.129L180.947 313.228L183.486 310.682C182.548 309.334 181.888 307.776 181.589 306.093H178V301.991H181.589C181.888 300.308 182.548 298.75 183.486 297.402L180.947 294.856L183.84 291.955L186.378 294.501C187.723 293.56 189.276 292.899 190.955 292.599V289H195.045V292.599C196.724 292.899 198.277 293.56 199.622 294.501L202.16 291.955L205.053 294.856L202.514 297.402Z" fill="#EAEFF3" stroke="white" stroke-linejoin="round"/>
+  <path d="M193 307.802C195.071 307.802 196.75 306.119 196.75 304.042C196.75 301.965 195.071 300.281 193 300.281C190.929 300.281 189.25 301.965 189.25 304.042C189.25 306.119 190.929 307.802 193 307.802Z" fill="#EAEFF3" stroke="white" stroke-linejoin="round"/>
+  <path d="M292.514 328.402C293.452 329.75 294.112 331.308 294.411 332.991H298V337.093H294.411C294.112 338.776 293.452 340.334 292.514 341.682L295.053 344.228L292.16 347.129L289.622 344.583C288.277 345.524 286.724 346.185 285.045 346.485V350.084H280.955V346.485C279.276 346.185 277.723 345.524 276.378 344.583L273.84 347.129L270.947 344.228L273.486 341.682C272.548 340.334 271.888 338.776 271.589 337.093H268V332.991H271.589C271.888 331.308 272.548 329.75 273.486 328.402L270.947 325.856L273.84 322.955L276.378 325.501C277.723 324.56 279.276 323.899 280.955 323.599V320H285.045V323.599C286.724 323.899 288.277 324.56 289.622 325.501L292.16 322.955L295.053 325.856L292.514 328.402Z" fill="#EAEFF3" stroke="white" stroke-linejoin="round"/>
+  <path d="M283 338.802C285.071 338.802 286.75 337.119 286.75 335.042C286.75 332.965 285.071 331.281 283 331.281C280.929 331.281 279.25 332.965 279.25 335.042C279.25 337.119 280.929 338.802 283 338.802Z" fill="#EAEFF3" stroke="white" stroke-linejoin="round"/>
+  <path d="M257.029 273.803C258.905 276.501 260.224 279.616 260.822 282.982H268V291.186H260.822C260.224 294.552 258.905 297.667 257.029 300.365L262.106 305.456L256.321 311.257L251.243 306.166C248.554 308.047 245.447 309.371 242.091 309.97V317.168H233.909V309.97C230.553 309.371 227.446 308.047 224.757 306.166L219.679 311.257L213.894 305.456L218.971 300.365C217.095 297.667 215.776 294.552 215.178 291.186H208V282.982H215.178C215.776 279.616 217.095 276.501 218.971 273.803L213.894 268.712L219.679 262.911L224.757 268.002C227.446 266.121 230.553 264.797 233.909 264.198V257H242.091V264.198C245.447 264.797 248.554 266.121 251.243 268.002L256.321 262.911L262.106 268.712L257.029 273.803Z" fill="#EAEFF3" stroke="white" stroke-linejoin="round"/>
+  <path d="M238 294.604C242.142 294.604 245.5 291.237 245.5 287.083C245.5 282.93 242.142 279.562 238 279.562C233.858 279.562 230.5 282.93 230.5 287.083C230.5 291.237 233.858 294.604 238 294.604Z" fill="#EAEFF3" stroke="white" stroke-linejoin="round"/>
+  <path d="M100 63H110.362C114.524 63 117.898 66.2747 117.898 70.3143V95C117.898 91.9703 115.367 89.5143 112.246 89.5143H100V63Z" fill="#EAEFF3" stroke="white" stroke-linejoin="round"/>
+  <path d="M135.796 63H125.434C121.272 63 117.898 66.2747 117.898 70.3143V95C117.898 91.9703 120.428 89.5143 123.55 89.5143H135.796V63Z" fill="#EAEFF3" stroke="white" stroke-linejoin="round"/>
+  <path d="M10 -1H20.3619C24.5239 -1 27.8978 2.2747 27.8978 6.31429V31C27.8978 27.9703 25.3674 25.5143 22.2459 25.5143H10V-1Z" fill="#EAEFF3" stroke="white" stroke-linejoin="round"/>
+  <path d="M45.7957 -1H35.4338C31.2718 -1 27.8978 2.2747 27.8978 6.31429V31C27.8978 27.9703 30.4283 25.5143 33.5498 25.5143H45.7957V-1Z" fill="#EAEFF3" stroke="white" stroke-linejoin="round"/>
+  <path d="M252.25 374.999H240.25C239.007 374.999 238 373.992 238 372.749V353.25C238 352.007 239.007 351 240.25 351H265.749C266.992 351 267.999 352.007 267.999 353.25V364.411" fill="#EAEFF3"/>
+  <path d="M252.25 374.999H240.25C239.007 374.999 238 373.992 238 372.749V353.25C238 352.007 239.007 351 240.25 351H265.749C266.992 351 267.999 352.007 267.999 353.25V364.411" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M238 353.25C238 352.007 239.007 351 240.25 351H265.749C266.992 351 267.999 352.007 267.999 353.25V360H238V353.25Z" fill="#EAEFF3" stroke="white"/>
+  <path d="M93.5088 191.056L102.074 168.216" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M112.743 191.056L104.178 168.216" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M103.126 168.616C104.896 168.616 106.331 167.181 106.331 165.411C106.331 163.64 104.896 162.205 103.126 162.205C101.355 162.205 99.9199 163.64 99.9199 165.411C99.9199 167.181 101.355 168.616 103.126 168.616Z" fill="#EAEFF3" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M114.001 182.241C110.869 184.269 107.135 185.447 103.125 185.447C99.1163 185.447 95.3821 184.269 92.25 182.241" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M103.125 162.206V159" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M393.259 351.056L401.824 328.216" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M412.493 351.056L403.928 328.216" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M402.876 328.616C404.646 328.616 406.081 327.181 406.081 325.411C406.081 323.64 404.646 322.205 402.876 322.205C401.105 322.205 399.67 323.64 399.67 325.411C399.67 327.181 401.105 328.616 402.876 328.616Z" fill="#EAEFF3" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M413.751 342.241C410.619 344.269 406.885 345.447 402.875 345.447C398.866 345.447 395.132 344.269 392 342.241" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M402.875 322.206V319" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M433 143C437.142 143 440.5 139.642 440.5 135.5C440.5 131.358 437.142 128 433 128V143Z" stroke="white" stroke-linejoin="round"/>
+  <path d="M433 143C433 147.142 436.358 150.5 440.5 150.5C444.642 150.5 448 147.142 448 143H433Z" stroke="white" stroke-linejoin="round"/>
+  <path d="M433 143C433 138.858 429.642 135.5 425.5 135.5C421.358 135.5 418 138.858 418 143H433Z" stroke="white" stroke-linejoin="round"/>
+  <path d="M433 143C428.858 143 425.5 146.358 425.5 150.5C425.5 154.642 428.858 158 433 158V143Z" stroke="white" stroke-linejoin="round"/>
+  <path d="M358 168.5L350.5 161L347.688 163.812L344.875 166.625L339.25 172.25L333.625 177.875L330.812 180.688L328 183.5L335.5 191L358 168.5Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M347.688 163.812L330.812 180.688" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M331.75 179.75L334.75 182.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M335.5 176L340 180.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M339.25 172.25L342.25 175.25" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M343 168.5L347.5 173" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M346.75 164.75L349.75 167.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+  <defs>
+  <clipPath id="clip0_1007_2114">
+  <rect x="-4" y="-27" width="484" height="409" rx="8" fill="white"/>
+  </clipPath>
+  </defs>
+  </svg>
+  
\ No newline at end of file
diff --git a/ui/prototype/src/components/common/ListResultWrapper.vue b/ui/prototype/src/components/common/ListResultWrapper.vue
new file mode 100644
index 0000000000..95b7a32b09
--- /dev/null
+++ b/ui/prototype/src/components/common/ListResultWrapper.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  items?: unknown[]
+  height?: number
+  emptyText?: string
+}>()
+</script>
+
+<template>
+  <div :style="{ minHeight: height != null ? `${height}px` : undefined }">
+    <slot v-if="items == null || items.length > 0" :data="items" />
+    <div v-else class="flex items-center justify-center rounded-md bg-grey-100 p-8 text-grey-700">
+      <slot name="empty">{{ emptyText ?? 'No results' }}</slot>
+    </div>
+  </div>
+</template>
diff --git a/ui/prototype/src/components/common/TextView.vue b/ui/prototype/src/components/common/TextView.vue
new file mode 100644
index 0000000000..1cf3067afa
--- /dev/null
+++ b/ui/prototype/src/components/common/TextView.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{
+  text?: string
+  placeholder?: string
+}>()
+</script>
+
+<template>
+  <div class="overflow-y-auto whitespace-pre-wrap break-words text-base text-text">
+    {{ text && text.length > 0 ? text : placeholder }}
+  </div>
+</template>
diff --git a/ui/prototype/src/components/community/CenteredWrapper.vue b/ui/prototype/src/components/community/CenteredWrapper.vue
index 538e473e67..eb3d04f36e 100644
--- a/ui/prototype/src/components/community/CenteredWrapper.vue
+++ b/ui/prototype/src/components/community/CenteredWrapper.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-const wrapperClassMap = {
-  medium: 'mx-auto w-[calc(100%-40px)] max-w-[988px]',
-  large: 'mx-auto w-[calc(100%-200px)] max-w-[1240px]'
-} as const
+import { computed } from 'vue'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     size?: 'medium' | 'large'
   }>(),
@@ -12,10 +9,14 @@ withDefaults(
     size: 'medium'
   }
 )
+
+const widthClass = computed(() =>
+  props.size === 'large' ? 'w-[1240px] desktop-large:w-[1492px]' : 'w-[988px] desktop-large:w-[1240px]'
+)
 </script>
 
 <template>
-  <section :class="wrapperClassMap[size]">
+  <section class="relative mx-auto self-center" :class="widthClass">
     <slot />
   </section>
 </template>
diff --git a/ui/prototype/src/components/community/CommunityHeader.vue b/ui/prototype/src/components/community/CommunityHeader.vue
new file mode 100644
index 0000000000..e65bfcad8b
--- /dev/null
+++ b/ui/prototype/src/components/community/CommunityHeader.vue
@@ -0,0 +1,16 @@
+<template>
+  <section class="flex-none border-b border-grey-400 bg-grey-100">
+    <CenteredWrapper class="flex h-16 items-center justify-between gap-5">
+      <h1 class="min-w-0 flex-1 truncate text-xl text-title">
+        <slot />
+      </h1>
+      <label class="flex-none">
+        <slot name="options" />
+      </label>
+    </CenteredWrapper>
+  </section>
+</template>
+
+<script setup lang="ts">
+import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
+</script>
diff --git a/ui/prototype/src/components/community/CommunityNavbar.vue b/ui/prototype/src/components/community/CommunityNavbar.vue
index 25eb656dfb..277dd36536 100644
--- a/ui/prototype/src/components/community/CommunityNavbar.vue
+++ b/ui/prototype/src/components/community/CommunityNavbar.vue
@@ -1,47 +1,167 @@
 <script setup lang="ts">
-let searchValue = ''
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import logoSvg from '@/assets/navbar-logo.svg'
+import arrowMiniIcon from '@/assets/navbar-icons/arrow-mini.svg?raw'
+import folderIcon from '@/assets/navbar-icons/folder.svg?raw'
+import newProjectIcon from '@/assets/editor/navbar-icons/new.svg'
+import openProjectIcon from '@/assets/editor/navbar-icons/open.svg'
+import { usePrototypeSignIn } from '@/composables/prototypeSignIn'
+import UIButton from '@/components/ui/UIButton.vue'
+
+const router = useRouter()
+const searchValue = ref('')
+const projectMenuOpen = ref(false)
+const projectMenuRef = ref<HTMLElement>()
+const projectMenuOpenTimer = ref<number | null>(null)
+const projectMenuCloseTimer = ref<number | null>(null)
+const { signInModalOpen, openSignInModal, closeSignInModal } = usePrototypeSignIn()
 
 function submitSearch(event: Event) {
   event.preventDefault()
-  searchValue = searchValue.trim()
+  const keyword = searchValue.value.trim()
+  router.push(keyword === '' ? '/search' : `/search?q=${encodeURIComponent(keyword)}`)
+}
+
+function toggleProjectMenu() {
+  clearProjectMenuTimers()
+  projectMenuOpen.value = !projectMenuOpen.value
+}
+
+function closeProjectMenu() {
+  clearProjectMenuTimers()
+  projectMenuOpen.value = false
+}
+
+function clearProjectMenuTimer(timer: typeof projectMenuOpenTimer) {
+  if (timer.value == null) return
+  window.clearTimeout(timer.value)
+  timer.value = null
+}
+
+function clearProjectMenuTimers() {
+  clearProjectMenuTimer(projectMenuOpenTimer)
+  clearProjectMenuTimer(projectMenuCloseTimer)
+}
+
+function scheduleProjectMenuOpen() {
+  clearProjectMenuTimer(projectMenuCloseTimer)
+  clearProjectMenuTimer(projectMenuOpenTimer)
+  projectMenuOpenTimer.value = window.setTimeout(() => {
+    projectMenuOpen.value = true
+  }, 100)
+}
+
+function scheduleProjectMenuClose() {
+  clearProjectMenuTimer(projectMenuOpenTimer)
+  clearProjectMenuTimer(projectMenuCloseTimer)
+  projectMenuCloseTimer.value = window.setTimeout(() => {
+    projectMenuOpen.value = false
+  }, 100)
+}
+
+function createPrototypeProject() {
+  closeProjectMenu()
+  router.push('/editor/qingqing/niu-run')
+}
+
+function openPrototypeProject() {
+  closeProjectMenu()
+  router.push('/user/qingqing/projects')
 }
+
+function confirmPrototypeSignIn() {
+  closeSignInModal()
+}
+
+function handleDocumentClick(event: MouseEvent) {
+  const target = event.target
+  if (!(target instanceof Node)) return
+  if (!projectMenuRef.value?.contains(target)) closeProjectMenu()
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    closeProjectMenu()
+    closeSignInModal()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleDocumentClick)
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleDocumentClick)
+  document.removeEventListener('keydown', handleKeydown)
+  clearProjectMenuTimers()
+})
 </script>
 
 <template>
-  <nav class="sticky top-0 z-20 flex h-12.25 min-w-360 items-center justify-center border-b border-dividing-line-2 bg-grey-100" aria-label="Top navigation">
-    <div class="flex h-12 w-[calc(100%-200px)] max-w-310 items-center justify-between gap-3">
+  <nav class="sticky top-0 z-20 flex h-12 min-w-360 justify-center border-b border-grey-400 bg-grey-100 text-grey-1000" aria-label="Top navigation">
+    <div class="flex h-12 w-310 items-stretch justify-between gap-3 desktop-large:w-373">
       <div class="flex h-12 min-w-0 basis-[30%] items-center">
-        <a
+        <RouterLink
           class="relative mx-6 flex h-12 items-center after:absolute after:-right-6 after:block after:h-6 after:w-px after:bg-dividing-line-1 after:content-['']"
-          href="/"
+          to="/"
           aria-label="XBuilder home"
         >
-          <img class="block h-7.5 w-25.5" src="@ui-images/ai-canvas-logo.png" alt="XBuilder" />
-        </a>
+          <img class="block h-7.5 w-25.5" :src="logoSvg" alt="XBuilder" />
+        </RouterLink>
 
-        <button class="relative ml-6 flex h-12 items-center justify-center px-3 text-title hover:bg-grey-400" type="button" aria-label="Project menu">
-          <svg aria-hidden="true" viewBox="0 0 20 20" class="size-5 overflow-visible fill-current">
-            <path
-              d="M6.608 1.771c.397 0 .788.099 1.137.287.347.186.642.456.86.784l.674 1 .005.008c.086.13.204.238.342.311.138.074.294.111.45.109h6.591c.635 0 1.245.253 1.694.703.449.449.702 1.059.702 1.694V15c0 .635-.253 1.245-.702 1.694-.449.45-1.059.702-1.694.702H3.333c-.635 0-1.245-.252-1.694-.702C1.19 16.245.938 15.635.938 15V4.167c0-.635.252-1.245.701-1.694.449-.45 1.059-.702 1.694-.702h3.275ZM3.333 3.23a.935.935 0 0 0-.663.273.936.936 0 0 0-.274.664V15c0 .249.099.487.274.663a.935.935 0 0 0 .663.274h13.334a.935.935 0 0 0 .663-.274.934.934 0 0 0 .274-.663V6.667a.936.936 0 0 0-.274-.664.935.935 0 0 0-.663-.273h-6.584a2.386 2.386 0 0 1-1.142-.282 2.399 2.399 0 0 1-.871-.791l-.674-1-.005-.007a.946.946 0 0 0-.338-.308.939.939 0 0 0-.445-.112H3.333ZM10 7.604c.403 0 .729.326.73.729v1.771h1.77c.403 0 .729.326.73.729 0 .403-.327.73-.73.73h-1.77v1.77a.73.73 0 0 1-1.46 0v-1.77H7.5a.73.73 0 0 1 0-1.459h1.77V8.333c0-.403.327-.729.73-.729Z"
-            />
-          </svg>
-          <span class="ml-1.5 h-0 w-0 border-r-4 border-l-4 border-r-transparent border-l-transparent border-t-[5px] border-t-current" aria-hidden="true"></span>
-        </button>
-
-        <a class="relative flex h-12 items-center justify-center px-3 text-title no-underline hover:bg-grey-400" href="/explore" aria-label="Explore projects">
-          <svg aria-hidden="true" viewBox="0 0 24 24" class="size-5 overflow-visible fill-none stroke-current stroke-[2.5] [stroke-linecap:round] [stroke-linejoin:round]">
-            <rect x="4" y="4" width="16" height="16" rx="2.5" />
-            <path d="M12 8v8M8 12h8" />
-          </svg>
-        </a>
+        <div
+          ref="projectMenuRef"
+          class="relative flex h-12 items-center"
+          @mouseenter="scheduleProjectMenuOpen"
+          @mouseleave="scheduleProjectMenuClose"
+        >
+          <button
+            class="flex h-full cursor-pointer appearance-none items-center border-0 bg-transparent px-3 py-0 text-title hover:bg-grey-400 active:bg-grey-500 focus-visible:outline-none"
+            :class="{ 'bg-grey-400': projectMenuOpen }"
+            type="button"
+            aria-label="Project menu"
+            aria-haspopup="menu"
+            :aria-expanded="projectMenuOpen"
+            @click.stop="toggleProjectMenu"
+          >
+            <span
+              class="inline-flex size-5 items-center justify-center overflow-visible leading-none [&>svg]:block"
+              aria-hidden="true"
+              v-html="folderIcon"
+            ></span>
+            <span
+              class="ml-1 inline-flex size-2 items-center justify-center leading-none [&>svg]:block"
+              aria-hidden="true"
+              v-html="arrowMiniIcon"
+            ></span>
+          </button>
+          <div
+            v-if="projectMenuOpen"
+            class="absolute top-full left-0 z-30 mt-2 min-w-55 rounded-md bg-grey-100 p-2 shadow-sm"
+            role="menu"
+            @click.stop
+          >
+            <button class="flex min-h-10 w-full cursor-pointer items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-2 pr-10 text-left text-sm text-title hover:bg-grey-300 focus-visible:outline-none" type="button" role="menuitem" @click="createPrototypeProject">
+              <img class="size-6 shrink-0" :src="newProjectIcon" alt="" />
+              <span>New project...</span>
+            </button>
+            <button class="relative mt-3 flex min-h-10 w-full cursor-pointer items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-2 pr-10 text-left text-sm text-title before:absolute before:-top-1.75 before:left-0 before:w-full before:border-t before:border-dividing-line-2 before:content-[''] hover:bg-grey-300 focus-visible:outline-none" type="button" role="menuitem" @click="openPrototypeProject">
+              <img class="size-6 shrink-0" :src="openProjectIcon" alt="" />
+              <span>Open project...</span>
+            </button>
+          </div>
+        </div>
 
-        <a class="relative flex h-12 items-center justify-center px-3 text-title no-underline hover:bg-grey-400" href="/tutorials" aria-label="Tutorials">
+        <RouterLink class="relative flex h-12 items-center justify-center px-3 text-title no-underline hover:bg-grey-400" to="/tutorials" aria-label="Tutorials">
           <svg aria-hidden="true" viewBox="0 0 20 20" class="size-5 overflow-visible fill-current">
             <path
               d="M10.902 2.19a.73.73 0 1 1 0 1.459H4.884c-.49 0-.929.137-1.222.34-.29.202-.364.407-.364.534v8.619c.49-.247 1.051-.374 1.615-.374H16.84v-.564a.729.729 0 0 1 1.458 0v4.167c0 .456-.237.84-.56 1.087a1.817 1.817 0 0 1-1.106.361H4.913c-.761 0-1.519-.23-2.101-.676-.48-.368-.824-.875-.934-1.453a.73.73 0 0 1-.038-.229V4.523c0-.722.415-1.333.992-1.733.575-.398 1.315-.6 2.052-.6h6.018Zm-5.989 12.036c-.482 0-.917.148-1.214.376-.292.224-.401.481-.401.692l.005.08c.024.194.14.414.396.61.297.228.732.376 1.214.376h11.719a.42.42 0 0 0 .208-.053v-2.081H4.913Zm10.996-11.1c.13 0 .256.045.357.128a.56.56 0 0 1 .192.327l.369 1.948a.563.563 0 0 0 .393.393l1.948.369a.56.56 0 0 1 .327.191.56.56 0 0 1 0 .715.56.56 0 0 1-.327.193l-1.948.368a.563.563 0 0 0-.393.393l-.369 1.949a.56.56 0 0 1-.192.327.558.558 0 0 1-.714 0 .56.56 0 0 1-.166-.235l-.027-.092-.368-1.949a.563.563 0 0 0-.393-.393l-1.949-.368a.558.558 0 0 1-.327-.908.558.558 0 0 1 .327-.191l1.949-.369a.563.563 0 0 0 .393-.393l.368-1.948a.56.56 0 0 1 .193-.327.558.558 0 0 1 .357-.128Z"
             />
           </svg>
-        </a>
+        </RouterLink>
       </div>
 
       <div class="flex min-w-0 grow basis-[40%] items-center justify-center" aria-hidden="true"></div>
@@ -53,18 +173,61 @@ function submitSearch(event: Event) {
             <path d="m16.5 16.5 4 4" />
           </svg>
           <input
-            class="h-8 w-full rounded-md border border-grey-400 bg-grey-100 py-1.25 pr-3 pl-7.5 text-sm text-text outline-none placeholder:text-hint-1"
+            class="h-8 w-full rounded-md border border-grey-400 bg-grey-100 py-0 pr-3 pl-7.5 text-base leading-[22px] text-text outline-none placeholder:text-grey-700"
             type="search"
             placeholder="Search project"
-            :value="searchValue"
-            @input="searchValue = ($event.target as HTMLInputElement).value"
+            v-model="searchValue"
           />
         </form>
 
-        <button class="grid h-12 w-14 place-items-center px-3 text-title" type="button" aria-label="Assistant">
-          <span class="grid size-8 place-items-center text-[22px] leading-none" aria-hidden="true">🤖</span>
-        </button>
+        <div class="flex h-full items-center px-3 whitespace-nowrap">
+          <button
+            class="inline-flex h-8 cursor-pointer items-center justify-center rounded-md border border-transparent bg-primary-200 px-4 text-base leading-[22px] text-primary-500 no-underline transition-colors hover:bg-primary-100 active:bg-primary-300 focus-visible:border-primary-700 focus-visible:outline-none"
+            type="button"
+            @click="openSignInModal"
+          >
+            Sign in
+          </button>
+        </div>
       </div>
     </div>
   </nav>
+
+  <Teleport to="body">
+    <div
+      v-if="signInModalOpen"
+      class="fixed inset-0 z-1100 flex items-center justify-center bg-overlay-modal"
+      role="presentation"
+      @click="closeSignInModal"
+    >
+      <section
+        class="w-100 rounded-md border border-grey-300 bg-grey-100 p-6 shadow-lg"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="prototype-sign-in-title"
+        @click.stop
+      >
+        <header class="flex items-start justify-between gap-4">
+          <div>
+            <h2 id="prototype-sign-in-title" class="m-0 text-2xl font-medium text-title">Sign in to XBuilder</h2>
+            <p class="mt-2 text-sm leading-5 text-grey-700">Continue with the local prototype account.</p>
+          </div>
+          <button
+            class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-grey-800 hover:bg-grey-300 active:bg-grey-400 focus-visible:outline-none"
+            type="button"
+            aria-label="Close sign-in dialog"
+            @click="closeSignInModal"
+          >
+            <svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <path d="M12 4 4 12M4 4l8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+            </svg>
+          </button>
+        </header>
+        <div class="mt-6 flex justify-end gap-3">
+          <UIButton type="white" @click="closeSignInModal">Cancel</UIButton>
+          <UIButton type="primary" @click="confirmPrototypeSignIn">Continue as Qingqing</UIButton>
+        </div>
+      </section>
+    </div>
+  </Teleport>
 </template>
diff --git a/ui/prototype/src/components/community/ProjectsSection.vue b/ui/prototype/src/components/community/ProjectsSection.vue
new file mode 100644
index 0000000000..4e7b1e5de8
--- /dev/null
+++ b/ui/prototype/src/components/community/ProjectsSection.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Project } from '@/data/mock'
+import ProjectCard from '@/components/project/ProjectCard.vue'
+
+const props = defineProps<{
+  title: string
+  linkText?: string
+  linkTo?: string
+  projects: Project[]
+  context?: 'home' | 'user' | 'project'
+  cardContext?: 'public' | 'mine'
+}>()
+
+const gridClass = computed(() => {
+  return props.context === 'project'
+    ? 'grid-cols-5 desktop-large:grid-cols-6'
+    : 'grid-cols-4 desktop-large:grid-cols-5'
+})
+</script>
+
+<template>
+  <section>
+    <header v-if="title || linkTo" class="flex h-13 items-center justify-between">
+      <h2 class="m-0 text-2xl font-normal text-title">{{ title }}</h2>
+      <RouterLink
+        v-if="linkTo"
+        class="link-primary flex items-center text-lg"
+        :to="linkTo"
+      >
+        {{ linkText ?? 'View more' }}
+        <svg class="ml-2 size-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+          <path d="M13.9844 6.48491C14.2692 6.20044 14.731 6.20025 15.0156 6.48491L18.0156 9.48491C18.0418 9.51109 18.0646 9.53999 18.0859 9.56889C18.1335 9.63341 18.1719 9.70543 18.1963 9.78374L18.2158 9.86186C18.2339 9.95531 18.2326 10.0517 18.2139 10.1451C18.1911 10.2585 18.1411 10.362 18.0723 10.4498C18.0545 10.4724 18.0365 10.4953 18.0156 10.5162L15.0156 13.5162C14.731 13.8004 14.269 13.8004 13.9844 13.5162C13.7 13.2314 13.6998 12.7696 13.9844 12.4849L15.7383 10.73H2.5C2.09737 10.73 1.77063 10.4031 1.77051 10.0005C1.77071 9.59799 2.09742 9.27202 2.5 9.27202H15.7402L13.9844 7.51616C13.6996 7.23142 13.6997 6.76967 13.9844 6.48491Z" fill="currentColor" />
+        </svg>
+      </RouterLink>
+    </header>
+
+    <ul class="relative mt-2 mb-8 grid list-none gap-5 p-0" :class="gridClass">
+      <ProjectCard
+        v-for="project in projects"
+        :key="project.id"
+        :project="project"
+        :context="cardContext"
+      />
+    </ul>
+  </section>
+</template>
diff --git a/ui/prototype/src/components/community/home/GuestBanner.vue b/ui/prototype/src/components/community/home/GuestBanner.vue
new file mode 100644
index 0000000000..cd8a030e3f
--- /dev/null
+++ b/ui/prototype/src/components/community/home/GuestBanner.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import guestBannerBg from '@/assets/community/guest-banner-bg.png'
+import { usePrototypeSignIn } from '@/composables/prototypeSignIn'
+import UIButton from '@/components/ui/UIButton.vue'
+import UICard from '@/components/ui/UICard.vue'
+
+const { openSignInModal } = usePrototypeSignIn()
+</script>
+
+<template>
+  <UICard class="p-3">
+    <div
+      class="relative rounded-md bg-[#f0faff] bg-no-repeat px-13 pt-12 pb-12.5 text-[#073156]"
+      :style="{
+        backgroundImage: `url(${guestBannerBg})`,
+        backgroundSize: '270px 190px',
+        backgroundPosition: 'center right 54px'
+      }"
+    >
+      <h1 class="m-0 text-[24px]/[1.5] font-medium">Join XBuilder</h1>
+      <p class="mt-2 text-sm">Build and share your projects</p>
+      <UIButton class="mt-7" type="primary" @click="openSignInModal">Join now</UIButton>
+    </div>
+  </UICard>
+</template>
diff --git a/ui/prototype/src/components/community/user/UserContent.vue b/ui/prototype/src/components/community/user/UserContent.vue
new file mode 100644
index 0000000000..2f42cc268b
--- /dev/null
+++ b/ui/prototype/src/components/community/user/UserContent.vue
@@ -0,0 +1,13 @@
+<template>
+  <section class="rounded-md border border-grey-300 bg-grey-100 p-5 shadow-sm">
+    <header class="mb-5 flex min-h-9 items-center justify-between gap-4">
+      <h2 class="m-0 text-2xl font-normal text-title">
+        <slot name="title" />
+      </h2>
+      <div class="flex items-center gap-3 text-sm text-grey-700">
+        <slot name="extra" />
+      </div>
+    </header>
+    <slot />
+  </section>
+</template>
diff --git a/ui/prototype/src/components/community/user/UserHeader.vue b/ui/prototype/src/components/community/user/UserHeader.vue
new file mode 100644
index 0000000000..f7980ccbb9
--- /dev/null
+++ b/ui/prototype/src/components/community/user/UserHeader.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { UserProfile } from '@/data/mock'
+
+defineProps<{
+  user: UserProfile
+}>()
+</script>
+
+<template>
+  <section class="overflow-hidden rounded-md border border-grey-300 bg-grey-100 shadow-sm">
+    <div class="h-36 bg-grey-300">
+      <img class="size-full object-cover" :src="user.cover" alt="" />
+    </div>
+    <div class="flex items-end gap-5 px-6 pb-6">
+      <img class="-mt-10 size-24 rounded-full border-4 border-grey-100 object-cover shadow-sm" :src="user.avatar" alt="" />
+      <div class="min-w-0 flex-1 pb-1">
+        <h1 class="m-0 truncate text-2xl font-medium text-title">{{ user.displayName }}</h1>
+        <p class="mt-1 text-sm text-hint-1">@{{ user.username }} · {{ user.joinedAt }}</p>
+        <p class="mt-3 max-w-180 text-sm leading-6 text-text">{{ user.bio }}</p>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/ui/prototype/src/components/community/user/UserList.vue b/ui/prototype/src/components/community/user/UserList.vue
new file mode 100644
index 0000000000..ae936a1cd0
--- /dev/null
+++ b/ui/prototype/src/components/community/user/UserList.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { UserProfile } from '@/data/mock'
+import { getUserPageRoute } from '@/router'
+
+defineProps<{
+  users: UserProfile[]
+}>()
+</script>
+
+<template>
+  <ul class="m-0 grid list-none grid-cols-2 gap-4 p-0">
+    <li v-for="user in users" :key="user.username" class="rounded-md border border-grey-300 bg-grey-100 p-4">
+      <RouterLink class="flex items-center gap-3 text-text no-underline" :to="getUserPageRoute(user.username)">
+        <img class="size-12 rounded-full object-cover" :src="user.avatar" alt="" />
+        <span class="min-w-0">
+          <span class="block truncate text-base text-title">{{ user.displayName }}</span>
+          <span class="block truncate text-sm text-hint-1">@{{ user.username }}</span>
+        </span>
+      </RouterLink>
+      <p class="mt-3 line-clamp-2 text-sm leading-5 text-grey-700">{{ user.bio }}</p>
+    </li>
+  </ul>
+</template>
diff --git a/ui/prototype/src/components/community/user/UserSidebar.vue b/ui/prototype/src/components/community/user/UserSidebar.vue
new file mode 100644
index 0000000000..b454259876
--- /dev/null
+++ b/ui/prototype/src/components/community/user/UserSidebar.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { getUserPageRoute, type UserTab } from '@/router'
+
+const props = defineProps<{
+  username: string
+}>()
+
+const tabs: Array<{ key: UserTab; label: string; icon: 'overview' | 'projects' | 'likes' | 'following' | 'followers' }> = [
+  { key: 'overview', label: 'Overview', icon: 'overview' },
+  { key: 'projects', label: 'Projects', icon: 'projects' },
+  { key: 'likes', label: 'Likes', icon: 'likes' },
+  { key: 'following', label: 'Following', icon: 'following' },
+  { key: 'followers', label: 'Followers', icon: 'followers' }
+]
+</script>
+
+<template>
+  <nav class="flex w-53 flex-col gap-1 rounded-md border border-grey-300 bg-grey-100 p-3 shadow-sm desktop-large:w-54" aria-label="User sections">
+    <RouterLink
+      v-for="tab in tabs"
+      :key="tab.key"
+      class="group relative flex items-center rounded-md p-3 text-text no-underline transition-all duration-100 hover:bg-grey-200 [&.active]:bg-primary-100 [&.active]:text-primary-main"
+      exact-active-class="active"
+      :to="getUserPageRoute(props.username, tab.key)"
+    >
+      <i class="absolute top-3.5 left-3 size-4.25 rounded-full bg-grey-500 transition-all duration-100 group-[.active]:bg-primary-300"></i>
+      <span class="relative flex flex-[1_1_0] items-center gap-2 pl-6.5 text-sm">
+        <svg v-if="tab.icon === 'overview'" aria-hidden="true" viewBox="0 0 20 20" class="size-5 flex-none fill-current text-grey-800 group-[.active]:text-primary-main">
+          <path d="M1.5 3.8A.8.8 0 0 1 2.3 3h4.52A3.98 3.98 0 0 1 10 4.6 3.98 3.98 0 0 1 13.2 3h4.5a.8.8 0 0 1 .8.8v11.15a.8.8 0 0 1-.8.8h-4.79a3.2 3.2 0 0 0-2.35.7l-.66.66a.8.8 0 0 1-1.13 0l-.66-.66a3.2 3.2 0 0 0-2.35-.7H2.3a.8.8 0 0 1-.8-.8V3.8Zm7.7 10.96.01-7.78a2.39 2.39 0 0 0-2.4-2.39H3.1v9.57h3.99c.75 0 1.48.21 2.12.6Zm1.6-7.78-.01 7.78a3.98 3.98 0 0 1 2.12-.6h4V4.59h-3.72a2.39 2.39 0 0 0-2.39 2.39Z" />
+        </svg>
+        <svg v-else-if="tab.icon === 'projects'" aria-hidden="true" viewBox="0 0 20 20" class="size-5 flex-none fill-none stroke-current text-grey-800 group-[.active]:text-primary-main">
+          <path d="M7.12 2.93H4.01A1.71 1.71 0 0 0 2.3 4.64v9.93c0 .94.77 1.71 1.71 1.71h11.98c.94 0 1.71-.77 1.71-1.71V8.4c0-.95-.77-1.71-1.71-1.71H12a.78.78 0 0 1-.51-.2L7.63 3.12a.78.78 0 0 0-.51-.19Z" stroke-width="1.45" />
+          <path d="M8.86 4.18h7.13c.94 0 1.71.77 1.71 1.72v3.29" stroke-width="1.45" />
+        </svg>
+        <svg v-else-if="tab.icon === 'likes'" aria-hidden="true" viewBox="0 0 20 20" class="size-5 flex-none fill-current text-grey-800 group-[.active]:text-primary-main">
+          <path d="M16.03 4.83a3.99 3.99 0 0 0-5.5-.21.8.8 0 0 1-1.05 0 3.99 3.99 0 0 0-5.5.21 3.73 3.73 0 0 0-.21 5.27l.06.07L10 16.17l6.18-6 .06-.07a3.73 3.73 0 0 0-.21-5.27Zm1.51 6.21a5.35 5.35 0 0 0-.4-7.36A5.54 5.54 0 0 0 10 3.02a5.54 5.54 0 0 0-7.14.66 5.35 5.35 0 0 0-.4 7.36c.04.06.08.12.14.17l6.84 6.64c.31.3.8.3 1.12 0l6.84-6.64c.06-.05.1-.11.14-.17Z" />
+        </svg>
+        <svg v-else-if="tab.icon === 'following'" aria-hidden="true" viewBox="0 0 20 20" class="size-5 flex-none fill-current text-grey-800 group-[.active]:text-primary-main">
+          <path d="M8.34 8.96a3.54 3.54 0 1 1 0-7.09 3.54 3.54 0 0 1 0 7.09Zm0-5.83a2.29 2.29 0 1 0 0 4.58 2.29 2.29 0 0 0 0-4.58ZM9.17 18.13H5c-2.02 0-3.13-1.1-3.13-3.11 0-2.22 1.26-4.81 4.8-4.81H10c.71 0 1.34.1 1.89.3a.63.63 0 0 1-.44 1.18 4.1 4.1 0 0 0-1.45-.23H6.67c-3.29 0-3.54 2.72-3.54 3.56 0 1.3.56 1.86 1.87 1.86h4.17a.63.63 0 0 1 0 1.25Zm7.63.77c-.16 0-.32-.04-.47-.12L15 18.1l-1.33.68a1.02 1.02 0 0 1-1.48-1.08l.26-1.42-1.1-1.05a1 1 0 0 1 .55-1.69l1.53-.22.66-1.3a1.02 1.02 0 0 1 1.82 0l.66 1.3 1.53.22a1 1 0 0 1 .55 1.7l-1.1 1.04.25 1.43a1.02 1.02 0 0 1-1 1.19Z" />
+        </svg>
+        <svg v-else aria-hidden="true" viewBox="0 0 20 20" class="size-5 flex-none fill-current text-grey-800 group-[.active]:text-primary-main">
+          <path d="M7.51 8.96a3.54 3.54 0 1 1 0-7.09 3.54 3.54 0 0 1 0 7.09Zm0-5.83a2.29 2.29 0 1 0 0 4.58 2.29 2.29 0 0 0 0-4.58Zm3.32 15H4.17c-2.02 0-3.13-1.1-3.13-3.11 0-2.22 1.26-4.81 4.79-4.81h3.34c3.54 0 4.79 2.59 4.79 4.81 0 2-1.11 3.1-3.13 3.1Zm-5-6.67c-3.28 0-3.54 2.72-3.54 3.56 0 1.3.56 1.86 1.88 1.86h6.66c1.32 0 1.88-.56 1.88-1.86 0-.84-.26-3.56-3.54-3.56H5.83Zm7.97-2.13c-.76 0-1.47-.29-2-.81a.63.63 0 0 1 .87-.9c.3.3.7.45 1.13.45a1.62 1.62 0 0 0 1.64-1.64c0-.9-.74-1.64-1.64-1.64-.26 0-.49.05-.69.16a.63.63 0 0 1-.57-1.11c.38-.2.8-.3 1.26-.3a2.9 2.9 0 0 1 0 5.79Zm2.58 7.13h-.56a.63.63 0 0 1 0-1.25h.56c.96 0 1.33-.37 1.33-1.31 0-.62-.2-2.63-2.62-2.63h-1.26a.63.63 0 0 1 0-1.25h1.26c2.86 0 3.87 2.09 3.87 3.88 0 1.63-.94 2.56-2.58 2.56Z" />
+        </svg>
+        <span>{{ tab.label }}</span>
+      </span>
+      <svg aria-hidden="true" viewBox="0 0 20 20" class="size-3 flex-none rotate-90 fill-current text-grey-800">
+        <path d="M10 13.2 4.8 8l1.13-1.13L10 10.93l4.07-4.06L15.2 8 10 13.2Z" />
+      </svg>
+    </RouterLink>
+  </nav>
+</template>
diff --git a/ui/prototype/src/components/copilot/Copilot.vue b/ui/prototype/src/components/copilot/Copilot.vue
new file mode 100644
index 0000000000..fafdd86e93
--- /dev/null
+++ b/ui/prototype/src/components/copilot/Copilot.vue
@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+
+type ChatMessage = {
+  role: 'user' | 'copilot'
+  content: string
+}
+
+const suggestedQuestions = [
+  'What can XBuilder do?',
+  'How to create a new project?',
+  'Please describe the functions of this page.'
+]
+
+const isOpen = ref(false)
+const input = ref('')
+const messages = ref<ChatMessage[]>([])
+const panelRef = ref<HTMLElement>()
+const inputRef = ref<HTMLTextAreaElement>()
+const outputRef = ref<HTMLDivElement>()
+const panelPosition = ref({ right: 16, bottom: 16 })
+const dragStart = ref<{
+  pointerX: number
+  pointerY: number
+  right: number
+  bottom: number
+} | null>(null)
+
+let resizeTimer: ReturnType<typeof setTimeout> | undefined
+
+const hasMessages = computed(() => messages.value.length > 0)
+const panelStyle = computed(() => ({
+  right: isOpen.value ? `${panelPosition.value.right}px` : '-340px',
+  bottom: isOpen.value ? `${panelPosition.value.bottom}px` : '20px'
+}))
+const panelSide = computed<'left' | 'right'>(() => {
+  const panelWidth = panelRef.value?.offsetWidth ?? 340
+  return panelPosition.value.right > (window.innerWidth - panelWidth) / 2 ? 'left' : 'right'
+})
+
+function getMockAnswer(question: string) {
+  if (question.toLowerCase().includes('project')) {
+    return 'You can create, remix, and preview local prototype projects here. This preview uses mock data and does not call the server.'
+  }
+  if (question.toLowerCase().includes('page')) {
+    return 'This page mirrors the Builder community experience with local project cards, navigation, search, user pages, and project detail routes.'
+  }
+  return 'XBuilder helps learners build games with sprites, backdrops, code, tutorials, sharing, and remix workflows.'
+}
+
+async function sendMessage(message: string) {
+  const content = message.trim()
+  if (content === '') return
+  messages.value.push({ role: 'user', content })
+  messages.value.push({ role: 'copilot', content: getMockAnswer(content) })
+  input.value = ''
+  await nextTick()
+  outputRef.value?.scrollTo({ top: outputRef.value.scrollHeight })
+}
+
+function handleSubmit() {
+  sendMessage(input.value)
+}
+
+function focusInput() {
+  inputRef.value?.focus()
+}
+
+function clampPanelPosition(position = panelPosition.value) {
+  const panel = panelRef.value
+  const panelWidth = panel?.offsetWidth ?? 340
+  const horizontalBuffer = 10
+  const verticalBuffer = 10
+  return {
+    right: Math.min(
+      window.innerWidth - horizontalBuffer - 48,
+      Math.max(position.right, horizontalBuffer - panelWidth + 48)
+    ),
+    bottom: Math.min(window.innerHeight - verticalBuffer - 48, Math.max(position.bottom, verticalBuffer))
+  }
+}
+
+function persistPanelPosition() {
+  window.localStorage.setItem('xbuilder-prototype-copilot-panel-position', JSON.stringify(panelPosition.value))
+}
+
+function handleDragStart(event: PointerEvent) {
+  const target = event.currentTarget
+  if (!(target instanceof HTMLElement)) return
+  target.setPointerCapture(event.pointerId)
+  dragStart.value = {
+    pointerX: event.clientX,
+    pointerY: event.clientY,
+    right: panelPosition.value.right,
+    bottom: panelPosition.value.bottom
+  }
+}
+
+function handleDragMove(event: PointerEvent) {
+  const start = dragStart.value
+  if (start == null) return
+  panelPosition.value = clampPanelPosition({
+    right: start.right - (event.clientX - start.pointerX),
+    bottom: start.bottom - (event.clientY - start.pointerY)
+  })
+}
+
+function handleDragEnd(event: PointerEvent) {
+  const target = event.currentTarget
+  if (target instanceof HTMLElement && target.hasPointerCapture(event.pointerId)) {
+    target.releasePointerCapture(event.pointerId)
+  }
+  if (dragStart.value != null) persistPanelPosition()
+  dragStart.value = null
+}
+
+function handleResize() {
+  panelPosition.value = clampPanelPosition()
+  clearTimeout(resizeTimer)
+  resizeTimer = setTimeout(persistPanelPosition, 100)
+}
+
+onMounted(() => {
+  const rawPosition = window.localStorage.getItem('xbuilder-prototype-copilot-panel-position')
+  if (rawPosition != null) {
+    try {
+      const parsed = JSON.parse(rawPosition) as { right?: number; bottom?: number }
+      if (typeof parsed.right === 'number' && typeof parsed.bottom === 'number') {
+        panelPosition.value = clampPanelPosition({ right: parsed.right, bottom: parsed.bottom })
+      }
+    } catch {
+      window.localStorage.removeItem('xbuilder-prototype-copilot-panel-position')
+    }
+  }
+  window.addEventListener('resize', handleResize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+  clearTimeout(resizeTimer)
+})
+</script>
+
+<template>
+  <aside
+    ref="panelRef"
+    class="copilot-panel fixed z-[9999] flex w-[340px] flex-col items-stretch justify-center gap-2"
+    :class="{ open: isOpen, closed: !isOpen }"
+    :style="panelStyle"
+    aria-label="Copilot"
+  >
+    <div
+      class="body relative bg-[linear-gradient(90deg,#72bbff_0%,#c390ff_100%)] p-px"
+      :class="isOpen ? 'rounded-lg shadow-lg' : 'rounded-l-none rounded-r-lg shadow-none'"
+    >
+      <button
+        v-if="!isOpen"
+        class="copilot-trigger right visible group pointer-events-auto absolute left-px top-1/2 h-[50px] w-fit -translate-x-full -translate-y-1/2 cursor-pointer rounded-l-[16px] rounded-r-none border-0 bg-[linear-gradient(90deg,#c390ff_0%,#72bbff_100%)] p-px pr-0 opacity-100 shadow-lg transition-[transform,opacity] duration-[400ms] ease-in"
+        type="button"
+        aria-label="Open Copilot"
+        @click="isOpen = true"
+      >
+        <span class="copilot-trigger-content flex h-full items-center rounded-l-[16px] rounded-r-none bg-grey-100 py-0 pl-[5px] pr-2.5">
+          <svg class="copilot-logo block size-10 flex-none" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="40" height="40" rx="12" fill="url(#paint0_linear_prototype_copilot_trigger)" />
+            <path d="M27.1326 16.4061C27.6217 17.2175 28.4776 17.7029 29.4224 17.7029C30.6229 17.714 31.7456 16.8507 32.005 15.6613C32.1791 14.9277 32.0383 14.1644 31.6381 13.5346C27.6773 6.67626 17.5584 5.32387 11.9784 10.9817C10.9521 11.9784 10.1369 13.0862 9.51075 14.2867H9.50704L9.43294 14.4386C9.4033 14.4979 9.36995 14.5572 9.34402 14.6165L9.32179 14.6721L9.26991 14.7795C8.6215 16.143 8.21023 17.5436 8.08055 19.1479C7.99162 20.215 8.0472 21.2784 8.23246 22.301C8.43254 23.3607 8.75119 24.3648 9.17358 25.2985L9.32179 25.6098H9.3292C11.8858 30.7526 17.8585 33.6612 23.4867 32.3088C26.6324 31.727 32.3829 27.9589 31.916 24.4019C31.4121 22.038 28.0923 21.6378 26.9511 23.7609C26.173 24.9984 25.1022 25.8914 23.8721 26.5398C22.8939 27.014 21.812 27.2771 20.693 27.2771C20.2743 27.2771 19.8482 27.2364 19.437 27.1623C19.3517 27.1474 19.2628 27.1326 19.1887 27.1326C19.1183 27.1326 19.0664 27.1474 19.0071 27.1808C18.4588 27.492 18.355 27.5476 17.8104 27.8292L17.2138 28.1552C16.5951 28.5221 15.7318 28.9815 15.3538 28.1404V28.1293C15.2983 27.8996 15.3575 27.681 15.3872 27.5735C15.4316 27.4142 15.4761 27.2512 15.5243 27.0696C15.628 26.6806 15.7355 26.273 15.8837 25.8766C15.9541 25.695 15.9689 25.6394 15.7355 25.4208C13.831 23.6275 13.0788 21.397 13.5012 18.8071C13.7569 17.2361 14.4868 15.88 15.6725 14.7721C17.1212 13.4234 18.7885 12.7417 20.6152 12.7417C21.0932 12.7417 21.5934 12.7898 22.0973 12.8862C22.1825 12.901 22.2751 12.9195 22.3603 12.938H22.3826C24.4056 13.3827 26.0025 14.5461 27.1252 16.4024L27.1326 16.4061Z" fill="white" />
+            <defs>
+              <linearGradient id="paint0_linear_prototype_copilot_trigger" x1="20" y1="0" x2="20" y2="40" gradientUnits="userSpaceOnUse">
+                <stop class="[stop-color:#9a77ff] group-hover:[stop-color:#ae92ff]" />
+                <stop offset="1" class="[stop-color:#735ffa] group-hover:[stop-color:#9181fb]" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </span>
+      </button>
+      <div v-if="isOpen" class="body-wrapper relative z-[2] overflow-hidden rounded-lg">
+        <div
+          class="dragger absolute z-[1] flex h-3.5 w-full cursor-move touch-none items-center justify-center border-0 bg-grey-100 transition-colors duration-200 hover:bg-grey-300"
+          role="button"
+          tabindex="0"
+          aria-label="Drag Copilot panel"
+          @pointerdown.prevent="handleDragStart"
+          @pointermove.prevent="handleDragMove"
+          @pointerup.prevent="handleDragEnd"
+          @pointercancel.prevent="handleDragEnd"
+        >
+          <svg width="12" height="6" viewBox="0 0 12 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="1.5" cy="1" r="1" fill="#A7B1BB" />
+            <circle cx="6" cy="1" r="1" fill="#A7B1BB" />
+            <circle cx="10.5" cy="1" r="1" fill="#A7B1BB" />
+            <circle cx="1.5" cy="4.5" r="1" fill="#A7B1BB" />
+            <circle cx="6" cy="4.5" r="1" fill="#A7B1BB" />
+            <circle cx="10.5" cy="4.5" r="1" fill="#A7B1BB" />
+          </svg>
+        </div>
+        <div ref="outputRef" class="output mt-3.5 max-h-[300px] overflow-y-auto bg-grey-100 px-4 pb-4 pt-3 text-sm [scrollbar-width:thin]">
+          <template v-if="hasMessages">
+            <div
+              v-for="(message, index) in messages"
+              :key="index"
+              class="message max-w-[88%] whitespace-pre-wrap rounded-md px-2.5 py-2 leading-5 not-first:mt-2"
+              :class="message.role === 'user'
+                ? 'ml-auto bg-primary-100 text-grey-1000'
+                : 'mr-auto border border-grey-400 bg-grey-100 text-grey-900'"
+            >
+              {{ message.content }}
+            </div>
+          </template>
+          <template v-else>
+            <div class="px-2 pb-2">
+              <div class="text-2xl leading-7 text-grey-1000">Hi, friend</div>
+              <div class="mt-1 text-grey-700">I can help you with XBuilder, just ask!</div>
+              <div class="mt-6 flex w-full flex-col gap-2">
+                <button
+                  v-for="question in suggestedQuestions"
+                  :key="question"
+                  class="w-full rounded-md border border-grey-400 bg-grey-100 px-3 py-2.5 text-left text-sm leading-5 text-grey-900 transition duration-300 hover:bg-grey-300 active:bg-grey-400"
+                  type="button"
+                  @click="sendMessage(question)"
+                >
+                  {{ question }}
+                </button>
+              </div>
+            </div>
+          </template>
+        </div>
+        <div class="h-px bg-[linear-gradient(90deg,#72bbff_0%,#c390ff_100%)]"></div>
+        <div class="h-[62px] overflow-hidden" @click="focusInput">
+          <div class="flex h-full items-center gap-2.5 bg-grey-100 px-4 py-2">
+            <div class="relative min-h-5 min-w-0 flex-1 text-sm leading-5">
+              <textarea
+                ref="inputRef"
+                v-model="input"
+                rows="1"
+                class="absolute h-full w-full resize-none border-0 bg-transparent p-0 font-inherit text-title outline-none [scrollbar-width:thin] placeholder:text-hint-2"
+                placeholder="Input your problem here"
+                @keypress.enter.prevent="handleSubmit"
+              ></textarea>
+            </div>
+            <button
+              class="flex size-8 flex-none items-center justify-center rounded-full border-0 p-1.5 text-grey-100 transition-colors duration-200"
+              :class="input.trim().length === 0
+                ? 'bg-grey-400 text-grey-800'
+                : 'bg-[linear-gradient(180deg,#9a77ff_0%,#735ffa_100%)]'"
+              type="button"
+              aria-label="Send message"
+              @click="handleSubmit"
+            >
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M3.78521 8.70313C3.46506 8.38222 3.46459 7.86163 3.78521 7.54102L9.419 1.9082C9.73967 1.58758 10.2602 1.5879 10.5811 1.9082L16.2149 7.54102C16.5356 7.86174 16.5354 8.38225 16.2149 8.70313C15.894 9.02393 15.3736 9.02396 15.0528 8.70313L10.8213 4.47168L10.8213 17.5117C10.8213 17.9654 10.4537 18.3338 10.0001 18.334C9.5466 18.3336 9.17876 17.9652 9.17876 17.5117L9.17876 4.47266L4.94732 8.70313C4.62647 9.02397 4.10605 9.02397 3.78521 8.70313Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="isOpen" class="flex justify-center">
+      <div class="z-[1] flex h-9 items-center rounded-full border border-grey-400 bg-grey-100 px-[3px] shadow-control">
+        <button
+          class="fold flex size-7 items-center justify-center rounded-full border-0 bg-transparent p-0 text-grey-800 transition-colors duration-200 hover:bg-primary-200 hover:text-primary-500"
+          :class="{ 'rotate-180': isOpen && panelSide === 'left' }"
+          type="button"
+          :aria-label="isOpen ? 'Close Copilot' : 'Open Copilot'"
+          @click="isOpen = !isOpen"
+        >
+          <svg v-if="isOpen" class="stroke-current" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path d="M12 12.6667V3.33333" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M3.33301 3.33334L8.66634 8L3.33301 12.6667" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </aside>
+</template>
diff --git a/ui/prototype/src/components/editor/PublishProjectModal.vue b/ui/prototype/src/components/editor/PublishProjectModal.vue
new file mode 100644
index 0000000000..917f1f433b
--- /dev/null
+++ b/ui/prototype/src/components/editor/PublishProjectModal.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import UIButton from '@/components/ui/UIButton.vue'
+import closeIcon from '@/assets/editor/ui-icons/close.svg?raw'
+
+const props = defineProps<{
+  projectDisplayName: string
+  thumbnail: string
+  initialProjectDescription: string
+  initialProjectInstructions: string
+  submitting: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  publish: []
+}>()
+
+const releaseDescription = ref('Adjusted movement timing and refreshed the local thumbnail.')
+const projectDescription = ref(props.initialProjectDescription)
+const projectInstructions = ref(props.initialProjectInstructions)
+
+function requestClose() {
+  if (props.submitting) return
+  emit('close')
+}
+
+function requestPublish() {
+  if (releaseDescription.value.trim() === '' || props.submitting) return
+  emit('publish')
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="prototype-modal-backdrop" role="presentation" @click.self="requestClose">
+      <section class="prototype-modal publish-modal" role="dialog" aria-modal="true" aria-labelledby="publish-project-title">
+        <header class="publish-modal-header">
+          <h2 id="publish-project-title">Publish {{ projectDisplayName }}</h2>
+          <button type="button" aria-label="Close" @click="requestClose" v-html="closeIcon"></button>
+        </header>
+        <div class="publish-modal-body">
+          <p>Published projects will be visible to all XBuilder users.</p>
+          <div class="publish-preview">
+            <img :src="thumbnail" :alt="projectDisplayName" />
+          </div>
+          <form class="prototype-form publish-form" @submit.prevent="requestPublish">
+            <label class="prototype-field">
+              <span>Release description</span>
+              <textarea
+                v-model="releaseDescription"
+                aria-label="Release description"
+                placeholder="What is new in this release?"
+                required
+              ></textarea>
+            </label>
+            <label class="prototype-field">
+              <span>Project description</span>
+              <textarea
+                v-model="projectDescription"
+                aria-label="Project description"
+                placeholder="What is this project about? How did you make it?"
+              ></textarea>
+            </label>
+            <label class="prototype-field">
+              <span>Play instructions</span>
+              <textarea
+                v-model="projectInstructions"
+                aria-label="Play instructions"
+                placeholder="Tell others how to play in your project"
+              ></textarea>
+            </label>
+            <footer class="prototype-modal-actions">
+              <UIButton type="neutral" size="medium" :disabled="submitting" @click="requestClose">Cancel</UIButton>
+              <UIButton
+                type="primary"
+                size="medium"
+                :loading="submitting"
+                :disabled="releaseDescription.trim() === ''"
+                @click="requestPublish"
+              >
+                Publish
+              </UIButton>
+            </footer>
+          </form>
+        </div>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.prototype-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 120;
+  display: grid;
+  place-items: center;
+  background: rgb(31 41 55 / 36%);
+  padding: 24px;
+}
+
+.prototype-modal {
+  border-radius: var(--ui-border-radius-lg);
+  background: var(--ui-color-grey-100);
+  box-shadow: var(--ui-box-shadow-lg);
+}
+
+.prototype-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-top: 40px;
+}
+
+.prototype-form {
+  display: flex;
+  flex-direction: column;
+}
+
+.prototype-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  color: var(--ui-color-grey-1000);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.prototype-field > span {
+  color: var(--ui-color-grey-800);
+}
+
+.prototype-field textarea {
+  min-height: 108px;
+  border: 0;
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-300);
+  box-shadow: inset 0 0 0 1px var(--ui-color-grey-300);
+  padding: 8px 12px;
+  color: var(--ui-color-grey-1000);
+  font: inherit;
+  outline: none;
+  resize: vertical;
+}
+
+.prototype-field textarea:focus {
+  background: var(--ui-color-grey-100);
+  box-shadow: inset 0 0 0 1px var(--ui-color-primary-main);
+}
+
+.publish-modal {
+  width: 560px;
+  max-height: min(760px, calc(100vh - 48px));
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0;
+}
+
+.publish-modal-header {
+  flex: 0 0 56px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--ui-color-grey-400);
+  padding: 0 24px;
+}
+
+.publish-modal-header h2 {
+  flex: 1;
+  margin: 0;
+  color: var(--ui-color-grey-1000);
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 28px;
+}
+
+.publish-modal-header button {
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--ui-border-radius-md);
+  background: transparent;
+  color: var(--ui-color-grey-800);
+  padding: 0;
+  cursor: pointer;
+}
+
+.publish-modal-header button:hover {
+  background: var(--ui-color-grey-300);
+  color: var(--ui-color-grey-1000);
+}
+
+.publish-modal-header button :deep(svg),
+.publish-modal-header button svg {
+  width: 20px;
+  height: 20px;
+}
+
+.publish-modal-body {
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 20px 24px 24px;
+}
+
+.publish-preview {
+  height: 224px;
+  overflow: hidden;
+  margin: 24px 0;
+  border-radius: var(--ui-border-radius-sm);
+  background: var(--ui-color-grey-300);
+}
+
+.publish-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.publish-form {
+  gap: 16px;
+}
+</style>
diff --git a/ui/prototype/src/components/editor/SpriteGeneratorModal.vue b/ui/prototype/src/components/editor/SpriteGeneratorModal.vue
new file mode 100644
index 0000000000..424e57ccfa
--- /dev/null
+++ b/ui/prototype/src/components/editor/SpriteGeneratorModal.vue
@@ -0,0 +1,790 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import UIButton from '@/components/ui/UIButton.vue'
+import animationIcon from '@/assets/editor/sprite-generator/animation.svg?raw'
+import closeIcon from '@/assets/editor/ui-icons/close.svg?raw'
+import costumeIcon from '@/assets/editor/sprite-generator/costume.svg?raw'
+import editIcon from '@/assets/editor/ui-icons/edit.svg?raw'
+import moreIcon from '@/assets/editor/ui-icons/more.svg?raw'
+import plusIcon from '@/assets/editor/ui-icons/plus.svg?raw'
+import artStyleIconUrl from '@/assets/editor/sprite-generator/param-settings/art-style.svg'
+import categoryIconUrl from '@/assets/editor/sprite-generator/param-settings/category.svg'
+import perspectiveIconUrl from '@/assets/editor/sprite-generator/param-settings/perspective.svg'
+import phaseSettingsLeftBottomBgUrl from '@/assets/editor/sprite-generator/phase-settings-left-bottom-bg.png'
+import phaseSettingsRightTopBgUrl from '@/assets/editor/sprite-generator/phase-settings-right-top-bg.png'
+import flowerUrl from '@/assets/projects/niu-run/editor/sprite-flower.png'
+import niuXiaoQiUrl from '@/assets/projects/niu-run/editor/sprite-niu-xiao-qi.png'
+import tornadoUrl from '@/assets/projects/niu-run/editor/sprite-tornado.svg'
+
+export type GeneratedSpriteCandidate = {
+  name: string
+  image: string
+}
+
+export type SpriteGeneratorResult = {
+  description: string
+  candidate: GeneratedSpriteCandidate
+}
+
+const emit = defineEmits<{
+  close: []
+  'add-sprite': [SpriteGeneratorResult]
+}>()
+
+const description = ref('')
+const category = ref('Character')
+const artStyle = ref('Cartoon')
+const perspective = ref('Side')
+const generated = ref(false)
+const selectedIndex = ref(0)
+const phase = ref<'settings' | 'content'>('settings')
+
+const candidates: GeneratedSpriteCandidate[] = [
+  { name: 'Generated flower sprite', image: flowerUrl },
+  { name: 'Generated calf sprite', image: niuXiaoQiUrl },
+  { name: 'Generated windy sprite', image: tornadoUrl }
+]
+
+const selectedCandidate = computed(() => candidates[selectedIndex.value] ?? candidates[0])
+
+function generateCandidates() {
+  if (description.value.trim() === '') return
+  generated.value = true
+  selectedIndex.value = 0
+}
+
+function openContentPhase() {
+  if (!generated.value) return
+  phase.value = 'content'
+}
+
+function addGeneratedSprite() {
+  if (!generated.value) return
+  emit('add-sprite', {
+    description: description.value.trim(),
+    candidate: selectedCandidate.value
+  })
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="prototype-modal-backdrop" role="presentation" @click.self="emit('close')">
+      <section
+        class="prototype-modal sprite-gen-modal"
+        style="width: 1076px; height: 800px"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="sprite-gen-title"
+      >
+        <header class="sprite-gen-header">
+          <h2 id="sprite-gen-title">Sprite Generator</h2>
+          <button type="button" aria-label="Close sprite generator" @click="emit('close')" v-html="closeIcon"></button>
+        </header>
+        <div
+          v-if="phase === 'settings'"
+          class="sprite-gen-body"
+          :class="{ 'has-preview': generated }"
+          :style="{
+            '--sprite-gen-left-bg': `url(${phaseSettingsLeftBottomBgUrl})`,
+            '--sprite-gen-right-bg': `url(${phaseSettingsRightTopBgUrl})`
+          }"
+        >
+          <section class="sprite-gen-main-panel">
+            <form class="sprite-gen-settings" @submit.prevent="generateCandidates">
+              <label class="sprite-gen-description" aria-label="Sprite description field">
+                <textarea
+                  v-model="description"
+                  aria-label="Sprite description"
+                  placeholder="Please enter description"
+                ></textarea>
+                <div class="sprite-gen-description-footer">
+                  <div class="sprite-gen-controls">
+                    <label>
+                      <img class="sprite-gen-control-icon" :src="categoryIconUrl" alt="" aria-hidden="true" />
+                      <span>Category</span>
+                      <select v-model="category" aria-label="Sprite category">
+                        <option>Character</option>
+                        <option>Object</option>
+                        <option>Effect</option>
+                      </select>
+                    </label>
+                    <label>
+                      <img class="sprite-gen-control-icon" :src="artStyleIconUrl" alt="" aria-hidden="true" />
+                      <span>Art style</span>
+                      <select v-model="artStyle" aria-label="Sprite art style">
+                        <option>Cartoon</option>
+                        <option>Pixel</option>
+                        <option>Watercolor</option>
+                      </select>
+                    </label>
+                    <label>
+                      <img class="sprite-gen-control-icon" :src="perspectiveIconUrl" alt="" aria-hidden="true" />
+                      <span>Perspective</span>
+                      <select v-model="perspective" aria-label="Sprite perspective">
+                        <option>Side</option>
+                        <option>Top-down</option>
+                        <option>Front</option>
+                      </select>
+                    </label>
+                  </div>
+                  <UIButton
+                    class="sprite-gen-action"
+                    type="primary"
+                    size="large"
+                    :disabled="description.trim() === ''"
+                    @click="generateCandidates"
+                  >
+                    {{ generated ? 'Regenerate' : 'Generate' }}
+                  </UIButton>
+                </div>
+              </label>
+            </form>
+            <section v-if="generated" class="sprite-gen-results" aria-label="Generated sprite candidates">
+              <button
+                v-for="(candidate, index) in candidates"
+                :key="candidate.name"
+                class="sprite-gen-candidate"
+                :class="{ active: selectedIndex === index }"
+                type="button"
+                @click="selectedIndex = index"
+              >
+                <img :src="candidate.image" :alt="candidate.name" />
+                <span>{{ candidate.name }}</span>
+              </button>
+            </section>
+          </section>
+          <section v-if="generated" class="sprite-gen-preview-panel" aria-label="Generated sprite preview">
+            <div class="sprite-gen-preview-card">
+              <img :src="selectedCandidate.image" :alt="selectedCandidate.name" />
+            </div>
+          </section>
+        </div>
+        <div v-else class="sprite-gen-content-body" aria-label="Generated sprite content editor">
+          <aside class="sprite-gen-content-sidebar">
+            <section class="sprite-gen-content-section">
+              <h3>Costume</h3>
+              <div class="sprite-gen-content-grid">
+                <button class="sprite-gen-content-item active" type="button" aria-label="default costume">
+                  <span class="sprite-gen-more-button" aria-hidden="true" v-html="moreIcon"></span>
+                  <img :src="selectedCandidate.image" alt="" />
+                  <span>default</span>
+                </button>
+                <button class="sprite-gen-content-item" type="button" aria-label="winter-outfit costume">
+                  <span class="sprite-gen-placeholder-icon" aria-hidden="true" v-html="costumeIcon"></span>
+                  <span>winter-outfit</span>
+                </button>
+                <button class="sprite-gen-content-item" type="button" aria-label="sporty-outfit costume">
+                  <span class="sprite-gen-placeholder-icon" aria-hidden="true" v-html="costumeIcon"></span>
+                  <span>sporty-outfit</span>
+                </button>
+                <button class="sprite-gen-content-item add" type="button" aria-label="Add costume" v-html="plusIcon"></button>
+              </div>
+            </section>
+            <section class="sprite-gen-content-section">
+              <h3>Animation</h3>
+              <div class="sprite-gen-content-grid">
+                <button
+                  v-for="animation in ['idle', 'walk', 'jump', 'wave']"
+                  :key="animation"
+                  class="sprite-gen-content-item"
+                  type="button"
+                  :aria-label="`${animation} animation`"
+                >
+                  <span class="sprite-gen-placeholder-icon" aria-hidden="true" v-html="animationIcon"></span>
+                  <span>{{ animation }}</span>
+                </button>
+                <button class="sprite-gen-content-item add" type="button" aria-label="Add animation" v-html="plusIcon"></button>
+              </div>
+            </section>
+            <section class="sprite-gen-content-prompt" aria-label="Sprite generation prompt">
+              <p>{{ description }}</p>
+              <p>The character is in an idle state, neutral pose.</p>
+              <div class="sprite-gen-content-settings" aria-label="Generation settings">
+                <button type="button" aria-label="Category"><img :src="categoryIconUrl" alt="" /></button>
+                <button type="button" aria-label="Art style"><img :src="artStyleIconUrl" alt="" /></button>
+                <button type="button" aria-label="Perspective"><img :src="perspectiveIconUrl" alt="" /></button>
+              </div>
+            </section>
+          </aside>
+          <section class="sprite-gen-content-preview" aria-label="Selected costume preview">
+            <header>
+              <span>default</span>
+              <button type="button" aria-label="Rename default costume" v-html="editIcon"></button>
+            </header>
+            <div class="sprite-gen-preview-card">
+              <img :src="selectedCandidate.image" :alt="selectedCandidate.name" />
+            </div>
+          </section>
+        </div>
+        <footer class="sprite-gen-footer" :class="{ content: phase === 'content' }">
+          <UIButton
+            v-if="phase === 'content'"
+            class="sprite-gen-minimize"
+            type="secondary"
+            size="large"
+            @click="emit('close')"
+          >
+            Minimize
+          </UIButton>
+          <UIButton
+            class="sprite-gen-action"
+            type="primary"
+            size="large"
+            :disabled="!generated"
+            @click="phase === 'settings' ? openContentPhase() : addGeneratedSprite()"
+          >
+            <template v-if="phase === 'settings'">
+            Next
+            </template>
+            <template v-else>
+              Use
+            </template>
+          </UIButton>
+        </footer>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.prototype-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 120;
+  display: grid;
+  place-items: center;
+  background: rgb(31 41 55 / 36%);
+  padding: 24px;
+}
+
+.prototype-modal {
+  border-radius: var(--ui-border-radius-lg);
+  background: var(--ui-color-grey-100);
+  box-shadow: var(--ui-box-shadow-lg);
+}
+
+.sprite-gen-modal {
+  position: relative;
+  max-width: calc(100vw - 48px);
+  max-height: calc(100vh - 48px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0;
+}
+
+.sprite-gen-header {
+  flex: 0 0 56px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--ui-color-grey-400);
+  padding: 0 24px;
+}
+
+.sprite-gen-header h2 {
+  margin: 0;
+  color: var(--ui-color-grey-1000);
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 28px;
+}
+
+.sprite-gen-header button {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--ui-color-grey-800);
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.sprite-gen-header button :deep(svg) {
+  width: 20px;
+  height: 20px;
+}
+
+.sprite-gen-header button:hover {
+  background: var(--ui-color-grey-300);
+  color: var(--ui-color-grey-1000);
+}
+
+.sprite-gen-body {
+  position: relative;
+  min-height: 0;
+  flex: 1 1 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  gap: 0;
+  background-color: var(--ui-color-grey-100);
+  background-image: var(--sprite-gen-left-bg), var(--sprite-gen-right-bg);
+  background-position:
+    left bottom,
+    right -50px;
+  background-repeat: no-repeat, no-repeat;
+  background-size:
+    520px auto,
+    180px auto;
+  padding: 136px 56px 76px;
+}
+
+.sprite-gen-body.has-preview {
+  justify-content: flex-start;
+  gap: 20px;
+  padding: 24px 26px 76px;
+}
+
+.sprite-gen-main-panel {
+  width: 584px;
+  max-width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 24px;
+  transition: width 0.2s ease;
+}
+
+.sprite-gen-body.has-preview .sprite-gen-main-panel {
+  width: 414px;
+  justify-content: flex-start;
+}
+
+.sprite-gen-settings {
+  display: flex;
+  flex-direction: column;
+}
+
+.sprite-gen-description {
+  min-height: 172px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  border: 1px solid var(--ui-color-turquoise-500);
+  border-radius: var(--ui-border-radius-lg);
+  background: var(--ui-color-grey-100);
+  padding: 16px;
+  transition: border-color 0.2s ease;
+}
+
+.sprite-gen-body.has-preview .sprite-gen-description {
+  min-height: 332px;
+}
+
+.sprite-gen-description:focus-within {
+  border-color: var(--ui-color-turquoise-500);
+}
+
+.sprite-gen-description textarea {
+  min-height: 92px;
+  flex: 1;
+  border: 0;
+  outline: 0;
+  resize: none;
+  color: var(--ui-color-grey-1000);
+  font: inherit;
+  font-size: 14px;
+  line-height: 22px;
+  background: transparent;
+  caret-color: var(--ui-color-turquoise-500);
+}
+
+.sprite-gen-description textarea::placeholder {
+  color: var(--ui-color-grey-700);
+}
+
+.sprite-gen-description-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.sprite-gen-controls {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.sprite-gen-body.has-preview .sprite-gen-controls {
+  flex-wrap: nowrap;
+  gap: 8px;
+}
+
+.sprite-gen-controls label {
+  position: relative;
+  min-width: 0;
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  color: var(--ui-color-grey-900);
+  font-size: 14px;
+  line-height: 22px;
+  padding: 0 12px;
+}
+
+.sprite-gen-body.has-preview .sprite-gen-controls label {
+  width: 32px;
+  height: 32px;
+  justify-content: center;
+  gap: 0;
+  padding: 0;
+}
+
+.sprite-gen-body.has-preview .sprite-gen-controls label > span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.sprite-gen-controls select {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.sprite-gen-control-icon {
+  width: 16px;
+  height: 16px;
+  display: inline-grid;
+  place-items: center;
+  color: var(--ui-color-grey-800);
+  font-size: 15px;
+  line-height: 16px;
+}
+
+.sprite-gen-body.has-preview .sprite-gen-control-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.sprite-gen-results {
+  min-height: 144px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  align-content: start;
+  gap: 12px;
+}
+
+.sprite-gen-preview-panel {
+  min-width: 0;
+  flex: 1 1 auto;
+  display: grid;
+  place-items: center;
+  padding-left: 26px;
+}
+
+.sprite-gen-preview-card {
+  width: min(100%, 636px);
+  height: 596px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--ui-color-grey-100);
+  background-image:
+    linear-gradient(45deg, var(--ui-color-grey-300) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--ui-color-grey-300) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--ui-color-grey-300) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--ui-color-grey-300) 75%);
+  background-position:
+    0 0,
+    0 12px,
+    12px -12px,
+    -12px 0;
+  background-size: 24px 24px;
+  padding: 24px;
+}
+
+.sprite-gen-preview-card img {
+  max-width: 72%;
+  max-height: 82%;
+  object-fit: contain;
+}
+
+.sprite-gen-content-body {
+  min-height: 0;
+  flex: 1 1 0;
+  display: grid;
+  grid-template-columns: 414px minmax(0, 1fr);
+  background: var(--ui-color-grey-100);
+}
+
+.sprite-gen-content-sidebar {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  overflow-y: auto;
+  border-right: 1px solid var(--ui-color-grey-400);
+  padding: 24px 28px 112px;
+}
+
+.sprite-gen-content-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.sprite-gen-content-section h3 {
+  margin: 0;
+  color: var(--ui-color-grey-1000);
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 32px;
+}
+
+.sprite-gen-content-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.sprite-gen-content-item {
+  position: relative;
+  min-width: 0;
+  height: 86px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  color: var(--ui-color-grey-1000);
+  font: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  padding: 8px;
+  cursor: pointer;
+}
+
+.sprite-gen-content-item.active {
+  border: 2px solid var(--ui-color-primary-main);
+  background: var(--ui-color-primary-100);
+  color: var(--ui-color-primary-main);
+  padding: 7px;
+}
+
+.sprite-gen-content-item.add {
+  color: var(--ui-color-primary-main);
+}
+
+.sprite-gen-content-item.add :deep(svg) {
+  width: 28px;
+  height: 28px;
+}
+
+.sprite-gen-content-item img {
+  width: 42px;
+  height: 42px;
+  object-fit: contain;
+}
+
+.sprite-gen-content-item span:last-child {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sprite-gen-placeholder-icon {
+  width: 24px;
+  height: 24px;
+  color: var(--ui-color-grey-700);
+}
+
+.sprite-gen-placeholder-icon :deep(svg) {
+  width: 100%;
+  height: 100%;
+}
+
+.sprite-gen-more-button {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: var(--ui-color-primary-main);
+  color: var(--ui-color-grey-100);
+}
+
+.sprite-gen-more-button :deep(svg) {
+  width: 18px;
+  height: 18px;
+}
+
+.sprite-gen-content-prompt {
+  min-height: 178px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  padding: 20px 16px;
+  color: var(--ui-color-grey-1000);
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.sprite-gen-content-prompt p {
+  margin: 0;
+}
+
+.sprite-gen-content-settings {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: auto;
+}
+
+.sprite-gen-content-settings button {
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  padding: 0;
+}
+
+.sprite-gen-content-settings img {
+  width: 24px;
+  height: 24px;
+}
+
+.sprite-gen-content-preview {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 24px 26px 96px;
+}
+
+.sprite-gen-content-preview header {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  color: var(--ui-color-grey-900);
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+.sprite-gen-content-preview header button {
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  background: transparent;
+  color: var(--ui-color-grey-800);
+  padding: 0;
+}
+
+.sprite-gen-content-preview header button :deep(svg) {
+  width: 20px;
+  height: 20px;
+}
+
+.sprite-gen-content-preview .sprite-gen-preview-card {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.sprite-gen-candidate {
+  position: relative;
+  min-width: 0;
+  height: 132px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  padding: 10px 8px 30px;
+  color: var(--ui-color-grey-1000);
+}
+
+.sprite-gen-candidate.active {
+  border: 2px solid var(--ui-color-primary-main);
+  background: var(--ui-color-primary-100);
+  padding: 9px 7px 29px;
+}
+
+.sprite-gen-candidate img {
+  width: 72px;
+  height: 72px;
+  object-fit: contain;
+}
+
+.sprite-gen-candidate span {
+  position: absolute;
+  right: 8px;
+  bottom: 10px;
+  left: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 18px;
+  text-align: center;
+}
+
+.sprite-gen-footer {
+  position: absolute;
+  right: 24px;
+  bottom: 20px;
+  z-index: 1;
+  display: flex;
+  justify-content: flex-end;
+  pointer-events: none;
+}
+
+.sprite-gen-footer.content {
+  gap: 16px;
+}
+
+.sprite-gen-footer > * {
+  pointer-events: auto;
+}
+
+.sprite-gen-minimize {
+  min-width: 112px;
+}
+
+.sprite-gen-action:disabled {
+  border-color: transparent;
+  background: var(--ui-color-grey-300);
+  color: var(--ui-color-grey-600);
+}
+</style>
diff --git a/ui/prototype/src/components/editor/SpriteItem.vue b/ui/prototype/src/components/editor/SpriteItem.vue
new file mode 100644
index 0000000000..e21fb6c035
--- /dev/null
+++ b/ui/prototype/src/components/editor/SpriteItem.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import eyeOffIcon from '@/assets/editor/ui-icons/eye-off.svg?raw'
+
+defineProps<{
+  sprite: {
+    name: string
+    shortName: string
+    image: string
+    hidden: boolean
+  }
+  active?: boolean
+}>()
+
+const emit = defineEmits<{
+  select: []
+}>()
+</script>
+
+<template>
+  <button class="prototype-sprite-item" :class="{ active }" type="button" @click="emit('select')">
+    <span v-if="$slots.corner" class="prototype-sprite-item-corner" @click.stop>
+      <slot name="corner"></slot>
+    </span>
+    <img :src="sprite.image" :alt="sprite.name" />
+    <span class="prototype-sprite-item-title">
+      <span class="prototype-sprite-item-name">{{ sprite.shortName }}</span>
+      <span
+        v-if="sprite.hidden"
+        class="prototype-sprite-item-hidden"
+        aria-label="Invisible"
+        title="Invisible"
+        v-html="eyeOffIcon"
+      ></span>
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.prototype-sprite-item {
+  position: relative;
+  box-sizing: border-box;
+  width: 88px;
+  height: 88px;
+  border: 0;
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 2px;
+  color: var(--ui-color-grey-1000);
+  cursor: pointer;
+}
+
+.prototype-sprite-item::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.prototype-sprite-item.active {
+  background: var(--ui-color-primary-200);
+}
+
+.prototype-sprite-item.active::before {
+  border-width: 2px;
+  border-color: var(--ui-color-primary-main);
+}
+
+.prototype-sprite-item img {
+  width: 60px;
+  height: 60px;
+  margin-bottom: 5px;
+  object-fit: contain;
+}
+
+.prototype-sprite-item-title {
+  display: flex;
+  width: 100%;
+  height: 22px;
+  align-items: center;
+  gap: 8px;
+  padding: 0 6px;
+  color: var(--ui-color-grey-1000);
+  font-size: 11px;
+  line-height: 22px;
+  text-align: center;
+}
+
+.prototype-sprite-item-name {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.prototype-sprite-item-hidden {
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  color: var(--ui-color-grey-700);
+}
+
+.prototype-sprite-item-hidden :deep(svg) {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.prototype-sprite-item-corner {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  z-index: 5;
+}
+</style>
diff --git a/ui/prototype/src/components/editor/UIBlockItem.vue b/ui/prototype/src/components/editor/UIBlockItem.vue
new file mode 100644
index 0000000000..3a6dfabfaa
--- /dev/null
+++ b/ui/prototype/src/components/editor/UIBlockItem.vue
@@ -0,0 +1,71 @@
+<template>
+  <button
+    class="ui-block-item"
+    :class="{
+      'ui-block-item-active': active,
+      'ui-block-item-interactive': interactive
+    }"
+    type="button"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    active?: boolean
+    interactive?: boolean
+  }>(),
+  {
+    active: false,
+    interactive: true
+  }
+)
+</script>
+
+<style scoped>
+@layer components {
+  .ui-block-item {
+    box-sizing: border-box;
+    width: 88px;
+    height: 88px;
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    border: 0;
+    border-radius: var(--ui-border-radius-md);
+    padding: 2px;
+    background-color: var(--ui-color-grey-100);
+    color: var(--ui-color-text);
+  }
+
+  .ui-block-item::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border: 1px solid var(--ui-color-grey-400);
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  .ui-block-item-interactive {
+    cursor: pointer;
+  }
+
+  .ui-block-item-interactive:hover:not(.ui-block-item-active) {
+    background-color: var(--ui-color-grey-300);
+  }
+
+  .ui-block-item-active {
+    background-color: var(--ui-color-primary-200);
+  }
+
+  .ui-block-item-active::before {
+    border-width: 2px;
+    border-color: var(--ui-color-primary-main);
+  }
+}
+</style>
diff --git a/ui/prototype/src/components/editor/UIEditorSpriteItem.vue b/ui/prototype/src/components/editor/UIEditorSpriteItem.vue
new file mode 100644
index 0000000000..e9f9c6e056
--- /dev/null
+++ b/ui/prototype/src/components/editor/UIEditorSpriteItem.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import UIBlockItem from '@/components/editor/UIBlockItem.vue'
+
+defineProps<{
+  name: string
+  color: string
+  selected?: boolean
+  visible?: boolean
+}>()
+</script>
+
+<template>
+  <UIBlockItem :active="selected">
+    <div class="mt-1.5 mb-[5px] grid size-[60px] place-items-center rounded-md bg-grey-300">
+      <div class="size-10 rounded-full border-4 border-white shadow-sm" :style="{ backgroundColor: color }"></div>
+    </div>
+
+    <div class="flex h-5.5 w-[76px] items-center gap-0.5 px-1.5 text-center text-2xs text-title">
+      <span class="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap" :title="name">
+        {{ name }}
+      </span>
+      <svg
+        v-if="visible === false"
+        class="size-3.5 flex-none text-grey-700"
+        viewBox="0 0 20 20"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M3 3l14 14" />
+        <path d="M8.6 8.6a2 2 0 0 0 2.8 2.8" />
+        <path d="M6.1 6.6C4.5 7.5 3.2 8.7 2.1 10c2 2.6 4.6 4 7.9 4 1.1 0 2.1-.2 3-.5" />
+        <path d="M10.8 6.1c3 .3 5.4 1.6 7.1 3.9-.6.8-1.3 1.5-2.1 2.1" />
+      </svg>
+    </div>
+  </UIBlockItem>
+</template>
diff --git a/ui/prototype/src/components/project/ProjectCard.vue b/ui/prototype/src/components/project/ProjectCard.vue
new file mode 100644
index 0000000000..c4288d0bb5
--- /dev/null
+++ b/ui/prototype/src/components/project/ProjectCard.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { getProjectRoute } from '@/apis/project'
+import type { Project } from '@/data/mock'
+import stageBgUrl from '@/assets/stage-bg.svg'
+
+const props = withDefaults(defineProps<{
+  project: Project
+  context?: 'public' | 'mine'
+}>(), {
+  context: 'public'
+})
+
+const isMine = computed(() => props.context === 'mine')
+const visibility = computed(() => props.project.visibility ?? 'public')
+</script>
+
+<template>
+  <li class="group w-58 flex-none overflow-hidden rounded-md border border-grey-400 bg-grey-100 transition-all duration-100 hover:shadow-sm">
+    <RouterLink
+      class="flex flex-col text-text no-underline"
+      :to="getProjectRoute(project)"
+    >
+      <div class="relative h-43 w-full bg-contain bg-center" :style="{ backgroundImage: `url(${stageBgUrl})` }">
+        <img class="block size-full object-cover" :src="project.thumbnail" :alt="project.title" />
+        <div v-if="!isMine" class="absolute -bottom-2.25 left-0 h-3.25 w-full bg-grey-100">
+          <svg
+            class="absolute bottom-0 left-0"
+            xmlns="http://www.w3.org/2000/svg"
+            width="67"
+            height="31"
+            viewBox="0 0 67 31"
+            fill="none"
+            aria-hidden="true"
+          >
+            <path
+              d="M48.67 11.94C43.36 6.71 39.42 0 29.3 0H28.7C18.58 0 14.64 6.71 9.33 11.94C5.47 16.76 -2.39 17.81 -9 18V31H67V18C60.39 17.81 52.53 16.76 48.67 11.94Z"
+              fill="white"
+            />
+          </svg>
+          <span
+            class="absolute -bottom-0.5 left-3.5 block size-9 overflow-hidden rounded-full border-2 border-grey-100 bg-grey-100"
+          >
+            <img class="block size-full object-cover" :src="project.owner.avatar" :alt="project.owner.displayName" />
+          </span>
+        </div>
+      </div>
+      <div class="p-4">
+        <div class="flex items-center gap-1">
+          <h5 class="m-0 min-w-0 shrink truncate text-xl leading-6 font-normal text-title" :title="project.title">
+            {{ project.title }}
+          </h5>
+          <span
+            v-if="isMine"
+            class="inline-flex size-4 flex-none items-center justify-center"
+            :title="visibility === 'public' ? 'Public' : 'Private'"
+            :aria-label="visibility === 'public' ? 'Public project' : 'Private project'"
+          >
+            <svg v-if="visibility === 'public'" class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M15.22 9.89l-.39.39a1.33 1.33 0 0 0-.39.94v.55a2.67 2.67 0 0 1-2.67 2.67h-.55c-.35 0-.69.14-.94.39l-.39.39a2.67 2.67 0 0 1-3.77 0l-.4-.39a1.33 1.33 0 0 0-.94-.39h-.55a2.67 2.67 0 0 1-2.67-2.67v-.55c0-.35-.14-.69-.39-.94l-.39-.39a2.67 2.67 0 0 1 0-3.77l.39-.39c.25-.25.39-.59.39-.94v-.55a2.67 2.67 0 0 1 2.67-2.67h.55c.35 0 .69-.14.94-.39l.4-.39a2.67 2.67 0 0 1 3.77 0l.39.39c.25.25.59.39.94.39h.55a2.67 2.67 0 0 1 2.67 2.67v.55c0 .35.14.69.39.94l.39.39a2.67 2.67 0 0 1 0 3.77Z" fill="#219FFC" />
+              <path d="M8 3.95A4.05 4.05 0 1 0 8 12.05 4.05 4.05 0 0 0 8 3.95Zm-3.48 4.05c0-.4.07-.78.2-1.14.23 1.7 1.72 1.84 1.78 2.11.07.3 0 .39.03.92.03.52.75.52 1.03.94.08.12.13.38.11.63A3.49 3.49 0 0 1 4.52 8Zm4.42 3.35c.26-.8 1.03-1.08 1.11-1.54.06-.37-.43-.56-.87-.62-.43-.05-.37-.5-.68-.83-.31-.32-.51-.3-.94-.25-.44.05-.81.02-.93-.25-.12-.27.03-.4-.29-.73-.27-.28.02-.52.16-.55.23-.06.63.34.86.29.71-.15-.14-1.53.93-1.88.18-.06.36-.21.45-.39.6.13 1.15.42 1.6.83.12.35.2.75.13.96-.14.44-.5.76-.11 1.47.41.75.66.85.84.65.07-.08.17-.14.26-.18a3.5 3.5 0 0 1-2.52 3.02Z" fill="white" />
+            </svg>
+            <svg v-else class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M15.22 9.89l-.39.39a1.33 1.33 0 0 0-.39.94v.55a2.67 2.67 0 0 1-2.67 2.67h-.55c-.35 0-.69.14-.94.39l-.39.39a2.67 2.67 0 0 1-3.77 0l-.4-.39a1.33 1.33 0 0 0-.94-.39h-.55a2.67 2.67 0 0 1-2.67-2.67v-.55c0-.35-.14-.69-.39-.94l-.39-.39a2.67 2.67 0 0 1 0-3.77l.39-.39c.25-.25.39-.59.39-.94v-.55a2.67 2.67 0 0 1 2.67-2.67h.55c.35 0 .69-.14.94-.39l.4-.39a2.67 2.67 0 0 1 3.77 0l.39.39c.25.25.59.39.94.39h.55a2.67 2.67 0 0 1 2.67 2.67v.55c0 .35.14.69.39.94l.39.39a2.67 2.67 0 0 1 0 3.77Z" fill="#FAA135" />
+              <path d="M5.6 5.64a1.6 1.6 0 1 1 3.2 0 1.6 1.6 0 0 1-3.2 0Zm3.8 2.87c-.33-.24-.82-.47-1.4-.47H6.4c-1.62 0-2.2 1.19-2.2 2.21 0 .91.48 1.39 1.4 1.39h3.08c.06 0 .12-.05.12-.12v-1.05c0-.41.14-.74.4-.95v-.18c0-.3.07-.56.2-.83Zm2.8 1.96v.94c0 .42-.2.63-.6.63H10c-.4 0-.6-.21-.6-.63v-.94c0-.34.14-.54.4-.6v-.53a1 1 0 0 1 2 0v.53c.26.06.4.26.4.6Zm-1-1.13a.4.4 0 0 0-.8 0v.5h.8v-.5Z" fill="white" />
+            </svg>
+          </span>
+        </div>
+        <p class="m-0 mt-1 flex h-5 gap-3 text-sm text-grey-700">
+          <span class="flex-none">{{ project.likes }} likes</span>
+          <span class="block flex-auto truncate" :title="project.updatedAt">{{ project.updatedAt }}</span>
+        </p>
+      </div>
+    </RouterLink>
+  </li>
+</template>
diff --git a/ui/prototype/src/components/project/ProjectRunner.vue b/ui/prototype/src/components/project/ProjectRunner.vue
new file mode 100644
index 0000000000..84a62123cc
--- /dev/null
+++ b/ui/prototype/src/components/project/ProjectRunner.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from 'vue'
+
+import type { Project } from '@/data/mock'
+import UIButton from '@/components/ui/UIButton.vue'
+
+const props = defineProps<{
+  project: Project
+  showControls?: boolean
+}>()
+
+const state = ref<'initial' | 'loading' | 'running'>('initial')
+let runTimer: ReturnType<typeof window.setTimeout> | null = null
+
+const loading = computed(() => state.value === 'loading')
+const running = computed(() => state.value === 'running')
+
+async function run() {
+  if (state.value === 'loading' || state.value === 'running') return
+  state.value = 'loading'
+  await new Promise<void>((resolve) => {
+    runTimer = window.setTimeout(() => {
+      runTimer = null
+      state.value = 'running'
+      resolve()
+    }, 700)
+  })
+}
+
+function stop() {
+  if (runTimer != null) {
+    window.clearTimeout(runTimer)
+    runTimer = null
+  }
+  state.value = 'initial'
+}
+
+function rerun() {
+  state.value = 'running'
+}
+
+defineExpose({
+  run,
+  stop,
+  rerun
+})
+
+onBeforeUnmount(() => {
+  if (runTimer != null) window.clearTimeout(runTimer)
+})
+</script>
+
+<template>
+  <div class="relative size-full overflow-hidden rounded-lg bg-grey-1000">
+    <img class="size-full object-cover" :src="project.thumbnail" :alt="project.title" />
+
+    <div class="absolute inset-0 bg-[linear-gradient(180deg,rgba(36,41,47,0)_0%,rgba(36,41,47,0.2)_100%)]"></div>
+
+    <div class="absolute inset-0 flex items-center justify-center p-6">
+      <UIButton v-if="!running" type="primary" :loading="loading" @click="run">Run</UIButton>
+      <div v-else class="rounded-md bg-grey-100/90 px-4 py-2 text-sm font-medium text-title shadow-sm">
+        Prototype preview
+      </div>
+    </div>
+
+    <div v-if="running && props.showControls !== false" class="absolute top-3 right-3 flex gap-2">
+      <button class="rounded-md bg-grey-100 px-3 py-1.5 text-sm text-title shadow-sm" type="button" @click="rerun">Rerun</button>
+      <button class="rounded-md bg-grey-100 px-3 py-1.5 text-sm text-title shadow-sm" type="button" @click="stop">Stop</button>
+    </div>
+  </div>
+</template>
diff --git a/ui/prototype/src/components/tutorials/CourseItem.vue b/ui/prototype/src/components/tutorials/CourseItem.vue
new file mode 100644
index 0000000000..c1f9759783
--- /dev/null
+++ b/ui/prototype/src/components/tutorials/CourseItem.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { Course } from '@/data/mock'
+
+defineProps<{
+  course: Course
+}>()
+</script>
+
+<template>
+  <article class="flex h-32 flex-col justify-between rounded-md border border-grey-300 bg-grey-100 p-4 shadow-sm">
+    <div>
+      <h3 class="m-0 line-clamp-1 text-base font-medium text-title">{{ course.title }}</h3>
+      <p class="mt-2 line-clamp-2 text-sm leading-5 text-grey-700">{{ course.summary }}</p>
+    </div>
+    <footer class="flex items-center justify-between text-sm text-hint-1">
+      <span>{{ course.duration }}</span>
+      <span>{{ course.completed ? 'Completed' : 'Not started' }}</span>
+    </footer>
+  </article>
+</template>
diff --git a/ui/prototype/src/components/tutorials/CourseSeriesCard.vue b/ui/prototype/src/components/tutorials/CourseSeriesCard.vue
index 5bb449637b..72c495e18e 100644
--- a/ui/prototype/src/components/tutorials/CourseSeriesCard.vue
+++ b/ui/prototype/src/components/tutorials/CourseSeriesCard.vue
@@ -1,32 +1,27 @@
 <script setup lang="ts">
-import type { TutorialCard } from '@/data/tutorials'
+import type { CourseSeries } from '@/data/mock'
 
 defineProps<{
-  tutorial: TutorialCard
-}>()
-
-defineEmits<{
-  select: [tutorial: TutorialCard]
+  series: CourseSeries
 }>()
 </script>
 
 <template>
   <li>
-    <button
-      class="block h-63.5 w-58 overflow-hidden rounded-lg border border-grey-400 bg-grey-100 p-0 text-left transition-transform duration-150 ease-in-out hover:-translate-y-0.5 hover:shadow-sm"
-      type="button"
-      @click="$emit('select', tutorial)"
+    <RouterLink
+      class="block h-63.5 w-58 overflow-hidden rounded-lg border border-grey-400 bg-grey-100 p-0 text-left text-text no-underline transition-transform duration-150 ease-in-out hover:-translate-y-0.5 hover:shadow-sm"
+      :to="`/course-series/${series.id}`"
     >
       <div class="h-43.5 w-58 overflow-hidden border-b border-grey-400 bg-grey-300" aria-hidden="true">
-        <img class="block size-full object-cover" src="@ui-images/map-bg.png" alt="" />
+        <img class="block size-full object-cover" :src="series.cover" alt="" />
       </div>
       <div class="flex h-19.5 flex-col gap-1 bg-grey-100 p-4">
-        <h2 class="overflow-hidden text-base leading-5.5 font-normal whitespace-nowrap text-title text-ellipsis">{{ tutorial.title }}</h2>
+        <h2 class="overflow-hidden text-base leading-5.5 font-normal whitespace-nowrap text-title text-ellipsis">{{ series.title }}</h2>
         <div class="flex items-center gap-3 text-sm leading-5 text-hint-1">
-          <span>{{ tutorial.total }}</span>
-          <span>{{ tutorial.updatedAt }}</span>
+          <span>{{ series.total }}</span>
+          <span>{{ series.updatedAt }}</span>
         </div>
       </div>
-    </button>
+    </RouterLink>
   </li>
 </template>
diff --git a/ui/prototype/src/components/tutorials/TutorialHome.vue b/ui/prototype/src/components/tutorials/TutorialHome.vue
index 8d71472bca..078b411625 100644
--- a/ui/prototype/src/components/tutorials/TutorialHome.vue
+++ b/ui/prototype/src/components/tutorials/TutorialHome.vue
@@ -1,33 +1,32 @@
 <script setup lang="ts">
+import CommunityFooter from '@/components/community/CommunityFooter.vue'
+import CommunityNavbar from '@/components/community/CommunityNavbar.vue'
 import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
 import CourseSeriesCard from '@/components/tutorials/CourseSeriesCard.vue'
 import TutorialsBanner from '@/components/tutorials/TutorialsBanner.vue'
-import type { TutorialCard } from '@/data/tutorials'
+import type { CourseSeries } from '@/data/mock'
 
 defineProps<{
-  tutorials: TutorialCard[]
-}>()
-
-defineEmits<{
-  openTutorial: [tutorial: TutorialCard]
+  tutorials: CourseSeries[]
 }>()
 </script>
 
 <template>
-  <main class="flex-1">
+  <main class="flex min-h-screen min-w-360 flex-col bg-grey-300">
+    <CommunityNavbar />
     <TutorialsBanner />
 
-    <CenteredWrapper class="pt-3 pb-10">
-      <h2 class="mb-1.5 flex h-15 w-full items-center justify-start text-xl leading-6 font-normal text-title">All Tutorials</h2>
+    <CenteredWrapper class="mt-10 mb-15 flex flex-1 flex-col items-center">
+      <h2 class="mb-5 w-full text-2xl text-title">All Tutorials</h2>
 
       <ul class="grid list-none grid-cols-4 justify-center gap-5 p-0 m-0">
         <CourseSeriesCard
           v-for="tutorial in tutorials"
           :key="tutorial.id"
-          :tutorial="tutorial"
-          @select="$emit('openTutorial', $event)"
+          :series="tutorial"
         />
       </ul>
     </CenteredWrapper>
+    <CommunityFooter />
   </main>
 </template>
diff --git a/ui/prototype/src/components/tutorials/TutorialsBanner.vue b/ui/prototype/src/components/tutorials/TutorialsBanner.vue
index 8798650fac..500a9d0226 100644
--- a/ui/prototype/src/components/tutorials/TutorialsBanner.vue
+++ b/ui/prototype/src/components/tutorials/TutorialsBanner.vue
@@ -1,9 +1,15 @@
+<script setup lang="ts">
+import bgImg from '@ui-images/tutorials-banner.jpg'
+</script>
+
 <template>
-  <section class="relative h-84.5 min-w-360 overflow-hidden bg-turquoise-100">
-    <img class="absolute top-0 left-1/2 h-84.5 w-[max(100%,2560px)] max-w-none -translate-x-1/2 object-cover" src="@ui-images/banner.png" alt="" />
-    <div class="absolute top-22.75 left-[calc(50%+16px)] w-122.5 text-turquoise-700">
-      <h1 class="m-0 text-[36px] leading-normal font-bold">Explore the User Tutorial</h1>
-      <p class="mt-2 text-[18px] leading-normal">Build coding skills and develop a programming mindset</p>
+  <section
+    class="relative h-84.5 min-w-360 flex-none bg-grey-100 bg-cover bg-center"
+    :style="{ backgroundImage: `url(${bgImg})` }"
+  >
+    <div class="absolute top-1/2 left-1/2 -translate-x-[15%] -translate-y-1/2 whitespace-nowrap text-title">
+      <h1 class="m-0 text-[46px] leading-none font-medium">Explore the User Tutorials</h1>
+      <p class="mt-7 text-[18px]/7">Learn XBuilder and improve programming skills</p>
     </div>
   </section>
 </template>
diff --git a/ui/prototype/src/components/ui/UIButton.vue b/ui/prototype/src/components/ui/UIButton.vue
new file mode 100644
index 0000000000..7ba67a4480
--- /dev/null
+++ b/ui/prototype/src/components/ui/UIButton.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import loadingIcon from '@/assets/editor/ui-icons/loading.svg?raw'
+
+withDefaults(
+  defineProps<{
+    type?: 'primary' | 'secondary' | 'neutral' | 'white' | 'text'
+    size?: 'small' | 'medium' | 'large'
+    active?: boolean
+    loading?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    type: 'secondary',
+    size: 'medium',
+    active: false,
+    loading: false,
+    disabled: false
+  }
+)
+</script>
+
+<template>
+  <button
+    class="inline-flex cursor-pointer items-center justify-center rounded-md border p-0 transition-colors focus-visible:border-primary-700 focus-visible:outline-none disabled:cursor-not-allowed"
+    :class="[
+      size === 'large' && 'h-10 gap-2 px-6 text-lg/[24px]',
+      size === 'medium' && 'h-8 gap-1 px-4 text-base/[22px]',
+      size === 'small' && 'h-[26px] gap-1 px-3 text-base/[22px]',
+      type === 'primary' && 'border-transparent bg-primary-500 text-grey-100 hover:bg-primary-400 active:bg-primary-600',
+      type === 'secondary' && 'border-transparent bg-primary-200 text-primary-500 hover:bg-primary-100 active:bg-primary-300',
+      type === 'neutral' && 'border-grey-400 bg-grey-300 text-grey-900 hover:bg-grey-200 active:bg-grey-400',
+      type === 'white' && 'border-grey-400 bg-grey-100 text-grey-900 hover:bg-grey-300 active:bg-grey-400',
+      type === 'text' && 'border-transparent bg-transparent text-primary-600 hover:bg-primary-100 active:bg-primary-200',
+      active && 'ring-2 ring-primary-300'
+    ]"
+    :disabled="disabled || loading"
+    type="button"
+  >
+    <span
+      v-if="loading"
+      class="size-4 shrink-0 animate-spin"
+      aria-hidden="true"
+      v-html="loadingIcon"
+    ></span>
+    <slot />
+  </button>
+</template>
diff --git a/ui/prototype/src/components/ui/UICard.vue b/ui/prototype/src/components/ui/UICard.vue
new file mode 100644
index 0000000000..3b44104fa4
--- /dev/null
+++ b/ui/prototype/src/components/ui/UICard.vue
@@ -0,0 +1,5 @@
+<template>
+  <section class="rounded-md border border-grey-300 bg-grey-100 shadow-sm">
+    <slot />
+  </section>
+</template>
diff --git a/ui/prototype/src/components/ui/UICardHeader.vue b/ui/prototype/src/components/ui/UICardHeader.vue
new file mode 100644
index 0000000000..22179d2ff6
--- /dev/null
+++ b/ui/prototype/src/components/ui/UICardHeader.vue
@@ -0,0 +1,5 @@
+<template>
+  <header class="flex h-12 items-center border-b border-grey-400 px-3 text-xl text-title">
+    <slot />
+  </header>
+</template>
diff --git a/ui/prototype/src/components/ui/UITab.vue b/ui/prototype/src/components/ui/UITab.vue
new file mode 100644
index 0000000000..988f4e6baf
--- /dev/null
+++ b/ui/prototype/src/components/ui/UITab.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useUITabsCtx } from './UITabs.vue'
+
+const props = withDefaults(
+  defineProps<{
+    value: string
+    class?: string
+  }>(),
+  {
+    class: ''
+  }
+)
+
+const tabsCtx = useUITabsCtx()
+const active = computed(() => tabsCtx.value.value === props.value)
+</script>
+
+<template>
+  <li
+    class="tab flex h-full min-w-0 cursor-pointer items-center overflow-hidden border-b-2 px-md text-xl/8 whitespace-nowrap transition-[color,border-color] duration-200"
+    :class="[
+      active ? 'border-grey-1000 text-grey-1000' : 'border-transparent text-grey-800 hover:text-grey-1000',
+      props.class
+    ]"
+    @click="tabsCtx.setValue(props.value)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/ui/prototype/src/components/ui/UITabs.vue b/ui/prototype/src/components/ui/UITabs.vue
new file mode 100644
index 0000000000..ec1d1a54c6
--- /dev/null
+++ b/ui/prototype/src/components/ui/UITabs.vue
@@ -0,0 +1,47 @@
+<script lang="ts">
+import { inject, type ComputedRef, type InjectionKey } from 'vue'
+
+export type UITabsCtx = {
+  value: ComputedRef<string>
+  setValue(value: string): void
+}
+
+const prototypeTabsCtxKey: InjectionKey<UITabsCtx> = Symbol('prototype-tabs-ctx')
+
+export function useUITabsCtx() {
+  const tabsCtx = inject(prototypeTabsCtxKey)
+  if (tabsCtx == null) throw new Error('UITab must be used inside UITabs')
+  return tabsCtx
+}
+</script>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    value: string
+    class?: string
+  }>(),
+  {
+    class: ''
+  }
+)
+
+const emit = defineEmits<{
+  'update:value': [string]
+}>()
+
+provide(prototypeTabsCtxKey, {
+  value: computed(() => props.value),
+  setValue(value: string) {
+    emit('update:value', value)
+  }
+})
+</script>
+
+<template>
+  <ul class="m-0 flex min-w-0 list-none overflow-hidden px-2" :class="props.class">
+    <slot />
+  </ul>
+</template>
diff --git a/ui/prototype/src/components/ui/UITag.vue b/ui/prototype/src/components/ui/UITag.vue
new file mode 100644
index 0000000000..1a4ac4e1e6
--- /dev/null
+++ b/ui/prototype/src/components/ui/UITag.vue
@@ -0,0 +1,99 @@
+<script lang="ts">
+export type UITagVariant = 'stroke' | 'none'
+export type UITagColor = 'default' | 'primary' | 'warning' | 'error'
+export type UITagSize = 'small'
+</script>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    variant?: UITagVariant
+    color?: UITagColor
+    size?: UITagSize
+    disabled?: boolean
+  }>(),
+  {
+    variant: 'stroke',
+    color: 'default',
+    size: 'small',
+    disabled: false
+  }
+)
+</script>
+
+<template>
+  <span
+    class="prototype-tag"
+    :class="[`variant-${variant}`, `color-${color}`, `size-${size}`, { disabled }]"
+  >
+    <slot />
+  </span>
+</template>
+
+<style scoped>
+.prototype-tag {
+  height: var(--prototype-tag-height);
+  width: fit-content;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--prototype-tag-gap);
+  border-radius: var(--prototype-tag-border-radius);
+  padding: var(--prototype-tag-padding);
+  color: var(--prototype-tag-color);
+  font-size: var(--prototype-tag-font-size);
+  line-height: var(--prototype-tag-line-height);
+  white-space: nowrap;
+}
+
+.prototype-tag.disabled {
+  --prototype-tag-color: var(--ui-color-grey-600) !important;
+}
+
+.prototype-tag.variant-stroke {
+  border: 1px solid var(--prototype-tag-border-color);
+  background: var(--prototype-tag-bg-color);
+}
+
+.prototype-tag.variant-stroke.disabled {
+  --prototype-tag-bg-color: var(--ui-color-grey-300);
+  --prototype-tag-border-color: var(--ui-color-grey-400);
+}
+
+.prototype-tag.variant-none {
+  border: 0;
+  background: none;
+}
+
+.prototype-tag.color-default {
+  --prototype-tag-color: var(--ui-color-grey-900);
+  --prototype-tag-bg-color: var(--ui-color-grey-300);
+  --prototype-tag-border-color: var(--ui-color-grey-400);
+}
+
+.prototype-tag.color-primary {
+  --prototype-tag-color: var(--ui-color-primary-main);
+  --prototype-tag-bg-color: var(--ui-color-primary-200);
+  --prototype-tag-border-color: var(--ui-color-primary-300);
+}
+
+.prototype-tag.color-warning {
+  --prototype-tag-color: var(--ui-color-yellow-500);
+  --prototype-tag-bg-color: var(--ui-color-yellow-200);
+  --prototype-tag-border-color: var(--ui-color-yellow-300);
+}
+
+.prototype-tag.color-error {
+  --prototype-tag-color: var(--ui-color-red-500);
+  --prototype-tag-bg-color: var(--ui-color-red-200);
+  --prototype-tag-border-color: var(--ui-color-red-300);
+}
+
+.prototype-tag.size-small {
+  --prototype-tag-height: 20px;
+  --prototype-tag-padding: 0 8px;
+  --prototype-tag-font-size: 12px;
+  --prototype-tag-line-height: 18px;
+  --prototype-tag-border-radius: 4px;
+  --prototype-tag-gap: 4px;
+}
+</style>
diff --git a/ui/prototype/src/composables/prototypeSignIn.ts b/ui/prototype/src/composables/prototypeSignIn.ts
new file mode 100644
index 0000000000..7e82410546
--- /dev/null
+++ b/ui/prototype/src/composables/prototypeSignIn.ts
@@ -0,0 +1,19 @@
+import { ref } from 'vue'
+
+const signInModalOpen = ref(false)
+
+export function usePrototypeSignIn() {
+  function openSignInModal() {
+    signInModalOpen.value = true
+  }
+
+  function closeSignInModal() {
+    signInModalOpen.value = false
+  }
+
+  return {
+    signInModalOpen,
+    openSignInModal,
+    closeSignInModal
+  }
+}
diff --git a/ui/prototype/src/data/mock.ts b/ui/prototype/src/data/mock.ts
new file mode 100644
index 0000000000..0c15df226e
--- /dev/null
+++ b/ui/prototype/src/data/mock.ts
@@ -0,0 +1,413 @@
+import aiPixelImage from '@ui-images/ai-pixel.png'
+import aiSideScrollingImage from '@ui-images/ai-side-scrolling.png'
+import aiTopDownImage from '@ui-images/ai-top-down-view.png'
+import avatarImage from '@ui-images/avatar.png'
+import backdropImage from '@ui-images/backdrop.png'
+import builderUsageImage from '@ui-images/builder-usage.png'
+import mapImage from '@ui-images/map-bg.png'
+import monitorImage from '@ui-images/monitor-colorful.png'
+import personalInfoBackgroundImage from '@ui-images/personal-information-background.png'
+import projectRunImage from '@ui-images/project-run.png'
+import spriteReviewImage from '@ui-images/sprite-review.png'
+import userBackgroundImage from '@ui-images/user-bg.png'
+import niuRunThumbnail from '@/assets/projects/niu-run/thumbnail.jpeg'
+import weatherggggThumbnail from '@/assets/projects/weathergggg/thumbnail.jpg'
+
+export type UserProfile = {
+  username: string
+  displayName: string
+  avatar: string
+  cover: string
+  bio: string
+  location: string
+  joinedAt: string
+  followers: number
+  following: number
+}
+
+export type Project = {
+  id: string
+  name: string
+  title: string
+  owner: UserProfile
+  visibility?: 'public' | 'private'
+  description: string
+  instructions?: string
+  thumbnail: string
+  tags: string[]
+  likes: number
+  remixes: number
+  views: number
+  updatedAt: string
+  createdAt?: string
+  remixedFrom?: {
+    owner: string
+    name: string
+    title: string
+  }
+  releaseHistory?: Release[]
+}
+
+export type Course = {
+  id: string
+  title: string
+  summary: string
+  duration: string
+  completed: boolean
+}
+
+export type CourseSeries = {
+  id: string
+  title: string
+  description: string
+  total: string
+  updatedAt: string
+  cover: string
+  courses: Course[]
+}
+
+export type Sprite = {
+  id: string
+  name: string
+  color: string
+  selected: boolean
+  visible: boolean
+}
+
+export type Release = {
+  id: string
+  version: string
+  createdAt: string
+  notes: string
+}
+
+export type ActivityUser = UserProfile & {
+  relation: 'follower' | 'following'
+}
+
+export type WidgetSample = {
+  id: string
+  title: string
+  description: string
+}
+
+export const signedInUsername = 'qingqing'
+
+export const releases: Release[] = [
+  {
+    id: 'niu-run-v3',
+    version: 'v3',
+    createdAt: 'Today',
+    notes: 'Adjusted movement timing and refreshed the local thumbnail.'
+  },
+  {
+    id: 'niu-run-v2',
+    version: 'v2',
+    createdAt: '1 week ago',
+    notes: 'Added touch controls and clearer start instructions.'
+  },
+  {
+    id: 'niu-run-v1',
+    version: 'v1',
+    createdAt: '2 weeks ago',
+    notes: 'Published the first offline prototype build.'
+  }
+]
+
+export const users: UserProfile[] = [
+  {
+    username: 'code-kiko',
+    displayName: 'Code Kiko',
+    avatar: avatarImage,
+    cover: userBackgroundImage,
+    bio: 'Building playful coding projects and sharing remixable examples.',
+    location: 'XBuilder Studio',
+    joinedAt: 'Joined 2026',
+    followers: 1280,
+    following: 86
+  },
+  {
+    username: 'maya',
+    displayName: 'Maya',
+    avatar: avatarImage,
+    cover: personalInfoBackgroundImage,
+    bio: 'Loves side-scrolling games, sprite animation, and bright stage design.',
+    location: 'Creative Lab',
+    joinedAt: 'Joined 2025',
+    followers: 824,
+    following: 64
+  },
+  {
+    username: 'leo',
+    displayName: 'Leo',
+    avatar: avatarImage,
+    cover: userBackgroundImage,
+    bio: 'Prototype collector and remix challenge host.',
+    location: 'Game Club',
+    joinedAt: 'Joined 2025',
+    followers: 614,
+    following: 102
+  },
+  {
+    username: 'qingqing',
+    displayName: 'Qingqing',
+    avatar: avatarImage,
+    cover: personalInfoBackgroundImage,
+    bio: 'Designing and testing local XBuilder prototype projects.',
+    location: 'Builder Lab',
+    joinedAt: 'Joined 2026',
+    followers: 96,
+    following: 18
+  }
+]
+
+export const projects: Project[] = [
+  {
+    id: 'local-weathergggg',
+    name: 'weathergggg',
+    title: 'Weathergggg',
+    owner: users[3],
+    visibility: 'public',
+    description: 'A local offline XBuilder project shown with static prototype data.',
+    instructions: 'Press Run to preview the project placeholder.',
+    thumbnail: weatherggggThumbnail,
+    tags: ['Game', 'Offline'],
+    likes: 412,
+    remixes: 63,
+    views: 5380,
+    updatedAt: 'Today',
+    createdAt: '2 weeks ago',
+    releaseHistory: releases.slice(1)
+  },
+  {
+    id: 'local-niu-run',
+    name: 'niu-run',
+    title: 'niu-run',
+    owner: users[3],
+    visibility: 'private',
+    description: '被牛小花抓到你就输啦',
+    instructions: '点击草地控制小牛行走',
+    thumbnail: niuRunThumbnail,
+    tags: ['Game', 'Runner'],
+    likes: 389,
+    remixes: 57,
+    views: 5010,
+    updatedAt: 'Today',
+    createdAt: '2 weeks ago',
+    remixedFrom: {
+      owner: 'code-kiko',
+      name: 'forest-runner',
+      title: 'Forest Runner'
+    },
+    releaseHistory: releases
+  },
+  {
+    id: '1',
+    name: 'forest-runner',
+    title: 'Forest Runner',
+    owner: users[0],
+    visibility: 'public',
+    description: 'A side-scrolling runner with collectible stars, moving platforms, and a timed finish.',
+    thumbnail: projectRunImage,
+    tags: ['Game', 'Runner', 'Remixable'],
+    likes: 368,
+    remixes: 54,
+    views: 4920,
+    updatedAt: '1 day ago',
+    createdAt: '1 month ago'
+  },
+  {
+    id: '2',
+    name: 'space-catcher',
+    title: 'Space Catcher',
+    owner: users[1],
+    visibility: 'public',
+    description: 'Catch falling crystals and avoid asteroids while the backdrop changes speed.',
+    thumbnail: aiSideScrollingImage,
+    tags: ['Arcade', 'Sprite'],
+    likes: 274,
+    remixes: 39,
+    views: 3560,
+    updatedAt: '3 days ago',
+    createdAt: '1 month ago'
+  },
+  {
+    id: '3',
+    name: 'pixel-garden',
+    title: 'Pixel Garden',
+    owner: users[2],
+    visibility: 'public',
+    description: 'Grow a garden by sequencing actions and remixing sprite costumes.',
+    thumbnail: aiPixelImage,
+    tags: ['Pixel', 'Tutorial'],
+    likes: 221,
+    remixes: 42,
+    views: 2980,
+    updatedAt: '5 days ago',
+    createdAt: '1 month ago'
+  },
+  {
+    id: '4',
+    name: 'robot-maze',
+    title: 'Robot Maze',
+    owner: users[0],
+    description: 'Program a robot to solve mazes with conditions and repeated commands.',
+    thumbnail: monitorImage,
+    tags: ['Logic', 'Maze'],
+    likes: 184,
+    remixes: 31,
+    views: 2640,
+    updatedAt: '1 week ago',
+    createdAt: '2 months ago'
+  },
+  {
+    id: '5',
+    name: 'ocean-rescue',
+    title: 'Ocean Rescue',
+    owner: users[1],
+    description: 'A top-down rescue game with animated water, score feedback, and hazards.',
+    thumbnail: aiTopDownImage,
+    tags: ['Top Down', 'Animation'],
+    likes: 162,
+    remixes: 25,
+    views: 2110,
+    updatedAt: '2 weeks ago',
+    createdAt: '2 months ago'
+  },
+  {
+    id: '6',
+    name: 'weather-stage',
+    title: 'Weather Stage',
+    owner: users[2],
+    description: 'Switch backdrops and sound effects to tell an interactive weather story.',
+    thumbnail: backdropImage,
+    tags: ['Story', 'Backdrop'],
+    likes: 148,
+    remixes: 18,
+    views: 1890,
+    updatedAt: '2 weeks ago',
+    createdAt: '2 months ago'
+  }
+]
+
+export const courseSeries: CourseSeries[] = [
+  {
+    id: 'code-kiko-usage',
+    title: 'Code Kiko: XBuilder Usage',
+    description: 'Learn the editor basics, sprites, backdrops, events, and project sharing.',
+    total: '10 Total',
+    updatedAt: '1 week ago',
+    cover: mapImage,
+    courses: [
+      {
+        id: 'start',
+        title: 'Start with a Sprite',
+        summary: 'Create a project, rename sprites, and run the stage.',
+        duration: '8 min',
+        completed: true
+      },
+      {
+        id: 'move',
+        title: 'Make It Move',
+        summary: 'Use events and motion blocks to build the first interaction.',
+        duration: '12 min',
+        completed: false
+      },
+      {
+        id: 'share',
+        title: 'Publish and Remix',
+        summary: 'Preview, publish, and remix a community project.',
+        duration: '10 min',
+        completed: false
+      }
+    ]
+  },
+  {
+    id: 'sprite-animation',
+    title: 'Sprite Animation Lab',
+    description: 'Practice costume editing, visibility states, and motion feedback.',
+    total: '8 Total',
+    updatedAt: '2 weeks ago',
+    cover: spriteReviewImage,
+    courses: [
+      {
+        id: 'costumes',
+        title: 'Costumes and Frames',
+        summary: 'Build smooth sprite changes with costume frames.',
+        duration: '11 min',
+        completed: false
+      },
+      {
+        id: 'visibility',
+        title: 'Hide and Show',
+        summary: 'Control sprite visibility and stage feedback.',
+        duration: '9 min',
+        completed: false
+      }
+    ]
+  },
+  {
+    id: 'project-playground',
+    title: 'Project Playground',
+    description: 'Explore community projects and learn how remix flows work.',
+    total: '6 Total',
+    updatedAt: '3 weeks ago',
+    cover: builderUsageImage,
+    courses: [
+      {
+        id: 'explore',
+        title: 'Find a Project',
+        summary: 'Search, filter, and open a project from the community.',
+        duration: '7 min',
+        completed: false
+      },
+      {
+        id: 'remix',
+        title: 'Create a Remix',
+        summary: 'Make a local copy and change the main sprite.',
+        duration: '13 min',
+        completed: false
+      }
+    ]
+  }
+]
+
+export const editorProject = {
+  project: projects[0],
+  sprites: [
+    {
+      id: 'kiko',
+      name: 'Kiko Running Character',
+      color: '#36c2cf',
+      selected: true,
+      visible: true
+    },
+    {
+      id: 'star',
+      name: 'Collectible Golden Star',
+      color: '#f3c614',
+      selected: false,
+      visible: false
+    },
+    {
+      id: 'platform',
+      name: 'Long Moving Platform',
+      color: '#9b63f6',
+      selected: false,
+      visible: true
+    }
+  ] satisfies Sprite[]
+}
+
+export const widgetSamples: WidgetSample[] = [
+  {
+    id: 'runner',
+    title: 'Project preview',
+    description: 'Shows the project preview placeholder with local state.'
+  },
+  {
+    id: 'code-editor',
+    title: 'Code editor preview',
+    description: 'Shows code, diagnostics, and snippets with local mock data.'
+  }
+]
diff --git a/ui/prototype/src/data/tutorials.ts b/ui/prototype/src/data/tutorials.ts
deleted file mode 100644
index 9d67c43286..0000000000
--- a/ui/prototype/src/data/tutorials.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export type TutorialCard = {
-  id: string
-  title: string
-  total: string
-  updatedAt: string
-}
-
-export const tutorials: TutorialCard[] = Array.from({ length: 12 }, (_, index) => ({
-  id: `code-kiko-${index + 1}`,
-  title: 'Code Kiko:  XBuilder Usage',
-  total: '10 Total',
-  updatedAt: '1 weeks ago'
-}))
diff --git a/ui/prototype/src/pages/404/index.vue b/ui/prototype/src/pages/404/index.vue
new file mode 100644
index 0000000000..cd9c275663
--- /dev/null
+++ b/ui/prototype/src/pages/404/index.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+import monitorImage from '@ui-images/monitor-colorful.png'
+import CommunityFooter from '@/components/community/CommunityFooter.vue'
+import CommunityNavbar from '@/components/community/CommunityNavbar.vue'
+import UIButton from '@/components/ui/UIButton.vue'
+
+const router = useRouter()
+
+onMounted(() => {
+  document.title = 'Page not found - XBuilder'
+})
+</script>
+
+<template>
+  <div class="flex min-h-screen min-w-360 flex-col bg-grey-200">
+    <CommunityNavbar />
+    <main class="flex flex-1 flex-col items-center justify-center gap-4 px-6 py-12 text-center">
+      <img class="h-47.5 w-67.5 object-contain" :src="monitorImage" alt="" />
+      <h1 class="m-0 text-2xl font-medium text-grey-1000">Page not found</h1>
+      <UIButton class="mt-4 h-9 text-lg" type="primary" @click="router.push('/')">
+        Return to home page
+      </UIButton>
+    </main>
+    <CommunityFooter />
+  </div>
+</template>
diff --git a/ui/prototype/src/pages/community/explore.vue b/ui/prototype/src/pages/community/explore.vue
new file mode 100644
index 0000000000..9790cf5f8e
--- /dev/null
+++ b/ui/prototype/src/pages/community/explore.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { exploreProjects } from '@/apis/community'
+import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
+import ProjectsSection from '@/components/community/ProjectsSection.vue'
+
+const route = useRoute()
+const order = computed(() => String(route.query.o ?? 'likes'))
+const projects = computed(() => exploreProjects(order.value))
+
+const tabs = [
+  { to: '/explore?o=likes', value: 'likes', label: 'Most recent likes' },
+  { to: '/explore?o=remix', value: 'remix', label: 'Most recent remixes' },
+  { to: '/explore?o=following', value: 'following', label: 'My following created' }
+]
+
+onMounted(() => {
+  document.title = 'Explore - XBuilder'
+})
+</script>
+
+<template>
+  <main class="flex flex-1 flex-col">
+    <section class="flex-none border-b border-grey-400 bg-grey-100">
+      <CenteredWrapper class="flex h-16 items-center justify-between gap-5">
+        <h1 class="m-0 min-w-0 flex-[1_1_0] truncate text-xl font-normal text-title">Explore</h1>
+        <div class="flex flex-none gap-3" aria-label="Explore order">
+          <RouterLink
+            v-for="tab in tabs"
+            :key="tab.value"
+            class="flex h-8 w-fit cursor-pointer items-center whitespace-nowrap rounded-md border px-4 text-sm no-underline transition-all duration-300"
+            :class="order === tab.value ? 'border-primary-main bg-primary-main text-grey-100' : 'border-grey-300 bg-grey-300 text-grey-900'"
+            :to="tab.to"
+          >
+            {{ tab.label }}
+          </RouterLink>
+        </div>
+      </CenteredWrapper>
+    </section>
+    <CenteredWrapper class="flex flex-col gap-5 py-5">
+      <ProjectsSection title="Community projects" :projects="projects" />
+    </CenteredWrapper>
+  </main>
+</template>
diff --git a/ui/prototype/src/pages/community/home.vue b/ui/prototype/src/pages/community/home.vue
new file mode 100644
index 0000000000..58e2625077
--- /dev/null
+++ b/ui/prototype/src/pages/community/home.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+
+import { getCommunityHome } from '@/apis/community'
+import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
+import GuestBanner from '@/components/community/home/GuestBanner.vue'
+import ProjectsSection from '@/components/community/ProjectsSection.vue'
+
+const home = getCommunityHome()
+
+onMounted(() => {
+  document.title = 'XBuilder'
+})
+</script>
+
+<template>
+  <main>
+    <CenteredWrapper class="mt-5 pb-10">
+      <GuestBanner class="my-3 mb-8" />
+      <ProjectsSection title="The community is liking" link-to="/explore?o=likes" :projects="home.liked" />
+      <ProjectsSection title="The community is remixing" link-to="/explore?o=remix" :projects="home.remixing" />
+    </CenteredWrapper>
+  </main>
+</template>
diff --git a/ui/prototype/src/pages/community/index.vue b/ui/prototype/src/pages/community/index.vue
new file mode 100644
index 0000000000..fd0a06c28c
--- /dev/null
+++ b/ui/prototype/src/pages/community/index.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+
+import CommunityFooter from '@/components/community/CommunityFooter.vue'
+import CommunityNavbar from '@/components/community/CommunityNavbar.vue'
+</script>
+
+<template>
+  <div class="flex min-h-screen min-w-360 flex-col bg-grey-300 font-main text-text">
+    <CommunityNavbar />
+    <RouterView class="flex-1" />
+    <CommunityFooter />
+  </div>
+</template>
diff --git a/ui/prototype/src/pages/community/project.vue b/ui/prototype/src/pages/community/project.vue
new file mode 100644
index 0000000000..3447a8f6a9
--- /dev/null
+++ b/ui/prototype/src/pages/community/project.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+import { getProject, getProjectEditorRoute, listRelatedProjects } from '@/apis/project'
+import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
+import ProjectsSection from '@/components/community/ProjectsSection.vue'
+import TextView from '@/components/common/TextView.vue'
+import ProjectRunner from '@/components/project/ProjectRunner.vue'
+import UIButton from '@/components/ui/UIButton.vue'
+import UICard from '@/components/ui/UICard.vue'
+import { humanizeCount } from '@/utils/format'
+import { getProjectPageRoute, getUserPageRoute } from '@/router'
+
+const props = defineProps<{
+  ownerInput: string
+  nameInput: string
+}>()
+
+const copied = ref(false)
+const project = computed(() => getProject(props.ownerInput, props.nameInput))
+const relatedProjects = computed(() => listRelatedProjects(project.value))
+
+function copyShareLink() {
+  copied.value = true
+  window.setTimeout(() => {
+    copied.value = false
+  }, 1600)
+}
+
+onMounted(() => {
+  document.title = `${project.value.title} - XBuilder`
+})
+</script>
+
+<template>
+  <main class="bg-grey-300">
+    <CenteredWrapper class="pt-6 pb-10" size="large">
+      <UICard class="flex gap-10 bg-grey-100 p-5">
+        <section class="min-w-0 flex-[1_1_744px]">
+          <div class="aspect-[4/3] overflow-hidden rounded-md bg-grey-1000">
+            <ProjectRunner :project="project" :show-controls="false" />
+          </div>
+          <div class="mt-3 flex justify-end gap-3">
+            <UIButton class="!size-8 !p-0" aria-label="Share project" @click="copyShareLink">
+              <svg aria-hidden="true" viewBox="0 0 16 16" class="size-4 fill-current">
+                <path d="M11.6777 1.28516C13.0155 1.2853 14.1006 2.37024 14.1006 3.70801C14.1005 5.0457 13.0154 6.13071 11.6777 6.13086C10.9963 6.1308 10.3806 5.84854 9.94043 5.39551L6.64648 7.31836C6.70963 7.53433 6.74413 7.76266 6.74414 7.99902C6.74413 8.23526 6.70956 8.46382 6.64648 8.67969L9.94238 10.5996C10.3824 10.1481 10.9975 9.86725 11.6777 9.86719C13.0154 9.86734 14.1004 10.9524 14.1006 12.29C14.1005 13.6278 13.0154 14.7127 11.6777 14.7129C10.34 14.7128 9.25494 13.6278 9.25488 12.29C9.25491 12.0529 9.28998 11.824 9.35352 11.6074L6.05762 9.68652C5.61744 10.1393 5.00258 10.4218 4.32129 10.4219C2.98354 10.4218 1.8985 9.33678 1.89844 7.99902C1.8985 6.66127 2.98354 5.57627 4.32129 5.57617C5.00229 5.5762 5.61748 5.8581 6.05762 6.31055L9.35254 4.38867C9.28946 4.17279 9.2549 3.94426 9.25488 3.70801C9.25488 2.37022 10.34 1.28527 11.6777 1.28516ZM11.6777 11.0342C11.2397 11.0343 10.8545 11.2595 10.6299 11.5996C10.6212 11.6194 10.6117 11.6391 10.6006 11.6582C10.589 11.6781 10.575 11.6968 10.5615 11.7148C10.4725 11.8871 10.4219 12.0828 10.4219 12.29C10.4219 12.9834 10.9843 13.5458 11.6777 13.5459C12.3711 13.5457 12.9335 12.9834 12.9336 12.29C12.9334 11.5967 12.371 11.0343 11.6777 11.0342ZM4.32129 6.74316C3.62788 6.74326 3.06549 7.3056 3.06543 7.99902C3.06549 8.69244 3.62788 9.25479 4.32129 9.25488C5.01473 9.25482 5.57709 8.69246 5.57715 7.99902C5.57709 7.30558 5.01473 6.74322 4.32129 6.74316ZM11.6777 2.45215C10.9843 2.45226 10.4219 3.01455 10.4219 3.70801C10.4219 3.9322 10.482 4.142 10.585 4.32422C10.588 4.32916 10.5918 4.33478 10.5947 4.33984C10.5958 4.34163 10.5966 4.34391 10.5977 4.3457C10.8163 4.71511 11.2175 4.96379 11.6777 4.96387C12.3711 4.96372 12.9335 4.40137 12.9336 3.70801C12.9336 3.01457 12.3711 2.4523 11.6777 2.45215Z" />
+              </svg>
+            </UIButton>
+          </div>
+        </section>
+
+        <aside class="flex min-w-0 flex-[1_1_456px] flex-col pr-5">
+          <h1 class="m-0 break-all text-2xl/[1.4] font-normal text-title">{{ project.title }}</h1>
+          <RouterLink
+            v-if="project.remixedFrom"
+            class="mt-2 text-sm text-grey-900 no-underline"
+            :to="getProjectPageRoute(project.remixedFrom.owner, project.remixedFrom.name)"
+          >
+            Remixed from <span class="link-boring">{{ project.remixedFrom.title }}</span>
+          </RouterLink>
+
+          <div class="mt-4 flex items-center justify-between gap-4">
+            <RouterLink class="flex min-w-0 items-center gap-3 text-text no-underline" :to="getUserPageRoute(project.owner.username)">
+              <img class="size-10 flex-none rounded-full border border-grey-300 object-cover" :src="project.owner.avatar" alt="" />
+              <span class="min-w-0">
+                <span class="block truncate text-base text-title">{{ project.owner.displayName }}</span>
+                <span class="block truncate text-sm text-hint-1">@{{ project.owner.username }}</span>
+              </span>
+            </RouterLink>
+
+            <p class="m-0 flex flex-none items-center gap-2 text-sm text-hint-2">
+              <span class="flex items-center gap-1" :title="`${project.views} views`">
+                <svg aria-hidden="true" viewBox="0 0 20 20" class="size-3.5 fill-current">
+                  <path d="M10 4.2c4 0 6.7 3.56 7.55 4.87.36.56.36 1.3 0 1.86C16.7 12.24 14 15.8 10 15.8s-6.7-3.56-7.55-4.87a1.72 1.72 0 0 1 0-1.86C3.3 7.76 6 4.2 10 4.2Zm0 2.7a3.1 3.1 0 1 0 0 6.2 3.1 3.1 0 0 0 0-6.2Zm0 1.4a1.7 1.7 0 1 1 0 3.4 1.7 1.7 0 0 1 0-3.4Z" />
+                </svg>
+                {{ humanizeCount(project.views) }}
+              </span>
+              <i class="h-3 w-px bg-dividing-line-1"></i>
+              <span class="flex items-center gap-1" :title="`Remixed ${project.remixes} times`">
+                <svg aria-hidden="true" viewBox="0 0 14 14" class="size-3.5 fill-current">
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.7244 9.91416C1.79261 8.3861 1.71651 6.34687 2.53755 4.73026C3.38828 2.99272 4.81999 2.22259 5.3954 1.97219C5.74126 1.81156 6.10568 1.68636 6.49795 1.59414L6.88279 1.51108C7.16554 1.45306 7.44706 1.62834 7.50831 1.90806C7.57018 2.18839 7.39014 2.46444 7.10615 2.52551L6.73182 2.60613C6.42061 2.67942 6.12239 2.78202 5.83159 2.9176C5.45356 3.08128 4.20313 3.71461 3.48171 5.18892C2.93415 6.26564 2.7708 7.97752 3.63268 9.39015C4.4135 10.7509 6.01226 11.5851 7.52873 11.4447C8.96291 11.3414 10.2789 10.3869 10.7405 9.12265C11.2089 7.93355 10.8976 6.71453 10.3835 6.02806C9.76415 5.1822 8.99323 4.92203 8.69068 4.84935C8.64551 4.83591 7.58627 4.51772 6.65077 4.98615C6.24799 5.17914 5.72703 5.61338 5.44799 6.26564C5.14667 6.93928 5.22463 7.8053 5.63298 8.38061C6.04381 8.99745 6.81844 9.34679 7.4848 9.2283C8.14806 9.12387 8.59663 8.6304 8.70305 8.19678C8.82803 7.73079 8.63623 7.33686 8.4865 7.19517C8.23221 6.94416 8.01257 6.93989 8.00328 6.93928C7.89934 6.93622 7.84799 6.94416 7.81705 6.94905C7.69826 6.99241 7.52997 7.08769 7.48047 7.18785C7.47181 7.20434 7.44953 7.24953 7.49223 7.36251C7.59431 7.63063 7.45634 7.9305 7.18472 8.03127C6.91434 8.13265 6.60994 7.99646 6.50723 7.72773C6.33832 7.28312 6.43175 6.935 6.54002 6.72125C6.82277 6.16487 7.47923 5.96333 7.55348 5.94195C7.58751 5.93157 7.62339 5.92546 7.65866 5.92241C7.73105 5.91141 7.85851 5.89431 8.03113 5.90103C8.42649 5.90592 8.87691 6.11234 9.22216 6.45374C9.62989 6.83851 9.94915 7.61169 9.7227 8.45206C9.50181 9.35167 8.65294 10.0955 7.66237 10.2513C6.59694 10.4412 5.39725 9.91599 4.76369 8.96386C4.15302 8.10578 4.03608 6.85011 4.48279 5.854C4.97281 4.70705 5.90893 4.18793 6.18364 4.05601C7.5046 3.39642 8.91651 3.83187 8.97591 3.85019C9.3558 3.93997 10.4119 4.29358 11.233 5.4155C11.8641 6.25953 12.3757 7.83583 11.7255 9.48603C11.1315 11.1124 9.44056 12.3479 7.61721 12.4792C7.47428 12.4927 7.3295 12.5 7.18534 12.5C5.41581 12.5 3.6234 11.4801 2.7244 9.91416Z" stroke="currentColor" stroke-width="0.2" />
+                </svg>
+                {{ humanizeCount(project.remixes) }}
+              </span>
+            </p>
+          </div>
+
+          <div class="mt-4 flex gap-3">
+            <RouterLink
+              class="inline-flex flex-[1_1_0] text-inherit no-underline"
+              :to="getProjectEditorRoute(project)"
+            >
+              <UIButton class="w-full" type="primary" size="large">
+                <svg aria-hidden="true" viewBox="0 0 20 20" class="size-4 fill-current">
+                  <path d="M13.8 2.8a1.7 1.7 0 0 1 2.4 2.4L6.9 14.5l-3.3.9.9-3.3 9.3-9.3ZM3.6 16.3h12.8a.8.8 0 0 1 0 1.6H3.6a.8.8 0 0 1 0-1.6Z" />
+                </svg>
+                Edit
+              </UIButton>
+            </RouterLink>
+            <UIButton class="flex-[1_1_0]" type="secondary" size="large" @click="copyShareLink">
+              <svg aria-hidden="true" viewBox="0 0 16 16" class="size-5 fill-current">
+                <path d="M11.6777 1.28516C13.0155 1.2853 14.1006 2.37024 14.1006 3.70801C14.1005 5.0457 13.0154 6.13071 11.6777 6.13086C10.9963 6.1308 10.3806 5.84854 9.94043 5.39551L6.64648 7.31836C6.70963 7.53433 6.74413 7.76266 6.74414 7.99902C6.74413 8.23526 6.70956 8.46382 6.64648 8.67969L9.94238 10.5996C10.3824 10.1481 10.9975 9.86725 11.6777 9.86719C13.0154 9.86734 14.1004 10.9524 14.1006 12.29C14.1005 13.6278 13.0154 14.7127 11.6777 14.7129C10.34 14.7128 9.25494 13.6278 9.25488 12.29C9.25491 12.0529 9.28998 11.824 9.35352 11.6074L6.05762 9.68652C5.61744 10.1393 5.00258 10.4218 4.32129 10.4219C2.98354 10.4218 1.8985 9.33678 1.89844 7.99902C1.8985 6.66127 2.98354 5.57627 4.32129 5.57617C5.00229 5.5762 5.61748 5.8581 6.05762 6.31055L9.35254 4.38867C9.28946 4.17279 9.2549 3.94426 9.25488 3.70801C9.25488 2.37022 10.34 1.28527 11.6777 1.28516ZM11.6777 11.0342C11.2397 11.0343 10.8545 11.2595 10.6299 11.5996C10.6212 11.6194 10.6117 11.6391 10.6006 11.6582C10.589 11.6781 10.575 11.6968 10.5615 11.7148C10.4725 11.8871 10.4219 12.0828 10.4219 12.29C10.4219 12.9834 10.9843 13.5458 11.6777 13.5459C12.3711 13.5457 12.9335 12.9834 12.9336 12.29C12.9334 11.5967 12.371 11.0343 11.6777 11.0342ZM4.32129 6.74316C3.62788 6.74326 3.06549 7.3056 3.06543 7.99902C3.06549 8.69244 3.62788 9.25479 4.32129 9.25488C5.01473 9.25482 5.57709 8.69246 5.57715 7.99902C5.57709 7.30558 5.01473 6.74322 4.32129 6.74316ZM11.6777 2.45215C10.9843 2.45226 10.4219 3.01455 10.4219 3.70801C10.4219 3.9322 10.482 4.142 10.585 4.32422C10.588 4.32916 10.5918 4.33478 10.5947 4.33984C10.5958 4.34163 10.5966 4.34391 10.5977 4.3457C10.8163 4.71511 11.2175 4.96379 11.6777 4.96387C12.3711 4.96372 12.9335 4.40137 12.9336 3.70801C12.9336 3.01457 12.3711 2.4523 11.6777 2.45215Z" />
+              </svg>
+              {{ copied ? 'Link copied' : 'Share' }}
+            </UIButton>
+          </div>
+
+          <div class="mt-6 mb-4 h-px bg-dividing-line-1"></div>
+
+          <div class="project-collapse mb-2 min-h-0 flex-[1_1_0] overflow-y-auto">
+            <details class="project-collapse-item" open>
+              <summary class="project-collapse-summary">
+                <h5 class="m-0 text-xl font-normal text-title">Description</h5>
+                <svg class="project-collapse-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4474 7.82134C11.7909 7.54092 12.2988 7.56097 12.6192 7.88091L19.6192 14.8809C19.961 15.2226 19.961 15.7775 19.6192 16.1192C19.2775 16.4608 18.7226 16.4609 18.381 16.1192L12.0001 9.73834L5.61925 16.1192C5.27753 16.4608 4.72264 16.4609 4.38097 16.1192C4.03982 15.7775 4.03954 15.2225 4.38097 14.8809L11.381 7.88091L11.4474 7.82134Z" fill="currentColor" />
+                </svg>
+              </summary>
+              <TextView class="mt-2" :text="project.description" placeholder="No description yet." />
+            </details>
+            <details class="project-collapse-item" open>
+              <summary class="project-collapse-summary">
+                <h5 class="m-0 text-xl font-normal text-title">Play instructions</h5>
+                <svg class="project-collapse-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4474 7.82134C11.7909 7.54092 12.2988 7.56097 12.6192 7.88091L19.6192 14.8809C19.961 15.2226 19.961 15.7775 19.6192 16.1192C19.2775 16.4608 18.7226 16.4609 18.381 16.1192L12.0001 9.73834L5.61925 16.1192C5.27753 16.4608 4.72264 16.4609 4.38097 16.1192C4.03982 15.7775 4.03954 15.2225 4.38097 14.8809L11.381 7.88091L11.4474 7.82134Z" fill="currentColor" />
+                </svg>
+              </summary>
+              <TextView class="mt-2" :text="project.instructions" placeholder="No instructions yet." />
+            </details>
+            <details v-if="project.releaseHistory?.length" class="project-collapse-item" open>
+              <summary class="project-collapse-summary">
+                <h5 class="m-0 text-xl font-normal text-title">Release history</h5>
+                <svg class="project-collapse-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4474 7.82134C11.7909 7.54092 12.2988 7.56097 12.6192 7.88091L19.6192 14.8809C19.961 15.2226 19.961 15.7775 19.6192 16.1192C19.2775 16.4608 18.7226 16.4609 18.381 16.1192L12.0001 9.73834L5.61925 16.1192C5.27753 16.4608 4.72264 16.4609 4.38097 16.1192C4.03982 15.7775 4.03954 15.2225 4.38097 14.8809L11.381 7.88091L11.4474 7.82134Z" fill="currentColor" />
+                </svg>
+              </summary>
+              <ol class="release-timeline m-0 mt-3 list-none p-0">
+                <li v-for="release in project.releaseHistory" :key="release.id" class="group/timeline-item relative">
+                  <div class="absolute top-0 bottom-0 left-1 translate-y-[5px]" aria-hidden="true">
+                    <div class="h-2 w-2 rounded-full bg-grey-500"></div>
+                    <div class="absolute top-2 bottom-0 left-1/2 w-px -translate-x-1/2 bg-grey-500 group-last/timeline-item:hidden"></div>
+                  </div>
+                  <div class="mb-3 ml-[31px]">
+                    <div class="text-xs text-hint-2">{{ release.createdAt }}</div>
+                    <p class="m-0 text-base leading-[22px] text-text">
+                      <span class="font-medium text-title">{{ release.version }}</span>
+                      <span v-if="release.notes"> · {{ release.notes }}</span>
+                    </p>
+                  </div>
+                </li>
+              </ol>
+            </details>
+          </div>
+        </aside>
+      </UICard>
+
+      <ProjectsSection class="mt-5" title="Popular remixes" :projects="relatedProjects" context="project" />
+    </CenteredWrapper>
+  </main>
+</template>
+
+<style scoped>
+.project-collapse-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.project-collapse-item + .project-collapse-item::before {
+  content: '';
+  display: block;
+  height: 1px;
+  margin: 16px 0;
+  background: var(--color-grey-400);
+}
+
+.project-collapse-summary {
+  display: flex;
+  cursor: pointer;
+  list-style: none;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.project-collapse-summary::-webkit-details-marker {
+  display: none;
+}
+
+.project-collapse-summary::marker {
+  content: '';
+  font-size: 0;
+}
+
+.project-collapse-summary h5 {
+  font-size: var(--ui-font-size-xl);
+  line-height: 26px;
+}
+
+.project-collapse-icon {
+  width: 20px;
+  height: 20px;
+  color: var(--color-text);
+  transition: transform 0.3s;
+}
+
+.project-collapse-item:not([open]) .project-collapse-icon {
+  transform: rotate(180deg);
+}
+</style>
diff --git a/ui/prototype/src/pages/community/search.vue b/ui/prototype/src/pages/community/search.vue
new file mode 100644
index 0000000000..00c01a15bc
--- /dev/null
+++ b/ui/prototype/src/pages/community/search.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { searchCommunity } from '@/apis/community'
+import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
+import CommunityHeader from '@/components/community/CommunityHeader.vue'
+import ProjectCard from '@/components/project/ProjectCard.vue'
+import emptyGameIcon from '@/assets/empty/game.svg'
+
+const route = useRoute()
+const keyword = computed(() => String(route.query.q ?? ''))
+const results = computed(() => searchCommunity(keyword.value))
+const order = ref(String(route.query.o ?? 'update'))
+const displayedResults = computed(() => {
+  const sorted = [...results.value]
+  if (order.value === 'likes') return sorted.sort((a, b) => b.likes - a.likes)
+  if (order.value === 'remix') return sorted.sort((a, b) => b.remixes - a.remixes)
+  return sorted.reverse()
+})
+
+onMounted(() => {
+  document.title = 'Project search results - XBuilder'
+})
+</script>
+
+<template>
+  <main class="flex-1">
+    <CommunityHeader>
+      <template v-if="keyword !== ''">
+        Found {{ results.length }} projects for "<span class="text-primary-main">{{ keyword }}</span>"
+      </template>
+      <template v-else>Search projects</template>
+      <template #options>
+        <span class="flex items-center gap-2 text-sm text-title">
+          Sort by
+          <select
+            v-model="order"
+            class="h-8 rounded-md border border-grey-400 bg-grey-100 px-3 text-sm text-title outline-none"
+            aria-label="Sort search results"
+          >
+            <option value="update">Recently updated</option>
+            <option value="likes">Most likes</option>
+            <option value="remix">Most remixes</option>
+          </select>
+        </span>
+      </template>
+    </CommunityHeader>
+
+    <CenteredWrapper class="flex flex-col gap-5 py-5">
+      <ul v-if="displayedResults.length > 0" class="grid list-none grid-cols-4 gap-5 p-0 m-0">
+        <ProjectCard v-for="project in displayedResults" :key="project.id" :project="project" />
+      </ul>
+      <div v-else class="flex h-132 w-full flex-col items-center justify-center gap-3 text-xl text-grey-1000">
+        <img class="h-20 w-18.5" :src="emptyGameIcon" alt="" />
+        <span>No projects</span>
+      </div>
+    </CenteredWrapper>
+  </main>
+</template>
diff --git a/ui/prototype/src/pages/community/user/followers.vue b/ui/prototype/src/pages/community/user/followers.vue
new file mode 100644
index 0000000000..94cc80a1da
--- /dev/null
+++ b/ui/prototype/src/pages/community/user/followers.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { listFollowers } from '@/apis/user'
+import UserContent from '@/components/community/user/UserContent.vue'
+import UserList from '@/components/community/user/UserList.vue'
+
+const props = defineProps<{
+  nameInput: string
+}>()
+
+const users = computed(() => listFollowers(props.nameInput))
+</script>
+
+<template>
+  <UserContent>
+    <template #title>Followers</template>
+    <UserList :users="users" />
+  </UserContent>
+</template>
diff --git a/ui/prototype/src/pages/community/user/following.vue b/ui/prototype/src/pages/community/user/following.vue
new file mode 100644
index 0000000000..34446c3412
--- /dev/null
+++ b/ui/prototype/src/pages/community/user/following.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { listFollowing } from '@/apis/user'
+import UserContent from '@/components/community/user/UserContent.vue'
+import UserList from '@/components/community/user/UserList.vue'
+
+const props = defineProps<{
+  nameInput: string
+}>()
+
+const users = computed(() => listFollowing(props.nameInput))
+</script>
+
+<template>
+  <UserContent>
+    <template #title>Following</template>
+    <UserList :users="users" />
+  </UserContent>
+</template>
diff --git a/ui/prototype/src/pages/community/user/index.vue b/ui/prototype/src/pages/community/user/index.vue
new file mode 100644
index 0000000000..7a1be849e9
--- /dev/null
+++ b/ui/prototype/src/pages/community/user/index.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+
+import { getUserProfile } from '@/apis/user'
+import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
+import UserHeader from '@/components/community/user/UserHeader.vue'
+import UserSidebar from '@/components/community/user/UserSidebar.vue'
+
+const props = defineProps<{
+  nameInput: string
+}>()
+
+const user = computed(() => getUserProfile(props.nameInput))
+
+onMounted(() => {
+  document.title = `${user.value.displayName} - XBuilder`
+})
+</script>
+
+<template>
+  <CenteredWrapper class="flex-[1_0_auto] flex flex-col gap-5 pt-6 pb-10" size="large">
+    <UserHeader :user="user" />
+    <div class="flex items-start gap-5">
+      <UserSidebar class="flex-none" :username="user.username" />
+      <div class="min-w-0 flex-[1_1_0]">
+        <RouterView />
+      </div>
+    </div>
+  </CenteredWrapper>
+</template>
diff --git a/ui/prototype/src/pages/community/user/likes.vue b/ui/prototype/src/pages/community/user/likes.vue
new file mode 100644
index 0000000000..a0b5f7f1d0
--- /dev/null
+++ b/ui/prototype/src/pages/community/user/likes.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { listUserLikes } from '@/apis/community'
+import { getUserProfile, isSignedInUser } from '@/apis/user'
+import ProjectCard from '@/components/project/ProjectCard.vue'
+import UserContent from '@/components/community/user/UserContent.vue'
+
+const props = defineProps<{
+  nameInput: string
+}>()
+
+const user = computed(() => getUserProfile(props.nameInput))
+const projects = computed(() => listUserLikes(user.value.username))
+</script>
+
+<template>
+  <UserContent>
+    <template #title>{{ isSignedInUser(user.username) ? 'Projects I like' : `${user.displayName}'s likes` }}</template>
+    <ul class="m-0 grid list-none grid-cols-4 gap-5 p-0 desktop-large:grid-cols-5">
+      <ProjectCard v-for="project in projects" :key="project.id" :project="project" />
+    </ul>
+  </UserContent>
+</template>
diff --git a/ui/prototype/src/pages/community/user/overview.vue b/ui/prototype/src/pages/community/user/overview.vue
new file mode 100644
index 0000000000..6d4dfef4ee
--- /dev/null
+++ b/ui/prototype/src/pages/community/user/overview.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { listUserLikes, listUserProjects } from '@/apis/community'
+import { getUserProfile, isSignedInUser } from '@/apis/user'
+import ProjectsSection from '@/components/community/ProjectsSection.vue'
+import UserContent from '@/components/community/user/UserContent.vue'
+import { getUserPageRoute } from '@/router'
+
+const props = defineProps<{
+  nameInput: string
+}>()
+
+const user = computed(() => getUserProfile(props.nameInput))
+const projects = computed(() => listUserProjects(user.value.username).slice(0, 4))
+const likes = computed(() => listUserLikes(user.value.username).slice(0, 4))
+const projectTitle = computed(() => (isSignedInUser(user.value.username) ? 'My projects' : `${user.value.displayName}'s projects`))
+const likesTitle = computed(() => (isSignedInUser(user.value.username) ? 'Projects I like' : `${user.value.displayName}'s likes`))
+</script>
+
+<template>
+  <div class="flex flex-col gap-5">
+    <UserContent>
+      <template #title>{{ projectTitle }}</template>
+      <template #extra>
+        <RouterLink class="link-primary flex items-center text-lg" :to="getUserPageRoute(user.username, 'projects')">
+          View all
+          <svg class="ml-2 size-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+            <path d="M13.9844 6.48491C14.2692 6.20044 14.731 6.20025 15.0156 6.48491L18.0156 9.48491C18.0418 9.51109 18.0646 9.53999 18.0859 9.56889C18.1335 9.63341 18.1719 9.70543 18.1963 9.78374L18.2158 9.86186C18.2339 9.95531 18.2326 10.0517 18.2139 10.1451C18.1911 10.2585 18.1411 10.362 18.0723 10.4498C18.0545 10.4724 18.0365 10.4953 18.0156 10.5162L15.0156 13.5162C14.731 13.8004 14.269 13.8004 13.9844 13.5162C13.7 13.2314 13.6998 12.7696 13.9844 12.4849L15.7383 10.73H2.5C2.09737 10.73 1.77063 10.4031 1.77051 10.0005C1.77071 9.59799 2.09742 9.27202 2.5 9.27202H15.7402L13.9844 7.51616C13.6996 7.23142 13.6997 6.76967 13.9844 6.48491Z" fill="currentColor" />
+          </svg>
+        </RouterLink>
+      </template>
+      <ProjectsSection title="" :projects="projects" context="user" :card-context="isSignedInUser(user.username) ? 'mine' : 'public'" />
+    </UserContent>
+    <UserContent>
+      <template #title>{{ likesTitle }}</template>
+      <template #extra>
+        <RouterLink class="link-primary flex items-center text-lg" :to="getUserPageRoute(user.username, 'likes')">
+          View all
+          <svg class="ml-2 size-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+            <path d="M13.9844 6.48491C14.2692 6.20044 14.731 6.20025 15.0156 6.48491L18.0156 9.48491C18.0418 9.51109 18.0646 9.53999 18.0859 9.56889C18.1335 9.63341 18.1719 9.70543 18.1963 9.78374L18.2158 9.86186C18.2339 9.95531 18.2326 10.0517 18.2139 10.1451C18.1911 10.2585 18.1411 10.362 18.0723 10.4498C18.0545 10.4724 18.0365 10.4953 18.0156 10.5162L15.0156 13.5162C14.731 13.8004 14.269 13.8004 13.9844 13.5162C13.7 13.2314 13.6998 12.7696 13.9844 12.4849L15.7383 10.73H2.5C2.09737 10.73 1.77063 10.4031 1.77051 10.0005C1.77071 9.59799 2.09742 9.27202 2.5 9.27202H15.7402L13.9844 7.51616C13.6996 7.23142 13.6997 6.76967 13.9844 6.48491Z" fill="currentColor" />
+          </svg>
+        </RouterLink>
+      </template>
+      <ProjectsSection title="" :projects="likes" context="user" />
+    </UserContent>
+  </div>
+</template>
diff --git a/ui/prototype/src/pages/community/user/projects.vue b/ui/prototype/src/pages/community/user/projects.vue
new file mode 100644
index 0000000000..3eaea51d1b
--- /dev/null
+++ b/ui/prototype/src/pages/community/user/projects.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { listUserProjects } from '@/apis/community'
+import { getUserProfile, isSignedInUser } from '@/apis/user'
+import ProjectCard from '@/components/project/ProjectCard.vue'
+import UserContent from '@/components/community/user/UserContent.vue'
+import UIButton from '@/components/ui/UIButton.vue'
+
+const props = defineProps<{
+  nameInput: string
+}>()
+
+const order = ref<'updated' | 'likes'>('updated')
+const user = computed(() => getUserProfile(props.nameInput))
+const projects = computed(() => {
+  const items = [...listUserProjects(user.value.username)]
+  return order.value === 'likes' ? items.sort((a, b) => b.likes - a.likes) : items
+})
+</script>
+
+<template>
+  <UserContent>
+    <template #title>{{ isSignedInUser(user.username) ? 'My projects' : `${user.displayName}'s projects` }}</template>
+    <template #extra>
+      <span>Sort by</span>
+      <UIButton type="text" :active="order === 'updated'" @click="order = 'updated'">Recently updated</UIButton>
+      <UIButton type="text" :active="order === 'likes'" @click="order = 'likes'">Most likes</UIButton>
+      <UIButton v-if="isSignedInUser(user.username)" type="primary">New project</UIButton>
+    </template>
+    <ul class="m-0 grid list-none grid-cols-4 gap-5 p-0 desktop-large:grid-cols-5">
+      <ProjectCard
+        v-for="project in projects"
+        :key="project.id"
+        :project="project"
+        :context="isSignedInUser(user.username) ? 'mine' : 'public'"
+      />
+    </ul>
+  </UserContent>
+</template>
diff --git a/ui/prototype/src/pages/editor/index.vue b/ui/prototype/src/pages/editor/index.vue
new file mode 100644
index 0000000000..e4176e0df0
--- /dev/null
+++ b/ui/prototype/src/pages/editor/index.vue
@@ -0,0 +1,5997 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type CSSProperties } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { getProject } from '@/apis/project'
+import PublishProjectModal from '@/components/editor/PublishProjectModal.vue'
+import SpriteGeneratorModal, { type SpriteGeneratorResult } from '@/components/editor/SpriteGeneratorModal.vue'
+import SpriteItem from '@/components/editor/SpriteItem.vue'
+import ProjectRunner from '@/components/project/ProjectRunner.vue'
+import UIButton from '@/components/ui/UIButton.vue'
+import UICard from '@/components/ui/UICard.vue'
+import UICardHeader from '@/components/ui/UICardHeader.vue'
+import UITab from '@/components/ui/UITab.vue'
+import UITabs from '@/components/ui/UITabs.vue'
+import UITag from '@/components/ui/UITag.vue'
+import controlIcon from '@/assets/editor/category-icons/control.svg?raw'
+import eventIcon from '@/assets/editor/category-icons/event.svg?raw'
+import gameIcon from '@/assets/editor/category-icons/game.svg?raw'
+import lookIcon from '@/assets/editor/category-icons/look.svg?raw'
+import motionIcon from '@/assets/editor/category-icons/motion.svg?raw'
+import sensingIcon from '@/assets/editor/category-icons/sensing.svg?raw'
+import soundIcon from '@/assets/editor/category-icons/sound.svg?raw'
+import zoomInIcon from '@/assets/editor/code-editor/zoom-in.svg?raw'
+import zoomOutIcon from '@/assets/editor/code-editor/zoom-out.svg?raw'
+import zoomResetIcon from '@/assets/editor/code-editor/zoom-reset.svg?raw'
+import closeCircleIcon from '@/assets/editor/code-editor/close-circle.svg?raw'
+import backdropPanelIcon from '@/assets/editor/stage-panel/backdrop.svg?raw'
+import soundPanelIcon from '@/assets/editor/stage-panel/sound.svg?raw'
+import widgetPanelIcon from '@/assets/editor/stage-panel/widget.svg?raw'
+import monitorWidgetIcon from '@/assets/editor/widget/monitor.svg?raw'
+import layerQuickIcon from '@/assets/editor/quick-config/layer.svg?raw'
+import backQuickIcon from '@/assets/editor/quick-config/back.svg?raw'
+import moreIcon from '@/assets/editor/quick-config/more.svg?raw'
+import positionQuickIcon from '@/assets/editor/quick-config/position.svg?raw'
+import resizeQuickIcon from '@/assets/editor/quick-config/resize.svg?raw'
+import rotateQuickIcon from '@/assets/editor/quick-config/rotate.svg?raw'
+import defaultModeIcon from '@/assets/editor/navbar-icons/default-mode.svg?raw'
+import mapEditModeIcon from '@/assets/editor/navbar-icons/map-edit-mode.svg?raw'
+import cloudCheckIcon from '@/assets/editor/navbar-icons/cloud-check.svg?raw'
+import projectFileIcon from '@/assets/editor/navbar-icons/file.svg?raw'
+import arrowMiniIcon from '@/assets/navbar-icons/arrow-mini.svg?raw'
+import exportProjectIcon from '@/assets/editor/navbar-icons/export-project.svg'
+import editIcon from '@/assets/editor/quick-config/edit.svg?raw'
+import arrowDownIcon from '@/assets/editor/ui-icons/arrow-down.svg?raw'
+import settingSoundIcon from '@/assets/editor/ui-icons/sound.svg?raw'
+import settingStatusIcon from '@/assets/editor/ui-icons/status.svg?raw'
+import settingTimerIcon from '@/assets/editor/ui-icons/timer.svg?raw'
+import failedToSaveIcon from '@/assets/editor/navbar-icons/failed-to-save.svg?raw'
+import importAssetsScratchIcon from '@/assets/editor/navbar-icons/import-assets-scratch.svg'
+import importProjectIcon from '@/assets/editor/navbar-icons/import-project.svg'
+import importScratchIcon from '@/assets/editor/navbar-icons/import-scratch.svg'
+import offlineIcon from '@/assets/editor/navbar-icons/offline.svg?raw'
+import modifyProjectNameIcon from '@/assets/editor/navbar-icons/modify-project-name.svg'
+import newProjectIcon from '@/assets/editor/navbar-icons/new.svg'
+import openProjectIcon from '@/assets/editor/navbar-icons/open.svg'
+import plusIcon from '@/assets/editor/ui-icons/plus.svg?raw'
+import projectPageIcon from '@/assets/editor/navbar-icons/project-page.svg'
+import publishActionIcon from '@/assets/editor/ui-icons/publish.svg?raw'
+import publishIcon from '@/assets/editor/navbar-icons/publish.svg'
+import removeProjectIcon from '@/assets/editor/navbar-icons/remove-project.svg'
+import savingIcon from '@/assets/editor/navbar-icons/saving.svg?raw'
+import tutorialIcon from '@/assets/editor/navbar-icons/tutorial.svg?raw'
+import stageBgUrl from '@/assets/stage-bg.svg'
+import backdropUrl from '@/assets/projects/niu-run/editor/backdrop.png'
+import flowerUrl from '@/assets/projects/niu-run/editor/sprite-flower.png'
+import niuXiaoHuaUrl from '@/assets/projects/niu-run/editor/sprite-niu-xiao-hua.png'
+import niuXiaoQiUrl from '@/assets/projects/niu-run/editor/sprite-niu-xiao-qi.png'
+import tornadoUrl from '@/assets/projects/niu-run/editor/sprite-tornado.svg'
+import weatherggggBackdropUrl from '@/assets/projects/weathergggg/editor/urban1.png'
+import jaimeUrl from '@/assets/projects/weathergggg/editor/jaime.png'
+import kaiUrl from '@/assets/projects/weathergggg/editor/kai.png'
+
+const rotateAroundIcon =
+  '<svg viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.22562 2.20918C6.23356 1.73213 7.3608 1.56446 8.4639 1.72773C9.5671 1.89109 10.5973 2.37843 11.4239 3.12715L11.4258 3.12812C12.5806 4.18235 13.2832 5.64311 13.3868 7.20332L13.4063 7.59785L14.3467 6.56074C14.563 6.32214 14.9322 6.30446 15.1709 6.5207C15.4094 6.73702 15.4271 7.10529 15.211 7.34394L13.3311 9.41914C13.2919 9.46365 13.2464 9.50241 13.1953 9.5334C13.133 9.56822 13.0844 9.58716 13.0332 9.5998C12.852 9.6364 12.6693 9.59083 12.501 9.46601L10.42 7.58125C10.1814 7.36506 10.1631 6.99576 10.3789 6.75703C10.5952 6.51827 10.9644 6.50073 11.2032 6.71699L12.2412 7.65644L12.2227 7.27949C12.139 6.02027 11.5724 4.84152 10.6407 3.99043C9.98523 3.39685 9.16774 3.01156 8.29301 2.88203C7.41825 2.75257 6.52493 2.88563 5.72562 3.26387C4.92627 3.64224 4.25627 4.24934 3.80179 5.00801C3.34761 5.76652 3.12837 6.64255 3.17191 7.52558C3.21554 8.409 3.51984 9.26061 4.04691 9.9709C4.57392 10.681 5.30021 11.2191 6.13285 11.5168C6.96561 11.8144 7.8688 11.8579 8.7266 11.6428C9.03876 11.5648 9.35513 11.7546 9.43363 12.0666C9.51197 12.379 9.32212 12.6961 9.0098 12.7746C7.92834 13.0457 6.79016 12.9906 5.74027 12.6154C4.6903 12.24 3.77393 11.5616 3.10941 10.6662C2.44501 9.77082 2.06201 8.69777 2.00687 7.58418C1.95187 6.47053 2.22796 5.36498 2.80082 4.4084C3.3738 3.45187 4.21786 2.68629 5.22562 2.20918Z" fill="currentColor"/></svg>'
+const leftRightIcon =
+  '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8.00098 12.75C8.32303 12.75 8.58381 13.011 8.58398 13.333V14.667C8.58381 14.989 8.32303 15.25 8.00098 15.25C7.67892 15.25 7.41814 14.989 7.41797 14.667V13.333C7.41814 13.011 7.67892 12.75 8.00098 12.75ZM1.77734 4.12793C1.99532 4.03764 2.24723 4.08707 2.41406 4.25391L5.74707 7.58691C5.97488 7.81472 5.97488 8.18528 5.74707 8.41309L2.41406 11.7461C2.24723 11.9129 1.99532 11.9624 1.77734 11.8721C1.5596 11.7817 1.41797 11.5688 1.41797 11.333V4.66699C1.41797 4.4312 1.5596 4.21832 1.77734 4.12793ZM13.5879 4.25391C13.7547 4.08707 14.0066 4.03764 14.2246 4.12793C14.4424 4.21832 14.584 4.4312 14.584 4.66699V11.333C14.584 11.5688 14.4424 11.7817 14.2246 11.8721C14.0066 11.9624 13.7547 11.9129 13.5879 11.7461L10.2549 8.41309C10.0271 8.18528 10.0271 7.81472 10.2549 7.58691L13.5879 4.25391ZM8.00098 8.75C8.32303 8.75 8.58381 9.01099 8.58398 9.33301V10.667C8.58381 10.989 8.32303 11.25 8.00098 11.25C7.67892 11.25 7.41814 10.989 7.41797 10.667V9.33301C7.41814 9.01099 7.67892 8.75 8.00098 8.75ZM2.58398 9.9248L4.50879 8L2.58398 6.0752V9.9248ZM11.4932 8L13.418 9.9248V6.0752L11.4932 8ZM8.00098 4.75C8.32303 4.75 8.58381 5.01099 8.58398 5.33301V6.66699C8.58381 6.98901 8.32303 7.25 8.00098 7.25C7.67892 7.25 7.41814 6.98901 7.41797 6.66699V5.33301C7.41814 5.01099 7.67892 4.75 8.00098 4.75ZM8.00098 0.75C8.32303 0.75 8.58381 1.01099 8.58398 1.33301V2.66699C8.58381 2.98901 8.32303 3.25 8.00098 3.25C7.67892 3.25 7.41814 2.98901 7.41797 2.66699V1.33301C7.41814 1.01099 7.67892 0.75 8.00098 0.75Z" fill="currentColor"/></svg>'
+const notRotateIcon =
+  '<svg viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.6716 1.57439C11.8791 1.3282 12.2476 1.29714 12.4939 1.50408C12.7402 1.71141 12.7724 2.07983 12.5652 2.32634L2.38159 14.425C2.17418 14.6712 1.80568 14.7031 1.55933 14.4963C1.31318 14.289 1.28108 13.9205 1.48804 13.674L2.96949 11.9123C2.85671 11.78 2.74894 11.6425 2.6482 11.4992C2.01135 10.5929 1.65093 9.5125 1.61304 8.39666C1.57539 7.28099 1.86239 6.17794 2.43628 5.22869C3.01031 4.27977 3.84659 3.52551 4.83863 3.06267C5.83097 2.60002 6.93631 2.4486 8.01245 2.6281C8.75754 2.75257 9.46709 3.03187 10.0974 3.44451L11.6716 1.57439ZM5.66187 12.3322C6.4456 12.6231 7.29609 12.6751 8.10816 12.4797C8.43623 12.401 8.76509 12.6098 8.84253 12.9455C8.9194 13.2815 8.71556 13.6182 8.38745 13.6974C7.32598 13.9529 6.21341 13.8815 5.19214 13.4904C5.06643 13.4422 4.94243 13.3884 4.82105 13.3312L5.66187 12.3322ZM7.81616 3.86248C6.97848 3.72271 6.11786 3.8413 5.34546 4.20134C4.57336 4.56156 3.92214 5.1484 3.47534 5.88689C3.02859 6.62583 2.80535 7.48511 2.83472 8.35369C2.86426 9.22207 3.14479 10.0623 3.64038 10.7677C3.68453 10.8306 3.73092 10.8922 3.77808 10.9523L9.28882 4.40447C8.83683 4.13446 8.33775 3.94965 7.81616 3.86248ZM11.7439 5.10564C12.3397 6.01144 12.6918 7.07259 12.7478 8.17986L12.7576 8.46306L13.6101 7.52752C13.8403 7.27572 14.2269 7.26216 14.4734 7.49724C14.7196 7.73272 14.7332 8.12841 14.5037 8.38103L12.6453 10.4211C12.5327 10.519 12.3933 10.5871 12.2195 10.6203C12.1868 10.6214 12.1533 10.6184 12.1218 10.6144C12.0646 10.6057 12.0304 10.5967 11.9978 10.5851C11.9191 10.5511 11.8629 10.5166 11.7976 10.466L9.78882 8.549C9.54255 8.31339 9.52873 7.9168 9.75855 7.66423C9.98874 7.41218 10.3762 7.39879 10.6228 7.63396L11.5359 8.50603L11.5271 8.24431C11.4885 7.48271 11.2731 6.74817 10.9089 6.09783L11.7439 5.10564Z" fill="currentColor"/></svg>'
+
+const props = defineProps<{
+  ownerNameInput: string
+  projectNameInput: string
+}>()
+
+const router = useRouter()
+
+type SpriteCard = {
+  id: string
+  name: string
+  shortName: string
+  image: string
+  hidden: boolean
+  x: number
+  y: number
+  size: number
+  heading: number
+  rotationStyle: RotationStyle
+}
+
+type StageSpriteDragState = {
+  pointerId: number
+  startX: number
+  startY: number
+  spriteStartX: number
+  spriteStartY: number
+  sprite: SpriteCard
+  moved: boolean
+}
+
+type MapSpriteDragState = {
+  pointerId: number
+  startX: number
+  startY: number
+  spriteStartX: number
+  spriteStartY: number
+  stageWidth: number
+  stageHeight: number
+  sprite: SpriteCard
+  moved: boolean
+}
+
+type SnippetPart = {
+  text: string
+  type?: 'function' | 'hint' | 'string' | 'identifier' | 'number' | 'keyword' | 'custom' | 'operator'
+}
+
+type CodeTokenType = NonNullable<SnippetPart['type']>
+
+const codeTokenClass: Record<CodeTokenType, string> = {
+  function: 'text-[#b08a01]',
+  hint: 'text-grey-700',
+  string: 'text-[#9c2c2c]',
+  identifier: 'text-[#0774cd]',
+  number: 'text-[#139707]',
+  keyword: 'text-[#892ba8]',
+  custom: 'text-[#0774cd]',
+  operator: 'text-grey-1000'
+}
+
+const stageSpriteScale = 0.5
+const stageSpriteOrigin = { left: 290, top: 145 }
+
+function getCodeTokenClass(type?: SnippetPart['type']) {
+  return type != null ? codeTokenClass[type] : undefined
+}
+
+function getSourceParts(source: string): SnippetPart[] {
+  if (source.length === 0) return []
+  const parts: SnippetPart[] = []
+  const tokenPattern = /"[^"]*"|\b\d+(?:\.\d+)?\b|[A-Za-z_][A-Za-z0-9_]*|[\u4e00-\u9fff]+/g
+  let cursor = 0
+  for (const match of source.matchAll(tokenPattern)) {
+    const text = match[0]
+    const index = match.index ?? 0
+    if (index > cursor) parts.push({ text: source.slice(cursor, index), type: 'operator' })
+    if (text.startsWith('"')) {
+      parts.push({ text, type: 'string' })
+    } else if (/^\d/.test(text)) {
+      parts.push({ text, type: 'number' })
+    } else if (text === 'true' || text === 'false' || text === 'nil') {
+      parts.push({ text, type: 'keyword' })
+    } else {
+      parts.push({ text, type: 'identifier' })
+    }
+    cursor = index + text.length
+  }
+  if (cursor < source.length) parts.push({ text: source.slice(cursor), type: 'operator' })
+  return parts
+}
+
+type EventSnippet = {
+  id: string
+  parts: SnippetPart[]
+}
+
+type EditorTarget = 'sprite' | 'stage'
+type EditorTab = 'code' | 'costumes' | 'animations'
+type StageTab = 'code' | 'backdrops' | 'sounds' | 'widgets'
+type EditMode = 'default' | 'map'
+type QuickConfigType = 'default' | 'position' | 'rotation' | 'size' | 'layer'
+type RotationStyle = 'normal' | 'left-right' | 'none'
+type SaveState = 'saved' | 'pending' | 'saving' | 'failed' | 'offline'
+type CodeCategoryId = 'event' | 'look' | 'motion' | 'control' | 'sensing' | 'sound' | 'game'
+
+type AssetItem = {
+  id: string
+  name: string
+  image: string
+  frames?: string[]
+  duration?: string
+  binding?: string
+  sound?: string
+  active?: boolean
+}
+
+type SoundItem = {
+  id: string
+  name: string
+  duration: string
+}
+
+type SoundEditState = {
+  left: number
+  right: number
+  gain: number
+  savedLeft: number
+  savedRight: number
+  savedGain: number
+}
+
+type WidgetItem = {
+  id: string
+  name: string
+  value: string
+}
+
+type CodeLine = [string, string]
+
+type CodeDocumentTab = {
+  id: string
+  label: string
+  image: string
+  active: boolean
+  kind: EditorTarget
+  spriteId?: string
+}
+
+type EditorProjectData = {
+  sprites: SpriteCard[]
+  costumes: AssetItem[]
+  animations: AssetItem[]
+  backdrops: AssetItem[]
+  sounds: SoundItem[]
+  widgets: WidgetItem[]
+  codeLines: CodeLine[]
+  stageCodeLines: CodeLine[]
+  physicsEnabled: boolean
+  layerSorting: 'default' | 'vertical'
+}
+
+const project = computed(() => getProject(props.ownerNameInput, props.projectNameInput))
+const runnerRef = ref<InstanceType<typeof ProjectRunner>>()
+const runnerActive = ref(false)
+const activeEditorTarget = ref<EditorTarget>('sprite')
+const activeEditorTab = ref<EditorTab>('code')
+const activeStageTab = ref<StageTab>('code')
+const activeCodeCategory = ref<CodeCategoryId>('event')
+const activeEditMode = ref<EditMode>('default')
+const activeQuickConfig = ref<QuickConfigType>('default')
+const projectDisplayName = ref(project.value.title)
+const draftProjectDisplayName = ref(project.value.title)
+const projectNameEditing = ref(false)
+const projectMenuOpen = ref(false)
+const profileMenuOpen = ref(false)
+const profileLanguage = ref<'English' | '中文'>('English')
+const publishModalOpen = ref(false)
+const publishSubmitting = ref(false)
+const publishStatusMessage = ref('')
+const addSpriteMenuOpen = ref(false)
+const addCostumeMenuOpen = ref(false)
+const addAnimationMenuOpen = ref(false)
+const costumeMenuOpenFor = ref<string | null>(null)
+const animationMenuOpenFor = ref<string | null>(null)
+const animationPendingRemoval = ref<AssetItem | null>(null)
+const preserveRemovedAnimationFrames = ref(false)
+const spritePendingRename = ref<SpriteCard | null>(null)
+const draftSpriteRenameName = ref('')
+const spriteRenameError = ref('')
+const spriteGenModalOpen = ref(false)
+const spriteMenuOpenFor = ref<string | null>(null)
+const spriteMenuPosition = ref({ top: 0, left: 0 })
+const addCostumeMenuPosition = ref({ top: 0, left: 0 })
+const costumeMenuPosition = ref({ top: 0, left: 0 })
+const addAnimationMenuPosition = ref({ top: 0, left: 0 })
+const animationMenuPosition = ref({ top: 0, left: 0 })
+const codeZoom = ref(1)
+const tempCodeDocumentsOpen = ref(true)
+const saveState = ref<SaveState>('saved')
+const editorRevision = ref(0)
+const selectedSpriteId = ref('niu-xiao-qi')
+const selectedCostumeId = ref('niu-xiao-qi-default')
+const selectedAnimationId = ref('niu-run')
+const selectedBackdropId = ref('grass-field')
+const selectedSoundId = ref('pop')
+const selectedWidgetId = ref('score')
+const soundEditStates = ref<Record<string, SoundEditState>>({})
+const selectedMapSpriteId = ref('niu-xiao-qi')
+const mapSpriteNameEditing = ref(false)
+const mapSpriteConfigExpanded = ref(true)
+const mapPhysicsEnabled = ref(true)
+const mapLayerSorting = ref<'default' | 'vertical'>('vertical')
+const mapSpritePhysicsFlags = ref<string[]>([])
+const draftMapSpriteName = ref('')
+const mapWidth = ref(480)
+const mapHeight = ref(360)
+const projectNameInputRef = ref<HTMLInputElement>()
+const projectMenuRef = ref<HTMLElement>()
+const profileMenuRef = ref<HTMLElement>()
+const addSpriteMenuRef = ref<HTMLElement>()
+const mapAddSpriteMenuRef = ref<HTMLElement>()
+const addCostumeMenuRef = ref<HTMLElement>()
+const costumeMenuRef = ref<HTMLElement>()
+const addAnimationMenuRef = ref<HTMLElement>()
+const animationMenuRef = ref<HTMLElement>()
+const spriteMenuRef = ref<HTMLElement>()
+const mapSpriteNameInputRef = ref<HTMLInputElement>()
+const spriteRenameInputRef = ref<HTMLInputElement>()
+const saveStateTimeouts: number[] = []
+let publishTimer: number | null = null
+let stageSpriteDragState: StageSpriteDragState | null = null
+let mapSpriteDragState: MapSpriteDragState | null = null
+
+function snippet(id: string, parts: SnippetPart[]): EventSnippet {
+  return { id, parts }
+}
+
+const categorySnippetGroups: Record<CodeCategoryId, Array<{ title: string; items: EventSnippet[] }>> = {
+  event: [
+    {
+      title: 'Game Events',
+      items: [snippet('onStart', [{ text: 'onStart', type: 'function' }, { text: ' => {}', type: 'operator' }])]
+    },
+    {
+      title: 'Sensing Events',
+      items: [
+        snippet('onClick', [{ text: 'onClick', type: 'function' }, { text: ' => {}', type: 'operator' }]),
+        snippet('onKey', [
+          { text: 'onKey', type: 'function' },
+          { text: ' key:', type: 'hint' },
+          { text: 'KeyA', type: 'identifier' },
+          { text: ', => {}', type: 'operator' }
+        ]),
+        snippet('onSwipe', [
+          { text: 'onSwipe', type: 'function' },
+          { text: ' direction:', type: 'hint' },
+          { text: 'left', type: 'identifier' },
+          { text: ',...', type: 'operator' }
+        ]),
+        snippet('onTouchStart-name', [
+          { text: 'onTouchStart', type: 'function' },
+          { text: ' name:', type: 'hint' },
+          { text: '"牛小...', type: 'string' }
+        ]),
+        snippet('onTouchStart-names', [
+          { text: 'onTouchStart', type: 'function' },
+          { text: ' names:', type: 'hint' },
+          { text: '["牛...', type: 'string' }
+        ])
+      ]
+    },
+    {
+      title: 'Message Events',
+      items: [
+        snippet('broadcast', [
+          { text: 'broadcast', type: 'function' },
+          { text: ' msg:', type: 'hint' },
+          { text: '"ping"', type: 'string' }
+        ]),
+        snippet('broadcastAndWait', [
+          { text: 'broadcastAndWait', type: 'function' },
+          { text: ' msg:', type: 'hint' },
+          { text: '"p...', type: 'string' }
+        ]),
+        snippet('onMsg', [
+          { text: 'onMsg', type: 'function' },
+          { text: ' msg:', type: 'hint' },
+          { text: '"ping"', type: 'string' },
+          { text: ', => {}', type: 'operator' }
+        ])
+      ]
+    },
+    {
+      title: 'Sprite Events',
+      items: [
+        snippet('onCloned', [
+          { text: 'onCloned', type: 'function' },
+          { text: ' data', type: 'identifier' },
+          { text: ' => {}', type: 'operator' }
+        ])
+      ]
+    },
+    {
+      title: 'Stage Events',
+      items: [
+        snippet('onBackdrop', [
+          { text: 'onBackdrop', type: 'function' },
+          { text: ' name:', type: 'hint' },
+          { text: '"backdr...', type: 'string' }
+        ])
+      ]
+    }
+  ],
+  look: [
+    { title: 'Visibility', items: [snippet('visible', [{ text: 'visible', type: 'function' }]), snippet('show', [{ text: 'show', type: 'function' }]), snippet('hide', [{ text: 'hide', type: 'function' }])] },
+    { title: 'Costume', items: [snippet('setCostume', [{ text: 'setCostume', type: 'function' }, { text: ' name:', type: 'hint' }, { text: '"牛小七"', type: 'string' }])] },
+    { title: 'Graphic Effect', items: [snippet('clearGraphicEffects', [{ text: 'clearGraphicEffects', type: 'function' }])] }
+  ],
+  motion: [
+    { title: 'Position', items: [snippet('stepTo', [{ text: 'stepTo', type: 'function' }, { text: ' obj:', type: 'hint' }, { text: 'Mouse', type: 'identifier' }]), snippet('setXYpos', [{ text: 'setXYpos', type: 'function' }, { text: ' x:', type: 'hint' }, { text: '0', type: 'number' }, { text: ', y:', type: 'hint' }, { text: '0', type: 'number' }])] },
+    { title: 'Heading', items: [snippet('turnTo', [{ text: 'turnTo', type: 'function' }, { text: ' target:', type: 'hint' }, { text: 'Mouse', type: 'identifier' }])] },
+    { title: 'Physics', items: [snippet('touching', [{ text: 'touching', type: 'function' }, { text: ' target:', type: 'hint' }, { text: 'Sprite', type: 'identifier' }])] }
+  ],
+  control: [
+    { title: 'Time', items: [snippet('wait', [{ text: 'wait', type: 'function' }, { text: ' seconds:', type: 'hint' }, { text: '1', type: 'number' }])] },
+    { title: 'Flow Control', items: [snippet('forever', [{ text: 'forever', type: 'function' }, { text: ' => {}', type: 'operator' }]), snippet('repeat', [{ text: 'repeat', type: 'function' }, { text: ' times:', type: 'hint' }, { text: '10', type: 'number' }])] },
+    { title: 'Declaration', items: [snippet('var', [{ text: 'var', type: 'keyword' }, { text: ' score', type: 'identifier' }])] }
+  ],
+  sensing: [
+    { title: 'Mouse', items: [snippet('mouseX', [{ text: 'mouseX', type: 'function' }]), snippet('mouseY', [{ text: 'mouseY', type: 'function' }]), snippet('mousePressed', [{ text: 'mousePressed', type: 'function' }])] },
+    { title: 'Keyboard', items: [snippet('keyPressed', [{ text: 'keyPressed', type: 'function' }, { text: ' key:', type: 'hint' }, { text: 'KeyA', type: 'identifier' }])] },
+    { title: 'Ask', items: [snippet('ask', [{ text: 'ask', type: 'function' }, { text: ' question:', type: 'hint' }, { text: '"name?"', type: 'string' }])] }
+  ],
+  sound: [
+    { title: 'Play / Stop', items: [snippet('play', [{ text: 'play', type: 'function' }, { text: ' name:', type: 'hint' }, { text: '"pop"', type: 'string' }]), snippet('stopAllSounds', [{ text: 'stopAllSounds', type: 'function' }])] },
+    { title: 'Volume', items: [snippet('volume', [{ text: 'volume', type: 'function' }]), snippet('setVolume', [{ text: 'setVolume', type: 'function' }, { text: ' volume:', type: 'hint' }, { text: '80', type: 'number' }])] }
+  ],
+  game: [
+    { title: 'Start / Stop', items: [snippet('start', [{ text: 'start', type: 'function' }]), snippet('stop', [{ text: 'stop', type: 'function' }]), snippet('wait', [{ text: 'wait', type: 'function' }, { text: ' seconds:', type: 'hint' }, { text: '1', type: 'number' }])] },
+    { title: 'Sprite', items: [snippet('getSprite', [{ text: 'getSprite', type: 'function' }, { text: ' name:', type: 'hint' }, { text: '"牛小七"', type: 'string' }]), snippet('cloneSprite', [{ text: 'cloneSprite', type: 'function' }, { text: ' sprite:', type: 'hint' }, { text: '牛小七', type: 'identifier' }])] },
+    { title: 'Camera', items: [snippet('cameraFollow', [{ text: 'cameraFollow', type: 'function' }, { text: ' target:', type: 'hint' }, { text: '牛小七', type: 'identifier' }]), snippet('cameraShake', [{ text: 'cameraShake', type: 'function' }, { text: ' strength:', type: 'hint' }, { text: '4', type: 'number' }])] },
+    { title: 'Others', items: [snippet('timer', [{ text: 'timer', type: 'function' }]), snippet('resetTimer', [{ text: 'resetTimer', type: 'function' }]), snippet('getWidget', [{ text: 'getWidget', type: 'function' }, { text: ' name:', type: 'hint' }, { text: '"Score"', type: 'string' }])] }
+  ]
+}
+
+const niuRunSprites = ref<SpriteCard[]>([
+  {
+    id: 'niu-xiao-qi',
+    name: '牛小七',
+    shortName: '牛小七',
+    image: niuXiaoQiUrl,
+    hidden: false,
+    x: -224,
+    y: 74,
+    size: 100,
+    heading: 90,
+    rotationStyle: 'normal'
+  },
+  {
+    id: 'niu-xiao-hua',
+    name: '牛小花牛小花牛小花牛小花牛小花牛小花',
+    shortName: '牛小花牛小花...',
+    image: niuXiaoHuaUrl,
+    hidden: false,
+    x: -130,
+    y: 94,
+    size: 100,
+    heading: 90,
+    rotationStyle: 'normal'
+  },
+  {
+    id: 'flower',
+    name: '花朵花朵花朵花朵花朵花朵花朵花朵花朵',
+    shortName: '花朵花...',
+    image: flowerUrl,
+    hidden: true,
+    x: 0,
+    y: 0,
+    size: 100,
+    heading: 90,
+    rotationStyle: 'normal'
+  },
+  {
+    id: 'tornado',
+    name: '龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风',
+    shortName: '龙卷风...',
+    image: tornadoUrl,
+    hidden: true,
+    x: 120,
+    y: -20,
+    size: 100,
+    heading: 90,
+    rotationStyle: 'normal'
+  }
+])
+
+const niuRunCostumes: AssetItem[] = [
+  {
+    id: 'niu-xiao-qi-default',
+    name: '牛小七',
+    image: niuXiaoQiUrl
+  }
+]
+
+const niuRunAnimations: AssetItem[] = [
+  {
+    id: 'niu-run',
+    name: '跑步',
+    image: niuXiaoQiUrl,
+    frames: [niuXiaoQiUrl, niuXiaoHuaUrl, niuXiaoQiUrl, niuXiaoHuaUrl],
+    duration: '0.8s',
+    binding: '1',
+    sound: 'None'
+  }
+]
+
+const niuRunBackdrops: AssetItem[] = [
+  {
+    id: 'grass-field',
+    name: 'backdrop',
+    image: backdropUrl
+  }
+]
+
+const niuRunSounds: SoundItem[] = [
+  { id: 'pop', name: 'pop', duration: '0.18s' },
+  { id: 'jump', name: 'jump', duration: '0.32s' }
+]
+
+const defaultWidgets: WidgetItem[] = [
+  { id: 'score', name: 'Score', value: '0' },
+  { id: 'timer', name: 'Timer', value: '60' }
+]
+
+const niuRunCodeLines: CodeLine[] = [
+  ['onMsg', 'msg:"click", => {'],
+  ['  turnTo', 'target:Mouse'],
+  ['  stepTo', 'obj:Mouse'],
+  ['}', ''],
+  ['', ''],
+  ['onTouchStart', 'sprite:"牛小花牛小花牛小花牛小花牛小花牛小花", sprite => {'],
+  ['  stopped', '= true'],
+  ['}', ''],
+  ['onKey', 'key:KeyA, => {'],
+  ['', ''],
+  ['}', ''],
+  ['onClick', '=> {'],
+  ['', ''],
+  ['}', '']
+]
+
+const niuRunStageCodeLines: CodeLine[] = [
+  ['onBackdrop', 'name:"backdrop", => {'],
+  ['  show', ''],
+  ['}', '']
+]
+
+const weatherggggSprites = ref<SpriteCard[]>([
+  {
+    id: 'jaime',
+    name: 'Jaime',
+    shortName: 'Jaime',
+    image: jaimeUrl,
+    hidden: false,
+    x: -80,
+    y: 40,
+    size: 100,
+    heading: 90,
+    rotationStyle: 'normal'
+  },
+  {
+    id: 'kai',
+    name: 'Kai',
+    shortName: 'Kai',
+    image: kaiUrl,
+    hidden: false,
+    x: 80,
+    y: 40,
+    size: 100,
+    heading: 90,
+    rotationStyle: 'normal'
+  }
+])
+
+const weatherggggCostumes: AssetItem[] = [
+  {
+    id: 'jaime-b',
+    name: 'jaime-b',
+    image: jaimeUrl
+  }
+]
+
+const weatherggggAnimations: AssetItem[] = []
+
+const weatherggggBackdrops: AssetItem[] = [
+  {
+    id: 'urban1',
+    name: 'urban1',
+    image: weatherggggBackdropUrl
+  }
+]
+
+const weatherggggCodeLines: CodeLine[] = [
+  ['onMsg', 'msg:"1", => {'],
+  ['  say', '"I come from England.", 2'],
+  ['  broadcast', '"2"'],
+  ['}', ''],
+  ['', ''],
+  ['onMsg', 'msg:"3", => {'],
+  ['  say', "\"It's mild, but it's not always pleasant.\", 4"],
+  ['  setCostume', 'Next'],
+  ['', ''],
+  ['  say', "\"The weather's often cold in the North and windy in the East.\", 5.5"],
+  ['  say', "\"It's often wet in the West and sometimes warm in the South.\", 5"],
+  ['  broadcast', '"4"'],
+  ['}', '']
+]
+
+const weatherggggStageCodeLines: CodeLine[] = []
+
+const niuRunEditorData: EditorProjectData = {
+  sprites: niuRunSprites.value,
+  costumes: niuRunCostumes,
+  animations: niuRunAnimations,
+  backdrops: niuRunBackdrops,
+  sounds: niuRunSounds,
+  widgets: defaultWidgets,
+  codeLines: niuRunCodeLines,
+  stageCodeLines: niuRunStageCodeLines,
+  physicsEnabled: true,
+  layerSorting: 'vertical'
+}
+
+const weatherggggEditorData: EditorProjectData = {
+  sprites: weatherggggSprites.value,
+  costumes: weatherggggCostumes,
+  animations: weatherggggAnimations,
+  backdrops: weatherggggBackdrops,
+  sounds: [],
+  widgets: defaultWidgets,
+  codeLines: weatherggggCodeLines,
+  stageCodeLines: weatherggggStageCodeLines,
+  physicsEnabled: false,
+  layerSorting: 'default'
+}
+
+const editorProjectData = computed(() => (project.value.name === 'weathergggg' ? weatherggggEditorData : niuRunEditorData))
+const sprites = computed(() => editorProjectData.value.sprites)
+const costumes = computed(() => editorProjectData.value.costumes)
+const animations = computed(() => editorProjectData.value.animations)
+const backdrops = computed(() => editorProjectData.value.backdrops)
+const sounds = computed(() => editorProjectData.value.sounds)
+const widgets = computed(() => editorProjectData.value.widgets)
+const codeLines = computed(() => editorProjectData.value.codeLines)
+const stageCodeLines = computed(() => editorProjectData.value.stageCodeLines)
+
+const selectedCostume = computed(() => costumes.value.find((costume) => costume.id === selectedCostumeId.value) ?? costumes.value[0])
+const costumeMenuCostume = computed(() => costumes.value.find((costume) => costume.id === costumeMenuOpenFor.value) ?? null)
+const selectedAnimation = computed(() => {
+  editorRevision.value
+  return animations.value.find((animation) => animation.id === selectedAnimationId.value) ?? animations.value[0] ?? null
+})
+const animationMenuAnimation = computed(() => animations.value.find((animation) => animation.id === animationMenuOpenFor.value) ?? null)
+const selectedBackdrop = computed(() => backdrops.value.find((backdrop) => backdrop.id === selectedBackdropId.value) ?? backdrops.value[0])
+const selectedSound = computed(() => sounds.value.find((sound) => sound.id === selectedSoundId.value) ?? sounds.value[0] ?? null)
+const selectedSoundEdit = computed(() => (selectedSound.value == null ? null : getSoundEditState(selectedSound.value.id)))
+const selectedSoundEditing = computed(() => {
+  const edit = selectedSoundEdit.value
+  if (edit == null) return false
+  return edit.left !== edit.savedLeft || edit.right !== edit.savedRight || edit.gain !== edit.savedGain
+})
+const selectedSoundDuration = computed(() => {
+  const sound = selectedSound.value
+  const edit = selectedSoundEdit.value
+  if (sound == null || edit == null) return ''
+  const duration = Number.parseFloat(sound.duration)
+  if (!Number.isFinite(duration)) return sound.duration
+  return `${Math.max(0.01, duration * (edit.right - edit.left)).toFixed(2)}s`
+})
+const soundWaveformRangeStyle = computed<CSSProperties>(() => {
+  const edit = selectedSoundEdit.value ?? createSoundEditState()
+  return {
+    '--sound-range-left': `${edit.left * 100}%`,
+    '--sound-range-right': `${(1 - edit.right) * 100}%`
+  }
+})
+const soundVolumeStyle = computed<CSSProperties>(() => {
+  const edit = selectedSoundEdit.value ?? createSoundEditState()
+  return { '--sound-gain': `${edit.gain * 100}%` }
+})
+const selectedWidget = computed(() => widgets.value.find((widget) => widget.id === selectedWidgetId.value) ?? widgets.value[0])
+
+const codeCategories: Array<{ id: CodeCategoryId; label: string; icon: string }> = [
+  { id: 'event', label: 'Event', icon: eventIcon },
+  { id: 'look', label: 'Look', icon: lookIcon },
+  { id: 'motion', label: 'Motion', icon: motionIcon },
+  { id: 'control', label: 'Control', icon: controlIcon },
+  { id: 'sensing', label: 'Sensing', icon: sensingIcon },
+  { id: 'sound', label: 'Sound', icon: soundIcon },
+  { id: 'game', label: 'Game', icon: gameIcon }
+]
+
+const stageEntries: Array<{ id: Exclude<StageTab, 'code'>; label: string; icon: string }> = [
+  { id: 'backdrops', label: 'Backdrops', icon: backdropPanelIcon },
+  { id: 'sounds', label: 'Sounds', icon: soundPanelIcon },
+  { id: 'widgets', label: 'Widgets', icon: widgetPanelIcon }
+]
+
+const quickConfigTools: Array<{ id: QuickConfigType; label: string; icon: string }> = [
+  { id: 'position', label: 'Position', icon: positionQuickIcon },
+  { id: 'rotation', label: 'Rotation', icon: rotateQuickIcon },
+  { id: 'size', label: 'Size', icon: resizeQuickIcon },
+  { id: 'layer', label: 'Layer order', icon: layerQuickIcon }
+]
+
+const selectedSprite = computed(() => sprites.value.find((sprite) => sprite.id === selectedSpriteId.value) ?? sprites.value[0])
+const selectedMapSprite = computed(() => sprites.value.find((sprite) => sprite.id === selectedMapSpriteId.value) ?? sprites.value[0])
+const spriteMenuSprite = computed(() => sprites.value.find((sprite) => sprite.id === spriteMenuOpenFor.value))
+const visibleSnippetGroups = computed(() => categorySnippetGroups[activeCodeCategory.value])
+const stageBackdrop = computed(() => selectedBackdrop.value?.image ?? project.value.thumbnail)
+const stageCompanionSprite = computed(() => sprites.value.find((sprite) => sprite.id !== selectedSprite.value?.id))
+const stageCompanionSprites = computed(() => sprites.value.filter((sprite) => !sprite.hidden && sprite.id !== selectedSprite.value?.id))
+const mainCodeDocumentTab = computed<CodeDocumentTab>(() => {
+  if (activeEditorTarget.value === 'stage') {
+    return {
+      id: 'stage',
+      label: 'Stage code',
+      image: stageBackdrop.value,
+      active: true,
+      kind: 'stage'
+    }
+  }
+  return {
+    id: selectedSprite.value?.id ?? 'sprite',
+    label: `${selectedSprite.value?.name ?? 'Sprite'} code`,
+    image: selectedSprite.value?.image ?? project.value.thumbnail,
+    active: true,
+    kind: 'sprite',
+    spriteId: selectedSprite.value?.id
+  }
+})
+const tempCodeDocumentTabs = computed<CodeDocumentTab[]>(() => {
+  if (!tempCodeDocumentsOpen.value) return []
+  const tabs: CodeDocumentTab[] = []
+  const companion = stageCompanionSprite.value
+  if (activeEditorTarget.value !== 'stage') {
+    tabs.push({
+      id: 'stage',
+      label: 'Stage code',
+      image: stageBackdrop.value,
+      active: false,
+      kind: 'stage'
+    })
+  }
+  if (companion != null && companion.id !== selectedSprite.value?.id) {
+    tabs.push({
+      id: companion.id,
+      label: `${companion.name} code`,
+      image: companion.image,
+      active: false,
+      kind: 'sprite',
+      spriteId: companion.id
+    })
+  }
+  return tabs
+})
+const selectedSpriteFrameStyle = computed(() => getStageSpriteFrameStyle(selectedSprite.value))
+const selectedSpriteCoordinate = computed(() => `${selectedSprite.value?.x ?? -224}, ${selectedSprite.value?.y ?? 74}`)
+const selectedMapSpriteCoordinate = computed(() => `${selectedMapSprite.value?.x ?? -224}, ${selectedMapSprite.value?.y ?? 74}`)
+const codeEditorStyle = computed<CSSProperties>(() => ({
+  '--prototype-code-zoom': codeZoom.value
+}))
+const mapWorkspaceStyle = computed(() => ({ backgroundImage: `url(${stageBgUrl})` }))
+const mapStageStyle = computed(() => ({ backgroundImage: `url(${stageBackdrop.value})` }))
+const saveStateMeta = computed(() => {
+  switch (saveState.value) {
+    case 'pending':
+      return { icon: savingIcon, label: 'Pending save', className: 'pending' }
+    case 'saving':
+      return { icon: savingIcon, label: 'Saving', className: 'saving' }
+    case 'failed':
+      return { icon: failedToSaveIcon, label: 'Failed to save', className: 'failed' }
+    case 'offline':
+      return { icon: offlineIcon, label: 'No internet connection', className: 'offline' }
+    case 'saved':
+    default:
+      return { icon: cloudCheckIcon, label: 'Saved', className: 'saved' }
+  }
+})
+
+function syncProjectSelection(data: EditorProjectData) {
+  selectedSpriteId.value = data.sprites[0]?.id ?? ''
+  selectedMapSpriteId.value = data.sprites[0]?.id ?? ''
+  selectedCostumeId.value = data.costumes[0]?.id ?? ''
+  selectedAnimationId.value = data.animations[0]?.id ?? ''
+  selectedBackdropId.value = data.backdrops[0]?.id ?? ''
+  selectedSoundId.value = data.sounds[0]?.id ?? ''
+  selectedWidgetId.value = data.widgets[0]?.id ?? ''
+  mapPhysicsEnabled.value = data.physicsEnabled
+  mapLayerSorting.value = data.layerSorting
+}
+
+watch(
+  project,
+  (nextProject) => {
+    projectDisplayName.value = nextProject.title
+    draftProjectDisplayName.value = nextProject.title
+    syncProjectSelection(editorProjectData.value)
+  },
+  { immediate: true }
+)
+
+function clearSaveStateTimeouts() {
+  saveStateTimeouts.splice(0).forEach((timeoutId) => {
+    window.clearTimeout(timeoutId)
+  })
+}
+
+function simulateAutoSave() {
+  clearSaveStateTimeouts()
+  saveState.value = 'pending'
+  saveStateTimeouts.push(
+    window.setTimeout(() => {
+      saveState.value = 'saving'
+    }, 300)
+  )
+  saveStateTimeouts.push(
+    window.setTimeout(() => {
+      saveState.value = 'saved'
+    }, 900)
+  )
+}
+
+function cycleSaveState() {
+  clearSaveStateTimeouts()
+  const states: SaveState[] = ['saved', 'pending', 'saving', 'failed', 'offline']
+  const nextIndex = (states.indexOf(saveState.value) + 1) % states.length
+  saveState.value = states[nextIndex]
+}
+
+const projectMenuGroups = [
+  [
+    { id: 'new', label: 'New project...', icon: newProjectIcon, action: createPrototypeProject },
+    { id: 'open', label: 'Open project...', icon: openProjectIcon, action: openPrototypeProject }
+  ],
+  [
+    { id: 'import-project', label: 'Import project file...', icon: importProjectIcon, action: markPrototypeAction },
+    {
+      id: 'import-scratch',
+      label: 'Import Scratch project file...',
+      icon: importScratchIcon,
+      badge: 'Beta',
+      action: markPrototypeAction
+    },
+    {
+      id: 'import-assets-scratch',
+      label: 'Import assets from Scratch...',
+      icon: importAssetsScratchIcon,
+      action: markPrototypeAction
+    }
+  ],
+  [{ id: 'export-project', label: 'Export project file', icon: exportProjectIcon, action: markPrototypeAction }],
+  [
+    { id: 'publish-project', label: 'Publish project...', icon: publishIcon, action: openPublishModal },
+    { id: 'project-page', label: 'Open project page', icon: projectPageIcon, action: openProjectPage },
+    { id: 'modify-project-name', label: 'Modify project name', icon: modifyProjectNameIcon, action: startProjectNameEdit }
+  ],
+  [{ id: 'remove-project', label: 'Remove project...', icon: removeProjectIcon, action: markPrototypeAction }]
+]
+
+function selectEditorTab(tab: EditorTab) {
+  activeEditorTarget.value = 'sprite'
+  activeEditorTab.value = tab
+}
+
+function selectCodeCategory(categoryId: CodeCategoryId) {
+  activeCodeCategory.value = categoryId
+}
+
+type SnippetDragState = {
+  pointerId: number
+  startX: number
+  scrollLeft: number
+  target: HTMLElement
+  dragged: boolean
+}
+
+let snippetDragState: SnippetDragState | null = null
+
+function startSnippetHorizontalDrag(event: PointerEvent) {
+  const target = event.currentTarget
+  if (!(target instanceof HTMLElement)) return
+  if (event.pointerType === 'mouse' && event.button !== 0) return
+  if (target.scrollWidth <= target.clientWidth) return
+  snippetDragState = {
+    pointerId: event.pointerId,
+    startX: event.clientX,
+    scrollLeft: target.scrollLeft,
+    target,
+    dragged: false
+  }
+  target.classList.add('dragging')
+  target.setPointerCapture?.(event.pointerId)
+}
+
+function moveSnippetHorizontalDrag(event: PointerEvent) {
+  const dragState = snippetDragState
+  if (dragState == null || dragState.pointerId !== event.pointerId) return
+  const deltaX = event.clientX - dragState.startX
+  if (Math.abs(deltaX) > 2) dragState.dragged = true
+  dragState.target.scrollLeft = dragState.scrollLeft - deltaX
+  if (dragState.dragged) event.preventDefault()
+}
+
+function endSnippetHorizontalDrag(event: PointerEvent) {
+  const dragState = snippetDragState
+  if (dragState == null || dragState.pointerId !== event.pointerId) return
+  if (dragState.target.hasPointerCapture?.(event.pointerId)) {
+    dragState.target.releasePointerCapture(event.pointerId)
+  }
+  dragState.target.classList.remove('dragging')
+  snippetDragState = null
+}
+
+function selectSprite(id = selectedSpriteId.value) {
+  activeEditorTarget.value = 'sprite'
+  selectedSpriteId.value = id
+  spriteMenuOpenFor.value = null
+  activeQuickConfig.value = 'default'
+}
+
+function selectStage(tab: StageTab = 'code') {
+  activeEditorTarget.value = 'stage'
+  activeStageTab.value = tab
+}
+
+function openCodeDocumentTab(tab: CodeDocumentTab) {
+  if (tab.kind === 'stage') {
+    selectStage('code')
+    return
+  }
+  if (tab.spriteId == null) return
+  selectSprite(tab.spriteId)
+  activeEditorTab.value = 'code'
+}
+
+function closeTempCodeDocuments() {
+  tempCodeDocumentsOpen.value = false
+}
+
+function selectEditMode(mode: EditMode) {
+  activeEditMode.value = mode
+  activeQuickConfig.value = 'default'
+}
+
+function openQuickConfig(type: QuickConfigType) {
+  activeQuickConfig.value = type
+}
+
+function backToDefaultQuickConfig() {
+  activeQuickConfig.value = 'default'
+}
+
+function selectedSpriteTransform(sprite: SpriteCard | undefined) {
+  const size = (sprite?.size ?? 100) / 100
+  const heading = sprite?.heading ?? 90
+  const rotationStyle = sprite?.rotationStyle ?? 'normal'
+  const rotation = rotationStyle === 'normal' ? heading - 90 : 0
+  const flip = rotationStyle === 'left-right' && heading < 0 ? ' scaleX(-1)' : ''
+  return `scale(${size}) rotate(${rotation}deg)${flip}`
+}
+
+function getStageSpriteFrameStyle(sprite: SpriteCard | undefined): CSSProperties {
+  return {
+    left: `${stageSpriteOrigin.left + (sprite?.x ?? 0) * stageSpriteScale}px`,
+    top: `${stageSpriteOrigin.top - (sprite?.y ?? 0) * stageSpriteScale}px`,
+    transform: selectedSpriteTransform(sprite)
+  }
+}
+
+function getMapSpriteFrameStyle(sprite: SpriteCard): CSSProperties {
+  return {
+    left: `${((sprite.x + mapWidth.value / 2) / mapWidth.value) * 100}%`,
+    top: `${((mapHeight.value / 2 - sprite.y) / mapHeight.value) * 100}%`
+  }
+}
+
+function updateSelectedSpriteSize(event: Event) {
+  const nextSize = Number((event.target as HTMLInputElement).value)
+  if (!Number.isFinite(nextSize) || selectedSprite.value == null) return
+  selectedSprite.value.size = Math.max(1, Math.min(400, Math.round(nextSize)))
+  markPrototypeAction()
+}
+
+function updateSelectedSpriteX(event: Event) {
+  const nextX = Number((event.target as HTMLInputElement).value)
+  if (!Number.isFinite(nextX) || selectedSprite.value == null) return
+  selectedSprite.value.x = Math.max(-999, Math.min(999, Math.round(nextX)))
+  markPrototypeAction()
+}
+
+function updateSelectedSpriteY(event: Event) {
+  const nextY = Number((event.target as HTMLInputElement).value)
+  if (!Number.isFinite(nextY) || selectedSprite.value == null) return
+  selectedSprite.value.y = Math.max(-999, Math.min(999, Math.round(nextY)))
+  markPrototypeAction()
+}
+
+function updateSelectedMapSpriteX(event: Event) {
+  const nextX = Number((event.target as HTMLInputElement).value)
+  if (!Number.isFinite(nextX) || selectedMapSprite.value == null) return
+  selectedMapSprite.value.x = Math.max(-999, Math.min(999, Math.round(nextX)))
+  markPrototypeAction()
+}
+
+function updateSelectedMapSpriteY(event: Event) {
+  const nextY = Number((event.target as HTMLInputElement).value)
+  if (!Number.isFinite(nextY) || selectedMapSprite.value == null) return
+  selectedMapSprite.value.y = Math.max(-999, Math.min(999, Math.round(nextY)))
+  markPrototypeAction()
+}
+
+function updateSelectedSpriteHeading(event: Event) {
+  const nextHeading = Number((event.target as HTMLInputElement).value)
+  if (!Number.isFinite(nextHeading) || selectedSprite.value == null) return
+  selectedSprite.value.heading = Math.max(-180, Math.min(180, Math.round(nextHeading)))
+  markPrototypeAction()
+}
+
+function updateSelectedSpriteRotationStyle(style: RotationStyle) {
+  const sprite = selectedSprite.value
+  if (sprite == null) return
+  sprite.rotationStyle = style
+  if (style === 'none') {
+    sprite.heading = 90
+  } else if (style === 'left-right') {
+    sprite.heading = sprite.heading >= 0 ? 90 : -90
+  }
+  markPrototypeAction()
+}
+
+function updateSelectedSpriteLeftRight(direction: 'left' | 'right') {
+  if (selectedSprite.value == null) return
+  selectedSprite.value.heading = direction === 'right' ? 90 : -90
+  markPrototypeAction()
+}
+
+function startStageSpriteDrag(sprite: SpriteCard, event: PointerEvent) {
+  if (event.pointerType === 'mouse' && event.button !== 0) return
+  const target = event.currentTarget
+  if (!(target instanceof HTMLElement)) return
+  selectedSpriteId.value = sprite.id
+  activeEditorTarget.value = 'sprite'
+  stageSpriteDragState = {
+    pointerId: event.pointerId,
+    startX: event.clientX,
+    startY: event.clientY,
+    spriteStartX: sprite.x,
+    spriteStartY: sprite.y,
+    sprite,
+    moved: false
+  }
+  target.setPointerCapture?.(event.pointerId)
+  target.classList.add('dragging')
+}
+
+function moveStageSpriteDrag(event: PointerEvent) {
+  const dragState = stageSpriteDragState
+  if (dragState == null || dragState.pointerId !== event.pointerId) return
+  const deltaX = event.clientX - dragState.startX
+  const deltaY = event.clientY - dragState.startY
+  if (Math.abs(deltaX) > 1 || Math.abs(deltaY) > 1) dragState.moved = true
+  dragState.sprite.x = Math.max(-999, Math.min(999, Math.round(dragState.spriteStartX + deltaX / stageSpriteScale)))
+  dragState.sprite.y = Math.max(-999, Math.min(999, Math.round(dragState.spriteStartY - deltaY / stageSpriteScale)))
+  event.preventDefault()
+}
+
+function endStageSpriteDrag(event: PointerEvent) {
+  const dragState = stageSpriteDragState
+  if (dragState == null || dragState.pointerId !== event.pointerId) return
+  const target = event.currentTarget
+  if (target instanceof HTMLElement && target.hasPointerCapture?.(event.pointerId)) {
+    target.releasePointerCapture(event.pointerId)
+  }
+  if (target instanceof HTMLElement) target.classList.remove('dragging')
+  if (dragState.moved) markPrototypeAction()
+  stageSpriteDragState = null
+}
+
+function startMapSpriteDrag(sprite: SpriteCard, event: PointerEvent) {
+  if (event.pointerType === 'mouse' && event.button !== 0) return
+  const target = event.currentTarget
+  if (!(target instanceof HTMLElement)) return
+  const stage = target.closest<HTMLElement>('.map-stage')
+  if (stage == null) return
+  const rect = stage.getBoundingClientRect()
+  selectedMapSpriteId.value = sprite.id
+  mapSpriteConfigExpanded.value = true
+  mapSpriteDragState = {
+    pointerId: event.pointerId,
+    startX: event.clientX,
+    startY: event.clientY,
+    spriteStartX: sprite.x,
+    spriteStartY: sprite.y,
+    stageWidth: rect.width,
+    stageHeight: rect.height,
+    sprite,
+    moved: false
+  }
+  target.setPointerCapture?.(event.pointerId)
+  target.classList.add('dragging')
+}
+
+function moveMapSpriteDrag(event: PointerEvent) {
+  const dragState = mapSpriteDragState
+  if (dragState == null || dragState.pointerId !== event.pointerId) return
+  const deltaX = event.clientX - dragState.startX
+  const deltaY = event.clientY - dragState.startY
+  if (Math.abs(deltaX) > 1 || Math.abs(deltaY) > 1) dragState.moved = true
+  dragState.sprite.x = Math.max(-999, Math.min(999, Math.round(dragState.spriteStartX + (deltaX / dragState.stageWidth) * mapWidth.value)))
+  dragState.sprite.y = Math.max(-999, Math.min(999, Math.round(dragState.spriteStartY - (deltaY / dragState.stageHeight) * mapHeight.value)))
+  event.preventDefault()
+}
+
+function endMapSpriteDrag(event: PointerEvent) {
+  const dragState = mapSpriteDragState
+  if (dragState == null || dragState.pointerId !== event.pointerId) return
+  const target = event.currentTarget
+  if (target instanceof HTMLElement && target.hasPointerCapture?.(event.pointerId)) {
+    target.releasePointerCapture(event.pointerId)
+  }
+  if (target instanceof HTMLElement) target.classList.remove('dragging')
+  if (dragState.moved) markPrototypeAction()
+  mapSpriteDragState = null
+}
+
+function moveSelectedSpriteLayer(direction: 'up' | 'top' | 'down' | 'bottom') {
+  const sprite = selectedSprite.value
+  if (sprite == null) return
+  const index = sprites.value.findIndex((item) => item.id === sprite.id)
+  if (index < 0) return
+  const [item] = sprites.value.splice(index, 1)
+  if (direction === 'top') {
+    sprites.value.push(item)
+  } else if (direction === 'bottom') {
+    sprites.value.unshift(item)
+  } else if (direction === 'up') {
+    sprites.value.splice(Math.min(index + 1, sprites.value.length), 0, item)
+  } else {
+    sprites.value.splice(Math.max(index - 1, 0), 0, item)
+  }
+  activeQuickConfig.value = 'default'
+  markPrototypeAction()
+}
+
+function selectMapSprite(spriteId: string) {
+  selectedMapSpriteId.value = spriteId
+  mapSpriteConfigExpanded.value = true
+}
+
+function updateMapSpriteRotationStyle(style: RotationStyle) {
+  const sprite = selectedMapSprite.value
+  if (sprite == null) return
+  sprite.rotationStyle = style
+  if (style === 'none') {
+    sprite.heading = 90
+  } else if (style === 'left-right') {
+    sprite.heading = sprite.heading >= 0 ? 90 : -90
+  }
+  markPrototypeAction()
+}
+
+function updateMapSpriteVisibility(visible: boolean) {
+  const sprite = selectedMapSprite.value
+  if (sprite == null) return
+  sprite.hidden = !visible
+  markPrototypeAction()
+}
+
+function toggleMapSpritePhysicsFlag(flag: string) {
+  const flags = new Set(mapSpritePhysicsFlags.value)
+  if (flags.has(flag)) {
+    flags.delete(flag)
+  } else {
+    flags.add(flag)
+    if (flag === 'Gravity') flags.add('Collision')
+    if (flag === 'Immovable') {
+      flags.add('Collision')
+      flags.delete('Gravity')
+    }
+  }
+  mapSpritePhysicsFlags.value = Array.from(flags)
+  markPrototypeAction()
+}
+
+async function startProjectNameEdit() {
+  draftProjectDisplayName.value = projectDisplayName.value
+  projectNameEditing.value = true
+  await nextTick()
+  projectNameInputRef.value?.focus()
+  projectNameInputRef.value?.select()
+}
+
+function cancelProjectNameEdit() {
+  draftProjectDisplayName.value = projectDisplayName.value
+  projectNameEditing.value = false
+}
+
+function submitProjectNameEdit() {
+  if (!projectNameEditing.value) return
+  const nextName = draftProjectDisplayName.value.trim()
+  if (nextName === '' || nextName === projectDisplayName.value) {
+    cancelProjectNameEdit()
+    return
+  }
+  projectDisplayName.value = nextName
+  projectNameEditing.value = false
+  simulateAutoSave()
+}
+
+function toggleProjectMenu() {
+  projectMenuOpen.value = !projectMenuOpen.value
+}
+
+function closeProjectMenu() {
+  projectMenuOpen.value = false
+}
+
+function openPublishModal() {
+  publishStatusMessage.value = ''
+  publishModalOpen.value = true
+}
+
+function cancelPublishProject() {
+  if (publishSubmitting.value) return
+  publishModalOpen.value = false
+}
+
+function submitPublishProject() {
+  if (publishSubmitting.value) return
+  publishSubmitting.value = true
+  publishTimer = window.setTimeout(() => {
+    publishTimer = null
+    publishSubmitting.value = false
+    publishModalOpen.value = false
+    publishStatusMessage.value = `Published ${projectDisplayName.value} to the local prototype.`
+    simulateAutoSave()
+  }, 700)
+}
+
+function toggleProfileMenu() {
+  profileMenuOpen.value = !profileMenuOpen.value
+}
+
+function closeProfileMenu() {
+  profileMenuOpen.value = false
+}
+
+async function handleProfileMenuItem(action: () => void | Promise<void>) {
+  closeProfileMenu()
+  await action()
+}
+
+function toggleProfileLanguage() {
+  profileLanguage.value = profileLanguage.value === 'English' ? '中文' : 'English'
+}
+
+function openSignedInUserPage() {
+  router.push('/user/qingqing')
+}
+
+function openSignedInUserProjects() {
+  router.push('/user/qingqing/projects')
+}
+
+function signOutPrototypeUser() {
+  router.push('/')
+}
+
+function toggleAddSpriteMenu() {
+  addSpriteMenuOpen.value = !addSpriteMenuOpen.value
+}
+
+function closeAddSpriteMenu() {
+  addSpriteMenuOpen.value = false
+}
+
+function getMenuPositionStyle(position: { top: number; left: number }): CSSProperties {
+  return {
+    top: `${position.top}px`,
+    left: `${position.left}px`
+  }
+}
+
+function getAddCostumeMenuStyle(): CSSProperties {
+  return getMenuPositionStyle(addCostumeMenuPosition.value)
+}
+
+function updateAddCostumeMenuPosition(trigger: HTMLElement) {
+  const rect = trigger.getBoundingClientRect()
+  const menuWidth = 184
+  const menuHeight = 44
+  const viewportPadding = 8
+  const left = Math.min(
+    Math.max(viewportPadding, rect.left),
+    Math.max(viewportPadding, window.innerWidth - menuWidth - viewportPadding)
+  )
+  const top = Math.max(viewportPadding, rect.top - menuHeight - 8)
+  addCostumeMenuPosition.value = { top, left }
+}
+
+function toggleAddCostumeMenu(event: MouseEvent) {
+  const trigger = event.currentTarget
+  if (!(trigger instanceof HTMLElement)) return
+  updateAddCostumeMenuPosition(trigger)
+  addCostumeMenuOpen.value = !addCostumeMenuOpen.value
+}
+
+function closeAddCostumeMenu() {
+  addCostumeMenuOpen.value = false
+}
+
+function getCostumeMenuStyle(): CSSProperties {
+  return getMenuPositionStyle(costumeMenuPosition.value)
+}
+
+function updateCostumeMenuPosition(trigger: HTMLElement) {
+  const rect = trigger.getBoundingClientRect()
+  const menuWidth = 184
+  const viewportPadding = 8
+  const left = Math.min(
+    Math.max(viewportPadding, rect.right - menuWidth),
+    Math.max(viewportPadding, window.innerWidth - menuWidth - viewportPadding)
+  )
+  const top = Math.min(rect.bottom + 6, Math.max(viewportPadding, window.innerHeight - 164))
+  costumeMenuPosition.value = { top, left }
+}
+
+function toggleCostumeMenu(costumeId: string, event: MouseEvent) {
+  const trigger = event.currentTarget
+  if (!(trigger instanceof HTMLElement)) return
+  selectedCostumeId.value = costumeId
+  if (costumeMenuOpenFor.value === costumeId) {
+    closeCostumeMenu()
+    return
+  }
+  updateCostumeMenuPosition(trigger)
+  costumeMenuOpenFor.value = costumeId
+}
+
+function closeCostumeMenu() {
+  costumeMenuOpenFor.value = null
+}
+
+function getAddAnimationMenuStyle(): CSSProperties {
+  return getMenuPositionStyle(addAnimationMenuPosition.value)
+}
+
+function updateAddAnimationMenuPosition(trigger: HTMLElement) {
+  const rect = trigger.getBoundingClientRect()
+  const menuWidth = 240
+  const menuHeight = 44
+  const viewportPadding = 8
+  const left = Math.min(
+    Math.max(viewportPadding, rect.left),
+    Math.max(viewportPadding, window.innerWidth - menuWidth - viewportPadding)
+  )
+  const top = Math.max(viewportPadding, rect.top - menuHeight - 8)
+  addAnimationMenuPosition.value = { top, left }
+}
+
+function toggleAddAnimationMenu(event: MouseEvent) {
+  const trigger = event.currentTarget
+  if (!(trigger instanceof HTMLElement)) return
+  updateAddAnimationMenuPosition(trigger)
+  addAnimationMenuOpen.value = !addAnimationMenuOpen.value
+}
+
+function closeAddAnimationMenu() {
+  addAnimationMenuOpen.value = false
+}
+
+function handleGroupCostumesAsAnimation() {
+  closeAddAnimationMenu()
+  groupCostumesAsAnimation()
+}
+
+function getAnimationMenuStyle(): CSSProperties {
+  return getMenuPositionStyle(animationMenuPosition.value)
+}
+
+function updateAnimationMenuPosition(trigger: HTMLElement) {
+  const rect = trigger.getBoundingClientRect()
+  const menuWidth = 184
+  const viewportPadding = 8
+  const left = Math.min(
+    Math.max(viewportPadding, rect.right - menuWidth),
+    Math.max(viewportPadding, window.innerWidth - menuWidth - viewportPadding)
+  )
+  const top = Math.min(rect.bottom + 6, Math.max(viewportPadding, window.innerHeight - 164))
+  animationMenuPosition.value = { top, left }
+}
+
+function toggleAnimationMenu(animationId: string, event: MouseEvent) {
+  const trigger = event.currentTarget
+  if (!(trigger instanceof HTMLElement)) return
+  selectedAnimationId.value = animationId
+  if (animationMenuOpenFor.value === animationId) {
+    closeAnimationMenu()
+    return
+  }
+  updateAnimationMenuPosition(trigger)
+  animationMenuOpenFor.value = animationId
+}
+
+function closeAnimationMenu() {
+  animationMenuOpenFor.value = null
+}
+
+function getSpriteMenuStyle(): CSSProperties {
+  return {
+    top: `${spriteMenuPosition.value.top}px`,
+    left: `${spriteMenuPosition.value.left}px`
+  }
+}
+
+function updateSpriteMenuPosition(trigger: HTMLElement) {
+  const rect = trigger.getBoundingClientRect()
+  const menuWidth = 184
+  const viewportPadding = 8
+  const left = Math.min(
+    Math.max(viewportPadding, rect.right - menuWidth),
+    Math.max(viewportPadding, window.innerWidth - menuWidth - viewportPadding)
+  )
+  const top = Math.min(rect.bottom + 6, Math.max(viewportPadding, window.innerHeight - 220))
+  spriteMenuPosition.value = { top, left }
+}
+
+function toggleSpriteMenu(spriteId: string, event: MouseEvent) {
+  const trigger = event.currentTarget
+  if (!(trigger instanceof HTMLElement)) return
+  activeEditorTarget.value = 'sprite'
+  selectedSpriteId.value = spriteId
+  if (spriteMenuOpenFor.value === spriteId) {
+    closeSpriteMenu()
+    return
+  }
+  updateSpriteMenuPosition(trigger)
+  spriteMenuOpenFor.value = spriteId
+}
+
+function createSpriteCard(source: string, name: string, image: string): SpriteCard {
+  const sprite: SpriteCard = {
+    id: `${source}-sprite-${Date.now()}`,
+    name,
+    shortName: name.length > 10 ? `${name.slice(0, 8)}...` : name,
+    image,
+    hidden: false,
+    x: -224,
+    y: 74,
+    size: 100,
+    heading: 90,
+    rotationStyle: 'normal'
+  }
+  return sprite
+}
+
+function appendSprite(sprite: SpriteCard) {
+  sprites.value.push(sprite)
+  selectedSpriteId.value = sprite.id
+  selectedMapSpriteId.value = sprite.id
+  activeEditorTarget.value = 'sprite'
+  markPrototypeAction()
+}
+
+function addLocalSprite(source: 'local' | 'library') {
+  const nextIndex = sprites.value.length + 1
+  const presets = {
+    local: { name: `Local sprite ${nextIndex}`, image: niuXiaoQiUrl },
+    library: { name: `Library sprite ${nextIndex}`, image: niuXiaoHuaUrl }
+  }
+  const preset = presets[source]
+  appendSprite(createSpriteCard(source, preset.name, preset.image))
+  closeAddSpriteMenu()
+}
+
+function openSpriteGenModal() {
+  spriteGenModalOpen.value = true
+  closeAddSpriteMenu()
+}
+
+function cancelSpriteGenModal() {
+  spriteGenModalOpen.value = false
+}
+
+function addGeneratedSprite(result: SpriteGeneratorResult) {
+  const nextIndex = sprites.value.length + 1
+  const name = result.description !== '' ? result.description : result.candidate.name
+  appendSprite(createSpriteCard('ai', `${name} ${nextIndex}`, result.candidate.image))
+  spriteGenModalOpen.value = false
+}
+
+function groupCostumesAsAnimation() {
+  const nextIndex = animations.value.length + 1
+  const sourceFrames = costumes.value.map((costume) => costume.image)
+  const fallbackFrame = selectedSprite.value?.image ?? project.value.thumbnail
+  const frames = sourceFrames.length > 0 ? sourceFrames : [fallbackFrame]
+  const animation: AssetItem = {
+    id: `animation-${Date.now()}`,
+    name: `animation${nextIndex}`,
+    image: frames[0],
+    frames: frames.length > 1 ? frames : [frames[0], frames[0]],
+    duration: `${Math.max(0.2, frames.length * 0.2).toFixed(1)}s`,
+    binding: '0',
+    sound: 'None'
+  }
+
+  animations.value.push(animation)
+  selectedAnimationId.value = animation.id
+  editorRevision.value += 1
+  activeEditorTarget.value = 'sprite'
+  activeEditorTab.value = 'animations'
+  closeAddAnimationMenu()
+  markPrototypeAction()
+}
+
+function getUniqueAnimationName(baseName: string) {
+  const existingNames = new Set(animations.value.map((animation) => animation.name))
+  if (!existingNames.has(baseName)) return baseName
+  let suffix = 2
+  while (existingNames.has(`${baseName} ${suffix}`)) suffix += 1
+  return `${baseName} ${suffix}`
+}
+
+function getUniqueCostumeName(baseName: string) {
+  const existingNames = new Set(costumes.value.map((costume) => costume.name))
+  if (!existingNames.has(baseName)) return baseName
+  let suffix = 2
+  while (existingNames.has(`${baseName} ${suffix}`)) suffix += 1
+  return `${baseName} ${suffix}`
+}
+
+function addCostumeFromLocalFile() {
+  const nextIndex = costumes.value.length + 1
+  const sources = [niuXiaoQiUrl, niuXiaoHuaUrl, flowerUrl, tornadoUrl]
+  const costume: AssetItem = {
+    id: `local-costume-${Date.now()}`,
+    name: getUniqueCostumeName(`Local costume ${nextIndex}`),
+    image: sources[(nextIndex - 1) % sources.length]
+  }
+  costumes.value.push(costume)
+  selectedCostumeId.value = costume.id
+  closeAddCostumeMenu()
+  markPrototypeAction()
+}
+
+function duplicateCostume(costume: AssetItem) {
+  const copy: AssetItem = {
+    ...costume,
+    id: `${costume.id}-copy-${Date.now()}`,
+    name: getUniqueCostumeName(`${costume.name} 2`),
+    frames: costume.frames != null ? [...costume.frames] : undefined
+  }
+  const sourceIndex = costumes.value.findIndex((item) => item.id === costume.id)
+  costumes.value.splice(sourceIndex >= 0 ? sourceIndex + 1 : costumes.value.length, 0, copy)
+  selectedCostumeId.value = copy.id
+  markPrototypeAction()
+}
+
+function renameCostume(costume: AssetItem) {
+  const nextName = window.prompt('Rename costume', costume.name)?.trim()
+  if (!nextName || nextName === costume.name) return
+  costume.name = nextName
+  markPrototypeAction()
+}
+
+function removeCostume(costume: AssetItem) {
+  if (costumes.value.length <= 1) return
+  const currentIndex = costumes.value.findIndex((item) => item.id === costume.id)
+  if (currentIndex < 0) return
+  costumes.value.splice(currentIndex, 1)
+  const nextCostume = costumes.value[Math.min(currentIndex, costumes.value.length - 1)] ?? costumes.value[0]
+  selectedCostumeId.value = nextCostume?.id ?? ''
+  markPrototypeAction()
+}
+
+function handleCostumeMenuAction(action: (costume: AssetItem) => void) {
+  const costume = costumeMenuCostume.value
+  closeCostumeMenu()
+  if (costume == null) return
+  action(costume)
+}
+
+function duplicateAnimation(animation: AssetItem) {
+  const copy: AssetItem = {
+    ...animation,
+    id: `${animation.id}-copy-${Date.now()}`,
+    name: getUniqueAnimationName(`${animation.name} 2`),
+    frames: [...(animation.frames ?? [animation.image])]
+  }
+  const sourceIndex = animations.value.findIndex((item) => item.id === animation.id)
+  animations.value.splice(sourceIndex >= 0 ? sourceIndex + 1 : animations.value.length, 0, copy)
+  selectedAnimationId.value = copy.id
+  editorRevision.value += 1
+  markPrototypeAction()
+}
+
+function renameAnimation(animation: AssetItem) {
+  const nextName = window.prompt('Rename animation', animation.name)?.trim()
+  if (!nextName || nextName === animation.name) return
+  animation.name = nextName
+  editorRevision.value += 1
+  markPrototypeAction()
+}
+
+function requestRemoveAnimation(animation: AssetItem) {
+  animationPendingRemoval.value = animation
+  preserveRemovedAnimationFrames.value = false
+}
+
+function cancelRemoveAnimation() {
+  animationPendingRemoval.value = null
+  preserveRemovedAnimationFrames.value = false
+}
+
+function confirmRemoveAnimation() {
+  const animation = animationPendingRemoval.value
+  if (animation == null) return
+  const currentIndex = animations.value.findIndex((item) => item.id === animation.id)
+  if (currentIndex < 0) {
+    cancelRemoveAnimation()
+    return
+  }
+  if (preserveRemovedAnimationFrames.value) {
+    const frames = animation.frames ?? [animation.image]
+    frames.forEach((frame, index) => {
+      costumes.value.push({
+        id: `${animation.id}-frame-${index}-${Date.now()}`,
+        name: getUniqueCostumeName(`${animation.name} ${index + 1}`),
+        image: frame
+      })
+    })
+  }
+  animations.value.splice(currentIndex, 1)
+  const nextAnimation = animations.value[Math.min(currentIndex, animations.value.length - 1)] ?? animations.value[0] ?? null
+  selectedAnimationId.value = nextAnimation?.id ?? ''
+  editorRevision.value += 1
+  cancelRemoveAnimation()
+  markPrototypeAction()
+}
+
+function handleAnimationMenuAction(action: (animation: AssetItem) => void) {
+  const animation = animationMenuAnimation.value
+  closeAnimationMenu()
+  if (animation == null) return
+  action(animation)
+}
+
+function closeSpriteMenu() {
+  spriteMenuOpenFor.value = null
+}
+
+function zoomCodeEditor(direction: 'in' | 'out' | 'reset') {
+  if (direction === 'reset') {
+    codeZoom.value = 1
+    return
+  }
+  const delta = direction === 'in' ? 0.1 : -0.1
+  codeZoom.value = Math.min(1.4, Math.max(0.8, Number((codeZoom.value + delta).toFixed(2))))
+}
+
+async function handleProjectMenuItem(action: () => void | Promise<void>) {
+  closeProjectMenu()
+  await action()
+}
+
+function createPrototypeProject() {
+  router.push('/editor/qingqing/niu-run')
+}
+
+function openPrototypeProject() {
+  router.push('/user/qingqing/projects')
+}
+
+function openProjectPage() {
+  router.push(`/project/${encodeURIComponent(project.value.owner.username)}/${encodeURIComponent(project.value.name)}`)
+}
+
+function markPrototypeAction() {
+  simulateAutoSave()
+}
+
+function createSoundEditState(): SoundEditState {
+  return {
+    left: 0,
+    right: 1,
+    gain: 0.55,
+    savedLeft: 0,
+    savedRight: 1,
+    savedGain: 0.55
+  }
+}
+
+function getSoundEditState(soundId: string) {
+  soundEditStates.value[soundId] ??= createSoundEditState()
+  return soundEditStates.value[soundId]
+}
+
+function updateSelectedSoundRange(handle: 'left' | 'right', event: PointerEvent, waveform: Element | null) {
+  const sound = selectedSound.value
+  if (sound == null) return
+  if (waveform == null) return
+  const rect = waveform.getBoundingClientRect()
+  const next = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width))
+  const edit = getSoundEditState(sound.id)
+  if (handle === 'left') {
+    edit.left = Number(Math.min(next, edit.right - 0.05).toFixed(2))
+  } else {
+    edit.right = Number(Math.max(next, edit.left + 0.05).toFixed(2))
+  }
+}
+
+function startSoundRangeDrag(handle: 'left' | 'right', event: PointerEvent) {
+  const waveform = (event.currentTarget as HTMLElement).closest('.sound-waveform')
+  updateSelectedSoundRange(handle, event, waveform)
+  const move = (moveEvent: PointerEvent) => updateSelectedSoundRange(handle, moveEvent, waveform)
+  const stop = () => {
+    window.removeEventListener('pointermove', move)
+    window.removeEventListener('pointerup', stop)
+    window.removeEventListener('pointercancel', stop)
+  }
+  window.addEventListener('pointermove', move)
+  window.addEventListener('pointerup', stop, { once: true })
+  window.addEventListener('pointercancel', stop, { once: true })
+}
+
+function updateSelectedSoundGain(event: PointerEvent) {
+  const sound = selectedSound.value
+  if (sound == null) return
+  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
+  getSoundEditState(sound.id).gain = Number(Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width)).toFixed(2))
+}
+
+function resetSelectedSoundEdit() {
+  const sound = selectedSound.value
+  if (sound == null) return
+  const edit = getSoundEditState(sound.id)
+  edit.left = edit.savedLeft
+  edit.right = edit.savedRight
+  edit.gain = edit.savedGain
+}
+
+function saveSelectedSoundEdit() {
+  const sound = selectedSound.value
+  if (sound == null) return
+  const edit = getSoundEditState(sound.id)
+  edit.savedLeft = edit.left
+  edit.savedRight = edit.right
+  edit.savedGain = edit.gain
+  markPrototypeAction()
+}
+
+function handleSpriteMenuAction(action: () => void) {
+  action()
+  closeSpriteMenu()
+}
+
+function handleOpenSpriteMenuAction(action: (sprite: SpriteCard) => void) {
+  const sprite = spriteMenuSprite.value
+  if (sprite == null) return
+  handleSpriteMenuAction(() => action(sprite))
+}
+
+function toggleSpriteVisibility(sprite: SpriteCard) {
+  sprite.hidden = !sprite.hidden
+  markPrototypeAction()
+}
+
+function duplicateSprite(sprite: SpriteCard) {
+  const copyIndex = sprites.value.filter((item) => item.name.startsWith(sprite.name)).length + 1
+  const copy: SpriteCard = {
+    ...sprite,
+    id: `${sprite.id}-copy-${Date.now()}`,
+    name: `${sprite.name} ${copyIndex}`,
+    shortName: `${sprite.shortName} ${copyIndex}`,
+    hidden: false
+  }
+  const sourceIndex = sprites.value.findIndex((item) => item.id === sprite.id)
+  sprites.value.splice(sourceIndex >= 0 ? sourceIndex + 1 : sprites.value.length, 0, copy)
+  selectedSpriteId.value = copy.id
+  selectedMapSpriteId.value = copy.id
+  markPrototypeAction()
+}
+
+async function renameSprite(sprite: SpriteCard) {
+  spritePendingRename.value = sprite
+  draftSpriteRenameName.value = sprite.name
+  spriteRenameError.value = ''
+  await nextTick()
+  spriteRenameInputRef.value?.focus()
+  spriteRenameInputRef.value?.select()
+}
+
+function cancelSpriteRename() {
+  spritePendingRename.value = null
+  draftSpriteRenameName.value = ''
+  spriteRenameError.value = ''
+}
+
+function validateSpriteRename(nextName: string, sprite: SpriteCard) {
+  if (nextName === '') return 'Name is required.'
+  if (nextName !== sprite.name && sprites.value.some((item) => item.id !== sprite.id && item.name === nextName)) {
+    return 'A sprite with this name already exists.'
+  }
+  return ''
+}
+
+function submitSpriteRename() {
+  const sprite = spritePendingRename.value
+  if (sprite == null) return
+  const nextName = draftSpriteRenameName.value.trim()
+  const error = validateSpriteRename(nextName, sprite)
+  if (error !== '') {
+    spriteRenameError.value = error
+    return
+  }
+  if (nextName === sprite.name) {
+    cancelSpriteRename()
+    return
+  }
+  sprite.name = nextName
+  sprite.shortName = nextName.length > 10 ? `${nextName.slice(0, 8)}...` : nextName
+  cancelSpriteRename()
+  markPrototypeAction()
+}
+
+async function startMapSpriteRename() {
+  const sprite = selectedMapSprite.value
+  if (sprite == null) return
+  draftMapSpriteName.value = sprite.name
+  mapSpriteNameEditing.value = true
+  await nextTick()
+  mapSpriteNameInputRef.value?.focus()
+  mapSpriteNameInputRef.value?.select()
+}
+
+function cancelMapSpriteRename() {
+  mapSpriteNameEditing.value = false
+  draftMapSpriteName.value = ''
+}
+
+function submitMapSpriteRename() {
+  if (!mapSpriteNameEditing.value) return
+  const sprite = selectedMapSprite.value
+  const nextName = draftMapSpriteName.value.trim()
+  if (sprite == null || nextName === '' || nextName === sprite.name) {
+    cancelMapSpriteRename()
+    return
+  }
+  sprite.name = nextName
+  sprite.shortName = nextName.length > 10 ? `${nextName.slice(0, 8)}...` : nextName
+  cancelMapSpriteRename()
+}
+
+function saveSpriteToLibrary(sprite: SpriteCard) {
+  selectedSpriteId.value = sprite.id
+  markPrototypeAction()
+}
+
+function removeSprite(sprite: SpriteCard) {
+  if (sprites.value.length <= 1) return
+  const currentIndex = sprites.value.findIndex((item) => item.id === sprite.id)
+  if (currentIndex < 0) return
+  sprites.value.splice(currentIndex, 1)
+  const nextSprite = sprites.value[Math.min(currentIndex, sprites.value.length - 1)] ?? sprites.value[0]
+  selectedSpriteId.value = nextSprite?.id ?? ''
+  selectedMapSpriteId.value = nextSprite?.id ?? ''
+  markPrototypeAction()
+}
+
+function handleDocumentClick(event: MouseEvent) {
+  const target = event.target
+  if (!(target instanceof Node)) return
+  if (!projectMenuRef.value?.contains(target)) closeProjectMenu()
+  if (!profileMenuRef.value?.contains(target)) closeProfileMenu()
+  if (!addSpriteMenuRef.value?.contains(target) && !mapAddSpriteMenuRef.value?.contains(target)) closeAddSpriteMenu()
+  if (!addCostumeMenuRef.value?.contains(target) && !(target instanceof Element && target.closest('.costume-add-menu'))) {
+    closeAddCostumeMenu()
+  }
+  if (!costumeMenuRef.value?.contains(target) && !(target instanceof Element && target.closest('.costume-options-menu'))) {
+    closeCostumeMenu()
+  }
+  if (!addAnimationMenuRef.value?.contains(target) && !(target instanceof Element && target.closest('.animation-add-menu'))) {
+    closeAddAnimationMenu()
+  }
+  if (!animationMenuRef.value?.contains(target) && !(target instanceof Element && target.closest('.animation-options-menu'))) {
+    closeAnimationMenu()
+  }
+  if (!spriteMenuRef.value?.contains(target) && !(target instanceof Element && target.closest('.sprite-options-menu'))) {
+    closeSpriteMenu()
+  }
+}
+
+async function runProject() {
+  runnerActive.value = true
+  await nextTick()
+  await runnerRef.value?.run()
+}
+
+onMounted(() => {
+  document.title = `Edit ${project.value.title} - XBuilder`
+  document.addEventListener('click', handleDocumentClick)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleDocumentClick)
+  snippetDragState?.target.classList.remove('dragging')
+  snippetDragState = null
+  if (publishTimer != null) window.clearTimeout(publishTimer)
+  clearSaveStateTimeouts()
+})
+</script>
+
+<template>
+  <main class="prototype-editor min-w-360 bg-[#f1f5f7] text-grey-1000">
+    <header class="editor-navbar">
+      <div class="navbar-left">
+        <RouterLink class="brand" to="/" aria-label="XBuilder home">
+          <img src="@/assets/navbar-logo.svg" alt="XBuilder" />
+        </RouterLink>
+        <div class="navbar-divider"></div>
+        <div ref="projectMenuRef" class="navbar-dropdown">
+          <button
+            class="icon-button project-menu-trigger"
+            type="button"
+            aria-label="Project menu"
+            :aria-expanded="projectMenuOpen"
+            aria-haspopup="menu"
+            @click.stop="toggleProjectMenu"
+          >
+            <span class="project-file-icon" aria-hidden="true" v-html="projectFileIcon"></span>
+            <span class="project-menu-arrow" aria-hidden="true" v-html="arrowMiniIcon"></span>
+          </button>
+          <div v-if="projectMenuOpen" class="project-menu" role="menu" @click.stop>
+            <div v-for="group in projectMenuGroups" :key="group[0]?.id" class="project-menu-group">
+              <button
+                v-for="item in group"
+                :key="item.id"
+                class="project-menu-item"
+                type="button"
+                role="menuitem"
+                @click="handleProjectMenuItem(item.action)"
+              >
+                <img :src="item.icon" alt="" />
+                <span>{{ item.label }}</span>
+                <UITag v-if="item.badge">{{ item.badge }}</UITag>
+              </button>
+            </div>
+          </div>
+        </div>
+        <RouterLink class="flex h-full items-center px-3 text-grey-1000 hover:bg-grey-400" to="/tutorials" aria-label="Tutorials" title="Tutorials">
+          <span class="block h-5 w-5 [&_svg]:block [&_svg]:h-5 [&_svg]:w-5" v-html="tutorialIcon"></span>
+        </RouterLink>
+        <button class="icon-button muted" type="button" aria-label="Undo">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M9 7 4 12l5 5" />
+            <path d="M5 12h9a5 5 0 0 1 5 5" />
+          </svg>
+        </button>
+        <button class="icon-button muted" type="button" aria-label="Redo">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="m15 7 5 5-5 5" />
+            <path d="M19 12h-9a5 5 0 0 0-5 5" />
+          </svg>
+        </button>
+      </div>
+
+      <div class="navbar-title">
+        <button
+          v-if="!projectNameEditing"
+          class="project-name-trigger"
+          type="button"
+          aria-label="Edit project display name"
+          @click="startProjectNameEdit"
+        >
+          <span>{{ projectDisplayName }}</span>
+          <span class="project-name-edit-icon" v-html="editIcon"></span>
+        </button>
+        <form v-else class="project-name-form" @submit.prevent="submitProjectNameEdit">
+          <input
+            ref="projectNameInputRef"
+            v-model="draftProjectDisplayName"
+            aria-label="Project display name"
+            @blur="submitProjectNameEdit"
+            @keydown.esc.prevent="cancelProjectNameEdit"
+          />
+        </form>
+        <button
+          class="auto-save-state"
+          :class="saveStateMeta.className"
+          type="button"
+          :aria-label="saveStateMeta.label"
+          :title="saveStateMeta.label"
+          @click="cycleSaveState"
+        >
+          <span v-html="saveStateMeta.icon"></span>
+        </button>
+      </div>
+
+      <div class="navbar-right">
+        <div class="mode-button-group" role="group" aria-label="Editor mode">
+          <button
+            class="mode-button"
+            :class="{ active: activeEditMode === 'default' }"
+            type="button"
+            aria-label="Default mode"
+            @click="selectEditMode('default')"
+          >
+            <span v-html="defaultModeIcon"></span>
+          </button>
+          <button
+            class="mode-button"
+            :class="{ active: activeEditMode === 'map' }"
+            type="button"
+            aria-label="Map edit mode"
+            @click="selectEditMode('map')"
+          >
+            <span v-html="mapEditModeIcon"></span>
+          </button>
+        </div>
+        <div ref="profileMenuRef" class="profile-dropdown">
+          <button
+            class="profile-trigger"
+            type="button"
+            aria-label="User profile menu"
+            :aria-expanded="profileMenuOpen"
+            aria-haspopup="menu"
+            @click.stop="toggleProfileMenu"
+          >
+            <img class="profile" src="@ui-images/avatar.png" alt="" />
+          </button>
+          <div v-if="profileMenuOpen" class="profile-menu" role="menu" @click.stop>
+            <div class="profile-menu-group">
+              <div class="profile-menu-user" role="presentation">Qingqing</div>
+              <button class="profile-menu-item" type="button" role="menuitem" @click="handleProfileMenuItem(toggleProfileLanguage)">
+                <span>Language</span>
+                <UITag>{{ profileLanguage }}</UITag>
+              </button>
+            </div>
+            <div class="profile-menu-group">
+              <button class="profile-menu-item" type="button" role="menuitem" @click="handleProfileMenuItem(openSignedInUserPage)">
+                Profile
+              </button>
+              <button class="profile-menu-item" type="button" role="menuitem" @click="handleProfileMenuItem(openSignedInUserProjects)">
+                Projects
+              </button>
+            </div>
+            <div class="profile-menu-group">
+              <button class="profile-menu-item" type="button" role="menuitem" @click="handleProfileMenuItem(signOutPrototypeUser)">
+                Sign out
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <section v-if="activeEditMode === 'default'" class="editor-main">
+      <section class="code-card">
+        <header class="code-tabs flex h-[47px] items-end overflow-hidden border-b border-grey-400 px-2">
+          <UITabs
+            v-if="activeEditorTarget === 'sprite'"
+            class="h-full flex-1 gap-6"
+            :value="activeEditorTab"
+            @update:value="(tab) => selectEditorTab(tab as EditorTab)"
+          >
+            <UITab value="code">Code</UITab>
+            <UITab value="costumes">Costumes</UITab>
+            <UITab value="animations">Animations</UITab>
+          </UITabs>
+          <UITabs
+            v-else
+            class="h-full flex-1 gap-6"
+            :value="activeStageTab"
+            @update:value="(tab) => selectStage(tab as StageTab)"
+          >
+            <UITab value="code">Code</UITab>
+            <UITab value="backdrops">Backdrops</UITab>
+            <UITab value="sounds">Sounds</UITab>
+            <UITab value="widgets">Widgets</UITab>
+          </UITabs>
+          <UIButton
+            v-if="activeEditorTarget === 'sprite' ? activeEditorTab === 'code' : activeStageTab === 'code'"
+            class="format-button"
+            type="white"
+            size="medium"
+          >
+            Format
+          </UIButton>
+        </header>
+
+        <div v-if="activeEditorTarget === 'sprite' && activeEditorTab === 'code'" class="code-body">
+          <aside class="category-rail flex flex-none flex-col gap-3 border-r border-grey-400 px-1 py-3" aria-label="Code categories">
+            <button
+              v-for="category in codeCategories"
+              :key="category.id"
+              class="category flex h-13 w-13 cursor-pointer flex-col items-center justify-center rounded-md border-0 text-2xs transition-colors duration-100"
+              :class="activeCodeCategory === category.id ? 'bg-grey-400 text-grey-1000' : 'bg-transparent text-grey-800 hover:bg-grey-300'"
+              type="button"
+              @click="selectCodeCategory(category.id)"
+            >
+              <span class="block h-6 w-6" aria-hidden="true" v-html="category.icon"></span>
+              <span class="mt-0.5 text-center text-[10px]/4">{{ category.label }}</span>
+            </button>
+          </aside>
+
+          <aside
+            class="events-list"
+            aria-label="Event snippets"
+            @pointerdown="startSnippetHorizontalDrag"
+            @pointermove="moveSnippetHorizontalDrag"
+            @pointerup="endSnippetHorizontalDrag"
+            @pointercancel="endSnippetHorizontalDrag"
+          >
+            <section v-for="group in visibleSnippetGroups" :key="group.title" class="event-group">
+              <h3>{{ group.title }}</h3>
+              <button v-for="item in group.items" :key="item.id" class="event-snippet" type="button">
+                <span v-for="(part, index) in item.parts" :key="`${item.id}-${index}`" :class="getCodeTokenClass(part.type)">
+                  {{ part.text }}
+                </span>
+              </button>
+            </section>
+          </aside>
+
+          <section class="code-editor" :style="codeEditorStyle" aria-label="Sprite code editor">
+            <div v-for="(line, index) in codeLines" :key="index" class="code-line">
+              <span class="line-number">{{ index + 1 }}</span>
+              <span class="text-[#b08a01]">{{ line[0] }}</span>
+              <span class="source-content">
+                <span v-for="(part, partIndex) in getSourceParts(line[1])" :key="`${index}-${partIndex}`" :class="getCodeTokenClass(part.type)">
+                  {{ part.text }}
+                </span>
+              </span>
+            </div>
+            <aside class="code-side-tools" aria-label="Code document navigation">
+              <div class="code-document-tabs">
+                <button
+                  class="code-document-tab active"
+                  type="button"
+                  :aria-label="mainCodeDocumentTab.label"
+                  :title="mainCodeDocumentTab.label"
+                  @click="openCodeDocumentTab(mainCodeDocumentTab)"
+                >
+                  <img :src="mainCodeDocumentTab.image" :alt="mainCodeDocumentTab.label" />
+                </button>
+                <template v-if="tempCodeDocumentTabs.length > 0">
+                  <div class="code-document-divider" aria-hidden="true"></div>
+                  <div class="code-document-temp-tabs">
+                    <button
+                      v-for="tab in tempCodeDocumentTabs"
+                      :key="tab.id"
+                      class="code-document-tab"
+                      type="button"
+                      :aria-label="tab.label"
+                      :title="tab.label"
+                      @click="openCodeDocumentTab(tab)"
+                    >
+                      <img :src="tab.image" :alt="tab.label" />
+                    </button>
+                  </div>
+                  <button
+                    class="code-document-close"
+                    type="button"
+                    aria-label="Close temporary code previews"
+                    title="Close temporary code previews"
+                    @click="closeTempCodeDocuments"
+                    v-html="closeCircleIcon"
+                  ></button>
+                </template>
+              </div>
+              <div class="zoom-tools">
+                <button type="button" aria-label="Zoom in" title="Zoom in" @click="zoomCodeEditor('in')" v-html="zoomInIcon"></button>
+                <button type="button" aria-label="Zoom out" title="Zoom out" @click="zoomCodeEditor('out')" v-html="zoomOutIcon"></button>
+                <button type="button" aria-label="Reset zoom" title="Reset zoom" @click="zoomCodeEditor('reset')" v-html="zoomResetIcon"></button>
+              </div>
+            </aside>
+          </section>
+        </div>
+
+        <div v-else-if="activeEditorTarget === 'sprite' && activeEditorTab === 'costumes'" class="asset-editor-body">
+          <aside class="asset-editor-list" aria-label="Costumes list">
+            <div
+              v-for="costume in costumes"
+              :key="costume.id"
+              class="editor-asset-item"
+              :class="{ active: selectedCostumeId === costume.id, 'costume-asset-item': true }"
+            >
+              <button class="asset-select-button" type="button" @click="selectedCostumeId = costume.id">
+                <img :src="costume.image" :alt="costume.name" />
+                <span class="asset-item-title">{{ costume.name }}</span>
+              </button>
+              <button
+                v-if="selectedCostumeId === costume.id"
+                class="asset-item-menu"
+                type="button"
+                aria-label="Costume options"
+                :aria-expanded="costumeMenuOpenFor === costume.id"
+                aria-haspopup="menu"
+                @click.stop="toggleCostumeMenu(costume.id, $event)"
+                v-html="moreIcon"
+              ></button>
+            </div>
+            <Teleport to="body">
+              <div
+                v-if="costumeMenuCostume != null"
+                ref="costumeMenuRef"
+                class="costume-options-menu asset-options-menu"
+                :style="getCostumeMenuStyle()"
+                role="menu"
+                @click.stop
+              >
+                <button class="asset-options-item" type="button" role="menuitem" @click="handleCostumeMenuAction(duplicateCostume)">
+                  Duplicate
+                </button>
+                <button class="asset-options-item" type="button" role="menuitem" @click="handleCostumeMenuAction(renameCostume)">
+                  Rename
+                </button>
+                <button
+                  class="asset-options-item danger"
+                  type="button"
+                  role="menuitem"
+                  :disabled="costumes.length <= 1"
+                  @click="handleCostumeMenuAction(removeCostume)"
+                >
+                  Remove
+                </button>
+              </div>
+            </Teleport>
+            <button
+              ref="addCostumeMenuRef"
+              class="asset-add-button"
+              type="button"
+              aria-label="Add costume"
+              :aria-expanded="addCostumeMenuOpen"
+              aria-haspopup="menu"
+              @click.stop="toggleAddCostumeMenu"
+            >
+              +
+            </button>
+            <Teleport to="body">
+              <div v-if="addCostumeMenuOpen" class="costume-add-menu asset-add-menu" :style="getAddCostumeMenuStyle()" role="menu" @click.stop>
+                <button class="asset-add-menu-item" type="button" role="menuitem" @click="addCostumeFromLocalFile">
+                  Select local file
+                </button>
+              </div>
+            </Teleport>
+          </aside>
+          <section class="asset-detail" aria-label="Costume detail">
+            <header class="asset-detail-header">
+              <h2>{{ selectedCostume.name }}</h2>
+              <button type="button" aria-label="Rename costume" @click="renameCostume(selectedCostume)" v-html="editIcon"></button>
+            </header>
+            <div class="costume-preview">
+              <img :src="selectedCostume.image" :alt="selectedCostume.name" />
+            </div>
+          </section>
+        </div>
+
+        <div v-else-if="activeEditorTarget === 'sprite'" class="asset-editor-body">
+          <aside class="asset-editor-list" aria-label="Animations list">
+            <div
+              v-for="animation in animations"
+              :key="animation.id"
+              class="editor-asset-item"
+              :class="{ active: selectedAnimationId === animation.id, 'animation-asset-item': true }"
+            >
+              <button class="asset-select-button" type="button" @click="selectedAnimationId = animation.id">
+                <img :src="animation.image" :alt="animation.name" />
+                <span class="asset-item-title">{{ animation.name }}</span>
+              </button>
+              <button
+                v-if="selectedAnimationId === animation.id"
+                class="asset-item-menu"
+                type="button"
+                aria-label="Animation options"
+                :aria-expanded="animationMenuOpenFor === animation.id"
+                aria-haspopup="menu"
+                @click.stop="toggleAnimationMenu(animation.id, $event)"
+                v-html="moreIcon"
+              ></button>
+            </div>
+            <Teleport to="body">
+              <div
+                v-if="animationMenuAnimation != null"
+                ref="animationMenuRef"
+                class="animation-options-menu"
+                :style="getAnimationMenuStyle()"
+                role="menu"
+                @click.stop
+              >
+                <button class="animation-options-item" type="button" role="menuitem" @click="handleAnimationMenuAction(duplicateAnimation)">
+                  Duplicate
+                </button>
+                <button class="animation-options-item" type="button" role="menuitem" @click="handleAnimationMenuAction(renameAnimation)">
+                  Rename
+                </button>
+                <button class="animation-options-item danger" type="button" role="menuitem" @click="handleAnimationMenuAction(requestRemoveAnimation)">
+                  Remove
+                </button>
+              </div>
+            </Teleport>
+            <button
+              ref="addAnimationMenuRef"
+              class="asset-add-button"
+              type="button"
+              aria-label="Add animation"
+              :aria-expanded="addAnimationMenuOpen"
+              aria-haspopup="menu"
+              @click.stop="toggleAddAnimationMenu"
+            >
+              +
+            </button>
+            <Teleport to="body">
+              <div v-if="addAnimationMenuOpen" class="animation-add-menu" :style="getAddAnimationMenuStyle()" role="menu" @click.stop>
+                <button class="animation-add-menu-item" type="button" role="menuitem" @click="handleGroupCostumesAsAnimation">
+                  Group costumes as animation
+                </button>
+              </div>
+            </Teleport>
+          </aside>
+          <section v-if="selectedAnimation != null" class="asset-detail" aria-label="Animation detail">
+            <header class="asset-detail-header">
+              <h2>{{ selectedAnimation.name }}</h2>
+              <button type="button" aria-label="Rename animation" @click="renameAnimation(selectedAnimation)" v-html="editIcon"></button>
+            </header>
+            <div class="animation-detail-content">
+              <div class="animation-player">
+                <img
+                  v-for="(frame, index) in selectedAnimation.frames ?? [selectedAnimation.image]"
+                  :key="`${selectedAnimation.id}-frame-${index}`"
+                  :src="frame"
+                  :alt="selectedAnimation.name"
+                />
+              </div>
+              <div class="animation-settings" aria-label="Animation settings">
+                <button class="animation-setting" type="button">
+                  <span class="setting-icon" v-html="settingTimerIcon"></span>
+                  <span>Duration</span>
+                  <strong>{{ selectedAnimation.duration }}</strong>
+                </button>
+                <button class="animation-setting" type="button">
+                  <span class="setting-icon" v-html="settingStatusIcon"></span>
+                  <span>Binding</span>
+                  <strong>{{ selectedAnimation.binding }}</strong>
+                </button>
+                <button class="animation-setting" type="button">
+                  <span class="setting-icon" v-html="settingSoundIcon"></span>
+                  <span>Sound</span>
+                  <strong>{{ selectedAnimation.sound }}</strong>
+                </button>
+              </div>
+            </div>
+          </section>
+        </div>
+
+        <div v-else-if="activeStageTab === 'code'" class="code-body">
+          <aside class="category-rail flex flex-none flex-col gap-3 border-r border-grey-400 px-1 py-3" aria-label="Code categories">
+            <button
+              v-for="category in codeCategories"
+              :key="`stage-${category.id}`"
+              class="category flex h-13 w-13 cursor-pointer flex-col items-center justify-center rounded-md border-0 text-2xs transition-colors duration-100"
+              :class="category.id === 'event' ? 'bg-grey-400 text-grey-1000' : 'bg-transparent text-grey-800 hover:bg-grey-300'"
+              type="button"
+            >
+              <span class="block h-6 w-6" aria-hidden="true" v-html="category.icon"></span>
+              <span class="mt-0.5 text-center text-[10px]/4">{{ category.label }}</span>
+            </button>
+          </aside>
+
+          <aside
+            class="events-list"
+            aria-label="Stage snippets"
+            @pointerdown="startSnippetHorizontalDrag"
+            @pointermove="moveSnippetHorizontalDrag"
+            @pointerup="endSnippetHorizontalDrag"
+            @pointercancel="endSnippetHorizontalDrag"
+          >
+            <section class="event-group">
+              <h3>Stage Events</h3>
+              <button class="event-snippet" type="button">
+                <span :class="getCodeTokenClass('function')">onBackdrop</span><span :class="getCodeTokenClass('hint')"> name:</span><span :class="getCodeTokenClass('string')">"backdrop"</span>
+              </button>
+              <button class="event-snippet" type="button"><span :class="getCodeTokenClass('function')">show</span></button>
+              <button class="event-snippet" type="button"><span :class="getCodeTokenClass('function')">hide</span></button>
+            </section>
+          </aside>
+
+          <section class="code-editor" :style="codeEditorStyle" aria-label="Stage code editor">
+            <div v-if="stageCodeLines.length === 0" class="code-line">
+              <span class="line-number">1</span>
+              <span></span>
+              <span></span>
+            </div>
+            <div v-for="(line, index) in stageCodeLines" v-else :key="index" class="code-line">
+              <span class="line-number">{{ index + 1 }}</span>
+              <span class="text-[#b08a01]">{{ line[0] }}</span>
+              <span class="source-content">
+                <span v-for="(part, partIndex) in getSourceParts(line[1])" :key="`stage-${index}-${partIndex}`" :class="getCodeTokenClass(part.type)">
+                  {{ part.text }}
+                </span>
+              </span>
+            </div>
+            <aside class="code-side-tools" aria-label="Code document navigation">
+              <div class="code-document-tabs">
+                <button
+                  class="code-document-tab active"
+                  type="button"
+                  :aria-label="mainCodeDocumentTab.label"
+                  :title="mainCodeDocumentTab.label"
+                  @click="openCodeDocumentTab(mainCodeDocumentTab)"
+                >
+                  <img :src="mainCodeDocumentTab.image" :alt="mainCodeDocumentTab.label" />
+                </button>
+                <template v-if="tempCodeDocumentTabs.length > 0">
+                  <div class="code-document-divider" aria-hidden="true"></div>
+                  <div class="code-document-temp-tabs">
+                    <button
+                      v-for="tab in tempCodeDocumentTabs"
+                      :key="tab.id"
+                      class="code-document-tab"
+                      type="button"
+                      :aria-label="tab.label"
+                      :title="tab.label"
+                      @click="openCodeDocumentTab(tab)"
+                    >
+                      <img :src="tab.image" :alt="tab.label" />
+                    </button>
+                  </div>
+                  <button
+                    class="code-document-close"
+                    type="button"
+                    aria-label="Close temporary code previews"
+                    title="Close temporary code previews"
+                    @click="closeTempCodeDocuments"
+                    v-html="closeCircleIcon"
+                  ></button>
+                </template>
+              </div>
+              <div class="zoom-tools">
+                <button type="button" aria-label="Zoom in" title="Zoom in" @click="zoomCodeEditor('in')" v-html="zoomInIcon"></button>
+                <button type="button" aria-label="Zoom out" title="Zoom out" @click="zoomCodeEditor('out')" v-html="zoomOutIcon"></button>
+                <button type="button" aria-label="Reset zoom" title="Reset zoom" @click="zoomCodeEditor('reset')" v-html="zoomResetIcon"></button>
+              </div>
+            </aside>
+          </section>
+        </div>
+
+        <div v-else-if="activeStageTab === 'backdrops'" class="asset-editor-body">
+          <aside class="asset-editor-list" aria-label="Backdrops list">
+            <button
+              v-for="backdrop in backdrops"
+              :key="backdrop.id"
+              class="editor-asset-item"
+              :class="{ active: selectedBackdropId === backdrop.id }"
+              type="button"
+              @click="selectedBackdropId = backdrop.id"
+            >
+              <img :src="backdrop.image" :alt="backdrop.name" />
+              <span class="asset-item-title">{{ backdrop.name }}</span>
+            </button>
+            <button class="asset-add-button" type="button" aria-label="Add backdrop">+</button>
+          </aside>
+          <section class="asset-detail" aria-label="Backdrop detail">
+            <header class="asset-detail-header">
+              <h2>{{ selectedBackdrop.name }}</h2>
+              <button type="button" aria-label="Rename backdrop" v-html="editIcon"></button>
+            </header>
+            <div class="backdrop-preview">
+              <img :src="selectedBackdrop.image" :alt="selectedBackdrop.name" />
+            </div>
+          </section>
+        </div>
+
+        <div v-else-if="activeStageTab === 'sounds'" class="asset-editor-body">
+          <aside class="asset-editor-list" aria-label="Sounds list">
+            <button
+              v-for="sound in sounds"
+              :key="sound.id"
+              class="editor-asset-item sound-asset-item"
+              :class="{ active: selectedSoundId === sound.id }"
+              type="button"
+              @click="selectedSoundId = sound.id"
+            >
+              <span class="sound-wave-icon" aria-hidden="true">
+                <svg viewBox="0 0 24 25" fill="none">
+                  <path d="M19.661 14.8859L9.58496 21.0519C7.57996 22.2789 5.00098 20.8398 5.00098 18.4938V6.50477C5.00098 4.15877 7.57996 2.71991 9.58496 3.94691L19.661 10.1129C21.446 11.2059 21.446 13.7939 19.661 14.8859Z" fill="currentColor" />
+                </svg>
+              </span>
+              <span class="asset-item-title">{{ sound.name }}</span>
+            </button>
+            <button class="asset-add-button" type="button" aria-label="Add sound">+</button>
+          </aside>
+          <section v-if="selectedSound != null" class="asset-detail" aria-label="Sound detail">
+            <header class="sound-detail-title">
+              <div class="asset-detail-header">
+                <h2>{{ selectedSound.name }}</h2>
+                <button type="button" aria-label="Rename sound" v-html="editIcon"></button>
+              </div>
+              <div class="sound-duration">{{ selectedSoundDuration }}</div>
+            </header>
+            <div class="sound-detail">
+              <div class="sound-waveform" :style="soundWaveformRangeStyle" aria-label="Sound waveform trim editor">
+                <svg class="sound-waveform-canvas" viewBox="0 0 640 222" preserveAspectRatio="none">
+                  <path class="waveform-shape" d="M0 111 C24 88 48 86 72 111 C96 136 120 132 144 111 C168 90 192 82 216 111 C240 140 264 136 288 111 C312 86 336 78 360 111 C384 144 408 139 432 111 C456 83 480 88 504 111 C528 134 552 126 576 111 C600 96 620 101 640 111 L640 111 C620 121 600 126 576 111 C552 96 528 88 504 111 C480 134 456 139 432 111 C408 83 384 78 360 111 C336 144 312 136 288 111 C264 86 240 82 216 111 C192 140 168 132 144 111 C120 90 96 86 72 111 C48 136 24 134 0 111 Z" />
+                </svg>
+                <div class="waveform-range-control">
+                  <div class="waveform-shaded-area waveform-left-fixed"></div>
+                  <div class="waveform-selection-area">
+                    <button class="waveform-control-bar waveform-left-bar" type="button" aria-label="Trim sound start" @pointerdown.prevent="startSoundRangeDrag('left', $event)"></button>
+                    <button class="waveform-control-bar waveform-right-bar" type="button" aria-label="Trim sound end" @pointerdown.prevent="startSoundRangeDrag('right', $event)"></button>
+                  </div>
+                  <div class="waveform-shaded-area waveform-right-fixed"></div>
+                </div>
+              </div>
+              <div class="sound-controls">
+                <button class="sound-play-control" type="button" aria-label="Play sound">
+                  <svg class="sound-play-icon" viewBox="0 0 24 25" fill="none" aria-hidden="true">
+                    <path d="M19.661 14.8859L9.58496 21.0519C7.57996 22.2789 5.00098 20.8398 5.00098 18.4938V6.50477C5.00098 4.15877 7.57996 2.71991 9.58496 3.94691L19.661 10.1129C21.446 11.2059 21.446 13.7939 19.661 14.8859Z" fill="currentColor" />
+                  </svg>
+                </button>
+                <div class="sound-volume-slider" aria-hidden="true">
+                  <svg class="sound-volume-icon" viewBox="0 0 24 24" fill="none">
+                    <path d="M7.5 6.99989H9.26697C9.74097 6.99989 10.1991 6.83177 10.5601 6.52577L14.251 3.39882C15.336 2.47982 17.001 3.25099 17.001 4.67299V19.3268C17.001 20.7488 15.336 21.521 14.251 20.601L10.5601 17.474C10.1991 17.168 9.74097 16.9999 9.26697 16.9999H7.5C6.672 16.9999 6 16.3279 6 15.4999V8.50087C6 7.67187 6.672 6.99989 7.5 6.99989Z" fill="currentColor" />
+                  </svg>
+                  <div class="sound-slider-track" :style="soundVolumeStyle" role="slider" aria-label="Sound volume" aria-valuemin="0" aria-valuemax="100" :aria-valuenow="Math.round((selectedSoundEdit?.gain ?? 0) * 100)" @pointerdown="updateSelectedSoundGain">
+                    <span></span>
+                  </div>
+                  <svg class="sound-volume-icon" viewBox="0 0 24 24" fill="none">
+                    <path d="M3.5 6.99989H5.26697C5.74097 6.99989 6.19906 6.83177 6.56006 6.52577L10.251 3.39882C11.336 2.47982 13.001 3.25099 13.001 4.67299V19.3268C13.001 20.7488 11.336 21.521 10.251 20.601L6.56006 17.474C6.19906 17.168 5.74097 16.9999 5.26697 16.9999H3.5C2.672 16.9999 2 16.3279 2 15.4999V8.50087C2 7.67187 2.672 6.99989 3.5 6.99989ZM16.767 16.7709C18.046 15.4979 18.75 13.8029 18.75 11.9999C18.75 10.1969 18.046 8.5019 16.767 7.2289C16.473 6.9369 15.9981 6.93685 15.7061 7.23085C15.4131 7.52385 15.415 7.99988 15.708 8.29188C16.702 9.28188 17.25 10.5999 17.25 12.0009C17.25 13.4019 16.702 14.7199 15.708 15.7099C15.415 16.0019 15.4131 16.4769 15.7061 16.7709C15.8521 16.9179 16.0451 16.9918 16.2371 16.9918C16.4291 16.9898 16.62 16.9169 16.767 16.7709ZM19.067 19.82C18.875 19.82 18.682 19.747 18.536 19.6C18.244 19.307 18.244 18.832 18.538 18.539C20.287 16.795 21.25 14.4729 21.25 11.9999C21.25 9.52689 20.287 7.20583 18.538 5.46083C18.244 5.16783 18.244 4.69279 18.536 4.39979C18.828 4.10679 19.303 4.10582 19.597 4.39882C21.63 6.42682 22.75 9.12689 22.75 11.9999C22.75 14.8729 21.63 17.573 19.597 19.601C19.45 19.747 19.259 19.82 19.067 19.82Z" fill="currentColor" />
+                  </svg>
+                </div>
+                <div class="sound-controls-spacer"></div>
+                <div v-if="selectedSoundEditing" class="sound-edit-actions">
+                  <UIButton type="neutral" size="medium" @click="resetSelectedSoundEdit">Cancel</UIButton>
+                  <UIButton type="primary" size="medium" @click="saveSelectedSoundEdit">Save</UIButton>
+                </div>
+              </div>
+            </div>
+          </section>
+          <section v-else class="asset-detail empty-asset-detail" aria-label="Sound detail">No sounds</section>
+        </div>
+
+        <div v-else class="asset-editor-body">
+          <aside class="asset-editor-list" aria-label="Widgets list">
+            <button
+              v-for="widget in widgets"
+              :key="widget.id"
+              class="editor-asset-item widget-asset-item"
+              :class="{ active: selectedWidgetId === widget.id }"
+              type="button"
+              @click="selectedWidgetId = widget.id"
+            >
+              <span class="widget-icon" v-html="monitorWidgetIcon"></span>
+              <span class="asset-item-title">{{ widget.name }}</span>
+            </button>
+            <button class="asset-add-button" type="button" aria-label="Add widget">+</button>
+          </aside>
+          <section class="asset-detail" aria-label="Widget detail">
+            <header class="asset-detail-header">
+              <h2>{{ selectedWidget.name }}</h2>
+              <button type="button" aria-label="Rename widget" v-html="editIcon"></button>
+            </header>
+            <div class="widget-detail">
+              <label>
+                <span>Value</span>
+                <strong>{{ selectedWidget.value }}</strong>
+              </label>
+              <label>
+                <span>Visible</span>
+                <strong>On</strong>
+              </label>
+            </div>
+          </section>
+        </div>
+      </section>
+
+      <aside class="preview-column">
+        <section class="preview-card">
+          <UICardHeader class="panel-header justify-between gap-3">
+            <h2 class="m-0 flex-1 text-xl font-normal text-title">Preview</h2>
+            <div class="panel-actions">
+              <button class="run-button" type="button" @click="runProject">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m8 5 11 7-11 7V5Z" /></svg>
+                Run
+              </button>
+              <button class="publish-button" type="button" @click="openPublishModal">
+                <span class="button-icon" aria-hidden="true" v-html="publishActionIcon"></span>
+                Publish
+              </button>
+            </div>
+          </UICardHeader>
+
+          <div class="stage-frame">
+            <template v-if="!runnerActive">
+              <img class="stage-backdrop" :src="stageBackdrop" alt="" />
+              <div
+                v-for="sprite in stageCompanionSprites"
+                :key="sprite.id"
+                class="stage-sprite"
+                :style="getStageSpriteFrameStyle(sprite)"
+                role="button"
+                tabindex="0"
+                :aria-label="`Select ${sprite.name}`"
+                @click="selectSprite(sprite.id)"
+                @keydown.enter.prevent="selectSprite(sprite.id)"
+                @keydown.space.prevent="selectSprite(sprite.id)"
+                @pointerdown.stop.prevent="startStageSpriteDrag(sprite, $event)"
+                @pointermove.stop.prevent="moveStageSpriteDrag"
+                @pointerup.stop.prevent="endStageSpriteDrag"
+                @pointercancel.stop.prevent="endStageSpriteDrag"
+              >
+                <img :src="sprite.image" alt="" />
+              </div>
+              <div
+                v-if="selectedSprite != null"
+                class="selected-sprite"
+                :style="selectedSpriteFrameStyle"
+                @pointerdown.stop.prevent="startStageSpriteDrag(selectedSprite, $event)"
+                @pointermove.stop.prevent="moveStageSpriteDrag"
+                @pointerup.stop.prevent="endStageSpriteDrag"
+                @pointercancel.stop.prevent="endStageSpriteDrag"
+              >
+                <img :src="selectedSprite.image" alt="" />
+                <span class="coordinate">{{ selectedSpriteCoordinate }}</span>
+                <span class="handle left"></span>
+                <span class="handle right"></span>
+                <span class="corner bottom-left"></span>
+                <span class="corner top-right"></span>
+              </div>
+              <div class="stage-tools" :class="{ expanded: activeQuickConfig !== 'default' }">
+                <template v-if="activeQuickConfig === 'default'">
+                  <button
+                    v-for="tool in quickConfigTools"
+                    :key="tool.id"
+                    type="button"
+                    :aria-label="tool.label"
+                    @click="openQuickConfig(tool.id)"
+                  >
+                    <span v-html="tool.icon"></span>
+                  </button>
+                </template>
+                <template v-else-if="activeQuickConfig === 'size' && selectedSprite != null">
+                  <label class="quick-config-input">
+                    <span>Size</span>
+                    <input
+                      :value="selectedSprite.size"
+                      type="number"
+                      inputmode="numeric"
+                      min="1"
+                      max="400"
+                      aria-label="Size input"
+                      @input="updateSelectedSpriteSize"
+                    />
+                    <span>%</span>
+                  </label>
+                  <span class="quick-config-divider" aria-hidden="true"></span>
+                  <button class="quick-config-back" type="button" aria-label="Back" @click="backToDefaultQuickConfig">
+                    <span v-html="backQuickIcon"></span>
+                  </button>
+                </template>
+                <template v-else-if="activeQuickConfig === 'position' && selectedSprite != null">
+                  <label class="quick-config-input position-input">
+                    <span>X</span>
+                    <input
+                      :value="selectedSprite.x"
+                      type="number"
+                      inputmode="numeric"
+                      min="-999"
+                      max="999"
+                      aria-label="X position input"
+                      @input="updateSelectedSpriteX"
+                    />
+                  </label>
+                  <label class="quick-config-input position-input">
+                    <span>Y</span>
+                    <input
+                      :value="selectedSprite.y"
+                      type="number"
+                      inputmode="numeric"
+                      min="-999"
+                      max="999"
+                      aria-label="Y position input"
+                      @input="updateSelectedSpriteY"
+                    />
+                  </label>
+                  <span class="quick-config-divider" aria-hidden="true"></span>
+                  <button class="quick-config-back" type="button" aria-label="Back" @click="backToDefaultQuickConfig">
+                    <span v-html="backQuickIcon"></span>
+                  </button>
+                </template>
+                <template v-else-if="activeQuickConfig === 'rotation' && selectedSprite != null">
+                  <div class="rotation-style-group" role="group" aria-label="Rotation style control">
+                    <button
+                      class="rotation-style-button"
+                      :class="{ active: selectedSprite.rotationStyle === 'normal' }"
+                      type="button"
+                      aria-label="Normal rotation"
+                      @click="updateSelectedSpriteRotationStyle('normal')"
+                    >
+                      <span v-html="rotateAroundIcon"></span>
+                    </button>
+                    <button
+                      class="rotation-style-button"
+                      :class="{ active: selectedSprite.rotationStyle === 'left-right' }"
+                      type="button"
+                      aria-label="Left-right rotation"
+                      @click="updateSelectedSpriteRotationStyle('left-right')"
+                    >
+                      <span v-html="leftRightIcon"></span>
+                    </button>
+                    <button
+                      class="rotation-style-button"
+                      :class="{ active: selectedSprite.rotationStyle === 'none' }"
+                      type="button"
+                      aria-label="No rotation"
+                      @click="updateSelectedSpriteRotationStyle('none')"
+                    >
+                      <span v-html="notRotateIcon"></span>
+                    </button>
+                  </div>
+                  <label v-if="selectedSprite.rotationStyle === 'normal'" class="quick-config-input heading-input">
+                    <span>Heading</span>
+                    <input
+                      :value="selectedSprite.heading"
+                      type="number"
+                      inputmode="numeric"
+                      min="-180"
+                      max="180"
+                      aria-label="Heading input"
+                      @input="updateSelectedSpriteHeading"
+                    />
+                  </label>
+                  <div v-else-if="selectedSprite.rotationStyle === 'left-right'" class="direction-group" role="group" aria-label="Direction control">
+                    <button
+                      type="button"
+                      :class="{ active: selectedSprite.heading < 0 }"
+                      @click="updateSelectedSpriteLeftRight('left')"
+                    >
+                      Left
+                    </button>
+                    <button
+                      type="button"
+                      :class="{ active: selectedSprite.heading >= 0 }"
+                      @click="updateSelectedSpriteLeftRight('right')"
+                    >
+                      Right
+                    </button>
+                  </div>
+                  <span class="quick-config-divider" aria-hidden="true"></span>
+                  <button class="quick-config-back" type="button" aria-label="Back" @click="backToDefaultQuickConfig">
+                    <span v-html="backQuickIcon"></span>
+                  </button>
+                </template>
+                <template v-else-if="activeQuickConfig === 'layer' && selectedSprite != null">
+                  <div class="quick-layer-menu" role="menu" aria-label="Layer order options">
+                    <button type="button" role="menuitem" @click="moveSelectedSpriteLayer('up')">Bring forward</button>
+                    <button type="button" role="menuitem" @click="moveSelectedSpriteLayer('top')">Bring to front</button>
+                    <button type="button" role="menuitem" @click="moveSelectedSpriteLayer('down')">Send backward</button>
+                    <button type="button" role="menuitem" @click="moveSelectedSpriteLayer('bottom')">Send to back</button>
+                  </div>
+                  <span class="quick-config-divider" aria-hidden="true"></span>
+                  <button class="quick-config-back" type="button" aria-label="Back" @click="backToDefaultQuickConfig">
+                    <span v-html="backQuickIcon"></span>
+                  </button>
+                </template>
+                <template v-else>
+                  <button class="quick-config-back" type="button" aria-label="Back" @click="backToDefaultQuickConfig">
+                    <span v-html="backQuickIcon"></span>
+                  </button>
+                </template>
+              </div>
+            </template>
+            <ProjectRunner v-show="runnerActive" ref="runnerRef" :project="project" :show-controls="false" />
+          </div>
+          <div v-if="publishStatusMessage !== ''" class="publish-toast" role="status">
+            {{ publishStatusMessage }}
+          </div>
+        </section>
+
+        <section class="asset-card">
+          <div class="sprites-panel">
+            <UICardHeader class="asset-header justify-between">
+              <h2 class="m-0 text-xl font-normal text-title">Sprites</h2>
+              <span ref="addSpriteMenuRef" class="add-sprite-menu-wrap">
+                <button
+                  type="button"
+                  aria-label="Add sprite"
+                  :aria-expanded="addSpriteMenuOpen"
+                  aria-haspopup="menu"
+                  @click.stop="toggleAddSpriteMenu"
+                >
+                  <span aria-hidden="true" v-html="plusIcon"></span>
+                </button>
+                <span v-if="addSpriteMenuOpen" class="add-sprite-menu" role="menu" @click.stop>
+                  <button class="add-sprite-menu-item" type="button" role="menuitem" @click="addLocalSprite('local')">
+                    Select local file
+                  </button>
+                  <button class="add-sprite-menu-item" type="button" role="menuitem" @click="addLocalSprite('library')">
+                    Choose from asset library
+                  </button>
+                  <button class="add-sprite-menu-item" type="button" role="menuitem" @click="openSpriteGenModal">
+                    Generate with AI
+                  </button>
+                </span>
+              </span>
+            </UICardHeader>
+            <div ref="spriteMenuRef" class="sprite-list">
+              <SpriteItem
+                v-for="sprite in sprites"
+                :key="sprite.id"
+                :sprite="sprite"
+                :active="activeEditorTarget === 'sprite' && selectedSpriteId === sprite.id"
+                @select="selectSprite(sprite.id)"
+              >
+                <template v-if="activeEditorTarget === 'sprite' && selectedSpriteId === sprite.id" #corner>
+                  <button
+                    class="sprite-menu"
+                    type="button"
+                    aria-label="Options button"
+                    :aria-expanded="spriteMenuOpenFor === sprite.id"
+                    aria-haspopup="menu"
+                    @click="toggleSpriteMenu(sprite.id, $event)"
+                    v-html="moreIcon"
+                  ></button>
+                </template>
+              </SpriteItem>
+            </div>
+          </div>
+
+          <div class="stage-panel">
+            <UICardHeader class="stage-panel-header justify-center">Stage</UICardHeader>
+            <button
+              class="stage-thumb"
+              :class="{ active: activeEditorTarget === 'stage' && activeStageTab === 'code' }"
+              type="button"
+              aria-label="Stage overview"
+              @click="selectStage('code')"
+            >
+              <img :src="stageBackdrop" alt="" />
+            </button>
+            <div class="stage-divider" aria-hidden="true"></div>
+            <button
+              v-for="entry in stageEntries"
+              :key="entry.id"
+              class="stage-entry"
+              :class="{ active: activeEditorTarget === 'stage' && activeStageTab === entry.id }"
+              type="button"
+              @click="selectStage(entry.id)"
+            >
+              <span class="stage-entry-icon" v-html="entry.icon"></span>
+              <span>{{ entry.label }}</span>
+            </button>
+          </div>
+        </section>
+        <Teleport to="body">
+          <div
+            v-if="spriteMenuSprite != null"
+            class="sprite-options-menu"
+            :style="getSpriteMenuStyle()"
+            role="menu"
+            @click.stop
+          >
+            <button class="sprite-options-item" type="button" role="menuitem" @click="handleOpenSpriteMenuAction(toggleSpriteVisibility)">
+              {{ spriteMenuSprite.hidden ? 'Show' : 'Hide' }}
+            </button>
+            <button class="sprite-options-item" type="button" role="menuitem" @click="handleOpenSpriteMenuAction(duplicateSprite)">
+              Duplicate
+            </button>
+            <button class="sprite-options-item" type="button" role="menuitem" @click="handleOpenSpriteMenuAction(renameSprite)">
+              Rename
+            </button>
+            <button class="sprite-options-item" type="button" role="menuitem" @click="handleOpenSpriteMenuAction(saveSpriteToLibrary)">
+              Save to asset library
+            </button>
+            <button class="sprite-options-item danger" type="button" role="menuitem" @click="handleOpenSpriteMenuAction(removeSprite)">
+              Remove
+            </button>
+          </div>
+        </Teleport>
+      </aside>
+    </section>
+
+    <section v-else class="map-editor-main">
+      <section class="map-workspace" :style="mapWorkspaceStyle">
+        <div class="map-stage" :style="mapStageStyle">
+          <img class="map-backdrop" :src="stageBackdrop" alt="" />
+          <button
+            v-for="sprite in sprites"
+            :key="`map-${sprite.id}`"
+            class="map-sprite"
+            :class="[`map-sprite-${sprite.id}`, { active: selectedMapSpriteId === sprite.id }]"
+            :style="getMapSpriteFrameStyle(sprite)"
+            type="button"
+            @click="selectMapSprite(sprite.id)"
+            @pointerdown.stop.prevent="startMapSpriteDrag(sprite, $event)"
+            @pointermove.stop.prevent="moveMapSpriteDrag"
+            @pointerup.stop.prevent="endMapSpriteDrag"
+            @pointercancel.stop.prevent="endMapSpriteDrag"
+          >
+            <img :src="sprite.image" :alt="sprite.name" />
+            <span v-if="selectedMapSpriteId === sprite.id" class="map-sprite-coordinate">{{ selectedMapSpriteCoordinate }}</span>
+          </button>
+          <div class="map-zoom-controls">
+            <button type="button" aria-label="Zoom in">+</button>
+            <button type="button" aria-label="Zoom out">-</button>
+            <button type="button" aria-label="Reset zoom">100%</button>
+          </div>
+        </div>
+      </section>
+
+      <aside class="map-side">
+        <UICard class="map-card">
+          <UICardHeader class="map-card-header justify-between">
+            <h2 class="m-0 text-xl font-normal text-title">Global Config</h2>
+            <button class="map-config-icon collapse" type="button" aria-label="Collapse global config" v-html="arrowDownIcon"></button>
+          </UICardHeader>
+          <div class="map-config">
+            <label>
+              <span>Map size</span>
+              <span class="map-size-inputs">
+                <label class="map-number-input">
+                  <span>Width</span>
+                  <input v-model.number="mapWidth" type="number" inputmode="numeric" min="1" />
+                </label>
+                <label class="map-number-input">
+                  <span>Height</span>
+                  <input v-model.number="mapHeight" type="number" inputmode="numeric" min="1" />
+                </label>
+              </span>
+            </label>
+            <label>
+              <span>Physics</span>
+              <button
+                class="map-switch"
+                :class="{ active: mapPhysicsEnabled }"
+                role="switch"
+                :aria-checked="mapPhysicsEnabled"
+                type="button"
+                aria-label="Physics"
+                @click="mapPhysicsEnabled = !mapPhysicsEnabled"
+              >
+                <span class="map-switch-rail" aria-hidden="true">
+                  <span class="map-switch-thumb"></span>
+                </span>
+              </button>
+            </label>
+            <label v-if="mapPhysicsEnabled">
+              <span>Layer Sorting</span>
+              <span class="map-radio-group" role="radiogroup" aria-label="Layer Sorting">
+                <button
+                  class="map-radio"
+                  :class="{ active: mapLayerSorting === 'default' }"
+                  type="button"
+                  role="radio"
+                  :aria-checked="mapLayerSorting === 'default'"
+                  @click="mapLayerSorting = 'default'"
+                >
+                  Default
+                </button>
+                <button
+                  class="map-radio"
+                  :class="{ active: mapLayerSorting === 'vertical' }"
+                  type="button"
+                  role="radio"
+                  :aria-checked="mapLayerSorting === 'vertical'"
+                  @click="mapLayerSorting = 'vertical'"
+                >
+                  Vertical
+                </button>
+              </span>
+            </label>
+          </div>
+        </UICard>
+
+        <UICard class="map-card map-sprites-card">
+          <UICardHeader class="map-card-header active justify-between">
+            <h2 class="m-0 text-xl font-normal text-title">Sprites</h2>
+            <span ref="mapAddSpriteMenuRef" class="add-sprite-menu-wrap">
+              <button
+                type="button"
+                aria-label="Add sprite"
+                :aria-expanded="addSpriteMenuOpen"
+                aria-haspopup="menu"
+                @click.stop="toggleAddSpriteMenu"
+              >
+                <span aria-hidden="true" v-html="plusIcon"></span>
+              </button>
+              <span v-if="addSpriteMenuOpen" class="add-sprite-menu" role="menu" @click.stop>
+                <button class="add-sprite-menu-item" type="button" role="menuitem" @click="addLocalSprite('local')">
+                  Select local file
+                </button>
+                <button class="add-sprite-menu-item" type="button" role="menuitem" @click="addLocalSprite('library')">
+                  Choose from asset library
+                </button>
+                <button class="add-sprite-menu-item" type="button" role="menuitem" @click="openSpriteGenModal">
+                  Generate with AI
+                </button>
+              </span>
+            </span>
+          </UICardHeader>
+          <div class="map-sprite-list">
+            <SpriteItem
+              v-for="sprite in sprites"
+              :key="`map-list-${sprite.id}`"
+              :sprite="sprite"
+              :active="selectedMapSpriteId === sprite.id"
+              @select="selectMapSprite(sprite.id)"
+            >
+              <template v-if="selectedMapSpriteId === sprite.id" #corner>
+                <button
+                  class="sprite-menu"
+                  type="button"
+                  aria-label="Options button"
+                  :aria-expanded="spriteMenuOpenFor === sprite.id"
+                  aria-haspopup="menu"
+                  @click="toggleSpriteMenu(sprite.id, $event)"
+                  v-html="moreIcon"
+                ></button>
+              </template>
+            </SpriteItem>
+          </div>
+          <footer v-if="mapSpriteConfigExpanded" class="map-sprite-config">
+            <div class="map-config-title">
+              <strong v-if="!mapSpriteNameEditing" class="map-config-name">{{ selectedMapSprite.name }}</strong>
+              <form v-else class="map-sprite-name-form" @submit.prevent="submitMapSpriteRename">
+                <input
+                  ref="mapSpriteNameInputRef"
+                  v-model="draftMapSpriteName"
+                  aria-label="Sprite name"
+                  @blur="submitMapSpriteRename"
+                  @keydown.esc.prevent="cancelMapSpriteRename"
+                />
+              </form>
+              <button class="map-config-icon" type="button" aria-label="Rename sprite" @click="startMapSpriteRename" v-html="editIcon"></button>
+              <span class="map-config-title-spacer"></span>
+              <button class="map-config-icon collapse" type="button" aria-label="Collapse sprite config" @click="mapSpriteConfigExpanded = false" v-html="arrowDownIcon"></button>
+            </div>
+            <div class="map-config-grid">
+              <label><span>X</span><input :value="selectedMapSprite.x" type="number" inputmode="numeric" @input="updateSelectedMapSpriteX" /></label>
+              <label><span>Y</span><input :value="selectedMapSprite.y" type="number" inputmode="numeric" @input="updateSelectedMapSpriteY" /></label>
+              <label><span>W</span><input value="54" readonly /></label>
+              <label><span>H</span><input value="60" readonly /></label>
+            </div>
+            <div class="map-config-row">
+              <span>Rotation</span>
+              <div class="map-button-group" role="group" aria-label="Map sprite rotation style">
+                <button
+                  class="map-button-group-item"
+                  :class="{ active: selectedMapSprite.rotationStyle === 'normal' }"
+                  type="button"
+                  aria-label="Normal rotation"
+                  @click="updateMapSpriteRotationStyle('normal')"
+                >
+                  <span v-html="rotateAroundIcon"></span>
+                </button>
+                <button
+                  class="map-button-group-item"
+                  :class="{ active: selectedMapSprite.rotationStyle === 'left-right' }"
+                  type="button"
+                  aria-label="Left-right rotation"
+                  @click="updateMapSpriteRotationStyle('left-right')"
+                >
+                  <span v-html="leftRightIcon"></span>
+                </button>
+                <button
+                  class="map-button-group-item"
+                  :class="{ active: selectedMapSprite.rotationStyle === 'none' }"
+                  type="button"
+                  aria-label="No rotation"
+                  @click="updateMapSpriteRotationStyle('none')"
+                >
+                  <span v-html="notRotateIcon"></span>
+                </button>
+              </div>
+            </div>
+            <div class="map-config-row">
+              <span>Show</span>
+              <div class="map-button-group" role="group" aria-label="Map sprite visibility">
+                <button
+                  class="map-button-group-item map-text-option"
+                  :class="{ active: !selectedMapSprite.hidden }"
+                  type="button"
+                  @click="updateMapSpriteVisibility(true)"
+                >
+                  Visible
+                </button>
+                <button
+                  class="map-button-group-item map-text-option"
+                  :class="{ active: selectedMapSprite.hidden }"
+                  type="button"
+                  @click="updateMapSpriteVisibility(false)"
+                >
+                  Hidden
+                </button>
+              </div>
+            </div>
+            <div v-if="mapPhysicsEnabled" class="map-config-row">
+              <span>Physics</span>
+              <div class="map-checkbox-group" role="group" aria-label="Map sprite physics">
+                <label class="map-checkbox">
+                  <input
+                    type="checkbox"
+                    :checked="mapSpritePhysicsFlags.includes('Collision')"
+                    @change="toggleMapSpritePhysicsFlag('Collision')"
+                  />
+                  <span>Collision</span>
+                </label>
+                <label class="map-checkbox">
+                  <input
+                    type="checkbox"
+                    :checked="mapSpritePhysicsFlags.includes('Gravity')"
+                    :disabled="mapSpritePhysicsFlags.includes('Immovable')"
+                    @change="toggleMapSpritePhysicsFlag('Gravity')"
+                  />
+                  <span>Gravity</span>
+                </label>
+                <label class="map-checkbox">
+                  <input
+                    type="checkbox"
+                    :checked="mapSpritePhysicsFlags.includes('Immovable')"
+                    :disabled="mapSpritePhysicsFlags.includes('Gravity')"
+                    @change="toggleMapSpritePhysicsFlag('Immovable')"
+                  />
+                  <span>Immovable</span>
+                </label>
+              </div>
+            </div>
+          </footer>
+          <button
+            v-else
+            class="map-config-expand"
+            type="button"
+            aria-label="Expand sprite config"
+            @click="mapSpriteConfigExpanded = true"
+          >
+            ⌃
+          </button>
+        </UICard>
+      </aside>
+    </section>
+    <Teleport to="body">
+      <div v-if="animationPendingRemoval != null" class="prototype-modal-backdrop" role="presentation" @click.self="cancelRemoveAnimation">
+        <section class="prototype-modal" role="dialog" aria-modal="true" aria-labelledby="remove-animation-title">
+          <h2 id="remove-animation-title">Remove animation</h2>
+          <p>Animation {{ animationPendingRemoval.name }} will be removed. Do you want to preserve the costumes?</p>
+          <label class="prototype-checkbox">
+            <input v-model="preserveRemovedAnimationFrames" type="checkbox" />
+            <span>Preserve (the costumes will be moved to the sprite's costume list)</span>
+          </label>
+          <div class="prototype-modal-actions">
+            <UIButton type="white" size="medium" @click="cancelRemoveAnimation">Cancel</UIButton>
+            <UIButton type="primary" size="medium" @click="confirmRemoveAnimation">Confirm</UIButton>
+          </div>
+        </section>
+      </div>
+    </Teleport>
+    <Teleport to="body">
+      <div v-if="spritePendingRename != null" class="prototype-modal-backdrop" role="presentation" @click.self="cancelSpriteRename">
+        <section class="prototype-modal" role="dialog" aria-modal="true" aria-labelledby="rename-sprite-title">
+          <h2 id="rename-sprite-title">Rename</h2>
+          <form class="prototype-form" @submit.prevent="submitSpriteRename">
+            <label class="prototype-field">
+              <span>Name</span>
+              <input
+                ref="spriteRenameInputRef"
+                v-model="draftSpriteRenameName"
+                type="text"
+                aria-label="Sprite name"
+                :aria-invalid="spriteRenameError !== ''"
+                @input="spriteRenameError = ''"
+                @keydown.esc.prevent="cancelSpriteRename"
+              />
+            </label>
+            <p class="prototype-field-tip">Use letters, numbers, spaces, hyphens, or underscores.</p>
+            <p v-if="spriteRenameError !== ''" class="prototype-field-error">{{ spriteRenameError }}</p>
+            <div class="prototype-modal-actions">
+              <UIButton type="white" size="medium" @click="cancelSpriteRename">Cancel</UIButton>
+              <UIButton type="primary" size="medium" @click="submitSpriteRename">Confirm</UIButton>
+            </div>
+          </form>
+        </section>
+      </div>
+    </Teleport>
+    <SpriteGeneratorModal
+      v-if="spriteGenModalOpen"
+      @close="cancelSpriteGenModal"
+      @add-sprite="addGeneratedSprite"
+    />
+    <PublishProjectModal
+      v-if="publishModalOpen"
+      :project-display-name="projectDisplayName"
+      :thumbnail="project.thumbnail"
+      :initial-project-description="project.description"
+      :initial-project-instructions="project.instructions ?? ''"
+      :submitting="publishSubmitting"
+      @close="cancelPublishProject"
+      @publish="submitPublishProject"
+    />
+  </main>
+</template>
+
+<style scoped>
+.prototype-editor {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.editor-navbar {
+  height: 56px;
+  display: grid;
+  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
+  align-items: center;
+  background: inherit;
+  padding: 0 24px;
+}
+
+.navbar-left,
+.navbar-right,
+.navbar-title,
+.panel-actions,
+.asset-header,
+.sprite-list {
+  display: flex;
+  align-items: center;
+}
+
+.navbar-left {
+  gap: 16px;
+}
+
+.navbar-right {
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.brand img {
+  display: block;
+  width: 99px;
+  height: auto;
+}
+
+.navbar-divider {
+  width: 1px;
+  height: 24px;
+  background: var(--ui-color-grey-400);
+}
+
+.icon-button,
+.mode-button,
+.stage-tools button,
+.stage-entry,
+.asset-header button {
+  border: 0;
+  background: transparent;
+  color: var(--ui-color-grey-900);
+}
+
+.icon-button {
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.icon-button svg,
+.navbar-title svg,
+.run-button svg,
+.publish-button svg {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.icon-button.muted {
+  color: var(--ui-color-grey-500);
+}
+
+.navbar-dropdown {
+  position: relative;
+  height: 56px;
+  display: flex;
+  align-items: center;
+}
+
+.project-menu-trigger {
+  height: 100%;
+  width: auto;
+  padding: 0 12px;
+  color: var(--ui-color-grey-1000);
+}
+
+.project-menu-trigger svg {
+  color: inherit;
+}
+
+.project-file-icon {
+  display: inline-flex;
+  width: 20px;
+  height: 20px;
+}
+
+.project-menu-arrow {
+  display: inline-flex;
+  width: 8px;
+  height: 8px;
+}
+
+.project-menu-trigger:hover {
+  background: var(--ui-color-grey-400);
+}
+
+.project-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 40;
+  min-width: 274px;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  padding: 8px;
+  box-shadow: var(--ui-box-shadow-md);
+}
+
+.project-menu-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.project-menu-group + .project-menu-group {
+  position: relative;
+  margin-top: 13px;
+}
+
+.project-menu-group + .project-menu-group::before {
+  content: '';
+  position: absolute;
+  top: -7px;
+  left: 0;
+  width: 100%;
+  border-top: 1px solid var(--ui-color-dividing-line-2);
+}
+
+.project-menu-item {
+  width: 100%;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  border-radius: var(--ui-border-radius-sm);
+  background: transparent;
+  padding: 8px 40px 8px 8px;
+  color: var(--ui-color-grey-1000);
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.project-menu-item:hover {
+  background: var(--ui-color-grey-300);
+}
+
+.project-menu-item img {
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+}
+
+.project-menu-item span:nth-of-type(1) {
+  min-width: 0;
+  flex: 1;
+}
+
+.navbar-title {
+  min-width: 0;
+  gap: 8px;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.project-name-trigger {
+  min-width: 0;
+  max-width: 248px;
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  border-radius: var(--ui-border-radius-md);
+  background: transparent;
+  padding: 3px 12px;
+  color: var(--ui-color-grey-1000);
+  font: inherit;
+}
+
+.project-name-trigger:hover,
+.project-name-trigger:focus-visible {
+  background: var(--ui-color-grey-400);
+}
+
+.project-name-trigger span:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.project-name-edit-icon {
+  display: none;
+  color: var(--ui-color-grey-800);
+}
+
+.project-name-edit-icon :deep(svg) {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
+
+.project-name-trigger:hover .project-name-edit-icon,
+.project-name-trigger:focus-visible .project-name-edit-icon {
+  display: inline-flex;
+}
+
+.project-name-form {
+  max-width: 248px;
+}
+
+.project-name-form input {
+  width: 248px;
+  height: 34px;
+  border: 1px solid var(--ui-color-primary-main);
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  padding: 0 12px;
+  color: var(--ui-color-grey-1000);
+  font: inherit;
+  outline: none;
+}
+
+.auto-save-state {
+  width: 24px;
+  height: 24px;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  color: var(--ui-color-grey-900);
+}
+
+.auto-save-state span,
+.auto-save-state :deep(svg) {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.auto-save-state.pending :deep(svg) path,
+.auto-save-state.saving :deep(svg) path {
+  stroke-dasharray: 2;
+}
+
+.auto-save-state.saving :deep(svg) path {
+  animation: dash 1s linear infinite;
+}
+
+@keyframes dash {
+  to {
+    stroke-dashoffset: 24;
+  }
+}
+
+.mode-button-group {
+  height: 32px;
+  padding: 2px;
+  border-radius: 8px;
+  background: var(--ui-color-grey-400);
+  display: inline-flex;
+  align-items: center;
+}
+
+.mode-button {
+  width: 36px;
+  height: 28px;
+  border-radius: 6px;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mode-button span {
+  width: 18px;
+  height: 18px;
+  display: flex;
+}
+
+.mode-button :deep(svg) {
+  width: 18px;
+  height: 18px;
+  fill: currentColor;
+  stroke: none;
+  animation: none;
+}
+
+.mode-button :deep(path) {
+  stroke: none;
+}
+
+.mode-button.active {
+  background: var(--ui-color-grey-100);
+  box-shadow: var(--ui-box-shadow-control);
+}
+
+.profile-dropdown {
+  position: relative;
+  height: 56px;
+  display: flex;
+  align-items: center;
+}
+
+.profile-trigger {
+  height: 100%;
+  min-width: 54px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  padding: 0 12px;
+}
+
+.profile-trigger:hover,
+.profile-trigger[aria-expanded='true'] {
+  background: var(--ui-color-grey-400);
+}
+
+.profile {
+  width: 30px;
+  height: 30px;
+  border-radius: 999px;
+  object-fit: cover;
+}
+
+.profile-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 40;
+  min-width: 156px;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  padding: 8px;
+  box-shadow: var(--ui-box-shadow-md);
+}
+
+.profile-menu-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.profile-menu-group + .profile-menu-group {
+  position: relative;
+  margin-top: 13px;
+}
+
+.profile-menu-group + .profile-menu-group::before {
+  content: '';
+  position: absolute;
+  top: -7px;
+  left: 0;
+  width: 100%;
+  border-top: 1px solid var(--ui-color-dividing-line-2);
+}
+
+.profile-menu-user,
+.profile-menu-item {
+  width: 100%;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border: 0;
+  border-radius: var(--ui-border-radius-sm);
+  background: transparent;
+  padding: 8px;
+  color: var(--ui-color-grey-1000);
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.profile-menu-user {
+  color: var(--ui-color-grey-800);
+  cursor: default;
+}
+
+.profile-menu-item:hover {
+  background: var(--ui-color-grey-300);
+}
+
+.prototype-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 120;
+  display: grid;
+  place-items: center;
+  background: rgb(31 41 55 / 36%);
+  padding: 24px;
+}
+
+.prototype-modal {
+  width: min(560px, 100%);
+  border-radius: var(--ui-border-radius-lg);
+  background: var(--ui-color-grey-100);
+  padding: 24px;
+  box-shadow: var(--ui-box-shadow-lg);
+}
+
+.prototype-modal h2 {
+  margin: 0 0 16px;
+  color: var(--ui-color-grey-1000);
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+.prototype-modal p {
+  margin: 0;
+  color: var(--ui-color-grey-1000);
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.prototype-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 20px;
+  color: var(--ui-color-grey-1000);
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.prototype-checkbox input {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--ui-color-primary-main);
+}
+
+.prototype-form {
+  display: flex;
+  flex-direction: column;
+}
+
+.prototype-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  color: var(--ui-color-grey-1000);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.prototype-field > span {
+  color: var(--ui-color-grey-800);
+}
+
+.prototype-field input {
+  height: 32px;
+  border: 0;
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-300);
+  box-shadow: inset 0 0 0 1px var(--ui-color-grey-300);
+  padding: 0 12px;
+  color: var(--ui-color-grey-1000);
+  font: inherit;
+  outline: none;
+}
+
+.prototype-field textarea,
+.prototype-field select {
+  border: 0;
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-300);
+  box-shadow: inset 0 0 0 1px var(--ui-color-grey-300);
+  padding: 8px 12px;
+  color: var(--ui-color-grey-1000);
+  font: inherit;
+  outline: none;
+}
+
+.prototype-field textarea {
+  min-height: 108px;
+  resize: vertical;
+}
+
+.prototype-field select {
+  height: 36px;
+}
+
+.prototype-field input:focus,
+.prototype-field textarea:focus,
+.prototype-field select:focus {
+  background: var(--ui-color-grey-100);
+  box-shadow: inset 0 0 0 1px var(--ui-color-primary-main);
+}
+
+.prototype-field input[aria-invalid='true'] {
+  border-color: var(--ui-color-danger-main);
+}
+
+.prototype-field-tip,
+.prototype-field-error {
+  margin: 6px 0 0;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.prototype-field-tip {
+  color: var(--ui-color-grey-700);
+}
+
+.prototype-field-error {
+  color: var(--ui-color-danger-main);
+}
+
+.prototype-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-top: 40px;
+}
+
+.editor-main {
+  min-height: 0;
+  flex: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 496px;
+  gap: 16px;
+  padding: 8px 16px 16px;
+}
+
+.map-editor-main {
+  min-height: 0;
+  flex: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 400px;
+  gap: 24px;
+  padding: 20px 24px 24px;
+}
+
+.map-workspace {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: var(--ui-border-radius-lg);
+  background-color: var(--ui-color-grey-200);
+  background-position: center;
+  background-repeat: repeat;
+  background-size: contain;
+}
+
+.map-stage {
+  position: relative;
+  width: min(100%, 820px);
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+  border-radius: var(--ui-border-radius-lg);
+  background-color: var(--ui-color-grey-300);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  box-shadow: var(--ui-box-shadow-lg);
+}
+
+.map-backdrop {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.map-sprite {
+  position: absolute;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  cursor: grab;
+  transform: translate(-50%, -50%);
+}
+
+.map-sprite.dragging {
+  cursor: grabbing;
+}
+
+.map-sprite img {
+  display: block;
+  object-fit: contain;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+.map-sprite-niu-xiao-qi {
+}
+
+.map-sprite-niu-xiao-qi img {
+  width: 58px;
+}
+
+.map-sprite-niu-xiao-hua {
+}
+
+.map-sprite-niu-xiao-hua img {
+  width: 72px;
+}
+
+.map-sprite-flower {
+}
+
+.map-sprite-flower img {
+  width: 46px;
+}
+
+.map-sprite-tornado {
+}
+
+.map-sprite-tornado img {
+  width: 54px;
+}
+
+.map-sprite-jaime {
+}
+
+.map-sprite-jaime img {
+  width: 40px;
+}
+
+.map-sprite-kai {
+}
+
+.map-sprite-kai img {
+  width: 50px;
+}
+
+.map-sprite.active {
+  outline: 1px solid var(--ui-color-primary-main);
+  outline-offset: 6px;
+}
+
+.map-sprite.active::before,
+.map-sprite.active::after {
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--ui-color-grey-100);
+  border: 1px solid var(--ui-color-grey-500);
+}
+
+.map-sprite.active::before {
+  left: -11px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.map-sprite.active::after {
+  right: -11px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.map-sprite-coordinate {
+  position: absolute;
+  right: -28px;
+  top: -32px;
+  border-radius: var(--ui-border-radius-sm);
+  background: rgb(89 117 66 / 0.78);
+  color: var(--ui-color-grey-100);
+  padding: 3px 7px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.map-zoom-controls {
+  position: absolute;
+  left: 50%;
+  bottom: 18px;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 4px;
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  padding: 4px;
+  box-shadow: var(--ui-box-shadow-sm);
+}
+
+.map-zoom-controls button {
+  height: 28px;
+  min-width: 28px;
+  border: 0;
+  border-radius: var(--ui-border-radius-sm);
+  background: transparent;
+  color: var(--ui-color-grey-900);
+}
+
+.map-side {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.map-card {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.map-card-header button,
+.map-config-title button {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--ui-color-grey-800);
+  padding: 0;
+}
+
+.map-card-header button:hover,
+.map-config-title button:hover {
+  background: var(--ui-color-grey-400);
+}
+
+.map-card-header button > span,
+.map-card-header button > span :deep(svg) {
+  width: 16px;
+  height: 16px;
+}
+
+.map-config {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 16px;
+}
+
+.map-config label,
+.map-config-row {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: center;
+  gap: 16px;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.map-config label > span:first-child,
+.map-config-row > span:first-child {
+  color: var(--ui-color-grey-1000);
+}
+
+.map-size-inputs {
+  min-width: 0;
+  display: flex;
+  gap: 8px;
+}
+
+.map-number-input {
+  width: 118px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-300);
+  box-shadow: inset 0 0 0 1px var(--ui-color-grey-300);
+  padding: 0 12px;
+  color: var(--ui-color-grey-1000);
+  line-height: 22px;
+  transition:
+    background-color 0.2s,
+    box-shadow 0.2s;
+}
+
+.map-number-input:hover {
+  background: var(--ui-color-grey-400);
+}
+
+.map-number-input:focus-within {
+  background: var(--ui-color-grey-100);
+  box-shadow: inset 0 0 0 1px var(--ui-color-primary-main);
+}
+
+.map-number-input span {
+  flex: 0 0 auto;
+  color: var(--ui-color-grey-800);
+}
+
+.map-number-input input {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  background: transparent;
+  color: var(--ui-color-grey-1000);
+  font: inherit;
+  text-align: right;
+  outline: none;
+}
+
+.map-number-input input::-webkit-outer-spin-button,
+.map-number-input input::-webkit-inner-spin-button {
+  margin: 0;
+  appearance: none;
+}
+
+.map-switch {
+  --ui-switch-rail-width: 40px;
+  --ui-switch-rail-height: 22px;
+  --ui-switch-button-size: 18px;
+  --ui-switch-offset: 2px;
+  min-width: var(--ui-switch-rail-width);
+  height: var(--ui-switch-rail-height);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  outline: none;
+}
+
+.map-switch-rail {
+  position: relative;
+  width: var(--ui-switch-rail-width);
+  height: var(--ui-switch-rail-height);
+  display: block;
+  overflow: hidden;
+  border-radius: calc(var(--ui-switch-rail-height) / 2);
+  background: rgb(0 0 0 / 0.14);
+  transition:
+    background-color 0.3s,
+    box-shadow 0.3s;
+}
+
+.map-switch.active .map-switch-rail {
+  background: var(--ui-color-primary-main);
+}
+
+.map-switch:focus .map-switch-rail {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-color-primary-main) 20%, transparent);
+}
+
+.map-switch-thumb {
+  position: absolute;
+  top: var(--ui-switch-offset);
+  left: var(--ui-switch-offset);
+  width: var(--ui-switch-button-size);
+  height: var(--ui-switch-button-size);
+  border-radius: 50%;
+  background: var(--ui-color-grey-100);
+  box-shadow:
+    0 1px 4px 0 rgb(0 0 0 / 0.3),
+    inset 0 0 1px 0 rgb(0 0 0 / 0.05);
+  transition: left 0.3s;
+}
+
+.map-switch.active .map-switch-thumb {
+  left: calc(100% - var(--ui-switch-button-size) - var(--ui-switch-offset));
+}
+
+.map-radio-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.map-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  color: var(--ui-color-grey-900);
+  font: inherit;
+  cursor: pointer;
+}
+
+.map-radio::before {
+  content: '';
+  width: 14px;
+  height: 14px;
+  flex: none;
+  border: 1px solid var(--ui-color-grey-600);
+  border-radius: 50%;
+  background: var(--ui-color-grey-100);
+  box-shadow: inset 0 0 0 3px var(--ui-color-grey-100);
+}
+
+.map-radio.active::before {
+  border-color: var(--ui-color-primary-main);
+  background: var(--ui-color-primary-main);
+}
+
+.map-config strong {
+  min-width: 0;
+  color: var(--ui-color-grey-1000);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.map-button-group {
+  height: 32px;
+  display: inline-flex;
+  overflow: hidden;
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-300);
+}
+
+.map-button-group-item {
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: var(--ui-color-grey-300);
+  color: var(--ui-color-grey-1000);
+  transition:
+    background-color 0.2s,
+    color 0.2s;
+}
+
+.map-button-group-item.active {
+  background: var(--ui-color-primary-200);
+  color: var(--ui-color-primary-400);
+}
+
+.map-button-group-item :deep(svg) {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.map-text-option {
+  width: auto;
+  min-width: 64px;
+  padding: 0 12px;
+  font-weight: 500;
+}
+
+.map-checkbox-group {
+  min-height: 32px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 8px 12px;
+}
+
+.map-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--ui-color-grey-1000);
+  white-space: nowrap;
+}
+
+.map-checkbox input {
+  width: 14px;
+  height: 14px;
+  accent-color: var(--ui-color-primary-main);
+}
+
+.map-checkbox input:disabled + span {
+  color: var(--ui-color-grey-600);
+}
+
+.map-sprites-card {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.map-sprite-list {
+  flex: 1 1 auto;
+  min-height: 120px;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 8px;
+  padding: 12px;
+  overflow: auto;
+}
+
+.map-sprite-config {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 4;
+  border-top: 1px solid var(--ui-color-grey-400);
+  background: var(--ui-color-grey-100);
+  padding: 16px;
+  box-shadow: 0 -12px 24px rgb(16 24 40 / 0.08);
+}
+
+.map-config-expand {
+  position: absolute;
+  right: 12px;
+  bottom: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--ui-border-radius-sm) var(--ui-border-radius-sm) 0 0;
+  background: var(--ui-color-grey-300);
+  color: var(--ui-color-grey-900);
+  box-shadow: var(--ui-box-shadow-sm);
+}
+
+.map-config-title {
+  height: 28px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+
+.map-sprite-config .map-config-row + .map-config-row {
+  margin-top: 16px;
+}
+
+.map-config-name {
+  min-width: 0;
+  max-width: 16em;
+  flex: 0 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.map-config-title-spacer {
+  flex: 1 1 auto;
+}
+
+.map-config-icon {
+  width: 20px;
+  height: 20px;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: var(--ui-color-grey-900);
+  transition: color 0.15s ease;
+}
+
+.map-config-icon:hover {
+  color: var(--ui-color-grey-1000);
+}
+
+.map-config-icon :deep(svg) {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.map-config-icon.collapse :deep(svg),
+.map-config-icon.collapse svg {
+  width: 16px;
+  height: 16px;
+}
+
+.map-sprite-name-form {
+  min-width: 0;
+  max-width: 16em;
+  flex: 1 1 16em;
+}
+
+.map-sprite-name-form input {
+  width: 100%;
+  height: 28px;
+  border: 0;
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  box-shadow: inset 0 0 0 1px var(--ui-color-primary-main);
+  padding: 0 10px;
+  color: var(--ui-color-grey-1000);
+  font: inherit;
+  outline: none;
+}
+
+.map-config-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.map-config-grid label {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.map-config-grid span {
+  width: 16px;
+  color: var(--ui-color-grey-800);
+}
+
+.map-config-grid input {
+  min-width: 0;
+  width: 100%;
+  height: 32px;
+  border: 0;
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-300);
+  box-shadow: inset 0 0 0 1px var(--ui-color-grey-300);
+  padding: 0 12px;
+  color: var(--ui-color-grey-1000);
+  font: inherit;
+  outline: none;
+}
+
+.map-config-grid input:focus {
+  background: var(--ui-color-grey-100);
+  box-shadow: inset 0 0 0 1px var(--ui-color-primary-main);
+}
+
+.code-card,
+.preview-card,
+.asset-card {
+  background: var(--ui-color-grey-100);
+  border-radius: var(--ui-border-radius-lg);
+  box-shadow: 0 1px 0 rgb(16 24 40 / 0.04);
+  overflow: hidden;
+}
+
+.code-card {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.format-button {
+  margin-left: auto;
+  margin-bottom: 7px;
+}
+
+.code-body {
+  min-height: 0;
+  flex: 1;
+  display: grid;
+  grid-template-columns: 60px 219px minmax(0, 1fr);
+}
+
+.asset-editor-body {
+  min-height: 0;
+  flex: 1;
+  display: flex;
+}
+
+.asset-editor-list {
+  width: 112px;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 10px;
+  border-right: 1px solid var(--ui-color-grey-400);
+  overflow-y: auto;
+}
+
+.editor-asset-item {
+  position: relative;
+  box-sizing: border-box;
+  width: 88px;
+  height: 88px;
+  flex: 0 0 auto;
+  border: 0;
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2px;
+  color: var(--ui-color-grey-1000);
+}
+
+.editor-asset-item::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.editor-asset-item.active {
+  background: var(--ui-color-primary-200);
+}
+
+.editor-asset-item.active::before {
+  border-width: 2px;
+  border-color: var(--ui-color-primary-main);
+}
+
+.asset-select-button {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  padding: 2px;
+  color: inherit;
+  font: inherit;
+}
+
+.editor-asset-item img {
+  width: 60px;
+  height: 60px;
+  margin-bottom: 5px;
+  object-fit: contain;
+}
+
+.sound-asset-item {
+  justify-content: flex-start;
+  gap: 0;
+}
+
+.sound-wave-icon {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  margin: 12px 0;
+  border-radius: 50%;
+  background: var(--ui-color-primary-main);
+  color: var(--ui-color-grey-100);
+  transition: transform 0.2s, background-color 0.2s;
+}
+
+.sound-asset-item:hover .sound-wave-icon {
+  background: var(--ui-color-primary-400);
+  transform: scale(1.15);
+}
+
+.sound-asset-item:active .sound-wave-icon {
+  background: var(--ui-color-primary-600);
+  transform: scale(1.15);
+}
+
+.sound-wave-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.widget-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px 0 12px;
+  color: var(--ui-color-grey-800);
+}
+
+.widget-icon :deep(svg) {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.editor-asset-item .asset-item-title {
+  width: 100%;
+  height: 22px;
+  overflow: hidden;
+  padding: 0 6px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  line-height: 22px;
+}
+
+.animation-asset-item,
+.costume-asset-item {
+  overflow: visible;
+}
+
+.asset-item-menu {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  z-index: 2;
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  background: var(--ui-color-primary-main);
+  color: var(--ui-color-grey-100);
+  padding: 0;
+  box-shadow: var(--ui-box-shadow-sm);
+}
+
+.asset-item-menu :deep(svg) {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.asset-add-button {
+  height: 44px;
+  width: calc(100% + 20px);
+  margin: auto -10px -12px;
+  flex: 0 0 auto;
+  border: 0;
+  border-top: 1px solid var(--ui-color-grey-400);
+  border-radius: 0 0 0 var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  color: var(--ui-color-grey-800);
+  font-size: 20px;
+}
+
+.animation-add-menu {
+  position: fixed;
+  z-index: 70;
+  box-sizing: border-box;
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  padding: 4px;
+  box-shadow: var(--ui-box-shadow-md);
+}
+
+.animation-add-menu-item {
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  border: 0;
+  border-radius: var(--ui-border-radius-sm);
+  background: transparent;
+  padding: 8px;
+  color: var(--ui-color-grey-1000);
+  font-size: 14px;
+  text-align: left;
+}
+
+.animation-add-menu-item:hover {
+  background: var(--ui-color-grey-300);
+}
+
+.asset-add-menu {
+  position: fixed;
+  z-index: 70;
+  box-sizing: border-box;
+  width: 184px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  padding: 4px;
+  box-shadow: var(--ui-box-shadow-md);
+}
+
+.asset-add-menu-item {
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  border: 0;
+  border-radius: var(--ui-border-radius-sm);
+  background: transparent;
+  padding: 8px;
+  color: var(--ui-color-grey-1000);
+  font-size: 14px;
+  text-align: left;
+}
+
+.asset-add-menu-item:hover {
+  background: var(--ui-color-grey-300);
+}
+
+.animation-options-menu {
+  position: fixed;
+  z-index: 80;
+  min-width: 184px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  padding: 8px;
+  box-shadow: var(--ui-box-shadow-md);
+}
+
+.animation-options-item {
+  min-height: 36px;
+  border: 0;
+  border-radius: var(--ui-border-radius-sm);
+  background: transparent;
+  padding: 8px 10px;
+  color: var(--ui-color-grey-1000);
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.animation-options-item:hover {
+  background: var(--ui-color-grey-300);
+}
+
+.animation-options-item + .animation-options-item {
+  margin-top: 1px;
+}
+
+.animation-options-item.danger {
+  color: var(--ui-color-danger-main);
+}
+
+.asset-options-menu {
+  position: fixed;
+  z-index: 80;
+  min-width: 184px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  padding: 8px;
+  box-shadow: var(--ui-box-shadow-md);
+}
+
+.asset-options-item {
+  min-height: 36px;
+  border: 0;
+  border-radius: var(--ui-border-radius-sm);
+  background: transparent;
+  padding: 8px 10px;
+  color: var(--ui-color-grey-1000);
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.asset-options-item:hover:not(:disabled) {
+  background: var(--ui-color-grey-300);
+}
+
+.asset-options-item + .asset-options-item {
+  margin-top: 1px;
+}
+
+.asset-options-item.danger {
+  color: var(--ui-color-danger-main);
+}
+
+.asset-options-item:disabled {
+  color: var(--ui-color-grey-600);
+  cursor: not-allowed;
+}
+
+.asset-detail {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  border-bottom-right-radius: var(--ui-border-radius-lg);
+  background: var(--ui-color-grey-200);
+  padding: 24px 20px;
+}
+
+.asset-detail-header {
+  width: 100%;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  margin: 0;
+}
+
+.asset-detail-header h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+  text-align: center;
+}
+
+.asset-detail-header button {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  color: var(--ui-color-grey-900);
+}
+
+.asset-detail-header button :deep(svg) {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
+
+.sound-detail-title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.sound-duration {
+  color: var(--ui-color-grey-700);
+  line-height: 18px;
+}
+
+.costume-preview {
+  position: relative;
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: var(--ui-border-radius-sm);
+  background-color: var(--ui-color-grey-100);
+  background-image:
+    linear-gradient(45deg, var(--ui-color-grey-400) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--ui-color-grey-400) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--ui-color-grey-400) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--ui-color-grey-400) 75%);
+  background-position:
+    0 0,
+    0 8px,
+    8px -8px,
+    -8px 0;
+  background-size: 16px 16px;
+}
+
+.backdrop-preview {
+  min-height: 0;
+  flex: 1;
+  overflow: hidden;
+  border-radius: var(--ui-border-radius-sm);
+  background: var(--ui-color-grey-100);
+}
+
+.backdrop-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.costume-preview img {
+  max-width: 72%;
+  max-height: 72%;
+  object-fit: contain;
+}
+
+.animation-detail-content {
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.animation-player {
+  position: relative;
+  min-height: 0;
+  flex: 1;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  border-radius: var(--ui-border-radius-sm);
+  background-color: var(--ui-color-grey-100);
+  background-image:
+    linear-gradient(45deg, var(--ui-color-grey-400) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--ui-color-grey-400) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--ui-color-grey-400) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--ui-color-grey-400) 75%);
+  background-position:
+    0 0,
+    0 8px,
+    8px -8px,
+    -8px 0;
+  background-size: 16px 16px;
+}
+
+.animation-player img {
+  grid-area: 1 / 1;
+  max-width: 64%;
+  max-height: 64%;
+  object-fit: contain;
+  opacity: 0;
+  animation: animation-frame-preview 1.6s steps(1, end) infinite;
+}
+
+.animation-player img:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.animation-player img:nth-child(2) {
+  animation-delay: 0.4s;
+}
+
+.animation-player img:nth-child(3) {
+  animation-delay: 0.8s;
+}
+
+.animation-player img:nth-child(4) {
+  animation-delay: 1.2s;
+}
+
+.animation-settings {
+  display: flex;
+  justify-content: center;
+}
+
+.animation-settings {
+  align-self: center;
+  gap: 4px;
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  padding: 4px;
+  box-shadow: var(--ui-box-shadow-sm);
+}
+
+.animation-setting {
+  min-width: 118px;
+  height: 32px;
+  border: 0;
+  border-radius: var(--ui-border-radius-sm);
+  background: transparent;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
+  color: var(--ui-color-grey-1000);
+  font-size: 12px;
+}
+
+.animation-setting strong {
+  max-width: 5em;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--ui-color-grey-400);
+  padding: 1px 5px;
+  color: var(--ui-color-grey-800);
+  font-size: 10px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.setting-icon {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+  color: currentColor;
+}
+
+.setting-icon :deep(svg) {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.widget-detail {
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  border-radius: var(--ui-border-radius-sm);
+  background: var(--ui-color-grey-100);
+  padding: 24px;
+}
+
+.sound-detail {
+  width: 100%;
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 24px 20px;
+}
+
+.sound-waveform {
+  position: relative;
+  height: 222px;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-300);
+}
+
+.sound-waveform-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.waveform-shape {
+  fill: var(--ui-color-grey-500);
+}
+
+.waveform-range-control {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  margin: 0 16px;
+  user-select: none;
+}
+
+.waveform-shaded-area {
+  position: absolute;
+  height: 100%;
+  background: var(--ui-color-grey-600);
+  opacity: 0.35;
+}
+
+.waveform-left-fixed {
+  left: -16px;
+  width: calc(var(--sound-range-left, 0%) + 16px);
+}
+
+.waveform-right-fixed {
+  right: -16px;
+  width: calc(var(--sound-range-right, 0%) + 16px);
+}
+
+.waveform-selection-area {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+}
+
+.waveform-control-bar {
+  position: absolute;
+  z-index: 10;
+  width: 16px;
+  height: 100%;
+  cursor: ew-resize;
+  border: 0;
+  background: var(--ui-color-primary-400);
+  padding: 0;
+}
+
+.waveform-control-bar::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2px;
+  height: 40px;
+  border-radius: 1px;
+  background: var(--ui-color-grey-100);
+  transform: translate(-50%, -50%);
+}
+
+.waveform-left-bar {
+  left: calc(var(--sound-range-left, 0%) - 16px);
+}
+
+.waveform-right-bar {
+  right: calc(var(--sound-range-right, 0%) - 16px);
+}
+
+.sound-controls {
+  display: flex;
+  align-items: center;
+}
+
+.sound-play-control {
+  display: flex;
+  width: 36px;
+  height: 36px;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 50%;
+  background: var(--ui-color-primary-main);
+  color: var(--ui-color-grey-100);
+  cursor: pointer;
+  transition: transform 0.2s, background-color 0.2s;
+}
+
+.sound-play-control:hover {
+  background: var(--ui-color-primary-400);
+  transform: scale(1.15);
+}
+
+.sound-play-control:active {
+  background: var(--ui-color-primary-600);
+  transform: scale(1.15);
+}
+
+.sound-play-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.sound-volume-slider {
+  display: flex;
+  flex: 0 1 438px;
+  align-items: center;
+  gap: 8px;
+  margin: 0 24px;
+}
+
+.sound-volume-icon {
+  width: 24px;
+  height: 24px;
+  flex: none;
+  color: var(--ui-color-grey-800);
+}
+
+.sound-slider-track {
+  position: relative;
+  height: 4px;
+  flex: 1;
+  border-radius: 999px;
+  background: var(--ui-color-grey-400);
+  cursor: pointer;
+}
+
+.sound-slider-track span {
+  position: absolute;
+  inset: 0 calc(100% - var(--sound-gain, 55%)) 0 0;
+  border-radius: inherit;
+  background: var(--ui-color-primary-main);
+}
+
+.sound-controls-spacer {
+  flex: 1 1 0;
+}
+
+.sound-edit-actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 8px;
+}
+
+.widget-detail label {
+  width: min(360px, 90%);
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-200);
+  padding: 0 14px;
+}
+
+.widget-detail strong {
+  font-weight: 500;
+}
+
+@keyframes animation-frame-preview {
+  0%,
+  24.99% {
+    opacity: 1;
+  }
+
+  25%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.events-list {
+  border-right: 1px solid var(--ui-color-grey-400);
+  padding: 15px 16px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  cursor: grab;
+  scrollbar-width: none;
+  touch-action: pan-y;
+}
+
+.events-list.dragging {
+  cursor: grabbing;
+  user-select: none;
+}
+
+.events-list::-webkit-scrollbar {
+  display: none;
+}
+
+.event-group {
+  min-width: max-content;
+  border-bottom: 1px dashed var(--ui-color-grey-400);
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+}
+
+.event-group h3 {
+  margin: 0 0 14px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--ui-color-grey-600);
+}
+
+.event-snippet {
+  display: block;
+  width: max-content;
+  min-width: 100%;
+  border: 0;
+  background: transparent;
+  padding: 5px 6px;
+  text-align: left;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 13px;
+  color: #000;
+  white-space: nowrap;
+}
+
+.code-editor {
+  position: relative;
+  overflow: hidden;
+  padding: 14px 66px 14px 18px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: calc(13px * var(--prototype-code-zoom, 1));
+  line-height: 1.55;
+}
+
+.code-line {
+  display: grid;
+  grid-template-columns: 26px max-content minmax(0, 1fr);
+  gap: 8px;
+  min-height: 18px;
+}
+
+.line-number {
+  color: var(--ui-color-grey-500);
+  text-align: right;
+}
+
+.source-content {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.code-side-tools {
+  position: absolute;
+  inset: 12px 8px 8px auto;
+  width: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  gap: 40px;
+}
+
+.code-document-tabs {
+  min-height: 0;
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: column;
+  align-items: center;
+}
+
+.code-document-temp-tabs {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.code-document-temp-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.code-document-tab {
+  width: 40px;
+  height: 40px;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: 6px;
+  background: var(--ui-color-grey-300);
+  cursor: pointer;
+  transition:
+    border-color 0.2s,
+    background 0.2s;
+}
+
+.code-document-tab.active {
+  border-color: var(--ui-color-primary-500);
+  background: var(--ui-color-primary-200);
+  cursor: default;
+}
+
+.code-document-tab img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.code-document-divider {
+  width: 32px;
+  height: 1px;
+  flex: 0 0 auto;
+  margin: 12px 0;
+  background: var(--ui-color-dividing-line-2);
+}
+
+.code-document-close {
+  width: 40px;
+  height: 40px;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 8px;
+  border: 0;
+  background: transparent;
+  color: var(--ui-color-grey-800);
+}
+
+.code-document-close:hover {
+  color: var(--ui-color-grey-1000);
+}
+
+.code-document-close :deep(svg) {
+  width: 20px;
+  height: 20px;
+  display: block;
+}
+
+.zoom-tools {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  gap: 4px;
+}
+
+.zoom-tools button {
+  width: 38px;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: 6px;
+  background: var(--ui-color-grey-100);
+  color: var(--ui-color-grey-800);
+}
+
+.zoom-tools button:hover {
+  background: var(--ui-color-grey-300);
+  color: var(--ui-color-grey-1000);
+}
+
+.zoom-tools button :deep(svg) {
+  width: 20px;
+  height: 20px;
+  display: block;
+}
+
+.preview-column {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.preview-card {
+  flex: 0 0 auto;
+}
+
+.panel-actions {
+  gap: 12px;
+}
+
+.run-button,
+.publish-button {
+  height: 32px;
+  border: 0;
+  border-radius: var(--ui-border-radius-lg);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 0 17px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.run-button {
+  background: var(--ui-color-primary-main);
+  color: white;
+}
+
+.button-icon,
+.button-icon :deep(svg) {
+  width: 16px;
+  height: 16px;
+}
+
+.publish-button {
+  background: var(--ui-color-primary-100);
+  color: var(--ui-color-primary-main);
+}
+
+.publish-toast {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  z-index: 3;
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  padding: 8px 12px;
+  color: var(--ui-color-grey-1000);
+  font-size: 13px;
+  line-height: 18px;
+  box-shadow: var(--ui-box-shadow-sm);
+}
+
+.stage-frame {
+  position: relative;
+  height: 354px;
+  margin: 13px;
+  overflow: hidden;
+  border-radius: 6px;
+  background: var(--ui-color-grey-300);
+}
+
+.stage-backdrop,
+.stage-frame :deep(.relative) {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.stage-backdrop {
+  object-fit: cover;
+}
+
+.stage-sprite,
+.selected-sprite {
+  position: absolute;
+}
+
+.stage-sprite {
+  width: 105px;
+  height: 105px;
+  cursor: grab;
+  transform-origin: center;
+}
+
+.stage-sprite.dragging,
+.selected-sprite.dragging {
+  cursor: grabbing;
+}
+
+.stage-sprite img {
+  position: absolute;
+  left: 24px;
+  top: 10px;
+  width: 54px;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+.selected-sprite {
+  left: 178px;
+  top: 108px;
+  width: 105px;
+  height: 105px;
+  border: 1px solid var(--ui-color-primary-main);
+  cursor: grab;
+  transform-origin: center;
+}
+
+.selected-sprite img {
+  position: absolute;
+  left: 24px;
+  top: 10px;
+  width: 54px;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+.coordinate {
+  position: absolute;
+  top: -28px;
+  right: -18px;
+  border-radius: 3px;
+  background: rgb(89 117 66 / 0.78);
+  color: white;
+  padding: 4px 7px;
+  font-size: 12px;
+}
+
+.handle,
+.corner {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  background: white;
+  border: 1px solid var(--ui-color-grey-400);
+  box-shadow: var(--ui-box-shadow-sm);
+}
+
+.handle.left {
+  left: -7px;
+  top: 45px;
+}
+
+.handle.right {
+  right: -7px;
+  top: 45px;
+}
+
+.corner.bottom-left {
+  left: -7px;
+  bottom: -7px;
+}
+
+.corner.top-right {
+  right: -7px;
+  top: -7px;
+}
+
+.stage-tools {
+  position: absolute;
+  left: 50%;
+  bottom: 16px;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  padding: 4px;
+  border-radius: 8px;
+  border: 2px solid var(--ui-color-grey-100);
+  background: var(--ui-color-grey-100);
+  box-shadow: var(--ui-box-shadow-lg);
+}
+
+.stage-tools.expanded {
+  gap: 4px;
+  padding: 4px;
+}
+
+.stage-tools button {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--ui-border-radius-md);
+  background: transparent;
+  color: var(--ui-color-grey-1000);
+}
+
+.stage-tools button:hover {
+  background: var(--ui-color-turquoise-200);
+  color: var(--ui-color-turquoise-500);
+}
+
+.quick-config-input {
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-300);
+  padding: 0 8px;
+  color: var(--ui-color-grey-1000);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.quick-config-input input {
+  width: 44px;
+  height: 24px;
+  border: 0;
+  border-radius: var(--ui-border-radius-sm);
+  background: var(--ui-color-grey-100);
+  color: var(--ui-color-grey-1000);
+  text-align: center;
+  font: inherit;
+  outline: none;
+}
+
+.quick-config-input input:focus {
+  box-shadow: var(--ui-box-shadow-control);
+}
+
+.quick-config-input input::-webkit-outer-spin-button,
+.quick-config-input input::-webkit-inner-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+.quick-config-divider {
+  width: 1px;
+  height: 16px;
+  background: var(--ui-color-grey-400);
+}
+
+.rotation-style-group,
+.direction-group {
+  height: 32px;
+  display: inline-flex;
+  overflow: hidden;
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-300);
+}
+
+.rotation-style-button,
+.direction-group button {
+  background: transparent;
+}
+
+.rotation-style-button.active,
+.direction-group button.active {
+  background: var(--ui-color-primary-200);
+  color: var(--ui-color-primary-400);
+}
+
+.direction-group button {
+  width: auto;
+  min-width: 48px;
+  padding: 0 10px;
+  color: var(--ui-color-grey-1000);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.heading-input input {
+  width: 52px;
+}
+
+.position-input input {
+  width: 52px;
+}
+
+.quick-layer-menu {
+  position: absolute;
+  left: 0;
+  bottom: 44px;
+  min-width: 152px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  padding: 6px;
+  box-shadow: var(--ui-box-shadow-md);
+}
+
+.quick-layer-menu button {
+  width: 100%;
+  height: 32px;
+  justify-content: flex-start;
+  padding: 0 8px;
+  color: var(--ui-color-grey-1000);
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.quick-config-back {
+  color: var(--ui-color-grey-1000);
+}
+
+.stage-tools button span,
+.stage-tools button :deep(svg) {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.asset-card {
+  flex: 1 1 auto;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 80px;
+  min-height: 0;
+}
+
+.sprites-panel {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--ui-color-grey-400);
+}
+
+.asset-header button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  padding: 0;
+  color: var(--ui-color-grey-800);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  outline: none;
+}
+
+.asset-header button:hover {
+  background: var(--ui-color-grey-400);
+}
+
+.asset-header button:active {
+  background: var(--ui-color-grey-500);
+}
+
+.asset-header button:focus-visible {
+  box-shadow: 0 0 0 2px var(--ui-color-primary-300);
+}
+
+.asset-header button > span,
+.asset-header button > span :deep(svg) {
+  width: 16px;
+  height: 16px;
+}
+
+.add-sprite-menu-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.add-sprite-menu {
+  position: absolute;
+  top: 36px;
+  right: 0;
+  z-index: 30;
+  box-sizing: border-box;
+  width: max-content;
+  min-width: 240px;
+  max-width: min(320px, calc(100vw - 32px));
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  padding: 8px;
+  box-shadow: var(--ui-box-shadow-md);
+}
+
+.asset-header .add-sprite-menu-item,
+.map-card-header .add-sprite-menu-item {
+  box-sizing: border-box;
+  width: 100%;
+  height: auto;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--ui-border-radius-sm);
+  background: transparent;
+  padding: 8px 40px 8px 8px;
+  color: var(--ui-color-grey-1000);
+  font-size: 14px;
+  line-height: 22px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.asset-header .add-sprite-menu-item:hover,
+.map-card-header .add-sprite-menu-item:hover {
+  background: var(--ui-color-grey-300);
+}
+
+.sprite-list {
+  min-height: 0;
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(4, 88px);
+  grid-auto-rows: 88px;
+  align-content: flex-start;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 8px;
+  padding: 12px;
+  overflow: auto;
+}
+
+.sprite-menu {
+  width: 24px;
+  height: 24px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--ui-color-primary-main);
+  color: white;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sprite-menu :deep(svg) {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.sprite-options-menu {
+  position: fixed;
+  z-index: 80;
+  min-width: 184px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  padding: 8px;
+  box-shadow: var(--ui-box-shadow-md);
+}
+
+.sprite-options-item {
+  min-height: 36px;
+  border: 0;
+  border-radius: var(--ui-border-radius-sm);
+  background: transparent;
+  padding: 8px 10px;
+  color: var(--ui-color-grey-1000);
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.sprite-options-item:hover {
+  background: var(--ui-color-grey-300);
+}
+
+.sprite-options-item + .sprite-options-item {
+  margin-top: 1px;
+}
+
+.sprite-options-item.danger {
+  color: var(--ui-color-danger-main);
+}
+
+.project-menu,
+.profile-menu,
+.animation-add-menu,
+.asset-add-menu,
+.animation-options-menu,
+.asset-options-menu,
+.quick-layer-menu,
+.add-sprite-menu,
+.sprite-options-menu {
+  border: 0;
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  padding: 8px;
+  box-shadow: var(--ui-box-shadow-sm);
+  overflow: hidden;
+}
+
+.project-menu-group,
+.profile-menu-group {
+  gap: 4px;
+}
+
+.project-menu-item,
+.profile-menu-user,
+.profile-menu-item,
+.animation-add-menu-item,
+.asset-add-menu-item,
+.animation-options-item,
+.asset-options-item,
+.quick-layer-menu button,
+.asset-header .add-sprite-menu-item,
+.map-card-header .add-sprite-menu-item,
+.sprite-options-item {
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  border: 0;
+  border-radius: var(--ui-border-radius-sm);
+  background: transparent;
+  padding: 8px 40px 8px 8px;
+  color: var(--ui-color-grey-1000);
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.project-menu-item:hover,
+.profile-menu-item:hover,
+.animation-add-menu-item:hover,
+.asset-add-menu-item:hover,
+.animation-options-item:hover,
+.asset-options-item:hover:not(:disabled),
+.quick-layer-menu button:hover,
+.asset-header .add-sprite-menu-item:hover,
+.map-card-header .add-sprite-menu-item:hover,
+.sprite-options-item:hover {
+  background: var(--ui-color-grey-300);
+}
+
+.animation-add-menu-item + .animation-add-menu-item,
+.asset-add-menu-item + .asset-add-menu-item,
+.animation-options-item + .animation-options-item,
+.asset-options-item + .asset-options-item,
+.quick-layer-menu button + button,
+.asset-header .add-sprite-menu-item + .add-sprite-menu-item,
+.map-card-header .add-sprite-menu-item + .add-sprite-menu-item,
+.sprite-options-item + .sprite-options-item {
+  position: relative;
+  margin-top: 13px;
+}
+
+.animation-add-menu-item + .animation-add-menu-item::before,
+.asset-add-menu-item + .asset-add-menu-item::before,
+.animation-options-item + .animation-options-item::before,
+.asset-options-item + .asset-options-item::before,
+.quick-layer-menu button + button::before,
+.asset-header .add-sprite-menu-item + .add-sprite-menu-item::before,
+.map-card-header .add-sprite-menu-item + .add-sprite-menu-item::before,
+.sprite-options-item + .sprite-options-item::before {
+  content: '';
+  position: absolute;
+  top: -7px;
+  left: 0;
+  width: 100%;
+  border-top: 1px solid var(--ui-color-dividing-line-2);
+}
+
+.animation-options-item.danger,
+.asset-options-item.danger,
+.sprite-options-item.danger {
+  color: var(--ui-color-danger-main);
+}
+
+.hidden-mark {
+  flex: 0 0 auto;
+  color: var(--ui-color-grey-500);
+}
+
+.stage-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.stage-panel-header {
+  width: 100%;
+}
+
+.stage-thumb {
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 12px 0;
+  border: 1px solid var(--ui-color-grey-400);
+  border-radius: var(--ui-border-radius-md);
+  background: var(--ui-color-grey-100);
+  padding: 2px;
+  cursor: pointer;
+  transition: border-color 0.1s, background 0.1s;
+}
+
+.stage-thumb.active {
+  border: 2px solid var(--ui-color-primary-main);
+  background: var(--ui-color-primary-200);
+  padding: 0;
+}
+
+.stage-thumb:hover:not(.active) {
+  background: var(--ui-color-grey-300);
+}
+
+.stage-thumb img {
+  width: 44px;
+  height: 44px;
+  border-radius: 4px;
+  object-fit: cover;
+}
+
+.stage-divider {
+  width: 40px;
+  height: 1px;
+  flex: none;
+  background: var(--ui-color-dividing-line-2);
+}
+
+.stage-entry {
+  width: 56px;
+  height: 56px;
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  border: none;
+  border-radius: var(--ui-border-radius-md);
+  color: var(--ui-color-grey-800);
+  background: var(--ui-color-grey-100);
+  padding: 4px;
+  transition:
+    background-color 0.1s,
+    color 0.1s;
+}
+
+.stage-divider + .stage-entry {
+  margin-top: 12px;
+}
+
+.stage-entry + .stage-entry {
+  margin-top: 8px;
+}
+
+.stage-entry.active {
+  color: var(--ui-color-primary-main);
+}
+
+.stage-entry:hover:not(.active) {
+  background: var(--ui-color-grey-300);
+  color: var(--ui-color-grey-900);
+}
+
+.stage-entry-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.stage-entry-icon :deep(svg) {
+  width: 24px;
+  height: 24px;
+  display: block;
+}
+
+.stage-entry span {
+  font-size: 10px;
+  line-height: 14px;
+}
+</style>
diff --git a/ui/prototype/src/pages/sign-in/callback.vue b/ui/prototype/src/pages/sign-in/callback.vue
new file mode 100644
index 0000000000..c1752fb218
--- /dev/null
+++ b/ui/prototype/src/pages/sign-in/callback.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="flex h-screen items-center justify-center">
+    <h4 class="m-0 text-base font-normal text-title">Signing in...</h4>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  document.title = 'Signing in... - XBuilder'
+
+  const params = new URLSearchParams(location.search)
+  const returnTo = params.get('returnTo')
+
+  window.setTimeout(() => {
+    window.location.replace(returnTo != null ? returnTo : '/')
+  }, 300)
+})
+</script>
diff --git a/ui/prototype/src/pages/sign-in/token.vue b/ui/prototype/src/pages/sign-in/token.vue
new file mode 100644
index 0000000000..023f6893b7
--- /dev/null
+++ b/ui/prototype/src/pages/sign-in/token.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+
+import { getSignedInUser } from '@/apis/user'
+import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
+import CommunityFooter from '@/components/community/CommunityFooter.vue'
+import CommunityNavbar from '@/components/community/CommunityNavbar.vue'
+import UICard from '@/components/ui/UICard.vue'
+
+const user = getSignedInUser()
+const tokenPreview = `prototype.${user.username}.offline`
+
+onMounted(() => {
+  document.title = 'Sign in token - XBuilder'
+})
+</script>
+
+<template>
+  <main class="flex min-h-screen min-w-360 flex-col bg-grey-300">
+    <CommunityNavbar />
+    <CenteredWrapper class="flex-1 py-10">
+      <UICard class="p-6">
+        <h1 class="m-0 text-2xl font-medium text-title">Local sign-in token</h1>
+        <p class="mt-3 text-sm leading-6 text-grey-700">
+          The prototype exposes a deterministic local token shape so the page can be previewed without Casdoor or backend state.
+        </p>
+        <dl class="mt-6 grid grid-cols-[160px_minmax(0,1fr)] gap-3 text-sm">
+          <dt class="text-hint-1">Username</dt>
+          <dd class="m-0 text-title">{{ user.username }}</dd>
+          <dt class="text-hint-1">Display name</dt>
+          <dd class="m-0 text-title">{{ user.displayName }}</dd>
+          <dt class="text-hint-1">Token</dt>
+          <dd class="m-0 rounded-sm bg-grey-300 px-3 py-2 font-mono text-title">{{ tokenPreview }}</dd>
+        </dl>
+      </UICard>
+    </CenteredWrapper>
+    <CommunityFooter />
+  </main>
+</template>
diff --git a/ui/prototype/src/pages/tutorials/course-series.vue b/ui/prototype/src/pages/tutorials/course-series.vue
new file mode 100644
index 0000000000..44791c9b03
--- /dev/null
+++ b/ui/prototype/src/pages/tutorials/course-series.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+
+import { getCourseSeries } from '@/apis/tutorials'
+import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
+import CommunityFooter from '@/components/community/CommunityFooter.vue'
+import CommunityNavbar from '@/components/community/CommunityNavbar.vue'
+import TextView from '@/components/common/TextView.vue'
+import CourseItem from '@/components/tutorials/CourseItem.vue'
+import UICard from '@/components/ui/UICard.vue'
+
+const props = defineProps<{
+  courseSeriesIdInput: string
+}>()
+
+const series = computed(() => getCourseSeries(props.courseSeriesIdInput))
+
+onMounted(() => {
+  document.title = `${series.value.title} - XBuilder`
+})
+</script>
+
+<template>
+  <main class="flex min-h-screen min-w-360 flex-col bg-grey-300">
+    <CommunityNavbar />
+    <CenteredWrapper size="medium" class="flex-1 py-8">
+      <UICard class="flex h-36 gap-8 bg-grey-100 p-5">
+        <div class="h-full w-36 flex-none overflow-hidden rounded-sm bg-grey-300">
+          <img class="size-full object-cover" :src="series.cover" :alt="series.title" />
+        </div>
+        <div class="min-w-0 flex-1">
+          <h1 class="m-0 truncate text-2xl font-medium text-title">{{ series.title }}</h1>
+          <TextView class="mt-3 max-h-15 overflow-auto" :text="series.description" />
+          <div class="mt-3 text-sm text-hint-1">{{ series.total }} · {{ series.updatedAt }}</div>
+        </div>
+      </UICard>
+
+      <section class="mt-7">
+        <h2 class="m-0 mb-4 text-xl font-normal text-title">Courses</h2>
+        <ul class="m-0 grid list-none grid-cols-2 gap-5 p-0">
+          <li v-for="course in series.courses" :key="course.id">
+            <RouterLink class="block text-text no-underline" :to="`/course/${series.id}/${course.id}/start`">
+              <CourseItem :course="course" />
+            </RouterLink>
+          </li>
+        </ul>
+      </section>
+    </CenteredWrapper>
+    <CommunityFooter />
+  </main>
+</template>
diff --git a/ui/prototype/src/pages/tutorials/course-start.vue b/ui/prototype/src/pages/tutorials/course-start.vue
new file mode 100644
index 0000000000..96650fc2cb
--- /dev/null
+++ b/ui/prototype/src/pages/tutorials/course-start.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue'
+
+import { getCourse, getCourseSeries, getNextCourse } from '@/apis/tutorials'
+import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
+import CommunityFooter from '@/components/community/CommunityFooter.vue'
+import CommunityNavbar from '@/components/community/CommunityNavbar.vue'
+import UIButton from '@/components/ui/UIButton.vue'
+import UICard from '@/components/ui/UICard.vue'
+
+const props = defineProps<{
+  courseSeriesIdInput: string
+  courseIdInput: string
+}>()
+
+const step = ref(1)
+const series = computed(() => getCourseSeries(props.courseSeriesIdInput))
+const course = computed(() => getCourse(props.courseSeriesIdInput, props.courseIdInput))
+const nextCourse = computed(() => getNextCourse(props.courseSeriesIdInput, props.courseIdInput))
+
+function continueCourse() {
+  step.value = step.value === 3 ? 1 : step.value + 1
+}
+
+watchEffect(() => {
+  document.title = `${course.value.title} - XBuilder`
+})
+</script>
+
+<template>
+  <main class="flex min-h-screen min-w-360 flex-col bg-grey-300">
+    <CommunityNavbar />
+    <CenteredWrapper class="grid grid-cols-[270px_minmax(0,1fr)] gap-6 py-8" size="large">
+      <UICard class="h-fit p-4">
+        <RouterLink class="text-sm text-primary-600 no-underline" :to="`/course-series/${series.id}`">Back to series</RouterLink>
+        <h1 class="mt-4 text-xl font-medium text-title">{{ course.title }}</h1>
+        <p class="text-sm leading-6 text-hint-2">{{ course.summary }}</p>
+        <div class="mt-5 rounded-md bg-primary-100 p-3 text-sm text-primary-700">
+          Local tutorial preview · step {{ step }} of 3
+        </div>
+      </UICard>
+
+      <UICard class="p-6">
+        <div class="mb-5 flex items-center justify-between">
+          <div>
+            <h2 class="m-0 text-2xl font-medium text-title">{{ series.title }}</h2>
+            <p class="mt-1 text-sm text-hint-1">{{ course.duration }} · offline prototype walkthrough</p>
+          </div>
+          <div class="flex gap-2">
+            <RouterLink
+              v-if="nextCourse"
+              class="inline-flex h-9 items-center justify-center rounded-sm border border-grey-400 bg-grey-100 px-3 text-sm font-medium text-grey-900 no-underline hover:bg-grey-200"
+              :to="`/course/${series.id}/${nextCourse.id}/start`"
+            >
+              Next course
+            </RouterLink>
+            <UIButton type="primary" @click="continueCourse">Continue</UIButton>
+          </div>
+        </div>
+        <div class="grid min-h-100 place-items-center rounded-md bg-grey-300">
+          <div class="max-w-120 text-center">
+            <img class="mx-auto h-44 object-contain" src="@ui-images/boy.png" alt="" />
+            <p class="mt-4 text-base leading-7 text-text">
+              Follow the highlighted action in the offline prototype. The state changes locally and does not require a server.
+            </p>
+          </div>
+        </div>
+      </UICard>
+    </CenteredWrapper>
+    <CommunityFooter />
+  </main>
+</template>
diff --git a/ui/prototype/src/pages/tutorials/index.vue b/ui/prototype/src/pages/tutorials/index.vue
index c4faf30e9c..59c0db0fb9 100644
--- a/ui/prototype/src/pages/tutorials/index.vue
+++ b/ui/prototype/src/pages/tutorials/index.vue
@@ -1,39 +1,16 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted } from 'vue'
 
-import CommunityFooter from '@/components/community/CommunityFooter.vue'
-import CommunityNavbar from '@/components/community/CommunityNavbar.vue'
 import TutorialHome from '@/components/tutorials/TutorialHome.vue'
-import { tutorials, type TutorialCard } from '@/data/tutorials'
+import { listCourseSeries } from '@/apis/tutorials'
 
 onMounted(() => {
   document.title = 'Tutorials - XBuilder'
 })
 
-const activeTutorial = ref<TutorialCard | null>(null)
-
-function openTutorial(tutorial: TutorialCard) {
-  activeTutorial.value = tutorial
-}
+const tutorials = listCourseSeries()
 </script>
 
 <template>
-  <div class="flex min-h-screen min-w-360 flex-col bg-grey-100 font-main text-text">
-    <CommunityNavbar />
-
-    <TutorialHome
-      :tutorials="tutorials"
-      @open-tutorial="openTutorial"
-    />
-
-    <div
-      v-if="activeTutorial"
-      class="fixed right-6 bottom-[72px] z-30 rounded-md bg-grey-1000 px-4 py-3 text-sm text-grey-100 shadow-sm"
-      role="status"
-    >
-      Opening {{ activeTutorial.title }}
-    </div>
-
-    <CommunityFooter />
-  </div>
+  <TutorialHome :tutorials="tutorials" />
 </template>
diff --git a/ui/prototype/src/router.ts b/ui/prototype/src/router.ts
index 246daf27c6..d6dc9fd151 100644
--- a/ui/prototype/src/router.ts
+++ b/ui/prototype/src/router.ts
@@ -1,22 +1,137 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
+export type UserTab = 'overview' | 'projects' | 'likes' | 'followers' | 'following'
+
+export function getProjectPageRoute(owner: string, name: string) {
+  return `/project/${encodeURIComponent(owner)}/${encodeURIComponent(name)}`
+}
+
+export function getProjectEditorRoute(owner: string, name: string) {
+  return `/editor/${encodeURIComponent(owner)}/${encodeURIComponent(name)}`
+}
+
+export function getUserPageRoute(name: string, tab: UserTab = 'overview') {
+  const base = `/user/${encodeURIComponent(name)}`
+  return tab === 'overview' ? base : `${base}/${tab}`
+}
+
+export function getSearchRoute(keyword = '') {
+  return keyword === '' ? '/search' : `/search?q=${encodeURIComponent(keyword)}`
+}
+
 const router = createRouter({
   history: createWebHistory(),
   routes: [
     {
       path: '/',
-      redirect: '/tutorials'
+      component: () => import('@/pages/community/index.vue'),
+      children: [
+        {
+          path: '/',
+          name: 'home',
+          component: () => import('@/pages/community/home.vue')
+        },
+        {
+          path: '/explore',
+          name: 'explore',
+          component: () => import('@/pages/community/explore.vue')
+        },
+        {
+          path: '/search',
+          name: 'search',
+          component: () => import('@/pages/community/search.vue')
+        },
+        {
+          path: '/user/:nameInput',
+          component: () => import('@/pages/community/user/index.vue'),
+          props: true,
+          children: [
+            {
+              path: '',
+              name: 'user-overview',
+              component: () => import('@/pages/community/user/overview.vue'),
+              props: true
+            },
+            {
+              path: 'projects',
+              name: 'user-projects',
+              component: () => import('@/pages/community/user/projects.vue'),
+              props: true
+            },
+            {
+              path: 'likes',
+              name: 'user-likes',
+              component: () => import('@/pages/community/user/likes.vue'),
+              props: true
+            },
+            {
+              path: 'followers',
+              name: 'user-followers',
+              component: () => import('@/pages/community/user/followers.vue'),
+              props: true
+            },
+            {
+              path: 'following',
+              name: 'user-following',
+              component: () => import('@/pages/community/user/following.vue'),
+              props: true
+            }
+          ]
+        },
+        {
+          path: '/project/:ownerInput/:nameInput',
+          name: 'project',
+          component: () => import('@/pages/community/project.vue'),
+          props: true
+        }
+      ]
+    },
+    {
+      path: '/editor',
+      redirect: '/'
+    },
+    {
+      path: '/editor/:ownerNameInput/:projectNameInput/:inEditorPath*',
+      name: 'editor',
+      component: () => import('@/pages/editor/index.vue'),
+      props: true
     },
     {
       path: '/tutorials',
       name: 'tutorials',
       component: () => import('@/pages/tutorials/index.vue')
     },
+    {
+      path: '/course/:courseSeriesIdInput/:courseIdInput/start',
+      name: 'course-start',
+      component: () => import('@/pages/tutorials/course-start.vue'),
+      props: true
+    },
+    {
+      path: '/course-series/:courseSeriesIdInput',
+      name: 'course-series',
+      component: () => import('@/pages/tutorials/course-series.vue'),
+      props: true
+    },
+    {
+      path: '/sign-in/callback',
+      name: 'sign-in-callback',
+      component: () => import('@/pages/sign-in/callback.vue')
+    },
+    {
+      path: '/sign-in/token',
+      name: 'sign-in-token',
+      component: () => import('@/pages/sign-in/token.vue')
+    },
+    {
+      path: '/share/:owner/:name',
+      redirect: (to) => getProjectPageRoute(to.params.owner as string, to.params.name as string)
+    },
     {
       path: '/:pathMatch(.*)*',
-      redirect: '/tutorials'
+      component: () => import('@/pages/404/index.vue')
     }
   ]
 })
 
-export default router
\ No newline at end of file
+export default router
diff --git a/ui/prototype/src/styles/app.css b/ui/prototype/src/styles/app.css
index 0d453029c0..caf86bc683 100644
--- a/ui/prototype/src/styles/app.css
+++ b/ui/prototype/src/styles/app.css
@@ -1,62 +1,91 @@
 @import 'tailwindcss/theme.css' layer(theme);
 @import 'tailwindcss/utilities.css' layer(utilities);
 
+@layer components {
+  .link-primary {
+    color: var(--ui-color-primary-main);
+    text-decoration: none;
+    transition: color 0.1s;
+
+    &:hover {
+      color: var(--ui-color-primary-400);
+    }
+
+    &:active {
+      color: var(--ui-color-primary-600);
+    }
+  }
+
+  .link-boring {
+    color: inherit;
+    transition: color 0.1s;
+
+    &:hover {
+      color: var(--ui-color-primary-main);
+    }
+
+    &:active {
+      color: var(--ui-color-primary-600);
+    }
+  }
+}
+
 @layer base {
   :root {
-    --ui-color-turquoise-100: #d2f4f5;
-    --ui-color-turquoise-200: #9ce6ea;
-    --ui-color-turquoise-300: #74dbe1;
-    --ui-color-turquoise-400: #4bcdd6;
+    --ui-color-turquoise-100: #f3fbfc;
+    --ui-color-turquoise-200: #eaf9fa;
+    --ui-color-turquoise-300: #afe7ec;
+    --ui-color-turquoise-400: #3fcdd9;
     --ui-color-turquoise-500: #36c2cf;
-    --ui-color-turquoise-600: #2fa6b1;
+    --ui-color-turquoise-600: #2b9ba5;
     --ui-color-turquoise-700: #20747c;
     --ui-color-turquoise-main: var(--ui-color-turquoise-500);
-    --ui-color-yellow-100: #fff8db;
-    --ui-color-yellow-200: #ffefad;
-    --ui-color-yellow-300: #ffe47a;
-    --ui-color-yellow-400: #ffd84d;
-    --ui-color-yellow-500: #f3c614;
-    --ui-color-yellow-600: #d2a500;
-    --ui-color-yellow-700: #9a7700;
+    --ui-color-yellow-100: #fff8f1;
+    --ui-color-yellow-200: #fff1e2;
+    --ui-color-yellow-300: #ffe2c2;
+    --ui-color-yellow-400: #ffc584;
+    --ui-color-yellow-500: #ff9f33;
+    --ui-color-yellow-600: #ce8029;
+    --ui-color-yellow-700: #9d611f;
     --ui-color-yellow-main: var(--ui-color-yellow-500);
-    --ui-color-purple-100: #f4ecff;
-    --ui-color-purple-200: #e4d1ff;
-    --ui-color-purple-300: #d0b0ff;
-    --ui-color-purple-400: #bb8eff;
-    --ui-color-purple-500: #9b63f6;
-    --ui-color-purple-600: #7f42db;
-    --ui-color-purple-700: #5f2ca8;
+    --ui-color-purple-100: #faf8ff;
+    --ui-color-purple-200: #f6f1ff;
+    --ui-color-purple-300: #e2d4ff;
+    --ui-color-purple-400: #b390ff;
+    --ui-color-purple-500: #a074ff;
+    --ui-color-purple-600: #926ae8;
+    --ui-color-purple-700: #7252b5;
     --ui-color-purple-main: var(--ui-color-purple-500);
-    --ui-color-blue-100: #e8f2ff;
-    --ui-color-blue-200: #cfe4ff;
-    --ui-color-blue-300: #9dc8ff;
-    --ui-color-blue-400: #6aacff;
-    --ui-color-blue-500: #3c8cff;
-    --ui-color-blue-600: #226fe0;
-    --ui-color-blue-700: #1650aa;
+    --ui-color-blue-100: #eff7ff;
+    --ui-color-blue-200: #dfefff;
+    --ui-color-blue-300: #b8e0ff;
+    --ui-color-blue-400: #78c7ff;
+    --ui-color-blue-500: #4cb8ff;
+    --ui-color-blue-600: #0693f1;
+    --ui-color-blue-700: #0076ce;
     --ui-color-blue-main: var(--ui-color-blue-500);
-    --ui-color-red-100: #ffe8e8;
-    --ui-color-red-200: #ffc9c9;
-    --ui-color-red-300: #ffa3a3;
-    --ui-color-red-400: #ff7a7a;
-    --ui-color-red-500: #f25555;
-    --ui-color-red-600: #cc3f3f;
+    --ui-color-red-100: #feefef;
+    --ui-color-red-200: #fdc7c7;
+    --ui-color-red-300: #ff97a0;
+    --ui-color-red-400: #f15d64;
+    --ui-color-red-500: #ef4149;
+    --ui-color-red-600: #bc292e;
     --ui-color-red-main: var(--ui-color-red-500);
-    --ui-color-green-100: #e8fbef;
-    --ui-color-green-200: #c6f2d5;
-    --ui-color-green-300: #95e3b2;
-    --ui-color-green-400: #62d48d;
-    --ui-color-green-500: #33bf68;
-    --ui-color-green-600: #23994f;
+    --ui-color-green-100: #e0f8e3;
+    --ui-color-green-200: #cbf1cd;
+    --ui-color-green-300: #b0ea90;
+    --ui-color-green-400: #90e05a;
+    --ui-color-green-500: #63ce29;
+    --ui-color-green-600: #3ca80c;
     --ui-color-green-main: var(--ui-color-green-500);
     --ui-color-grey-100: #ffffff;
     --ui-color-grey-200: #fbfcfd;
     --ui-color-grey-300: #f6f8fa;
     --ui-color-grey-400: #eaeff3;
-    --ui-color-grey-500: #d0d7de;
-    --ui-color-grey-600: #c0c8d0;
+    --ui-color-grey-500: #d9dfe5;
+    --ui-color-grey-600: #cbd2d8;
     --ui-color-grey-700: #a7b1bb;
-    --ui-color-grey-800: #7f8a96;
+    --ui-color-grey-800: #6e7781;
     --ui-color-grey-900: #57606a;
     --ui-color-grey-1000: #24292f;
     --ui-color-primary-100: var(--ui-color-turquoise-100);
@@ -107,10 +136,10 @@
     --ui-spacing-xl: 16px;
     --ui-font-size-2xs: 10px;
     --ui-font-size-xs: 12px;
-    --ui-font-size-sm: 14px;
-    --ui-font-size-base: 16px;
-    --ui-font-size-lg: 18px;
-    --ui-font-size-xl: 20px;
+    --ui-font-size-sm: 13px;
+    --ui-font-size-base: 14px;
+    --ui-font-size-lg: 15px;
+    --ui-font-size-xl: 16px;
     --ui-font-size-2xl: 20px;
     --ui-font-main:
       Inter,
diff --git a/ui/prototype/src/utils/format.ts b/ui/prototype/src/utils/format.ts
new file mode 100644
index 0000000000..189a4ae329
--- /dev/null
+++ b/ui/prototype/src/utils/format.ts
@@ -0,0 +1,9 @@
+export function humanizeCount(value: number): string {
+  if (value >= 10000) return `${Math.round(value / 1000)}k`
+  if (value >= 1000) return `${(value / 1000).toFixed(1)}k`
+  return String(value)
+}
+
+export function pluralize(value: number, word: string): string {
+  return `${value} ${word}${value === 1 ? '' : 's'}`
+}
diff --git a/ui/skills/prototype-maintenance/SKILL.md b/ui/skills/prototype-maintenance/SKILL.md
deleted file mode 100644
index 03faeed09d..0000000000
--- a/ui/skills/prototype-maintenance/SKILL.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-name: prototype-maintenance
-description: Use when creating, updating, or validating Builder UI prototypes under ui/prototype from Pencil design changes. Applies when the task mentions prototype, ui/prototype, Pencil page changes, syncing a .pen page to a runnable preview, or keeping the prototype aligned with the real Builder frontend.
----
-
-# Prototype Maintenance
-
-Use this skill when maintaining `ui/prototype` for Builder design work.
-
-## Goal
-
-`ui/prototype` is a runnable product prototype, not an isolated static demo. It should reflect the current Pencil design change while staying aligned with the real Builder frontend structure and behavior.
-
-## Required Workflow
-
-1. Start from the real frontend.
-   - Inspect the corresponding implementation in the current Builder frontend before editing prototype code.
-   - Reuse the same page structure, routing model, component boundaries, styling approach, and interaction logic where practical.
-   - Do not invent a standalone demo architecture.
-
-2. Ensure the target prototype surface exists.
-   - If `ui/prototype` does not have the page or UI being changed, initialize it from the current real frontend structure.
-   - If it exists but has drifted from the real frontend organization, align the structure first, then apply the design change.
-
-3. Apply only the current design change.
-   - Sync the latest relevant Pencil page change into `ui/prototype`.
-   - If only `tutorial.pen` changed, only override the tutorials surface.
-   - Other pages, routes, and features must continue to use or mirror the original real frontend behavior and remain accessible.
-
-4. Keep edits scoped.
-   - Write prototype-related changes only under `ui/` unless the user explicitly authorizes a broader scope.
-   - Do not modify `spx-gui/` or other non-`ui/` directories by default.
-
-5. Make the preview runnable.
-   - `ui/prototype` must be able to start a frontend preview environment from inside that directory.
-   - The preview should behave like Builder's existing frontend preview environment, with only the intended prototype surface changed.
-
-## Validation
-
-Before claiming completion, run the relevant prototype checks.
-
-At minimum, verify:
-
-- The preview environment starts.
-- The changed page is accessible.
-- Important unchanged pages still load.
-- Navigation, search, course-card navigation, project pages, and other key flows still work when relevant.
-- The changed page visually matches the latest Pencil design.
-
-If preview behavior is broken, debug it before finishing. The target state is: real Builder frontend preview behavior plus local prototype overrides for the changed design surface.
-
-## Output Expectations
-
-When reporting the result, include:
-
-- Which Pencil page or design surface was synced.
-- Which real frontend files or structures were used as reference.
-- Which `ui/` files changed.
-- Which validation steps were run, and any remaining gaps.