@nice2dev/ui-3d 1.3.14 → 1.3.16

package/dist/esm/model/ModelViewer.js

@@ -1,66 +1,393 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { NiceButton, NiceIcon, NiceSelect, NiceSlider } from '@nice2dev/ui';
-import { useState, useRef, useCallback } from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import styles from './ModelViewer.module.css.js';
-import { useModelViewer } from './useModelViewer.js';
-
-const NAV_MODES = ['orbit', 'fps', 'fly', 'walkthrough'];
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { NiceButton, NiceIcon, NiceSelect, NiceSlider } from "@nice2dev/ui";
+import { useState, useRef, useCallback } from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import styles from "./ModelViewer.module.css.js";
+import { useModelViewer } from "./useModelViewer.js";
+const NAV_MODES = ["orbit", "fps", "fly", "walkthrough"];
 const NAV_META = {
-    orbit: { icon: 'globe', label: 'Orbit' },
-    fps: { icon: 'user', label: 'FPS' },
-    fly: { icon: 'rocket', label: 'Fly' },
-    walkthrough: { icon: 'home', label: 'Walk' },
+  orbit: { icon: "globe", label: "Orbit" },
+  fps: { icon: "user", label: "FPS" },
+  fly: { icon: "rocket", label: "Fly" },
+  walkthrough: { icon: "home", label: "Walk" }
 };
