react-three-game 0.0.38 → 0.0.40

package/dist/helpers/SoundManager.d.ts

@@ -0,0 +1,35 @@
+declare class SoundManager {
+    private static _instance;
+    context: AudioContext;
+    private buffers;
+    private masterGain;
+    private sfxGain;
+    private musicGain;
+    private constructor();
+    /** Singleton accessor */
+    static get instance(): SoundManager;
+    /** Required once after user gesture (browser) */
+    resume(): void;
+    /** Preload a sound from URL */
+    load(path: string, url: string): Promise<void>;
+    /** Play from already-loaded buffer (fails silently if not loaded) */
+    playSync(path: string, { volume, playbackRate, detune, pitch, }?: {
+        volume?: number;
+        playbackRate?: number;
+        detune?: number;
+        pitch?: number;
+    }): void;
+    /** Load and play SFX - accepts file path directly */
+    play(path: string, options?: {
+        volume?: number;
+        playbackRate?: number;
+        detune?: number;
+        pitch?: number;
+    }): Promise<void>;
+    /** Volume controls */
+    setMasterVolume(v: number): void;
+    setSfxVolume(v: number): void;
+    setMusicVolume(v: number): void;
+}
+export declare const sound: SoundManager;
+export {};

package/dist/helpers/SoundManager.js

@@ -0,0 +1,93 @@
+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());
+    });
+};
+class SoundManager {
+    constructor() {
+        this.buffers = new Map();
+        const AudioCtx = window.AudioContext || window.webkitAudioContext;
+        this.context = new AudioCtx();
+        this.masterGain = this.context.createGain();
+        this.sfxGain = this.context.createGain();
+        this.musicGain = this.context.createGain();
+        this.sfxGain.connect(this.masterGain);
+        this.musicGain.connect(this.masterGain);
+        this.masterGain.connect(this.context.destination);
+        this.masterGain.gain.value = 1;
+        this.sfxGain.gain.value = 1;
+        this.musicGain.gain.value = 1;
+    }
+    /** Singleton accessor */
+    static get instance() {
+        if (typeof window === 'undefined') {
+            // Return a dummy instance for SSR
+            return new Proxy({}, {
+                get: () => () => { }
+            });
+        }
+        if (!SoundManager._instance) {
+            SoundManager._instance = new SoundManager();
+        }
+        return SoundManager._instance;
+    }
+    /** Required once after user gesture (browser) */
+    resume() {
+        if (this.context.state !== "running") {
+            this.context.resume();
+        }
+    }
+    /** Preload a sound from URL */
+    load(path, url) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.buffers.has(path))
+                return;
+            const res = yield fetch(url);
+            const arrayBuffer = yield res.arrayBuffer();
+            const buffer = yield this.context.decodeAudioData(arrayBuffer);
+            this.buffers.set(path, buffer);
+        });
+    }
+    /** Play from already-loaded buffer (fails silently if not loaded) */
+    playSync(path, { volume = 1, playbackRate = 1, detune = 0, pitch = 1, } = {}) {
+        this.resume();
+        const buffer = this.buffers.get(path);
+        if (!buffer)
+            return;
+        const src = this.context.createBufferSource();
+        const gain = this.context.createGain();
+        src.buffer = buffer;
+        src.playbackRate.value = playbackRate * pitch;
+        src.detune.value = detune;
+        gain.gain.value = volume;
+        src.connect(gain);
+        gain.connect(this.sfxGain);
+        src.start();
+    }
+    /** Load and play SFX - accepts file path directly */
+    play(path, options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Auto-load from path if not already loaded
+            if (!this.buffers.has(path)) {
+                yield this.load(path, path);
+            }
+            this.playSync(path, options);
+        });
+    }
+    /** Volume controls */
+    setMasterVolume(v) {
+        this.masterGain.gain.value = v;
+    }
+    setSfxVolume(v) {
+        this.sfxGain.gain.value = v;
+    }
+    setMusicVolume(v) {
+        this.musicGain.gain.value = v;
+    }
+}
+SoundManager._instance = null;
+export const sound = SoundManager.instance;

package/dist/index.d.ts

@@ -10,4 +10,5 @@ export * as editorStyles from './tools/prefabeditor/styles';
 export * from './tools/prefabeditor/utils';
 export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
 export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
+export { sound as soundManager } from './helpers/SoundManager';
 export * from './helpers';

package/dist/index.js

@@ -9,5 +9,6 @@ export * from './tools/prefabeditor/utils';
 // Asset Tools
 export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
 export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
+export { sound as soundManager } from './helpers/SoundManager';
 // Helpers
 export * from './helpers';

package/dist/shared/GameCanvas.d.ts

@@ -1,6 +1,9 @@
+import { CanvasProps } from "@react-three/fiber";
 import { WebGPURendererParameters } from "three/src/renderers/webgpu/WebGPURenderer.Nodes.js";
-export default function GameCanvas({ loader, children, ...props }: {
+interface GameCanvasProps extends Omit<CanvasProps, 'children'> {
     loader?: boolean;
     children: React.ReactNode;
-    props?: WebGPURendererParameters;
-}): import("react/jsx-runtime").JSX.Element;
+    glConfig?: WebGPURendererParameters;
+}
+export default function GameCanvas({ loader, children, glConfig, ...props }: GameCanvasProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/GameCanvas.js

@@ -32,17 +32,17 @@ extend({
     SpriteNodeMaterial: SpriteNodeMaterial,
 });
 export default function GameCanvas(_a) {
-    var { loader = false, children } = _a, props = __rest(_a, ["loader", "children"]);
+    var { loader = false, children, glConfig } = _a, props = __rest(_a, ["loader", "children", "glConfig"]);
     const [frameloop, setFrameloop] = useState("never");
-    return _jsx(_Fragment, { children: _jsxs(Canvas, { style: { touchAction: 'none' }, shadows: { type: PCFShadowMap, }, frameloop: frameloop, gl: (_a) => __awaiter(this, [_a], void 0, function* ({ canvas }) {
+    return _jsx(_Fragment, { children: _jsxs(Canvas, Object.assign({ style: { touchAction: 'none' }, shadows: { type: PCFShadowMap, }, frameloop: frameloop, gl: (_a) => __awaiter(this, [_a], void 0, function* ({ canvas }) {
                 const renderer = new WebGPURenderer(Object.assign({ canvas: canvas, 
                     // @ts-expect-error futuristic
-                    shadowMap: true, antialias: true }, props));
+                    shadowMap: true, antialias: true }, glConfig));
                 yield renderer.init().then(() => {
                     setFrameloop("always");
                 });
                 return renderer;
             }), camera: {
                 position: [0, 1, 5],
-            }, children: [_jsx(Suspense, { children: children }), loader ? _jsx(Loader, {}) : null] }) });
+            } }, props, { children: [_jsx(Suspense, { children: children }), loader ? _jsx(Loader, {}) : null] })) });
 }

