@neta-art/cohub 11.0.0 → 11.2.0

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

@@ -1,17 +1,21 @@
 import { BOARD_FONT_STACK, BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { featuredTaskArtifact } from "../../model/task.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, Graphics, Sprite, Text } from "pixi.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;
+const REVEAL_MS = 180;
+const SECOND = 1e3;
 const partsByContainer = /* @__PURE__ */ new WeakMap();
 function previewKindFor(artifact) {
 	if (!artifact) return "empty";
@@ -19,54 +23,45 @@ function previewKindFor(artifact) {
 	if (artifact.type === "audio") return artifact.previewUrl ? "texture" : "waveform";
 	return artifact.textExcerpt ? "text" : "empty";
 }
-function stateSurfaceFor(item, kind, hasTexture, previewFailed) {
+function liveStatus(item, context) {
+	const { snapshot } = item.props;
+	const live = snapshot.status === "completed" ? null : context.taskRun(item.props.taskRunId);
+	const liveStart = Date.parse(live?.startedAt ?? "");
+	const working = live?.status === "pending" || live?.status === "running";
+	const adopt = snapshot.status === "failed" ? working && liveStart > Date.parse(snapshot.updatedAt ?? "") : live?.status === "running" || live?.status === "pending" && snapshot.status === "pending";
+	const status = adopt && live ? live.status : snapshot.status;
+	const started = adopt ? liveStart : Date.parse(snapshot.startedAt ?? "");
+	return {
+		status,
+		startedAt: Number.isFinite(started) ? started : null
+	};
+}
+function stateSurfaceFor(status, kind, hasTexture, previewFailed) {
 	if (kind === "texture" && !hasTexture) {
-		if (item.props.snapshot.status === "failed") return "failed";
+		if (status === "failed") return "failed";
 		return previewFailed ? "unavailable" : "media-loading";
 	}
 	if (kind !== "empty") return null;
-	if (item.props.snapshot.status === "failed") return "failed";
-	if (item.props.snapshot.status === "running") return "generating";
-	if (item.props.snapshot.status === "pending") return "queued";
+	if (status === "failed") return "failed";
+	if (status === "running") return "generating";
+	if (status === "pending") return "queued";
 	return "empty";
 }
-function stateLabel(surface) {
+function stateLabel(surface, context) {
 	switch (surface) {
-		case "generating": return "Generating";
-		case "queued": return "Queued";
-		case "failed": return "Failed";
-		case "unavailable": return "Preview unavailable";
-		case "empty": return "No preview";
+		case "generating": return context.labels.generating;
+		case "queued": return context.labels.queued;
+		case "failed": return context.labels.failed;
+		case "unavailable": return context.labels.previewUnavailable;
+		case "empty": return context.labels.noPreview;
 		default: return "";
 	}
 }
-function statusColor(item, context) {
-	if (item.props.snapshot.status === "failed") return context.colors.rose.stroke;
-	if (item.props.snapshot.status === "running") return context.colors.brand.stroke;
+function statusColor(status, context) {
+	if (status === "failed") return context.colors.rose.stroke;
+	if (status === "running") return context.colors.brand.stroke;
 	return context.colors.neutral.stroke;
 }
-function metadata(item) {
-	const { artifactCount, artifacts } = item.props.snapshot;
-	const extra = artifactCount > artifacts.length ? `${artifacts.length}/${artifactCount}` : artifactCount > 1 ? `+${artifactCount - 1}` : null;
-	return [item.props.snapshot.model, extra].filter(Boolean).join(" · ");
-}
-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;
@@ -150,15 +145,116 @@ function drawFailedBadge(graphics, width, color, context) {
 		cap: "round"
 	});
 }
+const shimmerGradients = /* @__PURE__ */ new Map();
+function shimmerGradient(color) {
+	let gradient = shimmerGradients.get(color);
+	if (!gradient) {
+		const rgb = `${color >> 16 & 255}, ${color >> 8 & 255}, ${color & 255}`;
+		gradient = new FillGradient({
+			type: "linear",
+			start: {
+				x: 0,
+				y: 0
+			},
+			end: {
+				x: 1,
+				y: 0
+			},
+			textureSpace: "local",
+			colorStops: [
+				{
+					offset: 0,
+					color: `rgba(${rgb}, 0)`
+				},
+				{
+					offset: .5,
+					color: `rgba(${rgb}, 0.07)`
+				},
+				{
+					offset: 1,
+					color: `rgba(${rgb}, 0)`
+				}
+			]
+		});
+		shimmerGradients.set(color, gradient);
+	}
+	return gradient;
+}
+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.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 = formatBoardDuration(elapsedMs);
+		if (elapsed !== motion.elapsed) {
+			motion.elapsed = elapsed;
+			parts.body.text = `${motion.label} · ${elapsed}`;
+		}
+		const untilNextSecond = SECOND - Math.max(0, elapsedMs) % SECOND;
+		next = next === null ? untilNextSecond : Math.min(next, untilNextSecond);
+	}
+	if (motion.revealFrom !== null) {
+		const progress = Math.min(1, (clock - motion.revealFrom) / REVEAL_MS);
+		parts.preview.alpha = progress * (2 - progress);
+		if (progress >= 1) motion.revealFrom = null;
+		else next = 0;
+	}
+	return next;
+}
 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 full = context.zoom >= TASK_CARD_FULL_DETAIL_ZOOM;
-	const color = statusColor(item, context);
+	const { snapshot } = item.props;
+	const { status, startedAt } = liveStatus(item, context);
+	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);
 	if (key !== parts.assetKey) {
 		if (parts.assetKey) context.releaseTexture(parts.assetKey);
@@ -167,56 +263,100 @@ function sync(container, item, context) {
 	}
 	const texture = key ? context.getTexture(key) : null;
 	const previewFailed = Boolean(key && !texture && context.hasError(key));
-	const artifact = featuredTaskArtifact(item.props.snapshot.artifacts);
+	const artifact = featuredTaskArtifact(snapshot.artifacts);
 	const kind = previewKindFor(artifact);
-	const surface = stateSurfaceFor(item, kind, Boolean(texture), previewFailed);
+	const surface = stateSurfaceFor(status, kind, Boolean(texture), previewFailed);
 	const frame = {
 		x: 1,
 		y: 1,
 		width: Math.max(1, width - 2),
 		height: Math.max(1, height - 2)
 	};
-	const metaText = artifact ? metadata(item) : "";
+	const metaText = artifact || working ? snapshot.model ?? "" : "";
 	const showMeta = full && Boolean(metaText);
-	const failedWithOutput = item.props.snapshot.status === "failed" && kind !== "empty";
+	const failedWithOutput = status === "failed" && kind !== "empty";
+	const count = artifact && snapshot.artifactCount > 1 ? String(snapshot.artifactCount) : "";
+	const showBadge = full && Boolean(count);
+	const label = stateLabel(surface, context);
+	const counting = full && working && startedAt !== null && surface !== null;
+	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;
 	syncTextResolution(parts.body, parts, context.zoom);
+	syncTextResolution(parts.detail, parts, context.zoom);
 	syncTextResolution(parts.meta, parts, context.zoom);
+	syncTextResolution(parts.badge, parts, context.zoom);
+	const textSig = [
+		counting ? label : bodyText,
+		detailText,
+		metaText,
+		count,
+		kind,
+		surface,
+		full,
+		width,
+		height,
+		color,
+		context.palette.text,
+		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);
+		fitTextToLines(parts.body, bodyText, textArtifact ? Math.max(1, Math.floor((height - 24 - (showMeta ? META_HEIGHT : 0)) / 16)) : 1, wrap);
+		parts.detail.style.fill = context.palette.muted;
+		fitTextToLines(parts.detail, detailText, height - 24 > 120 ? 2 : 1, Math.min(wrap, 360));
+		parts.meta.style.fill = context.palette.text;
+		fitTextToLines(parts.meta, metaText, 1, wrap);
+		parts.badge.style.fill = context.palette.text;
+		if (parts.badge.text !== count) parts.badge.text = count;
+	}
+	const badgeWidth = Math.max(22, parts.badge.width + 12);
 	const visualSig = [
 		width,
 		height,
-		selected,
-		hovered,
 		full,
+		elevation,
 		color,
 		kind,
 		surface,
 		showMeta,
+		showBadge && badgeWidth,
 		failedWithOutput,
 		artifact?.type ?? "none",
 		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.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 });
