@neta-art/cohub 12.1.1 → 12.3.0

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 { boardCardDetailed } from "./lod.js";
 import { isBoardModelItem } from "../model/media.js";
-import { boardCardDetailed } from "./text-resolution.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/palette.js

@@ -1,32 +1,9 @@
+import { BOARD_THEME_DATA } from "../model/themes.js";
 import { resolveItemColor } from "../model/palette.js";
 import { parseBoardCssColor, parseBoardCssPaint } from "./css-color.js";
 //#region src/board/render/palette.ts
-const DARK = {
-	bg: 1315860,
-	surface: 2105376,
-	hover: 2763306,
-	border: 3815994,
-	brand: 16734751,
-	text: 16053492,
-	muted: 9211020,
-	rare: 3718648,
-	epic: 10980346,
-	legendary: 16096779
-};
-const LIGHT = {
-	bg: 16251129,
-	surface: 16777215,
-	hover: 15329772,
-	border: 14079706,
-	brand: 15222030,
-	text: 1579035,
-	muted: 7041664,
-	rare: 2450411,
-	epic: 8141549,
-	legendary: 11817737
-};
 function defaultBoardPalette(mode) {
-	return { ...mode === "light" ? LIGHT : DARK };
+	return { ...BOARD_THEME_DATA[mode].palette };
 }
 function itemAlpha(context, color) {
 	const value = typeof color === "object" && color ? color[context.colorScheme] : color;

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,7 +1,8 @@
-import { getMediaResourceTitle } from "../../model/media.js";
+import { boardCardDetailed } from "../lod.js";
 import { fitTextToWidth } from "../text-fit.js";
-import { boardCardDetailed, syncTextResolution } from "../text-resolution.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,9 +1,11 @@
 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";
+import { BoardLodKind } from "../lod.js";
 import { Container, Graphics, Texture } from "pixi.js";
 //#region src/board/render/renderers/board-renderer-registry.d.ts
 type BoardRenderPalette = {
@@ -41,6 +43,7 @@ type BoardRenderContext = {
   hoveredId: string | null;
   resizingIds: Set<string>;
   liftedIds: ReadonlySet<string>;
+  editingId?: string | null;
   palette: BoardRenderPalette;
   colors: BoardShapeColors;
   colorScheme: "dark" | "light";
@@ -62,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;
@@ -79,6 +91,15 @@ type BoardCardRenderer = {
   resolution?: (container: Container, item: BoardSceneItem, context: BoardRenderContext) => void;
   /** Runs on every zoom step; only update transforms and visibility. */
   zoom?: (container: Container, zoom: number) => void;
+  /**
+   * Level of detail for `renderFar`: `size` is the world-unit measure kept
+   * legible (default: the long edge), held against the `BoardLod[kind]` threshold.
+   */
+  lod?: {
+    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;
 };
@@ -91,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/custom-card-renderer.js

@@ -1,10 +1,12 @@
 import { BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
+import { fitTextToLines } from "../text-fit.js";
 import { syncTextResolution } from "../text-resolution.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
 import { Container, Graphics, Sprite, Text, Texture } from "pixi.js";
 //#region src/board/render/renderers/custom-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
+const LABEL_LINE = 16;
 function sync(container, item, context) {
 	const parts = partsByContainer.get(container);
 	if (!parts) return;
@@ -39,9 +41,8 @@ function sync(container, item, context) {
 			alpha: .8
 		});
 		parts.label.visible = !ready || Boolean(error);
-		parts.label.text = message;
 		parts.label.style.fill = error ? context.colors.rose.stroke : context.palette.muted;
-		parts.label.style.wordWrapWidth = Math.max(40, width - 16);
+		fitTextToLines(parts.label, message, Math.max(1, Math.floor((height - 16) / LABEL_LINE)), Math.max(40, width - 16));
 		parts.label.position.set(width / 2, height / 2);
 	}
 	syncTextResolution(parts.label, context.textResolution);
@@ -59,9 +60,8 @@ const customCardRenderer = {
 			style: {
 				fontFamily: BOARD_MONO_FONT_STACK,
 				fontSize: 12,
-				align: "center",
-				wordWrap: true,
-				breakWords: true
+				lineHeight: LABEL_LINE,
+				align: "center"
 			},
 			resolution: context.textResolution,
 			roundPixels: true

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,14 +1,27 @@
 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 = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
 type FarPlateStyle = {
   fill: number;
   fillAlpha?: number;
   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;
+  alpha: number;
+}): void;
 declare function farStrokeSamples<T>(points: readonly T[]): readonly T[];
 declare function drawFarStroke(graphics: Graphics, points: ReadonlyArray<{
   x: number;
@@ -19,4 +32,4 @@ declare function drawFarStroke(graphics: Graphics, points: ReadonlyArray<{
   alpha?: number;
 }): void;
 //#endregion
-export { FarPlateStyle, drawFarPlate, drawFarStroke, farStrokeSamples };
+export { FarPlateStyle, drawFarBars, drawFarPlate, drawFarStroke, farPictureTone, farStrokeSamples };

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

@@ -4,11 +4,11 @@ const FAR_STROKE_MAX_POINTS = 24;
 const ACCENT_RATIO = .14;
 const ACCENT_MIN = 2;
 const ACCENT_MAX = 10;
-function traceFrame(graphics, frame, inset = 0, heightOverride) {
-	const x = frame.x + inset;
-	const y = frame.y + inset;
-	const width = Math.max(0, frame.width - inset * 2);
-	const height = Math.max(0, (heightOverride ?? frame.height) - inset * 2);
+function traceLocal(graphics, frame, rect) {
+	const x = frame.x + rect.x;
+	const y = frame.y + rect.y;
+	const width = Math.max(0, rect.width);
+	const height = Math.max(0, rect.height);
 	if (!frame.rotation) {
 		graphics.rect(x, y, width, height);
 		return;
@@ -32,20 +32,43 @@ function traceFrame(graphics, frame, inset = 0, heightOverride) {
 	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;
-	traceFrame(graphics, frame);
+	traceLocal(graphics, frame, {
+		x: 0,
+		y: 0,
+		width: frame.width,
+		height: frame.height
+	});
 	graphics.fill({
 		color: style.fill,
 		alpha: style.fillAlpha ?? 1
 	});
 	if (style.accent === void 0) return;
-	traceFrame(graphics, frame, 0, Math.min(ACCENT_MAX, Math.max(ACCENT_MIN, frame.height * ACCENT_RATIO)));
+	const band = Math.min(ACCENT_MAX, Math.max(ACCENT_MIN, frame.height * ACCENT_RATIO));
+	traceLocal(graphics, frame, {
+		x: 0,
+		y: 0,
+		width: frame.width,
+		height: band
+	});
 	graphics.fill({
 		color: style.accent,
 		alpha: style.accentAlpha ?? .9
 	});
 }
+function drawFarBars(graphics, frame, bars, style) {
+	if (bars.length === 0) return;
+	for (const bar of bars) traceLocal(graphics, frame, bar);
+	graphics.fill({
+		color: style.color,
+		alpha: style.alpha
+	});
+}
 function farStrokeSamples(points) {
 	if (points.length <= FAR_STROKE_MAX_POINTS) return points;
 	const step = Math.ceil(points.length / FAR_STROKE_MAX_POINTS);
@@ -70,4 +93,4 @@ function drawFarStroke(graphics, points, style) {
 	});
 }
 //#endregion
-export { drawFarPlate, drawFarStroke, farStrokeSamples };
+export { drawFarBars, drawFarPlate, drawFarStroke, farPictureTone, farStrokeSamples };

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

@@ -1,12 +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 { boardCardDetailed, syncTextResolution } from "../text-resolution.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;
@@ -26,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));
 }
@@ -46,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 ?? "",
@@ -129,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 = [
@@ -146,6 +171,7 @@ function syncContent(parts, item, context) {
 		context.palette.text,
 		context.palette.muted,
 		context.style.font,
+		context.themeKey,
 		accent
 	].join("|");
 	if (textSig === parts.textSig) return;
@@ -186,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();
@@ -203,8 +229,6 @@ const fileCardRenderer = {
 				fontFamily: BOARD_FONT_STACK,
 				fontSize: TITLE_SIZE,
 				fontWeight: "600",
-				wordWrap: true,
-				breakWords: true,
 				lineHeight: TITLE_LINE
 			},
 			resolution,
@@ -217,8 +241,6 @@ const fileCardRenderer = {
 				fontFamily: BOARD_FONT_STACK,
 				fontSize: EXCERPT_SIZE,
 				fontWeight: "400",
-				wordWrap: true,
-				breakWords: true,
 				lineHeight: EXCERPT_LINE
 			},
 			resolution,
@@ -254,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);