@nice2dev/ui-3d 1.3.14 → 1.3.16

package/dist/esm/model/useModelEditor.js

@@ -1,1950 +1,1976 @@
-import { resolveCssColor } from '@nice2dev/ui';
-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 { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
-import { OBJExporter } from 'three/examples/jsm/exporters/OBJExporter.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 { ThreeMFLoader } from 'three/examples/jsm/loaders/3MFLoader.js';
-import { AMFLoader } from 'three/examples/jsm/loaders/AMFLoader.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 { VTKLoader } from 'three/examples/jsm/loaders/VTKLoader.js';
-import { useEditorAsk } from '../core/editorAsk.js';
-import { useNiceTranslation } from '../core/i18n.js';
-import { createFrameClock, SOFT_SHADOW_MAP } from '../core/threeCompat.js';
-import { SUPPORTED_EXTENSIONS, pose3dToClip } from './modelEditorTypes.js';
-import { UndoRedoStack, createMaterialFromPreset, generateLOD, convertToInstanced, applyHDRIPreset, snapMulti, HDRI_PRESETS, PBR_PRESETS } from './modelEditorUtils.js';
-
-/**
- * useModelEditor — custom hook encapsulating all state,
- * refs, callbacks, side-effects, and scene setup for the
- * ModelEditor (Blender-style 3D editor).
- *
- * Extracted from the original ModelEditor.tsx god-component.
- */
+import { resolveCssColor } from "@nice2dev/ui";
+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 { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter.js";
+import { OBJExporter } from "three/examples/jsm/exporters/OBJExporter.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 { ThreeMFLoader } from "three/examples/jsm/loaders/3MFLoader.js";
+import { AMFLoader } from "three/examples/jsm/loaders/AMFLoader.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 { VTKLoader } from "three/examples/jsm/loaders/VTKLoader.js";
+import { useEditorAsk } from "../core/editorAsk.js";
+import { useNiceTranslation } from "../core/i18n.js";
+import { createFrameClock, SOFT_SHADOW_MAP } from "../core/threeCompat.js";
+import { SUPPORTED_EXTENSIONS, pose3dToClip } from "./modelEditorTypes.js";
+import { UndoRedoStack, createMaterialFromPreset, generateLOD, convertToInstanced, applyHDRIPreset, snapMulti, HDRI_PRESETS, PBR_PRESETS } from "./modelEditorUtils.js";
 const log = { error: console.error, warn: console.warn };
-/* helpers */
 let _nid = 0;
 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) {
-            return n;
-        }
-        const found = findNodeById(n.children, id);
-        if (found) {
-            return found;
-        }
+  for (const n of nodes) {
+    if (n.id === id) {
+      return n;
+    }
+    const found = findNodeById(n.children, id);
+    if (found) {
+      return found;
     }
-    return null;
+  }
+  return null;
 }
