@nice2dev/ui-3d 1.1.0 → 1.1.1

package/dist/esm/model/useModelEditor.js

@@ -2,25 +2,25 @@ import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
-import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
 import { OBJExporter } from 'three/examples/jsm/exporters/OBJExporter.js';
-import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js';
 import { PLYExporter } from 'three/examples/jsm/exporters/PLYExporter.js';
+import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js';
 import { USDZExporter } from 'three/examples/jsm/exporters/USDZExporter.js';
-import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
-import { ColladaLoader } from 'three/examples/jsm/loaders/ColladaLoader.js';
-import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
-import { PLYLoader } from 'three/examples/jsm/loaders/PLYLoader.js';
-import { TDSLoader } from 'three/examples/jsm/loaders/TDSLoader.js';
 import { ThreeMFLoader } from 'three/examples/jsm/loaders/3MFLoader.js';
 import { AMFLoader } from 'three/examples/jsm/loaders/AMFLoader.js';
-import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader.js';
-import { VTKLoader } from 'three/examples/jsm/loaders/VTKLoader.js';
-import { VRMLLoader } from 'three/examples/jsm/loaders/VRMLLoader.js';
+import { ColladaLoader } from 'three/examples/jsm/loaders/ColladaLoader.js';
+import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
 import { GCodeLoader } from 'three/examples/jsm/loaders/GCodeLoader.js';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
+import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader.js';
+import { PLYLoader } from 'three/examples/jsm/loaders/PLYLoader.js';
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
 import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader.js';
+import { TDSLoader } from 'three/examples/jsm/loaders/TDSLoader.js';
+import { VRMLLoader } from 'three/examples/jsm/loaders/VRMLLoader.js';
+import { VTKLoader } from 'three/examples/jsm/loaders/VTKLoader.js';
 import { SUPPORTED_EXTENSIONS, pose3dToClip } from './modelEditorTypes.js';
 import { UndoRedoStack, createMaterialFromPreset, generateLOD, convertToInstanced, applyHDRIPreset, snapMulti, HDRI_PRESETS, PBR_PRESETS } from './modelEditorUtils.js';
 
@@ -38,11 +38,13 @@ const nid = () => `n${++_nid}`;
 /* ── Pure helper — extracted outside the hook for stable identity ── */
 function findNodeById(nodes, id) {
     for (const n of nodes) {
-        if (n.id === id)
+        if (n.id === id) {
             return n;
+        }
         const found = findNodeById(n.children, id);
-        if (found)
+        if (found) {
             return found;
+        }
     }
     return null;
 }
@@ -68,7 +70,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ── state ── */
     const [sceneTree, setSceneTree] = useState([]);
     const [selectedId, setSelectedId] = useState(null);
-    const [transformMode, setTransformMode] = useState("translate");
+    const [transformMode, setTransformMode] = useState('translate');
     const [animations, setAnimations] = useState([]);
     const [activeAnimIdx, setActiveAnimIdx] = useState(-1);
     const [isPlaying, setIsPlaying] = useState(false);
@@ -80,8 +82,8 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     const [showGrid, setShowGrid] = useState(true);
     const [showAxes, setShowAxes] = useState(true);
     const [wireframe, setWireframe] = useState(false);
-    const [bgColor, setBgColor] = useState("#111122");
-    const [statusText, setStatusText] = useState("Ready");
+    const [bgColor, setBgColor] = useState('#111122');
+    const [statusText, setStatusText] = useState('Ready');
     const [dragOver, setDragOver] = useState(false);
     const [polyCount, setPolyCount] = useState(0);
     const [meshCount, setMeshCount] = useState(0);
@@ -90,21 +92,21 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     const [selMaterialIdx, setSelMaterialIdx] = useState(0);
     const [matRefresh, setMatRefresh] = useState(0);
     // AI panel
-    const [aiStatus, setAiStatus] = useState("");
+    const [aiStatus, setAiStatus] = useState('');
     const [aiBusy, setAiBusy] = useState(false);
     // Blender 2.0 — viewport & editor
-    const [shadingMode, setShadingMode] = useState("solid");
-    const [editorMode, setEditorMode] = useState("object");
+    const [shadingMode, setShadingMode] = useState('solid');
+    const [editorMode, setEditorMode] = useState('object');
     const [contextMenu, setContextMenu] = useState(null);
-    const [outlinerSearch, setOutlinerSearch] = useState("");
+    const [outlinerSearch, setOutlinerSearch] = useState('');
     const [snapEnabled, setSnapEnabled] = useState(false);
     const [snapGrid, setSnapGrid] = useState(1);
     const [showSkeleton, setShowSkeleton] = useState(true);
     const [addMenuOpen, setAddMenuOpen] = useState(null);
-    const [gizmoSpace, setGizmoSpace] = useState("world");
-    const [propTab, setPropTab] = useState("object");
+    const [gizmoSpace, setGizmoSpace] = useState('world');
+    const [propTab, setPropTab] = useState('object');
     const [fogEnabled, setFogEnabled] = useState(false);
-    const [fogColor, setFogColor] = useState("#111122");
+    const [fogColor, setFogColor] = useState('#111122');
     const [fogNear, setFogNear] = useState(10);
     const [fogFar, setFogFar] = useState(100);
     const [showLightHelpers, setShowLightHelpers] = useState(true);
@@ -128,8 +130,9 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
        ───────────────────────────────────────── */
     useEffect(() => {
         const container = mountRef.current;
-        if (!container)
+        if (!container) {
             return;
+        }
         const scene = sceneRef.current;
         const camera = cameraRef.current;
         // Renderer
@@ -146,13 +149,13 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         camera.position.set(3, 2, 5);
         camera.lookAt(0, 0, 0);
         // Scene background
-        scene.background = new THREE.Color("#111122");
+        scene.background = new THREE.Color('#111122');
         // Lights
         const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-        ambientLight.name = "__ambient";
+        ambientLight.name = '__ambient';
         scene.add(ambientLight);
         const dirLight = new THREE.DirectionalLight(0xffffff, 1.2);
-        dirLight.name = "__dirLight";
+        dirLight.name = '__dirLight';
         dirLight.position.set(5, 8, 5);
         dirLight.castShadow = true;
         dirLight.shadow.mapSize.set(2048, 2048);
@@ -164,21 +167,21 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         dirLight.shadow.camera.bottom = -10;
         scene.add(dirLight);
         const hemiLight = new THREE.HemisphereLight(0x8888ff, 0x444422, 0.4);
-        hemiLight.name = "__hemiLight";
+        hemiLight.name = '__hemiLight';
         scene.add(hemiLight);
         // Ground plane
         const ground = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), new THREE.ShadowMaterial({ opacity: 0.15 }));
-        ground.name = "__ground";
+        ground.name = '__ground';
         ground.rotation.x = -Math.PI / 2;
         ground.receiveShadow = true;
         scene.add(ground);
         // Grid
         const grid = new THREE.GridHelper(20, 20, 0x333355, 0x22223a);
