@neta-art/cohub 12.0.0 → 12.1.1

package/dist/board/render/renderers/text-card-renderer.js

@@ -1,8 +1,8 @@
 import { layoutBoardText } from "../../../protocol/dist/board-layout.js";
 import { boardFontFamily } from "../../model/text-metrics.js";
-import { syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
-import { BOARD_FONT_STACKS } from "../text-measurement.js";
 import { itemAlpha, itemColor } from "../palette.js";
+import { BOARD_FONT_STACKS } from "../text-measurement.js";
+import { syncTextResolution } from "../text-resolution.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
 import { Container, Graphics, Text } from "pixi.js";
@@ -32,7 +32,6 @@ function sync(container, item, context) {
 	const anchorX = props.align === "center" ? .5 : props.align === "right" ? 1 : 0;
 	parts.body.anchor.set(anchorX, 0);
 	parts.body.position.set(item.frame.width * anchorX, 0);
-	syncTextResolution(parts.body, parts, context.zoom * Math.max(1, previewScale));
 	parts.body.alpha = itemAlpha(context, item.style.fill);
 	parts.caret.alpha = parts.body.alpha;
 	const ink = itemColor(context, item.style.fill, "neutral");
@@ -62,6 +61,7 @@ function sync(container, item, context) {
 			breakWords: true
 		});
 	}
