@neta-art/cohub 3.0.0 → 3.2.0

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

@@ -0,0 +1,82 @@
+import { buildStrokeOutline, computeDrawBounds } from "../../core/draw-geometry.js";
+import { pickBoardColor } from "../../core/palette.js";
+import { drawFarStroke } from "./far-plate.js";
+import { positionShell } from "./base-card-renderer.js";
+import { Container, Graphics } from "pixi.js";
+//#region src/board/render/renderers/draw-card-renderer.ts
+const partsByContainer = /* @__PURE__ */ new WeakMap();
+function sync(container, item, context) {
+	const parts = partsByContainer.get(container);
+	if (!parts) return;
+	positionShell(parts.root, item);
+	const selected = context.selectedIds.has(item.id);
+	const hovered = context.hoveredId === item.id;
+	const color = pickBoardColor(context.colors, item.color, context.colorScheme);
+	const sig = [
+		item.points.length,
+		item.size,
+		item.color,
+		selected,
+		hovered,
+		context.colorScheme,
+		color.stroke
+	].join("|");
+	if (sig !== parts.sig || item.points !== parts.points) {
+		parts.sig = sig;
+		parts.points = item.points;
+		parts.baseWidth = computeDrawBounds(item.points, item.size).width;
+		parts.stroke.clear();
+		const outline = buildStrokeOutline(item.points, item.size);
+		const origin = outline[0];
+		if (origin && outline.length >= 3) {
+			parts.stroke.moveTo(origin.x, origin.y);
+			for (let i = 1; i < outline.length; i += 1) {
+				const point = outline[i];
+				if (point) parts.stroke.lineTo(point.x, point.y);
+			}
+			parts.stroke.closePath();
+			parts.stroke.fill({
+				color: color.stroke,
+				alpha: selected || hovered ? 1 : .92
+			});
+		}
+	}
+	const previewScale = item.frame.width / Math.max(1e-4, parts.baseWidth);
+	parts.stroke.scale.set(Number.isFinite(previewScale) ? previewScale : 1);
+}
+const drawCardRenderer = {
+	id: "draw-card",
+	canRender: (item) => item.type === "draw",
+	create: (item, context) => {
+		const root = new Container();
+		const stroke = new Graphics();
+		root.addChild(stroke);
+		partsByContainer.set(root, {
+			root,
+			stroke,
+			sig: "",
+			points: null,
+			baseWidth: 0
+		});
+		if (item.type === "draw") sync(root, item, context);
+		return root;
+	},
+	update: (container, item, context) => {
+		if (item.type === "draw") sync(container, item, context);
+	},
+	renderFar: (graphics, item, context) => {
+		if (item.type !== "draw") return;
+		const color = pickBoardColor(context.colors, item.color, context.colorScheme);
+		drawFarStroke(graphics, item.points, {
+			color: color.stroke,
+			width: item.size,
+			alpha: .92
+		});
+	},
+	destroy: (container) => {
+		partsByContainer.get(container)?.root.destroy({ children: true });
+		partsByContainer.delete(container);
+	}
+};
+//#endregion
+export { drawCardRenderer };

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

@@ -0,0 +1,39 @@
+import { BoardFrame } from "../../../protocol/dist/board-document.js";
+import { Graphics } from "pixi.js";
+//#region src/board/render/renderers/far-plate.d.ts
+type FarPlateStyle = {
+  /** Plate body fill. */
+  fill: number;
+  fillAlpha?: number;
+  /** Optional accent band along the top edge, identifying the content kind. */
+  accent?: number;
+  accentAlpha?: number;
+};
+/**
+ * Draw one card as a far-LOD plate: a filled body plus an optional top accent
+ * band. Selection and hover are intentionally not drawn here — the interaction
+ * overlay already renders selection in world space, above this layer.
+ */
+declare function drawFarPlate(graphics: Graphics, frame: BoardFrame, style: FarPlateStyle): void;
+/**
+ * Draw one card as a far-LOD polyline.
+ *
+ * The counterpart to `drawFarPlate` for shapes whose meaning is a path rather than
+ * a region — strokes and arrows. It stays in the shared `Graphics`, so these keep
+ * their place in the batch and therefore in document order: an unbatched shape
+ * would be a live container, drawn above every plate no matter where the document
+ * puts it.
+ *
+ * Points are decimated to a bound, because a freehand stroke can hold thousands of
+ * samples that are sub-pixel apart at this zoom.
+ */
+declare function drawFarStroke(graphics: Graphics, points: ReadonlyArray<{
+  x: number;
+  y: number;
+}>, style: {
+  color: number;
+  width: number;
+  alpha?: number;
+}): void;
+//#endregion
+export { FarPlateStyle, drawFarPlate, drawFarStroke };

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

