@zaly/tui 0.0.11 → 0.1.0

package/dist/{renderer-V6AGjbyf.mjs → renderer-BLsd-wrG.mjs}

@@ -1,13 +1,14 @@
-import { C as useActiveOwner, E as withOwner, S as unwrap, _ as peek, d as createSuspenseBoundary, h as memo, l as createRoot, n as SuspenseContext, o as createNode, v as provideContext, x as untrack, y as signal } from "./reactive-f7NpAi69.mjs";
-import { t as defaultTheme } from "./registry-3hLzS4ks.mjs";
-import { s as stripAnsiBg } from "./ansi-Clq0ozyA.mjs";
-import { t as styleBuilder } from "./builder-DC9byAmK.mjs";
-import { n as box } from "./box-DLEcEvDH.mjs";
-import { t as createCtx } from "./ctx-8Nuf5BrN.mjs";
-import { t as RenderContext } from "./render-f7M2856V.mjs";
-import { t as TuiReporter } from "./logger-DvuX9DPS.mjs";
+import { C as useActiveOwner, E as withOwner, S as unwrap, _ as peek, d as createSuspenseBoundary, f as effect, h as memo, l as createRoot, n as SuspenseContext, o as createNode, v as provideContext, x as untrack, y as signal } from "./reactive-f7NpAi69.mjs";
+import { i as systemTheme, t as defaultTheme } from "./registry-DUWpSPoo.mjs";
+import { c as stripAnsiBg, i as applyDefaultColors, t as RESET } from "./ansi-CMv71xVr.mjs";
+import { t as openStyle } from "./style-DslRHzI4.mjs";
+import { t as styleBuilder } from "./builder-Chwtk0nQ.mjs";
+import { n as box } from "./box-C_N_7ChP.mjs";
+import { t as createCtx } from "./ctx-BaQ2hP5u.mjs";
+import { t as RenderContext } from "./render-B7LfNM5K.mjs";
+import { t as TuiReporter } from "./logger-CvJCITzP.mjs";
 import { o as bumpPlacements } from "./kitty-JbCJC0iQ.mjs";
-import { i as canonical, t as TerminalQueries } from "./queries-B_lOwEiE.mjs";
+import { a as canonical, t as TerminalQueries } from "./queries-BUkBxkuM.mjs";
 import { Emitter } from "@zaly/shared";
 import { sliceAnsi, stringWidth, stripAnsi } from "@zaly/shared/ansi";
 import { inspect, isDeepStrictEqual } from "node:util";
@@ -225,6 +226,74 @@ var Actions = class extends Emitter {
 	}
 };
 //#endregion
