@neta-art/cohub 12.1.1 → 12.3.0

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

@@ -1,6 +1,6 @@
 import { cardElevation, containRect, drawCardSurface, fillCardPicture } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
-import { drawFarPlate } from "./far-plate.js";
+import { drawFarPlate, farPictureTone } from "./far-plate.js";
 import { Container, Graphics } from "pixi.js";
 //#region src/board/render/renderers/image-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
@@ -16,6 +16,8 @@ function cropRect(crop) {
 	} : null;
 }
 const PRINT_MARGIN = 6;
+const FADE_MS = 160;
+const FAR_ALPHA = .9;
 function sync(container, item, context) {
 	const parts = partsByContainer.get(container);
 	if (!parts) return;
@@ -36,7 +38,15 @@ function sync(container, item, context) {
 		context.themeKey
 	].join("|");
 	if (sig === parts.sig) return;
+	if (texture && !parts.textured && parts.sig !== "" && !context.reducedMotion) {
+		parts.fadeFrom = performance.now();
+		parts.picture.alpha = 0;
+	} else if (!texture) {
+		parts.fadeFrom = null;
+		parts.picture.alpha = 1;
+	}
 	parts.sig = sig;
+	parts.textured = Boolean(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;
@@ -69,11 +79,13 @@ function sync(container, item, context) {
 		radius: 0
 	} : context.style, crop);
 	parts.placeholder.clear();
-	if (texture && !framed) return;
+	parts.clearSurface = !framed;
+	if (texture && !framed && parts.fadeFrom === null) return;
 	drawCardSurface(parts.placeholder, card, context.style, {
-		fill: context.palette.surface,
-		border: texture ? null : failed ? context.palette.border : context.palette.hover,
-		elevation
+		fill: failed || framed ? context.palette.surface : context.palette.hover,
+		fillAlpha: failed || framed ? 1 : FAR_ALPHA,
+		border: failed ? context.palette.border : null,
+		elevation: texture && !framed ? 0 : elevation
 	});
 	if (texture) return;
 	const cx = width / 2;
@@ -101,7 +113,10 @@ const imageCardRenderer = {
 			root,
 			placeholder,
 			picture,
-			sig: ""
+			sig: "",
+			textured: false,
+			fadeFrom: null,
+			clearSurface: false
 		});
 		if (item.type === "image") sync(root, item, context);
 		return root;
@@ -109,10 +124,21 @@ const imageCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "image") sync(container, item, context);
 	},
