@nice2dev/ui-3d 1.0.4 → 1.0.5

package/dist/cjs/uv/NiceUVEditor.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var Ve = require('react');
+var Ue = require('react');
 var uvEditorTypes = require('./uvEditorTypes.js');
 var uvEditorUtils = require('./uvEditorUtils.js');
 var UVEditor_module = require('./UVEditor.module.css.js');
@@ -10,31 +10,31 @@ var UVEditor_module = require('./UVEditor.module.css.js');
    Component
    ═══════════════════════════════════════════ */
 const NiceUVEditor = ({ geometry, texture, channel = 'uv', onUVChange, onSelectionChange, width = '100%', height = 600, showToolbar = true, showSidebar = true, className, readOnly = false, }) => {
-    const canvasRef = Ve.useRef(null);
-    const containerRef = Ve.useRef(null);
+    const canvasRef = Ue.useRef(null);
+    const containerRef = Ue.useRef(null);
     // State
-    const [state, setState] = Ve.useState({
+    const [state, setState] = Ue.useState({
         ...uvEditorTypes.DEFAULT_UV_STATE,
         activeChannel: channel,
     });
-    const [meshData, setMeshData] = Ve.useState(null);
-    const [selection, setSelection] = Ve.useState({
+    const [meshData, setMeshData] = Ue.useState(null);
+    const [selection, setSelection] = Ue.useState({
         vertices: new Set(),
         edges: new Set(),
         faces: new Set(),
         islands: new Set(),
     });
-    const [dragState, setDragState] = Ve.useState({
+    const [dragState, setDragState] = Ue.useState({
         active: false,
         startPos: { u: 0, v: 0 },
         currentPos: { u: 0, v: 0 },
         mode: 'select',
         initialPositions: new Map(),
     });
-    const [undoStack, setUndoStack] = Ve.useState([]);
-    const [redoStack, setRedoStack] = Ve.useState([]);
+    const [undoStack, setUndoStack] = Ue.useState([]);
+    const [redoStack, setRedoStack] = Ue.useState([]);
     // Extract mesh data when geometry changes
-    Ve.useEffect(() => {
+    Ue.useEffect(() => {
         if (geometry) {
             const data = uvEditorUtils.extractUVMeshData(geometry, state.activeChannel);
             setMeshData(data);
@@ -45,7 +45,7 @@ const NiceUVEditor = ({ geometry, texture, channel = 'uv', onUVChange, onSelecti
         }
     }, [geometry, state.activeChannel]);
     // Render UV view
-    Ve.useEffect(() => {
+    Ue.useEffect(() => {
         if (!canvasRef.current || !meshData)
             return;
         const canvas = canvasRef.current;
@@ -193,7 +193,7 @@ const NiceUVEditor = ({ geometry, texture, channel = 'uv', onUVChange, onSelecti
         }
     }, [meshData, state, texture, dragState, selection]);
     // Resize canvas
-    Ve.useEffect(() => {
+    Ue.useEffect(() => {
         if (!canvasRef.current || !containerRef.current)
             return;
         const observer = new ResizeObserver(() => {
@@ -205,14 +205,14 @@ const NiceUVEditor = ({ geometry, texture, channel = 'uv', onUVChange, onSelecti
         return () => observer.disconnect();
     }, []);
     // Push undo state
-    const pushUndo = Ve.useCallback(() => {
+    const pushUndo = Ue.useCallback(() => {
         if (!meshData)
             return;
         setUndoStack(prev => [...prev.slice(-20), JSON.parse(JSON.stringify(meshData))]);
         setRedoStack([]);
     }, [meshData]);
     // Undo
-    const undo = Ve.useCallback(() => {
+    const undo = Ue.useCallback(() => {
         if (undoStack.length === 0 || !meshData)
             return;
         setRedoStack(prev => [...prev, JSON.parse(JSON.stringify(meshData))]);
@@ -221,7 +221,7 @@ const NiceUVEditor = ({ geometry, texture, channel = 'uv', onUVChange, onSelecti
         setMeshData(prev);
     }, [undoStack, meshData]);
     // Redo
-    const redo = Ve.useCallback(() => {
+    const redo = Ue.useCallback(() => {
         if (redoStack.length === 0)
             return;
         const next = redoStack[redoStack.length - 1];
@@ -232,7 +232,7 @@ const NiceUVEditor = ({ geometry, texture, channel = 'uv', onUVChange, onSelecti
         setMeshData(next);
     }, [redoStack, meshData]);
     // Screen to UV conversion
-    const screenToUV = Ve.useCallback((clientX, clientY) => {
+    const screenToUV = Ue.useCallback((clientX, clientY) => {
         if (!canvasRef.current)
             return { u: 0, v: 0 };
         const rect = canvasRef.current.getBoundingClientRect();
@@ -245,7 +245,7 @@ const NiceUVEditor = ({ geometry, texture, channel = 'uv', onUVChange, onSelecti
         };
     }, [state]);
     // Mouse handlers
-    const handleMouseDown = Ve.useCallback((e) => {
+    const handleMouseDown = Ue.useCallback((e) => {
         if (readOnly || !meshData)
             return;
         const uv = screenToUV(e.clientX, e.clientY);
@@ -294,7 +294,7 @@ const NiceUVEditor = ({ geometry, texture, channel = 'uv', onUVChange, onSelecti
             }
         }
     }, [readOnly, meshData, state.activeTool, screenToUV, pushUndo]);
-    const handleMouseMove = Ve.useCallback((e) => {
+    const handleMouseMove = Ue.useCallback((e) => {
         if (!dragState.active || !meshData)
             return;
         const uv = screenToUV(e.clientX, e.clientY);
@@ -344,7 +344,7 @@ const NiceUVEditor = ({ geometry, texture, channel = 'uv', onUVChange, onSelecti
         }
         setDragState(prev => ({ ...prev, currentPos: uv }));
     }, [dragState, meshData, state.activeTool, screenToUV]);
-    const handleMouseUp = Ve.useCallback((e) => {
+    const handleMouseUp = Ue.useCallback((e) => {
         if (!dragState.active || !meshData) {
             setDragState(prev => ({ ...prev, active: false }));
             return;
@@ -380,7 +380,7 @@ const NiceUVEditor = ({ geometry, texture, channel = 'uv', onUVChange, onSelecti
         setDragState(prev => ({ ...prev, active: false }));
     }, [dragState, meshData, geometry, state.activeChannel, onSelectionChange, onUVChange]);
     // Wheel handler (zoom)
-    const handleWheel = Ve.useCallback((e) => {
+    const handleWheel = Ue.useCallback((e) => {
         e.preventDefault();
         const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
         setState(prev => ({
@@ -389,7 +389,7 @@ const NiceUVEditor = ({ geometry, texture, channel = 'uv', onUVChange, onSelecti
         }));
     }, []);
     // Keyboard handler
-    Ve.useEffect(() => {
+    Ue.useEffect(() => {
         const handler = (e) => {
             if (readOnly)
                 return;
@@ -448,7 +448,7 @@ const NiceUVEditor = ({ geometry, texture, channel = 'uv', onUVChange, onSelecti
         return () => window.removeEventListener('keydown', handler);
     }, [readOnly, meshData, undo, redo]);
     // Tool actions
-    const handlePack = Ve.useCallback(() => {
+    const handlePack = Ue.useCallback(() => {
         if (!meshData || readOnly)
             return;
         pushUndo();
@@ -460,7 +460,7 @@ const NiceUVEditor = ({ geometry, texture, channel = 'uv', onUVChange, onSelecti
         }
         setMeshData({ ...meshData });
     }, [meshData, geometry, state.activeChannel, readOnly, pushUndo, onUVChange]);
-    const handleRelax = Ve.useCallback(() => {
+    const handleRelax = Ue.useCallback(() => {
         if (!meshData || readOnly)
             return;
         pushUndo();
@@ -474,7 +474,7 @@ const NiceUVEditor = ({ geometry, texture, channel = 'uv', onUVChange, onSelecti
         }
         setMeshData({ ...meshData });
     }, [meshData, geometry, state.activeChannel, readOnly, pushUndo, onUVChange]);
-    const handleProject = Ve.useCallback((type) => {
+    const handleProject = Ue.useCallback((type) => {
         if (!meshData || !geometry || readOnly)
             return;
         pushUndo();

package/dist/esm/model/ModelEditorLeftPanel.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import Ve from 'react';
+import Ue from 'react';
 import styles from './ModelEditor.module.css.js';
-import { NiceButton as Oe, NiceTextInput as _t } from '../ui/dist/index.js';
+import { NiceButton as We, NiceTextInput as Tt } from '../ui/dist/index.js';
 
-const ModelEditorLeftPanel = Ve.memo(({ api }) => {
+const ModelEditorLeftPanel = Ue.memo(({ api }) => {
     const { sceneTree, selectedId, outlinerSearch, setOutlinerSearch, selectObject, rebuildTree, toggleNodeExpanded, toggleNodeVisibility, } = api;
     const renderTreeNode = (node, depth) => {
         // Outliner search filter
@@ -22,7 +22,7 @@ const ModelEditorLeftPanel = Ve.memo(({ api }) => {
                 node.type === "light" ? "💡" :
                     node.type === "camera" ? "📷" :
                         node.type === "helper" ? "◇" : "📁";
-        return (jsxs(Ve.Fragment, { children: [jsxs("div", { className: `${styles.treeItem} ${selectedId === node.id ? styles.treeItemActive : ""}`, style: { paddingLeft: depth * 16 + 4 }, onClick: () => selectObject(node), children: [hasChildren ? (jsx("span", { className: styles.treeToggle, onClick: (e) => {
+        return (jsxs(Ue.Fragment, { children: [jsxs("div", { className: `${styles.treeItem} ${selectedId === node.id ? styles.treeItemActive : ""}`, style: { paddingLeft: depth * 16 + 4 }, onClick: () => selectObject(node), children: [hasChildren ? (jsx("span", { className: styles.treeToggle, onClick: (e) => {
                                 e.stopPropagation();
                                 toggleNodeExpanded(node);
                             }, children: node.expanded ? "▼" : "▶" })) : (jsx("span", { className: styles.treeToggle })), jsx("span", { className: styles.treeIcon, children: icon }), jsx("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis" }, children: node.name }), jsx("span", { className: styles.treeVisibility, onClick: (e) => {
@@ -31,7 +31,7 @@ const ModelEditorLeftPanel = Ve.memo(({ api }) => {
                             }, children: node.visible ? "👁" : "◌" })] }), node.expanded &&
                     node.children.map((c) => renderTreeNode(c, depth + 1))] }, node.id));
     };
-    return (jsx("div", { className: styles.leftPanel, children: jsxs("div", { className: styles.panelSection, children: [jsxs("div", { className: styles.panelTitle, children: ["\uD83D\uDCCB Outliner", jsx(Oe, { variant: "ghost", size: "sm", onClick: rebuildTree, title: "Refresh", "aria-label": "Refresh outliner", children: "\u27F3" })] }), jsx("div", { className: styles.outlinerSearch, children: jsx(_t, { className: styles.propInput, placeholder: "\uD83D\uDD0D Filter...", value: outlinerSearch, onChange: (val) => setOutlinerSearch(val), style: { width: "100%", marginBottom: 4 } }) }), jsxs("div", { className: styles.panelContent, style: { overflowY: "auto", flex: 1 }, children: [sceneTree.length === 0 && (jsx("div", { style: { color: "#666", fontSize: 10, padding: "8px 0" }, children: "Drop a 3D file to begin" })), sceneTree.map((n) => renderTreeNode(n, 0))] })] }) }));
+    return (jsx("div", { className: styles.leftPanel, children: jsxs("div", { className: styles.panelSection, children: [jsxs("div", { className: styles.panelTitle, children: ["\uD83D\uDCCB Outliner", jsx(We, { variant: "ghost", size: "sm", onClick: rebuildTree, title: "Refresh", "aria-label": "Refresh outliner", children: "\u27F3" })] }), jsx("div", { className: styles.outlinerSearch, children: jsx(Tt, { className: styles.propInput, placeholder: "\uD83D\uDD0D Filter...", value: outlinerSearch, onChange: (val) => setOutlinerSearch(val), style: { width: "100%", marginBottom: 4 } }) }), jsxs("div", { className: styles.panelContent, style: { overflowY: "auto", flex: 1 }, children: [sceneTree.length === 0 && (jsx("div", { style: { color: "#666", fontSize: 10, padding: "8px 0" }, children: "Drop a 3D file to begin" })), sceneTree.map((n) => renderTreeNode(n, 0))] })] }) }));
 });
 ModelEditorLeftPanel.displayName = "ModelEditorLeftPanel";
 

package/dist/esm/model/ModelEditorMenuBar.js

@@ -1,15 +1,15 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import Ve from 'react';
+import Ue from 'react';
 import styles from './ModelEditor.module.css.js';
-import { NiceSelect as nn, NiceButton as Oe, NiceCheckbox as ma, NiceColorPicker as Nn } from '../ui/dist/index.js';
+import { NiceSelect as fn, NiceButton as We, NiceCheckbox as Fr, NiceColorPicker as Rn } from '../ui/dist/index.js';
 
-const ModelEditorMenuBar = Ve.memo(({ api, hasOnSaveToLibrary }) => {
+const ModelEditorMenuBar = Ue.memo(({ api, hasOnSaveToLibrary }) => {
     const { editorMode, setEditorMode, fileInputRef, mergeInputRef, addMenuOpen, setAddMenuOpen, addPrimitive, addSceneLight, addCameraObject, addEmpty, selectedNode, duplicateSelected, deleteSelected, exportGLTF, exportOBJ, exportSTL, exportPLY, exportUSDZ, saveToLibrary, clearScene, showGrid, setShowGrid, showAxes, setShowAxes, wireframe, setWireframe, showSkeleton, setShowSkeleton, showLightHelpers, setShowLightHelpers, bgColor, setBgColor, } = api;
-    return (jsxs("div", { className: styles.menuBar, children: [jsx(nn, { className: styles.modeSelect, value: editorMode, onChange: (val) => setEditorMode(val), options: [
+    return (jsxs("div", { className: styles.menuBar, children: [jsx(fn, { className: styles.modeSelect, value: editorMode, onChange: (val) => setEditorMode(val), options: [
                     { value: "object", label: "Object Mode" },
                     { value: "edit", label: "Edit Mode" },
                     { value: "pose", label: "Pose Mode" },
-                ] }), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "\uD83D\uDCC2 Open" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = mergeInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, title: "Merge animations from FBX/GLTF onto current model", children: "\u2795 Merge Anim" }), jsx("div", { className: styles.menuSep }), jsxs("div", { className: styles.menuDropdownWrap, children: [jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => setAddMenuOpen(addMenuOpen ? null : "mesh"), children: "\uFF0B Add \u25BE" }), addMenuOpen && (jsxs("div", { className: styles.dropdownMenu, children: [jsx("div", { className: styles.dropdownTitle, children: "Mesh" }), ["cube", "sphere", "cylinder", "cone", "torus", "plane", "circle", "ring", "dodecahedron", "icosahedron", "octahedron", "tetrahedron", "torusKnot"].map((t) => (jsx("div", { className: styles.dropdownItem, onClick: () => addPrimitive(t), children: t.charAt(0).toUpperCase() + t.slice(1) }, t))), jsx("div", { className: styles.dropdownSep }), jsx("div", { className: styles.dropdownTitle, children: "Light" }), ["point", "spot", "directional", "hemisphere"].map((t) => (jsxs("div", { className: styles.dropdownItem, onClick: () => addSceneLight(t), children: ["\uD83D\uDCA1 ", t.charAt(0).toUpperCase() + t.slice(1)] }, t))), jsx("div", { className: styles.dropdownSep }), jsx("div", { className: styles.dropdownTitle, children: "Other" }), jsx("div", { className: styles.dropdownItem, onClick: addCameraObject, children: "\uD83D\uDCF7 Camera" }), jsx("div", { className: styles.dropdownItem, onClick: () => addEmpty("arrows"), children: "\u22B9 Empty (Arrows)" })] }))] }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: duplicateSelected, disabled: !selectedNode, title: "Duplicate selected (Shift+D)", children: "\uD83D\uDCCB Duplicate" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: deleteSelected, disabled: !selectedNode, title: "Delete selected (Delete)", children: "\u2715 Delete" }), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => exportGLTF(true), children: "\uD83D\uDCBE Export GLB" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => exportGLTF(false), children: "\uD83D\uDCC4 Export GLTF" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportOBJ, children: "\uD83D\uDCC4 Export OBJ" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => exportSTL(true), children: "\uD83D\uDCC4 Export STL" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => exportPLY(true), children: "\uD83D\uDCC4 Export PLY" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportUSDZ, children: "\uD83D\uDCC4 Export USDZ" }), hasOnSaveToLibrary && (jsxs(Fragment, { children: [jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: saveToLibrary, children: "\uD83D\uDCE6 Save to Library" })] })), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: clearScene, children: "\uD83D\uDDD1 Clear" }), jsx("div", { className: styles.menuSep }), jsx(ma, { checked: showGrid, onChange: () => setShowGrid((v) => !v), label: "Grid" }), jsx(ma, { checked: showAxes, onChange: () => setShowAxes((v) => !v), label: "Axes" }), jsx(ma, { checked: wireframe, onChange: () => setWireframe((v) => !v), label: "Wire" }), jsx(ma, { checked: showSkeleton, onChange: () => setShowSkeleton((v) => !v), label: "Skel" }), jsx(ma, { checked: showLightHelpers, onChange: () => setShowLightHelpers((v) => !v), label: "Helpers" }), jsxs("div", { className: styles.menuRight, children: [jsx("label", { className: styles.menuLabel, children: "BG" }), jsx(Nn, { value: bgColor, onChange: (c) => setBgColor(c) })] })] }));
+                ] }), jsx("div", { className: styles.menuSep }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "\uD83D\uDCC2 Open" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = mergeInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, title: "Merge animations from FBX/GLTF onto current model", children: "\u2795 Merge Anim" }), jsx("div", { className: styles.menuSep }), jsxs("div", { className: styles.menuDropdownWrap, children: [jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => setAddMenuOpen(addMenuOpen ? null : "mesh"), children: "\uFF0B Add \u25BE" }), addMenuOpen && (jsxs("div", { className: styles.dropdownMenu, children: [jsx("div", { className: styles.dropdownTitle, children: "Mesh" }), ["cube", "sphere", "cylinder", "cone", "torus", "plane", "circle", "ring", "dodecahedron", "icosahedron", "octahedron", "tetrahedron", "torusKnot"].map((t) => (jsx("div", { className: styles.dropdownItem, onClick: () => addPrimitive(t), children: t.charAt(0).toUpperCase() + t.slice(1) }, t))), jsx("div", { className: styles.dropdownSep }), jsx("div", { className: styles.dropdownTitle, children: "Light" }), ["point", "spot", "directional", "hemisphere"].map((t) => (jsxs("div", { className: styles.dropdownItem, onClick: () => addSceneLight(t), children: ["\uD83D\uDCA1 ", t.charAt(0).toUpperCase() + t.slice(1)] }, t))), jsx("div", { className: styles.dropdownSep }), jsx("div", { className: styles.dropdownTitle, children: "Other" }), jsx("div", { className: styles.dropdownItem, onClick: addCameraObject, children: "\uD83D\uDCF7 Camera" }), jsx("div", { className: styles.dropdownItem, onClick: () => addEmpty("arrows"), children: "\u22B9 Empty (Arrows)" })] }))] }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: duplicateSelected, disabled: !selectedNode, title: "Duplicate selected (Shift+D)", children: "\uD83D\uDCCB Duplicate" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: deleteSelected, disabled: !selectedNode, title: "Delete selected (Delete)", children: "\u2715 Delete" }), jsx("div", { className: styles.menuSep }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => exportGLTF(true), children: "\uD83D\uDCBE Export GLB" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => exportGLTF(false), children: "\uD83D\uDCC4 Export GLTF" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportOBJ, children: "\uD83D\uDCC4 Export OBJ" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => exportSTL(true), children: "\uD83D\uDCC4 Export STL" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => exportPLY(true), children: "\uD83D\uDCC4 Export PLY" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportUSDZ, children: "\uD83D\uDCC4 Export USDZ" }), hasOnSaveToLibrary && (jsxs(Fragment, { children: [jsx("div", { className: styles.menuSep }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: saveToLibrary, children: "\uD83D\uDCE6 Save to Library" })] })), jsx("div", { className: styles.menuSep }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: clearScene, children: "\uD83D\uDDD1 Clear" }), jsx("div", { className: styles.menuSep }), jsx(Fr, { checked: showGrid, onChange: () => setShowGrid((v) => !v), label: "Grid" }), jsx(Fr, { checked: showAxes, onChange: () => setShowAxes((v) => !v), label: "Axes" }), jsx(Fr, { checked: wireframe, onChange: () => setWireframe((v) => !v), label: "Wire" }), jsx(Fr, { checked: showSkeleton, onChange: () => setShowSkeleton((v) => !v), label: "Skel" }), jsx(Fr, { checked: showLightHelpers, onChange: () => setShowLightHelpers((v) => !v), label: "Helpers" }), jsxs("div", { className: styles.menuRight, children: [jsx("label", { className: styles.menuLabel, children: "BG" }), jsx(Rn, { value: bgColor, onChange: (c) => setBgColor(c) })] })] }));
 });
 ModelEditorMenuBar.displayName = "ModelEditorMenuBar";
 

package/dist/esm/model/ModelEditorRightPanel.js

@@ -1,49 +1,49 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import Ve from 'react';
+import Ue from 'react';
 import * as THREE from 'three';
 import styles from './ModelEditor.module.css.js';
 import { DEG } from './modelEditorTypes.js';
 import { Vec3Row, Vec3RowDeg, MaterialCard } from './ModelEditorSubComponents.js';
-import { NiceButton as Oe, NiceTextInput as _t, NiceColorPicker as Nn, NiceSlider as Ar, NiceCheckbox as ma, NiceNumberInput as Ri } from '../ui/dist/index.js';
+import { NiceButton as We, NiceTextInput as Tt, NiceColorPicker as Rn, NiceSlider as so, NiceCheckbox as Fr, NiceNumberInput as ir } from '../ui/dist/index.js';
 
-const ModelEditorRightPanel = Ve.memo(({ api }) => {
+const ModelEditorRightPanel = Ue.memo(({ api }) => {
     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(Oe, { className: styles.propTabBtn, variant: propTab === t ? "primary" : "ghost", size: "sm", onClick: () => setPropTab(t), title: t.charAt(0).toUpperCase() + t.slice(1), children: t === "object" ? "🔧" : t === "material" ? "🎨" : t === "world" ? "🌍" : t === "modifiers" ? "🔩" : "⚡" }, t))) }), propTab === "object" && (jsxs(Fragment, { children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "\uD83D\uDD27 Transform" }), jsx("div", { className: styles.panelContent, children: selectedNode ? (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Name" }), jsx(_t, { className: styles.propInput, value: selectedNode.name, onChange: (val) => {
+    return (jsxs("div", { className: styles.rightPanel, children: [jsx("div", { className: styles.propTabs, children: ["object", "material", "world", "modifiers", "physics"].map((t) => (jsx(We, { className: styles.propTabBtn, variant: propTab === t ? "primary" : "ghost", size: "sm", onClick: () => setPropTab(t), title: t.charAt(0).toUpperCase() + t.slice(1), children: t === "object" ? "🔧" : t === "material" ? "🎨" : t === "world" ? "🌍" : t === "modifiers" ? "🔩" : "⚡" }, t))) }), propTab === "object" && (jsxs(Fragment, { children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "\uD83D\uDD27 Transform" }), jsx("div", { className: styles.panelContent, children: selectedNode ? (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Name" }), jsx(Tt, { 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: "Type" }), jsx("span", { style: { fontSize: 10, color: "#888" }, children: selectedNode.type })] }), jsx(Vec3Row, { label: "Position", value: selectedNode.object.position, onChange: () => setMatRefresh((n) => n + 1) }), jsx(Vec3RowDeg, { label: "Rotation", value: selectedNode.object.rotation, onChange: () => setMatRefresh((n) => n + 1) }), jsx(Vec3Row, { label: "Scale", value: selectedNode.object.scale, onChange: () => setMatRefresh((n) => n + 1) })] })) : (jsx("div", { style: { color: "#666", fontSize: 10 }, children: "Select an object" })) })] }), selectedNode && selectedNode.object instanceof THREE.Light && (jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "\uD83D\uDCA1 Light" }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Color" }), jsx(Nn, { value: `#${selectedNode.object.color.getHexString()}`, onChange: (c) => {
+                                                    } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Type" }), jsx("span", { style: { fontSize: 10, color: "#888" }, children: selectedNode.type })] }), jsx(Vec3Row, { label: "Position", value: selectedNode.object.position, onChange: () => setMatRefresh((n) => n + 1) }), jsx(Vec3RowDeg, { label: "Rotation", value: selectedNode.object.rotation, onChange: () => setMatRefresh((n) => n + 1) }), jsx(Vec3Row, { label: "Scale", value: selectedNode.object.scale, onChange: () => setMatRefresh((n) => n + 1) })] })) : (jsx("div", { style: { color: "#666", fontSize: 10 }, children: "Select an object" })) })] }), selectedNode && selectedNode.object instanceof THREE.Light && (jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "\uD83D\uDCA1 Light" }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Color" }), jsx(Rn, { 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: "Intensity" }), jsx(Ar, { min: 0, max: 10, step: 0.1, value: selectedNode.object.intensity, onChange: (val) => {
+                                                } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Intensity" }), jsx(so, { 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: "#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: "Shadow" }), jsx(ma, { checked: selectedNode.object.castShadow, onChange: (checked) => {
+                                                }, style: { flex: 1 } }), jsx("span", { style: { fontSize: 9, color: "#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: "Shadow" }), jsx(Fr, { 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: "Angle" }), jsx(Ar, { min: 0, max: 90, step: 1, value: (selectedNode.object.angle * DEG), onChange: (val) => {
+                                                } })] })), selectedNode.object instanceof THREE.SpotLight && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Angle" }), jsx(so, { 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: "#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: "Penumbra" }), jsx(Ar, { min: 0, max: 1, step: 0.01, value: selectedNode.object.penumbra, onChange: (val) => {
+                                                        }, style: { flex: 1 } }), jsxs("span", { style: { fontSize: 9, color: "#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: "Penumbra" }), jsx(so, { 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: [jsx("div", { className: styles.panelTitle, children: "\uD83D\uDCF7 Camera" }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "FOV" }), jsx(Ar, { min: 10, max: 120, step: 1, value: selectedNode.object.fov, onChange: (val) => {
+                                                        }, style: { flex: 1 } })] })] }))] })] })), selectedNode && selectedNode.object instanceof THREE.PerspectiveCamera && (jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "\uD83D\uDCF7 Camera" }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "FOV" }), jsx(so, { 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: "#888", width: 28, textAlign: "right" }, children: [selectedNode.object.fov.toFixed(0), "\u00B0"] })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Near" }), jsx(Ri, { className: styles.propInput, step: 0.01, value: selectedNode.object.near, onChange: (val) => {
+                                                }, style: { flex: 1 } }), jsxs("span", { style: { fontSize: 9, color: "#888", width: 28, textAlign: "right" }, children: [selectedNode.object.fov.toFixed(0), "\u00B0"] })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Near" }), jsx(ir, { 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: "Far" }), jsx(Ri, { className: styles.propInput, step: 1, value: selectedNode.object.far, onChange: (val) => {
+                                                }, style: { width: 60 } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Far" }), jsx(ir, { 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: [jsx("div", { className: styles.panelTitle, children: "\uD83E\uDD16 AI Animation" }), jsx("div", { className: styles.panelContent, children: jsxs("div", { className: styles.aiPanel, children: [jsx("div", { className: styles.aiHeader, children: "\u2728 Generate animation from video" }), jsx("p", { style: { fontSize: 10, color: "#888", margin: "0 0 6px" }, children: "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(Oe, { 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 ? "Processing..." : "Upload Video" }) }), aiStatus && (jsx("div", { className: styles.aiStatus, children: aiStatus }))] }) })] })] })), propTab === "material" && (jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "\uD83C\uDFA8 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: "#666", fontSize: 10 }, children: selectedNode
+                                                }, style: { width: 80 } })] })] })] })), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "\uD83E\uDD16 AI Animation" }), jsx("div", { className: styles.panelContent, children: jsxs("div", { className: styles.aiPanel, children: [jsx("div", { className: styles.aiHeader, children: "\u2728 Generate animation from video" }), jsx("p", { style: { fontSize: 10, color: "#888", margin: "0 0 6px" }, children: "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(We, { 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 ? "Processing..." : "Upload Video" }) }), aiStatus && (jsx("div", { className: styles.aiStatus, children: aiStatus }))] }) })] })] })), propTab === "material" && (jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "\uD83C\uDFA8 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: "#666", fontSize: 10 }, children: selectedNode
                                 ? "No materials on this object"
-                                : "Select a mesh to inspect" })) })] })), propTab === "world" && (jsxs(Fragment, { children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "\uD83C\uDF0D Environment" }), jsx("div", { className: styles.panelContent, children: jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Background" }), jsx(Nn, { value: bgColor, onChange: (c) => setBgColor(c) }), jsx("span", { style: { fontSize: 9, color: "#888" }, children: bgColor })] }) })] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "\uD83C\uDF2B Fog" }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Enable" }), jsx(ma, { checked: fogEnabled, onChange: () => setFogEnabled((v) => !v) })] }), fogEnabled && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Color" }), jsx(Nn, { value: fogColor, onChange: (c) => setFogColor(c) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Near" }), jsx(Ri, { 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: "Far" }), jsx(Ri, { className: styles.propInput, value: fogFar, onChange: (val) => setFogFar(val !== null && val !== void 0 ? val : 100), style: { width: 60 } })] })] }))] })] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "\uD83D\uDD06 Scene Lights" }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Show Helpers" }), jsx(ma, { checked: showLightHelpers, onChange: () => setShowLightHelpers((v) => !v) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Grid" }), jsx(ma, { checked: showGrid, onChange: () => setShowGrid((v) => !v) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Axes" }), jsx(ma, { checked: showAxes, onChange: () => setShowAxes((v) => !v) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Skeleton" }), jsx(ma, { checked: showSkeleton, onChange: () => setShowSkeleton((v) => !v) })] })] })] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "\uD83E\uDDF2 Snapping" }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Snap" }), jsx(ma, { checked: snapEnabled, onChange: () => setSnapEnabled((v) => !v) })] }), snapEnabled && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Grid Size" }), jsx(Ri, { 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: [jsx("div", { className: styles.panelTitle, children: "\uD83D\uDD29 Modifiers" }), jsx("div", { className: styles.panelContent, children: selectedNode && selectedNode.object instanceof THREE.Mesh ? (jsxs(Fragment, { children: [jsx(Oe, { className: styles.btnSecondary, variant: "ghost", size: "sm", style: { width: "100%", marginBottom: 4 }, onClick: () => {
+                                : "Select a mesh to inspect" })) })] })), propTab === "world" && (jsxs(Fragment, { children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "\uD83C\uDF0D Environment" }), jsx("div", { className: styles.panelContent, children: jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Background" }), jsx(Rn, { value: bgColor, onChange: (c) => setBgColor(c) }), jsx("span", { style: { fontSize: 9, color: "#888" }, children: bgColor })] }) })] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "\uD83C\uDF2B Fog" }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Enable" }), jsx(Fr, { checked: fogEnabled, onChange: () => setFogEnabled((v) => !v) })] }), fogEnabled && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Color" }), jsx(Rn, { value: fogColor, onChange: (c) => setFogColor(c) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Near" }), jsx(ir, { 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: "Far" }), jsx(ir, { className: styles.propInput, value: fogFar, onChange: (val) => setFogFar(val !== null && val !== void 0 ? val : 100), style: { width: 60 } })] })] }))] })] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "\uD83D\uDD06 Scene Lights" }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Show Helpers" }), jsx(Fr, { checked: showLightHelpers, onChange: () => setShowLightHelpers((v) => !v) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Grid" }), jsx(Fr, { checked: showGrid, onChange: () => setShowGrid((v) => !v) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Axes" }), jsx(Fr, { checked: showAxes, onChange: () => setShowAxes((v) => !v) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Skeleton" }), jsx(Fr, { checked: showSkeleton, onChange: () => setShowSkeleton((v) => !v) })] })] })] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "\uD83E\uDDF2 Snapping" }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Snap" }), jsx(Fr, { checked: snapEnabled, onChange: () => setSnapEnabled((v) => !v) })] }), snapEnabled && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Grid Size" }), jsx(ir, { 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: [jsx("div", { className: styles.panelTitle, children: "\uD83D\uDD29 Modifiers" }), jsx("div", { className: styles.panelContent, children: selectedNode && selectedNode.object instanceof THREE.Mesh ? (jsxs(Fragment, { children: [jsx(We, { 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;
@@ -53,17 +53,17 @@ const ModelEditorRightPanel = Ve.memo(({ api }) => {
                                             setStatusText("Applied Wireframe modifier");
                                             rebuildTree();
                                         }
-                                    }, children: "+ Wireframe Modifier" }), jsx(Oe, { className: styles.btnSecondary, variant: "ghost", size: "sm", style: { width: "100%", marginBottom: 4 }, onClick: () => {
+                                    }, children: "+ Wireframe Modifier" }), jsx(We, { className: styles.btnSecondary, variant: "ghost", size: "sm", style: { width: "100%", marginBottom: 4 }, onClick: () => {
                                         const mesh = selectedNode.object;
                                         mesh.geometry.computeVertexNormals();
                                         setStatusText("Recomputed normals");
-                                    }, children: "Recompute Normals" }), jsx(Oe, { className: styles.btnSecondary, variant: "ghost", size: "sm", style: { width: "100%", marginBottom: 4 }, onClick: () => {
+                                    }, children: "Recompute Normals" }), jsx(We, { className: styles.btnSecondary, variant: "ghost", size: "sm", style: { width: "100%", marginBottom: 4 }, onClick: () => {
                                         const mesh = selectedNode.object;
                                         const geo = mesh.geometry;
                                         geo.center();
                                         setStatusText("Centered geometry");
                                         setMatRefresh((n) => n + 1);
-                                    }, children: "Center Geometry" }), jsx(Oe, { className: styles.btnSecondary, variant: "ghost", size: "sm", style: { width: "100%", marginBottom: 4 }, onClick: () => {
+                                    }, children: "Center Geometry" }), jsx(We, { 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;

package/dist/esm/model/ModelEditorSubComponents.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import * as THREE from 'three';
 import styles from './ModelEditor.module.css.js';
 import { DEG } from './modelEditorTypes.js';
-import { NiceTextInput as _t, NiceColorPicker as Nn, NiceSlider as Ar, NiceSelect as nn } from '../ui/dist/index.js';
+import { NiceTextInput as Tt, NiceColorPicker as Rn, NiceSlider as so, NiceSelect as fn } from '../ui/dist/index.js';
 
 /* ═══════════════════════════════════════════
    Sub-components
@@ -19,7 +19,7 @@ const Vec3Row = ({ label, value, onChange }) => {
             onChange();
         }
     };
-    return (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: label }), jsxs("div", { className: styles.propVec3, children: [jsx(_t, { className: styles.propVec3X, value: value.x.toFixed(3), onChange: (val) => set("x", val) }), jsx(_t, { className: styles.propVec3Y, value: value.y.toFixed(3), onChange: (val) => set("y", val) }), jsx(_t, { className: styles.propVec3Z, value: value.z.toFixed(3), onChange: (val) => set("z", val) })] })] }));
+    return (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: label }), jsxs("div", { className: styles.propVec3, children: [jsx(Tt, { className: styles.propVec3X, value: value.x.toFixed(3), onChange: (val) => set("x", val) }), jsx(Tt, { className: styles.propVec3Y, value: value.y.toFixed(3), onChange: (val) => set("y", val) }), jsx(Tt, { className: styles.propVec3Z, value: value.z.toFixed(3), onChange: (val) => set("z", val) })] })] }));
 };
 /** Vec3 input row for rotation (shows degrees) */
 const Vec3RowDeg = ({ label, value, onChange }) => {
@@ -32,7 +32,7 @@ const Vec3RowDeg = ({ label, value, onChange }) => {
             onChange();
         }
     };
-    return (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: label }), jsxs("div", { className: styles.propVec3, children: [jsx(_t, { className: styles.propVec3X, value: (value.x * DEG).toFixed(1), onChange: (val) => set("x", val) }), jsx(_t, { className: styles.propVec3Y, value: (value.y * DEG).toFixed(1), onChange: (val) => set("y", val) }), jsx(_t, { className: styles.propVec3Z, value: (value.z * DEG).toFixed(1), onChange: (val) => set("z", val) })] })] }));
+    return (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: label }), jsxs("div", { className: styles.propVec3, children: [jsx(Tt, { className: styles.propVec3X, value: (value.x * DEG).toFixed(1), onChange: (val) => set("x", val) }), jsx(Tt, { className: styles.propVec3Y, value: (value.y * DEG).toFixed(1), onChange: (val) => set("y", val) }), jsx(Tt, { className: styles.propVec3Z, value: (value.z * DEG).toFixed(1), onChange: (val) => set("z", val) })] })] }));
 };
 /** Material card with editable properties */
 const MaterialCard = ({ material, active, onClick, onUpdate }) => {
@@ -56,16 +56,16 @@ const MaterialCard = ({ material, active, onClick, onUpdate }) => {
         mat.needsUpdate = true;
         onUpdate();
     };
-    return (jsxs("div", { className: `${styles.materialCard} ${active ? styles.materialCardActive : ""}`, onClick: onClick, children: [jsx("div", { className: styles.materialHeader, children: jsx("span", { className: styles.materialName, children: mat.name || mat.type }) }), hasColor && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Color" }), jsx(Nn, { value: `#${mat.color.getHexString()}`, onChange: (c) => setColor(c) }), jsxs("span", { style: { fontSize: 10, color: "#888" }, children: ["#", mat.color.getHexString()] })] })), hasMetalness && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Metal" }), jsx(Ar, { min: 0, max: 1, step: 0.01, value: mat.metalness, onChange: (val) => setNum("metalness", val), style: { flex: 1 } }), jsx("span", { style: { fontSize: 9, color: "#888", width: 28, textAlign: "right" }, children: mat.metalness.toFixed(2) })] })), hasRoughness && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Rough" }), jsx(Ar, { min: 0, max: 1, step: 0.01, value: mat.roughness, onChange: (val) => setNum("roughness", val), style: { flex: 1 } }), jsx("span", { style: { fontSize: 9, color: "#888", width: 28, textAlign: "right" }, children: mat.roughness.toFixed(2) })] })), hasEmissive && mat.emissive && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Emissive" }), jsx(Nn, { value: `#${mat.emissive.getHexString()}`, onChange: (c) => {
+    return (jsxs("div", { className: `${styles.materialCard} ${active ? styles.materialCardActive : ""}`, onClick: onClick, children: [jsx("div", { className: styles.materialHeader, children: jsx("span", { className: styles.materialName, children: mat.name || mat.type }) }), hasColor && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Color" }), jsx(Rn, { value: `#${mat.color.getHexString()}`, onChange: (c) => setColor(c) }), jsxs("span", { style: { fontSize: 10, color: "#888" }, children: ["#", mat.color.getHexString()] })] })), hasMetalness && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Metal" }), jsx(so, { min: 0, max: 1, step: 0.01, value: mat.metalness, onChange: (val) => setNum("metalness", val), style: { flex: 1 } }), jsx("span", { style: { fontSize: 9, color: "#888", width: 28, textAlign: "right" }, children: mat.metalness.toFixed(2) })] })), hasRoughness && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Rough" }), jsx(so, { min: 0, max: 1, step: 0.01, value: mat.roughness, onChange: (val) => setNum("roughness", val), style: { flex: 1 } }), jsx("span", { style: { fontSize: 9, color: "#888", width: 28, textAlign: "right" }, children: mat.roughness.toFixed(2) })] })), hasEmissive && mat.emissive && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Emissive" }), jsx(Rn, { value: `#${mat.emissive.getHexString()}`, onChange: (c) => {
                             mat.emissive.set(c);
                             mat.needsUpdate = true;
                             onUpdate();
-                        } })] })), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Opacity" }), jsx(Ar, { min: 0, max: 1, step: 0.01, value: mat.opacity, onChange: (val) => {
+                        } })] })), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Opacity" }), jsx(so, { min: 0, max: 1, step: 0.01, value: mat.opacity, onChange: (val) => {
                             mat.opacity = val;
                             mat.transparent = val < 1;
                             mat.needsUpdate = true;
                             onUpdate();
-                        }, style: { flex: 1 } }), jsx("span", { style: { fontSize: 9, color: "#888", width: 28, textAlign: "right" }, children: mat.opacity.toFixed(2) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Side" }), jsx(nn, { className: styles.propSelect, value: String(mat.side), onChange: (val) => {
+                        }, style: { flex: 1 } }), jsx("span", { style: { fontSize: 9, color: "#888", width: 28, textAlign: "right" }, children: mat.opacity.toFixed(2) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Side" }), jsx(fn, { className: styles.propSelect, value: String(mat.side), onChange: (val) => {
                             mat.side = parseInt(val);
                             mat.needsUpdate = true;
                             onUpdate();

package/dist/esm/model/ModelEditorTimeline.js

@@ -1,15 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import Ve from 'react';
+import Ue from 'react';
 import styles from './ModelEditor.module.css.js';
 import { fmtTime } from './modelEditorTypes.js';
-import { NiceButton as Oe, NiceSlider as Ar } from '../ui/dist/index.js';
+import { NiceButton as We, NiceSlider as so } from '../ui/dist/index.js';
 
-const ModelEditorTimeline = Ve.memo(({ api }) => {
+const ModelEditorTimeline = Ue.memo(({ api }) => {
     const { bottomCollapsed, setBottomCollapsed, animations, activeAnimIdx, isPlaying, animTime, animDuration, animSpeed, setAnimSpeed, loopAnim, setLoopAnim, seekAnim, togglePlay, stopAnim, playClip, mergeInputRef, } = api;
-    return (jsxs("div", { className: `${styles.bottomPanel} ${bottomCollapsed ? styles.bottomPanelCollapsed : ""}`, children: [jsxs("div", { className: styles.bottomPanelHeader, children: [jsx("span", { className: styles.bottomToggle, onClick: () => setBottomCollapsed((c) => !c), children: bottomCollapsed ? "▶" : "▼" }), jsxs("span", { className: styles.bottomPanelTitle, onClick: () => setBottomCollapsed((c) => !c), children: ["Animation (", animations.length, " clip", animations.length !== 1 ? "s" : "", ")"] }), jsx("div", { className: styles.menuSep }), jsxs("div", { className: styles.transportBar, children: [jsx(Oe, { className: styles.transportBtn, variant: "ghost", size: "sm", onClick: () => seekAnim(0), title: "Go to start", children: "\u23EE" }), jsx(Oe, { className: styles.transportBtn, variant: isPlaying ? "primary" : "ghost", size: "sm", onClick: togglePlay, title: "Play/Pause (Space)", children: isPlaying ? "⏸" : "▶" }), jsx(Oe, { className: styles.transportBtn, variant: "ghost", size: "sm", onClick: stopAnim, title: "Stop", children: "\u23F9" }), jsx(Oe, { className: styles.transportBtn, variant: loopAnim ? "primary" : "ghost", size: "sm", onClick: () => setLoopAnim((v) => !v), title: "Loop", children: "\uD83D\uDD01" })] }), jsxs("span", { className: styles.transportTime, children: [fmtTime(animTime), " / ", fmtTime(animDuration)] }), jsx("div", { className: styles.menuSep }), jsx("label", { className: styles.menuLabel, children: "Speed" }), jsx(Ar, { min: 0.1, max: 3, step: 0.1, value: animSpeed, onChange: (val) => setAnimSpeed(val), style: { width: 60 } }), jsxs("span", { className: styles.menuLabel, children: [animSpeed.toFixed(1), "\u00D7"] })] }), !bottomCollapsed && (jsxs("div", { className: styles.animListArea, children: [jsxs("div", { className: styles.animList, children: [animations.length === 0 && (jsx("div", { style: { color: "#666", fontSize: 10, padding: 8 }, children: "No animations loaded" })), animations.map((anim, i) => (jsxs("div", { className: `${styles.animItem} ${i === activeAnimIdx ? styles.animItemActive : ""}`, onClick: () => playClip(i), children: [jsx("span", { children: anim.name }), jsxs("span", { className: styles.animDuration, children: [anim.duration.toFixed(1), "s"] })] }, `${anim.name}-${i}`))), jsx("div", { style: { padding: "4px 8px" }, children: jsx(Oe, { className: styles.btnSecondary, variant: "ghost", size: "sm", style: { width: "100%", fontSize: 10 }, onClick: () => { var _a; return (_a = mergeInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "+ Add Animation File" }) })] }), jsxs("div", { className: styles.timelineArea, children: [jsxs("div", { className: styles.timelineRuler, children: [animDuration > 0 &&
+    return (jsxs("div", { className: `${styles.bottomPanel} ${bottomCollapsed ? styles.bottomPanelCollapsed : ""}`, children: [jsxs("div", { className: styles.bottomPanelHeader, children: [jsx("span", { className: styles.bottomToggle, onClick: () => setBottomCollapsed((c) => !c), children: bottomCollapsed ? "▶" : "▼" }), jsxs("span", { className: styles.bottomPanelTitle, onClick: () => setBottomCollapsed((c) => !c), children: ["Animation (", animations.length, " clip", animations.length !== 1 ? "s" : "", ")"] }), jsx("div", { className: styles.menuSep }), jsxs("div", { className: styles.transportBar, children: [jsx(We, { className: styles.transportBtn, variant: "ghost", size: "sm", onClick: () => seekAnim(0), title: "Go to start", children: "\u23EE" }), jsx(We, { className: styles.transportBtn, variant: isPlaying ? "primary" : "ghost", size: "sm", onClick: togglePlay, title: "Play/Pause (Space)", children: isPlaying ? "⏸" : "▶" }), jsx(We, { className: styles.transportBtn, variant: "ghost", size: "sm", onClick: stopAnim, title: "Stop", children: "\u23F9" }), jsx(We, { className: styles.transportBtn, variant: loopAnim ? "primary" : "ghost", size: "sm", onClick: () => setLoopAnim((v) => !v), title: "Loop", children: "\uD83D\uDD01" })] }), jsxs("span", { className: styles.transportTime, children: [fmtTime(animTime), " / ", fmtTime(animDuration)] }), jsx("div", { className: styles.menuSep }), jsx("label", { className: styles.menuLabel, children: "Speed" }), jsx(so, { min: 0.1, max: 3, step: 0.1, value: animSpeed, onChange: (val) => setAnimSpeed(val), style: { width: 60 } }), jsxs("span", { className: styles.menuLabel, children: [animSpeed.toFixed(1), "\u00D7"] })] }), !bottomCollapsed && (jsxs("div", { className: styles.animListArea, children: [jsxs("div", { className: styles.animList, children: [animations.length === 0 && (jsx("div", { style: { color: "#666", fontSize: 10, padding: 8 }, children: "No animations loaded" })), animations.map((anim, i) => (jsxs("div", { className: `${styles.animItem} ${i === activeAnimIdx ? styles.animItemActive : ""}`, onClick: () => playClip(i), children: [jsx("span", { children: anim.name }), jsxs("span", { className: styles.animDuration, children: [anim.duration.toFixed(1), "s"] })] }, `${anim.name}-${i}`))), jsx("div", { style: { padding: "4px 8px" }, children: jsx(We, { className: styles.btnSecondary, variant: "ghost", size: "sm", style: { width: "100%", fontSize: 10 }, onClick: () => { var _a; return (_a = mergeInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "+ Add Animation File" }) })] }), jsxs("div", { className: styles.timelineArea, children: [jsxs("div", { className: styles.timelineRuler, children: [animDuration > 0 &&
                                         Array.from({ length: Math.ceil(animDuration) + 1 }, (_, i) => {
                                             const pct = (i / animDuration) * 100;
-                                            return (jsxs(Ve.Fragment, { children: [jsx("div", { className: styles.rulerTick, style: { left: `${pct}%` } }), jsxs("span", { className: styles.rulerLabel, style: { left: `${pct}%` }, children: [i, "s"] })] }, i));
+                                            return (jsxs(Ue.Fragment, { children: [jsx("div", { className: styles.rulerTick, style: { left: `${pct}%` } }), jsxs("span", { className: styles.rulerLabel, style: { left: `${pct}%` }, children: [i, "s"] })] }, i));
                                         }), animDuration > 0 && (jsx("div", { className: styles.playhead, style: {
                                             left: `${(animTime / animDuration) * 100}%`,
                                             height: "100%",

package/dist/esm/model/ModelEditorToolbar.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import Ve from 'react';
+import Ue from 'react';
 import styles from './ModelEditor.module.css.js';
-import { NiceButton as Oe } from '../ui/dist/index.js';
+import { NiceButton as We } from '../ui/dist/index.js';
 
-const ModelEditorToolbar = Ve.memo(({ api }) => {
+const ModelEditorToolbar = Ue.memo(({ api }) => {
     const { transformMode, setTransformMode, snapEnabled, setSnapEnabled, gizmoSpace, setGizmoSpace, rootObjectRef, focusOnObject, setCameraPreset, deleteSelected, duplicateSelected, selectedNode, } = api;
-    return (jsxs("div", { className: styles.toolbar, children: [jsx(Oe, { className: styles.toolBtn, variant: transformMode === "translate" ? "primary" : "ghost", size: "sm", onClick: () => setTransformMode("translate"), title: "Translate (G)", children: "\u2725" }), jsx(Oe, { className: styles.toolBtn, variant: transformMode === "rotate" ? "primary" : "ghost", size: "sm", onClick: () => setTransformMode("rotate"), title: "Rotate (R)", children: "\u21BB" }), jsx(Oe, { className: styles.toolBtn, variant: transformMode === "scale" ? "primary" : "ghost", size: "sm", onClick: () => setTransformMode("scale"), title: "Scale (S)", children: "\u2B21" }), jsx("div", { className: styles.toolSep }), jsx(Oe, { className: styles.toolBtn, variant: snapEnabled ? "primary" : "ghost", size: "sm", onClick: () => setSnapEnabled((v) => !v), title: `Snap to Grid (${snapEnabled ? "ON" : "OFF"})`, children: "\uD83E\uDDF2" }), jsx(Oe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => setGizmoSpace((s) => (s === "local" ? "world" : "local")), title: `Orientation: ${gizmoSpace}`, children: gizmoSpace === "local" ? "🔶" : "🌐" }), jsx("div", { className: styles.toolSep }), jsx(Oe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => rootObjectRef.current && focusOnObject(rootObjectRef.current), title: "Focus (F)", children: "\u25CE" }), jsx(Oe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => setCameraPreset("front"), title: "Front view (Numpad 1)", children: "1" }), jsx(Oe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => setCameraPreset("right"), title: "Right view (Numpad 3)", children: "3" }), jsx(Oe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => setCameraPreset("top"), title: "Top view (Numpad 7)", children: "7" }), jsx("div", { className: styles.toolSep }), jsx(Oe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: deleteSelected, title: "Delete selected (Del)", children: "\uD83D\uDDD1" }), jsx(Oe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: duplicateSelected, title: "Duplicate (Shift+D)", disabled: !selectedNode, children: "\uD83D\uDCCB" })] }));
+    return (jsxs("div", { className: styles.toolbar, children: [jsx(We, { className: styles.toolBtn, variant: transformMode === "translate" ? "primary" : "ghost", size: "sm", onClick: () => setTransformMode("translate"), title: "Translate (G)", children: "\u2725" }), jsx(We, { className: styles.toolBtn, variant: transformMode === "rotate" ? "primary" : "ghost", size: "sm", onClick: () => setTransformMode("rotate"), title: "Rotate (R)", children: "\u21BB" }), jsx(We, { className: styles.toolBtn, variant: transformMode === "scale" ? "primary" : "ghost", size: "sm", onClick: () => setTransformMode("scale"), title: "Scale (S)", children: "\u2B21" }), jsx("div", { className: styles.toolSep }), jsx(We, { className: styles.toolBtn, variant: snapEnabled ? "primary" : "ghost", size: "sm", onClick: () => setSnapEnabled((v) => !v), title: `Snap to Grid (${snapEnabled ? "ON" : "OFF"})`, children: "\uD83E\uDDF2" }), jsx(We, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => setGizmoSpace((s) => (s === "local" ? "world" : "local")), title: `Orientation: ${gizmoSpace}`, children: gizmoSpace === "local" ? "🔶" : "🌐" }), jsx("div", { className: styles.toolSep }), jsx(We, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => rootObjectRef.current && focusOnObject(rootObjectRef.current), title: "Focus (F)", children: "\u25CE" }), jsx(We, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => setCameraPreset("front"), title: "Front view (Numpad 1)", children: "1" }), jsx(We, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => setCameraPreset("right"), title: "Right view (Numpad 3)", children: "3" }), jsx(We, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => setCameraPreset("top"), title: "Top view (Numpad 7)", children: "7" }), jsx("div", { className: styles.toolSep }), jsx(We, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: deleteSelected, title: "Delete selected (Del)", children: "\uD83D\uDDD1" }), jsx(We, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: duplicateSelected, title: "Duplicate (Shift+D)", disabled: !selectedNode, children: "\uD83D\uDCCB" })] }));
 });
 ModelEditorToolbar.displayName = "ModelEditorToolbar";
 

package/dist/esm/model/ModelEditorViewport.js

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import Ve from 'react';
+import Ue from 'react';
 import styles from './ModelEditor.module.css.js';
 
-const ModelEditorViewport = Ve.memo(({ api }) => {
+const ModelEditorViewport = Ue.memo(({ api }) => {
     const { mountRef, dragOver, handleDragOver, handleDragLeave, handleDrop, handleViewportClick, handleContextMenu, editorMode, polyCount, meshCount, boneCount, shadingMode, setShadingMode, gizmoSpace, setGizmoSpace, contextMenu, closeContextMenu, addPrimitive, addSceneLight, duplicateSelected, deleteSelected, selectedNode, rootObjectRef, focusOnObject, snapEnabled, setSnapEnabled, } = api;
     return (jsxs(Fragment, { children: [jsxs("div", { ref: mountRef, className: `${styles.viewportContainer} ${dragOver ? styles.dragOver : ""}`, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleViewportClick, onContextMenu: handleContextMenu, children: [jsxs("div", { className: styles.viewportOverlay, children: [jsxs("span", { className: styles.viewportBadge, children: [editorMode.toUpperCase(), " MODE"] }), jsxs("span", { className: styles.viewportBadge, children: [polyCount.toLocaleString(), " tris \u00B7 ", meshCount, " meshes \u00B7 ", boneCount, " bones"] })] }), jsx("div", { className: styles.viewportShadingBar, children: ["wireframe", "solid", "material", "rendered"].map((m) => (jsx("button", { className: `${styles.shadingBtn} ${shadingMode === m ? styles.shadingBtnActive : ""}`, onClick: (e) => { e.stopPropagation(); setShadingMode(m); }, title: m.charAt(0).toUpperCase() + m.slice(1), children: m === "wireframe" ? "◇" : m === "solid" ? "◆" : m === "material" ? "🎨" : "☀" }, m))) }), jsx("div", { className: styles.viewportGizmoInfo, children: jsx("button", { className: styles.shadingBtn, onClick: (e) => {
                                 e.stopPropagation();

package/dist/esm/model/ModelViewer.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useCallback } from 'react';
 import styles from './ModelViewer.module.css.js';
 import { useModelViewer } from './useModelViewer.js';
-import { NiceButton as Oe, NiceSelect as nn, NiceSlider as Ar } from '../ui/dist/index.js';
+import { NiceButton as We, NiceSelect as fn, NiceSlider as so } from '../ui/dist/index.js';
 
 const NAV_LABELS = {
     orbit: '🌍 Orbit',
@@ -40,23 +40,23 @@ const NiceModelViewer = ({ className, showToolbar = true, showStatusBar = true,
         const idx = navModes.indexOf(api.navigationMode);
         api.setNavigationMode(navModes[(idx + 1) % navModes.length]);
     }, [api]);
-    return (jsxs("div", { className: `${styles.root} ${className !== null && className !== void 0 ? className : ''}`, children: [showToolbar && (jsxs("div", { className: styles.toolbar, children: [jsx(Oe, { className: styles.toolBtn, variant: "ghost", size: "sm", title: "Open file\u2026", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "\uD83D\uDCC2 Open" }), jsx("input", { ref: fileInputRef, type: "file", accept: ".fbx,.glb,.gltf,.obj,.dae,.stl,.ply", style: { display: 'none' }, onChange: (e) => {
+    return (jsxs("div", { className: `${styles.root} ${className !== null && className !== void 0 ? className : ''}`, children: [showToolbar && (jsxs("div", { className: styles.toolbar, children: [jsx(We, { className: styles.toolBtn, variant: "ghost", size: "sm", title: "Open file\u2026", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "\uD83D\uDCC2 Open" }), jsx("input", { ref: fileInputRef, type: "file", accept: ".fbx,.glb,.gltf,.obj,.dae,.stl,.ply", style: { display: 'none' }, onChange: (e) => {
                             var _a;
                             const f = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
                             if (f)
                                 api.loadFile(f);
                             e.target.value = '';
-                        } }), jsx("div", { className: styles.toolSep }), jsx(Oe, { className: styles.toolBtn, variant: "ghost", size: "sm", title: "Navigation mode", onClick: cycleNav, children: NAV_LABELS[api.navigationMode] }), jsx(Oe, { className: styles.toolBtn, variant: api.wireframe ? 'primary' : 'ghost', size: "sm", onClick: () => api.setWireframe(!api.wireframe), title: "Wireframe", children: "\uD83D\uDD32" }), jsx(Oe, { className: styles.toolBtn, variant: api.showGrid ? 'primary' : 'ghost', size: "sm", onClick: () => api.setShowGrid(!api.showGrid), title: "Grid", children: "\u229E" }), jsx(Oe, { className: styles.toolBtn, variant: api.clippingEnabled ? 'primary' : 'ghost', size: "sm", onClick: () => api.setClippingEnabled(!api.clippingEnabled), title: "Clipping plane", children: "\u2702\uFE0F" }), api.clippingEnabled && (jsxs(Fragment, { children: [jsx(nn, { className: styles.animSelect, value: api.clippingAxis, onChange: (val) => api.setClippingAxis(val), options: [
+                        } }), jsx("div", { className: styles.toolSep }), jsx(We, { className: styles.toolBtn, variant: "ghost", size: "sm", title: "Navigation mode", onClick: cycleNav, children: NAV_LABELS[api.navigationMode] }), jsx(We, { className: styles.toolBtn, variant: api.wireframe ? 'primary' : 'ghost', size: "sm", onClick: () => api.setWireframe(!api.wireframe), title: "Wireframe", children: "\uD83D\uDD32" }), jsx(We, { className: styles.toolBtn, variant: api.showGrid ? 'primary' : 'ghost', size: "sm", onClick: () => api.setShowGrid(!api.showGrid), title: "Grid", children: "\u229E" }), jsx(We, { className: styles.toolBtn, variant: api.clippingEnabled ? 'primary' : 'ghost', size: "sm", onClick: () => api.setClippingEnabled(!api.clippingEnabled), title: "Clipping plane", children: "\u2702\uFE0F" }), api.clippingEnabled && (jsxs(Fragment, { children: [jsx(fn, { className: styles.animSelect, value: api.clippingAxis, onChange: (val) => api.setClippingAxis(val), options: [
                                     { value: 'x', label: 'X' },
                                     { value: 'y', label: 'Y' },
                                     { value: 'z', label: 'Z' },
-                                ] }), jsx(Ar, { min: -10, max: 10, step: 0.1, value: api.clippingPosition, onChange: (val) => api.setClippingPosition(val), style: { width: 60 } })] })), jsx("div", { className: styles.toolSep }), jsx(Oe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.zoomToFit, title: "Zoom to fit", children: "\uD83D\uDD0D" }), jsx(Oe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.resetCamera, title: "Reset camera", children: "\uD83C\uDFE0" }), jsx("div", { className: styles.toolSep }), jsx(Oe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => {
+                                ] }), jsx(so, { min: -10, max: 10, step: 0.1, value: api.clippingPosition, onChange: (val) => api.setClippingPosition(val), style: { width: 60 } })] })), jsx("div", { className: styles.toolSep }), jsx(We, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.zoomToFit, title: "Zoom to fit", children: "\uD83D\uDD0D" }), jsx(We, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.resetCamera, title: "Reset camera", children: "\uD83C\uDFE0" }), jsx("div", { className: styles.toolSep }), jsx(We, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => {
                             const url = api.screenshot();
                             const a = document.createElement('a');
                             a.href = url;
                             a.download = 'screenshot.png';
                             a.click();
-                        }, title: "Screenshot", children: "\uD83D\uDCF7" }), jsx(Oe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.toggleFullscreen, title: "Fullscreen", children: api.isFullscreen ? '⊡' : '⛶' }), toolbarExtra, showInfoPanel && (jsx("div", { className: styles.toolRight, children: jsx(Oe, { className: `${styles.toolBtn} ${panelOpen ? styles.active : ''}`, variant: panelOpen ? 'primary' : 'ghost', size: "sm", onClick: () => setPanelOpen(!panelOpen), title: "Info panel", children: "\u2139\uFE0F" }) }))] })), jsxs("div", { className: styles.viewport, ref: api.mountRef, tabIndex: 0, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [api.loading && (jsxs("div", { className: styles.loadingOverlay, children: [jsx("span", { className: styles.loadingText, children: "Loading model\u2026" }), jsx("div", { className: styles.loadingBar, children: jsx("div", { className: styles.loadingBarFill, style: { width: `${(api.loadProgress * 100).toFixed(0)}%` } }) })] })), api.error && (jsxs("div", { className: styles.errorOverlay, children: [jsx("span", { style: { fontSize: 28 }, children: "\u26A0\uFE0F" }), jsx("span", { style: { marginTop: 8 }, children: api.error })] })), dragOver && (jsx("div", { className: styles.dropZone, children: "Drop 3D model file here" }))] }), jsxs("div", { className: `${styles.sidePanel} ${!panelOpen ? styles.hidden : ''}`, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "Model Info" }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Triangles" }), jsx("span", { children: api.polyCount.toLocaleString() })] }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Meshes" }), jsx("span", { children: api.meshCount })] }), api.dimensions && (jsxs(Fragment, { children: [jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Width" }), jsx("span", { children: api.dimensions.width })] }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Height" }), jsx("span", { children: api.dimensions.height })] }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Depth" }), jsx("span", { children: api.dimensions.depth })] })] }))] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "Navigation" }), navModes.map((m) => (jsx(Oe, { className: styles.toolBtn, variant: api.navigationMode === m ? 'primary' : 'ghost', size: "sm", onClick: () => api.setNavigationMode(m), children: NAV_LABELS[m] }, m)))] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "Auto Rotate" }), jsx(Ar, { min: 0, max: 10, step: 0.5, value: api.autoRotateSpeed, onChange: (val) => api.setAutoRotateSpeed(val), style: { width: '100%' } })] }), api.animations.length > 0 && (jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "Animations" }), api.animations.map((name, i) => (jsxs(Oe, { className: styles.toolBtn, variant: api.activeAnimIdx === i ? 'primary' : 'ghost', size: "sm", onClick: () => api.playAnimation(i), children: ["\u25B6 ", name] }, i)))] }))] }), jsxs("div", { className: `${styles.animBar} ${api.animations.length === 0 ? styles.hidden : ''}`, children: [jsx(Oe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.togglePlay, children: api.isPlaying ? '⏸' : '▶' }), jsx(nn, { className: styles.animSelect, value: String(api.activeAnimIdx), onChange: (val) => api.playAnimation(parseInt(val)), options: api.animations.map((n, i) => ({ value: String(i), label: n })) }), jsx(Ar, { className: styles.animSlider, min: 0, max: api.animDuration || 1, step: 0.01, value: api.animTime, onChange: (val) => api.seekAnim(val) }), jsxs("span", { className: styles.toolLabel, children: [api.animTime.toFixed(1), "s / ", api.animDuration.toFixed(1), "s"] })] }), showStatusBar && (jsxs("div", { className: styles.statusBar, children: [jsx("span", { children: api.statusText }), jsxs("div", { className: styles.statusRight, children: [jsx("span", { children: NAV_LABELS[api.navigationMode] }), api.dimensions && (jsxs("span", { children: [api.dimensions.width, "\u00D7", api.dimensions.height, "\u00D7", api.dimensions.depth] }))] })] })), children === null || children === void 0 ? void 0 : children(api)] }));
+                        }, title: "Screenshot", children: "\uD83D\uDCF7" }), jsx(We, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.toggleFullscreen, title: "Fullscreen", children: api.isFullscreen ? '⊡' : '⛶' }), toolbarExtra, showInfoPanel && (jsx("div", { className: styles.toolRight, children: jsx(We, { className: `${styles.toolBtn} ${panelOpen ? styles.active : ''}`, variant: panelOpen ? 'primary' : 'ghost', size: "sm", onClick: () => setPanelOpen(!panelOpen), title: "Info panel", children: "\u2139\uFE0F" }) }))] })), jsxs("div", { className: styles.viewport, ref: api.mountRef, tabIndex: 0, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [api.loading && (jsxs("div", { className: styles.loadingOverlay, children: [jsx("span", { className: styles.loadingText, children: "Loading model\u2026" }), jsx("div", { className: styles.loadingBar, children: jsx("div", { className: styles.loadingBarFill, style: { width: `${(api.loadProgress * 100).toFixed(0)}%` } }) })] })), api.error && (jsxs("div", { className: styles.errorOverlay, children: [jsx("span", { style: { fontSize: 28 }, children: "\u26A0\uFE0F" }), jsx("span", { style: { marginTop: 8 }, children: api.error })] })), dragOver && (jsx("div", { className: styles.dropZone, children: "Drop 3D model file here" }))] }), jsxs("div", { className: `${styles.sidePanel} ${!panelOpen ? styles.hidden : ''}`, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "Model Info" }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Triangles" }), jsx("span", { children: api.polyCount.toLocaleString() })] }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Meshes" }), jsx("span", { children: api.meshCount })] }), api.dimensions && (jsxs(Fragment, { children: [jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Width" }), jsx("span", { children: api.dimensions.width })] }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Height" }), jsx("span", { children: api.dimensions.height })] }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Depth" }), jsx("span", { children: api.dimensions.depth })] })] }))] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "Navigation" }), navModes.map((m) => (jsx(We, { className: styles.toolBtn, variant: api.navigationMode === m ? 'primary' : 'ghost', size: "sm", onClick: () => api.setNavigationMode(m), children: NAV_LABELS[m] }, m)))] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "Auto Rotate" }), jsx(so, { min: 0, max: 10, step: 0.5, value: api.autoRotateSpeed, onChange: (val) => api.setAutoRotateSpeed(val), style: { width: '100%' } })] }), api.animations.length > 0 && (jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "Animations" }), api.animations.map((name, i) => (jsxs(We, { className: styles.toolBtn, variant: api.activeAnimIdx === i ? 'primary' : 'ghost', size: "sm", onClick: () => api.playAnimation(i), children: ["\u25B6 ", name] }, i)))] }))] }), jsxs("div", { className: `${styles.animBar} ${api.animations.length === 0 ? styles.hidden : ''}`, children: [jsx(We, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.togglePlay, children: api.isPlaying ? '⏸' : '▶' }), jsx(fn, { className: styles.animSelect, value: String(api.activeAnimIdx), onChange: (val) => api.playAnimation(parseInt(val)), options: api.animations.map((n, i) => ({ value: String(i), label: n })) }), jsx(so, { className: styles.animSlider, min: 0, max: api.animDuration || 1, step: 0.01, value: api.animTime, onChange: (val) => api.seekAnim(val) }), jsxs("span", { className: styles.toolLabel, children: [api.animTime.toFixed(1), "s / ", api.animDuration.toFixed(1), "s"] })] }), showStatusBar && (jsxs("div", { className: styles.statusBar, children: [jsx("span", { children: api.statusText }), jsxs("div", { className: styles.statusRight, children: [jsx("span", { children: NAV_LABELS[api.navigationMode] }), api.dimensions && (jsxs("span", { children: [api.dimensions.width, "\u00D7", api.dimensions.height, "\u00D7", api.dimensions.depth] }))] })] })), children === null || children === void 0 ? void 0 : children(api)] }));
 };
 /** @deprecated Use NiceModelViewer */
 const ModelViewer = NiceModelViewer;