@cssints/tui 0.0.0-stage → 0.1.0

package/dist/system.mjs

@@ -0,0 +1,290 @@
+import { defineTheme } from "./index.mjs";
+import { clampRgb, converter, formatHex, modeLrgb, modeOkhsl, modeOklab, modeOklch, modeRgb, parse, useMode, wcagLuminance } from "culori/fn";
+//#region src/system.ts
+for (const mode of [
+	modeRgb,
+	modeLrgb,
+	modeOklab,
+	modeOklch,
+	modeOkhsl
+]) useMode(mode);
+const toOkhsl = converter("okhsl");
+const toOklch = converter("oklch");
+const toRgb = converter("rgb");
+/** The 16 ANSI colours, by their index. */
+const SLOTS = [
+	"black",
+	"red",
+	"green",
+	"yellow",
+	"blue",
+	"magenta",
+	"cyan",
+	"white",
+	"brightBlack",
+	"brightRed",
+	"brightGreen",
+	"brightYellow",
+	"brightBlue",
+	"brightMagenta",
+	"brightCyan",
+	"brightWhite"
+];
+const HUES = {
+	black: "#000000",
+	red: "#cd3131",
+	green: "#0dbc79",
+	yellow: "#e5e510",
+	blue: "#2472c8",
+	magenta: "#bc3fbc",
+	cyan: "#11a8cd",
+	white: "#e5e5e5",
+	brightBlack: "#666666",
+	brightRed: "#f14c4c",
+	brightGreen: "#23d18b",
+	brightYellow: "#f5f543",
+	brightBlue: "#3b8eea",
+	brightMagenta: "#d670d6",
+	brightCyan: "#29b8db",
+	brightWhite: "#e5e5e5"
+};
+const TOKEN = /^var\(--([\w-]+)\)$/;
+const nameOf = (token, where) => {
+	const name = typeof token === "string" ? TOKEN.exec(token)?.[1] : void 0;
+	if (!name) throw new Error(`cssints: ${where}: ${String(token)} is no token of createTokens`);
+	return name;
+};
+/**
+* The relative luminance of a colour (WCAG 2), as check.contrast reads it.
+*
+* @param {string} hex a colour
+* @returns {number} its luminance, 0 to 1
+*/
+const luminance = (hex) => {
+	const c = parse(hex);
+	if (!c) throw new Error(`cssints: ${hex} is not a colour`);
+	return wcagLuminance(clampRgb(c));
+};
+/**
+* The WCAG 2 contrast ratio of two colours.
+*
+* @param {string} a a colour
+* @param {string} b another
+* @returns {number} the ratio, 1 to 21
+*/
+const contrast = (a, b) => {
+	const [x, y] = [luminance(a), luminance(b)];
+	return (Math.max(x, y) + .05) / (Math.min(x, y) + .05);
+};
+const sourceOf = (hex) => {
+	const c = parse(hex);
+	const hsl = toOkhsl(c);
+	return {
+		h: hsl.h ?? 0,
+		s: hsl.s,
+		l: hsl.l,
+		c: toOklch(c).c,
+		hex: formatHex(c)
+	};
+};
+const bell = (l) => Math.sqrt(Math.max(0, 4 * l * (1 - l)));
+const at = (src, l) => {
+	const s = src.s * Math.min(1, bell(l) / Math.max(bell(src.l), 1e-6));
+	const lch = toOklch({
+		mode: "okhsl",
+		h: src.h,
+		s,
+		l
+	});
+	return formatHex(clampRgb(toRgb({
+		...lch,
+		c: Math.min(lch.c, src.c)
+	})));
+};
+const bisect = (src, ok, up, from = src.l) => {
+	let [lo, hi] = up ? [from, 1] : [0, from];
+	for (let i = 0; i < 40; i++) {
+		const mid = (lo + hi) / 2;
+		if (ok(at(src, mid)) === up) hi = mid;
+		else lo = mid;
+	}
+	let l = up ? hi : lo;
+	let hex = at(src, l);
+	for (let i = 0; i < 100 && !ok(hex) && l > 0 && l < 1; i++) {
+		l = Math.min(1, Math.max(0, l + (up ? .002 : -.002)));
+		hex = at(src, l);
+	}
+	return hex;
+};
+const text = (src, on, k, dark) => {
+	const meets = (hex) => on.every((s) => contrast(hex, s) >= k - 1e-9);
+	if (meets(src.hex)) return src.hex;
+	const ys = on.map(luminance);
+	const y = luminance(src.hex);
+	const above = Math.max(...ys.map((v) => (v + .05) * k - .05));
+	const below = Math.min(...ys.map((v) => (v + .05) / k - .05));
+	const first = y >= Math.max(...ys) ? true : y <= Math.min(...ys) ? false : dark;
+	for (const up of [first, !first]) if (up ? above <= 1 : below >= 0) return bisect(src, up ? (h) => luminance(h) >= above && meets(h) : (h) => luminance(h) <= below && meets(h), up);
+	const worst = (hex) => Math.min(...on.map((s) => contrast(hex, s)));
+	const [white, black] = [at(src, 1), at(src, 0)];
+	return worst(white) >= worst(black) ? white : black;
+};
+const surface = (src, under, k, dark) => {
+	const y = luminance(under);
+	for (const up of [dark, !dark]) {
+		const target = up ? (y + .05) * k - .05 : (y + .05) / k - .05;
+		if (up ? target <= 1 : target >= 0) return bisect(src, up ? (h) => luminance(h) >= target : (h) => luminance(h) <= target, up, up ? 0 : 1);
+	}
+	return src.hex;
+};
+const appearanceOf = (report, colorfgbg) => {
+	if (report.bg) {
+		const y = luminance(report.bg);
+		return (report.fg ? y < luminance(report.fg) : y < .18) ? "dark" : "light";
+	}
+	if (report.scheme) return report.scheme;
+	const last = colorfgbg?.split(";").at(-1);
+	if (last && /^\d+$/.test(last)) return Number(last) <= 6 || Number(last) === 8 ? "dark" : "light";
+	return "dark";
+};
+/**
+* A system theme: each token of `roles` takes its hue from a colour of the terminal and its lightness from its contrast
+* rules against the tokens it sits on. Checks the roles (an `on` without a role, a cycle) and orders them.
+*
+* @param {object} tokens the tokens of `createTokens` (cssints/tui)
+* @param {Roles} roles a role per colour token, in the shape of `tokens`
+* @param {SystemOptions} options the name, the app's own hues, the static theme under it
+* @returns {SystemTheme} the theme, for `followSystemTheme` of an adapter, or `solve` and `apply`
+*/
+const createSystemTheme = (tokens, roles, options = {}) => {
+	const entries = /* @__PURE__ */ new Map();
+	const walk = (t, r, path) => {
+		for (const [k, role] of Object.entries(r)) {
+			const token = t[k];
+			if (typeof token === "string") {
+				const name = nameOf(token, `${path}${k}`);
+				const on = (role.on ?? []).map((o) => nameOf(o, `${path}${k}.on`));
+				entries.set(name, {
+					name,
+					role,
+					on
+				});
+			} else if (token && typeof token === "object" && role && typeof role === "object") walk(token, role, `${path}${k}.`);
+			else throw new Error(`cssints: ${path}${k} is no token of createTokens`);
+		}
+	};
+	walk(tokens, roles, "");
+	const order = [];
+	const state = /* @__PURE__ */ new Map();
+	const visit = (e) => {
+		if (state.get(e.name) === "done") return;
+		if (state.get(e.name) === "visiting") throw new Error(`cssints: the roles of ${e.name} sit on each other (a cycle of on)`);
+		state.set(e.name, "visiting");
+		for (const o of e.on) {
+			const dep = entries.get(o);
+			if (!dep) throw new Error(`cssints: ${e.name} sits on ${o}, which has no role`);
+			visit(dep);
+		}
+		state.set(e.name, "done");
+		order.push(e);
+	};
+	for (const e of entries.values()) visit(e);
+	const name = options.name ?? "system";
+	const solve = (report, { indexed = false, colorfgbg } = {}) => {
+		const appearance = appearanceOf(report, colorfgbg ?? globalThis.process?.env.COLORFGBG);
+		const base = options.themes?.[appearance] ?? "";
+		const values = {};
+		if (!report.bg) {
+			if (indexed) for (const { name: n, role } of order) {
+				const hue = role.hue ?? (role.surface ? "bg" : "fg");
+				const slot = SLOTS.indexOf(hue);
+				const ansi = role.ansi ?? (role.surface || slot < 0 ? "default" : slot);
+				values[n] = ansi === "default" ? "default" : `ansi:${ansi}`;
+			}
+			return {
+				appearance,
+				values,
+				base
+			};
+		}
+		const dark = appearance === "dark";
+		const hex = (hue) => {
+			if (hue === "bg") return report.bg;
+			if (hue === "fg") return report.fg ?? options.hues?.fg ?? (dark ? "#ffffff" : "#000000");
+			const i = SLOTS.indexOf(hue);
+			return report.ansi?.[i] ?? options.hues?.[hue] ?? HUES[hue];
+		};
+		for (const { name: n, role, on } of order) {
+			const src = sourceOf(hex(role.hue ?? (role.surface ? "bg" : "fg")));
+			const under = on.map((o) => values[o]);
+			const k = role.contrast;
+			values[n] = k === void 0 || !under.length ? src.hex : role.surface ? surface(src, under[0], k, dark) : text(src, under, k, dark);
+		}
+		return {
+			appearance,
+			values,
+			base
+		};
+	};
+	return {
+		name,
+		solve,
+		apply: (report, o) => {
+			const solved = solve(report, o);
+			defineTheme(name, solved.values, solved.base);
+			return solved;
+		}
+	};
+};
+/** OSC 10 and 11 (the default colours), OSC 4 for the 16 ANSI colours, and the colour-scheme report (`CSI ? 996 n`). */
+const QUERY = [
+	"\x1B]10;?\x1B\\",
+	"\x1B]11;?\x1B\\",
+	...SLOTS.map((_, i) => `\x1b]4;${i};?\x1b\\`),
+	"\x1B[?996n"
+].join("");
+/** Mode 2031 on: the terminal sends `CSI ? 997 ; 1|2 n` when its palette changes. */
+const NOTIFY = "\x1B[?2031h";
+/** Mode 2031 off. */
+const UNNOTIFY = "\x1B[?2031l";
+const REPLY = /\x1b\](10|11|4;(\d+));(?:rgba?:([0-9a-f]{1,4})\/([0-9a-f]{1,4})\/([0-9a-f]{1,4})(?:\/[0-9a-f]{1,4})?|#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{12}))(?:\x07|\x1b\\)|\x1b\[\?997;([12])n/gi;
+const CUT = /\x1b(?:\][^\x07\x1b]*(?:\x1b)?|\[\?(?:9(?:9(?:7(?:;\d?)?)?)?)?)$/;
+const channel = (h) => Math.round(Number.parseInt(h, 16) / (16 ** h.length - 1) * 255);
+const hexOf = (r, g, b) => `#${[
+	r,
+	g,
+	b
+].map((h) => channel(h).toString(16).padStart(2, "0")).join("")}`;
+/**
+* Takes the terminal's replies (OSC 10, 11 and 4, `CSI ? 997 n`) out of a chunk of input, as text of one char per byte.
+*
+* @param {string} text the chunk, after what `tail` of the last one kept
+* @returns {object} the replies, the rest of the input (keys, mouse), and the tail of a reply cut off at the end
+*/
+const scan = (text) => {
+	const replies = { ansi: /* @__PURE__ */ new Map() };
+	const cut = CUT.exec(text);
+	const tail = cut ? cut[0] : "";
+	return {
+		replies,
+		rest: (cut ? text.slice(0, cut.index) : text).replace(REPLY, (...m) => {
+			const [, what, index, r = "", g = "", b = "", hash, scheme] = m;
+			if (scheme) {
+				replies.scheme = scheme === "1" ? "dark" : "light";
+				return "";
+			}
+			let colour;
+			if (hash) {
+				const n = hash.length / 3;
+				colour = hexOf(hash.slice(0, n), hash.slice(n, 2 * n), hash.slice(2 * n));
+			} else colour = hexOf(r, g, b);
+			if (what === "10") replies.fg = colour;
+			else if (what === "11") replies.bg = colour;
+			else if (Number(index) < 16) replies.ansi.set(Number(index), colour);
+			return "";
+		}),
+		tail
+	};
+};
+//#endregion
+export { NOTIFY, QUERY, SLOTS, UNNOTIFY, contrast, createSystemTheme, luminance, scan };

package/package.json

@@ -1,6 +1,57 @@
 {
   "name": "@cssints/tui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "cssints in a terminal: the runtime of cssints/tui styles (states, cursors, themes) and its OpenTUI and @bomb.sh/tty adapters",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alexeiaccio/css-in-ts-compiler.git",
+    "directory": "packages/tui"
+  },
+  "homepage": "https://cssints.dev",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    },
+    "./opentui": {
+      "types": "./dist/opentui.d.mts",
+      "default": "./dist/opentui.mjs"
+    },
+    "./bomb": {
+      "types": "./dist/bomb.d.mts",
+      "default": "./dist/bomb.mjs"
+    },
+    "./system": {
+      "types": "./dist/system.d.mts",
+      "default": "./dist/system.mjs"
+    }
+  },
+  "dependencies": {
+    "culori": "^4.0.2"
+  },
+  "peerDependencies": {
+    "@bomb.sh/tty": ">=0.9.0",
+    "@opentui/core": ">=0.5.17",
+    "cssints": "^0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@bomb.sh/tty": {
+      "optional": true
+    },
+    "@opentui/core": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}