@neta-art/cohub 12.0.0 → 12.1.0

package/dist/board/export/index.js

@@ -2,9 +2,9 @@ import { buildBoardScene } from "../model/scene.js";
 import { resolveBoardAnimationCamera } from "../model/sampling.js";
 import { normalizeBoardDocument, planBoardExport } from "../model/export-plan.js";
 import { parseBoardCssColor } from "../render/css-color.js";
-import { ensureBoardTextMeasurement } from "../render/text-measurement.js";
 import { defaultBoardPalette } from "../render/palette.js";
 import { createBoardRenderSampler } from "../render/sampling.js";
+import { ensureBoardTextMeasurement } from "../render/text-measurement.js";
 import { createBoardExportScene } from "./scene.js";
 import { Rectangle, RendererType } from "pixi.js";
 //#region src/board/export/index.ts

package/dist/board/export/scene.js

@@ -1,7 +1,7 @@
 import { buildFallbackShapeColors } from "../model/palette.js";
 import { imageAssetKey } from "../model/image-key.js";
-import { clippingAncestor, isClippingFrame, syncClipGroup } from "../render/clip.js";
 import { defaultBoardPalette } from "../render/palette.js";
+import { clippingAncestor, isClippingFrame, syncClipGroup } from "../render/clip.js";
 import { DEFAULT_BOARD_RENDER_LABELS, getBoardCardRenderer } from "../render/renderers/board-renderer-registry.js";
 import { resolveBoardRenderStyle } from "../render/style.js";
 import { Container, Graphics, Sprite, TilingSprite } from "pixi.js";
@@ -29,6 +29,7 @@ function buildContext(input) {
 			themeKey: "export",
 			rendererType: "canvas",
 			zoom: input.scale,
+			textResolution: input.scale,
 			reducedMotion: true,
 			labels: DEFAULT_BOARD_RENDER_LABELS,
 			taskRun: () => null,

package/dist/board/render/card-tag.d.ts

@@ -11,7 +11,6 @@ type CardTag = {
   icon: Graphics;
   text: Text | null;
   sig: string;
-  resolution: number;
   width: number;
 };
 declare function createCardTag(): CardTag;

package/dist/board/render/card-tag.js

@@ -1,5 +1,5 @@
 import { fitTextToWidth } from "./text-fit.js";
-import { syncTextResolution, textResolutionForZoom } from "./text-resolution.js";
+import { syncTextResolution } from "./text-resolution.js";
 import { Container, Graphics, Text } from "pixi.js";
 //#region src/board/render/card-tag.ts
 const CARD_TAG_SIZE = 11;
@@ -177,13 +177,15 @@ function createCardTag() {
 		icon,
 		text: null,
 		sig: "",
-		resolution: 0,
 		width: 0
 	};
 }
