@neta-art/cohub 11.1.0 → 11.2.0

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

@@ -2,8 +2,9 @@ import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { pathPointAt, resolveSceneArrow } from "../../model/arrow-geometry.js";
 import { itemAlpha, itemColor } from "../palette.js";
 import { syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
-import { drawFarStroke } from "./far-plate.js";
 import { dashPattern, endAngle, traceArrowhead, tracePolyline, trimPolyline } from "../stroke.js";
+import { drawCardSurface } from "../surface.js";
+import { drawFarStroke } from "./far-plate.js";
 import { Container, Graphics, Text } from "pixi.js";
 //#region src/board/render/renderers/arrow-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
@@ -14,8 +15,6 @@ function sync(container, item, context) {
 	parts.root.rotation = 0;
 	parts.root.scale.set(1);
 	const { props, style } = item;
-	const selected = context.selectedIds.has(item.id);
-	const hovered = context.hoveredId === item.id;
 	parts.line.alpha = itemAlpha(context, style.stroke);
 	const color = itemColor(context, style.stroke, "brand");
 	const size = style.strokeWidth ?? 2.5;
@@ -24,8 +23,6 @@ function sync(container, item, context) {
 	const path = trimPolyline(resolved.path, style.trim);
 	const lineSig = [
 		path.map((point) => `${point.x},${point.y}`).join(";"),
-		selected,
-		hovered,
 		color,
 		size,
 		style.dash,
@@ -35,11 +32,11 @@ function sync(container, item, context) {
 	if (lineSig !== parts.lineSig) {
 		parts.lineSig = lineSig;
 		parts.line.clear();
-		const width = selected ? size + 1 : size;
+		const width = size;
 		const stroke = {
 			color,
 			width,
-			alpha: selected || hovered ? 1 : .92,
+			alpha: .92,
 			cap: "round",
 			join: "round"
 		};
@@ -63,22 +60,29 @@ function sync(container, item, context) {
 	}
 	const labelSig = [
 		props.label,
-		context.palette.text,
-		context.palette.bg,
-		props.fontSize
+		props.fontSize,
+		context.themeKey
 	].join("|");
 	if (labelSig !== parts.labelSig) {
 		parts.labelSig = labelSig;
 		parts.label.text = props.label;
 		parts.label.style.fill = context.palette.text;
 		parts.label.style.fontSize = props.fontSize;
-		const padX = props.fontSize * .4;
-		const padY = props.fontSize * .15;
+		const padX = props.fontSize * .5;
+		const padY = props.fontSize * .25;
 		const { width, height } = parts.label;
-		parts.backdrop.clear();
-		parts.backdrop.roundRect(-width / 2 - padX, -height / 2 - padY, width + padX * 2, height + padY * 2, props.fontSize * .3).fill({
-			color: context.palette.bg,
-			alpha: .92
+		const plate = {
+			x: -width / 2 - padX,
+			y: -height / 2 - padY,
+			width: width + padX * 2,
+			height: height + padY * 2
+		};
+		drawCardSurface(parts.backdrop.clear(), plate, {
+			...context.style,
+			radius: Math.min(context.style.radius, plate.height / 2)
+		}, {
+			fill: context.palette.surface,
+			border: context.palette.border
 		});
 	}
 	const visible = props.label.length > 0 && (style.trim === void 0 || style.trim >= .5);

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

@@ -1,5 +1,12 @@
 import { BoardCardRenderer } from "./board-renderer-registry.js";
 //#region src/board/render/renderers/audio-card-renderer.d.ts
+declare const AUDIO_PADDING = 14;
+declare const AUDIO_KEY_RADIUS = 16;
+declare function audioKeyCenter(width: number, height: number): {
+  x: number;
+  y: number;
+  radius: number;
+};
 declare const audioCardRenderer: BoardCardRenderer;
 //#endregion
-export { audioCardRenderer };
+export { AUDIO_KEY_RADIUS, AUDIO_PADDING, audioCardRenderer, audioKeyCenter };

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

@@ -1,70 +1,80 @@
-import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { getMediaResourceTitle } from "../../model/media.js";
+import { fitTextToWidth } from "../text-fit.js";
+import { boardCardDetailed, syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
+import { formatBoardDuration } from "../card-tag.js";
 import { drawAudioWaveform } from "../audio-waveform.js";
-import { syncTextResolution, syncTextWrapWidth, textResolutionForZoom } from "../text-resolution.js";
+import { cardElevation, drawCardSurface } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
+import { drawMediaPlayKey } from "./media-key.js";
 import { Container, Graphics, Text } from "pixi.js";
 //#region src/board/render/renderers/audio-card-renderer.ts
-const RADIUS = 4;
-const PLAY_RADIUS = 18;
+const AUDIO_PADDING = 14;
+const AUDIO_KEY_RADIUS = 16;
+const GAP = 12;
+const WAVE_HEIGHT = 16;
 const partsByContainer = /* @__PURE__ */ new WeakMap();
+function audioKeyCenter(width, height) {
+	const radius = Math.min(16, Math.max(8, height / 2 - 8), width / 4);
+	return {
+		x: 14 + radius,
+		y: height / 2,
+		radius
+	};
+}
 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 title = item.props.snapshot?.title ?? getMediaResourceTitle(item.props.src);
-	syncTextResolution(parts.label, parts, context.zoom);
-	if (parts.label.text !== title) parts.label.text = title;
-	syncTextWrapWidth(parts.label, parts, Math.max(1, width - 24), false);
-	parts.label.position.set(12, Math.max(8, height - parts.label.height - 8));
+	const durationMs = item.props.snapshot?.durationMs;
+	const detailed = boardCardDetailed(context.zoom);
+	syncTextResolution(parts.title, parts, context.zoom);
+	const elevation = cardElevation(context, item.id);
 	const sig = [
 		width,
 		height,
-		selected,
-		hovered,
 		title,
-		parts.label.height,
-		context.palette.surface,
-		context.palette.brand,
-		context.palette.border,
-		context.palette.muted,
-		context.palette.text
+		durationMs ?? "",
+		detailed,
+		elevation,
+		item.props.src,
+		item.props.snapshot?.mtimeMs ?? "",
+		context.themeKey
 	].join("|");
 	if (sig === parts.sig) return;
 	parts.sig = sig;
-	parts.plate.clear().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 ? .96 : .84
-	});
-	const labelBand = Math.min(height * .38, parts.label.height + 16);
-	const waveformInset = Math.min(24, width * .08);
-	parts.waveform.clear();
-	drawAudioWaveform(parts.waveform, `${item.props.src}:${item.props.snapshot?.mtimeMs ?? "unknown"}`, {
-		x: waveformInset,
-		y: 10,
-		width: Math.max(1, width - waveformInset * 2),
-		height: Math.max(8, height - labelBand - 16)
-	}, context.palette.brand);
-	const cx = width / 2;
-	const cy = Math.max(24, (height - labelBand) / 2);
-	parts.chrome.clear().circle(cx, cy, PLAY_RADIUS).fill({
-		color: selected ? context.palette.brand : context.palette.surface,
-		alpha: .92
-	});
-	const triangle = PLAY_RADIUS * .58;
-	parts.chrome.moveTo(cx - triangle * .35, cy - triangle * .62).lineTo(cx - triangle * .35, cy + triangle * .62).lineTo(cx + triangle * .72, cy).closePath().fill({
-		color: context.palette.text,
-		alpha: .96
+	drawCardSurface(parts.plate.clear(), {
+		x: 0,
+		y: 0,
+		width,
+		height
+	}, context.style, {
+		fill: context.palette.surface,
+		border: context.palette.border,
+		borderAlpha: .85,
+		elevation
 	});
-	parts.label.style.fill = context.palette.text;
+	const key = audioKeyCenter(width, height);
+	drawMediaPlayKey(parts.plate, key.x, key.y, key.radius, context, true);
+	const left = key.x + key.radius + GAP;
+	const room = width - 14 - left;
+	parts.title.visible = detailed && room > 24;
+	parts.wave.clear();
+	if (!parts.title.visible) return;
+	parts.title.style.fontFamily = context.style.font;
+	parts.title.style.fill = context.palette.text;
+	fitTextToWidth(parts.title, durationMs ? `${title} · ${formatBoardDuration(durationMs)}` : title, room);
+	const withWave = height >= 56;
+	const top = (height - (parts.title.height + (withWave ? 22 : 0))) / 2;
+	parts.title.position.set(left, top);
+	if (withWave) drawAudioWaveform(parts.wave, `${item.props.src}:${item.props.snapshot?.mtimeMs ?? "unknown"}`, {
+		x: left,
+		y: top + parts.title.height + 6,
+		width: room,
+		height: WAVE_HEIGHT
+	}, context.palette.muted, .45, context.style.corner === "pixel");
 }
 const audioCardRenderer = {
 	id: "audio-card",
@@ -72,30 +82,24 @@ const audioCardRenderer = {
 	create: (item, context) => {
 		const root = new Container();
 		const plate = new Graphics();
-		const waveform = new Graphics();
-		const chrome = new Graphics();
+		const wave = new Graphics();
 		const resolution = textResolutionForZoom(context.zoom);
-		const label = new Text({
+		const title = new Text({
 			text: "",
 			style: {
-				fill: context.palette.text,
-				fontFamily: BOARD_FONT_STACK,
-				fontSize: 12,
-				fontWeight: "500",
-				wordWrap: true
+				fontSize: 13,
+				fontWeight: "600"
 			},
 			resolution,
 			roundPixels: true
 		});
-		root.addChild(plate, waveform, chrome, label);
+		root.addChild(plate, wave, title);
 		partsByContainer.set(root, {
 			root,
 			plate,
-			waveform,
-			chrome,
-			label,
+			wave,
+			title,
 			sig: "",
-			wrapWidth: 0,
 			resolution
 		});
 		if (item.type === "audio") sync(root, item, context);
@@ -118,4 +122,4 @@ const audioCardRenderer = {
 	}
 };
 //#endregion
-export { audioCardRenderer };
+export { AUDIO_KEY_RADIUS, AUDIO_PADDING, audioCardRenderer, audioKeyCenter };

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

@@ -1,35 +1,10 @@
 import { BoardFrame } from "../../../protocol/dist/board-layout.js";
 import "../../../protocol/dist/index.js";
-import { BoardRenderPalette } from "./board-renderer-registry.js";
 import { Container, Text } from "pixi.js";
 //#region src/board/render/renderers/base-card-renderer.d.ts
-declare const CARD_RADIUS = 10;
-declare const CARD_PADDING = 12;
-declare const FOOTER_HEIGHT = 34;
 declare function createLabel(text: string, style: Record<string, unknown>): Text;
-type CardShellState = {
-  width: number;
-  height: number;
-  selected: boolean;
-  hovered: boolean;
-  accent: number;
-  title: string;
-};
-type CardShell = {
-  root: Container;
-  content: Container;
-  contentRect: () => {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-  };
-  update: (state: CardShellState, palette: BoardRenderPalette, footer: boolean) => void;
-  destroy: () => void;
-};
-declare function createCardShell(): CardShell;
 declare function positionShell(root: Container, item: {
   frame: BoardFrame;
 }): void;
 //#endregion
-export { CARD_PADDING, CARD_RADIUS, CardShell, CardShellState, FOOTER_HEIGHT, createCardShell, createLabel, positionShell };
+export { createLabel, positionShell };

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