@neta-art/cohub 12.1.1 → 12.3.0

package/dist/board/stage/bench.js

@@ -0,0 +1,153 @@
+//#region src/board/stage/bench.ts
+const STEP = {
+	name: "step",
+	frames: 1,
+	rest: 3e3,
+	wheel: { deltaY: 960 }
+};
+const BOARD_BENCH_PHASES = [
+	{
+		name: "zoom in",
+		frames: 15,
+		wheel: {
+			deltaY: -10,
+			ctrlKey: true
+		}
+	},
+	{
+		name: "close",
+		frames: 12,
+		wheel: {
+			deltaY: -10,
+			ctrlKey: true
+		}
+	},
+	STEP,
+	STEP,
+	STEP,
+	{
+		name: "pan close",
+		frames: 60,
+		wheel: {
+			deltaX: -24,
+			deltaY: 16
+		}
+	},
+	{
+		name: "zoom out",
+		frames: 12,
+		wheel: {
+			deltaY: 10,
+			ctrlKey: true
+		}
+	},
+	{
+		name: "pan",
+		frames: 120,
+		wheel: { deltaX: 24 }
+	},
+	{
+		name: "overview",
+		frames: 16,
+		wheel: {
+			deltaY: 10,
+			ctrlKey: true
+		}
+	}
+];
+const SETTLE_LIMIT_MS = 2e4;
+const LONG_FRAME_MS = 50;
+function percentiles(values) {
+	const sorted = [...values].sort((a, b) => a - b);
+	const at = (ratio) => sorted[Math.min(sorted.length - 1, Math.floor(sorted.length * ratio))] ?? 0;
+	return {
+		p50: at(.5),
+		p95: at(.95),
+		max: sorted[sorted.length - 1] ?? 0
+	};
+}
+const nextFrame = () => new Promise((resolve) => requestAnimationFrame(resolve));
+async function settle(stage, since) {
+	const times = {};
+	for (;;) {
+		const now = await nextFrame();
+		const { waiting, settling, loading } = stage.stats();
+		const at = now - since;
+		if (times.shown === void 0 && waiting === 0) times.shown = at;
+		if (times.ready === void 0 && !settling) times.ready = at;
+		if (times.loaded === void 0 && !settling && loading === 0) times.loaded = at;
+		if (times.loaded !== void 0 || at >= SETTLE_LIMIT_MS) return {
+			shown: times.shown ?? SETTLE_LIMIT_MS,
+			ready: times.ready ?? SETTLE_LIMIT_MS,
+			loaded: times.loaded ?? SETTLE_LIMIT_MS
+		};
+	}
+}
+function measureFrameWork() {
+	const original = globalThis.requestAnimationFrame;
+	let work = 0;
+	globalThis.requestAnimationFrame = (callback) => original((time) => {
+		const start = performance.now();
+		try {
+			callback(time);
+		} finally {
+			work += performance.now() - start;
+		}
+	});
+	return {
+		take: () => {
+			const taken = work;
+			work = 0;
+			return taken;
+		},
+		stop: () => {
+			globalThis.requestAnimationFrame = original;
+		}
+	};
+}
+async function runBoardStageBench(stage, { since = performance.now(), phases = BOARD_BENCH_PHASES } = {}) {
+	await stage.ready;
+	const canvas = stage.renderer?.canvas;
+	if (!canvas) throw new Error("Board stage has no canvas.");
+	const open = await settle(stage, since);
+	const rect = canvas.getBoundingClientRect();
+	const work = measureFrameWork();
+	try {
+		const reports = [];
+		for (const phase of phases) {
+			if (phase.rest) await new Promise((resolve) => setTimeout(resolve, phase.rest));
+			const intervals = [];
+			const costs = [];
+			let previous = await nextFrame();
+			for (let frame = 0; frame < phase.frames; frame += 1) {
+				canvas.dispatchEvent(new WheelEvent("wheel", {
+					bubbles: true,
+					cancelable: true,
+					clientX: rect.left + rect.width / 2,
+					clientY: rect.top + rect.height / 2,
+					...phase.wheel
+				}));
+				work.take();
+				const now = await nextFrame();
+				costs.push(work.take());
+				intervals.push(now - previous);
+				previous = now;
+			}
+			reports.push({
+				name: phase.name,
+				frame: percentiles(intervals),
+				work: percentiles(costs),
+				long: intervals.filter((interval) => interval > LONG_FRAME_MS).length,
+				...await settle(stage, previous)
+			});
+		}
+		return {
+			open,
+			phases: reports
+		};
+	} finally {
+		work.stop();
+	}
+}
+//#endregion
+export { BOARD_BENCH_PHASES, runBoardStageBench };

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

