@aitty/browser 0.1.2 → 0.2.0

package/dist/frontend/shell-controls.js

@@ -0,0 +1,221 @@
+import { normalizeThemeName } from "./terminal-config.js";
+//#region packages/browser/src/frontend/shell-controls.ts
+const DEFAULT_SCROLL_RESTORE_PASSES = 8;
+const STICKY_BOTTOM_SCROLL_RESTORE_PASSES = 16;
+function installShellControls(options) {
+	const { captureScrollAnchor, doc, focusTerminal, getConfig, onInterrupt, onScrollSurfaceChange, onStickToBottomChange, resetConfig, restoreScrollAnchor, shell, updateConfig, windowObject } = options;
+	const fontSizeLabel = shell.querySelector("[data-terminal-font-size]");
+	const fontSizeDecreaseControl = shell.querySelector("[data-shell-control=\"font-size-decrease\"]");
+	const fontSizeIncreaseControl = shell.querySelector("[data-shell-control=\"font-size-increase\"]");
+	const fontSizeResetControl = shell.querySelector("[data-shell-control=\"font-size-reset\"]");
+	const viewportFullscreenControl = shell.querySelector("[data-shell-control=\"viewport-fullscreen\"]");
+	const systemFullscreenControl = shell.querySelector("[data-shell-control=\"system-fullscreen\"]");
+	const terminalContainer = shell.querySelector(".terminal-container");
+	const themeToggle = shell.querySelector("#theme-toggle");
+	let viewportFullscreen = false;
+	let pendingScrollAnchor = null;
+	let suppressNextControlClick = false;
+	let scrollRestoreFrame = null;
+	let scrollRestorePassesRemaining = 0;
+	const cancelScrollRestore = () => {
+		if (scrollRestoreFrame === null) {
+			scrollRestorePassesRemaining = 0;
+			return;
+		}
+		windowObject.cancelAnimationFrame(scrollRestoreFrame);
+		scrollRestoreFrame = null;
+		scrollRestorePassesRemaining = 0;
+	};
+	const scheduleScrollAnchorRestore = (scrollAnchor, passes = scrollAnchor.stickToBottom ? STICKY_BOTTOM_SCROLL_RESTORE_PASSES : DEFAULT_SCROLL_RESTORE_PASSES) => {
+		scrollRestorePassesRemaining = Math.max(scrollRestorePassesRemaining, passes);
+		if (scrollRestoreFrame !== null) return;
+		const runRestore = () => {
+			scrollRestoreFrame = windowObject.requestAnimationFrame(() => {
+				scrollRestoreFrame = null;
+				restoreScrollAnchor(scrollAnchor);
+				onScrollSurfaceChange?.();
+				scrollRestorePassesRemaining = Math.max(0, scrollRestorePassesRemaining - 1);
+				if (scrollRestorePassesRemaining > 0) runRestore();
+			});
+		};
+		runRestore();
+	};
+	const emitLayoutChange = () => {
+		windowObject.dispatchEvent(new windowObject.Event("resize"));
+		const scrollAnchor = pendingScrollAnchor;
+		pendingScrollAnchor = null;
+		onStickToBottomChange?.(scrollAnchor?.stickToBottom === true);
+		onScrollSurfaceChange?.();
+		if (!scrollAnchor) return;
+		windowObject.requestAnimationFrame(() => {
+			windowObject.requestAnimationFrame(() => {
+				scheduleScrollAnchorRestore(scrollAnchor);
+			});
+		});
+	};
+	const captureScrollTransition = () => {
+		cancelScrollRestore();
+		pendingScrollAnchor = captureScrollAnchor();
+	};
+	const syncFontSizeControls = () => {
+		const { fontSize, fontSizeRange: range } = getConfig().appearance;
+		if (fontSizeLabel) fontSizeLabel.textContent = `${fontSize}px`;
+		fontSizeDecreaseControl?.toggleAttribute("disabled", fontSize <= range.min);
+		fontSizeIncreaseControl?.toggleAttribute("disabled", fontSize >= range.max);
+		fontSizeResetControl?.setAttribute("aria-label", `Reset terminal font size (${fontSize}px)`);
+		fontSizeResetControl?.setAttribute("title", `Reset terminal font size (${fontSize}px)`);
+	};
+	const changeFontSize = (direction) => {
+		const { fontSize, fontSizeRange: range } = getConfig().appearance;
+		updateConfig({ appearance: { fontSize: fontSize + direction * range.step } });
+		syncFontSizeControls();
+		focusTerminal();
+	};
+	const resetFontSize = () => {
+		updateConfig({ appearance: { fontSize: resetConfig.appearance.fontSize } });
+		syncFontSizeControls();
+		focusTerminal();
+	};
+	const syncViewportFullscreenState = () => {
+		shell.dataset.viewportFullscreen = viewportFullscreen ? "true" : "false";
+		viewportFullscreenControl?.setAttribute("aria-pressed", viewportFullscreen ? "true" : "false");
+		viewportFullscreenControl?.setAttribute("aria-label", viewportFullscreen ? "Exit browser fullscreen" : "Enter browser fullscreen");
+		viewportFullscreenControl?.setAttribute("title", viewportFullscreen ? "Exit browser fullscreen" : "Enter browser fullscreen");
+		emitLayoutChange();
+	};
+	const syncSystemFullscreenState = () => {
+		const fullscreen = doc.fullscreenElement === shell;
+		shell.dataset.fullscreen = fullscreen ? "true" : "false";
+		systemFullscreenControl?.setAttribute("aria-pressed", fullscreen ? "true" : "false");
+		systemFullscreenControl?.setAttribute("aria-label", fullscreen ? "Exit system fullscreen" : "Enter system fullscreen");
+		systemFullscreenControl?.setAttribute("title", fullscreen ? "Exit system fullscreen" : "Enter system fullscreen");
+		emitLayoutChange();
+	};
+	const toggleViewportFullscreen = () => {
+		captureScrollTransition();
+		viewportFullscreen = !viewportFullscreen;
+		syncViewportFullscreenState();
+	};
+	const toggleSystemFullscreen = async () => {
+		if (doc.fullscreenElement === shell) {
+			captureScrollTransition();
+			if (doc.fullscreenElement && typeof doc.exitFullscreen === "function") await doc.exitFullscreen();
+			else syncSystemFullscreenState();
+			return;
+		}
+		if (typeof shell.requestFullscreen !== "function") {
+			toggleViewportFullscreen();
+			return;
+		}
+		captureScrollTransition();
+		try {
+			await shell.requestFullscreen();
+		} catch {
+			pendingScrollAnchor = null;
+			toggleViewportFullscreen();
+		}
+	};
+	const toggleTheme = () => {
+		const nextTheme = (getConfig().appearance.theme ?? normalizeThemeName(shell.dataset.theme)) === "light" ? "dark" : "light";
+		shell.dataset.themeOverride = "true";
+		updateConfig({ appearance: { theme: nextTheme } });
+		focusTerminal();
+	};
+	const toggleCollapse = () => {
+		const isCollapsed = terminalContainer?.dataset.collapsed === "true";
+		if (terminalContainer) {
+			terminalContainer.dataset.collapsed = isCollapsed ? "false" : "true";
+			emitLayoutChange();
+		}
+	};
+	const runAction = (action) => {
+		if (action === "close") {
+			onInterrupt();
+			focusTerminal();
+			return;
+		}
+		if (action === "viewport-fullscreen") {
+			toggleViewportFullscreen();
+			return;
+		}
+		if (action === "system-fullscreen") {
+			toggleSystemFullscreen();
+			return;
+		}
+		if (action === "collapse") {
+			toggleCollapse();
+			return;
+		}
+		if (action === "font-size-decrease") {
+			changeFontSize(-1);
+			return;
+		}
+		if (action === "font-size-increase") {
+			changeFontSize(1);
+			return;
+		}
+		if (action === "font-size-reset") resetFontSize();
+	};
+	const handleClick = (event) => {
+		const target = event.target instanceof Element ? event.target : null;
+		const control = target?.closest("[data-shell-control]");
+		if (control && shell.contains(control)) {
+			event.preventDefault();
+			if (suppressNextControlClick) {
+				suppressNextControlClick = false;
+				return;
+			}
+			runAction(control.dataset.shellControl);
+			return;
+		}
+		if (themeToggle && (themeToggle === target || themeToggle.contains(target))) {
+			event.preventDefault();
+			toggleTheme();
+		}
+	};
+	const handlePointerDown = (event) => {
+		const control = (event.target instanceof Element ? event.target : null)?.closest("[data-shell-control]");
+		if (!control || !shell.contains(control) || control.dataset.shellControl !== "viewport-fullscreen" || !shouldUsePointerDownViewportFullscreenToggle(windowObject)) return;
+		event.preventDefault();
+		suppressNextControlClick = true;
+		toggleViewportFullscreen();
+	};
+	const handleExternalControl = (event) => {
+		runAction("detail" in event ? event.detail : void 0);
+	};
+	const handleFullscreenChange = () => {
+		syncSystemFullscreenState();
+	};
+	const systemThemeMediaQuery = windowObject.matchMedia("(prefers-color-scheme: dark)");
+	const handleSystemThemeChange = (event) => {
+		if (!shell.dataset.themeOverride) updateConfig({ appearance: { theme: event.matches ? "dark" : "light" } });
+	};
+	shell.addEventListener("pointerdown", handlePointerDown, true);
+	shell.addEventListener("click", handleClick);
+	windowObject.addEventListener("aitty:control", handleExternalControl);
+	doc.addEventListener("fullscreenchange", handleFullscreenChange);
+	if (typeof systemThemeMediaQuery.addEventListener === "function") systemThemeMediaQuery.addEventListener("change", handleSystemThemeChange);
+	else systemThemeMediaQuery.addListener(handleSystemThemeChange);
+	if (!shell.dataset.theme) handleSystemThemeChange(systemThemeMediaQuery);
+	syncViewportFullscreenState();
+	syncSystemFullscreenState();
+	syncFontSizeControls();
+	return () => {
+		cancelScrollRestore();
+		shell.removeEventListener("pointerdown", handlePointerDown, true);
+		shell.removeEventListener("click", handleClick);
+		windowObject.removeEventListener("aitty:control", handleExternalControl);
+		doc.removeEventListener("fullscreenchange", handleFullscreenChange);
+		if (typeof systemThemeMediaQuery.removeEventListener === "function") systemThemeMediaQuery.removeEventListener("change", handleSystemThemeChange);
+		else systemThemeMediaQuery.removeListener(handleSystemThemeChange);
+	};
+}
+function shouldUsePointerDownViewportFullscreenToggle(windowObject) {
+	const navigatorLike = windowObject.navigator;
+	const platform = navigatorLike?.platform ?? "";
+	const userAgent = navigatorLike?.userAgent ?? "";
+	const maxTouchPoints = navigatorLike?.maxTouchPoints ?? 0;
+	return (/iP(?:hone|ad|od)/.test(platform) || /iP(?:hone|ad|od)/.test(userAgent) || platform === "MacIntel" && maxTouchPoints > 1) && windowObject.matchMedia?.("(pointer: coarse)").matches === true;
+}
+//#endregion
+export { installShellControls };

