# @cssints/tui 中文文档

规范地址：https://npmcn.com/package/%40cssints/tui/

版本：0\.35\.1
npm 元数据更新时间：2026-11-07T14:56:06.768Z
中文译文更新时间：2026-11-11T03:45:35.519Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cssints/tui
原文对照：https://npmcn.com/package/%40cssints/tui/?lang=original
项目主页：https://cssints.dev/
源码仓库：https://github.com/alexeiaccio/css-in-ts-compiler

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：64.4 kB，12 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：1 个
- peer 依赖：cssints ^0\.35\.0，@bomb\.sh/tty \>=0\.9\.0，@opentui/core \>=0\.5\.17
- 首次发布：2026-10-10T20:57:57.315Z
- 最新版本发布：2026-11-07T14:56:06.450Z
- 近 30 天下载量：7326（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：42（近 12 个月 42 个）

## 中文简介

已折旧: cssints 寄存器中的终端目标 / 替换此选项 。 用于现有应用程序:csints/tui样式(状态,光标,主题)及其OpenTUI和@bomb.sh/tty适配器的运行时间

## 安装

```sh
npm install @cssints/tui
```

也可以使用：`pnpm add @cssints/tui`、`yarn add @cssints/tui`、`bun add @cssints/tui`

## README

# @ cssints/ tui (英语)

