@neta-art/cohub 11.5.1 → 12.0.0

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 { itemAlpha, itemColor } from "../palette.js";
 import { dashPattern, roundRectPoints, tracePolyline, trimPolyline } from "../stroke.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
@@ -199,6 +199,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, parts, context.zoom);
+	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "shape") return;
 		drawFarPlate(graphics, item.frame, {

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

@@ -1,9 +1,9 @@
 import { BOARD_FONT_STACK, BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { featuredTaskArtifact } from "../../../protocol/dist/board-task.js";
+import { drawAudioWaveform } from "../audio-waveform.js";
 import { fitTextToLines } from "../text-fit.js";
 import { boardCardDetailed, syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
 import { createCardTag, formatBoardDuration, syncCardTag, zoomCardTag } from "../card-tag.js";
-import { drawAudioWaveform } from "../audio-waveform.js";
 import { cardElevation, containRect, drawCardSurface, traceCardOutline } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
@@ -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));
@@ -332,7 +332,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) {
@@ -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

@@ -1,8 +1,8 @@
 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 { BOARD_FONT_STACKS } from "../text-measurement.js";
+import { itemAlpha, itemColor } from "../palette.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
 import { Container, Graphics, Text } from "pixi.js";
@@ -91,6 +91,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, parts, context.zoom * Math.max(1, 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

@@ -83,6 +83,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, parts, context.zoom);
+	},
 	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 };

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

@@ -0,0 +1,18 @@
+//#region src/board/render/script-resolution.ts
+const RESOLUTIONS = [
+	.125,
+	.25,
+	.5,
+	1,
+	2,
+	4
+];
+const MAX_EDGE = 2048;
+const MAX_PIXELS = 2097152;
+function scriptResolution(width, height, demand, current = 0) {
+	const target = Number.isFinite(demand) && demand > 0 ? demand : 1;
+	const tier = current > 0 && target <= current * 1.15 && target >= current * .4 ? current : RESOLUTIONS.find((value) => value >= target) ?? 4;
+	return Math.min(tier, MAX_EDGE / Math.max(1, width, height), Math.sqrt(MAX_PIXELS / Math.max(1, width * height)));
+}
+//#endregion
+export { scriptResolution };

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

@@ -1,6 +1,6 @@
 import { WorldPoint } from "../model/geometry.js";
 import { BoardRenderStyle, BoardShadowStyle } from "./style.js";
-import { Graphics } from "pixi.js";
+import { Graphics, Texture } from "pixi.js";
 //#region src/board/render/surface.d.ts
 declare const PIXEL_STEP = 2;
 type CardRect = {
@@ -10,6 +10,13 @@ type CardRect = {
   height: number;
 };
 declare function traceCardOutline(graphics: Graphics, rect: CardRect, style: Pick<BoardRenderStyle, "corner" | "radius">, grow?: number): Graphics;
+type CardCrop = {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+};
+declare function fillCardPicture(graphics: Graphics, texture: Texture, picture: CardRect, style: Pick<BoardRenderStyle, "corner" | "radius">, crop?: CardCrop | null): Graphics;
 declare function tracePixelRect(graphics: Graphics, x: number, y: number, width: number, height: number, step: number): Graphics;
 declare function cardOutlinePoints(rect: CardRect, style: Pick<BoardRenderStyle, "corner" | "radius">, grow?: number): WorldPoint[];
 declare function drawCardShadow(graphics: Graphics, rect: CardRect, style: Pick<BoardRenderStyle, "corner" | "radius">, shadow: BoardShadowStyle | null): void;
@@ -31,4 +38,4 @@ declare function isBoardCard(item: {
   type: string;
 }): boolean;
 //#endregion
-export { CardElevation, CardRect, CardSurface, PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, isBoardCard, traceCardOutline, tracePixelRect };
+export { CardCrop, CardElevation, CardRect, CardSurface, PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, fillCardPicture, isBoardCard, traceCardOutline, tracePixelRect };

package/dist/board/render/surface.js

@@ -1,5 +1,6 @@
 import { worldPoint } from "../model/geometry.js";
 import { roundRectPoints } from "./stroke.js";
+import { Matrix } from "pixi.js";
 //#region src/board/render/surface.ts
 const PIXEL_STEP = 2;
 const SHADOW_LAYERS = 5;
@@ -12,6 +13,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);
@@ -129,4 +143,4 @@ function isBoardCard(item) {
 	return !FREE_FORM_TYPES.has(item.type);
 }
 //#endregion
