@neta-art/cohub 11.5.1 → 12.1.0

package/dist/board/stage/stage.js

@@ -1,22 +1,25 @@
 import { applyMatrix, invertMatrix } from "../../protocol/dist/board-layout.js";
 import { featuredTaskArtifact } from "../../protocol/dist/board-task.js";
-import { screenPoint, screenToWorld, stableCullRect, visibleWorldRect, worldPoint } from "../model/geometry.js";
+import { pointToWorld, 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";
 import { resolveSceneArrow } from "../model/arrow-geometry.js";
 import { buildFallbackShapeColors, pickBoardColor, resolveItemColor } from "../model/palette.js";
+import { elementClientToLocal } from "../model/client-geometry.js";
 import { isCreationBoardTool } from "../editor/tool.js";
 import { resizeCursorForHandle } from "../editor/selection-transform.js";
 import { parseBoardCssColor } from "../render/css-color.js";
 import { defaultBoardPalette, itemAlpha } from "../render/palette.js";
 import { createBoardBackground, updateBoardBackground } from "../render/board-background.js";
-import { getBoardResolution, textZoomBucket } from "../render/text-resolution.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 { createBoardScriptObservers } from "../model/script-observers.js";
 import { createBoardPlayer } from "../player/index.js";
+import { createBoardScriptObservers } from "../model/script-observers.js";
+import { boardTextureEdge } from "./assets.js";
+import { boardCanvasSize, measureBoardCanvasBox } from "./canvas-size.js";
 import { observeDisplayDensity } from "./display-density.js";
 import { toBoardPointerEvent } from "./pointer.js";
 import { createBoardPointerGestures } from "./pointer-gestures.js";
@@ -24,6 +27,7 @@ import { createBoardScene } from "./scene.js";
 import { scheduleBoardMaintenance } from "./maintenance.js";
 import { createBoardScriptPointerRouter } from "./script-pointer.js";
 import { drawBoardOverlay } from "./overlay.js";
+import { createTextResolutionTracker } from "./text-resolution-tracker.js";
 import { createBoardItemViewLayer } from "./views.js";
 import { Application, Container, Graphics, RendererType } from "pixi.js";
 //#region src/board/stage/stage.ts
@@ -49,6 +53,7 @@ function defaultTheme() {
 const NO_IDS = /* @__PURE__ */ new Set();
 const MARCH_STEP_MS = 160;
 const MARCH_SMOOTH_MS = 40;
+const TEXTURE_SETTLE_MS = 150;
 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) {
@@ -102,13 +107,14 @@ function mountBoardStage(host, options) {
 	let disposed = false;
 	let renderFrame = 0;
 	let tickFrame = 0;
+	let scriptTickFrame = 0;
 	let cardTickFrame = 0;
 	let cardTickTimer = null;
 	let cardTickDue = 0;
 	const staleIds = /* @__PURE__ */ new Set();
 	let resizeFrame = 0;
+	let canvasBox = null;
 	let cardEpoch = 0;
-	let assetVersion = 0;
 	let surface = {
 		width: 0,
 		height: 0
@@ -116,7 +122,7 @@ function mountBoardStage(host, options) {
 	let playbackCamera = null;
 	let cursor = "";
 	const renderCamera = () => playbackCamera ?? editor.camera;
-	const views = createBoardItemViewLayer(host, editor, options.views ?? [], renderCamera);
+	const views = createBoardItemViewLayer(host, editor, options.views ?? [], renderCamera, scheduleTick);
 	const player = createBoardPlayer({ resolveColor: (color) => {
 		const current = theme();
 		return {
@@ -140,29 +146,71 @@ function mountBoardStage(host, options) {
 			scene: editor.scene
 		};
 		options.onVisibleChange?.(cull.ids);
-		requestAssets = true;
 		return cull.ids;
 	}
-	let requestAssets = true;
-	function syncAssets(ids) {
-		if (!requestAssets || !ids) return;
-		requestAssets = false;
+	const textureScale = () => renderCamera().zoom * (app?.renderer.resolution ?? 1);
+	const textResolution = createTextResolutionTracker(TEXTURE_SETTLE_MS, scheduleTick);
+	let refined = {
+		scale: 0,
+		geometry: 0
+	};
+	let pendingRefine = "";
+	let refineTimer = null;
+	function stopRefine() {
+		if (refineTimer !== null) clearTimeout(refineTimer);
+		refineTimer = null;
+		refined = {
+			scale: 0,
+			geometry: 0
+		};
+		pendingRefine = "";
+	}
+	function scheduleRefine() {
+		const scale = textureScale();
+		const geometry = editor.geometryVersion;
+		const key = `${scale}:${geometry}`;
+		if (key === pendingRefine) return;
+		pendingRefine = key;
+		if (refineTimer !== null) clearTimeout(refineTimer);
+		refineTimer = null;
+		if (refined.scale === 0 || scale <= refined.scale && geometry === refined.geometry) {
+			refined = {
+				scale,
+				geometry
+			};
+			return;
+		}
+		refineTimer = setTimeout(() => {
+			refineTimer = null;
+			refined = {
+				scale,
+				geometry
+			};
+			for (const id of scene?.liveIds() ?? []) {
+				const item = editor.scene.get(id);
+				if (item) assets.requestItem(item, boardTextureEdge(item, scale));
+			}
+		}, TEXTURE_SETTLE_MS);
+	}
+	const naturalIds = /* @__PURE__ */ new Set();
+	let liveVersion = -1;
+	function adoptNaturalSizes() {
+		if (naturalIds.size === 0) return;
 		const sizes = [];
-		for (const id of ids) {
+		for (const id of naturalIds) {
 			const item = editor.itemById(id);
-			if (!item) continue;
-			const key = assets.assetKey(item);
-			if (!key) continue;
-			assets.requestItem(item);
+			const key = item && assets.assetKey(item);
+			if (!item || !key) continue;
 			const artifact = item.type === "task" ? featuredTaskArtifact(item.props.snapshot.artifacts) : null;
 			const recorded = artifact?.type === "image" || artifact?.type === "video" ? artifact : item.type === "image" || item.type === "video" ? item.props.snapshot : null;
 			if (!recorded || recorded.naturalWidth && recorded.naturalHeight) continue;
 			const natural = assets.getNaturalSize(key);
 			if (natural?.width && natural.height) sizes.push({
-				id: item.id,
+				id,
 				...natural
 			});
 		}
+		naturalIds.clear();
 		if (sizes.length > 0) editor.adoptMediaNaturalSizes(sizes);
 	}
 	let lifted = null;
@@ -196,6 +244,7 @@ function mountBoardStage(host, options) {
 			themeKey: current.key,
 			rendererType: app?.renderer.type === RendererType.CANVAS ? "canvas" : "gpu",
 			zoom: renderCamera().zoom,
+			textResolution: textResolution.value,
 			reducedMotion: options.reducedMotion?.() ?? false,
 			labels: options.labels?.() ?? DEFAULT_BOARD_RENDER_LABELS,
 			taskRun: options.taskRun ?? (() => null),
@@ -203,7 +252,11 @@ function mountBoardStage(host, options) {
 			getTexture: (key) => assets.getTexture(key),
 			hasError: (key) => assets.hasError(key),
 			fileState: (path) => options.fileState?.(path) ?? "ok",
-			acquireTexture: (key) => assets.acquire(key),
+			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)
 		};
 	}
@@ -442,9 +495,37 @@ function mountBoardStage(host, options) {
 		}, owner, retained);
 		if (!retained || scriptHover && scriptHover.owner === owner && !Object.hasOwn(retained, scriptHover.target)) scriptHover = null;
 	}
+	function syncScripts() {
+		if (!scripts) return;
+		const now = performance.now();
+		if (scriptMode !== "paused") scriptTime += Math.min(250, Math.max(0, now - scriptLastTick));
+		scriptLastTick = now;
+		const camera = renderCamera();
+		if (scriptMode !== "paused" && scriptObservers.size) scriptObservers.sync(editor.document, editor.selection, () => ({
+			camera: { ...camera },
+			...surface,
+			safeRect: options.safeRect?.() ?? {
+				x: 0,
+				y: 0,
+				...surface
+			}
+		}));
+		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,
+			isMaterialized: (id) => Boolean(scene?.getNode(id)),
+			onSchedule: scheduleScriptTick,
 			capabilities: {
 				...options.scriptCapabilities,
 				"board.emit": async (id, value) => {
@@ -552,25 +633,10 @@ function mountBoardStage(host, options) {
 			}
 		}
 		const renderScene = editor.scene;
-		if (scripts) {
-			const now = performance.now();
-			if (scriptMode !== "paused") scriptTime += Math.min(250, Math.max(0, now - scriptLastTick));
-			scriptLastTick = now;
-			if (scriptMode !== "paused" && scriptObservers.size) scriptObservers.sync(editor.document, editor.selection, () => ({
-				camera: { ...camera },
-				...surface,
-				safeRect: options.safeRect?.() ?? {
-					x: 0,
-					y: 0,
-					...surface
-				}
-			}));
-			scripts.sync(editor.document, renderScene, camera, scriptTime, scriptMode === "interact", visibleIds());
-		}
 		world.position.set(camera.x, camera.y);
 		world.scale.set(camera.zoom);
 		const ids = visibleIds();
-		syncAssets(ids);
+		textResolution.update(textureScale());
 		const context = renderContext(current, renderScene, frame.time);
 		if (animationId && effectSampler) {
 			context.time = editor.playhead?.time ?? frame.time;
@@ -593,19 +659,21 @@ function mountBoardStage(host, options) {
 			getItem: (id) => renderScene.get(id) ?? null,
 			visibleIds: ids,
 			pinnedIds,
-			globalSig: [
-				assetVersion,
-				cardEpoch,
-				current.key,
-				textZoomBucket(camera.zoom),
-				getBoardResolution()
-			].join("|"),
+			globalSig: [cardEpoch, current.key].join("|"),
 			staleIds,
 			structureVersion: editor.structureVersion,
 			geometryVersion: editor.geometryVersion,
-			gestureActive: editor.gestureActive && editor.interaction.type !== "panning"
+			gestureActive: editor.gestureActive && editor.interaction.type !== "panning",
+			focus: pointToWorld(screenPoint(surface.width / 2, surface.height / 2), camera)
 		});
 		staleIds.clear();
+		if (scene.liveVersion !== liveVersion) {
+			liveVersion = scene.liveVersion;
+			options.onLiveChange?.(scene.liveIds());
+		}
+		adoptNaturalSizes();
+		scheduleRefine();
+		syncScripts();
 		drawInteraction();
 		views.sync({
 			ids,
@@ -617,7 +685,8 @@ function mountBoardStage(host, options) {
 		const nextCursor = cursorFor();
 		if (nextCursor !== cursor) host.style.cursor = cursor = nextCursor;
 		scheduleRender();
-		if (frame.running || scene.animated || scriptMode !== "paused" && scripts?.animated) scheduleTick();
+		if (frame.running || scene.animated) scheduleTick();
+		if (scriptMode !== "paused" && scripts?.animated) scheduleScriptTick();
 		const cardWait = scene.tick(performance.now());
 		if (cardWait !== null) scheduleCardTick(cardWait);
 	}
@@ -630,10 +699,14 @@ function mountBoardStage(host, options) {
 				height: host.clientHeight
 			};
 			if (size.width <= 0 || size.height <= 0) return;
-			const resolution = getBoardResolution(size);
-			const sizeChanged = size.width !== surface.width || size.height !== surface.height;
-			if (sizeChanged || app.renderer.resolution !== resolution) app.renderer.resize(size.width, size.height, resolution);
-			if (sizeChanged) {
+			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);
@@ -641,10 +714,10 @@ function mountBoardStage(host, options) {
 			sync();
 		});
 	}
-	const rectOf = () => host.getBoundingClientRect();
+	const localPoint = (x, y) => elementClientToLocal(host)(x, y);
 	const inViews = (event) => event.target instanceof Node && views.element.contains(event.target);
 	function toInput(event) {
-		return toBoardPointerEvent(event, rectOf(), renderCamera(), event.type === "pointermove" && editor.interaction.type === "drawing");
+		return toBoardPointerEvent(event, host, renderCamera(), event.type === "pointermove" && editor.interaction.type === "drawing");
 	}
 	function scriptTarget(input) {
 		if (!scriptOutputs.size) return null;
@@ -751,13 +824,12 @@ function mountBoardStage(host, options) {
 		if (inViews(event)) return;
 		event.preventDefault();
 		editor.takeCameraControl();
-		const rect = rectOf();
-		const point = screenPoint(event.clientX - rect.left, event.clientY - rect.top);
+		const point = localPoint(event.clientX, event.clientY);
 		editor.wheel(point, event.deltaX, event.deltaY, event.ctrlKey || event.metaKey, event.deltaMode);
 	}
 	function handleDoubleClick(event) {
 		if (inViews(event)) return;
-		const point = screenToWorld(event.clientX, event.clientY, rectOf(), renderCamera());
+		const point = pointToWorld(localPoint(event.clientX, event.clientY), renderCamera());
 		const item = editor.itemAt(point);
 		if (options.onDoubleClick?.(item, point) === true || editor.readonly) return;
 		if (item && !item.locked && editor.registry.capabilities(item).canEdit) {
@@ -783,19 +855,26 @@ function mountBoardStage(host, options) {
 		["dblclick", handleDoubleClick]
 	];
 	const stopEditor = editor.subscribe(LIVE_CHANNELS, scheduleTick);
-	const stopAssets = assets.subscribe(() => {
-		assetVersion += 1;
-		requestAssets = true;
+	const stopAssets = assets.subscribe((key) => {
+		const ids = scene?.holders(key);
+		if (!ids?.size) return;
+		for (const id of ids) {
+			staleIds.add(id);
+			naturalIds.add(id);
+		}
 		scheduleTick();
 	});
-	const resizeObserver = new ResizeObserver(resize);
+	const resizeObserver = new ResizeObserver((entries) => {
+		const entry = entries[entries.length - 1];
+		if (entry) canvasBox = measureBoardCanvasBox(entry, host.ownerDocument.defaultView?.devicePixelRatio ?? 1);
+		resize();
+	});
 	return {
 		ready: (async () => {
 			const instance = new Application();
 			try {
 				await instance.init({
 					antialias: true,
-					autoDensity: true,
 					backgroundAlpha: 0,
 					width: host.clientWidth,
 					height: host.clientHeight,
@@ -820,6 +899,8 @@ function mountBoardStage(host, options) {
 				position: "relative",
 				zIndex: "1",
 				display: "block",
+				width: "100%",
+				height: "100%",
 				touchAction: "none"
 			});
 			host.insertBefore(instance.canvas, views.element);
@@ -838,10 +919,14 @@ function mountBoardStage(host, options) {
 				world: nodes,
 				overlay,
 				getRenderer: resolveRenderer,
-				onFarLayerFrame: scheduleTick
+				requestFrame: scheduleTick
 			});
 			for (const [type, listener, listenerOptions] of listeners) host.addEventListener(type, listener, listenerOptions);
-			resizeObserver.observe(host);
+			try {
+				resizeObserver.observe(instance.canvas, { box: "device-pixel-content-box" });
+			} catch {
+				resizeObserver.observe(instance.canvas);
+			}
 			const window = host.ownerDocument.defaultView;
 			if (window) stopDensity = observeDisplayDensity(window, resize);
 			resize();
@@ -895,7 +980,10 @@ function mountBoardStage(host, options) {
 			if (!active) {
 				pointers.cancel();
 				stopMarch();
+				stopRefine();
 				cancelScriptPointers();
+				cancelAnimationFrame(scriptTickFrame);
+				scriptTickFrame = 0;
 				cancelAnimationFrame(renderFrame);
 				cancelAnimationFrame(tickFrame);
 				cancelAnimationFrame(cardTickFrame);
@@ -911,19 +999,18 @@ function mountBoardStage(host, options) {
 			resize();
 		},
 		invalidate(invalidation) {
-			if (invalidation?.cards) {
-				cardEpoch += 1;
-				requestAssets = true;
-			}
+			if (invalidation?.cards) cardEpoch += 1;
 			for (const id of invalidation?.items ?? []) staleIds.add(id);
 			scheduleTick();
 		},
 		isMaterialized: (id) => Boolean(scene?.getNode(id)),
-		toWorld: (clientX, clientY) => screenToWorld(clientX, clientY, rectOf(), renderCamera()),
+		toWorld: (clientX, clientY) => pointToWorld(localPoint(clientX, clientY), renderCamera()),
 		destroy() {
 			disposed = true;
 			pointers.cancel();
 			stopMarch();
+			stopRefine();
+			textResolution.dispose();
 			scriptPointers.clear();
 			stopTransforms?.();
 			scriptObservers.clear();
@@ -933,6 +1020,7 @@ function mountBoardStage(host, options) {
 			stopEditor();
 			stopAssets();
 			resizeObserver.disconnect();
+			cancelAnimationFrame(scriptTickFrame);
 			cancelAnimationFrame(resizeFrame);
 			cancelAnimationFrame(renderFrame);
 			cancelAnimationFrame(tickFrame);

package/dist/board/stage/text-resolution-tracker.d.ts

@@ -0,0 +1,8 @@
+//#region src/board/stage/text-resolution-tracker.d.ts
+declare function createTextResolutionTracker(settleMs: number, onSettle: () => void): {
+  readonly value: number;
+  update(next: number): number;
+  dispose(): void;
+};
+//#endregion
+export { createTextResolutionTracker };

package/dist/board/stage/text-resolution-tracker.js

@@ -0,0 +1,33 @@
+import { boardTextResolution } from "../render/text-resolution.js";
+//#region src/board/stage/text-resolution-tracker.ts
+function createTextResolutionTracker(settleMs, onSettle) {
+	let target = 0;
+	let value = 0;
+	let settled = false;
+	let timer = null;
+	return {
+		get value() {
+			return value;
+		},
+		update(next) {
+			if (next !== target) {
+				target = next;
+				settled = false;
+				if (timer !== null) clearTimeout(timer);
+				timer = setTimeout(() => {
+					timer = null;
+					settled = true;
+					onSettle();
+				}, settleMs);
+			}
+			value = boardTextResolution(target, value, settled);
+			return value;
+		},
+		dispose() {
+			if (timer !== null) clearTimeout(timer);
+			timer = null;
+		}
+	};
+}
+//#endregion
+export { createTextResolutionTracker };

package/dist/board/stage/views.d.ts

@@ -7,7 +7,7 @@ import "../editor/index.js";
 //#region src/board/stage/views.d.ts
 type BoardItemViewContext = {
   editor: BoardEditor;
-  zoom: number;
+  detailed: boolean;
   selected: boolean;
   toPointerEvent(event: PointerEvent): BoardPointerEvent;
 };
@@ -17,6 +17,11 @@ type BoardItemViewInstance = {
 };
 type BoardItemView = {
   type: string | ((item: BoardSceneItem) => boolean);
+  /** Optional screen-pixel threshold for expensive content, with built-in hysteresis. */
+  contentSize?: {
+    width: number;
+    height: number;
+  };
   mount(element: HTMLElement, item: BoardSceneItem, context: BoardItemViewContext): BoardItemViewInstance;
 };
 type BoardItemViewLayer = {
@@ -33,6 +38,6 @@ type BoardItemViewLayer = {
   }): void;
   destroy(): void;
 };
-declare function createBoardItemViewLayer(host: HTMLElement, editor: BoardEditor, views: readonly BoardItemView[], camera: () => BoardViewport): BoardItemViewLayer;
+declare function createBoardItemViewLayer(host: HTMLElement, editor: BoardEditor, views: readonly BoardItemView[], camera: () => BoardViewport, onInvalidate?: () => void): BoardItemViewLayer;
 //#endregion
 export { BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, createBoardItemViewLayer };

package/dist/board/stage/views.js

@@ -1,55 +1,80 @@
+import { itemBounds } from "../model/geometry.js";
 import { toBoardPointerEvent } from "./pointer.js";
 //#region src/board/stage/views.ts
 const VISIBLE_MARGIN = 240;
-function screenStyle(frame, camera, order) {
-	const { zoom } = camera;
+function worldStyle(frame, order) {
 	return [
 		`z-index:${order}`,
-		`left:${frame.x * zoom + camera.x}px`,
-		`top:${frame.y * zoom + camera.y}px`,
-		`width:${frame.width * zoom}px`,
-		`height:${frame.height * zoom}px`,
-		`--board-zoom:${zoom}`,
+		`left:${frame.x}px`,
+		`top:${frame.y}px`,
+		`width:${frame.width}px`,
+		`height:${frame.height}px`,
 		`transform:rotate(${frame.rotation}deg)`
 	].join(";");
 }
 function onScreen(frame, camera, surface) {
-	const left = frame.x * camera.zoom + camera.x;
-	const top = frame.y * camera.zoom + camera.y;
-	return left + frame.width * camera.zoom >= -240 && top + frame.height * camera.zoom >= -240 && left <= surface.width + VISIBLE_MARGIN && top <= surface.height + VISIBLE_MARGIN;
+	const bounds = itemBounds(frame);
+	const left = bounds.x * camera.zoom + camera.x;
+	const top = bounds.y * camera.zoom + camera.y;
+	return left + bounds.width * camera.zoom >= -240 && top + bounds.height * camera.zoom >= -240 && left <= surface.width + VISIBLE_MARGIN && top <= surface.height + VISIBLE_MARGIN;
 }
-function createBoardItemViewLayer(host, editor, views, camera) {
+function createBoardItemViewLayer(host, editor, views, camera, onInvalidate = () => {}) {
 	const element = host.ownerDocument.createElement("div");
 	element.dataset.boardViews = "";
 	element.style.cssText = "position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none";
 	host.appendChild(element);
+	const world = host.ownerDocument.createElement("div");
+	world.style.cssText = "position:absolute;inset:0;transform-origin:0 0;pointer-events:none";
+	element.appendChild(world);
+	let cameraStyle = "";
 	const mounted = /* @__PURE__ */ new Map();
-	const toPointerEvent = (event) => toBoardPointerEvent(event, host.getBoundingClientRect(), camera());
+	const pointers = /* @__PURE__ */ new Map();
+	const retained = (id, entry) => entry.element.contains(host.ownerDocument.activeElement) || [...pointers.values()].includes(id);
+	const pointerDown = (event) => {
+		const id = event.target?.closest("[data-board-item]")?.dataset.boardItem;
+		if (id && mounted.has(id)) pointers.set(event.pointerId, id);
+	};
+	const pointerEnd = (event) => {
+		if (pointers.delete(event.pointerId)) onInvalidate();
+	};
+	element.addEventListener("pointerdown", pointerDown, true);
+	element.addEventListener("focusout", onInvalidate);
+	host.ownerDocument.addEventListener("pointerup", pointerEnd, true);
+	host.ownerDocument.addEventListener("pointercancel", pointerEnd, true);
+	const toPointerEvent = (event) => toBoardPointerEvent(event, host, camera());
 	const viewFor = (item) => views.find((view) => typeof view.type === "string" ? view.type === item.type : view.type(item));
 	function unmount(id, entry) {
 		entry.instance.destroy?.();
 		entry.element.remove();
 		mounted.delete(id);
+		for (const [pointer, owner] of pointers) if (owner === id) pointers.delete(pointer);
 	}
 	return {
 		element,
 		sync({ ids, scene, camera: view, surface, selection }) {
 			if (views.length === 0) return;
+			const transform = `translate(${view.x}px,${view.y}px) scale(${view.zoom})`;
+			if (transform !== cameraStyle) world.style.transform = cameraStyle = transform;
 			const live = /* @__PURE__ */ new Set();
-			for (const id of ids ?? scene.items.map((item) => item.id)) {
+			const candidates = new Set(ids ?? scene.items.map((item) => item.id));
+			for (const [id, entry] of mounted) if (retained(id, entry)) candidates.add(id);
+			for (const id of candidates) {
 				const item = scene.get(id);
 				if (!item) continue;
 				const itemView = viewFor(item);
-				if (!itemView || !onScreen(item.frame, view, surface)) continue;
+				let entry = mounted.get(item.id);
+				const held = entry ? retained(id, entry) : false;
+				if (!itemView || !held && !onScreen(item.frame, view, surface)) continue;
 				live.add(item.id);
+				const style = worldStyle(item.frame, scene.indexOf(item.id));
+				const minimum = itemView.contentSize;
+				const threshold = entry?.detailed ? .85 : 1;
 				const context = {
 					editor,
-					zoom: view.zoom,
+					detailed: held || !minimum || item.frame.width * view.zoom >= minimum.width * threshold && item.frame.height * view.zoom >= minimum.height * threshold,
 					selected: selection.has(item.id),
 					toPointerEvent
 				};
-				const style = screenStyle(item.frame, view, scene.indexOf(item.id));
-				let entry = mounted.get(item.id);
 				if (entry && entry.view !== itemView) {
 					unmount(item.id, entry);
 					entry = void 0;
@@ -58,13 +83,13 @@ function createBoardItemViewLayer(host, editor, views, camera) {
 					const node = host.ownerDocument.createElement("div");
 					node.dataset.boardItem = item.id;
 					node.style.cssText = `position:absolute;pointer-events:none;transform-origin:center;${style}`;
-					element.appendChild(node);
+					world.appendChild(node);
 					mounted.set(item.id, {
 						view: itemView,
 						element: node,
 						instance: itemView.mount(node, item, context),
 						item,
-						zoom: context.zoom,
+						detailed: context.detailed,
 						selected: context.selected,
 						style
 					});
@@ -74,9 +99,9 @@ function createBoardItemViewLayer(host, editor, views, camera) {
 					entry.element.style.cssText = `position:absolute;pointer-events:none;transform-origin:center;${style}`;
 					entry.style = style;
 				}
-				if (entry.item !== item || entry.zoom !== context.zoom || entry.selected !== context.selected) {
+				if (entry.item !== item || entry.detailed !== context.detailed || entry.selected !== context.selected) {
 					entry.item = item;
-					entry.zoom = context.zoom;
+					entry.detailed = context.detailed;
 					entry.selected = context.selected;
 					entry.instance.update?.(item, context);
 				}
@@ -84,6 +109,10 @@ function createBoardItemViewLayer(host, editor, views, camera) {
 			for (const [id, entry] of mounted) if (!live.has(id)) unmount(id, entry);
 		},
 		destroy() {
+			element.removeEventListener("pointerdown", pointerDown, true);
+			element.removeEventListener("focusout", onInvalidate);
+			host.ownerDocument.removeEventListener("pointerup", pointerEnd, true);
+			host.ownerDocument.removeEventListener("pointercancel", pointerEnd, true);
 			for (const [id, entry] of mounted) unmount(id, entry);
 			element.remove();
 		}