diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css
index cd7f24a7f..3b11a6d7f 100644
--- a/apps/ai-game-creator-shell/src/styles.css
+++ b/apps/ai-game-creator-shell/src/styles.css
@@ -1,5 +1,6 @@
 @import 'tailwindcss';
 @source '../../../packages/shared/src/components';
+@import '@genarrative/shared/styles.css';
 @import '../../../packages/shared/src/theme.css';
 
 :root {
diff --git a/apps/ai-game-creator-shell/tsconfig.json b/apps/ai-game-creator-shell/tsconfig.json
index 894821755..e18485909 100644
--- a/apps/ai-game-creator-shell/tsconfig.json
+++ b/apps/ai-game-creator-shell/tsconfig.json
@@ -22,7 +22,22 @@
       ],
       "@genarrative/image-canvas-react": [
         "packages/image-canvas-react/src/index.ts"
-      ]
+      ],
+      "@genarrative/shared": ["packages/shared/src/index.ts"],
+      "@genarrative/shared/components": [
+        "packages/shared/src/components/index.ts"
+      ],
+      "@genarrative/shared/components/account": [
+        "packages/shared/src/components/account.ts"
+      ],
+      "@genarrative/shared/components/ui": [
+        "packages/shared/src/components/ui/index.ts"
+      ],
+      "@genarrative/shared/components/ui/*": [
+        "packages/shared/src/components/ui/*"
+      ],
+      "@genarrative/shared/lib/*": ["packages/shared/src/lib/*"],
+      "@genarrative/shared/lib": ["packages/shared/src/lib/index.ts"]
     }
   },
   "include": ["src", "vite.config.ts"]
diff --git a/apps/ai-game-creator-shell/vite.config.ts b/apps/ai-game-creator-shell/vite.config.ts
index 8f784f2a0..71b012d81 100644
--- a/apps/ai-game-creator-shell/vite.config.ts
+++ b/apps/ai-game-creator-shell/vite.config.ts
@@ -105,6 +105,46 @@ export default defineConfig({
           'packages/image-canvas-react/src/index.ts',
         ),
       },
+      {
+        find: '@genarrative/shared/styles.css',
+        replacement: resolve(
+          repoRoot,
+          'packages/shared/src/components/styles.css',
+        ),
+      },
+      {
+        find: '@genarrative/shared/theme.css',
+        replacement: resolve(repoRoot, 'packages/shared/src/theme.css'),
+      },
+      {
+        find: '@genarrative/shared/components/ui',
+        replacement: resolve(
+          repoRoot,
+          'packages/shared/src/components/ui/index.ts',
+        ),
+      },
+      {
+        find: '@genarrative/shared/lib',
+        replacement: resolve(repoRoot, 'packages/shared/src/lib'),
+      },
+      {
+        find: '@genarrative/shared/components/account',
+        replacement: resolve(
+          repoRoot,
+          'packages/shared/src/components/account.ts',
+        ),
+      },
+      {
+        find: '@genarrative/shared/components',
+        replacement: resolve(
+          repoRoot,
+          'packages/shared/src/components/index.ts',
+        ),
+      },
+      {
+        find: '@genarrative/shared',
+        replacement: resolve(repoRoot, 'packages/shared/src/index.ts'),
+      },
     ],
     dedupe: ['react', 'react-dom'],
   },
diff --git a/components.json b/components.json
new file mode 100644
index 000000000..035330aed
--- /dev/null
+++ b/components.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@genarrative/shared/components",
+    "ui": "@genarrative/shared/components/ui",
+    "utils": "@genarrative/shared/lib/utils",
+    "lib": "@genarrative/shared/lib"
+  }
+}
diff --git a/docs/README.md b/docs/README.md
index 7b24f1cda..f937a964d 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -30,6 +30,7 @@
 
 ## 图片画布与媒体
 
+- [共享基础组件库与展示页](./technical/【前端架构】共享基础组件库与展示页-2026-08-26.md)：网站与客户端复用的无业务 UI chrome、样式边界和 `/components` 展示页。
 - [客户端素材创作无限画布阶段一合同](./technical/【技术方案】客户端素材创作无限画布阶段一合同-2026-08-05.md)
 - [图片画布结构化持久化与迁移回滚](./【编辑器】图片画布结构化持久化与迁移回滚方案-2026-07-19.md)
 - [编辑器生成结果原子提交与幂等重放](./technical/【后端架构】编辑器生成结果原子提交与幂等重放方案-2026-08-06.md)
diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index 4ffd04577..7c49f0673 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -7747,3 +7747,15 @@ CI 上 `background_agent_runtime_recovers_stale_running_before_pending_task` 在
 - DirectProject 的 Codex cwd 固定为真实 `game/` 目录时，原生文件工具和 patch 必须使用 cwd 相对路径（`index.html`、`style.css`、`game.js`）；`game/...` 仅用于 AGC manifest、回执和客户端投影，不能作为 cwd 内原生 patch 路径，以避免 `writing outside of the project`。
 - 直连 Runtime 已取得 Developer Key 时，资源编辑的 `remote_credentials` 是该操作的完整身份边界；其中冻结平台快照为空表示 Developer 模式，禁止再从进程全局 GUI 登录态补回账号快照。平台账号模式仍只使用同一组凭据捕获的快照。
 - 回归覆盖 Direct 系统提示路径合同和 Developer Key / GUI 快照隔离；未触碰用户项目 `.agent` 锁、账本或凭据。
+
+## 2026-08-26 网站与客户端共享基础组件库
+
+- 决策：无业务 UI chrome 统一放入 `packages/shared/src/components`，通过 `@genarrative/shared/components` 导出；组件只接受 React props、原生 DOM props、短文案、图标节点和回调，不读取账号、钱包、请求客户端、store、Tauri API 或业务实体。
+- 样式边界：共享样式位于 `packages/shared/src/components/styles.css`，选择器使用 `.genarrative-ui-*` 前缀并消费 `packages/shared/src/theme.css` 的 `--platform-*` token。网站与客户端各自保留页面壳、路由、业务和玩法视觉，不导入网站总 CSS；账户 DTO 适配器只从 `@genarrative/shared/components/account` 单独导出，不进入通用组件 barrel。
+- 展示页：网站 `/components`（`/design-system` 兼容别名）展示所有公共组件的变体、状态、Token 和移动端布局，使用本地静态示例，不经过账号 Gate 或调用业务 API。
+
+## 2026-08-27 共享组件采用 shadcn open-code 渐进迁移
+
+- 决策：共享 Web UI 采用 shadcn 的源码归属项目模式，新增 canonical source 放入 `packages/shared/src/components/ui`，统一通过 `packages/shared/src/lib/utils.ts` 的 `cn` 与 CVA 组织变体；不引入 MUI / Ant Design 全量组件，也不一次性重写现有业务 common。
+- 首步：`Button`、`Modal`、`SegmentedTabs`、`Switch`、`Input`、`Textarea`、`Badge`、`Card` 已迁移到 `components/ui` canonical source，保留 `@genarrative/shared/components` 的旧 API 作为兼容适配；Button/Input/Badge 用 CVA，Dialog/Tabs/Switch 按需使用 Radix，Tailwind 4 继续消费现有 `--platform-*` token 与 `.genarrative-ui-*` 样式。原生 Select 暂不迁移。
+- 边界：网站与 Tauri WebView 可消费该 DOM 源码，移动端 React Native 不导入这套组件与 CSS；Radix primitive 仅在 Dialog、Tabs、Switch 等具体组件迁移时按需加入。
diff --git a/docs/technical/【前端架构】共享基础组件库与展示页-2026-08-26.md b/docs/technical/【前端架构】共享基础组件库与展示页-2026-08-26.md
new file mode 100644
index 000000000..68463b32b
--- /dev/null
+++ b/docs/technical/【前端架构】共享基础组件库与展示页-2026-08-26.md
@@ -0,0 +1,40 @@
+# 共享基础组件库与展示页
+
+更新时间：`2026-08-26`
+
+## 目标
+
+网站与 Tauri 客户端共享无业务依赖的基础 UI chrome，同时保留各自的页面布局、路由、账号/钱包业务和玩法视觉。共享层只接受 React props、原生 DOM props、短文案、图标节点和回调，不读取请求客户端、store、Tauri API 或业务实体。
+
+## 包边界
+
+组件位于 `packages/shared/src/components`，由 `@genarrative/shared` 根入口和 `@genarrative/shared/components` 子路径稳定导出。新增组件按 shadcn 的 open-code 方式归档在 `components/ui`，源码、变体和组合点归项目所有；`packages/shared/src/lib/utils.ts` 提供统一的 `cn` 工具。当前迁移阶段仍复用 `packages/shared/src/components/styles.css` 的 `.genarrative-ui-*` 选择器和 `packages/shared/src/theme.css` 的 `--platform-*` token，避免破坏既有平台视觉契约。
+
+已有账户 DTO 适配组件单独由 `@genarrative/shared/components/account` 导出；它们不进入本样式库的通用组件 barrel，也不从该入口转出。
+
+当前基础组件：
+
+- `Button`、`IconButton`
+- `TextField`、`SelectField`
+- `Subpanel`、`Modal`
+- `Status`、`EmptyState`、`Badge`
+- `ProgressBar`、`SegmentedTabs`、`Switch`
+- `Spinner`、`Divider`
+
+迁移约定：`Button`、`Modal`、`SegmentedTabs`、`Switch`、`Input`、`Textarea`、`Badge`、`Card` 的 canonical source 位于 `packages/shared/src/components/ui`，旧的 `@genarrative/shared/components` API 作为兼容适配层继续保留。`Button`、`Input`、`Badge` 使用 CVA，Dialog/Tabs/Switch 使用按需 Radix primitive；原生 `SelectField` 暂不迁移，避免破坏现有 `<option>` 与表单事件合同。后续组件按使用面逐个迁移。
+
+同时提供 `Platform*` 别名，便于从现有平台组件命名迁移；别名不携带平台业务语义。
+
+Web 宿主需要显式启用 Tailwind 4，并引入 `@genarrative/shared/styles.css` 和 `@genarrative/shared/theme.css`；Tauri WebView 与网站共用这套源码，移动端 React Native 不消费 DOM/CSS 组件。组件库不导入网站 `src/index.css`，也不提供页面壳或业务流程。`components.json` 只用于 shadcn CLI 定位源码，不允许覆盖现有业务组件。
+
+## 展示页
+
+网站 `/components`（兼容别名 `/design-system`）是共享组件展示页，不经过账号 Gate。页面按“基础组件”“平台通用组件”“Token”“状态”分区，覆盖公共组件的主要变体、交互态、筛选/标签/媒体/上传/异步状态/指标列表等平台 chrome 和移动端布局；展示数据均为本地静态示例，不调用 API。平台组件分区中的筛选按示例素材状态过滤结果，排序按最近使用或名称重排结果，并在筛选按钮、排序按钮和独立筛选面板之间保持同一份本地状态。展示页可用于网站与客户端接入前的视觉回归和人工验收。平台通用组件示例来自 `src/components/common`，只接入不读取请求、store 或业务实体的 chrome，不把账号、发布和编辑器业务流程嵌入展示页。
+
+## 验收
+
+- 组件具备原生语义、键盘焦点、禁用态和可访问名称。
+- 按钮、图标按钮、分段标签和开关具备明确按压态；展示页中的可操作示例在点击后提供可见状态反馈，加载态按钮保持禁用。
+- `Modal` 支持 ESC、遮罩点击、可选 portal 和移动端底部面板布局。
+- 组件样式不依赖网站总 CSS；Tauri 只需共享主题、共享组件样式和自己的壳层样式。
+- 修改后运行 `npm run typecheck`、`npm run check:encoding`、`npm run test -- src/routing/activeAppRoutes.test.ts` 与 `git diff --check`。
diff --git a/package-lock.json b/package-lock.json
index 53e662692..17a996bff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6238,6 +6238,485 @@
         "url": "https://opencollective.com/preact"
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.7.tgz",
+      "integrity": "sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.15.tgz",
+      "integrity": "sha512-9W+B9NPF0NaaPh/1NJd3+KqsnlLqU9H7T2rvww+fp+T/evVXdNAyYcnfRQZFOjkR1ajQp3yORlqnI8soawLvNA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-slot": "1.3.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.5.tgz",
+      "integrity": "sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.2.2.tgz",
+      "integrity": "sha512-RHCUGwKHDr0hDGg4X7ma4JG4/+12qxw8rkh5QKdDldlCvtja6nUx1Ef/8HVrJze81lEsgLQlqjzjGNHantgnQA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.23.tgz",
+      "integrity": "sha512-Ksw4WeROkO4rC9k/onilX/Ao2Cr1ku1unMNH+XSCcP4jSXYu7HDsg9n4ojMjVb22XpYjAQ9qfrFlVbru1vXDUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-focus-guards": "1.1.6",
+        "@radix-ui/react-focus-scope": "1.1.16",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-slot": "1.3.3",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.7.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.4.tgz",
+      "integrity": "sha512-5pzg4FGQNpExhnhT2zlrP1wZFaYCd1K0nYWoFAdcYoYK868IEigqMX3B3f8yIoRlAhAeDWciLI6ZdCKHF9P4Vg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.19.tgz",
+      "integrity": "sha512-8g4pfOL9HoKKLWGiypT+dphVqjFfmcXO5GBnhsG6zI+lxAx/8feQpr+1LSN8Re3hiZ+XkLNS4O9ztK11/LzQ6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-effect-event": "0.0.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.6.tgz",
+      "integrity": "sha512-RNOJjfZMTyBM6xYmV3IVGXkPjIhcBAuv48POevAXwrGJhkWZ9p1rFoIS1JFooPuT193AZmRsCPhpoVJxx6OPoQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.16.tgz",
+      "integrity": "sha512-wmRZ2WWLvmt6KHy2rNPOdPUjwq5xOHY02+m+udwJTn0aNIox/rkskAvJTyTLGhPK6KgrUjlJUJpgmx/+wFiFIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.4.tgz",
+      "integrity": "sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.17",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.17.tgz",
+      "integrity": "sha512-vKQLcWypUnwZVvfV7UkGahH2g6ySe8M8R+zYBwPrv5byZ9QAW6cQVvNKo7GgmD+p8aYb6D9JBuvy8/WhOno2wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.10.tgz",
+      "integrity": "sha512-3wyzCQ6+ubRA+D4uv9m95JYLXxmOHp05qjrkjeA7uKHHtjpPggQzc6DAb0URl7j67oR0K2foO4ip27TiX037Bw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.10.tgz",
+      "integrity": "sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.3.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.19.tgz",
+      "integrity": "sha512-V9jI6hDjT7l3jsCQD9bLNvDLM3tH/gdbOTp7Tefp3hbbgCGQoK7tUvrWiRlcoBHIZ809ElXwNQwVo0B98LuTXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-is-hydrated": "0.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.3.3.tgz",
+      "integrity": "sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.3.7.tgz",
+      "integrity": "sha512-48tB/4dn2UVLBCYhTu9AuR63IHl73l/qLbLgxd86noTUor4/K4LFDAcYjK+isP5313qxaFpjPVogE7+Y0/V3Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-size": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.21.tgz",
+      "integrity": "sha512-UKxJlZid7FVtsk/WTxj4i4uSEgj2Au+KBbS7SQyTlzMhhn+86Cz3tISZdTa87bfEfcuvZezf2ZsxD4xuEKtkog==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-roving-focus": "1.1.19",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.4.tgz",
+      "integrity": "sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.6.tgz",
+      "integrity": "sha512-uEQJGT97ZA/TgP/Hydw47lHu+/vQj6z/0jA+WeTbK1o9Rx45GImjpD0tc3W5ad3D6XTSR6e1yEO0FvGq6WQfVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-use-effect-event": "0.0.5",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.5.tgz",
+      "integrity": "sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-is-hydrated": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.3.tgz",
+      "integrity": "sha512-umO/aJ+82CpOnhDZUTbILCQf7kU/g0iv+oGs/Q8jw7IkhWBzaEP4sA268PhFAJTFetbwp3ICc6ktpI4TqtxcIw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.4.tgz",
+      "integrity": "sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.4.tgz",
+      "integrity": "sha512-D3anSY15EJoxrihpsXI6SMrmmonnQtR2ni7arO+Lfdg3O95b9hNXxONk8jA5C8ANdF/h5HMAxejgs8PWJ6rlhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@react-dnd/asap": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.1.tgz",
@@ -8613,6 +9092,18 @@
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -9395,6 +9886,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/clean-stack": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-3.0.1.tgz",
@@ -9578,6 +10081,15 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -10020,6 +10532,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -12531,6 +13049,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-package-type": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@@ -18082,6 +18609,75 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-window": {
       "version": "1.8.11",
       "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.11.tgz",
@@ -19251,6 +19847,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+      "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
@@ -20022,6 +20628,49 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
@@ -22238,8 +22887,14 @@
       "name": "@genarrative/shared",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.23",
+        "@radix-ui/react-switch": "^1.3.7",
+        "@radix-ui/react-tabs": "^1.1.21",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "lucide-react": "^0.546.0",
         "qrcode": "^1.5.4",
+        "tailwind-merge": "^3.6.0",
         "zustand": "^5.0.14"
       },
       "devDependencies": {
@@ -22250,7 +22905,8 @@
         "vitest": "^0.34.6"
       },
       "peerDependencies": {
-        "react": "^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
       }
     },
     "tools/spine-json-export-validator": {
@@ -25743,12 +26399,18 @@
     "@genarrative/shared": {
       "version": "file:packages/shared",
       "requires": {
+        "@radix-ui/react-dialog": "^1.1.23",
+        "@radix-ui/react-switch": "^1.3.7",
+        "@radix-ui/react-tabs": "^1.1.21",
         "@testing-library/react": "^16.3.2",
         "@testing-library/user-event": "^14.6.1",
         "@types/qrcode": "^1.5.6",
         "@types/react": "^19.2.14",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "lucide-react": "^0.546.0",
         "qrcode": "^1.5.4",
+        "tailwind-merge": "^3.6.0",
         "vitest": "^0.34.6",
         "zustand": "^5.0.14"
       }
@@ -26406,6 +27068,221 @@
       "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.14.4.tgz",
       "integrity": "sha512-HNB6HYeYKhQbJ1aKl+YRjrS4+QWHLKX6qKoUsfS/m0vqzsVaEBiZiaKbG/e+NKk2ch5ALQr/ihWaMHxiCuuWHA=="
     },
+    "@radix-ui/primitive": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.7.tgz",
+      "integrity": "sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q=="
+    },
+    "@radix-ui/react-collection": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.15.tgz",
+      "integrity": "sha512-9W+B9NPF0NaaPh/1NJd3+KqsnlLqU9H7T2rvww+fp+T/evVXdNAyYcnfRQZFOjkR1ajQp3yORlqnI8soawLvNA==",
+      "requires": {
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-slot": "1.3.3"
+      }
+    },
+    "@radix-ui/react-compose-refs": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.5.tgz",
+      "integrity": "sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA==",
+      "requires": {}
+    },
+    "@radix-ui/react-context": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.2.2.tgz",
+      "integrity": "sha512-RHCUGwKHDr0hDGg4X7ma4JG4/+12qxw8rkh5QKdDldlCvtja6nUx1Ef/8HVrJze81lEsgLQlqjzjGNHantgnQA==",
+      "requires": {}
+    },
+    "@radix-ui/react-dialog": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.23.tgz",
+      "integrity": "sha512-Ksw4WeROkO4rC9k/onilX/Ao2Cr1ku1unMNH+XSCcP4jSXYu7HDsg9n4ojMjVb22XpYjAQ9qfrFlVbru1vXDUA==",
+      "requires": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-focus-guards": "1.1.6",
+        "@radix-ui/react-focus-scope": "1.1.16",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-slot": "1.3.3",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.7.2"
+      }
+    },
+    "@radix-ui/react-direction": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.4.tgz",
+      "integrity": "sha512-5pzg4FGQNpExhnhT2zlrP1wZFaYCd1K0nYWoFAdcYoYK868IEigqMX3B3f8yIoRlAhAeDWciLI6ZdCKHF9P4Vg==",
+      "requires": {}
+    },
+    "@radix-ui/react-dismissable-layer": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.19.tgz",
+      "integrity": "sha512-8g4pfOL9HoKKLWGiypT+dphVqjFfmcXO5GBnhsG6zI+lxAx/8feQpr+1LSN8Re3hiZ+XkLNS4O9ztK11/LzQ6w==",
+      "requires": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-effect-event": "0.0.5"
+      }
+    },
+    "@radix-ui/react-focus-guards": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.6.tgz",
+      "integrity": "sha512-RNOJjfZMTyBM6xYmV3IVGXkPjIhcBAuv48POevAXwrGJhkWZ9p1rFoIS1JFooPuT193AZmRsCPhpoVJxx6OPoQ==",
+      "requires": {}
+    },
+    "@radix-ui/react-focus-scope": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.16.tgz",
+      "integrity": "sha512-wmRZ2WWLvmt6KHy2rNPOdPUjwq5xOHY02+m+udwJTn0aNIox/rkskAvJTyTLGhPK6KgrUjlJUJpgmx/+wFiFIQ==",
+      "requires": {
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4"
+      }
+    },
+    "@radix-ui/react-id": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.4.tgz",
+      "integrity": "sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA==",
+      "requires": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      }
+    },
+    "@radix-ui/react-portal": {
+      "version": "1.1.17",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.17.tgz",
+      "integrity": "sha512-vKQLcWypUnwZVvfV7UkGahH2g6ySe8M8R+zYBwPrv5byZ9QAW6cQVvNKo7GgmD+p8aYb6D9JBuvy8/WhOno2wQ==",
+      "requires": {
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      }
+    },
+    "@radix-ui/react-presence": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.10.tgz",
+      "integrity": "sha512-3wyzCQ6+ubRA+D4uv9m95JYLXxmOHp05qjrkjeA7uKHHtjpPggQzc6DAb0URl7j67oR0K2foO4ip27TiX037Bw==",
+      "requires": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      }
+    },
+    "@radix-ui/react-primitive": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.10.tgz",
+      "integrity": "sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg==",
+      "requires": {
+        "@radix-ui/react-slot": "1.3.3"
+      }
+    },
+    "@radix-ui/react-roving-focus": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.19.tgz",
+      "integrity": "sha512-V9jI6hDjT7l3jsCQD9bLNvDLM3tH/gdbOTp7Tefp3hbbgCGQoK7tUvrWiRlcoBHIZ809ElXwNQwVo0B98LuTXQ==",
+      "requires": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-is-hydrated": "0.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      }
+    },
+    "@radix-ui/react-slot": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.3.3.tgz",
+      "integrity": "sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==",
+      "requires": {
+        "@radix-ui/react-compose-refs": "1.1.5"
+      }
+    },
+    "@radix-ui/react-switch": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.3.7.tgz",
+      "integrity": "sha512-48tB/4dn2UVLBCYhTu9AuR63IHl73l/qLbLgxd86noTUor4/K4LFDAcYjK+isP5313qxaFpjPVogE7+Y0/V3Kw==",
+      "requires": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-size": "1.1.4"
+      }
+    },
+    "@radix-ui/react-tabs": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.21.tgz",
+      "integrity": "sha512-UKxJlZid7FVtsk/WTxj4i4uSEgj2Au+KBbS7SQyTlzMhhn+86Cz3tISZdTa87bfEfcuvZezf2ZsxD4xuEKtkog==",
+      "requires": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-roving-focus": "1.1.19",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      }
+    },
+    "@radix-ui/react-use-callback-ref": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.4.tgz",
+      "integrity": "sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ==",
+      "requires": {}
+    },
+    "@radix-ui/react-use-controllable-state": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.6.tgz",
+      "integrity": "sha512-uEQJGT97ZA/TgP/Hydw47lHu+/vQj6z/0jA+WeTbK1o9Rx45GImjpD0tc3W5ad3D6XTSR6e1yEO0FvGq6WQfVQ==",
+      "requires": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-use-effect-event": "0.0.5",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      }
+    },
+    "@radix-ui/react-use-effect-event": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.5.tgz",
+      "integrity": "sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg==",
+      "requires": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      }
+    },
+    "@radix-ui/react-use-is-hydrated": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.3.tgz",
+      "integrity": "sha512-umO/aJ+82CpOnhDZUTbILCQf7kU/g0iv+oGs/Q8jw7IkhWBzaEP4sA268PhFAJTFetbwp3ICc6ktpI4TqtxcIw==",
+      "requires": {}
+    },
+    "@radix-ui/react-use-layout-effect": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.4.tgz",
+      "integrity": "sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw==",
+      "requires": {}
+    },
+    "@radix-ui/react-use-size": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.4.tgz",
+      "integrity": "sha512-D3anSY15EJoxrihpsXI6SMrmmonnQtR2ni7arO+Lfdg3O95b9hNXxONk8jA5C8ANdF/h5HMAxejgs8PWJ6rlhw==",
+      "requires": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      }
+    },
     "@react-dnd/asap": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.1.tgz",
