@neta-art/cohub 3.1.0 → 4.0.0

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

@@ -0,0 +1,153 @@
+import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
+import { getBoardResolution } from "../text-resolution.js";
+import { Container, DOMAdapter, Graphics, 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
+};
+function emphasisColor(item, palette) {
+	if (item.style?.accentColor) {
+		const normalized = parseCssColor(item.style.accentColor);
+		if (normalized != null) return normalized;
+	}
+	switch (item.style?.emphasis) {
+		case "rare": return palette.rare;
+		case "epic": return palette.epic;
+		case "legendary": return palette.legendary;
+		default: return palette.brand;
+	}
+}
+/**
+* Normalise any CSS color to a number by letting a 2D context parse it.
+*
+* Goes through `DOMAdapter` rather than `document` so a headless export resolves
+* accent colors exactly as the browser does; without it, custom accents would
+* silently fall back to the emphasis palette only when exporting.
+*/
+function parseCssColor(value) {
+	try {
+		const context = DOMAdapter.get().createCanvas(1, 1).getContext("2d");
+		if (!context) return null;
+		context.fillStyle = value;
+		const match = /^#([0-9a-f]{6})$/i.exec(String(context.fillStyle));
+		return match?.[1] ? Number.parseInt(match[1], 16) : null;
+	} catch {
+		return null;
+	}
+}
+function createLabel(text, style) {
+	return new Text({
+		...TEXT_OPTIONS,
+		text,
+		style
+	});
+}
+/**
+* Shared card chrome: rounded background, selection/hover border, optional
+* footer with title, and a masked content region. Tracks the last rendered
+* state so unchanged attributes are not redrawn.
+*/
+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;
+		}
+	}
+	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
+	};
+}
+/**
+* Position a shell root at an item frame. The container pivots around its
+* center so that Pixi's rotation matches the geometry model (which treats
+* `frame.rotation` as a rotation about the frame center).
+*/
+function positionShell(root, item) {
+	const { x, y, width, height, rotation } = item.frame;
+	root.pivot.set(width / 2, height / 2);
+	root.x = x + width / 2;
+	root.y = y + height / 2;
+	root.rotation = (rotation || 0) * Math.PI / 180;
+}
+//#endregion
+export { CARD_PADDING, CARD_RADIUS, FOOTER_HEIGHT, createCardShell, createLabel, emphasisColor, positionShell };

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

@@ -0,0 +1,85 @@
+import { BoardDocument, BoardItem } from "../../../protocol/dist/board-document.js";
+import { BoardShapeColors } from "../../core/palette.js";
+import { Container, Graphics, Texture } from "pixi.js";
+//#region src/board/render/renderers/board-renderer-registry.d.ts
+type BoardRenderPalette = {
+  bg: number;
+  surface: number;
+  hover: number;
+  border: number;
+  brand: number;
+  text: number;
+  muted: number;
+  rare: number;
+  epic: number;
+  legendary: number;
+};
+type BoardRenderContext = {
+  document: BoardDocument;
+  /**
+   * O(1) item lookup by id. Renderers that need to resolve references (arrow
+   * bindings) must use this rather than scanning `document.items`, which would
+   * be O(items) per card per frame.
+   */
+  getItem: (id: string) => BoardItem | null;
+  selectedIds: Set<string>;
+  hoveredId: string | null;
+  /** Nodes currently receiving a live resize preview. */
+  resizingIds: Set<string>;
+  palette: BoardRenderPalette;
+  /**
+   * Live shape colors resolved from CSS tokens (theme + space theme.css).
+   * Prefer this over hard-coded light/dark tables at render time.
+   */
+  colors: BoardShapeColors;
+  /** Resolved color mode, for fallback mapping when colors are unavailable. */
+  colorScheme: "dark" | "light";
+  /** Current camera zoom — used for text re-rasterisation buckets. */
+  zoom: number;
+  /** Stable preview texture key for an item, or null when it has no preview. */
+  assetKey: (item: BoardItem) => string | null;
+  /** Currently loaded texture for a key (null while loading). */
+  getTexture: (key: string) => Texture | null;
+  /** Whether the preview for a key failed to load (for a failure placeholder). */
+  hasError: (key: string) => boolean;
+  /**
+   * Whether a referenced workspace file could not be read, and why. Transient,
+   * client-local state — never part of the document — so one client's outage is
+   * not shown to everyone.
+   */
+  fileState: (path: string) => "ok" | "missing" | "unavailable";
+  /** Reference-counted texture acquisition and release. */
+  acquireTexture: (key: string) => void;
+  releaseTexture: (key: string) => void;
+};
+type BoardCardRenderer = {
+  id: string;
+  canRender: (item: BoardItem, context: BoardRenderContext) => boolean;
+  create: (item: BoardItem, context: BoardRenderContext) => Container;
+  /** Efficiently sync an existing container to a (possibly changed) item. */
+  update: (container: Container, item: BoardItem, context: BoardRenderContext) => void;
+  /**
+   * Draw the item as flat batched geometry into a shared `Graphics`, for the
+   * far LOD used when too many cards are on screen to afford a container each.
+   *
+   * Implementing this opts the shape into the far layer: past the scene's
+   * visible-card threshold it is drawn here instead of being materialised, so
+   * cost stops scaling with node count. Omit it for shapes whose whole point is
+   * their vector detail (strokes, arrows, frames) — those keep real containers.
+   *
+   * Must draw in world space and must not allocate per call beyond the path
+   * itself; this runs once per far-capable item on every far-layer rebuild.
+   */
+  renderFar?: (graphics: Graphics, item: BoardItem, context: BoardRenderContext) => void;
+  destroy?: (container: Container, context: BoardRenderContext) => void;
+};
+/**
+ * Every registered renderer, for invariants that must hold across all of them —
+ * notably that each can draw itself at far LOD, which is what keeps the far
+ * layer's z-order correct (see board-scene).
+ */
+declare function boardCardRenderersForTest(): readonly BoardCardRenderer[];
+declare function getBoardCardRenderer(item: BoardItem, context: BoardRenderContext): BoardCardRenderer;
+declare function registerBoardCardRenderer(renderer: BoardCardRenderer): void;
+//#endregion
+export { BoardCardRenderer, BoardRenderContext, BoardRenderPalette, boardCardRenderersForTest, getBoardCardRenderer, registerBoardCardRenderer };

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

