同一套组件，构建这个网站和你的应用。

从本地包开始

当前源码位于私有仓库。本地安装后即可使用，不需要访问公开包仓库。

npm install ~/Codes/UI/packages/ui

@import '@sofish/ui/styles.css';

import { mount } from '@sofish/ui/browser';
const approval = mount(document.querySelector('#example'), 'approval', {
  title: '允许导出报告？',
  description: '导出前确认范围，应用负责执行操作。',
  approveLabel: '允许导出'
});
approval.element.addEventListener('ui:decision', ({ detail }) => {
  console.log(detail.value); // approved | rejected
});

属性、事件和生命周期

mount(host, name, props) 返回 element、update(partialProps) 和 destroy()。更新会重新渲染；销毁会释放监听器、计时器和媒体资源。事件名称统一为 ui:*，数据在 event.detail.value。

服务端使用 renderComponent(name, props)，浏览器调用 hydrate(container)。同一实例重复 hydrate 不会重复绑定。函数适配器通过 mount 传入，不写进 HTML。

通过 CSS 变量定制主题；在祖先上设置 data-mode="dark" 切换深色。目录、详情与对比中的预览均可直接操作。状态按钮通过公开属性更新组件，重置会恢复初始数据。包的 compact: true 仍用于明确不可操作的缩略图，网站预览不使用此选项。

AI 与媒体连接到你的服务

Stream 接收异步可迭代数据源，Voice Recorder 在用户点击后请求麦克风，Live Session 接收可取消的连接适配器。网站中的语音示例显式使用 demo 模式，不访问设备或建立外部连接。UI 不内置模型服务、上传后端或执行权限；审批事件由应用验证后执行。

生成式 UI 只接受已注册的组件名称和结构化属性，不执行生成代码。虚拟列表使用固定行高；网格支持排序、单元格编辑和键盘导航，不声称覆盖大型电子表格的全部功能。

73 个组件，同一个入口