@jgengine/editor 0.10.0

package/dist/SelectionGizmo.js

@@ -0,0 +1,455 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useThree } from "@react-three/fiber";
+import { memo, useEffect, useMemo } from "react";
+import * as THREE from "three";
+import { findEditorMarker, findEditorNote, findEditorPath, findEditorVolume, } from "@jgengine/core/editor/index";
+import { TransformGizmo, } from "@jgengine/shell/structures/TransformGizmo";
+import { isPointerClick } from "./viewportContextMenu.js";
+import { newPlacementId } from "./uiStore.js";
+import { useStoreSelector } from "./useStoreSelector.js";
+const CLICK_SLOP_PX = 5;
+const SCREEN_PICK_RADIUS_PX = 22;
+const PATH_HANDLE_RADIUS_PX = 14;
+const MARKER_LIFT = 1.2;
+const NOTE_LIFT = 1;
+const SELECT_TAGS = ["jgEditorId", "jgEntityId", "jgObjectId"];
+const GROUND_PLANE = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
+function selectGizmoUi(state) {
+    return { gizmoMode: state.gizmoMode, snapMode: state.snapMode, gridSize: state.gridSize, pathPoint: state.pathPoint };
+}
+function gizmoUiEqual(a, b) {
+    return a.gizmoMode === b.gizmoMode && a.snapMode === b.snapMode && a.gridSize === b.gridSize && a.pathPoint === b.pathPoint;
+}
+/** Reads only the gizmo-relevant UI slice (mode, snap, path-point anchor) — skips re-render on
+ * unrelated UI churn (sculpt/paint drags, tool switches, placement) that the old blanket
+ * `ui.subscribe` force-update re-rendered the gizmo for. */
+function useGizmoUiState(ui) {
+    return useStoreSelector(ui, selectGizmoUi, gizmoUiEqual);
+}
+function vecEqual(a, b) {
+    return a.x === b.x && a.y === b.y && a.z === b.z;
+}
+function pathCentroid(points) {
+    let x = 0;
+    let y = 0;
+    let z = 0;
+    for (const point of points) {
+        x += point.x;
+        y += point.y;
+        z += point.z;
+    }
+    const n = Math.max(1, points.length);
+    return { x: x / n, y: y / n, z: z / n };
+}
+function isEditorOverlayNode(node) {
+    let current = node;
+    while (current !== null) {
+        if (current.type.startsWith("TransformControls"))
+            return true;
+        for (const tag of SELECT_TAGS) {
+            if (typeof current.userData[tag] === "string")
+                return true;
+        }
+        current = current.parent;
+    }
+    return false;
+}
+/**
+ * Canvas click-to-select and click-to-place. Document objects pick by screen proximity
+ * (registration always matches what you see) with click-cycling through stacked candidates
+ * and shift/ctrl additive selection; everything else picks by occlusion-ordered raycast
+ * against the tagged scene graph. When a placement tool is armed, clicks author new
+ * markers, volumes, notes, or path points at the ground hit instead of selecting.
+ */
+export const ViewportSelect = memo(function ViewportSelect({ api, ui }) {
+    const gl = useThree((state) => state.gl);
+    const camera = useThree((state) => state.camera);
+    const scene = useThree((state) => state.scene);
+    useEffect(() => {
+        const canvas = gl.domElement;
+        const raycaster = new THREE.Raycaster();
+        const ndc = new THREE.Vector2();
+        const projected = new THREE.Vector3();
+        const planeHit = new THREE.Vector3();
+        let down = null;
+        const session = () => api.getSession();
+        const screenDistance = (point, lift, clickX, clickY, rect) => {
+            projected.set(point.x, point.y + lift, point.z).project(camera);
+            if (projected.z < -1 || projected.z > 1)
+                return null;
+            const px = (projected.x * 0.5 + 0.5) * rect.width;
+            const py = (-projected.y * 0.5 + 0.5) * rect.height;
+            return Math.hypot(px - clickX, py - clickY);
+        };
+        const groundPoint = (clickX, clickY, rect) => {
+            ndc.set((clickX / rect.width) * 2 - 1, -(clickY / rect.height) * 2 + 1);
+            raycaster.setFromCamera(ndc, camera);
+            for (const hit of raycaster.intersectObjects(scene.children, true)) {
+                if (!hit.object.isMesh || hit.object.visible === false)
+                    continue;
+                if (isEditorOverlayNode(hit.object))
+                    continue;
+                return { x: hit.point.x, y: hit.point.y, z: hit.point.z };
+            }
+            if (raycaster.ray.intersectPlane(GROUND_PLANE, planeHit) !== null) {
+                return { x: planeHit.x, y: planeHit.y, z: planeHit.z };
+            }
+            return null;
+        };
+        const place = (point, keepTool) => {
+            const placement = ui.getState().placement;
+            if (placement === null)
+                return;
+            if (placement.tool === "path") {
+                ui.pushDraftPoint(point);
+                return;
+            }
+            if (placement.tool === "marker") {
+                session().dispatch({
+                    type: "addMarker",
+                    marker: {
+                        id: newPlacementId(placement.kind),
+                        kind: placement.kind,
+                        position: point,
+                        label: placement.kind,
+                    },
+                });
+            }
+            else if (placement.tool === "volume") {
+                session().dispatch({
+                    type: "addVolume",
+                    volume: {
+                        id: newPlacementId(placement.kind),
+                        kind: placement.kind,
+                        shape: placement.shape,
+                        center: point,
+                        ...(placement.shape === "box" ? { halfExtents: { x: 8, y: 4, z: 8 } } : { radius: 10 }),
+                        ...(placement.shape === "cylinder" ? { height: 8 } : {}),
+                        label: placement.kind,
+                    },
+                });
+            }
+            else {
+                session().dispatch({
+                    type: "addNote",
+                    note: {
+                        id: newPlacementId("note"),
+                        text: "New note",
+                        position: point,
+                    },
+                });
+            }
+            if (!keepTool)
+                ui.cancelPlacement();
+        };
+        const pickDocumentId = (clickX, clickY, rect, cycleFrom) => {
+            const state = session().getState();
+            const visibility = api.getVisibility();
+            const candidates = [];
+            const consider = (id, kind, point, lift) => {
+                if (visibility[kind] === false)
+                    return;
+                const distance = screenDistance(point, lift, clickX, clickY, rect);
+                if (distance !== null && distance < SCREEN_PICK_RADIUS_PX)
+                    candidates.push({ id, distance });
+            };
+            for (const marker of state.document.markers)
+                consider(marker.id, marker.kind, marker.position, MARKER_LIFT);
+            for (const volume of state.document.volumes)
+                consider(volume.id, volume.kind, volume.center, 0);
+            for (const note of state.document.annotations)
+                consider(note.id, "note", note.position, NOTE_LIFT);
+            for (const path of state.document.paths) {
+                if (visibility[path.kind] === false)
+                    continue;
+                let best = null;
+                for (const point of path.points) {
+                    const distance = screenDistance(point, 0.8, clickX, clickY, rect);
+                    if (distance !== null && distance < SCREEN_PICK_RADIUS_PX && (best === null || distance < best)) {
+                        best = distance;
+                    }
+                }
+                if (best !== null)
+                    candidates.push({ id: path.id, distance: best });
+            }
+            candidates.sort((a, b) => a.distance - b.distance);
+            if (candidates.length === 0)
+                return null;
+            if (cycleFrom !== undefined) {
+                const at = candidates.findIndex((candidate) => candidate.id === cycleFrom);
+                if (at >= 0)
+                    return candidates[(at + 1) % candidates.length].id;
+            }
+            return candidates[0].id;
+        };
+        const pickTaggedId = (clickX, clickY, rect) => {
+            ndc.set((clickX / rect.width) * 2 - 1, -(clickY / rect.height) * 2 + 1);
+            raycaster.setFromCamera(ndc, camera);
+            for (const hit of raycaster.intersectObjects(scene.children, true)) {
+                if (!hit.object.isMesh || hit.object.visible === false)
+                    continue;
+                let node = hit.object;
+                let gizmoHit = false;
+                let taggedId = null;
+                while (node !== null && taggedId === null && !gizmoHit) {
+                    if (node.type.startsWith("TransformControls"))
+                        gizmoHit = true;
+                    for (const tag of SELECT_TAGS) {
+                        const id = node.userData[tag];
+                        if (typeof id === "string") {
+                            taggedId = id;
+                            break;
+                        }
+                    }
+                    node = node.parent;
+                }
+                if (gizmoHit)
+                    continue;
+                if (taggedId !== null)
+                    return taggedId;
+                break;
+            }
+            return null;
+        };
+        const onDown = (event) => {
+            if (ui.getState().tool === "terrain")
+                return;
+            if (event.button === 0 || event.button === 2)
+                down = { x: event.clientX, y: event.clientY, button: event.button };
+        };
+        const onUp = (event) => {
+            if (ui.getState().tool === "terrain")
+                return;
+            if (down === null || event.button !== down.button)
+                return;
+            const start = down;
+            down = null;
+            const slop = event.button === 2 ? undefined : CLICK_SLOP_PX;
+            if (!isPointerClick(start.x, start.y, event.clientX, event.clientY, slop))
+                return;
+            const rect = canvas.getBoundingClientRect();
+            const clickX = event.clientX - rect.left;
+            const clickY = event.clientY - rect.top;
+            if (event.button === 2) {
+                const docId = pickDocumentId(clickX, clickY, rect);
+                const taggedId = docId === null ? pickTaggedId(clickX, clickY, rect) : null;
+                const hitId = docId ?? taggedId;
+                if (hitId !== null) {
+                    const selection = session().getState().selection;
+                    if (!selection.includes(hitId)) {
+                        session().dispatch({ type: "select", ids: [hitId] });
+                    }
+                }
+                ui.patch({
+                    pathPoint: null,
+                    contextMenu: {
+                        clientX: event.clientX,
+                        clientY: event.clientY,
+                        hitId,
+                        ground: groundPoint(clickX, clickY, rect),
+                    },
+                });
+                return;
+            }
+            const additive = event.shiftKey || event.ctrlKey || event.metaKey;
+            if (ui.getState().placement !== null) {
+                const point = groundPoint(clickX, clickY, rect);
+                if (point !== null)
+                    place(point, event.shiftKey || ui.getState().placement?.tool === "path");
+                return;
+            }
+            const state = session().getState();
+            const selection = state.selection;
+            const selectedPathId = selection.length === 1 ? selection[0] : undefined;
+            const selectedPath = selectedPathId === undefined ? undefined : findEditorPath(state.document, selectedPathId);
+            if (selectedPath !== undefined) {
+                let bestIndex = -1;
+                let bestHandle = PATH_HANDLE_RADIUS_PX;
+                selectedPath.points.forEach((point, index) => {
+                    const distance = screenDistance(point, 0.8, clickX, clickY, rect);
+                    if (distance !== null && distance < bestHandle) {
+                        bestHandle = distance;
+                        bestIndex = index;
+                    }
+                });
+                if (bestIndex >= 0) {
+                    ui.patch({ pathPoint: { pathId: selectedPath.id, index: bestIndex } });
+                    return;
+                }
+            }
+            const primary = selection[0];
+            const docId = pickDocumentId(clickX, clickY, rect, !additive && primary !== undefined ? primary : undefined);
+            if (docId !== null) {
+                if (additive) {
+                    const next = selection.includes(docId)
+                        ? selection.filter((id) => id !== docId)
+                        : [...selection, docId];
+                    session().dispatch({ type: "select", ids: next });
+                }
+                else {
+                    session().dispatch({ type: "select", ids: [docId] });
+                }
+                ui.patch({ pathPoint: null, contextMenu: null });
+                return;
+            }
+            const taggedId = pickTaggedId(clickX, clickY, rect);
+            if (taggedId !== null) {
+                if (additive) {
+                    const next = selection.includes(taggedId)
+                        ? selection.filter((id) => id !== taggedId)
+                        : [...selection, taggedId];
+                    session().dispatch({ type: "select", ids: next });
+                }
+                else {
+                    session().dispatch({ type: "select", ids: [taggedId] });
+                }
+                ui.patch({ pathPoint: null, contextMenu: null });
+                return;
+            }
+            if (!additive) {
+                ui.patch({ pathPoint: null, contextMenu: null });
+                if (selection.length > 0)
+                    session().dispatch({ type: "clearSelection" });
+            }
+        };
+        const onContextMenu = (event) => {
+            event.preventDefault();
+        };
+        canvas.addEventListener("pointerdown", onDown);
+        canvas.addEventListener("pointerup", onUp);
+        canvas.addEventListener("contextmenu", onContextMenu);
+        return () => {
+            canvas.removeEventListener("pointerdown", onDown);
+            canvas.removeEventListener("pointerup", onUp);
+            canvas.removeEventListener("contextmenu", onContextMenu);
+        };
+    }, [gl, camera, scene, api, ui]);
+    return null;
+});
+function resolveTarget(session, selectedId, pathPoint) {
+    const { document } = session.getState();
+    if (pathPoint !== null) {
+        const path = findEditorPath(document, pathPoint.pathId);
+        const point = path?.points[pathPoint.index];
+        if (point !== undefined)
+            return { position: point, lift: 0.8, rotationY: 0, kind: "pathPoint" };
+    }
+    if (selectedId === undefined)
+        return null;
+    const marker = findEditorMarker(document, selectedId);
+    if (marker !== undefined) {
+        return { position: marker.position, lift: MARKER_LIFT, rotationY: marker.rotationY ?? 0, kind: "marker" };
+    }
+    const volume = findEditorVolume(document, selectedId);
+    if (volume !== undefined)
+        return { position: volume.center, lift: 0, rotationY: 0, kind: "volume" };
+    const path = findEditorPath(document, selectedId);
+    if (path !== undefined && path.points.length > 0) {
+        return { position: pathCentroid(path.points), lift: 0.8, rotationY: 0, kind: "path" };
+    }
+    const note = findEditorNote(document, selectedId);
+    if (note !== undefined)
+        return { position: note.position, lift: NOTE_LIFT, rotationY: 0, kind: "note" };
+    return null;
+}
+function effectiveMode(mode, kind) {
+    if (kind === "marker")
+        return mode === "scale" ? "translate" : mode;
+    if (kind === "volume")
+        return mode === "rotate" ? "translate" : mode;
+    return "translate";
+}
+/**
+ * Drag-to-transform gizmo bound to the current selection, dispatching editor commands on
+ * release. Mounts the shared shell `TransformGizmo` and maps release poses onto editor
+ * commands (multi-select translate, volume scale, path vertex move).
+ */
+export const SelectionGizmo = memo(function SelectionGizmo({ session, ui, groundSnap, }) {
+    const uiState = useGizmoUiState(ui);
+    const state = session.getState();
+    const selectedId = state.selection[0];
+    const target = useMemo(() => resolveTarget(session, selectedId, uiState.pathPoint), [state, selectedId, uiState.pathPoint, session]);
+    const mode = target === null ? "translate" : effectiveMode(uiState.gizmoMode, target.kind);
+    if (target === null)
+        return null;
+    const onRelease = (pose) => {
+        const dropped = pose.position;
+        if (target.kind === "pathPoint" && uiState.pathPoint !== null) {
+            const path = findEditorPath(session.getState().document, uiState.pathPoint.pathId);
+            if (path === undefined)
+                return;
+            const original = path.points[uiState.pathPoint.index];
+            if (original !== undefined && vecEqual(original, dropped))
+                return;
+            const points = path.points.map((point, index) => index === uiState.pathPoint.index ? dropped : point);
+            session.dispatch({ type: "setPath", id: path.id, patch: { points } });
+            return;
+        }
+        if (mode === "scale" && target.kind === "volume" && selectedId !== undefined) {
+            const volume = findEditorVolume(session.getState().document, selectedId);
+            if (volume === undefined)
+                return;
+            const sx = Math.abs(pose.scale.x);
+            const sy = Math.abs(pose.scale.y);
+            const sz = Math.abs(pose.scale.z);
+            if (sx === 1 && sy === 1 && sz === 1 && vecEqual(dropped, volume.center))
+                return;
+            if (volume.shape === "box" && volume.halfExtents !== undefined) {
+                session.dispatch({
+                    type: "setVolume",
+                    id: selectedId,
+                    patch: {
+                        center: dropped,
+                        halfExtents: {
+                            x: Math.max(0.5, volume.halfExtents.x * sx),
+                            y: Math.max(0.5, volume.halfExtents.y * sy),
+                            z: Math.max(0.5, volume.halfExtents.z * sz),
+                        },
+                    },
+                });
+            }
+            else {
+                const radius = Math.max(0.5, (volume.radius ?? 5) * Math.max(sx, sz));
+                session.dispatch({
+                    type: "setVolume",
+                    id: selectedId,
+                    patch: {
+                        center: dropped,
+                        radius,
+                        ...(volume.height === undefined ? {} : { height: Math.max(0.5, volume.height * sy) }),
+                    },
+                });
+            }
+            return;
+        }
+        if (mode === "rotate" && target.kind === "marker" && selectedId !== undefined) {
+            if (vecEqual(dropped, target.position) && pose.rotationY === target.rotationY)
+                return;
+            session.dispatch({
+                type: "setTransform",
+                id: selectedId,
+                position: dropped,
+                rotationY: pose.rotationY,
+            });
+            return;
+        }
+        const delta = {
+            x: dropped.x - target.position.x,
+            y: dropped.y - target.position.y,
+            z: dropped.z - target.position.z,
+        };
+        if (state.selection.length > 1 || target.kind === "path") {
+            if (delta.x === 0 && delta.y === 0 && delta.z === 0)
+                return;
+            session.dispatch({ type: "translate", ids: state.selection, delta });
+            return;
+        }
+        if (selectedId === undefined)
+            return;
+        if (vecEqual(dropped, target.position))
+            return;
+        session.dispatch({ type: "setTransform", id: selectedId, position: dropped });
+    };
+    const snapMode = uiState.snapMode === "grid" ? "grid" : uiState.snapMode === "ground" ? "ground" : "free";
+    return (_jsx(TransformGizmo, { position: target.position, rotationY: target.rotationY, mode: mode, snapMode: snapMode, gridSize: uiState.gridSize, lift: target.lift, groundSnap: mode === "translate" && target.kind !== "path" ? groundSnap : undefined, onRelease: onRelease }));
+});