package/dist/tools/assetviewer/page.d.ts

@@ -19,5 +19,17 @@ interface SoundListViewerProps {
     basePath?: string;
 }
 export declare function SoundListViewer({ files, selected, onSelect, basePath }: SoundListViewerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SingleTextureViewer({ file, basePath }: {
+    file?: string;
+    basePath?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function SingleModelViewer({ file, basePath }: {
+    file?: string;
+    basePath?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function SingleSoundViewer({ file, basePath }: {
+    file?: string;
+    basePath?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
 export declare function SharedCanvas(): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/tools/assetviewer/page.js

@@ -37,6 +37,7 @@ function getItemsInPath(files, currentPath) {
 }
 function FolderTile({ name, onClick }) {
     return (_jsxs("div", { onClick: onClick, style: {
+            maxWidth: 60,
             aspectRatio: '1 / 1',
             backgroundColor: '#1f2937', /* gray-800 */
             cursor: 'pointer',
@@ -66,21 +67,12 @@ function useInView() {
 }
 function AssetListViewer({ files, selected, onSelect, renderCard }) {
     const [currentPath, setCurrentPath] = useState('');
-    const [showPicker, setShowPicker] = useState(false);
     const { folders, filesInCurrentPath } = getItemsInPath(files, currentPath);
-    const showCompactView = selected && !showPicker;
-    if (showCompactView) {
-        return (_jsxs("div", { style: { display: 'flex', gap: 4, alignItems: 'center' }, children: [renderCard(selected, onSelect), _jsx("button", { onClick: () => setShowPicker(true), style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 12, cursor: 'pointer', border: 'none' }, children: "Change" })] }));
-    }
     return (_jsxs("div", { 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, (f) => {
-                            onSelect(f);
-                            if (selected)
-                                setShowPicker(false);
-                        }) }, file)))] })] }));
+                }, 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, {})] }));
@@ -93,7 +85,7 @@ 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: { 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', 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() })] }));
 }
 function TextureSphere({ url, onError }) {
     const texture = useLoader(TextureLoader, url, undefined, (error) => {
@@ -112,7 +104,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: { 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(Stage, { intensity: 0.5, environment: "city", children: _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', 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(Stage, { intensity: 0.5, environment: "city", children: _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() })] }));
 }
 function ModelPreview({ url, onError }) {
     const [model, setModel] = useState(null);
@@ -146,10 +138,26 @@ function SoundCard({ file, onSelect, basePath = "" }) {
     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 })] }));
 }
+// Single Asset Viewer Components - display only one selected asset
+export function SingleTextureViewer({ file, basePath = "" }) {
+    if (!file)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(TextureCard, { file: file, basePath: basePath, onSelect: () => { } }), _jsx(SharedCanvas, {})] }));
+}
+export function SingleModelViewer({ file, basePath = "" }) {
+    if (!file)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(ModelCard, { file: file, basePath: basePath, onSelect: () => { } }), _jsx(SharedCanvas, {})] }));
+}
+export function SingleSoundViewer({ file, basePath = "" }) {
+    if (!file)
+        return null;
+    return _jsx(SoundCard, { file: file, basePath: basePath, onSelect: () => { } });
+}
 // 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: 'fixed',
+            position: 'absolute',
             top: 0,
             left: 0,
             width: '100vw',

package/dist/tools/loading/GameWithLoader.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+export default function GameWithLoader({ children }: {
+    children: ReactElement<{
+        onCanvasReady?: () => void;
+    }>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/tools/loading/GameWithLoader.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useState } from "react";
+import LoadingSpinner from "../../sketches/loading/loading";
+export default function GameWithLoader({ children }) {
+    const [isCanvasReady, setIsCanvasReady] = useState(false);
+    return (_jsxs(_Fragment, { children: [!isCanvasReady && _jsx(LoadingSpinner, {}), cloneElement(children, { onCanvasReady: () => setIsCanvasReady(true) })] }));
+}

package/dist/tools/loading/loading.d.ts

@@ -0,0 +1,2 @@
+declare const LoadingSpinner: () => import("react/jsx-runtime").JSX.Element;
+export default LoadingSpinner;

package/dist/tools/loading/loading.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+const lines = [
+    "$ initializing...",
+    "✓ loading scene",
+    "✓ ready"
+];
+const LoadingSpinner = () => {
+    const [index, setIndex] = useState(0);
+    useEffect(() => {
+        if (index < lines.length) {
+            const timer = setTimeout(() => setIndex(index + 1), 300);
+            return () => clearTimeout(timer);
+        }
+    }, [index]);
+    return (_jsxs("div", { className: "terminal-loading", children: [lines.slice(0, index).map((line, i) => (_jsx("div", { children: line }, i))), _jsx("div", { className: "cursor", children: "\u2588" }), _jsx("style", { jsx: true, children: `
+                .terminal-loading {
+                    position: fixed;
+                    inset: 0;
+                    z-index: 50;
+                    background: #0a0a0a;
+                    color: #00ff00;
+                    font-family: monospace;
+                    padding: 2rem;
+                    font-size: 14px;
+                }
+
+                .cursor {
+                    animation: blink 1s infinite;
+                }
+
+                @keyframes blink {
+                    50% { opacity: 0; }
+                }
+            ` })] }));
+};
+export default LoadingSpinner;

package/dist/tools/prefabeditor/EditorUI.js

@@ -49,23 +49,23 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
         if (!newAvailable.includes(addType))
             setAddType(newAvailable[0] || "");
     }, [Object.keys(node.components || {}).join(',')]);
