react-three-game 0.0.57 → 0.0.58

package/README.md

@@ -60,14 +60,23 @@ import { GameCanvas, PrefabRoot } from 'react-three-game';
 ## GameObject Schema
 
 ```typescript
+interface Prefab {
+  id?: string;
+  name?: string;
+  root: GameObject;
+}
+
 interface GameObject {
   id: string;
+  name?: string;
   disabled?: boolean;
   components?: Record<string, { type: string; properties: any }>;
   children?: GameObject[];
 }
 ```
 
+`disabled` is the canonical visibility toggle in the current schema. Transforms are local to the parent node.
+
 ## Built-in Components
 
 | Component | Key Properties |
@@ -110,7 +119,7 @@ const Rotator: Component = {
 registerComponent(Rotator); // before rendering PrefabEditor
 ```
 
-**Wrapper** components accept `children` (animations, controllers). **Leaf** components don't (lights, particles).
+Components may render visible content, wrap child content, or contribute runtime behavior. Keep those semantics explicit in the component `View` rather than relying on hidden tree rules.
 
 ### Schema-Driven Field Types
 
@@ -152,12 +161,16 @@ import { PrefabEditor } from 'react-three-game';
 </PrefabEditor>
 ```
 
-Keys: **T**ranslate / **R**otate / **S**cale. Drag tree nodes to reparent. Import/export JSON. Physics only runs in play mode.
+Keys: **T**ranslate / **R**otate / **S**cale. Drag tree nodes to reparent. Physics only runs in play mode.
+
+Editor menu structure:
+- `Menu > File`: new scene, load/save prefab JSON, load prefab into scene
+- `Menu > Export`: `GLB`, `PNG`
 
 ## Internals
 
 - **Transforms**: Local in JSON, world computed via matrix multiplication
-- **Instancing**: `model.properties.instanced = true` → `<Merged>` + `<InstancedRigidBodies>`
+- **Instancing**: `model.properties.instanced = true` switches the node to the batched instance path (`<Merged>` / `<InstancedRigidBodies>`) instead of the standard model render path
 - **Models**: GLB/GLTF (Draco) and FBX auto-load from `filename`
 
 ## Tree Utilities

package/dist/tools/prefabeditor/EditorTree.js

@@ -1,19 +1,11 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { getComponent } from './components/ComponentRegistry';
-import { base, colors, tree, menu } from './styles';
-import { findNode, findParent, deleteNode, cloneNode, updateNodeById, loadJson, saveJson, regenerateIds } from './utils';
+import { base, colors, tree } from './styles';
+import { findNode, findParent, deleteNode, cloneNode, updateNodeById } from './utils';
 import { useEditorContext } from './EditorContext';
 import { Dropdown } from './Dropdown';
+import { FileMenu, MenuTriggerButton, TreeContextMenu, TreeNodeMenu } from './EditorTreeMenus';
 function moveNode(root, draggedId, targetId, position) {
     const draggedNode = findNode(root, draggedId);
     const oldParent = findParent(root, draggedId);
@@ -79,6 +71,7 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
     const [collapsedIds, setCollapsedIds] = useState(new Set());
     const [collapsed, setCollapsed] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
+    const [contextMenu, setContextMenu] = useState(null);
     if (!prefabData || !setPrefabData)
         return null;
     const toggleCollapse = (e, id) => {
@@ -128,6 +121,16 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
     const handleToggleDisabled = (nodeId) => {
         setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, nodeId, node => (Object.assign(Object.assign({}, node), { disabled: !node.disabled }))) })));
     };
