cssints 0.0.0-stage → 0.1.0

package/dist/trace-otlp-CbKFDsn9.mjs

@@ -0,0 +1,14 @@
+import { Layer, ManagedRuntime } from "effect";
+import { FetchHttpClient } from "effect/http";
+import { OtlpSerialization, OtlpTracer } from "effect/observability";
+//#region src/trace-otlp.ts
+const start = (url) => {
+	const runtime = ManagedRuntime.make(OtlpTracer.layer({
+		url: `${url}/v1/traces`,
+		resource: { serviceName: "cssints" },
+		exportInterval: "500 millis"
+	}).pipe(Layer.provide([OtlpSerialization.layerJson, FetchHttpClient.layer])));
+	return runtime.context().then(() => runtime);
+};
+//#endregion
+export { start };

package/dist/tui-types.d.mts

@@ -0,0 +1,181 @@
+import { $p as Part, Xp as Check, d as createTokens, u as createGlobalTheme } from "./theme-types-DHdtTZhz.mjs";
+//#region src/tui-types.d.ts
+type Percent = `${number}%`;
+/** A number of cells (columns across, rows down) or a percentage of the parent. */
+export type Cells = number | Percent;
+/** Cells, or `auto`. */
+export type Size = Cells | "auto";
+export type BorderKind = "single" | "double" | "rounded" | "heavy";
+export type Align = "auto" | "flex-start" | "center" | "flex-end" | "stretch" | "baseline" | "space-between" | "space-around" | "space-evenly";
+export type Justify = "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+/** The CSS cursor keywords a terminal takes over OSC 22. */
+export type Cursor = "auto" | "default" | "none" | "context-menu" | "help" | "pointer" | "progress" | "wait" | "cell" | "crosshair" | "text" | "vertical-text" | "alias" | "copy" | "move" | "no-drop" | "not-allowed" | "grab" | "grabbing" | "all-scroll" | "col-resize" | "row-resize" | "n-resize" | "e-resize" | "s-resize" | "w-resize" | "ne-resize" | "nw-resize" | "se-resize" | "sw-resize" | "ew-resize" | "ns-resize" | "nesw-resize" | "nwse-resize" | "zoom-in" | "zoom-out";
+/** The props of a terminal style, renderer-neutral: colours are `#rrggbb` or `#rrggbbaa`, lengths are cells. */
+export interface TuiProps {
+  color?: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  caretColor?: string;
+  bold?: boolean;
+  dim?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strikethrough?: boolean;
+  textAlign?: "left" | "center" | "right";
+  border?: boolean;
+  borderStyle?: BorderKind;
+  paddingTop?: Cells;
+  paddingRight?: Cells;
+  paddingBottom?: Cells;
+  paddingLeft?: Cells;
+  marginTop?: Size;
+  marginRight?: Size;
+  marginBottom?: Size;
+  marginLeft?: Size;
+  gap?: Cells;
+  rowGap?: Cells;
+  columnGap?: Cells;
+  width?: Size;
+  height?: Size;
+  minWidth?: Size;
+  maxWidth?: Size;
+  minHeight?: Size;
+  maxHeight?: Size;
+  flexBasis?: Size;
+  flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
+  flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
+  justifyContent?: Justify;
+  alignItems?: Align;
+  alignSelf?: Align;
+  flexGrow?: number;
+  flexShrink?: number;
+  position?: "relative" | "absolute";
+  top?: Size;
+  right?: Size;
+  bottom?: Size;
+  left?: Size;
+  overflow?: "visible" | "hidden" | "scroll";
+  visible?: boolean;
+  opacity?: number;
+  zIndex?: number;
+  cursor?: Cursor;
+  caretShape?: "auto" | "bar" | "block" | "underscore";
+  caretAnimation?: "auto" | "manual";
+}
+/** Props with their state overlays. */
+export interface TuiLayer extends TuiProps {
+  ":hover"?: TuiProps;
+  ":focus"?: TuiProps;
+  ":active"?: TuiProps;
+}
+type ColourKey = "color" | "backgroundColor" | "borderColor" | "caretColor";
+/** The token (`color-bg` for `var(--color-bg)`) of each colour prop set to one, per state: what a run-time theme sets. */
+export interface TuiVars extends Partial<Record<ColourKey, string>> {
+  ":hover"?: Partial<Record<ColourKey, string>>;
+  ":focus"?: Partial<Record<ColourKey, string>>;
+  ":active"?: Partial<Record<ColourKey, string>>;
+}
+/** What a terminal style compiles to: its props, state overlays, what each theme (by name) changes, its tokens. */
+export interface TuiShape extends TuiLayer {
+  themes?: Record<string, TuiLayer>;
+  vars?: TuiVars;
+}
+/** What every member of cssints/tui returns. Only members make one (`cn()` takes no object literal). */
+export type TuiStyle = TuiShape & {
+  readonly "~tui": true;
+};
+/** A colour: parts are checked against the web's `color` grammar; a colour token fits. */
+export type Colour = <const A extends readonly Part[]>(...parts: Check<"color", A>) => TuiStyle;
+type One<V> = (value: V) => TuiStyle;
+/** 1 to 4 values: top, right, bottom, left, as in CSS. */
+type Sides<V> = (...values: [V] | [V, V] | [V, V, V] | [V, V, V, V]) => TuiStyle;
+/** 1 or 2 values: the start and end of the inline or block axis. */
+type Pair<V> = (...values: [V] | [V, V]) => TuiStyle;
+export declare const color: Colour;
+export declare const backgroundColor: Colour;
+/** `background-color`. */
+export declare const bg: Colour;
+export declare const borderColor: Colour;
+export declare const caretColor: Colour;
+/** `bold`, `normal`, or `lighter`: the terminal's dim. */
+export declare const fontWeight: One<"bold" | "normal" | "lighter">;
+export declare const fontStyle: One<"italic" | "normal">;
+type Decoration = ["none"] | ["underline"] | ["line-through"] | ["underline", "line-through"] | ["line-through", "underline"];
+export declare const textDecoration: (...line: Decoration) => TuiStyle;
+export declare const textDecorationLine: (...line: Decoration) => TuiStyle;
+export declare const textAlign: One<"left" | "center" | "right">;
+/** `solid` (a single line), `double`, `rounded`, `heavy`, or `none`. */
+type BorderWord = "solid" | "double" | "rounded" | "heavy" | "none";
+export declare const borderStyle: One<BorderWord>;
+/** A border of that style, and its colour. */
+export declare const border: {
+  (style: BorderWord): TuiStyle;
+  <const A extends readonly Part[]>(style: Exclude<BorderWord, "none">, ...color: Check<"color", A>): TuiStyle;
+};
+export declare const padding: Sides<Cells>;
+export declare const p: Sides<Cells>;
+export declare const paddingInline: Pair<Cells>;
+export declare const paddingBlock: Pair<Cells>;
+export declare const paddingTop: One<Cells>;
+export declare const paddingRight: One<Cells>;
+export declare const paddingBottom: One<Cells>;
+export declare const paddingLeft: One<Cells>;
+export declare const pt: One<Cells>;
+export declare const pr: One<Cells>;
+export declare const pb: One<Cells>;
+export declare const pl: One<Cells>;
+export declare const margin: Sides<Size>;
+export declare const m: Sides<Size>;
+export declare const marginInline: Pair<Size>;
+export declare const marginBlock: Pair<Size>;
+export declare const marginTop: One<Size>;
+export declare const marginRight: One<Size>;
+export declare const marginBottom: One<Size>;
+export declare const marginLeft: One<Size>;
+export declare const mt: One<Size>;
+export declare const mr: One<Size>;
+export declare const mb: One<Size>;
+export declare const ml: One<Size>;
+export declare const gap: One<Cells>;
+export declare const rowGap: One<Cells>;
+export declare const columnGap: One<Cells>;
+export declare const width: One<Size>;
+export declare const height: One<Size>;
+export declare const minWidth: One<Size>;
+export declare const maxWidth: One<Size>;
+export declare const minHeight: One<Size>;
+export declare const maxHeight: One<Size>;
+export declare const flexBasis: One<Size>;
+export declare const flexDirection: One<NonNullable<TuiProps["flexDirection"]>>;
+export declare const flexWrap: One<NonNullable<TuiProps["flexWrap"]>>;
+export declare const justifyContent: One<Justify>;
+export declare const alignItems: One<Align>;
+export declare const alignSelf: One<Align>;
+export declare const flexGrow: One<number>;
+export declare const flexShrink: One<number>;
+export declare const position: One<"relative" | "absolute">;
+export declare const top: One<Size>;
+export declare const right: One<Size>;
+export declare const bottom: One<Size>;
+export declare const left: One<Size>;
+export declare const overflow: One<"visible" | "hidden" | "scroll">;
+/** `flex` (shown) or `none` (hidden, out of the layout). */
+export declare const display: One<"flex" | "none">;
+export declare const opacity: One<number>;
+export declare const zIndex: One<number>;
+/** The mouse pointer over the element: set on over, back to `default` on out. */
+export declare const cursor: One<Cursor>;
+/** The caret of a focused editable: `bar`, `block`, `underscore`, or the terminal's `auto`. */
+export declare const caretShape: One<"auto" | "bar" | "block" | "underscore">;
+/** `auto` blinks, `manual` is steady. */
+export declare const caretAnimation: One<"auto" | "manual">;
+/** Merges styles in argument order: a later prop wins. */
+export declare const cn: (...styles: TuiStyle[]) => TuiStyle;
+/** The styles while the pointer is over the element (`onMouseOver` to `onMouseOut`). */
+export declare const hover: (...styles: TuiStyle[]) => TuiStyle;
+/** The styles while the element has focus. */
+export declare const focus: (...styles: TuiStyle[]) => TuiStyle;
+/** The styles while a mouse button is down on the element. */
+export declare const active: (...styles: TuiStyle[]) => TuiStyle;
+//#endregion
+export { createGlobalTheme, createTokens };

