@nice2dev/ui-3d 1.0.6 → 1.1.0

package/dist/cjs/model/ModelEditorSubComponents.js

@@ -1,12 +1,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var we = require('react');
+var ke = require('react');
 var THREE = require('three');
 var ModelEditor_module = require('./ModelEditor.module.css.js');
 var modelEditorTypes = require('./modelEditorTypes.js');
-var NiceButtonDmTHNHet = require('../ui/dist/NiceButton-DmTHNHet.js');
-var NicePinCodeInput4q8yULuo = require('../ui/dist/NicePinCodeInput-4q8yULuo.js');
+var NiceButtonD9l39Rs7 = require('../ui/dist/NiceButton-D9l39Rs7.js');
+var NicePinCodeInputCrMfdxxc = require('../ui/dist/NicePinCodeInput-CrMfdxxc.js');
 
 function _interopNamespaceDefault(e) {
    var n = Object.create(null);
@@ -32,7 +32,7 @@ var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
    ═══════════════════════════════════════════ */
 /** Vec3 input row for position/scale */
 const Vec3Row = ({ label, value, onChange }) => {
-    const [, forceUpdate] = we.useState(0);
+    const [, forceUpdate] = ke.useState(0);
     const set = (axis, v) => {
         const n = parseFloat(v);
         if (!isNaN(n)) {
@@ -41,11 +41,11 @@ const Vec3Row = ({ label, value, onChange }) => {
             onChange();
         }
     };
-    return (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: label }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propVec3, children: [jsxRuntime.jsx(NiceButtonDmTHNHet.b, { className: ModelEditor_module.propVec3X, value: value.x.toFixed(3), onChange: (val) => set("x", val) }), jsxRuntime.jsx(NiceButtonDmTHNHet.b, { className: ModelEditor_module.propVec3Y, value: value.y.toFixed(3), onChange: (val) => set("y", val) }), jsxRuntime.jsx(NiceButtonDmTHNHet.b, { className: ModelEditor_module.propVec3Z, value: value.z.toFixed(3), onChange: (val) => set("z", val) })] })] }));
+    return (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: label }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propVec3, children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.b, { className: ModelEditor_module.propVec3X, value: value.x.toFixed(3), onChange: (val) => set("x", val) }), jsxRuntime.jsx(NiceButtonD9l39Rs7.b, { className: ModelEditor_module.propVec3Y, value: value.y.toFixed(3), onChange: (val) => set("y", val) }), jsxRuntime.jsx(NiceButtonD9l39Rs7.b, { className: ModelEditor_module.propVec3Z, value: value.z.toFixed(3), onChange: (val) => set("z", val) })] })] }));
 };
 /** Vec3 input row for rotation (shows degrees) */
 const Vec3RowDeg = ({ label, value, onChange }) => {
-    const [, forceUpdate] = we.useState(0);
+    const [, forceUpdate] = ke.useState(0);
     const set = (axis, v) => {
         const n = parseFloat(v);
         if (!isNaN(n)) {
@@ -54,7 +54,7 @@ const Vec3RowDeg = ({ label, value, onChange }) => {
             onChange();
         }
     };
-    return (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: label }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propVec3, children: [jsxRuntime.jsx(NiceButtonDmTHNHet.b, { className: ModelEditor_module.propVec3X, value: (value.x * modelEditorTypes.DEG).toFixed(1), onChange: (val) => set("x", val) }), jsxRuntime.jsx(NiceButtonDmTHNHet.b, { className: ModelEditor_module.propVec3Y, value: (value.y * modelEditorTypes.DEG).toFixed(1), onChange: (val) => set("y", val) }), jsxRuntime.jsx(NiceButtonDmTHNHet.b, { className: ModelEditor_module.propVec3Z, value: (value.z * modelEditorTypes.DEG).toFixed(1), onChange: (val) => set("z", val) })] })] }));
+    return (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: label }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propVec3, children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.b, { className: ModelEditor_module.propVec3X, value: (value.x * modelEditorTypes.DEG).toFixed(1), onChange: (val) => set("x", val) }), jsxRuntime.jsx(NiceButtonD9l39Rs7.b, { className: ModelEditor_module.propVec3Y, value: (value.y * modelEditorTypes.DEG).toFixed(1), onChange: (val) => set("y", val) }), jsxRuntime.jsx(NiceButtonD9l39Rs7.b, { className: ModelEditor_module.propVec3Z, value: (value.z * modelEditorTypes.DEG).toFixed(1), onChange: (val) => set("z", val) })] })] }));
 };
 /** Material card with editable properties */
 const MaterialCard = ({ material, active, onClick, onUpdate }) => {
@@ -78,16 +78,16 @@ const MaterialCard = ({ material, active, onClick, onUpdate }) => {
         mat.needsUpdate = true;
         onUpdate();
     };
-    return (jsxRuntime.jsxs("div", { className: `${ModelEditor_module.materialCard} ${active ? ModelEditor_module.materialCardActive : ""}`, onClick: onClick, children: [jsxRuntime.jsx("div", { className: ModelEditor_module.materialHeader, children: jsxRuntime.jsx("span", { className: ModelEditor_module.materialName, children: mat.name || mat.type }) }), hasColor && (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: "Color" }), jsxRuntime.jsx(NiceButtonDmTHNHet.N, { value: `#${mat.color.getHexString()}`, onChange: (c) => setColor(c) }), jsxRuntime.jsxs("span", { style: { fontSize: 10, color: "#888" }, children: ["#", mat.color.getHexString()] })] })), hasMetalness && (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: "Metal" }), jsxRuntime.jsx(NicePinCodeInput4q8yULuo.U, { min: 0, max: 1, step: 0.01, value: mat.metalness, onChange: (val) => setNum("metalness", val), style: { flex: 1 } }), jsxRuntime.jsx("span", { style: { fontSize: 9, color: "#888", width: 28, textAlign: "right" }, children: mat.metalness.toFixed(2) })] })), hasRoughness && (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: "Rough" }), jsxRuntime.jsx(NicePinCodeInput4q8yULuo.U, { min: 0, max: 1, step: 0.01, value: mat.roughness, onChange: (val) => setNum("roughness", val), style: { flex: 1 } }), jsxRuntime.jsx("span", { style: { fontSize: 9, color: "#888", width: 28, textAlign: "right" }, children: mat.roughness.toFixed(2) })] })), hasEmissive && mat.emissive && (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: "Emissive" }), jsxRuntime.jsx(NiceButtonDmTHNHet.N, { value: `#${mat.emissive.getHexString()}`, onChange: (c) => {
+    return (jsxRuntime.jsxs("div", { className: `${ModelEditor_module.materialCard} ${active ? ModelEditor_module.materialCardActive : ""}`, onClick: onClick, children: [jsxRuntime.jsx("div", { className: ModelEditor_module.materialHeader, children: jsxRuntime.jsx("span", { className: ModelEditor_module.materialName, children: mat.name || mat.type }) }), hasColor && (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: "Color" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.N, { value: `#${mat.color.getHexString()}`, onChange: (c) => setColor(c) }), jsxRuntime.jsxs("span", { style: { fontSize: 10, color: "#888" }, children: ["#", mat.color.getHexString()] })] })), hasMetalness && (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: "Metal" }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { min: 0, max: 1, step: 0.01, value: mat.metalness, onChange: (val) => setNum("metalness", val), style: { flex: 1 } }), jsxRuntime.jsx("span", { style: { fontSize: 9, color: "#888", width: 28, textAlign: "right" }, children: mat.metalness.toFixed(2) })] })), hasRoughness && (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: "Rough" }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { min: 0, max: 1, step: 0.01, value: mat.roughness, onChange: (val) => setNum("roughness", val), style: { flex: 1 } }), jsxRuntime.jsx("span", { style: { fontSize: 9, color: "#888", width: 28, textAlign: "right" }, children: mat.roughness.toFixed(2) })] })), hasEmissive && mat.emissive && (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: "Emissive" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.N, { value: `#${mat.emissive.getHexString()}`, onChange: (c) => {
                             mat.emissive.set(c);
                             mat.needsUpdate = true;
                             onUpdate();
-                        } })] })), jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: "Opacity" }), jsxRuntime.jsx(NicePinCodeInput4q8yULuo.U, { min: 0, max: 1, step: 0.01, value: mat.opacity, onChange: (val) => {
+                        } })] })), jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: "Opacity" }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { 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 } }), jsxRuntime.jsx("span", { style: { fontSize: 9, color: "#888", width: 28, textAlign: "right" }, children: mat.opacity.toFixed(2) })] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: "Side" }), jsxRuntime.jsx(NiceButtonDmTHNHet.a, { className: ModelEditor_module.propSelect, value: String(mat.side), onChange: (val) => {
+                        }, style: { flex: 1 } }), jsxRuntime.jsx("span", { style: { fontSize: 9, color: "#888", width: 28, textAlign: "right" }, children: mat.opacity.toFixed(2) })] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: "Side" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.a, { className: ModelEditor_module.propSelect, value: String(mat.side), onChange: (val) => {
                             mat.side = parseInt(val);
                             mat.needsUpdate = true;
                             onUpdate();

package/dist/cjs/model/ModelEditorTimeline.js

@@ -1,18 +1,18 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var we = require('react');
+var ke = require('react');
 var ModelEditor_module = require('./ModelEditor.module.css.js');
 var modelEditorTypes = require('./modelEditorTypes.js');
-var NiceButtonDmTHNHet = require('../ui/dist/NiceButton-DmTHNHet.js');
-var NicePinCodeInput4q8yULuo = require('../ui/dist/NicePinCodeInput-4q8yULuo.js');
+var NiceButtonD9l39Rs7 = require('../ui/dist/NiceButton-D9l39Rs7.js');
+var NicePinCodeInputCrMfdxxc = require('../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 (jsxRuntime.jsxs("div", { className: `${ModelEditor_module.bottomPanel} ${bottomCollapsed ? ModelEditor_module.bottomPanelCollapsed : ""}`, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.bottomPanelHeader, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.bottomToggle, onClick: () => setBottomCollapsed((c) => !c), children: bottomCollapsed ? "▶" : "▼" }), jsxRuntime.jsxs("span", { className: ModelEditor_module.bottomPanelTitle, onClick: () => setBottomCollapsed((c) => !c), children: ["Animation (", animations.length, " clip", animations.length !== 1 ? "s" : "", ")"] }), jsxRuntime.jsx("div", { className: ModelEditor_module.menuSep }), jsxRuntime.jsxs("div", { className: ModelEditor_module.transportBar, children: [jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelEditor_module.transportBtn, variant: "ghost", size: "sm", onClick: () => seekAnim(0), title: "Go to start", children: "\u23EE" }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelEditor_module.transportBtn, variant: isPlaying ? "primary" : "ghost", size: "sm", onClick: togglePlay, title: "Play/Pause (Space)", children: isPlaying ? "⏸" : "▶" }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelEditor_module.transportBtn, variant: "ghost", size: "sm", onClick: stopAnim, title: "Stop", children: "\u23F9" }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelEditor_module.transportBtn, variant: loopAnim ? "primary" : "ghost", size: "sm", onClick: () => setLoopAnim((v) => !v), title: "Loop", children: "\uD83D\uDD01" })] }), jsxRuntime.jsxs("span", { className: ModelEditor_module.transportTime, children: [modelEditorTypes.fmtTime(animTime), " / ", modelEditorTypes.fmtTime(animDuration)] }), jsxRuntime.jsx("div", { className: ModelEditor_module.menuSep }), jsxRuntime.jsx("label", { className: ModelEditor_module.menuLabel, children: "Speed" }), jsxRuntime.jsx(NicePinCodeInput4q8yULuo.U, { min: 0.1, max: 3, step: 0.1, value: animSpeed, onChange: (val) => setAnimSpeed(val), style: { width: 60 } }), jsxRuntime.jsxs("span", { className: ModelEditor_module.menuLabel, children: [animSpeed.toFixed(1), "\u00D7"] })] }), !bottomCollapsed && (jsxRuntime.jsxs("div", { className: ModelEditor_module.animListArea, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.animList, children: [animations.length === 0 && (jsxRuntime.jsx("div", { style: { color: "#666", fontSize: 10, padding: 8 }, children: "No animations loaded" })), animations.map((anim, i) => (jsxRuntime.jsxs("div", { className: `${ModelEditor_module.animItem} ${i === activeAnimIdx ? ModelEditor_module.animItemActive : ""}`, onClick: () => playClip(i), children: [jsxRuntime.jsx("span", { children: anim.name }), jsxRuntime.jsxs("span", { className: ModelEditor_module.animDuration, children: [anim.duration.toFixed(1), "s"] })] }, `${anim.name}-${i}`))), jsxRuntime.jsx("div", { style: { padding: "4px 8px" }, children: jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelEditor_module.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" }) })] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.timelineArea, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.timelineRuler, children: [animDuration > 0 &&
+    return (jsxRuntime.jsxs("div", { className: `${ModelEditor_module.bottomPanel} ${bottomCollapsed ? ModelEditor_module.bottomPanelCollapsed : ""}`, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.bottomPanelHeader, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.bottomToggle, onClick: () => setBottomCollapsed((c) => !c), children: bottomCollapsed ? "▶" : "▼" }), jsxRuntime.jsxs("span", { className: ModelEditor_module.bottomPanelTitle, onClick: () => setBottomCollapsed((c) => !c), children: ["Animation (", animations.length, " clip", animations.length !== 1 ? "s" : "", ")"] }), jsxRuntime.jsx("div", { className: ModelEditor_module.menuSep }), jsxRuntime.jsxs("div", { className: ModelEditor_module.transportBar, children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelEditor_module.transportBtn, variant: "ghost", size: "sm", onClick: () => seekAnim(0), title: "Go to start", children: "\u23EE" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelEditor_module.transportBtn, variant: isPlaying ? "primary" : "ghost", size: "sm", onClick: togglePlay, title: "Play/Pause (Space)", children: isPlaying ? "⏸" : "▶" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelEditor_module.transportBtn, variant: "ghost", size: "sm", onClick: stopAnim, title: "Stop", children: "\u23F9" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelEditor_module.transportBtn, variant: loopAnim ? "primary" : "ghost", size: "sm", onClick: () => setLoopAnim((v) => !v), title: "Loop", children: "\uD83D\uDD01" })] }), jsxRuntime.jsxs("span", { className: ModelEditor_module.transportTime, children: [modelEditorTypes.fmtTime(animTime), " / ", modelEditorTypes.fmtTime(animDuration)] }), jsxRuntime.jsx("div", { className: ModelEditor_module.menuSep }), jsxRuntime.jsx("label", { className: ModelEditor_module.menuLabel, children: "Speed" }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { min: 0.1, max: 3, step: 0.1, value: animSpeed, onChange: (val) => setAnimSpeed(val), style: { width: 60 } }), jsxRuntime.jsxs("span", { className: ModelEditor_module.menuLabel, children: [animSpeed.toFixed(1), "\u00D7"] })] }), !bottomCollapsed && (jsxRuntime.jsxs("div", { className: ModelEditor_module.animListArea, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.animList, children: [animations.length === 0 && (jsxRuntime.jsx("div", { style: { color: "#666", fontSize: 10, padding: 8 }, children: "No animations loaded" })), animations.map((anim, i) => (jsxRuntime.jsxs("div", { className: `${ModelEditor_module.animItem} ${i === activeAnimIdx ? ModelEditor_module.animItemActive : ""}`, onClick: () => playClip(i), children: [jsxRuntime.jsx("span", { children: anim.name }), jsxRuntime.jsxs("span", { className: ModelEditor_module.animDuration, children: [anim.duration.toFixed(1), "s"] })] }, `${anim.name}-${i}`))), jsxRuntime.jsx("div", { style: { padding: "4px 8px" }, children: jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelEditor_module.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" }) })] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.timelineArea, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.timelineRuler, children: [animDuration > 0 &&
                                         Array.from({ length: Math.ceil(animDuration) + 1 }, (_, i) => {
                                             const pct = (i / animDuration) * 100;
-                                            return (jsxRuntime.jsxs(we.Fragment, { children: [jsxRuntime.jsx("div", { className: ModelEditor_module.rulerTick, style: { left: `${pct}%` } }), jsxRuntime.jsxs("span", { className: ModelEditor_module.rulerLabel, style: { left: `${pct}%` }, children: [i, "s"] })] }, i));
+                                            return (jsxRuntime.jsxs(ke.Fragment, { children: [jsxRuntime.jsx("div", { className: ModelEditor_module.rulerTick, style: { left: `${pct}%` } }), jsxRuntime.jsxs("span", { className: ModelEditor_module.rulerLabel, style: { left: `${pct}%` }, children: [i, "s"] })] }, i));
                                         }), animDuration > 0 && (jsxRuntime.jsx("div", { className: ModelEditor_module.playhead, style: {
                                             left: `${(animTime / animDuration) * 100}%`,
                                             height: "100%",

package/dist/cjs/model/ModelEditorToolbar.js

@@ -1,13 +1,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var we = require('react');
+var ke = require('react');
 var ModelEditor_module = require('./ModelEditor.module.css.js');
-var NiceButtonDmTHNHet = require('../ui/dist/NiceButton-DmTHNHet.js');
+var NiceButtonD9l39Rs7 = require('../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 (jsxRuntime.jsxs("div", { className: ModelEditor_module.toolbar, children: [jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelEditor_module.toolBtn, variant: transformMode === "translate" ? "primary" : "ghost", size: "sm", onClick: () => setTransformMode("translate"), title: "Translate (G)", children: "\u2725" }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelEditor_module.toolBtn, variant: transformMode === "rotate" ? "primary" : "ghost", size: "sm", onClick: () => setTransformMode("rotate"), title: "Rotate (R)", children: "\u21BB" }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelEditor_module.toolBtn, variant: transformMode === "scale" ? "primary" : "ghost", size: "sm", onClick: () => setTransformMode("scale"), title: "Scale (S)", children: "\u2B21" }), jsxRuntime.jsx("div", { className: ModelEditor_module.toolSep }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelEditor_module.toolBtn, variant: snapEnabled ? "primary" : "ghost", size: "sm", onClick: () => setSnapEnabled((v) => !v), title: `Snap to Grid (${snapEnabled ? "ON" : "OFF"})`, children: "\uD83E\uDDF2" }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: () => setGizmoSpace((s) => (s === "local" ? "world" : "local")), title: `Orientation: ${gizmoSpace}`, children: gizmoSpace === "local" ? "🔶" : "🌐" }), jsxRuntime.jsx("div", { className: ModelEditor_module.toolSep }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: () => rootObjectRef.current && focusOnObject(rootObjectRef.current), title: "Focus (F)", children: "\u25CE" }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: () => setCameraPreset("front"), title: "Front view (Numpad 1)", children: "1" }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: () => setCameraPreset("right"), title: "Right view (Numpad 3)", children: "3" }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: () => setCameraPreset("top"), title: "Top view (Numpad 7)", children: "7" }), jsxRuntime.jsx("div", { className: ModelEditor_module.toolSep }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: deleteSelected, title: "Delete selected (Del)", children: "\uD83D\uDDD1" }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: duplicateSelected, title: "Duplicate (Shift+D)", disabled: !selectedNode, children: "\uD83D\uDCCB" })] }));
+    return (jsxRuntime.jsxs("div", { className: ModelEditor_module.toolbar, children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelEditor_module.toolBtn, variant: transformMode === "translate" ? "primary" : "ghost", size: "sm", onClick: () => setTransformMode("translate"), title: "Translate (G)", children: "\u2725" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelEditor_module.toolBtn, variant: transformMode === "rotate" ? "primary" : "ghost", size: "sm", onClick: () => setTransformMode("rotate"), title: "Rotate (R)", children: "\u21BB" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelEditor_module.toolBtn, variant: transformMode === "scale" ? "primary" : "ghost", size: "sm", onClick: () => setTransformMode("scale"), title: "Scale (S)", children: "\u2B21" }), jsxRuntime.jsx("div", { className: ModelEditor_module.toolSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelEditor_module.toolBtn, variant: snapEnabled ? "primary" : "ghost", size: "sm", onClick: () => setSnapEnabled((v) => !v), title: `Snap to Grid (${snapEnabled ? "ON" : "OFF"})`, children: "\uD83E\uDDF2" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: () => setGizmoSpace((s) => (s === "local" ? "world" : "local")), title: `Orientation: ${gizmoSpace}`, children: gizmoSpace === "local" ? "🔶" : "🌐" }), jsxRuntime.jsx("div", { className: ModelEditor_module.toolSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: () => rootObjectRef.current && focusOnObject(rootObjectRef.current), title: "Focus (F)", children: "\u25CE" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: () => setCameraPreset("front"), title: "Front view (Numpad 1)", children: "1" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: () => setCameraPreset("right"), title: "Right view (Numpad 3)", children: "3" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: () => setCameraPreset("top"), title: "Top view (Numpad 7)", children: "7" }), jsxRuntime.jsx("div", { className: ModelEditor_module.toolSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: deleteSelected, title: "Delete selected (Del)", children: "\uD83D\uDDD1" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: duplicateSelected, title: "Duplicate (Shift+D)", disabled: !selectedNode, children: "\uD83D\uDCCB" })] }));
 });
 ModelEditorToolbar.displayName = "ModelEditorToolbar";
 

package/dist/cjs/model/ModelEditorViewport.js

@@ -1,10 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var we = require('react');
+var ke = require('react');
 var ModelEditor_module = require('./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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { ref: mountRef, className: `${ModelEditor_module.viewportContainer} ${dragOver ? ModelEditor_module.dragOver : ""}`, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleViewportClick, onContextMenu: handleContextMenu, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.viewportOverlay, children: [jsxRuntime.jsxs("span", { className: ModelEditor_module.viewportBadge, children: [editorMode.toUpperCase(), " MODE"] }), jsxRuntime.jsxs("span", { className: ModelEditor_module.viewportBadge, children: [polyCount.toLocaleString(), " tris \u00B7 ", meshCount, " meshes \u00B7 ", boneCount, " bones"] })] }), jsxRuntime.jsx("div", { className: ModelEditor_module.viewportShadingBar, children: ["wireframe", "solid", "material", "rendered"].map((m) => (jsxRuntime.jsx("button", { className: `${ModelEditor_module.shadingBtn} ${shadingMode === m ? ModelEditor_module.shadingBtnActive : ""}`, onClick: (e) => { e.stopPropagation(); setShadingMode(m); }, title: m.charAt(0).toUpperCase() + m.slice(1), children: m === "wireframe" ? "◇" : m === "solid" ? "◆" : m === "material" ? "🎨" : "☀" }, m))) }), jsxRuntime.jsx("div", { className: ModelEditor_module.viewportGizmoInfo, children: jsxRuntime.jsx("button", { className: ModelEditor_module.shadingBtn, onClick: (e) => {
                                 e.stopPropagation();

package/dist/cjs/model/ModelViewer.js

@@ -1,11 +1,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var we = require('react');
+var ke = require('react');
 var ModelViewer_module = require('./ModelViewer.module.css.js');
 var useModelViewer = require('./useModelViewer.js');
-var NiceButtonDmTHNHet = require('../ui/dist/NiceButton-DmTHNHet.js');
-var NicePinCodeInput4q8yULuo = require('../ui/dist/NicePinCodeInput-4q8yULuo.js');
+var NiceButtonD9l39Rs7 = require('../ui/dist/NiceButton-D9l39Rs7.js');
+var NicePinCodeInputCrMfdxxc = require('../ui/dist/NicePinCodeInput-CrMfdxxc.js');
 
 const NAV_LABELS = {
     orbit: '🌍 Orbit',
@@ -15,19 +15,19 @@ const NAV_LABELS = {
 };
 const NiceModelViewer = ({ className, showToolbar = true, showStatusBar = true, showInfoPanel = true, toolbarExtra, onFileDrop, children, ...viewerProps }) => {
     const api = useModelViewer.useModelViewer(viewerProps);
-    const [panelOpen, setPanelOpen] = we.useState(false);
-    const [dragOver, setDragOver] = we.useState(false);
-    const fileInputRef = we.useRef(null);
+    const [panelOpen, setPanelOpen] = ke.useState(false);
+    const [dragOver, setDragOver] = ke.useState(false);
+    const fileInputRef = ke.useRef(null);
     /* ── drag & drop ── */
-    const handleDragOver = we.useCallback((e) => {
+    const handleDragOver = ke.useCallback((e) => {
         e.preventDefault();
         setDragOver(true);
     }, []);
-    const handleDragLeave = we.useCallback((e) => {
+    const handleDragLeave = ke.useCallback((e) => {
         e.preventDefault();
         setDragOver(false);
     }, []);
-    const handleDrop = we.useCallback((e) => {
+    const handleDrop = ke.useCallback((e) => {
         var _a;
         e.preventDefault();
         setDragOver(false);
@@ -39,27 +39,27 @@ const NiceModelViewer = ({ className, showToolbar = true, showStatusBar = true,
     }, [api, onFileDrop]);
     /* ── nav cycle ── */
     const navModes = ['orbit', 'fps', 'fly', 'walkthrough'];
-    const cycleNav = we.useCallback(() => {
+    const cycleNav = ke.useCallback(() => {
         const idx = navModes.indexOf(api.navigationMode);
         api.setNavigationMode(navModes[(idx + 1) % navModes.length]);
     }, [api]);
-    return (jsxRuntime.jsxs("div", { className: `${ModelViewer_module.root} ${className !== null && className !== void 0 ? className : ''}`, children: [showToolbar && (jsxRuntime.jsxs("div", { className: ModelViewer_module.toolbar, children: [jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelViewer_module.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" }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: ".fbx,.glb,.gltf,.obj,.dae,.stl,.ply", style: { display: 'none' }, onChange: (e) => {
+    return (jsxRuntime.jsxs("div", { className: `${ModelViewer_module.root} ${className !== null && className !== void 0 ? className : ''}`, children: [showToolbar && (jsxRuntime.jsxs("div", { className: ModelViewer_module.toolbar, children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelViewer_module.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" }), jsxRuntime.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 = '';
-                        } }), jsxRuntime.jsx("div", { className: ModelViewer_module.toolSep }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelViewer_module.toolBtn, variant: "ghost", size: "sm", title: "Navigation mode", onClick: cycleNav, children: NAV_LABELS[api.navigationMode] }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelViewer_module.toolBtn, variant: api.wireframe ? 'primary' : 'ghost', size: "sm", onClick: () => api.setWireframe(!api.wireframe), title: "Wireframe", children: "\uD83D\uDD32" }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelViewer_module.toolBtn, variant: api.showGrid ? 'primary' : 'ghost', size: "sm", onClick: () => api.setShowGrid(!api.showGrid), title: "Grid", children: "\u229E" }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelViewer_module.toolBtn, variant: api.clippingEnabled ? 'primary' : 'ghost', size: "sm", onClick: () => api.setClippingEnabled(!api.clippingEnabled), title: "Clipping plane", children: "\u2702\uFE0F" }), api.clippingEnabled && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(NiceButtonDmTHNHet.a, { className: ModelViewer_module.animSelect, value: api.clippingAxis, onChange: (val) => api.setClippingAxis(val), options: [
+                        } }), jsxRuntime.jsx("div", { className: ModelViewer_module.toolSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelViewer_module.toolBtn, variant: "ghost", size: "sm", title: "Navigation mode", onClick: cycleNav, children: NAV_LABELS[api.navigationMode] }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelViewer_module.toolBtn, variant: api.wireframe ? 'primary' : 'ghost', size: "sm", onClick: () => api.setWireframe(!api.wireframe), title: "Wireframe", children: "\uD83D\uDD32" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelViewer_module.toolBtn, variant: api.showGrid ? 'primary' : 'ghost', size: "sm", onClick: () => api.setShowGrid(!api.showGrid), title: "Grid", children: "\u229E" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelViewer_module.toolBtn, variant: api.clippingEnabled ? 'primary' : 'ghost', size: "sm", onClick: () => api.setClippingEnabled(!api.clippingEnabled), title: "Clipping plane", children: "\u2702\uFE0F" }), api.clippingEnabled && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.a, { className: ModelViewer_module.animSelect, value: api.clippingAxis, onChange: (val) => api.setClippingAxis(val), options: [
                                     { value: 'x', label: 'X' },
                                     { value: 'y', label: 'Y' },
                                     { value: 'z', label: 'Z' },
-                                ] }), jsxRuntime.jsx(NicePinCodeInput4q8yULuo.U, { min: -10, max: 10, step: 0.1, value: api.clippingPosition, onChange: (val) => api.setClippingPosition(val), style: { width: 60 } })] })), jsxRuntime.jsx("div", { className: ModelViewer_module.toolSep }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelViewer_module.toolBtn, variant: "ghost", size: "sm", onClick: api.zoomToFit, title: "Zoom to fit", children: "\uD83D\uDD0D" }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelViewer_module.toolBtn, variant: "ghost", size: "sm", onClick: api.resetCamera, title: "Reset camera", children: "\uD83C\uDFE0" }), jsxRuntime.jsx("div", { className: ModelViewer_module.toolSep }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelViewer_module.toolBtn, variant: "ghost", size: "sm", onClick: () => {
+                                ] }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { min: -10, max: 10, step: 0.1, value: api.clippingPosition, onChange: (val) => api.setClippingPosition(val), style: { width: 60 } })] })), jsxRuntime.jsx("div", { className: ModelViewer_module.toolSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelViewer_module.toolBtn, variant: "ghost", size: "sm", onClick: api.zoomToFit, title: "Zoom to fit", children: "\uD83D\uDD0D" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelViewer_module.toolBtn, variant: "ghost", size: "sm", onClick: api.resetCamera, title: "Reset camera", children: "\uD83C\uDFE0" }), jsxRuntime.jsx("div", { className: ModelViewer_module.toolSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelViewer_module.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" }), jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelViewer_module.toolBtn, variant: "ghost", size: "sm", onClick: api.toggleFullscreen, title: "Fullscreen", children: api.isFullscreen ? '⊡' : '⛶' }), toolbarExtra, showInfoPanel && (jsxRuntime.jsx("div", { className: ModelViewer_module.toolRight, children: jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: `${ModelViewer_module.toolBtn} ${panelOpen ? ModelViewer_module.active : ''}`, variant: panelOpen ? 'primary' : 'ghost', size: "sm", onClick: () => setPanelOpen(!panelOpen), title: "Info panel", children: "\u2139\uFE0F" }) }))] })), jsxRuntime.jsxs("div", { className: ModelViewer_module.viewport, ref: api.mountRef, tabIndex: 0, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [api.loading && (jsxRuntime.jsxs("div", { className: ModelViewer_module.loadingOverlay, children: [jsxRuntime.jsx("span", { className: ModelViewer_module.loadingText, children: "Loading model\u2026" }), jsxRuntime.jsx("div", { className: ModelViewer_module.loadingBar, children: jsxRuntime.jsx("div", { className: ModelViewer_module.loadingBarFill, style: { width: `${(api.loadProgress * 100).toFixed(0)}%` } }) })] })), api.error && (jsxRuntime.jsxs("div", { className: ModelViewer_module.errorOverlay, children: [jsxRuntime.jsx("span", { style: { fontSize: 28 }, children: "\u26A0\uFE0F" }), jsxRuntime.jsx("span", { style: { marginTop: 8 }, children: api.error })] })), dragOver && (jsxRuntime.jsx("div", { className: ModelViewer_module.dropZone, children: "Drop 3D model file here" }))] }), jsxRuntime.jsxs("div", { className: `${ModelViewer_module.sidePanel} ${!panelOpen ? ModelViewer_module.hidden : ''}`, children: [jsxRuntime.jsxs("div", { className: ModelViewer_module.panelSection, children: [jsxRuntime.jsx("div", { className: ModelViewer_module.panelTitle, children: "Model Info" }), jsxRuntime.jsxs("div", { className: ModelViewer_module.panelRow, children: [jsxRuntime.jsx("label", { children: "Triangles" }), jsxRuntime.jsx("span", { children: api.polyCount.toLocaleString() })] }), jsxRuntime.jsxs("div", { className: ModelViewer_module.panelRow, children: [jsxRuntime.jsx("label", { children: "Meshes" }), jsxRuntime.jsx("span", { children: api.meshCount })] }), api.dimensions && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: ModelViewer_module.panelRow, children: [jsxRuntime.jsx("label", { children: "Width" }), jsxRuntime.jsx("span", { children: api.dimensions.width })] }), jsxRuntime.jsxs("div", { className: ModelViewer_module.panelRow, children: [jsxRuntime.jsx("label", { children: "Height" }), jsxRuntime.jsx("span", { children: api.dimensions.height })] }), jsxRuntime.jsxs("div", { className: ModelViewer_module.panelRow, children: [jsxRuntime.jsx("label", { children: "Depth" }), jsxRuntime.jsx("span", { children: api.dimensions.depth })] })] }))] }), jsxRuntime.jsxs("div", { className: ModelViewer_module.panelSection, children: [jsxRuntime.jsx("div", { className: ModelViewer_module.panelTitle, children: "Navigation" }), navModes.map((m) => (jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelViewer_module.toolBtn, variant: api.navigationMode === m ? 'primary' : 'ghost', size: "sm", onClick: () => api.setNavigationMode(m), children: NAV_LABELS[m] }, m)))] }), jsxRuntime.jsxs("div", { className: ModelViewer_module.panelSection, children: [jsxRuntime.jsx("div", { className: ModelViewer_module.panelTitle, children: "Auto Rotate" }), jsxRuntime.jsx(NicePinCodeInput4q8yULuo.U, { min: 0, max: 10, step: 0.5, value: api.autoRotateSpeed, onChange: (val) => api.setAutoRotateSpeed(val), style: { width: '100%' } })] }), api.animations.length > 0 && (jsxRuntime.jsxs("div", { className: ModelViewer_module.panelSection, children: [jsxRuntime.jsx("div", { className: ModelViewer_module.panelTitle, children: "Animations" }), api.animations.map((name, i) => (jsxRuntime.jsxs(NiceButtonDmTHNHet.c, { className: ModelViewer_module.toolBtn, variant: api.activeAnimIdx === i ? 'primary' : 'ghost', size: "sm", onClick: () => api.playAnimation(i), children: ["\u25B6 ", name] }, i)))] }))] }), jsxRuntime.jsxs("div", { className: `${ModelViewer_module.animBar} ${api.animations.length === 0 ? ModelViewer_module.hidden : ''}`, children: [jsxRuntime.jsx(NiceButtonDmTHNHet.c, { className: ModelViewer_module.toolBtn, variant: "ghost", size: "sm", onClick: api.togglePlay, children: api.isPlaying ? '⏸' : '▶' }), jsxRuntime.jsx(NiceButtonDmTHNHet.a, { className: ModelViewer_module.animSelect, value: String(api.activeAnimIdx), onChange: (val) => api.playAnimation(parseInt(val)), options: api.animations.map((n, i) => ({ value: String(i), label: n })) }), jsxRuntime.jsx(NicePinCodeInput4q8yULuo.U, { className: ModelViewer_module.animSlider, min: 0, max: api.animDuration || 1, step: 0.01, value: api.animTime, onChange: (val) => api.seekAnim(val) }), jsxRuntime.jsxs("span", { className: ModelViewer_module.toolLabel, children: [api.animTime.toFixed(1), "s / ", api.animDuration.toFixed(1), "s"] })] }), showStatusBar && (jsxRuntime.jsxs("div", { className: ModelViewer_module.statusBar, children: [jsxRuntime.jsx("span", { children: api.statusText }), jsxRuntime.jsxs("div", { className: ModelViewer_module.statusRight, children: [jsxRuntime.jsx("span", { children: NAV_LABELS[api.navigationMode] }), api.dimensions && (jsxRuntime.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" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelViewer_module.toolBtn, variant: "ghost", size: "sm", onClick: api.toggleFullscreen, title: "Fullscreen", children: api.isFullscreen ? '⊡' : '⛶' }), toolbarExtra, showInfoPanel && (jsxRuntime.jsx("div", { className: ModelViewer_module.toolRight, children: jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: `${ModelViewer_module.toolBtn} ${panelOpen ? ModelViewer_module.active : ''}`, variant: panelOpen ? 'primary' : 'ghost', size: "sm", onClick: () => setPanelOpen(!panelOpen), title: "Info panel", children: "\u2139\uFE0F" }) }))] })), jsxRuntime.jsxs("div", { className: ModelViewer_module.viewport, ref: api.mountRef, tabIndex: 0, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [api.loading && (jsxRuntime.jsxs("div", { className: ModelViewer_module.loadingOverlay, children: [jsxRuntime.jsx("span", { className: ModelViewer_module.loadingText, children: "Loading model\u2026" }), jsxRuntime.jsx("div", { className: ModelViewer_module.loadingBar, children: jsxRuntime.jsx("div", { className: ModelViewer_module.loadingBarFill, style: { width: `${(api.loadProgress * 100).toFixed(0)}%` } }) })] })), api.error && (jsxRuntime.jsxs("div", { className: ModelViewer_module.errorOverlay, children: [jsxRuntime.jsx("span", { style: { fontSize: 28 }, children: "\u26A0\uFE0F" }), jsxRuntime.jsx("span", { style: { marginTop: 8 }, children: api.error })] })), dragOver && (jsxRuntime.jsx("div", { className: ModelViewer_module.dropZone, children: "Drop 3D model file here" }))] }), jsxRuntime.jsxs("div", { className: `${ModelViewer_module.sidePanel} ${!panelOpen ? ModelViewer_module.hidden : ''}`, children: [jsxRuntime.jsxs("div", { className: ModelViewer_module.panelSection, children: [jsxRuntime.jsx("div", { className: ModelViewer_module.panelTitle, children: "Model Info" }), jsxRuntime.jsxs("div", { className: ModelViewer_module.panelRow, children: [jsxRuntime.jsx("label", { children: "Triangles" }), jsxRuntime.jsx("span", { children: api.polyCount.toLocaleString() })] }), jsxRuntime.jsxs("div", { className: ModelViewer_module.panelRow, children: [jsxRuntime.jsx("label", { children: "Meshes" }), jsxRuntime.jsx("span", { children: api.meshCount })] }), api.dimensions && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: ModelViewer_module.panelRow, children: [jsxRuntime.jsx("label", { children: "Width" }), jsxRuntime.jsx("span", { children: api.dimensions.width })] }), jsxRuntime.jsxs("div", { className: ModelViewer_module.panelRow, children: [jsxRuntime.jsx("label", { children: "Height" }), jsxRuntime.jsx("span", { children: api.dimensions.height })] }), jsxRuntime.jsxs("div", { className: ModelViewer_module.panelRow, children: [jsxRuntime.jsx("label", { children: "Depth" }), jsxRuntime.jsx("span", { children: api.dimensions.depth })] })] }))] }), jsxRuntime.jsxs("div", { className: ModelViewer_module.panelSection, children: [jsxRuntime.jsx("div", { className: ModelViewer_module.panelTitle, children: "Navigation" }), navModes.map((m) => (jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelViewer_module.toolBtn, variant: api.navigationMode === m ? 'primary' : 'ghost', size: "sm", onClick: () => api.setNavigationMode(m), children: NAV_LABELS[m] }, m)))] }), jsxRuntime.jsxs("div", { className: ModelViewer_module.panelSection, children: [jsxRuntime.jsx("div", { className: ModelViewer_module.panelTitle, children: "Auto Rotate" }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { min: 0, max: 10, step: 0.5, value: api.autoRotateSpeed, onChange: (val) => api.setAutoRotateSpeed(val), style: { width: '100%' } })] }), api.animations.length > 0 && (jsxRuntime.jsxs("div", { className: ModelViewer_module.panelSection, children: [jsxRuntime.jsx("div", { className: ModelViewer_module.panelTitle, children: "Animations" }), api.animations.map((name, i) => (jsxRuntime.jsxs(NiceButtonD9l39Rs7.c, { className: ModelViewer_module.toolBtn, variant: api.activeAnimIdx === i ? 'primary' : 'ghost', size: "sm", onClick: () => api.playAnimation(i), children: ["\u25B6 ", name] }, i)))] }))] }), jsxRuntime.jsxs("div", { className: `${ModelViewer_module.animBar} ${api.animations.length === 0 ? ModelViewer_module.hidden : ''}`, children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: ModelViewer_module.toolBtn, variant: "ghost", size: "sm", onClick: api.togglePlay, children: api.isPlaying ? '⏸' : '▶' }), jsxRuntime.jsx(NiceButtonD9l39Rs7.a, { className: ModelViewer_module.animSelect, value: String(api.activeAnimIdx), onChange: (val) => api.playAnimation(parseInt(val)), options: api.animations.map((n, i) => ({ value: String(i), label: n })) }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { className: ModelViewer_module.animSlider, min: 0, max: api.animDuration || 1, step: 0.01, value: api.animTime, onChange: (val) => api.seekAnim(val) }), jsxRuntime.jsxs("span", { className: ModelViewer_module.toolLabel, children: [api.animTime.toFixed(1), "s / ", api.animDuration.toFixed(1), "s"] })] }), showStatusBar && (jsxRuntime.jsxs("div", { className: ModelViewer_module.statusBar, children: [jsxRuntime.jsx("span", { children: api.statusText }), jsxRuntime.jsxs("div", { className: ModelViewer_module.statusRight, children: [jsxRuntime.jsx("span", { children: NAV_LABELS[api.navigationMode] }), api.dimensions && (jsxRuntime.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;

package/dist/cjs/model/NiceArmatureEditor.js

@@ -2,7 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var THREE = require('three');
-var we = require('react');
+var ke = require('react');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -24,12 +24,12 @@ function _interopNamespaceDefault(e) {
 var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
 
 function useArmatureEditor(skeleton, scene, onBoneSelect) {
-    const [bones, setBones] = we.useState([]);
-    const [selectedBoneId, setSelectedBoneId] = we.useState(null);
-    const [savedPoses, setSavedPoses] = we.useState([]);
-    const helperRef = we.useRef(null);
+    const [bones, setBones] = ke.useState([]);
+    const [selectedBoneId, setSelectedBoneId] = ke.useState(null);
+    const [savedPoses, setSavedPoses] = ke.useState([]);
+    const helperRef = ke.useRef(null);
     // Build bone info tree from skeleton
-    we.useEffect(() => {
+    ke.useEffect(() => {
         if (!skeleton) {
             setBones([]);
             return;
@@ -52,7 +52,7 @@ function useArmatureEditor(skeleton, scene, onBoneSelect) {
         setBones(boneInfos);
     }, [skeleton]);
     // Create skeleton helper for visualization
-    we.useEffect(() => {
+    ke.useEffect(() => {
         var _a;
         if (!skeleton || !scene)
             return;
@@ -69,12 +69,12 @@ function useArmatureEditor(skeleton, scene, onBoneSelect) {
             helperRef.current = null;
         };
     }, [skeleton, scene]);
-    const selectBone = we.useCallback((id) => {
+    const selectBone = ke.useCallback((id) => {
         setSelectedBoneId(id);
         const bone = id ? (skeleton === null || skeleton === void 0 ? void 0 : skeleton.bones.find((b) => b.uuid === id)) || null : null;
         onBoneSelect === null || onBoneSelect === void 0 ? void 0 : onBoneSelect(bone);
     }, [skeleton, onBoneSelect]);
-    const setBonePosition = we.useCallback((id, pos) => {
+    const setBonePosition = ke.useCallback((id, pos) => {
         const bone = skeleton === null || skeleton === void 0 ? void 0 : skeleton.bones.find((b) => b.uuid === id);
         if (bone) {
             bone.position.copy(pos);
@@ -82,7 +82,7 @@ function useArmatureEditor(skeleton, scene, onBoneSelect) {
             setBones((prev) => prev.map((b) => (b.id === id ? { ...b, localPosition: pos.clone() } : b)));
         }
     }, [skeleton]);
-    const setBoneRotation = we.useCallback((id, rot) => {
+    const setBoneRotation = ke.useCallback((id, rot) => {
         const bone = skeleton === null || skeleton === void 0 ? void 0 : skeleton.bones.find((b) => b.uuid === id);
         if (bone) {
             bone.rotation.copy(rot);
@@ -90,7 +90,7 @@ function useArmatureEditor(skeleton, scene, onBoneSelect) {
             setBones((prev) => prev.map((b) => (b.id === id ? { ...b, localRotation: rot.clone() } : b)));
         }
     }, [skeleton]);
-    const addBone = we.useCallback((parentId, name) => {
+    const addBone = ke.useCallback((parentId, name) => {
         const parent = skeleton === null || skeleton === void 0 ? void 0 : skeleton.bones.find((b) => b.uuid === parentId);
         const newBone = new THREE__namespace.Bone();
         newBone.name = name;
@@ -119,7 +119,7 @@ function useArmatureEditor(skeleton, scene, onBoneSelect) {
         ]);
         return newBone;
     }, [skeleton]);
-    const removeBone = we.useCallback((id) => {
+    const removeBone = ke.useCallback((id) => {
         const bone = skeleton === null || skeleton === void 0 ? void 0 : skeleton.bones.find((b) => b.uuid === id);
         if (!bone)
             return;
@@ -139,7 +139,7 @@ function useArmatureEditor(skeleton, scene, onBoneSelect) {
         if (selectedBoneId === id)
             setSelectedBoneId(null);
     }, [skeleton, selectedBoneId]);
-    const savePose = we.useCallback((name) => {
+    const savePose = ke.useCallback((name) => {
         const transforms = new Map();
         if (skeleton) {
             for (const bone of skeleton.bones) {
@@ -159,7 +159,7 @@ function useArmatureEditor(skeleton, scene, onBoneSelect) {
         setSavedPoses((prev) => [...prev, pose]);
         return pose;
     }, [skeleton]);
-    const loadPose = we.useCallback((pose) => {
+    const loadPose = ke.useCallback((pose) => {
         if (!skeleton)
             return;
         for (const bone of skeleton.bones) {
@@ -178,7 +178,7 @@ function useArmatureEditor(skeleton, scene, onBoneSelect) {
             localScale: b.bone.scale.clone(),
         })));
     }, [skeleton]);
-    const resetPose = we.useCallback(() => {
+    const resetPose = ke.useCallback(() => {
         if (!skeleton)
             return;
         for (const bone of skeleton.bones) {
@@ -216,9 +216,9 @@ function useArmatureEditor(skeleton, scene, onBoneSelect) {
 /* ── Component ── */
 const NiceArmatureEditor = ({ skeleton, skinnedMesh, scene, camera, onBoneSelect, onPoseChange, className = '', }) => {
     const { bones, selectedBoneId, selectBone, setBonePosition, setBoneRotation, addBone, removeBone, savePose, loadPose, resetPose, savedPoses, skeletonHelper, } = useArmatureEditor(skeleton, scene, onBoneSelect);
-    const [newBoneName, setNewBoneName] = we.useState('');
-    const selectedBone = we.useMemo(() => bones.find((b) => b.id === selectedBoneId), [bones, selectedBoneId]);
-    const rootBones = we.useMemo(() => bones.filter((b) => !b.parentId), [bones]);
+    const [newBoneName, setNewBoneName] = ke.useState('');
+    const selectedBone = ke.useMemo(() => bones.find((b) => b.id === selectedBoneId), [bones, selectedBoneId]);
+    const rootBones = ke.useMemo(() => bones.filter((b) => !b.parentId), [bones]);
     const renderBoneTree = (boneInfo, depth = 0) => {
         const isSelected = boneInfo.id === selectedBoneId;
         const childBones = bones.filter((b) => b.parentId === boneInfo.id);

package/dist/cjs/model/NiceMorphTargetEditor.js

@@ -2,7 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var THREE = require('three');
-var we = require('react');
+var ke = require('react');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -25,14 +25,14 @@ var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
 
 /* ── Hook ── */
 function useMorphTargetEditor(mesh, onInfluenceChange) {
-    const [targets, setTargets] = we.useState([]);
-    const [animations, setAnimations] = we.useState([]);
-    const [isAnimating, setIsAnimating] = we.useState(false);
-    const animFrameRef = we.useRef(0);
-    const animStartRef = we.useRef(0);
-    const activeAnimRef = we.useRef(null);
+    const [targets, setTargets] = ke.useState([]);
+    const [animations, setAnimations] = ke.useState([]);
+    const [isAnimating, setIsAnimating] = ke.useState(false);
+    const animFrameRef = ke.useRef(0);
+    const animStartRef = ke.useRef(0);
+    const activeAnimRef = ke.useRef(null);
     // Sync targets from mesh
-    we.useEffect(() => {
+    ke.useEffect(() => {
         if (!mesh || !mesh.morphTargetDictionary || !mesh.morphTargetInfluences) {
             setTargets([]);
             return;
@@ -50,14 +50,14 @@ function useMorphTargetEditor(mesh, onInfluenceChange) {
         list.sort((a, b) => a.index - b.index);
         setTargets(list);
     }, [mesh]);
-    const setInfluence = we.useCallback((index, value) => {
+    const setInfluence = ke.useCallback((index, value) => {
         if (!(mesh === null || mesh === void 0 ? void 0 : mesh.morphTargetInfluences))
             return;
         mesh.morphTargetInfluences[index] = value;
         setTargets((prev) => prev.map((t) => (t.index === index ? { ...t, influence: value } : t)));
         onInfluenceChange === null || onInfluenceChange === void 0 ? void 0 : onInfluenceChange(mesh, index, value);
     }, [mesh, onInfluenceChange]);
-    const createMorphTarget = we.useCallback((name) => {
+    const createMorphTarget = ke.useCallback((name) => {
         if (!mesh)
             return;
         const geometry = mesh.geometry;
@@ -87,7 +87,7 @@ function useMorphTargetEditor(mesh, onInfluenceChange) {
         mesh.updateMorphTargets();
         setTargets((prev) => [...prev, { name, index: newIndex, influence: 0 }]);
     }, [mesh]);
-    const deleteMorphTarget = we.useCallback((index) => {
+    const deleteMorphTarget = ke.useCallback((index) => {
         if (!mesh)
             return;
         const geometry = mesh.geometry;
@@ -111,13 +111,13 @@ function useMorphTargetEditor(mesh, onInfluenceChange) {
             influence: influences[idx],
         })));
     }, [mesh]);
-    const resetAllInfluences = we.useCallback(() => {
+    const resetAllInfluences = ke.useCallback(() => {
         if (!(mesh === null || mesh === void 0 ? void 0 : mesh.morphTargetInfluences))
             return;
         mesh.morphTargetInfluences.fill(0);
         setTargets((prev) => prev.map((t) => ({ ...t, influence: 0 })));
     }, [mesh]);
-    const startAnimation = we.useCallback((animation) => {
+    const startAnimation = ke.useCallback((animation) => {
         if (!(mesh === null || mesh === void 0 ? void 0 : mesh.morphTargetInfluences))
             return;
         activeAnimRef.current = animation;
@@ -159,18 +159,18 @@ function useMorphTargetEditor(mesh, onInfluenceChange) {
         };
         animFrameRef.current = requestAnimationFrame(animate);
     }, [mesh]);
-    const stopAnimation = we.useCallback(() => {
+    const stopAnimation = ke.useCallback(() => {
         activeAnimRef.current = null;
         setIsAnimating(false);
         cancelAnimationFrame(animFrameRef.current);
     }, []);
-    we.useEffect(() => {
+    ke.useEffect(() => {
         return () => cancelAnimationFrame(animFrameRef.current);
     }, []);
-    const addAnimation = we.useCallback((animation) => {
+    const addAnimation = ke.useCallback((animation) => {
         setAnimations((prev) => [...prev, animation]);
     }, []);
-    const removeAnimation = we.useCallback((name) => {
+    const removeAnimation = ke.useCallback((name) => {
         setAnimations((prev) => prev.filter((a) => a.name !== name));
     }, []);
     return {
@@ -190,7 +190,7 @@ function useMorphTargetEditor(mesh, onInfluenceChange) {
 /* ── Component ── */
 const NiceMorphTargetEditor = ({ mesh, onInfluenceChange, className = '', }) => {
     const { targets, setInfluence, createMorphTarget, deleteMorphTarget, resetAllInfluences, isAnimating, startAnimation, stopAnimation, animations, addAnimation, removeAnimation, } = useMorphTargetEditor(mesh, onInfluenceChange);
-    const [newName, setNewName] = we.useState('');
+    const [newName, setNewName] = ke.useState('');
     const handleCreate = () => {
         const name = newName.trim();
         if (!name)

package/dist/cjs/model/NiceOctree.js

@@ -2,7 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var THREE = require('three');
-var we = require('react');
+var ke = require('react');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -208,12 +208,12 @@ function buildDebugVisualization(node, group, maxDepth) {
 }
 /* ── Hook ── */
 function useOctree(scene, configOverride) {
-    const config = we.useMemo(() => ({ ...DEFAULT_CONFIG, ...configOverride }), [configOverride]);
-    const [root, setRoot] = we.useState(null);
-    const [showDebug, setShowDebug] = we.useState(false);
-    const [stats, setStats] = we.useState({ nodeCount: 0, objectCount: 0 });
-    const debugGroup = we.useRef(new THREE__namespace.Group());
-    we.useEffect(() => {
+    const config = ke.useMemo(() => ({ ...DEFAULT_CONFIG, ...configOverride }), [configOverride]);
+    const [root, setRoot] = ke.useState(null);
+    const [showDebug, setShowDebug] = ke.useState(false);
+    const [stats, setStats] = ke.useState({ nodeCount: 0, objectCount: 0 });
+    const debugGroup = ke.useRef(new THREE__namespace.Group());
+    ke.useEffect(() => {
         if (!scene)
             return;
         debugGroup.current.name = '__octree_debug__';
@@ -224,7 +224,7 @@ function useOctree(scene, configOverride) {
             scene.remove(debugGroup.current);
         };
     }, [scene, showDebug]);
-    const refreshDebug = we.useCallback((rootNode) => {
+    const refreshDebug = ke.useCallback((rootNode) => {
         // Clear existing debug
         while (debugGroup.current.children.length) {
             const child = debugGroup.current.children[0];
@@ -234,7 +234,7 @@ function useOctree(scene, configOverride) {
             buildDebugVisualization(rootNode, debugGroup.current, config.maxDepth);
         }
     }, [showDebug, config.maxDepth]);
-    const build = we.useCallback(() => {
+    const build = ke.useCallback(() => {
         if (!scene)
             return;
         // Compute scene bounds
@@ -264,26 +264,26 @@ function useOctree(scene, configOverride) {
         setStats({ nodeCount: countNodes(rootNode), objectCount: countObjects(rootNode) });
         refreshDebug(rootNode);
     }, [scene, config, refreshDebug]);
-    const insert = we.useCallback((object) => {
+    const insert = ke.useCallback((object) => {
         if (!root)
             return;
         insertObject(root, object, config);
         setStats({ nodeCount: countNodes(root), objectCount: countObjects(root) });
         refreshDebug(root);
     }, [root, config, refreshDebug]);
-    const remove = we.useCallback((object) => {
+    const remove = ke.useCallback((object) => {
         if (!root)
             return;
         removeObject(root, object);
         setStats({ nodeCount: countNodes(root), objectCount: countObjects(root) });
     }, [root]);
-    const update = we.useCallback((object) => {
+    const update = ke.useCallback((object) => {
         if (!root)
             return;
         removeObject(root, object);
         insertObject(root, object, config);
     }, [root, config]);
-    const raycast = we.useCallback((raycaster) => {
+    const raycast = ke.useCallback((raycaster) => {
         if (!root)
             return [];
         const results = [];
@@ -291,7 +291,7 @@ function useOctree(scene, configOverride) {
         results.sort((a, b) => a.distance - b.distance);
         return results;
     }, [root]);
-    const frustumCull = we.useCallback((camera) => {
+    const frustumCull = ke.useCallback((camera) => {
         if (!root)
             return [];
         const frustum = new THREE__namespace.Frustum();
@@ -302,7 +302,7 @@ function useOctree(scene, configOverride) {
         frustumCullNode(root, frustum, results);
         return results;
     }, [root]);
-    const nearestNeighbor = we.useCallback((point, maxDistance = Infinity) => {
+    const nearestNeighbor = ke.useCallback((point, maxDistance = Infinity) => {
         if (!root)
             return null;
         const best = { object: null, dist: maxDistance };
@@ -327,7 +327,7 @@ function useOctree(scene, configOverride) {
 /* ── Component ── */
 const NiceOctree = ({ scene, config, showDebug: initialShowDebug, className = '', }) => {
     const octree = useOctree(scene, config);
-    we.useEffect(() => {
+    ke.useEffect(() => {
         if (initialShowDebug !== undefined)
             octree.setShowDebug(initialShowDebug);
     }, [initialShowDebug]);