@neta-art/cohub 12.2.0 → 12.4.0

package/dist/board/stage/stage.js

@@ -1,6 +1,6 @@
 import { featuredTaskArtifact } from "../../protocol/dist/board-task.js";
 import { applyMatrix, invertMatrix } from "../../protocol/dist/board-layout.js";
-import { pointToWorld, screenPoint, stableCullRect, visibleWorldRect, worldPoint } from "../model/geometry.js";
+import { itemBounds, pointToWorld, rectsIntersect, screenPoint, stableCullRect, visibleWorldRect, worldPoint } from "../model/geometry.js";
 import { boardScriptScope, composeBoardScriptItems, prepareBoardScriptOutput, validateBoardScriptCommit } from "../model/script-scene.js";
 import { boardScriptTarget } from "../model/script-hit.js";
 import { createBoardAnimationSampler, resolveBoardAnimationCamera } from "../model/sampling.js";
@@ -13,20 +13,25 @@ import { resizeCursorForHandle } from "../editor/selection-transform.js";
 import { parseBoardCssColor } from "../render/css-color.js";
 import { itemAlpha } from "../render/palette.js";
 import { onBoardTextFontsChange } from "../render/text-measurement.js";
+import { boardLodRatio, boardLodSize } from "../render/lod.js";
 import { createBoardBackground, updateBoardBackground } from "../render/board-background.js";
 import { getBoardResolution } from "../render/text-resolution.js";
 import { DEFAULT_BOARD_RENDER_LABELS, getBoardCardRenderer } from "../render/renderers/board-renderer-registry.js";
 import { createBoardScriptHost } from "../render/script-host.js";
 import { defaultBoardRenderStyle } from "../render/style.js";
 import { boardRenderTheme } from "../render/theme.js";
-import { createBoardScriptObservers } from "../model/script-observers.js";
 import { createBoardPlayer } from "../player/index.js";
+import { createBoardScriptObservers } from "../model/script-observers.js";
+import { defaultBoardDeviceBudget } from "./device.js";
+import { scheduleBoardIdle } from "./idle.js";
 import { boardCanvasSize, measureBoardCanvasBox } from "./canvas-size.js";
 import { observeDisplayDensity } from "./display-density.js";
+import { createBoardFrameClock } from "./frame-budget.js";
 import { toBoardPointerEvent } from "./pointer.js";
 import { createBoardPointerGestures } from "./pointer-gestures.js";
 import { createBoardScene } from "./scene.js";
 import { scheduleBoardMaintenance } from "./maintenance.js";
+import { boardStagePress, createBoardLongPress, createGhostClickGuard } from "./presses.js";
 import { createBoardScriptPointerRouter } from "./script-pointer.js";
 import { drawBoardOverlay } from "./overlay.js";
 import { createTextResolutionTracker } from "./text-resolution-tracker.js";
@@ -55,6 +60,15 @@ const TEXTURE_SETTLE_MS = 150;
 const ADOPT_PIXELS_PER_FRAME = 4194304;
 const LOAD_LEAD_MS = 300;
 const CULL_PADDING = 96;