package/dist/StandaloneEditor.d.ts

@@ -0,0 +1,44 @@
+import type { EditorLayersInput } from "@jgengine/core/editor/index";
+import { type EnvironmentWorldFeature } from "@jgengine/core/world/features";
+import type { PlayableGame } from "@jgengine/shell/registry";
+import { type EditorSaveFn } from "./EditorApp.js";
+/** One user-supplied model the standalone editor can place: a stable id and a resolvable URL. */
+export interface StandaloneAsset {
+    id: string;
+    url: string;
+    label?: string;
+}
+/** Options for the blank, gameless world the standalone editor authors over. */
+export interface BlankPlayableOptions {
+    name?: string;
+    assets?: readonly StandaloneAsset[];
+    world?: EnvironmentWorldFeature;
+}
+/** The default flat-ground world the standalone editor opens on when the host supplies none. */
+export declare function blankWorld(seed?: string): EnvironmentWorldFeature;
+/** Builds a minimal gameless `PlayableGame` — a flat world plus an asset catalog — for the editor to mount over. */
+export declare function createBlankPlayable(options?: BlankPlayableOptions): PlayableGame;
+/** A save fn that hands the scene JSON back to the browser as a downloaded file — the exit path when no dev server is listening. */
+export declare function downloadSaver(filename?: string): EditorSaveFn;
+/** Props for the gameless scene editor — everything optional so it boots on a blank world with nothing wired. */
+export interface StandaloneEditorProps {
+    /** Prefs/draft namespace; also the gameId the save endpoint resolves. Default `"standalone"`. */
+    sceneId?: string;
+    /** Scene document (or its JSON) to open on — a loaded world file. */
+    scene?: EditorLayersInput;
+    /** Models the user can place. */
+    assets?: readonly StandaloneAsset[];
+    /** World to author over. Default: a flat grass field. */
+    world?: EnvironmentWorldFeature;
+    /** Where Save writes. Default: the installed dev-server endpoint, else a browser download. */
+    save?: EditorSaveFn;
+    /** Hide the built-in open-scene / add-assets strip (host supplies its own loading UI). */
+    hidePickers?: boolean;
+}
+/**
+ * The scene editor, mounted over a blank gameless world instead of a game — the same `EditorApp`
+ * every jgengine game ships, usable standalone on the user's own project (CLI `jgengine editor`,
+ * desktop app, or any React host). Ships a slim strip to open a world file and pull in an asset
+ * folder; both are also settable up front through props.
+ */
+export declare function StandaloneEditor({ sceneId, scene, assets, world, save, hidePickers, }: StandaloneEditorProps): import("react").JSX.Element;