-    return _jsxs("div", { style: inspector.content, className: "prefab-scroll", children: [_jsxs("div", { style: base.section, children: [_jsx("div", { style: base.label, children: "Node ID" }), _jsx("input", { style: base.input, value: (_a = node.name) !== null && _a !== void 0 ? _a : "", onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { name: e.target.value }))) })] }), _jsxs("div", { style: base.section, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }, children: [_jsx("div", { style: base.label, children: "Components" }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), base.btnDanger), onClick: deleteNode, children: "Delete Node" })] }), node.components && Object.entries(node.components).map(([key, comp]) => {
+    return _jsxs("div", { style: inspector.content, className: "prefab-scroll", children: [_jsxs("div", { style: base.section, children: [_jsxs("div", { style: { display: "flex", marginBottom: 8, alignItems: 'center', gap: 8 }, children: [_jsx("div", { style: { fontSize: 10, color: '#888', wordBreak: 'break-all', border: '1px solid rgba(255,255,255,0.1)', padding: '2px 4px', borderRadius: 4, flex: 1 }, children: node.id }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), base.btnDanger), title: "Delete Node", onClick: deleteNode, children: "\u274C" })] }), _jsx("input", { style: base.input, value: (_a = node.name) !== null && _a !== void 0 ? _a : "", placeholder: 'Node name', onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { name: e.target.value }))) })] }), _jsxs("div", { style: base.section, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }, children: _jsx("div", { style: base.label, children: "Components" }) }), node.components && Object.entries(node.components).map(([key, comp]) => {
                         if (!comp)
                             return null;
                         const def = ALL_COMPONENTS[comp.type];
                         if (!def)
                             return _jsxs("div", { style: { color: '#ff8888', fontSize: 11 }, children: ["Unknown: ", comp.type] }, key);
-                        return (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }, children: [_jsx("div", { style: { fontSize: 11, fontWeight: 500 }, children: key }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px' }), onClick: () => updateNode(n => {
+                        return (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }, children: [_jsx("div", { style: { fontSize: 11, fontWeight: 500 }, children: key }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px' }), title: "Remove Component", onClick: () => updateNode(n => {
                                                 const _a = n.components || {}, _b = key, _ = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
                                                 return Object.assign(Object.assign({}, n), { components: rest });
-                                            }), children: "\u2715" })] }), def.Editor && (_jsx(def.Editor, { component: comp, onUpdate: (newProps) => updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: Object.assign(Object.assign({}, comp), { properties: Object.assign(Object.assign({}, comp.properties), newProps) }) }) }))), basePath: basePath, transformMode: transformMode, setTransformMode: setTransformMode }))] }, key));
-                    })] }), available.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: base.label, children: "Add Component" }), _jsxs("div", { style: base.row, children: [_jsx("select", { style: Object.assign(Object.assign({}, base.input), { flex: 1 }), value: addType, onChange: e => setAddType(e.target.value), children: available.map(k => _jsx("option", { value: k, children: k }, k)) }), _jsx("button", { style: base.btn, disabled: !addType, onClick: () => {
-                                    if (!addType)
-                                        return;
-                                    const def = ALL_COMPONENTS[addType];
-                                    if (def) {
-                                        updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [addType.toLowerCase()]: { type: def.name, properties: def.defaultProperties } }) })));
-                                    }
-                                }, children: "+" })] })] }))] });
+                                            }), children: "\u2715" })] }), def.Editor && (_jsx(def.Editor, { component: comp, node: node, onUpdate: (newProps) => updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: Object.assign(Object.assign({}, comp), { properties: Object.assign(Object.assign({}, comp.properties), newProps) }) }) }))), basePath: basePath, transformMode: transformMode, setTransformMode: setTransformMode }))] }, key));
+                    })] }), available.length > 0 && (_jsx("div", { children: _jsxs("div", { style: base.row, children: [_jsx("select", { style: Object.assign(Object.assign({}, base.input), { flex: 1 }), value: addType, onChange: e => setAddType(e.target.value), children: available.map(k => _jsx("option", { value: k, children: k }, k)) }), _jsx("button", { style: base.btn, disabled: !addType, onClick: () => {
+                                if (!addType)
+                                    return;
+                                const def = ALL_COMPONENTS[addType];
+                                if (def) {
+                                    updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [addType.toLowerCase()]: { type: def.name, properties: def.defaultProperties } }) })));
+                                }
+                            }, title: "Add Component", children: "+" })] }) }))] });
 }
 export default EditorUI;

package/dist/tools/prefabeditor/components/ComponentRegistry.d.ts

@@ -1,8 +1,10 @@
 import { FC } from "react";
