@neta-art/cohub 12.1.0 → 12.2.0

package/dist/board/render/surface.js

@@ -13,23 +13,33 @@ function traceCardOutline(graphics, rect, style, grow = 0) {
 	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);
 }
+/**
+* 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.
+*/
 function fillCardPicture(graphics, texture, picture, style, crop) {
 	const sampling = texture.source.style;
 	if (sampling.addressMode !== "mirror-repeat") {
 		sampling.addressMode = "mirror-repeat";
 		sampling.update();
 	}
-	const matrix = crop ? new Matrix(1 / crop.w, 0, 0, 1 / crop.h, -crop.x / crop.w, -crop.y / crop.h) : void 0;
+	const { x = 0, y = 0, w = 1, h = 1 } = crop ?? {};
+	const insetX = Math.min(.5 / texture.source.pixelWidth, w / 4);
+	const insetY = Math.min(.5 / texture.source.pixelHeight, h / 4);
+	const sw = w - insetX * 2;
+	const sh = h - insetY * 2;
+	const matrix = new Matrix(1 / sw, 0, 0, 1 / sh, -(x + insetX) / sw, -(y + insetY) / sh);
 	return traceCardOutline(graphics, picture, style).fill({
 		texture,
 		textureSpace: "local",
-		...matrix ? { matrix } : {}
+		matrix
 	});
 }
 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]));