@@ -0,0 +1,41 @@
+import { ensureBoardTextMeasurement } from "../text-measurement.js";
+import { arrowCardRenderer } from "./arrow-card-renderer.js";
+import { drawCardRenderer } from "./draw-card-renderer.js";
+import { fileCardRenderer } from "./file-card-renderer.js";
+import { frameCardRenderer } from "./frame-card-renderer.js";
+import { geoCardRenderer } from "./geo-card-renderer.js";
+import { imageCardRenderer } from "./image-card-renderer.js";
+import { textCardRenderer } from "./text-card-renderer.js";
+import { unknownCardRenderer } from "./unknown-card-renderer.js";
+import { videoCardRenderer } from "./video-card-renderer.js";
+//#region src/board/render/renderers/board-renderer-registry.ts
+const boardCardRenderers = [
+	textCardRenderer,
+	imageCardRenderer,
+	videoCardRenderer,
+	fileCardRenderer,
+	geoCardRenderer,
+	drawCardRenderer,
+	arrowCardRenderer,
+	frameCardRenderer,
+	unknownCardRenderer
+];
+/**
+* Every registered renderer, for invariants that must hold across all of them —
+* notably that each can draw itself at far LOD, which is what keeps the far
+* layer's z-order correct (see board-scene).
+*/
+function boardCardRenderersForTest() {
+	return boardCardRenderers;
+}
+function getBoardCardRenderer(item, context) {
+	ensureBoardTextMeasurement();
+	return boardCardRenderers.find((renderer) => renderer.canRender(item, context)) ?? unknownCardRenderer;
+}
+function registerBoardCardRenderer(renderer) {
+	const existingIndex = boardCardRenderers.findIndex((candidate) => candidate.id === renderer.id);
+	if (existingIndex >= 0) boardCardRenderers.splice(existingIndex, 1, renderer);
+	else boardCardRenderers.unshift(renderer);
+}
+//#endregion
+export { boardCardRenderersForTest, getBoardCardRenderer, registerBoardCardRenderer };

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

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

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

