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

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

@@ -0,0 +1,278 @@
+// Dawn renderer: one instanced-quad pipeline drawing the whole command
+// buffer in a single draw call. Rounded corners via SDF with ~1px AA.
+// Uses Electrobun's browser-style WebGPU adapter, so this reads like
+// standard WebGPU.
+
+import webgpu from "../webgpuAdapter";
+import type { GpuWindow } from "../core/GpuWindow";
+import type { WGPUView } from "../core/WGPUView";
+import { FLOATS_PER_INSTANCE, parseColor, type PaintBuffer } from "./paint";
+import { ATLAS_SIZE, textAtlas } from "./text";
+
+const SHADER = /* wgsl */ `
+struct Uniforms {
+  viewport: vec4<f32>,
+};
+@group(0) @binding(0) var<uniform> u: Uniforms;
+
+struct VSOut {
+  @builtin(position) pos: vec4<f32>,
+  @location(0) color: vec4<f32>,
+  @location(1) local: vec2<f32>,
+  @location(2) halfSize: vec2<f32>,
+  @location(3) radius: f32,
+  @location(4) clip: vec4<f32>,
+  @location(5) uv: vec2<f32>,
+  @location(6) textured: f32,
+};
+
+@vertex
+fn vs(
+  @builtin(vertex_index) vi: u32,
+  @location(0) rect: vec4<f32>,
+  @location(1) color: vec4<f32>,
+  @location(2) misc: vec4<f32>,
+  @location(3) clipRect: vec4<f32>,
+  @location(4) uvRect: vec4<f32>,
+) -> VSOut {
+  var corners = array<vec2<f32>, 6>(
+    vec2<f32>(0.0, 0.0), vec2<f32>(1.0, 0.0), vec2<f32>(0.0, 1.0),
+    vec2<f32>(0.0, 1.0), vec2<f32>(1.0, 0.0), vec2<f32>(1.0, 1.0),
+  );
+  let c = corners[vi];
+  let px = rect.xy + c * rect.zw;
+  let ndc = vec2<f32>(
+    px.x / u.viewport.x * 2.0 - 1.0,
+    1.0 - px.y / u.viewport.y * 2.0,
+  );
+  var out: VSOut;
+  out.pos = vec4<f32>(ndc, 0.0, 1.0);
+  out.color = color;
+  out.halfSize = rect.zw * 0.5;
+  out.local = (c - vec2<f32>(0.5, 0.5)) * rect.zw;
+  out.radius = misc.x;
+  out.clip = clipRect;
+  out.uv = mix(uvRect.xy, uvRect.zw, c);
+  out.textured = misc.y;
+  return out;
+}
+
+fn sdRoundRect(p: vec2<f32>, b: vec2<f32>, r: f32) -> f32 {
+  let q = abs(p) - b + vec2<f32>(r, r);
+  return length(max(q, vec2<f32>(0.0, 0.0))) + min(max(q.x, q.y), 0.0) - r;
+}
+
+@group(0) @binding(1) var atlasSampler: sampler;
+@group(0) @binding(2) var atlasTexture: texture_2d<f32>;
+
+@fragment
+fn fs(in: VSOut) -> @location(0) vec4<f32> {
+  // Sample before any branching: WGSL requires textureSample (implicit
+  // derivatives) in uniform control flow.
+  let sampled = textureSample(atlasTexture, atlasSampler, in.uv);
+  // Scissor to the instance's clip rect (framebuffer pixel space).
+  if (in.pos.x < in.clip.x || in.pos.y < in.clip.y
+      || in.pos.x >= in.clip.x + in.clip.z || in.pos.y >= in.clip.y + in.clip.w) {
+    discard;
+  }
+  var coverage: f32;
+  if (in.textured > 0.5) {
+    // Glyphs are rasterized white-on-transparent: alpha is coverage.
+    coverage = sampled.a;
+  } else {
+    let r = clamp(in.radius, 0.0, min(in.halfSize.x, in.halfSize.y));
+    let d = sdRoundRect(in.local, in.halfSize, r);
+    coverage = 1.0 - smoothstep(-0.75, 0.75, d);
+  }
+  if (coverage <= 0.003) {
+    discard;
+  }
+  return vec4<f32>(in.color.rgb, in.color.a * coverage);
+}
+`;
+
+export interface UiRenderer {
+	render(buffer: PaintBuffer, width: number, height: number): void;
+	resize(width: number, height: number): void;
+}
+
+/**
+ * Renderer over any Dawn target: a full-window GpuWindow or an individual
+ * WGPUView (used when a UI tree renders into a view composited over a
+ * webview). Size is pushed explicitly via resize(); the surface reconfigures
+ * on the next frame.
+ */
+export async function createUiRenderer(
+	target: GpuWindow | WGPUView,
+	clearColor: string | number,
+	initialSize: { width: number; height: number },
+): Promise<UiRenderer> {
+	const { context: ctx } = webgpu.createContext(target as any);
+	ctx._fallbackSize = { ...initialSize };
+	const adapter = await webgpu.navigator.requestAdapter({
+		compatibleSurface: ctx,
+	});
+	const device = await adapter.requestDevice();
+	// Non-sRGB surface (command-buffer colors are already display-referred).
+	// Premultiplied alpha lets transparent windows composite; configure falls
+	// back to the surface's supported mode when unavailable, and our blend
+	// state produces premultiplied output over the alpha clear either way.
+	ctx.configure({ device, format: "bgra8unorm", alphaMode: "premultiplied" });
+
+	const clear = parseColor(clearColor) >>> 0;
+	const clearValue = {
+		r: ((clear >>> 24) & 0xff) / 255,
+		g: ((clear >>> 16) & 0xff) / 255,
+		b: ((clear >>> 8) & 0xff) / 255,
+		a: (clear & 0xff) / 255,
+	};
+
+	const module = device.createShaderModule({ code: SHADER });
+	const pipeline = device.createRenderPipeline({
+		layout: "auto",
+		vertex: {
+			module,
+			entryPoint: "vs",
+			buffers: [
+				{
+					arrayStride: FLOATS_PER_INSTANCE * 4,
+					stepMode: "instance",
+					attributes: [
+						{ shaderLocation: 0, offset: 0, format: "float32x4" },
+						{ shaderLocation: 1, offset: 16, format: "float32x4" },
+						{ shaderLocation: 2, offset: 32, format: "float32x4" },
+						{ shaderLocation: 3, offset: 48, format: "float32x4" },
+						{ shaderLocation: 4, offset: 64, format: "float32x4" },
+					],
+				},
+			],
+		},
+		fragment: {
+			module,
+			entryPoint: "fs",
+			targets: [
+				{
+					format: ctx.format,
+					blend: {
+						color: {
+							operation: "add",
+							srcFactor: "src-alpha",
+							dstFactor: "one-minus-src-alpha",
+						},
+						alpha: {
+							operation: "add",
+							srcFactor: "one",
+							dstFactor: "one-minus-src-alpha",
+						},
+					},
+				},
+			],
+		},
+		primitive: { topology: "triangle-list" },
+	});
+
+	const uniformBuffer = device.createBuffer({
+		size: 16,
+		usage: 0x40 | 0x8, // UNIFORM | COPY_DST
+	});
+	const atlasTexture = device.createTexture({
+		size: { width: ATLAS_SIZE, height: ATLAS_SIZE },
+		format: "rgba8unorm",
+		usage: 0x4 | 0x2, // TEXTURE_BINDING | COPY_DST
+	});
+	const atlasView = atlasTexture.createView();
+	const atlasSampler = device.createSampler({
+		magFilter: "linear",
+		minFilter: "linear",
+	});
+	const bindGroup = device.createBindGroup({
+		layout: pipeline.getBindGroupLayout(0),
+		entries: [
+			{ binding: 0, resource: { buffer: uniformBuffer } },
+			{ binding: 1, resource: atlasSampler },
+			{ binding: 2, resource: atlasView },
+		],
+	});
+
+	let atlasGeneration = -1;
+	const flushAtlas = () => {
+		const dirty = textAtlas.takeDirty();
+		const generationChanged = textAtlas.generation !== atlasGeneration;
+		if (!dirty && !generationChanged) return;
+		atlasGeneration = textAtlas.generation;
+		const region = generationChanged
+			? { x0: 0, y0: 0, x1: ATLAS_SIZE, y1: ATLAS_SIZE }
+			: dirty!;
+		const x = Math.max(0, Math.floor(region.x0));
+		const y = Math.max(0, Math.floor(region.y0));
+		const w = Math.min(ATLAS_SIZE, Math.ceil(region.x1)) - x;
+		const h = Math.min(ATLAS_SIZE, Math.ceil(region.y1)) - y;
+		if (w <= 0 || h <= 0) return;
+		// Pack the dirty rows into a tight buffer for the upload.
+		const packed = new Uint8Array(w * h * 4);
+		for (let row = 0; row < h; row++) {
+			const src = ((y + row) * ATLAS_SIZE + x) * 4;
+			packed.set(textAtlas.pixels.subarray(src, src + w * 4), row * w * 4);
+		}
+		device.queue.writeTexture(
+			{ texture: atlasTexture, origin: { x, y } },
+			packed,
+			{ bytesPerRow: w * 4, rowsPerImage: h },
+			{ width: w, height: h },
+		);
+	};
+
+	let instanceCapacity = 1024;
+	let instanceBuffer = device.createBuffer({
+		size: instanceCapacity * FLOATS_PER_INSTANCE * 4,
+		usage: 0x20 | 0x8, // VERTEX | COPY_DST
+	});
+
+	return {
+		resize(width: number, height: number) {
+			ctx._fallbackSize = { width, height };
+		},
+		render(buffer: PaintBuffer, width: number, height: number) {
+			if (width <= 0 || height <= 0) return;
+			flushAtlas();
+			if (buffer.count > instanceCapacity) {
+				while (instanceCapacity < buffer.count) instanceCapacity *= 2;
+				instanceBuffer = device.createBuffer({
+					size: instanceCapacity * FLOATS_PER_INSTANCE * 4,
+					usage: 0x20 | 0x8,
+				});
+			}
+			device.queue.writeBuffer(
+				uniformBuffer,
+				0,
+				new Float32Array([width, height, 0, 0]),
+			);
+			if (buffer.count > 0) {
+				device.queue.writeBuffer(
+					instanceBuffer,
+					0,
+					buffer.data.subarray(0, buffer.count * FLOATS_PER_INSTANCE),
+				);
+			}
+			const encoder = device.createCommandEncoder();
+			const pass = encoder.beginRenderPass({
+				colorAttachments: [
+					{
+						view: ctx.getCurrentTexture().createView(),
+						loadOp: "clear",
+						storeOp: "store",
+						clearValue,
+					},
+				],
+			});
+			pass.setPipeline(pipeline);
+			pass.setBindGroup(0, bindGroup);
+			pass.setVertexBuffer(0, instanceBuffer);
+			if (buffer.count > 0) {
+				pass.draw(6, buffer.count);
+			}
+			pass.end();
+			device.queue.submit([encoder.finish()]);
+		},
+	};
+}

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

