@bleedingdev/modern-js-main-doc 3.8.3-ultramodern.1 → 3.8.3-ultramodern.2

package/docs/en/community/showcase.mdx

@@ -1,14 +1,13 @@
 ---
 sidebar_position: 0
+title: Ecosystem
 ---
 
-# Showcase
+# Ecosystem
 
-Welcome to the Modern.js showcase page! Here, we present a collection of websites that have been built using Modern.js.
+UltraModern.js builds on a focused ecosystem of frameworks and tools. These projects provide the Effect, TanStack Router, build, documentation, and Module Federation foundations used by the fork.
 
-If you have built a website using Modern.js, we would love for you to share it with the community. Simply reply to the GitHub discussion thread with a link to your website. We will collect content on a regular basis and display it on the current page.
-
-## The Cases
+## Projects
 
 import { ShowcaseList } from '@site/src/components/ShowcaseList';
 

package/docs/en/components/init-app.mdx

@@ -3,26 +3,27 @@ workspaces. It does not require global installation and can be run on-demand
 using `pnpm dlx`.
 
 The supported pnpm command is the scoped package specifier:
-`pnpm dlx @bleedingdev/modern-js-create <target>`. Do not shorten it to
-`pnpm dlx modern-js-create`; there is no unscoped package by that name.
+`pnpm dlx @bleedingdev/modern-js-ultramodern-create <target>`. Do not shorten it
+to `pnpm dlx modern-js-ultramodern-create`; there is no unscoped package by
+that name.
 
 You can initialize the empty directory you are already in:
 
 ```bash
 mkdir myapp && cd myapp
-pnpm dlx @bleedingdev/modern-js-create .
+pnpm dlx @bleedingdev/modern-js-ultramodern-create .
 ```
 
 You can also create a project directly in a new directory:
 
 ```bash
-pnpm dlx @bleedingdev/modern-js-create my-super-app
+pnpm dlx @bleedingdev/modern-js-ultramodern-create my-super-app
 ```
 
 To initialize with workspace protocol dependencies (for local monorepo testing of unreleased Modern.js packages):
 
 ```bash
-pnpm dlx @bleedingdev/modern-js-create my-super-app --workspace
+pnpm dlx @bleedingdev/modern-js-ultramodern-create my-super-app --workspace
 ```
 
 The BleedingDev create package will directly create the application without providing an interactive Q & A interface:
@@ -73,13 +74,13 @@ The default workspace starts shell-only and installs the published BleedingDev
 package aliases:
 
 ```bash
-pnpm dlx @bleedingdev/modern-js-create my-super-app
+pnpm dlx @bleedingdev/modern-js-ultramodern-create my-super-app
 ```
 
 From a generated SuperApp workspace, add a business MicroVertical in place:
 
 ```bash
-pnpm dlx @bleedingdev/modern-js-create transportation --vertical
+pnpm dlx @bleedingdev/modern-js-ultramodern-create transportation --vertical
 ```
 
 The `--vertical` command mutates the current workspace: it adds the vertical

package/docs/en/components/init-rspack-app.mdx

@@ -1,5 +1,3 @@
 ```bash
-$ pnpm dlx @bleedingdev/modern-js-create myapp
-? Please select the programming language: TS
-? Please select the package manager: pnpm
+$ pnpm dlx @bleedingdev/modern-js-ultramodern-create myapp
 ```

package/docs/en/guides/advanced-features/bff/frameworks.mdx

@@ -122,7 +122,7 @@ const response = await api.client.hello.ping({});
 
 The `api.client.*` surface is materialized by the BFF loader for `@api/index` imports. Do not import `api/index` directly and expect `client` to run in server code, scripts, or tests; direct entry imports expose the server runtime definition, and `client` is only a typed placeholder there.
 
-For UltraModern, Effect `HttpApi` plus Effect BFF is the single blessed authored HTTP path. Use `HttpApi` endpoints with `query`, `params`, `payload`, `success`, and declared errors such as `HttpApiSchema.status(...)`; implement them with `HttpApiBuilder.group(...).handle(...)` and `HttpApiBuilder.layer(...).pipe(Layer.provide(...))`, then default-export the entry as `defineEffectBff({ api, layer })`. See `packages/cli/plugin-bff/tests/effect-httpapi-schema-validation.test.ts` for the real shapes.
+For UltraModern, Effect `HttpApi` plus Effect BFF is the single blessed authored HTTP path. Use `HttpApi` endpoints with `query`, `params`, `payload`, `success`, and declared errors such as `HttpApiSchema.status(...)`; implement them with `HttpApiBuilder.group(...).handle(...)` and `HttpApiBuilder.layer(...).pipe(Layer.provide(...))`, then default-export the entry as `defineEffectBff({ api, layer })`. See `packages/server/bff-effect/tests/effect-edge-runtime.test.ts` for the live runtime shape.
 
 Hono and `api/lambda/**` are internal compatibility only and feature-frozen.
 

package/docs/en/guides/basic-features/deploy.mdx

@@ -267,11 +267,11 @@ First, you need to configure the **Root Directory** as `packages/app` on the Ver
 
 <img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-root-directory.png" />
 
-Specify Node.js runtime as `20.x`:
+Specify Node.js runtime as `26.7.0` or newer:
 
 ```json title="package.json"
 "engines": {
-  "node": "20.x"
+  "node": ">=26.7.0"
 }
 ```
 

package/docs/en/guides/get-started/quick-start.mdx