+//#region src/input/colors.ts
+/** One renderer run: coalesce updates, discard stale snapshots, and own cleanup. */
+var ColorsWatcher = class {
+	queries;
+	input;
+	write;
+	update;
+	#ac = new AbortController();
+	#appearance;
+	#revision = 0;
+	#pending = false;
+	#running = false;
+	#previous = "";
+	constructor(queries, input, write, update) {
+		this.queries = queries;
+		this.input = input;
+		this.write = write;
+		this.update = update;
+		input.on("term-response", ({ event }) => {
+			if (event.kind !== "csi" || event.final !== "n" || !/^\?997(?:;[012])?$/.test(event.params)) return;
+			if (event.params === "?997") this.#queryAppearance();
+			if (event.params === "?997;1") this.#appearance = "dark";
+			if (event.params === "?997;2") this.#appearance = "light";
+			this.refresh();
+		}, { signal: this.#ac.signal });
+		input.on("terminal-focus", ({ gained }) => {
+			if (!gained) return;
+			this.#queryAppearance();
+			this.refresh();
+		}, { signal: this.#ac.signal });
+		write("\x1B[?2031h");
+		this.#queryAppearance();
+		this.refresh();
+	}
+	#queryAppearance() {
+		this.queries.colorScheme({ signal: this.#ac.signal });
+	}
+	refresh() {
+		if (this.#ac.signal.aborted) return;
+		this.#revision++;
+		this.#pending = true;
+		if (!this.#running) this.#refresh();
+	}
+	async #refresh() {
+		this.#running = true;
+		try {
+			while (this.#pending && !this.#ac.signal.aborted) {
+				this.#pending = false;
+				const revision = this.#revision;
+				const snapshot = await this.queries.palette({ signal: this.#ac.signal });
+				if (revision !== this.#revision) continue;
+				const key = JSON.stringify([snapshot, this.#appearance]);
+				if (key === this.#previous) continue;
+				this.#previous = key;
+				this.update(snapshot, this.#appearance);
+			}
+		} finally {
+			this.#running = false;
+		}
+	}
+	stop() {
+		if (this.#ac.signal.aborted) return;
+		this.#revision++;
+		this.#ac.abort();
+		this.write("\x1B[?2031l");
+	}
+};
+//#endregion
 //#region src/input/decoder.ts
 var Decoder = class {
 	#pending = "";
@@ -394,7 +463,7 @@ const SS3_NAMES = {
 	S: "f4"
 };
 function isTerminalCsiResponse(params, final) {
-	return final === "c" && (params.startsWith("?") || params.startsWith(">"));
+	return final === "c" && (params.startsWith("?") || params.startsWith(">")) || final === "n" && /^\?997(?:;[012])?$/.test(params);
 }
 function handleCsi(params, final, out) {
 	if ((final === "M" || final === "m") && params.startsWith("<")) {
@@ -868,6 +937,21 @@ var Frame = class {
 	terminal;
 	#base = [];
 	#current = [];
+	#colors = {
+		bg: "",
+		fg: ""
+	};
+	get defaultStyle() {
+		return this.#colors.fg + this.#colors.bg;
+	}
+	setDefaultStyle(fg, bg) {
+		if (this.#colors.fg === fg && this.#colors.bg === bg) return;
+		this.#colors = {
+			bg,
+			fg
+		};
+		this.#current.fill(void 0);
+	}
 	constructor(terminal) {
 		this.terminal = terminal;
 	}
@@ -878,7 +962,7 @@ var Frame = class {
 	begin() {
 		const rows = this.terminal.rows;
 		if (this.#current.length !== rows || this.#base.length !== rows) this.reset(rows);
-		return new RenderFrame(this.terminal, this.#current, this.#base);
+		return new RenderFrame(this.terminal, this.#current, this.#base, this.#colors);
 	}
 	slice(row, from, to, width = this.terminal.cols) {
 		return sliceLine(this.#current[row - 1] ?? "", from, to, width);
@@ -888,12 +972,17 @@ var RenderFrame = class {
 	terminal;
 	current;
 	base;
+	defaults;
 	#ops = [];
 	#next;
-	constructor(terminal, current, base) {
+	constructor(terminal, current, base, defaults = {
+		bg: "",
+		fg: ""
+	}) {
 		this.terminal = terminal;
 		this.current = current;
 		this.base = base;
+		this.defaults = defaults;
 		this.#next = base.map((row) => row ?? "");
 	}
 	get(row) {
@@ -936,12 +1025,15 @@ var RenderFrame = class {
 		for (let i = 0; i < this.#next.length; i++) this.base[i] = this.#next[i];
 	}
 	flush() {
+		const defaults = this.defaults.fg + this.defaults.bg;
+		const restore = defaults ? RESET + defaults : "";
 		for (let i = 0; i < this.#next.length; i++) {
 			const next = this.#next[i];
 			if (this.current[i] === next) continue;
 			const row = i + 1;
+			const content = applyDefaultColors(next.trimEnd(), this.defaults.fg, this.defaults.bg);
 			this.queue((terminal) => {
-				terminal.write(terminal.moveTo(row, 1) + terminal.clearLine() + next.trimEnd());
+				terminal.write(terminal.moveTo(row, 1) + terminal.clearLine() + content + restore);
 			});
 			this.current[i] = next;
 		}
@@ -978,8 +1070,18 @@ var RenderFrame = class {
 		const ops = this.#ops.length;
 		this.flush();
 		const rows = this.#ops.length - ops;
-		for (const op of this.#ops) op(this.terminal);
-		this.#ops.length = 0;
+		const defaults = this.defaults.fg + this.defaults.bg;
+		if (this.#ops.length === 0) return {
+			ops,
+			rows
+		};
+		if (defaults) this.terminal.write(RESET + defaults);
+		try {
+			for (const op of this.#ops) op(this.terminal);
+		} finally {
+			if (defaults) this.terminal.write(RESET);
+			this.#ops.length = 0;
+		}
 		return {
 			ops,
 			rows
@@ -2031,7 +2133,7 @@ var Terminal = class {
 			this.deleteImages();
 			this.setProgress();
 			if (this.#reserveBottom > 0) this.clearScrollRegion();
-			this.write(`${CSI}?1007l${CSI}?1006l${CSI}?1002l${CSI}?1000l${CSI}?1004l${CSI}?2004l${CSI}?7h${CSI}?25h`);
+			this.write(`${CSI}?1007l${CSI}?1006l${CSI}?1002l${CSI}?1000l${CSI}?1004l${CSI}?2004l${CSI}?2031l${CSI}?7h${CSI}?25h`);
 			if (this.#altScreen) this.write(`${CSI}?1049l`);
 		} finally {
 			this.#started = false;
@@ -2320,12 +2422,17 @@ var Renderer = class extends Emitter {
 	#decoder = new Decoder();
 	#stdin;
 	#theme = signal(void 0);
+	#shiki;
+	#systemTheme;
+	#transparent = signal(false);
 	/** Root Owner — every surface's function-shape `add` / `append` runs
 	*  its child under this Owner via `withOwner(#rootOwner, …)`, so
 	*  context values provided here (`RenderContext`, future global
 	*  scopes) are visible to every widget body in the tree. */
 	#rootOwner;
 	#running = false;
+	#colorsWatcher;
+	#canQueryColors;
 	#escTimer;
 	#rendering;
 	#dirty = false;
@@ -2351,6 +2458,7 @@ var Renderer = class extends Emitter {
 	} } };
 	constructor(opts = {}) {
 		super();
+		this.#canQueryColors = !!((opts.stdout ?? process.stdout).isTTY && (opts.stdin ?? process.stdin).isTTY);
 		this.terminal = new Terminal({
 			altScreen: opts.altScreen,
 			hookSignals: opts.hookSignals,
@@ -2359,7 +2467,9 @@ var Renderer = class extends Emitter {
 			stdout: opts.stdout
 		});
 		this.frame = new Frame(this.terminal);
-		if (opts.theme) this.#theme.set(opts.theme);
+		this.#shiki = opts.shiki ?? "auto";
+		if (opts.theme || this.#shiki !== "auto") this.#theme.set(this.#withShiki(opts.theme ?? defaultTheme));
+		this.#transparent.set(() => opts.transparent ?? false);
 		this.ui = new UI(this);
 		this.stream = new Stream(this, { fixedFooterHeight: opts.fixedFooterHeight });
 		this.overlay = new OverlaySurface(this);
@@ -2375,6 +2485,13 @@ var Renderer = class extends Emitter {
 				style: memo(() => styleBuilder(this.#theme.get())),
 				theme: this.#theme.get
 			});
+			effect(() => {
+				const theme = this.theme;
+				const transparent = this.transparent;
+				const previous = this.frame.defaultStyle;
+				this.frame.setDefaultStyle(openStyle({ fg: opts.defaultStyle?.fg }, theme), openStyle({ bg: transparent ? void 0 : opts.defaultStyle?.bg }, theme));
+				if (this.frame.defaultStyle !== previous) untrack(() => this.#schedule());
+			});
 			return useActiveOwner();
 		});
 		const reporter = new TuiReporter(opts.reporter);
@@ -2397,7 +2514,8 @@ var Renderer = class extends Emitter {
 			this.#ctx = void 0;
 			this.terminal.sync(() => {
 				this.terminal.clearScrollRegion();
-				this.terminal.write(`${this.terminal.moveTo(1, 1)}\x1b[2J`);
+				const defaults = this.frame.defaultStyle;
+				this.terminal.write(`${defaults ? RESET + defaults : ""}${this.terminal.moveTo(1, 1)}\x1b[2J${defaults ? RESET : ""}`);
 				if (this.terminal.reserveBottom > 0) this.terminal.setScrollRegion(1, this.terminal.scrollBottom);
 			});
 			this.frame.reset();
@@ -2453,7 +2571,8 @@ var Renderer = class extends Emitter {
 	*  Nodes that compare cache against `ctx.version` need the version
 	*  bump that already happens elsewhere on theme-driven invalidation. */
 	set theme(theme) {
-		this.#theme.set(theme);
+		this.#theme.set(this.#withShiki(theme.id === "system" ? this.#systemTheme ?? theme : theme));
+		this.#syncSystemTheme();
 		this.#ctxVersion++;
 		this.stream.invalidate();
 		this.ui.invalidate();
@@ -2464,6 +2583,32 @@ var Renderer = class extends Emitter {
 	get theme() {
 		return this.#theme.get() ?? defaultTheme;
 	}
+	#withShiki(theme) {
+		return this.#shiki === "auto" ? theme : {
+			...theme,
+			shiki: this.#shiki
+		};
+	}
+	#syncSystemTheme() {
+		if (!this.#running || !this.#canQueryColors) {
+			this.#colorsWatcher?.stop();
+			this.#colorsWatcher = void 0;
+			return;
+		}
+		if (peek(this.#theme.get)?.id !== "system") return;
+		this.#colorsWatcher ??= new ColorsWatcher(this.queries, this.input, (sequence) => this.terminal.write(sequence), (snapshot, appearance) => {
+			this.#systemTheme = systemTheme(snapshot, appearance);
+			if (peek(this.#theme.get)?.id === "system") this.theme = this.#systemTheme;
+		});
+	}
+	/** Inherit the terminal background instead of painting the base background. */
+	set transparent(transparent) {
+		this.#transparent.set(transparent);
+	}
+	/** Current transparency setting. (tracked) */
+	get transparent() {
+		return unwrap(this.#transparent.get()) || this.theme.id === "system";
+	}
 	start() {
 		if (this.#running) return;
 		this.#running = true;
@@ -2471,6 +2616,7 @@ var Renderer = class extends Emitter {
 		this.#stdin.setEncoding?.("utf8");
 		this.#stdin.on("data", this.#onData);
 		this.#stdin.resume?.();
+		this.#syncSystemTheme();
 		this.emit("start");
 		if (this.#dirty) this.#schedule();
 		process.on("unhandledRejection", (reason) => this.logger.child("unhandledRejection").error("Unhandled Rejection:", reason));
@@ -2479,6 +2625,7 @@ var Renderer = class extends Emitter {
 		if (!this.#running) return;
 		this.emit("stop");
 		this.#running = false;
+		this.#syncSystemTheme();
 		this.#stdin.off("data", this.#onData);
 		this.#stdin.pause?.();
 		if (this.#escTimer !== void 0) {
@@ -2642,4 +2789,4 @@ var Renderer = class extends Emitter {
 //#endregion
 export { Renderer };
 
-//# sourceMappingURL=renderer-V6AGjbyf.mjs.map
+//# sourceMappingURL=renderer-BLsd-wrG.mjs.map