+	return graphics.poly(pixelRectPoints(x, y, width, height, s).flatMap((point) => [point.x, point.y]), true);
 }
 function pixelRectPoints(x, y, width, height, s) {
 	const r = x + width;

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

@@ -1,4 +1,5 @@
-import { CanvasTextMetrics } from "pixi.js";
+import { layoutTextLines } from "./text-measurement.js";
+import { CanvasTextMetrics, fontStringFromTextStyle } from "pixi.js";
 //#region src/board/render/text-fit.ts
 function ellipsizeWrappedLines(lines, maxLines) {
 	if (maxLines <= 0 || lines.length === 0) return "";
@@ -29,24 +30,19 @@ function fitLineWithEllipsis(line, wrapWidth, measureWidth) {
 }
 function fitTextToLines(text, value, maxLines, wrapWidth) {
 	const width = Math.max(1, wrapWidth);
-	text.style.wordWrapWidth = width;
+	text.style.wordWrap = false;
 	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 { lines } = layoutTextLines(sample, fontStringFromTextStyle(text.style), width);
+	const kept = lines.slice(0, maxLines);
+	if (lines.length > maxLines || sample !== value) {
+		const lastIndex = kept.length - 1;
+		kept[lastIndex] = fitLineWithEllipsis(kept[lastIndex] ?? "", width, (candidate) => CanvasTextMetrics.measureText(candidate, text.style).width);
 	}
-	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;
 }

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

@@ -1,10 +1,24 @@
+import { BoardTextFont, BoardTextLines } from "../../protocol/dist/board-layout.js";
+import "../../protocol/dist/index.js";
+import { TextStyle } from "pixi.js";
 //#region src/board/render/text-measurement.d.ts
 declare const BOARD_FONT_STACKS: {
   sans: string;
   serif: string;
   mono: string;
 };
+type BoardTextStyle = {
+  fontFamily: string;
+  fontSize: number;
+  fontWeight: string;
+};
+declare function canvasFontFamily(families: string): string;
+declare function boardTextStyle({ font, fontSize, fontWeight }: BoardTextFont): BoardTextStyle;
+declare function canvasFont({ fontFamily, fontSize, fontWeight }: BoardTextStyle): string;
+declare function layoutTextLines(text: string, font: string, maxWidth?: number): BoardTextLines;
+declare function cssBaselineShift(style: TextStyle): number;
 declare function installBoardTextMeasurement(): void;
 declare function ensureBoardTextMeasurement(): void;
+declare function onBoardTextFontsChange(listener: () => void): () => void;
 //#endregion
-export { BOARD_FONT_STACKS, ensureBoardTextMeasurement, installBoardTextMeasurement };
+export { BOARD_FONT_STACKS, BoardTextStyle, boardTextStyle, canvasFont, canvasFontFamily, cssBaselineShift, ensureBoardTextMeasurement, installBoardTextMeasurement, layoutTextLines, onBoardTextFontsChange };

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

@@ -1,38 +1,131 @@
 import { BOARD_FONT_STACK, BOARD_MONO_FONT_STACK } from "../../protocol/dist/board-constants.js";
-import { setBoardTextMeasurer } from "../../protocol/dist/board-layout.js";
+import { clampBoardFontSize, setBoardTextLayouter } from "../../protocol/dist/board-layout.js";
 import { boardFontFamily } from "../model/text-metrics.js";
-import { DOMAdapter } from "pixi.js";
+import { CanvasTextMetrics, DOMAdapter, fontStringFromTextStyle } from "pixi.js";
+import { clearCache, layoutWithLines, prepareWithSegments } from "@chenglou/pretext";
 //#region src/board/render/text-measurement.ts
 const BOARD_FONT_STACKS = {
 	sans: BOARD_FONT_STACK,
-	serif: "ui-serif, Georgia, \"Noto Serif CJK SC\", \"Songti SC\", \"Noto Sans Math\", \"DejaVu Sans\", \"Noto Sans CJK SC\", \"FreeSans\", \"FreeSerif\", sans-serif",
+	serif: "ui-serif, Georgia, \"Noto Serif CJK SC\", \"Songti SC\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Noto Color Emoji\", \"Noto Sans Math\", \"DejaVu Sans\", \"Noto Sans CJK SC\", \"FreeSans\", \"FreeSerif\", sans-serif",
 	mono: BOARD_MONO_FONT_STACK
 };
-let measureContext;
-let installed = false;
-function getMeasureContext() {
-	if (measureContext !== void 0) return measureContext;
-	try {
-		measureContext = DOMAdapter.get().createCanvas(1, 1).getContext("2d") ?? null;
-	} catch {
-		measureContext = null;
+const GENERIC_FAMILIES = /* @__PURE__ */ new Set([
+	"serif",
+	"sans-serif",
+	"monospace",
+	"cursive",
+	"fantasy",
+	"system-ui"
+]);
+const QUOTED = /^(["']).+\1$/;
+const familyLists = /* @__PURE__ */ new Map();
+function canvasFontFamily(families) {
+	let list = familyLists.get(families);
+	if (list === void 0) {
+		list = families.split(",").map((name) => name.trim()).filter(Boolean).map((name) => QUOTED.test(name) || GENERIC_FAMILIES.has(name) ? name : `"${name}"`).join(", ");
+		familyLists.set(families, list);
 	}
-	return measureContext;
+	return list;
+}
+function boardTextStyle({ font, fontSize, fontWeight }) {
+	return {
+		fontFamily: canvasFontFamily(boardFontFamily(font, BOARD_FONT_STACKS)),
+		fontSize: clampBoardFontSize(fontSize),
+		fontWeight: String(Math.round(fontWeight / 100) * 100)
+	};
 }
-function measureText(text, fontSize, fontWeight, font) {
-	const context = getMeasureContext();
-	if (!context) return null;
-	context.font = `${fontWeight} ${fontSize}px ${boardFontFamily(font, BOARD_FONT_STACKS)}`;
-	return context.measureText(text).width;
+function canvasFont({ fontFamily, fontSize, fontWeight }) {
+	return `${fontWeight} ${fontSize}px ${fontFamily}`;
+}
+const PREPARED_LIMIT = 256;
+const prepared = /* @__PURE__ */ new Map();
+const measuredFonts = /* @__PURE__ */ new Set();
+const measuredFamilies = /* @__PURE__ */ new Set();
+const TRAILING_SPACE = /[ \t]+$/u;
+const unquote = (name) => name.trim().replace(/^["']|["']$/gu, "");
+function prepareText(text, font) {
+	const key = `${font}\n${text}`;
+	let value = prepared.get(key);
+	if (value) {
+		prepared.delete(key);
+		prepared.set(key, value);
+		return value;
+	}
+	if (!measuredFonts.has(font)) {
+		measuredFonts.add(font);
+		for (const name of /px\s+(.+)$/u.exec(font)?.[1]?.split(",") ?? []) measuredFamilies.add(unquote(name));
+	}
+	value = prepareWithSegments(text, font, { whiteSpace: "pre-wrap" });
+	if (prepared.size >= PREPARED_LIMIT) prepared.delete(prepared.keys().next().value);
+	prepared.set(key, value);
+	return value;
+}
+function layoutTextLines(text, font, maxWidth = Number.POSITIVE_INFINITY) {
+	const lines = [];
+	let width = 0;
+	for (const paragraph of text.replace(/\r\n?/gu, "\n").replaceAll("	", " ").split("\n")) {
+		if (!paragraph) {
+			lines.push("");
+			continue;
+		}
+		const wrapped = layoutWithLines(prepareText(paragraph, font), maxWidth, 1).lines;
+		for (const [index, line] of wrapped.entries()) {
+			lines.push(index === wrapped.length - 1 ? line.text : line.text.replace(TRAILING_SPACE, ""));
+			width = Math.max(width, line.width);
+		}
+	}
+	return {
+		lines,
+		width
+	};
+}
+const baselineShifts = /* @__PURE__ */ new Map();
+function cssBaselineShift(style) {
+	const font = fontStringFromTextStyle(style);
+	let shift = baselineShifts.get(font);
+	if (shift === void 0) {
+		const ink = CanvasTextMetrics.measureFont(font);
+		const context = DOMAdapter.get().createCanvas(1, 1).getContext("2d");
+		shift = 0;
+		if (context) {
+			context.font = font;
+			const { fontBoundingBoxAscent: ascent, fontBoundingBoxDescent: descent } = context.measureText("M");
+			if (Number.isFinite(ascent) && Number.isFinite(descent)) shift = (ascent - descent - (ink.ascent - ink.descent)) / 2;
+		}
+		baselineShifts.set(font, shift);
+	}
+	return shift;
+}
+const layoutBoardLines = (text, font, maxWidth) => layoutTextLines(text, canvasFont(boardTextStyle(font)), maxWidth);
+const canMeasure = () => typeof OffscreenCanvas !== "undefined" || typeof document !== "undefined";
+let installed = false;
+let fontsChanged = false;
+const fontListeners = /* @__PURE__ */ new Set();
+function notifyFontsChanged() {
+	fontsChanged = false;
+	installBoardTextMeasurement();
+	for (const listener of fontListeners) listener();
 }
 function installBoardTextMeasurement() {
-	measureContext = void 0;
 	installed = true;
-	setBoardTextMeasurer(measureText);
+	prepared.clear();
+	baselineShifts.clear();
+	clearCache();
+	CanvasTextMetrics.clearMetrics();
+	setBoardTextLayouter(canMeasure() ? layoutBoardLines : void 0);
 }
 function ensureBoardTextMeasurement() {
 	if (installed) return;
 	installBoardTextMeasurement();
+	globalThis.document?.fonts?.addEventListener("loadingdone", (event) => {
+		if (fontsChanged || !event.fontfaces.some((face) => measuredFamilies.has(unquote(face.family)))) return;
+		fontsChanged = true;
+		requestAnimationFrame(notifyFontsChanged);
+	});
+}
+function onBoardTextFontsChange(listener) {
+	fontListeners.add(listener);
+	return () => fontListeners.delete(listener);
 }
 //#endregion
-export { BOARD_FONT_STACKS, ensureBoardTextMeasurement, installBoardTextMeasurement };
+export { BOARD_FONT_STACKS, boardTextStyle, canvasFont, canvasFontFamily, cssBaselineShift, ensureBoardTextMeasurement, installBoardTextMeasurement, layoutTextLines, onBoardTextFontsChange };

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

@@ -5,13 +5,8 @@ declare function getBoardResolution(size?: {
   height: number;
 }, devicePixelRatio?: number): number;
 declare function textZoomBucket(zoom: number): number;
-declare function boardCardDetailed(zoom: number): boolean;
 /** Exact screen density at rest; reuse or step the raster while moving. */
 declare function boardTextResolution(target: number, current: number, settled: boolean): number;
 declare function syncTextResolution(text: Text, resolution: number): void;
-/** Defer expensive Pixi word-wrap rasterisation during a live resize. */
-declare function syncTextWrapWidth(text: Text, state: {
-  wrapWidth: number;
-}, width: number, defer: boolean): void;
 //#endregion
-export { boardCardDetailed, boardTextResolution, getBoardResolution, syncTextResolution, syncTextWrapWidth, textZoomBucket };
+export { boardTextResolution, getBoardResolution, syncTextResolution, textZoomBucket };

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

@@ -23,9 +23,6 @@ function textZoomBucket(zoom) {
 	for (const bucket of ZOOM_BUCKETS) if (clamped <= bucket) return bucket;
 	return ZOOM_BUCKETS[ZOOM_BUCKETS.length - 1] ?? 4;
 }
-function boardCardDetailed(zoom) {
-	return textZoomBucket(zoom) >= 1;
-}
 /** Exact screen density at rest; reuse or step the raster while moving. */
 function boardTextResolution(target, current, settled) {
 	if (!Number.isFinite(target) || target <= 0) return current > 0 ? current : 1;
@@ -39,11 +36,5 @@ function syncTextResolution(text, resolution) {
 	const next = Math.min(limit, Math.max(MIN_TEXT_RESOLUTION, resolution));
 	if (text.resolution !== next) text.resolution = next;
 }
-/** Defer expensive Pixi word-wrap rasterisation during a live resize. */
-function syncTextWrapWidth(text, state, width, defer) {
-	if (defer || width === state.wrapWidth) return;
-	text.style.wordWrapWidth = width;
-	state.wrapWidth = width;
-}
 //#endregion
-export { boardCardDetailed, boardTextResolution, getBoardResolution, syncTextResolution, syncTextWrapWidth, textZoomBucket };
+export { boardTextResolution, getBoardResolution, syncTextResolution, textZoomBucket };

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

@@ -0,0 +1,15 @@
+import { BoardShapeColors } from "../model/palette.js";
+import { BoardThemeId } from "../model/themes.js";
+import { BoardRenderStyle } from "./style.js";
+import { BoardRenderPalette } from "./renderers/board-renderer-registry.js";
+//#region src/board/render/theme.d.ts
+type BoardRenderTheme = {
+  colorScheme: "dark" | "light";
+  palette: BoardRenderPalette;
+  colors: BoardShapeColors;
+  style: BoardRenderStyle;
+};
+/** A built-in Cohub theme as the app draws it; spread it into export or sampler options. */
+declare function boardRenderTheme(id: BoardThemeId): BoardRenderTheme;
+//#endregion
+export { BoardRenderTheme, boardRenderTheme };

package/dist/board/render/theme.js

@@ -0,0 +1,15 @@
+import { BOARD_THEME_DATA } from "../model/themes.js";
+import { resolveBoardRenderStyle } from "./style.js";
+//#region src/board/render/theme.ts
+/** A built-in Cohub theme as the app draws it; spread it into export or sampler options. */
+function boardRenderTheme(id) {
+	const { colorScheme, palette, colors, style } = BOARD_THEME_DATA[id];
+	return {
+		colorScheme,
+		palette: { ...palette },
+		colors: Object.fromEntries(Object.entries(colors).map(([key, value]) => [key, { ...value }])),
+		style: resolveBoardRenderStyle(colorScheme, style)
+	};
+}
+//#endregion
+export { boardRenderTheme };

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

@@ -1,5 +1,6 @@
 import { ModelFormat } from "../../protocol/dist/fs/mime.js";
 import { BoardSceneItem } from "../model/scene.js";
+import { BoardAssetMedia } from "../model/asset-key.js";
 import { BoardAssetUrlOptions } from "../model/media-playback.js";
 import "../model/index.js";
 import { LruBudget } from "./lru.js";
@@ -7,9 +8,6 @@ import { BoardImageTexturePool } from "./texture-pool.js";
 import { Texture } from "pixi.js";
 //#region src/board/stage/assets.d.ts
 type BoardUrlMedia = "image" | "video";
-type BoardAssetMedia = BoardUrlMedia | "model";
-declare function boardTextureEdge(item: BoardSceneItem, scale: number): number;
-declare function boardAssetKey(item: BoardSceneItem): string | null;
 type Size = {
   width: number;
   height: number;
@@ -28,6 +26,11 @@ type BoardAssetManager = {
   assetKey: (item: BoardSceneItem) => string | null;
   invalidatePath: (path: string) => void;
   requestItem: (item: BoardSceneItem, edge?: number) => void;
+  /** World point used to prioritize queued loads. */
+  focus: (point: {
+    x: number;
+    y: number;
+  } | null) => void;
   getTexture: (key: string) => Texture | null;
   getNaturalSize: (key: string) => Size | null;
   hasError: (key: string) => boolean;
@@ -38,6 +41,12 @@ type BoardAssetManager = {
     edge?: (item: BoardSceneItem) => number;
   }) => Promise<T>;
   subscribe: (listener: (key: string) => void) => () => void;
+  /** Current texture and cooling-cache usage. */
+  stats: () => {
+    textures: number;
+    cooling: number;
+    bytes: number;
+  };
   destroy: () => void;
 };
 type BoardAssetManagerOptions = {
@@ -51,8 +60,10 @@ type BoardAssetManagerOptions = {
   imageTexturePool?: BoardImageTexturePool;
   loadTexture?: (url: string, media: BoardUrlMedia) => Promise<Texture | null>;
   unloadTexture?: (url: string, texture: Texture | null, media: BoardAssetMedia) => Promise<void>;
+  /** An unshared copy of an image texture at `edge`; null keeps evicting outright. */
+  shrinkTexture?: (texture: Texture, edge: number) => Promise<Texture | null>;
   now?: () => number;
 };
 declare function createBoardAssetManager(options: BoardAssetManagerOptions): BoardAssetManager;
 //#endregion
-export { BoardAssetManager, BoardAssetManagerOptions, BoardModelPreviewRequest, BoardModelPreviews, boardAssetKey, boardTextureEdge, createBoardAssetManager };
+export { BoardAssetManager, BoardAssetManagerOptions, BoardModelPreviewRequest, BoardModelPreviews, createBoardAssetManager };