@neta-art/cohub 9.0.1 → 11.0.0

package/dist/board/stage/scene.js

@@ -0,0 +1,515 @@
+import { parseBoardItem } from "../../protocol/dist/board-model.js";
+import { drawPointsBounds } from "../../protocol/dist/board-layout.js";
+import { CORNER_RESIZE_HANDLES, frameCorners, frameHandlePosition, frameRayIntersection, rotationHandleAnchor, rotationHandlePosition } from "../model/geometry.js";
+import { clippingAncestor, isClippingFrame, syncClipGroup } from "../render/clip.js";
+import { Graphics } from "pixi.js";
+//#region src/board/stage/scene.ts
+const FAR_LAYER_ENTER = 450;
+const FAR_LAYER_EXIT = 350;
+const FAR_PASS_BATCH = 240;
+const FAR_LIVE_LIMIT = 64;
+const Z_FAR_LAYER = -1;
+const Z_LIVE_STROKE = Number.MAX_SAFE_INTEGER - 1;
+const Z_OVERLAY = Number.MAX_SAFE_INTEGER;
+const POOL_LIMIT_PER_RENDERER = 48;
+function idSetSignature(ids) {
+	let hash = ids.size;
+	for (const id of ids) {
+		let local = 0;
+		for (let i = 0; i < id.length; i += 1) local = local * 31 + id.charCodeAt(i) | 0;
+		hash ^= local;
+	}
+	return hash;
+}
+function traceFrame(graphics, frame) {
+	const corners = frameCorners(frame);
+	const first = corners[0];
+	if (!first) return graphics;
+	graphics.moveTo(first.x, first.y);
+	for (let index = 1; index < corners.length; index += 1) {
+		const point = corners[index];
+		if (point) graphics.lineTo(point.x, point.y);
+	}
+	return graphics.closePath();
+}
+function frameEdgePoints(frame, handle) {
+	switch (handle) {
+		case "n": return [frameHandlePosition(frame, "nw"), frameHandlePosition(frame, "ne")];
+		case "e": return [frameHandlePosition(frame, "ne"), frameHandlePosition(frame, "se")];
+		case "s": return [frameHandlePosition(frame, "sw"), frameHandlePosition(frame, "se")];
+		case "w": return [frameHandlePosition(frame, "nw"), frameHandlePosition(frame, "sw")];
+		default: return null;
+	}
+}
+function createBoardScene(options) {
+	const { world, overlay, getRenderer } = options;
+	world.sortableChildren = true;
+	overlay.zIndex = Z_OVERLAY;
+	const cards = /* @__PURE__ */ new Map();
+	const clips = /* @__PURE__ */ new Map();
+	const animatedIds = /* @__PURE__ */ new Set();
+	const pools = /* @__PURE__ */ new Map();
+	const heldKeys = /* @__PURE__ */ new Map();
+	let orderById = /* @__PURE__ */ new Map();
+	let farSig = null;
+	let farActive = false;
+	let lastStructureVersion = -1;
+	const liveStrokes = /* @__PURE__ */ new Map();
+	function setHeldKey(context, cardId, desiredKey) {
+		const heldKey = heldKeys.get(cardId) ?? null;
+		if (desiredKey === heldKey) return;
+		if (heldKey) context.releaseTexture(heldKey);
+		if (desiredKey) context.acquireTexture(desiredKey);
+		if (desiredKey) heldKeys.set(cardId, desiredKey);
+		else heldKeys.delete(cardId);
+	}
+	function takeFromPool(rendererId) {
+		const pool = pools.get(rendererId);
+		if (!pool || pool.length === 0) return null;
+		return pool.pop() ?? null;
+	}
+	function recycle(id, entry, context, destroyed) {
+		setHeldKey(context, id, null);
+		cards.delete(id);
+		animatedIds.delete(id);
+		if (destroyed) return;
+		entry.container.parent?.removeChild(entry.container);
+		entry.container.visible = false;
+		const pool = pools.get(entry.renderer.id) ?? [];
+		if (pool.length >= POOL_LIMIT_PER_RENDERER) {
+			entry.renderer.destroy?.(entry.container, context);
+			return;
+		}
+		pool.push(entry.container);
+		pools.set(entry.renderer.id, pool);
+	}
+	function hostFor(item, scene) {
+		const clipId = clippingAncestor(scene, item);
+		const frame = clipId ? scene.get(clipId) : void 0;
+		if (!clipId || !frame) return world;
+		let entry = clips.get(clipId);
+		if (!entry) {
+			entry = syncClipGroup(void 0, frame);
+			entry.group.sortableChildren = true;
+			clips.set(clipId, entry);
+		}
+		const parent = hostFor(frame, scene);
+		if (entry.group.parent !== parent) parent.addChild(entry.group);
+		entry.group.zIndex = (orderById.get(clipId) ?? 0) + .5;
+		return entry.group;
+	}
+	function syncClips(scene) {
+		for (const entry of cards.values()) {
+			const host = hostFor(entry.item, scene);
+			if (entry.container.parent !== host) host.addChild(entry.container);
+		}
+		for (const [id, entry] of clips) {
+			const frame = scene.get(id);
+			if (!frame || !isClippingFrame(frame) || entry.group.children.length <= 1) {
+				for (const child of [...entry.group.children]) if (child !== entry.mask) world.addChild(child);
+				entry.group.destroy({ children: true });
+				clips.delete(id);
+				continue;
+			}
+			syncClipGroup(entry, frame);
+		}
+	}
+	function materialize(item, context, globalSig, scene) {
+		const renderer = getRenderer(item, context);
+		const pooled = takeFromPool(renderer.id);
+		const container = pooled ?? renderer.create(item, context);
+		container.visible = true;
+		if (pooled) renderer.update(container, item, context);
+		container.alpha = scene.opacity(item.id);
+		hostFor(item, scene).addChild(container);
+		if (renderer.animated) animatedIds.add(item.id);
+		const entry = {
+			item,
+			container,
+			renderer,
+			selected: context.selectedIds.has(item.id),
+			hovered: context.hoveredId === item.id,
+			resizing: context.resizingIds.has(item.id),
+			globalSig,
+			scriptRevision: context.scripts?.revision?.(item.id) ?? 0
+		};
+		cards.set(item.id, entry);
+		setHeldKey(context, item.id, context.assetKey(item));
+		return entry;
+	}
+	let farFront = createFarLayer();
+	let farBack = createFarLayer();
+	let farPainted = false;
+	let farCovered = /* @__PURE__ */ new Set();
+	let farInput = null;
+	let farRunning = false;
+	let farQueued = false;
+	let farFrame = 0;
+	function createFarLayer() {
+		const layer = new Graphics({ label: "board-far-layer" });
+		layer.zIndex = Z_FAR_LAYER;
+		layer.visible = false;
+		world.addChild(layer);
+		return layer;
+	}
+	function requestFarPass(signature) {
+		farSig = signature;
+		if (farRunning) farQueued = true;
+		else runFarPass();
+	}
+	function runFarPass() {
+		if (!farInput) return;
+		farRunning = true;
+		farQueued = false;
+		const { context, getItem, pinnedIds } = farInput;
+		const ids = visibleFacts(farInput).orderedIds;
+		const target = farPainted ? farBack : farFront;
+		const painted = /* @__PURE__ */ new Set();
+		target.clear();
+		if (target === farFront) farCovered = painted;
+		let index = 0;
+		const step = () => {
+			farFrame = 0;
+			const end = Math.min(ids.length, index + FAR_PASS_BATCH);
+			for (; index < end; index += 1) {
+				const id = ids[index];
+				if (pinnedIds.has(id)) continue;
+				const item = getItem(id);
+				if (!item) continue;
+				getRenderer(item, context).renderFar?.(target, item, context);
+				painted.add(id);
+			}
+			if (index < ids.length) {
+				farFrame = requestAnimationFrame(step);
+				if (target === farFront) options.onFarLayerFrame?.();
+				return;
+			}
+			if (target === farBack) {
+				farBack = farFront;
+				farFront = target;
+				farBack.visible = false;
+				farBack.clear();
+				farCovered = painted;
+			}
+			farFront.visible = farActive;
+			farPainted = true;
+			farRunning = false;
+			options.onFarLayerFrame?.();
+			if (farQueued) runFarPass();
+		};
+		step();
+	}
+	function resetFarLayer() {
+		cancelAnimationFrame(farFrame);
+		farFrame = 0;
+		farRunning = false;
+		farQueued = false;
+		farInput = null;
+		farPainted = false;
+		farCovered = /* @__PURE__ */ new Set();
+		farSig = null;
+		farFront.clear();
+		farBack.clear();
+	}
+	function syncLiveStrokes(input) {
+		const { strokes, context, getItem } = input;
+		const live = /* @__PURE__ */ new Set();
+		for (const stroke of strokes) {
+			if (stroke.points.length === 0 || getItem(stroke.id)) continue;
+			let entry = liveStrokes.get(stroke.id);
+			if (entry && (entry.template.style.stroke !== stroke.color || entry.template.style.strokeWidth !== stroke.size)) {
+				removeLiveStroke(stroke.id, context);
+				entry = void 0;
+			}
+			const item = entry ? liveStrokeItem(stroke, entry.template) : createLiveStroke(stroke, input);
+			if (!item) continue;
+			live.add(stroke.id);
+			entry = liveStrokes.get(stroke.id);
+			entry?.renderer.update(entry.container, item, context);
+		}
+		for (const id of liveStrokes.keys()) if (!live.has(id)) removeLiveStroke(id, context);
+	}
+	function liveStrokeItem(stroke, template) {
+		return {
+			...template,
+			id: stroke.id,
+			props: { points: stroke.points },
+			frame: {
+				...drawPointsBounds(stroke.points, stroke.size),
+				rotation: 0
+			}
+		};
+	}
+	function createLiveStroke(stroke, input) {
+		const parsed = parseBoardItem({
+			type: "draw",
+			style: {
+				stroke: stroke.color,
+				strokeWidth: stroke.size
+			},
+			props: { points: stroke.points.slice(0, 1) }
+		});
+		if (!parsed.ok || parsed.item.type !== "draw") return null;
+		const template = parsed.item;
+		const item = liveStrokeItem(stroke, template);
+		const renderer = getRenderer(item, input.context);
+		const container = renderer.create(item, input.context);
+		container.zIndex = Z_LIVE_STROKE;
+		world.addChild(container);
+		liveStrokes.set(stroke.id, {
+			container,
+			renderer,
+			template
+		});
+		return item;
+	}
+	function removeLiveStroke(id, context) {
+		const entry = liveStrokes.get(id);
+		if (!entry) return;
+		liveStrokes.delete(id);
+		world.removeChild(entry.container);
+		entry.renderer.destroy?.(entry.container, context);
+	}
+	let visibleMemo = null;
+	function visibleFacts(input) {
+		const { items, visibleIds, structureVersion, context, getItem } = input;
+		if (visibleMemo?.ids === visibleIds && visibleMemo.structureVersion === structureVersion) return visibleMemo;
+		const orderedIds = visibleIds === null ? items.map((item) => item.id) : [...visibleIds].sort((a, b) => (orderById.get(a) ?? 0) - (orderById.get(b) ?? 0));
+		const unbatched = /* @__PURE__ */ new Set();
+		for (const id of orderedIds) {
+			const item = getItem(id);
+			if (item && !getRenderer(item, context).renderFar) unbatched.add(id);
+		}
+		visibleMemo = {
+			ids: visibleIds,
+			structureVersion,
+			signature: visibleIds === null ? 0 : idSetSignature(visibleIds),
+			orderedIds,
+			unbatched
+		};
+		return visibleMemo;
+	}
+	function sync(input) {
+		const { items, scene, context, getItem, visibleIds, pinnedIds, globalSig, structureVersion, geometryVersion, gestureActive } = input;
+		const structureChanged = structureVersion !== lastStructureVersion;
+		if (structureChanged) {
+			lastStructureVersion = structureVersion;
+			const liveIds = new Set(items.map((item) => item.id));
+			for (const [id, entry] of [...cards]) if (!liveIds.has(id)) recycle(id, entry, context, false);
+			orderById = new Map(items.map((item, index) => [item.id, index]));
+		}
+		const visibleCount = visibleIds === null ? items.length : visibleIds.size;
+		const nextFarActive = farActive ? visibleCount > FAR_LAYER_EXIT : visibleCount > FAR_LAYER_ENTER;
+		const farModeChanged = nextFarActive !== farActive;
+		farActive = nextFarActive;
+		farFront.visible = farActive;
+		if (farActive) {
+			farInput = input;
+			const nextFarSig = [
+				structureVersion,
+				geometryVersion,
+				globalSig,
+				idSetSignature(pinnedIds),
+				visibleIds === null ? "all" : visibleFacts(input).signature
+			].join("|");
+			if (farSig === null || nextFarSig !== farSig && !gestureActive) requestFarPass(nextFarSig);
+		} else if (farModeChanged) resetFarLayer();
+		const wanted = new Set(pinnedIds);
+		if (farActive) {
+			const { orderedIds, unbatched } = visibleFacts(input);
+			for (const id of unbatched) wanted.add(id);
+			let budget = FAR_LIVE_LIMIT;
+			for (const id of orderedIds) {
+				if (budget === 0) break;
+				if (farCovered.has(id) || wanted.has(id)) continue;
+				wanted.add(id);
+				budget -= 1;
+			}
+		} else if (visibleIds === null) for (const item of items) wanted.add(item.id);
+		else for (const id of visibleIds) wanted.add(id);
+		let liveSetChanged = false;
+		for (const [id, entry] of [...cards]) if (!wanted.has(id)) {
+			recycle(id, entry, context, false);
+			liveSetChanged = true;
+		}
+		for (const id of wanted) {
+			const item = getItem(id);
+			if (!item) continue;
+			let entry = cards.get(id);
+			const renderer = getRenderer(item, context);
+			if (entry && entry.renderer.id !== renderer.id) {
+				world.removeChild(entry.container);
+				entry.renderer.destroy?.(entry.container, context);
+				recycle(id, entry, context, true);
+				entry = void 0;
+			}
+			if (!entry) {
+				materialize(item, context, globalSig, scene);
+				liveSetChanged = true;
+				continue;
+			}
+			const selected = context.selectedIds.has(id);
+			const hovered = context.hoveredId === id;
+			const resizing = context.resizingIds.has(id);
+			const scriptRevision = context.scripts?.revision?.(id) ?? 0;
+			const changed = scriptRevision !== entry.scriptRevision || item !== entry.item || entry.renderer.animated || selected !== entry.selected || hovered !== entry.hovered || resizing !== entry.resizing || globalSig !== entry.globalSig;
+			entry.scriptRevision = scriptRevision;
+			entry.item = item;
+			entry.selected = selected;
+			entry.hovered = hovered;
+			entry.resizing = resizing;
+			entry.globalSig = globalSig;
+			setHeldKey(context, id, context.assetKey(item));
+			if (changed) {
+				entry.renderer.update(entry.container, item, context);
+				entry.container.alpha = scene.opacity(id);
+			}
+		}
+		if (structureChanged || liveSetChanged) syncClips(scene);
+		if (structureChanged || farModeChanged || liveSetChanged) applyChildOrder();
+		syncLiveStrokes(input);
+	}
+	function applyChildOrder() {
+		for (const [id, entry] of cards) entry.container.zIndex = orderById.get(id) ?? 0;
+		world.sortableChildren = true;
+		world.sortChildren();
+	}
+	function drawOverlay(input, palette) {
+		overlay.clear();
+		const { zoom, pointerType, marquee, selection, transform, controls, hoveredControl, rotationPointer, arrowEndpoints, ports, hoveredPort, arrowDraft, bindTarget } = input;
+		const inv = 1 / zoom;
+		const brand = palette.brand;
+		if (marquee) {
+			overlay.rect(marquee.x, marquee.y, marquee.width, marquee.height).fill({
+				color: brand,
+				alpha: .08
+			});
+			overlay.rect(marquee.x, marquee.y, marquee.width, marquee.height).stroke({
+				color: brand,
+				width: inv,
+				alpha: .7
+			});
+		}
+		if (bindTarget) traceFrame(overlay, bindTarget).stroke({
+			color: brand,
+			width: 2 * inv,
+			alpha: .9
+		});
+		if (arrowDraft) {
+			const { from, to, size, targetFrame } = arrowDraft;
+			if (targetFrame) traceFrame(overlay, targetFrame).stroke({
+				color: brand,
+				width: 2 * inv,
+				alpha: .9
+			});
+			overlay.moveTo(from.x, from.y).lineTo(to.x, to.y).stroke({
+				color: brand,
+				width: Math.max(size, 1.5) * inv,
+				alpha: .85,
+				cap: "round"
+			});
+			overlay.circle(to.x, to.y, 3.5 * inv).fill({
+				color: brand,
+				alpha: .95
+			});
+		}
+		if (ports && ports.length > 0) for (const port of ports) {
+			const hovered = hoveredPort && Math.abs(hoveredPort.x - port.x) < .001 && Math.abs(hoveredPort.y - port.y) < .001;
+			const r = (hovered ? port.radius * 1.5 : port.radius) * inv;
+			overlay.circle(port.x, port.y, r).fill({
+				color: palette.surface,
+				alpha: 1
+			}).stroke({
+				color: brand,
+				width: 1.5 * inv,
+				alpha: hovered ? 1 : .8
+			});
+		}
+		if (!transform || selection.length === 0) return;
+		const source = transform.frame;
+		traceFrame(overlay, source).stroke({
+			color: brand,
+			width: 1.5 * inv,
+			alpha: .95
+		});
+		if (!controls) return;
+		if (arrowEndpoints && arrowEndpoints.length > 0) {
+			const r = 5 * inv;
+			for (const point of arrowEndpoints) overlay.circle(point.x, point.y, r).fill({
+				color: palette.surface,
+				alpha: 1
+			}).stroke({
+				color: brand,
+				width: 1.5 * inv
+			});
+			return;
+		}
+		if (hoveredControl?.kind === "resize" && transform.resizeMode === "free") {
+			const edge = frameEdgePoints(source, hoveredControl.handle);
+			if (edge) overlay.moveTo(edge[0].x, edge[0].y).lineTo(edge[1].x, edge[1].y).stroke({
+				color: brand,
+				width: 2.5 * inv,
+				alpha: 1
+			});
+		}
+		if (transform.resizeMode !== "none") for (const handle of CORNER_RESIZE_HANDLES) {
+			const position = frameHandlePosition(source, handle);
+			const hovered = hoveredControl?.kind === "resize" && hoveredControl.handle === handle;
+			overlay.circle(position.x, position.y, (hovered ? 5 : 4) * inv).fill({
+				color: hovered ? brand : palette.surface,
+				alpha: 1
+			}).stroke({
+				color: brand,
+				width: 1.5 * inv
+			});
+		}
+		if (transform.canRotate && (pointerType === "touch" || transform.resizeMode === "none")) {
+			const rotation = rotationPointer ?? rotationHandlePosition(source, zoom);
+			const anchor = rotationPointer ? frameRayIntersection(source, rotationPointer) : rotationHandleAnchor(source);
+			const hovered = rotationPointer !== null || hoveredControl?.kind === "rotate";
+			overlay.moveTo(anchor.x, anchor.y).lineTo(rotation.x, rotation.y).stroke({
+				color: brand,
+				width: inv,
+				alpha: .8
+			});
+			overlay.circle(rotation.x, rotation.y, (hovered ? 6 : 5) * inv).fill({ color: hovered ? brand : palette.surface }).stroke({
+				color: brand,
+				width: 1.5 * inv
+			});
+		}
+	}
+	function destroy(context) {
+		for (const entry of cards.values()) entry.renderer.destroy?.(entry.container, context);
+		cards.clear();
+		for (const pool of pools.values()) for (const container of pool) container.destroy({ children: true });
+		pools.clear();
+		for (const key of heldKeys.values()) context.releaseTexture(key);
+		heldKeys.clear();
+		orderById = /* @__PURE__ */ new Map();
+		for (const entry of clips.values()) entry.group.destroy({ children: true });
+		clips.clear();
+		animatedIds.clear();
+		for (const id of [...liveStrokes.keys()]) removeLiveStroke(id, context);
+		resetFarLayer();
+		farActive = false;
+		visibleMemo = null;
+		lastStructureVersion = -1;
+	}
+	return {
+		sync,
+		getNode: (itemId) => {
+			const entry = cards.get(itemId);
+			return entry ? {
+				item: entry.item,
+				container: entry.container
+			} : null;
+		},
+		get animated() {
+			return animatedIds.size > 0;
+		},
+		drawOverlay,
+		destroy
+	};
+}
+//#endregion
+export { createBoardScene };

