@nice2dev/ui-3d 1.0.6 → 1.1.0

package/dist/cjs/model/NicePhysicsSimulation.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);
@@ -45,21 +45,21 @@ function computeAABB(object) {
 let bodyIdCounter = 0;
 let jointIdCounter = 0;
 function usePhysicsSimulation(scene, onSimulationStep) {
-    const [worldConfig, setWorldConfigState] = we.useState({
+    const [worldConfig, setWorldConfigState] = ke.useState({
         gravity: new THREE__namespace.Vector3(0, -9.81, 0),
         timestep: 1 / 60,
         maxSubsteps: 4,
     });
-    const [bodies, setBodies] = we.useState([]);
-    const [joints, setJoints] = we.useState([]);
-    const [isRunning, setIsRunning] = we.useState(false);
-    const [debugDraw, setDebugDraw] = we.useState(false);
-    const internalBodies = we.useRef(new Map());
-    const debugGroup = we.useRef(new THREE__namespace.Group());
-    const animFrameId = we.useRef(0);
-    const lastTime = we.useRef(0);
+    const [bodies, setBodies] = ke.useState([]);
+    const [joints, setJoints] = ke.useState([]);
+    const [isRunning, setIsRunning] = ke.useState(false);
+    const [debugDraw, setDebugDraw] = ke.useState(false);
+    const internalBodies = ke.useRef(new Map());
+    const debugGroup = ke.useRef(new THREE__namespace.Group());
+    const animFrameId = ke.useRef(0);
+    const lastTime = ke.useRef(0);
     // Debug wireframe colliders
-    we.useEffect(() => {
+    ke.useEffect(() => {
         if (!scene)
             return;
         debugGroup.current.name = '__physics_debug__';
@@ -70,10 +70,10 @@ function usePhysicsSimulation(scene, onSimulationStep) {
             scene.remove(debugGroup.current);
         };
     }, [scene, debugDraw]);
-    const setWorldConfig = we.useCallback((partial) => {
+    const setWorldConfig = ke.useCallback((partial) => {
         setWorldConfigState((prev) => ({ ...prev, ...partial }));
     }, []);
-    const addBody = we.useCallback((object) => {
+    const addBody = ke.useCallback((object) => {
         const id = `phys_${++bodyIdCounter}`;
         const desc = {
             id,
@@ -105,7 +105,7 @@ function usePhysicsSimulation(scene, onSimulationStep) {
         }
         return desc;
     }, [debugDraw]);
-    const removeBody = we.useCallback((id) => {
+    const removeBody = ke.useCallback((id) => {
         internalBodies.current.delete(id);
         setBodies((prev) => prev.filter((b) => b.id !== id));
         // Remove debug wireframe
@@ -113,23 +113,23 @@ function usePhysicsSimulation(scene, onSimulationStep) {
         if (debugObj)
             debugGroup.current.remove(debugObj);
     }, []);
-    const updateBody = we.useCallback((id, partial) => {
+    const updateBody = ke.useCallback((id, partial) => {
         const internal = internalBodies.current.get(id);
         if (internal) {
             Object.assign(internal.desc, partial);
         }
         setBodies((prev) => prev.map((b) => (b.id === id ? { ...b, ...partial } : b)));
     }, []);
-    const addJoint = we.useCallback((joint) => {
+    const addJoint = ke.useCallback((joint) => {
         const id = `joint_${++jointIdCounter}`;
         setJoints((prev) => [...prev, { ...joint, id }]);
     }, []);
-    const removeJoint = we.useCallback((id) => {
+    const removeJoint = ke.useCallback((id) => {
         setJoints((prev) => prev.filter((j) => j.id !== id));
     }, []);
-    const getBodyForObject = we.useCallback((objectName) => bodies.find((b) => b.objectName === objectName), [bodies]);
+    const getBodyForObject = ke.useCallback((objectName) => bodies.find((b) => b.objectName === objectName), [bodies]);
     // Simplified physics step (Euler integration with collision detection)
-    const simulationStep = we.useCallback((dt) => {
+    const simulationStep = ke.useCallback((dt) => {
         const gravity = worldConfig.gravity;
         internalBodies.current.forEach((body) => {
             if (body.desc.bodyType !== 'dynamic')
@@ -196,7 +196,7 @@ function usePhysicsSimulation(scene, onSimulationStep) {
         onSimulationStep === null || onSimulationStep === void 0 ? void 0 : onSimulationStep(dt);
     }, [worldConfig.gravity, onSimulationStep]);
     // Animation loop
-    we.useEffect(() => {
+    ke.useEffect(() => {
         if (!isRunning)
             return;
         lastTime.current = performance.now();
@@ -213,12 +213,12 @@ function usePhysicsSimulation(scene, onSimulationStep) {
         animFrameId.current = requestAnimationFrame(loop);
         return () => cancelAnimationFrame(animFrameId.current);
     }, [isRunning, simulationStep, worldConfig.timestep, worldConfig.maxSubsteps]);
-    const play = we.useCallback(() => setIsRunning(true), []);
-    const pause = we.useCallback(() => setIsRunning(false), []);
-    const step = we.useCallback(() => {
+    const play = ke.useCallback(() => setIsRunning(true), []);
+    const pause = ke.useCallback(() => setIsRunning(false), []);
+    const step = ke.useCallback(() => {
         simulationStep(worldConfig.timestep);
     }, [simulationStep, worldConfig.timestep]);
-    const reset = we.useCallback(() => {
+    const reset = ke.useCallback(() => {
         setIsRunning(false);
         internalBodies.current.forEach((body) => {
             body.object.position.copy(body.initialPosition);

package/dist/cjs/model/NiceProceduralGeometry.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);
@@ -213,13 +213,13 @@ const DEFAULT_PIPE = {
 };
 const DEFAULT_GEAR = { innerRadius: 0.5, outerRadius: 2, teeth: 12, toothDepth: 0.3, thickness: 0.4 };
 function useProceduralGeometry(scene, onGenerated) {
-    const [type, setType] = we.useState('tree');
-    const [treeParams, setTreeParams] = we.useState(DEFAULT_TREE);
-    const [rockParams, setRockParams] = we.useState(DEFAULT_ROCK);
-    const [buildingParams, setBuildingParams] = we.useState(DEFAULT_BUILDING);
-    const [pipeParams, setPipeParams] = we.useState(DEFAULT_PIPE);
-    const [gearParams, setGearParams] = we.useState(DEFAULT_GEAR);
-    const generate = we.useCallback(() => {
+    const [type, setType] = ke.useState('tree');
+    const [treeParams, setTreeParams] = ke.useState(DEFAULT_TREE);
+    const [rockParams, setRockParams] = ke.useState(DEFAULT_ROCK);
+    const [buildingParams, setBuildingParams] = ke.useState(DEFAULT_BUILDING);
+    const [pipeParams, setPipeParams] = ke.useState(DEFAULT_PIPE);
+    const [gearParams, setGearParams] = ke.useState(DEFAULT_GEAR);
+    const generate = ke.useCallback(() => {
         if (!scene)
             return;
         let result;

package/dist/cjs/model/NiceTerrainEditor.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);
@@ -42,25 +42,25 @@ function fractalNoise(x, z, octaves, persistence, lacunarity, rng) {
 }
 /* ── Hook ── */
 function useTerrainEditor(scene, camera, canvas, config = { width: 100, depth: 100, segments: 128, maxHeight: 20 }, onTerrainChange) {
-    const [brush, setBrushState] = we.useState({
+    const [brush, setBrushState] = ke.useState({
         mode: 'raise',
         radius: 5,
         strength: 0.3,
         falloff: 'smooth',
     });
-    const [isPainting, setIsPainting] = we.useState(false);
-    const [textureLayers, setTextureLayers] = we.useState([
+    const [isPainting, setIsPainting] = ke.useState(false);
+    const [textureLayers, setTextureLayers] = ke.useState([
         { name: 'Grass', texture: null, scale: 10 },
         { name: 'Rock', texture: null, scale: 8 },
         { name: 'Sand', texture: null, scale: 12 },
         { name: 'Snow', texture: null, scale: 10 },
     ]);
-    const [activeTextureLayer, setActiveTextureLayer] = we.useState(0);
-    const terrainRef = we.useRef(null);
-    const splatMapRef = we.useRef(null);
-    const raycaster = we.useRef(new THREE__namespace.Raycaster());
+    const [activeTextureLayer, setActiveTextureLayer] = ke.useState(0);
+    const terrainRef = ke.useRef(null);
+    const splatMapRef = ke.useRef(null);
+    const raycaster = ke.useRef(new THREE__namespace.Raycaster());
     // Create terrain mesh
-    we.useEffect(() => {
+    ke.useEffect(() => {
         if (!scene)
             return;
         const geometry = new THREE__namespace.PlaneGeometry(config.width, config.depth, config.segments, config.segments);
@@ -90,10 +90,10 @@ function useTerrainEditor(scene, camera, canvas, config = { width: 100, depth: 1
             material.dispose();
         };
     }, [scene, config.width, config.depth, config.segments]);
-    const setBrush = we.useCallback((partial) => {
+    const setBrush = ke.useCallback((partial) => {
         setBrushState((prev) => ({ ...prev, ...partial }));
     }, []);
-    const applyBrushAtPoint = we.useCallback((point) => {
+    const applyBrushAtPoint = ke.useCallback((point) => {
         const mesh = terrainRef.current;
         if (!mesh)
             return;
@@ -185,7 +185,7 @@ function useTerrainEditor(scene, camera, canvas, config = { width: 100, depth: 1
         onTerrainChange === null || onTerrainChange === void 0 ? void 0 : onTerrainChange(mesh);
     }, [brush, config.segments, activeTextureLayer, onTerrainChange]);
     // Mouse handling
-    we.useEffect(() => {
+    ke.useEffect(() => {
         if (!canvas || !camera || !isPainting)
             return;
         const onPointerMove = (e) => {
@@ -203,7 +203,7 @@ function useTerrainEditor(scene, camera, canvas, config = { width: 100, depth: 1
         canvas.addEventListener('pointermove', onPointerMove);
         return () => canvas.removeEventListener('pointermove', onPointerMove);
     }, [canvas, camera, isPainting, applyBrushAtPoint]);
-    const generateFlat = we.useCallback(() => {
+    const generateFlat = ke.useCallback(() => {
         const mesh = terrainRef.current;
         if (!mesh)
             return;
@@ -215,7 +215,7 @@ function useTerrainEditor(scene, camera, canvas, config = { width: 100, depth: 1
         mesh.geometry.computeVertexNormals();
         onTerrainChange === null || onTerrainChange === void 0 ? void 0 : onTerrainChange(mesh);
     }, [onTerrainChange]);
-    const generateNoise = we.useCallback((octaves = 6, persistence = 0.5, lacunarity = 2.0) => {
+    const generateNoise = ke.useCallback((octaves = 6, persistence = 0.5, lacunarity = 2.0) => {
         const mesh = terrainRef.current;
         if (!mesh)
             return;
@@ -230,7 +230,7 @@ function useTerrainEditor(scene, camera, canvas, config = { width: 100, depth: 1
         mesh.geometry.computeVertexNormals();
         onTerrainChange === null || onTerrainChange === void 0 ? void 0 : onTerrainChange(mesh);
     }, [config, onTerrainChange]);
-    const importHeightmap = we.useCallback((image) => {
+    const importHeightmap = ke.useCallback((image) => {
         const mesh = terrainRef.current;
         if (!mesh)
             return;
@@ -257,7 +257,7 @@ function useTerrainEditor(scene, camera, canvas, config = { width: 100, depth: 1
         mesh.geometry.computeVertexNormals();
         onTerrainChange === null || onTerrainChange === void 0 ? void 0 : onTerrainChange(mesh);
     }, [config, onTerrainChange]);
-    const exportHeightmap = we.useCallback(() => {
+    const exportHeightmap = ke.useCallback(() => {
         const mesh = terrainRef.current;
         if (!mesh)
             return null;
@@ -290,7 +290,7 @@ function useTerrainEditor(scene, camera, canvas, config = { width: 100, depth: 1
         ctx.putImageData(imageData, 0, 0);
         return exportCanvas;
     }, [config.segments]);
-    const setTextureLayer = we.useCallback((index, partial) => {
+    const setTextureLayer = ke.useCallback((index, partial) => {
         setTextureLayers((prev) => prev.map((l, i) => (i === index ? { ...l, ...partial } : l)));
     }, []);
     return {
@@ -320,8 +320,8 @@ const NiceTerrainEditor = ({ scene, camera, canvas, config: configProp, onTerrai
         ...configProp,
     };
     const { brush, setBrush, isPainting, startPainting, stopPainting, generateFlat, generateNoise, exportHeightmap, textureLayers, setTextureLayer, activeTextureLayer, setActiveTextureLayer, } = useTerrainEditor(scene, camera, canvas, config, onTerrainChange);
-    const [noiseOctaves, setNoiseOctaves] = we.useState(6);
-    const [noisePersistence, setNoisePersistence] = we.useState(0.5);
+    const [noiseOctaves, setNoiseOctaves] = ke.useState(6);
+    const [noisePersistence, setNoisePersistence] = ke.useState(0.5);
     return (jsxRuntime.jsxs("div", { className: `nice-terrain-editor ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxRuntime.jsx("strong", { children: "Terrain Editor" }), jsxRuntime.jsxs("fieldset", { style: { border: '1px solid var(--border, #e2e8f0)', borderRadius: 6, padding: 4, display: 'flex', flexWrap: 'wrap', gap: 2 }, children: [jsxRuntime.jsx("legend", { style: { fontSize: 11 }, children: "Brush" }), ['raise', 'lower', 'flatten', 'smooth', 'noise', 'paint'].map((m) => (jsxRuntime.jsx("button", { type: "button", onClick: () => setBrush({ mode: m }), style: {
                             padding: '3px 6px', fontSize: 11, cursor: 'pointer', borderRadius: 4,
                             border: '1px solid var(--border, #e2e8f0)',

package/dist/cjs/model/NiceWeightPainter.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);
@@ -42,22 +42,22 @@ function getFalloff(distance, radius, type) {
 /* ── Hook ── */
 function useWeightPainter(skinnedMesh, scene, camera, canvas, onWeightsChange) {
     var _a, _b;
-    const [brush, setBrushState] = we.useState({
+    const [brush, setBrushState] = ke.useState({
         radius: 0.5,
         strength: 0.5,
         falloff: 'smooth',
         mode: 'add',
     });
-    const [isPainting, setIsPainting] = we.useState(false);
-    const [activeBoneIndex, setActiveBoneIndex] = we.useState(0);
-    const [showHeatMap, setShowHeatMap] = we.useState(true);
-    const raycaster = we.useRef(new THREE__namespace.Raycaster());
-    const heatMapMaterial = we.useRef(null);
-    const originalMaterial = we.useRef(null);
+    const [isPainting, setIsPainting] = ke.useState(false);
+    const [activeBoneIndex, setActiveBoneIndex] = ke.useState(0);
+    const [showHeatMap, setShowHeatMap] = ke.useState(true);
+    const raycaster = ke.useRef(new THREE__namespace.Raycaster());
+    const heatMapMaterial = ke.useRef(null);
+    const originalMaterial = ke.useRef(null);
     // Get bone names from skeleton
     const boneNames = (_b = (_a = skinnedMesh === null || skinnedMesh === void 0 ? void 0 : skinnedMesh.skeleton) === null || _a === void 0 ? void 0 : _a.bones.map((b, i) => b.name || `Bone ${i}`)) !== null && _b !== void 0 ? _b : [];
     // Create heat map overlay material
-    we.useEffect(() => {
+    ke.useEffect(() => {
         if (!skinnedMesh || !showHeatMap)
             return;
         originalMaterial.current = skinnedMesh.material;
@@ -91,10 +91,10 @@ function useWeightPainter(skinnedMesh, scene, camera, canvas, onWeightsChange) {
             mat.dispose();
         };
     }, [skinnedMesh, showHeatMap, activeBoneIndex]);
-    const setBrush = we.useCallback((partial) => {
+    const setBrush = ke.useCallback((partial) => {
         setBrushState((prev) => ({ ...prev, ...partial }));
     }, []);
-    const paintAtPoint = we.useCallback((point) => {
+    const paintAtPoint = ke.useCallback((point) => {
         if (!skinnedMesh)
             return;
         const geometry = skinnedMesh.geometry;
@@ -168,7 +168,7 @@ function useWeightPainter(skinnedMesh, scene, camera, canvas, onWeightsChange) {
         onWeightsChange === null || onWeightsChange === void 0 ? void 0 : onWeightsChange(skinnedMesh);
     }, [skinnedMesh, brush, activeBoneIndex, showHeatMap, onWeightsChange]);
     // Mouse event handlers
-    we.useEffect(() => {
+    ke.useEffect(() => {
         if (!canvas || !camera || !isPainting || !skinnedMesh)
             return;
         const onMouseMove = (e) => {
@@ -183,7 +183,7 @@ function useWeightPainter(skinnedMesh, scene, camera, canvas, onWeightsChange) {
         canvas.addEventListener('mousemove', onMouseMove);
         return () => canvas.removeEventListener('mousemove', onMouseMove);
     }, [canvas, camera, isPainting, skinnedMesh, paintAtPoint]);
-    const normalizeWeights = we.useCallback(() => {
+    const normalizeWeights = ke.useCallback(() => {
         if (!skinnedMesh)
             return;
         const skinWeightAttr = skinnedMesh.geometry.attributes.skinWeight;
@@ -238,7 +238,7 @@ function updateHeatMapColors(mesh, boneIndex, colors) {
 /* ── Component ── */
 const NiceWeightPainter = ({ skinnedMesh, activeBoneIndex: initialBoneIndex, scene, camera, canvas, onWeightsChange, className = '', }) => {
     const { brush, setBrush, isPainting, activeBoneIndex, setActiveBoneIndex, boneNames, startPainting, stopPainting, normalizeWeights, showHeatMap, setShowHeatMap, } = useWeightPainter(skinnedMesh, scene, camera, canvas, onWeightsChange);
-    we.useEffect(() => {
+    ke.useEffect(() => {
         setActiveBoneIndex(initialBoneIndex);
     }, [initialBoneIndex, setActiveBoneIndex]);
     return (jsxRuntime.jsxs("div", { className: `nice-weight-painter ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxRuntime.jsxs("label", { children: ["Bone:", jsxRuntime.jsx("select", { value: activeBoneIndex, onChange: (e) => setActiveBoneIndex(parseInt(e.target.value, 10)), style: { marginLeft: 8, width: '100%' }, children: boneNames.map((name, i) => (jsxRuntime.jsx("option", { value: i, children: name }, i))) })] }), jsxRuntime.jsxs("fieldset", { style: { display: 'flex', gap: 4, border: '1px solid var(--border, #e2e8f0)', borderRadius: 6, padding: 4 }, children: [jsxRuntime.jsx("legend", { style: { fontSize: 11 }, children: "Mode" }), ['add', 'subtract', 'smooth', 'blur'].map((mode) => (jsxRuntime.jsx("button", { type: "button", onClick: () => setBrush({ mode }), style: {

package/dist/cjs/model/NiceXRPreview.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,19 +25,19 @@ var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
 
 /* ── Hook ── */
 function useXRPreview(renderer, scene, camera, onSessionStart, onSessionEnd) {
-    const [isSupported, setIsSupported] = we.useState(false);
-    const [isSessionActive, setIsSessionActive] = we.useState(false);
-    const [mode, setMode] = we.useState('vr');
-    const [controllers, setControllers] = we.useState([]);
-    const [teleportEnabled, setTeleportEnabled] = we.useState(true);
-    const [hitTestResult, setHitTestResult] = we.useState(null);
-    const controllerGripsRef = we.useRef([]);
-    const controllerRaysRef = we.useRef([]);
-    const teleportMarkerRef = we.useRef(null);
-    const hitTestSourceRef = we.useRef(null);
-    const cameraGroupRef = we.useRef(new THREE__namespace.Group());
+    const [isSupported, setIsSupported] = ke.useState(false);
+    const [isSessionActive, setIsSessionActive] = ke.useState(false);
+    const [mode, setMode] = ke.useState('vr');
+    const [controllers, setControllers] = ke.useState([]);
+    const [teleportEnabled, setTeleportEnabled] = ke.useState(true);
+    const [hitTestResult, setHitTestResult] = ke.useState(null);
+    const controllerGripsRef = ke.useRef([]);
+    const controllerRaysRef = ke.useRef([]);
+    const teleportMarkerRef = ke.useRef(null);
+    const hitTestSourceRef = ke.useRef(null);
+    const cameraGroupRef = ke.useRef(new THREE__namespace.Group());
     // Check WebXR support
-    we.useEffect(() => {
+    ke.useEffect(() => {
         if ('xr' in navigator) {
             const xr = navigator.xr;
             xr.isSessionSupported('immersive-vr').then((vr) => {
@@ -52,7 +52,7 @@ function useXRPreview(renderer, scene, camera, onSessionStart, onSessionEnd) {
         }
     }, []);
     // Setup camera rig
-    we.useEffect(() => {
+    ke.useEffect(() => {
         if (!scene || !camera)
             return;
         cameraGroupRef.current.name = '__xr_camera_rig__';
@@ -63,7 +63,7 @@ function useXRPreview(renderer, scene, camera, onSessionStart, onSessionEnd) {
             scene.remove(cameraGroupRef.current);
         };
     }, [scene, camera]);
-    const setupControllers = we.useCallback(() => {
+    const setupControllers = ke.useCallback(() => {
         if (!renderer || !scene)
             return;
         for (let i = 0; i < 2; i++) {
@@ -134,7 +134,7 @@ function useXRPreview(renderer, scene, camera, onSessionStart, onSessionEnd) {
             { hand: 'right', position: new THREE__namespace.Vector3(), rotation: new THREE__namespace.Quaternion(), isSelecting: false, isSqueezing: false, gamepad: null },
         ]);
     }, [renderer, scene, teleportEnabled]);
-    const startSession = we.useCallback(async () => {
+    const startSession = ke.useCallback(async () => {
         if (!renderer || !isSupported)
             return;
         const xr = navigator.xr;
@@ -222,7 +222,7 @@ function useXRPreview(renderer, scene, camera, onSessionStart, onSessionEnd) {
             console.warn('Failed to start XR session:', err);
         }
     }, [renderer, isSupported, mode, setupControllers, onSessionStart, onSessionEnd, scene, camera, teleportEnabled]);
-    const endSession = we.useCallback(() => {
+    const endSession = ke.useCallback(() => {
         if (!renderer)
             return;
         const session = renderer.xr.getSession();
@@ -244,7 +244,7 @@ function useXRPreview(renderer, scene, camera, onSessionStart, onSessionEnd) {
 /* ── Component ── */
 const NiceXRPreview = ({ renderer, scene, camera, mode: initialMode, onSessionStart, onSessionEnd, className = '', }) => {
     const { isSupported, isSessionActive, mode, setMode, startSession, endSession, controllers, teleportEnabled, setTeleportEnabled, hitTestResult, } = useXRPreview(renderer, scene, camera, onSessionStart, onSessionEnd);
-    we.useEffect(() => {
+    ke.useEffect(() => {
         if (initialMode)
             setMode(initialMode);
     }, [initialMode, setMode]);