-/* ═══════════════════════════════════════════
-   Hook
-   ═══════════════════════════════════════════ */
-function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
-    var _a;
-    const { t } = useNiceTranslation();
-    const { pendingAsk, ask } = useEditorAsk();
-    /* ── refs ── */
-    const mountRef = useRef(null);
-    const rendererRef = useRef(null);
-    const sceneRef = useRef(new THREE.Scene());
-    const cameraRef = useRef(new THREE.PerspectiveCamera(50, 1, 0.01, 10000));
-    const orbitRef = useRef(null);
-    const transformRef = useRef(null);
-    // Created once: useRef's argument runs on every render, and three r183 warns per Clock.
-    const clockRef = useRef(null);
-    (_a = clockRef.current) !== null && _a !== void 0 ? _a : (clockRef.current = createFrameClock());
-    const mixerRef = useRef(null);
-    const rafRef = useRef(0);
-    const fileInputRef = useRef(null);
-    const mergeInputRef = useRef(null);
-    const videoInputRef = useRef(null);
-    const raycasterRef = useRef(new THREE.Raycaster());
-    const skeletonHelperRef = useRef(null);
-    /* ── state ── */
-    const [sceneTree, setSceneTree] = useState([]);
-    const [selectedId, setSelectedId] = useState(null);
-    const [transformMode, setTransformMode] = useState('translate');
-    const [animations, setAnimations] = useState([]);
-    const [activeAnimIdx, setActiveAnimIdx] = useState(-1);
-    const [isPlaying, setIsPlaying] = useState(false);
-    const [animTime, setAnimTime] = useState(0);
-    const [animDuration, setAnimDuration] = useState(0);
-    const [animSpeed, setAnimSpeed] = useState(1);
-    const [loopAnim, setLoopAnim] = useState(true);
-    const [bottomCollapsed, setBottomCollapsed] = useState(false);
-    const [showGrid, setShowGrid] = useState(true);
-    const [showAxes, setShowAxes] = useState(true);
-    const [wireframe, setWireframe] = useState(false);
-    const [bgColor, setBgColor] = useState('var(--nice-bg, #111122)');
-    const [statusText, setStatusText] = useState('Ready');
-    const [dragOver, setDragOver] = useState(false);
-    const [polyCount, setPolyCount] = useState(0);
-    const [meshCount, setMeshCount] = useState(0);
-    const [boneCount, setBoneCount] = useState(0);
-    // Material editor
-    const [selMaterialIdx, setSelMaterialIdx] = useState(0);
-    const [matRefresh, setMatRefresh] = useState(0);
-    // AI panel
-    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 [contextMenu, setContextMenu] = useState(null);
-    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 [fogEnabled, setFogEnabled] = useState(false);
-    const [fogColor, setFogColor] = useState('var(--nice-bg, #111122)');
-    const [fogNear, setFogNear] = useState(10);
-    const [fogFar, setFogFar] = useState(100);
-    const [showLightHelpers, setShowLightHelpers] = useState(true);
-    // The root object that was loaded (mesh/character)
-    const rootObjectRef = useRef(null);
-    // Active animation action
-    const activeActionRef = useRef(null);
-    // All loaded animation clips (for the current model)
-    const allClipsRef = useRef([]);
-    /* keep refs current */
-    const animTimeRef = useRef(animTime);
-    animTimeRef.current = animTime;
-    const isPlayingRef = useRef(isPlaying);
-    isPlayingRef.current = isPlaying;
-    const animSpeedRef = useRef(animSpeed);
-    animSpeedRef.current = animSpeed;
-    const loopAnimRef = useRef(loopAnim);
-    loopAnimRef.current = loopAnim;
-    /* ─────────────────────────────────────────
-       Scene setup
-       ───────────────────────────────────────── */
-    useEffect(() => {
-        const container = mountRef.current;
-        if (!container) {
-            return;
-        }
-        const scene = sceneRef.current;
-        const camera = cameraRef.current;
-        // Renderer
-        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
-        renderer.setPixelRatio(window.devicePixelRatio);
-        renderer.shadowMap.enabled = true;
-        renderer.shadowMap.type = SOFT_SHADOW_MAP;
-        renderer.toneMapping = THREE.ACESFilmicToneMapping;
-        renderer.toneMappingExposure = 1.2;
-        renderer.outputColorSpace = THREE.SRGBColorSpace;
-        rendererRef.current = renderer;
-        container.appendChild(renderer.domElement);
-        // Camera
-        camera.position.set(3, 2, 5);
-        camera.lookAt(0, 0, 0);
-        // Scene background
-        // THREE.Color cannot parse var(); resolve the token against the editor first. Read
-        // --nice-bg-primary, not the --nice-bg alias: the alias is computed once on :root, so a
-        // theme applied to a wrapper never reaches it.
-        scene.background = new THREE.Color(resolveCssColor('var(--nice-bg-primary, #111122)', container));
-        // Lights
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-        ambientLight.name = '__ambient';
-        scene.add(ambientLight);
-        const dirLight = new THREE.DirectionalLight(0xffffff, 1.2);
-        dirLight.name = '__dirLight';
-        dirLight.position.set(5, 8, 5);
-        dirLight.castShadow = true;
-        dirLight.shadow.mapSize.set(2048, 2048);
-        dirLight.shadow.camera.near = 0.1;
-        dirLight.shadow.camera.far = 50;
-        dirLight.shadow.camera.left = -10;
-        dirLight.shadow.camera.right = 10;
-        dirLight.shadow.camera.top = 10;
-        dirLight.shadow.camera.bottom = -10;
-        scene.add(dirLight);
-        const hemiLight = new THREE.HemisphereLight(0x8888ff, 0x444422, 0.4);
-        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.rotation.x = -Math.PI / 2;
-        ground.receiveShadow = true;
-        scene.add(ground);
-        // Grid
-        const grid = new THREE.GridHelper(20, 20, 0x333355, 0x22223a);
-        grid.name = '__grid';
-        scene.add(grid);
-        // Axes
-        const axes = new THREE.AxesHelper(2);
-        axes.name = '__axes';
-        scene.add(axes);
-        // Orbit controls
-        const orbit = new OrbitControls(camera, renderer.domElement);
-        orbit.enableDamping = true;
-        orbit.dampingFactor = 0.08;
-        orbit.minDistance = 0.1;
-        orbit.maxDistance = 500;
-        orbit.target.set(0, 0.5, 0);
-        orbitRef.current = orbit;
-        // Transform controls
-        const tc = new TransformControls(camera, renderer.domElement);
-        // Since three r169 TransformControls is a Controls, not an Object3D: the gizmo that
-        // goes into the scene is its helper.
-        const tcHelper = tc.getHelper();
-        tcHelper.name = '__transformControls';
-        tc.addEventListener('dragging-changed', (e) => {
-            orbit.enabled = !e.value;
-        });
-        scene.add(tcHelper);
-        transformRef.current = tc;
-        // Resize handler
-        const onResize = () => {
-            const w = container.clientWidth;
-            const h = container.clientHeight;
-            if (w === 0 || h === 0) {
-                return;
-            }
-            camera.aspect = w / h;
-            camera.updateProjectionMatrix();
-            renderer.setSize(w, h);
-        };
-        const ro = new ResizeObserver(onResize);
-        ro.observe(container);
-        onResize();
-        // Animation loop
-        const animate = () => {
-            var _a, _b;
-            rafRef.current = requestAnimationFrame(animate);
-            const dt = (_b = (_a = clockRef.current) === null || _a === void 0 ? void 0 : _a.getDelta()) !== null && _b !== void 0 ? _b : 0;
-            orbit.update();
-            // Update mixer
-            if (mixerRef.current && isPlayingRef.current) {
-                mixerRef.current.update(dt * animSpeedRef.current);
-                // Sync time state (throttled to ~15fps for React)
-                const action = activeActionRef.current;
-                if (action) {
-                    const t = action.time;
-                    if (Math.abs(t - animTimeRef.current) > 0.05) {
-                        setAnimTime(t);
-                    }
-                }
-            }
-            renderer.render(scene, camera);
-        };
-        animate();
-        return () => {
-            cancelAnimationFrame(rafRef.current);
-            ro.disconnect();
-            const scn = scene;
-            scn.traverse((obj) => {
-                if (obj.geometry) {
-                    obj.geometry.dispose();
-                }
-                if (obj.material) {
-                    const mats = Array.isArray(obj.material)
-                        ? obj.material
-                        : [obj.material];
-                    mats.forEach((mat) => mat.dispose());
-                }
-            });
-            if (mixerRef.current) {
-                mixerRef.current.stopAllAction();
-            }
-            renderer.dispose();
-            orbit.dispose();
-            tc.dispose();
-            if (container.contains(renderer.domElement)) {
-                container.removeChild(renderer.domElement);
-            }
-        };
-    }, []);
-    /* ─────────────────────────────────────────
-       Rebuild scene tree from Three.js scene
-       ───────────────────────────────────────── */
-    const rebuildTree = useCallback(() => {
-        const scene = sceneRef.current;
-        let polys = 0;
-        let meshes = 0;
-        let bones = 0;
-        const walk = (obj, depth) => {
-            var _a, _b;
-            if (obj.name.startsWith('__')) {
-                return null;
-            }
-            if (obj.type === 'TransformControlsPlane' || obj.type === 'TransformControlsGizmo') {
-                return null;
-            }
-            if ('isTransformControls' in obj) {
-                return null;
-            }
-            let nodeType = 'group';
-            if (obj instanceof THREE.Mesh) {
-                nodeType = 'mesh';
-                meshes++;
-                const geo = obj.geometry;
-                if (geo) {
-                    const idx = geo.index;
-                    polys += idx ? idx.count / 3 : ((_b = (_a = geo.attributes.position) === null || _a === void 0 ? void 0 : _a.count) !== null && _b !== void 0 ? _b : 0) / 3;
-                }
-            }
-            else if (obj instanceof THREE.Bone) {
-                nodeType = 'bone';
-                bones++;
-            }
-            else if (obj instanceof THREE.Light) {
-                nodeType = 'light';
-            }
-            else if (obj instanceof THREE.Camera) {
-                nodeType = 'camera';
-            }
-            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) {
-                    children.push(cn);
-                }
-            }
-            return {
-                id: obj.userData.__nodeId ||
-                    ((obj.userData.__nodeId = nid()), obj.userData.__nodeId),
-                name: obj.name || obj.type,
-                type: nodeType,
-                object: obj,
-                children,
-                expanded: depth < 2,
-                visible: obj.visible,
-            };
-        };
-        const roots = [];
-        for (const c of scene.children) {
-            const n = walk(c, 0);
-            if (n) {
-                roots.push(n);
-            }
-        }
-        setSceneTree(roots);
-        setPolyCount(Math.round(polys));
-        setMeshCount(meshes);
-        setBoneCount(bones);
-    }, []);
-    /* ─────────────────────────────────────────
-       File loading
-       ───────────────────────────────────────── */
-    const playClipRef = useRef(() => { });
-    const focusOnObjectRef = useRef(() => { });
-    const addObjectToScene = useCallback((obj, clips, filename) => {
-        const scene = sceneRef.current;
-        obj.traverse((child) => {
-            if (child instanceof THREE.Mesh) {
-                child.castShadow = true;
-                child.receiveShadow = true;
-            }
-        });
-        const box = new THREE.Box3().setFromObject(obj);
-        const size = box.getSize(new THREE.Vector3());
-        const maxDim = Math.max(size.x, size.y, size.z);
-        if (maxDim > 0.01) {
-            const targetSize = 3;
-            const scale = targetSize / maxDim;
-            if (scale < 0.5 || scale > 2) {
-                obj.scale.multiplyScalar(scale);
-            }
-        }
-        const box2 = new THREE.Box3().setFromObject(obj);
-        const center = box2.getCenter(new THREE.Vector3());
-        obj.position.sub(center);
-        obj.position.y += box2.getSize(new THREE.Vector3()).y / 2;
-        obj.name = obj.name || filename;
-        scene.add(obj);
-        rootObjectRef.current = obj;
-        if (clips.length > 0) {
-            const mixer = new THREE.AnimationMixer(obj);
-            mixerRef.current = mixer;
-            const newAnims = clips.map((c) => ({
-                name: c.name || 'Animation',
-                clip: c,
-                duration: c.duration,
-                source: filename,
-            }));
-            allClipsRef.current = [...allClipsRef.current, ...newAnims];
-            setAnimations([...allClipsRef.current]);
-            if (allClipsRef.current.length > 0) {
-                playClipRef.current(0);
-            }
-        }
-        else if (!mixerRef.current && rootObjectRef.current) {
-            mixerRef.current = new THREE.AnimationMixer(rootObjectRef.current);
-        }
-        focusOnObjectRef.current(obj);
-        rebuildTree();
-        setStatusText(t('useModelEditor.loadedAnimationS', 'Loaded: {filename} ({clips} animation(s))')
-            .replace('{filename}', String(filename))
-            .replace('{clips}', String(clips.length)));
-    }, [rebuildTree, t]);
-    const loadFile = useCallback(async (file) => {
-        var _a, _b, _c, _d, _e, _f;
-        const name = file.name.toLowerCase();
-        const ext = '.' + name.split('.').pop();
-        const url = URL.createObjectURL(file);
-        setStatusText(t('useModelEditor.loading', 'Loading {name}...').replace('{name}', String(file.name)));
-        try {
-            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') {
-                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') {
-                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') {
-                const loader = new ColladaLoader();
-                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') {
-                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 mesh = new THREE.Mesh(geo, mat);
-                mesh.name = file.name;
-                addObjectToScene(mesh, [], file.name);
-            }
-            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 mesh = new THREE.Mesh(geo, mat);
-                mesh.name = file.name;
-                addObjectToScene(mesh, [], file.name);
-            }
-            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') {
-                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') {
-                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') {
-                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') {
-                const loader = new VTKLoader();
-                const geo = await new Promise((res, rej) => loader.load(url, res, undefined, rej));
-                geo.computeVertexNormals();
-                const mat = new THREE.MeshStandardMaterial({ color: 0x888888, side: THREE.DoubleSide });
-                const mesh = new THREE.Mesh(geo, mat);
-                mesh.name = file.name;
-                addObjectToScene(mesh, [], file.name);
-            }
-            else if (ext === '.wrl' || ext === '.vrml') {
-                // Imported on demand. VRMLLoader embeds chevrotain, whose UMD wrapper registers
-                // through a global AMD `define` whenever one exists — and Monaco's loader (used by
-                // NiceCodeEditor) installs exactly that. Its exports then come back undefined and
-                // `new RegExpParser()` throws at MODULE EVALUATION: imported statically, that
-                // took down every page that had shown a code editor before opening a 3D view.
-                const { VRMLLoader } = await import('three/examples/jsm/loaders/VRMLLoader.js');
-                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) {
-                    group.add(scn.children[0]);
-                }
-                addObjectToScene(group, [], file.name);
-            }
-            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') {
-                const loader = new SVGLoader();
-                // @types/three exports SVGResult, not SVGResultPaths — derive the element
-                // type from the real shape rather than importing a name that does not exist.
-                const data = await new Promise((res, rej) => 
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any -- SVGLoader callback type widens beyond SVGResult
-                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 mesh = new THREE.Mesh(geo, mat);
-                        group.add(mesh);
-                    }
-                }
-                group.scale.set(0.01, -0.01, 0.01);
-                addObjectToScene(group, [], file.name);
-            }
-            else {
-                setStatusText(t('useModelEditor.unsupportedFormat', 'Unsupported format: {ext}').replace('{ext}', String(ext)));
-            }
-        }
-        catch (err) {
-            log.error('Load error:', err);
-            setStatusText(t('useModelEditor.errorLoading', 'Error loading {name}: {err}')
-                .replace('{name}', String(file.name))
-                .replace('{err}', String(String(err))));
-        }
-        finally {
-            URL.revokeObjectURL(url);
-        }
-    }, [addObjectToScene, t]);
-    const mergeAnimationFBX = useCallback(async (file) => {
-        var _a;
-        const url = URL.createObjectURL(file);
-        setStatusText(t('useModelEditor.mergingAnimationsFrom', 'Merging animations from {name}...').replace('{name}', String(file.name)));
-        try {
-            const loader = new FBXLoader();
-            const obj = await new Promise((res, rej) => loader.load(url, res, undefined, rej));
-            const clips = (_a = obj.animations) !== null && _a !== void 0 ? _a : [];
-            if (clips.length === 0) {
-                setStatusText(t('useModelEditor.noAnimationsFoundIn', 'No animations found in {name}').replace('{name}', String(file.name)));
-                return;
-            }
-            const root = rootObjectRef.current;
-            if (!root) {
-                setStatusText(t('useModelEditor.noModelLoadedLoadA', '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(/\.[^.]+$/, ''),
-                clip: c,
-                duration: c.duration,
-                source: file.name,
-            }));
-            allClipsRef.current = [...allClipsRef.current, ...newAnims];
-            setAnimations([...allClipsRef.current]);
-            setStatusText(t('useModelEditor.mergedAnimationSFrom', 'Merged {clips} animation(s) from {name}')
-                .replace('{clips}', String(clips.length))
-                .replace('{name}', String(file.name)));
-        }
-        catch (err) {
-            log.error('Merge error:', err);
-            setStatusText(t('useModelEditor.errorMerging', 'Error merging {name}: {err}')
-                .replace('{name}', String(file.name))
-                .replace('{err}', String(String(err))));
-        }
-        finally {
-            URL.revokeObjectURL(url);
-        }
-    }, [t]);
-    /* ─────────────────────────────────────────
-       Animation controls
-       ───────────────────────────────────────── */
-    const playClip = useCallback((index) => {
-        const mixer = mixerRef.current;
-        if (!mixer || index < 0 || index >= allClipsRef.current.length) {
-            return;
-        }
-        if (activeActionRef.current) {
-            activeActionRef.current.stop();
-        }
-        const anim = allClipsRef.current[index];
-        const action = mixer.clipAction(anim.clip);
-        action.reset();
-        action.setLoop(loopAnimRef.current ? THREE.LoopRepeat : THREE.LoopOnce, Infinity);
-        action.clampWhenFinished = !loopAnimRef.current;
-        action.play();
-        activeActionRef.current = action;
-        setActiveAnimIdx(index);
-        setAnimDuration(anim.duration);
-        setAnimTime(0);
-        setIsPlaying(true);
-    }, []);
-    playClipRef.current = playClip;
-    const togglePlay = useCallback(() => {
-        if (activeAnimIdx < 0 && allClipsRef.current.length > 0) {
-            playClip(0);
-            return;
-        }
-        const action = activeActionRef.current;
-        if (!action) {
-            return;
-        }
-        if (isPlayingRef.current) {
-            action.paused = true;
-            setIsPlaying(false);
-        }
-        else {
-            action.paused = false;
-            setIsPlaying(true);
-        }
-    }, [activeAnimIdx, playClip]);
-    const stopAnim = useCallback(() => {
+function useModelEditor({
+  onSaveToLibrary,
+  onAIPoseVideo
+}) {
+  const { t } = useNiceTranslation();
+  const { pendingAsk, ask } = useEditorAsk();
+  const mountRef = useRef(null);
+  const rendererRef = useRef(null);
+  const sceneRef = useRef(new THREE.Scene());
+  const cameraRef = useRef(
+    new THREE.PerspectiveCamera(50, 1, 0.01, 1e4)
+  );
+  const orbitRef = useRef(null);
+  const transformRef = useRef(null);
+  const clockRef = useRef(null);
+  clockRef.current ?? (clockRef.current = createFrameClock());
+  const mixerRef = useRef(null);
+  const rafRef = useRef(0);
+  const fileInputRef = useRef(null);
+  const mergeInputRef = useRef(null);
+  const videoInputRef = useRef(null);
+  const raycasterRef = useRef(new THREE.Raycaster());
+  const skeletonHelperRef = useRef(null);
+  const [sceneTree, setSceneTree] = useState([]);
+  const [selectedId, setSelectedId] = useState(null);
+  const [transformMode, setTransformMode] = useState("translate");
+  const [animations, setAnimations] = useState([]);
+  const [activeAnimIdx, setActiveAnimIdx] = useState(-1);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [animTime, setAnimTime] = useState(0);
+  const [animDuration, setAnimDuration] = useState(0);
+  const [animSpeed, setAnimSpeed] = useState(1);
+  const [loopAnim, setLoopAnim] = useState(true);
+  const [bottomCollapsed, setBottomCollapsed] = useState(false);
+  const [showGrid, setShowGrid] = useState(true);
+  const [showAxes, setShowAxes] = useState(true);
+  const [wireframe, setWireframe] = useState(false);
+  const [bgColor, setBgColor] = useState("var(--nice-bg, #111122)");
+  const [statusText, setStatusText] = useState("Ready");
+  const [dragOver, setDragOver] = useState(false);
+  const [polyCount, setPolyCount] = useState(0);
+  const [meshCount, setMeshCount] = useState(0);
+  const [boneCount, setBoneCount] = useState(0);
+  const [selMaterialIdx, setSelMaterialIdx] = useState(0);
+  const [matRefresh, setMatRefresh] = useState(0);
+  const [aiStatus, setAiStatus] = useState("");
+  const [aiBusy, setAiBusy] = useState(false);
+  const [shadingMode, setShadingMode] = useState("solid");
+  const [editorMode, setEditorMode] = useState("object");
+  const [contextMenu, setContextMenu] = useState(null);
+  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 [fogEnabled, setFogEnabled] = useState(false);
+  const [fogColor, setFogColor] = useState("var(--nice-bg, #111122)");
+  const [fogNear, setFogNear] = useState(10);
+  const [fogFar, setFogFar] = useState(100);
+  const [showLightHelpers, setShowLightHelpers] = useState(true);
+  const rootObjectRef = useRef(null);
+  const activeActionRef = useRef(null);
+  const allClipsRef = useRef([]);
+  const animTimeRef = useRef(animTime);
+  animTimeRef.current = animTime;
+  const isPlayingRef = useRef(isPlaying);
+  isPlayingRef.current = isPlaying;
+  const animSpeedRef = useRef(animSpeed);
+  animSpeedRef.current = animSpeed;
+  const loopAnimRef = useRef(loopAnim);
+  loopAnimRef.current = loopAnim;
+  useEffect(() => {
+    const container = mountRef.current;
+    if (!container) {
+      return;
+    }
+    const scene = sceneRef.current;
+    const camera = cameraRef.current;
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = SOFT_SHADOW_MAP;
+    renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    renderer.toneMappingExposure = 1.2;
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+    rendererRef.current = renderer;
+    container.appendChild(renderer.domElement);
+    camera.position.set(3, 2, 5);
+    camera.lookAt(0, 0, 0);
+    scene.background = new THREE.Color(
+      resolveCssColor("var(--nice-bg-primary, #111122)", container)
+    );
+    const ambientLight = new THREE.AmbientLight(16777215, 0.5);
+    ambientLight.name = "__ambient";
+    scene.add(ambientLight);
+    const dirLight = new THREE.DirectionalLight(16777215, 1.2);
+    dirLight.name = "__dirLight";
+    dirLight.position.set(5, 8, 5);
+    dirLight.castShadow = true;
+    dirLight.shadow.mapSize.set(2048, 2048);
+    dirLight.shadow.camera.near = 0.1;
+    dirLight.shadow.camera.far = 50;
+    dirLight.shadow.camera.left = -10;
+    dirLight.shadow.camera.right = 10;
+    dirLight.shadow.camera.top = 10;
+    dirLight.shadow.camera.bottom = -10;
+    scene.add(dirLight);
+    const hemiLight = new THREE.HemisphereLight(8947967, 4473890, 0.4);
+    hemiLight.name = "__hemiLight";
+    scene.add(hemiLight);
+    const ground = new THREE.Mesh(
+      new THREE.PlaneGeometry(100, 100),
+      new THREE.ShadowMaterial({ opacity: 0.15 })
+    );
+    ground.name = "__ground";
+    ground.rotation.x = -Math.PI / 2;
+    ground.receiveShadow = true;
+    scene.add(ground);
+    const grid = new THREE.GridHelper(20, 20, 3355477, 2236986);
+    grid.name = "__grid";
+    scene.add(grid);
+    const axes = new THREE.AxesHelper(2);
+    axes.name = "__axes";
+    scene.add(axes);
+    const orbit = new OrbitControls(camera, renderer.domElement);
+    orbit.enableDamping = true;
+    orbit.dampingFactor = 0.08;
+    orbit.minDistance = 0.1;
+    orbit.maxDistance = 500;
+    orbit.target.set(0, 0.5, 0);
+    orbitRef.current = orbit;
+    const tc = new TransformControls(camera, renderer.domElement);
+    const tcHelper = tc.getHelper();
+    tcHelper.name = "__transformControls";
+    tc.addEventListener("dragging-changed", (e) => {
+      orbit.enabled = !e.value;
+    });
+    scene.add(tcHelper);
+    transformRef.current = tc;
+    const onResize = () => {
+      const w = container.clientWidth;
+      const h = container.clientHeight;
+      if (w === 0 || h === 0) {
+        return;
+      }
+      camera.aspect = w / h;
+      camera.updateProjectionMatrix();
+      renderer.setSize(w, h);
+    };
+    const ro = new ResizeObserver(onResize);
+    ro.observe(container);
+    onResize();
+    const animate = () => {
+      rafRef.current = requestAnimationFrame(animate);
+      const dt = clockRef.current?.getDelta() ?? 0;
+      orbit.update();
+      if (mixerRef.current && isPlayingRef.current) {
+        mixerRef.current.update(dt * animSpeedRef.current);
         const action = activeActionRef.current;
         if (action) {
-            action.stop();
-            action.reset();
-        }
-        setIsPlaying(false);
-        setAnimTime(0);
-    }, []);
-    const seekAnim = useCallback((t) => {
-        var _a;
-        const action = activeActionRef.current;
-        if (!action) {
-            return;
+          const t2 = action.time;
+          if (Math.abs(t2 - animTimeRef.current) > 0.05) {
+            setAnimTime(t2);
+          }
         }
-        action.time = t;
-        action.paused = true;
-        setAnimTime(t);
-        setIsPlaying(false);
-        (_a = mixerRef.current) === null || _a === void 0 ? void 0 : _a.update(0);
-    }, []);
-    /* ─────────────────────────────────────────
-       Camera helpers
-       ───────────────────────────────────────── */
-    const focusOnObject = useCallback((obj) => {
-        const box = new THREE.Box3().setFromObject(obj);
-        const center = box.getCenter(new THREE.Vector3());
-        const size = box.getSize(new THREE.Vector3());
-        const maxDim = Math.max(size.x, size.y, size.z);
-        const dist = maxDim * 2;
-        const orbit = orbitRef.current;
-        if (orbit) {
-            orbit.target.copy(center);
-            cameraRef.current.position.copy(center.clone().add(new THREE.Vector3(dist * 0.6, dist * 0.4, dist * 0.8)));
-            orbit.update();
-        }
-    }, []);
-    focusOnObjectRef.current = focusOnObject;
-    const setCameraPreset = useCallback((preset) => {
-        const orbit = orbitRef.current;
-        if (!orbit) {
-            return;
-        }
-        const target = orbit.target.clone();
-        const d = cameraRef.current.position.distanceTo(target);
-        const pos = new THREE.Vector3();
-        switch (preset) {
-            case 'front':
-                pos.set(0, 0, d);
-                break;
-            case 'back':
-                pos.set(0, 0, -d);
-                break;
-            case 'left':
-                pos.set(-d, 0, 0);
-                break;
-            case 'right':
-                pos.set(d, 0, 0);
-                break;
-            case 'top':
-                pos.set(0, d, 0.001);
-                break;
-            case 'bottom':
-                pos.set(0, -d, 0.001);
-                break;
-            default:
-                return;
-        }
-        cameraRef.current.position.copy(target.clone().add(pos));
-        orbit.update();
-    }, []);
-    /* ─────────────────────────────────────────
-       Selection & transform
-       ───────────────────────────────────────── */
-    const selectObject = 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;
-        if (!tc) {
-            return;
-        }
-        if (node && node.type !== 'helper') {
-            tc.attach(node.object);
-            tc.setMode(transformMode);
-        }
-        else {
-            tc.detach();
-        }
-    }, [transformMode]);
-    useEffect(() => {
-        var _a;
-        (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.setMode(transformMode);
-    }, [transformMode]);
-    /* ─────────────────────────────────────────
-       Toggle helpers
-       ───────────────────────────────────────── */
-    useEffect(() => {
-        const scene = sceneRef.current;
-        const grid = scene.getObjectByName('__grid');
-        if (grid) {
-            grid.visible = showGrid;
-        }
-    }, [showGrid]);
-    useEffect(() => {
-        const scene = sceneRef.current;
-        const axes = scene.getObjectByName('__axes');
-        if (axes) {
-            axes.visible = showAxes;
+      }
+      renderer.render(scene, camera);
+    };
+    animate();
+    return () => {
+      cancelAnimationFrame(rafRef.current);
+      ro.disconnect();
+      const scn = scene;
+      scn.traverse((obj) => {
+        if (obj.geometry) {
+          obj.geometry.dispose();
+        }
+        if (obj.material) {
+          const mats = Array.isArray(obj.material) ? obj.material : [obj.material];
+          mats.forEach((mat) => mat.dispose());
+        }
+      });
+      if (mixerRef.current) {
+        mixerRef.current.stopAllAction();
+      }
+      renderer.dispose();
+      orbit.dispose();
+      tc.dispose();
+      if (container.contains(renderer.domElement)) {
+        container.removeChild(renderer.domElement);
+      }
+    };
+  }, []);
+  const rebuildTree = useCallback(() => {
+    const scene = sceneRef.current;
+    let polys = 0;
+    let meshes = 0;
+    let bones = 0;
+    const walk = (obj, depth) => {
+      if (obj.name.startsWith("__")) {
+        return null;
+      }
+      if (obj.type === "TransformControlsPlane" || obj.type === "TransformControlsGizmo") {
+        return null;
+      }
+      if ("isTransformControls" in obj) {
+        return null;
+      }
+      let nodeType = "group";
+      if (obj instanceof THREE.Mesh) {
+        nodeType = "mesh";
+        meshes++;
+        const geo = obj.geometry;
+        if (geo) {
+          const idx = geo.index;
+          polys += idx ? idx.count / 3 : (geo.attributes.position?.count ?? 0) / 3;
+        }
+      } else if (obj instanceof THREE.Bone) {
+        nodeType = "bone";
+        bones++;
+      } else if (obj instanceof THREE.Light) {
+        nodeType = "light";
+      } else if (obj instanceof THREE.Camera) {
+        nodeType = "camera";
+      } 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) {
+          children.push(cn);
+        }
+      }
+      return {
+        id: obj.userData.__nodeId || (obj.userData.__nodeId = nid(), obj.userData.__nodeId),
+        name: obj.name || obj.type,
+        type: nodeType,
+        object: obj,
+        children,
+        expanded: depth < 2,
+        visible: obj.visible
+      };
+    };
+    const roots = [];
+    for (const c of scene.children) {
+      const n = walk(c, 0);
+      if (n) {
+        roots.push(n);
+      }
+    }
+    setSceneTree(roots);
+    setPolyCount(Math.round(polys));
+    setMeshCount(meshes);
+    setBoneCount(bones);
+  }, []);
+  const playClipRef = useRef(() => {
+  });
+  const focusOnObjectRef = useRef(() => {
+  });
+  const addObjectToScene = useCallback(
+    (obj, clips, filename) => {
+      const scene = sceneRef.current;
+      obj.traverse((child) => {
+        if (child instanceof THREE.Mesh) {
+          child.castShadow = true;
+          child.receiveShadow = true;
+        }
+      });
+      const box = new THREE.Box3().setFromObject(obj);
+      const size = box.getSize(new THREE.Vector3());
+      const maxDim = Math.max(size.x, size.y, size.z);
+      if (maxDim > 0.01) {
+        const targetSize = 3;
+        const scale = targetSize / maxDim;
+        if (scale < 0.5 || scale > 2) {
+          obj.scale.multiplyScalar(scale);
+        }
+      }
+      const box2 = new THREE.Box3().setFromObject(obj);
+      const center = box2.getCenter(new THREE.Vector3());
+      obj.position.sub(center);
+      obj.position.y += box2.getSize(new THREE.Vector3()).y / 2;
+      obj.name = obj.name || filename;
+      scene.add(obj);
+      rootObjectRef.current = obj;
+      if (clips.length > 0) {
+        const mixer = new THREE.AnimationMixer(obj);
+        mixerRef.current = mixer;
+        const newAnims = clips.map((c) => ({
+          name: c.name || "Animation",
+          clip: c,
+          duration: c.duration,
+          source: filename
+        }));
+        allClipsRef.current = [...allClipsRef.current, ...newAnims];
+        setAnimations([...allClipsRef.current]);
+        if (allClipsRef.current.length > 0) {
+          playClipRef.current(0);
+        }
+      } else if (!mixerRef.current && rootObjectRef.current) {
+        mixerRef.current = new THREE.AnimationMixer(rootObjectRef.current);
+      }
+      focusOnObjectRef.current(obj);
+      rebuildTree();
+      setStatusText(
+        t("useModelEditor.loadedAnimationS", "Loaded: {filename} ({clips} animation(s))").replace("{filename}", String(filename)).replace("{clips}", String(clips.length))
+      );
+    },
+    [rebuildTree, t]
+  );
+  const loadFile = useCallback(
+    async (file) => {
+      const name = file.name.toLowerCase();
+      const ext = "." + name.split(".").pop();
+      const url = URL.createObjectURL(file);
+      setStatusText(
+        t("useModelEditor.loading", "Loading {name}...").replace("{name}", String(file.name))
+      );
+      try {
+        if (ext === ".fbx") {
+          const loader = new FBXLoader();
+          const obj = await new Promise(
+            (res, rej) => loader.load(url, res, void 0, rej)
+          );
+          addObjectToScene(obj, obj.animations ?? [], file.name);
+        } else if (ext === ".glb" || ext === ".gltf") {
+          const loader = new GLTFLoader();
+          const gltf = await new Promise(
+            (res, rej) => loader.load(url, res, void 0, rej)
+          );
+          addObjectToScene(gltf.scene, gltf.animations ?? [], file.name);
+        } else if (ext === ".obj") {
+          const loader = new OBJLoader();
+          const obj = await new Promise(
+            (res, rej) => loader.load(url, res, void 0, rej)
+          );
+          addObjectToScene(obj, [], file.name);
+        } else if (ext === ".dae") {
+          const loader = new ColladaLoader();
+          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, void 0, rej)
+            )
+          );
+          addObjectToScene(collada.scene, collada.scene?.animations ?? [], file.name);
+        } else if (ext === ".stl") {
+          const loader = new STLLoader();
+          const geo = await new Promise(
+            (res, rej) => loader.load(url, res, void 0, rej)
+          );
+          const mat = new THREE.MeshStandardMaterial({
+            color: 8947848,
+            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") {
+          const loader = new PLYLoader();
+          const geo = await new Promise(
+            (res, rej) => loader.load(url, res, void 0, rej)
+          );
+          geo.computeVertexNormals();
+          const mat = new THREE.MeshStandardMaterial({
+            color: 8947848,
+            vertexColors: geo.hasAttribute("color")
+          });
+          const mesh = new THREE.Mesh(geo, mat);
+          mesh.name = file.name;
+          addObjectToScene(mesh, [], file.name);
+        } else if (ext === ".3ds") {
+          const loader = new TDSLoader();
+          const obj = await new Promise(
+            (res, rej) => loader.load(url, res, void 0, rej)
+          );
+          addObjectToScene(obj, [], file.name);
+        } else if (ext === ".3mf") {
+          const loader = new ThreeMFLoader();
+          const obj = await new Promise(
+            (res, rej) => loader.load(url, res, void 0, rej)
+          );
+          addObjectToScene(obj, [], file.name);
+        } else if (ext === ".amf") {
+          const loader = new AMFLoader();
+          const obj = await new Promise(
+            (res, rej) => loader.load(url, res, void 0, rej)
+          );
+          addObjectToScene(obj, [], file.name);
+        } else if (ext === ".pcd") {
+          const loader = new PCDLoader();
+          const points = await new Promise(
+            (res, rej) => loader.load(url, res, void 0, rej)
+          );
+          points.name = file.name;
+          addObjectToScene(points, [], file.name);
+        } else if (ext === ".vtk" || ext === ".vtp") {
+          const loader = new VTKLoader();
+          const geo = await new Promise(
+            (res, rej) => loader.load(url, res, void 0, rej)
+          );
+          geo.computeVertexNormals();
+          const mat = new THREE.MeshStandardMaterial({ color: 8947848, side: THREE.DoubleSide });
+          const mesh = new THREE.Mesh(geo, mat);
+          mesh.name = file.name;
+          addObjectToScene(mesh, [], file.name);
+        } else if (ext === ".wrl" || ext === ".vrml") {
+          const { VRMLLoader } = await import("three/examples/jsm/loaders/VRMLLoader.js");
+          const loader = new VRMLLoader();
+          const scn = await new Promise(
+            (res, rej) => loader.load(url, res, void 0, rej)
+          );
+          const group = new THREE.Group();
+          group.name = file.name;
+          while (scn.children.length) {
+            group.add(scn.children[0]);
+          }
+          addObjectToScene(group, [], file.name);
+        } else if (ext === ".gcode") {
+          const loader = new GCodeLoader();
+          const obj = await new Promise(
+            (res, rej) => loader.load(url, res, void 0, rej)
+          );
+          addObjectToScene(obj, [], file.name);
+        } else if (ext === ".svg") {
+          const loader = new SVGLoader();
+          const data = await new Promise(
+            (res, rej) => (
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any -- SVGLoader callback type widens beyond SVGResult
+              loader.load(url, res, void 0, 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: path.color?.getHex?.() || 8947848,
+                side: THREE.DoubleSide
+              });
+              const mesh = new THREE.Mesh(geo, mat);
+              group.add(mesh);
+            }
+          }
+          group.scale.set(0.01, -0.01, 0.01);
+          addObjectToScene(group, [], file.name);
+        } else {
+          setStatusText(
+            t("useModelEditor.unsupportedFormat", "Unsupported format: {ext}").replace(
+              "{ext}",
+              String(ext)
+            )
+          );
+        }
+      } catch (err) {
+        log.error("Load error:", err);
+        setStatusText(
+          t("useModelEditor.errorLoading", "Error loading {name}: {err}").replace("{name}", String(file.name)).replace("{err}", String(String(err)))
+        );
+      } finally {
+        URL.revokeObjectURL(url);
+      }
+    },
+    [addObjectToScene, t]
+  );
+  const mergeAnimationFBX = useCallback(
+    async (file) => {
+      const url = URL.createObjectURL(file);
+      setStatusText(
+        t("useModelEditor.mergingAnimationsFrom", "Merging animations from {name}...").replace(
+          "{name}",
+          String(file.name)
+        )
+      );
+      try {
+        const loader = new FBXLoader();
+        const obj = await new Promise(
+          (res, rej) => loader.load(url, res, void 0, rej)
+        );
+        const clips = obj.animations ?? [];
+        if (clips.length === 0) {
+          setStatusText(
+            t("useModelEditor.noAnimationsFoundIn", "No animations found in {name}").replace(
+              "{name}",
+              String(file.name)
+            )
+          );
+          return;
         }
-    }, [showAxes]);
-    useEffect(() => {
-        // bgColor starts as a var() token; THREE.Color cannot parse it and falls back to
-        // white, which overwrote the resolved background set up when the scene was built.
-        sceneRef.current.background = new THREE.Color(resolveCssColor(bgColor, mountRef.current));
-    }, [bgColor]);
-    useEffect(() => {
         const root = rootObjectRef.current;
         if (!root) {
-            return;
-        }
-        root.traverse((child) => {
-            if (child instanceof THREE.Mesh) {
-                const mats = Array.isArray(child.material) ? child.material : [child.material];
-                mats.forEach((m) => {
-                    if ('wireframe' in m) {
-                        m.wireframe = wireframe;
-                    }
-                });
-            }
-        });
-    }, [wireframe]);
-    /* ─────────────────────────────────────────
-       Viewport shading mode
-       ───────────────────────────────────────── */
-    useEffect(() => {
-        const renderer = rendererRef.current;
-        if (!renderer) {
-            return;
-        }
-        const scene = sceneRef.current;
-        switch (shadingMode) {
-            case 'wireframe':
-                scene.traverse((obj) => {
-                    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;
-                            }
-                        });
-                    }
-                });
-                renderer.toneMapping = THREE.NoToneMapping;
-                renderer.toneMappingExposure = 1;
-                break;
-            case 'solid':
-                scene.traverse((obj) => {
-                    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;
-                            }
-                        });
-                    }
-                });
-                renderer.toneMapping = THREE.NoToneMapping;
-                renderer.toneMappingExposure = 1;
-                break;
-            case 'material':
-                scene.traverse((obj) => {
-                    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;
-                            }
-                        });
-                    }
-                });
-                renderer.toneMapping = THREE.ACESFilmicToneMapping;
-                renderer.toneMappingExposure = 1.2;
-                break;
-            case 'rendered':
-                scene.traverse((obj) => {
-                    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;
-                            }
-                        });
-                    }
-                });
-                renderer.toneMapping = THREE.ACESFilmicToneMapping;
-                renderer.toneMappingExposure = 1.5;
-                break;
-        }
-    }, [shadingMode]);
-    /* Gizmo space */
-    useEffect(() => {
-        var _a;
-        (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.setSpace(gizmoSpace);
-    }, [gizmoSpace]);
-    /* Snap settings */
-    useEffect(() => {
-        const tc = transformRef.current;
-        if (!tc) {
-            return;
-        }
-        if (snapEnabled) {
-            tc.setTranslationSnap(snapGrid);
-            tc.setRotationSnap(THREE.MathUtils.degToRad(15));
-            tc.setScaleSnap(0.25);
-        }
-        else {
-            tc.setTranslationSnap(null);
-            tc.setRotationSnap(null);
-            tc.setScaleSnap(null);
-        }
-    }, [snapEnabled, snapGrid]);
-    /* Skeleton helper */
-    useEffect(() => {
-        const scene = sceneRef.current;
-        if (skeletonHelperRef.current) {
-            scene.remove(skeletonHelperRef.current);
-            skeletonHelperRef.current = null;
-        }
-        if (!showSkeleton || !rootObjectRef.current) {
-            return;
-        }
-        let hasRig = false;
-        rootObjectRef.current.traverse((obj) => {
-            if (obj instanceof THREE.SkinnedMesh) {
-                hasRig = true;
-            }
-        });
-        if (hasRig) {
-            const helper = new THREE.SkeletonHelper(rootObjectRef.current);
-            helper.name = '__skeletonHelper';
-            scene.add(helper);
-            skeletonHelperRef.current = helper;
-        }
-    }, [showSkeleton, sceneTree]);
-    /* Fog */
-    useEffect(() => {
-        if (fogEnabled) {
-            sceneRef.current.fog = new THREE.Fog(resolveCssColor(fogColor, mountRef.current), fogNear, fogFar);
-        }
-        else {
-            sceneRef.current.fog = null;
-        }
-    }, [fogEnabled, fogColor, fogNear, fogFar]);
-    /* Light helpers visibility */
-    useEffect(() => {
-        sceneRef.current.traverse((obj) => {
-            if (obj.name.startsWith('__helper_')) {
-                obj.visible = showLightHelpers;
-            }
-        });
-    }, [showLightHelpers, sceneTree]);
-    /* ─────────────────────────────────────────
-       Drag-and-drop
-       ───────────────────────────────────────── */
-    const handleDragOver = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setDragOver(true);
-    }, []);
-    const handleDragLeave = useCallback((e) => {
-        e.preventDefault();
-        setDragOver(false);
-    }, []);
-    const handleDrop = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setDragOver(false);
-        const files = Array.from(e.dataTransfer.files);
-        files.forEach((f) => {
-            const ext = '.' + f.name.toLowerCase().split('.').pop();
-            if (SUPPORTED_EXTENSIONS.includes(ext)) {
-                loadFile(f);
-            }
+          setStatusText(
+            t("useModelEditor.noModelLoadedLoadA", "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(/\.[^.]+$/, ""),
+          clip: c,
+          duration: c.duration,
+          source: file.name
+        }));
+        allClipsRef.current = [...allClipsRef.current, ...newAnims];
+        setAnimations([...allClipsRef.current]);
+        setStatusText(
+          t("useModelEditor.mergedAnimationSFrom", "Merged {clips} animation(s) from {name}").replace("{clips}", String(clips.length)).replace("{name}", String(file.name))
+        );
+      } catch (err) {
+        log.error("Merge error:", err);
+        setStatusText(
+          t("useModelEditor.errorMerging", "Error merging {name}: {err}").replace("{name}", String(file.name)).replace("{err}", String(String(err)))
+        );
+      } finally {
+        URL.revokeObjectURL(url);
+      }
+    },
+    [t]
+  );
+  const playClip = useCallback((index) => {
+    const mixer = mixerRef.current;
+    if (!mixer || index < 0 || index >= allClipsRef.current.length) {
+      return;
+    }
+    if (activeActionRef.current) {
+      activeActionRef.current.stop();
+    }
+    const anim = allClipsRef.current[index];
+    const action = mixer.clipAction(anim.clip);
+    action.reset();
+    action.setLoop(loopAnimRef.current ? THREE.LoopRepeat : THREE.LoopOnce, Infinity);
+    action.clampWhenFinished = !loopAnimRef.current;
+    action.play();
+    activeActionRef.current = action;
+    setActiveAnimIdx(index);
+    setAnimDuration(anim.duration);
+    setAnimTime(0);
+    setIsPlaying(true);
+  }, []);
+  playClipRef.current = playClip;
+  const togglePlay = useCallback(() => {
+    if (activeAnimIdx < 0 && allClipsRef.current.length > 0) {
+      playClip(0);
+      return;
+    }
+    const action = activeActionRef.current;
+    if (!action) {
+      return;
+    }
+    if (isPlayingRef.current) {
+      action.paused = true;
+      setIsPlaying(false);
+    } else {
+      action.paused = false;
+      setIsPlaying(true);
+    }
+  }, [activeAnimIdx, playClip]);
+  const stopAnim = useCallback(() => {
+    const action = activeActionRef.current;
+    if (action) {
+      action.stop();
+      action.reset();
+    }
+    setIsPlaying(false);
+    setAnimTime(0);
+  }, []);
+  const seekAnim = useCallback((t2) => {
+    const action = activeActionRef.current;
+    if (!action) {
+      return;
+    }
+    action.time = t2;
+    action.paused = true;
+    setAnimTime(t2);
+    setIsPlaying(false);
+    mixerRef.current?.update(0);
+  }, []);
+  const focusOnObject = useCallback((obj) => {
+    const box = new THREE.Box3().setFromObject(obj);
+    const center = box.getCenter(new THREE.Vector3());
+    const size = box.getSize(new THREE.Vector3());
+    const maxDim = Math.max(size.x, size.y, size.z);
+    const dist = maxDim * 2;
+    const orbit = orbitRef.current;
+    if (orbit) {
+      orbit.target.copy(center);
+      cameraRef.current.position.copy(
+        center.clone().add(new THREE.Vector3(dist * 0.6, dist * 0.4, dist * 0.8))
+      );
+      orbit.update();
+    }
+  }, []);
+  focusOnObjectRef.current = focusOnObject;
+  const setCameraPreset = useCallback((preset) => {
+    const orbit = orbitRef.current;
+    if (!orbit) {
+      return;
+    }
+    const target = orbit.target.clone();
+    const d = cameraRef.current.position.distanceTo(target);
+    const pos = new THREE.Vector3();
+    switch (preset) {
+      case "front":
+        pos.set(0, 0, d);
+        break;
+      case "back":
+        pos.set(0, 0, -d);
+        break;
+      case "left":
+        pos.set(-d, 0, 0);
+        break;
+      case "right":
+        pos.set(d, 0, 0);
+        break;
+      case "top":
+        pos.set(0, d, 1e-3);
+        break;
+      case "bottom":
+        pos.set(0, -d, 1e-3);
+        break;
+      default:
+        return;
+    }
+    cameraRef.current.position.copy(target.clone().add(pos));
+    orbit.update();
+  }, []);
+  const selectObject = useCallback(
+    (node) => {
+      setSelectedId(node?.id ?? null);
+      const tc = transformRef.current;
+      if (!tc) {
+        return;
+      }
+      if (node && node.type !== "helper") {
+        tc.attach(node.object);
+        tc.setMode(transformMode);
+      } else {
+        tc.detach();
+      }
+    },
+    [transformMode]
+  );
+  useEffect(() => {
+    transformRef.current?.setMode(transformMode);
+  }, [transformMode]);
+  useEffect(() => {
+    const scene = sceneRef.current;
+    const grid = scene.getObjectByName("__grid");
+    if (grid) {
+      grid.visible = showGrid;
+    }
+  }, [showGrid]);
+  useEffect(() => {
+    const scene = sceneRef.current;
+    const axes = scene.getObjectByName("__axes");
+    if (axes) {
+      axes.visible = showAxes;
+    }
+  }, [showAxes]);
+  useEffect(() => {
+    sceneRef.current.background = new THREE.Color(resolveCssColor(bgColor, mountRef.current));
+  }, [bgColor]);
+  useEffect(() => {
+    const root = rootObjectRef.current;
+    if (!root) {
+      return;
+    }
+    root.traverse((child) => {
+      if (child instanceof THREE.Mesh) {
+        const mats = Array.isArray(child.material) ? child.material : [child.material];
+        mats.forEach((m) => {
+          if ("wireframe" in m) {
+            m.wireframe = wireframe;
+          }
         });
-    }, [loadFile]);
-    /* ─────────────────────────────────────────
-       Helpers
-       ───────────────────────────────────────── */
-    const selectedNode = useMemo(() => (selectedId ? findNodeById(sceneTree, selectedId) : null), [selectedId, sceneTree]);
-    const selectedMaterials = useMemo(() => {
-        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) {
-            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) {
-            return;
-        }
-        const clone = selectedNode.object.clone(true);
-        clone.name = selectedNode.object.name + '.001';
-        clone.position.x += 1;
-        sceneRef.current.add(clone);
-        rebuildTree();
-        setStatusText(t('useModelEditor.duplicated', 'Duplicated {name}').replace('{name}', String(selectedNode.name)));
-    }, [selectedNode, rebuildTree, t]);
-    /* ─────────────────────────────────────────
-       Keyboard shortcuts
-       ───────────────────────────────────────── */
-    useEffect(() => {
-        // Escape, then Tab, leaves the viewport, where Tab cycles the mode (WCAG 2.1.2)
-        let tabEscape = false;
-        const handleKey = (e) => {
-            var _a, _b, _c, _d;
-            // a key sent to the window itself counts as the body's
-            const target = e.target instanceof HTMLElement ? e.target : null;
-            const tag = target === null || target === void 0 ? void 0 : target.tagName;
-            if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || (target === null || target === void 0 ? void 0 : target.isContentEditable)) {
-                return;
-            }
-            // The shortcuts are this editor's: keys elsewhere on the page are not, and Tab / Space on
-            // one of its controls move focus and press it. They listened on the whole page — Tab moved
-            // focus nowhere on a page with the editor and Space pressed no button (TODO_1.3.0 I4).
-            const root = (_b = (_a = mountRef.current) === null || _a === void 0 ? void 0 : _a.closest('.nice-app-shell')) !== null && _b !== void 0 ? _b : mountRef.current;
-            if (target && target !== document.body && !(root === null || root === void 0 ? void 0 : root.contains(target))) {
-                return;
-            }
-            if ((e.key === 'Tab' || e.key === ' ') &&
-                (target === null || target === void 0 ? void 0 : target.closest('button, a[href], [role="button"], [role="combobox"], [role="menuitem"], [role="tab"], [role="option"], [role="checkbox"], [role="switch"], [role="slider"], [role="treeitem"]'))) {
-                return;
-            }
-            if (e.key === 'Tab' && tabEscape) {
-                tabEscape = false;
-                return;
-            }
-            if (!['Shift', 'Control', 'Alt', 'Meta'].includes(e.key)) {
-                tabEscape = e.key === 'Escape';
-            }
-            switch (e.key.toLowerCase()) {
-                case 'g':
-                    setTransformMode('translate');
-                    break;
-                case 'r':
-                    setTransformMode('rotate');
-                    break;
-                case 's':
-                    if (!e.ctrlKey) {
-                        setTransformMode('scale');
-                    }
-                    break;
-                case ' ':
-                    e.preventDefault();
-                    togglePlay();
-                    break;
-                case 'f':
-                    if (rootObjectRef.current) {
-                        focusOnObject(rootObjectRef.current);
-                    }
-                    break;
-                case 'delete':
-                    if (selectedId) {
-                        const sel = findNodeById(sceneTree, selectedId);
-                        if (sel) {
-                            sel.object.removeFromParent();
-                            (_c = transformRef.current) === null || _c === void 0 ? void 0 : _c.detach();
-                            setSelectedId(null);
-                            rebuildTree();
-                        }
-                    }
-                    break;
-                case 'x':
-                    if (e.ctrlKey && selectedId) {
-                        const sel = findNodeById(sceneTree, selectedId);
-                        if (sel) {
-                            sel.object.removeFromParent();
-                            (_d = transformRef.current) === null || _d === void 0 ? void 0 : _d.detach();
-                            setSelectedId(null);
-                            rebuildTree();
-                        }
-                    }
-                    break;
-                case 'd':
-                    if (e.shiftKey) {
-                        e.preventDefault();
-                        duplicateSelected();
-                    }
-                    break;
-                case 'tab':
-                    e.preventDefault();
-                    setEditorMode((m) => (m === 'object' ? 'edit' : m === 'edit' ? 'pose' : 'object'));
-                    break;
-                case 'n':
-                    if (!e.ctrlKey) ;
-                    break;
-                case '1':
-                    if (e.code.startsWith('Numpad')) {
-                        setCameraPreset('front');
-                    }
-                    break;
-                case '3':
-                    if (e.code.startsWith('Numpad')) {
-                        setCameraPreset('right');
-                    }
-                    break;
-                case '7':
-                    if (e.code.startsWith('Numpad')) {
-                        setCameraPreset('top');
-                    }
-                    break;
-                case '4':
-                    if (e.code.startsWith('Numpad')) {
-                        setCameraPreset('left');
-                    }
-                    break;
-                case '6':
-                    if (e.code.startsWith('Numpad')) {
-                        setCameraPreset('right');
-                    }
-                    break;
-                case '9':
-                    if (e.code.startsWith('Numpad')) {
-                        setCameraPreset('back');
-                    }
-                    break;
-                case '2':
-                    if (e.code.startsWith('Numpad')) {
-                        setCameraPreset('bottom');
-                    }
-                    break;
-            }
-            if (e.key === 'Escape') {
-                setAddMenuOpen(null);
-                setContextMenu(null);
-            }
-        };
-        window.addEventListener('keydown', handleKey);
-        return () => window.removeEventListener('keydown', handleKey);
-    }, [
-        togglePlay,
-        focusOnObject,
-        selectedId,
-        sceneTree,
-        rebuildTree,
-        setCameraPreset,
-        duplicateSelected,
-    ]);
-    /* ─────────────────────────────────────────
-       File input handlers
-       ───────────────────────────────────────── */
-    const handleFileInput = useCallback((e) => {
-        const files = e.target.files;
-        if (!files) {
-            return;
-        }
-        Array.from(files).forEach(loadFile);
-        e.target.value = '';
-    }, [loadFile]);
-    const handleMergeInput = useCallback((e) => {
-        const files = e.target.files;
-        if (!files) {
-            return;
-        }
-        Array.from(files).forEach(mergeAnimationFBX);
-        e.target.value = '';
-    }, [mergeAnimationFBX]);
-    /* ─────────────────────────────────────────
-       Export functions
-       ───────────────────────────────────────── */
-    const exportGLTF = useCallback((binary) => {
-        const root = rootObjectRef.current;
-        if (!root) {
-            setStatusText(t('useModelEditor.nothingToExport', 'Nothing to export'));
-            return;
-        }
-        const exporter = new GLTFExporter();
-        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' });
-            }
-            else {
-                blob = new Blob([JSON.stringify(result, null, 2)], { type: 'application/json' });
-            }
-            const a = document.createElement('a');
-            a.href = URL.createObjectURL(blob);
-            a.download = `export.${binary ? 'glb' : 'gltf'}`;
-            a.click();
-            URL.revokeObjectURL(a.href);
-            setStatusText(t('useModelEditor.exportedFormat', 'Exported {format} successfully').replace('{format}', binary ? 'GLB' : 'GLTF'));
-        }, (err) => {
-            log.error('Export error:', err);
-            setStatusText(t('useModelEditor.exportError', 'Export error: {err}').replace('{err}', String(String(err))));
-        }, options);
-    }, [t]);
-    const exportOBJ = useCallback(() => {
-        const root = rootObjectRef.current;
-        if (!root) {
-            setStatusText(t('useModelEditor.nothingToExport', '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');
-        a.href = URL.createObjectURL(blob);
-        a.download = 'export.obj';
-        a.click();
-        URL.revokeObjectURL(a.href);
-        setStatusText(t('useModelEditor.exportedFormat', 'Exported {format} successfully').replace('{format}', 'OBJ'));
-    }, [t]);
-    const exportSTL = useCallback((binary) => {
-        const root = rootObjectRef.current;
-        if (!root) {
-            setStatusText(t('useModelEditor.nothingToExport', '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' });
-        }
-        else {
-            blob = new Blob([result], { type: 'text/plain' });
-        }
-        const a = document.createElement('a');
-        a.href = URL.createObjectURL(blob);
-        a.download = 'export.stl';
-        a.click();
-        URL.revokeObjectURL(a.href);
-        setStatusText(t('useModelEditor.exportedFormat', 'Exported {format} successfully').replace('{format}', binary ? t('useModelEditor.stlBinary', 'STL (binary)') : 'STL'));
-    }, [t]);
-    const exportPLY = useCallback((binary) => {
-        const root = rootObjectRef.current;
-        if (!root) {
-            setStatusText(t('useModelEditor.nothingToExport', 'Nothing to export'));
-            return;
-        }
-        const exporter = new PLYExporter();
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        exporter.parse(root, (result) => {
-            let blob;
-            if (binary) {
-                blob = new Blob([result], { type: 'application/octet-stream' });
-            }
-            else {
-                blob = new Blob([result], { type: 'text/plain' });
-            }
-            const a = document.createElement('a');
-            a.href = URL.createObjectURL(blob);
-            a.download = 'export.ply';
-            a.click();
-            URL.revokeObjectURL(a.href);
-            setStatusText(t('useModelEditor.exportedFormat', 'Exported {format} successfully').replace('{format}', binary ? t('useModelEditor.plyBinary', 'PLY (binary)') : 'PLY'));
-        }, { binary });
-    }, [t]);
-    const exportUSDZ = useCallback(async () => {
-        const root = rootObjectRef.current;
-        if (!root) {
-            setStatusText(t('useModelEditor.nothingToExport', 'Nothing to export'));
-            return;
-        }
-        try {
-            const exporter = new USDZExporter();
-            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);
+      }
+    });
+  }, [wireframe]);
+  useEffect(() => {
+    const renderer = rendererRef.current;
+    if (!renderer) {
+      return;
+    }
+    const scene = sceneRef.current;
+    switch (shadingMode) {
+      case "wireframe":
+        scene.traverse((obj) => {
+          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;
+              }
             });
-            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.click();
-            URL.revokeObjectURL(a.href);
-            setStatusText(t('useModelEditor.exportedFormat', 'Exported {format} successfully').replace('{format}', 'USDZ'));
-        }
-        catch (err) {
-            log.error('USDZ export error:', err);
-            setStatusText(t('useModelEditor.usdzExportError', 'USDZ export error: {err}').replace('{err}', String(String(err))));
-        }
-    }, [t]);
-    /* ─────────────────────────────────────────
-       Dispose & clear
-       ───────────────────────────────────────── */
-    const disposeObject = useCallback((obj) => {
-        obj.traverse((child) => {
-            if (child.geometry) {
-                child.geometry.dispose();
-            }
-            if (child.material) {
-                const mats = Array.isArray(child.material)
-                    ? child.material
-                    : [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') {
-                            m[prop].dispose();
-                        }
-                    });
-                    mat.dispose();
-                });
-            }
+          }
         });