@@ -0,0 +1,41 @@
+import { BoardLod } from "../render/lod.js";
+import { LruBudget } from "./lru.js";
+//#region src/board/stage/device.d.ts
+type BoardDeviceTier = "low" | "standard" | "high";
+type BoardDeviceSignals = {
+  phone?: boolean;
+  memory?: number;
+  cores?: number;
+  saveData?: boolean;
+  slowNetwork?: boolean;
+};
+type BoardDeviceBudget = {
+  tier: BoardDeviceTier;
+  lod: BoardLod;
+  lru: LruBudget;
+  concurrency: number;
+  prefetch: number;
+};
+declare const BOARD_DEVICE_TIERS: readonly BoardDeviceTier[];
+type BoardDeviceEnvironment = {
+  navigator?: Navigator & {
+    deviceMemory?: number;
+    connection?: {
+      saveData?: boolean;
+      effectiveType?: string;
+    };
+  };
+  matchMedia?: (query: string) => {
+    matches: boolean;
+  };
+  screen?: {
+    width: number;
+    height: number;
+  };
+};
+declare function readBoardDeviceSignals(environment?: BoardDeviceEnvironment): BoardDeviceSignals;
+declare function boardDeviceTier({ phone, memory, cores }: BoardDeviceSignals): BoardDeviceTier;
+declare function boardDeviceBudget(signals: BoardDeviceSignals, tier?: BoardDeviceTier): BoardDeviceBudget;
+declare function defaultBoardDeviceBudget(): BoardDeviceBudget;
+//#endregion
+export { BOARD_DEVICE_TIERS, BoardDeviceBudget, BoardDeviceEnvironment, BoardDeviceSignals, BoardDeviceTier, boardDeviceBudget, boardDeviceTier, defaultBoardDeviceBudget, readBoardDeviceSignals };

package/dist/board/stage/device.js

@@ -0,0 +1,62 @@
+import { COMPACT_BOARD_LOD, DEFAULT_BOARD_LOD } from "../render/lod.js";
+import { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET } from "./lru.js";
+//#region src/board/stage/device.ts
+const BUDGETS = {
+	low: {
+		lod: COMPACT_BOARD_LOD,
+		lru: COMPACT_LRU_BUDGET,
+		concurrency: 4,
+		prefetch: 0
+	},
+	standard: {
+		lod: DEFAULT_BOARD_LOD,
+		lru: DEFAULT_LRU_BUDGET,
+		concurrency: 6,
+		prefetch: .5
+	},
+	high: {
+		lod: DEFAULT_BOARD_LOD,
+		lru: {
+			maxCount: 4096,
+			maxBytes: 402653184
+		},
+		concurrency: 8,
+		prefetch: 1
+	}
+};
+const BOARD_DEVICE_TIERS = Object.keys(BUDGETS);
+const PHONE_SHORT_SIDE = 600;
+function readBoardDeviceSignals(environment = globalThis) {
+	const { navigator: device, matchMedia, screen } = environment;
+	if (!device || !matchMedia || !screen) return {};
+	const connection = device.connection;
+	return {
+		phone: matchMedia("(pointer: coarse)").matches && !matchMedia("(any-pointer: fine)").matches && Math.min(screen.width, screen.height) < PHONE_SHORT_SIDE,
+		memory: device.deviceMemory,
+		cores: device.hardwareConcurrency,
+		saveData: Boolean(connection?.saveData),
+		slowNetwork: /^(slow-2g|2g|3g)$/.test(connection?.effectiveType ?? "")
+	};
+}
+function boardDeviceTier({ phone, memory, cores }) {
+	if (memory !== void 0 && memory <= 2 || cores !== void 0 && cores <= 2) return "low";
+	if (phone) return memory !== void 0 && memory >= 8 ? "standard" : "low";
+	if (memory !== void 0 && memory <= 4 && cores !== void 0 && cores <= 4) return "low";
+	if (memory !== void 0 && memory >= 8 && cores !== void 0 && cores >= 8) return "high";
+	return "standard";
+}
+function boardDeviceBudget(signals, tier = boardDeviceTier(signals)) {
+	const budget = BUDGETS[tier];
+	return {
+		tier,
+		...budget,
+		prefetch: signals.saveData || signals.slowNetwork ? 0 : budget.prefetch
+	};
+}
+let detected;
+function defaultBoardDeviceBudget() {
+	detected ??= boardDeviceBudget(readBoardDeviceSignals());
+	return detected;
+}
+//#endregion
+export { BOARD_DEVICE_TIERS, boardDeviceBudget, boardDeviceTier, defaultBoardDeviceBudget, readBoardDeviceSignals };

