@jgengine/editor 0.10.0

package/dist/CollectionsPanel.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { shallowArrayEqual, useStoreSelector } from "./useStoreSelector.js";
+const INPUT = "rounded-md border border-white/10 bg-black/40 px-2 py-1 outline-none transition-colors placeholder:text-neutral-600 focus:border-cyan-400/60 focus:bg-black/60";
+const BTN = "rounded-md bg-white/[0.04] px-2 py-1 text-neutral-300 ring-1 ring-inset ring-white/[0.06] transition-colors hover:bg-white/10 hover:text-neutral-100";
+const CHIP_BTN = "rounded-md px-1.5 py-0.5 text-[10px] ring-1 ring-inset transition-colors";
+function newCollectionId() {
+    return `col_${Date.now().toString(36)}_${Math.floor(Math.random() * 1296).toString(36)}`;
+}
+/**
+ * Named selection sets / production groups: bookmark the current selection, restore it later,
+ * add-to / remove-from membership, and toggle a collection's color/lock/visibility. Locking a
+ * collection blocks move and delete on its members at the session level (see `isEditorObjectLocked`).
+ * @internal — mounted by `EditorChrome` as a left-aside tab.
+ */
+export function CollectionsPanel({ session }) {
+    const document = useStoreSelector(session, (state) => state.document);
+    const selection = useStoreSelector(session, (state) => state.selection, shallowArrayEqual);
+    const [name, setName] = useState("");
+    const collections = document.collections;
+    const createFromSelection = () => {
+        const trimmed = name.trim();
+        if (trimmed.length === 0 || selection.length === 0)
+            return;
+        session.dispatch({ type: "createCollection", id: newCollectionId(), name: trimmed, memberIds: selection });
+        setName("");
+    };
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2 p-2", children: [_jsxs("div", { className: "flex gap-1", children: [_jsx("input", { className: `min-w-0 flex-1 ${INPUT}`, placeholder: "New collection name\u2026", value: name, onChange: (event) => setName(event.target.value), onKeyDown: (event) => {
+                            if (event.key === "Enter")
+                                createFromSelection();
+                        } }), _jsx("button", { type: "button", className: BTN, disabled: selection.length === 0 || name.trim().length === 0, onClick: createFromSelection, children: "From selection" })] }), selection.length === 0 ? (_jsx("div", { className: "text-[10px] text-neutral-500", children: "Select objects first, then name and save a set." })) : null, _jsx("div", { className: "min-h-0 flex-1 space-y-1 overflow-auto pr-1", children: collections.length === 0 ? (_jsx("div", { className: "text-neutral-600", children: "No collections yet." })) : (collections.map((collection) => (_jsx(CollectionRow, { session: session, collection: collection, selection: selection }, collection.id)))) })] }));
+}
+function CollectionRow({ session, collection, selection, }) {
+    return (_jsxs("div", { className: "space-y-1 rounded-md bg-white/[0.03] p-1.5 ring-1 ring-inset ring-white/[0.06]", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full ring-1 ring-inset ring-white/20", style: { backgroundColor: collection.color ?? "#64748b" } }), _jsx("button", { type: "button", className: "min-w-0 flex-1 truncate text-left text-neutral-200 hover:text-cyan-200", title: "Restore selection", onClick: () => session.dispatch({ type: "selectCollection", id: collection.id }), children: collection.name }), _jsx("span", { className: "text-neutral-500", children: collection.memberIds.length })] }), _jsxs("div", { className: "flex flex-wrap gap-1", children: [_jsx("button", { type: "button", className: `${CHIP_BTN} ${collection.locked === true ? "bg-amber-500/20 text-amber-200 ring-amber-400/30" : "bg-black/30 text-neutral-400 ring-white/[0.06] hover:text-neutral-200"}`, onClick: () => session.dispatch({ type: "setCollectionFlags", id: collection.id, patch: { locked: collection.locked !== true } }), children: collection.locked === true ? "🔒 locked" : "🔓 lock" }), _jsx("button", { type: "button", className: `${CHIP_BTN} ${collection.visible === false ? "bg-black/30 text-neutral-500 ring-white/[0.06]" : "bg-cyan-500/15 text-cyan-200 ring-cyan-400/25"}`, onClick: () => session.dispatch({ type: "setCollectionFlags", id: collection.id, patch: { visible: collection.visible === false } }), children: collection.visible === false ? "hidden" : "visible" }), _jsx("label", { className: "flex items-center gap-1 rounded-md bg-black/30 px-1.5 py-0.5 ring-1 ring-inset ring-white/[0.06]", children: _jsx("input", { type: "color", className: "h-3 w-4 cursor-pointer border-none bg-transparent p-0", value: collection.color ?? "#64748b", onChange: (event) => session.dispatch({ type: "setCollectionFlags", id: collection.id, patch: { color: event.target.value } }) }) }), _jsx("button", { type: "button", className: `${CHIP_BTN} bg-black/30 text-neutral-400 ring-white/[0.06] hover:text-neutral-200 disabled:opacity-30`, disabled: selection.length === 0, onClick: () => session.dispatch({ type: "addToCollection", id: collection.id, ids: selection }), children: "+ add selected" }), _jsx("button", { type: "button", className: `${CHIP_BTN} bg-black/30 text-neutral-400 ring-white/[0.06] hover:text-neutral-200 disabled:opacity-30`, disabled: selection.length === 0, onClick: () => session.dispatch({ type: "removeFromCollection", id: collection.id, ids: selection }), children: "\u2212 remove selected" }), _jsx("button", { type: "button", className: `${CHIP_BTN} ml-auto bg-rose-500/15 text-rose-200 ring-rose-400/25 hover:bg-rose-500/25`, onClick: () => session.dispatch({ type: "deleteCollection", id: collection.id }), children: "Delete" })] })] }));
+}

package/dist/DebugDraw.d.ts

@@ -0,0 +1,17 @@
+import type { EditorDocument, EditorKindVisibility, EditorVec3 } from "@jgengine/core/editor/index";
+/** Live preview of an in-progress path drawing: placed points and the connecting line. */
+export declare function PathDraftPreview({ points }: {
+    points: readonly EditorVec3[];
+}): import("react").JSX.Element;
+/** Renders every visible marker, volume, path, and note from a document as in-scene 3D gizmos. */
+export declare function EditorLayerOverlays({ document, visibility, selection, onSelect, activePathPoint, groundHeightAt, }: {
+    document: EditorDocument;
+    visibility: EditorKindVisibility;
+    selection: readonly string[];
+    onSelect: (id: string) => void;
+    activePathPoint?: {
+        pathId: string;
+        index: number;
+    } | null;
+    groundHeightAt?: (x: number, z: number) => number;
+}): import("react").JSX.Element;

package/dist/DebugDraw.js

@@ -0,0 +1,233 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Html } from "@react-three/drei";
+import { memo, useEffect, useMemo } from "react";
+import * as THREE from "three";
+const DEFAULT_COLORS = {
+    player_spawn: "#22d3ee",
+    boss: "#f43f5e",
+    mob: "#f97316",
+    vendor: "#a78bfa",
+    chest: "#fbbf24",
+    travel: "#34d399",
+    npc: "#60a5fa",
+    poi: "#e879f9",
+    goal: "#f472b6",
+    branch: "#facc15",
+    zone: "#38bdf8",
+    flatten: "#94a3b8",
+    cluster: "#fb923c",
+    aggro: "#ef4444",
+    leash: "#f59e0b",
+    discover: "#4ade80",
+    capture: "#f472b6",
+    prompt: "#c084fc",
+    respawn_skip: "#64748b",
+    road: "#cbd5e1",
+    corridor: "#38bdf8",
+    route: "#e2e8f0",
+    note: "#fde68a",
+};
+const RING_SEGMENTS = 40;
+const MARKER_SEGMENTS = 8;
+function colorFor(kind, override) {
+    return override ?? DEFAULT_COLORS[kind] ?? "#ffffff";
+}
+function isVisible(visibility, kind) {
+    return visibility[kind] !== false;
+}
+function pushRing(out, radius, y, axis, segments = RING_SEGMENTS) {
+    for (let i = 0; i < segments; i += 1) {
+        const a = (i / segments) * Math.PI * 2;
+        const b = ((i + 1) / segments) * Math.PI * 2;
+        const pa = ringPoint(radius, y, axis, a);
+        const pb = ringPoint(radius, y, axis, b);
+        out.push(pa[0], pa[1], pa[2], pb[0], pb[1], pb[2]);
+    }
+}
+function ringPoint(radius, offset, axis, t) {
+    const c = Math.cos(t) * radius;
+    const s = Math.sin(t) * radius;
+    if (axis === "y")
+        return [c, offset, s];
+    if (axis === "x")
+        return [offset, c, s];
+    return [c, s, offset];
+}
+function volumeWireframe(volume) {
+    const out = [];
+    if (volume.shape === "box") {
+        const he = volume.halfExtents ?? { x: volume.radius ?? 5, y: volume.height ?? 4, z: volume.radius ?? 5 };
+        const xs = [-he.x, he.x];
+        const ys = [0, he.y * 2];
+        const zs = [-he.z, he.z];
+        for (const y of ys) {
+            out.push(xs[0], y, zs[0], xs[1], y, zs[0]);
+            out.push(xs[1], y, zs[0], xs[1], y, zs[1]);
+            out.push(xs[1], y, zs[1], xs[0], y, zs[1]);
+            out.push(xs[0], y, zs[1], xs[0], y, zs[0]);
+        }
+        for (const x of xs)
+            for (const z of zs)
+                out.push(x, ys[0], z, x, ys[1], z);
+        return new Float32Array(out);
+    }
+    const radius = Math.max(0.5, volume.radius ?? 5);
+    if (volume.shape === "cylinder") {
+        const height = Math.max(0.5, volume.height ?? 4);
+        pushRing(out, radius, 0.1, "y");
+        pushRing(out, radius, height, "y");
+        for (let i = 0; i < 4; i += 1) {
+            const t = (i / 4) * Math.PI * 2;
+            out.push(Math.cos(t) * radius, 0.1, Math.sin(t) * radius, Math.cos(t) * radius, height, Math.sin(t) * radius);
+        }
+        return new Float32Array(out);
+    }
+    pushRing(out, radius, 0.1, "y");
+    pushRing(out, radius, 0, "x");
+    pushRing(out, radius, 0, "z");
+    return new Float32Array(out);
+}
+const MarkerMesh = memo(function MarkerMesh({ marker, selected, onSelect, sharedSphere, sharedCone, groundHeightAt, }) {
+    const color = colorFor(marker.kind, marker.color);
+    const scale = selected ? 1.25 : 1;
+    const baseY = groundHeightAt !== undefined ? groundHeightAt(marker.position.x, marker.position.z) : marker.position.y;
+    return (_jsxs("group", { position: [marker.position.x, baseY + 1.2, marker.position.z], "rotation-y": marker.rotationY ?? 0, scale: scale, userData: { jgEditorId: marker.id }, onClick: (event) => {
+            event.stopPropagation();
+            onSelect(marker.id);
+        }, children: [_jsx("mesh", { geometry: sharedSphere, children: _jsx("meshBasicMaterial", { color: selected ? "#ffffff" : color }) }), _jsx("mesh", { position: [0, 1.35, 0], geometry: sharedCone, children: _jsx("meshBasicMaterial", { color: color }) })] }));
+});
+/** Shape-true wireframe — ground ring plus vertical profile for spheres, cylinders, and boxes. */
+const VolumeShapeLines = memo(function VolumeShapeLines({ volume, selected, onSelect, }) {
+    const color = colorFor(volume.kind, volume.color);
+    const object = useMemo(() => {
+        const geometry = new THREE.BufferGeometry();
+        geometry.setAttribute("position", new THREE.BufferAttribute(volumeWireframe(volume), 3));
+        const material = new THREE.LineBasicMaterial({
+            color: selected ? "#ffffff" : color,
+            transparent: true,
+            opacity: selected ? 1 : 0.75,
+        });
+        return new THREE.LineSegments(geometry, material);
+    }, [
+        volume.shape,
+        volume.radius,
+        volume.height,
+        volume.halfExtents?.x,
+        volume.halfExtents?.y,
+        volume.halfExtents?.z,
+        color,
+        selected,
+    ]);
+    useEffect(() => () => {
+        object.geometry.dispose();
+        object.material.dispose();
+    }, [object]);
+    return (_jsx("group", { position: [volume.center.x, volume.center.y, volume.center.z], userData: { jgEditorId: volume.id }, onClick: (event) => {
+            event.stopPropagation();
+            onSelect(volume.id);
+        }, children: _jsx("primitive", { object: object }) }));
+});
+const PathRibbon = memo(function PathRibbon({ path, selected, activePointIndex, onSelect, groundHeightAt, }) {
+    const color = colorFor(path.kind, path.color);
+    const yAt = (point) => groundHeightAt !== undefined ? groundHeightAt(point.x, point.z) : point.y;
+    const object = useMemo(() => {
+        if (path.points.length < 2)
+            return null;
+        const stride = !selected && path.points.length > 80 ? 2 : 1;
+        const picked = [];
+        for (let i = 0; i < path.points.length; i += stride) {
+            picked.push(path.points[i]);
+        }
+        const last = path.points[path.points.length - 1];
+        const tail = picked[picked.length - 1];
+        if (tail === undefined || tail.x !== last.x || tail.z !== last.z)
+            picked.push(last);
+        const positions = new Float32Array(picked.length * 3);
+        picked.forEach((point, index) => {
+            positions[index * 3] = point.x;
+            positions[index * 3 + 1] = yAt(point) + 0.8;
+            positions[index * 3 + 2] = point.z;
+        });
+        const geometry = new THREE.BufferGeometry();
+        geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+        const material = new THREE.LineBasicMaterial({
+            color: selected ? "#ffffff" : color,
+            transparent: true,
+            opacity: selected ? 1 : 0.85,
+        });
+        return new THREE.Line(geometry, material);
+    }, [path.points, color, selected, groundHeightAt]);
+    useEffect(() => () => {
+        if (object === null)
+            return;
+        object.geometry.dispose();
+        object.material.dispose();
+    }, [object]);
+    if (object === null)
+        return null;
+    return (_jsxs("group", { userData: { jgEditorId: path.id }, onClick: (event) => {
+            event.stopPropagation();
+            onSelect(path.id);
+        }, children: [_jsx("primitive", { object: object }), selected
+                ? path.points.map((point, index) => (_jsxs("mesh", { position: [point.x, yAt(point) + 0.8, point.z], children: [_jsx("sphereGeometry", { args: [index === activePointIndex ? 0.7 : 0.45, 8, 8] }), _jsx("meshBasicMaterial", { color: index === activePointIndex ? "#22d3ee" : "#ffffff" })] }, index)))
+                : null] }));
+});
+const NotePin = memo(function NotePin({ note, selected, onSelect, groundHeightAt, }) {
+    const color = colorFor("note", note.color);
+    const baseY = groundHeightAt !== undefined ? groundHeightAt(note.position.x, note.position.z) : note.position.y;
+    return (_jsxs("group", { position: [note.position.x, baseY + 1, note.position.z], userData: { jgEditorId: note.id }, onClick: (event) => {
+            event.stopPropagation();
+            onSelect(note.id);
+        }, children: [_jsxs("mesh", { scale: selected ? 1.3 : 1, children: [_jsx("octahedronGeometry", { args: [0.6] }), _jsx("meshBasicMaterial", { color: selected ? "#ffffff" : color })] }), _jsx(Html, { center: true, distanceFactor: 40, style: { pointerEvents: "none" }, children: _jsx("div", { style: {
+                        transform: "translateY(-24px)",
+                        whiteSpace: "nowrap",
+                        maxWidth: "220px",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        fontSize: "11px",
+                        color: "#fde68a",
+                        background: "rgba(0,0,0,0.6)",
+                        borderRadius: "4px",
+                        padding: "1px 6px",
+                    }, children: note.text }) })] }));
+});
+/** Live preview of an in-progress path drawing: placed points and the connecting line. */
+export function PathDraftPreview({ points }) {
+    const object = useMemo(() => {
+        if (points.length < 2)
+            return null;
+        const positions = new Float32Array(points.length * 3);
+        points.forEach((point, index) => {
+            positions[index * 3] = point.x;
+            positions[index * 3 + 1] = point.y + 0.8;
+            positions[index * 3 + 2] = point.z;
+        });
+        const geometry = new THREE.BufferGeometry();
+        geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+        const material = new THREE.LineBasicMaterial({ color: "#22d3ee" });
+        return new THREE.Line(geometry, material);
+    }, [points]);
+    useEffect(() => () => {
+        if (object === null)
+            return;
+        object.geometry.dispose();
+        object.material.dispose();
+    }, [object]);
+    return (_jsxs("group", { children: [object !== null ? _jsx("primitive", { object: object }) : null, points.map((point, index) => (_jsxs("mesh", { position: [point.x, point.y + 0.8, point.z], children: [_jsx("sphereGeometry", { args: [0.5, 8, 8] }), _jsx("meshBasicMaterial", { color: "#22d3ee" })] }, index)))] }));
+}
+/** Renders every visible marker, volume, path, and note from a document as in-scene 3D gizmos. */
+export function EditorLayerOverlays({ document, visibility, selection, onSelect, activePathPoint, groundHeightAt, }) {
+    const selected = useMemo(() => new Set(selection), [selection]);
+    const sharedSphere = useMemo(() => new THREE.SphereGeometry(0.85, MARKER_SEGMENTS, MARKER_SEGMENTS), []);
+    const sharedCone = useMemo(() => new THREE.ConeGeometry(0.35, 0.9, 6), []);
+    useEffect(() => () => {
+        sharedSphere.dispose();
+        sharedCone.dispose();
+    }, [sharedSphere, sharedCone]);
+    const visibilityKey = useMemo(() => JSON.stringify(visibility), [visibility]);
+    const volumes = useMemo(() => document.volumes.filter((volume) => isVisible(visibility, volume.kind)), [document.volumes, visibilityKey, visibility]);
+    const paths = useMemo(() => document.paths.filter((path) => isVisible(visibility, path.kind)), [document.paths, visibilityKey, visibility]);
+    const markers = useMemo(() => document.markers.filter((marker) => isVisible(visibility, marker.kind)), [document.markers, visibilityKey, visibility]);
+    const notes = useMemo(() => (isVisible(visibility, "note") ? document.annotations : []), [document.annotations, visibilityKey, visibility]);
+    return (_jsxs("group", { children: [volumes.map((volume) => (_jsx(VolumeShapeLines, { volume: volume, selected: selected.has(volume.id), onSelect: onSelect }, volume.id))), paths.map((path) => (_jsx(PathRibbon, { path: path, selected: selected.has(path.id), activePointIndex: activePathPoint != null && activePathPoint.pathId === path.id ? activePathPoint.index : null, onSelect: onSelect, groundHeightAt: groundHeightAt }, path.id))), markers.map((marker) => (_jsx(MarkerMesh, { marker: marker, selected: selected.has(marker.id), onSelect: onSelect, sharedSphere: sharedSphere, sharedCone: sharedCone, groundHeightAt: groundHeightAt }, marker.id))), notes.map((note) => (_jsx(NotePin, { note: note, selected: selected.has(note.id), onSelect: onSelect, groundHeightAt: groundHeightAt }, note.id)))] }));
+}

package/dist/EditorApp.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentType } from "react";
+import type { EditorCatalogDefinition, EditorLayersInput } from "@jgengine/core/editor/index";
+import type { PlayableGame } from "@jgengine/shell/registry";
+import { type EditorRunMode } from "./session.js";
+/** Props for mounting the scene editor over a playable game. */
+export interface EditorAppProps {
+    gameId: string;
+    playable: PlayableGame;
+    layers?: EditorLayersInput;
+    /** Game-exported gameplay catalog definitions (schemas + defaults) for the Data panel / catalog RPC. */
+    catalogs?: readonly EditorCatalogDefinition[];
+    save?: EditorSaveFn;
+    /** Skin for the play/walk escape chip. Omit for the default pill; pass `null` to hide it (F2+E still exits); pass a component to place the game's own. */
+    modeChip?: ComponentType<{
+        mode: EditorRunMode;
+        onExit: () => void;
+    }> | null;
+}
+/** Persists an exported document JSON; resolves with where it landed or why it failed. */
+export type EditorSaveFn = (json: string) => Promise<{
+    ok: boolean;
+    path?: string;
+    error?: string;
+}>;
+/** Top-level scene editor: author spawns/zones/paths/notes visually over edit, walk, or play modes. */
+export declare function EditorApp({ gameId, playable, layers, catalogs, save, modeChip }: EditorAppProps): import("react").JSX.Element;

package/dist/EditorApp.js

@@ -0,0 +1,333 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { editorDocumentBounds, findEditorMarker } from "@jgengine/core/editor/index";
+import { getSaveEndpoint } from "@jgengine/core/devtools/saveEndpoint";
+import { useGameContext } from "@jgengine/react/provider";
+import { GamePlayerShell } from "@jgengine/shell/GamePlayerShell";
+import { assetsFromCatalog } from "./AssetBrowser.js";
+import { EditorCameraDriver } from "./EditorCameraDriver.js";
+import { EditorChrome } from "./EditorChrome.js";
+import { EditorLayerOverlays, PathDraftPreview } from "./DebugDraw.js";
+import { MaterialDropZone } from "./MaterialDropZone.js";
+import { PerfProbe } from "./PerfProbe.js";
+import { ScatterPreview } from "./ScatterPreview.js";
+import { SelectionGizmo, ViewportSelect } from "./SelectionGizmo.js";
+import { TerrainSculpt } from "./TerrainSculpt.js";
+import { RuntimePlayInspectorChrome, RuntimePlayPublisher } from "./RuntimePlayBridge.js";
+import { createEditorHost } from "./session.js";
+import { createEditorUiStore } from "./uiStore.js";
+import { useF2Chord } from "./useF2Chord.js";
+import { shallowArrayEqual, useStoreSelector } from "./useStoreSelector.js";
+function endpointSaver(gameId) {
+    const endpoint = getSaveEndpoint();
+    if (endpoint === null)
+        return undefined;
+    return async (json) => {
+        try {
+            const response = await fetch(endpoint.url, {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ kind: "editor-document", gameId, json }),
+            });
+            return (await response.json());
+        }
+        catch (error) {
+            return { ok: false, error: error instanceof Error ? error.message : String(error) };
+        }
+    };
+}
+function prefsKey(gameId) {
+    return `jgeditor:prefs:${gameId}`;
+}
+function draftKey(gameId) {
+    return `jgeditor:draft:${gameId}`;
+}
+function readDraft(gameId) {
+    try {
+        return localStorage.getItem(draftKey(gameId));
+    }
+    catch {
+        return null;
+    }
+}
+function writeDraft(gameId, json) {
+    try {
+        if (json === null)
+            localStorage.removeItem(draftKey(gameId));
+        else
+            localStorage.setItem(draftKey(gameId), json);
+    }
+    catch {
+        return;
+    }
+}
+const DRAFT_DEBOUNCE_MS = 800;
+function loadPrefs(gameId) {
+    try {
+        const raw = localStorage.getItem(prefsKey(gameId));
+        if (raw === null)
+            return {};
+        const parsed = JSON.parse(raw);
+        return typeof parsed === "object" && parsed !== null ? parsed : {};
+    }
+    catch {
+        return {};
+    }
+}
+function savePrefs(gameId, prefs) {
+    try {
+        localStorage.setItem(prefsKey(gameId), JSON.stringify(prefs));
+    }
+    catch {
+        return;
+    }
+}
+function EditorWorldOverlay({ api, ui, world, }) {
+    const session = api.getSession();
+    const ctx = useGameContext();
+    const visibilityStore = useMemo(() => ({ getState: api.getVisibility, subscribe: api.subscribeVisibility }), [api]);
+    const document = useStoreSelector(session, (s) => s.document);
+    const selection = useStoreSelector(session, (s) => s.selection, shallowArrayEqual);
+    const visibility = useStoreSelector(visibilityStore, (v) => v);
+    const showGrid = useStoreSelector(ui, (s) => s.showGrid);
+    const pathPoint = useStoreSelector(ui, (s) => s.pathPoint);
+    const pathDraft = useStoreSelector(ui, (s) => s.pathDraft);
+    const groundHeightAt = useCallback((x, z) => ctx.world.groundHeightAt(x, z), [ctx.world]);
+    return (_jsxs(_Fragment, { children: [_jsx(PerfProbe, { api: api }), _jsx(EditorCameraDriver, { api: api }), _jsx(ViewportSelect, { api: api, ui: ui }), _jsx(MaterialDropZone, { api: api }), _jsx(TerrainSculpt, { api: api, ui: ui, world: world }), _jsx(ScatterPreview, { api: api }), showGrid ? _jsx("gridHelper", { args: [400, 80, "#3b4252", "#20242e"], position: [0, 0.05, 0] }) : null, _jsx(EditorLayerOverlays, { document: document, visibility: visibility, selection: selection, onSelect: (id) => session.dispatch({ type: "select", ids: [id] }), activePathPoint: pathPoint, groundHeightAt: groundHeightAt }), pathDraft.length > 0 ? _jsx(PathDraftPreview, { points: pathDraft }) : null, _jsx(SelectionGizmo, { session: session, ui: ui, groundSnap: groundHeightAt })] }));
+}
+/** Default skin for the play/walk escape chip; swap via `EditorAppProps.modeChip`, or pass `null` to hide it (F2+E still exits). */
+function EditorModeChip({ mode, onExit }) {
+    return (_jsx("div", { className: "pointer-events-none absolute inset-x-0 top-2 z-50 flex justify-center", children: _jsxs("button", { type: "button", className: "pointer-events-auto rounded-full border border-white/10 bg-black/70 px-4 py-1.5 text-[11px] text-neutral-100 shadow-lg shadow-black/40 backdrop-blur-md transition-colors hover:bg-black/90", onClick: onExit, children: [mode === "play" ? "▶ Playing" : "🚶 Walking", " \u2014 back to editor (F2+E)"] }) }));
+}
+/** Headless placement: wires the F2+E exit chord and renders `chip` (the default skin, a
+ * game-supplied override, or nothing when `chip` is `null`) — the chord always works either way. */
+function EditorModeChipHost({ api, mode, chip, }) {
+    const onExit = useCallback(() => api.setMode("edit"), [api]);
+    useF2Chord("KeyE", onExit);
+    if (chip === null)
+        return null;
+    const Chip = chip;
+    return _jsx(Chip, { mode: mode, onExit: onExit });
+}
+/** Prefer a grounded spawn for the first shot — full-world framing clips past default far=300. */
+function resolveEditorCamera(document) {
+    const spawn = findEditorMarker(document, "player_spawn") ??
+        findEditorMarker(document, "car_start") ??
+        document.markers[0];
+    const bounds = editorDocumentBounds(document);
+    const worldSpan = bounds === null
+        ? 200
+        : Math.max(80, Math.hypot(bounds.max.x - bounds.min.x, bounds.max.z - bounds.min.z) * 0.55);
+    if (spawn !== undefined) {
+        return {
+            target: { x: spawn.position.x, y: spawn.position.y + 8, z: spawn.position.z },
+            span: Math.min(180, Math.max(60, worldSpan * 0.12)),
+            far: Math.max(4000, worldSpan * 4),
+        };
+    }
+    if (bounds === null) {
+        return { target: { x: 0, y: 12, z: 0 }, span: 80, far: 4000 };
+    }
+    return {
+        target: {
+            x: (bounds.min.x + bounds.max.x) / 2,
+            y: (bounds.min.y + bounds.max.y) / 2 + 12,
+            z: (bounds.min.z + bounds.max.z) / 2,
+        },
+        span: Math.min(220, worldSpan),
+        far: Math.max(4000, worldSpan * 4),
+    };
+}
+/** Top-level scene editor: author spawns/zones/paths/notes visually over edit, walk, or play modes. */
+export function EditorApp({ gameId, playable, layers, catalogs, save, modeChip }) {
+    const resolvedModeChip = modeChip === undefined ? EditorModeChip : modeChip;
+    const saveFn = useMemo(() => save ?? endpointSaver(gameId), [save, gameId]);
+    const uiStoreRef = useRef(null);
+    if (uiStoreRef.current === null)
+        uiStoreRef.current = createEditorUiStore();
+    const ui = uiStoreRef.current;
+    const [mode, setModeState] = useState("edit");
+    const catalogAssets = useMemo(() => {
+        try {
+            const ids = playable.game.assets.ids();
+            return assetsFromCatalog(ids, (id) => playable.game.assets.resolve(id));
+        }
+        catch {
+            return [];
+        }
+    }, [playable]);
+    const host = useMemo(() => {
+        const created = createEditorHost({
+            gameId,
+            layers,
+            catalogs,
+            assets: catalogAssets,
+        });
+        return { ...created, baselineJson: created.session.exportJson(true) };
+    }, [gameId, layers, catalogs, catalogAssets]);
+    useEffect(() => host.dispose, [host]);
+    useEffect(() => host.api.subscribeMode(setModeState), [host]);
+    const [pendingDraft, setPendingDraft] = useState(null);
+    useEffect(() => {
+        const draft = readDraft(gameId);
+        if (draft !== null && draft !== host.baselineJson)
+            setPendingDraft(draft);
+        let timer = null;
+        const unsubscribe = host.session.subscribe(() => {
+            if (timer !== null)
+                clearTimeout(timer);
+            timer = setTimeout(() => {
+                const json = host.session.exportJson(true);
+                writeDraft(gameId, json === host.baselineJson ? null : json);
+            }, DRAFT_DEBOUNCE_MS);
+        });
+        return () => {
+            if (timer !== null)
+                clearTimeout(timer);
+            unsubscribe();
+        };
+    }, [gameId, host]);
+    const restoreDraft = () => {
+        if (pendingDraft === null)
+            return;
+        try {
+            host.session.dispatch({ type: "importJson", json: pendingDraft });
+        }
+        catch {
+            writeDraft(gameId, null);
+        }
+        setPendingDraft(null);
+    };
+    const discardDraft = () => {
+        writeDraft(gameId, null);
+        setPendingDraft(null);
+    };
+    useEffect(() => {
+        const prefs = loadPrefs(gameId);
+        if (prefs.visibility !== undefined) {
+            host.api.setVisibility({ ...host.api.getVisibility(), ...prefs.visibility });
+        }
+        ui.patch({
+            ...(prefs.snapMode === undefined ? {} : { snapMode: prefs.snapMode }),
+            ...(prefs.gridSize === undefined ? {} : { gridSize: prefs.gridSize }),
+            ...(prefs.showGrid === undefined ? {} : { showGrid: prefs.showGrid }),
+        });
+        const persist = () => {
+            const state = ui.getState();
+            savePrefs(gameId, {
+                visibility: host.api.getVisibility(),
+                snapMode: state.snapMode,
+                gridSize: state.gridSize,
+                showGrid: state.showGrid,
+            });
+        };
+        const unsubscribeVisibility = host.api.subscribeVisibility(persist);
+        const unsubscribeUi = ui.subscribe(persist);
+        return () => {
+            unsubscribeVisibility();
+            unsubscribeUi();
+        };
+    }, [gameId, host, ui]);
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        document.documentElement.dataset.jgEditor = "1";
+        document.documentElement.dataset.jgEditorGame = gameId;
+        const frame = requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                document.documentElement.dataset.jgFrameReady = "1";
+                if (document.documentElement.dataset.jgCapture === "preparing") {
+                    document.documentElement.dataset.jgCapture = "ready";
+                }
+            });
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+            delete document.documentElement.dataset.jgEditor;
+            delete document.documentElement.dataset.jgEditorGame;
+        };
+    }, [gameId]);
+    const initialCamera = useMemo(() => resolveEditorCamera(host.session.getState().document), [host]);
+    const editorPlayable = useMemo(() => {
+        const frozenLoop = {
+            onInit: playable.loop.onInit,
+            onNewPlayer: playable.loop.onNewPlayer,
+            onTick: () => {
+                // Placement/walk views freeze combat/AI so the frame isn't burned on sim.
+            },
+            onPlayerLeave: playable.loop.onPlayerLeave,
+            onReset: playable.loop.onReset,
+            onDispose: playable.loop.onDispose,
+        };
+        if (mode === "play") {
+            const BaseUI = playable.GameUI;
+            const BaseOverlay = playable.WorldOverlay;
+            const useBuiltinPlayChrome = resolvedModeChip === EditorModeChip;
+            return {
+                ...playable,
+                GameUI: function EditorPlayUi() {
+                    const onExit = useCallback(() => host.api.setMode("edit"), []);
+                    useF2Chord("KeyE", onExit);
+                    return (_jsxs(_Fragment, { children: [BaseUI !== undefined ? _jsx(BaseUI, {}) : null, useBuiltinPlayChrome ? (_jsx(RuntimePlayInspectorChrome, { api: host.api, onExit: onExit })) : (_jsx(EditorModeChipHost, { api: host.api, mode: "play", chip: resolvedModeChip }))] }));
+                },
+                WorldOverlay: function EditorPlayOverlay({ ctx }) {
+                    return (_jsxs(_Fragment, { children: [BaseOverlay !== undefined ? _jsx(BaseOverlay, { ctx: ctx }) : null, _jsx(PerfProbe, { api: host.api }), _jsx(RuntimePlayPublisher, { api: host.api })] }));
+                },
+            };
+        }
+        if (mode === "walk") {
+            return {
+                ...playable,
+                GameUI: function EditorWalkUi() {
+                    return _jsx(EditorModeChipHost, { api: host.api, mode: "walk", chip: resolvedModeChip });
+                },
+                WorldOverlay: function EditorWalkOverlay() {
+                    const ctx = useGameContext();
+                    return (_jsxs(_Fragment, { children: [_jsx(PerfProbe, { api: host.api }), _jsx(EditorLayerOverlays, { document: host.api.getSession().getState().document, visibility: host.api.getVisibility(), selection: host.api.getSession().getState().selection, onSelect: () => { }, groundHeightAt: (x, z) => ctx.world.groundHeightAt(x, z) })] }));
+                },
+                loop: frozenLoop,
+            };
+        }
+        const WorldOverlay = function EditorOverlay() {
+            return _jsx(EditorWorldOverlay, { api: host.api, ui: ui, world: playable.game.world });
+        };
+        const GameUI = function EditorUi() {
+            return _jsx(EditorChrome, { gameId: gameId, session: host.api.getSession(), api: host.api, assets: catalogAssets, ui: ui, baselineJson: host.baselineJson, save: saveFn });
+        };
+        const { target, span, far } = initialCamera;
+        return {
+            ...playable,
+            GameUI,
+            WorldOverlay,
+            shadows: false,
+            loop: frozenLoop,
+            // Drop FPS gun chrome; keep world only.
+            // WorldOverlay above is the editor layers, not PandoraViewmodel.
+            camera: {
+                rig: "inspection",
+                frustum: {
+                    fov: 55,
+                    near: 0.5,
+                    far,
+                },
+                inspection: {
+                    target,
+                    initialDistance: span,
+                    initialPosition: {
+                        x: target.x + span * 0.35,
+                        y: target.y + span * 0.55,
+                        z: target.z + span * 0.75,
+                    },
+                    minDistance: 4,
+                    maxDistance: Math.max(far * 0.9, span * 8),
+                    pan: true,
+                    rotateSpeed: 0.7,
+                    zoomSpeed: 1.1,
+                    minPolarAngle: 0.15,
+                    maxPolarAngle: Math.PI * 0.48,
+                },
+            },
+        };
+    }, [playable, host, gameId, initialCamera, catalogAssets, ui, mode, saveFn, resolvedModeChip]);
+    return (_jsxs("div", { className: "relative h-full w-full bg-neutral-950", "data-jg-editor": "1", "data-jg-editor-game": gameId, children: [_jsx(GamePlayerShell, { playable: editorPlayable }), pendingDraft !== null && mode === "edit" ? (_jsxs("div", { className: "absolute left-1/2 top-14 z-[60] flex -translate-x-1/2 items-center gap-3 rounded-xl border border-amber-400/30 bg-amber-950/90 px-4 py-2 text-xs text-amber-100 shadow-2xl shadow-black/50 backdrop-blur-md", children: [_jsx("span", { children: "Unsaved edits from a previous session found." }), _jsx("button", { type: "button", className: "rounded-md bg-gradient-to-b from-amber-500 to-amber-600 px-2.5 py-1 font-semibold text-white shadow-md shadow-amber-950/50 transition-colors hover:from-amber-400 hover:to-amber-500", onClick: restoreDraft, children: "Restore" }), _jsx("button", { type: "button", className: "rounded-md bg-white/[0.07] px-2.5 py-1 ring-1 ring-inset ring-white/[0.06] transition-colors hover:bg-white/15", onClick: discardDraft, children: "Discard" })] })) : null] }));
+}

package/dist/EditorCameraDriver.d.ts

@@ -0,0 +1,5 @@
+import type { EditorHostApi } from "./session.js";
+/** Smoothly pans the orbit camera to the editor host's focus target when it changes. */
+export declare const EditorCameraDriver: import("react").MemoExoticComponent<({ api }: {
+    api: EditorHostApi;
+}) => null>;