+import { ComponentData, GameObject } from "../types";
 export interface Component {
     name: string;
     Editor: FC<{
-        component: any;
+        node?: GameObject;
+        component: ComponentData;
         onUpdate: (newComp: any) => void;
         basePath?: string;
         transformMode?: "translate" | "rotate" | "scale";

package/dist/tools/prefabeditor/components/MaterialComponent.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TextureListViewer } from '../../assetviewer/page';
+import { SingleTextureViewer, TextureListViewer } from '../../assetviewer/page';
 import { useEffect, useState } from 'react';
 import { Input, Label } from './Input';
+import { useMemo } from 'react';
+import { DoubleSide, RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace, NearestFilter, LinearFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearMipmapNearestFilter, LinearMipmapLinearFilter } from 'three';
 function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
     var _a, _b, _c, _d;
     const [textureFiles, setTextureFiles] = useState([]);
+    const [showPicker, setShowPicker] = useState(false);
     useEffect(() => {
         const base = basePath ? `${basePath}/` : '';
         fetch(`/${base}textures/manifest.json`)
@@ -22,7 +25,10 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
         fontFamily: 'monospace',
         outline: 'none',
     };
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Color" }), _jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx("input", { type: "color", style: { height: 20, width: 20, backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }, value: component.properties.color, onChange: e => onUpdate({ color: e.target.value }) }), _jsx("input", { type: "text", style: textInputStyle, value: component.properties.color, onChange: e => onUpdate({ color: e.target.value }) })] })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [_jsx("input", { type: "checkbox", style: { width: 12, height: 12 }, checked: component.properties.wireframe || false, onChange: e => onUpdate({ wireframe: e.target.checked }) }), _jsx("label", { style: { fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)' }, children: "Wireframe" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Texture" }), _jsx("div", { style: { maxHeight: 128, overflowY: 'auto' }, children: _jsx(TextureListViewer, { files: textureFiles, selected: component.properties.texture || undefined, onSelect: file => onUpdate({ texture: file }), basePath: basePath }) })] }), component.properties.texture && (_jsxs("div", { style: { borderTop: '1px solid rgba(34, 211, 238, 0.2)', paddingTop: 4, marginTop: 4 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 4 }, children: [_jsx("input", { type: "checkbox", style: { width: 12, height: 12 }, checked: component.properties.repeat || false, onChange: e => onUpdate({ repeat: e.target.checked }) }), _jsx("label", { style: { fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)' }, children: "Repeat Texture" })] }), component.properties.repeat && (_jsxs("div", { children: [_jsx(Label, { children: "Repeat (X, Y)" }), _jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx(Input, { value: (_b = (_a = component.properties.repeatCount) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 1, onChange: value => {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Color" }), _jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx("input", { type: "color", style: { height: 20, width: 20, backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }, value: component.properties.color, onChange: e => onUpdate({ color: e.target.value }) }), _jsx("input", { type: "text", style: textInputStyle, value: component.properties.color, onChange: e => onUpdate({ color: e.target.value }) })] })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [_jsx("input", { type: "checkbox", style: { width: 12, height: 12 }, checked: component.properties.wireframe || false, onChange: e => onUpdate({ wireframe: e.target.checked }) }), _jsx("label", { style: { fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)' }, children: "Wireframe" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Texture File" }), _jsxs("div", { style: { maxHeight: 128, overflowY: 'auto', position: 'relative', display: 'flex', alignItems: 'center' }, children: [_jsx(SingleTextureViewer, { file: component.properties.texture || undefined, basePath: basePath }), _jsx("button", { onClick: () => setShowPicker(!showPicker), style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4 }, children: showPicker ? 'Hide' : 'Change' }), showPicker && (_jsx("div", { style: { position: 'fixed', left: '-10px', top: '50%', transform: 'translate(-100%, -50%)', background: 'rgba(0,0,0,0.9)', padding: 16, border: '1px solid rgba(34, 211, 238, 0.3)', maxHeight: '80vh', overflowY: 'auto', zIndex: 1000 }, children: _jsx(TextureListViewer, { files: textureFiles, selected: component.properties.texture || undefined, onSelect: (file) => {
+                                        onUpdate({ texture: file });
+                                        setShowPicker(false);
+                                    }, basePath: basePath }) }))] })] }), component.properties.texture && (_jsxs("div", { style: { borderTop: '1px solid rgba(34, 211, 238, 0.2)', paddingTop: 4, marginTop: 4 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 4 }, children: [_jsx("input", { type: "checkbox", style: { width: 12, height: 12 }, checked: component.properties.repeat || false, onChange: e => onUpdate({ repeat: e.target.checked }) }), _jsx("label", { style: { fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)' }, children: "Repeat Texture" })] }), component.properties.repeat && (_jsxs("div", { children: [_jsx(Label, { children: "Repeat (X, Y)" }), _jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx(Input, { value: (_b = (_a = component.properties.repeatCount) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 1, onChange: value => {
                                             var _a, _b;
                                             const y = (_b = (_a = component.properties.repeatCount) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : 1;
                                             onUpdate({ repeatCount: [value, y] });
@@ -30,19 +36,33 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
                                             var _a, _b;
                                             const x = (_b = (_a = component.properties.repeatCount) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 1;
                                             onUpdate({ repeatCount: [x, value] });
-                                        } })] })] }))] }))] }));
+                                        } })] })] })), _jsxs("div", { style: { marginTop: 4 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 4 }, children: [_jsx("input", { type: "checkbox", style: { width: 12, height: 12 }, checked: component.properties.generateMipmaps !== false, onChange: e => onUpdate({ generateMipmaps: e.target.checked }) }), _jsx("label", { style: { fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)' }, children: "Generate Mipmaps" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Min Filter" }), _jsxs("select", { style: Object.assign(Object.assign({}, textInputStyle), { width: '100%', cursor: 'pointer' }), value: component.properties.minFilter || 'LinearMipmapLinearFilter', onChange: e => onUpdate({ minFilter: e.target.value }), children: [_jsx("option", { value: "NearestFilter", children: "Nearest" }), _jsx("option", { value: "NearestMipmapNearestFilter", children: "Nearest Mipmap Nearest" }), _jsx("option", { value: "NearestMipmapLinearFilter", children: "Nearest Mipmap Linear" }), _jsx("option", { value: "LinearFilter", children: "Linear" }), _jsx("option", { value: "LinearMipmapNearestFilter", children: "Linear Mipmap Nearest" }), _jsx("option", { value: "LinearMipmapLinearFilter", children: "Linear Mipmap Linear (Default)" })] })] }), _jsxs("div", { style: { marginTop: 4 }, children: [_jsx(Label, { children: "Mag Filter" }), _jsxs("select", { style: Object.assign(Object.assign({}, textInputStyle), { width: '100%', cursor: 'pointer' }), value: component.properties.magFilter || 'LinearFilter', onChange: e => onUpdate({ magFilter: e.target.value }), children: [_jsx("option", { value: "NearestFilter", children: "Nearest" }), _jsx("option", { value: "LinearFilter", children: "Linear (Default)" })] })] })] })] }))] }));
 }
 ;
-import { useMemo } from 'react';
-import { DoubleSide, RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace } from 'three';
 // View for Material component
 function MaterialComponentView({ properties, loadedTextures }) {
     var _a;
     const textureName = properties === null || properties === void 0 ? void 0 : properties.texture;
     const repeat = properties === null || properties === void 0 ? void 0 : properties.repeat;
     const repeatCount = properties === null || properties === void 0 ? void 0 : properties.repeatCount;
+    const generateMipmaps = (properties === null || properties === void 0 ? void 0 : properties.generateMipmaps) !== false;
+    const minFilter = (properties === null || properties === void 0 ? void 0 : properties.minFilter) || 'LinearMipmapLinearFilter';
+    const magFilter = (properties === null || properties === void 0 ? void 0 : properties.magFilter) || 'LinearFilter';
     const texture = textureName && loadedTextures ? loadedTextures[textureName] : undefined;
+    const minFilterMap = {
+        NearestFilter,
+        LinearFilter,
+        NearestMipmapNearestFilter,
+        NearestMipmapLinearFilter,
+        LinearMipmapNearestFilter,
+        LinearMipmapLinearFilter
+    };
+    const magFilterMap = {
+        NearestFilter,
+        LinearFilter
+    };
     const finalTexture = useMemo(() => {
+        var _a, _b;
         if (!texture)
             return undefined;
         const t = texture.clone();
@@ -56,9 +76,12 @@ function MaterialComponentView({ properties, loadedTextures }) {
             t.repeat.set(1, 1);
         }
         t.colorSpace = SRGBColorSpace;
+        t.generateMipmaps = generateMipmaps;
+        t.minFilter = (_a = minFilterMap[minFilter]) !== null && _a !== void 0 ? _a : LinearMipmapLinearFilter;
+        t.magFilter = (_b = magFilterMap[magFilter]) !== null && _b !== void 0 ? _b : LinearFilter;
         t.needsUpdate = true;
         return t;
-    }, [texture, repeat, repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0], repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1]]);
+    }, [texture, repeat, repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0], repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1], generateMipmaps, minFilter, magFilter]);
     if (!properties) {
         return _jsx("meshStandardMaterial", { color: "red", wireframe: true });
     }

