incanto 0.1.0

package/dist/debug.js

@@ -0,0 +1,658 @@
+import { t as jsonClone } from "./json-BLk7H2Qa.js";
+import { s as mergeStaticProps } from "./registry-BVJ2HbCn.js";
+//#region src/debug/panel.ts
+/** Keep a panel rect on screen and above the minimum usable size. */
+function clampPanelRect(x, y, w, h, viewW, viewH, minW = 180, minH = 120) {
+	const cw = Math.max(minW, w);
+	const ch = Math.max(minH, h);
+	return {
+		x: Math.min(Math.max(0, x), Math.max(0, viewW - cw)),
+		y: Math.min(Math.max(0, y), Math.max(0, viewH - ch)),
+		w: cw,
+		h: ch
+	};
+}
+function applyStyle(el, rules) {
+	for (const [key, value] of Object.entries(rules)) el.style[key] = value;
+}
+const PANEL_BG = "rgba(18, 20, 26, 0.92)";
+const PANEL_BORDER = "1px solid rgba(255,255,255,0.14)";
+const FONT = "12px ui-monospace, SFMono-Regular, Menlo, monospace";
+/**
+* A draggable, resizable, closable window: title bar (drag) + body (content)
+* + corner handle (resize) + × (close). Pure inline styles, zero CSS files.
+*/
+var FloatingPanel = class {
+	host;
+	el;
+	body;
+	/** Assigned by the overlay — fires when the × is clicked. */
+	onClose = () => {};
+	x;
+	y;
+	w;
+	h;
+	constructor(doc, host, title, rect) {
+		this.host = host;
+		this.x = rect.x;
+		this.y = rect.y;
+		this.w = rect.w;
+		this.h = rect.h;
+		this.el = doc.createElement("div");
+		applyStyle(this.el, {
+			position: "absolute",
+			background: PANEL_BG,
+			border: PANEL_BORDER,
+			borderRadius: "8px",
+			color: "rgba(255,255,255,0.88)",
+			font: FONT,
+			display: "flex",
+			flexDirection: "column",
+			overflow: "hidden",
+			zIndex: "40",
+			pointerEvents: "auto",
+			boxShadow: "0 8px 28px rgba(0,0,0,0.45)"
+		});
+		const header = doc.createElement("div");
+		header.textContent = title;
+		applyStyle(header, {
+			padding: "6px 28px 6px 10px",
+			background: "rgba(255,255,255,0.07)",
+			cursor: "move",
+			userSelect: "none",
+			touchAction: "none",
+			fontWeight: "700"
+		});
+		this.el.appendChild(header);
+		const close = doc.createElement("div");
+		close.textContent = "×";
+		close.title = "close";
+		applyStyle(close, {
+			position: "absolute",
+			top: "2px",
+			right: "8px",
+			cursor: "pointer",
+			fontSize: "16px",
+			lineHeight: "20px",
+			opacity: "0.7"
+		});
+		close.addEventListener("click", () => this.onClose());
+		this.el.appendChild(close);
+		this.body = doc.createElement("div");
+		applyStyle(this.body, {
+			flex: "1",
+			overflow: "auto",
+			padding: "8px 10px"
+		});
+		this.el.appendChild(this.body);
+		const handle = doc.createElement("div");
+		handle.textContent = "◢";
+		applyStyle(handle, {
+			position: "absolute",
+			right: "2px",
+			bottom: "0",
+			cursor: "nwse-resize",
+			opacity: "0.5",
+			userSelect: "none",
+			touchAction: "none"
+		});
+		this.el.appendChild(handle);
+		this.wireDrag(header, (dx, dy) => {
+			this.x += dx;
+			this.y += dy;
+			this.layout();
+		});
+		this.wireDrag(handle, (dx, dy) => {
+			this.w += dx;
+			this.h += dy;
+			this.layout();
+		});
+		this.layout();
+		host.appendChild(this.el);
+	}
+	remove() {
+		this.el.remove();
+	}
+	layout() {
+		const view = this.host.getBoundingClientRect();
+		const rect = clampPanelRect(this.x, this.y, this.w, this.h, view.width, view.height);
+		this.x = rect.x;
+		this.y = rect.y;
+		this.w = rect.w;
+		this.h = rect.h;
+		applyStyle(this.el, {
+			left: `${rect.x}px`,
+			top: `${rect.y}px`,
+			width: `${rect.w}px`,
+			height: `${rect.h}px`
+		});
+	}
+	wireDrag(grip, move) {
+		let active = null;
+		let lastX = 0;
+		let lastY = 0;
+		grip.addEventListener("pointerdown", (e) => {
+			active = e.pointerId;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			grip.setPointerCapture?.(e.pointerId);
+		});
+		grip.addEventListener("pointermove", (e) => {
+			if (e.pointerId !== active) return;
+			move(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		});
+		const end = (e) => {
+			if (e.pointerId === active) active = null;
+		};
+		grip.addEventListener("pointerup", end);
+		grip.addEventListener("pointercancel", end);
+	}
+};
+//#endregion
+//#region src/debug/index.ts
+/** Attach the overlay; null when no DOM is available (headless). */
+function attachDebugOverlay(engine, opts = {}) {
+	const doc = opts.doc ?? (typeof document !== "undefined" ? document : null);
+	if (!doc) return null;
+	const container = opts.container ?? (typeof document !== "undefined" ? document.body : null);
+	if (!container || typeof container.appendChild !== "function") return null;
+	return new DebugOverlay(engine, container, doc, opts.statsSource);
+}
+const MAX_LOG_ROWS = 300;
+const CONSOLE_LEVELS = [
+	"log",
+	"info",
+	"warn",
+	"error",
+	"debug"
+];
+var DebugOverlay = class {
+	engine;
+	container;
+	doc;
+	statsSource;
+	panels = /* @__PURE__ */ new Map();
+	cleanups = [];
+	menuButton;
+	dropdown = null;
+	selected = null;
+	statsChip = null;
+	logRows = [];
+	levelEnabled = {
+		debug: true,
+		info: true,
+		warn: true,
+		error: true
+	};
+	consoleCapture = false;
+	consolePatched = [];
+	frame = 0;
+	editing = 0;
+	constructor(engine, container, doc, statsSource) {
+		this.engine = engine;
+		this.container = container;
+		this.doc = doc;
+		this.statsSource = statsSource;
+		this.menuButton = doc.createElement("div");
+		this.menuButton.textContent = "☰ debug";
+		applyStyle(this.menuButton, {
+			position: "absolute",
+			top: "8px",
+			left: "8px",
+			padding: "4px 10px",
+			background: "rgba(18,20,26,0.85)",
+			border: "1px solid rgba(255,255,255,0.18)",
+			borderRadius: "6px",
+			color: "rgba(255,255,255,0.85)",
+			font: "12px ui-monospace, Menlo, monospace",
+			cursor: "pointer",
+			userSelect: "none",
+			zIndex: "50",
+			pointerEvents: "auto"
+		});
+		this.menuButton.addEventListener("click", () => this.toggleDropdown());
+		if (!container.style.position) container.style.position = "relative";
+		container.appendChild(this.menuButton);
+		this.cleanups.push(engine.log.added.connect((entry) => {
+			this.pushLog({
+				level: entry.level,
+				source: "engine",
+				text: entry.parts.map(stringify).join(" ")
+			});
+		}));
+		this.cleanups.push(engine.sceneChanged.connect(() => {
+			this.selected = null;
+			this.renderExplorer();
+			this.renderInspector();
+		}));
+		this.cleanups.push(engine.updated.connect(() => {
+			this.frame += 1;
+			if (this.frame % 30 !== 0) return;
+			this.renderExplorer();
+			this.renderStats();
+			if (this.editing === 0) this.renderInspector();
+		}));
+	}
+	isOpen(id) {
+		return id === "stats" ? this.statsChip !== null : this.panels.has(id);
+	}
+	open(id) {
+		if (id === "stats") {
+			this.openStatsChip();
+			return;
+		}
+		if (this.panels.has(id)) return;
+		const panel = new FloatingPanel(this.doc, this.container, {
+			explorer: "Explorer",
+			inspector: "Inspector",
+			logs: "Logs"
+		}[id], {
+			explorer: {
+				x: 12,
+				y: 44,
+				w: 240,
+				h: 320
+			},
+			inspector: {
+				x: 264,
+				y: 44,
+				w: 280,
+				h: 320
+			},
+			logs: {
+				x: 12,
+				y: 380,
+				w: 532,
+				h: 200
+			}
+		}[id]);
+		panel.onClose = () => this.close(id);
+		this.panels.set(id, panel);
+		if (id === "explorer") this.renderExplorer();
+		if (id === "inspector") this.renderInspector();
+		if (id === "logs") this.renderLogs();
+	}
+	close(id) {
+		if (id === "stats") {
+			this.statsChip?.remove();
+			this.statsChip = null;
+			return;
+		}
+		const panel = this.panels.get(id);
+		if (!panel) return;
+		panel.remove();
+		this.panels.delete(id);
+	}
+	toggle(id) {
+		if (this.isOpen(id)) this.close(id);
+		else this.open(id);
+	}
+	setLevelEnabled(level, on) {
+		this.levelEnabled[level] = on;
+		this.renderLogs();
+	}
+	/**
+	* Patch console.* into the Logs panel (restored on disable/dispose).
+	* Standard monkey-patch hazard: a tool that patches console AFTER capture
+	* enables will be clobbered by our restore — enable capture last.
+	*/
+	setConsoleCapture(on) {
+		if (on === this.consoleCapture) return;
+		this.consoleCapture = on;
+		if (on) {
+			this.renderLogs();
+			const host = console;
+			for (const method of CONSOLE_LEVELS) {
+				const original = host[method];
+				host[method] = (...parts) => {
+					original.apply(console, parts);
+					const level = method === "log" ? "info" : method;
+					this.pushLog({
+						level,
+						source: "console",
+						text: parts.map(stringify).join(" ")
+					});
+				};
+				this.consolePatched.push(() => {
+					host[method] = original;
+				});
+			}
+		} else {
+			for (const restore of this.consolePatched) restore();
+			this.consolePatched = [];
+			this.renderLogs();
+		}
+	}
+	dispose() {
+		this.setConsoleCapture(false);
+		for (const cleanup of this.cleanups) cleanup();
+		for (const id of [...this.panels.keys()]) this.close(id);
+		this.close("stats");
+		this.dropdown?.remove();
+		this.dropdown = null;
+		this.menuButton.remove();
+	}
+	toggleDropdown() {
+		if (this.dropdown) {
+			this.dropdown.remove();
+			this.dropdown = null;
+			return;
+		}
+		const menu = this.doc.createElement("div");
+		applyStyle(menu, {
+			position: "absolute",
+			top: "34px",
+			left: "8px",
+			background: "rgba(18,20,26,0.95)",
+			border: "1px solid rgba(255,255,255,0.18)",
+			borderRadius: "6px",
+			font: "12px ui-monospace, Menlo, monospace",
+			color: "rgba(255,255,255,0.85)",
+			zIndex: "60",
+			pointerEvents: "auto",
+			overflow: "hidden"
+		});
+		for (const [id, label] of [
+			["explorer", "Explorer"],
+			["inspector", "Inspector"],
+			["logs", "Logs"],
+			["stats", "Stats"]
+		]) {
+			const item = this.doc.createElement("div");
+			item.textContent = `${this.isOpen(id) ? "✓ " : ""}${label}`;
+			applyStyle(item, {
+				padding: "6px 14px",
+				cursor: "pointer",
+				userSelect: "none"
+			});
+			item.addEventListener("click", () => {
+				this.toggle(id);
+				this.dropdown?.remove();
+				this.dropdown = null;
+			});
+			menu.appendChild(item);
+		}
+		this.container.appendChild(menu);
+		this.dropdown = menu;
+	}
+	openStatsChip() {
+		if (this.statsChip) return;
+		const chip = this.doc.createElement("div");
+		applyStyle(chip, {
+			position: "absolute",
+			top: "8px",
+			right: "8px",
+			padding: "4px 10px",
+			background: "rgba(18,20,26,0.85)",
+			border: "1px solid rgba(255,255,255,0.18)",
+			borderRadius: "6px",
+			color: "rgba(255,255,255,0.85)",
+			font: "12px ui-monospace, Menlo, monospace",
+			textAlign: "right",
+			whiteSpace: "pre",
+			userSelect: "none",
+			pointerEvents: "none",
+			zIndex: "70"
+		});
+		this.container.appendChild(chip);
+		this.statsChip = chip;
+		this.renderStats();
+	}
+	renderStats() {
+		const chip = this.statsChip;
+		if (!chip) return;
+		const stats = this.engine.stats();
+		const gpu = this.statsSource?.() ?? {};
+		const line2 = [
+			`nodes ${stats.nodes}`,
+			...gpu.triangles !== void 0 ? [`tris ${compactCount(gpu.triangles)}`] : [],
+			...gpu.drawCalls !== void 0 ? [`calls ${gpu.drawCalls}`] : []
+		].join(" · ");
+		chip.textContent = `${Math.round(stats.fps)} fps · ${stats.frameMs.toFixed(1)} ms\n${line2}`;
+	}
+	renderExplorer() {
+		const panel = this.panels.get("explorer");
+		if (!panel) return;
+		clear(panel.body);
+		const root = this.engine.scene?.root;
+		if (!root) return;
+		const renderNode = (node, depth) => {
+			const ctor = node.constructor;
+			const row = this.doc.createElement("div");
+			row.textContent = `${"  ".repeat(depth)}${node.name} (${ctor.typeName})`;
+			applyStyle(row, {
+				whiteSpace: "pre",
+				cursor: "pointer",
+				padding: "1px 2px",
+				background: node === this.selected ? "rgba(110,160,255,0.25)" : "transparent"
+			});
+			row.addEventListener("click", () => {
+				this.selected = node;
+				this.open("inspector");
+				this.renderExplorer();
+				this.renderInspector();
+			});
+			panel.body.appendChild(row);
+			for (const child of node.children) renderNode(child, depth + 1);
+		};
+		renderNode(root, 0);
+	}
+	renderInspector() {
+		const panel = this.panels.get("inspector");
+		if (!panel) return;
+		clear(panel.body);
+		let node = this.selected;
+		if (node && node.tree === null) {
+			this.selected = null;
+			node = null;
+		}
+		if (!node) {
+			const hint = this.doc.createElement("div");
+			hint.textContent = "select a node in the Explorer";
+			applyStyle(hint, { opacity: "0.6" });
+			panel.body.appendChild(hint);
+			return;
+		}
+		const ctor = node.constructor;
+		const header = this.doc.createElement("div");
+		header.textContent = `${node.getPath()}  ·  ${ctor.typeName}${node.uid ? `  ·  ${node.uid}` : ""}`;
+		applyStyle(header, {
+			fontWeight: "700",
+			marginBottom: "6px",
+			whiteSpace: "pre-wrap"
+		});
+		panel.body.appendChild(header);
+		if (node.groups.size > 0) {
+			const groups = this.doc.createElement("div");
+			groups.textContent = `groups: ${[...node.groups].join(", ")}`;
+			applyStyle(groups, {
+				opacity: "0.7",
+				marginBottom: "6px"
+			});
+			panel.body.appendChild(groups);
+		}
+		const schema = mergeStaticProps(ctor);
+		for (const key of Object.keys(schema)) this.renderPropRow(panel.body, node, key, schema[key]?.options);
+	}
+	renderPropRow(body, node, key, schemaOptions) {
+		const record = node;
+		const value = record[key];
+		const row = this.doc.createElement("div");
+		applyStyle(row, {
+			display: "flex",
+			gap: "6px",
+			alignItems: "center",
+			margin: "2px 0"
+		});
+		const label = this.doc.createElement("div");
+		label.textContent = key;
+		applyStyle(label, {
+			minWidth: "84px",
+			opacity: "0.75"
+		});
+		row.appendChild(label);
+		const numberInput = (current, commit) => {
+			const input = this.doc.createElement("input");
+			input.type = "number";
+			input.value = String(current);
+			applyStyle(input, inputStyle("70px"));
+			input.addEventListener("change", () => {
+				const next = Number(input.value);
+				if (Number.isFinite(next)) commit(next);
+				else input.value = String(node[key]);
+			});
+			return input;
+		};
+		if (typeof value === "number") row.appendChild(numberInput(value, (next) => {
+			record[key] = next;
+		}));
+		else if (typeof value === "boolean") {
+			const input = this.doc.createElement("input");
+			input.type = "checkbox";
+			input.checked = value;
+			this.trackEditing(input);
+			input.addEventListener("change", () => {
+				record[key] = input.checked;
+			});
+			row.appendChild(input);
+		} else if (typeof value === "string" && schemaOptions && schemaOptions.length > 0) {
+			const select = this.doc.createElement("select");
+			for (const option of schemaOptions.includes(value) ? schemaOptions : [value, ...schemaOptions]) {
+				const el = this.doc.createElement("option");
+				el.value = option;
+				el.textContent = option;
+				if (option === value) el.selected = true;
+				select.appendChild(el);
+			}
+			select.value = value;
+			this.trackEditing(select);
+			select.addEventListener("change", () => {
+				record[key] = select.value;
+			});
+			applyStyle(select, inputStyle("110px"));
+			row.appendChild(select);
+		} else if (typeof value === "string") {
+			const input = this.doc.createElement("input");
+			input.type = "text";
+			input.value = value;
+			this.trackEditing(input);
+			applyStyle(input, inputStyle("140px"));
+			input.addEventListener("change", () => {
+				record[key] = input.value;
+			});
+			row.appendChild(input);
+		} else if (Array.isArray(value) && value.every((v) => typeof v === "number")) for (let i = 0; i < value.length; i++) row.appendChild(numberInput(value[i], (next) => {
+			const arr = [...record[key]];
+			arr[i] = next;
+			record[key] = arr;
+		}));
+		else {
+			const readout = this.doc.createElement("div");
+			readout.textContent = JSON.stringify(jsonClone(value));
+			applyStyle(readout, {
+				opacity: "0.65",
+				overflow: "hidden",
+				textOverflow: "ellipsis"
+			});
+			row.appendChild(readout);
+		}
+		body.appendChild(row);
+	}
+	trackEditing(input) {
+		input.addEventListener("focus", () => {
+			this.editing += 1;
+		});
+		input.addEventListener("blur", () => {
+			this.editing = Math.max(0, this.editing - 1);
+		});
+	}
+	pushLog(row) {
+		this.logRows.push(row);
+		if (this.logRows.length > MAX_LOG_ROWS) this.logRows.splice(0, this.logRows.length - MAX_LOG_ROWS);
+		this.renderLogs();
+	}
+	renderLogs() {
+		const panel = this.panels.get("logs");
+		if (!panel) return;
+		clear(panel.body);
+		const bar = this.doc.createElement("div");
+		applyStyle(bar, {
+			display: "flex",
+			gap: "8px",
+			marginBottom: "4px",
+			flexWrap: "wrap"
+		});
+		for (const level of [
+			"debug",
+			"info",
+			"warn",
+			"error"
+		]) {
+			const chip = this.doc.createElement("div");
+			chip.textContent = `${this.levelEnabled[level] ? "✓" : "·"}${level}`;
+			applyStyle(chip, {
+				cursor: "pointer",
+				opacity: this.levelEnabled[level] ? "1" : "0.45"
+			});
+			chip.addEventListener("click", () => this.setLevelEnabled(level, !this.levelEnabled[level]));
+			bar.appendChild(chip);
+		}
+		const consoleChip = this.doc.createElement("div");
+		consoleChip.textContent = `${this.consoleCapture ? "✓" : "·"}console`;
+		applyStyle(consoleChip, {
+			cursor: "pointer",
+			marginLeft: "auto"
+		});
+		consoleChip.addEventListener("click", () => this.setConsoleCapture(!this.consoleCapture));
+		bar.appendChild(consoleChip);
+		panel.body.appendChild(bar);
+		const colors = {
+			debug: "rgba(255,255,255,0.5)",
+			info: "rgba(255,255,255,0.85)",
+			warn: "#ffc861",
+			error: "#ff6b6b"
+		};
+		for (const row of this.logRows) {
+			if (!this.levelEnabled[row.level]) continue;
+			const line = this.doc.createElement("div");
+			line.textContent = `[${row.source === "console" ? "console" : row.level}] ${row.text}`;
+			applyStyle(line, {
+				color: colors[row.level],
+				whiteSpace: "pre-wrap"
+			});
+			panel.body.appendChild(line);
+		}
+	}
+};
+function clear(el) {
+	for (const child of [...el.children]) child.remove();
+}
+/** 18200 → '18.2k', 2_400_000 → '2.4M' — triangle counts stay chip-sized. */
+function compactCount(n) {
+	if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+	if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+	return String(n);
+}
+function stringify(part) {
+	if (typeof part === "string") return part;
+	try {
+		return JSON.stringify(part);
+	} catch {
+		return String(part);
+	}
+}
+function inputStyle(width) {
+	return {
+		width,
+		background: "rgba(255,255,255,0.08)",
+		border: "1px solid rgba(255,255,255,0.2)",
+		borderRadius: "4px",
+		color: "inherit",
+		font: "inherit",
+		padding: "2px 4px"
+	};
+}
+//#endregion
+export { DebugOverlay, attachDebugOverlay };

package/dist/duplicate-DP2WPYom.js

@@ -0,0 +1,22 @@
+import { i as serializeNode, t as buildNodeJson } from "./loader-CGs_G-r0.js";
+//#region src/core/scene/duplicate.ts
+function stripUids(json) {
+	const { uid: _uid, ...rest } = json;
+	return {
+		...rest,
+		children: json.children?.map(stripUids)
+	};
+}
+/**
+* Deep-clone a node subtree (detached — add it wherever you like; sibling
+* auto-rename applies on attach). Implemented as serialize → rebuild so a
+* duplicate is exactly what would survive a save/load round-trip — EXCEPT
+* uids: clones are new entities and get a fresh identity (no uid), so
+* duplicating a uid'd template can never mint colliding ids. Names ARE
+* kept — rename clones you need to look up individually.
+*/
+function duplicateNode(node) {
+	return buildNodeJson(stripUids(serializeNode(node)));
+}
+//#endregion
+export { duplicateNode as t };