@nice2dev/ui-graphics 1.1.10 → 1.2.1

package/dist/cjs/game/GameAsset2dEditor.js

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var ui = require('@nice2dev/ui');
 var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
+var i18n = require('../core/i18n.js');
 var GameAsset2dEditor_module = require('./GameAsset2dEditor.module.css.js');
 var useGameAssetEditor = require('./useGameAssetEditor.js');
 
@@ -11,8 +12,9 @@ var useGameAssetEditor = require('./useGameAssetEditor.js');
    MENU BAR
 ──────────────────────────────────────────────────────────────── */
 const MenuBar = ({ api }) => {
+    const { t } = i18n.useNiceTranslation();
     const fileInputRef = React.useRef(null);
-    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.menuBar, children: [jsxRuntime.jsxs("h3", { children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "gamepad", size: 16 }), " Game Asset Editor"] }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.menuGroup, children: [jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.newProject('New Project'), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "file", size: 14 }), " New"] }), jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "folder", size: 14 }), " Open"] }), jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.saveProject, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "save", size: 14 }), " Save"] })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.spacer }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.menuGroup, children: [jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.undo, disabled: !api.canUndo, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-left", size: 14 }), " Undo"] }), jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.redo, disabled: !api.canRedo, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-right", size: 14 }), " Redo"] })] }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: ".json", style: { display: 'none' }, onChange: (e) => {
+    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.menuBar, children: [jsxRuntime.jsxs("h3", { children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "gamepad", size: 16 }), ' ', t('gameAsset2dEditor.gameAssetEditor', 'Game Asset Editor')] }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.menuGroup, children: [jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.newProject('New Project'), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "file", size: 14 }), " New"] }), jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "folder", size: 14 }), " ", t('gameAsset2dEditor.open', 'Open')] }), jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.saveProject, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "save", size: 14 }), " ", t('gameAsset2dEditor.save', 'Save')] })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.spacer }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.menuGroup, children: [jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.undo, disabled: !api.canUndo, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-left", size: 14 }), " ", t('gameAsset2dEditor.undo', 'Undo')] }), jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.redo, disabled: !api.canRedo, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-right", size: 14 }), " ", t('gameAsset2dEditor.redo', 'Redo')] })] }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: ".json", style: { display: 'none' }, onChange: (e) => {
                     var _a;
                     const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
                     if (file) {
@@ -37,6 +39,7 @@ const ModeTabs = ({ api }) => {
    TILE MAP TOOLBAR
 ──────────────────────────────────────────────────────────────── */
 const TileMapToolbar = ({ api }) => {
+    const { t } = i18n.useNiceTranslation();
     const tools = [
         { id: 'select', icon: 'square', label: 'Select' },
         { id: 'brush', icon: 'brush', label: 'Brush' },
@@ -46,22 +49,24 @@ const TileMapToolbar = ({ api }) => {
         { id: 'line', icon: 'line', label: 'Line' },
         { id: 'eyedropper', icon: 'eyedropper', label: 'Eyedropper' },
     ];
-    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.toolbar, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.toolGroup, children: tools.map((tool) => (jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.tileMapTool === tool.id ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.tileMapTool === tool.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setTileMapTool(tool.id), title: tool.label, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: tool.icon, size: 16 }) }, tool.id))) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.spacer }), jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.showGrid ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.showGrid ? 'primary' : 'ghost', size: "sm", onClick: api.toggleGrid, title: "Toggle Grid", "aria-label": "Toggle Grid", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "grid", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.showCollision ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.showCollision ? 'primary' : 'ghost', size: "sm", onClick: api.toggleCollision, title: "Show Collision", "aria-label": "Show Collision", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "square", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.snapToGrid ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.snapToGrid ? 'primary' : 'ghost', size: "sm", onClick: api.toggleSnap, title: "Snap to Grid", "aria-label": "Snap to Grid", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "grid", size: 16 }) })] }));
+    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.toolbar, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.toolGroup, children: tools.map((tool) => (jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.tileMapTool === tool.id ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.tileMapTool === tool.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setTileMapTool(tool.id), title: tool.label, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: tool.icon, size: 16 }) }, tool.id))) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.spacer }), jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.showGrid ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.showGrid ? 'primary' : 'ghost', size: "sm", onClick: api.toggleGrid, title: t('gameAsset2dEditor.toggleGrid', 'Toggle Grid'), "aria-label": t('gameAsset2dEditor.toggleGrid', 'Toggle Grid'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "grid", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.showCollision ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.showCollision ? 'primary' : 'ghost', size: "sm", onClick: api.toggleCollision, title: t('gameAsset2dEditor.showCollision', 'Show Collision'), "aria-label": t('gameAsset2dEditor.showCollision', 'Show Collision'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "square", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.snapToGrid ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.snapToGrid ? 'primary' : 'ghost', size: "sm", onClick: api.toggleSnap, title: t('gameAsset2dEditor.snapToGrid', 'Snap to Grid'), "aria-label": t('gameAsset2dEditor.snapToGrid', 'Snap to Grid'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "grid", size: 16 }) })] }));
 };
 /* ────────────────────────────────────────────────────────────────
    SPRITE SHEET TOOLBAR
 ──────────────────────────────────────────────────────────────── */
 const SpriteSheetToolbar = ({ api }) => {
+    const { t } = i18n.useNiceTranslation();
     const [sliceWidth, setSliceWidth] = React.useState(16);
     const [sliceHeight, setSliceHeight] = React.useState(16);
-    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.toolbar, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.toolGroup, children: [jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.spriteSheetTool === 'select' ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.spriteSheetTool === 'select' ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSpriteSheetTool('select'), title: "Select", "aria-label": "Select", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "square", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.spriteSheetTool === 'slice' ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.spriteSheetTool === 'slice' ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSpriteSheetTool('slice'), title: "Manual Slice", "aria-label": "Manual Slice", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "scissors", size: 16 }) })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.spacer }), jsxRuntime.jsxs("label", { style: { fontSize: 11, color: 'var(--nice-text-secondary, #8892a8)' }, children: ["Frame size:", jsxRuntime.jsx(ui.NiceNumberInput, { value: sliceWidth, onChange: (val) => setSliceWidth(val !== null && val !== void 0 ? val : 16), style: { width: 40, margin: '0 4px' }, className: GameAsset2dEditor_module.panelInput }), "\u00D7", jsxRuntime.jsx(ui.NiceNumberInput, { value: sliceHeight, onChange: (val) => setSliceHeight(val !== null && val !== void 0 ? val : 16), style: { width: 40, marginLeft: 4 }, className: GameAsset2dEditor_module.panelInput })] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", onClick: () => api.autoSlice(sliceWidth, sliceHeight), style: { marginLeft: 8 }, children: "Auto Slice" }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", onClick: api.detectSprites, style: { marginLeft: 4 }, children: "Detect Sprites" })] }));
+    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.toolbar, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.toolGroup, children: [jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.spriteSheetTool === 'select' ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.spriteSheetTool === 'select' ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSpriteSheetTool('select'), title: t('gameAsset2dEditor.select', 'Select'), "aria-label": t('gameAsset2dEditor.select', 'Select'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "square", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.spriteSheetTool === 'slice' ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.spriteSheetTool === 'slice' ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSpriteSheetTool('slice'), title: t('gameAsset2dEditor.manualSlice', 'Manual Slice'), "aria-label": t('gameAsset2dEditor.manualSlice', 'Manual Slice'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "scissors", size: 16 }) })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.spacer }), jsxRuntime.jsxs("label", { style: { fontSize: 11, color: 'var(--nice-text-secondary, #8892a8)' }, children: ["Frame size:", jsxRuntime.jsx(ui.NiceNumberInput, { value: sliceWidth, onChange: (val) => setSliceWidth(val !== null && val !== void 0 ? val : 16), style: { width: 40, margin: '0 4px' }, className: GameAsset2dEditor_module.panelInput }), "\u00D7", jsxRuntime.jsx(ui.NiceNumberInput, { value: sliceHeight, onChange: (val) => setSliceHeight(val !== null && val !== void 0 ? val : 16), style: { width: 40, marginLeft: 4 }, className: GameAsset2dEditor_module.panelInput })] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", onClick: () => api.autoSlice(sliceWidth, sliceHeight), style: { marginLeft: 8 }, children: t('gameAsset2dEditor.autoSlice', 'Auto Slice') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", onClick: api.detectSprites, style: { marginLeft: 4 }, children: t('gameAsset2dEditor.detectSprites', 'Detect Sprites') })] }));
 };
 /* ────────────────────────────────────────────────────────────────
    TILE PALETTE (LEFT PANEL)
 ──────────────────────────────────────────────────────────────── */
 const TilePalette = ({ api }) => {
+    const { t } = i18n.useNiceTranslation();
     const fileInputRef = React.useRef(null);
-    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: "Tiles" }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "+ Add" })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: api.project.tileSets.length === 0 ? (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.emptyState, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: "No tiles yet" }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Import Tiles" })] })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.tilePalette, children: api.project.tileSets.map((tile) => (jsxRuntime.jsx("div", { className: `${GameAsset2dEditor_module.tileItem} ${api.editorState.selectedTileId === tile.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectTile(tile.id), title: tile.name, children: jsxRuntime.jsx("img", { src: tile.thumbnail, alt: tile.name }) }, tile.id))) })) }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: (e) => {
+    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.tiles', 'Tiles') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "+ Add" })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: api.project.tileSets.length === 0 ? (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.emptyState, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.noTilesYet', 'No tiles yet') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('gameAsset2dEditor.importTiles', 'Import Tiles') })] })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.tilePalette, children: api.project.tileSets.map((tile) => (jsxRuntime.jsx("div", { className: `${GameAsset2dEditor_module.tileItem} ${api.editorState.selectedTileId === tile.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectTile(tile.id), title: tile.name, children: jsxRuntime.jsx("img", { src: tile.thumbnail, alt: tile.name }) }, tile.id))) })) }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: (e) => {
                     var _a;
                     const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
                     if (file) {
@@ -74,16 +79,18 @@ const TilePalette = ({ api }) => {
    LAYERS PANEL (RIGHT PANEL)
 ──────────────────────────────────────────────────────────────── */
 const LayersPanel = ({ api }) => {
+    const { t } = i18n.useNiceTranslation();
     const activeMap = api.project.tileMaps.find((m) => m.id === api.editorState.activeTileMapId);
-    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: "Layers" }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.addLayer, disabled: !activeMap, children: "+ Add" })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: activeMap ? (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.layersList, children: [...activeMap.layers].reverse().map((layer) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeLayerId === layer.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectLayer(layer.id), children: [jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.layerVisibility} ${!layer.visible ? GameAsset2dEditor_module.hidden : ''}`, variant: "ghost", size: "sm", onClick: (e) => {
+    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.layers', 'Layers') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.addLayer, disabled: !activeMap, children: "+ Add" })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: activeMap ? (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.layersList, children: [...activeMap.layers].reverse().map((layer) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeLayerId === layer.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectLayer(layer.id), children: [jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.layerVisibility} ${!layer.visible ? GameAsset2dEditor_module.hidden : ''}`, variant: "ghost", size: "sm", onClick: (e) => {
                                     e.stopPropagation();
                                     api.toggleLayerVisibility(layer.id);
-                                }, "aria-label": layer.visible ? 'Hide layer' : 'Show layer', children: jsxRuntime.jsx(uiCore.NiceIcon, { name: layer.visible ? 'eye' : 'eye-off', size: 16 }) }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: layer.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [Math.round(layer.opacity * 100), "%"] })] }, layer.id))) })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: "No tile map selected" }) })) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: "Maps" }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.createTileMap('New Map', 32, 32), children: "+ New" })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: api.project.tileMaps.map((map) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeTileMapId === map.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectTileMap(map.id), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: map.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [map.width, "\u00D7", map.height] })] }, map.id))) })] }));
+                                }, "aria-label": layer.visible ? 'Hide layer' : 'Show layer', children: jsxRuntime.jsx(uiCore.NiceIcon, { name: layer.visible ? 'eye' : 'eye-off', size: 16 }) }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: layer.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [Math.round(layer.opacity * 100), "%"] })] }, layer.id))) })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.noTileMapSelected', 'No tile map selected') }) })) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.maps', 'Maps') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.createTileMap('New Map', 32, 32), children: "+ New" })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: api.project.tileMaps.map((map) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeTileMapId === map.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectTileMap(map.id), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: map.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [map.width, "\u00D7", map.height] })] }, map.id))) })] }));
 };
 /* ────────────────────────────────────────────────────────────────
    TILE MAP CANVAS
 ──────────────────────────────────────────────────────────────── */
 const TileMapCanvas = ({ api }) => {
+    const { t } = i18n.useNiceTranslation();
     const canvasRef = React.useRef(null);
     const containerRef = React.useRef(null);
     const [isDragging, setIsDragging] = React.useState(false);
@@ -171,12 +178,13 @@ const TileMapCanvas = ({ api }) => {
                     (api.editorState.tileMapTool === 'brush' || api.editorState.tileMapTool === 'eraser')) {
                     handleCanvasClick(e);
                 }
-            } })) : (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.emptyState, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: "Create or select a tile map to start editing" }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnPrimary, variant: "primary", onClick: () => api.createTileMap('New Map', 32, 32), children: "Create Tile Map" })] })) }));
+            } })) : (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.emptyState, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.createOrSelectATile', 'Create or select a tile map to start editing') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnPrimary, variant: "primary", onClick: () => api.createTileMap('New Map', 32, 32), children: t('gameAsset2dEditor.createTileMap', 'Create Tile Map') })] })) }));
 };
 /* ────────────────────────────────────────────────────────────────
    SPRITE SHEET CANVAS
 ──────────────────────────────────────────────────────────────── */
 const SpriteSheetCanvas = ({ api }) => {
+    const { t } = i18n.useNiceTranslation();
     const canvasRef = React.useRef(null);
     const fileInputRef = React.useRef(null);
     const activeSheet = api.project.spriteSheets.find((s) => s.id === api.editorState.activeSpriteSheetId);
@@ -243,7 +251,7 @@ const SpriteSheetCanvas = ({ api }) => {
     }, [activeSheet, api]);
     return (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.viewport, children: activeSheet ? (jsxRuntime.jsx("canvas", { ref: canvasRef, className: GameAsset2dEditor_module.viewportCanvas, style: {
                 transform: `translate(-50%, -50%) scale(${api.editorState.zoom})`,
-            }, onClick: handleFrameClick })) : (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.emptyState, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: "Import a sprite sheet to start" }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnPrimary, variant: "primary", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Import Sprite Sheet" }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: (e) => {
+            }, onClick: handleFrameClick })) : (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.emptyState, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.importASpriteSheetTo', 'Import a sprite sheet to start') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnPrimary, variant: "primary", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('gameAsset2dEditor.importSpriteSheet', 'Import Sprite Sheet') }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: (e) => {
                         var _a;
                         const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
                         if (file) {
@@ -256,8 +264,9 @@ const SpriteSheetCanvas = ({ api }) => {
    SPRITE SHEETS LIST
 ──────────────────────────────────────────────────────────────── */
 const SpriteSheetsList = ({ api }) => {
+    const { t } = i18n.useNiceTranslation();
     const fileInputRef = React.useRef(null);
-    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: "Sprite Sheets" }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "+ Import" })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: api.project.spriteSheets.length === 0 ? (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: "No sprite sheets" }) })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.layersList, children: api.project.spriteSheets.map((sheet) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeSpriteSheetId === sheet.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectSpriteSheet(sheet.id), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: sheet.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [sheet.frames.length, " frames"] })] }, sheet.id))) })) }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: (e) => {
+    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.spriteSheets', 'Sprite Sheets') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "+ Import" })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: api.project.spriteSheets.length === 0 ? (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.noSpriteSheets', 'No sprite sheets') }) })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.layersList, children: api.project.spriteSheets.map((sheet) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeSpriteSheetId === sheet.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectSpriteSheet(sheet.id), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: sheet.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [sheet.frames.length, " frames"] })] }, sheet.id))) })) }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: (e) => {
                     var _a;
                     const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
                     if (file) {
@@ -271,6 +280,7 @@ const SpriteSheetsList = ({ api }) => {
 ──────────────────────────────────────────────────────────────── */
 const FramesPanel = ({ api }) => {
     var _a;
+    const { t } = i18n.useNiceTranslation();
     const [animName, setAnimName] = React.useState('');
     const activeSheet = api.project.spriteSheets.find((s) => s.id === api.editorState.activeSpriteSheetId);
     const createAnimationFromSelection = React.useCallback(() => {
@@ -279,13 +289,14 @@ const FramesPanel = ({ api }) => {
             setAnimName('');
         }
     }, [animName, api]);
-    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsxs("span", { children: ["Frames (", (_a = activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.frames.length) !== null && _a !== void 0 ? _a : 0, ")"] }) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, style: { maxHeight: 200 }, children: activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.frames.map((frame) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.selectedFrameIds.includes(frame.id) ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectFrames([frame.id]), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: frame.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [frame.width, "\u00D7", frame.height] })] }, frame.id))) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: "Animations" }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [api.editorState.selectedFrameIds.length > 0 && (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, children: [jsxRuntime.jsx(ui.NiceTextInput, { className: GameAsset2dEditor_module.panelInput, placeholder: "Animation name...", value: animName, onChange: (val) => setAnimName(val) }), jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.btnPrimary, variant: "primary", onClick: createAnimationFromSelection, style: { marginTop: 8, width: '100%' }, disabled: !animName, children: ["Create from ", api.editorState.selectedFrameIds.length, " frames"] })] })), activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.animations.map((anim) => (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: anim.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [anim.frameIds.length, "f"] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeAnimation(anim.id), "aria-label": "Remove animation", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, anim.id)))] })] }));
+    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsxs("span", { children: ["Frames (", (_a = activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.frames.length) !== null && _a !== void 0 ? _a : 0, ")"] }) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, style: { maxHeight: 200 }, children: activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.frames.map((frame) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.selectedFrameIds.includes(frame.id) ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectFrames([frame.id]), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: frame.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [frame.width, "\u00D7", frame.height] })] }, frame.id))) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.animations', 'Animations') }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [api.editorState.selectedFrameIds.length > 0 && (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, children: [jsxRuntime.jsx(ui.NiceTextInput, { className: GameAsset2dEditor_module.panelInput, placeholder: t('gameAsset2dEditor.animationName', 'Animation name...'), value: animName, onChange: (val) => setAnimName(val) }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnPrimary, variant: "primary", onClick: createAnimationFromSelection, style: { marginTop: 8, width: '100%' }, disabled: !animName, children: t('gameAsset2dEditor.createFromFrames', 'Create from {count} frames').replace('{count}', String(api.editorState.selectedFrameIds.length)) })] })), activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.animations.map((anim) => (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: anim.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [anim.frameIds.length, "f"] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeAnimation(anim.id), "aria-label": t('gameAsset2dEditor.removeAnimation', 'Remove animation'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, anim.id)))] })] }));
 };
 /* ────────────────────────────────────────────────────────────────
    ANIMATION STATE MACHINE
 ──────────────────────────────────────────────────────────────── */
 const AnimationStateMachineView = ({ api }) => {
     var _a;
+    const { t } = i18n.useNiceTranslation();
     const [newStateName, setNewStateName] = React.useState('');
     const activeSM = api.project.stateMachines.find((sm) => sm.id === api.editorState.activeStateMachineId);
     // Get all animations from all sprite sheets
@@ -298,7 +309,7 @@ const AnimationStateMachineView = ({ api }) => {
         }
         return result;
     }, [api.project.spriteSheets]);