package/dist/board/stage/frame-budget.d.ts

@@ -0,0 +1,19 @@
+//#region src/board/stage/frame-budget.d.ts
+type BoardFrameWork = "materialize" | "plate" | "resolution";
+type BoardFrameBudget = {
+  allow(kind: BoardFrameWork): number;
+  spend(kind: BoardFrameWork, units: number, ms: number): void;
+};
+type BoardFrameClock = BoardFrameBudget & {
+  begin(frameTime: number, options: {
+    moving: boolean;
+    chained: boolean;
+  }): void;
+  readonly interval: number;
+};
+declare function fixedBoardFrameBudget(): BoardFrameBudget & {
+  reset(): void;
+};
+declare function createBoardFrameClock(now?: () => number): BoardFrameClock;
+//#endregion
+export { BoardFrameBudget, BoardFrameClock, BoardFrameWork, createBoardFrameClock, fixedBoardFrameBudget };

package/dist/board/stage/frame-budget.js

@@ -0,0 +1,69 @@
+//#region src/board/stage/frame-budget.ts
+const INITIAL = {
+	materialize: 48,
+	plate: 2400,
+	resolution: 32
+};
+const KINDS = Object.keys(INITIAL);
+const MIN_SHARE = 1 / 8;
+const LATE_FRAMES = 1.5;
+const MOVING_SHARE = .25;
+const RESTING_SHARE = .6;
+const COST_SMOOTHING = .3;
+const DEFAULT_INTERVAL = 1e3 / 60;
+const MIN_INTERVAL = 4;
+const INTERVAL_DRIFT = 1.01;
+const perKind = (value) => ({
+	materialize: value,
+	plate: value,
+	resolution: value
+});
+function fixedBoardFrameBudget() {
+	let done = perKind(0);
+	return {
+		allow: (kind) => Math.max(0, INITIAL[kind] - done[kind]),
+		spend(kind, units) {
+			done[kind] += units;
+		},
+		reset() {
+			done = perKind(0);
+		}
+	};
+}
+function createBoardFrameClock(now = () => performance.now()) {
+	let interval = DEFAULT_INTERVAL;
+	let previous = NaN;
+	let deadline = Number.POSITIVE_INFINITY;
+	let late = false;
+	const cost = perKind(0);
+	for (const kind of KINDS) cost[kind] = DEFAULT_INTERVAL * MOVING_SHARE / INITIAL[kind];
+	const last = perKind(0);
+	let done = perKind(0);
+	return {
+		get interval() {
+			return interval;
+		},
+		begin(frameTime, { moving, chained }) {
+			const delta = frameTime - previous;
+			previous = frameTime;
+			late = moving && chained && delta > interval * LATE_FRAMES;
+			if (chained && delta >= MIN_INTERVAL) interval = Math.min(interval * INTERVAL_DRIFT, delta);
+			deadline = now() + interval * (moving ? MOVING_SHARE : RESTING_SHARE);
+			for (const kind of KINDS) if (done[kind] > 0) last[kind] = done[kind];
+			done = perKind(0);
+		},
+		allow(kind) {
+			const floor = Math.ceil(INITIAL[kind] * MIN_SHARE);
+			const fit = Math.floor((deadline - now()) / cost[kind]);
+			const ceiling = late ? Math.floor(last[kind] / 2) : Math.max(INITIAL[kind], last[kind] * 2);
+			return Math.max(done[kind] === 0 ? floor : 0, Math.min(fit, ceiling - done[kind]));
+		},
+		spend(kind, units, ms) {
+			if (units <= 0) return;
+			done[kind] += units;
+			cost[kind] += (Math.max(ms, .001) / units - cost[kind]) * COST_SMOOTHING;
+		}
+	};
+}
+//#endregion
+export { createBoardFrameClock, fixedBoardFrameBudget };

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

