@neta-art/cohub 11.0.0 → 11.1.0

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

@@ -1,17 +1,21 @@
 import { BOARD_FONT_STACK, BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { featuredTaskArtifact } from "../../model/task.js";
+import { featuredTaskArtifact } from "../../../protocol/dist/board-task.js";
 import { drawAudioWaveform } from "../audio-waveform.js";
 import { syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
 import { fitTextToLines } from "./file-card-renderer.js";
-import { Container, Graphics, Sprite, Text } from "pixi.js";
+import { Container, FillGradient, Graphics, Sprite, Text } from "pixi.js";
 //#region src/board/render/renderers/task-card-renderer.ts
 const RADIUS = 4;
 const PADDING = 12;
 const META_HEIGHT = 28;
 const TASK_CARD_FULL_DETAIL_ZOOM = .55;
 const PLAY_BADGE_RADIUS = 15;
+const SHIMMER_PERIOD_MS = 1600;
+const SHIMMER_FRAME_MS = 33;
+const REVEAL_MS = 180;
+const SECOND = 1e3;
 const partsByContainer = /* @__PURE__ */ new WeakMap();
 function previewKindFor(artifact) {
 	if (!artifact) return "empty";
@@ -19,36 +23,51 @@ function previewKindFor(artifact) {
 	if (artifact.type === "audio") return artifact.previewUrl ? "texture" : "waveform";
 	return artifact.textExcerpt ? "text" : "empty";
 }
-function stateSurfaceFor(item, kind, hasTexture, previewFailed) {
+function liveStatus(item, context) {
+	const { snapshot } = item.props;
+	const live = snapshot.status === "completed" ? null : context.taskRun(item.props.taskRunId);
+	const liveStart = Date.parse(live?.startedAt ?? "");
+	const working = live?.status === "pending" || live?.status === "running";
+	const adopt = snapshot.status === "failed" ? working && liveStart > Date.parse(snapshot.updatedAt ?? "") : live?.status === "running" || live?.status === "pending" && snapshot.status === "pending";
+	const status = adopt && live ? live.status : snapshot.status;
+	const started = adopt ? liveStart : Date.parse(snapshot.startedAt ?? "");
+	return {
+		status,
+		startedAt: Number.isFinite(started) ? started : null
+	};
+}
+function stateSurfaceFor(status, kind, hasTexture, previewFailed) {
 	if (kind === "texture" && !hasTexture) {
-		if (item.props.snapshot.status === "failed") return "failed";
+		if (status === "failed") return "failed";
 		return previewFailed ? "unavailable" : "media-loading";
 	}
 	if (kind !== "empty") return null;
-	if (item.props.snapshot.status === "failed") return "failed";
-	if (item.props.snapshot.status === "running") return "generating";
-	if (item.props.snapshot.status === "pending") return "queued";
+	if (status === "failed") return "failed";
+	if (status === "running") return "generating";
+	if (status === "pending") return "queued";
 	return "empty";
 }
-function stateLabel(surface) {
+function stateLabel(surface, context) {
 	switch (surface) {
-		case "generating": return "Generating";
-		case "queued": return "Queued";
-		case "failed": return "Failed";
-		case "unavailable": return "Preview unavailable";
-		case "empty": return "No preview";
+		case "generating": return context.labels.generating;
+		case "queued": return context.labels.queued;
+		case "failed": return context.labels.failed;
+		case "unavailable": return context.labels.previewUnavailable;
+		case "empty": return context.labels.noPreview;
 		default: return "";
 	}
 }
-function statusColor(item, context) {
-	if (item.props.snapshot.status === "failed") return context.colors.rose.stroke;
-	if (item.props.snapshot.status === "running") return context.colors.brand.stroke;
+function statusColor(status, context) {
+	if (status === "failed") return context.colors.rose.stroke;
+	if (status === "running") return context.colors.brand.stroke;
 	return context.colors.neutral.stroke;
 }
-function metadata(item) {
-	const { artifactCount, artifacts } = item.props.snapshot;
-	const extra = artifactCount > artifacts.length ? `${artifacts.length}/${artifactCount}` : artifactCount > 1 ? `+${artifactCount - 1}` : null;
-	return [item.props.snapshot.model, extra].filter(Boolean).join(" · ");
+function formatTaskElapsed(ms) {
+	const total = Math.max(0, Math.floor(ms / SECOND));
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor(total % 3600 / 60);
+	const seconds = String(total % 60).padStart(2, "0");
+	return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${seconds}` : `${minutes}:${seconds}`;
 }
 function containTaskPreviewRect(width, height, imageWidth, imageHeight) {
 	if (width <= 0 || height <= 0 || imageWidth <= 0 || imageHeight <= 0) return {
@@ -150,15 +169,83 @@ function drawFailedBadge(graphics, width, color, context) {
 		cap: "round"
 	});
 }
+const shimmerGradients = /* @__PURE__ */ new Map();
+function shimmerGradient(color) {
+	let gradient = shimmerGradients.get(color);
+	if (!gradient) {
+		const rgb = `${color >> 16 & 255}, ${color >> 8 & 255}, ${color & 255}`;
+		gradient = new FillGradient({
+			type: "linear",
+			start: {
+				x: 0,
+				y: 0
+			},
+			end: {
+				x: 1,
+				y: 0
+			},
+			textureSpace: "local",
+			colorStops: [
+				{
+					offset: 0,
+					color: `rgba(${rgb}, 0)`
+				},
+				{
+					offset: .5,
+					color: `rgba(${rgb}, 0.07)`
+				},
+				{
+					offset: 1,
+					color: `rgba(${rgb}, 0)`
+				}
+			]
+		});
+		shimmerGradients.set(color, gradient);
+	}
+	return gradient;
+}
+function drawShimmerBand(graphics, width, height, color) {
+	const band = Math.max(48, width * .45);
+	graphics.clear().rect(-band, 0, band, height).fill(shimmerGradient(color));
+}
+function advance(parts, clock) {
+	const { motion } = parts;
+	let next = null;
+	if (motion.shimmer) {
+		const travel = motion.width + parts.shimmer.width;
+		parts.shimmer.x = clock % SHIMMER_PERIOD_MS / SHIMMER_PERIOD_MS * travel;
+		next = SHIMMER_FRAME_MS;
+	}
+	if (motion.startedAt !== null) {
+		const elapsedMs = Date.now() - motion.startedAt;
+		const elapsed = formatTaskElapsed(elapsedMs);
+		if (elapsed !== motion.elapsed) {
+			motion.elapsed = elapsed;
+			parts.body.text = `${motion.label} · ${elapsed}`;
+		}
+		const untilNextSecond = SECOND - Math.max(0, elapsedMs) % SECOND;
+		next = next === null ? untilNextSecond : Math.min(next, untilNextSecond);
+	}
+	if (motion.revealFrom !== null) {
+		const progress = Math.min(1, (clock - motion.revealFrom) / REVEAL_MS);
+		parts.preview.alpha = progress * (2 - progress);
+		if (progress >= 1) motion.revealFrom = null;
+		else next = 0;
+	}
+	return next;
+}
 function sync(container, item, context) {
 	const parts = partsByContainer.get(container);
 	if (!parts) return;
 	positionShell(parts.root, item);
 	const { width, height } = item.frame;
+	const { snapshot } = item.props;
+	const { status, startedAt } = liveStatus(item, context);
 	const selected = context.selectedIds.has(item.id);
 	const hovered = context.hoveredId === item.id;
 	const full = context.zoom >= TASK_CARD_FULL_DETAIL_ZOOM;
-	const color = statusColor(item, context);
+	const working = status === "pending" || status === "running";
+	const color = statusColor(status, context);
 	const key = context.assetKey(item);
 	if (key !== parts.assetKey) {
 		if (parts.assetKey) context.releaseTexture(parts.assetKey);
@@ -167,20 +254,58 @@ function sync(container, item, context) {
 	}
 	const texture = key ? context.getTexture(key) : null;
 	const previewFailed = Boolean(key && !texture && context.hasError(key));
-	const artifact = featuredTaskArtifact(item.props.snapshot.artifacts);
+	const artifact = featuredTaskArtifact(snapshot.artifacts);
 	const kind = previewKindFor(artifact);
-	const surface = stateSurfaceFor(item, kind, Boolean(texture), previewFailed);
+	const surface = stateSurfaceFor(status, kind, Boolean(texture), previewFailed);
 	const frame = {
 		x: 1,
 		y: 1,
 		width: Math.max(1, width - 2),
 		height: Math.max(1, height - 2)
 	};
-	const metaText = artifact ? metadata(item) : "";
+	const metaText = artifact || working ? snapshot.model ?? "" : "";
 	const showMeta = full && Boolean(metaText);
-	const failedWithOutput = item.props.snapshot.status === "failed" && kind !== "empty";
+	const failedWithOutput = status === "failed" && kind !== "empty";
+	const count = artifact && snapshot.artifactCount > 1 ? String(snapshot.artifactCount) : "";
+	const showBadge = full && Boolean(count);
+	const label = stateLabel(surface, context);
+	const counting = full && working && startedAt !== null && surface !== null;
+	const elapsed = counting ? formatTaskElapsed(Date.now() - startedAt) : "";
+	const detailText = !full || !surface ? "" : status === "failed" ? snapshot.errorExcerpt ?? "" : working ? snapshot.promptExcerpt ?? "" : "";
+	const textArtifact = kind === "text" && artifact?.type === "text";
+	const bodyText = textArtifact ? artifact.textExcerpt : counting ? `${label} · ${elapsed}` : label;
 	syncTextResolution(parts.body, parts, context.zoom);
+	syncTextResolution(parts.detail, parts, context.zoom);
 	syncTextResolution(parts.meta, parts, context.zoom);
+	syncTextResolution(parts.badge, parts, context.zoom);
+	const textSig = [
+		counting ? label : bodyText,
+		detailText,
+		metaText,
+		count,
+		kind,
+		surface,
+		full,
+		width,
+		height,
+		color,
+		context.palette.text,
+		context.palette.muted
+	].join("|");
+	if (textSig !== parts.textSig) {
+		parts.textSig = textSig;
+		const wrap = Math.max(24, width - 24);
+		parts.body.style.fill = surface === "failed" ? color : context.palette.text;
+		parts.body.anchor.set(textArtifact ? 0 : .5, 0);
+		fitTextToLines(parts.body, bodyText, textArtifact ? Math.max(1, Math.floor((height - 24 - (showMeta ? META_HEIGHT : 0)) / 16)) : 1, wrap);
+		parts.detail.style.fill = context.palette.muted;
+		fitTextToLines(parts.detail, detailText, height - 24 > 120 ? 2 : 1, Math.min(wrap, 360));
+		parts.meta.style.fill = context.palette.text;
+		fitTextToLines(parts.meta, metaText, 1, wrap);
+		parts.badge.style.fill = context.palette.text;
+		if (parts.badge.text !== count) parts.badge.text = count;
+	}
+	const badgeWidth = Math.max(22, parts.badge.width + 12);
 	const visualSig = [
 		width,
 		height,
@@ -191,6 +316,7 @@ function sync(container, item, context) {
 		kind,
 		surface,
 		showMeta,
+		showBadge && badgeWidth,
 		failedWithOutput,
 		artifact?.type ?? "none",
 		artifact?.id ?? "none",
@@ -199,7 +325,8 @@ function sync(container, item, context) {
 		context.palette.surface,
 		context.palette.hover,
 		context.palette.border,
-		context.palette.bg
+		context.palette.bg,
+		context.palette.text
 	].join("|");
 	if (visualSig !== parts.visualSig) {
 		parts.visualSig = visualSig;
@@ -217,6 +344,8 @@ function sync(container, item, context) {
 			alpha: .5
 		});
 		parts.previewMask.clear().rect(frame.x, frame.y, frame.width, frame.height).fill({ color: 16777215 });
+		drawShimmerBand(parts.shimmer, frame.width, frame.height, context.palette.text);
+		parts.shimmer.y = frame.y;
 		parts.previewArt.clear();
 		if (kind === "waveform") {
 			const bottomInset = showMeta ? META_HEIGHT : 0;
@@ -229,47 +358,52 @@ function sync(container, item, context) {
 		}
 		if (full && (artifact?.type === "audio" || artifact?.type === "video" && texture)) drawPlayBadge(parts.previewArt, frame, context);
 		if (surface) {
-			const markY = frame.y + frame.height / 2 - (full && stateLabel(surface) ? 10 : 0);
+			const markY = frame.y + frame.height / 2 - (full && label ? 18 : 0);
 			drawStateMark(parts.previewArt, surface, frame.x + frame.width / 2, markY, surface === "failed" ? color : context.colors.neutral.stroke);
 		}
 		if (showMeta) parts.previewArt.rect(frame.x, frame.y + frame.height - META_HEIGHT, frame.width, META_HEIGHT).fill({
 			color: context.palette.bg,
 			alpha: .68
 		});
+		if (showBadge) parts.previewArt.roundRect(width - badgeWidth - 8, 8, badgeWidth, 20, 10).fill({
+			color: context.palette.bg,
+			alpha: .72
+		});
 		if (failedWithOutput) drawFailedBadge(parts.previewArt, width, color, context);
 	}
-	parts.preview.visible = kind === "texture" && Boolean(texture);
-	if (parts.preview.visible && texture) {
+	const showPreview = kind === "texture" && Boolean(texture);
+	const revealKey = showPreview ? `${artifact?.id}:${texture?.uid}` : null;
+	const sameCard = parts.motion.itemId === item.id;
+	parts.motion.itemId = item.id;
+	if (revealKey !== parts.motion.revealKey || !sameCard) {
+		const appearing = sameCard && parts.motion.revealKey === null && revealKey !== null;
+		parts.motion.revealKey = revealKey;
+		parts.motion.revealFrom = appearing && !context.reducedMotion ? performance.now() : null;
+		parts.preview.alpha = parts.motion.revealFrom === null ? 1 : 0;
+	}
+	parts.preview.visible = showPreview;
+	if (showPreview && texture) {
 		if (parts.preview.texture !== texture) parts.preview.texture = texture;
 		const fitted = containTaskPreviewRect(frame.width, frame.height, texture.width, texture.height);
 		parts.preview.position.set(frame.x + fitted.x, frame.y + fitted.y);
 		parts.preview.width = fitted.width;
 		parts.preview.height = fitted.height;
 	}
-	const bodyText = kind === "text" && artifact?.type === "text" ? artifact.textExcerpt : stateLabel(surface);
-	const textSig = [
-		bodyText,
-		metaText,
-		kind,
-		surface,
-		full,
-		width,
-		height,
-		context.palette.text,
-		context.palette.muted
-	].join("|");
-	if (textSig !== parts.textSig) {
-		parts.textSig = textSig;
-		parts.body.style.fill = surface === "failed" ? color : context.palette.text;
-		fitTextToLines(parts.body, bodyText, kind === "text" ? Math.max(1, Math.floor((height - 24 - (showMeta ? META_HEIGHT : 0)) / 16)) : 1, Math.max(24, width - 24));
-		parts.meta.style.fill = context.palette.text;
-		fitTextToLines(parts.meta, metaText, 1, Math.max(24, width - 24));
-	}
 	parts.body.visible = full && Boolean(bodyText);
+	parts.detail.visible = full && Boolean(detailText);
 	parts.meta.visible = showMeta;
-	if (kind === "text") parts.body.position.set(PADDING, PADDING);
-	else parts.body.position.set(Math.max(PADDING, (width - parts.body.width) / 2), height / 2 + 10);
+	parts.badge.visible = showBadge;
+	if (textArtifact) parts.body.position.set(PADDING, PADDING);
+	else parts.body.position.set(width / 2, height / 2 + 2);
+	parts.detail.position.set(width / 2, height / 2 + 2 + parts.body.height + 4);
 	parts.meta.position.set(PADDING, height - META_HEIGHT + 7);
+	parts.badge.position.set(width - 8 - badgeWidth / 2, 18);
+	parts.motion.width = frame.width;
+	parts.motion.shimmer = full && working && kind !== "texture" && !context.reducedMotion;
+	parts.shimmer.visible = parts.motion.shimmer;
+	parts.motion.startedAt = counting ? startedAt : null;
+	parts.motion.label = label;
+	parts.motion.elapsed = elapsed;
 }
 const taskCardRenderer = {
 	id: "task-card",
@@ -281,35 +415,32 @@ const taskCardRenderer = {
 		const previewBg = new Graphics();
 		const preview = new Sprite();
 		const previewMask = new Graphics();
+		const shimmer = new Graphics();
 		const previewArt = new Graphics();
 		const resolution = textResolutionForZoom(context.zoom);
-		const body = new Text({
-			text: "",
-			style: {
-				fontFamily: BOARD_FONT_STACK,
-				fontSize: 11.5,
-				fontWeight: "500",
-				wordWrap: true,
-				breakWords: true
-			},
-			resolution,
-			roundPixels: true
-		});
-		const meta = new Text({
+		const text = (fontFamily, fontSize, fontWeight) => new Text({
 			text: "",
 			style: {
-				fontFamily: BOARD_MONO_FONT_STACK,
-				fontSize: 10,
-				fontWeight: "500",
+				fontFamily,
+				fontSize,
+				fontWeight,
 				wordWrap: true,
 				breakWords: true
 			},
 			resolution,
 			roundPixels: true
 		});
+		const body = text(BOARD_FONT_STACK, 11.5, "500");
+		const detail = text(BOARD_FONT_STACK, 10.5, "400");
+		const meta = text(BOARD_MONO_FONT_STACK, 10, "500");
+		const badge = text(BOARD_MONO_FONT_STACK, 10, "500");
+		badge.style.wordWrap = false;
+		badge.anchor.set(.5);
+		detail.anchor.set(.5, 0);
+		detail.style.align = "center";
 		preview.mask = previewMask;
 		root.mask = clip;
-		root.addChild(plate, clip, previewBg, preview, previewMask, previewArt, body, meta);
+		root.addChild(plate, clip, previewBg, shimmer, preview, previewMask, previewArt, body, detail, meta, badge);
 		partsByContainer.set(root, {
 			root,
 			plate,
@@ -317,13 +448,26 @@ const taskCardRenderer = {
 			previewBg,
 			preview,
 			previewMask,
+			shimmer,
 			previewArt,
+			badge,
 			body,
+			detail,
 			meta,
 			assetKey: null,
 			visualSig: "",
 			textSig: "",
-			resolution
+			resolution,
+			motion: {
+				itemId: "",
+				width: 0,
+				shimmer: false,
+				startedAt: null,
+				label: "",
+				elapsed: "",
+				revealFrom: null,
+				revealKey: null
+			}
 		});
 		if (item.type === "task") sync(root, item, context);
 		return root;
@@ -331,14 +475,19 @@ const taskCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "task") sync(container, item, context);
 	},
+	tick: (container, clock) => {
+		const parts = partsByContainer.get(container);
+		return parts ? advance(parts, clock) : null;
+	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "task") return;
-		const active = item.props.snapshot.status === "failed" || item.props.snapshot.status === "running" || item.props.snapshot.status === "pending";
+		const { status } = liveStatus(item, context);
+		const active = status === "failed" || status === "running" || status === "pending";
 		drawFarPlate(graphics, item.frame, {
 			fill: context.palette.surface,
 			fillAlpha: .82,
 			...active ? {
-				accent: statusColor(item, context),
+				accent: statusColor(status, context),
 				accentAlpha: .9
 			} : {}
 		});
@@ -351,4 +500,4 @@ const taskCardRenderer = {
 	}
 };
 //#endregion
-export { TASK_CARD_FULL_DETAIL_ZOOM, containTaskPreviewRect, taskCardRenderer };
+export { TASK_CARD_FULL_DETAIL_ZOOM, containTaskPreviewRect, formatTaskElapsed, taskCardRenderer };

package/dist/board/render/script-host.d.ts

@@ -1,7 +1,7 @@
 import { BoardDocument } from "../../protocol/dist/board-model.js";
 import "../../protocol/dist/index.js";
-import { BoardScriptEvent, BoardScriptOutput, BoardScriptSnapshot } from "../model/script.js";
 import { BoardViewport } from "../model/geometry.js";
+import { BoardScriptEvent, BoardScriptOutput, BoardScriptSnapshot } from "../model/script.js";
 import { BoardScene } from "../model/scene.js";
 import { BoardScriptHost } from "./renderers/board-renderer-registry.js";
 //#region src/board/render/script-host.d.ts

package/dist/board/render/script-host.js

@@ -1,8 +1,9 @@
 import { boardScriptItems } from "../model/script-index.js";
 import { boardScriptScope } from "../model/script-scene.js";
+import { boardScriptHitVisible, resolveBoardScriptHit } from "../model/script-hit.js";
+import { BoardScriptTexture } from "./script-texture.js";
 import { createBoardScriptModuleReader, loadBoardScriptSources } from "../../protocol/dist/board-script-modules.js";
 import { boardScriptFrameSource } from "./script-sandbox.js";
-import { Texture } from "pixi.js";
 //#region src/board/render/script-host.ts
 function createBoardScriptHost(options) {
 	const revisions = /* @__PURE__ */ new Map();
@@ -25,11 +26,27 @@ function createBoardScriptHost(options) {
 		return value;
 	}
 	const focusTargets = /* @__PURE__ */ new Map();
+	const focusStyles = /* @__PURE__ */ new WeakMap();
 	const layer = document.createElement("div");
+	let interactive = false;
 	layer.style.cssText = "position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2";
 	layer.dataset.boardScripts = "";
 	options.host.appendChild(layer);
 	let disposed = false;
+	const retiredTextures = /* @__PURE__ */ new Set();
+	let retirementFrame = 0;
+	function retireTexture(texture) {
+		if (!texture.current) return;
+		retiredTextures.add(texture);
+		if (retirementFrame) return;
+		retirementFrame = requestAnimationFrame(() => {
+			retirementFrame = requestAnimationFrame(() => {
+				retirementFrame = 0;
+				for (const retired of retiredTextures) retired.destroy();
+				retiredTextures.clear();
+			});
+		});
+	}
 	function ensureBroker() {
 		if (broker) return;
 		broker = document.createElement("iframe");
@@ -58,7 +75,7 @@ function createBoardScriptHost(options) {
 			post(entry, { kind: "dispose" });
 			entry.timer = setTimeout(() => removeFrame(entry), 100);
 		} else removeFrame(entry);
-		entry.texture?.destroy(true);
+		retireTexture(entry.texture);
 		entries.delete(entry.id);
 		revisions.set(entry.id, (revisions.get(entry.id) ?? 0) + 1);
 		options.onOutput(entry.id, null);
@@ -99,7 +116,10 @@ function createBoardScriptHost(options) {
 			removeFrame(entry);
 			return;
 		}
-		if (entries.get(entry.id) !== entry) return;
+		if (entries.get(entry.id) !== entry) {
+			data.bitmap?.close?.();
+			return;
+		}
 		if (data.kind === "ready") {
 			entry.ready = true;
 			options.onFrame();
@@ -149,11 +169,7 @@ function createBoardScriptHost(options) {
 		clearTimeout(entry.timer);
 		entry.pending = false;
 		revisions.set(entry.id, (revisions.get(entry.id) ?? 0) + 1);
-		if (data.bitmap) {
-			const previous = entry.texture;
-			entry.texture = Texture.from(data.bitmap);
-			previous?.destroy(true);
-		}
+		if (data.bitmap) entry.texture.update(data.bitmap);
 		try {
 			const output = data.output;
 			if (output) {
@@ -170,7 +186,7 @@ function createBoardScriptHost(options) {
 	return {
 		revision: (id) => revisions.get(id) ?? 0,
 		ready: (id) => entries.get(id)?.output !== null && entries.get(id)?.output !== void 0,
-		frame: (item) => entries.get(item.id)?.texture ?? null,
+		frame: (item) => entries.get(item.id)?.texture.current ?? null,
 		error: (id) => entries.get(id)?.error ?? null,
 		release: () => {},
 		fault(id, message) {
@@ -215,10 +231,12 @@ function createBoardScriptHost(options) {
 		get animated() {
 			return [...entries.values()].some((entry) => !entry.error && entry.output?.animated && (entry.visible || entry.output.updating) && !entry.pending);
 		},
-		sync(board, scene, camera, time, interactive, visibleIds) {
+		sync(board, scene, camera, time, inputEnabled, visibleIds) {
 			if (disposed) return;
+			interactive = inputEnabled;
 			const alive = /* @__PURE__ */ new Set();
 			const liveFocusTargets = /* @__PURE__ */ new Set();
+			let focusSurface;
 			for (const [id, item] of boardScriptItems(board)) {
 				if (!item.script?.enabled) continue;
 				alive.add(id);
@@ -255,7 +273,7 @@ function createBoardScriptHost(options) {
 						inputKey: "",
 						inputDocument: null,
 						startedAt: (options.export ? 0 : time) - (input.snapshot?.time ?? 0),
-						texture: null,
+						texture: new BoardScriptTexture(),
 						error: null,
 						output: null,
 						events: [],
@@ -306,14 +324,15 @@ function createBoardScriptHost(options) {
 				}
 				if (entry.output && !options.export) {
 					const hits = Object.entries(entry.output.hits).filter(([, hit]) => hit.label);
-					if (!hits.length && entry.output.listens.length) hits.push([id, {
-						x: 0,
-						y: 0,
-						width: box.width,
-						height: box.height,
-						label: "text" in item.props && typeof item.props.text === "string" ? item.props.text : item.script.src
-					}]);
 					for (const [target, hit] of hits) {
+						const resolved = resolveBoardScriptHit(scene, id, hit);
+						if (!resolved) continue;
+						const { rect } = resolved;
+						if (interactive) focusSurface ??= {
+							width: options.host.clientWidth,
+							height: options.host.clientHeight
+						};
+						const focusable = Boolean(focusSurface && interactive && boardScriptHitVisible(scene, resolved, camera, focusSurface));
 						const key = `${id}/${target}`;
 						liveFocusTargets.add(key);
 						let button = focusTargets.get(key);
@@ -322,15 +341,11 @@ function createBoardScriptHost(options) {
 							button.type = "button";
 							const emit = (type, key) => {
 								const current = entries.get(id);
-								if (!current || current.error) return;
+								if (!interactive || !current || current.error || !current.output?.listens.includes(type)) return;
 								current.events.push({
 									type,
 									target,
-									key,
-									point: {
-										x: hit.x + hit.width / 2,
-										y: hit.y + hit.height / 2
-									}
+									key
 								});
 								current.dirty = true;
 								options.onFrame();
@@ -343,10 +358,16 @@ function createBoardScriptHost(options) {
 							focusTargets.set(key, button);
 							layer.appendChild(button);
 						}
-						button.setAttribute("aria-label", hit.label ?? target);
-						button.tabIndex = interactive && visible ? 0 : -1;
-						const [a, b, c, d, x, y] = scene.layout.matrix(id);
-						button.style.cssText = `position:absolute;pointer-events:none;background:transparent;border:0;padding:0;transform-origin:0 0;width:${hit.width}px;height:${hit.height}px;transform:matrix(${a * camera.zoom},${b * camera.zoom},${c * camera.zoom},${d * camera.zoom},${(x + a * hit.x + c * hit.y) * camera.zoom + camera.x},${(y + b * hit.x + d * hit.y) * camera.zoom + camera.y})`;
+						const label = hit.label ?? target;
+						if (button.getAttribute("aria-label") !== label) button.setAttribute("aria-label", label);
+						const tabIndex = focusable ? 0 : -1;
+						if (button.tabIndex !== tabIndex) button.tabIndex = tabIndex;
+						const [a, b, c, d, x, y] = scene.layout.matrix(resolved.id);
+						const style = `position:absolute;pointer-events:none;background:transparent;border:0;padding:0;transform-origin:0 0;width:${rect.width}px;height:${rect.height}px;transform:matrix(${a * camera.zoom},${b * camera.zoom},${c * camera.zoom},${d * camera.zoom},${(x + a * rect.x + c * rect.y) * camera.zoom + camera.x},${(y + b * rect.x + d * rect.y) * camera.zoom + camera.y})`;
+						if (focusStyles.get(button) !== style) {
+							button.style.cssText = style;
+							focusStyles.set(button, style);
+						}
 					}
 				}
 				if (!entry.ready || !entry.sources || entry.pending || !entry.dirty && (!entry.output?.animated || !visible && !entry.output.updating || entry.time === time)) continue;
@@ -378,6 +399,10 @@ function createBoardScriptHost(options) {
 		event(id, event) {
 			const entry = entries.get(id);
 			if (!entry || entry.error || entry.output && !entry.output.listens.includes(event.type)) return;
+			if (event.type === "viewchange" || event.type === "selectionchange") {
+				const queued = entry.events.findIndex((pending) => pending.type === event.type);
+				if (queued >= 0) entry.events.splice(queued, 1);
+			}
 			if (event.type === "pointermove" && entry.events.at(-1)?.type === "pointermove") entry.events.pop();
 			if (entry.events.length >= 128) return;
 			entry.events.push(event);