@@ -27918,6 +28795,14 @@
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
+    "aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "aria-query": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -28419,6 +29304,14 @@
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
       "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ=="
     },
+    "class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "requires": {
+        "clsx": "^2.1.1"
+      }
+    },
     "clean-stack": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-3.0.1.tgz",
@@ -28528,6 +29421,11 @@
       "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
       "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg=="
     },
+    "clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
+    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -28840,6 +29738,11 @@
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="
     },
+    "detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
     "devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -30568,6 +31471,11 @@
         "math-intrinsics": "^1.1.0"
       }
     },
+    "get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="
+    },
     "get-package-type": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@@ -34181,6 +35089,36 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
       "integrity": "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw=="
     },
+    "react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "requires": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      }
+    },
+    "react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "requires": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      }
+    },
+    "react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "requires": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      }
+    },
     "react-window": {
       "version": "1.8.11",
       "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.11.tgz",
@@ -34980,6 +35918,11 @@
       "resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",
       "integrity": "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng=="
     },
+    "tailwind-merge": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+      "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w=="
+    },
     "tailwindcss": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
@@ -35502,6 +36445,23 @@
         "requires-port": "^1.0.0"
       }
     },
+    "use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "requires": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      }
+    },
     "use-sync-external-store": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 9a733dab0..3f54a8f9c 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -3,9 +3,27 @@
   "private": true,
   "version": "0.1.0",
   "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./components": "./src/components/index.ts",
+    "./components/ui": "./src/components/ui/index.ts",
+    "./components/ui/button": "./src/components/ui/button.tsx",
+    "./components/ui/*": "./src/components/ui/*.tsx",
+    "./components/account": "./src/components/account.ts",
+    "./lib": "./src/lib/index.ts",
+    "./lib/utils": "./src/lib/utils.ts",
+    "./styles.css": "./src/components/styles.css",
+    "./theme.css": "./src/theme.css"
+  },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "lucide-react": "^0.546.0",
     "qrcode": "^1.5.4",