@@ -27,7 +27,7 @@ import DebugApp from '@site-docs-en/components/debug-app';
 
 ## Configuration
 
-In an UltraModern.js project created using `@bleedingdev/modern-js-create`, a `modern.config.ts` file is generated by default.
+In an UltraModern.js project created using `@bleedingdev/modern-js-ultramodern-create`, a `modern.config.ts` file is generated by default.
 
 You can modify the configuration through this file to override the default behavior of Modern.js. For example, to enable SSR, add the following configuration:
 

package/docs/en/guides/get-started/tech-stack.mdx

@@ -24,7 +24,7 @@ Modern.js provides two first-party routing frameworks:
 When creating an UltraModern project, TanStack Router is included by default:
 
 ```bash
-pnpm dlx @bleedingdev/modern-js-create myapp
+pnpm dlx @bleedingdev/modern-js-ultramodern-create myapp
 ```
 
 Modern.js supports conventional routing, self-controlled routing, or other routing schemes. Please refer to ["Routing"](/guides/basic-features/routes/routes) to make your choice.

package/docs/en/guides/get-started/ultramodern.mdx

@@ -69,9 +69,9 @@ For an older generated workspace, migrate by treating the published cohort as
 the source of truth:
 
 ```bash
-pnpm dlx @bleedingdev/modern-js-create@latest --help
-pnpm dlx @bleedingdev/modern-js-create@latest catalog --vertical --dry-run
-pnpm dlx @bleedingdev/modern-js-create@latest catalog --vertical
+pnpm dlx @bleedingdev/modern-js-ultramodern-create@latest --help
+pnpm dlx @bleedingdev/modern-js-ultramodern-create@latest catalog --vertical --dry-run
+pnpm dlx @bleedingdev/modern-js-ultramodern-create@latest catalog --vertical
 mise install
 mise exec -- pnpm install
 mise exec -- pnpm check
@@ -91,8 +91,8 @@ package cohort together. Resolve the current cohort version first, then run
 the matching migration:
 
 ```bash
-COHORT="$(npm view @bleedingdev/modern-js-create version)"
-pnpm dlx "@bleedingdev/modern-js-create@$COHORT" ultramodern \
+COHORT="$(npm view @bleedingdev/modern-js-ultramodern-create version)"
+pnpm dlx "@bleedingdev/modern-js-ultramodern-create@$COHORT" ultramodern \
   migrate-strict-effect --version "$COHORT"
 pnpm install
 pnpm check
@@ -130,8 +130,8 @@ Before hand-editing package aliases or generated metadata, run the framework
 migration command from the target workspace:
 
 ```bash
-COHORT="$(npm view @bleedingdev/modern-js-create version)"
-pnpm dlx "@bleedingdev/modern-js-create@$COHORT" ultramodern \
+COHORT="$(npm view @bleedingdev/modern-js-ultramodern-create version)"
+pnpm dlx "@bleedingdev/modern-js-ultramodern-create@$COHORT" ultramodern \
   migrate-strict-effect --version "$COHORT"
 pnpm api:check
 pnpm contract:check
@@ -354,7 +354,7 @@ BFF, Module Federation topology, generated quality gates, and Cloudflare deploy
 basics:
 
 ```bash
-pnpm dlx @bleedingdev/modern-js-create myapp
+pnpm dlx @bleedingdev/modern-js-ultramodern-create myapp
 cd myapp
 mise install
 mise exec -- pnpm install
@@ -366,10 +366,10 @@ generate a demo domain by default. Add real business MicroVerticals when they
 become real ownership boundaries:
 
 ```bash
-pnpm dlx @bleedingdev/modern-js-create transportation --vertical
-pnpm dlx @bleedingdev/modern-js-create food-delivery --vertical
-pnpm dlx @bleedingdev/modern-js-create payments --vertical
-pnpm dlx @bleedingdev/modern-js-create maps --vertical
+pnpm dlx @bleedingdev/modern-js-ultramodern-create transportation --vertical
+pnpm dlx @bleedingdev/modern-js-ultramodern-create food-delivery --vertical
+pnpm dlx @bleedingdev/modern-js-ultramodern-create payments --vertical
+pnpm dlx @bleedingdev/modern-js-ultramodern-create maps --vertical
 mise exec -- pnpm check
 ```
 
@@ -385,10 +385,10 @@ Automation can use explicit MicroVertical syntax instead of relying on the
 positional form:
 
 ```bash
-pnpm dlx @bleedingdev/modern-js-create --vertical=transportation
-pnpm dlx @bleedingdev/modern-js-create --vertical-name transportation
-pnpm dlx @bleedingdev/modern-js-create transportation --vertical --dry-run
-pnpm dlx @bleedingdev/modern-js-create transportation --vertical \
+pnpm dlx @bleedingdev/modern-js-ultramodern-create --vertical=transportation
+pnpm dlx @bleedingdev/modern-js-ultramodern-create --vertical-name transportation
+pnpm dlx @bleedingdev/modern-js-ultramodern-create transportation --vertical --dry-run
+pnpm dlx @bleedingdev/modern-js-ultramodern-create transportation --vertical \
   --codesmith-overlay ./generators/vertical-overlay
 ```
 
