@jgengine/editor 0.10.0 → 0.12.0

package/dist/DebugDraw.js

@@ -87,25 +87,38 @@ function volumeWireframe(volume) {
     pushRing(out, radius, 0, "z");
     return new Float32Array(out);
 }
-const MarkerMesh = memo(function MarkerMesh({ marker, selected, onSelect, sharedSphere, sharedCone, groundHeightAt, }) {
+/** Shell-cyan selection fill — replaces the old white debug tint. */
+const SELECTION_COLOR = "#67e8f9";
+/** Pre-selection hover fill (softer cyan, not selected). */
+const HOVER_COLOR = "#22d3ee";
+function emphasisColor(selected, hovered, base) {
+    if (selected)
+        return SELECTION_COLOR;
+    if (hovered)
+        return HOVER_COLOR;
+    return base;
+}
+const MarkerMesh = memo(function MarkerMesh({ marker, selected, hovered, onSelect, sharedSphere, sharedCone, groundHeightAt, }) {
     const color = colorFor(marker.kind, marker.color);
-    const scale = selected ? 1.25 : 1;
+    const scale = selected ? 1.28 : hovered ? 1.12 : 1;
     const baseY = groundHeightAt !== undefined ? groundHeightAt(marker.position.x, marker.position.z) : marker.position.y;
+    const fill = emphasisColor(selected, hovered, color);
     return (_jsxs("group", { position: [marker.position.x, baseY + 1.2, marker.position.z], "rotation-y": marker.rotationY ?? 0, scale: scale, userData: { jgEditorId: marker.id }, onClick: (event) => {
             event.stopPropagation();
             onSelect(marker.id);
-        }, children: [_jsx("mesh", { geometry: sharedSphere, children: _jsx("meshBasicMaterial", { color: selected ? "#ffffff" : color }) }), _jsx("mesh", { position: [0, 1.35, 0], geometry: sharedCone, children: _jsx("meshBasicMaterial", { color: color }) })] }));
+        }, children: [_jsx("mesh", { geometry: sharedSphere, children: _jsx("meshBasicMaterial", { color: fill, transparent: true, opacity: selected ? 1 : hovered ? 0.9 : 1 }) }), selected || hovered ? (_jsx("mesh", { geometry: sharedSphere, scale: 1.18, children: _jsx("meshBasicMaterial", { color: fill, transparent: true, opacity: selected ? 0.28 : 0.18, depthWrite: false }) })) : null, _jsx("mesh", { position: [0, 1.35, 0], geometry: sharedCone, children: _jsx("meshBasicMaterial", { color: selected || hovered ? fill : color }) })] }));
 });
 /** Shape-true wireframe — ground ring plus vertical profile for spheres, cylinders, and boxes. */
