react-three-game 0.0.39 → 0.0.40

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/prefabeditor/components/MaterialComponent.js

@@ -1,5 +1,5 @@
 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';
@@ -7,6 +7,7 @@ import { DoubleSide, RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace, Neares
 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`)
@@ -24,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] });

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, 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, node, 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 }, 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" })] })] });
+    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.39",
+  "version": "0.0.40",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",

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/components/MaterialComponent.tsx

@@ -1,4 +1,4 @@
-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';
@@ -21,6 +21,7 @@ import {
 
 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}/` : '';
@@ -72,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 && (

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

@@ -1,4 +1,4 @@
-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';
@@ -6,6 +6,7 @@ import { GameObject } from '../types';
 
 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}/` : '';
@@ -23,15 +24,29 @@ function ModelComponentEditor({ component, node, onUpdate, basePath = "" }: { co
 
     return <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
         <div>
-            <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}
-                    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,