package/dist/frontend/terminal-app.d.ts

@@ -1,26 +1,40 @@
 import { BrowserTerminalBridge, BrowserTerminalRenderOptions } from "./browser-terminal-renderer.js";
-import { TerminalKeyResolver } from "./terminal-input-policies.js";
-import { WTermOptions } from "@wterm/dom";
-import { AittyRuntimeKind, AittyTerminalConnectionState, AittyTerminalLoadingPresentation, AittyTerminalOutputState, AittyTerminalSessionPresentationState, AittyTerminalStatusSnapshot, AittyTheme } from "@aitty/protocol";
+import { TerminalAppearanceConfig, TerminalBehaviorConfig, TerminalConfig, TerminalConfigListener, TerminalConfigPatch, TerminalFontSizeRange, TerminalResolvedAppearanceConfig, TerminalResolvedBehaviorConfig, TerminalResolvedConfig, TerminalTheme, TerminalThemeTarget } from "./terminal-config.js";
+import { AittyRuntimeKind, AittyTerminalConnectionState, AittyTerminalLoadingPresentation, AittyTerminalOutputState, AittyTerminalSessionPresentationState, AittyTerminalStatusSnapshot } from "@aitty/protocol";
 
-//#region src/frontend/terminal-app.d.ts
+//#region packages/browser/src/frontend/terminal-app.d.ts
 type RuntimeKind = AittyRuntimeKind;
