electrobun 1.18.4-beta.18 → 1.18.4-beta.21

package/dist/api/sdks/main/ui/uiwindow.ts

@@ -0,0 +1,330 @@
+// Mounting a UI tree onto a Dawn target. Two shapes:
+//
+// - createUIWindow: a GpuWindow whose whole content is the retained UI tree —
+//   app chrome without a webview.
+// - createUIView: a UI tree rendered into an existing WGPUView composited
+//   inside any window (e.g. a view created by an <electrobun-wgpu>-style tag
+//   over a webview) — UI layered on top of web content.
+//
+// Both are invalidation-driven: the frame tick is a cheap input poll unless
+// something marked the tree dirty.
+
+import { GpuWindow } from "../core/GpuWindow";
+import type { WGPUView } from "../core/WGPUView";
+import { batch, createRoot, inert } from "./reactive";
+import { Prop } from "./tree";
+import { hitChain, scrollTargetAt } from "./hit";
+import { computeLayout } from "./layout";
+import { paint } from "./paint";
+import { createUiRenderer } from "./renderer";
+import { attachInput } from "./input";
+import { tryEnableNativeText } from "./text";
+import { isUIElement, type UIElement } from "./jsx-runtime";
+import { nativeText } from "../proc/native";
+import {
+	createUiContext,
+	withUiContext,
+	type AnchorRect,
+	type KeyEventInfo,
+	type PointerEventInfo,
+	type UiContext,
+} from "./ui";
+import electrobunEventEmitter from "../events/eventEmitter";
+
+export interface UIMountOptions {
+	/** Painted every frame behind the tree. */
+	background?: string;
+	/** Frame tick in ms: input poll always, render only when dirty. */
+	tickMs?: number;
+}
+
+export interface UIWindowOptions extends UIMountOptions {
+	title: string;
+	width: number;
+	height: number;
+	titleBarStyle?: "hidden" | "hiddenInset" | "default";
+	/**
+	 * Transparent window: pair with an alpha background (e.g. "#00000000")
+	 * and a rounded root box for a floating-panel look.
+	 */
+	transparent?: boolean;
+	alwaysOnTop?: boolean;
+}
+
+export interface UIMount {
+	context: UiContext;
+	dispose(): void;
+}
+
+export interface UIWindow extends UIMount {
+	window: GpuWindow;
+}
+
+export interface UIView extends UIMount {
+	view: WGPUView;
+}
+
+interface MountTarget {
+	renderTarget: GpuWindow | WGPUView;
+	/** WGPUView id whose native pointer events drive this mount. */
+	viewId: number;
+	windowId: number;
+	getSize(): { width: number; height: number };
+	/** Offset of the render target inside the window's content area. */
+	viewOffset(): { x: number; y: number };
+	/** False once the underlying native target is gone; ticks become no-ops. */
+	isAlive?(): boolean;
+	/** False while hidden: skip input polling and rendering until shown. */
+	isVisible?(): boolean;
+	/** Whether windowDrag nodes may move the host window (window mounts). */
+	allowWindowDrag?: boolean;
+}
+
+export type UIApp = () => void | UIElement;
+
+async function mount(
+	target: MountTarget,
+	options: UIMountOptions,
+	app: UIApp,
+): Promise<{ context: UiContext; stop: () => void }> {
+	const background = options.background ?? "#141420";
+	// System-font text when the native wrapper provides it (macOS); the
+	// built-in bitmap font otherwise.
+	tryEnableNativeText(nativeText.available() ? nativeText : null);
+	const renderer = await createUiRenderer(
+		target.renderTarget,
+		background,
+		target.getSize(),
+	);
+	const ctx = createUiContext();
+	ctx.windowId = target.windowId;
+	const { tree } = ctx;
+
+	let disposeRoot = () => {};
+	createRoot((dispose) => {
+		disposeRoot = dispose;
+		withUiContext(ctx, () => {
+			const result = app();
+			// JSX apps return a lazy element; the builder API returns nothing.
+			if (isUIElement(result)) result.create();
+		});
+	});
+
+	const pointerHandler = (
+		type: "click" | "down" | "up" | "enter" | "leave",
+		targetId: number,
+		x: number,
+		y: number,
+	) => {
+		if (type === "down") {
+			// Click-to-focus: innermost focusable ancestor of the hit, or blur
+			// (targetId 0 = background click).
+			let id = targetId;
+			while (id !== 0 && tree.has(id)) {
+				if (tree.getProp(id, Prop.Focusable) === 1) break;
+				id = tree.parentOf(id);
+			}
+			ctx.setFocused(id);
+		} else if (type === "enter") {
+			ctx.setHovered(targetId);
+		} else if (type === "leave") {
+			if (inert(ctx.hoveredId) === targetId) ctx.setHovered(0);
+		}
+		const handlers = ctx.handlers.get(targetId);
+		if (!handlers) return;
+		const event: PointerEventInfo = { x, y, target: targetId };
+		const fn =
+			type === "click"
+				? handlers.onClick
+				: type === "down"
+					? handlers.onPointerDown
+					: type === "up"
+						? handlers.onPointerUp
+						: type === "enter"
+							? handlers.onPointerEnter
+							: handlers.onPointerLeave;
+		if (fn) batch(() => fn(event));
+	};
+
+	const input = attachInput(target.windowId, target.viewId, target.viewOffset, {
+		hitChain: (x, y) => hitChain(tree, x, y),
+		dispatchWheel: (x, y, dx, dy) => {
+			const targetId = scrollTargetAt(tree, x, y);
+			if (targetId === 0) return;
+			const node = tree.get(targetId);
+			const column = tree.getProp(targetId, Prop.Dir) === 1;
+			const delta = column ? dy : dx;
+			const viewport = column ? node.h : node.w;
+			const max = Math.max(0, node.contentMain - viewport);
+			const current = tree.getProp(targetId, Prop.Scroll);
+			// Natural scrolling: positive delta scrolls content down/right.
+			const next = Math.max(0, Math.min(max, current - delta));
+			tree.setProp(targetId, Prop.Scroll, next);
+		},
+		isDragHandle: (id) => {
+			if (!target.allowWindowDrag) return false;
+			for (let n = id; n !== 0 && tree.has(n); n = tree.parentOf(n)) {
+				if (tree.getProp(n, Prop.WindowDrag) === 1) return true;
+			}
+			return false;
+		},
+		dispatchPointer: pointerHandler,
+		dispatchKey: (e: KeyEventInfo) => {
+			batch(() => {
+				// Focused node first, bubbling through ancestors; a handler
+				// returning true stops propagation to the window-level handlers.
+				let id = inert(ctx.focusedId);
+				while (id !== 0 && tree.has(id)) {
+					const handler = ctx.handlers.get(id)?.onKeyDown;
+					if (handler && handler(e) === true) return;
+					id = tree.parentOf(id);
+				}
+				for (const handler of ctx.keyHandlers) handler(e);
+			});
+		},
+	});
+
+	let lastWidth = 0;
+	let lastHeight = 0;
+	const lastAnchorRects = new Map<number, AnchorRect>();
+	const syncAnchors = () => {
+		for (const [id, onFrame] of ctx.anchors) {
+			if (!tree.has(id)) {
+				lastAnchorRects.delete(id);
+				continue;
+			}
+			const node = tree.get(id);
+			const rect: AnchorRect = {
+				x: node.x,
+				y: node.y,
+				width: node.w,
+				height: node.h,
+			};
+			const last = lastAnchorRects.get(id);
+			if (
+				!last ||
+				last.x !== rect.x ||
+				last.y !== rect.y ||
+				last.width !== rect.width ||
+				last.height !== rect.height
+			) {
+				lastAnchorRects.set(id, rect);
+				onFrame(rect);
+			}
+		}
+	};
+
+	const renderFrame = (width: number, height: number) => {
+		if (width <= 0 || height <= 0) return;
+		renderer.resize(width, height);
+		computeLayout(tree, width, height);
+		syncAnchors();
+		renderer.render(paint(tree), width, height);
+	};
+
+	const timer = setInterval(() => {
+		if (target.isAlive && !target.isAlive()) return;
+		if (target.isVisible && !target.isVisible()) return;
+		input.poll();
+		const { width, height } = target.getSize();
+		const sizeChanged = width !== lastWidth || height !== lastHeight;
+		if (tree.takeDirty() || sizeChanged) {
+			lastWidth = width;
+			lastHeight = height;
+			renderFrame(width, height);
+		}
+	}, options.tickMs ?? 8);
+
+	return {
+		context: ctx,
+		stop() {
+			clearInterval(timer);
+			input.dispose();
+			disposeRoot();
+		},
+	};
+}
+
+export async function createUIWindow(
+	options: UIWindowOptions,
+	app: UIApp,
+): Promise<UIWindow> {
+	const win = new GpuWindow({
+		title: options.title,
+		frame: { width: options.width, height: options.height },
+		// hiddenInset keeps the window frame equal to the content area, so
+		// cursor-to-local math needs no title-bar offset.
+		titleBarStyle: options.titleBarStyle ?? "hiddenInset",
+		transparent: options.transparent ?? false,
+	});
+	if (options.alwaysOnTop) {
+		win.setAlwaysOnTop(true);
+	}
+
+	const mounted = await mount(
+		{
+			renderTarget: win,
+			viewId: win.wgpuViewId,
+			windowId: win.id,
+			getSize: () => win.getSize(),
+			viewOffset: () => ({ x: 0, y: 0 }),
+			// Hidden windows skip layout/paint/GPU entirely (e.g. a focused
+			// textInput's caret blink must not keep a hidden palette rendering).
+			isVisible: () => win.isVisible(),
+			allowWindowDrag: true,
+		},
+		options,
+		app,
+	);
+
+	const onClose = () => mounted.stop();
+	electrobunEventEmitter.on(`close-${win.id}`, onClose);
+
+	return {
+		window: win,
+		context: mounted.context,
+		dispose() {
+			electrobunEventEmitter.off(`close-${win.id}`, onClose);
+			mounted.stop();
+			win.close();
+		},
+	};
+}
+
+/**
+ * Mount a UI tree into an existing WGPUView. The view's frame (tracked via
+ * the JS wrapper) supplies size and pointer offset; pair it with an
+ * <electrobun-wgpu>-style tag to layer reactive native UI over a webview.
+ * Note: frames moved natively without updating the JS wrapper (tag overlay
+ * sync) are not observed yet — production work alongside native pointer
+ * events.
+ */
+export async function createUIView(
+	view: WGPUView,
+	options: UIMountOptions,
+	app: UIApp,
+): Promise<UIView> {
+	const mounted = await mount(
+		{
+			renderTarget: view,
+			viewId: view.id,
+			windowId: view.windowId,
+			getSize: () => ({
+				width: view.frame.width,
+				height: view.frame.height,
+			}),
+			viewOffset: () => ({ x: view.frame.x, y: view.frame.y }),
+			isAlive: () => !view.isRemoved,
+		},
+		options,
+		app,
+	);
+
+	return {
+		view,
+		context: mounted.context,
+		dispose() {
+			mounted.stop();
+		},
+	};
+}

