react-three-game 0.0.54 → 0.0.56

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

@@ -1,32 +1,34 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { FieldRenderer, Label } from "./Input";
 import { useEditorContext } from "../EditorContext";
+import { colors } from "../styles";
 const buttonStyle = {
-    padding: '2px 6px',
-    background: 'transparent',
-    color: 'rgba(255,255,255,0.9)',
-    border: '1px solid rgba(255,255,255,0.14)',
-    borderRadius: 4,
+    padding: '4px 8px',
+    background: colors.bgSurface,
+    color: colors.text,
+    border: `1px solid ${colors.border}`,
+    borderRadius: 3,
     cursor: 'pointer',
     font: 'inherit',
+    fontSize: 11,
     flex: 1,
 };
 function TransformModeSelector({ transformMode, setTransformMode, snapResolution, setSnapResolution }) {
     return (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsxs(Label, { children: ["Transform Mode ", snapResolution > 0 && `(Snap: ${snapResolution})`] }), _jsx("div", { style: { display: 'flex', gap: 6 }, children: ["translate", "rotate", "scale"].map(mode => {
                     const isActive = transformMode === mode;
-                    return (_jsx("button", { onClick: () => setTransformMode(mode), style: Object.assign(Object.assign({}, buttonStyle), { background: isActive ? 'rgba(255,255,255,0.10)' : 'transparent' }), onPointerEnter: (e) => {
+                    return (_jsx("button", { onClick: () => setTransformMode(mode), style: Object.assign(Object.assign({}, buttonStyle), { background: isActive ? colors.accentBg : colors.bgSurface, borderColor: isActive ? colors.accentBorder : colors.border, color: isActive ? colors.accent : colors.text }), onPointerEnter: (e) => {
                             if (!isActive)
-                                e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+                                e.currentTarget.style.background = colors.bgHover;
                         }, onPointerLeave: (e) => {
                             if (!isActive)
-                                e.currentTarget.style.background = 'transparent';
+                                e.currentTarget.style.background = colors.bgSurface;
                         }, children: mode }, mode));
-                }) }), _jsx("div", { style: { marginTop: 6 }, children: _jsxs("button", { onClick: () => setSnapResolution(snapResolution > 0 ? 0 : 0.1), style: Object.assign(Object.assign({}, buttonStyle), { background: snapResolution > 0 ? 'rgba(255,255,255,0.10)' : 'transparent', width: '100%' }), onPointerEnter: (e) => {
+                }) }), _jsx("div", { style: { marginTop: 6 }, children: _jsxs("button", { onClick: () => setSnapResolution(snapResolution > 0 ? 0 : 0.1), style: Object.assign(Object.assign({}, buttonStyle), { background: snapResolution > 0 ? colors.accentBg : colors.bgSurface, borderColor: snapResolution > 0 ? colors.accentBorder : colors.border, color: snapResolution > 0 ? colors.accent : colors.text, width: '100%' }), onPointerEnter: (e) => {
                         if (snapResolution === 0)
-                            e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+                            e.currentTarget.style.background = colors.bgHover;
                     }, onPointerLeave: (e) => {
                         if (snapResolution === 0)
-                            e.currentTarget.style.background = 'transparent';
+                            e.currentTarget.style.background = colors.bgSurface;
                     }, children: ["Snap: ", snapResolution > 0 ? `ON (${snapResolution})` : 'OFF'] }) })] }));
 }
 function TransformComponentEditor({ component, onUpdate }) {

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

@@ -1,12 +1,18 @@
 export declare const colors: {
     bg: string;
+    bgSurface: string;
     bgLight: string;
     bgHover: string;
+    bgInput: string;
     border: string;
     borderLight: string;
     borderFaint: string;
     text: string;
     textMuted: string;
+    textDim: string;
+    accent: string;
+    accentBg: string;
+    accentBorder: string;
     danger: string;
     dangerBg: string;
     dangerBorder: string;
@@ -1759,6 +1765,7 @@ export declare const tree: {
     row: React.CSSProperties;
     selected: {
         background: string;
+        borderBottomColor: string;
     };
 };
 export declare const menu: {
@@ -1771,7 +1778,6 @@ export declare const menu: {
         borderRadius: number;
         overflow: string;
         boxShadow: string;
-        backdropFilter: string;
     };
     item: React.CSSProperties;
     danger: {
@@ -1793,7 +1799,7 @@ export declare const toolbar: {
         color: string;
         fontFamily: string;
         fontSize: number;
-        backdropFilter: string;
+        boxShadow: string;
     };
     divider: {
         width: number;
@@ -1804,3 +1810,7 @@ export declare const toolbar: {
         cursor: string;
     };
 };
+export declare const scrollbarCSS: string;
+export declare const componentCard: {
+    container: React.CSSProperties;
+};

package/dist/tools/prefabeditor/styles.js

@@ -1,19 +1,25 @@
 // Shared editor styles - single source of truth for all prefab editor UI
 export const colors = {
-    bg: 'rgba(0,0,0,0.6)',
-    bgLight: 'rgba(255,255,255,0.06)',
-    bgHover: 'rgba(255,255,255,0.1)',
-    border: 'rgba(255,255,255,0.15)',
-    borderLight: 'rgba(255,255,255,0.1)',
-    borderFaint: 'rgba(255,255,255,0.05)',
-    text: '#fff',
-    textMuted: 'rgba(255,255,255,0.7)',
-    danger: '#ffaaaa',
-    dangerBg: 'rgba(255,80,80,0.2)',
-    dangerBorder: 'rgba(255,80,80,0.4)',
+    bg: '#1e1e1e',
+    bgSurface: '#252526',
+    bgLight: '#2d2d2d',
+    bgHover: '#2a2d2e',
+    bgInput: '#1a1a1a',
+    border: '#3c3c3c',
+    borderLight: '#333333',
+    borderFaint: '#2a2a2a',
+    text: '#cccccc',
+    textMuted: '#999999',
+    textDim: '#666666',
+    accent: '#4c9eff',
+    accentBg: 'rgba(76, 158, 255, 0.12)',
+    accentBorder: 'rgba(76, 158, 255, 0.4)',
+    danger: '#f44747',
+    dangerBg: 'rgba(244, 71, 71, 0.12)',
+    dangerBorder: 'rgba(244, 71, 71, 0.35)',
 };
 export const fonts = {
-    family: 'system-ui, sans-serif',
+    family: 'system-ui, -apple-system, sans-serif',
     size: 11,
     sizeSm: 10,
 };
@@ -24,12 +30,12 @@ export const base = {
         color: colors.text,
         border: `1px solid ${colors.border}`,
         borderRadius: 4,
-        backdropFilter: 'blur(8px)',
         fontFamily: fonts.family,
         fontSize: fonts.size,
+        boxShadow: '0 2px 8px rgba(0,0,0,0.4)',
     },
     header: {
-        padding: '6px 8px',
+        padding: '7px 10px',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
@@ -37,22 +43,23 @@ export const base = {
         background: colors.bgLight,
         borderBottom: `1px solid ${colors.borderLight}`,
         fontSize: fonts.size,
-        fontWeight: 500,
+        fontWeight: 600,
         textTransform: 'uppercase',
-        letterSpacing: 0.5,
+        letterSpacing: 0.8,
+        color: colors.text,
     },
     input: {
         width: '100%',
-        background: colors.bgHover,
+        background: colors.bgInput,
         border: `1px solid ${colors.border}`,
         borderRadius: 3,
-        padding: '4px 6px',
+        padding: '5px 8px',
         color: colors.text,
         fontSize: fonts.size,
         outline: 'none',
     },
     btn: {
-        background: colors.bgHover,
+        background: colors.bgLight,
         border: `1px solid ${colors.border}`,
         borderRadius: 3,
         padding: '4px 8px',
@@ -68,10 +75,11 @@ export const base = {
     },
     label: {
         fontSize: fonts.sizeSm,
-        opacity: 0.7,
+        color: colors.textMuted,
         marginBottom: 4,
         textTransform: 'uppercase',
         letterSpacing: 0.5,
+        fontWeight: 500,
     },
     row: {
         display: 'flex',
@@ -100,36 +108,39 @@ export const tree = {
         overflowY: 'auto',
         padding: 4,
         scrollbarWidth: 'thin',
-        scrollbarColor: 'rgba(255,255,255,0.06) transparent',
+        scrollbarColor: `${colors.bgLight} transparent`,
     },
     row: {
         display: 'flex',
         alignItems: 'center',
         padding: '3px 6px',
-        borderBottom: `1px solid ${colors.borderFaint}`,
+        borderBottomWidth: 1,
+        borderBottomStyle: 'solid',
+        borderBottomColor: colors.borderFaint,
         cursor: 'pointer',
         whiteSpace: 'nowrap',
+        borderRadius: 2,
     },
     selected: {
-        background: 'rgba(255,255,255,0.12)',
+        background: colors.accentBg,
+        borderBottomColor: colors.accentBorder,
     },
 };
 export const menu = {
     container: {
         position: 'fixed',
         zIndex: 50,
-        minWidth: 120,
-        background: 'rgba(0,0,0,0.85)',
+        minWidth: 140,
+        background: colors.bgSurface,
         border: `1px solid ${colors.border}`,
         borderRadius: 4,
         overflow: 'hidden',
-        boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
-        backdropFilter: 'blur(8px)',
+        boxShadow: '0 4px 16px rgba(0,0,0,0.6)',
     },
     item: {
         width: '100%',
         textAlign: 'left',
-        padding: '6px 8px',
+        padding: '7px 12px',
         background: 'transparent',
         border: 'none',
         color: colors.text,
@@ -156,14 +167,36 @@ export const toolbar = {
         color: colors.text,
         fontFamily: fonts.family,
         fontSize: fonts.size,
-        backdropFilter: 'blur(8px)',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.4)',
     },
     divider: {
         width: 1,
-        background: 'rgba(255,255,255,0.2)',
+        background: colors.borderLight,
     },
     disabled: {
         opacity: 0.4,
         cursor: 'not-allowed',
     },
 };
+// Shared scrollbar CSS (inject via <style> tag since CSS can't be bundled)
+export const scrollbarCSS = `
+.prefab-scroll::-webkit-scrollbar,
+.tree-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
+.prefab-scroll::-webkit-scrollbar-track,
+.tree-scroll::-webkit-scrollbar-track { background: transparent; }
+.prefab-scroll::-webkit-scrollbar-thumb,
+.tree-scroll::-webkit-scrollbar-thumb { background: ${colors.border}; border-radius: 3px; }
+.prefab-scroll::-webkit-scrollbar-thumb:hover,
+.tree-scroll::-webkit-scrollbar-thumb:hover { background: #555; }
+.prefab-scroll { scrollbar-width: thin; scrollbar-color: ${colors.border} transparent; }
+`;
+// Reusable component card style for inspector sections
+export const componentCard = {
+    container: {
+        marginBottom: 8,
+        backgroundColor: colors.bgSurface,
+        padding: 8,
+        borderRadius: 4,
+        border: `1px solid ${colors.border}`,
+    },
+};

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

@@ -44,3 +44,7 @@ export declare function regenerateIds(node: GameObject): GameObject;
 /** Get component data from a node */
 export declare function getComponent<T = any>(node: GameObject, type: string): T | undefined;
 export declare function updateNodeById(root: GameObject, id: string, updater: (node: GameObject) => GameObject): GameObject;
+/** Create a GameObject node for a 3D model file */
+export declare function createModelNode(filename: string, name?: string): GameObject;
+/** Create a GameObject node for an image as a textured plane */
+export declare function createImageNode(texturePath: string, name?: string): GameObject;

package/dist/tools/prefabeditor/utils.js

@@ -149,7 +149,7 @@ export function deleteNode(root, id) {
 /** Deep clone a node with new IDs */
 export function cloneNode(node) {
     var _a, _b;
-    return Object.assign(Object.assign({}, node), { id: crypto.randomUUID(), name: `${(_a = node.name) !== null && _a !== void 0 ? _a : "Node"} Copy`, children: (_b = node.children) === null || _b === void 0 ? void 0 : _b.map(cloneNode) });
+    return Object.assign(Object.assign({}, node), { id: crypto.randomUUID(), name: `${(_a = node.name) !== null && _a !== void 0 ? _a : node.id} Copy`, children: (_b = node.children) === null || _b === void 0 ? void 0 : _b.map(cloneNode) });
 }
 /** Recursively update all IDs in a node tree */
 export function regenerateIds(node) {
@@ -180,3 +180,41 @@ export function updateNodeById(root, id, updater) {
         return root;
     return Object.assign(Object.assign({}, root), { children: newChildren });
 }
+/** Create a GameObject node for a 3D model file */
+export function createModelNode(filename, name) {
+    return {
+        id: crypto.randomUUID(),
+        name: name !== null && name !== void 0 ? name : filename.replace(/^.*[\/]/, '').replace(/\.[^.]+$/, ''),
+        components: {
+            transform: {
+                type: 'Transform',
+                properties: { position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1] }
+            },
+            model: {
+                type: 'Model',
+                properties: { filename, instanced: false }
+            }
+        }
+    };
+}
+/** Create a GameObject node for an image as a textured plane */
+export function createImageNode(texturePath, name) {
+    return {
+        id: crypto.randomUUID(),
+        name: name !== null && name !== void 0 ? name : texturePath.replace(/^.*[\/]/, '').replace(/\.[^.]+$/, ''),
+        components: {
+            transform: {
+                type: 'Transform',
+                properties: { position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1] }
+            },
+            geometry: {
+                type: 'Geometry',
+                properties: { geometryType: 'plane', args: [1, 1] }
+            },
+            material: {
+                type: 'Material',
+                properties: { color: '#ffffff', texture: texturePath }
+            }
+        }
+    };
+}

package/package.json

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

package/react-three-game-skill/react-three-game/rules/LIGHTING.md

@@ -0,0 +1,6 @@
+For large scenes, bake the shadows.
+
+// trigger a shadow update when needed
+envMesh.castShadow = true;
+directionalLight.current.shadow.autoUpdate = false;
+directionalLight.current.shadow.needsUpdate = true;

package/src/shared/ContactShadow.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useMemo } from "react";
+import * as THREE from "three/webgpu";
+import {
+    float,
+    uv,
+    vec3,
+    smoothstep,
+    uniform,
+    length,
+} from "three/tsl";
+
+interface ContactShadowProps {
+    opacity?: number;
+    blur?: number;
+    scale?: number;
+    yOffset?: number;
+}
+
+const ContactShadow = ({
+    opacity = 0.4,
+    blur = 2.5,
+    scale = 1.2,
+    yOffset = 0.05,
+}: ContactShadowProps) => {
+    const material = useMemo(() => {
+        const mat = new THREE.MeshBasicNodeMaterial();
+        mat.transparent = true;
+        mat.depthWrite = false;
+        mat.depthTest = true;
+        mat.side = THREE.DoubleSide;
+        mat.polygonOffset = true;
+        mat.polygonOffsetFactor = -1;
+        mat.polygonOffsetUnits = -1;
+
+        const uOpacity = uniform(opacity);
+        const uBlur = uniform(blur);
+
+        // UVs centered around origin
+        const centeredUV = uv().sub(0.5).mul(2.0);
+
+        // IMPORTANT: use functional length(), not .length()
+        const dist = length(centeredUV);
+
+        const innerRadius = float(0.0);
+        const outerRadius = float(1.0);
+        const blurAmount = uBlur.div(10.0);
+
+        const alpha = smoothstep(
+            outerRadius,
+            innerRadius.add(blurAmount),
+            dist
+        ).mul(uOpacity);
+
+        mat.colorNode = vec3(0.0, 0.0, 0.0);
+        mat.opacityNode = alpha;
+
+        return mat;
+    }, [opacity, blur]);
+
+    return (
+        <mesh
+            rotation={[-Math.PI / 2, 0, 0]}
+            position={[0, yOffset, 0]}
+            material={material}
+            renderOrder={1}
+        >
+            <planeGeometry args={[scale, scale]} />
+        </mesh>
+    );
+};
+
+export default ContactShadow;

package/src/tools/assetviewer/page.tsx

@@ -377,7 +377,7 @@ export function SharedCanvas() {
             dpr={[1, 1.5]}
             camera={{ position: [0, 0, 3], fov: 45, near: 0.1, far: 1000 }}
             style={{
-                position: 'absolute',
+                position: 'fixed',
                 top: 0,
                 left: 0,
                 width: '100vw',

package/src/tools/dragdrop/DragDropLoader.tsx

@@ -1,54 +1,22 @@
 // DragDropLoader.tsx
 import { useEffect, ChangeEvent } from "react";
-import { DRACOLoader, FBXLoader, GLTFLoader } from "three/examples/jsm/Addons.js";
+import { parseModelFromFile } from "./modelLoader";
 
 interface DragDropLoaderProps {
     onModelLoaded: (model: any, filename: string) => void;
 }
 
-// Shared file handling logic
 function handleFiles(files: File[], onModelLoaded: (model: any, filename: string) => void) {
-    files.forEach((file) => {
-        if (file.name.endsWith(".glb") || file.name.endsWith(".gltf")) {
-            loadGLTFFile(file, onModelLoaded);
-        } else if (file.name.endsWith(".fbx")) {
-            loadFBXFile(file, onModelLoaded);
+    files.forEach(async (file) => {
+        const result = await parseModelFromFile(file);
+        if (result.success && result.model) {
+            onModelLoaded(result.model, file.name);
+        } else {
+            console.error("Model parse error:", result.error);
         }
     });
 }
 
-function loadGLTFFile(file: File, onModelLoaded: (model: any, filename: string) => void) {
-    const reader = new FileReader();
-    reader.onload = (event) => {
-        const arrayBuffer = event.target?.result;
-        if (arrayBuffer) {
-            const loader = new GLTFLoader();
-            const dracoLoader = new DRACOLoader();
-            dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
-            loader.setDRACOLoader(dracoLoader);
-            loader.parse(arrayBuffer as ArrayBuffer, "", (gltf) => {
-                onModelLoaded(gltf.scene, file.name);
-            }, (error) => {
-                console.error("GLTFLoader parse error", error);
-            });
-        }
-    };
-    reader.readAsArrayBuffer(file);
-}
-
-function loadFBXFile(file: File, onModelLoaded: (model: any, filename: string) => void) {
-    const reader = new FileReader();
-    reader.onload = (event) => {
-        const arrayBuffer = event.target?.result;
-        if (arrayBuffer) {
-            const loader = new FBXLoader();
-            const model = loader.parse(arrayBuffer as ArrayBuffer, "");
-            onModelLoaded(model, file.name);
-        }
-    };
-    reader.readAsArrayBuffer(file);
-}
-
 export function DragDropLoader({ onModelLoaded }: DragDropLoaderProps) {
     useEffect(() => {
         function handleDrop(e: DragEvent) {

package/src/tools/dragdrop/modelLoader.ts

@@ -17,6 +17,42 @@ gltfLoader.setDRACOLoader(dracoLoader);
 
 const fbxLoader = new FBXLoader();
 
+/**
+ * Parse a model from a File object (e.g. from drag-drop or file picker).
+ * Returns the parsed Three.js Object3D scene.
+ */
+export function parseModelFromFile(file: File): Promise<ModelLoadResult> {
+    return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            const arrayBuffer = event.target?.result as ArrayBuffer;
+            if (!arrayBuffer) {
+                resolve({ success: false, error: new Error('Failed to read file') });
+                return;
+            }
+            const name = file.name.toLowerCase();
+            if (name.endsWith('.glb') || name.endsWith('.gltf')) {
+                gltfLoader.parse(arrayBuffer, '', (gltf) => {
+                    resolve({ success: true, model: gltf.scene });
+                }, (error) => {
+                    resolve({ success: false, error });
+                });
+            } else if (name.endsWith('.fbx')) {
+                try {
+                    const model = fbxLoader.parse(arrayBuffer, '');
+                    resolve({ success: true, model });
+                } catch (error) {
+                    resolve({ success: false, error });
+                }
+            } else {
+                resolve({ success: false, error: new Error(`Unsupported file format: ${file.name}`) });
+            }
+        };
+        reader.onerror = () => resolve({ success: false, error: reader.error });
+        reader.readAsArrayBuffer(file);
+    });
+}
+
 export async function loadModel(
     filename: string,
     onProgress?: ProgressCallback

package/src/tools/prefabeditor/EditorTree.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction, useState, MouseEvent } from 'react';
 import { Prefab, GameObject } from "./types";
 import { getComponent } from './components/ComponentRegistry';
-import { base, tree, menu } from './styles';
+import { base, colors, tree, menu } from './styles';
 import { findNode, findParent, deleteNode, cloneNode, updateNodeById, loadJson, saveJson, regenerateIds } from './utils';
 import { useEditorContext } from './EditorContext';
 
@@ -223,11 +223,6 @@ export default function EditorTree({
 
     return (
         <>
-            <style>{`
-.tree-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
-.tree-scroll::-webkit-scrollbar-track { background: transparent; }
-.tree-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }
-            `}</style>
             <div style={{ ...tree.panel, width: collapsed ? 'auto' : 224 }} onClick={() => { setContextMenu(null); setFileMenuOpen(false); }}>
                 <div style={base.header}>
                     <div style={{ display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }} onClick={() => setCollapsed(!collapsed)}>
@@ -273,7 +268,7 @@ export default function EditorTree({
                 </div>
                 {!collapsed && (
                     <>
-                        <div style={{ padding: '4px 4px', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
+                        <div style={{ padding: '4px 4px', borderBottom: `1px solid ${colors.borderLight}` }}>
                             <input
                                 type="text"
                                 placeholder="Search nodes..."
@@ -281,14 +276,8 @@ export default function EditorTree({
                                 onChange={(e) => setSearchQuery(e.target.value)}
                                 onClick={(e) => e.stopPropagation()}
                                 style={{
-                                    width: '100%',
+                                    ...base.input,
                                     padding: '4px 8px',
-                                    background: 'rgba(255,255,255,0.05)',
-                                    border: '1px solid rgba(255,255,255,0.1)',
-                                    borderRadius: 3,
-                                    color: 'inherit',
-                                    fontSize: 11,
-                                    outline: 'none',
                                 }}
                             />
                         </div>
@@ -361,7 +350,7 @@ function FileMenu({
 
     return (
         <div
-            style={{ ...menu.container, top: 28, right: 0 }}
+            style={{ ...menu.container, position: 'absolute', top: 28, right: 0 }}
             onClick={(e) => e.stopPropagation()}
         >
             <button

package/src/tools/prefabeditor/EditorUI.tsx

@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction, useState, useEffect } from 'react';
 import { Prefab, GameObject as GameObjectType } from "./types";
 import EditorTree from './EditorTree';
 import { getAllComponents } from './components/ComponentRegistry';
-import { base, inspector } from './styles';
+import { base, colors, inspector, scrollbarCSS, componentCard } from './styles';
 import { findNode, updateNode, deleteNode } from './utils';
 
 function EditorUI({
@@ -45,12 +45,7 @@ function EditorUI({
     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>
+        <style>{scrollbarCSS}</style>
         <div style={inspector.panel}>
             <div style={base.header} onClick={() => setCollapsed(!collapsed)}>
                 <span>Inspector</span>
@@ -106,7 +101,7 @@ function NodeInspector({
         {/* Node Name */}
         <div style={base.section}>
             <div style={{ display: "flex", marginBottom: 8, alignItems: 'center', gap: 8 }}>
-                <div style={{ fontSize: 10, color: '#888', wordBreak: 'break-all', border: '1px solid rgba(255,255,255,0.1)', padding: '2px 4px', borderRadius: 4, flex: 1 }}>
+                <div style={{ fontSize: 10, color: colors.textDim, wordBreak: 'break-all', border: `1px solid ${colors.border}`, padding: '2px 6px', borderRadius: 3, flex: 1, fontFamily: 'monospace' }}>
                     {node.id}
                 </div>
                 <button style={{ ...base.btn, ...base.btnDanger }} title="Delete Node" onClick={deleteNode}>❌</button>
@@ -131,12 +126,12 @@ function NodeInspector({
             {node.components && Object.entries(node.components).map(([key, comp]: [string, any]) => {
                 if (!comp) return null;
                 const def = ALL_COMPONENTS[comp.type];
-                if (!def) return <div key={key} style={{ color: '#ff8888', fontSize: 11 }}>
+                if (!def) return <div key={key} style={{ color: colors.danger, fontSize: 11 }}>
                     Unknown: {comp.type}
                 </div>;
 
                 return (
-                    <div key={key} style={{ marginBottom: 8, backgroundColor: 'rgba(255, 255, 255, 0.1)', padding: 8, borderRadius: 4 }}>
+                    <div key={key} style={componentCard.container}>
                         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                             <div style={{ fontSize: 11, fontWeight: 500 }}>{key}</div>
                             <button