+    const closeContextMenu = () => setContextMenu(null);
+    const openContextMenu = (nodeId, x, y) => {
+        setSelectedId(nodeId);
+        setContextMenu({ nodeId, x, y });
+    };
+    const handleFocus = (nodeId) => {
+        setSelectedId(nodeId);
+        onFocusNode === null || onFocusNode === void 0 ? void 0 : onFocusNode(nodeId);
+    };
+    const renderTreeNodeMenu = (nodeId, isRoot, onClose) => (_jsx(TreeNodeMenu, { isRoot: isRoot, nodeId: nodeId, onAddChild: handleAddChild, onFocus: handleFocus, onDuplicate: isRoot ? undefined : handleDuplicate, onDelete: isRoot ? undefined : handleDelete, onClose: onClose }));
     const handleDragStart = (e, id) => {
         if (id === prefabData.root.id)
             return e.preventDefault();
@@ -190,13 +193,17 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         const isDropTarget = (dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.id) === node.id;
         const showDropBefore = isDropTarget && (dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.position) === 'before';
         const showDropInside = isDropTarget && (dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.position) === 'inside';
-        return (_jsxs("div", { children: [_jsxs("div", { style: Object.assign(Object.assign(Object.assign({}, tree.row), (isSelected ? tree.selected : {})), { paddingLeft: `${depth * 12 + 6}px`, opacity: node.disabled ? 0.4 : 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: showDropBefore ? `2px solid ${colors.accent}` : undefined, boxShadow: showDropInside ? `inset 0 0 0 1px ${colors.accentBorder}` : undefined }), draggable: !isRoot, onClick: (e) => { e.stopPropagation(); setSelectedId(node.id); }, onDragStart: (e) => handleDragStart(e, node.id), onDragEnd: () => { setDraggedId(null); setDropTarget(null); }, onDragOver: (e) => handleDragOver(e, node.id, isRoot), onDragLeave: (e) => handleDragLeave(e, node.id), onDrop: (e) => handleDrop(e, node.id, isRoot), children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, children: [_jsx("span", { style: {
+        return (_jsxs("div", { children: [_jsxs("div", { style: Object.assign(Object.assign(Object.assign({}, tree.row), (isSelected ? tree.selected : {})), { paddingLeft: `${depth * 12 + 6}px`, opacity: node.disabled ? 0.4 : 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: showDropBefore ? `2px solid ${colors.accent}` : undefined, boxShadow: showDropInside ? `inset 0 0 0 1px ${colors.accentBorder}` : undefined }), draggable: !isRoot, onClick: (e) => { e.stopPropagation(); setSelectedId(node.id); }, onContextMenu: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        openContextMenu(node.id, e.clientX, e.clientY);
+                    }, onDragStart: (e) => handleDragStart(e, node.id), onDragEnd: () => { setDraggedId(null); setDropTarget(null); }, onDragOver: (e) => handleDragOver(e, node.id, isRoot), onDragLeave: (e) => handleDragLeave(e, node.id), onDrop: (e) => handleDrop(e, node.id, isRoot), children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, children: [_jsx("span", { style: {
                                         width: 12,
                                         opacity: 0.6,
                                         marginRight: 4,
                                         cursor: 'pointer',
                                         visibility: hasChildren ? 'visible' : 'hidden'
-                                    }, onClick: (e) => hasChildren && toggleCollapse(e, node.id), children: isCollapsed ? '▶' : '▼' }), !isRoot && _jsx("span", { style: { marginRight: 4, opacity: 0.4 }, children: "\u22EE\u22EE" }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: (_a = node.name) !== null && _a !== void 0 ? _a : node.id })] }), !isRoot && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx("button", { ref: ref, style: {
+                                    }, onClick: (e) => hasChildren && toggleCollapse(e, node.id), children: isCollapsed ? '▶' : '▼' }), !isRoot && _jsx("span", { style: { marginRight: 4, opacity: 0.4 }, children: "\u22EE\u22EE" }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: (_a = node.name) !== null && _a !== void 0 ? _a : node.id })] }), !isRoot && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx(MenuTriggerButton, { buttonRef: ref, onToggle: toggle, title: "Node Actions", style: {
                                             background: 'none',
                                             border: 'none',
                                             cursor: 'pointer',
@@ -204,10 +211,7 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
                                             fontSize: 14,
                                             opacity: 0.7,
                                             color: 'inherit',
-                                        }, onClick: (e) => {
-                                            e.stopPropagation();
-                                            toggle();
-                                        }, title: "Node Actions", children: "\u22EF" })), children: (close) => (_jsxs("div", { style: Object.assign(Object.assign({}, menu.container), { position: 'static' }), onClick: (e) => e.stopPropagation(), children: [_jsx("button", { style: menu.item, onClick: () => { handleAddChild(node.id); close(); }, children: "Add Child" }), _jsx("button", { style: menu.item, onClick: () => { setSelectedId(node.id); onFocusNode === null || onFocusNode === void 0 ? void 0 : onFocusNode(node.id); close(); }, children: "Focus Camera" }), _jsx("button", { style: menu.item, onClick: () => { handleDuplicate(node.id); close(); }, children: "Duplicate" }), _jsx("button", { style: Object.assign(Object.assign({}, menu.item), menu.danger), onClick: () => { handleDelete(node.id); close(); }, children: "Delete" })] })) }), _jsx("button", { style: {
+                                        }, children: "\u22EF" })), children: (close) => renderTreeNodeMenu(node.id, false, close) }), _jsx("button", { style: {
                                         background: 'none',
                                         border: 'none',
                                         cursor: 'pointer',
@@ -218,7 +222,7 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
                                     }, onClick: (e) => {
                                         e.stopPropagation();
                                         handleToggleDisabled(node.id);
-                                    }, title: node.disabled ? 'Enable' : 'Disable', children: node.disabled ? '◎' : '◉' })] })), isRoot && (_jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx("button", { ref: ref, style: {
+                                    }, title: node.disabled ? 'Enable' : 'Disable', children: node.disabled ? '◎' : '◉' })] })), isRoot && (_jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx(MenuTriggerButton, { buttonRef: ref, onToggle: toggle, title: "Scene Actions", style: {
                                     background: 'none',
                                     border: 'none',
                                     cursor: 'pointer',
@@ -226,35 +230,7 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
                                     fontSize: 14,
                                     opacity: 0.7,
                                     color: 'inherit',
-                                }, onClick: (e) => {
-                                    e.stopPropagation();
-                                    toggle();
-                                }, title: "Scene Actions", children: "\u22EF" })), children: (close) => (_jsxs("div", { style: Object.assign(Object.assign({}, menu.container), { position: 'static' }), onClick: (e) => e.stopPropagation(), children: [_jsx("button", { style: menu.item, onClick: () => { handleAddChild(node.id); close(); }, children: "Add Child" }), _jsx("button", { style: menu.item, onClick: () => { setSelectedId(node.id); onFocusNode === null || onFocusNode === void 0 ? void 0 : onFocusNode(node.id); close(); }, children: "Focus Camera" })] })) }))] }), !isCollapsed && node.children && node.children.map(child => renderNode(child, depth + 1))] }, node.id));
+                                }, children: "\u22EF" })), children: (close) => renderTreeNodeMenu(node.id, true, close) }))] }), !isCollapsed && node.children && node.children.map(child => renderNode(child, depth + 1))] }, node.id));
     };
