@neta-art/cohub 3.0.0 → 3.2.0

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 };

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

@@ -0,0 +1,138 @@
+import { drawFarPlate } from "./far-plate.js";
+import { positionShell } from "./base-card-renderer.js";
+import { Container, Graphics, Sprite, Texture } from "pixi.js";
+//#region src/board/render/renderers/image-card-renderer.ts
+const partsByContainer = /* @__PURE__ */ new WeakMap();
+const RADIUS = 2;
+/**
+* Lay the sprite out inside the frame.
+*
+* The frame normally already matches the image's pixel aspect (see the editor's
+* media size adoption), so this fills it exactly. Until that correction lands
+* for a freshly dropped file, `contain` keeps the whole image visible rather
+* than cropping it — the brief letterbox is self-correcting.
+*/
+function layoutContain(sprite, width, height) {
+	const texture = sprite.texture;
+	const tw = texture.width;
+	const th = texture.height;
+	if (!tw || !th) return;
+	const scale = Math.min(width / tw, height / th);
+	sprite.width = tw * scale;
+	sprite.height = th * scale;
+	sprite.x = (width - sprite.width) / 2;
+	sprite.y = (height - sprite.height) / 2;
+}
+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 key = context.assetKey(item);
+	const texture = key ? context.getTexture(key) : null;
+	const failed = Boolean(key && !texture && context.hasError(key));
+	const texId = texture ? `${texture.width}x${texture.height}` : "none";
+	const sig = [
+		key ?? "",
+		width,
+		height,
+		selected,
+		hovered,
+		texId,
+		failed,
+		context.colorScheme
+	].join("|");
+	if (sig === parts.sig) return;
+	parts.sig = sig;
+	if (texture && parts.sprite.texture !== texture) parts.sprite.texture = texture;
+	parts.sprite.visible = Boolean(texture);
+	if (texture) layoutContain(parts.sprite, width, height);
+	parts.placeholder.clear();
+	if (!texture) {
+		parts.placeholder.roundRect(0, 0, width, height, RADIUS).fill({
+			color: context.palette.surface,
+			alpha: .85
+		}).roundRect(0, 0, width, height, RADIUS).stroke({
+			color: failed ? context.palette.border : context.palette.hover,
+			width: 1,
+			alpha: .9
+		});
+		const cx = width / 2;
+		const cy = height / 2;
+		if (failed) parts.placeholder.moveTo(cx - 10, cy - 10).lineTo(cx + 10, cy + 10).moveTo(cx + 10, cy - 10).lineTo(cx - 10, cy + 10).stroke({
+			color: context.palette.muted,
+			width: 1.5,
+			alpha: .8
+		});
+		else parts.placeholder.circle(cx, cy, 6).stroke({
+			color: context.palette.muted,
+			width: 1.25,
+			alpha: .55
+		});
+	}
+	parts.placeholder.visible = !texture;
+	if (selected || hovered) {
+		const hasPixels = Boolean(texture) && parts.sprite.width > 0;
+		const ox = hasPixels ? parts.sprite.x : 0;
+		const oy = hasPixels ? parts.sprite.y : 0;
+		const ow = hasPixels ? parts.sprite.width : width;
+		const oh = hasPixels ? parts.sprite.height : height;
+		parts.placeholder.visible = true;
+		parts.placeholder.roundRect(ox, oy, ow, oh, RADIUS).stroke({
+			color: selected ? context.palette.brand : context.palette.muted,
+			width: selected ? 2 : 1,
+			alpha: selected ? .95 : .7
+		});
+	}
+}
+const imageCardRenderer = {
+	id: "image-card",
+	canRender: (item) => item.type === "image",
+	create: (item, context) => {
+		const root = new Container();
+		const sprite = new Sprite(Texture.EMPTY);
+		const placeholder = new Graphics();
+		const mask = new Graphics();
+		const maskBox = () => {
+			mask.clear();
+			if (item.type === "image") mask.roundRect(0, 0, item.frame.width, item.frame.height, RADIUS).fill({ color: 16777215 });
+		};
+		maskBox();
+		root.addChild(placeholder, sprite, mask);
+		sprite.mask = mask;
+		partsByContainer.set(root, {
+			root,
+			sprite,
+			placeholder,
+			sig: ""
+		});
+		if (item.type === "image") sync(root, item, context);
+		return root;
+	},
+	update: (container, item, context) => {
+		if (item.type !== "image") return;
+		const parts = partsByContainer.get(container);
+		if (!parts) return;
+		const mask = parts.root.children.find((child) => child !== parts.sprite && child !== parts.placeholder);
+		if (mask) mask.clear().roundRect(0, 0, item.frame.width, item.frame.height, RADIUS).fill({ color: 16777215 });
+		sync(container, item, context);
+	},
+	renderFar: (graphics, item, context) => {
+		drawFarPlate(graphics, item.frame, {
+			fill: context.palette.hover,
+			fillAlpha: .9
+		});
+	},
+	destroy: (container) => {
+		partsByContainer.get(container)?.root.destroy({ children: true });
+		partsByContainer.delete(container);
+	}
+};
+/** Helper kept for type narrowing in tests. */
+function isImageItem(item) {
+	return item.type === "image";
+}
+//#endregion
+export { imageCardRenderer, isImageItem };

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

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

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

