react-three-game 0.0.38 → 0.0.39

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/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

@@ -2,6 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { 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([]);
@@ -30,19 +32,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 +72,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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ModelListViewer } 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([]);
     useEffect(() => {
         const base = basePath ? `${basePath}/` : '';
@@ -16,7 +16,7 @@ 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" }), _jsx("div", { style: { maxHeight: 128, overflowY: 'auto' }, children: _jsx(ModelListViewer, { files: modelFiles, selected: component.properties.filename ? `/${component.properties.filename}` : undefined, onSelect: handleModelSelect, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "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/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

@@ -2,6 +2,22 @@ import { 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[]>([]);
@@ -100,23 +116,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 +197,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

@@ -2,8 +2,9 @@ import { ModelListViewer } 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[]>([]);
 
     useEffect(() => {
@@ -25,6 +26,7 @@ function ModelComponentEditor({ component, onUpdate, basePath = "" }: { componen
             <Label>Model</Label>
             <div style={{ maxHeight: 128, overflowY: 'auto' }}>
                 <ModelListViewer
+                    key={node?.id}
                     files={modelFiles}
                     selected={component.properties.filename ? `/${component.properties.filename}` : undefined}
                     onSelect={handleModelSelect}