+	syncTextResolution(parts.body, context.textResolution * previewScale);
 	syncCaret(parts, item, context);
 }
 const textCardRenderer = {
@@ -69,11 +69,10 @@ const textCardRenderer = {
 	canRender: (item) => item.type === "text",
 	create: (item, context) => {
 		const root = new Container();
-		const resolution = textResolutionForZoom(context.zoom);
 		const body = new Text({
 			text: "",
 			style: { fontFamily: BOARD_FONT_STACKS.sans },
-			resolution,
+			resolution: context.textResolution,
 			roundPixels: true
 		});
 		const caret = new Graphics();
@@ -82,7 +81,6 @@ const textCardRenderer = {
 			root,
 			body,
 			caret,
-			resolution,
 			contentSig: ""
 		});
 		if (item.type === "text") sync(root, item, context);
@@ -93,7 +91,7 @@ const textCardRenderer = {
 	},
 	resolution: (container, _item, context) => {
 		const parts = partsByContainer.get(container);
-		if (parts) syncTextResolution(parts.body, parts, context.zoom * Math.max(1, parts.body.scale.x));
+		if (parts) syncTextResolution(parts.body, context.textResolution * parts.body.scale.x);
 	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "text") return;

package/dist/board/render/renderers/unknown-card-renderer.js

@@ -1,5 +1,5 @@
 import { BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
+import { syncTextResolution } from "../text-resolution.js";
 import { cardElevation, drawCardSurface, traceCardOutline } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
@@ -12,7 +12,6 @@ function sync(container, item, context) {
 	positionShell(parts.root, item);
 	const { width, height } = item.frame;
 	const realType = item.type;
-	syncTextResolution(parts.label, parts, context.zoom);
 	const elevation = cardElevation(context, item.id);
 	const visualSig = [
 		width,
@@ -47,6 +46,7 @@ function sync(container, item, context) {
 		parts.label.text = realType;
 		parts.label.style.fill = context.palette.muted;
 	}
+	syncTextResolution(parts.label, context.textResolution);
 	parts.label.position.set(width / 2, height / 2);
 }
 const unknownCardRenderer = {
@@ -56,7 +56,6 @@ const unknownCardRenderer = {
 		const root = new Container();
 		const box = new Graphics();
 		box.context.batchMode = "batch";
-		const resolution = textResolutionForZoom(context.zoom);
 		const label = new Text({
 			text: "",
 			style: {
@@ -64,7 +63,7 @@ const unknownCardRenderer = {
 				fontSize: 11,
 				fontWeight: "600"
 			},
-			resolution,
+			resolution: context.textResolution,
 			roundPixels: true
 		});
 		label.anchor.set(.5);
@@ -74,8 +73,7 @@ const unknownCardRenderer = {
 			box,
 			label,
 			visualSig: "",
-			textSig: "",
-			resolution
+			textSig: ""
 		});
 		sync(root, item, context);
 		return root;
@@ -85,7 +83,7 @@ const unknownCardRenderer = {
 	},
 	resolution: (container, _item, context) => {
 		const parts = partsByContainer.get(container);
-		if (parts) syncTextResolution(parts.label, parts, context.zoom);
+		if (parts) syncTextResolution(parts.label, context.textResolution);
 	},
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {

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/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 };

package/dist/board/stage/canvas-size.js

@@ -0,0 +1,31 @@
+import { getBoardResolution } from "../render/text-resolution.js";
+//#region src/board/stage/canvas-size.ts
+function measureBoardCanvasBox(entry, density) {
+	const css = entry.contentBoxSize?.[0];
+	const device = entry.devicePixelContentBoxSize?.[0];
+	return {
+		width: css?.inlineSize ?? entry.contentRect.width,
+		height: css?.blockSize ?? entry.contentRect.height,
+		density,
+		device: device ? {
+			width: device.inlineSize,
+			height: device.blockSize
+		} : null
+	};
+}
+function boardCanvasSize(box, density) {
+	const resolution = getBoardResolution(box, density);
+	const { device } = box;
+	if (device && box.density === density && resolution === density) return {
+		width: device.width / density,
+		height: device.height / density,
+		resolution
+	};
+	return {
+		width: box.width,
+		height: box.height,
+		resolution
+	};
+}
+//#endregion
+export { boardCanvasSize, measureBoardCanvasBox };

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

@@ -24,6 +24,10 @@ type SceneSyncInput = {
   structureVersion: number;
   geometryVersion: number;
   gestureActive: boolean;
+  focus?: {
+    x: number;
+    y: number;
+  };
 };
 type BoardSceneNode = {
   item: BoardSceneItem;
@@ -43,7 +47,7 @@ declare function createBoardScene(options: {
   world: Container;
   overlay: Graphics;
   getRenderer: BoardCardRendererResolver;
-  onFarLayerFrame?: () => void;
+  requestFrame?: () => void;
 }): BoardScene;
 //#endregion
 export { BoardLiveStroke, BoardScene, BoardSceneNode, SceneSyncInput, createBoardScene };

package/dist/board/stage/scene.js

@@ -1,6 +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 { 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
@@ -8,6 +8,7 @@ const FAR_LAYER_ENTER = 450;
 const FAR_LAYER_EXIT = 350;
 const FAR_PASS_BATCH = 240;
 const FAR_LIVE_LIMIT = 64;
+const RESOLUTION_BATCH = 32;
 const Z_FAR_LAYER = -1;
 const Z_LIFTED = 1e9;
 const Z_LIVE_STROKE = Number.MAX_SAFE_INTEGER - 1;
@@ -40,6 +41,7 @@ function createBoardScene(options) {
 	let lastStructureVersion = -1;
 	let lastZoom = NaN;
 	let lastResolution = "";
+	const pendingResolution = /* @__PURE__ */ new Set();
 	let liveVersion = 0;
 	let lifted = /* @__PURE__ */ new Set();
 	const liveStrokes = /* @__PURE__ */ new Map();
@@ -69,6 +71,7 @@ function createBoardScene(options) {
 	function recycle(id, entry, context, destroyed) {
 		setHeldKey(context, id, null);
 		cards.delete(id);
+		pendingResolution.delete(id);
 		animatedIds.delete(id);
 		tickingIds.delete(id);
 		if (destroyed) return;
@@ -182,7 +185,7 @@ function createBoardScene(options) {
 			}
 			if (index < ids.length) {
 				farFrame = requestAnimationFrame(step);
-				if (target === farFront) options.onFarLayerFrame?.();
+				if (target === farFront) options.requestFrame?.();
 				return;
 			}
 			if (target === farBack) {
@@ -195,7 +198,7 @@ function createBoardScene(options) {
 			farFront.visible = farActive;
 			farPainted = true;
 			farRunning = false;
-			options.onFarLayerFrame?.();
+			options.requestFrame?.();
 			if (farQueued) runFarPass();
 		};
 		step();
@@ -292,9 +295,11 @@ 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 resolution = `${textZoomBucket(context.zoom)}:${context.textResolution}`;
+		if (resolution !== lastResolution) {
+			lastResolution = resolution;
+			queueResolution(input.focus);
+		}
 		const structureChanged = structureVersion !== lastStructureVersion;
 		if (structureChanged) {
 			lastStructureVersion = structureVersion;
@@ -376,11 +381,10 @@ function createBoardScene(options) {
 				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);
+				pendingResolution.delete(id);
 			}
 		}
+		refreshResolution(context);
 		if (liveSetChanged) liveVersion += 1;
 		if (structureChanged || liveSetChanged) syncClips(scene);
 		if (context.zoom !== lastZoom) {
@@ -392,6 +396,27 @@ function createBoardScene(options) {
 		if (structureChanged || farModeChanged || liveSetChanged || liftChanged) applyChildOrder(scene);
 		syncLiveStrokes(input);
 	}
+	function queueResolution(focus) {
+		const ids = [...cards].filter(([, entry]) => entry.renderer.resolution);
+		if (focus) {
+			const distance = ({ item: { frame } }) => (frame.x + frame.width / 2 - focus.x) ** 2 + (frame.y + frame.height / 2 - focus.y) ** 2;
+			ids.sort(([, a], [, b]) => distance(a) - distance(b));
+		}
+		pendingResolution.clear();
+		for (const [id] of ids) pendingResolution.add(id);
+	}
+	function refreshResolution(context) {
+		let budget = RESOLUTION_BATCH;
+		for (const id of pendingResolution) {
+			if (budget-- === 0) break;
+			pendingResolution.delete(id);
+			const entry = cards.get(id);
+			if (!entry) continue;
+			entry.renderer.resolution?.(entry.container, entry.item, context);
+			if (entry.renderer.tick) tickingIds.add(id);
+		}
+		if (pendingResolution.size) options.requestFrame?.();
+	}
 	function tick(clock) {
 		let next = null;
 		for (const id of tickingIds) {
@@ -433,6 +458,7 @@ function createBoardScene(options) {
 		lastStructureVersion = -1;
 		lastZoom = NaN;
 		lastResolution = "";
+		pendingResolution.clear();
 	}
 	return {
 		sync,

package/dist/board/stage/stage.js

@@ -1,6 +1,6 @@
 import { applyMatrix, invertMatrix } from "../../protocol/dist/board-layout.js";
 import { featuredTaskArtifact } from "../../protocol/dist/board-task.js";
-import { pointToWorld, 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";
@@ -9,16 +9,17 @@ import { buildFallbackShapeColors, pickBoardColor, resolveItemColor } from "../m
 import { elementClientToLocal } from "../model/client-geometry.js";
 import { isCreationBoardTool } from "../editor/tool.js";
 import { resizeCursorForHandle } from "../editor/selection-transform.js";
-import { createBoardPlayer } from "../player/index.js";
-import { createBoardScriptObservers } from "../model/script-observers.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 } from "../render/text-resolution.js";
-import { defaultBoardPalette, itemAlpha } from "../render/palette.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 { 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";
@@ -26,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
@@ -111,6 +113,7 @@ function mountBoardStage(host, options) {
 	let cardTickDue = 0;
 	const staleIds = /* @__PURE__ */ new Set();
 	let resizeFrame = 0;
+	let canvasBox = null;
 	let cardEpoch = 0;
 	let surface = {
 		width: 0,
@@ -146,6 +149,7 @@ function mountBoardStage(host, options) {
 		return cull.ids;
 	}
 	const textureScale = () => renderCamera().zoom * (app?.renderer.resolution ?? 1);
+	const textResolution = createTextResolutionTracker(TEXTURE_SETTLE_MS, scheduleTick);
 	let refined = {
 		scale: 0,
 		geometry: 0
@@ -240,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),
@@ -631,6 +636,7 @@ function mountBoardStage(host, options) {
 		world.position.set(camera.x, camera.y);
 		world.scale.set(camera.zoom);
 		const ids = visibleIds();
+		textResolution.update(textureScale());
 		const context = renderContext(current, renderScene, frame.time);
 		if (animationId && effectSampler) {
 			context.time = editor.playhead?.time ?? frame.time;
@@ -657,7 +663,8 @@ function mountBoardStage(host, options) {
 			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) {
@@ -692,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);
@@ -853,14 +864,17 @@ function mountBoardStage(host, options) {
 		}
 		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,
@@ -885,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);
@@ -903,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();
@@ -990,6 +1010,7 @@ function mountBoardStage(host, options) {
 			pointers.cancel();
 			stopMarch();
 			stopRefine();
+			textResolution.dispose();
 			scriptPointers.clear();
 			stopTransforms?.();
 			scriptObservers.clear();

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/chunks/app-realtime.js

@@ -1,5 +1,5 @@
 import { O as readRtcTransportStats, k as waitForIceGathering } from "./http.js";
-import { o as REALTIME_ROOM_EVENT_NAME_PATTERN, t as HttpError } from "./transport.js";
+import { c as HttpError, p as REALTIME_ROOM_EVENT_NAME_PATTERN } from "./http-error.js";
 import { z } from "zod";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;

package/dist/chunks/{transport.js → http-error.js}

@@ -509,4 +509,40 @@ var HttpTransport = class {
 	}
 };
 //#endregion
-export { requestSourceToHeaders as A, isRequestSourceClientId as C, normalizeRequestSource as D, mergeRequestSourceIntoMeta as E, isUuid as M, isUuidLike as N, parseRequestSourceFromHeaders as O, isUuidOrShortUuid as P, hasRequestSourceIdentity as S, isRequestSourceUuid as T, isRealtimeDomain as _, sanitizeAccessToken as a, COHUB_SOURCE_HEADER_NAMES as b, WS_BOARD_AWARENESS_CAPABILITY as c, WS_REALTIME_ROOM_HISTORY_CAPABILITY as d, WS_REALTIME_ROOM_RTC_CAPABILITY as f, getSessionTurnPatchStreamKey as g, getRealtimeSpaceRoom as h, matchesUnauthorizedErrorToken as i, resolveRequestSourceChannel as j, readRequestSourceFromEnv as k, WS_COMPACT_STREAM_CAPABILITY as l, getRealtimeBoardRoom as m, HttpTransport as n, REALTIME_ROOM_EVENT_NAME_PATTERN as o, WS_ROOM_SUBSCRIPTION_CAPABILITY as p, joinApiUrl as r, REALTIME_ROOM_MAX_PAYLOAD_BYTES as s, HttpError as t, WS_REALTIME_ROOM_CAPABILITY as u, normalizeRealtimeRooms as v, isRequestSourceEmpty as w, REQUEST_SOURCE_VIA_MAX_LENGTH as x, COHUB_SOURCE_HEADER as y };
+//#region src/http-error.ts
+/** Shared HTTP error code for every plan entitlement gate (402). */
+const FEATURE_NOT_ENTITLED_ERROR_CODE = "feature_not_entitled";
+/** Shared HTTP error code for a blocked usage gate (negative balance limit, 402). */
+const BILLING_ACCESS_BLOCKED_ERROR_CODE = "billing_credit_limit_exceeded";
+function isHttpErrorCode(error, code) {
+	return error instanceof HttpError && error.code === code;
+}
+function isFeatureNotEntitledError(error) {
+	return isHttpErrorCode(error, FEATURE_NOT_ENTITLED_ERROR_CODE);
+}
+function isBillingAccessBlockedError(error) {
+	return isHttpErrorCode(error, BILLING_ACCESS_BLOCKED_ERROR_CODE);
+}
+function isBillingAccessBlockedCode(code) {
+	return code === BILLING_ACCESS_BLOCKED_ERROR_CODE;
+}
+const isRecord = (value) => !!value && typeof value === "object" && !Array.isArray(value);
+function isBillingConversionIntent(value) {
+	if (!isRecord(value)) return false;
+	return (value.level === "soft" || value.level === "hard") && typeof value.title === "string" && typeof value.message === "string" && isRecord(value.primaryAction) && value.primaryAction.action === "open_billing_conversion";
+}
+/**
+* Extracts the standard `billing` payload from a response body, an
+* `HttpError`, or a bare billing payload (e.g. a realtime error event's
+* `billing` field). Returns `null` unless it carries a valid conversion
+* intent.
+*/
+function extractBillingPayload(source) {
+	const root = source instanceof HttpError ? source.body : source;
+	if (!isRecord(root)) return null;
+	const billing = isRecord(root.billing) ? root.billing : root;
+	if (!isBillingConversionIntent(billing.conversion)) return null;
+	return billing;
+}
+//#endregion
+export { isRequestSourceClientId as A, isUuidLike as B, getSessionTurnPatchStreamKey as C, COHUB_SOURCE_HEADER_NAMES as D, COHUB_SOURCE_HEADER as E, parseRequestSourceFromHeaders as F, readRequestSourceFromEnv as I, requestSourceToHeaders as L, isRequestSourceUuid as M, mergeRequestSourceIntoMeta as N, REQUEST_SOURCE_VIA_MAX_LENGTH as O, normalizeRequestSource as P, resolveRequestSourceChannel as R, getRealtimeSpaceRoom as S, normalizeRealtimeRooms as T, isUuidOrShortUuid as V, WS_REALTIME_ROOM_CAPABILITY as _, isBillingAccessBlockedError as a, WS_ROOM_SUBSCRIPTION_CAPABILITY as b, HttpError as c, matchesUnauthorizedErrorToken as d, sanitizeAccessToken as f, WS_COMPACT_STREAM_CAPABILITY as g, WS_BOARD_AWARENESS_CAPABILITY as h, isBillingAccessBlockedCode as i, isRequestSourceEmpty as j, hasRequestSourceIdentity as k, HttpTransport as l, REALTIME_ROOM_MAX_PAYLOAD_BYTES as m, FEATURE_NOT_ENTITLED_ERROR_CODE as n, isFeatureNotEntitledError as o, REALTIME_ROOM_EVENT_NAME_PATTERN as p, extractBillingPayload as r, isHttpErrorCode as s, BILLING_ACCESS_BLOCKED_ERROR_CODE as t, joinApiUrl as u, WS_REALTIME_ROOM_HISTORY_CAPABILITY as v, isRealtimeDomain as w, getRealtimeBoardRoom as x, WS_REALTIME_ROOM_RTC_CAPABILITY as y, isUuid as z };