react-three-game 0.0.100 → 0.0.102

package/dist/tools/assetviewer/page.js

@@ -3,43 +3,69 @@ import { Canvas } from "@react-three/fiber";
 import { OrbitControls, View, PerspectiveCamera } from "@react-three/drei";
 import { Suspense, useEffect, useLayoutEffect, useState, useRef } from "react";
 import { createPortal } from 'react-dom';
-import { TextureLoader } from "three";
+import { Mesh, TextureLoader } from "three";
 import { loadModel } from "../dragdrop/modelLoader";
+import { resolvePrefabAssetPath } from "../prefabeditor/PrefabEditor";
+import { base, colors, fonts } from "../prefabeditor/styles";
 const styles = {
-    errorIcon: { color: '#fca5a5', fontSize: 12 }, // text-red-400 text-xs
+    errorIcon: { color: colors.danger, fontSize: 12 },
     flexFillRelative: { flex: 1, position: 'relative' },
-    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' },
+    bottomLabel: { backgroundColor: colors.bgLight, color: colors.text, fontSize: fonts.sizeSm, padding: '1px 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center', borderTop: `1px solid ${colors.borderFaint}` },
+    textLight: { color: colors.text, fontFamily: fonts.family, fontSize: fonts.size },
     iconLarge: { fontSize: 20 }
 };
 const assetViewerColors = {
-    panelBg: '#111827',
-    controlBg: '#1f2937',
-    text: '#f9fafb',
-    border: 'rgba(255,255,255,0.12)',
-    accentBorder: 'rgba(34, 211, 238, 0.3)',
+    panelBg: colors.bg,
+    controlBg: colors.bgSurface,
+    previewBg: colors.bgLight,
+    text: colors.text,
+    border: colors.border,
+    borderFaint: colors.borderFaint,
+    accentBorder: colors.accentBorder,
+    errorBg: colors.dangerBg,
 };
 const assetPickerPopupBaseStyle = {
     background: assetViewerColors.panelBg,
     border: `1px solid ${assetViewerColors.border}`,
     borderRadius: 0,
-    boxShadow: '0 4px 16px rgba(0,0,0,0.6)',
-};
-const assetPickerButtonBaseStyle = {
-    backgroundColor: assetViewerColors.controlBg,
-    color: 'inherit',
-    fontSize: 10,
-    cursor: 'pointer',
-    border: `1px solid ${assetViewerColors.border}`,
-    borderRadius: 0,
+    boxShadow: 'none',
+    color: colors.text,
+    fontFamily: fonts.family,
+    fontSize: fonts.size,
 };
+const assetPickerButtonBaseStyle = Object.assign(Object.assign({}, base.btn), { background: assetViewerColors.controlBg, color: colors.text, fontSize: fonts.size, cursor: 'pointer' });
 const assetPickerWideButtonStyle = Object.assign(Object.assign({}, assetPickerButtonBaseStyle), { width: '100%', padding: '6px 8px' });
+function disposeMaterial(material) {
+    if (Array.isArray(material)) {
+        material.forEach(entry => entry.dispose());
+        return;
+    }
+    material.dispose();
+}
+function disposeObject3D(object) {
+    object.traverse(child => {
+        var _a;
+        if (!(child instanceof Mesh))
+            return;
+        (_a = child.geometry) === null || _a === void 0 ? void 0 : _a.dispose();
+        disposeMaterial(child.material);
+    });
+}
 const assetPickerSmallButtonStyle = Object.assign(Object.assign({}, assetPickerButtonBaseStyle), { padding: '4px 8px' });
 const assetPickerEmptyPreviewStyle = {
-    backgroundColor: assetViewerColors.controlBg,
+    backgroundColor: assetViewerColors.previewBg,
     border: `1px dashed ${assetViewerColors.border}`,
     borderRadius: 0,
 };
