示例

六个可独立部署的沙盒使用同一 Orbz 公开 API。有意共享布局、标签、控件、默认值和纯 CSS 呈现，只有框架集成不同。

展示域名是部署目标。DNS 和生产部署与本文档框架分别管理。

每个沙盒展示什么

• 五个状态及各自动效
• 大小和速度控制
• 暂停、阴影和减少动态效果
• 六个内置预设
• 严格的五色自定义配色
• 预设与自定义配色模式的明确切换
• 框架原生状态控制相同 <orb-z> 契约
• 封闭 Shadow DOM 之外的语义状态文字

相同 UI 是演示的一部分：采用 Web 组件后，不应仅因一处使用 Vue、另一处使用 React 就产生不同产品体验。

运行沙盒工作区

在仓库根目录：

pnpm install --frozen-lockfile
pnpm build

pnpm build 使用已发布的 Orbz 包构建全部六个应用。使用根目录展示命令同时启动开发服务器：

pnpm showcase

各沙盒使用表中端口，可同时运行六个而不冲突。

部署为独立 Vercel 项目

为每个沙盒创建 Vercel 项目，并将对应文件夹设为 Root Directory：

sandbox/vanilla
sandbox/react
sandbox/vue
sandbox/svelte
sandbox/angular
sandbox/next

每个沙盒设为私有，具有自己的框架依赖、构建配置和本地 vercel.json。它们是仓库工具与展示，不包含在 npm 包中。

各展示将精确的已发布 Orbz 版本作为普通依赖，绝不能导入包的 src/ 或另一沙盒应用。

比较集成方式，而非设计

用沙盒回答框架相关问题：

• 浏览器注册应放在哪里？
• 框架如何绑定自定义元素的布尔属性？
• 哪种编译器设置能识别 orb-z？
• TypeScript 如何获得 OrbzState 和 OrbzElement？
• React/Next 客户端边界从哪里开始？

简洁方案见框架集成方案。独立部署的混合框架界面见微前端中的 Orbz。