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

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

@@ -0,0 +1,168 @@
+// Embedded 5x7 bitmap font. Each glyph is 7 rows of 5 cells ('#' = on).
+// Advance is 6 cells (5 + 1 spacing). Deliberately tiny: typography for the
+// prototype only — shaping, system fonts, and accessibility come later.
+
+export const GLYPH_W = 5;
+export const GLYPH_H = 7;
+export const GLYPH_ADVANCE = 6;
+
+type GlyphRows = [string, string, string, string, string, string, string];
+
+const G: Record<string, GlyphRows> = {
+	" ": [".....", ".....", ".....", ".....", ".....", ".....", "....."],
+	"!": ["..#..", "..#..", "..#..", "..#..", "..#..", ".....", "..#.."],
+	'"': [".#.#.", ".#.#.", ".....", ".....", ".....", ".....", "....."],
+	"#": [".#.#.", "#####", ".#.#.", ".#.#.", "#####", ".#.#.", "....."],
+	$: ["..#..", ".####", "#....", ".###.", "....#", "####.", "..#.."],
+	"%": ["##..#", "##..#", "...#.", "..#..", ".#...", "#..##", "#..##"],
+	"&": [".##..", "#..#.", "#.#..", ".#...", "#.#.#", "#..#.", ".##.#"],
+	"'": ["..#..", "..#..", ".....", ".....", ".....", ".....", "....."],
+	"(": ["...#.", "..#..", ".#...", ".#...", ".#...", "..#..", "...#."],
+	")": [".#...", "..#..", "...#.", "...#.", "...#.", "..#..", ".#..."],
+	"*": [".....", "..#..", "#.#.#", ".###.", "#.#.#", "..#..", "....."],
+	"+": [".....", "..#..", "..#..", "#####", "..#..", "..#..", "....."],
+	",": [".....", ".....", ".....", ".....", ".....", "..#..", ".#..."],
+	"-": [".....", ".....", ".....", "#####", ".....", ".....", "....."],
+	".": [".....", ".....", ".....", ".....", ".....", ".##..", ".##.."],
+	"/": ["....#", "....#", "...#.", "..#..", ".#...", "#....", "#...."],
+	"0": [".###.", "#...#", "#..##", "#.#.#", "##..#", "#...#", ".###."],
+	"1": ["..#..", ".##..", "..#..", "..#..", "..#..", "..#..", ".###."],
+	"2": [".###.", "#...#", "....#", "...#.", "..#..", ".#...", "#####"],
+	"3": [".###.", "#...#", "....#", "..##.", "....#", "#...#", ".###."],
+	"4": ["...#.", "..##.", ".#.#.", "#..#.", "#####", "...#.", "...#."],
+	"5": ["#####", "#....", "####.", "....#", "....#", "#...#", ".###."],
+	"6": [".###.", "#....", "#....", "####.", "#...#", "#...#", ".###."],
+	"7": ["#####", "....#", "...#.", "..#..", ".#...", ".#...", ".#..."],
+	"8": [".###.", "#...#", "#...#", ".###.", "#...#", "#...#", ".###."],
+	"9": [".###.", "#...#", "#...#", ".####", "....#", "....#", ".###."],
+	":": [".....", ".##..", ".##..", ".....", ".##..", ".##..", "....."],
+	";": [".....", ".##..", ".##..", ".....", ".##..", "..#..", ".#..."],
+	"<": ["...#.", "..#..", ".#...", "#....", ".#...", "..#..", "...#."],
+	"=": [".....", ".....", "#####", ".....", "#####", ".....", "....."],
+	">": [".#...", "..#..", "...#.", "....#", "...#.", "..#..", ".#..."],
+	"?": [".###.", "#...#", "....#", "...#.", "..#..", ".....", "..#.."],
+	"@": [".###.", "#...#", "#.###", "#.#.#", "#.###", "#....", ".###."],
+	A: [".###.", "#...#", "#...#", "#####", "#...#", "#...#", "#...#"],
+	B: ["####.", "#...#", "#...#", "####.", "#...#", "#...#", "####."],
+	C: [".###.", "#...#", "#....", "#....", "#....", "#...#", ".###."],
+	D: ["####.", "#...#", "#...#", "#...#", "#...#", "#...#", "####."],
+	E: ["#####", "#....", "#....", "####.", "#....", "#....", "#####"],
+	F: ["#####", "#....", "#....", "####.", "#....", "#....", "#...."],
+	G: [".###.", "#...#", "#....", "#.###", "#...#", "#...#", ".###."],
+	H: ["#...#", "#...#", "#...#", "#####", "#...#", "#...#", "#...#"],
+	I: [".###.", "..#..", "..#..", "..#..", "..#..", "..#..", ".###."],
+	J: ["..###", "...#.", "...#.", "...#.", "...#.", "#..#.", ".##.."],
+	K: ["#...#", "#..#.", "#.#..", "##...", "#.#..", "#..#.", "#...#"],
+	L: ["#....", "#....", "#....", "#....", "#....", "#....", "#####"],
+	M: ["#...#", "##.##", "#.#.#", "#.#.#", "#...#", "#...#", "#...#"],
+	N: ["#...#", "##..#", "#.#.#", "#..##", "#...#", "#...#", "#...#"],
+	O: [".###.", "#...#", "#...#", "#...#", "#...#", "#...#", ".###."],
+	P: ["####.", "#...#", "#...#", "####.", "#....", "#....", "#...."],
+	Q: [".###.", "#...#", "#...#", "#...#", "#.#.#", "#..#.", ".##.#"],
+	R: ["####.", "#...#", "#...#", "####.", "#.#..", "#..#.", "#...#"],
+	S: [".####", "#....", "#....", ".###.", "....#", "....#", "####."],
+	T: ["#####", "..#..", "..#..", "..#..", "..#..", "..#..", "..#.."],
+	U: ["#...#", "#...#", "#...#", "#...#", "#...#", "#...#", ".###."],
+	V: ["#...#", "#...#", "#...#", "#...#", "#...#", ".#.#.", "..#.."],
+	W: ["#...#", "#...#", "#...#", "#.#.#", "#.#.#", "##.##", "#...#"],
+	X: ["#...#", "#...#", ".#.#.", "..#..", ".#.#.", "#...#", "#...#"],
+	Y: ["#...#", "#...#", ".#.#.", "..#..", "..#..", "..#..", "..#.."],
+	Z: ["#####", "....#", "...#.", "..#..", ".#...", "#....", "#####"],
+	"[": [".###.", ".#...", ".#...", ".#...", ".#...", ".#...", ".###."],
+	"\\": ["#....", "#....", ".#...", "..#..", "...#.", "....#", "....#"],
+	"]": [".###.", "...#.", "...#.", "...#.", "...#.", "...#.", ".###."],
+	"^": ["..#..", ".#.#.", "#...#", ".....", ".....", ".....", "....."],
+	_: [".....", ".....", ".....", ".....", ".....", ".....", "#####"],
+	"`": [".#...", "..#..", ".....", ".....", ".....", ".....", "....."],
+	a: [".....", ".....", ".###.", "....#", ".####", "#...#", ".####"],
+	b: ["#....", "#....", "####.", "#...#", "#...#", "#...#", "####."],
+	c: [".....", ".....", ".###.", "#....", "#....", "#...#", ".###."],
+	d: ["....#", "....#", ".####", "#...#", "#...#", "#...#", ".####"],
+	e: [".....", ".....", ".###.", "#...#", "#####", "#....", ".###."],
+	f: ["..##.", ".#...", "####.", ".#...", ".#...", ".#...", ".#..."],
+	g: [".....", ".####", "#...#", "#...#", ".####", "....#", ".###."],
+	h: ["#....", "#....", "####.", "#...#", "#...#", "#...#", "#...#"],
+	i: ["..#..", ".....", ".##..", "..#..", "..#..", "..#..", ".###."],
+	j: ["...#.", ".....", "..##.", "...#.", "...#.", "#..#.", ".##.."],
+	k: ["#....", "#....", "#..#.", "#.#..", "##...", "#.#..", "#..#."],
+	l: [".##..", "..#..", "..#..", "..#..", "..#..", "..#..", ".###."],
+	m: [".....", ".....", "##.#.", "#.#.#", "#.#.#", "#.#.#", "#.#.#"],
+	n: [".....", ".....", "####.", "#...#", "#...#", "#...#", "#...#"],
+	o: [".....", ".....", ".###.", "#...#", "#...#", "#...#", ".###."],
+	p: [".....", "####.", "#...#", "#...#", "####.", "#....", "#...."],
+	q: [".....", ".####", "#...#", "#...#", ".####", "....#", "....#"],
+	r: [".....", ".....", "#.##.", "##...", "#....", "#....", "#...."],
+	s: [".....", ".....", ".####", "#....", ".###.", "....#", "####."],
+	t: [".#...", ".#...", "####.", ".#...", ".#...", ".#..#", "..##."],
+	u: [".....", ".....", "#...#", "#...#", "#...#", "#...#", ".####"],
+	v: [".....", ".....", "#...#", "#...#", "#...#", ".#.#.", "..#.."],
+	w: [".....", ".....", "#...#", "#.#.#", "#.#.#", "#.#.#", ".#.#."],
+	x: [".....", ".....", "#...#", ".#.#.", "..#..", ".#.#.", "#...#"],
+	y: [".....", "#...#", "#...#", "#...#", ".####", "....#", ".###."],
+	z: [".....", ".....", "#####", "...#.", "..#..", ".#...", "#####"],
+	"{": ["...##", "..#..", "..#..", ".#...", "..#..", "..#..", "...##"],
+	"|": ["..#..", "..#..", "..#..", "..#..", "..#..", "..#..", "..#.."],
+	"}": ["##...", "..#..", "..#..", "...#.", "..#..", "..#..", "##..."],
+	"~": [".....", ".....", ".#...", "#.#.#", "...#.", ".....", "....."],
+};
+
+const FALLBACK: GlyphRows = [
+	"#####",
+	"#...#",
+	"#...#",
+	"#...#",
+	"#...#",
+	"#...#",
+	"#####",
+];
+
+export function glyphRows(char: string): GlyphRows {
+	return G[char] ?? FALLBACK;
+}
+
+export function hasGlyph(char: string): boolean {
+	return char in G;
+}
+
+export function glyphNames(): string[] {
+	return Object.keys(G);
+}
+
+/** Horizontal runs of on-cells per glyph: [row, startCol, length][]. */
+export function glyphRuns(char: string): Array<[number, number, number]> {
+	const cached = runCache.get(char);
+	if (cached) return cached;
+	const rows = glyphRows(char);
+	const runs: Array<[number, number, number]> = [];
+	for (let row = 0; row < GLYPH_H; row++) {
+		const line = rows[row]!;
+		let col = 0;
+		while (col < GLYPH_W) {
+			if (line[col] === "#") {
+				let len = 1;
+				while (col + len < GLYPH_W && line[col + len] === "#") len++;
+				runs.push([row, col, len]);
+				col += len;
+			} else {
+				col++;
+			}
+		}
+	}
+	runCache.set(char, runs);
+	return runs;
+}
+
+const runCache = new Map<string, Array<[number, number, number]>>();
+
+/** Size of a single-line string at `size` px glyph height. */
+export function measureText(
+	text: string,
+	size: number,
+): { w: number; h: number } {
+	if (text.length === 0) return { w: 0, h: size };
+	const cell = size / GLYPH_H;
+	return {
+		w: (text.length * GLYPH_ADVANCE - 1) * cell,
+		h: size,
+	};
+}

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

