@jgengine/editor 0.10.0

package/dist/EditorContextMenu.js

@@ -0,0 +1,12 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @internal Headless chrome-skinned viewport context menu (#866). Parent owns placement and action dispatch.
+ */
+export function EditorContextMenu({ x, y, actions, onPick, onClose, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "pointer-events-auto fixed inset-0 z-[60]", onPointerDown: onClose, onContextMenu: (event) => event.preventDefault() }), _jsxs("div", { role: "menu", className: "pointer-events-auto fixed z-[61] min-w-44 overflow-hidden rounded-md border border-white/15 bg-neutral-900/95 py-1 shadow-2xl backdrop-blur-sm", style: { left: x, top: y }, onContextMenu: (event) => event.preventDefault(), children: [_jsx("div", { className: "border-b border-white/10 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/45", children: "Editor" }), actions.map((action, index) => (_jsxs("div", { children: [action.separatorBefore === true ? _jsx("div", { className: "my-1 border-t border-white/10" }) : null, _jsx("button", { type: "button", role: "menuitem", disabled: action.disabled === true, onPointerDown: (event) => {
+                                    event.stopPropagation();
+                                    if (action.disabled === true)
+                                        return;
+                                    onPick(action);
+                                }, className: "flex w-full items-center px-3 py-1.5 text-left text-[13px] text-white/85 hover:bg-cyan-400/20 hover:text-white disabled:cursor-not-allowed disabled:text-white/30 disabled:hover:bg-transparent", children: action.label })] }, `${action.id}-${index}`)))] })] }));
+}

package/dist/InspectorPanel.d.ts

@@ -0,0 +1,14 @@
+import { type EditorSession } from "@jgengine/core/editor/index";
+import type { EditorUiStore } from "./uiStore.js";
+/**
+ * The right-hand inspector as an isolated, selector-subscribed panel. It reads only the
+ * document + selection slices (via `useStoreSelector`) and the ui store's `pathPoint` slice, so
+ * UI-only churn (gizmo mode, snapping, active tool) or unrelated document edits outside the
+ * selected object's slice no longer rerender it on `EditorChrome`'s own render tick.
+ * @internal — mounted by `EditorChrome` as a right-aside panel.
+ */
+export declare function InspectorPanel({ session, ui, onClose }: {
+    session: EditorSession;
+    ui: EditorUiStore;
+    onClose: () => void;
+}): import("react").JSX.Element;

