@ cssints/ tui (英语)

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

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

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

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

// 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 通过:

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
};

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将规则与它所坐的标志相对应.

// 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" } },
);

// 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(), (中文(简体) ), 及其跟踪器将状态控制在跨框架:

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毫秒.

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 (麻省理工学院). 没有复制它的代码 .

测试

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)