@@ -0,0 +1,46 @@
+// Hit testing over the laid-out tree. Later siblings render on top, so the
+// deepest match in the last matching branch wins. Pure — testable without a
+// GPU or window.
+
+import { Prop, type UiTree } from "./tree";
+
+function contains(tree: UiTree, id: number, x: number, y: number): boolean {
+	const node = tree.get(id);
+	return x >= node.x && y >= node.y && x < node.x + node.w && y < node.y + node.h;
+}
+
+/** Deepest node containing the point, regardless of hittability. */
+function deepestAt(tree: UiTree, id: number, x: number, y: number): number {
+	if (!contains(tree, id, x, y)) return 0;
+	const children = tree.childrenOf(id);
+	for (let i = children.length - 1; i >= 0; i--) {
+		const hit = deepestAt(tree, children[i]!, x, y);
+		if (hit !== 0) return hit;
+	}
+	return id;
+}
+
+/**
+ * Hittable nodes under the point, innermost first — the dispatch chain for
+ * bubbling. Empty when nothing hittable is under the point.
+ */
+export function hitChain(tree: UiTree, x: number, y: number): number[] {
+	const deepest = deepestAt(tree, tree.root, x, y);
+	const chain: number[] = [];
+	for (let id = deepest; id !== 0; id = tree.parentOf(id)) {
+		if (tree.getProp(id, Prop.Hittable) === 1) chain.push(id);
+	}
+	return chain;
+}
+
+/** Innermost scroll container (Overflow=1) under the point, or 0. */
+export function scrollTargetAt(tree: UiTree, x: number, y: number): number {
+	for (
+		let id = deepestAt(tree, tree.root, x, y);
+		id !== 0;
+		id = tree.parentOf(id)
+	) {
+		if (tree.getProp(id, Prop.Overflow) === 1) return id;
+	}
+	return 0;
+}

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

