@nice2dev/game-engine 1.1.6 → 1.1.9

package/dist/esm/editor/NiceGameEditor.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { NiceTutorialButton, resolveTutorial } from '@nice2dev/ui';
+import { NiceTutorialButton, resolveTutorial, NiceIcon } from '@nice2dev/ui';
 import React, { createContext, useReducer, useRef, useState, useCallback, useMemo, useContext, useEffect } from 'react';
 import { EventBus } from '../core/EventBus.js';
 import { World } from '../ecs/World.js';
+import { useTranslation } from '../i18n/useTranslation.js';
 import { SceneManager } from '../scene/SceneManager.js';
 
 class UndoStack {
@@ -163,6 +164,7 @@ const GAME_EDITOR_TOUR = [
     },
 ];
 const NiceGameEditor = ({ project, onSave, className, style, tutorial, }) => {
+    const { t: tr } = useTranslation('engine');
     const [state, dispatch] = useReducer(editorReducer, DEFAULT_STATE);
     const worldRef = useRef(new World());
     const undoRef = useRef(new UndoStack());
@@ -335,7 +337,7 @@ const NiceGameEditor = ({ project, onSave, className, style, tutorial, }) => {
                 fontSize: 13,
                 position: 'relative',
                 ...style,
-            }, children: [jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 30 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, GAME_EDITOR_TOUR) }) }), jsx(EditorToolbar, {}), jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [state.panels.find((p) => p.id === 'hierarchy')?.visible && (jsx(EditorPanelContainer, { title: "Hierarchy", width: 250, position: "left", children: jsx(HierarchyPanel, {}) })), jsx("div", { style: { flex: 1, position: 'relative', overflow: 'hidden' }, children: jsx(EditorViewport, {}) }), state.panels.find((p) => p.id === 'inspector')?.visible && (jsx(EditorPanelContainer, { title: "Inspector", width: 300, position: "right", children: jsx(InspectorPanel, {}) }))] }), jsxs("div", { style: { display: 'flex', borderTop: '1px solid #45475a' }, children: [state.panels.find((p) => p.id === 'assets')?.visible && (jsx(EditorPanelContainer, { title: "Assets", height: 180, position: "bottom", children: jsx(AssetPanel, {}) })), state.panels.find((p) => p.id === 'console')?.visible && (jsx(EditorPanelContainer, { title: "Console", height: 180, position: "bottom", children: jsx(ConsolePanel, {}) }))] })] }) }));
+            }, children: [jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 30 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, GAME_EDITOR_TOUR) }) }), jsx(EditorToolbar, {}), jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [state.panels.find((p) => p.id === 'hierarchy')?.visible && (jsx(EditorPanelContainer, { title: tr('editor.panels.hierarchy'), width: 250, position: "left", children: jsx(HierarchyPanel, {}) })), jsx("div", { style: { flex: 1, position: 'relative', overflow: 'hidden' }, children: jsx(EditorViewport, {}) }), state.panels.find((p) => p.id === 'inspector')?.visible && (jsx(EditorPanelContainer, { title: tr('editor.panels.inspector'), width: 300, position: "right", children: jsx(InspectorPanel, {}) }))] }), jsxs("div", { style: { display: 'flex', borderTop: '1px solid #45475a' }, children: [state.panels.find((p) => p.id === 'assets')?.visible && (jsx(EditorPanelContainer, { title: tr('editor.panels.assets'), height: 180, position: "bottom", children: jsx(AssetPanel, {}) })), state.panels.find((p) => p.id === 'console')?.visible && (jsx(EditorPanelContainer, { title: tr('editor.panels.console'), height: 180, position: "bottom", children: jsx(ConsolePanel, {}) }))] })] }) }));
 };
 /* ── Helpers ───────────────────────────────────────────────────── */
 function getEntityBounds(entityId, world) {
@@ -410,29 +412,33 @@ function colorToHex(c) {
         .padStart(2, '0');
     return `#${r}${g}${b}`;
 }
+/** `label` is also the name given to a created entity, so it stays English (A3);
+ *  `key` is what the button shows. */
 const ENTITY_PRESETS = [
-    { label: 'Empty', icon: '○', components: ['Transform'] },
-    { label: 'Sprite', icon: '🖼', components: ['Transform', 'Sprite'] },
-    { label: 'Shape', icon: '■', components: ['Transform', 'Shape'] },
-    { label: 'Text', icon: 'T', components: ['Transform', 'Text'] },
+    { key: 'empty', label: 'Empty', icon: 'circle', components: ['Transform'] },
+    { key: 'sprite', label: 'Sprite', icon: 'image', components: ['Transform', 'Sprite'] },
+    { key: 'shape', label: 'Shape', icon: 'square', components: ['Transform', 'Shape'] },
+    { key: 'text', label: 'Text', icon: 'type', components: ['Transform', 'Text'] },
     {
+        key: 'physicsBody',
         label: 'Physics Body',
-        icon: '⚡',
+        icon: 'zap',
         components: ['Transform', 'Shape', 'Collider2D', 'RigidBody2D'],
     },
-    { label: 'Camera', icon: '📷', components: ['Transform', 'CameraTarget'] },
+    { key: 'camera', label: 'Camera', icon: 'camera', components: ['Transform', 'CameraTarget'] },
 ];
 /* ── Sub-components ───────────────────────────────────────────── */
 const EditorToolbar = () => {
+    const { t: tr } = useTranslation('engine');
     const { state, dispatch, createNewEntity, undoStack } = useEditor();
     const [showAddMenu, setShowAddMenu] = useState(false);
     const tools = ['select', 'move', 'rotate', 'scale', 'pan'];
     const toolIcons = {
-        select: '⊕',
-        move: '✥',
-        rotate: '↻',
-        scale: '⇲',
-        pan: '✋',
+        select: 'cursor',
+        move: 'move',
+        rotate: 'refresh',
+        scale: 'expand',
+        pan: 'grip',
     };
     const btnStyle = (active) => ({
         background: active ? '#585b70' : 'transparent',
@@ -450,7 +456,7 @@ const EditorToolbar = () => {
             padding: '4px 8px',
             borderBottom: '1px solid #45475a',
             backgroundColor: '#181825',
-        }, children: [tools.map((t) => (jsx("button", { onClick: () => dispatch({ type: 'SET_TOOL', tool: t }), style: btnStyle(state.tool === t), title: `${t} (${t[0].toUpperCase()})`, children: toolIcons[t] }, t))), jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsxs("div", { style: { position: 'relative' }, children: [jsx("button", { onClick: () => setShowAddMenu(!showAddMenu), style: {
+        }, children: [tools.map((t) => (jsx("button", { onClick: () => dispatch({ type: 'SET_TOOL', tool: t }), style: btnStyle(state.tool === t), title: `${tr(`editor.tools.${t}`)} (${t[0].toUpperCase()})`, children: jsx(NiceIcon, { name: toolIcons[t], size: 14 }) }, t))), jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsxs("div", { style: { position: 'relative' }, children: [jsx("button", { onClick: () => setShowAddMenu(!showAddMenu), style: {
                             ...btnStyle(false),
                             fontSize: 12,
                             padding: '4px 10px',
@@ -481,10 +487,10 @@ const EditorToolbar = () => {
                                 cursor: 'pointer',
                                 borderRadius: 2,
                                 fontSize: 12,
-                            }, children: [p.icon, " ", p.label] }, p.label))) }))] }), jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsx("button", { onClick: () => dispatch({ type: 'SET_MODE', mode: state.mode === 'play' ? 'edit' : 'play' }), style: btnStyle(state.mode === 'play'), title: "Play/Stop", children: state.mode === 'play' ? '⏹' : '▶' }), jsx("button", { onClick: () => dispatch({ type: 'SET_MODE', mode: state.mode === 'pause' ? 'play' : 'pause' }), style: btnStyle(state.mode === 'pause'), title: "Pause", disabled: state.mode === 'edit', children: "\u23F8" }), jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsx("button", { onClick: () => undoStack.undo(), style: btnStyle(false), title: "Undo (Ctrl+Z)", disabled: !undoStack.canUndo, children: "\u21A9" }), jsx("button", { onClick: () => undoStack.redo(), style: btnStyle(false), title: "Redo (Ctrl+Y)", disabled: !undoStack.canRedo, children: "\u21AA" }), jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsx("button", { onClick: () => dispatch({ type: 'SET_ZOOM', zoom: state.zoom * 0.8 }), style: btnStyle(false), title: "Zoom Out", children: "\u2212" }), jsxs("span", { style: { fontSize: 11, minWidth: 40, textAlign: 'center' }, children: [(state.zoom * 100) | 0, "%"] }), jsx("button", { onClick: () => dispatch({ type: 'SET_ZOOM', zoom: state.zoom * 1.25 }), style: btnStyle(false), title: "Zoom In", children: "+" }), jsx("button", { onClick: () => {
+                            }, children: [jsx(NiceIcon, { name: p.icon, size: 12 }), " ", tr(`editor.entity.${p.key}`)] }, p.label))) }))] }), jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsx("button", { onClick: () => dispatch({ type: 'SET_MODE', mode: state.mode === 'play' ? 'edit' : 'play' }), style: btnStyle(state.mode === 'play'), title: tr('editor.view.playStop'), children: jsx(NiceIcon, { name: state.mode === 'play' ? 'stop' : 'play', size: 14 }) }), jsx("button", { onClick: () => dispatch({ type: 'SET_MODE', mode: state.mode === 'pause' ? 'play' : 'pause' }), style: btnStyle(state.mode === 'pause'), title: tr('editor.actions.pause'), disabled: state.mode === 'edit', children: jsx(NiceIcon, { name: "pause", size: 14 }) }), jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsx("button", { onClick: () => undoStack.undo(), style: btnStyle(false), title: `${tr('editor.actions.undo')} (Ctrl+Z)`, disabled: !undoStack.canUndo, children: jsx(NiceIcon, { name: "undo", size: 14 }) }), jsx("button", { onClick: () => undoStack.redo(), style: btnStyle(false), title: `${tr('editor.actions.redo')} (Ctrl+Y)`, disabled: !undoStack.canRedo, children: jsx(NiceIcon, { name: "redo", size: 14 }) }), jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsx("button", { onClick: () => dispatch({ type: 'SET_ZOOM', zoom: state.zoom * 0.8 }), style: btnStyle(false), title: tr('editor.view.zoomOut'), children: "\u2212" }), jsxs("span", { style: { fontSize: 11, minWidth: 40, textAlign: 'center' }, children: [(state.zoom * 100) | 0, "%"] }), jsx("button", { onClick: () => dispatch({ type: 'SET_ZOOM', zoom: state.zoom * 1.25 }), style: btnStyle(false), title: tr('editor.view.zoomIn'), children: "+" }), jsx("button", { onClick: () => {
                     dispatch({ type: 'SET_ZOOM', zoom: 1 });
                     dispatch({ type: 'SET_PAN', offset: { x: 0, y: 0 } });
-                }, style: btnStyle(false), title: "Reset View", children: "\u2302" }), jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsx("button", { onClick: () => dispatch({ type: 'TOGGLE_GRID' }), style: btnStyle(state.showGrid), title: "Toggle Grid (Ctrl+G)", children: "\u25A6" }), jsx("button", { onClick: () => dispatch({ type: 'TOGGLE_SNAP' }), style: btnStyle(state.snapToGrid), title: "Toggle Snap", children: "\u229E" }), jsx("div", { style: { flex: 1 } }), jsxs("span", { style: { fontSize: 11, opacity: 0.6 }, children: [state.mode.toUpperCase(), " | ", state.tool, " | ", state.dirty ? '● Unsaved' : '✓ Saved'] })] }));
+                }, style: btnStyle(false), title: tr('editor.view.resetView'), children: jsx(NiceIcon, { name: "home", size: 14 }) }), jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsx("button", { onClick: () => dispatch({ type: 'TOGGLE_GRID' }), style: btnStyle(state.showGrid), title: `${tr('editor.view.toggleGrid')} (Ctrl+G)`, children: jsx(NiceIcon, { name: "grid", size: 14 }) }), jsx("button", { onClick: () => dispatch({ type: 'TOGGLE_SNAP' }), style: btnStyle(state.snapToGrid), title: tr('editor.view.toggleSnap'), children: jsx(NiceIcon, { name: "target", size: 14 }) }), jsx("div", { style: { flex: 1 } }), jsxs("span", { style: { fontSize: 11, opacity: 0.6 }, children: [state.mode.toUpperCase(), " | ", state.tool, " | ", state.dirty ? 'Unsaved' : 'Saved'] })] }));
 };
 const EditorPanelContainer = ({ title, width, height, position, children }) => {
     const isHorizontal = position === 'bottom';
@@ -509,28 +515,29 @@ const EditorPanelContainer = ({ title, width, height, position, children }) => {
                 }, children: title }), jsx("div", { style: { flex: 1, overflow: 'auto', padding: 4 }, children: children })] }));
 };
 const HierarchyPanel = () => {
+    const { t: tr } = useTranslation('engine');
     const { world, state, dispatch, createNewEntity, refreshWorld, addLog } = useEditor();
     const entities = world.allEntities().filter((e) => e.parent == null);
     const getIcon = (id) => {
         if (world.hasComponent(id, 'CameraTarget')) {
-            return '📷';
+            return 'camera';
         }
         if (world.hasComponent(id, 'Sprite')) {
-            return '🖼';
+            return 'image';
         }
         if (world.hasComponent(id, 'Text')) {
-            return 'T';
+            return 'type';
         }
         if (world.hasComponent(id, 'Shape')) {
-            return '■';
+            return 'square';
         }
         if (world.hasComponent(id, 'ParticleEmitter')) {
-            return '✨';
+            return 'star';
         }
         if (world.hasComponent(id, 'AudioSource')) {
-            return '🔊';
+            return 'volume';
         }
-        return '○';
+        return 'circle';
     };
     const renderEntity = (e, depth) => {
         const isSelected = state.selectedEntities.includes(e.id);
@@ -545,7 +552,7 @@ const HierarchyPanel = () => {
                         alignItems: 'center',
                         gap: 4,
                         fontSize: 12,
-                    }, children: [jsx("span", { style: { fontSize: 10, width: 14, textAlign: 'center' }, children: getIcon(e.id) }), jsx("span", { style: { flex: 1 }, children: e.name }), jsxs("span", { style: { opacity: 0.3, fontSize: 10 }, children: ["#", e.id] })] }), children.map((c) => renderEntity(c, depth + 1))] }, e.id));
+                    }, children: [jsx("span", { style: { width: 14, display: 'inline-flex', justifyContent: 'center' }, children: jsx(NiceIcon, { name: getIcon(e.id), size: 12 }) }), jsx("span", { style: { flex: 1 }, children: e.name }), jsxs("span", { style: { opacity: 0.3, fontSize: 10 }, children: ["#", e.id] })] }), children.map((c) => renderEntity(c, depth + 1))] }, e.id));
     };
     return (jsxs("div", { children: [jsxs("div", { style: {
                     padding: '2px 6px',
@@ -560,7 +567,7 @@ const HierarchyPanel = () => {
                             color: '#a6adc8',
                             cursor: 'pointer',
                             fontSize: 10,
-                        }, title: "Add Entity", children: "+" }), jsx("button", { onClick: () => {
+                        }, title: tr('editor.assets.addEntity'), children: "+" }), jsx("button", { onClick: () => {
                             if (state.selectedEntities.length > 0) {
                                 const id = state.selectedEntities[0];
                                 const child = world.createEntity('Child');
@@ -577,7 +584,7 @@ const HierarchyPanel = () => {
                             color: '#a6adc8',
                             cursor: 'pointer',
                             fontSize: 10,
-                        }, title: "Add Child", disabled: state.selectedEntities.length === 0, children: "\u21B3+" }), jsx("span", { style: { flex: 1 } }), jsxs("span", { style: { color: '#6c7086' }, children: [world.entityCount, " entities"] })] }), entities.map((e) => renderEntity(e, 0))] }));
+                        }, title: tr('editor.assets.addChild'), disabled: state.selectedEntities.length === 0, children: jsx(NiceIcon, { name: "plus", size: 12 }) }), jsx("span", { style: { flex: 1 } }), jsxs("span", { style: { color: '#6c7086' }, children: [world.entityCount, " entities"] })] }), entities.map((e) => renderEntity(e, 0))] }));
 };
 /* ── Inspector sub-editors ─────────────────────────────────────── */
 const fieldStyle = {
@@ -615,6 +622,7 @@ const TransformEditor = ({ entityId }) => {
                 }) })] }));
 };
 const ShapeEditor = ({ entityId }) => {
+    const { t: tr } = useTranslation('engine');
     const { world, refreshWorld, dispatch } = useEditor();
     const s = world.getComponent(entityId, 'Shape');
     if (!s) {
@@ -625,10 +633,10 @@ const ShapeEditor = ({ entityId }) => {
         dispatch({ type: 'MARK_DIRTY' });
         refreshWorld();
     };
-    return (jsxs(Fragment, { children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: "Shape" }), jsxs("select", { value: s.shape, onChange: (e) => update(() => {
+    return (jsxs(Fragment, { children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: tr('editor.fields.shape') }), jsxs("select", { value: s.shape, onChange: (e) => update(() => {
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any -- mutates discriminated-union variant; consumer narrows by `s.shape`
                             s.shape = e.target.value;
-                        }), style: { ...fieldStyle, flex: 1 }, children: [jsx("option", { value: "rect", children: "Rectangle" }), jsx("option", { value: "circle", children: "Circle" }), jsx("option", { value: "polygon", children: "Polygon" }), jsx("option", { value: "line", children: "Line" })] })] }), s.shape !== 'circle' && (jsx(NumField, { label: "Width", value: s.width, onChange: (v) => update(() => {
+                        }), style: { ...fieldStyle, flex: 1 }, children: [jsx("option", { value: "rect", children: tr('editor.shape.rect') }), jsx("option", { value: "circle", children: tr('editor.shape.circle') }), jsx("option", { value: "polygon", children: tr('editor.shape.polygon') }), jsx("option", { value: "line", children: tr('editor.shape.line') })] })] }), s.shape !== 'circle' && (jsx(NumField, { label: "Width", value: s.width, onChange: (v) => update(() => {
                     s.width = v;
                 }) })), s.shape !== 'circle' && (jsx(NumField, { label: "Height", value: s.height, onChange: (v) => update(() => {
                     s.height = v;
@@ -643,6 +651,7 @@ const ShapeEditor = ({ entityId }) => {
                 }) })] }));
 };
 const SpriteEditor = ({ entityId }) => {
+    const { t: tr } = useTranslation('engine');
     const { world, refreshWorld, dispatch } = useEditor();
     const s = world.getComponent(entityId, 'Sprite');
     if (!s) {
@@ -663,11 +672,12 @@ const SpriteEditor = ({ entityId }) => {
                     s.opacity = Math.max(0, Math.min(1, v));
                 }) }), jsx(NumField, { label: "Layer", value: s.layer, step: 1, onChange: (v) => update(() => {
                     s.layer = v;
-                }) }), jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: "Visible" }), jsx("input", { type: "checkbox", checked: s.visible, onChange: (e) => update(() => {
+                }) }), jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: tr('editor.fields.visible') }), jsx("input", { type: "checkbox", checked: s.visible, onChange: (e) => update(() => {
                             s.visible = e.target.checked;
                         }) })] })] }));
 };
 const TextEditor = ({ entityId }) => {
+    const { t: tr } = useTranslation('engine');
     const { world, refreshWorld, dispatch } = useEditor();
     const t = world.getComponent(entityId, 'Text');
     if (!t) {
@@ -678,17 +688,18 @@ const TextEditor = ({ entityId }) => {
         dispatch({ type: 'MARK_DIRTY' });
         refreshWorld();
     };
-    return (jsxs(Fragment, { children: [jsxs("div", { style: { marginBottom: 2 }, children: [jsx("span", { style: { fontSize: 10, color: '#a6adc8' }, children: "Text" }), jsx("input", { type: "text", value: t.text, onChange: (e) => update(() => {
+    return (jsxs(Fragment, { children: [jsxs("div", { style: { marginBottom: 2 }, children: [jsx("span", { style: { fontSize: 10, color: '#a6adc8' }, children: tr('editor.fields.text') }), jsx("input", { type: "text", value: t.text, onChange: (e) => update(() => {
                             t.text = e.target.value;
                         }), style: { ...fieldStyle, width: '100%' } })] }), jsx(NumField, { label: "Font Size", value: t.fontSize, onChange: (v) => update(() => {
                     t.fontSize = v;
-                }) }), jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: "Align" }), jsxs("select", { value: t.align, onChange: (e) => update(() => {
+                }) }), jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: tr('editor.fields.align') }), jsxs("select", { value: t.align, onChange: (e) => update(() => {
                             t.align = e.target.value;
-                        }), style: { ...fieldStyle, flex: 1 }, children: [jsx("option", { value: "left", children: "Left" }), jsx("option", { value: "center", children: "Center" }), jsx("option", { value: "right", children: "Right" })] })] }), jsx(ColField, { label: "Color", color: t.color, onChange: (c) => update(() => {
+                        }), style: { ...fieldStyle, flex: 1 }, children: [jsx("option", { value: "left", children: tr('editor.align.left') }), jsx("option", { value: "center", children: tr('editor.align.center') }), jsx("option", { value: "right", children: tr('editor.align.right') })] })] }), jsx(ColField, { label: "Color", color: t.color, onChange: (c) => update(() => {
                     Object.assign(t.color, c);
                 }) })] }));
 };
 const RigidBodyEditor = ({ entityId }) => {
+    const { t: tr } = useTranslation('engine');
     const { world, refreshWorld, dispatch } = useEditor();
     const rb = world.getComponent(entityId, 'RigidBody2D');
     if (!rb) {
@@ -699,9 +710,9 @@ const RigidBodyEditor = ({ entityId }) => {
         dispatch({ type: 'MARK_DIRTY' });
         refreshWorld();
     };
-    return (jsxs(Fragment, { children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: "Body" }), jsxs("select", { value: rb.bodyType, onChange: (e) => update(() => {
+    return (jsxs(Fragment, { children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: tr('editor.fields.body') }), jsxs("select", { value: rb.bodyType, onChange: (e) => update(() => {
                             rb.bodyType = e.target.value;
-                        }), style: { ...fieldStyle, flex: 1 }, children: [jsx("option", { value: "dynamic", children: "Dynamic" }), jsx("option", { value: "static", children: "Static" }), jsx("option", { value: "kinematic", children: "Kinematic" })] })] }), jsx(NumField, { label: "Mass", value: rb.mass, step: 0.1, onChange: (v) => update(() => {
+                        }), style: { ...fieldStyle, flex: 1 }, children: [jsx("option", { value: "dynamic", children: tr('editor.body.dynamic') }), jsx("option", { value: "static", children: tr('editor.body.static') }), jsx("option", { value: "kinematic", children: tr('editor.body.kinematic') })] })] }), jsx(NumField, { label: "Mass", value: rb.mass, step: 0.1, onChange: (v) => update(() => {
                     rb.mass = v;
                 }) }), jsx(NumField, { label: "Drag", value: rb.drag, step: 0.01, onChange: (v) => update(() => {
                     rb.drag = v;
@@ -727,10 +738,11 @@ const ADDABLE_COMPONENTS = [
     'CameraTarget',
 ];
 const InspectorPanel = () => {
+    const { t: tr } = useTranslation('engine');
     const { state, world, dispatch, refreshWorld, addLog } = useEditor();
     const [showAddComp, setShowAddComp] = useState(false);
     if (state.selectedEntities.length === 0) {
-        return jsx("div", { style: { opacity: 0.5, padding: 8 }, children: "No selection" });
+        return jsx("div", { style: { opacity: 0.5, padding: 8 }, children: tr('editor.messages.noSelection') });
     }
     const entityId = state.selectedEntities[0];
     const entity = world.getEntity(entityId);
@@ -773,7 +785,7 @@ const InspectorPanel = () => {
                                         color: '#f38ba8',
                                         cursor: 'pointer',
                                         fontSize: 10,
-                                    }, title: `Remove ${type}`, children: "\u2715" }))] }), Editor ? (jsx(Editor, { entityId: entityId })) : (jsx("pre", { style: { fontSize: 10, opacity: 0.6, whiteSpace: 'pre-wrap', margin: 0 }, children: JSON.stringify(world.getComponent(entityId, type), null, 2) }))] }, type));
+                                    }, title: tr('editor.assets.removeComponent', { type }), children: jsx(NiceIcon, { name: "close", size: 10 }) }))] }), Editor ? (jsx(Editor, { entityId: entityId })) : (jsx("pre", { style: { fontSize: 10, opacity: 0.6, whiteSpace: 'pre-wrap', margin: 0 }, children: JSON.stringify(world.getComponent(entityId, type), null, 2) }))] }, type));
             }), jsxs("div", { style: { marginTop: 8, position: 'relative' }, children: [jsx("button", { onClick: () => setShowAddComp(!showAddComp), style: {
                             width: '100%',
                             padding: '4px 8px',
@@ -818,6 +830,7 @@ const InspectorPanel = () => {
                             }, children: type }, type))) }))] })] }));
 };
 const AssetPanel = () => {
+    const { t: tr } = useTranslation('engine');
     const [tab, setTab] = useState('all');
     const tabBtnStyle = (active) => ({
         padding: '2px 8px',
@@ -829,15 +842,15 @@ const AssetPanel = () => {
         color: active ? '#cdd6f4' : '#6c7086',
     });
     const assets = [
-        { name: 'player.png', type: 'sprites', icon: '🖼' },
-        { name: 'enemy.png', type: 'sprites', icon: '🖼' },
-        { name: 'tileset.png', type: 'sprites', icon: '🖼' },
-        { name: 'background.jpg', type: 'sprites', icon: '🖼' },
-        { name: 'jump.wav', type: 'audio', icon: '🔊' },
-        { name: 'music.mp3', type: 'audio', icon: '🎵' },
-        { name: 'coin.wav', type: 'audio', icon: '🔊' },
-        { name: 'playerController.ts', type: 'scripts', icon: '📜' },
-        { name: 'enemyAI.ts', type: 'scripts', icon: '📜' },
+        { name: 'player.png', type: 'sprites', icon: 'image' },
+        { name: 'enemy.png', type: 'sprites', icon: 'image' },
+        { name: 'tileset.png', type: 'sprites', icon: 'image' },
+        { name: 'background.jpg', type: 'sprites', icon: 'image' },
+        { name: 'jump.wav', type: 'audio', icon: 'volume' },
+        { name: 'music.mp3', type: 'audio', icon: 'music' },
+        { name: 'coin.wav', type: 'audio', icon: 'volume' },
+        { name: 'playerController.ts', type: 'scripts', icon: 'code' },
+        { name: 'enemyAI.ts', type: 'scripts', icon: 'code' },
     ];
     const filtered = tab === 'all' ? assets : assets.filter((a) => a.type === tab);
     return (jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [jsxs("div", { style: { display: 'flex', gap: 2, padding: '2px 4px', borderBottom: '1px solid #313244' }, children: [['all', 'sprites', 'audio', 'scripts'].map((t) => (jsx("button", { onClick: () => setTab(t), style: tabBtnStyle(tab === t), children: t.charAt(0).toUpperCase() + t.slice(1) }, t))), jsx("span", { style: { flex: 1 } }), jsx("button", { style: {
@@ -846,7 +859,7 @@ const AssetPanel = () => {
                             color: '#a6adc8',
                             cursor: 'pointer',
                             fontSize: 10,
-                        }, title: "Import Asset", children: "+ Import" })] }), jsx("div", { style: {
+                        }, title: tr('editor.assets.import'), children: "+ Import" })] }), jsx("div", { style: {
                     flex: 1,
                     overflow: 'auto',
                     display: 'grid',
@@ -864,9 +877,10 @@ const AssetPanel = () => {
                         cursor: 'grab',
                         fontSize: 9,
                         textAlign: 'center',
-                    }, children: [jsx("span", { style: { fontSize: 20 }, children: a.icon }), jsx("span", { style: { wordBreak: 'break-all' }, children: a.name })] }, a.name))) })] }));
+                    }, children: [jsx(NiceIcon, { name: a.icon, size: 20 }), jsx("span", { style: { wordBreak: 'break-all' }, children: a.name })] }, a.name))) })] }));
 };
 const ConsolePanel = () => {
+    const { t: tr } = useTranslation('engine');
     const { consoleLogs } = useEditor();
     const [filter, setFilter] = useState('all');
     const scrollRef = useRef(null);
@@ -886,7 +900,7 @@ const ConsolePanel = () => {
             background: filter === f ? '#313244' : 'transparent',
             color: filter === f ? '#cdd6f4' : '#6c7086',
         }, children: label }));
