# @manohub/kit

> 子应用入口编排层：createSubApp（作用域容器与宿主锚点、pinia/路由/vue-query 装配、宿主挂载协议）、i18n 单实例与语言探测，外加随包分发的接入契约（CONTRACT.md，五层闭集条款 + 自检清单）与三个 AI 技能包。本包**零样式产物**：设计令牌（值）在 @manohub/theme，组件（类与行为）在 @manohub/ui，两者由消费方直接引入。

Latest version **0.7.0** (published 2026-09-24) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @manohub/kit
pnpm add @manohub/kit
yarn add @manohub/kit
bun add @manohub/kit
```

Provides the command `kit`.

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.7.0 |
| Published | 2026-09-24 |
| First published | 2026-09-23 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 210.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tsing-y |

## Links

- npm: https://www.npmjs.com/package/@manohub/kit
- Repository: https://git.iec.io/gsp-cloud-ds/dip/ibp/aihub/frontend-infra
- npm.io page: https://npm.io/package/@manohub/kit

## Recent versions

- 0.7.0 (latest) — 2026-09-24
- 0.6.1 — 2026-09-23
- 0.6.0 — 2026-09-23

## README

# @manohub/kit

AIHub 子应用**入口编排层**：`createSubApp` 统一挂载、i18n 单实例，
外加随包分发的接入契约（`CONTRACT.md`：五层闭集条款 + §7 自检清单）与三个 AI 技能包（`skills/`）。

**组件与命令式服务不在本包** —— 它们来自 [`@manohub/ui`](https://www.npmjs.com/package/@manohub/ui)；
**全局令牌（值）不在本包** —— 它来自 [`@manohub/theme`](https://www.npmjs.com/package/@manohub/theme)；
**本包也不发布任何样式** —— 上面两行由消费方直接引。几个包并列安装。

> **0.6.0 是破坏性变更**（上一个已发布版本是 `@manohub/app-kit@0.4.3`）：本包不再提供任何组件
> （`App*` 前缀名与 `.ak-*` 类名全部退场、farris 依赖移除）、**主题层独立为 `@manohub/theme`**
> （容器锚改名 `data-manohub-ui`）、**本包内的样式全部删除**（`reset.css` 与 `.app-markdown`
> 富文本预设不再提供）、**消费侧机器规则整批下线**（原 `kit lint` 三条护栏不再发布，
> 合规改为「契约条款 + §7 自检清单」）。
> 这些是**同一次重构**，一次性做完 —— 迁移对照与步骤见 `CONTRACT.md` §12。

## 新项目接入（快速开始）

### 1. 安装

```bash
pnpm add @manohub/kit @manohub/ui @manohub/theme
```

peer（由应用提供，缺一个都装不上）：

```bash
pnpm add vue vue-router pinia vue-i18n @tanstack/vue-query
```

`@manohub/ui` 自带图标包依赖（`@manohub/icon`），不必单独声明。

### 2. 样式：两行 + 应用自己一行（顺序即契约）

**本包不发布任何样式**：设计令牌（值）在 `@manohub/theme`、组件面（类 + 组件令牌基础值）在
`@manohub/ui`，两行由消费方直接引；本包不再提供 reset、富文本预设与样式汇总入口。

```css
@import "@manohub/theme/default.css";   /* ① 令牌（值）—— 换主题只换这一行 */
@import "@manohub/ui/styles.css";   /* ② 组件面（类 + 组件令牌基础值） */
@import "./app.css";                    /* ③ 应用自身（只写布局） */
```

**顺序不可换**：先值（令牌）后面（组件面）—— 反过来的话组件面里的 `var(--ui-*)` 全是空值。

改用非兜底主题：把 ① 换成对应主题入口 + 给容器属性 ——

```css
@import "@manohub/theme/farris.css";  /* 替换 ① 那一行 */
```

```ts
createSubApp({ /* … */ theme: 'farris' })    // 写到容器的 data-theme 上
```

主题套锚在容器属性上（`default` 不带主题属性、其余套锚 `[data-manohub-ui][data-theme='<名>']`），
所以换皮不动类名、不动组件代码、不重打包。

### 3. 入口：统一走 createSubApp

```ts
// src/main.ts
import { createSubApp } from '@manohub/kit/entry'
import Root from './root'
import { routes } from './router'