@@ -0,0 +1,71 @@
+// Public surface of the prototype UI runtime.
+
+export {
+	batch,
+	cleanup,
+	createRoot,
+	inert,
+	isLive,
+	live,
+	memo,
+	setDevMode,
+	signal,
+	store,
+	type Accessor,
+	type LiveBinding,
+	type Reactive,
+	type Setter,
+	type StoreSetter,
+} from "./reactive";
+export { AUTO, NodeKind, Prop, UiTree } from "./tree";
+export { Align, Justify, computeLayout } from "./layout";
+export { FLOATS_PER_INSTANCE, paint, parseColor } from "./paint";
+export { hitChain } from "./hit";
+export { measureText } from "./font";
+export {
+	createUiContext,
+	getUiContext,
+	onKey,
+	read,
+	ui,
+	withUiContext,
+	type AnchorRect,
+	type BoxProps,
+	type KeyEventInfo,
+	type PointerEventInfo,
+	type TextProps,
+	type UiContext,
+} from "./ui";
+export {
+	webview,
+	wgpuSurface,
+	type WebviewElementProps,
+	type WgpuSurfaceProps,
+} from "./elements";
+export { applyEditKey, charForKey, Key, Mod } from "./keymap";
+export { textInput, type TextInputProps } from "./textInput";
+export {
+	createUIView,
+	createUIWindow,
+	type UIView,
+	type UIWindow,
+	type UIWindowOptions,
+} from "./uiwindow";
+export { registerUIRoot, type UIRootRegistration } from "./uiTagHost";
+export {
+	For,
+	Fragment,
+	Match,
+	Show,
+	Switch,
+	isUIElement,
+	jsx,
+	jsxs,
+	mountChild,
+	type ForProps,
+	type MatchProps,
+	type ShowProps,
+	type SwitchProps,
+	type UIChild,
+	type UIElement,
+} from "./jsx-runtime";

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