+function tagScale(zoom) {
+	return Math.min(MAX_GROWTH, Math.max(1, 1 / Math.max(zoom, .01)));
+}
 function zoomCardTag(tag, zoom) {
 	if (!tag.text || !tag.sig) return;
-	const scale = Math.min(MAX_GROWTH, Math.max(1, 1 / Math.max(zoom, .01)));
+	const scale = tagScale(zoom);
 	const span = 17 + tag.text.width;
 	tag.root.scale.set(scale);
 	tag.root.position.set(0, -18 * scale);
@@ -197,7 +199,6 @@ function syncCardTag(tag, input, context) {
 		return;
 	}
 	if (!tag.text) {
-		tag.resolution = textResolutionForZoom(context.zoom);
 		tag.text = new Text({
 			text: "",
 			style: {
@@ -205,30 +206,27 @@ function syncCardTag(tag, input, context) {
 				fontSize: 11,
 				fontWeight: "500"
 			},
-			resolution: tag.resolution,
 			roundPixels: true
 		});
 		tag.root.addChild(tag.text);
 	}
-	syncTextResolution(tag.text, tag, context.zoom);
 	const sig = [
 		input.glyph,
 		input.text,
 		input.width,
 		context.themeKey
 	].join("|");
-	if (sig === tag.sig) {
-		zoomCardTag(tag, context.zoom);
-		return;
+	if (sig !== tag.sig) {
+		tag.sig = sig;
+		const color = context.palette.muted;
+		const pixel = context.style.icons === "pixel";
+		drawCardGlyph(tag.icon.clear(), input.glyph, color, pixel);
+		tag.text.style.fill = color;
+		tag.text.style.fontFamily = context.style.font;
+		fitTextToWidth(tag.text, input.text, Math.max(1, input.width - ICON - GAP));
+		tag.text.position.set(17, (ICON - tag.text.height) / 2);
 	}
-	tag.sig = sig;
-	const color = context.palette.muted;
-	const pixel = context.style.icons === "pixel";
-	drawCardGlyph(tag.icon.clear(), input.glyph, color, pixel);
-	tag.text.style.fill = color;
-	tag.text.style.fontFamily = context.style.font;
-	fitTextToWidth(tag.text, input.text, Math.max(1, input.width - ICON - GAP));
-	tag.text.position.set(17, (ICON - tag.text.height) / 2);
+	syncTextResolution(tag.text, context.textResolution * tagScale(context.zoom));
 	zoomCardTag(tag, context.zoom);
 }
 //#endregion

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

@@ -15,6 +15,6 @@ import { CardCrop, CardElevation, CardRect, CardSurface, PIXEL_STEP, cardElevati
 import { BOARD_EFFECT_MAX_PARTICLES } from "./renderers/effect-card-renderer.js";
 import { ellipsizeWrappedLines, fitLineWithEllipsis, fitTextToLines, fitTextToWidth } from "./text-fit.js";
 import { BOARD_FONT_STACKS, ensureBoardTextMeasurement, installBoardTextMeasurement } from "./text-measurement.js";
-import { boardCardDetailed, getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket } from "./text-resolution.js";
+import { boardCardDetailed, boardTextResolution, getBoardResolution, syncTextResolution, syncTextWrapWidth, textZoomBucket } from "./text-resolution.js";
 import { VIDEO_THUMBNAIL_MAX_EDGE, VideoNaturalSize, loadVideoThumbnailTexture, videoTextureNaturalSize, videoThumbnailSize } from "./video-thumbnail.js";
-export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, BoardBackgroundContext, BoardCardRenderer, BoardCardRendererResolver, BoardCssPaint, BoardMediaAction, BoardRenderContext, BoardRenderDiagnostic, BoardRenderLabels, BoardRenderPalette, BoardRenderStyle, BoardScriptHost, BoardScriptHostOptions, BoardSelectionStyle, BoardShadowStyle, BrowserBoardScriptHost, CARD_TAG_SIZE, CardCrop, CardElevation, CardGlyph, CardRect, CardSurface, CardTag, ClipGroup, DEFAULT_BOARD_RENDER_LABELS, PIXEL_STEP, VIDEO_THUMBNAIL_MAX_EDGE, VideoNaturalSize, boardCardDetailed, boardMediaActionAt, cardElevation, cardOutlinePoints, cardShadow, clippingAncestor, containRect, createBoardBackground, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, createCardTag, dashPattern, defaultBoardPalette, defaultBoardRenderStyle, drawCardGlyph, drawCardShadow, drawCardSurface, ellipsizeWrappedLines, endAngle, ensureBoardTextMeasurement, fillCardPicture, fitLineWithEllipsis, fitTextToLines, fitTextToWidth, formatBoardDuration, getBoardCardRenderer, getBoardResolution, inspectBoardItems, inspectBoardScene, installBoardTextMeasurement, isBoardCard, isClippingFrame, itemAlpha, itemColor, loadVideoThumbnailTexture, measureBoardText, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, resolveBoardRenderStyle, roundRectPoints, syncCardTag, syncClipGroup, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket, traceArrowhead, traceCardOutline, traceCube, traceFrameOutline, tracePixelRect, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize, zoomCardTag };
+export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, BoardBackgroundContext, BoardCardRenderer, BoardCardRendererResolver, BoardCssPaint, BoardMediaAction, BoardRenderContext, BoardRenderDiagnostic, BoardRenderLabels, BoardRenderPalette, BoardRenderStyle, BoardScriptHost, BoardScriptHostOptions, BoardSelectionStyle, BoardShadowStyle, BrowserBoardScriptHost, CARD_TAG_SIZE, CardCrop, CardElevation, CardGlyph, CardRect, CardSurface, CardTag, ClipGroup, DEFAULT_BOARD_RENDER_LABELS, PIXEL_STEP, VIDEO_THUMBNAIL_MAX_EDGE, VideoNaturalSize, boardCardDetailed, boardMediaActionAt, boardTextResolution, cardElevation, cardOutlinePoints, cardShadow, clippingAncestor, containRect, createBoardBackground, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, createCardTag, dashPattern, defaultBoardPalette, defaultBoardRenderStyle, drawCardGlyph, drawCardShadow, drawCardSurface, ellipsizeWrappedLines, endAngle, ensureBoardTextMeasurement, fillCardPicture, fitLineWithEllipsis, fitTextToLines, fitTextToWidth, formatBoardDuration, getBoardCardRenderer, getBoardResolution, inspectBoardItems, inspectBoardScene, installBoardTextMeasurement, isBoardCard, isClippingFrame, itemAlpha, itemColor, loadVideoThumbnailTexture, measureBoardText, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, resolveBoardRenderStyle, roundRectPoints, syncCardTag, syncClipGroup, syncTextResolution, syncTextWrapWidth, textZoomBucket, traceArrowhead, traceCardOutline, traceCube, traceFrameOutline, tracePixelRect, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize, zoomCardTag };

package/dist/board/render/index.js

@@ -1,13 +1,13 @@
 import { parseBoardCssColor, parseBoardCssPaint } from "./css-color.js";
+import { defaultBoardPalette, itemAlpha, itemColor } from "./palette.js";
+import { createBoardRenderSampler } from "./sampling.js";
+import { BOARD_FONT_STACKS, ensureBoardTextMeasurement, installBoardTextMeasurement } from "./text-measurement.js";
+import { inspectBoardItems, inspectBoardScene, measureBoardText } from "./diagnostics.js";
 import { createBoardBackground, updateBoardBackground } from "./board-background.js";
 import { ellipsizeWrappedLines, fitLineWithEllipsis, fitTextToLines, fitTextToWidth } from "./text-fit.js";
-import { boardCardDetailed, getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket } from "./text-resolution.js";
+import { boardCardDetailed, boardTextResolution, getBoardResolution, syncTextResolution, syncTextWrapWidth, textZoomBucket } from "./text-resolution.js";
 import { CARD_TAG_SIZE, createCardTag, drawCardGlyph, formatBoardDuration, syncCardTag, traceCube, zoomCardTag } from "./card-tag.js";
 import { clippingAncestor, isClippingFrame, syncClipGroup, traceFrameOutline } from "./clip.js";
-import { BOARD_FONT_STACKS, ensureBoardTextMeasurement, installBoardTextMeasurement } from "./text-measurement.js";
-import { inspectBoardItems, inspectBoardScene, measureBoardText } from "./diagnostics.js";
-import { defaultBoardPalette, itemAlpha, itemColor } from "./palette.js";
-import { createBoardRenderSampler } from "./sampling.js";
 import { dashPattern, endAngle, roundRectPoints, traceArrowhead, tracePolyline, trimPolyline } from "./stroke.js";
 import { PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, fillCardPicture, isBoardCard, traceCardOutline, tracePixelRect } from "./surface.js";
 import { boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter } from "./media-interaction.js";
@@ -17,4 +17,4 @@ import { createBoardScriptHost } from "./script-host.js";
 import { prepareBrowserBoardScripts } from "./script-export.js";
 import { defaultBoardRenderStyle, resolveBoardRenderStyle } from "./style.js";
 import { VIDEO_THUMBNAIL_MAX_EDGE, loadVideoThumbnailTexture, videoTextureNaturalSize, videoThumbnailSize } from "./video-thumbnail.js";
-export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, CARD_TAG_SIZE, DEFAULT_BOARD_RENDER_LABELS, PIXEL_STEP, VIDEO_THUMBNAIL_MAX_EDGE, boardCardDetailed, boardMediaActionAt, cardElevation, cardOutlinePoints, cardShadow, clippingAncestor, containRect, createBoardBackground, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, createCardTag, dashPattern, defaultBoardPalette, defaultBoardRenderStyle, drawCardGlyph, drawCardShadow, drawCardSurface, ellipsizeWrappedLines, endAngle, ensureBoardTextMeasurement, fillCardPicture, fitLineWithEllipsis, fitTextToLines, fitTextToWidth, formatBoardDuration, getBoardCardRenderer, getBoardResolution, inspectBoardItems, inspectBoardScene, installBoardTextMeasurement, isBoardCard, isClippingFrame, itemAlpha, itemColor, loadVideoThumbnailTexture, measureBoardText, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, resolveBoardRenderStyle, roundRectPoints, syncCardTag, syncClipGroup, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket, traceArrowhead, traceCardOutline, traceCube, traceFrameOutline, tracePixelRect, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize, zoomCardTag };
+export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, CARD_TAG_SIZE, DEFAULT_BOARD_RENDER_LABELS, PIXEL_STEP, VIDEO_THUMBNAIL_MAX_EDGE, boardCardDetailed, boardMediaActionAt, boardTextResolution, cardElevation, cardOutlinePoints, cardShadow, clippingAncestor, containRect, createBoardBackground, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, createCardTag, dashPattern, defaultBoardPalette, defaultBoardRenderStyle, drawCardGlyph, drawCardShadow, drawCardSurface, ellipsizeWrappedLines, endAngle, ensureBoardTextMeasurement, fillCardPicture, fitLineWithEllipsis, fitTextToLines, fitTextToWidth, formatBoardDuration, getBoardCardRenderer, getBoardResolution, inspectBoardItems, inspectBoardScene, installBoardTextMeasurement, isBoardCard, isClippingFrame, itemAlpha, itemColor, loadVideoThumbnailTexture, measureBoardText, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, resolveBoardRenderStyle, roundRectPoints, syncCardTag, syncClipGroup, syncTextResolution, syncTextWrapWidth, textZoomBucket, traceArrowhead, traceCardOutline, traceCube, traceFrameOutline, tracePixelRect, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize, zoomCardTag };

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