package/dist/InspectorPanel.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { collectDescendants, editorParentOf, findEditorNote, findEditorPath, } from "@jgengine/core/editor/index";
+import { readVegetationSettings, vegetationFootprint } from "@jgengine/core/world/vegetation";
+import { getSceneKind, isSceneKind, parseParams, } from "@jgengine/core/scene/sceneKinds";
+import { getAssetGenerator } from "@jgengine/core/scene/assetGenerator";
+import { useGameContext } from "@jgengine/react/provider";
+import { SchemaInspector } from "./SchemaInspector.js";
+import { TriggerInspector } from "./TriggerInspector.js";
+import { shallowArrayEqual, useStoreSelector } from "./useStoreSelector.js";
+import { INPUT, MICRO } from "./chromeStyles.js";
+import { NumberField } from "./chromeFields.js";
+function VegetationFields({ volume, onMeta, }) {
+    const settings = readVegetationSettings(volume);
+    if (settings === null)
+        return null;
+    const footprint = vegetationFootprint(volume);
+    const areaM2 = (footprint.maxX - footprint.minX) * (footprint.maxZ - footprint.minZ);
+    const sliderMax = settings.item === "grass" ? 12 : 1;
+    const estimated = Math.floor(areaM2 * settings.density);
+    return (_jsxs("div", { className: "space-y-2 rounded-lg border border-emerald-400/15 bg-emerald-500/[0.06] p-2.5", children: [_jsx("div", { className: "text-[9px] font-semibold uppercase tracking-[0.14em] text-emerald-300", children: "Vegetation" }), _jsxs("label", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "item" }), _jsx("input", { className: `w-32 ${INPUT}`, value: settings.item, placeholder: "grass", onChange: (event) => onMeta({ item: event.target.value }, "veg:item") })] }), _jsxs("label", { className: "block space-y-1", children: [_jsxs("span", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "density /m\u00B2" }), _jsx("span", { className: "text-cyan-200", children: settings.density.toFixed(2) })] }), _jsx("input", { type: "range", min: 0, max: sliderMax, step: sliderMax / 200, className: "w-full accent-emerald-400", value: Math.min(settings.density, sliderMax), onChange: (event) => onMeta({ density: Number(event.target.value) }, "veg:density") })] }), _jsx(NumberField, { label: "density", step: 0.01, value: settings.density, onCommit: (value) => onMeta({ density: Math.max(0, value) }, "veg:density") }), _jsx(NumberField, { label: "min scale", step: 0.05, value: settings.minScale, onCommit: (value) => onMeta({ minScale: value }, "veg:minScale") }), _jsx(NumberField, { label: "max scale", step: 0.05, value: settings.maxScale, onCommit: (value) => onMeta({ maxScale: value }, "veg:maxScale") }), _jsx(NumberField, { label: "spacing", step: 0.25, value: settings.minDistance, onCommit: (value) => onMeta({ minDistance: Math.max(0, value) }, "veg:minDistance") }), _jsxs("label", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "seed" }), _jsx("input", { className: `w-32 ${INPUT}`, value: settings.seed, placeholder: "reroll\u2026", onChange: (event) => onMeta({ seed: event.target.value }, "veg:seed") })] }), _jsxs("div", { className: "text-[10px] text-neutral-500", children: ["\u2248 ", estimated.toLocaleString(), " ", settings.item === "grass" ? "blades" : "placements", " over ", Math.round(areaM2).toLocaleString(), " m\u00B2"] })] }));
+}
+/** Builds the resolver-facing view of a document object for a registered scene kind's inspector. */
+function markerObject(marker) {
+    return { id: marker.id, kind: marker.kind, position: marker.position, ...(marker.rotationY === undefined ? {} : { rotationY: marker.rotationY }), ...(marker.meta === undefined ? {} : { meta: marker.meta }) };
+}
+function volumeObject(volume) {
+    return {
+        id: volume.id,
+        kind: volume.kind,
+        center: volume.center,
+        ...(volume.halfExtents === undefined ? {} : { halfExtents: volume.halfExtents }),
+        ...(volume.radius === undefined ? {} : { radius: volume.radius }),
+        ...(volume.meta === undefined ? {} : { meta: volume.meta }),
+    };
+}
+function pathObject(path) {
+    return { id: path.id, kind: path.kind, points: path.points.map((point) => ({ x: point.x, y: point.y, z: point.z })), ...(path.meta === undefined ? {} : { meta: path.meta }) };
+}
+/** Auto-generated inspector for a registered scene kind's params (schema-driven, no per-kind JSX). */
+function KindInspector({ object, meta, onMeta }) {
+    const definition = getSceneKind(object.kind);
+    if (definition === undefined)
+        return null;
+    const note = definition.note?.(object, parseParams(definition.schema, object.meta));
+    return (_jsx(SchemaInspector, { schema: definition.schema, label: definition.label, meta: meta, onMeta: onMeta, ...(definition.accent === undefined ? {} : { accent: definition.accent }), ...(note === undefined ? {} : { note }) }));
+}
+/** Auto-generated inspector for a placed generator asset's params (building/bookcase/…). */
+function GeneratorInspector({ meta, onMeta }) {
+    const assetId = typeof meta?.["assetId"] === "string" ? meta["assetId"] : undefined;
+    const generator = assetId === undefined ? undefined : getAssetGenerator(assetId);
+    if (generator === undefined)
+        return null;
+    return _jsx(SchemaInspector, { schema: generator.schema, label: `${generator.label} (generator)`, accent: "#a78bfa", meta: meta, onMeta: onMeta });
+}
+/**
+ * Tags an object as a gameplay spot with a clearance radius: scatter keeps foliage off it and the
+ * runtime ground flattens under it (via `clearanceZonesFrom` → `environment({ clearings })`). 0 = untagged.
+ */
+function ClearanceField({ meta, onMeta, }) {
+    const value = typeof meta?.["clearance"] === "number" ? meta["clearance"] : 0;
+    return (_jsx("div", { className: "space-y-1", title: "Radius (m) foliage stays clear of and terrain flattens under; 0 = no clearance", children: _jsx(NumberField, { label: "clearance m", step: 0.5, value: value, onCommit: (next) => onMeta({ clearance: Math.max(0, next) }, "clearance") }) }));
+}
+/** Inspector row to parent the selected object under another (excludes itself and its descendants). */
+function ParentField({ session, id }) {
+    const document = session.getState().document;
+    const current = editorParentOf(document, id) ?? "";
+    const banned = collectDescendants(document, [id]);
+    banned.add(id);
+    const labelOf = (node) => node.label ?? node.id;
+    const candidates = [
+        ...document.markers.map((m) => ({ id: m.id, label: labelOf(m) })),
+        ...document.volumes.map((v) => ({ id: v.id, label: labelOf(v) })),
+        ...document.paths.map((p) => ({ id: p.id, label: labelOf(p) })),
+        ...document.annotations.map((n) => ({ id: n.id, label: n.text.slice(0, 30) || n.id })),
+    ].filter((entry) => !banned.has(entry.id));
+    return (_jsxs("label", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "parent" }), _jsxs("select", { className: `w-40 ${INPUT}`, value: current, onChange: (event) => session.dispatch({ type: "setParent", ids: [id], parentId: event.target.value === "" ? null : event.target.value }), children: [_jsx("option", { value: "", children: "\u2014 none (root) \u2014" }), candidates.map((entry) => (_jsx("option", { value: entry.id, children: entry.label }, entry.id)))] })] }));
+}
+function KindColorFields({ kind, color, onKind, onColor, }) {
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("label", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-neutral-500", children: "kind" }), _jsx("input", { className: `w-full min-w-0 ${INPUT}`, value: kind, onChange: (event) => {
+                            const next = event.target.value.trim();
+                            if (next.length > 0)
+                                onKind(next);
+                        } })] }), _jsx("input", { type: "color", className: "h-7 w-9 shrink-0 cursor-pointer rounded-md border border-white/10 bg-black/40", title: "Display color", value: color ?? "#ffffff", onChange: (event) => onColor(event.target.value) }), color !== undefined ? (_jsx("button", { type: "button", className: "shrink-0 rounded-md bg-white/[0.04] px-1.5 py-1 text-neutral-400 ring-1 ring-inset ring-white/[0.06] transition-colors hover:bg-white/10", title: "Reset to kind default color", onClick: () => onColor(undefined), children: "\u21BA" })) : null] }));
+}
+/**
+ * The right-hand inspector as an isolated, selector-subscribed panel. It reads only the
+ * document + selection slices (via `useStoreSelector`) and the ui store's `pathPoint` slice, so
+ * UI-only churn (gizmo mode, snapping, active tool) or unrelated document edits outside the
+ * selected object's slice no longer rerender it on `EditorChrome`'s own render tick.
+ * @internal — mounted by `EditorChrome` as a right-aside panel.
+ */
+export function InspectorPanel({ session, ui, onClose }) {
+    const document = useStoreSelector(session, (state) => state.document);
+    const selection = useStoreSelector(session, (state) => state.selection, shallowArrayEqual);
+    const pathPoint = useStoreSelector(ui, (state) => state.pathPoint);
+    const ctx = useGameContext();
+    const selectedId = selection[0];
+    const selectedMarker = document.markers.find((marker) => marker.id === selectedId);
+    const selectedVolume = document.volumes.find((volume) => volume.id === selectedId);
+    const selectedPath = selectedId === undefined ? undefined : findEditorPath(document, selectedId);
+    const selectedNote = selectedId === undefined ? undefined : findEditorNote(document, selectedId);
+    const documentMiss = selectedId !== undefined &&
+        selectedMarker === undefined &&
+        selectedVolume === undefined &&
+        selectedPath === undefined &&
+        selectedNote === undefined;
+    const liveEntity = documentMiss ? ctx.scene.entity.get(selectedId) : null;
+    const liveObject = documentMiss && liveEntity === null ? ctx.scene.object.get(selectedId) : null;
+    return (_jsx("aside", { className: "pointer-events-auto flex w-72 min-w-56 max-w-[42vw] resize-x flex-col overflow-auto border-l border-white/[0.08] bg-[#0d0f13]/95 p-3 backdrop-blur-md", style: { direction: "rtl" }, children: _jsxs("div", { className: "flex-1", style: { direction: "ltr" }, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: MICRO, children: "Inspector" }), _jsx("button", { type: "button", className: "ml-auto rounded-md px-2 py-1 text-neutral-500 transition-colors hover:bg-white/10 hover:text-neutral-200", onClick: onClose, "aria-label": "Close inspector panel", children: "\u00D7" })] }), selection.length > 1 ? (_jsxs("div", { className: "mt-3 space-y-2", children: [_jsxs("div", { className: "text-cyan-200", children: [selection.length, " objects selected"] }), _jsx("div", { className: "max-h-32 space-y-0.5 overflow-auto text-neutral-500", children: selection.map((id) => _jsx("div", { className: "truncate", children: id }, id)) }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { type: "button", className: "rounded-md bg-white/[0.07] px-2 py-1 ring-1 ring-inset ring-white/[0.06] transition-colors hover:bg-white/15", onClick: () => session.dispatch({ type: "duplicate", ids: selection }), children: "Duplicate" }), _jsx("button", { type: "button", className: "rounded-md bg-rose-500/15 px-2 py-1 text-rose-200 ring-1 ring-inset ring-rose-400/25 transition-colors hover:bg-rose-500/25", onClick: () => session.dispatch({ type: "removeMany", ids: selection }), children: "Delete all" })] })] })) : null, selection.length <= 1 && selectedMarker !== undefined ? (_jsxs("div", { className: "mt-3 space-y-2", children: [_jsx("input", { className: `w-full ${INPUT} font-medium text-cyan-200`, value: selectedMarker.label ?? "", placeholder: selectedMarker.id, onChange: (event) => session.dispatch({ type: "setMarker", id: selectedMarker.id, patch: { label: event.target.value } }, { coalesce: `label:${selectedMarker.id}` }) }), _jsxs("div", { className: "text-neutral-500", children: [selectedMarker.kind, " \u00B7 ", selectedMarker.id] }), _jsx(KindColorFields, { kind: selectedMarker.kind, color: selectedMarker.color, onKind: (kind) => session.dispatch({ type: "setMarker", id: selectedMarker.id, patch: { kind } }, { coalesce: `kind:${selectedMarker.id}` }), onColor: (color) => session.dispatch({ type: "setMarker", id: selectedMarker.id, patch: { color } }, { coalesce: `color:${selectedMarker.id}` }) }), ["x", "y", "z"].map((axis) => (_jsx(NumberField, { label: axis, value: selectedMarker.position[axis], onCommit: (value) => session.dispatch({ type: "setTransform", id: selectedMarker.id, position: { ...selectedMarker.position, [axis]: value } }, { coalesce: `pos:${axis}:${selectedMarker.id}` }) }, axis))), _jsx(NumberField, { label: "rot\u00B0", step: 5, value: Math.round(((selectedMarker.rotationY ?? 0) * 180) / Math.PI), onCommit: (value) => session.dispatch({ type: "setTransform", id: selectedMarker.id, rotationY: (value * Math.PI) / 180 }, { coalesce: `rot:${selectedMarker.id}` }) }), _jsx(ClearanceField, { meta: selectedMarker.meta, onMeta: (patch, coalesce) => session.dispatch({ type: "setMarker", id: selectedMarker.id, patch: { meta: { ...selectedMarker.meta, ...patch } } }, { coalesce: `${coalesce}:${selectedMarker.id}` }) }), _jsx(TriggerInspector, { target: "marker", meta: selectedMarker.meta, onMeta: (patch, coalesce) => session.dispatch({ type: "setMarker", id: selectedMarker.id, patch: { meta: { ...selectedMarker.meta, ...patch } } }, { coalesce: `${coalesce}:${selectedMarker.id}` }) }), _jsx(ParentField, { session: session, id: selectedMarker.id }), isSceneKind(selectedMarker.kind) ? (_jsx(KindInspector, { object: markerObject(selectedMarker), meta: selectedMarker.meta, onMeta: (patch, coalesce) => session.dispatch({ type: "setMarker", id: selectedMarker.id, patch: { meta: { ...selectedMarker.meta, ...patch } } }, { coalesce: `${coalesce}:${selectedMarker.id}` }) })) : null, _jsx(GeneratorInspector, { meta: selectedMarker.meta, onMeta: (patch, coalesce) => session.dispatch({ type: "setMarker", id: selectedMarker.id, patch: { meta: { ...selectedMarker.meta, ...patch } } }, { coalesce: `${coalesce}:${selectedMarker.id}` }) }), selectedMarker.meta !== undefined ? _jsx("pre", { className: "max-h-48 overflow-auto rounded-md border border-white/[0.06] bg-black/40 p-2 text-[10px] text-neutral-400", children: JSON.stringify(selectedMarker.meta, null, 2) }) : null] })) : null, selection.length <= 1 && selectedVolume !== undefined ? (_jsxs("div", { className: "mt-3 space-y-2", children: [_jsx("input", { className: `w-full ${INPUT} font-medium text-cyan-200`, value: selectedVolume.label ?? "", placeholder: selectedVolume.id, onChange: (event) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { label: event.target.value } }, { coalesce: `label:${selectedVolume.id}` }) }), _jsxs("div", { className: "text-neutral-500", children: [selectedVolume.kind, " \u00B7 ", selectedVolume.shape] }), _jsx(KindColorFields, { kind: selectedVolume.kind, color: selectedVolume.color, onKind: (kind) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { kind } }, { coalesce: `kind:${selectedVolume.id}` }), onColor: (color) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { color } }, { coalesce: `color:${selectedVolume.id}` }) }), ["x", "y", "z"].map((axis) => (_jsx(NumberField, { label: axis, value: selectedVolume.center[axis], onCommit: (value) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { center: { ...selectedVolume.center, [axis]: value } } }, { coalesce: `center:${axis}:${selectedVolume.id}` }) }, axis))), selectedVolume.shape !== "box" ? (_jsx(NumberField, { label: "radius", value: selectedVolume.radius ?? 5, onCommit: (value) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { radius: Math.max(0.5, value) } }, { coalesce: `radius:${selectedVolume.id}` }) })) : null, selectedVolume.shape === "cylinder" ? (_jsx(NumberField, { label: "height", value: selectedVolume.height ?? 4, onCommit: (value) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { height: Math.max(0.5, value) } }, { coalesce: `height:${selectedVolume.id}` }) })) : null, selectedVolume.shape === "box" ? (["x", "y", "z"].map((axis) => (_jsx(NumberField, { label: `half ${axis}`, value: selectedVolume.halfExtents?.[axis] ?? 5, onCommit: (value) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { halfExtents: { x: selectedVolume.halfExtents?.x ?? 5, y: selectedVolume.halfExtents?.y ?? 5, z: selectedVolume.halfExtents?.z ?? 5, [axis]: Math.max(0.5, value) } } }, { coalesce: `he:${axis}:${selectedVolume.id}` }) }, axis)))) : null, _jsx(ClearanceField, { meta: selectedVolume.meta, onMeta: (patch, coalesce) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { meta: { ...selectedVolume.meta, ...patch } } }, { coalesce: `${coalesce}:${selectedVolume.id}` }) }), _jsx(TriggerInspector, { target: "volume", meta: selectedVolume.meta, onMeta: (patch, coalesce) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { meta: { ...selectedVolume.meta, ...patch } } }, { coalesce: `${coalesce}:${selectedVolume.id}` }) }), _jsx(ParentField, { session: session, id: selectedVolume.id }), _jsx(VegetationFields, { volume: selectedVolume, onMeta: (patch, coalesce) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { meta: { ...selectedVolume.meta, ...patch } } }, { coalesce: `${coalesce}:${selectedVolume.id}` }) }), isSceneKind(selectedVolume.kind) ? (_jsx(KindInspector, { object: volumeObject(selectedVolume), meta: selectedVolume.meta, onMeta: (patch, coalesce) => session.dispatch({ type: "setVolume", id: selectedVolume.id, patch: { meta: { ...selectedVolume.meta, ...patch } } }, { coalesce: `${coalesce}:${selectedVolume.id}` }) })) : null] })) : null, selection.length <= 1 && selectedPath !== undefined ? (_jsxs("div", { className: "mt-3 space-y-2", children: [_jsx("input", { className: `w-full ${INPUT} font-medium text-cyan-200`, value: selectedPath.label ?? "", placeholder: selectedPath.id, onChange: (event) => session.dispatch({ type: "setPath", id: selectedPath.id, patch: { label: event.target.value } }, { coalesce: `label:${selectedPath.id}` }) }), _jsxs("div", { className: "text-neutral-500", children: [selectedPath.kind, " \u00B7 ", selectedPath.points.length, " points"] }), _jsx(KindColorFields, { kind: selectedPath.kind, color: selectedPath.color, onKind: (kind) => session.dispatch({ type: "setPath", id: selectedPath.id, patch: { kind } }, { coalesce: `kind:${selectedPath.id}` }), onColor: (color) => session.dispatch({ type: "setPath", id: selectedPath.id, patch: { color } }, { coalesce: `color:${selectedPath.id}` }) }), _jsx(NumberField, { label: "width", value: selectedPath.width ?? 4, onCommit: (value) => session.dispatch({ type: "setPath", id: selectedPath.id, patch: { width: Math.max(0.5, value) } }, { coalesce: `width:${selectedPath.id}` }) }), pathPoint !== null && pathPoint.pathId === selectedPath.id ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "text-neutral-400", children: ["Point ", pathPoint.index + 1, "/", selectedPath.points.length] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { type: "button", className: "rounded-md bg-white/[0.07] px-2 py-1 ring-1 ring-inset ring-white/[0.06] transition-colors hover:bg-white/15", onClick: () => { const at = pathPoint.index; const points = [...selectedPath.points.slice(0, at + 1), { ...selectedPath.points[at] }, ...selectedPath.points.slice(at + 1)]; session.dispatch({ type: "setPath", id: selectedPath.id, patch: { points } }); }, children: "Insert point" }), _jsx("button", { type: "button", className: "rounded-md bg-rose-500/15 px-2 py-1 text-rose-200 ring-1 ring-inset ring-rose-400/25 transition-colors hover:bg-rose-500/25 disabled:opacity-40", disabled: selectedPath.points.length <= 2, onClick: () => { const points = selectedPath.points.filter((_, index) => index !== pathPoint.index); ui.patch({ pathPoint: null }); session.dispatch({ type: "setPath", id: selectedPath.id, patch: { points } }); }, children: "Delete point" })] })] })) : _jsx("div", { className: "text-[10px] text-neutral-500", children: "Click a vertex sphere to edit points." }), isSceneKind(selectedPath.kind) ? (_jsx(KindInspector, { object: pathObject(selectedPath), meta: selectedPath.meta, onMeta: (patch, coalesce) => session.dispatch({ type: "setPath", id: selectedPath.id, patch: { meta: { ...selectedPath.meta, ...patch } } }, { coalesce: `${coalesce}:${selectedPath.id}` }) })) : null, _jsx(ParentField, { session: session, id: selectedPath.id })] })) : null, selection.length <= 1 && selectedNote !== undefined ? (_jsxs("div", { className: "mt-3 space-y-2", children: [_jsxs("div", { className: "text-neutral-500", children: ["note \u00B7 ", selectedNote.id] }), _jsx("textarea", { className: `h-24 w-full ${INPUT} text-neutral-100`, value: selectedNote.text, onChange: (event) => session.dispatch({ type: "setNote", id: selectedNote.id, patch: { text: event.target.value } }, { coalesce: `text:${selectedNote.id}` }) }), ["x", "y", "z"].map((axis) => (_jsx(NumberField, { label: axis, value: selectedNote.position[axis], onCommit: (value) => session.dispatch({ type: "setNote", id: selectedNote.id, patch: { position: { ...selectedNote.position, [axis]: value } } }, { coalesce: `npos:${axis}:${selectedNote.id}` }) }, axis)))] })) : null, liveEntity !== null ? _jsxs("div", { className: "mt-3 space-y-1", children: [_jsx("div", { className: "text-cyan-200", children: liveEntity.name }), _jsxs("div", { className: "text-neutral-500", children: ["live entity \u00B7 ", liveEntity.role, " \u00B7 ", liveEntity.id] }), _jsxs("div", { className: "text-neutral-400", children: ["x ", liveEntity.position[0].toFixed(1), " \u00B7 y ", liveEntity.position[1].toFixed(1), " \u00B7 z ", liveEntity.position[2].toFixed(1)] }), _jsx("div", { className: "text-[10px] text-neutral-500", children: "Live world object \u2014 edit its source data to move it permanently." })] }) : null, liveObject !== null ? _jsxs("div", { className: "mt-3 space-y-1", children: [_jsx("div", { className: "text-cyan-200", children: liveObject.catalogId }), _jsxs("div", { className: "text-neutral-500", children: ["live object \u00B7 ", liveObject.instanceId] }), _jsxs("div", { className: "text-neutral-400", children: ["x ", liveObject.position[0].toFixed(1), " \u00B7 y ", liveObject.position[1].toFixed(1), " \u00B7 z ", liveObject.position[2].toFixed(1)] }), _jsx("div", { className: "text-[10px] text-neutral-500", children: "Live world object \u2014 edit its source data to move it permanently." })] }) : null, selection.length === 0 && liveEntity === null && liveObject === null ? _jsx("div", { className: "mt-3 text-neutral-500", children: "Select an authored or live world object, or + Add to place new ones." }) : null] }) }));
+}