@@ -0,0 +1,175 @@
+// Text backend for the UI runtime. Two implementations behind one interface:
+//
+// - bitmap (default): the built-in 5x7 font, pure — used in headless tests
+//   and wherever the native wrapper lacks the CoreText exports.
+// - native: system-font measurement + rasterization into a shared glyph
+//   atlas, activated by mounts via tryEnableNativeText().
+//
+// Paint consults the backend for measurement and (in native mode) atlas
+// entries; the renderer uploads dirty atlas regions and samples them for
+// textured instances.
+
+import { measureText as measureBitmap } from "./font";
+
+export interface AtlasEntry {
+	// Normalized UV rect in the atlas.
+	u0: number;
+	v0: number;
+	u1: number;
+	v1: number;
+	// Logical size of the rasterized string in points.
+	w: number;
+	h: number;
+}
+
+export const ATLAS_SIZE = 2048;
+/** Device pixels per point used when rasterizing (crisp on 2x displays). */
+export const ATLAS_SCALE = 2;
+
+interface NativeTextApi {
+	measure(
+		text: string,
+		fontName: string,
+		size: number,
+	): { w: number; h: number; ascent: number };
+	rasterize(
+		text: string,
+		fontName: string,
+		size: number,
+		scale: number,
+	): { width: number; height: number; data: Uint8Array } | null;
+}
+
+let nativeApi: NativeTextApi | null = null;
+const measureCache = new Map<string, { w: number; h: number }>();
+
+// ---------------------------------------------------------------------------
+// Atlas: shelf packer over a CPU-side RGBA buffer. On overflow, the whole
+// atlas resets (generation bump) and visible strings re-enter on next paint.
+// ---------------------------------------------------------------------------
+
+class TextAtlas {
+	pixels = new Uint8Array(ATLAS_SIZE * ATLAS_SIZE * 4);
+	entries = new Map<string, AtlasEntry>();
+	generation = 0;
+	private shelfX = 0;
+	private shelfY = 0;
+	private shelfHeight = 0;
+	private dirty: { x0: number; y0: number; x1: number; y1: number } | null =
+		null;
+
+	takeDirty() {
+		const d = this.dirty;
+		this.dirty = null;
+		return d;
+	}
+
+	private markDirty(x: number, y: number, w: number, h: number) {
+		if (!this.dirty) {
+			this.dirty = { x0: x, y0: y, x1: x + w, y1: y + h };
+			return;
+		}
+		this.dirty.x0 = Math.min(this.dirty.x0, x);
+		this.dirty.y0 = Math.min(this.dirty.y0, y);
+		this.dirty.x1 = Math.max(this.dirty.x1, x + w);
+		this.dirty.y1 = Math.max(this.dirty.y1, y + h);
+	}
+
+	private reset() {
+		this.entries.clear();
+		this.pixels.fill(0);
+		this.shelfX = 0;
+		this.shelfY = 0;
+		this.shelfHeight = 0;
+		this.generation++;
+		this.markDirty(0, 0, ATLAS_SIZE, ATLAS_SIZE);
+	}
+
+	get(key: string, text: string, size: number): AtlasEntry | null {
+		const existing = this.entries.get(key);
+		if (existing) return existing;
+		if (!nativeApi) return null;
+		const raster = nativeApi.rasterize(text, "", size, ATLAS_SCALE);
+		if (!raster || raster.width === 0) return null;
+		const pad = 1; // guard against sampling bleed
+		const w = raster.width + pad * 2;
+		const h = raster.height + pad * 2;
+		if (w > ATLAS_SIZE || h > ATLAS_SIZE) return null;
+
+		if (this.shelfX + w > ATLAS_SIZE) {
+			this.shelfY += this.shelfHeight;
+			this.shelfX = 0;
+			this.shelfHeight = 0;
+		}
+		if (this.shelfY + h > ATLAS_SIZE) {
+			this.reset();
+		}
+		const x = this.shelfX + pad;
+		const y = this.shelfY + pad;
+		this.shelfX += w;
+		this.shelfHeight = Math.max(this.shelfHeight, h);
+
+		// Blit the rasterized rows into the atlas buffer.
+		for (let row = 0; row < raster.height; row++) {
+			const src = row * raster.width * 4;
+			const dst = ((y + row) * ATLAS_SIZE + x) * 4;
+			this.pixels.set(raster.data.subarray(src, src + raster.width * 4), dst);
+		}
+		this.markDirty(x - pad, y - pad, w, h);
+
+		const measured = measure(text, size);
+		const entry: AtlasEntry = {
+			u0: x / ATLAS_SIZE,
+			v0: y / ATLAS_SIZE,
+			u1: (x + raster.width) / ATLAS_SIZE,
+			v1: (y + raster.height) / ATLAS_SIZE,
+			w: measured.w,
+			h: measured.h,
+		};
+		this.entries.set(key, entry);
+		return entry;
+	}
+}
+
+export const textAtlas = new TextAtlas();
+
+// ---------------------------------------------------------------------------
+// Public backend surface
+// ---------------------------------------------------------------------------
+
+/** Switch to the native (system font) backend. Returns whether it's active. */
+export function tryEnableNativeText(api: NativeTextApi | null): boolean {
+	if (nativeApi) return true;
+	if (!api) return false;
+	nativeApi = api;
+	measureCache.clear();
+	return true;
+}
+
+export function isNativeTextActive(): boolean {
+	return nativeApi !== null;
+}
+
+/** Force the pure bitmap backend (tests). */
+export function resetTextBackend(): void {
+	nativeApi = null;
+	measureCache.clear();
+}
+
+export function measure(text: string, size: number): { w: number; h: number } {
+	if (!nativeApi) return measureBitmap(text, size);
+	const key = `${size}|${text}`;
+	const cached = measureCache.get(key);
+	if (cached) return cached;
+	const m = nativeApi.measure(text, "", size);
+	const result = { w: m.w, h: m.h };
+	if (measureCache.size > 10_000) measureCache.clear();
+	measureCache.set(key, result);
+	return result;
+}
+
+/** Atlas entry for a string (native backend only). */
+export function atlasEntry(text: string, size: number): AtlasEntry | null {
+	if (!nativeApi || text.length === 0) return null;
+	return textAtlas.get(`${size}|${text}`, text, size);
+}

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

