@nice2dev/ui-3d 1.3.14 → 1.3.16

package/dist/esm/model/ModelEditorRightPanel.js

@@ -1,116 +1,636 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { NiceButton, NiceIcon, NiceTextInput, NiceColorPicker, NiceSlider, NiceCheckbox, NiceNumberInput } from '@nice2dev/ui';
-import React from 'react';
-import * as THREE from 'three';
-import { useNiceTranslation } from '../core/i18n.js';
-import styles from './ModelEditor.module.css.js';
-import { Vec3Row, Vec3RowDeg, MaterialCard } from './ModelEditorSubComponents.js';
-import { DEG } from './modelEditorTypes.js';
-
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { NiceButton, NiceIcon, NiceTextInput, NiceColorPicker, NiceSlider, NiceCheckbox, NiceNumberInput } from "@nice2dev/ui";
+import React from "react";
+import * as THREE from "three";
+import { useNiceTranslation } from "../core/i18n.js";
+import styles from "./ModelEditor.module.css.js";
+import { Vec3Row, Vec3RowDeg, MaterialCard } from "./ModelEditorSubComponents.js";
+import { DEG } from "./modelEditorTypes.js";
 const ModelEditorRightPanel = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.memo(({ api }) => {
+  /* @__PURE__ */ React.memo(({ api }) => {
     const { t } = 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 (jsxs("div", { className: styles.rightPanel, children: [jsx("div", { className: styles.propTabs, children: ['object', 'material', 'world', 'modifiers', 'physics'].map((t) => (jsx(NiceButton, { className: styles.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: jsx(NiceIcon, { name: t === 'object'
-                            ? 'settings'
-                            : t === 'material'
-                                ? 'palette'
-                                : t === 'world'
-                                    ? 'globe'
-                                    : t === 'modifiers'
-                                        ? 'settings'
-                                        : 'zap', size: 16 }) }, t))) }), propTab === 'object' && (jsxs(Fragment, { children: [jsxs("div", { className: styles.panelSection, children: [jsxs("div", { className: styles.panelTitle, children: [jsx(NiceIcon, { name: "settings", size: 14 }), ' ', t('modelEditorRightPanel.transform', 'Transform')] }), jsx("div", { className: styles.panelContent, children: selectedNode ? (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.name', 'Name') }), jsx(NiceTextInput, { className: styles.propInput, value: selectedNode.name, onChange: (val) => {
-                                                        selectedNode.object.name = val;
-                                                        rebuildTree();
-                                                    } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.type', 'Type') }), jsx("span", { style: { fontSize: 10, color: 'var(--nice-text-secondary, #888)' }, children: selectedNode.type })] }), jsx(Vec3Row, { label: t('modelEditorRightPanel.position', 'Position'), value: selectedNode.object.position, onChange: () => setMatRefresh((n) => n + 1) }), jsx(Vec3RowDeg, { label: t('modelEditorRightPanel.rotation', 'Rotation'), value: selectedNode.object.rotation, onChange: () => setMatRefresh((n) => n + 1) }), jsx(Vec3Row, { label: t('modelEditorRightPanel.scale', 'Scale'), value: selectedNode.object.scale, onChange: () => setMatRefresh((n) => n + 1) })] })) : (jsx("div", { style: { color: 'var(--nice-text-secondary, #666)', fontSize: 10 }, children: t('modelEditorRightPanel.selectAnObject', 'Select an object') })) })] }), selectedNode && selectedNode.object instanceof THREE.Light && (jsxs("div", { className: styles.panelSection, children: [jsxs("div", { className: styles.panelTitle, children: [jsx(NiceIcon, { name: "lightbulb", size: 14 }), ' ', t('modelEditorRightPanel.light', 'Light')] }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.color', 'Color') }), jsx(NiceColorPicker, { value: `#${selectedNode.object.color.getHexString()}`, onChange: (c) => {
-                                                    selectedNode.object.color.set(c);
-                                                    setMatRefresh((n) => n + 1);
-                                                } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.intensity', 'Intensity') }), jsx(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 } }), 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 && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.shadow', 'Shadow') }), jsx(NiceCheckbox, { checked: selectedNode.object.castShadow, onChange: (checked) => {
-                                                    selectedNode.object.castShadow = checked;
-                                                    setMatRefresh((n) => n + 1);
-                                                } })] })), selectedNode.object instanceof THREE.SpotLight && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.angle', 'Angle') }), jsx(NiceSlider, { min: 0, max: 90, step: 1, value: selectedNode.object.angle * DEG, onChange: (val) => {
-                                                            selectedNode.object.angle = val / DEG;
-                                                            setMatRefresh((n) => n + 1);
-                                                        }, style: { flex: 1 } }), jsxs("span", { style: {
-                                                            fontSize: 9,
-                                                            color: 'var(--nice-text-secondary, #888)',
-                                                            width: 28,
-                                                            textAlign: 'right',
-                                                        }, children: [(selectedNode.object.angle * DEG).toFixed(0), "\u00B0"] })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.penumbra', 'Penumbra') }), jsx(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.PerspectiveCamera && (jsxs("div", { className: styles.panelSection, children: [jsxs("div", { className: styles.panelTitle, children: [jsx(NiceIcon, { name: "camera", size: 14 }), " ", t('modelEditorRightPanel.camera', 'Camera')] }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.fov', 'FOV') }), jsx(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 } }), jsxs("span", { style: {
-                                                    fontSize: 9,
-                                                    color: 'var(--nice-text-secondary, #888)',
-                                                    width: 28,
-                                                    textAlign: 'right',
-                                                }, children: [selectedNode.object.fov.toFixed(0), "\u00B0"] })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.near', 'Near') }), jsx(NiceNumberInput, { className: styles.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 } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.far', 'Far') }), jsx(NiceNumberInput, { className: styles.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 } })] })] })] })), jsxs("div", { className: styles.panelSection, children: [jsxs("div", { className: styles.panelTitle, children: [jsx(NiceIcon, { name: "wand", size: 14 }), ' ', t('modelEditorRightPanel.aiAnimation', 'AI Animation')] }), jsx("div", { className: styles.panelContent, children: jsxs("div", { className: styles.aiPanel, children: [jsxs("div", { className: styles.aiHeader, children: [jsx(NiceIcon, { name: "wand", size: 14 }), ' ', t('modelEditorRightPanel.generateAnimationFromVideo', 'Generate animation from video')] }), 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.') }), jsx("div", { className: styles.aiBtnRow, children: jsx(NiceButton, { className: styles.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 && jsx("div", { className: styles.aiStatus, children: aiStatus })] }) })] })] })), propTab === 'material' && (jsxs("div", { className: styles.panelSection, children: [jsxs("div", { className: styles.panelTitle, children: [jsx(NiceIcon, { name: "palette", size: 14 }), ' ', t('modelEditorRightPanel.materials', 'Materials')] }), jsx("div", { className: styles.panelContent, children: selectedMaterials.length > 0 ? (selectedMaterials.map((mat, i) => (jsx(MaterialCard, { material: mat, active: i === selMaterialIdx, onClick: () => setSelMaterialIdx(i), onUpdate: () => setMatRefresh((n) => n + 1) }, i)))) : (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' && (jsxs(Fragment, { children: [jsxs("div", { className: styles.panelSection, children: [jsxs("div", { className: styles.panelTitle, children: [jsx(NiceIcon, { name: "globe", size: 14 }), ' ', t('modelEditorRightPanel.environment', 'Environment')] }), jsx("div", { className: styles.panelContent, children: jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.background', 'Background') }), jsx(NiceColorPicker, { value: bgColor, onChange: (c) => setBgColor(c) }), jsx("span", { style: { fontSize: 9, color: 'var(--nice-text-secondary, #888)' }, children: bgColor })] }) })] }), jsxs("div", { className: styles.panelSection, children: [jsxs("div", { className: styles.panelTitle, children: [jsx(NiceIcon, { name: "cloud", size: 14 }), " ", t('modelEditorRightPanel.fog', 'Fog')] }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.enable', 'Enable') }), jsx(NiceCheckbox, { checked: fogEnabled, onChange: () => setFogEnabled((v) => !v) })] }), fogEnabled && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.color', 'Color') }), jsx(NiceColorPicker, { value: fogColor, onChange: (c) => setFogColor(c) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.near', 'Near') }), jsx(NiceNumberInput, { className: styles.propInput, value: fogNear, onChange: (val) => setFogNear(val !== null && val !== void 0 ? val : 1), style: { width: 60 } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.far', 'Far') }), jsx(NiceNumberInput, { className: styles.propInput, value: fogFar, onChange: (val) => setFogFar(val !== null && val !== void 0 ? val : 100), style: { width: 60 } })] })] }))] })] }), jsxs("div", { className: styles.panelSection, children: [jsxs("div", { className: styles.panelTitle, children: [jsx(NiceIcon, { name: "lightbulb", size: 14 }), ' ', t('modelEditorRightPanel.sceneLights', 'Scene Lights')] }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.showHelpers', 'Show Helpers') }), jsx(NiceCheckbox, { checked: showLightHelpers, onChange: () => setShowLightHelpers((v) => !v) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.grid', 'Grid') }), jsx(NiceCheckbox, { checked: showGrid, onChange: () => setShowGrid((v) => !v) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.axes', 'Axes') }), jsx(NiceCheckbox, { checked: showAxes, onChange: () => setShowAxes((v) => !v) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.skeleton', 'Skeleton') }), jsx(NiceCheckbox, { checked: showSkeleton, onChange: () => setShowSkeleton((v) => !v) })] })] })] }), jsxs("div", { className: styles.panelSection, children: [jsxs("div", { className: styles.panelTitle, children: [jsx(NiceIcon, { name: "grid", size: 14 }), " ", t('modelEditorRightPanel.snapping', 'Snapping')] }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.snap', 'Snap') }), jsx(NiceCheckbox, { checked: snapEnabled, onChange: () => setSnapEnabled((v) => !v) })] }), snapEnabled && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorRightPanel.gridSize', 'Grid Size') }), jsx(NiceNumberInput, { className: styles.propInput, step: 0.25, min: 0.1, value: snapGrid, onChange: (val) => setSnapGrid(val !== null && val !== void 0 ? val : 1), style: { width: 60 } })] }))] })] })] })), propTab === 'modifiers' && (jsxs("div", { className: styles.panelSection, children: [jsxs("div", { className: styles.panelTitle, children: [jsx(NiceIcon, { name: "settings", size: 14 }), ' ', t('modelEditorRightPanel.modifiers', 'Modifiers')] }), jsx("div", { className: styles.panelContent, children: selectedNode && selectedNode.object instanceof THREE.Mesh ? (jsxs(Fragment, { children: [jsx(NiceButton, { className: styles.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.WireframeGeometry(geo);
-                                            mesh.geometry = wireGeo;
-                                            setStatusText(t('modelEditorRightPanel.appliedWireframeModifier', 'Applied Wireframe modifier'));
-                                            rebuildTree();
-                                        }
-                                    }, children: t('modelEditorRightPanel.wireframeModifier', '+ Wireframe Modifier') }), jsx(NiceButton, { className: styles.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') }), jsx(NiceButton, { className: styles.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') }), jsx(NiceButton, { className: styles.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') })] })) : (jsx("div", { style: { color: 'var(--nice-text-secondary, #666)', fontSize: 10 }, children: t('modelEditorRightPanel.selectAMeshToApply', 'Select a mesh to apply modifiers') })) })] })), propTab === 'physics' && (jsxs("div", { className: styles.panelSection, children: [jsxs("div", { className: styles.panelTitle, children: [jsx(NiceIcon, { name: "zap", size: 14 }), ' ', t('modelEditorRightPanel.physicsInfo', 'Physics (Info)')] }), jsx("div", { className: styles.panelContent, children: 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.'), jsx("br", {}), jsx("br", {}), t('modelEditorRightPanel.plannedFeatures', 'Planned features:'), jsx("br", {}), t('modelEditorRightPanel.rigidBodySimulation', '• Rigid body simulation'), jsx("br", {}), t('modelEditorRightPanel.softBodyDynamics', '• Soft body dynamics'), jsx("br", {}), t('modelEditorRightPanel.clothSimulation', '• Cloth simulation'), jsx("br", {}), t('modelEditorRightPanel.particleSystems', '• Particle systems')] }) })] }))] }));
-}), { displayName: 'ModelEditorRightPanel' });
-
-export { ModelEditorRightPanel as default };
+    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__ */ jsxs("div", { className: styles.rightPanel, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.propTabs, children: ["object", "material", "world", "modifiers", "physics"].map((t2) => /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.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__ */ jsx(
+            NiceIcon,
+            {
+              name: t2 === "object" ? "settings" : t2 === "material" ? "palette" : t2 === "world" ? "globe" : t2 === "modifiers" ? "settings" : "zap",
+              size: 16
+            }
+          )
+        },
+        t2
+      )) }),
+      propTab === "object" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.panelTitle, children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "settings", size: 14 }),
+            " ",
+            t("modelEditorRightPanel.transform", "Transform")
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.panelContent, children: selectedNode ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.name", "Name") }),
+              /* @__PURE__ */ jsx(
+                NiceTextInput,
+                {
+                  className: styles.propInput,
+                  value: selectedNode.name,
+                  onChange: (val) => {
+                    selectedNode.object.name = val;
+                    rebuildTree();
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.type", "Type") }),
+              /* @__PURE__ */ jsx("span", { style: { fontSize: 10, color: "var(--nice-text-secondary, #888)" }, children: selectedNode.type })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Vec3Row,
+              {
+                label: t("modelEditorRightPanel.position", "Position"),
+                value: selectedNode.object.position,
+                onChange: () => setMatRefresh((n) => n + 1)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Vec3RowDeg,
+              {
+                label: t("modelEditorRightPanel.rotation", "Rotation"),
+                value: selectedNode.object.rotation,
+                onChange: () => setMatRefresh((n) => n + 1)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Vec3Row,
+              {
+                label: t("modelEditorRightPanel.scale", "Scale"),
+                value: selectedNode.object.scale,
+                onChange: () => setMatRefresh((n) => n + 1)
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx("div", { style: { color: "var(--nice-text-secondary, #666)", fontSize: 10 }, children: t("modelEditorRightPanel.selectAnObject", "Select an object") }) })
+        ] }),
+        selectedNode && selectedNode.object instanceof THREE.Light && /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.panelTitle, children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "lightbulb", size: 14 }),
+            " ",
+            t("modelEditorRightPanel.light", "Light")
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.panelContent, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.color", "Color") }),
+              /* @__PURE__ */ jsx(
+                NiceColorPicker,
+                {
+                  value: `#${selectedNode.object.color.getHexString()}`,
+                  onChange: (c) => {
+                    selectedNode.object.color.set(c);
+                    setMatRefresh((n) => n + 1);
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.intensity", "Intensity") }),
+              /* @__PURE__ */ jsx(
+                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__ */ 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__ */ jsxs("div", { className: styles.propRow, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.shadow", "Shadow") }),
+              /* @__PURE__ */ jsx(
+                NiceCheckbox,
+                {
+                  checked: selectedNode.object.castShadow,
+                  onChange: (checked) => {
+                    selectedNode.object.castShadow = checked;
+                    setMatRefresh((n) => n + 1);
+                  }
+                }
+              )
+            ] }),
+            selectedNode.object instanceof THREE.SpotLight && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+                /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.angle", "Angle") }),
+                /* @__PURE__ */ jsx(
+                  NiceSlider,
+                  {
+                    min: 0,
+                    max: 90,
+                    step: 1,
+                    value: selectedNode.object.angle * DEG,
+                    onChange: (val) => {
+                      selectedNode.object.angle = val / DEG;
+                      setMatRefresh((n) => n + 1);
+                    },
+                    style: { flex: 1 }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 9,
+                      color: "var(--nice-text-secondary, #888)",
+                      width: 28,
+                      textAlign: "right"
+                    },
+                    children: [
+                      (selectedNode.object.angle * DEG).toFixed(0),
+                      "°"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+                /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.penumbra", "Penumbra") }),
+                /* @__PURE__ */ jsx(
+                  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.PerspectiveCamera && /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.panelTitle, children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "camera", size: 14 }),
+            " ",
+            t("modelEditorRightPanel.camera", "Camera")
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.panelContent, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.fov", "FOV") }),
+              /* @__PURE__ */ jsx(
+                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__ */ jsxs(
+                "span",
+                {
+                  style: {
+                    fontSize: 9,
+                    color: "var(--nice-text-secondary, #888)",
+                    width: 28,
+                    textAlign: "right"
+                  },
+                  children: [
+                    selectedNode.object.fov.toFixed(0),
+                    "°"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.near", "Near") }),
+              /* @__PURE__ */ jsx(
+                NiceNumberInput,
+                {
+                  className: styles.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__ */ jsxs("div", { className: styles.propRow, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.far", "Far") }),
+              /* @__PURE__ */ jsx(
+                NiceNumberInput,
+                {
+                  className: styles.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__ */ jsxs("div", { className: styles.panelSection, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.panelTitle, children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "wand", size: 14 }),
+            " ",
+            t("modelEditorRightPanel.aiAnimation", "AI Animation")
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.panelContent, children: /* @__PURE__ */ jsxs("div", { className: styles.aiPanel, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.aiHeader, children: [
+              /* @__PURE__ */ jsx(NiceIcon, { name: "wand", size: 14 }),
+              " ",
+              t(
+                "modelEditorRightPanel.generateAnimationFromVideo",
+                "Generate animation from video"
+              )
+            ] }),
+            /* @__PURE__ */ 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__ */ jsx("div", { className: styles.aiBtnRow, children: /* @__PURE__ */ jsx(
+              NiceButton,
+              {
+                className: styles.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__ */ jsx("div", { className: styles.aiStatus, children: aiStatus })
+          ] }) })
+        ] })
+      ] }),
+      propTab === "material" && /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.panelTitle, children: [
+          /* @__PURE__ */ jsx(NiceIcon, { name: "palette", size: 14 }),
+          " ",
+          t("modelEditorRightPanel.materials", "Materials")
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: styles.panelContent, children: selectedMaterials.length > 0 ? selectedMaterials.map((mat, i) => /* @__PURE__ */ jsx(
+          MaterialCard,
+          {
+            material: mat,
+            active: i === selMaterialIdx,
+            onClick: () => setSelMaterialIdx(i),
+            onUpdate: () => setMatRefresh((n) => n + 1)
+          },
+          i
+        )) : /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.panelTitle, children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "globe", size: 14 }),
+            " ",
+            t("modelEditorRightPanel.environment", "Environment")
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.panelContent, children: /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.background", "Background") }),
+            /* @__PURE__ */ jsx(NiceColorPicker, { value: bgColor, onChange: (c) => setBgColor(c) }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 9, color: "var(--nice-text-secondary, #888)" }, children: bgColor })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.panelTitle, children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "cloud", size: 14 }),
+            " ",
+            t("modelEditorRightPanel.fog", "Fog")
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.panelContent, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.enable", "Enable") }),
+              /* @__PURE__ */ jsx(NiceCheckbox, { checked: fogEnabled, onChange: () => setFogEnabled((v) => !v) })
+            ] }),
+            fogEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+                /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.color", "Color") }),
+                /* @__PURE__ */ jsx(NiceColorPicker, { value: fogColor, onChange: (c) => setFogColor(c) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+                /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.near", "Near") }),
+                /* @__PURE__ */ jsx(
+                  NiceNumberInput,
+                  {
+                    className: styles.propInput,
+                    value: fogNear,
+                    onChange: (val) => setFogNear(val ?? 1),
+                    style: { width: 60 }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+                /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.far", "Far") }),
+                /* @__PURE__ */ jsx(
+                  NiceNumberInput,
+                  {
+                    className: styles.propInput,
+                    value: fogFar,
+                    onChange: (val) => setFogFar(val ?? 100),
+                    style: { width: 60 }
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.panelTitle, children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "lightbulb", size: 14 }),
+            " ",
+            t("modelEditorRightPanel.sceneLights", "Scene Lights")
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.panelContent, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.showHelpers", "Show Helpers") }),
+              /* @__PURE__ */ jsx(
+                NiceCheckbox,
+                {
+                  checked: showLightHelpers,
+                  onChange: () => setShowLightHelpers((v) => !v)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.grid", "Grid") }),
+              /* @__PURE__ */ jsx(NiceCheckbox, { checked: showGrid, onChange: () => setShowGrid((v) => !v) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.axes", "Axes") }),
+              /* @__PURE__ */ jsx(NiceCheckbox, { checked: showAxes, onChange: () => setShowAxes((v) => !v) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.skeleton", "Skeleton") }),
+              /* @__PURE__ */ jsx(
+                NiceCheckbox,
+                {
+                  checked: showSkeleton,
+                  onChange: () => setShowSkeleton((v) => !v)
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.panelTitle, children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "grid", size: 14 }),
+            " ",
+            t("modelEditorRightPanel.snapping", "Snapping")
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.panelContent, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.snap", "Snap") }),
+              /* @__PURE__ */ jsx(NiceCheckbox, { checked: snapEnabled, onChange: () => setSnapEnabled((v) => !v) })
+            ] }),
+            snapEnabled && /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorRightPanel.gridSize", "Grid Size") }),
+              /* @__PURE__ */ jsx(
+                NiceNumberInput,
+                {
+                  className: styles.propInput,
+                  step: 0.25,
+                  min: 0.1,
+                  value: snapGrid,
+                  onChange: (val) => setSnapGrid(val ?? 1),
+                  style: { width: 60 }
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ] }),
+      propTab === "modifiers" && /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.panelTitle, children: [
+          /* @__PURE__ */ jsx(NiceIcon, { name: "settings", size: 14 }),
+          " ",
+          t("modelEditorRightPanel.modifiers", "Modifiers")
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: styles.panelContent, children: selectedNode && selectedNode.object instanceof THREE.Mesh ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            NiceButton,
+            {
+              className: styles.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.WireframeGeometry(geo);
+                  mesh.geometry = wireGeo;
+                  setStatusText(
+                    t(
+                      "modelEditorRightPanel.appliedWireframeModifier",
+                      "Applied Wireframe modifier"
+                    )
+                  );
+                  rebuildTree();
+                }
+              },
+              children: t("modelEditorRightPanel.wireframeModifier", "+ Wireframe Modifier")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            NiceButton,
+            {
+              className: styles.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__ */ jsx(
+            NiceButton,
+            {
+              className: styles.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__ */ jsx(
+            NiceButton,
+            {
+              className: styles.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__ */ jsx("div", { style: { color: "var(--nice-text-secondary, #666)", fontSize: 10 }, children: t(
+          "modelEditorRightPanel.selectAMeshToApply",
+          "Select a mesh to apply modifiers"
+        ) }) })
+      ] }),
+      propTab === "physics" && /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.panelTitle, children: [
+          /* @__PURE__ */ jsx(NiceIcon, { name: "zap", size: 14 }),
+          " ",
+          t("modelEditorRightPanel.physicsInfo", "Physics (Info)")
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: styles.panelContent, children: /* @__PURE__ */ 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__ */ jsx("br", {}),
+              /* @__PURE__ */ jsx("br", {}),
+              t("modelEditorRightPanel.plannedFeatures", "Planned features:"),
+              /* @__PURE__ */ jsx("br", {}),
+              t("modelEditorRightPanel.rigidBodySimulation", "• Rigid body simulation"),
+              /* @__PURE__ */ jsx("br", {}),
+              t("modelEditorRightPanel.softBodyDynamics", "• Soft body dynamics"),
+              /* @__PURE__ */ jsx("br", {}),
+              t("modelEditorRightPanel.clothSimulation", "• Cloth simulation"),
+              /* @__PURE__ */ jsx("br", {}),
+              t("modelEditorRightPanel.particleSystems", "• Particle systems")
+            ]
+          }
+        ) })
+      ] })
+    ] });
+  }),
+  { displayName: "ModelEditorRightPanel" }
+);
+export {
+  ModelEditorRightPanel as default
+};