@neta-art/cohub 9.0.1 → 11.0.0

package/dist/board/stage/stage.js

@@ -0,0 +1,774 @@
+import { applyMatrix, invertMatrix } from "../../protocol/dist/board-layout.js";
+import { screenPoint, screenToWorld, stableCullRect, visibleWorldRect, worldPoint } from "../model/geometry.js";
+import { boardScriptScope, composeBoardScriptItems, prepareBoardScriptOutput, validateBoardScriptCommit } from "../model/script-scene.js";
+import { boardScriptTarget } from "../model/script-hit.js";
+import { createBoardAnimationSampler, resolveBoardAnimationCamera } from "../model/sampling.js";
+import { resolveSceneArrow } from "../model/arrow-geometry.js";
+import { buildFallbackShapeColors, pickBoardColor, resolveItemColor } from "../model/palette.js";
+import { featuredTaskArtifact } from "../model/task.js";
+import { isCreationBoardTool } from "../editor/tool.js";
+import { resizeCursorForHandle } from "../editor/selection-transform.js";
+import { parseBoardCssColor } from "../render/css-color.js";
+import { defaultBoardPalette, itemAlpha } from "../render/palette.js";
+import { createBoardBackground, updateBoardBackground } from "../render/board-background.js";
+import { getBoardResolution, textZoomBucket } from "../render/text-resolution.js";
+import { getBoardCardRenderer } from "../render/renderers/board-renderer-registry.js";
+import { createBoardScriptHost } from "../render/script-host.js";
+import { createBoardPlayer } from "../player/index.js";
+import { toBoardPointerEvent } from "./pointer.js";
+import { createBoardScene } from "./scene.js";
+import { scheduleBoardMaintenance } from "./maintenance.js";
+import { createBoardScriptPointerRouter } from "./script-pointer.js";
+import { createBoardItemViewLayer } from "./views.js";
+import { Application, Container, Graphics, RendererType } from "pixi.js";
+//#region src/board/stage/stage.ts
+const LIVE_CHANNELS = [
+	"document",
+	"scene",
+	"selection",
+	"camera",
+	"tool",
+	"interaction",
+	"hover",
+	"editing",
+	"playback"
+];
+function defaultTheme() {
+	return {
+		key: "dark",
+		palette: defaultBoardPalette("dark"),
+		colors: buildFallbackShapeColors("dark"),
+		colorScheme: "dark"
+	};
+}
+const ROTATE_CURSOR = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36L21 8M21 3v5h-5' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36L21 8M21 3v5h-5' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, crosshair`;
+function mountBoardStage(host, options) {
+	const { editor, assets } = options;
+	const theme = options.theme ?? defaultTheme;
+	const resolveRenderer = options.renderers ?? getBoardCardRenderer;
+	let app = null;
+	let world = null;
+	let overlay = null;
+	let background = null;
+	let scene = null;
+	let scripts = null;
+	let scriptMode = editor.readonly ? "interact" : "edit";
+	let scriptTime = 0;
+	let scriptLastTick = performance.now();
+	const scriptOutputs = /* @__PURE__ */ new Map();
+	const scriptListeners = /* @__PURE__ */ new Set();
+	let scriptVersion = 0;
+	let composedVersion = -1;
+	let composedZoom = 0;
+	let composedPlayhead = "";
+	let composedMoving = false;
+	let composedDocument = null;
+	let scriptHover = null;
+	const scriptPointers = createBoardScriptPointerRouter();
+	let stopMaintenance = null;
+	let active = true;
+	let disposed = false;
+	let renderFrame = 0;
+	let tickFrame = 0;
+	let resizeFrame = 0;
+	let cardEpoch = 0;
+	let assetVersion = 0;
+	let surface = {
+		width: 0,
+		height: 0
+	};
+	let playbackCamera = null;
+	let cursor = "";
+	const renderCamera = () => playbackCamera ?? editor.camera;
+	const views = createBoardItemViewLayer(host, editor, options.views ?? [], renderCamera);
+	const player = createBoardPlayer({ resolveColor: (color) => {
+		const current = theme();
+		return {
+			color: resolveItemColor(color, "brand", current.colors, current.colorScheme, parseBoardCssColor),
+			alpha: itemAlpha(current, color)
+		};
+	} });
+	let cull = {
+		rect: null,
+		ids: null,
+		scene: null
+	};
+	function visibleIds() {
+		if (surface.width === 0 || surface.height === 0) return null;
+		const rect = stableCullRect(visibleWorldRect(renderCamera(), surface.width, surface.height));
+		const same = cull.rect && cull.rect.x === rect.x && cull.rect.y === rect.y && cull.rect.width === rect.width && cull.rect.height === rect.height;
+		if (same && cull.scene === editor.scene) return cull.ids;
+		cull = {
+			rect: same ? cull.rect : rect,
+			ids: new Set(editor.idsInRect(rect, true)),
+			scene: editor.scene
+		};
+		options.onVisibleChange?.(cull.ids);
+		requestAssets = true;
+		return cull.ids;
+	}
+	let requestAssets = true;
+	function syncAssets(ids) {
+		if (!requestAssets || !ids) return;
+		requestAssets = false;
+		const sizes = [];
+		for (const id of ids) {
+			const item = editor.itemById(id);
+			if (!item) continue;
+			const key = assets.assetKey(item);
+			if (!key) continue;
+			assets.requestItem(item);
+			const artifact = item.type === "task" ? featuredTaskArtifact(item.props.snapshot.artifacts) : null;
+			const recorded = artifact?.type === "image" || artifact?.type === "video" ? artifact : item.type === "image" || item.type === "video" ? item.props.snapshot : null;
+			if (!recorded || recorded.naturalWidth && recorded.naturalHeight) continue;
+			const natural = assets.getNaturalSize(key);
+			if (natural?.width && natural.height) sizes.push({
+				id: item.id,
+				...natural
+			});
+		}
+		if (sizes.length > 0) editor.adoptMediaNaturalSizes(sizes);
+	}
+	function renderContext(current, renderScene, time) {
+		const interaction = editor.interaction;
+		return {
+			settings: editor.settings,
+			scene: renderScene,
+			time,
+			...scripts ? { scripts } : {},
+			selectedIds: new Set(editor.selection),
+			hoveredId: editor.hoverId,
+			resizingIds: interaction.type === "resizing" ? new Set(interaction.origin.keys()) : /* @__PURE__ */ new Set(),
+			palette: current.palette,
+			colors: current.colors,
+			colorScheme: current.colorScheme,
+			rendererType: app?.renderer.type === RendererType.CANVAS ? "canvas" : "gpu",
+			zoom: renderCamera().zoom,
+			assetKey: assets.assetKey,
+			getTexture: (key) => assets.getTexture(key),
+			hasError: (key) => assets.hasError(key),
+			fileState: (path) => options.fileState?.(path) ?? "ok",
+			acquireTexture: (key) => assets.acquire(key),
+			releaseTexture: (key) => assets.release(key)
+		};
+	}
+	function syncBackground(current) {
+		if (!app) return;
+		const context = {
+			app,
+			settings: editor.settings,
+			viewport: editor.camera,
+			colorScheme: current.colorScheme,
+			palette: current.palette,
+			hasImageBackground: current.imageBackground === true
+		};
+		if (background) updateBoardBackground(background, context);
+		else {
+			background = createBoardBackground(context);
+			app.stage.addChildAt(background, 0);
+		}
+	}
+	function localGestureItemIds() {
+		const interaction = editor.interaction;
+		switch (interaction.type) {
+			case "translating":
+			case "resizing":
+			case "rotating": return new Set(interaction.origin.keys());
+			case "draggingArrowHandle": return /* @__PURE__ */ new Set([interaction.arrowId]);
+			default: return /* @__PURE__ */ new Set();
+		}
+	}
+	function previewItems() {
+		const previews = /* @__PURE__ */ new Map();
+		const remote = options.previews?.();
+		if (!remote?.size) return previews;
+		const local = localGestureItemIds();
+		for (const [id, item] of remote) if (!local.has(id)) previews.set(id, item);
+		return previews;
+	}
+	function liveStrokes() {
+		const strokes = [...options.strokes?.() ?? []];
+		const interaction = editor.interaction;
+		if (interaction.type === "drawing") strokes.push({
+			id: interaction.id,
+			points: interaction.points,
+			color: interaction.color,
+			size: interaction.size
+		});
+		return strokes;
+	}
+	function followCamera(frame, renderScene) {
+		return resolveBoardAnimationCamera(frame.camera, (id) => renderScene.get(id)?.frame, surface, frame.time, editor.camera);
+	}
+	let effectSampler;
+	let effectDocument;
+	let effectAnimation = null;
+	function arrowHead(target, from, to, color, width, inv, alpha) {
+		const angle = Math.atan2(to.y - from.y, to.x - from.x);
+		const head = Math.max(14, 16 * inv);
+		const spread = Math.PI / 6;
+		target.moveTo(to.x - head * Math.cos(angle - spread), to.y - head * Math.sin(angle - spread)).lineTo(to.x, to.y).lineTo(to.x - head * Math.cos(angle + spread), to.y - head * Math.sin(angle + spread)).stroke({
+			color,
+			width,
+			alpha,
+			cap: "round",
+			join: "round"
+		});
+	}
+	function drawTransient(target, current) {
+		const inv = 1 / Math.max(editor.camera.zoom, 1e-4);
+		const interaction = editor.interaction;
+		for (const guide of editor.snapGuides) {
+			const vertical = guide.axis === "x";
+			target.moveTo(vertical ? guide.at : guide.from, vertical ? guide.from : guide.at).lineTo(vertical ? guide.at : guide.to, vertical ? guide.to : guide.at).stroke({
+				color: current.palette.brand,
+				width: inv,
+				alpha: .9
+			});
+		}
+		if (interaction.type === "creatingArrow") {
+			const color = pickBoardColor(current.colors, interaction.color, current.colorScheme);
+			const target_ = interaction.targetItemId ? editor.itemById(interaction.targetItemId) : null;
+			const end = target_ ? worldPoint(target_.frame.x + target_.frame.width / 2, target_.frame.y + target_.frame.height / 2) : interaction.current;
+			const width = Math.max(interaction.size, 1.5 * inv);
+			target.moveTo(interaction.start.x, interaction.start.y).lineTo(end.x, end.y).stroke({
+				color: color.stroke,
+				width,
+				alpha: .9
+			});
+			arrowHead(target, interaction.start, end, color.stroke, width, inv, .95);
+		}
+		if (interaction.type === "creatingBox") {
+			const color = pickBoardColor(current.colors, interaction.color, current.colorScheme);
+			const { start, current: corner } = interaction;
+			const w = Math.abs(corner.x - start.x);
+			const h = Math.abs(corner.y - start.y);
+			if (w > 1 || h > 1) target.roundRect(Math.min(start.x, corner.x), Math.min(start.y, corner.y), Math.max(w, 1), Math.max(h, 1), 4).fill({
+				color: color.fill,
+				alpha: .04
+			}).stroke({
+				color: color.stroke,
+				width: 1.5 * inv,
+				alpha: .85
+			});
+		}
+	}
+	function cursorFor() {
+		if (scriptMode === "interact" && scriptHover) {
+			const output = scriptOutputs.get(scriptHover.owner);
+			return output?.hits[scriptHover.target]?.cursor ?? (output?.listens.includes("click") ? "pointer" : "default");
+		}
+		const interaction = editor.interaction;
+		switch (interaction.type) {
+			case "panning":
+			case "translating": return "grabbing";
+			case "resizing": return resizeCursorForHandle(interaction.handle, interaction.single?.rotation ?? 0);
+			case "rotating": return ROTATE_CURSOR;
+			case "draggingArrowHandle":
+			case "brushing": return "crosshair";
+		}
+		if (editor.spaceHeld || editor.tool === "hand") return "grab";
+		const control = editor.hoveredTransformControl;
+		if (control?.kind === "resize") return resizeCursorForHandle(control.handle, editor.selectionTransform?.frame.rotation ?? 0);
+		if (control?.kind === "rotate") return ROTATE_CURSOR;
+		if (isCreationBoardTool(editor.tool)) return "crosshair";
+		const hovered = editor.hoverId ? editor.itemById(editor.hoverId) : null;
+		return hovered && !hovered.locked && editor.registry.capabilities(hovered).canMove ? "move" : "default";
+	}
+	function scheduleRender() {
+		if (renderFrame || !app || !active) return;
+		renderFrame = requestAnimationFrame(() => {
+			renderFrame = 0;
+			app?.render();
+		});
+	}
+	function scheduleTick() {
+		if (tickFrame || !active || disposed) return;
+		tickFrame = requestAnimationFrame(() => {
+			tickFrame = 0;
+			sync();
+		});
+	}
+	function createScripts() {
+		return createBoardScriptHost({
+			host,
+			capabilities: {
+				...options.scriptCapabilities,
+				"board.emit": async (id, value) => {
+					const message = value;
+					if (!message || typeof message.target !== "string" || typeof message.type !== "string" || !boardScriptScope(editor.document, id).has(message.target)) throw new Error("Invalid script event target.");
+					scripts?.event(message.target, {
+						type: message.type,
+						data: message.data
+					});
+				},
+				...!editor.readonly ? { "board.commit": async (id, value) => {
+					validateBoardScriptCommit(editor.document, id, value);
+					await editor.commitPatch(value);
+				} } : {}
+			},
+			onOutput: (id, output) => {
+				if (output) {
+					prepareBoardScriptOutput(editor.document, id, output);
+					scriptOutputs.set(id, output);
+				} else scriptOutputs.delete(id);
+				scriptVersion++;
+				scheduleTick();
+			},
+			readModule: async (src) => {
+				const url = await options.source.resolveFileUrl(src);
+				if (!url) throw new Error(`${src} is not available.`);
+				const response = await fetch(url, { signal: AbortSignal.timeout(15e3) });
+				if (!response.ok) throw new Error(`${src} could not be read.`);
+				return response.text();
+			},
+			onFrame: () => {
+				scheduleTick();
+				for (const listener of scriptListeners) listener();
+			}
+		});
+	}
+	function sync() {
+		if (!app || !world || !scene || !overlay) return;
+		const current = theme();
+		const hasScripts = editor.hasScripts;
+		if (hasScripts && !scripts) {
+			scripts = createScripts();
+			scriptTime = 0;
+			scriptLastTick = performance.now();
+		} else if (!hasScripts && scripts) {
+			const previous = scripts;
+			scripts = null;
+			previous.destroy();
+			scriptOutputs.clear();
+			editor.setScriptItems(/* @__PURE__ */ new Map());
+			scriptHover = null;
+			composedVersion = -1;
+			composedDocument = null;
+		}
+		syncBackground(current);
+		player.enter(editor.consumeRecentlyAdded(), editor.document);
+		const playback = options.playback?.() ?? null;
+		const frame = player.frame(editor.document, playback, performance.now(), Date.now(), editor.playhead?.animationId ?? null);
+		const previews = previewItems();
+		const moving = new Map(previews);
+		for (const [id, item] of frame.items) moving.set(id, item);
+		editor.setPlayedItems(moving);
+		if (scripts && (scriptOutputs.size || composedVersion !== scriptVersion)) {
+			const playheadKey = `${editor.playhead?.animationId ?? ""}:${editor.playhead?.time ?? ""}`;
+			if (scriptVersion !== composedVersion || composedDocument !== editor.document || moving.size || composedMoving || composedZoom !== editor.camera.zoom || composedPlayhead !== playheadKey) {
+				const animationItems = editor.animationItems();
+				const composed = composeBoardScriptItems(editor.document, editor.scene, scriptOutputs, animationItems, editor.camera, (owner, error) => scripts?.fault(owner, error instanceof Error ? error.message : String(error)));
+				const scriptedIds = new Set([...scriptOutputs.values()].flatMap((output) => Object.keys(output.patches)));
+				for (const id of animationItems.keys()) if (!scriptedIds.has(id)) composed.delete(id);
+				editor.setScriptItems(composed);
+				composedMoving = moving.size > 0;
+				composedPlayhead = playheadKey;
+				composedZoom = editor.camera.zoom;
+				composedVersion = scriptVersion;
+				composedDocument = editor.document;
+			}
+		}
+		const renderScene = editor.scene;
+		const animationId = editor.playhead?.animationId ?? (frame.playbackTime !== null ? playback?.animationId : null) ?? null;
+		if (animationId && (effectDocument !== editor.document || effectAnimation !== animationId)) {
+			effectDocument = editor.document;
+			effectAnimation = animationId;
+			effectSampler = createBoardAnimationSampler(editor.document, animationId);
+		}
+		if (editor.playhead && effectSampler) {
+			frame.camera = effectSampler.at(editor.playhead.time).evaluation.camera;
+			frame.time = editor.playhead.time;
+		}
+		playbackCamera = editor.cameraPolicy === "follow" && Object.keys(frame.camera).length > 0 ? followCamera(frame, renderScene) : null;
+		const camera = renderCamera();
+		if (scripts) {
+			const now = performance.now();
+			if (scriptMode !== "paused") scriptTime += Math.min(250, Math.max(0, now - scriptLastTick));
+			scriptLastTick = now;
+			scripts.sync(editor.document, renderScene, camera, scriptTime, scriptMode === "interact", visibleIds());
+		}
+		world.position.set(camera.x, camera.y);
+		world.scale.set(camera.zoom);
+		const ids = visibleIds();
+		syncAssets(ids);
+		const context = renderContext(current, renderScene, frame.time);
+		if (animationId && effectSampler) {
+			context.time = editor.playhead?.time ?? frame.time;
+			context.frameAt = effectSampler.frameAt;
+		}
+		const pinnedIds = new Set(editor.selection);
+		for (const item of renderScene.items) if (item.type === "effect" && item.props.kind === "trail" && renderScene.opacity(item.id) > 0) pinnedIds.add(item.id);
+		for (const id of previews.keys()) pinnedIds.add(id);
+		if (editor.editingId) pinnedIds.add(editor.editingId);
+		for (const id of frame.items.keys()) {
+			pinnedIds.add(id);
+			for (const child of renderScene.descendants(id)) pinnedIds.add(child);
+			for (const binder of renderScene.binders(id)) pinnedIds.add(binder);
+		}
+		scene.sync({
+			items: renderScene.items,
+			strokes: liveStrokes(),
+			scene: renderScene,
+			context,
+			getItem: (id) => renderScene.get(id) ?? null,
+			visibleIds: ids,
+			pinnedIds,
+			globalSig: [
+				assetVersion,
+				cardEpoch,
+				current.key,
+				textZoomBucket(camera.zoom)
+			].join("|"),
+			structureVersion: editor.structureVersion,
+			geometryVersion: editor.geometryVersion,
+			gestureActive: editor.gestureActive && editor.interaction.type !== "panning"
+		});
+		const single = editor.selection.length === 1 ? renderScene.get(editor.selection[0]) : null;
+		let arrowEndpoints;
+		if (single?.type === "arrow" && !single.locked) {
+			const resolved = resolveSceneArrow(single, renderScene);
+			arrowEndpoints = [
+				resolved.start.point,
+				resolved.mid,
+				resolved.end.point
+			];
+		}
+		const interaction = editor.interaction;
+		scene.drawOverlay({
+			zoom: camera.zoom,
+			pointerType: editor.pointerType,
+			marquee: editor.marquee,
+			selection: editor.selection,
+			transform: editor.selectionTransform,
+			controls: editor.tool === "select",
+			hoveredControl: editor.hoveredTransformControl,
+			rotationPointer: interaction.type === "rotating" ? interaction.current : null,
+			arrowEndpoints,
+			ports: editor.connectionPorts,
+			hoveredPort: editor.hoveredConnectionPort,
+			arrowDraft: null,
+			bindTarget: editor.bindTargetFrame ?? editor.arrowDraft?.targetFrame ?? null
+		}, current.palette);
+		options.drawOverlay?.(overlay, {
+			zoom: camera.zoom,
+			theme: current,
+			scene: renderScene
+		});
+		drawTransient(overlay, current);
+		views.sync({
+			ids,
+			scene: renderScene,
+			camera,
+			surface,
+			selection: context.selectedIds
+		});
+		const nextCursor = cursorFor();
+		if (nextCursor !== cursor) host.style.cursor = cursor = nextCursor;
+		scheduleRender();
+		if (frame.running || scene.animated || scriptMode !== "paused" && scripts?.animated) scheduleTick();
+	}
+	function resize() {
+		cancelAnimationFrame(resizeFrame);
+		resizeFrame = requestAnimationFrame(() => {
+			if (!app) return;
+			app.resize();
+			surface = {
+				width: app.screen.width,
+				height: app.screen.height
+			};
+			editor.surfaceSize = surface;
+			options.onSurfaceChange?.(surface);
+			sync();
+		});
+	}
+	const rectOf = () => host.getBoundingClientRect();
+	const inViews = (event) => event.target instanceof Node && views.element.contains(event.target);
+	function toInput(event) {
+		return toBoardPointerEvent(event, rectOf(), renderCamera(), event.type === "pointermove" && editor.interaction.type === "drawing");
+	}
+	function scriptTarget(input) {
+		if (!scriptOutputs.size) return null;
+		const point = input.world;
+		const candidates = editor.idsInRect({
+			x: point.x - .01,
+			y: point.y - .01,
+			width: .02,
+			height: .02
+		}, true);
+		return boardScriptTarget(editor.scene, candidates, point, scriptOutputs, editor.registry.hitTest);
+	}
+	function sendScriptEvent(target, type, event, input, related) {
+		if (!scripts) return;
+		const point = applyMatrix(invertMatrix(editor.scene.layout.matrix(target.owner)), input.world);
+		scripts?.event(target.owner, {
+			type,
+			target: target.target,
+			relatedTarget: related?.target,
+			relatedOwner: related?.owner,
+			point,
+			pointerId: event.pointerId,
+			pointerType: event.pointerType,
+			buttons: event.buttons,
+			shiftKey: event.shiftKey,
+			altKey: event.altKey,
+			ctrlKey: event.ctrlKey,
+			metaKey: event.metaKey
+		});
+	}
+	function scriptPointer(type, event, input) {
+		if (!scriptPointers.needsRouting(event.pointerId, scripts !== null)) return false;
+		const enabled = scriptMode === "interact" && !editor.gestureActive && !editor.spaceHeld && event.button !== 1;
+		const target = type === "leave" || !enabled || scriptPointers.owner(event.pointerId) === "editor" ? null : scriptTarget(input);
+		if (target?.owner !== scriptHover?.owner || target?.target !== scriptHover?.target) {
+			if (scriptHover) sendScriptEvent(scriptHover, "pointerleave", event, input, target);
+			if (target) sendScriptEvent(target, "pointerenter", event, input, scriptHover);
+			scriptHover = target;
+		}
+		const { recipient, click } = scriptPointers.route(type, event.pointerId, target, {
+			x: event.clientX,
+			y: event.clientY
+		}, event.type !== "pointerup");
+		if (type === "down" && recipient) {
+			host.setPointerCapture(event.pointerId);
+			host.focus({ preventScroll: true });
+		}
+		if (recipient && type !== "leave") sendScriptEvent(recipient, input.cancelled ? "pointercancel" : `pointer${type}`, event, input);
+		if (click) sendScriptEvent(click, "click", event, input);
+		return recipient !== null;
+	}
+	function handleScriptKey(event) {
+		if (scriptMode !== "interact" || !scriptHover || event.target !== host) return;
+		const input = {
+			type: event.type,
+			target: scriptHover.target,
+			key: event.key,
+			shiftKey: event.shiftKey,
+			altKey: event.altKey,
+			ctrlKey: event.ctrlKey,
+			metaKey: event.metaKey
+		};
+		scripts?.event(scriptHover.owner, input);
+		event.stopPropagation();
+	}
+	function handlePointerDown(event) {
+		if (inViews(event)) return;
+		editor.takeCameraControl();
+		const input = toInput(event);
+		if (scriptPointer("down", event, input)) return;
+		if (options.onPointer?.("down", event, input) === false) return;
+		host.setPointerCapture(event.pointerId);
+		editor.pointerDown(input);
+	}
+	function handlePointerMove(event) {
+		if (inViews(event)) return;
+		const input = toInput(event);
+		if (scriptPointer("move", event, input)) return;
+		if (options.onPointer?.("move", event, input) === false) return;
+		editor.pointerMove(input);
+	}
+	function handlePointerUp(event) {
+		if (inViews(event)) return;
+		const input = toInput(event);
+		if (scriptPointer("up", event, input)) return;
+		if (options.onPointer?.("up", event, input) === false) return;
+		editor.pointerUp(input);
+		if (event.type === "pointercancel" || event.pointerType !== "mouse") editor.pointerLeave();
+	}
+	function handlePointerLeave(event) {
+		if (event.buttons !== 0) return;
+		scriptPointer("leave", event, toInput(event));
+		if (options.onPointer?.("leave", event, toInput(event)) === false) return;
+		editor.pointerLeave();
+	}
+	function handleWheel(event) {
+		if (inViews(event)) return;
+		event.preventDefault();
+		editor.takeCameraControl();
+		const rect = rectOf();
+		const point = screenPoint(event.clientX - rect.left, event.clientY - rect.top);
+		editor.wheel(point, event.deltaX, event.deltaY, event.ctrlKey || event.metaKey, event.deltaMode);
+	}
+	function handleDoubleClick(event) {
+		if (inViews(event)) return;
+		const point = screenToWorld(event.clientX, event.clientY, rectOf(), renderCamera());
+		const item = editor.itemAt(point);
+		if (options.onDoubleClick?.(item, point) === true || editor.readonly) return;
+		if (item && !item.locked && editor.registry.capabilities(item).canEdit) {
+			editor.editingId = item.id;
+			return;
+		}
+		if (item && item.type !== "frame" && item.type !== "arrow") return;
+		const label = editor.labelItemAt(point);
+		if (label) editor.editingId = label.id;
+		else if (!item) editor.beginTextDraft(point);
+	}
+	const listeners = [
+		["keydown", handleScriptKey],
+		["keyup", handleScriptKey],
+		["pointerdown", handlePointerDown],
+		["pointermove", handlePointerMove],
+		["pointerup", handlePointerUp],
+		["pointercancel", handlePointerUp],
+		["lostpointercapture", handlePointerUp],
+		["pointerleave", handlePointerLeave],
+		[
+			"wheel",
+			handleWheel,
+			{ passive: false }
+		],
+		["dblclick", handleDoubleClick]
+	];
+	const stopEditor = editor.subscribe(LIVE_CHANNELS, scheduleTick);
+	const stopAssets = assets.subscribe(() => {
+		assetVersion += 1;
+		requestAssets = true;
+		scheduleTick();
+	});
+	const resizeObserver = new ResizeObserver(resize);
+	return {
+		ready: (async () => {
+			const instance = new Application();
+			try {
+				await instance.init({
+					antialias: true,
+					autoDensity: true,
+					backgroundAlpha: 0,
+					resizeTo: host,
+					resolution: getBoardResolution(),
+					autoStart: false
+				});
+			} catch (error) {
+				console.error("Board canvas failed to start", error);
+				instance.destroy({ removeView: true });
+				return false;
+			}
+			if (disposed) {
+				instance.destroy({ removeView: true });
+				return false;
+			}
+			app = instance;
+			stopMaintenance = scheduleBoardMaintenance(instance.renderer);
+			Object.assign(instance.canvas.style, {
+				position: "relative",
+				zIndex: "1",
+				display: "block",
+				touchAction: "none"
+			});
+			host.insertBefore(instance.canvas, views.element);
+			world = new Container({
+				isRenderGroup: true,
+				label: "board-world"
+			});
+			const nodes = new Container({
+				isRenderGroup: true,
+				label: "board-nodes"
+			});
+			overlay = new Graphics({ label: "board-interaction-overlay" });
+			world.addChild(nodes, overlay);
+			instance.stage.addChild(world);
+			scene = createBoardScene({
+				world: nodes,
+				overlay,
+				getRenderer: resolveRenderer,
+				onFarLayerFrame: scheduleTick
+			});
+			for (const [type, listener, listenerOptions] of listeners) host.addEventListener(type, listener, listenerOptions);
+			resizeObserver.observe(host);
+			resize();
+			return true;
+		})(),
+		get renderer() {
+			return app ? app.renderer : null;
+		},
+		get camera() {
+			return renderCamera();
+		},
+		get theme() {
+			return theme();
+		},
+		setScriptMode(mode) {
+			if (mode === scriptMode) return;
+			scriptMode = mode;
+			scriptLastTick = performance.now();
+			scheduleTick();
+		},
+		resetScripts() {
+			scriptTime = 0;
+			scripts?.invalidate();
+		},
+		invalidateScript(path) {
+			scripts?.invalidate(path);
+		},
+		scriptOutput: (id) => scripts?.output(id) ?? null,
+		async snapshotScripts() {
+			const result = {};
+			await Promise.all([...scriptOutputs.keys()].map(async (id) => {
+				const snapshot = await scripts?.snapshot(id);
+				if (snapshot) result[id] = snapshot;
+			}));
+			return result;
+		},
+		restoreScript(id, snapshot) {
+			scripts?.restore(id, snapshot);
+		},
+		subscribeScripts(listener) {
+			scriptListeners.add(listener);
+			return () => {
+				scriptListeners.delete(listener);
+			};
+		},
+		scriptError: (id) => scripts?.error(id) ?? null,
+		setActive(next) {
+			if (active === next) return;
+			active = next;
+			if (!active) {
+				cancelAnimationFrame(renderFrame);
+				cancelAnimationFrame(tickFrame);
+				renderFrame = 0;
+				tickFrame = 0;
+				return;
+			}
+			player.reset();
+			scriptLastTick = performance.now();
+			resize();
+		},
+		invalidate(invalidation) {
+			if (invalidation?.cards) {
+				cardEpoch += 1;
+				requestAssets = true;
+			}
+			scheduleTick();
+		},
+		isMaterialized: (id) => Boolean(scene?.getNode(id)),
+		toWorld: (clientX, clientY) => screenToWorld(clientX, clientY, rectOf(), renderCamera()),
+		destroy() {
+			disposed = true;
+			scriptPointers.clear();
+			scriptListeners.clear();
+			stopMaintenance?.();
+			stopEditor();
+			stopAssets();
+			resizeObserver.disconnect();
+			cancelAnimationFrame(resizeFrame);
+			cancelAnimationFrame(renderFrame);
+			cancelAnimationFrame(tickFrame);
+			for (const [type, listener] of listeners) host.removeEventListener(type, listener);
+			editor.setPlayedItems(/* @__PURE__ */ new Map());
+			editor.setScriptItems(/* @__PURE__ */ new Map());
+			scene?.destroy(renderContext(theme(), editor.scene, 0));
+			scene = null;
+			scripts?.destroy();
+			scripts = null;
+			background?.destroy({ children: true });
+			background = null;
+			views.destroy();
+			world = null;
+			overlay = null;
+			app?.destroy({ removeView: true });
+			app = null;
+		}
+	};
+}
+//#endregion
+export { mountBoardStage };