@neta-art/cohub-cli 10.7.0 → 10.8.1

package/dist/board-kernel.js

@@ -5650,6 +5650,51 @@ function json(params) {
 	return jsonSchema;
 }
 const BOARD_ARROW_STROKE_SIZE = 2.5;
+const BOARD_DEFAULT_ITEM_SIZE$1 = {
+	width: 240,
+	height: 160
+};
+const BOARD_DEFAULT_SIZES$1 = {
+	frame: {
+		width: 480,
+		height: 320
+	},
+	shape: {
+		width: 200,
+		height: 140
+	},
+	image: {
+		width: 480,
+		height: 270
+	},
+	video: {
+		width: 480,
+		height: 270
+	},
+	audio: {
+		width: 320,
+		height: 112
+	},
+	file: {
+		width: 260,
+		height: 132
+	},
+	task: {
+		width: 480,
+		height: 270
+	},
+	effect: {
+		width: 240,
+		height: 240
+	},
+	custom: {
+		width: 480,
+		height: 320
+	}
+};
+function boardDefaultSize(type) {
+	return { ...Object.hasOwn(BOARD_DEFAULT_SIZES$1, type) ? BOARD_DEFAULT_SIZES$1[type] : BOARD_DEFAULT_ITEM_SIZE$1 };
+}
 const BOARD_FONT_STACK = "\"Geist\", system-ui, -apple-system, \"Noto Sans CJK SC\", \"Noto Sans SC\", \"PingFang SC\", \"Microsoft YaHei\", \"Noto Sans Math\", \"Noto Sans Symbols 2\", \"DejaVu Sans\", \"FreeSans\", \"FreeSerif\", sans-serif";
 const BOARD_MONO_FONT_STACK = "\"Geist Mono\", \"Fira Code\", ui-monospace, \"Noto Sans Mono CJK SC\", \"Noto Sans Math\", \"DejaVu Sans\", \"FreeSans\", \"FreeSerif\", monospace";
 //#endregion
@@ -5827,12 +5872,9 @@ const itemEnvelope$1 = {
 	locked: boolean().optional(),
 	metadata: record(string(), unknown()).optional()
 };