package/dist/tools/prefabeditor/components/ModelComponent.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ModelListViewer } from '../../assetviewer/page';
+import { ModelListViewer, SingleModelViewer } from '../../assetviewer/page';
 import { useEffect, useState, useMemo } from 'react';
 import { Label } from './Input';
-function ModelComponentEditor({ component, onUpdate, basePath = "" }) {
+function ModelComponentEditor({ component, node, onUpdate, basePath = "" }) {
     const [modelFiles, setModelFiles] = useState([]);
+    const [showPicker, setShowPicker] = useState(false);
     useEffect(() => {
         const base = basePath ? `${basePath}/` : '';
         fetch(`/${base}models/manifest.json`)
@@ -16,7 +17,10 @@ function ModelComponentEditor({ component, onUpdate, basePath = "" }) {
         const filename = file.startsWith('/') ? file.slice(1) : file;
         onUpdate({ 'filename': filename });
     };
-    return _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Model" }), _jsx("div", { style: { maxHeight: 128, overflowY: 'auto' }, children: _jsx(ModelListViewer, { files: modelFiles, selected: component.properties.filename ? `/${component.properties.filename}` : undefined, onSelect: handleModelSelect, basePath: basePath }) })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [_jsx("input", { type: "checkbox", id: "instanced-checkbox", checked: component.properties.instanced || false, onChange: e => onUpdate({ instanced: e.target.checked }), style: { width: 12, height: 12 } }), _jsx("label", { htmlFor: "instanced-checkbox", style: { fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)' }, children: "Instanced" })] })] });
+    return _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Model File" }), _jsxs("div", { style: { maxHeight: 128, overflowY: 'auto', position: 'relative', display: 'flex', alignItems: 'center' }, children: [_jsx(SingleModelViewer, { file: component.properties.filename ? `/${component.properties.filename}` : undefined, basePath: basePath }), _jsx("button", { onClick: () => setShowPicker(!showPicker), style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4 }, children: showPicker ? 'Hide' : 'Change' }), showPicker && (_jsx("div", { style: { position: 'fixed', left: '-10px', top: '50%', transform: 'translate(-100%, -50%)', background: 'rgba(0,0,0,0.9)', padding: 16, border: '1px solid rgba(34, 211, 238, 0.3)', maxHeight: '80vh', overflowY: 'auto', zIndex: 1000 }, children: _jsx(ModelListViewer, { files: modelFiles, selected: component.properties.filename ? `/${component.properties.filename}` : undefined, onSelect: (file) => {
+                                        handleModelSelect(file);
+                                        setShowPicker(false);
+                                    }, basePath: basePath }, node === null || node === void 0 ? void 0 : node.id) }))] })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [_jsx("input", { type: "checkbox", id: "instanced-checkbox", checked: component.properties.instanced || false, onChange: e => onUpdate({ instanced: e.target.checked }), style: { width: 12, height: 12 } }), _jsx("label", { htmlFor: "instanced-checkbox", style: { fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)' }, children: "Instanced" })] })] });
 }
 // View for Model component
 function ModelComponentView({ properties, loadedModels, children }) {

package/dist/tools/prefabeditor/styles.js

@@ -24,7 +24,6 @@ export const base = {
         color: colors.text,
         border: `1px solid ${colors.border}`,
         borderRadius: 4,
-        overflow: 'hidden',
         backdropFilter: 'blur(8px)',
         fontFamily: fonts.family,
         fontSize: fonts.size,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/helpers/SoundManager.ts

@@ -0,0 +1,130 @@
+ 
+class SoundManager {
+  private static _instance: SoundManager | null = null
+
+  public context: AudioContext
+  private buffers = new Map<string, AudioBuffer>()
+
+  private masterGain: GainNode
+  private sfxGain: GainNode
+  private musicGain: GainNode
+
+  private constructor() {
+    const AudioCtx =
+      window.AudioContext || (window as any).webkitAudioContext
+
+    this.context = new AudioCtx()
+
+    this.masterGain = this.context.createGain()
+    this.sfxGain = this.context.createGain()
+    this.musicGain = this.context.createGain()
+
+    this.sfxGain.connect(this.masterGain)
+    this.musicGain.connect(this.masterGain)
+    this.masterGain.connect(this.context.destination)
+
+    this.masterGain.gain.value = 1
+    this.sfxGain.gain.value = 1
+    this.musicGain.gain.value = 1
+  }
+
+  /** Singleton accessor */
+  static get instance(): SoundManager {
+    if (typeof window === 'undefined') {
+      // Return a dummy instance for SSR
+      return new Proxy({} as SoundManager, {
+        get: () => () => {}
+      })
+    }
+    if (!SoundManager._instance) {
+      SoundManager._instance = new SoundManager()
+    }
+    return SoundManager._instance
+  }
+
+  /** Required once after user gesture (browser) */
+  resume() {
+    if (this.context.state !== "running") {
+      this.context.resume()
+    }
+  }
+
+  /** Preload a sound from URL */
+  async load(path: string, url: string) {
+    if (this.buffers.has(path)) return
+
+    const res = await fetch(url)
+    const arrayBuffer = await res.arrayBuffer()
+    const buffer = await this.context.decodeAudioData(arrayBuffer)
+
+    this.buffers.set(path, buffer)
+  }
+
+  /** Play from already-loaded buffer (fails silently if not loaded) */
+  playSync(
+    path: string,
+    {
+      volume = 1,
+      playbackRate = 1,
+      detune = 0,
+      pitch = 1,
+    }: {
+      volume?: number
+      playbackRate?: number
+      detune?: number
+      pitch?: number
+    } = {}
+  ) {
+    this.resume()
+
+    const buffer = this.buffers.get(path)
+    if (!buffer) return
+
+    const src = this.context.createBufferSource()
+    const gain = this.context.createGain()
+
+    src.buffer = buffer
+    src.playbackRate.value = playbackRate * pitch
+    src.detune.value = detune
+
+    gain.gain.value = volume
+
+    src.connect(gain)
+    gain.connect(this.sfxGain)
+
+    src.start()
+  }
+
+  /** Load and play SFX - accepts file path directly */
+  async play(
+    path: string,
+    options?: {
+      volume?: number
+      playbackRate?: number
+      detune?: number
+      pitch?: number
+    }
+  ) {
+    // Auto-load from path if not already loaded
+    if (!this.buffers.has(path)) {
+      await this.load(path, path)
+    }
+
+    this.playSync(path, options)
+  }
+
+  /** Volume controls */
+  setMasterVolume(v: number) {
+    this.masterGain.gain.value = v
+  }
+
+  setSfxVolume(v: number) {
+    this.sfxGain.gain.value = v
+  }
+
+  setMusicVolume(v: number) {
+    this.musicGain.gain.value = v
+  }
+}
+
+export const sound = SoundManager.instance

package/src/index.ts

@@ -20,6 +20,7 @@ export {
   SoundListViewer,
   SharedCanvas,
 } from './tools/assetviewer/page';
+export { sound as soundManager } from './helpers/SoundManager';
 
 // Helpers
 export * from './helpers';

package/src/shared/GameCanvas.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Canvas, extend } from "@react-three/fiber";
+import { Canvas, extend, CanvasProps } from "@react-three/fiber";
 import { WebGPURenderer, MeshBasicNodeMaterial, MeshStandardNodeMaterial, SpriteNodeMaterial, PCFShadowMap } from "three/webgpu";
 import { Suspense, useState } from "react";
 import { WebGPURendererParameters } from "three/src/renderers/webgpu/WebGPURenderer.Nodes.js";
@@ -15,8 +15,13 @@ extend({
     SpriteNodeMaterial: SpriteNodeMaterial,
 });
 
+interface GameCanvasProps extends Omit<CanvasProps, 'children'> {
+    loader?: boolean;
+    children: React.ReactNode;
+    glConfig?: WebGPURendererParameters;
+}
 
-export default function GameCanvas({ loader = false, children, ...props }: { loader?: boolean, children: React.ReactNode, props?: WebGPURendererParameters }) {
+export default function GameCanvas({ loader = false, children, glConfig, ...props }: GameCanvasProps) {
     const [frameloop, setFrameloop] = useState<"never" | "always">("never");
 
     return <>
@@ -30,7 +35,7 @@ export default function GameCanvas({ loader = false, children, ...props }: { loa
                     // @ts-expect-error futuristic
                     shadowMap: true,
                     antialias: true,
-                    ...props,
+                    ...glConfig,
                 });
                 await renderer.init().then(() => {
                     setFrameloop("always");
@@ -40,6 +45,7 @@ export default function GameCanvas({ loader = false, children, ...props }: { loa
             camera={{
                 position: [0, 1, 5],
             }}
+            {...props}
         >
             <Suspense>
                 {children}

package/src/tools/assetviewer/page.tsx

@@ -48,6 +48,7 @@ function FolderTile({ name, onClick }: { name: string; onClick: () => void }) {
         <div
             onClick={onClick}
             style={{
+                maxWidth: 60,
                 aspectRatio: '1 / 1',
                 backgroundColor: '#1f2937', /* gray-800 */
                 cursor: 'pointer',
@@ -98,25 +99,8 @@ interface AssetListViewerProps {
 
 function AssetListViewer({ files, selected, onSelect, renderCard }: AssetListViewerProps) {
     const [currentPath, setCurrentPath] = useState('');
-    const [showPicker, setShowPicker] = useState(false);
     const { folders, filesInCurrentPath } = getItemsInPath(files, currentPath);
 
-    const showCompactView = selected && !showPicker;
-
-    if (showCompactView) {
-        return (
-            <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
-                {renderCard(selected, onSelect)}
-                <button
-                    onClick={() => setShowPicker(true)}
-                    style={{ padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 12, cursor: 'pointer', border: 'none' }}
-                >
-                    Change
-                </button>
-            </div>
-        );
-    }
-
     return (
         <div>
             {currentPath && (
@@ -141,10 +125,7 @@ function AssetListViewer({ files, selected, onSelect, renderCard }: AssetListVie
                 ))}
                 {filesInCurrentPath.map((file) => (
                     <div key={file}>
-                        {renderCard(file, (f) => {
-                            onSelect(f);
-                            if (selected) setShowPicker(false);
-                        })}
+                        {renderCard(file, onSelect)}
                     </div>
                 ))}
             </div>
@@ -196,7 +177,7 @@ function TextureCard({ file, onSelect, basePath = "" }: { file: string; onSelect
     return (
         <div
             ref={ref}
-            style={{ aspectRatio: '1 / 1', backgroundColor: '#1f2937', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}
+            style={{ maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#1f2937', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}
             onClick={() => onSelect(file)}
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
@@ -282,7 +263,7 @@ function ModelCard({ file, onSelect, basePath = "" }: { file: string; onSelect:
     return (
         <div
             ref={ref}
-            style={{ aspectRatio: '1 / 1', backgroundColor: '#111827', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}
+            style={{ maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#111827', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}
             onClick={() => onSelect(file)}
         >
             <div style={styles.flexFillRelative}>
@@ -364,6 +345,32 @@ function SoundCard({ file, onSelect, basePath = "" }: { file: string; onSelect:
     );
 }
 
+// Single Asset Viewer Components - display only one selected asset
+export function SingleTextureViewer({ file, basePath = "" }: { file?: string; basePath?: string }) {
+    if (!file) return null;
+    return (
+        <>
+            <TextureCard file={file} basePath={basePath} onSelect={() => { }} />
+            <SharedCanvas />
+        </>
+    );
+}
+
+export function SingleModelViewer({ file, basePath = "" }: { file?: string; basePath?: string }) {
+    if (!file) return null;
+    return (
+        <>
+            <ModelCard file={file} basePath={basePath} onSelect={() => { }} />
+            <SharedCanvas />
+        </>
+    );
+}
+
+export function SingleSoundViewer({ file, basePath = "" }: { file?: string; basePath?: string }) {
+    if (!file) return null;
+    return <SoundCard file={file} basePath={basePath} onSelect={() => { }} />;
+}
+
 // Shared Canvas Component - can be used independently in any viewer
 export function SharedCanvas() {
     return (
@@ -372,7 +379,7 @@ export function SharedCanvas() {
             dpr={[1, 1.5]}
             camera={{ position: [0, 0, 3], fov: 45, near: 0.1, far: 1000 }}
             style={{
-                position: 'fixed',
+                position: 'absolute',
                 top: 0,
                 left: 0,
                 width: '100vw',

package/src/tools/prefabeditor/EditorUI.tsx

@@ -111,12 +111,19 @@ function NodeInspector({
     }, [Object.keys(node.components || {}).join(',')]);
 
     return <div style={inspector.content} className="prefab-scroll">
-        {/* Node ID */}
+        {/* Node Name */}
         <div style={base.section}>
-            <div style={base.label}>Node ID</div>
+            <div style={{ display: "flex", marginBottom: 8, alignItems: 'center', gap: 8 }}>
+                <div style={{ fontSize: 10, color: '#888', wordBreak: 'break-all', border: '1px solid rgba(255,255,255,0.1)', padding: '2px 4px', borderRadius: 4, flex: 1 }}>
+                    {node.id}
+                </div>
+                <button style={{ ...base.btn, ...base.btnDanger }} title="Delete Node" onClick={deleteNode}>❌</button>
+            </div>
+
             <input
                 style={base.input}
                 value={node.name ?? ""}
+                placeholder='Node name'
                 onChange={e =>
                     updateNode(n => ({ ...n, name: e.target.value }))
                 }
@@ -127,7 +134,6 @@ function NodeInspector({
         <div style={base.section}>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                 <div style={base.label}>Components</div>
-                <button style={{ ...base.btn, ...base.btnDanger }} onClick={deleteNode}>Delete Node</button>
             </div>
 
             {node.components && Object.entries(node.components).map(([key, comp]: [string, any]) => {
@@ -143,6 +149,7 @@ function NodeInspector({
                             <div style={{ fontSize: 11, fontWeight: 500 }}>{key}</div>
                             <button
                                 style={{ ...base.btn, padding: '2px 6px' }}
+                                title="Remove Component"
                                 onClick={() => updateNode(n => {
                                     const { [key]: _, ...rest } = n.components || {};
                                     return { ...n, components: rest };
@@ -154,6 +161,7 @@ function NodeInspector({
                         {def.Editor && (
                             <def.Editor
                                 component={comp}
+                                node={node}
                                 onUpdate={(newProps: any) => updateNode(n => ({
                                     ...n,
                                     components: {
@@ -174,7 +182,6 @@ function NodeInspector({
         {/* Add Component */}
         {available.length > 0 && (
             <div>
-                <div style={base.label}>Add Component</div>
                 <div style={base.row}>
                     <select
                         style={{ ...base.input, flex: 1 }}
@@ -199,6 +206,7 @@ function NodeInspector({
                                 }));
                             }
                         }}
+                        title="Add Component"
                     >
                         +
                     </button>

package/src/tools/prefabeditor/components/ComponentRegistry.ts

@@ -1,9 +1,11 @@
 import { FC } from "react";
+import { ComponentData, GameObject } from "../types";
 
 export interface Component {
     name: string;
     Editor: FC<{ 
-        component: any; 
+        node?: GameObject;
+        component: ComponentData; 
         onUpdate: (newComp: any) => void; 
         basePath?: string;
         transformMode?: "translate" | "rotate" | "scale";

package/src/tools/prefabeditor/components/MaterialComponent.tsx

@@ -1,10 +1,27 @@
-import { TextureListViewer } from '../../assetviewer/page';
+import { SingleTextureViewer, TextureListViewer } from '../../assetviewer/page';
 import { useEffect, useState } from 'react';
 import { Component } from './ComponentRegistry';
 import { Input, Label } from './Input';
+import { useMemo } from 'react';
+import {
+    DoubleSide,
+    RepeatWrapping,
+    ClampToEdgeWrapping,
+    SRGBColorSpace,
+    Texture,
+    NearestFilter,
+    LinearFilter,
+    NearestMipmapNearestFilter,
+    NearestMipmapLinearFilter,
+    LinearMipmapNearestFilter,
+    LinearMipmapLinearFilter,
+    MinificationTextureFilter,
+    MagnificationTextureFilter
+} from 'three';
 
 function MaterialComponentEditor({ component, onUpdate, basePath = "" }: { component: any; onUpdate: (newComp: any) => void; basePath?: string }) {
     const [textureFiles, setTextureFiles] = useState<string[]>([]);
+    const [showPicker, setShowPicker] = useState(false);
 
     useEffect(() => {
         const base = basePath ? `${basePath}/` : '';
@@ -56,15 +73,30 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }: { compo
             </div>
 
             <div>
-                <Label>Texture</Label>
-                <div style={{ maxHeight: 128, overflowY: 'auto' }}>
-                    <TextureListViewer
-                        files={textureFiles}
-                        selected={component.properties.texture || undefined}
-                        onSelect={file => onUpdate({ texture: file })}
-                        basePath={basePath}
-                    />
+                <Label>Texture File</Label>
+                <div style={{ maxHeight: 128, overflowY: 'auto', position: 'relative', display: 'flex', alignItems: 'center' }}>
+                    <SingleTextureViewer file={component.properties.texture || undefined} basePath={basePath} />
+                    <button
+                        onClick={() => setShowPicker(!showPicker)}
+                        style={{ padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4 }}
+                    >
+                        {showPicker ? 'Hide' : 'Change'}
+                    </button>
+                    {showPicker && (
+                        <div style={{ position: 'fixed', left: '-10px', top: '50%', transform: 'translate(-100%, -50%)', background: 'rgba(0,0,0,0.9)', padding: 16, border: '1px solid rgba(34, 211, 238, 0.3)', maxHeight: '80vh', overflowY: 'auto', zIndex: 1000 }}>
+                            <TextureListViewer
+                                files={textureFiles}
+                                selected={component.properties.texture || undefined}
+                                onSelect={(file) => {
+                                    onUpdate({ texture: file });
+                                    setShowPicker(false);
+                                }}
+                                basePath={basePath}
+                            />
+                        </div>
+                    )}
                 </div>
+
             </div>
 
             {component.properties.texture && (
@@ -100,23 +132,76 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }: { compo
                             </div>
                         </div>
                     )}
+
+                    <div style={{ marginTop: 4 }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 4 }}>
+                            <input
+                                type="checkbox"
+                                style={{ width: 12, height: 12 }}
+                                checked={component.properties.generateMipmaps !== false}
+                                onChange={e => onUpdate({ generateMipmaps: e.target.checked })}
+                            />
+                            <label style={{ fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)' }}>Generate Mipmaps</label>
+                        </div>
+
+                        <div>
+                            <Label>Min Filter</Label>
+                            <select
+                                style={{ ...textInputStyle, width: '100%', cursor: 'pointer' }}
+                                value={component.properties.minFilter || 'LinearMipmapLinearFilter'}
+                                onChange={e => onUpdate({ minFilter: e.target.value })}
+                            >
+                                <option value="NearestFilter">Nearest</option>
+                                <option value="NearestMipmapNearestFilter">Nearest Mipmap Nearest</option>
+                                <option value="NearestMipmapLinearFilter">Nearest Mipmap Linear</option>
+                                <option value="LinearFilter">Linear</option>
+                                <option value="LinearMipmapNearestFilter">Linear Mipmap Nearest</option>
+                                <option value="LinearMipmapLinearFilter">Linear Mipmap Linear (Default)</option>
+                            </select>
+                        </div>
+
+                        <div style={{ marginTop: 4 }}>
+                            <Label>Mag Filter</Label>
+                            <select
+                                style={{ ...textInputStyle, width: '100%', cursor: 'pointer' }}
+                                value={component.properties.magFilter || 'LinearFilter'}
+                                onChange={e => onUpdate({ magFilter: e.target.value })}
+                            >
+                                <option value="NearestFilter">Nearest</option>
+                                <option value="LinearFilter">Linear (Default)</option>
+                            </select>
+                        </div>
+                    </div>
                 </div>
             )}
         </div>
     );
 };
 
-
-import { useMemo } from 'react';
-import { DoubleSide, RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace, Texture } from 'three';
-
 // View for Material component
 function MaterialComponentView({ properties, loadedTextures }: { properties: any, loadedTextures?: Record<string, Texture> }) {
     const textureName = properties?.texture;
     const repeat = properties?.repeat;
     const repeatCount = properties?.repeatCount;
+    const generateMipmaps = properties?.generateMipmaps !== false;
+    const minFilter = properties?.minFilter || 'LinearMipmapLinearFilter';
+    const magFilter = properties?.magFilter || 'LinearFilter';
     const texture = textureName && loadedTextures ? loadedTextures[textureName] : undefined;
 
+    const minFilterMap: Record<string, MinificationTextureFilter> = {
+        NearestFilter,
+        LinearFilter,
+        NearestMipmapNearestFilter,
+        NearestMipmapLinearFilter,
+        LinearMipmapNearestFilter,
+        LinearMipmapLinearFilter
+    };
+
+    const magFilterMap: Record<string, MagnificationTextureFilter> = {
+        NearestFilter,
+        LinearFilter
+    };
+
     const finalTexture = useMemo(() => {
         if (!texture) return undefined;
         const t = texture.clone();
@@ -128,9 +213,12 @@ function MaterialComponentView({ properties, loadedTextures }: { properties: any
             t.repeat.set(1, 1);
         }
         t.colorSpace = SRGBColorSpace;
+        t.generateMipmaps = generateMipmaps;
+        t.minFilter = minFilterMap[minFilter] ?? LinearMipmapLinearFilter;
+        t.magFilter = magFilterMap[magFilter] ?? LinearFilter;
         t.needsUpdate = true;
         return t;
-    }, [texture, repeat, repeatCount?.[0], repeatCount?.[1]]);
+    }, [texture, repeat, repeatCount?.[0], repeatCount?.[1], generateMipmaps, minFilter, magFilter]);
 
     if (!properties) {
         return <meshStandardMaterial color="red" wireframe />;

package/src/tools/prefabeditor/components/ModelComponent.tsx

@@ -1,10 +1,12 @@
-import { ModelListViewer } from '../../assetviewer/page';
+import { ModelListViewer, SingleModelViewer } from '../../assetviewer/page';
 import { useEffect, useState, useMemo } from 'react';
 import { Component } from './ComponentRegistry';
 import { Label } from './Input';
+import { GameObject } from '../types';
 
-function ModelComponentEditor({ component, onUpdate, basePath = "" }: { component: any; onUpdate: (newComp: any) => void; basePath?: string }) {
+function ModelComponentEditor({ component, node, onUpdate, basePath = "" }: { component: any; node?: GameObject; onUpdate: (newComp: any) => void; basePath?: string }) {
     const [modelFiles, setModelFiles] = useState<string[]>([]);
+    const [showPicker, setShowPicker] = useState(false);
 
     useEffect(() => {
         const base = basePath ? `${basePath}/` : '';
@@ -22,14 +24,29 @@ function ModelComponentEditor({ component, onUpdate, basePath = "" }: { componen
 
     return <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
         <div>
-            <Label>Model</Label>
-            <div style={{ maxHeight: 128, overflowY: 'auto' }}>
-                <ModelListViewer
-                    files={modelFiles}
-                    selected={component.properties.filename ? `/${component.properties.filename}` : undefined}
-                    onSelect={handleModelSelect}
-                    basePath={basePath}
-                />
+            <Label>Model File</Label>
+            <div style={{ maxHeight: 128, overflowY: 'auto', position: 'relative', display: 'flex', alignItems: 'center' }}>
+                <SingleModelViewer file={component.properties.filename ? `/${component.properties.filename}` : undefined} basePath={basePath} />
+                <button
+                    onClick={() => setShowPicker(!showPicker)}
+                    style={{ padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4 }}
+                >
+                    {showPicker ? 'Hide' : 'Change'}
+                </button>
+                {showPicker && (
+                    <div style={{ position: 'fixed', left: '-10px', top: '50%', transform: 'translate(-100%, -50%)', background: 'rgba(0,0,0,0.9)', padding: 16, border: '1px solid rgba(34, 211, 238, 0.3)', maxHeight: '80vh', overflowY: 'auto', zIndex: 1000 }}>
+                        <ModelListViewer
+                            key={node?.id}
+                            files={modelFiles}
+                            selected={component.properties.filename ? `/${component.properties.filename}` : undefined}
+                            onSelect={(file) => {
+                                handleModelSelect(file);
+                                setShowPicker(false);
+                            }}
+                            basePath={basePath}
+                        />
+                    </div>
+                )}
             </div>
         </div>
         <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>

package/src/tools/prefabeditor/styles.ts

@@ -27,7 +27,6 @@ export const base = {
         color: colors.text,
         border: `1px solid ${colors.border}`,
         borderRadius: 4,
-        overflow: 'hidden',
         backdropFilter: 'blur(8px)',
         fontFamily: fonts.family,
         fontSize: fonts.size,