export const { mount, unmount } = createSubApp({
  rootComponent: Root,
  routes,
  i18n: { messages: { zh, en } }, // vue-i18n 形态：{ zh: {...}, en: {...} }，无 translation 包装层
})
```

它替你做完：`div.app-container` 包裹与 `data-manohub-ui` 锚点、pinia / vue-router / vue-query 装配、
宿主挂载协议（`window.mount/unmount` + `microApp.mount/unmount`）、宿主语言同步、首帧路由重置。

`data-manohub-ui` 是**跨包唯一的作用域锚点**（主题令牌、组件令牌、微前端 scopecss 都锚在它上面，
组件库服务层也按它解析宿主）—— 别改名；若自建容器（不走 `createSubApp`）必须自己带上。
类名 `.app-container` 只是本包内部命名（调试自查用），不是契约。

### 4. 第一个页面用模板 A

```tsx
import { Button, Input, Page, Panel, Table } from '@manohub/ui'

export default function SkillList() {
  return (
    <Page>
      <Page.Header title="技能列表" extra={<Input placeholder="搜索" />} />
      <Page.Body mode="plain">
        <Panel title="技能列表" actions={<Button variant="primary">新建</Button>}>
          <Table data={rows} columns={columns} />
          <Panel.Footer>分页放这里</Panel.Footer>
        </Panel>
      </Page.Body>
    </Page>
  )
}
```

三种页面模板、四种操作位、两级滚动归属、分页归属 —— 见 `CONTRACT.md` §5（L2 结构）。

### 5. 自检（0.6.0 起没有自动扫描）

本包**不再发布消费侧机器规则**。合规靠契约条款 + 自检清单在写作与评审时把关：

1. 写代码前按契约 §0 权威源表去取值 / 查件名 / 查词表（不要抄一份会过期的副本）；
2. 收工前人工过 `CONTRACT.md` §7 自检清单（24 问，五层各一组）；
3. 类型与构建照常跑：

```bash
pnpm exec vue-tsc --noEmit
pnpm build
```

类名命名空间表放本仓 `docs/kit-namespaces.md`（per-app 文件，格式见技能包的
`kit-migrate/references/migration-playbook.md`）—— 原 `appkit-guardrails.config.json` 不再被读取。

### 6. 技能包落盘（AI 代理用）

```bash
pnpm exec kit install            # 把三个技能落到本工程的技能目录
pnpm exec kit install --dry-run  # 先看会写什么
```

### 7. 验收

- 应用能挂载（`window.mount()` / micro-app 容器）；
- 类型检查 0 错、构建成功；
- 命令式提示落回应用容器（`toast('success', 'ok')` 后检查 DOM 里 `[data-manohub-ui]` 内有 `.mh-toast`）；
- `CONTRACT.md` §7 自检清单逐条过完。

## 分发形态

预编译产物：`exports` 指向 `dist`。公开入口（改名即破坏性变更）：

| 入口 | 内容 |
| --- | --- |
| `@manohub/kit` | `useClientPagination`、`resolveAppContainer` / `resolveAppContainerSelector` |
| `@manohub/kit/entry` | `createSubApp`、`installInitialGuard`、`createQueryClient`、`applyLocale` / `getLocale` / `i18n` / `setupI18n` |
| `@manohub/kit/CONTRACT.md` | 接入契约（权威规范：五层闭集条款 + §7 自检清单） |

**本包没有任何样式出口**（0.6.0 起）：`./styles.css`、`./reset.css`、`./markdown.css` 都已删除。
样式请引 `@manohub/theme` 与 `@manohub/ui` 的公开入口（见上面 §2）。

## 技能包（AI 代理用，随包分发）

| 技能 | 什么时候用 |
| --- | --- |
| `kit` | 不确定该用哪个子技能、问骨架层总体规范、要接入步骤与升级口径 |
| `kit-dev` | 写/改页面：选模板、选组件与 prop、样式纪律、收工前自检 |
| `kit-migrate` | 存量应用改造：按契约分层盘点、划批次、逐文件替换、逐层收口 |

## 来源

包内实现由 `gsp-cloud-ds/dip/ibp/aihub/aihub-frontend` 的 `kit` 分支首提交导入
（commit `315b60f`），再按「组件与服务独立成 `@manohub/ui`、本包只留入口编排」拆分而成。
迁移来源 commit 只作留档，不要据此回改本包实现。

---
_Source: https://npm.io/package/@manohub/kit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._