+		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;
@@ -229,47 +369,58 @@ function sync(container, item, context) {
 		}
 		if (full && (artifact?.type === "audio" || artifact?.type === "video" && texture)) drawPlayBadge(parts.previewArt, frame, context);
 		if (surface) {
-			const markY = frame.y + frame.height / 2 - (full && stateLabel(surface) ? 10 : 0);
+			const markY = frame.y + frame.height / 2 - (full && label ? 18 : 0);
 			drawStateMark(parts.previewArt, surface, frame.x + frame.width / 2, markY, surface === "failed" ? color : context.colors.neutral.stroke);
 		}
 		if (showMeta) parts.previewArt.rect(frame.x, frame.y + frame.height - META_HEIGHT, frame.width, META_HEIGHT).fill({
 			color: context.palette.bg,
 			alpha: .68
 		});
+		if (showBadge) parts.previewArt.roundRect(width - badgeWidth - 8, 8, badgeWidth, 20, 10).fill({
+			color: context.palette.bg,
+			alpha: .72
+		});
 		if (failedWithOutput) drawFailedBadge(parts.previewArt, width, color, context);
 	}
-	parts.preview.visible = kind === "texture" && Boolean(texture);
-	if (parts.preview.visible && texture) {
+	const showPreview = kind === "texture" && Boolean(texture);
+	const revealKey = showPreview ? `${artifact?.id}:${texture?.uid}` : null;
+	const sameCard = parts.motion.itemId === item.id;
+	parts.motion.itemId = item.id;
+	if (revealKey !== parts.motion.revealKey || !sameCard) {
+		const appearing = sameCard && parts.motion.revealKey === null && revealKey !== null;
+		parts.motion.revealKey = revealKey;
+		parts.motion.revealFrom = appearing && !context.reducedMotion ? performance.now() : null;
+		parts.preview.alpha = parts.motion.revealFrom === null ? 1 : 0;
+	}
+	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;
 	}