-    }, []);
-    const clearSceneNow = useCallback(() => {
-        var _a;
-        const scene = sceneRef.current;
-        const toRemove = [];
+        renderer.toneMapping = THREE.NoToneMapping;
+        renderer.toneMappingExposure = 1;
+        break;
+      case "solid":
         scene.traverse((obj) => {
-            if (!obj.name.startsWith('__') && obj !== scene && obj.parent === scene) {
-                toRemove.push(obj);
-            }
-        });
-        toRemove.forEach((o) => {
-            disposeObject(o);
-            scene.remove(o);
+          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;
+              }
+            });
+          }
         });
-        if (mixerRef.current) {
-            mixerRef.current.stopAllAction();
-            if (rootObjectRef.current) {
-                mixerRef.current.uncacheRoot(rootObjectRef.current);
-            }
-        }
-        (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.detach();
-        rootObjectRef.current = null;
-        mixerRef.current = null;
-        activeActionRef.current = null;
-        allClipsRef.current = [];
-        setAnimations([]);
-        setActiveAnimIdx(-1);
-        setIsPlaying(false);
-        setAnimTime(0);
-        setAnimDuration(0);
-        setSelectedId(null);
-        rebuildTree();
-        setStatusText(t('useModelEditor.sceneCleared', 'Scene cleared'));
-    }, [rebuildTree, disposeObject, t]);
-    // asks first: clearing cannot be undone
-    const clearScene = useCallback(() => {
-        void ask('confirm', 'Clear the entire scene? This cannot be undone.').then((answer) => {
-            if (answer !== null) {
-                clearSceneNow();
-            }
+        renderer.toneMapping = THREE.NoToneMapping;
+        renderer.toneMappingExposure = 1;
+        break;
+      case "material":
+        scene.traverse((obj) => {
+          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;
+              }
+            });
+          }
         });