-    return (jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', fontFamily: 'monospace' }, children: [jsxs("div", { style: { display: 'flex', gap: 2, padding: '2px 4px', borderBottom: '1px solid #313244' }, children: [filterBtn('all', 'All'), " ", filterBtn('info', 'Info'), " ", filterBtn('warn', 'Warn'), ' ', filterBtn('error', 'Error'), jsx("span", { style: { flex: 1 } }), jsxs("span", { style: { fontSize: 9, color: '#6c7086' }, children: [filtered.length, " entries"] })] }), jsx("div", { ref: scrollRef, style: { flex: 1, overflow: 'auto', fontSize: 10 }, children: filtered.length === 0 ? (jsx("div", { style: { opacity: 0.4, padding: 8 }, children: "Console ready." })) : (filtered.map((log) => (jsxs("div", { style: {
+    return (jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', fontFamily: 'monospace' }, children: [jsxs("div", { style: { display: 'flex', gap: 2, padding: '2px 4px', borderBottom: '1px solid #313244' }, children: [filterBtn('all', 'All'), " ", filterBtn('info', 'Info'), " ", filterBtn('warn', 'Warn'), ' ', filterBtn('error', 'Error'), jsx("span", { style: { flex: 1 } }), jsxs("span", { style: { fontSize: 9, color: '#6c7086' }, children: [filtered.length, " entries"] })] }), jsx("div", { ref: scrollRef, style: { flex: 1, overflow: 'auto', fontSize: 10 }, children: filtered.length === 0 ? (jsx("div", { style: { opacity: 0.4, padding: 8 }, children: tr('editor.messages.consoleReady') })) : (filtered.map((log) => (jsxs("div", { style: {
                         padding: '1px 4px',
                         borderBottom: '1px solid #181825',
                         display: 'flex',
@@ -1056,7 +1070,10 @@ const EditorViewport = () => {
                 ctx.fillStyle = '#f9e2af';
                 ctx.font = `${8 / state.zoom}px monospace`;
                 ctx.textAlign = 'center';
-                ctx.fillText('✨', 0, 3 / state.zoom);
+                // Sparkle marker drawn as a cross (no glyph fonts on the canvas)
+                const spark = 4 / state.zoom;
+                ctx.fillRect(-spark / 4, -spark, spark / 2, spark * 2);
+                ctx.fillRect(-spark, -spark / 4, spark * 2, spark / 2);
             }
             // Camera indicator
             const cam = world.getComponent(entity.id, 'CameraTarget');
@@ -1068,7 +1085,7 @@ const EditorViewport = () => {
                 ctx.font = `${8 / state.zoom}px monospace`;
                 ctx.fillStyle = '#a6e3a1';
                 ctx.textAlign = 'center';
-                ctx.fillText('📷 Camera', 0, -hh - 4 / state.zoom);
+                ctx.fillText('Camera', 0, -hh - 4 / state.zoom);
             }
             // Selection highlight
             if (isSelected) {

package/dist/esm/godot-integration/components/GodotProjectBrowser.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { NiceIcon } from '@nice2dev/ui';
 import { createContext, forwardRef, useReducer, useMemo, useCallback, useImperativeHandle, useContext } from 'react';
 
 const DEFAULT_THEME = {
@@ -102,27 +103,27 @@ function useBrowser() {
 function getResourceIcon(type) {
     switch (type) {
         case 'scene':
-            return '🎬';
+            return 'video';
         case 'script':
-            return '📜';
+            return 'code';
         case 'resource':
-            return '📄';
+            return 'file';
         case 'texture':
-            return '🖼️';
+            return 'image';
         case 'audio':
-            return '🔊';
+            return 'volume';
         case 'mesh':
-            return '🔷';
+            return 'hexagon';
         case 'material':
-            return '🎨';
+            return 'palette';
         case 'animation':
-            return '🏃';
+            return 'play';
         case 'shader':
-            return '✨';
+            return 'wand';
         case 'theme':
-            return '🎭';
+            return 'layers';
         default:
-            return '📄';
+            return 'file';
     }
 }
 function formatFileSize(bytes) {
@@ -153,7 +154,7 @@ const BrowserHeader = () => {
                     alignItems: 'center',
                     justifyContent: 'center',
                     fontSize: 18,
-                }, children: "\uD83E\uDD16" }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: { fontSize: 14, fontWeight: 600, color: theme.textPrimary }, children: state.projectInfo?.name ?? 'No Project Loaded' }), jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: state.projectInfo ? (jsxs(Fragment, { children: ["Godot ", state.projectInfo.godotVersion, " \u2022", ' ', state.projectInfo.renderer.replace('_', ' '), state.projectInfo.dotnetEnabled && ' • C#'] })) : ('Select a Godot project.godot file') })] }), jsxs("div", { style: {
+                }, children: jsx(NiceIcon, { name: "gamepad", size: 18 }) }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: { fontSize: 14, fontWeight: 600, color: theme.textPrimary }, children: state.projectInfo?.name ?? 'No Project Loaded' }), jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: state.projectInfo ? (jsxs(Fragment, { children: ["Godot ", state.projectInfo.godotVersion, " \u2022", ' ', state.projectInfo.renderer.replace('_', ' '), state.projectInfo.dotnetEnabled && ' • C#'] })) : ('Select a Godot project.godot file') })] }), jsxs("div", { style: {
                     display: 'flex',
                     alignItems: 'center',
                     gap: 8,
@@ -228,21 +229,21 @@ const BrowserToolbar = () => {
                     backgroundColor: 'rgba(0,0,0,0.2)',
                     borderRadius: 6,
                     overflow: 'hidden',
-                }, children: [jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'tree' }), style: {
+                }, children: [jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'tree' }), "aria-label": "Tree view", style: {
                             padding: '6px 10px',
                             fontSize: 12,
                             backgroundColor: state.viewMode === 'tree' ? theme.accent : 'transparent',
                             border: 'none',
                             color: '#fff',
                             cursor: 'pointer',
-                        }, children: "\uD83D\uDCD1" }), jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'grid' }), style: {
+                        }, children: jsx(NiceIcon, { name: "list", size: 14 }) }), jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'grid' }), "aria-label": "Grid view", style: {
                             padding: '6px 10px',
                             fontSize: 12,
                             backgroundColor: state.viewMode === 'grid' ? theme.accent : 'transparent',
                             border: 'none',
                             color: '#fff',
                             cursor: 'pointer',
-                        }, children: "\uD83D\uDD32" })] }), jsx("div", { style: { flex: 1 } }), jsxs("span", { style: { fontSize: 11, color: theme.textSecondary }, children: [state.selectedResources.size, " selected"] }), jsx("button", { onClick: importSelectedResources, disabled: state.selectedResources.size === 0 || state.importing, style: {
+                        }, children: jsx(NiceIcon, { name: "grid", size: 14 }) })] }), jsx("div", { style: { flex: 1 } }), jsxs("span", { style: { fontSize: 11, color: theme.textSecondary }, children: [state.selectedResources.size, " selected"] }), jsxs("button", { onClick: importSelectedResources, disabled: state.selectedResources.size === 0 || state.importing, style: {
                     padding: '8px 16px',
                     fontSize: 12,
                     fontWeight: 500,
@@ -254,16 +255,16 @@ const BrowserToolbar = () => {
                     color: '#fff',
                     cursor: state.selectedResources.size > 0 && !state.importing ? 'pointer' : 'not-allowed',
                     opacity: state.selectedResources.size > 0 && !state.importing ? 1 : 0.5,
-                }, children: state.importing ? `⏳ ${state.importProgress}%` : '📥 Import Selected' })] }));
+                }, children: [jsx(NiceIcon, { name: state.importing ? 'clock' : 'download', size: 14 }), ' ', state.importing ? `${state.importProgress}%` : 'Import Selected'] })] }));
 };
 /* ── Tab Bar ─────────────────────────────────────────────────── */
 const TabBar = () => {
     const { state, dispatch, theme } = useBrowser();
     const tabs = [
-        { id: 'files', label: 'Files', icon: '📁' },
-        { id: 'autoloads', label: 'Autoloads', icon: '🚀' },
-        { id: 'plugins', label: 'Plugins', icon: '🔌' },
-        { id: 'exports', label: 'Exports', icon: '📦' },
+        { id: 'files', label: 'Files', icon: 'folder' },
+        { id: 'autoloads', label: 'Autoloads', icon: 'rocket' },
+        { id: 'plugins', label: 'Plugins', icon: 'plug' },
+        { id: 'exports', label: 'Exports', icon: 'box' },
     ];
     return (jsx("div", { style: {
             display: 'flex',
@@ -278,7 +279,7 @@ const TabBar = () => {
                 borderBottom: state.tab === tab.id ? `2px solid ${theme.accent}` : '2px solid transparent',
                 color: state.tab === tab.id ? theme.textPrimary : theme.textSecondary,
                 cursor: 'pointer',
-            }, children: [tab.icon, " ", tab.label] }, tab.id))) }));
+            }, children: [jsx(NiceIcon, { name: tab.icon, size: 14 }), " ", tab.label] }, tab.id))) }));
 };
 /* ── Resource Tree Item ───────────────────────────────────────── */
 const ResourceTreeItem = ({ resource, indent, }) => {
@@ -292,7 +293,7 @@ const ResourceTreeItem = ({ resource, indent, }) => {
             paddingLeft: indent * 16 + 8,
             backgroundColor: isSelected ? theme.itemSelected : 'transparent',
             cursor: 'pointer',
-        }, children: [jsx("input", { type: "checkbox", checked: isSelected, onChange: () => dispatch({ type: 'SELECT_RESOURCE', id: resource.id, additive: true }), onClick: (e) => e.stopPropagation() }), jsx("span", { style: { fontSize: 14 }, children: getResourceIcon(resource.type) }), jsx("span", { style: {
+        }, children: [jsx("input", { type: "checkbox", checked: isSelected, onChange: () => dispatch({ type: 'SELECT_RESOURCE', id: resource.id, additive: true }), onClick: (e) => e.stopPropagation() }), jsx(NiceIcon, { name: getResourceIcon(resource.type), size: 14 }), jsx("span", { style: {
                     flex: 1,
                     fontSize: 12,
                     color: isSelected ? theme.textPrimary : theme.textSecondary,
@@ -329,7 +330,7 @@ const FolderTreeItem = ({ folder, indent }) => {
                     padding: '4px 8px',
                     paddingLeft: indent * 16 + 8,
                     cursor: 'pointer',
-                }, children: [jsx("span", { style: { fontSize: 10, color: theme.textSecondary }, children: isExpanded ? '▼' : '▶' }), jsx("span", { style: { fontSize: 14 }, children: "\uD83D\uDCC1" }), jsx("span", { style: { fontSize: 12, color: theme.textPrimary, fontWeight: 500 }, children: folder.name }), jsxs("span", { style: { fontSize: 10, color: theme.textSecondary }, children: ["(", filteredChildren.length, ")"] })] }), isExpanded &&
+                }, children: [jsx(NiceIcon, { name: isExpanded ? 'chevron-down' : 'chevron-right', size: 10, color: theme.textSecondary }), jsx(NiceIcon, { name: "folder", size: 14 }), jsx("span", { style: { fontSize: 12, color: theme.textPrimary, fontWeight: 500 }, children: folder.name }), jsxs("span", { style: { fontSize: 10, color: theme.textSecondary }, children: ["(", filteredChildren.length, ")"] })] }), isExpanded &&
                 filteredChildren.map((child, _i) => 'children' in child ? (jsx(FolderTreeItem, { folder: child, indent: indent + 1 }, child.path)) : (jsx(ResourceTreeItem, { resource: child, indent: indent + 1 }, child.id)))] }));
 };
 /* ── Files Panel ──────────────────────────────────────────────── */
