@neta-art/cohub 11.1.0 → 11.3.0

package/dist/board/render/card-tag.js

@@ -0,0 +1,205 @@
+import { fitTextToWidth } from "./text-fit.js";
+import { syncTextResolution, textResolutionForZoom } from "./text-resolution.js";
+import { Container, Graphics, Text } from "pixi.js";
+//#region src/board/render/card-tag.ts
+const CARD_TAG_SIZE = 11;
+const ICON = 12;
+const GAP = 5;
+const MAX_GROWTH = 1.25;
+const MIN_READABLE = 7;
+const SECOND = 1e3;
+function formatBoardDuration(ms) {
+	const total = Math.max(0, Math.floor(ms / SECOND));
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor(total % 3600 / 60);
+	const seconds = String(total % 60).padStart(2, "0");
+	return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${seconds}` : `${minutes}:${seconds}`;
+}
+const PIXEL_GLYPHS = {
+	image: [
+		"######",
+		"#....#",
+		"#.#..#",
+		"#.##.#",
+		"######",
+		"......"
+	],
+	video: [
+		"######",
+		"#.#..#",
+		"#.##.#",
+		"#.#..#",
+		"######",
+		"......"
+	],
+	audio: [
+		"...#..",
+		"...##.",
+		"...#.#",
+		"...#..",
+		".###..",
+		".###.."
+	],
+	file: [
+		"####..",
+		"#..##.",
+		"#...##",
+		"#....#",
+		"#....#",
+		"######"
+	],
+	task: [
+		"..#...",
+		".###..",
+		"#####.",
+		".###..",
+		"..#...",
+		"......"
+	]
+};
+function drawLineGlyph(graphics, glyph, color) {
+	const line = {
+		color,
+		width: 1.25,
+		alpha: 1,
+		cap: "round",
+		join: "round"
+	};
+	switch (glyph) {
+		case "image":
+			graphics.roundRect(1, 2, 10, 8, 1.5).stroke(line);
+			graphics.moveTo(2.5, 9).lineTo(5, 6).lineTo(7, 8).lineTo(8.5, 6.5).lineTo(10, 8).stroke(line);
+			return;
+		case "video":
+			graphics.roundRect(1, 2.5, 10, 7, 1.5).stroke(line);
+			graphics.poly([
+				5,
+				4.5,
+				5,
+				7.5,
+				7.5,
+				6
+			]).fill({ color });
+			return;
+		case "audio":
+			for (const [x, height] of [
+				[2.5, 3],
+				[5, 7],
+				[7.5, 9],
+				[10, 5]
+			]) graphics.moveTo(x, 6 - height / 2).lineTo(x, 6 + height / 2);
+			graphics.stroke(line);
+			return;
+		case "file":
+			graphics.poly([
+				2.5,
+				1,
+				7.5,
+				1,
+				9.5,
+				3,
+				9.5,
+				11,
+				2.5,
+				11
+			]).stroke(line);
+			graphics.moveTo(7.5, 1).lineTo(7.5, 3).lineTo(9.5, 3).stroke(line);
+			return;
+		case "task":
+			graphics.poly([
+				6,
+				1,
+				7.3,
+				4.7,
+				11,
+				6,
+				7.3,
+				7.3,
+				6,
+				11,
+				4.7,
+				7.3,
+				1,
+				6,
+				4.7,
+				4.7
+			]).fill({ color });
+			return;
+	}
+}
+function drawCardGlyph(graphics, glyph, color, pixel) {
+	if (!pixel) {
+		drawLineGlyph(graphics, glyph, color);
+		return;
+	}
+	PIXEL_GLYPHS[glyph].forEach((row, y) => {
+		for (let x = 0; x < row.length; x += 1) if (row[x] === "#") graphics.rect(x * 2, y * 2, 2, 2);
+	});
+	graphics.fill({ color });
+}
+function createCardTag() {
+	const root = new Container({ label: "card-tag" });
+	const icon = new Graphics();
+	root.addChild(icon);
+	root.visible = false;
+	return {
+		root,
+		icon,
+		text: null,
+		sig: "",
+		resolution: 0,
+		width: 0
+	};
+}
+function zoomCardTag(tag, zoom) {
+	if (!tag.text || !tag.sig) return;
+	const scale = Math.min(MAX_GROWTH, Math.max(1, 1 / Math.max(zoom, .01)));
+	const span = 17 + tag.text.width;
+	tag.root.scale.set(scale);
+	tag.root.position.set(0, -18 * scale);
+	tag.root.visible = 11 * scale * zoom >= MIN_READABLE && span * scale <= tag.width + .5;
+}
+function syncCardTag(tag, input, context) {
+	tag.width = input.width;
+	if (!input.text || input.width <= 24) {
+		tag.sig = "";
+		tag.root.visible = false;
+		return;
+	}
+	if (!tag.text) {
+		tag.resolution = textResolutionForZoom(context.zoom);
+		tag.text = new Text({
+			text: "",
+			style: {
+				fontFamily: context.style.font,
+				fontSize: 11,
+				fontWeight: "500"
+			},
+			resolution: tag.resolution,
+			roundPixels: true
+		});
+		tag.root.addChild(tag.text);
+	}
+	syncTextResolution(tag.text, tag, context.zoom);
+	const sig = [
+		input.glyph,
+		input.text,
+		input.width,
+		context.themeKey
+	].join("|");
+	if (sig === tag.sig) {
+		zoomCardTag(tag, context.zoom);
+		return;
+	}
+	tag.sig = sig;
+	const color = context.palette.muted;
+	const pixel = context.style.icons === "pixel";
+	drawCardGlyph(tag.icon.clear(), input.glyph, color, pixel);
+	tag.text.style.fill = color;
+	tag.text.style.fontFamily = context.style.font;
+	fitTextToWidth(tag.text, input.text, Math.max(1, input.width - ICON - GAP));
+	tag.text.position.set(17, (ICON - tag.text.height) / 2);
+	zoomCardTag(tag, context.zoom);
+}
+//#endregion
+export { CARD_TAG_SIZE, createCardTag, drawCardGlyph, formatBoardDuration, syncCardTag, zoomCardTag };

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

@@ -1,17 +1,20 @@
+import { BoardRenderStyle, BoardSelectionStyle, BoardShadowStyle, defaultBoardRenderStyle, resolveBoardRenderStyle } from "./style.js";
 import { BoardCardRenderer, BoardCardRendererResolver, BoardRenderContext, BoardRenderLabels, BoardRenderPalette, BoardScriptHost, DEFAULT_BOARD_RENDER_LABELS, createBoardCardRendererResolver, getBoardCardRenderer } from "./renderers/board-renderer-registry.js";
 import { createBoardRenderSampler } from "./sampling.js";
 import { BoardRenderDiagnostic, inspectBoardScene, measureBoardText } from "./diagnostics.js";
 import { BoardBackgroundContext, createBoardBackground, updateBoardBackground } from "./board-background.js";
+import { CARD_TAG_SIZE, CardGlyph, CardTag, createCardTag, drawCardGlyph, formatBoardDuration, syncCardTag, zoomCardTag } from "./card-tag.js";
 import { ClipGroup, clippingAncestor, isClippingFrame, syncClipGroup, traceFrameOutline } from "./clip.js";
 import { BoardCssPaint, parseBoardCssColor, parseBoardCssPaint } from "./css-color.js";
-import { BoardMediaAction, boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible } from "./media-interaction.js";
+import { BoardMediaAction, boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter } from "./media-interaction.js";
 import { defaultBoardPalette, itemAlpha, itemColor } from "./palette.js";
 import { BoardScriptHostOptions, BrowserBoardScriptHost, createBoardScriptHost } from "./script-host.js";
 import { prepareBrowserBoardScripts } from "./script-export.js";
 import { dashPattern, endAngle, roundRectPoints, traceArrowhead, tracePolyline, trimPolyline } from "./stroke.js";
+import { CardElevation, CardRect, CardSurface, PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, isBoardCard, traceCardOutline, tracePixelRect } from "./surface.js";
 import { BOARD_EFFECT_MAX_PARTICLES } from "./renderers/effect-card-renderer.js";
-import { TASK_CARD_FULL_DETAIL_ZOOM } from "./renderers/task-card-renderer.js";
+import { ellipsizeWrappedLines, fitLineWithEllipsis, fitTextToLines, fitTextToWidth } from "./text-fit.js";
 import { BOARD_FONT_STACKS, ensureBoardTextMeasurement, installBoardTextMeasurement } from "./text-measurement.js";
-import { getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket } from "./text-resolution.js";
+import { boardCardDetailed, getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket } from "./text-resolution.js";
 import { VIDEO_THUMBNAIL_MAX_EDGE, VideoNaturalSize, loadVideoThumbnailTexture, videoTextureNaturalSize, videoThumbnailSize } from "./video-thumbnail.js";
-export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, BoardBackgroundContext, BoardCardRenderer, BoardCardRendererResolver, BoardCssPaint, BoardMediaAction, BoardRenderContext, BoardRenderDiagnostic, BoardRenderLabels, BoardRenderPalette, BoardScriptHost, BoardScriptHostOptions, BrowserBoardScriptHost, ClipGroup, DEFAULT_BOARD_RENDER_LABELS, TASK_CARD_FULL_DETAIL_ZOOM, VIDEO_THUMBNAIL_MAX_EDGE, VideoNaturalSize, boardMediaActionAt, clippingAncestor, createBoardBackground, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, dashPattern, defaultBoardPalette, endAngle, ensureBoardTextMeasurement, getBoardCardRenderer, getBoardResolution, inspectBoardScene, installBoardTextMeasurement, isClippingFrame, itemAlpha, itemColor, loadVideoThumbnailTexture, measureBoardText, mediaPlayBadgeHit, mediaPlayBadgeVisible, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, roundRectPoints, syncClipGroup, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket, traceArrowhead, traceFrameOutline, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize };
+export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, BoardBackgroundContext, BoardCardRenderer, BoardCardRendererResolver, BoardCssPaint, BoardMediaAction, BoardRenderContext, BoardRenderDiagnostic, BoardRenderLabels, BoardRenderPalette, BoardRenderStyle, BoardScriptHost, BoardScriptHostOptions, BoardSelectionStyle, BoardShadowStyle, BrowserBoardScriptHost, CARD_TAG_SIZE, CardElevation, CardGlyph, CardRect, CardSurface, CardTag, ClipGroup, DEFAULT_BOARD_RENDER_LABELS, PIXEL_STEP, VIDEO_THUMBNAIL_MAX_EDGE, VideoNaturalSize, boardCardDetailed, boardMediaActionAt, cardElevation, cardOutlinePoints, cardShadow, clippingAncestor, containRect, createBoardBackground, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, createCardTag, dashPattern, defaultBoardPalette, defaultBoardRenderStyle, drawCardGlyph, drawCardShadow, drawCardSurface, ellipsizeWrappedLines, endAngle, ensureBoardTextMeasurement, fitLineWithEllipsis, fitTextToLines, fitTextToWidth, formatBoardDuration, getBoardCardRenderer, getBoardResolution, inspectBoardScene, installBoardTextMeasurement, isBoardCard, isClippingFrame, itemAlpha, itemColor, loadVideoThumbnailTexture, measureBoardText, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, resolveBoardRenderStyle, roundRectPoints, syncCardTag, syncClipGroup, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket, traceArrowhead, traceCardOutline, traceFrameOutline, tracePixelRect, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize, zoomCardTag };

package/dist/board/render/index.js

@@ -4,14 +4,17 @@ import { createBoardRenderSampler } from "./sampling.js";
 import { BOARD_FONT_STACKS, ensureBoardTextMeasurement, installBoardTextMeasurement } from "./text-measurement.js";
 import { inspectBoardScene, measureBoardText } from "./diagnostics.js";
 import { createBoardBackground, updateBoardBackground } from "./board-background.js";
+import { ellipsizeWrappedLines, fitLineWithEllipsis, fitTextToLines, fitTextToWidth } from "./text-fit.js";
+import { boardCardDetailed, getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket } from "./text-resolution.js";
+import { CARD_TAG_SIZE, createCardTag, drawCardGlyph, formatBoardDuration, syncCardTag, zoomCardTag } from "./card-tag.js";
 import { clippingAncestor, isClippingFrame, syncClipGroup, traceFrameOutline } from "./clip.js";
-import { getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket } from "./text-resolution.js";
-import { TASK_CARD_FULL_DETAIL_ZOOM } from "./renderers/task-card-renderer.js";
-import { boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible } from "./media-interaction.js";
 import { dashPattern, endAngle, roundRectPoints, traceArrowhead, tracePolyline, trimPolyline } from "./stroke.js";
+import { PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, isBoardCard, traceCardOutline, tracePixelRect } from "./surface.js";
+import { boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter } from "./media-interaction.js";
 import { BOARD_EFFECT_MAX_PARTICLES } from "./renderers/effect-card-renderer.js";
 import { DEFAULT_BOARD_RENDER_LABELS, createBoardCardRendererResolver, getBoardCardRenderer } from "./renderers/board-renderer-registry.js";
 import { createBoardScriptHost } from "./script-host.js";
 import { prepareBrowserBoardScripts } from "./script-export.js";
+import { defaultBoardRenderStyle, resolveBoardRenderStyle } from "./style.js";
 import { VIDEO_THUMBNAIL_MAX_EDGE, loadVideoThumbnailTexture, videoTextureNaturalSize, videoThumbnailSize } from "./video-thumbnail.js";
-export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, DEFAULT_BOARD_RENDER_LABELS, TASK_CARD_FULL_DETAIL_ZOOM, VIDEO_THUMBNAIL_MAX_EDGE, boardMediaActionAt, clippingAncestor, createBoardBackground, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, dashPattern, defaultBoardPalette, endAngle, ensureBoardTextMeasurement, getBoardCardRenderer, getBoardResolution, inspectBoardScene, installBoardTextMeasurement, isClippingFrame, itemAlpha, itemColor, loadVideoThumbnailTexture, measureBoardText, mediaPlayBadgeHit, mediaPlayBadgeVisible, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, roundRectPoints, syncClipGroup, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket, traceArrowhead, traceFrameOutline, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize };
+export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, CARD_TAG_SIZE, DEFAULT_BOARD_RENDER_LABELS, PIXEL_STEP, VIDEO_THUMBNAIL_MAX_EDGE, boardCardDetailed, boardMediaActionAt, cardElevation, cardOutlinePoints, cardShadow, clippingAncestor, containRect, createBoardBackground, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, createCardTag, dashPattern, defaultBoardPalette, defaultBoardRenderStyle, drawCardGlyph, drawCardShadow, drawCardSurface, ellipsizeWrappedLines, endAngle, ensureBoardTextMeasurement, fitLineWithEllipsis, fitTextToLines, fitTextToWidth, formatBoardDuration, getBoardCardRenderer, getBoardResolution, inspectBoardScene, installBoardTextMeasurement, isBoardCard, isClippingFrame, itemAlpha, itemColor, loadVideoThumbnailTexture, measureBoardText, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, resolveBoardRenderStyle, roundRectPoints, syncCardTag, syncClipGroup, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket, traceArrowhead, traceCardOutline, traceFrameOutline, tracePixelRect, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize, zoomCardTag };

package/dist/board/render/media-interaction.d.ts

@@ -9,10 +9,11 @@ declare function mediaPlayBadgeVisible(item: BoardSceneItem, zoom: number, optio
   materialized: boolean;
   hasVideoPreview: boolean;
 }): boolean;
+declare function mediaPlayKeyCenter(item: BoardSceneItem): WorldPoint;
 declare function mediaPlayBadgeHit(item: BoardSceneItem, point: WorldPoint, zoom: number): boolean;
 declare function boardMediaActionAt(item: BoardSceneItem, point: WorldPoint, zoom: number, options: {
   materialized: boolean;
   hasVideoPreview: boolean;
 }): BoardMediaAction | null;
 //#endregion
-export { BoardMediaAction, boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible };
+export { BoardMediaAction, boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter };

package/dist/board/render/media-interaction.js

@@ -1,19 +1,27 @@
 import { featuredTaskArtifact } from "../../protocol/dist/board-task.js";
-import "./renderers/task-card-renderer.js";
+import { degToRad, rotatePointAround, worldPoint } from "../model/geometry.js";
+import { boardCardDetailed } from "./text-resolution.js";
+import { audioKeyCenter } from "./renderers/audio-card-renderer.js";
 //#region src/board/render/media-interaction.ts
 function mediaPlayBadgeVisible(item, zoom, options) {
 	if (!options.materialized) return false;
 	if (item.type === "video" || item.type === "audio") return true;
-	if (item.type !== "task" || zoom < .55) return false;
+	if (item.type !== "task" || !boardCardDetailed(zoom)) return false;
 	const artifact = featuredTaskArtifact(item.props.snapshot.artifacts);
 	if (artifact?.type === "audio") return true;
 	return artifact?.type === "video" && (Boolean(artifact.previewUrl) || options.hasVideoPreview);
 }
+function mediaPlayKeyCenter(item) {
+	const { x, y, width, height, rotation } = item.frame;
+	const center = worldPoint(x + width / 2, y + height / 2);
+	if (item.type !== "audio") return center;
+	const key = audioKeyCenter(width, height);
+	return rotatePointAround(worldPoint(x + key.x, y + key.y), center, degToRad(rotation || 0));
+}
 function mediaPlayBadgeHit(item, point, zoom) {
 	const radius = 28 / Math.max(zoom, .05);
-	const centerX = item.frame.x + item.frame.width / 2;
-	const centerY = item.frame.y + item.frame.height / 2;
-	return Math.hypot(point.x - centerX, point.y - centerY) <= radius;
+	const center = mediaPlayKeyCenter(item);
+	return Math.hypot(point.x - center.x, point.y - center.y) <= radius;
 }
 function boardMediaActionAt(item, point, zoom, options) {
 	return mediaPlayBadgeVisible(item, zoom, options) && mediaPlayBadgeHit(item, point, zoom) ? {
@@ -22,4 +30,4 @@ function boardMediaActionAt(item, point, zoom, options) {
 	} : null;
 }
 //#endregion
-export { boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible };
+export { boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter };

package/dist/board/render/palette.js

@@ -14,8 +14,8 @@ const DARK = {
 	legendary: 16096779
 };
 const LIGHT = {
-	bg: 16777215,
-	surface: 16053493,
+	bg: 16251129,
+	surface: 16777215,
 	hover: 15329772,
 	border: 14079706,
 	brand: 15222030,

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