-	const bodyText = kind === "text" && artifact?.type === "text" ? artifact.textExcerpt : stateLabel(surface);
-	const textSig = [
-		bodyText,
-		metaText,
-		kind,
-		surface,
-		full,
-		width,
-		height,
-		context.palette.text,
-		context.palette.muted
-	].join("|");
-	if (textSig !== parts.textSig) {
-		parts.textSig = textSig;
-		parts.body.style.fill = surface === "failed" ? color : context.palette.text;
-		fitTextToLines(parts.body, bodyText, kind === "text" ? Math.max(1, Math.floor((height - 24 - (showMeta ? META_HEIGHT : 0)) / 16)) : 1, Math.max(24, width - 24));
-		parts.meta.style.fill = context.palette.text;
-		fitTextToLines(parts.meta, metaText, 1, Math.max(24, width - 24));
-	}
 	parts.body.visible = full && Boolean(bodyText);
+	parts.detail.visible = full && Boolean(detailText);
 	parts.meta.visible = showMeta;
-	if (kind === "text") parts.body.position.set(PADDING, PADDING);
-	else parts.body.position.set(Math.max(PADDING, (width - parts.body.width) / 2), height / 2 + 10);
+	parts.badge.visible = showBadge;
+	if (textArtifact) parts.body.position.set(PADDING, PADDING);
+	else parts.body.position.set(width / 2, height / 2 + 2);
+	parts.detail.position.set(width / 2, height / 2 + 2 + parts.body.height + 4);
 	parts.meta.position.set(PADDING, height - META_HEIGHT + 7);
+	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;
+	parts.motion.elapsed = elapsed;
 }
 const taskCardRenderer = {
 	id: "task-card",
@@ -281,49 +432,64 @@ const taskCardRenderer = {
 		const previewBg = new Graphics();
 		const preview = new Sprite();
 		const previewMask = new Graphics();
+		const shimmer = new Graphics();
 		const previewArt = new Graphics();
 		const resolution = textResolutionForZoom(context.zoom);
-		const body = new Text({
+		const text = (fontFamily, fontSize, fontWeight) => new Text({
 			text: "",
 			style: {
-				fontFamily: BOARD_FONT_STACK,
-				fontSize: 11.5,
-				fontWeight: "500",
-				wordWrap: true,
-				breakWords: true
-			},
-			resolution,
-			roundPixels: true
-		});
-		const meta = new Text({
-			text: "",
-			style: {
-				fontFamily: BOARD_MONO_FONT_STACK,
-				fontSize: 10,
-				fontWeight: "500",
+				fontFamily,
+				fontSize,
+				fontWeight,
 				wordWrap: true,
 				breakWords: true
 			},
 			resolution,
 			roundPixels: true
 		});
+		const body = text(BOARD_FONT_STACK, 11.5, "500");
+		const detail = text(BOARD_FONT_STACK, 10.5, "400");
+		const meta = text(BOARD_MONO_FONT_STACK, 10, "500");
+		const badge = text(BOARD_MONO_FONT_STACK, 10, "500");
+		badge.style.wordWrap = false;
+		badge.anchor.set(.5);
+		detail.anchor.set(.5, 0);
+		detail.style.align = "center";
 		preview.mask = previewMask;
-		root.mask = clip;
-		root.addChild(plate, clip, previewBg, preview, previewMask, previewArt, body, meta);
+		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,
 			preview,
 			previewMask,
+			shimmer,
 			previewArt,
+			badge,
 			body,
+			detail,
 			meta,
 			assetKey: null,
 			visualSig: "",
 			textSig: "",
-			resolution
+			resolution,
+			motion: {
+				itemId: "",
+				width: 0,
+				shimmer: false,
+				mosaic: null,
+				startedAt: null,
+				label: "",
+				elapsed: "",
+				revealFrom: null,
+				revealKey: null
+			}
 		});
 		if (item.type === "task") sync(root, item, context);
 		return root;
@@ -331,14 +497,23 @@ const taskCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "task") sync(container, item, context);
 	},
+	tick: (container, clock) => {
+		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 active = item.props.snapshot.status === "failed" || item.props.snapshot.status === "running" || item.props.snapshot.status === "pending";
+		const { status } = liveStatus(item, context);
+		const active = status === "failed" || status === "running" || status === "pending";
 		drawFarPlate(graphics, item.frame, {
 			fill: context.palette.surface,
 			fillAlpha: .82,
 			...active ? {
-				accent: statusColor(item, context),
+				accent: statusColor(status, context),
 				accentAlpha: .9
 			} : {}
 		});
@@ -351,4 +526,4 @@ const taskCardRenderer = {
 	}
 };
 //#endregion
-export { TASK_CARD_FULL_DETAIL_ZOOM, containTaskPreviewRect, 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