@@ -0,0 +1,112 @@
+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/note-card-renderer.ts
+const RADIUS = 8;
+const PADDING = 12;
+const partsByContainer = /* @__PURE__ */ new WeakMap();
+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.body, parts, context.zoom);
+	const resizing = context.resizingIds.has(item.id);
+	const visualSig = [
+		width,
+		height,
+		selected,
+		hovered,
+		color.fill,
+		color.stroke,
+		context.palette.surface,
+		context.palette.muted,
+		context.palette.border
+	].join("|");
+	if (visualSig !== parts.visualSig) {
+		parts.visualSig = visualSig;
+		parts.background.clear();
+		parts.background.roundRect(0, 0, width, height, RADIUS).fill({
+			color: color.fill,
+			alpha: .16
+		}).roundRect(0, 0, width, height, RADIUS).fill({
+			color: context.palette.surface,
+			alpha: .6
+		}).rect(1, 1, width - 2, 4).fill({
+			color: color.stroke,
+			alpha: .95
+		});
+		parts.background.roundRect(0, 0, width, height, RADIUS).stroke({
+			color: selected ? color.stroke : hovered ? context.palette.muted : context.palette.border,
+			width: selected ? 2 : 1,
+			alpha: selected ? .95 : .8
+		});
+	}
+	const textSig = [item.text, color.label].join("|");
+	if (textSig !== parts.textSig) {
+		parts.textSig = textSig;
+		parts.body.text = item.text;
+		parts.body.style.fill = color.label;
+	}
+	syncTextWrapWidth(parts.body, parts, Math.max(1, width - PADDING * 2), resizing);
+	parts.body.position.set(PADDING, 16);
+}
+const noteCardRenderer = {
+	id: "note-card",
+	canRender: (item) => item.type === "note",
+	create: (item, context) => {
+		const root = new Container();
+		const background = new Graphics();
+		const resolution = textResolutionForZoom(context.zoom);
+		const body = new Text({
+			text: "",
+			style: {
+				fill: 16777215,
+				fontFamily: BOARD_FONT_STACK,
+				fontSize: 14,
+				fontWeight: "500",
+				wordWrap: true,
+				lineHeight: 20
+			},
+			resolution,
+			roundPixels: true
+		});
+		root.addChild(background, body);
+		partsByContainer.set(root, {
+			root,
+			background,
+			body,
+			visualSig: "",
+			textSig: "",
+			wrapWidth: 0,
+			resolution
+		});
+		if (item.type === "note") sync(root, item, context);
+		return root;
+	},
+	update: (container, item, context) => {
+		if (item.type === "note") sync(container, item, context);
+	},
+	renderFar: (graphics, item, context) => {
+		if (item.type !== "note") return;
+		const color = pickBoardColor(context.colors, item.color, context.colorScheme);
+		drawFarPlate(graphics, item.frame, {
+			fill: color.fill,
+			fillAlpha: .28,
+			accent: color.stroke,
+			accentAlpha: .95
+		});
+	},
+	destroy: (container) => {
+		partsByContainer.get(container)?.root.destroy({ children: true });
+		partsByContainer.delete(container);
+	}
+};
+//#endregion
+export { noteCardRenderer };

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