package/dist/tui.d.mts

@@ -0,0 +1,30 @@
+import "./node-CdhAGmF3.mjs";
+import "./lib-2OEIfPAE.mjs";
+import { CSSStyleValue } from "@cssints/css-grammar/values";
+import { Effect } from "effect";
+import { DtcgType } from "@cssints/css-grammar/token";
+//#region src/theme.d.ts
+export declare const createTokens: (...args: unknown[]) => unknown;
+export declare const createGlobalTheme: (...args: unknown[]) => Readonly<{
+  __done: true;
+}>;
+//#endregion
+//#region src/tui.d.ts
+type State = "" | ":hover" | ":focus" | ":active";
+type Value = string | number | boolean;
+/** One prop: its key, its value (a colour is CSS text, resolved per theme at the site), and the state it is under. */
+type Entry = [key: string, value: Value, state: State, colour?: true];
+interface TuiNode {
+  __tui: Entry[];
+}
+/**
+ * Merges styles in argument order: a later prop wins.
+ *
+ * @returns {TuiNode} the merged style
+ */
+export declare const cn: (...styles: unknown[]) => TuiNode;
+export declare const hover: (...styles: unknown[]) => TuiNode;
+export declare const focus: (...styles: unknown[]) => TuiNode;
+export declare const active: (...styles: unknown[]) => TuiNode;
+export declare const color: ((...parts: unknown[]) => TuiNode) | undefined, backgroundColor: ((...parts: unknown[]) => TuiNode) | undefined, bg: ((...parts: unknown[]) => TuiNode) | undefined, borderColor: ((...parts: unknown[]) => TuiNode) | undefined, caretColor: ((...parts: unknown[]) => TuiNode) | undefined, fontWeight: ((...parts: unknown[]) => TuiNode) | undefined, fontStyle: ((...parts: unknown[]) => TuiNode) | undefined, textDecoration: ((...parts: unknown[]) => TuiNode) | undefined, textDecorationLine: ((...parts: unknown[]) => TuiNode) | undefined, textAlign: ((...parts: unknown[]) => TuiNode) | undefined, borderStyle: ((...parts: unknown[]) => TuiNode) | undefined, border: ((...parts: unknown[]) => TuiNode) | undefined, padding: ((...parts: unknown[]) => TuiNode) | undefined, p: ((...parts: unknown[]) => TuiNode) | undefined, paddingInline: ((...parts: unknown[]) => TuiNode) | undefined, paddingBlock: ((...parts: unknown[]) => TuiNode) | undefined, paddingTop: ((...parts: unknown[]) => TuiNode) | undefined, paddingRight: ((...parts: unknown[]) => TuiNode) | undefined, paddingBottom: ((...parts: unknown[]) => TuiNode) | undefined, paddingLeft: ((...parts: unknown[]) => TuiNode) | undefined, pt: ((...parts: unknown[]) => TuiNode) | undefined, pr: ((...parts: unknown[]) => TuiNode) | undefined, pb: ((...parts: unknown[]) => TuiNode) | undefined, pl: ((...parts: unknown[]) => TuiNode) | undefined, margin: ((...parts: unknown[]) => TuiNode) | undefined, m: ((...parts: unknown[]) => TuiNode) | undefined, marginInline: ((...parts: unknown[]) => TuiNode) | undefined, marginBlock: ((...parts: unknown[]) => TuiNode) | undefined, marginTop: ((...parts: unknown[]) => TuiNode) | undefined, marginRight: ((...parts: unknown[]) => TuiNode) | undefined, marginBottom: ((...parts: unknown[]) => TuiNode) | undefined, marginLeft: ((...parts: unknown[]) => TuiNode) | undefined, mt: ((...parts: unknown[]) => TuiNode) | undefined, mr: ((...parts: unknown[]) => TuiNode) | undefined, mb: ((...parts: unknown[]) => TuiNode) | undefined, ml: ((...parts: unknown[]) => TuiNode) | undefined, top: ((...parts: unknown[]) => TuiNode) | undefined, right: ((...parts: unknown[]) => TuiNode) | undefined, bottom: ((...parts: unknown[]) => TuiNode) | undefined, left: ((...parts: unknown[]) => TuiNode) | undefined, gap: ((...parts: unknown[]) => TuiNode) | undefined, rowGap: ((...parts: unknown[]) => TuiNode) | undefined, columnGap: ((...parts: unknown[]) => TuiNode) | undefined, width: ((...parts: unknown[]) => TuiNode) | undefined, height: ((...parts: unknown[]) => TuiNode) | undefined, minWidth: ((...parts: unknown[]) => TuiNode) | undefined, maxWidth: ((...parts: unknown[]) => TuiNode) | undefined, minHeight: ((...parts: unknown[]) => TuiNode) | undefined, maxHeight: ((...parts: unknown[]) => TuiNode) | undefined, flexBasis: ((...parts: unknown[]) => TuiNode) | undefined, flexDirection: ((...parts: unknown[]) => TuiNode) | undefined, flexWrap: ((...parts: unknown[]) => TuiNode) | undefined, justifyContent: ((...parts: unknown[]) => TuiNode) | undefined, alignItems: ((...parts: unknown[]) => TuiNode) | undefined, alignSelf: ((...parts: unknown[]) => TuiNode) | undefined, flexGrow: ((...parts: unknown[]) => TuiNode) | undefined, flexShrink: ((...parts: unknown[]) => TuiNode) | undefined, position: ((...parts: unknown[]) => TuiNode) | undefined, overflow: ((...parts: unknown[]) => TuiNode) | undefined, display: ((...parts: unknown[]) => TuiNode) | undefined, opacity: ((...parts: unknown[]) => TuiNode) | undefined, zIndex: ((...parts: unknown[]) => TuiNode) | undefined, cursor: ((...parts: unknown[]) => TuiNode) | undefined, caretShape: ((...parts: unknown[]) => TuiNode) | undefined, caretAnimation: ((...parts: unknown[]) => TuiNode) | undefined;
+//#endregion