-const boxed$1 = (width, height) => ({
+const boxed$1 = (size) => ({
 	...itemEnvelope$1,
-	size: BoardSizeSchema$1.default({
-		width,
-		height
-	})
+	size: BoardSizeSchema$1.default({ ...size })
 });
 const unsized$1 = { ...itemEnvelope$1 };
 const fontSize$1 = finite$1.min(2).max(512);
@@ -5850,7 +5892,7 @@ const BOARD_SHAPE_GEOMETRIES$1 = [
 	"path"
 ];
 const BoardFrameItemSchema$1 = object({
-	...boxed$1(480, 320),
+	...boxed$1(BOARD_DEFAULT_SIZES$1.frame),
 	type: literal("frame"),
 	props: object({
 		label: string().max(280).default(""),
@@ -5874,7 +5916,7 @@ const BoardTextItemSchema$1 = object({
 	}).strict().prefault({})
 }).strict();
 const BoardShapeItemSchema$1 = object({
-	...boxed$1(240, 160),
+	...boxed$1(BOARD_DEFAULT_SIZES$1.shape),
 	type: literal("shape"),
 	props: object({
 		geometry: _enum(BOARD_SHAPE_GEOMETRIES$1).default("rectangle"),
@@ -5972,7 +6014,7 @@ const BoardCropSchema$1 = object({
 	h: ratio$1
 }).strict().describe("Region shown, as fractions of the image. Without it the whole image fits inside size.");
 const BoardImageItemSchema$1 = object({
-	...boxed$1(640, 360),
+	...boxed$1(BOARD_DEFAULT_SIZES$1.image),
 	type: literal("image"),
 	props: object({
 		...mediaProps$1,
@@ -5980,17 +6022,17 @@ const BoardImageItemSchema$1 = object({
 	}).strict()
 }).strict();
 const BoardVideoItemSchema$1 = object({
-	...boxed$1(640, 360),
+	...boxed$1(BOARD_DEFAULT_SIZES$1.video),
 	type: literal("video"),
 	props: object(timedFileProps$1).strict()
 }).strict();
 const BoardAudioItemSchema$1 = object({
-	...boxed$1(480, 96),
+	...boxed$1(BOARD_DEFAULT_SIZES$1.audio),
 	type: literal("audio"),
 	props: object(timedFileProps$1).strict()
 }).strict();
 const BoardFileItemSchema$1 = object({
-	...boxed$1(360, 220),
+	...boxed$1(BOARD_DEFAULT_SIZES$1.file),
 	type: literal("file"),
 	props: object(fileProps$1).strict()
 }).strict();
@@ -6047,7 +6089,7 @@ const BoardTaskSnapshotSchema$1 = object({
 	updatedAt: string().optional()
 }).strict();
 const BoardTaskItemSchema$1 = object({
-	...boxed$1(420, 240),
+	...boxed$1(BOARD_DEFAULT_SIZES$1.task),
 	type: literal("task"),
 	props: object({
 		taskRunId: string().min(1).max(160).describe("The generation run shown; the server keeps the card's status and results up to date."),
@@ -6062,7 +6104,7 @@ const BOARD_EFFECT_KINDS$1 = [
 	"glow"
 ];
 const BoardEffectItemSchema$1 = object({
-	...boxed$1(240, 240),
+	...boxed$1(BOARD_DEFAULT_SIZES$1.effect),
 	type: literal("effect"),
 	props: object({
 		kind: _enum(BOARD_EFFECT_KINDS$1),
@@ -6079,18 +6121,14 @@ const BoardEffectItemSchema$1 = object({
 	}).strict()
 }).strict();
 const BoardCustomItemSchema$1 = object({
-	...boxed$1(480, 320),
+	...boxed$1(BOARD_DEFAULT_SIZES$1.custom),
 	type: literal("custom"),
 	script: BoardScriptSchema$1,
 	props: object({}).strict().default({})
 }).strict();
 const BOARD_EXTENSION_TYPE_PATTERN$1 = /^[a-z][a-z0-9]*(?:\.[a-z0-9-]+)+$/;
 const BoardExtensionItemSchema$1 = object({
-	...itemEnvelope$1,
-	size: BoardSizeSchema$1.default({
-		width: 240,
-		height: 160
-	}),
+	...boxed$1(BOARD_DEFAULT_ITEM_SIZE$1),
 	type: string().regex(BOARD_EXTENSION_TYPE_PATTERN$1),
 	props: record(string(), unknown()).default({})
 }).strict();
@@ -6540,8 +6578,7 @@ function createBoardLayout(initialLookup, dependents) {
 		} else box = {
 			x: 0,
 			y: 0,
-			width: 240,
-			height: 160
+			...boardDefaultSize(item.type)
 		};
 		boxes.set(id, box);
 		return box;
@@ -27490,21 +27527,9 @@ function fitTextToWidth(text, value, width) {
 }
 //#endregion
 //#region ../sdk/src/board/render/text-resolution.ts
-const MAX_BOARD_RESOLUTION = 3;
-const MAX_BOARD_PIXELS = 8e6;
-const MAX_TEXT_RESOLUTION = 6;
-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;
-	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 MIN_TEXT_RESOLUTION = .125;
+const MAX_TEXT_EDGE = 4096;
+const ZOOM_BUCKETS = [
 	.5,
 	1,
 	1.5,
@@ -27514,23 +27539,17 @@ 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);
-}
-/** 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) {
@@ -27712,13 +27731,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);
@@ -27732,7 +27753,6 @@ function syncCardTag(tag, input, context) {
 		return;
 	}
 	if (!tag.text) {
-		tag.resolution = textResolutionForZoom(context.zoom);
 		tag.text = new Text({
 			text: "",
 			style: {
@@ -27740,30 +27760,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;
-	}
-	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$2));
-	tag.text.position.set(17, (ICON - tag.text.height) / 2);
+	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$2));
+		tag.text.position.set(17, (ICON - tag.text.height) / 2);
+	}
+	syncTextResolution(tag.text, context.textResolution * tagScale(context.zoom));
 	zoomCardTag(tag, context.zoom);
 }
 //#endregion
@@ -27968,6 +27985,19 @@ function traceCardOutline(graphics, rect, style, grow = 0) {
 	const radius = Math.min(Math.max(0, style.radius + grow), width / 2, height / 2);
 	return radius > 0 ? graphics.roundRect(x, y, width, height, radius) : graphics.rect(x, y, width, height);
 }
+function fillCardPicture(graphics, texture, picture, style, crop) {
+	const sampling = texture.source.style;
+	if (sampling.addressMode !== "mirror-repeat") {
+		sampling.addressMode = "mirror-repeat";
+		sampling.update();
+	}
+	const matrix = crop ? new Matrix(1 / crop.w, 0, 0, 1 / crop.h, -crop.x / crop.w, -crop.y / crop.h) : void 0;
+	return traceCardOutline(graphics, picture, style).fill({
+		texture,
+		textureSpace: "local",
+		...matrix ? { matrix } : {}
+	});
+}
 function tracePixelRect(graphics, x, y, width, height, step) {
 	const s = Math.min(step, width / 4, height / 4);
 	if (s <= 0) return graphics.rect(x, y, width, height);
@@ -28061,9 +28091,9 @@ function cardElevation(context, id) {
 }
 //#endregion
 //#region ../sdk/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: {
@@ -28220,12 +28250,15 @@ function audioKeyCenter(width, height) {
 function sync$13(container, item, context) {
 	const parts = partsByContainer$13.get(container);
 	if (!parts) return;
+	syncContent$1(parts, item, context);
+	syncTextResolution(parts.title, context.textResolution);
+}
+function syncContent$1(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,
@@ -28278,14 +28311,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);
@@ -28294,8 +28326,7 @@ const audioCardRenderer = {
 			plate,
 			wave,
 			title,
-			sig: "",
-			resolution
+			sig: ""
 		});
 		if (item.type === "audio") sync$13(root, item, context);
 		return root;
@@ -28303,6 +28334,9 @@ const audioCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "audio") sync$13(container, item, context);
 	},
+	resolution: (container, item, context) => {
+		if (item.type === "audio") sync$13(container, item, context);
+	},
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {
 			fill: context.palette.surface,
@@ -28351,7 +28385,7 @@ function sync$12(container, item, context) {
 	const elevation = cardElevation(context, item.id);
 	const sig = [
 		key ?? "",
-		texture ? `${texture.width}x${texture.height}` : "none",
+		texture?.uid ?? "none",
 		failed,
 		width,
 		height,
@@ -28420,6 +28454,9 @@ const modelCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "file") sync$12(container, item, context);
 	},
+	resolution: (container, item, context) => {
+		if (item.type === "file") sync$12(container, item, context);
+	},
 	zoom: (container, zoom) => {
 		const tag = partsByContainer$12.get(container)?.tag;
 		if (tag) zoomCardTag(tag, zoom);
@@ -28450,7 +28487,6 @@ function sync$11(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 = [
@@ -28517,6 +28553,7 @@ function sync$11(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;
@@ -28530,7 +28567,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: {
@@ -28539,7 +28575,7 @@ const arrowCardRenderer = {
 				fontSize: 14,
 				fontWeight: "500"
 			},
-			resolution,
+			resolution: context.textResolution,
 			roundPixels: true
 		});
 		label.anchor.set(.5);
@@ -28551,8 +28587,7 @@ const arrowCardRenderer = {
 			backdrop,
 			label,
 			lineSig: "",
-			labelSig: "",
-			resolution
+			labelSig: ""
 		});
 		if (item.type === "arrow") sync$11(root, item, context);
 		return root;
@@ -28560,6 +28595,10 @@ const arrowCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "arrow") sync$11(container, item, context);
 	},
+	resolution: (container, _item, context) => {
+		const parts = partsByContainer$11.get(container);
+		if (parts) syncTextResolution(parts.label, context.textResolution);
+	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "arrow") return;
 		const arrow = item;
@@ -28943,6 +28982,14 @@ function syncClip(parts, rect, style) {
 function sync$8(container, item, context) {
 	const parts = partsByContainer$8.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);
@@ -28960,16 +29007,13 @@ function sync$8(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,
 		height,
 		detail,
 		elevation,
-		texture ? `${texture.width}x${texture.height}` : "none",
+		texture?.uid ?? "none",
 		coverFailed,
 		fileState,
 		kind,
@@ -29086,7 +29130,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: {
@@ -29143,10 +29187,7 @@ const fileCardRenderer = {
 			title,
 			excerpt,
 			visualSig: "",
-			textSig: "",
-			titleRes: { resolution },
-			excerptRes: { resolution },
-			typeMarkRes: { resolution }
+			textSig: ""
 		});
 		if (item.type === "file") sync$8(root, item, context);
 		return root;
@@ -29154,6 +29195,9 @@ const fileCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "file") sync$8(container, item, context);
 	},
+	resolution: (container, item, context) => {
+		if (item.type === "file") sync$8(container, item, context);
+	},
 	zoom: (container, zoom) => {
 		const tag = partsByContainer$8.get(container)?.tag;
 		if (tag) zoomCardTag(tag, zoom);
@@ -29181,7 +29225,6 @@ function sync$7(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");
@@ -29237,6 +29280,7 @@ function sync$7(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 = {
@@ -29250,15 +29294,14 @@ const frameCardRenderer = {
 			fontFamily: BOARD_FONT_STACK,
 			fontSize: 12,
 			fontWeight: "600"
-		});
+		}, context.textResolution);
 		root.addChild(box, label);
 		partsByContainer$7.set(root, {
 			root,
 			box,
 			label,
 			visualSig: "",
-			textSig: "",
-			resolution: label.resolution
+			textSig: ""
 		});
 		if (item.type === "frame") sync$7(root, item, context);
 		return root;
@@ -29266,6 +29309,10 @@ const frameCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "frame") sync$7(container, item, context);
 	},
+	resolution: (container, _item, context) => {
+		const parts = partsByContainer$7.get(container);
+		if (parts) syncTextResolution(parts.label, context.textResolution);
+	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "frame" || item.props.decoration === "none") return;
 		drawFarPlate(graphics, item.frame, {
@@ -29373,7 +29420,6 @@ function sync$6(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,
@@ -29432,6 +29478,7 @@ function sync$6(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 = {
@@ -29440,7 +29487,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: {
@@ -29452,7 +29498,7 @@ const shapeCardRenderer = {
 				wordWrap: true,
 				lineHeight: 28
 			},
-			resolution,
+			resolution: context.textResolution,
 			roundPixels: true
 		});
 		label.anchor.set(.5);
@@ -29463,8 +29509,7 @@ const shapeCardRenderer = {
 			label,
 			visualSig: "",
 			textSig: "",
-			wrapWidth: 0,
-			resolution
+			wrapWidth: 0
 		});
 		if (item.type === "shape") sync$6(root, item, context);
 		return root;
@@ -29472,6 +29517,10 @@ const shapeCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "shape") sync$6(container, item, context);
 	},
+	resolution: (container, _item, context) => {
+		const parts = partsByContainer$6.get(container);
+		if (parts) syncTextResolution(parts.label, context.textResolution);
+	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "shape") return;
 		drawFarPlate(graphics, item.frame, {
@@ -29497,10 +29546,8 @@ function sync$5(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;
@@ -29516,19 +29563,21 @@ function sync$5(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",
@@ -29547,7 +29596,8 @@ const customCardRenderer = {
 				wordWrap: true,
 				breakWords: true
 			},
-			resolution: getBoardResolution()
+			resolution: context.textResolution,
+			roundPixels: true
 		});
 		label.anchor.set(.5);
 		root.addChild(sprite, placeholder, label);
@@ -29565,6 +29615,10 @@ const customCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "custom") sync$5(container, item, context);
 	},
+	resolution: (container, _item, context) => {
+		const parts = partsByContainer$5.get(container);
+		if (parts) syncTextResolution(parts.label, context.textResolution);
+	},
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {
 			fill: context.palette.muted,
@@ -29592,28 +29646,6 @@ function cropRect(crop) {
 		h
 	} : null;
 }
-function showTexture(parts, texture, crop) {
-	const rect = texture ? cropRect(crop) : null;
-	const key = rect ? `${rect.x}|${rect.y}|${rect.w}|${rect.h}` : "";
-	const previous = parts.cropped;
-	const reusable = previous && parts.cropSource === texture && parts.cropKey === key;
-	if (texture && rect && !reusable) {
-		const { frame } = texture;
-		const width = Math.max(1, frame.width * rect.w);
-		const height = Math.max(1, frame.height * rect.h);
-		const x = frame.x + Math.min(frame.width * rect.x, frame.width - width);
-		const y = frame.y + Math.min(frame.height * rect.y, frame.height - height);
-		parts.cropped = new Texture({
-			source: texture.source,
-			frame: new Rectangle(x, y, width, height)
-		});
-	} else if (!rect) parts.cropped = null;
-	parts.cropSource = rect ? texture : null;
-	parts.cropKey = key;
-	const display = parts.cropped ?? texture ?? Texture.EMPTY;
-	if (parts.sprite.texture !== display) parts.sprite.texture = display;
-	if (previous && previous !== parts.cropped) previous.destroy(false);
-}
 const PRINT_MARGIN = 6;
 function sync$4(container, item, context) {
 	const parts = partsByContainer$4.get(container);
@@ -29628,7 +29660,7 @@ function sync$4(container, item, context) {
 		key ?? "",
 		width,
 		height,
-		texture ? `${texture.width}x${texture.height}` : "none",
+		texture?.uid ?? "none",
 		JSON.stringify(item.props.crop ?? null),
 		failed,
 		elevation,
@@ -29636,8 +29668,7 @@ function sync$4(container, item, context) {
 	].join("|");
 	if (sig === parts.sig) return;
 	parts.sig = sig;
-	showTexture(parts, texture, item.props.crop);
-	const display = parts.sprite.texture;
+	const crop = cropRect(item.props.crop);
 	const framed = context.style.media === "framed";
 	const margin = framed ? Math.min(PRINT_MARGIN, width / 8, height / 8) : 0;
 	const area = {
@@ -29646,7 +29677,7 @@ function sync$4(container, item, context) {
 		width: width - margin * 2,
 		height: height - margin * 2
 	};
-	const fitted = texture ? containRect(area.width, area.height, display.width, display.height) : {
+	const fitted = texture ? containRect(area.width, area.height, texture.width * (crop?.w ?? 1), texture.height * (crop?.h ?? 1)) : {
 		...area,
 		x: 0,
 		y: 0
@@ -29663,16 +29694,11 @@ function sync$4(container, item, context) {
 		width: picture.width + margin * 2,
 		height: picture.height + margin * 2
 	} : picture;
-	parts.sprite.visible = Boolean(texture);
-	if (texture) {
-		parts.sprite.position.set(picture.x, picture.y);
-		parts.sprite.width = picture.width;
-		parts.sprite.height = picture.height;
-	}
-	traceCardOutline(parts.mask.clear(), picture, framed ? {
+	parts.picture.clear();
+	if (texture) fillCardPicture(parts.picture, texture, picture, framed ? {
 		corner: "round",
 		radius: 0
-	} : context.style).fill({ color: 16777215 });
+	} : context.style, crop);
 	parts.placeholder.clear();
 	if (texture && !framed) return;
 	drawCardSurface(parts.placeholder, card, context.style, {
@@ -29699,20 +29725,14 @@ const imageCardRenderer = {
 	canRender: (item) => item.type === "image",
 	create: (item, context) => {
 		const root = new Container();
-		const sprite = new Sprite(Texture.EMPTY);
 		const placeholder = new Graphics();
-		const mask = new Graphics();
-		root.addChild(placeholder, sprite, mask);
-		sprite.mask = mask;
+		const picture = new Graphics();
+		root.addChild(placeholder, picture);
 		partsByContainer$4.set(root, {
 			root,
-			sprite,
 			placeholder,
-			mask,
-			sig: "",
-			cropped: null,
-			cropSource: null,
-			cropKey: ""
+			picture,
+			sig: ""
 		});
 		if (item.type === "image") sync$4(root, item, context);
 		return root;
@@ -29727,9 +29747,7 @@ const imageCardRenderer = {
 		});
 	},
 	destroy: (container) => {
-		const parts = partsByContainer$4.get(container);
-		parts?.root.destroy({ children: true });
-		parts?.cropped?.destroy(false);
+		partsByContainer$4.get(container)?.root.destroy({ children: true });
 		partsByContainer$4.delete(container);
 	}
 };
@@ -29985,7 +30003,7 @@ function sync$3(container, item, context) {
 	if (key !== parts.assetKey) {
 		if (parts.assetKey) context.releaseTexture(parts.assetKey);
 		parts.assetKey = key;
-		if (key) context.acquireTexture(key);
+		if (key) context.acquireTexture(key, item);
 	}
 	const texture = key ? context.getTexture(key) : null;
 	const previewFailed = Boolean(key && !texture && context.hasError(key));
@@ -30009,10 +30027,6 @@ function sync$3(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,
@@ -30043,6 +30057,12 @@ function sync$3(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,
@@ -30058,7 +30078,7 @@ function sync$3(container, item, context) {
 		artifact?.type ?? "none",
 		artifact?.id ?? "none",
 		item.props.taskRunId,
-		texture ? `${texture.width}x${texture.height}` : "none",
+		texture?.uid ?? "none",
 		context.themeKey
 	].join("|");
 	if (visualSig !== parts.visualSig) {
@@ -30160,7 +30180,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: {
@@ -30170,7 +30189,7 @@ const taskCardRenderer = {
 				wordWrap: true,
 				breakWords: true
 			},
-			resolution,
+			resolution: context.textResolution,
 			roundPixels: true
 		});
 		const body = text(BOARD_FONT_STACK, 11.5, "500");
@@ -30204,7 +30223,6 @@ const taskCardRenderer = {
 			assetKey: null,
 			visualSig: "",
 			textSig: "",
-			resolution,
 			motion: {
 				itemId: "",
 				width: 0,
@@ -30227,6 +30245,9 @@ const taskCardRenderer = {
 		const parts = partsByContainer$3.get(container);
 		return parts ? advance(parts, clock) : null;
 	},
+	resolution: (container, item, context) => {
+		if (item.type === "task") sync$3(container, item, context);
+	},
 	zoom: (container, zoom) => {
 		const tag = partsByContainer$3.get(container)?.tag;
 		if (tag) zoomCardTag(tag, zoom);
@@ -30278,7 +30299,6 @@ function sync$2(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");
@@ -30308,6 +30328,7 @@ function sync$2(container, item, context) {
 			breakWords: true
 		});
 	}
+	syncTextResolution(parts.body, context.textResolution * previewScale);
 	syncCaret(parts, item, context);
 }
 const textCardRenderer = {
@@ -30315,11 +30336,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();
@@ -30328,7 +30348,6 @@ const textCardRenderer = {
 			root,
 			body,
 			caret,
-			resolution,
 			contentSig: ""
 		});
 		if (item.type === "text") sync$2(root, item, context);
@@ -30337,6 +30356,10 @@ const textCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "text") sync$2(container, item, context);
 	},
+	resolution: (container, _item, context) => {
+		const parts = partsByContainer$2.get(container);
+		if (parts) syncTextResolution(parts.body, context.textResolution * parts.body.scale.x);
+	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "text") return;
 		drawFarPlate(graphics, item.frame, {
@@ -30358,7 +30381,6 @@ function sync$1(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,
@@ -30393,6 +30415,7 @@ function sync$1(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 = {
@@ -30402,7 +30425,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: {
@@ -30410,7 +30432,7 @@ const unknownCardRenderer = {
 				fontSize: 11,
 				fontWeight: "600"
 			},
-			resolution,
+			resolution: context.textResolution,
 			roundPixels: true
 		});
 		label.anchor.set(.5);
@@ -30420,8 +30442,7 @@ const unknownCardRenderer = {
 			box,
 			label,
 			visualSig: "",
-			textSig: "",
-			resolution
+			textSig: ""
 		});
 		sync$1(root, item, context);
 		return root;
@@ -30429,6 +30450,10 @@ const unknownCardRenderer = {
 	update: (container, item, context) => {
 		sync$1(container, item, context);
 	},
+	resolution: (container, _item, context) => {
+		const parts = partsByContainer$1.get(container);
+		if (parts) syncTextResolution(parts.label, context.textResolution);
+	},
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {
 			fill: context.palette.muted,
@@ -30466,7 +30491,7 @@ function sync(container, item, context) {
 	const elevation = cardElevation(context, item.id);
 	const sig = [
 		key ?? "",
-		texture ? `${texture.width}x${texture.height}` : "none",
+		texture?.uid ?? "none",
 		width,
 		height,
 		elevation,
@@ -30496,17 +30521,18 @@ function sync(container, item, context) {
 		elevation
 	});
 	if (framed) drawFilmRails(parts.plate, width, height, rail, context.palette.bg);
-	traceCardOutline(parts.mask.clear(), framed ? screen : rect, framed ? {
-		corner: "round",
-		radius: 1
-	} : context.style).fill({ color: 16777215 });
-	if (texture && parts.sprite.texture !== texture) parts.sprite.texture = texture;
-	parts.sprite.visible = Boolean(texture);
+	parts.picture.clear();
 	if (texture) {
 		const fitted = containRect(screen.width, screen.height, texture.width, texture.height);
-		parts.sprite.position.set(screen.x + fitted.x, screen.y + fitted.y);
-		parts.sprite.width = fitted.width;
-		parts.sprite.height = fitted.height;
+		const picture = {
+			...fitted,
+			x: screen.x + fitted.x,
+			y: screen.y + fitted.y
+		};
+		fillCardPicture(parts.picture, texture, picture, framed ? {
+			corner: "round",
+			radius: 1
+		} : context.style);
 	}
 	parts.chrome.clear();
 	if (boardCardDetailed(context.zoom)) drawMediaPlayKey(parts.chrome, screen.x + screen.width / 2, screen.y + screen.height / 2, Math.min(18, Math.min(screen.width, screen.height) * .16), context);
@@ -30531,17 +30557,14 @@ const videoCardRenderer = {
 	create: (item, context) => {
 		const root = new Container();
 		const plate = new Graphics();
-		const sprite = new Sprite(Texture.EMPTY);
-		const mask = new Graphics();
+		const picture = new Graphics();
 		const chrome = new Graphics();
 		const tag = createCardTag();
-		root.addChild(plate, sprite, mask, chrome, tag.root);
-		sprite.mask = mask;
+		root.addChild(plate, picture, chrome, tag.root);
 		partsByContainer.set(root, {
 			root,
 			plate,
-			sprite,
-			mask,
+			picture,
 			chrome,
 			tag,
 			sig: ""
@@ -30552,6 +30575,9 @@ const videoCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "video") sync(container, item, context);
 	},
+	resolution: (container, item, context) => {
+		if (item.type === "video") sync(container, item, context);
+	},
 	zoom: (container, zoom) => {
 		const tag = partsByContainer.get(container)?.tag;
 		if (tag) zoomCardTag(tag, zoom);
@@ -30606,6 +30632,48 @@ function createBoardCardRendererResolver(renderers = []) {
 }
 /** The built-in renderers alone. */
 const getBoardCardRenderer = createBoardCardRendererResolver();
+const BOARD_DEFAULT_ITEM_SIZE = {
+	width: 240,
+	height: 160
+};
+const BOARD_DEFAULT_SIZES = {
+	frame: {
+		width: 480,
+		height: 320
+	},
+	shape: {
+		width: 200,
+		height: 140
+	},
+	image: {
+		width: 480,
+		height: 270
+	},
+	video: {
+		width: 480,
+		height: 270
+	},
+	audio: {
+		width: 320,
+		height: 112
+	},
+	file: {
+		width: 260,
+		height: 132
+	},
+	task: {
+		width: 480,
+		height: 270
+	},
+	effect: {
+		width: 240,
+		height: 240
+	},
+	custom: {
+		width: 480,
+		height: 320
+	}
+};
 //#endregion
 //#region ../protocol/dist/board-url.js
 const BOARD_REMOTE_URL_MAX_LENGTH = 4096;
@@ -30781,12 +30849,9 @@ const itemEnvelope = {
 	locked: boolean().optional(),
 	metadata: record(string(), unknown()).optional()
 };
-const boxed = (width, height) => ({
+const boxed = (size) => ({
 	...itemEnvelope,
-	size: BoardSizeSchema.default({
-		width,
-		height
-	})
+	size: BoardSizeSchema.default({ ...size })
 });
 const unsized = { ...itemEnvelope };
 const fontSize = finite.min(2).max(512);
@@ -30804,7 +30869,7 @@ const BOARD_SHAPE_GEOMETRIES = [
 	"path"
 ];
 object({
-	...boxed(480, 320),
+	...boxed(BOARD_DEFAULT_SIZES.frame),
 	type: literal("frame"),
 	props: object({
 		label: string().max(280).default(""),
@@ -30828,7 +30893,7 @@ object({
 	}).strict().prefault({})
 }).strict();
 object({
-	...boxed(240, 160),
+	...boxed(BOARD_DEFAULT_SIZES.shape),
 	type: literal("shape"),
 	props: object({
 		geometry: _enum(BOARD_SHAPE_GEOMETRIES).default("rectangle"),
@@ -30926,7 +30991,7 @@ const BoardCropSchema = object({
 	h: ratio
 }).strict().describe("Region shown, as fractions of the image. Without it the whole image fits inside size.");
 object({
-	...boxed(640, 360),
+	...boxed(BOARD_DEFAULT_SIZES.image),
 	type: literal("image"),
 	props: object({
 		...mediaProps,
@@ -30934,17 +30999,17 @@ object({
 	}).strict()
 }).strict();
 object({
-	...boxed(640, 360),
+	...boxed(BOARD_DEFAULT_SIZES.video),
 	type: literal("video"),
 	props: object(timedFileProps).strict()
 }).strict();
 object({
-	...boxed(480, 96),
+	...boxed(BOARD_DEFAULT_SIZES.audio),
 	type: literal("audio"),
 	props: object(timedFileProps).strict()
 }).strict();
 object({
-	...boxed(360, 220),
+	...boxed(BOARD_DEFAULT_SIZES.file),
 	type: literal("file"),
 	props: object(fileProps).strict()
 }).strict();
@@ -31001,7 +31066,7 @@ const BoardTaskSnapshotSchema = object({
 	updatedAt: string().optional()
 }).strict();
 object({
-	...boxed(420, 240),
+	...boxed(BOARD_DEFAULT_SIZES.task),
 	type: literal("task"),
 	props: object({
 		taskRunId: string().min(1).max(160).describe("The generation run shown; the server keeps the card's status and results up to date."),
@@ -31016,7 +31081,7 @@ const BOARD_EFFECT_KINDS = [
 	"glow"
 ];
 object({
-	...boxed(240, 240),
+	...boxed(BOARD_DEFAULT_SIZES.effect),
 	type: literal("effect"),
 	props: object({
 		kind: _enum(BOARD_EFFECT_KINDS),
@@ -31033,18 +31098,14 @@ object({
 	}).strict()
 }).strict();
 object({
-	...boxed(480, 320),
+	...boxed(BOARD_DEFAULT_SIZES.custom),
 	type: literal("custom"),
 	script: BoardScriptSchema,
 	props: object({}).strict().default({})
 }).strict();
 const BOARD_EXTENSION_TYPE_PATTERN = /^[a-z][a-z0-9]*(?:\.[a-z0-9-]+)+$/;
 object({
-	...itemEnvelope,
-	size: BoardSizeSchema.default({
-		width: 240,
-		height: 160
-	}),
+	...boxed(BOARD_DEFAULT_ITEM_SIZE),
 	type: string().regex(BOARD_EXTENSION_TYPE_PATTERN),
 	props: record(string(), unknown()).default({})
 }).strict();
@@ -31557,6 +31618,7 @@ function buildContext(input) {
 			themeKey: "export",
 			rendererType: "canvas",
 			zoom: input.scale,
+			textResolution: input.scale,
 			reducedMotion: true,
 			labels: DEFAULT_BOARD_RENDER_LABELS,
 			taskRun: () => null,