package/dist/board/stage/script-pointer.d.ts

@@ -0,0 +1,19 @@
+//#region src/board/stage/script-pointer.d.ts
+type BoardScriptPointerTarget = {
+  owner: string;
+  target: string;
+};
+declare function createBoardScriptPointerRouter(): {
+  needsRouting(pointerId: number, scriptsEnabled: boolean): boolean;
+  owner(pointerId: number): "editor" | "script" | null;
+  route(phase: "down" | "move" | "up" | "leave", pointerId: number, target: BoardScriptPointerTarget | null, point: {
+    x: number;
+    y: number;
+  }, cancelled?: boolean): {
+    recipient: BoardScriptPointerTarget | null;
+    click: BoardScriptPointerTarget | null;
+  };
+  clear(): void;
+};
+//#endregion
+export { BoardScriptPointerTarget, createBoardScriptPointerRouter };

package/dist/board/stage/script-pointer.js

@@ -0,0 +1,35 @@
+//#region src/board/stage/script-pointer.ts
+function createBoardScriptPointerRouter() {
+	const gestures = /* @__PURE__ */ new Map();
+	return {
+		needsRouting(pointerId, scriptsEnabled) {
+			return scriptsEnabled || gestures.has(pointerId);
+		},
+		owner(pointerId) {
+			const gesture = gestures.get(pointerId);
+			return gesture ? gesture.target ? "script" : "editor" : null;
+		},
+		route(phase, pointerId, target, point, cancelled = false) {
+			if (phase === "down") gestures.set(pointerId, {
+				target,
+				...point
+			});
+			const gesture = gestures.get(pointerId);
+			const recipient = gesture ? gesture.target : phase === "move" ? target : null;
+			let click = null;
+			if (phase === "up") {
+				gestures.delete(pointerId);
+				if (!cancelled && gesture?.target && target?.owner === gesture.target.owner && target.target === gesture.target.target && Math.hypot(point.x - gesture.x, point.y - gesture.y) < 5) click = gesture.target;
+			}
+			return {
+				recipient,
+				click
+			};
+		},
+		clear() {
+			gestures.clear();
+		}
+	};
+}
+//#endregion
+export { createBoardScriptPointerRouter };