package/dist/MaterialDropZone.d.ts

@@ -0,0 +1,10 @@
+import type { EditorHostApi } from "./session.js";
+/**
+ * Viewport half of drag-drop material assignment: drop a material chip (dragged from the asset
+ * browser's palette) onto a tagged object to assign it, or onto bare ground/terrain to paint that
+ * material at the drop point. No-op when the drag payload isn't a material id.
+ * @internal — mounted by `EditorApp`'s world overlay.
+ */
+export declare const MaterialDropZone: import("react").MemoExoticComponent<({ api }: {
+    api: EditorHostApi;
+}) => null>;

package/dist/MaterialDropZone.js

@@ -0,0 +1,77 @@
+import { useThree } from "@react-three/fiber";
+import { memo, useEffect } from "react";
+import * as THREE from "three";
+import { MATERIAL_DRAG_MIME } from "./AssetBrowser.js";
+const SELECT_TAGS = ["jgEditorId", "jgEntityId", "jgObjectId"];
+const GROUND_PLANE = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
+/**
+ * Viewport half of drag-drop material assignment: drop a material chip (dragged from the asset
+ * browser's palette) onto a tagged object to assign it, or onto bare ground/terrain to paint that
+ * material at the drop point. No-op when the drag payload isn't a material id.
+ * @internal — mounted by `EditorApp`'s world overlay.
+ */
+export const MaterialDropZone = memo(function MaterialDropZone({ api }) {
+    const gl = useThree((state) => state.gl);
+    const camera = useThree((state) => state.camera);
+    const scene = useThree((state) => state.scene);
+    useEffect(() => {
+        const canvas = gl.domElement;
+        const raycaster = new THREE.Raycaster();
+        const ndc = new THREE.Vector2();
+        const planeHit = new THREE.Vector3();
+        const onDragOver = (event) => {
+            if (event.dataTransfer === null || !event.dataTransfer.types.includes(MATERIAL_DRAG_MIME))
+                return;
+            event.preventDefault();
+            event.dataTransfer.dropEffect = "copy";
+        };
+        const onDrop = (event) => {
+            const materialId = event.dataTransfer?.getData(MATERIAL_DRAG_MIME) ?? "";
+            if (materialId.length === 0)
+                return;
+            event.preventDefault();
+            const rect = canvas.getBoundingClientRect();
+            ndc.set(((event.clientX - rect.left) / rect.width) * 2 - 1, -((event.clientY - rect.top) / rect.height) * 2 + 1);
+            raycaster.setFromCamera(ndc, camera);
+            for (const hit of raycaster.intersectObjects(scene.children, true)) {
+                if (!hit.object.isMesh || hit.object.visible === false)
+                    continue;
+                let node = hit.object;
+                let taggedId = null;
+                let gizmoHit = false;
+                while (node !== null && taggedId === null && !gizmoHit) {
+                    if (node.type.startsWith("TransformControls"))
+                        gizmoHit = true;
+                    for (const tag of SELECT_TAGS) {
+                        const id = node.userData[tag];
+                        if (typeof id === "string") {
+                            taggedId = id;
+                            break;
+                        }
+                    }
+                    node = node.parent;
+                }
+                if (gizmoHit)
+                    continue;
+                if (taggedId !== null) {
+                    api.handle({ method: "assign_material", ids: [taggedId], materialId });
+                    return;
+                }
+                break;
+            }
+            const terrain = api.getSession().getState().document.terrain;
+            if (terrain === undefined)
+                return;
+            if (raycaster.ray.intersectPlane(GROUND_PLANE, planeHit) === null)
+                return;
+            api.handle({ method: "paint_terrain", surface: materialId, x: planeHit.x, z: planeHit.z });
+        };
+        canvas.addEventListener("dragover", onDragOver);
+        canvas.addEventListener("drop", onDrop);
+        return () => {
+            canvas.removeEventListener("dragover", onDragOver);
+            canvas.removeEventListener("drop", onDrop);
+        };
+    }, [gl, camera, scene, api]);
+    return null;
+});

