@jgengine/editor 0.10.0

package/dist/EditorCameraDriver.js

@@ -0,0 +1,18 @@
+import { useThree } from "@react-three/fiber";
+import { memo, useEffect } from "react";
+/** Smoothly pans the orbit camera to the editor host's focus target when it changes. */
+export const EditorCameraDriver = memo(function EditorCameraDriver({ api }) {
+    const controls = useThree((state) => state.controls);
+    const camera = useThree((state) => state.camera);
+    useEffect(() => {
+        return api.subscribeFocus((target) => {
+            if (target === null || controls === null || controls.target === undefined)
+                return;
+            const previous = controls.target.clone();
+            controls.target.set(target.x, target.y, target.z);
+            camera.position.add(controls.target.clone().sub(previous));
+            controls.update();
+        });
+    }, [api, camera, controls]);
+    return null;
+});

package/dist/EditorChrome.d.ts

@@ -0,0 +1,22 @@
+import { type EditorSession } from "@jgengine/core/editor/index";
+import { type EditorAssetEntry } from "./AssetBrowser.js";
+import type { EditorHostApi } from "./session.js";
+import { type EditorUiStore } from "./uiStore.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.
+ */
+export declare function EditorChrome({ gameId, session, api, assets, ui, baselineJson, save, }: {
+    gameId: string;
+    session: EditorSession;
+    api: EditorHostApi;
+    assets: readonly EditorAssetEntry[];
+    ui: EditorUiStore;
+    baselineJson?: string;
+    save?: (json: string) => Promise<{
+        ok: boolean;
+        path?: string;
+        error?: string;
+    }>;
+}): import("react").JSX.Element;

package/dist/EditorChrome.js

