@nice2dev/ui-3d 1.3.15 → 1.3.17

package/dist/cjs/model/NiceMorphTargetEditor.js

@@ -1,242 +1,348 @@
-'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);
-
-/** Built-in guided tour (EN inline + i18n keys → PL and other locales). */
+const THREE__namespace = /* @__PURE__ */ _interopNamespaceDefault(THREE);
 const MORPH_TARGET_EDITOR_TOUR = [
-    {
-        target: '.nice-morph-target-editor',
-        titleKey: 'tutorial.morphTargetEditor.intro.title',
-        title: 'Morph target editor',
-        contentKey: 'tutorial.morphTargetEditor.intro.content',
-        content: 'Blend the mesh’s morph targets with the per-target influence sliders, create or delete targets, and preview the interpolation.',
-        placement: 'auto',
-    },
+  {
+    target: ".nice-morph-target-editor",
+    titleKey: "tutorial.morphTargetEditor.intro.title",
+    title: "Morph target editor",
+    contentKey: "tutorial.morphTargetEditor.intro.content",
+    content: "Blend the mesh’s morph targets with the per-target influence sliders, create or delete targets, and preview the interpolation.",
+    placement: "auto"
+  }
 ];
-/* ── Hook ── */
 function useMorphTargetEditor(mesh, onInfluenceChange) {
-    const [targets, setTargets] = React.useState([]);
-    const [animations, setAnimations] = React.useState([]);
-    const [isAnimating, setIsAnimating] = React.useState(false);
-    const animFrameRef = React.useRef(0);
-    const animStartRef = React.useRef(0);
-    const activeAnimRef = React.useRef(null);
-    // Sync targets from mesh
-    React.useEffect(() => {
-        if (!mesh || !mesh.morphTargetDictionary || !mesh.morphTargetInfluences) {
-            setTargets([]);
-            return;
-        }
-        const dict = mesh.morphTargetDictionary;
-        const influences = mesh.morphTargetInfluences;
-        const list = Object.entries(dict).map(([name, index]) => {
-            var _a;
-            return ({
-                name,
-                index,
-                influence: (_a = influences[index]) !== null && _a !== void 0 ? _a : 0,
-            });
-        });
-        list.sort((a, b) => a.index - b.index);
-        setTargets(list);
-    }, [mesh]);
-    const setInfluence = React.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 = React.useCallback((name) => {
-        if (!mesh) {
-            return;
-        }
-        const geometry = mesh.geometry;
-        const posAttr = geometry.attributes.position;
-        const count = posAttr.count;
-        // Clone current position as new morph target
-        const morphPositions = new Float32Array(count * 3);
-        for (let i = 0; i < count * 3; i++) {
-            morphPositions[i] = posAttr.array[i];
-        }
-        const morphAttr = new THREE__namespace.BufferAttribute(morphPositions, 3);
-        morphAttr.name = name;
-        // Add to morphAttributes
-        if (!geometry.morphAttributes.position) {
-            geometry.morphAttributes.position = [];
-        }
-        const morphArray = geometry.morphAttributes.position;
-        morphArray.push(morphAttr);
-        // Update dictionary and influences
-        if (!mesh.morphTargetDictionary) {
-            mesh.morphTargetDictionary = {};
-        }
-        if (!mesh.morphTargetInfluences) {
-            mesh.morphTargetInfluences = [];
-        }
-        const newIndex = morphArray.length - 1;
-        mesh.morphTargetDictionary[name] = newIndex;
-        mesh.morphTargetInfluences[newIndex] = 0;
-        mesh.updateMorphTargets();
-        setTargets((prev) => [...prev, { name, index: newIndex, influence: 0 }]);
-    }, [mesh]);
-    const deleteMorphTarget = React.useCallback((index) => {
-        if (!mesh) {
-            return;
-        }
-        const geometry = mesh.geometry;
-        const morphArray = geometry.morphAttributes.position;
-        if (!morphArray || index >= morphArray.length) {
-            return;
+  const [targets, setTargets] = React.useState([]);
+  const [animations, setAnimations] = React.useState([]);
+  const [isAnimating, setIsAnimating] = React.useState(false);
+  const animFrameRef = React.useRef(0);
+  const animStartRef = React.useRef(0);
+  const activeAnimRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!mesh || !mesh.morphTargetDictionary || !mesh.morphTargetInfluences) {
+      setTargets([]);
+      return;
+    }
+    const dict = mesh.morphTargetDictionary;
+    const influences = mesh.morphTargetInfluences;
+    const list = Object.entries(dict).map(([name, index]) => ({
+      name,
+      index,
+      influence: influences[index] ?? 0
+    }));
+    list.sort((a, b) => a.index - b.index);
+    setTargets(list);
+  }, [mesh]);
+  const setInfluence = React.useCallback(
+    (index, value) => {
+      if (!mesh?.morphTargetInfluences) {
+        return;
+      }
+      mesh.morphTargetInfluences[index] = value;
+      setTargets((prev) => prev.map((t) => t.index === index ? { ...t, influence: value } : t));
+      onInfluenceChange?.(mesh, index, value);
+    },
+    [mesh, onInfluenceChange]
+  );
+  const createMorphTarget = React.useCallback(
+    (name) => {
+      if (!mesh) {
+        return;
+      }
+      const geometry = mesh.geometry;
+      const posAttr = geometry.attributes.position;
+      const count = posAttr.count;
+      const morphPositions = new Float32Array(count * 3);
+      for (let i = 0; i < count * 3; i++) {
+        morphPositions[i] = posAttr.array[i];
+      }
+      const morphAttr = new THREE__namespace.BufferAttribute(morphPositions, 3);
+      morphAttr.name = name;
+      if (!geometry.morphAttributes.position) {
+        geometry.morphAttributes.position = [];
+      }
+      const morphArray = geometry.morphAttributes.position;
+      morphArray.push(morphAttr);
+      if (!mesh.morphTargetDictionary) {
+        mesh.morphTargetDictionary = {};
+      }
+      if (!mesh.morphTargetInfluences) {
+        mesh.morphTargetInfluences = [];
+      }
+      const newIndex = morphArray.length - 1;
+      mesh.morphTargetDictionary[name] = newIndex;
+      mesh.morphTargetInfluences[newIndex] = 0;
+      mesh.updateMorphTargets();
+      setTargets((prev) => [...prev, { name, index: newIndex, influence: 0 }]);
+    },
+    [mesh]
+  );
+  const deleteMorphTarget = React.useCallback(
+    (index) => {
+      if (!mesh) {
+        return;
+      }
+      const geometry = mesh.geometry;
+      const morphArray = geometry.morphAttributes.position;
+      if (!morphArray || index >= morphArray.length) {
+        return;
+      }
+      morphArray.splice(index, 1);
+      const dict = {};
+      const influences = [];
+      morphArray.forEach((attr, i) => {
+        dict[attr.name || `morph_${i}`] = i;
+        influences[i] = mesh.morphTargetInfluences?.[i === index ? -1 : i >= index ? i + 1 : i] ?? 0;
+      });
+      mesh.morphTargetDictionary = dict;
+      mesh.morphTargetInfluences = influences;
+      setTargets(
+        Object.entries(dict).map(([name, idx]) => ({
+          name,
+          index: idx,
+          influence: influences[idx]
+        }))
+      );
+    },
+    [mesh]
+  );
+  const resetAllInfluences = React.useCallback(() => {
+    if (!mesh?.morphTargetInfluences) {
+      return;
+    }
+    mesh.morphTargetInfluences.fill(0);
+    setTargets((prev) => prev.map((t) => ({ ...t, influence: 0 })));
+  }, [mesh]);
+  const startAnimation = React.useCallback(
+    (animation) => {
+      if (!mesh?.morphTargetInfluences) {
+        return;
+      }
+      activeAnimRef.current = animation;
+      setIsAnimating(true);
+      animStartRef.current = performance.now();
+      const animate = (now) => {
+        const anim = activeAnimRef.current;
+        if (!anim || !mesh.morphTargetInfluences) {
+          return;
         }
-        morphArray.splice(index, 1);
-        // Rebuild dictionary
-        const dict = {};
-        const influences = [];
-        morphArray.forEach((attr, i) => {
-            var _a, _b;
-            dict[attr.name || `morph_${i}`] = i;
-            influences[i] =
-                (_b = (_a = mesh.morphTargetInfluences) === null || _a === void 0 ? void 0 : _a[i === index ? -1 : i >= index ? i + 1 : i]) !== null && _b !== void 0 ? _b : 0;
-        });
-        mesh.morphTargetDictionary = dict;
-        mesh.morphTargetInfluences = influences;
-        setTargets(Object.entries(dict).map(([name, idx]) => ({
-            name,
-            index: idx,
-            influence: influences[idx],
-        })));
-    }, [mesh]);
-    const resetAllInfluences = React.useCallback(() => {
-        if (!(mesh === null || mesh === void 0 ? void 0 : mesh.morphTargetInfluences)) {
-            return;
+        const elapsed = (now - animStartRef.current) / 1e3;
+        const t = elapsed % anim.duration / anim.duration;
+        const kfs = anim.keyframes;
+        let prevKf = kfs[0];
+        let nextKf = kfs[kfs.length - 1];
+        for (let i = 0; i < kfs.length - 1; i++) {
+          if (t >= kfs[i].time / anim.duration && t < kfs[i + 1].time / anim.duration) {
+            prevKf = kfs[i];
+            nextKf = kfs[i + 1];
+            break;
+          }
         }
-        mesh.morphTargetInfluences.fill(0);
-        setTargets((prev) => prev.map((t) => ({ ...t, influence: 0 })));
-    }, [mesh]);
-    const startAnimation = React.useCallback((animation) => {
-        if (!(mesh === null || mesh === void 0 ? void 0 : mesh.morphTargetInfluences)) {
-            return;
+        const segDuration = (nextKf.time - prevKf.time) / anim.duration;
+        const segT = segDuration > 0 ? (t - prevKf.time / anim.duration) / segDuration : 0;
+        for (let i = 0; i < mesh.morphTargetInfluences.length; i++) {
+          const from = prevKf.influences[i] ?? 0;
+          const to = nextKf.influences[i] ?? 0;
+          mesh.morphTargetInfluences[i] = from + (to - from) * segT;
         }
-        activeAnimRef.current = animation;
-        setIsAnimating(true);
-        animStartRef.current = performance.now();
-        const animate = (now) => {
-            var _a, _b;
-            const anim = activeAnimRef.current;
-            if (!anim || !mesh.morphTargetInfluences) {
-                return;
-            }
-            const elapsed = (now - animStartRef.current) / 1000;
-            const t = (elapsed % anim.duration) / anim.duration;
-            // Interpolate between keyframes
-            const kfs = anim.keyframes;
-            let prevKf = kfs[0];
-            let nextKf = kfs[kfs.length - 1];
-            for (let i = 0; i < kfs.length - 1; i++) {
-                if (t >= kfs[i].time / anim.duration && t < kfs[i + 1].time / anim.duration) {
-                    prevKf = kfs[i];
-                    nextKf = kfs[i + 1];
-                    break;
-                }
-            }
-            const segDuration = (nextKf.time - prevKf.time) / anim.duration;
-            const segT = segDuration > 0 ? (t - prevKf.time / anim.duration) / segDuration : 0;
-            for (let i = 0; i < mesh.morphTargetInfluences.length; i++) {
-                const from = (_a = prevKf.influences[i]) !== null && _a !== void 0 ? _a : 0;
-                const to = (_b = nextKf.influences[i]) !== null && _b !== void 0 ? _b : 0;
-                mesh.morphTargetInfluences[i] = from + (to - from) * segT;
-            }
-            setTargets((prev) => prev.map((tgt) => {
-                var _a;
-                return ({
-                    ...tgt,
-                    influence: (_a = mesh.morphTargetInfluences[tgt.index]) !== null && _a !== void 0 ? _a : 0,
-                });
-            }));
-            animFrameRef.current = requestAnimationFrame(animate);
-        };
+        setTargets(
+          (prev) => prev.map((tgt) => ({
+            ...tgt,
+            influence: mesh.morphTargetInfluences[tgt.index] ?? 0
+          }))
+        );
         animFrameRef.current = requestAnimationFrame(animate);
-    }, [mesh]);
-    const stopAnimation = React.useCallback(() => {
-        activeAnimRef.current = null;
-        setIsAnimating(false);
-        cancelAnimationFrame(animFrameRef.current);
-    }, []);
-    React.useEffect(() => {
-        return () => cancelAnimationFrame(animFrameRef.current);
-    }, []);
-    const addAnimation = React.useCallback((animation) => {
-        setAnimations((prev) => [...prev, animation]);
-    }, []);
-    const removeAnimation = React.useCallback((name) => {
-        setAnimations((prev) => prev.filter((a) => a.name !== name));
-    }, []);
-    return {
-        targets,
-        setInfluence,
-        createMorphTarget,
-        deleteMorphTarget,
-        resetAllInfluences,
-        isAnimating,
-        startAnimation,
-        stopAnimation,
-        animations,
-        addAnimation,
-        removeAnimation,
-    };
+      };
+      animFrameRef.current = requestAnimationFrame(animate);
+    },
+    [mesh]
+  );
+  const stopAnimation = React.useCallback(() => {
+    activeAnimRef.current = null;
+    setIsAnimating(false);
+    cancelAnimationFrame(animFrameRef.current);
+  }, []);
+  React.useEffect(() => {
+    return () => cancelAnimationFrame(animFrameRef.current);
+  }, []);
+  const addAnimation = React.useCallback((animation) => {
+    setAnimations((prev) => [...prev, animation]);
+  }, []);
+  const removeAnimation = React.useCallback((name) => {
+    setAnimations((prev) => prev.filter((a) => a.name !== name));
+  }, []);
+  return {
+    targets,
+    setInfluence,
+    createMorphTarget,
+    deleteMorphTarget,
+    resetAllInfluences,
+    isAnimating,
+    startAnimation,
+    stopAnimation,
+    animations,
+    addAnimation,
+    removeAnimation
+  };
 }