@@ -0,0 +1,4 @@
+//#region src/board/stage/idle.d.ts
+declare function scheduleBoardIdle(task: () => void, delay: number): () => void;
+//#endregion
+export { scheduleBoardIdle };

package/dist/board/stage/idle.js

@@ -0,0 +1,26 @@
+//#region src/board/stage/idle.ts
+function scheduleBoardIdle(task, delay) {
+	const scheduler = globalThis.scheduler;
+	if (scheduler?.postTask) {
+		const controller = new AbortController();
+		scheduler.postTask(task, {
+			priority: "background",
+			delay,
+			signal: controller.signal
+		}).catch((error) => {
+			if (!controller.signal.aborted) throw error;
+		});
+		return () => controller.abort();
+	}
+	let idle = 0;
+	const timer = setTimeout(() => {
+		if (typeof requestIdleCallback === "function") idle = requestIdleCallback(task, { timeout: 1e3 });
+		else task();
+	}, delay);
+	return () => {
+		clearTimeout(timer);
+		if (idle) cancelIdleCallback(idle);
+	};
+}
+//#endregion
+export { scheduleBoardIdle };

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

@@ -1,10 +1,14 @@
-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, boardTextureEdge, createBoardAssetManager } from "./assets.js";
-import { toBoardPointerEvent } from "./pointer.js";
-import { createBoardPointerGestures } from "./pointer-gestures.js";
+import { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, LruTrim, planLruTrim, selectLruEvictions } from "./lru.js";
+import { BoardImageTexturePool, boardImageTexturePool, createBoardImageTexturePool, loadBoardImageTexture, loadFittedImageTexture, readTextureTone, shrinkBoardTexture, unloadBoardImageTexture } from "./texture-pool.js";
+import { BoardAssetChange, BoardAssetManager, BoardAssetManagerOptions, BoardAssetPrefetch, BoardModelPreviewRequest, BoardModelPreviews, createBoardAssetManager } from "./assets.js";
+import { BOARD_LONG_PRESS_MS, BoardStagePress } from "./presses.js";
+import { BoardFrameBudget, BoardFrameWork } from "./frame-budget.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 { BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageStats, BoardStageTheme, mountBoardStage } from "./stage.js";
+import { BOARD_BENCH_PHASES, BoardBenchPercentiles, BoardBenchPhase, BoardBenchPhaseReport, BoardBenchReport, BoardBenchSettle, runBoardStageBench } from "./bench.js";
+import { BOARD_DEVICE_TIERS, BoardDeviceBudget, BoardDeviceEnvironment, BoardDeviceSignals, BoardDeviceTier, boardDeviceBudget, boardDeviceTier, defaultBoardDeviceBudget, readBoardDeviceSignals } from "./device.js";
+import { toBoardPointerEvent } from "./pointer.js";
+import { createBoardPointerGestures } from "./pointer-gestures.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, COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, SceneSyncInput, boardAssetKey, boardImageTexturePool, boardTextureEdge, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardPointerGestures, createBoardScene, drawBoardOverlay, expandFrame, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };
+export { BOARD_BENCH_PHASES, BOARD_DEVICE_TIERS, BOARD_LONG_PRESS_MS, BoardAssetChange, BoardAssetManager, BoardAssetManagerOptions, BoardAssetPrefetch, BoardBenchPercentiles, BoardBenchPhase, BoardBenchPhaseReport, BoardBenchReport, BoardBenchSettle, BoardDeviceBudget, BoardDeviceEnvironment, BoardDeviceSignals, BoardDeviceTier, type BoardFrameBudget, type BoardFrameWork, BoardImageTexturePool, BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, BoardLiveStroke, BoardModelPreviewRequest, BoardModelPreviews, BoardOverlayInput, BoardScene, BoardSceneNode, BoardStage, BoardStageOptions, BoardStagePointerPhase, type BoardStagePress, BoardStageStats, BoardStageTheme, COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, LruTrim, SceneSyncInput, boardDeviceBudget, boardDeviceTier, boardImageTexturePool, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardPointerGestures, createBoardScene, defaultBoardDeviceBudget, drawBoardOverlay, expandFrame, loadBoardImageTexture, loadFittedImageTexture, mountBoardStage, planLruTrim, readBoardDeviceSignals, readTextureTone, runBoardStageBench, selectLruEvictions, shrinkBoardTexture, toBoardPointerEvent, unloadBoardImageTexture };