+    "tailwind-merge": "^3.6.0",
     "zustand": "^5.0.14"
   },
   "devDependencies": {
@@ -16,6 +34,7 @@
     "vitest": "^0.34.6"
   },
   "peerDependencies": {
-    "react": "^19.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }
diff --git a/packages/shared/src/components/PlatformActionButton.tsx b/packages/shared/src/components/PlatformActionButton.tsx
new file mode 100644
index 000000000..453b35890
--- /dev/null
+++ b/packages/shared/src/components/PlatformActionButton.tsx
@@ -0,0 +1,131 @@
+import type {
+  ButtonHTMLAttributes,
+  LabelHTMLAttributes,
+  ReactNode,
+} from 'react';
+
+import { Button, type ButtonProps, type SharedButtonSize } from './ui';
+
+export type PlatformActionButtonTone =
+  | 'primary'
+  | 'secondary'
+  | 'ghost'
+  | 'danger'
+  | 'success'
+  | 'warning'
+  | 'accent'
+  | 'accentSoft';
+export type PlatformActionButtonSurface = 'platform' | 'profile' | 'editorDark';
+export type PlatformActionButtonSize = 'xxs' | 'xs' | SharedButtonSize;
+export type PlatformActionButtonShape = 'default' | 'pill';
+export type PlatformActionButtonAlign = 'center' | 'start';
+
+type PlatformActionButtonBaseProps = {
+  children?: ReactNode;
+  tone?: PlatformActionButtonTone;
+  surface?: PlatformActionButtonSurface;
+  size?: PlatformActionButtonSize;
+  shape?: PlatformActionButtonShape;
+  align?: PlatformActionButtonAlign;
+  fullWidth?: boolean;
+};
+
+type PlatformActionButtonButtonProps = Omit<
+  ButtonProps,
+  'children' | 'variant' | 'size' | 'fullWidth'
+> &
+  PlatformActionButtonBaseProps & {
+    asChild?: false;
+  };
+
+type PlatformActionButtonLabelProps = Omit<
+  LabelHTMLAttributes<HTMLLabelElement>,
+  'children'
+> &
+  PlatformActionButtonBaseProps & {
+    asChild: 'label';
+  };
+
+export type PlatformActionButtonProps =
+  | PlatformActionButtonButtonProps
+  | PlatformActionButtonLabelProps;
+
+const toneVariant: Record<PlatformActionButtonTone, ButtonProps['variant']> = {
+  primary: 'primary',
+  secondary: 'secondary',
+  ghost: 'ghost',
+  danger: 'danger',
+  success: 'primary',
+  warning: 'secondary',
+  accent: 'primary',
+  accentSoft: 'secondary',
+};
+
+function toneClassName(tone: PlatformActionButtonTone) {
+  return tone.replace(/[A-Z]/gu, (letter) => `-${letter.toLowerCase()}`);
+}
+
+/**
+ * Product-neutral compatibility wrapper for the existing platform action
+ * button naming. It keeps the optional label host useful for file inputs while
+ * leaving all product state and event handling with the caller.
+ */
+export function PlatformActionButton({
+  tone = 'primary',
+  surface = 'platform',
+  size = 'sm',
+  shape = 'default',
+  align = 'center',
+  fullWidth = false,
+  className,
+  children,
+  asChild,
+  ...props
+}: PlatformActionButtonProps) {
+  const resolvedSize: SharedButtonSize =
+    size === 'xxs' || size === 'xs' ? 'sm' : size;
+  const modifierClassName = [
+    shape === 'pill' ? 'genarrative-ui-button--pill' : null,
+    align === 'start' ? 'genarrative-ui-button--start' : null,
+    fullWidth ? 'genarrative-ui-button--full-width' : null,
+    `genarrative-ui-button--surface-${surface}`,
+    `genarrative-ui-button--tone-${toneClassName(tone)}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+  const actionClassName = [
+    'genarrative-ui-button',
+    `genarrative-ui-button--${toneVariant[tone]}`,
+    `genarrative-ui-button--${resolvedSize}`,
+    modifierClassName,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  if (asChild === 'label') {
+    return (
+      <label
+        {...(props as LabelHTMLAttributes<HTMLLabelElement>)}
+        className={actionClassName}
+      >
+        {children}
+      </label>
+    );
+  }
+
+  const { type = 'button', ...buttonProps } =
+    props as ButtonHTMLAttributes<HTMLButtonElement>;
+  return (
+    <Button
+      {...buttonProps}
+      type={type}
+      fullWidth={fullWidth}
+      size={resolvedSize}
+      variant={toneVariant[tone]}
+      className={modifierClassName}
+    >
+      {children}
+    </Button>
+  );
+}
diff --git a/packages/shared/src/components/PlatformBadge.tsx b/packages/shared/src/components/PlatformBadge.tsx
new file mode 100644
index 000000000..a67167d08
--- /dev/null
+++ b/packages/shared/src/components/PlatformBadge.tsx
@@ -0,0 +1,5 @@
+export type {
+  BadgeProps as PlatformBadgeProps,
+  BadgeTone as PlatformBadgeTone,
+} from './ui';
+export { Badge as PlatformBadge } from './ui';
diff --git a/packages/shared/src/components/PlatformEmptyState.tsx b/packages/shared/src/components/PlatformEmptyState.tsx
new file mode 100644
index 000000000..35ae54d8e
--- /dev/null
+++ b/packages/shared/src/components/PlatformEmptyState.tsx
@@ -0,0 +1,2 @@
+export type { EmptyStateProps as PlatformEmptyStateProps } from './ui';
+export { EmptyState as PlatformEmptyState } from './ui';
diff --git a/packages/shared/src/components/PlatformIconButton.tsx b/packages/shared/src/components/PlatformIconButton.tsx
new file mode 100644
index 000000000..a829a3e78
--- /dev/null
+++ b/packages/shared/src/components/PlatformIconButton.tsx
@@ -0,0 +1,151 @@
+import type {
+  ButtonHTMLAttributes,
+  HTMLAttributes,
+  KeyboardEvent,
+  LabelHTMLAttributes,
+  ReactNode,
+  Ref,
+} from 'react';
+import { forwardRef } from 'react';
+
+import { IconButton, type IconButtonProps, type IconButtonSize } from './ui';
+
+export type PlatformIconButtonVariant =
+  | 'platformIcon'
+  | 'surfaceFloating'
+  | 'darkMini';
+export type PlatformIconButtonSize = IconButtonSize;
+
+type PlatformIconButtonBaseProps = {
+  label: string;
+  icon: ReactNode;
+  children?: ReactNode;
+  variant?: PlatformIconButtonVariant;
+};
+
+type PlatformIconButtonButtonProps = Omit<
+  IconButtonProps,
+  'variant' | 'children'
+> &
+  PlatformIconButtonBaseProps & {
+    asChild?: false;
+  };
+
+type PlatformIconButtonLabelProps = Omit<
+  LabelHTMLAttributes<HTMLLabelElement>,
+  'aria-label' | 'children'
+> &
+  PlatformIconButtonBaseProps & {
+    asChild: 'label';
+  };
+
+type PlatformIconButtonSpanButtonProps = Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  'aria-label' | 'children' | 'role'
+> &
+  PlatformIconButtonBaseProps & {
+    asChild: 'spanButton';
+    disabled?: boolean;
+  };
+
+export type PlatformIconButtonProps =
+  | PlatformIconButtonButtonProps
+  | PlatformIconButtonLabelProps
+  | PlatformIconButtonSpanButtonProps;
+
+const variantClassName: Record<PlatformIconButtonVariant, string> = {
+  platformIcon: 'genarrative-ui-icon-button--surface-platform',
+  surfaceFloating: 'genarrative-ui-icon-button--surface-floating',
+  darkMini: 'genarrative-ui-icon-button--surface-dark-mini',
+};
+
+export const PlatformIconButton = forwardRef<
+  HTMLButtonElement | HTMLLabelElement | HTMLSpanElement,
+  PlatformIconButtonProps
+>(function PlatformIconButton(
+  {
+    label,
+    icon,
+    children,
+    variant = 'platformIcon',
+    title,
+    className,
+    asChild,
+    ...actionProps
+  },
+  ref,
+) {
+  const resolvedVariant = variant === 'darkMini' ? 'quiet' : 'default';
+  const actionClassName = [
+    'genarrative-ui-icon-button',
+    `genarrative-ui-icon-button--${resolvedVariant}`,
+    variantClassName[variant],
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  if (asChild === 'label') {
+    return (
+      <label
+        {...(actionProps as LabelHTMLAttributes<HTMLLabelElement>)}
+        ref={ref as Ref<HTMLLabelElement>}
+        title={title}
+        className={`${actionClassName} genarrative-ui-icon-button--md`}
+      >
+        <span className="genarrative-ui-visually-hidden">{label}</span>
+        {icon}
+        {children}
+      </label>
+    );
+  }
+
+  if (asChild === 'spanButton') {
+    const { disabled, onClick, onKeyDown, tabIndex, ...spanProps } =
+      actionProps as HTMLAttributes<HTMLSpanElement> & {
+        disabled?: boolean;
+      };
+    const handleKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || disabled) return;
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        event.currentTarget.click();
+      }
+    };
+
+    return (
+      <span
+        {...spanProps}
+        ref={ref as Ref<HTMLSpanElement>}
+        aria-disabled={disabled || undefined}
+        aria-label={label}
+        className={`${actionClassName} genarrative-ui-icon-button--md`}
+        onClick={disabled ? undefined : onClick}
+        onKeyDown={handleKeyDown}
+        role="button"
+        tabIndex={disabled ? -1 : (tabIndex ?? 0)}
+        title={title ?? label}
+      >
+        {icon}
+        {children}
+      </span>
+    );
+  }
+
+  const { type = 'button', ...buttonProps } =
+    actionProps as ButtonHTMLAttributes<HTMLButtonElement>;
+  return (
+    <IconButton
+      {...buttonProps}
+      ref={ref as Ref<HTMLButtonElement>}
+      type={type}
+      label={label}
+      icon={icon}
+      children={children}
+      variant={resolvedVariant}
+      className={actionClassName}
+      title={title ?? label}
+    />
+  );
+});
diff --git a/packages/shared/src/components/PlatformModal.tsx b/packages/shared/src/components/PlatformModal.tsx
new file mode 100644
index 000000000..51b767f7a
--- /dev/null
+++ b/packages/shared/src/components/PlatformModal.tsx
@@ -0,0 +1,2 @@
+export type { ModalProps as PlatformModalProps } from './ui';
+export { Modal as PlatformModal } from './ui';
diff --git a/packages/shared/src/components/PlatformPillBadge.tsx b/packages/shared/src/components/PlatformPillBadge.tsx
new file mode 100644
index 000000000..4f30717bc
--- /dev/null
+++ b/packages/shared/src/components/PlatformPillBadge.tsx
@@ -0,0 +1,5 @@
+export type {
+  BadgeProps as PlatformPillBadgeProps,
+  BadgeTone as PlatformPillBadgeTone,
+} from './ui';
+export { Badge as PlatformPillBadge } from './ui';
diff --git a/packages/shared/src/components/PlatformStatus.tsx b/packages/shared/src/components/PlatformStatus.tsx
new file mode 100644
index 000000000..fbf457942
--- /dev/null
+++ b/packages/shared/src/components/PlatformStatus.tsx
@@ -0,0 +1,5 @@
+export type {
+  StatusProps as PlatformStatusProps,
+  StatusTone as PlatformStatusTone,
+} from './ui';
+export { Status as PlatformStatus } from './ui';
diff --git a/packages/shared/src/components/PlatformStatusMessage.tsx b/packages/shared/src/components/PlatformStatusMessage.tsx
new file mode 100644
index 000000000..4f3bf144d
--- /dev/null
+++ b/packages/shared/src/components/PlatformStatusMessage.tsx
@@ -0,0 +1,5 @@
+export type {
+  StatusProps as PlatformStatusMessageProps,
+  StatusTone as PlatformStatusMessageTone,
+} from './ui';
+export { Status as PlatformStatusMessage } from './ui';
diff --git a/packages/shared/src/components/PlatformSubpanel.tsx b/packages/shared/src/components/PlatformSubpanel.tsx
new file mode 100644
index 000000000..b3a09f06b
--- /dev/null
+++ b/packages/shared/src/components/PlatformSubpanel.tsx
@@ -0,0 +1,2 @@
+export type { SubpanelProps as PlatformSubpanelProps } from './ui';
+export { Subpanel as PlatformSubpanel } from './ui';
diff --git a/packages/shared/src/components/PlatformTextField.tsx b/packages/shared/src/components/PlatformTextField.tsx
new file mode 100644
index 000000000..2c6ad9b2f
--- /dev/null
+++ b/packages/shared/src/components/PlatformTextField.tsx
@@ -0,0 +1,8 @@
+export type {
+  SelectFieldProps as PlatformSelectFieldProps,
+  TextFieldProps as PlatformTextFieldProps,
+} from './ui';
+export {
+  SelectField as PlatformSelectField,
+  TextField as PlatformTextField,
+} from './ui';
diff --git a/packages/shared/src/components/account.ts b/packages/shared/src/components/account.ts
new file mode 100644
index 000000000..afd42f80b
--- /dev/null
+++ b/packages/shared/src/components/account.ts
@@ -0,0 +1,5 @@
+// Account surfaces are kept in a separate barrel because they accept account
+// DTOs. They are shared adapters, not part of the business-neutral UI chrome.
+export * from './PlatformMudPointWalletEntry';
+export * from './PlatformProfileRechargeModal';
+export * from './PlatformProfileWalletLedgerModal';
diff --git a/packages/shared/src/components/index.ts b/packages/shared/src/components/index.ts
new file mode 100644
index 000000000..7f2accb88
--- /dev/null
+++ b/packages/shared/src/components/index.ts
@@ -0,0 +1,125 @@
+export type {
+  PlatformActionButtonAlign,
+  PlatformActionButtonProps,
+  PlatformActionButtonShape,
+  PlatformActionButtonSize,
+  PlatformActionButtonSurface,
+  PlatformActionButtonTone,
+} from './PlatformActionButton';
+export { PlatformActionButton } from './PlatformActionButton';
+export type { PlatformBadgeProps, PlatformBadgeTone } from './PlatformBadge';
+export { PlatformBadge } from './PlatformBadge';
+export type { PlatformEmptyStateProps } from './PlatformEmptyState';
+export { PlatformEmptyState } from './PlatformEmptyState';
+export type {
+  PlatformIconButtonProps,
+  PlatformIconButtonSize,
+  PlatformIconButtonVariant,
+} from './PlatformIconButton';
+export { PlatformIconButton } from './PlatformIconButton';
+export type { PlatformModalProps } from './PlatformModal';
+export { PlatformModal } from './PlatformModal';
+export type {
+  PlatformPillBadgeProps,
+  PlatformPillBadgeTone,
+} from './PlatformPillBadge';
+export { PlatformPillBadge } from './PlatformPillBadge';
+export type { PlatformStatusProps, PlatformStatusTone } from './PlatformStatus';
+export { PlatformStatus } from './PlatformStatus';
+export type {
+  PlatformStatusMessageProps,
+  PlatformStatusMessageTone,
+} from './PlatformStatusMessage';
+export { PlatformStatusMessage } from './PlatformStatusMessage';
+export type { PlatformSubpanelProps } from './PlatformSubpanel';
+export { PlatformSubpanel } from './PlatformSubpanel';
+export type {
+  PlatformSelectFieldProps,
+  PlatformTextFieldProps,
+} from './PlatformTextField';
+export { PlatformSelectField, PlatformTextField } from './PlatformTextField';
+export type {
+  BadgeProps,
+  BadgeTone,
+  ButtonProps,
+  EmptyStateProps,
+  IconButtonProps,
+  IconButtonSize,
+  IconButtonVariant,
+  ModalProps,
+  ProgressBarProps,
+  SegmentedTabItem,
+  SegmentedTabsProps,
+  SelectFieldProps,
+  SharedButtonSize,
+  SharedButtonVariant,
+  StatusProps,
+  StatusTone,
+  SubpanelProps,
+  SwitchProps,
+  TextFieldProps,
+} from './ui';
+export {
+  Badge,
+  Button,
+  Divider,
+  EmptyState,
+  IconButton,
+  Modal,
+  ProgressBar,
+  SegmentedTabs,
+  SelectField,
+  Spinner,
+  Status,
+  Subpanel,
+  Switch,
+  TextField,
+} from './ui';
+export type { BadgeProps as ShadcnBadgeProps } from './ui/badge';
+export { badgeVariants, Badge as ShadcnBadge } from './ui/badge';
+export type {
+  ButtonProps as ShadcnButtonProps,
+  ShadcnButtonSize,
+  ShadcnButtonVariant,
+} from './ui/button';
+export { buttonVariants, Button as ShadcnButton } from './ui/button';
+export type { CardProps } from './ui/card';
+export { Card, CardActions, CardHeader, CardTitle } from './ui/card';
+export type { SharedDialogProps } from './ui/dialog';
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from './ui/dialog';
+export type { InputProps } from './ui/input';
+export { Input, inputVariants } from './ui/input';
+export type { SharedSwitchProps } from './ui/switch';
+export { SwitchRoot, SwitchThumb } from './ui/switch';
+export { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
+export type { TextareaProps } from './ui/textarea';
+export { Textarea } from './ui/textarea';
+
+// Additional platform-prefixed aliases make the package discoverable beside
+// existing application adapters while keeping the public API product-neutral.
+export type {
+  ButtonProps as PlatformButtonProps,
+  ProgressBarProps as PlatformProgressBarProps,
+  SegmentedTabItem as PlatformSegmentedTabItem,
+  SegmentedTabsProps as PlatformSegmentedTabsProps,
+  SwitchProps as PlatformSwitchProps,
+} from './ui';
+export {
+  Button as PlatformButton,
+  Divider as PlatformDivider,
+  ProgressBar as PlatformProgressBar,
+  SegmentedTabs as PlatformSegmentedTabs,
+  Spinner as PlatformSpinner,
+  Switch as PlatformSwitch,
+} from './ui';
diff --git a/packages/shared/src/components/styles.css b/packages/shared/src/components/styles.css
new file mode 100644
index 000000000..65143face
--- /dev/null
+++ b/packages/shared/src/components/styles.css
@@ -0,0 +1,831 @@
+/*
+ * Shared token CSS for the shadcn-owned UI source. Hosts only need to import
+ * this file and theme.css; no application layout, business selector, or
+ * Tailwind preset is pulled into the consuming app.
+ */
+.genarrative-ui {
+  --genarrative-ui-focus-ring: var(
+    --platform-input-focus-ring,
+    rgba(204, 117, 76, 0.24)
+  );
+  color: var(--platform-text-strong, #3d1f10);
+  font-family: var(
+    --platform-font-family,
+    Inter,
+    'Noto Sans CJK SC',
+    'PingFang SC',
+    system-ui,
+    sans-serif
+  );
+}
+
+.genarrative-ui *,
+.genarrative-ui *::before,
+.genarrative-ui *::after {
+  box-sizing: border-box;
+}
+
+.genarrative-ui-button,
+.genarrative-ui-icon-button,
+.genarrative-ui-tabs__item,
+.genarrative-ui-switch {
+  font: inherit;
+}
+
+.genarrative-ui-button {
+  display: inline-flex;
+  min-height: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 1px solid transparent;
+  border-radius: 0.75rem;
+  padding: 0 1rem;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    transform 160ms ease,
+    box-shadow 160ms ease,
+    background-color 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease,
+    opacity 160ms ease;
+}
+
+.genarrative-ui-button--sm {
+  min-height: 2.125rem;
+  border-radius: 0.625rem;
+  padding-inline: 0.75rem;
+  font-size: 0.8125rem;
+}
+
+.genarrative-ui-button--md {
+  min-height: 2.5rem;
+  font-size: 0.875rem;
+}
+
+.genarrative-ui-button--lg {
+  min-height: 2.875rem;
+  border-radius: 0.875rem;
+  padding-inline: 1.25rem;
+  font-size: 0.9375rem;
+}
+
+.genarrative-ui-button--full-width {
+  width: 100%;
+}
+
+.genarrative-ui-button--pill {
+  border-radius: 999px;
+}
+
+.genarrative-ui-button--start {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.genarrative-ui-button--primary {
+  border-color: var(--platform-button-primary-border, rgba(182, 98, 63, 0.32));
+  background: var(--platform-button-primary-fill, #c7653d);
+  color: var(--platform-button-primary-text, #fffaf5);
+  box-shadow: var(
+    --platform-profile-action-shadow,
+    0 8px 18px rgba(182, 98, 63, 0.18)
+  );
+}
+
+.genarrative-ui-button--secondary {
+  border-color: var(--platform-surface-border, rgba(226, 203, 184, 0.88));
+  background: var(--platform-button-secondary-fill, rgba(255, 253, 250, 0.88));
+  color: var(--platform-button-secondary-text, #4b2412);
+}
+
+.genarrative-ui-button--ghost {
+  border-color: transparent;
+  background: transparent;
+  color: var(--platform-button-ghost-text, #755a49);
+}
+
+.genarrative-ui-button--danger {
+  border-color: var(--platform-button-danger-border, rgba(185, 75, 58, 0.24));
+  background: var(--platform-button-danger-fill, #fff0eb);
+  color: var(--platform-button-danger-text, #a6402f);
+}
+
+.genarrative-ui-button--tone-accent {
+  border-color: var(--platform-warm-border, rgba(204, 117, 76, 0.3));
+  background: var(--platform-warm-bg, rgba(234, 204, 179, 0.32));
+  color: var(--platform-warm-text, #b6623f);
+}
+
+.genarrative-ui-button--tone-accent-soft {
+  border-color: var(--platform-warm-border, rgba(204, 117, 76, 0.22));
+  background: transparent;
+  color: var(--platform-accent, #c7653d);
+}
+
+.genarrative-ui-button:not(:disabled):hover,
+.genarrative-ui-icon-button:not(:disabled):not([aria-disabled='true']):hover,
+.genarrative-ui-tabs__item:not(:disabled):hover,
+.genarrative-ui-switch:not(:disabled):hover {
+  transform: translateY(-1px);
+}
+
+.genarrative-ui-button:not(:disabled):active,
+.genarrative-ui-icon-button:not(:disabled):not([aria-disabled='true']):active,
+.genarrative-ui-tabs__item:not(:disabled):active,
+.genarrative-ui-switch:not(:disabled):active {
+  transform: translateY(1px);
+  transition-duration: 80ms;
+}
+
+.genarrative-ui-button:not(:disabled):active {
+  filter: brightness(0.97);
+  box-shadow: inset 0 2px 4px rgba(50, 22, 8, 0.14);
+}
+
+.genarrative-ui-button--primary:not(:disabled):active {
+  filter: brightness(0.94);
+  box-shadow:
+    inset 0 2px 4px rgba(50, 22, 8, 0.2),
+    0 3px 8px rgba(182, 98, 63, 0.16);
+}
+
+.genarrative-ui-icon-button:not(:disabled):not([aria-disabled='true']):active {
+  background: var(--platform-icon-active-fill, rgba(238, 208, 183, 0.42));
+  box-shadow: inset 0 2px 4px rgba(50, 22, 8, 0.12);
+}
+
+.genarrative-ui-icon-button--quiet:not(:disabled):not(
+    [aria-disabled='true']
+  ):active {
+  background: var(--platform-button-ghost-fill, rgba(255, 253, 250, 0.56));
+}
+
+.genarrative-ui-tabs__item:not(:disabled):active {
+  background: var(--platform-warm-bg, rgba(234, 204, 179, 0.32));
+  box-shadow: inset 0 2px 4px rgba(50, 22, 8, 0.1);
+}
+
+.genarrative-ui-switch:not(:disabled):active {
+  color: var(--platform-text-strong, #3d1f10);
+}
+
+.genarrative-ui-switch:not(:disabled):active .genarrative-ui-switch__track {
+  filter: brightness(0.94);
+}
+
+.genarrative-ui-button--primary:not(:disabled):hover {
+  filter: brightness(1.04);
+  box-shadow: 0 12px 24px rgba(182, 98, 63, 0.24);
+}
+
+.genarrative-ui-button:focus-visible,
+.genarrative-ui-icon-button:focus-visible,
+.genarrative-ui-tabs__item:focus-visible,
+.genarrative-ui-switch:focus-visible,
+.genarrative-ui-text-field__control:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--genarrative-ui-focus-ring);
+}
+
+.genarrative-ui-button:disabled,
+.genarrative-ui-icon-button:disabled,
+.genarrative-ui-icon-button[aria-disabled='true'],
+.genarrative-ui-tabs__item:disabled,
+.genarrative-ui-switch:disabled {
+  cursor: not-allowed;
+  opacity: 0.52;
+}
+
+.genarrative-ui-spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  flex: 0 0 auto;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: genarrative-ui-spin 700ms linear infinite;
+}
+
+@keyframes genarrative-ui-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.genarrative-ui-icon-button {
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 1px solid var(--platform-icon-border, rgba(226, 203, 184, 0.72));
+  border-radius: 0.75rem;
+  background: var(--platform-icon-fill, rgba(255, 253, 250, 0.86));
+  color: var(--platform-icon-text, #7b5c49);
+  cursor: pointer;
+  transition:
+    transform 160ms ease,
+    background-color 160ms ease,
+    color 160ms ease,
+    opacity 160ms ease;
+}
+
+.genarrative-ui-icon-button--sm {
+  width: 2rem;
+  height: 2rem;
+  font-size: 1.1rem;
+}
+
+.genarrative-ui-icon-button--md {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 1.2rem;
+}
+
+.genarrative-ui-icon-button--lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.35rem;
+}
+
+.genarrative-ui-icon-button--quiet {
+  border-color: transparent;
+  background: transparent;
+}
+
+.genarrative-ui-icon-button--danger {
+  border-color: var(--platform-button-danger-border, rgba(185, 75, 58, 0.24));
+  background: var(--platform-button-danger-fill, #fff0eb);
+  color: var(--platform-button-danger-text, #a6402f);
+}
+
+.genarrative-ui-icon-button--surface-floating {
+  border-color: rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, 0.94);
+  color: var(--platform-text-strong, #3d1f10);
+  box-shadow: 0 0.35rem 1rem rgba(50, 22, 8, 0.12);
+  backdrop-filter: blur(8px);
+}
+
+.genarrative-ui-icon-button--surface-dark-mini {
+  border-color: rgba(255, 255, 255, 0.16);
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+}
+
+.genarrative-ui-icon-button--surface-dark-mini:not(:disabled):hover {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.genarrative-ui-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.genarrative-ui-text-field {
+  display: grid;
+  min-width: 0;
+  gap: 0.45rem;
+  color: var(--platform-text-base, #6f5848);
+  font-size: 0.875rem;
+  font-weight: 650;
+}
+
+.genarrative-ui-text-field__label {
+  color: var(--platform-text-strong, #3d1f10);
+  font-weight: 750;
+}
+
+.genarrative-ui-text-field__control-wrap {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  align-items: center;
+}
+
+.genarrative-ui-text-field__control {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--platform-subpanel-border, rgba(226, 203, 184, 0.82));
+  border-radius: 0.75rem;
+  background: var(--platform-input-fill, rgba(255, 253, 250, 0.94));
+  color: var(--platform-text-strong, #3d1f10);
+  font: inherit;
+  font-weight: 500;
+  line-height: 1.4;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.genarrative-ui-text-field__control--sm {
+  min-height: 2.125rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+}
+
+.genarrative-ui-text-field__control--md {
+  min-height: 2.5rem;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+}
+
+.genarrative-ui-text-field__control--lg {
+  min-height: 2.875rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.9375rem;
+}
+
+textarea.genarrative-ui-text-field__control {
+  min-height: 7rem;
+  resize: vertical;
+}
+
+.genarrative-ui-text-field__control:focus {
+  border-color: var(--platform-surface-hover-border, rgba(204, 117, 76, 0.52));
+  background: var(--platform-input-fill-focus, #fff);
+}
+
+.genarrative-ui-text-field__control--error {
+  border-color: var(--platform-button-danger-text, #a6402f);
+}
+
+.genarrative-ui-text-field__slot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--platform-text-soft, #988476);
+}
+
+.genarrative-ui-text-field__control-wrap
+  > .genarrative-ui-text-field__slot:first-child {
+  margin-right: -2rem;
+  z-index: 1;
+  width: 2rem;
+  pointer-events: none;
+}
+
+.genarrative-ui-text-field__control-wrap
+  > .genarrative-ui-text-field__slot:last-child {
+  margin-left: -2rem;
+  z-index: 1;
+  width: 2rem;
+  pointer-events: none;
+}
+
+.genarrative-ui-text-field__control-wrap
+  > .genarrative-ui-text-field__slot:first-child
+  ~ .genarrative-ui-text-field__control {
+  padding-left: 2.25rem;
+}
+
+.genarrative-ui-text-field__hint,
+.genarrative-ui-text-field__error {
+  font-size: 0.75rem;
+  font-weight: 550;
+}
+
+.genarrative-ui-text-field__hint {
+  color: var(--platform-text-soft, #988476);
+}
+
+.genarrative-ui-text-field__error {
+  color: var(--platform-button-danger-text, #a6402f);
+}
+
+.genarrative-ui-subpanel {
+  border: 1px solid var(--platform-subpanel-border, rgba(226, 203, 184, 0.82));
+  border-radius: 1rem;
+  background: var(--platform-subpanel-fill, rgba(255, 254, 252, 0.94));
+  color: var(--platform-text-base, #6f5848);
+}
+
+.genarrative-ui-subpanel--soft {
+  background: var(--platform-panel-fill-soft, rgba(255, 254, 252, 0.9));
+}
+
+.genarrative-ui-subpanel--contrast {
+  border-color: var(--platform-surface-border, rgba(226, 203, 184, 0.82));
+  background: var(--platform-panel-fill, #fff);
+}
+
+.genarrative-ui-subpanel--padding-sm {
+  padding: 0.75rem;
+}
+
+.genarrative-ui-subpanel--padding-md {
+  padding: 1rem;
+}
+
+.genarrative-ui-subpanel--padding-lg {
+  padding: 1.25rem;
+}
+
+.genarrative-ui-subpanel--padding-none {
+  padding: 0;
+}
+
+.genarrative-ui-subpanel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.875rem;
+}
+
+.genarrative-ui-subpanel__title {
+  min-width: 0;
+  margin: 0;
+  color: var(--platform-text-strong, #3d1f10);
+  font-size: 0.9375rem;
+  font-weight: 800;
+}
+
+.genarrative-ui-subpanel__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.genarrative-ui-modal__backdrop {
+  position: fixed;
+  z-index: 1000;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: var(--platform-overlay-fill, rgba(21, 12, 7, 0.48));
+  backdrop-filter: blur(10px);
+}
+
+.genarrative-ui-modal__panel {
+  display: flex;
+  width: min(100%, 38rem);
+  max-height: min(90vh, 50rem);
+  flex-direction: column;
+  overflow: auto;
+  border: 1px solid var(--platform-modal-border, rgba(255, 255, 255, 0.58));
+  border-radius: 1.25rem;
+  background: var(--platform-modal-fill, #fff);
+  color: var(--platform-text-strong, #3d1f10);
+  box-shadow: 0 24px 72px rgba(50, 22, 8, 0.24);
+}
+
+.genarrative-ui-modal__panel--sm {
+  width: min(100%, 26rem);
+}
+
+.genarrative-ui-modal__panel--lg {
+  width: min(100%, 54rem);
+}
+
+.genarrative-ui-modal__header,
+.genarrative-ui-modal__footer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+}
+
+.genarrative-ui-modal__header {
+  border-bottom: 1px solid var(--platform-line-soft, rgba(226, 203, 184, 0.72));
+}
+
+.genarrative-ui-modal__footer {
+  align-items: center;
+  border-top: 1px solid var(--platform-line-soft, rgba(226, 203, 184, 0.72));
+}
+
+.genarrative-ui-modal__title {
+  margin: 0;
+  color: var(--platform-text-strong, #3d1f10);
+  font-size: 1.05rem;
+  font-weight: 850;
+}
+
+.genarrative-ui-modal__description {
+  margin: 0.35rem 0 0;
+  color: var(--platform-text-soft, #988476);
+  font-size: 0.8rem;
+}
+
+.genarrative-ui-modal__body {
+  min-height: 0;
+  padding: 1.25rem;
+  overflow: auto;
+}
+
+.genarrative-ui-empty-state {
+  display: grid;
+  min-height: 10rem;
+  place-items: center;
+  align-content: center;
+  gap: 0.5rem;
+  border: 1px dashed var(--platform-subpanel-border, rgba(226, 203, 184, 0.82));
+  border-radius: 1rem;
+  padding: 1.5rem;
+  text-align: center;
+  color: var(--platform-text-soft, #988476);
+}
+
+.genarrative-ui-empty-state__icon {
+  display: grid;
+  width: 2.5rem;
+  height: 2.5rem;
+  place-items: center;
+  border-radius: 50%;
+  background: var(--platform-neutral-bg, rgba(255, 253, 250, 0.7));
+  color: var(--platform-accent, #c7653d);
+}
+
+.genarrative-ui-empty-state h2,
+.genarrative-ui-empty-state p {
+  margin: 0;
+}
+
+.genarrative-ui-empty-state h2 {
+  color: var(--platform-text-strong, #3d1f10);
+  font-size: 0.95rem;
+}
+
+.genarrative-ui-empty-state p {
+  max-width: 34rem;
+  font-size: 0.8rem;
+}
+
+.genarrative-ui-empty-state__action {
+  margin-top: 0.35rem;
+}
+
+.genarrative-ui-status {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  border: 1px solid var(--platform-subpanel-border, rgba(226, 203, 184, 0.82));
+  border-radius: 0.75rem;
+  padding: 0.75rem 0.875rem;
+  color: var(--platform-text-base, #6f5848);
+  font-size: 0.8125rem;
+  line-height: 1.45;
+}
+
+.genarrative-ui-status__icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: currentColor;
+}
+
+.genarrative-ui-status--neutral {
+  background: var(--platform-neutral-bg, rgba(255, 253, 250, 0.7));
+}
+
+.genarrative-ui-status--info {
+  border-color: var(--platform-cool-border, rgba(199, 117, 76, 0.24));
+  background: var(--platform-cool-bg, rgba(238, 208, 183, 0.26));
+  color: var(--platform-cool-text, #b76038);
+}
+
+.genarrative-ui-status--success {
+  border-color: var(--platform-success-border, rgba(73, 144, 96, 0.24));
+  background: var(--platform-success-bg, rgba(237, 248, 239, 0.92));
+  color: var(--platform-success-text, #2f7b46);
+}
+
+.genarrative-ui-status--warning {
+  border-color: var(--platform-warm-border, rgba(204, 117, 76, 0.28));
+  background: var(--platform-warm-bg, rgba(234, 204, 179, 0.32));
+  color: var(--platform-warm-text, #b6623f);
+}
+
+.genarrative-ui-status--error {
+  border-color: var(--platform-button-danger-border, rgba(185, 75, 58, 0.22));
+  background: var(--platform-button-danger-fill, #ffede5);
+  color: var(--platform-button-danger-text, #a6402f);
+}
+
+.genarrative-ui-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  border: 1px solid var(--platform-neutral-border, rgba(226, 203, 184, 0.44));
+  border-radius: 999px;
+  font-weight: 750;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.genarrative-ui-badge--sm {
+  min-height: 1.5rem;
+  padding: 0.25rem 0.55rem;
+  font-size: 0.6875rem;
+}
+
+.genarrative-ui-badge--md {
+  min-height: 1.875rem;
+  padding: 0.35rem 0.7rem;
+  font-size: 0.8125rem;
+}
+
+.genarrative-ui-badge--neutral {
+  background: var(--platform-neutral-bg, rgba(255, 253, 250, 0.7));
+  color: var(--platform-neutral-text, #7b6150);
+}
+
+.genarrative-ui-badge--accent {
+  border-color: var(--platform-warm-border, rgba(204, 117, 76, 0.28));
+  background: var(--platform-warm-bg, rgba(234, 204, 179, 0.32));
+  color: var(--platform-warm-text, #b6623f);
+}
+
+.genarrative-ui-badge--success {
+  border-color: var(--platform-success-border, rgba(73, 144, 96, 0.24));
+  background: var(--platform-success-bg, rgba(237, 248, 239, 0.92));
+  color: var(--platform-success-text, #2f7b46);
+}
+
+.genarrative-ui-badge--warning {
+  border-color: var(--platform-warm-border, rgba(204, 117, 76, 0.28));
+  background: var(--platform-warm-bg, rgba(234, 204, 179, 0.32));
+  color: var(--platform-warm-text, #b6623f);
+}
+
+.genarrative-ui-badge--danger {
+  border-color: var(--platform-button-danger-border, rgba(185, 75, 58, 0.22));
+  background: var(--platform-button-danger-fill, #ffede5);
+  color: var(--platform-button-danger-text, #a6402f);
+}
+
+.genarrative-ui-badge--info {
+  border-color: var(--platform-cool-border, rgba(199, 117, 76, 0.24));
+  background: var(--platform-cool-bg, rgba(238, 208, 183, 0.26));
+  color: var(--platform-cool-text, #b76038);
+}
+
+.genarrative-ui-progress {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.genarrative-ui-progress__track {
+  position: relative;
+  height: 0.5rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--platform-track-fill, rgba(255, 253, 250, 0.9));
+}
+
+.genarrative-ui-progress__fill {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--platform-button-primary-fill, #c7653d);
+  transition: width 220ms ease;
+}
+
+.genarrative-ui-progress__track--indeterminate .genarrative-ui-progress__fill {
+  width: 42%;
+  animation: genarrative-ui-progress 1.2s ease-in-out infinite;
+}
+
+@keyframes genarrative-ui-progress {
+  from {
+    transform: translateX(-110%);
+  }
+  to {
+    transform: translateX(260%);
+  }
+}
+
+.genarrative-ui-progress__label {
+  color: var(--platform-text-soft, #988476);
+  font-size: 0.75rem;
+}
+
+.genarrative-ui-tabs {
+  display: flex;
+  min-width: 0;
+  gap: 0.25rem;
+  overflow-x: auto;
+  border: 1px solid var(--platform-subpanel-border, rgba(226, 203, 184, 0.82));
+  border-radius: 0.875rem;
+  padding: 0.25rem;
+  background: var(--platform-neutral-bg, rgba(255, 253, 250, 0.7));
+}
+
+.genarrative-ui-tabs__item {
+  min-height: 2.125rem;
+  flex: 1 0 auto;
+  border: 0;
+  border-radius: 0.625rem;
+  background: transparent;
+  padding: 0 0.875rem;
+  color: var(--platform-text-base, #6f5848);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition:
+    transform 160ms ease,
+    background-color 160ms ease,
+    color 160ms ease,
+    opacity 160ms ease;
+}
+
+.genarrative-ui-tabs__item--active {
+  background: var(--platform-panel-fill, #fff);
+  color: var(--platform-text-strong, #3d1f10);
+  box-shadow: 0 2px 8px rgba(112, 57, 30, 0.1);
+}
+
+.genarrative-ui-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  color: var(--platform-text-base, #6f5848);
+  font-size: 0.875rem;
+  font-weight: 650;
+  cursor: pointer;
+  text-align: left;
+  transition:
+    transform 160ms ease,
+    opacity 160ms ease;
+}
+
+.genarrative-ui-switch__track {
+  position: relative;
+  display: inline-flex;
+  width: 2.75rem;
+  height: 1.625rem;
+  align-items: center;
+  border-radius: 999px;
+  background: var(--platform-neutral-border, rgba(226, 203, 184, 0.7));
+  padding: 0.1875rem;
+  transition: background-color 160ms ease;
+}
+
+.genarrative-ui-switch__thumb {
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(50, 22, 8, 0.2);
+  transition: transform 160ms ease;
+}
+
+.genarrative-ui-switch--checked .genarrative-ui-switch__track {
+  background: var(
+    --platform-button-primary-solid,
+    var(--platform-accent, #c7653d)
+  );
+}
+
+.genarrative-ui-switch--checked .genarrative-ui-switch__thumb {
+  transform: translateX(1.125rem);
+}
+
+.genarrative-ui-divider {
+  height: 1px;
+  border: 0;
+  background: var(--platform-line-soft, rgba(226, 203, 184, 0.72));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .genarrative-ui-button,
+  .genarrative-ui-icon-button,
+  .genarrative-ui-tabs__item,
+  .genarrative-ui-switch,
+  .genarrative-ui-progress__fill,
+  .genarrative-ui-spinner {
+    transition: none;
+    animation: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .genarrative-ui-modal__backdrop {
+    align-items: flex-end;
+    padding: 0;
+  }
+
+  .genarrative-ui-modal__panel,
+  .genarrative-ui-modal__panel--sm,
+  .genarrative-ui-modal__panel--lg {
+    width: 100%;
+    max-height: 92vh;
+    border-radius: 1.25rem 1.25rem 0 0;
+  }
+}
diff --git a/packages/shared/src/components/ui.test.tsx b/packages/shared/src/components/ui.test.tsx
new file mode 100644
index 000000000..2dfbd9038
--- /dev/null
+++ b/packages/shared/src/components/ui.test.tsx
@@ -0,0 +1,165 @@
+/* @vitest-environment jsdom */
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, test, vi } from 'vitest';
+
+import {
+  Badge,
+  Button,
+  EmptyState,
+  IconButton,
+  Modal,
+  PlatformActionButton,
+  PlatformIconButton,
+  ProgressBar,
+  SegmentedTabs,
+  SelectField,
+  Status,
+  Subpanel,
+  Switch,
+  TextField,
+} from './index';
+
+describe('shared UI components', () => {
+  test('keeps native button semantics and states', () => {
+    const onClick = vi.fn();
+    render(
+      <div className="genarrative-ui">
+        <Button onClick={onClick}>保存</Button>
+        <Button loading>稍等</Button>
+        <IconButton label="关闭" icon="×" />
+      </div>,
+    );
+
+    const button = screen.getByRole('button', { name: '保存' });
+    expect(button.getAttribute('type')).toBe('button');
+    fireEvent.click(button);
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(
+      (screen.getByRole('button', { name: '稍等' }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true);
+    expect(
+      screen.getByRole('button', { name: '关闭' }).getAttribute('title'),
+    ).toBe('关闭');
+  });
+
+  test('connects field labels and descriptions to native controls', () => {
+    render(
+      <div className="genarrative-ui">
+        <TextField label="名称" hint="最多 20 字" error="名称已存在" />
+        <TextField label="描述" multiline />
+        <SelectField label="主题" hint="选择颜色">
+          <option value="warm">暖色</option>
+        </SelectField>
+      </div>,
+    );
+
+    const input = screen.getByLabelText('名称');
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+    expect(input.getAttribute('aria-describedby')).toContain('hint');
+    expect(screen.getByLabelText('描述').tagName).toBe('TEXTAREA');
+    expect(screen.getByLabelText('主题').tagName).toBe('SELECT');
+    expect(screen.getByRole('alert').textContent).toContain('名称已存在');
+  });
+
+  test('renders slots, selected tabs and semantic status content', () => {
+    const onChange = vi.fn();
+    render(
+      <div className="genarrative-ui">
+        <Subpanel title="设置" actions={<Badge>稳定</Badge>}>
+          内容
+        </Subpanel>
+        <Status tone="success" icon="✓">
+          完成
+        </Status>
+        <EmptyState title="暂无内容" />
+        <ProgressBar value={140} label="进度" />
+        <SegmentedTabs
+          items={[
+            { id: 'a', label: 'A' },
+            { id: 'b', label: 'B' },
+          ]}
+          activeId="a"
+          onChange={onChange}
+          label="分区"
+        />
+        <Switch checked label="启用" />
+      </div>,
+    );
+
+    expect(screen.getByRole('heading', { name: '设置' })).toBeTruthy();
+    expect(screen.getByRole('status').textContent).toContain('完成');
+    expect(screen.getByRole('progressbar').getAttribute('aria-valuenow')).toBe(
+      '100',
+    );
+    expect(
+      screen.getByRole('tab', { name: 'A' }).getAttribute('aria-selected'),
+    ).toBe('true');
+    fireEvent.click(screen.getByRole('tab', { name: 'B' }));
+    expect(onChange).toHaveBeenCalledWith('b');
+    expect(
+      screen.getByRole('switch', { name: '启用' }).getAttribute('aria-checked'),
+    ).toBe('true');
+  });
+
+  test('closes modal on escape and backdrop click', () => {
+    const onClose = vi.fn();
+    render(
+      <Modal open title="确认" onClose={onClose}>
+        正文
+      </Modal>,
+    );
+
+    expect(screen.getByRole('dialog', { name: '确认' })).toBeTruthy();
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalledTimes(1);
+    fireEvent.mouseDown(
+      document.querySelector('.genarrative-ui-modal__backdrop')!,
+    );
+    expect(onClose).toHaveBeenCalledTimes(2);
+  });
+
+  test('can keep modal open when backdrop and escape closing are disabled', () => {
+    const onClose = vi.fn();
+    render(
+      <Modal
+        open
+        title="锁定"
+        onClose={onClose}
+        closeOnBackdrop={false}
+        closeOnEscape={false}
+      >
+        正文
+      </Modal>,
+    );
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+    fireEvent.mouseDown(
+      document.querySelector('.genarrative-ui-modal__backdrop')!,
+    );
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  test('keeps platform wrappers generic and supports label/span hosts', () => {
+    const onClick = vi.fn();
+    render(
+      <div className="genarrative-ui">
+        <PlatformActionButton asChild="label" htmlFor="upload" tone="accent">
+          上传
+        </PlatformActionButton>
+        <PlatformIconButton
+          asChild="spanButton"
+          label="打开"
+          icon="+"
+          onClick={onClick}
+        />
+      </div>,
+    );
+
+    expect(screen.getByText('上传').closest('label')?.htmlFor).toBe('upload');
+    const spanButton = screen.getByRole('button', { name: '打开' });
+    fireEvent.keyDown(spanButton, { key: 'Enter' });
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/shared/src/components/ui.tsx b/packages/shared/src/components/ui.tsx
new file mode 100644
index 000000000..a8baae281
--- /dev/null
+++ b/packages/shared/src/components/ui.tsx
@@ -0,0 +1,573 @@
+import {
+  type ButtonHTMLAttributes,
+  forwardRef,
+  type HTMLAttributes,
+  type InputHTMLAttributes,
+  type ReactNode,
+  type SelectHTMLAttributes,
+  type TextareaHTMLAttributes,
+  useId,
+} from 'react';
+
+import { Badge as ShadcnBadge } from './ui/badge';
+import {
+  Button as ShadcnButton,
+  type ButtonProps as ShadcnButtonProps,
+} from './ui/button';
+import { Card, CardActions, CardHeader, CardTitle } from './ui/card';
+import { SharedDialog, type SharedDialogProps } from './ui/dialog';
+import { Input } from './ui/input';
+import {
+  SharedSwitch as ShadcnSwitch,
+  type SharedSwitchProps,
+} from './ui/switch';
+import {
+  type SegmentedTabItem as ShadcnSegmentedTabItem,
+  SegmentedTabs as ShadcnSegmentedTabs,
+  type SegmentedTabsProps as ShadcnSegmentedTabsProps,
+} from './ui/tabs';
+import { Textarea } from './ui/textarea';
+
+/**
+ * The shared UI layer is deliberately headless with regard to product data.
+ * Components accept native props and slots only, so a web or Tauri host can
+ * provide its own business state and event handlers.
+ */
+
+export type SharedButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export type SharedButtonSize = 'sm' | 'md' | 'lg';
+
+export type ButtonProps = Omit<
+  ShadcnButtonProps,
+  'children' | 'variant' | 'size'
+> & {
+  children?: ReactNode;
+  variant?: SharedButtonVariant;
+  size?: SharedButtonSize;
+};
+
+function joinClassNames(
+  ...classNames: Array<string | false | null | undefined>
+) {
+  return classNames.filter(Boolean).join(' ');
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  ...props
+}: ButtonProps) {
+  return <ShadcnButton {...props} variant={variant} size={size} />;
+}
+
+export type IconButtonVariant = 'default' | 'quiet' | 'danger';
+export type IconButtonSize = 'sm' | 'md' | 'lg';
+
+export type IconButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'aria-label'
+> & {
+  label: string;
+  icon: ReactNode;
+  children?: ReactNode;
+  variant?: IconButtonVariant;
+  size?: IconButtonSize;
+};
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  function IconButton(
+    {
+      label,
+      icon,
+      children,
+      variant = 'default',
+      size = 'md',
+      className,
+      type = 'button',
+      ...buttonProps
+    },
+    ref,
+  ) {
+    return (
+      <button
+        {...buttonProps}
+        ref={ref}
+        type={type}
+        aria-label={label}
+        title={buttonProps.title ?? label}
+        className={joinClassNames(
+          'genarrative-ui-icon-button',
+          `genarrative-ui-icon-button--${variant}`,
+          `genarrative-ui-icon-button--${size}`,
+          className,
+        )}
+      >
+        {icon}
+        {children}
+      </button>
+    );
+  },
+);
+
+export type TextFieldProps =
+  | (Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+      multiline?: false;
+      label?: ReactNode;
+      hint?: ReactNode;
+      error?: ReactNode;
+      leading?: ReactNode;
+      trailing?: ReactNode;
+      size?: SharedButtonSize;
+      variant?: 'input' | 'textarea';
+    })
+  | (TextareaHTMLAttributes<HTMLTextAreaElement> & {
+      multiline: true;
+      label?: ReactNode;
+      hint?: ReactNode;
+      error?: ReactNode;
+      leading?: ReactNode;
+      trailing?: ReactNode;
+      size?: SharedButtonSize;
+      variant?: 'input' | 'textarea';
+    });
+
+export function TextField({
+  label,
+  hint,
+  error,
+  leading,
+  trailing,
+  className,
+  id: providedId,
+  'aria-label': providedAriaLabel,
+  'aria-labelledby': providedAriaLabelledBy,
+  'aria-describedby': providedAriaDescribedBy,
+  size = 'md',
+  multiline = false,
+  variant = 'input',
+  ...fieldProps
+}: TextFieldProps) {
+  const generatedId = useId();
+  const id = providedId ?? `genarrative-text-field-${generatedId}`;
+  const accessibleLabel = typeof label === 'string' ? label : undefined;
+  const hintId = hint ? `${id}-hint` : undefined;
+  const errorId = error ? `${id}-error` : undefined;
+  const describedBy =
+    [providedAriaDescribedBy, hintId, errorId].filter(Boolean).join(' ') ||
+    undefined;
+  const isMultiline = multiline || variant === 'textarea';
+  const inputClassName = joinClassNames(
+    'genarrative-ui-text-field__control',
+    `genarrative-ui-text-field__control--${size}`,
+    Boolean(error) && 'genarrative-ui-text-field__control--error',
+    className,
+  );
+
+  const control = isMultiline ? (
+    <Textarea
+      {...(fieldProps as TextareaHTMLAttributes<HTMLTextAreaElement>)}
+      id={id}
+      aria-label={accessibleLabel ?? providedAriaLabel}
+      aria-labelledby={providedAriaLabelledBy}
+      aria-invalid={Boolean(error) || undefined}
+      aria-describedby={describedBy}
+      size={size}
+      error={Boolean(error)}
+      className={inputClassName}
+    />
+  ) : (
+    <Input
+      {...(fieldProps as InputHTMLAttributes<HTMLInputElement>)}
+      id={id}
+      aria-label={accessibleLabel ?? providedAriaLabel}
+      aria-labelledby={providedAriaLabelledBy}
+      aria-invalid={Boolean(error) || undefined}
+      aria-describedby={describedBy}
+      size={size}
+      error={Boolean(error)}
+      className={inputClassName}
+    />
+  );
+
+  return (
+    <label className="genarrative-ui-text-field" htmlFor={id}>
+      {label ? (
+        <span className="genarrative-ui-text-field__label">{label}</span>
+      ) : null}
+      <span className="genarrative-ui-text-field__control-wrap">
+        {leading ? (
+          <span className="genarrative-ui-text-field__slot">{leading}</span>
+        ) : null}
+        {control}
+        {trailing ? (
+          <span className="genarrative-ui-text-field__slot">{trailing}</span>
+        ) : null}
+      </span>
+      {hint ? (
+        <span id={hintId} className="genarrative-ui-text-field__hint">
+          {hint}
+        </span>
+      ) : null}
+      {error ? (
+        <span
+          id={errorId}
+          className="genarrative-ui-text-field__error"
+          role="alert"
+        >
+          {error}
+        </span>
+      ) : null}
+    </label>
+  );
+}
+
+export type SelectFieldProps = Omit<
+  SelectHTMLAttributes<HTMLSelectElement>,
+  'size'
+> & {
+  label?: ReactNode;
+  hint?: ReactNode;
+  error?: ReactNode;
+  size?: SharedButtonSize;
+};
+
+export function SelectField({
+  label,
+  hint,
+  error,
+  className,
+  id: providedId,
+  'aria-label': providedAriaLabel,
+  'aria-labelledby': providedAriaLabelledBy,
+  'aria-describedby': providedAriaDescribedBy,
+  size = 'md',
+  ...selectProps
+}: SelectFieldProps) {
+  const generatedId = useId();
+  const id = providedId ?? `genarrative-select-field-${generatedId}`;
+  const accessibleLabel = typeof label === 'string' ? label : undefined;
+  const hintId = hint ? `${id}-hint` : undefined;
+  const errorId = error ? `${id}-error` : undefined;
+  return (
+    <label className="genarrative-ui-text-field" htmlFor={id}>
+      {label ? (
+        <span className="genarrative-ui-text-field__label">{label}</span>
+      ) : null}
+      <select
+        {...selectProps}
+        id={id}
+        aria-label={accessibleLabel ?? providedAriaLabel}
+        aria-labelledby={providedAriaLabelledBy}
+        aria-invalid={Boolean(error) || undefined}
+        aria-describedby={
+          [providedAriaDescribedBy, hintId, errorId]
+            .filter(Boolean)
+            .join(' ') || undefined
+        }
+        className={joinClassNames(
+          'genarrative-ui-text-field__control',
+          `genarrative-ui-text-field__control--${size}`,
+          Boolean(error) && 'genarrative-ui-text-field__control--error',
+          className,
+        )}
+      />
+      {hint ? (
+        <span id={hintId} className="genarrative-ui-text-field__hint">
+          {hint}
+        </span>
+      ) : null}
+      {error ? (
+        <span
+          id={errorId}
+          className="genarrative-ui-text-field__error"
+          role="alert"
+        >
+          {error}
+        </span>
+      ) : null}
+    </label>
+  );
+}
+
+export type SubpanelProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+  title?: ReactNode;
+  actions?: ReactNode;
+  children?: ReactNode;
+  as?: 'section' | 'div' | 'article' | 'aside';
+  tone?: 'default' | 'soft' | 'contrast';
+  padding?: 'sm' | 'md' | 'lg' | 'none';
+};
+
+export function Subpanel({
+  title,
+  actions,
+  children,
+  as: Component = 'section',
+  tone = 'default',
+  padding = 'md',
+  className,
+  ...elementProps
+}: SubpanelProps) {
+  return (
+    <Card
+      {...elementProps}
+      as={Component}
+      tone={tone}
+      padding={padding}
+      className={className}
+    >
+      {title || actions ? (
+        <CardHeader>
+          {title ? <CardTitle>{title}</CardTitle> : <span />}
+          {actions ? <CardActions>{actions}</CardActions> : null}
+        </CardHeader>
+      ) : null}
+      {children}
+    </Card>
+  );
+}
+
+export type ModalProps = Omit<SharedDialogProps, 'closeButton'>;
+
+export function Modal({
+  open,
+  title,
+  description,
+  children,
+  footer,
+  onClose,
+  closeLabel = '关闭弹窗',
+  closeOnBackdrop = true,
+  closeOnEscape = true,
+  size = 'md',
+  portal = true,
+  className,
+}: ModalProps) {
+  return (
+    <SharedDialog
+      {...{
+        open,
+        title,
+        description,
+        children,
+        footer,
+        onClose,
+        closeLabel,
+        closeOnBackdrop,
+        closeOnEscape,
+        size,
+        portal,
+        className,
+      }}
+      closeButton={
+        <IconButton
+          label={closeLabel}
+          icon="×"
+          variant="quiet"
+          size="sm"
+          onClick={onClose}
+        />
+      }
+    />
+  );
+}
+
+export type StatusTone = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+export type StatusProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+  tone?: StatusTone;
+  children?: ReactNode;
+  icon?: ReactNode;
+};
+
+export function Status({
+  tone = 'neutral',
+  icon,
+  children,
+  className,
+  ...props
+}: StatusProps) {
+  return (
+    <div
+      {...props}
+      role={props.role ?? 'status'}
+      className={joinClassNames(
+        'genarrative-ui-status',
+        `genarrative-ui-status--${tone}`,
+        className,
+      )}
+    >
+      {icon ? (
+        <span className="genarrative-ui-status__icon" aria-hidden="true">
+          {icon}
+        </span>
+      ) : null}
+      <span>{children}</span>
+    </div>
+  );
+}
+
+export type EmptyStateProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children' | 'title'
+> & {
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  action?: ReactNode;
+};
+
+export function EmptyState({
+  title,
+  description,
+  icon,
+  action,
+  className,
+  ...props
+}: EmptyStateProps) {
+  return (
+    <div
+      {...props}
+      className={joinClassNames('genarrative-ui-empty-state', className)}
+    >
+      {icon ? (
+        <div className="genarrative-ui-empty-state__icon" aria-hidden="true">
+          {icon}
+        </div>
+      ) : null}
+      <h2>{title}</h2>
+      {description ? <p>{description}</p> : null}
+      {action ? (
+        <div className="genarrative-ui-empty-state__action">{action}</div>
+      ) : null}
+    </div>
+  );
+}
+
+export type BadgeTone =
+  | 'neutral'
+  | 'accent'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'info';
+export type BadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+  children?: ReactNode;
+  tone?: BadgeTone;
+  size?: 'sm' | 'md';
+  icon?: ReactNode;
+};
+
+export function Badge({
+  children,
+  tone = 'neutral',
+  size = 'sm',
+  icon,
+  className,
+  ...props
+}: BadgeProps) {
+  return (
+    <ShadcnBadge
+      {...props}
+      variant={tone}
+      size={size}
+      icon={icon}
+      className={className}
+    >
+      {children}
+    </ShadcnBadge>
+  );
+}
+
+export type ProgressBarProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children'
+> & {
+  value?: number;
+  label?: string;
+  indeterminate?: boolean;
+  children?: ReactNode;
+};
+
+export function ProgressBar({
+  value = 0,
+  label,
+  indeterminate = false,
+  children,
+  className,
+  ...props
+}: ProgressBarProps) {
+  const progress = Number.isFinite(value)
+    ? Math.min(100, Math.max(0, value))
+    : 0;
+  return (
+    <div
+      {...props}
+      className={joinClassNames('genarrative-ui-progress', className)}
+    >
+      <div
+        role="progressbar"
+        aria-label={label ?? '进度'}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={indeterminate ? undefined : progress}
+        className={joinClassNames(
+          'genarrative-ui-progress__track',
+          indeterminate && 'genarrative-ui-progress__track--indeterminate',
+        )}
+      >
+        <span
+          className="genarrative-ui-progress__fill"
+          style={indeterminate ? undefined : { width: `${progress}%` }}
+        />
+      </div>
+      {children ? (
+        <span className="genarrative-ui-progress__label">{children}</span>
+      ) : null}
+    </div>
+  );
+}
+
+export type SegmentedTabItem<TId extends string = string> =
+  ShadcnSegmentedTabItem<TId>;
+export type SegmentedTabsProps<TId extends string = string> =
+  ShadcnSegmentedTabsProps<TId>;
+
+export function SegmentedTabs<TId extends string>(
+  props: SegmentedTabsProps<TId>,
+) {
+  return <ShadcnSegmentedTabs {...props} />;
+}
+
+export type SwitchProps = SharedSwitchProps;
+
+export function Switch(props: SwitchProps) {
+  return <ShadcnSwitch {...props} />;
+}
+
+export function Spinner({
+  label = '加载中',
+  className,
+}: {
+  label?: string;
+  className?: string;
+}) {
+  return (
+    <span
+      className={joinClassNames('genarrative-ui-spinner', className)}
+      role="status"
+      aria-label={label}
+    />
+  );
+}
+
+export function Divider({
+  className,
+  ...props
+}: HTMLAttributes<HTMLHRElement>) {
+  return (
+    <hr
+      {...props}
+      className={joinClassNames('genarrative-ui-divider', className)}
+    />
+  );
+}
diff --git a/packages/shared/src/components/ui/badge.tsx b/packages/shared/src/components/ui/badge.tsx
new file mode 100644
index 000000000..32b7c0499
--- /dev/null
+++ b/packages/shared/src/components/ui/badge.tsx
@@ -0,0 +1,52 @@
+/* eslint-disable react-refresh/only-export-components -- shadcn co-locates variants with their source */
+import { cva, type VariantProps } from 'class-variance-authority';
+import { type HTMLAttributes, type ReactNode } from 'react';
+
+import { cn } from '../../lib/utils';
+
+export const badgeVariants = cva('genarrative-ui-badge', {
+  variants: {
+    variant: {
+      neutral: 'genarrative-ui-badge--neutral',
+      accent: 'genarrative-ui-badge--accent',
+      success: 'genarrative-ui-badge--success',
+      warning: 'genarrative-ui-badge--warning',
+      danger: 'genarrative-ui-badge--danger',
+      info: 'genarrative-ui-badge--info',
+    },
+    size: {
+      sm: 'genarrative-ui-badge--sm',
+      md: 'genarrative-ui-badge--md',
+    },
+  },
+  defaultVariants: {
+    variant: 'neutral',
+    size: 'sm',
+  },
+});
+
+export type BadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> &
+  VariantProps<typeof badgeVariants> & {
+    children?: ReactNode;
+    icon?: ReactNode;
+  };
+
+export function Badge({
+  children,
+  icon,
+  variant,
+  size,
+  className,
+  ...props
+}: BadgeProps) {
+  return (
+    <span
+      {...props}
+      data-slot="badge"
+      className={cn(badgeVariants({ variant, size }), className)}
+    >
+      {icon ? <span aria-hidden="true">{icon}</span> : null}
+      {children}
+    </span>
+  );
+}
diff --git a/packages/shared/src/components/ui/button.test.tsx b/packages/shared/src/components/ui/button.test.tsx
new file mode 100644
index 000000000..cb513a8a3
--- /dev/null
+++ b/packages/shared/src/components/ui/button.test.tsx
@@ -0,0 +1,45 @@
+/* @vitest-environment jsdom */
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, test, vi } from 'vitest';
+
+import { Button, buttonVariants } from './button';
+
+describe('shadcn button source', () => {
+  test('exposes CVA variants while preserving native button behavior', () => {
+    const onClick = vi.fn();
+    render(
+      <Button variant="destructive" size="sm" onClick={onClick}>
+        删除
+      </Button>,
+    );
+
+    const button = screen.getByRole('button', { name: '删除' });
+    expect(button.dataset.slot).toBe('button');
+    expect(button.className).toContain('genarrative-ui-button--danger');
+    expect(button.className).toContain('genarrative-ui-button--sm');
+    fireEvent.click(button);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('keeps loading buttons disabled and merges caller classes', () => {
+    render(
+      <Button loading fullWidth className="w-auto">
+        保存
+      </Button>,
+    );
+
+    const button = screen.getByRole('button', { name: '保存' });
+    expect((button as HTMLButtonElement).disabled).toBe(true);
+    expect(button.getAttribute('aria-busy')).toBe('true');
+    expect(button.className).toContain('genarrative-ui-button--full-width');
+    expect(button.className).toContain('w-auto');
+    expect(button.className).not.toContain('w-full');
+  });
+
+  test('can generate a standalone shadcn variant class', () => {
+    expect(buttonVariants({ variant: 'outline', size: 'lg' })).toContain(
+      'genarrative-ui-button--secondary',
+    );
+  });
+});
diff --git a/packages/shared/src/components/ui/button.tsx b/packages/shared/src/components/ui/button.tsx
new file mode 100644
index 000000000..e748abac0
--- /dev/null
+++ b/packages/shared/src/components/ui/button.tsx
@@ -0,0 +1,97 @@
+/* eslint-disable react-refresh/only-export-components -- shadcn co-locates variants with their source */
+import { cva, type VariantProps } from 'class-variance-authority';
+import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react';
+
+import { cn } from '../../lib/utils';
+
+/**
+ * Project-owned shadcn-style button source. Existing genarrative classes keep
+ * the platform token contract intact while CVA provides the migration point
+ * for future shared component variants.
+ */
+export const buttonVariants = cva(
+  'genarrative-ui-button inline-flex items-center justify-center',
+  {
+    variants: {
+      variant: {
+        default: 'genarrative-ui-button--primary',
+        primary: 'genarrative-ui-button--primary',
+        secondary: 'genarrative-ui-button--secondary',
+        outline: 'genarrative-ui-button--secondary',
+        ghost: 'genarrative-ui-button--ghost',
+        destructive: 'genarrative-ui-button--danger',
+        danger: 'genarrative-ui-button--danger',
+        link: 'genarrative-ui-button--ghost underline-offset-4',
+      },
+      size: {
+        default: 'genarrative-ui-button--md',
+        sm: 'genarrative-ui-button--sm',
+        md: 'genarrative-ui-button--md',
+        lg: 'genarrative-ui-button--lg',
+        icon: 'genarrative-ui-button--sm p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export type ShadcnButtonVariant = NonNullable<
+  VariantProps<typeof buttonVariants>['variant']
+>;
+export type ShadcnButtonSize = NonNullable<
+  VariantProps<typeof buttonVariants>['size']
+>;
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants> & {
+    children?: ReactNode;
+    fullWidth?: boolean;
+    loading?: boolean;
+    icon?: ReactNode;
+  };
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    {
+      children,
+      variant,
+      size,
+      fullWidth = false,
+      loading = false,
+      icon,
+      className,
+      disabled,
+      type = 'button',
+      ...buttonProps
+    },
+    ref,
+  ) {
+    return (
+      <button
+        {...buttonProps}
+        ref={ref}
+        type={type}
+        disabled={disabled || loading}
+        aria-busy={loading || undefined}
+        data-slot="button"
+        className={cn(
+          buttonVariants({ variant, size }),
+          fullWidth && 'w-full genarrative-ui-button--full-width',
+          className,
+        )}
+      >
+        {loading ? (
+          <span className="genarrative-ui-spinner" aria-hidden="true" />
+        ) : (
+          icon
+        )}
+        {children}
+      </button>
+    );
+  },
+);
+
+Button.displayName = 'Button';
diff --git a/packages/shared/src/components/ui/card.tsx b/packages/shared/src/components/ui/card.tsx
new file mode 100644
index 000000000..6c62a797b
--- /dev/null
+++ b/packages/shared/src/components/ui/card.tsx
@@ -0,0 +1,73 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+
+import { cn } from '../../lib/utils';
+
+export type CardProps = HTMLAttributes<HTMLElement> & {
+  as?: 'section' | 'div' | 'article' | 'aside';
+  tone?: 'default' | 'soft' | 'contrast';
+  padding?: 'sm' | 'md' | 'lg' | 'none';
+  children?: ReactNode;
+};
+
+export function Card({
+  as: Component = 'div',
+  tone = 'default',
+  padding = 'md',
+  className,
+  ...props
+}: CardProps) {
+  return (
+    <Component
+      {...props}
+      data-slot="card"
+      className={cn(
+        'genarrative-ui-subpanel',
+        `genarrative-ui-subpanel--${tone}`,
+        `genarrative-ui-subpanel--padding-${padding}`,
+        className,
+      )}
+    />
+  );
+}
+
+export function CardHeader({
+  className,
+  ...props
+}: HTMLAttributes<HTMLElement>) {
+  return (
+    <header
+      {...props}
+      data-slot="card-header"
+      className={cn('genarrative-ui-subpanel__header', className)}
+    />
+  );
+}
+
+export function CardTitle({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLHeadingElement> & { children?: ReactNode }) {
+  return (
+    <h2
+      {...props}
+      data-slot="card-title"
+      className={cn('genarrative-ui-subpanel__title', className)}
+    >
+      {children}
+    </h2>
+  );
+}
+
+export function CardActions({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      {...props}
+      data-slot="card-actions"
+      className={cn('genarrative-ui-subpanel__actions', className)}
+    />
+  );
+}
diff --git a/packages/shared/src/components/ui/dialog.tsx b/packages/shared/src/components/ui/dialog.tsx
new file mode 100644
index 000000000..eba8c4272
--- /dev/null
+++ b/packages/shared/src/components/ui/dialog.tsx
@@ -0,0 +1,163 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { forwardRef, type ReactNode } from 'react';
+
+import { cn } from '../../lib/utils';
+
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogClose = DialogPrimitive.Close;
+
+export const DialogPortal = DialogPrimitive.Portal;
+
+export const DialogOverlay = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(function DialogOverlay({ className, ...props }, ref) {
+  return (
+    <DialogPrimitive.Overlay
+      {...props}
+      ref={ref}
+      data-slot="dialog-overlay"
+      className={cn('genarrative-ui-modal__backdrop', className)}
+    />
+  );
+});
+
+export const DialogContent = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(function DialogContent({ className, ...props }, ref) {
+  return (
+    <DialogPrimitive.Content
+      {...props}
+      ref={ref}
+      data-slot="dialog-content"
+      className={cn('genarrative-ui-modal__panel', className)}
+    />
+  );
+});
+
+export const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    {...props}
+    data-slot="dialog-header"
+    className={cn('genarrative-ui-modal__header', className)}
+  />
+);
+
+export const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    {...props}
+    data-slot="dialog-footer"
+    className={cn('genarrative-ui-modal__footer', className)}
+  />
+);
+
+export const DialogTitle = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(function DialogTitle({ className, ...props }, ref) {
+  return (
+    <DialogPrimitive.Title
+      {...props}
+      ref={ref}
+      data-slot="dialog-title"
+      className={cn('genarrative-ui-modal__title', className)}
+    />
+  );
+});
+
+export const DialogDescription = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(function DialogDescription({ className, ...props }, ref) {
+  return (
+    <DialogPrimitive.Description
+      {...props}
+      ref={ref}
+      data-slot="dialog-description"
+      className={cn('genarrative-ui-modal__description', className)}
+    />
+  );
+});
+
+export type SharedDialogProps = {
+  open: boolean;
+  title: ReactNode;
+  description?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+  onClose: () => void;
+  closeLabel?: string;
+  closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  portal?: boolean;
+  className?: string;
+  closeButton: ReactNode;
+};
+
+/** Compatibility adapter for the existing Modal API. */
+export function SharedDialog({
+  open,
+  title,
+  description,
+  children,
+  footer,
+  onClose,
+  closeOnBackdrop = true,
+  closeOnEscape = true,
+  size = 'md',
+  portal = true,
+  className,
+  closeButton,
+}: SharedDialogProps) {
+  const content = (
+    <DialogOverlay
+      onMouseDown={(event) => {
+        if (closeOnBackdrop && event.target === event.currentTarget) {
+          onClose();
+        }
+      }}
+    >
+      <DialogContent
+        onEscapeKeyDown={(event) => {
+          if (!closeOnEscape) event.preventDefault();
+        }}
+        onPointerDownOutside={(event) => {
+          // The compatibility contract closes on the backdrop's mouse-down
+          // event (also used by existing tests). Prevent Radix from invoking
+          // onOpenChange a second time for the same pointer gesture.
+          event.preventDefault();
+        }}
+        className={cn(`genarrative-ui-modal__panel--${size}`, className)}
+      >
+        <DialogHeader>
+          <div>
+            <DialogTitle>{title}</DialogTitle>
+            {description ? (
+              <DialogDescription>{description}</DialogDescription>
+            ) : null}
+          </div>
+          {closeButton}
+        </DialogHeader>
+        {children ? (
+          <div className="genarrative-ui-modal__body">{children}</div>
+        ) : null}
+        {footer ? <DialogFooter>{footer}</DialogFooter> : null}
+      </DialogContent>
+    </DialogOverlay>
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && onClose()}>
+      {portal ? <DialogPortal>{content}</DialogPortal> : content}
+    </Dialog>
+  );
+}
diff --git a/packages/shared/src/components/ui/index.ts b/packages/shared/src/components/ui/index.ts
new file mode 100644
index 000000000..e2fca9857
--- /dev/null
+++ b/packages/shared/src/components/ui/index.ts
@@ -0,0 +1,31 @@
+export type { BadgeProps } from './badge';
+export { Badge, badgeVariants } from './badge';
+export type {
+  ButtonProps,
+  ShadcnButtonSize,
+  ShadcnButtonVariant,
+} from './button';
+export { Button, buttonVariants } from './button';
+export type { CardProps } from './card';
+export { Card, CardActions, CardHeader, CardTitle } from './card';
+export type { SharedDialogProps } from './dialog';
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from './dialog';
+export type { InputProps } from './input';
+export { Input, inputVariants } from './input';
+export type { SharedSwitchProps } from './switch';
+export { SwitchRoot, SwitchThumb } from './switch';
+export type { SegmentedTabItem, SegmentedTabsProps } from './tabs';
+export { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
+export type { TextareaProps } from './textarea';
+export { Textarea } from './textarea';
diff --git a/packages/shared/src/components/ui/input.tsx b/packages/shared/src/components/ui/input.tsx
new file mode 100644
index 000000000..c160f6b23
--- /dev/null
+++ b/packages/shared/src/components/ui/input.tsx
@@ -0,0 +1,42 @@
+/* eslint-disable react-refresh/only-export-components -- shadcn co-locates variants with their source */
+import { cva, type VariantProps } from 'class-variance-authority';
+import { forwardRef, type InputHTMLAttributes } from 'react';
+
+import { cn } from '../../lib/utils';
+
+export const inputVariants = cva('genarrative-ui-text-field__control', {
+  variants: {
+    size: {
+      sm: 'genarrative-ui-text-field__control--sm',
+      md: 'genarrative-ui-text-field__control--md',
+      lg: 'genarrative-ui-text-field__control--lg',
+    },
+    error: {
+      true: 'genarrative-ui-text-field__control--error',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    error: false,
+  },
+});
+
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> &
+  VariantProps<typeof inputVariants>;
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { className, size, error, ...props },
+  ref,
+) {
+  return (
+    <input
+      {...props}
+      ref={ref}
+      data-slot="input"
+      className={cn(inputVariants({ size, error }), className)}
+    />
+  );
+});
+
+Input.displayName = 'Input';
diff --git a/packages/shared/src/components/ui/primitives.test.tsx b/packages/shared/src/components/ui/primitives.test.tsx
new file mode 100644
index 000000000..7415eba10
--- /dev/null
+++ b/packages/shared/src/components/ui/primitives.test.tsx
@@ -0,0 +1,38 @@
+/* @vitest-environment jsdom */
+
+import { render, screen } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+
+import { Badge } from './badge';
+import { Card, CardTitle } from './card';
+import { Input } from './input';
+import { Textarea } from './textarea';
+
+describe('shadcn form, badge and card sources', () => {
+  test('expose project-owned slots while retaining platform classes', () => {
+    render(
+      <>
+        <Input size="lg" error aria-label="名称" />
+        <Textarea size="sm" aria-label="描述" />
+        <Badge variant="success">完成</Badge>
+        <Card tone="soft">
+          <CardTitle>设置</CardTitle>
+        </Card>
+      </>,
+    );
+
+    expect(screen.getByRole('textbox', { name: '名称' }).dataset.slot).toBe(
+      'input',
+    );
+    expect(screen.getByRole('textbox', { name: '描述' }).dataset.slot).toBe(
+      'textarea',
+    );
+    expect(screen.getByText('完成').dataset.slot).toBe('badge');
+    expect(screen.getByRole('heading', { name: '设置' }).dataset.slot).toBe(
+      'card-title',
+    );
+    expect(screen.getByText('完成').className).toContain(
+      'genarrative-ui-badge--success',
+    );
+  });
+});
diff --git a/packages/shared/src/components/ui/switch.tsx b/packages/shared/src/components/ui/switch.tsx
new file mode 100644
index 000000000..ef6001363
--- /dev/null
+++ b/packages/shared/src/components/ui/switch.tsx
@@ -0,0 +1,41 @@
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { type ReactNode } from 'react';
+
+import { cn } from '../../lib/utils';
+
+export const SwitchRoot = SwitchPrimitive.Root;
+export const SwitchThumb = SwitchPrimitive.Thumb;
+
+export type SharedSwitchProps = Omit<
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,
+  'checked' | 'children'
+> & {
+  checked: boolean;
+  label: ReactNode;
+};
+
+/** Compatibility adapter for the existing switch API. */
+export function SharedSwitch({
+  checked,
+  label,
+  className,
+  ...props
+}: SharedSwitchProps) {
+  return (
+    <SwitchPrimitive.Root
+      {...props}
+      checked={checked}
+      data-slot="switch"
+      className={cn(
+        'genarrative-ui-switch',
+        checked && 'genarrative-ui-switch--checked',
+        className,
+      )}
+    >
+      <SwitchPrimitive.Thumb className="genarrative-ui-switch__track">
+        <span className="genarrative-ui-switch__thumb" />
+      </SwitchPrimitive.Thumb>
+      <span>{label}</span>
+    </SwitchPrimitive.Root>
+  );
+}
diff --git a/packages/shared/src/components/ui/tabs.test.tsx b/packages/shared/src/components/ui/tabs.test.tsx
new file mode 100644
index 000000000..17ef20771
--- /dev/null
+++ b/packages/shared/src/components/ui/tabs.test.tsx
@@ -0,0 +1,30 @@
+/* @vitest-environment jsdom */
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, test, vi } from 'vitest';
+
+import { SegmentedTabs } from './tabs';
+
+describe('shadcn tabs source', () => {
+  test('does not duplicate changes across pointer and click events', () => {
+    const onChange = vi.fn();
+    render(
+      <SegmentedTabs
+        items={[
+          { id: 'overview', label: '概览' },
+          { id: 'states', label: '状态' },
+        ]}
+        activeId="overview"
+        onChange={onChange}
+        label="展示页分区"
+      />,
+    );
+
+    const tab = screen.getByRole('tab', { name: '状态' });
+    fireEvent.mouseDown(tab, { button: 0 });
+    fireEvent.click(tab);
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('states');
+  });
+});
diff --git a/packages/shared/src/components/ui/tabs.tsx b/packages/shared/src/components/ui/tabs.tsx
new file mode 100644
index 000000000..19316c223
--- /dev/null
+++ b/packages/shared/src/components/ui/tabs.tsx
@@ -0,0 +1,73 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { type ReactNode, useRef } from 'react';
+
+import { cn } from '../../lib/utils';
+
+export const Tabs = TabsPrimitive.Root;
+
+export const TabsList = TabsPrimitive.List;
+export const TabsTrigger = TabsPrimitive.Trigger;
+export const TabsContent = TabsPrimitive.Content;
+
+export type SegmentedTabItem<TId extends string = string> = {
+  id: TId;
+  label: ReactNode;
+  disabled?: boolean;
+};
+
+export type SegmentedTabsProps<TId extends string = string> = {
+  items: readonly SegmentedTabItem<TId>[];
+  activeId: TId;
+  onChange: (id: TId) => void;
+  label?: string;
+  className?: string;
+};
+
+/** Compatibility adapter for the existing segmented-tabs API. */
+export function SegmentedTabs<TId extends string>({
+  items,
+  activeId,
+  onChange,
+  label,
+  className,
+}: SegmentedTabsProps<TId>) {
+  const selectedValueRef = useRef(activeId);
+  return (
+    <Tabs
+      value={activeId}
+      onValueChange={(value) => {
+        selectedValueRef.current = value as TId;
+        onChange(value as TId);
+      }}
+    >
+      <TabsList
+        aria-label={label}
+        data-slot="tabs-list"
+        className={cn('genarrative-ui-tabs', className)}
+      >
+        {items.map((item) => (
+          <TabsTrigger
+            key={item.id}
+            value={item.id}
+            disabled={item.disabled}
+            data-slot="tabs-trigger"
+            onClick={() => {
+              // Radix selects on pointer-down. Keep the native click contract
+              // for keyboard/test callers that dispatch click directly.
+              if (selectedValueRef.current !== item.id) {
+                selectedValueRef.current = item.id;
+                onChange(item.id);
+              }
+            }}
+            className={cn(
+              'genarrative-ui-tabs__item',
+              item.id === activeId && 'genarrative-ui-tabs__item--active',
+            )}
+          >
+            {item.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+    </Tabs>
+  );
+}
diff --git a/packages/shared/src/components/ui/textarea.tsx b/packages/shared/src/components/ui/textarea.tsx
new file mode 100644
index 000000000..b58e64856
--- /dev/null
+++ b/packages/shared/src/components/ui/textarea.tsx
@@ -0,0 +1,29 @@
+import { forwardRef, type TextareaHTMLAttributes } from 'react';
+
+import { cn } from '../../lib/utils';
+import { type InputProps, inputVariants } from './input';
+
+export type TextareaProps = Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'size'
+> &
+  Pick<InputProps, 'size' | 'error'>;
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  function Textarea({ className, size, error, ...props }, ref) {
+    return (
+      <textarea
+        {...props}
+        ref={ref}
+        data-slot="textarea"
+        className={cn(
+          inputVariants({ size, error }),
+          'genarrative-ui-text-field__control--textarea',
+          className,
+        )}
+      />
+    );
+  },
+);
+
+Textarea.displayName = 'Textarea';
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index d9d8aee23..b1c77b0bc 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -1,3 +1,4 @@
+export * from './components';
 export * from './contracts/auth';
 export type * from './contracts/bigFish';
 export * from './contracts/common';
@@ -54,5 +55,3 @@ export * from './llm/narrativeLanguage';
 export * from './llm/parsers';
 export * from './stores/createProfileWalletStore';
 export * from './utils/signedReadUrlCache';
-
-// should not export component, instead, they should be ref by relative path
diff --git a/packages/shared/src/lib/index.ts b/packages/shared/src/lib/index.ts
new file mode 100644
index 000000000..f2d6c0c5c
--- /dev/null
+++ b/packages/shared/src/lib/index.ts
@@ -0,0 +1 @@
+export { cn } from './utils';
diff --git a/packages/shared/src/lib/utils.ts b/packages/shared/src/lib/utils.ts
new file mode 100644
index 000000000..0c9d67069
--- /dev/null
+++ b/packages/shared/src/lib/utils.ts
@@ -0,0 +1,7 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/** Shared shadcn utility for conditional and conflict-free class names. */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/active-main.tsx b/src/active-main.tsx
index 91f4a4294..f71ccee81 100644
--- a/src/active-main.tsx
+++ b/src/active-main.tsx
@@ -48,6 +48,6 @@ void refreshNativeAppHostRuntime();
 root.render(
   <StrictMode>
     <Suspense fallback={null}>{routeElement}</Suspense>
-    <FloatingFeedbackEntry />
+    {route.kind === 'platform' ? <FloatingFeedbackEntry /> : null}
   </StrictMode>,
 );
diff --git a/src/components/shared-components/SharedComponentsShowcasePage.test.tsx b/src/components/shared-components/SharedComponentsShowcasePage.test.tsx
new file mode 100644
index 000000000..d123f98ba
--- /dev/null
+++ b/src/components/shared-components/SharedComponentsShowcasePage.test.tsx
@@ -0,0 +1,99 @@
+/* @vitest-environment jsdom */
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+
+import SharedComponentsShowcasePage from './SharedComponentsShowcasePage';
+
+describe('SharedComponentsShowcasePage', () => {
+  test('shows visible feedback for interactive button examples', () => {
+    render(<SharedComponentsShowcasePage />);
+
+    fireEvent.click(screen.getByRole('button', { name: '主要操作' }));
+    expect(screen.getByRole('status', { name: '交互反馈' }).textContent).toBe(
+      '主要操作已点击',
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '创建示例' }));
+    expect(screen.getByRole('status', { name: '交互反馈' }).textContent).toBe(
+      '创建示例已点击',
+    );
+  });
+
+  test('keeps the loading example disabled and exposes stateful feedback', () => {
+    render(<SharedComponentsShowcasePage />);
+
+    expect(
+      (screen.getByRole('button', { name: '加载中' }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true);
+
+    fireEvent.click(screen.getByRole('switch', { name: '已启用' }));
+    expect(screen.getByRole('switch', { name: '已停用' })).toBeTruthy();
+    expect(screen.getByRole('status', { name: '交互反馈' }).textContent).toBe(
+      '开关已点击',
+    );
+  });
+
+  test('exposes the platform component catalog with local interactions', () => {
+    render(<SharedComponentsShowcasePage />);
+
+    fireEvent.click(screen.getByRole('tab', { name: '平台组件' }));
+
+    expect(
+      screen.getByRole('heading', { name: '导航 / 筛选工具栏' }),
+    ).toBeTruthy();
+    expect(
+      screen.getByRole('heading', { name: '媒体 / 上传入口' }),
+    ).toBeTruthy();
+    expect(screen.getByRole('button', { name: '选择珊瑚岛' })).toBeTruthy();
+
+    const recentOrder = screen
+      .getAllByRole('button', { name: /^选择/ })
+      .map((button) => button.getAttribute('aria-label'));
+    const previewImageBeforeSort = screen
+      .getByAltText('珊瑚岛预览')
+      .getAttribute('src');
+    fireEvent.click(screen.getByRole('button', { name: '最近使用' }));
+    const nameOrder = screen
+      .getAllByRole('button', { name: /^选择/ })
+      .map((button) => button.getAttribute('aria-label'));
+    expect(nameOrder).not.toEqual(recentOrder);
+    expect(screen.getByText('当前筛选：全部 · 名称 · 4 个结果')).toBeTruthy();
+    expect(screen.getByRole('button', { name: '预览珊瑚岛' })).toBeTruthy();
+    expect(screen.getByAltText('珊瑚岛预览').getAttribute('src')).toBe(
+      previewImageBeforeSort,
+    );
+
+    fireEvent.click(screen.getAllByRole('button', { name: '筛选 3' })[0]!);
+    expect(screen.getByRole('dialog', { name: '筛选示例' })).toBeTruthy();
+    const draftButtons = screen.getAllByRole('button', { name: '草稿' });
+    fireEvent.click(draftButtons[draftButtons.length - 1]!);
+    expect(screen.getByRole('dialog', { name: '筛选示例' })).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: '完成' }));
+    expect(screen.queryByRole('dialog', { name: '筛选示例' })).toBeNull();
+    expect(
+      screen.getAllByRole('button', { name: '草稿 2' }).length,
+    ).toBeGreaterThan(0);
+    expect(screen.getByRole('button', { name: '选择珊瑚岛' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: '选择月光林' })).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: '名称' }));
+    expect(screen.getByRole('button', { name: '最近使用' })).toBeTruthy();
+    expect(
+      screen.getByText('当前筛选：草稿 · 最近使用 · 2 个结果'),
+    ).toBeTruthy();
+    expect(screen.getByRole('button', { name: '预览珊瑚岛' })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: '空态' }));
+    expect(screen.getByText('暂无可展示内容')).toBeTruthy();
+    expect(screen.getByRole('status', { name: '交互反馈' }).textContent).toBe(
+      '异步状态：empty已点击',
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '上传素材 PNG / JPG' }));
+    expect(screen.getByRole('status', { name: '交互反馈' }).textContent).toBe(
+      '上传素材已点击',
+    );
+  });
+});
diff --git a/src/components/shared-components/SharedComponentsShowcasePage.tsx b/src/components/shared-components/SharedComponentsShowcasePage.tsx
new file mode 100644
index 000000000..c65611e4e
--- /dev/null
+++ b/src/components/shared-components/SharedComponentsShowcasePage.tsx
@@ -0,0 +1,743 @@
+import '@genarrative/shared/styles.css';
+import './sharedComponentsShowcase.css';
+
+import {
+  Badge,
+  Button,
+  Divider,
+  EmptyState,
+  IconButton,
+  Modal,
+  ProgressBar,
+  SegmentedTabs,
+  SelectField,
+  Spinner,
+  Status,
+  Subpanel,
+  Switch,
+  TextField,
+} from '@genarrative/shared/components';
+import { Check, CircleAlert, Info, Plus, Sparkles } from 'lucide-react';
+import { type ReactNode, useEffect, useState } from 'react';
+
+import { PlatformAssetPickerGrid } from '../common/PlatformAssetPickerCard';
+import { PlatformAsyncStatePanel } from '../common/PlatformAsyncStatePanel';
+import { PlatformEmptyState } from '../common/PlatformEmptyState';
+import { PlatformFilterToolbar } from '../common/PlatformFilterToolbar';
+import { PlatformInfoBlock } from '../common/PlatformInfoBlock';
+import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
+import { PlatformMediaTileGrid } from '../common/PlatformMediaTileGrid';
+import { PlatformNavigableListItem } from '../common/PlatformNavigableListItem';
+import { PlatformRuntimeStatusToast } from '../common/PlatformRuntimeStatusToast';
+import { PlatformStatGrid } from '../common/PlatformStatGrid';
+import { PlatformTagEditor } from '../common/PlatformTagEditor';
+import { PlatformToggleRow } from '../common/PlatformToggleRow';
+import { PlatformUploadPreviewCard } from '../common/PlatformUploadPreviewCard';
+import { PlatformUploadTile } from '../common/PlatformUploadTile';
+
+const tabs = [
+  { id: 'overview', label: '概览' },
+  { id: 'platform', label: '平台组件' },
+  { id: 'tokens', label: 'Token' },
+  { id: 'states', label: '状态' },
+] as const;
+
+const demoAssetImages = [
+  ['珊瑚岛', '#ef9b72', '#ffd7b8', '草稿', 3],
+  ['月光林', '#8094cf', '#dce3ff', '已发布', 4],
+  ['萤火谷', '#78b899', '#d4f3d5', '草稿', 1],
+  ['赤岩城', '#c87967', '#f8d4c9', '已发布', 2],
+] as const;
+
+type DemoAsset = {
+  id: string;
+  label: string;
+  image: string;
+  status: '草稿' | '已发布';
+  recentOrder: number;
+};
+
+function createDemoImage(label: string, from: string, to: string) {
+  return `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 220"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="${from}"/><stop offset="1" stop-color="${to}"/></linearGradient></defs><rect width="320" height="220" rx="28" fill="url(#g)"/><circle cx="252" cy="54" r="30" fill="white" fill-opacity=".4"/><path d="M0 180 Q80 115 160 175 T320 150 V220 H0Z" fill="white" fill-opacity=".22"/><text x="24" y="196" fill="white" font-family="sans-serif" font-size="24" font-weight="700">${label}</text></svg>`)}`;
+}
+
+const demoAssets: DemoAsset[] = demoAssetImages.map(
+  ([label, from, to, status, recentOrder], index) => ({
+    id: `demo-asset-${index}`,
+    label,
+    image: createDemoImage(label, from, to),
+    status,
+    recentOrder,
+  }),
+);
+
+export default function SharedComponentsShowcasePage() {
+  const [activeTab, setActiveTab] =
+    useState<(typeof tabs)[number]['id']>('overview');
+  const [enabled, setEnabled] = useState(true);
+  const [progress, setProgress] = useState(64);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [feedback, setFeedback] = useState<string | null>(null);
+  const [filterTab, setFilterTab] = useState('全部');
+  const [platformTags, setPlatformTags] = useState(['冒险', '海岛']);
+  const [platformToggle, setPlatformToggle] = useState(true);
+  const [selectedAssetId, setSelectedAssetId] = useState(
+    demoAssets[0]?.id ?? '',
+  );
+  const [filterOpen, setFilterOpen] = useState(false);
+  const [sortMode, setSortMode] = useState<'recent' | 'name'>('recent');
+  const [asyncMode, setAsyncMode] = useState<
+    'content' | 'loading' | 'empty' | 'error'
+  >('content');
+
+  const showFeedback = (label: string) => {
+    setFeedback(`${label}已点击`);
+  };
+
+  const adjustProgress = (delta: number, label: string) => {
+    setProgress((value) => Math.min(100, Math.max(0, value + delta)));
+    showFeedback(label);
+  };
+
+  const visibleDemoAssets = [...demoAssets]
+    .filter((asset) => filterTab === '全部' || asset.status === filterTab)
+    .sort((left, right) =>
+      sortMode === 'recent'
+        ? right.recentOrder - left.recentOrder
+        : left.label.localeCompare(right.label, 'zh-CN'),
+    );
+
+  useEffect(() => {
+    document.title = '共享组件展示｜陶泥儿 Genarrative';
+  }, []);
+
+  return (
+    <main className="shared-components-showcase genarrative-ui platform-theme platform-theme--light">
+      <div className="shared-components-showcase__inner">
+        <header className="shared-components-showcase__header">
+          <div>
+            <Badge tone="accent" icon={<Sparkles size={13} />}>
+              共享 UI
+            </Badge>
+            <h1>共享组件展示</h1>
+            <p>无业务依赖的基础交互组件，网站与客户端可直接复用。</p>
+          </div>
+          <IconButton
+            label="创建示例"
+            icon={<Plus size={18} />}
+            variant="default"
+            onClick={() => showFeedback('创建示例')}
+          />
+        </header>
+
+        {feedback ? (
+          <Status
+            tone="info"
+            className="shared-components-showcase__feedback"
+            aria-label="交互反馈"
+            aria-live="polite"
+          >
+            {feedback}
+          </Status>
+        ) : null}
+
+        <SegmentedTabs
+          items={tabs}
+          activeId={activeTab}
+          onChange={(id) => {
+            setActiveTab(id);
+            showFeedback(
+              tabs.find((tab) => tab.id === id)?.label.toString() ?? id,
+            );
+          }}
+          label="展示页分区"
+          className="shared-components-showcase__tabs"
+        />
+
+        {activeTab === 'overview' ? (
+          <div className="shared-components-showcase__grid">
+            <ShowcaseSection title="Button / IconButton">
+              <div className="showcase-row">
+                <Button size="sm" onClick={() => showFeedback('主要操作')}>
+                  主要操作
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => showFeedback('次要操作')}
+                >
+                  次要操作
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => showFeedback('幽灵按钮')}
+                >
+                  幽灵按钮
+                </Button>
+                <Button
+                  variant="danger"
+                  size="sm"
+                  onClick={() => showFeedback('危险操作')}
+                >
+                  危险操作
+                </Button>
+                <Button loading size="sm">
+                  加载中
+                </Button>
+              </div>
+              <Divider />
+              <div className="showcase-row">
+                <IconButton
+                  label="添加"
+                  icon={<Plus size={18} />}
+                  onClick={() => showFeedback('添加')}
+                />
+                <IconButton
+                  label="成功"
+                  icon={<Check size={18} />}
+                  variant="quiet"
+                  onClick={() => showFeedback('成功')}
+                />
+                <IconButton
+                  label="删除"
+                  icon="×"
+                  variant="danger"
+                  onClick={() => showFeedback('删除')}
+                />
+              </div>
+            </ShowcaseSection>
+
+            <ShowcaseSection title="Badge / Status">
+              <div className="showcase-row showcase-row--wrap">
+                <Badge>中性</Badge>
+                <Badge tone="accent">强调</Badge>
+                <Badge tone="success" icon={<Check size={12} />}>
+                  成功
+                </Badge>
+                <Badge tone="warning">提醒</Badge>
+                <Badge tone="danger">错误</Badge>
+                <Badge tone="info">信息</Badge>
+              </div>
+              <div className="showcase-stack">
+                <Status tone="info" icon={<Info size={16} />}>
+                  这是信息状态提示。
+                </Status>
+                <Status tone="success" icon={<Check size={16} />}>
+                  保存完成，可以继续。
+                </Status>
+                <Status tone="warning" icon={<CircleAlert size={16} />}>
+                  请检查输入内容。
+                </Status>
+                <Status tone="error">操作失败，请稍后重试。</Status>
+              </div>
+            </ShowcaseSection>
+
+            <ShowcaseSection title="TextField / SelectField">
+              <div className="showcase-stack">
+                <TextField
+                  label="名称"
+                  placeholder="输入名称"
+                  hint="支持中英文和数字。"
+                />
+                <TextField label="描述" multiline placeholder="输入多行描述" />
+                <TextField
+                  label="错误示例"
+                  defaultValue="不合法的值"
+                  error="请输入有效内容。"
+                />
+                <SelectField label="主题" defaultValue="warm">
+                  <option value="warm">暖色</option>
+                  <option value="dark">暗色</option>
+                </SelectField>
+              </div>
+            </ShowcaseSection>
+
+            <ShowcaseSection title="Subpanel / Switch">
+              <Subpanel
+                title="可复用面板"
+                actions={<Badge tone="success">稳定</Badge>}
+                tone="soft"
+              >
+                <p className="showcase-copy">
+                  面板只负责 surface、标题和 actions 插槽，不读取任何业务状态。
+                </p>
+                <Switch
+                  checked={enabled}
+                  label={enabled ? '已启用' : '已停用'}
+                  onClick={() => {
+                    setEnabled((value) => !value);
+                    showFeedback('开关');
+                  }}
+                />
+              </Subpanel>
+            </ShowcaseSection>
+
+            <ShowcaseSection title="ProgressBar / Spinner / Divider">
+              <div className="showcase-stack">
+                <ProgressBar value={progress} label="示例进度">
+                  完成 {progress}%
+                </ProgressBar>
+                <div className="showcase-row showcase-row--between">
+                  <Button
+                    size="sm"
+                    variant="secondary"
+                    onClick={() => adjustProgress(-10, '减少')}
+                  >
+                    减少
+                  </Button>
+                  <Spinner label="加载示例" />
+                  <Button size="sm" onClick={() => adjustProgress(10, '增加')}>
+                    增加
+                  </Button>
+                </div>
+                <ProgressBar indeterminate label="正在处理" />
+              </div>
+            </ShowcaseSection>
+
+            <ShowcaseSection title="EmptyState / Modal">
+              <EmptyState
+                icon={<Sparkles size={20} />}
+                title="这里还没有内容"
+                description="空态组件只接受展示内容和 action，不负责创建逻辑。"
+                action={
+                  <Button
+                    size="sm"
+                    onClick={() => {
+                      setModalOpen(true);
+                      showFeedback('打开弹窗');
+                    }}
+                  >
+                    打开弹窗
+                  </Button>
+                }
+              />
+              <Modal
+                open={modalOpen}
+                title="共享弹窗"
+                description="弹窗支持 ESC、遮罩点击和 portal。"
+                onClose={() => setModalOpen(false)}
+                footer={
+                  <Button
+                    onClick={() => {
+                      setModalOpen(false);
+                      showFeedback('完成');
+                    }}
+                  >
+                    完成
+                  </Button>
+                }
+              >
+                <p className="showcase-copy">
+                  正文由宿主传入，组件本身不携带账号、请求或页面路由。
+                </p>
+              </Modal>
+            </ShowcaseSection>
+          </div>
+        ) : null}
+
+        {activeTab === 'platform' ? (
+          <PlatformComponentsReference
+            filterTab={filterTab}
+            sortLabel={sortMode === 'recent' ? '最近使用' : '名称'}
+            assets={visibleDemoAssets}
+            platformTags={platformTags}
+            platformToggle={platformToggle}
+            selectedAssetId={selectedAssetId}
+            asyncMode={asyncMode}
+            filterOpen={filterOpen}
+            onOpenFilter={() => {
+              setFilterOpen(true);
+              showFeedback('打开筛选');
+            }}
+            onCloseFilter={() => setFilterOpen(false)}
+            onFeedback={showFeedback}
+            onFilterTabChange={(id) => {
+              setFilterTab(id);
+              showFeedback(`筛选：${id}`);
+            }}
+            onToggleSort={() => {
+              const nextMode = sortMode === 'recent' ? 'name' : 'recent';
+              setSortMode(nextMode);
+              showFeedback(
+                `排序：${nextMode === 'recent' ? '最近使用' : '名称'}`,
+              );
+            }}
+            onTagsChange={(tags) => {
+              setPlatformTags(tags);
+              showFeedback('标签已更新');
+            }}
+            onGenerateTags={() => showFeedback('生成标签')}
+            onToggleChange={(checked) => {
+              setPlatformToggle(checked);
+              showFeedback(checked ? '开关已开启' : '开关已关闭');
+            }}
+            onSelectAsset={(id) => {
+              setSelectedAssetId(id);
+              showFeedback('已选择素材');
+            }}
+            onAsyncModeChange={(mode) => {
+              setAsyncMode(mode);
+              showFeedback(`异步状态：${mode}`);
+            }}
+          />
+        ) : null}
+
+        {activeTab === 'tokens' ? <TokenReference /> : null}
+        {activeTab === 'states' ? <StateReference /> : null}
+      </div>
+    </main>
+  );
+}
+
+type PlatformComponentsReferenceProps = {
+  filterTab: string;
+  sortLabel: string;
+  assets: DemoAsset[];
+  platformTags: string[];
+  platformToggle: boolean;
+  selectedAssetId: string;
+  asyncMode: 'content' | 'loading' | 'empty' | 'error';
+  filterOpen: boolean;
+  onFeedback: (label: string) => void;
+  onOpenFilter: () => void;
+  onCloseFilter: () => void;
+  onFilterTabChange: (id: string) => void;
+  onToggleSort: () => void;
+  onTagsChange: (tags: string[]) => void;
+  onGenerateTags: () => void;
+  onToggleChange: (checked: boolean) => void;
+  onSelectAsset: (id: string) => void;
+  onAsyncModeChange: (
+    mode: PlatformComponentsReferenceProps['asyncMode'],
+  ) => void;
+};
+
+function PlatformComponentsReference({
+  filterTab,
+  sortLabel,
+  assets,
+  platformTags,
+  platformToggle,
+  selectedAssetId,
+  asyncMode,
+  filterOpen,
+  onFeedback,
+  onOpenFilter,
+  onCloseFilter,
+  onFilterTabChange,
+  onToggleSort,
+  onTagsChange,
+  onGenerateTags,
+  onToggleChange,
+  onSelectAsset,
+  onAsyncModeChange,
+}: PlatformComponentsReferenceProps) {
+  // 预览绑定当前选中的素材，而不是过滤/排序后的第一项，避免排序带动上传预览的视觉主题变化。
+  const previewAsset =
+    demoAssets.find((asset) => asset.id === selectedAssetId) ?? demoAssets[0];
+  const filterApplied = filterTab !== '全部';
+  const filterEntryLabel = filterApplied ? filterTab : '筛选';
+  const filterEntryCount = filterApplied ? assets.length : 3;
+
+  return (
+    <div className="shared-components-showcase__platform-grid">
+      <ShowcaseSection title="导航 / 筛选工具栏">
+        <div className="showcase-platform-desktop-toolbar">
+          <PlatformFilterToolbar
+            filterLabel={filterEntryLabel}
+            filterCount={filterEntryCount}
+            tabItems={[
+              { id: '全部', label: '全部' },
+              { id: '草稿', label: '草稿' },
+              { id: '已发布', label: '已发布' },
+            ]}
+            activeTabId={filterTab}
+            sortLabel={sortLabel}
+            layout="desktop"
+            onOpenFilter={onOpenFilter}
+            onTabChange={onFilterTabChange}
+            onToggleSort={onToggleSort}
+          />
+        </div>
+        <div className="showcase-platform-mobile-toolbar">
+          <PlatformFilterToolbar
+            filterLabel={filterEntryLabel}
+            filterCount={filterEntryCount}
+            tabItems={[
+              { id: '全部', label: '全部' },
+              { id: '草稿', label: '草稿' },
+              { id: '已发布', label: '已发布' },
+            ]}
+            activeTabId={filterTab}
+            sortLabel={sortLabel}
+            layout="mobile"
+            onOpenFilter={onOpenFilter}
+            onTabChange={onFilterTabChange}
+            onToggleSort={onToggleSort}
+          />
+        </div>
+        <p className="showcase-copy showcase-filter-summary">
+          当前筛选：{filterTab} · {sortLabel} · {assets.length} 个结果
+        </p>
+      </ShowcaseSection>
+
+      <ShowcaseSection title="标签 / 整行开关">
+        <PlatformTagEditor
+          title="内容标签"
+          tags={platformTags}
+          maxTags={5}
+          parseInput={(value) => value.split(/[\s,，]+/)}
+          onChange={onTagsChange}
+          onGenerate={onGenerateTags}
+          generateLabel="生成标签"
+          inputLabel="新增标签"
+          inputPlaceholder="输入后回车"
+          tone="warm"
+          padding="md"
+        />
+        <div className="mt-3">
+          <PlatformToggleRow
+            label="允许智能推荐"
+            checked={platformToggle}
+            onChange={onToggleChange}
+            onLabel="开启"
+            offLabel="关闭"
+            icon={<Sparkles size={15} />}
+          />
+        </div>
+      </ShowcaseSection>
+
+      <ShowcaseSection title="媒体 / 上传入口">
+        <div className="showcase-platform-media-row">
+          <PlatformMediaFrame
+            alt="无图片时的媒体框"
+            fallbackLabel="媒体 fallback"
+            aspect="landscape"
+            surface="soft"
+            fallbackContent={<span>16:9 媒体框</span>}
+          />
+          <PlatformUploadTile
+            label="上传素材"
+            hint="PNG / JPG"
+            size="panel"
+            onClick={() => onFeedback('上传素材')}
+          />
+          <div className="showcase-platform-upload-preview-shell">
+            <PlatformUploadPreviewCard
+              imageSrc={previewAsset?.image ?? ''}
+              imageAlt={`${previewAsset?.label ?? '素材'}预览`}
+              removeLabel="移除预览"
+              layout="square"
+              previewLabel={`预览${previewAsset?.label ?? '素材'}`}
+              onPreview={() =>
+                onFeedback(`预览${previewAsset?.label ?? '素材'}`)
+              }
+              onRemove={() => onFeedback('移除预览')}
+            />
+          </div>
+        </div>
+        <PlatformMediaTileGrid
+          items={assets.map((asset) => ({
+            id: asset.id,
+            src: asset.image,
+            alt: asset.label,
+            fallbackLabel: asset.label,
+          }))}
+          columns="five"
+          aspect="auto"
+          surface="soft"
+          tileSurface="white"
+          className="mt-3"
+        />
+      </ShowcaseSection>
+
+      <ShowcaseSection title="素材选择 / 选中态">
+        <PlatformAssetPickerGrid
+          items={assets}
+          loadingLabel="正在读取素材"
+          emptyLabel="还没有素材"
+          getKey={(asset) => asset.id}
+          getImageSrc={(asset) => asset.image}
+          getImageAlt={(asset) => asset.label}
+          getTitle={(asset) => asset.label}
+          getSubtitle={() => '本地示例素材'}
+          getAriaLabel={(asset) => `选择${asset.label}`}
+          isSelected={(asset) => asset.id === selectedAssetId}
+          onSelect={(asset) => onSelectAsset(asset.id)}
+          selectLabel="选择"
+          gridClassName="grid grid-cols-2 gap-2 sm:grid-cols-4"
+        />
+      </ShowcaseSection>
+
+      <ShowcaseSection title="反馈 / 异步状态">
+        <div className="showcase-row showcase-row--wrap">
+          {(['content', 'loading', 'empty', 'error'] as const).map((mode) => (
+            <Button
+              key={mode}
+              size="sm"
+              variant={asyncMode === mode ? 'primary' : 'secondary'}
+              onClick={() => onAsyncModeChange(mode)}
+            >
+              {mode === 'content'
+                ? '内容'
+                : mode === 'loading'
+                  ? '加载中'
+                  : mode === 'empty'
+                    ? '空态'
+                    : '错误'}
+            </Button>
+          ))}
+        </div>
+        <div className="mt-3">
+          <PlatformAsyncStatePanel
+            isLoading={asyncMode === 'loading'}
+            isEmpty={asyncMode === 'empty'}
+            errorState={
+              asyncMode === 'error' ? (
+                <PlatformRuntimeStatusToast tone="error" surface="light">
+                  读取失败，请重试
+                </PlatformRuntimeStatusToast>
+              ) : null
+            }
+            loadingState={
+              <PlatformRuntimeStatusToast tone="info" surface="light">
+                正在读取素材…
+              </PlatformRuntimeStatusToast>
+            }
+            emptyState={
+              <PlatformEmptyState surface="dashed" size="inline">
+                暂无可展示内容
+              </PlatformEmptyState>
+            }
+          >
+            <div className="showcase-platform-toast-stack">
+              <PlatformRuntimeStatusToast tone="success" surface="light">
+                已保存
+              </PlatformRuntimeStatusToast>
+              <PlatformRuntimeStatusToast tone="warning" surface="solid">
+                即将过期
+              </PlatformRuntimeStatusToast>
+              <PlatformRuntimeStatusToast tone="info" surface="dark">
+                同步中
+              </PlatformRuntimeStatusToast>
+            </div>
+          </PlatformAsyncStatePanel>
+        </div>
+      </ShowcaseSection>
+
+      <ShowcaseSection title="信息 / 指标 / 列表行">
+        <PlatformStatGrid
+          items={[
+            { label: '作品数', value: '24' },
+            { label: '已发布', value: '18' },
+            { label: '收藏', value: '1.2k' },
+          ]}
+          columns="three"
+          surface="plain"
+        />
+        <div className="showcase-platform-info-list">
+          <PlatformInfoBlock label="最近同步" variant="compactRow">
+            2 分钟前
+          </PlatformInfoBlock>
+          <PlatformNavigableListItem
+            leading={<Badge tone="success">在线</Badge>}
+            trailing={<span aria-hidden="true">›</span>}
+            onClick={() => onFeedback('打开项目工作台')}
+          >
+            <strong>项目工作台</strong>
+            <span className="showcase-platform-list-subtitle">
+              点击进入详情
+            </span>
+          </PlatformNavigableListItem>
+        </div>
+      </ShowcaseSection>
+
+      <Modal
+        open={filterOpen}
+        title="筛选示例"
+        description="选择后会同步到入口，点击完成关闭面板。"
+        onClose={onCloseFilter}
+        footer={
+          <Button variant="secondary" onClick={onCloseFilter}>
+            完成
+          </Button>
+        }
+      >
+        <div className="showcase-filter-options">
+          {['全部', '草稿', '已发布'].map((option) => (
+            <Button
+              key={option}
+              variant={filterTab === option ? 'primary' : 'secondary'}
+              onClick={() => onFilterTabChange(option)}
+            >
+              {option}
+            </Button>
+          ))}
+        </div>
+      </Modal>
+    </div>
+  );
+}
+
+function ShowcaseSection({
+  title,
+  children,
+}: {
+  title: string;
+  children: ReactNode;
+}) {
+  return (
+    <Subpanel title={title} className="shared-components-showcase__section">
+      {children}
+    </Subpanel>
+  );
+}
+
+function TokenReference() {
+  return (
+    <div className="shared-components-showcase__token-grid">
+      {[
+        ['Accent', 'var(--platform-accent)'],
+        ['Panel', 'var(--platform-panel-fill)'],
+        ['Border', 'var(--platform-subpanel-border)'],
+        ['Strong text', 'var(--platform-text-strong)'],
+        ['Muted text', 'var(--platform-text-soft)'],
+        ['Focus', 'var(--platform-input-focus-ring)'],
+      ].map(([label, value]) => (
+        <Subpanel key={label} title={label} padding="sm">
+          <div className="showcase-token-value" style={{ background: value }} />
+          <code>{value}</code>
+        </Subpanel>
+      ))}
+    </div>
+  );
+}
+
+function StateReference() {
+  return (
+    <Subpanel title="交互状态">
+      <div className="showcase-state-list">
+        <span>
+          <span className="showcase-dot showcase-dot--default" />
+          默认
+        </span>
+        <span>
+          <span className="showcase-dot showcase-dot--hover" />
+          悬停
+        </span>
+        <span>
+          <span className="showcase-dot showcase-dot--focus" />
+          聚焦
+        </span>
+        <span>
+          <span className="showcase-dot showcase-dot--disabled" />
+          禁用
+        </span>
+      </div>
+      <p className="showcase-copy">
+        所有可交互组件都提供原生语义、键盘焦点样式和 disabled 状态。
+      </p>
+    </Subpanel>
+  );
+}
diff --git a/src/components/shared-components/sharedComponentsShowcase.css b/src/components/shared-components/sharedComponentsShowcase.css
new file mode 100644
index 000000000..f064b9ea6
--- /dev/null
+++ b/src/components/shared-components/sharedComponentsShowcase.css
@@ -0,0 +1,244 @@
+.shared-components-showcase {
+  min-height: 100vh;
+  overflow-y: auto;
+  background: var(--platform-body-fill, #f8efe7);
+  color: var(--platform-text-strong, #3d1f10);
+}
+
+.shared-components-showcase__inner {
+  width: min(1180px, 100%);
+  margin: 0 auto;
+  padding: clamp(1.25rem, 3vw, 3rem) clamp(1rem, 4vw, 2.5rem) 4rem;
+}
+
+.shared-components-showcase__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.shared-components-showcase__header h1 {
+  margin: 0.7rem 0 0;
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  letter-spacing: -0.03em;
+}
+
+.shared-components-showcase__header p {
+  margin: 0.5rem 0 0;
+  color: var(--platform-text-soft, #988476);
+  font-size: 0.9rem;
+}
+
+.shared-components-showcase__feedback {
+  margin: -0.5rem 0 1rem;
+}
+
+.shared-components-showcase__tabs {
+  width: min(100%, 28rem);
+  margin-bottom: 1.25rem;
+}
+
+.shared-components-showcase__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.shared-components-showcase__platform-grid {
+  display: grid;
+  align-items: start;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.showcase-platform-mobile-toolbar {
+  display: none;
+}
+
+.showcase-platform-desktop-toolbar {
+  display: block;
+}
+
+.showcase-platform-media-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  align-items: stretch;
+  gap: 0.75rem;
+}
+
+.showcase-platform-media-row > * {
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+}
+
+.showcase-platform-media-row > .platform-media-frame {
+  min-height: 7rem;
+}
+
+.showcase-platform-upload-preview-shell {
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  min-height: 7rem;
+}
+
+.showcase-filter-options {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.showcase-platform-toast-stack {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.showcase-platform-info-list {
+  display: grid;
+  gap: 0.625rem;
+  margin-top: 0.75rem;
+}
+
+.showcase-platform-list-subtitle {
+  display: block;
+  margin-top: 0.2rem;
+  color: var(--platform-text-soft);
+  font-size: 0.75rem;
+}
+
+.shared-components-showcase__section {
+  min-width: 0;
+}
+
+.showcase-row {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.showcase-row--wrap {
+  flex-wrap: wrap;
+}
+
+.showcase-row--between {
+  justify-content: space-between;
+}
+
+.showcase-stack {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.showcase-copy {
+  margin: 0 0 0.875rem;
+  color: var(--platform-text-base, #6f5848);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+.shared-components-showcase__token-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.showcase-token-value {
+  width: 100%;
+  height: 2.75rem;
+  margin-bottom: 0.625rem;
+  border: 1px solid var(--platform-subpanel-border);
+  border-radius: 0.625rem;
+}
+
+.showcase-token-value + code {
+  display: block;
+  overflow: hidden;
+  color: var(--platform-text-soft);
+  font-size: 0.7rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.showcase-state-list {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.showcase-state-list > span {
+  display: grid;
+  justify-items: center;
+  gap: 0.4rem;
+  color: var(--platform-text-base);
+  font-size: 0.75rem;
+}
+
+.showcase-dot {
+  display: block;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 1px solid var(--platform-subpanel-border);
+  border-radius: 0.625rem;
+  background: var(--platform-panel-fill);
+}
+
+.showcase-dot--hover {
+  border-color: var(--platform-surface-hover-border);
+  background: var(--platform-warm-bg);
+}
+
+.showcase-dot--focus {
+  box-shadow: 0 0 0 3px var(--platform-input-focus-ring);
+}
+
+.showcase-dot--disabled {
+  opacity: 0.45;
+}
+
+@media (max-width: 760px) {
+  .shared-components-showcase__grid,
+  .shared-components-showcase__platform-grid,
+  .shared-components-showcase__token-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .showcase-platform-media-row {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .showcase-filter-options {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 480px) {
+  .shared-components-showcase__header {
+    flex-direction: column;
+  }
+
+  .shared-components-showcase__header > .genarrative-ui-icon-button {
+    align-self: flex-end;
+  }
+
+  .showcase-row {
+    flex-wrap: wrap;
+  }
+
+  .showcase-platform-media-row {
+    grid-template-columns: 1fr;
+  }
+
+  .showcase-platform-desktop-toolbar {
+    display: none;
+  }
+
+  .showcase-platform-mobile-toolbar {
+    display: block;
+  }
+}
diff --git a/src/routing/activeAppRoutes.test.ts b/src/routing/activeAppRoutes.test.ts
index 2d7ac1866..f3ce768fe 100644
--- a/src/routing/activeAppRoutes.test.ts
+++ b/src/routing/activeAppRoutes.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest';
 
 import {
   matchAppRoute,
+  resolveAppRoute,
   shouldUseRecommendationRouteLoading,
 } from './activeAppRoutes';
 
@@ -13,6 +14,19 @@ describe('matchAppRoute', () => {
     expect(matchAppRoute('/creation/rpg')).toEqual({ kind: 'platform' });
     expect(matchAppRoute('/runtime/puzzle')).toEqual({ kind: 'platform' });
   });
+
+  it('exposes the framework-free shared component showcase', () => {
+    expect(matchAppRoute('/components')).toEqual({
+      kind: 'shared-components',
+    });
+    expect(matchAppRoute('/components/')).toEqual({
+      kind: 'shared-components',
+    });
+    expect(matchAppRoute('/design-system')).toEqual({
+      kind: 'shared-components',
+    });
+    expect(resolveAppRoute('/components').kind).toBe('shared-components');
+  });
 });
 
 describe('shouldUseRecommendationRouteLoading', () => {
diff --git a/src/routing/activeAppRoutes.tsx b/src/routing/activeAppRoutes.tsx
index d4e5e1f7c..1a8165479 100644
--- a/src/routing/activeAppRoutes.tsx
+++ b/src/routing/activeAppRoutes.tsx
@@ -6,9 +6,13 @@ type AppRouteComponent = LazyExoticComponent<
   ComponentType<Record<string, unknown>>
 >;
 
-export type AppRouteMatch = {
-  kind: 'platform';
-};
+export type AppRouteMatch =
+  | {
+      kind: 'platform';
+    }
+  | {
+      kind: 'shared-components';
+    };
 
 export type ResolvedAppRoute = {
   kind: AppRouteMatch['kind'];
@@ -20,16 +24,33 @@ export type ResolvedAppRoute = {
 const PlatformApp = lazy(
   () => import('../AuthenticatedApp'),
 ) as AppRouteComponent;
+const SharedComponentsShowcasePage = lazy(
+  () => import('../components/shared-components/SharedComponentsShowcasePage'),
+) as AppRouteComponent;
 
 export function shouldUseRecommendationRouteLoading() {
   return false;
 }
 
-export function matchAppRoute(_pathname = ''): AppRouteMatch {
+export function matchAppRoute(pathname = ''): AppRouteMatch {
+  const normalizedPath = pathname.trim().toLowerCase().replace(/\/+$/u, '');
+  if (normalizedPath === '/components' || normalizedPath === '/design-system') {
+    return { kind: 'shared-components' };
+  }
+
   return { kind: 'platform' };
 }
 
-export function resolveAppRoute(_pathname = ''): ResolvedAppRoute {
+export function resolveAppRoute(pathname = ''): ResolvedAppRoute {
+  if (matchAppRoute(pathname).kind === 'shared-components') {
+    return {
+      kind: 'shared-components',
+      loadingEyebrow: '正在载入共享组件',
+      loadingText: '正在加载组件展示页',
+      Component: SharedComponentsShowcasePage,
+    };
+  }
+
   return {
     kind: 'platform',
     loadingEyebrow: '正在载入平台',
diff --git a/tsconfig.json b/tsconfig.json
index cafa2519b..2b578d733 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,7 +19,22 @@
       ],
       "@genarrative/image-canvas-react": [
         "./packages/image-canvas-react/src/index.ts"
-      ]
+      ],
+      "@genarrative/shared": ["./packages/shared/src/index.ts"],
+      "@genarrative/shared/components": [
+        "./packages/shared/src/components/index.ts"
+      ],
+      "@genarrative/shared/components/account": [
+        "./packages/shared/src/components/account.ts"
+      ],
+      "@genarrative/shared/components/ui": [
+        "./packages/shared/src/components/ui/index.ts"
+      ],
+      "@genarrative/shared/components/ui/*": [
+        "./packages/shared/src/components/ui/*"
+      ],
+      "@genarrative/shared/lib/*": ["./packages/shared/src/lib/*"],
+      "@genarrative/shared/lib": ["./packages/shared/src/lib/index.ts"]
     },
     "allowImportingTsExtensions": true,
     "noEmit": true
diff --git a/vite.config.ts b/vite.config.ts
index 4bf40e121..381db9e5e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -591,6 +591,46 @@ export default defineConfig(({ mode }) => {
             'packages/image-canvas-react/src/index.ts',
           ),
         },
+        {
+          find: '@genarrative/shared/styles.css',
+          replacement: path.resolve(
+            __dirname,
+            'packages/shared/src/components/styles.css',
+          ),
+        },
+        {
+          find: '@genarrative/shared/theme.css',
+          replacement: path.resolve(__dirname, 'packages/shared/src/theme.css'),
+        },
+        {
+          find: '@genarrative/shared/components/ui',
+          replacement: path.resolve(
+            __dirname,
+            'packages/shared/src/components/ui/index.ts',
+          ),
+        },
+        {
+          find: '@genarrative/shared/lib',
+          replacement: path.resolve(__dirname, 'packages/shared/src/lib'),
+        },
+        {
+          find: '@genarrative/shared/components/account',
+          replacement: path.resolve(
+            __dirname,
+            'packages/shared/src/components/account.ts',
+          ),
+        },
+        {
+          find: '@genarrative/shared/components',
+          replacement: path.resolve(
+            __dirname,
+            'packages/shared/src/components/index.ts',
+          ),
+        },
+        {
+          find: '@genarrative/shared',
+          replacement: path.resolve(__dirname, 'packages/shared/src/index.ts'),
+        },
       ],
       dedupe: ['react', 'react-dom'],
     },
diff --git a/vitest.config.ts b/vitest.config.ts
index d66cb416f..0233fffa9 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -97,6 +97,7 @@ export default defineConfig({
       'src/components/auth/**/*.test.tsx',
       'src/components/creation-home/**/*.test.ts',
       'src/components/creation-home/**/*.test.tsx',
+      'src/components/shared-components/**/*.test.tsx',
       'src/components/common/AutoGrowTextArea.test.tsx',
       'src/components/common/CreativeImageInputPanel.test.tsx',
       'src/components/common/PlatformDangerConfirmDialog.test.tsx',