package/dist/OutlinerPanel.d.ts

@@ -0,0 +1,14 @@
+import type { EditorSession } from "@jgengine/core/editor/index";
+import type { EditorHostApi } from "./session.js";
+/**
+ * The scene outliner as an isolated, selector-subscribed, virtualized panel. It reads only the
+ * document + selection slices via `useStoreSelector`, so UI-only churn (gizmo mode, snapping, tool
+ * changes) never rerenders it, and it windows its row list with `virtualWindow`, so a scene with
+ * thousands of objects only ever mounts the visible handful of rows. Memoized against its stable
+ * `session`/`api` props.
+ * @internal — mounted by `EditorChrome`.
+ */
+export declare const OutlinerPanel: import("react").MemoExoticComponent<({ session, api, }: {
+    session: EditorSession;
+    api: EditorHostApi;
+}) => import("react").JSX.Element>;

package/dist/OutlinerPanel.js

@@ -0,0 +1,84 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { MATERIAL_DRAG_MIME } from "./AssetBrowser.js";
+import { flattenOutliner } from "./outlinerModel.js";
+import { shallowArrayEqual, useStoreSelector, virtualWindow } from "./useStoreSelector.js";
+const ROW_HEIGHT = 26;
+const INPUT = "rounded-md border border-white/10 bg-black/40 px-2 py-1 outline-none transition-colors placeholder:text-neutral-600 focus:border-cyan-400/60 focus:bg-black/60";
+/**
+ * The scene outliner as an isolated, selector-subscribed, virtualized panel. It reads only the
+ * document + selection slices via `useStoreSelector`, so UI-only churn (gizmo mode, snapping, tool
+ * changes) never rerenders it, and it windows its row list with `virtualWindow`, so a scene with
+ * thousands of objects only ever mounts the visible handful of rows. Memoized against its stable
+ * `session`/`api` props.
+ * @internal — mounted by `EditorChrome`.
+ */
+export const OutlinerPanel = memo(function OutlinerPanel({ session, api, }) {
+    const document = useStoreSelector(session, (state) => state.document);
+    const selection = useStoreSelector(session, (state) => state.selection, shallowArrayEqual);
+    const selectedId = selection[0];
+    const [view, setView] = useState("kind");
+    const [query, setQuery] = useState("");
+    const [collapsedKinds, setCollapsedKinds] = useState({});
+    const [collapsedNodes, setCollapsedNodes] = useState({});
+    const rows = useMemo(() => flattenOutliner(document, { view, query, collapsedKinds, collapsedNodes }), [document, view, query, collapsedKinds, collapsedNodes]);
+    const scrollRef = useRef(null);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [viewportHeight, setViewportHeight] = useState(320);
+    useEffect(() => {
+        const element = scrollRef.current;
+        if (element === null)
+            return;
+        const measure = () => setViewportHeight(element.clientHeight);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    const win = virtualWindow(scrollTop, viewportHeight, ROW_HEIGHT, rows.length);
+    const visible = rows.slice(win.start, win.end);
+    const selectRow = (id, additive) => {
+        if (additive) {
+            const current = session.getState().selection;
+            const next = current.includes(id) ? current.filter((entry) => entry !== id) : [...current, id];
+            session.dispatch({ type: "select", ids: next });
+            return;
+        }
+        session.dispatch({ type: "select", ids: [id] });
+        api.handle({ method: "camera_goto", id });
+    };
+    const [materialDropTarget, setMaterialDropTarget] = useState(null);
+    const materialDropProps = (ids, key) => ({
+        onDragOver: (event) => {
+            if (!event.dataTransfer.types.includes(MATERIAL_DRAG_MIME))
+                return;
+            event.preventDefault();
+            event.dataTransfer.dropEffect = "copy";
+            if (materialDropTarget !== key)
+                setMaterialDropTarget(key);
+        },
+        onDragLeave: () => setMaterialDropTarget((current) => (current === key ? null : current)),
+        onDrop: (event) => {
+            const materialId = event.dataTransfer.getData(MATERIAL_DRAG_MIME);
+            if (materialId.length === 0)
+                return;
+            event.preventDefault();
+            setMaterialDropTarget(null);
+            api.handle({ method: "assign_material", ids: [...ids], materialId });
+        },
+    });
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-1.5 border-b border-white/[0.08] p-2", children: [_jsx("input", { type: "search", value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search objects and kinds\u2026", className: `w-full ${INPUT} px-2.5 py-1.5` }), _jsx("div", { className: "flex gap-0.5 rounded-md bg-black/40 p-0.5 ring-1 ring-inset ring-white/[0.06]", children: ["kind", "tree"].map((mode) => (_jsx("button", { type: "button", className: `flex-1 rounded px-2 py-0.5 text-[10px] transition-colors ${view === mode ? "bg-cyan-500/80 text-white" : "text-neutral-400 hover:text-neutral-200"}`, onClick: () => setView(mode), children: mode === "kind" ? "By kind" : "Tree" }, mode))) })] }), _jsx("div", { ref: scrollRef, className: "min-h-0 flex-1 overflow-auto p-2", onScroll: (event) => setScrollTop(event.currentTarget.scrollTop), children: rows.length === 0 ? (_jsx("div", { className: "p-3 text-center text-neutral-600", children: query.length > 0 ? "No matching objects" : "No objects yet" })) : (_jsx("div", { style: { height: win.totalHeight, position: "relative" }, children: _jsx("div", { style: { transform: `translateY(${win.offsetTop}px)` }, children: visible.map((row) => {
+                            if (row.type === "group") {
+                                return (_jsxs("button", { type: "button", style: { height: ROW_HEIGHT }, className: "flex w-full items-center gap-1 rounded-md px-1.5 text-left font-semibold text-neutral-300 transition-colors hover:bg-white/[0.06]", onClick: () => setCollapsedKinds((previous) => ({ ...previous, [row.kind]: !(previous[row.kind] === true) })), children: [_jsx("span", { className: "w-3 text-neutral-500", children: row.collapsed ? "▸" : "▾" }), _jsx("span", { children: row.kind }), _jsx("span", { className: "ml-auto text-neutral-500", children: row.total })] }, row.key));
+                            }
+                            if (row.type === "kindItem") {
+                                const rowSelected = selectedId !== undefined && row.ids.includes(selectedId);
+                                const cycleIndex = rowSelected ? row.ids.indexOf(selectedId) + 1 : 0;
+                                const dropActive = materialDropTarget === row.key;
+                                return (_jsxs("button", { type: "button", style: { height: ROW_HEIGHT }, className: `block w-full truncate rounded-md pl-5 pr-1.5 text-left transition-colors ${dropActive ? "bg-cyan-500/25 ring-1 ring-inset ring-cyan-300/50" : rowSelected ? "bg-cyan-500/15 text-cyan-100 ring-1 ring-inset ring-cyan-400/20" : "text-neutral-300 hover:bg-white/[0.06]"}`, onClick: (event) => selectRow(row.ids[0], event.ctrlKey || event.metaKey || event.shiftKey), ...materialDropProps(row.ids, row.key), children: [row.label, row.ids.length > 1 ? _jsxs("span", { className: "text-neutral-500", children: [" \u00D7", row.ids.length, rowSelected ? ` · ${cycleIndex}/${row.ids.length} · N next` : ""] }) : null] }, row.key));
+                            }
+                            const rowSelected = selection.includes(row.id);
+                            const dropActive = materialDropTarget === row.key;
+                            return (_jsxs("div", { style: { height: ROW_HEIGHT, paddingLeft: `${row.depth * 12}px` }, className: "flex items-center", children: [row.hasChildren ? (_jsx("button", { type: "button", className: "w-4 shrink-0 text-neutral-500 transition-colors hover:text-neutral-200", onClick: () => setCollapsedNodes((previous) => ({ ...previous, [row.id]: !(previous[row.id] === true) })), children: collapsedNodes[row.id] === true ? "▸" : "▾" })) : _jsx("span", { className: "w-4 shrink-0" }), _jsxs("button", { type: "button", className: `flex-1 truncate rounded-md px-1.5 text-left transition-colors ${dropActive ? "bg-cyan-500/25 ring-1 ring-inset ring-cyan-300/50" : rowSelected ? "bg-cyan-500/15 text-cyan-100 ring-1 ring-inset ring-cyan-400/20" : "text-neutral-300 hover:bg-white/[0.06]"}`, onClick: (event) => selectRow(row.id, event.ctrlKey || event.metaKey || event.shiftKey), title: row.id, ...materialDropProps([row.id], row.key), children: [row.label, _jsx("span", { className: "ml-1 text-[9px] text-neutral-600", children: row.kind })] })] }, row.key));
+                        }) }) })) })] }));
+});