@@ -0,0 +1,7 @@
+import { BoardItem, BoardTextItem } from "../../../protocol/dist/board-document.js";
+import { BoardCardRenderer } from "./board-renderer-registry.js";
+//#region src/board/render/renderers/text-card-renderer.d.ts
+declare const textCardRenderer: BoardCardRenderer;
+declare function isTextItem(item: BoardItem): item is BoardTextItem;
+//#endregion
+export { isTextItem, textCardRenderer };

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

@@ -0,0 +1,94 @@
+import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
+import { TEXT_FONT_SIZE, boardTextLineHeight, clampBoardTextFontSize, measureBoardText } from "../../core/text-metrics.js";
+import { pickBoardColor } from "../../core/palette.js";
+import { syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
+import { drawFarPlate } from "./far-plate.js";
+import { positionShell } from "./base-card-renderer.js";
+import { Container, Text } from "pixi.js";
+//#region src/board/render/renderers/text-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 fontSize = clampBoardTextFontSize(item.fontSize);
+	const measured = measureBoardText(item.text, fontSize);
+	const previewScale = Math.max(1e-4, item.frame.width / Math.max(1e-4, measured.width));
+	parts.body.scale.set(previewScale);
+	parts.body.position.set(item.frame.width / 2, item.frame.height / 2);
+	syncTextResolution(parts.body, parts, context.zoom * Math.max(1, previewScale));
+	const color = pickBoardColor(context.colors, item.color || "neutral", context.colorScheme);
+	const ink = item.color === "neutral" || !item.color ? context.palette.text : color.stroke;
+	const contentSig = [
+		item.text,
+		item.color,
+		fontSize,
+		context.colorScheme,
+		context.colors.brand.stroke,
+		context.palette.text
+	].join("|");
+	if (contentSig === parts.contentSig) return;
+	parts.contentSig = contentSig;
+	if (parts.body.text !== item.text) parts.body.text = item.text || "";
+	parts.body.style.fill = ink;
+	parts.body.style.fontSize = fontSize;
+	parts.body.style.lineHeight = boardTextLineHeight(fontSize);
+}
+const textCardRenderer = {
+	id: "text-card",
+	canRender: (item) => item.type === "text",
+	create: (item, context) => {
+		const root = new Container();
+		const resolution = textResolutionForZoom(context.zoom);
+		const color = pickBoardColor(context.colors, item.type === "text" ? item.color || "neutral" : "neutral", context.colorScheme);
+		const body = new Text({
+			text: "",
+			style: {
+				fill: item.type === "text" && (item.color === "neutral" || !item.color) ? context.palette.text : color.stroke,
+				fontFamily: BOARD_FONT_STACK,
+				fontSize: TEXT_FONT_SIZE,
+				fontWeight: "500",
+				lineHeight: boardTextLineHeight(TEXT_FONT_SIZE),
+				wordWrap: false
+			},
+			resolution,
+			roundPixels: true
+		});
+		body.anchor.set(.5);
+		root.addChild(body);
+		partsByContainer.set(root, {
+			root,
+			body,
+			resolution,
+			contentSig: ""
+		});
+		if (item.type === "text") sync(root, item, context);
+		return root;
+	},
+	update: (container, item, context) => {
+		if (item.type === "text") sync(container, item, context);
+	},
+	/**
+	* Far LOD: a low-alpha ink bar. Body text is well under a pixel tall at these
+	* zooms, so a rasterised glyph texture would only ever resolve to a smudge —
+	* this approximates that smudge for free and skips the texture entirely.
+	*/
+	renderFar: (graphics, item, context) => {
+		if (item.type !== "text") return;
+		const color = pickBoardColor(context.colors, item.color || "neutral", context.colorScheme);
+		const ink = item.color === "neutral" || !item.color ? context.palette.text : color.stroke;
+		drawFarPlate(graphics, item.frame, {
+			fill: ink,
+			fillAlpha: .35
+		});
+	},
+	destroy: (container) => {
+		partsByContainer.get(container)?.root.destroy({ children: true });
+		partsByContainer.delete(container);
+	}
+};
+function isTextItem(item) {
+	return item.type === "text";
+}
+//#endregion
+export { isTextItem, textCardRenderer };

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

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