react-three-game 0.0.56 → 0.0.57

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

@@ -1,20 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
-import { FieldRenderer } from "./Input";
+import { BooleanField, ColorField, FieldGroup, NumberField } from "./Input";
 import { useHelper } from "@react-three/drei";
 import { SpotLightHelper } from "three";
-const spotLightFields = [
-    { name: 'color', type: 'color', label: 'Color' },
-    { name: 'intensity', type: 'number', label: 'Intensity', step: 0.1, min: 0 },
-    { name: 'angle', type: 'number', label: 'Angle', step: 0.1, min: 0, max: Math.PI },
-    { name: 'penumbra', type: 'number', label: 'Penumbra', step: 0.1, min: 0, max: 1 },
-    { name: 'distance', type: 'number', label: 'Distance', step: 1, min: 0 },
-    { name: 'castShadow', type: 'boolean', label: 'Cast Shadow' },
-];
 function SpotLightComponentEditor({ component, onUpdate }) {
-    return (_jsx(FieldRenderer, { fields: spotLightFields, values: component.properties, onChange: onUpdate }));
+    return (_jsxs(FieldGroup, { children: [_jsx(ColorField, { name: "color", label: "Color", values: component.properties, onChange: onUpdate }), _jsx(NumberField, { name: "intensity", label: "Intensity", values: component.properties, onChange: onUpdate, min: 0, step: 0.1, fallback: 1 }), _jsx(NumberField, { name: "angle", label: "Angle", values: component.properties, onChange: onUpdate, min: 0, max: Math.PI, step: 0.05, fallback: Math.PI / 6 }), _jsx(NumberField, { name: "penumbra", label: "Penumbra", values: component.properties, onChange: onUpdate, min: 0, max: 1, step: 0.05, fallback: 0.5 }), _jsx(NumberField, { name: "distance", label: "Distance", values: component.properties, onChange: onUpdate, min: 0, step: 1, fallback: 100 }), _jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: component.properties, onChange: onUpdate, fallback: true })] }));
 }
-function SpotLightView({ properties, editMode }) {
+function SpotLightView({ properties, editMode, isSelected }) {
     var _a, _b, _c, _d, _e, _f;
     const color = (_a = properties.color) !== null && _a !== void 0 ? _a : '#ffffff';
     const intensity = (_b = properties.intensity) !== null && _b !== void 0 ? _b : 1.0;
@@ -24,7 +16,7 @@ function SpotLightView({ properties, editMode }) {
     const castShadow = (_f = properties.castShadow) !== null && _f !== void 0 ? _f : true;
     const spotLightRef = useRef(null);
     const targetRef = useRef(null);
-    useHelper(editMode ? spotLightRef : null, SpotLightHelper, color);
+    useHelper(editMode && isSelected ? spotLightRef : null, SpotLightHelper, color);
     useEffect(() => {
         if (spotLightRef.current && targetRef.current) {
             spotLightRef.current.target = targetRef.current;

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

@@ -1,61 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FieldRenderer } from "./Input";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColorField, FieldGroup, NumberField, SelectField, StringField } from "./Input";
 import { Text } from 'three-text/three/react';
 import { useRef, useState, useCallback } from 'react';
 // Initialize HarfBuzz path for font shaping
 Text.setHarfBuzzPath('/fonts/hb.wasm');
 function TextComponentEditor({ component, onUpdate, }) {
-    const fields = [
-        {
-            name: 'text',
-            type: 'string',
-            label: 'Text',
-            placeholder: 'Enter text...',
-        },
-        {
-            name: 'color',
-            type: 'color',
-            label: 'Color',
-        },
-        {
-            name: 'font',
-            type: 'string',
-            label: 'Font',
-            placeholder: '/fonts/NotoSans-Regular.ttf',
-        },
-        {
-            name: 'size',
-            type: 'number',
-            label: 'Size',
-            min: 0.01,
-            step: 0.1,
-        },
-        {
-            name: 'depth',
-            type: 'number',
-            label: 'Depth',
-            min: 0,
-            step: 0.1,
-        },
-        {
-            name: 'width',
-            type: 'number',
-            label: 'Width',
-            min: 0,
-            step: 0.5,
-        },
-        {
-            name: 'align',
-            type: 'select',
-            label: 'Align',
-            options: [
-                { value: 'left', label: 'Left' },
-                { value: 'center', label: 'Center' },
-                { value: 'right', label: 'Right' },
-            ],
-        },
-    ];
-    return (_jsx(FieldRenderer, { fields: fields, values: component.properties, onChange: onUpdate }));
+    return (_jsxs(FieldGroup, { children: [_jsx(StringField, { name: "text", label: "Text", values: component.properties, onChange: onUpdate, placeholder: "Enter text..." }), _jsx(ColorField, { name: "color", label: "Color", values: component.properties, onChange: onUpdate }), _jsx(StringField, { name: "font", label: "Font", values: component.properties, onChange: onUpdate, placeholder: "/fonts/NotoSans-Regular.ttf" }), _jsx(NumberField, { name: "size", label: "Size", values: component.properties, onChange: onUpdate, min: 0.01, step: 0.1 }), _jsx(NumberField, { name: "depth", label: "Depth", values: component.properties, onChange: onUpdate, min: 0, step: 0.1 }), _jsx(NumberField, { name: "width", label: "Width", values: component.properties, onChange: onUpdate, min: 0, step: 0.5 }), _jsx(SelectField, { name: "align", label: "Align", values: component.properties, onChange: onUpdate, options: [
+                    { value: 'left', label: 'Left' },
+                    { value: 'center', label: 'Center' },
+                    { value: 'right', label: 'Right' },
+                ] })] }));
 }
 function TextComponentView({ properties }) {
     const { text = '', font, size, depth, width, align, color } = properties;

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

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { FieldRenderer, Label } from "./Input";
+import { Label, Vector3Field, Vector3Input } from "./Input";
 import { useEditorContext } from "../EditorContext";
 import { colors } from "../styles";
 const buttonStyle = {
@@ -31,14 +31,24 @@ function TransformModeSelector({ transformMode, setTransformMode, snapResolution
                             e.currentTarget.style.background = colors.bgSurface;
                     }, children: ["Snap: ", snapResolution > 0 ? `ON (${snapResolution})` : 'OFF'] }) })] }));
 }