package/dist/tui.mjs

@@ -0,0 +1,399 @@
+import { a as registry } from "./registry-n9JCX4pl.mjs";
+import { O as fail, a as createTokens, i as createGlobalTheme } from "./theme-BGEbFAYh.mjs";
+import { g as evaluate, h as css } from "./sheet-CO7a-mdA.mjs";
+import { n as valueOf, t as together } from "./contrast-BUKVao74.mjs";
+import { n as parseColor } from "./color-BYIxVLlS.mjs";
+import { Formatter } from "effect";
+import { clampRgb, formatHex, formatHex8 } from "culori/fn";
+//#region src/tui.ts
+const isTui = (v) => !!v && typeof v === "object" && Array.isArray(v.__tui);
+const node = (entries) => ({ __tui: entries });
+const say = (v) => typeof v === "string" ? `"${v}"` : Formatter.formatJson(v);
+const PERCENT = /^-?(?:\d+\.?\d*|\.\d+)%$/;
+const LENGTH = /^-?(?:\d+\.?\d*|\.\d+)[a-z]+$/i;
+const cells = (auto, percent = true) => (prop, v) => {
+	if (typeof v === "number" && Number.isFinite(v)) return v;
+	if (typeof v === "string") {
+		if (percent && PERCENT.test(v)) return v;
+		if (auto && v === "auto") return v;
+		if (LENGTH.test(v)) throw fail(`cssints: ${prop}: a terminal counts cells: write a number, not ${say(v)}`);
+	}
+	throw fail(`cssints: ${prop}: unexpected ${say(v)}, expected a number of cells${percent ? ", N%" : ""}${auto ? " or auto" : ""}`);
+};
+const number = (min, max = Infinity, integer = false) => (prop, v) => {
+	if (typeof v === "number" && v >= min && v <= max && (!integer || Number.isInteger(v))) return v;
+	throw fail(`cssints: ${prop}: unexpected ${say(v)}, expected ${integer ? "an integer" : "a number"}${max < Infinity ? ` from ${min} to ${max}` : min > -Infinity ? ` of at least ${min}` : ""}`);
+};
+const keyword = (...words) => (prop, v) => {
+	if (typeof v === "string" && words.includes(v)) return v;
+	throw fail(`cssints: ${prop}: unexpected ${say(v)}, expected ${words.join(" | ")}`);
+};
+const hexOf = (text) => {
+	let c = parseColor(text);
+	if (!c && /\b(?:color-mix|from)\b/.test(text)) {
+		let rgb;
+		try {
+			rgb = css(evaluate(text));
+		} catch {
+			rgb = void 0;
+		}
+		c = rgb === void 0 ? void 0 : parseColor(rgb);
+	}
+	if (!c) return void 0;
+	const clipped = clampRgb(c);
+	return (c.alpha ?? 1) < 1 ? formatHex8(clipped) : formatHex(clipped);
+};
+const VAR = /var\((--[\w-]+)\)/g;
+const colour = (prop, v) => {
+	const text = String(v);
+	for (const [, name] of text.matchAll(VAR)) {
+		const def = registry.defs.get(name);
+		if (!def) throw fail(`cssints: ${prop}: ${name} is no token of createTokens`);
+		if (def.kind !== "color" && text === `var(${name})`) throw fail(`cssints: ${prop}: ${def.path} is a ${def.kind} token, not a colour`);
+	}
+	if (!text.includes("var(") && hexOf(text) === void 0) throw fail(`cssints: ${prop}: ${say(v)} is not a colour a terminal can show (a name, hex, rgb(), hsl(), oklch(), color-mix(); not currentColor, a system colour or light-dark())`);
+	return text;
+};
+const one = (key, read, isColour = false) => (prop, parts) => {
+	if (parts.length !== 1) throw fail(`cssints: ${prop} takes one value, got ${parts.length}`);
+	return [isColour ? [
+		key,
+		read(prop, parts[0]),
+		"",
+		true
+	] : [
+		key,
+		read(prop, parts[0]),
+		""
+	]];
+};
+const sides = (base, read, which = [
+	"Top",
+	"Right",
+	"Bottom",
+	"Left"
+]) => (prop, parts) => {
+	const n = which.length === 4 ? 4 : 2;
+	if (parts.length < 1 || parts.length > n) throw fail(`cssints: ${prop} takes 1 to ${n} values, got ${parts.length}`);
+	const v = parts.map((p) => read(prop, p));
+	const at = n === 4 ? [
+		v[0],
+		v[1] ?? v[0],
+		v[2] ?? v[0],
+		v[3] ?? v[1] ?? v[0]
+	] : [v[0], v[1] ?? v[0]];
+	return which.map((s, i) => [
+		`${base}${s}`,
+		at[i],
+		""
+	]);
+};
+const flags = (table, many = false) => (prop, parts) => {
+	if (parts.length < 1 || !many && parts.length > 1) throw fail(`cssints: ${prop} takes ${many ? "a value" : "one value"}, got ${parts.length}`);
+	const out = {};
+	for (const p of parts) {
+		const set = typeof p === "string" ? table[p] : void 0;
+		if (!set || parts.length > 1 && p === "none") throw fail(`cssints: ${prop}: unexpected ${say(p)}, expected ${Object.keys(table).join(" | ")}`);
+		for (const [k, b] of Object.entries(set)) out[k] = parts.length > 1 && out[k] || b;
+	}
+	return Object.entries(out).map(([k, b]) => [
+		k,
+		b,
+		""
+	]);
+};
+const BORDER = {
+	none: [[
+		"border",
+		false,
+		""
+	]],
+	solid: [[
+		"border",
+		true,
+		""
+	], [
+		"borderStyle",
+		"single",
+		""
+	]],
+	double: [[
+		"border",
+		true,
+		""
+	], [
+		"borderStyle",
+		"double",
+		""
+	]],
+	rounded: [[
+		"border",
+		true,
+		""
+	], [
+		"borderStyle",
+		"rounded",
+		""
+	]],
+	heavy: [[
+		"border",
+		true,
+		""
+	], [
+		"borderStyle",
+		"heavy",
+		""
+	]]
+};
+const borderStyleOf = (prop, v) => {
+	const e = typeof v === "string" ? BORDER[v] : void 0;
+	if (!e) throw fail(`cssints: ${prop}: unexpected ${say(v)}, expected ${Object.keys(BORDER).join(" | ")}`);
+	return e;
+};
+const SIZE = cells(true);
+const EDGE = cells(false);
+const ALIGN = [
+	"auto",
+	"flex-start",
+	"center",
+	"flex-end",
+	"stretch",
+	"baseline",
+	"space-between",
+	"space-around",
+	"space-evenly"
+];
+const JUSTIFY = [
+	"flex-start",
+	"center",
+	"flex-end",
+	"space-between",
+	"space-around",
+	"space-evenly"
+];
+const CURSORS = [
+	"auto",
+	"default",
+	"none",
+	"context-menu",
+	"help",
+	"pointer",
+	"progress",
+	"wait",
+	"cell",
+	"crosshair",
+	"text",
+	"vertical-text",
+	"alias",
+	"copy",
+	"move",
+	"no-drop",
+	"not-allowed",
+	"grab",
+	"grabbing",
+	"all-scroll",
+	"col-resize",
+	"row-resize",
+	"n-resize",
+	"e-resize",
+	"s-resize",
+	"w-resize",
+	"ne-resize",
+	"nw-resize",
+	"se-resize",
+	"sw-resize",
+	"ew-resize",
+	"ns-resize",
+	"nesw-resize",
+	"nwse-resize",
+	"zoom-in",
+	"zoom-out"
+];
+const MEMBERS = {
+	color: one("color", colour, true),
+	backgroundColor: one("backgroundColor", colour, true),
+	bg: one("backgroundColor", colour, true),
+	borderColor: one("borderColor", colour, true),
+	caretColor: one("caretColor", colour, true),
+	fontWeight: flags({
+		bold: {
+			bold: true,
+			dim: false
+		},
+		normal: {
+			bold: false,
+			dim: false
+		},
+		lighter: {
+			bold: false,
+			dim: true
+		}
+	}),
+	fontStyle: flags({
+		italic: { italic: true },
+		normal: { italic: false }
+	}),
+	textDecoration: flags({
+		underline: {
+			underline: true,
+			strikethrough: false
+		},
+		"line-through": {
+			underline: false,
+			strikethrough: true
+		},
+		none: {
+			underline: false,
+			strikethrough: false
+		}
+	}, true),
+	textAlign: one("textAlign", keyword("left", "center", "right")),
+	borderStyle: (prop, parts) => {
+		if (parts.length !== 1) throw fail(`cssints: ${prop} takes one value, got ${parts.length}`);
+		return borderStyleOf(prop, parts[0]);
+	},
+	border: (prop, parts) => {
+		if (parts.length < 1 || parts.length > 2) throw fail(`cssints: ${prop} takes a style and an optional colour, got ${parts.length} values`);
+		const style = borderStyleOf(prop, parts[0]);
+		if (parts.length === 2 && parts[0] === "none") throw fail(`cssints: ${prop}: a colour of no border`);
+		return parts.length === 2 ? [...style, [
+			"borderColor",
+			colour(prop, parts[1]),
+			"",
+			true
+		]] : style;
+	},
+	padding: sides("padding", EDGE),
+	p: sides("padding", EDGE),
+	paddingInline: sides("padding", EDGE, ["Left", "Right"]),
+	paddingBlock: sides("padding", EDGE, ["Top", "Bottom"]),
+	margin: sides("margin", SIZE),
+	m: sides("margin", SIZE),
+	marginInline: sides("margin", SIZE, ["Left", "Right"]),
+	marginBlock: sides("margin", SIZE, ["Top", "Bottom"]),
+	...Object.fromEntries([
+		"Top",
+		"Right",
+		"Bottom",
+		"Left"
+	].flatMap((s) => [
+		[`padding${s}`, one(`padding${s}`, EDGE)],
+		[`p${s[0].toLowerCase()}`, one(`padding${s}`, EDGE)],
+		[`margin${s}`, one(`margin${s}`, SIZE)],
+		[`m${s[0].toLowerCase()}`, one(`margin${s}`, SIZE)],
+		[s.toLowerCase(), one(s.toLowerCase(), SIZE)]
+	])),
+	gap: one("gap", EDGE),
+	rowGap: one("rowGap", EDGE),
+	columnGap: one("columnGap", EDGE),
+	...Object.fromEntries([
+		"width",
+		"height",
+		"minWidth",
+		"maxWidth",
+		"minHeight",
+		"maxHeight",
+		"flexBasis"
+	].map((k) => [k, one(k, SIZE)])),
+	flexDirection: one("flexDirection", keyword("row", "column", "row-reverse", "column-reverse")),
+	flexWrap: one("flexWrap", keyword("nowrap", "wrap", "wrap-reverse")),
+	justifyContent: one("justifyContent", keyword(...JUSTIFY)),
+	alignItems: one("alignItems", keyword(...ALIGN)),
+	alignSelf: one("alignSelf", keyword(...ALIGN)),
+	flexGrow: one("flexGrow", number(0)),
+	flexShrink: one("flexShrink", number(0)),
+	position: one("position", keyword("relative", "absolute")),
+	overflow: one("overflow", keyword("visible", "hidden", "scroll")),
+	display: (prop, parts) => {
+		const [d] = one("visible", keyword("flex", "none"))(prop, parts);
+		return [[
+			"visible",
+			d[1] === "flex",
+			""
+		]];
+	},
+	opacity: one("opacity", number(0, 1)),
+	zIndex: one("zIndex", number(-Infinity, Infinity, true)),
+	cursor: one("cursor", keyword(...CURSORS)),
+	caretShape: one("caretShape", keyword("auto", "bar", "block", "underscore")),
+	caretAnimation: one("caretAnimation", keyword("auto", "manual"))
+};
+MEMBERS.textDecorationLine = MEMBERS.textDecoration;
+const member = (name, build) => (...parts) => {
+	if (parts.some(isTui)) throw fail(`cssints: ${name}: a style is not a value`);
+	return node(build(name, parts));
+};
+const stylesOf = (what, styles) => {
+	const bad = styles.find((s) => !isTui(s));
+	if (bad !== void 0 || !styles.length) throw fail(`cssints: ${what} takes styles of cssints/tui, got ${bad === void 0 ? "nothing" : say(bad)}`);
+	return styles.flatMap((s) => s.__tui);
+};
+/**
+* Merges styles in argument order: a later prop wins.
+*
+* @returns {TuiNode} the merged style
+*/
+const cn = (...styles) => node(stylesOf("cn()", styles));
+const state = (s) => (...styles) => node(stylesOf(s, styles).map(([k, v, inner, c]) => {
+	if (inner) throw fail(`cssints: ${s} wraps ${inner}: terminal states do not nest (one state per style)`);
+	return c ? [
+		k,
+		v,
+		s,
+		c
+	] : [
+		k,
+		v,
+		s
+	];
+}));
+const hover = state(":hover");
+const focus = state(":focus");
+const active = state(":active");
+const { color, backgroundColor, bg, borderColor, caretColor, fontWeight, fontStyle, textDecoration, textDecorationLine, textAlign, borderStyle, border, padding, p, paddingInline, paddingBlock, paddingTop, paddingRight, paddingBottom, paddingLeft, pt, pr, pb, pl, margin, m, marginInline, marginBlock, marginTop, marginRight, marginBottom, marginLeft, mt, mr, mb, ml, top, right, bottom, left, gap, rowGap, columnGap, width, height, minWidth, maxWidth, minHeight, maxHeight, flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignSelf, flexGrow, flexShrink, position, overflow, display, opacity, zIndex, cursor, caretShape, caretAnimation } = Object.fromEntries(Object.entries(MEMBERS).map(([k, b]) => [k, member(k, b)]));
+const put = (out, state, key, value) => {
+	if (!state) out[key] = value;
+	else (out[state] ??= {})[key] = value;
+};
+const resolved = (text, values) => {
+	const flat = text.replace(VAR, (m, n) => valueOf(registry, n, values) ?? m);
+	const hex = hexOf(flat);
+	if (hex === void 0) throw fail(`cssints: ${say(text)} is ${say(flat)} here, not a colour a terminal can show`);
+	return hex;
+};
+const LONE = /^var\(--([\w-]+)\)$/;
+const replacement = (n) => {
+	const out = {};
+	const vars = {};
+	for (const [k, v, s, c] of n.__tui) {
+		put(out, s, k, c ? resolved(String(v)) : v);
+		const token = c ? LONE.exec(String(v))?.[1] : void 0;
+		if (token) put(vars, s, k, token);
+		else if (c) delete (s ? vars[s] ?? {} : vars)[k];
+	}
+	const tokens = n.__tui.filter((e) => e[3] && String(e[1]).includes("var("));
+	if (tokens.length) {
+		const themes = {};
+		for (const { label, values } of together(registry)) {
+			if (label.startsWith("@")) continue;
+			const overlay = {};
+			for (const [k, v, s] of tokens) {
+				const was = s ? out[s][k] : out[k];
+				const now = resolved(String(v), values);
+				if (now !== was) put(overlay, s, k, now);
+			}
+			if (Object.keys(overlay).length) themes[label] = overlay;
+		}
+		if (Object.keys(themes).length) out.themes = themes;
+	}
+	for (const s of [
+		":hover",
+		":focus",
+		":active"
+	]) if (vars[s] && !Object.keys(vars[s]).length) delete vars[s];
+	if (Object.keys(vars).length) out.vars = vars;
+	return `(${Formatter.formatJson(out)})`;
+};
+registry.tui = (v) => isTui(v) ? replacement(v) : void 0;
+//#endregion
+export { active, alignItems, alignSelf, backgroundColor, bg, border, borderColor, borderStyle, bottom, caretAnimation, caretColor, caretShape, cn, color, columnGap, createGlobalTheme, createTokens, cursor, display, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, focus, fontStyle, fontWeight, gap, height, hover, justifyContent, left, m, margin, marginBlock, marginBottom, marginInline, marginLeft, marginRight, marginTop, maxHeight, maxWidth, mb, minHeight, minWidth, ml, mr, mt, opacity, overflow, p, padding, paddingBlock, paddingBottom, paddingInline, paddingLeft, paddingRight, paddingTop, pb, pl, position, pr, pt, right, rowGap, textAlign, textDecoration, textDecorationLine, top, width, zIndex };