@cssints/tui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Alexei Accio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,206 @@
-# Temporary Holding Version
+# @cssints/tui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[cssints](../../README.md) in a terminal: the runtime of `cssints/tui` styles (states, the mouse pointer, the caret,
+themes) and its adapters for [OpenTUI](https://opentui.com) and [@bomb.sh/tty](https://bomb.sh/docs/tty/api/). The styles are written with `cssints/tui`, which the cssints
+Vite plugin compiles to prop objects; this package puts them on renderables. The design is in
+[docs/research/tui.md](../../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")),
+);
+```
+
+The plugin replaces `button` by:
+
+```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
+```
+
+## Rules
+
+- `attach(renderable, style)` sets the props of the style and keeps them in step with `:hover` (mouse `over` to
+  `out`), `:active` (`down` to `up`) and `:focus` (`focused` to `blurred`; a box needs `focusable: true`), in that
+  order of precedence, and with the theme of `setTheme`. Your own `onMouseOver` and the other handlers still run.
+- `cursor` is the mouse pointer while over the renderable (`renderer.setMousePointer`, OSC 22), `"default"` again on out.
+  `caretShape`, `caretColor` and `caretAnimation` are the `cursorStyle` and `cursorColor` of an Input or a Textarea.
+- `color` is OpenTUI's `fg`; `backgroundColor` is `backgroundColor` on a box and `bg` on a text; the text attributes
+  (`fontWeight`, `fontStyle`, `textDecoration`) are the bits of `attributes`. A prop the renderable does not have is
+  not set, so a text style on a box does nothing: put it on the `<text>`. On an editable or a select, `color` is
+  `textColor`.
+- A focused renderable draws colours of its own: `focusedBorderColor` on a box (also while a descendant has the
+  focus), `focusedBackgroundColor` and `focusedTextColor` on an editable or a select. Each one follows the style's
+  colour in the current state, so a focused box draws its `:focus` border.
+- `attach` on a renderable it has attached swaps the style: the states, the theme and the hooks stay, a prop only the
+  old style set goes back to the renderable's own value, and under the mouse the pointer follows the new `cursor`.
+  `use(() => style)` re-reads the accessor each time the ref runs: Solid runs a ref in a render effect, so a signal
+  the accessor reads swaps the style; React calls the new ref of each render.
+- A text node (`<span>`, `<a>`, `<b>`) takes the props and the theme. It has no mouse events and no focus, so it has
+  no states: put `:hover` on the `<text>` around it.
+- `resolve(style, state, theme)` of `@cssints/tui` is the renderer-neutral part: the props of a style in a state and a
+  theme, for another adapter.
+
+## The system theme
+
+A theme computed at run time from the terminal's own colours: each colour token is a role, a hue source (an ANSI
+colour, or the terminal's `fg`/`bg`) and contrast rules against the tokens it sits on.
+
+```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"
+```
+
+- **A role.** `hue` (default `fg`, `bg` for a surface), `on` (tokens with a role), `contrast` (WCAG 2). A text role
+  keeps its source colour when it meets every rule, else takes the lightness of the strictest one: the reversed
+  WCAG ratio, bisected in OKHSL at the source's hue and saturation (the saturation falls off toward black and white),
+  the OKLCH chroma capped at the source's, so a colour can move but never get more vivid. A `surface` sits at exactly
+  `contrast` from its first `on`, toward the foreground. `ansi`: the index (or `"default"`) to draw when the terminal
+  reports nothing.
+- **What the terminal reports.** Its background, foreground and ANSI colours: every role from its colour, placed for
+  the real background. Its background only: the app's hues (`options.hues`). Nothing: on OpenTUI, ANSI indices and the
+  terminal's default colours (`ansi:4`, `default`, which the adapter turns into `RGBA.fromIndex` and
+  `RGBA.defaultForeground`); on bomb.sh (no indexed colour) the static theme of the appearance.
+- **Light or dark:** the background (darker than the foreground), else the colour-scheme report (`CSI ? 997 ; 1|2 n`,
+  or OpenTUI's `themeMode`), else `COLORFGBG`, else dark. `options.themes` names the static theme under each: a token
+  without a role keeps its value.
+- **Changes.** OpenTUI turns on mode 2031 and emits `theme_mode` and `palette`; the follower rebuilds on both. On
+  bomb.sh the follower writes `CSI ? 2031 h` and queries again on a notification; `stop()` turns it off.
+- `theme.solve(report)` gives the values of a report (`{ fg, bg, ansi, scheme }`) without applying them;
+  `defineTheme(name, values, base)` of `@cssints/tui` is the run-time table it fills (a colour per token name,
+  `color-bg` for `var(--color-bg)`), for a theme of your own.
+
+## @bomb.sh/tty
+
+bomb.sh draws a frame from a list of ops (`open`, `text`, `close`) and returns the pointer events of that frame. The
+adapter `@cssints/tui/bomb` turns a style, in the state of its element id, into the options of `open()` and `text()`,
+and its tracker keeps the states across frames:
+
+```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)` renders `build()`, reads the `pointerenter`/`pointerleave` events and, when a state
+  changed, renders `build()` again, so a hover shows in the same frame. `output` holds both frames and the escape
+  bytes of the pointer and the caret. The events of both frames are in `events` (`pointerclick` for a click).
+- `:hover` is on from `pointerenter` to `pointerleave` (an element and its ancestors, as Clay reports them); `:active`
+  is on from a press (`pointer.down` becomes true) over the element to the release or a leave; `:focus` is the id given
+  to `ui.focus(id)` (bomb.sh has no focus of its own).
+- `cursor` is the mouse pointer (OSC 22) of the innermost hovered element that has one, `default` when there is none.
+  The caret of the focused element is DECSCUSR (`caretShape`, `caretAnimation`) and OSC 12 (`caretColor`); its place
+  is the `caret` option of `text()`, which is yours. `ui.reset()` gives the terminal its pointer and caret back.
+- `openProps(props)` and `textProps(props)` are the plain mapping of `resolve()` (no tracker): a number is `fixed(n)`,
+  `N%` is `percent`, `auto` is `fit`, `flexGrow` is `grow` on each axis with no size, `min*`/`max*` are the bounds of
+  `fit` and `grow`, `flexDirection` is `direction`, `justifyContent` and `alignItems` are `alignX` and `alignY` (by the
+  direction), `borderStyle: "rounded"` is a `cornerRadius` of 1, `overflow` is `clip`, `position: "absolute"` is
+  `floating` on the parent, `display: "none"` is a box of size 0 that clips. The full table, and what does not map, is
+  in docs/research/tui.md.
+- **What bomb.sh cannot draw:** `double` and `heavy` borders are a single line (bomb.sh has one line set and round
+  corners), margins (wrap the element in a parent with padding), `flexShrink`, `flexBasis`, `flexWrap`, the
+  `-reverse` directions (drawn forward), `space-*`, `stretch` and `baseline` alignment, `alignSelf`, `opacity`,
+  percentages of padding and gap, scroll offsets (`overflow: scroll` clips), `zIndex` without `position: absolute`.
+  They are left out at run time; the build cannot tell, since the same style may go to OpenTUI.
+- Transitions are not a cssints/tui member: give bomb.sh's `transition` as the last argument of `ui.open` and render
+  again while `animating`.
+- The system theme: `followSystemTheme(system, { write })` writes the queries (OSC 10, 11, 4, `CSI ? 996 n`, mode
+  2031); pass each chunk of stdin through `follow.feed(bytes)`, which takes the replies out and returns the rest for
+  `input.scan()` (bomb.sh's parser does not report OSC replies). `await follow.ready`: the replies or 100 ms.
+
+```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;
+```
+
+## Limits
+
+No terminal HMR, no inheritance of text styles, no per-side borders or titles (the renderable's own options), no
+units or `calc()`. See "Out of scope" in docs/research/tui.md.
+
+## Credits
+
+The adapter is for [OpenTUI](https://opentui.com) (MIT). No code of it is copied.
+
+## Tests
+
+```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)
+```

package/dist/bomb.d.mts

@@ -0,0 +1,86 @@
+import { TuiState, onTheme, resolve, setTheme, theme } from "./index.mjs";
+import { h as SystemTheme } from "./system-DNKgrSBA.mjs";
+import { Op, OpenElement, RenderOptions, RenderResult, Term, Text } from "@bomb.sh/tty";
+import { TuiProps, TuiShape } from "cssints/tui";
+//#region src/bomb-system.d.ts
+/** A system theme fed by the bytes of stdin. */
+interface SystemFollower {
+  /** Takes the terminal's replies out of a chunk of stdin and gives back the rest, for `input.scan()`. */
+  feed(bytes: Uint8Array): Uint8Array;
+  /** Settles when the terminal answered or `wait` ms passed, the fallback in place; a late reply still applies. */
+  ready: Promise<void>;
+  /** Turns the change notifications off and stops the timer. */
+  stop(): void;
+}
+/**
+ * Follows the terminal's colours: writes the queries (OSC 10, 11, 4, `CSI ? 996 n`) and turns on mode 2031, sets the
+ * system theme (`setTheme`), and rebuilds it from the replies `feed` finds; on a change notification it queries again.
+ *
+ * @param {SystemTheme} theme the theme of `createSystemTheme`
+ * @param {object} options `write` (the bytes to the terminal), `wait` (ms, default 100), `colorfgbg` (default: the environment's)
+ * @returns {SystemFollower} `feed`, `ready` and `stop`
+ */
+export declare const followSystemTheme: (theme: SystemTheme, options: {
+  write: (text: string) => void;
+  wait?: number;
+  colorfgbg?: string;
+}) => SystemFollower;
+//#endregion
+//#region src/bomb.d.ts
+/** The options of `open(id, options)`. */
+export type OpenProps = Omit<OpenElement, "directive" | "id">;
+/** The options of `text(content, options)`. */
+export type TextProps = Omit<Text, "directive" | "content">;
+/**
+ * A colour of a style (`#rrggbb` or `#rrggbbaa`) as bomb.sh packs it.
+ *
+ * @param {string} hex a colour of `resolve()`
+ * @returns {number} `rgba(r, g, b, a)`
+ */
+export declare const rgbaOf: (hex: string) => number;
+/**
+ * The options of `open()` for props of `resolve()`: sizes (a number is `fixed`, `N%` is `percent`, `auto` is `fit`,
+ * `flexGrow` is `grow` on each axis without a size), `flexDirection`, padding, gap, `justifyContent` and `alignItems`
+ * (`alignX`, `alignY`), `backgroundColor`, the border (one cell a side; `rounded` gives round corners), `overflow`
+ * (clip) and `position: absolute` (floating). What bomb.sh has no option for is left out (docs/research/tui.md).
+ *
+ * @param {TuiProps} p the props of `resolve()`
+ * @returns {OpenProps} the options of `open(id, options)`
+ */
+export declare const openProps: (p: TuiProps) => OpenProps;
+/**
+ * The options of `text()` for props of `resolve()`: `color`, `backgroundColor` (`bg`) and the text attributes
+ * (`bold`, `dim`, `italic`, `underline`, `strikethrough`) as the bits of `attrs`.
+ *
+ * @param {TuiProps} p the props of `resolve()`
+ * @returns {TextProps} the options of `text(content, options)`
+ */
+export declare const textProps: (p: TuiProps) => TextProps;
+/** The states of the elements of a frame, fed by the pointer events of `term.render()`. */
+export interface Tracker {
+  /** The states of element `id`: `hover` from `pointerenter` to `pointerleave`, `active` while pressed, `focus`. */
+  state(id: string): TuiState;
+  /** `open(id, ...)` with the options of `style` in the state of `id`; `extra` is laid over them (a `transition`). */
+  open(id: string, style: TuiShape, extra?: OpenProps): OpenElement;
+  /** `text(content, ...)` with the options of `style` in the state of element `id` (none: the base style). */
+  text(content: string, style: TuiShape, id?: string, extra?: TextProps): Text;
+  /** Gives element `id` the `:focus` state and its caret style (`undefined`: none). */
+  focus(id: string | undefined): void;
+  /**
+   * Renders `build()` with `options`, reads its pointer events and, when a state changed, renders `build()` again,
+   * so a hover shows in the same frame. `output` holds both, and the OSC 22 pointer and caret bytes that changed.
+   */
+  render(term: Term, build: () => Op[], options?: RenderOptions): RenderResult;
+  /** The bytes that give the terminal back its pointer and caret, to write on exit. */
+  reset(): Uint8Array;
+}
+/**
+ * A tracker of element states for one `Term`: build each frame with its `open` and `text`, and render with its
+ * `render`. `:hover` follows `pointerenter`/`pointerleave` (an element and its ancestors), `:active` holds from a
+ * pointer press over the element to the release (`pointerclick`) or a leave, `:focus` is the id given to `focus`.
+ *
+ * @returns {Tracker} the tracker
+ */
+export declare const createTracker: () => Tracker;
+//#endregion
+export { type SystemFollower, type TuiState, onTheme, resolve, setTheme, theme };