-    }, [ask, clearSceneNow]);
-    /* ─────────────────────────────────────────
-       Save to Library
-       ───────────────────────────────────────── */
-    const saveToLibrary = useCallback(() => {
-        if (!onSaveToLibrary) {
-            return;
-        }
-        const root = rootObjectRef.current;
-        if (!root) {
-            setStatusText(t('useModelEditor.nothingToSave', 'Nothing to save'));
-            return;
-        }
-        const exporter = new GLTFExporter();
-        exporter.parse(root, (result) => {
-            const blob = new Blob([result], { type: 'model/gltf-binary' });
-            const reader = new FileReader();
-            reader.onload = () => {
-                const dataUrl = reader.result;
-                void ask('prompt', 'Save to library as:', 'model.glb').then((name) => {
-                    if (name && name.trim()) {
-                        onSaveToLibrary(dataUrl, name.trim(), 'model/gltf-binary');
-                    }
-                });
-            };
-            reader.readAsDataURL(blob);
-        }, (err) => {
-            log.error('Save to library error:', err);
-            setStatusText(t('useModelEditor.saveError', 'Save error: {err}').replace('{err}', String(String(err))));
-        }, { binary: true, animations: allClipsRef.current.map((a) => a.clip) });
-    }, [onSaveToLibrary, ask, t]);
-    /* ─────────────────────────────────────────
-       Add Mesh / Light / Camera / Empty
-       ───────────────────────────────────────── */
-    const addPrimitive = useCallback((type) => {
-        let geo;
-        switch (type) {
-            case 'cube':
-                geo = new THREE.BoxGeometry(1, 1, 1);
-                break;
-            case 'sphere':
-                geo = new THREE.SphereGeometry(0.5, 32, 32);
-                break;
-            case 'cylinder':
-                geo = new THREE.CylinderGeometry(0.5, 0.5, 1, 32);
-                break;
-            case 'cone':
-                geo = new THREE.ConeGeometry(0.5, 1, 32);
-                break;
-            case 'torus':
-                geo = new THREE.TorusGeometry(0.5, 0.2, 16, 32);
-                break;
-            case 'plane':
-                geo = new THREE.PlaneGeometry(2, 2);
-                break;
-            case 'circle':
-                geo = new THREE.CircleGeometry(0.5, 32);
-                break;
-            case 'ring':
-                geo = new THREE.RingGeometry(0.3, 0.5, 32);
-                break;
-            case 'dodecahedron':
-                geo = new THREE.DodecahedronGeometry(0.5);
-                break;
-            case 'icosahedron':
-                geo = new THREE.IcosahedronGeometry(0.5);
-                break;
-            case 'octahedron':
-                geo = new THREE.OctahedronGeometry(0.5);
-                break;
-            case 'tetrahedron':
-                geo = new THREE.TetrahedronGeometry(0.5);
-                break;
-            case 'torusKnot':
-                geo = new THREE.TorusKnotGeometry(0.4, 0.15, 64, 16);
-                break;
-            default:
-                return;
-        }
-        const mat = new THREE.MeshStandardMaterial({
-            color: 0x888888,
-            metalness: 0.1,
-            roughness: 0.7,
+        renderer.toneMapping = THREE.ACESFilmicToneMapping;
+        renderer.toneMappingExposure = 1.2;
+        break;
+      case "rendered":
+        scene.traverse((obj) => {
+          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;
+              }
+            });
+          }
         });
