@nice2dev/game-engine 1.1.7 → 1.1.9

package/CHANGELOG.md

@@ -1,5 +1,82 @@
 # @nice2dev/game-engine — Changelog
 
+## 1.1.9
+
+### Patch Changes
+
+- 1.1.9 — themes reach the controls again, every control has a rendered demo, no breaking changes.
+
+  **Theming.** `NiceThemeProvider`, `applyTheme` and `NiceThemePreview` write the `--nice-*` tokens
+  again, so a theme recolours the controls and not only the app's own CSS — since 1.1.7 only
+  light/dark switched. The provider's scope wins over values set on `:root`, as it did before 1.1.7:
+  put a brand colour into the theme rather than on `<html>`. Alias tokens are computed in the theme
+  scope, not only on `:root`. About 1,600 places that used a text token as a background or border, or
+  a surface token as text colour, now use the token of the right role. `--nice-warning-light` and
+  `--nice-danger-light` are the light shade of the status colour, like `--nice-success-light`
+  (new: `--nice-color-warning-light`, `--nice-color-error-light`); backgrounds use `--nice-*-bg`.
+
+  **Styles that never shipped.** Six stylesheets in `@nice2dev/ui` were unreachable from its entry
+  point, so `NiceLiveDataGrid`, `NiceTaskInbox`, `NiceBPMNDesigner`, `NiceInstanceMonitor`,
+  `NiceIntegrationHub`, `NiceRulesEngine` and `NiceVideoEditor` rendered unstyled; eleven more
+  components had no stylesheet at all; `workflow.css` read its spacing scale as pixels; and
+  `NiceModuleGrid` was styled for a `<table>` it does not render.
+
+  **Language.** `useNiceTranslation()` returns `{ t, lang }` and dates are formatted in the interface
+  language rather than the browser's (`ui-presentations` adds `useNiceLang()`). `NiceInvoiceLineEditor`
+  takes its currency and units from the active language unless you pass them. `NiceAuditLog`,
+  `NiceRecordingPanel`, the four game-engine editors and `NiceTemplateEditor` are translated, the
+  game-engine dictionary is actually registered, and 136 ui-audio strings have English defaults
+  instead of rendering raw keys.
+
+  **Canvas and document colours.** Canvas never resolves `var()`: the QR and barcode generators drew a
+  black rectangle, the whiteboard lost its colours and light presets parsed to `NaN`. Data colours are
+  resolved first now. Colours stored in documents — slide templates, theme presets, brand kits,
+  exports — are literals, so a saved document looks the same in every theme.
+
+  **Fixes found by the new demos.** All 895 controls now have a rendered showcase demo, and roughly
+  every third new demo exposed a bug. `ui-platform`: the service worker re-registered on every
+  render, a screen permission prompt appeared on mount, reconnects and start-up tasks ran twice,
+  valid EAN-13 codes were rejected. `ui-ai`: `createProviderFromConfig` dropped the endpoint path —
+  OpenAI, Anthropic and Groq were called without `/v1` and Azure always threw — and the theme
+  generator failed on every request. `ui-communication`: the local participant appeared twice in a
+  conference and `activeConversationId` was ignored. `ui-buildings`: automation days were saved as
+  indices (both forms are read now), the row toggle changed the selected rule instead of the clicked
+  one, and floor-plan devices were drawn in the corner. `ui-mobile`: `NiceTouchTable` rendered invalid
+  table markup. `ui-diagrams`: arrowheads grew with the stroke width and transition clicks never fired.
+  `ui-3d`: opening a code editor before the 3D view broke the whole app. `ui-presentations`: the editor
+  clipped slides in columns narrower than 800 px.
+
+  **Additive API only.** `@nice2dev/ui-platform` now exports its hooks, provider aliases and Props / Ref
+  types. Nothing was renamed or removed.
+
+## 1.1.8
+
+### Patch Changes
+
+- 1.1.8 — old problems closed, no breaking changes.
+
+  **English-first UI.** Text that was hardcoded Polish now goes through `t()` with an English
+  default: the planning views, the whole of `@nice2dev/ui-printing`, smart home, backup, the
+  navigation and settings panels, `@nice2dev/ui-buildings` end to end, the photo editor and the
+  presentation Q&A panel. The dictionary gains 566 keys in en, pl, de, fr, es and uk, so an app
+  with `locale="pl"` reads as before. Three prop defaults changed with it:
+  `NiceInvoiceLineEditor` (`currencySymbol` `'zł'` → `'$'`, `units` → English) and
+  `NiceTimeoutFeedback`'s two messages.
+
+  **Icons.** No emoji, unicode glyphs or inline `<svg>` are used as icons any more — not in JSX,
+  not in `icon:` data fields, not on canvas. Ten icons in `icons-business` / `icons-education`
+  that drew their artwork as `<text>` use paths now, and the behaviour-tree palette names resolve
+  to real `NiceIcon` builtins (`shield` and `repeat` are new; 176 in total).
+
+  **Fixes.** The shadcn adapter reads the host's `--primary` / `--accent` again instead of
+  producing invalid `hsl(#hex)`; `ui-diagrams` ships the 21 translation keys its components were
+  already asking for; `--nice-font-size-2xl` is declared; `NiceScheduler` warns in development
+  when it ignores a `currentDate`, `view` or `events` change; `ui-buildings` typechecks clean and
+  `DeviceProtocol` accepts `'mqtt'`.
+
+  **Docs.** `doc.json` no longer lists CSS variables no component implements; eleven components
+  document the tokens their stylesheets really read.
+
 ## 1.1.7
 
 ### Patch Changes