@@ -407,7 +407,7 @@ import {
   addUltramodernVertical,
   generateUltramodernWorkspace,
   planUltramodernVertical,
-} from '@modern-js/create/ultramodern-workspace';
+} from '@modern-js/ultramodern-create/ultramodern-workspace';
 
 const workspace = generateUltramodernWorkspace({
   targetDir: '/tmp/my-workspace',
@@ -439,7 +439,7 @@ returns the same shape plus `dryRun`, `selectedPort`, `moduleFederationRemote`,
 CodeSmith consumers can use the adapter subpath:
 
 ```ts
-import ultramodernCodeSmith from '@modern-js/create/ultramodern-workspace/codesmith';
+import ultramodernCodeSmith from '@modern-js/ultramodern-create/ultramodern-workspace/codesmith';
 
 await ultramodernCodeSmith({
   config: {

package/docs/en/guides/troubleshooting/cli.mdx

@@ -35,5 +35,5 @@ pnpm run command --options
 ```
 
 :::tip
-Modern.js requires Node.js >= 20.19.5, and pnpm v6 does not support Node.js 20, so please use pnpm v7 or higher.
+UltraModern.js requires Node.js >= 26.7.0 and pnpm >= 11. Use the repository's pinned mise toolchain so the CLI and native TypeScript runtime stay aligned.
 :::

package/docs/en/tutorials/examples/csr-auth.mdx

@@ -4,7 +4,7 @@ title: Route Authorization
 
 # Route Authorization
 
-Modern.js defaults to the convention-based routing based on React Router. For more details, please refer to [Routing](/guides/basic-features/routes/routes#routing).
+UltraModern.js uses convention-based routing backed by TanStack Router. For more details, please refer to [Routing](/guides/basic-features/routes/routes#routing).
 
 In a web application, if there are multiple routes, we may need to authorize access to some of them before accessing them. For example, in the following scenario:
 
@@ -12,6 +12,7 @@ In a web application, if there are multiple routes, we may need to authorize acc
 - Access to the `/protected` route requires authorization. If there is no authorization, it will automatically redirect to the `/login` route. After successful login, it returns to `/protected`.
 
 import Sandpack from '@site/src/components/Sandpack';
+import { ultramodernSandpackFiles } from '@modern-js/ultramodern-sandpack-profile';
 import srcRoutesPageText from '../../../../src/sandbox/csr-auth/src/routes/page-tsx.txt';
 import srcRoutesLayoutText from '../../../../src/sandbox/csr-auth/src/routes/layout-tsx.txt';
 import srcRoutesAuthText from '../../../../src/sandbox/csr-auth/src/routes/Auth-tsx.txt';
@@ -20,6 +21,7 @@ import srcRoutesProtectedPageText from '../../../../src/sandbox/csr-auth/src/rou
 import srcRoutesLoginPageText from '../../../../src/sandbox/csr-auth/src/routes/login/page-tsx.txt';
 
 <Sandpack template="web-app" files={{
+  ...ultramodernSandpackFiles,
   '/src/routes/page.tsx': srcRoutesPageText,
   '/src/routes/layout.tsx': srcRoutesLayoutText,
   '/src/routes/Auth.tsx': srcRoutesAuthText,

package/docs/zh/community/showcase.mdx

@@ -1,14 +1,13 @@
 ---
 sidebar_position: 0
+title: 生态系统
 ---
 
-# 案例展示
+# 生态系统
 
-欢迎来到 Modern.js 的案例展示页面！在这里，我们展示了一些基于 Modern.js 所实现的网站。
+UltraModern.js 建立在一组聚焦的框架与工具之上。这些项目提供了本 fork 使用的 Effect、TanStack Router、构建、文档与 Module Federation 基础能力。
 
-如果你使用 Modern.js 构建了一个网站，欢迎你与社区分享它。只需回复 [GitHub 讨论贴](https://github.com/web-infra-dev/modern.js/discussions/3554) 并附上你网站的链接即可。我们会定期收集内容，并将它们展示在当前页面。
-
-## 案例
+## 项目
 
 import { ShowcaseList } from '@site/src/components/ShowcaseList';
 

package/docs/zh/components/init-app.mdx

@@ -1,26 +1,26 @@
 UltraModern.js 提供 BleedingDev create 包来创建 SuperApp workspace，不需要全局安装，直接使用 `pnpm dlx` 按需运行即可。
 
 pnpm 支持的命令契约是 scoped package specifier：
-`pnpm dlx @bleedingdev/modern-js-create <target>`。不要简写成
-`pnpm dlx modern-js-create`；npm 上没有这个未加 scope 的包。
+`pnpm dlx @bleedingdev/modern-js-ultramodern-create <target>`。不要简写成
+`pnpm dlx modern-js-ultramodern-create`；npm 上没有这个未加 scope 的包。
 
 你可以在当前已有的空目录中初始化项目：
 
 ```bash
 mkdir myapp && cd myapp
-pnpm dlx @bleedingdev/modern-js-create .
+pnpm dlx @bleedingdev/modern-js-ultramodern-create .
 ```
 
 也可以直接用新目录创建项目：
 
 ```bash
-pnpm dlx @bleedingdev/modern-js-create myapp
+pnpm dlx @bleedingdev/modern-js-ultramodern-create myapp
 ```
 
 使用 workspace 协议依赖初始化（用于在本地 monorepo 中联调未发布的 Modern.js 包）：
 
 ```bash
-pnpm dlx @bleedingdev/modern-js-create myapp --workspace
+pnpm dlx @bleedingdev/modern-js-ultramodern-create myapp --workspace
 ```
 
 BleedingDev create 包会直接创建应用，不再提供问答界面：
@@ -70,14 +70,14 @@ BleedingDev create 包会直接创建应用，不再提供问答界面：
 默认 workspace 从 shell 起步，并安装已发布的 BleedingDev 包别名：
 
 ```bash
-pnpm dlx @bleedingdev/modern-js-create my-super-app
+pnpm dlx @bleedingdev/modern-js-ultramodern-create my-super-app
 ```
 
 在已生成的 SuperApp workspace 根目录中，可以就地添加业务
 MicroVertical：
 
 ```bash
-pnpm dlx @bleedingdev/modern-js-create transportation --vertical
+pnpm dlx @bleedingdev/modern-js-ultramodern-create transportation --vertical
 ```
 
 `--vertical` 会修改当前 workspace：新增 vertical 包，并写入 topology、

package/docs/zh/components/init-rspack-app.mdx

@@ -1,5 +1,3 @@
 ```bash
-$ pnpm dlx @bleedingdev/modern-js-create myapp
-? 请选择开发语言：TS
-? 请选择包管理工具：pnpm
+$ pnpm dlx @bleedingdev/modern-js-ultramodern-create myapp
 ```

package/docs/zh/guides/basic-features/deploy.mdx

@@ -258,11 +258,11 @@ Vercel 是一个面向现代 Web 应用的部署平台，它提供了丰富的
 
 <img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-root-directory.png" />
 
-将 Node.js 运行时设置为 `20.x`：
+将 Node.js 运行时设置为 `26.7.0` 或更高版本：
 
 ```json title="package.json"
 "engines": {
-  "node": "20.x"
+  "node": ">=26.7.0"
 },
 ```
 

package/docs/zh/guides/get-started/quick-start.mdx

@@ -25,7 +25,7 @@ import DebugApp from '@site-docs/components/debug-app';
 
 ## 使用配置
 
-通过 `@bleedingdev/modern-js-create` 创建的 UltraModern.js 项目中，会默认生成 `modern.config.ts` 文件。
+通过 `@bleedingdev/modern-js-ultramodern-create` 创建的 UltraModern.js 项目中，会默认生成 `modern.config.ts` 文件。
 
 你可以通过该配置文件修改配置，覆盖 Modern.js 的默认行为。例如添加如下配置，开启 SSR：
 

package/docs/zh/guides/get-started/tech-stack.mdx

@@ -24,7 +24,7 @@ Modern.js 提供两套一方路由方案：
 创建 UltraModern 项目时，默认会包含 TanStack Router：
 
 ```bash
-pnpm dlx @bleedingdev/modern-js-create myapp
+pnpm dlx @bleedingdev/modern-js-ultramodern-create myapp
 ```
 
 Modern.js 支持约定式路由、自控式路由或其他路由方案，请参考 [页面入口](/guides/concept/entries) 进行选择。

package/docs/zh/guides/get-started/ultramodern.mdx

@@ -62,9 +62,9 @@ UltraModern.js 的增强能力是新 SuperApp 的默认产品面。框架方向
 旧版生成 workspace 迁移时，以已发布的包 cohort 作为事实来源：
 
 ```bash
-pnpm dlx @bleedingdev/modern-js-create@latest --help
-pnpm dlx @bleedingdev/modern-js-create@latest catalog --vertical --dry-run
-pnpm dlx @bleedingdev/modern-js-create@latest catalog --vertical
+pnpm dlx @bleedingdev/modern-js-ultramodern-create@latest --help
+pnpm dlx @bleedingdev/modern-js-ultramodern-create@latest catalog --vertical --dry-run
+pnpm dlx @bleedingdev/modern-js-ultramodern-create@latest catalog --vertical
 mise install
 mise exec -- pnpm install
 mise exec -- pnpm check
@@ -81,8 +81,8 @@ server runtime 中。请求 `/` 时，框架会按语言协商在服务端返回
 先解析当前 cohort 版本，再运行同版本迁移命令：
 
 ```bash
-COHORT="$(npm view @bleedingdev/modern-js-create version)"
-pnpm dlx "@bleedingdev/modern-js-create@$COHORT" ultramodern \
+COHORT="$(npm view @bleedingdev/modern-js-ultramodern-create version)"
+pnpm dlx "@bleedingdev/modern-js-ultramodern-create@$COHORT" ultramodern \
   migrate-strict-effect --version "$COHORT"
 pnpm install
 pnpm check
@@ -114,8 +114,8 @@ postprocess、生成产物编辑或本地 redirect shim 来修复旧版本的 ro
 手写 package alias 或生成 metadata 之前，先在目标 workspace 运行框架迁移命令：
 
 ```bash
-COHORT="$(npm view @bleedingdev/modern-js-create version)"
-pnpm dlx "@bleedingdev/modern-js-create@$COHORT" ultramodern \
+COHORT="$(npm view @bleedingdev/modern-js-ultramodern-create version)"
+pnpm dlx "@bleedingdev/modern-js-ultramodern-create@$COHORT" ultramodern \
   migrate-strict-effect --version "$COHORT"
 pnpm api:check
 pnpm contract:check
@@ -310,7 +310,7 @@ SSR、TanStack Router、Tailwind CSS v4、i18n、Effect HttpApi BFF、Module Fed
 topology、生成质量 gate，以及 Cloudflare 部署基础：
 
 ```bash
-pnpm dlx @bleedingdev/modern-js-create myapp
+pnpm dlx @bleedingdev/modern-js-ultramodern-create myapp
 cd myapp
 mise install
 mise exec -- pnpm install
@@ -321,10 +321,10 @@ workspace 从 shell 和平台契约起步，不强制生成演示业务域。真
 再添加对应 MicroVertical：
 
 ```bash
-pnpm dlx @bleedingdev/modern-js-create transportation --vertical
-pnpm dlx @bleedingdev/modern-js-create food-delivery --vertical
-pnpm dlx @bleedingdev/modern-js-create payments --vertical
-pnpm dlx @bleedingdev/modern-js-create maps --vertical
+pnpm dlx @bleedingdev/modern-js-ultramodern-create transportation --vertical
+pnpm dlx @bleedingdev/modern-js-ultramodern-create food-delivery --vertical
+pnpm dlx @bleedingdev/modern-js-ultramodern-create payments --vertical
+pnpm dlx @bleedingdev/modern-js-ultramodern-create maps --vertical
 mise exec -- pnpm check
 ```
 
@@ -337,10 +337,10 @@ ownership 记录、shell Module Federation、开发 overlays、包依赖、生
 自动化脚本可以使用显式 MicroVertical 语法，不必依赖位置参数：
 
 ```bash
-pnpm dlx @bleedingdev/modern-js-create --vertical=transportation
-pnpm dlx @bleedingdev/modern-js-create --vertical-name transportation
-pnpm dlx @bleedingdev/modern-js-create transportation --vertical --dry-run
-pnpm dlx @bleedingdev/modern-js-create transportation --vertical \
+pnpm dlx @bleedingdev/modern-js-ultramodern-create --vertical=transportation
+pnpm dlx @bleedingdev/modern-js-ultramodern-create --vertical-name transportation
+pnpm dlx @bleedingdev/modern-js-ultramodern-create transportation --vertical --dry-run
+pnpm dlx @bleedingdev/modern-js-ultramodern-create transportation --vertical \
   --codesmith-overlay ./generators/vertical-overlay
 ```
 
@@ -358,7 +358,7 @@ import {
   addUltramodernVertical,
   generateUltramodernWorkspace,
   planUltramodernVertical,
-} from '@modern-js/create/ultramodern-workspace';
+} from '@modern-js/ultramodern-create/ultramodern-workspace';
 
 const workspace = generateUltramodernWorkspace({
   targetDir: '/tmp/my-workspace',
@@ -389,7 +389,7 @@ MicroVertical dry-run 返回相同结构，并额外包含 `dryRun`、`selectedP
 CodeSmith 消费方可以使用 adapter subpath：
 
 ```ts
-import ultramodernCodeSmith from '@modern-js/create/ultramodern-workspace/codesmith';
+import ultramodernCodeSmith from '@modern-js/ultramodern-create/ultramodern-workspace/codesmith';
 
 await ultramodernCodeSmith({
   config: {

package/docs/zh/guides/troubleshooting/cli.mdx

@@ -35,5 +35,5 @@ pnpm run command --options
 ```
 
 :::tip
-Modern.js 要求 Node.js >= 20.19.5，而 pnpm v6 不支持 Node.js 20，因此请使用 pnpm v7 或更高版本。
+UltraModern.js 要求 Node.js >= 26.7.0 和 pnpm >= 11。请使用仓库锁定的 mise 工具链，以保持 CLI 与 Node.js 原生 TypeScript 运行时一致。
 :::

package/docs/zh/tutorials/examples/csr-auth.mdx

@@ -4,7 +4,7 @@ title: 路由鉴权
 
 # 路由鉴权
 
-Modern.js 默认提供的路由方式是基于 React Router 的约定式路由，具体可查看[路由方案](/guides/basic-features/routes/routes#路由方案)。
+UltraModern.js 默认使用基于 TanStack Router 的约定式路由，具体可查看[路由方案](/guides/basic-features/routes/routes#路由方案)。
 
 在一个 Web 应用中如果存在多个路由，我们可能需要对部分路由进行鉴权后才能访问。例如下面这个案例：
 
@@ -12,6 +12,7 @@ Modern.js 默认提供的路由方式是基于 React Router 的约定式路由
 - 访问 `/protected` 路由，需要鉴权，如果无，自动跳转到 `/login` 路由，登录成功后返回 `/protected`。
 
 import Sandpack from '@site/src/components/Sandpack';
+import { ultramodernSandpackFiles } from '@modern-js/ultramodern-sandpack-profile';
 import srcRoutesPageText from '../../../../src/sandbox/csr-auth/src/routes/page-tsx.txt';
 import srcRoutesLayoutText from '../../../../src/sandbox/csr-auth/src/routes/layout-tsx.txt';
 import srcRoutesAuthText from '../../../../src/sandbox/csr-auth/src/routes/Auth-tsx.txt';
@@ -20,6 +21,7 @@ import srcRoutesProtectedPageText from '../../../../src/sandbox/csr-auth/src/rou
 import srcRoutesLoginPageText from '../../../../src/sandbox/csr-auth/src/routes/login/page-tsx.txt';
 
 <Sandpack template="web-app" files={{
+  ...ultramodernSandpackFiles,
   '/src/routes/page.tsx': srcRoutesPageText,
   '/src/routes/layout.tsx': srcRoutesLayoutText,
   '/src/routes/Auth.tsx': srcRoutesAuthText,

package/package.json

@@ -19,12 +19,13 @@
     "modern.js",
     "ultramodern.js"
   ],
-  "version": "3.8.3-ultramodern.1",
+  "version": "3.8.3-ultramodern.2",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "npm:@bleedingdev/modern-js-sandpack-react@3.8.3-ultramodern.1",
+    "@modern-js/sandpack-react": "npm:@bleedingdev/modern-js-sandpack-react@3.8.3-ultramodern.2",
+    "@modern-js/ultramodern-sandpack-profile": "npm:@bleedingdev/modern-js-ultramodern-sandpack-profile@3.8.3-ultramodern.2",
     "mermaid": "^11.16.0"
   },
   "devDependencies": {

package/rspress.config.ts

@@ -1,44 +1,26 @@
 import { pluginSass } from '@rsbuild/plugin-sass';
-import { defineConfig } from '@rspress/core';
 import { transformerNotationHighlight } from '@shikijs/transformers';
 import path from 'path';
 import { pluginOpenGraph } from 'rsbuild-plugin-open-graph';
+import { defineUltraModernConfig as defineConfig } from './ultramodern-preset/src/index.ts';
 
 const docPath = path.join(__dirname, 'docs');
-const staticPath = path.join(__dirname, 'static');
-const siteTitle = 'UltraModern.js 3.0';
+const siteTitle = 'Modern.js';
 const siteDescription =
-  'UltraModern.js 3.0 is a SuperApp framework forked from Modern.js for Effect, TanStack Router, SSR, BFF, and independently deployable Micro Verticals.';
+  'The Modern.js framework is a progressive web framework based on React. At ByteDance, we use Modern.js to build upper-level frameworks that have supported the development of thousands of web applications.';
 const socialDescription =
-  'A SuperApp framework for Effect, TanStack Router, SSR, BFF, and Micro Verticals.';
-
-function normalizeBase(base = '/') {
-  const trimmed = base.trim();
-  const withLeadingSlash = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
-  return withLeadingSlash.endsWith('/')
-    ? withLeadingSlash
-    : `${withLeadingSlash}/`;
-}
-
-// Set by CI for GitHub Pages project sites. Defaults to root for local dev/custom domains.
-const docsBase = normalizeBase(process.env.DOCS_BASE);
-const docsOrigin = (
-  process.env.DOCS_ORIGIN || 'https://bleedingdev.github.io'
-).replace(/\/+$/, '');
-const siteUrl = new URL(docsBase, `${docsOrigin}/`).toString();
-const socialImage = new URL('img/social-card.svg', siteUrl).toString();
-const faviconUrl = new URL('img/favicon.ico', siteUrl).toString();
-const docsAsset = (assetPath: string) =>
-  `${docsBase}${assetPath.replace(/^\//, '')}`;
+  'A Progressive React Framework for modern web development.';
+const socialImage =
+  'https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/banner.jpeg';
 
 export default defineConfig({
   root: docPath,
   llms: true,
   title: siteTitle,
   description: siteDescription,
-  base: docsBase,
-  logo: docsAsset('/img/logo.svg'),
-  icon: faviconUrl,
+  base: '/',
+  logo: 'https://lf-cdn-tos.bytescm.com/obj/static/webinfra/modern-js-website/assets/images/images/modernjs-logo.svg',
+  icon: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico',
   lang: 'en',
   themeDir: path.join(__dirname, 'src'),
   markdown: {
@@ -50,40 +32,24 @@ export default defineConfig({
   search: {
     codeBlocks: true,
   },
-  // head: [
-  //   () => {
-  //     return [
-  //       `<meta property="og:image" content="${socialImage}">`,
-  //       `<meta property="og:description" content="${socialDescription}">`,
-  //       `<meta property="og:image:alt" content="${siteTitle}">`,
-  //       `<meta name="twitter:card" content="summary_large_image">`,
-  //       `<meta name="twitter:title" content="${siteTitle}">`,
-  //       `<meta name="twitter:description" content="${socialDescription}">`,
-  //       `<meta name="twitter:image" content="${socialImage}">`,
-  //       `<meta name="twitter:image:alt" content="${siteTitle}">`,
-  //     ].join('');
-  //   },
-  // ],
   themeConfig: {
     locales: [
       {
         lang: 'zh',
         title: siteTitle,
         description: socialDescription,
-        // nav: getNavbar('zh'),
         label: '简体中文',
       },
       {
         lang: 'en',
         title: siteTitle,
         description: socialDescription,
-        // nav: getNavbar('en'),
         label: 'English',
       },
     ],
     editLink: {
       docRepoBaseUrl:
-        'https://github.com/BleedingDev/ultramodern.js/tree/main-ultramodern/packages/document/docs',
+        'https://github.com/web-infra-dev/modern.js/tree/main/packages/document/docs',
       text: 'Edit this page on GitHub',
     },
     socialLinks: [
@@ -95,7 +61,7 @@ export default defineConfig({
       {
         icon: 'github',
         mode: 'link',
-        content: 'https://github.com/BleedingDev/ultramodern.js',
+        content: 'https://github.com/web-infra-dev/modern.js',
       },
     ],
   },
@@ -105,7 +71,8 @@ export default defineConfig({
   },
   replaceRules: [
     {
-      // Preserve the upstream replacement contract for inherited docs.
+      // The major version is different inside the ByteDance,
+      // so we use a flag to define it.
       search: /MAJOR_VERSION/g,
       replace: '2',
     },
@@ -128,11 +95,6 @@ export default defineConfig({
     output: {
       dataUriLimit: 0,
     },
-    server: {
-      publicDir: {
-        name: staticPath,
-      },
-    },
     dev: {
       lazyCompilation: process.env.LAZY !== 'false',
     },
@@ -147,15 +109,15 @@ export default defineConfig({
       pluginSass(),
       pluginOpenGraph({
         // Note, title is page-specific
-        title: 'UltraModern.js 3.0 Home Page',
+        title: 'Modern.js Home Page',
         // While site name is site wide
         siteName: siteTitle,
         type: 'website',
-        url: siteUrl,
+        url: 'https://modernjs.dev/',
         image: socialImage,
         description: socialDescription,
         twitter: {
-          site: '@BleedingDev',
+          site: '@_Modern_JS',
           card: 'summary_large_image',
         },
       }),

package/src/sandbox/csr-auth/src/routes/Auth-tsx.txt

@@ -1,4 +1,8 @@
-import { Navigate, useLocation, useNavigate } from '@modern-js/runtime/router';
+import {
+  Navigate,
+  useLocation,
+  useNavigate,
+} from '@modern-js/plugin-tanstack/runtime';
 import React from 'react';
 import { fakeAuthProvider } from './fakeAuth';
 
@@ -49,7 +53,7 @@ export function AuthStatus() {
       <button
         type="button"
         onClick={() => {
-          auth.signout(() => navigate('/'));
+          auth.signout(() => void navigate({ to: '/' }));
         }}
       >
         Sign out
@@ -67,7 +71,13 @@ export function RequireAuth({ children }: { children: JSX.Element }) {
     // trying to go to when they were redirected. This allows us to send them
     // along to that page after they login, which is a nicer user experience
     // than dropping them off on the home page.
-    return <Navigate to="/login" state={{ from: location }} replace />;
+    return (
+      <Navigate
+        replace
+        search={{ redirect: location.pathname }}
+        to="/login"
+      />
+    );
   }
 
   return children;

package/src/sandbox/csr-auth/src/routes/layout-tsx.txt

@@ -1,4 +1,4 @@
-import { Link, Outlet } from '@modern-js/runtime/router';
+import { Link, Outlet } from '@modern-js/plugin-tanstack/runtime';
 import { AuthProvider, AuthStatus } from './Auth';
 
 export default function Layout() {
@@ -8,10 +8,10 @@ export default function Layout() {
 
       <ul>
         <li>
-          <Link to="/">Public Page</Link>
+          <Link prefetch="render" to="/">Public Page</Link>
         </li>
         <li>
-          <Link to="/protected">Protected Page</Link>
+          <Link prefetch="render" to="/protected">Protected Page</Link>
         </li>
       </ul>
 

package/src/sandbox/csr-auth/src/routes/login/page-tsx.txt

@@ -1,4 +1,7 @@
-import { useLocation, useNavigate } from '@modern-js/runtime/router';
+import {
+  useLocation,
+  useNavigate,
+} from '@modern-js/plugin-tanstack/runtime';
 import { useAuth } from '../Auth';
 
 export default function Login() {
@@ -6,7 +9,8 @@ export default function Login() {
   const location = useLocation();
   const auth = useAuth();
 
-  const from = location.state?.from?.pathname || '/';
+  const from =
+    new URLSearchParams(location.searchStr).get('redirect') || '/';
 
   function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
@@ -21,7 +25,7 @@ export default function Login() {
       // when they get to the protected page and click the back button, they
       // won't end up back on the login page, which is also really nice for the
       // user experience.
-      navigate(from, { replace: true });
+      void navigate({ replace: true, to: from });
     });
   }
 

package/ultramodern-preset/assets/img/ultramodern-logo-dark.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="220" height="48" viewBox="0 0 220 48" role="img" aria-labelledby="title">
+  <title id="title">UltraModern.js</title>
+  <rect width="48" height="48" rx="12" fill="#020617"/>
+  <path fill="#14b8a6" d="M13 13h7v13c0 5 2.6 8 7 8s7-3 7-8V13h7v13c0 8.8-5.6 14-14 14s-14-5.2-14-14V13z"/>
+  <path fill="#38bdf8" d="M31 13h8v27h-8V13z"/>
+  <text x="60" y="31" fill="#f8fafc" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif" font-size="23" font-weight="700">UltraModern.js</text>
+</svg>

package/ultramodern-preset/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@modern-js/ultramodern-docs-preset",
+  "version": "3.8.3",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "test": "node --test tests/*.test.ts"
+  },
+  "engines": {
+    "node": ">=26.7.0"
+  },
+  "dependencies": {
+    "rsbuild-plugin-open-graph": "1.1.3"
+  },
+  "devDependencies": {
+    "@rspress/core": "2.0.17",
+    "@types/node": "^26.2.0"
+  }
+}

package/ultramodern-preset/src/index.ts

@@ -0,0 +1,127 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig, type UserConfig } from '@rspress/core';
+import { pluginOpenGraph } from 'rsbuild-plugin-open-graph';
+
+const siteTitle = 'UltraModern.js 3.0';
+const siteDescription =
+  'UltraModern.js 3.0 is a SuperApp framework forked from Modern.js for Effect, TanStack Router, SSR, BFF, and independently deployable Micro Verticals.';
+const socialDescription =
+  'A SuperApp framework for Effect, TanStack Router, SSR, BFF, and Micro Verticals.';
+const defaultOrigin = 'https://bleedingdev.github.io';
+const githubUrl = 'https://github.com/BleedingDev/ultramodern.js';
+
+export const ultraModernDocsAssets = new URL('../assets/', import.meta.url);
+
+export type UltraModernDocsPresetOptions = {
+  base?: string;
+  origin?: string;
+};
+
+const normalizeBase = (base = '/') => {
+  const trimmed = base.trim();
+  const withLeadingSlash = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
+  return withLeadingSlash.endsWith('/')
+    ? withLeadingSlash
+    : `${withLeadingSlash}/`;
+};
+
+const asPublicDirectories = (
+  publicDir: NonNullable<
+    NonNullable<UserConfig['builderConfig']>['server']
+  >['publicDir'],
+) => {
+  if (!publicDir) {
+    return [];
+  }
+  return Array.isArray(publicDir) ? publicDir : [publicDir];
+};
+
+export const applyUltraModernDocsPreset = (
+  config: UserConfig,
+  options: UltraModernDocsPresetOptions = {},
+): UserConfig => {
+  const base = normalizeBase(options.base ?? process.env.DOCS_BASE);
+  const origin = (options.origin ?? process.env.DOCS_ORIGIN ?? defaultOrigin)
+    .trim()
+    .replace(/\/+$/, '');
+  const siteUrl = new URL(base, `${origin || defaultOrigin}/`).toString();
+  const publicAsset = (assetPath: string) =>
+    `${base}${assetPath.replace(/^\//, '')}`;
+  const absoluteAsset = (assetPath: string) =>
+    new URL(assetPath.replace(/^\//, ''), siteUrl).toString();
+  const builderConfig = config.builderConfig ?? {};
+  const server = builderConfig.server ?? {};
+  const themeConfig = config.themeConfig ?? {};
+  const documentStatic = config.root
+    ? { name: path.resolve(config.root, '..', 'static') }
+    : undefined;
+  const presetAssets = { name: fileURLToPath(ultraModernDocsAssets) };
+  const publicDirectories = [
+    ...asPublicDirectories(server.publicDir),
+    ...(documentStatic ? [documentStatic] : []),
+    presetAssets,
+  ].filter(
+    (candidate, index, all) =>
+      all.findIndex(entry => entry.name === candidate.name) === index,
+  );
+
+  return {
+    ...config,
+    title: siteTitle,
+    description: siteDescription,
+    base,
+    logo: {
+      light: publicAsset('/img/ultramodern-logo-light.svg'),
+      dark: publicAsset('/img/ultramodern-logo-dark.svg'),
+    },
+    icon: absoluteAsset('/img/favicon.ico'),
+    themeConfig: {
+      ...themeConfig,
+      locales: (themeConfig.locales ?? []).map(locale => ({
+        ...locale,
+        title: siteTitle,
+        description: socialDescription,
+      })),
+      editLink: {
+        docRepoBaseUrl: `${githubUrl}/tree/main-ultramodern/packages/document/docs`,
+        text: 'Edit this page on GitHub',
+      },
+      socialLinks: [
+        ...(themeConfig.socialLinks ?? []).filter(
+          link => link.icon !== 'github',
+        ),
+        { icon: 'github', mode: 'link', content: githubUrl },
+      ],
+    },
+    builderConfig: {
+      ...builderConfig,
+      server: {
+        ...server,
+        publicDir: publicDirectories,
+      },
+      plugins: [
+        ...(builderConfig.plugins ?? []).filter(
+          plugin => plugin.name !== 'rsbuild-plugin-open-graph',
+        ),
+        pluginOpenGraph({
+          title: siteTitle,
+          siteName: siteTitle,
+          type: 'website',
+          url: siteUrl,
+          image: absoluteAsset('/img/ultramodern-social-card.png'),
+          description: socialDescription,
+          twitter: {
+            card: 'summary_large_image',
+            title: siteTitle,
+            image: absoluteAsset('/img/ultramodern-social-card.png'),
+            description: socialDescription,
+          },
+        }),
+      ],
+    },
+  };
+};
+
+export const defineUltraModernConfig = (config: UserConfig): UserConfig =>
+  defineConfig(applyUltraModernDocsPreset(config));

package/static/img/social-card.svg

@@ -1,12 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630" role="img" aria-labelledby="title desc">
-  <title id="title">UltraModern.js 3.0</title>
-  <desc id="desc">A SuperApp framework for Effect, TanStack Router, SSR, BFF, and Micro Verticals.</desc>
-  <rect width="1200" height="630" fill="#0f172a"/>
-  <path fill="#14b8a6" opacity=".22" d="M0 360c180-92 330-116 498-48 173 70 310 61 480-22 77-38 149-58 222-62v402H0V360z"/>
-  <path fill="#38bdf8" opacity=".18" d="M0 438c160-54 316-49 468 15 160 67 337 67 531 0 74-26 141-39 201-40v217H0V438z"/>
-  <rect x="86" y="90" width="96" height="96" rx="24" fill="#020617"/>
-  <path fill="#14b8a6" d="M111 116h15v35c0 13 7 21 18 21s18-8 18-21v-35h15v35c0 22-13 35-33 35s-33-13-33-35v-35z"/>
-  <path fill="#38bdf8" d="M157 116h18v70h-18v-70z"/>
-  <text x="86" y="284" fill="#f8fafc" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif" font-size="76" font-weight="800">UltraModern.js 3.0</text>
-  <text x="90" y="360" fill="#cbd5e1" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif" font-size="35" font-weight="500">Effect, TanStack Router, SSR, BFF, and Micro Verticals.</text>
-</svg>