@neta-art/cohub 11.5.1 → 12.1.0

package/dist/board/render/script-resolution.js

@@ -0,0 +1,18 @@
+//#region src/board/render/script-resolution.ts
+const RESOLUTIONS = [
+	.125,
+	.25,
+	.5,
+	1,
+	2,
+	4
+];
+const MAX_EDGE = 2048;
+const MAX_PIXELS = 2097152;
+function scriptResolution(width, height, demand, current = 0) {
+	const target = Number.isFinite(demand) && demand > 0 ? demand : 1;
+	const tier = current > 0 && target <= current * 1.15 && target >= current * .4 ? current : RESOLUTIONS.find((value) => value >= target) ?? 4;
+	return Math.min(tier, MAX_EDGE / Math.max(1, width, height), Math.sqrt(MAX_PIXELS / Math.max(1, width * height)));
+}
+//#endregion
+export { scriptResolution };

package/dist/board/render/surface.d.ts

@@ -1,6 +1,6 @@
 import { WorldPoint } from "../model/geometry.js";
 import { BoardRenderStyle, BoardShadowStyle } from "./style.js";
-import { Graphics } from "pixi.js";
+import { Graphics, Texture } from "pixi.js";
 //#region src/board/render/surface.d.ts
 declare const PIXEL_STEP = 2;
 type CardRect = {
@@ -10,6 +10,13 @@ type CardRect = {
   height: number;
 };
 declare function traceCardOutline(graphics: Graphics, rect: CardRect, style: Pick<BoardRenderStyle, "corner" | "radius">, grow?: number): Graphics;
+type CardCrop = {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+};
+declare function fillCardPicture(graphics: Graphics, texture: Texture, picture: CardRect, style: Pick<BoardRenderStyle, "corner" | "radius">, crop?: CardCrop | null): Graphics;
 declare function tracePixelRect(graphics: Graphics, x: number, y: number, width: number, height: number, step: number): Graphics;
 declare function cardOutlinePoints(rect: CardRect, style: Pick<BoardRenderStyle, "corner" | "radius">, grow?: number): WorldPoint[];
 declare function drawCardShadow(graphics: Graphics, rect: CardRect, style: Pick<BoardRenderStyle, "corner" | "radius">, shadow: BoardShadowStyle | null): void;
@@ -31,4 +38,4 @@ declare function isBoardCard(item: {
   type: string;
 }): boolean;
 //#endregion
-export { CardElevation, CardRect, CardSurface, PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, isBoardCard, traceCardOutline, tracePixelRect };
+export { CardCrop, CardElevation, CardRect, CardSurface, PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, fillCardPicture, isBoardCard, traceCardOutline, tracePixelRect };

package/dist/board/render/surface.js

@@ -1,5 +1,6 @@
 import { worldPoint } from "../model/geometry.js";
 import { roundRectPoints } from "./stroke.js";
+import { Matrix } from "pixi.js";
 //#region src/board/render/surface.ts
 const PIXEL_STEP = 2;
 const SHADOW_LAYERS = 5;
@@ -12,6 +13,19 @@ function traceCardOutline(graphics, rect, style, grow = 0) {
 	const radius = Math.min(Math.max(0, style.radius + grow), width / 2, height / 2);
 	return radius > 0 ? graphics.roundRect(x, y, width, height, radius) : graphics.rect(x, y, width, height);
 }
+function fillCardPicture(graphics, texture, picture, style, crop) {
+	const sampling = texture.source.style;
+	if (sampling.addressMode !== "mirror-repeat") {
+		sampling.addressMode = "mirror-repeat";
+		sampling.update();
+	}
+	const matrix = crop ? new Matrix(1 / crop.w, 0, 0, 1 / crop.h, -crop.x / crop.w, -crop.y / crop.h) : void 0;
+	return traceCardOutline(graphics, picture, style).fill({
+		texture,
+		textureSpace: "local",
+		...matrix ? { matrix } : {}
+	});
+}
 function tracePixelRect(graphics, x, y, width, height, step) {
 	const s = Math.min(step, width / 4, height / 4);
 	if (s <= 0) return graphics.rect(x, y, width, height);
@@ -129,4 +143,4 @@ function isBoardCard(item) {
 	return !FREE_FORM_TYPES.has(item.type);
 }
 //#endregion
-export { PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, isBoardCard, traceCardOutline, tracePixelRect };
+export { PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, fillCardPicture, isBoardCard, traceCardOutline, tracePixelRect };

package/dist/board/render/text-resolution.d.ts

@@ -6,15 +6,12 @@ declare function getBoardResolution(size?: {
 }, devicePixelRatio?: number): number;
 declare function textZoomBucket(zoom: number): number;
 declare function boardCardDetailed(zoom: number): boolean;
-/** Effective text resolution for a given camera zoom. */
-declare function textResolutionForZoom(zoom: number): number;
-/** Update a Pixi text texture only when zoom crosses a resolution bucket. */
-declare function syncTextResolution(text: Text, state: {
-  resolution: number;
-}, zoom: number): void;
+/** Exact screen density at rest; reuse or step the raster while moving. */
+declare function boardTextResolution(target: number, current: number, settled: boolean): number;
+declare function syncTextResolution(text: Text, resolution: number): void;
 /** Defer expensive Pixi word-wrap rasterisation during a live resize. */
 declare function syncTextWrapWidth(text: Text, state: {
   wrapWidth: number;
 }, width: number, defer: boolean): void;
 //#endregion
-export { boardCardDetailed, getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket };
+export { boardCardDetailed, boardTextResolution, getBoardResolution, syncTextResolution, syncTextWrapWidth, textZoomBucket };

package/dist/board/render/text-resolution.js

@@ -1,19 +1,16 @@
 //#region src/board/render/text-resolution.ts
 const MAX_BOARD_RESOLUTION = 3;
-const MAX_BOARD_PIXELS = 8e6;
-const MAX_TEXT_RESOLUTION = 6;
+const MAX_BOARD_PIXELS = 1e7;
+const MIN_TEXT_RESOLUTION = .125;
+const MAX_TEXT_EDGE = 4096;
+const TEXT_UPSCALE_TOLERANCE = 1.25;
 function getBoardResolution(size, devicePixelRatio = globalThis.devicePixelRatio) {
 	const density = Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1;
 	const pixels = size ? size.width * size.height : 0;
-	const budget = pixels > 0 ? Math.sqrt(MAX_BOARD_PIXELS / pixels) : MAX_BOARD_RESOLUTION;
+	const budget = pixels > 0 ? Math.max(1, Math.sqrt(MAX_BOARD_PIXELS / pixels)) : MAX_BOARD_RESOLUTION;
 	return Math.min(density, MAX_BOARD_RESOLUTION, budget);
 }
-/**
-* Zoom buckets for text re-rasterisation. Pixi Text is a bitmap: at high zoom it
-* looks soft unless we raise its resolution. We quantise zoom into a few
-* buckets so small zoom changes don't thrash texture regeneration.
-*/
-const TEXT_ZOOM_BUCKETS = [
+const ZOOM_BUCKETS = [
 	.5,
 	1,
 	1.5,
@@ -23,23 +20,24 @@ const TEXT_ZOOM_BUCKETS = [
 ];
 function textZoomBucket(zoom) {
 	const clamped = Math.max(.1, Math.min(4, zoom));
-	for (const bucket of TEXT_ZOOM_BUCKETS) if (clamped <= bucket) return bucket;
-	return TEXT_ZOOM_BUCKETS[TEXT_ZOOM_BUCKETS.length - 1] ?? 4;
+	for (const bucket of ZOOM_BUCKETS) if (clamped <= bucket) return bucket;
+	return ZOOM_BUCKETS[ZOOM_BUCKETS.length - 1] ?? 4;
 }
 function boardCardDetailed(zoom) {
 	return textZoomBucket(zoom) >= 1;
 }
-/** Effective text resolution for a given camera zoom. */
-function textResolutionForZoom(zoom) {
-	const bucket = textZoomBucket(zoom);
-	return Math.min(getBoardResolution() * Math.max(1, bucket), MAX_TEXT_RESOLUTION);
+/** Exact screen density at rest; reuse or step the raster while moving. */
+function boardTextResolution(target, current, settled) {
+	if (!Number.isFinite(target) || target <= 0) return current > 0 ? current : 1;
+	if (settled || !(current > 0)) return target;
+	if (target <= current * TEXT_UPSCALE_TOLERANCE && target >= current / 2) return current;
+	return 2 ** Math.ceil(Math.log2(target));
 }
-/** Update a Pixi text texture only when zoom crosses a resolution bucket. */
-function syncTextResolution(text, state, zoom) {
-	const resolution = textResolutionForZoom(zoom);
-	if (resolution === state.resolution && resolution === text.resolution) return;
-	text.resolution = resolution;
-	state.resolution = resolution;
+function syncTextResolution(text, resolution) {
+	const { width, height } = text.bounds;
+	const limit = MAX_TEXT_EDGE / Math.max(1, Math.ceil(width + text.style.padding * 2), Math.ceil(height + text.style.padding * 2));
+	const next = Math.min(limit, Math.max(MIN_TEXT_RESOLUTION, resolution));
+	if (text.resolution !== next) text.resolution = next;
 }
 /** Defer expensive Pixi word-wrap rasterisation during a live resize. */
 function syncTextWrapWidth(text, state, width, defer) {
@@ -48,4 +46,4 @@ function syncTextWrapWidth(text, state, width, defer) {
 	state.wrapWidth = width;
 }
 //#endregion
-export { boardCardDetailed, getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket };
+export { boardCardDetailed, boardTextResolution, getBoardResolution, syncTextResolution, syncTextWrapWidth, textZoomBucket };

package/dist/board/replica/index.js

@@ -1,5 +1,6 @@
 import { applyBoardDelta, applyBoardPatchToDocument, parseBoardDocument } from "../../protocol/dist/board-patch.js";
 import { createBoardEntityId } from "../model/items/id.js";
+import { shareBoardDocument } from "../model/document-share.js";
 //#region src/board/replica/index.ts
 function memoryStorage() {
 	return {
@@ -118,7 +119,9 @@ function createBoardReplica(options) {
 		title = result.title;
 		if (readPlaybackRevision === playbackRevision) playback = result.playback;
 		loaded = true;
-		adoptServer(parsed.document, result.version, true);
+		const next = shareBoardDocument(server, parsed.document);
+		if (next === server && result.version === version) return;
+		adoptServer(next, result.version, true);
 	}
 	function refresh() {
 		if (refreshing) {

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

@@ -1,5 +1,6 @@
 import { ModelFormat } from "../../protocol/dist/fs/mime.js";
 import { BoardSceneItem } from "../model/scene.js";
+import { BoardAssetUrlOptions } from "../model/media-playback.js";
 import "../model/index.js";
 import { LruBudget } from "./lru.js";
 import { BoardImageTexturePool } from "./texture-pool.js";
@@ -7,7 +8,12 @@ import { Texture } from "pixi.js";
 //#region src/board/stage/assets.d.ts
 type BoardUrlMedia = "image" | "video";
 type BoardAssetMedia = BoardUrlMedia | "model";
+declare function boardTextureEdge(item: BoardSceneItem, scale: number): number;
 declare function boardAssetKey(item: BoardSceneItem): string | null;
+type Size = {
+  width: number;
+  height: number;
+};
 type BoardModelPreviewRequest = {
   key: string;
   src: string;
@@ -21,24 +27,22 @@ type BoardModelPreviews = {
 type BoardAssetManager = {
   assetKey: (item: BoardSceneItem) => string | null;
   invalidatePath: (path: string) => void;
-  requestItem: (item: BoardSceneItem) => void;
+  requestItem: (item: BoardSceneItem, edge?: number) => void;
   getTexture: (key: string) => Texture | null;
-  getNaturalSize: (key: string) => {
-    width: number;
-    height: number;
-  } | null;
+  getNaturalSize: (key: string) => Size | null;
   hasError: (key: string) => boolean;
   acquire: (key: string) => void;
   release: (key: string) => void;
   withTextures: <T>(items: BoardSceneItem[], use: (textures: Map<string, Texture>) => T | Promise<T>, options?: {
     timeoutMs?: number;
+    edge?: (item: BoardSceneItem) => number;
   }) => Promise<T>;
-  subscribe: (listener: () => void) => () => void;
+  subscribe: (listener: (key: string) => void) => () => void;
   destroy: () => void;
 };
 type BoardAssetManagerOptions = {
   /** Resolve a Space file path to a URL a texture can load from; null when unavailable. */
-  resolveFileUrl: (path: string) => Promise<string | null>;
+  resolveFileUrl: (path: string, options?: BoardAssetUrlOptions) => Promise<string | null>;
   concurrency?: number;
   videoConcurrency?: number;
   loadVideoPreviews?: boolean;
@@ -51,4 +55,4 @@ type BoardAssetManagerOptions = {
 };
 declare function createBoardAssetManager(options: BoardAssetManagerOptions): BoardAssetManager;
 //#endregion
-export { BoardAssetManager, BoardAssetManagerOptions, BoardModelPreviewRequest, BoardModelPreviews, boardAssetKey, createBoardAssetManager };
+export { BoardAssetManager, BoardAssetManagerOptions, BoardModelPreviewRequest, BoardModelPreviews, boardAssetKey, boardTextureEdge, createBoardAssetManager };

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/canvas-size.d.ts

@@ -0,0 +1,18 @@
+//#region src/board/stage/canvas-size.d.ts
+type BoardCanvasBox = {
+  width: number;
+  height: number;
+  density: number;
+  device: {
+    width: number;
+    height: number;
+  } | null;
+};
+declare function measureBoardCanvasBox(entry: ResizeObserverEntry, density: number): BoardCanvasBox;
+declare function boardCanvasSize(box: BoardCanvasBox, density: number): {
+  width: number;
+  height: number;
+  resolution: number;
+};
+//#endregion
+export { BoardCanvasBox, boardCanvasSize, measureBoardCanvasBox };