@@ -0,0 +1,559 @@
+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 { 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 { CatalogsPanel } from "./CatalogsPanel.js";
+import { CollectionsPanel } from "./CollectionsPanel.js";
+import { EditorContextMenu } from "./EditorContextMenu.js";
+import { OutlinerPanel } from "./OutlinerPanel.js";
+import { PrefabsPanel } from "./PrefabsPanel.js";
+import { buildEditorContextMenu, } from "./viewportContextMenu.js";
+import { buildOutlinerGroups } from "./outlinerModel.js";
+import { newPlacementId } from "./uiStore.js";
+import { useF2Chord } from "./useF2Chord.js";
+import { BTN, MICRO } from "./chromeStyles.js";
+import { TerrainPanel } from "./TerrainPanel.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);
+}
+let clipboardFragment = null;
+const SHORTCUTS = [
+    { keys: "W / E / R", action: "Move · rotate · scale gizmo" },
+    { keys: "T", action: "Toggle terrain sculpt tool" },
+    { keys: "F", action: "Frame selection (or whole scene)" },
+    { keys: "G", action: "Toggle reference grid" },
+    { keys: "N", action: "Cycle instances of selected row" },
+    { 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: "Delete", action: "Remove selection" },
+    { keys: "Enter / Esc", action: "Finish · cancel path drawing" },
+    { keys: "Shift+click", action: "Multi-select · keep placing" },
+    { keys: "RMB drag", action: "Orbit camera" },
+    { keys: "MMB drag", action: "Pan camera" },
+    { keys: "RMB click", action: "Context menu" },
+    { keys: "F2+E", action: "Toggle editor ↔ play" },
+    { keys: "F2+D", action: "Engine devtools" },
+    { keys: "?", action: "This help" },
+];
+function downloadText(filename, text) {
+    const blob = new Blob([text], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = filename;
+    anchor.click();
+    URL.revokeObjectURL(url);
+}
+function useDocumentSave(session, save) {
+    const [saveState, setSaveState] = useState("idle");
+    const [saveError, setSaveError] = useState(null);
+    const savedDocRef = useRef(session.getState().document);
+    const dirty = session.getState().document !== savedDocRef.current;
+    const doSave = () => {
+        if (save === undefined || saveState === "saving")
+            return;
+        const document = session.getState().document;
+        setSaveState("saving");
+        void save(session.exportJson(true)).then((result) => {
+            if (result.ok) {
+                savedDocRef.current = document;
+                setSaveError(null);
+                setSaveState("saved");
+            }
+            else {
+                setSaveError(result.error ?? "save failed");
+                setSaveState("error");
+            }
+        });
+    };
+    return { available: save !== undefined, dirty, saveState, saveError, doSave };
+}
+/**
+ * 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.
+ */
+export function EditorChrome({ gameId, session, api, assets, ui, baselineJson, save, }) {
+    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 [helpOpen, setHelpOpen] = useState(false);
+    const [toast, setToast] = useState(null);
+    const toastTimer = useRef(null);
+    const notify = useCallback((text, tone = "info") => {
+        if (toastTimer.current !== null)
+            clearTimeout(toastTimer.current);
+        setToast({ text, tone });
+        toastTimer.current = setTimeout(() => setToast(null), 2600);
+    }, []);
+    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 docSaveRef = useRef(docSave);
+    docSaveRef.current = docSave;
+    const outlinerGroups = useMemo(() => buildOutlinerGroups(state.document), [state.document]);
+    const outlinerGroupsRef = useRef(outlinerGroups);
+    outlinerGroupsRef.current = outlinerGroups;
+    const sceneStats = useMemo(() => {
+        const doc = state.document;
+        const objects = doc.markers.length + doc.volumes.length + doc.paths.length + doc.annotations.length;
+        let foliage = 0;
+        for (const path of doc.paths)
+            if (path.kind === SCATTER_PATH_KIND)
+                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"));
+    useEffect(() => session.subscribe(() => setTick((value) => value + 1)), [session]);
+    useEffect(() => ui.subscribe(() => setTick((value) => value + 1)), [ui]);
+    const copySelection = useCallback(() => {
+        const current = session.getState();
+        if (current.selection.length === 0)
+            return 0;
+        const fragment = extractEditorFragment(current.document, current.selection);
+        const count = editorDocumentSize(fragment);
+        if (count === 0)
+            return 0;
+        clipboardFragment = fragment;
+        if (typeof navigator !== "undefined" && navigator.clipboard !== undefined) {
+            void navigator.clipboard.writeText(JSON.stringify(fragment, null, 2)).catch(() => { });
+        }
+        return count;
+    }, [session]);
+    const closeContextMenu = useCallback(() => {
+        if (ui.getState().contextMenu !== null)
+            ui.patch({ contextMenu: null });
+    }, [ui]);
+    const runContextAction = useCallback((action) => {
+        const menu = ui.getState().contextMenu;
+        closeContextMenu();
+        const current = session.getState();
+        const selection = current.selection;
+        const ground = menu?.ground ?? null;
+        switch (action.id) {
+            case "frame": {
+                const id = selection[0] ?? menu?.hitId;
+                if (id !== undefined && id !== null)
+                    api.handle({ method: "camera_goto", id });
+                else
+                    api.handle({ method: "camera_frame" });
+                return;
+            }
+            case "frameAll":
+                api.handle({ method: "camera_frame" });
+                return;
+            case "duplicate":
+                if (selection.length > 0)
+                    session.dispatch({ type: "duplicate", ids: selection });
+                return;
+            case "delete":
+                if (selection.length > 0)
+                    session.dispatch({ type: "removeMany", ids: selection });
+                return;
+            case "copy": {
+                const count = copySelection();
+                if (count > 0)
+                    notify(`Copied ${count} object${count === 1 ? "" : "s"}`);
+                return;
+            }
+            case "paste":
+                if (clipboardFragment === null)
+                    return;
+                {
+                    const count = editorDocumentSize(clipboardFragment);
+                    session.dispatch({
+                        type: "addFragment",
+                        fragment: clipboardFragment,
+                        offset: { x: 2, y: 0, z: 2 },
+                    });
+                    notify(`Pasted ${count} object${count === 1 ? "" : "s"}`);
+                }
+                return;
+            case "createPrefab":
+                if (selection.length === 0)
+                    return;
+                {
+                    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");
+                    notify(`Created prefab “${name}”`);
+                }
+                return;
+            case "addMarker":
+                if (ground !== null) {
+                    session.dispatch({
+                        type: "addMarker",
+                        marker: {
+                            id: newPlacementId("player_spawn"),
+                            kind: "player_spawn",
+                            position: ground,
+                            label: "player_spawn",
+                        },
+                    });
+                }
+                else {
+                    ui.startPlacement({ tool: "marker", kind: "player_spawn" });
+                }
+                return;
+            case "addVolume":
+                if (ground !== null) {
+                    session.dispatch({
+                        type: "addVolume",
+                        volume: {
+                            id: newPlacementId("zone"),
+                            kind: "zone",
+                            shape: "sphere",
+                            center: ground,
+                            radius: 10,
+                            label: "zone",
+                        },
+                    });
+                }
+                else {
+                    ui.startPlacement({ tool: "volume", kind: "zone", shape: "sphere" });
+                }
+                return;
+            case "addPath":
+                ui.startPlacement({ tool: "path", kind: "route" });
+                if (ground !== null)
+                    ui.pushDraftPoint(ground);
+                return;
+            case "addNote":
+                if (ground !== null) {
+                    session.dispatch({
+                        type: "addNote",
+                        note: { id: newPlacementId("note"), text: "New note", position: ground },
+                    });
+                }
+                else {
+                    ui.startPlacement({ tool: "note" });
+                }
+                return;
+            case "openAssets":
+                showPanel("assets");
+                return;
+        }
+    }, [api, closeContextMenu, copySelection, notify, session, ui]);
+    useEffect(() => {
+        const onKey = (event) => {
+            if (event.defaultPrevented)
+                return;
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "s") {
+                event.preventDefault();
+                docSaveRef.current.doSave();
+                return;
+            }
+            const target = event.target;
+            const isTyping = target instanceof HTMLInputElement ||
+                target instanceof HTMLTextAreaElement ||
+                (target instanceof HTMLElement && target.isContentEditable);
+            if (isTyping) {
+                if (event.key === "Escape" && target instanceof HTMLElement)
+                    target.blur();
+                return;
+            }
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "z") {
+                event.preventDefault();
+                session.dispatch({ type: event.shiftKey ? "redo" : "undo" });
+                return;
+            }
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "y") {
+                event.preventDefault();
+                session.dispatch({ type: "redo" });
+                return;
+            }
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "b") {
+                event.preventDefault();
+                showPanel("assets");
+                return;
+            }
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a") {
+                event.preventDefault();
+                const state = 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) : []),
+                ];
+                if (ids.length > 0)
+                    session.dispatch({ type: "select", ids });
+                return;
+            }
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "c") {
+                const count = copySelection();
+                if (count > 0) {
+                    event.preventDefault();
+                    notify(`Copied ${count} object${count === 1 ? "" : "s"}`);
+                }
+                return;
+            }
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "x") {
+                const count = copySelection();
+                if (count > 0) {
+                    event.preventDefault();
+                    session.dispatch({ type: "removeMany", ids: session.getState().selection });
+                    notify(`Cut ${count} object${count === 1 ? "" : "s"}`);
+                }
+                return;
+            }
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "v") {
+                if (clipboardFragment === null)
+                    return;
+                event.preventDefault();
+                const count = editorDocumentSize(clipboardFragment);
+                session.dispatch({ type: "addFragment", fragment: clipboardFragment, offset: { x: 2, y: 0, z: 2 } });
+                notify(`Pasted ${count} object${count === 1 ? "" : "s"}`);
+                return;
+            }
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "d") {
+                event.preventDefault();
+                const selection = session.getState().selection;
+                if (selection.length > 0)
+                    session.dispatch({ type: "duplicate", ids: selection });
+                return;
+            }
+            if (event.key === "Escape") {
+                setHelpOpen(false);
+                const current = ui.getState();
+                if (current.contextMenu !== null) {
+                    ui.patch({ contextMenu: null });
+                    return;
+                }
+                if (current.placement !== null || current.pathDraft.length > 0) {
+                    ui.cancelPlacement();
+                    return;
+                }
+                if (current.pathPoint !== null) {
+                    ui.patch({ pathPoint: null });
+                    return;
+                }
+                if (session.getState().selection.length > 0)
+                    session.dispatch({ type: "clearSelection" });
+                return;
+            }
+            if (event.key === "Enter" && ui.getState().placement?.tool === "path") {
+                event.preventDefault();
+                ui.commitPathDraft(session);
+                return;
+            }
+            if (event.key === "Delete" || event.key === "Backspace") {
+                const selection = session.getState().selection;
+                if (selection.length > 0)
+                    session.dispatch({ type: "removeMany", ids: selection });
+                return;
+            }
+            if (event.key === "?" || event.key === "F1") {
+                event.preventDefault();
+                setHelpOpen((value) => !value);
+                return;
+            }
+            if (event.key === "f" || event.key === "F") {
+                const selected = session.getState().selection[0];
+                if (selected !== undefined)
+                    api.handle({ method: "camera_goto", id: selected });
+                else
+                    api.handle({ method: "camera_frame" });
+                return;
+            }
+            if (event.key === "ArrowUp" ||
+                event.key === "ArrowDown" ||
+                event.key === "ArrowLeft" ||
+                event.key === "ArrowRight" ||
+                event.key === "PageUp" ||
+                event.key === "PageDown") {
+                const selection = session.getState().selection;
+                if (selection.length === 0)
+                    return;
+                event.preventDefault();
+                const step = Math.max(0.5, ui.getState().gridSize) * (event.shiftKey ? 5 : 1);
+                const delta = event.key === "ArrowUp"
+                    ? { x: 0, y: 0, z: -step }
+                    : event.key === "ArrowDown"
+                        ? { x: 0, y: 0, z: step }
+                        : event.key === "ArrowLeft"
+                            ? { x: -step, y: 0, z: 0 }
+                            : event.key === "ArrowRight"
+                                ? { x: step, y: 0, z: 0 }
+                                : event.key === "PageUp"
+                                    ? { x: 0, y: step, z: 0 }
+                                    : { x: 0, y: -step, z: 0 };
+                session.dispatch({ type: "translate", ids: selection, delta }, { coalesce: `nudge:${selection.join(",")}` });
+                return;
+            }
+            if (event.key === "w" || event.key === "W")
+                ui.patch({ gizmoMode: "translate" });
+            if (event.key === "e" || event.key === "E")
+                ui.patch({ gizmoMode: "rotate" });
+            if (event.key === "r" || event.key === "R")
+                ui.patch({ gizmoMode: "scale" });
+            if (event.key === "g" || event.key === "G")
+                ui.patch({ showGrid: !ui.getState().showGrid });
+            if (event.key === "t" || event.key === "T")
+                ui.setTool(ui.getState().tool === "terrain" ? "select" : "terrain");
+            if (event.key === "n" || event.key === "N") {
+                const selected = session.getState().selection[0];
+                if (selected === undefined)
+                    return;
+                const row = outlinerGroupsRef.current
+                    .flatMap((group) => group.rows)
+                    .find((candidate) => candidate.ids.includes(selected));
+                if (row === undefined || row.ids.length < 2)
+                    return;
+                const next = row.ids[(row.ids.indexOf(selected) + 1) % row.ids.length];
+                session.dispatch({ type: "select", ids: [next] });
+                api.handle({ method: "camera_goto", id: next });
+            }
+        };
+        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), []);
+    const placeAsset = (entry) => {
+        const focus = api.getFocusTarget();
+        const focused = session.getState();
+        const focusedId = focused.selection[0];
+        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({
+            method: "place_asset",
+            id: entry.id,
+            kind: entry.kind === "model" ? "prop" : entry.kind,
+            x: position.x,
+            y: position.y,
+            z: position.z,
+        });
+    };
+    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}`);
+            }
+            catch (error) {
+                notify(`Import failed: ${error instanceof Error ? error.message : "invalid JSON"}`, "error");
+            }
+        });
+    };
+    const copyExportJson = () => {
+        const json = session.exportJson(true);
+        if (typeof navigator !== "undefined" && navigator.clipboard !== undefined) {
+            navigator.clipboard.writeText(json).then(() => notify("Document JSON copied to clipboard"), () => notify("Clipboard unavailable — use Export instead", "error"));
+        }
+        else {
+            notify("Clipboard unavailable — use Export instead", "error");
+        }
+    };
+    const currentJson = useMemo(() => session.exportJson(true), [session, state.document]);
+    const dirty = baselineJson !== undefined && currentJson !== baselineJson;
+    const startPlacement = (tool) => {
+        setAddOpen(false);
+        ui.startPlacement(tool);
+    };
+    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("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 ? _jsxs("span", { className: `ml-3 ${perf.fps < 30 ? "text-rose-400" : "text-emerald-400"}`, children: [perf.fps.toFixed(0), " fps \u00B7 ", perf.drawCalls, " draws \u00B7 ", formatTriangles(perf.triangles), " tris"] }) : 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] }));
+}

package/dist/EditorContextMenu.d.ts

@@ -0,0 +1,11 @@
+import type { EditorContextAction } from "./viewportContextMenu.js";
+/**
+ * @internal Headless chrome-skinned viewport context menu (#866). Parent owns placement and action dispatch.
+ */
+export declare function EditorContextMenu({ x, y, actions, onPick, onClose, }: {
+    x: number;
+    y: number;
+    actions: readonly EditorContextAction[];
+    onPick: (action: EditorContextAction) => void;
+    onClose: () => void;
+}): import("react").JSX.Element;