@nice2dev/ui-3d 1.3.15 → 1.3.17

package/dist/esm/model/ModelEditorSubComponents.js

@@ -1,102 +1,273 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { NiceTextInput, clickOnActivationKey, NiceColorPicker, NiceSlider, NiceSelect } from '@nice2dev/ui';
-import { useState } from 'react';
-import * as THREE from 'three';
-import { useNiceTranslation } from '../core/i18n.js';
-import styles from './ModelEditor.module.css.js';
-import { DEG } from './modelEditorTypes.js';
-
-/* ═══════════════════════════════════════════
-   Sub-components
-   ═══════════════════════════════════════════ */
-/** Vec3 input row for position/scale */
+import { jsxs, jsx } from "react/jsx-runtime";
+import { NiceTextInput, clickOnActivationKey, NiceColorPicker, NiceSlider, NiceSelect } from "@nice2dev/ui";
+import { useState } from "react";
+import * as THREE from "three";
+import { useNiceTranslation } from "../core/i18n.js";
+import styles from "./ModelEditor.module.css.js";
+import { DEG } from "./modelEditorTypes.js";
 const Vec3Row = ({ label, value, onChange }) => {
-    const [, forceUpdate] = useState(0);
-    const set = (axis, v) => {
-        const n = parseFloat(v);
-        if (!isNaN(n)) {
-            value[axis] = n;
-            forceUpdate((x) => x + 1);
-            onChange();
+  const [, forceUpdate] = useState(0);
+  const set = (axis, v) => {
+    const n = parseFloat(v);
+    if (!isNaN(n)) {
+      value[axis] = n;
+      forceUpdate((x) => x + 1);
+      onChange();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+    /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: styles.propVec3, children: [
+      /* @__PURE__ */ jsx(
+        NiceTextInput,
+        {
+          className: styles.propVec3X,
+          value: value.x.toFixed(3),
+          onChange: (val) => set("x", val)
         }
-    };
-    return (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: label }), jsxs("div", { className: styles.propVec3, children: [jsx(NiceTextInput, { className: styles.propVec3X, value: value.x.toFixed(3), onChange: (val) => set('x', val) }), jsx(NiceTextInput, { className: styles.propVec3Y, value: value.y.toFixed(3), onChange: (val) => set('y', val) }), jsx(NiceTextInput, { className: styles.propVec3Z, value: value.z.toFixed(3), onChange: (val) => set('z', val) })] })] }));
+      ),
+      /* @__PURE__ */ jsx(
+        NiceTextInput,
+        {
+          className: styles.propVec3Y,
+          value: value.y.toFixed(3),
+          onChange: (val) => set("y", val)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceTextInput,
+        {
+          className: styles.propVec3Z,
+          value: value.z.toFixed(3),
+          onChange: (val) => set("z", val)
+        }
+      )
+    ] })
+  ] });
 };
-/** Vec3 input row for rotation (shows degrees) */
 const Vec3RowDeg = ({ label, value, onChange }) => {
-    const [, forceUpdate] = useState(0);
-    const set = (axis, v) => {
-        const n = parseFloat(v);
-        if (!isNaN(n)) {
-            value[axis] = n / DEG;
-            forceUpdate((x) => x + 1);
-            onChange();
+  const [, forceUpdate] = useState(0);
+  const set = (axis, v) => {
+    const n = parseFloat(v);
+    if (!isNaN(n)) {
+      value[axis] = n / DEG;
+      forceUpdate((x) => x + 1);
+      onChange();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+    /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: styles.propVec3, children: [
+      /* @__PURE__ */ jsx(
+        NiceTextInput,
+        {
+          className: styles.propVec3X,
+          value: (value.x * DEG).toFixed(1),
+          onChange: (val) => set("x", val)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceTextInput,
+        {
+          className: styles.propVec3Y,
+          value: (value.y * DEG).toFixed(1),
+          onChange: (val) => set("y", val)
         }
-    };
-    return (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: label }), jsxs("div", { className: styles.propVec3, children: [jsx(NiceTextInput, { className: styles.propVec3X, value: (value.x * DEG).toFixed(1), onChange: (val) => set('x', val) }), jsx(NiceTextInput, { className: styles.propVec3Y, value: (value.y * DEG).toFixed(1), onChange: (val) => set('y', val) }), jsx(NiceTextInput, { className: styles.propVec3Z, value: (value.z * DEG).toFixed(1), onChange: (val) => set('z', val) })] })] }));
+      ),
+      /* @__PURE__ */ jsx(
+        NiceTextInput,
+        {
+          className: styles.propVec3Z,
+          value: (value.z * DEG).toFixed(1),
+          onChange: (val) => set("z", val)
+        }
+      )
+    ] })
+  ] });
 };