@@ -0,0 +1,268 @@
+// Input for the UI runtime. Preferred path: native pointer events from the
+// render target's WGPUView (move/down/up/wheel/enter/exit with view-local,
+// top-left coordinates) — no polling, no focus gating, wheel scrolling.
+// Fallback path (older native binaries / platforms without the handler):
+// poll the cursor and global button bitmask as before.
+//
+// Keyboard arrives via native window key events in both paths.
+
+import { enableWGPUKeyEvents, enableWGPUPointerEvents, ffi, Screen } from "../proc/native";
+import electrobunEventEmitter from "../events/eventEmitter";
+import type { KeyEventInfo } from "./ui";
+
+export interface InputSink {
+	/** Hittable chain under the point, innermost first. */
+	hitChain(x: number, y: number): number[];
+	dispatchPointer(
+		type: "click" | "down" | "up" | "enter" | "leave",
+		target: number,
+		x: number,
+		y: number,
+	): void;
+	dispatchWheel(x: number, y: number, dx: number, dy: number): void;
+	dispatchKey(e: KeyEventInfo): void;
+	/** True when pressing this node should drag the host window. */
+	isDragHandle(id: number): boolean;
+}
+
+export interface InputDriver {
+	poll(): void;
+	dispose(): void;
+}
+
+interface DragState {
+	startX: number;
+	startY: number;
+	frameX: number;
+	frameY: number;
+	targetId: number;
+	moved: boolean;
+}
+
+export function attachInput(
+	windowId: number,
+	viewId: number,
+	viewOffset: () => { x: number; y: number },
+	sink: InputSink,
+): InputDriver {
+	let hoverId = 0;
+	let downId = 0;
+	let drag: DragState | null = null;
+
+	const syncHover = (x: number, y: number): number => {
+		const top = sink.hitChain(x, y)[0] ?? 0;
+		if (top !== hoverId) {
+			if (hoverId !== 0) sink.dispatchPointer("leave", hoverId, x, y);
+			if (top !== 0) sink.dispatchPointer("enter", top, x, y);
+			hoverId = top;
+		}
+		return top;
+	};
+
+	const clearHover = () => {
+		if (hoverId !== 0) {
+			sink.dispatchPointer("leave", hoverId, -1, -1);
+			hoverId = 0;
+		}
+	};
+
+	const beginDragIfHandle = (top: number) => {
+		if (top !== 0 && sink.isDragHandle(top)) {
+			const point = Screen.getCursorScreenPoint();
+			const frame = ffi.request.getWindowFrame({ winId: windowId });
+			drag = {
+				startX: point.x,
+				startY: point.y,
+				frameX: frame.x,
+				frameY: frame.y,
+				targetId: top,
+				moved: false,
+			};
+		}
+	};
+
+	const dragMove = () => {
+		if (!drag) return;
+		const point = Screen.getCursorScreenPoint();
+		const dx = point.x - drag.startX;
+		const dy = point.y - drag.startY;
+		if (Math.abs(dx) + Math.abs(dy) > 3) drag.moved = true;
+		if (drag.moved) {
+			ffi.request.setWindowPosition({
+				winId: windowId,
+				x: drag.frameX + dx,
+				y: drag.frameY + dy,
+			});
+		}
+	};
+
+	const endPress = (top: number, x: number, y: number) => {
+		if (drag) {
+			sink.dispatchPointer("up", drag.targetId, x, y);
+			if (!drag.moved) sink.dispatchPointer("click", drag.targetId, x, y);
+			drag = null;
+			downId = 0;
+			return;
+		}
+		if (top !== 0) sink.dispatchPointer("up", top, x, y);
+		if (downId !== 0 && downId !== top) {
+			// Released outside the pressed node: let it reset state.
+			sink.dispatchPointer("up", downId, x, y);
+		}
+		if (downId !== 0 && downId === top) {
+			sink.dispatchPointer("click", top, x, y);
+		}
+		downId = 0;
+	};
+
+	// ---- Keyboard (both paths) ----
+
+	// Prefer view-level key events (they carry the layout's characters);
+	// fall back to window key events otherwise.
+	const hasNativeKeys = enableWGPUKeyEvents();
+	const onViewKey = (e: any) => {
+		if (!e?.isDown) return;
+		sink.dispatchKey({
+			keyCode: e.keyCode ?? 0,
+			modifiers: e.modifiers ?? 0,
+			isRepeat: Boolean(e.isRepeat),
+			chars: typeof e.chars === "string" ? e.chars : undefined,
+		});
+	};
+	const onKeyDown = (event: any) => {
+		const data = event?.data ?? {};
+		sink.dispatchKey({
+			keyCode: data.keyCode ?? 0,
+			modifiers: data.modifiers ?? 0,
+			isRepeat: Boolean(data.isRepeat),
+		});
+	};
+	if (hasNativeKeys) {
+		electrobunEventEmitter.on(`wgpu-key-${viewId}`, onViewKey);
+	} else {
+		electrobunEventEmitter.on(`keyDown-${windowId}`, onKeyDown);
+	}
+	const disposeKeys = () => {
+		if (hasNativeKeys) {
+			electrobunEventEmitter.off(`wgpu-key-${viewId}`, onViewKey);
+		} else {
+			electrobunEventEmitter.off(`keyDown-${windowId}`, onKeyDown);
+		}
+	};
+
+	// ---- Native pointer events path ----
+
+	if (enableWGPUPointerEvents()) {
+		const onPointer = (e: {
+			type: number;
+			x: number;
+			y: number;
+			buttonOrDx: number;
+			dy: number;
+		}) => {
+			const { x, y } = e;
+			switch (e.type) {
+				case 0: {
+					// move / drag-move
+					if (drag) {
+						dragMove();
+						return;
+					}
+					syncHover(x, y);
+					break;
+				}
+				case 1: {
+					// down (left button only participates in UI presses)
+					if (e.buttonOrDx !== 0) return;
+					const top = syncHover(x, y);
+					downId = top;
+					sink.dispatchPointer("down", top, x, y);
+					beginDragIfHandle(top);
+					break;
+				}
+				case 2: {
+					if (e.buttonOrDx !== 0) return;
+					const top = drag ? drag.targetId : syncHover(x, y);
+					endPress(top, x, y);
+					break;
+				}
+				case 3: {
+					sink.dispatchWheel(x, y, e.buttonOrDx, e.dy);
+					break;
+				}
+				case 5: {
+					clearHover();
+					break;
+				}
+			}
+		};
+		electrobunEventEmitter.on(`wgpu-pointer-${viewId}`, onPointer);
+
+		return {
+			poll() {
+				// Event-driven: nothing to poll.
+			},
+			dispose() {
+				electrobunEventEmitter.off(`wgpu-pointer-${viewId}`, onPointer);
+				disposeKeys();
+			},
+		};
+	}
+
+	// ---- Polling fallback ----
+
+	let focused = true;
+	let wasDown = false;
+
+	const onFocus = () => {
+		focused = true;
+	};
+	const onBlur = () => {
+		focused = false;
+		clearHover();
+		wasDown = false;
+		downId = 0;
+	};
+	electrobunEventEmitter.on(`focus-${windowId}`, onFocus);
+	electrobunEventEmitter.on(`blur-${windowId}`, onBlur);
+
+	return {
+		poll() {
+			const frame = ffi.request.getWindowFrame({ winId: windowId });
+			const offset = viewOffset();
+			const point = Screen.getCursorScreenPoint();
+			const x = point.x - frame.x - offset.x;
+			const y = point.y - frame.y - offset.y;
+
+			if (drag) {
+				const stillDown =
+					focused && (Number(Screen.getMouseButtons()) & 1) === 1;
+				if (stillDown) dragMove();
+				else endPress(drag.targetId, x, y);
+				wasDown = stillDown;
+				return;
+			}
+
+			const top = syncHover(x, y);
+
+			// Gate button state on focus so clicks on other apps or windows
+			// stacked above ours don't register.
+			const isDown =
+				focused && (Number(Screen.getMouseButtons()) & 1) === 1;
+			if (isDown && !wasDown) {
+				downId = top;
+				// Dispatched even for target 0: a background press blurs focus.
+				sink.dispatchPointer("down", top, x, y);
+				beginDragIfHandle(top);
+			} else if (!isDown && wasDown) {
+				endPress(top, x, y);
+			}
+			wasDown = isDown;
+		},
+		dispose() {
+			electrobunEventEmitter.off(`focus-${windowId}`, onFocus);
+			electrobunEventEmitter.off(`blur-${windowId}`, onBlur);
+			disposeKeys();
+		},
+	};
+}

package/dist/api/sdks/main/ui/jsx-dev-runtime.ts

@@ -0,0 +1,16 @@
+// Dev-transform entrypoint: same runtime, jsxDEV signature.
+import { Fragment, jsx, type UIElement } from "./jsx-runtime";
+
+export { Fragment };
+export type { JSX, UIChild, UIElement } from "./jsx-runtime";
+
+export function jsxDEV(
+	type: Parameters<typeof jsx>[0],
+	props: Parameters<typeof jsx>[1],
+	key?: unknown,
+	_isStaticChildren?: boolean,
+	_source?: unknown,
+	_self?: unknown,
+): UIElement {
+	return jsx(type, props, key);
+}