@neta-art/cohub 11.5.1 → 12.1.0

package/dist/board/render/renderers/frame-card-renderer.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;
@@ -98,6 +97,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, context.textResolution);
+	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "frame" || item.props.decoration === "none") return;
 		drawFarPlate(graphics, item.frame, {

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

@@ -1,7 +1,7 @@
-import { cardElevation, containRect, drawCardSurface, traceCardOutline } from "../surface.js";
+import { cardElevation, containRect, drawCardSurface, fillCardPicture } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
-import { Container, Graphics, Rectangle, Sprite, Texture } from "pixi.js";
+import { Container, Graphics } from "pixi.js";
 //#region src/board/render/renderers/image-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
 function cropRect(crop) {
@@ -15,28 +15,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(container, item, context) {
 	const parts = partsByContainer.get(container);
@@ -51,7 +29,7 @@ function sync(container, item, context) {
 		key ?? "",
 		width,
 		height,
-		texture ? `${texture.width}x${texture.height}` : "none",
+		texture?.uid ?? "none",
 		JSON.stringify(item.props.crop ?? null),
 		failed,
 		elevation,
@@ -59,8 +37,7 @@ function sync(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 = {
@@ -69,7 +46,7 @@ function sync(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
@@ -86,16 +63,11 @@ function sync(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, {
@@ -122,20 +94,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.set(root, {
 			root,
-			sprite,
 			placeholder,
-			mask,
-			sig: "",
-			cropped: null,
-			cropSource: null,
-			cropKey: ""
+			picture,
+			sig: ""
 		});
 		if (item.type === "image") sync(root, item, context);
 		return root;
@@ -150,9 +116,7 @@ const imageCardRenderer = {
 		});
 	},
 	destroy: (container) => {
-		const parts = partsByContainer.get(container);
-		parts?.root.destroy({ children: true });
-		parts?.cropped?.destroy(false);
+		partsByContainer.get(container)?.root.destroy({ children: true });
 		partsByContainer.delete(container);
 	}
 };

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

@@ -42,7 +42,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",
 		failed,
 		width,
 		height,
@@ -111,6 +111,9 @@ const modelCardRenderer = {
 	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/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 { itemAlpha, itemColor } from "../palette.js";
-import { syncTextResolution, syncTextWrapWidth, textResolutionForZoom } from "../text-resolution.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;
@@ -199,6 +197,10 @@ const shapeCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "shape") sync(container, item, context);
 	},
+	resolution: (container, _item, context) => {
+		const parts = partsByContainer.get(container);
+		if (parts) syncTextResolution(parts.label, context.textResolution);
+	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "shape") return;
 		drawFarPlate(graphics, item.frame, {

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

@@ -1,7 +1,7 @@
 import { BOARD_FONT_STACK, BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { featuredTaskArtifact } from "../../../protocol/dist/board-task.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";
@@ -259,7 +259,7 @@ function sync(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));
@@ -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,
@@ -332,7 +334,7 @@ function sync(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) {
@@ -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,
@@ -501,6 +501,9 @@ const taskCardRenderer = {
 		const parts = partsByContainer.get(container);
 		return parts ? advance(parts, clock) : null;
 	},
+	resolution: (container, item, context) => {
+		if (item.type === "task") sync(container, item, context);
+	},
 	zoom: (container, zoom) => {
 		const tag = partsByContainer.get(container)?.tag;
 		if (tag) zoomCardTag(tag, zoom);

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

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

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

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

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

@@ -1,11 +1,11 @@
 import { getMediaResourceTitle } from "../../model/media.js";
 import { boardCardDetailed } from "../text-resolution.js";
 import { createCardTag, formatBoardDuration, syncCardTag, zoomCardTag } from "../card-tag.js";
-import { cardElevation, containRect, drawCardSurface, traceCardOutline } from "../surface.js";
+import { cardElevation, containRect, drawCardSurface, fillCardPicture } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
 import { drawMediaPlayKey } from "./media-key.js";
-import { Container, Graphics, Sprite, Texture } from "pixi.js";
+import { Container, Graphics } from "pixi.js";
 //#region src/board/render/renderers/video-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
 const FILM_RAIL = 10;
@@ -31,7 +31,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,
@@ -61,17 +61,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);
@@ -96,17 +97,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: ""
@@ -117,6 +115,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);

package/dist/board/render/script-host.d.ts

@@ -9,6 +9,8 @@ type BoardScriptHostOptions = {
   readModule(path: string): Promise<string>;
   host: HTMLElement;
   onFrame(): void;
+  onSchedule?(): void;
+  isMaterialized?(id: string): boolean;
   onOutput(id: string, output: BoardScriptOutput | null): void;
   capabilities?: Record<string, (id: string, input: unknown) => Promise<unknown>>;
   timeoutMs?: number;

package/dist/board/render/script-host.js

@@ -1,7 +1,9 @@
 import { boardScriptItems } from "../model/script-index.js";
 import { boardScriptScope } from "../model/script-scene.js";
 import { boardScriptHitVisible, resolveBoardScriptHit } from "../model/script-hit.js";
+import { getBoardResolution } from "./text-resolution.js";
 import { BoardScriptTexture } from "./script-texture.js";
+import { scriptResolution } from "./script-resolution.js";
 import { createBoardScriptModuleReader, loadBoardScriptSources } from "../../protocol/dist/board-script-modules.js";
 import { boardScriptFrameSource } from "./script-sandbox.js";
 //#region src/board/render/script-host.ts
@@ -33,6 +35,11 @@ function createBoardScriptHost(options) {
 	layer.dataset.boardScripts = "";
 	options.host.appendChild(layer);
 	let disposed = false;
+	const schedule = () => (options.onSchedule ?? options.onFrame)();
+	let lastZoom = NaN;
+	let settledAt = 0;
+	let resolutionTimer;
+	const needsTick = (entry) => !entry.error && entry.ready && entry.sources !== null && !entry.pending && (entry.dirty || Boolean(entry.output?.updating || entry.output?.animated && entry.draw));
 	const retiredTextures = /* @__PURE__ */ new Set();
 	let retirementFrame = 0;
 	function retireTexture(texture) {
@@ -127,7 +134,7 @@ function createBoardScriptHost(options) {
 		}
 		if (data.kind === "dirty") {
 			entry.dirty = true;
-			options.onFrame();
+			schedule();
 			return;
 		}
 		if (data.kind === "call") {
@@ -168,8 +175,11 @@ function createBoardScriptHost(options) {
 		}
 		clearTimeout(entry.timer);
 		entry.pending = false;
-		revisions.set(entry.id, (revisions.get(entry.id) ?? 0) + 1);
-		if (data.bitmap) entry.texture.update(data.bitmap);
+		const acceptsBitmap = Boolean(data.bitmap) && (options.export || !options.isMaterialized || options.isMaterialized(entry.id)) && entry.draw;
+		if (acceptsBitmap) entry.texture.update(data.bitmap);
+		else data.bitmap?.close?.();
+		const changed = acceptsBitmap || Boolean(data.output);
+		if (changed) revisions.set(entry.id, (revisions.get(entry.id) ?? 0) + 1);
 		try {
 			const output = data.output;
 			if (output) {
@@ -180,7 +190,8 @@ function createBoardScriptHost(options) {
 			fail(entry, error instanceof Error ? error.message : String(error));
 			return;
 		}
-		options.onFrame();
+		if (changed) options.onFrame();
+		else if (needsTick(entry)) schedule();
 	};
 	window.addEventListener("message", onMessage);
 	return {
@@ -229,11 +240,20 @@ function createBoardScriptHost(options) {
 		},
 		output: (id) => entries.get(id)?.output ?? null,
 		get animated() {
-			return [...entries.values()].some((entry) => !entry.error && entry.output?.animated && (entry.visible || entry.output.updating) && !entry.pending);
+			for (const entry of entries.values()) if (needsTick(entry)) return true;
+			return false;
 		},
 		sync(board, scene, camera, time, inputEnabled, visibleIds) {
 			if (disposed) return;
 			interactive = inputEnabled;
+			const now = performance.now();
+			if (!options.export && camera.zoom !== lastZoom) {
+				const first = Number.isNaN(lastZoom);
+				lastZoom = camera.zoom;
+				settledAt = first ? now : now + 120;
+				clearTimeout(resolutionTimer);
+				if (!first) resolutionTimer = setTimeout(schedule, 120);
+			}
 			const alive = /* @__PURE__ */ new Set();
 			const liveFocusTargets = /* @__PURE__ */ new Set();
 			let focusSurface;
@@ -282,7 +302,9 @@ function createBoardScriptHost(options) {
 						pending: false,
 						time: -1,
 						sentSources: false,
-						visible: true
+						visible: true,
+						draw: false,
+						scale: 0
 					};
 					entries.set(id, entry);
 					restored.delete(id);
@@ -313,6 +335,18 @@ function createBoardScriptHost(options) {
 					entry.visible = visible;
 					if (visible) entry.dirty = true;
 				}
+				const draw = Boolean(options.export || visible && (options.isMaterialized?.(id) ?? true));
+				if (entry.draw !== draw) {
+					entry.draw = draw;
+					if (draw) entry.dirty = true;
+				}
+				const frame = scene.get(id)?.frame;
+				const itemScale = Math.max((frame?.width ?? box.width) / Math.max(1, box.width), (frame?.height ?? box.height) / Math.max(1, box.height));
+				const scale = options.export ? Math.min(2, 2048 / Math.max(1, box.width, box.height)) : scriptResolution(box.width, box.height, now < settledAt && entry.scale > 0 ? entry.scale : camera.zoom * getBoardResolution() * itemScale, entry.scale);
+				if (scale !== entry.scale) {
+					entry.scale = scale;
+					if (draw) entry.dirty = true;
+				}
 				if (entry.input !== input || entry.inputDocument !== board) {
 					const inputKey = JSON.stringify(input);
 					if (entry.inputKey !== inputKey) {
@@ -370,7 +404,7 @@ function createBoardScriptHost(options) {
 						}
 					}
 				}
-				if (!entry.ready || !entry.sources || entry.pending || !entry.dirty && (!entry.output?.animated || !visible && !entry.output.updating || entry.time === time)) continue;
+				if (!entry.ready || !entry.sources || entry.pending || !entry.dirty && (!entry.output?.animated || !entry.draw && !entry.output.updating || entry.time === time)) continue;
 				entry.pending = true;
 				entry.dirty = false;
 				entry.time = time;
@@ -382,9 +416,9 @@ function createBoardScriptHost(options) {
 					request: entry.request,
 					input: entry.sentInput === entry.input ? void 0 : entry.input,
 					sources: entry.sentSources ? void 0 : entry.sources,
-					draw: visible,
+					draw: entry.draw,
 					t: time - entry.startedAt,
-					scale: Math.min(2, 2048 / Math.max(1, box.width, box.height)),
+					scale: entry.scale,
 					events: entry.events.splice(0)
 				});
 				entry.sentInput = entry.input;
@@ -428,6 +462,7 @@ function createBoardScriptHost(options) {
 		},
 		destroy() {
 			disposed = true;
+			clearTimeout(resolutionTimer);
 			window.removeEventListener("message", onMessage);
 			for (const entry of entries.values()) release(entry);
 			layer.remove();

package/dist/board/render/script-resolution.d.ts

@@ -0,0 +1,4 @@
+//#region src/board/render/script-resolution.d.ts
+declare function scriptResolution(width: number, height: number, demand: number, current?: number): number;
+//#endregion
+export { scriptResolution };