package/dist/api/shared/build-dependencies.test.ts

@@ -42,7 +42,7 @@ describe("owned build dependency artifacts", () => {
 		);
 
 		expect(artifact.url).toBe(
-			"https://artifacts.example.test/zig-bsdiff/releases/0.1.21/zig-bsdiff-linux-x64.tar.gz",
+			"https://artifacts.example.test/zig-bsdiff/releases/0.1.22/zig-bsdiff-linux-x64.tar.gz",
 		);
 	});
 });

package/dist/api/shared/build-dependencies.ts

@@ -1,12 +1,12 @@
 export const BUILD_DEPENDENCIES_PUBLIC_BASE_URL =
 	"https://electrobun-artifacts.blackboard.sh";
 
-export const ZIG_VERSION = "0.13.0";
+export const ZIG_VERSION = "0.16.0";
 
 export const OWNED_BUILD_DEPENDENCY_VERSIONS = {
-	"zig-bsdiff": "0.1.21",
-	"zig-zstd": "0.1.6",
-	"zig-asar": "0.2.5",
+	"zig-bsdiff": "0.1.22",
+	"zig-zstd": "0.1.7",
+	"zig-asar": "0.2.7",
 	"electrobun-dawn": "0.2.5",
 } as const;
 

package/dist/api/shared/linux-webkit-automation.test.ts