package/dist/cjs/devtools/DeveloperExperience.js

@@ -125,16 +125,16 @@ function getEngineError(code, context) {
 }
 /** Format an engine error for console output */
 function formatEngineError(err) {
-    const icon = err.severity === 'error' ? '❌' : err.severity === 'warning' ? '⚠️' : 'ℹ️';
-    const lines = [`${icon} [Nice2Dev ${err.code}] ${err.message}`];
+    const label = err.severity === 'error' ? 'Error' : err.severity === 'warning' ? 'Warning' : 'Info';
+    const lines = [`${label}: [Nice2Dev ${err.code}] ${err.message}`];
     if (err.suggestion) {
-        lines.push(`   💡 ${err.suggestion}`);
+        lines.push(`   Tip: ${err.suggestion}`);
     }
     if (err.docsSection) {
-        lines.push(`   📖 Docs: https://nice2dev.com/docs/game-engine/${err.docsSection}`);
+        lines.push(`   Docs: https://nice2dev.com/docs/game-engine/${err.docsSection}`);
     }
     if (err.context) {
-        lines.push(`   📋 Context: ${JSON.stringify(err.context)}`);
+        lines.push(`   Context: ${JSON.stringify(err.context)}`);
     }
     return lines.join('\n');
 }

package/dist/cjs/dialogue/DialogueSystem.js

@@ -704,7 +704,7 @@ const DialogueBox = ({ text, characterName, portrait, emotion = 'neutral', textE
                     opacity: isComplete ? 1 : 0.5,
                     fontSize: '12px',
                 },
-            }, isComplete ? '▼ Click to continue' : '...'),
+            }, isComplete ? 'Click to continue' : '...'),
         ]),
     ]);
 };

package/dist/cjs/editor/AssetBrowser.js