-/* ── Component ── */
-const NiceMorphTargetEditor = ({ mesh, onInfluenceChange, className = '', tutorial, }) => {
-    const { t } = i18n.useNiceTranslation();
-    const { targets, setInfluence, createMorphTarget, deleteMorphTarget, resetAllInfluences, isAnimating, startAnimation, stopAnimation, animations, addAnimation: _addAnimation, removeAnimation, } = useMorphTargetEditor(mesh, onInfluenceChange);
-    const [newName, setNewName] = React.useState('');
-    const handleCreate = () => {
-        const name = newName.trim();
-        if (!name) {
-            return;
-        }
-        createMorphTarget(name);
-        setNewName('');
-    };
-    return (jsxRuntime.jsxs("div", { className: `nice-morph-target-editor ${className}`, style: { position: 'relative', display: 'grid', gap: 8, fontSize: 13 }, children: [jsxRuntime.jsx("span", { style: { position: 'absolute', top: 0, right: 0, zIndex: 20 }, children: jsxRuntime.jsx(ui.NiceTutorialButton, { steps: ui.resolveTutorial(tutorial, MORPH_TARGET_EDITOR_TOUR) }) }), jsxRuntime.jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxRuntime.jsx("strong", { children: t('morphTargetEditor.morphTargets', 'Morph Targets') }), jsxRuntime.jsx("button", { type: "button", onClick: resetAllInfluences, style: { fontSize: 11 }, children: t('morphTargetEditor.resetAll', 'Reset All') })] }), targets.length === 0 && (jsxRuntime.jsx("div", { style: { opacity: 0.6, fontStyle: 'italic' }, children: t('morphTargetEditor.noMorphTargetsFound', 'No morph targets found.') })), targets.map((target) => (jsxRuntime.jsxs("div", { style: {
-                    display: 'grid',
-                    gridTemplateColumns: '1fr 50px auto',
-                    alignItems: 'center',
-                    gap: 6,
-                }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { style: { display: 'block', fontSize: 11, marginBottom: 2 }, children: target.name }), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: target.influence, onChange: (e) => setInfluence(target.index, parseFloat(e.target.value)), style: { width: '100%' } })] }), jsxRuntime.jsx("span", { style: { fontSize: 11, textAlign: 'right' }, children: target.influence.toFixed(2) }), jsxRuntime.jsx("button", { type: "button", onClick: () => deleteMorphTarget(target.index), title: t('morphTargetEditor.delete', 'Delete'), "aria-label": t('morphTargetEditor.delete', 'Delete'), style: { background: 'none', border: 'none', cursor: 'pointer' }, children: jsxRuntime.jsx(ui.NiceIcon, { name: "trash", size: 14 }) })] }, target.index))), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 4, marginTop: 4 }, children: [jsxRuntime.jsx("input", { type: "text", value: newName, onChange: (e) => setNewName(e.target.value), placeholder: t('morphTargetEditor.newMorphTargetName', 'New morph target name…'), onKeyDown: (e) => e.key === 'Enter' && handleCreate(), style: {
-                            flex: 1,
-                            padding: '4px 8px',
-                            border: '1px solid var(--nice-border, #e2e8f0)',
-                            borderRadius: 4,
-                        } }), jsxRuntime.jsx("button", { type: "button", onClick: handleCreate, children: t('morphTargetEditor.add', '+ Add') })] }), animations.length > 0 && (jsxRuntime.jsxs("div", { style: { marginTop: 8 }, children: [jsxRuntime.jsx("strong", { style: { fontSize: 12 }, children: t('morphTargetEditor.animations', 'Animations') }), animations.map((anim) => (jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginTop: 4 }, children: [jsxRuntime.jsx("span", { style: { flex: 1 }, children: anim.name }), jsxRuntime.jsx("button", { type: "button", onClick: () => (isAnimating ? stopAnimation() : startAnimation(anim)), style: { fontSize: 11 }, "aria-label": isAnimating
-                                    ? t('morphTargetEditor.stop', 'Stop')
-                                    : t('morphTargetEditor.play', 'Play'), children: jsxRuntime.jsx(ui.NiceIcon, { name: isAnimating ? 'stop' : 'play', size: 14 }) }), jsxRuntime.jsx("button", { type: "button", onClick: () => removeAnimation(anim.name), style: { fontSize: 11 }, "aria-label": t('morphTargetEditor.removeAnimation', 'Remove animation'), children: jsxRuntime.jsx(ui.NiceIcon, { name: "trash", size: 14 }) })] }, anim.name)))] }))] }));
+const NiceMorphTargetEditor = ({
+  mesh,
+  onInfluenceChange,
+  className = "",
+  tutorial
+}) => {
+  const { t } = i18n.useNiceTranslation();
+  const {
+    targets,
+    setInfluence,
+    createMorphTarget,
+    deleteMorphTarget,
+    resetAllInfluences,
+    isAnimating,
+    startAnimation,
+    stopAnimation,
+    animations,
+    addAnimation: _addAnimation,
+    removeAnimation
+  } = useMorphTargetEditor(mesh, onInfluenceChange);
+  const [newName, setNewName] = React.useState("");
+  const handleCreate = () => {
+    const name = newName.trim();
+    if (!name) {
+      return;
+    }
+    createMorphTarget(name);
+    setNewName("");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `nice-morph-target-editor ${className}`,
+      style: { position: "relative", display: "grid", gap: 8, fontSize: 13 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "absolute", top: 0, right: 0, zIndex: 20 }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.NiceTutorialButton, { steps: ui.resolveTutorial(tutorial, MORPH_TARGET_EDITOR_TOUR) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: t("morphTargetEditor.morphTargets", "Morph Targets") }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: resetAllInfluences, style: { fontSize: 11 }, children: t("morphTargetEditor.resetAll", "Reset All") })
+        ] }),
+        targets.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { opacity: 0.6, fontStyle: "italic" }, children: t("morphTargetEditor.noMorphTargetsFound", "No morph targets found.") }),
+        targets.map((target) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "1fr 50px auto",
+              alignItems: "center",
+              gap: 6
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: 11, marginBottom: 2 }, children: target.name }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "range",
+                    min: 0,
+                    max: 1,
+                    step: 0.01,
+                    value: target.influence,
+                    onChange: (e) => setInfluence(target.index, parseFloat(e.target.value)),
+                    style: { width: "100%" }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 11, textAlign: "right" }, children: target.influence.toFixed(2) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => deleteMorphTarget(target.index),
+                  title: t("morphTargetEditor.delete", "Delete"),
+                  "aria-label": t("morphTargetEditor.delete", "Delete"),
+                  style: { background: "none", border: "none", cursor: "pointer" },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "trash", size: 14 })
+                }
+              )
+            ]
+          },
+          target.index
+        )),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 4, marginTop: 4 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              value: newName,
+              onChange: (e) => setNewName(e.target.value),
+              placeholder: t("morphTargetEditor.newMorphTargetName", "New morph target name…"),
+              onKeyDown: (e) => e.key === "Enter" && handleCreate(),
+              style: {
+                flex: 1,
+                padding: "4px 8px",
+                border: "1px solid var(--nice-border, #e2e8f0)",
+                borderRadius: 4
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleCreate, children: t("morphTargetEditor.add", "+ Add") })
+        ] }),
+        animations.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 8 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { fontSize: 12 }, children: t("morphTargetEditor.animations", "Animations") }),
+          animations.map((anim) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: { display: "flex", alignItems: "center", gap: 4, marginTop: 4 },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 }, children: anim.name }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => isAnimating ? stopAnimation() : startAnimation(anim),
+                    style: { fontSize: 11 },
+                    "aria-label": isAnimating ? t("morphTargetEditor.stop", "Stop") : t("morphTargetEditor.play", "Play"),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: isAnimating ? "stop" : "play", size: 14 })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => removeAnimation(anim.name),
+                    style: { fontSize: 11 },
+                    "aria-label": t("morphTargetEditor.removeAnimation", "Remove animation"),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "trash", size: 14 })
+                  }
+                )
+              ]
+            },
+            anim.name
+          ))
+        ] })
+      ]
+    }
+  );
 };
-
 exports.NiceMorphTargetEditor = NiceMorphTargetEditor;
 exports.useMorphTargetEditor = useMorphTargetEditor;