@neta-art/cohub-cli 10.0.0 → 10.2.0

package/dist/board-kernel.js

@@ -5953,8 +5953,16 @@ const fileProps$1 = {
 		coverUrl: string().optional()
 	}).strict().optional()
 };
-const timedFileProps$1 = {
+const BoardMediaOriginSchema$1 = object({
+	taskRunId: string().min(1).max(160),
+	artifactId: string().min(1).max(240)
+}).strict();
+const mediaProps$1 = {
 	...fileProps$1,
+	origin: BoardMediaOriginSchema$1.optional()
+};
+const timedFileProps$1 = {
+	...mediaProps$1,
 	time: nonNegative$1.optional()
 };
 const BoardCropSchema$1 = object({
@@ -5967,7 +5975,7 @@ const BoardImageItemSchema$1 = object({
 	...boxed$1(640, 360),
 	type: literal("image"),
 	props: object({
-		...fileProps$1,
+		...mediaProps$1,
 		crop: BoardCropSchema$1.optional()
 	}).strict()
 }).strict();
@@ -6032,8 +6040,10 @@ const BoardTaskSnapshotSchema$1 = object({
 	title: string().min(1).max(240),
 	model: string().max(160).optional(),
 	promptExcerpt: string().max(480).optional(),
+	errorExcerpt: string().max(240).optional(),
 	artifactCount: number$1().int().nonnegative(),
 	artifacts: array(BoardTaskArtifactSchema$1).max(6).default([]),
+	startedAt: string().max(64).optional(),
 	updatedAt: string().optional()
 }).strict();
 const BoardTaskItemSchema$1 = object({
@@ -6041,7 +6051,7 @@ const BoardTaskItemSchema$1 = object({
 	type: literal("task"),
 	props: object({
 		taskRunId: string().min(1).max(160),
-		snapshot: BoardTaskSnapshotSchema$1
+		snapshot: BoardTaskSnapshotSchema$1.describe("Maintained by the server for tasks in the Board's Space; writers may omit it.")
 	}).strict()
 }).strict();
 const BOARD_EFFECT_KINDS$1 = [
@@ -7328,6 +7338,42 @@ function parseBoardDocument(input) {
 	} : result;
 }
 //#endregion
+//#region ../protocol/src/board-task.ts
+function artifactScore(artifact) {
+	const kind = {
+		text: 1,
+		image: 2,
+		audio: 3,
+		video: 4
+	}[artifact.type];
+	if (artifact.type === "text") return [kind, artifact.textExcerpt.length];
+	if (artifact.type === "image") return [kind, (artifact.naturalWidth ?? 0) * (artifact.naturalHeight ?? 0)];
+	return [
+		kind,
+		artifact.previewUrl ? 1 : 0,
+		artifact.durationMs ? 1 : 0,
+		artifact.durationMs ?? 0
+	];
+}
+function compareArtifacts(a, b) {
+	const left = artifactScore(a);
+	const right = artifactScore(b);
+	for (let index = 0; index < Math.max(left.length, right.length); index += 1) {
+		const difference = (right[index] ?? 0) - (left[index] ?? 0);
+		if (difference !== 0) return difference;
+	}
+	return 0;
+}
+function featuredTaskArtifact(artifacts) {
+	let featured;
+	for (const artifact of artifacts) if (!featured || compareArtifacts(artifact, featured) < 0) featured = artifact;
+	return featured;
+}
+function taskArtifactPreviewUrl(artifact) {
+	if (artifact?.type === "image") return artifact.url;
+	if (artifact?.type === "video" || artifact?.type === "audio") return artifact.previewUrl;
+}
+//#endregion
 //#region ../sdk/src/board/model/script-index.ts
 const scriptsByItems = /* @__PURE__ */ new WeakMap();
 function boardScriptItems(document) {
@@ -7490,6 +7536,10 @@ function validateBoardScriptOutput(output, scope) {
 	if (!output || typeof output !== "object" || !output.patches || !output.items || !output.hits || !Array.isArray(output.listens)) throw new Error("Invalid script output.");
 	if (JSON.stringify(output).length > 1e6) throw new Error("Script output exceeds the 1 MB limit.");
 	if (output.space !== void 0 && output.space !== "world" && output.space !== "screen") throw new Error("Invalid script scene space.");
+	if (output.anchor) {
+		const { item, point } = output.anchor;
+		if (output.space !== "screen" || typeof item !== "string" || !item || point && ![point.x, point.y].every((n) => Number.isFinite(n) && n >= 0 && n <= 1)) throw new Error("Invalid screen scene anchor.");
+	}
 	if (output.parameters) {
 		if (Object.keys(output.parameters).length > 64) throw new Error("A script may declare at most 64 parameters.");
 		for (const spec of Object.values(output.parameters)) {
@@ -7513,6 +7563,7 @@ function validateBoardScriptOutput(output, scope) {
 		if (!patch || typeof patch !== "object" || Object.keys(patch).some((key) => !DISPLAY_FIELDS.has(key))) throw new Error("Scripts may only present display properties.");
 	}
 	for (const hit of Object.values(output.hits)) {
+		if (!hit || typeof hit !== "object") throw new Error("Invalid script hit region.");
 		if (hit.cursor && ![
 			"default",
 			"pointer",
@@ -7525,7 +7576,11 @@ function validateBoardScriptOutput(output, scope) {
 			"ns-resize",
 			"not-allowed"
 		].includes(hit.cursor)) throw new Error("Invalid script cursor.");
-		if (![
+		if ("target" in hit) {
+			if (hit.target !== "self" || "item" in hit || "x" in hit) throw new Error("Invalid script hit target.");
+		} else if ("item" in hit) {
+			if (typeof hit.item !== "string" || !Object.hasOwn(output.items, hit.item) || "x" in hit) throw new Error("Hit items must belong to the temporary scene.");
+		} else if (![
 			hit.x,
 			hit.y,
 			hit.width,
@@ -7540,6 +7595,15 @@ function scriptTemporaryPrefix(owner) {
 }
 const preparedOutputs = /* @__PURE__ */ new WeakMap();
 const preparedScopes = /* @__PURE__ */ new WeakMap();
+const itemOrders = /* @__PURE__ */ new WeakMap();
+function orderedScriptOwners(document, outputs) {
+	let order = itemOrders.get(document.items);
+	if (!order) {
+		order = new Map(Object.keys(document.items).map((id, index) => [id, index]));
+		itemOrders.set(document.items, order);
+	}
+	return [...outputs.keys()].filter((id) => order.has(id)).sort((a, b) => (order.get(a) ?? 0) - (order.get(b) ?? 0));
+}
 function prepareBoardScriptOutput(document, owner, output) {
 	const previous = preparedOutputs.get(output);
 	if (previous?.document === document && previous.owner === owner) return previous;
@@ -7553,6 +7617,7 @@ function prepareBoardScriptOutput(document, owner, output) {
 		scope = boardScriptScope(document, owner);
 		scopes.set(owner, scope);
 	}
+	if (output.anchor && document.items[output.anchor.item] && !scope.has(output.anchor.item)) throw new Error("Scene anchor is outside the script scope.");
 	validateBoardScriptOutput(output, scope);
 	const presented = /* @__PURE__ */ new Map();
 	for (const [id, patch] of Object.entries(output.patches)) {
@@ -7617,11 +7682,11 @@ function prepareBoardScriptOutput(document, owner, output) {
 	preparedOutputs.set(output, prepared);
 	return prepared;
 }
-function composeBoardScriptItems(document, scene, outputs, incoming = /* @__PURE__ */ new Map(), screen, onError) {
+function composeBoardScriptItems(document, scene, outputs, incoming = /* @__PURE__ */ new Map(), screen, onError, gestureLayout) {
 	const result = new Map(incoming);
 	const screenAnchors = /* @__PURE__ */ new Map();
 	if (outputs.size === 0) return result;
-	for (const owner of Object.keys(document.items)) {
+	for (const owner of orderedScriptOwners(document, outputs)) {
 		const output = outputs.get(owner);
 		if (!output) continue;
 		try {
@@ -7689,15 +7754,23 @@ function composeBoardScriptItems(document, scene, outputs, incoming = /* @__PURE
 		}
 	}
 	if (screenAnchors.size) {
-		const layout = createBoardLayout((id) => result.get(id) ?? document.items[id]);
+		const layout = gestureLayout ?? createBoardLayout((id) => result.get(id) ?? document.items[id]);
 		for (const [owner, rootId] of screenAnchors) {
 			const root = result.get(rootId);
+			const anchor = outputs.get(owner)?.anchor;
+			const target = anchor?.item ?? owner;
+			const exists = Boolean(document.items[target]);
+			const box = exists ? layout.box(target) : {
+				width: 0,
+				height: 0
+			};
 			if (root) result.set(rootId, {
 				...root,
-				position: applyMatrix$1(layout.matrix(owner), {
-					x: 0,
-					y: 0
-				})
+				opacity: exists ? root.opacity : 0,
+				position: exists ? applyMatrix$1(layout.matrix(target), {
+					x: (anchor?.point?.x ?? 0) * box.width,
+					y: (anchor?.point?.y ?? 0) * box.height
+				}) : root.position
 			});
 		}
 	}
@@ -9268,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) {
@@ -9449,42 +9556,6 @@ function boardFontFamily(font, stacks) {
 	return `"${font.replaceAll("\"", "")}", ${stacks.sans}`;
 }
 //#endregion
-//#region ../sdk/src/board/model/task.ts
-function artifactScore(artifact) {
-	const kind = {
-		text: 1,
-		image: 2,
-		audio: 3,
-		video: 4
-	}[artifact.type];
-	if (artifact.type === "text") return [kind, artifact.textExcerpt.length];
-	if (artifact.type === "image") return [kind, (artifact.naturalWidth ?? 0) * (artifact.naturalHeight ?? 0)];
-	return [
-		kind,
-		artifact.previewUrl ? 1 : 0,
-		artifact.durationMs ? 1 : 0,
-		artifact.durationMs ?? 0
-	];
-}
-function compareArtifacts(a, b) {
-	const left = artifactScore(a);
-	const right = artifactScore(b);
-	for (let index = 0; index < Math.max(left.length, right.length); index += 1) {
-		const difference = (right[index] ?? 0) - (left[index] ?? 0);
-		if (difference !== 0) return difference;
-	}
-	return 0;
-}
-function featuredTaskArtifact(artifacts) {
-	let featured;
-	for (const artifact of artifacts) if (!featured || compareArtifacts(artifact, featured) < 0) featured = artifact;
-	return featured;
-}
-function taskArtifactPreviewUrl(artifact) {
-	if (artifact?.type === "image") return artifact.url;
-	if (artifact?.type === "video" || artifact?.type === "audio") return artifact.previewUrl;
-}
-//#endregion
 //#region ../sdk/src/board/model/image-key.ts
 function imageAssetKey(item) {
 	if (item.type === "image") {
@@ -26974,8 +27045,8 @@ const DARK = {
 	legendary: 16096779
 };
 const LIGHT = {
-	bg: 16777215,
-	surface: 16053493,
+	bg: 16251129,
+	surface: 16777215,
 	hover: 15329772,
 	border: 14079706,
 	brand: 15222030,
@@ -27158,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;
@@ -27221,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);
@@ -27230,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);
-}
-/**
-* 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;
+//#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;
 }
-/** 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 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;
 }
-/** 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 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;
+			}
+		}
+	}
 }
-/** 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 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)
+	];
+}
+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
@@ -27288,7 +27823,10 @@ function createLabel(text, style) {
 	return new Text({
 		...TEXT_OPTIONS,
 		text,
-		style
+		style: {
+			fontFamily: BOARD_FONT_STACK,
+			...style
+		}
 	});
 }
 function positionShell(root, item) {
@@ -27370,796 +27908,162 @@ 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 (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().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
-		});
-		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;
-	}
-	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;
-	}
-	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);
-	}
-	parts.excerpt.visible = showExcerpt;
-}
-const fileCardRenderer = {
-	id: "file-card",
-	canRender: (item) => item.type === "file",
-	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({
-			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);
-		root.addChild(plate, body, clip);
-		partsByContainer$12.set(root, {
-			root,
-			plate,
-			body,
-			clip,
-			cover,
-			coverMask,
-			typeMark,
-			title,
-			excerpt,
-			visualSig: "",
-			textSig: "",
-			titleRes: { resolution },
-			excerptRes: { resolution },
-			typeMarkRes: { resolution }
-		});
-		if (item.type === "file") sync$12(root, item, context);
-		return root;
-	},
-	update: (container, item, context) => {
-		if (item.type === "file") sync$12(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
-		});
-	},
-	destroy: (container) => {
-		partsByContainer$12.get(container)?.root.destroy({ children: true });
-		partsByContainer$12.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 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 stateSurfaceFor(item, kind, hasTexture, previewFailed) {
-	if (kind === "texture" && !hasTexture) {
-		if (item.props.snapshot.status === "failed") return "failed";
-		return previewFailed ? "unavailable" : "media-loading";
-	}
-	if (kind !== "empty") return null;
-	if (item.props.snapshot.status === "failed") return "failed";
-	if (item.props.snapshot.status === "running") return "generating";
-	if (item.props.snapshot.status === "pending") return "queued";
-	return "empty";
-}
-function stateLabel(surface) {
-	switch (surface) {
-		case "generating": return "Generating";
-		case "queued": return "Queued";
-		case "failed": return "Failed";
-		case "unavailable": return "Preview unavailable";
-		case "empty": return "No preview";
-		default: return "";
-	}
-}
-function statusColor(item, context) {
-	if (item.props.snapshot.status === "failed") return context.colors.rose.stroke;
-	if (item.props.snapshot.status === "running") return context.colors.brand.stroke;
-	return context.colors.neutral.stroke;
-}
-function metadata(item) {
-	const { artifactCount, artifacts } = item.props.snapshot;
-	const extra = artifactCount > artifacts.length ? `${artifacts.length}/${artifactCount}` : artifactCount > 1 ? `+${artifactCount - 1}` : null;
-	return [item.props.snapshot.model, extra].filter(Boolean).join(" · ");
-}
-function containTaskPreviewRect(width, height, imageWidth, imageHeight) {
-	if (width <= 0 || height <= 0 || imageWidth <= 0 || imageHeight <= 0) return {
+	if (sig === parts.sig) return;
+	parts.sig = sig;
+	drawCardSurface(parts.plate.clear(), {
 		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"
-	});
-}
-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 selected = context.selectedIds.has(item.id);
-	const hovered = context.hoveredId === item.id;
-	const full = context.zoom >= TASK_CARD_FULL_DETAIL_ZOOM;
-	const color = statusColor(item, context);
-	const 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(item.props.snapshot.artifacts);
-	const kind = previewKindFor(artifact);
-	const surface = stateSurfaceFor(item, kind, Boolean(texture), previewFailed);
-	const frame = {
-		x: 1,
-		y: 1,
-		width: Math.max(1, width - 2),
-		height: Math.max(1, height - 2)
-	};
-	const metaText = artifact ? metadata(item) : "";
-	const showMeta = full && Boolean(metaText);
-	const failedWithOutput = item.props.snapshot.status === "failed" && kind !== "empty";
-	syncTextResolution(parts.body, parts, context.zoom);
-	syncTextResolution(parts.meta, parts, context.zoom);
-	const visualSig = [
 		width,
-		height,
-		selected,
-		hovered,
-		full,
-		color,
-		kind,
-		surface,
-		showMeta,
-		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
-	].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 });
-		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 && stateLabel(surface) ? 10 : 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 (failedWithOutput) drawFailedBadge(parts.previewArt, width, color, context);
-	}
-	parts.preview.visible = kind === "texture" && Boolean(texture);
-	if (parts.preview.visible && 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;
-	}
-	const bodyText = kind === "text" && artifact?.type === "text" ? artifact.textExcerpt : stateLabel(surface);
-	const textSig = [
-		bodyText,
-		metaText,
-		kind,
-		surface,
-		full,
-		width,
-		height,
-		context.palette.text,
-		context.palette.muted
-	].join("|");
-	if (textSig !== parts.textSig) {
-		parts.textSig = textSig;
-		parts.body.style.fill = surface === "failed" ? color : context.palette.text;
-		fitTextToLines(parts.body, bodyText, kind === "text" ? Math.max(1, Math.floor((height - 24 - (showMeta ? META_HEIGHT : 0)) / 16)) : 1, Math.max(24, width - 24));
-		parts.meta.style.fill = context.palette.text;
-		fitTextToLines(parts.meta, metaText, 1, Math.max(24, width - 24));
-	}
-	parts.body.visible = full && Boolean(bodyText);
-	parts.meta.visible = showMeta;
-	if (kind === "text") parts.body.position.set(PADDING, PADDING);
-	else parts.body.position.set(Math.max(PADDING, (width - parts.body.width) / 2), height / 2 + 10);
-	parts.meta.position.set(PADDING, height - META_HEIGHT + 7);
+		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 taskCardRenderer = {
-	id: "task-card",
-	canRender: (item) => item.type === "task",
+const audioCardRenderer = {
+	id: "audio-card",
+	canRender: (item) => item.type === "audio",
 	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 previewArt = new Graphics();
+		const wave = new Graphics();
 		const resolution = textResolutionForZoom(context.zoom);
-		const body = new Text({
-			text: "",
-			style: {
-				fontFamily: BOARD_FONT_STACK,
-				fontSize: 11.5,
-				fontWeight: "500",
-				wordWrap: true,
-				breakWords: true
-			},
-			resolution,
-			roundPixels: true
-		});
-		const meta = new Text({
+		const title = new Text({
 			text: "",
 			style: {
-				fontFamily: BOARD_MONO_FONT_STACK,
-				fontSize: 10,
-				fontWeight: "500",
-				wordWrap: true,
-				breakWords: true
+				fontSize: 13,
+				fontWeight: "600"
 			},
 			resolution,
 			roundPixels: true
 		});
-		preview.mask = previewMask;
-		root.mask = clip;
-		root.addChild(plate, clip, previewBg, preview, previewMask, previewArt, body, meta);
-		partsByContainer$11.set(root, {
+		root.addChild(plate, wave, title);
+		partsByContainer$12.set(root, {
 			root,
 			plate,
-			clip,
-			previewBg,
-			preview,
-			previewMask,
-			previewArt,
-			body,
-			meta,
-			assetKey: null,
-			visualSig: "",
-			textSig: "",
+			wave,
+			title,
+			sig: "",
 			resolution
 		});
-		if (item.type === "task") sync$11(root, item, context);
+		if (item.type === "audio") sync$12(root, item, context);
 		return root;
 	},
 	update: (container, item, context) => {
-		if (item.type === "task") sync$11(container, item, context);
+		if (item.type === "audio") sync$12(container, item, context);
 	},
 	renderFar: (graphics, item, context) => {
-		if (item.type !== "task") return;
-		const active = item.props.snapshot.status === "failed" || item.props.snapshot.status === "running" || item.props.snapshot.status === "pending";
 		drawFarPlate(graphics, item.frame, {
 			fill: context.palette.surface,
-			fillAlpha: .82,
-			...active ? {
-				accent: statusColor(item, context),
-				accentAlpha: .9
-			} : {}
+			fillAlpha: .96,
+			accent: context.palette.brand,
+			accentAlpha: .72
 		});
 	},
-	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);
+	destroy: (container) => {
+		partsByContainer$12.get(container)?.root.destroy({ children: true });
+		partsByContainer$12.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);
+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;
-	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;
@@ -28168,8 +28072,6 @@ function sync$10(container, item, context) {
 	const path = trimPolyline(resolved.path, style.trim);
 	const lineSig = [
 		path.map((point) => `${point.x},${point.y}`).join(";"),
-		selected,
-		hovered,
 		color,
 		size,
 		style.dash,
@@ -28179,11 +28081,11 @@ function sync$10(container, item, context) {
 	if (lineSig !== parts.lineSig) {
 		parts.lineSig = lineSig;
 		parts.line.clear();
-		const width = selected ? size + 1 : size;
+		const width = size;
 		const stroke = {
 			color,
 			width,
-			alpha: selected || hovered ? 1 : .92,
+			alpha: .92,
 			cap: "round",
 			join: "round"
 		};
@@ -28207,22 +28109,29 @@ function sync$10(container, item, context) {
 	}
 	const labelSig = [
 		props.label,
-		context.palette.text,
-		context.palette.bg,
-		props.fontSize
+		props.fontSize,
+		context.themeKey
 	].join("|");
 	if (labelSig !== parts.labelSig) {
 		parts.labelSig = labelSig;
 		parts.label.text = props.label;
 		parts.label.style.fill = context.palette.text;
 		parts.label.style.fontSize = props.fontSize;
-		const padX = props.fontSize * .4;
-		const padY = props.fontSize * .15;
+		const padX = props.fontSize * .5;
+		const padY = props.fontSize * .25;
 		const { width, height } = parts.label;
-		parts.backdrop.clear();
-		parts.backdrop.roundRect(-width / 2 - padX, -height / 2 - padY, width + padX * 2, height + padY * 2, props.fontSize * .3).fill({
-			color: context.palette.bg,
-			alpha: .92
+		const plate = {
+			x: -width / 2 - padX,
+			y: -height / 2 - padY,
+			width: width + padX * 2,
+			height: height + padY * 2
+		};
+		drawCardSurface(parts.backdrop.clear(), plate, {
+			...context.style,
+			radius: Math.min(context.style.radius, plate.height / 2)
+		}, {
+			fill: context.palette.surface,
+			border: context.palette.border
 		});
 	}
 	const visible = props.label.length > 0 && (style.trim === void 0 || style.trim >= .5);
@@ -28253,7 +28162,7 @@ const arrowCardRenderer = {
 		label.anchor.set(.5);
 		const backdrop = new Graphics();
 		root.addChild(line, backdrop, label);
-		partsByContainer$10.set(root, {
+		partsByContainer$11.set(root, {
 			root,
 			line,
 			backdrop,
@@ -28262,11 +28171,11 @@ const arrowCardRenderer = {
 			labelSig: "",
 			resolution
 		});
-		if (item.type === "arrow") sync$10(root, item, context);
+		if (item.type === "arrow") sync$11(root, item, context);
 		return root;
 	},
 	update: (container, item, context) => {
-		if (item.type === "arrow") sync$10(container, item, context);
+		if (item.type === "arrow") sync$11(container, item, context);
 	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "arrow") return;
@@ -28278,126 +28187,13 @@ const arrowCardRenderer = {
 		});
 	},
 	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);
+		partsByContainer$11.get(container)?.root.destroy({ children: true });
+		partsByContainer$11.delete(container);
 	}
 };
 //#endregion
 //#region ../sdk/src/board/render/renderers/draw-card-renderer.ts
-const partsByContainer$8 = /* @__PURE__ */ new WeakMap();
+const partsByContainer$10 = /* @__PURE__ */ new WeakMap();
 function fillRibbon(graphics, ribbon, color) {
 	const { positions, indices } = ribbon;
 	for (let offset = 0; offset < indices.length; offset += 3) {
@@ -28448,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;
@@ -28482,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,
@@ -28499,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;
@@ -28516,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) {
@@ -28665,8 +28461,8 @@ function drawTrail(graphics, parts, item, context, color) {
 		});
 	}
 }
-function sync$7(container, item, context) {
-	const parts = partsByContainer$7.get(container);
+function sync$9(container, item, context) {
+	const parts = partsByContainer$9.get(container);
 	if (!parts) return;
 	positionShell(parts.root, item);
 	const { width, height } = item.frame;
@@ -28692,11 +28488,6 @@ function sync$7(container, item, context) {
 			break;
 		case "trail": drawTrail(graphics, parts, item, context, color);
 	}
-	if (context.selectedIds.has(item.id) || context.hoveredId === item.id) graphics.rect(0, 0, width, height).stroke({
-		color: context.palette.muted,
-		width: 1,
-		alpha: .6
-	});
 }
 const effectCardRenderer = {
 	id: "effect-card",
@@ -28706,16 +28497,16 @@ const effectCardRenderer = {
 		const root = new Container();
 		const graphics = new Graphics();
 		root.addChild(graphics);
-		partsByContainer$7.set(root, {
+		partsByContainer$9.set(root, {
 			root,
 			graphics,
 			trail: []
 		});
-		if (item.type === "effect") sync$7(root, item, context);
+		if (item.type === "effect") sync$9(root, item, context);
 		return root;
 	},
 	update: (container, item, context) => {
-		if (item.type === "effect") sync$7(container, item, context);
+		if (item.type === "effect") sync$9(container, item, context);
 	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "effect") return;
@@ -28725,27 +28516,293 @@ const effectCardRenderer = {
 		});
 	},
 	destroy: (container) => {
-		partsByContainer$7.get(container)?.root.destroy({ children: true });
-		partsByContainer$7.delete(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);
+	}
+	parts.excerpt.visible = showExcerpt;
+}
+const fileCardRenderer = {
+	id: "file-card",
+	canRender: (item) => item.type === "file",
+	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({
+			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,
+			plate,
+			body,
+			clip,
+			cover,
+			coverMask,
+			typeMark,
+			title,
+			excerpt,
+			visualSig: "",
+			textSig: "",
+			titleRes: { resolution },
+			excerptRes: { resolution },
+			typeMarkRes: { resolution }
+		});
+		if (item.type === "file") sync$8(root, item, context);
+		return root;
+	},
+	update: (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) => {
+		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
+		});
+	},
+	destroy: (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";
@@ -28753,11 +28810,9 @@ function sync$6(container, item, context) {
 		props.decoration,
 		frame.width,
 		frame.height,
-		selected,
-		hovered,
 		fill,
 		fillAlpha,
-		stroke,
+		baseStroke,
 		alpha,
 		radius,
 		strokeWidth,
@@ -28771,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"
@@ -28789,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);
 }
@@ -28810,7 +28869,7 @@ const frameCardRenderer = {
 			fontWeight: "600"
 		});
 		root.addChild(box, label);
-		partsByContainer$6.set(root, {
+		partsByContainer$7.set(root, {
 			root,
 			box,
 			label,
@@ -28818,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;
@@ -28832,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;
@@ -28920,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);
@@ -28937,8 +28994,6 @@ function sync$5(container, item, context) {
 	const visualSig = [
 		width,
 		height,
-		selected,
-		hovered,
 		props.geometry,
 		props.path,
 		fill,
@@ -28948,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;
@@ -28961,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") {
@@ -28970,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"
 			});
@@ -29021,7 +29074,7 @@ const shapeCardRenderer = {
 		});
 		label.anchor.set(.5);
 		root.addChild(shape, label);
-		partsByContainer$5.set(root, {
+		partsByContainer$6.set(root, {
 			root,
 			shape,
 			label,
@@ -29030,11 +29083,11 @@ const shapeCardRenderer = {
 			wrapWidth: 0,
 			resolution
 		});
-		if (item.type === "shape") sync$5(root, item, context);
+		if (item.type === "shape") sync$6(root, item, context);
 		return root;
 	},
 	update: (container, item, context) => {
-		if (item.type === "shape") sync$5(container, item, context);
+		if (item.type === "shape") sync$6(container, item, context);
 	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "shape") return;
@@ -29046,15 +29099,15 @@ const shapeCardRenderer = {
 		});
 	},
 	destroy: (container) => {
-		partsByContainer$5.get(container)?.root.destroy({ children: true });
-		partsByContainer$5.delete(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$4 = /* @__PURE__ */ new WeakMap();
-function sync$4(container, item, context) {
-	const parts = partsByContainer$4.get(container);
+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);
@@ -29066,27 +29119,25 @@ function sync$4(container, item, context) {
 	const texture = context.scripts?.frame(item, context.time, resolution) ?? null;
 	const error = context.scripts?.error(item.id) ?? null;
 	parts.sprite.visible = Boolean(texture);
-	if (texture && parts.sprite.texture !== texture) parts.sprite.texture = 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
+		context.themeKey
 	].join("|");
 	if (sig === parts.sig) return;
 	parts.sig = sig;
 	parts.placeholder.clear();
-	if (!ready || selected || error) parts.placeholder.rect(0, 0, width, height).stroke({
-		color: selected ? context.palette.brand : context.palette.border,
-		width: selected ? 2 : 1,
+	if (!ready || error) parts.placeholder.rect(0, 0, width, height).stroke({
+		color: context.palette.border,
+		width: 1,
 		alpha: .8
 	});
 	parts.label.visible = !ready || Boolean(error);
@@ -29116,7 +29167,7 @@ const customCardRenderer = {
 		});
 		label.anchor.set(.5);
 		root.addChild(sprite, placeholder, label);
-		partsByContainer$4.set(root, {
+		partsByContainer$5.set(root, {
 			id: item.id,
 			root,
 			sprite,
@@ -29124,11 +29175,11 @@ const customCardRenderer = {
 			label,
 			sig: ""
 		});
-		if (item.type === "custom") sync$4(root, item, context);
+		if (item.type === "custom") sync$5(root, item, context);
 		return root;
 	},
 	update: (container, item, context) => {
-		if (item.type === "custom") sync$4(container, item, context);
+		if (item.type === "custom") sync$5(container, item, context);
 	},
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {
@@ -29137,27 +29188,15 @@ const customCardRenderer = {
 		});
 	},
 	destroy: (container, context) => {
-		const parts = partsByContainer$4.get(container);
+		const parts = partsByContainer$5.get(container);
 		if (parts) context.scripts?.release(parts.id);
 		parts?.root.destroy({ children: true });
-		partsByContainer$4.delete(container);
+		partsByContainer$5.delete(container);
 	}
 };
 //#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;
-}
+const partsByContainer$4 = /* @__PURE__ */ new WeakMap();
 function cropRect(crop) {
 	if (!crop) return null;
 	const w = Math.min(crop.w, 1 - crop.x);
@@ -29191,116 +29230,640 @@ function showTexture(parts, texture, crop) {
 	if (parts.sprite.texture !== display) parts.sprite.texture = display;
 	if (previous && previous !== parts.cropped) previous.destroy(false);
 }
+const PRINT_MARGIN = 6;
+function sync$4(container, item, context) {
+	const parts = partsByContainer$4.get(container);
+	if (!parts) return;
+	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;
+	}
+	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));
+}
+const MOSAIC_FRAME_MS = 160;
+const MOSAIC_CELL = 8;
+function drawMosaic(graphics, width, height, color, frame) {
+	const columns = Math.max(1, Math.floor(width / MOSAIC_CELL));
+	const rows = Math.max(1, Math.floor(height / MOSAIC_CELL));
+	const left = (width - columns * MOSAIC_CELL) / 2;
+	const top = (height - rows * MOSAIC_CELL) / 2;
+	graphics.clear();
+	for (const [threshold, alpha] of [[.08, .16], [.02, .3]]) {
+		for (let row = 0; row < rows; row += 1) for (let column = 0; column < columns; column += 1) {
+			let hash = Math.imul(column + 1, 2654435761) ^ Math.imul(row + 1, 2246822507) ^ Math.imul(frame + 1, 3266489909);
+			hash ^= hash >>> 15;
+			hash = Math.imul(hash, 739982445);
+			hash ^= hash >>> 12;
+			if ((hash >>> 0) / 4294967295 < threshold) graphics.rect(left + column * MOSAIC_CELL + 1, top + row * MOSAIC_CELL + 1, 6, 6);
+		}
+		graphics.fill({
+			color,
+			alpha
+		});
+	}
+}
+function advance(parts, clock) {
+	const { motion } = parts;
+	let next = null;
+	if (motion.mosaic) {
+		const frame = Math.floor(clock / MOSAIC_FRAME_MS);
+		if (frame !== motion.mosaic.step) {
+			motion.mosaic.step = frame;
+			drawMosaic(parts.shimmer, motion.width, motion.mosaic.height, motion.mosaic.color, frame);
+		}
+		next = MOSAIC_FRAME_MS - clock % MOSAIC_FRAME_MS;
+	} else if (motion.shimmer) {
+		const travel = motion.width + parts.shimmer.width;
+		parts.shimmer.x = clock % SHIMMER_PERIOD_MS / SHIMMER_PERIOD_MS * travel;
+		next = SHIMMER_FRAME_MS;
+	}
+	if (motion.startedAt !== null) {
+		const elapsedMs = Date.now() - motion.startedAt;
+		const elapsed = formatBoardDuration(elapsedMs);
+		if (elapsed !== motion.elapsed) {
+			motion.elapsed = elapsed;
+			parts.body.text = `${motion.label} · ${elapsed}`;
+		}
+		const untilNextSecond = SECOND - Math.max(0, elapsedMs) % SECOND;
+		next = next === null ? untilNextSecond : Math.min(next, untilNextSecond);
+	}
+	if (motion.revealFrom !== null) {
+		const progress = Math.min(1, (clock - motion.revealFrom) / REVEAL_MS);
+		parts.preview.alpha = progress * (2 - progress);
+		if (progress >= 1) motion.revealFrom = null;
+		else next = 0;
+	}
+	return next;
+}
 function sync$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,
-		selected,
-		hovered,
-		texId,
-		JSON.stringify(item.props.crop ?? null),
-		failed,
-		context.colorScheme
+		color,
+		context.palette.text,
+		context.palette.muted,
+		context.style.font
 	].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 (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,
+		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 (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);
 	}
 };
@@ -29404,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
@@ -29496,146 +30059,145 @@ 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",
+	canRender: (item) => item.type === "video",
+	create: (item, context) => {
+		const root = new Container();
+		const plate = new Graphics();
+		const sprite = new Sprite(Texture.EMPTY);
+		const mask = new Graphics();
+		const chrome = new Graphics();
+		const tag = createCardTag();
+		root.addChild(plate, sprite, mask, chrome, tag.root);
+		sprite.mask = mask;
+		partsByContainer.set(root, {
+			root,
+			plate,
+			sprite,
+			mask,
+			chrome,
+			tag,
+			sig: ""
+		});
+		if (item.type === "video") sync(root, item, context);
+		return root;
+	},
+	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,
+			fillAlpha: .96,
+			accent: context.palette.brand,
+			accentAlpha: .75
+		});
+	},
+	destroy: (container) => {
+		partsByContainer.get(container)?.root.destroy({ children: true });
+		partsByContainer.delete(container);
+	}
+};
 //#endregion
 //#region ../sdk/src/board/render/renderers/board-renderer-registry.ts
+const DEFAULT_BOARD_RENDER_LABELS = {
+	queued: "Queued",
+	generating: "Generating",
+	failed: "Failed",
+	previewUnavailable: "Preview unavailable",
+	noPreview: "No preview"
+};
 const builtinCardRenderers = [
 	textCardRenderer,
 	imageCardRenderer,
-	{
-		id: "video-card",
-		canRender: (item) => item.type === "video",
-		create: (item, context) => {
-			const root = new Container();
-			const plate = new Graphics();
-			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);
-			sprite.mask = mask;
-			partsByContainer.set(root, {
-				root,
-				plate,
-				sprite,
-				mask,
-				chrome,
-				label,
-				sig: "",
-				wrapWidth: 0,
-				resolution
-			});
-			if (item.type === "video") sync(root, item, context);
-			return root;
-		},
-		update: (container, item, context) => {
-			if (item.type === "video") sync(container, item, context);
-		},
-		renderFar: (graphics, item, context) => {
-			drawFarPlate(graphics, item.frame, {
-				fill: context.palette.surface,
-				fillAlpha: .96,
-				accent: context.palette.brand,
-				accentAlpha: .75
-			});
-		},
-		destroy: (container) => {
-			partsByContainer.get(container)?.root.destroy({ children: true });
-			partsByContainer.delete(container);
-		}
-	},
+	videoCardRenderer,
 	audioCardRenderer,
 	fileCardRenderer,
 	taskCardRenderer,
@@ -29960,8 +30522,16 @@ const fileProps = {
 		coverUrl: string().optional()
 	}).strict().optional()
 };
-const timedFileProps = {
+const BoardMediaOriginSchema = object({
+	taskRunId: string().min(1).max(160),
+	artifactId: string().min(1).max(240)
+}).strict();
+const mediaProps = {
 	...fileProps,
+	origin: BoardMediaOriginSchema.optional()
+};
+const timedFileProps = {
+	...mediaProps,
 	time: nonNegative.optional()
 };
 const BoardCropSchema = object({
@@ -29974,7 +30544,7 @@ object({
 	...boxed(640, 360),
 	type: literal("image"),
 	props: object({
-		...fileProps,
+		...mediaProps,
 		crop: BoardCropSchema.optional()
 	}).strict()
 }).strict();
@@ -30039,8 +30609,10 @@ const BoardTaskSnapshotSchema = object({
 	title: string().min(1).max(240),
 	model: string().max(160).optional(),
 	promptExcerpt: string().max(480).optional(),
+	errorExcerpt: string().max(240).optional(),
 	artifactCount: number$1().int().nonnegative(),
 	artifacts: array(BoardTaskArtifactSchema).max(6).default([]),
+	startedAt: string().max(64).optional(),
 	updatedAt: string().optional()
 }).strict();
 object({
@@ -30048,7 +30620,7 @@ object({
 	type: literal("task"),
 	props: object({
 		taskRunId: string().min(1).max(160),
-		snapshot: BoardTaskSnapshotSchema
+		snapshot: BoardTaskSnapshotSchema.describe("Maintained by the server for tasks in the Board's Space; writers may omit it.")
 	}).strict()
 }).strict();
 const BOARD_EFFECT_KINDS = [
@@ -30337,6 +30909,8 @@ function createScriptRuntime(module, initial, host) {
 	let patches = effects?.patches ?? {};
 	let items = effects?.items ?? {};
 	let space = effects?.space ?? "world";
+	let anchor = effects?.anchor;
+	let view = null;
 	let hits = effects?.hits ?? {};
 	const invalidate = () => {
 		if (disposed) return;
@@ -30373,6 +30947,9 @@ function createScriptRuntime(module, initial, host) {
 		get frame() {
 			return frame;
 		},
+		get view() {
+			return view;
+		},
 		random() {
 			randomState = Math.imul(randomState, 1664525) + 1013904223 >>> 0;
 			return randomState / 4294967296;
@@ -30383,10 +30960,11 @@ function createScriptRuntime(module, initial, host) {
 				listeners = /* @__PURE__ */ new Set();
 				handlers.set(type, listeners);
 			}
-			listeners.add(handler);
+			const listener = (event) => handler(event);
+			listeners.add(listener);
 			invalidate();
 			return () => {
-				listeners.delete(handler);
+				listeners.delete(listener);
 				invalidate();
 			};
 		},
@@ -30405,6 +30983,7 @@ function createScriptRuntime(module, initial, host) {
 		scene(next, options) {
 			items = structuredClone(next);
 			space = options?.space ?? "world";
+			anchor = options?.anchor ? structuredClone(options.anchor) : void 0;
 			invalidate();
 		},
 		hitRegions(next) {
@@ -30466,6 +31045,7 @@ function createScriptRuntime(module, initial, host) {
 		},
 		event(event) {
 			if (disposed) return;
+			if (event.type === "viewchange") view = event.data;
 			const listeners = handlers.get(event.type);
 			if (!listeners?.size) return;
 			for (const handler of listeners) handler(event);
@@ -30479,6 +31059,7 @@ function createScriptRuntime(module, initial, host) {
 			return {
 				parameters: module.parameters,
 				space,
+				anchor,
 				patches,
 				items,
 				hits,
@@ -30497,7 +31078,8 @@ function createScriptRuntime(module, initial, host) {
 					patches,
 					items,
 					hits,
-					space
+					space,
+					anchor
 				} : void 0
 			};
 			return clone ? structuredClone(snapshot) : snapshot;
@@ -30514,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();
@@ -30527,14 +31161,20 @@ 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,
+			labels: DEFAULT_BOARD_RENDER_LABELS,
+			taskRun: () => null,
 			scripts: input.scripts,
 			assetKey: input.assetKey ?? imageAssetKey,
 			getTexture: (key) => textures.get(key) ?? null,
@@ -30689,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,