@simon_he/vue-tui 1.1.6 → 1.1.9

package/dist/experimental/browser.d.cts

@@ -0,0 +1,3 @@
+export { TBrowser } from "../vue/components/TBrowser.js";
+export type { TBrowserProps } from "../vue/components/TBrowser.js";
+export type { TBrowserInputEvent, TBrowserModifiers, TBrowserSession, TBrowserSessionContext, TBrowserSessionFactory, } from "../vue/browser/types.js";

package/dist/experimental/browser.d.ts

@@ -0,0 +1,3 @@
+export { TBrowser } from "../vue/components/TBrowser.js";
+export type { TBrowserProps } from "../vue/components/TBrowser.js";
+export type { TBrowserInputEvent, TBrowserModifiers, TBrowserSession, TBrowserSessionContext, TBrowserSessionFactory, } from "../vue/browser/types.js";

package/dist/experimental/browser.js

@@ -0,0 +1,413 @@
+import "../create-terminal-Db_-UGVQ.js";
+import { intersectRect, translateRect, useLayout, useTerminal, useTerminalNode, useVisibility } from "../rect-JzWMJxxc.js";
+import "../frame-mailbox-DaTrfyaF.js";
+import "../terminal-graphics-DpSL29OQ.js";
+import "../TAgentTerminalGraphic-B8-YZfuP.js";
+import { TVideo } from "../TVideo-D9AOiyq2.js";
+import { computed, defineComponent, h, onBeforeUnmount, watch, watchEffect } from "vue";
+
+//#region src/vue/components/TBrowser.ts
+const EMPTY_RECT = Object.freeze({
+	x: 0,
+	y: 0,
+	w: 0,
+	h: 0
+});
+const tBrowserProps = {
+	x: {
+		type: Number,
+		required: true
+	},
+	y: {
+		type: Number,
+		required: true
+	},
+	w: {
+		type: Number,
+		required: true
+	},
+	h: {
+		type: Number,
+		required: true
+	},
+	zIndex: {
+		type: Number,
+		default: 0
+	},
+	url: {
+		type: String,
+		required: true
+	},
+	sessionFactory: {
+		type: Function,
+		required: true
+	},
+	autoFocus: {
+		type: Boolean,
+		default: false
+	},
+	maxFps: {
+		type: Number,
+		default: 60
+	},
+	pixelWidth: {
+		type: Number,
+		default: void 0
+	},
+	pixelHeight: {
+		type: Number,
+		default: void 0
+	},
+	fallback: {
+		type: String,
+		default: "[browser requires terminal graphics]"
+	},
+	style: {
+		type: Object,
+		default: void 0
+	},
+	clear: {
+		type: Boolean,
+		default: true
+	}
+};
+function modifiers(event) {
+	return {
+		ctrl: Boolean(event.ctrlKey),
+		shift: Boolean(event.shiftKey),
+		alt: Boolean(event.altKey),
+		meta: Boolean(event.metaKey)
+	};
+}
+function eventText(event) {
+	return String(event.text ?? event.data ?? "");
+}
+function isBrowserShortcut(event) {
+	const key = event.key.toLowerCase();
+	return (event.ctrlKey || event.metaKey) && [
+		"l",
+		"r",
+		"t",
+		"w"
+	].includes(key) || Boolean(event.altKey) && (event.key === "ArrowLeft" || event.key === "ArrowRight") || Boolean(event.ctrlKey) && (key === "c" || key === "q");
+}
+const TBrowser = defineComponent({
+	name: "TBrowser",
+	props: tBrowserProps,
+	emits: {
+		ready: (_session) => true,
+		frame: (_event) => true,
+		navigate: (_url) => true,
+		titleChange: (_title) => true,
+		requestAddress: () => true,
+		close: () => true,
+		error: (_error) => true
+	},
+	setup(props, { emit }) {
+		const layout = useLayout();
+		const { events } = useTerminal();
+		const { visible } = useVisibility();
+		let activeSession = null;
+		let activePixelWidth = Math.max(1, Math.floor(props.pixelWidth ?? props.w * 8));
+		let activePixelHeight = Math.max(1, Math.floor(props.pixelHeight ?? props.h * 16));
+		let alive = true;
+		let skipNextInput = false;
+		let requestedUrl = props.url;
+		let sessionQueue = Promise.resolve();
+		let continuousInputScheduled = false;
+		let continuousInputGeneration = 0;
+		const pendingContinuousInput = [];
+		const initialUrl = props.url;
+		const initialPixelWidth = Math.max(2, Math.floor(props.pixelWidth ?? props.w * 8));
+		const initialPixelHeight = Math.max(2, Math.floor(props.pixelHeight ?? props.h * 16));
+		const rawRect = computed(() => translateRect({
+			x: Math.floor(props.x),
+			y: Math.floor(props.y),
+			w: Math.max(0, Math.floor(props.w)),
+			h: Math.max(0, Math.floor(props.h))
+		}, layout.originX, layout.originY));
+		const rect = computed(() => {
+			const value = rawRect.value;
+			return layout.clipRect ? intersectRect(value, layout.clipRect) ?? EMPTY_RECT : value;
+		});
+		const frameSource = async function* (context) {
+			activePixelWidth = context.pixelWidth;
+			activePixelHeight = context.pixelHeight;
+			const session = await props.sessionFactory({
+				url: context.src,
+				signal: context.signal,
+				maxFps: context.maxFps,
+				pixelWidth: context.pixelWidth,
+				pixelHeight: context.pixelHeight,
+				preferredFormat: context.preferredFormat,
+				onNavigate: (url) => emit("navigate", url),
+				onTitleChange: (title) => emit("titleChange", title)
+			});
+			if (context.signal.aborted || !alive) {
+				await session.close();
+				return;
+			}
+			clearContinuousInput();
+			sessionQueue = Promise.resolve();
+			activeSession = session;
+			try {
+				if (requestedUrl !== context.src && session.navigate) await session.navigate(requestedUrl);
+				if (context.signal.aborted || !alive) return;
+				emit("ready", session);
+				for await (const frame of session.frames) {
+					if (context.signal.aborted || !alive) return;
+					yield frame;
+				}
+			} finally {
+				if (activeSession === session) {
+					activeSession = null;
+					clearContinuousInput();
+				}
+				await session.close();
+			}
+		};
+		function reportError(error) {
+			if (alive) emit("error", error);
+		}
+		function clearContinuousInput() {
+			pendingContinuousInput.length = 0;
+			continuousInputGeneration++;
+			continuousInputScheduled = false;
+		}
+		function scheduleContinuousInput(session) {
+			if (continuousInputScheduled || pendingContinuousInput.length === 0) return;
+			const event = pendingContinuousInput.shift();
+			const generation = continuousInputGeneration;
+			continuousInputScheduled = true;
+			const pending = sessionQueue.then(() => {
+				if (generation !== continuousInputGeneration || activeSession !== session) return;
+				return session.dispatch(event);
+			});
+			sessionQueue = pending.catch((error) => {
+				if (activeSession === session) reportError(error);
+			});
+			const finish = () => {
+				if (generation !== continuousInputGeneration) return;
+				continuousInputScheduled = false;
+				if (activeSession === session) scheduleContinuousInput(session);
+			};
+			pending.then(finish, finish);
+		}
+		function queueContinuousInput(session, event) {
+			const index = pendingContinuousInput.findIndex((pending) => pending.type === event.type);
+			if (index < 0) pendingContinuousInput.push(event);
+			else if (event.type === "wheel") {
+				const previous = pendingContinuousInput[index];
+				const deltaY = (previous?.type === "wheel" ? previous.deltaY : 0) + event.deltaY;
+				if (deltaY === 0) pendingContinuousInput.splice(index, 1);
+				else pendingContinuousInput[index] = {
+					...event,
+					deltaY
+				};
+			} else pendingContinuousInput[index] = event;
+			scheduleContinuousInput(session);
+		}
+		function dispatch(event) {
+			const session = activeSession;
+			if (!session) return;
+			if (event.type === "wheel" || event.type === "pointermove") {
+				queueContinuousInput(session, event);
+				return;
+			}
+			clearContinuousInput();
+			const pending = sessionQueue.then(() => {
+				if (activeSession !== session) return;
+				return session.dispatch(event);
+			});
+			sessionQueue = pending.catch((error) => {
+				if (activeSession === session) reportError(error);
+			});
+		}
+		function invoke(action) {
+			const session = activeSession;
+			if (!session) return;
+			clearContinuousInput();
+			const pending = sessionQueue.then(() => {
+				if (activeSession !== session) return;
+				return action(session);
+			});
+			sessionQueue = pending.catch((error) => {
+				if (activeSession === session) reportError(error);
+			});
+		}
+		function closeCurrentPage() {
+			const session = activeSession;
+			if (!session?.closePage) {
+				emit("close");
+				return;
+			}
+			clearContinuousInput();
+			const pending = sessionQueue.then(() => {
+				if (activeSession !== session) return;
+				return session.closePage?.();
+			}).then((closed) => {
+				if (closed === false && activeSession === session) emit("close");
+			});
+			sessionQueue = pending.catch((error) => {
+				if (activeSession === session) reportError(error);
+			});
+		}
+		function point(event) {
+			const bounds = rawRect.value;
+			const cellX = Math.max(0, Math.min(bounds.w - 1, Math.floor(event.cellX - bounds.x)));
+			const cellY = Math.max(0, Math.min(bounds.h - 1, Math.floor(event.cellY - bounds.y)));
+			return {
+				x: Math.max(0, Math.min(activePixelWidth - 1, (cellX + .5) / bounds.w * activePixelWidth)),
+				y: Math.max(0, Math.min(activePixelHeight - 1, (cellY + .5) / bounds.h * activePixelHeight))
+			};
+		}
+		function capture(event) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+		function pointer(type, event) {
+			if (type === "pointerdown" && id.value) events.value?.focus(id.value);
+			capture(event);
+			dispatch({
+				type,
+				...point(event),
+				button: event.button,
+				buttons: event.buttons,
+				modifiers: modifiers(event)
+			});
+		}
+		const { id } = useTerminalNode(() => ({
+			rect: rect.value,
+			zIndex: props.zIndex,
+			visible: visible.value,
+			focusable: true,
+			selectable: false,
+			handlers: {
+				pointerdown: (event) => pointer("pointerdown", event),
+				pointerup: (event) => pointer("pointerup", event),
+				pointermove: (event) => pointer("pointermove", event),
+				wheel: (event) => {
+					capture(event);
+					dispatch({
+						type: "wheel",
+						...point(event),
+						deltaY: Number(event.deltaY ?? 0),
+						modifiers: modifiers(event)
+					});
+				},
+				keydown: (event) => {
+					capture(event);
+					if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "l") {
+						emit("requestAddress");
+						return;
+					}
+					if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "r") {
+						invoke((session) => session.reload?.());
+						return;
+					}
+					if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "t") {
+						invoke((session) => session.newPage?.());
+						emit("requestAddress");
+						return;
+					}
+					if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "w") {
+						closeCurrentPage();
+						return;
+					}
+					if (event.altKey && event.key === "ArrowLeft") {
+						invoke((session) => session.back?.());
+						return;
+					}
+					if (event.altKey && event.key === "ArrowRight") {
+						invoke((session) => session.forward?.());
+						return;
+					}
+					if (event.ctrlKey && ["c", "q"].includes(event.key.toLowerCase())) {
+						emit("close");
+						return;
+					}
+					dispatch({
+						type: "keydown",
+						key: event.key,
+						code: event.code,
+						repeat: Boolean(event.repeat),
+						modifiers: modifiers(event)
+					});
+				},
+				keyup: (event) => {
+					capture(event);
+					if (isBrowserShortcut(event)) return;
+					dispatch({
+						type: "keyup",
+						key: event.key,
+						code: event.code,
+						repeat: Boolean(event.repeat),
+						modifiers: modifiers(event)
+					});
+				},
+				paste: (event) => {
+					capture(event);
+					const text = eventText(event);
+					if (text) dispatch({
+						type: "paste",
+						text
+					});
+				},
+				compositionend: (event) => {
+					capture(event);
+					const text = eventText(event);
+					if (text) dispatch({
+						type: "text",
+						text
+					});
+					skipNextInput = true;
+					queueMicrotask(() => {
+						skipNextInput = false;
+					});
+				},
+				input: (event) => {
+					capture(event);
+					if (skipNextInput) return;
+					const text = eventText(event);
+					if (text) dispatch({
+						type: "text",
+						text
+					});
+				}
+			}
+		}));
+		watchEffect(() => {
+			if (!props.autoFocus || !visible.value || !id.value) return;
+			if (events.value?.getFocused() !== id.value) events.value?.focus(id.value);
+		});
+		watch(() => props.url, (url) => {
+			requestedUrl = url;
+			if (activeSession?.navigate) invoke((session) => session.navigate?.(url));
+		});
+		onBeforeUnmount(() => {
+			alive = false;
+			activeSession = null;
+			clearContinuousInput();
+		});
+		return () => h(TVideo, {
+			x: props.x,
+			y: props.y,
+			w: props.w,
+			h: props.h,
+			zIndex: props.zIndex,
+			src: initialUrl,
+			frameSource,
+			maxFps: props.maxFps,
+			pixelWidth: props.pixelWidth ?? initialPixelWidth,
+			pixelHeight: props.pixelHeight ?? initialPixelHeight,
+			fallback: props.fallback,
+			style: props.style,
+			clear: props.clear,
+			onFrame: (event) => emit("frame", event),
+			onError: (error) => emit("error", error)
+		});
+	}
+});
+
+//#endregion
+export { TBrowser };

