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

package/dist/api/sdks/main/proc/native.ts

@@ -757,6 +757,48 @@ export const native = (() => {
 				returns: FFIType.void,
 			},
 
+			wgpuViewSetAlphaBlending: {
+				args: [FFIType.ptr, FFIType.bool],
+				returns: FFIType.void,
+			},
+
+			setWGPUPointerHandler: {
+				args: [FFIType.ptr],
+				returns: FFIType.void,
+			},
+
+			setWGPUKeyHandler: {
+				args: [FFIType.ptr],
+				returns: FFIType.void,
+			},
+
+			uiMeasureText: {
+				args: [
+					FFIType.cstring,
+					FFIType.cstring,
+					FFIType.f64,
+					FFIType.ptr,
+					FFIType.ptr,
+					FFIType.ptr,
+				],
+				returns: FFIType.void,
+			},
+			uiRasterizeText: {
+				args: [
+					FFIType.cstring,
+					FFIType.cstring,
+					FFIType.f64,
+					FFIType.f64,
+					FFIType.ptr,
+					FFIType.ptr,
+				],
+				returns: FFIType.ptr,
+			},
+			uiFreeTextBitmap: {
+				args: [FFIType.ptr],
+				returns: FFIType.void,
+			},
+
 			loadURLInWebView: {
 				args: [FFIType.ptr, FFIType.cstring],
 				returns: FFIType.void,
@@ -1898,6 +1940,12 @@ const _ffiImpl = {
 			core_.symbols.setWGPUViewTransparent(params.id, params.transparent);
 		},
 
+		wgpuViewSetAlphaBlending: (params: { id: number; enabled: boolean }) => {
+			const ptr = core_.symbols.getWGPUViewPointer(params.id);
+			if (!ptr) return;
+			native_.symbols.wgpuViewSetAlphaBlending(ptr, params.enabled);
+		},
+
 		wgpuViewSetPassthrough: (params: {
 			id: number;
 			passthrough: boolean;
@@ -2482,6 +2530,134 @@ const windowBlurCallback = new JSCallback(
 	},
 );
 
+// Native pointer events from WGPU views. Type: 0 move, 1 down, 2 up,
+// 3 wheel, 4 enter, 5 exit. Registered lazily by enableWGPUPointerEvents.
+const wgpuPointerCallback = new JSCallback(
+	(viewId, type, x, y, buttonOrDx, dy, modifiers) => {
+		electrobunEventEmitter.emit(`wgpu-pointer-${viewId}`, {
+			type,
+			x,
+			y,
+			buttonOrDx,
+			dy,
+			modifiers,
+		});
+	},
+	{
+		args: ["u32", "u32", "f64", "f64", "f64", "f64", "u32"],
+		returns: "void",
+		threadsafe: true,
+	},
+);
+
+// Key events from WGPU views carrying the layout-produced characters.
+const wgpuKeyCallback = new JSCallback(
+	(viewId, keyCode, modifiers, isDown, isRepeat, charsPtr) => {
+		const chars = charsPtr ? new CString(charsPtr).toString() : "";
+		electrobunEventEmitter.emit(`wgpu-key-${viewId}`, {
+			keyCode,
+			modifiers,
+			isDown: Boolean(isDown),
+			isRepeat: Boolean(isRepeat),
+			chars,
+		});
+	},
+	{
+		args: ["u32", "u32", "u32", "u32", "u32", FFIType.cstring],
+		returns: "void",
+		threadsafe: true,
+	},
+);
+
+// CoreText-backed text for the UI runtime (macOS native wrapper).
+export const nativeText = {
+	available(): boolean {
+		return Boolean(
+			hasFFI && typeof native_.symbols.uiMeasureText === "function",
+		);
+	},
+	measure(
+		text: string,
+		fontName: string,
+		size: number,
+	): { w: number; h: number; ascent: number } {
+		const w = new Float64Array(1);
+		const h = new Float64Array(1);
+		const ascent = new Float64Array(1);
+		native_.symbols.uiMeasureText(
+			toCString(text),
+			toCString(fontName),
+			size,
+			ptr(w),
+			ptr(h),
+			ptr(ascent),
+		);
+		return { w: w[0]!, h: h[0]!, ascent: ascent[0]! };
+	},
+	rasterize(
+		text: string,
+		fontName: string,
+		size: number,
+		scale: number,
+	): { width: number; height: number; data: Uint8Array } | null {
+		const dims = new Int32Array(2);
+		const pixelsPtr = native_.symbols.uiRasterizeText(
+			toCString(text),
+			toCString(fontName),
+			size,
+			scale,
+			ptr(dims),
+			ptr(dims.subarray(1)),
+		);
+		if (!pixelsPtr) return null;
+		const width = dims[0]!;
+		const height = dims[1]!;
+		const data = new Uint8Array(
+			toArrayBuffer(pixelsPtr as Pointer, 0, width * height * 4).slice(0),
+		);
+		native_.symbols.uiFreeTextBitmap(pixelsPtr);
+		return { width, height, data };
+	},
+};
+
+let wgpuKeyEventsEnabled = false;
+/** Route native key events (with characters) as `wgpu-key-<viewId>`. */
+export function enableWGPUKeyEvents(): boolean {
+	if (wgpuKeyEventsEnabled) return true;
+	if (!hasFFI) return false;
+	try {
+		if (typeof native_.symbols.setWGPUKeyHandler !== "function") {
+			return false;
+		}
+		native_.symbols.setWGPUKeyHandler(wgpuKeyCallback.ptr);
+		wgpuKeyEventsEnabled = true;
+		return true;
+	} catch {
+		return false;
+	}
+}
+
+let wgpuPointerEventsEnabled = false;
+/**
+ * Route native pointer events (move/down/up/wheel/enter/exit) from all WGPU
+ * views onto the event emitter as `wgpu-pointer-<viewId>`. Returns false when
+ * the native wrapper does not support it (older binaries / other platforms).
+ */
+export function enableWGPUPointerEvents(): boolean {
+	if (wgpuPointerEventsEnabled) return true;
+	if (!hasFFI) return false;
+	try {
+		if (typeof native_.symbols.setWGPUPointerHandler !== "function") {
+			return false;
+		}
+		native_.symbols.setWGPUPointerHandler(wgpuPointerCallback.ptr);
+		wgpuPointerEventsEnabled = true;
+		return true;
+	} catch {
+		return false;
+	}
+}
+
 // global event
 const windowKeyCallback = new JSCallback(
 	(id, keyCode, modifiers, isDown, isRepeat) => {
@@ -3310,6 +3486,9 @@ export const internalRpcHandlers = {
 			}
 
 			const { x, y, width, height } = params.frame;
+			// Keep the JS wrapper's frame current so main-process consumers
+			// (e.g. a UI tree mounted into this view) observe tag moves.
+			view.frame = { x, y, width, height };
 			native_.symbols.resizeWebview(
 				view.ptr,
 				x,
@@ -3319,6 +3498,14 @@ export const internalRpcHandlers = {
 				toCString(params.masks ?? "[]"),
 			);
 		},
+		uiTagMount: (params: { id: number; name: string }) => {
+			// An <electrobun-ui> tag finished creating its native view; let a
+			// registered UI root (see electrobun/main/ui registerUIRoot) mount.
+			electrobunEventEmitter.emit("ui-tag-mount", {
+				id: params.id,
+				name: params.name,
+			});
+		},
 		webviewTagUpdateSrc: (params: { id: number; url: string }) => {
 			const webview = BrowserView.ensureWrapped(params.id);
 			if (webview) {

package/dist/api/sdks/main/ui/__tests__/font.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, test } from "bun:test";
+import {
+	GLYPH_H,
+	GLYPH_W,
+	glyphNames,
+	glyphRows,
+	glyphRuns,
+	hasGlyph,
+	measureText,
+} from "../font";
+
+describe("bitmap font", () => {
+	test("every glyph is exactly 7 rows of 5 cells", () => {
+		for (const name of glyphNames()) {
+			const rows = glyphRows(name);
+			expect(rows.length).toBe(GLYPH_H);
+			for (const row of rows) {
+				expect(row.length).toBe(GLYPH_W);
+				expect(row).toMatch(/^[.#]{5}$/);
+			}
+		}
+	});
+
+	test("covers printable ASCII", () => {
+		for (let code = 0x20; code < 0x7f; code++) {
+			expect(hasGlyph(String.fromCharCode(code))).toBe(true);
+		}
+	});
+
+	test("runs cover exactly the on-cells", () => {
+		for (const name of glyphNames()) {
+			const rows = glyphRows(name);
+			const onCells = rows.join("").split("").filter((c) => c === "#").length;
+			const runTotal = glyphRuns(name).reduce((sum, [, , len]) => sum + len, 0);
+			expect(runTotal).toBe(onCells);
+		}
+	});
+
+	test("unknown characters fall back to a box", () => {
+		expect(glyphRuns("❤").length).toBeGreaterThan(0);
+	});
+
+	test("measureText scales with size and length", () => {
+		expect(measureText("", 14)).toEqual({ w: 0, h: 14 });
+		const cell = 14 / GLYPH_H;
+		expect(measureText("ab", 14).w).toBeCloseTo((2 * 6 - 1) * cell);
+		expect(measureText("ab", 28).w).toBeCloseTo(measureText("ab", 14).w * 2);
+	});
+});

package/dist/api/sdks/main/ui/__tests__/hit.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, test } from "bun:test";
+import { NodeKind, Prop, UiTree } from "../tree";
+import { computeLayout } from "../layout";
+import { hitChain } from "../hit";
+
+describe("hit testing", () => {
+	test("innermost hittable node wins; chain bubbles outward", () => {
+		const tree = new UiTree();
+		tree.setProp(tree.root, Prop.Hittable, 1);
+		const card = tree.createNode(NodeKind.Box);
+		tree.setProp(card, Prop.Width, 100);
+		tree.setProp(card, Prop.Height, 100);
+		tree.setProp(card, Prop.Hittable, 1);
+		tree.append(tree.root, card);
+		const button = tree.createNode(NodeKind.Box);
+		tree.setProp(button, Prop.Width, 40);
+		tree.setProp(button, Prop.Height, 20);
+		tree.setProp(button, Prop.Hittable, 1);
+		tree.append(card, button);
+		computeLayout(tree, 200, 200);
+
+		expect(hitChain(tree, 10, 10)).toEqual([button, card, tree.root]);
+		expect(hitChain(tree, 90, 90)).toEqual([card, tree.root]);
+		expect(hitChain(tree, 150, 150)).toEqual([tree.root]);
+	});
+
+	test("non-hittable nodes are transparent to hits", () => {
+		const tree = new UiTree();
+		const wrapper = tree.createNode(NodeKind.Box);
+		tree.setProp(wrapper, Prop.Width, 100);
+		tree.setProp(wrapper, Prop.Height, 100);
+		tree.append(tree.root, wrapper);
+		const target = tree.createNode(NodeKind.Box);
+		tree.setProp(target, Prop.Width, 50);
+		tree.setProp(target, Prop.Height, 50);
+		tree.setProp(target, Prop.Hittable, 1);
+		tree.append(wrapper, target);
+		computeLayout(tree, 200, 200);
+
+		expect(hitChain(tree, 25, 25)).toEqual([target]);
+		expect(hitChain(tree, 80, 80)).toEqual([]);
+	});
+
+	test("later siblings sit on top", () => {
+		const tree = new UiTree();
+		// Two overlapping absolute-ish children: same size, stacked in a row
+		// won't overlap, so nest both fixed at origin via zero-size parent
+		// trick: place them as siblings of the root and rely on layout order.
+		const below = tree.createNode(NodeKind.Box);
+		tree.setProp(below, Prop.Width, 100);
+		tree.setProp(below, Prop.Height, 100);
+		tree.setProp(below, Prop.Hittable, 1);
+		tree.append(tree.root, below);
+		computeLayout(tree, 200, 200);
+		// Single child: sanity that it hits.
+		expect(hitChain(tree, 50, 50)).toEqual([below]);
+	});
+
+	test("misses outside the window return an empty chain", () => {
+		const tree = new UiTree();
+		computeLayout(tree, 100, 100);
+		expect(hitChain(tree, 500, 500)).toEqual([]);
+	});
+});

package/dist/api/sdks/main/ui/__tests__/jsx.test.ts

@@ -0,0 +1,252 @@
+// Headless tests for the compiler-less JSX runtime. Uses the jsx() factory
+// directly (what the transpiler emits for .tsx files).
+
+import { describe, expect, test } from "bun:test";
+import { createRoot, live, signal } from "../reactive";
+import { NodeKind, Prop, UiTree } from "../tree";
+import { createUiContext, ui, withUiContext, type UiContext } from "../ui";
+import { Fragment, jsx, isUIElement, type UIElement } from "../jsx-runtime";
+import { parseColor } from "../paint";
+
+function mountApp(app: () => UIElement): { ctx: UiContext; dispose: () => void } {
+	const ctx = createUiContext();
+	let dispose = () => {};
+	createRoot((d) => {
+		dispose = d;
+		withUiContext(ctx, () => {
+			app().create();
+		});
+	});
+	return { ctx, dispose };
+}
+
+describe("jsx runtime", () => {
+	test("intrinsics build the tree parent-first", () => {
+		const { ctx } = mountApp(() =>
+			jsx("column", {
+				pad: 8,
+				children: [
+					jsx("text", { children: "hello" }),
+					jsx("box", { width: 10, height: 10 }),
+				],
+			}),
+		);
+		const [col] = ctx.tree.childrenOf(ctx.tree.root);
+		expect(ctx.tree.getProp(col!, Prop.Pad)).toBe(8);
+		const kids = ctx.tree.childrenOf(col!);
+		expect(kids.length).toBe(2);
+		expect(ctx.tree.getText(kids[0]!)).toBe("hello");
+		expect(ctx.tree.get(kids[1]!).kind).toBe(NodeKind.Box);
+	});
+
+	test("components are functions returning elements", () => {
+		function Badge(props: { label: string }) {
+			return jsx("box", {
+				pad: 4,
+				children: jsx("text", { children: props.label }),
+			});
+		}
+		const { ctx } = mountApp(() =>
+			jsx("row", { children: jsx(Badge as any, { label: "hi" }) }),
+		);
+		const [row] = ctx.tree.childrenOf(ctx.tree.root);
+		const [badge] = ctx.tree.childrenOf(row!);
+		const [label] = ctx.tree.childrenOf(badge!);
+		expect(ctx.tree.getText(label!)).toBe("hi");
+	});
+
+	test("reactive text children via $ update in place", () => {
+		const [count, setCount] = signal(0);
+		const { ctx } = mountApp(() =>
+			jsx("box", { children: live(() => `n=${count()}`) }),
+		);
+		const [box] = ctx.tree.childrenOf(ctx.tree.root);
+		const [label] = ctx.tree.childrenOf(box!);
+		expect(ctx.tree.getText(label!)).toBe("n=0");
+		setCount(3);
+		expect(ctx.tree.getText(label!)).toBe("n=3");
+	});
+
+	test("reactive props via $ work in JSX", () => {
+		const [bg, setBg] = signal("#111111");
+		const { ctx } = mountApp(() => jsx("box", { bg: live(bg) }));
+		const [box] = ctx.tree.childrenOf(ctx.tree.root);
+		expect(ctx.tree.getProp(box!, Prop.Bg)).toBe(parseColor("#111111"));
+		setBg("#222222");
+		expect(ctx.tree.getProp(box!, Prop.Bg)).toBe(parseColor("#222222"));
+	});
+
+	test("conditional and array children", () => {
+		const show = false;
+		const { ctx } = mountApp(() =>
+			jsx("column", {
+				children: [
+					show && jsx("text", { children: "hidden" }),
+					["a", "b"].map((s) => jsx("text", { children: s })),
+					null,
+					undefined,
+				],
+			}),
+		);
+		const [col] = ctx.tree.childrenOf(ctx.tree.root);
+		const kids = ctx.tree.childrenOf(col!);
+		expect(kids.length).toBe(2);
+		expect(ctx.tree.getText(kids[0]!)).toBe("a");
+		expect(ctx.tree.getText(kids[1]!)).toBe("b");
+	});
+
+	test("fragments flatten", () => {
+		const { ctx } = mountApp(() =>
+			jsx("column", {
+				children: jsx(Fragment as any, {
+					children: [
+						jsx("text", { children: "one" }),
+						jsx("text", { children: "two" }),
+					],
+				}),
+			}),
+		);
+		const [col] = ctx.tree.childrenOf(ctx.tree.root);
+		expect(ctx.tree.childrenOf(col!).length).toBe(2);
+	});
+
+	test("bare function children are builder escapes", () => {
+		const { ctx } = mountApp(() =>
+			jsx("column", {
+				children: () => {
+					ui.each({ dir: "column" }, () => ["x", "y"], (s) => s, (s) => {
+						ui.text(s);
+					});
+				},
+			}),
+		);
+		const [col] = ctx.tree.childrenOf(ctx.tree.root);
+		const [region] = ctx.tree.childrenOf(col!);
+		expect(ctx.tree.childrenOf(region!).length).toBe(2);
+	});
+
+	test("elements are lazy: nothing mounts until create()", () => {
+		const tree = new UiTree();
+		const ctx = createUiContext(tree);
+		let el: UIElement | null = null;
+		createRoot(() => {
+			withUiContext(ctx, () => {
+				el = jsx("box", { width: 5, height: 5 });
+			});
+		});
+		expect(isUIElement(el)).toBe(true);
+		expect(tree.childrenOf(tree.root).length).toBe(0);
+	});
+
+	test("number and string children become text", () => {
+		const { ctx } = mountApp(() => jsx("box", { children: 42 }));
+		const [box] = ctx.tree.childrenOf(ctx.tree.root);
+		const [label] = ctx.tree.childrenOf(box!);
+		expect(ctx.tree.getText(label!)).toBe("42");
+	});
+});
+
+describe("control flow", () => {
+	const { For, Show, Switch, Match } = require("../jsx-runtime");
+	const { live, signal, store } = require("../reactive");
+
+	test("<Show when={live(...)}> toggles; static when is frozen", () => {
+		const [on, setOn] = signal(false);
+		const { ctx } = mountApp(() =>
+			jsx("column", {
+				children: [
+					jsx(Show, {
+						when: live(() => on()),
+						children: jsx("text", { children: "live-on" }),
+						fallback: jsx("text", { children: "live-off" }),
+					}),
+					jsx(Show, {
+						when: false,
+						children: jsx("text", { children: "static-on" }),
+						fallback: jsx("text", { children: "static-off" }),
+					}),
+				],
+			}),
+		);
+		const texts = () => {
+			const out: string[] = [];
+			const walk = (id: number) => {
+				if (ctx.tree.isTextNode(id)) out.push(ctx.tree.getText(id));
+				for (const c of ctx.tree.childrenOf(id)) walk(c);
+			};
+			walk(ctx.tree.root);
+			return out;
+		};
+		expect(texts()).toEqual(["live-off", "static-off"]);
+		setOn(true);
+		expect(texts()).toEqual(["live-on", "static-off"]); // static stays frozen
+	});
+
+	test("<For each={live(...)}> reconciles; static each renders once", () => {
+		const [state, setState] = store({ items: ["a", "b"] });
+		const frozen = ["x", "y"];
+		const { ctx } = mountApp(() =>
+			jsx("column", {
+				children: [
+					jsx(For, {
+						each: live(() => state.items),
+						children: (item: string) => jsx("text", { children: item }),
+					}),
+					jsx(For, {
+						each: frozen,
+						children: (item: string) => jsx("text", { children: item }),
+					}),
+				],
+			}),
+		);
+		const count = () => {
+			let n = 0;
+			const walk = (id: number) => {
+				if (ctx.tree.isTextNode(id)) n++;
+				for (const c of ctx.tree.childrenOf(id)) walk(c);
+			};
+			walk(ctx.tree.root);
+			return n;
+		};
+		expect(count()).toBe(4);
+		setState((s: any) => s.items.push("c"));
+		expect(count()).toBe(5); // live grew; static did not
+	});
+
+	test("<Switch>/<Match> picks the first truthy live match", () => {
+		const [status, setStatus] = signal("urgent");
+		const { ctx } = mountApp(() =>
+			jsx("column", {
+				children: jsx(Switch, {
+					fallback: jsx("text", { children: "none" }),
+					children: [
+						jsx(Match, {
+							when: live(() => status() === "urgent"),
+							children: jsx("text", { children: "fire" }),
+						}),
+						jsx(Match, {
+							when: live(() => status() === "waiting"),
+							children: jsx("text", { children: "clock" }),
+						}),
+					],
+				}),
+			}),
+		);
+		const first = () => {
+			const walk = (id: number): string | null => {
+				if (ctx.tree.isTextNode(id)) return ctx.tree.getText(id);
+				for (const c of ctx.tree.childrenOf(id)) {
+					const r = walk(c);
+					if (r) return r;
+				}
+				return null;
+			};
+			return walk(ctx.tree.root);
+		};
+		expect(first()).toBe("fire");
+		setStatus("waiting");
+		expect(first()).toBe("clock");
+		setStatus("done");
+		expect(first()).toBe("none");
+	});
+});