@neta-art/cohub 11.1.0 → 11.3.0

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

@@ -1,10 +1,7 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { getBoardResolution } from "../text-resolution.js";
-import { Container, Graphics, Text } from "pixi.js";
+import { Text } from "pixi.js";
 //#region src/board/render/renderers/base-card-renderer.ts
-const CARD_RADIUS = 10;
-const CARD_PADDING = 12;
-const FOOTER_HEIGHT = 34;
 const TEXT_OPTIONS = {
 	resolution: getBoardResolution(),
 	roundPixels: true
@@ -13,94 +10,11 @@ function createLabel(text, style) {
 	return new Text({
 		...TEXT_OPTIONS,
 		text,
-		style
-	});
-}
-function createCardShell() {
-	const root = new Container();
-	const background = new Graphics();
-	const content = new Container();
-	const mask = new Graphics();
-	const footerBg = new Graphics();
-	const title = createLabel("", {
-		fill: 16777215,
-		fontFamily: BOARD_FONT_STACK,
-		fontSize: 12,
-		fontWeight: "500",
-		wordWrap: true
-	});
-	content.mask = mask;
-	root.addChild(background, mask, content, footerBg, title);
-	let last = null;
-	function paletteKeyOf(palette) {
-		return `${palette.surface}|${palette.border}|${palette.hover}|${palette.text}|${palette.muted}`;
-	}
-	function contentRectFor(width, height, footer) {
-		const bottom = footer ? 34 : 12;
-		return {
-			x: 12,
-			y: 12,
-			width: Math.max(1, width - 24),
-			height: Math.max(1, height - 12 - bottom)
-		};
-	}
-	function draw(state, palette, footer) {
-		const { width, height, selected, hovered, accent } = state;
-		background.clear();
-		background.roundRect(0, 0, width, height, 10).fill({
-			color: palette.surface,
-			alpha: .98
-		});
-		const borderColor = selected ? accent : hovered ? palette.muted : palette.border;
-		background.roundRect(0, 0, width, height, 10).stroke({
-			color: borderColor,
-			width: selected ? 2 : 1,
-			alpha: selected ? .95 : hovered ? .9 : .8
-		});
-		mask.clear();
-		const rect = contentRectFor(width, height, footer);
-		mask.roundRect(rect.x, rect.y, rect.width, rect.height, 4).fill({ color: 16777215 });
-		footerBg.clear();
-		footerBg.visible = footer;
-		title.visible = footer;
-		if (footer) {
-			const fx = 1;
-			const fy = height - 34;
-			const fw = width - 2;
-			const fh = 33;
-			const r = 9;
-			footerBg.moveTo(fx, fy).lineTo(fx + fw, fy).lineTo(fx + fw, fy + fh - r).arcTo(fx + fw, fy + fh, fx + fw - r, fy + fh, r).lineTo(10, fy + fh).arcTo(fx, fy + fh, fx, fy + fh - r, r).lineTo(fx, fy).fill({
-				color: palette.hover,
-				alpha: .55
-			});
-			title.text = state.title;
-			title.style.fill = palette.text;
-			title.style.wordWrapWidth = width - 24;
-			title.x = 12;
-			title.y = height - 34 + (34 - title.height) / 2;
+		style: {
+			fontFamily: BOARD_FONT_STACK,
+			...style
 		}
-	}
-	function update(state, palette, footer) {
-		const paletteKey = paletteKeyOf(palette);
-		if (!last || last.width !== state.width || last.height !== state.height || last.selected !== state.selected || last.hovered !== state.hovered || last.accent !== state.accent || last.title !== state.title || last.footer !== footer || last.paletteKey !== paletteKey) {
-			draw(state, palette, footer);
-			last = {
-				...state,
-				footer,
-				paletteKey
-			};
-		}
-	}
-	function destroy() {
-		root.destroy({ children: true });
-	}
-	return {
-		root,
-		content,
-		contentRect: () => contentRectFor(last?.width ?? 0, last?.height ?? 0, last?.footer ?? true),
-		update,
-		destroy
-	};
+	});
 }
 function positionShell(root, item) {
 	const { x, y, width, height, rotation } = item.frame;
@@ -110,4 +24,4 @@ function positionShell(root, item) {
 	root.rotation = (rotation || 0) * Math.PI / 180;
 }
 //#endregion
-export { CARD_PADDING, CARD_RADIUS, FOOTER_HEIGHT, createCardShell, createLabel, positionShell };
+export { createLabel, positionShell };

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

@@ -3,6 +3,7 @@ import { BoardFrame } from "../../../protocol/dist/board-layout.js";
 import "../../../protocol/dist/index.js";
 import { BoardScene, BoardSceneItem, SceneItem } from "../../model/scene.js";
 import { BoardShapeColors } from "../../model/palette.js";
+import { BoardRenderStyle } from "../style.js";
 import { Container, Graphics, Texture } from "pixi.js";
 //#region src/board/render/renderers/board-renderer-registry.d.ts
 type BoardRenderPalette = {
@@ -39,9 +40,12 @@ type BoardRenderContext = {
   selectedIds: Set<string>;
   hoveredId: string | null;
   resizingIds: Set<string>;
+  liftedIds: ReadonlySet<string>;
   palette: BoardRenderPalette;
   colors: BoardShapeColors;
   colorScheme: "dark" | "light";
+  style: BoardRenderStyle;
+  themeKey: string;
   rendererType: "gpu" | "canvas";
   zoom: number;
   time: number;
@@ -64,9 +68,13 @@ type BoardCardRenderer = {
   id: string;
   canRender: (item: BoardSceneItem, context: BoardRenderContext) => boolean;
   animated?: boolean;
+  /** Opt in to updates on selection and hover changes. */
+  observesSelection?: boolean;
   tick?: (container: Container, clock: number) => number | null;
   create: (item: BoardSceneItem, context: BoardRenderContext) => Container;
   update: (container: Container, item: BoardSceneItem, context: BoardRenderContext) => void;
+  /** Runs on every zoom step; only update transforms and visibility. */
+  zoom?: (container: Container, zoom: number) => void;
   renderFar?: (graphics: Graphics, item: BoardSceneItem, context: BoardRenderContext) => void;
   destroy?: (container: Container, context: BoardRenderContext) => void;
 };

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

@@ -1,14 +1,14 @@
 import { ensureBoardTextMeasurement } from "../text-measurement.js";
-import { fileCardRenderer } from "./file-card-renderer.js";
-import { taskCardRenderer } from "./task-card-renderer.js";
-import { arrowCardRenderer } from "./arrow-card-renderer.js";
 import { audioCardRenderer } from "./audio-card-renderer.js";
+import { arrowCardRenderer } from "./arrow-card-renderer.js";
 import { drawCardRenderer } from "./draw-card-renderer.js";
 import { effectCardRenderer } from "./effect-card-renderer.js";
+import { fileCardRenderer } from "./file-card-renderer.js";
 import { frameCardRenderer } from "./frame-card-renderer.js";
 import { shapeCardRenderer } from "./shape-card-renderer.js";
 import { customCardRenderer } from "./custom-card-renderer.js";
 import { imageCardRenderer } from "./image-card-renderer.js";
+import { taskCardRenderer } from "./task-card-renderer.js";
 import { textCardRenderer } from "./text-card-renderer.js";
 import { unknownCardRenderer } from "./unknown-card-renderer.js";
 import { videoCardRenderer } from "./video-card-renderer.js";

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

@@ -22,24 +22,21 @@ function sync(container, item, context) {
 	if (parts.sprite.texture !== display) parts.sprite.texture = display;
 	parts.sprite.width = width;
 	parts.sprite.height = height;
-	const selected = context.selectedIds.has(item.id);
 	const ready = Boolean(texture) || context.scripts?.ready?.(item.id) === true;
 	const message = error ? `${item.script.src}\n${error}` : ready ? "" : item.script.src;
 	const sig = [
 		width,
 		height,
-		selected,
 		Boolean(texture),
 		message,
-		context.palette.border,
-		context.palette.muted
+		context.themeKey
 	].join("|");
 	if (sig === parts.sig) return;
 	parts.sig = sig;
 	parts.placeholder.clear();
-	if (!ready || selected || error) parts.placeholder.rect(0, 0, width, height).stroke({
-		color: selected ? context.palette.brand : context.palette.border,
-		width: selected ? 2 : 1,
+	if (!ready || error) parts.placeholder.rect(0, 0, width, height).stroke({
+		color: context.palette.border,
+		width: 1,
 		alpha: .8
 	});
 	parts.label.visible = !ready || Boolean(error);

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

@@ -173,11 +173,6 @@ function sync(container, item, context) {
 			break;
 		case "trail": drawTrail(graphics, parts, item, context, color);
 	}
-	if (context.selectedIds.has(item.id) || context.hoveredId === item.id) graphics.rect(0, 0, width, height).stroke({
-		color: context.palette.muted,
-		width: 1,
-		alpha: .6
-	});
 }
 const effectCardRenderer = {
 	id: "effect-card",

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

@@ -2,18 +2,8 @@ import { BoardFileItem } from "../../../protocol/dist/board-model.js";
 import "../../../protocol/dist/index.js";
 import { BoardSceneItem, SceneItem } from "../../model/scene.js";
 import { BoardCardRenderer } from "./board-renderer-registry.js";
-import { Text } from "pixi.js";
 //#region src/board/render/renderers/file-card-renderer.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 containCoverRect(width: number, height: number, imageWidth: number, imageHeight: number): {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-};
 declare const fileCardRenderer: BoardCardRenderer;
 declare function isFileItem(item: BoardSceneItem): item is SceneItem<BoardFileItem>;
 //#endregion
-export { containCoverRect, ellipsizeWrappedLines, fileCardRenderer, fitLineWithEllipsis, fitTextToLines, isFileItem };
+export { fileCardRenderer, isFileItem };

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, filePreviewKind, fileTypeLabel } from "../../model/file-preview.js";
-import { syncTextResolution } from "../text-resolution.js";
+import { fileCategoryAccent, fileMetaLine, filePreviewKind, fileTypeLabel } from "../../model/file-preview.js";
+import { fitTextToLines } from "../text-fit.js";
+import { boardCardDetailed, 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 { CanvasTextMetrics, Container, Graphics, Sprite, Text, Texture } from "pixi.js";
+import { Container, Graphics, Sprite, Text, Texture } from "pixi.js";
 //#region src/board/render/renderers/file-card-renderer.ts
-const RADIUS = 4;
 const PADDING = 10;
 const COVER_RATIO = .56;
 const MIN_BODY_FOR_COVER = 38;
@@ -19,108 +21,41 @@ const EXCERPT_MAX_LINES = 3;
 const TYPE_MARK_SIZE = 28;
 const GAP = 4;
 const STRIPE = 2;
-const LOD_TITLE_ZOOM = .35;
-const LOD_BODY_ZOOM = .6;
 const MAX_DASHES = 40;
 const partsByContainer = /* @__PURE__ */ new WeakMap();
 function detailFor(zoom) {
-	if (zoom < LOD_TITLE_ZOOM) return "plate";
-	if (zoom < LOD_BODY_ZOOM) return "title";
-	return "full";
+	return boardCardDetailed(zoom) ? "full" : "title";
 }
 function coverHeight(item, height) {
 	if (filePreviewKind(item.props.snapshot) !== "cover") return 0;
 	const ideal = Math.round(height * COVER_RATIO);
 	return Math.max(0, Math.min(ideal, height - MIN_BODY_FOR_COVER));
 }
-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 linesInRoom(room, lineHeight, max) {
 	if (room < lineHeight * .85) return 0;
 	return Math.max(0, Math.min(max, Math.floor((room + .5) / lineHeight)));
 }
-function containCoverRect(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);
-	const renderedWidth = imageWidth * scale;
-	const renderedHeight = imageHeight * scale;
-	return {
-		x: (width - renderedWidth) / 2,
-		y: (height - renderedHeight) / 2,
-		width: renderedWidth,
-		height: renderedHeight
-	};
-}
 function layoutCover(sprite, width, height, texture) {
-	const rect = containCoverRect(width, height, texture.width, texture.height);
+	const rect = containRect(width, height, texture.width, texture.height);
 	sprite.position.set(rect.x, rect.y);
 	sprite.width = rect.width;
 	sprite.height = rect.height;
 }
-function syncClip(parts, width, height) {
-	parts.clip.clear().roundRect(0, 0, Math.max(1, width), Math.max(1, height), RADIUS).fill({ color: 16777215 });
+function syncClip(parts, rect, style) {
+	traceCardOutline(parts.clip.clear(), rect, style).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 elevation = cardElevation(context, item.id);
+	syncCardTag(parts.tag, {
+		glyph: "file",
+		text: fileMetaLine(item.props.src, item.props.snapshot?.size),
+		width
+	}, context);
 	const key = context.assetKey(item);
 	const texture = key ? context.getTexture(key) : null;
 	const coverFailed = Boolean(key && !texture && context.hasError(key));
@@ -136,30 +71,30 @@ function sync(container, item, context) {
 		key ?? "",
 		width,
 		height,
-		selected,
-		hovered,
 		detail,
+		elevation,
 		texture ? `${texture.width}x${texture.height}` : "none",
 		coverFailed,
 		fileState,
 		kind,
 		category,
-		context.colorScheme,
-		context.palette.surface,
-		context.palette.hover,
+		context.themeKey,
 		accent
 	].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
+		const rect = {
+			x: 0,
+			y: 0,
+			width,
+			height
+		};
+		syncClip(parts, rect, context.style);
+		drawCardSurface(parts.plate.clear(), rect, context.style, {
+			fill: context.palette.surface,
+			border: context.palette.border,
+			borderAlpha: .85,
+			elevation
 		});
 		if (fileState !== "ok") {
 			const dash = Math.max(6, width / MAX_DASHES / 2);
@@ -178,8 +113,7 @@ function sync(container, item, context) {
 		if (showCover && texture) {
 			if (parts.cover.texture !== texture) parts.cover.texture = texture;
 			layoutCover(parts.cover, width, band, 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.coverMask.clear().rect(0, 0, width, band).fill({ color: 16777215 });
 		}
 		parts.cover.visible = showCover;
 		parts.coverMask.visible = showCover;
@@ -187,13 +121,8 @@ function sync(container, item, context) {
 			color: accent,
 			alpha: .55
 		});
-		parts.title.visible = detail !== "plate";
 		parts.excerpt.visible = detail === "full";
-		parts.typeMark.visible = kind === "blank" && detail !== "plate";
-	}
-	if (detail === "plate") {
-		parts.typeMark.visible = false;
-		return;
+		parts.typeMark.visible = kind === "blank";
 	}
 	const title = item.props.snapshot?.title || fileStem(item.props.src);
 	const excerpt = item.props.snapshot?.excerpt ?? "";
@@ -211,10 +140,13 @@ function sync(container, item, context) {
 		kind,
 		context.palette.text,
 		context.palette.muted,
+		context.style.font,
 		accent
 	].join("|");
 	if (textSig === parts.textSig) return;
 	parts.textSig = textSig;
+	parts.title.style.fontFamily = context.style.font;
+	parts.excerpt.style.fontFamily = context.style.font;
 	const top = band > 0 ? band + PADDING * .8 : PADDING;
 	const contentBottom = height - PADDING;
 	let cursor = top;
@@ -301,8 +233,10 @@ const fileCardRenderer = {
 		});
 		body.mask = clip;
 		body.addChild(cover, coverMask, typeMark, title, excerpt);
-		root.addChild(plate, body, clip);
+		const tag = createCardTag();
+		root.addChild(plate, body, clip, tag.root);
 		partsByContainer.set(root, {
+			tag,
 			root,
 			plate,
 			body,
@@ -324,6 +258,10 @@ const fileCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "file") sync(container, item, context);
 	},
+	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);
 		drawFarPlate(graphics, item.frame, {
@@ -342,4 +280,4 @@ function isFileItem(item) {
 	return item.type === "file";
 }
 //#endregion
-export { containCoverRect, ellipsizeWrappedLines, fileCardRenderer, fitLineWithEllipsis, fitTextToLines, isFileItem };
+export { fileCardRenderer, isFileItem };

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

@@ -1,9 +1,9 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { itemAlpha, itemColor } from "../palette.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 { dashPattern, roundRectPoints, tracePolyline, trimPolyline } from "../stroke.js";
 import { Container, Graphics } from "pixi.js";
 //#region src/board/render/renderers/frame-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
@@ -14,13 +14,10 @@ function sync(container, item, context) {
 	const { frame, style, props, locked } = item;
 	positionShell(parts.root, item);
 	syncTextResolution(parts.label, parts, context.zoom);
-	const selected = context.selectedIds.has(item.id);
-	const hovered = context.hoveredId === item.id;
 	const fill = itemColor(context, style.fill ?? style.stroke, "neutral", "fill");
 	const fillAlpha = (style.fillOpacity ?? (style.fill ? 1 : DEFAULT_WASH)) * itemAlpha(context, style.fill ?? style.stroke);
 	const baseStroke = itemColor(context, style.stroke, "neutral");
-	const stroke = selected ? context.palette.brand : hovered && style.stroke ? context.palette.muted : baseStroke;
-	const alpha = (selected || style.stroke ? 1 : hovered ? .85 : .55) * itemAlpha(context, style.stroke);
+	const alpha = (style.stroke ? 1 : .55) * itemAlpha(context, style.stroke);
 	const radius = style.radius ?? 4;
 	const strokeWidth = style.strokeWidth ?? 1.5;
 	const decorated = props.decoration !== "none";
@@ -28,11 +25,9 @@ function sync(container, item, context) {
 		props.decoration,
 		frame.width,
 		frame.height,
-		selected,
-		hovered,
 		fill,
 		fillAlpha,
-		stroke,
+		baseStroke,
 		alpha,
 		radius,
 		strokeWidth,
@@ -46,15 +41,14 @@ function sync(container, item, context) {
 			color: fill,
 			alpha: fillAlpha
 		});
-		const width = selected ? Math.max(2, strokeWidth) : strokeWidth;
-		const pattern = decorated ? dashPattern(style.dash, width) : null;
-		const trim = decorated ? style.trim ?? 1 : 1;
-		if ((decorated && strokeWidth > 0 || selected || hovered) && trim > 0) {
+		const pattern = dashPattern(style.dash, strokeWidth);
+		const trim = style.trim ?? 1;
+		if (decorated && strokeWidth > 0 && trim > 0) {
 			if (pattern || trim < 1) tracePolyline(parts.box, trimPolyline(roundRectPoints(frame.width, frame.height, radius), trim), pattern);
 			else parts.box.roundRect(0, 0, frame.width, frame.height, radius);
 			parts.box.stroke({
-				color: stroke,
-				width,
+				color: baseStroke,
+				width: strokeWidth,
 				alpha,
 				cap: pattern || trim < 1 ? "round" : "butt",
 				join: "round"
@@ -64,11 +58,16 @@ 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 textSig = [title, labelColor].join("|");
+	const textSig = [
+		title,
+		labelColor,
+		context.style.font
+	].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.position.set(4, -18);
 }