package/dist/board/stage/stage.d.ts

@@ -0,0 +1,76 @@
+import { BoardItem } from "../../protocol/dist/board-model.js";
+import { BoardPlaybackSnapshot } from "../../protocol/dist/board.js";
+import "../../protocol/dist/index.js";
+import { BoardScriptOutput, BoardScriptSnapshot } from "../model/script.js";
+import { BoardViewport, WorldPoint } from "../model/geometry.js";
+import { BoardScene, BoardSceneItem } from "../model/scene.js";
+import { BoardShapeColors } from "../model/palette.js";
+import { BoardAssetSource } from "../model/media-playback.js";
+import "../model/index.js";
+import { BoardPointerEvent } from "../editor/interaction.js";
+import { BoardEditor } from "../editor/editor.js";
+import "../editor/index.js";
+import { BoardCardRendererResolver, BoardRenderPalette } from "../render/renderers/board-renderer-registry.js";
+import "../render/index.js";
+import { BoardAssetManager } from "./assets.js";
+import { BoardLiveStroke } from "./scene.js";
+import { BoardItemView } from "./views.js";
+import { Graphics, Renderer } from "pixi.js";
+//#region src/board/stage/stage.d.ts
+type BoardStageTheme = {
+  key: string;
+  palette: BoardRenderPalette;
+  colors: BoardShapeColors;
+  colorScheme: "dark" | "light";
+  imageBackground?: boolean;
+};
+type BoardStagePointerPhase = "down" | "move" | "up" | "leave";
+type BoardStageOptions = {
+  editor: BoardEditor;
+  assets: BoardAssetManager;
+  source: BoardAssetSource;
+  renderers?: BoardCardRendererResolver;
+  views?: readonly BoardItemView[];
+  theme?: () => BoardStageTheme;
+  playback?: () => BoardPlaybackSnapshot | null;
+  fileState?: (path: string) => "ok" | "missing" | "unavailable";
+  previews?: () => ReadonlyMap<string, BoardItem>;
+  strokes?: () => readonly BoardLiveStroke[];
+  drawOverlay?: (overlay: Graphics, frame: {
+    zoom: number;
+    theme: BoardStageTheme;
+    scene: BoardScene;
+  }) => void;
+  onPointer?: (phase: BoardStagePointerPhase, event: PointerEvent, input: BoardPointerEvent) => boolean | undefined;
+  onDoubleClick?: (item: BoardSceneItem | null, point: WorldPoint) => boolean | undefined;
+  onSurfaceChange?: (size: {
+    width: number;
+    height: number;
+  }) => void;
+  onVisibleChange?: (ids: ReadonlySet<string> | null) => void;
+  scriptCapabilities?: Record<string, (id: string, input: unknown) => Promise<unknown>>;
+};
+type BoardStage = {
+  readonly ready: Promise<boolean>;
+  readonly renderer: Renderer | null;
+  readonly camera: BoardViewport;
+  readonly theme: BoardStageTheme;
+  setActive(active: boolean): void;
+  setScriptMode(mode: "edit" | "interact" | "paused"): void;
+  resetScripts(): void;
+  invalidateScript(path: string): void;
+  scriptError(id: string): string | null;
+  scriptOutput(id: string): BoardScriptOutput | null;
+  snapshotScripts(): Promise<Record<string, BoardScriptSnapshot>>;
+  restoreScript(id: string, snapshot: BoardScriptSnapshot): void;
+  subscribeScripts(listener: () => void): () => void;
+  invalidate(options?: {
+    cards?: boolean;
+  }): void;
+  isMaterialized(id: string): boolean;
+  toWorld(clientX: number, clientY: number): WorldPoint;
+  destroy(): void;
+};
+declare function mountBoardStage(host: HTMLElement, options: BoardStageOptions): BoardStage;
+//#endregion
+export { BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageTheme, mountBoardStage };