+const snapLockBtnStyle = {
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    padding: '0 2px',
+    fontSize: 12,
+    lineHeight: 1,
+    color: colors.textMuted,
+};
+function SnapLockButton({ locked, onToggle, title }) {
+    return (_jsx("button", { style: snapLockBtnStyle, onClick: onToggle, title: title, children: locked ? '🔒' : '🔓' }));
+}
 function TransformComponentEditor({ component, onUpdate }) {
-    const { transformMode, setTransformMode, snapResolution, setSnapResolution } = useEditorContext();
-    const fields = [
-        { name: 'position', type: 'vector3', label: 'Position', snap: snapResolution },
-        { name: 'rotation', type: 'vector3', label: 'Rotation', snap: snapResolution },
-        { name: 'scale', type: 'vector3', label: 'Scale', snap: snapResolution },
-    ];
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(TransformModeSelector, { transformMode: transformMode, setTransformMode: setTransformMode, snapResolution: snapResolution, setSnapResolution: setSnapResolution }), _jsx(FieldRenderer, { fields: fields, values: component.properties, onChange: onUpdate })] }));
+    var _a, _b;
+    const { transformMode, setTransformMode, snapResolution, setSnapResolution, positionSnap, setPositionSnap, rotationSnap, setRotationSnap } = useEditorContext();
+    const positionSnapped = positionSnap > 0;
+    const rotationSnapped = rotationSnap > 0;
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(TransformModeSelector, { transformMode: transformMode, setTransformMode: setTransformMode, snapResolution: snapResolution, setSnapResolution: setSnapResolution }), _jsx(Vector3Input, { label: "Position", value: (_a = component.properties.position) !== null && _a !== void 0 ? _a : [0, 0, 0], onChange: v => onUpdate({ position: v }), snap: positionSnap, labelExtra: _jsx(SnapLockButton, { locked: positionSnapped, onToggle: () => setPositionSnap(positionSnapped ? 0 : 0.5), title: positionSnapped ? `Snap ON (0.5) — click to disable` : `Snap OFF — click to enable (0.5)` }) }), _jsx(Vector3Input, { label: "Rotation", value: (_b = component.properties.rotation) !== null && _b !== void 0 ? _b : [0, 0, 0], onChange: v => onUpdate({ rotation: v }), snap: rotationSnap, labelExtra: _jsx(SnapLockButton, { locked: rotationSnapped, onToggle: () => setRotationSnap(rotationSnapped ? 0 : Math.PI / 4), title: rotationSnapped ? `Snap ON (π/4) — click to disable` : `Snap OFF — click to enable (π/4)` }) }), _jsx(Vector3Field, { name: "scale", label: "Scale", values: component.properties, onChange: onUpdate, fallback: [1, 1, 1] })] }));
 }
 const TransformComponent = {
     name: 'Transform',

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

@@ -7,6 +7,8 @@ import DirectionalLightComponent from './DirectionalLightComponent';
 import AmbientLightComponent from './AmbientLightComponent';
 import ModelComponent from './ModelComponent';
 import TextComponent from './TextComponent';
+import EnvironmentComponent from './EnvironmentComponent';
+import CameraComponent from './CameraComponent';
 export default [
     GeometryComponent,
     TransformComponent,
@@ -16,5 +18,7 @@ export default [
     DirectionalLightComponent,
     AmbientLightComponent,
     ModelComponent,
-    TextComponent
+    TextComponent,
+    EnvironmentComponent,
+    CameraComponent,
 ];

package/dist/tools/prefabeditor/styles.d.ts

@@ -896,6 +896,8 @@ export declare const inspector: {
         padding: number;
         maxHeight: string;
         overflowY: "auto";
+        overflowX: "hidden";
+        boxSizing: "border-box";
         display: string;
         flexDirection: "column";
         gap: number;
@@ -1772,7 +1774,9 @@ export declare const menu: {
     container: {
         position: "fixed";
         zIndex: number;
-        minWidth: number;
+        minWidth: string;
+        width: string;
+        maxWidth: string;
         background: string;
         border: string;
         borderRadius: number;
@@ -1789,7 +1793,6 @@ export declare const toolbar: {
         position: "absolute";
         top: number;
         left: string;
-        transform: string;
         display: string;
         gap: number;
         padding: string;

package/dist/tools/prefabeditor/styles.js

@@ -97,6 +97,8 @@ export const inspector = {
         padding: 8,
         maxHeight: '80vh',
         overflowY: 'auto',
+        overflowX: 'hidden',
+        boxSizing: 'border-box',
         display: 'flex',
         flexDirection: 'column',
         gap: 8,
@@ -130,7 +132,9 @@ export const menu = {
     container: {
         position: 'fixed',
         zIndex: 50,
-        minWidth: 140,
+        minWidth: 'auto',
+        width: 'max-content',
+        maxWidth: 'min(240px, calc(100vw - 16px))',
         background: colors.bgSurface,
         border: `1px solid ${colors.border}`,
         borderRadius: 4,
@@ -145,6 +149,7 @@ export const menu = {
         border: 'none',
         color: colors.text,
         fontSize: fonts.size,
+        whiteSpace: 'nowrap',
         cursor: 'pointer',
         outline: 'none',
     },
@@ -156,8 +161,7 @@ export const toolbar = {
     panel: {
         position: 'absolute',
         top: 8,
-        left: '50%',
-        transform: 'translateX(-50%)',
+        left: '240px',
         display: 'flex',
         gap: 6,
         padding: '4px 6px',

package/dist/tools/prefabeditor/utils.d.ts

@@ -1,13 +1,13 @@
 import { GameObject, Prefab } from "./types";
-import { Object3D } from 'three';
+import { Object3D, Vector3 } from 'three';
 export interface ExportGLBOptions {
     filename?: string;
     binary?: boolean;
     onComplete?: (result: ArrayBuffer | object) => void;
     onError?: (error: any) => void;
 }
-/** Save a prefab as JSON file */
-export declare function saveJson(data: Prefab, filename: string): void;
+/** Save a prefab as JSON file, showing a Save As dialog when supported */
+export declare function saveJson(data: Prefab, filename: string): Promise<void>;
 /** Load a prefab from JSON file */
 export declare function loadJson(): Promise<Prefab | undefined>;
 /**
@@ -23,6 +23,7 @@ export declare function exportGLB(sceneRoot: Object3D, options?: ExportGLBOption
  * @returns Promise that resolves with the GLB data as ArrayBuffer
  */
 export declare function exportGLBData(sceneRoot: Object3D): Promise<ArrayBuffer>;
+export declare function focusCameraOnObject(object: Object3D, camera: Object3D, target: Vector3, update?: () => void): void;
 /** Find a node by ID in the tree */
 export declare function findNode(root: GameObject, id: string): GameObject | null;
 /** Find the parent of a node by ID */

package/dist/tools/prefabeditor/utils.js

@@ -8,12 +8,33 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
-/** Save a prefab as JSON file */
+import { Box3, PerspectiveCamera, Quaternion, Vector3 } from 'three';
+/** Save a prefab as JSON file, showing a Save As dialog when supported */
 export function saveJson(data, filename) {
-    const a = document.createElement('a');
-    a.href = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));
-    a.download = `${filename || 'prefab'}.json`;
-    a.click();
+    return __awaiter(this, void 0, void 0, function* () {
+        const json = JSON.stringify(data, null, 2);
+        if ('showSaveFilePicker' in window) {
+            try {
+                const handle = yield window.showSaveFilePicker({
+                    suggestedName: `${filename || 'prefab'}.json`,
+                    types: [{ description: 'JSON', accept: { 'application/json': ['.json'] } }],
+                });
+                const writable = yield handle.createWritable();
+                yield writable.write(json);
+                yield writable.close();
+                return;
+            }
+            catch (e) {
+                if ((e === null || e === void 0 ? void 0 : e.name) === 'AbortError')
+                    return; // user cancelled
+            }
+        }
+        // Fallback for browsers without File System Access API
+        const a = document.createElement('a');
+        a.href = "data:text/json;charset=utf-8," + encodeURIComponent(json);
+        a.download = `${filename || 'prefab'}.json`;
+        a.click();
+    });
 }
 /** Load a prefab from JSON file */
 export function loadJson() {
@@ -85,6 +106,33 @@ export function exportGLBData(sceneRoot) {
         return result;
     });
 }
+export function focusCameraOnObject(object, camera, target, update) {
+    const bounds = new Box3().setFromObject(object);
+    const center = new Vector3();
+    const size = new Vector3();
+    const quaternion = new Quaternion();
+    object.getWorldQuaternion(quaternion);
+    if (bounds.isEmpty()) {
+        object.getWorldPosition(center);
+        size.setScalar(1);
+    }
+    else {
+        bounds.getCenter(center);
+        bounds.getSize(size);
+    }
+    const radius = Math.max(size.length() * 0.5, 1);
+    const forward = new Vector3(0, 0, 1).applyQuaternion(quaternion).normalize();
+    const worldUp = new Vector3(0, 1, 0);
+    const elevatedDirection = forward.clone().addScaledVector(worldUp, 0.65).normalize();
+    const distance = camera instanceof PerspectiveCamera
+        ? Math.max(radius / Math.tan((camera.fov * Math.PI) / 360) * 1.8, radius * 3.5)
+        : radius * 4.5;
+    const nextPosition = center.clone().add(elevatedDirection.multiplyScalar(distance));
+    camera.position.copy(nextPosition);
+    camera.lookAt(center);
+    target.copy(center);
+    update === null || update === void 0 ? void 0 : update();
+}
 /** Find a node by ID in the tree */
 export function findNode(root, id) {
     var _a;

package/package.json

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

package/src/index.ts

@@ -15,13 +15,20 @@ export { registerComponent } from './tools/prefabeditor/components/ComponentRegi
 // Prefab Editor - Input Components
 export {
   FieldRenderer,
+  FieldGroup,
   Input,
   Label,
   Vector3Input,
+  Vector3Field,
+  NumberField,
   ColorInput,
+  ColorField,
   StringInput,
+  StringField,
   BooleanInput,
+  BooleanField,
   SelectInput,
+  SelectField,
 } from './tools/prefabeditor/components/Input';
 
 // Prefab Editor - Styles & Utils

package/src/shared/GameCanvas.tsx

@@ -40,9 +40,6 @@ export default function GameCanvas({ loader = false, children, glConfig, ...prop
                 });
                 return renderer
             }}
-            camera={{
-                position: [0, 1, 5],
-            }}
             {...props}
         >
             <Suspense>

package/src/tools/assetviewer/page.tsx

@@ -1,15 +1,26 @@
-import { Canvas, useLoader } from "@react-three/fiber";
+import { Canvas } from "@react-three/fiber";
 import { OrbitControls, Stage, View, PerspectiveCamera } from "@react-three/drei";
-import { Suspense, useEffect, useState, useRef } from "react";
+import { Component as ReactComponent, Suspense, useEffect, useState, useRef } from "react";
 import { TextureLoader } from "three";
 import { loadModel } from "../dragdrop/modelLoader";
 
+class ErrorBoundary extends ReactComponent<{ onError?: () => void; children: React.ReactNode }, { hasError: boolean }> {
+    constructor(props: any) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() { return { hasError: true }; }
+    componentDidCatch() { this.props.onError?.(); }
+    render() { return this.state.hasError ? null : this.props.children; }
+}
+
 // 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' },
+    bottomLabel: { backgroundColor: 'rgba(0,0,0,0.6)', color: '#f9fafb', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' },
+    textLight: { color: '#f9fafb' },
     iconLarge: { fontSize: 20 }
 };
 
@@ -49,6 +60,7 @@ function FolderTile({ name, onClick }: { name: string; onClick: () => void }) {
                 maxWidth: 60,
                 aspectRatio: '1 / 1',
                 backgroundColor: '#1f2937', /* gray-800 */
+                color: '#f9fafb',
                 cursor: 'pointer',
                 display: 'flex',
                 flexDirection: 'column',
@@ -100,7 +112,7 @@ function AssetListViewer({ files, selected, onSelect, renderCard }: AssetListVie
     const { folders, filesInCurrentPath } = getItemsInPath(files, currentPath);
 
     return (
-        <div>
+        <div style={styles.textLight}>
             {currentPath && (
                 <button
                     onClick={() => {
@@ -140,17 +152,19 @@ interface TextureListViewerProps {
 
 export function TextureListViewer({ files, selected, onSelect, basePath = "" }: TextureListViewerProps) {
     return (
-        <>
-            <AssetListViewer
-                files={files}
-                selected={selected}
-                onSelect={onSelect}
-                renderCard={(file, onSelectHandler) => (
-                    <TextureCard file={file} basePath={basePath} onSelect={onSelectHandler} />
-                )}
-            />
+        <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+            <div style={{ width: '100%', height: '100%', overflowY: 'auto', overflowX: 'hidden', paddingRight: 4 }}>
+                <AssetListViewer
+                    files={files}
+                    selected={selected}
+                    onSelect={onSelect}
+                    renderCard={(file, onSelectHandler) => (
+                        <TextureCard file={file} basePath={basePath} onSelect={onSelectHandler} />
+                    )}
+                />
+            </div>
             <SharedCanvas />
-        </>
+        </div>
     );
 }
 
@@ -175,7 +189,7 @@ function TextureCard({ file, onSelect, basePath = "" }: { file: string; onSelect
     return (
         <div
             ref={ref}
-            style={{ maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#1f2937', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}
+            style={{ maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#1f2937', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}
             onClick={() => onSelect(file)}
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
@@ -184,21 +198,19 @@ function TextureCard({ file, onSelect, basePath = "" }: { file: string; onSelect
                 {isInView ? (
                     <View style={{ width: '100%', height: '100%' }}>
                         <PerspectiveCamera makeDefault position={[0, 0, 2.5]} fov={50} />
-                        <Suspense fallback={null}>
-                            <ambientLight intensity={0.8} />
-                            <pointLight position={[5, 5, 5]} intensity={0.5} />
-                            <TextureSphere url={fullPath} onError={() => setError(true)} />
-                            <OrbitControls
-                                enableZoom={false}
-                                enablePan={false}
-                                autoRotate={isHovered}
-                                autoRotateSpeed={2}
-                            />
-                        </Suspense>
+                        <ambientLight intensity={0.8} />
+                        <pointLight position={[5, 5, 5]} intensity={0.5} />
+                        <TextureSphere url={fullPath} onError={() => setError(true)} />
+                        <OrbitControls
+                            enableZoom={false}
+                            enablePan={false}
+                            autoRotate={isHovered}
+                            autoRotateSpeed={2}
+                        />
                     </View>
                 ) : null}
             </div>
-            <div style={{ backgroundColor: 'rgba(0,0,0,0.6)', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' }}>
+            <div style={styles.bottomLabel}>
                 {file.split('/').pop()}
             </div>
         </div>
@@ -206,10 +218,23 @@ function TextureCard({ file, onSelect, basePath = "" }: { file: string; onSelect
 }
 
 function TextureSphere({ url, onError }: { url: string; onError?: () => void }) {
-    const texture = useLoader(TextureLoader, url, undefined, (error) => {
-        console.error('Failed to load texture:', url, error);
-        onError?.();
-    });
+    const [texture, setTexture] = useState<any>(null);
+
+    useEffect(() => {
+        setTexture(null);
+        const loader = new TextureLoader();
+        loader.load(
+            url,
+            (tex) => setTexture(tex),
+            undefined,
+            (err) => {
+                console.warn('Failed to load texture:', url, err);
+                onError?.();
+            }
+        );
+    }, [url]);
+
+    if (!texture) return null;
     return (
         <mesh position={[0, 0, 0]}>
             <sphereGeometry args={[1, 32, 32]} />
@@ -227,17 +252,19 @@ interface ModelListViewerProps {
 
 export function ModelListViewer({ files, selected, onSelect, basePath = "" }: ModelListViewerProps) {
     return (
-        <>
-            <AssetListViewer
-                files={files}
-                selected={selected}
-                onSelect={onSelect}
-                renderCard={(file, onSelectHandler) => (
-                    <ModelCard file={file} basePath={basePath} onSelect={onSelectHandler} />
-                )}
-            />
+        <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+            <div style={{ width: '100%', height: '100%', overflowY: 'auto', overflowX: 'hidden', paddingRight: 4 }}>
+                <AssetListViewer
+                    files={files}
+                    selected={selected}
+                    onSelect={onSelect}
+                    renderCard={(file, onSelectHandler) => (
+                        <ModelCard file={file} basePath={basePath} onSelect={onSelectHandler} />
+                    )}
+                />
+            </div>
             <SharedCanvas />
-        </>
+        </div>
     );
 }
 
@@ -261,7 +288,7 @@ function ModelCard({ file, onSelect, basePath = "" }: { file: string; onSelect:
     return (
         <div
             ref={ref}
-            style={{ maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#111827', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}
+            style={{ maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#111827', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}
             onClick={() => onSelect(file)}
         >
             <div style={styles.flexFillRelative}>
@@ -277,7 +304,7 @@ function ModelCard({ file, onSelect, basePath = "" }: { file: string; onSelect:
                     </View>
                 ) : null}
             </div>
-            <div style={{ backgroundColor: 'rgba(0,0,0,0.6)', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' }}>
+            <div style={styles.bottomLabel}>
                 {file.split('/').pop()}
             </div>
         </div>
@@ -335,10 +362,10 @@ function SoundCard({ file, onSelect, basePath = "" }: { file: string; onSelect:
     return (
         <div
             onClick={() => onSelect(file)}
-            style={{ aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}
+            style={{ aspectRatio: '1 / 1', backgroundColor: '#374151', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}
         >
             <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 style={{ color: '#f9fafb', fontSize: 12, padding: '0 4px', marginTop: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center', width: '100%' }}>{fileName}</div>
         </div>
     );
 }
@@ -375,7 +402,11 @@ export function SharedCanvas() {
         <Canvas
             shadows
             dpr={[1, 1.5]}
+            gl={{ alpha: true }}
             camera={{ position: [0, 0, 3], fov: 45, near: 0.1, far: 1000 }}
+            onCreated={({ gl }) => {
+                gl.setClearAlpha(0);
+            }}
             style={{
                 position: 'fixed',
                 top: 0,
@@ -383,6 +414,7 @@ export function SharedCanvas() {
                 width: '100vw',
                 height: '100vh',
                 pointerEvents: 'none',
+                background: 'transparent',
             }}
             eventSource={typeof document !== 'undefined' ? document.getElementById('root') || undefined : undefined}
             eventPrefix="client"