package/dist/experimental.cjs

@@ -2154,7 +2154,7 @@ function getRootTerminal(terminal) {
 }
 
 // src/renderer/terminal-graphics.ts
-var ESC2 = "\x1B", BEL = "\x07", ST = `${ESC2}\\`, ESC_RE = "\\u001B", BEL_RE = "\\u0007", CSI_RE = new RegExp(`${ESC_RE}\\[[0-?]*[ -/]*[@-~]`, "g"), OSC_RE = new RegExp(`${ESC_RE}\\][\\s\\S]*?(?:${BEL_RE}|${ESC_RE}\\\\)`, "g"), DCS_RE = new RegExp(`${ESC_RE}P[\\s\\S]*?${ESC_RE}\\\\`, "g"), APC_RE = new RegExp(`${ESC_RE}_[\\s\\S]*?${ESC_RE}\\\\`, "g"), C1_CSI_RE = new RegExp("\\u009B[0-?]*[ -/]*[@-~]", "g"), C1_OSC_RE = new RegExp(`\\u009D[\\s\\S]*?(?:${BEL_RE}|\\u009C)`, "g"), C1_DCS_RE = new RegExp("\\u0090[\\s\\S]*?\\u009C", "g"), C1_APC_RE = new RegExp("\\u009F[\\s\\S]*?\\u009C", "g"), MAX_TERMINAL_GRAPHICS_SEQUENCE_CHARS = 16 * 1024 * 1024, MAX_TERMINAL_GRAPHICS_FALLBACK_CHARS = 16384, MAX_TERMINAL_GRAPHIC_CELLS = 1e4, TERMINAL_GRAPHICS_REGISTRY = Symbol.for("@simon_he/vue-tui:v1:terminal-graphics"), terminalGraphicsGlobal = globalThis, terminalGraphicsRegistry = terminalGraphicsGlobal[TERMINAL_GRAPHICS_REGISTRY] ?? {
+var ESC2 = "\x1B", BEL = "\x07", ST = `${ESC2}\\`, ESC_RE = "\\u001B", BEL_RE = "\\u0007", CSI_RE = new RegExp(`${ESC_RE}\\[[0-?]*[ -/]*[@-~]`, "g"), OSC_RE = new RegExp(`${ESC_RE}\\][\\s\\S]*?(?:${BEL_RE}|${ESC_RE}\\\\)`, "g"), DCS_RE = new RegExp(`${ESC_RE}P[\\s\\S]*?${ESC_RE}\\\\`, "g"), APC_RE = new RegExp(`${ESC_RE}_[\\s\\S]*?${ESC_RE}\\\\`, "g"), C1_CSI_RE = new RegExp("\\u009B[0-?]*[ -/]*[@-~]", "g"), C1_OSC_RE = new RegExp(`\\u009D[\\s\\S]*?(?:${BEL_RE}|\\u009C)`, "g"), C1_DCS_RE = new RegExp("\\u0090[\\s\\S]*?\\u009C", "g"), C1_APC_RE = new RegExp("\\u009F[\\s\\S]*?\\u009C", "g"), MAX_TERMINAL_GRAPHICS_SEQUENCE_CHARS = 16 * 1024 * 1024, MAX_TERMINAL_GRAPHICS_FALLBACK_CHARS = 16384, MAX_TERMINAL_GRAPHIC_CELLS = 1e5, TERMINAL_GRAPHICS_REGISTRY = Symbol.for("@simon_he/vue-tui:v1:terminal-graphics"), terminalGraphicsGlobal = globalThis, terminalGraphicsRegistry = terminalGraphicsGlobal[TERMINAL_GRAPHICS_REGISTRY] ?? {
   outputs: /* @__PURE__ */ new WeakMap(),
   outputVersions: /* @__PURE__ */ new WeakMap(),
   outputListeners: /* @__PURE__ */ new WeakMap()