-    return (_jsx(_Fragment, { children: _jsxs("div", { style: Object.assign(Object.assign({}, tree.panel), { width: collapsed ? 'auto' : 224 }), children: [_jsxs("div", { style: base.header, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { children: collapsed ? '▶' : '▼' }), _jsx("span", { children: "Scene" })] }), !collapsed && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [_jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10, opacity: canUndo ? 1 : 0.4 }), onClick: (e) => { e.stopPropagation(); onUndo === null || onUndo === void 0 ? void 0 : onUndo(); }, disabled: !canUndo, title: "Undo", children: "\u21B6" }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10, opacity: canRedo ? 1 : 0.4 }), onClick: (e) => { e.stopPropagation(); onRedo === null || onRedo === void 0 ? void 0 : onRedo(); }, disabled: !canRedo, title: "Redo", children: "\u21B7" }), _jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx("button", { ref: ref, style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10 }), onClick: (e) => { e.stopPropagation(); toggle(); }, title: "File", children: "\u22EE" })), children: (close) => (_jsx(FileMenu, { prefabData: prefabData, setPrefabData: setPrefabData, onClose: close })) })] }))] }), !collapsed && (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: '4px 4px', borderBottom: `1px solid ${colors.borderLight}` }, children: _jsx("input", { type: "text", placeholder: "Search nodes...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onClick: (e) => e.stopPropagation(), style: Object.assign(Object.assign({}, base.input), { padding: '4px 8px' }) }) }), _jsx("div", { className: "tree-scroll", style: tree.scroll, children: renderNode(prefabData.root) })] }))] }) }));
-}
-function FileMenu({ prefabData, setPrefabData, onClose }) {
-    const { onScreenshot, onExportGLB } = useEditorContext();
-    const handleLoad = () => __awaiter(this, void 0, void 0, function* () {
-        const loadedPrefab = yield loadJson();
-        if (!loadedPrefab)
-            return;
-        setPrefabData(loadedPrefab);
-        onClose();
-    });
-    const handleSave = () => {
-        saveJson(prefabData, "prefab");
-        onClose();
-    };
-    const handleLoadIntoScene = () => __awaiter(this, void 0, void 0, function* () {
-        const loadedPrefab = yield loadJson();
-        if (!loadedPrefab)
-            return;
-        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, prev.root.id, root => {
-                var _a;
-                return (Object.assign(Object.assign({}, root), { children: [...((_a = root.children) !== null && _a !== void 0 ? _a : []), regenerateIds(loadedPrefab.root)] }));
-            }) })));
-        onClose();
-    });
-    return (_jsxs("div", { style: Object.assign(Object.assign({}, menu.container), { position: 'static' }), onClick: (e) => e.stopPropagation(), children: [_jsx("button", { style: menu.item, onClick: handleLoad, children: "\uD83D\uDCE5 Load Prefab JSON" }), _jsx("button", { style: menu.item, onClick: handleSave, children: "\uD83D\uDCBE Save Prefab JSON" }), _jsx("button", { style: menu.item, onClick: handleLoadIntoScene, children: "\uD83D\uDCC2 Load into Scene" }), _jsx("button", { style: menu.item, onClick: () => { onScreenshot === null || onScreenshot === void 0 ? void 0 : onScreenshot(); onClose(); }, children: "\uD83D\uDCF8 Screenshot" }), _jsx("button", { style: menu.item, onClick: () => { onExportGLB === null || onExportGLB === void 0 ? void 0 : onExportGLB(); onClose(); }, children: "\uD83D\uDCE6 Export GLB" })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: Object.assign(Object.assign({}, tree.panel), { width: collapsed ? 'auto' : 224 }), children: [_jsxs("div", { style: base.header, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { children: collapsed ? '▶' : '▼' }), _jsx("span", { children: "Scene" })] }), !collapsed && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [_jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10, opacity: canUndo ? 1 : 0.4 }), onClick: (e) => { e.stopPropagation(); onUndo === null || onUndo === void 0 ? void 0 : onUndo(); }, disabled: !canUndo, title: "Undo", children: "\u21B6" }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10, opacity: canRedo ? 1 : 0.4 }), onClick: (e) => { e.stopPropagation(); onRedo === null || onRedo === void 0 ? void 0 : onRedo(); }, disabled: !canRedo, title: "Redo", children: "\u21B7" }), _jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx(MenuTriggerButton, { buttonRef: ref, onToggle: toggle, title: "Menu", style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10 }), children: "\u22EE" })), children: (close) => (_jsx(FileMenu, { prefabData: prefabData, setPrefabData: setPrefabData, onClose: close })) })] }))] }), !collapsed && (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: '4px 4px', borderBottom: `1px solid ${colors.borderLight}` }, children: _jsx("input", { type: "text", placeholder: "Search nodes...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onClick: (e) => e.stopPropagation(), style: Object.assign(Object.assign({}, base.input), { padding: '4px 8px' }) }) }), _jsx("div", { className: "tree-scroll", style: tree.scroll, children: renderNode(prefabData.root) })] }))] }), _jsx(TreeContextMenu, { contextMenu: contextMenu, onClose: closeContextMenu, children: (nodeId, close) => renderTreeNodeMenu(nodeId, nodeId === prefabData.root.id, close) })] }));
 }

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

@@ -0,0 +1,33 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Prefab } from './types';
+export type TreeContextMenuState = {
+    nodeId: string;
+    x: number;
+    y: number;
+} | null;
+export declare function MenuTriggerButton({ buttonRef, onToggle, title, style, children, }: {
+    buttonRef: React.RefObject<HTMLButtonElement | null>;
+    onToggle: () => void;
+    title: string;
+    style: React.CSSProperties;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TreeNodeMenu({ isRoot, nodeId, onAddChild, onFocus, onDuplicate, onDelete, onClose, }: {
+    isRoot: boolean;
+    nodeId: string;
+    onAddChild: (parentId: string) => void;
+    onFocus: (nodeId: string) => void;
+    onDuplicate?: (nodeId: string) => void;
+    onDelete?: (nodeId: string) => void;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TreeContextMenu({ contextMenu, onClose, children, }: {
+    contextMenu: TreeContextMenuState;
+    onClose: () => void;
+    children: (nodeId: string, onClose: () => void) => React.ReactNode;
+}): import("react").ReactPortal | null;
+export declare function FileMenu({ prefabData, setPrefabData, onClose }: {
+    prefabData: Prefab;
+    setPrefabData: Dispatch<SetStateAction<Prefab>>;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/tools/prefabeditor/EditorTreeMenus.js

@@ -0,0 +1,136 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { menu } from './styles';
+import { useEditorContext } from './EditorContext';
+import { getComponent } from './components/ComponentRegistry';
+import { loadJson, saveJson, regenerateIds, updateNodeById } from './utils';
+function createEmptyPrefab() {
+    var _a;
+    return {
+        id: crypto.randomUUID(),
+        name: 'New Scene',
+        root: {
+            id: crypto.randomUUID(),
+            name: 'Scene',
+            components: {
+                transform: {
+                    type: 'Transform',
+                    properties: Object.assign({}, (_a = getComponent('Transform')) === null || _a === void 0 ? void 0 : _a.defaultProperties)
+                }
+            },
+            children: []
+        }
+    };
+}
+function MenuPanel({ children, style, }) {
+    return (_jsx("div", { style: Object.assign(Object.assign(Object.assign({}, menu.container), { position: 'static' }), style), onClick: (e) => e.stopPropagation(), children: children }));
+}
+function MenuItemButton({ children, onClick, danger = false, style, }) {
+    return (_jsx("button", { style: danger ? Object.assign(Object.assign(Object.assign({}, menu.item), menu.danger), style) : Object.assign(Object.assign({}, menu.item), style), onClick: onClick, children: children }));
+}
+function MenuSubmenu({ label, children, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    return (_jsxs("div", { style: { position: 'relative' }, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), children: [_jsxs(MenuItemButton, { onClick: () => setIsOpen(open => !open), style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }, children: [_jsx("span", { children: label }), _jsx("span", { "aria-hidden": "true", children: "\u203A" })] }), isOpen && (_jsx("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: '100%',
+                    zIndex: 1,
+                }, children: _jsx(MenuPanel, { children: children }) }))] }));
+}
+export function MenuTriggerButton({ buttonRef, onToggle, title, style, children, }) {
+    return (_jsx("button", { ref: buttonRef, style: style, onClick: (e) => {
+            e.stopPropagation();
+            onToggle();
+        }, title: title, children: children }));
+}
+export function TreeNodeMenu({ isRoot, nodeId, onAddChild, onFocus, onDuplicate, onDelete, onClose, }) {
+    return (_jsxs(MenuPanel, { children: [_jsx(MenuItemButton, { onClick: () => { onAddChild(nodeId); onClose(); }, children: "Add Child" }), _jsx(MenuItemButton, { onClick: () => { onFocus(nodeId); onClose(); }, children: "Focus Camera" }), !isRoot && onDuplicate && (_jsx(MenuItemButton, { onClick: () => { onDuplicate(nodeId); onClose(); }, children: "Duplicate" })), !isRoot && onDelete && (_jsx(MenuItemButton, { danger: true, onClick: () => { onDelete(nodeId); onClose(); }, children: "Delete" }))] }));
+}
+export function TreeContextMenu({ contextMenu, onClose, children, }) {
+    var _a, _b;
+    const panelRef = useRef(null);
+    const [position, setPosition] = useState(null);
+    useEffect(() => {
+        if (!contextMenu)
+            return;
+        const handlePointerDown = (event) => {
+            var _a;
+            const target = event.target;
+            if (!target)
+                return;
+            if ((_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))
+                return;
+            onClose();
+        };
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('pointerdown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('pointerdown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [contextMenu, onClose]);
+    useEffect(() => {
+        if (!contextMenu || !panelRef.current || typeof window === 'undefined')
+            return;
+        const panelRect = panelRef.current.getBoundingClientRect();
+        const left = Math.max(8, Math.min(contextMenu.x, window.innerWidth - panelRect.width - 8));
+        const top = Math.max(8, Math.min(contextMenu.y, window.innerHeight - panelRect.height - 8));
+        setPosition({ left, top });
+    }, [contextMenu]);
+    useEffect(() => {
+        if (!contextMenu) {
+            setPosition(null);
+        }
+    }, [contextMenu]);
+    if (!contextMenu || typeof document === 'undefined')
+        return null;
+    return createPortal(_jsx("div", { ref: panelRef, style: {
+            position: 'fixed',
+            left: (_a = position === null || position === void 0 ? void 0 : position.left) !== null && _a !== void 0 ? _a : contextMenu.x,
+            top: (_b = position === null || position === void 0 ? void 0 : position.top) !== null && _b !== void 0 ? _b : contextMenu.y,
+            zIndex: 1000,
+        }, onMouseLeave: onClose, onContextMenu: (e) => e.preventDefault(), children: children(contextMenu.nodeId, onClose) }), document.body);
+}
+export function FileMenu({ prefabData, setPrefabData, onClose }) {
+    const { onScreenshot, onExportGLB } = useEditorContext();
+    const handleNewScene = () => {
+        setPrefabData(createEmptyPrefab());
+        onClose();
+    };
+    const handleNewSceneFromPrefab = () => __awaiter(this, void 0, void 0, function* () {
+        const loadedPrefab = yield loadJson();
+        if (!loadedPrefab)
+            return;
+        setPrefabData(loadedPrefab);
+        onClose();
+    });
+    const handleSave = () => {
+        saveJson(prefabData, 'prefab');
+        onClose();
+    };
+    const handleLoadIntoScene = () => __awaiter(this, void 0, void 0, function* () {
+        const loadedPrefab = yield loadJson();
+        if (!loadedPrefab)
+            return;
+        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, prev.root.id, root => {
+                var _a;
+                return (Object.assign(Object.assign({}, root), { children: [...((_a = root.children) !== null && _a !== void 0 ? _a : []), regenerateIds(loadedPrefab.root)] }));
+            }) })));
+        onClose();
+    });
+    return (_jsxs(MenuPanel, { style: { overflow: 'visible' }, children: [_jsxs(MenuSubmenu, { label: "File", children: [_jsx(MenuItemButton, { onClick: handleNewScene, children: "New Scene" }), _jsx(MenuItemButton, { onClick: handleNewSceneFromPrefab, children: "New Scene from Prefab" }), _jsx(MenuItemButton, { onClick: handleLoadIntoScene, children: "Load Prefab into Scene" }), _jsx(MenuItemButton, { onClick: handleSave, children: "Save Prefab" })] }), _jsxs(MenuSubmenu, { label: "Export", children: [_jsx(MenuItemButton, { onClick: () => { onExportGLB === null || onExportGLB === void 0 ? void 0 : onExportGLB(); onClose(); }, children: "GLB" }), _jsx(MenuItemButton, { onClick: () => { onScreenshot === null || onScreenshot === void 0 ? void 0 : onScreenshot(); onClose(); }, children: "PNG" })] })] }));
+}

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