@@ -0,0 +1,92 @@
+import { degToRad } from "../../geometry.js";
+//#region src/board/render/renderers/far-plate.ts
+/** Upper bound on points kept when a stroke is drawn at far LOD. */
+const FAR_STROKE_MAX_POINTS = 24;
+/** Accent band height as a fraction of the plate, clamped to sane world units. */
+const ACCENT_RATIO = .14;
+const ACCENT_MIN = 2;
+const ACCENT_MAX = 10;
+/**
+* Trace a frame's rectangle, honouring rotation. Unrotated frames take the
+* fast `rect` path; rotated ones emit four explicit corners (still one path,
+* no arcs) so the far layer never needs a per-card transform.
+*/
+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);
+	if (!frame.rotation) {
+		graphics.rect(x, y, width, height);
+		return;
+	}
+	const cx = frame.x + frame.width / 2;
+	const cy = frame.y + frame.height / 2;
+	const angle = degToRad(frame.rotation);
+	const cos = Math.cos(angle);
+	const sin = Math.sin(angle);
+	const corner = (px, py) => {
+		const dx = px - cx;
+		const dy = py - cy;
+		return {
+			x: cx + dx * cos - dy * sin,
+			y: cy + dx * sin + dy * cos
+		};
+	};
+	const a = corner(x, y);
+	const b = corner(x + width, y);
+	const c = corner(x + width, y + height);
+	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();
+}
+/**
+* Draw one card as a far-LOD plate: a filled body plus an optional top accent
+* band. Selection and hover are intentionally not drawn here — the interaction
+* overlay already renders selection in world space, above this layer.
+*/
+function drawFarPlate(graphics, frame, style) {
+	if (frame.width <= 0 || frame.height <= 0) return;
+	traceFrame(graphics, frame);
+	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)));
+	graphics.fill({
+		color: style.accent,
+		alpha: style.accentAlpha ?? .9
+	});
+}
+/**
+* Draw one card as a far-LOD polyline.
+*
+* The counterpart to `drawFarPlate` for shapes whose meaning is a path rather than
+* a region — strokes and arrows. It stays in the shared `Graphics`, so these keep
+* their place in the batch and therefore in document order: an unbatched shape
+* would be a live container, drawn above every plate no matter where the document
+* puts it.
+*
+* Points are decimated to a bound, because a freehand stroke can hold thousands of
+* samples that are sub-pixel apart at this zoom.
+*/
+function drawFarStroke(graphics, points, style) {
+	if (points.length < 2) return;
+	const step = Math.max(1, Math.ceil(points.length / FAR_STROKE_MAX_POINTS));
+	const first = points[0];
+	if (!first) return;
+	graphics.moveTo(first.x, first.y);
+	for (let i = step; i < points.length; i += step) {
+		const point = points[i];
+		if (point) graphics.lineTo(point.x, point.y);
+	}
+	const last = points[points.length - 1];
+	if (last) graphics.lineTo(last.x, last.y);
+	graphics.stroke({
+		color: style.color,
+		width: style.width,
+		alpha: style.alpha ?? .9
+	});
+}
+//#endregion
+export { drawFarPlate, drawFarStroke };

package/dist/board/render/renderers/file-card-renderer.d.ts