-    return (jsxRuntime.jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: "State Machines" }), jsxRuntime.jsx("button", { className: GameAsset2dEditor_module.menuBtn, onClick: () => api.createStateMachine('New State Machine'), children: "+ New" })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, style: { maxHeight: 150 }, children: api.project.stateMachines.map((sm) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeStateMachineId === sm.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectStateMachine(sm.id), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: sm.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [sm.states.length, " states"] })] }, sm.id))) }), activeSM && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: "States" }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, children: [jsxRuntime.jsx(ui.NiceTextInput, { className: GameAsset2dEditor_module.panelInput, placeholder: "State name...", value: newStateName, onChange: (val) => setNewStateName(val) }), allAnimations.length > 0 && newStateName && (jsxRuntime.jsx(ui.NiceSelect, { className: GameAsset2dEditor_module.panelInput, style: { marginTop: 4 }, onChange: (val) => {
+    return (jsxRuntime.jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.stateMachines', 'State Machines') }), jsxRuntime.jsx("button", { className: GameAsset2dEditor_module.menuBtn, onClick: () => api.createStateMachine('New State Machine'), children: "+ New" })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, style: { maxHeight: 150 }, children: api.project.stateMachines.map((sm) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeStateMachineId === sm.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectStateMachine(sm.id), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: sm.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [sm.states.length, " states"] })] }, sm.id))) }), activeSM && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.states', 'States') }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, children: [jsxRuntime.jsx(ui.NiceTextInput, { className: GameAsset2dEditor_module.panelInput, placeholder: t('gameAsset2dEditor.stateName', 'State name...'), value: newStateName, onChange: (val) => setNewStateName(val) }), allAnimations.length > 0 && newStateName && (jsxRuntime.jsx(ui.NiceSelect, { className: GameAsset2dEditor_module.panelInput, style: { marginTop: 4 }, onChange: (val) => {
                                                     if (val) {
                                                         api.addState(newStateName, val);
                                                         setNewStateName('');
@@ -312,7 +323,7 @@ const AnimationStateMachineView = ({ api }) => {
                                                 ] }))] }), activeSM.states.map((state) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.selectedStateId === state.id ? GameAsset2dEditor_module.selected : ''} ${activeSM.entryStateId === state.id ? GameAsset2dEditor_module.entry : ''}`, onClick: () => api.selectState(state.id), children: [jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerName, children: [activeSM.entryStateId === state.id && jsxRuntime.jsx(uiCore.NiceIcon, { name: "play", size: 12 }), ' ', state.name] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.effectRemove, variant: "ghost", size: "sm", onClick: (e) => {
                                                     e.stopPropagation();
                                                     api.removeState(state.id);
-                                                }, "aria-label": "Remove state", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, state.id)))] })] }))] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.stateGraph, children: activeSM ? (jsxRuntime.jsxs("svg", { width: "100%", height: "100%", children: [jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("marker", { id: "arrowhead", markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto", children: jsxRuntime.jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: "var(--nice-text-secondary, #4a5a7e)" }) }) }), activeSM.transitions.map((trans) => {
+                                                }, "aria-label": t('gameAsset2dEditor.removeState', 'Remove state'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, state.id)))] })] }))] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.stateGraph, children: activeSM ? (jsxRuntime.jsxs("svg", { width: "100%", height: "100%", children: [jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("marker", { id: "arrowhead", markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto", children: jsxRuntime.jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: "var(--nice-text-secondary, #4a5a7e)" }) }) }), activeSM.transitions.map((trans) => {
                             const from = activeSM.states.find((s) => s.id === trans.fromStateId);
                             const to = activeSM.states.find((s) => s.id === trans.toStateId);
                             if (!from || !to) {
@@ -322,11 +333,11 @@ const AnimationStateMachineView = ({ api }) => {
                         }), activeSM.states.map((state) => {
                             var _a, _b;
                             return (jsxRuntime.jsx("foreignObject", { x: state.position.x, y: state.position.y, width: 120, height: 50, children: jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.stateNode} ${api.editorState.selectedStateId === state.id ? GameAsset2dEditor_module.selected : ''} ${activeSM.entryStateId === state.id ? GameAsset2dEditor_module.entry : ''}`, onClick: () => api.selectState(state.id), children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.stateNodeName, children: state.name }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.stateNodeAnim, children: (_b = (_a = allAnimations.find((a) => a.id === state.animationId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'No animation' })] }) }, state.id));