-        grid.name = "__grid";
+        grid.name = '__grid';
         scene.add(grid);
         // Axes
         const axes = new THREE.AxesHelper(2);
-        axes.name = "__axes";
+        axes.name = '__axes';
         scene.add(axes);
         // Orbit controls
         const orbit = new OrbitControls(camera, renderer.domElement);
@@ -190,9 +193,9 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         orbitRef.current = orbit;
         // Transform controls
         const tc = new TransformControls(camera, renderer.domElement);
-        tc.name = "__transformControls";
+        tc.name = '__transformControls';
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        tc.addEventListener("dragging-changed", ((e) => {
+        tc.addEventListener('dragging-changed', ((e) => {
             orbit.enabled = !e.value;
         }));
         scene.add(tc);
@@ -201,8 +204,9 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         const onResize = () => {
             const w = container.clientWidth;
             const h = container.clientHeight;
-            if (w === 0 || h === 0)
+            if (w === 0 || h === 0) {
                 return;
+            }
             camera.aspect = w / h;
             camera.updateProjectionMatrix();
             renderer.setSize(w, h);
@@ -235,8 +239,9 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             ro.disconnect();
             const scn = sceneRef.current;
             scn.traverse((obj) => {
-                if (obj.geometry)
+                if (obj.geometry) {
                     obj.geometry.dispose();
+                }
                 if (obj.material) {
                     const mats = Array.isArray(obj.material)
                         ? obj.material
@@ -254,7 +259,6 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
                 container.removeChild(renderer.domElement);
             }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     /* ─────────────────────────────────────────
        Rebuild scene tree from Three.js scene
@@ -266,15 +270,18 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         let bones = 0;
         const walk = (obj, depth) => {
             var _a, _b;
-            if (obj.name.startsWith("__"))
+            if (obj.name.startsWith('__')) {
                 return null;
-            if (obj.type === "TransformControlsPlane" || obj.type === "TransformControlsGizmo")
+            }
+            if (obj.type === 'TransformControlsPlane' || obj.type === 'TransformControlsGizmo') {
                 return null;
-            if ("isTransformControls" in obj)
+            }
+            if ('isTransformControls' in obj) {
                 return null;
-            let nodeType = "group";
+            }
+            let nodeType = 'group';
             if (obj instanceof THREE.Mesh) {
-                nodeType = "mesh";
+                nodeType = 'mesh';
                 meshes++;
                 const geo = obj.geometry;
                 if (geo) {
@@ -283,27 +290,28 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
                 }
             }
             else if (obj instanceof THREE.Bone) {
-                nodeType = "bone";
+                nodeType = 'bone';
                 bones++;
             }
             else if (obj instanceof THREE.Light) {
-                nodeType = "light";
+                nodeType = 'light';
             }
             else if (obj instanceof THREE.Camera) {
-                nodeType = "camera";
+                nodeType = 'camera';
             }
-            else if (obj instanceof THREE.GridHelper ||
-                obj instanceof THREE.AxesHelper) {
-                nodeType = "helper";
+            else if (obj instanceof THREE.GridHelper || obj instanceof THREE.AxesHelper) {
+                nodeType = 'helper';
             }
             const children = [];
             for (const c of obj.children) {
                 const cn = walk(c, depth + 1);
-                if (cn)
+                if (cn) {
                     children.push(cn);
+                }
             }
             return {
-                id: obj.userData.__nodeId || ((obj.userData.__nodeId = nid()), obj.userData.__nodeId),
+                id: obj.userData.__nodeId ||
+                    ((obj.userData.__nodeId = nid()), obj.userData.__nodeId),
                 name: obj.name || obj.type,
                 type: nodeType,
                 object: obj,
@@ -315,8 +323,9 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         const roots = [];
         for (const c of scene.children) {
             const n = walk(c, 0);
-            if (n)
+            if (n) {
                 roots.push(n);
+            }
         }
         setSceneTree(roots);
         setPolyCount(Math.round(polys));
@@ -357,7 +366,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             const mixer = new THREE.AnimationMixer(obj);
             mixerRef.current = mixer;
             const newAnims = clips.map((c) => ({
-                name: c.name || "Animation",
+                name: c.name || 'Animation',
                 clip: c,
                 duration: c.duration,
                 source: filename,
@@ -378,70 +387,78 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     const loadFile = useCallback(async (file) => {
         var _a, _b, _c, _d, _e, _f;
         const name = file.name.toLowerCase();
-        const ext = "." + name.split(".").pop();
+        const ext = '.' + name.split('.').pop();
         const url = URL.createObjectURL(file);
         setStatusText(`Loading ${file.name}...`);
         try {
-            if (ext === ".fbx") {
+            if (ext === '.fbx') {
                 const loader = new FBXLoader();
                 const obj = await new Promise((res, rej) => loader.load(url, res, undefined, rej));
                 addObjectToScene(obj, (_a = obj.animations) !== null && _a !== void 0 ? _a : [], file.name);
             }
-            else if (ext === ".glb" || ext === ".gltf") {
+            else if (ext === '.glb' || ext === '.gltf') {
                 const loader = new GLTFLoader();
                 const gltf = await new Promise((res, rej) => loader.load(url, res, undefined, rej));
                 addObjectToScene(gltf.scene, (_b = gltf.animations) !== null && _b !== void 0 ? _b : [], file.name);
             }
-            else if (ext === ".obj") {
+            else if (ext === '.obj') {
                 const loader = new OBJLoader();
                 const obj = await new Promise((res, rej) => loader.load(url, res, undefined, rej));
                 addObjectToScene(obj, [], file.name);
             }
-            else if (ext === ".dae") {
+            else if (ext === '.dae') {
                 const loader = new ColladaLoader();
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const collada = await new Promise((res, rej) => loader.load(url, res, undefined, rej));
+                const collada = await new Promise((res, rej) => 
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any -- ColladaLoader callback type widens beyond { scene: Group }
+                loader.load(url, res, undefined, rej));
                 addObjectToScene(collada.scene, (_d = (_c = collada.scene) === null || _c === void 0 ? void 0 : _c.animations) !== null && _d !== void 0 ? _d : [], file.name);
             }
-            else if (ext === ".stl") {
+            else if (ext === '.stl') {
                 const loader = new STLLoader();
                 const geo = await new Promise((res, rej) => loader.load(url, res, undefined, rej));
-                const mat = new THREE.MeshStandardMaterial({ color: 0x888888, metalness: 0.3, roughness: 0.6 });
+                const mat = new THREE.MeshStandardMaterial({
+                    color: 0x888888,
+                    metalness: 0.3,
+                    roughness: 0.6,
+                });
                 const mesh = new THREE.Mesh(geo, mat);
                 mesh.name = file.name;
                 addObjectToScene(mesh, [], file.name);
             }
-            else if (ext === ".ply") {
+            else if (ext === '.ply') {
                 const loader = new PLYLoader();
                 const geo = await new Promise((res, rej) => loader.load(url, res, undefined, rej));
                 geo.computeVertexNormals();
-                const mat = new THREE.MeshStandardMaterial({ color: 0x888888, vertexColors: geo.hasAttribute("color") });
+                const mat = new THREE.MeshStandardMaterial({
+                    color: 0x888888,
+                    vertexColors: geo.hasAttribute('color'),
+                });
                 const mesh = new THREE.Mesh(geo, mat);
                 mesh.name = file.name;
                 addObjectToScene(mesh, [], file.name);
             }
-            else if (ext === ".3ds") {
+            else if (ext === '.3ds') {
                 const loader = new TDSLoader();
                 const obj = await new Promise((res, rej) => loader.load(url, res, undefined, rej));
                 addObjectToScene(obj, [], file.name);
             }
-            else if (ext === ".3mf") {
+            else if (ext === '.3mf') {
                 const loader = new ThreeMFLoader();
                 const obj = await new Promise((res, rej) => loader.load(url, res, undefined, rej));
                 addObjectToScene(obj, [], file.name);
             }
-            else if (ext === ".amf") {
+            else if (ext === '.amf') {
                 const loader = new AMFLoader();
                 const obj = await new Promise((res, rej) => loader.load(url, res, undefined, rej));
                 addObjectToScene(obj, [], file.name);
             }
-            else if (ext === ".pcd") {
+            else if (ext === '.pcd') {
                 const loader = new PCDLoader();
                 const points = await new Promise((res, rej) => loader.load(url, res, undefined, rej));
                 points.name = file.name;
                 addObjectToScene(points, [], file.name);
             }
-            else if (ext === ".vtk" || ext === ".vtp") {
+            else if (ext === '.vtk' || ext === '.vtp') {
                 const loader = new VTKLoader();
                 const geo = await new Promise((res, rej) => loader.load(url, res, undefined, rej));
                 geo.computeVertexNormals();
@@ -450,31 +467,36 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
                 mesh.name = file.name;
                 addObjectToScene(mesh, [], file.name);
             }
-            else if (ext === ".wrl" || ext === ".vrml") {
+            else if (ext === '.wrl' || ext === '.vrml') {
                 const loader = new VRMLLoader();
                 const scn = await new Promise((res, rej) => loader.load(url, res, undefined, rej));
                 const group = new THREE.Group();
                 group.name = file.name;
-                while (scn.children.length)
+                while (scn.children.length) {
                     group.add(scn.children[0]);
+                }
                 addObjectToScene(group, [], file.name);
             }
-            else if (ext === ".gcode") {
+            else if (ext === '.gcode') {
                 const loader = new GCodeLoader();
                 const obj = await new Promise((res, rej) => loader.load(url, res, undefined, rej));
                 addObjectToScene(obj, [], file.name);
             }
-            else if (ext === ".svg") {
+            else if (ext === '.svg') {
                 const loader = new SVGLoader();
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const data = await new Promise((res, rej) => loader.load(url, res, undefined, rej));
+                const data = await new Promise((res, rej) => 
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any -- SVGLoader callback type widens beyond { paths: SVGResultPaths[] }
+                loader.load(url, res, undefined, rej));
                 const group = new THREE.Group();
                 group.name = file.name;
                 for (const path of data.paths) {
                     const shapes2 = SVGLoader.createShapes(path);
                     for (const shape of shapes2) {
                         const geo = new THREE.ExtrudeGeometry(shape, { depth: 2, bevelEnabled: false });
-                        const mat = new THREE.MeshStandardMaterial({ color: ((_f = (_e = path.color) === null || _e === void 0 ? void 0 : _e.getHex) === null || _f === void 0 ? void 0 : _f.call(_e)) || 0x888888, side: THREE.DoubleSide });
+                        const mat = new THREE.MeshStandardMaterial({
+                            color: ((_f = (_e = path.color) === null || _e === void 0 ? void 0 : _e.getHex) === null || _f === void 0 ? void 0 : _f.call(_e)) || 0x888888,
+                            side: THREE.DoubleSide,
+                        });
                         const mesh = new THREE.Mesh(geo, mat);
                         group.add(mesh);
                     }
@@ -487,7 +509,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             }
         }
         catch (err) {
-            log.error("Load error:", err);
+            log.error('Load error:', err);
             setStatusText(`Error loading ${file.name}: ${String(err)}`);
         }
         finally {
@@ -508,14 +530,14 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             }
             const root = rootObjectRef.current;
             if (!root) {
-                setStatusText("No model loaded — load a base model first");
+                setStatusText('No model loaded — load a base model first');
                 return;
             }
             if (!mixerRef.current) {
                 mixerRef.current = new THREE.AnimationMixer(root);
             }
             const newAnims = clips.map((c) => ({
-                name: c.name || file.name.replace(/\.[^.]+$/, ""),
+                name: c.name || file.name.replace(/\.[^.]+$/, ''),
                 clip: c,
                 duration: c.duration,
                 source: file.name,
@@ -525,7 +547,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             setStatusText(`Merged ${clips.length} animation(s) from ${file.name}`);
         }
         catch (err) {
-            log.error("Merge error:", err);
+            log.error('Merge error:', err);
             setStatusText(`Error merging ${file.name}: ${String(err)}`);
         }
         finally {
@@ -537,8 +559,9 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
        ───────────────────────────────────────── */
     const playClip = useCallback((index) => {
         const mixer = mixerRef.current;
-        if (!mixer || index < 0 || index >= allClipsRef.current.length)
+        if (!mixer || index < 0 || index >= allClipsRef.current.length) {
             return;
+        }
         if (activeActionRef.current) {
             activeActionRef.current.stop();
         }
@@ -561,8 +584,9 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             return;
         }
         const action = activeActionRef.current;
-        if (!action)
+        if (!action) {
             return;
+        }
         if (isPlayingRef.current) {
             action.paused = true;
             setIsPlaying(false);
@@ -584,8 +608,9 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     const seekAnim = useCallback((t) => {
         var _a;
         const action = activeActionRef.current;
-        if (!action)
+        if (!action) {
             return;
+        }
         action.time = t;
         action.paused = true;
         setAnimTime(t);
@@ -611,31 +636,33 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     focusOnObjectRef.current = focusOnObject;
     const setCameraPreset = useCallback((preset) => {
         const orbit = orbitRef.current;
-        if (!orbit)
+        if (!orbit) {
             return;
+        }
         const target = orbit.target.clone();
         const d = cameraRef.current.position.distanceTo(target);
         const pos = new THREE.Vector3();
         switch (preset) {
-            case "front":
+            case 'front':
                 pos.set(0, 0, d);
                 break;
-            case "back":
+            case 'back':
                 pos.set(0, 0, -d);
                 break;
-            case "left":
+            case 'left':
                 pos.set(-d, 0, 0);
                 break;
-            case "right":
+            case 'right':
                 pos.set(d, 0, 0);
                 break;
-            case "top":
+            case 'top':
                 pos.set(0, d, 0.001);
                 break;
-            case "bottom":
+            case 'bottom':
                 pos.set(0, -d, 0.001);
                 break;
-            default: return;
+            default:
+                return;
         }
         cameraRef.current.position.copy(target.clone().add(pos));
         orbit.update();
@@ -647,9 +674,10 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         var _a;
         setSelectedId((_a = node === null || node === void 0 ? void 0 : node.id) !== null && _a !== void 0 ? _a : null);
         const tc = transformRef.current;
-        if (!tc)
+        if (!tc) {
             return;
-        if (node && node.type !== "helper") {
+        }
+        if (node && node.type !== 'helper') {
             tc.attach(node.object);
             tc.setMode(transformMode);
         }
@@ -666,31 +694,33 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
        ───────────────────────────────────────── */
     useEffect(() => {
         const scene = sceneRef.current;
-        const grid = scene.getObjectByName("__grid");
-        if (grid)
+        const grid = scene.getObjectByName('__grid');
+        if (grid) {
             grid.visible = showGrid;
+        }
     }, [showGrid]);
     useEffect(() => {
         const scene = sceneRef.current;
-        const axes = scene.getObjectByName("__axes");
-        if (axes)
+        const axes = scene.getObjectByName('__axes');
+        if (axes) {
             axes.visible = showAxes;
+        }
     }, [showAxes]);
     useEffect(() => {
         sceneRef.current.background = new THREE.Color(bgColor);
     }, [bgColor]);
     useEffect(() => {
         const root = rootObjectRef.current;
-        if (!root)
+        if (!root) {
             return;
+        }
         root.traverse((child) => {
             if (child instanceof THREE.Mesh) {
-                const mats = Array.isArray(child.material)
-                    ? child.material
-                    : [child.material];
+                const mats = Array.isArray(child.material) ? child.material : [child.material];
                 mats.forEach((m) => {
-                    if ("wireframe" in m)
+                    if ('wireframe' in m) {
                         m.wireframe = wireframe;
+                    }
                 });
             }
         });
@@ -700,49 +730,62 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
        ───────────────────────────────────────── */
     useEffect(() => {
         const renderer = rendererRef.current;
-        if (!renderer)
+        if (!renderer) {
             return;
+        }
         const scene = sceneRef.current;
         switch (shadingMode) {
-            case "wireframe":
+            case 'wireframe':
                 scene.traverse((obj) => {
-                    if (obj instanceof THREE.Mesh && !obj.name.startsWith("__")) {
+                    if (obj instanceof THREE.Mesh && !obj.name.startsWith('__')) {
                         const mats = Array.isArray(obj.material) ? obj.material : [obj.material];
-                        mats.forEach((m) => { if ("wireframe" in m)
-                            m.wireframe = true; });
+                        mats.forEach((m) => {
+                            if ('wireframe' in m) {
+                                m.wireframe = true;
+                            }
+                        });
                     }
                 });
                 renderer.toneMapping = THREE.NoToneMapping;
                 renderer.toneMappingExposure = 1;
                 break;
-            case "solid":
+            case 'solid':
                 scene.traverse((obj) => {
-                    if (obj instanceof THREE.Mesh && !obj.name.startsWith("__")) {
+                    if (obj instanceof THREE.Mesh && !obj.name.startsWith('__')) {
                         const mats = Array.isArray(obj.material) ? obj.material : [obj.material];
-                        mats.forEach((m) => { if ("wireframe" in m)
-                            m.wireframe = false; });
+                        mats.forEach((m) => {
+                            if ('wireframe' in m) {
+                                m.wireframe = false;
+                            }
+                        });
                     }
                 });
                 renderer.toneMapping = THREE.NoToneMapping;
                 renderer.toneMappingExposure = 1;
                 break;
-            case "material":
+            case 'material':
                 scene.traverse((obj) => {
-                    if (obj instanceof THREE.Mesh && !obj.name.startsWith("__")) {
+                    if (obj instanceof THREE.Mesh && !obj.name.startsWith('__')) {
                         const mats = Array.isArray(obj.material) ? obj.material : [obj.material];
-                        mats.forEach((m) => { if ("wireframe" in m)
-                            m.wireframe = false; });
+                        mats.forEach((m) => {
+                            if ('wireframe' in m) {
+                                m.wireframe = false;
+                            }
+                        });
                     }
                 });
                 renderer.toneMapping = THREE.ACESFilmicToneMapping;
                 renderer.toneMappingExposure = 1.2;
                 break;
-            case "rendered":
+            case 'rendered':
                 scene.traverse((obj) => {
-                    if (obj instanceof THREE.Mesh && !obj.name.startsWith("__")) {
+                    if (obj instanceof THREE.Mesh && !obj.name.startsWith('__')) {
                         const mats = Array.isArray(obj.material) ? obj.material : [obj.material];
-                        mats.forEach((m) => { if ("wireframe" in m)
-                            m.wireframe = false; });
+                        mats.forEach((m) => {
+                            if ('wireframe' in m) {
+                                m.wireframe = false;
+                            }
+                        });
                     }
                 });
                 renderer.toneMapping = THREE.ACESFilmicToneMapping;
@@ -758,8 +801,9 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* Snap settings */
     useEffect(() => {
         const tc = transformRef.current;
-        if (!tc)
+        if (!tc) {
             return;
+        }
         if (snapEnabled) {
             tc.setTranslationSnap(snapGrid);
             tc.setRotationSnap(THREE.MathUtils.degToRad(15));
@@ -778,16 +822,18 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             scene.remove(skeletonHelperRef.current);
             skeletonHelperRef.current = null;
         }
-        if (!showSkeleton || !rootObjectRef.current)
+        if (!showSkeleton || !rootObjectRef.current) {
             return;
+        }
         let hasRig = false;
         rootObjectRef.current.traverse((obj) => {
-            if (obj instanceof THREE.SkinnedMesh)
+            if (obj instanceof THREE.SkinnedMesh) {
                 hasRig = true;
+            }
         });
         if (hasRig) {
             const helper = new THREE.SkeletonHelper(rootObjectRef.current);
-            helper.name = "__skeletonHelper";
+            helper.name = '__skeletonHelper';
             scene.add(helper);
             skeletonHelperRef.current = helper;
         }
@@ -804,7 +850,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* Light helpers visibility */
     useEffect(() => {
         sceneRef.current.traverse((obj) => {
-            if (obj.name.startsWith("__helper_")) {
+            if (obj.name.startsWith('__helper_')) {
                 obj.visible = showLightHelpers;
             }
         });
@@ -827,7 +873,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         setDragOver(false);
         const files = Array.from(e.dataTransfer.files);
         files.forEach((f) => {
-            const ext = "." + f.name.toLowerCase().split(".").pop();
+            const ext = '.' + f.name.toLowerCase().split('.').pop();
             if (SUPPORTED_EXTENSIONS.includes(ext)) {
                 loadFile(f);
             }
@@ -838,25 +884,28 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
        ───────────────────────────────────────── */
     const selectedNode = useMemo(() => (selectedId ? findNodeById(sceneTree, selectedId) : null), [selectedId, sceneTree]);
     const selectedMaterials = useMemo(() => {
-        if (!selectedNode || !(selectedNode.object instanceof THREE.Mesh))
+        if (!selectedNode || !(selectedNode.object instanceof THREE.Mesh)) {
             return [];
+        }
         const m = selectedNode.object.material;
         return Array.isArray(m) ? m : [m];
     }, [selectedNode, matRefresh]);
     const deleteSelected = useCallback(() => {
         var _a;
-        if (!selectedNode)
+        if (!selectedNode) {
             return;
+        }
         selectedNode.object.removeFromParent();
         (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.detach();
         setSelectedId(null);
         rebuildTree();
     }, [selectedNode, rebuildTree]);
     const duplicateSelected = useCallback(() => {
-        if (!selectedNode)
+        if (!selectedNode) {
             return;
+        }
         const clone = selectedNode.object.clone(true);
-        clone.name = selectedNode.object.name + ".001";
+        clone.name = selectedNode.object.name + '.001';
         clone.position.x += 1;
         sceneRef.current.add(clone);
         rebuildTree();
@@ -869,28 +918,31 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         const handleKey = (e) => {
             var _a, _b, _c;
             const tag = (_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName;
-            if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT")
+            if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') {
                 return;
+            }
             switch (e.key.toLowerCase()) {
-                case "g":
-                    setTransformMode("translate");
+                case 'g':
+                    setTransformMode('translate');
                     break;
-                case "r":
-                    setTransformMode("rotate");
+                case 'r':
+                    setTransformMode('rotate');
                     break;
-                case "s":
-                    if (!e.ctrlKey)
-                        setTransformMode("scale");
+                case 's':
+                    if (!e.ctrlKey) {
+                        setTransformMode('scale');
+                    }
                     break;
-                case " ":
+                case ' ':
                     e.preventDefault();
                     togglePlay();
                     break;
-                case "f":
-                    if (rootObjectRef.current)
+                case 'f':
+                    if (rootObjectRef.current) {
                         focusOnObject(rootObjectRef.current);
+                    }
                     break;
-                case "delete":
+                case 'delete':
                     if (selectedId) {
                         const sel = findNodeById(sceneTree, selectedId);
                         if (sel) {
@@ -901,7 +953,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
                         }
                     }
                     break;
-                case "x":
+                case 'x':
                     if (e.ctrlKey && selectedId) {
                         const sel = findNodeById(sceneTree, selectedId);
                         if (sel) {
@@ -912,55 +964,62 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
                         }
                     }
                     break;
-                case "d":
+                case 'd':
                     if (e.shiftKey) {
                         e.preventDefault();
                         duplicateSelected();
                     }
                     break;
-                case "tab":
+                case 'tab':
                     e.preventDefault();
-                    setEditorMode((m) => m === "object" ? "edit" : m === "edit" ? "pose" : "object");
+                    setEditorMode((m) => (m === 'object' ? 'edit' : m === 'edit' ? 'pose' : 'object'));
                     break;
-                case "n":
+                case 'n':
                     if (!e.ctrlKey) ;
                     break;
-                case "1":
-                    if (e.code.startsWith("Numpad"))
-                        setCameraPreset("front");
+                case '1':
+                    if (e.code.startsWith('Numpad')) {
+                        setCameraPreset('front');
+                    }
                     break;
-                case "3":
-                    if (e.code.startsWith("Numpad"))
-                        setCameraPreset("right");
+                case '3':
+                    if (e.code.startsWith('Numpad')) {
+                        setCameraPreset('right');
+                    }
                     break;
-                case "7":
-                    if (e.code.startsWith("Numpad"))
-                        setCameraPreset("top");
+                case '7':
+                    if (e.code.startsWith('Numpad')) {
+                        setCameraPreset('top');
+                    }
                     break;
-                case "4":
-                    if (e.code.startsWith("Numpad"))
-                        setCameraPreset("left");
+                case '4':
+                    if (e.code.startsWith('Numpad')) {
+                        setCameraPreset('left');
+                    }
                     break;
-                case "6":
-                    if (e.code.startsWith("Numpad"))
-                        setCameraPreset("right");
+                case '6':
+                    if (e.code.startsWith('Numpad')) {
+                        setCameraPreset('right');
+                    }
                     break;
-                case "9":
-                    if (e.code.startsWith("Numpad"))
-                        setCameraPreset("back");
+                case '9':
+                    if (e.code.startsWith('Numpad')) {
+                        setCameraPreset('back');
+                    }
                     break;
-                case "2":
-                    if (e.code.startsWith("Numpad"))
-                        setCameraPreset("bottom");
+                case '2':
+                    if (e.code.startsWith('Numpad')) {
+                        setCameraPreset('bottom');
+                    }
                     break;
             }
-            if (e.key === "Escape") {
+            if (e.key === 'Escape') {
                 setAddMenuOpen(null);
                 setContextMenu(null);
             }
         };
-        window.addEventListener("keydown", handleKey);
-        return () => window.removeEventListener("keydown", handleKey);
+        window.addEventListener('keydown', handleKey);
+        return () => window.removeEventListener('keydown', handleKey);
     }, [
         togglePlay,
         focusOnObject,
@@ -975,17 +1034,19 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
        ───────────────────────────────────────── */
     const handleFileInput = useCallback((e) => {
         const files = e.target.files;
-        if (!files)
+        if (!files) {
             return;
+        }
         Array.from(files).forEach(loadFile);
-        e.target.value = "";
+        e.target.value = '';
     }, [loadFile]);
     const handleMergeInput = useCallback((e) => {
         const files = e.target.files;
-        if (!files)
+        if (!files) {
             return;
+        }
         Array.from(files).forEach(mergeAnimationFBX);
-        e.target.value = "";
+        e.target.value = '';
     }, [mergeAnimationFBX]);
     /* ─────────────────────────────────────────
        Export functions
@@ -993,72 +1054,75 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     const exportGLTF = useCallback((binary) => {
         const root = rootObjectRef.current;
         if (!root) {
-            setStatusText("Nothing to export");
+            setStatusText('Nothing to export');
             return;
         }
         const exporter = new GLTFExporter();
-        const options = { binary, animations: allClipsRef.current.map((a) => a.clip) };
+        const options = {
+            binary,
+            animations: allClipsRef.current.map((a) => a.clip),
+        };
         exporter.parse(root, (result) => {
             let blob;
             if (binary) {
-                blob = new Blob([result], { type: "application/octet-stream" });
+                blob = new Blob([result], { type: 'application/octet-stream' });
             }
             else {
-                blob = new Blob([JSON.stringify(result, null, 2)], { type: "application/json" });
+                blob = new Blob([JSON.stringify(result, null, 2)], { type: 'application/json' });
             }
-            const a = document.createElement("a");
+            const a = document.createElement('a');
             a.href = URL.createObjectURL(blob);
-            a.download = `export.${binary ? "glb" : "gltf"}`;
+            a.download = `export.${binary ? 'glb' : 'gltf'}`;
             a.click();
             URL.revokeObjectURL(a.href);
-            setStatusText(`Exported ${binary ? "GLB" : "GLTF"} successfully`);
+            setStatusText(`Exported ${binary ? 'GLB' : 'GLTF'} successfully`);
         }, (err) => {
-            log.error("Export error:", err);
+            log.error('Export error:', err);
             setStatusText(`Export error: ${String(err)}`);
         }, options);
     }, []);
     const exportOBJ = useCallback(() => {
         const root = rootObjectRef.current;
         if (!root) {
-            setStatusText("Nothing to export");
+            setStatusText('Nothing to export');
             return;
         }
         const exporter = new OBJExporter();
         const result = exporter.parse(root);
-        const blob = new Blob([result], { type: "text/plain" });
-        const a = document.createElement("a");
+        const blob = new Blob([result], { type: 'text/plain' });
+        const a = document.createElement('a');
         a.href = URL.createObjectURL(blob);
-        a.download = "export.obj";
+        a.download = 'export.obj';
         a.click();
         URL.revokeObjectURL(a.href);
-        setStatusText("Exported OBJ successfully");
+        setStatusText('Exported OBJ successfully');
     }, []);
     const exportSTL = useCallback((binary) => {
         const root = rootObjectRef.current;
         if (!root) {
-            setStatusText("Nothing to export");
+            setStatusText('Nothing to export');
             return;
         }
         const exporter = new STLExporter();
         const result = exporter.parse(root, { binary });
         let blob;
         if (binary) {
-            blob = new Blob([result], { type: "application/octet-stream" });
+            blob = new Blob([result], { type: 'application/octet-stream' });
         }
         else {
-            blob = new Blob([result], { type: "text/plain" });
+            blob = new Blob([result], { type: 'text/plain' });
         }
-        const a = document.createElement("a");
+        const a = document.createElement('a');
         a.href = URL.createObjectURL(blob);
-        a.download = "export.stl";
+        a.download = 'export.stl';
         a.click();
         URL.revokeObjectURL(a.href);
-        setStatusText(`Exported STL${binary ? " (binary)" : ""} successfully`);
+        setStatusText(`Exported STL${binary ? ' (binary)' : ''} successfully`);
     }, []);
     const exportPLY = useCallback((binary) => {
         const root = rootObjectRef.current;
         if (!root) {
-            setStatusText("Nothing to export");
+            setStatusText('Nothing to export');
             return;
         }
         const exporter = new PLYExporter();
@@ -1066,41 +1130,41 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         exporter.parse(root, (result) => {
             let blob;
             if (binary) {
-                blob = new Blob([result], { type: "application/octet-stream" });
+                blob = new Blob([result], { type: 'application/octet-stream' });
             }
             else {
-                blob = new Blob([result], { type: "text/plain" });
+                blob = new Blob([result], { type: 'text/plain' });
             }
-            const a = document.createElement("a");
+            const a = document.createElement('a');
             a.href = URL.createObjectURL(blob);
-            a.download = "export.ply";
+            a.download = 'export.ply';
             a.click();
             URL.revokeObjectURL(a.href);
-            setStatusText(`Exported PLY${binary ? " (binary)" : ""} successfully`);
+            setStatusText(`Exported PLY${binary ? ' (binary)' : ''} successfully`);
         }, { binary });
     }, []);
     const exportUSDZ = useCallback(async () => {
         const root = rootObjectRef.current;
         if (!root) {
-            setStatusText("Nothing to export");
+            setStatusText('Nothing to export');
             return;
         }
         try {
             const exporter = new USDZExporter();
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const result = await new Promise((resolve) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any -- USDZExporter.parse callback signature varies between three.js minor versions
                 exporter.parse(root, resolve);
             });
-            const blob = new Blob([result.buffer], { type: "application/octet-stream" });
-            const a = document.createElement("a");
+            const blob = new Blob([result.buffer], { type: 'application/octet-stream' });
+            const a = document.createElement('a');
             a.href = URL.createObjectURL(blob);
-            a.download = "export.usdz";
+            a.download = 'export.usdz';
             a.click();
             URL.revokeObjectURL(a.href);
-            setStatusText("Exported USDZ successfully");
+            setStatusText('Exported USDZ successfully');
         }
         catch (err) {
-            log.error("USDZ export error:", err);
+            log.error('USDZ export error:', err);
             setStatusText(`USDZ export error: ${String(err)}`);
         }
     }, []);
@@ -1118,9 +1182,23 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
                     : [child.material];
                 mats.forEach((mat) => {
                     const m = mat;
-                    ["map", "normalMap", "roughnessMap", "metalnessMap", "emissiveMap", "aoMap", "alphaMap", "envMap", "lightMap", "bumpMap", "displacementMap", "specularMap"].forEach((prop) => {
-                        if (m[prop] && typeof m[prop].dispose === "function")
+                    [
+                        'map',
+                        'normalMap',
+                        'roughnessMap',
+                        'metalnessMap',
+                        'emissiveMap',
+                        'aoMap',
+                        'alphaMap',
+                        'envMap',
+                        'lightMap',
+                        'bumpMap',
+                        'displacementMap',
+                        'specularMap',
+                    ].forEach((prop) => {
+                        if (m[prop] && typeof m[prop].dispose === 'function') {
                             m[prop].dispose();
+                        }
                     });
                     mat.dispose();
                 });
@@ -1129,12 +1207,13 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     }, []);
     const clearScene = useCallback(() => {
         var _a;
-        if (!window.confirm("Clear the entire scene? This cannot be undone."))
+        if (!window.confirm('Clear the entire scene? This cannot be undone.')) {
             return;
+        }
         const scene = sceneRef.current;
         const toRemove = [];
         scene.traverse((obj) => {
-            if (!obj.name.startsWith("__") && obj !== scene && obj.parent === scene) {
+            if (!obj.name.startsWith('__') && obj !== scene && obj.parent === scene) {
                 toRemove.push(obj);
             }
         });
@@ -1160,33 +1239,35 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         setAnimDuration(0);
         setSelectedId(null);
         rebuildTree();
-        setStatusText("Scene cleared");
+        setStatusText('Scene cleared');
     }, [rebuildTree, disposeObject]);
     /* ─────────────────────────────────────────
        Save to Library
        ───────────────────────────────────────── */
     const saveToLibrary = useCallback(() => {
-        if (!onSaveToLibrary)
+        if (!onSaveToLibrary) {
             return;
+        }
         const root = rootObjectRef.current;
         if (!root) {
-            setStatusText("Nothing to save");
+            setStatusText('Nothing to save');
             return;
         }
         const exporter = new GLTFExporter();
         exporter.parse(root, (result) => {
-            const blob = new Blob([result], { type: "model/gltf-binary" });
+            const blob = new Blob([result], { type: 'model/gltf-binary' });
             const reader = new FileReader();
             reader.onload = () => {
-                const defaultName = "model.glb";
-                const name = window.prompt("Save to library as:", defaultName);
-                if (!name || !name.trim())
+                const defaultName = 'model.glb';
+                const name = window.prompt('Save to library as:', defaultName);
+                if (!name || !name.trim()) {
                     return;
-                onSaveToLibrary(reader.result, name.trim(), "model/gltf-binary");
+                }
+                onSaveToLibrary(reader.result, name.trim(), 'model/gltf-binary');
             };
             reader.readAsDataURL(blob);
         }, (err) => {
-            log.error("Save to library error:", err);
+            log.error('Save to library error:', err);
             setStatusText(`Save error: ${String(err)}`);
         }, { binary: true, animations: allClipsRef.current.map((a) => a.clip) });
     }, [onSaveToLibrary]);
@@ -1196,53 +1277,58 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     const addPrimitive = useCallback((type) => {
         let geo;
         switch (type) {
-            case "cube":
+            case 'cube':
                 geo = new THREE.BoxGeometry(1, 1, 1);
                 break;
-            case "sphere":
+            case 'sphere':
                 geo = new THREE.SphereGeometry(0.5, 32, 32);
                 break;
-            case "cylinder":
+            case 'cylinder':
                 geo = new THREE.CylinderGeometry(0.5, 0.5, 1, 32);
                 break;
-            case "cone":
+            case 'cone':
                 geo = new THREE.ConeGeometry(0.5, 1, 32);
                 break;
-            case "torus":
+            case 'torus':
                 geo = new THREE.TorusGeometry(0.5, 0.2, 16, 32);
                 break;
-            case "plane":
+            case 'plane':
                 geo = new THREE.PlaneGeometry(2, 2);
                 break;
-            case "circle":
+            case 'circle':
                 geo = new THREE.CircleGeometry(0.5, 32);
                 break;
-            case "ring":
+            case 'ring':
                 geo = new THREE.RingGeometry(0.3, 0.5, 32);
                 break;
-            case "dodecahedron":
+            case 'dodecahedron':
                 geo = new THREE.DodecahedronGeometry(0.5);
                 break;
-            case "icosahedron":
+            case 'icosahedron':
                 geo = new THREE.IcosahedronGeometry(0.5);
                 break;
-            case "octahedron":
+            case 'octahedron':
                 geo = new THREE.OctahedronGeometry(0.5);
                 break;
-            case "tetrahedron":
+            case 'tetrahedron':
                 geo = new THREE.TetrahedronGeometry(0.5);
                 break;
-            case "torusKnot":
+            case 'torusKnot':
                 geo = new THREE.TorusKnotGeometry(0.4, 0.15, 64, 16);
                 break;
-            default: return;
+            default:
+                return;
         }
-        const mat = new THREE.MeshStandardMaterial({ color: 0x888888, metalness: 0.1, roughness: 0.7 });
+        const mat = new THREE.MeshStandardMaterial({
+            color: 0x888888,
+            metalness: 0.1,
+            roughness: 0.7,
+        });
         const mesh = new THREE.Mesh(geo, mat);
         mesh.name = type.charAt(0).toUpperCase() + type.slice(1);
         mesh.castShadow = true;
         mesh.receiveShadow = true;
-        if (type === "plane" || type === "circle") {
+        if (type === 'plane' || type === 'circle') {
             mesh.rotation.x = -Math.PI / 2;
             mesh.position.y = 0.001;
         }
@@ -1257,34 +1343,35 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     const addSceneLight = useCallback((type) => {
         let light;
         switch (type) {
-            case "point": {
+            case 'point': {
                 const l = new THREE.PointLight(0xffffff, 1, 20);
                 l.position.set(0, 3, 0);
                 l.castShadow = true;
                 light = l;
                 break;
             }
-            case "spot": {
+            case 'spot': {
                 const l = new THREE.SpotLight(0xffffff, 1, 20, Math.PI / 6, 0.3);
                 l.position.set(0, 4, 2);
                 l.castShadow = true;
                 light = l;
                 break;
             }
-            case "directional": {
+            case 'directional': {
                 const l = new THREE.DirectionalLight(0xffffff, 1);
                 l.position.set(3, 5, 3);
                 l.castShadow = true;
                 light = l;
                 break;
             }
-            case "hemisphere": {
+            case 'hemisphere': {
                 light = new THREE.HemisphereLight(0x8888ff, 0x442200, 0.5);
                 break;
             }
-            default: return;
+            default:
+                return;
         }
-        light.name = type.charAt(0).toUpperCase() + type.slice(1) + "Light";
+        light.name = type.charAt(0).toUpperCase() + type.slice(1) + 'Light';
         sceneRef.current.add(light);
         let helper = null;
         if (light instanceof THREE.PointLight) {
@@ -1309,24 +1396,25 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     }, [rebuildTree]);
     const addCameraObject = useCallback(() => {
         const cam = new THREE.PerspectiveCamera(50, 16 / 9, 0.1, 1000);
-        cam.name = "Camera";
+        cam.name = 'Camera';
         cam.position.set(5, 3, 5);
         cam.lookAt(0, 0, 0);
         sceneRef.current.add(cam);
         const helper = new THREE.CameraHelper(cam);
-        helper.name = "__helper_Camera";
+        helper.name = '__helper_Camera';
         sceneRef.current.add(helper);
         rebuildTree();
-        setStatusText("Added Camera");
+        setStatusText('Added Camera');
         setAddMenuOpen(null);
     }, [rebuildTree]);
     const addEmpty = useCallback((type) => {
         const obj = new THREE.Object3D();
-        obj.name = type === "arrows" ? "Empty_Arrows" : type === "cube_empty" ? "Empty_Cube" : "Empty";
+        obj.name =
+            type === 'arrows' ? 'Empty_Arrows' : type === 'cube_empty' ? 'Empty_Cube' : 'Empty';
         sceneRef.current.add(obj);
-        if (type === "arrows") {
+        if (type === 'arrows') {
             const h = new THREE.AxesHelper(0.5);
-            h.name = "__emptyAxes";
+            h.name = '__emptyAxes';
             obj.add(h);
         }
         rebuildTree();
@@ -1337,20 +1425,24 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
        Raycaster click-to-select
        ───────────────────────────────────────── */
     const handleViewportClick = useCallback((e) => {
-        if (editorMode !== "object")
+        if (editorMode !== 'object') {
             return;
-        if (!mountRef.current || !rendererRef.current || !cameraRef.current)
+        }
+        if (!mountRef.current || !rendererRef.current || !cameraRef.current) {
             return;
-        if (e.target !== rendererRef.current.domElement)
+        }
+        if (e.target !== rendererRef.current.domElement) {
             return;
+        }
         const rect = mountRef.current.getBoundingClientRect();
         const x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
         const y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
         raycasterRef.current.setFromCamera(new THREE.Vector2(x, y), cameraRef.current);
         const meshes = [];
         sceneRef.current.traverse((obj) => {
-            if (obj instanceof THREE.Mesh && !obj.name.startsWith("__"))
+            if (obj instanceof THREE.Mesh && !obj.name.startsWith('__')) {
                 meshes.push(obj);
+            }
         });
         const intersects = raycasterRef.current.intersectObjects(meshes, false);
         if (intersects.length > 0) {
@@ -1378,11 +1470,12 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     }, []);
     const closeContextMenu = useCallback(() => setContextMenu(null), []);
     useEffect(() => {
-        if (!contextMenu)
+        if (!contextMenu) {
             return;
+        }
         const close = () => setContextMenu(null);
-        window.addEventListener("click", close);
-        return () => window.removeEventListener("click", close);
+        window.addEventListener('click', close);
+        return () => window.removeEventListener('click', close);
     }, [contextMenu]);
     /* ─────────────────────────────────────────
        AI animation from video
@@ -1390,15 +1483,16 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     const handleAIVideo = useCallback(async (e) => {
         var _a;
         const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (!file)
+        if (!file) {
             return;
-        e.target.value = "";
+        }
+        e.target.value = '';
         if (!onAIPoseVideo) {
-            setAiStatus("AI pose callback not configured.");
+            setAiStatus('AI pose callback not configured.');
             return;
         }
         setAiBusy(true);
-        setAiStatus("Uploading video for AI pose estimation...");
+        setAiStatus('Uploading video for AI pose estimation...');
         try {
             const result = await onAIPoseVideo(file);
             setAiStatus(`Got ${result.frame_count} frames at ${result.fps} fps. Creating animation clip...`);
@@ -1416,14 +1510,14 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
                 allClipsRef.current = [...allClipsRef.current, newAnim];
                 setAnimations([...allClipsRef.current]);
                 playClip(allClipsRef.current.length - 1);
-                setAiStatus("Animation created successfully!");
+                setAiStatus('Animation created successfully!');
             }
             else {
-                setAiStatus("Could not create animation — load a rigged model first.");
+                setAiStatus('Could not create animation — load a rigged model first.');
             }
         }
         catch (err) {
-            log.error("AI pose error:", err);
+            log.error('AI pose error:', err);
             setAiStatus(`Error: ${String(err)}`);
         }
         finally {
@@ -1473,28 +1567,28 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     // Keyboard shortcuts for undo/redo
     useEffect(() => {
         const handleKeyDown = (e) => {
-            if ((e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey) {
+            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))) {
+            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);
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
     }, [undo, redo]);
     /* ─────────────────────────────────────────
        Batch Import
        ───────────────────────────────────────── */
     const loadFiles = useCallback(async (files) => {
         const fileArray = Array.from(files).filter((f) => {
-            const ext = f.name.substring(f.name.lastIndexOf(".")).toLowerCase();
+            const ext = f.name.substring(f.name.lastIndexOf('.')).toLowerCase();
             return SUPPORTED_EXTENSIONS.includes(ext);
         });
         if (fileArray.length === 0) {
-            setStatusText("No supported files found");
+            setStatusText('No supported files found');
             return;
         }
         setStatusText(`Importing ${fileArray.length} file(s)...`);
@@ -1517,25 +1611,31 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     const applyPreset = useCallback((preset) => {
         const node = selectedNode;
         if (!node || !(node.object instanceof THREE.Mesh)) {
-            setStatusText("Select a mesh to apply material preset");
+            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)
+        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 = createMaterialFromPreset(preset);
         // Copy existing textures if present
         if (oldMaterial instanceof THREE.MeshStandardMaterial) {
-            if (oldMaterial.map)
+            if (oldMaterial.map) {
                 newMaterial.map = oldMaterial.map;
-            if (oldMaterial.normalMap)
+            }
+            if (oldMaterial.normalMap) {
                 newMaterial.normalMap = oldMaterial.normalMap;
-            if (oldMaterial.aoMap)
+            }
+            if (oldMaterial.aoMap) {
                 newMaterial.aoMap = oldMaterial.aoMap;
+            }
         }
         if (Array.isArray(mesh.material)) {
             mesh.material[materialIdx] = newMaterial;
@@ -1571,7 +1671,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     const generateSelectedLOD = useCallback(() => {
         const node = selectedNode;
         if (!node || !(node.object instanceof THREE.Mesh)) {
-            setStatusText("Select a mesh to generate LOD");
+            setStatusText('Select a mesh to generate LOD');
             return;
         }
         const mesh = node.object;
@@ -1581,8 +1681,14 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         parent.add(lod);
         pushUndo({
             label: `Generate LOD for ${mesh.name}`,
-            undo: () => { parent.remove(lod); parent.add(mesh); },
-            redo: () => { parent.remove(mesh); parent.add(lod); },
+            undo: () => {
+                parent.remove(lod);
+                parent.add(mesh);
+            },
+            redo: () => {
+                parent.remove(mesh);
+                parent.add(lod);
+            },
         });
         rebuildTree();
         setStatusText(`Generated LOD for ${mesh.name} (4 levels)`);
@@ -1594,7 +1700,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         const root = rootObjectRef.current || sceneRef.current;
         const result = convertToInstanced(root);
         if (result.created === 0) {
-            setStatusText("No duplicate meshes found to instance");
+            setStatusText('No duplicate meshes found to instance');
             return;
         }
         rebuildTree();
@@ -1603,8 +1709,9 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ── HDRI Environment ── */
     const applyHDRI = useCallback((preset) => {
         const renderer = rendererRef.current;
-        if (!renderer)
+        if (!renderer) {
             return;
+        }
         applyHDRIPreset(sceneRef.current, renderer, preset);
         setBgColor(`#${new THREE.Color(preset.bgColor).getHexString()}`);
         if (preset.fog) {
@@ -1621,7 +1728,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     /* ── Snap ── */
     const snapPoint = useCallback((point) => {
         const root = rootObjectRef.current || sceneRef.current;
-        const modes = snapEnabled ? ["vertex", "edge", "grid"] : ["grid"];
+        const modes = snapEnabled ? ['vertex', 'edge', 'grid'] : ['grid'];
         return snapMulti(point, root, snapGrid, modes, 0.5);
     }, [snapEnabled, snapGrid]);
     /* ═══════════════════════════════════════════