@nice2dev/ui-3d 1.3.14 → 1.3.16

package/dist/cjs/model/NiceWeightPainter.js

@@ -1,284 +1,407 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var ui = require('@nice2dev/ui');
-var React = require('react');
-var THREE = require('three');
-var i18n = require('../core/i18n.js');
-
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const ui = require("@nice2dev/ui");
+const React = require("react");
+const THREE = require("three");
+const i18n = require("../core/i18n.js");
 function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
         });
+      }
     }
-    n.default = e;
-    return Object.freeze(n);
+  }
+  n.default = e;
+  return Object.freeze(n);
 }
-
-var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
-
-/* ── Weight painting utilities ── */
+const THREE__namespace = /* @__PURE__ */ _interopNamespaceDefault(THREE);
 function getFalloff(distance, radius, type) {
-    const t = Math.min(distance / radius, 1);
-    switch (type) {
-        case 'constant':
-            return 1;
-        case 'linear':
-            return 1 - t;
-        case 'smooth':
-            return 1 - t * t * (3 - 2 * t); // smoothstep
-        case 'sharp':
-            return Math.pow(1 - t, 3);
-        default:
-            return 1 - t;
-    }
+  const t = Math.min(distance / radius, 1);
+  switch (type) {
+    case "constant":
+      return 1;
+    case "linear":
+      return 1 - t;
+    case "smooth":
+      return 1 - t * t * (3 - 2 * t);
+    // smoothstep
+    case "sharp":
+      return Math.pow(1 - t, 3);
+    default:
+      return 1 - t;
+  }
 }
