react-three-game 0.0.30 → 0.0.32

package/README.md

@@ -138,15 +138,28 @@ React 19 · Three.js WebGPU · TypeScript 5 · Rapier WASM · MIT License
 
 A small helper script is included to auto-generate asset manifests from the `public` folder. See `docs/generate-manifests.sh`.
 
-- What it does: searches `public/models` for `.glb`/`.fbx`, `public/textures` for `.jpg`/`.png`, and `public/sound` for `.mp3`/`.wav`, then writes JSON arrays to `public/models/manifest.json`, `public/textures/manifest.json`, and `public/sound/manifest.json`. These manifest files are used top populate the Asset Viewer in the the Editor.
-- How to run:
+- **What it does:**
+  Searches `public/models` for `.glb`/`.fbx`, `public/textures` for `.jpg`/`.png`, and `public/sound` for `.mp3`/`.wav`, then writes JSON arrays to:
+  - `public/models/manifest.json`
+  - `public/textures/manifest.json`
+  - `public/sound/manifest.json`
+  
+  These manifest files are used to populate the Asset Viewer in the Editor.
+
+- **How to run:**
 
   1. Make it executable (once):
 
-    chmod +x docs/generate-manifests.sh
+     ```sh
+     chmod +x docs/generate-manifests.sh
+     ```
 
   2. Run the script from the repo root (zsh/bash):
 
-    ./docs/generate-manifests.sh
+     ```sh
+     ./docs/generate-manifests.sh
+     ```
+
 
-The script is intentionally simple and portable (uses `find`/`sed`). If you need different file types or output formatting, edit `docs/generate-manifests.sh`.
+The script is intentionally simple and portable (uses `find`/`sed`).
+If you need different file types or output formatting, edit `docs/generate-manifests.sh`.

package/dist/tools/assetviewer/page.js

