@neta-art/cohub-cli 10.1.0 → 10.2.0

package/dist/board-kernel.js

@@ -9341,13 +9341,47 @@ function filePreviewKind(snapshot) {
 	if (snapshot.excerpt) return "text";
 	return "blank";
 }
-/** Short uppercase type label for a file card (`MD`, `JSON`, `FILE`). */
 function fileTypeLabel(path) {
+	if (isWebPageUrl(path)) return "LINK";
 	const name = fileBaseName(path);
 	const dot = name.lastIndexOf(".");
 	if (dot <= 0) return (name.replace(/^\./, "") || "file").toUpperCase();
 	return name.slice(dot + 1).toUpperCase();
 }
+function isWebPageUrl(path) {
+	if (!/^https?:\/\//i.test(path)) return false;
+	try {
+		const last = new URL(path).pathname.split("/").filter(Boolean).pop() ?? "";
+		return !/\.[a-z\d]{1,8}$/i.test(last);
+	} catch {
+		return false;
+	}
+}
+/** Human-readable byte size. Kept as a public helper for custom card renderers. */
+function formatFileSize(bytes) {
+	if (bytes === void 0 || !Number.isFinite(bytes) || bytes < 0) return "";
+	if (bytes < 1024) return `${bytes} B`;
+	const units = [
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	let value = bytes / 1024;
+	let unit = 0;
+	while (value >= 1024 && unit < units.length - 1) {
+		value /= 1024;
+		unit += 1;
+	}
+	return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;
+}
+/** `MD · 12 KB` — empty when neither fact is available. */
+function fileMetaLine(path, size) {
+	const type = fileTypeLabel(path);
+	const formatted = formatFileSize(size);
+	if (type && formatted) return `${type} · ${formatted}`;
+	return formatted || type;
+}
 /** Map a file category onto an existing palette token. */
 function fileCategoryAccent(category, palette) {
 	switch (category) {
@@ -27011,8 +27045,8 @@ const DARK = {
 	legendary: 16096779
 };
 const LIGHT = {
-	bg: 16777215,
-	surface: 16053493,
+	bg: 16251129,
+	surface: 16777215,
 	hover: 15329772,
 	border: 14079706,
 	brand: 15222030,
@@ -27195,6 +27229,298 @@ function inspectBoardScene(scene, limit = 100) {
 	return diagnostics;
 }
 //#endregion
+//#region ../sdk/src/board/render/text-fit.ts
+function fitLineWithEllipsis(line, wrapWidth, measureWidth) {
+	const trimmed = line.replace(/\s+$/u, "");
+	if (!trimmed) return "…";
+	const full = `${trimmed}…`;
+	if (measureWidth(full) <= wrapWidth) return full;
+	let lo = 0;
+	let hi = trimmed.length;
+	let best = "…";
+	while (lo <= hi) {
+		const mid = lo + hi >> 1;
+		const candidate = mid > 0 ? `${trimmed.slice(0, mid)}…` : "…";
+		if (measureWidth(candidate) <= wrapWidth) {
+			best = candidate;
+			lo = mid + 1;
+		} else hi = mid - 1;
+	}
+	return best;
+}
+function fitTextToLines(text, value, maxLines, wrapWidth) {
+	const width = Math.max(1, wrapWidth);
+	text.style.wordWrapWidth = width;
+	if (!value || maxLines <= 0) {
+		if (text.text !== "") text.text = "";
+		return;
+	}
+	const charCap = Math.max(maxLines * Math.ceil(width), maxLines * 4);
+	const sample = value.length > charCap ? value.slice(0, charCap) : value;
+	const metrics = CanvasTextMetrics.measureText(sample, text.style);
+	if (!(metrics.lines.length > maxLines || sample !== value)) {
+		if (text.text !== value) text.text = value;
+		return;
+	}
+	const keptCount = Math.min(maxLines, metrics.lines.length);
+	const kept = metrics.lines.slice(0, keptCount);
+	const lastIndex = kept.length - 1;
+	const probe = text.style.clone();
+	probe.wordWrap = false;
+	kept[lastIndex] = fitLineWithEllipsis(kept[lastIndex] ?? "", width, (candidate) => CanvasTextMetrics.measureText(candidate, probe).width);
+	const fitted = kept.join("\n");
+	if (text.text !== fitted) text.text = fitted;
+}
+function fitTextToWidth(text, value, width) {
+	text.style.wordWrap = false;
+	const measure = (candidate) => CanvasTextMetrics.measureText(candidate, text.style).width;
+	const fitted = !value || measure(value) <= width ? value : fitLineWithEllipsis(value, width, measure);
+	if (text.text !== fitted) text.text = fitted;
+}
+//#endregion
+//#region ../sdk/src/board/render/text-resolution.ts
+const MAX_BOARD_RESOLUTION = 2;
+function getBoardResolution() {
+	return Math.min(globalThis.devicePixelRatio || 1, MAX_BOARD_RESOLUTION);
+}
+/**
+* Zoom buckets for text re-rasterisation. Pixi Text is a bitmap: at high zoom it
+* looks soft unless we raise its resolution. We quantise zoom into a few
+* buckets so small zoom changes don't thrash texture regeneration.
+*/
+const TEXT_ZOOM_BUCKETS = [
+	.5,
+	1,
+	1.5,
+	2,
+	3,
+	4
+];
+function textZoomBucket(zoom) {
+	const clamped = Math.max(.1, Math.min(4, zoom));
+	for (const bucket of TEXT_ZOOM_BUCKETS) if (clamped <= bucket) return bucket;
+	return TEXT_ZOOM_BUCKETS[TEXT_ZOOM_BUCKETS.length - 1] ?? 4;
+}
+function boardCardDetailed(zoom) {
+	return textZoomBucket(zoom) >= 1;
+}
+/** Effective text resolution for a given camera zoom. */
+function textResolutionForZoom(zoom) {
+	const bucket = textZoomBucket(zoom);
+	return Math.min(getBoardResolution() * Math.max(1, bucket), 6);
+}
+/** Update a Pixi text texture only when zoom crosses a resolution bucket. */
+function syncTextResolution(text, state, zoom) {
+	const resolution = textResolutionForZoom(zoom);
+	if (resolution === state.resolution) return;
+	text.resolution = resolution;
+	state.resolution = resolution;
+}
+/** Defer expensive Pixi word-wrap rasterisation during a live resize. */
+function syncTextWrapWidth(text, state, width, defer) {
+	if (defer || width === state.wrapWidth) return;
+	text.style.wordWrapWidth = width;
+	state.wrapWidth = width;
+}
+const ICON = 12;
+const GAP$2 = 5;
+const MAX_GROWTH = 1.25;
+const MIN_READABLE = 7;
+const SECOND$1 = 1e3;
+function formatBoardDuration(ms) {
+	const total = Math.max(0, Math.floor(ms / SECOND$1));
+	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$2));
+	tag.text.position.set(17, (ICON - tag.text.height) / 2);
+	zoomCardTag(tag, context.zoom);
+}
+//#endregion
 //#region ../sdk/src/board/render/clip.ts
 function isClippingFrame(item) {
 	return item.type === "frame" && item.props.clip !== false;
@@ -27258,7 +27584,7 @@ function audioWaveformBars(seed, count) {
 	}
 	return bars;
 }
-function drawAudioWaveform(graphics, seed, rect, color, alpha = .72) {
+function drawAudioWaveform(graphics, seed, rect, color, alpha = .72, square = false) {
 	const count = Math.max(8, Math.min(DEFAULT_BARS, Math.floor(rect.width / 4)));
 	const step = rect.width / count;
 	const barWidth = Math.max(1.5, step - BAR_GAP);
@@ -27267,53 +27593,225 @@ function drawAudioWaveform(graphics, seed, rect, color, alpha = .72) {
 	const bars = audioWaveformBars(seed, count);
 	for (let index = 0; index < count; index += 1) {
 		const height = Math.max(2, (bars[index] ?? .4) * maxHeight);
-		graphics.roundRect(rect.x + index * step, centerY - height / 2, barWidth, height, barWidth / 2).fill({
-			color,
-			alpha
-		});
+		const x = rect.x + index * step;
+		if (square) graphics.rect(x, centerY - height / 2, barWidth, height);
+		else graphics.roundRect(x, centerY - height / 2, barWidth, height, barWidth / 2);
 	}
+	graphics.fill({
+		color,
+		alpha
+	});
 }
 //#endregion
-//#region ../sdk/src/board/render/text-resolution.ts
-const MAX_BOARD_RESOLUTION = 2;
-function getBoardResolution() {
-	return Math.min(globalThis.devicePixelRatio || 1, MAX_BOARD_RESOLUTION);
+//#region ../sdk/src/board/render/stroke.ts
+const HEAD_SPREAD = Math.PI / 6;
+function dashPattern(dash, width) {
+	if (dash === "dashed") return [Math.max(6, width * 4), Math.max(4, width * 3)];
+	if (dash === "dotted") return [Math.max(.5, width * .01), Math.max(3, width * 2)];
+	return null;
 }
-/**
-* Zoom buckets for text re-rasterisation. Pixi Text is a bitmap: at high zoom it
-* looks soft unless we raise its resolution. We quantise zoom into a few
-* buckets so small zoom changes don't thrash texture regeneration.
-*/
-const TEXT_ZOOM_BUCKETS = [
-	.5,
-	1,
-	1.5,
-	2,
-	3,
-	4
-];
-function textZoomBucket(zoom) {
-	const clamped = Math.max(.1, Math.min(4, zoom));
-	for (const bucket of TEXT_ZOOM_BUCKETS) if (clamped <= bucket) return bucket;
-	return TEXT_ZOOM_BUCKETS[TEXT_ZOOM_BUCKETS.length - 1] ?? 4;
+function trimPolyline(path, trim) {
+	if (trim === void 0 || trim >= 1 || path.length < 2) return path;
+	if (trim <= 0) return [];
+	let total = 0;
+	for (let index = 1; index < path.length; index += 1) {
+		const a = path[index - 1];
+		const b = path[index];
+		total += Math.hypot(b.x - a.x, b.y - a.y);
+	}
+	let remaining = total * trim;
+	const out = [path[0]];
+	for (let index = 1; index < path.length; index += 1) {
+		const a = path[index - 1];
+		const b = path[index];
+		const length = Math.hypot(b.x - a.x, b.y - a.y);
+		if (length >= remaining) {
+			const t = length > 0 ? remaining / length : 0;
+			out.push(worldPoint(a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t));
+			return out;
+		}
+		out.push(b);
+		remaining -= length;
+	}
+	return out;
 }
-/** Effective text resolution for a given camera zoom. */
-function textResolutionForZoom(zoom) {
-	const bucket = textZoomBucket(zoom);
-	return Math.min(getBoardResolution() * Math.max(1, bucket), 6);
+function tracePolyline(graphics, path, pattern, closed = false, offset = 0) {
+	const points = closed && path.length > 2 ? [...path, path[0]] : path;
+	if (points.length < 2) return;
+	if (!pattern) {
+		const first = points[0];
+		graphics.moveTo(first.x, first.y);
+		for (let index = 1; index < points.length; index += 1) {
+			const point = points[index];
+			graphics.lineTo(point.x, point.y);
+		}
+		if (closed) graphics.closePath();
+		return;
+	}
+	const [dash, gap] = pattern;
+	const phase = Math.max(0, offset) % (dash + gap);
+	let penDown = phase < dash;
+	let fresh = penDown;
+	let remaining = penDown ? dash - phase : dash + gap - phase;
+	for (let index = 1; index < points.length; index += 1) {
+		const a = points[index - 1];
+		const b = points[index];
+		const dx = b.x - a.x;
+		const dy = b.y - a.y;
+		const length = Math.hypot(dx, dy);
+		let travelled = 0;
+		while (length - travelled > 1e-4) {
+			const step = Math.min(length - travelled, remaining);
+			if (penDown) {
+				const t0 = travelled / length;
+				const t1 = (travelled + step) / length;
+				if (fresh) graphics.moveTo(a.x + dx * t0, a.y + dy * t0);
+				fresh = false;
+				graphics.lineTo(a.x + dx * t1, a.y + dy * t1);
+			}
+			travelled += step;
+			remaining -= step;
+			if (remaining <= 1e-4) {
+				penDown = !penDown;
+				fresh = penDown;
+				remaining = penDown ? dash : gap;
+			}
+		}
+	}
 }
-/** Update a Pixi text texture only when zoom crosses a resolution bucket. */
-function syncTextResolution(text, state, zoom) {
-	const resolution = textResolutionForZoom(zoom);
-	if (resolution === state.resolution) return;
-	text.resolution = resolution;
-	state.resolution = resolution;
+function traceArrowhead(graphics, tip, angle, size) {
+	graphics.moveTo(tip.x - size * Math.cos(angle - HEAD_SPREAD), tip.y - size * Math.sin(angle - HEAD_SPREAD)).lineTo(tip.x, tip.y).lineTo(tip.x - size * Math.cos(angle + HEAD_SPREAD), tip.y - size * Math.sin(angle + HEAD_SPREAD));
 }
-/** Defer expensive Pixi word-wrap rasterisation during a live resize. */
-function syncTextWrapWidth(text, state, width, defer) {
-	if (defer || width === state.wrapWidth) return;
-	text.style.wordWrapWidth = width;
-	state.wrapWidth = width;
+function endAngle(path, atStart) {
+	if (path.length < 2) return null;
+	const tip = atStart ? path[0] : path[path.length - 1];
+	for (let offset = 1; offset < path.length; offset += 1) {
+		const other = atStart ? path[offset] : path[path.length - 1 - offset];
+		if (Math.hypot(tip.x - other.x, tip.y - other.y) > .001) return Math.atan2(tip.y - other.y, tip.x - other.x);
+	}
+	return null;
+}
+function roundRectPoints(width, height, radius) {
+	const r = Math.min(radius, width / 2, height / 2);
+	if (r <= 0) return [
+		worldPoint(0, 0),
+		worldPoint(width, 0),
+		worldPoint(width, height),
+		worldPoint(0, height),
+		worldPoint(0, 0)
+	];
+	const corner = (cx, cy, from) => Array.from({ length: 9 }, (_, index) => {
+		const angle = from + index / 8 * (Math.PI / 2);
+		return worldPoint(cx + Math.cos(angle) * r, cy + Math.sin(angle) * r);
+	});
+	return [
+		...corner(width - r, r, -Math.PI / 2),
+		...corner(width - r, height - r, 0),
+		...corner(r, height - r, Math.PI / 2),
+		...corner(r, r, Math.PI),
+		worldPoint(width - r, 0)
+	];
+}
+const SHADOW_LAYERS = 5;
+function traceCardOutline(graphics, rect, style, grow = 0) {
+	const x = rect.x - grow;
+	const y = rect.y - grow;
+	const width = Math.max(0, rect.width + grow * 2);
+	const height = Math.max(0, rect.height + grow * 2);
+	if (style.corner === "pixel") return tracePixelRect(graphics, x, y, width, height, 2);
+	const radius = Math.min(Math.max(0, style.radius + grow), width / 2, height / 2);
+	return radius > 0 ? graphics.roundRect(x, y, width, height, radius) : graphics.rect(x, y, width, height);
+}
+function tracePixelRect(graphics, x, y, width, height, step) {
+	const s = Math.min(step, width / 4, height / 4);
+	if (s <= 0) return graphics.rect(x, y, width, height);
+	return graphics.poly(pixelRectPoints(x, y, width, height, s).flatMap((point) => [point.x, point.y]));
+}
+function pixelRectPoints(x, y, width, height, s) {
+	const r = x + width;
+	const b = y + height;
+	const p = worldPoint;
+	return [
+		p(x, y + s * 2),
+		p(x + s, y + s * 2),
+		p(x + s, y + s),
+		p(x + s * 2, y + s),
+		p(x + s * 2, y),
+		p(r - s * 2, y),
+		p(r - s * 2, y + s),
+		p(r - s, y + s),
+		p(r - s, y + s * 2),
+		p(r, y + s * 2),
+		p(r, b - s * 2),
+		p(r - s, b - s * 2),
+		p(r - s, b - s),
+		p(r - s * 2, b - s),
+		p(r - s * 2, b),
+		p(x + s * 2, b),
+		p(x + s * 2, b - s),
+		p(x + s, b - s),
+		p(x + s, b - s * 2),
+		p(x, b - s * 2)
+	];
+}
+function drawCardShadow(graphics, rect, style, shadow) {
+	if (!shadow || shadow.alpha <= 0 || shadow.blur <= 0) return;
+	const offset = {
+		...rect,
+		y: rect.y + shadow.y
+	};
+	const reach = (index) => (1 - index / SHADOW_LAYERS) ** 2;
+	for (let index = SHADOW_LAYERS; index >= 1; index -= 1) {
+		const alpha = shadow.alpha * (reach(index - 1) - reach(index));
+		traceCardOutline(graphics, offset, style, shadow.blur * index / SHADOW_LAYERS).fill({
+			color: shadow.color,
+			alpha
+		});
+		traceCardOutline(graphics, rect, style).cut();
+	}
+}
+function cardShadow(style, elevation) {
+	const shadow = style.shadow;
+	if (!shadow || elevation === 0) return null;
+	if (elevation === 1) return shadow;
+	return {
+		...shadow,
+		alpha: Math.min(1, shadow.alpha * 1.6),
+		blur: shadow.blur * 1.6,
+		y: shadow.y * 2 + 4
+	};
+}
+function drawCardSurface(graphics, rect, style, surface) {
+	drawCardShadow(graphics, rect, style, cardShadow(style, surface.elevation ?? 0));
+	traceCardOutline(graphics, rect, style).fill({
+		color: surface.fill,
+		alpha: surface.fillAlpha ?? 1
+	});
+	if (surface.border != null) traceCardOutline(graphics, rect, style).stroke({
+		color: surface.border,
+		width: 1,
+		alpha: surface.borderAlpha ?? 1,
+		alignment: 1
+	});
+	return graphics;
+}
+function containRect(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);
+	return {
+		x: (width - imageWidth * scale) / 2,
+		y: (height - imageHeight * scale) / 2,
+		width: imageWidth * scale,
+		height: imageHeight * scale
+	};
+}
+function cardElevation(context, id) {
+	return context.liftedIds.has(id) ? 2 : 1;
 }
 //#endregion
 //#region ../sdk/src/board/render/renderers/base-card-renderer.ts
@@ -27325,7 +27823,10 @@ function createLabel(text, style) {
 	return new Text({
 		...TEXT_OPTIONS,
 		text,
-		style
+		style: {
+			fontFamily: BOARD_FONT_STACK,
+			...style
+		}
 	});
 }
 function positionShell(root, item) {
@@ -27407,1201 +27908,310 @@ function drawFarStroke(graphics, points, style) {
 	});
 }
 //#endregion
-//#region ../sdk/src/board/render/renderers/file-card-renderer.ts
-const RADIUS$5 = 4;
-const PADDING$1 = 10;
-const COVER_RATIO = .56;
-const MIN_BODY_FOR_COVER = 38;
-const TITLE_SIZE = 13;
-const TITLE_LINE = TITLE_SIZE * 1.35;
-const TITLE_MAX_LINES = 2;
-const EXCERPT_SIZE = 11;
-const EXCERPT_LINE = EXCERPT_SIZE * 1.45;
-const EXCERPT_MAX_LINES = 3;
-const TYPE_MARK_SIZE = 28;
-const GAP = 4;
-const STRIPE = 2;
-const LOD_TITLE_ZOOM = .35;
-const LOD_BODY_ZOOM = .6;
-const MAX_DASHES = 40;
-const partsByContainer$12 = /* @__PURE__ */ new WeakMap();
-function detailFor(zoom) {
-	if (zoom < LOD_TITLE_ZOOM) return "plate";
-	if (zoom < LOD_BODY_ZOOM) return "title";
-	return "full";
-}
-function coverHeight(item, height) {
-	if (filePreviewKind(item.props.snapshot) !== "cover") return 0;
-	const ideal = Math.round(height * COVER_RATIO);
-	return Math.max(0, Math.min(ideal, height - MIN_BODY_FOR_COVER));
-}
-function fitLineWithEllipsis(line, wrapWidth, measureWidth) {
-	const trimmed = line.replace(/\s+$/u, "");
-	if (!trimmed) return "…";
-	const full = `${trimmed}…`;
-	if (measureWidth(full) <= wrapWidth) return full;
-	let lo = 0;
-	let hi = trimmed.length;
-	let best = "…";
-	while (lo <= hi) {
-		const mid = lo + hi >> 1;
-		const candidate = mid > 0 ? `${trimmed.slice(0, mid)}…` : "…";
-		if (measureWidth(candidate) <= wrapWidth) {
-			best = candidate;
-			lo = mid + 1;
-		} else hi = mid - 1;
-	}
-	return best;
-}
-function fitTextToLines(text, value, maxLines, wrapWidth) {
-	const width = Math.max(1, wrapWidth);
-	text.style.wordWrapWidth = width;
-	if (!value || maxLines <= 0) {
-		if (text.text !== "") text.text = "";
-		return;
-	}
-	const charCap = Math.max(maxLines * Math.ceil(width), maxLines * 4);
-	const sample = value.length > charCap ? value.slice(0, charCap) : value;
-	const metrics = CanvasTextMetrics.measureText(sample, text.style);
-	if (!(metrics.lines.length > maxLines || sample !== value)) {
-		if (text.text !== value) text.text = value;
+//#region ../sdk/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;
 	}
-	const keptCount = Math.min(maxLines, metrics.lines.length);
-	const kept = metrics.lines.slice(0, keptCount);
-	const lastIndex = kept.length - 1;
-	const probe = text.style.clone();
-	probe.wordWrap = false;
-	kept[lastIndex] = fitLineWithEllipsis(kept[lastIndex] ?? "", width, (candidate) => CanvasTextMetrics.measureText(candidate, probe).width);
-	const fitted = kept.join("\n");
-	if (text.text !== fitted) text.text = fitted;
-}
-function linesInRoom(room, lineHeight, max) {
-	if (room < lineHeight * .85) return 0;
-	return Math.max(0, Math.min(max, Math.floor((room + .5) / lineHeight)));
+	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
+	});
 }
-function containCoverRect(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;
+const GAP$1 = 12;
+const WAVE_HEIGHT = 16;
+const partsByContainer$12 = /* @__PURE__ */ new WeakMap();
+function audioKeyCenter(width, height) {
+	const radius = Math.min(16, Math.max(8, height / 2 - 8), width / 4);
 	return {
-		x: (width - renderedWidth) / 2,
-		y: (height - renderedHeight) / 2,
-		width: renderedWidth,
-		height: renderedHeight
+		x: 14 + radius,
+		y: height / 2,
+		radius
 	};
 }
-function layoutCover(sprite, width, height, texture) {
-	const rect = containCoverRect(width, height, texture.width, texture.height);
-	sprite.position.set(rect.x, rect.y);
-	sprite.width = rect.width;
-	sprite.height = rect.height;
-}
-function syncClip(parts, width, height) {
-	parts.clip.clear().roundRect(0, 0, Math.max(1, width), Math.max(1, height), RADIUS$5).fill({ color: 16777215 });
-}
 function sync$12(container, item, context) {
 	const parts = partsByContainer$12.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 detail = detailFor(context.zoom);
-	const key = context.assetKey(item);
-	const texture = key ? context.getTexture(key) : null;
-	const coverFailed = Boolean(key && !texture && context.hasError(key));
-	const fileState = context.fileState(item.props.src);
-	const band = coverHeight(item, height);
-	const kind = filePreviewKind(item.props.snapshot);
-	const category = fileCategory(item.props.src, item.props.snapshot?.mimeType);
-	const accent = fileCategoryAccent(category, context.palette);
-	syncTextResolution(parts.title, parts.titleRes, context.zoom);
-	syncTextResolution(parts.excerpt, parts.excerptRes, context.zoom);
-	syncTextResolution(parts.typeMark, parts.typeMarkRes, context.zoom);
-	const visualSig = [
-		key ?? "",
+	const title = item.props.snapshot?.title ?? getMediaResourceTitle(item.props.src);
+	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,
-		detail,
-		texture ? `${texture.width}x${texture.height}` : "none",
-		coverFailed,
-		fileState,
-		kind,
-		category,
-		context.colorScheme,
-		context.palette.surface,
-		context.palette.hover,
-		accent
+		title,
+		durationMs ?? "",
+		detailed,
+		elevation,
+		item.props.src,
+		item.props.snapshot?.mtimeMs ?? "",
+		context.themeKey
 	].join("|");
-	if (visualSig !== parts.visualSig) {
-		parts.visualSig = visualSig;
-		syncClip(parts, width, height);
-		parts.plate.clear();
-		parts.plate.roundRect(0, 0, width, height, RADIUS$5).fill({
-			color: context.palette.surface,
-			alpha: .98
-		}).roundRect(0, 0, width, height, RADIUS$5).stroke({
-			color: selected ? context.palette.brand : hovered ? context.palette.muted : context.palette.border,
-			width: selected ? 2 : 1,
-			alpha: selected ? .95 : .85
+	if (sig === parts.sig) return;
+	parts.sig = sig;
+	drawCardSurface(parts.plate.clear(), {
+		x: 0,
+		y: 0,
+		width,
+		height
+	}, context.style, {
+		fill: context.palette.surface,
+		border: context.palette.border,
+		borderAlpha: .85,
+		elevation
+	});
+	const key = audioKeyCenter(width, height);
+	drawMediaPlayKey(parts.plate, key.x, key.y, key.radius, context, true);
+	const left = key.x + key.radius + GAP$1;
+	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",
+	canRender: (item) => item.type === "audio",
+	create: (item, context) => {
+		const root = new Container();
+		const plate = new Graphics();
+		const wave = new Graphics();
+		const resolution = textResolutionForZoom(context.zoom);
+		const title = new Text({
+			text: "",
+			style: {
+				fontSize: 13,
+				fontWeight: "600"
+			},
+			resolution,
+			roundPixels: true
 		});
-		if (fileState !== "ok") {
-			const dash = Math.max(6, width / MAX_DASHES / 2);
-			for (let x = 0; x < width; x += dash * 2) parts.plate.moveTo(x, .5).lineTo(Math.min(x + dash, width), .5);
-			parts.plate.stroke({
-				color: context.palette.muted,
-				width: 2,
-				alpha: fileState === "missing" ? .9 : .5
-			});
-		}
-		const showCover = band > 0 && Boolean(texture);
-		if (band > 0) parts.plate.rect(1, 1, width - 2, band - 1).fill({
-			color: context.palette.hover,
-			alpha: coverFailed ? .35 : .6
+		root.addChild(plate, wave, title);
+		partsByContainer$12.set(root, {
+			root,
+			plate,
+			wave,
+			title,
+			sig: "",
+			resolution
 		});
-		if (showCover && texture) {
-			if (parts.cover.texture !== texture) parts.cover.texture = texture;
-			layoutCover(parts.cover, width, band, texture);
-			parts.coverMask.clear().roundRect(0, 0, width, band, RADIUS$5).fill({ color: 16777215 });
-			parts.coverMask.rect(0, band - RADIUS$5, width, RADIUS$5).fill({ color: 16777215 });
-		}
-		parts.cover.visible = showCover;
-		parts.coverMask.visible = showCover;
-		if (!band) parts.plate.rect(1, 1, STRIPE, height - 2).fill({
-			color: accent,
-			alpha: .55
+		if (item.type === "audio") sync$12(root, item, context);
+		return root;
+	},
+	update: (container, item, context) => {
+		if (item.type === "audio") sync$12(container, item, context);
+	},
+	renderFar: (graphics, item, context) => {
+		drawFarPlate(graphics, item.frame, {
+			fill: context.palette.surface,
+			fillAlpha: .96,
+			accent: context.palette.brand,
+			accentAlpha: .72
 		});
-		parts.title.visible = detail !== "plate";
-		parts.excerpt.visible = detail === "full";
-		parts.typeMark.visible = kind === "blank" && detail !== "plate";
-	}
-	if (detail === "plate") {
-		parts.typeMark.visible = false;
-		return;
+	},
+	destroy: (container) => {
+		partsByContainer$12.get(container)?.root.destroy({ children: true });
+		partsByContainer$12.delete(container);
 	}
-	const title = item.props.snapshot?.title || fileStem(item.props.src);
-	const excerpt = item.props.snapshot?.excerpt ?? "";
-	const mark = fileTypeLabel(item.props.src);
-	const innerWidth = Math.max(1, width - 20);
-	const showTypeMark = kind === "blank";
-	const textSig = [
-		title,
-		excerpt,
-		mark,
-		detail,
-		innerWidth,
-		band,
-		height,
-		kind,
-		context.palette.text,
-		context.palette.muted,
-		accent
-	].join("|");
-	if (textSig === parts.textSig) return;
-	parts.textSig = textSig;
-	const top = band > 0 ? band + PADDING$1 * .8 : PADDING$1;
-	const contentBottom = height - PADDING$1;
-	let cursor = top;
-	if (showTypeMark) {
-		const markSize = Math.max(18, Math.min(TYPE_MARK_SIZE, Math.round(height * .22)));
-		parts.typeMark.style.fill = accent;
-		parts.typeMark.style.fontSize = markSize;
-		parts.typeMark.style.lineHeight = markSize * 1.1;
-		if (parts.typeMark.text !== mark) parts.typeMark.text = mark;
-		parts.typeMark.position.set(PADDING$1, cursor);
-		parts.typeMark.visible = true;
-		cursor += parts.typeMark.height + GAP;
-	} else parts.typeMark.visible = false;
-	const titleLines = linesInRoom(Math.max(0, contentBottom - cursor), TITLE_LINE, TITLE_MAX_LINES);
-	parts.title.style.fill = context.palette.text;
-	fitTextToLines(parts.title, title, titleLines, innerWidth);
-	parts.title.position.set(PADDING$1, cursor);
-	parts.title.visible = titleLines > 0;
-	if (detail !== "full") {
-		parts.excerpt.visible = false;
-		return;
+};
+//#endregion
+//#region ../sdk/src/board/render/renderers/arrow-card-renderer.ts
+const partsByContainer$11 = /* @__PURE__ */ new WeakMap();
+function sync$11(container, item, context) {
+	const parts = partsByContainer$11.get(container);
+	if (!parts) return;
+	parts.root.position.set(0, 0);
+	parts.root.rotation = 0;
+	parts.root.scale.set(1);
+	const { props, style } = item;
+	parts.line.alpha = itemAlpha(context, style.stroke);
+	const color = itemColor(context, style.stroke, "brand");
+	const size = style.strokeWidth ?? 2.5;
+	syncTextResolution(parts.label, parts, context.zoom);
+	const resolved = resolveSceneArrow(item, context.scene);
+	const path = trimPolyline(resolved.path, style.trim);
+	const lineSig = [
+		path.map((point) => `${point.x},${point.y}`).join(";"),
+		color,
+		size,
+		style.dash,
+		props.arrowStart,
+		props.arrowEnd
+	].join("|");
+	if (lineSig !== parts.lineSig) {
+		parts.lineSig = lineSig;
+		parts.line.clear();
+		const width = size;
+		const stroke = {
+			color,
+			width,
+			alpha: .92,
+			cap: "round",
+			join: "round"
+		};
+		tracePolyline(parts.line, path, dashPattern(style.dash, width));
+		parts.line.stroke(stroke);
+		const first = path[0];
+		const last = path[path.length - 1];
+		if (first && last) {
+			const span = Math.hypot(last.x - first.x, last.y - first.y);
+			const headSize = Math.min(Math.max(14, size * 5.5), Math.max(10, span * .28));
+			const complete = style.trim === void 0 || style.trim >= 1;
+			const endDirection = endAngle(path, false);
+			const startDirection = endAngle(path, true);
+			if (props.arrowEnd && endDirection !== null && path.length > 1) traceArrowhead(parts.line, last, endDirection, headSize);
+			if (props.arrowStart && startDirection !== null && complete) traceArrowhead(parts.line, first, startDirection, headSize);
+			parts.line.stroke({
+				...stroke,
+				width: Math.max(1.5, width)
+			});
+		}
 	}
-	const excerptTop = cursor + (titleLines > 0 ? parts.title.height + GAP : 0);
-	const excerptLines = linesInRoom(contentBottom - excerptTop, EXCERPT_LINE, EXCERPT_MAX_LINES);
-	const showExcerpt = Boolean(excerpt) && excerptLines > 0;
-	if (showExcerpt) {
-		parts.excerpt.style.fill = context.palette.muted;
-		fitTextToLines(parts.excerpt, excerpt, excerptLines, innerWidth);
-		parts.excerpt.position.set(PADDING$1, excerptTop);
+	const labelSig = [
+		props.label,
+		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 * .5;
+		const padY = props.fontSize * .25;
+		const { width, height } = parts.label;
+		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
+		});
 	}
-	parts.excerpt.visible = showExcerpt;
+	const visible = props.label.length > 0 && (style.trim === void 0 || style.trim >= .5);
+	parts.label.visible = visible;
+	parts.backdrop.visible = visible;
+	const mid = style.trim === void 0 ? resolved.mid : pathPointAt(resolved.path, .5);
+	parts.label.position.set(mid.x, mid.y);
+	parts.backdrop.position.set(mid.x, mid.y);
 }
-const fileCardRenderer = {
-	id: "file-card",
-	canRender: (item) => item.type === "file",
+const arrowCardRenderer = {
+	id: "arrow-card",
+	canRender: (item) => item.type === "arrow",
 	create: (item, context) => {
 		const root = new Container();
-		const plate = new Graphics();
-		const body = new Container();
-		const clip = new Graphics();
-		const cover = new Sprite(Texture.EMPTY);
-		const coverMask = new Graphics();
-		cover.mask = coverMask;
-		const resolution = 1;
-		const title = new Text({
-			text: "",
-			style: {
-				fill: context.palette.text,
-				fontFamily: BOARD_FONT_STACK,
-				fontSize: TITLE_SIZE,
-				fontWeight: "600",
-				wordWrap: true,
-				breakWords: true,
-				lineHeight: TITLE_LINE
-			},
-			resolution,
-			roundPixels: true
-		});
-		const excerpt = new Text({
+		const line = new Graphics();
+		const resolution = textResolutionForZoom(context.zoom);
+		const label = new Text({
 			text: "",
 			style: {
-				fill: context.palette.muted,
+				fill: 16777215,
 				fontFamily: BOARD_FONT_STACK,
-				fontSize: EXCERPT_SIZE,
-				fontWeight: "400",
-				wordWrap: true,
-				breakWords: true,
-				lineHeight: EXCERPT_LINE
-			},
-			resolution,
-			roundPixels: true
-		});
-		const typeMark = new Text({
-			text: "",
-			style: {
-				fill: context.palette.muted,
-				fontFamily: BOARD_MONO_FONT_STACK,
-				fontSize: TYPE_MARK_SIZE,
-				fontWeight: "700",
-				lineHeight: TYPE_MARK_SIZE * 1.1
+				fontSize: 14,
+				fontWeight: "500"
 			},
 			resolution,
 			roundPixels: true
 		});
-		body.mask = clip;
-		body.addChild(cover, coverMask, typeMark, title, excerpt);
-		root.addChild(plate, body, clip);
-		partsByContainer$12.set(root, {
+		label.anchor.set(.5);
+		const backdrop = new Graphics();
+		root.addChild(line, backdrop, label);
+		partsByContainer$11.set(root, {
 			root,
-			plate,
-			body,
-			clip,
-			cover,
-			coverMask,
-			typeMark,
-			title,
-			excerpt,
-			visualSig: "",
-			textSig: "",
-			titleRes: { resolution },
-			excerptRes: { resolution },
-			typeMarkRes: { resolution }
+			line,
+			backdrop,
+			label,
+			lineSig: "",
+			labelSig: "",
+			resolution
 		});
-		if (item.type === "file") sync$12(root, item, context);
+		if (item.type === "arrow") sync$11(root, item, context);
 		return root;
 	},
 	update: (container, item, context) => {
-		if (item.type === "file") sync$12(container, item, context);
+		if (item.type === "arrow") sync$11(container, item, context);
 	},
 	renderFar: (graphics, item, context) => {
-		const category = fileCategory(item.type === "file" ? item.props.src : "", item.type === "file" ? item.props.snapshot?.mimeType : void 0);
-		drawFarPlate(graphics, item.frame, {
-			fill: context.palette.surface,
-			fillAlpha: .96,
-			accent: fileCategoryAccent(category, context.palette),
-			accentAlpha: .45
+		if (item.type !== "arrow") return;
+		const arrow = item;
+		drawFarStroke(graphics, trimPolyline(resolveSceneArrow(arrow, context.scene).path, arrow.style.trim), {
+			color: itemColor(context, arrow.style.stroke, "brand"),
+			width: arrow.style.strokeWidth ?? 2.5,
+			alpha: .85 * itemAlpha(context, arrow.style.stroke)
 		});
 	},
 	destroy: (container) => {
-		partsByContainer$12.get(container)?.root.destroy({ children: true });
-		partsByContainer$12.delete(container);
+		partsByContainer$11.get(container)?.root.destroy({ children: true });
+		partsByContainer$11.delete(container);
 	}
 };
 //#endregion
-//#region ../sdk/src/board/render/renderers/task-card-renderer.ts
-const RADIUS$4 = 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$11 = /* @__PURE__ */ new WeakMap();
-function previewKindFor(artifact) {
-	if (!artifact) return "empty";
-	if (artifact.type === "image" || artifact.type === "video") return "texture";
-	if (artifact.type === "audio") return artifact.previewUrl ? "texture" : "waveform";
-	return artifact.textExcerpt ? "text" : "empty";
-}
-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 (status === "failed") return "failed";
-		return previewFailed ? "unavailable" : "media-loading";
+//#region ../sdk/src/board/render/renderers/draw-card-renderer.ts
+const partsByContainer$10 = /* @__PURE__ */ new WeakMap();
+function fillRibbon(graphics, ribbon, color) {
+	const { positions, indices } = ribbon;
+	for (let offset = 0; offset < indices.length; offset += 3) {
+		const a = (indices[offset] ?? 0) * 2;
+		const b = (indices[offset + 1] ?? 0) * 2;
+		const c = (indices[offset + 2] ?? 0) * 2;
+		graphics.moveTo(positions[a] ?? 0, positions[a + 1] ?? 0).lineTo(positions[b] ?? 0, positions[b + 1] ?? 0).lineTo(positions[c] ?? 0, positions[c + 1] ?? 0).closePath();
 	}
-	if (kind !== "empty") return null;
-	if (status === "failed") return "failed";
-	if (status === "running") return "generating";
-	if (status === "pending") return "queued";
-	return "empty";
+	return graphics.fill({ color });
 }
-function stateLabel(surface, context) {
-	switch (surface) {
-		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 replaceStroke(parts, next) {
+	if (parts.stroke) {
+		parts.root.removeChild(parts.stroke);
+		parts.stroke.destroy();
 	}
-}
-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 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;
-	const cy = rect.y + rect.height / 2;
-	graphics.circle(cx, cy, radius).fill({
-		color: context.palette.bg,
-		alpha: .64
-	});
-	const size = radius * .72;
-	graphics.moveTo(cx - size * .34, cy - size * .56).lineTo(cx + size * .62, cy).lineTo(cx - size * .34, cy + size * .56).closePath().fill({
-		color: context.palette.text,
-		alpha: .94
-	});
-}
-function drawStateMark(graphics, surface, cx, cy, color) {
-	if (surface === "generating" || surface === "media-loading") {
-		graphics.circle(cx, cy, 4).fill({
-			color,
-			alpha: .9
-		});
-		graphics.circle(cx - 12, cy + 7, 2.5).fill({
-			color,
-			alpha: .48
-		});
-		graphics.circle(cx + 11, cy + 6, 3).fill({
-			color,
-			alpha: .68
-		});
-		graphics.circle(cx + 3, cy - 12, 2).fill({
-			color,
-			alpha: .36
-		});
-		return;
-	}
-	if (surface === "queued") {
-		graphics.circle(cx, cy, 10).stroke({
-			color,
-			width: 1.5,
-			alpha: .62
-		}).circle(cx, cy, 3).fill({
-			color,
-			alpha: .78
-		});
-		return;
-	}
-	if (surface === "failed") {
-		graphics.circle(cx, cy, 11).stroke({
-			color,
-			width: 1.5,
-			alpha: .86
-		});
-		graphics.moveTo(cx - 4, cy - 4).lineTo(cx + 4, cy + 4).moveTo(cx + 4, cy - 4).lineTo(cx - 4, cy + 4).stroke({
-			color,
-			width: 1.5,
-			alpha: .94,
-			cap: "round"
-		});
-		return;
-	}
-	if (surface === "unavailable") graphics.roundRect(cx - 12, cy - 9, 24, 18, 3).stroke({
-		color,
-		width: 1.25,
-		alpha: .62
-	}).moveTo(cx - 8, cy + 5).lineTo(cx + 8, cy - 5).stroke({
-		color,
-		width: 1.25,
-		alpha: .72,
-		cap: "round"
-	});
-}
-function drawFailedBadge(graphics, width, color, context) {
-	const cx = Math.max(12, width - 12);
-	graphics.circle(cx, 12, 8).fill({
-		color: context.palette.bg,
-		alpha: .72
-	});
-	graphics.moveTo(cx - 2.5, 9.5).lineTo(cx + 2.5, 14.5).moveTo(cx + 2.5, 9.5).lineTo(cx - 2.5, 14.5).stroke({
-		color,
-		width: 1.5,
-		alpha: .96,
-		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));
-}
-function advance(parts, clock) {
-	const { motion } = parts;
-	let next = null;
-	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);
-		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$11(container, item, context) {
-	const parts = partsByContainer$11.get(container);
-	if (!parts) return;
-	positionShell(parts.root, item);
-	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 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);
-		parts.assetKey = key;
-		if (key) context.acquireTexture(key);
-	}
-	const texture = key ? context.getTexture(key) : null;
-	const previewFailed = Boolean(key && !texture && context.hasError(key));
-	const artifact = featuredTaskArtifact(snapshot.artifacts);
-	const kind = previewKindFor(artifact);
-	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 || working ? snapshot.model ?? "" : "";
-	const showMeta = full && Boolean(metaText);
-	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 ? formatTaskElapsed(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
-	].join("|");
-	if (textSig !== parts.textSig) {
-		parts.textSig = textSig;
-		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,
-		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.palette.text
-	].join("|");
-	if (visualSig !== parts.visualSig) {
-		parts.visualSig = visualSig;
-		parts.plate.clear().roundRect(0, 0, width, height, RADIUS$4).fill({
-			color: context.palette.surface,
-			alpha: .98
-		}).roundRect(0, 0, width, height, RADIUS$4).stroke({
-			color: selected ? context.palette.brand : hovered ? context.palette.muted : context.palette.border,
-			width: selected ? 2 : 1,
-			alpha: selected ? .96 : .82
-		});
-		parts.clip.clear().roundRect(1, 1, frame.width, frame.height, 3).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;
-		parts.previewArt.clear();
-		if (kind === "waveform") {
-			const bottomInset = showMeta ? META_HEIGHT : 0;
-			drawAudioWaveform(parts.previewArt, item.props.taskRunId, {
-				x: frame.x + PADDING,
-				y: frame.y + PADDING,
-				width: Math.max(1, frame.width - 24),
-				height: Math.max(1, frame.height - 24 - bottomInset)
-			}, context.colors.brand.stroke);
-		}
-		if (full && (artifact?.type === "audio" || artifact?.type === "video" && texture)) drawPlayBadge(parts.previewArt, frame, context);
-		if (surface) {
-			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);
-	}
-	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);
-		parts.preview.position.set(frame.x + fitted.x, frame.y + fitted.y);
-		parts.preview.width = fitted.width;
-		parts.preview.height = fitted.height;
-	}
-	parts.body.visible = full && Boolean(bodyText);
-	parts.detail.visible = full && Boolean(detailText);
-	parts.meta.visible = showMeta;
-	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;
-	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",
-	canRender: (item) => item.type === "task",
-	create: (item, context) => {
-		const root = new Container();
-		const plate = new Graphics();
-		const clip = new Graphics();
-		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 text = (fontFamily, fontSize, fontWeight) => new Text({
-			text: "",
-			style: {
-				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, shimmer, preview, previewMask, previewArt, body, detail, meta, badge);
-		partsByContainer$11.set(root, {
-			root,
-			plate,
-			clip,
-			previewBg,
-			preview,
-			previewMask,
-			shimmer,
-			previewArt,
-			badge,
-			body,
-			detail,
-			meta,
-			assetKey: null,
-			visualSig: "",
-			textSig: "",
-			resolution,
-			motion: {
-				itemId: "",
-				width: 0,
-				shimmer: false,
-				startedAt: null,
-				label: "",
-				elapsed: "",
-				revealFrom: null,
-				revealKey: null
-			}
-		});
-		if (item.type === "task") sync$11(root, item, context);
-		return root;
-	},
-	update: (container, item, context) => {
-		if (item.type === "task") sync$11(container, item, context);
-	},
-	tick: (container, clock) => {
-		const parts = partsByContainer$11.get(container);
-		return parts ? advance(parts, clock) : null;
-	},
-	renderFar: (graphics, item, context) => {
-		if (item.type !== "task") return;
-		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(status, context),
-				accentAlpha: .9
-			} : {}
-		});
-	},
-	destroy: (container, context) => {
-		const parts = partsByContainer$11.get(container);
-		if (parts?.assetKey) context.releaseTexture(parts.assetKey);
-		parts?.root.destroy({ children: true });
-		partsByContainer$11.delete(container);
-	}
-};
-//#endregion
-//#region ../sdk/src/board/render/stroke.ts
-const HEAD_SPREAD = Math.PI / 6;
-function dashPattern(dash, width) {
-	if (dash === "dashed") return [Math.max(6, width * 4), Math.max(4, width * 3)];
-	if (dash === "dotted") return [Math.max(.5, width * .01), Math.max(3, width * 2)];
-	return null;
-}
-function trimPolyline(path, trim) {
-	if (trim === void 0 || trim >= 1 || path.length < 2) return path;
-	if (trim <= 0) return [];
-	let total = 0;
-	for (let index = 1; index < path.length; index += 1) {
-		const a = path[index - 1];
-		const b = path[index];
-		total += Math.hypot(b.x - a.x, b.y - a.y);
-	}
-	let remaining = total * trim;
-	const out = [path[0]];
-	for (let index = 1; index < path.length; index += 1) {
-		const a = path[index - 1];
-		const b = path[index];
-		const length = Math.hypot(b.x - a.x, b.y - a.y);
-		if (length >= remaining) {
-			const t = length > 0 ? remaining / length : 0;
-			out.push(worldPoint(a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t));
-			return out;
-		}
-		out.push(b);
-		remaining -= length;
-	}
-	return out;
-}
-function tracePolyline(graphics, path, pattern, closed = false) {
-	const points = closed && path.length > 2 ? [...path, path[0]] : path;
-	if (points.length < 2) return;
-	if (!pattern) {
-		const first = points[0];
-		graphics.moveTo(first.x, first.y);
-		for (let index = 1; index < points.length; index += 1) {
-			const point = points[index];
-			graphics.lineTo(point.x, point.y);
-		}
-		if (closed) graphics.closePath();
-		return;
-	}
-	const [dash, gap] = pattern;
-	let penDown = true;
-	let fresh = true;
-	let remaining = dash;
-	for (let index = 1; index < points.length; index += 1) {
-		const a = points[index - 1];
-		const b = points[index];
-		const dx = b.x - a.x;
-		const dy = b.y - a.y;
-		const length = Math.hypot(dx, dy);
-		let travelled = 0;
-		while (length - travelled > 1e-4) {
-			const step = Math.min(length - travelled, remaining);
-			if (penDown) {
-				const t0 = travelled / length;
-				const t1 = (travelled + step) / length;
-				if (fresh) graphics.moveTo(a.x + dx * t0, a.y + dy * t0);
-				fresh = false;
-				graphics.lineTo(a.x + dx * t1, a.y + dy * t1);
-			}
-			travelled += step;
-			remaining -= step;
-			if (remaining <= 1e-4) {
-				penDown = !penDown;
-				fresh = penDown;
-				remaining = penDown ? dash : gap;
-			}
-		}
-	}
-}
-function traceArrowhead(graphics, tip, angle, size) {
-	graphics.moveTo(tip.x - size * Math.cos(angle - HEAD_SPREAD), tip.y - size * Math.sin(angle - HEAD_SPREAD)).lineTo(tip.x, tip.y).lineTo(tip.x - size * Math.cos(angle + HEAD_SPREAD), tip.y - size * Math.sin(angle + HEAD_SPREAD));
-}
-function endAngle(path, atStart) {
-	if (path.length < 2) return null;
-	const tip = atStart ? path[0] : path[path.length - 1];
-	for (let offset = 1; offset < path.length; offset += 1) {
-		const other = atStart ? path[offset] : path[path.length - 1 - offset];
-		if (Math.hypot(tip.x - other.x, tip.y - other.y) > .001) return Math.atan2(tip.y - other.y, tip.x - other.x);
-	}
-	return null;
-}
-function roundRectPoints(width, height, radius) {
-	const r = Math.min(radius, width / 2, height / 2);
-	if (r <= 0) return [
-		worldPoint(0, 0),
-		worldPoint(width, 0),
-		worldPoint(width, height),
-		worldPoint(0, height),
-		worldPoint(0, 0)
-	];
-	const corner = (cx, cy, from) => Array.from({ length: 9 }, (_, index) => {
-		const angle = from + index / 8 * (Math.PI / 2);
-		return worldPoint(cx + Math.cos(angle) * r, cy + Math.sin(angle) * r);
-	});
-	return [
-		...corner(width - r, r, -Math.PI / 2),
-		...corner(width - r, height - r, 0),
-		...corner(r, height - r, Math.PI / 2),
-		...corner(r, r, Math.PI),
-		worldPoint(width - r, 0)
-	];
-}
-//#endregion
-//#region ../sdk/src/board/render/renderers/arrow-card-renderer.ts
-const partsByContainer$10 = /* @__PURE__ */ new WeakMap();
-function sync$10(container, item, context) {
-	const parts = partsByContainer$10.get(container);
-	if (!parts) return;
-	parts.root.position.set(0, 0);
-	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;
-	syncTextResolution(parts.label, parts, context.zoom);
-	const resolved = resolveSceneArrow(item, context.scene);
-	const path = trimPolyline(resolved.path, style.trim);
-	const lineSig = [
-		path.map((point) => `${point.x},${point.y}`).join(";"),
-		selected,
-		hovered,
-		color,
-		size,
-		style.dash,
-		props.arrowStart,
-		props.arrowEnd
-	].join("|");
-	if (lineSig !== parts.lineSig) {
-		parts.lineSig = lineSig;
-		parts.line.clear();
-		const width = selected ? size + 1 : size;
-		const stroke = {
-			color,
-			width,
-			alpha: selected || hovered ? 1 : .92,
-			cap: "round",
-			join: "round"
-		};
-		tracePolyline(parts.line, path, dashPattern(style.dash, width));
-		parts.line.stroke(stroke);
-		const first = path[0];
-		const last = path[path.length - 1];
-		if (first && last) {
-			const span = Math.hypot(last.x - first.x, last.y - first.y);
-			const headSize = Math.min(Math.max(14, size * 5.5), Math.max(10, span * .28));
-			const complete = style.trim === void 0 || style.trim >= 1;
-			const endDirection = endAngle(path, false);
-			const startDirection = endAngle(path, true);
-			if (props.arrowEnd && endDirection !== null && path.length > 1) traceArrowhead(parts.line, last, endDirection, headSize);
-			if (props.arrowStart && startDirection !== null && complete) traceArrowhead(parts.line, first, startDirection, headSize);
-			parts.line.stroke({
-				...stroke,
-				width: Math.max(1.5, width)
-			});
-		}
-	}
-	const labelSig = [
-		props.label,
-		context.palette.text,
-		context.palette.bg,
-		props.fontSize
-	].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 { 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 visible = props.label.length > 0 && (style.trim === void 0 || style.trim >= .5);
-	parts.label.visible = visible;
-	parts.backdrop.visible = visible;
-	const mid = style.trim === void 0 ? resolved.mid : pathPointAt(resolved.path, .5);
-	parts.label.position.set(mid.x, mid.y);
-	parts.backdrop.position.set(mid.x, mid.y);
-}
-const arrowCardRenderer = {
-	id: "arrow-card",
-	canRender: (item) => item.type === "arrow",
-	create: (item, context) => {
-		const root = new Container();
-		const line = new Graphics();
-		const resolution = textResolutionForZoom(context.zoom);
-		const label = new Text({
-			text: "",
-			style: {
-				fill: 16777215,
-				fontFamily: BOARD_FONT_STACK,
-				fontSize: 14,
-				fontWeight: "500"
-			},
-			resolution,
-			roundPixels: true
-		});
-		label.anchor.set(.5);
-		const backdrop = new Graphics();
-		root.addChild(line, backdrop, label);
-		partsByContainer$10.set(root, {
-			root,
-			line,
-			backdrop,
-			label,
-			lineSig: "",
-			labelSig: "",
-			resolution
-		});
-		if (item.type === "arrow") sync$10(root, item, context);
-		return root;
-	},
-	update: (container, item, context) => {
-		if (item.type === "arrow") sync$10(container, item, context);
-	},
-	renderFar: (graphics, item, context) => {
-		if (item.type !== "arrow") return;
-		const arrow = item;
-		drawFarStroke(graphics, trimPolyline(resolveSceneArrow(arrow, context.scene).path, arrow.style.trim), {
-			color: itemColor(context, arrow.style.stroke, "brand"),
-			width: arrow.style.strokeWidth ?? 2.5,
-			alpha: .85 * itemAlpha(context, arrow.style.stroke)
-		});
-	},
-	destroy: (container) => {
-		partsByContainer$10.get(container)?.root.destroy({ children: true });
-		partsByContainer$10.delete(container);
-	}
-};
-//#endregion
-//#region ../sdk/src/board/render/renderers/audio-card-renderer.ts
-const RADIUS$3 = 4;
-const PLAY_RADIUS = 18;
-const partsByContainer$9 = /* @__PURE__ */ new WeakMap();
-function sync$9(container, item, context) {
-	const parts = partsByContainer$9.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 sig = [
-		width,
-		height,
-		selected,
-		hovered,
-		title,
-		parts.label.height,
-		context.palette.surface,
-		context.palette.brand,
-		context.palette.border,
-		context.palette.muted,
-		context.palette.text
-	].join("|");
-	if (sig === parts.sig) return;
-	parts.sig = sig;
-	parts.plate.clear().roundRect(0, 0, width, height, RADIUS$3).fill({
-		color: context.palette.surface,
-		alpha: .98
-	}).roundRect(0, 0, width, height, RADIUS$3).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
-	});
-	parts.label.style.fill = context.palette.text;
-}
-const audioCardRenderer = {
-	id: "audio-card",
-	canRender: (item) => item.type === "audio",
-	create: (item, context) => {
-		const root = new Container();
-		const plate = new Graphics();
-		const waveform = new Graphics();
-		const chrome = new Graphics();
-		const resolution = textResolutionForZoom(context.zoom);
-		const label = new Text({
-			text: "",
-			style: {
-				fill: context.palette.text,
-				fontFamily: BOARD_FONT_STACK,
-				fontSize: 12,
-				fontWeight: "500",
-				wordWrap: true
-			},
-			resolution,
-			roundPixels: true
-		});
-		root.addChild(plate, waveform, chrome, label);
-		partsByContainer$9.set(root, {
-			root,
-			plate,
-			waveform,
-			chrome,
-			label,
-			sig: "",
-			wrapWidth: 0,
-			resolution
-		});
-		if (item.type === "audio") sync$9(root, item, context);
-		return root;
-	},
-	update: (container, item, context) => {
-		if (item.type === "audio") sync$9(container, item, context);
-	},
-	renderFar: (graphics, item, context) => {
-		drawFarPlate(graphics, item.frame, {
-			fill: context.palette.surface,
-			fillAlpha: .96,
-			accent: context.palette.brand,
-			accentAlpha: .72
-		});
-	},
-	destroy: (container) => {
-		partsByContainer$9.get(container)?.root.destroy({ children: true });
-		partsByContainer$9.delete(container);
-	}
-};
-//#endregion
-//#region ../sdk/src/board/render/renderers/draw-card-renderer.ts
-const partsByContainer$8 = /* @__PURE__ */ new WeakMap();
-function fillRibbon(graphics, ribbon, color) {
-	const { positions, indices } = ribbon;
-	for (let offset = 0; offset < indices.length; offset += 3) {
-		const a = (indices[offset] ?? 0) * 2;
-		const b = (indices[offset + 1] ?? 0) * 2;
-		const c = (indices[offset + 2] ?? 0) * 2;
-		graphics.moveTo(positions[a] ?? 0, positions[a + 1] ?? 0).lineTo(positions[b] ?? 0, positions[b + 1] ?? 0).lineTo(positions[c] ?? 0, positions[c + 1] ?? 0).closePath();
-	}
-	return graphics.fill({ color });
-}
-function replaceStroke(parts, next) {
-	if (parts.stroke) {
-		parts.root.removeChild(parts.stroke);
-		parts.stroke.destroy();
-	}
-	parts.stroke = next;
-	parts.root.addChild(next);
-	return next;
+	parts.stroke = next;
+	parts.root.addChild(next);
+	return next;
 }
 function tessellate(parts, points, size, paint) {
 	parts.ribbon ??= createStrokeRibbonBuilder(size);
@@ -28634,8 +28244,8 @@ function tessellate(parts, points, size, paint) {
 		texture: Texture.WHITE
 	}));
 }
-function sync$8(container, item, context) {
-	const parts = partsByContainer$8.get(container);
+function sync$10(container, item, context) {
+	const parts = partsByContainer$10.get(container);
 	if (!parts) return;
 	positionShell(parts.root, item);
 	const { points } = item.props;
@@ -28668,7 +28278,7 @@ const drawCardRenderer = {
 	canRender: (item) => item.type === "draw",
 	create: (item, context) => {
 		const root = new Container();
-		partsByContainer$8.set(root, {
+		partsByContainer$10.set(root, {
 			root,
 			stroke: null,
 			ribbon: null,
@@ -28685,11 +28295,11 @@ const drawCardRenderer = {
 				height: 1
 			}
 		});
-		if (item.type === "draw") sync$8(root, item, context);
+		if (item.type === "draw") sync$10(root, item, context);
 		return root;
 	},
 	update: (container, item, context) => {
-		if (item.type === "draw") sync$8(container, item, context);
+		if (item.type === "draw") sync$10(container, item, context);
 	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "draw") return;
@@ -28702,15 +28312,15 @@ const drawCardRenderer = {
 		});
 	},
 	destroy: (container) => {
-		partsByContainer$8.get(container)?.root.destroy({ children: true });
-		partsByContainer$8.delete(container);
+		partsByContainer$10.get(container)?.root.destroy({ children: true });
+		partsByContainer$10.delete(container);
 	}
 };
 //#endregion
 //#region ../sdk/src/board/render/renderers/effect-card-renderer.ts
 const BOARD_EFFECT_MAX_PARTICLES = 4e3;
 const TRAIL_SAMPLES = 64;
-const partsByContainer$7 = /* @__PURE__ */ new WeakMap();
+const partsByContainer$9 = /* @__PURE__ */ new WeakMap();
 function hashString(value) {
 	let hash = 2166136261;
 	for (let index = 0; index < value.length; index += 1) {
@@ -28850,88 +28460,349 @@ function drawTrail(graphics, parts, item, context, color) {
 			cap: "round"
 		});
 	}
-}
-function sync$7(container, item, context) {
-	const parts = partsByContainer$7.get(container);
-	if (!parts) return;
-	positionShell(parts.root, item);
-	const { width, height } = item.frame;
-	const { props } = item;
-	const color = itemColor(context, item.style.fill ?? item.style.stroke, "brand", "fill");
-	const seed = hashString(props.seed ?? item.id);
-	const time = Math.max(0, context.time);
-	const graphics = parts.graphics;
-	graphics.alpha = itemAlpha(context, item.style.fill ?? item.style.stroke);
-	graphics.clear();
-	switch (props.kind) {
-		case "particles":
-			drawParticles(graphics, props, width, height, time, seed, color);
-			break;
-		case "impact":
-			drawImpact(graphics, props, width, height, time, seed, color);
-			break;
-		case "flash":
-			drawFlash(graphics, props, width, height, time, color);
-			break;
-		case "glow":
-			drawGlow(graphics, props, width, height, time, color);
-			break;
-		case "trail": drawTrail(graphics, parts, item, context, color);
+}
+function sync$9(container, item, context) {
+	const parts = partsByContainer$9.get(container);
+	if (!parts) return;
+	positionShell(parts.root, item);
+	const { width, height } = item.frame;
+	const { props } = item;
+	const color = itemColor(context, item.style.fill ?? item.style.stroke, "brand", "fill");
+	const seed = hashString(props.seed ?? item.id);
+	const time = Math.max(0, context.time);
+	const graphics = parts.graphics;
+	graphics.alpha = itemAlpha(context, item.style.fill ?? item.style.stroke);
+	graphics.clear();
+	switch (props.kind) {
+		case "particles":
+			drawParticles(graphics, props, width, height, time, seed, color);
+			break;
+		case "impact":
+			drawImpact(graphics, props, width, height, time, seed, color);
+			break;
+		case "flash":
+			drawFlash(graphics, props, width, height, time, color);
+			break;
+		case "glow":
+			drawGlow(graphics, props, width, height, time, color);
+			break;
+		case "trail": drawTrail(graphics, parts, item, context, color);
+	}
+}
+const effectCardRenderer = {
+	id: "effect-card",
+	canRender: (item) => item.type === "effect",
+	animated: true,
+	create: (item, context) => {
+		const root = new Container();
+		const graphics = new Graphics();
+		root.addChild(graphics);
+		partsByContainer$9.set(root, {
+			root,
+			graphics,
+			trail: []
+		});
+		if (item.type === "effect") sync$9(root, item, context);
+		return root;
+	},
+	update: (container, item, context) => {
+		if (item.type === "effect") sync$9(container, item, context);
+	},
+	renderFar: (graphics, item, context) => {
+		if (item.type !== "effect") return;
+		drawFarPlate(graphics, item.frame, {
+			fill: itemColor(context, item.style.fill, "brand", "fill"),
+			fillAlpha: .08
+		});
+	},
+	destroy: (container) => {
+		partsByContainer$9.get(container)?.root.destroy({ children: true });
+		partsByContainer$9.delete(container);
+	}
+};
+//#endregion
+//#region ../sdk/src/board/render/renderers/file-card-renderer.ts
+const PADDING$1 = 10;
+const COVER_RATIO = .56;
+const MIN_BODY_FOR_COVER = 38;
+const TITLE_SIZE = 13;
+const TITLE_LINE = TITLE_SIZE * 1.35;
+const TITLE_MAX_LINES = 2;
+const EXCERPT_SIZE = 11;
+const EXCERPT_LINE = EXCERPT_SIZE * 1.45;
+const EXCERPT_MAX_LINES = 3;
+const TYPE_MARK_SIZE = 28;
+const GAP = 4;
+const STRIPE = 2;
+const MAX_DASHES = 40;
+const partsByContainer$8 = /* @__PURE__ */ new WeakMap();
+function detailFor(zoom) {
+	return boardCardDetailed(zoom) ? "full" : "title";
+}
+function coverHeight(item, height) {
+	if (filePreviewKind(item.props.snapshot) !== "cover") return 0;
+	const ideal = Math.round(height * COVER_RATIO);
+	return Math.max(0, Math.min(ideal, height - MIN_BODY_FOR_COVER));
+}
+function linesInRoom(room, lineHeight, max) {
+	if (room < lineHeight * .85) return 0;
+	return Math.max(0, Math.min(max, Math.floor((room + .5) / lineHeight)));
+}
+function layoutCover(sprite, width, height, texture) {
+	const rect = containRect(width, height, texture.width, texture.height);
+	sprite.position.set(rect.x, rect.y);
+	sprite.width = rect.width;
+	sprite.height = rect.height;
+}
+function syncClip(parts, rect, style) {
+	traceCardOutline(parts.clip.clear(), rect, style).fill({ color: 16777215 });
+}
+function sync$8(container, item, context) {
+	const parts = partsByContainer$8.get(container);
+	if (!parts) return;
+	positionShell(parts.root, item);
+	const { width, height } = item.frame;
+	const detail = detailFor(context.zoom);
+	const elevation = cardElevation(context, item.id);
+	syncCardTag(parts.tag, {
+		glyph: "file",
+		text: fileMetaLine(item.props.src, item.props.snapshot?.size),
+		width
+	}, context);
+	const key = context.assetKey(item);
+	const texture = key ? context.getTexture(key) : null;
+	const coverFailed = Boolean(key && !texture && context.hasError(key));
+	const fileState = context.fileState(item.props.src);
+	const band = coverHeight(item, height);
+	const kind = filePreviewKind(item.props.snapshot);
+	const category = fileCategory(item.props.src, item.props.snapshot?.mimeType);
+	const accent = fileCategoryAccent(category, context.palette);
+	syncTextResolution(parts.title, parts.titleRes, context.zoom);
+	syncTextResolution(parts.excerpt, parts.excerptRes, context.zoom);
+	syncTextResolution(parts.typeMark, parts.typeMarkRes, context.zoom);
+	const visualSig = [
+		key ?? "",
+		width,
+		height,
+		detail,
+		elevation,
+		texture ? `${texture.width}x${texture.height}` : "none",
+		coverFailed,
+		fileState,
+		kind,
+		category,
+		context.themeKey,
+		accent
+	].join("|");
+	if (visualSig !== parts.visualSig) {
+		parts.visualSig = visualSig;
+		const rect = {
+			x: 0,
+			y: 0,
+			width,
+			height
+		};
+		syncClip(parts, rect, context.style);
+		drawCardSurface(parts.plate.clear(), rect, context.style, {
+			fill: context.palette.surface,
+			border: context.palette.border,
+			borderAlpha: .85,
+			elevation
+		});
+		if (fileState !== "ok") {
+			const dash = Math.max(6, width / MAX_DASHES / 2);
+			for (let x = 0; x < width; x += dash * 2) parts.plate.moveTo(x, .5).lineTo(Math.min(x + dash, width), .5);
+			parts.plate.stroke({
+				color: context.palette.muted,
+				width: 2,
+				alpha: fileState === "missing" ? .9 : .5
+			});
+		}
+		const showCover = band > 0 && Boolean(texture);
+		if (band > 0) parts.plate.rect(1, 1, width - 2, band - 1).fill({
+			color: context.palette.hover,
+			alpha: coverFailed ? .35 : .6
+		});
+		if (showCover && texture) {
+			if (parts.cover.texture !== texture) parts.cover.texture = texture;
+			layoutCover(parts.cover, width, band, texture);
+			parts.coverMask.clear().rect(0, 0, width, band).fill({ color: 16777215 });
+		}
+		parts.cover.visible = showCover;
+		parts.coverMask.visible = showCover;
+		if (!band) parts.plate.rect(1, 1, STRIPE, height - 2).fill({
+			color: accent,
+			alpha: .55
+		});
+		parts.excerpt.visible = detail === "full";
+		parts.typeMark.visible = kind === "blank";
+	}
+	const title = item.props.snapshot?.title || fileStem(item.props.src);
+	const excerpt = item.props.snapshot?.excerpt ?? "";
+	const mark = fileTypeLabel(item.props.src);
+	const innerWidth = Math.max(1, width - 20);
+	const showTypeMark = kind === "blank";
+	const textSig = [
+		title,
+		excerpt,
+		mark,
+		detail,
+		innerWidth,
+		band,
+		height,
+		kind,
+		context.palette.text,
+		context.palette.muted,
+		context.style.font,
+		accent
+	].join("|");
+	if (textSig === parts.textSig) return;
+	parts.textSig = textSig;
+	parts.title.style.fontFamily = context.style.font;
+	parts.excerpt.style.fontFamily = context.style.font;
+	const top = band > 0 ? band + PADDING$1 * .8 : PADDING$1;
+	const contentBottom = height - PADDING$1;
+	let cursor = top;
+	if (showTypeMark) {
+		const markSize = Math.max(18, Math.min(TYPE_MARK_SIZE, Math.round(height * .22)));
+		parts.typeMark.style.fill = accent;
+		parts.typeMark.style.fontSize = markSize;
+		parts.typeMark.style.lineHeight = markSize * 1.1;
+		if (parts.typeMark.text !== mark) parts.typeMark.text = mark;
+		parts.typeMark.position.set(PADDING$1, cursor);
+		parts.typeMark.visible = true;
+		cursor += parts.typeMark.height + GAP;
+	} else parts.typeMark.visible = false;
+	const titleLines = linesInRoom(Math.max(0, contentBottom - cursor), TITLE_LINE, TITLE_MAX_LINES);
+	parts.title.style.fill = context.palette.text;
+	fitTextToLines(parts.title, title, titleLines, innerWidth);
+	parts.title.position.set(PADDING$1, cursor);
+	parts.title.visible = titleLines > 0;
+	if (detail !== "full") {
+		parts.excerpt.visible = false;
+		return;
+	}
+	const excerptTop = cursor + (titleLines > 0 ? parts.title.height + GAP : 0);
+	const excerptLines = linesInRoom(contentBottom - excerptTop, EXCERPT_LINE, EXCERPT_MAX_LINES);
+	const showExcerpt = Boolean(excerpt) && excerptLines > 0;
+	if (showExcerpt) {
+		parts.excerpt.style.fill = context.palette.muted;
+		fitTextToLines(parts.excerpt, excerpt, excerptLines, innerWidth);
+		parts.excerpt.position.set(PADDING$1, excerptTop);
 	}
-	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
-	});
+	parts.excerpt.visible = showExcerpt;
 }
-const effectCardRenderer = {
-	id: "effect-card",
-	canRender: (item) => item.type === "effect",
-	animated: true,
+const fileCardRenderer = {
+	id: "file-card",
+	canRender: (item) => item.type === "file",
 	create: (item, context) => {
 		const root = new Container();
-		const graphics = new Graphics();
-		root.addChild(graphics);
-		partsByContainer$7.set(root, {
+		const plate = new Graphics();
+		const body = new Container();
+		const clip = new Graphics();
+		const cover = new Sprite(Texture.EMPTY);
+		const coverMask = new Graphics();
+		cover.mask = coverMask;
+		const resolution = 1;
+		const title = new Text({
+			text: "",
+			style: {
+				fill: context.palette.text,
+				fontFamily: BOARD_FONT_STACK,
+				fontSize: TITLE_SIZE,
+				fontWeight: "600",
+				wordWrap: true,
+				breakWords: true,
+				lineHeight: TITLE_LINE
+			},
+			resolution,
+			roundPixels: true
+		});
+		const excerpt = new Text({
+			text: "",
+			style: {
+				fill: context.palette.muted,
+				fontFamily: BOARD_FONT_STACK,
+				fontSize: EXCERPT_SIZE,
+				fontWeight: "400",
+				wordWrap: true,
+				breakWords: true,
+				lineHeight: EXCERPT_LINE
+			},
+			resolution,
+			roundPixels: true
+		});
+		const typeMark = new Text({
+			text: "",
+			style: {
+				fill: context.palette.muted,
+				fontFamily: BOARD_MONO_FONT_STACK,
+				fontSize: TYPE_MARK_SIZE,
+				fontWeight: "700",
+				lineHeight: TYPE_MARK_SIZE * 1.1
+			},
+			resolution,
+			roundPixels: true
+		});
+		body.mask = clip;
+		body.addChild(cover, coverMask, typeMark, title, excerpt);
+		const tag = createCardTag();
+		root.addChild(plate, body, clip, tag.root);
+		partsByContainer$8.set(root, {
+			tag,
 			root,
-			graphics,
-			trail: []
+			plate,
+			body,
+			clip,
+			cover,
+			coverMask,
+			typeMark,
+			title,
+			excerpt,
+			visualSig: "",
+			textSig: "",
+			titleRes: { resolution },
+			excerptRes: { resolution },
+			typeMarkRes: { resolution }
 		});
-		if (item.type === "effect") sync$7(root, item, context);
+		if (item.type === "file") sync$8(root, item, context);
 		return root;
 	},
 	update: (container, item, context) => {
-		if (item.type === "effect") sync$7(container, item, context);
+		if (item.type === "file") sync$8(container, item, context);
+	},
+	zoom: (container, zoom) => {
+		const tag = partsByContainer$8.get(container)?.tag;
+		if (tag) zoomCardTag(tag, zoom);
 	},
 	renderFar: (graphics, item, context) => {
-		if (item.type !== "effect") return;
+		const category = fileCategory(item.type === "file" ? item.props.src : "", item.type === "file" ? item.props.snapshot?.mimeType : void 0);
 		drawFarPlate(graphics, item.frame, {
-			fill: itemColor(context, item.style.fill, "brand", "fill"),
-			fillAlpha: .08
+			fill: context.palette.surface,
+			fillAlpha: .96,
+			accent: fileCategoryAccent(category, context.palette),
+			accentAlpha: .45
 		});
 	},
 	destroy: (container) => {
-		partsByContainer$7.get(container)?.root.destroy({ children: true });
-		partsByContainer$7.delete(container);
+		partsByContainer$8.get(container)?.root.destroy({ children: true });
+		partsByContainer$8.delete(container);
 	}
 };
 //#endregion
 //#region ../sdk/src/board/render/renderers/frame-card-renderer.ts
-const partsByContainer$6 = /* @__PURE__ */ new WeakMap();
+const partsByContainer$7 = /* @__PURE__ */ new WeakMap();
 const DEFAULT_WASH = .04;
-function sync$6(container, item, context) {
-	const parts = partsByContainer$6.get(container);
+function sync$7(container, item, context) {
+	const parts = partsByContainer$7.get(container);
 	if (!parts) return;
 	const { frame, style, props, locked } = item;
 	positionShell(parts.root, item);
 	syncTextResolution(parts.label, parts, context.zoom);
-	const selected = context.selectedIds.has(item.id);
-	const hovered = context.hoveredId === item.id;
 	const fill = itemColor(context, style.fill ?? style.stroke, "neutral", "fill");
 	const fillAlpha = (style.fillOpacity ?? (style.fill ? 1 : DEFAULT_WASH)) * itemAlpha(context, style.fill ?? style.stroke);
 	const baseStroke = itemColor(context, style.stroke, "neutral");
-	const stroke = selected ? context.palette.brand : hovered && style.stroke ? context.palette.muted : baseStroke;
-	const alpha = (selected || style.stroke ? 1 : hovered ? .85 : .55) * itemAlpha(context, style.stroke);
+	const alpha = (style.stroke ? 1 : .55) * itemAlpha(context, style.stroke);
 	const radius = style.radius ?? 4;
 	const strokeWidth = style.strokeWidth ?? 1.5;
 	const decorated = props.decoration !== "none";
@@ -28939,11 +28810,9 @@ function sync$6(container, item, context) {
 		props.decoration,
 		frame.width,
 		frame.height,
-		selected,
-		hovered,
 		fill,
 		fillAlpha,
-		stroke,
+		baseStroke,
 		alpha,
 		radius,
 		strokeWidth,
@@ -28957,15 +28826,14 @@ function sync$6(container, item, context) {
 			color: fill,
 			alpha: fillAlpha
 		});
-		const width = selected ? Math.max(2, strokeWidth) : strokeWidth;
-		const pattern = decorated ? dashPattern(style.dash, width) : null;
-		const trim = decorated ? style.trim ?? 1 : 1;
-		if ((decorated && strokeWidth > 0 || selected || hovered) && trim > 0) {
+		const pattern = dashPattern(style.dash, strokeWidth);
+		const trim = style.trim ?? 1;
+		if (decorated && strokeWidth > 0 && trim > 0) {
 			if (pattern || trim < 1) tracePolyline(parts.box, trimPolyline(roundRectPoints(frame.width, frame.height, radius), trim), pattern);
 			else parts.box.roundRect(0, 0, frame.width, frame.height, radius);
 			parts.box.stroke({
-				color: stroke,
-				width,
+				color: baseStroke,
+				width: strokeWidth,
 				alpha,
 				cap: pattern || trim < 1 ? "round" : "butt",
 				join: "round"
@@ -28975,11 +28843,16 @@ function sync$6(container, item, context) {
 	parts.label.visible = decorated;
 	const title = locked ? `🔒 ${props.label}`.trim() : props.label;
 	const labelColor = style.stroke ? baseStroke : context.palette.muted;
-	const textSig = [title, labelColor].join("|");
+	const textSig = [
+		title,
+		labelColor,
+		context.style.font
+	].join("|");
 	if (textSig !== parts.textSig) {
 		parts.textSig = textSig;
 		parts.label.text = title;
 		parts.label.style.fill = labelColor;
+		parts.label.style.fontFamily = context.style.font;
 	}
 	parts.label.position.set(4, -18);
 }
@@ -28996,7 +28869,7 @@ const frameCardRenderer = {
 			fontWeight: "600"
 		});
 		root.addChild(box, label);
-		partsByContainer$6.set(root, {
+		partsByContainer$7.set(root, {
 			root,
 			box,
 			label,
@@ -29004,11 +28877,11 @@ const frameCardRenderer = {
 			textSig: "",
 			resolution: label.resolution
 		});
-		if (item.type === "frame") sync$6(root, item, context);
+		if (item.type === "frame") sync$7(root, item, context);
 		return root;
 	},
 	update: (container, item, context) => {
-		if (item.type === "frame") sync$6(container, item, context);
+		if (item.type === "frame") sync$7(container, item, context);
 	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "frame" || item.props.decoration === "none") return;
@@ -29018,14 +28891,14 @@ const frameCardRenderer = {
 		});
 	},
 	destroy: (container) => {
-		partsByContainer$6.delete(container);
+		partsByContainer$7.delete(container);
 		container.destroy({ children: true });
 	}
 };
 //#endregion
 //#region ../sdk/src/board/render/renderers/shape-card-renderer.ts
 const DEFAULT_ROUNDED_RADIUS = 8;
-const partsByContainer$5 = /* @__PURE__ */ new WeakMap();
+const partsByContainer$6 = /* @__PURE__ */ new WeakMap();
 const pathCache = /* @__PURE__ */ new Map();
 function parsedPath(d) {
 	if (pathCache.has(d)) return pathCache.get(d) ?? null;
@@ -29106,14 +28979,12 @@ function outlinePoints(geometry, width, height, radius) {
 		default: return roundRectPoints(width, height, radius);
 	}
 }
-function sync$5(container, item, context) {
-	const parts = partsByContainer$5.get(container);
+function sync$6(container, item, context) {
+	const parts = partsByContainer$6.get(container);
 	if (!parts) return;
 	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);
@@ -29123,8 +28994,6 @@ function sync$5(container, item, context) {
 	const visualSig = [
 		width,
 		height,
-		selected,
-		hovered,
 		props.geometry,
 		props.path,
 		fill,
@@ -29134,8 +29003,7 @@ function sync$5(container, item, context) {
 		strokeWidth,
 		style.dash,
 		style.radius,
-		style.trim,
-		context.palette.muted
+		style.trim
 	].join("|");
 	if (visualSig !== parts.visualSig) {
 		parts.visualSig = visualSig;
@@ -29147,8 +29015,7 @@ function sync$5(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") {
@@ -29156,9 +29023,9 @@ function sync$5(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"
 			});
@@ -29189,305 +29056,814 @@ const shapeCardRenderer = {
 	canRender: (item) => item.type === "shape",
 	create: (item, context) => {
 		const root = new Container();
-		const shape = new Graphics();
-		const resolution = textResolutionForZoom(context.zoom);
+		const shape = new Graphics();
+		const resolution = textResolutionForZoom(context.zoom);
+		const label = new Text({
+			text: "",
+			style: {
+				fill: 16777215,
+				fontFamily: BOARD_FONT_STACK,
+				fontSize: 20,
+				fontWeight: "500",
+				align: "center",
+				wordWrap: true,
+				lineHeight: 28
+			},
+			resolution,
+			roundPixels: true
+		});
+		label.anchor.set(.5);
+		root.addChild(shape, label);
+		partsByContainer$6.set(root, {
+			root,
+			shape,
+			label,
+			visualSig: "",
+			textSig: "",
+			wrapWidth: 0,
+			resolution
+		});
+		if (item.type === "shape") sync$6(root, item, context);
+		return root;
+	},
+	update: (container, item, context) => {
+		if (item.type === "shape") sync$6(container, item, context);
+	},
+	renderFar: (graphics, item, context) => {
+		if (item.type !== "shape") return;
+		drawFarPlate(graphics, item.frame, {
+			fill: itemColor(context, item.style.fill ?? item.style.stroke, "brand", "fill"),
+			fillAlpha: Math.max(.18, item.style.fillOpacity ?? 0) * itemAlpha(context, item.style.fill ?? item.style.stroke),
+			accent: itemColor(context, item.style.stroke, "brand"),
+			accentAlpha: .9 * itemAlpha(context, item.style.stroke)
+		});
+	},
+	destroy: (container) => {
+		partsByContainer$6.get(container)?.root.destroy({ children: true });
+		partsByContainer$6.delete(container);
+	}
+};
+//#endregion
+//#region ../sdk/src/board/render/renderers/custom-card-renderer.ts
+const partsByContainer$5 = /* @__PURE__ */ new WeakMap();
+function sync$5(container, item, context) {
+	const parts = partsByContainer$5.get(container);
+	if (!parts) return;
+	if (parts.id !== item.id) {
+		context.scripts?.release(parts.id);
+		parts.id = item.id;
+	}
+	positionShell(parts.root, item);
+	const { width, height } = item.frame;
+	const resolution = Math.min(4, Math.max(.25, context.zoom * getBoardResolution()));
+	const texture = context.scripts?.frame(item, context.time, resolution) ?? null;
+	const error = context.scripts?.error(item.id) ?? null;
+	parts.sprite.visible = Boolean(texture);
+	const display = texture ?? Texture.EMPTY;
+	if (parts.sprite.texture !== display) parts.sprite.texture = display;
+	parts.sprite.width = width;
+	parts.sprite.height = height;
+	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,
+		Boolean(texture),
+		message,
+		context.themeKey
+	].join("|");
+	if (sig === parts.sig) return;
+	parts.sig = sig;
+	parts.placeholder.clear();
+	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);
+	parts.label.text = message;
+	parts.label.style.fill = error ? context.colors.rose.stroke : context.palette.muted;
+	parts.label.style.wordWrapWidth = Math.max(40, width - 16);
+	parts.label.position.set(width / 2, height / 2);
+}
+const customCardRenderer = {
+	id: "custom-card",
+	canRender: (item) => item.type === "custom",
+	animated: false,
+	create: (item, context) => {
+		const root = new Container();
+		const sprite = new Sprite(Texture.EMPTY);
+		const placeholder = new Graphics();
 		const label = new Text({
 			text: "",
 			style: {
-				fill: 16777215,
-				fontFamily: BOARD_FONT_STACK,
-				fontSize: 20,
-				fontWeight: "500",
+				fontFamily: BOARD_MONO_FONT_STACK,
+				fontSize: 12,
 				align: "center",
 				wordWrap: true,
-				lineHeight: 28
+				breakWords: true
 			},
-			resolution,
-			roundPixels: true
+			resolution: getBoardResolution()
 		});
 		label.anchor.set(.5);
-		root.addChild(shape, label);
+		root.addChild(sprite, placeholder, label);
 		partsByContainer$5.set(root, {
+			id: item.id,
 			root,
-			shape,
+			sprite,
+			placeholder,
 			label,
-			visualSig: "",
-			textSig: "",
-			wrapWidth: 0,
-			resolution
+			sig: ""
 		});
-		if (item.type === "shape") sync$5(root, item, context);
+		if (item.type === "custom") sync$5(root, item, context);
 		return root;
 	},
 	update: (container, item, context) => {
-		if (item.type === "shape") sync$5(container, item, context);
+		if (item.type === "custom") sync$5(container, item, context);
 	},
 	renderFar: (graphics, item, context) => {
-		if (item.type !== "shape") return;
 		drawFarPlate(graphics, item.frame, {
-			fill: itemColor(context, item.style.fill ?? item.style.stroke, "brand", "fill"),
-			fillAlpha: Math.max(.18, item.style.fillOpacity ?? 0) * itemAlpha(context, item.style.fill ?? item.style.stroke),
-			accent: itemColor(context, item.style.stroke, "brand"),
-			accentAlpha: .9 * itemAlpha(context, item.style.stroke)
+			fill: context.palette.muted,
+			fillAlpha: .12
 		});
 	},
-	destroy: (container) => {
-		partsByContainer$5.get(container)?.root.destroy({ children: true });
+	destroy: (container, context) => {
+		const parts = partsByContainer$5.get(container);
+		if (parts) context.scripts?.release(parts.id);
+		parts?.root.destroy({ children: true });
 		partsByContainer$5.delete(container);
 	}
 };
 //#endregion
-//#region ../sdk/src/board/render/renderers/custom-card-renderer.ts
+//#region ../sdk/src/board/render/renderers/image-card-renderer.ts
 const partsByContainer$4 = /* @__PURE__ */ new WeakMap();
+function cropRect(crop) {
+	if (!crop) return null;
+	const w = Math.min(crop.w, 1 - crop.x);
+	const h = Math.min(crop.h, 1 - crop.y);
+	return w > 0 && h > 0 ? {
+		x: crop.x,
+		y: crop.y,
+		w,
+		h
+	} : null;
+}
+function showTexture(parts, texture, crop) {
+	const rect = texture ? cropRect(crop) : null;
+	const key = rect ? `${rect.x}|${rect.y}|${rect.w}|${rect.h}` : "";
+	const previous = parts.cropped;
+	const reusable = previous && parts.cropSource === texture && parts.cropKey === key;
+	if (texture && rect && !reusable) {
+		const { frame } = texture;
+		const width = Math.max(1, frame.width * rect.w);
+		const height = Math.max(1, frame.height * rect.h);
+		const x = frame.x + Math.min(frame.width * rect.x, frame.width - width);
+		const y = frame.y + Math.min(frame.height * rect.y, frame.height - height);
+		parts.cropped = new Texture({
+			source: texture.source,
+			frame: new Rectangle(x, y, width, height)
+		});
+	} else if (!rect) parts.cropped = null;
+	parts.cropSource = rect ? texture : null;
+	parts.cropKey = key;
+	const display = parts.cropped ?? texture ?? Texture.EMPTY;
+	if (parts.sprite.texture !== display) parts.sprite.texture = display;
+	if (previous && previous !== parts.cropped) previous.destroy(false);
+}
+const PRINT_MARGIN = 6;
 function sync$4(container, item, context) {
 	const parts = partsByContainer$4.get(container);
 	if (!parts) return;
-	if (parts.id !== item.id) {
-		context.scripts?.release(parts.id);
-		parts.id = item.id;
+	positionShell(parts.root, item);
+	const { width, height } = item.frame;
+	const key = context.assetKey(item);
+	const texture = key ? context.getTexture(key) : null;
+	const failed = Boolean(key && !texture && context.hasError(key));
+	const elevation = cardElevation(context, item.id);
+	const sig = [
+		key ?? "",
+		width,
+		height,
+		texture ? `${texture.width}x${texture.height}` : "none",
+		JSON.stringify(item.props.crop ?? null),
+		failed,
+		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) {
+		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",
+	canRender: (item) => item.type === "image",
+	create: (item, context) => {
+		const root = new Container();
+		const sprite = new Sprite(Texture.EMPTY);
+		const placeholder = new Graphics();
+		const mask = new Graphics();
+		root.addChild(placeholder, sprite, mask);
+		sprite.mask = mask;
+		partsByContainer$4.set(root, {
+			root,
+			sprite,
+			placeholder,
+			mask,
+			sig: "",
+			cropped: null,
+			cropSource: null,
+			cropKey: ""
+		});
+		if (item.type === "image") sync$4(root, item, context);
+		return root;
+	},
+	update: (container, item, context) => {
+		if (item.type === "image") sync$4(container, item, context);
+	},
+	renderFar: (graphics, item, context) => {
+		drawFarPlate(graphics, item.frame, {
+			fill: context.palette.hover,
+			fillAlpha: .9
+		});
+	},
+	destroy: (container) => {
+		const parts = partsByContainer$4.get(container);
+		parts?.root.destroy({ children: true });
+		parts?.cropped?.destroy(false);
+		partsByContainer$4.delete(container);
+	}
+};
+//#endregion
+//#region ../sdk/src/board/render/renderers/task-card-renderer.ts
+const PADDING = 12;
+const META_HEIGHT = 28;
+const PLAY_BADGE_RADIUS = 15;
+const SHIMMER_PERIOD_MS = 1600;
+const SHIMMER_FRAME_MS = 33;
+const REVEAL_MS = 180;
+const SECOND = 1e3;
+const partsByContainer$3 = /* @__PURE__ */ new WeakMap();
+function previewKindFor(artifact) {
+	if (!artifact) return "empty";
+	if (artifact.type === "image" || artifact.type === "video") return "texture";
+	if (artifact.type === "audio") return artifact.previewUrl ? "texture" : "waveform";
+	return artifact.textExcerpt ? "text" : "empty";
+}
+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 (status === "failed") return "failed";
+		return previewFailed ? "unavailable" : "media-loading";
+	}
+	if (kind !== "empty") return null;
+	if (status === "failed") return "failed";
+	if (status === "running") return "generating";
+	if (status === "pending") return "queued";
+	return "empty";
+}
+function stateLabel(surface, context) {
+	switch (surface) {
+		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(status, context) {
+	if (status === "failed") return context.colors.rose.stroke;
+	if (status === "running") return context.colors.brand.stroke;
+	return context.colors.neutral.stroke;
+}
+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;
+	const cy = rect.y + rect.height / 2;
+	graphics.circle(cx, cy, radius).fill({
+		color: context.palette.bg,
+		alpha: .64
+	});
+	const size = radius * .72;
+	graphics.moveTo(cx - size * .34, cy - size * .56).lineTo(cx + size * .62, cy).lineTo(cx - size * .34, cy + size * .56).closePath().fill({
+		color: context.palette.text,
+		alpha: .94
+	});
+}
+function drawStateMark(graphics, surface, cx, cy, color) {
+	if (surface === "generating" || surface === "media-loading") {
+		graphics.circle(cx, cy, 4).fill({
+			color,
+			alpha: .9
+		});
+		graphics.circle(cx - 12, cy + 7, 2.5).fill({
+			color,
+			alpha: .48
+		});
+		graphics.circle(cx + 11, cy + 6, 3).fill({
+			color,
+			alpha: .68
+		});
+		graphics.circle(cx + 3, cy - 12, 2).fill({
+			color,
+			alpha: .36
+		});
+		return;
+	}
+	if (surface === "queued") {
+		graphics.circle(cx, cy, 10).stroke({
+			color,
+			width: 1.5,
+			alpha: .62
+		}).circle(cx, cy, 3).fill({
+			color,
+			alpha: .78
+		});
+		return;
+	}
+	if (surface === "failed") {
+		graphics.circle(cx, cy, 11).stroke({
+			color,
+			width: 1.5,
+			alpha: .86
+		});
+		graphics.moveTo(cx - 4, cy - 4).lineTo(cx + 4, cy + 4).moveTo(cx + 4, cy - 4).lineTo(cx - 4, cy + 4).stroke({
+			color,
+			width: 1.5,
+			alpha: .94,
+			cap: "round"
+		});
+		return;
 	}
-	positionShell(parts.root, item);
-	const { width, height } = item.frame;
-	const resolution = Math.min(4, Math.max(.25, context.zoom * getBoardResolution()));
-	const texture = context.scripts?.frame(item, context.time, resolution) ?? null;
-	const error = context.scripts?.error(item.id) ?? null;
-	parts.sprite.visible = Boolean(texture);
-	const display = texture ?? Texture.EMPTY;
-	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
-	].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,
-		alpha: .8
+	if (surface === "unavailable") graphics.roundRect(cx - 12, cy - 9, 24, 18, 3).stroke({
+		color,
+		width: 1.25,
+		alpha: .62
+	}).moveTo(cx - 8, cy + 5).lineTo(cx + 8, cy - 5).stroke({
+		color,
+		width: 1.25,
+		alpha: .72,
+		cap: "round"
 	});
-	parts.label.visible = !ready || Boolean(error);
-	parts.label.text = message;
-	parts.label.style.fill = error ? context.colors.rose.stroke : context.palette.muted;
-	parts.label.style.wordWrapWidth = Math.max(40, width - 16);
-	parts.label.position.set(width / 2, height / 2);
 }
-const customCardRenderer = {
-	id: "custom-card",
-	canRender: (item) => item.type === "custom",
-	animated: false,
-	create: (item, context) => {
-		const root = new Container();
-		const sprite = new Sprite(Texture.EMPTY);
-		const placeholder = new Graphics();
-		const label = new Text({
-			text: "",
-			style: {
-				fontFamily: BOARD_MONO_FONT_STACK,
-				fontSize: 12,
-				align: "center",
-				wordWrap: true,
-				breakWords: true
+function drawFailedBadge(graphics, width, color, context) {
+	const cx = Math.max(12, width - 12);
+	graphics.circle(cx, 12, 8).fill({
+		color: context.palette.bg,
+		alpha: .72
+	});
+	graphics.moveTo(cx - 2.5, 9.5).lineTo(cx + 2.5, 14.5).moveTo(cx + 2.5, 9.5).lineTo(cx - 2.5, 14.5).stroke({
+		color,
+		width: 1.5,
+		alpha: .96,
+		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
 			},
-			resolution: getBoardResolution()
-		});
-		label.anchor.set(.5);
-		root.addChild(sprite, placeholder, label);
-		partsByContainer$4.set(root, {
-			id: item.id,
-			root,
-			sprite,
-			placeholder,
-			label,
-			sig: ""
-		});
-		if (item.type === "custom") sync$4(root, item, context);
-		return root;
-	},
-	update: (container, item, context) => {
-		if (item.type === "custom") sync$4(container, item, context);
-	},
-	renderFar: (graphics, item, context) => {
-		drawFarPlate(graphics, item.frame, {
-			fill: context.palette.muted,
-			fillAlpha: .12
+			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)`
+				}
+			]
 		});
-	},
-	destroy: (container, context) => {
-		const parts = partsByContainer$4.get(container);
-		if (parts) context.scripts?.release(parts.id);
-		parts?.root.destroy({ children: true });
-		partsByContainer$4.delete(container);
+		shimmerGradients.set(color, gradient);
 	}
-};
-//#endregion
-//#region ../sdk/src/board/render/renderers/image-card-renderer.ts
-const partsByContainer$3 = /* @__PURE__ */ new WeakMap();
-const RADIUS$2 = 2;
-function layoutContain$1(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;
+	return gradient;
 }
-function cropRect(crop) {
-	if (!crop) return null;
-	const w = Math.min(crop.w, 1 - crop.x);
-	const h = Math.min(crop.h, 1 - crop.y);
-	return w > 0 && h > 0 ? {
-		x: crop.x,
-		y: crop.y,
-		w,
-		h
-	} : null;
+function drawShimmerBand(graphics, width, height, color) {
+	const band = Math.max(48, width * .45);
+	graphics.clear().rect(-band, 0, band, height).fill(shimmerGradient(color));
 }
-function showTexture(parts, texture, crop) {
-	const rect = texture ? cropRect(crop) : null;
-	const key = rect ? `${rect.x}|${rect.y}|${rect.w}|${rect.h}` : "";
-	const previous = parts.cropped;
-	const reusable = previous && parts.cropSource === texture && parts.cropKey === key;
-	if (texture && rect && !reusable) {
-		const { frame } = texture;
-		const width = Math.max(1, frame.width * rect.w);
-		const height = Math.max(1, frame.height * rect.h);
-		const x = frame.x + Math.min(frame.width * rect.x, frame.width - width);
-		const y = frame.y + Math.min(frame.height * rect.y, frame.height - height);
-		parts.cropped = new Texture({
-			source: texture.source,
-			frame: new Rectangle(x, y, width, height)
+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
 		});
-	} else if (!rect) parts.cropped = null;
-	parts.cropSource = rect ? texture : null;
-	parts.cropKey = key;
-	const display = parts.cropped ?? texture ?? Texture.EMPTY;
-	if (parts.sprite.texture !== display) parts.sprite.texture = display;
-	if (previous && previous !== parts.cropped) previous.destroy(false);
+	}
+}
+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$3(container, item, context) {
 	const parts = partsByContainer$3.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 { 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);
+		parts.assetKey = key;
+		if (key) context.acquireTexture(key);
+	}
 	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 sig = [
-		key ?? "",
+	const previewFailed = Boolean(key && !texture && context.hasError(key));
+	const artifact = featuredTaskArtifact(snapshot.artifacts);
+	const kind = previewKindFor(artifact);
+	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 || working ? snapshot.model ?? "" : "";
+	const showMeta = full && Boolean(metaText);
+	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,
-		texId,
-		JSON.stringify(item.props.crop ?? null),
-		failed,
-		context.colorScheme
+		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.themeKey
 	].join("|");
-	if (sig === parts.sig) return;
-	parts.sig = sig;
-	showTexture(parts, texture, item.props.crop);
-	parts.sprite.visible = Boolean(texture);
-	if (texture) layoutContain$1(parts.sprite, width, height);
-	parts.placeholder.clear();
-	if (!texture) {
-		parts.placeholder.roundRect(0, 0, width, height, RADIUS$2).fill({
-			color: context.palette.surface,
-			alpha: .85
-		}).roundRect(0, 0, width, height, RADIUS$2).stroke({
-			color: failed ? context.palette.border : context.palette.hover,
-			width: 1,
-			alpha: .9
+	if (visualSig !== parts.visualSig) {
+		parts.visualSig = visualSig;
+		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
 		});
-		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
+		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
 		});
-		else parts.placeholder.circle(cx, cy, 6).stroke({
-			color: context.palette.muted,
-			width: 1.25,
-			alpha: .55
+		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;
+			drawAudioWaveform(parts.previewArt, item.props.taskRunId, {
+				x: frame.x + PADDING,
+				y: frame.y + PADDING,
+				width: Math.max(1, frame.width - 24),
+				height: Math.max(1, frame.height - 24 - bottomInset)
+			}, context.colors.brand.stroke);
+		}
+		if (full && (artifact?.type === "audio" || artifact?.type === "video" && texture)) drawPlayBadge(parts.previewArt, frame, context);
+		if (surface) {
+			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
 		});
-	}
-	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$2).stroke({
-			color: selected ? context.palette.brand : context.palette.muted,
-			width: selected ? 2 : 1,
-			alpha: selected ? .95 : .7
+		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);
 	}
+	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 = 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;
+	}
+	parts.body.visible = full && Boolean(bodyText);
+	parts.detail.visible = full && Boolean(detailText);
+	parts.meta.visible = showMeta;
+	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 imageCardRenderer = {
-	id: "image-card",
-	canRender: (item) => item.type === "image",
+const taskCardRenderer = {
+	id: "task-card",
+	canRender: (item) => item.type === "task",
 	create: (item, context) => {
 		const root = new Container();
-		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$2).fill({ color: 16777215 });
-		};
-		maskBox();
-		root.addChild(placeholder, sprite, mask);
-		sprite.mask = mask;
+		const plate = new Graphics();
+		const clip = new Graphics();
+		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 text = (fontFamily, fontSize, fontWeight) => new Text({
+			text: "",
+			style: {
+				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;
+		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$3.set(root, {
 			root,
-			sprite,
-			placeholder,
-			sig: "",
-			cropped: null,
-			cropSource: null,
-			cropKey: ""
+			tag,
+			plate,
+			clip,
+			previewBg,
+			preview,
+			previewMask,
+			shimmer,
+			previewArt,
+			badge,
+			body,
+			detail,
+			meta,
+			assetKey: null,
+			visualSig: "",
+			textSig: "",
+			resolution,
+			motion: {
+				itemId: "",
+				width: 0,
+				shimmer: false,
+				mosaic: null,
+				startedAt: null,
+				label: "",
+				elapsed: "",
+				revealFrom: null,
+				revealKey: null
+			}
 		});
-		if (item.type === "image") sync$3(root, item, context);
+		if (item.type === "task") sync$3(root, item, context);
 		return root;
 	},
 	update: (container, item, context) => {
-		if (item.type !== "image") return;
+		if (item.type === "task") sync$3(container, item, context);
+	},
+	tick: (container, clock) => {
 		const parts = partsByContainer$3.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$2).fill({ color: 16777215 });
-		sync$3(container, item, context);
+		return parts ? advance(parts, clock) : null;
+	},
+	zoom: (container, zoom) => {
+		const tag = partsByContainer$3.get(container)?.tag;
+		if (tag) zoomCardTag(tag, zoom);
 	},
 	renderFar: (graphics, item, context) => {
+		if (item.type !== "task") return;
+		const { status } = liveStatus(item, context);
+		const active = status === "failed" || status === "running" || status === "pending";
 		drawFarPlate(graphics, item.frame, {
-			fill: context.palette.hover,
-			fillAlpha: .9
+			fill: context.palette.surface,
+			fillAlpha: .82,
+			...active ? {
+				accent: statusColor(status, context),
+				accentAlpha: .9
+			} : {}
 		});
 	},
-	destroy: (container) => {
+	destroy: (container, context) => {
 		const parts = partsByContainer$3.get(container);
+		if (parts?.assetKey) context.releaseTexture(parts.assetKey);
 		parts?.root.destroy({ children: true });
-		parts?.cropped?.destroy(false);
 		partsByContainer$3.delete(container);
 	}
 };
@@ -29591,37 +29967,37 @@ const textCardRenderer = {
 };
 //#endregion
 //#region ../sdk/src/board/render/renderers/unknown-card-renderer.ts
-const RADIUS$1 = 10;
 const partsByContainer$1 = /* @__PURE__ */ new WeakMap();
 function sync$1(container, item, context) {
 	const parts = partsByContainer$1.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$1).fill({
-			color: context.palette.surface,
-			alpha: .7
-		}).roundRect(0, 0, width, height, RADIUS$1).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
@@ -29683,86 +30059,87 @@ const unknownCardRenderer = {
 //#endregion
 //#region ../sdk/src/board/render/renderers/video-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
-const RADIUS = 4;
-function layoutContain(sprite, width, height) {
-	const texture = sprite.texture;
-	if (!texture.width || !texture.height) return;
-	const scale = Math.min(width / texture.width, height / texture.height);
-	sprite.width = texture.width * scale;
-	sprite.height = texture.height * scale;
-	sprite.x = (width - sprite.width) / 2;
-	sprite.y = (height - sprite.height) / 2;
+const FILM_RAIL = 10;
+const FILM_HOLE = 4;
+function videoTitle(item) {
+	return item.props.snapshot?.title ?? getMediaResourceTitle(item.props.src);
 }
 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 resizing = context.resizingIds.has(item.id);
-	const title = item.props.snapshot?.title ?? getMediaResourceTitle(item.props.src);
+	const title = videoTitle(item);
+	const durationMs = item.props.snapshot?.durationMs;
+	const duration = durationMs ? formatBoardDuration(durationMs) : "";
+	syncCardTag(parts.tag, {
+		glyph: "video",
+		text: duration ? `${title} · ${duration}` : title,
+		width
+	}, context);
 	const key = context.assetKey(item);
 	const texture = key ? context.getTexture(key) : null;
-	const failed = Boolean(key && !texture && context.hasError(key));
-	syncTextResolution(parts.label, parts, context.zoom);
-	if (parts.label.text !== title) parts.label.text = title;
-	syncTextWrapWidth(parts.label, parts, Math.max(1, width - 16), resizing);
-	parts.label.position.set(8, Math.max(8, height - parts.label.height - 8));
+	const elevation = cardElevation(context, item.id);
 	const sig = [
 		key ?? "",
 		texture ? `${texture.width}x${texture.height}` : "none",
 		width,
 		height,
-		selected,
-		hovered,
-		failed,
-		title,
-		item.props.time ?? 0,
-		parts.label.height,
-		context.palette.surface,
-		context.palette.brand,
-		context.palette.muted,
-		context.palette.border,
-		context.palette.hover,
-		context.palette.text
+		elevation,
+		boardCardDetailed(context.zoom),
+		context.themeKey
 	].join("|");
 	if (sig === parts.sig) return;
 	parts.sig = sig;
+	const framed = context.style.media === "framed";
+	const rect = {
+		x: 0,
+		y: 0,
+		width,
+		height
+	};
+	const rail = framed ? Math.min(FILM_RAIL, height / 6) : 0;
+	const screen = {
+		x: framed ? rail * .6 : 0,
+		y: rail,
+		width: width - (framed ? rail * 1.2 : 0),
+		height: height - rail * 2
+	};
+	drawCardSurface(parts.plate.clear(), rect, context.style, {
+		fill: framed ? context.palette.text : context.palette.surface,
+		border: framed ? null : context.palette.border,
+		borderAlpha: .85,
+		elevation
+	});
+	if (framed) drawFilmRails(parts.plate, width, height, rail, context.palette.bg);
+	traceCardOutline(parts.mask.clear(), framed ? screen : rect, framed ? {
+		corner: "round",
+		radius: 1
+	} : context.style).fill({ color: 16777215 });
 	if (texture && parts.sprite.texture !== texture) parts.sprite.texture = texture;
 	parts.sprite.visible = Boolean(texture);
-	if (texture) layoutContain(parts.sprite, width, height);
-	parts.mask.clear().roundRect(0, 0, width, height, RADIUS).fill({ color: 16777215 });
-	parts.plate.clear().roundRect(0, 0, width, height, RADIUS).fill({
-		color: context.palette.surface,
-		alpha: .96
-	});
-	parts.chrome.clear();
 	if (texture) {
-		const bandHeight = Math.min(height, parts.label.height + 16);
-		parts.chrome.rect(0, height - bandHeight, width, bandHeight).fill({
-			color: context.palette.surface,
-			alpha: .78
-		});
+		const fitted = containRect(screen.width, screen.height, texture.width, texture.height);
+		parts.sprite.position.set(screen.x + fitted.x, screen.y + fitted.y);
+		parts.sprite.width = fitted.width;
+		parts.sprite.height = fitted.height;
 	}
-	const cx = width / 2;
-	const cy = height / 2;
-	const radius = Math.min(22, Math.min(width, height) * .18);
-	parts.chrome.circle(cx, cy, radius).fill({
-		color: selected ? context.palette.brand : context.palette.surface,
-		alpha: texture ? .88 : .96
-	});
-	const triangle = radius * .55;
-	parts.chrome.moveTo(cx - triangle * .35, cy - triangle * .6).lineTo(cx - triangle * .35, cy + triangle * .6).lineTo(cx + triangle * .7, cy).closePath().fill({
-		color: context.palette.text,
-		alpha: .94
-	});
-	parts.chrome.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 ? .95 : .85
+	parts.chrome.clear();
+	if (boardCardDetailed(context.zoom)) drawMediaPlayKey(parts.chrome, screen.x + screen.width / 2, screen.y + screen.height / 2, Math.min(18, Math.min(screen.width, screen.height) * .16), context);
+}
+function drawFilmRails(graphics, width, height, rail, hole) {
+	const size = Math.min(FILM_HOLE, rail * .45);
+	const step = size * 2.5;
+	const count = Math.max(1, Math.floor((width - step) / step));
+	const start = (width - (count - 1) * step - size) / 2;
+	for (let index = 0; index < count; index += 1) {
+		const x = start + index * step;
+		graphics.rect(x, (rail - size) / 2, size, size).rect(x, height - rail + (rail - size) / 2, size, size);
+	}
+	graphics.fill({
+		color: hole,
+		alpha: .9
 	});
-	parts.label.style.fill = texture ? context.palette.text : context.palette.muted;
 }
 const videoCardRenderer = {
 	id: "video-card",
@@ -29773,20 +30150,8 @@ const videoCardRenderer = {
 		const sprite = new Sprite(Texture.EMPTY);
 		const mask = new Graphics();
 		const chrome = new Graphics();
-		const resolution = textResolutionForZoom(context.zoom);
-		const label = new Text({
-			text: "",
-			style: {
-				fill: context.palette.muted,
-				fontFamily: BOARD_FONT_STACK,
-				fontSize: 12,
-				fontWeight: "500",
-				wordWrap: true
-			},
-			resolution,
-			roundPixels: true
-		});
-		root.addChild(plate, sprite, mask, chrome, label);
+		const tag = createCardTag();
+		root.addChild(plate, sprite, mask, chrome, tag.root);
 		sprite.mask = mask;
 		partsByContainer.set(root, {
 			root,
@@ -29794,10 +30159,8 @@ const videoCardRenderer = {
 			sprite,
 			mask,
 			chrome,
-			label,
-			sig: "",
-			wrapWidth: 0,
-			resolution
+			tag,
+			sig: ""
 		});
 		if (item.type === "video") sync(root, item, context);
 		return root;
@@ -29805,6 +30168,10 @@ const videoCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "video") sync(container, item, context);
 	},
+	zoom: (container, zoom) => {
+		const tag = partsByContainer.get(container)?.tag;
+		if (tag) zoomCardTag(tag, zoom);
+	},
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {
 			fill: context.palette.surface,
@@ -30729,6 +31096,58 @@ function createScriptRuntime(module, initial, host) {
 	};
 }
 //#endregion
+//#region ../sdk/src/board/render/style.ts
+const BASE = {
+	corner: "round",
+	radius: 6,
+	selection: {
+		width: 1.5,
+		outset: 3,
+		dash: 0,
+		handle: "square",
+		handleSize: 8
+	},
+	media: "plain",
+	progress: "shimmer",
+	icons: "line",
+	motion: "smooth",
+	font: BOARD_FONT_STACK
+};
+const SHADOW = {
+	light: {
+		color: 1447704,
+		alpha: .06,
+		blur: 12,
+		y: 2
+	},
+	dark: {
+		color: 0,
+		alpha: .24,
+		blur: 12,
+		y: 2
+	}
+};
+function defaultBoardRenderStyle(mode) {
+	return {
+		...BASE,
+		selection: { ...BASE.selection },
+		shadow: { ...SHADOW[mode] }
+	};
+}
+function resolveBoardRenderStyle(mode, style) {
+	const base = defaultBoardRenderStyle(mode);
+	if (!style) return base;
+	return {
+		...base,
+		...style,
+		selection: {
+			...base.selection,
+			...style.selection
+		},
+		shadow: style.shadow === void 0 ? base.shadow : style.shadow
+	};
+}
+//#endregion
 //#region ../sdk/src/board/export/scene.ts
 function buildContext(input) {
 	const missing = /* @__PURE__ */ new Set();
@@ -30742,12 +31161,15 @@ function buildContext(input) {
 			selectedIds: /* @__PURE__ */ new Set(),
 			hoveredId: null,
 			resizingIds: /* @__PURE__ */ new Set(),
+			liftedIds: /* @__PURE__ */ new Set(),
 			palette: {
 				...defaultBoardPalette(input.colorScheme),
 				...input.palette
 			},
 			colors: input.colors ?? buildFallbackShapeColors(input.colorScheme),
 			colorScheme: input.colorScheme,
+			style: resolveBoardRenderStyle(input.colorScheme, input.style),
+			themeKey: "export",
 			rendererType: "canvas",
 			zoom: input.scale,
 			reducedMotion: true,
@@ -30907,6 +31329,7 @@ function renderBoardExport(renderer, input, options = {}) {
 		colorScheme,
 		palette,
 		colors: options.colors,
+		style: options.style,
 		textures: options.textures,
 		scripts: options.scripts,
 		assetKey: options.assetKey,