-/** Material card with editable properties */
 const MaterialCard = ({ material, active, onClick, onUpdate }) => {
-    var _a, _b, _c, _d;
-    const { t } = useNiceTranslation();
-    const mat = material;
-    const hasColor = 'color' in mat;
-    const hasMetalness = 'metalness' in mat;
-    const hasRoughness = 'roughness' in mat;
-    const hasEmissive = 'emissive' in mat;
-    const hasMap = 'map' in mat;
-    const hasNormalMap = 'normalMap' in mat;
-    const setColor = (hex) => {
-        if (hasColor) {
-            mat.color.set(hex);
-            mat.needsUpdate = true;
-            onUpdate();
-        }
-    };
-    const setNum = (prop, val) => {
-        mat[prop] = val;
-        mat.needsUpdate = true;
-        onUpdate();
-    };
-    return (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.materialCard} ${active ? styles.materialCardActive : ''}`, onClick: onClick, children: [jsx("div", { className: styles.materialHeader, children: jsx("span", { className: styles.materialName, children: mat.name || mat.type }) }), hasColor && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorSubComponents.color', 'Color') }), jsx(NiceColorPicker, { value: `#${mat.color.getHexString()}`, onChange: (c) => setColor(c) }), jsxs("span", { style: { fontSize: 10, color: 'var(--nice-text-secondary, #888)' }, children: ["#", mat.color.getHexString()] })] })), hasMetalness && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorSubComponents.metal', 'Metal') }), jsx(NiceSlider, { min: 0, max: 1, step: 0.01, value: mat.metalness, onChange: (val) => setNum('metalness', val), style: { flex: 1 } }), jsx("span", { style: {
-                            fontSize: 9,
-                            color: 'var(--nice-text-secondary, #888)',
-                            width: 28,
-                            textAlign: 'right',
-                        }, children: mat.metalness.toFixed(2) })] })), hasRoughness && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorSubComponents.rough', 'Rough') }), jsx(NiceSlider, { min: 0, max: 1, step: 0.01, value: mat.roughness, onChange: (val) => setNum('roughness', val), style: { flex: 1 } }), jsx("span", { style: {
-                            fontSize: 9,
-                            color: 'var(--nice-text-secondary, #888)',
-                            width: 28,
-                            textAlign: 'right',
-                        }, children: mat.roughness.toFixed(2) })] })), hasEmissive && mat.emissive && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorSubComponents.emissive', 'Emissive') }), jsx(NiceColorPicker, { value: `#${mat.emissive.getHexString()}`, onChange: (c) => {
-                            mat.emissive.set(c);
-                            mat.needsUpdate = true;
-                            onUpdate();
-                        } })] })), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorSubComponents.opacity', 'Opacity') }), jsx(NiceSlider, { min: 0, max: 1, step: 0.01, value: mat.opacity, onChange: (val) => {
-                            mat.opacity = val;
-                            mat.transparent = val < 1;
-                            mat.needsUpdate = true;
-                            onUpdate();
-                        }, style: { flex: 1 } }), jsx("span", { style: {
-                            fontSize: 9,
-                            color: 'var(--nice-text-secondary, #888)',
-                            width: 28,
-                            textAlign: 'right',
-                        }, children: mat.opacity.toFixed(2) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('modelEditorSubComponents.side', 'Side') }), jsx(NiceSelect, { className: styles.propSelect, value: String(mat.side), onChange: (val) => {
-                            mat.side = parseInt(val);
-                            mat.needsUpdate = true;
-                            onUpdate();
-                        }, options: [
-                            {
-                                value: String(THREE.FrontSide),
-                                label: t('modelEditorSubComponents.front', 'Front'),
-                            },
-                            { value: String(THREE.BackSide), label: t('modelEditorSubComponents.back', 'Back') },
-                            {
-                                value: String(THREE.DoubleSide),
-                                label: t('modelEditorSubComponents.double', 'Double'),
-                            },
-                        ] })] }), hasMap && mat.map && (jsxs("div", { className: styles.textureSlot, children: [jsx("div", { className: styles.textureThumb, children: mat.map.image != null && (jsx("img", { src: (_a = mat.map.image.src) !== null && _a !== void 0 ? _a : '', alt: "diffuse" })) }), jsxs("div", { className: styles.textureInfo, children: [jsx("div", { className: styles.textureName, children: t('modelEditorSubComponents.diffuseMap', 'Diffuse Map') }), jsxs("div", { style: { fontSize: 9, color: 'var(--nice-text-secondary, #666)' }, children: [(_b = mat.map.image) === null || _b === void 0 ? void 0 : _b.width, "\u00D7", (_c = mat.map.image) === null || _c === void 0 ? void 0 : _c.height] })] })] })), hasNormalMap && mat.normalMap && (jsxs("div", { className: styles.textureSlot, children: [jsx("div", { className: styles.textureThumb, children: mat.normalMap.image != null && (jsx("img", { src: (_d = mat.normalMap.image.src) !== null && _d !== void 0 ? _d : '', alt: "normal" })) }), jsx("div", { className: styles.textureInfo, children: jsx("div", { className: styles.textureName, children: t('modelEditorSubComponents.normalMap', 'Normal Map') }) })] }))] }));
+  const { t } = useNiceTranslation();
+  const mat = material;
+  const hasColor = "color" in mat;
+  const hasMetalness = "metalness" in mat;
+  const hasRoughness = "roughness" in mat;
+  const hasEmissive = "emissive" in mat;
+  const hasMap = "map" in mat;
+  const hasNormalMap = "normalMap" in mat;
+  const setColor = (hex) => {
+    if (hasColor) {
+      mat.color.set(hex);
+      mat.needsUpdate = true;
+      onUpdate();
+    }
+  };
+  const setNum = (prop, val) => {
+    mat[prop] = val;
+    mat.needsUpdate = true;
+    onUpdate();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: clickOnActivationKey,
+      className: `${styles.materialCard} ${active ? styles.materialCardActive : ""}`,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.materialHeader, children: /* @__PURE__ */ jsx("span", { className: styles.materialName, children: mat.name || mat.type }) }),
+        hasColor && /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorSubComponents.color", "Color") }),
+          /* @__PURE__ */ jsx(NiceColorPicker, { value: `#${mat.color.getHexString()}`, onChange: (c) => setColor(c) }),
+          /* @__PURE__ */ jsxs("span", { style: { fontSize: 10, color: "var(--nice-text-secondary, #888)" }, children: [
+            "#",
+            mat.color.getHexString()
+          ] })
+        ] }),
+        hasMetalness && /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorSubComponents.metal", "Metal") }),
+          /* @__PURE__ */ jsx(
+            NiceSlider,
+            {
+              min: 0,
+              max: 1,
+              step: 0.01,
+              value: mat.metalness,
+              onChange: (val) => setNum("metalness", val),
+              style: { flex: 1 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: 9,
+                color: "var(--nice-text-secondary, #888)",
+                width: 28,
+                textAlign: "right"
+              },
+              children: mat.metalness.toFixed(2)
+            }
+          )
+        ] }),
+        hasRoughness && /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorSubComponents.rough", "Rough") }),
+          /* @__PURE__ */ jsx(
+            NiceSlider,
+            {
+              min: 0,
+              max: 1,
+              step: 0.01,
+              value: mat.roughness,
+              onChange: (val) => setNum("roughness", val),
+              style: { flex: 1 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: 9,
+                color: "var(--nice-text-secondary, #888)",
+                width: 28,
+                textAlign: "right"
+              },
+              children: mat.roughness.toFixed(2)
+            }
+          )
+        ] }),
+        hasEmissive && mat.emissive && /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorSubComponents.emissive", "Emissive") }),
+          /* @__PURE__ */ jsx(
+            NiceColorPicker,
+            {
+              value: `#${mat.emissive.getHexString()}`,
+              onChange: (c) => {
+                mat.emissive.set(c);
+                mat.needsUpdate = true;
+                onUpdate();
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorSubComponents.opacity", "Opacity") }),
+          /* @__PURE__ */ jsx(
+            NiceSlider,
+            {
+              min: 0,
+              max: 1,
+              step: 0.01,
+              value: mat.opacity,
+              onChange: (val) => {
+                mat.opacity = val;
+                mat.transparent = val < 1;
+                mat.needsUpdate = true;
+                onUpdate();
+              },
+              style: { flex: 1 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: 9,
+                color: "var(--nice-text-secondary, #888)",
+                width: 28,
+                textAlign: "right"
+              },
+              children: mat.opacity.toFixed(2)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("modelEditorSubComponents.side", "Side") }),
+          /* @__PURE__ */ jsx(
+            NiceSelect,
+            {
+              className: styles.propSelect,
+              value: String(mat.side),
+              onChange: (val) => {
+                mat.side = parseInt(val);
+                mat.needsUpdate = true;
+                onUpdate();
+              },
+              options: [
+                {
+                  value: String(THREE.FrontSide),
+                  label: t("modelEditorSubComponents.front", "Front")
+                },
+                { value: String(THREE.BackSide), label: t("modelEditorSubComponents.back", "Back") },
+                {
+                  value: String(THREE.DoubleSide),
+                  label: t("modelEditorSubComponents.double", "Double")
+                }
+              ]
+            }
+          )
+        ] }),
+        hasMap && mat.map && /* @__PURE__ */ jsxs("div", { className: styles.textureSlot, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.textureThumb, children: mat.map.image != null && /* @__PURE__ */ jsx("img", { src: mat.map.image.src ?? "", alt: "diffuse" }) }),
+          /* @__PURE__ */ jsxs("div", { className: styles.textureInfo, children: [
+            /* @__PURE__ */ jsx("div", { className: styles.textureName, children: t("modelEditorSubComponents.diffuseMap", "Diffuse Map") }),
+            /* @__PURE__ */ jsxs("div", { style: { fontSize: 9, color: "var(--nice-text-secondary, #666)" }, children: [
+              mat.map.image?.width,
+              "×",
+              mat.map.image?.height
+            ] })
+          ] })
+        ] }),
+        hasNormalMap && mat.normalMap && /* @__PURE__ */ jsxs("div", { className: styles.textureSlot, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.textureThumb, children: mat.normalMap.image != null && /* @__PURE__ */ jsx("img", { src: mat.normalMap.image.src ?? "", alt: "normal" }) }),
+          /* @__PURE__ */ jsx("div", { className: styles.textureInfo, children: /* @__PURE__ */ jsx("div", { className: styles.textureName, children: t("modelEditorSubComponents.normalMap", "Normal Map") }) })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  MaterialCard,
+  Vec3Row,
+  Vec3RowDeg
 };
