@nice2dev/ui-3d 1.3.15 → 1.3.16

package/dist/cjs/model/ModelEditorRightPanel.js

@@ -1,137 +1,653 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var ui = require('@nice2dev/ui');
-var React = require('react');
-var THREE = require('three');
-var i18n = require('../core/i18n.js');
-var ModelEditor_module = require('./ModelEditor.module.css.js');
-var ModelEditorSubComponents = require('./ModelEditorSubComponents.js');
-var modelEditorTypes = require('./modelEditorTypes.js');
-
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const ui = require("@nice2dev/ui");
+const React = require("react");
+const THREE = require("three");
+const i18n = require("../core/i18n.js");
+const ModelEditor_module = require("./ModelEditor.module.css.js");
+const ModelEditorSubComponents = require("./ModelEditorSubComponents.js");
+const modelEditorTypes = require("./modelEditorTypes.js");
 function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
         });
+      }
     }
-    n.default = e;
-    return Object.freeze(n);
+  }
+  n.default = e;
+  return Object.freeze(n);
 }
-
-var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
-
+const THREE__namespace = /* @__PURE__ */ _interopNamespaceDefault(THREE);
 const ModelEditorRightPanel = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.memo(({ api }) => {
+  /* @__PURE__ */ React.memo(({ api }) => {
     const { t } = i18n.useNiceTranslation();
-    const { propTab, setPropTab, selectedNode, selectedMaterials, selMaterialIdx, setSelMaterialIdx, setMatRefresh, rebuildTree, aiBusy, aiStatus, rootObjectRef, videoInputRef, bgColor, setBgColor, fogEnabled, setFogEnabled, fogColor, setFogColor, fogNear, setFogNear, fogFar, setFogFar, showLightHelpers, setShowLightHelpers, showGrid, setShowGrid, showAxes, setShowAxes, showSkeleton, setShowSkeleton, snapEnabled, setSnapEnabled, snapGrid, setSnapGrid, setStatusText, } = api;
-    return (jsxRuntime.jsxs("div", { className: ModelEditor_module.rightPanel, children: [jsxRuntime.jsx("div", { className: ModelEditor_module.propTabs, children: ['object', 'material', 'world', 'modifiers', 'physics'].map((t) => (jsxRuntime.jsx(ui.NiceButton, { className: ModelEditor_module.propTabBtn, variant: propTab === t ? 'primary' : 'ghost', size: "sm", onClick: () => setPropTab(t), title: t.charAt(0).toUpperCase() + t.slice(1), "aria-label": t.charAt(0).toUpperCase() + t.slice(1), children: jsxRuntime.jsx(ui.NiceIcon, { name: t === 'object'
-                            ? 'settings'
-                            : t === 'material'
-                                ? 'palette'
-                                : t === 'world'
-                                    ? 'globe'
-                                    : t === 'modifiers'
-                                        ? 'settings'
-                                        : 'zap', size: 16 }) }, t))) }), propTab === 'object' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.panelSection, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.panelTitle, children: [jsxRuntime.jsx(ui.NiceIcon, { name: "settings", size: 14 }), ' ', t('modelEditorRightPanel.transform', 'Transform')] }), jsxRuntime.jsx("div", { className: ModelEditor_module.panelContent, children: selectedNode ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.name', 'Name') }), jsxRuntime.jsx(ui.NiceTextInput, { className: ModelEditor_module.propInput, value: selectedNode.name, onChange: (val) => {
-                                                        selectedNode.object.name = val;
-                                                        rebuildTree();
-                                                    } })] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.type', 'Type') }), jsxRuntime.jsx("span", { style: { fontSize: 10, color: 'var(--nice-text-secondary, #888)' }, children: selectedNode.type })] }), jsxRuntime.jsx(ModelEditorSubComponents.Vec3Row, { label: t('modelEditorRightPanel.position', 'Position'), value: selectedNode.object.position, onChange: () => setMatRefresh((n) => n + 1) }), jsxRuntime.jsx(ModelEditorSubComponents.Vec3RowDeg, { label: t('modelEditorRightPanel.rotation', 'Rotation'), value: selectedNode.object.rotation, onChange: () => setMatRefresh((n) => n + 1) }), jsxRuntime.jsx(ModelEditorSubComponents.Vec3Row, { label: t('modelEditorRightPanel.scale', 'Scale'), value: selectedNode.object.scale, onChange: () => setMatRefresh((n) => n + 1) })] })) : (jsxRuntime.jsx("div", { style: { color: 'var(--nice-text-secondary, #666)', fontSize: 10 }, children: t('modelEditorRightPanel.selectAnObject', 'Select an object') })) })] }), selectedNode && selectedNode.object instanceof THREE__namespace.Light && (jsxRuntime.jsxs("div", { className: ModelEditor_module.panelSection, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.panelTitle, children: [jsxRuntime.jsx(ui.NiceIcon, { name: "lightbulb", size: 14 }), ' ', t('modelEditorRightPanel.light', 'Light')] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.panelContent, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.color', 'Color') }), jsxRuntime.jsx(ui.NiceColorPicker, { value: `#${selectedNode.object.color.getHexString()}`, onChange: (c) => {
-                                                    selectedNode.object.color.set(c);
-                                                    setMatRefresh((n) => n + 1);
-                                                } })] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.intensity', 'Intensity') }), jsxRuntime.jsx(ui.NiceSlider, { min: 0, max: 10, step: 0.1, value: selectedNode.object.intensity, onChange: (val) => {
-                                                    selectedNode.object.intensity = val;
-                                                    setMatRefresh((n) => n + 1);
-                                                }, style: { flex: 1 } }), jsxRuntime.jsx("span", { style: {
-                                                    fontSize: 9,
-                                                    color: 'var(--nice-text-secondary, #888)',
-                                                    width: 28,
-                                                    textAlign: 'right',
-                                                }, children: selectedNode.object.intensity.toFixed(1) })] }), 'castShadow' in selectedNode.object && (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.shadow', 'Shadow') }), jsxRuntime.jsx(ui.NiceCheckbox, { checked: selectedNode.object.castShadow, onChange: (checked) => {
-                                                    selectedNode.object.castShadow = checked;
-                                                    setMatRefresh((n) => n + 1);
-                                                } })] })), selectedNode.object instanceof THREE__namespace.SpotLight && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.angle', 'Angle') }), jsxRuntime.jsx(ui.NiceSlider, { min: 0, max: 90, step: 1, value: selectedNode.object.angle * modelEditorTypes.DEG, onChange: (val) => {
-                                                            selectedNode.object.angle = val / modelEditorTypes.DEG;
-                                                            setMatRefresh((n) => n + 1);
-                                                        }, style: { flex: 1 } }), jsxRuntime.jsxs("span", { style: {
-                                                            fontSize: 9,
-                                                            color: 'var(--nice-text-secondary, #888)',
-                                                            width: 28,
-                                                            textAlign: 'right',
-                                                        }, children: [(selectedNode.object.angle * modelEditorTypes.DEG).toFixed(0), "\u00B0"] })] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.penumbra', 'Penumbra') }), jsxRuntime.jsx(ui.NiceSlider, { min: 0, max: 1, step: 0.01, value: selectedNode.object.penumbra, onChange: (val) => {
-                                                            selectedNode.object.penumbra = val;
-                                                            setMatRefresh((n) => n + 1);
-                                                        }, style: { flex: 1 } })] })] }))] })] })), selectedNode && selectedNode.object instanceof THREE__namespace.PerspectiveCamera && (jsxRuntime.jsxs("div", { className: ModelEditor_module.panelSection, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.panelTitle, children: [jsxRuntime.jsx(ui.NiceIcon, { name: "camera", size: 14 }), " ", t('modelEditorRightPanel.camera', 'Camera')] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.panelContent, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.fov', 'FOV') }), jsxRuntime.jsx(ui.NiceSlider, { min: 10, max: 120, step: 1, value: selectedNode.object.fov, onChange: (val) => {
-                                                    const cam = selectedNode.object;
-                                                    cam.fov = val;
-                                                    cam.updateProjectionMatrix();
-                                                    setMatRefresh((n) => n + 1);
-                                                }, style: { flex: 1 } }), jsxRuntime.jsxs("span", { style: {
-                                                    fontSize: 9,
-                                                    color: 'var(--nice-text-secondary, #888)',
-                                                    width: 28,
-                                                    textAlign: 'right',
-                                                }, children: [selectedNode.object.fov.toFixed(0), "\u00B0"] })] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.near', 'Near') }), jsxRuntime.jsx(ui.NiceNumberInput, { className: ModelEditor_module.propInput, step: 0.01, value: selectedNode.object.near, onChange: (val) => {
-                                                    const cam = selectedNode.object;
-                                                    cam.near = val !== null && val !== void 0 ? val : 0.1;
-                                                    cam.updateProjectionMatrix();
-                                                    setMatRefresh((n) => n + 1);
-                                                }, style: { width: 60 } })] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.far', 'Far') }), jsxRuntime.jsx(ui.NiceNumberInput, { className: ModelEditor_module.propInput, step: 1, value: selectedNode.object.far, onChange: (val) => {
-                                                    const cam = selectedNode.object;
-                                                    cam.far = val !== null && val !== void 0 ? val : 1000;
-                                                    cam.updateProjectionMatrix();
-                                                    setMatRefresh((n) => n + 1);
-                                                }, style: { width: 80 } })] })] })] })), jsxRuntime.jsxs("div", { className: ModelEditor_module.panelSection, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.panelTitle, children: [jsxRuntime.jsx(ui.NiceIcon, { name: "wand", size: 14 }), ' ', t('modelEditorRightPanel.aiAnimation', 'AI Animation')] }), jsxRuntime.jsx("div", { className: ModelEditor_module.panelContent, children: jsxRuntime.jsxs("div", { className: ModelEditor_module.aiPanel, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.aiHeader, children: [jsxRuntime.jsx(ui.NiceIcon, { name: "wand", size: 14 }), ' ', t('modelEditorRightPanel.generateAnimationFromVideo', 'Generate animation from video')] }), jsxRuntime.jsx("p", { style: {
-                                                fontSize: 10,
-                                                color: 'var(--nice-text-secondary, #888)',
-                                                margin: '0 0 6px',
-                                            }, children: t('modelEditorRightPanel.uploadAVideoAndAi', 'Upload a video and AI will extract 3D pose data to create an animation clip for the current model.') }), jsxRuntime.jsx("div", { className: ModelEditor_module.aiBtnRow, children: jsxRuntime.jsx(ui.NiceButton, { className: ModelEditor_module.aiBtn, variant: "ghost", size: "sm", disabled: aiBusy || !rootObjectRef.current, onClick: () => { var _a; return (_a = videoInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: aiBusy
-                                                    ? t('modelEditorRightPanel.processing', 'Processing...')
-                                                    : t('modelEditorRightPanel.uploadVideo', 'Upload Video') }) }), aiStatus && jsxRuntime.jsx("div", { className: ModelEditor_module.aiStatus, children: aiStatus })] }) })] })] })), propTab === 'material' && (jsxRuntime.jsxs("div", { className: ModelEditor_module.panelSection, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.panelTitle, children: [jsxRuntime.jsx(ui.NiceIcon, { name: "palette", size: 14 }), ' ', t('modelEditorRightPanel.materials', 'Materials')] }), jsxRuntime.jsx("div", { className: ModelEditor_module.panelContent, children: selectedMaterials.length > 0 ? (selectedMaterials.map((mat, i) => (jsxRuntime.jsx(ModelEditorSubComponents.MaterialCard, { material: mat, active: i === selMaterialIdx, onClick: () => setSelMaterialIdx(i), onUpdate: () => setMatRefresh((n) => n + 1) }, i)))) : (jsxRuntime.jsx("div", { style: { color: 'var(--nice-text-secondary, #666)', fontSize: 10 }, children: selectedNode
-                                ? t('modelEditorRightPanel.noMaterialsOnThisObject', 'No materials on this object')
-                                : t('modelEditorRightPanel.selectAMeshToInspect', 'Select a mesh to inspect') })) })] })), propTab === 'world' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.panelSection, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.panelTitle, children: [jsxRuntime.jsx(ui.NiceIcon, { name: "globe", size: 14 }), ' ', t('modelEditorRightPanel.environment', 'Environment')] }), jsxRuntime.jsx("div", { className: ModelEditor_module.panelContent, children: jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.background', 'Background') }), jsxRuntime.jsx(ui.NiceColorPicker, { value: bgColor, onChange: (c) => setBgColor(c) }), jsxRuntime.jsx("span", { style: { fontSize: 9, color: 'var(--nice-text-secondary, #888)' }, children: bgColor })] }) })] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.panelSection, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.panelTitle, children: [jsxRuntime.jsx(ui.NiceIcon, { name: "cloud", size: 14 }), " ", t('modelEditorRightPanel.fog', 'Fog')] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.panelContent, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.enable', 'Enable') }), jsxRuntime.jsx(ui.NiceCheckbox, { checked: fogEnabled, onChange: () => setFogEnabled((v) => !v) })] }), fogEnabled && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.color', 'Color') }), jsxRuntime.jsx(ui.NiceColorPicker, { value: fogColor, onChange: (c) => setFogColor(c) })] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.near', 'Near') }), jsxRuntime.jsx(ui.NiceNumberInput, { className: ModelEditor_module.propInput, value: fogNear, onChange: (val) => setFogNear(val !== null && val !== void 0 ? val : 1), style: { width: 60 } })] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.far', 'Far') }), jsxRuntime.jsx(ui.NiceNumberInput, { className: ModelEditor_module.propInput, value: fogFar, onChange: (val) => setFogFar(val !== null && val !== void 0 ? val : 100), style: { width: 60 } })] })] }))] })] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.panelSection, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.panelTitle, children: [jsxRuntime.jsx(ui.NiceIcon, { name: "lightbulb", size: 14 }), ' ', t('modelEditorRightPanel.sceneLights', 'Scene Lights')] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.panelContent, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.showHelpers', 'Show Helpers') }), jsxRuntime.jsx(ui.NiceCheckbox, { checked: showLightHelpers, onChange: () => setShowLightHelpers((v) => !v) })] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.grid', 'Grid') }), jsxRuntime.jsx(ui.NiceCheckbox, { checked: showGrid, onChange: () => setShowGrid((v) => !v) })] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.axes', 'Axes') }), jsxRuntime.jsx(ui.NiceCheckbox, { checked: showAxes, onChange: () => setShowAxes((v) => !v) })] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.skeleton', 'Skeleton') }), jsxRuntime.jsx(ui.NiceCheckbox, { checked: showSkeleton, onChange: () => setShowSkeleton((v) => !v) })] })] })] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.panelSection, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.panelTitle, children: [jsxRuntime.jsx(ui.NiceIcon, { name: "grid", size: 14 }), " ", t('modelEditorRightPanel.snapping', 'Snapping')] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.panelContent, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.snap', 'Snap') }), jsxRuntime.jsx(ui.NiceCheckbox, { checked: snapEnabled, onChange: () => setSnapEnabled((v) => !v) })] }), snapEnabled && (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorRightPanel.gridSize', 'Grid Size') }), jsxRuntime.jsx(ui.NiceNumberInput, { className: ModelEditor_module.propInput, step: 0.25, min: 0.1, value: snapGrid, onChange: (val) => setSnapGrid(val !== null && val !== void 0 ? val : 1), style: { width: 60 } })] }))] })] })] })), propTab === 'modifiers' && (jsxRuntime.jsxs("div", { className: ModelEditor_module.panelSection, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.panelTitle, children: [jsxRuntime.jsx(ui.NiceIcon, { name: "settings", size: 14 }), ' ', t('modelEditorRightPanel.modifiers', 'Modifiers')] }), jsxRuntime.jsx("div", { className: ModelEditor_module.panelContent, children: selectedNode && selectedNode.object instanceof THREE__namespace.Mesh ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ui.NiceButton, { className: ModelEditor_module.btnSecondary, variant: "ghost", size: "sm", style: { width: '100%', marginBottom: 4 }, onClick: () => {
-                                        const mesh = selectedNode.object;
-                                        const geo = mesh.geometry;
-                                        const pos = geo.attributes.position;
-                                        if (pos) {
-                                            const wireGeo = new THREE__namespace.WireframeGeometry(geo);
-                                            mesh.geometry = wireGeo;
-                                            setStatusText(t('modelEditorRightPanel.appliedWireframeModifier', 'Applied Wireframe modifier'));
-                                            rebuildTree();
-                                        }
-                                    }, children: t('modelEditorRightPanel.wireframeModifier', '+ Wireframe Modifier') }), jsxRuntime.jsx(ui.NiceButton, { className: ModelEditor_module.btnSecondary, variant: "ghost", size: "sm", style: { width: '100%', marginBottom: 4 }, onClick: () => {
-                                        const mesh = selectedNode.object;
-                                        mesh.geometry.computeVertexNormals();
-                                        setStatusText(t('modelEditorRightPanel.recomputedNormals', 'Recomputed normals'));
-                                    }, children: t('modelEditorRightPanel.recomputeNormals', 'Recompute Normals') }), jsxRuntime.jsx(ui.NiceButton, { className: ModelEditor_module.btnSecondary, variant: "ghost", size: "sm", style: { width: '100%', marginBottom: 4 }, onClick: () => {
-                                        const mesh = selectedNode.object;
-                                        const geo = mesh.geometry;
-                                        geo.center();
-                                        setStatusText(t('modelEditorRightPanel.centeredGeometry', 'Centered geometry'));
-                                        setMatRefresh((n) => n + 1);
-                                    }, children: t('modelEditorRightPanel.centerGeometry', 'Center Geometry') }), jsxRuntime.jsx(ui.NiceButton, { className: ModelEditor_module.btnSecondary, variant: "ghost", size: "sm", style: { width: '100%', marginBottom: 4 }, onClick: () => {
-                                        const mesh = selectedNode.object;
-                                        const geo = mesh.geometry;
-                                        const idx = geo.index;
-                                        if (idx) {
-                                            const arr = idx.array;
-                                            for (let i = 0; i < arr.length; i += 3) {
-                                                const tmp = arr[i];
-                                                arr[i] = arr[i + 2];
-                                                arr[i + 2] = tmp;
-                                            }
-                                            idx.needsUpdate = true;
-                                            geo.computeVertexNormals();
-                                            setStatusText(t('modelEditorRightPanel.flippedNormals', 'Flipped normals'));
-                                        }
-                                    }, children: t('modelEditorRightPanel.flipNormals', 'Flip Normals') })] })) : (jsxRuntime.jsx("div", { style: { color: 'var(--nice-text-secondary, #666)', fontSize: 10 }, children: t('modelEditorRightPanel.selectAMeshToApply', 'Select a mesh to apply modifiers') })) })] })), propTab === 'physics' && (jsxRuntime.jsxs("div", { className: ModelEditor_module.panelSection, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.panelTitle, children: [jsxRuntime.jsx(ui.NiceIcon, { name: "zap", size: 14 }), ' ', t('modelEditorRightPanel.physicsInfo', 'Physics (Info)')] }), jsxRuntime.jsx("div", { className: ModelEditor_module.panelContent, children: jsxRuntime.jsxs("div", { style: { color: 'var(--nice-text-secondary, #666)', fontSize: 10, lineHeight: 1.5 }, children: [t('modelEditorRightPanel.physicsSimulationPreviewIsNot', 'Physics simulation preview is not yet available.'), jsxRuntime.jsx("br", {}), jsxRuntime.jsx("br", {}), t('modelEditorRightPanel.plannedFeatures', 'Planned features:'), jsxRuntime.jsx("br", {}), t('modelEditorRightPanel.rigidBodySimulation', '• Rigid body simulation'), jsxRuntime.jsx("br", {}), t('modelEditorRightPanel.softBodyDynamics', '• Soft body dynamics'), jsxRuntime.jsx("br", {}), t('modelEditorRightPanel.clothSimulation', '• Cloth simulation'), jsxRuntime.jsx("br", {}), t('modelEditorRightPanel.particleSystems', '• Particle systems')] }) })] }))] }));
-}), { displayName: 'ModelEditorRightPanel' });
-
-module.exports = ModelEditorRightPanel;
+    const {
+      propTab,
+      setPropTab,
+      selectedNode,
+      selectedMaterials,
+      selMaterialIdx,
+      setSelMaterialIdx,
+      setMatRefresh,
+      rebuildTree,
+      aiBusy,
+      aiStatus,
+      rootObjectRef,
+      videoInputRef,
+      bgColor,
+      setBgColor,
+      fogEnabled,
+      setFogEnabled,
+      fogColor,
+      setFogColor,
+      fogNear,
+      setFogNear,
+      fogFar,
+      setFogFar,
+      showLightHelpers,
+      setShowLightHelpers,
+      showGrid,
+      setShowGrid,
+      showAxes,
+      setShowAxes,
+      showSkeleton,
+      setShowSkeleton,
+      snapEnabled,
+      setSnapEnabled,
+      snapGrid,
+      setSnapGrid,
+      setStatusText
+    } = api;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.rightPanel, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.propTabs, children: ["object", "material", "world", "modifiers", "physics"].map((t2) => /* @__PURE__ */ jsxRuntime.jsx(
+        ui.NiceButton,
+        {
+          className: ModelEditor_module.default.propTabBtn,
+          variant: propTab === t2 ? "primary" : "ghost",
+          size: "sm",
+          onClick: () => setPropTab(t2),
+          title: t2.charAt(0).toUpperCase() + t2.slice(1),
+          "aria-label": t2.charAt(0).toUpperCase() + t2.slice(1),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.NiceIcon,
+            {
+              name: t2 === "object" ? "settings" : t2 === "material" ? "palette" : t2 === "world" ? "globe" : t2 === "modifiers" ? "settings" : "zap",
+              size: 16
+            }
+          )
+        },
+        t2
+      )) }),
+      propTab === "object" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelSection, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelTitle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "settings", size: 14 }),
+            " ",
+            t("modelEditorRightPanel.transform", "Transform")
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.panelContent, children: selectedNode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.name", "Name") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.NiceTextInput,
+                {
+                  className: ModelEditor_module.default.propInput,
+                  value: selectedNode.name,
+                  onChange: (val) => {
+                    selectedNode.object.name = val;
+                    rebuildTree();
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.type", "Type") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10, color: "var(--nice-text-secondary, #888)" }, children: selectedNode.type })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ModelEditorSubComponents.Vec3Row,
+              {
+                label: t("modelEditorRightPanel.position", "Position"),
+                value: selectedNode.object.position,
+                onChange: () => setMatRefresh((n) => n + 1)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ModelEditorSubComponents.Vec3RowDeg,
+              {
+                label: t("modelEditorRightPanel.rotation", "Rotation"),
+                value: selectedNode.object.rotation,
+                onChange: () => setMatRefresh((n) => n + 1)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ModelEditorSubComponents.Vec3Row,
+              {
+                label: t("modelEditorRightPanel.scale", "Scale"),
+                value: selectedNode.object.scale,
+                onChange: () => setMatRefresh((n) => n + 1)
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--nice-text-secondary, #666)", fontSize: 10 }, children: t("modelEditorRightPanel.selectAnObject", "Select an object") }) })
+        ] }),
+        selectedNode && selectedNode.object instanceof THREE__namespace.Light && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelSection, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelTitle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "lightbulb", size: 14 }),
+            " ",
+            t("modelEditorRightPanel.light", "Light")
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelContent, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.color", "Color") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.NiceColorPicker,
+                {
+                  value: `#${selectedNode.object.color.getHexString()}`,
+                  onChange: (c) => {
+                    selectedNode.object.color.set(c);
+                    setMatRefresh((n) => n + 1);
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.intensity", "Intensity") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.NiceSlider,
+                {
+                  min: 0,
+                  max: 10,
+                  step: 0.1,
+                  value: selectedNode.object.intensity,
+                  onChange: (val) => {
+                    selectedNode.object.intensity = val;
+                    setMatRefresh((n) => n + 1);
+                  },
+                  style: { flex: 1 }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: 9,
+                    color: "var(--nice-text-secondary, #888)",
+                    width: 28,
+                    textAlign: "right"
+                  },
+                  children: selectedNode.object.intensity.toFixed(1)
+                }
+              )
+            ] }),
+            "castShadow" in selectedNode.object && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.shadow", "Shadow") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.NiceCheckbox,
+                {
+                  checked: selectedNode.object.castShadow,
+                  onChange: (checked) => {
+                    selectedNode.object.castShadow = checked;
+                    setMatRefresh((n) => n + 1);
+                  }
+                }
+              )
+            ] }),
+            selectedNode.object instanceof THREE__namespace.SpotLight && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.angle", "Angle") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.NiceSlider,
+                  {
+                    min: 0,
+                    max: 90,
+                    step: 1,
+                    value: selectedNode.object.angle * modelEditorTypes.DEG,
+                    onChange: (val) => {
+                      selectedNode.object.angle = val / modelEditorTypes.DEG;
+                      setMatRefresh((n) => n + 1);
+                    },
+                    style: { flex: 1 }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 9,
+                      color: "var(--nice-text-secondary, #888)",
+                      width: 28,
+                      textAlign: "right"
+                    },
+                    children: [
+                      (selectedNode.object.angle * modelEditorTypes.DEG).toFixed(0),
+                      "°"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.penumbra", "Penumbra") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.NiceSlider,
+                  {
+                    min: 0,
+                    max: 1,
+                    step: 0.01,
+                    value: selectedNode.object.penumbra,
+                    onChange: (val) => {
+                      selectedNode.object.penumbra = val;
+                      setMatRefresh((n) => n + 1);
+                    },
+                    style: { flex: 1 }
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        selectedNode && selectedNode.object instanceof THREE__namespace.PerspectiveCamera && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelSection, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelTitle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "camera", size: 14 }),
+            " ",
+            t("modelEditorRightPanel.camera", "Camera")
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelContent, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.fov", "FOV") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.NiceSlider,
+                {
+                  min: 10,
+                  max: 120,
+                  step: 1,
+                  value: selectedNode.object.fov,
+                  onChange: (val) => {
+                    const cam = selectedNode.object;
+                    cam.fov = val;
+                    cam.updateProjectionMatrix();
+                    setMatRefresh((n) => n + 1);
+                  },
+                  style: { flex: 1 }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  style: {
+                    fontSize: 9,
+                    color: "var(--nice-text-secondary, #888)",
+                    width: 28,
+                    textAlign: "right"
+                  },
+                  children: [
+                    selectedNode.object.fov.toFixed(0),
+                    "°"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.near", "Near") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.NiceNumberInput,
+                {
+                  className: ModelEditor_module.default.propInput,
+                  step: 0.01,
+                  value: selectedNode.object.near,
+                  onChange: (val) => {
+                    const cam = selectedNode.object;
+                    cam.near = val ?? 0.1;
+                    cam.updateProjectionMatrix();
+                    setMatRefresh((n) => n + 1);
+                  },
+                  style: { width: 60 }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.far", "Far") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.NiceNumberInput,
+                {
+                  className: ModelEditor_module.default.propInput,
+                  step: 1,
+                  value: selectedNode.object.far,
+                  onChange: (val) => {
+                    const cam = selectedNode.object;
+                    cam.far = val ?? 1e3;
+                    cam.updateProjectionMatrix();
+                    setMatRefresh((n) => n + 1);
+                  },
+                  style: { width: 80 }
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelSection, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelTitle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "wand", size: 14 }),
+            " ",
+            t("modelEditorRightPanel.aiAnimation", "AI Animation")
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.panelContent, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.aiPanel, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.aiHeader, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "wand", size: 14 }),
+              " ",
+              t(
+                "modelEditorRightPanel.generateAnimationFromVideo",
+                "Generate animation from video"
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                style: {
+                  fontSize: 10,
+                  color: "var(--nice-text-secondary, #888)",
+                  margin: "0 0 6px"
+                },
+                children: t(
+                  "modelEditorRightPanel.uploadAVideoAndAi",
+                  "Upload a video and AI will extract 3D pose data to create an animation clip for the current model."
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.aiBtnRow, children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.NiceButton,
+              {
+                className: ModelEditor_module.default.aiBtn,
+                variant: "ghost",
+                size: "sm",
+                disabled: aiBusy || !rootObjectRef.current,
+                onClick: () => videoInputRef.current?.click(),
+                children: aiBusy ? t("modelEditorRightPanel.processing", "Processing...") : t("modelEditorRightPanel.uploadVideo", "Upload Video")
+              }
+            ) }),
+            aiStatus && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.aiStatus, children: aiStatus })
+          ] }) })
+        ] })
+      ] }),
+      propTab === "material" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelSection, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelTitle, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "palette", size: 14 }),
+          " ",
+          t("modelEditorRightPanel.materials", "Materials")
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.panelContent, children: selectedMaterials.length > 0 ? selectedMaterials.map((mat, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          ModelEditorSubComponents.MaterialCard,
+          {
+            material: mat,
+            active: i === selMaterialIdx,
+            onClick: () => setSelMaterialIdx(i),
+            onUpdate: () => setMatRefresh((n) => n + 1)
+          },
+          i
+        )) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--nice-text-secondary, #666)", fontSize: 10 }, children: selectedNode ? t(
+          "modelEditorRightPanel.noMaterialsOnThisObject",
+          "No materials on this object"
+        ) : t("modelEditorRightPanel.selectAMeshToInspect", "Select a mesh to inspect") }) })
+      ] }),
+      propTab === "world" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelSection, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelTitle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "globe", size: 14 }),
+            " ",
+            t("modelEditorRightPanel.environment", "Environment")
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.panelContent, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.background", "Background") }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.NiceColorPicker, { value: bgColor, onChange: (c) => setBgColor(c) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 9, color: "var(--nice-text-secondary, #888)" }, children: bgColor })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelSection, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelTitle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "cloud", size: 14 }),
+            " ",
+            t("modelEditorRightPanel.fog", "Fog")
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelContent, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.enable", "Enable") }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.NiceCheckbox, { checked: fogEnabled, onChange: () => setFogEnabled((v) => !v) })
+            ] }),
+            fogEnabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.color", "Color") }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.NiceColorPicker, { value: fogColor, onChange: (c) => setFogColor(c) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.near", "Near") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.NiceNumberInput,
+                  {
+                    className: ModelEditor_module.default.propInput,
+                    value: fogNear,
+                    onChange: (val) => setFogNear(val ?? 1),
+                    style: { width: 60 }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.far", "Far") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.NiceNumberInput,
+                  {
+                    className: ModelEditor_module.default.propInput,
+                    value: fogFar,
+                    onChange: (val) => setFogFar(val ?? 100),
+                    style: { width: 60 }
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelSection, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelTitle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "lightbulb", size: 14 }),
+            " ",
+            t("modelEditorRightPanel.sceneLights", "Scene Lights")
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelContent, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.showHelpers", "Show Helpers") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.NiceCheckbox,
+                {
+                  checked: showLightHelpers,
+                  onChange: () => setShowLightHelpers((v) => !v)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.grid", "Grid") }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.NiceCheckbox, { checked: showGrid, onChange: () => setShowGrid((v) => !v) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.axes", "Axes") }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.NiceCheckbox, { checked: showAxes, onChange: () => setShowAxes((v) => !v) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.skeleton", "Skeleton") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.NiceCheckbox,
+                {
+                  checked: showSkeleton,
+                  onChange: () => setShowSkeleton((v) => !v)
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelSection, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelTitle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "grid", size: 14 }),
+            " ",
+            t("modelEditorRightPanel.snapping", "Snapping")
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelContent, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.snap", "Snap") }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.NiceCheckbox, { checked: snapEnabled, onChange: () => setSnapEnabled((v) => !v) })
+            ] }),
+            snapEnabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorRightPanel.gridSize", "Grid Size") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.NiceNumberInput,
+                {
+                  className: ModelEditor_module.default.propInput,
+                  step: 0.25,
+                  min: 0.1,
+                  value: snapGrid,
+                  onChange: (val) => setSnapGrid(val ?? 1),
+                  style: { width: 60 }
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ] }),
+      propTab === "modifiers" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelSection, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelTitle, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "settings", size: 14 }),
+          " ",
+          t("modelEditorRightPanel.modifiers", "Modifiers")
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.panelContent, children: selectedNode && selectedNode.object instanceof THREE__namespace.Mesh ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.NiceButton,
+            {
+              className: ModelEditor_module.default.btnSecondary,
+              variant: "ghost",
+              size: "sm",
+              style: { width: "100%", marginBottom: 4 },
+              onClick: () => {
+                const mesh = selectedNode.object;
+                const geo = mesh.geometry;
+                const pos = geo.attributes.position;
+                if (pos) {
+                  const wireGeo = new THREE__namespace.WireframeGeometry(geo);
+                  mesh.geometry = wireGeo;
+                  setStatusText(
+                    t(
+                      "modelEditorRightPanel.appliedWireframeModifier",
+                      "Applied Wireframe modifier"
+                    )
+                  );
+                  rebuildTree();
+                }
+              },
+              children: t("modelEditorRightPanel.wireframeModifier", "+ Wireframe Modifier")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.NiceButton,
+            {
+              className: ModelEditor_module.default.btnSecondary,
+              variant: "ghost",
+              size: "sm",
+              style: { width: "100%", marginBottom: 4 },
+              onClick: () => {
+                const mesh = selectedNode.object;
+                mesh.geometry.computeVertexNormals();
+                setStatusText(
+                  t("modelEditorRightPanel.recomputedNormals", "Recomputed normals")
+                );
+              },
+              children: t("modelEditorRightPanel.recomputeNormals", "Recompute Normals")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.NiceButton,
+            {
+              className: ModelEditor_module.default.btnSecondary,
+              variant: "ghost",
+              size: "sm",
+              style: { width: "100%", marginBottom: 4 },
+              onClick: () => {
+                const mesh = selectedNode.object;
+                const geo = mesh.geometry;
+                geo.center();
+                setStatusText(
+                  t("modelEditorRightPanel.centeredGeometry", "Centered geometry")
+                );
+                setMatRefresh((n) => n + 1);
+              },
+              children: t("modelEditorRightPanel.centerGeometry", "Center Geometry")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.NiceButton,
+            {
+              className: ModelEditor_module.default.btnSecondary,
+              variant: "ghost",
+              size: "sm",
+              style: { width: "100%", marginBottom: 4 },
+              onClick: () => {
+                const mesh = selectedNode.object;
+                const geo = mesh.geometry;
+                const idx = geo.index;
+                if (idx) {
+                  const arr = idx.array;
+                  for (let i = 0; i < arr.length; i += 3) {
+                    const tmp = arr[i];
+                    arr[i] = arr[i + 2];
+                    arr[i + 2] = tmp;
+                  }
+                  idx.needsUpdate = true;
+                  geo.computeVertexNormals();
+                  setStatusText(t("modelEditorRightPanel.flippedNormals", "Flipped normals"));
+                }
+              },
+              children: t("modelEditorRightPanel.flipNormals", "Flip Normals")
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--nice-text-secondary, #666)", fontSize: 10 }, children: t(
+          "modelEditorRightPanel.selectAMeshToApply",
+          "Select a mesh to apply modifiers"
+        ) }) })
+      ] }),
+      propTab === "physics" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelSection, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.panelTitle, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "zap", size: 14 }),
+          " ",
+          t("modelEditorRightPanel.physicsInfo", "Physics (Info)")
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.panelContent, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: { color: "var(--nice-text-secondary, #666)", fontSize: 10, lineHeight: 1.5 },
+            children: [
+              t(
+                "modelEditorRightPanel.physicsSimulationPreviewIsNot",
+                "Physics simulation preview is not yet available."
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+              /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+              t("modelEditorRightPanel.plannedFeatures", "Planned features:"),
+              /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+              t("modelEditorRightPanel.rigidBodySimulation", "• Rigid body simulation"),
+              /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+              t("modelEditorRightPanel.softBodyDynamics", "• Soft body dynamics"),
+              /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+              t("modelEditorRightPanel.clothSimulation", "• Cloth simulation"),
+              /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+              t("modelEditorRightPanel.particleSystems", "• Particle systems")
+            ]
+          }
+        ) })
+      ] })
+    ] });
+  }),
+  { displayName: "ModelEditorRightPanel" }
+);
+exports.default = ModelEditorRightPanel;