-export { PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, isBoardCard, traceCardOutline, tracePixelRect };
+export { PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, fillCardPicture, isBoardCard, traceCardOutline, tracePixelRect };

package/dist/board/replica/index.js

@@ -1,5 +1,6 @@
 import { applyBoardDelta, applyBoardPatchToDocument, parseBoardDocument } from "../../protocol/dist/board-patch.js";
 import { createBoardEntityId } from "../model/items/id.js";
+import { shareBoardDocument } from "../model/document-share.js";
 //#region src/board/replica/index.ts
 function memoryStorage() {
 	return {
@@ -118,7 +119,9 @@ function createBoardReplica(options) {
 		title = result.title;
 		if (readPlaybackRevision === playbackRevision) playback = result.playback;
 		loaded = true;
-		adoptServer(parsed.document, result.version, true);
+		const next = shareBoardDocument(server, parsed.document);
+		if (next === server && result.version === version) return;
+		adoptServer(next, result.version, true);
 	}
 	function refresh() {
 		if (refreshing) {

package/dist/board/stage/assets.d.ts

@@ -1,5 +1,6 @@
 import { ModelFormat } from "../../protocol/dist/fs/mime.js";
 import { BoardSceneItem } from "../model/scene.js";
+import { BoardAssetUrlOptions } from "../model/media-playback.js";
 import "../model/index.js";
 import { LruBudget } from "./lru.js";
 import { BoardImageTexturePool } from "./texture-pool.js";
@@ -7,7 +8,12 @@ import { Texture } from "pixi.js";
 //#region src/board/stage/assets.d.ts
 type BoardUrlMedia = "image" | "video";
 type BoardAssetMedia = BoardUrlMedia | "model";
+declare function boardTextureEdge(item: BoardSceneItem, scale: number): number;
 declare function boardAssetKey(item: BoardSceneItem): string | null;
+type Size = {
+  width: number;
+  height: number;
+};
 type BoardModelPreviewRequest = {
   key: string;
   src: string;
@@ -21,24 +27,22 @@ type BoardModelPreviews = {
 type BoardAssetManager = {
   assetKey: (item: BoardSceneItem) => string | null;
   invalidatePath: (path: string) => void;
-  requestItem: (item: BoardSceneItem) => void;
+  requestItem: (item: BoardSceneItem, edge?: number) => void;
   getTexture: (key: string) => Texture | null;
-  getNaturalSize: (key: string) => {
-    width: number;
-    height: number;
-  } | null;
+  getNaturalSize: (key: string) => Size | null;
   hasError: (key: string) => boolean;
   acquire: (key: string) => void;
   release: (key: string) => void;
   withTextures: <T>(items: BoardSceneItem[], use: (textures: Map<string, Texture>) => T | Promise<T>, options?: {
     timeoutMs?: number;
+    edge?: (item: BoardSceneItem) => number;
   }) => Promise<T>;
-  subscribe: (listener: () => void) => () => void;
+  subscribe: (listener: (key: string) => void) => () => void;
   destroy: () => void;
 };
 type BoardAssetManagerOptions = {
   /** Resolve a Space file path to a URL a texture can load from; null when unavailable. */
-  resolveFileUrl: (path: string) => Promise<string | null>;
+  resolveFileUrl: (path: string, options?: BoardAssetUrlOptions) => Promise<string | null>;
   concurrency?: number;
   videoConcurrency?: number;
   loadVideoPreviews?: boolean;
@@ -51,4 +55,4 @@ type BoardAssetManagerOptions = {
 };
 declare function createBoardAssetManager(options: BoardAssetManagerOptions): BoardAssetManager;
 //#endregion
-export { BoardAssetManager, BoardAssetManagerOptions, BoardModelPreviewRequest, BoardModelPreviews, boardAssetKey, createBoardAssetManager };
+export { BoardAssetManager, BoardAssetManagerOptions, BoardModelPreviewRequest, BoardModelPreviews, boardAssetKey, boardTextureEdge, createBoardAssetManager };