package/dist/bomb.mjs

@@ -0,0 +1,323 @@
+import { onTheme, resolve, setTheme, theme } from "./index.mjs";
+import { NOTIFY, QUERY, UNNOTIFY, scan } from "./system.mjs";
+import { fit, fixed, grow, open, percent, rgba, text } from "@bomb.sh/tty";
+//#region src/bomb-system.ts
+const binary = (bytes) => {
+	let s = "";
+	for (const b of bytes) s += String.fromCharCode(b);
+	return s;
+};
+/**
+* Follows the terminal's colours: writes the queries (OSC 10, 11, 4, `CSI ? 996 n`) and turns on mode 2031, sets the
+* system theme (`setTheme`), and rebuilds it from the replies `feed` finds; on a change notification it queries again.
+*
+* @param {SystemTheme} theme the theme of `createSystemTheme`
+* @param {object} options `write` (the bytes to the terminal), `wait` (ms, default 100), `colorfgbg` (default: the environment's)
+* @returns {SystemFollower} `feed`, `ready` and `stop`
+*/
+const followSystemTheme = (theme, options) => {
+	const report = { ansi: [] };
+	const apply = () => theme.apply(report, { colorfgbg: options.colorfgbg });
+	let tail = "";
+	let done = false;
+	const { promise: ready, resolve: settle } = Promise.withResolvers();
+	const finish = () => {
+		if (done) return;
+		done = true;
+		clearTimeout(timer);
+		apply();
+		settle();
+	};
+	const timer = setTimeout(finish, options.wait ?? 100);
+	apply();
+	setTheme(theme.name);
+	options.write(QUERY + NOTIFY);
+	return {
+		ready,
+		feed: (bytes) => {
+			const { replies, rest, tail: cut } = scan(tail + binary(bytes));
+			tail = cut;
+			const found = replies.fg || replies.bg || replies.scheme || replies.ansi.size;
+			if (replies.fg) report.fg = replies.fg;
+			if (replies.bg) report.bg = replies.bg;
+			for (const [i, hex] of replies.ansi) report.ansi[i] = hex;
+			if (replies.scheme) {
+				report.scheme = replies.scheme;
+				if (done) options.write(QUERY);
+			}
+			const complete = report.fg && report.bg && report.ansi.filter(Boolean).length === 16;
+			if (found && done) apply();
+			else if (complete) finish();
+			return Uint8Array.from(rest, (ch) => ch.charCodeAt(0));
+		},
+		stop: () => {
+			clearTimeout(timer);
+			options.write(UNNOTIFY);
+		}
+	};
+};
+//#endregion
+//#region src/bomb.ts
+const ATTRS = {
+	bold: 1,
+	dim: 2,
+	italic: 4,
+	underline: 8,
+	strikethrough: 64
+};
+const START = {
+	"flex-start": 0,
+	center: 1,
+	"flex-end": 2
+};
+const X = [
+	"left",
+	"center",
+	"right"
+];
+const Y = [
+	"top",
+	"center",
+	"bottom"
+];
+const CARET = {
+	auto: 0,
+	block: 1,
+	underscore: 3,
+	bar: 5
+};
+/**
+* A colour of a style (`#rrggbb` or `#rrggbbaa`) as bomb.sh packs it.
+*
+* @param {string} hex a colour of `resolve()`
+* @returns {number} `rgba(r, g, b, a)`
+*/
+const rgbaOf = (hex) => {
+	const n = (i) => Number.parseInt(hex.slice(i, i + 2), 16);
+	return rgba(n(1), n(3), n(5), hex.length > 7 ? n(7) : 255);
+};
+const bound = (v) => typeof v === "number" ? v : 0;
+const axis = (v, min, max, grows) => {
+	if (typeof v === "number") return fixed(v);
+	if (v !== void 0 && v !== "auto") return percent(Number.parseFloat(v) / 100);
+	if (grows) return grow(bound(min), bound(max));
+	if (v === "auto" || bound(min) || bound(max)) return fit(bound(min), bound(max));
+};
+const align = (v) => v !== void 0 && Object.hasOwn(START, v) ? START[v] : void 0;
+/**
+* The options of `open()` for props of `resolve()`: sizes (a number is `fixed`, `N%` is `percent`, `auto` is `fit`,
+* `flexGrow` is `grow` on each axis without a size), `flexDirection`, padding, gap, `justifyContent` and `alignItems`
+* (`alignX`, `alignY`), `backgroundColor`, the border (one cell a side; `rounded` gives round corners), `overflow`
+* (clip) and `position: absolute` (floating). What bomb.sh has no option for is left out (docs/research/tui.md).
+*
+* @param {TuiProps} p the props of `resolve()`
+* @returns {OpenProps} the options of `open(id, options)`
+*/
+const openProps = (p) => {
+	const out = {};
+	const layout = {};
+	const hidden = p.visible === false;
+	const grows = (p.flexGrow ?? 0) > 0;
+	const width = hidden ? fixed(0) : axis(p.width, p.minWidth, p.maxWidth, grows);
+	const height = hidden ? fixed(0) : axis(p.height, p.minHeight, p.maxHeight, grows);
+	if (width) layout.width = width;
+	if (height) layout.height = height;
+	const ttb = p.flexDirection === "column" || p.flexDirection === "column-reverse";
+	if (p.flexDirection) layout.direction = ttb ? "ttb" : "ltr";
+	const padding = {};
+	for (const [side, v] of [
+		["top", p.paddingTop],
+		["right", p.paddingRight],
+		["bottom", p.paddingBottom],
+		["left", p.paddingLeft]
+	]) if (typeof v === "number") padding[side] = v;
+	if (Object.keys(padding).length) layout.padding = padding;
+	const gap = (ttb ? p.rowGap : p.columnGap) ?? p.gap;
+	if (typeof gap === "number") layout.gap = gap;
+	const main = align(p.justifyContent);
+	const cross = align(p.alignItems);
+	const x = (ttb ? cross : main) ?? (p.textAlign ? X.indexOf(p.textAlign) : void 0);
+	const y = ttb ? main : cross;
+	if (x !== void 0) layout.alignX = X[x];
+	if (y !== void 0) layout.alignY = Y[y];
+	if (Object.keys(layout).length) out.layout = layout;
+	if (p.backgroundColor) out.bg = rgbaOf(p.backgroundColor);
+	if (p.border && !hidden) {
+		out.border = {
+			color: rgbaOf(p.borderColor ?? p.color ?? "#ffffff"),
+			top: 1,
+			right: 1,
+			bottom: 1,
+			left: 1
+		};
+		if (p.borderStyle === "rounded") out.cornerRadius = {
+			tl: 1,
+			tr: 1,
+			bl: 1,
+			br: 1
+		};
+	}
+	if (hidden || p.overflow === "hidden" || p.overflow === "scroll") out.clip = {
+		horizontal: true,
+		vertical: true
+	};
+	if (p.position === "absolute") {
+		const right = p.left === void 0 && typeof p.right === "number";
+		const bottom = p.top === void 0 && typeof p.bottom === "number";
+		const point = `${right ? "right" : "left"}-${bottom ? "bottom" : "top"}`;
+		out.floating = {
+			attachTo: "parent",
+			attachPoints: {
+				element: point,
+				parent: point
+			},
+			x: right ? -bound(p.right) : bound(p.left),
+			y: bottom ? -bound(p.bottom) : bound(p.top)
+		};
+		if (p.zIndex !== void 0) out.floating.zIndex = p.zIndex;
+	}
+	return out;
+};
+/**
+* The options of `text()` for props of `resolve()`: `color`, `backgroundColor` (`bg`) and the text attributes
+* (`bold`, `dim`, `italic`, `underline`, `strikethrough`) as the bits of `attrs`.
+*
+* @param {TuiProps} p the props of `resolve()`
+* @returns {TextProps} the options of `text(content, options)`
+*/
+const textProps = (p) => {
+	const out = {};
+	if (p.color) out.color = rgbaOf(p.color);
+	if (p.backgroundColor) out.bg = rgbaOf(p.backgroundColor);
+	let attrs;
+	for (const [k, bit] of Object.entries(ATTRS)) if (Object.hasOwn(p, k)) attrs = (attrs ?? 0) | (p[k] ? bit : 0);
+	if (attrs !== void 0) out.attrs = attrs;
+	return out;
+};
+const encoder = new TextEncoder();
+const osc = (body) => `\x1b]${body}\x1b\\`;
+const caretOf = (p) => {
+	let out = "";
+	if (p.caretShape || p.caretAnimation) {
+		const n = CARET[p.caretShape ?? "auto"];
+		out += `\x1b[${n && p.caretAnimation === "manual" ? n + 1 : n} q`;
+	}
+	if (p.caretColor) out += osc(`12;${p.caretColor.slice(0, 7)}`);
+	return out;
+};
+const join = (parts) => {
+	const bytes = parts.map((b) => typeof b === "string" ? encoder.encode(b) : b);
+	const out = new Uint8Array(bytes.reduce((n, b) => n + b.length, 0));
+	let at = 0;
+	for (const b of bytes) {
+		out.set(b, at);
+		at += b.length;
+	}
+	return out;
+};
+/**
+* A tracker of element states for one `Term`: build each frame with its `open` and `text`, and render with its
+* `render`. `:hover` follows `pointerenter`/`pointerleave` (an element and its ancestors), `:active` holds from a
+* pointer press over the element to the release (`pointerclick`) or a leave, `:focus` is the id given to `focus`.
+*
+* @returns {Tracker} the tracker
+*/
+const createTracker = () => {
+	const hovered = /* @__PURE__ */ new Set();
+	const active = /* @__PURE__ */ new Set();
+	const styles = /* @__PURE__ */ new Map();
+	let focused;
+	let down = false;
+	let pointer = "default";
+	let caret = "";
+	const state = (id) => ({
+		hover: hovered.has(id),
+		active: active.has(id),
+		focus: focused === id
+	});
+	const update = (events, press) => {
+		let changed = false;
+		for (const e of events) if (e.type === "pointerenter") {
+			changed ||= !hovered.has(e.id);
+			hovered.add(e.id);
+		} else {
+			if (e.type === "pointerleave") changed = hovered.delete(e.id) || changed;
+			changed = active.delete(e.id) || changed;
+		}
+		if (press && !down) for (const id of hovered) {
+			active.add(id);
+			changed = true;
+		}
+		if (!press && active.size) {
+			active.clear();
+			changed = true;
+		}
+		down = press;
+		return changed;
+	};
+	const escapes = () => {
+		let out = "";
+		let next = "default";
+		for (const id of [...hovered].reverse()) {
+			const style = styles.get(id);
+			const cursor = style && resolve(style, state(id)).cursor;
+			if (cursor) {
+				next = cursor;
+				break;
+			}
+		}
+		if (next !== pointer) out += osc(`22;${next}`);
+		pointer = next;
+		const style = focused === void 0 ? void 0 : styles.get(focused);
+		const nextCaret = style && focused !== void 0 ? caretOf(resolve(style, state(focused))) : "";
+		if (nextCaret !== caret) out += nextCaret || "\x1B[0 q" + osc("112");
+		caret = nextCaret;
+		return out;
+	};
+	return {
+		state,
+		open: (id, style, extra) => {
+			styles.set(id, style);
+			return open(id, {
+				...openProps(resolve(style, state(id))),
+				...extra
+			});
+		},
+		text: (content, style, id, extra) => text(content, {
+			...textProps(resolve(style, id === void 0 ? {} : state(id))),
+			...extra
+		}),
+		focus: (id) => {
+			focused = id;
+		},
+		render: (term, build, options) => {
+			const press = options?.pointer?.down ?? false;
+			styles.clear();
+			const first = term.render(build(), options);
+			if (!update(first.events, press)) return {
+				...first,
+				output: join([first.output, escapes()])
+			};
+			const output = first.output.slice();
+			styles.clear();
+			const again = term.render(build(), options);
+			update(again.events, press);
+			return {
+				...again,
+				output: join([
+					output,
+					again.output,
+					escapes()
+				]),
+				events: [...first.events, ...again.events]
+			};
+		},
+		reset: () => join([
+			osc("22;default"),
+			"\x1B[0 q",
+			osc("112")
+		])
+	};
+};
+//#endregion
+export { createTracker, followSystemTheme, onTheme, openProps, resolve, rgbaOf, setTheme, textProps, theme };