@nice2dev/ui-3d 1.3.15 → 1.3.16

package/dist/esm/model/NiceArmatureEditor.js

@@ -1,269 +1,473 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { NiceTutorialButton, resolveTutorial, NiceIcon, createId } from '@nice2dev/ui';
-import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
-import * as THREE from 'three';
-import { useNiceTranslation } from '../core/i18n.js';
-
-/** Built-in guided tour (EN inline + i18n keys → PL and other locales). */
+import { jsxs, jsx } from "react/jsx-runtime";
+import { NiceTutorialButton, resolveTutorial, NiceIcon, createId } from "@nice2dev/ui";
+import { useState, useMemo, useRef, useEffect, useCallback } from "react";
+import * as THREE from "three";
+import { useNiceTranslation } from "../core/i18n.js";
 const ARMATURE_EDITOR_TOUR = [
-    {
-        target: '.nice-armature-editor',
-        titleKey: 'tutorial.armatureEditor.intro.title',
-        title: 'Armature editor',
-        contentKey: 'tutorial.armatureEditor.intro.content',
-        content: 'Select bones to edit their transforms, add or reparent bones, configure IK chains, and save or load poses.',
-        placement: 'auto',
-    },
+  {
+    target: ".nice-armature-editor",
+    titleKey: "tutorial.armatureEditor.intro.title",
+    title: "Armature editor",
+    contentKey: "tutorial.armatureEditor.intro.content",
+    content: "Select bones to edit their transforms, add or reparent bones, configure IK chains, and save or load poses.",
+    placement: "auto"
+  }
 ];
 function useArmatureEditor(skeleton, scene, onBoneSelect) {
-    const [bones, setBones] = useState([]);
-    const [selectedBoneId, setSelectedBoneId] = useState(null);
-    const [savedPoses, setSavedPoses] = useState([]);
-    const helperRef = useRef(null);
-    // Build bone info tree from skeleton
-    useEffect(() => {
-        if (!skeleton) {
-            setBones([]);
-            return;
-        }
-        const boneInfos = skeleton.bones.map((bone) => ({
-            id: bone.uuid,
-            name: bone.name || `Bone_${bone.uuid.slice(0, 6)}`,
-            bone,
-            parentId: bone.parent instanceof THREE.Bone ? bone.parent.uuid : null,
-            children: bone.children
-                .filter((c) => c instanceof THREE.Bone)
-                .map((c) => c.uuid),
-            localPosition: bone.position.clone(),
-            localRotation: bone.rotation.clone(),
-            localScale: bone.scale.clone(),
-            length: bone.children.length > 0 ? bone.children[0].position.length() : 0.1,
-        }));
-        setBones(boneInfos);
-    }, [skeleton]);
-    // Create skeleton helper for visualization
-    useEffect(() => {
-        var _a;
-        if (!skeleton || !scene) {
-            return;
-        }
-        const rootBone = ((_a = skeleton.bones[0]) === null || _a === void 0 ? void 0 : _a.parent) || skeleton.bones[0];
-        if (!rootBone) {
-            return;
-        }
-        const helper = new THREE.SkeletonHelper(rootBone);
-        helper.material.linewidth = 2;
-        scene.add(helper);
-        helperRef.current = helper;
-        return () => {
-            scene.remove(helper);
-            helper.dispose();
-            helperRef.current = null;
-        };
-    }, [skeleton, scene]);
-    const selectBone = 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 = 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);
-            bone.updateMatrixWorld(true);
-            setBones((prev) => prev.map((b) => (b.id === id ? { ...b, localPosition: pos.clone() } : b)));
-        }
-    }, [skeleton]);
-    const setBoneRotation = 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);
-            bone.updateMatrixWorld(true);
-            setBones((prev) => prev.map((b) => (b.id === id ? { ...b, localRotation: rot.clone() } : b)));
+  const [bones, setBones] = useState([]);
+  const [selectedBoneId, setSelectedBoneId] = useState(null);
+  const [savedPoses, setSavedPoses] = useState([]);
+  const helperRef = useRef(null);
+  useEffect(() => {
+    if (!skeleton) {
+      setBones([]);
+      return;
+    }
+    const boneInfos = skeleton.bones.map((bone) => ({
+      id: bone.uuid,
+      name: bone.name || `Bone_${bone.uuid.slice(0, 6)}`,
+      bone,
+      parentId: bone.parent instanceof THREE.Bone ? bone.parent.uuid : null,
+      children: bone.children.filter((c) => c instanceof THREE.Bone).map((c) => c.uuid),
+      localPosition: bone.position.clone(),
+      localRotation: bone.rotation.clone(),
+      localScale: bone.scale.clone(),
+      length: bone.children.length > 0 ? bone.children[0].position.length() : 0.1
+    }));
+    setBones(boneInfos);
+  }, [skeleton]);
+  useEffect(() => {
+    if (!skeleton || !scene) {
+      return;
+    }
+    const rootBone = skeleton.bones[0]?.parent || skeleton.bones[0];
+    if (!rootBone) {
+      return;
+    }
+    const helper = new THREE.SkeletonHelper(rootBone);
+    helper.material.linewidth = 2;
+    scene.add(helper);
+    helperRef.current = helper;
+    return () => {
+      scene.remove(helper);
+      helper.dispose();
+      helperRef.current = null;
+    };
+  }, [skeleton, scene]);
+  const selectBone = useCallback(
+    (id) => {
+      setSelectedBoneId(id);
+      const bone = id ? skeleton?.bones.find((b) => b.uuid === id) || null : null;
+      onBoneSelect?.(bone);
+    },
+    [skeleton, onBoneSelect]
+  );
+  const setBonePosition = useCallback(
+    (id, pos) => {
+      const bone = skeleton?.bones.find((b) => b.uuid === id);
+      if (bone) {
+        bone.position.copy(pos);
+        bone.updateMatrixWorld(true);
+        setBones(
+          (prev) => prev.map((b) => b.id === id ? { ...b, localPosition: pos.clone() } : b)
+        );
+      }
+    },
+    [skeleton]
+  );
+  const setBoneRotation = useCallback(
+    (id, rot) => {
+      const bone = skeleton?.bones.find((b) => b.uuid === id);
+      if (bone) {
+        bone.rotation.copy(rot);
+        bone.updateMatrixWorld(true);
+        setBones(
+          (prev) => prev.map((b) => b.id === id ? { ...b, localRotation: rot.clone() } : b)
+        );
+      }
+    },
+    [skeleton]
+  );
+  const addBone = useCallback(
+    (parentId, name) => {
+      const parent = skeleton?.bones.find((b) => b.uuid === parentId);
+      const newBone = new THREE.Bone();
+      newBone.name = name;
+      newBone.position.set(0, 0.5, 0);
+      if (parent) {
+        parent.add(newBone);
+      }
+      if (skeleton) {
+        skeleton.bones.push(newBone);
+        skeleton.update();
+      }
+      const boneInfo = {
+        id: newBone.uuid,
+        name,
+        bone: newBone,
+        parentId,
+        children: [],
+        localPosition: newBone.position.clone(),
+        localRotation: newBone.rotation.clone(),
+        localScale: newBone.scale.clone(),
+        length: 0.5
+      };
+      setBones((prev) => [
+        ...prev.map(
+          (b) => b.id === parentId ? { ...b, children: [...b.children, newBone.uuid] } : b
+        ),
+        boneInfo
+      ]);
+      return newBone;
+    },
+    [skeleton]
+  );
+  const removeBone = useCallback(
+    (id) => {
+      const bone = skeleton?.bones.find((b) => b.uuid === id);
+      if (!bone) {
+        return;
+      }
+      bone.removeFromParent();
+      if (skeleton) {
+        const idx = skeleton.bones.indexOf(bone);
+        if (idx >= 0) {
+          skeleton.bones.splice(idx, 1);
         }
-    }, [skeleton]);
-    const addBone = useCallback((parentId, name) => {
-        const parent = skeleton === null || skeleton === void 0 ? void 0 : skeleton.bones.find((b) => b.uuid === parentId);
-        const newBone = new THREE.Bone();
-        newBone.name = name;
-        newBone.position.set(0, 0.5, 0);
-        if (parent) {
-            parent.add(newBone);
+        skeleton.update();
+      }
+      setBones(
+        (prev) => prev.filter((b) => b.id !== id).map((b) => ({
+          ...b,
+          children: b.children.filter((c) => c !== id)
+        }))
+      );
+      if (selectedBoneId === id) {
+        setSelectedBoneId(null);
+      }
+    },
+    [skeleton, selectedBoneId]
+  );
+  const savePose = useCallback(
+    (name) => {
+      const transforms = /* @__PURE__ */ new Map();
+      if (skeleton) {
+        for (const bone of skeleton.bones) {
+          transforms.set(bone.uuid, {
+            position: bone.position.toArray(),
+            rotation: [bone.rotation.x, bone.rotation.y, bone.rotation.z],
+            scale: bone.scale.toArray()
+          });
         }
-        if (skeleton) {
-            skeleton.bones.push(newBone);
-            skeleton.update();
+      }
+      const pose = {
+        id: createId(),
+        name,
+        timestamp: Date.now(),
+        boneTransforms: transforms
+      };
+      setSavedPoses((prev) => [...prev, pose]);
+      return pose;
+    },
+    [skeleton]
+  );
+  const loadPose = useCallback(
+    (pose) => {
+      if (!skeleton) {
+        return;
+      }
+      for (const bone of skeleton.bones) {
+        const transform = pose.boneTransforms.get(bone.uuid);
+        if (transform) {
+          bone.position.fromArray(transform.position);
+          bone.rotation.set(transform.rotation[0], transform.rotation[1], transform.rotation[2]);
+          bone.scale.fromArray(transform.scale);
         }
-        const boneInfo = {
-            id: newBone.uuid,
-            name,
-            bone: newBone,
-            parentId,
-            children: [],
-            localPosition: newBone.position.clone(),
-            localRotation: newBone.rotation.clone(),
-            localScale: newBone.scale.clone(),
-            length: 0.5,
-        };
-        setBones((prev) => [
-            ...prev.map((b) => b.id === parentId ? { ...b, children: [...b.children, newBone.uuid] } : b),
-            boneInfo,
-        ]);
-        return newBone;
-    }, [skeleton]);
-    const removeBone = useCallback((id) => {
-        const bone = skeleton === null || skeleton === void 0 ? void 0 : skeleton.bones.find((b) => b.uuid === id);
-        if (!bone) {
-            return;
+      }
+      skeleton.update();
+      setBones(
+        (prev) => prev.map((b) => ({
+          ...b,
+          localPosition: b.bone.position.clone(),
+          localRotation: b.bone.rotation.clone(),
+          localScale: b.bone.scale.clone()
+        }))
+      );
+    },
+    [skeleton]
+  );
+  const resetPose = useCallback(() => {
+    if (!skeleton) {
+      return;
+    }
+    for (const bone of skeleton.bones) {
+      bone.position.set(0, 0, 0);
+      bone.rotation.set(0, 0, 0);
+      bone.scale.set(1, 1, 1);
+    }
+    if (skeleton.boneInverses.length > 0) {
+      skeleton.pose();
+    }
+    skeleton.update();
+    setBones(
+      (prev) => prev.map((b) => ({
+        ...b,
+        localPosition: b.bone.position.clone(),
+        localRotation: b.bone.rotation.clone(),
+        localScale: b.bone.scale.clone()
+      }))
+    );
+  }, [skeleton]);
+  return {
+    bones,
+    selectedBoneId,
+    selectBone,
+    setBonePosition,
+    setBoneRotation,
+    addBone,
+    removeBone,
+    savePose,
+    loadPose,
+    resetPose,
+    savedPoses,
+    skeletonHelper: helperRef.current
+  };
+}
+const NiceArmatureEditor = ({
+  skeleton,
+  skinnedMesh: _skinnedMesh,
+  scene,
+  camera: _camera,
+  onBoneSelect,
+  onPoseChange: _onPoseChange,
+  className = "",
+  tutorial
+}) => {
+  const { t } = useNiceTranslation();
+  const {
+    bones,
+    selectedBoneId,
+    selectBone,
+    setBonePosition: _setBonePosition,
+    setBoneRotation,
+    addBone,
+    removeBone,
+    savePose,
+    loadPose,
+    resetPose,
+    savedPoses,
+    skeletonHelper: _skeletonHelper
+  } = useArmatureEditor(skeleton, scene, onBoneSelect);
+  const [newBoneName, setNewBoneName] = useState("");
+  const selectedBone = useMemo(
+    () => bones.find((b) => b.id === selectedBoneId),
+    [bones, selectedBoneId]
+  );
+  const rootBones = 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);
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onClick: () => selectBone(boneInfo.id),
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: (e) => e.key === "Enter" && selectBone(boneInfo.id),
+          style: {
+            padding: "4px 8px",
+            paddingLeft: depth * 16 + 8,
+            background: isSelected ? "var(--nice-color-accent, #6366f1)" : "transparent",
+            color: isSelected ? "var(--nice-color-white, #fff)" : "inherit",
+            cursor: "pointer",
+            fontSize: 13,
+            borderRadius: 4
+          },
+          children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "target", size: 14 }),
+            " ",
+            boneInfo.name
+          ]
         }