-const VolumeShapeLines = memo(function VolumeShapeLines({ volume, selected, onSelect, }) {
+const VolumeShapeLines = memo(function VolumeShapeLines({ volume, selected, hovered, onSelect, }) {
     const color = colorFor(volume.kind, volume.color);
     const object = useMemo(() => {
         const geometry = new THREE.BufferGeometry();
         geometry.setAttribute("position", new THREE.BufferAttribute(volumeWireframe(volume), 3));
         const material = new THREE.LineBasicMaterial({
-            color: selected ? "#ffffff" : color,
+            color: emphasisColor(selected, hovered, color),
             transparent: true,
-            opacity: selected ? 1 : 0.75,
+            opacity: selected ? 1 : hovered ? 0.9 : 0.75,
+            linewidth: selected || hovered ? 2 : 1,
         });
         return new THREE.LineSegments(geometry, material);
     }, [
@@ -117,6 +130,7 @@ const VolumeShapeLines = memo(function VolumeShapeLines({ volume, selected, onSe
         volume.halfExtents?.z,
         color,
         selected,
+        hovered,
     ]);
     useEffect(() => () => {
         object.geometry.dispose();
@@ -127,13 +141,13 @@ const VolumeShapeLines = memo(function VolumeShapeLines({ volume, selected, onSe
             onSelect(volume.id);
         }, children: _jsx("primitive", { object: object }) }));
 });
-const PathRibbon = memo(function PathRibbon({ path, selected, activePointIndex, onSelect, groundHeightAt, }) {
+const PathRibbon = memo(function PathRibbon({ path, selected, hovered, activePointIndex, onSelect, groundHeightAt, }) {
     const color = colorFor(path.kind, path.color);
     const yAt = (point) => groundHeightAt !== undefined ? groundHeightAt(point.x, point.z) : point.y;
     const object = useMemo(() => {
         if (path.points.length < 2)
             return null;
-        const stride = !selected && path.points.length > 80 ? 2 : 1;
+        const stride = !selected && !hovered && path.points.length > 80 ? 2 : 1;
         const picked = [];
         for (let i = 0; i < path.points.length; i += stride) {
             picked.push(path.points[i]);
@@ -151,12 +165,12 @@ const PathRibbon = memo(function PathRibbon({ path, selected, activePointIndex,
         const geometry = new THREE.BufferGeometry();
         geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
         const material = new THREE.LineBasicMaterial({
-            color: selected ? "#ffffff" : color,
+            color: emphasisColor(selected, hovered, color),
             transparent: true,
-            opacity: selected ? 1 : 0.85,
+            opacity: selected ? 1 : hovered ? 0.92 : 0.85,
         });
         return new THREE.Line(geometry, material);
-    }, [path.points, color, selected, groundHeightAt]);
+    }, [path.points, color, selected, hovered, groundHeightAt]);
     useEffect(() => () => {
         if (object === null)
             return;
@@ -172,13 +186,14 @@ const PathRibbon = memo(function PathRibbon({ path, selected, activePointIndex,
                 ? path.points.map((point, index) => (_jsxs("mesh", { position: [point.x, yAt(point) + 0.8, point.z], children: [_jsx("sphereGeometry", { args: [index === activePointIndex ? 0.7 : 0.45, 8, 8] }), _jsx("meshBasicMaterial", { color: index === activePointIndex ? "#22d3ee" : "#ffffff" })] }, index)))
                 : null] }));
 });
-const NotePin = memo(function NotePin({ note, selected, onSelect, groundHeightAt, }) {
+const NotePin = memo(function NotePin({ note, selected, hovered, onSelect, groundHeightAt, }) {
     const color = colorFor("note", note.color);
     const baseY = groundHeightAt !== undefined ? groundHeightAt(note.position.x, note.position.z) : note.position.y;
+    const fill = emphasisColor(selected, hovered, color);
     return (_jsxs("group", { position: [note.position.x, baseY + 1, note.position.z], userData: { jgEditorId: note.id }, onClick: (event) => {
             event.stopPropagation();
             onSelect(note.id);
-        }, children: [_jsxs("mesh", { scale: selected ? 1.3 : 1, children: [_jsx("octahedronGeometry", { args: [0.6] }), _jsx("meshBasicMaterial", { color: selected ? "#ffffff" : color })] }), _jsx(Html, { center: true, distanceFactor: 40, style: { pointerEvents: "none" }, children: _jsx("div", { style: {
+        }, children: [_jsxs("mesh", { scale: selected ? 1.32 : hovered ? 1.15 : 1, children: [_jsx("octahedronGeometry", { args: [0.6] }), _jsx("meshBasicMaterial", { color: fill, transparent: true, opacity: selected ? 1 : hovered ? 0.9 : 1 })] }), selected || hovered ? (_jsxs("mesh", { scale: 1.22, children: [_jsx("octahedronGeometry", { args: [0.6] }), _jsx("meshBasicMaterial", { color: fill, transparent: true, opacity: selected ? 0.28 : 0.16, depthWrite: false })] })) : null, _jsx(Html, { center: true, distanceFactor: 40, style: { pointerEvents: "none" }, children: _jsx("div", { style: {
                         transform: "translateY(-24px)",
                         whiteSpace: "nowrap",
                         maxWidth: "220px",
@@ -216,8 +231,9 @@ export function PathDraftPreview({ points }) {
     return (_jsxs("group", { children: [object !== null ? _jsx("primitive", { object: object }) : null, points.map((point, index) => (_jsxs("mesh", { position: [point.x, point.y + 0.8, point.z], children: [_jsx("sphereGeometry", { args: [0.5, 8, 8] }), _jsx("meshBasicMaterial", { color: "#22d3ee" })] }, index)))] }));
 }
 /** Renders every visible marker, volume, path, and note from a document as in-scene 3D gizmos. */
-export function EditorLayerOverlays({ document, visibility, selection, onSelect, activePathPoint, groundHeightAt, }) {
+export function EditorLayerOverlays({ document, visibility, selection, hoverId = null, onSelect, activePathPoint, groundHeightAt, }) {
     const selected = useMemo(() => new Set(selection), [selection]);
+    const isHovered = (id) => hoverId === id && !selected.has(id);
     const sharedSphere = useMemo(() => new THREE.SphereGeometry(0.85, MARKER_SEGMENTS, MARKER_SEGMENTS), []);
     const sharedCone = useMemo(() => new THREE.ConeGeometry(0.35, 0.9, 6), []);
     useEffect(() => () => {
@@ -225,9 +241,11 @@ export function EditorLayerOverlays({ document, visibility, selection, onSelect,
         sharedCone.dispose();
     }, [sharedSphere, sharedCone]);
     const visibilityKey = useMemo(() => JSON.stringify(visibility), [visibility]);
-    const volumes = useMemo(() => document.volumes.filter((volume) => isVisible(visibility, volume.kind)), [document.volumes, visibilityKey, visibility]);
-    const paths = useMemo(() => document.paths.filter((path) => isVisible(visibility, path.kind)), [document.paths, visibilityKey, visibility]);
-    const markers = useMemo(() => document.markers.filter((marker) => isVisible(visibility, marker.kind)), [document.markers, visibilityKey, visibility]);
-    const notes = useMemo(() => (isVisible(visibility, "note") ? document.annotations : []), [document.annotations, visibilityKey, visibility]);
-    return (_jsxs("group", { children: [volumes.map((volume) => (_jsx(VolumeShapeLines, { volume: volume, selected: selected.has(volume.id), onSelect: onSelect }, volume.id))), paths.map((path) => (_jsx(PathRibbon, { path: path, selected: selected.has(path.id), activePointIndex: activePathPoint != null && activePathPoint.pathId === path.id ? activePathPoint.index : null, onSelect: onSelect, groundHeightAt: groundHeightAt }, path.id))), markers.map((marker) => (_jsx(MarkerMesh, { marker: marker, selected: selected.has(marker.id), onSelect: onSelect, sharedSphere: sharedSphere, sharedCone: sharedCone, groundHeightAt: groundHeightAt }, marker.id))), notes.map((note) => (_jsx(NotePin, { note: note, selected: selected.has(note.id), onSelect: onSelect, groundHeightAt: groundHeightAt }, note.id)))] }));
+    const volumes = useMemo(() => document.volumes.filter((volume) => isVisible(visibility, volume.kind) && volume.hidden !== true), [document.volumes, visibilityKey, visibility]);
+    const paths = useMemo(() => document.paths.filter((path) => isVisible(visibility, path.kind) && path.hidden !== true), [document.paths, visibilityKey, visibility]);
+    const markers = useMemo(() => document.markers.filter((marker) => isVisible(visibility, marker.kind) && marker.hidden !== true), [document.markers, visibilityKey, visibility]);
+    const notes = useMemo(() => isVisible(visibility, "note")
+        ? document.annotations.filter((note) => note.hidden !== true)
+        : [], [document.annotations, visibilityKey, visibility]);
+    return (_jsxs("group", { children: [volumes.map((volume) => (_jsx(VolumeShapeLines, { volume: volume, selected: selected.has(volume.id), hovered: isHovered(volume.id), onSelect: onSelect }, volume.id))), paths.map((path) => (_jsx(PathRibbon, { path: path, selected: selected.has(path.id), hovered: isHovered(path.id), activePointIndex: activePathPoint != null && activePathPoint.pathId === path.id ? activePathPoint.index : null, onSelect: onSelect, groundHeightAt: groundHeightAt }, path.id))), markers.map((marker) => (_jsx(MarkerMesh, { marker: marker, selected: selected.has(marker.id), hovered: isHovered(marker.id), onSelect: onSelect, sharedSphere: sharedSphere, sharedCone: sharedCone, groundHeightAt: groundHeightAt }, marker.id))), notes.map((note) => (_jsx(NotePin, { note: note, selected: selected.has(note.id), hovered: isHovered(note.id), onSelect: onSelect, groundHeightAt: groundHeightAt }, note.id)))] }));
 }

package/dist/EditorApp.d.ts

@@ -1,11 +1,13 @@
 import { type ComponentType } from "react";
 import type { EditorCatalogDefinition, EditorLayersInput } from "@jgengine/core/editor/index";
 import type { PlayableGame } from "@jgengine/shell/registry";
+import { type EditorNetworkPresenceInput } from "./networkSnapshot.js";
 import { type EditorRunMode } from "./session.js";
 /** Props for mounting the scene editor over a playable game. */
 export interface EditorAppProps {
     gameId: string;
     playable: PlayableGame;
+    /** Layers to open. Defaults to `playable.editorLayers`, so a game shipping its document via `defineGame({ editorLayers })` needs no extra wiring. */
     layers?: EditorLayersInput;
     /** Game-exported gameplay catalog definitions (schemas + defaults) for the Data panel / catalog RPC. */
     catalogs?: readonly EditorCatalogDefinition[];
@@ -15,6 +17,12 @@ export interface EditorAppProps {
         mode: EditorRunMode;
         onExit: () => void;
     }> | null;
+    /**
+     * Optional live multiplayer presence/session feed for the Network workspace.
+     * Adapter config always comes from `playable.game.multiplayer`; this only supplies real
+     * session identity and presence rows. Omit when the host has nothing live — the panel stays honest.
+     */
+    networkPresence?: EditorNetworkPresenceInput;
 }
 /** Persists an exported document JSON; resolves with where it landed or why it failed. */
 export type EditorSaveFn = (json: string) => Promise<{
@@ -23,4 +31,4 @@ export type EditorSaveFn = (json: string) => Promise<{
     error?: string;
 }>;
 /** Top-level scene editor: author spawns/zones/paths/notes visually over edit, walk, or play modes. */
-export declare function EditorApp({ gameId, playable, layers, catalogs, save, modeChip }: EditorAppProps): import("react").JSX.Element;
+export declare function EditorApp({ gameId, playable, layers, catalogs, save, modeChip, networkPresence }: EditorAppProps): import("react").JSX.Element;

package/dist/EditorApp.js

@@ -2,20 +2,28 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { editorDocumentBounds, findEditorMarker } from "@jgengine/core/editor/index";
 import { getSaveEndpoint } from "@jgengine/core/devtools/saveEndpoint";
+import { listActiveHudLayouts, subscribeActiveHudLayouts } from "@jgengine/core/ui/hudLayout";
+import { HudLayoutPersistProvider } from "@jgengine/react/hudLayoutPersist";
 import { useGameContext } from "@jgengine/react/provider";
 import { GamePlayerShell } from "@jgengine/shell/GamePlayerShell";
 import { assetsFromCatalog } from "./AssetBrowser.js";
 import { EditorCameraDriver } from "./EditorCameraDriver.js";
 import { EditorChrome } from "./EditorChrome.js";
 import { EditorLayerOverlays, PathDraftPreview } from "./DebugDraw.js";
+import { AssetDropZone } from "./AssetDropZone.js";
 import { MaterialDropZone } from "./MaterialDropZone.js";
 import { PerfProbe } from "./PerfProbe.js";
 import { ScatterPreview } from "./ScatterPreview.js";
+import { CityPreview } from "./CityPreview.js";
 import { SelectionGizmo, ViewportSelect } from "./SelectionGizmo.js";
+import { TerrainReadout } from "./TerrainReadout.js";
+import { TerrainReadoutHud } from "./TerrainReadoutHud.js";
 import { TerrainSculpt } from "./TerrainSculpt.js";
+import { createTerrainReadoutStore } from "./terrainReadoutStore.js";
 import { RuntimePlayInspectorChrome, RuntimePlayPublisher } from "./RuntimePlayBridge.js";
+import { buildEditorNetworkSnapshot, } from "./networkSnapshot.js";
 import { createEditorHost } from "./session.js";
-import { createEditorUiStore } from "./uiStore.js";
+import { createEditorUiStore, } from "./uiStore.js";
 import { useF2Chord } from "./useF2Chord.js";
 import { shallowArrayEqual, useStoreSelector } from "./useStoreSelector.js";
 function endpointSaver(gameId) {
@@ -82,7 +90,29 @@ function savePrefs(gameId, prefs) {
         return;
     }
 }
-function EditorWorldOverlay({ api, ui, world, }) {
+/** Default readout region half-extent when a world declares no terrain bounds. */
+const DEFAULT_READOUT_HALF = 64;
+/**
+ * Derives the XZ region the terrain-readability overlay samples: the sculpt snapshot's rect if the
+ * world carries one, else the terrain descriptor's centered bounds, else a default square. Guides are
+ * editor visualization, not authored content — the region is inferred, never stored in the scene.
+ */
+function readoutRegionFor(world) {
+    if (world !== undefined && world.kind === "environment") {
+        const sculpt = world.sculpt;
+        if (sculpt !== undefined) {
+            return { minX: sculpt.bounds.minX, minZ: sculpt.bounds.minZ, maxX: sculpt.bounds.maxX, maxZ: sculpt.bounds.maxZ };
+        }
+        const bounds = world.terrain?.bounds;
+        if (bounds !== undefined) {
+            return { minX: -bounds.w / 2, minZ: -bounds.d / 2, maxX: bounds.w / 2, maxZ: bounds.d / 2 };
+        }
+    }
+    return { minX: -DEFAULT_READOUT_HALF, minZ: -DEFAULT_READOUT_HALF, maxX: DEFAULT_READOUT_HALF, maxZ: DEFAULT_READOUT_HALF };
+}
+/** Idle window before the terrain overlay rebuilds off the edited field — bounds rebuild frequency during sculpting. */
+const READOUT_REBUILD_MS = 250;
+function EditorWorldOverlay({ api, ui, world, readout, }) {
     const session = api.getSession();
     const ctx = useGameContext();
     const visibilityStore = useMemo(() => ({ getState: api.getVisibility, subscribe: api.subscribeVisibility }), [api]);
@@ -90,10 +120,40 @@ function EditorWorldOverlay({ api, ui, world, }) {
     const selection = useStoreSelector(session, (s) => s.selection, shallowArrayEqual);
     const visibility = useStoreSelector(visibilityStore, (v) => v);
     const showGrid = useStoreSelector(ui, (s) => s.showGrid);
+    const showContours = useStoreSelector(ui, (s) => s.showContours);
+    const showSurfaceGrid = useStoreSelector(ui, (s) => s.showSurfaceGrid);
+    const showElevation = useStoreSelector(ui, (s) => s.showElevation);
     const pathPoint = useStoreSelector(ui, (s) => s.pathPoint);
     const pathDraft = useStoreSelector(ui, (s) => s.pathDraft);
+    const hoverId = useStoreSelector(ui, (s) => s.hoverId);
     const groundHeightAt = useCallback((x, z) => ctx.world.groundHeightAt(x, z), [ctx.world]);
-    return (_jsxs(_Fragment, { children: [_jsx(PerfProbe, { api: api }), _jsx(EditorCameraDriver, { api: api }), _jsx(ViewportSelect, { api: api, ui: ui }), _jsx(MaterialDropZone, { api: api }), _jsx(TerrainSculpt, { api: api, ui: ui, world: world }), _jsx(ScatterPreview, { api: api }), showGrid ? _jsx("gridHelper", { args: [400, 80, "#3b4252", "#20242e"], position: [0, 0.05, 0] }) : null, _jsx(EditorLayerOverlays, { document: document, visibility: visibility, selection: selection, onSelect: (id) => session.dispatch({ type: "select", ids: [id] }), activePathPoint: pathPoint, groundHeightAt: groundHeightAt }), pathDraft.length > 0 ? _jsx(PathDraftPreview, { points: pathDraft }) : null, _jsx(SelectionGizmo, { session: session, ui: ui, groundSnap: groundHeightAt })] }));
+    // Publish the live composed ground field so the `bake_minimap` RPC can rasterize authored terrain.
+    // Only available while the viewport is mounted; the cleanup nulls it so headless callers get null.
+    useEffect(() => {
+        api.setTerrainSampler(ctx.world.ground);
+        return () => api.setTerrainSampler(null);
+    }, [api, ctx.world]);
+    const readoutRegion = useMemo(() => readoutRegionFor(world), [world]);
+    const readoutActive = showContours || showSurfaceGrid || showElevation;
+    // Debounced terrain version: rebuilds the overlay after sculpt edits settle, not every stroke frame.
+    const [terrainVersion, setTerrainVersion] = useState(0);
+    useEffect(() => {
+        if (!readoutActive)
+            return;
+        setTerrainVersion((value) => value + 1);
+        let timer = null;
+        const unsubscribe = session.subscribe(() => {
+            if (timer !== null)
+                clearTimeout(timer);
+            timer = setTimeout(() => setTerrainVersion((value) => value + 1), READOUT_REBUILD_MS);
+        });
+        return () => {
+            if (timer !== null)
+                clearTimeout(timer);
+            unsubscribe();
+        };
+    }, [session, readoutActive]);
+    return (_jsxs(_Fragment, { children: [_jsx(PerfProbe, { api: api }), _jsx(EditorCameraDriver, { api: api }), _jsx(ViewportSelect, { api: api, ui: ui }), _jsx(MaterialDropZone, { api: api }), _jsx(AssetDropZone, { api: api }), _jsx(TerrainSculpt, { api: api, ui: ui, world: world }), _jsx(ScatterPreview, { api: api }), _jsx(CityPreview, { api: api }), showGrid ? _jsx("gridHelper", { args: [400, 80, "#3b4252", "#20242e"], position: [0, 0.05, 0] }) : null, readoutActive ? (_jsx(TerrainReadout, { groundHeightAt: groundHeightAt, region: readoutRegion, showContours: showContours, showSurfaceGrid: showSurfaceGrid, version: terrainVersion, readout: readout })) : null, _jsx(EditorLayerOverlays, { document: document, visibility: visibility, selection: selection, hoverId: hoverId, onSelect: (id) => session.dispatch({ type: "select", ids: [id] }), activePathPoint: pathPoint, groundHeightAt: groundHeightAt }), pathDraft.length > 0 ? _jsx(PathDraftPreview, { points: pathDraft }) : null, _jsx(SelectionGizmo, { session: session, ui: ui, groundSnap: groundHeightAt })] }));
 }
 /** Default skin for the play/walk escape chip; swap via `EditorAppProps.modeChip`, or pass `null` to hide it (F2+E still exits). */
 function EditorModeChip({ mode, onExit }) {
@@ -109,6 +169,51 @@ function EditorModeChipHost({ api, mode, chip, }) {
     const Chip = chip;
     return _jsx(Chip, { mode: mode, onExit: onExit });
 }
+/**
+ * HUD-layout authoring surface, mounted in `hud` run mode over the game's real `HudCanvas`.
+ * Enables drag/resize editing on every mounted HUD layout (including ones that mount after this
+ * opens), so panel placement is reachable straight from the editor — no separate F2+C chord. Layout
+ * edits flow through the injected `HudLayoutPersistProvider` (`onPanelCommit` → undoable
+ * `setUiPanel`). When the author finishes (the canvas "Done" button, Esc, or F2+C toggles editing
+ * off), HUD mode exits back to edit. F2+E also exits. Editing is turned back off for every layout on
+ * unmount.
+ */
+function HudLayoutEditingHost({ api }) {
+    const exit = useCallback(() => api.setMode("edit"), [api]);
+    useF2Chord("KeyE", exit);
+    useEffect(() => {
+        const tracked = new Map();
+        let disposed = false;
+        const arm = (layout) => {
+            if (tracked.has(layout))
+                return;
+            // Force editing on first, then watch: a later transition back to `editing: false`
+            // (author pressed Done/Esc/F2+C) is the signal to leave HUD mode.
+            layout.setEditing(true);
+            const unsubscribe = layout.subscribe((state) => {
+                if (!disposed && !state.editing)
+                    exit();
+            });
+            tracked.set(layout, unsubscribe);
+        };
+        const sync = () => {
+            for (const layout of listActiveHudLayouts())
+                arm(layout);
+        };
+        sync();
+        const unsubscribeRegistry = subscribeActiveHudLayouts(sync);
+        return () => {
+            disposed = true;
+            unsubscribeRegistry();
+            for (const [layout, unsubscribe] of tracked) {
+                unsubscribe();
+                layout.setEditing(false);
+            }
+        };
+    }, [exit]);
+    const hasPanels = listActiveHudLayouts().length > 0;
+    return (_jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-4 z-[60] flex justify-center", children: _jsxs("div", { className: "pointer-events-auto flex items-center gap-3 rounded-full border border-white/10 bg-black/80 px-4 py-1.5 text-[11px] text-neutral-100 shadow-lg shadow-black/40 backdrop-blur-md", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-cyan-400 shadow-[0_0_6px_rgba(34,211,238,0.8)]" }), hasPanels ? "HUD layout — drag panels to place; edits save to the scene" : "This game mounts no HUD panels to lay out"] }), _jsx("button", { type: "button", className: "rounded-full bg-white/[0.06] px-2.5 py-1 ring-1 ring-inset ring-white/10 transition-colors hover:bg-white/15", onClick: exit, children: "Done (F2+E)" })] }) }));
+}
 /** Prefer a grounded spawn for the first shot — full-world framing clips past default far=300. */
 function resolveEditorCamera(document) {
     const spawn = findEditorMarker(document, "player_spawn") ??
@@ -139,13 +244,22 @@ function resolveEditorCamera(document) {
     };
 }
 /** Top-level scene editor: author spawns/zones/paths/notes visually over edit, walk, or play modes. */
-export function EditorApp({ gameId, playable, layers, catalogs, save, modeChip }) {
+export function EditorApp({ gameId, playable, layers, catalogs, save, modeChip, networkPresence }) {
     const resolvedModeChip = modeChip === undefined ? EditorModeChip : modeChip;
     const saveFn = useMemo(() => save ?? endpointSaver(gameId), [save, gameId]);
+    const networkSnapshot = useMemo(() => buildEditorNetworkSnapshot({
+        gameId,
+        multiplayer: playable.game.multiplayer,
+        presence: networkPresence,
+    }), [gameId, playable, networkPresence]);
     const uiStoreRef = useRef(null);
     if (uiStoreRef.current === null)
         uiStoreRef.current = createEditorUiStore();
     const ui = uiStoreRef.current;
+    const readoutStoreRef = useRef(null);
+    if (readoutStoreRef.current === null)
+        readoutStoreRef.current = createTerrainReadoutStore();
+    const readout = readoutStoreRef.current;
     const [mode, setModeState] = useState("edit");
     const catalogAssets = useMemo(() => {
         try {
@@ -156,15 +270,20 @@ export function EditorApp({ gameId, playable, layers, catalogs, save, modeChip }
             return [];
         }
     }, [playable]);
+    const resolvedLayers = layers ?? playable.editorLayers;
     const host = useMemo(() => {
         const created = createEditorHost({
             gameId,
-            layers,
+            layers: resolvedLayers,
             catalogs,
             assets: catalogAssets,
         });
-        return { ...created, baselineJson: created.session.exportJson(true) };
-    }, [gameId, layers, catalogs, catalogAssets]);
+        return {
+            ...created,
+            baselineJson: created.session.exportJson(true),
+            baselineDocument: created.session.getState().document,
+        };
+    }, [gameId, resolvedLayers, catalogs, catalogAssets]);
     useEffect(() => host.dispose, [host]);
     useEffect(() => host.api.subscribeMode(setModeState), [host]);
     const [pendingDraft, setPendingDraft] = useState(null);
@@ -208,17 +327,33 @@ export function EditorApp({ gameId, playable, layers, catalogs, save, modeChip }
             host.api.setVisibility({ ...host.api.getVisibility(), ...prefs.visibility });
         }
         ui.patch({
+            ...(prefs.gizmoSpace === undefined ? {} : { gizmoSpace: prefs.gizmoSpace }),
+            ...(prefs.gizmoPivot === undefined ? {} : { gizmoPivot: prefs.gizmoPivot }),
             ...(prefs.snapMode === undefined ? {} : { snapMode: prefs.snapMode }),
             ...(prefs.gridSize === undefined ? {} : { gridSize: prefs.gridSize }),
+            ...(prefs.rotationSnapDeg === undefined ? {} : { rotationSnapDeg: prefs.rotationSnapDeg }),
+            ...(prefs.scaleSnap === undefined ? {} : { scaleSnap: prefs.scaleSnap }),
+            ...(prefs.cameraProjection === undefined ? {} : { cameraProjection: prefs.cameraProjection }),
             ...(prefs.showGrid === undefined ? {} : { showGrid: prefs.showGrid }),
+            ...(prefs.showContours === undefined ? {} : { showContours: prefs.showContours }),
+            ...(prefs.showSurfaceGrid === undefined ? {} : { showSurfaceGrid: prefs.showSurfaceGrid }),
+            ...(prefs.showElevation === undefined ? {} : { showElevation: prefs.showElevation }),
         });
         const persist = () => {
             const state = ui.getState();
             savePrefs(gameId, {
                 visibility: host.api.getVisibility(),
+                gizmoSpace: state.gizmoSpace,
+                gizmoPivot: state.gizmoPivot,
                 snapMode: state.snapMode,
                 gridSize: state.gridSize,
+                rotationSnapDeg: state.rotationSnapDeg,
+                scaleSnap: state.scaleSnap,
+                cameraProjection: state.cameraProjection,
                 showGrid: state.showGrid,
+                showContours: state.showContours,
+                showSurfaceGrid: state.showSurfaceGrid,
+                showElevation: state.showElevation,
             });
         };
         const unsubscribeVisibility = host.api.subscribeVisibility(persist);
@@ -248,6 +383,7 @@ export function EditorApp({ gameId, playable, layers, catalogs, save, modeChip }
         };
     }, [gameId]);
     const initialCamera = useMemo(() => resolveEditorCamera(host.session.getState().document), [host]);
+    const cameraProjection = useStoreSelector(ui, (state) => state.cameraProjection);
     const editorPlayable = useMemo(() => {
         const frozenLoop = {
             onInit: playable.loop.onInit,
@@ -259,6 +395,53 @@ export function EditorApp({ gameId, playable, layers, catalogs, save, modeChip }
             onReset: playable.loop.onReset,
             onDispose: playable.loop.onDispose,
         };
+        const { target, span, far } = initialCamera;
+        // Free-orbit inspection camera shared by edit and HUD-layout modes: no pointer lock, so the HUD
+        // panels stay draggable while the authored world renders behind them. Orthographic projection
+        // remounts the R3F canvas (Canvas.orthographic is mount-time); zoom scales with scene span so
+        // large worlds stay framed without a hand-tuned default.
+        const orthoZoom = Math.max(4, Math.min(80, 420 / Math.max(span, 1)));
+        const inspectionCamera = {
+            rig: "inspection",
+            projection: cameraProjection,
+            frustum: {
+                fov: 55,
+                near: 0.5,
+                far,
+                ...(cameraProjection === "orthographic" ? { zoom: orthoZoom } : {}),
+            },
+            inspection: {
+                target,
+                initialDistance: span,
+                initialPosition: {
+                    x: target.x + span * 0.35,
+                    y: target.y + span * 0.55,
+                    z: target.z + span * 0.75,
+                },
+                minDistance: 4,
+                maxDistance: Math.max(far * 0.9, span * 8),
+                pan: true,
+                rotateSpeed: 0.7,
+                zoomSpeed: 1.1,
+                minPolarAngle: 0.15,
+                maxPolarAngle: Math.PI * 0.48,
+            },
+        };
+        if (mode === "hud") {
+            const BaseUI = playable.GameUI;
+            return {
+                ...playable,
+                GameUI: function EditorHudUi() {
+                    return (_jsxs(_Fragment, { children: [BaseUI !== undefined ? _jsx(BaseUI, {}) : null, _jsx(HudLayoutEditingHost, { api: host.api })] }));
+                },
+                WorldOverlay: function EditorHudOverlay() {
+                    return _jsx(PerfProbe, { api: host.api });
+                },
+                shadows: false,
+                loop: frozenLoop,
+                camera: inspectionCamera,
+            };
+        }
         if (mode === "play") {
             const BaseUI = playable.GameUI;
             const BaseOverlay = playable.WorldOverlay;
@@ -268,7 +451,7 @@ export function EditorApp({ gameId, playable, layers, catalogs, save, modeChip }
                 GameUI: function EditorPlayUi() {
                     const onExit = useCallback(() => host.api.setMode("edit"), []);
                     useF2Chord("KeyE", onExit);
-                    return (_jsxs(_Fragment, { children: [BaseUI !== undefined ? _jsx(BaseUI, {}) : null, useBuiltinPlayChrome ? (_jsx(RuntimePlayInspectorChrome, { api: host.api, onExit: onExit })) : (_jsx(EditorModeChipHost, { api: host.api, mode: "play", chip: resolvedModeChip }))] }));
+                    return (_jsxs(_Fragment, { children: [BaseUI !== undefined ? _jsx(BaseUI, {}) : null, useBuiltinPlayChrome ? (_jsx(RuntimePlayInspectorChrome, { gameId: gameId, api: host.api, onExit: onExit })) : (_jsx(EditorModeChipHost, { api: host.api, mode: "play", chip: resolvedModeChip }))] }));
                 },
                 WorldOverlay: function EditorPlayOverlay({ ctx }) {
                     return (_jsxs(_Fragment, { children: [BaseOverlay !== undefined ? _jsx(BaseOverlay, { ctx: ctx }) : null, _jsx(PerfProbe, { api: host.api }), _jsx(RuntimePlayPublisher, { api: host.api })] }));
@@ -289,12 +472,19 @@ export function EditorApp({ gameId, playable, layers, catalogs, save, modeChip }
             };
         }
         const WorldOverlay = function EditorOverlay() {
-            return _jsx(EditorWorldOverlay, { api: host.api, ui: ui, world: playable.game.world });
+            return _jsx(EditorWorldOverlay, { api: host.api, ui: ui, world: playable.game.world, readout: readout });
+        };
+        const registerImportedAsset = (id, url) => {
+            try {
+                playable.game.assets.register(id, { url });
+            }
+            catch {
+                // Catalog may reject late registration in some hosts; place_asset still keeps meta.url.
+            }
         };
         const GameUI = function EditorUi() {
-            return _jsx(EditorChrome, { gameId: gameId, session: host.api.getSession(), api: host.api, assets: catalogAssets, ui: ui, baselineJson: host.baselineJson, save: saveFn });
+            return (_jsx(EditorChrome, { gameId: gameId, session: host.api.getSession(), api: host.api, assets: catalogAssets, ui: ui, baselineDocument: host.baselineDocument, save: saveFn, networkSnapshot: networkSnapshot, onRegisterAsset: registerImportedAsset }));
         };
-        const { target, span, far } = initialCamera;
         return {
             ...playable,
             GameUI,
@@ -303,31 +493,12 @@ export function EditorApp({ gameId, playable, layers, catalogs, save, modeChip }
             loop: frozenLoop,
             // Drop FPS gun chrome; keep world only.
             // WorldOverlay above is the editor layers, not PandoraViewmodel.
-            camera: {
-                rig: "inspection",
-                frustum: {
-                    fov: 55,
-                    near: 0.5,
-                    far,
-                },
-                inspection: {
-                    target,
-                    initialDistance: span,
-                    initialPosition: {
-                        x: target.x + span * 0.35,
-                        y: target.y + span * 0.55,
-                        z: target.z + span * 0.75,
-                    },
-                    minDistance: 4,
-                    maxDistance: Math.max(far * 0.9, span * 8),
-                    pan: true,
-                    rotateSpeed: 0.7,
-                    zoomSpeed: 1.1,
-                    minPolarAngle: 0.15,
-                    maxPolarAngle: Math.PI * 0.48,
-                },
-            },
+            camera: inspectionCamera,
         };
-    }, [playable, host, gameId, initialCamera, catalogAssets, ui, mode, saveFn, resolvedModeChip]);
-    return (_jsxs("div", { className: "relative h-full w-full bg-neutral-950", "data-jg-editor": "1", "data-jg-editor-game": gameId, children: [_jsx(GamePlayerShell, { playable: editorPlayable }), pendingDraft !== null && mode === "edit" ? (_jsxs("div", { className: "absolute left-1/2 top-14 z-[60] flex -translate-x-1/2 items-center gap-3 rounded-xl border border-amber-400/30 bg-amber-950/90 px-4 py-2 text-xs text-amber-100 shadow-2xl shadow-black/50 backdrop-blur-md", children: [_jsx("span", { children: "Unsaved edits from a previous session found." }), _jsx("button", { type: "button", className: "rounded-md bg-gradient-to-b from-amber-500 to-amber-600 px-2.5 py-1 font-semibold text-white shadow-md shadow-amber-950/50 transition-colors hover:from-amber-400 hover:to-amber-500", onClick: restoreDraft, children: "Restore" }), _jsx("button", { type: "button", className: "rounded-md bg-white/[0.07] px-2.5 py-1 ring-1 ring-inset ring-white/[0.06] transition-colors hover:bg-white/15", onClick: discardDraft, children: "Discard" })] })) : null] }));
+    }, [playable, host, gameId, initialCamera, cameraProjection, catalogAssets, ui, readout, mode, saveFn, resolvedModeChip, networkSnapshot]);
+    const showElevation = useStoreSelector(ui, (s) => s.showElevation);
+    const onPanelCommit = useCallback((id, panel) => {
+        host.session.dispatch({ type: "setUiPanel", id, patch: panel });
+    }, [host]);
+    return (_jsxs("div", { className: "relative h-full w-full bg-neutral-950", "data-jg-editor": "1", "data-jg-editor-game": gameId, children: [_jsx(HudLayoutPersistProvider, { onPanelCommit: onPanelCommit, children: _jsx(GamePlayerShell, { playable: editorPlayable }) }), mode === "edit" && showElevation ? _jsx(TerrainReadoutHud, { readout: readout }) : null, pendingDraft !== null && mode === "edit" ? (_jsxs("div", { className: "absolute left-1/2 top-14 z-[60] flex -translate-x-1/2 items-center gap-3 rounded-xl border border-amber-400/30 bg-amber-950/90 px-4 py-2 text-xs text-amber-100 shadow-2xl shadow-black/50 backdrop-blur-md", children: [_jsx("span", { children: "Unsaved edits from a previous session found." }), _jsx("button", { type: "button", className: "rounded-md bg-gradient-to-b from-amber-500 to-amber-600 px-2.5 py-1 font-semibold text-white shadow-md shadow-amber-950/50 transition-colors hover:from-amber-400 hover:to-amber-500", onClick: restoreDraft, children: "Restore" }), _jsx("button", { type: "button", className: "rounded-md bg-white/[0.07] px-2.5 py-1 ring-1 ring-inset ring-white/[0.06] transition-colors hover:bg-white/15", onClick: discardDraft, children: "Discard" })] })) : null] }));
 }

package/dist/EditorChrome.d.ts

@@ -1,22 +1,41 @@
-import { type EditorSession } from "@jgengine/core/editor/index";
+import { type EditorDocument, type EditorSession } from "@jgengine/core/editor/index";
 import { type EditorAssetEntry } from "./AssetBrowser.js";
 import type { EditorHostApi } from "./session.js";
+import { type AssetImporter } from "./assetImport.js";
 import { type EditorUiStore } from "./uiStore.js";
+import type { EditorNetworkSnapshot } from "./networkSnapshot.js";
 /**
- * The full editor UI shell — toolbar, left panels (outliner/prefabs/sets/layers), viewport overlays,
- * the selector-subscribed {@link InspectorPanel}, the embedded {@link AgentPanel}, and the asset
- * browser — wired to the session, UI store, and host RPC. Mounted by `EditorApp`; not a game-author entry point.
+ * The full editor UI shell — global app bar, contextual scene toolbar, workspace rail, resizable
+ * hierarchy/inspector docks, tabbed bottom dock (content browser, console, profiler, AI
+ * assistant), viewport overlays, and status bar — wired to the session, UI store, layout store,
+ * and host RPC. Mounted by `EditorApp`; not a game-author entry point.
  */
-export declare function EditorChrome({ gameId, session, api, assets, ui, baselineJson, save, }: {
+export declare function EditorChrome({ gameId, session, api, assets, ui, baselineDocument, save, networkSnapshot, importAsset, onRegisterAsset, }: {
     gameId: string;
     session: EditorSession;
     api: EditorHostApi;
     assets: readonly EditorAssetEntry[];
     ui: EditorUiStore;
-    baselineJson?: string;
+    /** The document as loaded — drives the header unsaved indicator by reference compare. */
+    baselineDocument?: EditorDocument;
     save?: (json: string) => Promise<{
         ok: boolean;
         path?: string;
         error?: string;
     }>;
+    /**
+     * Network workspace inspection payload (adapter config + optional host presence).
+     * Built by `EditorApp` from the game definition; live presence rows only when the host injects them.
+     */
+    networkSnapshot: EditorNetworkSnapshot;
+    /**
+     * How dropped/imported models become durable. Default: the standalone host importer
+     * (`POST /__jgengine/import-asset`); when no host answers, imports degrade to blob URLs.
+     */
+    importAsset?: AssetImporter;
+    /**
+     * Optional side-effect after a model import succeeds: register the id/url into the live game
+     * asset catalog so AuthoredObjects can resolve the mesh without remounting the playable.
+     */
+    onRegisterAsset?: (id: string, url: string) => void;
 }): import("react").JSX.Element;