-                        })] })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: "Create a state machine to design animation flows" }) })) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: "Parameters" }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.addParameter('new_param', 'trigger'), disabled: !activeSM, children: "+ Add" })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: activeSM === null || activeSM === void 0 ? void 0 : activeSM.parameters.map((param) => (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerOpacity, children: param.type }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: param.name }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeParameter(param.id), "aria-label": "Remove parameter", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, param.id))) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: "Transitions" }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [activeSM === null || activeSM === void 0 ? void 0 : activeSM.transitions.map((trans) => {
+                        })] })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.createAStateMachineTo', 'Create a state machine to design animation flows') }) })) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.parameters', 'Parameters') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.addParameter('new_param', 'trigger'), disabled: !activeSM, children: "+ Add" })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: activeSM === null || activeSM === void 0 ? void 0 : activeSM.parameters.map((param) => (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerOpacity, children: param.type }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: param.name }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeParameter(param.id), "aria-label": t('gameAsset2dEditor.removeParameter', 'Remove parameter'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, param.id))) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.transitions', 'Transitions') }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [activeSM === null || activeSM === void 0 ? void 0 : activeSM.transitions.map((trans) => {
                                 var _a, _b;
                                 const from = activeSM.states.find((s) => s.id === trans.fromStateId);
                                 const to = activeSM.states.find((s) => s.id === trans.toStateId);