@@ -540,7 +540,7 @@ class AssetBrowser {
             id: 'favorites',
             name: 'Favorites',
             description: 'Your favorite assets',
-            icon: '⭐',
+            icon: 'star',
             color: '#f9e2af',
             assetIds: [],
             createdAt: Date.now(),
@@ -551,7 +551,7 @@ class AssetBrowser {
             id: 'recent',
             name: 'Recent',
             description: 'Recently used assets',
-            icon: '🕐',
+            icon: 'clock',
             color: '#89b4fa',
             assetIds: [],
             createdAt: Date.now(),
@@ -562,7 +562,7 @@ class AssetBrowser {
             id: 'unused',
             name: 'Unused',
             description: 'Assets not referenced by any scene',
-            icon: '📦',
+            icon: 'box',
             color: '#cdd6f4',
             assetIds: [],
             createdAt: Date.now(),
@@ -997,7 +997,7 @@ class AssetBrowser {
             id: `collection_${Date.now()}`,
             name,
             description,
-            icon: '📁',
+            icon: 'folder',
             color: '#cdd6f4',
             assetIds: [],
             createdAt: Date.now(),
@@ -1146,30 +1146,31 @@ class AssetBrowser {
         }
         return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
     }
+    /** NiceIcon name for an asset type. */
     getAssetTypeIcon(type) {
         const icons = {
-            image: '🖼️',
-            sprite: '🎨',
-            spritesheet: '📊',
-            tilemap: '🗺️',
-            audio: '🔊',
-            music: '🎵',
-            sfx: '💥',
-            model: '🎲',
-            material: '🎨',
-            shader: '✨',
-            script: '📜',
-            scene: '🎬',
-            prefab: '📦',
-            animation: '🎞️',
-            font: '🔤',
-            particle: '💫',
-            terrain: '🏔️',
-            video: '🎥',
-            json: '📋',
-            other: '📄',
+            image: 'image',
+            sprite: 'palette',
+            spritesheet: 'grid',
+            tilemap: 'map-pin',
+            audio: 'volume',
+            music: 'music',
+            sfx: 'zap',
+            model: 'box',
+            material: 'palette',
+            shader: 'wand',
+            script: 'code',
+            scene: 'video',
+            prefab: 'box',
+            animation: 'video',
+            font: 'type',
+            particle: 'star',
+            terrain: 'mountain',
+            video: 'video',
+            json: 'file',
+            other: 'file',
         };
-        return icons[type] ?? '📄';
+        return icons[type] ?? 'file';
     }
 }
 // ============================================================

package/dist/cjs/editor/NiceGameEditor.js

@@ -5,6 +5,7 @@ var ui = require('@nice2dev/ui');
 var React = require('react');
 var EventBus = require('../core/EventBus.js');
 var World = require('../ecs/World.js');
+var useTranslation = require('../i18n/useTranslation.js');
 var SceneManager = require('../scene/SceneManager.js');
 
 class UndoStack {
@@ -165,6 +166,7 @@ const GAME_EDITOR_TOUR = [
     },
 ];
 const NiceGameEditor = ({ project, onSave, className, style, tutorial, }) => {
+    const { t: tr } = useTranslation.useTranslation('engine');
     const [state, dispatch] = React.useReducer(editorReducer, DEFAULT_STATE);
     const worldRef = React.useRef(new World.World());
     const undoRef = React.useRef(new UndoStack());
@@ -337,7 +339,7 @@ const NiceGameEditor = ({ project, onSave, className, style, tutorial, }) => {
                 fontSize: 13,
                 position: 'relative',
                 ...style,
-            }, children: [jsxRuntime.jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 30 }, children: jsxRuntime.jsx(ui.NiceTutorialButton, { steps: ui.resolveTutorial(tutorial, GAME_EDITOR_TOUR) }) }), jsxRuntime.jsx(EditorToolbar, {}), jsxRuntime.jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [state.panels.find((p) => p.id === 'hierarchy')?.visible && (jsxRuntime.jsx(EditorPanelContainer, { title: "Hierarchy", width: 250, position: "left", children: jsxRuntime.jsx(HierarchyPanel, {}) })), jsxRuntime.jsx("div", { style: { flex: 1, position: 'relative', overflow: 'hidden' }, children: jsxRuntime.jsx(EditorViewport, {}) }), state.panels.find((p) => p.id === 'inspector')?.visible && (jsxRuntime.jsx(EditorPanelContainer, { title: "Inspector", width: 300, position: "right", children: jsxRuntime.jsx(InspectorPanel, {}) }))] }), jsxRuntime.jsxs("div", { style: { display: 'flex', borderTop: '1px solid #45475a' }, children: [state.panels.find((p) => p.id === 'assets')?.visible && (jsxRuntime.jsx(EditorPanelContainer, { title: "Assets", height: 180, position: "bottom", children: jsxRuntime.jsx(AssetPanel, {}) })), state.panels.find((p) => p.id === 'console')?.visible && (jsxRuntime.jsx(EditorPanelContainer, { title: "Console", height: 180, position: "bottom", children: jsxRuntime.jsx(ConsolePanel, {}) }))] })] }) }));
+            }, children: [jsxRuntime.jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 30 }, children: jsxRuntime.jsx(ui.NiceTutorialButton, { steps: ui.resolveTutorial(tutorial, GAME_EDITOR_TOUR) }) }), jsxRuntime.jsx(EditorToolbar, {}), jsxRuntime.jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [state.panels.find((p) => p.id === 'hierarchy')?.visible && (jsxRuntime.jsx(EditorPanelContainer, { title: tr('editor.panels.hierarchy'), width: 250, position: "left", children: jsxRuntime.jsx(HierarchyPanel, {}) })), jsxRuntime.jsx("div", { style: { flex: 1, position: 'relative', overflow: 'hidden' }, children: jsxRuntime.jsx(EditorViewport, {}) }), state.panels.find((p) => p.id === 'inspector')?.visible && (jsxRuntime.jsx(EditorPanelContainer, { title: tr('editor.panels.inspector'), width: 300, position: "right", children: jsxRuntime.jsx(InspectorPanel, {}) }))] }), jsxRuntime.jsxs("div", { style: { display: 'flex', borderTop: '1px solid #45475a' }, children: [state.panels.find((p) => p.id === 'assets')?.visible && (jsxRuntime.jsx(EditorPanelContainer, { title: tr('editor.panels.assets'), height: 180, position: "bottom", children: jsxRuntime.jsx(AssetPanel, {}) })), state.panels.find((p) => p.id === 'console')?.visible && (jsxRuntime.jsx(EditorPanelContainer, { title: tr('editor.panels.console'), height: 180, position: "bottom", children: jsxRuntime.jsx(ConsolePanel, {}) }))] })] }) }));
 };
 /* ── Helpers ───────────────────────────────────────────────────── */
 function getEntityBounds(entityId, world) {
@@ -412,29 +414,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.useTranslation('engine');
     const { state, dispatch, createNewEntity, undoStack } = useEditor();
     const [showAddMenu, setShowAddMenu] = React.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',
@@ -452,7 +458,7 @@ const EditorToolbar = () => {
             padding: '4px 8px',
             borderBottom: '1px solid #45475a',
             backgroundColor: '#181825',
-        }, children: [tools.map((t) => (jsxRuntime.jsx("button", { onClick: () => dispatch({ type: 'SET_TOOL', tool: t }), style: btnStyle(state.tool === t), title: `${t} (${t[0].toUpperCase()})`, children: toolIcons[t] }, t))), jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsxRuntime.jsxs("div", { style: { position: 'relative' }, children: [jsxRuntime.jsx("button", { onClick: () => setShowAddMenu(!showAddMenu), style: {
+        }, children: [tools.map((t) => (jsxRuntime.jsx("button", { onClick: () => dispatch({ type: 'SET_TOOL', tool: t }), style: btnStyle(state.tool === t), title: `${tr(`editor.tools.${t}`)} (${t[0].toUpperCase()})`, children: jsxRuntime.jsx(ui.NiceIcon, { name: toolIcons[t], size: 14 }) }, t))), jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsxRuntime.jsxs("div", { style: { position: 'relative' }, children: [jsxRuntime.jsx("button", { onClick: () => setShowAddMenu(!showAddMenu), style: {
                             ...btnStyle(false),
                             fontSize: 12,
                             padding: '4px 10px',
@@ -483,10 +489,10 @@ const EditorToolbar = () => {
                                 cursor: 'pointer',
                                 borderRadius: 2,
                                 fontSize: 12,
-                            }, children: [p.icon, " ", p.label] }, p.label))) }))] }), jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsxRuntime.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' ? '⏹' : '▶' }), jsxRuntime.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" }), jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsxRuntime.jsx("button", { onClick: () => undoStack.undo(), style: btnStyle(false), title: "Undo (Ctrl+Z)", disabled: !undoStack.canUndo, children: "\u21A9" }), jsxRuntime.jsx("button", { onClick: () => undoStack.redo(), style: btnStyle(false), title: "Redo (Ctrl+Y)", disabled: !undoStack.canRedo, children: "\u21AA" }), jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsxRuntime.jsx("button", { onClick: () => dispatch({ type: 'SET_ZOOM', zoom: state.zoom * 0.8 }), style: btnStyle(false), title: "Zoom Out", children: "\u2212" }), jsxRuntime.jsxs("span", { style: { fontSize: 11, minWidth: 40, textAlign: 'center' }, children: [(state.zoom * 100) | 0, "%"] }), jsxRuntime.jsx("button", { onClick: () => dispatch({ type: 'SET_ZOOM', zoom: state.zoom * 1.25 }), style: btnStyle(false), title: "Zoom In", children: "+" }), jsxRuntime.jsx("button", { onClick: () => {
+                            }, children: [jsxRuntime.jsx(ui.NiceIcon, { name: p.icon, size: 12 }), " ", tr(`editor.entity.${p.key}`)] }, p.label))) }))] }), jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsxRuntime.jsx("button", { onClick: () => dispatch({ type: 'SET_MODE', mode: state.mode === 'play' ? 'edit' : 'play' }), style: btnStyle(state.mode === 'play'), title: tr('editor.view.playStop'), children: jsxRuntime.jsx(ui.NiceIcon, { name: state.mode === 'play' ? 'stop' : 'play', size: 14 }) }), jsxRuntime.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: jsxRuntime.jsx(ui.NiceIcon, { name: "pause", size: 14 }) }), jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsxRuntime.jsx("button", { onClick: () => undoStack.undo(), style: btnStyle(false), title: `${tr('editor.actions.undo')} (Ctrl+Z)`, disabled: !undoStack.canUndo, children: jsxRuntime.jsx(ui.NiceIcon, { name: "undo", size: 14 }) }), jsxRuntime.jsx("button", { onClick: () => undoStack.redo(), style: btnStyle(false), title: `${tr('editor.actions.redo')} (Ctrl+Y)`, disabled: !undoStack.canRedo, children: jsxRuntime.jsx(ui.NiceIcon, { name: "redo", size: 14 }) }), jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsxRuntime.jsx("button", { onClick: () => dispatch({ type: 'SET_ZOOM', zoom: state.zoom * 0.8 }), style: btnStyle(false), title: tr('editor.view.zoomOut'), children: "\u2212" }), jsxRuntime.jsxs("span", { style: { fontSize: 11, minWidth: 40, textAlign: 'center' }, children: [(state.zoom * 100) | 0, "%"] }), jsxRuntime.jsx("button", { onClick: () => dispatch({ type: 'SET_ZOOM', zoom: state.zoom * 1.25 }), style: btnStyle(false), title: tr('editor.view.zoomIn'), children: "+" }), jsxRuntime.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" }), jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsxRuntime.jsx("button", { onClick: () => dispatch({ type: 'TOGGLE_GRID' }), style: btnStyle(state.showGrid), title: "Toggle Grid (Ctrl+G)", children: "\u25A6" }), jsxRuntime.jsx("button", { onClick: () => dispatch({ type: 'TOGGLE_SNAP' }), style: btnStyle(state.snapToGrid), title: "Toggle Snap", children: "\u229E" }), jsxRuntime.jsx("div", { style: { flex: 1 } }), jsxRuntime.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: jsxRuntime.jsx(ui.NiceIcon, { name: "home", size: 14 }) }), jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsxRuntime.jsx("button", { onClick: () => dispatch({ type: 'TOGGLE_GRID' }), style: btnStyle(state.showGrid), title: `${tr('editor.view.toggleGrid')} (Ctrl+G)`, children: jsxRuntime.jsx(ui.NiceIcon, { name: "grid", size: 14 }) }), jsxRuntime.jsx("button", { onClick: () => dispatch({ type: 'TOGGLE_SNAP' }), style: btnStyle(state.snapToGrid), title: tr('editor.view.toggleSnap'), children: jsxRuntime.jsx(ui.NiceIcon, { name: "target", size: 14 }) }), jsxRuntime.jsx("div", { style: { flex: 1 } }), jsxRuntime.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';
@@ -511,28 +517,29 @@ const EditorPanelContainer = ({ title, width, height, position, children }) => {
                 }, children: title }), jsxRuntime.jsx("div", { style: { flex: 1, overflow: 'auto', padding: 4 }, children: children })] }));
 };
 const HierarchyPanel = () => {
+    const { t: tr } = useTranslation.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);
@@ -547,7 +554,7 @@ const HierarchyPanel = () => {
                         alignItems: 'center',
                         gap: 4,
                         fontSize: 12,
-                    }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10, width: 14, textAlign: 'center' }, children: getIcon(e.id) }), jsxRuntime.jsx("span", { style: { flex: 1 }, children: e.name }), jsxRuntime.jsxs("span", { style: { opacity: 0.3, fontSize: 10 }, children: ["#", e.id] })] }), children.map((c) => renderEntity(c, depth + 1))] }, e.id));
+                    }, children: [jsxRuntime.jsx("span", { style: { width: 14, display: 'inline-flex', justifyContent: 'center' }, children: jsxRuntime.jsx(ui.NiceIcon, { name: getIcon(e.id), size: 12 }) }), jsxRuntime.jsx("span", { style: { flex: 1 }, children: e.name }), jsxRuntime.jsxs("span", { style: { opacity: 0.3, fontSize: 10 }, children: ["#", e.id] })] }), children.map((c) => renderEntity(c, depth + 1))] }, e.id));
     };
     return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { style: {
                     padding: '2px 6px',
@@ -562,7 +569,7 @@ const HierarchyPanel = () => {
                             color: '#a6adc8',
                             cursor: 'pointer',
                             fontSize: 10,
-                        }, title: "Add Entity", children: "+" }), jsxRuntime.jsx("button", { onClick: () => {
+                        }, title: tr('editor.assets.addEntity'), children: "+" }), jsxRuntime.jsx("button", { onClick: () => {
                             if (state.selectedEntities.length > 0) {
                                 const id = state.selectedEntities[0];
                                 const child = world.createEntity('Child');
@@ -579,7 +586,7 @@ const HierarchyPanel = () => {
                             color: '#a6adc8',
                             cursor: 'pointer',
                             fontSize: 10,
-                        }, title: "Add Child", disabled: state.selectedEntities.length === 0, children: "\u21B3+" }), jsxRuntime.jsx("span", { style: { flex: 1 } }), jsxRuntime.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: jsxRuntime.jsx(ui.NiceIcon, { name: "plus", size: 12 }) }), jsxRuntime.jsx("span", { style: { flex: 1 } }), jsxRuntime.jsxs("span", { style: { color: '#6c7086' }, children: [world.entityCount, " entities"] })] }), entities.map((e) => renderEntity(e, 0))] }));
 };
 /* ── Inspector sub-editors ─────────────────────────────────────── */
 const fieldStyle = {
@@ -617,6 +624,7 @@ const TransformEditor = ({ entityId }) => {
                 }) })] }));
 };
 const ShapeEditor = ({ entityId }) => {
+    const { t: tr } = useTranslation.useTranslation('engine');
     const { world, refreshWorld, dispatch } = useEditor();
     const s = world.getComponent(entityId, 'Shape');
     if (!s) {
@@ -627,10 +635,10 @@ const ShapeEditor = ({ entityId }) => {
         dispatch({ type: 'MARK_DIRTY' });
         refreshWorld();
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: "Shape" }), jsxRuntime.jsxs("select", { value: s.shape, onChange: (e) => update(() => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: tr('editor.fields.shape') }), jsxRuntime.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: [jsxRuntime.jsx("option", { value: "rect", children: "Rectangle" }), jsxRuntime.jsx("option", { value: "circle", children: "Circle" }), jsxRuntime.jsx("option", { value: "polygon", children: "Polygon" }), jsxRuntime.jsx("option", { value: "line", children: "Line" })] })] }), s.shape !== 'circle' && (jsxRuntime.jsx(NumField, { label: "Width", value: s.width, onChange: (v) => update(() => {
+                        }), style: { ...fieldStyle, flex: 1 }, children: [jsxRuntime.jsx("option", { value: "rect", children: tr('editor.shape.rect') }), jsxRuntime.jsx("option", { value: "circle", children: tr('editor.shape.circle') }), jsxRuntime.jsx("option", { value: "polygon", children: tr('editor.shape.polygon') }), jsxRuntime.jsx("option", { value: "line", children: tr('editor.shape.line') })] })] }), s.shape !== 'circle' && (jsxRuntime.jsx(NumField, { label: "Width", value: s.width, onChange: (v) => update(() => {
                     s.width = v;
                 }) })), s.shape !== 'circle' && (jsxRuntime.jsx(NumField, { label: "Height", value: s.height, onChange: (v) => update(() => {
                     s.height = v;
@@ -645,6 +653,7 @@ const ShapeEditor = ({ entityId }) => {
                 }) })] }));
 };
 const SpriteEditor = ({ entityId }) => {
+    const { t: tr } = useTranslation.useTranslation('engine');
     const { world, refreshWorld, dispatch } = useEditor();
     const s = world.getComponent(entityId, 'Sprite');
     if (!s) {
@@ -665,11 +674,12 @@ const SpriteEditor = ({ entityId }) => {
                     s.opacity = Math.max(0, Math.min(1, v));
                 }) }), jsxRuntime.jsx(NumField, { label: "Layer", value: s.layer, step: 1, onChange: (v) => update(() => {
                     s.layer = v;
-                }) }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: "Visible" }), jsxRuntime.jsx("input", { type: "checkbox", checked: s.visible, onChange: (e) => update(() => {
+                }) }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: tr('editor.fields.visible') }), jsxRuntime.jsx("input", { type: "checkbox", checked: s.visible, onChange: (e) => update(() => {
                             s.visible = e.target.checked;
                         }) })] })] }));
 };
 const TextEditor = ({ entityId }) => {
+    const { t: tr } = useTranslation.useTranslation('engine');
     const { world, refreshWorld, dispatch } = useEditor();
     const t = world.getComponent(entityId, 'Text');
     if (!t) {
@@ -680,17 +690,18 @@ const TextEditor = ({ entityId }) => {
         dispatch({ type: 'MARK_DIRTY' });
         refreshWorld();
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: { marginBottom: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10, color: '#a6adc8' }, children: "Text" }), jsxRuntime.jsx("input", { type: "text", value: t.text, onChange: (e) => update(() => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: { marginBottom: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10, color: '#a6adc8' }, children: tr('editor.fields.text') }), jsxRuntime.jsx("input", { type: "text", value: t.text, onChange: (e) => update(() => {
                             t.text = e.target.value;
                         }), style: { ...fieldStyle, width: '100%' } })] }), jsxRuntime.jsx(NumField, { label: "Font Size", value: t.fontSize, onChange: (v) => update(() => {
                     t.fontSize = v;
-                }) }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: "Align" }), jsxRuntime.jsxs("select", { value: t.align, onChange: (e) => update(() => {
+                }) }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: tr('editor.fields.align') }), jsxRuntime.jsxs("select", { value: t.align, onChange: (e) => update(() => {
                             t.align = e.target.value;
-                        }), style: { ...fieldStyle, flex: 1 }, children: [jsxRuntime.jsx("option", { value: "left", children: "Left" }), jsxRuntime.jsx("option", { value: "center", children: "Center" }), jsxRuntime.jsx("option", { value: "right", children: "Right" })] })] }), jsxRuntime.jsx(ColField, { label: "Color", color: t.color, onChange: (c) => update(() => {
+                        }), style: { ...fieldStyle, flex: 1 }, children: [jsxRuntime.jsx("option", { value: "left", children: tr('editor.align.left') }), jsxRuntime.jsx("option", { value: "center", children: tr('editor.align.center') }), jsxRuntime.jsx("option", { value: "right", children: tr('editor.align.right') })] })] }), jsxRuntime.jsx(ColField, { label: "Color", color: t.color, onChange: (c) => update(() => {
                     Object.assign(t.color, c);
                 }) })] }));
 };
 const RigidBodyEditor = ({ entityId }) => {
+    const { t: tr } = useTranslation.useTranslation('engine');
     const { world, refreshWorld, dispatch } = useEditor();
     const rb = world.getComponent(entityId, 'RigidBody2D');
     if (!rb) {
@@ -701,9 +712,9 @@ const RigidBodyEditor = ({ entityId }) => {
         dispatch({ type: 'MARK_DIRTY' });
         refreshWorld();
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: "Body" }), jsxRuntime.jsxs("select", { value: rb.bodyType, onChange: (e) => update(() => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: tr('editor.fields.body') }), jsxRuntime.jsxs("select", { value: rb.bodyType, onChange: (e) => update(() => {
                             rb.bodyType = e.target.value;
-                        }), style: { ...fieldStyle, flex: 1 }, children: [jsxRuntime.jsx("option", { value: "dynamic", children: "Dynamic" }), jsxRuntime.jsx("option", { value: "static", children: "Static" }), jsxRuntime.jsx("option", { value: "kinematic", children: "Kinematic" })] })] }), jsxRuntime.jsx(NumField, { label: "Mass", value: rb.mass, step: 0.1, onChange: (v) => update(() => {
+                        }), style: { ...fieldStyle, flex: 1 }, children: [jsxRuntime.jsx("option", { value: "dynamic", children: tr('editor.body.dynamic') }), jsxRuntime.jsx("option", { value: "static", children: tr('editor.body.static') }), jsxRuntime.jsx("option", { value: "kinematic", children: tr('editor.body.kinematic') })] })] }), jsxRuntime.jsx(NumField, { label: "Mass", value: rb.mass, step: 0.1, onChange: (v) => update(() => {
                     rb.mass = v;
                 }) }), jsxRuntime.jsx(NumField, { label: "Drag", value: rb.drag, step: 0.01, onChange: (v) => update(() => {
                     rb.drag = v;
@@ -729,10 +740,11 @@ const ADDABLE_COMPONENTS = [
     'CameraTarget',
 ];
 const InspectorPanel = () => {
+    const { t: tr } = useTranslation.useTranslation('engine');
     const { state, world, dispatch, refreshWorld, addLog } = useEditor();
     const [showAddComp, setShowAddComp] = React.useState(false);
     if (state.selectedEntities.length === 0) {
-        return jsxRuntime.jsx("div", { style: { opacity: 0.5, padding: 8 }, children: "No selection" });
+        return jsxRuntime.jsx("div", { style: { opacity: 0.5, padding: 8 }, children: tr('editor.messages.noSelection') });
     }
     const entityId = state.selectedEntities[0];
     const entity = world.getEntity(entityId);
@@ -775,7 +787,7 @@ const InspectorPanel = () => {
                                         color: '#f38ba8',
                                         cursor: 'pointer',
                                         fontSize: 10,
-                                    }, title: `Remove ${type}`, children: "\u2715" }))] }), Editor ? (jsxRuntime.jsx(Editor, { entityId: entityId })) : (jsxRuntime.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: jsxRuntime.jsx(ui.NiceIcon, { name: "close", size: 10 }) }))] }), Editor ? (jsxRuntime.jsx(Editor, { entityId: entityId })) : (jsxRuntime.jsx("pre", { style: { fontSize: 10, opacity: 0.6, whiteSpace: 'pre-wrap', margin: 0 }, children: JSON.stringify(world.getComponent(entityId, type), null, 2) }))] }, type));
             }), jsxRuntime.jsxs("div", { style: { marginTop: 8, position: 'relative' }, children: [jsxRuntime.jsx("button", { onClick: () => setShowAddComp(!showAddComp), style: {
                             width: '100%',
                             padding: '4px 8px',
@@ -820,6 +832,7 @@ const InspectorPanel = () => {
                             }, children: type }, type))) }))] })] }));
 };
 const AssetPanel = () => {
+    const { t: tr } = useTranslation.useTranslation('engine');
     const [tab, setTab] = React.useState('all');
     const tabBtnStyle = (active) => ({
         padding: '2px 8px',
@@ -831,15 +844,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 (jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 2, padding: '2px 4px', borderBottom: '1px solid #313244' }, children: [['all', 'sprites', 'audio', 'scripts'].map((t) => (jsxRuntime.jsx("button", { onClick: () => setTab(t), style: tabBtnStyle(tab === t), children: t.charAt(0).toUpperCase() + t.slice(1) }, t))), jsxRuntime.jsx("span", { style: { flex: 1 } }), jsxRuntime.jsx("button", { style: {
@@ -848,7 +861,7 @@ const AssetPanel = () => {
                             color: '#a6adc8',
                             cursor: 'pointer',
                             fontSize: 10,
-                        }, title: "Import Asset", children: "+ Import" })] }), jsxRuntime.jsx("div", { style: {
+                        }, title: tr('editor.assets.import'), children: "+ Import" })] }), jsxRuntime.jsx("div", { style: {
                     flex: 1,
                     overflow: 'auto',
                     display: 'grid',
@@ -866,9 +879,10 @@ const AssetPanel = () => {
                         cursor: 'grab',
                         fontSize: 9,
                         textAlign: 'center',
-                    }, children: [jsxRuntime.jsx("span", { style: { fontSize: 20 }, children: a.icon }), jsxRuntime.jsx("span", { style: { wordBreak: 'break-all' }, children: a.name })] }, a.name))) })] }));
+                    }, children: [jsxRuntime.jsx(ui.NiceIcon, { name: a.icon, size: 20 }), jsxRuntime.jsx("span", { style: { wordBreak: 'break-all' }, children: a.name })] }, a.name))) })] }));
 };
 const ConsolePanel = () => {
+    const { t: tr } = useTranslation.useTranslation('engine');
     const { consoleLogs } = useEditor();
     const [filter, setFilter] = React.useState('all');
     const scrollRef = React.useRef(null);
@@ -888,7 +902,7 @@ const ConsolePanel = () => {
             background: filter === f ? '#313244' : 'transparent',
             color: filter === f ? '#cdd6f4' : '#6c7086',
         }, children: label }));