> **已贬值(2026-10-21).** 替换是 `terminal/` 目标 [`native/`](https://npmcn.com/package/native/README.md) 在此寄存器中( e)[土生土长/地上](https://npmcn.com/package/native/terminal): `cssints/clay` 样式,由 [克莱](https://github.com/nicbarker/clay) 并绘制入字符单元格 [术语框2](https://github.com/termbox/termbox2),键盘焦点层在 C. 包裹还有效,而且 仍然发布; 导入它打印出一个警告( “ ”`@cssints/tui` “......”)。 登记表标出版本 发行时贬值 `npm deprecate` (见 [相关内容](https://npmcn.com/package/RELEASING.md)) (中文(简体) ).

| 给 | 那边`native/terminal/`(中文(简体) ) |
| --- | --- |
| `cssints/tui` 样式, Vite 插件 | `cssints/clay` 风格, `generator/clay-header.ts` · C页头(`styles.h`(中文(简体) ) |
| 适配器的布局(`resolve`,一个弹性盒) | Clay 准备完毕; `terminal/measure.c` 以单相距网格表示的计量文本 |
| OpenTUI (英语:`/opentui`) 或 @ bomb.sh/tty (中文(简体) )`/bomb`(中文(简体) ) | `terminal/render.c` 填充单元格, `terminal/tb2.c` 是名词框2:正色或256,密钥,鼠标 |
| `:focus` 从可翻译文本中删除 | `terminal/focus.c`: Tab 顺序,在一组中显示焦点, `focus(id)` |
| 固态或反应树 | 手写 C 页 : `terminal/page.c` (传感器页), `sky.c`, (中文(简体) ), `thread.c`, (中文(简体) ), `profile.c` |

结转内容:样式作为数据(a) `styles.ts` 模块、没有工作表和级联、符号和命名主题(静态) 黑暗和光明的),以及州名(`:hover`, (中文(简体) ), `:active`, (中文(简体) ), `:focus`)作为叠加. 没有的: OpenTUI 和 炸弹。sh,运行时间 `setTheme` 和系统主题,徘徊(termbox2报告没有运动),图像,一个包裹身体, 宽的甘油和埃莫吉 浮出水面 子细胞边框和光度. [本地/文献/地图](https://npmcn.com/package/native/docs/map.md) 步骤6是完整账户.

```sh
cd ../../native
sh terminal/build.sh                    # styles.ts -> generator/clay-header.ts -> styles.h, then cc -> terminal/demo
./terminal/demo                         # the Sensors page in cells: Tab, Up/Down, Space, t, q
./terminal/demo --page sky              # apps/csssky-tui's feed; enter opens the thread
./terminal/demo --page profile          # apps/csssky's profile, the screen the tui never had
./terminal/demo --dump out.txt          # one frame headless, '.' is a fill
./terminal/demo --keys Tab,ArrowDown --dump out.txt   # a frame after each key
```

此文件的其余部分描述了已贬值的软件包: [点缀](https://npmcn.com/package/README.md) 在终端,运行时间 `cssints/tui` 样式(状态、鼠标指针、护栏、主题)及其适配器 [打开TUI](https://opentui.com/) 财务报告和审定财务报表 [@bomb.sh/tty (英语)](https://bomb.sh/docs/tty/api/)样式用 `cssints/tui`,csints Vite插件将它编译为道具对象;这个软件包将它们放入可渲染器上。 设计 进入 [文献/研究/图伊·姆德](https://npmcn.com/package/docs/research/tui.md)。 。 。 .

```ts
// styles.ts
import * as css from "cssints/tui" with { type: "cssints" };

export const t = css.createTokens({
  color: { $type: "color", bg: { $value: "#1e1e2e" }, accent: { $value: "#89b4fa" } },
});
css.createGlobalTheme(t, "light", { color: { bg: "#eff1f5", accent: "#1e66f5" } });

export const button = css.cn(
  css.border("rounded", "#585b70"),
  css.p(0, 1),
  css.bg(t.color.bg),
  css.cursor("pointer"),
  css.hover(css.borderColor(t.color.accent)),
  css.active(css.borderStyle("double")),
);
```

插件替换 `button` 通过:

```js
export const button = {
  border: true,
  borderStyle: "rounded",
  borderColor: "#585b70",
  paddingTop: 0,
  paddingRight: 1,
  paddingBottom: 0,
  paddingLeft: 1,
  backgroundColor: "#1e1e2e",
  cursor: "pointer",
  ":hover": { borderColor: "#89b4fa" },
  ":active": { border: true, borderStyle: "double" },
  themes: { light: { backgroundColor: "#eff1f5", ":hover": { borderColor: "#1e66f5" } } },
  vars: { backgroundColor: "color-bg", ":hover": { borderColor: "color-accent" } }, // for a run-time theme
};
```

```tsx
import { attach, setTheme, use } from "@cssints/tui/opentui";

<box {...use(button)}>
  <text>Save</text>
</box>; // Solid or React
<text {...use(() => (active() ? tabActive : tab))}>Home</text>; // a style that changes
attach(new BoxRenderable(renderer, {}), button); // core
setTheme("light"); // every attached renderable
```

## 规则

-   `attach(renderable, style)` 设置样式道具,使其与 `:hover` (鸣叫) `over` 改为 `out`, (中文(简体) ), `:active` (单位:千美元)`down` 改为 `up`和 `:focus` (单位:千美元)`focused` 改为 `blurred`; 需要一个框 `focusable: true`),则在该词中 优先级,以 `setTheme`。自定义 `onMouseOver` 而其他的操作员仍然运行.
-   `cursor` 是在可转换的上方的鼠标指针(`renderer.setMousePointer`,《业务服务标准第22号》), `"default"` 又出来了. `caretShape`, (中文(简体) ), `caretColor` 财务报告和审定财务报表 `caretAnimation` 这是 `cursorStyle` 财务报告和审定财务报表 `cursorColor` 输入或文本区域.
-   `color` 这是OpenTUI的 `fg`· ; `backgroundColor` 实值 `backgroundColor` 在一个盒子和 `bg` 文本; 文本属性 (单位:千美元)`fontWeight`, (中文(简体) ), `fontStyle`, (中文(简体) ), `textDecoration`是位数 `attributes`的道具没有 未设置, 因此一个框上的文本样式无所作为: 放在 `<text>`。在可编辑的或选定的部分上, `color` 实值 `textColor`。 。 。 .
-   突出焦点的可渲染颜色: `focusedBorderColor` 在一个盒子上(还有一个子孙拥有 重点), `focusedBackgroundColor` 财务报告和审定财务报表 `focusedTextColor` 在可编辑或选择的上。 每一个都遵循风格 当前状态下的颜色,所以焦点框绘制其 `:focus` 边框.
-   `attach` 在可变件上,它附带了互换样式:状态、主题和钩子都留下,只有道具 旧样式设定回到了可渲染器自己的值,鼠标下指针跟随新的 `cursor`。 。 。 . `use(() => style)` 每次Ref运行时重读访问器: Solid在渲染效果中运行一个 ref,所以一个信号 访问者读取了样式相换; React 调用每个渲染的新版本 .
-   文本节点( A)`<span>`, (中文(简体) ), `<a>`, (中文(简体) ), `<b>`)取道具和主题. 它没有鼠标事件,也没有焦点,所以它有 无状态: 已放 `:hover` 编辑 `<text>` 围绕它.
-   `resolve(style, state, theme)` 联 合 国 `@cssints/tui` 是渲染器中性部分:一个样式的道具处于一种状态,一个 ,用于另一个适配器.

## 二. 系统主题

运行时从终端自身颜色中计算出的主题:每个颜色符是角色,一个hue源(ANSI) 颜色,或终端 `fg`编号 :`bg`将规则与它所坐的标志相对应.

```ts
// theme.ts: run time, not a cssints module
import { createSystemTheme } from "@cssints/tui/system";

import { t } from "./styles.ts";

export const system = createSystemTheme(
  t,
  {
    color: {
      bg: { surface: true }, // the terminal's background
      card: { surface: true, on: [t.color.bg], contrast: 1.1 }, // a panel 1.1:1 from it
      text: { hue: "fg", on: [t.color.bg, t.color.card], contrast: 7 },
      accent: { hue: "blue", on: [t.color.bg, t.color.card], contrast: 3 },
    },
  },
  { hues: { blue: "#89b4fa" }, themes: { light: "light" } },
);
```

```ts
// OpenTUI
import { followSystemTheme } from "@cssints/tui/opentui";

const renderer = await createCliRenderer();
await followSystemTheme(renderer, system); // the palette, or 100 ms; sets the theme "system"
```

-   **一个角色.** `hue` (默认) `fg`, (中文(简体) ), `bg` 为地表所取, `on` (有角色的钥匙), `contrast` (中文(简体) ). 文本角色 当它遇到每个规则时, 保持它的源色, 否则它取最严格的规则的光度: 倒转 WCAG 比率,在 OKHSL 中以发源地和饱和地分化(饱和去向为黑白), oKLCH染色体在源头被封住 所以一种颜色可以移动 但永远不要生动 A 类 `surface` 正好坐着 `contrast` 从第一届 `on`朝前方前进. `ansi`: 指数(或 `"default"`在终端时绘制 没有报告.
-   **终端报告的内容.** 其背景、前景和ANSI颜色:来自其颜色的每一个角色,都放在 真实的背景。 其背景仅: app's hues (`options.hues`。无 终端的默认颜色( n)`ansi:4`, (中文(简体) ), `default`,适配器变成 `RGBA.fromIndex` 财务报告和审定财务报表 `RGBA.defaultForeground`; 在bomb.sh(无索引颜色)上,外观的静态主题.
-   **光或暗 :** 的背景(比前景更清晰),否则颜色策略报告(`CSI ? 997 ; 1|2 n`, (中文(简体) ), 或开口 `themeMode`页:1 `COLORFGBG`更阴暗. `options.themes` 在每个下命名静态主题:一个符号 没有角色保持它的价值.
-   **变化.** OpenTUI 打开模式 2031 并发射 `theme_mode` 财务报告和审定财务报表 `palette`;跟随者在两者上重建. 打开 炸弹。sh 追随者写 `CSI ? 2031 h` 并再次询问通知书; `stop()` 关掉.
-   `theme.solve(report)` 给出报表的值(`{ fg, bg, ansi, scheme }`(b) 不应用; `defineTheme(name, values, base)` 联 合 国 `@cssints/tui` 是它所填充的运行时表(每个符号名称的颜色, `color-bg` 页:1 `var(--color-bg)`),作为你自己的主题.

## @bomb.sh/tty (英语)

bomb.sh从行动列表中抽取一个框架(bomb.sh)`open`, (中文(简体) ), `text`, (中文(简体) ), `close`)并返回该框架的指向事件。 这个 适配器 `@cssints/tui/bomb` 将样式在元素 id 状态下变成选项 `open()` 财务报告和审定财务报表 `text()`, (中文(简体) ), 及其跟踪器将状态控制在跨框架:

```ts
import { close, createTerm } from "@bomb.sh/tty";
import { createTracker, setTheme } from "@cssints/tui/bomb";

const term = await createTerm({ width: 80, height: 24 });
const ui = createTracker();
const build = () => [
  ui.open("save", button), // open("save", options of `button` in the state of "save")
  ui.text("Save", label, "save"), // text("Save", options of `label` in the state of "save")
  close(),
];
// each mouse event: the pointer is { x, y, down }
process.stdout.write(ui.render(term, build, { pointer }).output);
setTheme("light"); // the next frame takes the light values
process.stdout.write(ui.reset()); // on exit: the default pointer and caret
```

-   `ui.render(term, build, options)` 调制 `build()`,读取 `pointerenter`编号 :`pointerleave` 和,当一个国家 更改, 使 `build()` 同一帧的悬浮表演. `output` 拿着相框和出逃 指针和指针的字节。 两个框架的事件都在 `events` (单位:千美元)`pointerclick` 。请点击.
-   `:hover` 是从 `pointerenter` 改为 `pointerleave` (如Clay所报告); `:active` 是从媒体上播放的(`pointer.down` (a) 成为释放或休假的要素; `:focus` 是给定的 id 改为 `ui.focus(id)` (bomb.sh没有自己的焦点).
-   `cursor` 是一个最内层悬浮元素的鼠标指针(OSC 22), `default` 当没有. 重点内容的注意点是DECSCUSR(`caretShape`, (中文(简体) ), `caretAnimation`)和OSC 12 (中文(简体) )`caretColor`) 地点 这是 `caret` 选项 `text()`,这是你的. `ui.reset()` 给终端指示器和护身符.
-   `openProps(props)` 财务报告和审定财务报表 `textProps(props)` 平面图 `resolve()` (没有跟踪器):数字是 `fixed(n)`, (中文(简体) ), `N%` 实值 `percent`, (中文(简体) ), `auto` 实值 `fit`, (中文(简体) ), `flexGrow` 实值 `grow` 每个轴上没有大小, `min*`编号 :`max*` 边界 `fit` 财务报告和审定财务报表 `grow`, (中文(简体) ), `flexDirection` 实值 `direction`, (中文(简体) ), `justifyContent` 财务报告和审定财务报表 `alignItems` 为: `alignX` 财务报告和审定财务报表 `alignY` (作者: 方向), `borderStyle: "rounded"` 是一个 `cornerRadius` 页:1, `overflow` 实值 `clip`, (中文(简体) ), `position: "absolute"` 实值 `floating` 在父母身边, `display: "none"` 是一个0大小的盒子,可以剪接。 完整的桌子,和什么不地图,是 文件/研究/图伊.md.
-   **什么炸弹** `double` 财务报告和审定财务报表 `heavy` 边框为单行(bomb.sh有一行设置并圆形) 角),边距(将元素以粘贴方式包裹在母体中), `flexShrink`, (中文(简体) ), `flexBasis`, (中文(简体) ), `flexWrap`,则 `-reverse` 方向(前进方向), `space-*`, (中文(简体) ), `stretch` 财务报告和审定财务报表 `baseline` 对齐, `alignSelf`, (中文(简体) ), `opacity`, (中文(简体) ), 贴补和空隙的百分比,滚动冲抵`overflow: scroll` 剪辑, `zIndex` 无 `position: absolute`。 。 。 . 它们在运行时被忽略;建筑无法分辨,因为同样的风格可能去OpenTUI.
-   过渡不是csints/tui成员:给炸弹. 嘘 `transition` 作为最后的论点 `ui.open` 提供 此时 `animating`。 。 。 .
-   系统主题 : `followSystemTheme(system, { write })` 编写询问(OSC 10、11、4), `CSI ? 996 n`模式 2031年;通过每块 stdin `follow.feed(bytes)`,将答复取出并返回其余的 `input.scan()` (bomb.sh的解析器不报告OCS的答复). `await follow.ready`:答复或100毫秒.

```ts
const follow = followSystemTheme(system, { write: (s) => process.stdout.write(s) });
process.stdin.on("data", (bytes) => dispatch(input.scan(follow.feed(bytes)).events));
await follow.ready;
```

## 限制

没有终端 HMR, 没有文本样式的继承, 没有相邻的边框或标题( 渲染者自己的选项), 没有 单位或 `calc()`。见文件/研究/tui.md.

## 贷项

适配器是给 [打开TUI](https://opentui.com/) (麻省理工学院). 没有复制它的代码 .

## 测试

```bash
bun run test        # node test/system.ts (the solver on Gruvbox dark, Catppuccin Latte and Nord, the fallbacks, the replies
                    # as bytes, the bomb.sh follower), node test/tui.mjs (the plugin: dev transform, SSR build, errors),
                    # bun test/render.ts (OpenTUI's test renderer; the system theme on a fake terminal that answers OSC 4/10/11),
                    # node test/bomb.ts (bomb.sh's renderer at 30x8, the cells read back from its output)
bun run example     # examples/bomb.ts: a list with hover, press and click, `t` swaps the theme, `q` quits
bun run typecheck   # src and test/types/tui.ts (what the types reject)
```

## 常见问题

### @cssints/tui 是什么？

已折旧: cssints 寄存器中的终端目标 / 替换此选项 。 用于现有应用程序:csints/tui样式\(状态,光标,主题\)及其OpenTUI和@bomb\.sh/tty适配器的运行时间

### 如何安装 @cssints/tui？

在项目目录运行 npm install @cssints/tui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：cssints（^0\.35\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cssints/tui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cssints/tui 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @cssints/tui 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @cssints/tui 可以商用吗？

@cssints/tui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cssints/tui 的下载量有多少？

根据 npm 官方下载统计，@cssints/tui 在 2026/10/11 – 2026/11/09 这 30 天内被下载 7,326 次，日均约 244 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cssints/tui 还在维护吗？

最新版本 0\.35\.1 发布于 2026/11/07（3 天前）；至今共发布 42 个版本，其中过去 12 个月发布了 42 个；首次发布于 2026/10/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。