-                                return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, children: [jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerName, children: [(_a = from === null || from === void 0 ? void 0 : from.name) !== null && _a !== void 0 ? _a : '?', " \u2192 ", (_b = to === null || to === void 0 ? void 0 : to.name) !== null && _b !== void 0 ? _b : '?'] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeTransition(trans.id), "aria-label": "Remove transition", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, trans.id));
+                                return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, children: [jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerName, children: [(_a = from === null || from === void 0 ? void 0 : from.name) !== null && _a !== void 0 ? _a : '?', " ", jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-right", size: 12 }), " ", (_b = to === null || to === void 0 ? void 0 : to.name) !== null && _b !== void 0 ? _b : '?'] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeTransition(trans.id), "aria-label": t('gameAsset2dEditor.removeTransition', 'Remove transition'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, trans.id));
                             }), api.editorState.selectedStateId && (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, style: { marginTop: 12 }, children: [jsxRuntime.jsx("label", { className: GameAsset2dEditor_module.panelLabel, children: "Add transition to:" }), jsxRuntime.jsx(ui.NiceSelect, { className: GameAsset2dEditor_module.panelInput, onChange: (val) => {
                                             if (val && api.editorState.selectedStateId) {
                                                 api.addTransition(api.editorState.selectedStateId, val);
@@ -340,6 +351,7 @@ const AnimationStateMachineView = ({ api }) => {
    EFFECTS PANEL
 ──────────────────────────────────────────────────────────────── */
 const EffectsView = ({ api }) => {
+    const { t } = i18n.useNiceTranslation();
     const [_currentEffects, _setCurrentEffects] = React.useState([]);
     const [presetName, setPresetName] = React.useState('');
     const effectTypes = [
@@ -356,12 +368,12 @@ const EffectsView = ({ api }) => {
         { type: 'shadow', label: 'Shadow' },
         { type: 'palette-swap', label: 'Palette Swap' },
     ];
-    return (jsxRuntime.jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: "Add Effect" }) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: effectTypes.map(({ type, label }) => (jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.layerItem, variant: "ghost", onClick: () => api.addEffect(type), style: { cursor: 'pointer', border: 'none', textAlign: 'left' }, children: jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: label }) }, type))) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: "Presets" }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, children: [jsxRuntime.jsx(ui.NiceTextInput, { className: GameAsset2dEditor_module.panelInput, placeholder: "Preset name...", value: presetName, onChange: (val) => setPresetName(val) }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", style: { marginTop: 4, width: '100%' }, onClick: () => {
+    return (jsxRuntime.jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.addEffect', 'Add Effect') }) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: effectTypes.map(({ type, label }) => (jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.layerItem, variant: "ghost", onClick: () => api.addEffect(type), style: { cursor: 'pointer', border: 'none', textAlign: 'left' }, children: jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: label }) }, type))) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.presets', 'Presets') }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, children: [jsxRuntime.jsx(ui.NiceTextInput, { className: GameAsset2dEditor_module.panelInput, placeholder: t('gameAsset2dEditor.presetName', 'Preset name...'), value: presetName, onChange: (val) => setPresetName(val) }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", style: { marginTop: 4, width: '100%' }, onClick: () => {
                                             if (presetName) {
                                                 api.saveEffectPreset(presetName);
                                                 setPresetName('');
                                             }
-                                        }, disabled: !presetName, children: "Save Current Effects" })] }), api.project.effectPresets.map((preset) => (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, onClick: () => api.loadEffectPreset(preset.id), style: { cursor: 'pointer' }, children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: preset.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [preset.effects.length, " effects"] })] }, preset.id)))] })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.viewport, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: "Select a sprite or tile to preview effects" }) }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: "Active Effects" }) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.effectsList, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: "Add effects from the left panel" }) }) }) })] })] }));
+                                        }, disabled: !presetName, children: t('gameAsset2dEditor.saveCurrentEffects', 'Save Current Effects') })] }), api.project.effectPresets.map((preset) => (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, onClick: () => api.loadEffectPreset(preset.id), style: { cursor: 'pointer' }, children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: preset.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [preset.effects.length, " effects"] })] }, preset.id)))] })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.viewport, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.selectASpriteOrTile', 'Select a sprite or tile to preview effects') }) }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.activeEffects', 'Active Effects') }) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.effectsList, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.addEffectsFromTheLeft', 'Add effects from the left panel') }) }) }) })] })] }));
 };
 /* ────────────────────────────────────────────────────────────────
    STATUS BAR
@@ -392,8 +404,5 @@ const NiceGameAsset2dEditor = ({ className, onSave, onExport, }) => {
     };
     return (jsxRuntime.jsx(ui.NiceAppShell, { className: `${GameAsset2dEditor_module.root} ${className || ''}`, flush: true, menubar: jsxRuntime.jsx(MenuBar, { api: api }), toolbar: jsxRuntime.jsx(ModeTabs, { api: api }), statusBar: jsxRuntime.jsx(StatusBar, { api: api }), children: jsxRuntime.jsx("div", { style: { display: 'flex', flexDirection: 'column', minHeight: 0, height: '100%' }, children: renderModeContent() }) }));
 };
-/** @deprecated Use NiceGameAsset2dEditor */
-const GameAsset2dEditor = NiceGameAsset2dEditor;
 