@@ -0,0 +1,33 @@
+import { BoardFileItem, BoardItem } from "../../../protocol/dist/board-document.js";
+import { BoardCardRenderer } from "./board-renderer-registry.js";
+import { Text } from "pixi.js";
+//#region src/board/render/renderers/file-card-renderer.d.ts
+/**
+ * Join already-wrapped lines and append an ellipsis to the last one.
+ * Pure helper so the clamp can be unit-tested without a Pixi canvas.
+ */
+declare function ellipsizeWrappedLines(lines: string[], maxLines: number): string;
+/**
+ * Shorten `line` so `line + "…"` fits in `wrapWidth`.
+ *
+ * Binary search over the prefix: O(log n) single-line measures. Callers pass a
+ * measure callback so this stays free of Pixi types and easy to unit-test.
+ */
+declare function fitLineWithEllipsis(line: string, wrapWidth: number, measureWidth: (value: string) => number): string;
+/**
+ * Fit a Pixi text node into a fixed line budget.
+ *
+ * Pixi Text has no built-in max-lines / ellipsis, so we measure with the same
+ * style the node will render, keep the leading wrapped lines, and mark a cut
+ * with an ellipsis. Returning early when everything fits avoids an extra
+ * texture rebuild on the common path.
+ *
+ * Cost is one wrap of a length-capped sample, plus at most a binary search on
+ * the last kept line. No character-by-character multi-line remeasure.
+ */
+declare function fitTextToLines(text: Text, value: string, maxLines: number, wrapWidth: number): void;
+declare const fileCardRenderer: BoardCardRenderer;
+/** Helper kept for type narrowing in tests. */
+declare function isFileItem(item: BoardItem): item is BoardFileItem;
+//#endregion
+export { ellipsizeWrappedLines, fileCardRenderer, fitLineWithEllipsis, fitTextToLines, isFileItem };

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