@@ -6,6 +6,12 @@ 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 => {
@@ -30,7 +36,15 @@ function getItemsInPath(files, currentPath) {
     return { folders: Array.from(folders), filesInCurrentPath };
 }
 function FolderTile({ name, onClick }) {
-    return (_jsxs("div", { onClick: onClick, className: "aspect-square bg-gray-800 cursor-pointer hover:bg-gray-700 flex flex-col items-center justify-center", children: [_jsx("div", { className: "text-3xl", children: "\uD83D\uDCC1" }), _jsx("div", { className: "text-xs text-center truncate w-full px-1 mt-1", children: name })] }));
+    return (_jsxs("div", { onClick: onClick, style: {
+            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);
@@ -56,13 +70,13 @@ function AssetListViewer({ files, selected, onSelect, renderCard }) {
     const { folders, filesInCurrentPath } = getItemsInPath(files, currentPath);
     const showCompactView = selected && !showPicker;
     if (showCompactView) {
-        return (_jsxs("div", { className: "flex gap-1 items-center", children: [renderCard(selected, onSelect), _jsx("button", { onClick: () => setShowPicker(true), className: "px-2 py-1 bg-gray-800 hover:bg-gray-700 text-xs", children: "Change" })] }));
+        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('/'));
-                }, className: "mb-1 px-2 py-1 bg-gray-800 hover:bg-gray-700 text-xs", children: "\u2190 Back" })), _jsxs("div", { className: "grid grid-cols-3 gap-1", children: [folders.map((folder) => (_jsx(FolderTile, { name: folder, onClick: () => setCurrentPath(currentPath ? `${currentPath}/${folder}` : folder) }, folder))), filesInCurrentPath.map((file) => (_jsx("div", { children: renderCard(file, (f) => {
+                }, 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);
@@ -77,9 +91,9 @@ function TextureCard({ file, onSelect, basePath = "" }) {
     const { ref, isInView } = useInView();
     const fullPath = basePath ? `/${basePath}${file}` : file;
     if (error) {
-        return (_jsx("div", { ref: ref, className: "aspect-square bg-gray-700 cursor-pointer hover:bg-gray-600 flex items-center justify-center", onClick: () => onSelect(file), children: _jsx("div", { className: "text-red-400 text-xs", children: "\u2717" }) }));
+        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, className: "aspect-square bg-gray-800 cursor-pointer hover:bg-gray-700 flex flex-col", onClick: () => onSelect(file), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("div", { className: "flex-1 relative", children: isInView ? (_jsxs(View, { className: "w-full h-full", 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", { className: "bg-black/60 text-[10px] px-1 truncate text-center", children: file.split('/').pop() })] }));
+    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() })] }));
 }
 function TextureSphere({ url, onError }) {
     const texture = useLoader(TextureLoader, url, undefined, (error) => {
@@ -96,9 +110,9 @@ function ModelCard({ file, onSelect, basePath = "" }) {
     const { ref, isInView } = useInView();
     const fullPath = basePath ? `/${basePath}${file}` : file;
     if (error) {
-        return (_jsx("div", { ref: ref, className: "aspect-square bg-gray-700 cursor-pointer hover:bg-gray-600 flex items-center justify-center", onClick: () => onSelect(file), children: _jsx("div", { className: "text-red-400 text-xs", children: "\u2717" }) }));
+        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, className: "aspect-square bg-gray-900 cursor-pointer hover:bg-gray-800 flex flex-col", onClick: () => onSelect(file), children: [_jsx("div", { className: "flex-1 relative", children: isInView ? (_jsxs(View, { className: "w-full h-full", 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", { className: "bg-black/60 text-[10px] px-1 truncate text-center", children: file.split('/').pop() })] }));
+    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() })] }));
 }
 function ModelPreview({ url, onError }) {
     const [model, setModel] = useState(null);
@@ -130,7 +144,7 @@ export function SoundListViewer({ files, selected, onSelect, basePath = "" }) {
 function SoundCard({ file, onSelect, basePath = "" }) {
     const fileName = file.split('/').pop() || '';
     const fullPath = basePath ? `/${basePath}${file}` : file;
-    return (_jsxs("div", { onClick: () => onSelect(file), className: "aspect-square bg-gray-700 cursor-pointer hover:bg-gray-600 flex flex-col items-center justify-center", children: [_jsx("div", { className: "text-2xl", children: "\uD83D\uDD0A" }), _jsx("div", { className: "text-[10px] px-1 mt-1 truncate text-center w-full", children: fileName })] }));
+    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 })] }));
 }
 // Shared Canvas Component - can be used independently in any viewer
 export function SharedCanvas() {

package/dist/tools/prefabeditor/EditorUI.js

@@ -29,7 +29,11 @@ function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transf
         setSelectedId(null);
     };
     const selectedNode = selectedId && prefabData ? findNode(prefabData.root, selectedId) : null;
-    return _jsxs(_Fragment, { children: [_jsxs("div", { style: inspector.panel, children: [_jsxs("div", { style: base.header, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { children: "Inspector" }), _jsx("span", { children: collapsed ? '◀' : '▼' })] }), !collapsed && selectedNode && (_jsx(NodeInspector, { node: selectedNode, updateNode: updateNodeHandler, deleteNode: deleteNodeHandler, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath }))] }), _jsx("div", { style: { position: 'absolute', top: 8, left: 8, zIndex: 20 }, children: _jsx(EditorTree, { prefabData: prefabData, setPrefabData: setPrefabData, selectedId: selectedId, setSelectedId: setSelectedId }) })] });
+    return _jsxs(_Fragment, { children: [_jsx("style", { children: `.prefab-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
+.prefab-scroll::-webkit-scrollbar-track { background: transparent; }
+.prefab-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }
+.prefab-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent; }
+` }), _jsxs("div", { style: inspector.panel, children: [_jsxs("div", { style: base.header, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { children: "Inspector" }), _jsx("span", { children: collapsed ? '◀' : '▼' })] }), !collapsed && selectedNode && (_jsx(NodeInspector, { node: selectedNode, updateNode: updateNodeHandler, deleteNode: deleteNodeHandler, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath }))] }), _jsx("div", { style: { position: 'absolute', top: 8, left: 8, zIndex: 20 }, children: _jsx(EditorTree, { prefabData: prefabData, setPrefabData: setPrefabData, selectedId: selectedId, setSelectedId: setSelectedId }) })] });
 }
 function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransformMode, basePath }) {
     var _a;
@@ -42,7 +46,7 @@ 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, 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: [_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]) => {
                         if (!comp)
                             return null;
                         const def = ALL_COMPONENTS[comp.type];

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

@@ -1,6 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function GeometryComponentEditor({ component, onUpdate }) {
-    return _jsxs("div", { children: [_jsx("label", { style: { display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 2 }, children: "Type" }), _jsxs("select", { style: { width: '100%', backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }, value: component.properties.geometryType, onChange: e => onUpdate({ geometryType: e.target.value }), children: [_jsx("option", { value: "box", children: "Box" }), _jsx("option", { value: "sphere", children: "Sphere" }), _jsx("option", { value: "plane", children: "Plane" })] })] });
+const GEOMETRY_ARGS = {
+    box: {
+        labels: ["Width", "Height", "Depth"],
+        defaults: [1, 1, 1],
+    },
+    sphere: {
+        labels: ["Radius", "Width Segments", "Height Segments"],
+        defaults: [1, 32, 16],
+    },
+    plane: {
+        labels: ["Width", "Height"],
+        defaults: [1, 1],
+    },
+};
+function GeometryComponentEditor({ component, onUpdate, }) {
+    const { geometryType, args = [] } = component.properties;
+    const schema = GEOMETRY_ARGS[geometryType];
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { className: "label", children: "Type" }), _jsxs("select", { className: "select", value: geometryType, onChange: e => {
+                    const type = e.target.value;
+                    onUpdate({
+                        geometryType: type,
+                        args: GEOMETRY_ARGS[type].defaults,
+                    });
+                }, children: [_jsx("option", { value: "box", children: "Box" }), _jsx("option", { value: "sphere", children: "Sphere" }), _jsx("option", { value: "plane", children: "Plane" })] }), schema.labels.map((label, i) => {
+                var _a;
+                return (_jsxs("div", { children: [_jsx("label", { className: "label", children: label }), _jsx("input", { type: "number", className: "input", value: (_a = args[i]) !== null && _a !== void 0 ? _a : schema.defaults[i], step: "0.1", onChange: e => {
+                                const next = [...args];
+                                next[i] = parseFloat(e.target.value);
+                                onUpdate({ args: next });
+                            } })] }, label));
+            })] }));
 }
 // View for Geometry component
 function GeometryComponentView({ properties, children }) {
@@ -22,7 +51,8 @@ const GeometryComponent = {
     Editor: GeometryComponentEditor,
     View: GeometryComponentView,
     defaultProperties: {
-        geometryType: 'box'
+        geometryType: 'box',
+        args: GEOMETRY_ARGS.box.defaults,
     }
 };
 export default GeometryComponent;

package/package.json

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

package/src/tools/assetviewer/page.tsx

@@ -8,6 +8,13 @@ import { loadModel } from "../dragdrop/modelLoader";
 
 // view models and textures in manifest, onselect callback
 
+const styles: Record<string, any> = {
+    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: string[], currentPath: string) {
     // Remove the leading category folder (e.g., /textures/, /models/, /sounds/)
     const filesWithoutCategory = files.map(file => {
@@ -40,10 +47,18 @@ function FolderTile({ name, onClick }: { name: string; onClick: () => void }) {
     return (
         <div
             onClick={onClick}
-            className="aspect-square bg-gray-800 cursor-pointer hover:bg-gray-700 flex flex-col items-center justify-center"
+            style={{
+                aspectRatio: '1 / 1',
+                backgroundColor: '#1f2937', /* gray-800 */
+                cursor: 'pointer',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center'
+            }}
         >
-            <div className="text-3xl">📁</div>
-            <div className="text-xs text-center truncate w-full px-1 mt-1">{name}</div>
+            <div style={{ fontSize: 24 }}>📁</div>
+            <div style={{ fontSize: 10, textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '100%', padding: '0 4px', marginTop: 4 }}>{name}</div>
         </div>
     );
 }
@@ -90,11 +105,11 @@ function AssetListViewer({ files, selected, onSelect, renderCard }: AssetListVie
 
     if (showCompactView) {
         return (
-            <div className="flex gap-1 items-center">
+            <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
                 {renderCard(selected, onSelect)}
                 <button
                     onClick={() => setShowPicker(true)}
-                    className="px-2 py-1 bg-gray-800 hover:bg-gray-700 text-xs"
+                    style={{ padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 12, cursor: 'pointer', border: 'none' }}
                 >
                     Change
                 </button>
@@ -111,12 +126,12 @@ function AssetListViewer({ files, selected, onSelect, renderCard }: AssetListVie
                         pathParts.pop();
                         setCurrentPath(pathParts.join('/'));
                     }}
-                    className="mb-1 px-2 py-1 bg-gray-800 hover:bg-gray-700 text-xs"
+                    style={{ marginBottom: 4, padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 12, cursor: 'pointer', border: 'none' }}
                 >
                     ← Back
                 </button>
             )}
-            <div className="grid grid-cols-3 gap-1">
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }}>
                 {folders.map((folder) => (
                     <FolderTile
                         key={folder}
@@ -170,10 +185,10 @@ function TextureCard({ file, onSelect, basePath = "" }: { file: string; onSelect
         return (
             <div
                 ref={ref}
-                className="aspect-square bg-gray-700 cursor-pointer hover:bg-gray-600 flex items-center justify-center"
+                style={{ aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                 onClick={() => onSelect(file)}
             >
-                <div className="text-red-400 text-xs">✗</div>
+                <div style={styles.errorIcon}>✗</div>
             </div>
         );
     }
@@ -181,14 +196,14 @@ function TextureCard({ file, onSelect, basePath = "" }: { file: string; onSelect
     return (
         <div
             ref={ref}
-            className="aspect-square bg-gray-800 cursor-pointer hover:bg-gray-700 flex flex-col"
+            style={{ aspectRatio: '1 / 1', backgroundColor: '#1f2937', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}
             onClick={() => onSelect(file)}
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
         >
-            <div className="flex-1 relative">
+            <div style={{ flex: 1, position: 'relative' }}>
                 {isInView ? (
-                    <View className="w-full h-full">
+                    <View style={{ width: '100%', height: '100%' }}>
                         <PerspectiveCamera makeDefault position={[0, 0, 2.5]} fov={50} />
                         <Suspense fallback={null}>
                             <ambientLight intensity={0.8} />
@@ -204,7 +219,7 @@ function TextureCard({ file, onSelect, basePath = "" }: { file: string; onSelect
                     </View>
                 ) : null}
             </div>
-            <div className="bg-black/60 text-[10px] px-1 truncate text-center">
+            <div style={{ backgroundColor: 'rgba(0,0,0,0.6)', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' }}>
                 {file.split('/').pop()}
             </div>
         </div>
@@ -256,10 +271,10 @@ function ModelCard({ file, onSelect, basePath = "" }: { file: string; onSelect:
         return (
             <div
                 ref={ref}
-                className="aspect-square bg-gray-700 cursor-pointer hover:bg-gray-600 flex items-center justify-center"
+                style={{ aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                 onClick={() => onSelect(file)}
             >
-                <div className="text-red-400 text-xs">✗</div>
+                <div style={styles.errorIcon}>✗</div>
             </div>
         );
     }
@@ -267,12 +282,12 @@ function ModelCard({ file, onSelect, basePath = "" }: { file: string; onSelect:
     return (
         <div
             ref={ref}
-            className="aspect-square bg-gray-900 cursor-pointer hover:bg-gray-800 flex flex-col"
+            style={{ aspectRatio: '1 / 1', backgroundColor: '#111827', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}
             onClick={() => onSelect(file)}
         >
-            <div className="flex-1 relative">
+            <div style={styles.flexFillRelative}>
                 {isInView ? (
-                    <View className="w-full h-full">
+                    <View style={{ width: '100%', height: '100%' }}>
                         <PerspectiveCamera makeDefault position={[0, 1, 3]} fov={50} />
                         <Suspense fallback={null}>
                             <Stage intensity={0.5} environment="city">
@@ -283,7 +298,7 @@ function ModelCard({ file, onSelect, basePath = "" }: { file: string; onSelect:
                     </View>
                 ) : null}
             </div>
-            <div className="bg-black/60 text-[10px] px-1 truncate text-center">
+            <div style={{ backgroundColor: 'rgba(0,0,0,0.6)', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' }}>
                 {file.split('/').pop()}
             </div>
         </div>
@@ -341,10 +356,10 @@ function SoundCard({ file, onSelect, basePath = "" }: { file: string; onSelect:
     return (
         <div
             onClick={() => onSelect(file)}
-            className="aspect-square bg-gray-700 cursor-pointer hover:bg-gray-600 flex flex-col items-center justify-center"
+            style={{ aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}
         >
-            <div className="text-2xl">🔊</div>
-            <div className="text-[10px] px-1 mt-1 truncate text-center w-full">{fileName}</div>
+            <div style={styles.iconLarge}>🔊</div>
+            <div style={{ fontSize: 12, padding: '0 4px', marginTop: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center', width: '100%' }}>{fileName}</div>
         </div>
     );
 }

package/src/tools/prefabeditor/EditorUI.tsx

@@ -33,6 +33,11 @@ function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transf
     const selectedNode = selectedId && prefabData ? findNode(prefabData.root, selectedId) : null;
 
     return <>
+        <style>{`.prefab-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
+.prefab-scroll::-webkit-scrollbar-track { background: transparent; }
+.prefab-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }
+.prefab-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent; }
+`}</style>
         <div style={inspector.panel}>
             <div style={base.header} onClick={() => setCollapsed(!collapsed)}>
                 <span>Inspector</span>
@@ -46,6 +51,7 @@ function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transf
                     transformMode={transformMode}
                     setTransformMode={setTransformMode}
                     basePath={basePath}
+                // add class to make scrollbar gutter transparent via CSS above
                 />
             )}
         </div>
@@ -79,7 +85,7 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
         if (!newAvailable.includes(addType)) setAddType(newAvailable[0] || "");
     }, [Object.keys(node.components || {}).join(',')]);
 
-    return <div style={inspector.content}>
+    return <div style={inspector.content} className="prefab-scroll">
         {/* Node ID */}
         <div style={base.section}>
             <div style={base.label}>Node ID</div>

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

@@ -1,20 +1,75 @@
 import { Component } from "./ComponentRegistry";
 
-function GeometryComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
-    return <div>
-        <label style={{ display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 2 }}>Type</label>
-        <select
-            style={{ width: '100%', backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }}
-            value={component.properties.geometryType}
-            onChange={e => onUpdate({ geometryType: e.target.value })}
-        >
-            <option value="box">Box</option>
-            <option value="sphere">Sphere</option>
-            <option value="plane">Plane</option>
-        </select>
-    </div>;
+const GEOMETRY_ARGS: Record<string, {
+    labels: string[];
+    defaults: number[];
+}> = {
+    box: {
+        labels: ["Width", "Height", "Depth"],
+        defaults: [1, 1, 1],
+    },
+    sphere: {
+        labels: ["Radius", "Width Segments", "Height Segments"],
+        defaults: [1, 32, 16],
+    },
+    plane: {
+        labels: ["Width", "Height"],
+        defaults: [1, 1],
+    },
+};
+
+function GeometryComponentEditor({
+    component,
+    onUpdate,
+}: {
+    component: any;
+    onUpdate: (newProps: any) => void;
+}) {
+    const { geometryType, args = [] } = component.properties;
+    const schema = GEOMETRY_ARGS[geometryType];
+
+    return (
+        <div className="flex flex-col gap-1">
+            {/* Geometry Type */}
+            <label className="label">Type</label>
+            <select
+                className="select"
+                value={geometryType}
+                onChange={e => {
+                    const type = e.target.value;
+                    onUpdate({
+                        geometryType: type,
+                        args: GEOMETRY_ARGS[type].defaults,
+                    });
+                }}
+            >
+                <option value="box">Box</option>
+                <option value="sphere">Sphere</option>
+                <option value="plane">Plane</option>
+            </select>
+
+            {/* Args */}
+            {schema.labels.map((label, i) => (
+                <div key={label}>
+                    <label className="label">{label}</label>
+                    <input
+                        type="number"
+                        className="input"
+                        value={args[i] ?? schema.defaults[i]}
+                        step="0.1"
+                        onChange={e => {
+                            const next = [...args];
+                            next[i] = parseFloat(e.target.value);
+                            onUpdate({ args: next });
+                        }}
+                    />
+                </div>
+            ))}
+        </div>
+    );
 }
 
+
 // View for Geometry component
 function GeometryComponentView({ properties, children }: { properties: any, children?: React.ReactNode }) {
     const { geometryType, args = [] } = properties;
@@ -36,7 +91,8 @@ const GeometryComponent: Component = {
     Editor: GeometryComponentEditor,
     View: GeometryComponentView,
     defaultProperties: {
-        geometryType: 'box'
+        geometryType: 'box',
+        args: GEOMETRY_ARGS.box.defaults,
     }
 };