-        bone.removeFromParent();
-        if (skeleton) {
-            const idx = skeleton.bones.indexOf(bone);
-            if (idx >= 0) {
-                skeleton.bones.splice(idx, 1);
+      ),
+      childBones.map((child) => renderBoneTree(child, depth + 1))
+    ] }, boneInfo.id);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `nice-armature-editor ${className}`,
+      style: { position: "relative", display: "flex", flexDirection: "column", gap: 8 },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { position: "absolute", top: 0, right: 0, zIndex: 20 }, children: /* @__PURE__ */ jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, ARMATURE_EDITOR_TOUR) }) }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4 }, children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: resetPose,
+              title: t("armatureEditor.resetPose", "Reset Pose"),
+              children: [
+                /* @__PURE__ */ jsx(NiceIcon, { name: "refresh", size: 14 }),
+                " ",
+                t("armatureEditor.reset", "Reset")
+              ]
             }
-            skeleton.update();
-        }
-        setBones((prev) => prev
-            .filter((b) => b.id !== id)
-            .map((b) => ({
-            ...b,
-            children: b.children.filter((c) => c !== id),
-        })));
-        if (selectedBoneId === id) {
-            setSelectedBoneId(null);
-        }
-    }, [skeleton, selectedBoneId]);
-    const savePose = useCallback((name) => {
-        const transforms = new Map();
-        if (skeleton) {
-            for (const bone of skeleton.bones) {
-                transforms.set(bone.uuid, {
-                    position: bone.position.toArray(),
-                    rotation: [bone.rotation.x, bone.rotation.y, bone.rotation.z],
-                    scale: bone.scale.toArray(),
-                });
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => savePose(`Pose ${savedPoses.length + 1}`),
+              title: t("armatureEditor.savePose", "Save Pose"),
+              children: [
+                /* @__PURE__ */ jsx(NiceIcon, { name: "save", size: 14 }),
+                " ",
+                t("armatureEditor.savePose", "Save Pose")
+              ]
             }
-        }
-        const pose = {
-            id: createId(),
-            name,
-            timestamp: Date.now(),
-            boneTransforms: transforms,
-        };
-        setSavedPoses((prev) => [...prev, pose]);
-        return pose;
-    }, [skeleton]);
-    const loadPose = useCallback((pose) => {
-        if (!skeleton) {
-            return;
-        }
-        for (const bone of skeleton.bones) {
-            const transform = pose.boneTransforms.get(bone.uuid);
-            if (transform) {
-                bone.position.fromArray(transform.position);
-                bone.rotation.set(transform.rotation[0], transform.rotation[1], transform.rotation[2]);
-                bone.scale.fromArray(transform.scale);
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              maxHeight: 200,
+              overflowY: "auto",
+              border: "1px solid var(--nice-border, #e2e8f0)",
+              borderRadius: 6,
+              padding: 4
+            },
+            children: rootBones.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: 16, textAlign: "center", color: "var(--nice-text-muted, #999)" }, children: t("armatureEditor.noSkeletonFound", "No skeleton found") }) : rootBones.map((b) => renderBoneTree(b))
+          }
+        ),
+        selectedBoneId && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4 }, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: newBoneName,
+              onChange: (e) => setNewBoneName(e.target.value),
+              placeholder: t("armatureEditor.newBoneName", "New bone name"),
+              style: {
+                flex: 1,
+                padding: "4px 8px",
+                borderRadius: 4,
+                border: "1px solid var(--nice-border, #e2e8f0)"
+              }
             }