-    return (jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', fontFamily: 'monospace' }, children: [jsxRuntime.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'), jsxRuntime.jsx("span", { style: { flex: 1 } }), jsxRuntime.jsxs("span", { style: { fontSize: 9, color: '#6c7086' }, children: [filtered.length, " entries"] })] }), jsxRuntime.jsx("div", { ref: scrollRef, style: { flex: 1, overflow: 'auto', fontSize: 10 }, children: filtered.length === 0 ? (jsxRuntime.jsx("div", { style: { opacity: 0.4, padding: 8 }, children: "Console ready." })) : (filtered.map((log) => (jsxRuntime.jsxs("div", { style: {
+    return (jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', fontFamily: 'monospace' }, children: [jsxRuntime.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'), jsxRuntime.jsx("span", { style: { flex: 1 } }), jsxRuntime.jsxs("span", { style: { fontSize: 9, color: '#6c7086' }, children: [filtered.length, " entries"] })] }), jsxRuntime.jsx("div", { ref: scrollRef, style: { flex: 1, overflow: 'auto', fontSize: 10 }, children: filtered.length === 0 ? (jsxRuntime.jsx("div", { style: { opacity: 0.4, padding: 8 }, children: tr('editor.messages.consoleReady') })) : (filtered.map((log) => (jsxRuntime.jsxs("div", { style: {
                         padding: '1px 4px',
                         borderBottom: '1px solid #181825',
                         display: 'flex',
@@ -1058,7 +1072,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');
@@ -1070,7 +1087,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) {