package/dist/PerfProbe.d.ts

@@ -0,0 +1,5 @@
+import type { EditorHostApi } from "./session.js";
+/** In-canvas frame counter: publishes fps/draw-call samples to the editor host every 500ms. */
+export declare const PerfProbe: import("react").MemoExoticComponent<({ api }: {
+    api: EditorHostApi;
+}) => null>;

package/dist/PerfProbe.js

@@ -0,0 +1,34 @@
+import { useFrame, useThree } from "@react-three/fiber";
+import { memo, useRef } from "react";
+import { editorPerfMarks } from "./perfMarks.js";
+const SAMPLE_WINDOW_MS = 500;
+/** In-canvas frame counter: publishes fps/draw-call samples to the editor host every 500ms. */
+export const PerfProbe = memo(function PerfProbe({ api }) {
+    const gl = useThree((state) => state.gl);
+    const framesRef = useRef(0);
+    const windowStartRef = useRef(0);
+    useFrame(() => {
+        const now = performance.now();
+        if (windowStartRef.current === 0)
+            windowStartRef.current = now;
+        framesRef.current += 1;
+        const elapsed = now - windowStartRef.current;
+        if (elapsed < SAMPLE_WINDOW_MS)
+            return;
+        const fps = (framesRef.current * 1000) / elapsed;
+        const authoring = editorPerfMarks.flush();
+        api.setPerf({
+            fps: Math.round(fps * 10) / 10,
+            frameMs: Math.round((elapsed / framesRef.current) * 100) / 100,
+            drawCalls: gl.info.render.calls,
+            triangles: gl.info.render.triangles,
+            sampledAt: now,
+            raycastMs: authoring.raycastMs,
+            rebuildMs: authoring.rebuildMs,
+            authoringMs: authoring.authoringMs,
+        });
+        framesRef.current = 0;
+        windowStartRef.current = now;
+    });
+    return null;
+});