-exports.GameAsset2dEditor = GameAsset2dEditor;
 exports.NiceGameAsset2dEditor = NiceGameAsset2dEditor;

package/dist/cjs/index.js

@@ -73,14 +73,9 @@ var designTools = require('./design/design-tools.js');
 
 
 exports.NicePixelEditor = PixelEditor.NicePixelEditor;
-exports.PixelEditor = PixelEditor.PixelEditor;
 exports.NiceVectorEditor = VectorEditor.NiceVectorEditor;
-exports.VectorEditor = VectorEditor.VectorEditor;
 exports.NicePhotoEditor = PhotoEditor;
-exports.PhotoEditor = PhotoEditor;
-exports.AnimationEditor = AnimationEditor.AnimationEditor;
 exports.NiceAnimationEditor = AnimationEditor.NiceAnimationEditor;
-exports.AnimatedPerson = AnimatedPerson;
 exports.NiceAnimatedPerson = AnimatedPerson;
 exports.ALL_DIRECTIONS = spriteGeneratorCore.ALL_DIRECTIONS;
 exports.applyIsometricProjection = spriteGeneratorCore.applyIsometricProjection;
@@ -115,8 +110,6 @@ exports.FUR_PALETTES = animalGeneratorPresets.FUR_PALETTES;
 exports.SCALE_PALETTES = animalGeneratorPresets.SCALE_PALETTES;
 exports.initAnimalParts = animalGeneratorPresets.initAnimalParts;
 exports.NiceSpriteGeneratorPanel = SpriteGeneratorPanel;