-        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') {
-            mesh.rotation.x = -Math.PI / 2;
-            mesh.position.y = 0.001;
-        }
-        else {
-            mesh.position.y = 0.5;
-        }
-        sceneRef.current.add(mesh);
-        rebuildTree();
-        setStatusText(t('useModelEditor.added', 'Added {name}').replace('{name}', String(mesh.name)));
-        setAddMenuOpen(null);
-    }, [rebuildTree, t]);
-    const addSceneLight = useCallback((type) => {
-        let light;
-        switch (type) {
-            case 'point': {
-                const l = new THREE.PointLight(0xffffff, 1, 20);
-                l.position.set(0, 3, 0);
-                l.castShadow = true;
-                light = l;
-                break;
-            }
-            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': {
-                const l = new THREE.DirectionalLight(0xffffff, 1);
-                l.position.set(3, 5, 3);
-                l.castShadow = true;
-                light = l;
-                break;
-            }
-            case 'hemisphere': {
-                light = new THREE.HemisphereLight(0x8888ff, 0x442200, 0.5);
-                break;
-            }
-            default:
-                return;
-        }
-        light.name = type.charAt(0).toUpperCase() + type.slice(1) + 'Light';
-        sceneRef.current.add(light);
-        let helper = null;
-        if (light instanceof THREE.PointLight) {
-            helper = new THREE.PointLightHelper(light, 0.3);
-        }
-        else if (light instanceof THREE.SpotLight) {
-            helper = new THREE.SpotLightHelper(light);
-        }
-        else if (light instanceof THREE.DirectionalLight) {
-            helper = new THREE.DirectionalLightHelper(light, 0.5);
-        }
-        else if (light instanceof THREE.HemisphereLight) {
-            helper = new THREE.HemisphereLightHelper(light, 0.3);
-        }
-        if (helper) {
-            helper.name = `__helper_${light.name}`;
-            sceneRef.current.add(helper);
-        }
-        rebuildTree();
-        setStatusText(t('useModelEditor.added', 'Added {name}').replace('{name}', String(light.name)));
+        renderer.toneMapping = THREE.ACESFilmicToneMapping;
+        renderer.toneMappingExposure = 1.5;
+        break;
+    }
+  }, [shadingMode]);
+  useEffect(() => {
+    transformRef.current?.setSpace(gizmoSpace);
+  }, [gizmoSpace]);
+  useEffect(() => {
+    const tc = transformRef.current;
+    if (!tc) {
+      return;
+    }
+    if (snapEnabled) {
+      tc.setTranslationSnap(snapGrid);
+      tc.setRotationSnap(THREE.MathUtils.degToRad(15));
+      tc.setScaleSnap(0.25);
+    } else {
+      tc.setTranslationSnap(null);
+      tc.setRotationSnap(null);
+      tc.setScaleSnap(null);
+    }
+  }, [snapEnabled, snapGrid]);
+  useEffect(() => {
+    const scene = sceneRef.current;
+    if (skeletonHelperRef.current) {
+      scene.remove(skeletonHelperRef.current);
+      skeletonHelperRef.current = null;
+    }
+    if (!showSkeleton || !rootObjectRef.current) {
+      return;
+    }
+    let hasRig = false;
+    rootObjectRef.current.traverse((obj) => {
+      if (obj instanceof THREE.SkinnedMesh) {
+        hasRig = true;
+      }
+    });
+    if (hasRig) {
+      const helper = new THREE.SkeletonHelper(rootObjectRef.current);
+      helper.name = "__skeletonHelper";
+      scene.add(helper);
+      skeletonHelperRef.current = helper;
+    }
+  }, [showSkeleton, sceneTree]);
+  useEffect(() => {
+    if (fogEnabled) {
+      sceneRef.current.fog = new THREE.Fog(
+        resolveCssColor(fogColor, mountRef.current),
+        fogNear,
+        fogFar
+      );
+    } else {
+      sceneRef.current.fog = null;
+    }
+  }, [fogEnabled, fogColor, fogNear, fogFar]);
+  useEffect(() => {
+    sceneRef.current.traverse((obj) => {
+      if (obj.name.startsWith("__helper_")) {
+        obj.visible = showLightHelpers;
+      }
+    });
+  }, [showLightHelpers, sceneTree]);
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(true);
+  }, []);
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    setDragOver(false);
+  }, []);
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragOver(false);
+      const files = Array.from(e.dataTransfer.files);
+      files.forEach((f) => {
+        const ext = "." + f.name.toLowerCase().split(".").pop();
+        if (SUPPORTED_EXTENSIONS.includes(ext)) {
+          loadFile(f);
+        }
+      });
+    },
+    [loadFile]
+  );
+  const selectedNode = useMemo(
+    () => selectedId ? findNodeById(sceneTree, selectedId) : null,
+    [selectedId, sceneTree]
+  );
+  const selectedMaterials = useMemo(() => {
+    if (!selectedNode || !(selectedNode.object instanceof THREE.Mesh)) {
+      return [];
+    }
+    const m = selectedNode.object.material;
+    return Array.isArray(m) ? m : [m];
+  }, [selectedNode, matRefresh]);
+  const deleteSelected = useCallback(() => {
+    if (!selectedNode) {
+      return;
+    }
+    selectedNode.object.removeFromParent();
+    transformRef.current?.detach();
+    setSelectedId(null);
+    rebuildTree();
+  }, [selectedNode, rebuildTree]);
+  const duplicateSelected = useCallback(() => {
+    if (!selectedNode) {
+      return;
+    }
+    const clone = selectedNode.object.clone(true);
+    clone.name = selectedNode.object.name + ".001";
+    clone.position.x += 1;
+    sceneRef.current.add(clone);
+    rebuildTree();
+    setStatusText(
+      t("useModelEditor.duplicated", "Duplicated {name}").replace(
+        "{name}",
+        String(selectedNode.name)
+      )
+    );
+  }, [selectedNode, rebuildTree, t]);
+  useEffect(() => {
+    let tabEscape = false;
+    const handleKey = (e) => {
+      const target = e.target instanceof HTMLElement ? e.target : null;
+      const tag = target?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target?.isContentEditable) {
+        return;
+      }
+      const root = mountRef.current?.closest(".nice-app-shell") ?? mountRef.current;
+      if (target && target !== document.body && !root?.contains(target)) {
+        return;
+      }
+      if ((e.key === "Tab" || e.key === " ") && target?.closest(
+        'button, a[href], [role="button"], [role="combobox"], [role="menuitem"], [role="tab"], [role="option"], [role="checkbox"], [role="switch"], [role="slider"], [role="treeitem"]'
+      )) {
+        return;
+      }
+      if (e.key === "Tab" && tabEscape) {
+        tabEscape = false;
+        return;
+      }
+      if (!["Shift", "Control", "Alt", "Meta"].includes(e.key)) {
+        tabEscape = e.key === "Escape";
+      }
+      switch (e.key.toLowerCase()) {
+        case "g":
+          setTransformMode("translate");
+          break;
+        case "r":
+          setTransformMode("rotate");
+          break;
+        case "s":
+          if (!e.ctrlKey) {
+            setTransformMode("scale");
+          }
+          break;
+        case " ":
+          e.preventDefault();
+          togglePlay();
+          break;
+        case "f":
+          if (rootObjectRef.current) {
+            focusOnObject(rootObjectRef.current);
+          }
+          break;
+        case "delete":
+          if (selectedId) {
+            const sel = findNodeById(sceneTree, selectedId);
+            if (sel) {
+              sel.object.removeFromParent();
+              transformRef.current?.detach();
+              setSelectedId(null);
+              rebuildTree();
+            }
+          }
+          break;
+        case "x":
+          if (e.ctrlKey && selectedId) {
+            const sel = findNodeById(sceneTree, selectedId);
+            if (sel) {
+              sel.object.removeFromParent();
+              transformRef.current?.detach();
+              setSelectedId(null);
+              rebuildTree();
+            }
+          }
+          break;
+        case "d":
+          if (e.shiftKey) {
+            e.preventDefault();
+            duplicateSelected();
+          }
+          break;
+        case "tab":
+          e.preventDefault();
+          setEditorMode((m) => m === "object" ? "edit" : m === "edit" ? "pose" : "object");
+          break;
+        case "n":
+          if (!e.ctrlKey) ;
+          break;
+        case "1":
+          if (e.code.startsWith("Numpad")) {
+            setCameraPreset("front");
+          }
+          break;
+        case "3":
+          if (e.code.startsWith("Numpad")) {
+            setCameraPreset("right");
+          }
+          break;
+        case "7":
+          if (e.code.startsWith("Numpad")) {
+            setCameraPreset("top");
+          }
+          break;
+        case "4":
+          if (e.code.startsWith("Numpad")) {
+            setCameraPreset("left");
+          }
+          break;
+        case "6":
+          if (e.code.startsWith("Numpad")) {
+            setCameraPreset("right");
+          }
+          break;
+        case "9":
+          if (e.code.startsWith("Numpad")) {
+            setCameraPreset("back");
+          }
+          break;
+        case "2":
+          if (e.code.startsWith("Numpad")) {
+            setCameraPreset("bottom");
+          }
+          break;
+      }
+      if (e.key === "Escape") {
         setAddMenuOpen(null);
-    }, [rebuildTree, t]);
-    const addCameraObject = useCallback(() => {
-        const cam = new THREE.PerspectiveCamera(50, 16 / 9, 0.1, 1000);
-        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';
+        setContextMenu(null);
+      }
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [
+    togglePlay,
+    focusOnObject,
+    selectedId,
+    sceneTree,
+    rebuildTree,
+    setCameraPreset,
+    duplicateSelected
+  ]);
+  const handleFileInput = useCallback(
+    (e) => {
+      const files = e.target.files;
+      if (!files) {
+        return;
+      }
+      Array.from(files).forEach(loadFile);
+      e.target.value = "";
+    },
+    [loadFile]
+  );
+  const handleMergeInput = useCallback(
+    (e) => {
+      const files = e.target.files;
+      if (!files) {
+        return;
+      }
+      Array.from(files).forEach(mergeAnimationFBX);
+      e.target.value = "";
+    },
+    [mergeAnimationFBX]
+  );
+  const exportGLTF = useCallback(
+    (binary) => {
+      const root = rootObjectRef.current;
+      if (!root) {
+        setStatusText(t("useModelEditor.nothingToExport", "Nothing to export"));
+        return;
+      }
+      const exporter = new GLTFExporter();
+      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" });
+          } else {
+            blob = new Blob([JSON.stringify(result, null, 2)], { type: "application/json" });
+          }
+          const a = document.createElement("a");
+          a.href = URL.createObjectURL(blob);
+          a.download = `export.${binary ? "glb" : "gltf"}`;
+          a.click();
+          URL.revokeObjectURL(a.href);
+          setStatusText(
+            t("useModelEditor.exportedFormat", "Exported {format} successfully").replace(
+              "{format}",
+              binary ? "GLB" : "GLTF"
+            )
+          );
+        },
+        (err) => {
+          log.error("Export error:", err);
+          setStatusText(
+            t("useModelEditor.exportError", "Export error: {err}").replace(
+              "{err}",
+              String(String(err))
+            )
+          );
+        },
+        options
+      );
+    },
+    [t]
+  );
+  const exportOBJ = useCallback(() => {
+    const root = rootObjectRef.current;
+    if (!root) {
+      setStatusText(t("useModelEditor.nothingToExport", "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");
+    a.href = URL.createObjectURL(blob);
+    a.download = "export.obj";
+    a.click();
+    URL.revokeObjectURL(a.href);
+    setStatusText(
+      t("useModelEditor.exportedFormat", "Exported {format} successfully").replace(
+        "{format}",
+        "OBJ"
+      )
+    );
+  }, [t]);
+  const exportSTL = useCallback(
+    (binary) => {
+      const root = rootObjectRef.current;
+      if (!root) {
+        setStatusText(t("useModelEditor.nothingToExport", "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" });
+      } else {
+        blob = new Blob([result], { type: "text/plain" });
+      }
+      const a = document.createElement("a");
+      a.href = URL.createObjectURL(blob);
+      a.download = "export.stl";
+      a.click();
+      URL.revokeObjectURL(a.href);
+      setStatusText(
+        t("useModelEditor.exportedFormat", "Exported {format} successfully").replace(
+          "{format}",
+          binary ? t("useModelEditor.stlBinary", "STL (binary)") : "STL"
+        )
+      );
+    },
+    [t]
+  );
+  const exportPLY = useCallback(
+    (binary) => {
+      const root = rootObjectRef.current;
+      if (!root) {
+        setStatusText(t("useModelEditor.nothingToExport", "Nothing to export"));
+        return;
+      }
+      const exporter = new PLYExporter();
+      exporter.parse(
+        root,
+        (result) => {
+          let blob;
+          if (binary) {
+            blob = new Blob([result], { type: "application/octet-stream" });
+          } else {
+            blob = new Blob([result], { type: "text/plain" });
+          }
+          const a = document.createElement("a");
+          a.href = URL.createObjectURL(blob);
+          a.download = "export.ply";
+          a.click();
+          URL.revokeObjectURL(a.href);
+          setStatusText(
+            t("useModelEditor.exportedFormat", "Exported {format} successfully").replace(
+              "{format}",
+              binary ? t("useModelEditor.plyBinary", "PLY (binary)") : "PLY"
+            )
+          );
+        },
+        { binary }
+      );
+    },
+    [t]
+  );
+  const exportUSDZ = useCallback(async () => {
+    const root = rootObjectRef.current;
+    if (!root) {
+      setStatusText(t("useModelEditor.nothingToExport", "Nothing to export"));
+      return;
+    }
+    try {
+      const exporter = new USDZExporter();
+      const result = await new Promise((resolve) => {
+        exporter.parse(root, resolve);
+      });
+      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.click();
+      URL.revokeObjectURL(a.href);
+      setStatusText(
+        t("useModelEditor.exportedFormat", "Exported {format} successfully").replace(
+          "{format}",
+          "USDZ"
+        )
+      );
+    } catch (err) {
+      log.error("USDZ export error:", err);
+      setStatusText(
+        t("useModelEditor.usdzExportError", "USDZ export error: {err}").replace(
+          "{err}",
+          String(String(err))
+        )
+      );
+    }
+  }, [t]);
+  const disposeObject = useCallback((obj) => {
+    obj.traverse((child) => {
+      if (child.geometry) {
+        child.geometry.dispose();
+      }
+      if (child.material) {
+        const mats = Array.isArray(child.material) ? child.material : [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") {
+              m[prop].dispose();
+            }
+          });
+          mat.dispose();
+        });
+      }
+    });
+  }, []);
+  const clearSceneNow = useCallback(() => {
+    const scene = sceneRef.current;
+    const toRemove = [];
+    scene.traverse((obj) => {
+      if (!obj.name.startsWith("__") && obj !== scene && obj.parent === scene) {
+        toRemove.push(obj);
+      }
+    });
+    toRemove.forEach((o) => {
+      disposeObject(o);
+      scene.remove(o);
+    });
+    if (mixerRef.current) {
+      mixerRef.current.stopAllAction();
+      if (rootObjectRef.current) {
+        mixerRef.current.uncacheRoot(rootObjectRef.current);
+      }
+    }
+    transformRef.current?.detach();
+    rootObjectRef.current = null;
+    mixerRef.current = null;
+    activeActionRef.current = null;
+    allClipsRef.current = [];
+    setAnimations([]);
+    setActiveAnimIdx(-1);
+    setIsPlaying(false);
+    setAnimTime(0);
+    setAnimDuration(0);
+    setSelectedId(null);
+    rebuildTree();
+    setStatusText(t("useModelEditor.sceneCleared", "Scene cleared"));
+  }, [rebuildTree, disposeObject, t]);
+  const clearScene = useCallback(() => {
+    void ask("confirm", "Clear the entire scene? This cannot be undone.").then((answer) => {
+      if (answer !== null) {
+        clearSceneNow();
+      }
+    });
+  }, [ask, clearSceneNow]);
+  const saveToLibrary = useCallback(() => {
+    if (!onSaveToLibrary) {
+      return;
+    }
+    const root = rootObjectRef.current;
+    if (!root) {
+      setStatusText(t("useModelEditor.nothingToSave", "Nothing to save"));
+      return;
+    }
+    const exporter = new GLTFExporter();
+    exporter.parse(
+      root,
+      (result) => {
+        const blob = new Blob([result], { type: "model/gltf-binary" });
+        const reader = new FileReader();
+        reader.onload = () => {
+          const dataUrl = reader.result;
+          void ask("prompt", "Save to library as:", "model.glb").then((name) => {
+            if (name && name.trim()) {
+              onSaveToLibrary(dataUrl, name.trim(), "model/gltf-binary");
+            }
+          });
+        };
+        reader.readAsDataURL(blob);
+      },
+      (err) => {
+        log.error("Save to library error:", err);
+        setStatusText(
+          t("useModelEditor.saveError", "Save error: {err}").replace("{err}", String(String(err)))
+        );
+      },
+      { binary: true, animations: allClipsRef.current.map((a) => a.clip) }
+    );
+  }, [onSaveToLibrary, ask, t]);
+  const addPrimitive = useCallback(
+    (type) => {
+      let geo;
+      switch (type) {
+        case "cube":
+          geo = new THREE.BoxGeometry(1, 1, 1);
+          break;
+        case "sphere":
+          geo = new THREE.SphereGeometry(0.5, 32, 32);
+          break;
+        case "cylinder":
+          geo = new THREE.CylinderGeometry(0.5, 0.5, 1, 32);
+          break;
+        case "cone":
+          geo = new THREE.ConeGeometry(0.5, 1, 32);
+          break;
+        case "torus":
+          geo = new THREE.TorusGeometry(0.5, 0.2, 16, 32);
+          break;
+        case "plane":
+          geo = new THREE.PlaneGeometry(2, 2);
+          break;
+        case "circle":
+          geo = new THREE.CircleGeometry(0.5, 32);
+          break;
+        case "ring":
+          geo = new THREE.RingGeometry(0.3, 0.5, 32);
+          break;
+        case "dodecahedron":
+          geo = new THREE.DodecahedronGeometry(0.5);
+          break;
+        case "icosahedron":
+          geo = new THREE.IcosahedronGeometry(0.5);
+          break;
+        case "octahedron":
+          geo = new THREE.OctahedronGeometry(0.5);
+          break;
+        case "tetrahedron":
+          geo = new THREE.TetrahedronGeometry(0.5);
+          break;
+        case "torusKnot":
+          geo = new THREE.TorusKnotGeometry(0.4, 0.15, 64, 16);
+          break;
+        default:
+          return;
+      }
+      const mat = new THREE.MeshStandardMaterial({
+        color: 8947848,
+        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") {
+        mesh.rotation.x = -Math.PI / 2;
+        mesh.position.y = 1e-3;
+      } else {
+        mesh.position.y = 0.5;
+      }
+      sceneRef.current.add(mesh);
+      rebuildTree();
+      setStatusText(t("useModelEditor.added", "Added {name}").replace("{name}", String(mesh.name)));
+      setAddMenuOpen(null);
+    },
+    [rebuildTree, t]
+  );
+  const addSceneLight = useCallback(
+    (type) => {
+      let light;
+      switch (type) {
+        case "point": {
+          const l = new THREE.PointLight(16777215, 1, 20);
+          l.position.set(0, 3, 0);
+          l.castShadow = true;
+          light = l;
+          break;
+        }
+        case "spot": {
+          const l = new THREE.SpotLight(16777215, 1, 20, Math.PI / 6, 0.3);
+          l.position.set(0, 4, 2);
+          l.castShadow = true;
+          light = l;
+          break;
+        }
+        case "directional": {
+          const l = new THREE.DirectionalLight(16777215, 1);
+          l.position.set(3, 5, 3);
+          l.castShadow = true;
+          light = l;
+          break;
+        }
+        case "hemisphere": {
+          light = new THREE.HemisphereLight(8947967, 4465152, 0.5);
+          break;
+        }
+        default:
+          return;
+      }
+      light.name = type.charAt(0).toUpperCase() + type.slice(1) + "Light";
+      sceneRef.current.add(light);
+      let helper = null;
+      if (light instanceof THREE.PointLight) {
+        helper = new THREE.PointLightHelper(light, 0.3);
+      } else if (light instanceof THREE.SpotLight) {
+        helper = new THREE.SpotLightHelper(light);
+      } else if (light instanceof THREE.DirectionalLight) {
+        helper = new THREE.DirectionalLightHelper(light, 0.5);
+      } else if (light instanceof THREE.HemisphereLight) {
+        helper = new THREE.HemisphereLightHelper(light, 0.3);
+      }
+      if (helper) {
+        helper.name = `__helper_${light.name}`;
         sceneRef.current.add(helper);
-        rebuildTree();
-        setStatusText(t('useModelEditor.addedCamera', 'Added Camera'));
-        setAddMenuOpen(null);
-    }, [rebuildTree, t]);
-    const addEmpty = useCallback((type) => {
-        const obj = new THREE.Object3D();
-        obj.name =
-            type === 'arrows' ? 'Empty_Arrows' : type === 'cube_empty' ? 'Empty_Cube' : 'Empty';
-        sceneRef.current.add(obj);
-        if (type === 'arrows') {
-            const h = new THREE.AxesHelper(0.5);
-            h.name = '__emptyAxes';
-            obj.add(h);
-        }
-        rebuildTree();
-        setStatusText(t('useModelEditor.added', 'Added {name}').replace('{name}', String(obj.name)));
-        setAddMenuOpen(null);
-    }, [rebuildTree, t]);
-    /* ─────────────────────────────────────────
-       Raycaster click-to-select
-       ───────────────────────────────────────── */
-    const handleViewportClick = useCallback((e) => {
-        if (editorMode !== 'object') {
-            return;
-        }
-        if (!mountRef.current || !rendererRef.current || !cameraRef.current) {
-            return;
-        }
-        if (e.target !== rendererRef.current.domElement) {
+      }
+      rebuildTree();
+      setStatusText(
+        t("useModelEditor.added", "Added {name}").replace("{name}", String(light.name))
+      );
+      setAddMenuOpen(null);
+    },
+    [rebuildTree, t]
+  );
+  const addCameraObject = useCallback(() => {
+    const cam = new THREE.PerspectiveCamera(50, 16 / 9, 0.1, 1e3);
+    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";
+    sceneRef.current.add(helper);
+    rebuildTree();
+    setStatusText(t("useModelEditor.addedCamera", "Added Camera"));
+    setAddMenuOpen(null);
+  }, [rebuildTree, t]);
+  const addEmpty = useCallback(
+    (type) => {
+      const obj = new THREE.Object3D();
+      obj.name = type === "arrows" ? "Empty_Arrows" : type === "cube_empty" ? "Empty_Cube" : "Empty";
+      sceneRef.current.add(obj);
+      if (type === "arrows") {
+        const h = new THREE.AxesHelper(0.5);
+        h.name = "__emptyAxes";
+        obj.add(h);
+      }
+      rebuildTree();
+      setStatusText(t("useModelEditor.added", "Added {name}").replace("{name}", String(obj.name)));
+      setAddMenuOpen(null);
+    },
+    [rebuildTree, t]
+  );
+  const handleViewportClick = useCallback(
+    (e) => {
+      if (editorMode !== "object") {
+        return;
+      }
+      if (!mountRef.current || !rendererRef.current || !cameraRef.current) {
+        return;
+      }
+      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("__")) {
+          meshes.push(obj);
+        }
+      });
+      const intersects = raycasterRef.current.intersectObjects(meshes, false);
+      if (intersects.length > 0) {
+        const hit = intersects[0].object;
+        const nodeId = hit.userData.__nodeId;
+        if (nodeId) {
+          const node = findNodeById(sceneTree, nodeId);
+          if (node) {
+            selectObject(node);
             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('__')) {
-                meshes.push(obj);
-            }
-        });
-        const intersects = raycasterRef.current.intersectObjects(meshes, false);
-        if (intersects.length > 0) {
-            const hit = intersects[0].object;
-            const nodeId = hit.userData.__nodeId;
-            if (nodeId) {
-                const node = findNodeById(sceneTree, nodeId);
-                if (node) {
-                    selectObject(node);
-                    return;
-                }
-            }
-            rebuildTree();
-        }
-        else {
-            selectObject(null);
-        }
-    }, [editorMode, sceneTree, selectObject, rebuildTree]);
-    /* ─────────────────────────────────────────
-       Context menu
-       ───────────────────────────────────────── */
-    const handleContextMenu = useCallback((e) => {
+        rebuildTree();
+      } else {
+        selectObject(null);
+      }
+    },
+    [editorMode, sceneTree, selectObject, rebuildTree]
+  );
+  const handleContextMenu = useCallback((e) => {
+    e.preventDefault();
+    setContextMenu({ x: e.clientX, y: e.clientY });
+  }, []);
+  const closeContextMenu = useCallback(() => setContextMenu(null), []);
+  useEffect(() => {
+    if (!contextMenu) {
+      return;
+    }
+    const close = () => setContextMenu(null);
+    window.addEventListener("click", close);
+    return () => window.removeEventListener("click", close);
+  }, [contextMenu]);
+  const handleAIVideo = useCallback(
+    async (e) => {
+      const file = e.target.files?.[0];
+      if (!file) {
+        return;
+      }
+      e.target.value = "";
+      if (!onAIPoseVideo) {
+        setAiStatus(
+          t("useModelEditor.aiPoseCallbackNotConfigured", "AI pose callback not configured.")
+        );
+        return;
+      }
+      setAiBusy(true);
+      setAiStatus(
+        t("useModelEditor.uploadingVideoForAiPose", "Uploading video for AI pose estimation...")
+      );
+      try {
+        const result = await onAIPoseVideo(file);
+        setAiStatus(
+          t(
+            "useModelEditor.gotFramesAtFpsCreating",
+            "Got {frame_count} frames at {fps} fps. Creating animation clip..."
+          ).replace("{frame_count}", String(result.frame_count)).replace("{fps}", String(result.fps))
+        );
+        const clip = pose3dToClip(result);
+        if (clip && rootObjectRef.current) {
+          if (!mixerRef.current) {
+            mixerRef.current = new THREE.AnimationMixer(rootObjectRef.current);
+          }
+          const newAnim = {
+            name: `AI: ${file.name}`,
+            clip,
+            duration: clip.duration,
+            source: file.name
+          };
+          allClipsRef.current = [...allClipsRef.current, newAnim];
+          setAnimations([...allClipsRef.current]);
+          playClip(allClipsRef.current.length - 1);
+          setAiStatus(
+            t("useModelEditor.animationCreatedSuccessfully", "Animation created successfully!")
+          );
+        } else {
+          setAiStatus(
+            t(
+              "useModelEditor.couldNotCreateAnimationLoad",
+              "Could not create animation — load a rigged model first."
+            )
+          );
+        }
+      } catch (err) {
+        log.error("AI pose error:", err);
+        setAiStatus(
+          t("useModelEditor.error", "Error: {err}").replace("{err}", String(String(err)))
+        );
+      } finally {
+        setAiBusy(false);
+      }
+    },
+    [playClip, onAIPoseVideo, t]
+  );
+  const toggleNodeVisibility = useCallback(
+    (node) => {
+      node.object.visible = !node.object.visible;
+      rebuildTree();
+    },
+    [rebuildTree]
+  );
+  const toggleNodeExpanded = useCallback((node) => {
+    node.expanded = !node.expanded;
+    setSceneTree((prev) => [...prev]);
+  }, []);
+  const undoRedoRef = useRef(new UndoRedoStack());
+  const [_undoRedoVer, setUndoRedoVer] = useState(0);
+  const pushUndo = useCallback((action) => {
+    undoRedoRef.current.push(action);
+    setUndoRedoVer((v) => v + 1);
+  }, []);
+  const undo = useCallback(() => {
+    const label = undoRedoRef.current.undo();
+    if (label) {
+      setStatusText(t("useModelEditor.undo", "Undo: {label}").replace("{label}", String(label)));
+      rebuildTree();
+    }
+    setUndoRedoVer((v) => v + 1);
+  }, [rebuildTree, t]);
+  const redo = useCallback(() => {
+    const label = undoRedoRef.current.redo();
+    if (label) {
+      setStatusText(t("useModelEditor.redo", "Redo: {label}").replace("{label}", String(label)));
+      rebuildTree();
+    }
+    setUndoRedoVer((v) => v + 1);
+  }, [rebuildTree, t]);
+  const canUndo = undoRedoRef.current.canUndo();
+  const canRedo = undoRedoRef.current.canRedo();
+  const undoLabel = undoRedoRef.current.undoLabel;
+  const redoLabel = undoRedoRef.current.redoLabel;
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      const target = e.target instanceof HTMLElement ? e.target : null;
+      const tag = target?.tagName;
+      const root = mountRef.current?.closest(".nice-app-shell") ?? mountRef.current;
+      if (tag === "INPUT" || tag === "TEXTAREA" || target?.isContentEditable || target && target !== document.body && !root?.contains(target)) {
+        return;
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey) {
         e.preventDefault();
-        setContextMenu({ x: e.clientX, y: e.clientY });
-    }, []);
-    const closeContextMenu = useCallback(() => setContextMenu(null), []);
-    useEffect(() => {
-        if (!contextMenu) {
-            return;
-        }
-        const close = () => setContextMenu(null);
-        window.addEventListener('click', close);
-        return () => window.removeEventListener('click', close);
-    }, [contextMenu]);
-    /* ─────────────────────────────────────────
-       AI animation from video
-       ───────────────────────────────────────── */
-    const handleAIVideo = useCallback(async (e) => {
-        var _a;
-        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (!file) {
-            return;
-        }
-        e.target.value = '';
-        if (!onAIPoseVideo) {
-            setAiStatus(t('useModelEditor.aiPoseCallbackNotConfigured', 'AI pose callback not configured.'));
-            return;
-        }
-        setAiBusy(true);
-        setAiStatus(t('useModelEditor.uploadingVideoForAiPose', 'Uploading video for AI pose estimation...'));
+        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]);
+  const loadFiles = useCallback(
+    async (files) => {
+      const fileArray = Array.from(files).filter((f) => {
+        const ext = f.name.substring(f.name.lastIndexOf(".")).toLowerCase();
+        return SUPPORTED_EXTENSIONS.includes(ext);
+      });
+      if (fileArray.length === 0) {
+        setStatusText(t("useModelEditor.noSupportedFilesFound", "No supported files found"));
+        return;
+      }
+      setStatusText(
+        t("useModelEditor.importingFileS", "Importing {fileArray} file(s)...").replace(
+          "{fileArray}",
+          String(fileArray.length)
+        )
+      );
+      let loaded = 0;
+      for (const file of fileArray) {
         try {
-            const result = await onAIPoseVideo(file);
-            setAiStatus(t('useModelEditor.gotFramesAtFpsCreating', 'Got {frame_count} frames at {fps} fps. Creating animation clip...')
-                .replace('{frame_count}', String(result.frame_count))
-                .replace('{fps}', String(result.fps)));
-            const clip = pose3dToClip(result);
-            if (clip && rootObjectRef.current) {
-                if (!mixerRef.current) {
-                    mixerRef.current = new THREE.AnimationMixer(rootObjectRef.current);
-                }
-                const newAnim = {
-                    name: `AI: ${file.name}`,
-                    clip,
-                    duration: clip.duration,
-                    source: file.name,
-                };
-                allClipsRef.current = [...allClipsRef.current, newAnim];
-                setAnimations([...allClipsRef.current]);
-                playClip(allClipsRef.current.length - 1);
-                setAiStatus(t('useModelEditor.animationCreatedSuccessfully', 'Animation created successfully!'));
-            }
-            else {
-                setAiStatus(t('useModelEditor.couldNotCreateAnimationLoad', 'Could not create animation — load a rigged model first.'));
-            }
-        }
-        catch (err) {
-            log.error('AI pose error:', err);
-            setAiStatus(t('useModelEditor.error', 'Error: {err}').replace('{err}', String(String(err))));
-        }
-        finally {
-            setAiBusy(false);
-        }
-    }, [playClip, onAIPoseVideo, t]);
-    /* ─────────────────────────────────────────
-       Node helpers
-       ───────────────────────────────────────── */
-    const toggleNodeVisibility = useCallback((node) => {
-        node.object.visible = !node.object.visible;
-        rebuildTree();
-    }, [rebuildTree]);
-    const toggleNodeExpanded = useCallback((node) => {
-        node.expanded = !node.expanded;
-        setSceneTree((prev) => [...prev]);
-    }, []);
-    /* ─────────────────────────────────────────
-       Undo / Redo
-       ───────────────────────────────────────── */
-    const undoRedoRef = useRef(new UndoRedoStack());
-    const [_undoRedoVer, setUndoRedoVer] = useState(0);
-    const pushUndo = useCallback((action) => {
-        undoRedoRef.current.push(action);
-        setUndoRedoVer((v) => v + 1);
-    }, []);
-    const undo = useCallback(() => {
-        const label = undoRedoRef.current.undo();
-        if (label) {
-            setStatusText(t('useModelEditor.undo', 'Undo: {label}').replace('{label}', String(label)));
-            rebuildTree();
-        }
-        setUndoRedoVer((v) => v + 1);
-    }, [rebuildTree, t]);
-    const redo = useCallback(() => {
-        const label = undoRedoRef.current.redo();
-        if (label) {
-            setStatusText(t('useModelEditor.redo', 'Redo: {label}').replace('{label}', String(label)));
-            rebuildTree();
-        }
-        setUndoRedoVer((v) => v + 1);
-    }, [rebuildTree, t]);
-    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 — in this editor only, and not in a text field, whose own
-    // undo they took (on the whole page before)
-    useEffect(() => {
-        const handleKeyDown = (e) => {
-            var _a, _b;
-            const target = e.target instanceof HTMLElement ? e.target : null;
-            const tag = target === null || target === void 0 ? void 0 : target.tagName;
-            const root = (_b = (_a = mountRef.current) === null || _a === void 0 ? void 0 : _a.closest('.nice-app-shell')) !== null && _b !== void 0 ? _b : mountRef.current;
-            if (tag === 'INPUT' ||
-                tag === 'TEXTAREA' ||
-                (target === null || target === void 0 ? void 0 : target.isContentEditable) ||
-                (target && target !== document.body && !(root === null || root === void 0 ? void 0 : root.contains(target)))) {
-                return;
-            }
-            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 = useCallback(async (files) => {
-        const fileArray = Array.from(files).filter((f) => {
-            const ext = f.name.substring(f.name.lastIndexOf('.')).toLowerCase();
-            return SUPPORTED_EXTENSIONS.includes(ext);
-        });
-        if (fileArray.length === 0) {
-            setStatusText(t('useModelEditor.noSupportedFilesFound', 'No supported files found'));
-            return;
-        }
-        setStatusText(t('useModelEditor.importingFileS', 'Importing {fileArray} file(s)...').replace('{fileArray}', String(fileArray.length)));
-        let loaded = 0;
-        for (const file of fileArray) {
-            try {
-                await loadFile(file);
-                loaded++;
-                setStatusText(t('useModelEditor.imported', 'Imported {loaded}/{fileArray}: {name}')
-                    .replace('{loaded}', String(loaded))
-                    .replace('{fileArray}', String(fileArray.length))
-                    .replace('{name}', String(file.name)));
-            }
-            catch (err) {
-                log.error(`Failed to import ${file.name}:`, err);
-            }
-        }
-        setStatusText(t('useModelEditor.batchImportCompleteFilesLoaded', 'Batch import complete: {loaded}/{fileArray} files loaded')
-            .replace('{loaded}', String(loaded))
-            .replace('{fileArray}', String(fileArray.length)));
-    }, [loadFile, t]);
-    /* ─────────────────────────────────────────
-       PBR Presets
-       ───────────────────────────────────────── */
-    const applyPreset = useCallback((preset) => {
-        const node = selectedNode;
-        if (!node || !(node.object instanceof THREE.Mesh)) {
-            setStatusText(t('useModelEditor.selectAMeshToApply', '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 = createMaterialFromPreset(preset);
-        // Copy existing textures if present
-        if (oldMaterial instanceof THREE.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)) {
+          await loadFile(file);
+          loaded++;
+          setStatusText(
+            t("useModelEditor.imported", "Imported {loaded}/{fileArray}: {name}").replace("{loaded}", String(loaded)).replace("{fileArray}", String(fileArray.length)).replace("{name}", String(file.name))
+          );
+        } catch (err) {
+          log.error(`Failed to import ${file.name}:`, err);
+        }
+      }
+      setStatusText(
+        t(
+          "useModelEditor.batchImportCompleteFilesLoaded",
+          "Batch import complete: {loaded}/{fileArray} files loaded"
+        ).replace("{loaded}", String(loaded)).replace("{fileArray}", String(fileArray.length))
+      );
+    },
+    [loadFile, t]
+  );
+  const applyPreset = useCallback(
+    (preset) => {
+      const node = selectedNode;
+      if (!node || !(node.object instanceof THREE.Mesh)) {
+        setStatusText(
+          t("useModelEditor.selectAMeshToApply", "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;
+      }
+      const oldClone = oldMaterial.clone();
+      const materialIdx = selMaterialIdx;
+      const newMaterial = createMaterialFromPreset(preset);
+      if (oldMaterial instanceof THREE.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: t("useModelEditor.applyPreset", "Apply {name} preset").replace(
+          "{name}",
+          String(preset.name)
+        ),
+        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 {
+          } else {
             mesh.material = newMaterial;
-        }
-        pushUndo({
-            label: t('useModelEditor.applyPreset', 'Apply {name} preset').replace('{name}', String(preset.name)),
-            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(t('useModelEditor.appliedPreset', 'Applied {name} preset').replace('{name}', String(preset.name)));
-    }, [selectedNode, selMaterialIdx, pushUndo, t]);
-    /* ─────────────────────────────────────────
-       LOD Generation
-       ───────────────────────────────────────── */
-    const generateSelectedLOD = useCallback(() => {
-        const node = selectedNode;
-        if (!node || !(node.object instanceof THREE.Mesh)) {
-            setStatusText(t('useModelEditor.selectAMeshToGenerate', 'Select a mesh to generate LOD'));
-            return;
-        }
-        const mesh = node.object;
-        const parent = mesh.parent || sceneRef.current;
-        const lod = generateLOD(mesh);
+          }
+        }
+      });
+      setMatRefresh((v) => v + 1);
+      setStatusText(
+        t("useModelEditor.appliedPreset", "Applied {name} preset").replace(
+          "{name}",
+          String(preset.name)
+        )
+      );
+    },
+    [selectedNode, selMaterialIdx, pushUndo, t]
+  );
+  const generateSelectedLOD = useCallback(() => {
+    const node = selectedNode;
+    if (!node || !(node.object instanceof THREE.Mesh)) {
+      setStatusText(t("useModelEditor.selectAMeshToGenerate", "Select a mesh to generate LOD"));
+      return;
+    }
+    const mesh = node.object;
+    const parent = mesh.parent || sceneRef.current;
+    const lod = generateLOD(mesh);
+    parent.remove(mesh);
+    parent.add(lod);
+    pushUndo({
+      label: t("useModelEditor.generateLodFor", "Generate LOD for {name}").replace(
+        "{name}",
+        String(mesh.name)
+      ),
+      undo: () => {
+        parent.remove(lod);
+        parent.add(mesh);
+      },
+      redo: () => {
         parent.remove(mesh);
         parent.add(lod);
-        pushUndo({
-            label: t('useModelEditor.generateLodFor', 'Generate LOD for {name}').replace('{name}', String(mesh.name)),
-            undo: () => {
-                parent.remove(lod);
-                parent.add(mesh);
-            },
-            redo: () => {
-                parent.remove(mesh);
-                parent.add(lod);
-            },
-        });
-        rebuildTree();
-        setStatusText(t('useModelEditor.generatedLodFor4Levels', 'Generated LOD for {name} (4 levels)').replace('{name}', String(mesh.name)));
-    }, [selectedNode, pushUndo, rebuildTree, t]);
-    /* ─────────────────────────────────────────
-       Instancing
-       ───────────────────────────────────────── */
-    const convertSelectedToInstanced = useCallback(() => {
-        const root = rootObjectRef.current || sceneRef.current;
-        const result = convertToInstanced(root);
-        if (result.created === 0) {
-            setStatusText(t('useModelEditor.noDuplicateMeshesFoundTo', 'No duplicate meshes found to instance'));
-            return;
-        }
-        rebuildTree();
-        setStatusText(t('useModelEditor.createdInstancedMeshesRemovedDuplicates', 'Created {created} instanced meshes, removed {removed} duplicates')
-            .replace('{created}', String(result.created))
-            .replace('{removed}', String(result.removed)));
-    }, [rebuildTree, t]);
-    /* ── HDRI Environment ── */
-    const applyHDRI = useCallback((preset) => {
-        const renderer = rendererRef.current;
-        if (!renderer) {
-            return;
-        }
-        applyHDRIPreset(sceneRef.current, renderer, preset);
-        setBgColor(`#${new THREE.Color(preset.bgColor).getHexString()}`);
-        if (preset.fog) {
-            setFogEnabled(true);
-            setFogColor(`#${new THREE.Color(preset.fog.color).getHexString()}`);
-            setFogNear(preset.fog.near);
-            setFogFar(preset.fog.far);
-        }
-        else {
-            setFogEnabled(false);
-        }
-        setStatusText(t('useModelEditor.environment', 'Environment: {name}').replace('{name}', String(preset.name)));
-    }, [t]);
-    /* ── Snap ── */
-    const snapPoint = useCallback((point) => {
-        const root = rootObjectRef.current || sceneRef.current;
-        const modes = snapEnabled ? ['vertex', 'edge', 'grid'] : ['grid'];
-        return snapMulti(point, root, snapGrid, modes, 0.5);
-    }, [snapEnabled, snapGrid]);
-    /* ═══════════════════════════════════════════
-       Return API
-       ═══════════════════════════════════════════ */
-    return {
-        // refs
-        mountRef,
-        fileInputRef,
-        mergeInputRef,
-        videoInputRef,
-        rootObjectRef,
-        // state
-        sceneTree,
-        selectedId,
-        transformMode,
-        setTransformMode,
-        animations,
-        activeAnimIdx,
-        isPlaying,
-        animTime,
-        animDuration,
-        animSpeed,
-        setAnimSpeed,
-        loopAnim,
-        setLoopAnim,
-        bottomCollapsed,
-        setBottomCollapsed,
-        showGrid,
-        setShowGrid,
-        showAxes,
-        setShowAxes,
-        wireframe,
-        setWireframe,
-        bgColor,
-        setBgColor,
-        statusText,
-        pendingAsk,
-        dragOver,
-        polyCount,
-        meshCount,
-        boneCount,
-        selMaterialIdx,
-        setSelMaterialIdx,
-        matRefresh,
-        setMatRefresh,
-        aiStatus,
-        aiBusy,
-        shadingMode,
-        setShadingMode,
-        editorMode,
-        setEditorMode,
-        contextMenu,
-        outlinerSearch,
-        setOutlinerSearch,
-        snapEnabled,
-        setSnapEnabled,
-        snapGrid,
-        setSnapGrid,
-        showSkeleton,
-        setShowSkeleton,
-        addMenuOpen,
-        setAddMenuOpen,
-        gizmoSpace,
-        setGizmoSpace,
-        propTab,
-        setPropTab,
-        fogEnabled,
-        setFogEnabled,
-        fogColor,
-        setFogColor,
-        fogNear,
-        setFogNear,
-        fogFar,
-        setFogFar,
-        showLightHelpers,
-        setShowLightHelpers,
-        // derived
-        selectedNode,
-        selectedMaterials,
-        // callbacks
-        rebuildTree,
-        loadFile,
-        mergeAnimationFBX,
-        playClip,
-        togglePlay,
-        stopAnim,
-        seekAnim,
-        focusOnObject,
-        setCameraPreset,
-        selectObject,
-        deleteSelected,
-        duplicateSelected,
-        handleFileInput,
-        handleMergeInput,
-        handleAIVideo,
-        exportGLTF,
-        exportOBJ,
-        exportSTL,
-        exportPLY,
-        exportUSDZ,
-        clearScene,
-        saveToLibrary,
-        addPrimitive,
-        addSceneLight,
-        addCameraObject,
-        addEmpty,
-        handleViewportClick,
-        handleContextMenu,
-        closeContextMenu,
-        handleDragOver,
-        handleDragLeave,
-        handleDrop,
-        toggleNodeVisibility,
-        toggleNodeExpanded,
-        setStatusText,
-        // undo/redo
-        undo,
-        redo,
-        canUndo,
-        canRedo,
-        undoLabel,
-        redoLabel,
-        // batch import
-        loadFiles,
-        // PBR presets
-        pbrPresets: PBR_PRESETS,
-        applyPreset,
-        // LOD & instancing
-        generateSelectedLOD,
-        convertSelectedToInstanced,
-        // HDRI environment
-        hdriPresets: HDRI_PRESETS,
-        applyHDRIPreset: applyHDRI,
-        // Snap
-        snapPoint,
-    };
+      }
+    });
+    rebuildTree();
+    setStatusText(
+      t("useModelEditor.generatedLodFor4Levels", "Generated LOD for {name} (4 levels)").replace(
+        "{name}",
+        String(mesh.name)
+      )
+    );
+  }, [selectedNode, pushUndo, rebuildTree, t]);
+  const convertSelectedToInstanced = useCallback(() => {
+    const root = rootObjectRef.current || sceneRef.current;
+    const result = convertToInstanced(root);
+    if (result.created === 0) {
+      setStatusText(
+        t("useModelEditor.noDuplicateMeshesFoundTo", "No duplicate meshes found to instance")
+      );
+      return;
+    }
+    rebuildTree();
+    setStatusText(
+      t(
+        "useModelEditor.createdInstancedMeshesRemovedDuplicates",
+        "Created {created} instanced meshes, removed {removed} duplicates"
+      ).replace("{created}", String(result.created)).replace("{removed}", String(result.removed))
+    );
+  }, [rebuildTree, t]);
+  const applyHDRI = useCallback(
+    (preset) => {
+      const renderer = rendererRef.current;
+      if (!renderer) {
+        return;
+      }
+      applyHDRIPreset(sceneRef.current, renderer, preset);
+      setBgColor(`#${new THREE.Color(preset.bgColor).getHexString()}`);
+      if (preset.fog) {
+        setFogEnabled(true);
+        setFogColor(`#${new THREE.Color(preset.fog.color).getHexString()}`);
+        setFogNear(preset.fog.near);
+        setFogFar(preset.fog.far);
+      } else {
+        setFogEnabled(false);
+      }
+      setStatusText(
+        t("useModelEditor.environment", "Environment: {name}").replace(
+          "{name}",
+          String(preset.name)
+        )
+      );
+    },
+    [t]
+  );
+  const snapPoint = useCallback(
+    (point) => {
+      const root = rootObjectRef.current || sceneRef.current;
+      const modes = snapEnabled ? ["vertex", "edge", "grid"] : ["grid"];
+      return snapMulti(point, root, snapGrid, modes, 0.5);
+    },
+    [snapEnabled, snapGrid]
+  );
+  return {
+    // refs
+    mountRef,
+    fileInputRef,
+    mergeInputRef,
+    videoInputRef,
+    rootObjectRef,
+    // state
+    sceneTree,
+    selectedId,
+    transformMode,
+    setTransformMode,
+    animations,
+    activeAnimIdx,
+    isPlaying,
+    animTime,
+    animDuration,
+    animSpeed,
+    setAnimSpeed,
+    loopAnim,
+    setLoopAnim,
+    bottomCollapsed,
+    setBottomCollapsed,
+    showGrid,
+    setShowGrid,
+    showAxes,
+    setShowAxes,
+    wireframe,
+    setWireframe,
+    bgColor,
+    setBgColor,
+    statusText,
+    pendingAsk,
+    dragOver,
+    polyCount,
+    meshCount,
+    boneCount,
+    selMaterialIdx,
+    setSelMaterialIdx,
+    matRefresh,
+    setMatRefresh,
+    aiStatus,
+    aiBusy,
+    shadingMode,
+    setShadingMode,
+    editorMode,
+    setEditorMode,
+    contextMenu,
+    outlinerSearch,
+    setOutlinerSearch,
+    snapEnabled,
+    setSnapEnabled,
+    snapGrid,
+    setSnapGrid,
+    showSkeleton,
+    setShowSkeleton,
+    addMenuOpen,
+    setAddMenuOpen,
+    gizmoSpace,
+    setGizmoSpace,
+    propTab,
+    setPropTab,
+    fogEnabled,
+    setFogEnabled,
+    fogColor,
+    setFogColor,
+    fogNear,
+    setFogNear,
+    fogFar,
+    setFogFar,
+    showLightHelpers,
+    setShowLightHelpers,
+    // derived
+    selectedNode,
+    selectedMaterials,
+    // callbacks
+    rebuildTree,
+    loadFile,
+    mergeAnimationFBX,
+    playClip,
+    togglePlay,
+    stopAnim,
+    seekAnim,
+    focusOnObject,
+    setCameraPreset,
+    selectObject,
+    deleteSelected,
+    duplicateSelected,
+    handleFileInput,
+    handleMergeInput,
+    handleAIVideo,
+    exportGLTF,
+    exportOBJ,
+    exportSTL,
+    exportPLY,
+    exportUSDZ,
+    clearScene,
+    saveToLibrary,
+    addPrimitive,
+    addSceneLight,
+    addCameraObject,
+    addEmpty,
+    handleViewportClick,
+    handleContextMenu,
+    closeContextMenu,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    toggleNodeVisibility,
+    toggleNodeExpanded,
+    setStatusText,
+    // undo/redo
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    undoLabel,
+    redoLabel,
+    // batch import
+    loadFiles,
+    // PBR presets
+    pbrPresets: PBR_PRESETS,
+    applyPreset,
+    // LOD & instancing
+    generateSelectedLOD,
+    convertSelectedToInstanced,
+    // HDRI environment
+    hdriPresets: HDRI_PRESETS,
+    applyHDRIPreset: applyHDRI,
+    // Snap
+    snapPoint
+  };
 }
-
-export { useModelEditor };
+export {
+  useModelEditor
+};