package/dist/PrefabsPanel.d.ts

@@ -0,0 +1,13 @@
+import type { EditorSession } from "@jgengine/core/editor/index";
+import type { EditorHostApi } from "./session.js";
+/**
+ * Reusable object stamps: "make prefab" extracts the current selection into a named, serializable
+ * fragment centered on its own bounds; "insert" stamps a fresh, freshly-id'd instance at the
+ * camera focus point, tagged so `detach_prefab_instance` can later break the link. Prefabs travel
+ * with the document — export/import (or copy the `prefabs` array) to reuse across games.
+ * @internal — mounted by `EditorChrome` as a left-aside tab.
+ */
+export declare function PrefabsPanel({ session, api }: {
+    session: EditorSession;
+    api: EditorHostApi;
+}): import("react").JSX.Element;

package/dist/PrefabsPanel.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { shallowArrayEqual, useStoreSelector } from "./useStoreSelector.js";
+const INPUT = "rounded-md border border-white/10 bg-black/40 px-2 py-1 outline-none transition-colors placeholder:text-neutral-600 focus:border-cyan-400/60 focus:bg-black/60";
+const BTN = "rounded-md bg-white/[0.04] px-2 py-1 text-neutral-300 ring-1 ring-inset ring-white/[0.06] transition-colors hover:bg-white/10 hover:text-neutral-100";
+function newPrefabId() {
+    return `prefab_${Date.now().toString(36)}_${Math.floor(Math.random() * 1296).toString(36)}`;
+}
+/**
+ * Reusable object stamps: "make prefab" extracts the current selection into a named, serializable
+ * fragment centered on its own bounds; "insert" stamps a fresh, freshly-id'd instance at the
+ * camera focus point, tagged so `detach_prefab_instance` can later break the link. Prefabs travel
+ * with the document — export/import (or copy the `prefabs` array) to reuse across games.
+ * @internal — mounted by `EditorChrome` as a left-aside tab.
+ */
+export function PrefabsPanel({ session, api }) {
+    const document = useStoreSelector(session, (state) => state.document);
+    const selection = useStoreSelector(session, (state) => state.selection, shallowArrayEqual);
+    const [name, setName] = useState("");
+    const prefabs = document.prefabs;
+    const makeFromSelection = () => {
+        const trimmed = name.trim();
+        if (trimmed.length === 0 || selection.length === 0)
+            return;
+        session.dispatch({ type: "createPrefab", id: newPrefabId(), name: trimmed, ids: selection });
+        setName("");
+    };
+    const insertAt = (prefab) => {
+        const focus = api.getFocusTarget() ?? { x: 0, y: 0, z: 0 };
+        session.dispatch({ type: "insertPrefab", prefabId: prefab.id, at: focus });
+    };
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2 p-2", children: [_jsxs("div", { className: "flex gap-1", children: [_jsx("input", { className: `min-w-0 flex-1 ${INPUT}`, placeholder: "New prefab name\u2026", value: name, onChange: (event) => setName(event.target.value), onKeyDown: (event) => {
+                            if (event.key === "Enter")
+                                makeFromSelection();
+                        } }), _jsx("button", { type: "button", className: BTN, disabled: selection.length === 0 || name.trim().length === 0, onClick: makeFromSelection, children: "Make prefab" })] }), selection.length === 0 ? (_jsx("div", { className: "text-[10px] text-neutral-500", children: "Select objects, name them, then make a prefab from the selection." })) : null, _jsx("div", { className: "min-h-0 flex-1 space-y-1 overflow-auto pr-1", children: prefabs.length === 0 ? (_jsx("div", { className: "text-neutral-600", children: "No prefabs yet." })) : (prefabs.map((prefab) => {
+                    const count = prefab.fragment.markers.length +
+                        prefab.fragment.volumes.length +
+                        prefab.fragment.paths.length +
+                        prefab.fragment.annotations.length;
+                    return (_jsxs("div", { className: "flex items-center gap-2 rounded-md bg-white/[0.03] p-1.5 ring-1 ring-inset ring-white/[0.06]", children: [_jsxs("div", { className: "min-w-0 flex-1 truncate", children: [_jsx("div", { className: "truncate text-neutral-100", children: prefab.name }), _jsxs("div", { className: "text-[10px] text-neutral-500", children: [count, " objects"] })] }), _jsx("button", { type: "button", className: "shrink-0 rounded-md bg-cyan-500/20 px-2 py-0.5 text-cyan-200 ring-1 ring-inset ring-cyan-400/30 transition-colors hover:bg-cyan-500/30", onClick: () => insertAt(prefab), children: "Insert" }), _jsx("button", { type: "button", className: "shrink-0 rounded-md bg-rose-500/15 px-2 py-0.5 text-rose-200 ring-1 ring-inset ring-rose-400/25 transition-colors hover:bg-rose-500/25", onClick: () => session.dispatch({ type: "deletePrefab", prefabId: prefab.id }), children: "Delete" })] }, prefab.id));
+                })) })] }));
+}

package/dist/RuntimePlayBridge.d.ts

@@ -0,0 +1,18 @@
+import type { EditorHostApi } from "./session.js";
+/**
+ * Publishes live scene entities onto the editor reverse channel and gates `ctx.time` against the
+ * host play-control (pause / step). Mount only in editor play mode.
+ * @internal
+ */
+export declare function RuntimePlayPublisher({ api }: {
+    api: EditorHostApi;
+}): null;
+/**
+ * Play-mode chrome: pause/step controls plus a compact reverse-channel entity inspector.
+ * Transform nudges go through `runtime_set` (document write-back by default).
+ * @internal
+ */
+export declare function RuntimePlayInspectorChrome({ api, onExit, }: {
+    api: EditorHostApi;
+    onExit: () => void;
+}): import("react").JSX.Element;