@neta-art/cohub 12.2.0 → 12.3.0

package/dist/board/render/labels.js

@@ -0,0 +1,14 @@
+import { pathPointAt } from "../model/arrow-geometry.js";
+//#region src/board/render/labels.ts
+const FRAME_LABEL_WEIGHT = "600";
+const ARROW_LABEL = {
+	fontWeight: "500",
+	lineHeight: 1.25,
+	padX: .5,
+	padY: .25
+};
+function arrowLabelAnchor(arrow, style) {
+	return style.trim === void 0 ? arrow.mid : pathPointAt(arrow.path, .5);
+}
+//#endregion
+export { ARROW_LABEL, FRAME_LABEL_WEIGHT, arrowLabelAnchor };

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

@@ -17,6 +17,14 @@ declare const COMPACT_BOARD_LOD: BoardLod;
 declare const BOARD_LOD_HYSTERESIS = 0.8;
 declare function boardCardDetailed(zoom: number): boolean;
 declare function boardLongEdge(item: BoardSceneItem): number;
+type BoardLodRenderer = {
+  lod?: {
+    kind: BoardLodKind;
+    size?: (item: BoardSceneItem) => number;
+  };
+};
+declare function boardLodSize(renderer: BoardLodRenderer, item: BoardSceneItem): number;
+declare function boardLodRatio(renderer: BoardLodRenderer, size: number, zoom: number, lod: BoardLod): number;
 declare function boardTextSize(item: BoardSceneItem): number;
 //#endregion
-export { BOARD_LOD_HYSTERESIS, BoardLod, BoardLodKind, COMPACT_BOARD_LOD, DEFAULT_BOARD_LOD, boardCardDetailed, boardLongEdge, boardTextSize };
+export { BOARD_LOD_HYSTERESIS, BoardLod, BoardLodKind, COMPACT_BOARD_LOD, DEFAULT_BOARD_LOD, boardCardDetailed, boardLodRatio, boardLodSize, boardLongEdge, boardTextSize };

package/dist/board/render/lod.js