-type TerminalTheme = AittyTheme;
 type TerminalConnectionState = AittyTerminalConnectionState;
 type TerminalOutputState = AittyTerminalOutputState;
 type TerminalSessionPresentationState = AittyTerminalSessionPresentationState;
 type BinaryWriteTarget = {
   write(data: Uint8Array): void;
 };
+type TimeoutHandle = ReturnType<typeof setTimeout> | number;
 type FrameScheduler = {
   cancelFrame?: (handle: number) => void;
+  now?: () => number;
   requestFrame?: (callback: FrameRequestCallback) => number;
+  clearTimeout?: (handle: TimeoutHandle) => void;
+  setTimeout?: (callback: () => void, delayMs: number) => TimeoutHandle;
 };
 type BufferedTerminalWriter = {
   destroy(): void;
   discardPending(): void;
   enqueue(chunk: Uint8Array): void;
 };
+type BufferedTerminalWriterOptions = {
+  maxBytesPerFrame?: number;
+  minFrameIntervalMs?: number;
+  resolveMinFrameIntervalMs?: (payload: {
+    pendingByteLength: number;
+  }) => number;
+  onDrain?: () => void;
+  onFlush?: (payload: {
+    pendingByteLength: number;
+    wroteByteLength: number;
+  }) => void;
+};
 type TerminalLoadingPresentation = AittyTerminalLoadingPresentation;
 type TerminalStatusSnapshot = AittyTerminalStatusSnapshot;
 type TerminalStatusListener = (status: TerminalStatusSnapshot) => void;
