@neta-art/cohub 11.5.1 → 12.0.0

package/dist/board/stage/assets.js

@@ -1,6 +1,6 @@
-import { mediaPreviewCandidates } from "../../media.js";
+import { MEDIA_VARIANT_SIZES, imageVariantUrl, mediaVariantSize, probeMediaInfo, variantSource, videoFrameUrl } from "../../media.js";
 import { parseBoardMediaSource } from "../../protocol/dist/board-model.js";
-import { featuredTaskArtifact } from "../../protocol/dist/board-task.js";
+import { featuredTaskArtifact, taskArtifactPreviewUrl } from "../../protocol/dist/board-task.js";
 import { boardModelFormat, isBoardModelItem } from "../model/media.js";
 import { boardImageKeySource, imageAssetKey } from "../model/image-key.js";
 import { loadVideoThumbnailTexture, videoTextureNaturalSize } from "../render/video-thumbnail.js";
@@ -8,12 +8,23 @@ import { DEFAULT_LRU_BUDGET, selectLruEvictions } from "./lru.js";
 import { boardImageTexturePool, loadBoardImageTexture, unloadBoardImageTexture } from "./texture-pool.js";
 import { Texture } from "pixi.js";
 //#region src/board/stage/assets.ts
-const TASK_TEXTURE_SIZE = 1536;
 function taskPreviewKey(artifact) {
-	if (!artifact || artifact.type === "text") return null;
-	const [still] = mediaPreviewCandidates(artifact, { size: TASK_TEXTURE_SIZE });
-	if (still) return `url:${still}`;
-	return artifact.type === "video" ? `video-url:${encodeURIComponent(artifact.url)}` : null;
+	const cover = taskArtifactPreviewUrl(artifact);
+	if (cover) return `url:${cover}`;
+	if (artifact?.type !== "video") return null;
+	const frame = videoFrameUrl(artifact.url, 768);
+	return frame ? `url:${frame}` : `video-url:${encodeURIComponent(artifact.url)}`;
+}
+const LARGEST_VARIANT = MEDIA_VARIANT_SIZES[MEDIA_VARIANT_SIZES.length - 1];
+function boardTextureEdge(item, scale) {
+	const crop = item.type === "image" ? item.props.crop : void 0;
+	const pixels = Math.max(item.frame.width / (crop?.w || 1), item.frame.height / (crop?.h || 1)) * scale;
+	return pixels > LARGEST_VARIANT ? Number.POSITIVE_INFINITY : mediaVariantSize(pixels);
+}
+function variantUrl(source, edge) {
+	if (!(edge <= LARGEST_VARIANT)) return null;
+	const url = imageVariantUrl(source, edge);
+	return url && url !== source ? url : null;
 }
 const STILL_MEDIA = ["video", "model"];
 function stillKey(media, src, mtimeMs) {
@@ -70,7 +81,7 @@ function footprintOf(texture) {
 	return (texture.width || 0) * (texture.height || 0) * 4;
 }
 function createBoardAssetManager(options) {
-	const concurrency = Math.max(1, options.concurrency ?? 4);
+	const concurrency = Math.max(1, options.concurrency ?? 6);
 	const limits = {
 		image: concurrency,
 		video: Math.max(1, Math.min(options.videoConcurrency ?? 2, concurrency)),
@@ -103,12 +114,20 @@ function createBoardAssetManager(options) {
 		});
 		if (url) pendingUnloads.set(pendingKey, promise);
 	}
+	const retiring = /* @__PURE__ */ new Set();
+	function retire(key, url, texture) {
+		const release = () => {
+			if (retiring.delete(release)) releaseTexture(key, url, texture);
+		};
+		retiring.add(release);
+		if (typeof requestAnimationFrame === "function") requestAnimationFrame(release);
+		else setTimeout(release, 0);
+	}
 	const resolveFileUrl = options.resolveFileUrl;
 	const entries = /* @__PURE__ */ new Map();
 	const pathVersions = /* @__PURE__ */ new Map();
-	const loaders = /* @__PURE__ */ new Map();
+	const starters = /* @__PURE__ */ new Map();
 	const failedModels = /* @__PURE__ */ new Set();
-	const inflight = /* @__PURE__ */ new Set();
 	const queue = [];
 	const listeners = /* @__PURE__ */ new Set();
 	let active = 0;
@@ -118,8 +137,8 @@ function createBoardAssetManager(options) {
 		model: 0
 	};
 	let disposed = false;
-	function notify() {
-		for (const listener of listeners) listener();
+	function notify(key) {
+		for (const listener of listeners) listener(key);
 	}
 	function managedAssetKey(item) {
 		const key = boardAssetKey(item);
@@ -141,8 +160,13 @@ function createBoardAssetManager(options) {
 		let entry = entries.get(key);
 		if (!entry) {
 			entry = {
+				media: keySource(key)?.media ?? "image",
+				source: null,
 				url: null,
 				texture: null,
+				edge: 0,
+				want: 0,
+				natural: void 0,
 				refs: 0,
 				loading: false,
 				error: false,
@@ -162,21 +186,15 @@ function createBoardAssetManager(options) {
 			entry.retryTimer = null;
 			if (disposed || entries.get(key) !== entry) return;
 			if (entry.refs <= 0 || entry.texture || entry.loading) return;
-			const load = loaders.get(key);
-			if (!load) return;
+			const start = starters.get(key);
+			if (!start) return;
 			entry.error = false;
-			if (!queue.some((task) => task.key === key)) {
-				queue.push({
-					key,
-					load
-				});
-				pump();
-			}
+			start(entry);
 		}, delay);
 	}
 	function evict(key, entry) {
 		clearRetry(entry);
-		loaders.delete(key);
+		starters.delete(key);
 		if (entry.url || entry.texture) releaseTexture(key, entry.url ?? "", entry.texture);
 		entries.delete(key);
 	}
@@ -193,69 +211,128 @@ function createBoardAssetManager(options) {
 			if (entry) evict(key, entry);
 		}
 	}
-	function settle(key, entry, texture, error) {
+	function adopt(key, entry, loaded, error) {
 		entry.loading = false;
-		inflight.delete(key);
-		active -= 1;
-		const media = keySource(key)?.media;
-		if (media) activeByMedia[media] -= 1;
 		if (entries.get(key) !== entry) {
-			if (texture) releaseTexture(key, entry.url ?? "", texture);
-			if (!disposed) pump();
+			if (loaded) releaseTexture(key, loaded.url, loaded.texture);
 			return;
 		}
-		if (texture) {
+		if (loaded) {
+			const replaced = entry.texture;
+			const replacedUrl = entry.url ?? "";
+			const { texture } = loaded;
 			entry.error = false;
 			entry.attempts = 0;
 			entry.texture = texture;
+			entry.url = loaded.url;
+			entry.edge = loaded.edge;
+			if (loaded.edge === Number.POSITIVE_INFINITY && !variantSource(loaded.url)) entry.natural = videoTextureNaturalSize(texture) ?? {
+				width: texture.width,
+				height: texture.height
+			};
 			entry.lastUsedAt = now();
 			if (entry.refs <= 0) trim();
-			else notify();
-		} else {
-			entry.error = true;
-			entry.attempts += 1;
-			entry.retryAt = now() + Math.min(1e3 * 2 ** entry.attempts, MAX_RETRY_DELAY);
-			console.warn(`[board] failed to load preview for ${key}`, error);
-			if (media === "model") failedModels.add(key);
-			if (entry.refs <= 0) evict(key, entry);
-			else {
-				if (media !== "model") scheduleRetry(key, entry);
-				notify();
-			}
+			else notify(key);
+			if (replaced) retire(key, replacedUrl, replaced);
+			refine(key, entry);
+			return;
 		}
-		if (!disposed) pump();
+		if (entry.texture) {
+			entry.edge = Number.POSITIVE_INFINITY;
+			notify(key);
+			return;
+		}
+		const media = entry.media;
+		entry.error = true;
+		entry.attempts += 1;
+		entry.retryAt = now() + Math.min(1e3 * 2 ** entry.attempts, MAX_RETRY_DELAY);
+		console.warn(`[board] failed to load preview for ${key}`, error);
+		if (media === "model") failedModels.add(key);
+		if (entry.refs <= 0) evict(key, entry);
+		else {
+			if (media !== "model") scheduleRetry(key, entry);
+			notify(key);
+		}
+	}
+	function refinable(entry) {
+		return entry.media === "image" && entry.refs > 0 && entry.texture !== null && entry.source !== null && entry.want > entry.edge;
+	}
+	function refine(key, entry) {
+		if (refinable(entry) && !entry.loading && entry.source) enqueue(key, "image", textureLoad("image", entry.source));
+	}
+	function enqueue(key, media, load) {
+		if (queue.some((task) => task.key === key)) return;
+		queue.push({
+			key,
+			media,
+			load
+		});
+		pump();
 	}
 	function pump() {
 		while (!disposed && active < concurrency && queue.length > 0) {
-			const taskIndex = queue.findIndex(({ key }) => {
-				const media = keySource(key)?.media;
-				return !media || activeByMedia[media] < limits[media];
-			});
+			const taskIndex = queue.findIndex(({ media }) => activeByMedia[media] < limits[media]);
 			if (taskIndex < 0) return;
 			const [task] = queue.splice(taskIndex, 1);
 			if (!task) continue;
 			const entry = entries.get(task.key);
-			const source = keySource(task.key);
-			if (!entry || !source || entry.texture || entry.loading) continue;
+			if (!entry || entry.loading || entry.texture && !refinable(entry)) continue;
 			entry.loading = true;
-			inflight.add(task.key);
 			active += 1;
-			activeByMedia[source.media] += 1;
-			task.load(entry).then((texture) => settle(task.key, entry, texture), (error) => settle(task.key, entry, null, error));
+			activeByMedia[task.media] += 1;
+			const done = (loaded, error) => {
+				active -= 1;
+				activeByMedia[task.media] -= 1;
+				adopt(task.key, entry, loaded, error);
+				if (!disposed) pump();
+			};
+			task.load(entry).then((loaded) => done(loaded), (error) => done(null, error));
 		}
 	}
-	function urlLoader(source) {
-		const getUrl = source.kind === "url" ? () => Promise.resolve(source.value) : () => resolveFileUrl(source.value);
+	function textureLoad(media, source) {
 		return async (entry) => {
-			const url = await getUrl();
-			if (!url || disposed) return null;
-			entry.url = url;
-			const pending = pendingUnloads.get(`${source.media}:${url}`);
+			entry.source = source;
+			const edge = entry.want;
+			const variant = media === "image" ? variantUrl(source, edge) : null;
+			const url = variant ?? source;
+			const pending = pendingUnloads.get(`${media}:${url}`);
 			if (pending) await pending;
 			if (disposed) return null;
-			return loadTexture(url, source.media);
+			const texture = await loadTexture(url, media);
+			if (!texture) return null;
+			return {
+				texture,
+				url,
+				edge: !variant || Math.max(texture.width, texture.height) < edge ? Number.POSITIVE_INFINITY : edge
+			};
+		};
+	}
+	function resolveFile(key, media, path) {
+		return (entry) => {
+			const fresh = entry.attempts > 0;
+			entry.loading = true;
+			resolveFileUrl(path, fresh ? { fresh } : void 0).then((url) => {
+				if (disposed || entries.get(key) !== entry) return;
+				if (entry.refs <= 0) return evict(key, entry);
+				if (!url) return adopt(key, entry, null, /* @__PURE__ */ new Error(`Unavailable file: ${path}`));
+				entry.loading = false;
+				enqueue(key, media, textureLoad(media, url));
+			}, (error) => {
+				if (!disposed) adopt(key, entry, null, error);
+			});
 		};
 	}
+	function probeNaturalSize(key, entry, source) {
+		entry.natural = null;
+		probeMediaInfo(source, { type: "image" }).then(({ width, height }) => {
+			if (disposed || entries.get(key) !== entry || !width || !height) return;
+			entry.natural = {
+				width,
+				height
+			};
+			notify(key);
+		});
+	}
 	function modelPreviewable(item) {
 		const previews = options.modelPreviews;
 		if (!previews) return false;
@@ -274,20 +351,35 @@ function createBoardAssetManager(options) {
 			format,
 			size: snapshot?.size
 		};
-		return async () => Texture.from(await previews.load(request));
+		return async () => ({
+			texture: Texture.from(await previews.load(request)),
+			url: "",
+			edge: Number.POSITIVE_INFINITY
+		});
+	}
+	function starter(item, key, source) {
+		if (source.media === "model") {
+			const load = modelLoader(item, key);
+			return load ? () => enqueue(key, "model", load) : null;
+		}
+		const media = source.media;
+		if (source.kind === "file") return resolveFile(key, media, source.value);
+		const load = textureLoad(media, source.value);
+		return () => enqueue(key, media, load);
 	}
 	const manager = {
 		assetKey: managedAssetKey,
 		invalidatePath(path) {
 			if (disposed) return;
-			if (![...entries.keys()].some((key) => {
+			const stale = [...entries.keys()].filter((key) => {
 				const source = keySource(key);
 				return source?.kind === "file" && source.value === path;
-			})) return;
+			});
+			if (stale.length === 0) return;
 			pathVersions.set(path, (pathVersions.get(path) ?? 0) + 1);
-			notify();
+			for (const key of stale) notify(key);
 		},
-		requestItem(item) {
+		requestItem(item, edge = Number.POSITIVE_INFINITY) {
 			if (disposed) return;
 			const key = managedAssetKey(item);
 			if (!key || failedModels.has(key)) return;
@@ -295,22 +387,16 @@ function createBoardAssetManager(options) {
 			if (!source) return;
 			const entry = ensureEntry(key);
 			entry.lastUsedAt = now();
-			if (entry.texture || entry.loading) return;
+			if (edge > entry.want) entry.want = edge;
+			if (entry.texture) return refine(key, entry);
+			if (entry.loading || entry.retryTimer) return;
 			if (entry.error && now() < entry.retryAt) return;
-			entry.error = false;
-			clearRetry(entry);
 			if (queue.some((queued) => queued.key === key)) return;
-			const load = source.media === "model" ? modelLoader(item, key) : urlLoader({
-				...source,
-				media: source.media
-			});
-			if (!load) return;
-			loaders.set(key, load);
-			queue.push({
-				key,
-				load
-			});
-			pump();
+			const start = starter(item, key, source);
+			if (!start) return;
+			entry.error = false;
+			starters.set(key, start);
+			start(entry);
 		},
 		getTexture(key) {
 			const entry = entries.get(key);
@@ -319,12 +405,10 @@ function createBoardAssetManager(options) {
 			return entry.texture;
 		},
 		getNaturalSize(key) {
-			const texture = manager.getTexture(key);
-			if (!texture) return null;
-			return videoTextureNaturalSize(texture) ?? {
-				width: texture.width,
-				height: texture.height
-			};
+			const entry = entries.get(key);
+			if (!entry?.texture) return null;
+			if (entry.natural === void 0 && entry.source) probeNaturalSize(key, entry, entry.source);
+			return entry.natural ?? null;
 		},
 		hasError(key) {
 			return entries.get(key)?.error ?? false;
@@ -355,10 +439,10 @@ function createBoardAssetManager(options) {
 			if (keys.size === 0) return use(textures);
 			for (const key of keys) manager.acquire(key);
 			try {
-				for (const item of items) manager.requestItem(item);
+				for (const item of items) manager.requestItem(item, loadOptions?.edge?.(item));
 				const settled = () => [...keys].every((key) => {
 					const entry = entries.get(key);
-					return Boolean(entry?.texture) || Boolean(entry?.error);
+					return Boolean(entry?.error) || Boolean(entry?.texture && !refinable(entry));
 				});
 				if (!settled()) {
 					const timeoutMs = loadOptions?.timeoutMs ?? 15e3;
@@ -394,13 +478,14 @@ function createBoardAssetManager(options) {
 			queue.length = 0;
 			listeners.clear();
 			pathVersions.clear();
-			loaders.clear();
+			starters.clear();
 			failedModels.clear();
 			for (const [key, entry] of entries) evict(key, entry);
 			entries.clear();
+			for (const release of [...retiring]) release();
 		}
 	};
 	return manager;
 }
 //#endregion
-export { boardAssetKey, createBoardAssetManager };
+export { boardAssetKey, boardTextureEdge, createBoardAssetManager };

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

@@ -1,10 +1,10 @@
-import { DEFAULT_LRU_BUDGET, LruBudget, LruEntry, selectLruEvictions } from "./lru.js";
+import { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, selectLruEvictions } from "./lru.js";
 import { BoardImageTexturePool, boardImageTexturePool, createBoardImageTexturePool, loadBoardImageTexture, unloadBoardImageTexture } from "./texture-pool.js";
-import { BoardAssetManager, BoardAssetManagerOptions, BoardModelPreviewRequest, BoardModelPreviews, boardAssetKey, createBoardAssetManager } from "./assets.js";
+import { BoardAssetManager, BoardAssetManagerOptions, BoardModelPreviewRequest, BoardModelPreviews, boardAssetKey, boardTextureEdge, createBoardAssetManager } from "./assets.js";
 import { toBoardPointerEvent } from "./pointer.js";
 import { createBoardPointerGestures } from "./pointer-gestures.js";
 import { BoardLiveStroke, BoardScene, BoardSceneNode, SceneSyncInput, createBoardScene } from "./scene.js";
 import { BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, createBoardItemViewLayer } from "./views.js";
 import { BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageTheme, mountBoardStage } from "./stage.js";
 import { BoardOverlayInput, drawBoardOverlay, expandFrame } from "./overlay.js";
-export { BoardAssetManager, BoardAssetManagerOptions, BoardImageTexturePool, BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, BoardLiveStroke, BoardModelPreviewRequest, BoardModelPreviews, BoardOverlayInput, BoardScene, BoardSceneNode, BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageTheme, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, SceneSyncInput, boardAssetKey, boardImageTexturePool, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardPointerGestures, createBoardScene, drawBoardOverlay, expandFrame, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };
+export { BoardAssetManager, BoardAssetManagerOptions, BoardImageTexturePool, BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, BoardLiveStroke, BoardModelPreviewRequest, BoardModelPreviews, BoardOverlayInput, BoardScene, BoardSceneNode, BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageTheme, COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, SceneSyncInput, boardAssetKey, boardImageTexturePool, boardTextureEdge, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardPointerGestures, createBoardScene, drawBoardOverlay, expandFrame, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };

package/dist/board/stage/index.js

@@ -1,10 +1,10 @@
-import { DEFAULT_LRU_BUDGET, selectLruEvictions } from "./lru.js";
+import { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, selectLruEvictions } from "./lru.js";
 import { boardImageTexturePool, createBoardImageTexturePool, loadBoardImageTexture, unloadBoardImageTexture } from "./texture-pool.js";
-import { boardAssetKey, createBoardAssetManager } from "./assets.js";
+import { boardAssetKey, boardTextureEdge, createBoardAssetManager } from "./assets.js";
 import { toBoardPointerEvent } from "./pointer.js";
 import { createBoardPointerGestures } from "./pointer-gestures.js";
 import { createBoardScene } from "./scene.js";
 import { drawBoardOverlay, expandFrame } from "./overlay.js";
 import { createBoardItemViewLayer } from "./views.js";
 import { mountBoardStage } from "./stage.js";
-export { DEFAULT_LRU_BUDGET, boardAssetKey, boardImageTexturePool, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardPointerGestures, createBoardScene, drawBoardOverlay, expandFrame, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };
+export { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, boardAssetKey, boardImageTexturePool, boardTextureEdge, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardPointerGestures, createBoardScene, drawBoardOverlay, expandFrame, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };

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

@@ -20,8 +20,9 @@ type LruBudget = {
   maxCount: number;
   maxBytes: number;
 };
-/** Default cooling-pool ceiling: 64 images or ~128 MB of GPU memory. */
+/** Default cooling-pool ceiling: 512 images or ~192 MB of GPU memory. */
 declare const DEFAULT_LRU_BUDGET: LruBudget;
+declare const COMPACT_LRU_BUDGET: LruBudget;
 /**
  * Given the unreferenced (cooling) entries and a budget, return the keys to
  * evict — oldest first — so the remaining pool fits within both limits. Returns
@@ -29,4 +30,4 @@ declare const DEFAULT_LRU_BUDGET: LruBudget;
  */
 declare function selectLruEvictions(entries: LruEntry[], budget: LruBudget): string[];
 //#endregion
-export { DEFAULT_LRU_BUDGET, LruBudget, LruEntry, selectLruEvictions };
+export { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, selectLruEvictions };

package/dist/board/stage/lru.js

@@ -1,8 +1,12 @@
 //#region src/board/stage/lru.ts
-/** Default cooling-pool ceiling: 64 images or ~128 MB of GPU memory. */
+/** Default cooling-pool ceiling: 512 images or ~192 MB of GPU memory. */
 const DEFAULT_LRU_BUDGET = {
-	maxCount: 64,
-	maxBytes: 134217728
+	maxCount: 512,
+	maxBytes: 201326592
+};
+const COMPACT_LRU_BUDGET = {
+	maxCount: 256,
+	maxBytes: 100663296
 };
 /**
 * Given the unreferenced (cooling) entries and a budget, return the keys to
@@ -26,4 +30,4 @@ function selectLruEvictions(entries, budget) {
 	return evict;
 }
 //#endregion
-export { DEFAULT_LRU_BUDGET, selectLruEvictions };
+export { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, selectLruEvictions };

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

@@ -3,6 +3,6 @@ import "../model/index.js";
 import { BoardPointerEvent } from "../editor/interaction.js";
 import "../editor/index.js";
 //#region src/board/stage/pointer.d.ts
-declare function toBoardPointerEvent(event: PointerEvent, rect: DOMRect, camera: BoardViewport, coalesce?: boolean): BoardPointerEvent;
+declare function toBoardPointerEvent(event: PointerEvent, rect: DOMRect | HTMLElement, camera: BoardViewport, coalesce?: boolean): BoardPointerEvent;
 //#endregion
 export { toBoardPointerEvent };

package/dist/board/stage/pointer.js

@@ -1,16 +1,15 @@
 import { pointToWorld, screenPoint } from "../model/geometry.js";
+import { elementClientToLocal } from "../model/client-geometry.js";
 //#region src/board/stage/pointer.ts
 function pressureOf(event) {
 	return event.pointerType === "pen" && event.pressure > 0 ? event.pressure : .5;
 }
-function screenOf(event, rect) {
-	return screenPoint(event.clientX - rect.left, event.clientY - rect.top);
-}
 function toBoardPointerEvent(event, rect, camera, coalesce = false) {
-	const screen = screenOf(event, rect);
+	const local = "getBoundingClientRect" in rect ? elementClientToLocal(rect) : (x, y) => screenPoint(x - rect.left, y - rect.top);
+	const screen = local(event.clientX, event.clientY);
 	const coalesced = coalesce ? event.getCoalescedEvents?.() : void 0;
 	const samples = coalesced && coalesced.length > 1 ? coalesced.map((sample) => ({
-		world: pointToWorld(screenOf(sample, rect), camera),
+		world: pointToWorld(local(sample.clientX, sample.clientY), camera),
 		pressure: pressureOf(sample)
 	})) : void 0;
 	return {

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

@@ -32,6 +32,9 @@ type BoardSceneNode = {
 type BoardScene = {
   sync: (input: SceneSyncInput) => void;
   getNode: (itemId: string) => BoardSceneNode | null;
+  holders: (key: string) => ReadonlySet<string>;
+  readonly liveVersion: number;
+  liveIds: () => ReadonlySet<string>;
   readonly animated: boolean;
   tick: (clock: number) => number | null;
   destroy: (context: BoardRenderContext) => void;

package/dist/board/stage/scene.js

@@ -1,5 +1,6 @@
 import { parseBoardItem } from "../../protocol/dist/board-model.js";
 import { drawPointsBounds } from "../../protocol/dist/board-layout.js";
+import { getBoardResolution, textZoomBucket } from "../render/text-resolution.js";
 import { clippingAncestor, isClippingFrame, syncClipGroup } from "../render/clip.js";
 import { Graphics } from "pixi.js";
 //#region src/board/stage/scene.ts
@@ -12,6 +13,7 @@ const Z_LIFTED = 1e9;
 const Z_LIVE_STROKE = Number.MAX_SAFE_INTEGER - 1;
 const Z_OVERLAY = Number.MAX_SAFE_INTEGER;
 const POOL_LIMIT_PER_RENDERER = 48;
+const EMPTY_IDS = /* @__PURE__ */ new Set();
 function idSetSignature(ids) {
 	let hash = ids.size;
 	for (const id of ids) {
@@ -31,20 +33,33 @@ function createBoardScene(options) {
 	const tickingIds = /* @__PURE__ */ new Set();
 	const pools = /* @__PURE__ */ new Map();
 	const heldKeys = /* @__PURE__ */ new Map();
+	const holders = /* @__PURE__ */ new Map();
 	let orderById = /* @__PURE__ */ new Map();
 	let farSig = null;
 	let farActive = false;
 	let lastStructureVersion = -1;
 	let lastZoom = NaN;
+	let lastResolution = "";
+	let liveVersion = 0;
 	let lifted = /* @__PURE__ */ new Set();
 	const liveStrokes = /* @__PURE__ */ new Map();
-	function setHeldKey(context, cardId, desiredKey) {
+	function setHeldKey(context, cardId, item) {
+		const desiredKey = item ? context.assetKey(item) : null;
 		const heldKey = heldKeys.get(cardId) ?? null;
 		if (desiredKey === heldKey) return;
-		if (heldKey) context.releaseTexture(heldKey);
-		if (desiredKey) context.acquireTexture(desiredKey);
-		if (desiredKey) heldKeys.set(cardId, desiredKey);
-		else heldKeys.delete(cardId);
+		if (heldKey) {
+			context.releaseTexture(heldKey);
+			const ids = holders.get(heldKey);
+			ids?.delete(cardId);
+			if (ids?.size === 0) holders.delete(heldKey);
+		}
+		if (desiredKey && item) {
+			heldKeys.set(cardId, desiredKey);
+			const ids = holders.get(desiredKey);
+			if (ids) ids.add(cardId);
+			else holders.set(desiredKey, /* @__PURE__ */ new Set([cardId]));
+			context.acquireTexture(desiredKey, item);
+		} else heldKeys.delete(cardId);
 	}
 	function takeFromPool(rendererId) {
 		const pool = pools.get(rendererId);
@@ -119,7 +134,7 @@ function createBoardScene(options) {
 			scriptRevision: context.scripts?.revision?.(item.id) ?? 0
 		};
 		cards.set(item.id, entry);
-		setHeldKey(context, item.id, context.assetKey(item));
+		setHeldKey(context, item.id, item);
 		renderer.zoom?.(container, context.zoom);
 		return entry;
 	}
@@ -277,6 +292,9 @@ function createBoardScene(options) {
 	}
 	function sync(input) {
 		const { items, scene, context, getItem, visibleIds, pinnedIds, globalSig, structureVersion, geometryVersion, gestureActive } = input;
+		const resolution = `${textZoomBucket(context.zoom)}:${getBoardResolution()}`;
+		const resolutionChanged = resolution !== lastResolution;
+		lastResolution = resolution;
 		const structureChanged = structureVersion !== lastStructureVersion;
 		if (structureChanged) {
 			lastStructureVersion = structureVersion;
@@ -304,7 +322,14 @@ function createBoardScene(options) {
 		if (farActive) {
 			const { orderedIds, unbatched } = visibleFacts(input);
 			for (const id of unbatched) wanted.add(id);
-			let budget = FAR_LIVE_LIMIT;
+			let retained = 0;
+			if (!farPainted) {
+				for (const id of cards.keys()) if ((!visibleIds || visibleIds.has(id)) && !farCovered.has(id) && !wanted.has(id)) {
+					wanted.add(id);
+					retained++;
+				}
+			}
+			let budget = Math.max(0, FAR_LIVE_LIMIT - retained);
 			for (const id of orderedIds) {
 				if (budget === 0) break;
 				if (farCovered.has(id) || wanted.has(id)) continue;
@@ -346,13 +371,17 @@ function createBoardScene(options) {
 			entry.hovered = hovered;
 			entry.resizing = resizing;
 			entry.globalSig = globalSig;
-			setHeldKey(context, id, context.assetKey(item));
+			setHeldKey(context, id, item);
 			if (changed) {
 				entry.renderer.update(entry.container, item, context);
 				entry.container.alpha = scene.opacity(id);
 				if (entry.renderer.tick) tickingIds.add(id);
+			} else if (resolutionChanged && entry.renderer.resolution) {
+				entry.renderer.resolution(entry.container, item, context);
+				if (entry.renderer.tick) tickingIds.add(id);
 			}
 		}
+		if (liveSetChanged) liveVersion += 1;
 		if (structureChanged || liveSetChanged) syncClips(scene);
 		if (context.zoom !== lastZoom) {
 			lastZoom = context.zoom;
@@ -391,6 +420,7 @@ function createBoardScene(options) {
 		pools.clear();
 		for (const key of heldKeys.values()) context.releaseTexture(key);
 		heldKeys.clear();
+		holders.clear();
 		orderById = /* @__PURE__ */ new Map();
 		for (const entry of clips.values()) entry.group.destroy({ children: true });
 		clips.clear();
@@ -402,6 +432,7 @@ function createBoardScene(options) {
 		visibleMemo = null;
 		lastStructureVersion = -1;
 		lastZoom = NaN;
+		lastResolution = "";
 	}
 	return {
 		sync,
@@ -412,6 +443,11 @@ function createBoardScene(options) {
 				container: entry.container
 			} : null;
 		},
+		holders: (key) => holders.get(key) ?? EMPTY_IDS,
+		get liveVersion() {
+			return liveVersion;
+		},
+		liveIds: () => new Set(cards.keys()),
 		get animated() {
 			return animatedIds.size > 0;
 		},

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

@@ -56,6 +56,7 @@ type BoardStageOptions = {
     height: number;
   }) => void;
   onVisibleChange?: (ids: ReadonlySet<string> | null) => void;
+  onLiveChange?: (ids: ReadonlySet<string>) => void;
   safeRect?: () => Rect;
   scriptCapabilities?: Record<string, (id: string, input: unknown) => Promise<unknown>>;
 };