react-three-game 0.0.18 → 0.0.20

package/dist/tools/prefabeditor/styles.js

@@ -0,0 +1,168 @@
+// Shared editor styles - single source of truth for all prefab editor UI
+export const colors = {
+    bg: 'rgba(0,0,0,0.6)',
+    bgLight: 'rgba(255,255,255,0.06)',
+    bgHover: 'rgba(255,255,255,0.1)',
+    border: 'rgba(255,255,255,0.15)',
+    borderLight: 'rgba(255,255,255,0.1)',
+    borderFaint: 'rgba(255,255,255,0.05)',
+    text: '#fff',
+    textMuted: 'rgba(255,255,255,0.7)',
+    danger: '#ffaaaa',
+    dangerBg: 'rgba(255,80,80,0.2)',
+    dangerBorder: 'rgba(255,80,80,0.4)',
+};
+export const fonts = {
+    family: 'system-ui, sans-serif',
+    size: 11,
+    sizeSm: 10,
+};
+// Base component styles
+export const base = {
+    panel: {
+        background: colors.bg,
+        color: colors.text,
+        border: `1px solid ${colors.border}`,
+        borderRadius: 4,
+        overflow: 'hidden',
+        backdropFilter: 'blur(8px)',
+        fontFamily: fonts.family,
+        fontSize: fonts.size,
+    },
+    header: {
+        padding: '6px 8px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        cursor: 'pointer',
+        background: colors.bgLight,
+        borderBottom: `1px solid ${colors.borderLight}`,
+        fontSize: fonts.size,
+        fontWeight: 500,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    },
+    input: {
+        width: '100%',
+        background: colors.bgHover,
+        border: `1px solid ${colors.border}`,
+        borderRadius: 3,
+        padding: '4px 6px',
+        color: colors.text,
+        fontSize: fonts.size,
+        outline: 'none',
+    },
+    btn: {
+        background: colors.bgHover,
+        border: `1px solid ${colors.border}`,
+        borderRadius: 3,
+        padding: '4px 8px',
+        color: colors.text,
+        fontSize: fonts.size,
+        cursor: 'pointer',
+        outline: 'none',
+    },
+    btnDanger: {
+        background: colors.dangerBg,
+        borderColor: colors.dangerBorder,
+        color: colors.danger,
+    },
+    label: {
+        fontSize: fonts.sizeSm,
+        opacity: 0.7,
+        marginBottom: 4,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    },
+    row: {
+        display: 'flex',
+        gap: 6,
+    },
+    section: {
+        paddingBottom: 8,
+        borderBottom: `1px solid ${colors.borderLight}`,
+    },
+};
+// Specific panel styles
+export const inspector = {
+    panel: Object.assign(Object.assign({}, base.panel), { position: 'absolute', top: 8, right: 8, zIndex: 20, width: 260 }),
+    content: {
+        padding: 8,
+        maxHeight: '80vh',
+        overflowY: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8,
+    },
+};
+export const tree = {
+    panel: Object.assign(Object.assign({}, base.panel), { maxHeight: '85vh', display: 'flex', flexDirection: 'column', userSelect: 'none' }),
+    scroll: {
+        overflowY: 'auto',
+        padding: 4,
+    },
+    row: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '3px 6px',
+        borderBottom: `1px solid ${colors.borderFaint}`,
+        cursor: 'pointer',
+        whiteSpace: 'nowrap',
+    },
+    selected: {
+        background: 'rgba(255,255,255,0.12)',
+    },
+};
+export const menu = {
+    container: {
+        position: 'fixed',
+        zIndex: 50,
+        minWidth: 120,
+        background: 'rgba(0,0,0,0.85)',
+        border: `1px solid ${colors.border}`,
+        borderRadius: 4,
+        overflow: 'hidden',
+        boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
+        backdropFilter: 'blur(8px)',
+    },
+    item: {
+        width: '100%',
+        textAlign: 'left',
+        padding: '6px 8px',
+        background: 'transparent',
+        border: 'none',
+        color: colors.text,
+        fontSize: fonts.size,
+        cursor: 'pointer',
+        outline: 'none',
+    },
+    danger: {
+        color: colors.danger,
+    },
+};
+export const toolbar = {
+    panel: {
+        position: 'absolute',
+        top: 8,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        display: 'flex',
+        gap: 6,
+        padding: '4px 6px',
+        background: colors.bg,
+        border: `1px solid ${colors.border}`,
+        borderRadius: 4,
+        color: colors.text,
+        fontFamily: fonts.family,
+        fontSize: fonts.size,
+        backdropFilter: 'blur(8px)',
+    },
+    divider: {
+        width: 1,
+        background: 'rgba(255,255,255,0.2)',
+    },
+    disabled: {
+        opacity: 0.4,
+        cursor: 'not-allowed',
+    },
+};

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