@@ -76,68 +90,116 @@ type TerminalTransport = {
   send(data: string | Uint8Array): void;
   sendControl?(data: string): void;
 };
+type BrowserWTermOptions = {
+  autoResize?: boolean;
+  cols?: number;
+  cursorBlink?: boolean;
+  onData?: (data: string) => void;
+  onResize?: (cols: number, rows: number) => void;
+  onTitle?: (title: string) => void;
+  rows?: number;
+  wasmUrl?: string;
+};
 type MountTerminalDependencies = {
-  createTerm?: (element: HTMLElement, options: WTermOptions) => BrowserWTerm;
+  config?: TerminalConfig;
+  createTerm?: (element: HTMLElement, options: BrowserWTermOptions) => BrowserWTerm;
   createTransport?: (handlers: TransportHandlers) => TerminalTransport;
   elements?: MountTerminalElements;
   frameScheduler?: FrameScheduler;
-  input?: {
-    resolveKey?: TerminalKeyResolver;
-  };
+  onConfigChange?: TerminalConfigListener;
   onStatusChange?: TerminalStatusListener;
   reconnectDelayMs?: number;
   resolveRuntimeKind?: (doc: Document, shell: HTMLElement) => RuntimeKind | Promise<RuntimeKind>;
   scroll?: TerminalScrollOptions;
+  shellControls?: boolean;
   src?: string | URL;
-  theme?: TerminalTheme;
-  transcriptArchiveOptions?: {
-    scrollbackLimit?: number;
-  };
 };
 type MountedTerminalApp = {
   destroy(): void;
+  getConfig(): TerminalResolvedConfig;
   getStatus(): TerminalStatusSnapshot;
-  getTheme(): string | undefined;
-  setTheme(theme: TerminalTheme | undefined): void;
   term: BrowserWTerm;
   transport: TerminalTransport;
+  updateConfig(config: TerminalConfigPatch): TerminalResolvedConfig;
 };
 type TerminalRendererLike = {
   cols?: number;
+  getRenderedScrollbackCount?: () => number;
   render?(bridge: BrowserTerminalBridge, options?: BrowserTerminalRenderOptions): void;
   rows?: number;
   setup?(cols: number, rows: number): void;
 };
+type BrowserWTermWriteOptions = {
+  scheduleRender?: boolean;
+};
 type BrowserWTerm = {
   _container?: HTMLElement;
   _measureCharSize?: () => TerminalCellMetrics;
   bridge?: BrowserTerminalBridge | null;
+  clearSelection?: () => void;
   cols: number;
   destroy(): void;
   element: HTMLElement;
   focus(): void;
+  getSelectionText?: () => string;
+  hasSelection?: () => boolean;
   init(): Promise<unknown>;
   input?: {
     destroy?: () => void;
     focus?: () => void;
+    setImeAnchor?: (anchor: HTMLElement | null) => void;
     textarea?: HTMLTextAreaElement | null;
   };
+  renderNow?: (options?: BrowserTerminalRenderOptions) => void;
   renderer?: TerminalRendererLike;
   resize(cols: number, rows: number): void;
   rows: number;
-  write?(data: string | Uint8Array): void;
+  write?(data: string | Uint8Array, options?: BrowserWTermWriteOptions): void;
 };
 type TerminalCellMetrics = {
   charWidth: number;
   rowHeight: number;
 };
+type BrowserWindow = Window & typeof globalThis;
+type MobileComposerControl = "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "enter" | "esc" | "tab";
+declare const MOBILE_COMPOSER_PRIMARY_CONTROLS: readonly MobileComposerControl[];
+type BrowserViewport = {
+  browserChromeInsetBottom: number;
+  height: number;
+  keyboardInsetBottom: number;
+  offsetTop: number;
+  safeHeight: number;
+  width: number;
+};
+type MobileFocusProxyPosition = {
+  anchor: "mobile-focus-proxy";
+  height: number;
+  left: number;
+  top: number;
+  width: number;
+};
+type MobileFocusProxyPointerState = {
+  keyboardOpen?: boolean;
+  textareaFocused?: boolean;
+};
 /**
  * Batches raw PTY bytes into animation frames without splitting UTF-8 codepoints or
  * incomplete ANSI sequences. This is the only throttling layer in the browser path.
  */