+const assetTileStyle = {
+    backgroundColor: assetViewerColors.previewBg,
+    color: assetViewerColors.text,
+    border: `1px solid ${assetViewerColors.borderFaint}`,
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'column',
+    boxSizing: 'border-box',
+};
 function getItemsInPath(files, currentPath) {
     // Remove the leading category folder (e.g., /textures/, /models/, /sounds/)
     const filesWithoutCategory = files.map(file => {
@@ -64,17 +90,7 @@ function getItemsInPath(files, currentPath) {
     return { folders: Array.from(folders), filesInCurrentPath };
 }
 function FolderTile({ name, onClick }) {
-    return (_jsxs("div", { onClick: onClick, style: {
-            maxWidth: 60,
-            aspectRatio: '1 / 1',
-            backgroundColor: assetViewerColors.controlBg,
-            color: assetViewerColors.text,
-            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 })] }));
+    return (_jsxs("div", { onClick: onClick, style: Object.assign(Object.assign({ maxWidth: 60, aspectRatio: '1 / 1' }, assetTileStyle), { 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);
@@ -101,30 +117,53 @@ function AssetListViewer({ files, selected, onSelect, renderCard }) {
                     const pathParts = currentPath.split('/').filter(Boolean);
                     pathParts.pop();
                     setCurrentPath(pathParts.join('/'));
-                }, style: Object.assign(Object.assign({}, assetPickerSmallButtonStyle), { marginBottom: 4, fontSize: 12, 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)))] })] }));
+                }, style: Object.assign(Object.assign({}, assetPickerSmallButtonStyle), { marginBottom: 4 }), 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("div", { style: { position: 'relative', width: '100%', height: '100%' }, children: [_jsx("div", { style: { width: '100%', height: '100%', overflowY: 'auto', overflowX: 'hidden', paddingRight: 4 }, children: _jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(TextureCard, { file: file, basePath: basePath, onSelect: onSelectHandler })) }) }), _jsx(SharedCanvas, {})] }));
 }
 function TextureCard({ file, onSelect, basePath = "" }) {
-    const [error, setError] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
+    const [error, setError] = useState(false);
     const { ref, isInView } = useInView();
-    const fullPath = basePath ? `/${basePath}${file}` : file;
+    const fullPath = resolvePrefabAssetPath(basePath, file);
+    const fileName = file.split('/').pop();
     if (error) {
-        return (_jsx("div", { ref: ref, style: { aspectRatio: '1 / 1', backgroundColor: '#c30000', 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: Object.assign(Object.assign({ maxWidth: 60, aspectRatio: '1 / 1' }, assetTileStyle), { backgroundColor: assetViewerColors.errorBg }), onClick: () => onSelect(file), title: `Could not load ${file}`, children: [_jsx("div", { style: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }), _jsx("div", { style: styles.bottomLabel, children: fileName })] }));
     }
-    return (_jsxs("div", { ref: ref, style: { maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#aeaeae', color: '#f9fafb', 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 }), _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: styles.bottomLabel, children: file.split('/').pop() })] }));
+    return (_jsxs("div", { ref: ref, style: Object.assign({ maxWidth: 60, aspectRatio: '1 / 1' }, assetTileStyle), 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 }), _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: styles.bottomLabel, children: fileName })] }));
 }
 function TextureSphere({ url, onError }) {
     const [texture, setTexture] = useState(null);
+    const textureRef = useRef(null);
+    const onErrorRef = useRef(onError);
+    onErrorRef.current = onError;
     useEffect(() => {
+        var _a;
+        let cancelled = false;
+        (_a = textureRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
+        textureRef.current = null;
         setTexture(null);
         const loader = new TextureLoader();
-        loader.load(url, (tex) => setTexture(tex), undefined, (err) => {
-            console.warn('Failed to load texture:', url, err);
-            onError === null || onError === void 0 ? void 0 : onError();
+        loader.load(url, loadedTexture => {
+            if (cancelled) {
+                loadedTexture.dispose();
+                return;
+            }
+            textureRef.current = loadedTexture;
+            setTexture(loadedTexture);
+        }, undefined, () => {
+            var _a;
+            if (!cancelled) {
+                (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef);
+            }
         });
+        return () => {
+            var _a;
+            cancelled = true;
+            (_a = textureRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
+            textureRef.current = null;
+        };
     }, [url]);
     if (!texture)
         return null;
@@ -136,31 +175,41 @@ export function ModelListViewer({ files, selected, onSelect, basePath = "" }) {
 function ModelCard({ file, onSelect, basePath = "", size = 60, }) {
     const [error, setError] = useState(false);
     const { ref, isInView } = useInView();
-    const fullPath = basePath ? `/${basePath}${file}` : file;
+    const fullPath = resolvePrefabAssetPath(basePath, file);
     if (error) {
-        return (_jsx("div", { ref: ref, style: { aspectRatio: '1 / 1', backgroundColor: '#c30000', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onClick: () => onSelect(file), children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }));
+        return (_jsx("div", { ref: ref, style: { aspectRatio: '1 / 1', backgroundColor: assetViewerColors.errorBg, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', border: `1px solid ${colors.dangerBorder}` }, onClick: () => onSelect(file), children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }));
     }
-    return (_jsxs("div", { ref: ref, style: { width: size, aspectRatio: '1 / 1', backgroundColor: '#aeaeae', color: '#f9fafb', 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("ambientLight", { intensity: 1 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(ModelPreview, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false })] })] })) : null }), _jsx("div", { style: styles.bottomLabel, children: file.split('/').pop() })] }));
+    return (_jsxs("div", { ref: ref, style: Object.assign({ width: size, aspectRatio: '1 / 1' }, assetTileStyle), 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("ambientLight", { intensity: 1 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(ModelPreview, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false })] })] })) : null }), _jsx("div", { style: styles.bottomLabel, children: file.split('/').pop() })] }));
 }
 function ModelPreview({ url, onError }) {
     const [model, setModel] = useState(null);
+    const modelRef = useRef(null);
     const onErrorRef = useRef(onError);
     onErrorRef.current = onError;
     useEffect(() => {
         let cancelled = false;
+        modelRef.current && disposeObject3D(modelRef.current);
+        modelRef.current = null;
         setModel(null);
         loadModel(url).then((result) => {
             var _a;
-            if (cancelled)
+            if (cancelled) {
+                result.model && disposeObject3D(result.model);
                 return;
+            }
             if (result.success && result.model) {
+                modelRef.current = result.model;
                 setModel(result.model);
             }
             else {
                 (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef);
             }
         });
-        return () => { cancelled = true; };
+        return () => {
+            cancelled = true;
+            modelRef.current && disposeObject3D(modelRef.current);
+            modelRef.current = null;
+        };
     }, [url]);
     if (!model)
         return null;
@@ -171,8 +220,8 @@ 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), style: { aspectRatio: '1 / 1', backgroundColor: '#374151', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }, children: [_jsx("div", { style: styles.iconLarge, children: "\uD83D\uDD0A" }), _jsx("div", { style: { color: '#f9fafb', fontSize: 12, padding: '0 4px', marginTop: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center', width: '100%' }, children: fileName })] }));
+    const fullPath = resolvePrefabAssetPath(basePath, file);
+    return (_jsxs("div", { onClick: () => onSelect(file), style: Object.assign(Object.assign({ aspectRatio: '1 / 1' }, assetTileStyle), { alignItems: 'center', justifyContent: 'center' }), children: [_jsx("div", { style: styles.iconLarge, children: "\uD83D\uDD0A" }), _jsx("div", { style: { color: colors.text, fontSize: fonts.size, padding: '0 4px', marginTop: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center', width: '100%' }, children: fileName })] }));
 }
 const PICKER_POPUP_WIDTH = 260;
 const PICKER_POPUP_HEIGHT = 360;
@@ -225,7 +274,7 @@ export function TexturePicker({ value, onChange, basePath = "" }) {
     return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "textures", rootStyle: { maxHeight: 128, overflow: 'visible', position: 'relative', display: 'flex', alignItems: 'center' }, changeButtonStyle: Object.assign(Object.assign({}, assetPickerSmallButtonStyle), { marginTop: 4 }), clearButtonStyle: Object.assign(Object.assign({}, assetPickerSmallButtonStyle), { marginTop: 4, marginLeft: 4 }), preview: _jsx(SingleTextureViewer, { file: value, basePath: basePath }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(TextureListViewer, { files: files, selected: selectedValue || undefined, onSelect: onSelect, basePath: currentBasePath })) }));
 }
 export function ModelPicker({ value, onChange, basePath = "", pickerKey }) {
-    return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "models", rootStyle: { maxHeight: 160, overflow: 'visible', position: 'relative', display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'center' }, controlsStyle: { display: 'flex', flexDirection: 'column', gap: 6, flex: '0 0 84px', minWidth: 84, justifyContent: 'flex-end' }, changeButtonStyle: Object.assign(Object.assign({}, assetPickerWideButtonStyle), { border: `1px solid ${assetViewerColors.accentBorder}` }), clearButtonStyle: Object.assign(Object.assign({}, assetPickerWideButtonStyle), { border: `1px solid ${assetViewerColors.accentBorder}` }), popupStyle: { background: 'rgba(0,0,0,0.9)', border: `1px solid ${assetViewerColors.accentBorder}` }, preview: _jsx("div", { style: { flex: '0 0 auto' }, children: _jsx(SingleModelViewer, { file: value ? `/${value}` : undefined, basePath: basePath }) }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(ModelListViewer, { files: files, selected: selectedValue ? `/${selectedValue}` : undefined, onSelect: (file) => onSelect(file.startsWith('/') ? file.slice(1) : file), basePath: currentBasePath }, pickerKey)) }));
+    return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "models", rootStyle: { maxHeight: 160, overflow: 'visible', position: 'relative', display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'center' }, controlsStyle: { display: 'flex', flexDirection: 'column', gap: 6, flex: '0 0 84px', minWidth: 84, justifyContent: 'flex-end' }, changeButtonStyle: Object.assign(Object.assign({}, assetPickerWideButtonStyle), { border: `1px solid ${assetViewerColors.accentBorder}` }), clearButtonStyle: Object.assign(Object.assign({}, assetPickerWideButtonStyle), { border: `1px solid ${assetViewerColors.accentBorder}` }), popupStyle: { border: `1px solid ${assetViewerColors.accentBorder}` }, preview: _jsx("div", { style: { flex: '0 0 auto' }, children: _jsx(SingleModelViewer, { file: value, basePath: basePath }) }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(ModelListViewer, { files: files, selected: selectedValue ? `/${selectedValue}` : undefined, onSelect: (file) => onSelect(file.startsWith('/') ? file.slice(1) : file), basePath: currentBasePath }, pickerKey)) }));
 }
 export function SoundPicker({ value, onChange, basePath = "" }) {
     return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "sound", rootStyle: { maxHeight: 76, overflow: 'visible', position: 'relative', display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'center' }, controlsStyle: { display: 'flex', flexDirection: 'column', gap: 6, flex: '0 0 84px', minWidth: 84, justifyContent: 'flex-end' }, changeButtonStyle: assetPickerWideButtonStyle, clearButtonStyle: assetPickerWideButtonStyle, preview: _jsx("div", { style: { flex: '0 0 auto', minWidth: 84 }, children: value ? _jsx(SingleSoundViewer, { file: value, basePath: basePath }) : _jsx("div", { style: Object.assign({ width: 84, height: 60 }, assetPickerEmptyPreviewStyle) }) }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(SoundListViewer, { files: files, selected: selectedValue || undefined, onSelect: onSelect, basePath: currentBasePath })) }));

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