@@ -0,0 +1,121 @@
+// Controlled single-line text input built from the core primitives: a
+// focusable box containing [before-caret text][caret][after-caret text].
+// Editing runs through the pure applyEditKey reducer; the caret blinks only
+// while focused, so idle inputs stay invalidation-free.
+
+import { cleanup, inert, live, liveScope, signal } from "./reactive";
+import { getUiContext, read, ui, type KeyEventInfo, type Reactive } from "./ui";
+import { applyEditKey } from "./keymap";
+
+export interface TextInputProps {
+	value: () => string;
+	onInput: (next: string) => void;
+	/** Enter. */
+	onSubmit?: (value: string) => void;
+	placeholder?: string;
+	autofocus?: boolean;
+	size?: number;
+	grow?: Reactive<number>;
+	width?: Reactive<number>;
+	pad?: Reactive<number>;
+	radius?: Reactive<number>;
+	bg?: Reactive<string | number>;
+	color?: string;
+	placeholderColor?: string;
+	caretColor?: string;
+	border?: Reactive<number>;
+	borderColor?: Reactive<string | number>;
+	focusBorderColor?: Reactive<string | number>;
+}
+
+export function textInput(props: TextInputProps): number {
+	const ctx = getUiContext();
+	const size = props.size ?? 14;
+	const color = props.color ?? "#e4e4f0";
+	const placeholderColor = props.placeholderColor ?? "#616178";
+	const caretColor = props.caretColor ?? "#e4e4f0";
+
+	const [caret, setCaret] = signal(inert(props.value).length);
+	const [blinkOn, setBlinkOn] = signal(true);
+
+	let id = 0;
+	const focused = () => ctx.focusedId() === id;
+
+	const handleKey = (e: KeyEventInfo): boolean => {
+		const value = inert(props.value);
+		// applyEditKey clamps the caret itself; String.slice clamps in render.
+		const result = applyEditKey(
+			{ value, caret: inert(caret) },
+			e.keyCode,
+			e.modifiers,
+			e.chars,
+		);
+		if (!result.handled) return false;
+		if (result.submit) {
+			props.onSubmit?.(value);
+			return true;
+		}
+		setCaret(result.caret);
+		setBlinkOn(true);
+		if (result.value !== value) props.onInput(result.value);
+		return true;
+	};
+
+	id = ui.row(
+		{
+			focusable: true,
+			onKeyDown: handleKey,
+			onClick: () => setCaret(inert(props.value).length),
+			grow: props.grow,
+			width: props.width,
+			pad: props.pad ?? 10,
+			radius: props.radius ?? 8,
+			align: "center",
+			bg: props.bg ?? "#1b1b28",
+			border: props.border ?? 1,
+			borderColor: live(() =>
+				focused() && props.focusBorderColor !== undefined
+					? read(props.focusBorderColor)
+					: read(props.borderColor ?? "#262638"),
+			),
+		},
+		() => {
+			// Placeholder: an empty text node has zero width, so this only
+			// occupies space while the value is empty.
+			ui.text(
+				live(() =>
+					props.value().length === 0 ? props.placeholder ?? "" : "",
+				),
+				{ size, color: placeholderColor },
+			);
+			ui.text(live(() => props.value().slice(0, caret())), {
+				size,
+				color,
+			});
+			ui.box({
+				width: Math.max(1.5, size / 9),
+				height: size + 2,
+				bg: live(() =>
+					focused() && blinkOn() ? caretColor : "#00000000",
+				),
+			});
+			ui.text(live(() => props.value().slice(caret())), { size, color });
+		},
+	);
+
+	// Blink only while focused; an idle unfocused input never dirties the tree.
+	liveScope(() => {
+		if (!focused()) {
+			setBlinkOn(true);
+			return;
+		}
+		const timer = setInterval(() => setBlinkOn((v) => !v), 530);
+		cleanup(() => clearInterval(timer));
+	});
+
+	if (props.autofocus) {
+		ctx.setFocused(id);
+	}
+
+	return id;
+}