@nice2dev/ui-3d 1.3.14 → 1.3.16

package/dist/esm/model/ModelEditorToolbar.js

@@ -1,14 +1,172 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { NiceButton, NiceIcon } from '@nice2dev/ui';
-import React from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import styles from './ModelEditor.module.css.js';
-
+import { jsxs, jsx } from "react/jsx-runtime";
+import { NiceButton, NiceIcon } from "@nice2dev/ui";
+import React from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import styles from "./ModelEditor.module.css.js";
 const ModelEditorToolbar = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.memo(({ api }) => {
+  /* @__PURE__ */ React.memo(({ api }) => {
     const { t } = useNiceTranslation();
-    const { transformMode, setTransformMode, snapEnabled, setSnapEnabled, gizmoSpace, setGizmoSpace, rootObjectRef, focusOnObject, setCameraPreset, deleteSelected, duplicateSelected, selectedNode, } = api;
-    return (jsxs("div", { className: styles.toolbar, children: [jsx(NiceButton, { className: styles.toolBtn, variant: transformMode === 'translate' ? 'primary' : 'ghost', size: "sm", onClick: () => setTransformMode('translate'), title: t('modelEditorToolbar.translateG', 'Translate (G)'), "aria-label": t('modelEditorToolbar.translateG', 'Translate (G)'), children: jsx(NiceIcon, { name: "move", size: 16 }) }), jsx(NiceButton, { className: styles.toolBtn, variant: transformMode === 'rotate' ? 'primary' : 'ghost', size: "sm", onClick: () => setTransformMode('rotate'), title: t('modelEditorToolbar.rotateR', 'Rotate (R)'), "aria-label": t('modelEditorToolbar.rotateR', 'Rotate (R)'), children: jsx(NiceIcon, { name: "refresh", size: 16 }) }), jsx(NiceButton, { className: styles.toolBtn, variant: transformMode === 'scale' ? 'primary' : 'ghost', size: "sm", onClick: () => setTransformMode('scale'), title: t('modelEditorToolbar.scaleS', 'Scale (S)'), "aria-label": t('modelEditorToolbar.scaleS', 'Scale (S)'), children: jsx(NiceIcon, { name: "hexagon", size: 16 }) }), jsx("div", { className: styles.toolSep }), jsx(NiceButton, { className: styles.toolBtn, variant: snapEnabled ? 'primary' : 'ghost', size: "sm", onClick: () => setSnapEnabled((v) => !v), title: t('modelEditorToolbar.snapToGridState', 'Snap to Grid ({state})').replace('{state}', snapEnabled ? t('modelEditorToolbar.on', 'ON') : t('modelEditorToolbar.off', 'OFF')), "aria-label": t('modelEditorToolbar.snapToGrid', 'Snap to Grid'), children: jsx(NiceIcon, { name: "grid", size: 16 }) }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => setGizmoSpace((s) => (s === 'local' ? 'world' : 'local')), title: t('modelEditorToolbar.orientation', 'Orientation: {gizmoSpace}').replace('{gizmoSpace}', String(gizmoSpace)), "aria-label": t('modelEditorToolbar.orientation', 'Orientation: {gizmoSpace}').replace('{gizmoSpace}', String(gizmoSpace)), children: jsx(NiceIcon, { name: gizmoSpace === 'local' ? 'target' : 'globe', size: 16 }) }), jsx("div", { className: styles.toolSep }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => rootObjectRef.current && focusOnObject(rootObjectRef.current), title: t('modelEditorToolbar.focusF', 'Focus (F)'), "aria-label": t('modelEditorToolbar.focusF', 'Focus (F)'), children: jsx(NiceIcon, { name: "target", size: 16 }) }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => setCameraPreset('front'), title: t('modelEditorToolbar.frontViewNumpad1', 'Front view (Numpad 1)'), children: "1" }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => setCameraPreset('right'), title: t('modelEditorToolbar.rightViewNumpad3', 'Right view (Numpad 3)'), children: "3" }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => setCameraPreset('top'), title: t('modelEditorToolbar.topViewNumpad7', 'Top view (Numpad 7)'), children: "7" }), jsx("div", { className: styles.toolSep }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: deleteSelected, title: t('modelEditorToolbar.deleteSelectedDel', 'Delete selected (Del)'), "aria-label": t('modelEditorToolbar.deleteSelectedDel', 'Delete selected (Del)'), children: jsx(NiceIcon, { name: "trash", size: 16 }) }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: duplicateSelected, title: t('modelEditorToolbar.duplicateShiftD', 'Duplicate (Shift+D)'), disabled: !selectedNode, "aria-label": t('modelEditorToolbar.duplicateShiftD', 'Duplicate (Shift+D)'), children: jsx(NiceIcon, { name: "clipboard", size: 16 }) })] }));
-}), { displayName: 'ModelEditorToolbar' });
-
-export { ModelEditorToolbar as default };
+    const {
+      transformMode,
+      setTransformMode,
+      snapEnabled,
+      setSnapEnabled,
+      gizmoSpace,
+      setGizmoSpace,
+      rootObjectRef,
+      focusOnObject,
+      setCameraPreset,
+      deleteSelected,
+      duplicateSelected,
+      selectedNode
+    } = api;
+    return /* @__PURE__ */ jsxs("div", { className: styles.toolbar, children: [
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: transformMode === "translate" ? "primary" : "ghost",
+          size: "sm",
+          onClick: () => setTransformMode("translate"),
+          title: t("modelEditorToolbar.translateG", "Translate (G)"),
+          "aria-label": t("modelEditorToolbar.translateG", "Translate (G)"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "move", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: transformMode === "rotate" ? "primary" : "ghost",
+          size: "sm",
+          onClick: () => setTransformMode("rotate"),
+          title: t("modelEditorToolbar.rotateR", "Rotate (R)"),
+          "aria-label": t("modelEditorToolbar.rotateR", "Rotate (R)"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "refresh", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: transformMode === "scale" ? "primary" : "ghost",
+          size: "sm",
+          onClick: () => setTransformMode("scale"),
+          title: t("modelEditorToolbar.scaleS", "Scale (S)"),
+          "aria-label": t("modelEditorToolbar.scaleS", "Scale (S)"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "hexagon", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: styles.toolSep }),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: snapEnabled ? "primary" : "ghost",
+          size: "sm",
+          onClick: () => setSnapEnabled((v) => !v),
+          title: t("modelEditorToolbar.snapToGridState", "Snap to Grid ({state})").replace(
+            "{state}",
+            snapEnabled ? t("modelEditorToolbar.on", "ON") : t("modelEditorToolbar.off", "OFF")
+          ),
+          "aria-label": t("modelEditorToolbar.snapToGrid", "Snap to Grid"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "grid", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => setGizmoSpace((s) => s === "local" ? "world" : "local"),
+          title: t("modelEditorToolbar.orientation", "Orientation: {gizmoSpace}").replace(
+            "{gizmoSpace}",
+            String(gizmoSpace)
+          ),
+          "aria-label": t("modelEditorToolbar.orientation", "Orientation: {gizmoSpace}").replace(
+            "{gizmoSpace}",
+            String(gizmoSpace)
+          ),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: gizmoSpace === "local" ? "target" : "globe", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: styles.toolSep }),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => rootObjectRef.current && focusOnObject(rootObjectRef.current),
+          title: t("modelEditorToolbar.focusF", "Focus (F)"),
+          "aria-label": t("modelEditorToolbar.focusF", "Focus (F)"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "target", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => setCameraPreset("front"),
+          title: t("modelEditorToolbar.frontViewNumpad1", "Front view (Numpad 1)"),
+          children: "1"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => setCameraPreset("right"),
+          title: t("modelEditorToolbar.rightViewNumpad3", "Right view (Numpad 3)"),
+          children: "3"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => setCameraPreset("top"),
+          title: t("modelEditorToolbar.topViewNumpad7", "Top view (Numpad 7)"),
+          children: "7"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: styles.toolSep }),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: deleteSelected,
+          title: t("modelEditorToolbar.deleteSelectedDel", "Delete selected (Del)"),
+          "aria-label": t("modelEditorToolbar.deleteSelectedDel", "Delete selected (Del)"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "trash", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.toolBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: duplicateSelected,
+          title: t("modelEditorToolbar.duplicateShiftD", "Duplicate (Shift+D)"),
+          disabled: !selectedNode,
+          "aria-label": t("modelEditorToolbar.duplicateShiftD", "Duplicate (Shift+D)"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "clipboard", size: 16 })
+        }
+      )
+    ] });
+  }),
+  { displayName: "ModelEditorToolbar" }
+);
+export {
+  ModelEditorToolbar as default
+};