@@ -1,7 +1,7 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { pathPointAt, resolveSceneArrow } from "../../model/arrow-geometry.js";
-import { syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
 import { itemAlpha, itemColor } from "../palette.js";
+import { syncTextResolution } from "../text-resolution.js";
 import { dashPattern, endAngle, traceArrowhead, tracePolyline, trimPolyline } from "../stroke.js";
 import { drawCardSurface } from "../surface.js";
 import { drawFarStroke } from "./far-plate.js";
@@ -18,7 +18,6 @@ function sync(container, item, context) {
 	parts.line.alpha = itemAlpha(context, style.stroke);
 	const color = itemColor(context, style.stroke, "brand");
 	const size = style.strokeWidth ?? 2.5;
-	syncTextResolution(parts.label, parts, context.zoom);
 	const resolved = resolveSceneArrow(item, context.scene);
 	const path = trimPolyline(resolved.path, style.trim);
 	const lineSig = [
@@ -85,6 +84,7 @@ function sync(container, item, context) {
 			border: context.palette.border
 		});
 	}
+	syncTextResolution(parts.label, context.textResolution);
 	const visible = props.label.length > 0 && (style.trim === void 0 || style.trim >= .5);
 	parts.label.visible = visible;
 	parts.backdrop.visible = visible;
@@ -98,7 +98,6 @@ const arrowCardRenderer = {
 	create: (item, context) => {
 		const root = new Container();
 		const line = new Graphics();
-		const resolution = textResolutionForZoom(context.zoom);
 		const label = new Text({
 			text: "",
 			style: {
@@ -107,7 +106,7 @@ const arrowCardRenderer = {
 				fontSize: 14,
 				fontWeight: "500"
 			},
-			resolution,
+			resolution: context.textResolution,
 			roundPixels: true
 		});
 		label.anchor.set(.5);
@@ -119,8 +118,7 @@ const arrowCardRenderer = {
 			backdrop,
 			label,
 			lineSig: "",
-			labelSig: "",
-			resolution
+			labelSig: ""
 		});
 		if (item.type === "arrow") sync(root, item, context);
 		return root;
@@ -130,7 +128,7 @@ const arrowCardRenderer = {
 	},
 	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) => {
 		if (item.type !== "arrow") return;

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

@@ -1,8 +1,8 @@
 import { getMediaResourceTitle } from "../../model/media.js";
-import { drawAudioWaveform } from "../audio-waveform.js";
 import { fitTextToWidth } from "../text-fit.js";
-import { boardCardDetailed, syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
+import { boardCardDetailed, syncTextResolution } from "../text-resolution.js";
 import { formatBoardDuration } from "../card-tag.js";
+import { drawAudioWaveform } from "../audio-waveform.js";
 import { cardElevation, drawCardSurface } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
@@ -25,12 +25,15 @@ function audioKeyCenter(width, height) {
 function sync(container, item, context) {
 	const parts = partsByContainer.get(container);
 	if (!parts) return;
+	syncContent(parts, item, context);
+	syncTextResolution(parts.title, context.textResolution);
+}
+function syncContent(parts, item, context) {
 	positionShell(parts.root, item);
 	const { width, height } = item.frame;
 	const title = item.props.snapshot?.title ?? getMediaResourceTitle(item.props.src);
 	const durationMs = item.props.snapshot?.durationMs;
 	const detailed = boardCardDetailed(context.zoom);
-	syncTextResolution(parts.title, parts, context.zoom);
 	const elevation = cardElevation(context, item.id);
 	const sig = [
 		width,
@@ -83,14 +86,13 @@ const audioCardRenderer = {
 		const root = new Container();
 		const plate = new Graphics();
 		const wave = new Graphics();
-		const resolution = textResolutionForZoom(context.zoom);
 		const title = new Text({
 			text: "",
 			style: {
 				fontSize: 13,
 				fontWeight: "600"
 			},
-			resolution,
+			resolution: context.textResolution,
 			roundPixels: true
 		});
 		root.addChild(plate, wave, title);
@@ -99,8 +101,7 @@ const audioCardRenderer = {
 			plate,
 			wave,
 			title,
-			sig: "",
-			resolution
+			sig: ""
 		});
 		if (item.type === "audio") sync(root, item, context);
 		return root;

package/dist/board/render/renderers/base-card-renderer.d.ts

@@ -2,7 +2,7 @@ import { BoardFrame } from "../../../protocol/dist/board-layout.js";
 import "../../../protocol/dist/index.js";
 import { Container, Text } from "pixi.js";
 //#region src/board/render/renderers/base-card-renderer.d.ts
-declare function createLabel(text: string, style: Record<string, unknown>): Text;
+declare function createLabel(text: string, style: Record<string, unknown>, resolution: number): Text;
 declare function positionShell(root: Container, item: {
   frame: BoardFrame;
 }): void;

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

@@ -1,10 +1,9 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { getBoardResolution } from "../text-resolution.js";
 import { Text } from "pixi.js";
 //#region src/board/render/renderers/base-card-renderer.ts
-function createLabel(text, style) {
+function createLabel(text, style, resolution) {
 	return new Text({
-		resolution: getBoardResolution(),
+		resolution,
 		roundPixels: true,
 		text,
 		style: {

package/dist/board/render/renderers/board-renderer-registry.d.ts

@@ -48,6 +48,8 @@ type BoardRenderContext = {
   themeKey: string;
   rendererType: "gpu" | "canvas";
   zoom: number;
+  /** Texture pixels per world unit for text; see `boardTextResolution`. */
+  textResolution: number;
   time: number;
   reducedMotion: boolean;
   labels: BoardRenderLabels;
@@ -73,7 +75,7 @@ type BoardCardRenderer = {
   tick?: (container: Container, clock: number) => number | null;
   create: (item: BoardSceneItem, context: BoardRenderContext) => Container;
   update: (container: Container, item: BoardSceneItem, context: BoardRenderContext) => void;
-  /** Called only when the zoom bucket or display density changes. */
+  /** Called when the zoom bucket or text resolution changes. */
   resolution?: (container: Container, item: BoardSceneItem, context: BoardRenderContext) => void;
   /** Runs on every zoom step; only update transforms and visibility. */
   zoom?: (container: Container, zoom: number) => void;

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

@@ -1,5 +1,5 @@
 import { BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { getBoardResolution, syncTextResolution } from "../text-resolution.js";
+import { syncTextResolution } from "../text-resolution.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
 import { Container, Graphics, Sprite, Text, Texture } from "pixi.js";
@@ -13,7 +13,6 @@ function sync(container, item, context) {
 		parts.id = item.id;
 	}
 	positionShell(parts.root, item);
-	syncTextResolution(parts.label, parts.label, context.zoom);
 	const { width, height } = item.frame;
 	const texture = context.scripts?.frame(item, context.time) ?? null;
 	const error = context.scripts?.error(item.id) ?? null;
@@ -31,19 +30,21 @@ function sync(container, item, context) {
 		message,
 		context.themeKey
 	].join("|");
-	if (sig === parts.sig) return;
-	parts.sig = sig;
-	parts.placeholder.clear();
-	if (!ready || error) parts.placeholder.rect(0, 0, width, height).stroke({
-		color: context.palette.border,
-		width: 1,
-		alpha: .8
-	});
-	parts.label.visible = !ready || Boolean(error);
-	parts.label.text = message;
-	parts.label.style.fill = error ? context.colors.rose.stroke : context.palette.muted;
-	parts.label.style.wordWrapWidth = Math.max(40, width - 16);
-	parts.label.position.set(width / 2, height / 2);
+	if (sig !== parts.sig) {
+		parts.sig = sig;
+		parts.placeholder.clear();
+		if (!ready || error) parts.placeholder.rect(0, 0, width, height).stroke({
+			color: context.palette.border,
+			width: 1,
+			alpha: .8
+		});
+		parts.label.visible = !ready || Boolean(error);
+		parts.label.text = message;
+		parts.label.style.fill = error ? context.colors.rose.stroke : context.palette.muted;
+		parts.label.style.wordWrapWidth = Math.max(40, width - 16);
+		parts.label.position.set(width / 2, height / 2);
+	}
+	syncTextResolution(parts.label, context.textResolution);
 }
 const customCardRenderer = {
 	id: "custom-card",
@@ -62,7 +63,8 @@ const customCardRenderer = {
 				wordWrap: true,
 				breakWords: true
 			},
-			resolution: getBoardResolution()
+			resolution: context.textResolution,
+			roundPixels: true
 		});
 		label.anchor.set(.5);
 		root.addChild(sprite, placeholder, label);
@@ -82,7 +84,7 @@ const customCardRenderer = {
 	},
 	resolution: (container, _item, context) => {
 		const parts = partsByContainer.get(container);
-		if (parts) syncTextResolution(parts.label, parts.label, context.zoom);
+		if (parts) syncTextResolution(parts.label, context.textResolution);
 	},
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {

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

@@ -47,6 +47,14 @@ function syncClip(parts, rect, style) {
 function sync(container, item, context) {
 	const parts = partsByContainer.get(container);
 	if (!parts) return;
+	syncContent(parts, item, context);
+	for (const text of [
+		parts.title,
+		parts.excerpt,
+		parts.typeMark
+	]) syncTextResolution(text, context.textResolution);
+}
+function syncContent(parts, item, context) {
 	positionShell(parts.root, item);
 	const { width, height } = item.frame;
 	const detail = detailFor(context.zoom);
@@ -64,9 +72,6 @@ function sync(container, item, context) {
 	const kind = filePreviewKind(item.props.snapshot);
 	const category = fileCategory(item.props.src, item.props.snapshot?.mimeType);
 	const accent = fileCategoryAccent(category, context.palette);
-	syncTextResolution(parts.title, parts.titleRes, context.zoom);
-	syncTextResolution(parts.excerpt, parts.excerptRes, context.zoom);
-	syncTextResolution(parts.typeMark, parts.typeMarkRes, context.zoom);
 	const visualSig = [
 		key ?? "",
 		width,
@@ -190,7 +195,7 @@ const fileCardRenderer = {
 		const cover = new Sprite(Texture.EMPTY);
 		const coverMask = new Graphics();
 		cover.mask = coverMask;
-		const resolution = 1;
+		const resolution = context.textResolution;
 		const title = new Text({
 			text: "",
 			style: {
@@ -247,10 +252,7 @@ const fileCardRenderer = {
 			title,
 			excerpt,
 			visualSig: "",
-			textSig: "",
-			titleRes: { resolution },
-			excerptRes: { resolution },
-			typeMarkRes: { resolution }
+			textSig: ""
 		});
 		if (item.type === "file") sync(root, item, context);
 		return root;

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

@@ -1,6 +1,6 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { syncTextResolution } from "../text-resolution.js";
 import { itemAlpha, itemColor } from "../palette.js";
+import { syncTextResolution } from "../text-resolution.js";
 import { dashPattern, roundRectPoints, tracePolyline, trimPolyline } from "../stroke.js";
 import { createLabel, positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
@@ -13,7 +13,6 @@ function sync(container, item, context) {
 	if (!parts) return;
 	const { frame, style, props, locked } = item;
 	positionShell(parts.root, item);
-	syncTextResolution(parts.label, parts, context.zoom);
 	const fill = itemColor(context, style.fill ?? style.stroke, "neutral", "fill");
 	const fillAlpha = (style.fillOpacity ?? (style.fill ? 1 : DEFAULT_WASH)) * itemAlpha(context, style.fill ?? style.stroke);
 	const baseStroke = itemColor(context, style.stroke, "neutral");
@@ -69,6 +68,7 @@ function sync(container, item, context) {
 		parts.label.style.fill = labelColor;
 		parts.label.style.fontFamily = context.style.font;
 	}
+	syncTextResolution(parts.label, context.textResolution);
 	parts.label.position.set(4, -18);
 }
 const frameCardRenderer = {
@@ -82,15 +82,14 @@ const frameCardRenderer = {
 			fontFamily: BOARD_FONT_STACK,
 			fontSize: 12,
 			fontWeight: "600"
-		});
+		}, context.textResolution);
 		root.addChild(box, label);
 		partsByContainer.set(root, {
 			root,
 			box,
 			label,
 			visualSig: "",
-			textSig: "",
-			resolution: label.resolution
+			textSig: ""
 		});
 		if (item.type === "frame") sync(root, item, context);
 		return root;
@@ -100,7 +99,7 @@ const frameCardRenderer = {
 	},
 	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) => {
 		if (item.type !== "frame" || item.props.decoration === "none") return;

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

@@ -1,7 +1,7 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { worldPoint } from "../../model/geometry.js";
-import { syncTextResolution, syncTextWrapWidth, textResolutionForZoom } from "../text-resolution.js";
 import { itemAlpha, itemColor } from "../palette.js";
+import { syncTextResolution, syncTextWrapWidth } from "../text-resolution.js";
 import { dashPattern, roundRectPoints, tracePolyline, trimPolyline } from "../stroke.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
@@ -100,7 +100,6 @@ function sync(container, item, context) {
 	const fillOpacity = (style.fillOpacity ?? (style.fill ? 1 : 0)) * itemAlpha(context, style.fill ?? style.stroke);
 	const strokeAlpha = itemAlpha(context, style.stroke ?? style.fill);
 	const strokeWidth = style.strokeWidth ?? 1.75;
-	syncTextResolution(parts.label, parts, context.zoom);
 	const visualSig = [
 		width,
 		height,
@@ -159,6 +158,7 @@ function sync(container, item, context) {
 		parts.label.style.align = props.align;
 	}
 	syncTextWrapWidth(parts.label, parts, Math.max(1, width - 16), context.resizingIds.has(item.id));
+	syncTextResolution(parts.label, context.textResolution);
 	parts.label.position.set(width / 2, height / 2);
 }
 const shapeCardRenderer = {
@@ -167,7 +167,6 @@ const shapeCardRenderer = {
 	create: (item, context) => {
 		const root = new Container();
 		const shape = new Graphics();
-		const resolution = textResolutionForZoom(context.zoom);
 		const label = new Text({
 			text: "",
 			style: {
@@ -179,7 +178,7 @@ const shapeCardRenderer = {
 				wordWrap: true,
 				lineHeight: 28
 			},
-			resolution,
+			resolution: context.textResolution,
 			roundPixels: true
 		});
 		label.anchor.set(.5);
@@ -190,8 +189,7 @@ const shapeCardRenderer = {
 			label,
 			visualSig: "",
 			textSig: "",
-			wrapWidth: 0,
-			resolution
+			wrapWidth: 0
 		});
 		if (item.type === "shape") sync(root, item, context);
 		return root;
@@ -201,7 +199,7 @@ const shapeCardRenderer = {
 	},
 	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) => {
 		if (item.type !== "shape") return;

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

@@ -1,9 +1,9 @@
 import { BOARD_FONT_STACK, BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { featuredTaskArtifact } from "../../../protocol/dist/board-task.js";
-import { drawAudioWaveform } from "../audio-waveform.js";
 import { fitTextToLines } from "../text-fit.js";
-import { boardCardDetailed, syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
+import { boardCardDetailed, syncTextResolution } from "../text-resolution.js";
 import { createCardTag, formatBoardDuration, syncCardTag, zoomCardTag } from "../card-tag.js";
+import { drawAudioWaveform } from "../audio-waveform.js";
 import { cardElevation, containRect, drawCardSurface, traceCardOutline } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
@@ -283,10 +283,6 @@ function sync(container, item, context) {
 	const detailText = !full || !surface ? "" : status === "failed" ? snapshot.errorExcerpt ?? "" : working ? snapshot.promptExcerpt ?? "" : "";
 	const textArtifact = kind === "text" && artifact?.type === "text";
 	const bodyText = textArtifact ? artifact.textExcerpt : counting ? `${label} · ${elapsed}` : label;
-	syncTextResolution(parts.body, parts, context.zoom);
-	syncTextResolution(parts.detail, parts, context.zoom);
-	syncTextResolution(parts.meta, parts, context.zoom);
-	syncTextResolution(parts.badge, parts, context.zoom);
 	const textSig = [
 		counting ? label : bodyText,
 		detailText,
@@ -317,6 +313,12 @@ function sync(container, item, context) {
 		parts.badge.style.fill = context.palette.text;
 		if (parts.badge.text !== count) parts.badge.text = count;
 	}
+	for (const text of [
+		parts.body,
+		parts.detail,
+		parts.meta,
+		parts.badge
+	]) syncTextResolution(text, context.textResolution);
 	const badgeWidth = Math.max(22, parts.badge.width + 12);
 	const visualSig = [
 		width,
@@ -434,7 +436,6 @@ const taskCardRenderer = {
 		const previewMask = new Graphics();
 		const shimmer = new Graphics();
 		const previewArt = new Graphics();
-		const resolution = textResolutionForZoom(context.zoom);
 		const text = (fontFamily, fontSize, fontWeight) => new Text({
 			text: "",
 			style: {
@@ -444,7 +445,7 @@ const taskCardRenderer = {
 				wordWrap: true,
 				breakWords: true
 			},
-			resolution,
+			resolution: context.textResolution,
 			roundPixels: true
 		});
 		const body = text(BOARD_FONT_STACK, 11.5, "500");
@@ -478,7 +479,6 @@ const taskCardRenderer = {
 			assetKey: null,
 			visualSig: "",
 			textSig: "",
-			resolution,
 			motion: {
 				itemId: "",
 				width: 0,

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neta-art/cohub",
-  "version": "12.0.0",
+  "version": "12.1.0",
   "description": "Cohub SDK for spaces, sessions, boards, and realtime agent collaboration.",
   "license": "Apache-2.0",
   "private": false,