@neta-art/cohub 3.1.0 → 4.0.0

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

@@ -0,0 +1,350 @@
+import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
+import { fileBaseName, filePreviewKind } 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. 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 GAP = 4;
+/** Zoom below which the title is dropped (glyphs are sub-pixel). */
+const LOD_TITLE_ZOOM = .35;
+/** Zoom below which the excerpt is 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));
+}
+/**
+* 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)));
+}
+/** Scale an image into a fixed cover band without cropping or distortion. */
+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);
+	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 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);
+	const visualSig = [
+		key ?? "",
+		width,
+		height,
+		selected,
+		hovered,
+		detail,
+		texture ? `${texture.width}x${texture.height}` : "none",
+		coverFailed,
+		fileState,
+		context.colorScheme,
+		context.palette.surface,
+		context.palette.hover
+	].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 (band > 0) parts.plate.rect(1, 1, width - 2, band - 1).fill({
+			color: context.palette.hover,
+			alpha: coverFailed ? .35 : .6
+		});
+		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.cover.visible = showCover;
+		parts.coverMask.visible = showCover;
+		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";
+	}
+	if (detail === "plate") return;
+	const title = item.snapshot?.title || fileBaseName(item.ref.path);
+	const excerpt = item.snapshot?.excerpt ?? "";
+	const innerWidth = Math.max(1, width - PADDING * 2);
+	const textSig = [
+		title,
+		excerpt,
+		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 contentBottom = height - PADDING;
+	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;
+		return;
+	}
+	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
+		});
+		body.mask = clip;
+		body.addChild(cover, coverMask, title, excerpt);
+		root.addChild(plate, body, clip);
+		partsByContainer.set(root, {
+			root,
+			plate,
+			body,
+			clip,
+			cover,
+			coverMask,
+			title,
+			excerpt,
+			visualSig: "",
+			textSig: "",
+			titleRes: { resolution },
+			excerptRes: { 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 { containCoverRect, 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 };

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

@@ -0,0 +1,99 @@
+import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
+import { pickBoardColor } from "../../core/palette.js";
+import { syncTextResolution } from "../text-resolution.js";
+import { drawFarPlate } from "./far-plate.js";
+import { createLabel, positionShell } from "./base-card-renderer.js";
+import { Container, Graphics } from "pixi.js";
+//#region src/board/render/renderers/frame-card-renderer.ts
+const partsByContainer = /* @__PURE__ */ new WeakMap();
+function sync(container, item, context) {
+	const parts = partsByContainer.get(container);
+	if (!parts || item.type !== "frame") return;
+	const { frame, label, color, 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 palette = pickBoardColor(context.colors, color, context.colorScheme);
+	const stroke = selected ? context.palette.brand : palette.stroke;
+	const alpha = selected ? 1 : hovered ? .85 : .55;
+	const visualSig = [
+		frame.width,
+		frame.height,
+		selected,
+		hovered,
+		palette.fill,
+		stroke
+	].join("|");
+	if (visualSig !== parts.visualSig) {
+		parts.visualSig = visualSig;
+		parts.box.clear();
+		parts.box.roundRect(0, 0, frame.width, frame.height, 4).fill({
+			color: palette.fill,
+			alpha: .04
+		});
+		parts.box.roundRect(0, 0, frame.width, frame.height, 4).stroke({
+			color: stroke,
+			width: selected ? 2 : 1.5,
+			alpha
+		});
+	}
+	const title = locked ? `🔒 ${label || "Frame"}` : label || "Frame";
+	const textSig = [title, palette.stroke].join("|");
+	if (textSig !== parts.textSig) {
+		parts.textSig = textSig;
+		parts.label.text = title;
+		parts.label.style.fill = palette.stroke;
+	}
+	parts.label.position.set(4, -18);
+}
+const frameCardRenderer = {
+	id: "frame-card",
+	canRender: (item) => item.type === "frame",
+	create: (item, context) => {
+		const root = new Container();
+		const box = new Graphics();
+		const label = createLabel("", {
+			fill: context.palette.muted,
+			fontFamily: BOARD_FONT_STACK,
+			fontSize: 12,
+			fontWeight: "600"
+		});
+		root.addChild(box, label);
+		partsByContainer.set(root, {
+			root,
+			box,
+			label,
+			visualSig: "",
+			textSig: "",
+			resolution: label.resolution
+		});
+		sync(root, item, context);
+		return root;
+	},
+	update: (container, item, context) => {
+		sync(container, item, context);
+	},
+	/**
+	* Far LOD: a frame is a background region, so it draws as a faint wash with no
+	* label.
+	*
+	* Batching it is what keeps it *behind* its contents. As a live container it
+	* would be drawn above the whole far layer no matter where the document places
+	* it, so a frame would hide every card inside it.
+	*/
+	renderFar: (graphics, item, context) => {
+		if (item.type !== "frame") return;
+		const palette = pickBoardColor(context.colors, item.color, context.colorScheme);
+		drawFarPlate(graphics, item.frame, {
+			fill: palette.fill,
+			fillAlpha: .07
+		});
+	},
+	destroy: (container) => {
+		partsByContainer.delete(container);
+		container.destroy({ children: true });
+	}
+};
+//#endregion
+export { frameCardRenderer };

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

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

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

@@ -0,0 +1,128 @@
+import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
+import { pickBoardColor } from "../../core/palette.js";
+import { syncTextResolution, syncTextWrapWidth, textResolutionForZoom } from "../text-resolution.js";
+import { drawFarPlate } from "./far-plate.js";
+import { positionShell } from "./base-card-renderer.js";
+import { Container, Graphics, Text } from "pixi.js";
+//#region src/board/render/renderers/geo-card-renderer.ts
+const RADIUS = 8;
+const LABEL_PADDING = 8;
+const partsByContainer = /* @__PURE__ */ new WeakMap();
+function traceOutline(graphics, geo, width, height) {
+	switch (geo) {
+		case "ellipse":
+			graphics.ellipse(width / 2, height / 2, width / 2, height / 2);
+			return;
+		case "diamond":
+			graphics.moveTo(width / 2, 0).lineTo(width, height / 2).lineTo(width / 2, height).lineTo(0, height / 2).closePath();
+			return;
+		case "triangle":
+			graphics.moveTo(width / 2, 0).lineTo(width, height).lineTo(0, height).closePath();
+			return;
+		case "rounded":
+			graphics.roundRect(0, 0, width, height, RADIUS);
+			return;
+		default: graphics.rect(0, 0, width, height);
+	}
+}
+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 color = pickBoardColor(context.colors, item.color, context.colorScheme);
+	syncTextResolution(parts.label, parts, context.zoom);
+	const resizing = context.resizingIds.has(item.id);
+	const visualSig = [
+		width,
+		height,
+		selected,
+		hovered,
+		item.geo,
+		item.fillOpacity,
+		color.fill,
+		color.stroke,
+		context.palette.muted
+	].join("|");
+	if (visualSig !== parts.visualSig) {
+		parts.visualSig = visualSig;
+		parts.shape.clear();
+		traceOutline(parts.shape, item.geo, width, height);
+		if (item.fillOpacity > 0) parts.shape.fill({
+			color: color.fill,
+			alpha: item.fillOpacity
+		});
+		traceOutline(parts.shape, item.geo, width, height);
+		parts.shape.stroke({
+			color: selected ? color.stroke : hovered ? context.palette.muted : color.stroke,
+			width: selected ? 2.5 : 1.75,
+			alpha: selected ? 1 : hovered ? .95 : .85
+		});
+	}
+	const textSig = [item.text, color.label].join("|");
+	if (textSig !== parts.textSig) {
+		parts.textSig = textSig;
+		parts.label.text = item.text;
+		parts.label.visible = item.text.length > 0;
+		parts.label.style.fill = color.label;
+	}
+	syncTextWrapWidth(parts.label, parts, Math.max(1, width - LABEL_PADDING * 2), resizing);
+	parts.label.position.set(width / 2, height / 2);
+}
+const geoCardRenderer = {
+	id: "geo-card",
+	canRender: (item) => item.type === "geo",
+	create: (item, context) => {
+		const root = new Container();
+		const shape = new Graphics();
+		const resolution = textResolutionForZoom(context.zoom);
+		const label = new Text({
+			text: "",
+			style: {
+				fill: 16777215,
+				fontFamily: BOARD_FONT_STACK,
+				fontSize: 14,
+				fontWeight: "500",
+				align: "center",
+				wordWrap: true,
+				lineHeight: 20
+			},
+			resolution,
+			roundPixels: true
+		});
+		label.anchor.set(.5);
+		root.addChild(shape, label);
+		partsByContainer.set(root, {
+			root,
+			shape,
+			label,
+			visualSig: "",
+			textSig: "",
+			wrapWidth: 0,
+			resolution
+		});
+		if (item.type === "geo") sync(root, item, context);
+		return root;
+	},
+	update: (container, item, context) => {
+		if (item.type === "geo") sync(container, item, context);
+	},
+	renderFar: (graphics, item, context) => {
+		if (item.type !== "geo") return;
+		const color = pickBoardColor(context.colors, item.color, context.colorScheme);
+		drawFarPlate(graphics, item.frame, {
+			fill: color.fill,
+			fillAlpha: Math.max(.18, item.fillOpacity),
+			accent: color.stroke,
+			accentAlpha: .9
+		});
+	},
+	destroy: (container) => {
+		partsByContainer.get(container)?.root.destroy({ children: true });
+		partsByContainer.delete(container);
+	}
+};
+//#endregion
+export { geoCardRenderer };

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

@@ -0,0 +1,8 @@
+import { BoardImageItem, BoardItem } from "../../../protocol/dist/board-document.js";
+import { BoardCardRenderer } from "./board-renderer-registry.js";
+//#region src/board/render/renderers/image-card-renderer.d.ts
+declare const imageCardRenderer: BoardCardRenderer;
+/** Helper kept for type narrowing in tests. */
+declare function isImageItem(item: BoardItem): item is BoardImageItem;
+//#endregion
+export { imageCardRenderer, isImageItem };