-/* ── Hook ── */
 function useWeightPainter(skinnedMesh, scene, camera, canvas, onWeightsChange) {
-    var _a, _b;
-    const [brush, setBrushState] = React.useState({
-        radius: 0.5,
-        strength: 0.5,
-        falloff: 'smooth',
-        mode: 'add',
-    });
-    const [isPainting, setIsPainting] = React.useState(false);
-    const [activeBoneIndex, setActiveBoneIndex] = React.useState(0);
-    const [showHeatMap, setShowHeatMap] = React.useState(true);
-    const raycaster = React.useRef(new THREE__namespace.Raycaster());
-    const heatMapMaterial = React.useRef(null);
-    const originalMaterial = React.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
-    React.useEffect(() => {
-        if (!skinnedMesh || !showHeatMap) {
-            return;
+  const [brush, setBrushState] = React.useState({
+    radius: 0.5,
+    strength: 0.5,
+    falloff: "smooth",
+    mode: "add"
+  });
+  const [isPainting, setIsPainting] = React.useState(false);
+  const [activeBoneIndex, setActiveBoneIndex] = React.useState(0);
+  const [showHeatMap, setShowHeatMap] = React.useState(true);
+  const raycaster = React.useRef(new THREE__namespace.Raycaster());
+  const heatMapMaterial = React.useRef(null);
+  const originalMaterial = React.useRef(null);
+  const boneNames = skinnedMesh?.skeleton?.bones.map((b, i) => b.name || `Bone ${i}`) ?? [];
+  React.useEffect(() => {
+    if (!skinnedMesh || !showHeatMap) {
+      return;
+    }
+    originalMaterial.current = skinnedMesh.material;
+    const weightColors = new Float32Array(skinnedMesh.geometry.attributes.position.count * 3);
+    updateHeatMapColors(skinnedMesh, activeBoneIndex, weightColors);
+    skinnedMesh.geometry.setAttribute("weightColor", new THREE__namespace.BufferAttribute(weightColors, 3));
+    const mat = new THREE__namespace.ShaderMaterial({
+      vertexShader: `
+        attribute vec3 weightColor;
+        varying vec3 vColor;
+        void main() {
+          vColor = weightColor;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
         }
-        originalMaterial.current = skinnedMesh.material;
-        const weightColors = new Float32Array(skinnedMesh.geometry.attributes.position.count * 3);
-        updateHeatMapColors(skinnedMesh, activeBoneIndex, weightColors);
-        skinnedMesh.geometry.setAttribute('weightColor', new THREE__namespace.BufferAttribute(weightColors, 3));
-        const mat = new THREE__namespace.ShaderMaterial({
-            vertexShader: `
-        attribute vec3 weightColor;
-        varying vec3 vColor;
-        void main() {
-          vColor = weightColor;
-          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-        }
-      `,
-            fragmentShader: `
-        varying vec3 vColor;
-        void main() {
-          gl_FragColor = vec4(vColor, 1.0);
-        }
       `,
-            side: THREE__namespace.DoubleSide,
-        });
-        heatMapMaterial.current = mat;
-        skinnedMesh.material = mat;
-        return () => {
-            if (originalMaterial.current) {
-                skinnedMesh.material = originalMaterial.current;
-            }
-            skinnedMesh.geometry.deleteAttribute('weightColor');
-            mat.dispose();
-        };
-    }, [skinnedMesh, showHeatMap, activeBoneIndex]);
-    const setBrush = React.useCallback((partial) => {
-        setBrushState((prev) => ({ ...prev, ...partial }));
-    }, []);
-    const paintAtPoint = React.useCallback((point) => {
-        if (!skinnedMesh) {
-            return;
-        }
-        const geometry = skinnedMesh.geometry;
-        const posAttr = geometry.attributes.position;
-        const skinWeightAttr = geometry.attributes.skinWeight;
-        const skinIndexAttr = geometry.attributes.skinIndex;
-        if (!skinWeightAttr || !skinIndexAttr) {
-            return;
+      fragmentShader: `
+        varying vec3 vColor;
+        void main() {
+          gl_FragColor = vec4(vColor, 1.0);
         }
-        const vertex = new THREE__namespace.Vector3();
-        for (let i = 0; i < posAttr.count; i++) {
-            vertex.fromBufferAttribute(posAttr, i);
-            skinnedMesh.localToWorld(vertex);
-            const dist = vertex.distanceTo(point);
-            if (dist > brush.radius) {
-                continue;
-            }
-            const influence = getFalloff(dist, brush.radius, brush.falloff) * brush.strength;
-            // Get current skin weights for this vertex
-            const weights = new THREE__namespace.Vector4().fromBufferAttribute(skinWeightAttr, i);
-            const indices = new THREE__namespace.Vector4().fromBufferAttribute(skinIndexAttr, i);
-            // Find which component (x/y/z/w) has our bone index
-            const components = [indices.x, indices.y, indices.z, indices.w];
-            let slot = components.indexOf(activeBoneIndex);
-            // If bone not assigned to this vertex, find an empty or lowest-weight slot
-            if (slot === -1) {
-                const weightArr = [weights.x, weights.y, weights.z, weights.w];
-                slot = weightArr.indexOf(Math.min(...weightArr));
-                // Set the bone index in that slot
-                const compKey = ['x', 'y', 'z', 'w'][slot];
-                indices[compKey] = activeBoneIndex;
-                skinIndexAttr.setXYZW(i, indices.x, indices.y, indices.z, indices.w);
-            }
-            const compKey = ['x', 'y', 'z', 'w'][slot];
-            let currentWeight = weights[compKey];
-            switch (brush.mode) {
-                case 'add':
-                    currentWeight = Math.min(1, currentWeight + influence);
-                    break;
-                case 'subtract':
-                    currentWeight = Math.max(0, currentWeight - influence);
-                    break;
-                case 'smooth': {
-                    // Average with neighbors — simplified: move toward 0.5
-                    currentWeight = currentWeight + (0.5 - currentWeight) * influence;
-                    break;
-                }
-                case 'blur': {
-                    currentWeight = currentWeight * (1 - influence * 0.5);
-                    break;
-                }
-            }
-            weights[compKey] = currentWeight;
-            // Normalize weights so they sum to 1
-            const total = weights.x + weights.y + weights.z + weights.w;
-            if (total > 0) {
-                weights.divideScalar(total);
-            }
-            skinWeightAttr.setXYZW(i, weights.x, weights.y, weights.z, weights.w);
-        }
-        skinWeightAttr.needsUpdate = true;
-        skinIndexAttr.needsUpdate = true;
-        // Update heat map if shown
-        if (showHeatMap && heatMapMaterial.current) {
-            const colorAttr = geometry.attributes.weightColor;
-            if (colorAttr) {
-                const colors = new Float32Array(posAttr.count * 3);
-                updateHeatMapColors(skinnedMesh, activeBoneIndex, colors);
-                colorAttr.set(colors);
-                colorAttr.needsUpdate = true;
-            }
+      `,
+      side: THREE__namespace.DoubleSide
+    });
+    heatMapMaterial.current = mat;
+    skinnedMesh.material = mat;
+    return () => {
+      if (originalMaterial.current) {
+        skinnedMesh.material = originalMaterial.current;
+      }
+      skinnedMesh.geometry.deleteAttribute("weightColor");
+      mat.dispose();
+    };
+  }, [skinnedMesh, showHeatMap, activeBoneIndex]);
+  const setBrush = React.useCallback((partial) => {
+    setBrushState((prev) => ({ ...prev, ...partial }));
+  }, []);
+  const paintAtPoint = React.useCallback(
+    (point) => {
+      if (!skinnedMesh) {
+        return;
+      }
+      const geometry = skinnedMesh.geometry;
+      const posAttr = geometry.attributes.position;
+      const skinWeightAttr = geometry.attributes.skinWeight;
+      const skinIndexAttr = geometry.attributes.skinIndex;
+      if (!skinWeightAttr || !skinIndexAttr) {
+        return;
+      }
+      const vertex = new THREE__namespace.Vector3();
+      for (let i = 0; i < posAttr.count; i++) {
+        vertex.fromBufferAttribute(posAttr, i);
+        skinnedMesh.localToWorld(vertex);
+        const dist = vertex.distanceTo(point);
+        if (dist > brush.radius) {
+          continue;
         }
-        onWeightsChange === null || onWeightsChange === void 0 ? void 0 : onWeightsChange(skinnedMesh);
-    }, [skinnedMesh, brush, activeBoneIndex, showHeatMap, onWeightsChange]);
-    // Mouse event handlers
-    React.useEffect(() => {
-        if (!canvas || !camera || !isPainting || !skinnedMesh) {
-            return;
+        const influence = getFalloff(dist, brush.radius, brush.falloff) * brush.strength;
+        const weights = new THREE__namespace.Vector4().fromBufferAttribute(skinWeightAttr, i);
+        const indices = new THREE__namespace.Vector4().fromBufferAttribute(skinIndexAttr, i);
+        const components = [indices.x, indices.y, indices.z, indices.w];
+        let slot = components.indexOf(activeBoneIndex);
+        if (slot === -1) {
+          const weightArr = [weights.x, weights.y, weights.z, weights.w];
+          slot = weightArr.indexOf(Math.min(...weightArr));
+          const compKey2 = ["x", "y", "z", "w"][slot];
+          indices[compKey2] = activeBoneIndex;
+          skinIndexAttr.setXYZW(i, indices.x, indices.y, indices.z, indices.w);
         }
-        const onMouseMove = (e) => {
-            const rect = canvas.getBoundingClientRect();
-            const mouse = new THREE__namespace.Vector2(((e.clientX - rect.left) / rect.width) * 2 - 1, -((e.clientY - rect.top) / rect.height) * 2 + 1);
-            raycaster.current.setFromCamera(mouse, camera);
-            const intersects = raycaster.current.intersectObject(skinnedMesh);
-            if (intersects.length > 0) {
-                paintAtPoint(intersects[0].point);
-            }
-        };
-        canvas.addEventListener('mousemove', onMouseMove);
-        return () => canvas.removeEventListener('mousemove', onMouseMove);
-    }, [canvas, camera, isPainting, skinnedMesh, paintAtPoint]);
-    const normalizeWeights = React.useCallback(() => {
-        if (!skinnedMesh) {
-            return;
+        const compKey = ["x", "y", "z", "w"][slot];
+        let currentWeight = weights[compKey];
+        switch (brush.mode) {
+          case "add":
+            currentWeight = Math.min(1, currentWeight + influence);
+            break;
+          case "subtract":
+            currentWeight = Math.max(0, currentWeight - influence);
+            break;
+          case "smooth": {
+            currentWeight = currentWeight + (0.5 - currentWeight) * influence;
+            break;
+          }
+          case "blur": {
+            currentWeight = currentWeight * (1 - influence * 0.5);
+            break;
+          }
         }
-        const skinWeightAttr = skinnedMesh.geometry.attributes.skinWeight;
-        if (!skinWeightAttr) {
-            return;
+        weights[compKey] = currentWeight;
+        const total = weights.x + weights.y + weights.z + weights.w;
+        if (total > 0) {
+          weights.divideScalar(total);
         }
-        for (let i = 0; i < skinWeightAttr.count; i++) {
-            const w = new THREE__namespace.Vector4().fromBufferAttribute(skinWeightAttr, i);
-            const total = w.x + w.y + w.z + w.w;
-            if (total > 0) {
-                w.divideScalar(total);
-                skinWeightAttr.setXYZW(i, w.x, w.y, w.z, w.w);
-            }
+        skinWeightAttr.setXYZW(i, weights.x, weights.y, weights.z, weights.w);
+      }
+      skinWeightAttr.needsUpdate = true;
+      skinIndexAttr.needsUpdate = true;
+      if (showHeatMap && heatMapMaterial.current) {
+        const colorAttr = geometry.attributes.weightColor;
+        if (colorAttr) {
+          const colors = new Float32Array(posAttr.count * 3);
+          updateHeatMapColors(skinnedMesh, activeBoneIndex, colors);
+          colorAttr.set(colors);
+          colorAttr.needsUpdate = true;
         }
-        skinWeightAttr.needsUpdate = true;
-    }, [skinnedMesh]);
-    return {
-        brush,
-        setBrush,
-        isPainting,
-        activeBoneIndex,
-        setActiveBoneIndex,
-        boneNames,
-        startPainting: () => setIsPainting(true),
-        stopPainting: () => setIsPainting(false),
-        normalizeWeights,
-        showHeatMap,
-        setShowHeatMap,
+      }
+      onWeightsChange?.(skinnedMesh);
+    },
+    [skinnedMesh, brush, activeBoneIndex, showHeatMap, onWeightsChange]
+  );
+  React.useEffect(() => {
+    if (!canvas || !camera || !isPainting || !skinnedMesh) {
+      return;
+    }
+    const onMouseMove = (e) => {
+      const rect = canvas.getBoundingClientRect();
+      const mouse = new THREE__namespace.Vector2(
+        (e.clientX - rect.left) / rect.width * 2 - 1,
+        -((e.clientY - rect.top) / rect.height) * 2 + 1
+      );
+      raycaster.current.setFromCamera(mouse, camera);
+      const intersects = raycaster.current.intersectObject(skinnedMesh);
+      if (intersects.length > 0) {
+        paintAtPoint(intersects[0].point);
+      }
     };
-}
-/* ── Helpers ── */
-function updateHeatMapColors(mesh, boneIndex, colors) {
-    const skinWeightAttr = mesh.geometry.attributes.skinWeight;
-    const skinIndexAttr = mesh.geometry.attributes.skinIndex;
-    if (!skinWeightAttr || !skinIndexAttr) {
-        return;
+    canvas.addEventListener("mousemove", onMouseMove);
+    return () => canvas.removeEventListener("mousemove", onMouseMove);
+  }, [canvas, camera, isPainting, skinnedMesh, paintAtPoint]);
+  const normalizeWeights = React.useCallback(() => {
+    if (!skinnedMesh) {
+      return;
+    }
+    const skinWeightAttr = skinnedMesh.geometry.attributes.skinWeight;
+    if (!skinWeightAttr) {
+      return;
     }
     for (let i = 0; i < skinWeightAttr.count; i++) {
-        const indices = new THREE__namespace.Vector4().fromBufferAttribute(skinIndexAttr, i);
-        const weights = new THREE__namespace.Vector4().fromBufferAttribute(skinWeightAttr, i);
-        const components = [indices.x, indices.y, indices.z, indices.w];
-        const weightArr = [weights.x, weights.y, weights.z, weights.w];
-        const slot = components.indexOf(boneIndex);
-        const weight = slot >= 0 ? weightArr[slot] : 0;
-        // Blue → Green → Red heat map
-        const r = Math.min(1, weight * 2);
-        const g = weight < 0.5 ? weight * 2 : 2 - weight * 2;
-        const b = Math.max(0, 1 - weight * 2);
-        colors[i * 3] = r;
-        colors[i * 3 + 1] = g;
-        colors[i * 3 + 2] = b;
+      const w = new THREE__namespace.Vector4().fromBufferAttribute(skinWeightAttr, i);
+      const total = w.x + w.y + w.z + w.w;
+      if (total > 0) {
+        w.divideScalar(total);
+        skinWeightAttr.setXYZW(i, w.x, w.y, w.z, w.w);
+      }
     }
+    skinWeightAttr.needsUpdate = true;
+  }, [skinnedMesh]);
+  return {
+    brush,
+    setBrush,
+    isPainting,
+    activeBoneIndex,
+    setActiveBoneIndex,
+    boneNames,
+    startPainting: () => setIsPainting(true),
+    stopPainting: () => setIsPainting(false),
+    normalizeWeights,
+    showHeatMap,
+    setShowHeatMap
+  };
+}
+function updateHeatMapColors(mesh, boneIndex, colors) {
+  const skinWeightAttr = mesh.geometry.attributes.skinWeight;
+  const skinIndexAttr = mesh.geometry.attributes.skinIndex;
+  if (!skinWeightAttr || !skinIndexAttr) {
+    return;
+  }
+  for (let i = 0; i < skinWeightAttr.count; i++) {
+    const indices = new THREE__namespace.Vector4().fromBufferAttribute(skinIndexAttr, i);
+    const weights = new THREE__namespace.Vector4().fromBufferAttribute(skinWeightAttr, i);
+    const components = [indices.x, indices.y, indices.z, indices.w];
+    const weightArr = [weights.x, weights.y, weights.z, weights.w];
+    const slot = components.indexOf(boneIndex);
+    const weight = slot >= 0 ? weightArr[slot] : 0;
+    const r = Math.min(1, weight * 2);
+    const g = weight < 0.5 ? weight * 2 : 2 - weight * 2;
+    const b = Math.max(0, 1 - weight * 2);
+    colors[i * 3] = r;
+    colors[i * 3 + 1] = g;
+    colors[i * 3 + 2] = b;
+  }
 }
-/* ── Component ── */
-const NiceWeightPainter = ({ skinnedMesh, activeBoneIndex: initialBoneIndex, scene, camera, canvas, onWeightsChange, className = '', }) => {
-    const { t } = i18n.useNiceTranslation();
-    const { brush, setBrush, isPainting, activeBoneIndex, setActiveBoneIndex, boneNames, startPainting, stopPainting, normalizeWeights, showHeatMap, setShowHeatMap, } = useWeightPainter(skinnedMesh, scene, camera, canvas, onWeightsChange);
-    React.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: [t('weightPainter.bone', '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(--nice-border, #e2e8f0)',
-                    borderRadius: 6,
-                    padding: 4,
-                }, children: [jsxRuntime.jsx("legend", { style: { fontSize: 11 }, children: t('weightPainter.mode', 'Mode') }), ['add', 'subtract', 'smooth', 'blur'].map((mode) => (jsxRuntime.jsx("button", { type: "button", onClick: () => setBrush({ mode }), style: {
-                            flex: 1,
-                            padding: '4px 6px',
-                            background: brush.mode === mode ? 'var(--nice-color-accent, #6366f1)' : 'transparent',
-                            color: brush.mode === mode ? 'var(--nice-color-white, #fff)' : 'inherit',
-                            border: '1px solid var(--nice-border, #e2e8f0)',
-                            borderRadius: 4,
-                            cursor: 'pointer',
-                            fontSize: 11,
-                        }, children: mode }, mode)))] }), jsxRuntime.jsxs("label", { children: [t('weightPainter.radius', 'Radius: {radius}').replace('{radius}', String(brush.radius.toFixed(2))), jsxRuntime.jsx("input", { type: "range", min: 0.05, max: 2, step: 0.05, value: brush.radius, onChange: (e) => setBrush({ radius: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: [t('weightPainter.strength', 'Strength: {strength}').replace('{strength}', String(brush.strength.toFixed(2))), jsxRuntime.jsx("input", { type: "range", min: 0.01, max: 1, step: 0.01, value: brush.strength, onChange: (e) => setBrush({ strength: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 4 }, children: [jsxRuntime.jsx("button", { type: "button", onClick: isPainting ? stopPainting : startPainting, style: {
-                            flex: 1,
-                            background: isPainting
-                                ? 'var(--nice-danger, #ef4444)'
-                                : 'var(--nice-color-accent, #6366f1)',
-                            color: 'var(--nice-color-white, #fff)',
-                            border: 'none',
-                            borderRadius: 4,
-                            padding: '6px 12px',
-                            cursor: 'pointer',
-                        }, children: isPainting ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ui.NiceIcon, { name: "stop", size: 14 }), " ", t('weightPainter.stopPainting', 'Stop Painting')] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ui.NiceIcon, { name: "brush", size: 14 }), ' ', t('weightPainter.startPainting', 'Start Painting')] })) }), jsxRuntime.jsxs("button", { type: "button", onClick: normalizeWeights, title: t('weightPainter.normalizeAllWeights', 'Normalize all weights'), children: [jsxRuntime.jsx(ui.NiceIcon, { name: "scale", size: 14 }), " ", t('weightPainter.normalize', 'Normalize')] })] }), jsxRuntime.jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showHeatMap, onChange: (e) => setShowHeatMap(e.target.checked) }), t('weightPainter.showWeightHeatMap', 'Show weight heat map')] })] }));
+const NiceWeightPainter = ({
+  skinnedMesh,
+  activeBoneIndex: initialBoneIndex,
+  scene,
+  camera,
+  canvas,
+  onWeightsChange,
+  className = ""
+}) => {
+  const { t } = i18n.useNiceTranslation();
+  const {
+    brush,
+    setBrush,
+    isPainting,
+    activeBoneIndex,
+    setActiveBoneIndex,
+    boneNames,
+    startPainting,
+    stopPainting,
+    normalizeWeights,
+    showHeatMap,
+    setShowHeatMap
+  } = useWeightPainter(skinnedMesh, scene, camera, canvas, onWeightsChange);
+  React.useEffect(() => {
+    setActiveBoneIndex(initialBoneIndex);
+  }, [initialBoneIndex, setActiveBoneIndex]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `nice-weight-painter ${className}`,
+      style: { display: "grid", gap: 8, fontSize: 13 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          t("weightPainter.bone", "Bone:"),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              value: activeBoneIndex,
+              onChange: (e) => setActiveBoneIndex(parseInt(e.target.value, 10)),
+              style: { marginLeft: 8, width: "100%" },
+              children: boneNames.map((name, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: i, children: name }, i))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "fieldset",
+          {
+            style: {
+              display: "flex",
+              gap: 4,
+              border: "1px solid var(--nice-border, #e2e8f0)",
+              borderRadius: 6,
+              padding: 4
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("legend", { style: { fontSize: 11 }, children: t("weightPainter.mode", "Mode") }),
+              ["add", "subtract", "smooth", "blur"].map((mode) => /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setBrush({ mode }),
+                  style: {
+                    flex: 1,
+                    padding: "4px 6px",
+                    background: brush.mode === mode ? "var(--nice-color-accent, #6366f1)" : "transparent",
+                    color: brush.mode === mode ? "var(--nice-color-white, #fff)" : "inherit",
+                    border: "1px solid var(--nice-border, #e2e8f0)",
+                    borderRadius: 4,
+                    cursor: "pointer",
+                    fontSize: 11
+                  },
+                  children: mode
+                },
+                mode
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          t("weightPainter.radius", "Radius: {radius}").replace(
+            "{radius}",
+            String(brush.radius.toFixed(2))
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "range",
+              min: 0.05,
+              max: 2,
+              step: 0.05,
+              value: brush.radius,
+              onChange: (e) => setBrush({ radius: parseFloat(e.target.value) }),
+              style: { width: "100%" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          t("weightPainter.strength", "Strength: {strength}").replace(
+            "{strength}",
+            String(brush.strength.toFixed(2))
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "range",
+              min: 0.01,
+              max: 1,
+              step: 0.01,
+              value: brush.strength,
+              onChange: (e) => setBrush({ strength: parseFloat(e.target.value) }),
+              style: { width: "100%" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 4 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: isPainting ? stopPainting : startPainting,
+              style: {
+                flex: 1,
+                background: isPainting ? "var(--nice-danger, #ef4444)" : "var(--nice-color-accent, #6366f1)",
+                color: "var(--nice-color-white, #fff)",
+                border: "none",
+                borderRadius: 4,
+                padding: "6px 12px",
+                cursor: "pointer"
+              },
+              children: isPainting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "stop", size: 14 }),
+                " ",
+                t("weightPainter.stopPainting", "Stop Painting")
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "brush", size: 14 }),
+                " ",
+                t("weightPainter.startPainting", "Start Painting")
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: normalizeWeights,
+              title: t("weightPainter.normalizeAllWeights", "Normalize all weights"),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "scale", size: 14 }),
+                " ",
+                t("weightPainter.normalize", "Normalize")
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: showHeatMap,
+              onChange: (e) => setShowHeatMap(e.target.checked)
+            }
+          ),
+          t("weightPainter.showWeightHeatMap", "Show weight heat map")
+        ] })
+      ]
+    }
+  );
 };
-
 exports.NiceWeightPainter = NiceWeightPainter;
 exports.useWeightPainter = useWeightPainter;