@@ -0,0 +1,82 @@
+import { buildStrokeOutline, computeDrawBounds } from "../../core/draw-geometry.js";
+import { pickBoardColor } from "../../core/palette.js";
+import { drawFarStroke } from "./far-plate.js";
+import { positionShell } from "./base-card-renderer.js";
+import { Container, Graphics } from "pixi.js";
+//#region src/board/render/renderers/draw-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 selected = context.selectedIds.has(item.id);
+	const hovered = context.hoveredId === item.id;
+	const color = pickBoardColor(context.colors, item.color, context.colorScheme);
+	const sig = [
+		item.points.length,
+		item.size,
+		item.color,
+		selected,
+		hovered,
+		context.colorScheme,
+		color.stroke
+	].join("|");
+	if (sig !== parts.sig || item.points !== parts.points) {
+		parts.sig = sig;
+		parts.points = item.points;
+		parts.baseWidth = computeDrawBounds(item.points, item.size).width;
+		parts.stroke.clear();
+		const outline = buildStrokeOutline(item.points, item.size);
+		const origin = outline[0];
+		if (origin && outline.length >= 3) {
+			parts.stroke.moveTo(origin.x, origin.y);
+			for (let i = 1; i < outline.length; i += 1) {
+				const point = outline[i];
+				if (point) parts.stroke.lineTo(point.x, point.y);
+			}
+			parts.stroke.closePath();
+			parts.stroke.fill({
+				color: color.stroke,
+				alpha: selected || hovered ? 1 : .92
+			});
+		}
+	}
+	const previewScale = item.frame.width / Math.max(1e-4, parts.baseWidth);
+	parts.stroke.scale.set(Number.isFinite(previewScale) ? previewScale : 1);
+}
+const drawCardRenderer = {
+	id: "draw-card",
+	canRender: (item) => item.type === "draw",
+	create: (item, context) => {
+		const root = new Container();
+		const stroke = new Graphics();
+		root.addChild(stroke);
+		partsByContainer.set(root, {
+			root,
+			stroke,
+			sig: "",
+			points: null,
+			baseWidth: 0
+		});
+		if (item.type === "draw") sync(root, item, context);
+		return root;
+	},
+	update: (container, item, context) => {
+		if (item.type === "draw") sync(container, item, context);
+	},
+	renderFar: (graphics, item, context) => {
+		if (item.type !== "draw") return;
+		const color = pickBoardColor(context.colors, item.color, context.colorScheme);
+		drawFarStroke(graphics, item.points, {
+			color: color.stroke,
+			width: item.size,
+			alpha: .92
+		});
+	},
+	destroy: (container) => {
+		partsByContainer.get(container)?.root.destroy({ children: true });
+		partsByContainer.delete(container);
+	}
+};
+//#endregion
+export { drawCardRenderer };

package/dist/board/render/renderers/far-plate.d.ts

@@ -0,0 +1,39 @@
+import { BoardFrame } from "../../../protocol/dist/board-document.js";
+import { Graphics } from "pixi.js";
+//#region src/board/render/renderers/far-plate.d.ts
+type FarPlateStyle = {
+  /** Plate body fill. */
+  fill: number;
+  fillAlpha?: number;
+  /** Optional accent band along the top edge, identifying the content kind. */
+  accent?: number;
+  accentAlpha?: number;
+};
+/**
+ * Draw one card as a far-LOD plate: a filled body plus an optional top accent
+ * band. Selection and hover are intentionally not drawn here — the interaction
+ * overlay already renders selection in world space, above this layer.
+ */
+declare function drawFarPlate(graphics: Graphics, frame: BoardFrame, style: FarPlateStyle): void;
+/**
+ * Draw one card as a far-LOD polyline.
+ *
+ * The counterpart to `drawFarPlate` for shapes whose meaning is a path rather than
+ * a region — strokes and arrows. It stays in the shared `Graphics`, so these keep
+ * their place in the batch and therefore in document order: an unbatched shape
+ * would be a live container, drawn above every plate no matter where the document
+ * puts it.
+ *
+ * Points are decimated to a bound, because a freehand stroke can hold thousands of
+ * samples that are sub-pixel apart at this zoom.
+ */
+declare function drawFarStroke(graphics: Graphics, points: ReadonlyArray<{
+  x: number;
+  y: number;
+}>, style: {
+  color: number;
+  width: number;
+  alpha?: number;
+}): void;
+//#endregion
+export { FarPlateStyle, drawFarPlate, drawFarStroke };

package/dist/board/render/renderers/far-plate.js