package/dist/esm/model/ModelEditorViewport.js

@@ -1,41 +1,235 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { NiceIcon, clickOnActivationKey } from '@nice2dev/ui';
-import React from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import styles from './ModelEditor.module.css.js';
-
-/** The viewport badge per editor mode: [key, English]. */
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { NiceIcon, clickOnActivationKey } from "@nice2dev/ui";
+import React from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import styles from "./ModelEditor.module.css.js";
 const MODE_BADGE = {
-    object: ['modelEditorViewport.objectMode', 'OBJECT MODE'],
-    edit: ['modelEditorViewport.editMode', 'EDIT MODE'],
-    pose: ['modelEditorViewport.poseMode', 'POSE MODE'],
-    cad: ['modelEditorViewport.cadMode', 'CAD MODE'],
-    sims: ['modelEditorViewport.simsMode', 'SIMS MODE'],
+  object: ["modelEditorViewport.objectMode", "OBJECT MODE"],
+  edit: ["modelEditorViewport.editMode", "EDIT MODE"],
+  pose: ["modelEditorViewport.poseMode", "POSE MODE"],
+  cad: ["modelEditorViewport.cadMode", "CAD MODE"],
+  sims: ["modelEditorViewport.simsMode", "SIMS MODE"]
 };
 const ModelEditorViewport = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.memo(({ api }) => {
+  /* @__PURE__ */ React.memo(({ api }) => {
     const { t } = useNiceTranslation();
-    const { mountRef, dragOver, handleDragOver, handleDragLeave, handleDrop, handleViewportClick, handleContextMenu, editorMode, polyCount, meshCount, boneCount, shadingMode, setShadingMode, gizmoSpace, setGizmoSpace, contextMenu, closeContextMenu, addPrimitive, addSceneLight, duplicateSelected, deleteSelected, selectedNode, rootObjectRef, focusOnObject, snapEnabled, setSnapEnabled, } = api;
-    return (jsxs(Fragment, { children: [jsxs("div", { role: "presentation", ref: mountRef, className: `${styles.viewportContainer} ${dragOver ? styles.dragOver : ''}`, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleViewportClick, onContextMenu: handleContextMenu, children: [jsxs("div", { className: styles.viewportOverlay, children: [jsx("span", { className: styles.viewportBadge, children: t(...MODE_BADGE[editorMode]) }), jsx("span", { className: styles.viewportBadge, children: t('modelEditorViewport.trisMeshesBones', '{polyCount} tris · {meshCount} meshes · {boneCount} bones')
-                                    .replace('{polyCount}', String(polyCount.toLocaleString()))
-                                    .replace('{meshCount}', String(meshCount))
-                                    .replace('{boneCount}', String(boneCount)) })] }), jsx("div", { className: styles.viewportShadingBar, children: ['wireframe', 'solid', 'material', 'rendered'].map((m) => (jsx("button", { className: `${styles.shadingBtn} ${shadingMode === m ? styles.shadingBtnActive : ''}`, onClick: (e) => {
-                                e.stopPropagation();
-                                setShadingMode(m);
-                            }, title: m.charAt(0).toUpperCase() + m.slice(1), "aria-label": m.charAt(0).toUpperCase() + m.slice(1), children: jsx(NiceIcon, { name: m === 'wireframe'
-                                    ? 'hexagon'
-                                    : m === 'solid'
-                                        ? 'box'
-                                        : m === 'material'
-                                            ? 'palette'
-                                            : 'lightbulb', size: 16 }) }, m))) }), jsx("div", { className: styles.viewportGizmoInfo, children: jsx("button", { className: styles.shadingBtn, onClick: (e) => {
-                                e.stopPropagation();
-                                setGizmoSpace((s) => (s === 'local' ? 'world' : 'local'));
-                            }, title: t('modelEditorViewport.orientation', 'Orientation: {gizmoSpace}').replace('{gizmoSpace}', String(gizmoSpace)), "aria-label": t('modelEditorViewport.orientation', 'Orientation: {gizmoSpace}').replace('{gizmoSpace}', String(gizmoSpace)), children: gizmoSpace === 'local' ? (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "target", size: 14 }), " ", t('modelEditorViewport.local', 'Local')] })) : (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "globe", size: 14 }), " ", t('modelEditorViewport.world', 'World')] })) }) }), dragOver && (jsx("div", { className: styles.viewportDropZone, children: jsx("span", { children: t('modelEditorViewport.drop3dFilesHere', 'Drop 3D files here') }) }))] }), contextMenu && (jsxs("div", { role: "presentation", className: styles.contextMenu, style: { top: contextMenu.y, left: contextMenu.x }, onClick: closeContextMenu, children: [jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: styles.contextItem, onClick: () => addPrimitive('cube'), children: [jsx("span", { children: t('modelEditorViewport.addCube', 'Add Cube') }), jsx("span", { className: styles.contextKey, children: "Shift+A" })] }), jsx("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: styles.contextItem, onClick: () => addPrimitive('sphere'), children: jsx("span", { children: t('modelEditorViewport.addSphere', 'Add Sphere') }) }), jsx("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: styles.contextItem, onClick: () => addSceneLight('point'), children: jsx("span", { children: t('modelEditorViewport.addPointLight', 'Add Point Light') }) }), jsx("div", { className: styles.contextSep }), jsxs("div", { role: "button", tabIndex: 0, "aria-disabled": !selectedNode, onKeyDown: clickOnActivationKey, className: styles.contextItem, onClick: duplicateSelected, style: !selectedNode ? { opacity: 0.4, pointerEvents: 'none' } : {}, children: [jsx("span", { children: t('modelEditorViewport.duplicate', 'Duplicate') }), jsx("span", { className: styles.contextKey, children: "Shift+D" })] }), jsxs("div", { role: "button", tabIndex: 0, "aria-disabled": !selectedNode, onKeyDown: clickOnActivationKey, className: styles.contextItem, onClick: deleteSelected, style: !selectedNode ? { opacity: 0.4, pointerEvents: 'none' } : {}, children: [jsx("span", { children: t('modelEditorViewport.delete', 'Delete') }), jsx("span", { className: styles.contextKey, children: "Del" })] }), jsx("div", { className: styles.contextSep }), jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: styles.contextItem, onClick: () => {
-                            if (rootObjectRef.current) {
-                                focusOnObject(rootObjectRef.current);
-                            }
-                        }, children: [jsx("span", { children: t('modelEditorViewport.focusCamera', 'Focus Camera') }), jsx("span", { className: styles.contextKey, children: "F" })] }), jsx("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: styles.contextItem, onClick: () => setSnapEnabled((v) => !v), children: jsxs("span", { children: [snapEnabled && jsx(NiceIcon, { name: "check", size: 14 }), ' ', t('modelEditorViewport.snapToGrid', 'Snap to Grid')] }) })] }))] }));
-}), { displayName: 'ModelEditorViewport' });
-
-export { ModelEditorViewport as default };
+    const {
+      mountRef,
+      dragOver,
+      handleDragOver,
+      handleDragLeave,
+      handleDrop,
+      handleViewportClick,
+      handleContextMenu,
+      editorMode,
+      polyCount,
+      meshCount,
+      boneCount,
+      shadingMode,
+      setShadingMode,
+      gizmoSpace,
+      setGizmoSpace,
+      contextMenu,
+      closeContextMenu,
+      addPrimitive,
+      addSceneLight,
+      duplicateSelected,
+      deleteSelected,
+      selectedNode,
+      rootObjectRef,
+      focusOnObject,
+      snapEnabled,
+      setSnapEnabled
+    } = api;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "presentation",
+          ref: mountRef,
+          className: `${styles.viewportContainer} ${dragOver ? styles.dragOver : ""}`,
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop,
+          onClick: handleViewportClick,
+          onContextMenu: handleContextMenu,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.viewportOverlay, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.viewportBadge, children: t(...MODE_BADGE[editorMode]) }),
+              /* @__PURE__ */ jsx("span", { className: styles.viewportBadge, children: t(
+                "modelEditorViewport.trisMeshesBones",
+                "{polyCount} tris · {meshCount} meshes · {boneCount} bones"
+              ).replace("{polyCount}", String(polyCount.toLocaleString())).replace("{meshCount}", String(meshCount)).replace("{boneCount}", String(boneCount)) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: styles.viewportShadingBar, children: ["wireframe", "solid", "material", "rendered"].map((m) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: `${styles.shadingBtn} ${shadingMode === m ? styles.shadingBtnActive : ""}`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setShadingMode(m);
+                },
+                title: m.charAt(0).toUpperCase() + m.slice(1),
+                "aria-label": m.charAt(0).toUpperCase() + m.slice(1),
+                children: /* @__PURE__ */ jsx(
+                  NiceIcon,
+                  {
+                    name: m === "wireframe" ? "hexagon" : m === "solid" ? "box" : m === "material" ? "palette" : "lightbulb",
+                    size: 16
+                  }
+                )
+              },
+              m
+            )) }),
+            /* @__PURE__ */ jsx("div", { className: styles.viewportGizmoInfo, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: styles.shadingBtn,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setGizmoSpace((s) => s === "local" ? "world" : "local");
+                },
+                title: t("modelEditorViewport.orientation", "Orientation: {gizmoSpace}").replace(
+                  "{gizmoSpace}",
+                  String(gizmoSpace)
+                ),
+                "aria-label": t("modelEditorViewport.orientation", "Orientation: {gizmoSpace}").replace(
+                  "{gizmoSpace}",
+                  String(gizmoSpace)
+                ),
+                children: gizmoSpace === "local" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(NiceIcon, { name: "target", size: 14 }),
+                  " ",
+                  t("modelEditorViewport.local", "Local")
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(NiceIcon, { name: "globe", size: 14 }),
+                  " ",
+                  t("modelEditorViewport.world", "World")
+                ] })
+              }
+            ) }),
+            dragOver && /* @__PURE__ */ jsx("div", { className: styles.viewportDropZone, children: /* @__PURE__ */ jsx("span", { children: t("modelEditorViewport.drop3dFilesHere", "Drop 3D files here") }) })
+          ]
+        }
+      ),
+      contextMenu && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "presentation",
+          className: styles.contextMenu,
+          style: { top: contextMenu.y, left: contextMenu.x },
+          onClick: closeContextMenu,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                onKeyDown: clickOnActivationKey,
+                className: styles.contextItem,
+                onClick: () => addPrimitive("cube"),
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: t("modelEditorViewport.addCube", "Add Cube") }),
+                  /* @__PURE__ */ jsx("span", { className: styles.contextKey, children: "Shift+A" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                onKeyDown: clickOnActivationKey,
+                className: styles.contextItem,
+                onClick: () => addPrimitive("sphere"),
+                children: /* @__PURE__ */ jsx("span", { children: t("modelEditorViewport.addSphere", "Add Sphere") })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                onKeyDown: clickOnActivationKey,
+                className: styles.contextItem,
+                onClick: () => addSceneLight("point"),
+                children: /* @__PURE__ */ jsx("span", { children: t("modelEditorViewport.addPointLight", "Add Point Light") })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: styles.contextSep }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                "aria-disabled": !selectedNode,
+                onKeyDown: clickOnActivationKey,
+                className: styles.contextItem,
+                onClick: duplicateSelected,
+                style: !selectedNode ? { opacity: 0.4, pointerEvents: "none" } : {},
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: t("modelEditorViewport.duplicate", "Duplicate") }),
+                  /* @__PURE__ */ jsx("span", { className: styles.contextKey, children: "Shift+D" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                "aria-disabled": !selectedNode,
+                onKeyDown: clickOnActivationKey,
+                className: styles.contextItem,
+                onClick: deleteSelected,
+                style: !selectedNode ? { opacity: 0.4, pointerEvents: "none" } : {},
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: t("modelEditorViewport.delete", "Delete") }),
+                  /* @__PURE__ */ jsx("span", { className: styles.contextKey, children: "Del" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: styles.contextSep }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                onKeyDown: clickOnActivationKey,
+                className: styles.contextItem,
+                onClick: () => {
+                  if (rootObjectRef.current) {
+                    focusOnObject(rootObjectRef.current);
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: t("modelEditorViewport.focusCamera", "Focus Camera") }),
+                  /* @__PURE__ */ jsx("span", { className: styles.contextKey, children: "F" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                onKeyDown: clickOnActivationKey,
+                className: styles.contextItem,
+                onClick: () => setSnapEnabled((v) => !v),
+                children: /* @__PURE__ */ jsxs("span", { children: [
+                  snapEnabled && /* @__PURE__ */ jsx(NiceIcon, { name: "check", size: 14 }),
+                  " ",
+                  t("modelEditorViewport.snapToGrid", "Snap to Grid")
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }),
+  { displayName: "ModelEditorViewport" }
+);
+export {
+  ModelEditorViewport as default
+};