@jgengine/editor 0.11.0 → 0.13.0

package/dist/EditorChrome.js

@@ -1,67 +1,41 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { editorDocumentSize, extractEditorFragment, listEditorKinds, WELL_KNOWN_MARKER_KINDS, } from "@jgengine/core/editor/index";
-import { VEGETATION_VOLUME_KIND } from "@jgengine/core/world/vegetation";
+import { editorDocumentSize, editorParentOf, extractEditorFragment, } from "@jgengine/core/editor/index";
 import { scatterRegionEstimate, SCATTER_PATH_KIND } from "@jgengine/core/world/scatterRegion";
-import { listSceneKinds } from "@jgengine/core/scene/sceneKinds";
-import { AssetBrowser } from "./AssetBrowser.js";
-import { AgentPanel } from "./agent/AgentPanel.js";
+import { editorAssetFromImport, mergeEditorAssets, } from "./AssetBrowser.js";
 import { CatalogsPanel } from "./CatalogsPanel.js";
 import { CollectionsPanel } from "./CollectionsPanel.js";
 import { EditorContextMenu } from "./EditorContextMenu.js";
-import { OutlinerPanel } from "./OutlinerPanel.js";
+import { ParentPickerMenu } from "./ParentPickerMenu.js";
+import { MaterialsWorkspacePanel } from "./MaterialsWorkspacePanel.js";
 import { PrefabsPanel } from "./PrefabsPanel.js";
+import { listParentCandidates } from "./parentCandidates.js";
 import { buildEditorContextMenu, } from "./viewportContextMenu.js";
 import { buildOutlinerGroups } from "./outlinerModel.js";
-import { classifyEditorPerf } from "./perfPill.js";
+import { importAssetToHost, loadDroppedAssets, } from "./assetImport.js";
 import { newPlacementId } from "./uiStore.js";
 import { useF2Chord } from "./useF2Chord.js";
-import { BTN, MICRO } from "./chromeStyles.js";
 import { TerrainPanel } from "./TerrainPanel.js";
+import { LightingPanel } from "./LightingPanel.js";
 import { InspectorPanel } from "./InspectorPanel.js";
-const PERF_POLL_MS = 500;
-const ADD_VOLUME_ENTRIES = [
-    { label: "Zone (sphere)", tool: { tool: "volume", kind: "zone", shape: "sphere" } },
-    { label: "Zone (box)", tool: { tool: "volume", kind: "zone", shape: "box" } },
-    { label: "Zone (cylinder)", tool: { tool: "volume", kind: "zone", shape: "cylinder" } },
-    { label: "Aggro range", tool: { tool: "volume", kind: "aggro", shape: "sphere" } },
-    { label: "Leash range", tool: { tool: "volume", kind: "leash", shape: "sphere" } },
-    { label: "Discover area", tool: { tool: "volume", kind: "discover", shape: "sphere" } },
-    { label: "Capture area", tool: { tool: "volume", kind: "capture", shape: "cylinder" } },
-    { label: "Vegetation (box)", tool: { tool: "volume", kind: VEGETATION_VOLUME_KIND, shape: "box" } },
-    { label: "Vegetation (circle)", tool: { tool: "volume", kind: VEGETATION_VOLUME_KIND, shape: "sphere" } },
-];
-const SNAP_MODES = [
-    { mode: "ground", label: "Snap: ground" },
-    { mode: "grid", label: "Snap: grid" },
-    { mode: "off", label: "Snap: off" },
-];
-function usePerfSample(api) {
-    const [sample, setSample] = useState(null);
-    useEffect(() => {
-        const timer = setInterval(() => setSample(api.getPerf()), PERF_POLL_MS);
-        return () => clearInterval(timer);
-    }, [api]);
-    return sample;
-}
-function formatTriangles(count) {
-    if (count >= 1_000_000)
-        return `${(count / 1_000_000).toFixed(1)}M`;
-    if (count >= 1_000)
-        return `${(count / 1_000).toFixed(0)}k`;
-    return String(count);
-}
-const PERF_TONE_CLASS = {
-    idle: "text-neutral-500",
-    healthy: "text-emerald-400",
-    busy: "text-rose-400",
-};
-/** Toolbar perf pill: neutral "idle" when the loop is throttled/at rest, red only for active low fps. */
-function PerfPill({ perf }) {
-    const tone = classifyEditorPerf(perf);
-    const rate = tone === "idle" ? "idle" : `${perf.fps.toFixed(0)} fps`;
-    return (_jsxs("span", { className: `ml-3 ${PERF_TONE_CLASS[tone]}`, children: [rate, " \u00B7 ", perf.drawCalls, " draws \u00B7 ", formatTriangles(perf.triangles), " tris"] }));
-}
+import { BottomDock } from "./shell/BottomDock.js";
+import { CommandPalette } from "./shell/CommandPalette.js";
+import { HierarchyPanel } from "./shell/HierarchyPanel.js";
+import { SceneToolbar } from "./shell/SceneToolbar.js";
+import { StatusBar } from "./shell/StatusBar.js";
+import { TopAppBar } from "./shell/TopAppBar.js";
+import { OrientationWidget, PerformanceOverlay, ViewportUtilityPanel } from "./shell/ViewportOverlays.js";
+import { NetworkWorkspacePanel } from "./shell/NetworkWorkspacePanel.js";
+import { WorkspaceRail } from "./shell/WorkspaceRail.js";
+import { buildPaletteCommands } from "./shell/commandRegistry.js";
+import { createEditorConsoleStore } from "./shell/consoleStore.js";
+import { installEditorConsoleSink } from "./shell/consoleSink.js";
+import { Icon } from "./shell/icons.js";
+import { createShellLayoutStore, } from "./shell/layoutStore.js";
+import { createPerfHistoryStore } from "./shell/perfHistory.js";
+import { BORDER, FOCUS_RING } from "./shell/theme.js";
+import { IconButton, Kbd, PanelResizer } from "./shell/ui.js";
+import { ScriptingPanel } from "./ScriptingPanel.js";
 let clipboardFragment = null;
 const SHORTCUTS = [
     { keys: "W / E / R", action: "Move · rotate · scale gizmo" },
@@ -69,13 +43,15 @@ const SHORTCUTS = [
     { keys: "F", action: "Frame selection (or whole scene)" },
     { keys: "G", action: "Toggle reference grid" },
     { keys: "N", action: "Cycle instances of selected row" },
+    { keys: "Ctrl+K", action: "Command palette" },
     { keys: "Arrows", action: "Nudge selection on X/Z (Shift ×5)" },
     { keys: "PgUp / PgDn", action: "Nudge selection on Y (Shift ×5)" },
     { keys: "Ctrl+A", action: "Select all visible objects" },
     { keys: "Ctrl+C / X / V", action: "Copy · cut · paste selection" },
     { keys: "Ctrl+D", action: "Duplicate selection" },
     { keys: "Ctrl+Z / Y", action: "Undo · redo" },
-    { keys: "Ctrl+B", action: "Asset browser" },
+    { keys: "Ctrl+B", action: "Content browser" },
+    { keys: "Ctrl+S", action: "Save scene" },
     { keys: "Delete", action: "Remove selection" },
     { keys: "Enter / Esc", action: "Finish · cancel path drawing" },
     { keys: "Shift+click", action: "Multi-select · keep placing" },
@@ -95,9 +71,10 @@ function downloadText(filename, text) {
     anchor.click();
     URL.revokeObjectURL(url);
 }
-function useDocumentSave(session, save) {
+function useDocumentSave(session, save, onResult) {
     const [saveState, setSaveState] = useState("idle");
     const [saveError, setSaveError] = useState(null);
+    const [lastSavedAt, setLastSavedAt] = useState(null);
     const savedDocRef = useRef(session.getState().document);
     const dirty = session.getState().document !== savedDocRef.current;
     const doSave = () => {
@@ -110,29 +87,55 @@ function useDocumentSave(session, save) {
                 savedDocRef.current = document;
                 setSaveError(null);
                 setSaveState("saved");
+                setLastSavedAt(Date.now());
+                onResult?.(true, result.path === undefined ? "Scene saved" : `Scene saved to ${result.path}`);
             }
             else {
                 setSaveError(result.error ?? "save failed");
                 setSaveState("error");
+                onResult?.(false, `Save failed: ${result.error ?? "unknown error"}`);
             }
         });
     };
-    return { available: save !== undefined, dirty, saveState, saveError, doSave };
+    return { available: save !== undefined, dirty, saveState, saveError, lastSavedAt, doSave };
 }
+const LEFT_PAGES = [
+    { id: "hierarchy", label: "Hierarchy" },
+    { id: "collections", label: "Sets" },
+    { id: "prefabs", label: "Prefabs" },
+    { id: "catalogs", label: "Data" },
+];
 /**
- * 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 function EditorChrome({ gameId, session, api, assets, ui, baselineJson, save, }) {
+export function EditorChrome({ gameId, session, api, assets, ui, baselineDocument, save, networkSnapshot, importAsset = importAssetToHost, onRegisterAsset, onExitEditor, }) {
     const [, setTick] = useState(0);
-    const [activePanel, setActivePanel] = useState("outliner");
-    const [leftOpen, setLeftOpen] = useState(true);
-    const [rightOpen, setRightOpen] = useState(true);
-    const [agentOpen, setAgentOpen] = useState(false);
-    const [bottomOpen, setBottomOpen] = useState(false);
-    const [addOpen, setAddOpen] = useState(false);
+    const layoutRef = useRef(null);
+    layoutRef.current ??= createShellLayoutStore(gameId);
+    const layout = layoutRef.current;
+    const consoleRef = useRef(null);
+    consoleRef.current ??= createEditorConsoleStore();
+    const consoleStore = consoleRef.current;
+    const perfHistoryRef = useRef(null);
+    perfHistoryRef.current ??= createPerfHistoryStore();
+    const perfHistory = perfHistoryRef.current;
+    /** Models added this session via Content Browser Import / drop — merged over the game catalog. */
+    const [importedAssets, setImportedAssets] = useState([]);
+    const [importBusy, setImportBusy] = useState(false);
+    // Bridge global RPC/agent console emits into the dock console for this chrome instance.
+    useEffect(() => installEditorConsoleSink((severity, source, message) => {
+        consoleStore.log(severity, source, message);
+    }), [consoleStore]);
+    const liveAssets = useMemo(() => mergeEditorAssets(assets, importedAssets), [assets, importedAssets]);
+    // Keep the host asset list in step with the browser so place_asset / list_assets see imports.
+    useEffect(() => {
+        api.setAssets(liveAssets);
+    }, [api, liveAssets]);
     const [helpOpen, setHelpOpen] = useState(false);
+    const [paletteQuery, setPaletteQuery] = useState(null);
     const [toast, setToast] = useState(null);
     const toastTimer = useRef(null);
     const notify = useCallback((text, tone = "info") => {
@@ -140,18 +143,17 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineJson, s
             clearTimeout(toastTimer.current);
         setToast({ text, tone });
         toastTimer.current = setTimeout(() => setToast(null), 2600);
-    }, []);
+        consoleStore.log(tone === "error" ? "error" : "info", "ui", text);
+    }, [consoleStore]);
     useEffect(() => () => {
         if (toastTimer.current !== null)
             clearTimeout(toastTimer.current);
     }, []);
     const importInputRef = useRef(null);
     const state = session.getState();