package/dist/board/stage/index.js

@@ -1,10 +1,13 @@
-import { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, selectLruEvictions } from "./lru.js";
-import { boardImageTexturePool, createBoardImageTexturePool, loadBoardImageTexture, unloadBoardImageTexture } from "./texture-pool.js";
-import { boardAssetKey, boardTextureEdge, createBoardAssetManager } from "./assets.js";
+import { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, planLruTrim, selectLruEvictions } from "./lru.js";
+import { BOARD_DEVICE_TIERS, boardDeviceBudget, boardDeviceTier, defaultBoardDeviceBudget, readBoardDeviceSignals } from "./device.js";
+import { boardImageTexturePool, createBoardImageTexturePool, loadBoardImageTexture, loadFittedImageTexture, readTextureTone, shrinkBoardTexture, unloadBoardImageTexture } from "./texture-pool.js";
+import { createBoardAssetManager } from "./assets.js";
+import { BOARD_BENCH_PHASES, runBoardStageBench } from "./bench.js";
 import { toBoardPointerEvent } from "./pointer.js";
 import { createBoardPointerGestures } from "./pointer-gestures.js";
 import { createBoardScene } from "./scene.js";
+import { BOARD_LONG_PRESS_MS } from "./presses.js";
 import { drawBoardOverlay, expandFrame } from "./overlay.js";
 import { createBoardItemViewLayer } from "./views.js";
 import { mountBoardStage } from "./stage.js";
-export { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, boardAssetKey, boardImageTexturePool, boardTextureEdge, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardPointerGestures, createBoardScene, drawBoardOverlay, expandFrame, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };
+export { BOARD_BENCH_PHASES, BOARD_DEVICE_TIERS, BOARD_LONG_PRESS_MS, COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, boardDeviceBudget, boardDeviceTier, boardImageTexturePool, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardPointerGestures, createBoardScene, defaultBoardDeviceBudget, drawBoardOverlay, expandFrame, loadBoardImageTexture, loadFittedImageTexture, mountBoardStage, planLruTrim, readBoardDeviceSignals, readTextureTone, runBoardStageBench, selectLruEvictions, shrinkBoardTexture, toBoardPointerEvent, unloadBoardImageTexture };

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

@@ -6,8 +6,8 @@
  * they enter a "cooling" pool (reference count zero but still on the GPU) so a
  * quick pan back is instant instead of re-fetching. The pool is bounded by
  * both entry count and approximate GPU bytes; when a budget is exceeded the least
