@neta-art/cohub 11.5.0 → 12.0.0

package/dist/board/model/items/create.js

@@ -1,37 +1,15 @@
+import { BOARD_DEFAULT_SIZES } from "../../../protocol/dist/board-constants.js";
 import { BoardMediaOriginSchema, parseBoardItem } from "../../../protocol/dist/board-model.js";
-import { pointsRect } from "../../../protocol/dist/board-layout.js";
+import { fitBoardMediaSize, pointsRect } from "../../../protocol/dist/board-layout.js";
 import { featuredTaskArtifact } from "../../../protocol/dist/board-task.js";
+import "../geometry.js";
+import { quantizeDrawCoordinate } from "../draw-input.js";
 import { boardModelFormat, getMediaResourceTitle, inferBoardMediaKind } from "../media.js";
 import { fileStem } from "../file-snapshot.js";
 import { filePreviewKind } from "../file-preview.js";
-import { quantizeDrawCoordinate } from "../draw-input.js";
 import { DEFAULT_BOARD_TOOL_STYLES } from "../tool-styles.js";
 import { createBoardItemId } from "./id.js";
 //#region src/board/model/items/create.ts
-const DEFAULT_MEDIA_SIZE = {
-	width: 320,
-	height: 200
-};
-const DEFAULT_TASK_SIZE = {
-	width: 300,
-	height: 188
-};
-const DEFAULT_TASK_MEDIA_SIZE = {
-	width: 320,
-	height: 180
-};
-const DEFAULT_VIDEO_SIZE = {
-	width: 320,
-	height: 180
-};
-const DEFAULT_AUDIO_SIZE = {
-	width: 320,
-	height: 112
-};
-const DEFAULT_FILE_SIZE = {
-	width: 260,
-	height: 132
-};
 const DEFAULT_MODEL_SIZE = {
 	width: 264,
 	height: 264
@@ -40,14 +18,6 @@ const DEFAULT_FILE_COVER_SIZE = {
 	width: 260,
 	height: 208
 };
-const DEFAULT_SHAPE_SIZE = {
-	width: 200,
-	height: 140
-};
-const DEFAULT_FRAME_SIZE = {
-	width: 480,
-	height: 320
-};
 function item(value) {
 	const parsed = parseBoardItem(value);
 	if (!parsed.ok) throw new Error(`Invalid Board item: ${parsed.diagnostics[0]?.path}: ${parsed.diagnostics[0]?.message}`);
@@ -62,12 +32,16 @@ function centered(x, y, size) {
 		size: { ...size }
 	};
 }
-function mediaFrameSize(naturalWidth, naturalHeight, maxEdge = 480, fallback = DEFAULT_MEDIA_SIZE) {
-	if (!naturalWidth || !naturalHeight || !Number.isFinite(naturalWidth) || !Number.isFinite(naturalHeight) || naturalWidth <= 0 || naturalHeight <= 0) return { ...fallback };
-	const scale = Math.min(1, maxEdge / Math.max(naturalWidth, naturalHeight));
+function mediaFrameSize(naturalWidth, naturalHeight, maxEdge = 480, fallback = BOARD_DEFAULT_SIZES.image) {
+	const natural = {
+		width: naturalWidth ?? 0,
+		height: naturalHeight ?? 0
+	};
+	const size = fitBoardMediaSize(natural, Math.min(maxEdge, Math.max(natural.width, natural.height)));
+	if (!size) return { ...fallback };
 	return {
-		width: Math.max(24, naturalWidth * scale),
-		height: Math.max(24, naturalHeight * scale)
+		width: Math.max(24, size.width),
+		height: Math.max(24, size.height)
 	};
 }
 function cleanSnapshot(snapshot) {
@@ -77,7 +51,7 @@ function createMediaBoardItem(path, x, y, snapshot = {}, id = createBoardItemId(
 	const kind = mediaKind ?? inferBoardMediaKind(path, snapshot.mimeType);
 	const title = snapshot.title ?? (kind === "file" || kind === "text" ? fileStem(path) : getMediaResourceTitle(path));
 	if (kind === "image" || kind === "video") {
-		const size = mediaFrameSize(snapshot.naturalWidth, snapshot.naturalHeight, 480, kind === "video" ? DEFAULT_VIDEO_SIZE : DEFAULT_MEDIA_SIZE);
+		const size = mediaFrameSize(snapshot.naturalWidth, snapshot.naturalHeight, 480, BOARD_DEFAULT_SIZES[kind]);
 		const mimeType = snapshot.mimeType ?? (kind === "video" ? "video/*" : void 0);
 		return {
 			id,
@@ -99,7 +73,7 @@ function createMediaBoardItem(path, x, y, snapshot = {}, id = createBoardItemId(
 		id,
 		item: item({
 			type: "audio",
-			...centered(x, y, DEFAULT_AUDIO_SIZE),
+			...centered(x, y, BOARD_DEFAULT_SIZES.audio),
 			props: {
 				src: path,
 				snapshot: cleanSnapshot({
@@ -114,7 +88,7 @@ function createMediaBoardItem(path, x, y, snapshot = {}, id = createBoardItemId(
 		id,
 		item: item({
 			type: "file",
-			...centered(x, y, boardModelFormat(path, snapshot.mimeType) ? DEFAULT_MODEL_SIZE : filePreviewKind(snapshot) === "cover" ? DEFAULT_FILE_COVER_SIZE : DEFAULT_FILE_SIZE),
+			...centered(x, y, boardModelFormat(path, snapshot.mimeType) ? DEFAULT_MODEL_SIZE : filePreviewKind(snapshot) === "cover" ? DEFAULT_FILE_COVER_SIZE : BOARD_DEFAULT_SIZES.file),
 			props: {
 				src: path,
 				snapshot: cleanSnapshot({
@@ -126,14 +100,20 @@ function createMediaBoardItem(path, x, y, snapshot = {}, id = createBoardItemId(
 	};
 }
 const createFileNodeForPath = createMediaBoardItem;
-function createTaskBoardItem(taskRunId, snapshot, x, y, metadata, id = createBoardItemId(), aspect) {
+function boardTaskCardSize(snapshot, aspect) {
 	const artifact = featuredTaskArtifact(snapshot.artifacts);
-	const visual = artifact?.type === "image" || artifact?.type === "video" ? artifact : null;
+	const expected = fitBoardMediaSize({
+		width: aspect ?? 0,
+		height: 1
+	}, 480) ?? { ...BOARD_DEFAULT_SIZES.task };
+	return artifact?.type === "image" || artifact?.type === "video" ? mediaFrameSize(artifact.naturalWidth, artifact.naturalHeight, 480, expected) : expected;
+}
+function createTaskBoardItem(taskRunId, snapshot, x, y, metadata, id = createBoardItemId(), aspect) {
 	return {
 		id,
 		item: item({
 			type: "task",
-			...centered(x, y, visual ? mediaFrameSize(visual.naturalWidth, visual.naturalHeight, 480, DEFAULT_TASK_MEDIA_SIZE) : artifact?.type === "audio" ? DEFAULT_TASK_MEDIA_SIZE : expectedTaskSize(aspect)),
+			...centered(x, y, boardTaskCardSize(snapshot, aspect)),
 			...metadata ? { metadata } : {},
 			props: {
 				taskRunId,
@@ -142,15 +122,6 @@ function createTaskBoardItem(taskRunId, snapshot, x, y, metadata, id = createBoa
 		})
 	};
 }
-function expectedTaskSize(aspect) {
-	if (!aspect || !Number.isFinite(aspect) || aspect <= 0) return { ...DEFAULT_TASK_SIZE };
-	const width = DEFAULT_TASK_MEDIA_SIZE.width;
-	const height = Math.round(width / aspect);
-	return height > 0 && height <= width * 4 ? {
-		width,
-		height
-	} : { ...DEFAULT_TASK_SIZE };
-}
 function createTextBoardItem(text, x, y, color = DEFAULT_BOARD_TOOL_STYLES.text.color, id = createBoardItemId()) {
 	return {
 		id,
@@ -179,7 +150,7 @@ function createShapeBoardItem(geometry, x, y, color = DEFAULT_BOARD_TOOL_STYLES.
 					width: box.width,
 					height: box.height
 				}
-			} : centered(x, y, DEFAULT_SHAPE_SIZE),
+			} : centered(x, y, BOARD_DEFAULT_SIZES.shape),
 			style: { stroke: color },
 			props: { geometry }
 		})
@@ -199,7 +170,7 @@ function createFrameBoardItem(x, y, color = DEFAULT_BOARD_TOOL_STYLES.frame.colo
 					width: box.width,
 					height: box.height
 				}
-			} : centered(x, y, DEFAULT_FRAME_SIZE),
+			} : centered(x, y, BOARD_DEFAULT_SIZES.frame),
 			...color === "neutral" ? {} : { style: { stroke: color } },
 			props: { label }
 		})
@@ -362,7 +333,7 @@ function taskResultItem(taskRunId, artifact, x, y, rowHeight) {
 				x,
 				y
 			},
-			size: DEFAULT_AUDIO_SIZE,
+			size: { ...BOARD_DEFAULT_SIZES.audio },
 			props: {
 				src: artifact.url,
 				snapshot,
@@ -370,7 +341,7 @@ function taskResultItem(taskRunId, artifact, x, y, rowHeight) {
 			}
 		})
 	};
-	const fallback = artifact.type === "video" ? DEFAULT_VIDEO_SIZE : DEFAULT_MEDIA_SIZE;
+	const fallback = BOARD_DEFAULT_SIZES[artifact.type];
 	const ratio = artifact.naturalWidth && artifact.naturalHeight ? artifact.naturalWidth / artifact.naturalHeight : fallback.width / fallback.height;
 	return {
 		id,
@@ -393,4 +364,4 @@ function taskResultItem(taskRunId, artifact, x, y, rowHeight) {
 	};
 }
 //#endregion
-export { boardItemOrigin, boardOriginKey, createAppBoardItem, createArrowBoardItem, createDrawBoardItem, createFileNodeForPath, createFrameBoardItem, createMediaBoardItem, createShapeBoardItem, createTaskBoardItem, createTaskResultItems, createTextBoardItem, mediaFrameSize, titleForBoardItem };
+export { boardItemOrigin, boardOriginKey, boardTaskCardSize, createAppBoardItem, createArrowBoardItem, createDrawBoardItem, createFileNodeForPath, createFrameBoardItem, createMediaBoardItem, createShapeBoardItem, createTaskBoardItem, createTaskResultItems, createTextBoardItem, mediaFrameSize, titleForBoardItem };

package/dist/board/model/items/index.d.ts

@@ -1,6 +1,6 @@
 import { BoardItemCapabilities, BoardItemDefinition, BoardItemOf, BoardItemResizeMode, FULL_CAPABILITIES, defineBoardItem } from "./definition.js";
 import { builtinBoardItems } from "./builtin.js";
-import { BoardAppMetadata, BoardItemEntry, BoardMediaItemKind, boardItemOrigin, boardOriginKey, createAppBoardItem, createArrowBoardItem, createDrawBoardItem, createFileNodeForPath, createFrameBoardItem, createMediaBoardItem, createShapeBoardItem, createTaskBoardItem, createTaskResultItems, createTextBoardItem, mediaFrameSize, titleForBoardItem } from "./create.js";
+import { BoardAppMetadata, BoardItemEntry, BoardMediaItemKind, boardItemOrigin, boardOriginKey, boardTaskCardSize, createAppBoardItem, createArrowBoardItem, createDrawBoardItem, createFileNodeForPath, createFrameBoardItem, createMediaBoardItem, createShapeBoardItem, createTaskBoardItem, createTaskResultItems, createTextBoardItem, mediaFrameSize, titleForBoardItem } from "./create.js";
 import { createBoardEntityId, createBoardItemId } from "./id.js";
 import { BoardItemInput, BoardRegistry, createBoardRegistry, defaultBoardRegistry } from "./registry.js";
-export { BoardAppMetadata, BoardItemCapabilities, BoardItemDefinition, BoardItemEntry, BoardItemInput, BoardItemOf, BoardItemResizeMode, BoardMediaItemKind, BoardRegistry, FULL_CAPABILITIES, boardItemOrigin, boardOriginKey, builtinBoardItems, createAppBoardItem, createArrowBoardItem, createBoardEntityId, createBoardItemId, createBoardRegistry, createDrawBoardItem, createFileNodeForPath, createFrameBoardItem, createMediaBoardItem, createShapeBoardItem, createTaskBoardItem, createTaskResultItems, createTextBoardItem, defaultBoardRegistry, defineBoardItem, mediaFrameSize, titleForBoardItem };
+export { BoardAppMetadata, BoardItemCapabilities, BoardItemDefinition, BoardItemEntry, BoardItemInput, BoardItemOf, BoardItemResizeMode, BoardMediaItemKind, BoardRegistry, FULL_CAPABILITIES, boardItemOrigin, boardOriginKey, boardTaskCardSize, builtinBoardItems, createAppBoardItem, createArrowBoardItem, createBoardEntityId, createBoardItemId, createBoardRegistry, createDrawBoardItem, createFileNodeForPath, createFrameBoardItem, createMediaBoardItem, createShapeBoardItem, createTaskBoardItem, createTaskResultItems, createTextBoardItem, defaultBoardRegistry, defineBoardItem, mediaFrameSize, titleForBoardItem };

package/dist/board/model/items/index.js

@@ -1,6 +1,6 @@
 import { FULL_CAPABILITIES, defineBoardItem } from "./definition.js";
 import { builtinBoardItems } from "./builtin.js";
 import { createBoardEntityId, createBoardItemId } from "./id.js";
-import { boardItemOrigin, boardOriginKey, createAppBoardItem, createArrowBoardItem, createDrawBoardItem, createFileNodeForPath, createFrameBoardItem, createMediaBoardItem, createShapeBoardItem, createTaskBoardItem, createTaskResultItems, createTextBoardItem, mediaFrameSize, titleForBoardItem } from "./create.js";
+import { boardItemOrigin, boardOriginKey, boardTaskCardSize, createAppBoardItem, createArrowBoardItem, createDrawBoardItem, createFileNodeForPath, createFrameBoardItem, createMediaBoardItem, createShapeBoardItem, createTaskBoardItem, createTaskResultItems, createTextBoardItem, mediaFrameSize, titleForBoardItem } from "./create.js";
 import { createBoardRegistry, defaultBoardRegistry } from "./registry.js";
-export { FULL_CAPABILITIES, boardItemOrigin, boardOriginKey, builtinBoardItems, createAppBoardItem, createArrowBoardItem, createBoardEntityId, createBoardItemId, createBoardRegistry, createDrawBoardItem, createFileNodeForPath, createFrameBoardItem, createMediaBoardItem, createShapeBoardItem, createTaskBoardItem, createTaskResultItems, createTextBoardItem, defaultBoardRegistry, defineBoardItem, mediaFrameSize, titleForBoardItem };
+export { FULL_CAPABILITIES, boardItemOrigin, boardOriginKey, boardTaskCardSize, builtinBoardItems, createAppBoardItem, createArrowBoardItem, createBoardEntityId, createBoardItemId, createBoardRegistry, createDrawBoardItem, createFileNodeForPath, createFrameBoardItem, createMediaBoardItem, createShapeBoardItem, createTaskBoardItem, createTaskResultItems, createTextBoardItem, defaultBoardRegistry, defineBoardItem, mediaFrameSize, titleForBoardItem };

package/dist/board/model/items/registry.js

@@ -1,13 +1,10 @@
+import { boardDefaultSize } from "../../../protocol/dist/board-constants.js";
 import { hasAuthoredSize, parseBoardItem } from "../../../protocol/dist/board-model.js";
 import { frameContainsPoint, itemBounds } from "../geometry.js";
 import { FULL_CAPABILITIES } from "./definition.js";
 import { builtinBoardItems } from "./builtin.js";
 import { createBoardItemId } from "./id.js";
 //#region src/board/model/items/registry.ts
-const DEFAULT_ITEM_SIZE = {
-	width: 240,
-	height: 160
-};
 function createBoardRegistry(definitions = []) {
 	const byType = /* @__PURE__ */ new Map();
 	for (const definition of [...builtinBoardItems, ...definitions]) byType.set(definition.type, definition);
@@ -52,7 +49,7 @@ function createBoardRegistry(definitions = []) {
 		create(type, { props = {}, at, size, id = createBoardItemId() }) {
 			const valid = validateProps(type, props);
 			if (!valid.ok) throw new Error(valid.message);
-			const box = size ?? byType.get(type)?.size ?? DEFAULT_ITEM_SIZE;
+			const box = size ?? byType.get(type)?.size ?? boardDefaultSize(type);
 			const placement = hasAuthoredSize(type) ? {
 				position: {
 					x: at.x - box.width / 2,

package/dist/board/model/json.d.ts

@@ -0,0 +1,4 @@
+//#region src/board/model/json.d.ts
+declare function sameJson(a: unknown, b: unknown): boolean;
+//#endregion
+export { sameJson };

package/dist/board/model/json.js

@@ -0,0 +1,22 @@
+//#region src/board/model/json.ts
+function sameJson(a, b) {
+	if (a === b) return true;
+	if (!a || !b || typeof a !== "object" || typeof b !== "object") return false;
+	if (Array.isArray(a) || Array.isArray(b)) {
+		if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false;
+		for (let index = 0; index < a.length; index += 1) if (!sameJson(a[index], b[index])) return false;
+		return true;
+	}
+	const left = a;
+	const right = b;
+	let members = 0;
+	for (const key of Object.keys(left)) {
+		if (left[key] === void 0) continue;
+		members += 1;
+		if (!sameJson(left[key], right[key])) return false;
+	}
+	for (const key of Object.keys(right)) if (right[key] !== void 0) members -= 1;
+	return members === 0;
+}
+//#endregion
+export { sameJson };

package/dist/board/model/media-playback.d.ts

@@ -1,8 +1,11 @@
 import { BoardSceneItem } from "./scene.js";
 //#region src/board/model/media-playback.d.ts
+type BoardAssetUrlOptions = {
+  fresh?: boolean;
+};
 type BoardAssetSource = {
-  resolveFileUrl: (path: string) => Promise<string | null>;
-  resolvePlaybackUrl?: (path: string) => Promise<string | null>;
+  resolveFileUrl: (path: string, options?: BoardAssetUrlOptions) => Promise<string | null>;
+  resolvePlaybackUrl?: (path: string, options?: BoardAssetUrlOptions) => Promise<string | null>;
 };
 declare function resolveBoardMediaUrl(src: string, source: BoardAssetSource, purpose?: "preview" | "playback"): Promise<string | null>;
 type BoardPlayableMedia = {
@@ -17,4 +20,4 @@ declare function playableBoardMediaList(item: BoardSceneItem | null, assetSource
 declare function playableBoardMedia(item: BoardSceneItem | null, assetSource: BoardAssetSource, artifactId?: string | null): BoardPlayableMedia | null;
 declare function resetBoardPlaybackUrlCache(): void;
 //#endregion
-export { BoardAssetSource, BoardPlayableMedia, playableBoardMedia, playableBoardMediaList, resetBoardPlaybackUrlCache, resolveBoardMediaUrl };
+export { BoardAssetSource, BoardAssetUrlOptions, BoardPlayableMedia, playableBoardMedia, playableBoardMediaList, resetBoardPlaybackUrlCache, resolveBoardMediaUrl };

package/dist/board/model/sampling.js

@@ -1,7 +1,7 @@
 import { arrowBindings } from "../../protocol/dist/board-layout.js";
+import { cameraForFocus, cameraForState } from "./geometry.js";
 import { applyBoardEvaluation, boardAnimationTime, compileBoardAnimations, evaluateBoardAnimations } from "./animation.js";
 import { buildBoardScene } from "./scene.js";
-import { cameraForFocus, cameraForState } from "./geometry.js";
 //#region src/board/model/sampling.ts
 function createBoardAnimationSampler(document, animation, options = {}) {
 	const selected = animation ? document.animations[animation] : void 0;

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

@@ -10,7 +10,11 @@ type BoardPlayerFrame = {
   playbackTime: number | null;
   running: boolean;
 };
-declare function playbackTimeAt(playback: BoardPlaybackSnapshot, document: BoardDocument, now: number): number | null;
+type BoardPlaybackClock = {
+  time: number | null;
+  advancing: boolean;
+};
+declare function playbackClockAt(playback: BoardPlaybackSnapshot, document: BoardDocument, now: number): BoardPlaybackClock;
 declare function createBoardPlayer(options?: {
   resolveColor?: BoardColorResolver;
 }): {
@@ -21,4 +25,4 @@ declare function createBoardPlayer(options?: {
 type BoardPlayer = ReturnType<typeof createBoardPlayer>;
 declare function nextLocalPlayback(current: BoardPlaybackSnapshot | null, command: BoardPlaybackCommand, document: BoardDocument, now?: number): BoardPlaybackSnapshot | null;
 //#endregion
-export { BoardPlayer, BoardPlayerFrame, createBoardPlayer, nextLocalPlayback, playbackTimeAt };
+export { BoardPlaybackClock, BoardPlayer, BoardPlayerFrame, createBoardPlayer, nextLocalPlayback, playbackClockAt };

package/dist/board/player/index.js

@@ -5,16 +5,35 @@ import { createBoardEntityId } from "../model/items/id.js";
 const ENTER_ANIMATION = "\0enter";
 const ENTER_STAGGER_MS = 45;
 const ENTER_MAX_ITEMS = 80;
-function playbackTimeAt(playback, document, now) {
+const SETTLED = {
+	time: null,
+	advancing: false
+};
+function playbackClockAt(playback, document, now) {
 	const animation = document.animations[playback.animationId];
-	if (!animation || playback.status === "stopped") return null;
-	if (playback.status !== "playing") return Math.min(playback.position, animation.duration);
-	let position = playback.position + Math.max(0, now - playback.effectiveAt) * playback.timeScale;
+	if (!animation || playback.status === "stopped") return SETTLED;
+	if (playback.status !== "playing") return {
+		time: Math.min(playback.position, animation.duration),
+		advancing: false
+	};
+	const position = playback.position + Math.max(0, now - playback.effectiveAt) * playback.timeScale;
 	const pause = animation.markers.find((marker) => marker.pause && marker.at > playback.position && marker.at <= position);
-	if (pause) return pause.at;
-	if (animation.loop || animation.play === "always") return animation.duration > 0 ? position % animation.duration : 0;
-	position = Math.min(position, animation.duration);
-	return animation.end === "reset" && position >= animation.duration ? null : position;
+	if (pause) return {
+		time: pause.at,
+		advancing: false
+	};
+	if (animation.loop || animation.play === "always") return {
+		time: position % animation.duration,
+		advancing: true
+	};
+	if (position < animation.duration) return {
+		time: position,
+		advancing: true
+	};
+	return {
+		time: animation.end === "reset" ? null : animation.duration,
+		advancing: false
+	};
 }
 function createBoardPlayer(options = {}) {
 	let document = null;
@@ -89,11 +108,10 @@ function createBoardPlayer(options = {}) {
 			}
 			let playbackTime = null;
 			if (playback && playback.animationId !== exclude) {
-				playbackTime = playbackTimeAt(playback, current, wallNow);
-				if (playbackTime !== null) {
-					times.set(playback.animationId, playbackTime);
-					if (playback.status === "playing") running = true;
-				}
+				const clock = playbackClockAt(playback, current, wallNow);
+				playbackTime = clock.time;
+				if (playbackTime !== null) times.set(playback.animationId, playbackTime);
+				if (clock.advancing) running = true;
 			}
 			if (entrance) {
 				times.set(ENTER_ANIMATION, now - entrance.startedAt);
@@ -111,7 +129,7 @@ function createBoardPlayer(options = {}) {
 	};
 }
 function nextLocalPlayback(current, command, document, now = Date.now()) {
-	const position = current ? playbackTimeAt(current, document, now) ?? 0 : 0;
+	const position = current ? playbackClockAt(current, document, now).time ?? 0 : 0;
 	const base = {
 		effectiveAt: now,
 		commandId: command.commandId,
@@ -159,4 +177,4 @@ function nextLocalPlayback(current, command, document, now = Date.now()) {
 	}
 }
 //#endregion
-export { createBoardPlayer, nextLocalPlayback, playbackTimeAt };
+export { createBoardPlayer, nextLocalPlayback, playbackClockAt };

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

@@ -11,10 +11,10 @@ import { defaultBoardPalette, itemAlpha, itemColor } from "./palette.js";
 import { BoardScriptHostOptions, BrowserBoardScriptHost, createBoardScriptHost } from "./script-host.js";
 import { prepareBrowserBoardScripts } from "./script-export.js";
 import { dashPattern, endAngle, roundRectPoints, traceArrowhead, tracePolyline, trimPolyline } from "./stroke.js";
-import { CardElevation, CardRect, CardSurface, PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, isBoardCard, traceCardOutline, tracePixelRect } from "./surface.js";
+import { CardCrop, CardElevation, CardRect, CardSurface, PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, fillCardPicture, isBoardCard, traceCardOutline, tracePixelRect } from "./surface.js";
 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 { 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, 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, 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, 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 };

package/dist/board/render/index.js

@@ -1,15 +1,15 @@
 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 { 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, isBoardCard, traceCardOutline, tracePixelRect } from "./surface.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";
 import { BOARD_EFFECT_MAX_PARTICLES } from "./renderers/effect-card-renderer.js";
 import { DEFAULT_BOARD_RENDER_LABELS, createBoardCardRendererResolver, getBoardCardRenderer } from "./renderers/board-renderer-registry.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, 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, 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 };

package/dist/board/render/media-interaction.js

@@ -1,7 +1,7 @@
 import { featuredTaskArtifact } from "../../protocol/dist/board-task.js";
 import { degToRad, rotatePointAround, worldPoint } from "../model/geometry.js";
-import { boardCardDetailed } from "./text-resolution.js";
 import { isBoardModelItem } from "../model/media.js";
+import { boardCardDetailed } from "./text-resolution.js";
 import { audioKeyCenter } from "./renderers/audio-card-renderer.js";
 import { modelKeyCenter } from "./renderers/model-card-renderer.js";
 //#region src/board/render/media-interaction.ts

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

@@ -1,7 +1,7 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { itemAlpha, itemColor } from "../palette.js";
 import { pathPointAt, resolveSceneArrow } from "../../model/arrow-geometry.js";
 import { syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
+import { itemAlpha, itemColor } from "../palette.js";
 import { dashPattern, endAngle, traceArrowhead, tracePolyline, trimPolyline } from "../stroke.js";
 import { drawCardSurface } from "../surface.js";
 import { drawFarStroke } from "./far-plate.js";
@@ -128,6 +128,10 @@ const arrowCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "arrow") sync(container, item, context);
 	},
+	resolution: (container, _item, context) => {
+		const parts = partsByContainer.get(container);
+		if (parts) syncTextResolution(parts.label, parts, context.zoom);
+	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "arrow") return;
 		const arrow = item;

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 { formatBoardDuration } from "../card-tag.js";
-import { getMediaResourceTitle } from "../../model/media.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";
@@ -108,6 +108,9 @@ const audioCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "audio") sync(container, item, context);
 	},
+	resolution: (container, item, context) => {
+		if (item.type === "audio") sync(container, item, context);
+	},
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {
 			fill: context.palette.surface,

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

@@ -2,13 +2,10 @@ 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
-const TEXT_OPTIONS = {
-	resolution: getBoardResolution(),
-	roundPixels: true
-};
 function createLabel(text, style) {
 	return new Text({
-		...TEXT_OPTIONS,
+		resolution: getBoardResolution(),
+		roundPixels: true,
 		text,
 		style: {
 			fontFamily: BOARD_FONT_STACK,

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

@@ -22,7 +22,7 @@ type BoardScriptHost = {
   document?: (document: BoardDocument, time: number) => BoardDocument;
   ready?: (id: string) => boolean;
   revision?: (id: string) => number;
-  frame: (item: SceneItem<BoardCustomItem>, time: number, resolution: number) => Texture | null;
+  frame: (item: SceneItem<BoardCustomItem>, time: number) => Texture | null;
   error: (id: string) => string | null;
   release: (id: string) => void;
 };
@@ -61,7 +61,7 @@ type BoardRenderContext = {
   getTexture: (key: string) => Texture | null;
   hasError: (key: string) => boolean;
   fileState: (path: string) => "ok" | "missing" | "unavailable";
-  acquireTexture: (key: string) => void;
+  acquireTexture: (key: string, item: BoardSceneItem) => void;
   releaseTexture: (key: string) => void;
 };
 type BoardCardRenderer = {
@@ -73,6 +73,8 @@ 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. */
+  resolution?: (container: Container, item: BoardSceneItem, context: BoardRenderContext) => void;
   /** Runs on every zoom step; only update transforms and visibility. */
   zoom?: (container: Container, zoom: number) => void;
   renderFar?: (graphics: Graphics, item: BoardSceneItem, context: BoardRenderContext) => 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 } from "../text-resolution.js";
+import { getBoardResolution, 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,9 +13,9 @@ 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 resolution = Math.min(4, Math.max(.25, context.zoom * getBoardResolution()));
-	const texture = context.scripts?.frame(item, context.time, resolution) ?? null;
+	const texture = context.scripts?.frame(item, context.time) ?? null;
 	const error = context.scripts?.error(item.id) ?? null;
 	parts.sprite.visible = Boolean(texture);
 	const display = texture ?? Texture.EMPTY;
@@ -80,6 +80,10 @@ const customCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "custom") sync(container, item, context);
 	},
+	resolution: (container, _item, context) => {
+		const parts = partsByContainer.get(container);
+		if (parts) syncTextResolution(parts.label, parts.label, context.zoom);
+	},
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {
 			fill: context.palette.muted,

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

@@ -1,8 +1,8 @@
 import { applyMatrix } from "../../../protocol/dist/board-layout.js";
+import { computeDrawBounds, createStrokeRibbonBuilder, trimDrawPoints } from "../../model/draw-geometry.js";
 import { itemAlpha, itemColor } from "../palette.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarStroke, farStrokeSamples } from "./far-plate.js";
-import { computeDrawBounds, createStrokeRibbonBuilder, trimDrawPoints } from "../../model/draw-geometry.js";
 import { Container, Graphics, Mesh, MeshGeometry, Texture } from "pixi.js";
 //#region src/board/render/renderers/draw-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();

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

@@ -1,12 +1,12 @@
 import { BOARD_FONT_STACK, BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
+import { fileCategory, fileStem } from "../../model/file-snapshot.js";
+import { fileCategoryAccent, fileMetaLine, filePreviewKind, fileTypeLabel } from "../../model/file-preview.js";
 import { fitTextToLines } from "../text-fit.js";
 import { boardCardDetailed, syncTextResolution } from "../text-resolution.js";
 import { createCardTag, syncCardTag, zoomCardTag } from "../card-tag.js";
 import { cardElevation, containRect, drawCardSurface, traceCardOutline } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
-import { fileCategory, fileStem } from "../../model/file-snapshot.js";
-import { fileCategoryAccent, fileMetaLine, filePreviewKind, fileTypeLabel } from "../../model/file-preview.js";
 import { Container, Graphics, Sprite, Text, Texture } from "pixi.js";
 //#region src/board/render/renderers/file-card-renderer.ts
 const PADDING = 10;
@@ -73,7 +73,7 @@ function sync(container, item, context) {
 		height,
 		detail,
 		elevation,
-		texture ? `${texture.width}x${texture.height}` : "none",
+		texture?.uid ?? "none",
 		coverFailed,
 		fileState,
 		kind,
@@ -258,6 +258,9 @@ const fileCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "file") sync(container, item, context);
 	},
+	resolution: (container, item, context) => {
+		if (item.type === "file") sync(container, item, context);
+	},
 	zoom: (container, zoom) => {
 		const tag = partsByContainer.get(container)?.tag;
 		if (tag) zoomCardTag(tag, zoom);

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

@@ -1,6 +1,6 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { itemAlpha, itemColor } from "../palette.js";
 import { syncTextResolution } from "../text-resolution.js";
+import { itemAlpha, itemColor } from "../palette.js";
 import { dashPattern, roundRectPoints, tracePolyline, trimPolyline } from "../stroke.js";
 import { createLabel, positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
@@ -98,6 +98,10 @@ const frameCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "frame") sync(container, item, context);
 	},
+	resolution: (container, _item, context) => {
+		const parts = partsByContainer.get(container);
+		if (parts) syncTextResolution(parts.label, parts, context.zoom);
+	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "frame" || item.props.decoration === "none") return;
 		drawFarPlate(graphics, item.frame, {