@@ -17,6 +17,9 @@ export interface FilePickerProps extends AssetLoadOptions, DivProps {
     children?: ReactNode;
     multiple?: boolean;
 }
+export declare function loadDroppedAssets(dataTransfer: DataTransfer | null, options: AssetLoadOptions): Promise<void>;
+export declare function loadUrls(urls: string[], options: AssetLoadOptions): Promise<void>;
+export declare function loadUrl(url: string, options: AssetLoadOptions): Promise<void>;
 export declare function loadFiles(files: File[], { onModelLoaded, onTextureLoaded, onSoundLoaded, onUnhandledFile, onFilesLoaded, onLoadError }: AssetLoadOptions): Promise<void>;
 export declare function DragDropLoader({ children, ...divProps }: DragDropLoaderProps): import("react/jsx-runtime").JSX.Element;
 export declare function FilePicker({ accept, children, multiple, ...divProps }: FilePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/tools/dragdrop/DragDropLoader.js

@@ -25,56 +25,196 @@ const DEFAULT_ACCEPT = ".glb,.gltf,.fbx,.png,.jpg,.jpeg,.webp,.gif,.bmp,.svg,.mp
 function getFiles(fileList) {
     return fileList ? Array.from(fileList) : [];
 }
-export function loadFiles(files_1, _a) {
-    return __awaiter(this, arguments, void 0, function* (files, { onModelLoaded, onTextureLoaded, onSoundLoaded, onUnhandledFile, onFilesLoaded, onLoadError }) {
-        yield Promise.all(files.map((file) => __awaiter(this, void 0, void 0, function* () {
-            const shouldParseModel = canParseModelFile(file);
-            const shouldParseTexture = canParseTextureFile(file);
-            const shouldParseSound = canParseSoundFile(file);
-            if (shouldParseModel) {
-                const result = yield parseModelFromFile(file);
-                if (result.success && result.model) {
-                    yield (onModelLoaded === null || onModelLoaded === void 0 ? void 0 : onModelLoaded(result.model, file.name, file));
-                    return;
+function getStringFromItem(item) {
+    return new Promise(resolve => item.getAsString(value => resolve(value !== null && value !== void 0 ? value : "")));
+}
+function parseUriList(value) {
+    return value
+        .split(/\r?\n/)
+        .map(line => line.trim())
+        .filter(line => line && !line.startsWith("#"));
+}
+function parseDroppedUrls(value) {
+    const urls = new Set();
+    const addUrl = (candidate) => {
+        try {
+            const url = new URL(candidate.trim());
+            if (url.protocol === "http:" || url.protocol === "https:") {
+                urls.add(url.href);
+            }
+        }
+        catch (_a) {
+            // Ignore non-URL dropped text.
+        }
+    };
+    parseUriList(value).forEach(addUrl);
+    if (typeof DOMParser !== "undefined" && value.includes("<")) {
+        const document = new DOMParser().parseFromString(value, "text/html");
+        document.querySelectorAll("[href], [src]").forEach(element => {
+            var _a;
+            const rawUrl = (_a = element.getAttribute("href")) !== null && _a !== void 0 ? _a : element.getAttribute("src");
+            if (rawUrl)
+                addUrl(rawUrl);
+        });
+    }
+    return Array.from(urls);
+}
+function getDroppedUrls(dataTransfer) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        if (!dataTransfer)
+            return [];
+        const urls = new Set();
+        const itemValues = yield Promise.all(Array.from((_a = dataTransfer.items) !== null && _a !== void 0 ? _a : [])
+            .filter(item => item.kind === "string")
+            .map(getStringFromItem));
+        itemValues.forEach(value => parseDroppedUrls(value).forEach(url => urls.add(url)));
+        const uriList = dataTransfer.getData("text/uri-list");
+        const plainText = dataTransfer.getData("text/plain");
+        const html = dataTransfer.getData("text/html");
+        [uriList, plainText, html].forEach(value => {
+            if (value)
+                parseDroppedUrls(value).forEach(url => urls.add(url));
+        });
+        return Array.from(urls);
+    });
+}
+function getExtensionFromMimeType(mimeType) {
+    var _a;
+    const type = mimeType.split(";", 1)[0].toLowerCase();
+    const extensions = {
+        "image/jpeg": ".jpg",
+        "image/png": ".png",
+        "image/webp": ".webp",
+        "image/gif": ".gif",
+        "image/bmp": ".bmp",
+        "image/svg+xml": ".svg",
+        "model/gltf-binary": ".glb",
+        "model/gltf+json": ".gltf",
+        "audio/mpeg": ".mp3",
+        "audio/wav": ".wav",
+        "audio/ogg": ".ogg",
+        "audio/mp4": ".m4a",
+    };
+    return (_a = extensions[type]) !== null && _a !== void 0 ? _a : "";
+}
+function getFilenameFromUrl(url, mimeType) {
+    const parsedUrl = new URL(url);
+    const rawName = parsedUrl.pathname.split("/").filter(Boolean).pop() || "asset";
+    const decodedName = decodeURIComponent(rawName).replace(/[^\w.\-]+/g, "-");
+    const hasExtension = /\.[a-z0-9]+$/i.test(decodedName);
+    return hasExtension ? decodedName : `${decodedName}${getExtensionFromMimeType(mimeType)}`;
+}
+function fetchUrlAsFile(url) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const response = yield fetch(url);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch ${url}: ${response.status} ${response.statusText}`);
+        }
+        const blob = yield response.blob();
+        return new File([blob], getFilenameFromUrl(url, blob.type), { type: blob.type });
+    });
+}
+export function loadDroppedAssets(dataTransfer, options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const localFiles = getFiles(dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.files);
+        const remoteUrls = yield getDroppedUrls(dataTransfer);
+        const localNames = new Set(localFiles.map(file => file.name));
+        yield Promise.all(remoteUrls.map((url) => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            try {
+                const file = yield fetchUrlAsFile(url);
+                if (!localNames.has(file.name)) {
+                    yield loadFile(file, options, url);
                 }
-                if (onLoadError) {
-                    yield onLoadError(result.error, file.name, file);
-                    return;
+            }
+            catch (error) {
+                const fallbackName = getFilenameFromUrl(url, "");
+                const fallbackFile = new File([], fallbackName);
+                yield ((_a = options.onLoadError) === null || _a === void 0 ? void 0 : _a.call(options, error, url, fallbackFile));
+                if (!options.onLoadError) {
+                    console.error("URL load error:", error);
                 }
-                console.error("Model parse error:", result.error);
+            }
+        })));
+        yield loadFiles(localFiles, options);
+    });
+}
+export function loadUrls(urls, options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield Promise.all(urls.map(url => loadUrl(url, options)));
+    });
+}
+export function loadUrl(url, options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        try {
+            const file = yield fetchUrlAsFile(url);
+            yield loadFile(file, options, url);
+        }
+        catch (error) {
+            const fallbackName = getFilenameFromUrl(url, "");
+            const fallbackFile = new File([], fallbackName);
+            yield ((_a = options.onLoadError) === null || _a === void 0 ? void 0 : _a.call(options, error, url, fallbackFile));
+            if (!options.onLoadError) {
+                console.error("URL load error:", error);
+            }
+        }
+    });
+}
+export function loadFiles(files_1, _a) {
+    return __awaiter(this, arguments, void 0, function* (files, { onModelLoaded, onTextureLoaded, onSoundLoaded, onUnhandledFile, onFilesLoaded, onLoadError }) {
+        yield Promise.all(files.map(file => loadFile(file, { onModelLoaded, onTextureLoaded, onSoundLoaded, onUnhandledFile, onLoadError })));
+        yield (onFilesLoaded === null || onFilesLoaded === void 0 ? void 0 : onFilesLoaded(files));
+    });
+}
+function loadFile(file_1, _a) {
+    return __awaiter(this, arguments, void 0, function* (file, { onModelLoaded, onTextureLoaded, onSoundLoaded, onUnhandledFile, onLoadError }, assetRef = file.name) {
+        const shouldParseModel = canParseModelFile(file);
+        const shouldParseTexture = canParseTextureFile(file);
+        const shouldParseSound = canParseSoundFile(file);
+        if (shouldParseModel) {
+            const result = yield parseModelFromFile(file);
+            if (result.success && result.model) {
+                yield (onModelLoaded === null || onModelLoaded === void 0 ? void 0 : onModelLoaded(result.model, assetRef, file));
                 return;
             }
-            if (shouldParseTexture) {
-                const result = yield parseTextureFromFile(file);
-                if (result.success && result.texture) {
-                    yield (onTextureLoaded === null || onTextureLoaded === void 0 ? void 0 : onTextureLoaded(result.texture, file.name, file));
-                    return;
-                }
-                if (onLoadError) {
-                    yield onLoadError(result.error, file.name, file);
-                    return;
-                }
-                console.error("Texture parse error:", result.error);
+            if (onLoadError) {
+                yield onLoadError(result.error, assetRef, file);
                 return;
             }
-            if (shouldParseSound) {
-                const result = yield parseSoundFromFile(file);
-                if (result.success && result.sound) {
-                    yield (onSoundLoaded === null || onSoundLoaded === void 0 ? void 0 : onSoundLoaded(result.sound, file.name, file));
-                    return;
-                }
-                if (onLoadError) {
-                    yield onLoadError(result.error, file.name, file);
-                    return;
-                }
-                console.error("Sound parse error:", result.error);
+            console.error("Model parse error:", result.error);
+            return;
+        }
+        if (shouldParseTexture) {
+            const result = yield parseTextureFromFile(file);
+            if (result.success && result.texture) {
+                yield (onTextureLoaded === null || onTextureLoaded === void 0 ? void 0 : onTextureLoaded(result.texture, assetRef, file));
                 return;
             }
-            if (onUnhandledFile) {
-                yield onUnhandledFile(file);
+            if (onLoadError) {
+                yield onLoadError(result.error, assetRef, file);
+                return;
             }
-        })));
-        yield (onFilesLoaded === null || onFilesLoaded === void 0 ? void 0 : onFilesLoaded(files));
+            console.error("Texture parse error:", result.error);
+            return;
+        }
+        if (shouldParseSound) {
+            const result = yield parseSoundFromFile(file);
+            if (result.success && result.sound) {
+                yield (onSoundLoaded === null || onSoundLoaded === void 0 ? void 0 : onSoundLoaded(result.sound, assetRef, file));
+                return;
+            }
+            if (onLoadError) {
+                yield onLoadError(result.error, assetRef, file);
+                return;
+            }
+            console.error("Sound parse error:", result.error);
+            return;
+        }
+        if (onUnhandledFile) {
+            yield onUnhandledFile(file);
+        }
     });
 }
 function reportFileLoadError(error) {
@@ -94,16 +234,15 @@ export function DragDropLoader(_a) {
     var { children } = _a, divProps = __rest(_a, ["children"]);
     const loadOptions = createLoadHandlers(divProps);
     function handleDrop(event) {
-        var _a;
         event.preventDefault();
         event.stopPropagation();
-        void loadFiles(getFiles((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files), loadOptions).catch(reportFileLoadError);
+        void loadDroppedAssets(event.dataTransfer, loadOptions).catch(reportFileLoadError);
     }
     function handleDragOver(event) {
         event.preventDefault();
         event.stopPropagation();
     }
-    return (_jsx("div", Object.assign({}, divProps, { onDrop: handleDrop, onDragOver: handleDragOver, children: children })));
+    return (_jsx("div", Object.assign({ role: "application" }, divProps, { onDrop: handleDrop, onDragOver: handleDragOver, children: children })));
 }
 export function FilePicker(_a) {
     var { accept = DEFAULT_ACCEPT, children, multiple = true } = _a, divProps = __rest(_a, ["accept", "children", "multiple"]);

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

@@ -1,4 +1,4 @@
-export { DragDropLoader, FilePicker, loadFiles } from "./DragDropLoader";
+export { DragDropLoader, FilePicker, loadDroppedAssets, loadFiles, loadUrl, loadUrls } from "./DragDropLoader";
 export type { AssetLoadOptions, DragDropLoaderProps, FilePickerProps } from "./DragDropLoader";
 export { loadModel, loadSound, loadTexture, parseModelFromFile, parseSoundFromFile, parseTextureFromFile } from "./modelLoader";
 export type { LoadedModel, LoadedSound, LoadedTexture, LoadedModels, LoadedSounds, LoadedTextures, ModelLoadResult, ProgressCallback, SoundLoadResult, TextureLoadResult } from "./modelLoader";

package/dist/tools/dragdrop/index.js

@@ -1,2 +1,2 @@
-export { DragDropLoader, FilePicker, loadFiles } from "./DragDropLoader";
+export { DragDropLoader, FilePicker, loadDroppedAssets, loadFiles, loadUrl, loadUrls } from "./DragDropLoader";
 export { loadModel, loadSound, loadTexture, parseModelFromFile, parseSoundFromFile, parseTextureFromFile } from "./modelLoader";

package/dist/tools/dragdrop/modelLoader.js

@@ -50,6 +50,8 @@ export function canParseModelFile(file) {
 }
 export function canParseTextureFile(file) {
     const filename = typeof file === "string" ? file : file.name;
+    if (filename.startsWith("data:image/"))
+        return true;
     const normalizedName = normalizeModelPath(filename);
     return TEXTURE_FILE_EXTENSIONS.some(extension => normalizedName.endsWith(extension));
 }

package/dist/tools/prefabeditor/EditorUI.js

@@ -11,9 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { hasComponent } from "./types";
 import EditorTree from './EditorTree';
-import { getAllComponentDefs } from './components/ComponentRegistry';
+import { canAddComponentToNode, getAllComponentDefs, getNextComponentKey } from './components/ComponentRegistry';
 import { createComponentData } from './prefab';
 import { useEditorRef } from './PrefabEditor';
 import { base, colors, inspector, componentCard } from './styles';
@@ -34,32 +33,32 @@ function EditorUI({ selectedId, setSelectedId, getPrefab, onReplacePrefab, onImp
         editor.remove(selectedId);
         setSelectedId(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, basePath: basePath }))] }), _jsx("div", { style: { position: 'absolute', top: 8, left: 8, zIndex: 20 }, children: _jsx(EditorTree, { selectedId: selectedId, setSelectedId: setSelectedId, getPrefab: getPrefab, onReplacePrefab: onReplacePrefab, onImportPrefab: onImportPrefab, onUndo: onUndo, onRedo: onRedo, canUndo: canUndo, canRedo: canRedo }) })] });
+    return _jsxs(_Fragment, { children: [_jsxs("div", { style: inspector.panel, children: [_jsxs("button", { type: "button", 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, basePath: basePath }))] }), _jsx("div", { style: { position: 'absolute', top: 8, left: 8, zIndex: 20 }, children: _jsx(EditorTree, { selectedId: selectedId, setSelectedId: setSelectedId, getPrefab: getPrefab, onReplacePrefab: onReplacePrefab, onImportPrefab: onImportPrefab, onUndo: onUndo, onRedo: onRedo, canUndo: canUndo, canRedo: canRedo }) })] });
 }
 function NodeInspector({ node, updateNode, deleteNode, basePath }) {
     var _a;
     const ALL_COMPONENTS = getAllComponentDefs();
     const allKeys = Object.keys(ALL_COMPONENTS);
-    const available = allKeys.filter(k => !hasComponent(node, k));
+    const available = allKeys.filter(k => canAddComponentToNode(node, ALL_COMPONENTS[k], ALL_COMPONENTS));
     const [preferredAddType, setAddType] = useState(available[0] || "");
     const addType = available.includes(preferredAddType) ? preferredAddType : (available[0] || "");
-    return _jsxs("div", { style: inspector.content, children: [_jsxs("div", { style: base.section, children: [_jsxs("div", { style: { display: "flex", marginBottom: 4, alignItems: 'center', gap: 4 }, children: [_jsx("div", { style: { fontSize: 10, color: colors.textDim, wordBreak: 'break-all', background: colors.bgLight, padding: '2px 4px', flex: 1, fontFamily: 'monospace', minHeight: 18, boxSizing: 'border-box' }, children: node.id }), _jsx("button", { style: Object.assign(Object.assign(Object.assign({}, base.btn), base.btnDanger), { minWidth: 22, padding: '2px 4px' }), title: "Delete Node", onClick: deleteNode, children: "\u2715" })] }), _jsx("input", { style: base.input, value: (_a = node.name) !== null && _a !== void 0 ? _a : "", placeholder: 'Node name', onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { name: e.target.value }))) })] }), _jsxs("div", { style: base.section, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }, children: _jsx("div", { style: base.label, children: "Components" }) }), node.components && Object.entries(node.components).map(([key, comp]) => {
+    return _jsxs("div", { style: inspector.content, children: [_jsxs("div", { style: base.section, children: [_jsxs("div", { style: { display: "flex", marginBottom: 4, alignItems: 'center', gap: 4 }, children: [_jsx("div", { style: { fontSize: 10, color: colors.textDim, wordBreak: 'break-all', background: colors.bgLight, padding: '2px 4px', flex: 1, fontFamily: 'monospace', minHeight: 18, boxSizing: 'border-box' }, children: node.id }), _jsx("button", { style: Object.assign(Object.assign(Object.assign({}, base.btn), base.btnDanger), { minWidth: 22, padding: '2px 4px' }), type: "button", title: "Delete Node", onClick: deleteNode, children: "\u2715" })] }), _jsx("input", { style: base.input, value: (_a = node.name) !== null && _a !== void 0 ? _a : "", placeholder: 'Node name', onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { name: e.target.value }))) })] }), _jsxs("div", { style: base.section, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }, children: _jsx("div", { style: base.label, children: "Components" }) }), node.components && Object.entries(node.components).map(([key, comp]) => {
                         if (!comp)
                             return null;
                         const def = ALL_COMPONENTS[comp.type];
                         if (!def)
                             return _jsxs("div", { style: { color: colors.danger, fontSize: 11 }, children: ["Unknown: ", comp.type] }, key);
-                        return (_jsxs("div", { style: componentCard.container, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 3 }, children: [_jsx("div", { style: { fontSize: 11, fontWeight: 500 }, children: key }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 4px', minWidth: 20 }), title: "Remove Component", onClick: () => updateNode(n => {
+                        return (_jsxs("div", { style: componentCard.container, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 3 }, children: [_jsx("div", { style: { fontSize: 11, fontWeight: 500 }, children: key }), _jsx("button", { type: "button", style: Object.assign(Object.assign({}, base.btn), { padding: '2px 4px', minWidth: 20 }), title: "Remove Component", onClick: () => updateNode(n => {
                                                 var _a;
                                                 const _b = (_a = n.components) !== null && _a !== void 0 ? _a : {}, _c = key, _ = _b[_c], rest = __rest(_b, [typeof _c === "symbol" ? _c : _c + ""]);
                                                 return Object.assign(Object.assign({}, n), { components: rest });
                                             }), children: "\u2715" })] }), def.Editor && (_jsx(def.Editor, { component: comp, node: node, onUpdate: (newProps) => updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: Object.assign(Object.assign({}, comp), { properties: Object.assign(Object.assign({}, comp.properties), newProps) }) }) }))), basePath: basePath }))] }, key));
-                    })] }), available.length > 0 && (_jsx("div", { children: _jsxs("div", { style: base.row, children: [_jsx("select", { style: Object.assign(Object.assign({}, base.input), { flex: 1, background: colors.bgInput, border: `1px solid ${colors.border}`, minHeight: 22 }), value: addType, onChange: e => setAddType(e.target.value), children: available.map(k => _jsx("option", { value: k, children: k }, k)) }), _jsx("button", { style: base.btn, disabled: !addType, onClick: () => {
+                    })] }), available.length > 0 && (_jsx("div", { children: _jsxs("div", { style: base.row, children: [_jsx("select", { style: Object.assign(Object.assign({}, base.input), { flex: 1, background: colors.bgInput, border: `1px solid ${colors.border}`, minHeight: 22 }), value: addType, onChange: e => setAddType(e.target.value), children: available.map(k => _jsx("option", { value: k, children: k }, k)) }), _jsx("button", { type: "button", style: base.btn, disabled: !addType, onClick: () => {
                                 if (!addType)
                                     return;
                                 const def = ALL_COMPONENTS[addType];
                                 if (def) {
-                                    updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [addType.toLowerCase()]: createComponentData(def.name) }) })));
+                                    updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [getNextComponentKey(n, def.name)]: createComponentData(def.name) }) })));
                                 }
                             }, title: "Add Component", children: "+" })] }) }))] });
 }

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

@@ -2,6 +2,9 @@ import GameCanvas from "../../shared/GameCanvas";
 import type { Prefab } from "./types";
 import { PrefabEditorMode, type Scene } from "./PrefabRoot";
 import type { ExportGLBOptions } from "./utils";
+export declare function isAbsoluteAssetPath(path: string): boolean;
+export declare function resolvePrefabAssetPath(basePath: string, file: string): string;
+export declare function getPrefabAssetRef(assetRef: string, folder: "models" | "textures" | "sound"): string;
 export interface PrefabEditorRef extends Scene {
     save: () => Prefab;
     load: (prefab: Prefab, options?: {