@@ -0,0 +1,371 @@
+import { BOARD_FONT_STACK, BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
+import { fileBaseName, filePreviewKind, fileTypeLabel, formatFileSize } from "../../core/file-preview.js";
+import { syncTextResolution } from "../text-resolution.js";
+import { drawFarPlate } from "./far-plate.js";
+import { positionShell } from "./base-card-renderer.js";
+import { CanvasTextMetrics, Container, Graphics, Sprite, Text, Texture } from "pixi.js";
+//#region src/board/render/renderers/file-card-renderer.ts
+/**
+* File card renderer.
+*
+* The card is an *entry point* to a workspace file, so it shows only what helps
+* you recognise and pick it: an optional cover, the name, a couple of lines of
+* excerpt, and the type. Everything else belongs to the file preview that opens
+* when the card is activated.
+*
+* Cost is managed through three levels of detail keyed on zoom, because a board
+* is expected to hold thousands of these. Pixi `Text` is a rasterised texture,
+* so below roughly one CSS pixel per glyph it can only ever resolve to a smudge;
+* the tiers below simply stop paying for what cannot be read anyway.
+*
+* Absolute floor: content never paints outside the node frame. A rounded clip
+* mask is the hard boundary; line-clamped title/excerpt keep the interior tidy.
+*/
+const RADIUS = 4;
+const PADDING = 10;
+const COVER_RATIO = .56;
+/** Minimum body height reserved under a cover so the title stays readable. */
+const MIN_BODY_FOR_COVER = 38;
+const TITLE_SIZE = 13;
+const TITLE_LINE = TITLE_SIZE * 1.35;
+const TITLE_MAX_LINES = 2;
+const EXCERPT_SIZE = 11;
+const EXCERPT_LINE = EXCERPT_SIZE * 1.45;
+const EXCERPT_MAX_LINES = 4;
+const META_SIZE = 9;
+const META_LINE = META_SIZE * 1.3;
+const GAP = 4;
+/** Zoom below which the title is dropped (glyphs are sub-pixel). */
+const LOD_TITLE_ZOOM = .35;
+/** Zoom below which the excerpt and meta line are dropped. */
+const LOD_BODY_ZOOM = .6;
+/** Upper bound on dashes in the unavailable-state edge, regardless of width. */
+const MAX_DASHES = 40;
+const partsByContainer = /* @__PURE__ */ new WeakMap();
+/** Detail tier for a zoom level. */
+function detailFor(zoom) {
+	if (zoom < LOD_TITLE_ZOOM) return "plate";
+	if (zoom < LOD_BODY_ZOOM) return "title";
+	return "full";
+}
+/** Cover band height for a card, or 0 when it has no cover. */
+function coverHeight(item, height) {
+	if (filePreviewKind(item.snapshot) !== "cover") return 0;
+	const ideal = Math.round(height * COVER_RATIO);
+	return Math.max(0, Math.min(ideal, height - MIN_BODY_FOR_COVER));
+}
+function metaLine(item, state) {
+	const type = fileTypeLabel(item.ref.path);
+	if (state === "missing") return `${type} · missing`;
+	if (state === "unavailable") return `${type} · unavailable`;
+	const size = formatFileSize(item.snapshot?.size);
+	return size ? `${type} · ${size}` : type;
+}
+/**
+* Join already-wrapped lines and append an ellipsis to the last one.
+* Pure helper so the clamp can be unit-tested without a Pixi canvas.
+*/
+function ellipsizeWrappedLines(lines, maxLines) {
+	if (maxLines <= 0 || lines.length === 0) return "";
+	if (lines.length <= maxLines) return lines.join("\n");
+	const kept = lines.slice(0, maxLines);
+	const lastIndex = kept.length - 1;
+	const last = (kept[lastIndex] ?? "").replace(/\s+$/u, "");
+	kept[lastIndex] = last ? `${last}…` : "…";
+	return kept.join("\n");
+}
+/**
+* Shorten `line` so `line + "…"` fits in `wrapWidth`.
+*
+* Binary search over the prefix: O(log n) single-line measures. Callers pass a
+* measure callback so this stays free of Pixi types and easy to unit-test.
+*/
+function fitLineWithEllipsis(line, wrapWidth, measureWidth) {
+	const trimmed = line.replace(/\s+$/u, "");
+	if (!trimmed) return "…";
+	const full = `${trimmed}…`;
+	if (measureWidth(full) <= wrapWidth) return full;
+	let lo = 0;
+	let hi = trimmed.length;
+	let best = "…";
+	while (lo <= hi) {
+		const mid = lo + hi >> 1;
+		const candidate = mid > 0 ? `${trimmed.slice(0, mid)}…` : "…";
+		if (measureWidth(candidate) <= wrapWidth) {
+			best = candidate;
+			lo = mid + 1;
+		} else hi = mid - 1;
+	}
+	return best;
+}
+/**
+* Fit a Pixi text node into a fixed line budget.
+*
+* Pixi Text has no built-in max-lines / ellipsis, so we measure with the same
+* style the node will render, keep the leading wrapped lines, and mark a cut
+* with an ellipsis. Returning early when everything fits avoids an extra
+* texture rebuild on the common path.
+*
+* Cost is one wrap of a length-capped sample, plus at most a binary search on
+* the last kept line. No character-by-character multi-line remeasure.
+*/
+function fitTextToLines(text, value, maxLines, wrapWidth) {
+	const width = Math.max(1, wrapWidth);
+	text.style.wordWrapWidth = width;
+	if (!value || maxLines <= 0) {
+		if (text.text !== "") text.text = "";
+		return;
+	}
+	const charCap = Math.max(maxLines * Math.ceil(width), maxLines * 4);
+	const sample = value.length > charCap ? value.slice(0, charCap) : value;
+	const metrics = CanvasTextMetrics.measureText(sample, text.style);
+	if (!(metrics.lines.length > maxLines || sample !== value)) {
+		if (text.text !== value) text.text = value;
+		return;
+	}
+	const keptCount = Math.min(maxLines, metrics.lines.length);
+	const kept = metrics.lines.slice(0, keptCount);
+	const lastIndex = kept.length - 1;
+	const probe = text.style.clone();
+	probe.wordWrap = false;
+	kept[lastIndex] = fitLineWithEllipsis(kept[lastIndex] ?? "", width, (candidate) => CanvasTextMetrics.measureText(candidate, probe).width);
+	const fitted = kept.join("\n");
+	if (text.text !== fitted) text.text = fitted;
+}
+/** How many full lines of `lineHeight` fit in `room`, capped at `max`. */
+function linesInRoom(room, lineHeight, max) {
+	if (room < lineHeight * .85) return 0;
+	return Math.max(0, Math.min(max, Math.floor((room + .5) / lineHeight)));
+}
+/** Fill the cover band, cropping overflow (the band's aspect rarely matches). */
+function layoutCover(sprite, width, height, texture) {
+	const tw = texture.width;
+	const th = texture.height;
+	if (!tw || !th || !height) return;
+	const scale = Math.max(width / tw, height / th);
+	sprite.width = tw * scale;
+	sprite.height = th * scale;
+	sprite.x = (width - sprite.width) / 2;
+	sprite.y = 0;
+}
+function syncClip(parts, width, height) {
+	parts.clip.clear().roundRect(0, 0, Math.max(1, width), Math.max(1, height), RADIUS).fill({ color: 16777215 });
+}
+function sync(container, item, context) {
+	const parts = partsByContainer.get(container);
+	if (!parts) return;
+	positionShell(parts.root, item);
+	const { width, height } = item.frame;
+	const selected = context.selectedIds.has(item.id);
+	const hovered = context.hoveredId === item.id;
+	const detail = detailFor(context.zoom);
+	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.ref.path);
+	const band = coverHeight(item, height);
+	syncTextResolution(parts.title, parts.titleRes, context.zoom);
+	syncTextResolution(parts.excerpt, parts.excerptRes, context.zoom);
+	syncTextResolution(parts.meta, parts.metaRes, context.zoom);
+	const visualSig = [
+		key ?? "",
+		width,
+		height,
+		selected,
+		hovered,
+		detail,
+		texture ? `${texture.width}x${texture.height}` : "none",
+		coverFailed,
+		fileState,
+		context.colorScheme,
+		context.palette.surface
+	].join("|");
+	if (visualSig !== parts.visualSig) {
+		parts.visualSig = visualSig;
+		syncClip(parts, width, height);
+		parts.plate.clear();
+		parts.plate.roundRect(0, 0, width, height, RADIUS).fill({
+			color: context.palette.surface,
+			alpha: .98
+		}).roundRect(0, 0, width, height, RADIUS).stroke({
+			color: selected ? context.palette.brand : hovered ? context.palette.muted : context.palette.border,
+			width: selected ? 2 : 1,
+			alpha: selected ? .95 : .85
+		});
+		if (fileState !== "ok") {
+			const dash = Math.max(6, width / MAX_DASHES / 2);
+			for (let x = 0; x < width; x += dash * 2) parts.plate.moveTo(x, .5).lineTo(Math.min(x + dash, width), .5);
+			parts.plate.stroke({
+				color: context.palette.muted,
+				width: 2,
+				alpha: fileState === "missing" ? .9 : .5
+			});
+		}
+		const showCover = band > 0 && Boolean(texture);
+		if (showCover && texture) {
+			layoutCover(parts.cover, width, band, texture);
+			if (parts.cover.texture !== texture) parts.cover.texture = texture;
+			parts.coverMask.clear().roundRect(0, 0, width, band, RADIUS).fill({ color: 16777215 });
+			parts.coverMask.rect(0, band - RADIUS, width, RADIUS).fill({ color: 16777215 });
+		}
+		parts.cover.visible = showCover;
+		parts.coverMask.visible = showCover;
+		if (band > 0 && !texture) parts.plate.rect(1, 1, width - 2, band - 1).fill({
+			color: context.palette.hover,
+			alpha: coverFailed ? .35 : .6
+		});
+		if (!band) parts.plate.rect(1, 1, 2, height - 2).fill({
+			color: context.palette.muted,
+			alpha: .35
+		});
+		parts.title.visible = detail !== "plate";
+		parts.excerpt.visible = detail === "full";
+		parts.meta.visible = detail === "full";
+	}
+	if (detail === "plate") return;
+	const title = item.snapshot?.title || fileBaseName(item.ref.path);
+	const excerpt = item.snapshot?.excerpt ?? "";
+	const meta = metaLine(item, fileState);
+	const innerWidth = Math.max(1, width - PADDING * 2);
+	const textSig = [
+		title,
+		excerpt,
+		meta,
+		detail,
+		innerWidth,
+		band,
+		height,
+		context.palette.text,
+		context.palette.muted
+	].join("|");
+	if (textSig === parts.textSig) return;
+	parts.textSig = textSig;
+	const top = band > 0 ? band + PADDING * .8 : PADDING;
+	const bottom = height - PADDING;
+	const metaFits = detail === "full" && bottom - top >= 33.25;
+	const contentBottom = bottom - (metaFits ? META_LINE : 0) - (metaFits ? GAP : 0);
+	const titleLines = linesInRoom(Math.max(0, contentBottom - top), TITLE_LINE, TITLE_MAX_LINES);
+	parts.title.style.fill = context.palette.text;
+	fitTextToLines(parts.title, title, titleLines, innerWidth);
+	parts.title.position.set(PADDING, top);
+	parts.title.visible = titleLines > 0;
+	if (detail !== "full") {
+		parts.excerpt.visible = false;
+		parts.meta.visible = false;
+		return;
+	}
+	if (metaFits) {
+		if (parts.meta.text !== meta) parts.meta.text = meta;
+		parts.meta.style.fill = context.palette.muted;
+		parts.meta.position.set(PADDING, height - PADDING - Math.min(parts.meta.height, META_LINE));
+		parts.meta.visible = true;
+	} else parts.meta.visible = false;
+	const excerptTop = top + (titleLines > 0 ? parts.title.height + GAP : 0);
+	const excerptLines = linesInRoom(contentBottom - excerptTop, EXCERPT_LINE, EXCERPT_MAX_LINES);
+	const showExcerpt = Boolean(excerpt) && excerptLines > 0;
+	if (showExcerpt) {
+		parts.excerpt.style.fill = context.palette.muted;
+		fitTextToLines(parts.excerpt, excerpt, excerptLines, innerWidth);
+		parts.excerpt.position.set(PADDING, excerptTop);
+	}
+	parts.excerpt.visible = showExcerpt;
+}
+const fileCardRenderer = {
+	id: "file-card",
+	canRender: (item) => item.type === "file",
+	create: (item, context) => {
+		const root = new Container();
+		const plate = new Graphics();
+		const body = new Container();
+		const clip = new Graphics();
+		const cover = new Sprite(Texture.EMPTY);
+		const coverMask = new Graphics();
+		cover.mask = coverMask;
+		const resolution = 1;
+		const title = new Text({
+			text: "",
+			style: {
+				fill: context.palette.text,
+				fontFamily: BOARD_FONT_STACK,
+				fontSize: TITLE_SIZE,
+				fontWeight: "600",
+				wordWrap: true,
+				breakWords: true,
+				lineHeight: TITLE_LINE
+			},
+			resolution,
+			roundPixels: true
+		});
+		const excerpt = new Text({
+			text: "",
+			style: {
+				fill: context.palette.muted,
+				fontFamily: BOARD_FONT_STACK,
+				fontSize: EXCERPT_SIZE,
+				fontWeight: "400",
+				wordWrap: true,
+				breakWords: true,
+				lineHeight: EXCERPT_LINE
+			},
+			resolution,
+			roundPixels: true
+		});
+		const meta = new Text({
+			text: "",
+			style: {
+				fill: context.palette.muted,
+				fontFamily: BOARD_MONO_FONT_STACK,
+				fontSize: META_SIZE,
+				fontWeight: "500"
+			},
+			resolution,
+			roundPixels: true
+		});
+		body.mask = clip;
+		body.addChild(cover, coverMask, title, excerpt, meta);
+		root.addChild(plate, body, clip);
+		partsByContainer.set(root, {
+			root,
+			plate,
+			body,
+			clip,
+			cover,
+			coverMask,
+			title,
+			excerpt,
+			meta,
+			visualSig: "",
+			textSig: "",
+			titleRes: { resolution },
+			excerptRes: { resolution },
+			metaRes: { resolution }
+		});
+		if (item.type === "file") sync(root, item, context);
+		return root;
+	},
+	update: (container, item, context) => {
+		if (item.type === "file") sync(container, item, context);
+	},
+	/**
+	* Far LOD: a plate with a muted accent band. Sampling the real cover here
+	* would mean one draw call per distinct image and defeat the batch.
+	*/
+	renderFar: (graphics, item, context) => {
+		drawFarPlate(graphics, item.frame, {
+			fill: context.palette.surface,
+			fillAlpha: .96,
+			accent: context.palette.muted,
+			accentAlpha: .4
+		});
+	},
+	destroy: (container) => {
+		partsByContainer.get(container)?.root.destroy({ children: true });
+		partsByContainer.delete(container);
+	}
+};
+/** Helper kept for type narrowing in tests. */
+function isFileItem(item) {
+	return item.type === "file";
+}
+//#endregion
+export { ellipsizeWrappedLines, fileCardRenderer, fitLineWithEllipsis, fitTextToLines, isFileItem };

package/dist/board/render/renderers/frame-card-renderer.d.ts

@@ -0,0 +1,5 @@
+import { BoardCardRenderer } from "./board-renderer-registry.js";
+//#region src/board/render/renderers/frame-card-renderer.d.ts
+declare const frameCardRenderer: BoardCardRenderer;
+//#endregion
+export { frameCardRenderer };