react-three-game 0.0.41 → 0.0.44

package/README.md

@@ -6,23 +6,6 @@ JSON-first 3D game engine. React Three Fiber + WebGPU + Rapier Physics.
 npm i react-three-game @react-three/fiber @react-three/rapier three
 ```
 
-### CDN / UMD Build
-
-For use with script tags (no build tools):
-
-```html
-<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
-<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-<script src="https://unpkg.com/react-three-game@0.0.41/dist/index.umd.js"></script>
-
-<script>
-  const { ModelListViewer, SharedCanvas, TextureListViewer } = window.ReactThreeGame;
-  // Use components...
-</script>
-```
-
-See [docs/public/test-umd.html](docs/public/test-umd.html) for a complete example.
-
 ![Prefab Editor](assets/editor.gif)
 ![Architecture](assets/architecture.png)
 

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/helpers/index.d.ts

@@ -0,0 +1,35 @@
+import type { GameObject } from "../tools/prefabeditor/types";
+export type Vec3 = [number, number, number];
+export interface GroundOptions {
+    /** GameObject id. Defaults to "ground". */
+    id?: string;
+    /** Plane size. Defaults to 50. */
+    size?: number;
+    /** Transform overrides. */
+    position?: Vec3;
+    rotation?: Vec3;
+    scale?: Vec3;
+    /** Material overrides. */
+    color?: string;
+    texture?: string;
+    /** When true, set repeat wrapping. Defaults to true if texture is provided. */
+    repeat?: boolean;
+    /** Texture repeat counts when repeat=true. Defaults to [25,25]. */
+    repeatCount?: [number, number];
+    /** Physics body type. Defaults to "fixed". */
+    physicsType?: "fixed" | "dynamic" | "kinematic";
+    /** Set true to hide the node. */
+    hidden?: boolean;
+    /** Set true to disable the node. */
+    disabled?: boolean;
+}
+/**
+ * Create a ready-to-use plane ground GameObject.
+ *
+ * Designed to reduce prefab boilerplate:
+ * - Transform (rotated to lie flat)
+ * - Geometry (plane)
+ * - Material (optional texture + repeat)
+ * - Physics (fixed by default)
+ */
+export declare function ground(options?: GroundOptions): GameObject;

package/dist/helpers/index.js

@@ -0,0 +1,44 @@
+/**
+ * Create a ready-to-use plane ground GameObject.
+ *
+ * Designed to reduce prefab boilerplate:
+ * - Transform (rotated to lie flat)
+ * - Geometry (plane)
+ * - Material (optional texture + repeat)
+ * - Physics (fixed by default)
+ */
+export function ground(options = {}) {
+    const { id = "ground", size = 50, position = [0, 0, 0], rotation = [-Math.PI / 2, 0, 0], scale = [1, 1, 1], color = "white", texture, repeat = texture ? true : false, repeatCount = [25, 25], physicsType = "fixed", hidden = false, disabled = false, } = options;
+    return {
+        id,
+        disabled,
+        hidden,
+        components: {
+            transform: {
+                type: "Transform",
+                properties: {
+                    position,
+                    rotation,
+                    scale,
+                },
+            },
+            geometry: {
+                type: "Geometry",
+                properties: {
+                    geometryType: "plane",
+                    args: [size, size],
+                },
+            },
+            material: {
+                type: "Material",
+                properties: Object.assign(Object.assign({ color }, (texture ? { texture } : {})), (repeat ? { repeat: true, repeatCount } : {})),
+            },
+            physics: {
+                type: "Physics",
+                properties: {
+                    type: physicsType,
+                },
+            },
+        },
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+export { default as GameCanvas } from './shared/GameCanvas';
+export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
+export type { PrefabEditorRef } from './tools/prefabeditor/PrefabEditor';
+export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
+export type { PrefabRootRef } from './tools/prefabeditor/PrefabRoot';
+export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
+export type { Component } from './tools/prefabeditor/components/ComponentRegistry';
+export type { Prefab, GameObject, ComponentData } from './tools/prefabeditor/types';
+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

@@ -0,0 +1,14 @@
+// Core Components
+export { default as GameCanvas } from './shared/GameCanvas';
+// Prefab Editor
+export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
+export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
+export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
+export * as editorStyles from './tools/prefabeditor/styles';
+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

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

package/dist/shared/GameCanvas.js

@@ -0,0 +1,47 @@
+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());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Canvas, extend } from "@react-three/fiber";
+import { WebGPURenderer, MeshBasicNodeMaterial, MeshStandardNodeMaterial, SpriteNodeMaterial, PCFShadowMap } from "three/webgpu";
+import { Suspense, useState } from "react";
+import { Loader } from "@react-three/drei";
+// generic version
+// extend(THREE as any)
+extend({
+    MeshBasicNodeMaterial: MeshBasicNodeMaterial,
+    MeshStandardNodeMaterial: MeshStandardNodeMaterial,
+    SpriteNodeMaterial: SpriteNodeMaterial,
+});
+export default function GameCanvas(_a) {
+    var { loader = false, children, glConfig } = _a, props = __rest(_a, ["loader", "children", "glConfig"]);
+    const [frameloop, setFrameloop] = useState("never");
+    return _jsx(_Fragment, { children: _jsxs(Canvas, Object.assign({ style: { touchAction: 'none', userSelect: '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 }, glConfig));
+                yield renderer.init().then(() => {
+                    setFrameloop("always");
+                });
+                return renderer;
+            }), camera: {
+                position: [0, 1, 5],
+            } }, props, { children: [_jsx(Suspense, { children: children }), loader ? _jsx(Loader, {}) : null] })) });
+}

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

@@ -0,0 +1,35 @@
+interface TextureListViewerProps {
+    files: string[];
+    selected?: string;
+    onSelect: (file: string) => void;
+    basePath?: string;
+}
+export declare function TextureListViewer({ files, selected, onSelect, basePath }: TextureListViewerProps): import("react/jsx-runtime").JSX.Element;
+interface ModelListViewerProps {
+    files: string[];
+    selected?: string;
+    onSelect: (file: string) => void;
+    basePath?: string;
+}
+export declare function ModelListViewer({ files, selected, onSelect, basePath }: ModelListViewerProps): import("react/jsx-runtime").JSX.Element;
+interface SoundListViewerProps {
+    files: string[];
+    selected?: string;
+    onSelect: (file: string) => void;
+    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

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Canvas, useLoader } from "@react-three/fiber";
+import { OrbitControls, View, PerspectiveCamera } from "@react-three/drei";
+import { Suspense, useEffect, useState, useRef } from "react";
+import { TextureLoader } from "three";
+import { loadModel } from "../dragdrop/modelLoader";
+// view models and textures in manifest, onselect callback
+const styles = {
+    errorIcon: { color: '#fca5a5', fontSize: 12 }, // text-red-400 text-xs
+    flexFillRelative: { flex: 1, position: 'relative' },
+    bottomLabel: { backgroundColor: 'rgba(0,0,0,0.6)', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' },
+    iconLarge: { fontSize: 20 }
+};
+function getItemsInPath(files, currentPath) {
+    // Remove the leading category folder (e.g., /textures/, /models/, /sounds/)
+    const filesWithoutCategory = files.map(file => {
+        const parts = file.split('/').filter(Boolean);
+        return parts.length > 1 ? '/' + parts.slice(1).join('/') : '';
+    }).filter(Boolean);
+    const prefix = currentPath ? `/${currentPath}/` : '/';
+    const relevantFiles = filesWithoutCategory.filter(file => file.startsWith(prefix));
+    const folders = new Set();
+    const filesInCurrentPath = [];
+    relevantFiles.forEach((file, index) => {
+        const relativePath = file.slice(prefix.length);
+        const parts = relativePath.split('/').filter(Boolean);
+        if (parts.length > 1) {
+            folders.add(parts[0]);
+        }
+        else if (parts[0]) {
+            // Return the original file path
+            filesInCurrentPath.push(files[filesWithoutCategory.indexOf(file)]);
+        }
+    });
+    return { folders: Array.from(folders), filesInCurrentPath };
+}
+function FolderTile({ name, onClick }) {
+    return (_jsxs("div", { onClick: onClick, style: {
+            maxWidth: 60,
+            aspectRatio: '1 / 1',
+            backgroundColor: '#1f2937', /* gray-800 */
+            cursor: 'pointer',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center'
+        }, children: [_jsx("div", { style: { fontSize: 24 }, children: "\uD83D\uDCC1" }), _jsx("div", { style: { fontSize: 10, textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '100%', padding: '0 4px', marginTop: 4 }, children: name })] }));
+}
+function useInView() {
+    const [isInView, setIsInView] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        const observer = new IntersectionObserver(([entry]) => {
+            setIsInView(entry.isIntersecting);
+        }, { rootMargin: '100px' });
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => {
+            if (ref.current) {
+                observer.unobserve(ref.current);
+            }
+        };
+    }, []);
+    return { ref, isInView };
+}
+function AssetListViewer({ files, selected, onSelect, renderCard }) {
+    const [currentPath, setCurrentPath] = useState('');
+    const { folders, filesInCurrentPath } = getItemsInPath(files, currentPath);
+    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, 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, {})] }));
+}
+function TextureCard({ file, onSelect, basePath = "" }) {
+    const [error, setError] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const { ref, isInView } = useInView();
+    const fullPath = basePath ? `/${basePath}${file}` : file;
+    if (error) {
+        return (_jsx("div", { ref: ref, style: { aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onClick: () => onSelect(file), children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }));
+    }
+    return (_jsxs("div", { ref: ref, style: { maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#1f2937', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("div", { style: { flex: 1, position: 'relative' }, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 0, 2.5], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx("ambientLight", { intensity: 0.8 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(TextureSphere, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false, enablePan: false, autoRotate: isHovered, autoRotateSpeed: 2 })] })] })) : null }), _jsx("div", { style: { backgroundColor: 'rgba(0,0,0,0.6)', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' }, children: file.split('/').pop() })] }));
+}
+function TextureSphere({ url, onError }) {
+    const texture = useLoader(TextureLoader, url, undefined, (error) => {
+        console.error('Failed to load texture:', url, error);
+        onError === null || onError === void 0 ? void 0 : onError();
+    });
+    return (_jsxs("mesh", { position: [0, 0, 0], children: [_jsx("sphereGeometry", { args: [1, 32, 32] }), _jsx("meshStandardMaterial", { map: texture })] }));
+}
+export function ModelListViewer({ files, selected, onSelect, basePath = "" }) {
+    return (_jsxs(_Fragment, { children: [_jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(ModelCard, { file: file, basePath: basePath, onSelect: onSelectHandler })) }), _jsx(SharedCanvas, {})] }));
+}
+function ModelCard({ file, onSelect, basePath = "" }) {
+    const [error, setError] = useState(false);
+    const { ref, isInView } = useInView();
+    const fullPath = basePath ? `/${basePath}${file}` : file;
+    if (error) {
+        return (_jsx("div", { ref: ref, style: { aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onClick: () => onSelect(file), children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }));
+    }
+    return (_jsxs("div", { ref: ref, style: { maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#111827', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), children: [_jsx("div", { style: styles.flexFillRelative, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 1, 3], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx(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);
+    const onErrorRef = useRef(onError);
+    onErrorRef.current = onError;
+    useEffect(() => {
+        let cancelled = false;
+        setModel(null);
+        loadModel(url).then((result) => {
+            var _a;
+            if (cancelled)
+                return;
+            if (result.success && result.model) {
+                setModel(result.model);
+            }
+            else {
+                (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef);
+            }
+        });
+        return () => { cancelled = true; };
+    }, [url]);
+    if (!model)
+        return null;
+    return _jsx("primitive", { object: model });
+}
+export function SoundListViewer({ files, selected, onSelect, basePath = "" }) {
+    return (_jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(SoundCard, { file: file, basePath: basePath, onSelect: onSelectHandler })) }));
+}
+function SoundCard({ file, onSelect, basePath = "" }) {
+    const fileName = file.split('/').pop() || '';
+    const fullPath = basePath ? `/${basePath}${file}` : file;
+    return (_jsxs("div", { onClick: () => onSelect(file), style: { aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }, children: [_jsx("div", { style: styles.iconLarge, children: "\uD83D\uDD0A" }), _jsx("div", { style: { fontSize: 12, padding: '0 4px', marginTop: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center', width: '100%' }, children: fileName })] }));
+}
+// 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: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100vw',
+            height: '100vh',
+            pointerEvents: 'none',
+        }, eventSource: typeof document !== 'undefined' ? document.getElementById('root') || undefined : undefined, eventPrefix: "client", children: _jsx(View.Port, {}) }));
+}

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

@@ -0,0 +1,9 @@
+interface DragDropLoaderProps {
+    onModelLoaded: (model: any, filename: string) => void;
+}
+export declare function DragDropLoader({ onModelLoaded }: DragDropLoaderProps): null;
+interface FilePickerProps {
+    onModelLoaded: (model: any, filename: string) => void;
+}
+export declare function FilePicker({ onModelLoaded }: FilePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/tools/dragdrop/DragDropLoader.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// DragDropLoader.tsx
+import { useEffect } from "react";
+import { DRACOLoader, FBXLoader, GLTFLoader } from "three/examples/jsm/Addons.js";
+// Shared file handling logic
+function handleFiles(files, onModelLoaded) {
+    files.forEach((file) => {
+        if (file.name.endsWith(".glb") || file.name.endsWith(".gltf")) {
+            loadGLTFFile(file, onModelLoaded);
+        }
+        else if (file.name.endsWith(".fbx")) {
+            loadFBXFile(file, onModelLoaded);
+        }
+    });
+}
+function loadGLTFFile(file, onModelLoaded) {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+        var _a;
+        const arrayBuffer = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
+        if (arrayBuffer) {
+            const loader = new GLTFLoader();
+            const dracoLoader = new DRACOLoader();
+            dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
+            loader.setDRACOLoader(dracoLoader);
+            loader.parse(arrayBuffer, "", (gltf) => {
+                onModelLoaded(gltf.scene, file.name);
+            }, (error) => {
+                console.error("GLTFLoader parse error", error);
+            });
+        }
+    };
+    reader.readAsArrayBuffer(file);
+}
+function loadFBXFile(file, onModelLoaded) {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+        var _a;
+        const arrayBuffer = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
+        if (arrayBuffer) {
+            const loader = new FBXLoader();
+            const model = loader.parse(arrayBuffer, "");
+            onModelLoaded(model, file.name);
+        }
+    };
+    reader.readAsArrayBuffer(file);
+}
+export function DragDropLoader({ onModelLoaded }) {
+    useEffect(() => {
+        function handleDrop(e) {
+            var _a;
+            e.preventDefault();
+            e.stopPropagation();
+            const files = ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) ? Array.from(e.dataTransfer.files) : [];
+            handleFiles(files, onModelLoaded);
+        }
+        function handleDragOver(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        window.addEventListener("drop", handleDrop);
+        window.addEventListener("dragover", handleDragOver);
+        return () => {
+            window.removeEventListener("drop", handleDrop);
+            window.removeEventListener("dragover", handleDragOver);
+        };
+    }, [onModelLoaded]);
+    return null;
+}
+export function FilePicker({ onModelLoaded }) {
+    function onChange(e) {
+        const files = e.target.files ? Array.from(e.target.files) : [];
+        handleFiles(files, onModelLoaded);
+    }
+    // Ref for the hidden input
+    const inputId = "file-picker-input";
+    return (_jsxs(_Fragment, { children: [_jsx("input", { id: inputId, type: "file", accept: ".glb,.gltf,.fbx", multiple: true, onChange: onChange, className: "hidden" }), _jsx("button", { className: "px-3 py-1 bg-blue-500/20 hover:bg-blue-500/30 border border-blue-400/40 hover:border-blue-400/60 text-blue-200 hover:text-blue-100 text-xs font-medium transition-all", type: "button", onClick: () => { var _a; return (_a = document.getElementById(inputId)) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Select Files" })] }));
+}

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

@@ -0,0 +1,7 @@
+export type ModelLoadResult = {
+    success: boolean;
+    model?: any;
+    error?: any;
+};
+export type ProgressCallback = (filename: string, loaded: number, total: number) => void;
+export declare function loadModel(filename: string, onProgress?: ProgressCallback): Promise<ModelLoadResult>;