@@ -1,25 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { PerspectiveCamera, useHelper } from '@react-three/drei';
-import { useRef } from 'react';
+import { PerspectiveCamera } from '@react-three/drei';
+import { useEffect, useMemo, useState } from 'react';
 import { CameraHelper } from 'three';
+import { useFrame } from '@react-three/fiber';
 import { FieldGroup, NumberField } from './Input';
+const cameraDefaults = {
+    fov: 50,
+    near: 0.1,
+    zoom: 1,
+    far: 1000,
+};
 function CameraComponentEditor({ component, onUpdate }) {
-    return (_jsxs(FieldGroup, { children: [_jsx(NumberField, { name: "fov", label: "FOV", values: component.properties, onChange: onUpdate, fallback: 50, min: 1, max: 179, step: 1 }), _jsx(NumberField, { name: "near", label: "Near", values: component.properties, onChange: onUpdate, fallback: 0.1, min: 0.001, step: 0.1 }), _jsx(NumberField, { name: "zoom", label: "Zoom", values: component.properties, onChange: onUpdate, fallback: 1, min: 0.01, step: 0.1 }), _jsx(NumberField, { name: "far", label: "Far", values: component.properties, onChange: onUpdate, fallback: 1000, min: 0.1, step: 1 })] }));
+    const values = Object.assign(Object.assign({}, cameraDefaults), component.properties);
+    return (_jsxs(FieldGroup, { children: [_jsx(NumberField, { name: "fov", label: "FOV", values: values, onChange: onUpdate, fallback: 50, min: 1, max: 179, step: 1 }), _jsx(NumberField, { name: "near", label: "Near", values: values, onChange: onUpdate, fallback: 0.1, min: 0.001, step: 0.1 }), _jsx(NumberField, { name: "zoom", label: "Zoom", values: values, onChange: onUpdate, fallback: 1, min: 0.01, step: 0.1 }), _jsx(NumberField, { name: "far", label: "Far", values: values, onChange: onUpdate, fallback: 1000, min: 0.1, step: 1 })] }));
 }
 function CameraComponentView({ properties, editMode, isSelected }) {
-    var _a, _b, _c, _d;
-    const fov = (_a = properties === null || properties === void 0 ? void 0 : properties.fov) !== null && _a !== void 0 ? _a : 50;
-    const near = (_b = properties === null || properties === void 0 ? void 0 : properties.near) !== null && _b !== void 0 ? _b : 0.1;
-    const zoom = (_c = properties === null || properties === void 0 ? void 0 : properties.zoom) !== null && _c !== void 0 ? _c : 1;
-    const far = (_d = properties === null || properties === void 0 ? void 0 : properties.far) !== null && _d !== void 0 ? _d : 1000;
-    const cameraRef = useRef(null);
-    useHelper(editMode && isSelected ? cameraRef : null, CameraHelper);
-    return (_jsxs(_Fragment, { children: [_jsx(PerspectiveCamera, { ref: cameraRef, makeDefault: !editMode, fov: fov, near: near, zoom: zoom, far: far }), editMode && !isSelected ? (_jsxs("mesh", { children: [_jsx("boxGeometry", { args: [0.34, 0.22, 0.18] }), _jsx("meshBasicMaterial", { color: "#22d3ee", wireframe: true })] })) : null] }));
+    const merged = Object.assign(Object.assign({}, cameraDefaults), properties);
+    const fov = merged.fov;
+    const near = merged.near;
+    const zoom = merged.zoom;
+    const far = merged.far;
+    const [camera, setCamera] = useState(null);
+    const cameraHelper = useMemo(() => camera ? new CameraHelper(camera) : null, [camera]);
+    useEffect(() => {
+        return () => {
+            cameraHelper === null || cameraHelper === void 0 ? void 0 : cameraHelper.dispose();
+        };
+    }, [cameraHelper]);
+    useFrame(() => {
+        if (camera && cameraHelper && editMode && isSelected) {
+            camera.updateProjectionMatrix();
+            camera.updateMatrixWorld();
+            cameraHelper.update();
+        }
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(PerspectiveCamera, { ref: (instance) => setCamera(instance), makeDefault: !editMode, fov: fov, near: near, zoom: zoom, far: far }), editMode && isSelected && cameraHelper && (_jsx("primitive", { object: cameraHelper })), editMode && !isSelected ? (_jsxs("mesh", { children: [_jsx("boxGeometry", { args: [0.34, 0.22, 0.18] }), _jsx("meshBasicMaterial", { color: "#22d3ee", wireframe: true })] })) : null] }));
 }
 const CameraComponent = {
     name: 'Camera',
     Editor: CameraComponentEditor,
     View: CameraComponentView,
-    defaultProperties: {},
+    defaultProperties: cameraDefaults,
 };
 export default CameraComponent;

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