-        }
-        skeleton.update();
-        setBones((prev) => prev.map((b) => ({
-            ...b,
-            localPosition: b.bone.position.clone(),
-            localRotation: b.bone.rotation.clone(),
-            localScale: b.bone.scale.clone(),
-        })));
-    }, [skeleton]);
-    const resetPose = useCallback(() => {
-        if (!skeleton) {
-            return;
-        }
-        for (const bone of skeleton.bones) {
-            bone.position.set(0, 0, 0);
-            bone.rotation.set(0, 0, 0);
-            bone.scale.set(1, 1, 1);
-        }
-        // Restore bind pose
-        if (skeleton.boneInverses.length > 0) {
-            skeleton.pose();
-        }
-        skeleton.update();
-        setBones((prev) => prev.map((b) => ({
-            ...b,
-            localPosition: b.bone.position.clone(),
-            localRotation: b.bone.rotation.clone(),
-            localScale: b.bone.scale.clone(),
-        })));
-    }, [skeleton]);
-    return {
-        bones,
-        selectedBoneId,
-        selectBone,
-        setBonePosition,
-        setBoneRotation,
-        addBone,
-        removeBone,
-        savePose,
-        loadPose,
-        resetPose,
-        savedPoses,
-        skeletonHelper: helperRef.current,
-    };
-}
-/* ── Component ── */
-const NiceArmatureEditor = ({ skeleton, skinnedMesh: _skinnedMesh, scene, camera: _camera, onBoneSelect, onPoseChange: _onPoseChange, className = '', tutorial, }) => {
-    const { t } = useNiceTranslation();
-    const { bones, selectedBoneId, selectBone, setBonePosition: _setBonePosition, setBoneRotation, addBone, removeBone, savePose, loadPose, resetPose, savedPoses, skeletonHelper: _skeletonHelper, } = useArmatureEditor(skeleton, scene, onBoneSelect);
-    const [newBoneName, setNewBoneName] = useState('');
-    const selectedBone = useMemo(() => bones.find((b) => b.id === selectedBoneId), [bones, selectedBoneId]);
-    const rootBones = 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);
-        return (jsxs("div", { children: [jsxs("div", { onClick: () => selectBone(boneInfo.id), role: "button", tabIndex: 0, onKeyDown: (e) => e.key === 'Enter' && selectBone(boneInfo.id), style: {
-                        padding: '4px 8px',
-                        paddingLeft: depth * 16 + 8,
-                        background: isSelected ? 'var(--nice-color-accent, #6366f1)' : 'transparent',
-                        color: isSelected ? 'var(--nice-color-white, #fff)' : 'inherit',
-                        cursor: 'pointer',
-                        fontSize: 13,
-                        borderRadius: 4,
-                    }, children: [jsx(NiceIcon, { name: "target", size: 14 }), " ", boneInfo.name] }), childBones.map((child) => renderBoneTree(child, depth + 1))] }, boneInfo.id));
-    };
-    return (jsxs("div", { className: `nice-armature-editor ${className}`, style: { position: 'relative', display: 'flex', flexDirection: 'column', gap: 8 }, children: [jsx("span", { style: { position: 'absolute', top: 0, right: 0, zIndex: 20 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, ARMATURE_EDITOR_TOUR) }) }), jsxs("div", { style: { display: 'flex', gap: 4 }, children: [jsxs("button", { type: "button", onClick: resetPose, title: t('armatureEditor.resetPose', 'Reset Pose'), children: [jsx(NiceIcon, { name: "refresh", size: 14 }), " ", t('armatureEditor.reset', 'Reset')] }), jsxs("button", { type: "button", onClick: () => savePose(`Pose ${savedPoses.length + 1}`), title: t('armatureEditor.savePose', 'Save Pose'), children: [jsx(NiceIcon, { name: "save", size: 14 }), " ", t('armatureEditor.savePose', 'Save Pose')] })] }), jsx("div", { style: {
-                    maxHeight: 200,
-                    overflowY: 'auto',
-                    border: '1px solid var(--nice-border, #e2e8f0)',
-                    borderRadius: 6,
-                    padding: 4,
-                }, children: rootBones.length === 0 ? (jsx("div", { style: { padding: 16, textAlign: 'center', color: 'var(--nice-text-muted, #999)' }, children: t('armatureEditor.noSkeletonFound', 'No skeleton found') })) : (rootBones.map((b) => renderBoneTree(b))) }), selectedBoneId && (jsxs("div", { style: { display: 'flex', gap: 4 }, children: [jsx("input", { type: "text", value: newBoneName, onChange: (e) => setNewBoneName(e.target.value), placeholder: t('armatureEditor.newBoneName', 'New bone name'), style: {
-                            flex: 1,
-                            padding: '4px 8px',
-                            borderRadius: 4,
-                            border: '1px solid var(--nice-border, #e2e8f0)',
-                        } }), jsx("button", { type: "button", disabled: !newBoneName.trim(), onClick: () => {
-                            addBone(selectedBoneId, newBoneName.trim());
-                            setNewBoneName('');
-                        }, children: t('armatureEditor.add', '+ Add') }), jsx("button", { type: "button", onClick: () => removeBone(selectedBoneId), "aria-label": t('armatureEditor.removeBone', 'Remove bone'), children: jsx(NiceIcon, { name: "trash", size: 14 }) })] })), selectedBone && (jsxs("div", { style: {
-                    display: 'grid',
-                    gap: 4,
-                    fontSize: 12,
-                    border: '1px solid var(--nice-border, #e2e8f0)',
-                    borderRadius: 6,
-                    padding: 8,
-                }, children: [jsx("strong", { children: selectedBone.name }), jsx("label", { children: t('armatureEditor.rotationX', 'Rotation X: {x}°').replace('{x}', String((selectedBone.localRotation.x * (180 / Math.PI)).toFixed(1))) }), jsx("input", { type: "range", min: -180, max: 180, value: selectedBone.localRotation.x * (180 / Math.PI), onChange: (e) => {
-                            const rot = selectedBone.localRotation.clone();
-                            rot.x = parseFloat(e.target.value) * (Math.PI / 180);
-                            setBoneRotation(selectedBone.id, rot);
-                        } }), jsx("label", { children: t('armatureEditor.rotationY', 'Rotation Y: {y}°').replace('{y}', String((selectedBone.localRotation.y * (180 / Math.PI)).toFixed(1))) }), jsx("input", { type: "range", min: -180, max: 180, value: selectedBone.localRotation.y * (180 / Math.PI), onChange: (e) => {
-                            const rot = selectedBone.localRotation.clone();
-                            rot.y = parseFloat(e.target.value) * (Math.PI / 180);
-                            setBoneRotation(selectedBone.id, rot);
-                        } }), jsx("label", { children: t('armatureEditor.rotationZ', 'Rotation Z: {z}°').replace('{z}', String((selectedBone.localRotation.z * (180 / Math.PI)).toFixed(1))) }), jsx("input", { type: "range", min: -180, max: 180, value: selectedBone.localRotation.z * (180 / Math.PI), onChange: (e) => {
-                            const rot = selectedBone.localRotation.clone();
-                            rot.z = parseFloat(e.target.value) * (Math.PI / 180);
-                            setBoneRotation(selectedBone.id, rot);
-                        } })] })), savedPoses.length > 0 && (jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsx("strong", { style: { fontSize: 12 }, children: t('armatureEditor.savedPoses', 'Saved Poses') }), savedPoses.map((pose) => (jsx("button", { type: "button", onClick: () => loadPose(pose), style: { textAlign: 'left', padding: '4px 8px', fontSize: 12 }, children: pose.name }, pose.id)))] }))] }));
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: !newBoneName.trim(),
+              onClick: () => {
+                addBone(selectedBoneId, newBoneName.trim());
+                setNewBoneName("");
+              },
+              children: t("armatureEditor.add", "+ Add")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => removeBone(selectedBoneId),
+              "aria-label": t("armatureEditor.removeBone", "Remove bone"),
+              children: /* @__PURE__ */ jsx(NiceIcon, { name: "trash", size: 14 })
+            }
+          )
+        ] }),
+        selectedBone && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gap: 4,
+              fontSize: 12,
+              border: "1px solid var(--nice-border, #e2e8f0)",
+              borderRadius: 6,
+              padding: 8
+            },
+            children: [
+              /* @__PURE__ */ jsx("strong", { children: selectedBone.name }),
+              /* @__PURE__ */ jsx("label", { children: t("armatureEditor.rotationX", "Rotation X: {x}°").replace(
+                "{x}",
+                String((selectedBone.localRotation.x * (180 / Math.PI)).toFixed(1))
+              ) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: -180,
+                  max: 180,
+                  value: selectedBone.localRotation.x * (180 / Math.PI),
+                  onChange: (e) => {
+                    const rot = selectedBone.localRotation.clone();
+                    rot.x = parseFloat(e.target.value) * (Math.PI / 180);
+                    setBoneRotation(selectedBone.id, rot);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("label", { children: t("armatureEditor.rotationY", "Rotation Y: {y}°").replace(
+                "{y}",
+                String((selectedBone.localRotation.y * (180 / Math.PI)).toFixed(1))
+              ) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: -180,
+                  max: 180,
+                  value: selectedBone.localRotation.y * (180 / Math.PI),
+                  onChange: (e) => {
+                    const rot = selectedBone.localRotation.clone();
+                    rot.y = parseFloat(e.target.value) * (Math.PI / 180);
+                    setBoneRotation(selectedBone.id, rot);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("label", { children: t("armatureEditor.rotationZ", "Rotation Z: {z}°").replace(
+                "{z}",
+                String((selectedBone.localRotation.z * (180 / Math.PI)).toFixed(1))
+              ) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: -180,
+                  max: 180,
+                  value: selectedBone.localRotation.z * (180 / Math.PI),
+                  onChange: (e) => {
+                    const rot = selectedBone.localRotation.clone();
+                    rot.z = parseFloat(e.target.value) * (Math.PI / 180);
+                    setBoneRotation(selectedBone.id, rot);
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        savedPoses.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 4 }, children: [
+          /* @__PURE__ */ jsx("strong", { style: { fontSize: 12 }, children: t("armatureEditor.savedPoses", "Saved Poses") }),
+          savedPoses.map((pose) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => loadPose(pose),
+              style: { textAlign: "left", padding: "4px 8px", fontSize: 12 },
+              children: pose.name
+            },
+            pose.id
+          ))
+        ] })
+      ]
+    }
+  );
+};
+export {
+  NiceArmatureEditor,
+  useArmatureEditor
 };
-
-export { NiceArmatureEditor, useArmatureEditor };