-    const visibility = api.getVisibility();
-    const perf = usePerfSample(api);
     const uiState = ui.getState();
-    const gizmoMode = uiState.gizmoMode;
-    const docSave = useDocumentSave(session, save);
+    const layoutState = layout.getState();
+    const docSave = useDocumentSave(session, save, (ok, detail) => consoleStore.log(ok ? "info" : "error", "save", detail));
     const docSaveRef = useRef(docSave);
     docSaveRef.current = docSave;
     const outlinerGroups = useMemo(() => buildOutlinerGroups(state.document), [state.document]);
@@ -166,16 +168,12 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineJson, s
                 foliage += scatterRegionEstimate(path).count;
         return { objects, foliage };
     }, [state.document]);
-    const showPanel = (panel) => {
-        setActivePanel(panel);
-        if (panel === "assets")
-            setBottomOpen(true);
-        else
-            setLeftOpen(true);
-    };
     useF2Chord("KeyE", () => api.setMode("play"));
+    // F2+Q leaves the editor entirely (back to the game) — only meaningful when summoned over one.
+    useF2Chord("KeyQ", useCallback(() => onExitEditor?.(), [onExitEditor]));
     useEffect(() => session.subscribe(() => setTick((value) => value + 1)), [session]);
     useEffect(() => ui.subscribe(() => setTick((value) => value + 1)), [ui]);
+    useEffect(() => layout.subscribe(() => setTick((value) => value + 1)), [layout]);
     const copySelection = useCallback(() => {
         const current = session.getState();
         if (current.selection.length === 0)
@@ -194,6 +192,10 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineJson, s
         if (ui.getState().contextMenu !== null)
             ui.patch({ contextMenu: null });
     }, [ui]);
+    const [parentPicker, setParentPicker] = useState(null);
+    const openBottomTab = useCallback((tab) => {
+        layout.patch({ bottomOpen: true, bottomTab: tab });
+    }, [layout]);
     const runContextAction = useCallback((action) => {
         const menu = ui.getState().contextMenu;
         closeContextMenu();
@@ -246,10 +248,29 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineJson, s
                     const id = `prefab_${Date.now().toString(36)}`;
                     const name = `Prefab ${current.document.prefabs.length + 1}`;
                     api.handle({ method: "create_prefab", id, name, ids: [...selection] });
-                    showPanel("prefabs");
+                    layout.patch({ leftOpen: true, leftPage: "prefabs" });
                     notify(`Created prefab “${name}”`);
                 }
                 return;
+            case "parentTo": {
+                const ids = selection.length > 0
+                    ? selection
+                    : menu?.hitId !== null && menu?.hitId !== undefined
+                        ? [menu.hitId]
+                        : [];
+                if (ids.length === 0 || menu === null)
+                    return;
+                setParentPicker({ clientX: menu.clientX, clientY: menu.clientY, ids: [...ids] });
+                return;
+            }
+            case "unparent": {
+                const ids = selection.length > 0 ? selection : menu?.hitId !== null && menu?.hitId !== undefined ? [menu.hitId] : [];
+                if (ids.length === 0)
+                    return;
+                api.handle({ method: "set_parent", ids: [...ids], parentId: null });
+                notify(ids.length === 1 ? "Unparented object" : `Unparented ${ids.length} objects`);
+                return;
+            }
             case "addMarker":
                 if (ground !== null) {
                     session.dispatch({
@@ -301,10 +322,10 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineJson, s
                 }
                 return;
             case "openAssets":
-                showPanel("assets");
+                openBottomTab("content");
                 return;
         }
-    }, [api, closeContextMenu, copySelection, notify, session, ui]);
+    }, [api, closeContextMenu, copySelection, layout, notify, openBottomTab, session, ui]);
     useEffect(() => {
         const onKey = (event) => {
             if (event.defaultPrevented)
@@ -314,6 +335,11 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineJson, s
                 docSaveRef.current.doSave();
                 return;
             }
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "k") {
+                event.preventDefault();
+                setPaletteQuery((value) => (value === null ? "" : null));
+                return;
+            }
             const target = event.target;
             const isTyping = target instanceof HTMLInputElement ||
                 target instanceof HTMLTextAreaElement ||
@@ -335,18 +361,26 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineJson, s
             }
             if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "b") {
                 event.preventDefault();
-                showPanel("assets");
+                openBottomTab("content");
                 return;
             }
             if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a") {
                 event.preventDefault();