@@ -1,9 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useMemo, useState } from "react";
 import { useFrame } from "@react-three/fiber";
-import { Vector3 } from "three";
+import { CameraHelper, Vector3 } from "three";
 import { FieldRenderer, Input } from "./Input";
 const smallLabel = { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 };
+const directionalLightDefaults = {
+    color: '#ffffff',
+    intensity: 1,
+    castShadow: true,
+    shadowMapSize: 1024,
+    shadowCameraNear: 0.1,
+    shadowCameraFar: 100,
+    shadowCameraTop: 30,
+    shadowCameraBottom: -30,
+    shadowCameraLeft: -30,
+    shadowCameraRight: 30,
+    targetOffset: [0, -5, 0],
+};
 const directionalLightFields = [
     { name: 'color', type: 'color', label: 'Color' },
     { name: 'intensity', type: 'number', label: 'Intensity', step: 0.1, min: 0 },
@@ -29,39 +42,52 @@ const directionalLightFields = [
     },
 ];
 function DirectionalLightComponentEditor({ component, onUpdate }) {
-    return (_jsx(FieldRenderer, { fields: directionalLightFields, values: component.properties, onChange: onUpdate }));
+    const values = Object.assign(Object.assign({}, directionalLightDefaults), component.properties);
+    const fields = values.castShadow
+        ? directionalLightFields
+        : directionalLightFields.filter(field => field.name !== '_shadowCamera');
+    return (_jsx(FieldRenderer, { fields: fields, values: values, onChange: onUpdate }));
 }
 function DirectionalLightView({ properties, editMode, isSelected }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    const color = (_a = properties.color) !== null && _a !== void 0 ? _a : '#ffffff';
-    const intensity = (_b = properties.intensity) !== null && _b !== void 0 ? _b : 1.0;
-    const castShadow = (_c = properties.castShadow) !== null && _c !== void 0 ? _c : true;
-    const shadowMapSize = (_d = properties.shadowMapSize) !== null && _d !== void 0 ? _d : 1024;
-    const shadowCameraNear = (_e = properties.shadowCameraNear) !== null && _e !== void 0 ? _e : 0.1;
-    const shadowCameraFar = (_f = properties.shadowCameraFar) !== null && _f !== void 0 ? _f : 100;
-    const shadowCameraTop = (_g = properties.shadowCameraTop) !== null && _g !== void 0 ? _g : 30;
-    const shadowCameraBottom = (_h = properties.shadowCameraBottom) !== null && _h !== void 0 ? _h : -30;
-    const shadowCameraLeft = (_j = properties.shadowCameraLeft) !== null && _j !== void 0 ? _j : -30;
-    const shadowCameraRight = (_k = properties.shadowCameraRight) !== null && _k !== void 0 ? _k : 30;
-    const targetOffset = (_l = properties.targetOffset) !== null && _l !== void 0 ? _l : [0, -5, 0];
+    const merged = Object.assign(Object.assign({}, directionalLightDefaults), properties);
+    const color = merged.color;
+    const intensity = merged.intensity;
+    const castShadow = merged.castShadow;
+    const shadowMapSize = merged.shadowMapSize;
+    const shadowCameraNear = merged.shadowCameraNear;
+    const shadowCameraFar = merged.shadowCameraFar;
+    const shadowCameraTop = merged.shadowCameraTop;
+    const shadowCameraBottom = merged.shadowCameraBottom;
+    const shadowCameraLeft = merged.shadowCameraLeft;
+    const shadowCameraRight = merged.shadowCameraRight;
+    const targetOffset = merged.targetOffset;
     const directionalLightRef = useRef(null);
     const targetRef = useRef(null);
-    // Set up light target reference when both refs are ready
+    const [shadowCamera, setShadowCamera] = useState(null);
+    const shadowCameraHelper = useMemo(() => shadowCamera ? new CameraHelper(shadowCamera) : null, [shadowCamera]);
+    useEffect(() => {
+        return () => {
+            shadowCameraHelper === null || shadowCameraHelper === void 0 ? void 0 : shadowCameraHelper.dispose();
+        };
+    }, [shadowCameraHelper]);
+    // Use a local target object so node transforms rotate the light direction naturally.
     useEffect(() => {
         if (directionalLightRef.current && targetRef.current) {
             directionalLightRef.current.target = targetRef.current;
+            setShadowCamera(directionalLightRef.current.shadow.camera);
         }
     }, []);
-    // Update target world position based on light position + offset
     useFrame(() => {
         if (!directionalLightRef.current || !targetRef.current)
             return;
-        const lightWorldPos = new Vector3();
-        directionalLightRef.current.getWorldPosition(lightWorldPos);
-        // Target is positioned relative to light's world position
-        targetRef.current.position.set(lightWorldPos.x + targetOffset[0], lightWorldPos.y + targetOffset[1], lightWorldPos.z + targetOffset[2]);
+        directionalLightRef.current.target.updateMatrixWorld();
+        if (shadowCamera && shadowCameraHelper && castShadow) {
+            shadowCamera.updateProjectionMatrix();
+            shadowCamera.updateMatrixWorld();
+            shadowCameraHelper.update();
+        }
     });
-    return (_jsxs(_Fragment, { children: [_jsx("directionalLight", { ref: directionalLightRef, color: color, intensity: intensity, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar, "shadow-camera-top": shadowCameraTop, "shadow-camera-bottom": shadowCameraBottom, "shadow-camera-left": shadowCameraLeft, "shadow-camera-right": shadowCameraRight, "shadow-bias": -0.001, "shadow-normalBias": 0.02 }), _jsx("object3D", { ref: targetRef }), editMode && isSelected && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.3, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] }), _jsxs("line", { children: [_jsx("bufferGeometry", { onUpdate: (geo) => {
+    return (_jsxs(_Fragment, { children: [_jsx("directionalLight", { ref: directionalLightRef, color: color, intensity: intensity, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar, "shadow-camera-top": shadowCameraTop, "shadow-camera-bottom": shadowCameraBottom, "shadow-camera-left": shadowCameraLeft, "shadow-camera-right": shadowCameraRight, "shadow-bias": -0.001, "shadow-normalBias": 0.02 }), _jsx("object3D", { ref: targetRef, position: targetOffset }), editMode && isSelected && castShadow && shadowCameraHelper && (_jsx("primitive", { object: shadowCameraHelper })), editMode && isSelected && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.3, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] }), _jsxs("line", { children: [_jsx("bufferGeometry", { onUpdate: (geo) => {
                                     const points = [
                                         new Vector3(0, 0, 0),
                                         new Vector3(targetOffset[0], targetOffset[1], targetOffset[2])
@@ -73,6 +99,6 @@ const DirectionalLightComponent = {
     name: 'DirectionalLight',
     Editor: DirectionalLightComponentEditor,
     View: DirectionalLightView,
-    defaultProperties: {}
+    defaultProperties: directionalLightDefaults
 };
 export default DirectionalLightComponent;

package/dist/tools/prefabeditor/components/MaterialComponent.d.ts

@@ -1,5 +1,13 @@
+import type { ThreeElement } from '@react-three/fiber';
 import { Component } from './ComponentRegistry';
+import { MeshBasicNodeMaterial, MeshStandardNodeMaterial } from 'three/webgpu';
 import { MeshBasicMaterialProperties, MeshStandardMaterialProperties } from 'three';
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        meshBasicNodeMaterial: ThreeElement<typeof MeshBasicNodeMaterial>;
+        meshStandardNodeMaterial: ThreeElement<typeof MeshStandardNodeMaterial>;
+    }
+}
 export interface MaterialProps extends Omit<MeshStandardMaterialProperties & MeshBasicMaterialProperties, 'args' | 'normalScale'> {
     materialType?: 'standard' | 'basic';
     transmission?: number;

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

@@ -11,14 +11,20 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SingleTextureViewer, TextureListViewer } from '../../assetviewer/page';
+import { extend } from '@react-three/fiber';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { FieldRenderer, Input } from './Input';
 import { colors } from '../styles';
 import { useMemo } from 'react';
+import { MeshBasicNodeMaterial, MeshStandardNodeMaterial } from 'three/webgpu';
 import { RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace, LinearSRGBColorSpace, Vector2, NearestFilter, LinearFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearMipmapNearestFilter, LinearMipmapLinearFilter, FrontSide, BackSide, DoubleSide, } from 'three';
 const PICKER_POPUP_WIDTH = 260;
 const PICKER_POPUP_HEIGHT = 360;
+extend({
+    MeshBasicNodeMaterial,
+    MeshStandardNodeMaterial,
+});
 function TexturePicker({ value, onChange, basePath }) {
     const [textureFiles, setTextureFiles] = useState([]);
     const [showPicker, setShowPicker] = useState(false);
@@ -193,7 +199,7 @@ function MaterialComponentView({ properties, loadedTextures }) {
     const normalMapTexture = normalMapTextureName && loadedTextures ? loadedTextures[normalMapTextureName] : undefined;
     const materialSource = properties !== null && properties !== void 0 ? properties : {};
     // Destructure all material props and separate custom texture handling props
-    const { texture: _texture, repeat: _repeat, repeatCount: _repeatCount, generateMipmaps: _generateMipmaps, minFilter: _minFilter, magFilter: _magFilter, map: _map, materialType: _materialType, normalMapTexture: _normalMapTexture, normalScale: _normalScale, normalMap: _normalMap, side: sideProp, metalness: _metalness, roughness: _roughness, transmission: _transmission, thickness: _thickness, ior: _ior } = materialSource, materialProps = __rest(materialSource, ["texture", "repeat", "repeatCount", "generateMipmaps", "minFilter", "magFilter", "map", "materialType", "normalMapTexture", "normalScale", "normalMap", "side", "metalness", "roughness", "transmission", "thickness", "ior"]);
+    const { texture: _texture, repeat: _repeat, repeatCount: _repeatCount, generateMipmaps: _generateMipmaps, minFilter: _minFilter, magFilter: _magFilter, map: _map, materialType: _materialType, normalMapTexture: _normalMapTexture, normalScale: _normalScale, normalMap: _normalMap, side: sideProp } = materialSource, materialProps = __rest(materialSource, ["texture", "repeat", "repeatCount", "generateMipmaps", "minFilter", "magFilter", "map", "materialType", "normalMapTexture", "normalScale", "normalMap", "side"]);
     const sideMap = { FrontSide, BackSide, DoubleSide };
     const resolvedSide = sideProp ? ((_b = sideMap[sideProp]) !== null && _b !== void 0 ? _b : FrontSide) : FrontSide;
     const minFilterMap = {
@@ -244,14 +250,14 @@ function MaterialComponentView({ properties, loadedTextures }) {
         return new Vector2((_a = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0]) !== null && _a !== void 0 ? _a : 1, (_b = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]) !== null && _b !== void 0 ? _b : 1);
     }, [finalNormalMap, normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0], normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]]);
     if (!properties) {
-        return _jsx("meshStandardMaterial", { color: "red", wireframe: true });
+        return _jsx("meshStandardNodeMaterial", { color: "red", wireframe: true });
     }
-    const materialKey = (_c = finalTexture === null || finalTexture === void 0 ? void 0 : finalTexture.uuid) !== null && _c !== void 0 ? _c : 'no-texture';
+    const materialKey = `${(_c = finalTexture === null || finalTexture === void 0 ? void 0 : finalTexture.uuid) !== null && _c !== void 0 ? _c : 'no-texture'}:${materialProps.transparent ? 'transparent' : 'opaque'}`;
     const sharedProps = Object.assign({ map: finalTexture, side: resolvedSide }, materialProps);
     if (materialType === 'basic') {
-        return _jsx("meshBasicMaterial", Object.assign({}, sharedProps), materialKey);
+        return _jsx("meshBasicNodeMaterial", Object.assign({}, sharedProps), materialKey);
     }
-    return (_jsx("meshStandardMaterial", Object.assign({}, sharedProps, { normalMap: finalNormalMap, normalScale: normalScaleVec }), materialKey));
+    return (_jsx("meshStandardNodeMaterial", Object.assign({}, sharedProps, { normalMap: finalNormalMap, normalScale: normalScaleVec }), materialKey));
 }
 const MaterialComponent = {
     name: 'Material',