@@ -30,7 +30,7 @@ describe("Linux WebKitGTK automation contract", () => {
 			"automation.private_inspector_server_environment_variable",
 		);
 		expect(launcher).toContain(
-			"env_map.remove(automation.inspector_server_environment_variable)",
+			"env_map.swapRemove(automation.inspector_server_environment_variable)",
 		);
 		expect(launcher).not.toContain("argv = launcher_args");
 	});

package/dist/api/shared/warren/jsx.ts

@@ -0,0 +1,279 @@
+// Warren JSX core — renderer-agnostic.
+//
+// Everything a renderer target shares: lazy elements, child mounting,
+// component invocation, and the control-flow components (Show / For /
+// Switch / Match) with their live-vs-frozen-snapshot semantics. A renderer
+// (GPU retained tree, browser DOM) supplies five primitives and gets the
+// whole component model:
+//
+//   text(value)              create a text leaf at the insertion point
+//   dynamic(build)           reactive region: build re-runs on change
+//   each(items, key, render) keyed list region with row reconciliation
+//   intrinsic(type, props)   create one intrinsic element (tag vocabulary
+//                            is renderer-owned; children arrive in props)
+//   escape(fn)               a bare function child — renderer escape hatch
+//
+// Each package binds a renderer once via createJsxRuntime() and re-exports
+// the result as its jsx-runtime module; JSX.IntrinsicElements typing stays
+// per-package (types only, Solid-style — the runtime never enumerates tags).
+
+import { inert, isLive, memo, type Accessor, type LiveBinding } from "./reactive";
+
+export interface UIElement {
+	readonly __electrobunElement: true;
+	/** Create this element's nodes under the current build parent. */
+	create(): void;
+}
+
+export function isUIElement(value: unknown): value is UIElement {
+	return (
+		typeof value === "object" &&
+		value !== null &&
+		(value as any).__electrobunElement === true
+	);
+}
+
+export type UIChild =
+	| UIElement
+	| string
+	| number
+	| boolean
+	| null
+	| undefined
+	| LiveBinding<string | number>
+	| (() => void)
+	| UIChild[];
+
+export function element(create: () => void): UIElement {
+	return { __electrobunElement: true, create };
+}
+
+export interface WarrenRenderer {
+	text(value: string | number | LiveBinding<string | number>): void;
+	/**
+	 * A claimed live() child. Text-only renderers may bind it as reactive
+	 * text; DOM-style renderers should evaluate inside a region so element
+	 * results ({live(() => open() && <div/>)}) remount on change.
+	 */
+	liveChild(binding: LiveBinding<unknown>): void;
+	dynamic(build: () => void): void;
+	each<T>(
+		items: () => readonly T[],
+		key: (item: T, index: number) => string | number,
+		render: (item: T, index: Accessor<number>) => void,
+	): void;
+	intrinsic(type: string, props: Record<string, unknown>): void;
+	escape(fn: () => unknown): void;
+}
+
+// --- Match markers (structural brand: survives mixed module realms) -------
+
+const MATCH_BRAND = "__warrenMatch";
+
+export interface MatchProps {
+	when: unknown;
+	children?: UIChild;
+}
+
+interface MatchMarker {
+	[MATCH_BRAND]: true;
+	when: unknown;
+	children?: UIChild;
+}
+
+export function Match(props: MatchProps): MatchMarker {
+	return { [MATCH_BRAND]: true, when: props.when, children: props.children };
+}
+
+function isMatch(value: unknown): value is MatchMarker {
+	return (
+		typeof value === "object" &&
+		value !== null &&
+		(value as any)[MATCH_BRAND] === true
+	);
+}
+
+// --- Control-flow prop shapes ---------------------------------------------
+
+export interface ShowProps {
+	when: unknown;
+	fallback?: UIChild;
+	children?: UIChild;
+}
+
+export interface ForProps<T> {
+	each: readonly T[] | LiveBinding<readonly T[]>;
+	/** Row identity for reconciliation; defaults to item identity. */
+	key?: (item: T, index: number) => string | number;
+	fallback?: UIChild;
+	children?: (item: T, index: Accessor<number>) => UIChild;
+}
+
+export interface SwitchProps {
+	fallback?: UIChild;
+	children?: unknown;
+}
+
+type ComponentFn = (props: Record<string, unknown>) => UIElement | UIChild;
+
+export interface WarrenJsxRuntime {
+	jsx(
+		type: string | ComponentFn,
+		props: Record<string, unknown> | null,
+		key?: unknown,
+	): UIElement;
+	jsxs(
+		type: string | ComponentFn,
+		props: Record<string, unknown> | null,
+		key?: unknown,
+	): UIElement;
+	Fragment(props: { children?: UIChild }): UIElement;
+	mountChild(child: UIChild): void;
+	Show(props: ShowProps): UIElement;
+	For<T>(props: ForProps<T>): UIElement;
+	Switch(props: SwitchProps): UIElement;
+	Match: typeof Match;
+}
+
+export function createJsxRuntime(renderer: WarrenRenderer): WarrenJsxRuntime {
+	function mountChild(child: UIChild): void {
+		if (child == null || typeof child === "boolean") return;
+		if (Array.isArray(child)) {
+			for (const c of child) mountChild(c);
+			return;
+		}
+		if (isUIElement(child)) {
+			child.create();
+			return;
+		}
+		if (isLive(child)) {
+			const binding = child as LiveBinding<unknown>;
+			binding.claimed = true;
+			renderer.liveChild(binding);
+			return;
+		}
+		if (typeof child === "function") {
+			renderer.escape(child as () => unknown);
+			return;
+		}
+		renderer.text(String(child));
+	}
+
+	function jsx(
+		type: string | ComponentFn,
+		props: Record<string, unknown> | null,
+		key?: unknown,
+	): UIElement {
+		let resolved = props ?? {};
+		if (typeof type === "function") {
+			// The automatic JSX transform lifts `key` out of props into the
+			// third argument; components (For) receive it back as a prop.
+			if (key !== undefined && resolved["key"] === undefined) {
+				resolved = { ...resolved, key };
+			}
+			// Component bodies are inert (the one-line rule) — including when
+			// the component is created lazily inside a live region's tracked
+			// build. Props were already evaluated at the call site, so region
+			// reactivity on prop expressions is unaffected; statement lives
+			// declared in the body stay deferred instead of running (and
+			// tracking) synchronously into the enclosing region.
+			const result = inert(() => type(resolved));
+			if (isUIElement(result)) return result;
+			// Match markers pass through raw so Switch can collect them.
+			if (isMatch(result)) return result as unknown as UIElement;
+			// Components may return any child shape (fragment arrays, strings...).
+			return element(() => mountChild(result as UIChild));
+		}
+		return element(() => renderer.intrinsic(type, resolved));
+	}
+
+	function Fragment(props: { children?: UIChild }): UIElement {
+		return element(() => mountChild(props.children));
+	}
+
+	// --- Control flow: a live() prop reconciles on change; a plain value is
+	// a snapshot that renders once and never updates. ------------------------
+
+	function Show(props: ShowProps): UIElement {
+		const { when } = props;
+		if (isLive(when)) {
+			when.claimed = true;
+			return element(() => {
+				renderer.dynamic(() => {
+					mountChild(when.fn() ? props.children : props.fallback);
+				});
+			});
+		}
+		return element(() => mountChild(when ? props.children : props.fallback));
+	}
+
+	function For<T>(props: ForProps<T>): UIElement {
+		const render = props.children;
+		if (typeof render !== "function") {
+			throw new Error(
+				"Warren: <For> takes a function child: (item, index) => ...",
+			);
+		}
+		const keyOf =
+			props.key ?? ((item: T) => item as unknown as string | number);
+		const { each } = props;
+		if (isLive(each)) {
+			each.claimed = true;
+			const items = () => (each.fn() ?? []) as readonly T[];
+			return element(() => {
+				// The region depends only on emptiness (equality-cut memo), so
+				// list changes reconcile rows in the keyed each instead of
+				// rebuilding the whole region; only empty<->non-empty flips it.
+				const empty = memo(() => items().length === 0);
+				renderer.dynamic(() => {
+					if (empty()) {
+						mountChild(props.fallback);
+						return;
+					}
+					renderer.each(items, keyOf, (item, index) => {
+						mountChild(render(item, index));
+					});
+				});
+			});
+		}
+		// Snapshot: rendered once, no reconciliation.
+		const list = (each ?? []) as readonly T[];
+		return element(() => {
+			if (list.length === 0) {
+				mountChild(props.fallback);
+				return;
+			}
+			list.forEach((item, i) => mountChild(render(item, () => i)));
+		});
+	}
+
+	function Switch(props: SwitchProps): UIElement {
+		const kids = Array.isArray(props.children)
+			? props.children
+			: [props.children];
+		const matches = kids.filter(isMatch);
+		const anyLive = matches.some((m) => isLive(m.when));
+		for (const m of matches) {
+			if (isLive(m.when)) (m.when as LiveBinding<unknown>).claimed = true;
+		}
+		const pick = (): UIChild | undefined => {
+			for (const m of matches) {
+				const truthy = isLive(m.when)
+					? (m.when as LiveBinding<unknown>).fn()
+					: m.when;
+				if (truthy) return m.children;
+			}
+			return props.fallback;
+		};
+		if (anyLive) {
+			return element(() => {
+				renderer.dynamic(() => {
+					mountChild(pick());
+				});
+			});
+		}
+		return element(() => mountChild(pick()));
+	}
+
+	return { jsx, jsxs: jsx, Fragment, mountChild, Show, For, Switch, Match };
+}