-                const state = session.getState();
+                const current = session.getState();
                 const visibility = api.getVisibility();
                 const ids = [
-                    ...state.document.markers.filter((m) => visibility[m.kind] !== false).map((m) => m.id),
-                    ...state.document.volumes.filter((v) => visibility[v.kind] !== false).map((v) => v.id),
-                    ...state.document.paths.filter((p) => visibility[p.kind] !== false).map((p) => p.id),
-                    ...(visibility["note"] !== false ? state.document.annotations.map((n) => n.id) : []),
+                    ...current.document.markers
+                        .filter((m) => visibility[m.kind] !== false && m.hidden !== true)
+                        .map((m) => m.id),
+                    ...current.document.volumes
+                        .filter((v) => visibility[v.kind] !== false && v.hidden !== true)
+                        .map((v) => v.id),
+                    ...current.document.paths
+                        .filter((p) => visibility[p.kind] !== false && p.hidden !== true)
+                        .map((p) => p.id),
+                    ...(visibility["note"] !== false
+                        ? current.document.annotations.filter((n) => n.hidden !== true).map((n) => n.id)
+                        : []),
                 ];
                 if (ids.length > 0)
                     session.dispatch({ type: "select", ids });
@@ -387,6 +421,10 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineJson, s
             }
             if (event.key === "Escape") {
                 setHelpOpen(false);
+                if (paletteQuery !== null) {
+                    setPaletteQuery(null);
+                    return;
+                }
                 const current = ui.getState();
                 if (current.contextMenu !== null) {
                     ui.patch({ contextMenu: null });
@@ -479,17 +517,7 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineJson, s
         };
         window.addEventListener("keydown", onKey);
         return () => window.removeEventListener("keydown", onKey);
-    }, [session, ui, api, notify, copySelection]);
-    const kinds = useMemo(() => listEditorKinds(state.document), [state.document]);
-    const allKinds = useMemo(() => [
-        ...new Set([
-            ...kinds.markers,
-            ...kinds.volumes,
-            ...kinds.paths,
-            ...(state.document.annotations.length > 0 ? ["note"] : []),
-        ]),
-    ].sort(), [kinds, state.document.annotations.length]);
-    const studioKinds = useMemo(() => listSceneKinds().filter((definition) => definition.addCategory !== undefined), []);
+    }, [session, ui, api, notify, copySelection, openBottomTab, paletteQuery]);
     const placeAsset = (entry) => {
         const focus = api.getFocusTarget();
         const focused = session.getState();
@@ -497,7 +525,7 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineJson, s
         const selected = focused.document.markers.find((marker) => marker.id === focusedId)?.position ??
             focused.document.volumes.find((volume) => volume.id === focusedId)?.center;
         const position = focus ?? selected ?? { x: 0, y: 0, z: 0 };
-        api.handle({
+        const response = api.handle({
             method: "place_asset",
             id: entry.id,
             kind: entry.kind === "model" ? "prop" : entry.kind,
@@ -505,16 +533,61 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineJson, s
             y: position.y,
             z: position.z,
         });
+        if (response.ok)
+            notify(`Placed ${entry.label}`);
+        else
+            notify(`Place failed: ${response.error ?? "unknown error"}`, "error");
     };
+    const importModels = useCallback(async (files) => {
+        if (files.length === 0 || importBusy)
+            return;
+        setImportBusy(true);
+        try {
+            const next = await loadDroppedAssets(files, importAsset);
+            if (next.length === 0) {
+                notify("No .glb / .gltf models found in the drop", "error");
+                return;
+            }
+            const entries = next.map(editorAssetFromImport);
+            for (const entry of entries) {
+                if (entry.url !== undefined)
+                    onRegisterAsset?.(entry.id, entry.url);
+            }
+            setImportedAssets((current) => mergeEditorAssets(current, entries));
+            layout.patch({ bottomOpen: true, bottomTab: "content" });
+            const durable = entries.filter((entry) => entry.url !== undefined && !entry.url.startsWith("blob:")).length;
+            const ephemeral = entries.length - durable;
+            if (ephemeral === 0) {
+                notify(entries.length === 1 ? `Imported ${entries[0].label}` : `Imported ${entries.length} models`);
+            }
+            else if (durable === 0) {
+                notify(entries.length === 1
+                    ? `Imported ${entries[0].label} (session-only — no host importer)`
+                    : `Imported ${entries.length} models (session-only — no host importer)`);
+            }
+            else {
+                notify(`Imported ${entries.length} models (${ephemeral} session-only)`);
+            }
+        }
+        catch (error) {
+            notify(`Import failed: ${error instanceof Error ? error.message : String(error)}`, "error");
+        }
+        finally {
+            setImportBusy(false);
+        }
+    }, [importAsset, importBusy, layout, notify, onRegisterAsset]);
     const importFile = (file) => {
         void file.text().then((text) => {
             try {
                 session.dispatch({ type: "importJson", json: text });
                 const doc = session.getState().document;
                 notify(`Imported ${editorDocumentSize(doc)} objects from ${file.name}`);
+                consoleStore.log("info", "import", `Imported ${editorDocumentSize(doc)} objects from ${file.name}`);
             }
             catch (error) {
-                notify(`Import failed: ${error instanceof Error ? error.message : "invalid JSON"}`, "error");
+                const message = error instanceof Error ? error.message : "invalid JSON";
+                notify(`Import failed: ${message}`, "error");
+                consoleStore.log("error", "import", `Import failed: ${message}`);
             }
         });
     };
@@ -527,45 +600,156 @@ export function EditorChrome({ gameId, session, api, assets, ui, baselineJson, s
             notify("Clipboard unavailable — use Export instead", "error");
         }
     };
-    const currentJson = useMemo(() => session.exportJson(true), [session, state.document]);
-    const dirty = baselineJson !== undefined && currentJson !== baselineJson;
+    const exportJson = () => {
+        downloadText(`${gameId}-editor.json`, session.exportJson(true));
+        notify(`Exported ${gameId}-editor.json`);
+    };
+    // Reference compare, not a serialize: stringifying the whole document per edit dispatch burned
+    // milliseconds on every nudge/stroke. Undoing back to pristine may leave the dot on (history
+    // restores clones), which is the cheap side of wrong for an unsaved-edits hint.
+    const baselineDirty = baselineDocument !== undefined && state.document !== baselineDocument;
+    const dirty = docSave.available ? docSave.dirty : baselineDirty;
     const startPlacement = (tool) => {
-        setAddOpen(false);
         ui.startPlacement(tool);
     };
+    const selectWorkspace = (workspace) => {
+        layout.setWorkspace(workspace);
+        if (workspace === "terrain")
+            ui.setTool("terrain");
+        else if (ui.getState().tool === "terrain")
+            ui.setTool("select");
+    };
+    const paletteObjects = useMemo(() => {
+        const doc = state.document;
+        const objects = [];
+        for (const marker of doc.markers)
+            objects.push({ id: marker.id, label: marker.label ?? marker.id, kind: marker.kind });
+        for (const volume of doc.volumes)
+            objects.push({ id: volume.id, label: volume.label ?? volume.id, kind: volume.kind });
+        for (const path of doc.paths)
+            objects.push({ id: path.id, label: path.label ?? path.id, kind: path.kind });
+        for (const note of doc.annotations)
+            objects.push({ id: note.id, label: note.text.slice(0, 48) || note.id, kind: "note" });
+        return objects;
+    }, [state.document]);
+    const paletteCommands = useMemo(() => buildPaletteCommands({
+        setGizmoMode: (mode) => ui.patch({ gizmoMode: mode }),
+        setTool: (tool) => ui.setTool(tool),
+        toggleGrid: () => ui.patch({ showGrid: !ui.getState().showGrid }),
+        toggleContours: () => ui.patch({ showContours: !ui.getState().showContours }),
+        toggleSurfaceGrid: () => ui.patch({ showSurfaceGrid: !ui.getState().showSurfaceGrid }),
+        toggleElevation: () => ui.patch({ showElevation: !ui.getState().showElevation }),
+        setSnapMode: (mode) => ui.patch({ snapMode: mode }),
+        frameAll: () => api.handle({ method: "camera_frame" }),
+        frameSelection: () => {
+            const selected = session.getState().selection[0];
+            if (selected !== undefined)
+                api.handle({ method: "camera_goto", id: selected });
+            else
+                api.handle({ method: "camera_frame" });
+        },
+        undo: () => session.dispatch({ type: "undo" }),
+        redo: () => session.dispatch({ type: "redo" }),
+        save: () => docSaveRef.current.doSave(),
+        exportJson,
+        importJson: () => importInputRef.current?.click(),
+        copyJson: copyExportJson,
+        setMode: (mode) => api.setMode(mode),
+        startPlacement,
+        openBottomTab,
+        toggleLeftDock: () => layout.patch({ leftOpen: !layout.getState().leftOpen }),
+        toggleRightDock: () => layout.patch({ rightOpen: !layout.getState().rightOpen }),
+        toggleHelp: () => setHelpOpen((value) => !value),
+        resetLayout: () => layout.reset(),
+        objects: paletteObjects,
+        gotoObject: (id) => {
+            session.dispatch({ type: "select", ids: [id] });
+            api.handle({ method: "camera_goto", id });
+        },
+    }), [api, layout, openBottomTab, paletteObjects, session, ui]);
     const placement = uiState.placement;
     const placementHint = placement === null
         ? null
         : placement.tool === "path"
             ? `Drawing ${placement.kind}: click to add points (${uiState.pathDraft.length}) · Enter finish · Esc cancel`
             : `Placing ${placement.tool === "note" ? "note" : placement.kind}: click the world · Shift-click places more · Esc cancel`;
-    return (_jsxs("div", { className: "pointer-events-none absolute inset-0 z-50 flex flex-col text-xs text-neutral-100", children: [_jsxs("header", { className: "pointer-events-auto flex h-11 shrink-0 items-center gap-1.5 border-b border-white/[0.08] bg-gradient-to-b from-[#15171c]/95 to-[#0d0f13]/95 px-2 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] backdrop-blur-md", children: [_jsx("button", { type: "button", className: "rounded-md bg-gradient-to-br from-cyan-400/15 to-indigo-500/15 px-2 py-1 font-bold tracking-widest text-cyan-300 ring-1 ring-inset ring-cyan-400/25 transition-colors hover:from-cyan-400/25 hover:to-indigo-500/25", onClick: () => setLeftOpen((value) => !value), "aria-label": "Toggle hierarchy panel", children: "JG" }), _jsxs("span", { className: "hidden text-neutral-500 sm:inline", children: [gameId, dirty ? _jsx("span", { className: "ml-1 text-amber-400", title: "Unsaved edits \u2014 Export to save", children: "\u25CF" }) : null] }), _jsx("div", { className: "mx-1 h-5 w-px bg-white/[0.07]" }), _jsx("div", { className: "flex items-center gap-0.5 rounded-lg bg-black/40 p-0.5 ring-1 ring-inset ring-white/[0.06]", children: ["select", "terrain"].map((tool) => (_jsx("button", { type: "button", className: `rounded-md px-2.5 py-1 capitalize transition-colors ${uiState.tool === tool ? "bg-amber-500/90 text-white shadow-sm shadow-amber-950/50" : "text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200"}`, onClick: () => ui.setTool(tool), children: tool }, tool))) }), _jsx("div", { className: "h-5 w-px bg-white/[0.07]" }), _jsx("div", { className: `flex items-center gap-0.5 rounded-lg bg-black/40 p-0.5 ring-1 ring-inset ring-white/[0.06] ${uiState.tool === "terrain" ? "opacity-40" : ""}`, children: ["translate", "rotate", "scale"].map((mode) => (_jsxs("button", { type: "button", className: `rounded-md px-2.5 py-1 capitalize transition-colors ${gizmoMode === mode ? "bg-cyan-500/90 text-white shadow-sm shadow-cyan-950/50" : "text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200"}`, onClick: () => ui.patch({ gizmoMode: mode }), children: [mode, " ", _jsx("kbd", { className: `ml-0.5 font-sans text-[9px] ${gizmoMode === mode ? "text-cyan-100/80" : "text-neutral-500"}`, children: mode === "translate" ? "W" : mode === "rotate" ? "E" : "R" })] }, mode))) }), _jsx("div", { className: "h-5 w-px bg-white/[0.07]" }), _jsxs("div", { className: "relative", children: [_jsx("button", { type: "button", className: `rounded-md px-2.5 py-1 transition-colors ${addOpen || placement !== null ? "bg-cyan-500/90 text-white shadow-sm shadow-cyan-950/50" : "bg-white/[0.04] ring-1 ring-inset ring-white/[0.06] hover:bg-white/10"}`, onClick: () => setAddOpen((value) => !value), children: "+ Add" }), addOpen ? (_jsxs("div", { className: "absolute left-0 top-9 z-50 max-h-[60vh] w-56 overflow-auto rounded-xl border border-white/10 bg-[#111318]/95 p-1.5 shadow-2xl shadow-black/60 backdrop-blur-md", children: [_jsx("div", { className: `px-2 pb-1 pt-2 ${MICRO}`, children: "Markers" }), WELL_KNOWN_MARKER_KINDS.map((kind) => (_jsx("button", { type: "button", className: "block w-full rounded-md px-2 py-1 text-left text-neutral-300 transition-colors hover:bg-cyan-500/15 hover:text-cyan-100", onClick: () => startPlacement({ tool: "marker", kind }), children: kind }, kind))), _jsx("div", { className: `px-2 pb-1 pt-2 ${MICRO}`, children: "Volumes" }), ADD_VOLUME_ENTRIES.map((entry) => (_jsx("button", { type: "button", className: "block w-full rounded-md px-2 py-1 text-left text-neutral-300 transition-colors hover:bg-cyan-500/15 hover:text-cyan-100", onClick: () => startPlacement(entry.tool), children: entry.label }, entry.label))), _jsx("div", { className: `px-2 pb-1 pt-2 ${MICRO}`, children: "Studios" }), studioKinds.map((definition) => (_jsxs("button", { type: "button", className: "block w-full rounded-md px-2 py-1 text-left transition-colors hover:bg-emerald-500/15 hover:text-emerald-100", style: { color: definition.accent ?? "#34d399" }, onClick: () => startPlacement(definition.target === "path"
-                                            ? { tool: "path", kind: definition.kind }
-                                            : definition.target === "volume"
-                                                ? { tool: "volume", kind: definition.kind, shape: "box" }
-                                                : { tool: "marker", kind: definition.kind }), children: [definition.label, definition.target === "path" ? (definition.pathShape === "line" ? " (draw line)" : " (lasso)") : ""] }, definition.kind))), _jsx("div", { className: `px-2 pb-1 pt-2 ${MICRO}`, children: "Other" }), _jsx("button", { type: "button", className: "block w-full rounded-md px-2 py-1 text-left text-neutral-300 transition-colors hover:bg-cyan-500/15 hover:text-cyan-100", onClick: () => startPlacement({ tool: "path", kind: "route" }), children: "Draw path (route)" }), _jsx("button", { type: "button", className: "block w-full rounded-md px-2 py-1 text-left text-neutral-300 transition-colors hover:bg-cyan-500/15 hover:text-cyan-100", onClick: () => startPlacement({ tool: "path", kind: "road" }), children: "Draw road" }), _jsx("button", { type: "button", className: "block w-full rounded-md px-2 py-1 text-left text-neutral-300 transition-colors hover:bg-cyan-500/15 hover:text-cyan-100", onClick: () => startPlacement({ tool: "note" }), children: "Note" })] })) : null] }), _jsxs("button", { type: "button", className: BTN, onClick: () => {
-                            const at = SNAP_MODES.findIndex((entry) => entry.mode === uiState.snapMode);
-                            ui.patch({ snapMode: SNAP_MODES[(at + 1) % SNAP_MODES.length].mode });
-                        }, children: [SNAP_MODES.find((entry) => entry.mode === uiState.snapMode)?.label, uiState.snapMode === "grid" ? ` ${uiState.gridSize}` : ""] }), uiState.snapMode === "grid" ? (_jsx("button", { type: "button", className: BTN, onClick: () => ui.patch({ gridSize: uiState.gridSize >= 8 ? 0.5 : uiState.gridSize * 2 }), children: "\u00B1" })) : null, _jsx("button", { type: "button", className: `rounded-md px-2 py-1 ring-1 ring-inset ring-white/[0.06] transition-colors hover:bg-white/15 ${uiState.showGrid ? "bg-white/10 text-neutral-200" : "bg-white/[0.03] text-neutral-500"}`, onClick: () => ui.patch({ showGrid: !uiState.showGrid }), children: "Grid G" }), _jsx("button", { type: "button", title: "Surface-following iso-elevation contours", className: `rounded-md px-2 py-1 ring-1 ring-inset ring-white/[0.06] transition-colors hover:bg-white/15 ${uiState.showContours ? "bg-white/10 text-neutral-200" : "bg-white/[0.03] text-neutral-500"}`, onClick: () => ui.patch({ showContours: !uiState.showContours }), children: "Contours" }), _jsx("button", { type: "button", title: "Terrain-draped reference grid", className: `rounded-md px-2 py-1 ring-1 ring-inset ring-white/[0.06] transition-colors hover:bg-white/15 ${uiState.showSurfaceGrid ? "bg-white/10 text-neutral-200" : "bg-white/[0.03] text-neutral-500"}`, onClick: () => ui.patch({ showSurfaceGrid: !uiState.showSurfaceGrid }), children: "Drape" }), _jsx("button", { type: "button", title: "Measurable elevation readout", className: `rounded-md px-2 py-1 ring-1 ring-inset ring-white/[0.06] transition-colors hover:bg-white/15 ${uiState.showElevation ? "bg-white/10 text-neutral-200" : "bg-white/[0.03] text-neutral-500"}`, onClick: () => ui.patch({ showElevation: !uiState.showElevation }), children: "Elev" }), _jsx("div", { className: "h-5 w-px bg-white/[0.07]" }), _jsx("button", { type: "button", className: BTN, onClick: () => api.handle({ method: "camera_frame" }), children: "Frame all" }), _jsx("button", { type: "button", className: `${BTN} disabled:opacity-40`, onClick: () => session.dispatch({ type: "undo" }), disabled: !session.canUndo(), children: "Undo" }), _jsx("button", { type: "button", className: `${BTN} disabled:opacity-40`, onClick: () => session.dispatch({ type: "redo" }), disabled: !session.canRedo(), children: "Redo" }), _jsx("button", { type: "button", className: BTN, onClick: () => showPanel("assets"), children: "Assets" }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [_jsx("button", { type: "button", className: BTN, onClick: () => setRightOpen((value) => !value), children: "Inspector" }), _jsx("button", { type: "button", className: `rounded-md px-2 py-1 ring-1 ring-inset transition-colors ${agentOpen
-                                    ? "bg-violet-500/25 text-violet-100 ring-violet-400/40"
-                                    : "bg-white/[0.04] text-neutral-300 ring-white/[0.06] hover:bg-white/10 hover:text-neutral-100"}`, onClick: () => setAgentOpen((value) => !value), title: "Embedded agent panel \u2014 same RPC/undo as the GUI", children: "Agent" }), _jsx("button", { type: "button", className: BTN, onClick: () => api.setMode("walk"), children: "Walk" }), _jsx("button", { type: "button", className: "rounded-md bg-gradient-to-b from-emerald-500 to-emerald-600 px-3 py-1 font-semibold text-white shadow-md shadow-emerald-950/50 transition-colors hover:from-emerald-400 hover:to-emerald-500", onClick: () => api.setMode("play"), children: "\u25B6 Play" }), _jsx("button", { type: "button", className: BTN, onClick: () => importInputRef.current?.click(), children: "Import" }), _jsx("input", { ref: importInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: (event) => {
-                                    const file = event.target.files?.[0];
-                                    if (file !== undefined)
-                                        importFile(file);
-                                    event.target.value = "";
-                                } }), docSave.available ? (_jsx("button", { type: "button", className: `rounded-md px-3 py-1 font-medium transition-colors ${docSave.saveState === "error"
-                                    ? "bg-rose-600/90 text-white hover:bg-rose-500"
-                                    : docSave.dirty
-                                        ? "bg-gradient-to-b from-cyan-400 to-cyan-600 text-white shadow-md shadow-cyan-950/50 hover:from-cyan-300 hover:to-cyan-500"
-                                        : "bg-white/[0.04] text-neutral-400 ring-1 ring-inset ring-white/[0.06] hover:bg-white/10"}`, onClick: docSave.doSave, disabled: docSave.saveState === "saving", title: docSave.saveError ?? "Write the scene to Games/<id>/src/editor.scene.json (Ctrl+S)", children: docSave.saveState === "saving"
-                                    ? "Saving…"
-                                    : docSave.saveState === "error"
-                                        ? "Save failed"
-                                        : docSave.dirty
-                                            ? "Save"
-                                            : "Saved ✓" })) : null, _jsx("button", { type: "button", className: "rounded-md bg-cyan-500/20 px-2.5 py-1 font-medium text-cyan-200 ring-1 ring-inset ring-cyan-400/30 transition-colors hover:bg-cyan-500/30", onClick: () => { downloadText(`${gameId}-editor.json`, session.exportJson(true)); notify(`Exported ${gameId}-editor.json`); }, children: "Export" }), _jsx("button", { type: "button", className: BTN, title: "Copy document JSON to clipboard", onClick: copyExportJson, children: "\u29C9" }), _jsx("button", { type: "button", className: `rounded-md px-2 py-1 ring-1 ring-inset ring-white/[0.06] transition-colors ${helpOpen ? "bg-white/15 text-neutral-100" : "bg-white/[0.04] hover:bg-white/10"}`, title: "Keyboard shortcuts (?)", onClick: () => setHelpOpen((value) => !value), children: "?" })] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [leftOpen ? (_jsxs("aside", { className: "pointer-events-auto flex w-72 min-w-56 max-w-[42vw] resize-x flex-col overflow-hidden border-r border-white/[0.08] bg-[#0d0f13]/95 backdrop-blur-md", children: [_jsxs("div", { className: "flex items-center gap-1 border-b border-white/[0.08] p-2", children: [_jsx("button", { type: "button", className: `rounded-md px-2 py-1 font-medium transition-colors ${activePanel === "outliner" ? "bg-white/10 text-neutral-100" : "text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200"}`, onClick: () => showPanel("outliner"), children: "Hierarchy" }), _jsxs("button", { type: "button", className: `rounded-md px-2 py-1 font-medium transition-colors ${activePanel === "collections" ? "bg-white/10 text-neutral-100" : "text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200"}`, onClick: () => showPanel("collections"), children: ["Sets ", state.document.collections.length] }), _jsxs("button", { type: "button", className: `rounded-md px-2 py-1 font-medium transition-colors ${activePanel === "prefabs" ? "bg-white/10 text-neutral-100" : "text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200"}`, onClick: () => showPanel("prefabs"), children: ["Prefabs ", state.document.prefabs.length] }), _jsxs("button", { type: "button", className: `rounded-md px-2 py-1 font-medium transition-colors ${activePanel === "catalogs" ? "bg-white/10 text-neutral-100" : "text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200"}`, onClick: () => showPanel("catalogs"), children: ["Data ", api.getCatalogDefinitions().length] }), _jsxs("button", { type: "button", className: "rounded-md px-2 py-1 text-neutral-400 transition-colors hover:bg-white/[0.06] hover:text-neutral-200", onClick: () => showPanel("assets"), children: ["Assets ", assets.length] }), _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: () => setLeftOpen(false), "aria-label": "Close hierarchy panel", children: "\u00D7" })] }), activePanel === "collections" ? (_jsx(CollectionsPanel, { session: session })) : activePanel === "prefabs" ? (_jsx(PrefabsPanel, { session: session, api: api })) : activePanel === "catalogs" ? (_jsx(CatalogsPanel, { session: session, definitions: api.getCatalogDefinitions() })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "border-b border-white/[0.08] p-2", children: [_jsx("div", { className: `mb-1.5 ${MICRO}`, children: "Layers" }), _jsxs("div", { className: "flex max-h-24 flex-wrap gap-1 overflow-auto", children: [allKinds.map((kind) => (_jsxs("label", { className: `cursor-pointer rounded-full px-2.5 py-0.5 ring-1 ring-inset transition-colors ${visibility[kind] !== false ? "bg-cyan-500/15 text-cyan-200 ring-cyan-400/25" : "bg-black/30 text-neutral-600 ring-white/[0.06] hover:text-neutral-400"}`, children: [_jsx("input", { type: "checkbox", className: "sr-only", checked: visibility[kind] !== false, onChange: (event) => { api.setVisibility({ ...api.getVisibility(), [kind]: event.target.checked }); setTick((value) => value + 1); } }), kind] }, kind))), allKinds.length === 0 ? _jsx("span", { className: "text-neutral-600", children: "No authored layers" }) : null] })] }), _jsx(OutlinerPanel, { session: session, api: api })] }))] })) : null, _jsxs("main", { className: "pointer-events-none relative min-w-0 flex-1", children: [uiState.tool === "terrain" ? _jsx(TerrainPanel, { session: session, ui: ui }) : null, placementHint !== null ? (_jsx("div", { className: "absolute left-1/2 top-2 -translate-x-1/2 whitespace-nowrap rounded-full border border-cyan-400/30 bg-cyan-950/85 px-4 py-1.5 text-[11px] text-cyan-100 shadow-lg shadow-cyan-950/40 backdrop-blur-md", children: placementHint })) : null, toast !== null ? (_jsx("div", { className: `absolute left-1/2 top-10 -translate-x-1/2 whitespace-nowrap rounded-full border px-4 py-1.5 text-[11px] shadow-lg backdrop-blur-md ${toast.tone === "error" ? "border-rose-400/40 bg-rose-950/90 text-rose-100 shadow-rose-950/40" : "border-emerald-400/30 bg-emerald-950/90 text-emerald-100 shadow-emerald-950/40"}`, children: toast.text })) : null, helpOpen ? (_jsx("div", { className: "pointer-events-auto absolute inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-[2px]", onClick: () => setHelpOpen(false), children: _jsxs("div", { className: "w-[28rem] max-w-[90vw] rounded-2xl border border-white/10 bg-[#101216]/95 p-5 shadow-2xl shadow-black/60", onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "mb-3 flex items-center", children: [_jsx("div", { className: "text-sm font-semibold tracking-wide text-neutral-100", children: "Keyboard shortcuts" }), _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: () => setHelpOpen(false), "aria-label": "Close shortcuts", children: "\u00D7" })] }), _jsx("div", { className: "grid max-h-[60vh] grid-cols-[auto_1fr] items-center gap-x-4 gap-y-1.5 overflow-auto", children: SHORTCUTS.map((entry) => (_jsxs("div", { className: "contents", children: [_jsx("kbd", { className: "justify-self-start whitespace-nowrap rounded-md bg-white/[0.06] px-1.5 py-0.5 font-mono text-[10px] text-cyan-200 ring-1 ring-inset ring-white/10", children: entry.keys }), _jsx("span", { className: "text-neutral-300", children: entry.action })] }, entry.keys))) })] }) })) : null, uiState.contextMenu !== null ? (_jsx(EditorContextMenu, { x: uiState.contextMenu.clientX, y: uiState.contextMenu.clientY, actions: buildEditorContextMenu({
-                                    hitId: uiState.contextMenu.hitId,
-                                    selection: state.selection,
-                                    canPaste: clipboardFragment !== null,
-                                }), onPick: runContextAction, onClose: closeContextMenu })) : null, _jsxs("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full border border-white/[0.08] bg-black/70 px-4 py-1.5 text-[11px] text-neutral-400 shadow-lg shadow-black/40 backdrop-blur-md", children: [_jsx("span", { children: "RMB orbit \u00B7 MMB pan \u00B7 click select \u00B7 RMB menu \u00B7 W/E/R \u00B7 Ctrl+C/V \u00B7 F frame \u00B7 ? help" }), _jsxs("span", { className: "ml-3 text-neutral-500", children: [sceneStats.objects, " objs", sceneStats.foliage > 0 ? ` · ≈${formatTriangles(sceneStats.foliage)} foliage` : ""] }), perf !== null ? _jsx(PerfPill, { perf: perf }) : null] })] }), rightOpen ? _jsx(InspectorPanel, { session: session, ui: ui, onClose: () => setRightOpen(false) }) : null, agentOpen ? _jsx(AgentPanel, { api: api, onClose: () => setAgentOpen(false) }) : null] }), bottomOpen ? (_jsxs("section", { className: "pointer-events-auto flex h-64 min-h-40 max-h-[55vh] resize-y flex-col overflow-hidden border-t border-white/[0.08] bg-[#0d0f13]/95 backdrop-blur-md", children: [_jsxs("div", { className: "flex items-center border-b border-white/[0.08] px-3 py-2", children: [_jsx("div", { className: MICRO, children: "Asset browser" }), _jsxs("span", { className: "ml-2 text-neutral-600", children: [assets.length, " assets \u00B7 Ctrl+B"] }), _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: () => setBottomOpen(false), "aria-label": "Close asset browser", children: "\u00D7" })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden p-2", children: _jsx(AssetBrowser, { assets: assets, session: session, onPlace: placeAsset }) })] })) : null] }));
+    const railActive = uiState.tool === "terrain" ? "terrain" : layoutState.workspace;
+    // Only advertise the exit chord when there is a game to return to.
+    const shortcuts = onExitEditor !== undefined ? [...SHORTCUTS, { keys: "F2+Q", action: "Exit editor to game" }] : SHORTCUTS;
+    return (_jsxs("div", { className: "pointer-events-none absolute inset-0 z-50 flex flex-col text-xs text-neutral-100", children: [_jsx(TopAppBar, { gameId: gameId, onExitToGame: onExitEditor, dirty: dirty, saveState: docSave.saveState, lastSavedAt: docSave.lastSavedAt, saveAvailable: docSave.available, saveError: docSave.saveError, canUndo: session.canUndo(), canRedo: session.canRedo(), onUndo: () => session.dispatch({ type: "undo" }), onRedo: () => session.dispatch({ type: "redo" }), onSave: docSave.doSave, onPlay: () => api.setMode("play"), onWalk: () => api.setMode("walk"), onHud: () => api.setMode("hud"), onImport: () => importInputRef.current?.click(), onExport: exportJson, onCopyJson: copyExportJson, onOpenPalette: () => setPaletteQuery(""), onToggleHelp: () => setHelpOpen((value) => !value), onResetLayout: () => layout.reset() }), _jsx("input", { ref: importInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: (event) => {
+                    const file = event.target.files?.[0];
+                    if (file !== undefined)
+                        importFile(file);
+                    event.target.value = "";
+                } }), _jsx(SceneToolbar, { tool: uiState.tool, gizmoMode: uiState.gizmoMode, gizmoSpace: uiState.gizmoSpace, gizmoPivot: uiState.gizmoPivot, snapMode: uiState.snapMode, gridSize: uiState.gridSize, rotationSnapDeg: uiState.rotationSnapDeg, scaleSnap: uiState.scaleSnap, cameraProjection: uiState.cameraProjection, showGrid: uiState.showGrid, showContours: uiState.showContours, showSurfaceGrid: uiState.showSurfaceGrid, showElevation: uiState.showElevation, placementActive: placement !== null, onSetTool: (tool) => ui.setTool(tool), onSetGizmoMode: (mode) => ui.patch({ gizmoMode: mode }), onSetGizmoSpace: (space) => ui.patch({ gizmoSpace: space }), onSetGizmoPivot: (pivot) => ui.patch({ gizmoPivot: pivot }), onSetSnapMode: (mode) => ui.patch({ snapMode: mode }), onSetGridSize: (size) => ui.patch({ gridSize: size }), onSetRotationSnapDeg: (deg) => ui.patch({ rotationSnapDeg: deg }), onSetScaleSnap: (snap) => ui.patch({ scaleSnap: snap }), onSetCameraProjection: (projection) => ui.patch({ cameraProjection: projection }), onToggleGrid: () => ui.patch({ showGrid: !uiState.showGrid }), onToggleContours: () => ui.patch({ showContours: !uiState.showContours }), onToggleSurfaceGrid: () => ui.patch({ showSurfaceGrid: !uiState.showSurfaceGrid }), onToggleElevation: () => ui.patch({ showElevation: !uiState.showElevation }), onFrame: () => {
+                    const selected = session.getState().selection[0];
+                    if (selected !== undefined)
+                        api.handle({ method: "camera_goto", id: selected });
+                    else
+                        api.handle({ method: "camera_frame" });
+                }, onStartPlacement: startPlacement, onOpenAssistant: () => openBottomTab("assistant"), assistantOpen: layoutState.bottomOpen && layoutState.bottomTab === "assistant" }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsx(WorkspaceRail, { active: railActive, onSelect: selectWorkspace }), layoutState.leftOpen ? (_jsxs(_Fragment, { children: [_jsxs("aside", { className: `pointer-events-auto hidden min-h-0 flex-col overflow-hidden border-r ${BORDER} bg-[#111318] sm:flex`, style: { width: layoutState.leftWidth }, "aria-label": layoutState.workspace === "multiplayer"
+                                    ? "Network workspace dock"
+                                    : layoutState.workspace === "materials"
+                                        ? "Materials workspace dock"
+                                        : layoutState.workspace === "scripting"
+                                            ? "Scripting workspace dock"
+                                            : "Scene hierarchy dock", children: [_jsxs("div", { className: `flex h-8 shrink-0 items-center gap-1 border-b ${BORDER} px-1.5`, children: [layoutState.workspace === "multiplayer" ? (_jsx("span", { className: "px-2 text-[11px] font-medium text-neutral-200", children: "Network" })) : layoutState.workspace === "materials" ? (_jsx("span", { className: "px-2 text-[11px] text-neutral-100", children: "Materials" })) : layoutState.workspace === "scripting" ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "script", size: 13, className: "ml-1 text-amber-300" }), _jsx("span", { className: "px-1 text-[11px] text-neutral-200", children: "Scripting" })] })) : (LEFT_PAGES.map((page) => {
+                                                const badge = page.id === "collections"
+                                                    ? state.document.collections.length
+                                                    : page.id === "prefabs"
+                                                        ? state.document.prefabs.length
+                                                        : page.id === "catalogs"
+                                                            ? api.getCatalogDefinitions().length
+                                                            : null;
+                                                const selected = layoutState.leftPage === page.id;
+                                                return (_jsxs("button", { type: "button", role: "tab", "aria-selected": selected, onClick: () => layout.patch({ leftPage: page.id }), className: `flex h-6.5 items-center gap-1 rounded-[5px] px-2 text-[11px] transition-colors ${FOCUS_RING} ${selected ? "bg-white/[0.08] text-neutral-100" : "text-neutral-500 hover:bg-white/[0.04] hover:text-neutral-300"}`, children: [page.label, badge !== null && badge > 0 ? _jsx("span", { className: "text-[9px] tabular-nums text-neutral-500", children: badge }) : null] }, page.id));
+                                            })), _jsx(IconButton, { icon: "close", label: "Collapse left panel", size: 11, tone: "ghost", className: "ml-auto", onClick: () => layout.patch({ leftOpen: false }) })] }), layoutState.workspace === "multiplayer" ? (_jsx(NetworkWorkspacePanel, { snapshot: networkSnapshot })) : layoutState.workspace === "materials" ? (_jsx(MaterialsWorkspacePanel, { session: session, api: api })) : layoutState.workspace === "scripting" ? (_jsx(ScriptingPanel, { session: session, api: api })) : layoutState.leftPage === "collections" ? (_jsx(CollectionsPanel, { session: session })) : layoutState.leftPage === "prefabs" ? (_jsx(PrefabsPanel, { session: session, api: api })) : layoutState.leftPage === "catalogs" ? (_jsx(CatalogsPanel, { session: session, definitions: api.getCatalogDefinitions() })) : (_jsx(HierarchyPanel, { session: session, api: api, onAdd: () => setPaletteQuery("add "), onRowContextMenu: (point, id) => {
+                                            const current = session.getState().selection;
+                                            if (!current.includes(id))
+                                                session.dispatch({ type: "select", ids: [id] });
+                                            ui.patch({
+                                                contextMenu: {
+                                                    clientX: point.clientX,
+                                                    clientY: point.clientY,
+                                                    hitId: id,
+                                                    ground: null,
+                                                },
+                                            });
+                                        } }))] }), _jsx(PanelResizer, { orientation: "vertical", label: "Resize hierarchy panel", onResize: (delta) => layout.resize("leftWidth", delta) })] })) : null, _jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [_jsxs("main", { className: "pointer-events-none relative min-h-0 min-w-0 flex-1", children: [_jsx(PerformanceOverlay, { api: api }), uiState.tool === "terrain" ? (_jsx(TerrainPanel, { session: session, ui: ui, api: api })) : layoutState.workspace === "lighting" ? (_jsx(LightingPanel, { session: session })) : (_jsx(ViewportUtilityPanel, { document: state.document, api: api, selectionCount: state.selection.length })), _jsx(OrientationWidget, {}), !layoutState.leftOpen ? (_jsx("div", { className: "pointer-events-auto absolute left-2.5 top-1/2 z-30 -translate-y-1/2", children: _jsx(IconButton, { icon: "chevronRight", label: "Open hierarchy panel", onClick: () => layout.patch({ leftOpen: true }) }) })) : null, !layoutState.rightOpen ? (_jsx("div", { className: "pointer-events-auto absolute right-2.5 top-1/2 z-30 -translate-y-1/2", children: _jsx(IconButton, { icon: "panel", label: "Open inspector panel", onClick: () => layout.patch({ rightOpen: true }) }) })) : null, placementHint !== null ? (_jsx("div", { className: "absolute left-1/2 top-2 z-40 -translate-x-1/2 whitespace-nowrap rounded-full border border-cyan-400/30 bg-cyan-950/85 px-4 py-1.5 text-[11px] text-cyan-100 shadow-lg shadow-cyan-950/40 backdrop-blur-md", children: placementHint })) : null, toast !== null ? (_jsx("div", { className: `absolute left-1/2 top-10 z-40 -translate-x-1/2 whitespace-nowrap rounded-full border px-4 py-1.5 text-[11px] shadow-lg backdrop-blur-md ${toast.tone === "error"
+                                            ? "border-rose-400/40 bg-rose-950/90 text-rose-100 shadow-rose-950/40"
+                                            : "border-emerald-400/30 bg-emerald-950/90 text-emerald-100 shadow-emerald-950/40"}`, children: toast.text })) : null, uiState.contextMenu !== null ? (_jsx(EditorContextMenu, { x: uiState.contextMenu.clientX, y: uiState.contextMenu.clientY, actions: buildEditorContextMenu({
+                                            hitId: uiState.contextMenu.hitId,
+                                            selection: state.selection,
+                                            canPaste: clipboardFragment !== null,
+                                            canUnparent: (() => {
+                                                const ids = state.selection.length > 0
+                                                    ? state.selection
+                                                    : uiState.contextMenu.hitId !== null
+                                                        ? [uiState.contextMenu.hitId]
+                                                        : [];
+                                                return ids.some((id) => editorParentOf(state.document, id) !== undefined);
+                                            })(),
+                                        }), onPick: runContextAction, onClose: closeContextMenu })) : null, parentPicker !== null ? (_jsx(ParentPickerMenu, { x: parentPicker.clientX, y: parentPicker.clientY, candidates: listParentCandidates(state.document, parentPicker.ids), onPick: (parentId) => {
+                                            const ids = [...parentPicker.ids];
+                                            setParentPicker(null);
+                                            const result = api.handle({ method: "set_parent", ids, parentId });
+                                            if (!result.ok) {
+                                                notify(result.error ?? "Parent to failed", "error");
+                                                return;
+                                            }
+                                            if (parentId === null) {
+                                                notify(ids.length === 1 ? "Unparented object" : `Unparented ${ids.length} objects`);
+                                            }
+                                            else {
+                                                notify(ids.length === 1
+                                                    ? `Parented to ${parentId}`
+                                                    : `Parented ${ids.length} objects to ${parentId}`);
+                                            }
+                                        }, onClose: () => setParentPicker(null) })) : null] }), layoutState.bottomOpen ? (_jsxs(_Fragment, { children: [_jsx(PanelResizer, { orientation: "horizontal", label: "Resize bottom dock", sign: -1, onResize: (delta) => layout.resize("bottomHeight", delta) }), _jsx("div", { className: "flex shrink-0 flex-col", style: { height: layoutState.bottomHeight }, children: _jsx(BottomDock, { tab: layoutState.bottomTab, onSelectTab: (tab) => layout.patch({ bottomTab: tab }), onClose: () => layout.patch({ bottomOpen: false }), assets: liveAssets, session: session, api: api, consoleStore: consoleStore, perfHistory: perfHistory, browserView: layoutState.browserView, onSetBrowserView: (view) => layout.patch({ browserView: view }), onPlaceAsset: placeAsset, onImportModels: importModels, importBusy: importBusy }) })] })) : (_jsxs("div", { className: `pointer-events-auto flex h-7 shrink-0 items-center gap-1 border-t ${BORDER} bg-[#0e1014] px-1.5`, children: [[
+                                        ["content", "Content Browser"],
+                                        ["console", "Console"],
+                                        ["profiler", "Profiler"],
+                                        ["animation", "Animation"],
+                                        ["assistant", "AI Assistant"],
+                                    ].map(([id, label]) => (_jsx("button", { type: "button", onClick: () => openBottomTab(id), className: `rounded-[4px] px-2 py-0.5 text-[10px] text-neutral-500 transition-colors hover:bg-white/[0.05] hover:text-neutral-300 ${FOCUS_RING}`, children: label }, id))), _jsx("span", { className: "ml-auto text-[9px] text-neutral-600", children: "Ctrl+B opens the content browser" })] }))] }), layoutState.rightOpen ? (_jsxs(_Fragment, { children: [_jsx(PanelResizer, { orientation: "vertical", label: "Resize inspector panel", sign: -1, onResize: (delta) => layout.resize("rightWidth", delta) }), _jsx("aside", { className: `pointer-events-auto hidden min-h-0 flex-col overflow-hidden border-l ${BORDER} bg-[#111318] md:flex`, style: { width: layoutState.rightWidth }, "aria-label": "Inspector dock", children: _jsx(InspectorPanel, { session: session, ui: ui, api: api, tab: layoutState.inspectorTab, onSelectTab: (tab) => layout.patch({ inspectorTab: tab }), collapsed: layoutState.collapsed, onToggleSection: (id) => layout.toggleSection(id), onClose: () => layout.patch({ rightOpen: false }) }) })] })) : null] }), _jsx(StatusBar, { api: api, history: perfHistory, objects: sceneStats.objects, foliage: sceneStats.foliage, selectionCount: state.selection.length, autosave: true }), paletteQuery !== null ? (_jsx(CommandPalette, { commands: paletteCommands, initialQuery: paletteQuery, onClose: () => setPaletteQuery(null) })) : null, helpOpen ? (_jsx("div", { className: "pointer-events-auto absolute inset-0 z-[70] flex items-center justify-center bg-black/50 backdrop-blur-[2px]", onClick: () => setHelpOpen(false), children: _jsxs("div", { className: "w-[28rem] max-w-[90vw] rounded-[10px] border border-white/10 bg-[#14171d] p-5 shadow-2xl shadow-black/60", onClick: (event) => event.stopPropagation(), role: "dialog", "aria-label": "Keyboard shortcuts", children: [_jsxs("div", { className: "mb-3 flex items-center", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-semibold tracking-wide text-neutral-100", children: [_jsx(Icon, { name: "command", size: 15, className: "text-cyan-300" }), "Keyboard shortcuts"] }), _jsx(IconButton, { icon: "close", label: "Close shortcuts", tone: "ghost", className: "ml-auto", onClick: () => setHelpOpen(false) })] }), _jsx("div", { className: "grid max-h-[60vh] grid-cols-[auto_1fr] items-center gap-x-4 gap-y-1.5 overflow-auto", children: shortcuts.map((entry) => (_jsxs("div", { className: "contents", children: [_jsx("span", { className: "justify-self-start", children: _jsx(Kbd, { children: entry.keys }) }), _jsx("span", { className: "text-neutral-300", children: entry.action })] }, entry.keys))) })] }) })) : null] }));
 }