electrobun 1.18.4-beta.19 → 1.18.4-beta.21

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

@@ -0,0 +1,136 @@
+// JSX runtime for Warren's GPU renderer — no compiler beyond the
+// TypeScript/Bun transpiler that Cottontail already ships. Point tsconfig
+// at it:
+//
+//   { "jsx": "react-jsx", "jsxImportSource": "electrobun/main/ui" }
+//
+// Semantics mirror the builder API exactly:
+// - Elements are lazy values; mounting creates nodes parent-first.
+// - Components are plain functions called once with their props (Solid-style,
+//   no re-render); they return elements.
+// - Reactivity stays explicit: `bg={live(() => ...)}` is reactive, `bg={value}`
+//   is static, and a bare function child `{() => ui.anything(...)}` is a
+//   builder escape that runs against the current parent — so the whole
+//   builder API (each, dynamic, textInput, webview, wgpuSurface) is usable
+//   inside JSX unchanged.
+//
+// The component model itself (lazy elements, Show/For/Switch/Match) is the
+// shared Warren JSX core; this module binds it to the retained-tree builder.
+
+import type { LiveBinding, Reactive } from "./reactive";
+import { ui, type BoxProps, type TextProps } from "./ui";
+import {
+	createJsxRuntime,
+	isUIElement,
+	Match,
+	type ForProps,
+	type MatchProps,
+	type ShowProps,
+	type SwitchProps,
+	type UIChild,
+	type UIElement,
+	type WarrenRenderer,
+} from "../../../shared/warren/jsx";
+
+export { isUIElement, Match };
+export type {
+	ForProps,
+	MatchProps,
+	ShowProps,
+	SwitchProps,
+	UIChild,
+	UIElement,
+};
+
+const INTRINSICS = new Set(["box", "row", "column", "text", "spacer"]);
+
+const renderer: WarrenRenderer = {
+	text(value) {
+		ui.text(value as Reactive<string | number>);
+	},
+	liveChild(binding) {
+		// GPU text nodes are leaves with no wrapper: bind as reactive text.
+		// (Element-returning live children aren't part of the GPU JSX types.)
+		ui.text(binding as Reactive<string | number>);
+	},
+	dynamic(build) {
+		ui.dynamic({}, build);
+	},
+	each(items, key, render) {
+		ui.each({}, items, key, render);
+	},
+	intrinsic(type, props) {
+		if (!INTRINSICS.has(type)) {
+			throw new Error(
+				`Warren: unknown element <${type}> — the GPU renderer provides box, row, column, text, and spacer.`,
+			);
+		}
+		const { children, ...rest } = props;
+		switch (type) {
+			case "box":
+			case "row":
+			case "column": {
+				ui[type](
+					rest as BoxProps,
+					children === undefined
+						? undefined
+						: () => mountChild(children as UIChild),
+				);
+				return;
+			}
+			case "text": {
+				if (Array.isArray(children)) {
+					throw new Error(
+						"<text> takes a single child (string, number, or live(() => ...)); compose the string inside one expression.",
+					);
+				}
+				ui.text(
+					(children ?? "") as Reactive<string | number>,
+					rest as TextProps,
+				);
+				return;
+			}
+			case "spacer": {
+				ui.spacer((rest as { grow?: Reactive<number> }).grow ?? 1);
+				return;
+			}
+		}
+	},
+	escape(fn) {
+		// Builder escape: run builder-API code against the current parent.
+		// Return values (node ids) are intentionally ignored.
+		fn();
+	},
+};
+
+const runtime = createJsxRuntime(renderer);
+
+export const jsx = runtime.jsx;
+export const jsxs = runtime.jsxs;
+export const Fragment = runtime.Fragment;
+export const mountChild = runtime.mountChild;
+export const Show = runtime.Show;
+export const For = runtime.For;
+export const Switch = runtime.Switch;
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type WithChildren<P> = P & { children?: UIChild };
+
+export declare namespace JSX {
+	type Element = UIElement;
+	interface ElementChildrenAttribute {
+		children: {};
+	}
+	interface IntrinsicElements {
+		box: WithChildren<BoxProps>;
+		row: WithChildren<BoxProps>;
+		column: WithChildren<BoxProps>;
+		text: TextProps & {
+			children?: string | number | LiveBinding<string | number>;
+		};
+		spacer: { grow?: Reactive<number> };
+	}
+}

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