+	tick: (container, clock) => {
+		const parts = partsByContainer.get(container);
+		if (parts?.fadeFrom == null) return null;
+		const progress = Math.min(1, Math.max(0, (clock - parts.fadeFrom) / FADE_MS));
+		parts.picture.alpha = 1 - (1 - progress) ** 3;
+		if (progress < 1) return 16;
+		parts.fadeFrom = null;
+		if (parts.clearSurface) parts.placeholder.clear();
+		return null;
+	},
+	lod: { kind: "media" },
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {
-			fill: context.palette.hover,
-			fillAlpha: .9
+			fill: farPictureTone(item, context) ?? context.palette.hover,
+			fillAlpha: FAR_ALPHA
 		});
 	},
 	destroy: (container) => {

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

@@ -1,12 +1,12 @@
-import { isBoardModelItem } from "../../model/media.js";
-import { fileStem } from "../../model/file-snapshot.js";
-import { fileMetaLine } from "../../model/file-preview.js";
-import { boardCardDetailed } from "../text-resolution.js";
+import { boardCardDetailed } from "../lod.js";
 import { createCardTag, syncCardTag, traceCube, zoomCardTag } from "../card-tag.js";
+import { isBoardModelItem } from "../../model/media.js";
 import { cardElevation, containRect, drawCardSurface } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
-import { drawFarPlate } from "./far-plate.js";
+import { drawFarPlate, farPictureTone } from "./far-plate.js";
 import { drawModelKey } from "./media-key.js";
+import { fileStem } from "../../model/file-snapshot.js";
+import { fileMetaLine } from "../../model/file-preview.js";
 import { Container, Graphics, Sprite, Texture } from "pixi.js";
 //#region src/board/render/renderers/model-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
@@ -120,7 +120,7 @@ const modelCardRenderer = {
 	},
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {
-			fill: context.palette.surface,
+			fill: farPictureTone(item, context) ?? context.palette.surface,
 			fillAlpha: .96,
 			accent: context.palette.legendary,
 			accentAlpha: .45

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

@@ -1,7 +1,8 @@
-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 } from "../text-resolution.js";
+import { layoutShapeLabel } from "../../model/text-metrics.js";
+import { boardTextStyle, cssBaselineShift } from "../text-measurement.js";
+import { syncTextResolution } 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";
@@ -142,24 +143,34 @@ function sync(container, item, context) {
 	}
 	parts.label.alpha = itemAlpha(context, style.stroke);
 	const label = itemColor(context, style.stroke, "neutral", "label");
+	const layout = layoutShapeLabel(props, width);
+	const text = layout.lines.join("\n");
 	const textSig = [
-		props.text,
+		text,
 		label,
 		props.fontSize,
-		props.align
+		props.align,
+		context.themeKey
 	].join("|");
 	if (textSig !== parts.textSig) {
 		parts.textSig = textSig;
-		parts.label.text = props.text;
-		parts.label.visible = props.text.length > 0;
-		parts.label.style.fill = label;
-		parts.label.style.fontSize = props.fontSize;
-		parts.label.style.lineHeight = props.fontSize * 1.4;
-		parts.label.style.align = props.align;
+		parts.label.text = text;
+		Object.assign(parts.label.style, {
+			...boardTextStyle({
+				font: "sans",
+				fontSize: props.fontSize,
+				fontWeight: 500
+			}),
+			fill: label,
+			lineHeight: layout.lineHeight,
+			align: props.align
+		});
 	}
-	syncTextWrapWidth(parts.label, parts, Math.max(1, width - 16), context.resizingIds.has(item.id));
+	parts.label.visible = props.text.length > 0 && context.editingId !== item.id;
 	syncTextResolution(parts.label, context.textResolution);
-	parts.label.position.set(width / 2, height / 2);
+	const anchor = props.align === "left" ? 0 : props.align === "right" ? 1 : .5;
+	parts.label.anchor.set(anchor, .5);
+	parts.label.position.set(8 + Math.max(0, width - 16) * anchor, height / 2 + cssBaselineShift(parts.label.style));
 }
 const shapeCardRenderer = {
 	id: "shape-card",
@@ -169,27 +180,17 @@ const shapeCardRenderer = {
 		const shape = new Graphics();
 		const label = new Text({
 			text: "",
-			style: {
-				fill: 16777215,
-				fontFamily: BOARD_FONT_STACK,
-				fontSize: 20,
-				fontWeight: "500",
-				align: "center",
-				wordWrap: true,
-				lineHeight: 28
-			},
+			style: { fill: 16777215 },
 			resolution: context.textResolution,
 			roundPixels: true
 		});
-		label.anchor.set(.5);
 		root.addChild(shape, label);
 		partsByContainer.set(root, {
 			root,
 			shape,
 			label,
 			visualSig: "",
-			textSig: "",
-			wrapWidth: 0
+			textSig: ""
 		});
 		if (item.type === "shape") sync(root, item, context);
 		return root;

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

@@ -1,12 +1,13 @@
 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 } from "../text-resolution.js";
+import { boardCardDetailed } from "../lod.js";
+import { fitTextToLines, fitTextToWidth } from "../text-fit.js";
+import { syncTextResolution } from "../text-resolution.js";
 import { createCardTag, formatBoardDuration, syncCardTag, zoomCardTag } from "../card-tag.js";
 import { drawAudioWaveform } from "../audio-waveform.js";
 import { cardElevation, containRect, drawCardSurface, traceCardOutline } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
-import { drawFarPlate } from "./far-plate.js";
+import { drawFarPlate, farPictureTone } from "./far-plate.js";
 import { Container, FillGradient, Graphics, Sprite, Text } from "pixi.js";
 //#region src/board/render/renderers/task-card-renderer.ts
 const PADDING = 12;
@@ -226,7 +227,7 @@ function advance(parts, clock) {
 		const elapsed = formatBoardDuration(elapsedMs);
 		if (elapsed !== motion.elapsed) {
 			motion.elapsed = elapsed;
-			parts.body.text = `${motion.label} · ${elapsed}`;
+			fitTextToWidth(parts.body, `${motion.label} · ${elapsed}`, Math.max(24, motion.width - 24));
 		}
 		const untilNextSecond = SECOND - Math.max(0, elapsedMs) % SECOND;
 		next = next === null ? untilNextSecond : Math.min(next, untilNextSecond);
@@ -296,7 +297,8 @@ function sync(container, item, context) {
 		color,
 		context.palette.text,
 		context.palette.muted,
-		context.style.font
+		context.style.font,
+		context.themeKey
 	].join("|");
 	if (textSig !== parts.textSig) {
 		parts.textSig = textSig;
@@ -441,9 +443,7 @@ const taskCardRenderer = {
 			style: {
 				fontFamily,
 				fontSize,
-				fontWeight,
-				wordWrap: true,
-				breakWords: true
+				fontWeight
 			},
 			resolution: context.textResolution,
 			roundPixels: true
@@ -452,7 +452,6 @@ const taskCardRenderer = {
 		const detail = text(BOARD_FONT_STACK, 10.5, "400");
 		const meta = text(BOARD_MONO_FONT_STACK, 10, "500");
 		const badge = text(BOARD_MONO_FONT_STACK, 10, "500");
-		badge.style.wordWrap = false;
 		badge.anchor.set(.5);
 		detail.anchor.set(.5, 0);
 		detail.style.align = "center";
@@ -513,7 +512,7 @@ const taskCardRenderer = {
 		const { status } = liveStatus(item, context);
 		const active = status === "failed" || status === "running" || status === "pending";
 		drawFarPlate(graphics, item.frame, {
-			fill: context.palette.surface,
+			fill: farPictureTone(item, context) ?? context.palette.surface,
 			fillAlpha: .82,
 			...active ? {
 				accent: statusColor(status, context),

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

@@ -1,25 +1,43 @@
-import { layoutBoardText } from "../../../protocol/dist/board-layout.js";
-import { boardFontFamily } from "../../model/text-metrics.js";
+import { estimateTextWidth, layoutBoardText } from "../../../protocol/dist/board-layout.js";
 import { itemAlpha, itemColor } from "../palette.js";
-import { BOARD_FONT_STACKS } from "../text-measurement.js";
+import { boardTextStyle, canvasFont, cssBaselineShift, layoutTextLines } from "../text-measurement.js";
+import { boardTextSize } from "../lod.js";
 import { syncTextResolution } from "../text-resolution.js";
 import { positionShell } from "./base-card-renderer.js";
-import { drawFarPlate } from "./far-plate.js";
+import { drawFarBars } from "./far-plate.js";
 import { Container, Graphics, Text } from "pixi.js";
 //#region src/board/render/renderers/text-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
-function revealed(text, reveal) {
-	if (reveal >= 1) return text;
-	return [...text].slice(0, Math.round(text.length * Math.max(0, reveal))).join("");
+const ALIGN = {
+	left: 0,
+	center: .5,
+	right: 1
+};
+const FAR_MAX_LINES = 64;
+function revealed(lines, reveal) {
+	if (reveal >= 1) return lines;
+	const glyphs = lines.map((line) => [...line]);
+	let budget = Math.round(glyphs.reduce((sum, line) => sum + line.length, 0) * Math.max(0, reveal));
+	const shown = [];
+	for (const line of glyphs) {
+		shown.push(line.slice(0, budget).join(""));
+		budget -= line.length;
+		if (budget <= 0) break;
+	}
+	return shown;
 }
-function syncCaret(parts, item, context) {
+function syncCaret(parts, item, context, anchor) {
 	const { props } = item;
-	const visible = props.caret && props.reveal < 1 && Math.floor(context.time / 500) % 2 === 0;
+	const visible = parts.body.visible && props.caret && props.reveal < 1 && Math.floor(context.time / 500) % 2 === 0;
 	parts.caret.visible = visible;
-	if (!visible) return;
-	const anchorX = props.align === "center" ? .5 : props.align === "right" ? 1 : 0;
-	const x = parts.body.position.x + parts.body.width * (1 - anchorX) + 2;
-	parts.caret.clear().rect(x, 1, Math.max(1, 1.5 / Math.max(.25, context.zoom)), Math.max(12, parts.body.height - 2)).fill({ color: itemColor(context, item.style.fill, "neutral") });
+	if (!visible || !parts.layout) return;
+	const scale = parts.body.scale.x;
+	const lastWidth = layoutTextLines(parts.lines.at(-1) ?? "", canvasFont(boardTextStyle(props))).width;
+	const x = parts.body.position.x + lastWidth * (1 - anchor) * scale + 2;
+	const y = Math.max(0, parts.lines.length - 1) * parts.layout.lineHeight * scale;
+	const width = Math.max(1, 1.5 / Math.max(.25, context.zoom));
+	const height = Math.max(12, parts.layout.lineHeight * scale - 2);
+	parts.caret.clear().rect(x, y + 1, width, height).fill({ color: itemColor(context, item.style.fill, "neutral") });
 }
 function sync(container, item, context) {
 	const parts = partsByContainer.get(container);
@@ -27,42 +45,63 @@ function sync(container, item, context) {
 	positionShell(parts.root, item);
 	const { props } = item;
 	const layout = layoutBoardText(props);
-	const previewScale = Math.max(1e-4, item.frame.width / Math.max(1e-4, layout.width));
-	parts.body.scale.set(previewScale);
-	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);
+	const scale = Math.max(1e-4, item.frame.width / Math.max(1e-4, layout.width));
+	const anchor = ALIGN[props.align] ?? 0;
+	parts.body.scale.set(scale);
+	parts.body.anchor.set(anchor, 0);
+	parts.body.visible = context.editingId !== item.id;
 	parts.body.alpha = itemAlpha(context, item.style.fill);
 	parts.caret.alpha = parts.body.alpha;
 	const ink = itemColor(context, item.style.fill, "neutral");
-	const text = revealed(props.text, props.reveal);
-	const contentSig = [
+	const lines = revealed(layout.lines, props.reveal);
+	const text = lines.join("\n");
+	const style = boardTextStyle(props);
+	const sig = [
 		text,
 		ink,
-		props.fontSize,
-		props.fontWeight,
-		props.font,
 		props.align,
-		props.lineHeight,
-		props.width ?? ""
+		layout.lineHeight,
+		style.fontFamily,
+		style.fontSize,
+		style.fontWeight,
+		context.themeKey
 	].join("|");
-	if (contentSig !== parts.contentSig) {
-		parts.contentSig = contentSig;
-		parts.body.text = text;
+	parts.layout = layout;
+	parts.lines = lines;
+	if (sig !== parts.sig) {
+		parts.sig = sig;
 		Object.assign(parts.body.style, {
+			...style,
 			fill: ink,
-			fontSize: props.fontSize,
-			fontWeight: String(Math.round(props.fontWeight / 100) * 100),
-			fontFamily: boardFontFamily(props.font, BOARD_FONT_STACKS),
 			align: props.align,
 			lineHeight: layout.lineHeight,
-			wordWrap: Boolean(props.width),
-			wordWrapWidth: props.width ?? 0,
-			breakWords: true
+			wordWrap: false
 		});
+		parts.body.text = text;
+		parts.baseline = cssBaselineShift(parts.body.style);
 	}
-	syncTextResolution(parts.body, context.textResolution * previewScale);
-	syncCaret(parts, item, context);
+	parts.body.position.set(item.frame.width * anchor, parts.baseline * scale);
+	syncTextResolution(parts.body, context.textResolution * scale);
+	syncCaret(parts, item, context, anchor);
+}
+function farBars({ frame, props }) {
+	const layout = layoutBoardText(props);
+	const scale = frame.width / Math.max(1e-4, layout.width);
+	const lines = layout.lines.slice(0, FAR_MAX_LINES);
+	const widths = lines.map((line) => estimateTextWidth(line.trim(), props.fontSize));
+	const widest = Math.max(1e-4, ...widths);
+	const step = layout.lineHeight * scale;
+	const height = step * .45;
+	return lines.flatMap((_, index) => {
+		const width = frame.width * (widths[index] ?? 0) / widest;
+		if (width <= 0) return [];
+		return [{
+			x: props.align === "center" ? (frame.width - width) / 2 : props.align === "right" ? frame.width - width : 0,
+			y: index * step + (step - height) / 2,
+			width,
+			height
+		}];
+	});
 }
 const textCardRenderer = {
 	id: "text-card",
@@ -71,7 +110,6 @@ const textCardRenderer = {
 		const root = new Container();
 		const body = new Text({
 			text: "",
-			style: { fontFamily: BOARD_FONT_STACKS.sans },
 			resolution: context.textResolution,
 			roundPixels: true
 		});
@@ -81,7 +119,10 @@ const textCardRenderer = {
 			root,
 			body,
 			caret,
-			contentSig: ""
+			layout: null,
+			lines: [],
+			sig: "",
+			baseline: 0
 		});
 		if (item.type === "text") sync(root, item, context);
 		return root;
@@ -93,11 +134,15 @@ const textCardRenderer = {
 		const parts = partsByContainer.get(container);
 		if (parts) syncTextResolution(parts.body, context.textResolution * parts.body.scale.x);
 	},
+	lod: {
+		kind: "text",
+		size: boardTextSize
+	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "text") return;
-		drawFarPlate(graphics, item.frame, {
-			fill: itemColor(context, item.style.fill, "neutral"),
-			fillAlpha: .35 * itemAlpha(context, item.style.fill)
+		drawFarBars(graphics, item.frame, farBars(item), {
+			color: itemColor(context, item.style.fill, "neutral"),
+			alpha: .4 * itemAlpha(context, item.style.fill)
 		});
 	},
 	destroy: (container) => {

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

@@ -1,9 +1,9 @@
-import { getMediaResourceTitle } from "../../model/media.js";
-import { boardCardDetailed } from "../text-resolution.js";
+import { boardCardDetailed } from "../lod.js";
 import { createCardTag, formatBoardDuration, syncCardTag, zoomCardTag } from "../card-tag.js";
+import { getMediaResourceTitle } from "../../model/media.js";
 import { cardElevation, containRect, drawCardSurface, fillCardPicture } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
-import { drawFarPlate } from "./far-plate.js";
+import { drawFarPlate, farPictureTone } from "./far-plate.js";
 import { drawMediaPlayKey } from "./media-key.js";
 import { Container, Graphics } from "pixi.js";
 //#region src/board/render/renderers/video-card-renderer.ts
@@ -122,9 +122,10 @@ const videoCardRenderer = {
 		const tag = partsByContainer.get(container)?.tag;
 		if (tag) zoomCardTag(tag, zoom);
 	},
+	lod: { kind: "media" },
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {
-			fill: context.palette.surface,
+			fill: farPictureTone(item, context) ?? context.palette.surface,
 			fillAlpha: .96,
 			accent: context.palette.brand,
 			accentAlpha: .75

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

@@ -1,5 +1,5 @@
-import { composeBoardScriptItems } from "../model/script-scene.js";
 import { buildBoardScene } from "../model/scene.js";
+import { composeBoardScriptItems } from "../model/script-scene.js";
 import { createBoardScriptHost } from "./script-host.js";
 //#region src/board/render/script-export.ts
 async function prepareBrowserBoardScripts(document, time, readModule, snapshots) {

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

@@ -1,9 +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 { boardScriptItems } from "../model/script-index.js";
+import { boardScriptScope } from "../model/script-scene.js";
+import { boardScriptHitVisible, resolveBoardScriptHit } from "../model/script-hit.js";
 import { createBoardScriptModuleReader, loadBoardScriptSources } from "../../protocol/dist/board-script-modules.js";
 import { boardScriptFrameSource } from "./script-sandbox.js";
 //#region src/board/render/script-host.ts

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

@@ -9,6 +9,7 @@ type BoardRenderStyle = {
   icons: "line" | "pixel";
   motion: "smooth" | "stepped";
   font: string;
+  frameLabelSize: number;
 };
 type BoardShadowStyle = {
   color: number;
@@ -24,6 +25,11 @@ type BoardSelectionStyle = {
   handleSize: number;
 };
 declare function defaultBoardRenderStyle(mode: "dark" | "light"): BoardRenderStyle;
-declare function resolveBoardRenderStyle(mode: "dark" | "light", style?: Partial<BoardRenderStyle>): BoardRenderStyle;
+/** Theme overrides of the default style; a shadow without positive alpha is none. */
+type BoardRenderStyleInput = Partial<Omit<BoardRenderStyle, "shadow" | "selection">> & {
+  shadow?: Partial<BoardShadowStyle> | null;
+  selection?: Partial<BoardSelectionStyle>;
+};
+declare function resolveBoardRenderStyle(mode: "dark" | "light", style?: BoardRenderStyleInput): BoardRenderStyle;
 //#endregion
-export { BoardRenderStyle, BoardSelectionStyle, BoardShadowStyle, defaultBoardRenderStyle, resolveBoardRenderStyle };
+export { BoardRenderStyle, BoardRenderStyleInput, BoardSelectionStyle, BoardShadowStyle, defaultBoardRenderStyle, resolveBoardRenderStyle };

package/dist/board/render/style.js

@@ -1,4 +1,5 @@
 import { BOARD_FONT_STACK } from "../../protocol/dist/board-constants.js";
+import "../model/text-metrics.js";
 //#region src/board/render/style.ts
 const BASE = {
 	corner: "round",
@@ -14,7 +15,8 @@ const BASE = {
 	progress: "shimmer",
 	icons: "line",
 	motion: "smooth",
-	font: BOARD_FONT_STACK
+	font: BOARD_FONT_STACK,
+	frameLabelSize: 12
 };
 const SHADOW = {
 	light: {
@@ -40,6 +42,10 @@ function defaultBoardRenderStyle(mode) {
 function resolveBoardRenderStyle(mode, style) {
 	const base = defaultBoardRenderStyle(mode);
 	if (!style) return base;
+	const shadow = style.shadow === null ? null : {
+		...SHADOW[mode],
+		...style.shadow
+	};
 	return {
 		...base,
 		...style,
@@ -47,7 +53,7 @@ function resolveBoardRenderStyle(mode, style) {
 			...base.selection,
 			...style.selection
 		},
-		shadow: style.shadow === void 0 ? base.shadow : style.shadow
+		shadow: shadow && shadow.alpha > 0 ? shadow : null
 	};
 }
 //#endregion

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

@@ -16,6 +16,11 @@ type CardCrop = {
   w: number;
   h: number;
 };
+/**
+ * The canvas renderer fills with a repeating pattern, so bilinear samples at the
+ * edge would blend in the opposite side. Mapping the picture half a texel inside
+ * its source keeps every sample within it on both renderers.
+ */
 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[];

package/dist/board/render/surface.js

@@ -13,23 +13,33 @@ 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);
 }
+/**
+* The canvas renderer fills with a repeating pattern, so bilinear samples at the
+* edge would blend in the opposite side. Mapping the picture half a texel inside
+* its source keeps every sample within it on both renderers.
+*/
 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;
+	const { x = 0, y = 0, w = 1, h = 1 } = crop ?? {};
+	const insetX = Math.min(.5 / texture.source.pixelWidth, w / 4);
+	const insetY = Math.min(.5 / texture.source.pixelHeight, h / 4);
+	const sw = w - insetX * 2;
+	const sh = h - insetY * 2;
+	const matrix = new Matrix(1 / sw, 0, 0, 1 / sh, -(x + insetX) / sw, -(y + insetY) / sh);
 	return traceCardOutline(graphics, picture, style).fill({
 		texture,
 		textureSpace: "local",
-		...matrix ? { 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);
-	return graphics.poly(pixelRectPoints(x, y, width, height, s).flatMap((point) => [point.x, point.y]));
+	return graphics.poly(pixelRectPoints(x, y, width, height, s).flatMap((point) => [point.x, point.y]), true);
 }
 function pixelRectPoints(x, y, width, height, s) {
 	const r = x + width;

package/dist/board/render/text-edit.d.ts

@@ -0,0 +1,32 @@
+import { BoardViewport } from "../model/geometry.js";
+import { BoardScene, BoardSceneItem } from "../model/scene.js";
+import { BoardRenderStyle } from "./style.js";
+import { BoardTextStyle } from "./text-measurement.js";
+//#region src/board/render/text-edit.d.ts
+/** A content-box textarea at left/top, transformed by `rotate(rotation deg) scale(scale)` about its center. */
+type BoardTextEditLayout = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  padding: {
+    x: number;
+    y: number;
+  };
+  scale: number;
+  rotation: number;
+  font: BoardTextStyle;
+  lineHeight: number;
+  textAlign: "left" | "center" | "right";
+  whiteSpace: "pre" | "pre-wrap";
+  live: boolean;
+};
+type BoardTextEditInput = {
+  viewport: BoardViewport;
+  scene: BoardScene;
+  style?: Partial<Pick<BoardRenderStyle, "font" | "frameLabelSize">>;
+  draft: string;
+};
+declare function boardTextEditLayout(item: BoardSceneItem, { viewport, scene, style, draft }: BoardTextEditInput): BoardTextEditLayout | null;
+//#endregion
+export { BoardTextEditInput, BoardTextEditLayout, boardTextEditLayout };