@@ -1,29 +1,18 @@
 export interface Prefab {
     id?: string;
     name?: string;
-    description?: string;
-    author?: string;
-    version?: string;
-    assets?: string[] | {
-        [assetName: string]: string;
-    };
-    onStart?: (target: any) => void;
     root: GameObject;
 }
 export interface GameObject {
     id: string;
     disabled?: boolean;
     hidden?: boolean;
-    ref?: any;
     children?: GameObject[];
     components?: {
-        [uuid: string]: Component | undefined;
+        [key: string]: ComponentData | undefined;
     };
 }
-interface Component {
+export interface ComponentData {
     type: string;
-    properties: {
-        [key: string]: any;
-    };
+    properties: Record<string, any>;
 }
-export {};

package/dist/tools/prefabeditor/types.js

@@ -1,2 +1 @@
-// import { ThreeElements } from "@react-three/fiber"
 export {};

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

@@ -0,0 +1,19 @@
+import { GameObject } from "./types";
+/** Find a node by ID in the tree */
+export declare function findNode(root: GameObject, id: string): GameObject | null;
+/** Find the parent of a node by ID */
+export declare function findParent(root: GameObject, id: string): GameObject | null;
+/** Find all nodes matching a predicate */
+export declare function findAll(root: GameObject, predicate: (node: GameObject) => boolean): GameObject[];
+/** Find all nodes that have a specific component type */
+export declare function findByComponent(root: GameObject, componentType: string): GameObject[];
+/** Get a flattened list of all nodes */
+export declare function flatten(root: GameObject): GameObject[];
+/** Immutably update a node by ID */
+export declare function updateNode(root: GameObject, id: string, update: (node: GameObject) => GameObject): GameObject;
+/** Immutably delete a node by ID */
+export declare function deleteNode(root: GameObject, id: string): GameObject | null;
+/** Deep clone a node with new IDs */
+export declare function cloneNode(node: GameObject): GameObject;
+/** Get component data from a node */
+export declare function getComponent<T = any>(node: GameObject, type: string): T | undefined;

package/dist/tools/prefabeditor/utils.js

@@ -0,0 +1,72 @@
+/** Find a node by ID in the tree */
+export function findNode(root, id) {
+    var _a;
+    if (root.id === id)
+        return root;
+    for (const child of (_a = root.children) !== null && _a !== void 0 ? _a : []) {
+        const found = findNode(child, id);
+        if (found)
+            return found;
+    }
+    return null;
+}
+/** Find the parent of a node by ID */
+export function findParent(root, id) {
+    var _a;
+    for (const child of (_a = root.children) !== null && _a !== void 0 ? _a : []) {
+        if (child.id === id)
+            return root;
+        const found = findParent(child, id);
+        if (found)
+            return found;
+    }
+    return null;
+}
+/** Find all nodes matching a predicate */
+export function findAll(root, predicate) {
+    var _a;
+    const results = [];
+    if (predicate(root))
+        results.push(root);
+    for (const child of (_a = root.children) !== null && _a !== void 0 ? _a : []) {
+        results.push(...findAll(child, predicate));
+    }
+    return results;
+}
+/** Find all nodes that have a specific component type */
+export function findByComponent(root, componentType) {
+    return findAll(root, node => { var _a; return Object.values((_a = node.components) !== null && _a !== void 0 ? _a : {}).some(c => (c === null || c === void 0 ? void 0 : c.type) === componentType); });
+}
+/** Get a flattened list of all nodes */
+export function flatten(root) {
+    return findAll(root, () => true);
+}
+/** Immutably update a node by ID */
+export function updateNode(root, id, update) {
+    if (root.id === id)
+        return update(root);
+    if (!root.children)
+        return root;
+    return Object.assign(Object.assign({}, root), { children: root.children.map(child => updateNode(child, id, update)) });
+}
+/** Immutably delete a node by ID */
+export function deleteNode(root, id) {
+    if (root.id === id)
+        return null;
+    if (!root.children)
+        return root;
+    return Object.assign(Object.assign({}, root), { children: root.children
+            .map(child => deleteNode(child, id))
+            .filter((child) => child !== null) });
+}
+/** Deep clone a node with new IDs */
+export function cloneNode(node) {
+    var _a;
+    return Object.assign(Object.assign({}, node), { id: crypto.randomUUID(), children: (_a = node.children) === null || _a === void 0 ? void 0 : _a.map(cloneNode) });
+}
+/** Get component data from a node */
+export function getComponent(node, type) {
+    var _a;
+    const comp = Object.values((_a = node.components) !== null && _a !== void 0 ? _a : {}).find(c => (c === null || c === void 0 ? void 0 : c.type) === type);
+    return comp === null || comp === void 0 ? void 0 : comp.properties;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -15,10 +15,12 @@
   "author": "prnth",
   "license": "VPL",
   "type": "module",
-  "workspaces": ["docs"],
+  "workspaces": [
+    "docs"
+  ],
   "peerDependencies": {
-    "@react-three/fiber": ">=9.0.0",
     "@react-three/drei": ">=10.0.0",
+    "@react-three/fiber": ">=9.0.0",
     "@react-three/rapier": ">=2.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
@@ -36,5 +38,8 @@
     "react-dom": "^19.2.0",
     "three": "^0.182.0",
     "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "react-error-boundary": "^6.0.0"
   }
 }

package/src/index.ts

@@ -14,8 +14,12 @@ export {
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
 export type { Component } from './tools/prefabeditor/components/ComponentRegistry';
 
+// Editor Styles & Utils
+export * as editorStyles from './tools/prefabeditor/styles';
+export * from './tools/prefabeditor/utils';
+
 // Helpers
 export * from './helpers';
 
 // Types
-export type { Prefab, GameObject } from './tools/prefabeditor/types';
+export type { Prefab, GameObject, ComponentData } from './tools/prefabeditor/types';

package/src/tools/assetviewer/page.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { Canvas, useLoader } from "@react-three/fiber";
-import { OrbitControls, useGLTF, useFBX, Stage, View, PerspectiveCamera } from "@react-three/drei";
+import { OrbitControls, Stage, View, PerspectiveCamera } from "@react-three/drei";
 import { Suspense, useEffect, useState, useRef } from "react";
 import { TextureLoader } from "three";
+import { loadModel } from "../dragdrop/modelLoader";
 
 // view models and textures in manifest, onselect callback
 
@@ -290,19 +291,28 @@ function ModelCard({ file, onSelect, basePath = "" }: { file: string; onSelect:
 }
 
 function ModelPreview({ url, onError }: { url: string; onError?: () => void }) {
-    const isFbx = url.toLowerCase().endsWith('.fbx');
-    if (isFbx) return <FBXModel url={url} onError={onError} />;
-    return <GLTFModel url={url} onError={onError} />;
-}
+    const [model, setModel] = useState<any>(null);
+    const onErrorRef = useRef(onError);
+    onErrorRef.current = onError;
 
-function GLTFModel({ url, onError }: { url: string; onError?: () => void }) {
-    const { scene } = useGLTF(url);
-    return <primitive object={scene} />;
-}
+    useEffect(() => {
+        let cancelled = false;
+        setModel(null);
+
+        loadModel(url).then((result) => {
+            if (cancelled) return;
+            if (result.success && result.model) {
+                setModel(result.model);
+            } else {
+                onErrorRef.current?.();
+            }
+        });
+
+        return () => { cancelled = true; };
+    }, [url]);
 
-function FBXModel({ url, onError }: { url: string; onError?: () => void }) {
-    const fbx = useFBX(url);
-    return <primitive object={fbx} scale={0.01} />;
+    if (!model) return null;
+    return <primitive object={model} />;
 }
 
 interface SoundListViewerProps {