@@ -18,10 +18,16 @@ function boardCardDetailed(zoom) {
 function boardLongEdge(item) {
 	return Math.max(item.frame.width, item.frame.height);
 }
+function boardLodSize(renderer, item) {
+	return renderer.lod?.size?.(item) ?? boardLongEdge(item);
+}
+function boardLodRatio(renderer, size, zoom, lod) {
+	return size * zoom / lod[renderer.lod?.kind ?? "card"];
+}
 function boardTextSize(item) {
 	if (item.type !== "text") return boardLongEdge(item);
 	const scale = item.frame.width / Math.max(1e-4, layoutBoardText(item.props).width);
 	return clampBoardFontSize(item.props.fontSize ?? 24) * scale;
 }
 //#endregion
-export { BOARD_LOD_HYSTERESIS, COMPACT_BOARD_LOD, DEFAULT_BOARD_LOD, boardCardDetailed, boardLongEdge, boardTextSize };
+export { BOARD_LOD_HYSTERESIS, COMPACT_BOARD_LOD, DEFAULT_BOARD_LOD, boardCardDetailed, boardLodRatio, boardLodSize, boardLongEdge, boardTextSize };

package/dist/board/render/media-interaction.d.ts

@@ -1,8 +1,10 @@
 import { WorldPoint } from "../model/geometry.js";
 import { BoardSceneItem } from "../model/scene.js";
+import { BoardCardHit, BoardRenderContext } from "./renderers/board-renderer-registry.js";
 //#region src/board/render/media-interaction.d.ts
+declare const BOARD_PLAY_MEDIA = "play-media";
 type BoardMediaAction = {
-  action: "play-media";
+  action: typeof BOARD_PLAY_MEDIA;
   itemId: string;
 };
 declare function mediaPlayBadgeVisible(item: BoardSceneItem, zoom: number, options: {
@@ -15,5 +17,6 @@ declare function boardMediaActionAt(item: BoardSceneItem, point: WorldPoint, zoo
   materialized: boolean;
   hasVideoPreview: boolean;
 }): BoardMediaAction | null;
+declare function mediaPlayHit(item: BoardSceneItem, point: WorldPoint, context: BoardRenderContext): BoardCardHit | null;
 //#endregion
-export { BoardMediaAction, boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter };
+export { BOARD_PLAY_MEDIA, BoardMediaAction, boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayHit, mediaPlayKeyCenter };

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

@@ -1,10 +1,11 @@
 import { featuredTaskArtifact } from "../../protocol/dist/board-task.js";
 import { degToRad, rotatePointAround, worldPoint } from "../model/geometry.js";
-import { isBoardModelItem } from "../model/media.js";
 import { boardCardDetailed } from "./lod.js";
+import { isBoardModelItem } from "../model/media.js";
 import { audioKeyCenter } from "./renderers/audio-card-renderer.js";
 import { modelKeyCenter } from "./renderers/model-card-renderer.js";
 //#region src/board/render/media-interaction.ts
+const BOARD_PLAY_MEDIA = "play-media";
 function mediaPlayBadgeVisible(item, zoom, options) {
 	if (!options.materialized) return false;
 	if (item.type === "video" || item.type === "audio") return true;
@@ -34,9 +35,20 @@ function mediaPlayBadgeHit(item, point, zoom) {
 }
 function boardMediaActionAt(item, point, zoom, options) {
 	return mediaPlayBadgeVisible(item, zoom, options) && mediaPlayBadgeHit(item, point, zoom) ? {
-		action: "play-media",
+		action: BOARD_PLAY_MEDIA,
 		itemId: item.id
 	} : null;
 }
+const PLAY_HIT = {
+	action: BOARD_PLAY_MEDIA,
+	cursor: "pointer"
+};
+function mediaPlayHit(item, point, context) {
+	const key = context.assetKey(item);
+	return boardMediaActionAt(item, point, context.zoom, {
+		materialized: true,
+		hasVideoPreview: Boolean(key && context.getTexture(key))
+	}) ? PLAY_HIT : null;
+}
 //#endregion
-export { boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter };
+export { BOARD_PLAY_MEDIA, boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayHit, mediaPlayKeyCenter };

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

@@ -1,10 +1,11 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { pathPointAt, resolveSceneArrow } from "../../model/arrow-geometry.js";
 import { itemAlpha, itemColor } from "../palette.js";
+import { resolveSceneArrow } from "../../model/arrow-geometry.js";
 import { syncTextResolution } from "../text-resolution.js";
 import { dashPattern, endAngle, traceArrowhead, tracePolyline, trimPolyline } from "../stroke.js";
 import { drawCardSurface } from "../surface.js";
 import { drawFarStroke } from "./far-plate.js";
+import { ARROW_LABEL, arrowLabelAnchor } from "../labels.js";
 import { Container, Graphics, Text } from "pixi.js";
 //#region src/board/render/renderers/arrow-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
@@ -67,8 +68,9 @@ function sync(container, item, context) {
 		parts.label.text = props.label;
 		parts.label.style.fill = context.palette.text;
 		parts.label.style.fontSize = props.fontSize;
-		const padX = props.fontSize * .5;
-		const padY = props.fontSize * .25;
+		parts.label.style.lineHeight = props.fontSize * ARROW_LABEL.lineHeight;
+		const padX = props.fontSize * ARROW_LABEL.padX;
+		const padY = props.fontSize * ARROW_LABEL.padY;
 		const { width, height } = parts.label;
 		const plate = {
 			x: -width / 2 - padX,
@@ -88,7 +90,7 @@ function sync(container, item, context) {
 	const visible = props.label.length > 0 && (style.trim === void 0 || style.trim >= .5);
 	parts.label.visible = visible;
 	parts.backdrop.visible = visible;
-	const mid = style.trim === void 0 ? resolved.mid : pathPointAt(resolved.path, .5);
+	const mid = arrowLabelAnchor(resolved, style);
 	parts.label.position.set(mid.x, mid.y);
 	parts.backdrop.position.set(mid.x, mid.y);
 }
@@ -104,7 +106,7 @@ const arrowCardRenderer = {
 				fill: 16777215,
 				fontFamily: BOARD_FONT_STACK,
 				fontSize: 14,
-				fontWeight: "500"
+				fontWeight: ARROW_LABEL.fontWeight
 			},
 			resolution: context.textResolution,
 			roundPixels: true

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

@@ -1,8 +1,8 @@
-import { getMediaResourceTitle } from "../../model/media.js";
 import { boardCardDetailed } from "../lod.js";
 import { fitTextToWidth } from "../text-fit.js";
 import { syncTextResolution } from "../text-resolution.js";
 import { formatBoardDuration } from "../card-tag.js";
+import { getMediaResourceTitle } from "../../model/media.js";
 import { drawAudioWaveform } from "../audio-waveform.js";
 import { cardElevation, drawCardSurface } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";

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

@@ -1,6 +1,7 @@
 import { BoardCustomItem, BoardDocument, BoardSettings, BoardTaskItem } from "../../../protocol/dist/board-model.js";
 import { BoardFrame } from "../../../protocol/dist/board-layout.js";
 import "../../../protocol/dist/index.js";
+import { WorldPoint } from "../../model/geometry.js";
 import { BoardScene, BoardSceneItem, SceneItem } from "../../model/scene.js";
 import { BoardShapeColors } from "../../model/palette.js";
 import { BoardRenderStyle } from "../style.js";
@@ -64,9 +65,18 @@ type BoardRenderContext = {
   assetKey: (item: BoardSceneItem) => string | null;
   getTexture: (key: string) => Texture | null;
   hasError: (key: string) => boolean;
+  assetTone?: (key: string) => number | null;
   fileState: (path: string) => "ok" | "missing" | "unavailable";
   acquireTexture: (key: string, item: BoardSceneItem) => void;
   releaseTexture: (key: string) => void;
+  hoveredHit?: {
+    itemId: string;
+    action: string;
+  } | null;
+};
+type BoardCardHit = {
+  action: string;
+  cursor?: string;
 };
 type BoardCardRenderer = {
   id: string;
@@ -89,6 +99,7 @@ type BoardCardRenderer = {
     kind: BoardLodKind;
     size?: (item: BoardSceneItem) => number;
   };
+  hitAt?: (item: BoardSceneItem, point: WorldPoint, context: BoardRenderContext) => BoardCardHit | null;
   renderFar?: (graphics: Graphics, item: BoardSceneItem, context: BoardRenderContext) => void;
   destroy?: (container: Container, context: BoardRenderContext) => void;
 };
@@ -101,4 +112,4 @@ declare function createBoardCardRendererResolver(renderers?: Iterable<BoardCardR
 /** The built-in renderers alone. */
 declare const getBoardCardRenderer: BoardCardRendererResolver;
 //#endregion
-export { BoardCardRenderer, BoardCardRendererResolver, BoardRenderContext, BoardRenderLabels, BoardRenderPalette, BoardScriptHost, DEFAULT_BOARD_RENDER_LABELS, createBoardCardRendererResolver, getBoardCardRenderer };
+export { BoardCardHit, BoardCardRenderer, BoardCardRendererResolver, BoardRenderContext, BoardRenderLabels, BoardRenderPalette, BoardScriptHost, DEFAULT_BOARD_RENDER_LABELS, createBoardCardRendererResolver, getBoardCardRenderer };

package/dist/board/render/renderers/board-renderer-registry.js

@@ -1,6 +1,7 @@
 import { ensureBoardTextMeasurement } from "../text-measurement.js";
 import { audioCardRenderer } from "./audio-card-renderer.js";
 import { modelCardRenderer } from "./model-card-renderer.js";
+import { mediaPlayHit } from "../media-interaction.js";
 import { arrowCardRenderer } from "./arrow-card-renderer.js";
 import { drawCardRenderer } from "./draw-card-renderer.js";
 import { effectCardRenderer } from "./effect-card-renderer.js";
@@ -21,14 +22,18 @@ const DEFAULT_BOARD_RENDER_LABELS = {
 	previewUnavailable: "Preview unavailable",
 	noPreview: "No preview"
 };
+const playable = (renderer) => ({
+	...renderer,
+	hitAt: mediaPlayHit
+});
 const builtinCardRenderers = [
 	textCardRenderer,
 	imageCardRenderer,
-	videoCardRenderer,
-	audioCardRenderer,
-	modelCardRenderer,
+	playable(videoCardRenderer),
+	playable(audioCardRenderer),
+	playable(modelCardRenderer),
 	fileCardRenderer,
-	taskCardRenderer,
+	playable(taskCardRenderer),
 	shapeCardRenderer,
 	drawCardRenderer,
 	arrowCardRenderer,

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

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

package/dist/board/render/renderers/far-plate.d.ts

@@ -1,5 +1,7 @@
 import { BoardFrame } from "../../../protocol/dist/board-layout.js";
 import "../../../protocol/dist/index.js";
+import { BoardSceneItem } from "../../model/scene.js";
+import { BoardRenderContext } from "./board-renderer-registry.js";
 import { Graphics } from "pixi.js";
 //#region src/board/render/renderers/far-plate.d.ts
 type LocalRect = {
@@ -14,6 +16,7 @@ type FarPlateStyle = {
   accent?: number;
   accentAlpha?: number;
 };
+declare function farPictureTone(item: BoardSceneItem, context: BoardRenderContext): number | undefined;
 declare function drawFarPlate(graphics: Graphics, frame: BoardFrame, style: FarPlateStyle): void;
 declare function drawFarBars(graphics: Graphics, frame: BoardFrame, bars: readonly LocalRect[], style: {
   color: number;
@@ -29,4 +32,4 @@ declare function drawFarStroke(graphics: Graphics, points: ReadonlyArray<{
   alpha?: number;
 }): void;
 //#endregion
-export { FarPlateStyle, drawFarBars, drawFarPlate, drawFarStroke, farStrokeSamples };
+export { FarPlateStyle, drawFarBars, drawFarPlate, drawFarStroke, farPictureTone, farStrokeSamples };

package/dist/board/render/renderers/far-plate.js

@@ -32,6 +32,10 @@ function traceLocal(graphics, frame, rect) {
 	const d = corner(x, y + height);
 	graphics.moveTo(a.x, a.y).lineTo(b.x, b.y).lineTo(c.x, c.y).lineTo(d.x, d.y).closePath();
 }
+function farPictureTone(item, context) {
+	const key = context.assetKey(item);
+	return (key ? context.assetTone?.(key) : null) ?? void 0;
+}
 function drawFarPlate(graphics, frame, style) {
 	if (frame.width <= 0 || frame.height <= 0) return;
 	traceLocal(graphics, frame, {
@@ -89,4 +93,4 @@ function drawFarStroke(graphics, points, style) {
 	});
 }
 //#endregion
-export { drawFarBars, drawFarPlate, drawFarStroke, farStrokeSamples };
+export { drawFarBars, drawFarPlate, drawFarStroke, farPictureTone, farStrokeSamples };

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

@@ -1,13 +1,14 @@
 import { BOARD_FONT_STACK, BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { fileCategory, fileStem } from "../../model/file-snapshot.js";
-import { fileCategoryAccent, fileMetaLine, filePreviewKind, fileTypeLabel } from "../../model/file-preview.js";
+import { boardItemPreview } from "../../../protocol/dist/board-model.js";
 import { boardCardDetailed } from "../lod.js";
 import { fitTextToLines } from "../text-fit.js";
 import { syncTextResolution } from "../text-resolution.js";
 import { createCardTag, syncCardTag, zoomCardTag } from "../card-tag.js";
 import { cardElevation, containRect, drawCardSurface, traceCardOutline } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
-import { drawFarPlate } from "./far-plate.js";
+import { drawFarPlate, farPictureTone } from "./far-plate.js";
+import { fileCategory, fileStem } from "../../model/file-snapshot.js";
+import { fileCategoryAccent, fileMetaLine, filePreviewKind, fileTypeLabel } from "../../model/file-preview.js";
 import { Container, Graphics, Sprite, Text, Texture } from "pixi.js";
 //#region src/board/render/renderers/file-card-renderer.ts
 const PADDING = 10;
@@ -27,8 +28,34 @@ const partsByContainer = /* @__PURE__ */ new WeakMap();
 function detailFor(zoom) {
 	return boardCardDetailed(zoom) ? "full" : "title";
 }
-function coverHeight(item, height) {
-	if (filePreviewKind(item.props.snapshot) !== "cover") return 0;
+function viewOf(item) {
+	if (item.type === "file") {
+		const { src, snapshot } = item.props;
+		return {
+			src,
+			title: snapshot?.title || fileStem(src),
+			excerpt: snapshot?.excerpt ?? "",
+			kind: filePreviewKind(snapshot),
+			meta: fileMetaLine(src, snapshot?.size),
+			mark: fileTypeLabel(src),
+			category: fileCategory(src, snapshot?.mimeType)
+		};
+	}
+	const preview = boardItemPreview(item);
+	if (!preview) return null;
+	const label = (item.type.split(".").pop() ?? item.type).toUpperCase();
+	return {
+		src: preview.src ?? null,
+		title: preview.title || item.type,
+		excerpt: preview.excerpt ?? "",
+		kind: preview.cover ? "cover" : preview.excerpt ? "text" : "blank",
+		meta: label,
+		mark: label,
+		category: preview.src ? fileCategory(preview.src) : "other"
+	};
+}
+function coverHeight(view, height) {
+	if (view.kind !== "cover") return 0;
 	const ideal = Math.round(height * COVER_RATIO);
 	return Math.max(0, Math.min(ideal, height - MIN_BODY_FOR_COVER));
 }
@@ -47,31 +74,31 @@ function syncClip(parts, rect, style) {
 }
 function sync(container, item, context) {
 	const parts = partsByContainer.get(container);
-	if (!parts) return;
-	syncContent(parts, item, context);
+	const view = viewOf(item);
+	if (!parts || !view) return;
+	syncContent(parts, item, view, context);
 	for (const text of [
 		parts.title,
 		parts.excerpt,
 		parts.typeMark
 	]) syncTextResolution(text, context.textResolution);
 }
-function syncContent(parts, item, context) {
+function syncContent(parts, item, view, context) {
 	positionShell(parts.root, item);
 	const { width, height } = item.frame;
 	const detail = detailFor(context.zoom);
 	const elevation = cardElevation(context, item.id);
 	syncCardTag(parts.tag, {
 		glyph: "file",
-		text: fileMetaLine(item.props.src, item.props.snapshot?.size),
+		text: view.meta,
 		width
 	}, context);
 	const key = context.assetKey(item);
 	const texture = key ? context.getTexture(key) : null;
 	const coverFailed = Boolean(key && !texture && context.hasError(key));
-	const fileState = context.fileState(item.props.src);
-	const band = coverHeight(item, height);
-	const kind = filePreviewKind(item.props.snapshot);
-	const category = fileCategory(item.props.src, item.props.snapshot?.mimeType);
+	const fileState = view.src ? context.fileState(view.src) : "ok";
+	const band = coverHeight(view, height);
+	const { kind, category, title, excerpt, mark } = view;
 	const accent = fileCategoryAccent(category, context.palette);
 	const visualSig = [
 		key ?? "",
@@ -130,9 +157,6 @@ function syncContent(parts, item, context) {
 		parts.excerpt.visible = detail === "full";
 		parts.typeMark.visible = kind === "blank";
 	}
-	const title = item.props.snapshot?.title || fileStem(item.props.src);
-	const excerpt = item.props.snapshot?.excerpt ?? "";
-	const mark = fileTypeLabel(item.props.src);
 	const innerWidth = Math.max(1, width - 20);
 	const showTypeMark = kind === "blank";
 	const textSig = [
@@ -188,7 +212,7 @@ function syncContent(parts, item, context) {
 }
 const fileCardRenderer = {
 	id: "file-card",
-	canRender: (item) => item.type === "file",
+	canRender: (item) => item.type === "file" || boardItemPreview(item) !== null,
 	create: (item, context) => {
 		const root = new Container();
 		const plate = new Graphics();
@@ -252,23 +276,19 @@ const fileCardRenderer = {
 			visualSig: "",
 			textSig: ""
 		});
-		if (item.type === "file") sync(root, item, context);
+		sync(root, item, context);
 		return root;
 	},
-	update: (container, item, context) => {
-		if (item.type === "file") sync(container, item, context);
-	},
-	resolution: (container, item, context) => {
-		if (item.type === "file") sync(container, item, context);
-	},
+	update: sync,
+	resolution: sync,
 	zoom: (container, zoom) => {
 		const tag = partsByContainer.get(container)?.tag;
 		if (tag) zoomCardTag(tag, zoom);
 	},
 	renderFar: (graphics, item, context) => {
-		const category = fileCategory(item.type === "file" ? item.props.src : "", item.type === "file" ? item.props.snapshot?.mimeType : void 0);
+		const category = viewOf(item)?.category ?? "other";
 		drawFarPlate(graphics, item.frame, {
-			fill: context.palette.surface,
+			fill: farPictureTone(item, context) ?? context.palette.surface,
 			fillAlpha: .96,
 			accent: fileCategoryAccent(category, context.palette),
 			accentAlpha: .45

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

@@ -1,9 +1,11 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { itemAlpha, itemColor } from "../palette.js";
+import { BOARD_FRAME_LABEL_LINE_HEIGHT, frameLabelOffset } from "../../model/text-metrics.js";
 import { syncTextResolution } from "../text-resolution.js";
 import { dashPattern, roundRectPoints, tracePolyline, trimPolyline } from "../stroke.js";
 import { createLabel, positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
+import "../labels.js";
 import { Container, Graphics } from "pixi.js";
 //#region src/board/render/renderers/frame-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
@@ -57,19 +59,24 @@ function sync(container, item, context) {
 	parts.label.visible = decorated;
 	const title = locked ? `🔒 ${props.label}`.trim() : props.label;
 	const labelColor = style.stroke ? baseStroke : context.palette.muted;
+	const size = context.style.frameLabelSize;
 	const textSig = [
 		title,
 		labelColor,
-		context.style.font
+		context.style.font,
+		size
 	].join("|");
 	if (textSig !== parts.textSig) {
 		parts.textSig = textSig;
 		parts.label.text = title;
 		parts.label.style.fill = labelColor;
 		parts.label.style.fontFamily = context.style.font;
+		parts.label.style.fontSize = size;
+		parts.label.style.lineHeight = size * BOARD_FRAME_LABEL_LINE_HEIGHT;
+		const offset = frameLabelOffset(size);
+		parts.label.position.set(offset.x, offset.y);
 	}
 	syncTextResolution(parts.label, context.textResolution);
-	parts.label.position.set(4, -18);
 }
 const frameCardRenderer = {
 	id: "frame-card",
@@ -80,7 +87,6 @@ const frameCardRenderer = {
 		const label = createLabel("", {
 			fill: context.palette.muted,
 			fontFamily: BOARD_FONT_STACK,
-			fontSize: 12,
 			fontWeight: "600"
 		}, context.textResolution);
 		root.addChild(box, label);

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();
@@ -137,7 +137,7 @@ const imageCardRenderer = {
 	lod: { kind: "media" },
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {
-			fill: context.palette.hover,
+			fill: farPictureTone(item, context) ?? context.palette.hover,
 			fillAlpha: FAR_ALPHA
 		});
 	},

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 "../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,6 +1,6 @@
 import { worldPoint } from "../../model/geometry.js";
-import { layoutShapeLabel } from "../../model/text-metrics.js";
 import { itemAlpha, itemColor } from "../palette.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";

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

@@ -7,7 +7,7 @@ import { createCardTag, formatBoardDuration, syncCardTag, zoomCardTag } from "..
 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;
@@ -512,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/video-card-renderer.js

@@ -1,9 +1,9 @@
-import { getMediaResourceTitle } from "../../model/media.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
@@ -125,7 +125,7 @@ const videoCardRenderer = {
 	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;

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: {

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 };