-
-export { MaterialCard, Vec3Row, Vec3RowDeg };

package/dist/esm/model/ModelEditorTimeline.js

@@ -1,34 +1,234 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { NiceIcon, clickOnActivationKey, NiceButton, NiceSlider } from '@nice2dev/ui';
-import React from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import styles from './ModelEditor.module.css.js';
-import { fmtTime } from './modelEditorTypes.js';
-
+import { jsxs, jsx } from "react/jsx-runtime";
+import { NiceIcon, clickOnActivationKey, NiceButton, NiceSlider } from "@nice2dev/ui";
+import React from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import styles from "./ModelEditor.module.css.js";
+import { fmtTime } from "./modelEditorTypes.js";
 const ModelEditorTimeline = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.memo(({ api }) => {
+  /* @__PURE__ */ React.memo(({ api }) => {
     const { t } = useNiceTranslation();
-    const { bottomCollapsed, setBottomCollapsed, animations, activeAnimIdx, isPlaying, animTime, animDuration, animSpeed, setAnimSpeed, loopAnim, setLoopAnim, seekAnim, togglePlay, stopAnim, playClip, mergeInputRef, } = api;
-    return (jsxs("div", { className: `${styles.bottomPanel} ${bottomCollapsed ? styles.bottomPanelCollapsed : ''}`, children: [jsxs("div", { className: styles.bottomPanelHeader, children: [jsx("span", { role: "presentation", className: styles.bottomToggle, onClick: () => setBottomCollapsed((c) => !c), children: jsx(NiceIcon, { name: bottomCollapsed ? 'chevron-right' : 'chevron-down', size: 14 }) }), jsx("span", { role: "button", tabIndex: 0, "aria-expanded": !bottomCollapsed, onKeyDown: clickOnActivationKey, className: styles.bottomPanelTitle, onClick: () => setBottomCollapsed((c) => !c), children: animations.length !== 1
-                            ? t('modelEditorTimeline.animationClipsMany', 'Animation ({animations} clips)').replace('{animations}', String(animations.length))
-                            : t('modelEditorTimeline.animationClipsOne', 'Animation ({animations} clip)').replace('{animations}', String(animations.length)) }), jsx("div", { className: styles.menuSep }), jsxs("div", { className: styles.transportBar, children: [jsx(NiceButton, { className: styles.transportBtn, variant: "ghost", size: "sm", onClick: () => seekAnim(0), title: t('modelEditorTimeline.goToStart', 'Go to start'), "aria-label": t('modelEditorTimeline.goToStart', 'Go to start'), children: jsx(NiceIcon, { name: "chevron-left", size: 16 }) }), jsx(NiceButton, { className: styles.transportBtn, variant: isPlaying ? 'primary' : 'ghost', size: "sm", onClick: togglePlay, title: t('modelEditorTimeline.playPauseSpace', 'Play/Pause (Space)'), "aria-label": t('modelEditorTimeline.playPauseSpace', 'Play/Pause (Space)'), children: jsx(NiceIcon, { name: isPlaying ? 'pause' : 'play', size: 16 }) }), jsx(NiceButton, { className: styles.transportBtn, variant: "ghost", size: "sm", onClick: stopAnim, title: t('modelEditorTimeline.stop', 'Stop'), "aria-label": t('modelEditorTimeline.stop', 'Stop'), children: jsx(NiceIcon, { name: "stop", size: 16 }) }), jsx(NiceButton, { className: styles.transportBtn, variant: loopAnim ? 'primary' : 'ghost', size: "sm", onClick: () => setLoopAnim((v) => !v), title: t('modelEditorTimeline.loop', 'Loop'), "aria-label": t('modelEditorTimeline.loop', 'Loop'), children: jsx(NiceIcon, { name: "refresh", size: 16 }) })] }), jsxs("span", { className: styles.transportTime, children: [fmtTime(animTime), " / ", fmtTime(animDuration)] }), jsx("div", { className: styles.menuSep }), jsx("label", { className: styles.menuLabel, children: t('modelEditorTimeline.speed', 'Speed') }), jsx(NiceSlider, { min: 0.1, max: 3, step: 0.1, value: animSpeed, onChange: (val) => setAnimSpeed(val), style: { width: 60 } }), jsxs("span", { className: styles.menuLabel, children: [animSpeed.toFixed(1), "\u00D7"] })] }), !bottomCollapsed && (jsxs("div", { className: styles.animListArea, children: [jsxs("div", { className: styles.animList, children: [animations.length === 0 && (jsx("div", { style: { color: 'var(--nice-text-secondary, #666)', fontSize: 10, padding: 8 }, children: t('modelEditorTimeline.noAnimationsLoaded', 'No animations loaded') })), animations.map((anim, i) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.animItem} ${i === activeAnimIdx ? styles.animItemActive : ''}`, onClick: () => playClip(i), children: [jsx("span", { children: anim.name }), jsxs("span", { className: styles.animDuration, children: [anim.duration.toFixed(1), "s"] })] }, `${anim.name}-${i}`))), jsx("div", { style: { padding: '4px 8px' }, children: jsx(NiceButton, { className: styles.btnSecondary, variant: "ghost", size: "sm", style: { width: '100%', fontSize: 10 }, onClick: () => { var _a; return (_a = mergeInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('modelEditorTimeline.addAnimationFile', '+ Add Animation File') }) })] }), jsxs("div", { className: styles.timelineArea, children: [jsxs("div", { className: styles.timelineRuler, children: [animDuration > 0 &&
-                                        Array.from({ length: Math.ceil(animDuration) + 1 }, (_, i) => {
-                                            const pct = (i / animDuration) * 100;
-                                            return (jsxs(React.Fragment, { children: [jsx("div", { className: styles.rulerTick, style: { left: `${pct}%` } }), jsxs("span", { className: styles.rulerLabel, style: { left: `${pct}%` }, children: [i, "s"] })] }, i));
-                                        }), animDuration > 0 && (jsx("div", { className: styles.playhead, style: {
-                                            left: `${(animTime / animDuration) * 100}%`,
-                                            height: '100%',
-                                        }, children: jsx("div", { className: styles.playheadHandle }) }))] }), jsx("div", { role: "presentation", className: styles.timelineTracks, style: { height: 140, cursor: 'pointer' }, onClick: (e) => {
-                                    if (animDuration <= 0) {
-                                        return;
-                                    }
-                                    const rect = e.currentTarget.getBoundingClientRect();
-                                    const pct = (e.clientX - rect.left) / rect.width;
-                                    seekAnim(Math.max(0, Math.min(animDuration, pct * animDuration)));
-                                }, children: animDuration > 0 && (jsx("div", { className: styles.playhead, style: {
-                                        left: `${(animTime / animDuration) * 100}%`,
-                                        height: '100%',
-                                    } })) })] })] }))] }));
-}), { displayName: 'ModelEditorTimeline' });
-
-export { ModelEditorTimeline as default };
+    const {
+      bottomCollapsed,
+      setBottomCollapsed,
+      animations,
+      activeAnimIdx,
+      isPlaying,
+      animTime,
+      animDuration,
+      animSpeed,
+      setAnimSpeed,
+      loopAnim,
+      setLoopAnim,
+      seekAnim,
+      togglePlay,
+      stopAnim,
+      playClip,
+      mergeInputRef
+    } = api;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${styles.bottomPanel} ${bottomCollapsed ? styles.bottomPanelCollapsed : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.bottomPanelHeader, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: "presentation",
+                className: styles.bottomToggle,
+                onClick: () => setBottomCollapsed((c) => !c),
+                children: /* @__PURE__ */ jsx(NiceIcon, { name: bottomCollapsed ? "chevron-right" : "chevron-down", size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: "button",
+                tabIndex: 0,
+                "aria-expanded": !bottomCollapsed,
+                onKeyDown: clickOnActivationKey,
+                className: styles.bottomPanelTitle,
+                onClick: () => setBottomCollapsed((c) => !c),
+                children: animations.length !== 1 ? t(
+                  "modelEditorTimeline.animationClipsMany",
+                  "Animation ({animations} clips)"
+                ).replace("{animations}", String(animations.length)) : t("modelEditorTimeline.animationClipsOne", "Animation ({animations} clip)").replace(
+                  "{animations}",
+                  String(animations.length)
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: styles.menuSep }),
+            /* @__PURE__ */ jsxs("div", { className: styles.transportBar, children: [
+              /* @__PURE__ */ jsx(
+                NiceButton,
+                {
+                  className: styles.transportBtn,
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => seekAnim(0),
+                  title: t("modelEditorTimeline.goToStart", "Go to start"),
+                  "aria-label": t("modelEditorTimeline.goToStart", "Go to start"),
+                  children: /* @__PURE__ */ jsx(NiceIcon, { name: "chevron-left", size: 16 })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NiceButton,
+                {
+                  className: styles.transportBtn,
+                  variant: isPlaying ? "primary" : "ghost",
+                  size: "sm",
+                  onClick: togglePlay,
+                  title: t("modelEditorTimeline.playPauseSpace", "Play/Pause (Space)"),
+                  "aria-label": t("modelEditorTimeline.playPauseSpace", "Play/Pause (Space)"),
+                  children: /* @__PURE__ */ jsx(NiceIcon, { name: isPlaying ? "pause" : "play", size: 16 })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NiceButton,
+                {
+                  className: styles.transportBtn,
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: stopAnim,
+                  title: t("modelEditorTimeline.stop", "Stop"),
+                  "aria-label": t("modelEditorTimeline.stop", "Stop"),
+                  children: /* @__PURE__ */ jsx(NiceIcon, { name: "stop", size: 16 })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NiceButton,
+                {
+                  className: styles.transportBtn,
+                  variant: loopAnim ? "primary" : "ghost",
+                  size: "sm",
+                  onClick: () => setLoopAnim((v) => !v),
+                  title: t("modelEditorTimeline.loop", "Loop"),
+                  "aria-label": t("modelEditorTimeline.loop", "Loop"),
+                  children: /* @__PURE__ */ jsx(NiceIcon, { name: "refresh", size: 16 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: styles.transportTime, children: [
+              fmtTime(animTime),
+              " / ",
+              fmtTime(animDuration)
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: styles.menuSep }),
+            /* @__PURE__ */ jsx("label", { className: styles.menuLabel, children: t("modelEditorTimeline.speed", "Speed") }),
+            /* @__PURE__ */ jsx(
+              NiceSlider,
+              {
+                min: 0.1,
+                max: 3,
+                step: 0.1,
+                value: animSpeed,
+                onChange: (val) => setAnimSpeed(val),
+                style: { width: 60 }
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: styles.menuLabel, children: [
+              animSpeed.toFixed(1),
+              "×"
+            ] })
+          ] }),
+          !bottomCollapsed && /* @__PURE__ */ jsxs("div", { className: styles.animListArea, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.animList, children: [
+              animations.length === 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: { color: "var(--nice-text-secondary, #666)", fontSize: 10, padding: 8 },
+                  children: t("modelEditorTimeline.noAnimationsLoaded", "No animations loaded")
+                }
+              ),
+              animations.map((anim, i) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "button",
+                  tabIndex: 0,
+                  onKeyDown: clickOnActivationKey,
+                  className: `${styles.animItem} ${i === activeAnimIdx ? styles.animItemActive : ""}`,
+                  onClick: () => playClip(i),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: anim.name }),
+                    /* @__PURE__ */ jsxs("span", { className: styles.animDuration, children: [
+                      anim.duration.toFixed(1),
+                      "s"
+                    ] })
+                  ]
+                },
+                `${anim.name}-${i}`
+              )),
+              /* @__PURE__ */ jsx("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ jsx(
+                NiceButton,
+                {
+                  className: styles.btnSecondary,
+                  variant: "ghost",
+                  size: "sm",
+                  style: { width: "100%", fontSize: 10 },
+                  onClick: () => mergeInputRef.current?.click(),
+                  children: t("modelEditorTimeline.addAnimationFile", "+ Add Animation File")
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.timelineArea, children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.timelineRuler, children: [
+                animDuration > 0 && Array.from({ length: Math.ceil(animDuration) + 1 }, (_, i) => {
+                  const pct = i / animDuration * 100;
+                  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                    /* @__PURE__ */ jsx("div", { className: styles.rulerTick, style: { left: `${pct}%` } }),
+                    /* @__PURE__ */ jsxs("span", { className: styles.rulerLabel, style: { left: `${pct}%` }, children: [
+                      i,
+                      "s"
+                    ] })
+                  ] }, i);
+                }),
+                animDuration > 0 && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: styles.playhead,
+                    style: {
+                      left: `${animTime / animDuration * 100}%`,
+                      height: "100%"
+                    },
+                    children: /* @__PURE__ */ jsx("div", { className: styles.playheadHandle })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "presentation",
+                  className: styles.timelineTracks,
+                  style: { height: 140, cursor: "pointer" },
+                  onClick: (e) => {
+                    if (animDuration <= 0) {
+                      return;
+                    }
+                    const rect = e.currentTarget.getBoundingClientRect();
+                    const pct = (e.clientX - rect.left) / rect.width;
+                    seekAnim(Math.max(0, Math.min(animDuration, pct * animDuration)));
+                  },
+                  children: animDuration > 0 && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: styles.playhead,
+                      style: {
+                        left: `${animTime / animDuration * 100}%`,
+                        height: "100%"
+                      }
+                    }
+                  )
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    );
+  }),
+  { displayName: "ModelEditorTimeline" }
+);
+export {
+  ModelEditorTimeline as default
+};