@neta-art/cohub 11.1.0 → 11.3.0

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

@@ -1,20 +1,9 @@
+import { cardElevation, containRect, drawCardSurface, traceCardOutline } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
 import { Container, Graphics, Rectangle, Sprite, Texture } from "pixi.js";
 //#region src/board/render/renderers/image-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
-const RADIUS = 2;
-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 cropRect(crop) {
 	if (!crop) return null;
 	const w = Math.min(crop.w, 1 - crop.x);
@@ -48,70 +37,85 @@ function showTexture(parts, texture, crop) {
 	if (parts.sprite.texture !== display) parts.sprite.texture = display;
 	if (previous && previous !== parts.cropped) previous.destroy(false);
 }
+const PRINT_MARGIN = 6;
 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 elevation = cardElevation(context, item.id);
 	const sig = [
 		key ?? "",
 		width,
 		height,
-		selected,
-		hovered,
-		texId,
+		texture ? `${texture.width}x${texture.height}` : "none",
 		JSON.stringify(item.props.crop ?? null),
 		failed,
-		context.colorScheme
+		elevation,
+		context.themeKey
 	].join("|");
 	if (sig === parts.sig) return;
 	parts.sig = sig;
 	showTexture(parts, texture, item.props.crop);
+	const display = parts.sprite.texture;
+	const framed = context.style.media === "framed";
+	const margin = framed ? Math.min(PRINT_MARGIN, width / 8, height / 8) : 0;
+	const area = {
+		x: margin,
+		y: margin,
+		width: width - margin * 2,
+		height: height - margin * 2
+	};
+	const fitted = texture ? containRect(area.width, area.height, display.width, display.height) : {
+		...area,
+		x: 0,
+		y: 0
+	};
+	const picture = {
+		x: area.x + fitted.x,
+		y: area.y + fitted.y,
+		width: fitted.width,
+		height: fitted.height
+	};
+	const card = framed ? {
+		x: picture.x - margin,
+		y: picture.y - margin,
+		width: picture.width + margin * 2,
+		height: picture.height + margin * 2
+	} : picture;
 	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
-		});
+	if (texture) {
+		parts.sprite.position.set(picture.x, picture.y);
+		parts.sprite.width = picture.width;
+		parts.sprite.height = picture.height;
 	}
