react-three-game 0.0.55 → 0.0.57

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { sound as soundManager } from './helpers/SoundManager';
 export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
-export { FieldRenderer, Input, Label, Vector3Input, ColorInput, StringInput, BooleanInput, SelectInput, } from './tools/prefabeditor/components/Input';
+export { FieldRenderer, FieldGroup, Input, Label, Vector3Input, Vector3Field, NumberField, ColorInput, ColorField, StringInput, StringField, BooleanInput, BooleanField, SelectInput, SelectField, } from './tools/prefabeditor/components/Input';
 export * from './tools/prefabeditor/utils';
 export type { ExportGLBOptions } from './tools/prefabeditor/utils';
 export type { PrefabEditorRef } from './tools/prefabeditor/PrefabEditor';

package/dist/index.js

@@ -9,7 +9,7 @@ export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
 // Prefab Editor - Component Registry
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
 // Prefab Editor - Input Components
-export { FieldRenderer, Input, Label, Vector3Input, ColorInput, StringInput, BooleanInput, SelectInput, } from './tools/prefabeditor/components/Input';
+export { FieldRenderer, FieldGroup, Input, Label, Vector3Input, Vector3Field, NumberField, ColorInput, ColorField, StringInput, StringField, BooleanInput, BooleanField, SelectInput, SelectField, } from './tools/prefabeditor/components/Input';
 // Prefab Editor - Styles & Utils
 export * from './tools/prefabeditor/utils';
 // Game Events (physics + custom events)

package/dist/shared/ContactShadow.d.ts

@@ -0,0 +1,8 @@
+interface ContactShadowProps {
+    opacity?: number;
+    blur?: number;
+    scale?: number;
+    yOffset?: number;
+}
+declare const ContactShadow: ({ opacity, blur, scale, yOffset, }: ContactShadowProps) => import("react/jsx-runtime").JSX.Element;
+export default ContactShadow;

package/dist/shared/ContactShadow.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import * as THREE from "three/webgpu";
+import { float, uv, vec3, smoothstep, uniform, length, } from "three/tsl";
+const ContactShadow = ({ opacity = 0.4, blur = 2.5, scale = 1.2, yOffset = 0.05, }) => {
+    const material = useMemo(() => {
+        const mat = new THREE.MeshBasicNodeMaterial();
+        mat.transparent = true;
+        mat.depthWrite = false;
+        mat.depthTest = true;
+        mat.side = THREE.DoubleSide;
+        mat.polygonOffset = true;
+        mat.polygonOffsetFactor = -1;
+        mat.polygonOffsetUnits = -1;
+        const uOpacity = uniform(opacity);
+        const uBlur = uniform(blur);
+        // UVs centered around origin
+        const centeredUV = uv().sub(0.5).mul(2.0);
+        // IMPORTANT: use functional length(), not .length()
+        const dist = length(centeredUV);
+        const innerRadius = float(0.0);
+        const outerRadius = float(1.0);
+        const blurAmount = uBlur.div(10.0);
+        const alpha = smoothstep(outerRadius, innerRadius.add(blurAmount), dist).mul(uOpacity);
+        mat.colorNode = vec3(0.0, 0.0, 0.0);
+        mat.opacityNode = alpha;
+        return mat;
+    }, [opacity, blur]);
+    return (_jsx("mesh", { rotation: [-Math.PI / 2, 0, 0], position: [0, yOffset, 0], material: material, renderOrder: 1, children: _jsx("planeGeometry", { args: [scale, scale] }) }));
+};
+export default ContactShadow;

package/dist/shared/GameCanvas.js

@@ -41,7 +41,5 @@ export default function GameCanvas(_a) {
                     setFrameloop("always");
                 });
                 return renderer;
-            }), camera: {
-                position: [0, 1, 5],
-            } }, props, { children: [_jsx(Suspense, { children: children }), loader ? _jsx(Loader, {}) : null] })) });
+            }) }, props, { children: [_jsx(Suspense, { children: children }), loader ? _jsx(Loader, {}) : null] })) });
 }

package/dist/tools/assetviewer/page.js

@@ -1,14 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Canvas, useLoader } from "@react-three/fiber";
+import { Canvas } from "@react-three/fiber";
 import { OrbitControls, View, PerspectiveCamera } from "@react-three/drei";
