@neta-art/cohub 8.23.0 → 9.0.0

package/dist/board/render/renderers/sketch-card-renderer.js

@@ -0,0 +1,98 @@
+import { BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
+import { getBoardResolution } from "../text-resolution.js";
+import { positionShell } from "./base-card-renderer.js";
+import { drawFarPlate } from "./far-plate.js";
+import { Container, Graphics, Sprite, Text, Texture } from "pixi.js";
+//#region src/board/render/renderers/sketch-card-renderer.ts
+const partsByContainer = /* @__PURE__ */ new WeakMap();
+function sync(container, item, context) {
+	const parts = partsByContainer.get(container);
+	if (!parts) return;
+	if (parts.id !== item.id) {
+		context.sketches?.release(parts.id);
+		parts.id = item.id;
+	}
+	positionShell(parts.root, item);
+	const { width, height } = item.frame;
+	const resolution = Math.min(4, Math.max(.25, context.zoom * getBoardResolution()));
+	const texture = context.sketches?.frame(item, context.time, resolution) ?? null;
+	const error = context.sketches?.error(item.id) ?? null;
+	parts.sprite.visible = Boolean(texture);
+	if (texture && parts.sprite.texture !== texture) parts.sprite.texture = texture;
+	parts.sprite.width = width;
+	parts.sprite.height = height;
+	const selected = context.selectedIds.has(item.id);
+	const message = texture ? "" : error ? `${item.props.src}\n${error}` : item.props.src;
+	const sig = [
+		width,
+		height,
+		selected,
+		Boolean(texture),
+		message,
+		context.palette.border,
+		context.palette.muted
+	].join("|");
+	if (sig === parts.sig) return;
+	parts.sig = sig;
+	parts.placeholder.clear();
+	if (!texture || selected) parts.placeholder.rect(0, 0, width, height).stroke({
+		color: selected ? context.palette.brand : context.palette.border,
+		width: selected ? 2 : 1,
+		alpha: .8
+	});
+	parts.label.visible = !texture;
+	parts.label.text = message;
+	parts.label.style.fill = error ? context.colors.rose.stroke : context.palette.muted;
+	parts.label.style.wordWrapWidth = Math.max(40, width - 16);
+	parts.label.position.set(width / 2, height / 2);
+}
+const sketchCardRenderer = {
+	id: "sketch-card",
+	canRender: (item) => item.type === "sketch",
+	animated: true,
+	create: (item, context) => {
+		const root = new Container();
+		const sprite = new Sprite(Texture.EMPTY);
+		const placeholder = new Graphics();
+		const label = new Text({
+			text: "",
+			style: {
+				fontFamily: BOARD_MONO_FONT_STACK,
+				fontSize: 12,
+				align: "center",
+				wordWrap: true,
+				breakWords: true
+			},
+			resolution: getBoardResolution()
+		});
+		label.anchor.set(.5);
+		root.addChild(sprite, placeholder, label);
+		partsByContainer.set(root, {
+			id: item.id,
+			root,
+			sprite,
+			placeholder,
+			label,
+			sig: ""
+		});
+		if (item.type === "sketch") sync(root, item, context);
+		return root;
+	},
+	update: (container, item, context) => {
+		if (item.type === "sketch") sync(container, item, context);
+	},
+	renderFar: (graphics, item, context) => {
+		drawFarPlate(graphics, item.frame, {
+			fill: context.palette.muted,
+			fillAlpha: .12
+		});
+	},
+	destroy: (container, context) => {
+		const parts = partsByContainer.get(container);
+		if (parts) context.sketches?.release(parts.id);
+		parts?.root.destroy({ children: true });
+		partsByContainer.delete(container);
+	}
+};
+//#endregion
+export { sketchCardRenderer };

package/dist/board/render/renderers/task-card-renderer.d.ts

@@ -1,7 +1,6 @@
 import { BoardCardRenderer } from "./board-renderer-registry.js";
 //#region src/board/render/renderers/task-card-renderer.d.ts
 declare const TASK_CARD_FULL_DETAIL_ZOOM = 0.55;
-/** Scale a texture into a frame without cropping or distortion. */
 declare function containTaskPreviewRect(width: number, height: number, imageWidth: number, imageHeight: number): {
   x: number;
   y: number;

package/dist/board/render/renderers/task-card-renderer.js

@@ -1,7 +1,7 @@
 import { BOARD_FONT_STACK, BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { featuredTaskArtifact } from "../../task.js";
-import { syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
 import { drawAudioWaveform } from "../audio-waveform.js";
+import { syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
 import { fitTextToLines } from "./file-card-renderer.js";
@@ -21,13 +21,13 @@ function previewKindFor(artifact) {
 }
 function stateSurfaceFor(item, kind, hasTexture, previewFailed) {
 	if (kind === "texture" && !hasTexture) {
-		if (item.snapshot.status === "failed") return "failed";
+		if (item.props.snapshot.status === "failed") return "failed";
 		return previewFailed ? "unavailable" : "media-loading";
 	}
 	if (kind !== "empty") return null;
-	if (item.snapshot.status === "failed") return "failed";
-	if (item.snapshot.status === "running") return "generating";
-	if (item.snapshot.status === "pending") return "queued";
+	if (item.props.snapshot.status === "failed") return "failed";
+	if (item.props.snapshot.status === "running") return "generating";
+	if (item.props.snapshot.status === "pending") return "queued";
 	return "empty";
 }
 function stateLabel(surface) {
@@ -41,16 +41,15 @@ function stateLabel(surface) {
 	}
 }
 function statusColor(item, context) {
-	if (item.snapshot.status === "failed") return context.colors.rose.stroke;
-	if (item.snapshot.status === "running") return context.colors.brand.stroke;
+	if (item.props.snapshot.status === "failed") return context.colors.rose.stroke;
+	if (item.props.snapshot.status === "running") return context.colors.brand.stroke;
 	return context.colors.neutral.stroke;
 }
 function metadata(item) {
-	const { artifactCount, artifacts } = item.snapshot;
+	const { artifactCount, artifacts } = item.props.snapshot;
 	const extra = artifactCount > artifacts.length ? `${artifacts.length}/${artifactCount}` : artifactCount > 1 ? `+${artifactCount - 1}` : null;
-	return [item.snapshot.model, extra].filter(Boolean).join(" · ");
+	return [item.props.snapshot.model, extra].filter(Boolean).join(" · ");
 }
-/** Scale a texture into a frame without cropping or distortion. */
 function containTaskPreviewRect(width, height, imageWidth, imageHeight) {
 	if (width <= 0 || height <= 0 || imageWidth <= 0 || imageHeight <= 0) return {
 		x: 0,
@@ -82,7 +81,6 @@ function drawPlayBadge(graphics, rect, context) {
 		alpha: .94
 	});
 }
-/** Static state marks avoid implying measurable progress or keeping Pixi awake. */
 function drawStateMark(graphics, surface, cx, cy, color) {
 	if (surface === "generating" || surface === "media-loading") {
 		graphics.circle(cx, cy, 4).fill({
@@ -169,7 +167,7 @@ function sync(container, item, context) {
 	}
 	const texture = key ? context.getTexture(key) : null;
 	const previewFailed = Boolean(key && !texture && context.hasError(key));
-	const artifact = featuredTaskArtifact(item.snapshot.artifacts);
+	const artifact = featuredTaskArtifact(item.props.snapshot.artifacts);
 	const kind = previewKindFor(artifact);
 	const surface = stateSurfaceFor(item, kind, Boolean(texture), previewFailed);
 	const frame = {
@@ -180,7 +178,7 @@ function sync(container, item, context) {
 	};
 	const metaText = artifact ? metadata(item) : "";
 	const showMeta = full && Boolean(metaText);
-	const failedWithOutput = item.snapshot.status === "failed" && kind !== "empty";
+	const failedWithOutput = item.props.snapshot.status === "failed" && kind !== "empty";
 	syncTextResolution(parts.body, parts, context.zoom);
 	syncTextResolution(parts.meta, parts, context.zoom);
 	const visualSig = [
@@ -196,7 +194,7 @@ function sync(container, item, context) {
 		failedWithOutput,
 		artifact?.type ?? "none",
 		artifact?.id ?? "none",
-		item.taskRunId,
+		item.props.taskRunId,
 		texture ? `${texture.width}x${texture.height}` : "none",
 		context.palette.surface,
 		context.palette.hover,
@@ -222,7 +220,7 @@ function sync(container, item, context) {
 		parts.previewArt.clear();
 		if (kind === "waveform") {
 			const bottomInset = showMeta ? META_HEIGHT : 0;
-			drawAudioWaveform(parts.previewArt, item.taskRunId, {
+			drawAudioWaveform(parts.previewArt, item.props.taskRunId, {
 				x: frame.x + PADDING,
 				y: frame.y + PADDING,
 				width: Math.max(1, frame.width - 24),
@@ -335,7 +333,7 @@ const taskCardRenderer = {
 	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "task") return;
-		const active = item.snapshot.status === "failed" || item.snapshot.status === "running" || item.snapshot.status === "pending";
+		const active = item.props.snapshot.status === "failed" || item.props.snapshot.status === "running" || item.props.snapshot.status === "pending";
 		drawFarPlate(graphics, item.frame, {
 			fill: context.palette.surface,
 			fillAlpha: .82,

package/dist/board/render/renderers/text-card-renderer.d.ts

@@ -1,7 +1,5 @@
-import { BoardItem, BoardTextItem } from "../../../protocol/dist/board-document.js";
 import { BoardCardRenderer } from "./board-renderer-registry.js";
 //#region src/board/render/renderers/text-card-renderer.d.ts
 declare const textCardRenderer: BoardCardRenderer;
-declare function isTextItem(item: BoardItem): item is BoardTextItem;
 //#endregion
-export { isTextItem, textCardRenderer };
+export { textCardRenderer };

package/dist/board/render/renderers/text-card-renderer.js

@@ -1,38 +1,66 @@
-import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { pickBoardColor } from "../../core/palette.js";
-import { TEXT_FONT_SIZE, boardTextLineHeight, clampBoardTextFontSize, measureBoardText } from "../../core/text-metrics.js";
+import { layoutBoardText } from "../../../protocol/dist/board-layout.js";
+import { boardFontFamily } from "../../core/text-metrics.js";
 import { syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
-import { Container, Text } from "pixi.js";
+import { itemColor } from "../palette.js";
+import { BOARD_FONT_STACKS } from "../text-measurement.js";
+import { Container, Graphics, Text } from "pixi.js";
 //#region src/board/render/renderers/text-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
+function revealed(text, reveal) {
+	if (reveal >= 1) return text;
+	return [...text].slice(0, Math.round(text.length * Math.max(0, reveal))).join("");
+}
+function syncCaret(parts, item, context) {
+	const { props } = item;
+	const visible = props.caret && props.reveal < 1 && Math.floor(context.time / 500) % 2 === 0;
+	parts.caret.visible = visible;
+	if (!visible) return;
+	const anchorX = props.align === "center" ? .5 : props.align === "right" ? 1 : 0;
+	const x = parts.body.position.x + parts.body.width * (1 - anchorX) + 2;
+	parts.caret.clear().rect(x, 1, Math.max(1, 1.5 / Math.max(.25, context.zoom)), Math.max(12, parts.body.height - 2)).fill({ color: itemColor(context, item.style.fill, "neutral") });
+}
 function sync(container, item, context) {
 	const parts = partsByContainer.get(container);
 	if (!parts) return;
 	positionShell(parts.root, item);
-	const fontSize = clampBoardTextFontSize(item.fontSize);
-	const measured = measureBoardText(item.text, fontSize);
-	const previewScale = Math.max(1e-4, item.frame.width / Math.max(1e-4, measured.width));
+	const { props } = item;
+	const layout = layoutBoardText(props);
+	const previewScale = Math.max(1e-4, item.frame.width / Math.max(1e-4, layout.width));
 	parts.body.scale.set(previewScale);
-	parts.body.position.set(item.frame.width / 2, item.frame.height / 2);
+	const anchorX = props.align === "center" ? .5 : props.align === "right" ? 1 : 0;
+	parts.body.anchor.set(anchorX, 0);
+	parts.body.position.set(item.frame.width * anchorX, 0);
 	syncTextResolution(parts.body, parts, context.zoom * Math.max(1, previewScale));
-	const color = pickBoardColor(context.colors, item.color || "neutral", context.colorScheme);
-	const ink = item.color === "neutral" || !item.color ? context.palette.text : color.stroke;
+	const ink = itemColor(context, item.style.fill, "neutral");
+	const text = revealed(props.text, props.reveal);
 	const contentSig = [
-		item.text,
-		item.color,
-		fontSize,
-		context.colorScheme,
-		context.colors.brand.stroke,
-		context.palette.text
+		text,
+		ink,
+		props.fontSize,
+		props.fontWeight,
+		props.font,
+		props.align,
+		props.lineHeight,
+		props.width ?? ""
 	].join("|");
-	if (contentSig === parts.contentSig) return;
-	parts.contentSig = contentSig;
-	if (parts.body.text !== item.text) parts.body.text = item.text || "";
-	parts.body.style.fill = ink;
-	parts.body.style.fontSize = fontSize;
-	parts.body.style.lineHeight = boardTextLineHeight(fontSize);
+	if (contentSig !== parts.contentSig) {
+		parts.contentSig = contentSig;
+		parts.body.text = text;
+		Object.assign(parts.body.style, {
+			fill: ink,
+			fontSize: props.fontSize,
+			fontWeight: String(Math.round(props.fontWeight / 100) * 100),
+			fontFamily: boardFontFamily(props.font, BOARD_FONT_STACKS),
+			align: props.align,
+			lineHeight: layout.lineHeight,
+			wordWrap: Boolean(props.width),
+			wordWrapWidth: props.width ?? 0,
+			breakWords: true
+		});
+	}
+	syncCaret(parts, item, context);
 }
 const textCardRenderer = {
 	id: "text-card",
@@ -40,26 +68,18 @@ const textCardRenderer = {
 	create: (item, context) => {
 		const root = new Container();
 		const resolution = textResolutionForZoom(context.zoom);
-		const color = pickBoardColor(context.colors, item.type === "text" ? item.color || "neutral" : "neutral", context.colorScheme);
-		const ink = item.type === "text" && (item.color === "neutral" || !item.color) ? context.palette.text : color.stroke;
 		const body = new Text({
 			text: "",
-			style: {
-				fill: ink,
-				fontFamily: BOARD_FONT_STACK,
-				fontSize: TEXT_FONT_SIZE,
-				fontWeight: "500",
-				lineHeight: boardTextLineHeight(TEXT_FONT_SIZE),
-				wordWrap: false
-			},
+			style: { fontFamily: BOARD_FONT_STACKS.sans },
 			resolution,
 			roundPixels: true
 		});
-		body.anchor.set(.5);
-		root.addChild(body);
+		const caret = new Graphics();
+		root.addChild(body, caret);
 		partsByContainer.set(root, {
 			root,
 			body,
+			caret,
 			resolution,
 			contentSig: ""
 		});
@@ -69,17 +89,10 @@ const textCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "text") sync(container, item, context);
 	},
-	/**
-	* Far LOD: a low-alpha ink bar. Body text is well under a pixel tall at these
-	* zooms, so a rasterised glyph texture would only ever resolve to a smudge —
-	* this approximates that smudge for free and skips the texture entirely.
-	*/
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "text") return;
-		const color = pickBoardColor(context.colors, item.color || "neutral", context.colorScheme);
-		const ink = item.color === "neutral" || !item.color ? context.palette.text : color.stroke;
 		drawFarPlate(graphics, item.frame, {
-			fill: ink,
+			fill: itemColor(context, item.style.fill, "neutral"),
 			fillAlpha: .35
 		});
 	},
@@ -88,8 +101,5 @@ const textCardRenderer = {
 		partsByContainer.delete(container);
 	}
 };
-function isTextItem(item) {
-	return item.type === "text";
-}
 //#endregion
-export { isTextItem, textCardRenderer };
+export { textCardRenderer };

package/dist/board/render/renderers/unknown-card-renderer.js

@@ -1,5 +1,4 @@
 import { BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { unknownRealType } from "../../../protocol/dist/board-document.js";
 import { syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
@@ -7,18 +6,13 @@ import { Container, Graphics, Text } from "pixi.js";
 //#region src/board/render/renderers/unknown-card-renderer.ts
 const RADIUS = 10;
 const partsByContainer = /* @__PURE__ */ new WeakMap();
-/**
-* Neutral placeholder for shape types this client does not recognise. The shape
-* stays fully interactive (select/move/resize via the generic box definition) and
-* its data is preserved elsewhere — this is only its display.
-*/
 function sync(container, item, context) {
 	const parts = partsByContainer.get(container);
 	if (!parts) return;
 	positionShell(parts.root, item);
 	const { width, height } = item.frame;
 	const selected = context.selectedIds.has(item.id);
-	const realType = unknownRealType(item);
+	const realType = item.type;
 	syncTextResolution(parts.label, parts, context.zoom);
 	const visualSig = [
 		width,
@@ -56,7 +50,7 @@ function sync(container, item, context) {
 }
 const unknownCardRenderer = {
 	id: "unknown-card",
-	canRender: (item) => "raw" in item,
+	canRender: () => true,
 	create: (item, context) => {
 		const root = new Container();
 		const box = new Graphics();
@@ -81,11 +75,11 @@ const unknownCardRenderer = {
 			textSig: "",
 			resolution
 		});
-		if ("raw" in item) sync(root, item, context);
+		sync(root, item, context);
 		return root;
 	},
 	update: (container, item, context) => {
-		if ("raw" in item) sync(container, item, context);
+		sync(container, item, context);
 	},
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {

package/dist/board/render/renderers/video-card-renderer.d.ts

@@ -1,7 +1,9 @@
-import { BoardItem, BoardVideoItem } from "../../../protocol/dist/board-document.js";
+import { BoardVideoItem } from "../../../protocol/dist/board-model.js";
+import "../../../protocol/dist/index.js";
+import { BoardSceneItem, SceneItem } from "../../core/scene.js";
 import { BoardCardRenderer } from "./board-renderer-registry.js";
 //#region src/board/render/renderers/video-card-renderer.d.ts
 declare const videoCardRenderer: BoardCardRenderer;
-declare function isVideoItem(item: BoardItem): item is BoardVideoItem;
+declare function isVideoItem(item: BoardSceneItem): item is SceneItem<BoardVideoItem>;
 //#endregion
 export { isVideoItem, videoCardRenderer };

package/dist/board/render/renderers/video-card-renderer.js

@@ -23,7 +23,7 @@ function sync(container, item, context) {
 	const selected = context.selectedIds.has(item.id);
 	const hovered = context.hoveredId === item.id;
 	const resizing = context.resizingIds.has(item.id);
-	const title = item.snapshot?.title ?? item.ref.path.split("/").pop() ?? "Video";
+	const title = item.props.snapshot?.title ?? item.props.src.split("/").pop() ?? "Video";
 	const key = context.assetKey(item);
 	const texture = key ? context.getTexture(key) : null;
 	const failed = Boolean(key && !texture && context.hasError(key));
@@ -40,6 +40,7 @@ function sync(container, item, context) {
 		hovered,
 		failed,
 		title,
+		item.props.time ?? 0,
 		parts.label.height,
 		context.palette.surface,
 		context.palette.brand,

package/dist/board/render/sketch-host.d.ts

@@ -0,0 +1,14 @@
+import { BoardSketchHost } from "./renderers/board-renderer-registry.js";
+//#region src/board/render/sketch-host.d.ts
+type BoardSketchHostOptions = {
+  readModule: (src: string) => Promise<string>;
+  onFrame?: () => void;
+  timeoutMs?: number;
+};
+type BrowserBoardSketchHost = BoardSketchHost & {
+  invalidate: (src?: string) => void;
+  destroy: () => void;
+};
+declare function createBoardSketchHost(options: BoardSketchHostOptions): BrowserBoardSketchHost;
+//#endregion
+export { BoardSketchHostOptions, BrowserBoardSketchHost, createBoardSketchHost };

package/dist/board/render/sketch-host.js

@@ -0,0 +1,216 @@
+import { Texture } from "pixi.js";
+//#region src/board/render/sketch-host.ts
+const MAX_EDGE = 2048;
+const FRAME_SOURCE = `<!doctype html><meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline' blob:; worker-src blob:">
+<script>
+const workerUrl = URL.createObjectURL(new Blob([${JSON.stringify(`
+const modules = new Map();
+for (const name of ["fetch", "XMLHttpRequest", "WebSocket", "EventSource", "importScripts", "indexedDB", "caches"]) {
+  try { Object.defineProperty(self, name, { value: undefined, configurable: false }); } catch {}
+}
+self.onmessage = async (event) => {
+  const { id, src, code, t, width, height, scale, seed, params, request } = event.data;
+  try {
+    let entry = modules.get(id);
+    if (!entry || entry.code !== code) {
+      const url = URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
+      try { entry = { code, module: await import(url) }; } finally { URL.revokeObjectURL(url); }
+      modules.set(id, entry);
+    }
+    if (typeof entry.module.draw !== "function") throw new Error(src + " does not export draw(ctx, frame)");
+    const canvas = new OffscreenCanvas(Math.max(1, Math.round(width * scale)), Math.max(1, Math.round(height * scale)));
+    const ctx = canvas.getContext("2d");
+    ctx.scale(scale, scale);
+    await entry.module.draw(ctx, { t, width, height, seed, params });
+    const bitmap = canvas.transferToImageBitmap();
+    self.postMessage({ id, request, bitmap }, [bitmap]);
+  } catch (error) {
+    self.postMessage({ id, request, error: String(error && error.message || error) });
+  }
+};
+`)}], { type: "text/javascript" }));
+const makeWorker = () => {
+  const next = new Worker(workerUrl, { type: "module" });
+  next.onmessage = (event) => parent.postMessage(event.data, "*", event.data.bitmap ? [event.data.bitmap] : []);
+  return next;
+};
+let worker = makeWorker();
+addEventListener("message", (event) => {
+  if (event.source !== parent) return;
+  if (event.data?.reset) {
+    worker.terminate();
+    worker = makeWorker();
+    return;
+  }
+  worker.postMessage(event.data);
+});
+parent.postMessage({ ready: true }, "*");
+<\/script>`;
+function frameKey(item, time, width, height, scale) {
+	return `${time}|${width}|${height}|${scale}|${item.props.seed ?? ""}|${JSON.stringify(item.props.params)}`;
+}
+function createBoardSketchHost(options) {
+	const timeoutMs = options.timeoutMs ?? 2e3;
+	const entries = /* @__PURE__ */ new Map();
+	const sources = /* @__PURE__ */ new Map();
+	const iframe = document.createElement("iframe");
+	iframe.setAttribute("sandbox", "allow-scripts");
+	iframe.setAttribute("aria-hidden", "true");
+	iframe.style.cssText = "position:fixed;width:0;height:0;border:0;visibility:hidden";
+	iframe.srcdoc = FRAME_SOURCE;
+	let ready = false;
+	const queue = [];
+	const post = (message) => {
+		if (ready) iframe.contentWindow?.postMessage(message, "*");
+		else queue.push(message);
+	};
+	const resetWorker = () => {
+		for (const entry of entries.values()) {
+			if (entry.pending === null) continue;
+			if (entry.timeout) clearTimeout(entry.timeout);
+			entry.timeout = null;
+			entry.pending = null;
+			entry.shown = "";
+			entry.request += 1;
+		}
+		post({ reset: true });
+	};
+	const onMessage = (event) => {
+		if (event.source !== iframe.contentWindow) return;
+		const data = event.data;
+		if (data.ready) {
+			ready = true;
+			for (const message of queue.splice(0)) iframe.contentWindow?.postMessage(message, "*");
+			return;
+		}
+		const entry = data.id ? entries.get(data.id) : void 0;
+		if (!entry || data.request !== entry.request) {
+			data.bitmap?.close();
+			return;
+		}
+		if (data.bitmap) {
+			if (entry.timeout) clearTimeout(entry.timeout);
+			entry.timeout = null;
+			entry.texture?.destroy(true);
+			entry.texture = Texture.from(data.bitmap);
+			entry.error = null;
+		} else {
+			if (entry.timeout) clearTimeout(entry.timeout);
+			entry.timeout = null;
+			entry.error = data.error ?? "Sketch failed.";
+		}
+		entry.shown = entry.pending ?? entry.shown;
+		entry.pending = null;
+		options.onFrame?.();
+	};
+	window.addEventListener("message", onMessage);
+	document.body.appendChild(iframe);
+	function source(src) {
+		let promise = sources.get(src);
+		if (!promise) {
+			promise = options.readModule(src);
+			sources.set(src, promise);
+			promise.catch(() => sources.delete(src));
+		}
+		return promise;
+	}
+	return {
+		frame(item, time, resolution) {
+			let entry = entries.get(item.id);
+			if (!entry) {
+				entry = {
+					texture: null,
+					error: null,
+					shown: "",
+					pending: null,
+					request: 0,
+					code: null,
+					loading: false,
+					timeout: null,
+					sourceError: null
+				};
+				entries.set(item.id, entry);
+			}
+			const { width, height } = item.frame;
+			const scale = Math.min(resolution, MAX_EDGE / Math.max(1, width), MAX_EDGE / Math.max(1, height));
+			const key = frameKey(item, time, width, height, scale);
+			if (key !== entry.shown && entry.pending === null) {
+				const current = entry;
+				if (current.code === null) {
+					if (!current.sourceError && !current.loading) {
+						current.loading = true;
+						source(item.props.src).then((code) => {
+							current.code = code;
+							current.sourceError = null;
+							current.loading = false;
+							options.onFrame?.();
+						}, (error) => {
+							current.loading = false;
+							current.sourceError = error instanceof Error ? error.message : String(error);
+							current.error = current.sourceError;
+							options.onFrame?.();
+						});
+					}
+				} else {
+					current.pending = key;
+					current.request += 1;
+					const request = current.request;
+					current.timeout = setTimeout(() => {
+						if (current.request !== request || current.pending !== key) return;
+						resetWorker();
+						current.shown = key;
+						current.pending = null;
+						current.timeout = null;
+						current.error = `${item.props.src} exceeded the ${timeoutMs}ms sketch timeout.`;
+						options.onFrame?.();
+					}, timeoutMs);
+					post({
+						id: item.id,
+						src: item.props.src,
+						code: current.code,
+						t: time,
+						width,
+						height,
+						scale,
+						seed: item.props.seed ?? item.id,
+						params: item.props.params,
+						request: current.request
+					});
+				}
+			}
+			return entry.texture;
+		},
+		error: (id) => entries.get(id)?.error ?? null,
+		release(id) {
+			const entry = entries.get(id);
+			if (entry?.timeout) clearTimeout(entry.timeout);
+			entry?.texture?.destroy(true);
+			entries.delete(id);
+		},
+		invalidate(src) {
+			if (src) sources.delete(src);
+			else sources.clear();
+			for (const entry of entries.values()) {
+				entry.code = null;
+				entry.sourceError = null;
+				entry.pending = null;
+				entry.request += 1;
+				if (entry.timeout) clearTimeout(entry.timeout);
+				entry.timeout = null;
+				entry.shown = "";
+			}
+			options.onFrame?.();
+		},
+		destroy() {
+			window.removeEventListener("message", onMessage);
+			for (const entry of entries.values()) {
+				if (entry.timeout) clearTimeout(entry.timeout);
+				entry.texture?.destroy(true);
+			}
+			entries.clear();
+			iframe.remove();
+		}
+	};
+}
+//#endregion
+export { createBoardSketchHost };