+	traceCardOutline(parts.mask.clear(), picture, framed ? {
+		corner: "round",
+		radius: 0
+	} : context.style).fill({ color: 16777215 });
+	parts.placeholder.clear();
+	if (texture && !framed) return;
+	drawCardSurface(parts.placeholder, card, context.style, {
+		fill: context.palette.surface,
+		border: texture ? null : failed ? context.palette.border : context.palette.hover,
+		elevation
+	});
+	if (texture) return;
+	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
+	});
 }
 const imageCardRenderer = {
 	id: "image-card",
@@ -121,17 +125,13 @@ const imageCardRenderer = {
 		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,
+			mask,
 			sig: "",
 			cropped: null,
 			cropSource: null,
@@ -141,12 +141,7 @@ const imageCardRenderer = {
 		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);
+		if (item.type === "image") sync(container, item, context);
 	},
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {

package/dist/board/render/renderers/media-key.d.ts

@@ -0,0 +1,6 @@
+import { BoardRenderContext } from "./board-renderer-registry.js";
+import { Graphics } from "pixi.js";
+//#region src/board/render/renderers/media-key.d.ts
+declare function drawMediaPlayKey(graphics: Graphics, cx: number, cy: number, radius: number, context: BoardRenderContext, solid?: boolean): void;
+//#endregion
+export { drawMediaPlayKey };

package/dist/board/render/renderers/media-key.js

@@ -0,0 +1,39 @@
+import { tracePixelRect } from "../surface.js";
+//#region src/board/render/renderers/media-key.ts
+const MEDIA_SCRIM = 0;
+const MEDIA_INK = 16777215;
+function drawMediaPlayKey(graphics, cx, cy, radius, context, solid = false) {
+	const face = solid ? context.palette.text : MEDIA_SCRIM;
+	const ink = solid ? context.palette.surface : MEDIA_INK;
+	if (context.style.corner === "pixel") {
+		const size = Math.round(radius * 1.6);
+		tracePixelRect(graphics, Math.round(cx - size / 2), Math.round(cy - size / 2), size, size, 2).fill({
+			color: face,
+			alpha: solid ? 1 : .62
+		});
+		const cell = Math.max(1, Math.round(size / 14));
+		const x = Math.round(cx - cell * 1.5);
+		const y = Math.round(cy - cell * 3.5);
+		for (let row = 0; row < 7; row += 1) graphics.rect(x, y + row * cell, (4 - Math.abs(row - 3)) * cell, cell);
+		graphics.fill({ color: ink });
+		return;
+	}
+	graphics.circle(cx, cy, radius).fill({
+		color: face,
+		alpha: solid ? 1 : .45
+	});
+	const size = radius * .5;
+	graphics.poly([
+		cx - size * .45,
+		cy - size * .75,
+		cx + size * .8,
+		cy,
+		cx - size * .45,
+		cy + size * .75
+	]).fill({
+		color: ink,
+		alpha: .96
+	});
+}
+//#endregion
+export { drawMediaPlayKey };

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

@@ -2,9 +2,9 @@ import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { worldPoint } from "../../model/geometry.js";
 import { itemAlpha, itemColor } from "../palette.js";
 import { syncTextResolution, syncTextWrapWidth, textResolutionForZoom } from "../text-resolution.js";
+import { dashPattern, roundRectPoints, tracePolyline, trimPolyline } from "../stroke.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
-import { dashPattern, roundRectPoints, tracePolyline, trimPolyline } from "../stroke.js";
 import { Container, Graphics, GraphicsPath, Matrix, Text } from "pixi.js";
 //#region src/board/render/renderers/shape-card-renderer.ts
 const DEFAULT_ROUNDED_RADIUS = 8;
@@ -95,8 +95,6 @@ function sync(container, item, context) {
 	positionShell(parts.root, item);
 	const { width, height } = item.frame;
 	const { props, style } = item;
-	const selected = context.selectedIds.has(item.id);
-	const hovered = context.hoveredId === item.id;
 	const stroke = itemColor(context, style.stroke ?? style.fill, "brand");
 	const fill = itemColor(context, style.fill ?? style.stroke, "brand", "fill");
 	const fillOpacity = (style.fillOpacity ?? (style.fill ? 1 : 0)) * itemAlpha(context, style.fill ?? style.stroke);
@@ -106,8 +104,6 @@ function sync(container, item, context) {
 	const visualSig = [
 		width,
 		height,
-		selected,
-		hovered,
 		props.geometry,
 		props.path,
 		fill,
@@ -117,8 +113,7 @@ function sync(container, item, context) {
 		strokeWidth,
 		style.dash,
 		style.radius,
-		style.trim,
-		context.palette.muted
+		style.trim
 	].join("|");
 	if (visualSig !== parts.visualSig) {
 		parts.visualSig = visualSig;
@@ -130,8 +125,7 @@ function sync(container, item, context) {
 				alpha: fillOpacity
 			});
 		}
-		const lineWidth = selected ? Math.max(2.5, strokeWidth) : strokeWidth;
-		const pattern = dashPattern(style.dash, lineWidth);
+		const pattern = dashPattern(style.dash, strokeWidth);
 		const partial = style.trim !== void 0 && style.trim < 1;
 		if (strokeWidth > 0 && (!partial || style.trim)) {
 			if ((pattern || partial) && props.geometry !== "path") {
@@ -139,9 +133,9 @@ function sync(container, item, context) {
 				tracePolyline(parts.shape, trimPolyline(outlinePoints(props.geometry, width, height, radius), style.trim), pattern);
 			} else traceShapeOutline(parts.shape, props, width, height, style.radius);
 			parts.shape.stroke({
-				color: hovered && !selected ? context.palette.muted : stroke,
-				width: lineWidth,
-				alpha: (selected ? 1 : hovered ? .95 : .85) * strokeAlpha,
+				color: stroke,
+				width: strokeWidth,
+				alpha: .85 * strokeAlpha,
 				cap: partial || pattern ? "round" : "butt",
 				join: "round"
 			});

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

@@ -1,13 +1,5 @@
 import { BoardCardRenderer } from "./board-renderer-registry.js";
 //#region src/board/render/renderers/task-card-renderer.d.ts
-declare const TASK_CARD_FULL_DETAIL_ZOOM = 0.55;
-declare function formatTaskElapsed(ms: number): string;
-declare function containTaskPreviewRect(width: number, height: number, imageWidth: number, imageHeight: number): {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-};
 declare const taskCardRenderer: BoardCardRenderer;
 //#endregion
-export { TASK_CARD_FULL_DETAIL_ZOOM, containTaskPreviewRect, formatTaskElapsed, taskCardRenderer };
+export { taskCardRenderer };

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

@@ -1,16 +1,16 @@
 import { BOARD_FONT_STACK, BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { featuredTaskArtifact } from "../../../protocol/dist/board-task.js";
+import { fitTextToLines } from "../text-fit.js";
+import { boardCardDetailed, syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
+import { createCardTag, formatBoardDuration, syncCardTag, zoomCardTag } from "../card-tag.js";
 import { drawAudioWaveform } from "../audio-waveform.js";
-import { syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
+import { cardElevation, containRect, drawCardSurface, traceCardOutline } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
-import { fitTextToLines } from "./file-card-renderer.js";
 import { Container, FillGradient, Graphics, Sprite, Text } from "pixi.js";
 //#region src/board/render/renderers/task-card-renderer.ts
-const RADIUS = 4;
 const PADDING = 12;
 const META_HEIGHT = 28;
-const TASK_CARD_FULL_DETAIL_ZOOM = .55;
 const PLAY_BADGE_RADIUS = 15;
 const SHIMMER_PERIOD_MS = 1600;
 const SHIMMER_FRAME_MS = 33;
@@ -62,30 +62,6 @@ function statusColor(status, context) {
 	if (status === "running") return context.colors.brand.stroke;
 	return context.colors.neutral.stroke;
 }
-function formatTaskElapsed(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}`;
-}
-function containTaskPreviewRect(width, height, imageWidth, imageHeight) {
-	if (width <= 0 || height <= 0 || imageWidth <= 0 || imageHeight <= 0) return {
-		x: 0,
-		y: 0,
-		width: 0,
-		height: 0
-	};
-	const scale = Math.min(width / imageWidth, height / imageHeight);
-	const renderedWidth = imageWidth * scale;
-	const renderedHeight = imageHeight * scale;
-	return {
-		x: (width - renderedWidth) / 2,
-		y: (height - renderedHeight) / 2,
-		width: renderedWidth,
-		height: renderedHeight
-	};
-}
 function drawPlayBadge(graphics, rect, context) {
 	const radius = Math.min(PLAY_BADGE_RADIUS, Math.max(8, Math.min(rect.width, rect.height) * .16));
 	const cx = rect.x + rect.width / 2;
@@ -208,17 +184,46 @@ function drawShimmerBand(graphics, width, height, color) {
 	const band = Math.max(48, width * .45);
 	graphics.clear().rect(-band, 0, band, height).fill(shimmerGradient(color));
 }
+const MOSAIC_FRAME_MS = 160;
+const MOSAIC_CELL = 8;
+function drawMosaic(graphics, width, height, color, frame) {
+	const columns = Math.max(1, Math.floor(width / MOSAIC_CELL));
+	const rows = Math.max(1, Math.floor(height / MOSAIC_CELL));
+	const left = (width - columns * MOSAIC_CELL) / 2;
+	const top = (height - rows * MOSAIC_CELL) / 2;
+	graphics.clear();
+	for (const [threshold, alpha] of [[.08, .16], [.02, .3]]) {
+		for (let row = 0; row < rows; row += 1) for (let column = 0; column < columns; column += 1) {
+			let hash = Math.imul(column + 1, 2654435761) ^ Math.imul(row + 1, 2246822507) ^ Math.imul(frame + 1, 3266489909);
+			hash ^= hash >>> 15;
+			hash = Math.imul(hash, 739982445);
+			hash ^= hash >>> 12;
+			if ((hash >>> 0) / 4294967295 < threshold) graphics.rect(left + column * MOSAIC_CELL + 1, top + row * MOSAIC_CELL + 1, 6, 6);
+		}
+		graphics.fill({
+			color,
+			alpha
+		});
+	}
+}
 function advance(parts, clock) {
 	const { motion } = parts;
 	let next = null;
-	if (motion.shimmer) {
+	if (motion.mosaic) {
+		const frame = Math.floor(clock / MOSAIC_FRAME_MS);
+		if (frame !== motion.mosaic.step) {
+			motion.mosaic.step = frame;
+			drawMosaic(parts.shimmer, motion.width, motion.mosaic.height, motion.mosaic.color, frame);
+		}
+		next = MOSAIC_FRAME_MS - clock % MOSAIC_FRAME_MS;
+	} else if (motion.shimmer) {
 		const travel = motion.width + parts.shimmer.width;
 		parts.shimmer.x = clock % SHIMMER_PERIOD_MS / SHIMMER_PERIOD_MS * travel;
 		next = SHIMMER_FRAME_MS;
 	}
 	if (motion.startedAt !== null) {
 		const elapsedMs = Date.now() - motion.startedAt;
-		const elapsed = formatTaskElapsed(elapsedMs);
+		const elapsed = formatBoardDuration(elapsedMs);
 		if (elapsed !== motion.elapsed) {
 			motion.elapsed = elapsed;
 			parts.body.text = `${motion.label} · ${elapsed}`;
@@ -241,9 +246,13 @@ function sync(container, item, context) {
 	const { width, height } = item.frame;
 	const { snapshot } = item.props;
 	const { status, startedAt } = liveStatus(item, context);
-	const selected = context.selectedIds.has(item.id);
-	const hovered = context.hoveredId === item.id;
-	const full = context.zoom >= TASK_CARD_FULL_DETAIL_ZOOM;
+	const full = boardCardDetailed(context.zoom);
+	const elevation = cardElevation(context, item.id);
+	syncCardTag(parts.tag, {
+		glyph: "task",
+		text: snapshot.title,
+		width
+	}, context);
 	const working = status === "pending" || status === "running";
 	const color = statusColor(status, context);
 	const key = context.assetKey(item);
@@ -270,7 +279,7 @@ function sync(container, item, context) {
 	const showBadge = full && Boolean(count);
 	const label = stateLabel(surface, context);
 	const counting = full && working && startedAt !== null && surface !== null;
-	const elapsed = counting ? formatTaskElapsed(Date.now() - startedAt) : "";
+	const elapsed = counting ? formatBoardDuration(Date.now() - startedAt) : "";
 	const detailText = !full || !surface ? "" : status === "failed" ? snapshot.errorExcerpt ?? "" : working ? snapshot.promptExcerpt ?? "" : "";
 	const textArtifact = kind === "text" && artifact?.type === "text";
 	const bodyText = textArtifact ? artifact.textExcerpt : counting ? `${label} · ${elapsed}` : label;
@@ -290,10 +299,13 @@ function sync(container, item, context) {
 		height,
 		color,
 		context.palette.text,
-		context.palette.muted
+		context.palette.muted,
+		context.style.font
 	].join("|");
 	if (textSig !== parts.textSig) {
 		parts.textSig = textSig;
+		parts.body.style.fontFamily = context.style.font;
+		parts.detail.style.fontFamily = context.style.font;
 		const wrap = Math.max(24, width - 24);
 		parts.body.style.fill = surface === "failed" ? color : context.palette.text;
 		parts.body.anchor.set(textArtifact ? 0 : .5, 0);
@@ -309,9 +321,8 @@ function sync(container, item, context) {
 	const visualSig = [
 		width,
 		height,
-		selected,
-		hovered,
 		full,
+		elevation,
 		color,
 		kind,
 		surface,
@@ -322,30 +333,30 @@ function sync(container, item, context) {
 		artifact?.id ?? "none",
 		item.props.taskRunId,
 		texture ? `${texture.width}x${texture.height}` : "none",
-		context.palette.surface,
-		context.palette.hover,
-		context.palette.border,
-		context.palette.bg,
-		context.palette.text
+		context.themeKey
 	].join("|");
 	if (visualSig !== parts.visualSig) {
 		parts.visualSig = visualSig;
-		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 : .82
+		const rect = {
+			x: 0,
+			y: 0,
+			width,
+			height
+		};
+		drawCardSurface(parts.plate.clear(), rect, context.style, {
+			fill: context.palette.surface,
+			border: context.palette.border,
+			borderAlpha: .82,
+			elevation
 		});
-		parts.clip.clear().roundRect(1, 1, frame.width, frame.height, 3).fill({ color: 16777215 });
+		traceCardOutline(parts.clip.clear(), rect, context.style, -1).fill({ color: 16777215 });
 		parts.previewBg.clear().rect(frame.x, frame.y, frame.width, frame.height).fill({
 			color: context.palette.hover,
 			alpha: .5
 		});
 		parts.previewMask.clear().rect(frame.x, frame.y, frame.width, frame.height).fill({ color: 16777215 });
-		drawShimmerBand(parts.shimmer, frame.width, frame.height, context.palette.text);
-		parts.shimmer.y = frame.y;
+		if (context.style.progress === "shimmer") drawShimmerBand(parts.shimmer, frame.width, frame.height, context.palette.text);
+		parts.shimmer.position.set(context.style.progress === "shimmer" ? 0 : frame.x, frame.y);
 		parts.previewArt.clear();
 		if (kind === "waveform") {
 			const bottomInset = showMeta ? META_HEIGHT : 0;
@@ -384,7 +395,7 @@ function sync(container, item, context) {
 	parts.preview.visible = showPreview;
 	if (showPreview && texture) {
 		if (parts.preview.texture !== texture) parts.preview.texture = texture;
-		const fitted = containTaskPreviewRect(frame.width, frame.height, texture.width, texture.height);
+		const fitted = containRect(frame.width, frame.height, texture.width, texture.height);
 		parts.preview.position.set(frame.x + fitted.x, frame.y + fitted.y);
 		parts.preview.width = fitted.width;
 		parts.preview.height = fitted.height;
@@ -400,6 +411,12 @@ function sync(container, item, context) {
 	parts.badge.position.set(width - 8 - badgeWidth / 2, 18);
 	parts.motion.width = frame.width;
 	parts.motion.shimmer = full && working && kind !== "texture" && !context.reducedMotion;
+	const mosaic = parts.motion.shimmer && context.style.progress === "mosaic";
+	parts.motion.mosaic = mosaic ? {
+		color: context.palette.brand,
+		height: frame.height,
+		step: -1
+	} : null;
 	parts.shimmer.visible = parts.motion.shimmer;
 	parts.motion.startedAt = counting ? startedAt : null;
 	parts.motion.label = label;
@@ -439,10 +456,14 @@ const taskCardRenderer = {
 		detail.anchor.set(.5, 0);
 		detail.style.align = "center";
 		preview.mask = previewMask;
-		root.mask = clip;
-		root.addChild(plate, clip, previewBg, shimmer, preview, previewMask, previewArt, body, detail, meta, badge);
+		const content = new Container();
+		content.mask = clip;
+		content.addChild(previewBg, shimmer, preview, previewMask, previewArt, body, detail, meta, badge);
+		const tag = createCardTag();
+		root.addChild(plate, content, clip, tag.root);
 		partsByContainer.set(root, {
 			root,
+			tag,
 			plate,
 			clip,
 			previewBg,
@@ -462,6 +483,7 @@ const taskCardRenderer = {
 				itemId: "",
 				width: 0,
 				shimmer: false,
+				mosaic: null,
 				startedAt: null,
 				label: "",
 				elapsed: "",
@@ -479,6 +501,10 @@ const taskCardRenderer = {
 		const parts = partsByContainer.get(container);
 		return parts ? advance(parts, clock) : null;
 	},
+	zoom: (container, zoom) => {
+		const tag = partsByContainer.get(container)?.tag;
+		if (tag) zoomCardTag(tag, zoom);
+	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "task") return;
 		const { status } = liveStatus(item, context);
@@ -500,4 +526,4 @@ const taskCardRenderer = {
 	}
 };
 //#endregion
-export { TASK_CARD_FULL_DETAIL_ZOOM, containTaskPreviewRect, formatTaskElapsed, taskCardRenderer };
+export { taskCardRenderer };

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

@@ -1,40 +1,41 @@
 import { BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
+import { cardElevation, drawCardSurface, traceCardOutline } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
 import { Container, Graphics, Text } from "pixi.js";
 //#region src/board/render/renderers/unknown-card-renderer.ts
-const RADIUS = 10;
 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 realType = item.type;
 	syncTextResolution(parts.label, parts, context.zoom);
+	const elevation = cardElevation(context, item.id);
 	const visualSig = [
 		width,
 		height,
-		selected,
-		context.palette.surface,
-		context.palette.brand,
-		context.palette.border,
-		context.palette.muted
+		elevation,
+		context.themeKey
 	].join("|");
 	if (visualSig !== parts.visualSig) {
 		parts.visualSig = visualSig;
-		parts.box.clear();
-		parts.box.roundRect(0, 0, width, height, RADIUS).fill({
-			color: context.palette.surface,
-			alpha: .7
-		}).roundRect(0, 0, width, height, RADIUS).stroke({
-			color: selected ? context.palette.brand : context.palette.border,
-			width: selected ? 2 : 1,
-			alpha: .8
+		const rect = {
+			x: 0,
+			y: 0,
+			width,
+			height
+		};
+		drawCardSurface(parts.box.clear(), rect, context.style, {
+			fill: context.palette.surface,
+			fillAlpha: .7,
+			border: context.palette.border,
+			borderAlpha: .8,
+			elevation
 		});
-		parts.box.roundRect(6, 6, width - 12, height - 12, 6).stroke({
+		traceCardOutline(parts.box, rect, context.style, -6).stroke({
 			color: context.palette.muted,
 			width: 1,
 			alpha: .4