@neta-art/cohub 12.0.0 → 12.1.1

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/node/index.d.ts

@@ -9,6 +9,7 @@ import { Renderer } from "pixi.js";
 type NodeCanvasModule = {
   createCanvas: (width: number, height: number) => unknown;
   Image: new () => unknown;
+  DOMMatrix: new (init?: number[]) => unknown;
   GlobalFonts: BoardFontRegistry;
 };
 type BoardNodeRendererOptions = {

package/dist/board/export/node/index.js

@@ -24,6 +24,10 @@ async function loadCanvasModule() {
 		throw new Error("Board image export needs the optional '@napi-rs/canvas' package. Install it with: npm i @napi-rs/canvas", { cause });
 	}
 }
+function installDOMMatrix(canvasModule) {
+	const globals = globalThis;
+	globals.DOMMatrix ??= canvasModule.DOMMatrix;
+}
 function installAnimationFrameShim() {
 	const globals = globalThis;
 	if (globals.requestAnimationFrame) return () => {};
@@ -78,6 +82,7 @@ async function createNodeBoardRenderer(options = {}) {
 			throw new Error("XML parsing is not available in Node board export.");
 		}
 	});
+	installDOMMatrix(canvasModule);
 	installBoardTextMeasurement();
 	const restoreAnimationFrame = installAnimationFrameShim();
 	const renderer = new CanvasRenderer();

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,