-const NavLabel = ({ mode }) => (jsxs(Fragment, { children: [jsx(NiceIcon, { name: NAV_META[mode].icon, size: 14 }), " ", NAV_META[mode].label] }));
-const NiceModelViewer = ({ className, showToolbar = true, showStatusBar = true, showInfoPanel = true, toolbarExtra, onFileDrop, children, ...viewerProps }) => {
-    const { t } = useNiceTranslation();
-    const api = useModelViewer(viewerProps);
-    const [panelOpen, setPanelOpen] = useState(false);
-    const [dragOver, setDragOver] = useState(false);
-    const fileInputRef = useRef(null);
-    /* ── drag & drop ── */
-    const handleDragOver = useCallback((e) => {
-        e.preventDefault();
-        setDragOver(true);
-    }, []);
-    const handleDragLeave = useCallback((e) => {
-        e.preventDefault();
-        setDragOver(false);
-    }, []);
-    const handleDrop = useCallback((e) => {
-        var _a;
-        e.preventDefault();
-        setDragOver(false);
-        const file = (_a = e.dataTransfer.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (file) {
-            onFileDrop === null || onFileDrop === void 0 ? void 0 : onFileDrop(file);
-            api.loadFile(file);
+const NavLabel = ({ mode }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(NiceIcon, { name: NAV_META[mode].icon, size: 14 }),
+  " ",
+  NAV_META[mode].label
+] });
+const NiceModelViewer = ({
+  className,
+  showToolbar = true,
+  showStatusBar = true,
+  showInfoPanel = true,
+  toolbarExtra,
+  onFileDrop,
+  children,
+  ...viewerProps
+}) => {
+  const { t } = useNiceTranslation();
+  const api = useModelViewer(viewerProps);
+  const [panelOpen, setPanelOpen] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+  const fileInputRef = useRef(null);
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    setDragOver(true);
+  }, []);
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    setDragOver(false);
+  }, []);
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      setDragOver(false);
+      const file = e.dataTransfer.files?.[0];
+      if (file) {
+        onFileDrop?.(file);
+        api.loadFile(file);
+      }
+    },
+    [api, onFileDrop]
+  );
+  const cycleNav = useCallback(() => {
+    const idx = NAV_MODES.indexOf(api.navigationMode);
+    api.setNavigationMode(NAV_MODES[(idx + 1) % NAV_MODES.length]);
+  }, [api]);
+  return /* @__PURE__ */ jsxs("div", { className: `${styles.root} ${className ?? ""}`, children: [
+    showToolbar && /* @__PURE__ */ jsxs("div", { className: styles.toolbar, children: [
+      /* @__PURE__ */ jsxs(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: "ghost",
+          size: "sm",
+          title: t("modelViewer.openFile", "Open file…"),
+          onClick: () => fileInputRef.current?.click(),
+          children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "folder", size: 14 }),
+            " ",
+            t("modelViewer.open", "Open")
+          ]
         }
-    }, [api, onFileDrop]);
-    /* ── nav cycle ── */
-    const cycleNav = useCallback(() => {
-        const idx = NAV_MODES.indexOf(api.navigationMode);
-        api.setNavigationMode(NAV_MODES[(idx + 1) % NAV_MODES.length]);
-    }, [api]);
-    return (jsxs("div", { className: `${styles.root} ${className !== null && className !== void 0 ? className : ''}`, children: [showToolbar && (jsxs("div", { className: styles.toolbar, children: [jsxs(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", title: t('modelViewer.openFile', 'Open file…'), onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: [jsx(NiceIcon, { name: "folder", size: 14 }), " ", t('modelViewer.open', 'Open')] }), jsx("input", { ref: fileInputRef, type: "file", accept: ".fbx,.glb,.gltf,.obj,.dae,.stl,.ply", style: { display: 'none' }, onChange: (e) => {
-                            var _a;
-                            const f = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-                            if (f) {
-                                api.loadFile(f);
-                            }
-                            e.target.value = '';
-                        } }), jsx("div", { className: styles.toolSep }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", title: t('modelViewer.navigationMode', 'Navigation mode'), onClick: cycleNav, children: jsx(NavLabel, { mode: api.navigationMode }) }), jsx(NiceButton, { className: styles.toolBtn, variant: api.wireframe ? 'primary' : 'ghost', size: "sm", onClick: () => api.setWireframe(!api.wireframe), title: t('modelViewer.wireframe', 'Wireframe'), "aria-label": t('modelViewer.wireframe', 'Wireframe'), children: jsx(NiceIcon, { name: "square", size: 16 }) }), jsx(NiceButton, { className: styles.toolBtn, variant: api.showGrid ? 'primary' : 'ghost', size: "sm", onClick: () => api.setShowGrid(!api.showGrid), title: t('modelViewer.grid', 'Grid'), "aria-label": t('modelViewer.grid', 'Grid'), children: jsx(NiceIcon, { name: "grid", size: 16 }) }), jsx(NiceButton, { className: styles.toolBtn, variant: api.clippingEnabled ? 'primary' : 'ghost', size: "sm", onClick: () => api.setClippingEnabled(!api.clippingEnabled), title: t('modelViewer.clippingPlane', 'Clipping plane'), "aria-label": t('modelViewer.clippingPlane', 'Clipping plane'), children: jsx(NiceIcon, { name: "scissors", size: 16 }) }), api.clippingEnabled && (jsxs(Fragment, { children: [jsx(NiceSelect, { className: styles.animSelect, value: api.clippingAxis, onChange: (val) => api.setClippingAxis(val), options: [
-                                    { value: 'x', label: 'X' },
-                                    { value: 'y', label: 'Y' },
-                                    { value: 'z', label: 'Z' },
-                                ] }), jsx(NiceSlider, { min: -10, max: 10, step: 0.1, value: api.clippingPosition, onChange: (val) => api.setClippingPosition(val), style: { width: 60 } })] })), jsx("div", { className: styles.toolSep }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.zoomToFit, title: t('modelViewer.zoomToFit', 'Zoom to fit'), "aria-label": t('modelViewer.zoomToFit', 'Zoom to fit'), children: jsx(NiceIcon, { name: "search", size: 16 }) }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.resetCamera, title: t('modelViewer.resetCamera', 'Reset camera'), "aria-label": t('modelViewer.resetCamera', 'Reset camera'), children: jsx(NiceIcon, { name: "home", size: 16 }) }), jsx("div", { className: styles.toolSep }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => {
-                            const url = api.screenshot();
-                            const a = document.createElement('a');
-                            a.href = url;
-                            a.download = 'screenshot.png';
-                            a.click();
-                        }, title: t('modelViewer.screenshot', 'Screenshot'), "aria-label": t('modelViewer.screenshot', 'Screenshot'), children: jsx(NiceIcon, { name: "camera", size: 16 }) }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.toggleFullscreen, title: t('modelViewer.fullscreen', 'Fullscreen'), "aria-label": t('modelViewer.fullscreen', 'Fullscreen'), children: jsx(NiceIcon, { name: api.isFullscreen ? 'collapse' : 'expand', size: 16 }) }), toolbarExtra, showInfoPanel && (jsx("div", { className: styles.toolRight, children: jsx(NiceButton, { className: `${styles.toolBtn} ${panelOpen ? styles.active : ''}`, variant: panelOpen ? 'primary' : 'ghost', size: "sm", onClick: () => setPanelOpen(!panelOpen), title: t('modelViewer.infoPanel', 'Info panel'), "aria-label": t('modelViewer.infoPanel', 'Info panel'), children: jsx(NiceIcon, { name: "info", size: 16 }) }) }))] })), jsxs("div", { className: styles.viewport, ref: api.mountRef, tabIndex: 0, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [api.loading && (jsxs("div", { className: styles.loadingOverlay, children: [jsx("span", { className: styles.loadingText, children: t('modelViewer.loadingModel', 'Loading model…') }), jsx("div", { className: styles.loadingBar, children: jsx("div", { className: styles.loadingBarFill, style: { width: `${(api.loadProgress * 100).toFixed(0)}%` } }) })] })), api.error && (jsxs("div", { className: styles.errorOverlay, children: [jsx(NiceIcon, { name: "warning", size: 28 }), jsx("span", { style: { marginTop: 8 }, children: api.error })] })), dragOver && (jsx("div", { className: styles.dropZone, children: t('modelViewer.drop3dModelFileHere', 'Drop 3D model file here') }))] }), jsxs("div", { className: `${styles.sidePanel} ${!panelOpen ? styles.hidden : ''}`, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: t('modelViewer.modelInfo', 'Model Info') }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: t('modelViewer.triangles', 'Triangles') }), jsx("span", { children: api.polyCount.toLocaleString() })] }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: t('modelViewer.meshes', 'Meshes') }), jsx("span", { children: api.meshCount })] }), api.dimensions && (jsxs(Fragment, { children: [jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: t('modelViewer.width', 'Width') }), jsx("span", { children: api.dimensions.width })] }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: t('modelViewer.height', 'Height') }), jsx("span", { children: api.dimensions.height })] }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: t('modelViewer.depth', 'Depth') }), jsx("span", { children: api.dimensions.depth })] })] }))] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: t('modelViewer.navigation', 'Navigation') }), NAV_MODES.map((m) => (jsx(NiceButton, { className: styles.toolBtn, variant: api.navigationMode === m ? 'primary' : 'ghost', size: "sm", onClick: () => api.setNavigationMode(m), children: jsx(NavLabel, { mode: m }) }, m)))] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: t('modelViewer.autoRotate', 'Auto Rotate') }), jsx(NiceSlider, { min: 0, max: 10, step: 0.5, value: api.autoRotateSpeed, onChange: (val) => api.setAutoRotateSpeed(val), style: { width: '100%' } })] }), api.animations.length > 0 && (jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: t('modelViewer.animations', 'Animations') }), api.animations.map((name, i) => (jsxs(NiceButton, { className: styles.toolBtn, variant: api.activeAnimIdx === i ? 'primary' : 'ghost', size: "sm", onClick: () => api.playAnimation(i), children: [jsx(NiceIcon, { name: "play", size: 14 }), " ", name] }, i)))] }))] }), jsxs("div", { className: `${styles.animBar} ${api.animations.length === 0 ? styles.hidden : ''}`, children: [jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.togglePlay, "aria-label": t('modelViewer.playPause', 'Play/Pause'), children: jsx(NiceIcon, { name: api.isPlaying ? 'pause' : 'play', size: 16 }) }), jsx(NiceSelect, { className: styles.animSelect, value: String(api.activeAnimIdx), onChange: (val) => api.playAnimation(parseInt(val)), options: api.animations.map((n, i) => ({ value: String(i), label: n })) }), jsx(NiceSlider, { className: styles.animSlider, min: 0, max: api.animDuration || 1, step: 0.01, value: api.animTime, onChange: (val) => api.seekAnim(val) }), jsxs("span", { className: styles.toolLabel, children: [api.animTime.toFixed(1), "s / ", api.animDuration.toFixed(1), "s"] })] }), showStatusBar && (jsxs("div", { className: styles.statusBar, children: [jsx("span", { children: api.statusText }), jsxs("div", { className: styles.statusRight, children: [jsx("span", { children: jsx(NavLabel, { mode: api.navigationMode }) }), api.dimensions && (jsxs("span", { children: [api.dimensions.width, "\u00D7", api.dimensions.height, "\u00D7", api.dimensions.depth] }))] })] })), children === null || children === void 0 ? void 0 : children(api)] }));
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          accept: ".fbx,.glb,.gltf,.obj,.dae,.stl,.ply",
+          style: { display: "none" },
+          onChange: (e) => {
+            const f = e.target.files?.[0];
+            if (f) {
+              api.loadFile(f);
+            }
+            e.target.value = "";
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: styles.toolSep }),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: "ghost",
+          size: "sm",
+          title: t("modelViewer.navigationMode", "Navigation mode"),
+          onClick: cycleNav,
+          children: /* @__PURE__ */ jsx(NavLabel, { mode: api.navigationMode })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: api.wireframe ? "primary" : "ghost",
+          size: "sm",
+          onClick: () => api.setWireframe(!api.wireframe),
+          title: t("modelViewer.wireframe", "Wireframe"),
+          "aria-label": t("modelViewer.wireframe", "Wireframe"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "square", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: api.showGrid ? "primary" : "ghost",
+          size: "sm",
+          onClick: () => api.setShowGrid(!api.showGrid),
+          title: t("modelViewer.grid", "Grid"),
+          "aria-label": t("modelViewer.grid", "Grid"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "grid", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: api.clippingEnabled ? "primary" : "ghost",
+          size: "sm",
+          onClick: () => api.setClippingEnabled(!api.clippingEnabled),
+          title: t("modelViewer.clippingPlane", "Clipping plane"),
+          "aria-label": t("modelViewer.clippingPlane", "Clipping plane"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "scissors", size: 16 })
+        }
+      ),
+      api.clippingEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          NiceSelect,
+          {
+            className: styles.animSelect,
+            value: api.clippingAxis,
+            onChange: (val) => api.setClippingAxis(val),
+            options: [
+              { value: "x", label: "X" },
+              { value: "y", label: "Y" },
+              { value: "z", label: "Z" }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NiceSlider,
+          {
+            min: -10,
+            max: 10,
+            step: 0.1,
+            value: api.clippingPosition,
+            onChange: (val) => api.setClippingPosition(val),
+            style: { width: 60 }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: styles.toolSep }),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: api.zoomToFit,
+          title: t("modelViewer.zoomToFit", "Zoom to fit"),
+          "aria-label": t("modelViewer.zoomToFit", "Zoom to fit"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "search", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: api.resetCamera,
+          title: t("modelViewer.resetCamera", "Reset camera"),
+          "aria-label": t("modelViewer.resetCamera", "Reset camera"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "home", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: styles.toolSep }),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => {
+            const url = api.screenshot();
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = "screenshot.png";
+            a.click();
+          },
+          title: t("modelViewer.screenshot", "Screenshot"),
+          "aria-label": t("modelViewer.screenshot", "Screenshot"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "camera", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: api.toggleFullscreen,
+          title: t("modelViewer.fullscreen", "Fullscreen"),
+          "aria-label": t("modelViewer.fullscreen", "Fullscreen"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: api.isFullscreen ? "collapse" : "expand", size: 16 })
+        }
+      ),
+      toolbarExtra,
+      showInfoPanel && /* @__PURE__ */ jsx("div", { className: styles.toolRight, children: /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: `${styles.toolBtn} ${panelOpen ? styles.active : ""}`,
+          variant: panelOpen ? "primary" : "ghost",
+          size: "sm",
+          onClick: () => setPanelOpen(!panelOpen),
+          title: t("modelViewer.infoPanel", "Info panel"),
+          "aria-label": t("modelViewer.infoPanel", "Info panel"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "info", size: 16 })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: styles.viewport,
+        ref: api.mountRef,
+        tabIndex: 0,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        children: [
+          api.loading && /* @__PURE__ */ jsxs("div", { className: styles.loadingOverlay, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.loadingText, children: t("modelViewer.loadingModel", "Loading model…") }),
+            /* @__PURE__ */ jsx("div", { className: styles.loadingBar, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles.loadingBarFill,
+                style: { width: `${(api.loadProgress * 100).toFixed(0)}%` }
+              }
+            ) })
+          ] }),
+          api.error && /* @__PURE__ */ jsxs("div", { className: styles.errorOverlay, children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "warning", size: 28 }),
+            /* @__PURE__ */ jsx("span", { style: { marginTop: 8 }, children: api.error })
+          ] }),
+          dragOver && /* @__PURE__ */ jsx("div", { className: styles.dropZone, children: t("modelViewer.drop3dModelFileHere", "Drop 3D model file here") })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: `${styles.sidePanel} ${!panelOpen ? styles.hidden : ""}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.panelTitle, children: t("modelViewer.modelInfo", "Model Info") }),
+        /* @__PURE__ */ jsxs("div", { className: styles.panelRow, children: [
+          /* @__PURE__ */ jsx("label", { children: t("modelViewer.triangles", "Triangles") }),
+          /* @__PURE__ */ jsx("span", { children: api.polyCount.toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.panelRow, children: [
+          /* @__PURE__ */ jsx("label", { children: t("modelViewer.meshes", "Meshes") }),
+          /* @__PURE__ */ jsx("span", { children: api.meshCount })
+        ] }),
+        api.dimensions && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.panelRow, children: [
+            /* @__PURE__ */ jsx("label", { children: t("modelViewer.width", "Width") }),
+            /* @__PURE__ */ jsx("span", { children: api.dimensions.width })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.panelRow, children: [
+            /* @__PURE__ */ jsx("label", { children: t("modelViewer.height", "Height") }),
+            /* @__PURE__ */ jsx("span", { children: api.dimensions.height })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.panelRow, children: [
+            /* @__PURE__ */ jsx("label", { children: t("modelViewer.depth", "Depth") }),
+            /* @__PURE__ */ jsx("span", { children: api.dimensions.depth })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.panelTitle, children: t("modelViewer.navigation", "Navigation") }),
+        NAV_MODES.map((m) => /* @__PURE__ */ jsx(
+          NiceButton,
+          {
+            className: styles.toolBtn,
+            variant: api.navigationMode === m ? "primary" : "ghost",
+            size: "sm",
+            onClick: () => api.setNavigationMode(m),
+            children: /* @__PURE__ */ jsx(NavLabel, { mode: m })
+          },
+          m
+        ))
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.panelTitle, children: t("modelViewer.autoRotate", "Auto Rotate") }),
+        /* @__PURE__ */ jsx(
+          NiceSlider,
+          {
+            min: 0,
+            max: 10,
+            step: 0.5,
+            value: api.autoRotateSpeed,
+            onChange: (val) => api.setAutoRotateSpeed(val),
+            style: { width: "100%" }
+          }
+        )
+      ] }),
+      api.animations.length > 0 && /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.panelTitle, children: t("modelViewer.animations", "Animations") }),
+        api.animations.map((name, i) => /* @__PURE__ */ jsxs(
+          NiceButton,
+          {
+            className: styles.toolBtn,
+            variant: api.activeAnimIdx === i ? "primary" : "ghost",
+            size: "sm",
+            onClick: () => api.playAnimation(i),
+            children: [
+              /* @__PURE__ */ jsx(NiceIcon, { name: "play", size: 14 }),
+              " ",
+              name
+            ]
+          },
+          i
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: `${styles.animBar} ${api.animations.length === 0 ? styles.hidden : ""}`, children: [
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: api.togglePlay,
+          "aria-label": t("modelViewer.playPause", "Play/Pause"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: api.isPlaying ? "pause" : "play", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceSelect,
+        {
+          className: styles.animSelect,
+          value: String(api.activeAnimIdx),
+          onChange: (val) => api.playAnimation(parseInt(val)),
+          options: api.animations.map((n, i) => ({ value: String(i), label: n }))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceSlider,
+        {
+          className: styles.animSlider,
+          min: 0,
+          max: api.animDuration || 1,
+          step: 0.01,
+          value: api.animTime,
+          onChange: (val) => api.seekAnim(val)
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: styles.toolLabel, children: [
+        api.animTime.toFixed(1),
+        "s / ",
+        api.animDuration.toFixed(1),
+        "s"
+      ] })
+    ] }),
+    showStatusBar && /* @__PURE__ */ jsxs("div", { className: styles.statusBar, children: [
+      /* @__PURE__ */ jsx("span", { children: api.statusText }),
+      /* @__PURE__ */ jsxs("div", { className: styles.statusRight, children: [
+        /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(NavLabel, { mode: api.navigationMode }) }),
+        api.dimensions && /* @__PURE__ */ jsxs("span", { children: [
+          api.dimensions.width,
+          "×",
+          api.dimensions.height,
+          "×",
+          api.dimensions.depth
+        ] })
+      ] })
+    ] }),
+    children?.(api)
+  ] });
+};
+export {
+  NiceModelViewer
 };
-
-export { NiceModelViewer };

package/dist/esm/model/ModelViewer.module.css.js

@@ -1,3 +1,77 @@
-var styles = {"root":"ModelViewer-module_root__6Fbj3","toolbar":"ModelViewer-module_toolbar__EQJRN","toolBtn":"ModelViewer-module_toolBtn__f9833","active":"ModelViewer-module_active__MgURC","toolSep":"ModelViewer-module_toolSep__5zuAK","toolLabel":"ModelViewer-module_toolLabel__PcpJC","toolRight":"ModelViewer-module_toolRight__VSuzD","viewport":"ModelViewer-module_viewport__-1llx","loadingOverlay":"ModelViewer-module_loadingOverlay__Ayyci","loadingBar":"ModelViewer-module_loadingBar__RDqVv","loadingBarFill":"ModelViewer-module_loadingBarFill__zvIoP","loadingText":"ModelViewer-module_loadingText__6OGeA","errorOverlay":"ModelViewer-module_errorOverlay__ASUqN","sidePanel":"ModelViewer-module_sidePanel__-QFkd","hidden":"ModelViewer-module_hidden__yoMuq","panelSection":"ModelViewer-module_panelSection__bH-O3","panelTitle":"ModelViewer-module_panelTitle__xsn3e","panelRow":"ModelViewer-module_panelRow__3QxnD","animBar":"ModelViewer-module_animBar__qcYi5","animSlider":"ModelViewer-module_animSlider__9AQzN","animSelect":"ModelViewer-module_animSelect__LhFWD","statusBar":"ModelViewer-module_statusBar__-3uuA","statusRight":"ModelViewer-module_statusRight__vI51s","dropZone":"ModelViewer-module_dropZone__eNrPo"};
-
-export { styles as default };
+const root = "_root_bqnwl_5";
+const toolbar = "_toolbar_bqnwl_33";
+const toolBtn = "_toolBtn_bqnwl_55";
+const active = "_active_bqnwl_89";
+const toolSep = "_toolSep_bqnwl_105";
+const toolLabel = "_toolLabel_bqnwl_117";
+const toolRight = "_toolRight_bqnwl_129";
+const viewport = "_viewport_bqnwl_145";
+const loadingOverlay = "_loadingOverlay_bqnwl_189";
+const loadingBar = "_loadingBar_bqnwl_209";
+const loadingBarFill = "_loadingBarFill_bqnwl_225";
+const loadingText = "_loadingText_bqnwl_235";
+const errorOverlay = "_errorOverlay_bqnwl_249";
+const sidePanel = "_sidePanel_bqnwl_275";
+const hidden = "_hidden_bqnwl_307";
+const panelSection = "_panelSection_bqnwl_313";
+const panelTitle = "_panelTitle_bqnwl_323";
+const panelRow = "_panelRow_bqnwl_337";
+const animBar = "_animBar_bqnwl_369";
+const animSlider = "_animSlider_bqnwl_395";
+const animSelect = "_animSelect_bqnwl_427";
+const statusBar = "_statusBar_bqnwl_449";
+const statusRight = "_statusRight_bqnwl_473";
+const dropZone = "_dropZone_bqnwl_533";
+const styles = {
+  root,
+  toolbar,
+  toolBtn,
+  active,
+  toolSep,
+  toolLabel,
+  toolRight,
+  viewport,
+  loadingOverlay,
+  loadingBar,
+  loadingBarFill,
+  loadingText,
+  errorOverlay,
+  sidePanel,
+  hidden,
+  panelSection,
+  panelTitle,
+  panelRow,
+  animBar,
+  animSlider,
+  animSelect,
+  statusBar,
+  statusRight,
+  dropZone
+};
+export {
+  active,
+  animBar,
+  animSelect,
+  animSlider,
+  styles as default,
+  dropZone,
+  errorOverlay,
+  hidden,
+  loadingBar,
+  loadingBarFill,
+  loadingOverlay,
+  loadingText,
+  panelRow,
+  panelSection,
+  panelTitle,
+  root,
+  sidePanel,
+  statusBar,
+  statusRight,
+  toolBtn,
+  toolLabel,
+  toolRight,
+  toolSep,
+  toolbar,
+  viewport
+};