@nice2dev/ui-3d 1.0.6 → 1.1.0

package/dist/cjs/uv/NiceUVEditor.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var we = require('react');
+var ke = 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 = we.useRef(null);
-    const containerRef = we.useRef(null);
+    const canvasRef = ke.useRef(null);
+    const containerRef = ke.useRef(null);
     // State
-    const [state, setState] = we.useState({
+    const [state, setState] = ke.useState({
         ...uvEditorTypes.DEFAULT_UV_STATE,
         activeChannel: channel,
     });
-    const [meshData, setMeshData] = we.useState(null);
-    const [selection, setSelection] = we.useState({
+    const [meshData, setMeshData] = ke.useState(null);
+    const [selection, setSelection] = ke.useState({
         vertices: new Set(),
         edges: new Set(),
         faces: new Set(),
         islands: new Set(),
     });
-    const [dragState, setDragState] = we.useState({
+    const [dragState, setDragState] = ke.useState({
         active: false,
         startPos: { u: 0, v: 0 },
         currentPos: { u: 0, v: 0 },
         mode: 'select',
         initialPositions: new Map(),
     });
-    const [undoStack, setUndoStack] = we.useState([]);
-    const [redoStack, setRedoStack] = we.useState([]);
+    const [undoStack, setUndoStack] = ke.useState([]);
+    const [redoStack, setRedoStack] = ke.useState([]);
     // Extract mesh data when geometry changes
-    we.useEffect(() => {
+    ke.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
-    we.useEffect(() => {
+    ke.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
-    we.useEffect(() => {
+    ke.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 = we.useCallback(() => {
+    const pushUndo = ke.useCallback(() => {
         if (!meshData)
             return;
         setUndoStack(prev => [...prev.slice(-20), JSON.parse(JSON.stringify(meshData))]);
         setRedoStack([]);
     }, [meshData]);
     // Undo
-    const undo = we.useCallback(() => {
+    const undo = ke.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 = we.useCallback(() => {
+    const redo = ke.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 = we.useCallback((clientX, clientY) => {
+    const screenToUV = ke.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 = we.useCallback((e) => {
+    const handleMouseDown = ke.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 = we.useCallback((e) => {
+    const handleMouseMove = ke.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 = we.useCallback((e) => {
+    const handleMouseUp = ke.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 = we.useCallback((e) => {
+    const handleWheel = ke.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
-    we.useEffect(() => {
+    ke.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 = we.useCallback(() => {
+    const handlePack = ke.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 = we.useCallback(() => {
+    const handleRelax = ke.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 = we.useCallback((type) => {
+    const handleProject = ke.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 we from 'react';
+import ke from 'react';
 import styles from './ModelEditor.module.css.js';
-import { c as Fe, b as Re } from '../ui/dist/NiceButton-DmTHNHet.js';
+import { c as Fe, b as Re } from '../ui/dist/NiceButton-D9l39Rs7.js';
 
-const ModelEditorLeftPanel = we.memo(({ api }) => {
+const ModelEditorLeftPanel = ke.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 = we.memo(({ api }) => {
                 node.type === "light" ? "💡" :
                     node.type === "camera" ? "📷" :
                         node.type === "helper" ? "◇" : "📁";
-        return (jsxs(we.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(ke.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) => {

package/dist/esm/model/ModelEditorMenuBar.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import we from 'react';
+import ke from 'react';
 import styles from './ModelEditor.module.css.js';
-import { a as De, c as Fe, N as Ae } from '../ui/dist/NiceButton-DmTHNHet.js';
-import { N as se } from '../ui/dist/NiceToggle-C1UKGXmJ.js';
+import { a as De, c as Fe, N as Ae } from '../ui/dist/NiceButton-D9l39Rs7.js';
+import { N as se } from '../ui/dist/NiceToggle-CaY1u82g.js';
 
-const ModelEditorMenuBar = we.memo(({ api, hasOnSaveToLibrary }) => {
+const ModelEditorMenuBar = ke.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(De, { className: styles.modeSelect, value: editorMode, onChange: (val) => setEditorMode(val), options: [
                     { value: "object", label: "Object Mode" },

package/dist/esm/model/ModelEditorRightPanel.js

@@ -1,14 +1,14 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import we from 'react';
+import ke 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 { c as Fe, b as Re, N as Ae } from '../ui/dist/NiceButton-DmTHNHet.js';
-import { U as Dn } from '../ui/dist/NicePinCodeInput-4q8yULuo.js';
-import { N as se, a as ie } from '../ui/dist/NiceToggle-C1UKGXmJ.js';
+import { c as Fe, b as Re, N as Ae } from '../ui/dist/NiceButton-D9l39Rs7.js';
+import { U as Dn } from '../ui/dist/NicePinCodeInput-CrMfdxxc.js';
+import { N as se, a as ie } from '../ui/dist/NiceToggle-CaY1u82g.js';
 
-const ModelEditorRightPanel = we.memo(({ api }) => {
+const ModelEditorRightPanel = ke.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(Fe, { 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(Re, { className: styles.propInput, value: selectedNode.name, onChange: (val) => {
                                                         selectedNode.object.name = val;

package/dist/esm/model/ModelEditorSubComponents.js

@@ -3,8 +3,8 @@ import { useState } from 'react';
 import * as THREE from 'three';
 import styles from './ModelEditor.module.css.js';
 import { DEG } from './modelEditorTypes.js';
-import { b as Re, N as Ae, a as De } from '../ui/dist/NiceButton-DmTHNHet.js';
-import { U as Dn } from '../ui/dist/NicePinCodeInput-4q8yULuo.js';
+import { b as Re, N as Ae, a as De } from '../ui/dist/NiceButton-D9l39Rs7.js';
+import { U as Dn } from '../ui/dist/NicePinCodeInput-CrMfdxxc.js';
 
 /* ═══════════════════════════════════════════
    Sub-components

package/dist/esm/model/ModelEditorTimeline.js

@@ -1,16 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import we from 'react';
+import ke from 'react';
 import styles from './ModelEditor.module.css.js';
 import { fmtTime } from './modelEditorTypes.js';
-import { c as Fe } from '../ui/dist/NiceButton-DmTHNHet.js';
-import { U as Dn } from '../ui/dist/NicePinCodeInput-4q8yULuo.js';
+import { c as Fe } from '../ui/dist/NiceButton-D9l39Rs7.js';
+import { U as Dn } from '../ui/dist/NicePinCodeInput-CrMfdxxc.js';
 
-const ModelEditorTimeline = we.memo(({ api }) => {
+const ModelEditorTimeline = ke.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(Fe, { className: styles.transportBtn, variant: "ghost", size: "sm", onClick: () => seekAnim(0), title: "Go to start", children: "\u23EE" }), jsx(Fe, { className: styles.transportBtn, variant: isPlaying ? "primary" : "ghost", size: "sm", onClick: togglePlay, title: "Play/Pause (Space)", children: isPlaying ? "⏸" : "▶" }), jsx(Fe, { className: styles.transportBtn, variant: "ghost", size: "sm", onClick: stopAnim, title: "Stop", children: "\u23F9" }), jsx(Fe, { 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(Dn, { 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(Fe, { 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(we.Fragment, { children: [jsx("div", { className: styles.rulerTick, style: { left: `${pct}%` } }), jsxs("span", { className: styles.rulerLabel, style: { left: `${pct}%` }, children: [i, "s"] })] }, i));
+                                            return (jsxs(ke.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,9 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import we from 'react';
+import ke from 'react';
 import styles from './ModelEditor.module.css.js';
-import { c as Fe } from '../ui/dist/NiceButton-DmTHNHet.js';
+import { c as Fe } from '../ui/dist/NiceButton-D9l39Rs7.js';
 
-const ModelEditorToolbar = we.memo(({ api }) => {
+const ModelEditorToolbar = ke.memo(({ api }) => {
     const { transformMode, setTransformMode, snapEnabled, setSnapEnabled, gizmoSpace, setGizmoSpace, rootObjectRef, focusOnObject, setCameraPreset, deleteSelected, duplicateSelected, selectedNode, } = api;
     return (jsxs("div", { className: styles.toolbar, children: [jsx(Fe, { className: styles.toolBtn, variant: transformMode === "translate" ? "primary" : "ghost", size: "sm", onClick: () => setTransformMode("translate"), title: "Translate (G)", children: "\u2725" }), jsx(Fe, { className: styles.toolBtn, variant: transformMode === "rotate" ? "primary" : "ghost", size: "sm", onClick: () => setTransformMode("rotate"), title: "Rotate (R)", children: "\u21BB" }), jsx(Fe, { className: styles.toolBtn, variant: transformMode === "scale" ? "primary" : "ghost", size: "sm", onClick: () => setTransformMode("scale"), title: "Scale (S)", children: "\u2B21" }), jsx("div", { className: styles.toolSep }), jsx(Fe, { className: styles.toolBtn, variant: snapEnabled ? "primary" : "ghost", size: "sm", onClick: () => setSnapEnabled((v) => !v), title: `Snap to Grid (${snapEnabled ? "ON" : "OFF"})`, children: "\uD83E\uDDF2" }), jsx(Fe, { 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(Fe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => rootObjectRef.current && focusOnObject(rootObjectRef.current), title: "Focus (F)", children: "\u25CE" }), jsx(Fe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => setCameraPreset("front"), title: "Front view (Numpad 1)", children: "1" }), jsx(Fe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => setCameraPreset("right"), title: "Right view (Numpad 3)", children: "3" }), jsx(Fe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => setCameraPreset("top"), title: "Top view (Numpad 7)", children: "7" }), jsx("div", { className: styles.toolSep }), jsx(Fe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: deleteSelected, title: "Delete selected (Del)", children: "\uD83D\uDDD1" }), jsx(Fe, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: duplicateSelected, title: "Duplicate (Shift+D)", disabled: !selectedNode, children: "\uD83D\uDCCB" })] }));
 });

package/dist/esm/model/ModelEditorViewport.js

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import we from 'react';
+import ke from 'react';
 import styles from './ModelEditor.module.css.js';
 
-const ModelEditorViewport = we.memo(({ api }) => {
+const ModelEditorViewport = ke.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,8 +2,8 @@ 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 { c as Fe, a as De } from '../ui/dist/NiceButton-DmTHNHet.js';
-import { U as Dn } from '../ui/dist/NicePinCodeInput-4q8yULuo.js';
+import { c as Fe, a as De } from '../ui/dist/NiceButton-D9l39Rs7.js';
+import { U as Dn } from '../ui/dist/NicePinCodeInput-CrMfdxxc.js';
 
 const NAV_LABELS = {
     orbit: '🌍 Orbit',