@@ -0,0 +1,147 @@
+// Keyboard mapping and text-edit reducer. Pure — testable without a window.
+//
+// Prototype honesty: the native key event carries a virtual key code but no
+// character, so this maps macOS virtual key codes assuming a US layout.
+// Production work is characters (and IME) in the native key event itself.
+
+export const Mod = {
+	Shift: 1 << 0,
+	Ctrl: 1 << 1,
+	Alt: 1 << 2,
+	Cmd: 1 << 3,
+} as const;
+
+export const Key = {
+	Return: 36,
+	Tab: 48,
+	Space: 49,
+	Backspace: 51,
+	Escape: 53,
+	Left: 123,
+	Right: 124,
+	Down: 125,
+	Up: 126,
+} as const;
+
+// macOS virtual key code → [char, shiftedChar]
+const CHARS: Record<number, [string, string]> = {
+	0: ["a", "A"], 1: ["s", "S"], 2: ["d", "D"], 3: ["f", "F"],
+	4: ["h", "H"], 5: ["g", "G"], 6: ["z", "Z"], 7: ["x", "X"],
+	8: ["c", "C"], 9: ["v", "V"], 11: ["b", "B"], 12: ["q", "Q"],
+	13: ["w", "W"], 14: ["e", "E"], 15: ["r", "R"], 16: ["y", "Y"],
+	17: ["t", "T"], 18: ["1", "!"], 19: ["2", "@"], 20: ["3", "#"],
+	21: ["4", "$"], 22: ["6", "^"], 23: ["5", "%"], 24: ["=", "+"],
+	25: ["9", "("], 26: ["7", "&"], 27: ["-", "_"], 28: ["8", "*"],
+	29: ["0", ")"], 30: ["]", "}"], 31: ["o", "O"], 32: ["u", "U"],
+	33: ["[", "{"], 34: ["i", "I"], 35: ["p", "P"], 37: ["l", "L"],
+	38: ["j", "J"], 39: ["'", '"'], 40: ["k", "K"], 41: [";", ":"],
+	42: ["\\", "|"], 43: [",", "<"], 44: ["/", "?"], 45: ["n", "N"],
+	46: ["m", "M"], 47: [".", ">"], 49: [" ", " "], 50: ["`", "~"],
+};
+
+/** Printable character for a key event, or null. */
+export function charForKey(keyCode: number, modifiers: number): string | null {
+	if (modifiers & (Mod.Cmd | Mod.Ctrl)) return null;
+	const entry = CHARS[keyCode];
+	if (!entry) return null;
+	return modifiers & Mod.Shift ? entry[1] : entry[0];
+}
+
+export interface EditState {
+	value: string;
+	caret: number;
+}
+
+export interface EditResult extends EditState {
+	handled: boolean;
+	submit: boolean;
+}
+
+/**
+ * Apply one key event to a text-edit state. Handles character insertion,
+ * backspace (with cmd = clear-to-start, alt = delete word), caret movement
+ * (with cmd = home/end, alt = word-wise), and Enter (submit). Unhandled keys
+ * (e.g. Up/Down, Escape) pass through so callers can bubble them.
+ */
+export function applyEditKey(
+	state: EditState,
+	keyCode: number,
+	modifiers: number,
+	chars?: string,
+): EditResult {
+	const { value } = state;
+	const caret = Math.max(0, Math.min(state.caret, value.length));
+
+	if (keyCode === Key.Return) {
+		return { value, caret, handled: true, submit: true };
+	}
+
+	if (keyCode === Key.Backspace) {
+		if (caret === 0) return { value, caret, handled: true, submit: false };
+		let from = caret - 1;
+		if (modifiers & Mod.Cmd) from = 0;
+		else if (modifiers & Mod.Alt) from = wordLeft(value, caret);
+		return {
+			value: value.slice(0, from) + value.slice(caret),
+			caret: from,
+			handled: true,
+			submit: false,
+		};
+	}
+
+	if (keyCode === Key.Left) {
+		const to =
+			modifiers & Mod.Cmd ? 0
+			: modifiers & Mod.Alt ? wordLeft(value, caret)
+			: Math.max(0, caret - 1);
+		return { value, caret: to, handled: true, submit: false };
+	}
+
+	if (keyCode === Key.Right) {
+		const to =
+			modifiers & Mod.Cmd ? value.length
+			: modifiers & Mod.Alt ? wordRight(value, caret)
+			: Math.min(value.length, caret + 1);
+		return { value, caret: to, handled: true, submit: false };
+	}
+
+	// Prefer the keyboard layout's characters when the native event provides
+	// them; fall back to the built-in US map. Control characters and
+	// cmd/ctrl-chorded keys never insert.
+	let char: string | null = null;
+	if (
+		chars &&
+		chars.length > 0 &&
+		!(modifiers & (Mod.Cmd | Mod.Ctrl)) &&
+		// eslint-disable-next-line no-control-regex
+		!/[\u0000-\u001f\u007f\uf700-\uf8ff]/.test(chars)
+	) {
+		char = chars;
+	} else {
+		char = charForKey(keyCode, modifiers);
+	}
+	if (char !== null) {
+		return {
+			value: value.slice(0, caret) + char + value.slice(caret),
+			caret: caret + 1,
+			handled: true,
+			submit: false,
+		};
+	}
+
+	return { value, caret, handled: false, submit: false };
+}
+
+function wordLeft(value: string, from: number): number {
+	let i = from;
+	while (i > 0 && value[i - 1] === " ") i--;
+	while (i > 0 && value[i - 1] !== " ") i--;
+	return i;
+}
+
+function wordRight(value: string, from: number): number {
+	let i = from;
+	while (i < value.length && value[i] === " ") i++;
+	while (i < value.length && value[i] !== " ") i++;
+	return i;
+}

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