-import { Suspense, useEffect, useState, useRef } from "react";
+import { Component as ReactComponent, Suspense, useEffect, useState, useRef } from "react";
 import { TextureLoader } from "three";
 import { loadModel } from "../dragdrop/modelLoader";
+class ErrorBoundary extends ReactComponent {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() { return { hasError: true }; }
+    componentDidCatch() { var _a, _b; (_b = (_a = this.props).onError) === null || _b === void 0 ? void 0 : _b.call(_a); }
+    render() { return this.state.hasError ? null : this.props.children; }
+}
 // view models and textures in manifest, onselect callback
 const styles = {
     errorIcon: { color: '#fca5a5', fontSize: 12 }, // text-red-400 text-xs
     flexFillRelative: { flex: 1, position: 'relative' },
-    bottomLabel: { backgroundColor: 'rgba(0,0,0,0.6)', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' },
+    bottomLabel: { backgroundColor: 'rgba(0,0,0,0.6)', color: '#f9fafb', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' },
+    textLight: { color: '#f9fafb' },
     iconLarge: { fontSize: 20 }
 };
 function getItemsInPath(files, currentPath) {
@@ -39,6 +49,7 @@ function FolderTile({ name, onClick }) {
             maxWidth: 60,
             aspectRatio: '1 / 1',
             backgroundColor: '#1f2937', /* gray-800 */
+            color: '#f9fafb',
             cursor: 'pointer',
             display: 'flex',
             flexDirection: 'column',
@@ -67,14 +78,14 @@ function useInView() {
 function AssetListViewer({ files, selected, onSelect, renderCard }) {
     const [currentPath, setCurrentPath] = useState('');
     const { folders, filesInCurrentPath } = getItemsInPath(files, currentPath);
-    return (_jsxs("div", { children: [currentPath && (_jsx("button", { onClick: () => {
+    return (_jsxs("div", { style: styles.textLight, children: [currentPath && (_jsx("button", { onClick: () => {
                     const pathParts = currentPath.split('/').filter(Boolean);
                     pathParts.pop();
                     setCurrentPath(pathParts.join('/'));
                 }, style: { marginBottom: 4, padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 12, cursor: 'pointer', border: 'none' }, children: "\u2190 Back" })), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }, children: [folders.map((folder) => (_jsx(FolderTile, { name: folder, onClick: () => setCurrentPath(currentPath ? `${currentPath}/${folder}` : folder) }, folder))), filesInCurrentPath.map((file) => (_jsx("div", { children: renderCard(file, onSelect) }, file)))] })] }));
 }
 export function TextureListViewer({ files, selected, onSelect, basePath = "" }) {
-    return (_jsxs(_Fragment, { children: [_jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(TextureCard, { file: file, basePath: basePath, onSelect: onSelectHandler })) }), _jsx(SharedCanvas, {})] }));
+    return (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%' }, children: [_jsx("div", { style: { width: '100%', height: '100%', overflowY: 'auto', overflowX: 'hidden', paddingRight: 4 }, children: _jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(TextureCard, { file: file, basePath: basePath, onSelect: onSelectHandler })) }) }), _jsx(SharedCanvas, {})] }));
 }
 function TextureCard({ file, onSelect, basePath = "" }) {
     const [error, setError] = useState(false);
@@ -84,17 +95,24 @@ function TextureCard({ file, onSelect, basePath = "" }) {
     if (error) {
         return (_jsx("div", { ref: ref, style: { aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onClick: () => onSelect(file), children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }));
     }
-    return (_jsxs("div", { ref: ref, style: { maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#1f2937', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("div", { style: { flex: 1, position: 'relative' }, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 0, 2.5], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx("ambientLight", { intensity: 0.8 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(TextureSphere, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false, enablePan: false, autoRotate: isHovered, autoRotateSpeed: 2 })] })] })) : null }), _jsx("div", { style: { backgroundColor: 'rgba(0,0,0,0.6)', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' }, children: file.split('/').pop() })] }));
+    return (_jsxs("div", { ref: ref, style: { maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#1f2937', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("div", { style: { flex: 1, position: 'relative' }, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 0, 2.5], fov: 50 }), _jsx("ambientLight", { intensity: 0.8 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(TextureSphere, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false, enablePan: false, autoRotate: isHovered, autoRotateSpeed: 2 })] })) : null }), _jsx("div", { style: styles.bottomLabel, children: file.split('/').pop() })] }));
 }
 function TextureSphere({ url, onError }) {
-    const texture = useLoader(TextureLoader, url, undefined, (error) => {
-        console.error('Failed to load texture:', url, error);
-        onError === null || onError === void 0 ? void 0 : onError();
-    });
+    const [texture, setTexture] = useState(null);
+    useEffect(() => {
+        setTexture(null);
+        const loader = new TextureLoader();
+        loader.load(url, (tex) => setTexture(tex), undefined, (err) => {
+            console.warn('Failed to load texture:', url, err);
+            onError === null || onError === void 0 ? void 0 : onError();
+        });
+    }, [url]);
+    if (!texture)
+        return null;
     return (_jsxs("mesh", { position: [0, 0, 0], children: [_jsx("sphereGeometry", { args: [1, 32, 32] }), _jsx("meshStandardMaterial", { map: texture })] }));
 }
 export function ModelListViewer({ files, selected, onSelect, basePath = "" }) {
-    return (_jsxs(_Fragment, { children: [_jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(ModelCard, { file: file, basePath: basePath, onSelect: onSelectHandler })) }), _jsx(SharedCanvas, {})] }));
+    return (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%' }, children: [_jsx("div", { style: { width: '100%', height: '100%', overflowY: 'auto', overflowX: 'hidden', paddingRight: 4 }, children: _jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(ModelCard, { file: file, basePath: basePath, onSelect: onSelectHandler })) }) }), _jsx(SharedCanvas, {})] }));
 }
 function ModelCard({ file, onSelect, basePath = "" }) {
     const [error, setError] = useState(false);
@@ -103,7 +121,7 @@ function ModelCard({ file, onSelect, basePath = "" }) {
     if (error) {
         return (_jsx("div", { ref: ref, style: { aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onClick: () => onSelect(file), children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }));
     }
-    return (_jsxs("div", { ref: ref, style: { maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#111827', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), children: [_jsx("div", { style: styles.flexFillRelative, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 1, 3], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx("ambientLight", { intensity: 1 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(ModelPreview, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false })] })] })) : null }), _jsx("div", { style: { backgroundColor: 'rgba(0,0,0,0.6)', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' }, children: file.split('/').pop() })] }));
+    return (_jsxs("div", { ref: ref, style: { maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#111827', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), children: [_jsx("div", { style: styles.flexFillRelative, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 1, 3], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx("ambientLight", { intensity: 1 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(ModelPreview, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false })] })] })) : null }), _jsx("div", { style: styles.bottomLabel, children: file.split('/').pop() })] }));
 }
 function ModelPreview({ url, onError }) {
     const [model, setModel] = useState(null);
@@ -135,7 +153,7 @@ export function SoundListViewer({ files, selected, onSelect, basePath = "" }) {
 function SoundCard({ file, onSelect, basePath = "" }) {
     const fileName = file.split('/').pop() || '';
     const fullPath = basePath ? `/${basePath}${file}` : file;
-    return (_jsxs("div", { onClick: () => onSelect(file), style: { aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }, children: [_jsx("div", { style: styles.iconLarge, children: "\uD83D\uDD0A" }), _jsx("div", { style: { fontSize: 12, padding: '0 4px', marginTop: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center', width: '100%' }, children: fileName })] }));
+    return (_jsxs("div", { onClick: () => onSelect(file), style: { aspectRatio: '1 / 1', backgroundColor: '#374151', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }, children: [_jsx("div", { style: styles.iconLarge, children: "\uD83D\uDD0A" }), _jsx("div", { style: { color: '#f9fafb', fontSize: 12, padding: '0 4px', marginTop: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center', width: '100%' }, children: fileName })] }));
 }
 // Single Asset Viewer Components - display only one selected asset
 export function SingleTextureViewer({ file, basePath = "" }) {
@@ -155,12 +173,15 @@ export function SingleSoundViewer({ file, basePath = "" }) {
 }
 // Shared Canvas Component - can be used independently in any viewer
 export function SharedCanvas() {
-    return (_jsx(Canvas, { shadows: true, dpr: [1, 1.5], camera: { position: [0, 0, 3], fov: 45, near: 0.1, far: 1000 }, style: {
-            position: 'absolute',
+    return (_jsx(Canvas, { shadows: true, dpr: [1, 1.5], gl: { alpha: true }, camera: { position: [0, 0, 3], fov: 45, near: 0.1, far: 1000 }, onCreated: ({ gl }) => {
+            gl.setClearAlpha(0);
+        }, style: {
+            position: 'fixed',
             top: 0,
             left: 0,
             width: '100vw',
             height: '100vh',
             pointerEvents: 'none',
+            background: 'transparent',
         }, eventSource: typeof document !== 'undefined' ? document.getElementById('root') || undefined : undefined, eventPrefix: "client", children: _jsx(View.Port, {}) }));
 }

package/dist/tools/dragdrop/DragDropLoader.js

@@ -1,49 +1,26 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // DragDropLoader.tsx
 import { useEffect } from "react";
-import { DRACOLoader, FBXLoader, GLTFLoader } from "three/examples/jsm/Addons.js";
-// Shared file handling logic
+import { parseModelFromFile } from "./modelLoader";
 function handleFiles(files, onModelLoaded) {
-    files.forEach((file) => {
-        if (file.name.endsWith(".glb") || file.name.endsWith(".gltf")) {
-            loadGLTFFile(file, onModelLoaded);
-        }
-        else if (file.name.endsWith(".fbx")) {
-            loadFBXFile(file, onModelLoaded);
-        }
-    });
-}
-function loadGLTFFile(file, onModelLoaded) {
-    const reader = new FileReader();
-    reader.onload = (event) => {
-        var _a;
-        const arrayBuffer = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
-        if (arrayBuffer) {
-            const loader = new GLTFLoader();
-            const dracoLoader = new DRACOLoader();
-            dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
-            loader.setDRACOLoader(dracoLoader);
-            loader.parse(arrayBuffer, "", (gltf) => {
-                onModelLoaded(gltf.scene, file.name);
-            }, (error) => {
-                console.error("GLTFLoader parse error", error);
-            });
+    files.forEach((file) => __awaiter(this, void 0, void 0, function* () {
+        const result = yield parseModelFromFile(file);
+        if (result.success && result.model) {
+            onModelLoaded(result.model, file.name);
         }
-    };
-    reader.readAsArrayBuffer(file);
-}
-function loadFBXFile(file, onModelLoaded) {
-    const reader = new FileReader();
-    reader.onload = (event) => {
-        var _a;
-        const arrayBuffer = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
-        if (arrayBuffer) {
-            const loader = new FBXLoader();
-            const model = loader.parse(arrayBuffer, "");
-            onModelLoaded(model, file.name);
+        else {
+            console.error("Model parse error:", result.error);
         }
-    };
-    reader.readAsArrayBuffer(file);
+    }));
 }
 export function DragDropLoader({ onModelLoaded }) {
     useEffect(() => {

package/dist/tools/dragdrop/modelLoader.d.ts

@@ -4,4 +4,9 @@ export type ModelLoadResult = {
     error?: any;
 };
 export type ProgressCallback = (filename: string, loaded: number, total: number) => void;
+/**
+ * Parse a model from a File object (e.g. from drag-drop or file picker).
+ * Returns the parsed Three.js Object3D scene.
+ */
+export declare function parseModelFromFile(file: File): Promise<ModelLoadResult>;
 export declare function loadModel(filename: string, onProgress?: ProgressCallback): Promise<ModelLoadResult>;

package/dist/tools/dragdrop/modelLoader.js

@@ -14,6 +14,45 @@ dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
 const gltfLoader = new GLTFLoader();
 gltfLoader.setDRACOLoader(dracoLoader);
 const fbxLoader = new FBXLoader();
+/**
+ * Parse a model from a File object (e.g. from drag-drop or file picker).
+ * Returns the parsed Three.js Object3D scene.
+ */
+export function parseModelFromFile(file) {
+    return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            var _a;
+            const arrayBuffer = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
+            if (!arrayBuffer) {
+                resolve({ success: false, error: new Error('Failed to read file') });
+                return;
+            }
+            const name = file.name.toLowerCase();
+            if (name.endsWith('.glb') || name.endsWith('.gltf')) {
+                gltfLoader.parse(arrayBuffer, '', (gltf) => {
+                    resolve({ success: true, model: gltf.scene });
+                }, (error) => {
+                    resolve({ success: false, error });
+                });
+            }
+            else if (name.endsWith('.fbx')) {
+                try {
+                    const model = fbxLoader.parse(arrayBuffer, '');
+                    resolve({ success: true, model });
+                }
+                catch (error) {
+                    resolve({ success: false, error });
+                }
+            }
+            else {
+                resolve({ success: false, error: new Error(`Unsupported file format: ${file.name}`) });
+            }
+        };
+        reader.onerror = () => resolve({ success: false, error: reader.error });
+        reader.readAsArrayBuffer(file);
+    });
+}
 export function loadModel(filename, onProgress) {
     return __awaiter(this, void 0, void 0, function* () {
         try {

package/dist/tools/prefabeditor/Dropdown.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+type Placement = 'bottom-start' | 'bottom-end' | 'left-start' | 'right-start';
+export declare function Dropdown({ trigger, children, placement, offset, zIndex, }: {
+    trigger: (props: {
+        ref: React.RefObject<HTMLButtonElement | null>;
+        isOpen: boolean;
+        toggle: () => void;
+        close: () => void;
+    }) => ReactNode;
+    children: ReactNode | ((close: () => void) => ReactNode);
+    placement?: Placement;
+    offset?: number;
+    zIndex?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/tools/prefabeditor/Dropdown.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+export function Dropdown({ trigger, children, placement = 'bottom-end', offset = 6, zIndex = 1000, }) {
+    var _a, _b;
+    const [isOpen, setIsOpen] = useState(false);
+    const [position, setPosition] = useState(null);
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    const close = () => setIsOpen(false);
+    const toggle = () => setIsOpen(prev => !prev);
+    useLayoutEffect(() => {
+        if (!isOpen || !triggerRef.current || !panelRef.current || typeof window === 'undefined')
+            return;
+        const updatePosition = () => {
+            var _a, _b;
+            const triggerRect = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const panelRect = (_b = panelRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            if (!triggerRect || !panelRect)
+                return;
+            let left = triggerRect.left;
+            let top = triggerRect.bottom + offset;
+            if (placement === 'bottom-end') {
+                left = triggerRect.right - panelRect.width;
+                top = triggerRect.bottom + offset;
+            }
+            else if (placement === 'bottom-start') {
+                left = triggerRect.left;
+                top = triggerRect.bottom + offset;
+            }
+            else if (placement === 'left-start') {
+                left = triggerRect.left - panelRect.width - offset;
+                top = triggerRect.top;
+            }
+            else if (placement === 'right-start') {
+                left = triggerRect.right + offset;
+                top = triggerRect.top;
+            }
+            left = Math.max(8, Math.min(left, window.innerWidth - panelRect.width - 8));
+            top = Math.max(8, Math.min(top, window.innerHeight - panelRect.height - 8));
+            setPosition({ left, top });
+        };
+        updatePosition();
+        window.addEventListener('resize', updatePosition);
+        window.addEventListener('scroll', updatePosition, true);
+        return () => {
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition, true);
+        };
+    }, [isOpen, placement, offset]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handlePointerDown = (event) => {
+            var _a, _b;
+            const target = event.target;
+            if (!target)
+                return;
+            if ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))
+                return;
+            if ((_b = panelRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))
+                return;
+            close();
+        };
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape')
+                close();
+        };
+        document.addEventListener('pointerdown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('pointerdown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen]);
+    return (_jsxs(_Fragment, { children: [trigger({ ref: triggerRef, isOpen, toggle, close }), isOpen && typeof document !== 'undefined' && createPortal(_jsx("div", { ref: panelRef, onMouseLeave: close, style: {
+                    position: 'fixed',
+                    left: (_a = position === null || position === void 0 ? void 0 : position.left) !== null && _a !== void 0 ? _a : -9999,
+                    top: (_b = position === null || position === void 0 ? void 0 : position.top) !== null && _b !== void 0 ? _b : -9999,
+                    zIndex,
+                }, children: typeof children === 'function' ? children(close) : children }), document.body)] }));
+}

package/dist/tools/prefabeditor/EditorContext.d.ts

@@ -3,6 +3,11 @@ interface EditorContextType {
     setTransformMode: (mode: "translate" | "rotate" | "scale") => void;
     snapResolution: number;
     setSnapResolution: (resolution: number) => void;
+    positionSnap: number;
+    setPositionSnap: (resolution: number) => void;
+    rotationSnap: number;
+    setRotationSnap: (resolution: number) => void;
+    onFocusNode?: (nodeId: string) => void;
     onScreenshot?: () => void;
     onExportGLB?: () => void;
 }