caoergou · caoergou · Jul 29, 2026 · Jul 29, 2026
diff --git a/README.md b/README.md
@@ -5,9 +5,10 @@
 **An embeddable Windows XP desktop for React — customize it with your own files and apps, listen to user actions via events, and control it from your own code.**
 
 [![npm version](https://img.shields.io/npm/v/@caoergou/windows-xp.svg)](https://www.npmjs.com/package/@caoergou/windows-xp)
+[![CI](https://github.com/caoergou/windows-xp/actions/workflows/ci.yml/badge.svg)](https://github.com/caoergou/windows-xp/actions/workflows/ci.yml)
+[![minzip bundle size](https://img.shields.io/bundlephobia/minzip/@caoergou/windows-xp?label=minzip)](https://bundlephobia.com/package/@caoergou/windows-xp)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![React](https://img.shields.io/badge/React-18%20%7C%2019-blue.svg)](https://reactjs.org/)
-[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue.svg)](https://www.typescriptlang.org/)
 
 [Live Demo](https://eric.run.place/windows-xp/) · [English desktop](https://eric.run.place/windows-xp/demo/en/) · [中文桌面](https://eric.run.place/windows-xp/demo/zh/) · [Docs](https://eric.run.place/windows-xp/docs/) · [Roadmap](https://github.com/caoergou/windows-xp/issues/86) · [Report Bug](https://github.com/caoergou/windows-xp/issues)
 
@@ -19,6 +20,8 @@ English | [简体中文](README.zh-CN.md)
 
 ---
 
+![Windows XP desktop demo: boot, login, apps, and a scripted story event](docs/assets/windows-xp-demo.gif)
+
 `<WindowsXP>` is a React component that renders a complete Windows XP desktop in the browser. You drop it in, pass your own files, apps, and wallpaper as props, and listen to user actions through `onEvent`.
 
 > **Disclaimer:** An independent, fan-made recreation for nostalgic and educational purposes. Not affiliated with or endorsed by Microsoft Corporation. All trademarks belong to their respective owners.
@@ -36,14 +39,23 @@ import { WindowsXP } from '@caoergou/windows-xp';
 import '@caoergou/windows-xp/style.css';
 
 function App() {
-  // autoLogin and skipBoot jump straight to the desktop while you are developing.
-  // Remove them to see the boot screen and login.
   return <WindowsXP autoLogin skipBoot />;
 }
 ```
 
 `react`, `react-dom`, and `styled-components` v6 are peer dependencies; everything else, including the XP theme CSS, is bundled.
 
+### Run it online
+
+No clone or local setup is required. Both examples install the published npm package, exactly like a consumer project:
+
+| Example                          | StackBlitz                                                                                                                      | CodeSandbox                                                                                                |
+| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
+| Minimal React embed              | [Open in StackBlitz](https://stackblitz.com/fork/github/caoergou/windows-xp/tree/main/examples/quick-start?file=src%2FApp.jsx)  | [Open in CodeSandbox](https://codesandbox.io/s/github/caoergou/windows-xp/tree/main/examples/quick-start)  |
+| Custom files + declarative story | [Open in StackBlitz](https://stackblitz.com/fork/github/caoergou/windows-xp/tree/main/examples/custom-story?file=src%2FApp.jsx) | [Open in CodeSandbox](https://codesandbox.io/s/github/caoergou/windows-xp/tree/main/examples/custom-story) |
+
+Want to inspect features without opening an editor? Try a [deep-linked Explorer window](https://eric.run.place/windows-xp/demo/en/?lang=en&open=%E6%88%91%E7%9A%84%E6%96%87%E6%A1%A3) or the [boot, login, and prologue story](https://eric.run.place/windows-xp/demo/zh/?lang=zh&session=full&scenario=prologue&persistence=none).
+
 ## Why this one?
 
 Plenty of projects _look_ like Windows XP. This one is built to be **used inside your product**:

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -5,9 +5,10 @@
 **可嵌入、可用代码驱动的 React 版 Windows XP 桌面——一个可以装入你自己的内容、监听用户操作事件、并用代码控制的怀旧世界。**
 
 [![npm version](https://img.shields.io/npm/v/@caoergou/windows-xp.svg)](https://www.npmjs.com/package/@caoergou/windows-xp)
+[![CI](https://github.com/caoergou/windows-xp/actions/workflows/ci.yml/badge.svg)](https://github.com/caoergou/windows-xp/actions/workflows/ci.yml)
+[![minzip 包体积](https://img.shields.io/bundlephobia/minzip/@caoergou/windows-xp?label=minzip)](https://bundlephobia.com/package/@caoergou/windows-xp)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![React](https://img.shields.io/badge/React-18%20%7C%2019-blue.svg)](https://reactjs.org/)
-[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue.svg)](https://www.typescriptlang.org/)
 
 [在线演示](https://eric.run.place/windows-xp/) · [English desktop](https://eric.run.place/windows-xp/demo/en/) · [中文桌面](https://eric.run.place/windows-xp/demo/zh/) · [文档站](https://eric.run.place/windows-xp/docs/) · [路线图](https://github.com/caoergou/windows-xp/issues/86) · [报告问题](https://github.com/caoergou/windows-xp/issues)
 
@@ -19,6 +20,8 @@
 
 ---
 
+![Windows XP 桌面演示：开机、登录、应用窗口与剧情事件](docs/assets/windows-xp-demo.gif)
+
 还记得 Luna 蓝的任务栏、开机音，和消磨在扫雷上的下午吗？这个项目把那个世界搬回浏览器——**但不是一个固定的演示页，而是一个属于你的 React 组件**：桌面上的每个文件都可以换成你的内容，你都能收到对应的事件通知，接下来发生什么由你的代码决定。
 
 > **免责声明：** 本项目是独立的爱好者复刻作品，仅供怀旧与学习交流之用，与微软公司及 Windows 操作系统无任何关联，亦未获其授权或认可。所有相关商标归各自所有者所有。
@@ -36,13 +39,23 @@ import { WindowsXP } from '@caoergou/windows-xp';
 import '@caoergou/windows-xp/style.css';
 
 function App() {
-  // autoLogin 和 skipBoot 开发时直接跳到桌面；去掉它们可看到开机和登录。
   return <WindowsXP autoLogin skipBoot language="zh" />;
 }
 ```
 
 `react`、`react-dom`、`styled-components` v6 是 peer dependencies；其余一切（包括 XP 主题 CSS）都已打包在内。
 
+### 在线直接运行
+
+无需克隆仓库或配置本地环境。两个示例都直接安装已发布的 npm 包，与真实消费项目一致：
+
+| 示例                   | StackBlitz                                                                                                                        | CodeSandbox                                                                                                  |
+| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| 最小 React 嵌入        | [在 StackBlitz 中打开](https://stackblitz.com/fork/github/caoergou/windows-xp/tree/main/examples/quick-start?file=src%2FApp.jsx)  | [在 CodeSandbox 中打开](https://codesandbox.io/s/github/caoergou/windows-xp/tree/main/examples/quick-start)  |
+| 自定义文件＋声明式剧情 | [在 StackBlitz 中打开](https://stackblitz.com/fork/github/caoergou/windows-xp/tree/main/examples/custom-story?file=src%2FApp.jsx) | [在 CodeSandbox 中打开](https://codesandbox.io/s/github/caoergou/windows-xp/tree/main/examples/custom-story) |
+
+只想体验功能、不打开编辑器？可以直接查看[通过深链打开的资源管理器窗口](https://eric.run.place/windows-xp/demo/zh/?lang=zh&open=%E6%88%91%E7%9A%84%E6%96%87%E6%A1%A3)，或体验[开机、登录与序章剧情](https://eric.run.place/windows-xp/demo/zh/?lang=zh&session=full&scenario=prologue&persistence=none)。
+
 ## 为什么选这个？
 
 长得像 Windows XP 的项目很多，这一个是为了**在你的产品里使用**而设计的：

diff --git a/docs/assets/windows-xp-demo.gif b/docs/assets/windows-xp-demo.gif
diff --git a/e2e/branding.spec.ts b/e2e/branding.spec.ts
@@ -28,3 +28,29 @@ test.describe('Branded boot & login (#139)', () => {
     await expect(page.getByText('Microsoft Windows')).toHaveCount(0);
   });
 });
+
+test.describe('Demo session and story links (#216)', () => {
+  test('session=full keeps the default XP login screen without custom branding', async ({
+    page,
+  }) => {
+    await page.addInitScript(() => {
+      localStorage.clear();
+      localStorage.setItem('xp_first_boot_done', 'true');
+      localStorage.setItem('xp_power_state', 'running');
+    });
+    await page.goto('demo/en/?session=full&persistence=none');
+
+    const loginScreen = page.locator('[data-testid="login-screen"]');
+    await expect(loginScreen).toBeVisible({ timeout: 40000 });
+    await expect(page.getByText('Microsoft Windows')).toBeVisible();
+    await expect(page.locator('[data-testid="login-title"]')).toHaveCount(0);
+  });
+
+  test('scenario=prologue mounts the declarative story', async ({ page }) => {
+    await page.addInitScript(() => localStorage.clear());
+    await page.goto('demo/zh/?scenario=prologue&persistence=none');
+
+    await expect(page.locator('[data-testid="taskbar"]')).toBeVisible({ timeout: 20000 });
+    await expect(page.getByText('还记得吗？')).toBeVisible();
+  });
+});
diff --git a/examples/custom-story/README.md b/examples/custom-story/README.md
@@ -0,0 +1,10 @@
+# Windows XP custom story
+
+A Vite + React example that combines a custom file system with a declarative scenario.
+
+Open `START HERE.txt` on the desktop. The scenario responds with an XP notification and creates `NEXT.txt` without adding any React interaction code.
+
+```bash
+npm install
+npm run dev
+```
diff --git a/examples/custom-story/index.html b/examples/custom-story/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Windows XP custom story</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>