@@ -0,0 +1,178 @@
+// Minimal flex-like layout over the retained tree: row/column direction,
+// padding, gap, fixed or content sizing, grow distribution, justify/align.
+// Pure — no Electrobun imports — so it runs under plain `bun test`.
+
+import { Align, Justify, NodeKind, Prop, type UiTree } from "./tree";
+import { measure as measureText } from "./text";
+
+export { Align, Justify };
+
+const isColumn = (tree: UiTree, id: number) => tree.getProp(id, Prop.Dir) === 1;
+
+/**
+ * Natural (content) size of a node given no forced dimensions. Fixed props
+ * win; boxes sum children along the main axis and take the max cross size.
+ */
+function measure(tree: UiTree, id: number): { w: number; h: number } {
+	const node = tree.get(id);
+	const fixedW = node.props[Prop.Width]!;
+	const fixedH = node.props[Prop.Height]!;
+
+	if (node.kind === NodeKind.Text) {
+		const size = measureText(node.text, node.props[Prop.FontSize]!);
+		return {
+			w: fixedW >= 0 ? fixedW : size.w,
+			h: fixedH >= 0 ? fixedH : size.h,
+		};
+	}
+
+	if (fixedW >= 0 && fixedH >= 0) return { w: fixedW, h: fixedH };
+
+	const pad = node.props[Prop.Pad]!;
+	const gap = node.props[Prop.Gap]!;
+	const column = isColumn(tree, id);
+
+	let main = 0;
+	let cross = 0;
+	let count = 0;
+	for (let c = node.first; c !== 0; c = tree.get(c).next) {
+		const size = measure(tree, c);
+		const childMain = column ? size.h : size.w;
+		const childCross = column ? size.w : size.h;
+		main += childMain;
+		cross = Math.max(cross, childCross);
+		count++;
+	}
+	if (count > 1) main += gap * (count - 1);
+
+	const contentW = (column ? cross : main) + pad * 2;
+	const contentH = (column ? main : cross) + pad * 2;
+	return {
+		w: fixedW >= 0 ? fixedW : contentW,
+		h: fixedH >= 0 ? fixedH : contentH,
+	};
+}
+
+/**
+ * Assign the final rect for `id` and arrange its children inside it.
+ * Coordinates are absolute (window content space).
+ */
+function place(
+	tree: UiTree,
+	id: number,
+	x: number,
+	y: number,
+	w: number,
+	h: number,
+): void {
+	const node = tree.get(id);
+	node.x = x;
+	node.y = y;
+	node.w = w;
+	node.h = h;
+
+	if (node.kind !== NodeKind.Box && node.kind !== NodeKind.Anchor) return;
+
+	const pad = node.props[Prop.Pad]!;
+	const gap = node.props[Prop.Gap]!;
+	const justify = node.props[Prop.Justify]! as Justify;
+	const align = node.props[Prop.Align]! as Align;
+	const column = isColumn(tree, id);
+
+	const innerX = x + pad;
+	const innerY = y + pad;
+	const innerW = Math.max(0, w - pad * 2);
+	const innerH = Math.max(0, h - pad * 2);
+	const innerMain = column ? innerH : innerW;
+	const innerCross = column ? innerW : innerH;
+
+	const scrollable = node.props[Prop.Overflow]! === 1;
+
+	// First pass: natural sizes and grow weights.
+	const children = tree.childrenOf(id);
+	if (children.length === 0) {
+		node.contentMain = pad * 2;
+		return;
+	}
+	const mains: number[] = [];
+	const crosses: number[] = [];
+	let usedMain = 0;
+	let totalGrow = 0;
+	for (const child of children) {
+		const size = measure(tree, child);
+		const main = column ? size.h : size.w;
+		const cross = column ? size.w : size.h;
+		mains.push(main);
+		crosses.push(cross);
+		usedMain += main;
+		totalGrow += tree.getProp(child, Prop.Grow);
+	}
+	const gapsTotal = gap * (children.length - 1);
+	usedMain += gapsTotal;
+	node.contentMain = usedMain + pad * 2;
+
+	// Distribute leftover space to grow children. Scroll containers keep
+	// natural sizes — content defines its own extent.
+	const leftover = Math.max(0, innerMain - usedMain);
+	if (!scrollable && leftover > 0 && totalGrow > 0) {
+		for (let i = 0; i < children.length; i++) {
+			const grow = tree.getProp(children[i]!, Prop.Grow);
+			if (grow > 0) {
+				mains[i]! += (leftover * grow) / totalGrow;
+			}
+		}
+		usedMain = innerMain;
+	}
+
+	// Main-axis start offset / spacing from justify. Scroll containers pin to
+	// start and offset by the scroll position instead.
+	let cursor = column ? innerY : innerX;
+	let spacing = gap;
+	if (scrollable) {
+		cursor -= node.props[Prop.Scroll]!;
+	} else {
+		const free = Math.max(0, innerMain - usedMain);
+		if (justify === Justify.Center) cursor += free / 2;
+		else if (justify === Justify.End) cursor += free;
+		else if (justify === Justify.SpaceBetween && children.length > 1) {
+			spacing = gap + free / (children.length - 1);
+		}
+	}
+
+	for (let i = 0; i < children.length; i++) {
+		const child = children[i]!;
+		const main = mains[i]!;
+		let cross = crosses[i]!;
+		if (align === Align.Stretch) {
+			// Flexbox rule: stretch only fills auto cross sizes — a fixed
+			// width/height wins, and text keeps its intrinsic size.
+			const childNode = tree.get(child);
+			const crossFixed =
+				childNode.props[column ? Prop.Width : Prop.Height]! >= 0;
+			if (!crossFixed && childNode.kind !== NodeKind.Text) {
+				cross = innerCross;
+			}
+		}
+		cross = Math.min(cross, innerCross);
+
+		let crossOffset = 0;
+		if (align === Align.Center) crossOffset = (innerCross - cross) / 2;
+		else if (align === Align.End) crossOffset = innerCross - cross;
+
+		if (column) {
+			place(tree, child, innerX + crossOffset, cursor, cross, main);
+		} else {
+			place(tree, child, cursor, innerY + crossOffset, main, cross);
+		}
+		cursor += main + spacing;
+	}
+}
+
+/** Lay out the whole tree into a width x height window content area. */
+export function computeLayout(
+	tree: UiTree,
+	width: number,
+	height: number,
+): void {
+	place(tree, tree.root, 0, 0, width, height);
+}

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

