@jamesyong42/infinite-canvas 1.0.0 → 1.2.0

package/dist/devtools.mjs

@@ -0,0 +1,652 @@
+import { G as WidgetData, U as Widget, a as useEntityTags, c as useRegisteredTags, d as useTaggedEntities, g as useLayoutEngine, i as useEntityComponents, p as EngineProvider, r as useComponent, s as useRegisteredComponents, t as useAllEntities, z as Selected } from "./hooks-BwY7rRHg.mjs";
+import { useEffect, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/devtools/EcsDevtools.tsx
+/**
+* Live ECS editor: spawn widgets, browse entities, edit components, toggle tags.
+* Ship in a dev mode or behind a feature flag — not intended for production users.
+*/
+function EcsDevtools({ engine, onClose }) {
+	if (engine) return /* @__PURE__ */ jsx(EngineProvider, {
+		value: engine,
+		children: /* @__PURE__ */ jsx(EcsDevtoolsInner, { onClose })
+	});
+	return /* @__PURE__ */ jsx(EcsDevtoolsInner, { onClose });
+}
+function EcsDevtoolsInner({ onClose }) {
+	const engine = useLayoutEngine();
+	const allEntities = useAllEntities();
+	const selectedIds = useTaggedEntities(Selected);
+	const widgets = useMemo(() => engine.getWidgets(), [engine]);
+	const [showAll, setShowAll] = useState(false);
+	const [spawnType, setSpawnType] = useState(widgets[0]?.type ?? "");
+	const [manualFocusId, setManualFocusId] = useState(null);
+	const focusId = selectedIds[0] ?? manualFocusId;
+	const entityList = useMemo(() => {
+		if (showAll) return allEntities;
+		return allEntities.filter((id) => engine.has(id, Widget));
+	}, [
+		engine,
+		allEntities,
+		showAll
+	]);
+	const handleSpawn = () => {
+		if (!spawnType) return;
+		const id = engine.spawnAtCameraCenter(spawnType);
+		engine.markDirty();
+		setManualFocusId(id);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ic-ecs-root",
+		children: [
+			/* @__PURE__ */ jsx(StyleTag, {}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "ic-ecs-header",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "ic-ecs-title",
+					children: "ECS Editor"
+				}), onClose && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "ic-ecs-close",
+					onClick: onClose,
+					title: "Close",
+					children: "×"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "ic-ecs-section",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "ic-ecs-label",
+					children: "Spawn widget"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "ic-ecs-row",
+					children: [/* @__PURE__ */ jsx("select", {
+						className: "ic-ecs-select",
+						value: spawnType,
+						onChange: (e) => setSpawnType(e.target.value),
+						children: widgets.map((w) => /* @__PURE__ */ jsx("option", {
+							value: w.type,
+							children: w.type
+						}, w.type))
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "ic-ecs-btn ic-ecs-btn-primary",
+						onClick: handleSpawn,
+						disabled: !spawnType,
+						children: "+ Spawn"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "ic-ecs-section",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "ic-ecs-label-row",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "ic-ecs-label",
+						children: [
+							"Entities (",
+							entityList.length,
+							showAll ? "" : " widgets",
+							")"
+						]
+					}), /* @__PURE__ */ jsxs("label", {
+						className: "ic-ecs-check",
+						children: [/* @__PURE__ */ jsx("input", {
+							type: "checkbox",
+							checked: showAll,
+							onChange: (e) => setShowAll(e.target.checked)
+						}), "show all"]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "ic-ecs-list",
+					children: [entityList.map((id) => /* @__PURE__ */ jsx(EntityRow, {
+						entity: id,
+						focused: id === focusId,
+						onClick: () => setManualFocusId(id)
+					}, id)), entityList.length === 0 && /* @__PURE__ */ jsx("div", {
+						className: "ic-ecs-empty",
+						children: "no entities"
+					})]
+				})]
+			}),
+			focusId !== null && focusId !== void 0 && engine.world.entityExists(focusId) && /* @__PURE__ */ jsx(EntityInspector, { entity: focusId })
+		]
+	});
+}
+function EntityRow({ entity, focused, onClick }) {
+	const engine = useLayoutEngine();
+	const label = useComponent(entity, Widget)?.type ?? "entity";
+	return /* @__PURE__ */ jsxs("div", {
+		className: `ic-ecs-entity-row ${focused ? "is-focused" : ""}`,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "ic-ecs-entity-btn",
+			onClick,
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "ic-ecs-entity-id",
+				children: ["e", entity]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "ic-ecs-entity-label",
+				children: label
+			})]
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "ic-ecs-btn ic-ecs-btn-danger ic-ecs-btn-sm",
+			onClick: () => {
+				engine.destroyEntity(entity);
+				engine.markDirty();
+			},
+			title: "Destroy entity",
+			children: "×"
+		})]
+	});
+}
+function EntityInspector({ entity }) {
+	const engine = useLayoutEngine();
+	const components = useEntityComponents(entity);
+	const tags = useEntityTags(entity);
+	const registeredComponents = useRegisteredComponents();
+	const registeredTags = useRegisteredTags();
+	const widget = useComponent(entity, Widget);
+	const absentComponents = useMemo(() => {
+		const present = new Set(components.map((c) => c.name));
+		return registeredComponents.filter((c) => !present.has(c.name));
+	}, [components, registeredComponents]);
+	const [componentToAdd, setComponentToAdd] = useState("");
+	useEffect(() => {
+		setComponentToAdd(absentComponents[0]?.name ?? "");
+	}, [absentComponents]);
+	const handleAddComponent = () => {
+		const type = absentComponents.find((c) => c.name === componentToAdd);
+		if (!type) return;
+		engine.addComponent(entity, type);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ic-ecs-section",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "ic-ecs-inspect-head",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "ic-ecs-label",
+					children: [
+						"Entity ",
+						/* @__PURE__ */ jsxs("span", {
+							className: "ic-ecs-entity-id",
+							children: ["e", entity]
+						}),
+						widget?.type && /* @__PURE__ */ jsxs("span", {
+							className: "ic-ecs-entity-label",
+							children: [" · ", widget.type]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "ic-ecs-sub-label",
+				children: "Components"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "ic-ecs-components",
+				children: components.map((type) => /* @__PURE__ */ jsx(ComponentEditor, {
+					entity,
+					type
+				}, type.name))
+			}),
+			absentComponents.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "ic-ecs-row",
+				style: { marginTop: 6 },
+				children: [/* @__PURE__ */ jsx("select", {
+					className: "ic-ecs-select",
+					value: componentToAdd,
+					onChange: (e) => setComponentToAdd(e.target.value),
+					children: absentComponents.map((c) => /* @__PURE__ */ jsx("option", {
+						value: c.name,
+						children: c.name
+					}, c.name))
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "ic-ecs-btn",
+					onClick: handleAddComponent,
+					children: "+ Add component"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "ic-ecs-sub-label",
+				children: "Tags"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "ic-ecs-tags",
+				children: registeredTags.map((type) => /* @__PURE__ */ jsx(TagPill, {
+					entity,
+					type,
+					active: tags.some((t) => t.name === type.name)
+				}, type.name))
+			})
+		]
+	});
+}
+function ComponentEditor({ entity, type }) {
+	const engine = useLayoutEngine();
+	const value = useComponent(entity, type);
+	const [collapsed, setCollapsed] = useState(false);
+	if (!value) return null;
+	const isWidgetData = type.name === "WidgetData";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ic-ecs-component",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "ic-ecs-component-head",
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "ic-ecs-toggle",
+				onClick: () => setCollapsed((c) => !c),
+				children: [
+					collapsed ? "▶" : "▼",
+					" ",
+					type.name
+				]
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "ic-ecs-btn ic-ecs-btn-danger ic-ecs-btn-sm",
+				onClick: () => engine.removeComponent(entity, type),
+				title: "Remove component",
+				children: "×"
+			})]
+		}), !collapsed && /* @__PURE__ */ jsx("div", {
+			className: "ic-ecs-fields",
+			children: isWidgetData ? /* @__PURE__ */ jsx(WidgetDataEditor, {
+				entity,
+				value
+			}) : /* @__PURE__ */ jsx(GenericFieldsEditor, {
+				entity,
+				type,
+				value
+			})
+		})]
+	});
+}
+function GenericFieldsEditor({ entity, type, value }) {
+	const engine = useLayoutEngine();
+	const defaults = type.defaults;
+	const val = value;
+	return /* @__PURE__ */ jsx(Fragment, { children: Object.keys(defaults).map((key) => /* @__PURE__ */ jsx(FieldRow, {
+		label: key,
+		value: val[key],
+		onChange: (next) => {
+			engine.set(entity, type, { [key]: next });
+		}
+	}, key)) });
+}
+function WidgetDataEditor({ entity, value }) {
+	const engine = useLayoutEngine();
+	const data = value.data ?? {};
+	const keys = Object.keys(data);
+	if (keys.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "ic-ecs-empty",
+		children: "(no fields)"
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children: keys.map((key) => /* @__PURE__ */ jsx(FieldRow, {
+		label: key,
+		value: data[key],
+		onChange: (next) => {
+			engine.set(entity, WidgetData, { data: {
+				...data,
+				[key]: next
+			} });
+		}
+	}, key)) });
+}
+function FieldRow({ label, value, onChange }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ic-ecs-field",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "ic-ecs-field-label",
+			children: label
+		}), /* @__PURE__ */ jsx(FieldInput, {
+			value,
+			onChange
+		})]
+	});
+}
+function FieldInput({ value, onChange }) {
+	if (typeof value === "number") return /* @__PURE__ */ jsx("input", {
+		type: "number",
+		className: "ic-ecs-input",
+		value,
+		onChange: (e) => {
+			const n = Number.parseFloat(e.target.value);
+			if (!Number.isNaN(n)) onChange(n);
+		}
+	});
+	if (typeof value === "boolean") return /* @__PURE__ */ jsx("input", {
+		type: "checkbox",
+		className: "ic-ecs-checkbox",
+		checked: value,
+		onChange: (e) => onChange(e.target.checked)
+	});
+	if (typeof value === "string") return /* @__PURE__ */ jsx("input", {
+		type: "text",
+		className: "ic-ecs-input",
+		value,
+		onChange: (e) => onChange(e.target.value)
+	});
+	return /* @__PURE__ */ jsx(JsonInput, {
+		value,
+		onChange
+	});
+}
+function JsonInput({ value, onChange }) {
+	const [text, setText] = useState(JSON.stringify(value));
+	const [error, setError] = useState(false);
+	useEffect(() => {
+		setText(JSON.stringify(value));
+		setError(false);
+	}, [value]);
+	const commit = () => {
+		try {
+			const parsed = JSON.parse(text);
+			setError(false);
+			onChange(parsed);
+		} catch {
+			setError(true);
+		}
+	};
+	return /* @__PURE__ */ jsx("input", {
+		type: "text",
+		className: `ic-ecs-input ic-ecs-input-json ${error ? "is-error" : ""}`,
+		value: text,
+		onChange: (e) => setText(e.target.value),
+		onBlur: commit,
+		onKeyDown: (e) => {
+			if (e.key === "Enter") commit();
+		}
+	});
+}
+function TagPill({ entity, type, active }) {
+	const engine = useLayoutEngine();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: `ic-ecs-tag ${active ? "is-active" : ""}`,
+		onClick: () => {
+			if (active) engine.removeTag(entity, type);
+			else engine.addTag(entity, type);
+		},
+		children: type.name
+	});
+}
+const STYLE_ID = "ic-ecs-devtools-style";
+const CSS = `
+.ic-ecs-root {
+	--ic-ecs-bg: rgba(255, 255, 255, 0.96);
+	--ic-ecs-bg-elev: #f7f7f7;
+	--ic-ecs-fg: #1a1a1a;
+	--ic-ecs-fg-muted: #6b7280;
+	--ic-ecs-fg-faint: #9ca3af;
+	--ic-ecs-border: #e5e7eb;
+	--ic-ecs-accent: #0d99ff;
+	--ic-ecs-accent-fg: #ffffff;
+	--ic-ecs-danger: #dc2626;
+	--ic-ecs-focus-bg: rgba(13, 153, 255, 0.12);
+	position: absolute;
+	top: 4rem;
+	right: 1rem;
+	z-index: 50;
+	width: 360px;
+	max-height: calc(100vh - 6rem);
+	overflow-y: auto;
+	background: var(--ic-ecs-bg);
+	color: var(--ic-ecs-fg);
+	border: 1px solid var(--ic-ecs-border);
+	border-radius: 8px;
+	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+	backdrop-filter: blur(6px);
+	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+	font-size: 11px;
+	line-height: 1.4;
+}
+.dark .ic-ecs-root,
+:root[data-theme="dark"] .ic-ecs-root {
+	--ic-ecs-bg: rgba(23, 23, 23, 0.96);
+	--ic-ecs-bg-elev: #1f1f1f;
+	--ic-ecs-fg: #e5e5e5;
+	--ic-ecs-fg-muted: #a1a1aa;
+	--ic-ecs-fg-faint: #525252;
+	--ic-ecs-border: #2a2a2a;
+	--ic-ecs-focus-bg: rgba(13, 153, 255, 0.18);
+}
+.ic-ecs-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px 12px;
+	border-bottom: 1px solid var(--ic-ecs-border);
+}
+.ic-ecs-title {
+	font-weight: 600;
+	font-size: 12px;
+}
+.ic-ecs-close {
+	background: transparent;
+	border: 0;
+	color: var(--ic-ecs-fg-muted);
+	cursor: pointer;
+	font-size: 16px;
+	line-height: 1;
+	padding: 0 4px;
+}
+.ic-ecs-close:hover { color: var(--ic-ecs-fg); }
+.ic-ecs-section {
+	padding: 8px 12px;
+	border-bottom: 1px solid var(--ic-ecs-border);
+}
+.ic-ecs-section:last-child { border-bottom: 0; }
+.ic-ecs-label {
+	font-size: 10px;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	color: var(--ic-ecs-fg-muted);
+}
+.ic-ecs-label-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 4px;
+}
+.ic-ecs-sub-label {
+	font-size: 9px;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	color: var(--ic-ecs-fg-faint);
+	margin: 8px 0 4px;
+}
+.ic-ecs-row {
+	display: flex;
+	gap: 6px;
+	align-items: center;
+	margin-top: 4px;
+}
+.ic-ecs-select {
+	flex: 1 1 auto;
+	min-width: 0;
+	background: var(--ic-ecs-bg-elev);
+	color: var(--ic-ecs-fg);
+	border: 1px solid var(--ic-ecs-border);
+	border-radius: 4px;
+	padding: 4px 6px;
+	font: inherit;
+}
+.ic-ecs-input {
+	flex: 1 1 auto;
+	min-width: 0;
+	background: var(--ic-ecs-bg-elev);
+	color: var(--ic-ecs-fg);
+	border: 1px solid var(--ic-ecs-border);
+	border-radius: 4px;
+	padding: 2px 6px;
+	font: inherit;
+}
+.ic-ecs-input:focus { outline: 1px solid var(--ic-ecs-accent); outline-offset: -1px; }
+.ic-ecs-input-json.is-error { border-color: var(--ic-ecs-danger); }
+.ic-ecs-checkbox {
+	accent-color: var(--ic-ecs-accent);
+}
+.ic-ecs-btn {
+	background: var(--ic-ecs-bg-elev);
+	color: var(--ic-ecs-fg);
+	border: 1px solid var(--ic-ecs-border);
+	border-radius: 4px;
+	padding: 3px 8px;
+	font: inherit;
+	cursor: pointer;
+	white-space: nowrap;
+}
+.ic-ecs-btn:hover { background: var(--ic-ecs-border); }
+.ic-ecs-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.ic-ecs-btn-primary {
+	background: var(--ic-ecs-accent);
+	color: var(--ic-ecs-accent-fg);
+	border-color: var(--ic-ecs-accent);
+}
+.ic-ecs-btn-primary:hover { filter: brightness(1.08); background: var(--ic-ecs-accent); }
+.ic-ecs-btn-danger { color: var(--ic-ecs-danger); }
+.ic-ecs-btn-sm { padding: 0 6px; font-size: 11px; }
+.ic-ecs-check {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	font-size: 10px;
+	color: var(--ic-ecs-fg-muted);
+	cursor: pointer;
+}
+.ic-ecs-list {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	max-height: 200px;
+	overflow-y: auto;
+	margin-top: 4px;
+}
+.ic-ecs-empty {
+	color: var(--ic-ecs-fg-faint);
+	font-style: italic;
+	padding: 4px 0;
+}
+.ic-ecs-entity-row {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	padding: 2px 4px;
+	border-radius: 4px;
+}
+.ic-ecs-entity-row.is-focused { background: var(--ic-ecs-focus-bg); }
+.ic-ecs-entity-btn {
+	flex: 1 1 auto;
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	background: transparent;
+	border: 0;
+	color: inherit;
+	cursor: pointer;
+	text-align: left;
+	padding: 2px 0;
+	font: inherit;
+	min-width: 0;
+}
+.ic-ecs-entity-id {
+	color: var(--ic-ecs-fg-muted);
+	font-variant-numeric: tabular-nums;
+}
+.ic-ecs-entity-label {
+	color: var(--ic-ecs-fg);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.ic-ecs-inspect-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 4px;
+}
+.ic-ecs-components {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+.ic-ecs-component {
+	border: 1px solid var(--ic-ecs-border);
+	border-radius: 4px;
+	background: var(--ic-ecs-bg-elev);
+}
+.ic-ecs-component-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 2px 6px;
+}
+.ic-ecs-toggle {
+	background: transparent;
+	border: 0;
+	color: inherit;
+	cursor: pointer;
+	font: inherit;
+	font-weight: 600;
+	padding: 2px 0;
+}
+.ic-ecs-fields {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+	padding: 4px 6px 6px;
+	border-top: 1px dashed var(--ic-ecs-border);
+}
+.ic-ecs-field {
+	display: grid;
+	grid-template-columns: 70px 1fr;
+	align-items: center;
+	gap: 6px;
+}
+.ic-ecs-field-label {
+	color: var(--ic-ecs-fg-muted);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.ic-ecs-tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+}
+.ic-ecs-tag {
+	background: transparent;
+	color: var(--ic-ecs-fg-faint);
+	border: 1px solid var(--ic-ecs-border);
+	border-radius: 999px;
+	padding: 2px 8px;
+	font: inherit;
+	cursor: pointer;
+}
+.ic-ecs-tag:hover { color: var(--ic-ecs-fg); }
+.ic-ecs-tag.is-active {
+	background: var(--ic-ecs-accent);
+	color: var(--ic-ecs-accent-fg);
+	border-color: var(--ic-ecs-accent);
+}
+`;
+function StyleTag() {
+	useEffect(() => {
+		if (typeof document === "undefined") return;
+		if (document.getElementById(STYLE_ID)) return;
+		const el = document.createElement("style");
+		el.id = STYLE_ID;
+		el.textContent = CSS;
+		document.head.appendChild(el);
+	}, []);
+	return null;
+}
+//#endregion
+export { EcsDevtools };
+
+//# sourceMappingURL=devtools.mjs.map