-exports.SpriteGeneratorPanel = SpriteGeneratorPanel;
-exports.GameAsset2dEditor = GameAsset2dEditor.GameAsset2dEditor;
 exports.NiceGameAsset2dEditor = GameAsset2dEditor.NiceGameAsset2dEditor;
 exports.useGameAssetEditor = useGameAssetEditor.useGameAssetEditor;
 exports.NiceI18nProvider = i18n.NiceI18nProvider;
@@ -190,7 +183,6 @@ exports.booChoreo = choreography.booChoreo;
 exports.danceParty = choreography.danceParty;
 exports.showcaseAll = choreography.showcaseAll;
 exports.waveScoreChoreo = choreography.waveScoreChoreo;
-exports.Audience = Audience;
 exports.NiceAudience = Audience;
 exports.attachScoreReactions = karaokeIntegration.attachScoreReactions;
 exports.onScore = karaokeIntegration.onScore;
@@ -198,12 +190,9 @@ exports.playIntro = karaokeIntegration.playIntro;
 exports.reactionForScore = karaokeIntegration.reactionForScore;
 exports.scoreBus = karaokeIntegration.scoreBus;
 exports.simulateScore = karaokeIntegration.simulateScore;
-exports.BodyRenderer = BodyRenderer.BodyRenderer;
-exports.BodyRendererDefault = BodyRenderer.NiceBodyRenderer;
 exports.NiceBodyRenderer = BodyRenderer.NiceBodyRenderer;
 exports.NiceBodyRendererDefault = BodyRenderer.NiceBodyRenderer;
 exports.HEAD_RENDERERS = heads.HEAD_RENDERERS;
-exports.Head = heads.Head;
 exports.NiceHead = heads.NiceHead;
 exports.EYES_RENDERERS = eyes.EYES_RENDERERS;
 exports.Eyes = eyes.Eyes;