@neta-art/cohub 12.1.0 → 12.2.0

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/far-plate.d.ts

@@ -2,6 +2,12 @@ import { BoardFrame } from "../../../protocol/dist/board-layout.js";
 import "../../../protocol/dist/index.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;
@@ -9,6 +15,10 @@ type FarPlateStyle = {
   accentAlpha?: number;
 };
 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 +29,4 @@ declare function drawFarStroke(graphics: Graphics, points: ReadonlyArray<{
   alpha?: number;
 }): void;
 //#endregion
-export { FarPlateStyle, drawFarPlate, drawFarStroke, farStrokeSamples };
+export { FarPlateStyle, drawFarBars, drawFarPlate, drawFarStroke, 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;
@@ -34,18 +34,37 @@ function traceFrame(graphics, frame, inset = 0, heightOverride) {
 }
 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 +89,4 @@ function drawFarStroke(graphics, points, style) {
 	});
 }
 //#endregion
-export { drawFarPlate, drawFarStroke, farStrokeSamples };
+export { drawFarBars, drawFarPlate, drawFarStroke, farStrokeSamples };

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

@@ -1,8 +1,9 @@
 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 { 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";
@@ -146,6 +147,7 @@ function syncContent(parts, item, context) {
 		context.palette.text,
 		context.palette.muted,
 		context.style.font,
+		context.themeKey,
 		accent
 	].join("|");
 	if (textSig === parts.textSig) return;
@@ -203,8 +205,6 @@ const fileCardRenderer = {
 				fontFamily: BOARD_FONT_STACK,
 				fontSize: TITLE_SIZE,
 				fontWeight: "600",
-				wordWrap: true,
-				breakWords: true,
 				lineHeight: TITLE_LINE
 			},
 			resolution,
@@ -217,8 +217,6 @@ const fileCardRenderer = {
 				fontFamily: BOARD_FONT_STACK,
 				fontSize: EXCERPT_SIZE,
 				fontWeight: "400",
-				wordWrap: true,
-				breakWords: true,
 				lineHeight: EXCERPT_LINE
 			},
 			resolution,

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

@@ -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
+			fillAlpha: FAR_ALPHA
 		});
 	},
 	destroy: (container) => {

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

@@ -1,7 +1,7 @@
 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 { cardElevation, containRect, drawCardSurface } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";

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

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,5 +1,5 @@
 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 { cardElevation, containRect, drawCardSurface, fillCardPicture } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
@@ -122,6 +122,7 @@ 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,

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

@@ -24,6 +24,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

@@ -40,6 +40,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 +51,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[];