@@ -373,7 +374,7 @@ const ResourceGridItem = ({ resource, isSelected, }) => {
             borderRadius: 8,
             border: `1px solid ${isSelected ? theme.accent : theme.border}`,
             cursor: 'pointer',
-        }, children: [jsx("div", { style: { fontSize: 32, marginBottom: 8 }, children: getResourceIcon(resource.type) }), jsx("span", { style: {
+        }, children: [jsx("div", { style: { marginBottom: 8 }, children: jsx(NiceIcon, { name: getResourceIcon(resource.type), size: 32 }) }), jsx("span", { style: {
                     fontSize: 11,
                     color: theme.textPrimary,
                     textAlign: 'center',
@@ -436,19 +437,19 @@ const ExportsPanel = () => {
     const getPlatformIcon = (platform) => {
         switch (platform.toLowerCase()) {
             case 'windows':
-                return '🪟';
+                return 'monitor';
             case 'linux':
-                return '🐧';
+                return 'terminal';
             case 'macos':
-                return '🍎';
+                return 'monitor';
             case 'android':
-                return '🤖';
+                return 'phone';
             case 'ios':
-                return '📱';
+                return 'phone';
             case 'web':
-                return '🌐';
+                return 'globe';
             default:
-                return '📦';
+                return 'box';
         }
     };
     return (jsxs("div", { style: { padding: 16 }, children: [jsx("h3", { style: { margin: '0 0 16px', fontSize: 14, fontWeight: 600, color: theme.textPrimary }, children: "Export Presets" }), state.projectInfo.exportPresets.map((preset, i) => (jsxs("div", { style: {
@@ -459,7 +460,7 @@ const ExportsPanel = () => {
                     marginBottom: 4,
                     backgroundColor: theme.itemBackground,
                     borderRadius: 6,
-                }, children: [jsx("span", { style: { fontSize: 20 }, children: getPlatformIcon(preset.platform) }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: { fontSize: 13, color: theme.textPrimary, fontWeight: 500 }, children: preset.name }), jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: preset.platform })] }), jsx("button", { style: {
+                }, children: [jsx(NiceIcon, { name: getPlatformIcon(preset.platform), size: 20 }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: { fontSize: 13, color: theme.textPrimary, fontWeight: 500 }, children: preset.name }), jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: preset.platform })] }), jsx("button", { style: {
                             padding: '6px 12px',
                             fontSize: 11,
                             backgroundColor: theme.accent,