安装

每个项目用 subtree 把这个仓库放进自己的 vendor/ui，然后在该项目里提交。那是项目里的普通目录，本地和线上编译的是同一份已提交的文件。

给 agent 的完整步骤在仓库根目录的 AGENTS.md。安装时，agent 还要把推送上游、拉取上游，以及把项目里的组件抽进库的步骤，写进该项目自己的 agent markdown。

git subtree add --prefix=vendor/ui https://github.com/0froq/ui.git main --squash
pnpm add ./vendor/ui

依赖用 file 协议指向 vendor/ui。

在项目里改 vendor/ui/src/...，然后提交这个项目。别的项目各自有自己的一份，不会跟着变。

要把这个项目里的改动送回上游，在项目根目录执行：

git subtree push --prefix=vendor/ui https://github.com/0froq/ui.git main

这个项目要跟上上游时：

git subtree pull --prefix=vendor/ui https://github.com/0froq/ui.git main --squash

引用

字体不在包里。paper 用 Instrument Serif、Geist、Geist Mono，项目自己引。没引就退回系统字体。

import '@froq/ui/paper/style.css'
import { Choice, Toggle } from '@froq/ui/paper'

<div class="ui-paper">
  <Choice
    v-model="tone"
    label="Tone"
    :options="[
      { value: 'quiet', label: 'quiet' },
      { value: 'loud', label: 'loud' },
    ]"
  />
</div>

包里是源码（.vue、.ts、.css），由使用方的构建工具编译。Vite 直接可用。

Nuxt

这个文档站就是这么接的。build.transpile 让 Nuxt 去编译包里的 .vue。

export default defineNuxtConfig({
  css: ['@froq/ui/paper/style.css'],
  build: { transpile: ['@froq/ui'] },
})

要三种风格都出现在同一页，把另外两份 style.css 也放进 css。