-declare function createBufferedTerminalWriter(target: BinaryWriteTarget, scheduler?: FrameScheduler, options?: {
-  maxBytesPerFrame?: number;
-}): BufferedTerminalWriter;
+declare function createBufferedTerminalWriter(target: BinaryWriteTarget, scheduler?: FrameScheduler, options?: BufferedTerminalWriterOptions): BufferedTerminalWriter;
+declare function resolveBrowserViewport(windowObject: BrowserWindow): BrowserViewport;
+declare function resolveMobileFocusProxyPosition(windowObject: BrowserWindow): MobileFocusProxyPosition;
+declare function shouldEnableMobileFocusProxyPointerEvents(windowObject: BrowserWindow, state?: MobileFocusProxyPointerState): boolean;
+declare function isMobileLiveInputTapTarget(terminalRoot: HTMLElement, windowObject: BrowserWindow, clientX: number, clientY: number): boolean;
+declare function resolveMobileKeyboardPromptAlignDelays(): number[];
+declare function resolveTerminalOutputFrameIntervalMs({
+  pendingByteLength,
+  sustainedPressure
+}: {
+  pendingByteLength: number;
+  sustainedPressure?: boolean;
+}): number;
+declare function resolveMobileComposerExpandedListHeight(controlCount?: number): number;
 declare function mountTerminalApp(doc?: Document, dependencies?: MountTerminalDependencies): Promise<MountedTerminalApp>;
 interface MountAittyOptions extends MountTerminalDependencies {
   document?: Document;
@@ -152,5 +214,7 @@ interface MountAittyContainerOptions extends Omit<MountAittyOptions, "elements"
 declare function mountAitty(options?: MountAittyOptions): Promise<MountedTerminalApp>;
 declare function mountAitty(container: HTMLElement | string, options?: MountAittyContainerOptions): Promise<MountedTerminalApp>;
 declare function defineAittyTerminalElement(registry?: CustomElementRegistry | undefined): void;
+declare function shouldFollowLiveOutputOnUserInputData(data: string | Uint8Array): boolean;
+declare function resolveMobileComposerControlSequence(control: MobileComposerControl): string;
 //#endregion
-export { BinaryWriteTarget, BufferedTerminalWriter, FrameScheduler, MountAittyContainerOptions, MountAittyOptions, MountTerminalDependencies, MountTerminalElements, MountedTerminalApp, TerminalConnectionState, TerminalLoadingPresentation, TerminalOutputState, TerminalScrollAdapter, TerminalScrollAdapterContext, TerminalScrollAdapterFactory, TerminalScrollMetrics, TerminalScrollOptions, TerminalSessionPresentationState, TerminalStatusListener, TerminalStatusSnapshot, TerminalTheme, TerminalTransport, TransportCloseEvent, TransportHandlers, createBufferedTerminalWriter, defineAittyTerminalElement, mountAitty, mountTerminalApp };
+export { BinaryWriteTarget, BrowserViewport, BrowserWTermOptions, BufferedTerminalWriter, FrameScheduler, MOBILE_COMPOSER_PRIMARY_CONTROLS, MobileFocusProxyPointerState, MobileFocusProxyPosition, MountAittyContainerOptions, MountAittyOptions, MountTerminalDependencies, MountTerminalElements, MountedTerminalApp, type TerminalAppearanceConfig, type TerminalBehaviorConfig, type TerminalConfig, type TerminalConfigListener, type TerminalConfigPatch, TerminalConnectionState, type TerminalFontSizeRange, TerminalLoadingPresentation, TerminalOutputState, type TerminalResolvedAppearanceConfig, type TerminalResolvedBehaviorConfig, type TerminalResolvedConfig, TerminalScrollAdapter, TerminalScrollAdapterContext, TerminalScrollAdapterFactory, TerminalScrollMetrics, TerminalScrollOptions, TerminalSessionPresentationState, TerminalStatusListener, TerminalStatusSnapshot, type TerminalTheme, type TerminalThemeTarget, TerminalTransport, TransportCloseEvent, TransportHandlers, createBufferedTerminalWriter, defineAittyTerminalElement, isMobileLiveInputTapTarget, mountAitty, mountTerminalApp, resolveBrowserViewport, resolveMobileComposerControlSequence, resolveMobileComposerExpandedListHeight, resolveMobileFocusProxyPosition, resolveMobileKeyboardPromptAlignDelays, resolveTerminalOutputFrameIntervalMs, shouldEnableMobileFocusProxyPointerEvents, shouldFollowLiveOutputOnUserInputData };