package/dist/StandaloneEditor.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { getSaveEndpoint } from "@jgengine/core/devtools/saveEndpoint";
+import { createAssetCatalog } from "@jgengine/core/scene/assetCatalog";
+import { environment, grass, sky, terrain, } from "@jgengine/core/world/features";
+import { defineGame } from "@jgengine/shell/defineGame";
+import { EditorApp } from "./EditorApp.js";
+/** The default flat-ground world the standalone editor opens on when the host supplies none. */
+export function blankWorld(seed = "standalone") {
+    return environment({
+        terrain: terrain({ bounds: { w: 128, d: 128 }, height: 0, material: "grass" }),
+        sky: sky({ preset: "day" }),
+        vegetation: grass({ area: { w: 100, d: 100 }, density: 1.5, colors: ["#3f7d2d", "#6bbf4a"], seed }),
+    });
+}
+/** Builds a minimal gameless `PlayableGame` — a flat world plus an asset catalog — for the editor to mount over. */
+export function createBlankPlayable(options = {}) {
+    const assets = createAssetCatalog();
+    for (const asset of options.assets ?? [])
+        assets.register(asset.id, { url: asset.url });
+    return defineGame({
+        name: options.name ?? "Standalone Scene",
+        assets,
+        world: options.world ?? blankWorld(),
+        server: { mode: "single" },
+        save: "none",
+    });
+}
+/** A save fn that hands the scene JSON back to the browser as a downloaded file — the exit path when no dev server is listening. */
+export function downloadSaver(filename = "editor.scene.json") {
+    return async (json) => {
+        try {
+            const blob = new Blob([json], { type: "application/json" });
+            const url = URL.createObjectURL(blob);
+            const anchor = document.createElement("a");
+            anchor.href = url;
+            anchor.download = filename;
+            anchor.click();
+            URL.revokeObjectURL(url);
+            return { ok: true, path: filename };
+        }
+        catch (error) {
+            return { ok: false, error: error instanceof Error ? error.message : String(error) };
+        }
+    };
+}
+const MODEL_FILE = /\.(glb|gltf)$/i;
+function assetId(name) {
+    return name.replace(MODEL_FILE, "").replace(/[^a-z0-9]+/gi, "-").replace(/^-+|-+$/g, "").toLowerCase() || "asset";
+}
+/**
+ * The scene editor, mounted over a blank gameless world instead of a game — the same `EditorApp`
+ * every jgengine game ships, usable standalone on the user's own project (CLI `jgengine editor`,
+ * desktop app, or any React host). Ships a slim strip to open a world file and pull in an asset
+ * folder; both are also settable up front through props.
+ */
+export function StandaloneEditor({ sceneId = "standalone", scene, assets, world, save, hidePickers = false, }) {
+    const [loadedScene, setLoadedScene] = useState(scene);
+    const [loadedAssets, setLoadedAssets] = useState(assets ?? []);
+    const [rev, setRev] = useState(0);
+    const sceneInput = useRef(null);
+    const assetInput = useRef(null);
+    const playable = useMemo(() => createBlankPlayable({ assets: loadedAssets, world }), [loadedAssets, world]);
+    const saveFn = useMemo(() => save ?? (getSaveEndpoint() !== null ? undefined : downloadSaver()), [save]);
+    const openScene = useCallback(async (file) => {
+        const text = await file.text();
+        setLoadedScene(JSON.parse(text));
+        setRev((value) => value + 1);
+    }, []);
+    const addAssets = useCallback((files) => {
+        const next = [];
+        for (const file of Array.from(files)) {
+            if (!MODEL_FILE.test(file.name))
+                continue;
+            next.push({ id: assetId(file.name), url: URL.createObjectURL(file), label: file.name });
+        }
+        if (next.length === 0)
+            return;
+        setLoadedAssets((current) => [...current, ...next]);
+        setRev((value) => value + 1);
+    }, []);
+    return (_jsxs("div", { className: "relative h-full w-full", children: [_jsx(EditorApp, { gameId: sceneId, playable: playable, layers: loadedScene, save: saveFn }, rev), hidePickers ? null : (_jsxs("div", { className: "pointer-events-none absolute bottom-3 left-1/2 z-[70] flex -translate-x-1/2 items-center gap-2 rounded-full border border-white/10 bg-black/70 px-2 py-1.5 text-[11px] text-neutral-200 shadow-lg shadow-black/40 backdrop-blur-md", children: [_jsx("button", { type: "button", className: "pointer-events-auto rounded-full px-3 py-1 transition-colors hover:bg-white/10", onClick: () => sceneInput.current?.click(), children: "\uD83D\uDCC2 Open scene" }), _jsx("span", { className: "h-4 w-px bg-white/15" }), _jsx("button", { type: "button", className: "pointer-events-auto rounded-full px-3 py-1 transition-colors hover:bg-white/10", onClick: () => assetInput.current?.click(), children: "\uD83E\uDDCA Add assets" }), loadedAssets.length > 0 ? (_jsx("span", { className: "rounded-full bg-white/10 px-2 py-0.5 text-[10px] text-neutral-300", children: loadedAssets.length })) : null, _jsx("input", { ref: sceneInput, type: "file", accept: ".json,application/json", className: "hidden", onChange: (event) => {
+                            const file = event.target.files?.[0];
+                            if (file !== undefined)
+                                void openScene(file);
+                            event.target.value = "";
+                        } }), _jsx("input", { ref: assetInput, type: "file", accept: ".glb,.gltf,model/gltf-binary", multiple: true, className: "hidden", onChange: (event) => {
+                            if (event.target.files !== null)
+                                addAssets(event.target.files);
+                            event.target.value = "";
+                        } })] }))] }));
+}

package/dist/TerrainPanel.d.ts

@@ -0,0 +1,7 @@
+import type { EditorSession } from "./session.js";
+import { type EditorUiStore } from "./uiStore.js";
+/** The terrain-tool panel: create/clear the heightfield and drive the sculpt/paint controls. */
+export declare function TerrainPanel({ session, ui }: {
+    session: EditorSession;
+    ui: EditorUiStore;
+}): import("react").JSX.Element;