+const PREFETCH_REST_MS = 200;
+const PREFETCH_LIMIT = 96;
+const FRAME_SAMPLES = 120;
+const ANTIALIAS_MAX_DENSITY = 3;
+const FRAME_SYNC = 1;
+const FRAME_RENDER = 2;
+const FRAME_CARDS = 4;
+const FRAME_SCRIPTS = 8;
+const FRAME_RESIZE = 16;
 const ROTATE_CURSOR = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36L21 8M21 3v5h-5' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36L21 8M21 3v5h-5' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, crosshair`;
 const defaultStyles = /* @__PURE__ */ new Map();
 function styleOf(theme) {
@@ -106,14 +120,23 @@ function mountBoardStage(host, options) {
 	let stopDensity = null;
 	let active = true;
 	let disposed = false;
-	let renderFrame = 0;
-	let tickFrame = 0;
-	let scriptTickFrame = 0;
-	let cardTickFrame = 0;
+	let frameHandle = 0;
+	let frameWork = 0;
+	let inFrame = false;
+	let chained = false;
+	const clock = createBoardFrameClock();
+	const device = defaultBoardDeviceBudget();
+	const currentLod = () => options.lod?.() ?? device.lod;
+	const frameTimes = new Float32Array(FRAME_SAMPLES);
+	let frameCount = 0;
+	let frameCamera = null;
 	let cardTickTimer = null;
 	let cardTickDue = 0;
+	let prefetchKey = "";
+	let prefetchMovedAt = 0;
+	let prefetchContext = null;
+	let cancelPrefetch = null;
 	const staleIds = /* @__PURE__ */ new Set();
-	let resizeFrame = 0;
 	let canvasBox = null;
 	let cardEpoch = 0;
 	let fontEpoch = 0;
@@ -124,8 +147,15 @@ function mountBoardStage(host, options) {
 	};
 	let playbackCamera = null;
 	let cursor = "";
+	let lastContext = null;
+	let hoveredHit = null;
+	const ghostClicks = createGhostClickGuard(host.ownerDocument.defaultView);
+	const longPress = createBoardLongPress((press) => {
+		const item = editor.itemAt(pointToWorld(localPoint(press.clientX, press.clientY), renderCamera()));
+		if (item) options.onLongPress?.(item, press);
+	});
 	const renderCamera = () => playbackCamera ?? editor.camera;
-	const views = createBoardItemViewLayer(host, editor, options.views ?? [], renderCamera, scheduleTick);
+	const views = createBoardItemViewLayer(host, editor, options.views ?? [], renderCamera, scheduleTick, options.viewLayer);
 	const player = createBoardPlayer({ resolveColor: (color) => {
 		const current = theme();
 		return {
@@ -206,6 +236,7 @@ function mountBoardStage(host, options) {
 		};
 	}
 	const arrivals = /* @__PURE__ */ new Set();
+	const toned = /* @__PURE__ */ new Set();
 	function adoptArrivals() {
 		let pixels = 0;
 		for (const key of arrivals) {
@@ -298,13 +329,15 @@ function mountBoardStage(host, options) {
 			assetKey: assets.assetKey,
 			getTexture: (key) => assets.getTexture(key),
 			hasError: (key) => assets.hasError(key),
+			assetTone: (key) => assets.getTone(key),
 			fileState: (path) => options.fileState?.(path) ?? "ok",
 			acquireTexture: (key, item) => {
 				assets.acquire(key);
 				assets.requestItem(item, boardTextureEdge(item, textureScale()));
 				if (assets.getTexture(key)) naturalIds.add(item.id);
 			},
-			releaseTexture: (key) => assets.release(key)
+			releaseTexture: (key) => assets.release(key),
+			hoveredHit
 		};
 	}
 	function syncBackground(current) {
@@ -474,6 +507,37 @@ function mountBoardStage(host, options) {
 		if (style.selection.dash > 0 && selected.length > 0 && !(options.reducedMotion?.() ?? false)) scheduleMarch(style);
 		else stopMarch();
 	}
+	function opensOnTap(item) {
+		return !editor.selection.includes(item.id) && editor.registry.activation(item) === "tap";
+	}
+	function hitAt(item, point) {
+		if (!lastContext || !scene?.getNode(item.id)) return null;
+		const hit = resolveRenderer(item, lastContext).hitAt?.(item, point, lastContext);
+		return hit && (options.handlesHit?.(item, hit.action) ?? true) ? hit : null;
+	}
+	function hoverHit(input) {
+		if (!options.onHit) return;
+		const item = input && editor.interaction.type === "idle" && editor.hoverId ? editor.itemById(editor.hoverId) : null;
+		const hit = item && input ? hitAt(item, input.world) : null;
+		const next = item && hit ? {
+			itemId: item.id,
+			action: hit.action,
+			cursor: hit.cursor ?? "pointer"
+		} : null;
+		if (next?.itemId === hoveredHit?.itemId && next?.action === hoveredHit?.action) return;
+		for (const id of [hoveredHit?.itemId, next?.itemId]) if (id) staleIds.add(id);
+		hoveredHit = next;
+		scheduleTick();
+	}
+	function pressHit(event, input) {
+		if (!options.onHit || event.button !== 0) return false;
+		const item = editor.itemAt(input.world);
+		const hit = item ? hitAt(item, input.world) : null;
+		if (!item || !hit || options.onHit(item, hit.action, boardStagePress(event)) === false) return false;
+		event.preventDefault();
+		if (event.pointerType !== "mouse") ghostClicks.arm();
+		return true;
+	}
 	function cursorFor() {
 		if (scriptMode === "interact" && scriptHover) {
 			const output = scriptOutputs.get(scriptHover.owner);
@@ -488,49 +552,191 @@ function mountBoardStage(host, options) {
 			case "draggingArrowHandle":
 			case "brushing": return "crosshair";
 		}
-		if (editor.spaceHeld || editor.tool === "hand") return "grab";
+		if (interaction.type === "pressing") return "pointer";
+		if (editor.spaceHeld) return "grab";
+		if (hoveredHit) return hoveredHit.cursor;
 		const control = editor.hoveredTransformControl;
 		if (control?.kind === "resize") return resizeCursorForHandle(control.handle, editor.selectionTransform?.frame.rotation ?? 0);
 		if (control?.kind === "rotate") return ROTATE_CURSOR;
-		if (isCreationBoardTool(editor.tool)) return "crosshair";
 		const hovered = editor.hoverId ? editor.itemById(editor.hoverId) : null;
+		if (hovered && (editor.tool === "select" || editor.tool === "hand") && opensOnTap(hovered)) return "pointer";
+		if (editor.tool === "hand") return "grab";
+		if (isCreationBoardTool(editor.tool)) return "crosshair";
 		return hovered && !hovered.locked && editor.registry.capabilities(hovered).canMove ? "move" : "default";
 	}
+	function requestFrame(work) {
+		if (!active || disposed) return;
+		frameWork |= work;
+		if (!frameHandle && !inFrame) {
+			chained = false;
+			frameHandle = requestAnimationFrame(runFrame);
+		}
+	}
+	function cancelFrames() {
+		cancelAnimationFrame(frameHandle);
+		frameHandle = 0;
+		frameWork = 0;
+		if (cardTickTimer !== null) clearTimeout(cardTickTimer);
+		cardTickTimer = null;
+	}
+	function runFrame(now) {
+		frameHandle = 0;
+		if (!app) return;
+		const start = performance.now();
+		let work = frameWork;
+		frameWork = 0;
+		inFrame = true;
+		try {
+			const camera = renderCamera();
+			const moving = editor.gestureActive || !frameCamera || camera.x !== frameCamera.x || camera.y !== frameCamera.y || camera.zoom !== frameCamera.zoom;
+			frameCamera = camera;
+			clock.begin(now, {
+				moving,
+				chained
+			});
+			if (work & FRAME_RESIZE && !applyResize()) work &= -17;
+			const synced = Boolean(work & 17);
+			if (synced) sync();
+			else if (work & FRAME_SCRIPTS) {
+				syncScripts();
+				if (scriptMode !== "paused" && scripts?.animated) frameWork |= FRAME_SCRIPTS;
+			}
+			if (work & FRAME_CARDS && !synced && scene) {
+				const next = scene.tick(performance.now());
+				work |= FRAME_RENDER;
+				if (next !== null) scheduleCardTick(next);
+			}
+			if ((work | frameWork) & FRAME_RENDER) {
+				frameWork &= -3;
+				app.render();
+			}
+		} finally {
+			inFrame = false;
+			frameTimes[frameCount++ % FRAME_SAMPLES] = performance.now() - start;
+			if (frameWork && active && !disposed) {
+				chained = true;
+				frameHandle = requestAnimationFrame(runFrame);
+			}
+		}
+	}
+	function waitingCards() {
+		if (!scene || surface.width === 0) return 0;
+		const view = visibleWorldRect(renderCamera(), surface.width, surface.height);
+		let waiting = 0;
+		for (const id of scene.liveIds()) {
+			const item = editor.scene.get(id);
+			const key = item && assets.assetKey(item);
+			if (key && !assets.hasError(key) && !assets.getTexture(key) && rectsIntersect(itemBounds(item.frame), view)) waiting += 1;
+		}
+		return waiting;
+	}
+	function frameStats() {
+		const samples = Array.from(frameTimes.subarray(0, Math.min(frameCount, FRAME_SAMPLES))).sort((a, b) => a - b);
+		const at = (ratio) => samples[Math.min(samples.length - 1, Math.floor(samples.length * ratio))] ?? 0;
+		return {
+			p50: at(.5),
+			p95: at(.95),
+			max: samples.at(-1) ?? 0
+		};
+	}
 	function scheduleRender() {
-		if (renderFrame || !app || !active) return;
-		renderFrame = requestAnimationFrame(() => {
-			renderFrame = 0;
-			app?.render();
-		});
+		requestFrame(FRAME_RENDER);
+	}
+	function scheduleTick() {
+		requestFrame(FRAME_SYNC);
+	}
+	function scheduleScriptTick() {
+		requestFrame(FRAME_SCRIPTS);
+	}
+	function resize() {
+		requestFrame(FRAME_RESIZE);
+	}
+	function flushResize() {
+		if (!active || disposed) return;
+		cancelAnimationFrame(frameHandle);
+		frameWork |= FRAME_RESIZE;
+		chained = false;
+		runFrame(performance.now());
+		chained = false;
 	}
 	function scheduleCardTick(wait) {
 		if (!active || disposed) return;
 		const due = performance.now() + wait;
-		if (cardTickFrame || cardTickTimer !== null && cardTickDue <= due) return;
+		if (frameWork & FRAME_CARDS || cardTickTimer !== null && cardTickDue <= due) return;
 		if (cardTickTimer !== null) clearTimeout(cardTickTimer);
 		cardTickTimer = null;
 		if (wait > 0) {
 			cardTickDue = due;
 			cardTickTimer = setTimeout(() => {
 				cardTickTimer = null;
-				scheduleCardTick(0);
+				requestFrame(FRAME_CARDS);
 			}, wait);
 			return;
 		}
-		cardTickFrame = requestAnimationFrame(() => {
-			cardTickFrame = 0;
-			if (!scene) return;
-			const next = scene.tick(performance.now());
-			scheduleRender();
-			if (next !== null) scheduleCardTick(next);
-		});
+		requestFrame(FRAME_CARDS);
 	}
-	function scheduleTick() {
-		if (tickFrame || !active || disposed) return;
-		tickFrame = requestAnimationFrame(() => {
-			tickFrame = 0;
-			sync();
-		});
+	function schedulePrefetch(camera, context) {
+		const margin = assets.prefetch ? options.prefetch ?? device.prefetch : 0;
+		if (margin <= 0 || surface.width === 0 || surface.height === 0) return;
+		const key = `${camera.x}|${camera.y}|${camera.zoom}|${surface.width}|${surface.height}|${editor.structureVersion}`;
+		if (key === prefetchKey) return;
+		prefetchKey = key;
+		prefetchContext = context;
+		prefetchMovedAt = performance.now();
+		if (!cancelPrefetch) awaitRest(margin, PREFETCH_REST_MS);
+	}
+	function awaitRest(margin, delay) {
+		cancelPrefetch = scheduleBoardIdle(() => {
+			cancelPrefetch = null;
+			const remaining = PREFETCH_REST_MS - (performance.now() - prefetchMovedAt);
+			if (remaining > 0) awaitRest(margin, remaining);
+			else if (prefetchContext) prefetch(margin, prefetchContext);
+		}, delay);
+	}
+	function stopPrefetch() {
+		cancelPrefetch?.();
+		cancelPrefetch = null;
+		prefetchKey = "";
+		prefetchContext = null;
+		assets.prefetch?.([]);
+	}
+	function prefetch(margin, context) {
+		if (!scene || !active || disposed) return;
+		if (editor.gestureActive) {
+			prefetchKey = "";
+			return;
+		}
+		const camera = renderCamera();
+		const view = visibleWorldRect(camera, surface.width, surface.height);
+		const culled = stableCullRect(view);
+		const padX = view.width * margin;
+		const padY = view.height * margin;
+		const ring = {
+			x: culled.x - padX,
+			y: culled.y - padY,
+			width: culled.width + padX * 2,
+			height: culled.height + padY * 2
+		};
+		const centerX = view.x + view.width / 2;
+		const centerY = view.y + view.height / 2;
+		const lod = currentLod();
+		const scale = textureScale();
+		const wanted = [];
+		for (const id of editor.idsInRect(ring)) {
+			const item = editor.scene.get(id);
+			if (!item || rectsIntersect(itemBounds(item.frame), culled)) continue;
+			const renderer = resolveRenderer(item, context);
+			if (renderer.renderFar && boardLodRatio(renderer, boardLodSize(renderer, item), camera.zoom, lod) < 1) continue;
+			const { frame } = item;
+			const distance = (frame.x + frame.width / 2 - centerX) ** 2 + (frame.y + frame.height / 2 - centerY) ** 2;
+			wanted.push({
+				item,
+				edge: boardTextureEdge(item, scale),
+				distance
+			});
+		}
+		wanted.sort((a, b) => a.distance - b.distance);
+		assets.prefetch?.(wanted.slice(0, PREFETCH_LIMIT));
 	}
 	function cancelScriptPointers(owner, retained) {
 		scriptPointers.cancelScripts((pointerId, target) => {
@@ -559,15 +765,6 @@ function mountBoardStage(host, options) {
 		}));
 		scripts.sync(editor.document, editor.scene, camera, scriptTime, scriptMode === "interact", visibleIds());
 	}
-	function scheduleScriptTick() {
-		if (scriptTickFrame || !active || disposed) return;
-		scriptTickFrame = requestAnimationFrame(() => {
-			scriptTickFrame = 0;
-			if (tickFrame) return;
-			syncScripts();
-			if (scriptMode !== "paused" && scripts?.animated) scheduleScriptTick();
-		});
-	}
 	function createScripts() {
 		return createBoardScriptHost({
 			host,
@@ -686,8 +883,13 @@ function mountBoardStage(host, options) {
 		const center = pointToWorld(screenPoint(surface.width / 2, surface.height / 2), camera);
 		assets.focus(loadFocus(center, camera));
 		adoptArrivals();
+		if (toned.size > 0) {
+			scene?.repaintFar(toned, assets.assetKey);
+			toned.clear();
+		}
 		textResolution.update(textureScale());
 		const context = renderContext(current, renderScene, frame.time);
+		lastContext = context;
 		if (animationId && effectSampler) {
 			context.time = editor.playhead?.time ?? frame.time;
 			context.frameAt = effectSampler.frameAt;
@@ -723,9 +925,11 @@ function mountBoardStage(host, options) {
 			gestureActive: editor.gestureActive && editor.interaction.type !== "panning",
 			focus: center,
 			view: ids ? cullView(camera) : void 0,
-			lod: options.lod?.()
+			lod: currentLod(),
+			budget: clock
 		});
 		staleIds.clear();
+		schedulePrefetch(camera, context);
 		if (scene.liveVersion !== liveVersion) {
 			liveVersion = scene.liveVersion;
 			options.onLiveChange?.(scene.liveIds());
@@ -749,29 +953,26 @@ function mountBoardStage(host, options) {
 		const cardWait = scene.tick(performance.now());
 		if (cardWait !== null) scheduleCardTick(cardWait);
 	}
-	function resize() {
-		cancelAnimationFrame(resizeFrame);
-		resizeFrame = requestAnimationFrame(() => {
-			if (!app || !active) return;
-			const size = {
-				width: host.clientWidth,
-				height: host.clientHeight
-			};
-			if (size.width <= 0 || size.height <= 0) return;
-			const density = host.ownerDocument.defaultView?.devicePixelRatio ?? 1;
-			const canvas = boardCanvasSize(canvasBox ?? {
-				...size,
-				density,
-				device: null
-			}, density);
-			if (canvas.width !== app.screen.width || canvas.height !== app.screen.height || canvas.resolution !== app.renderer.resolution) app.renderer.resize(canvas.width, canvas.height, canvas.resolution);
-			if (size.width !== surface.width || size.height !== surface.height) {
-				surface = size;
-				editor.surfaceSize = surface;
-				options.onSurfaceChange?.(surface);
-			}
-			sync();
-		});
+	function applyResize() {
+		if (!app) return false;
+		const size = {
+			width: host.clientWidth,
+			height: host.clientHeight
+		};
+		if (size.width <= 0 || size.height <= 0) return false;
+		const density = host.ownerDocument.defaultView?.devicePixelRatio ?? 1;
+		const canvas = boardCanvasSize(canvasBox ?? {
+			...size,
+			density,
+			device: null
+		}, density);
+		if (canvas.width !== app.screen.width || canvas.height !== app.screen.height || canvas.resolution !== app.renderer.resolution) app.renderer.resize(canvas.width, canvas.height, canvas.resolution);
+		if (size.width !== surface.width || size.height !== surface.height) {
+			surface = size;
+			editor.surfaceSize = surface;
+			options.onSurfaceChange?.(surface);
+		}
+		return true;
 	}
 	const localPoint = (x, y) => elementClientToLocal(host)(x, y);
 	const inViews = (event) => event.target instanceof Node && views.element.contains(event.target);
@@ -853,8 +1054,11 @@ function mountBoardStage(host, options) {
 			return;
 		}
 		if (options.onPointer?.("down", event, input) === false) return;
+		if (pressHit(event, input)) return;
 		pointers.start(event);
 		editor.pointerDown(input);
+		if (options.onLongPress && editor.itemAt(input.world)) longPress.start(event);
+		else longPress.cancel();
 	}
 	function handlePointerMove(event) {
 		if (!active || pointers.has(event.pointerId) || inViews(event)) return;
@@ -863,21 +1067,28 @@ function mountBoardStage(host, options) {
 	function routePointerMove(event) {
 		const input = toInput(event);
 		if (scriptPointer("move", event, input)) return;
+		longPress.move(event);
 		if (options.onPointer?.("move", event, input) === false) return;
 		editor.pointerMove(input);
+		hoverHit(input);
 	}
 	function handlePointerUp(event) {
 		const input = toInput(event);
 		if (scriptPointer("up", event, input)) return;
+		longPress.end(event);
 		if (options.onPointer?.("up", event, input) === false) return;
 		editor.pointerUp(input);
-		if (event.type === "pointercancel" || event.pointerType !== "mouse") editor.pointerLeave();
+		if (event.type === "pointercancel" || event.pointerType !== "mouse") {
+			editor.pointerLeave();
+			hoverHit(null);
+		}
 	}
 	function handlePointerLeave(event) {
 		if (event.buttons !== 0) return;
 		scriptPointer("leave", event, toInput(event));
 		if (options.onPointer?.("leave", event, toInput(event)) === false) return;
 		editor.pointerLeave();
+		hoverHit(null);
 	}
 	function handleWheel(event) {
 		if (inViews(event)) return;
@@ -896,7 +1107,7 @@ function mountBoardStage(host, options) {
 			return;
 		}
 		if (item && item.type !== "frame" && item.type !== "arrow") return;
-		const label = editor.labelItemAt(point);
+		const label = editor.labelItemAt(point, styleOf(theme()).frameLabelSize);
 		if (label) editor.editingId = label.id;
 		else if (!item) editor.beginTextDraft(point);
 	}
@@ -914,27 +1125,40 @@ function mountBoardStage(host, options) {
 		["dblclick", handleDoubleClick]
 	];
 	const stopEditor = editor.subscribe(LIVE_CHANNELS, scheduleTick);
+	const stopActivations = editor.subscribeActivations(({ itemId, pointerType, selected }) => {
+		const item = editor.itemById(itemId);
+		if (!item || !options.onActivate) return;
+		if (pointerType !== "mouse") ghostClicks.arm();
+		options.onActivate(item, {
+			itemId,
+			pointerType,
+			selected
+		});
+	});
 	const stopFonts = onBoardTextFontsChange(() => {
 		editor.relayoutText();
 		fontEpoch += 1;
 		scene?.redrawText();
 		scheduleTick();
 	});
-	const stopAssets = assets.subscribe((key) => {
-		arrivals.add(key);
+	const stopAssets = assets.subscribe((key, change) => {
+		if (change === "texture") arrivals.add(key);
+		else if (scene?.counts().far) toned.add(key);
+		else return;
 		scheduleTick();
 	});
 	const resizeObserver = new ResizeObserver((entries) => {
 		const entry = entries[entries.length - 1];
 		if (entry) canvasBox = measureBoardCanvasBox(entry, host.ownerDocument.defaultView?.devicePixelRatio ?? 1);
-		resize();
+		flushResize();
 	});
 	return {
 		ready: (async () => {
 			const instance = new Application();
+			const density = host.ownerDocument.defaultView?.devicePixelRatio ?? 1;
 			try {
 				await instance.init({
-					antialias: true,
+					antialias: density < ANTIALIAS_MAX_DENSITY,
 					backgroundAlpha: 0,
 					width: host.clientWidth,
 					height: host.clientHeight,
@@ -1042,16 +1266,8 @@ function mountBoardStage(host, options) {
 				stopMarch();
 				stopRefine();
 				cancelScriptPointers();
-				cancelAnimationFrame(scriptTickFrame);
-				scriptTickFrame = 0;
-				cancelAnimationFrame(renderFrame);
-				cancelAnimationFrame(tickFrame);
-				cancelAnimationFrame(cardTickFrame);
-				if (cardTickTimer !== null) clearTimeout(cardTickTimer);
-				renderFrame = 0;
-				tickFrame = 0;
-				cardTickFrame = 0;
-				cardTickTimer = null;
+				cancelFrames();
+				stopPrefetch();
 				return;
 			}
 			player.reset();
@@ -1065,7 +1281,7 @@ function mountBoardStage(host, options) {
 		},
 		isMaterialized: (id) => Boolean(scene?.getNode(id)),
 		stats() {
-			const { textures, cooling, bytes } = assets.stats();
+			const { textures, cooling, bytes, loading, prefetching } = assets.stats();
 			return {
 				...scene?.counts() ?? {
 					live: 0,
@@ -1073,7 +1289,13 @@ function mountBoardStage(host, options) {
 				},
 				textures,
 				cooling,
-				textureBytes: bytes
+				textureBytes: bytes,
+				loading: loading ?? 0,
+				prefetching: prefetching ?? 0,
+				waiting: waitingCards(),
+				settling: scene?.settling ?? false,
+				frame: frameStats(),
+				interval: clock.interval
 			};
 		},
 		toWorld: (clientX, clientY) => pointToWorld(localPoint(clientX, clientY), renderCamera()),
@@ -1090,16 +1312,14 @@ function mountBoardStage(host, options) {
 			stopMaintenance?.();
 			stopDensity?.();
 			stopEditor();
+			stopActivations();
+			longPress.cancel();
+			ghostClicks.dispose();
 			stopFonts();
 			stopAssets();
 			resizeObserver.disconnect();
-			cancelAnimationFrame(scriptTickFrame);
-			cancelAnimationFrame(resizeFrame);
-			cancelAnimationFrame(renderFrame);
-			cancelAnimationFrame(tickFrame);
-			cancelAnimationFrame(cardTickFrame);
-			if (cardTickTimer !== null) clearTimeout(cardTickTimer);
-			cardTickTimer = null;
+			cancelFrames();
+			stopPrefetch();
 			for (const [type, listener] of listeners) host.removeEventListener(type, listener);
 			editor.setPlayedItems(/* @__PURE__ */ new Map());
 			editor.setScriptItems(/* @__PURE__ */ new Map());

package/dist/board/stage/texture-pool.d.ts

@@ -8,12 +8,14 @@ type BoardImageTexturePool = {
 declare function loadBoardImageTexture(url: string): Promise<Texture>;
 declare function unloadBoardImageTexture(url: string, texture: Texture | null): Promise<void>;
 /**
- * Decode an image no larger than `edge` along its long side, for sources
- * without CDN variants. The texture is unshared; destroy it to release it.
+ * Decode an image no larger than `edge` along its long side (short side with
+ * `cover`), for sources without CDN variants. The texture is unshared; destroy
+ * it to release it.
  */
-declare function loadFittedImageTexture(url: string, edge: number): Promise<Texture>;
+declare function loadFittedImageTexture(url: string, edge: number, cover?: boolean): Promise<Texture>;
 /** A smaller unshared copy of a decoded texture, or null when it cannot be read back. */
 declare function shrinkBoardTexture(texture: Texture, edge: number): Promise<Texture | null>;
+declare function readTextureTone(texture: Texture): Promise<number | null>;
 /**
  * Share image textures by resolved URL without sharing Board ownership.
  *
@@ -28,4 +30,4 @@ declare function createBoardImageTexturePool(options?: {
 }): BoardImageTexturePool;
 declare const boardImageTexturePool: BoardImageTexturePool;
 //#endregion
-export { BoardImageTexturePool, boardImageTexturePool, createBoardImageTexturePool, loadBoardImageTexture, loadFittedImageTexture, shrinkBoardTexture, unloadBoardImageTexture };
+export { BoardImageTexturePool, boardImageTexturePool, createBoardImageTexturePool, loadBoardImageTexture, loadFittedImageTexture, readTextureTone, shrinkBoardTexture, unloadBoardImageTexture };