@neta-art/cohub 11.1.0 → 11.3.0

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

@@ -1,91 +1,94 @@
-import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { getMediaResourceTitle } from "../../model/media.js";
-import { syncTextResolution, syncTextWrapWidth, textResolutionForZoom } from "../text-resolution.js";
+import { boardCardDetailed } from "../text-resolution.js";
+import { createCardTag, formatBoardDuration, 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 { Container, Graphics, Sprite, Text, Texture } from "pixi.js";
+import { drawMediaPlayKey } from "./media-key.js";
+import { Container, Graphics, Sprite, Texture } from "pixi.js";
 //#region src/board/render/renderers/video-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
-const RADIUS = 4;
-function layoutContain(sprite, width, height) {
-	const texture = sprite.texture;
-	if (!texture.width || !texture.height) return;
-	const scale = Math.min(width / texture.width, height / texture.height);
-	sprite.width = texture.width * scale;
-	sprite.height = texture.height * scale;
-	sprite.x = (width - sprite.width) / 2;
-	sprite.y = (height - sprite.height) / 2;
+const FILM_RAIL = 10;
+const FILM_HOLE = 4;
+function videoTitle(item) {
+	return item.props.snapshot?.title ?? getMediaResourceTitle(item.props.src);
 }
 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 resizing = context.resizingIds.has(item.id);
-	const title = item.props.snapshot?.title ?? getMediaResourceTitle(item.props.src);
+	const title = videoTitle(item);
+	const durationMs = item.props.snapshot?.durationMs;
+	const duration = durationMs ? formatBoardDuration(durationMs) : "";
+	syncCardTag(parts.tag, {
+		glyph: "video",
+		text: duration ? `${title} · ${duration}` : title,
+		width
+	}, context);
 	const key = context.assetKey(item);
 	const texture = key ? context.getTexture(key) : null;
-	const failed = Boolean(key && !texture && context.hasError(key));
-	syncTextResolution(parts.label, parts, context.zoom);
-	if (parts.label.text !== title) parts.label.text = title;
-	syncTextWrapWidth(parts.label, parts, Math.max(1, width - 16), resizing);
-	parts.label.position.set(8, Math.max(8, height - parts.label.height - 8));
+	const elevation = cardElevation(context, item.id);
 	const sig = [
 		key ?? "",
 		texture ? `${texture.width}x${texture.height}` : "none",
 		width,
 		height,
-		selected,
-		hovered,
-		failed,
-		title,
-		item.props.time ?? 0,
-		parts.label.height,
-		context.palette.surface,
-		context.palette.brand,
-		context.palette.muted,
-		context.palette.border,
-		context.palette.hover,
-		context.palette.text
+		elevation,
+		boardCardDetailed(context.zoom),
+		context.themeKey
 	].join("|");
 	if (sig === parts.sig) return;
 	parts.sig = sig;
+	const framed = context.style.media === "framed";
+	const rect = {
+		x: 0,
+		y: 0,
+		width,
+		height
+	};
+	const rail = framed ? Math.min(FILM_RAIL, height / 6) : 0;
+	const screen = {
+		x: framed ? rail * .6 : 0,
+		y: rail,
+		width: width - (framed ? rail * 1.2 : 0),
+		height: height - rail * 2
+	};
+	drawCardSurface(parts.plate.clear(), rect, context.style, {
+		fill: framed ? context.palette.text : context.palette.surface,
+		border: framed ? null : context.palette.border,
+		borderAlpha: .85,
+		elevation
+	});
+	if (framed) drawFilmRails(parts.plate, width, height, rail, context.palette.bg);
+	traceCardOutline(parts.mask.clear(), framed ? screen : rect, framed ? {
+		corner: "round",
+		radius: 1
+	} : context.style).fill({ color: 16777215 });
 	if (texture && parts.sprite.texture !== texture) parts.sprite.texture = texture;
 	parts.sprite.visible = Boolean(texture);
-	if (texture) layoutContain(parts.sprite, width, height);
-	parts.mask.clear().roundRect(0, 0, width, height, RADIUS).fill({ color: 16777215 });
-	parts.plate.clear().roundRect(0, 0, width, height, RADIUS).fill({
-		color: context.palette.surface,
-		alpha: .96
-	});
-	parts.chrome.clear();
 	if (texture) {
-		const bandHeight = Math.min(height, parts.label.height + 16);
-		parts.chrome.rect(0, height - bandHeight, width, bandHeight).fill({
-			color: context.palette.surface,
-			alpha: .78
-		});
+		const fitted = containRect(screen.width, screen.height, texture.width, texture.height);
+		parts.sprite.position.set(screen.x + fitted.x, screen.y + fitted.y);
+		parts.sprite.width = fitted.width;
+		parts.sprite.height = fitted.height;
 	}
-	const cx = width / 2;
-	const cy = height / 2;
-	const radius = Math.min(22, Math.min(width, height) * .18);
-	parts.chrome.circle(cx, cy, radius).fill({
-		color: selected ? context.palette.brand : context.palette.surface,
-		alpha: texture ? .88 : .96
-	});
-	const triangle = radius * .55;
-	parts.chrome.moveTo(cx - triangle * .35, cy - triangle * .6).lineTo(cx - triangle * .35, cy + triangle * .6).lineTo(cx + triangle * .7, cy).closePath().fill({
-		color: context.palette.text,
-		alpha: .94
-	});
-	parts.chrome.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
+	parts.chrome.clear();
+	if (boardCardDetailed(context.zoom)) drawMediaPlayKey(parts.chrome, screen.x + screen.width / 2, screen.y + screen.height / 2, Math.min(18, Math.min(screen.width, screen.height) * .16), context);
+}
+function drawFilmRails(graphics, width, height, rail, hole) {
+	const size = Math.min(FILM_HOLE, rail * .45);
+	const step = size * 2.5;
+	const count = Math.max(1, Math.floor((width - step) / step));
+	const start = (width - (count - 1) * step - size) / 2;
+	for (let index = 0; index < count; index += 1) {
+		const x = start + index * step;
+		graphics.rect(x, (rail - size) / 2, size, size).rect(x, height - rail + (rail - size) / 2, size, size);
+	}
+	graphics.fill({
+		color: hole,
+		alpha: .9
 	});
-	parts.label.style.fill = texture ? context.palette.text : context.palette.muted;
 }
 const videoCardRenderer = {
 	id: "video-card",
@@ -96,20 +99,8 @@ const videoCardRenderer = {
 		const sprite = new Sprite(Texture.EMPTY);
 		const mask = new Graphics();
 		const chrome = new Graphics();
-		const resolution = textResolutionForZoom(context.zoom);
-		const label = new Text({
-			text: "",
-			style: {
-				fill: context.palette.muted,
-				fontFamily: BOARD_FONT_STACK,
-				fontSize: 12,
-				fontWeight: "500",
-				wordWrap: true
-			},
-			resolution,
-			roundPixels: true
-		});
-		root.addChild(plate, sprite, mask, chrome, label);
+		const tag = createCardTag();
+		root.addChild(plate, sprite, mask, chrome, tag.root);
 		sprite.mask = mask;
 		partsByContainer.set(root, {
 			root,
@@ -117,10 +108,8 @@ const videoCardRenderer = {
 			sprite,
 			mask,
 			chrome,
-			label,
-			sig: "",
-			wrapWidth: 0,
-			resolution
+			tag,
+			sig: ""
 		});
 		if (item.type === "video") sync(root, item, context);
 		return root;
@@ -128,6 +117,10 @@ const videoCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "video") sync(container, item, context);
 	},
+	zoom: (container, zoom) => {
+		const tag = partsByContainer.get(container)?.tag;
+		if (tag) zoomCardTag(tag, zoom);
+	},
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {
 			fill: context.palette.surface,

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

@@ -5,7 +5,7 @@ import { Graphics } from "pixi.js";
 //#region src/board/render/stroke.d.ts
 declare function dashPattern(dash: BoardDash | undefined, width: number): [number, number] | null;
 declare function trimPolyline(path: readonly WorldPoint[], trim: number | undefined): readonly WorldPoint[];
-declare function tracePolyline(graphics: Graphics, path: readonly WorldPoint[], pattern: [number, number] | null, closed?: boolean): void;
+declare function tracePolyline(graphics: Graphics, path: readonly WorldPoint[], pattern: [number, number] | null, closed?: boolean, offset?: number): void;
 declare function traceArrowhead(graphics: Graphics, tip: WorldPoint, angle: number, size: number): void;
 declare function endAngle(path: readonly WorldPoint[], atStart: boolean): number | null;
 declare function roundRectPoints(width: number, height: number, radius: number): WorldPoint[];

package/dist/board/render/stroke.js

@@ -31,7 +31,7 @@ function trimPolyline(path, trim) {
 	}
 	return out;
 }
-function tracePolyline(graphics, path, pattern, closed = false) {
+function tracePolyline(graphics, path, pattern, closed = false, offset = 0) {
 	const points = closed && path.length > 2 ? [...path, path[0]] : path;
 	if (points.length < 2) return;
 	if (!pattern) {
@@ -45,9 +45,10 @@ function tracePolyline(graphics, path, pattern, closed = false) {
 		return;
 	}
 	const [dash, gap] = pattern;
-	let penDown = true;
-	let fresh = true;
-	let remaining = dash;
+	const phase = Math.max(0, offset) % (dash + gap);
+	let penDown = phase < dash;
+	let fresh = penDown;
+	let remaining = penDown ? dash - phase : dash + gap - phase;
 	for (let index = 1; index < points.length; index += 1) {
 		const a = points[index - 1];
 		const b = points[index];

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

@@ -0,0 +1,29 @@
+//#region src/board/render/style.d.ts
+type BoardRenderStyle = {
+  corner: "round" | "pixel";
+  radius: number;
+  shadow: BoardShadowStyle | null;
+  selection: BoardSelectionStyle;
+  media: "plain" | "framed";
+  progress: "shimmer" | "mosaic";
+  icons: "line" | "pixel";
+  motion: "smooth" | "stepped";
+  font: string;
+};
+type BoardShadowStyle = {
+  color: number;
+  alpha: number;
+  blur: number;
+  y: number;
+};
+type BoardSelectionStyle = {
+  width: number;
+  outset: number;
+  dash: number;
+  handle: "circle" | "square";
+  handleSize: number;
+};
+declare function defaultBoardRenderStyle(mode: "dark" | "light"): BoardRenderStyle;
+declare function resolveBoardRenderStyle(mode: "dark" | "light", style?: Partial<BoardRenderStyle>): BoardRenderStyle;
+//#endregion
+export { BoardRenderStyle, BoardSelectionStyle, BoardShadowStyle, defaultBoardRenderStyle, resolveBoardRenderStyle };

package/dist/board/render/style.js

@@ -0,0 +1,54 @@
+import { BOARD_FONT_STACK } from "../../protocol/dist/board-constants.js";
+//#region src/board/render/style.ts
+const BASE = {
+	corner: "round",
+	radius: 6,
+	selection: {
+		width: 1.5,
+		outset: 3,
+		dash: 0,
+		handle: "square",
+		handleSize: 8
+	},
+	media: "plain",
+	progress: "shimmer",
+	icons: "line",
+	motion: "smooth",
+	font: BOARD_FONT_STACK
+};
+const SHADOW = {
+	light: {
+		color: 1447704,
+		alpha: .06,
+		blur: 12,
+		y: 2
+	},
+	dark: {
+		color: 0,
+		alpha: .24,
+		blur: 12,
+		y: 2
+	}
+};
+function defaultBoardRenderStyle(mode) {
+	return {
+		...BASE,
+		selection: { ...BASE.selection },
+		shadow: { ...SHADOW[mode] }
+	};
+}
+function resolveBoardRenderStyle(mode, style) {
+	const base = defaultBoardRenderStyle(mode);
+	if (!style) return base;
+	return {
+		...base,
+		...style,
+		selection: {
+			...base.selection,
+			...style.selection
+		},
+		shadow: style.shadow === void 0 ? base.shadow : style.shadow
+	};
+}
+//#endregion
+export { defaultBoardRenderStyle, resolveBoardRenderStyle };

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

@@ -0,0 +1,34 @@
+import { WorldPoint } from "../model/geometry.js";
+import { BoardRenderStyle, BoardShadowStyle } from "./style.js";
+import { Graphics } from "pixi.js";
+//#region src/board/render/surface.d.ts
+declare const PIXEL_STEP = 2;
+type CardRect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+declare function traceCardOutline(graphics: Graphics, rect: CardRect, style: Pick<BoardRenderStyle, "corner" | "radius">, grow?: number): 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[];
+declare function drawCardShadow(graphics: Graphics, rect: CardRect, style: Pick<BoardRenderStyle, "corner" | "radius">, shadow: BoardShadowStyle | null): void;
+type CardSurface = {
+  fill: number;
+  fillAlpha?: number;
+  border?: number | null;
+  borderAlpha?: number;
+  elevation?: CardElevation;
+};
+type CardElevation = 0 | 1 | 2;
+declare function cardShadow(style: BoardRenderStyle, elevation: CardElevation): BoardShadowStyle | null;
+declare function drawCardSurface(graphics: Graphics, rect: CardRect, style: BoardRenderStyle, surface: CardSurface): Graphics;
+declare function containRect(width: number, height: number, imageWidth: number, imageHeight: number): CardRect;
+declare function cardElevation(context: {
+  liftedIds: ReadonlySet<string>;
+}, id: string): CardElevation;
+declare function isBoardCard(item: {
+  type: string;
+}): boolean;
+//#endregion
+export { CardElevation, CardRect, CardSurface, PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, isBoardCard, traceCardOutline, tracePixelRect };

package/dist/board/render/surface.js

@@ -0,0 +1,132 @@
+import { worldPoint } from "../model/geometry.js";
+import { roundRectPoints } from "./stroke.js";
+//#region src/board/render/surface.ts
+const PIXEL_STEP = 2;
+const SHADOW_LAYERS = 5;
+function traceCardOutline(graphics, rect, style, grow = 0) {
+	const x = rect.x - grow;
+	const y = rect.y - grow;
+	const width = Math.max(0, rect.width + grow * 2);
+	const height = Math.max(0, rect.height + grow * 2);
+	if (style.corner === "pixel") return tracePixelRect(graphics, x, y, width, height, 2);
+	const radius = Math.min(Math.max(0, style.radius + grow), width / 2, height / 2);
+	return radius > 0 ? graphics.roundRect(x, y, width, height, radius) : graphics.rect(x, y, width, height);
+}
+function tracePixelRect(graphics, x, y, width, height, step) {
+	const s = Math.min(step, width / 4, height / 4);
+	if (s <= 0) return graphics.rect(x, y, width, height);
+	return graphics.poly(pixelRectPoints(x, y, width, height, s).flatMap((point) => [point.x, point.y]));
+}
+function pixelRectPoints(x, y, width, height, s) {
+	const r = x + width;
+	const b = y + height;
+	const p = worldPoint;
+	return [
+		p(x, y + s * 2),
+		p(x + s, y + s * 2),
+		p(x + s, y + s),
+		p(x + s * 2, y + s),
+		p(x + s * 2, y),
+		p(r - s * 2, y),
+		p(r - s * 2, y + s),
+		p(r - s, y + s),
+		p(r - s, y + s * 2),
+		p(r, y + s * 2),
+		p(r, b - s * 2),
+		p(r - s, b - s * 2),
+		p(r - s, b - s),
+		p(r - s * 2, b - s),
+		p(r - s * 2, b),
+		p(x + s * 2, b),
+		p(x + s * 2, b - s),
+		p(x + s, b - s),
+		p(x + s, b - s * 2),
+		p(x, b - s * 2)
+	];
+}
+function cardOutlinePoints(rect, style, grow = 0) {
+	const x = rect.x - grow;
+	const y = rect.y - grow;
+	const width = Math.max(0, rect.width + grow * 2);
+	const height = Math.max(0, rect.height + grow * 2);
+	if (style.corner === "pixel") {
+		const s = Math.min(2, width / 4, height / 4);
+		const points = pixelRectPoints(x, y, width, height, Math.max(0, s));
+		return [...points, points[0]];
+	}
+	const radius = Math.min(Math.max(0, style.radius + grow), width / 2, height / 2);
+	return roundRectPoints(width, height, radius).map((point) => worldPoint(point.x + x, point.y + y));
+}
+function drawCardShadow(graphics, rect, style, shadow) {
+	if (!shadow || shadow.alpha <= 0 || shadow.blur <= 0) return;
+	const offset = {
+		...rect,
+		y: rect.y + shadow.y
+	};
+	const reach = (index) => (1 - index / SHADOW_LAYERS) ** 2;
+	for (let index = SHADOW_LAYERS; index >= 1; index -= 1) {
+		const alpha = shadow.alpha * (reach(index - 1) - reach(index));
+		traceCardOutline(graphics, offset, style, shadow.blur * index / SHADOW_LAYERS).fill({
+			color: shadow.color,
+			alpha
+		});
+		traceCardOutline(graphics, rect, style).cut();
+	}
+}
+function cardShadow(style, elevation) {
+	const shadow = style.shadow;
+	if (!shadow || elevation === 0) return null;
+	if (elevation === 1) return shadow;
+	return {
+		...shadow,
+		alpha: Math.min(1, shadow.alpha * 1.6),
+		blur: shadow.blur * 1.6,
+		y: shadow.y * 2 + 4
+	};
+}
+function drawCardSurface(graphics, rect, style, surface) {
+	drawCardShadow(graphics, rect, style, cardShadow(style, surface.elevation ?? 0));
+	traceCardOutline(graphics, rect, style).fill({
+		color: surface.fill,
+		alpha: surface.fillAlpha ?? 1
+	});
+	if (surface.border != null) traceCardOutline(graphics, rect, style).stroke({
+		color: surface.border,
+		width: 1,
+		alpha: surface.borderAlpha ?? 1,
+		alignment: 1
+	});
+	return graphics;
+}
+function containRect(width, height, imageWidth, imageHeight) {
+	if (width <= 0 || height <= 0 || imageWidth <= 0 || imageHeight <= 0) return {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	};
+	const scale = Math.min(width / imageWidth, height / imageHeight);
+	return {
+		x: (width - imageWidth * scale) / 2,
+		y: (height - imageHeight * scale) / 2,
+		width: imageWidth * scale,
+		height: imageHeight * scale
+	};
+}
+const FREE_FORM_TYPES = /* @__PURE__ */ new Set([
+	"text",
+	"shape",
+	"draw",
+	"arrow",
+	"frame",
+	"effect",
+	"custom"
+]);
+function cardElevation(context, id) {
+	return context.liftedIds.has(id) ? 2 : 1;
+}
+function isBoardCard(item) {
+	return !FREE_FORM_TYPES.has(item.type);
+}
+//#endregion
+export { PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, isBoardCard, traceCardOutline, tracePixelRect };

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

@@ -0,0 +1,8 @@
+import { Text } from "pixi.js";
+//#region src/board/render/text-fit.d.ts
+declare function ellipsizeWrappedLines(lines: string[], maxLines: number): string;
+declare function fitLineWithEllipsis(line: string, wrapWidth: number, measureWidth: (value: string) => number): string;
+declare function fitTextToLines(text: Text, value: string, maxLines: number, wrapWidth: number): void;
+declare function fitTextToWidth(text: Text, value: string, width: number): void;
+//#endregion
+export { ellipsizeWrappedLines, fitLineWithEllipsis, fitTextToLines, fitTextToWidth };

package/dist/board/render/text-fit.js

@@ -0,0 +1,60 @@
+import { CanvasTextMetrics } from "pixi.js";
+//#region src/board/render/text-fit.ts
+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");
+}
+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;
+}
+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;
+}
+function fitTextToWidth(text, value, width) {
+	text.style.wordWrap = false;
+	const measure = (candidate) => CanvasTextMetrics.measureText(candidate, text.style).width;
+	const fitted = !value || measure(value) <= width ? value : fitLineWithEllipsis(value, width, measure);
+	if (text.text !== fitted) text.text = fitted;
+}
+//#endregion
+export { ellipsizeWrappedLines, fitLineWithEllipsis, fitTextToLines, fitTextToWidth };

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

@@ -2,6 +2,7 @@ import { Text } from "pixi.js";
 //#region src/board/render/text-resolution.d.ts
 declare function getBoardResolution(): number;
 declare function textZoomBucket(zoom: number): number;
+declare function boardCardDetailed(zoom: number): boolean;
 /** Effective text resolution for a given camera zoom. */
 declare function textResolutionForZoom(zoom: number): number;
 /** Update a Pixi text texture only when zoom crosses a resolution bucket. */
@@ -13,4 +14,4 @@ declare function syncTextWrapWidth(text: Text, state: {
   wrapWidth: number;
 }, width: number, defer: boolean): void;
 //#endregion
-export { getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket };
+export { boardCardDetailed, getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket };

package/dist/board/render/text-resolution.js

@@ -21,6 +21,9 @@ function textZoomBucket(zoom) {
 	for (const bucket of TEXT_ZOOM_BUCKETS) if (clamped <= bucket) return bucket;
 	return TEXT_ZOOM_BUCKETS[TEXT_ZOOM_BUCKETS.length - 1] ?? 4;
 }
+function boardCardDetailed(zoom) {
+	return textZoomBucket(zoom) >= 1;
+}
 /** Effective text resolution for a given camera zoom. */
 function textResolutionForZoom(zoom) {
 	const bucket = textZoomBucket(zoom);
@@ -40,4 +43,4 @@ function syncTextWrapWidth(text, state, width, defer) {
 	state.wrapWidth = width;
 }
 //#endregion
-export { getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket };
+export { boardCardDetailed, getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket };

package/dist/board/stage/index.d.ts

@@ -2,7 +2,8 @@ import { DEFAULT_LRU_BUDGET, LruBudget, LruEntry, selectLruEvictions } from "./l
 import { BoardImageTexturePool, boardImageTexturePool, createBoardImageTexturePool, loadBoardImageTexture, unloadBoardImageTexture } from "./texture-pool.js";
 import { BoardAssetManager, BoardAssetManagerOptions, boardAssetKey, createBoardAssetManager } from "./assets.js";
 import { toBoardPointerEvent } from "./pointer.js";
-import { BoardLiveStroke, BoardScene, BoardSceneNode, SceneOverlayInput, SceneSyncInput, createBoardScene } from "./scene.js";
+import { BoardLiveStroke, BoardScene, BoardSceneNode, SceneSyncInput, createBoardScene } from "./scene.js";
 import { BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, createBoardItemViewLayer } from "./views.js";
 import { BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageTheme, mountBoardStage } from "./stage.js";
-export { BoardAssetManager, BoardAssetManagerOptions, BoardImageTexturePool, BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, BoardLiveStroke, BoardScene, BoardSceneNode, BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageTheme, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, SceneOverlayInput, SceneSyncInput, boardAssetKey, boardImageTexturePool, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardScene, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };
+import { BoardOverlayInput, drawBoardOverlay, expandFrame } from "./overlay.js";
+export { BoardAssetManager, BoardAssetManagerOptions, BoardImageTexturePool, BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, BoardLiveStroke, BoardOverlayInput, BoardScene, BoardSceneNode, BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageTheme, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, SceneSyncInput, boardAssetKey, boardImageTexturePool, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardScene, drawBoardOverlay, expandFrame, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };

package/dist/board/stage/index.js

@@ -3,6 +3,7 @@ import { boardImageTexturePool, createBoardImageTexturePool, loadBoardImageTextu
 import { boardAssetKey, createBoardAssetManager } from "./assets.js";
 import { toBoardPointerEvent } from "./pointer.js";
 import { createBoardScene } from "./scene.js";
+import { drawBoardOverlay, expandFrame } from "./overlay.js";
 import { createBoardItemViewLayer } from "./views.js";
 import { mountBoardStage } from "./stage.js";
-export { DEFAULT_LRU_BUDGET, boardAssetKey, boardImageTexturePool, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardScene, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };
+export { DEFAULT_LRU_BUDGET, boardAssetKey, boardImageTexturePool, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardScene, drawBoardOverlay, expandFrame, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };

package/dist/board/stage/overlay.d.ts

@@ -0,0 +1,41 @@
+import { BoardFrame } from "../../protocol/dist/board-layout.js";
+import { Rect, WorldPoint } from "../model/geometry.js";
+import { BoardScene, BoardSceneItem } from "../model/scene.js";
+import "../model/index.js";
+import { BoardSelectionTransform, BoardTransformControl } from "../editor/selection-transform.js";
+import "../editor/index.js";
+import { BoardRenderStyle } from "../render/style.js";
+import { BoardRenderPalette } from "../render/renderers/board-renderer-registry.js";
+import "../render/index.js";
+import { Graphics } from "pixi.js";
+//#region src/board/stage/overlay.d.ts
+type BoardOverlayInput = {
+  zoom: number;
+  pointerType: string;
+  palette: BoardRenderPalette;
+  style: BoardRenderStyle;
+  scene: BoardScene;
+  hovered: BoardSceneItem | null;
+  selected: readonly BoardSceneItem[];
+  march: number;
+  marquee: Rect | null;
+  transform: BoardSelectionTransform | null;
+  controls: boolean;
+  hoveredControl: BoardTransformControl | null;
+  rotationPointer: WorldPoint | null;
+  arrowEndpoints?: readonly WorldPoint[];
+  ports?: ReadonlyArray<{
+    x: number;
+    y: number;
+    radius: number;
+  }>;
+  hoveredPort?: {
+    x: number;
+    y: number;
+  } | null;
+  bindTarget?: BoardFrame | null;
+};
+declare function expandFrame(frame: BoardFrame, by: number): BoardFrame;
+declare function drawBoardOverlay(graphics: Graphics, input: BoardOverlayInput): void;
+//#endregion
+export { BoardOverlayInput, drawBoardOverlay, expandFrame };