@nice2dev/ui-3d 1.0.0 → 1.0.2

package/dist/cjs/model/useModelEditor.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var Ae = require('react');
 var THREE = require('three');
 var OrbitControls_js = require('three/examples/jsm/controls/OrbitControls.js');
 var TransformControls_js = require('three/examples/jsm/controls/TransformControls.js');
@@ -24,6 +24,7 @@ var VRMLLoader_js = require('three/examples/jsm/loaders/VRMLLoader.js');
 var GCodeLoader_js = require('three/examples/jsm/loaders/GCodeLoader.js');
 var SVGLoader_js = require('three/examples/jsm/loaders/SVGLoader.js');
 var modelEditorTypes = require('./modelEditorTypes.js');
+var modelEditorUtils = require('./modelEditorUtils.js');
 
 function _interopNamespaceDefault(e) {
    var n = Object.create(null);
@@ -71,82 +72,82 @@ function findNodeById(nodes, id) {
    ═══════════════════════════════════════════ */
 function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ── refs ── */
-    const mountRef = React.useRef(null);
-    const rendererRef = React.useRef(null);
-    const sceneRef = React.useRef(new THREE__namespace.Scene());
-    const cameraRef = React.useRef(new THREE__namespace.PerspectiveCamera(50, 1, 0.01, 10000));
-    const orbitRef = React.useRef(null);
-    const transformRef = React.useRef(null);
-    const clockRef = React.useRef(new THREE__namespace.Clock());
-    const mixerRef = React.useRef(null);
-    const rafRef = React.useRef(0);
-    const fileInputRef = React.useRef(null);
-    const mergeInputRef = React.useRef(null);
-    const videoInputRef = React.useRef(null);
-    const raycasterRef = React.useRef(new THREE__namespace.Raycaster());
-    const skeletonHelperRef = React.useRef(null);
+    const mountRef = Ae.useRef(null);
+    const rendererRef = Ae.useRef(null);
+    const sceneRef = Ae.useRef(new THREE__namespace.Scene());
+    const cameraRef = Ae.useRef(new THREE__namespace.PerspectiveCamera(50, 1, 0.01, 10000));
+    const orbitRef = Ae.useRef(null);
+    const transformRef = Ae.useRef(null);
+    const clockRef = Ae.useRef(new THREE__namespace.Clock());
+    const mixerRef = Ae.useRef(null);
+    const rafRef = Ae.useRef(0);
+    const fileInputRef = Ae.useRef(null);
+    const mergeInputRef = Ae.useRef(null);
+    const videoInputRef = Ae.useRef(null);
+    const raycasterRef = Ae.useRef(new THREE__namespace.Raycaster());
+    const skeletonHelperRef = Ae.useRef(null);
     /* ── state ── */
-    const [sceneTree, setSceneTree] = React.useState([]);
-    const [selectedId, setSelectedId] = React.useState(null);
-    const [transformMode, setTransformMode] = React.useState("translate");
-    const [animations, setAnimations] = React.useState([]);
-    const [activeAnimIdx, setActiveAnimIdx] = React.useState(-1);
-    const [isPlaying, setIsPlaying] = React.useState(false);
-    const [animTime, setAnimTime] = React.useState(0);
-    const [animDuration, setAnimDuration] = React.useState(0);
-    const [animSpeed, setAnimSpeed] = React.useState(1);
-    const [loopAnim, setLoopAnim] = React.useState(true);
-    const [bottomCollapsed, setBottomCollapsed] = React.useState(false);
-    const [showGrid, setShowGrid] = React.useState(true);
-    const [showAxes, setShowAxes] = React.useState(true);
-    const [wireframe, setWireframe] = React.useState(false);
-    const [bgColor, setBgColor] = React.useState("#111122");
-    const [statusText, setStatusText] = React.useState("Ready");
-    const [dragOver, setDragOver] = React.useState(false);
-    const [polyCount, setPolyCount] = React.useState(0);
-    const [meshCount, setMeshCount] = React.useState(0);
-    const [boneCount, setBoneCount] = React.useState(0);
+    const [sceneTree, setSceneTree] = Ae.useState([]);
+    const [selectedId, setSelectedId] = Ae.useState(null);
+    const [transformMode, setTransformMode] = Ae.useState("translate");
+    const [animations, setAnimations] = Ae.useState([]);
+    const [activeAnimIdx, setActiveAnimIdx] = Ae.useState(-1);
+    const [isPlaying, setIsPlaying] = Ae.useState(false);
+    const [animTime, setAnimTime] = Ae.useState(0);
+    const [animDuration, setAnimDuration] = Ae.useState(0);
+    const [animSpeed, setAnimSpeed] = Ae.useState(1);
+    const [loopAnim, setLoopAnim] = Ae.useState(true);
+    const [bottomCollapsed, setBottomCollapsed] = Ae.useState(false);
+    const [showGrid, setShowGrid] = Ae.useState(true);
+    const [showAxes, setShowAxes] = Ae.useState(true);
+    const [wireframe, setWireframe] = Ae.useState(false);
+    const [bgColor, setBgColor] = Ae.useState("#111122");
+    const [statusText, setStatusText] = Ae.useState("Ready");
+    const [dragOver, setDragOver] = Ae.useState(false);
+    const [polyCount, setPolyCount] = Ae.useState(0);
+    const [meshCount, setMeshCount] = Ae.useState(0);
+    const [boneCount, setBoneCount] = Ae.useState(0);
     // Material editor
-    const [selMaterialIdx, setSelMaterialIdx] = React.useState(0);
-    const [matRefresh, setMatRefresh] = React.useState(0);
+    const [selMaterialIdx, setSelMaterialIdx] = Ae.useState(0);
+    const [matRefresh, setMatRefresh] = Ae.useState(0);
     // AI panel
-    const [aiStatus, setAiStatus] = React.useState("");
-    const [aiBusy, setAiBusy] = React.useState(false);
+    const [aiStatus, setAiStatus] = Ae.useState("");
+    const [aiBusy, setAiBusy] = Ae.useState(false);
     // Blender 2.0 — viewport & editor
-    const [shadingMode, setShadingMode] = React.useState("solid");
-    const [editorMode, setEditorMode] = React.useState("object");
-    const [contextMenu, setContextMenu] = React.useState(null);
-    const [outlinerSearch, setOutlinerSearch] = React.useState("");
-    const [snapEnabled, setSnapEnabled] = React.useState(false);
-    const [snapGrid, setSnapGrid] = React.useState(1);
-    const [showSkeleton, setShowSkeleton] = React.useState(true);
-    const [addMenuOpen, setAddMenuOpen] = React.useState(null);
-    const [gizmoSpace, setGizmoSpace] = React.useState("world");
-    const [propTab, setPropTab] = React.useState("object");
-    const [fogEnabled, setFogEnabled] = React.useState(false);
-    const [fogColor, setFogColor] = React.useState("#111122");
-    const [fogNear, setFogNear] = React.useState(10);
-    const [fogFar, setFogFar] = React.useState(100);
-    const [showLightHelpers, setShowLightHelpers] = React.useState(true);
+    const [shadingMode, setShadingMode] = Ae.useState("solid");
+    const [editorMode, setEditorMode] = Ae.useState("object");
+    const [contextMenu, setContextMenu] = Ae.useState(null);
+    const [outlinerSearch, setOutlinerSearch] = Ae.useState("");
+    const [snapEnabled, setSnapEnabled] = Ae.useState(false);
+    const [snapGrid, setSnapGrid] = Ae.useState(1);
+    const [showSkeleton, setShowSkeleton] = Ae.useState(true);
+    const [addMenuOpen, setAddMenuOpen] = Ae.useState(null);
+    const [gizmoSpace, setGizmoSpace] = Ae.useState("world");
+    const [propTab, setPropTab] = Ae.useState("object");
+    const [fogEnabled, setFogEnabled] = Ae.useState(false);
+    const [fogColor, setFogColor] = Ae.useState("#111122");
+    const [fogNear, setFogNear] = Ae.useState(10);
+    const [fogFar, setFogFar] = Ae.useState(100);
+    const [showLightHelpers, setShowLightHelpers] = Ae.useState(true);
     // The root object that was loaded (mesh/character)
-    const rootObjectRef = React.useRef(null);
+    const rootObjectRef = Ae.useRef(null);
     // Active animation action
-    const activeActionRef = React.useRef(null);
+    const activeActionRef = Ae.useRef(null);
     // All loaded animation clips (for the current model)
-    const allClipsRef = React.useRef([]);
+    const allClipsRef = Ae.useRef([]);
     /* keep refs current */
-    const animTimeRef = React.useRef(animTime);
+    const animTimeRef = Ae.useRef(animTime);
     animTimeRef.current = animTime;
-    const isPlayingRef = React.useRef(isPlaying);
+    const isPlayingRef = Ae.useRef(isPlaying);
     isPlayingRef.current = isPlaying;
-    const animSpeedRef = React.useRef(animSpeed);
+    const animSpeedRef = Ae.useRef(animSpeed);
     animSpeedRef.current = animSpeed;
-    const loopAnimRef = React.useRef(loopAnim);
+    const loopAnimRef = Ae.useRef(loopAnim);
     loopAnimRef.current = loopAnim;
     /* ─────────────────────────────────────────
        Scene setup
        ───────────────────────────────────────── */
-    React.useEffect(() => {
+    Ae.useEffect(() => {
         const container = mountRef.current;
         if (!container)
             return;
@@ -279,7 +280,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ─────────────────────────────────────────
        Rebuild scene tree from Three.js scene
        ───────────────────────────────────────── */
-    const rebuildTree = React.useCallback(() => {
+    const rebuildTree = Ae.useCallback(() => {
         const scene = sceneRef.current;
         let polys = 0;
         let meshes = 0;
@@ -346,9 +347,9 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ─────────────────────────────────────────
        File loading
        ───────────────────────────────────────── */
-    const playClipRef = React.useRef(() => { });
-    const focusOnObjectRef = React.useRef(() => { });
-    const addObjectToScene = React.useCallback((obj, clips, filename) => {
+    const playClipRef = Ae.useRef(() => { });
+    const focusOnObjectRef = Ae.useRef(() => { });
+    const addObjectToScene = Ae.useCallback((obj, clips, filename) => {
         const scene = sceneRef.current;
         obj.traverse((child) => {
             if (child instanceof THREE__namespace.Mesh) {
@@ -395,7 +396,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         rebuildTree();
         setStatusText(`Loaded: ${filename} (${clips.length} animation(s))`);
     }, [rebuildTree]);
-    const loadFile = React.useCallback(async (file) => {
+    const loadFile = Ae.useCallback(async (file) => {
         var _a, _b, _c, _d, _e, _f;
         const name = file.name.toLowerCase();
         const ext = "." + name.split(".").pop();
@@ -514,7 +515,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             URL.revokeObjectURL(url);
         }
     }, [addObjectToScene]);
-    const mergeAnimationFBX = React.useCallback(async (file) => {
+    const mergeAnimationFBX = Ae.useCallback(async (file) => {
         var _a;
         const url = URL.createObjectURL(file);
         setStatusText(`Merging animations from ${file.name}...`);
@@ -555,7 +556,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ─────────────────────────────────────────
        Animation controls
        ───────────────────────────────────────── */
-    const playClip = React.useCallback((index) => {
+    const playClip = Ae.useCallback((index) => {
         const mixer = mixerRef.current;
         if (!mixer || index < 0 || index >= allClipsRef.current.length)
             return;
@@ -575,7 +576,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         setIsPlaying(true);
     }, []);
     playClipRef.current = playClip;
-    const togglePlay = React.useCallback(() => {
+    const togglePlay = Ae.useCallback(() => {
         if (activeAnimIdx < 0 && allClipsRef.current.length > 0) {
             playClip(0);
             return;
@@ -592,7 +593,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             setIsPlaying(true);
         }
     }, [activeAnimIdx, playClip]);
-    const stopAnim = React.useCallback(() => {
+    const stopAnim = Ae.useCallback(() => {
         const action = activeActionRef.current;
         if (action) {
             action.stop();
@@ -601,7 +602,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         setIsPlaying(false);
         setAnimTime(0);
     }, []);
-    const seekAnim = React.useCallback((t) => {
+    const seekAnim = Ae.useCallback((t) => {
         var _a;
         const action = activeActionRef.current;
         if (!action)
@@ -615,7 +616,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ─────────────────────────────────────────
        Camera helpers
        ───────────────────────────────────────── */
-    const focusOnObject = React.useCallback((obj) => {
+    const focusOnObject = Ae.useCallback((obj) => {
         const box = new THREE__namespace.Box3().setFromObject(obj);
         const center = box.getCenter(new THREE__namespace.Vector3());
         const size = box.getSize(new THREE__namespace.Vector3());
@@ -629,7 +630,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         }
     }, []);
     focusOnObjectRef.current = focusOnObject;
-    const setCameraPreset = React.useCallback((preset) => {
+    const setCameraPreset = Ae.useCallback((preset) => {
         const orbit = orbitRef.current;
         if (!orbit)
             return;
@@ -663,7 +664,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ─────────────────────────────────────────
        Selection & transform
        ───────────────────────────────────────── */
-    const selectObject = React.useCallback((node) => {
+    const selectObject = Ae.useCallback((node) => {
         var _a;
         setSelectedId((_a = node === null || node === void 0 ? void 0 : node.id) !== null && _a !== void 0 ? _a : null);
         const tc = transformRef.current;
@@ -677,29 +678,29 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             tc.detach();
         }
     }, [transformMode]);
-    React.useEffect(() => {
+    Ae.useEffect(() => {
         var _a;
         (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.setMode(transformMode);
     }, [transformMode]);
     /* ─────────────────────────────────────────
        Toggle helpers
        ───────────────────────────────────────── */
-    React.useEffect(() => {
+    Ae.useEffect(() => {
         const scene = sceneRef.current;
         const grid = scene.getObjectByName("__grid");
         if (grid)
             grid.visible = showGrid;
     }, [showGrid]);
-    React.useEffect(() => {
+    Ae.useEffect(() => {
         const scene = sceneRef.current;
         const axes = scene.getObjectByName("__axes");
         if (axes)
             axes.visible = showAxes;
     }, [showAxes]);
-    React.useEffect(() => {
+    Ae.useEffect(() => {
         sceneRef.current.background = new THREE__namespace.Color(bgColor);
     }, [bgColor]);
-    React.useEffect(() => {
+    Ae.useEffect(() => {
         const root = rootObjectRef.current;
         if (!root)
             return;
@@ -718,7 +719,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ─────────────────────────────────────────
        Viewport shading mode
        ───────────────────────────────────────── */
-    React.useEffect(() => {
+    Ae.useEffect(() => {
         const renderer = rendererRef.current;
         if (!renderer)
             return;
@@ -771,12 +772,12 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         }
     }, [shadingMode]);
     /* Gizmo space */
-    React.useEffect(() => {
+    Ae.useEffect(() => {
         var _a;
         (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.setSpace(gizmoSpace);
     }, [gizmoSpace]);
     /* Snap settings */
-    React.useEffect(() => {
+    Ae.useEffect(() => {
         const tc = transformRef.current;
         if (!tc)
             return;
@@ -792,7 +793,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         }
     }, [snapEnabled, snapGrid]);
     /* Skeleton helper */
-    React.useEffect(() => {
+    Ae.useEffect(() => {
         const scene = sceneRef.current;
         if (skeletonHelperRef.current) {
             scene.remove(skeletonHelperRef.current);
@@ -813,7 +814,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         }
     }, [showSkeleton, sceneTree]);
     /* Fog */
-    React.useEffect(() => {
+    Ae.useEffect(() => {
         if (fogEnabled) {
             sceneRef.current.fog = new THREE__namespace.Fog(fogColor, fogNear, fogFar);
         }
@@ -822,7 +823,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         }
     }, [fogEnabled, fogColor, fogNear, fogFar]);
     /* Light helpers visibility */
-    React.useEffect(() => {
+    Ae.useEffect(() => {
         sceneRef.current.traverse((obj) => {
             if (obj.name.startsWith("__helper_")) {
                 obj.visible = showLightHelpers;
@@ -832,16 +833,16 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ─────────────────────────────────────────
        Drag-and-drop
        ───────────────────────────────────────── */
-    const handleDragOver = React.useCallback((e) => {
+    const handleDragOver = Ae.useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
         setDragOver(true);
     }, []);
-    const handleDragLeave = React.useCallback((e) => {
+    const handleDragLeave = Ae.useCallback((e) => {
         e.preventDefault();
         setDragOver(false);
     }, []);
-    const handleDrop = React.useCallback((e) => {
+    const handleDrop = Ae.useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
         setDragOver(false);
@@ -856,14 +857,14 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ─────────────────────────────────────────
        Helpers
        ───────────────────────────────────────── */
-    const selectedNode = React.useMemo(() => (selectedId ? findNodeById(sceneTree, selectedId) : null), [selectedId, sceneTree]);
-    const selectedMaterials = React.useMemo(() => {
+    const selectedNode = Ae.useMemo(() => (selectedId ? findNodeById(sceneTree, selectedId) : null), [selectedId, sceneTree]);
+    const selectedMaterials = Ae.useMemo(() => {
         if (!selectedNode || !(selectedNode.object instanceof THREE__namespace.Mesh))
             return [];
         const m = selectedNode.object.material;
         return Array.isArray(m) ? m : [m];
     }, [selectedNode, matRefresh]);
-    const deleteSelected = React.useCallback(() => {
+    const deleteSelected = Ae.useCallback(() => {
         var _a;
         if (!selectedNode)
             return;
@@ -872,7 +873,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         setSelectedId(null);
         rebuildTree();
     }, [selectedNode, rebuildTree]);
-    const duplicateSelected = React.useCallback(() => {
+    const duplicateSelected = Ae.useCallback(() => {
         if (!selectedNode)
             return;
         const clone = selectedNode.object.clone(true);
@@ -885,7 +886,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ─────────────────────────────────────────
        Keyboard shortcuts
        ───────────────────────────────────────── */
-    React.useEffect(() => {
+    Ae.useEffect(() => {
         const handleKey = (e) => {
             var _a, _b, _c;
             const tag = (_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName;
@@ -993,14 +994,14 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ─────────────────────────────────────────
        File input handlers
        ───────────────────────────────────────── */
-    const handleFileInput = React.useCallback((e) => {
+    const handleFileInput = Ae.useCallback((e) => {
         const files = e.target.files;
         if (!files)
             return;
         Array.from(files).forEach(loadFile);
         e.target.value = "";
     }, [loadFile]);
-    const handleMergeInput = React.useCallback((e) => {
+    const handleMergeInput = Ae.useCallback((e) => {
         const files = e.target.files;
         if (!files)
             return;
@@ -1010,7 +1011,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ─────────────────────────────────────────
        Export functions
        ───────────────────────────────────────── */
-    const exportGLTF = React.useCallback((binary) => {
+    const exportGLTF = Ae.useCallback((binary) => {
         const root = rootObjectRef.current;
         if (!root) {
             setStatusText("Nothing to export");
@@ -1037,7 +1038,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             setStatusText(`Export error: ${String(err)}`);
         }, options);
     }, []);
-    const exportOBJ = React.useCallback(() => {
+    const exportOBJ = Ae.useCallback(() => {
         const root = rootObjectRef.current;
         if (!root) {
             setStatusText("Nothing to export");
@@ -1053,7 +1054,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         URL.revokeObjectURL(a.href);
         setStatusText("Exported OBJ successfully");
     }, []);
-    const exportSTL = React.useCallback((binary) => {
+    const exportSTL = Ae.useCallback((binary) => {
         const root = rootObjectRef.current;
         if (!root) {
             setStatusText("Nothing to export");
@@ -1075,7 +1076,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         URL.revokeObjectURL(a.href);
         setStatusText(`Exported STL${binary ? " (binary)" : ""} successfully`);
     }, []);
-    const exportPLY = React.useCallback((binary) => {
+    const exportPLY = Ae.useCallback((binary) => {
         const root = rootObjectRef.current;
         if (!root) {
             setStatusText("Nothing to export");
@@ -1099,7 +1100,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             setStatusText(`Exported PLY${binary ? " (binary)" : ""} successfully`);
         }, { binary });
     }, []);
-    const exportUSDZ = React.useCallback(async () => {
+    const exportUSDZ = Ae.useCallback(async () => {
         const root = rootObjectRef.current;
         if (!root) {
             setStatusText("Nothing to export");
@@ -1127,7 +1128,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ─────────────────────────────────────────
        Dispose & clear
        ───────────────────────────────────────── */
-    const disposeObject = React.useCallback((obj) => {
+    const disposeObject = Ae.useCallback((obj) => {
         obj.traverse((child) => {
             if (child.geometry) {
                 child.geometry.dispose();
@@ -1147,7 +1148,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             }
         });
     }, []);
-    const clearScene = React.useCallback(() => {
+    const clearScene = Ae.useCallback(() => {
         var _a;
         if (!window.confirm("Clear the entire scene? This cannot be undone."))
             return;
@@ -1185,7 +1186,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ─────────────────────────────────────────
        Save to Library
        ───────────────────────────────────────── */
-    const saveToLibrary = React.useCallback(() => {
+    const saveToLibrary = Ae.useCallback(() => {
         if (!onSaveToLibrary)
             return;
         const root = rootObjectRef.current;
@@ -1213,7 +1214,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ─────────────────────────────────────────
        Add Mesh / Light / Camera / Empty
        ───────────────────────────────────────── */
-    const addPrimitive = React.useCallback((type) => {
+    const addPrimitive = Ae.useCallback((type) => {
         let geo;
         switch (type) {
             case "cube":
@@ -1274,7 +1275,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         setStatusText(`Added ${mesh.name}`);
         setAddMenuOpen(null);
     }, [rebuildTree]);
-    const addSceneLight = React.useCallback((type) => {
+    const addSceneLight = Ae.useCallback((type) => {
         let light;
         switch (type) {
             case "point": {
@@ -1327,7 +1328,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         setStatusText(`Added ${light.name}`);
         setAddMenuOpen(null);
     }, [rebuildTree]);
-    const addCameraObject = React.useCallback(() => {
+    const addCameraObject = Ae.useCallback(() => {
         const cam = new THREE__namespace.PerspectiveCamera(50, 16 / 9, 0.1, 1000);
         cam.name = "Camera";
         cam.position.set(5, 3, 5);
@@ -1340,7 +1341,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         setStatusText("Added Camera");
         setAddMenuOpen(null);
     }, [rebuildTree]);
-    const addEmpty = React.useCallback((type) => {
+    const addEmpty = Ae.useCallback((type) => {
         const obj = new THREE__namespace.Object3D();
         obj.name = type === "arrows" ? "Empty_Arrows" : type === "cube_empty" ? "Empty_Cube" : "Empty";
         sceneRef.current.add(obj);
@@ -1356,7 +1357,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ─────────────────────────────────────────
        Raycaster click-to-select
        ───────────────────────────────────────── */
-    const handleViewportClick = React.useCallback((e) => {
+    const handleViewportClick = Ae.useCallback((e) => {
         if (editorMode !== "object")
             return;
         if (!mountRef.current || !rendererRef.current || !cameraRef.current)
@@ -1392,12 +1393,12 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ─────────────────────────────────────────
        Context menu
        ───────────────────────────────────────── */
-    const handleContextMenu = React.useCallback((e) => {
+    const handleContextMenu = Ae.useCallback((e) => {
         e.preventDefault();
         setContextMenu({ x: e.clientX, y: e.clientY });
     }, []);
-    const closeContextMenu = React.useCallback(() => setContextMenu(null), []);
-    React.useEffect(() => {
+    const closeContextMenu = Ae.useCallback(() => setContextMenu(null), []);
+    Ae.useEffect(() => {
         if (!contextMenu)
             return;
         const close = () => setContextMenu(null);
@@ -1407,7 +1408,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ─────────────────────────────────────────
        AI animation from video
        ───────────────────────────────────────── */
-    const handleAIVideo = React.useCallback(async (e) => {
+    const handleAIVideo = Ae.useCallback(async (e) => {
         var _a;
         const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
         if (!file)
@@ -1453,14 +1454,197 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ─────────────────────────────────────────
        Node helpers
        ───────────────────────────────────────── */
-    const toggleNodeVisibility = React.useCallback((node) => {
+    const toggleNodeVisibility = Ae.useCallback((node) => {
         node.object.visible = !node.object.visible;
         rebuildTree();
     }, [rebuildTree]);
-    const toggleNodeExpanded = React.useCallback((node) => {
+    const toggleNodeExpanded = Ae.useCallback((node) => {
         node.expanded = !node.expanded;
         setSceneTree((prev) => [...prev]);
     }, []);
+    /* ─────────────────────────────────────────
+       Undo / Redo
+       ───────────────────────────────────────── */
+    const undoRedoRef = Ae.useRef(new modelEditorUtils.UndoRedoStack());
+    const [undoRedoVer, setUndoRedoVer] = Ae.useState(0);
+    const pushUndo = Ae.useCallback((action) => {
+        undoRedoRef.current.push(action);
+        setUndoRedoVer((v) => v + 1);
+    }, []);
+    const undo = Ae.useCallback(() => {
+        const label = undoRedoRef.current.undo();
+        if (label) {
+            setStatusText(`Undo: ${label}`);
+            rebuildTree();
+        }
+        setUndoRedoVer((v) => v + 1);
+    }, [rebuildTree]);
+    const redo = Ae.useCallback(() => {
+        const label = undoRedoRef.current.redo();
+        if (label) {
+            setStatusText(`Redo: ${label}`);
+            rebuildTree();
+        }
+        setUndoRedoVer((v) => v + 1);
+    }, [rebuildTree]);
+    const canUndo = undoRedoRef.current.canUndo();
+    const canRedo = undoRedoRef.current.canRedo();
+    const undoLabel = undoRedoRef.current.undoLabel;
+    const redoLabel = undoRedoRef.current.redoLabel;
+    // Keyboard shortcuts for undo/redo
+    Ae.useEffect(() => {
+        const handleKeyDown = (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey) {
+                e.preventDefault();
+                undo();
+            }
+            else if ((e.ctrlKey || e.metaKey) && (e.key === "y" || (e.key === "z" && e.shiftKey))) {
+                e.preventDefault();
+                redo();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [undo, redo]);
+    /* ─────────────────────────────────────────
+       Batch Import
+       ───────────────────────────────────────── */
+    const loadFiles = Ae.useCallback(async (files) => {
+        const fileArray = Array.from(files).filter((f) => {
+            const ext = f.name.substring(f.name.lastIndexOf(".")).toLowerCase();
+            return modelEditorTypes.SUPPORTED_EXTENSIONS.includes(ext);
+        });
+        if (fileArray.length === 0) {
+            setStatusText("No supported files found");
+            return;
+        }
+        setStatusText(`Importing ${fileArray.length} file(s)...`);
+        let loaded = 0;
+        for (const file of fileArray) {
+            try {
+                await loadFile(file);
+                loaded++;
+                setStatusText(`Imported ${loaded}/${fileArray.length}: ${file.name}`);
+            }
+            catch (err) {
+                log.error(`Failed to import ${file.name}:`, err);
+            }
+        }
+        setStatusText(`Batch import complete: ${loaded}/${fileArray.length} files loaded`);
+    }, [loadFile]);
+    /* ─────────────────────────────────────────
+       PBR Presets
+       ───────────────────────────────────────── */
+    const applyPreset = Ae.useCallback((preset) => {
+        const node = selectedNode;
+        if (!node || !(node.object instanceof THREE__namespace.Mesh)) {
+            setStatusText("Select a mesh to apply material preset");
+            return;
+        }
+        const mesh = node.object;
+        const oldMaterial = Array.isArray(mesh.material) ? mesh.material[selMaterialIdx] : mesh.material;
+        if (!oldMaterial)
+            return;
+        // Save for undo
+        const oldClone = oldMaterial.clone();
+        const materialIdx = selMaterialIdx;
+        const newMaterial = modelEditorUtils.createMaterialFromPreset(preset);
+        // Copy existing textures if present
+        if (oldMaterial instanceof THREE__namespace.MeshStandardMaterial) {
+            if (oldMaterial.map)
+                newMaterial.map = oldMaterial.map;
+            if (oldMaterial.normalMap)
+                newMaterial.normalMap = oldMaterial.normalMap;
+            if (oldMaterial.aoMap)
+                newMaterial.aoMap = oldMaterial.aoMap;
+        }
+        if (Array.isArray(mesh.material)) {
+            mesh.material[materialIdx] = newMaterial;
+        }
+        else {
+            mesh.material = newMaterial;
+        }
+        pushUndo({
+            label: `Apply ${preset.name} preset`,
+            undo: () => {
+                if (Array.isArray(mesh.material)) {
+                    mesh.material[materialIdx] = oldClone;
+                }
+                else {
+                    mesh.material = oldClone;
+                }
+            },
+            redo: () => {
+                if (Array.isArray(mesh.material)) {
+                    mesh.material[materialIdx] = newMaterial;
+                }
+                else {
+                    mesh.material = newMaterial;
+                }
+            },
+        });
+        setMatRefresh((v) => v + 1);
+        setStatusText(`Applied ${preset.name} preset`);
+    }, [selectedNode, selMaterialIdx, pushUndo]);
+    /* ─────────────────────────────────────────
+       LOD Generation
+       ───────────────────────────────────────── */
+    const generateSelectedLOD = Ae.useCallback(() => {
+        const node = selectedNode;
+        if (!node || !(node.object instanceof THREE__namespace.Mesh)) {
+            setStatusText("Select a mesh to generate LOD");
+            return;
+        }
+        const mesh = node.object;
+        const parent = mesh.parent || sceneRef.current;
+        const lod = modelEditorUtils.generateLOD(mesh);
+        parent.remove(mesh);
+        parent.add(lod);
+        pushUndo({
+            label: `Generate LOD for ${mesh.name}`,
+            undo: () => { parent.remove(lod); parent.add(mesh); },
+            redo: () => { parent.remove(mesh); parent.add(lod); },
+        });
+        rebuildTree();
+        setStatusText(`Generated LOD for ${mesh.name} (4 levels)`);
+    }, [selectedNode, pushUndo, rebuildTree]);
+    /* ─────────────────────────────────────────
+       Instancing
+       ───────────────────────────────────────── */
+    const convertSelectedToInstanced = Ae.useCallback(() => {
+        const root = rootObjectRef.current || sceneRef.current;
+        const result = modelEditorUtils.convertToInstanced(root);
+        if (result.created === 0) {
+            setStatusText("No duplicate meshes found to instance");
+            return;
+        }
+        rebuildTree();
+        setStatusText(`Created ${result.created} instanced meshes, removed ${result.removed} duplicates`);
+    }, [rebuildTree]);
+    /* ── HDRI Environment ── */
+    const applyHDRI = Ae.useCallback((preset) => {
+        const renderer = rendererRef.current;
+        if (!renderer)
+            return;
+        modelEditorUtils.applyHDRIPreset(sceneRef.current, renderer, preset);
+        setBgColor(`#${new THREE__namespace.Color(preset.bgColor).getHexString()}`);
+        if (preset.fog) {
+            setFogEnabled(true);
+            setFogColor(`#${new THREE__namespace.Color(preset.fog.color).getHexString()}`);
+            setFogNear(preset.fog.near);
+            setFogFar(preset.fog.far);
+        }
+        else {
+            setFogEnabled(false);
+        }
+        setStatusText(`Environment: ${preset.name}`);
+    }, []);
+    /* ── Snap ── */
+    const snapPoint = Ae.useCallback((point) => {
+        const root = rootObjectRef.current || sceneRef.current;
+        const modes = snapEnabled ? ["vertex", "edge", "grid"] : ["grid"];
+        return modelEditorUtils.snapMulti(point, root, snapGrid, modes, 0.5);
+    }, [snapEnabled, snapGrid]);
     /* ═══════════════════════════════════════════
        Return API
        ═══════════════════════════════════════════ */
@@ -1574,6 +1758,26 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         toggleNodeVisibility,
         toggleNodeExpanded,
         setStatusText,
+        // undo/redo
+        undo,
+        redo,
+        canUndo,
+        canRedo,
+        undoLabel,
+        redoLabel,
+        // batch import
+        loadFiles,
+        // PBR presets
+        pbrPresets: modelEditorUtils.PBR_PRESETS,
+        applyPreset,
+        // LOD & instancing
+        generateSelectedLOD,
+        convertSelectedToInstanced,
+        // HDRI environment
+        hdriPresets: modelEditorUtils.HDRI_PRESETS,
+        applyHDRIPreset: applyHDRI,
+        // Snap
+        snapPoint,
     };
 }