- * recently used entries are evicted first. Keeping this decision pure makes the
- * release-vs-churn trade-off trivial to test.
+ * recently used entries shrink or leave first. Keeping this decision pure makes
+ * the release-vs-churn trade-off trivial to test.
  */
 type LruEntry = {
   key: string;
@@ -15,19 +15,23 @@ type LruEntry = {
   lastUsedAt: number;
   /** Approximate GPU footprint in bytes. */
   bytes: number;
+  shrunkBytes?: number;
 };
 type LruBudget = {
   maxCount: number;
   maxBytes: number;
 };
-/** 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
- * an empty array when the pool already fits.
+ * Default cooling-pool ceiling: 2048 images or ~192 MB of GPU memory. Bytes
+ * bind first for full-size textures; shrunk copies let many more stay warm.
  */
+declare const DEFAULT_LRU_BUDGET: LruBudget;
+declare const COMPACT_LRU_BUDGET: LruBudget;
+type LruTrim = {
+  shrink: string[];
+  evict: string[];
+};
+declare function planLruTrim(entries: LruEntry[], budget: LruBudget): LruTrim;
 declare function selectLruEvictions(entries: LruEntry[], budget: LruBudget): string[];
 //#endregion
-export { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, selectLruEvictions };
+export { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, LruTrim, planLruTrim, selectLruEvictions };

package/dist/board/stage/lru.js

@@ -1,33 +1,51 @@
 //#region src/board/stage/lru.ts
-/** Default cooling-pool ceiling: 512 images or ~192 MB of GPU memory. */
+/**
+* Default cooling-pool ceiling: 2048 images or ~192 MB of GPU memory. Bytes
+* bind first for full-size textures; shrunk copies let many more stay warm.
+*/
 const DEFAULT_LRU_BUDGET = {
-	maxCount: 512,
+	maxCount: 2048,
 	maxBytes: 201326592
 };
 const COMPACT_LRU_BUDGET = {
-	maxCount: 256,
+	maxCount: 1024,
 	maxBytes: 100663296
 };
-/**
-* Given the unreferenced (cooling) entries and a budget, return the keys to
-* evict — oldest first — so the remaining pool fits within both limits. Returns
-* an empty array when the pool already fits.
-*/
-function selectLruEvictions(entries, budget) {
-	if (entries.length === 0) return [];
-	let count = entries.length;
+function planLruTrim(entries, budget) {
 	let bytes = 0;
 	for (const entry of entries) bytes += entry.bytes;
-	if (count <= budget.maxCount && bytes <= budget.maxBytes) return [];
+	const over = entries.length - budget.maxCount;
+	if (over <= 0 && bytes <= budget.maxBytes) return {
+		shrink: [],
+		evict: []
+	};
 	const sorted = [...entries].sort((a, b) => a.lastUsedAt - b.lastUsedAt);
-	const evict = [];
-	for (const entry of sorted) {
-		if (count <= budget.maxCount && bytes <= budget.maxBytes) break;
-		evict.push(entry.key);
-		count -= 1;
-		bytes -= entry.bytes;
+	const evict = sorted.slice(0, Math.max(0, over));
+	const kept = sorted.slice(evict.length);
+	for (const entry of evict) bytes -= entry.bytes;
+	const shrink = /* @__PURE__ */ new Set();
+	for (const entry of kept) {
+		if (bytes <= budget.maxBytes) break;
+		if (entry.shrunkBytes === void 0 || entry.shrunkBytes >= entry.bytes) continue;
+		shrink.add(entry);
+		bytes -= entry.bytes - entry.shrunkBytes;
+	}
+	for (const entry of kept) {
+		if (bytes <= budget.maxBytes) break;
+		bytes -= shrink.delete(entry) ? entry.shrunkBytes : entry.bytes;
+		evict.push(entry);
 	}
-	return evict;
+	return {
+		shrink: [...shrink].map(({ key }) => key),
+		evict: evict.map(({ key }) => key)
+	};
+}
+function selectLruEvictions(entries, budget) {
+	return planLruTrim(entries.map(({ key, lastUsedAt, bytes }) => ({
+		key,
+		lastUsedAt,
+		bytes
+	})), budget).evict;
 }
 //#endregion
-export { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, selectLruEvictions };
+export { COMPACT_LRU_BUDGET, DEFAULT_LRU_BUDGET, planLruTrim, selectLruEvictions };

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

@@ -0,0 +1,21 @@
+//#region src/board/stage/presses.d.ts
+declare const BOARD_LONG_PRESS_MS = 450;
+type BoardStagePress = {
+  pointerId: number;
+  pointerType: string;
+  clientX: number;
+  clientY: number;
+};
+declare function boardStagePress(event: PointerEvent): BoardStagePress;
+declare function createBoardLongPress(fire: (press: BoardStagePress) => void): {
+  start(event: PointerEvent): void;
+  move(event: PointerEvent): void;
+  end(event: PointerEvent): void;
+  cancel: () => void;
+};
+declare function createGhostClickGuard(view: Window | null): {
+  arm(): void;
+  dispose: () => void | undefined;
+};
+//#endregion
+export { BOARD_LONG_PRESS_MS, BoardStagePress, boardStagePress, createBoardLongPress, createGhostClickGuard };

package/dist/board/stage/presses.js

@@ -0,0 +1,66 @@
+import "../editor/tool.js";
+//#region src/board/stage/presses.ts
+const BOARD_LONG_PRESS_MS = 450;
+const GHOST_CLICK_MS = 700;
+function boardStagePress(event) {
+	return {
+		pointerId: event.pointerId,
+		pointerType: event.pointerType,
+		clientX: event.clientX,
+		clientY: event.clientY
+	};
+}
+function createBoardLongPress(fire) {
+	let pending = null;
+	const cancel = () => {
+		if (pending) clearTimeout(pending.timer);
+		pending = null;
+	};
+	return {
+		start(event) {
+			if (pending) return cancel();
+			if (event.pointerType === "mouse" || event.button !== 0) return;
+			const press = boardStagePress(event);
+			pending = {
+				press,
+				timer: setTimeout(() => {
+					pending = null;
+					fire(press);
+				}, 450)
+			};
+		},
+		move(event) {
+			if (!pending || event.pointerId !== pending.press.pointerId) return;
+			const { clientX, clientY } = pending.press;
+			if (Math.hypot(event.clientX - clientX, event.clientY - clientY) > 8) cancel();
+		},
+		end(event) {
+			if (pending?.press.pointerId === event.pointerId) cancel();
+		},
+		cancel
+	};
+}
+function createGhostClickGuard(view) {
+	let disarm = null;
+	return {
+		arm() {
+			disarm?.();
+			if (!view) return;
+			const drop = (event) => {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				disarm?.();
+			};
+			const timer = setTimeout(() => disarm?.(), GHOST_CLICK_MS);
+			view.addEventListener("click", drop, true);
+			disarm = () => {
+				clearTimeout(timer);
+				view.removeEventListener("click", drop, true);
+				disarm = null;
+			};
+		},
+		dispose: () => disarm?.()
+	};
+}
+//#endregion
+export { BOARD_LONG_PRESS_MS, boardStagePress, createBoardLongPress, createGhostClickGuard };

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

@@ -1,8 +1,11 @@
 import { BoardDrawPoint } from "../../protocol/dist/board-model.js";
+import { Rect } from "../model/geometry.js";
 import { BoardScene as BoardScene$1, BoardSceneItem } from "../model/scene.js";
 import "../model/index.js";
+import { BoardLod } from "../render/lod.js";
 import { BoardCardRendererResolver, BoardRenderContext } from "../render/renderers/board-renderer-registry.js";
 import "../render/index.js";
+import { BoardFrameBudget } from "./frame-budget.js";
 import { Container, Graphics } from "pixi.js";
 //#region src/board/stage/scene.d.ts
 type BoardLiveStroke = {
@@ -22,12 +25,15 @@ type SceneSyncInput = {
   globalSig: string;
   staleIds?: ReadonlySet<string>;
   structureVersion: number;
-  geometryVersion: number;
   gestureActive: boolean;
   focus?: {
     x: number;
     y: number;
   };
+  /** The world area on screen; live cards outside it skip rendering. */
+  view?: Rect;
+  lod?: BoardLod;
+  budget?: BoardFrameBudget;
 };
 type BoardSceneNode = {
   item: BoardSceneItem;
@@ -37,10 +43,18 @@ type BoardScene = {
   sync: (input: SceneSyncInput) => void;
   getNode: (itemId: string) => BoardSceneNode | null;
   holders: (key: string) => ReadonlySet<string>;
+  repaintFar: (keys: ReadonlySet<string>, assetKey: (item: BoardSceneItem) => string | null) => void;
   readonly liveVersion: number;
   liveIds: () => ReadonlySet<string>;
+  /** Live cards and cards drawn on far plates. */
+  counts: () => {
+    live: number;
+    far: number;
+  };
+  readonly settling: boolean;
   readonly animated: boolean;
   tick: (clock: number) => number | null;
+  redrawText: () => void;
   destroy: (context: BoardRenderContext) => void;
 };
 declare function createBoardScene(options: {