@@ -0,0 +1,196 @@
+// Flatten the laid-out tree into the instanced-quad command buffer:
+// 12 floats per instance — rect(x,y,w,h), color(r,g,b,a), misc(radius,0,0,0).
+// Boxes, borders, and glyph runs all become colored rectangles. Instances
+// draw in buffer order, so parents are emitted before children (painter's
+// algorithm). Pure — testable without a GPU.
+
+import { NodeKind, Prop, type UiTree } from "./tree";
+import { GLYPH_ADVANCE, GLYPH_H, glyphRuns } from "./font";
+import { atlasEntry, isNativeTextActive } from "./text";
+
+export const FLOATS_PER_INSTANCE = 20;
+
+// "No clip" sentinel large enough to cover any window.
+const OPEN_CLIP: Clip = { x: -1e7, y: -1e7, w: 2e7, h: 2e7 };
+
+interface Clip {
+	x: number;
+	y: number;
+	w: number;
+	h: number;
+}
+
+function intersectClip(a: Clip, b: Clip): Clip {
+	const x = Math.max(a.x, b.x);
+	const y = Math.max(a.y, b.y);
+	return {
+		x,
+		y,
+		w: Math.max(0, Math.min(a.x + a.w, b.x + b.w) - x),
+		h: Math.max(0, Math.min(a.y + a.h, b.y + b.h) - y),
+	};
+}
+
+export interface PaintBuffer {
+	data: Float32Array;
+	count: number;
+}
+
+export function parseColor(color: string | number): number {
+	if (typeof color === "number") return color >>> 0;
+	let hex = color.trim();
+	if (hex.startsWith("#")) hex = hex.slice(1);
+	if (hex.length === 3) {
+		hex = hex
+			.split("")
+			.map((c) => c + c)
+			.join("");
+	}
+	if (hex.length === 6) hex += "ff";
+	if (hex.length !== 8) throw new Error(`Unsupported color: ${color}`);
+	return Number.parseInt(hex, 16) >>> 0;
+}
+
+class InstanceWriter {
+	data = new Float32Array(256 * FLOATS_PER_INSTANCE);
+	count = 0;
+
+	emit(
+		x: number,
+		y: number,
+		w: number,
+		h: number,
+		rgba: number,
+		radius: number,
+		clip: Clip,
+		uv?: { u0: number; v0: number; u1: number; v1: number },
+	): void {
+		const a = (rgba & 0xff) / 255;
+		if (a === 0 || w <= 0 || h <= 0 || clip.w <= 0 || clip.h <= 0) return;
+		// Fully outside the clip: skip the instance entirely.
+		if (
+			x >= clip.x + clip.w ||
+			y >= clip.y + clip.h ||
+			x + w <= clip.x ||
+			y + h <= clip.y
+		) {
+			return;
+		}
+		if ((this.count + 1) * FLOATS_PER_INSTANCE > this.data.length) {
+			const grown = new Float32Array(this.data.length * 2);
+			grown.set(this.data);
+			this.data = grown;
+		}
+		const o = this.count * FLOATS_PER_INSTANCE;
+		this.data[o] = x;
+		this.data[o + 1] = y;
+		this.data[o + 2] = w;
+		this.data[o + 3] = h;
+		this.data[o + 4] = ((rgba >>> 24) & 0xff) / 255;
+		this.data[o + 5] = ((rgba >>> 16) & 0xff) / 255;
+		this.data[o + 6] = ((rgba >>> 8) & 0xff) / 255;
+		this.data[o + 7] = a;
+		this.data[o + 8] = radius;
+		this.data[o + 9] = uv ? 1 : 0; // textured flag
+		this.data[o + 10] = 0;
+		this.data[o + 11] = 0;
+		this.data[o + 12] = clip.x;
+		this.data[o + 13] = clip.y;
+		this.data[o + 14] = clip.w;
+		this.data[o + 15] = clip.h;
+		this.data[o + 16] = uv ? uv.u0 : 0;
+		this.data[o + 17] = uv ? uv.v0 : 0;
+		this.data[o + 18] = uv ? uv.u1 : 0;
+		this.data[o + 19] = uv ? uv.v1 : 0;
+		this.count++;
+	}
+}
+
+function paintText(
+	writer: InstanceWriter,
+	tree: UiTree,
+	id: number,
+	clip: Clip,
+): void {
+	const node = tree.get(id);
+	const size = node.props[Prop.FontSize]!;
+	const color = node.props[Prop.TextColor]! >>> 0;
+
+	// Native backend: one textured quad sampled from the glyph atlas.
+	if (isNativeTextActive()) {
+		const entry = atlasEntry(node.text, size);
+		if (entry) {
+			writer.emit(node.x, node.y, entry.w, entry.h, color, 0, clip, entry);
+		}
+		return;
+	}
+
+	// Bitmap fallback: glyph runs as rects.
+	const cell = size / GLYPH_H;
+	let penX = node.x;
+	for (const char of node.text) {
+		for (const [row, col, len] of glyphRuns(char)) {
+			writer.emit(
+				penX + col * cell,
+				node.y + row * cell,
+				len * cell,
+				cell,
+				color,
+				0,
+				clip,
+			);
+		}
+		penX += GLYPH_ADVANCE * cell;
+	}
+}
+
+function paintNode(
+	writer: InstanceWriter,
+	tree: UiTree,
+	id: number,
+	clip: Clip,
+): void {
+	const node = tree.get(id);
+
+	if (node.kind === NodeKind.Text) {
+		paintText(writer, tree, id, clip);
+	} else if (node.kind === NodeKind.Box) {
+		const bg = node.props[Prop.Bg]! >>> 0;
+		const radius = node.props[Prop.Radius]!;
+		const borderWidth = node.props[Prop.BorderWidth]!;
+		const borderColor = node.props[Prop.BorderColor]! >>> 0;
+
+		if (borderWidth > 0 && (borderColor & 0xff) !== 0) {
+			writer.emit(node.x, node.y, node.w, node.h, borderColor, radius, clip);
+			writer.emit(
+				node.x + borderWidth,
+				node.y + borderWidth,
+				node.w - borderWidth * 2,
+				node.h - borderWidth * 2,
+				bg,
+				Math.max(0, radius - borderWidth),
+				clip,
+			);
+		} else {
+			writer.emit(node.x, node.y, node.w, node.h, bg, radius, clip);
+		}
+	}
+	// Anchor nodes paint nothing: they only reserve layout space for a
+	// native layer composited by nativeWrapper.
+
+	// Scroll containers clip their children to their own rect.
+	const childClip =
+		node.props[Prop.Overflow]! === 1
+			? intersectClip(clip, { x: node.x, y: node.y, w: node.w, h: node.h })
+			: clip;
+
+	for (let c = node.first; c !== 0; c = tree.get(c).next) {
+		paintNode(writer, tree, c, childClip);
+	}
+}
+
+export function paint(tree: UiTree): PaintBuffer {
+	const writer = new InstanceWriter();
+	paintNode(writer, tree, tree.root, OPEN_CLIP);
+	return { data: writer.data, count: writer.count };
+}

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

@@ -0,0 +1,4 @@
+// Warren reactivity core — canonical source lives in src/shared/warren so
+// the browser (DOM) renderer shares one implementation. This shim keeps
+// main/ui-relative imports stable.
+export * from "../../../shared/warren/reactive";