@@ -0,0 +1,92 @@
+import { degToRad } from "../../geometry.js";
+//#region src/board/render/renderers/far-plate.ts
+/** Upper bound on points kept when a stroke is drawn at far LOD. */
+const FAR_STROKE_MAX_POINTS = 24;
+/** Accent band height as a fraction of the plate, clamped to sane world units. */
+const ACCENT_RATIO = .14;
+const ACCENT_MIN = 2;
+const ACCENT_MAX = 10;
+/**
+* Trace a frame's rectangle, honouring rotation. Unrotated frames take the
+* fast `rect` path; rotated ones emit four explicit corners (still one path,
+* no arcs) so the far layer never needs a per-card transform.
+*/
+function traceFrame(graphics, frame, inset = 0, heightOverride) {
+	const x = frame.x + inset;
+	const y = frame.y + inset;
+	const width = Math.max(0, frame.width - inset * 2);
+	const height = Math.max(0, (heightOverride ?? frame.height) - inset * 2);
+	if (!frame.rotation) {
+		graphics.rect(x, y, width, height);
+		return;
+	}
+	const cx = frame.x + frame.width / 2;
+	const cy = frame.y + frame.height / 2;
+	const angle = degToRad(frame.rotation);
+	const cos = Math.cos(angle);
+	const sin = Math.sin(angle);
+	const corner = (px, py) => {
+		const dx = px - cx;
+		const dy = py - cy;
+		return {
+			x: cx + dx * cos - dy * sin,
+			y: cy + dx * sin + dy * cos
+		};
+	};
+	const a = corner(x, y);
+	const b = corner(x + width, y);
+	const c = corner(x + width, y + height);
+	const d = corner(x, y + height);
+	graphics.moveTo(a.x, a.y).lineTo(b.x, b.y).lineTo(c.x, c.y).lineTo(d.x, d.y).closePath();
+}
+/**
+* Draw one card as a far-LOD plate: a filled body plus an optional top accent
+* band. Selection and hover are intentionally not drawn here — the interaction
+* overlay already renders selection in world space, above this layer.
+*/
+function drawFarPlate(graphics, frame, style) {
+	if (frame.width <= 0 || frame.height <= 0) return;
+	traceFrame(graphics, frame);
+	graphics.fill({
+		color: style.fill,
+		alpha: style.fillAlpha ?? 1
+	});
+	if (style.accent === void 0) return;
+	traceFrame(graphics, frame, 0, Math.min(ACCENT_MAX, Math.max(ACCENT_MIN, frame.height * ACCENT_RATIO)));
+	graphics.fill({
+		color: style.accent,
+		alpha: style.accentAlpha ?? .9
+	});
+}
+/**
+* Draw one card as a far-LOD polyline.
+*
+* The counterpart to `drawFarPlate` for shapes whose meaning is a path rather than
+* a region — strokes and arrows. It stays in the shared `Graphics`, so these keep
+* their place in the batch and therefore in document order: an unbatched shape
+* would be a live container, drawn above every plate no matter where the document
+* puts it.
+*
+* Points are decimated to a bound, because a freehand stroke can hold thousands of
+* samples that are sub-pixel apart at this zoom.
+*/
+function drawFarStroke(graphics, points, style) {
+	if (points.length < 2) return;
+	const step = Math.max(1, Math.ceil(points.length / FAR_STROKE_MAX_POINTS));
+	const first = points[0];
+	if (!first) return;
+	graphics.moveTo(first.x, first.y);
+	for (let i = step; i < points.length; i += step) {
+		const point = points[i];
+		if (point) graphics.lineTo(point.x, point.y);
+	}
+	const last = points[points.length - 1];
+	if (last) graphics.lineTo(last.x, last.y);
+	graphics.stroke({
+		color: style.color,
+		width: style.width,
+		alpha: style.alpha ?? .9
+	});
+}
+//#endregion
+export { drawFarPlate, drawFarStroke };

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

@@ -0,0 +1,40 @@
+import { BoardFileItem, BoardItem } from "../../../protocol/dist/board-document.js";
+import { BoardCardRenderer } from "./board-renderer-registry.js";
+import { Text } from "pixi.js";
+//#region src/board/render/renderers/file-card-renderer.d.ts
+/**
+ * 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.
+ */
+declare function ellipsizeWrappedLines(lines: string[], maxLines: number): string;
+/**
+ * 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.
+ */
+declare function fitLineWithEllipsis(line: string, wrapWidth: number, measureWidth: (value: string) => number): string;
+/**
+ * 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.
+ */
+declare function fitTextToLines(text: Text, value: string, maxLines: number, wrapWidth: number): void;
+/** Scale an image into a fixed cover band without cropping or distortion. */
+declare function containCoverRect(width: number, height: number, imageWidth: number, imageHeight: number): {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+declare const fileCardRenderer: BoardCardRenderer;
+/** Helper kept for type narrowing in tests. */
+declare function isFileItem(item: BoardItem): item is BoardFileItem;
+//#endregion
+export { containCoverRect, ellipsizeWrappedLines, fileCardRenderer, fitLineWithEllipsis, fitTextToLines, isFileItem };